Top 10 Website Design Tips

If you're designing - or re-designing - your website, here are my top 10 tips:

Backgrounds

1. Show divisions between sections of your page.

One of my favorite ways to do this is to use very light grays, other neutrals, or very light shades of brand colors to provide some delineation while staying on brand. I sometimes alternate a white background with a very light background for the various sections, but be careful not to make it completely striped on your home page. For other pages, that might be ok, depending on the content.

2. Don't use two photo background sections adjacent to each other

3. Make SURE text is readable over photo backgrounds. Use color overlays over photo backgrounds if needed.

4. Look at desktop and mobile for each section to make sure photos or photo backgrounds show what you want. I check tablet size as well.
*Wix, in particular, has a set of lines that guides tablet size.

Links

5. Use a mix of text links and buttons to help people navigate to other sections of your website

Readability

6. Make sure the text is readable. Use only a few fonts - 1 font in two weights is fine, or a heading and a content font. Use handwritten or display fonts only for accents, and watch your readability.

7. Keep text scannable - use headings to break up sections of larger text. Using headings allows scanners to scan the headings and readers to read the details in the paragraphs.

8. Don't center text, except for headings, if you prefer. Instead, left align text - it's easier to read. Don't justify, either.

That said, for short phrases, especially in website builders with limited options, sometimes centered looks best. Again, use your best judgment, but if there are more than two lines of text, try to left align if you can.

9. Text Colors - Make sure there is enough contrast for good readability.

Use a contrast tool like https://accessible-colors.com (free website) to make sure your text and background have enough contrast - it's an accessibility issue but also makes for a better user experience.

Also, don't use black text on a white background or white text on a black background. Keep it easier on people's eyes by using dark gray instead of black or off-white or gray instead of white.

Yes, I know, I just said to make sure you have enough contrast, but too much can be an accessibility issue as well. You want Baby Bear contrast - not too much or too little.

Calls to action

10. For a sales page, add multiple calls to action down the page. Make sure people don't have to scroll too far when they are ready to make a decision.

Final Tips

Finally - Review your site and the various pages on desktop, mobile, and tablet screens if you can, even if you've checked the previews in your builder. Click the links, use the buttons, and test the forms or other interactive elements, especially on mobile and tablet views.

Bottom line: Keep it simple. I know animation is popular, but for the most part, I find it anywhere from distracting to annoying, and it can be an accessibility issue. The purpose of your design is to give your users a good experience - clarity and simplicity usually trump fancy design.

Need to improve the SEO of your pages? Here are my favorite SEO tips!

Posted in

Appy

Leave a Comment