Website Design Basics Learn the principles of building successful websites.

Transcription

1 Website Design Basics Learn the principles of building successful websites. The following information was used with permission from Great website design Great website design is the result of careful thought and planning. It doesn't matter if you're a beginner creating your first website or if you are an experienced webmaster and it doesn't matter if you build your website using a simple program like notepad or a WYSIWYG HTML editor like Dreamweaver - what makes the difference is your plan. You decide what to include on your website and how to present it. If you spend time thinking about your website's design before you start building it you will create an excellent site that visitors will return to again and again. Your website has to be quick to load, nice to look at, easy to use and navigate. People will remember if your website was full of useful information or if it was a jumbled maze full of pop-ups, pop-unders and flashing gifs that they could not make any sense out of. Keep this in mind as you create your website. The Golden Rule of Website Design So you might ask "How do I design my website?" The answer is to focus your website on solving a problem. People are on the internet to find answers - create your website to meet that need. Find a niche and provide high-quality, unique content people are looking for. You can make your website a huge success by focusing on solving users' problems. Take Google for example - their website is an extremely simple, clean design that contains their logo and a box for you to enter what you are searching for - nothing on the webpage distracts the user from the solution they offer. When you visit Google's website there is no question who they are and what they do. They are focused on quickly providing the visitor with relevant search results. That is why they have one of the most successful websites ever created. All other elements of website design are secondary to filling the visitor's need. They will simply click away to the next website looking for a solution if you can't help them.

2 Getting started What is the problem that you have the solution for? For instance: Do you have the secret to making money on the internet? Can you teach someone how to housebreak a pet? Decide what solutions you can offer and then write them down. This is your mission statement. Keep this list handy and refer to it often as you design your website so you don't get sidetracked. Users' needs are not necessarily hard to fulfill but one website can not solve all users' problems, so don't try to. Focus on the solution you offer the user and concentrate on how to deliver it. Meeting expectations Now that you've figured out what you can offer your users you have to focus on delivering that solution. People looking for answers want them now! Studies have shown that you only have a few seconds to get a visitor's attention and hold it before they click away - don't waste any time. Tell the user what you have to offer right away. Don't use intro pages that take too long to load. People want to get to your content and you should remove anything that gets between the user and the information. Guide them to their goal with as few "clicks" as possible. Plan to succeed Many people get frustrated when they try to create a web page simply because they don't do any planning. If you jump in and start writing HTML with no plan you may find yourself lost and so will your visitors. Before you start up your computer get out a pencil and some paper. Create a diagram that illustrates how your website will be layed out. Build your website one page at a time focusing on one topic per page. As you add new content expand your website diagram adding new pages in a logical order. This will make it much easier for you to build your site and for visitors to find their way around. If you follow a plan you will avoid leading viewers to blank pages, dead links or having them run in circles trying to navigate your website. Don't worry if you think your website is not perfect. No website is ever totally finished. You should always be fine-tuning and updating your content. You should continue to learn web site design from books and other websites. Website construction is an ongoing process. Build - review - add new content - repeat.

3 Typography Good typography is part of web page design and is necessary to communicate with your users. Your typography should be pleasing to look at and easy to read. Designing for the computer screen offers unique challenges. Unlike text on a printed page, the web designer does not have complete control over how their text will appear on screen. Users can decide to change the fonts you have selected and their size. Another problem is that your webpage will appear differently depending on which browser it is being viewed. Keeping this in mind; design your website so that it will be legible with a wide variety of settings. Typeface The typeface you select will set the feel of your web site. Fonts are generally divided between two groups: serif and sans-serif. Serifs are the extra lines added to the main strokes of the typeface. In print serif fonts are supposed to be easier to read because the serifs lead the eye across the text. The problem with this is that printed pages can have a resolution of 2400dpi while a computer screen is limited to about 96dpi. This means that serif fonts on the screen can appear pixilated. Sans-serif fonts generally look cleaner on the screen. The look of a font should reflect the content of the site. For example, Comic Sans MS is a whimsical font more suited to a children's page than to a corporate website. Contrast Contrast is the difference between the color of the text and the background. Black text on a white background offers the most contrast and makes your text as clear as possible. Avoid using color combinations that will make it difficult to read. The closer the values are between the text and the background the harder it will be to read. Line length Excessive line length can make it difficult to read from the end of one line to the beginning of the next. You can control line length by using BlockQuotes, laying out your page with narrow columns or using <BR> (break) characters where you want to force a carriage return. Alignment Text is more easily read if it is aligned left - also known as "ragged right" (the text lines up on the left hand side). Right aligned text and center aligned text are more difficult to read as viewers get lost when finishing one line and looking to find the start of the next.

4 Emphasis When you want to draw attention to certain words or phrases you have several options but be aware that they can interfere with legibility. Use these sparingly: Bold Italics Underline Color ALL CAPS The most common and effective method. Don't overuse or it will lose its impact. Be careful with italics since they can appear jagged and ruin legibility. This can cause confusion as it's understood on the web that underlined words are links. Color can be an effective way to draw attention although it can also be confused for a link. Rarely do this as it's considered rude and it's hard to read entire sentences or paragraphs in all caps. Location is everything Above the fold is gold. In the newspaper industry important stories are placed on the top half of the page - this is known as 'above the fold'. This is prime real estate because it's where readers first look. Use this approach when designing your website. Put your eye-grabbing content at the top. Don't eat up the top of the page with ads and graphics which force your visitors to scroll down the window to find out what you have to say. Less is more 'Less is more' are words to live by. Since you only have a few seconds to capture a user's interest don't waste any of them with bloated pages that take too long to load. Potential visitors will just hit 'cancel' and move on to the next guy. Keep in mind that not everyone has a high-speed internet connection. Try to keep the file size at the bare minimum. That may mean you have to lose that 'really cool' graphic or flash intro - but ask yourself - does it add to what you are saying or is it just eye candy? Honestly, no one cares how long you worked on the razzle-dazzle - they just want to find the answer to their problem. Is the solution really going to be found in your Photoshop masterpiece? If not, ditch it. Be consistent Make it easy for your visitors to find thier way around by keeping navigation menus in the same place from page to page. The most common places are a vertical strip at the top left or a horizontal bar at or near the top of the page. Familiarity make users feel at ease, don't make them guess what to do with each page they load. The same goes for link colors - use the same color and style for links throughout your website so they know what is a link and what is not.

5 Break it up Divide your content into logical blocks. Use headlines, subheadlines and paragraphs to guide your users through your copy. Nobody wants to fight their way through a big, grey wall of text. Cut it into bite-size pieces readers can digest. Best practices Thoroughly plan your website around serving the user. Design web pages that load quickly. Simplify navigation. Be consistent with fonts, colors and menu locations. Use plenty of 'white space'. Preview your website on as many different platforms as possible to eliminate bugs. Don't make pages too long - users don't like to scroll down too far. Keep graphics to a minimum to reduce load times. Carefully select color. Keep sufficient contrast between the text and background. Use fonts that are appropriate to your content. Keep line-length at a comfortable size. Don't overuse flashing/animated graphics. Write as shortly and clearly as possible. Put your best content at the top of the page. Break text into logical blocks. Provide users with a way to contact you.