
How to Make Your Site Look Half-Decent in Half an Hour - tagawa
http://24ways.org/2012/how-to-make-your-site-look-half-decent/
======
gruseom
I've come to dread looking in on these threads. It feels like walking into a
swarm of wasps. Boy is the content/nastiness ratio low in this one. It makes
me sad and, as someone who has spent a lot of time here, ashamed.

To the people making and upvoting these putdowns: you don't come across as
caring about design; you appear to care about feeling superior. That is not
smart. It is a mean person's idea of what it is to be smart. As HN has
acquired a reputation for being a smart place, it has become a mean place.

Do you guys know what "mean", in the sense of "nasty", means? It means
_common_. Look up the root. The more you reinforce your wish to feel smart in
this way, the more common you in fact become. It's hard to see this, because
self-image is always telling us the opposite, and that feels good — really
good. It's the opiate of the jerk.

In my experience, if one really wants to get smarter, one must work on
inhibiting this. I was going to offer a tip or two, but who would want them?

Incidentally, these self-appointed protectors of Design against the masses
appear to me to be significantly more mediocre in this way than some of the
other subgroups here. Perhaps it's sample bias. Or perhaps it's because
there's so little objectivity to any of it that one gets a purer strain of
identity politics — "Leave Design to the Designers" and all that.

On another note, thanks to the OP for the helpful and playful article!

~~~
pknerd
"I was going to offer a tip or two, but who would want them?"

You can make a blog post and submit on HN?

~~~
gruseom
Thanks, but I already feel sheepish for preaching. Besides, HN is my strategy
for never having a blog.

------
AYBABTME
6 months ago I had no damn idea what was bootstrap. Neither did my neighbour.
Now I know what it is, and with this short, pragmatic article, I have a few
pointers on how I could make something 'decent' to my neighbour although I
have 0 skills in graphic design.

And my neighbour still has no damn clue what is Bootstrap, so whatever if it
still 'looks like Bootstrap'. The audience doesn't care.

Nice submission, if you ask me.

~~~
nzealand
Where did you hear about bootstrap?

This is the first time I have seen it, and it looks amazing.

~~~
AYBABTME
Here.

------
choxi
I would encourage people to check out <http://getskeleton.com> instead of
Bootstrap.

Bootstrap has a very rich design already, so it's not a great scaffold to
build on top of because there's very little room for you to add flavor and
customization to it without making it look like a frankenstein design.

Skeleton is really minimal, it basically just does typography, some basic form
styling, and a grid system. It's a much better base to work off of and add to
than Bootstrap.

~~~
choxi
I'l love to hear any suggestions for a framework between Skeleton and
Bootstrap, by the way.

~~~
justinph
Try Foundation. <http://foundation.zurb.com>

~~~
OriginalSyn
I love foundation it really does straddle the difference between bootstrap and
skeleton, light and flexible while being fairly full featured. Plus the grid
system is the tits.

------
DenisM
Most important takeaway from this for me is that you can get designer themes
for Bootstrap, similar to how you can get themes for Wordpress:

<https://wrapbootstrap.com/>

~~~
kops
And the <http://colorschemedesigner.com/>. Two links that may come handy one
day isn't a bad return on an investment of 10 minutes of my time. I also
bookmarked <http://charliepark.org/bootstrap_buttons/> but I suspect i may
never get around to using it.

~~~
tomjen3
I wouldn't brandish that link around too much -- I am sure it is great for
designers but we are most likely to end up making a bigger mess of the entire
thing.

------
tommoor
I clicked through thinking this would be about balance, spacing, typography,
information heirachy and colour. An understanding of these basics will give
you a much better starting point than css3, background textures and webfonts.
There's a damn good article on this somewhere if anybody knows the place...

~~~
andrewfelix
<http://startupsthisishowdesignworks.com/>

~~~
subsection1h
That page doesn't have more than three consecutive paragraphs. It seems to be
designed for children with low IQs and severe ADHD.

~~~
andrewfelix
It was designed to be easily digestible.

Judging by your shallow critique, I would surmise you(ironically) had a low
attention span and didn't even read it.

------
kstenerud
As a programmer and a non-designer, I don't understand how this will help me.
Why are each of the successive design tweaks better than the previous ones?
I've seen pages with flat designs and with gradient designs, with images and
icons and without, and with various fonts, and they all look fine to me. How
are you supposed to tell the difference between good and bad design?

And to take it further, if an average person like me can't even tell the
difference, what's the point of it?

