
Improving a [web] design, step by step - sgrove
http://www.attackofdesign.com/improving-a-design-step-by-step-part-1/
======
sgdesign
Just to avoid confusion I'd like to clear up the reason I wrote this tutorial.

The thing is, web design isn't that hard. You can learn it by yourself (as I
did) and you don't even need any artistic talent (I'm a CS major, and can't
draw to save my life). Of course if you want to be really good at it, you'll
have to put in a lot of work. But the basics are easy to master, and also
happen to be the things that make the biggest difference.

So it's frustrating to me when I see a site that misses out on something basic
like having a grid or using proper-sized fonts. That's why I thought I'd
create a step-by-step tutorial that can act as a kind of checklist when you're
designing a site. You don't need to follow these step religiously (or even in
that order), but I'd advise that you at least consider how each of them could
apply to your design.

BUT I'm not saying that every site should adopt the same grid and the same
boring "Web 2.0" look (I picked that look because it's become somewhat of a
standard, for better or for worse), nor am I saying that visual polish is
everything. You still need a good product or interesting content behind your
site's good looks.

~~~
neutronicus
One of the best things you did in changing the design was switching the "About
Me" and "From the Blog" columns going from panel (N-1) to panel N, but you
never call it out or describe your reasoning. Did you mean to switch it after
the "F shape" illustration?

~~~
sgdesign
Good call. I don't really remember if I intended this to be part of the
tutorial or not, but I switched it because it makes more sense to know about
you before reading your blog. I'll add a note about that.

------
tedkimble
This is rubbish.

> The first thing that jumps out is that the layout lacks structure.

This 12 column grid is superficial, at best. All the author did was equalize
the padding of like elements.

The structure of this page -- yes, it has structure -- is a nav bar, followed
by text and an image, followed by three columns of text, followed by a footer.
There is no structure added to the page by aligning the elements to match the
arbitrarily chosen 12 column grid.

If grids help you align elements more easily, fine. But I find all of these
designers who praise the holy grid only to utilize columns 1, 6, and 19, for
instance, to be full of crap.

More often then not, the grid provides a faulty sense of order -- a notion
that you've given the layout "structure". But the important structure of the
web page is not its geometrical details, but the relationship between elements
of content. Don't let some ideal grid trick you into thinking otherwise.

~~~
defroost
Understanding and using a grid as well as the golden ratio are not tricks. If
you think they are your just don't understand why designers, artists,
photographers, etc. use such techniques. What is more, just because the author
here doesn't go into all the uses of the grid system in general, or talk about
a particular grid framework like 960 or Blueprint doesn't mean grids are not
valid.

This guy knows his work. A look at his portfolio shows he uses the grid for
more than "equalizing padding of like elements". Again, alignment,
relationship between elements of content, hierarchy, all work together. On
simple pages you may not benefit from a grid, but complex designs with tons of
elements, and irregular blocks will always be easier to obtain more precise
results with block placement and typography with a grid system. Look at the
designs at 960 and tell me they could have been achieved as easily without a
grid. <http://960.gs/>

~~~
Silhouette
> Understanding and using a grid as well as the golden ratio are not tricks.
> If you think they are your just don't understand why designers, artists,
> photographers, etc. use such techniques.

Perhaps, then, you would be kind enough to share the compelling arguments with
the mere mortals among us? Apparently I don't understand either, and I've been
exploring this field for about two decades now.

I could understand an argument that a lot of people find content areas that
are a bit wider than they are high aesthetically pleasing. I'm not sure I've
ever seen any serious data on the subject, but given where our two eyes sit in
our heads, it's at least plausible. But why should that mean the width should
be 1.618 times the height?

As another example, why should the left column in my two-column layout be
1.618 times the width of my right column (this being the last advice I
remember seeing that involved using the golden ratio in design)?

