Improving a [web] design, step by step | Hacker News Reader

Improving a [web] design, step by step

attackofdesign.com

66 pointssgrove40 comments

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.

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?

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.

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.

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/

Grids are a subset of ordering mechanisms. I use ordering mechanisms (including grids) often as an architectural designer. Ordering mechanisms are a useful tool for nearly all design processes (and an ordering mechanism need not be geometrical, although for web designers they usually are, which I am not objecting to).

But, by beginning with a 12 column organizing mechanism, you are saying that there is inherent worth in that mechanism. This is fine so far. But, the second you structure your layout into two or three columns -- and look at 960.gs, I don't see any that use more than three or four columns -- a 12 column grid is meaningless. What is important is now a two, three, or four column grid. What else is important is the relationship between the column sizes and spaces. Maybe all three columns are equal, maybe they are not. This depends on your design intentions. But regardless, a 12 column grid has no relation to your actual design.

I imagine myself setting up a 10x10 grid with a spacing of 10 feet. This could be useful to layout columns (architectural ones, that is). But, if I decide I want a 100x70 foot discrete space and a 100x20 foot discrete space separated by 10 feet, then the grid is not relevant to my design. If it is, my only justifiable design stance is an intentional break from that grid. I don't think you are arguing that.

Basically, why should a three column grid be forced to fit an arbitrarily chosen xx column grid? And did the three column grid really result because of the xx column grid? I see no relation whatsoever besides a broken justification for a design process.

> 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.

I don't have the energy now to debate the merits of grid based designs. I was just responding to the guy above who called the OP's use of grid "rubbish" and "tricks". No a grid is not right for every 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.

The Golden Ratio goes back to the Ancient Greeks as they discovered that it appeared frequently in geometry, nature, etc. In classical composition, dividing a rectangle (canvas) in thirds vertically and horizontally, the "power points", that is, the place where a subject derives strong interest and "movement" exist at the intersections of these divisions. http://en.wikipedia.org/wiki/Golden_ratio has some good info.

As I said, I'm too tired to debate you, but if you don't see the point in using a grid, by all means, don't use it.

> 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?

Of course not. It is just a tool to help the designer, a guide. You still have to write just as many styles if not more. Grids are just tools that can help make your designs more consistent. A fantastic resource is here: http://www.smashingmagazine.com/2007/04/14/designing-with-gr...

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

Now you're just being a contrarian. Of course nothing is a rule that cannot be broken, but unless you are doing a free, "avant garde" layout, you probably want some precision, some sense of form.

This discussion is forcing me to reexamine the reason behind basic design principles, which is good!

Precise results and grid-like structures are not inherently better than anything else. But the important point is that they're easier to get right.