~~~
ZeroGravitas
I didnt read it as design advice but rather a guide to resources. I personally
was aware of all the resources mentioned, but think its a great summary of
whats out there. So it's not saying 'use this font' or even, 'use a different
font', just 'if you want to change the font, get one from here and read this
article about choosing between them.

The article seems to have mainly recieved two contradictory responses from HN.
a) I already use Bootstrap, this article is useless, and b) this article is
bad because it recommends bootstrap, which you should never use, instead
devote the next decade of your life to learning design and build something
unique and award winning instead.

------
54mf
"I am a programmer. I am not a designer."

 _Then perhaps you shouldn't be giving design advice._

"I am a designer. I am not a programmer. Here's how to build a half-decent web
application in half an hour. First, download PHP..."

All due respect but the author knows just enough "design" to be dangerous, so
to speak. Bootstrap is well-designed (dull, but well-designed), and the
author's redesign is more of an "un-designing". Arbitrarily adding fonts,
colors, and background images take a perfectly usable layout and make it look
like something straight out of 2002.

(Do people still use "pimp" as a verb non-ironically?)

[Edit] A note of clarification: I mean no disrespect to anyone doing web
design, whether their job title starts with a capital-D or not. I just
wouldn't recommend that most of them dole out advice about it.

~~~
pseut
> Arbitrarily adding fonts, colors, and background images take a perfectly
> usable layout and make it look like something straight out of 2002.

For sure. I've seen a lot of these "improve bootstrap" articles that advocate
adding fonts, colors, etc. But, at the end of the day, the webpage is still
_obviously_ twitter bootstrap with a few tweaks (almost always for the worse.
I'm not a designer, but "oversized header + buttons for links + 2 or 3 columns
below the header" (and often with something functionally equivalent to a menu
bar at the top) is so clearly bootstrap that I don't understand making any
effort to hide it.

~~~
john_flintstone
It's only clearly Bootstrap to people who have heard of Bootstrap. 99.999% of
your visitors will never have heard of Bootstrap, will never have heard the
word 'framework.'

~~~
pseut
That's not true. I'm not a designer or a developer, but I recognized sites
that in retrospect clearly used bootstrap well before I heard about it. The
hero bar, buttons for links, and (usually) three explanatory columns are
pretty distinctive design elements even to people who don't use the tool.

------
monsur
Nice article, but what's going on with the screenshots on that page? They are
greater than 1MB, 02-fonts.png is +5MB and still loading.

------
WMcNC1
Was looking alright until that background image came along, awful. Not very
fond of the font either - not necessary to be loading other fonts in,
especially that one.

------
zaidf
Why not just use themeforest if your business' core competence isn't design?
Buy a theme from a designer who spent hours taking care of nitty gritty
details that would take you days and weeks. Your _blah niche_ customers would
most likely not notice or care if randomly land on another site with a similar
template.

~~~
jspthrowaway2
That was discussed in the middle of the article, and an alternative site was
suggested. I'm kind of disappointed that the majority of the comments here
seem to be from the title and first few paragraphs alone.

~~~
zaidf
Sure, but the post kind of just glosses over this instead of seriously
evaluating whether uniqueness of design is very important to the _business_.
And if it isn't, why is home rolling your own design as a non-designer a
better _business_ decision than themeforest etc.?

------
FiloSottile
This reminds me of this other similar submission and thread:

Customize Twitter Bootstrap To Not Look Bootstrap-y
<https://news.ycombinator.com/item?id=4427864> [http://antjanus.com/blog/web-
design-tips/user-interface-usab...](http://antjanus.com/blog/web-design-
tips/user-interface-usability/customize-twitter-bootstrap-into-themes/)

------
rbn
Not a fan of the design of the site it self. Waaayyy too many layers.

------
Stratego
This article is not nearly as bad as it makes itself look at first. Speaking
of appearances.

Saying you're giving lousy advice isn't an excuse for giving lousy advice.

> "I want to make my sites look attractive."

Sure, but you should worry about making them usable and solving a design
problem first: how do I best convey the usefulness of this product to its
potential users?

> "Design seemed to consist of complicated rules that weren’t written down
> anywhere, plus an unlearnable sense of taste, possessed only by a black-clad
> elite."

Design is about solving problems elegantly, I'm tired of fellow programmers
rehashing the idea that (interaction) design is like modern art, it couldn't
be further from it. But "seemed" makes it sound like that was just the past,
how about today?

> "I decided to do my best to hack what it took to make my own projects look
> vaguely attractive."

Let's make thing "vaguely attractive", that's the ticket.

> "And too often now, I see excellent programming projects that don’t reach
> the audience they deserve, simply because their design doesn’t match their
> execution."

