Nice and easy lazy loading with lazysizes.js

Images play a large part in the reason why websites continue to grow in page size. While they don’t affect performance as much as JavaScript, they remain a burden on data and loading times. In this post I want to show you how to add lazy loading images as part of your workflow.

A year in writing — 2017

This year I took it at a slower pace with the articles. It was a challenging year, as I aimed to focus on things outside of writing. I posted very little and stopped towards the end of the year. Aside from the challenges, I was quite surprised to see the website continue to grow.

Illustrator quick tip: which stroke alignment?

One of the things you may face with applying a stroke to an object in Illustrator, is which of the three alignments should you use? Each type has its own advantages and disadvantages, which this post will explore.

Search overlay with smooth reveal animation

A common part of a website is the ability to search. Depending on how important search is to your website can define much of how it looks and how it’s prioritised in the design. In this post I want to show you how to create a search which appears with a smooth transition on the click/tap of a button.

Visual design tips you can apply immediately

When designing there are techniques for applying colour, typography, spacing, you can rely upon regardless of the situation. These are things which add extra polish, and are generally hidden to the untrained eye.

Overcoming design roadblocks

When starting out on a new project or being newer to design, getting your ideas to be what you visualise can be difficult. Whether you’re new or are aiming to broaden your specialism you’ll find some things more challenging. In this post I’ll share some tips of how I approach these challenges.

Illustrator quick tip: export a colour palette quickly

In Illustrator it seems to be more difficult than it needs to be to export a colour palette to hex values. Using swatches gives you access to everything except hex. It’s tedious to go through the usual object, click fill, copy and paste routine. Here’s a way a way to do it quickly.

Making patterns in Illustrator

Patterns and textures were popular before flat design came along. However, as we seek the need for creativity, fun and uniqueness in our designs things like patterns reemerge. This post shares what I’ve learnt and how to make your own. There are some free ones for you to download inside too.

How to use kerning & tracking

When using kerning or tracking on your type it can help with legibility or correct the way type looks for a specific situation. It’s important to understand the differences and when to use them.

A year in writing — 2016

2016 is the second year I’ve written a post every week. This post is a summary of what’s happened over the year and a look back at some of the goals I had at the end of the previous year and a look at how things have progressed.

Illustrator quick tip: non destructive shape editing

Making anything in Illustrator involves using the shape tools more often than not. You combine shapes, using the various methods with pathfinder. You may have two shapes and want to combine them, but still want to refine the overall shape. This post shows you two options.

Let’s make a better icon system with SVG

Icon fonts are heralded for their convenience, which generally can’t be matched by SVG. However, they come with a huge performance downside, which SVG doesn’t have. I want to use this post as an opportunity for you to drop icon fonts and start using SVG. This post aims to guide you through the setup and get to a similar level of convenience.

Start new designs quicker

It’s my aim to help you be a better designer. I’ve made you a simple Adobe Illustrator template to manage your colour, grid and guides. So you’ll get to executing your ideas around 20 minutes sooner every time.

Join my monthlyish email list and I’ll send you the template and new tutorials to help you design beautiful websites. You can unsubscribe anytime.