Design Basics: An Introduction
Last updated: April 2019
With the new introduction of our VIPBuilder platform, we figured it would be a good chance to brush up on those design basics. Starting with an introduction into the use of colour.
Colour combinations are very important and can be the maker or breaker of designing a website. Complimentary colours, in essence, are colours at opposite ends of the colour wheel. For example, the complementary colour to yellow is purple, this is a quick and easy way to develop an association with your branding in a visually pleasing way.
Mixing complementary colours can make each individual colour appear brighter and more vibrant. This is due to each set of complementary colours being a mix of one cool and one warm colour. Bringing balance to each and creating a contrast.
You can use a tool like the colour calculator here to quickly and easily find suitable colours for your design and their associated complimentary colour!
An often overlooked aspect of your website is the font. Being so caught up in ensuring the website functions and displays the way you intend it to can make it hard to notice these small details that really bring a website together. Typography is a very powerful tool that can be used to subconsciously convey certain moods and ideas about your website and brand regardless of the content. Below are some examples of font styles and what they convey.
Serif: Traditional, Comfortable, Neat
Sans Serif: Clean, Stable, Modern
Script: Elegant, Creative, Affectionate
Modern: Strong, Progressive, Stylish
Display: Friendly, Unique, Expressive
The sizing of your font is just as important as the style. If you choose randomly you will lose harmony across the website and create a chaotic feeling as users read and navigate. Instead, try to stick to the below font sizes (in px) to keep everything in proportion. 16px is ideal in most cases for your main body text.
Recommended Font Sizes: 8, 16, 24, 32, 48, 64, 95
Another important factor is comfort. Whilst it may seem positive to apply a zany extravagant font to symbolise your brand’s nature you need to ensure the font used is comfortable to read for long periods of time. Creating a design that actively fatigues users is counterproductive to making your website a positive experience.
That’s why typography is so important and why it’s an important decision worth taking some time on. You can always get friends and family to read paragraphs to let you know how they found the overall legibility of your chosen designs. One way to get the best of both worlds may be to use a more engaging font for your headlines and logo but choosing a more comfortable font for body and text. Just try to avoid over cumbering your website with too many font choices, two to three should be plenty for most websites and designs.
Don’t let all your hard work get ruined by a blurry image! Getting your images crisp and clear without overloading your website with long load times and storage space can seem like a fine art. Luckily there are tools and processes you can use to help along the way.
What to use and where:
JPG is the most common image format by far and still one of the best choices for photos and images with millions of colours. However due to the “lossy” compression style of JPG images, when saving a JPG repeatedly a visible damage to the image itself can accumulate to the re-saved JPG over time. These are referred to as “artifacts”. you should always keep an original on hand as the image will degrade the more it is saved.
PNG formats are very versatile and feature a “lossless” compression so unlike JPG images you can save and alter these as much as needed without further degradation due to compression. This makes PNG files most suitable for text, graphics and logos or any image using less than 16 colours. They also support transparency which can be very important for the continuous use and ease of adding logos, watermarks or other consistent graphics across your website and content.
TIF files are the highest quality you can use but come at the cost of significant file sizes! Unless you’re exporting content across your website for commercial print work you wouldn’t want to use this format on the website itself without incurring negative effects like increased load times and storage use. However, they are great to keep on hand locally stored especially if you have generated JPG files from them as you should always re-save a JPG from the original TIF file where possible to avoid the “lossy” compression ruining the image.
SVG files or scalable vector graphics are an image file as the name suggests with full scalability, the image is actually represented in the file as text which is translated to form the image. As a result, it can be manipulated and shrunk or enlarged at will without quality loss. This makes it an incredibly versatile file type perfect for re-occurring and often changing images on your website such as icons and logos. Once designed you can post or print your logo anywhere from the footer of your website, to a billboard across the highway.