Tag Archives: Style Guide

How to add your Typography to your Frontify Style Guide?

Setting up Typography in Frontify Style Guide

As promised in my previous article about showing you how to set up a Style Guide in Frontify, here is the second article in the series to set up the next design element – Typography. Before you set about creating your style guide, you need to ensure you have selected your fonts. Here are a couple of my previous articles that …

Read More »

How to Create a Style Guide using Frontify?

Create Style Guide using Frontify

What is a Style Guide? In the context of web development, a style guide is a set of standards for the creation of web pages. This ensures consistency across the website and enforces best practices in usage and visual composition. “That sounds like a stylesheet or CSS to me, Sony. So what is the difference?”, you may ask. If you are …

Read More »

5 Tips for Pairing Typefaces and What NOT to do

In my article about Typography for Website Design, I mentioned that Rule #1 is to limit the number of Typefaces/Fonts used. In this article, I will give you some tips for pairing typefaces for the best duo for your website. A typeface is a family of fonts. Within a single typeface, there will be fonts of varying weights (i.e. thickness) or other variations …

Read More »

Style Guide – Work in Progress

Style Guide - Custom Colour Wheel

Earlier in the month, when I posted the July Progress Report, I mentioned that I will be working on the website Style Guide this month. I have made good progress this month and here are some sneak peeks before the full version is shared later on. I used I used Frontify to pull the content together. If you are web designer …

Read More »

3 Simple Steps to Convert an Image to a Colour Palette

In my previous article, I wrote about how you can create a colour palette of five colours for your website from scratch. If you instead want to create a colour palette from an image or an inspiring design, then this article will help you with that. First off, choose an image based on one of the following criteria: For example, while going through …

Read More »

How to Build a Colour Palette for your Website?

Create a Colour Palette for your Website

Colours can convey a message and evoke a response in people. So understanding their meaning and cultural use is essential in using them on a website for non-verbal communication. Colour theory is a science in itself because colour is very subjective. In this article, I will walk you through a 3-step process in setting up a very simple colour palette for your website. …

Read More »

5 Typography Rules for your Website Design

Typography - Font Personality

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point size, line length, line-spacing (leading), letter-spacing (tracking), and adjusting the space within letters pairs (kerning). Just like colour, Typography has a huge impact on setting the tone of your website and creating visual hierarchy. …

Read More »