The Most Useful Design Tips of the Year

The Internet is changing with the development of Web 2.0, and the changing marketplace reflects a need for increased usability, easier functionality and design that is visually appealing but that still lends to an easy to maneuver, content-rich website. The following is a list of ten top website design tips that made a difference in 2007.

1. Know the audience: The design of your website should cater specifically to your target market both in the visual sense, and in usability. It is critical that the design of your website reflect the values that your potential customers will hold.

2. Personalize: Even if your website is designed by the greatest professionals in the business, if you do not allow your customers to get to know you, or to believe in you, you will have difficulty selling your ideas.

3. No uncertain terms: Clearly identify what the purpose is for your website, and ensure that every facet of your website focuses on this goal. Are you conveying a message, selling a product or offering a service? Make this obvious from the beginning, and keep your focus until the end.

4. Keep it quick: You have between ten and thirty seconds to capture the attention of your customer, so keep graphics small in order to minimize the time it takes to load your website. Compress images when possible, so that your loading times stay low.

5. Design is important, content is more so: Good content is what sells your ideas and products. Is your copy delivering the message you intended for it to? Grammar and spelling ARE important; so proofread everything you write before it goes live.

6. Map your Site: You can make your website’s navigation much more easy and intuitive simply by creating a site map, or a directory web page. If your customer cannot navigate your website quickly or easily enough to find what they came for, they will go elsewhere for solutions.

7. Strive for consistency: Your website should be consistent in the design, the look and the feeling. Colors, themes and ideas should stay constant throughout every page on the website to make the best impression on your visitors.

8. Keep track of links: You should make sure that your site is fully functional at all times, which means checking out your website links on a fairly regular basis. If you have dead links on your site, there is no telling how much of a negative impact will transfer to your search engine page ranking, or the opinion your visitors have of your website.

9. Make a simple start: When you begin your site, take everything one page at a time, and optimize each page for the best results before moving on to the next. This means that you should make sure that every page is perfect before leaving it for the next one.

10. Optimize: The top search engines are responsible for helping more than 85-percent of all web users to find exactly what they are looking for. If you want to be one of the websites that is considered when users look for similar products or information, you must make sure that your pages are designed to maximize your search engine placement.

I hope you enjoyed our Top Ten Design Tips list - If have any comments or would like to add to the list - we strongly encourage you to do so…

I typically focus my top-ten lists on issues that I think are the most important and most in need of attention. This time, I've used a different criterion: I've focused on the known usability principles that designers most frequently violate. Whether big or small, the very prevalence of these usability problems makes them worthy of attention.

1. Emphasize what your site offers that's of value to users and how your services differ from those of key competitors

This is one of the most important issues in homepage design, so it's particularly sad that it's the least followed of all the guidelines. Websites are incredibly bad at explicitly stating what they offer users. Instead, they hide their offerings in generic marketese that makes very little impression on prospective customers.

Remember: when users have needs, they typically query search engines and allocate only a few seconds to scan each of the sites that the search engine drags up.

2. Use a liquid layout that lets users adjust the homepage size

Fighting frozen layouts seems a lost battle, but it's worth repeating: different users have different monitor sizes. People with big monitors want to be able to resize their browsers to view multiple windows simultaneously. You can't assume that everyone's window width is 800 pixels: it's too much for some users and too little for others.

3. Use color to distinguish visited and unvisited links

Knowing where you've been is one of the three basic features that all navigation designs should support. (The other two are "Where am I?" and "Where can I go?")

It's sad that only a third of corporate homepages tell users at a glance which site areas they've already seen. Navigational confusion results when designers disable one of the few useful features of a standard Web browser: having visited and unvisited links appear in different colors. Our testing has shown that violating this guideline is particularly harmful for elderly users.

4. Use graphics to show real content, not just to decorate your homepage

For example, use photos of people who have an obvious connection to the content as opposed to using models or generic stock photos. People are naturally drawn to pictures; gratuitous graphics can distract users from critical content.

Stock photography sellers are doing a brisk business, but users don't believe that your product will make them happy just because there's a smiling lady on your homepage. Better to show your actual product.

5. Include a tag line that explicitly summarizes what the site or company does

Our recent study of how people use "about us" information on websites did find that most users could eventually dig up information about a company's purpose. But why do most sites make prospects work so hard?

In keeping with most advertising slogans, content-free tag lines abound. Once you've paid millions to get a useless slogan developed, it's probably hard to accept that it won't work for your website.

I suggest a compromise: put the useless slogan in a graphic banner next to your logo, where it will be ignored. Then add a true tag line in plain-text format in the content area where people will actually see it.

