3 Painting concepts that can improve your website design

Why background in painting can help you design for the web.

3 Painting concepts that can improve your website design
Design

23/09/2020

Painting has been around for thousands of years. During this time humans have learned one or two things about design. Important things. And the great news is that many of these fundamentals can be utilised when designing for the web. I have spent many years getting oil paint on every surface in my house. To save you time scrubbing your furniture, clothes and child with turps, I've put some of these fundamentals into a handy list for you.

Focal Points

You generally have focal points in paintings, photography and websites. These are areas that draw your attention. You don't want all of the elements competing for the viewers attention. From the focal point you have to lead them by the hand to other parts of the painting. This is true with websites. You generally have a banner with the message you want to get across for example your call to action ( CTA ). You need to tell users what to do. Your call to action is usually the second focal point, after their attention is grabbed by an image or illustration. Sendinblue has a great video as their focal point. You look at the video first, you are then drawn to their call to action button. Sendinblue Focal Point

Here is a great Waterhouse painting that has an incredibly strong focal point. Waterhouse Focal Point

So how do we design a focal point? What makes something stand out? Usually, it is a change in a property of the colour.

The first way is a change in value, this is the easiest way to make something catch the viewers attention. I have made an image and split it in two. Each side has a small square with the same colour in the centre. As you can see, the one on the right draws your attention more. This is because the difference in value between the square and the background is greater than the other half. Value Change MCT Web

The other way to make something stand out is to have a low saturated colour next to a saturated one. Which yellow square stands out more? Saturation Change MCT Web The one on the right. This is because the difference in saturation is greater.

Interesting Shapes

To keep an image exciting and interesting when painting or designing, it is vital that you have a variation of shapes. Stapleton Kearns calls ignoring this principle 'Potation' - where everything looks like potatoes ( or similar in shape ). If your site is just made up of only squares, then it can get visually boring for the user. Mix it up by overlapping elements, this also introduces depth. Stapleton Kearns

This image is from the Dutch master Dirk Van Assaerts, which is actually a fictional persona made by Stapleton to highlight dumb design ideas.

On MCT Web I have used overlapping shapes to try and keep the user interested. Overlapping MCT Web

Space is important

Space creates interest. For an area to stand out, you need to have other areas that have less in them. This Rockwell painting has loads of negative space. Negative space is the space between things. The white in the shirt and chair split up the background and the focal points. These areas help to frame shapes and draw the eye.

Space is equally important in web design. Take a look at all of this space on google.com. It makes it obvious to the user what they should do. Google dot com Then take a look at the famous LingsCars. It's not quite so obvious what you should do... Lings

Start your project Request A Free Quotation
Got a big idea? Let's create a website together.

You may have a vision for a brilliant product or business. You could be looking for a pragmatic and proactive person to work in true partnership with you. Perhaps your business requires modernisation. Please get in touch. hello@mctweb.co.uk