Good Web Design: What It Is

Do you know good web design when you see it? Good web design is essential for increasing the effectiveness of your website.

Good web design is something that can be achieved relatively easily by sticking to a small set of guiding principles and avoiding some very common mistakes.

Truly excellent web design skills are born out of years of experience, dedication and plenty of hard-learned mistakes. Fortunately, being truly excellent at web design is not a pre-requisite for building a fantastic website and the lessons learned from those mistakes can be passed on without the hardship.

This article contains some of the principles which I have learned the hard way and the easy way. Each principle is fairly obvious but so many designers ignore them for one reason or another and the consequence is a hard-to-use, poor looking site that is difficult to manage and fails to make the top 1000 in Google. If your website adheres to the principles below it will almost certainly be much healthier, and you and your visitors will reap the benefits.

1. Keep Everything Obvious - Don't Make Me Think

The book entitled Don't Make Me Think!: A Common Sense Approach to Web Usability by Steve Krug is one of the best selling books on the subject of web design and usability. Personally, I think thinking is a good thing but at the same time I don't want to be struggling to figure out how to submit a web form!

Visitors to a website expect certain conventions, breaking these is a great way of losing visitors. People expect to find the navigation at the top of a page or on the left hand side. Logos are mostly found on the top left. Much research has been conducted into how people view and use web pages. The good news is that you do not to know all of this; instead look at how larger companies such as eBay, Amazon, Google, Microsoft structure their pages and the language they use, then emulate them.

2. Limit Colours

A website using too many colours at a time can be overwhelming to many users and can make a website look cheap and tacky. Any users with colour blindness or contrast perception difficulties may even be unable to use the site.

Limiting a palette to 2 or 3 colours will nearly always lead to a slicker looking design and has the added bonus of simplifying your design choices, reducing design time.

Software like Color Wheel Pro can greatly simplify the creation of a pallet by showing which colours sit well together. If you really do not have the eye for design then software like this provides the perfect way of escaping monotone or badly combined colour schemes.

If your site uses blue and yellow together or red and green then it may present problems to anyone suffering with colour blindness. Vischeck.com provide free software that can simulate different types of colour blindness.

3. Be Careful With Fonts

The set of fonts available to all visitors of a website is relatively limited. Add to that the possibility of a user having a visual impairment then the options become even smaller. It is advisable to stick to fonts such as Arial, Verdana, Courier, Times, Geneva and Georgia. They may not be very interesting but your content should be more interesting than your font and if it can't be read, what is the point of having a site?

Black text on a white background is far easier for the majority of people to read than white text on a black background. If you have large amounts of text then a white or pale background is far more user friendly. Always ensure that there is a good contrast between any text and its background. Blue text on a blue background is okay as long as the difference in shade is significant.

Verdana is often cited as being the easiest to read on the screen. Georgia is probably the best option for a serif font.

4. Plan for Change

If you fix the height of your page to 600 pixels will you still be able to add additional menu items without completely redesigning your page?

The ability to add or remove content from a website is fundamental to the ongoing success of it. Having to rewrite the entire web page or website each time you want to make a small change is sure fire way to kill your interest in your own site and will negatively impact your overall design and usability.

Getting a good idea of how your website is likely to grow will clarify how best to structure your layout. For example, a horizontal navigation is often more restrictive than a side navigation unless you use drop down menus; if your navigation is likely to grow and you hate drop down menus then your design choice has been 99% made for you!

Understanding how to use Cascading Style Sheets (CSS), avoiding unconventional layouts and complicated backgrounds will all help enormously.

5. Be Consistent

Again, don't make your visitors think! About how to use your site at least. If your navigation is at the top on your homepage, it should be at the top on all other pages too. If your links are coloured red ensure the the same convention is used on all sections.

By using CSS correctly you can make most of this happen automatically leaving you free to concentrate on the content.

6. Keep it Relevant

A picture is better than a thousand words but if the picture you took on holiday is not relevant to your Used Car Sales website then you should really replace it with something which reflects the content or mood of the page; a photo of a car perhaps!

