This link has been bookmarked by 367 people . It was first bookmarked on 17 Dec 2007, by James Tinsky.
-
23 Nov 12
So today I've put together my 9 principles for good web design, it's only my opinions and I've tried to link off to more reading on subjects so you don't only hear my voice. Obviously I have lots of disclaimers, rules are made to be broken, different type
advice usability design webdesign tips website web2.0 development
-
28 Sep 11
-
27 Sep 11
-
27 Dec 10
-
02 Mar 10
-
13 Feb 10
-
15 Oct 09
-
04 May 09
Rodrigo de OliveiraBom artigo sobre princípios essenciais para um bom design web
-
14 Feb 09
-
13 Feb 09
-
05 Feb 09
-
03 Feb 09
-
13 Jan 09
-
19 Dec 08
-
07 Dec 08
-
01 Dec 08
-
14 Nov 08
-
12 Nov 08
-
09 Nov 08
-
31 Oct 08
-
26 Oct 08
-
16 Sep 08
-
11 Sep 08
-
18 Aug 08
-
11 Aug 08
-
A simple example of precedence is that in most sites, the first thing you see is the logo. This is often because it’s large and set at what has been shown in studies to be the first place people look (the top left).
-
- Position — Where something is on a page clearly influences in what order the user sees it.
- Color — Using bold and subtle colors is a simple way to tell your user where to look.
- Contrast — Being different makes things stand out, while being the same makes them secondary.
- Size — Big takes precedence over little (unless everything is big, in which case little might stand out thanks to Contrast)
- Design Elements — if there is a gigantic arrow pointing at something, guess where the user will look?
To achieve precedence you have many tools at your disposal:
-
Line Spacing
When you lay text out, the space between the lines directly affects how readable it appears. Too little space makes it easy for your eye to spill over from one line to the next, too much space means that when you finish one line of text and go to the next your eye can get lost. So you need to find a happy medium. You can control line spacing in CSS with the 'line-height' selector. -
Padding
Generally speaking text should never touch other elements. Images, for example, should not be touching text, neither should borders or tables. Padding is the space between elements and text. The simple rule here is that you should always have space there -
White Space
First of all, white space doesn't need to be white. The term simply refers to empty space on a page (or negative space as it's sometimes called). White space is used to give balance, proportion and contrast to a page -
Navigation — Where can you go?
There are a few commonsense rules to remember here. Buttons to travel around a site should be easy to find - towards the top of the page and easy to identify. They should look like navigation buttons and be well described. The text of a button should be pretty clear as to where it's taking you. -
Orientation — Where are you now?
-
Can it actually be done?
You might have picked an amazing font for your body copy, but is it actually a standard HTML font? You might have a design that looks beautiful but is 1100px wide and will result in a horizontal scroller for the majority of users. It's important to know what can and can't be done, which is why I believe all Web designers should also build sites, at least sometimes. -
What happens when a screen is resizes?
Do you need repeating backgrounds? How will they work? Is the design centered or left-aligned? -
Are you doing anything that is technically difficult?
Even with CSS positioning, some things like vertical alignment are still a bit painful and sometimes best avoided. -
Could small changes in your design greatly simplify how you build it?
Sometimes moving an object around in a design can make a big difference in how you have to code your CSS later. In particular, when elements of a design cross over each other, it adds a little complexity to the build. So if your design has, say three elements and each element is completely separate from each other, it would be really easy to build. On the other hand if all three overlap each other, it might still be easy, but will probably be a bit more complicated. You should find a balance between what looks good and small changes that can simplify your build. -
For large sites, particularly, can you simplify things?
There was a time when I used to make image buttons for my sites. So if there was a download button, for example, I would make a little download image. In the last year or so, I've switched to using CSS to make my buttons and have never looked back. Sure, it means my buttons don't always have the flexibility I might wish for, but the savings in build time from not having to make dozens of little button images are huge. -
Font Choices — Different types of fonts say different things about a design. Some look modern, some look retro. Make sure you are using the right tool for the job.
-
Font sizes —Years ago it was trendy to have really small text. Happily, these days people have started to realize that text is meant to be read, not just looked at.
-
Spacing — As discussed above, spacing between lines and away from other objects is important to consider. You should also be thinking about spacing between letters, though on the Web this is of less importance, as you don't have that much control.
-
Line Length — There is no hard and fast rule, but generally your lines of text shouldn't be too long. The longer they are, the harder they are to read.
-
Color
-
Paragraphing
-
justified text tends to create weird gaps between words where they have been auto-spaced. This isn't nice for your eye when reading, so stick to left-aligned
-
Adhering to Standards
There are certain things people expect, and not giving them causes confusion. For example, if text has an underline, you expect it to be a link. Doing otherwise is not good usability practice -
Think about user tasks
When a user comes to your site what are they actually trying to do? List out the different types of tasks people might do on a site, how they will achieve them, and how easy you want to make it for them. This might mean having really common tasks on your homepage (e.g. 'start shopping', 'learn about what we do,' etc.) or it might mean ensuring something like having a search box always easily accessible. -
You may also wish to base your designs on a specific grid.
-
- Keep shape edges snapped to pixels. This might involve manually cleaning up shapes, lines, and boxes if you're creating them in Photoshop.
- Make sure any text is created using the appropriate anti-aliasing setting. I use 'Sharp' a lot.
- Ensuring that contrast is high so that borders are clearly defined.
- Over-emphasizing borders just slightly to exaggerate the contrast.
-
Consistency
Consistency means making everything match. Heading sizes, font choices, coloring, button styles, spacing, design elements, illustration styles, photo choices, etc. Everything should be themed to make your design coherent between pages and on the same page.
-
-
04 Aug 08
-
03 Aug 08
-
02 Aug 08
-
18 Jul 08
-
15 Jul 08
-
07 Jul 08
-
05 Jul 08
-
18 Jun 08
-
16 Jun 08
-
15 Jun 08
-
14 Jun 08
-
13 Jun 08
-
04 Jun 08
-
26 May 08
-
28 Apr 08
-
27 Apr 08
Simone Economo"Web design can be deceptively difficult. Getting a design that is both usable and pleasing, delivers information and builds brand, is technically sound and visually coherent..."
usability typography readability accessibility bestpractices design webdesign inspiration interface layout webdev for:checkm for:tyrion.mx for:andreagandino
-
25 Apr 08
-
24 Apr 08
-
23 Apr 08
-
22 Apr 08
-
18 Apr 08
-
17 Apr 08
-
16 Apr 08
-
13 Apr 08
Masha du Toita clear and straightforward article of applying basic design principles to web design, with lots of very useful links to other resources
-
27 Mar 08
-
24 Mar 08
-
20 Mar 08
-
05 Mar 08
-
04 Mar 08
-
29 Feb 08
-
19 Feb 08
-
18 Feb 08
-
11 Feb 08
-
07 Feb 08
-
06 Feb 08
-
31 Jan 08
-
30 Jan 08
-
28 Jan 08
-
25 Jan 08
Simon BricoloQuelques bons principes à ne pas oublier lors du design d'une page web
-
23 Jan 08
-
22 Jan 08
-
21 Jan 08
-
18 Jan 08
-
1. Precedence (Guiding the Eye)
-
2. Spacing
-
3. Navigation
-
4. Design to Build
-
Can it actually be done?
-
What happens when a screen is resizes?
-
Are you doing anything which is technically difficult?
-
Could small changes in your design greatly simplify how you build it?
-
For large sites particularly, can you simplify things?
-
5. Typography
-
6. Usability
-
7. Alignment
-
8. Clarity (Sharpness)
-
- Keep shape edges snapped to pixels - This might involve manually cleaning up shapes, lines and boxes if you're creating them in Photoshop.
- Make sure any text is created using the appropriate anti-aliasing setting - I use 'Sharp' a lot
- Ensuring contrast is high so that borders are clearly defined
- Over-emphasizing borders just slightly to exaggerate the contrast.
-
9. Consistency
-
-
16 Jan 08
-
15 Jan 08
-
13 Jan 08
-
12 Jan 08
-
11 Jan 08
-
10 Jan 08
-
09 Jan 08
-
08 Jan 08
-
07 Jan 08
Would you like to comment?
Join Diigo for a free account, or sign in if you are already a member.