By "right", I mean, "supporting your site's message". If two blocks of texts are not aligned properly, people will notice it (even subconsciously). Does that misalignment help the message you want to convey through the site? Maybe it does, but in most cases it was just an oversight, and not a conscious decision on the part of the designer. (a counter-example: you want to promote a kid's toy, so you use misalignment to convey the idea of unstructured, chaotic fun).

Same thing with the golden ration (which, by the way, I don't use myself). Maybe a 3:2 or 16:9 or whatever ratio will work better in some specific cases, but the golden ratio is generally considered pleasing to the eye, and is safer in most situations.

Call it laziness, but I know that when I'm designing a new site, using a grid takes care of a lot of decisions for me. Sure it constrains the design. But in many cases, creativity is born out of contraint.

I don't have a problem with the idea that some of these principles make useful rules of thumb, as long as it's understood that the goal is to make your site effective and any of the other stuff is just a means to that end.

I do have a problem with defroost's position, which seems to be that using things like grids and golden ratios are somehow inherently "right" and if any of us don't agree then we just don't understand.

>I do have a problem with defroost's position, which seems to be that using things like grids and golden ratios are somehow inherently "right" and if any of us don't agree then we just don't understand.

That's not my position, and again, I was responding to the guy above who called the OP's use of grids "rubbish". There is no right or wrong in design. Grids and golden ratios are just a couple of many techniques that web designers use. I'm not sure why you are arguing against such devices, because that's all they are. The are aids, compositional tools and saying they suck is a little like saying a hammer sucks for driving in nails.

My apologies if I misunderstood your position. From this more recent post, it sounds like we agree on the important points. I'm certainly not trying to "argue against" things like grids and ratios, just trying not to elevate them from rules of thumb that sometimes help to some sort of objectively superior choice.

I agree. For example Hipmunk's (http://himpunk.com) UI doesn't follow a conventional fixed grid, because it wouldn't make sense.

As for defroost, I don't think that's what he meant, but I'll let him speak for himself.

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.

"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.

> 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.

I'm a math guy too, so I appreciate the implications. Of course, those implications break as soon as your carefully proportioned columns start having margins/padding. :-)

(BTW, I'm the author of the tutorial) Think of it this way: when you're trying to find something in a city, doesn't it help that the buildings are all properly numbered? Sure, what's important is the building itself, not the fact that its number is 1050 or 1051. But the numbers still help you find it.

Same thing with a grid, it's not the content structure, but it helps make that structure more obvious and the page easier to navigate.

A page without a grid is like a city without building numbers. There may be some great museums and awesome libraries, but what use are they if nobody can find them?

Perhaps your analogy with city buildings is unfortunate, given that only a few places in the world actually do have a regular, grid-like system for identifying buildings. The rest of us manage OK with other street/building layouts, and have done for as long as there have been streets and buildings. It might not be quite as efficient, but somehow we manage not to get lost all the time, and it's certainly a lot more interesting than, say, typical US-style city blocks.

That was part of my point, in a way. I'm from Paris, which doesn't follow a US-style grid at all. We get by without a grid because we're used to it, but the city is probably harder to navigate for newcomers.

So sure, you can have a great grid-less, Paris-style site. But it's much easier to get it right if you follow a grid-like NYC-style layout. And newcomers (which happen to be most visitors) will thank you for it.

Actually I think his analogy with city buildings is perfect:

One of the main things design does for people is make things inherently familiar to them. Apple is the canonical example: who reads the instruction manual for an ipod? NYC's grid system makes it easy to decode the city, much in the way that a layout's grid system makes it easy for the eyes to quickly decode and separate the information.

If your web design includes a grid of 100 elements. By all means, yes, the grid is important.

But your design consists of three columns. Do you really need a 12 column grid to understand that relationship?

OK, I get your point. That's a great point actually, and one that I will add to the article.

The reason I chose 12, is that 12 is divisible by 1, 2, 3, 4, 6, and 12. So even though for now I'm only using three columns, this gives you a lot of flexibility for the other pages or sections of the site. You can keep the same basic grid, but create a lot of different combinations.

If I used a 3-column grid, for example, it would be impossible to obtain two equal-width columns without modifying the grid.

I understand the flexibility argument, and it's a valid one. If you often have grids of 2, 3, 4, or 6 columns, a 12 column grid is surely useful. I abhor grids for two reasons. One, they are often used as justification, which I find completely invalid. Two, they tend to re-enforce your pre-conceived notions of which types of web design would work well. Or even worse, they lock you into thinking that only a design which fits the grid is valid.

I guess I think that grids are an unnecessary component which obstructs the possibilities of design for the web medium.

For me, grids play the same role as something like Rails might on the coding side. Using Rails rather than plain Ruby constrains you and "locks you" into developing your app one way.

But on the other hand, it makes you so much more productive that you're then free to use your creativity towards solving more interesting problems. And it also helps you to get the basics right when you're starting out.

So I agree it's a trade-off, but you shouldn't assume that grids have nothing to bring to the table.

The grid is not a scaffolding or framework, the gridded structure is to help the reader's eyes decode and separate information.

What grid are you talking about? Are your eyes decoding 12 columns of information? Or is it just nice to have two things aligned with each other? I suspect it's the latter. And again, that has absolutely nothing to do with a 12 or 16 or xx grid.

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.

What the heck is "css-hacker"?

I found this short article to be a decent introduction to using grid systems in CSS:

http://sixrevisions.com/web_design/the-960-grid-system-made-...

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.

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.

I agree. It may also because the first colors kinda matched the blog but the second set was really out of place. Also the second color scheme says "domain parking site" to me for some reason I can't quite put my finger on.

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.

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.

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?

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.

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.

>"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."

I see what you're saying but I think you're missing the point that though people will generally not be able to externalise why a design is appealing the effect of the design is still felt.

I'd be inclined to agree that perhaps <10% will notice and <10% of those will think that the details attended to will matter. But, I consider that those who are ignorant of the design process and considerations will possibly be the most effected by those changes.

I don't believe that the tutorial deals with "minute details" that will only be noticed by 10% of the people. But I'll go along with your point.

I think you're coming at this from the wrong point of view. Of course, the other 90% (i.e. what the site actually does, its content, etc.) are more important.

But the goal of this tutorial was teaching what I know, i.e. design, and specifically the visual part of web design (i.e. I didn't talk about branding, interaction design, etc.). So that's what I wrote about.

Reply on news.ycombinator.com