The basics of web design and a checklist of factors which need to be addressed
This page considers:
  • key considerations for website design
  • technology and software
  • design, layout and navigation
  • text and images
  • checklists for design, selling art etc
  • websites to look at (in development)
There has never been a better time for artists to build their on websites using webware which is very easy to use - and involved absolutely no coding.

However you still need to understand some of the basics of website design.

At the end of this page, I will be developing links to further reading. Unless otherwise indicated the links are to posts on my blog where I've written extensively on this topic.

Key considerations for website design

There are many excellent websites, blogs and books which provide an excellent introduction to contemporary website design. (I shall be developing a list of recommended books at the end of this page)
Here's a top-level list of the headlines of the things you need to think about:

Technology and Software / Mobile friendliness
Websites MUST be:
  • be accessible from mobile devices
  • compatible with all screen sizes
  • work on mobile devices
  • work with different browsers
Websites SHOULD:
  • integrate with social media
  • be accessible for people who don't know any html or any other sorts of code
Design
  • Design needs to be simple and consistent on every page (use a CSS based template)
Navigation
  • websites should be really easy to navigate
  • you must be able to get home and/or back to the top level menu from every page
  • make sure all hyperlinks are colour coded - don't leave people guessing.
Page Layout
  • it's important how much content is above the fold and whether it communicates a reason to scroll down
Text and Images
  • Sites must be easy to read
  • Images must be sized to be both attractive, informative and load very fast
Picture
Results of a 2012 Poll to identify the factors which made people leave a website fast

Mobile-Friendly
​

This website contains a section on How to be mobile-friendly 
Two years ago I ran a poll to find out where artists were up to in terms of updating their website
In 2013, some 28% of you had updated your website so it integrates better with social media.  A third of you recognised that you need to do more to keep up with the technological change associated with the explosion on the use of mobile devices
Making A Mark | Artists websites: still a lot to do to update / upgrade for mobile devices
Here's what the browser statistics look like for one of my new sites for one week in March 2016

Note that the iPad and mobile browsers accounted for 40% of  visitors

(Source: Browser Statistics from Statcounter)
Statcounter Browser statistics reveal percentage of mobile users
Statcounter Browser statistics reveal percentage of mobile users

Browser friendly
​

A key indicator of a contemporary template is that it works with recent versions of every browser.

Once upon a time Internet Explorer dominated web browsers. Those days are long gone (see above chart)

It's now essential that websites are designed to be compatible with every commonly used browser - including and especially ones that are specifically designed to be used with mobile devices.

You don't need to worry about the older versions. You do need to worry about all the updates and new versions!

If somebody asks me to take a look at their new website (and I only do this for free for friends!) I always make sure that I look at it on my iMac, Mini iPad and my iPhone (e.g. see Brand new website raises design standard for art societies) and I use different browsers to do this.

Page Load Speed

How long does it take for your page to appear?

Speed on an image-based website is largely determined by file size (based on resolution, actual dimensions and file type).  To keep your website fast you need to make sure you don't make images any bigger than they need to be.

This is Google's advice about how to make the above the page content load faster 

You can also test how fast your website is. 

Text for an artist's site
​

Writing for the web

Captions
Tips for writing text on websites and blogs
  • don't write an essay
  • keep your writing style and vocabulary simple
  • people "scan read" websites - so keep sentences and paragraphs short
  • use subheads to signal topics
  • ​use bulleted lists where appropriate (such as this topic)

​Web content

How your website ranks in response to google searches depends on the quality of the content as well as the number of people who follow an artist.

REFERENCE
Keep your captions consistent - decide what to include in a caption eg
  • title of the artwork
  • size (dimensions - make clear whether metric or imperial)
  • media used e.g. is it lighfast
  • support used e.g. is it archival

Buyers' "need to know" information

You must advise people of what they are buying in terms of presentation and "add ons" 
  • mounted or not
  • framed or not
  • scope of customer choice about how artwork is supplied
  • implications for pricing

Images for an artist's site

Image oriented design

Image size and definition
You may have noticed that websites which have had a makeover recently are getting bigger and better images. Images are becoming very prominent on all sorts of sites.  

​A contemporary website design for an artist's website should provide a range of ways for displaying images.
If you want people to but your art, people need to see what they are buying. On the other hand the speed of your website is a major factor in it ranking well.

TIPS:
  • make sure image size is optimised for speed of loading. That basically means nothing higher than 72 dpi.
  • use crops and close ups to demonstrate texture in paintings or quality of brushwork of paintings
  • colours will render depending on the screen used to view them. All you can do is make sure you're creating an image that is as close as possible to real colours.

 A Design Check List

Below are articles which provides information and tips on website design

Layout

The importance of the page fold

  • The Fold Manifesto: Why the Page Fold Still Matters (February 1, 2015) What appears at the top of the page vs. what’s hidden will always influence the user experience—regardless of screen size.
  • Where is the Fold? - this is a website which shows you where the page fold comes on different sized screens and with different browsers. Note how pages with deep headers with little content lose a lot of opportunity to make an impact - unless your image does it for you!

Sell Art
​

See also my section on this website about Selling Art

Things you need to think about when trying to sell art via your website include:
  • a call to action button e.g. "add to basket"
  • using enough text - but not too much
  • making good use of white space - so you can items clearly
  • good quality images - be prepared to provide large images!
  • use of a visible/professional shopping cart 
  • use of a secure ecommerce facility for payments 
Most importantly, you need to think about whether you are likely to sell enough art to make a proper ecommerce facility for your website a cost-effective proposition - or whether you might do better to use an external third party store/site (eg Etsy, eBay) 
REFERENCE:

Websites to look at

Below are some suggestions of websites to look at. None of them are perfect but all have something to help us understand what is possible.