Basic Website Design
We're all pretty familiar with websites. While there is quite a variety in how different sites look, there are a number of basic principles that go into good website design:

Good web design always keeps the user in mind. Whatever your web visitors are looking for - be it information, entertainment, some type of interaction, etc - is what your website should provide in the forefront. Each page of your website needs to have a clear purpose, and to fulfill a specific need for your website users in the most effective way possible.

"Design is not just what it looks and feels like.

Design is how it works.

- Steve Jobs

People on the web generally want to determine within a few seconds if your website contains what they are looking for, so it is important to communicate clearly. Some effective way to accomplish this in your web design include: organizing information using headlines and sub headlines, using bullet points instead of long windy sentences, and effective use of images.

In general, Sans Serif fonts such as Arial and Verdana are easier to read online. Your general font size should be easy to read, and only use a maximum of 3 different fonts in a maximum of 3 different sizes to keep your design clean.

A pleasing color palette can go a long way to enhance the user experience. Complementary colors create balance and harmony. Using contrasting colors for the text and background will make reading easier on the eye. Vibrant colors create emotion and should be used sparingly and with specific purpose, such as to accentuate buttons and call to actions. Last but not least, empty space enhances readability and gives your website a modern and uncluttered look.

A picture can speak a thousand words, so choosing the right images for your website helps communicate efficiently, connect with your target audience, and provide branding. Later in the course we'll dive more deeply into using photos and graphics.

Navigation is how uses move between the different content and pages your website provides. One common website navigation rule is the ?three click rule? which means users will be able to find the information they are looking for within three clicks.

Placing content randomly on your web page can end up with a haphazard appearance that is messy. Good layouts arrange content into sections, columns and boxes that line up and feel balanced, which leads to a better looking website design.

Mobile devices are the most common means for users to visit websites. Designing a website that looks and works great on both computers and mobile devices does not need to be hard with the right approach. This course will show you how to build desktop-oriented websites, and the next course in this series, Mobile Web Development, will take those skills into learning mobile web development.

Site Sketching

The best way to try out different ideas for a website design is by sketching out your pages before you actually code them in HTML & CSS. Site sketching goes by many names, like mock-ups and wire-framing. There are a number of site prototyping tools like Balsamiq,, and Lucid, but there is nothing wrong with good 'ol paper and pen either. The important aspects of you design to sketch out are:

Color choices can come later, but the purpose of the initial sketch of your website pages is just basically where stuff goes. Even writing the page text can come later, you just have to know where it should be placed for each page. Here is a mock-up of our course sample site home page:

This gives the general layout of the home page without many details like exactly which fonts, images, and colors will be used. Here is the actual homepage built from this mock-up:

Notice that the actual page doesn't exactly match the mock-up, and that's ok. It's also really not that important how you do your site sketch/mock-up/wire-frame, just that you come up with a design that follows good design guidelines. And keep in mind they are just that - guidelines. Experimentation with design is what keeps things interesting, and coming up with new ideas helps make your sites stand out.

One task we'll practice a lot later in this course is taking an existing website and breaking down its design in order to implement it ourselves in HTML and CSS. Practicing this technique is a great way to expand your knowledge of real-world website designs and how to accomplish them, which often gives you ideas for even better site designs.

The most important thing to remember about website design is this: Sketch your sites however is easiest and makes the most sense for you, even if that is just pen and paper. But do sketch them out, which means you're making intentional choices about where things go. And looking at other sites and taking design cues from them is perfectly ok.