If you can take something off of your web page without it adversely affecting the message, appearance or legality of your website you should do it without hesitation.

Avoid the need to add images, Flash animations or adverts just because you have space. This wastes bandwidth and obscures the intentions of your website. If you absolutely must fill the space, then exercise your imagination to find something as relevant as possible.

Keeping your content focused will ultimately help your search-engine rankings.

7. Become a CSS Expert

Cascading Style Sheets should be any web designer's best friend. CSS makes it is possible to separate the appearance and layout of your page from the content. This has huge benefits when it comes to updating and maintaining your site, making your site accessible and making your site easy for search engines to read.

CSS at a first glance is very straightforward but is definitely worth investing in one or more books. Two great books are: CSS the Missing Manual by David McFarland and Bulletproof Web Design by Dan Cederholm.

8. Avoid Complexity

Using standard layouts for your web page will save you development time and make your site easier to use. Pushing the boundaries nearly always leads to quirky behaviour, cross-browser problems, confused site visitors and maintenance headaches. Unless you really do like a challenge then avoid complexity wherever possible.

Many standard layouts are freely available online with much of the boring, repetitive work already done for you.

The principles above all border on common sense and are well known to most people, yet so many sites continue to deviate away from them and suffer as a consequence. Following these principles will help you keep away from trouble, although it still doesn't guarantee it!

---

About the Author: Paul has worked as a programmer and in Web Design for over 15 years.

Things to Thing About When Developing Your Website

What's Your Objective?

Website development can be a complicated thing. In this post firm Patrick Schwerdtfeger offers up some great things to consider that truly simplify the website design process. Before designing a new website (or redesigning an existing site), consider these questions. They will help you develop a solid development plan that is aligned with your audience and website's purpose.

This first website objective is focus. Your site needs to have a narrow and specific focus. Why is this? Because there are literally millions of websites out there and the visitors you're lucky enough to attract will only take a few seconds to decide whether they'll stick around or whether they'll simply click the back button and continue browsing elsewhere. Within those few seconds, your site needs to communicate exactly what it's designed to do so the visitor can decide if it meets his or her needs or not.

One of the best exercises to enhance the focus of your site is to establish a 15 to 25-word positioning statement that guides all your development activity going forward. Think about it like a mission statement. It should articulate exactly what your website does in just 15 to 25 words.

Another way to look at it is to do a Google search for a keyword in your field and see what comes up in the results page. Under each listing, there's a short description of what that site is all about. As it turns out, the search engines get that description from the meta tags on those websites but it's exactly the same thing. What do you want YOUR description to say?

Once you've established a positioning statement, you should display it prominently on your homepage. It should be one of the first things visitors see when they land on your website. And as I mentioned above, the same statement should be included in your meta tags as your site description. That way, the search engines know exactly what your site is about at the same time. And if your site shows up in a search results page, that description will show up as part of your listing.

The second objective is DEPTH. Again, this objective serves your visitors as well as the search engines. Build a massive amount of content all about your narrow business focus. That way, if a visitor lands on your website and decides in the first few seconds that they need what you're providing, they'll go on to find a ton of resources all about that topic, satisfying their need and establishing trust along the way.

Depth of content helps your website with the search engines as well. Google uses complicated algorithms to assess value to different websites and one of the biggest things they look for is content. If your website has a narrow focus and lots of content about that focus, it will get ranked higher within your area of expertise. Google will consider your site a good resource for people searching for your narrow focus.

The third objective is to make your site STICKY. This is a relatively new term that describes a website's ability to keep a visitor on the site. A lot of sites do a fairly good job of attracting visitors but many of those visitors take one look at the site and leave within a second or two. As I mentioned earlier, the positioning statement can do a lot to help someone understand what your site is designed to do. But you need more than that to keep them browsing.

The visitor needs to see immediate value when they visit your site. They need to see something that will benefit them right away. They need to see something they can use to make their own lives better. This is the foundation behind today's value-first marketing moniker. People have been over-marketed and have become skeptical in clever marketing slogans. They want to see the value. They want proof that you can deliver. They want to sample your product or service before they buy anything.

