1. Scope Out the Competition, and Then Design it Better
Comparative analysis is a critical step that many people overlook when designing a website. Click around to see what your competitors are doing, what they look like, and you might be surprised at some of the commonalities successful competitors share. It only takes a few minutes, and you will learn valuable dos and don’ts to apply for your site. Stand out by considering what Web design elements work together to make other sites well-designed and what you can you do better.
2. Don’t Reinvent the Wheel: Use Vetted Best Practices
When Web design started to be taken seriously in the 1990s, designers didn’t need to reinvent the wheel. They already had some tried and true rules to go by, which you can use, too:
- Visual Hierarchy: Consider the “visual hierarchy.” People’s eyes usually move from top to bottom and left to right, like reading a book. If you put something in the bottom left corner, it’s unlikely to be noticed. Eyes tend to bounce in an “F” pattern or “Z” pattern, so be aware of what you’re placing (or not placing) in the most important spots. Web design elements like color, size, and scale also impact where people look.
- The Rule of Thirds: An old photography and cinema rule, the rule of thirds, involves dividing up the “above-the-fold” part of your webpage, the part that’s visible without scrolling down, with four lines, turning it into a 3×3 grid. Along these lines and where the lines intersect are where you want to put the focal points.
- Negative/White Space: When designers talk about negative or white space, they’re referring to the blank space surrounding an object. Being aware of the space you’re not using will lead to a more attractively designed webpage. Negative space creates room for all elements on the webpage to “breath”, making it easier for the visitor to read. Think of your webpage like an elevator; nobody wants to get into a crowded elevator with people/elements bumping against each other; they’re going to wait for the next one or move on to the next website.
- Color Psychology: Use color to elicit emotion. If you think that’s a bit touchy-feely, know that many major brands use this to great effect. A good example of leveraging color psychology is the Red Cross. Red signifies danger and injury, white signified good health and cleanliness; by pairing these two colors into their logo, the American Red Cross has created a descriptive logo that illustrates the relief they offer.
3. Text and Fonts as Supporting Design Elements
Website design would be nothing without easy-to-read text to go with it. The emphasis here should be on readability, not uniqueness, not artistic flair.
- Limit Your Typefaces: Don’t make your website the land of 1,000 fonts. Using too many fonts makes your text more difficult to read. Commit to one or two typefaces. This will give the reader a sense of continuity as they explore your website.
- To Serif or Not to Serif? Serifs are the small edges and finishing strokes that can be found on fonts like Times New Roman. When a font is described as sans serif, it means that these “feet” and strokes are not part of the font’s design, sans is French for without. In print, serif fonts are most common, but for Web copy sans serif tends to be the style of choice. It depends on your preference.
- Make it Big, Make it Impactful: But don’t be ridiculous, save the giant balloon fonts and the “shouty caps” for the local car dealership. Fonts may need to be a little bigger than you think for readability sake, but shouldn’t be comically large, lest they detract from the potency of the words themselves.
4. Think Ahead So That Your Visitors Don’t Have to
One of the basic tenets of designing a website is to make sure someone can easily navigate their way around to the information they seek without getting lost. Strange as it may seem, it takes a lot of thought to make sure that users don’t have to think.
- Run Home, Forest: Include your logo that links back to your homepage within your universal header, usually above your main navigation. This will help lost users find their way back home.
- Leave a Trail of Bread Crumbs: Use “bread crumbs,” sets of contextual links that show the path you took from the homepage to your current location, making it easy to backtrack.
- The Three-Click Rule: Ideal website design allows users to get whatever information they need within three clicks of the homepage. This means that your site’s structure shouldn’t go too “deep” (requiring many clicks to find what you need), but “wide” (with options logically organized under other options).
5. Design with Mobile in Mind
You may have created the prettiest, easiest-to-use site on the planet, but if you can’t use it on a tablet or smartphone, you’ve lost tons of potential customers. Test your site on different devices to make sure that it’s usable for everyone. Choose design elements that are conducive to smaller screens, and steer clear of using Flash; it often doesn’t work on mobile devices. Many website builders like Wix or Squarespace will let you create a mobile-responsive layout that adjusts screen width automatically; use this feature if available.