Tonight’s installment of the Weekend Web Developer focuses on the design phase of your Web project. There’s nothing worse than staring at that blank white screen, whether it’s your text editor or your image editor, and not having a clue what to do. But if you break your design process down into a logical work flow that you can use on every project, your moments of designer’s block will be a thing of the past.
1. Pick your page poison.
Start by deciding which kind of page layout you need. If your site is going to be information heavy, you should consider a two or three-column layout. If you just need to publish a business card or a pamphlet-style Web site promoting your company or marketing campaign, you might just need one column and a header. Determine your needs, and plan your layout accordingly.
Good places to get inspiration are at template design sites for the popular blogging platforms. You don’t have to be using Wordpress (though I’d highly recommend it!) to get ideas from a Wordpress theme site. There are also massive template communities for Blogger and Movable Type. The css Zen Garden is another great place to get layout ideas. I’ll caution you not to go around copying folks’ layouts verbatim. A lot of designers copyright their designs and get upset when someone steals their work. Get inspired and use that inspiration to make one thing new!
Finally, don’t try to fill three columns of space if you only have two columns of content. Your users will be able to tell you’re stretching. Conversely, don’t cram your three columns of content into one column of space. Layouts like that become cluttered and impossible to navigate.
2. Design your design.
Once you’ve picked your style of layout, instead of going straight to coding, try making a mock-up of your design in the Gimp or Photoshop
Make sure the image you create is actual size, and you’ll be able to transfer pixel measurements to your stylesheet straight from the image. And, if you create your mock up to look exactly as you want it, you’ll have your header graphics, navigation images, and any backgrounds already done. Just cut and paste from the mock-up and you’ll have saved a step.
If you can’t figure out how to achieve something in css that you designed in Photoshop, scour the Web for tutorials and css forums. There are a ton of them. A List Apart is an excellent blog that offers css tutorials and some excellent advice to overcome common stumbling blocks.
3. Consistency is key.
You’ve chosen your layout and created your design. Now make sure that you apply that template to all of your pages. Your header, sidebar, and footer should be the same across all of your pages. Your colors and text formatting should stay the same. And any images you use should have a consistent feel (main images on onethingnew.com are 250px wide, and the album covers for Top Five Friday are 115px wide.). Granted, you don’t want to be so locked into consistency that usability suffers. But if you break from consistency, make sure you have a reason besides, “It looks pretty.”
4. Respect your users.
If it’s your personal site, of course you should design it just for you. But if you expect other people to use your site, you should put some thought into making it user-friendly. One of my pet peeves is light text on a dark background. I find it harder on the eyes than dark text on a light background. (This is an excellent article with some great information every Web designer should know about typography.) But it’s not just about text. If your users have a problem navigating your site, you should be open to their opinions. Have a link to your email address or a feedback form or a comments section so that your readers can interact with you. Take their opinions into consideration.
5. Personality goes a long way.
In whatever design you come up with, let your personality show. Your Web page is a representation of you (or your company, which might as well be you), and it should reflect that. If your favorite color is yellow, figure out how to show people. If you’re a photographer, highlight your photos, not your stories. If you give some of yourself to your users, they’ll give you some of themselves in return: their trust. Think way back: if the two Stanford knuckleheads who came up with Yahoo! didn’t put themselves into their brand, do you think they would be as successful as they are? Probably not. It’s probably the hardest thing to do, especially if you are an introvert like I am. But it will pay real dividends professionally and personally.
Stay tuned tomorrow for a step by step guide to moving your Blogspot blog to it’s own domain!