You should spend some time and think about what you can offer your website visitors as soon as they land on your site. It could be information. It could be a tool or calculator of some kind. It could be a free subscription. It could be an entertaining video or an interactive game they can play. Whatever it is, you need to capture your visitor within seconds and guide them to something that will benefit them.

Once they've received one piece of value, give them a second and then a third. Guide them through a maze of value, encouraging them to continue browsing and discovering even more. This is the key to a sticky website and you can get a good idea of your progress by measuring your average time on the site through your analytics platform.

There are a million different websites out there and they're all designed to achieve different objectives. But each one of those websites can be a bit better by incorporating more focus, depth and stickiness. All three improve your website' effectiveness and all three offer benefits with the search engines as well.

---

About the Author: Tactical Execution with Patrick Schwerdtfeger is a strategic company focused on growth marketing and program implementation across business markets. Visit the website for actionable guidance for revenue generation.

How to Redesign Your Website for Usability

What do all web browsers have in common? They look for certain consistencies across websites. These consistencies are in core elements that make navigation and utilization efficient and allows them to find information quickly

In this post, Richard Hill suggests a number of ways that you can re-design your website in order to achieve improved usability and layout without starting from scratch. Here are his key suggestions..

Simple Navigation

Navigation that is clear and consistent.

Probably the worst issue is 'lost visitors' – those who are in a maze and don't know where they are in the site. The site should always allow users to easily return to the home page and preferably get to any page with a single click.

Studies have shown that users want to find things quickly, and this means that they prefer menus with intuitive ranking, organization and multiple choices to many layers of simplified menus. The menu links should be placed in a consistent position on every page.

Clarity

Users do not appreciate an over-designed site. A website should be consistent and predictable. For maximum clarity, your site design should be built on a consistent pattern of modular units that all share the same basic layout, graphics etc.

Designing a Website That Meets Their Objectives

Everything above is pretty simple, but how do you ensure that you can achieve it?

The answer is website architecture – an approach to the design and content that brings together not just design and hosting but all aspects of function, design, technical solutions and, most importantly, usability.The distinction may seem academic but imagine trying to publish a magazine using just graphic design and printing whilst ignoring content and editing. It just would not work yet that's what too many people still try to do.

Website Architecture

Defining a website using web architecture requires:

• Site maps
• Flow charts
• Wireframes
• Storyboards
• Templates
• Style guide
• Prototypes

This planning saves you (the client) money. The better the site map, flow chart, wireframe, storyboard, templates, style guide and prototype the more time and money you save because it gives the designer who has to do the graphics and the developer who has to do the programming a blueprint.

We are constantly amazed that people who wouldn't think about building a house, car, ship or whatever will still build a website without an architectural plan.

The benefits of such include:

• Meeting business goals
• Improved usability
• Faster delivery
• Reducing unnecessary features
  

Site Maps

Many people are familiar with site maps on web sites which are generally a cluster of links.

An architectural site map is more of a visual model (blueprint) of the pages of a web site.The representation helps everyone to understand what the site is about and the links required as well as the different page templates that will be needed.

Flow Charts

A flowchart is another pictorial or visual representation to help visualize the content and find flaws in the process from say merchandise selection to final payment.

It's a pictorial summary that shows with symbols and words the steps, sequence, and relationship of the various operations involved and how they are linked so that the flow of visitors and information through the site is optimized.

Wireframes

Wireframes take their name from the skeletal wire structures that underlie a sculpture. Without this foundation, there is no support for the fleshing-out that creates the finished piece.

Wireframes are a basic visual guide to suggest the layout and placement of fundamental design elements on any page. A wireframe shows every click through possibility on your site. It's a "text only" model to allow for the development of variations before any expensive graphic design and programming, but one that also helps to maintain design consistency throughout the site.Creating wireframes allows everyone on the client and developer side to see the site and whether it's 'right' or needs changes without expensive programming. The goal of a wireframe is to ensure your visitors' needs will be met in the website. If you meet their needs, you will meet your objectives.