Couldn't agree more, except their design _is_ their execution. If you mean to
expose your work to the public and fellow professionals, it's your _job_ to
make it compelling.

> "I really think that Bootstrap is one of the most significant technical
> achievements of the last few years: it democratizes the whole process of web
> design."

Because web design was such a dictatorship until now. Yes, I'm nitpicking, but
if you make no effort to learn HTML & CSS, I highly doubt you will by using
bootstrap. Why would you? It looks "half decent" enough as it is. I hope I'm
wrong.

The rest of the article, as others notes, is not nearly as wrongheaded as its
introduction makes it sound. Still, I wish developers would stop trying to
"hack" design and actually have the guts to learn it, as designers do with
programming.

~~~
danenania
"Still, I wish developers would stop trying to "hack" design and actually have
the guts to learn it, as designers do with programming."

I've refactored a whole lot of designer code in my day. Let me assure you that
this is a two way street.

------
muratmutlu
I think it looked better at stage 2 before all the work was done to it. That
font doesn't really look good

~~~
aseidl
Going beyond the not so great font, is it really a good idea to mix serif
fonts with sans serif on the same page, specifically having (sub)headings one
and main content the other? I've noticed this in a few places lately, but it
doesn't seem very clean to me.

~~~
sergiotapia
It's a best practice for design. You want your readers to notice the
differences between content and headers at a glance. And having different font
families for each is the best way to do that.

~~~
aseidl
Makes sense, you want to make it as clear as possible to see that they're
different. My thinking was that if you're already differentiating by size and
weight, why introduce another variation that will take an extra fraction of a
second to process?

------
thenomad
Worth it for the links alone, many of which I'd not seen before.

I AM a semi-competent coder/designer, and I got a decent amount of new
information out of this article. I don't agree with all of it, but I didn't
expect to.

Great info, well-presented, easy to understand, make me think. Five stars,
would read again.

------
emehrkay
_USE BOOTSTRAP_

~~~
baseh
But use google web Fonts to make it less bootstrappy

------
ishbits
I thought the article was fine. I learned a few things.

I'm a developer that sometimes needs to tack a web interface on during the
prototype phase. And I use Bootstrap. And I want it to look like Bootstrap.
Should the time come for a designer, I'd hope the no frills approach would
somewhat convey the desired usability of the app.

This article gave me a few tips - if only a no nonsense guide to using web
fonts!

------
TommyDANGerous
I personally liked the design of 24ways.org. I liked the article she wrote,
even though I don't use bootstrap and design all my sites before I even code
them, the tools she provided are some I've never heard of and will definitely
look to utilize in the near future. Great post.

------
cmwelsh
I liked the first one the best. Just because something is there, does not mean
you have to use it.

------
ashray
I thought this was going to be an article that would tell me how to fix my
existing sites. You know like, make the font larger, increase line height,
that kind of thing.. I know that for new sites I should start out with
bootstrap...

------
bilalq
While I certainly wouldn't recommend this kind of article to most people, I
wish professors from Computer Science departments would try to add just a
little styling. It's painful to go through most of their sites.

------
amix
I would recommend reading "Don't Make Me Think" by Steve Krug. It will teach
you the most important aspects of a usable design - - which are much more
important than just doing a pretty design.

~~~
vanwilder77
exactly!!

------
styts
Thanks for the summary. Although, as a programmer, I've known most of the
things mentioned, it would have still saved me some extra time (better spent
writing code than designing).

------
sergiotapia
I don't know if I should be happy or terrified that I know and use these tips
on a daily basis. I'm just starting out as a UI front-end guy after years of
solid backend work.

------
moe
That has to be the worst webdesign I've seen in months, and I'm talking about
24ways.org.

We're supposed to take design advice from a site that looks like a car
accident?

No thanks.

~~~
duaneb
Ad hominem. The actual advice isn't half bad for a personal site.

------
capex
Everything was sort of okay until the Corben font was introduced onto the
page. A complete crime against design, in the way its been used.

------
pimentel
I've never bought a template, but couldn't I simply get the source of a
template's example, when it's available?

~~~
wowoc
What about copyrights?

------
tbirdz
I wouldn't want to take this advice, from someone with such a poorly designed
site.

------
LiquidEyes
she would have been better off leaving the comic sans quip out of the article.
That ruined any shred of credibility the author had in my eyes.

~~~
13rules
Came here to say _this_.

Didn't get past the line: "I am not a designer... and I don’t mind Comic
Sans."

------
neya
Personally, it's a beautiful article in my opinion.