Why not a 3:2 ratio in each case? Why not 16:9? Why not 1.414:1? At least the
last one has some neat recursive properties, as anyone who works with A4 paper
probably knows.

> On simple pages you may not benefit from a grid, but complex designs with
> tons of elements, and irregular blocks will always be easier to obtain more
> precise results with block placement and typography with a grid system.

What does that even mean? If I put a block at a certain place on a web page
with CSS positioning, will it somehow not be where I wanted it if my styles
aren't based on some regular grid system?

Why are "precise results" even desirable as a general rule? Some design styles
suggest a formal, regular layout. Others do not.

~~~
neutronicus
If your left column is 1.618 times the width of the right column, the width of
the two columns together is then 1.618 times the width of the left column. It
means that you decrease the size of elements by the same ratio each time you
go down a level of importance: e.g.

title-bar / main-content == main-content / subsidiary-content

Not sure _why_ one would want to do that, but as a math guy I feel it's my
duty to chime in.

~~~
jamesbritt
"Not sure why one would want to do that, but as a math guy I feel it's my duty
to chime in."

It's sort of like trying to explain why one would use a I IV V chord
progression, or why a major triad sounds good. There are interesting ratios in
there, though few people are explicitly calculating them in their heads.

~~~
defroost
> It's sort of like trying to explain why one would use a I IV V chord
> progression, or why a major triad sounds good.

That's exactly the point. When people hear a chord progression or see a
painting where the subject is placed according to certain rules of
composition, it evokes a feeling of harmony. Conversely, a photograph with the
subject bulls-eyed dead center feels motion-less. It's not wrong, but it can
be less interesting, more stagnant.

------
dansingerman
As a css-hacker who doesn't really know anything about (or have talent for)
web design, this was actually very enlightening.

Breaking it down into steps seems to be the first stage of gaining some
understanding of (but not necessarily the ability to do) the web design
process.

~~~
abcd_f
What the heck is "css-hacker"?

------
aw3c2
I really dislike the new colour scheme. It looks cold, neon and somehow
repelling. The old one was warm and reminded me of holiday homes with wooden
walls.

~~~
sgdesign
I did my best to pick really ugly colors for the first color scheme. But I
guess it does look vaguely christmas-y. Anyway the second color scheme is not
outstanding either, I'll admit that. But I do think it looks a little more
professional.

------
samtp
While this was interesting, none of the text aligned right for me (chromium on
ubuntu). Any link in the text would be on top of other text.

------
synnik
This focuses heavily on the wrong side of the 10% rule: For minute details on
ANY creation.... only 10% of people who see it will notice. And only 10% of
those who notice will care.

If you've got the time and energy to keep that 1% happy, go for it. (And most
readers of HN may be in that 1%.)

But you should do so AFTER the other 99% are satisfied.

~~~
brianmwang
Are you really arguing that alignment, consistency, appropriate typography,
non-mediocre use of color, and more broadly, overall usability are only
relevant to 1% of web users?

~~~
synnik
No -- I am arguing that alignment, consistency, appropriate typography, non-
mediocre use of color are only NOTICED and cared about by 1%.

Overall usability is what the other 99% care about. And should be of primary
importance.

Saying that overall usability == "alignment, consistency, appropriate
typography, non-mediocre use of color" is just not true.

Usability is one type of design. Those are another. They are not synonymous.

~~~
brianmwang
I would argue that all those things I listed _do_ in fact comprise much of
what we understand as usability. Proper layout and good information
architecture are built hand in hand with good alignment, consistency, readable
fonts, and colors that work well together for the overall design. In order for
interfaces to be understandable and easy to use, as well as enable the user to
complete the desired objectives, all of the factors I mentioned have to be
taken into account.

You may say that these factors aren't noticed by the 99% but have you ever
heard somebody utter the phrase, "I don't know what's wrong with this, but I
just don't like the way it looks?" That's a "99% phrase" but it comes from a
very real place and can be easily avoided.