To create a wireframe requires dialog. You and your developers talk, to translate your business successfully into a website. Nobody knows your business better than you and your developers should listen to ensure the resulting wireframe accurately represents your business. You, however, must answer the questions; questions such as:

• What does a visitor do at this point?
• Where can a visitor go from here?

and ignore questions about what your visitor sees at this point. Sounds easy, but!

Storyboards

Storyboards were first used by Walt Disney to produce cartoons. A storyboard is a "comic" produced to help everyone visualize the scenes and find potential problems before they occur. When creating a film, a storyboard provides a visual layout of events as they are to be seen through the camera. In the case of a website, it is the layout and sequence in which the user or viewer sees the content or information.

However, the wireframe provides the outline for your storyboard. Developers and designers don't need to work in a vacuum - the wireframe guides every design, information architecture, navigation, usability and content consideration. Wireframes define "what is there" while the storyboards define "how it looks".

Templates and Style Guide

Templates are standard layouts containing basic details of a page type that separates the business (follow the $) logic from the presentation (graphics etc) logic so that there can be maximum flexibility in presentation while disrupting the underlying business infrastructure as little as possible.

Style guides document the design requirements for a site. They define font classes and other design conventions (line spacing, font sizes, underlining, bullet types etc.) to be followed in the Cascading Style Sheets (CSS) used to provide a library of styles that are used in the various page types in a web site.

Prototypes

A prototype is working model that is not yet finished. It demonstrates the major technical, design, and content features of the site.

A prototype does not have the same testing and documentation as the final product, but allows client and developers to make sure, once again, that the final product works in the way that is wanted and meets the business objectives.

Once you have built your virtual site, it's a lot quicker, easier and cheaper to build the real one.

About The Author
Richard Hill is a director of E-CRM Solutions and has spent many years in senior direct and interactive marketing roles. E-CRM provides EBusiness, ECommerce and Emarketing and ECRM. http://www.e-crm.co.uk/profile/message170807.html

Creating the Best Website Layout

If you want your website to be optimized for Search Engines and User Friendly, then you should follow proven design standards. Many of these standards were developed by industry professionals, years of research (not to mention trial and error), and website analytics.

The key design and layout elements which should remain constant are: Masthead across the top – the masthead is where the logo goes and usually the imagery that supports the subject matter on the website.

The left hand column should contain all the primary navigation, which should remain constant across the whole website. It should list all the main categories of the website, so users can find their way around from every page.

The right hand column on the homepage should provide navigation to individual pages in the site which you want to highlight. Or, it can be used for small applications, such as email newsletter sign-up, scrolling news headlines, links to the forum, etc. This column tends to disappear on the content pages to leave more space for the article and images.

Top menu bar – some sites have most of their navigation in the top menu bar which goes across the page under the masthead (take a look at Guardian or Forbes as examples). I don't like this for two reasons. First, it restricts the number of menu links that you can have. Secondly, it usually means that the site has flash based drop down menus to enable them to accommodate more links. Flash menus are not user friendly. They force your reader to search for links to the content they are looking for. Don't make your user work for their answers. Also, search engines find it harder to index sites with flash menus.

Bottom menu bar – This strip at the foot of every page tends to contain links to the site's terms and conditions, privacy statement, sitemap, etc.

The central column contains the content. On the homepage, this can be a combination of an introduction to the website and teasers to articles. On the content pages, the articles and images sit in the central column.

Search top right on every page – this is the search box used to search the content of the website. This is a less rigid placement than it used to be, but you can't go wrong if you place it top right.

Time and date – usually placed on the right hand side under the masthead. This is optional, but does give readers the impression that the site is up-to-date.

Within this layout there is a great deal of flexibility to add your own personality and styles, particularly when you overlay your design on the basic page structure. However, at all times your number one goal should be constant; that is to make your website simple and intuitive, for every reader that visits. To achieve this learn from those sites that have a lot of experience.

Special thanks to Miles Gilford for his contribution.