Designer Blog

The goal of designing a website is simple — to create unique and cohesive pages that are effective and user-friendly.

Okay, so maybe not totally simple but once you learn the meat-and-potatoes (fundamental and important parts) of website design you’re bound to be effective.

web design by Hitron

Ask the Right Questions

Not all clients are web savvy so it’s important that you, the specialist, ask direct questions:

• Is it important for you to have a simple website that loads quickly or a snazzy website that loads slightly slower?
• Does your target audience require any special features — larger fonts for easier reading or a mobile version of the site?
• On a scale from 1 to 10, how web savvy are your users?

Once you understand the brief and gather ALL technicalities — requirements, objectives, target audience — decide what content is relevant. The site’s content is extremely important; this is why users are on-site in the first place.

Balance Aesthetics with Functionality

When starting the aesthetic, or creative part of the site – deciding the site’s overall theme, navigational structure, etc. – don’t forget about functionality. Keep asking yourself, “will this drive viewers to stay or click off the site?”

One way to make viewers stay on-site is by creating a straightforward navigation bar:

simple navigation example by Li Chin

simple navigation example by Booma Web Design

Where you place the navigation bar also determines usability. The navigation bar should be placed at the top or left of the site, NOT to the right. Not all viewers will look from the same browser and you don’t want users getting annoyed because they have to scroll right every time they want to use the navigation bar.

Similarly, building a web page thats scrolls right (not up and down) can also drive readers crazy.

More About Functionality

You can’t date someone just because they’re pretty. Well, you can… but eventually you’ll desire substance behind all that beauty. Web design is no different.

Before deciding what photos to use, you need a logical wireframe. We will start with the basics of 2 and 3-column layouts.

The 3-column newspaper style works for a reason — it’s easy to navigate and the content is easily accessible. These frameworks are great building blocks for the attractive elements you will be adding later. Here are important elements to focus on:

Header – The header is extremely important and makes or breaks the usability of a site. A successful header incorporates all the important elements (logo, navigation links, etc.) in a unified, polished and uncluttered way:

Navigation – Should focus on how the user explores through each page. A successful navigation consists of text links for optimization:

Footer – The footer usually incorporates copyright notice, legal info and additional navigation links for the site:

Background – This can be a simple color or image. As you develop your skills, you will learn proper techniques for background images and how to use them to compliment the layout. For example, you can add texture to a simple design to give it that extra umpf!

website design by pallygiraffe

Optimize Your Images

Take your hand and cover the flashing image below… that is what I do to avoid flashing images. And if it annoys me enough, I click off — you do NOT want your viewers to do this.

Don’t use images that move, change, rotate, flash or distract viewers from the content. If you are dying to use any of the above actions then use them sparingly — they slow page downloading time.

Slow page loading sucks and since HUGE images don’t help with speed, keep each image between 10-12 KB (kilobyte). One way to make images smaller is to lower the quality of the web files. The appropriate web-based files are:

• GIF - A web-based file that supports animation like the “Avoid Flashing” image above. GIF images can be compressed to smaller sizes without losing their quality.
• Jpeg- A web-based file for photographs that loads quickly and is great for emails or banner designs. You have complete control of the JPG quality and size.
• PNG - A web-based file that does not lose quality when compressed and is my personal favorite file to use. I rarely have problems with PNG files and if I do, I use JPG for a lower file size.

Correct Typefaces

If you are a print designer then listen closely — you are creating a visual for a MONITOR SCREEN, not a visual for print. So the way you incorporate serif versus sans-serif typefaces is completely different.

Serif fonts have extra strokes on their ends that appear pixilated and disorganized at small sizes. However, sans-serifs have simple strokes, great spacing and a nice width that gives a clear impression on-screen.

Sans-serifs should be used in body text where as serifs should be used for headlines. Quite the opposite of print design!

It’s important to limit your typefaces to 2 or 3 and stick to standard typefaces. For example, you wouldn’t want to use Sheep Sans as your body text because there’s a slim chance all viewers will have it on their computer. Stick to families like Verdana, Helvetica, etc., so they look correct in most browsers.

There you have it! The meat-and-potatoes of website design. Feel free to share some additional web designs or tips in the comment section below!

Based in San Francisco, Allison (Alli) Stuart works as Community Content Coordinator at 99designs. When she's not writing blogs and communicating with designers, she is working on her Children's Book. She also enjoys extreme sports, like sky diving and traveling to new places. Alli has a Fine Arts Degree with a concentration in Graphic Design from Louisiana State University, her home. Geaux Tigers!

Allison Stuart

View all posts by Allison Stuart
Allison's website