6. Make it easy to access anything recently featured on your homepage

For the Alertbox, 80% of the readership happens after a column has passed from the homepage into the archives. In general, users remember when they've seen something interesting on a homepage. However, unless that homepage lists recent features and offers links to them in the archive, users will never be able to find what they're looking for on subsequent visits.

7. Include a short site description in the window title

This is mainly important for search engine visibility, but why not take advantage of this superior -- and cheap -- form of Internet marketing?

8. Don't use a heading to label the search area; instead use a "Search" button to the right of the box

This is a small point, but there's no reason to label the search box if there's a "Search" button right next to it. Interaction design's less is more principle tells us that extra elements in a dialogue distract users from the salient points and reduce their ability to understand an interface. (In other words, with less to consider, people understand more of what's there.)

9. With stock quotes, give the percentage of change, not just the points gained or lost

This guideline only applies to sites that provide stock quotes, either in the investor relations information or elsewhere. With stock quotes, the general principle is to help users understand the relative magnitude of a change, and thus its true importance. (A similar guideline applies to presenting other statistics that change over time.)

A stock increase of $0.75 means very different things if the starting price was $8 (a booming 9% leap) versus $60 (a modest 1% gain).

10. Don't include an active link to the homepage on the homepage

This is a special case of a guideline that applies to all website or intranet pages: never have a link that points to the current page. (A button to refresh stock quotes or other changing information is a different matter, and should be presented as a command button rather than a navigation link since it doesn't lead to a new location.) Active links to current pages cause three problems:

* If they click it, a link leading to the current page is an utter waste of users' time.
* Worse, such links cause users to doubt whether they're really at the location they think they're at.
* Worst of all, if users do follow these no-op links they'll be confused as to their new location, particularly if the page is scrolled back to the top.

Homepage links on the homepage typically result from using a universal navigation bar that includes "home" as an option. Fine. But when users are on a page that's featured in the navbar, you should turn off that option's link and highlight it in such as way that indicates that it's the current location.

The Process of Great Web Design Just to make sure we are all on the same page, lets begin with the basic definition for “web design”. According to Wikipedia, web design is:

The process of web design can be compared to the process of writing a research paper. In the conceptualization/planning stage, flowcharts (the outline) are created which illustrate the navigational structure of your website. In the modeling stage, static wireframes are created (the rough draft) which illustrate the skeletal layout for each section of your website. After the wire frames are created, graphics, colors and text are used to create the design of your web pages based on the layout of the wire frames. In the execution stage, your design is converted into a format supported by web browsers, text and content are added, and finally, your website is published live to the Internet for the world to see (final draft).

All three stages of the design process are equally important. Many web designers skip a stage in order to save time or because they don’t think that is is necessary. However, all three stages are necessary if your goal is to create a successful design and respectable website. Even if the three stages are used, there are many mistakes that web designers can make that will lead to poor-quality, non user-friendly websites.
It’s time to clean out the cabinet of bad web design practices and restock it with the good ones.

Stage 1: Conceptualization and planning

This stage is skipped more often than the other two stages. Most writers don’t enjoy creating outlines for research papers, and most web designers don’t like creating flowcharts either. Don’t be lazy. If you put forth the effort and plan out your website, then you will find the web design process to go smoothly with fewer mistakes made along the way.

There are a few things that you will need in order to effectively conceptualize and plan your website:

To begin, grab your pen and paper or launch your favorite flowchart software. We use OmniGraffle Professiona for Mac OS X which costs $150 per license but is well worth it if you create websites on a regular basis. If you’re on a PC, then SmartDraw is a great FREE piece of flowchart software that you can use. A pen and paper work just fine, though.

There are many methods to creating flowcharts. We are going to show you the most basic way to do it for the sake of time and the length of this article. If you want to learn more about flowcharts search for flowcharts on Google or Yahoo.

View the flowchart that we created when conceptualizing Chromatic Sites. (1) At the top of the flowchart we list the name of our website. (2) Next, we include each primary section of our website: Home, About, and Services. These sections are the main navigation for your website. What the names of each section will be is entirely dependent on the content of your website. Try to use as few sections as possible so that your visitors are not overwhelmed when navigating through your website.

(3) Next, add all of the secondary pages (subsections) that will be listed on each of the primary pages. For Home, we have included Professional Web Design, Web Development, and Search Engine Optimization. The secondary navigation needs to be more descriptive than the primary navigation. The deeper your website

The Dos

-Less is more; keep the number of primary sections to a minimum. We use 6 sections on our website which is more than enough -Whether you use a pen and paper or flowchart software, keep things as clean and organized as possible. Although you (and anyone working with you) are the only ones that will be using the flowchart, it still needs to make sense -Your primary sections should use broader terms, while secondary and tertiary terms should be more descriptive

The Donts

Creating a flowchart is pretty straight forward; however, there are a few mistakes that can easily be made:

-Don’t use very descriptive terms in your primary navigation unless your entire website focuses on one narrow topic -Don’t try and lump multiple topics on the same page. Create a general section for these topics and from that section create subsections. This will make the subsection (descriptive) web pages more likely to have better rankings in the search engines (Google, Yahoo, MSN, Ask) Once you have created a concise and descriptive flowchart, you’re ready to move on to the second stage of the web design process:
modeling.

Stage 2: Modeling

In the modeling stage, static “wireframe” mock ups are created. Each mockup illustrates a bare-bones skeleton of the layout for each of the web pages that will be included in your website. This stage is important because it gives us an idea of where different elements will be placed in our design. Some of these elements are:

To create these mockups, you can use a pen and paper or your preferred mockup software. In the past we have used Photoshop, but lately we have been using OmniGraffle Professional. OmniGraffle is not as resource intensive as Photoshop is and it allows us to assemble our wireframe mockups much quicker.

In addition, make sure that you have the flowchart(s) that you created nearby as you will need to reference these from time to time to make sure that you are mocking up all of the pages that will appear on your website.

Here is our example of how a wireframe mockup should look. As you can see, there are no colors or graphics included. This is exactly how a wireframe mockup should be - a skeletal layout of your design. The purpose is to be able to have a general idea of where each of the web page’s elements will be placed.

We usually begin from the top left and work our way down to the bottom. There is no specific way that a wireframe should look. Use your imagination. However, make sure that when creating your wireframes you don’t forget to include the most important elements of a website (logo, navigational menu, content placement, images/video placement).

If some of your pages will be using the same layout, then it is not necessary to mock all of those pages up (although you certainly can).
Just be sure to mockup any unique layout that your website will have.
You’ll thank yourself later.

The Dos

-mockup all unique pages
-include important elements (logo, navigation, content placement, images/video -placement) -start from the top and work your way down -reference your flowchart created in stage 1 to make you don’t forget to mockup any pages -save, save, save - like with anything on the computer, save your mockup(s) every 10 minutes or so
focus on clean, user friendly layouts -label your elements so you don’t forget what they are when you reference them in stage 3, execution -use other web sites as inspiration; there is nothing wrong with taking elements from other sites and making them your own (see “donts”)

The Donts

-don’t include graphics or colors (that’s for the next stage) -don’t make your mockups too “busy”; focus on clean, well organized, user friendly layouts -don’t skip this stage; it is just as important as the first and the last -if you take elements from other websites, make sure you don’t plagiarize; there is a difference between being inspired by another website to create certain elements of your design and blatantly ripping off their layout and colors

Stage 3: Execution

n the third and final stage, execution, the planning from stages 1 and 2 are combined to assist in creating a live, interactive website.
The third stage is by far the most time intensive since you will be 1) creating the graphics 2) creating the content, and finally, 3) converting the web designs from images into code that web browsers use to present your website to the world.

