Introduction

What do you know about art of writing music? There are 7 notes which in different combination create amazing and varied music composition. Web designer has more than 7 notes, but other process is similar: make your combination, develop your style, your “music”.

So what are the notes of Web Design?

And also don't forget about:

Sounds difficult, yeah? So I am sure there are no web-designers who became successful after first site. But you need to work hard, know basics at least and pay attention on details. Take your instrument (notebook) and let's play!

First accords

Idea

You should have clear and unique idea for your site (internet-shop “Find second sock”, online-magazine “Rose blossom”, blog “5 things to do in House of Parliament”, etc.). Or at least you have to pretend to be the best in your theme (internet-shop “We better than Amazon”, online magazine “Vogue? Never heard”, blog “I write about things you've already known, but I add cute pictures!”)

Content

Content is a King. Start to think about it in first 5 seconds after you got your idea. It can be articles, pictures, video, audio, tutorials, forum or even social network. Try to tell a story.

Know your target audience. You think that they will probably like your content. But they can think different! Listen to your visitors, provide feedback on every query and react on valuable comments with actions.

For better results use Google Keywords and Google Trends: they can help to suggest clear ideas about trending queries and visitors needs. Don't forget about Google Analytics – the best source to know your recent results and develop your future strategy.

Useful navigation

Would you like to provide visitors an opportunity to find relevant content fast? Remember about “no more than three clicks” rule. Seriously! If you have something deeper – you have to reorganize structure.

Don't forget about clear and understandable names of your sections. For example, “Contacts” section should include contacts information, nothing else! Creative is ok in your portfolio or any specify site (“Share seeds” like Call-to-action button on site with Plant theme).

Preparation to code

Understanding of code basics will help you to provide better experience.

For site with simple content and few images you can simply use Strict XHTML (if you use some embed iframes like Google Maps – use Transitional to pass Validation). If you have video/audio content or you want to do web app – try HTML5.

Always separate Structure (HTML), Presentation (CSS) and Behavior (JavaScript) layers. If you would forget about it, nobody will be friends with you! Ok, exclude non-web friends.

Main Theme

Images

If you add <img> always add 4 attributes for it: weight, height, alt and src. Like here:

<img width="130" height="124" id="logo" src="images/cat.png" alt="Red cat" />

And try to prepare image which you will use in full-size (100%). Never upload heavy images and then reduce them to 30%.

Where can you take images for your site?

No: Google search, other sites (hotlinking). Remember about copyright.

Yes: Your photos, pictures, free images stock (like http://www.sxc.hu/ ). Double check that they are free!

When you finish all Photoshop preparations (crop, filters, saturations etc) or draw something beautiful in Illustrator or download free legal photo, don't forget to use services to reduce size.

Remember: even Photoshop actions Save for Web and Devices can't offer better reduce size results than online services.

Online services:

Each type has different meaning. Choose right!

And about favicons:

Use special services to convert images to this special format.

Please, note: if you only rename favicon.png to favicon.ico – it will not display in IE.

If you want to create a favicon for every possible use, the sizes you would need to create are (from icon hand book):

Color Scheme

There are 3 ways to create good colorscheme.

Color wheel. Color Scheme Designer - best source to find nice combination. Try compliment or analogical…or maybe mono color scheme? It is you choice! Try next method: take colors from analogical palette and then add one from complimentary– this is one of the most useful trick to get appreciate scheme.

“Photo scheme”. Take thematic photo for your site (e.g. Palm and sand for site about Maldives) and pick main colors to create appropriate color scheme.

Use some sites with palettes to find your inspiration. My favorite: Kuler and Colourlovers.

Typography

Yes: use no more than 2 types of fonts (e.g. Serif for headers, Sans-Serif for other texts) Remember about readability and legibility. Normal line height: 1.5.

No: Use carefully script/novelty styles (or better not use it at all). Also avoid: too heavy/ too light/ too contrast/ too flourish fonts. Never use center and justify alignment.

Pay attention on italic or bold styles if you plan to use them, check counter opening size.

Try this test phrase for good readability: rococo cocoon (thanks Laura Kalbag).

Where take free fonts: Google Fonts and Font Squirell.

If you have an opportunity to pay for font – do it.

Cadenza

Ok, we finished with short digest of creative elements. Let's talk about other indispensable and important actions for perfect result.

Responsive design

It is true. Now every modern web design should be responsive. Use media queries to provide good presentation for all devices and try to work with “mobile first” (for me it is difficult, but it is better way).

Media Queries (Thanks Prisca!) (show the code)

Don’t forget about reset css file (Thanks Eric Mayer!) (show the code)

Print version

Useful tips:

Hide all navigation nav {display: none;}

Change colors body {background-color:#fff; color:#000;}

Links should be links a:link, a:visited {color: blue; text-decoration: underline;}

Show full path of links a:link:after, a:visited:after {content: " (" attr(href) ") ";}

Change body fonts to serif, and headers to sans-serif (vise versa to screen version)

Accessibility

Aim to get AA accessibility level (it is middle position).

Try to provide high contrast of background and font colors and provide changes to opposite colorschemes.

Always fill “description” and use “roles” (thanks David) (show the code)

How to use these roles in HTML <div id="header" role="banner">...

In CSS with roles you no need extra id or classes div[role='main'] {background-color: red;}

For tables use summary and caption attributes

Semantic mark up

Always check your site with HTML and CSS validators.

Test pages across all browsers (old too!) and work with bugs: Browserstack.

For old IE: Netrenderer.

My article about how to create good "web-music" is finished. Just never forget about details and think about needs of your users (not yours or client).

And in the end want to say main thought from the “Future of Web Design”:

A design is ready when there is nothing left to remove “Act on impulse and catch your inspiration!”