6 ms·

Improving a [web] design, step by step

66 points by sgrove 16y ago

dansingerman 16y ago
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.
- Matti 16y ago
  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-easy/ http://sixrevisions.com/web_design/the-960-grid-system-made-...
- abcd_f 16y ago
  What the heck is "css-hacker"?
samtp 16y ago
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 16y ago
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 16y ago
  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 16y ago
    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 16y ago
      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.
- pbhjpbhj 16y ago
  >"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.
- sgdesign 16y ago
  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.
tedkimble 16y ago
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 16y ago
  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/ http://960.gs/
  - tedkimble 16y ago
    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.
aw3c2 16y ago
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 16y ago
  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.
- neutronicus 16y ago
  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.
deleted 16y ago
[deleted]
sgdesign 16y ago
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 16y ago
  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 16y ago
    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.

66 points by sgrove 16y ago

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.

Matti 16y ago
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-easy/ http://sixrevisions.com/web_design/the-960-grid-system-made-...
abcd_f 16y ago
What the heck is "css-hacker"?

samtp 16y ago

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 16y ago

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 16y ago
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 16y ago
  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 16y ago
    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.
pbhjpbhj 16y ago
>"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.
sgdesign 16y ago
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.

tedkimble 16y ago

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 16y ago
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/ http://960.gs/
- tedkimble 16y ago
  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.

aw3c2 16y ago

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 16y ago
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.
neutronicus 16y ago
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.

deleted 16y ago

[deleted]

sgdesign 16y ago

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 16y ago
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 16y ago
  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.