How often have you seen a website that looks beautiful and you just can’t get over how good it looks? Unfortunately, you probably said “rarely.” More often than not a website is thrown together with no thought whatsoever, followed by surprise when the site does not function as intended. Using flashy pictures, gigantic text, and a poorly-drawn background does not qualify as a good web design! So exactly what makes a good website design?
1. Typography
It comes as a big surprise to many designers that pictures is actually not the only aspect of designing a website. In fact, most sites are useless without words. They would just be another picture on the web, no matter how awesome they look. The font you choose on your website can either make or break your site, which is why this element is crucial to a good website design, and in turn a successful website. Your font should have as many of the following features as possible (if not all of them!):
– A custom designed font style. This includes color and shape of the words. When you’re finished, make sure HTML supports it.
– Size. Your font size is extremely important to your visitors. They want to be able to find what they came there for and read it as fast as possible. Make it easy for them.
– Spacing. Do not crunch up your words, letters, lines, and/or paragraphs together! Also make sure they aren’t spread to the other side of the page. Your reader wants to read it, not play “Find the Next Sentence”.
2. Navigation
If there’s type of bad website that bugs me the most, it’s one that isn’t easy to navigate. None of your visitors came to your site to browse every page on the website. It’s the sad truth, I know. Each visitor came for a different reason: one just wants a phone number, another wants an email, another wants to buy, and another is just cruising along while surfing the web. Your navigation bar should be easy to locate, easy to use, and work! If your bar falls behind the logo, or other words overlap (such as your phone number), you did something wrong. The bar should stay in the same place sitewide; do not move it or replace it with something new.
To grab the user’s interest, it’s recommended that you change the color of the font/background of the font when hovering to provide a nice aesthetic feeling to the user. Try to be creative and match the personality and feel of your overall website. Besides the usual navigation of a site, we also like to know where we are. Breadcrumbs are used often for large sites and directories. Without them, we would get lost in translation and eventually stop in our tracks and give up. Make it easy to navigate backward as well as forward!
3. Landing Page
The landing page, and what you see before you scroll, is so important, and it is surprising how many designers forget this. The average bounce rate of a website is around 40%. A “bounce” is when someone leaves your website soon after it loads. Many websites lose at least half of all of their visitors in mere seconds! This is the designer’s window to grab their attention and make them stay. A bounce rate of less than 40% usually means you are doing something right. When someone lands on your website you should give it your all, including nice, well-designed picture(s), an example of your work (if you’re a designer, photographer, etc.), a nice logo, and what you do. If they can’t figure out who you are and what you do within seconds, you should redesign your landing page.
Logos are often used to be the center of attention and are placed at the top left of a website. The logo should have a well-designed unique picture of some sort and your name. In some cases you can place a motto or what you do in a brief 2-4 words. If they are looking for your type of website, this should make them stay, or at least scroll down. After scrolling, you should get into the depths of what your site is about and lead them elsewhere for your site.
4. Content
Without content, you’re just throwing pictures and pretty colors at the users’ face. Content is the core of your website; it tells the user what they need to know. For a local restaurant your content should be extremely quick and easy to find (within 1 or 2 clicks). The 2 primary reasons people went there are contact information and the menu. Give them what they came for and your site will be a success! After all, that’s what you made it for, right? The content you include in your website can vary, but make it brief and to the point.
Example
Presbyterian Home of Maryland (http://presbyterianhomeofmd.org) recently redesigned their website to a brand new, fully functional, fresh design. Presbyterian Home is a nursing home website that displays the pure essence of good website design. It is a perfect example of what a website should have, and is designed with the user experience in mind. They know their audience and they appeal to them. Some of the features they have that is paticularly noteworthy are:
– The moment you land on the page, you know who they are in seconds, and feel inclined to scroll down.
– The navigation bar across the top shows all of their information that is well-organized, and has a beautiful design to go along with it. On top of this they have a page for a 1-click quick view of their features of the nursing home on the top right of the page called “Just the Facts”.
– The slideshow is neither too fast, nor too slow and gives quick links to the most popular pages on the site.
– The spacing is well done. Nothing is crunched or crammed together, but are close enough to feel like a normal sized page and website that gives the information you need to get what you came for.
– It’s personable and user-friendly; they appeal to their visitors.
Web design is more than aesthetics: it’s about giving the user a positive experience, while making them want to use your services or buy your products. This can be challenging to create at times, but can be very rewarding if done correctly. If you have any other ideas on what makes a good website design that you feel was left out, feel free to let me know!
Ryan Gavin is an associate of Ignition72, a Maryland web design company. Ryan has an eye for details, especially when surfing the Web.