By the time you reach the third stage, you should have a clear idea of:

-how your visitors will get from one place to another (stage 1, flowchart) -how your web pages will be laid out (stage 2, wireframe mockups)

If you don’t have a clear idea of these two things, go back to the first and second stagees and continue to develop them. You will find that the third stage is easiest when you have constructed a clear, concise battle plan for designing your website.

Ditch the pen and paper

In stage 3, you need to be using Photoshop or another image editing program since you will be using colors and graphics to create the layout for your website.

We usually begin creating the “home” page (index) first. Use your wireframes that you created in stage 2 as a template for each of the pages you create. However, instead of using solid boxes, use graphics, colors and text instead. Each page must look exactly how you want them to look on the Internet since this is the final stage of the design process.

Be sure to include the background for your navigation (but don’t actually add the text to your image). When converted using CSS (cascading style sheets), your navigation should be in the form of text and not images. Images are not crawl-able by the search engines (the keywords used in your navigation won’t be indexed in the search engine results pages, meaning fewer people will be able to find your website).

When you’re happy with your designs and feel that they are ready to be put on the Internet, it’s time to break apart the designs so that you can create a CSS based layout. For more information on converting your layouts to CSS or marking up your website in CSS, visit w3schools.com. After looking around the Internet, we couldn’t find a decent image-to-CSS tutorial - so expect one from us in the coming weeks. Converting your designs into CSS is extremely important since table layouts are a thing of the past.

