Here we explore the theory behind web design with a web designers guide to art theory.
When it comes to building a website there can be an extensive list of requirements from fast load speeds to stunning visuals and an excellent user experience.
Whilst experts like the KIJO team make designing and building a website look easy and like something we just rustle up, there are in fact multiple design principles and theories that we ardently adhere too, to ensure a website looks not only modern and performs exceptionally well.
Not everyone realises there’s a science behind web design and here we’ll discuss some of the art theory and web design principles that we use for every single website build.
Web design refers to the visual and user focused part of building a website. It focuses on how a website looks and the functionality of the overall site from a user’s perspective.
Web designers will base their work around designing a website that looks good and works optimally for the end user. This includes making wireframes, mockups, design systems, templates and colour palettes.
In order to design an aesthetic, modern and functional website, web designers will use various key web design principles which we’ll discuss in more detail later on in the article.
Web development refers to the process of building a website in order for it to be hosted on the internet.
This is a key step to websites actually being available to visit. Web developers will build and manage websites in order to keep them live, functional and fast.
Web developers use a variety of coding languages to develop a website including HTML, CSS and JavaScript which take the initial design ideas and turn them into a real-life, working website.
There are various different types of web developers who focus on different areas of the web development process including:
Back-end web developers – these focus on the infrastructure of a website such as hosting and security.
Front-end web developers – these focus on the functionality of the website and the experience for users.
Full-stack web developers – these work on both the front and back end of a website.
It’s often easy to think that web design and web development are the same thing and whilst they are both integral parts of building a website, they are in fact two different practices.
The easiest way to think about the two and differentiate between them is like this:
Web design refers to designing how a website will look to the end user. It focuses on what the website will look like on screen and creating a seamless and enjoyable user experience.
Web development then takes those designs and turns them into a live website on the internet through coding languages. Web development focuses on every aspect of the website including the front-end (what a user sees) and the back-end infrastructure.
Have you ever wondered why certain web designs are naturally more appealing to the human eye than others? The answer all comes down to maths.
Golden ratio design isn’t unique to web design either. It’s been around for many years and you might have heard it called the divine proportion or the golden mean.
To make things simple, the golden ratio is a number with a value of 1.61. Web designers use this “golden number” to create the golden rectangle.
The golden rectangle is a rectangle where the proportions of its sides equal the golden number.
So how exactly does the golden ratio theory fit into web design?
Let’s say your webpage is 1000px and you’re working out how to layout the main content alongside a second column.
Now you could just build the columns at any size and play around until you find an option that looks good.
Or you could use the golden rectangle ratio, placing your main content in the larger part of the rectangle and using the rest of the rectangle space for your secondary column.
When it comes to web design, grids are like the indivisible glue that holds everything together.
The main purpose of grid theory is to determine where elements should be positioned on the page.
Web designers will use grids to create alignment and order on the page and using a grid helps to eliminate the risk of any random decision making. Instead, every element will have a specific place within the grid.
Grids are particularly useful for creating a good user experience, allowing you to create a hierarchy on your page and ensure a user knows how to navigate through.
Using a grid to design a website is also key when building a responsive web design. Using a responsive grid allows you to plan and see how the structure and content of a webpage will change from a desktop to a mobile screen.
There are various different types of grids you can use when designing a web page including:
The way that people see designs has a strong impact on the feelings they take away from your website and this is exactly what the gestalt design principle examines.
Gestalt is a German word that means “essence or shape of an entity’s complete form” and the principle is crucial to the success of web designs.
Often when designing anything, not just websites, we focus on the individual elements. The colours, the fonts, a shadow here or a curved edge there.
The human brain however will first notice the overall web page design, it will then begin picking up and noticing small details after a short time.
The gestalt principle refers to the idea that you need to prioritise the overall shape, vibe and aesthetic of your website. Smaller details, whilst nice to have, will have less impact on how a user views your website.
Think about a spot the difference puzzle. At first glance the two images will look identical, even though they aren’t. It’s only when you begin inspecting them that you’ll start to notice small differences and details.
The gestalt theory suggests that when you first look at those spot the difference images, you see the wider structure and makeup of the image which is why they look the same, you don’t immediately notice the small elements that make them different.
If you land on your finished website and like it straight away, before perhaps noticing one or two small tweaks to be made, that’s fine. If however you visit a page and can instantly see issues, this is a problem both for you and your end users.
The gestalt principles of design suggest that you should always start with the container or outer shell first, so in the case of websites the general layout, headers and navigation, before later adding the individual components.
A great way to think about the gestalt theory is via famous landmarks. Think about it, on maps, brochures and souvenirs famous landmarks such as Big Ben, the Pyramids or the Sydney Opera House will often be depicted as silhouettes.
You don’t need to see the details to recognise them, you just need the basic structure. Your website is no different.
Colour theory is a massive scope of knowledge that refers to rules and guidelines about colour combinations and their uses.
The concept of colour theory explores not only colour palettes but also human perception, cultural associations and colour psychology.
Using the right colours is key to a good website design. Colours help users to navigate your website, absorb your content and recognise your brand. They also impact the effect that your website has on a user and the feelings that your content evokes.
There are various aspects of colour theory including:
Colour Wheels – A basic colour wheel consists of 12 primary, secondary and tertiary colours and allows you to visualise the relationships between colours in a basic way.
Colour relationships – Colour relationships include monochrome (various tints or shades of the same colour), complementary (two colours from opposite sides of the colour wheel), analogous (three colours that are next to each other on the colour wheel) and triadic (three colours that sit at the points of the colour wheel triangle).
Colour warmth – Colours can be classed as warm or cool. Traditional warm colours such as reds and oranges can carry connotations of fear or danger whilst cool colours such as blue or purple are seen as more calming.
Colour systems – There are three standard colour systems. RGB (Red, Green, Blue) is the one we use in web design and is based on light. Each colour in the system is a combination of red, green and blue and is represented by a number from 0 (black) to 255 (white).
When adding colour to a website you should consider the relationships between your chosen colours, the importance of creating an identifiable colour scheme and the psychology behind your colours.
The principle of emergence builds on the core idea of the gestalt theory that a viewer tries to make sense of a whole image before identifying individual elements.
The principle suggests that the human brain will first see an outline. It will then use your own memories to find a match to this outline before moving on to the components.
For example, if you see a person walking down the street in the dark, from far away you can tell that their silhouette is a person thanks to the shape of the body and limbs. You don’t need to see finer details such as the hair or face.
When it comes to web design, the principle of emergence suggests that you should keep the structure and navigation of your website simple and traditional, allowing visitors to instantly recognise how your website works.
The principle of reification suggests that your brain will fill in the gaps when visual information is missing in order to create a full picture.
For example, a human brain will acknowledge that one eye, a nose and lips are meant to represent a face, even without the other eye and the rest of the face.
With web design, this allows you to get more creative with your layouts and where you position imagery on your page. Sometimes you don’t need to display a full image for users to get the same effect.
The principle of invariance is focused on the idea that the human brain can easily pinpoint similarities and differences in designs, which is how certain design features or colours can “stand out from the crowd”.
This is a valuable tool in web design as it allows you to introduce stand out features within harmonious groups to draw the eye and encourage clicks.
For example, if a website features a pricing table with 4 options, often 3 will have the same coloured background whilst a fourth, usually the option you’re keen to sell more of, will have a different cooured background.
This helps the selected option to stand out from the others and users are instantly drawn to it
The principle of multistability suggests that the human brain will always fixate on one way of seeing something and disregard any other possibilities.
For example, the famous optical illusion image where you can either see 2 faces or a vase? The principle of multistability suggests that you will never be able to see both at the same time, your brain will always focus on one.
When it comes to design, the principle of multistability is hard to successfully implement but it can be a clever way of adding interest to your design.
Take a look at the FedEx logo…have you ever noticed the arrow in between the E and X before? Your brain either sees a gap between two letters or an arrow.
As you can see, there’s an extensive science behind the world of web design and despite how easy our experts make it look, every design detail is thoroughly thought out. At KIJO nothing is added to websites without intent, purpose or reason.
From implementing the golden ratio to using a colour relationship that matched the feelings you want to evoke in your users, the art theory behind web design is both extensive and enthralling.
Don’t forget you can find out more about KIJO, the websites, apps and branding we create and how we can help you to put these web design theories into practice by contacting our team.
