Web design process and thinking

Question

I was wondering how to approach design of a website in terms of layout/design.What kind of process designers usually follow ?I am a developer who is taking first steps to develop a good looking website.What are the best practices - using divs, grid design etc.

Answer 1

Step 1. First is to identify which type of site you are designing for. If you are designing a site that will show products, or lots of pictures in general, think of an appropriate design. (ie, don't build a 3 column layout for such site, as it will look very cramped and pictures will have to be small to fit other content in other columns). Or on the other hand, if you know your site will be very simple, you may decide to put it all in just one page and use javascript to make anchor links scroll to certain areas of the page. This is becoming increasingly popular.

Step 2. Try to visualize the site in your head, of how you want it to look. Think of color schemes and columns layout. Think of where the menu will go, if possible, try to know the the menus in advance, that way you'll know if you'll need drop down menus or not, if they should be vertical or horizontal, depending on how many links the navigation will have, etc.

Step 3. To help with step 2, visit sites such as http://www.cssmania.com to get inspirations and ideas of what a decent website should be like. Don't copy them, but get a feel of graphic usage, menu placement, font sizes and types, etc.

Some designers use photoshop to design it, then slice it up and create the site. Some jump straight to html/css. This is entirely up to you. Personally, i start right away with html/css, and then, i prettify the site by adding background images, custom buttons, etc.

"What are the best practices - using divs, grid design etc."

Try to use DIVs instead of tables if you can. In the web design world, designing in DIVs is looked upon. However, pure css layout usually takes longer to make. So if you are on a budget or timeline, it's OK to do it in tables.

Answer 2

Here is what I do (i'm a developer who tries to design!)

• Draw out the layout on a piece of paper
• Make a mockup in photoshop/paint etc
• Divide the page content into different blocks , div's , tables's
• Find out what page elements are common to all/most pages like header and footer
• Convert the mockup into html and css
• See if it shows up right across most browsers (hardest part)
• Get feedback from a co-worker/friend and modify the design

Answer 3

I'm not a designer but I just thought you might be interested in oswd.org, which has lots of free web page templates that you can look and learn from

Answer 4

My personal method for designing a site is to first of all consider the needs of the site. What is the most important thing that a visitor needs to do or needs to know. Consider this site, the three big things you may want to do when you open the home page is 1. view some questions to answer, ask a question, or and log in. You are immediately able to do those 3 things quickly with minimal clicks and no searching.

The second thing to do is to think about the impression of the site. If you visit a major bank's website they convey trustworthiness, if you visit a blog it conveys a sense of personality, when you visit a news website it can give you feeling of urgency or knowledge.

Third you should consider brand recognition. There is a reason Pepsi's website is blue and Coke's website is red. If you see the stackoverflow logo somewhere there is a good chance that it would ring a bell (serverfault maybe not so much). This is a major design challenge that a lot of companies spend a lot of money on.

Finally, think of the poor users. I personally have the attention span of -oooh a red car! If I can't figure out what your site does instantly I will be lost and want to go somewhere else. If I can't figure out how to do something I want to do in a few glances I will dread coming back. I hate digging around a website to find a login or a bit of help.

An example is registration on a site I'm working on. The site just asks for an e-mail address. You put in your e-mail address and a confirmation is sent to your inbox. Click a link add a password and you are done. Your e-mail is your sign in. (Don't you hate it when your favorite username is taken?) You don't have to fill our your home address because we won't send you any letters, and we don't need your name because we aren't going to know you on the street.

After this just look at other websites similar to what you are doing. Look at design blogs like Smashing Magazine. These all will give you inspiration, but don't think, 'Oh this website has blinking text, I should have blinking text!' or, 'This blogger says I should use this font for business websites, so I must use it.' You are smart enough to know better

I think the most important thing is to use your own site. If you don't use it, you don't know what needs fixed or changed. Have others use it too, right in front of you. Don't say anything, just watch how they use it and if they struggle with anything.

Answer 5

Hi there. I am sort of in the same position as you, that is being a developer with little to no UI Design experience.

I recently watched the MIX 2009 videos and came across this guy that specializes in just that. His work spans a lot of common day to day popular websites we all use. Here are 2 links, first to his website, and second to a book I would really suggest you get concerning Web UI Design.

http://www.lukew.com/

http://www.lukew.com/resources/web_form_design.asp

Hope the book provides you with lots of insight. Take care.

Answer 6

An Introduction to Using Patterns in Web Design by Ryan Singer can be helpful in cutting through mental block when designing pages.

The idea is simple, obvious, and extremely easy to forget: build up from what you know is true - not down from your assumptions. Kind of like test-driven development, but for Web design.

Answer 7

First thing you need to be aware of is standards and browser compatibility.

Getting the standards right may help you design across browsers, but there are many different browsers out there. It's generally ok to design for a couple of browsers, but if you do make sure you give other visitors a friendly notice of some sort. You'll find out what I mean soon enough :)

When it comes to layout and design you should check out A List Apart http://www.alistapart.com/ which is one of the great sites out there that answers your questions related to design, methods and process.

Answer 8

I prefer table layout on div layout so you can choose the one that suits you and your applictaion then write css for the pages and follow "Look and feel" . Although I m not expert hope this works.

Answer 9

Just too add in my two pence I have found the following two books invaluable when it comes to designing my sites:

Don't Make Me Think: A Common Sense Approach to Web Usability by Steve Krug

Yes this is a book about usability but it gives you the a good understanding about where certain elements belong in your page layout. After all whats the point in a great looking site if it difficult to use.

Bulletproof Web Design: Improving Flexibility and Protecting Against Worst-Case Scenarios with XHTML and CSS by Dan Caderholm

This book will give you the tools to create markup and css that not only works but looks great. This is a great book for the should I use divs / tables part of your question.

With the kinds of ideas that I got from the books above I find that making some of the choices about my designs are easier to make. Some of the other answers here are very good and I would reccomend trying a few of the things suggested. The best advice really is to give it a go. Try creating a few designs using different methods and see which works best for you.