Here is an example of a nearly-completed website of the layout we mocked up in stage 2. This was taken directly from our web browser and as you can see, there is now a logo, colors, a pretty navigation system, a footer, and a most importantly, a clean, organized layout.
Thanks to the planning in stages 1 and 2, our layout is well-organized and easy to use.

The Dos

-reference your templates that were created in stage 2; though it is fine to deviate from your original layout, you shouldn’t need to -do some research before creating your actual design; get ideas from other sites and make them your own (without plagiarizing) -include color and graphics to create the final look for your web pages -use CSS (cascading style sheets) to convert your designs from images into markup understandable by web browsers -reference your flowchart from stage 1 when coding your pages with hyperlinks; it is better to use a drop down menu that includes all (or the majority) of the links in your website on every page; this will allow for easier navigation and also make your pages easier to crawl when the search engine spiders stop by; a great place to get CSS drop down menus is at DynamicDrive.com -finalize your design while working in Photoshop or whatever image editing software you use; it can be a pain to make changes to your design once it is converted into markup (code)

The Donts

-don’t include the text in your navigation menus when converting to CSS; instead of using image text, use regular text that is readable by search engine spiders -don’t use tables when converting; even if you need to buy a book on CSS, it will be worth it; tables are dead -don’t skip the first two stages just to save time; your website WILL be better if you start from the beginning of the web design process (instead of at the end) -don’t forget to compress your images when they are cut apart for CSS; there is nothing worse than a slow loading website because of large image files; Photoshop has a “Save Optimized For Web” option (CS3 - “Save for Web and Devices”)

Process Makes Perfect

By following a web design process such as the one illustrated in this article, you increase the chances of creating a website that is well-organized, easily navigable, and very user-friendly. Lets face it - if visitors get lost or become confused while attempting to surf your website, they might hit the back button and look for a more user friendly website. People do not like to think when it comes to finding their way around websites. Don’t make them think. You do the thinking by planning out your website from stage 1 to stage 3 and you will find that more people will enjoy visiting your website.

I have compiled many top-10 lists of the biggest mistakes in Web design. See links to all these lists at the bottom of this article.

1. Bad Search

   A related problem is when search engines prioritize results purely on the basis of how many query terms they contain, rather than on each document's importance. Much better if your search engine calls out "best bets" at the top of the list -- especially for important queries, such as the names of your products.

2. PDF Files for Online Reading

   Users hate coming across a PDF file while browsing, because it breaks their flow. Even simple things like printing or saving documents are difficult because standard browser commands don't work. Layouts are often optimized for a sheet of paper, which rarely matches the size of the user's browser window. Bye-bye smooth scrolling. Hello tiny fonts.

3. Scrolling Text, Marquees, and Constantly Running Animations

   Never include page elements that move incessantly. Moving images have an overpowering effect on the human peripheral vision. A web page should not emulate Times Square in New York City in its constant attack on the human senses: give your user some peace and quiet to actually read the text!

   Of course, is simply evil. Enough said.

4. Long Scrolling Pages

   All critical content and navigation options should be on the top part of the page. Users will only scroll if they believe that there is something useful lower down the page.

5. Non-Standard Link Colors

   By default links to pages that have not been seen by the user are blue; links to previously seen pages are purple or red. Don't mess with these colors since the ability to understand what links have been followed is one of the few navigational aides that is standard in most web browsers. Consistency is key to teaching users what the link colors mean.

6. Fixed Font Size

   SS style sheets unfortunately give websites the power to disable a Web browser's "change font size" button and specify a fixed font size. About 95% of the time, this fixed size is tiny, reducing readability significantly for most people over the age of 40.

   Respect the user's preferences and let them resize text as needed. Also, specify font sizes in relative terms -- not as an absolute number of pixels.

7. Opening New Browser Windows

   Designers open new browser windows on the theory that it keeps users on their site. But even disregarding the user-hostile message implied in taking over the user's machine, the strategy is self-defeating since it disables the Back button which is the normal way users return to previous sites. Users often don't notice that a new window has opened, especially if they are using a small monitor where the windows are maximized to fill up the screen. So a user who tries to return to the origin will be confused by a grayed out Back button.

8. Overly Long Download Times

   I am placing this issue last because most people already know about it; not because it is the least important. Traditional human factors guidelines indicate 10 seconds as the maximum response time before users lose interest. On the web, users have been trained to endure so much suffering that it may be acceptable to increase this limit to 15 seconds for a few pages.

   Even websites with high-end users need to consider download times: we have found that many of our customers access Sun's website from home computers in the evening because they are too busy to surf the web during working hours. Bandwidth is getting worse, not better, as the Internet adds users faster than the infrastructure can keep up.