------
recroad
I'm crying. Why is this the #1 story? And how can a person with such a hideous
looking site give design advice?

~~~
jspthrowaway2
Thank you for your content-free comment. Allow me to point out some problems
with it:

1) This is the #1 story because people other than you find it interesting.

2) The "hideously-designed" site is merely publishing the author's essay, and
is not owned or controlled by the author at all.

3) If you are crying at a Hacker News article which you entirely missed the
point of, as did half the other commenters, then you need a walk.

------
timmm
I've seen another 'designer' with this exact same layout. Heh.

Drew Mclellan was his name.

~~~
drewmclellan
"I've seen this exact same layout on this exact same site."

Dude.

------
jspthrowaway2
This thread is bringing the worst of Hacker News out of the woodwork. The
author is not claiming to be a design expert, nor is she publishing a "how to
design" guide. She's demonstrating a skill which I think a lot of developers
could use: taking Bootstrap, which is a good start for a front end these days,
and making it _not look like Bootstrap_. She even _says this_ in TFA. It's for
developers without a designer _to make their site look half-decent in half an
hour_. That's the TITLE.

Since we all like MVPs and demo days here, I would think this is applicable to
a _lot_ of people on Hacker News. You want to stand apart from the other ten
demoing startups that used Bootstrap as well, don't you? Put a little effort
in, which is _all_ she is advocating.

Based on the quality of the majority of the comments here it seems like most
people opened it, saw the ugly design of the site which _is only publishing
her work_ (she didn't design it), made it a few paragraphs in, then ran back
to comment about how articles like this are killing our profession, making
them ill, making them cry, or how she shouldn't be giving design advice.

Dreadful. Truly dreadful. You're better people than this.

~~~
pseut
1\. It's Saturday night.

2\. It still looks like bootstrap. Telling people, "use bootstrap, but quickly
change the fonts and colors and maybe add some images" isn't helpful. I
wouldn't mind an article outlining how to use LESS to make bootstrap not look
like bootstrap (which would involve, at a minimum, not using a 12-column grid,
because I associate that with bootstrap more than anything else). And that
seems like something developers should be interested in.

3\. There are an ungodly number of blog posts that say, "use bootstrap, but
change the fonts etc so that it doesn't look like bootstrap." The specific
details: "use textures" for example, made the example site look worse, so it's
hard to see what this article added.

~~~
tomjen3
A comment like that is not helpful; bootstrap is not a bad design and would be
a lot better than what you would see on most geek designed sites.

In other words, get of your high horse.

~~~
pseut
Didn't mean to come across as anti-bootstrap. I use it! It's the "tweak it"
part of these articles I don't like.

~~~
tomjen3
Then I would like to extend my appologies for the harshness of my comment.

~~~
pseut
No worries, the comment let me know that I needed to clarify what I wrote
earlier, so I appreciated it.

------
vicks711
This is a wonderful article. I am planning to launch a MVP and was struggling
with a design of the website.

Though I have dabbled with CSS and know the basics I am basically design
challenged. This article helps a lot.

thanks

------
richforrester
Not a fan.

~~~
richforrester
Wow. Got a lot of minus points for stating that I'm not a fan. Guess I
should've elaborated.

Perhaps I should've spoken about how I think half an hour is cutting it a bit
tight.

Perhaps I should've mentioned that the background-image idea isn't too smart,
as it leaves too much room for erring with non-fitting imagery. That's part of
what designers do: they know what fits together - you shouldn't expect
programmers to be able to do that. And if you're really set on educating
programmers, maybe talk about the background-image's colors, composition or
contrast. Or maybe suggest a totally blurred image or _something_ gimmicky
that will make it an "instant hit".

Perhaps I should've mentioned that making bootstrap _not_ look like bootstrap
in half an hour, inevitably means that you're going to end up with a lesser
product. Bootstrap has been designed from the bottom up. You either use that
and it's default features, or end up with a hybrid that looks like you "tried
to make a half-decent site in half an hour".

But thanks for the rage points there. I wonder if I could make up some points
by posting "I'm a fan" elsewhere.

~~~
jspthrowaway2
The reason you got downvoted is because _these_ thoughts should have been the
ones you shared. Hacker News punishes tiny comments that add nothing to the
discussion. So, you're not a fan. Tell us _why_.

Now you know.

~~~
richforrester
Fair enough.

(I mean: I'm pretty new to the community, so thanks for the heads up. Live 'n
learn, right?)

------
dropdownmenu
I never knew that I should use bootstrap and then extend it with custom CSS to
make my site look better. I would have never thought to do that! /sarcasm

