5 Tips for New Web Designers

Get­ting started in web design can be a daunt­ing task. A new web devel­oper must learn the basics of markup and style, under­stand how the web works, fig­ure out how to deal with browser incon­sis­ten­cies, study some basic graphic design and color the­ory and learn how to cre­ate con­tent suit­able for deliv­ery on the web. On top of all this, new design­ers must nav­i­gate the dizzy­ing array of tools and appli­ca­tions avail­able to make the life of the mod­ern web designer eas­ier (or more dif­fi­cult, depend­ing on how you look at it). Below is a short (and admit­tedly incom­plete) list of tips to help aspir­ing web design­ers get their feet wet in the craft.

1. The text edi­tor is your best friend
   Resist the temp­ta­tion to build sites using pro­grams like Dreamweaver and Front­page. Open your favorite text edi­tor (I use Text­mate) and learn how to hand-​​code HTML and CSS with­out the aid of a WYSIWYG edi­tor. You will be rewarded with clean, seman­tic code that’s a work of art all to itself. In addi­tion to keep­ing all the riff-​​raff out of your markup, build­ing your web­sites from scratch will force you to prop­erly learn the ins and outs of HTML and CSS (more about mas­ter­ing your tools later) and, in my opin­ion, make you a bet­ter all around web designer.
2. Learn about and use web stan­dards
   Web Stan­dards are important—they give us a solid foun­da­tion on which to build use­able, acces­si­ble sites and if adhered to, make the web a bet­ter place for every­one. The first step toward stan­dards karma is to val­i­date your markup and stylesheets. Run your XHTML and CSS through the W3C val­ida­tor and fix any errors that may arise. Also, respect the sep­a­ra­tion of con­tent and style and keep things where they belong (con­tent in XHTML and style rules in CSS). Finally, mind the seman­tic mean­ings of the tags you use. Tables are for tab­u­lar data, use <strong> and <em> instead of <b> and <i> and use mean­ing­ful class and id attribute names.
3. Carry a sketch­pad or Mole­sk­ine
   Inspi­ra­tion can strike any­where and you may not always have a lap­top and text edi­tor handy. Car­ry­ing some type of note­book allows you to quickly sketch out ideas or write down thoughts on a par­tic­u­lar design. I always have a squared Mole­sk­ine around to sketch out site ideas and it’s where I begin every project des­tined for a browser.
4. Less is more
   A com­mon pit­fall for new web design­ers is a need to fill every inch of the page with something—content, color, images, what­ever. It’s impor­tant to remem­ber that web­sites exist to com­mu­ni­cate the con­tent and infor­ma­tion within the page. Unnec­es­sary noise in the form of extra­ne­ous style and color only make that job more dif­fi­cult. Keep things sim­ple, use white­space as a design ele­ment and if a design choice doesn’t add to or com­ple­ment the con­tent, get rid of it.
5. Orga­nize your infor­ma­tion
   Web design is more than just lay­ing out a page in the browser—you have to spend some time think­ing about the orga­ni­za­tion of your con­tent. The worst thing that can hap­pen to a great design is to have con­tent that can’t be found or nav­i­ga­tion that con­fuses and frus­trates vis­i­tors. Before you open a text edi­tor or type your first tag you should be writ­ing down all your con­tent, doing a quick card sort and maybe even throw together an infor­ma­tion archi­tec­ture dia­gram. Spend­ing a lit­tle time get­ting to know your con­tent will save you hours of work in the long run and will ben­e­fit your users more than the sex­i­est page design.

If you’re a new to the game, what types of prob­lems have you run in to while learn­ing web design? If you’re an expe­ri­enced web worker, what tips do you have for the up and com­ing designer?

tagged: teaching, web design, web standards