Artists: What makes good Web design?

This article was originally published in the Society of Children's Book Writers and Illustrators (SCBWI) newsletter, The Bulletin (Spring edition).

Tools © Patricia Pinsk

As a creative person, you need a website to help promote your work. The good news is, you don’t need to know how to code to create a great site. You can use sites like Weebly, Wordpress  or Squarespace. They provide compliant templates (some are free) that you can easily create a clean, uncluttered and professional-looking site.

There are three important things to think about when it comes to content:

• Readability – is your site clear, and easy to understand?

• Interoperability – is it easy to use your site on all devices and platforms?
• Accessibility – can everyone see and access your site content to suit their needs?

Readability

Eye © Patricia Pinsk

As Jacob Nielson points out in his article How long do users stay on Web pages?, users spend less than a minute on a webpage. They spend less time if the content and layout is poor, and may not return to your site if it’s frustrating to use.

Before you begin writing your content, think about the last time you read a Web page. Tests show that readers do the following when reading Web content:

• scan the content – they don’t read text thoroughly,
• read only 18-20% of material on a Web page, and
• spend approximately 4.4 seconds per 100 words of text.

To make content readable for Web do the following:

• Keep your sentences short, and content concise.
• Use bulleted lists to “chunk” some content together. 
  
• Keep paragraphs short.
• Use short headings with key words.
• Use consistent language throughout all your content.
• Use plain language and avoid jargon.

Interoperability 

Coils © Patricia Pinsk

Make it easy for people to use your site on any device and on any browser. Test your site before you publish it. Not everyone uses a desktop computer or a Windows operating system to view a site. So you need to ensure that what looks good and works in Firefox, also looks good and works in Safari.

Test your site on different devices such as a laptop and phone. Ask friends to test your site and get their opinion of what works and what doesn’t. Test your site on different versions of a browser – not everyone upgrades to the latest version of Internet Explorer, for example.

To ensure your website works properly do the following:

• Test all links, menu items and widgets you use on your site.

• Ensure any visuals you use are optimized and “saved for web”. Small file sizes prevent your site from crashing, or loading slowly.
• Avoid using files that require users to download additional software to see content, for example a PDF reader. Most users are too lazy to download something they don’t already have on their system.

Accessibility

Abstract © Patricia Pinsk

Most users have some sort of accessibility impairment. For some, they have difficulty reading light colored print. You need to address physical impairments, mobility (e.g. can’t use a mouse) and cognitive impairments (e.g. dyslexia) when creating content for your site. W3C details more on accessibility standards.

When creating content for a site, it is a requirement to make it accessible to all users. A fully accessible site not only invites more users to your site, it also puts you in a position of avoiding human rights lawsuits (for example, Target accessibility lawsuit).

To help make you site accessible, do the following:

• Use alternative text for all images.

• Provide transcripts for videos, podcasts, or detailed visuals.
• Use descriptive text in all links versus “click here”.
• Use appropriate headings in your content.
• Use plain language.
• Use high contrast colors; avoid light colored text (test with Luminosity color contrast ratio analyzer).

Good luck with your websites!

If you liked this blog post, you may also like:

• Is it surprising that we see things differently?

• Design: why you need to know your audience
  
• Illustration: hand-drawn illustration in a digital world
  

Follow Patricia Pinsk's board Social media & web design info-graphics on Pinterest.