At APIDNA we often discuss and focus on the back-end of web application development, however the front-end plays a crucial role in user access to your applications functionality.
There are a wide range of different factors to consider, such as colour, typography, usability, and composition.
In this article, we’ll go in depth into each of the components of front-end web design to help you create visually stunning and user-friendly websites.
Colour
One of the most important aspects of front-end web design is the colour scheme that you chose.
With over approximately 16 million different colours available using RGB, there are a wide range of different possibilities.
We can sort colours into three core groups:
- Primary: Red, blue, and yellow. These can’t be made by mixing other colours together.
- Secondary: Green, violet, and orange. These can only be made by mixing primary colours together.
- Tertiary: These are made by mixing primary and secondary colours together, which you can see in the diagram below.
The colour wheel above is the representation of the dominant colour family, also known as hue.
Tints are when we add white to the colour to make it lighter.
Shades are when we add black to the colour to make it darker, and a tone is between a tint and a shade, made by adding grey.
The saturation of a colour is its intensity relative to grey, which also represents the amount of light it’s exposed to.
When it has no intensity, all colours default to grey.
Saturation is often used to emphasise the intensity of colour in images.
Lightness or brightness is how bright or dark a colour is relative to white or black.
We adjust both the saturation and the brightness of the background images for our article covers, in order to make the orange of the APIDNA logo stick out more.
Colour Theory
Colour theory can be a good starting point to determine your website’s colour scheme, with four combination patterns that can be followed:
- Monochromatic: Uses a full range of tints and shades of a single colour. This is best applied when creating three dimensional graphics.
- Complimentary: Utilises colours opposite to each other on the hue colour wheel above. This can be used to create a strong contrast between content relative to a background.
- Analogous: When three colours next to each other on a colour wheel are used in combination.
- Triadic: When a triangle is placed on the colour wheel to determine the combination of colours.
Adobe provides a free colour theme creator where you can play around with these different colour schemes, or create your own.
Warm colours such as red, orange, and yellow are associated with energy, passion, and warmth.
They can evoke feelings of excitement, enthusiasm, and optimism.
Cool colours like blue, green, and purple convey calmness, tranquillity, and stability. They can evoke feelings of relaxation, trust, and professionalism.
Warm and cool colours can be used to create contrast and hierarchy within front-end web design.
For example, using warm colours for important elements such as call-to-action buttons or headings can make them stand out against a cooler background.
Alternatively, cool colours can be used for background elements or less important information to create a sense of balance and harmony.
Typography
Whether or not your website is text heavy, the typography you chose plays several crucial factors.
Typography is the style and appearance of text, which can be determined by typeface and font families.
A typeface is the visual design of the letters and numbers contributing to an alphabet within an interface.
An example of this would be Arial, which can be accessed across a wide range of different software.
A font family refers to the different variations of a typeface, influencing factors such as the size and weight of the text.
An example of this would be Arial Bold and Arial Narrow. These fonts have the same visual style as each other since they are from the same typeface.
Serifs are fonts that have small elements on the ends of the strokes of the visual design of the letter.
These fonts are often used by more traditional brands, with most modern brands moving toward sans serif.
Sans serif are simply fonts without any distinctive elements on the ends of the visual design of the letters.
A lot of modern companies, such as Google, have made the switch from serif to sans serif in order to appeal to a broader audience.
Using sans serif also allows for easier animations in graphics design, which is a crucial component of modern front-end web design.
Aesthetic Appeal
The spacing of letters is crucial to aesthetic appeal in text and can be considered from the perspectives of kerning, tracking and leading.
- Kerning: The space between the individual letters since letters exist in frames and certain letters next to each other in a typeface may lead to awkward spaces.
- Tracking: The consistency of the spacing across all of the letters in the word, which is crucial for legibility.
- Leading: The vertical spacing between lines of text, which can also help improve legibility.
The terms widow and orphan are used interchangeably to describe text that hangs out from the end of a block and text, with orphans usually indicating the end of a block of text from a previous page.
Points and picas are the units that we use to measure the size of a font, with a pica containing 12 points.
Context
The context must also be considered when choosing appropriate text, as we must consider our target audience.
There are a wide range of demographics to consider such as whether we are serving a business or consumers, their age, geographic location, gender, etc.
The colour pallet and typeface could also need to be changed depending on the season, with different colours associated with summer compared to winter.
We must also consider the appropriate amount of text to use depending on where the text is displayed.
For example, text involved in graphic design should only be short so that the user has time to read it.
Accessibility
It is crucial that the typeface and colour pallet selected is legible, readable, and easily interpretable by modern devices using computer vision for those visually impaired and relying on these systems.
Government services such as the NHS in the UK are obliged to adhere to these guidelines so that their services are accessible to the masses.
However, outside of government services, there may be an advantage to using less readable typefaces to appeal to a specific demographic of users.
To ensure accessibility on older devices while maintaining the intended appearance on modern devices, we would structure the order of font priorities in CSS.
We would do this by first specifying system fonts or widely available web-safe fonts, followed by fall-back fonts that are more specific to modern operating systems, and finally, specifying custom fonts as the last fall-back option.
This approach ensures that older devices can still render the text using basic system fonts, while modern devices can utilise custom fonts for a more enhanced visual experience.
Usability
When looking at the usability of a product or service, there are two distinct components that must be considered.
These are UX (User Experience) and UI (User Interface), with UX focused on the physical design aspects and UI focused on digital design impacts.
Since we are focusing on front-end web design, we’ll be discussing usability in the context of the UI.
Navigational Design
Navigation design is an essential component of the UI of websites, software, and mobile applications.
When done well, it’s simple and obvious, and very clear where you are, and where you may want to go.
It is common to use a navigation bar that contains main categories that users are looking for.
Sometimes these have drop down menus containing sub-categories when hovered or clicked, for more specific access.
When targeting a broad audience, simplicity is key.
Visual Cues
UI designers often like to incorporate very distinct visual cues to draw the user’s attention to certain areas.
To achieve this, distinct attention-grabbing colours such as red and yellow are used in combination with moving and flashing elements.
For example, on a webpage displaying live content such as Twitch, there might be a red flashing icon labelled “live”.
Another visual cue can be the scale of the content being displayed.
More important cues should be displayed at a larger scale relative to smaller and less important cues.
Content
The content encompasses every aspect of a page including text, images, videos, and sounds.
In other words, content is everything we read, see, and hear.
When incorporating APIs into your website with visual interfaces, such as a weather API, it is important that they match the theme of the website.
Some APIs have a wide range of customization options, whilst others can be quite rigid.
This is important to consider when selecting the APIs that you integrate.
For example, Stripe is a very customizable payment processing API whereas PayPal is much more rigid in regards to aesthetics.
We went into more detail about the different payment processing API options in our previous article, which will help you make the correct choice for your needs.
If you need any help with your API integrations, contact us by clicking here for a FREE demo of our new API integration platform, powered by autonomous agents.
Semiotics
Semiotics is the concept of the way in which visual cues take on meaning so that we automatically know and understand the meaning behind a symbol, sign, or icon.
They are distinct calls to action, and it’s very hard to change these.
For example, it is universally acknowledged that a magnifying glass represents search functionality, a floppy disk for saving things, and the outline of a person for login and account pages.
This allows us to navigate websites in foreign languages without having to understand the words.
Form
It is also critical to evaluate the form of a UI design, in terms of the shape of the screen it will be displayed on.
For example, a mobile phone would predominantly display at a vertical orientation, whilst a laptop screen would usually be horizontal.
In modern web-development we take a mobile-first approach, since this will be how your website is most frequently viewed.
Unless the project is solely a mobile application, the design must be adaptable to all formats available.
Another consideration is the recent addition of notches on mobile phone screens, which is another work around for front-end web designers to consider.
Composition
The composition is the layout of content on a page, considering aspects such as placement and scale.
This is essential in order to make content eye-catching depending on its level of importance.
The number of images, text and links displayed on a page is also important to consider.
The aim is to prevent the user from being overwhelmed by options.
Grids
The use of grids to establish the composition of a webpage originates from the print industry.
It allows us to organise rows and columns of images and text in front-end web design tools, like WordPress.
More important information can take up several columns and rows.
The grid system uses picas as a square unit of measurement.
Rule of Thirds
The rule of thirds is a visual trick for cropping images in order to create a visual story or draw some attention to a specific aspect of an image.
This same principle can also be applied to the general layout of the website or application.
The primary subject of the image or section of the website should be kept in one of the vertical or horizontal thirds of the image.
It is usually central, but a more dramatic effect can be achieved by placement on one side.
This rule doesn’t have to be used for every image or web page as it simply doesn’t always apply.
However, most of the time it’s the best option when there is a clear subject of focus.
Balance
There are three types of balance that can be considered when designing a composition:
- A symmetrical design has equal visual weight on either side of the subject.
- An asymmetrical design leaves a trail of attention from top to bottom with distinct overlap between segments.
- Finally radial balance is symmetry along multiple different directions from the focus area of the composition.
Conclusion
Front-end web design is crucial to any successful website, so hopefully this article has given you the principles to succeed.
Of course the best way to improve your designs is to receive feedback from potential customers.
They’ll be able to provide you with the best insights, and enable to continuously iterate.
We encourage you to explore the further reading resources listed below, which expand upon the topics covered in this article.
Further Reading
Basic Colour Theory – COLOR MATTERS
Designing for Readability: A Guide to Web Typography – Toptal
Website Usability 101: Definition, Principles and Methods – Ramotion
Top comments (0)