How to Design a Website
You can have the best looking website in the world, but if it's not accessible your customers won't be able to use it. You need to focus on getting your content and design working together seamlessly for users of all abilities. Here are some tips that will help you create an easy-to navigate site with beautiful images.
Create simple navigation
Your most important job as web designer is to make sure your visitor enjoys their experience by creating a smooth transition from page to page. The easiest way to do this is by making sure each section has its own unique URL (web address). This means having one URL per page so when someone clicks through links they don't get lost or confused. A good rule of thumb is to keep your URLs short and sweet -- no more than three words long. Also, try to avoid using numbers or symbols like "http://www.website.com/123" because typing these characters takes longer and could slow down visitors' browsers.
Use clear titles
When designing websites, we often see lots of fancy text at the top of our pages which makes us feel very smart. However, there's really only one thing you should put up front - the title. Your main goal here is to attract attention to what you're offering while giving people enough information to know where they are and how far they've come. Make the title enticing so readers want to click on it. If you're selling cars, say something about the car, such as "Ford Mustang Convertible", rather than just saying "Convertible". Keep the title short and simple. To find out what works well online, check out Google Analytics and e-commerce sites such as Amazon.com. These sites typically include great descriptions of products and services along with helpful search terms.
Put your favicon first
The favicon is the small icon that appears next to every link on many Internet browsers. It may look tiny, but it holds a lot of meaning for your customer. By putting it at the beginning of any external links, you tell them right away whether they'll be going somewhere familiar or another domain altogether. For example, if you sell shoes, put the favicon before the rest of the company name. In other cases, you might consider placing it after your primary keywords.
Include alt tags
Alt tags provide alternative details for people who cannot view certain types of media. They allow you to add descriptive information about photos, audio files and video clips without interrupting the flow of your message. Alt tag data helps viewers decide if they would prefer viewing an image or listening to music instead. An added benefit is that search engines also read alt tags, allowing your content to appear higher in results. While alt tags aren't used universally across the Web, including them in your code ensures that everyone sees and understands your images properly.
Choose colors carefully
Colors play a key role in communicating moods and emotions. Colors affect our thought processes, physical reactions and even subconscious responses. Therefore, choosing color schemes wisely is essential for conveying messages accurately. Color psychology studies show different shades elicit specific feelings in consumers. Research the psychological effects of various hues and choose colors that convey positive sentiments. Avoid bright colors that seem overpowering or too loud; stick with soft pastels and neutrals. To determine appropriate color palettes, take a peek inside your competitors' websites. Then examine the psychology behind why those choices work. When in doubt, consult a professional web designer.
Limit graphics to once per page
It's tempting to place multiple graphic elements on a single webpage, especially since high quality images tend to load faster than vector ones. But doing so cuts into valuable bandwidth, and it clutters the layout. Instead, limit yourself to one photo and background image per entire page. That way, you give your reader room to breathe and still maintain visual interest throughout.
Minimize flash
Flash animations and multimedia presentations are fun ways to enhance user experiences, but they consume processing power and require constant downloads. Flash ads can sometimes distract viewers' attention from the content above them. Plus, they can cause compatibility problems with older computers and mobile devices. If possible, remove Flash entirely. Otherwise, opt for lightweight versions of animation software called SWF files to speed up loading times. And always test new designs in real time on several computer platforms, phones and tablets.
Test with cutting edge technology
Make sure your website looks great in all kinds of modern browsers. Each browser interprets HTML differently based on its version number. Some display tables improperly, others misread CSS properties, and some simply lack certain features. So test your site thoroughly with popular browsers like Firefox 3.5+, IE 8+ and Safari 4+. Check out How Browser X Works to learn everything you ever wanted to know about internet explorer.
Optimize your images
In addition to reducing file size, optimizing images improves performance by compressing unnecessary data and streamlining delivery. First, resize pictures to fit the space available. Next, compress large images using lossy formats like JPEG. Don't scale images larger than necessary unless you absolutely must. Finally, optimize images with tools provided by Image SEO Experts. This step gives search engine spiders access to the original image, helping ensure accurate indexing.
Pay close attention to typography
Typography refers to the choice of fonts, font sizes and spacing. Not only does typography impact overall appearance, but it affects usability as well. Serifed fonts, for instance, are easier to read over sans serif typefaces. Likewise, large fonts obscure surrounding text. Spacing between lines indicates paragraph length, while leading defines line height. With careful planning and testing, designers can craft typographic masterpieces.
Be consistent
If you run two blogs side-by-side, don't suddenly change templates with each update. Users will become accustomed to seeing brand icons and layouts in particular places, and switching things around confuses them. Stick to basic style guidelines, and update frequently to keep everything fresh.
Give feedback
After completing a project, ask clients for suggestions on improving future projects. People generally respond positively to praise, so let them know what they did well. Conversely, negative comments and criticisms are useful pointers on areas to improve. Providing detailed explanations allows both parties to better understand each other's needs, goals and expectations. Ultimately, this leads to happier clients!