Design Resources to Build your Website

Websites need quality images, end of story. Using your own photographs and images is by far the best way to build trust in your audience, but if you don't have these or need something to fill the gap to help you launch quickly there are some excellent free stock photography resources on the web. (Just make sure you credit the creator or originator where appropriate):

• Pexels*

• Unsplash*

• Pixabay

• Freeimages

*Some of the stock image sites have "collections", so if you're looking for images in a particular theme it's worth checking these out.

It's worth reading about colour theory and how this can subtly impact your online audience. If you already have house colours, or a brand colour palette then there's a range of resources to help inspire you or create the colour combinations for you to use in your website.

Any of these websites allow you to create a palette based on one or more base colour:

• Coolors

• Adobe Colour Wheel

• Paletton

Google Sites is limited to three colour Styles, or palettes, but despite this being something of a constraint you can still create effective styles and layouts using the resources above. 

Naturally, Google Sites has seamless integration with Google Web fonts, which is an excellent typography resource. Fonts can fundamentally change the look and feel of your website and can be used to reinforce the branding message and audience appeal. You can "test drive" Google Fonts by entering text (for example your main title or strapline) which is then displayed in their library of fonts.

Alternatively, if you're looking for inspiration or direction on fonts to use, try any of these websites:

• General guide to pairing fonts

• Google Font Knowledge

• Fontpair

• Fontjoy

• 15 font pairings and what makes them work

Think about your audience when selecting fonts, and the image you want to convey.

The actual layout and body of your website will vary based on your need. For example a photographer will most likely need an image heavy grid layout to showcase their work, whereas a restaurant may required a layout that incorporates customer feedback, menus and images of their staff.

There's some useful references I use when constructing layouts, they may be useful to you too:

• Layout patterns analysed (UXPin)

• Dribbble and another Dribbble

• Shareablock (WordPress resource but still useful!)

Alternatively check the WordPress themes gallery, the Awwwards website or even SiteInspire.

No doubt you'll want images of your products or services on your website so here's a few useful online (and free) tools that I use to edit and manipulate images:

• Dummy Image generator

• Take screenshots of your website with a screenshot generator

• Images are usually quite big in terms of file size, so use an Image Compressor to speed up load times (and improve SEO)

• Hemingway app helps you write in simple, clear language.

Any other editing tools you'd add to this list? Let me know.