9. Flashturbation

   When used well Flash gives you the freedom to create an unrivaled user experience but (and this is a pretty BIG but) it is dangerously easy to get carried away. Splash pages and animated banners don’t achieve anything other than distract from your content. Use Flash only when it serves a purpose which directly benefits the audience or don’t use it at all.

10. Site doesn’t work on a mac

    I’m a Mac user so I freely admit that I’m biased, but it really frustrates me when I can’t use a web site with my Mac. Thankfully this is becoming less common as more people get seduced by slick apple marketing campaigns, but it still happens occasionally and it still bugs the hell out of me. Web designers can pick up a cheap 2nd hand imac off ebay for buttons and use it to test sites. Plus itunes makes it a great office jukebox!

A well designed website will help your users easily find what they are looking for and will make your business look professional. Designing a website from the beginning with Search Engines and your users in mind will help your website to be a success.

1. Simplify, simplify, simplify. What is the most important thing you want to tell the visitor about on each page? If a web site has too much information on a page, it ends up being confusing to the user. Additionally, Search Engines actually prefer that you separate topics out onto their own pages, as it sees this as more relevant to the users.

2. Personalize: Even if your website is designed by the greatest professionals in the business, if you do not allow your customers to get to know you, or to believe in you, you will have difficulty selling your ideas.

3. First impressions are very important. When people arrive at your web site, you have about five seconds to convince them to stay. On your homepage, keep it simple, communicate what you do and what makes your business different.

4. Design is important, content is more so: Good content is what sells your ideas and products. Is your copy delivering the message you intended for it to? Grammar and spelling ARE important; so proofread everything you write before it goes live.Don't make an all Flash website. Don't make visitors wait for your site to download every time they visit it. Don't make them scroll down to see the last three lines of a block of text.

5. Be personal.Use photographs of people and testimonials from happy clients to build trust. Make sure you include your address and phone numbers on your contact page. People like being able to easily contact you and know where you are located.

6. Make sure to do your keyword research before you start building your site. After discovering what users are searching, you should then choose 6 to 10 phrases you want to rank for and try to incorporate them naturally into your page titles and headlines.

7. Limit your color palette. Professional looking websites tend to use 2-4 colors. This site uses green and white. Use color to help highlight important features on your web site.

8. Use web conventions.For example, using underlined text when linking and make your logo link back to your homepage. People have certain expectations driven by their experiences of other websites. You need to understand what these are and make sure you accommodate them in your design.

9. Make a simple start: When you begin your site, take everything one page at a time, and optimize each page for the best results before moving on to the next. This means that you should make sure that every page is perfect before leaving it for the next one.

10. Design is important, content is more so: Good content is what sells your ideas and products. Is your copy delivering the message you intended for it to? Grammar and spelling ARE important; so proofread everything you write before it goes live.

I hope you enjoyed our Top Ten Design Tips list - If have any comments please mail me - we strongly encourage you to do so…

A Web site is a collection of information about a particular topic or subject. Designing a web site is defined as the arrangement and creation of web pages that in turn make up a web site. A web page consists of information for which the web site is developed. A web site might be compared to a book, where each page of the book is a web page.

There are many aspects (design concerns) in this process, and due to the rapid development of the Internet, new aspects may emerge. For non-commercial web sites, the goals may vary depending on the desired exposure and response. For typical commercial web sites, the basic aspects of design are:

• The content: the substance, and information on the site should be relevant to the site and should target the area of the public that the website is concerned with.
• The usability: the site should be user-friendly, with the interface and navigation simple and reliable.
• The appearance: the graphics and text should include a single style that flows throughout, to show consistency. The style should be professional, appealing and relevant.
• The visibility: the site must also be easy to find via most, if not all, major search engines and advertisement media.

A web site typically consists of text and images. The first page of a web site is known as the Home page or Index. Some web sites use what is commonly called a Splash Page. Splash pages might include a welcome message, language or region selection, or disclaimer. Each web page within a web site is an HTML file which has its own URL. After each web page is created, they are typically linked together using a navigation menu composed of hyperlinks. Faster browsing speeds have led to shorter attention spans and more demanding online visitors and this has resulted in less use of Splash Pages, particularly where commercial web sites are concerned.

Once a web site is completed, it must be published or uploaded in order to be viewable to the public over the internet. This may be done using an FTP client. Once published, the web master may use a variety of techniques to increase the traffic, or hits, that the web site receives. This may include submitting the web site to a search engine such as Google or Yahoo, exchanging links with other web sites, creating affiliations with similar web sites, etc.