Web design can be deceptively difficult, as it involves achieving a design that is both usable and pleasing, delivers information and builds brand, is technically sound and visually coherent.
Add to this the fact that many Web designers (myself included) are self-taught, that Web design is still novel enough to be only a side subject in many design institutions, and that the medium changes as frequently as the underlying technology does.
So today I've put together my 9 principles for good Web design. These are 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 types of design work differently, and I don't always live up to my own advice. So please read these as they are intended--just some observations I am sharing...
Capture the Valley uses bars of color to guide your eye through sections from top to bottom...
1. Precedence (Guiding the Eye)
Good Web design, perhaps even more than other type of design, is about information. One of the biggest tools in your arsenal to do this is precedence. When navigating a good design, the user should be led around the screen by the designer. I call this precedence, and it's about how much visual weight different parts of your design have.
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). his is a good thing since you probably want a user to immediately know what site they are viewing.
But precedence should go much further. You should direct the user’s eyes through a sequence of steps. For example, you might want your user to go from logo/brand to a primary positioning statement, next to a punchy image (to give the site personality), then to the main body text, with navigation and a sidebar taking a secondary position in the sequence.
What your user should be looking at is up to you, the Web designer, to figure out.
To achieve precedence you have many tools at your disposal:
- 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?
Further Reading:
You can read more of my thoughts on Precedence in an old PSDTUTS post called Elements of Great Web Design - the polish. Joshua David McClurg-Genevese discusses principles of good web design and design at Digital-Web. Joshua also has the longest name ever :-)
Marius has a very clean, very simple site with plenty of space
2. Spacing
When I first started designing I wanted to fill every available space up with stuff. Empty space seemed wasteful. In fact the opposite is true.
Spacing makes things clearer. In Web design there are three aspects of space that you should be considering:
- 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. Generally I find the default value is usually too little spacing. Line Spacing is technically called leading (pronounced ledding), which derives from the process that printers used to use to separate lines of text in ye olde days — by placing bars of lead between the lines.
- 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. There are exceptions of course, in particular if the text is some sort of heading/graphic or your name is David Carson :-) But as a general rule, putting space between text and the rest of the world makes it infinitely more readable and pleasant. - 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. A lot of white space tends to make things seem more elegant and upmarket, so for example if you go to an expensive architect site, you'll almost always see a lot of space. If you want to learn to use whitespace effectively, go through a magazine and look at how adverts are laid out. Ads for big brands of watches and cars and the like tend to have a lot of empty space used as an element of design.
Further Reading:
At WebDesignFromScratch there is a great article called the Web 2.0 how-to design guide, which discusses Simplicity - a concept that makes a lot of use of spacing. There's plenty of other useful stuff there too!
Noodlebox does a good job of using on/off states in their navigation to keep the user oriented.
3. Navigation
One of the most frustrating experiences you can have on a Web site is being unable to figure out where to go or where you are. I'd like to think that for most Web designers, navigation is a concept we've managed to master, but I still find some pretty bad examples out there. There are two aspects of navigation to keep in mind:
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. Aside from the common sense, it's also important to make navigation usable. For example, if you have a rollover sub-menu, ensuring a person can get to the sub-menu items without losing the rollover is important. Similarly changing the color or image on rollover is excellent feedback for a user.
Orientation — Where are you now?
There are lots of ways you can orient a user so there is no excuse not to. In small sites, it might be just a matter of a big heading or a 'down' version of the appropriate button in your menu. In a larger site, you might make use of bread crumb trails, sub-headings and a site map for the truly lost.
Further Reading:
SmashingMagazine has a selection of CSS-based navigation styles which are nice to go through, and #3 is one of mine! A List Apart also has a good article about orientation called Where Am I?
4. Design to Build
Life has gotten a lot easier since Web designers transitioned to CSS layouts, but even now it's still important to think about how you are going to build a site when you're still in Photoshop. Consider things like:
- 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.
If anyone knows good type it's iLoveTypography!
5. Typography
Text is the most common element of design, so it's not surprising that a lot of thought has gone into it. It's important to consider things like:
- 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. Make sure your text sizes are consistent, large enough to be read, and proportioned so that headings and sub-headings stand out appropriately.
- 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. Small columns of text work much better (think about how a newspaper lays out text).
- Color — One of my worst habits is making low-contrast text. It looks good but doesn't read so well, unfortunately. Still, I seem to do it with every Web site design I've ever made, tsk tsk tsk.
- Paragraphing — Before I started designing, I loved to justify the text in everything. It made for nice edges on either side of my paragraphs. Unfortunately, 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 unless you happen to have a magic body of text that happens to space out perfectly.
Further Reading:
Nick La at WebDesignerWall has a great article about online typography called Typographic Contrast and Flow .
Happycog know usability inside out, and their own site is simple and easy to use.
6. Usability
Web design ain't just about pretty pictures. With so much information and interaction to be effected on a Web site, it's important that you, the designer, provide for it all. That means making your Web site design usable.
We've already discussed some aspects of usability - navigation, precedence, and text. Here are three more important ones:
- 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. Sure, you can break some conventions, but most of your Web site should do exactly what people expect it to do! - Think about what users will actually do
Prototyping is a common tool used in design to actually 'try' out a design. This is done because often when you actually use a design, you notice little things that make a big difference. ALA had an article a while back called Never Use a Warning When You Mean Undo, which is an excellent example of a small interface design decision that can make life suck for a user. - 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. At the end of the day, your Web design is a tool for people to use, and people don't like using annoying tools!
Further Reading:
AListApart has lots of articles on web usability.
Electric pulp manages to look rough, but if you look closely you realize there is a firm grid and things actually all line up.
7. Alignment
Keeping things lined up is as important in Web design as it is in print design. That's not to say that everything should be in a straight line, but rather that you should go through and try to keep things consistently placed on a page. Aligning makes your design more ordered and digestible, as well as making it seem more polished.
You may also wish to base your designs on a specific grid. I must admit I don't do this consciously - though obviously a site like PSDTUTS does in fact have a very firm grid structure. This year I've seen a few really good articles on grid design including SmashingMagazine's Designing with Grid-Based Approach & A List Apart's Thinking Outside The Grid. In fact, if you're interested in grid design, you should definitely pay a visit to the aptly named DesignByGrid.com home to all things griddy.
The ExpressionEngine site is the soul of clarity. Everything is sharp and clean.
8. Clarity (Sharpness)
Keeping your design crisp and sharp is super important in Web design. And when it comes to clarity, it's all about the pixels.
In your CSS, everything will be pixel perfect so there's nothing to worry about, but in Photoshop it is not so. To achieve a sharp design you have to:
- 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.
Further Reading:
I wrote a bit more about clarity in Elements of Great Web Design - the polish. I've noticed that print designers transitioning to Web design, in particular, don't think in pixels, but it really is vital.
Veerle does a great job of keeping even the tiniest details consistent across the board.
9. 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.
Keeping your design consistent is about being professional. Inconsistencies in a design are like spelling mistakes in an essay. They just lower the perception of quality. Whatever your design looks like, keeping it consistent will always bring it up a notch. Even if it's a bad design, at least make it a consistent, bad design.
The simplest way to maintain consistency is to make early decisions and stick to them. With a really large site, however, things can change in the design process. When I designed FlashDen, for example, the process took months, and by the end some of my ideas for buttons and images had changed, so I had to go back and revise earlier pages to match later ones exactly.
Having a good set of CSS stylesheets can also go a long way to making a consistent design. Try to define core tags like <h1> and <p> in such a way as to make your defaults match properly and avoid having to remember specific class names all the time.
Further Reading:
The ThinkVitamin article How CRAP is your design? discusses Repetition going down the page and how important it is. The article is written by Mike Rundle who designs 9rules, so you know it's worth reading!
Get my Book!
Enjoyed this article? I've just completed a book on freelancing that you can purchase online as an eBook. Head over to find out more about How to Be a Rockstar Freelancer.Related Posts
Keep reading with more great tutorials and articles!
Enjoy this Post?
We'd love your vote!
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Jimmy December 17th
Grt one reaaly.Thanks a lot.:)
( )IT Bay June 7th
All of Know
( )Michael Castilla December 17th
Wow! Hell of an article you’ve put together here. Just skimming through, it looks great. Thanks for sharing!
( )Collis December 17th
Thanks guys! Yeah I came in to work this morning and thought “I’ll quickly write an article” … 7 hours later
I really should stop underestimating how much work things take!
( )Eli December 17th
Very extensive article, tons of helpful information here. Good job Collis.
( )Jonathan Solichin December 17th
thanks for the tips and info. I think the problem with most site (including mine) is not that it lacks these, but it is unbalanced. More reading hopefully will help
( )Andrew December 17th
Wow great article and I love the details, by far one of your best.
PS: I love these web design tutorials, you should make more of them
Possibly one about the web design process from start to finish.
( )Clark December 17th
What programs do you use to make websites? I’ve been really keen to learn how to do it but have never had any training… is it possible to have a regular Dreamweaver (or similar program) tutorial?
( )Collis December 17th
Hey Clark, actually I just hand code things, so much the same as using Notepad. I’d suggest the best thing to do is really to learn HTML. I’m sure one day Dreamweaver etc will be good enough so that you don’t need to code yourself, but currently, especially for CSS layouts, it’s a bit crappy still (in my opinion).
( )johno December 17th
A great article. A lot of work has gone into this.
( )Some very useful tips and explained in a very no-nonsense way.
Thanks for the mention too. Keep up the great work guys.
Taras (NobsTutorials) December 17th
Great article indeed, Collis, many thanks for this!
The only thing I would suggest here is why not illustrate the principles on some case studies? I.e. you could not just add website snapshots to every section, but actually dissect them and show with some arrows or guidelines or something how these principles are used in each design. Of course I understand it’s one hell of a work, much more than just writing an article - but I think that would be fantastic
Thanks again and keep up your great job!
( )MrQwest December 17th
Great article.. Has been saved for future reading!
Good work buddy
( )Iain Fraser December 17th
Wow Collis, great article! Excellent and beautiful examples. Well done! This one’s a keeper
( )Ihatetomatoes.net December 17th
Great reading. Thanks for that, mate.
( )Scarf*oo December 17th
The article is a bit simplistic, but it is still a nice read. Good examples of web sites!
( )Constantin Baciu December 17th
This is a great article (I would consider it as a guide-line) for web designers that want to better the user-experience for their users.
A small comment is on my blog.
( )josh December 17th
Nice article,
I stumbled upon it through digg and I thought you might want to know that your navigation is slightly broken in Firefox 2.0.0.11 on Ubuntu.
( )Highlander December 17th
This is really good material and I appreciate your taking the time to put it together. Much obliged!
( )Jemo December 17th
Good article, i would love to see some webdesign tutorials on this site!
( )Ukrnet December 17th
Veri interesting! Grate worke dude!!!
it goes to bookmarks …
( )Ross Kendall December 17th
Good article! At first I was a bit skeptical, thinking it was just another link-bait post, but glad to be proved wrong.
It will make a nice reference for me to pass on to designers I work with.
Cheers!
( )emil December 17th
great article, I’m gonna take a better look when I get time.
( )It’s great it not just covers C.R.A.P., design is more than that
Doberman December 17th
really nice article! So many things to take into consideration which I think is the hardest part of making a website.
( )Dustin Brewer December 17th
Great article. I like the way the sections are broke up, definitely a different approach.
( )mike December 18th
You violate two of your “rules”. Small font size and lack of contrast (which you admit). What’s wrong with Black on White and not this crappy gray on white!? If you don’t follow your rules, are they really worth reading in the first palce.
If your printer started printing gray you’d quickly run out and put in a new toner. Gray text color makes your site look you’re too cheep to fix your printer.
( )Pete December 18th
Nice article. Not self righteous either. Sometimes I find design articles written as if the author is the greatest web designer on earth and its a gift to bestow their knowledge upon you. Thanks for doin’ a great job.
( )paul December 18th
VERY GOOD EXPLINATION OF THE ELEMENTS, GREAT STUFF
( )lizardboi December 18th
Usefull and motivating for new designers! thanks
( )Noah Everett December 18th
Great read. I really appreciate the high quality articles that you post. Less articles, high quality.
( )decimus December 18th
Marvelous article !!! thx
( )Shannon December 18th
Great run down with examples of the ins and outs of web design. I wasn’t sure about the “adhere to standards” section, agree that one shouldn’t go against the grain do exactly what they please. But there are more ways of differentiating a link that just an underlined block of text.
( )chris December 18th
My opinion is that too many people are “Designing to Build”. That is why so many websites look the same. Although some things are important to think about, creativity should never suffer because you don’t know how you are going to build it right away. Nice article though!
( )Alex December 18th
I’ll definately be reading your book Collis, lovely article!
( )Blogerko December 18th
Woow, good list, thanx
( )Azhar December 18th
Umm….. wow.
( )Hamish M December 18th
Great tips Collis, keep it up!
( )Samuel Clarke December 18th
Very good article!
( )Constantin Potorac December 18th
Thank you, thank you, thank you for the tips.
( )spell casting December 18th
thanks for the information and happy holidays
( )ress December 18th
nice tips… i’ll use it as my guidelines of works
( )Ravi Vora December 18th
I really enjoyed this article since it showcases some of the more conceptual principles that we sometimes forget are in each design.
( )Carlos Leopoldo December 18th
Very usefull article, I will comment it in my blog in spanish and promote the book.
( )Steve Aliment December 18th
really good fundamentals. Thanks. This will be helpful as we design our new site.
( )Brian Purkiss December 18th
INCREDIBLE analysis.
Absolutely love it.
I think you nailed it all!
Stumbled, Dugg, and Delicious-ed!
( )Jeroen December 18th
Thanks, great article. Thanks you put in the 7 hours!!
( )If the paperback version is out I will think about purchasing the book. Looks/sounds interesting.
ajcates December 18th
Very nice article, lots of helpful links, I really enjoyed it, thank you.
( )etavitom December 18th
thanks for the profound insight! awesome suggestions….
( )April Holle December 18th
Nice article!
I think graphic designers really struggle from going from print to web, they forget the complexity of a scalable medium. In print, your 8.5 x 11 isn’t going to magically turn into a 11×17, however, in the web lots of elements can scale and be used completely differently all the time. The screen resolution, the color outputs of the monitor, scalable font sizes, screen readers, contrast, etc.
Also being able to carry the design look and feel through to a multitude of different page layouts to show case different information a client might need to provide such as blogs, photo galleries, graphs, or forms is very important, good call.
The one stumbling block I see hit most often is the designer designs functionality into e-commerce packages or additional development into the designs without consulting the developers within the team. Once the client sees these elements in the design, they begin to expect their functionality of course, and this can lead to scope creep issues and additional development if not addressed.
Thanks again for the great run down.
( )Ben Hunt December 18th
Following on from the “Web2.0 design style guide” you mention above, there’s a follow-up book, all about how to design simple sites, called “Save the Pixel - the Art of Simple Web Design”, at http://webdesignfromscratch.com/save-the-pixel-book.cfm
( )ecommerce-expert December 18th
These are great web design tips to live by for any web professional. Many sites could definitely use these simple tips to dramatically increase their appeal, and ultimately business. Thank you for the great information.
( )David December 18th
Thanks for a very well writtenarticle. Especially love the commented illustrations and that you have further reading links.
I’d just comment on the statement “Never Use a Warning When You Mean Undo… is an excellent example of a small interface design decision that can make life suck for a user”. From a UI perspective it might be a small matter, but implementing Undo can play havoc with a tight budget…
( )Jeff Byrnes December 18th
Definitely a great article, I’ll be referring to this for some time. Keep ‘em coming!
( )Tom Reeves December 18th
Thanks for the post. I think I managed 5.5 of the things on my website (pwnership.com). At least I know where I can improve. A well crafted post!
What about the width of the primary column, though? Wouldn’t something less than 500 px be preferred to something as wide as 800px? I used 390 px which seems to verge on too narrow which is my personal preference.
( )Ben Nadel December 18th
Awesome list of recommendations. I feel like I need to send this to every designer that I have worked with, especially those that have come out of the print world and into the web world.
( )Kenser December 18th
great work, i like this website and check it often.
( )Mark December 18th
Thanks for the info
( )Mark Steven December 18th
Great article thanks Collis!
( )Joshua Smith December 18th
Finally! A workable snapshot of hints for good web design that also focuses on usability, simplicity and space. So few designers these days seem to focus on the users of their sites, but rather focus on showing off how complicated a template they can create. Thanks for bringing back the balance.
( )Renzo December 18th
Excellent, If you can expand Each point in future articles.
keep it up.
( )Manthan December 18th
Nice Article! Very good information for web designer.
( )jasmine December 18th
Thanx dude. i really like ur tutorial. It help me a lot in designing website thanx for sharing it
jasmine
( )tech-chek.blogspot.com
manekineko December 18th
what about the site making money? A person could satisfy all of these steps and still leave their client out in the cold in terms of generating revenue.
( )Naomi December 18th
This is a great resource. Thanks for sharing it! I also like Patrick McNeil’s writeup on the principles of design he started recently on Designmeltdown: http://www.designmeltdown.com/chapters/DesignPrinciples/
( )helloroot December 18th
Nice report!
( )Steve Aliment December 18th
I’d like to see some good tips for designing e-commerce sites….
( )mirel December 18th
great reading..ty
( )Web Design Fort Myers December 19th
Really enjoyed the article….and the examples are nice
The first example, “Capture the Valley” has been featured in so many blog posts in the past few months that thye must feel like kings!
( )Dino Latoga December 19th
This is a very good article. It not only inspires me as a designer but it will also guide me in my future upcoming projects. Thanks for sharing these priceless tips!
( )Robert December 19th
Very precise list - reduced to the principles. Thank you.
( )bugeye December 19th
very nice article :>
( )David Mills December 19th
This is a really good post. It illustrates the process of copying others without actually geting into copyright infringement. Congratulations.
( )Mark Abucayon December 19th
wow very nice article… I like the designs on the website you shown as example. really a great article posted here. Thanks
( )Ines December 19th
Very nice article, thank u!
( )Dvir Hazout December 20th
great article!!
looks like psdtuts is going to be the next ’smashing magazin’
thanks!
( )Extend Golf December 20th
This article reads like a course lecture outline. It is exceptionally well written with outstanding examples. After standing back and trying to absorb everything presented, I’m left wanting more.
Thank-you.
( )kara December 20th
What an excellent read! Very well done.
( )Jaume December 20th
Thanks for sharing so enlightening article!
( )Orion Star December 20th
Great article, Collis. I really enjoyed it. Thanks for sharing.
( )John December 21st
Great article, but website is spelled Web site.
( )Matt December 21st
Would be great if more designers followed these principles!
I loved the post!
( )Dulce December 21st
Nice article. I’m curious to see how other web designers first embark on a project. For example, you’ve had the initial client meeting or conference call to discuss the site’s objectives and design direction. Then what? Open Photoshop? Fireworks? Look at other sites for inspiration? It would also be interesting to see more information focused on ecommerce sites.
( )bhaktapurgirl December 22nd
Really enjoyed the article….and the examples are nice
( )Thanks for sharing it!
bhaktapurgirl
mazzako.blogspot.com
Jo December 22nd
Excellent information - cheers! I’ve bookmarked it to take a more ind epth look in the new year. Happy Christmas to you!!
( )Ben May December 22nd
Very Good Article - Most tips I already follow… some other good ones, and points of view to adopt!
Cheers
( )PiticStyle December 23rd
Thank you! Great tutorial and great man because you reveal to us your secrets!
( )PhilFreelance-Web December 24th
A very nice article…. it helps me a lot and atleast getting information from this. but i would like to give also the opposite one the mistakes for web design article http://www.useit.com/alertbox/9605.html
( )brandon December 24th
Good Article !!
( )ShadeX December 25th
Lovely article! Everything is well explained. Although I’m not going to be a pro now, but it has teached me some new stuff.
( )Dennison Uy - Graphic Designer December 25th
#4 - “Design to Build” is a gem. If you can’t build it, then maybe the design doesn’t work.
( )Jon Moss December 26th
Superb - an excellent read.
( )E. samek December 27th
thanks great tutorial.
( )Jansie Blom December 28th
good post. thanks!
( )aldomatic December 28th
Good stuff, Thanks
( )Jach December 29th
Nice tips; I was expecting something like “lots of good images! lots of flash! lots of AJAX!” that really adds nothing to the design and just makes the experience unpleasant for the user with an average computer. As much as possible should be done server side, where you can rely on a decent computer, rather than forcing the client’s computer to do all the lifting.
( )Razvan Segarceanu December 30th
Thank you!
( )You have mentioned all the “must use” part of web design,
Excellent article!
Jurgen December 31st
Love 8 of the 9 essentials! Cheers for sharing!
( )Robert January 1st
Great piece on web design. I wrote a similar piece but more of a pie-in-the-sky approach as opposed to your post which really gets down to the smaller details.
I feel that each site must convey and communicate to the end user that;
*Each page belongs to the site
*Uses are pleased by the design, but stay for the content
*Users can easily move about intuitively through your navigation
http://onehalfamazing.com/files/category-web-design.html
I look forward to future content,
Bob
( )http://www.onehalfamazing.com
cedric boisseau January 2nd
very nice sum! I try to apply all those things when I design
Thanks for this article!
( )kamna January 2nd
very nice
( )mani January 3rd
This is really a full of knowledge article. Being a web developer myself, I have got lots of things to learn from here.
Please keep posting this kind of articles and I have bookmarked your website. I would keep coming here to find more such articles.
Thank you very much.
( )Purchase Dreamweaver January 4th
I also suggest using the layout functions with the dreamweaver program, it would make the web designing issues very very enjoyable.
( )Frank January 4th
Great and interesting read.
( )PSDtuts design seems to apply all of this, great work!
humberto January 5th
very usefull
( )Mark January 5th
Another thing: make sure your site zooms properly. We are all getting older, and some of us don’t have the great eyesight we used to have. In Firefox, hit CRTL + (Plus sign) several times and see what happens on your site. For a bad example, see slate.com. For a good one, see salon.com.
( )Joe January 7th
Great ones. thanks.
( )Naama Shapira January 8th
Great article!
It is time for companies who build applications
( )Renato January 8th
Wow Collis, great article! Excellent information, I really enjoyed the tutorial. It will help me with my new projetc thanks for sharing it!
( )Bingo January 8th
Really good article, but almost every example is the same.
Would love to see some sites that may adhere to one “rule” but bend or break others.
OR web design is getting stale out there IMHO…
( )matt January 8th
please tell me the software i need to buy or download to be able to attempt the effects you have shown on your tutorials. thanks
( )Siegfried January 8th
Really great! There’s only 1 aspect you forgot (and nearly every webdesigner forgets): You did not really write about web design, but about screen design. Screen design ist only a part of web design. You know that html is meant to be media independent. This consequently means independent even from any visual media. So forget about screens and eyes, try to focus on any other sense (aural, taktil) and then try to evaluate your tutorial again. Only a few points will then remain useful.
So the first part of web design should be data design or information design. This part has nothing to do with any presentation, just with structuring and organizing information. The next steps then should be building the different possible presentations. The visual presentation is the most important one, because most people are mainly visually oriented, but there are enough people outside which are blind or do not have a screen at hand or can not look at a screen because of what they are currently doing (driving car for example). The term “web design” should cover all of these aspects, and not only the visual presentation, although this is a very important one.
( )Luis Suárez January 10th
brilliant!!!
this post reminded me a really good book by the name “dont make me think”. cant remember the author right now but its a must have to any web designer.
anyway thank you very much for sharing!
regards.
Luis S.
( )satish borkar January 10th
Very very nice article thanks
( )i get alot of from
Anonymous January 12th
Simple and usefull, thanks.
( )fedmich January 13th
Thanks, those are very helpful research that you’ve made
( )CFA Level 1 January 14th
Great, informative article. Thanks for this piece of work as well as the examples.
( )Jon Web Design January 14th
This is one of the best web design posts. Awesome really awesome thank you design guru.
( )andy stewart January 14th
http://www.andystewart-design.com
( )Francis January 16th
nice work.
( )very new to web design; what is the starting point for a beginner?
thanks
Hakan January 17th
Thanks
( )webdin_Neo January 17th
Great, informative article. Thanks For The Good Article
( )Jeremy January 18th
A great article on the best principles of web design. I will be certainly using this information when designing any future websites.
Thanks.
( )Vector January 22nd
Thanks, really good article. Thanks a lot for sharing.
( )Good luck )
musink January 25th
I’ve read a lot of articles online attempting to discuss the same topic and I find that yours is the best one I’ve read so far. It’s clear, comprehensive without being too lengthy, extremely helpful and very easy to understand. I love the supporting articles!
( )Raphael January 26th
Keep on the excelent work!
( )PixelJam January 29th
Great Post folks, its already on my bookmark!
( )JONxBLAZE January 30th
Wow this is one awesome post, thanks for taking the time to put this together, this makes a great reference point!
( )Danny Lister February 1st
Really great post
Keep them coming.
( )bakazero February 1st
Wow, great!
( )I like the explanation about Precedence (Guiding the Eye)
BP Donkey February 7th
Lovely stuff. But most of these design are cool web design blogs or design related. Try working on a large corporate internet/Intranet with design by commitee and multiple stake holders. See how far your bleeding edge design gets then.
( )Sara February 12th
That was helpful! Thanks
( )Web Designer Group February 14th
Great. Very nice post. I m from print, all the tips you explained are very useful in print and web design too. I m new in Web and learnt a lot from your post. Thaks
( )web design cheltenham February 16th
great article real indepth and helpful will be following a few of these pointers. can anyone suggest any other good resources or articles ?
( )Joomla Mac February 19th
Point #4 is what really hits home with me, since I’m the one cutting up the PSD into HTML/CSS. Thanks.
( )ChaosKaizer February 20th
Sweet, nice articles. two thumbs.
( )Ike-dizzle February 22nd
Dude! I freakin’ love Mudkipz!!!
( )TylerZeph February 24th
This really needs to be moved the the new article section =)
( )Jason Marsh - Website designer February 25th
Howzit, really good stuff.. This is still really the best way to stay current and updated and thats to surf the blogs… Thanks for taking the time to share your knowledge.. Caio ^^,
( )Roger Omlid February 29th
Great articles and loads of information. Thanks and Good Luck.
( )QWS March 1st
Great list. Some really good info for everyone.
( )Ralph March 7th
The list is a great summary about the basis of good webdesign.
Thank you for your great free work.
Ralph
( )motorrev March 11th
I read the whole article and found some great points mentioned over there. Good Job.
( )Floroskop March 18th
Hello!
( )I think this try.
Benjamin Chew March 18th
Good advice. and good example of website you’d done. I feel comfortable to read from this website.
( )macem March 20th
Very good article and helful.
( )Thanks
Ranae Knox March 25th
I love the info on interior design
( )Web Promotion Lincolnshire March 29th
Excellent post and in so much detail as well.
( )Web Optimizer April 3rd
Good choice of words for every topic. The words are apt and really the guiding reference of what you’re really talking about. Nice article!
( )Sammy April 4th
Nice, complete guide on how to do it right. Thank you for such an interesting article!
( )e-sushi April 4th
Good design distilated down to it’s fundamental parameters.
It’s always a good thing when a pixelshover like me get’s his head shoved into the right direction again.
In the beginning, there was a white, blank screen…
( )Endji Hesham April 8th
Thanks alot … very useful
( )reza April 15th
great man. for the info.
( )Wahid April 18th
Absolutely great article!
( )amin hidayat April 21st
nice article simply but deeper
( )Ricardo Zea April 22nd
Very, very nice article, hands down.
Unfortunately reality is extremely different.
If you’d had time to think about all these aspects before and during the design/implementation of a website, you’d take three or more times the amount of time the company or client you work for demand.
Unless you work at an Ad agency or Web Design agency, where you, as a/the Web Designer only has to talk to the Project Manager and the PM tell the client that the website will take that long and you don’t have to deal with the client yourself, then you’re a lucky Web Designer. However, this scenario doesn’t 110% guarantee you that the PM will convince the client to ‘allow’ his website to take three times more time than usual.
But those situations are only a VERY few that make no impact on how the real market and industry moves day by day.
Sigh… I hope we could live in a better, and sometimes, slower, world.
Congrats Collis.
( )Kelly April 22nd
GREAT JOB, Thank you.
( )Web Developer IndiaDexterous SEO India (Search Engine Optimization) Company April 26th
I am pleased to say, that exactly a nice article
( )sohbet April 28th
Dude! I freakin’ love Mudkipz!!!
( )BMD-Media.com May 1st
Great article! Too many cluttered websites nowadays, nice to see some good advice to creating great looking websites.
( )website design May 5th
Really enjoyed the article….and the examples are nice
The first example, “Capture the Valley†has been featured in so many blog posts in the past few months that thye must feel like kings!
( )Web Hosting May 7th
Great. Very nice post.
( )Daniel May 11th
Great article…
Daniel
( )Ovi Dogar May 20th
Nice post. Very interesting and useful article…
Keep up the great work!
Ovi Dogar
( )AbsoluteCovers.com
Marton Gergo May 21st
Thanks for sharing this to us, web designers, I can only congrat you for your effort and wish you many of these articles on your site.
I’m currently trying to redesign my website and I searched for some inspirational stuff when I found this lovely site and the high-class articles on it.
I have to read on, but it sure helped alot.
Keep it pure!
Gergo
( )design nottingham May 28th
Great article, some good design tips and as someone once told me before “less is more”
( )Ashish Kalosia May 28th
Awesome article, tons of helpful information here. It will really help people, nice job!
( )noobatrondotcom June 6th
Really nice article, and very of use information..
( )Wish there were more people with these kinds of posts!
ZaFaR June 10th
Really enjoyed the article….and the examples are nice
The first example, “Capture the Valley†has been featured in so many blog posts in the past few months that thye must feel like kings!
( )dapas June 10th
nice…
( )Mark June 16th
Nice examples
( )Aggie Jane June 29th
“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” That’s right I also hate underlined text when it isn’t a link.
( )Laurent June 30th
Bon article
( )good article
thank you
YoYo June 30th
Nice guide!Thank
( )colin preston July 3rd
looks like a good read for web design stuff, just stumbled on this and will read later
( )Wsdcent July 3rd
Thanks for sharing with other, is a great tutorial.
( )e-sushi July 6th
Nice article putting it all together on a simple page… thank you!
( )don July 6th
Great Timely Information. I have had a bad run of designers, and somehow I have managed to get a site finished. The more one learns the more discerning one becomes!!!
( )Nysuatro July 8th
Some nice guidlines to follow. Will keep it mind when designing a site.
( )Auto Car Parts July 14th
Thanks very motivating and useful.
( )MD July 23rd
thnx!
( )Rexibit Web Services July 23rd
Some very nice stuff. Thanks for the freshups on some concepts.
( )maxsearch.com.au July 24th
Thanks some great tips
( )Jennifer Kyrnin July 30th
Very nice article, I am surprised I hadn’t seen it earlier.
( )Software Development India July 30th
Very nice article which have many good suggestions. thx.
( )Daniel in NYC July 31st
Wow.
I think I have found my new bible. THANK YOU!
What a terrific, insightful and WELL WRITTEN (technically and logically speaking) article.
( )Freelance Web Design August 6th
Great advice here and really well written. That first site you list is Gorgeous. I love it.
( )Web Design Evan Skuthorpe August 8th
A nice article, very helpful and inspiring.
( )RoWeb Development August 10th
Very good collection of principles. Good to keep them in mind in training.
( )Ivan August 16th
“Inconsistencies in a design are like spelling mistakes in an essay” - love it!
( )Brad Codd August 21st
Kudos! Now all we have to do is get those pesky amateur web designers to read it…
( )NIXON August 23rd
A WORLD OF THANKS…….WAS ON A PROJECT PROVIDING WEB CONTENT .. THIS IS A GREAT GUIDE
( )Team Kulafihi August 24th
thanks mate. will surely help as we are about to launch our polished new look very soon.
( )Atique Ahmad Malik September 7th
Gr8 man di Laltain!
( )zoe September 18th
Really nice post lol, keep it up
( )ab September 22nd
Thank you for your article! I’m teaching www technology (which actually is another word for web design) in high school here in Latvia and the principles outlined here will help me live through the first lesson (2nd one actually, the first one was only introductory). It’s not that easy to explain this stuff to people who are new to design and web for that matter.
( )David S. September 25th
You have put together some great content. Most business people don’t realize the positive effect that quality design can afford site visitors. Psychologically, we humans give or negate credibility based largely on design. Good design equals more longterm value for the company online.
( )idaksh September 26th
Really 100% perfect information with served neat and cool. Good web design or Print media design need innovative thinking this can be one principle in my sense for all designer.
( )Karthika September 30th
That was a very useful article.
( )Thanks!
Drew Douglass October 8th
Im not sure how I missed this post, but this is excellent Collis! Going into my bookmarks for sure. Thanks much
( )Charlottesville Media Group October 11th
As a print designer first and only designing websites later - I was very interested by your observations. I feel that there are perhaps greater limitations in web design than in print design - with regard to typography and layout - however, I have been told that the best design is produced when there are the most limitations, so perhaps I will embrace them as challenges to creativity rather than constraints.
( )Attorney web design October 14th
Wow this an amazing list, thanks so much for sharing! Great for anyone in the design world.
( )neta October 14th
great tips
( )Sophia October 17th
Thanks for the article, highly recommended and useful, Im less than a year old in the Website design world, so articles like this are wot we amatuers look forward to. thanks again.
( )web hosting delhi October 19th
I like the tip about crispness the most. It is the most obvious one but everyone tends to overlook it the most too. Great article.
( )Tracy Olivia ( Design Firms) October 20th
Thanks for these great tips!
( )Reweb Design Ploiesti October 22nd
Very useful and well done article! Before jumping in web design wagon, designers should read this great article!
( )Victor Teixeira October 26th
I just want tosay something for those of you who are new to webdesign: don’t try to think on everything at once. All things here are best practices and good advices but if you are starting now and think of it all you’ll become crazy.
Just build your design and them start tweaking it.
For the next website try to think on some aspects that you left behind on the previus work and be happy.
In some time you’ll be doing most of it naturally without having to stop and think about every aspect.
Good article and advices.
( )Dave Cutts October 30th
Brilliant top tips and very sensible reading, thank you
( )Affordable Web Design November 2nd
These principles are very true and are good poiters for good web design
( )Alex @ Webson Design November 7th
Great list of principles… and like others said, the font size you have is too small, make it bigger !
( )josh November 10th
A nice article, very helpful and inspiring.
( )Web Line November 11th
One of the best web design post I have come across so far, thanks for putting all these together.
( )Allen November 19th
Good stuff. But most of these design are cool web design blogs or design related. Try working on a large corporate internet/Intranet with design by commitee and multiple stake holders. See how far your bleeding edge design gets then.
Allen
( )http://www.portfoliodesign.ca
hesslei November 20th
Everything you do on your Web Site must be directed towards fulfilling the purpose of that Web Site which is selling your product or service. Not only should your page text and graphics themselves clearly convey your message to the visitor but also the way they are put together. No clutter allowed! Be direct, truthful, clear, concise, etc. Well, you get the point.
—————————–
hesslei……..
SEO
( )Milan November 25th
Nice post. Thanks
( )Hotterdam December 1st
Verry Nice…
( )MySpace Design December 11th
What a great article! All such obvious things, but it’s really helpful to see them streamlined into a “Design To-Do List”!
Thanks so much!
( )Website Design Delhi December 12th
Thanks for good design for this blog and also for this article. This Article is very helpful for me
( )shootdatarget December 17th
thx man, ur article give me more confidence to design my first project !. i really have a headache on issues regarding 2. usabality , 6. spacing , 8. sharpness . Looks like i can continue doing my project now with more confidence
( )Social networking web design December 17th
Social network designs here are beautiful. thanks for the inspiration.
( )Sajesh P December 19th
The article is really Great!
( )Miles of Site O Rific December 30th
Well that was thorough! And some different ideas from the usual web standard compliant or else geek mantras out there. I think we should make exceptions for experimental or artist expressive sites where I think we should push the limits. I think the notion that the web should only be a giant library of data acquisition and convenient purchases is sad. It could be an amazing place to induce non ordinary states of consciousness too!
( )Monika January 1st
Thanks a lot for this very informative article. I read the entire thing, and am going through it again and looking at all the other links you have included. I am studying web design in college, more seriously than I did when I was more of a graphic artist/flash content creator. Still love flash but my own personal site sucks badly. I did it long ago, didn’t maintain it and it shows. I got very ill and couldn’t get to working on it as much now that I am better, after two surgeries ( sometimes the doctors are amazing and sometimes really stupid in finding what it wrong with a person). So now I am just stoked to jump on this and promote my art site. Thanks a lot for the help.
( )Gary Olson January 4th
The praise for this article is so glowing it reads like something the author wrote.
I thought I’d post this to see if it showed up.
I doubt it.
( )Michael Garmahis January 6th
Here are my thoughts about Web design process
( )Bola January 8th
Great! This has been really useful!
( )Sunny January 17th
Nice information
thanx
( )Kim McGinnis January 20th
Collis-Wow! What a great article. Thank you for your generosity. Some of your points I was aware of and lots that I wasn’t.
I particularly love the point you made in the usability (#6) section. Whenever I go to an underlined sentence or phrase, and it doesn’t take me to another page that explains what I just read - it kinda makes me mad.
Thanks again-I do believe I will subscribe.
( )Continued Success to You! Kim
MikeM January 23rd
examples of this post at our chicago website design studio.
( )SEO Liverpool January 25th
Brilliant advice! Anyone looking for a book to further your knowledge on web design, I highly recommend “The Principles of Beautiful Web Design”. Happy designing
( )bergul January 31st
Maau2x .. kAmao jd!
( )Bheemanna February 2nd
wow its good for every designer great man
( )social networking web design February 3rd
also add the SEO element.
( )Web Developer February 4th
Great insight into the realm of web design. Definitely the main elements that need to be taken into account when developing a website.
( )Evey February 4th
I have learned a lot from your article. Thank you for taking the time to share this with us.
( )Boca Raton Website Design February 5th
Thanks for sharing your thoughts…I think it was a great post…a very interesting read!
( )Web Design February 7th
A quality tutorial should always be appreciated. Thanks for sharing.
( )Ron February 9th
Thanks alot. i found this information really helpful. Keep the the good work
( )Kepler Fontnele Web & Flash Design in Vancouver BC February 20th
Thanks a lot for the post . Very Basic Web design principes but in the some time very important !
( )Betty March 5th
Thanks for this list. It is good to remind myself to go over the items one by one. Usability and free design can sometimes be enemies.
( )Thanks! Betty
Dvdr March 24th
If web 2.0 it´s like this: when do we get to go over web 3.0? will it be geared towards mobile experience? oh-wait… we ARE already using that!
I think a set of “rules” to “design” something, doesn´t explicitly says that a “new version of web” comes to exist. (web 2.0) - I read somewhere else that “everything in web 2.0 can´t stand still” - But the web pages (by many years now) have never been “completely” still. This web 2.0 thing looks to me more like “guidelines” to good user- friendly interfaces.
The fact we got public-easy-to-use-and-send scripts/twiters/video stream/blog/rss stuff to make people more aware of what they can get out of the web in their lives, makes it a justified name as WEB 2.0 design? -Is a “car”, named “Car 2.0″ if it was able to fly? -It´s definetly a NO.
( )Marco March 25th
To expand on your first point: Instead of guiding the viewer’s eye as you would in any print design. It might be best to consider people’s natural intention to read a webpage in a Z or F pattern. Meaning that the top left part of your page will get a significant amount more attention by a viewer than the bottom right side. We recommend to our clients to put the most important information (i.e. company logo) on the top left side of a page, followed by a call-to-action on the top right. Supporting information should be placed on a left column below the logo because this is proven to capture a reader’s attention and improve engagement and conversion. Be sure to check out our site and blog for more useful information on web design, graphics and branding.
web design, graphic design and branding
( )Ray March 28th
I have never seen a tutorial in so much detail. Thanks for sharing with us.
( )David Radovanovic March 30th
All your points are well founded and very informative. As illustrated, print design has many similiarities to web page layout and design.Thanks for some great Web design refreshers! New York Web Design
( )Jordan McNamara March 31st
Thanks for this really useful article Collis, I’m just starting to revive my dream of becoming a .psd web designer, and this refresher course in the basics of good design has been great.
( )Farid Hadi April 1st
Thanks for a useful article.
( )Scott Petrovic April 1st
Great post. I really like how you organize all of your information with this post. I am just starting out blogging web design things and still am trying to come up with a good format. The post is long, but it looks like you cut out a huge amount to get it to this point.
Keep up the good work.
( )Reboy April 3rd
Its really nice how people are
bothered/concern to help people
like me/us.
Keep it up man.
( )Cheap Mobile Phones April 6th
Usability is very important and can sometimes be over looked in some over stylised web sites.
( )Aaron Smith April 10th
Great blog post Collis, yes design is very important, but you must always design around the flow of the website and make life easy for the visitor. Keep the page clean and free of non related links as much as possible.
( )Social Network Web Designer April 15th
I would put “Usability” in #1.
( )Still an awesome and detailed article.
jay April 26th
Feeling Lucky
( )Web Design Teacher May 13th
I love it! Thanks!
( )DTH Graphix May 13th
THANK YOU! Great article. Very helpful.
( )suffolk web design May 17th
Wow what a great article. It pretty much sums up web design in a very consice way. Will definately be sharing this one!
( )web design leeds May 19th
Thanks, Lots of intresting stuff there!
( )hejz Rwley May 21st
greats info
( )Lee Seaman May 21st
A very helpful article! Thanks for posting!
( )letip May 21st
useful tips,
( )thanks for sharing,
sreecharan May 21st
great article. thanks for sharing information. good article for beginners
( )solexy May 21st
thx, fine article
( )Paula Cristiani May 21st
very useful tips !!
Tks
( )mauco May 22nd
Thanks for the tips. I liked the way you clarified things.
( )Marco May 26th
So how come I’m getting horizontal scrollbars? Do you think that’s good web design?
( )unperrocontodo June 5th
Good! Thanks for the tips!
( )Calum Paton June 8th
Thanks for your help! Greatly appreciated.
( )chetan Madaan June 15th
Thanks a Bunch!
( )Ammie-Marie June 18th
Clearly a brilliant article.
( )janhavi June 19th
Hi!
I want to redesign our website and i am non tech person. but your article help me to understand the requirement of web designing.
( )It will be very kind of you if you throw some more light on web designing i mean for attractive and coperate website.
John June 26th
Thanks, the information is well thought out and very helpful, much appreciated.
( )rahul sahu June 27th
this information is so nice for a web design
( )