KillerSites Blog

Killer Crib Sheet for Web Designers

February 16, 2005

A quick overview of what a web designer needs to know.

Topics covered:

1. Pillars of Professional Web Design.
2. The Future of Web Design.
3. Getting your first web design Job.

Pillars of Professional Web Design:

The Definition:

I am referring to the sum total of what a web designer should know. The fact that we can now define this is a great thing.

I the recent past, a web designer was more of a vague profession, if one at all. Most ‘web designers’ were actually graphic designers moonlighting as web designers. They did not really understand the medium at all and we still see symptoms of this in websites all over the Web.

Symptoms that include sliced images, heavy pages, no thought or support for things like SEO, usability, accessibility, maintainability et cetera. In fact still today, many ‘web designers’ would have a hard time writing even simple CSS code.

The Pillars Of Professional Web Design

· HTML, CSS
· Basic Design
· Usability
· Accessibility
· SEO
· Best Practices

DETAILS:

HTML, CSS:

Know the basics – web designers should not only be point-and-click web designers. All web designers should be able to create websites by handing coding. They don’t need to always hand code, but they should be comfortable editing and writing code.

Key Concepts you should know:

1. How to create tags – basic page and tag rules.

• Proper nesting of tags.
• HTML tags provide meaning and structure … not formatting – CSS is for formatting.
• Use tags with proper meaning – ex: paragraph tags are not meant to create indents – use CSS.
• You should know the key HTML tags and CSS fundamentals.

Key HTML tags:

• List tags (ordered, unordered, definition list)
• Table tags (table, td, tr).
• Link tag.
• Neutral container tags: span and div.

CSS fundamentals:

• Selector types: classes vs. ID’s why use one or the other.
• Applying CSS styles: External vs. page-level vs. inline.

2. What a doc-type is and what impact they have.
3. The difference between inline and block-level tags – do you know the box model?
4. How CSS can be used to change tags from being block-level and inline and the use of this ability.

Design: an understanding of basic design principles like alignment, color matching etc.

Usability: an understanding of how users use a website and how to structure a web page and a website.

Key concepts/ideas:

1. Logos are home buttons.
2. Buttons and links should look like buttons and links.
3. Be consistent across the website with the look elements like links: don’t have green links on one page and red links on another.
4. Menus should be found in the same spot on every page.

Accessibility: knowledge of the requirements to make website accessible. Besides things like alt attributes in images web designers should be sensitive to how a page is perceived by screen readers and should structure the markup to reflect this. Ex: put menus after the content.

SEO: an understanding of SEO practices: websites should be designed with SEO in mind from the get go.

Key concepts/ideas:

1. Proper naming of page titles.
2. Good use of meta-tags: sometimes used for description.
3. Understand that website content sets the category, and the number and quality of links sets the position for websites – in most engines.

Best Practices: an understanding on how to properly write out code and structure pages and websites so that they are more easily maintained.

Key concepts/ideas:

1. Don’t create websites with sliced images – too hard to update pages.
2. Don’t create complex menus (especially ‘main menus’,) with images.
3. Use a separate ‘master’ style sheet to define global styles for your websites – means much less maintenance work.
4. Use inline styles to prevent orphaned CSS rules from creeping into your CSS pages.
5. Don’t use too many CSS hacks to in an attempt to create CSS based layouts.
6. Don’t use funky layouts for commercial websites – use layouts that people know: 2 or 3 column with the main menu across the top or along the sides.

You need to do some homework if you have problems with the any of the points listed above.

– –

The Future of Web Design.

Building websites from scratch, will soon become something akin to a carpenter going into the forest to cut down tress for wood to build a house. The modern web designer/developer will be using one of 3 things to build most, if not all websites:

1. Website templates.
2. Blogs.
3. CMS.

Side note: broadband is in, so audio and video content is in – you should understand the basics of audio and video on the web. Learn about podcasting, streaming video and so on.

– –

Getting your first web design Job.

The most important thing you can do is build a portfolio. Degrees and other pieces of paper telling us you know what you’re doing aren’t worth nearly as much as examples of your work.

With that in mind you should:

1. Have you own website and your own domain name.
2. You should be looking for web design work now. Do a stage, build a site for a friends business.
3. Be prepared to constantly learn new things.
4. You may apply for 25 jobs before you get a gig. In the meantime, build websites.
5. Consider the option of doing freelance work.

The key is to complete as many websites (from start to finish,) as you can, each time improving on what you do and trying something new each time.

Anecdote: When I hire people (as I occasionally do,) resumes are the least of my concern … people can pad them. I look to previous work.