Four Principles of a Good Site
- What is your website trying to accomplish?
- Design with this in mind
- If there were no words would your customers know what to do?
- Are the words conversational enough?
- Can you understand the goal by scanning your site?
Good Website Writing and Content
- Is your writing conversational and understandable?
- Are you writing about your customers?
- Don’t write about yourself, write about them (Use “you”)
- What do they want? What do they care about? What problem are you solving for them?
- Do you have all your essential information?
- Hours of operation, Holiday hours, Directions, Address, Phone Number, Email
- Is everything skim-able? (Titles, Formatting)
How to Use Photos and Visuals
- Are you using more pictures than words? (Aim for skim-ability over words)
- Can you break up walls of text with a photo? (Or get rid of them completely?)
- Did you make sure that your pictures convey a literal message over a metaphorical one?
- Is there space around your photos? (Give them room to breathe)
How to Iterate on Designs
- Remove > Rearrage > Add | Elements of your website
- Try different typography combinations
- Work on the small details
- Is the stuff on your website aligned?
- Does everything have a purpose?
- Are all your important elements obvious?
- Do your colours make sense? (MaterialUI)
- Is your designs/text legible? (Use High-contrast)
Get real people to test your site and see what can be improved
Making Your Menu Navigation Understandable
- Does your navigation make sense? (Visitors shouldn’t have to think)
- Are you using conventional one words links? (Contact | Volunteer | Team | Contact | Services)
- Does your logo returns back to the homepage?
- Have you minimized the number of links? (Aim for 4-5)
Typography Design and Appeal
- Is your font readable and appealing?
- Merriweather, Roboto, Proxima Nova and Open Sans
- Did you avoid system fonts? I don’t really like them
- Times New Roman, Georgia, Arial and Comic Sans MS
- Have you played around with your; font-size, arrangement, color, line-spacing, etc.
- Body text (size: 15-25 px | line-space: 1.2-1.7 | body-width: 40-70 char)