How I Design
In many ways, I don't consider myself a designer. I don't have any formal training. I don't have a strong grasp of colour theory. However, I do tend to look at design in a very structured and methodical way that I believe lends itself well to web design.
Focus on what is important
My approach is actually quite simple: focus on what is important. That may seem like a 'duh' statement and in many ways it is.
The first step for me is to determine what elements I need in the design. This isn't just the big stuff like logo, content and sidebar. It's much more granular than that. What's the primary navigation, what's secondary (tertiary, etc)? Search boxes, external links, forms, copyright info. Whatever I think might be on the page gets added to the page. (Things like Page Description Diagrams can be useful on larger or more complex projects.)
Once I know what needs to be on the page, I can start breaking it down by importance. To make something feel more important, it should be more noticable. There are a number of ways to do this:
- Make it bigger. It's hard to miss if it just takes up more room on the page.
- Make it closer to the top of the page. If it's below the fold, it's more likely to get missed. Keep the important stuff above the fold.
- Make it a different colour. If everything is grey and you make one thing neon red, it's going to get noticed.
- Use a different font. Fonts can create a certain visual cadence and using something different can help bring attention to something. For example, using a serif font for headers when body text is sans serif.
- Give it breathing room. Often, pages can get cramped with information overload. Adding whitespace around an element can help it stand out.
I'm sure there are others (feel free to share). It's important to consider what you think is important for the user, though, and not necessarily for yourself or for the stakeholders. For large or complex projects, use cases and personas can be useful in determining what is important.
Grids and Wireframes
With the elements on the page, I define a grid that I think will work well with the amount of content I have. It's normally a 3 or 4 column grid. The current design of this site, for example, works off a 3 column grid where each column is 250 pixels wide with 20 pixels of margin on either side. I almost always have the content column span two columns (because it's important!).
Then I drag the elements into approximate places in the grid. More important stuff at the top, less important stuff at the bottom. Sidebars are useful for having "extraneous" information more readily available but it's important to contrast it from the content area so that it doesn't compete for attention. Make the text smaller, make the line heights smaller or use a contrasting background. If all your content is the same size, same color, and with the same line height then things look boring and everything just blends together making the site hard to read.
It's at this point that I've got a basic wireframe of how the page will ultimately be laid out. (This might be a good time to send something for the client to review to make sure you didn't miss anything that should be on the page or to explain to the client why you think something should be left out.)
Adding the Polish
Once I have the wireframe all set to go and approved, I apply the "pretty pixels". You know, slap some reflections on there and some gradients and I'm all set! (Ha, just kidding...please don't hurt me.)
At this point, my knowledge tends to go towards "what looks good" and tends to run more off gut instinct. For a more educated approach, check out Mike Rundle's article on Vitamin of the four rules of site design: C.R.A.P: Contrast, Repetition, Alignment and Proximity.
If you've got any great tips or links on design theory, be sure to leave a comment.
Conversation
Wonderful summary of a process that "just works". I wish more designers (and clients for that matter) would consider the user before themselves or the stakeholders.
I work in a similar way, but before I get too far into the work I summarize what I intend on doing and why, and send it to the client as a recommendations document. I break into layout recommendations, font, colour, imagery and content maps. I find it helps get buy in, and gives them a clear view of my vision. Also, it forms a nice little "map" for me as I move forward.
I think methodical design is the best. In the words of Mies van de Rohe, "Form follows function". I like designs that solve problems in a stylish way. I think your work does just that, but I hear you about not thinking about yourself as a designer. I've been feeling a lot more like an information architect/traffic cop these days. I think of when I considered myself a designer and now I think I was just an artist in transition then.
Kudos!
Very nice description of your designing process. I think the "importance"-step is the total focus. Lots of designs take a look at that much to few. Using color and size to determine the importance is somewhat the only thing you can do as a webdesigner (besides flashing sound and other annoying things).
Keep it up, I like comming here :)!
Like you, I have no formal traning in design, and I have taken the time to learn things about typography, color theory, and layout (grid). Your approach is very similar to mine in a few ways.
Not that I want to water an application down, but I don't believe design is just about aesthetics. Design is about solving problems (and great designers like veerle, dan c, jina b, jason santa maria, etc put this in action).
Design isn't easy, and sometimes its easy to have a mental 'block' - but I believe it helps to have an approach or plan of attack. Not that it is all methodical, but that you have an overall goal or direction in sight.
Very interesting and helpful article. I really like the way to first think about what information has to be on the website and then decide where. Thanks
This is more or less a standard methodology which works fine for most of us.
Problems appear when the customer demands to get more involved than he should. For me the hardest part of the artistic design process of a web site is the reviews that the customer demands. In some cases this process takes more that 2 months due to the many reviews.
Wanting to be flexible for the customer most of the times has a huge cost. On the other hand that’s what keeps the customer coming back.
Can we do differently?
Fortunately there are good books on design theory!
Reads that provoke thought! The design process is both an intuitive approach and a research *empirical* aproach.
I am currently reviewing books for fadtastic. And I just started this book and is loaded with essays about design research!
Design Studies: Theory and Research in Graphic Design, edited by
Audrey Bennett, Steven Heller
C.R.A.P. has definitely improved my design skills, even though I really lack any design talent. I gave a lecture on C.R.A.P. and the slides are released Creative Commons, you can check it out here: Teaching Web Design, Part 5. It was my first lecture ever and a lot of fun.
I often start with sketches in a wire frame form. Once I have found a layout that I think works I then do multiple variations of that design including colour and font options. Only once I have found something that works on paper will I then jump onto a computer and mock it up in Illustrator. I feel that this process works well for me as I can iron out all the small bugs quickly and easily on paper.
I think you need to design according criteria:
consistency | readability | navigability
accessibility by design
thanx for your information... its very great...
could i get more information about how to design or fresh article from this web with annualy to my email??
thanx for your information... its very great...
could i get more information about how to design or fresh article from this web with annualy to my email??
thanks..for your information
Thanks for the tips. I use a somewhat similar approach when designing.
I like to believe that you should really sit and dig deep into what a client or user really wants to recieve when visiting a site, find a foundation, and then construct a design to fit that foundation.
For instance, when designing something for a blog, the most important aspect of the site is usually the posts area and comments. However, if you're designing something for a News site, the latest headline is the most important element, so you make that stand out from the rest of the page.
Having said that, I love the design of your site, it's very clean and very elegant. And I love the colors. And I appreciate the structure you use for laying out and styling the pages. Nice work.
I love this site! great site and great webmaster. Thank you bye.
I am from Canada and know bad English, tell me whether I wrote the following sentence: "Accountancy is an excellent way to get a good grounding in business before starting your own."
8-) Thanks in advance. Lourine.