Design

This is the start of a series where I’m going to take a common design pattern and go through the process of planning, designing and code. It will follow the process I go through to make websites, but taking a smaller component. The pattern you will focus on within this series is a hero area.

Here’s a quick tip of all the ways you can export SVG in Illustrator. Each have their conveniences, advantages and disadvantages. It’s entirely up to you which you use, there isn’t really a bad way.

Following on from the colour series I have a selection of websites that can help inspire your colour palettes. There is a variety between inspiration, resources and tools to pick colours.

Part three of the colour series. Practical tips for selecting colours that I wish I'd known earlier — covering pitfalls and how to add new colours to a palette.

Part two of the colour series. Once you’ve picked your palette, this post guides you through refining it — testing combinations, checking contrast and colour blindness.

‘Part one of the colour series. Colour theory is only a starting point — this post walks through what to actually consider when picking a 5-colour palette for a project.’

Trying to decide layout and visual style at the same time leads to difficulties. This post covers where split focus creeps into the design process and how to avoid it.

‘Sketching before wireframing is easy to skip, but you’re missing out if you do. This post walks through a process for sketching websites, even if you don’t think you can draw.’

Three coded form styles, free to use. Drop the styles into your forms and apply your own visual style on top. Three distinct variations to choose from.

I have updated my logomark. It’s been around 5 years, since I last made a change relating to my logo. I’m going to cover the steps leading up to this.

How to maintain vertical rhythm as font sizes change at different breakpoints. Using em units and Sass, this post builds on the vertical rhythm guide.

Four underused Typekit typefaces worth considering. All suitable for paragraph text, with good italics and a range of weights — each with a rationale for the choice.