A look at type that features prominent cuts or tapering into the type and a variety of recommendations you can use in your designs.

The best ink trap typefaces for websites

In a responsive world, managing font sizes can be tricky. So how can an atomic approach help?

‘Atomic’ font size management with Sass

Our websites can offer us an important advantage when it comes to choosing colour for illustration—constraint.

Tips for using colour effectively in web illustration

Lazy loading doesn’t have to be difficult, here’s how to add smooth loading images to your website.

Nice and easy lazy loading with lazysizes.js

This year I took it at a slower pace with the articles. It was a challenging year, so I was quite surprised to see the website continue to grow.

A year in writing — 2017

There are three types of stroke alignment, so when and where is each useful?

Illustrator quick tip: which stroke alignment?

An in depth tutorial to add buttery smooth animations to reveal your website search.

Search overlay with smooth reveal animation

Add a little extra polish to any of your designs with these tips.

Visual design tips you can apply immediately

It happens, sometimes you can be stuck starting a new design, here’s some tips that aim to help overcome the challenge.

Overcoming design roadblocks

In Illustrator it appears more difficult than it needs to be to export a colour palette to hex values, here’s a quick way.

Illustrator quick tip: export a colour palette quickly

Learn how to create, change and duplicate patterns as swatches.

Making patterns in Illustrator

Understand the differences between the two, along with how and when to use them.

How to use kerning & tracking

2016 was the second year I’ve written a post every week. This post is a summary of what’s happened over the year.

A year in writing — 2016

You may have two shapes and want to combine them, but still want to refine the overall shape or save it for later. This post shows you two options.

Illustrator quick tip: non destructive shape editing

Icon fonts are used for their convenience, which generally can’t be matched by SVG. However, this post aims to guide you through the setup and get to a similar level of convenience.

Let’s make a better icon system with SVG

The second in a monthly series where I roundup some of the best things in design I found over the course of the previous month. It aims to be a source of website, illustration and branding inspiration, as well as some articles that are a good read.

Monthly design roundup #2

As it’s the festive time of year, I thought I would add to the lists of gifts that people are writing. December and Christmas in general is one of my favourite times of year.

Christmas gift guide — 2016

I’ve been working on a recent branding project for a company called Go 2 Golf. It will be a website that will help people find golf courses across the UK. The first step for them was to have a logo made, this is the process I went through to make it.

Go2Golf logo case study

With horizontal scrolling, submenus are quite challenging to make work. Due to the CSS you have to use, a CSS only solution isn’t viable. In this post I show you how to utilise JavaScript.

Multiple level horizontal scrolling navigation

Maintenance weeks are where detail website tasks, instead of a regular post. I spend time fixing bugs, updating grammar and posts in general, as well as adding featured images. It varies and this type of post details what’s been done.

Maintenance week #6

This is the start of a monthly series of a roundup of 8 websites that I have found that are well designed. There is no particular theme, other than inspirational, which I hope you find is the case. I’ve added a few notes around why I believe they’re well designed as well.

Monthly design roundup #1

Memorising shortcuts of any application improves efficiency. Now I’m by no means the most efficient person in Illustrator, I’m generally just happy designing. However, there are shortcuts you  absolutely must know, because it saves you tediously clicking through panels and menus.

Illustrator quick tip: workflow enhancing keyboard shortcuts

The redesign of this website has been needed for some time. Overall the website is quite small in terms of templates required. I wanted to put the effort into making the website feel like it is a growing source of content. There is much to cover in this, as I start with the new logo briefly, sketching, wireframes and design.

My design process — v6 case study

Circular is very much in the spotlight at the moment. It has a distinct look to it that so many huge companies are using. From Google to airbnb, it’s everywhere. If you’re looking for alternatives, with different prices and through a different service, this post is for you.

Alternatives to Circular

In the last post the basis for the visual style was set. In this post it will continue with that to complete the filters. There are some challenging areas like colour selection, as it can look overwhelming.

Shop filter series: visual style completion

The previous post in the series completed the wireframes. They’re a solid basis for adding visual style. The content and interface elements required are all there. Further layout refinements, colour choices, typography and clarity improvements will be made throughout this post.

Shop filter series: visual style

Maintenance weeks are where detail website tasks, instead of a regular post. I spend time fixing bugs, updating grammar and posts in general, as well as adding featured images. It varies what I will do, and this posts serves as detailing what has been done.

Maintenance week #5

Continuing from the last post, which looked at the initial sketching and wireframe. This post will focus on the completion of each of the filters.

Shop filter series: completing the filters

Filtering is a huge part of online shops, it’s an effective form of navigation. In most cases it’s an area which is overlooked on small screens. I have seen some good implementations and many lack the ease of a larger screen. In this post I want to explore the idea of it being a tab bar, starting with sketching & wireframes.

Shop filter series: sketching & starting wireframes

Illustrator being a vector application means it can be easy to overlook the export process and making things pixel perfect. It’s easy to do, so you don’t notice it. It’s particularly important that you try to retain this for logos and icons.

Pixel perfect templates in Illustrator

I’ve finally done the redesign of this website! Version five lived for longer than I ever intended. This post is going to be a shorter summary of the changes. I’ll be posting a full case study over the coming weeks.

About version six

It’s likely you know how to align things in Illustrator, but you can never remember how to space things equally, so you resort to the tedious way of spacing them individually. If you want to align objects with an equal space between them, this quick tip will show you how.

Illustrator quick tip: evenly distribute objects

It’s been proven as apps have shifted away from the ‘hamburger’ navigation, to a bottom bar, engagement and browsing metrics have increased. Over time these findings have an impact on the thought process of those designing websites. In this post I detail a list of websites that are using the tab bar navigation.

Websites using alternatives to the ‘hamburger’

Maintenance week #4

Headroom.js is a popular plugin for providing additional functionality in having a fixed header. It has a lot of additional callbacks and options, to make sure you can cover a variety of situations. One of those things is stopping it from hiding when your navigation is open.

Stop headroom.js hiding when your navigation is open

Following up from the design in Illustrator post, it’s time to code the design. Using flexbox to do the heavy lifting for the layout, the focus can be on matching the design and improving on it through being able to show the button state.

Designing a pricing table in code

Since they appeared in iOS it’s been a trend to recreate these using CSS only. The technique uses the adjacent sibling selector and a hidden checkbox to retain use of the :checked pseudo class. In this post I wanted to take a look at this myself and recreate the toggle style.

CSS only iOS style ‘toggle’

Pricing tables are reasonably common for various types of services, they serve as a way to give the user an anchor. Generally meaning that you’ll be able to direct the customer into the package the company really wants to sell most of. While this post won’t cover the psychological side of that, it will focus on clarity and visual style. It’s an interesting website element to take a look at, so let’s start.

Designing a pricing table in Illustrator

As part of using Wordpress, and any other part of making a website, for that matter, you acquire reusable parts. As well as discover functions that aren’t shouted about. In this post I’ve shared a few with usage.

Wordpress functions to help make your life easier

One of my aims during redesigning this website is to keep the seamlessness between content output and redesign. It’s not the easiest of tasks, as any time spent writing, is time taken away from the redesign or vice versa.

Redesign progress update

Tables in general are something I naturally avoid doing in design applications, they’re frustrating to make. They are easily to overlook due to this and that they can be quite uncommon in use. Let’s say you wanted to design a table in Illustrator, and you wanted a quick and accurate way to do so. This post will show you how.

Efficient table creation in Illustrator

Aligning to a key object in Illustrator is one of the most useful alignment options. If you’ve ever been frustrated with aligning objects centrally, then everything nudges over a few pixels. This is where align to key object comes in, read on for how to.

Illustrator quick tip: align to key object

As I’ve spent time understanding the approach, it really makes sense for most CSS. Particularly spacing and font sizes. In this post I’m going to explain; why you may want to use this approach, and how to adapt it to your style of writing CSS.

Why you should use tachyons to make CSS easier

Scroll snap points is the answer to the need for JavaScript carousels, to an extent. As browsers gain more and more new features in CSS, it’s important to keep up to date with them. As the generalisation is; where you can replace JavaScript with CSS you gain performance improvements. Carousels in my experience are a good chunk of the need for JavaScript on the average website. So I’m very interested at the prospect of using scroll snap points to replace that.

Get up to speed with scroll snap points

Maintenance week #3

Following on from the datepicker post where it was more about getting the basics in place and focusing on some important Illustrator techniques that allow for accuracy and efficiency. This post will focus on guiding you through the process of making the datepicker easy to understand and have better aesthetics.

How to: datepicker styling using Illustrator

In this post I’m going to show you how to make a datepicker efficiently. A reasonably common user interface element, but can be a source of frustration, to make in design applications. Due to the grid, and amount of items in that grid it can be difficult to align everything…

How to: datepicker using Illustrator

So you use Illustrator for designing websites, and that could be because you’re on a retina screen and Illustrator is vector. So you can design at 1x and it not matter, at least that’s the case for me. However, when it comes to exporting it’s a pain, you can use ‘Save to Web’ and increase the size to 200%, but that’s tedious. You know how to export SVG, but exporting PNG files is the issue at retina sizes. In this post I will show you how to overcome that.

Illustrator quick tip: export 2x with a 1x canvas

Swatches in Illustrator isn’t something I have used very often. Partly this has been down to being unsure of the best way, and not trusting that they will remain there. As there are random ones to begin with that you will never use and the process of deleting them seems annoying each time. In this post I’ll show you the best way to clean up existing swatches, add your own and keep them updated.

How to: swatches in Illustrator

I figured I would write a post about the tools I use. Some will be familiar, but hopefully there are some that are unfamiliar and end up being useful to you.

Tools I use

This post builds upon the previous one in making it editable with Wordpress, using the Customizer API and the newest functionality since 4.5 selective refresh. With this you can make a really smooth and quick editing experience.

Hero area series: Wordpress Customizer with selective refresh

The second to last post in this series, coding the page. You’re going to build the page using flexbox and make it responsive. The method that will be used to make it responsive, is mostly mobile first, but it will be making logical decisions based on where CSS only needs applying. This saves you from having to undo it in another media query.

Hero area series: HTML, CSS & responsive

The focus has been very much desktop so far, but considerations have been highlighted throughout for smaller screens. I will only cover ‘mobile’ sized resolutions, as for this particular layout you will only need to make minor adjustments for ‘tablet’ sized resolutions.

Hero area series: designing for small screens

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.

Hero area series: plan & design

With Wordpress there are a lot of ways to the same thing, for good reason, sometimes you can’t do it one way or the other. This can make it tricky to remember how to do it for each instance. At least this is the case for me. I want to use this post to serve as a guide for each method of doing so. I won’t be covering their parameters, just the necessary steps to retrieve an image.

Ways to get post thumbnails in Wordpress

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.

3 ways to export SVG in Illustrator

Part of the website world is making it more accessible to bots. Be it search, social or a service like Instapaper. The reason we do this is so our content looks more appealing and isn’t left up to them, to scrape text and images they think is best. I’ll be showing you how I have done it recently with JSON-LD.

How to use JSON-LD to replace Microdata with Wordpress

I’ve wanted to explore CSS shapes for a little while now and get a good understanding for it. Find potential use cases, strengths and weaknesses. In this post I’m going to cover the level one properties. At the time of writing level two is in the editors draft and looks to be bringing much more power to them.

Get up to speed with CSS shapes

The inline-block method is an effective float based layout alternative. It’s easier to align and removes the need to clear floats.

How to use inline-block for layout

I first wrote a tutorial little while back on horizontal scrolling navigation, with the intention of accommodating only mobile devices. As with every device I have come across, the usability of horizontal scrolling areas is good.

Enhancing horizontal scrolling with flickity.js

How do you maintain a perfect square shape with a responsive layout? The solution appears simple; the only issue is your content. Which if you want to maintain a square shape it should be able to accommodate the content. I’ll show you how to do it in with this quick tip.

How to: flexible squares with CSS

This week is another maintenance week. The last one I looked at updating some posts. This week has been based around website maintenance. It’s been over the course of more than a week, as there was a lot to do. The interesting things I’ve added are SSL, updated the CMS and tidied up my server.

Maintenance week #2

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.

11 resources for colour inspiration

I was looking through photos in Finder, and I was finding it frustrating to scan many photos quickly. The problem was down to the horizontal scrolling sections; it is quite quick to flick through but it became tedious. I wanted to see more pictures at once, here’s a solution inspired by Finder.

Browse content efficiently with toggling horizontal scrolling

It’s been a year since I started writing weekly. This is the 52nd post, so it’s fitting to reflect upon the experience of writing over the past year. I hope to inspire you, to take it upon yourself, to write regularly. As I’m certainly not the best writer, but I believe if you’re knowledgeable of a subject, you should be sharing what you know.

A year in writing – 2015

Following on from the two previous posts, this post will cover things I have learnt about selecting colours over the years. These tips are the sort that when starting something new, you wish you knew, ahead of time. The majority of these tips will stand true, at least 90% of the time, and help making the right decisions easier.

Colour series: adding new colours & tips

This is the second part in this colour series. The topic I will cover in this post is tweaking your palette. Following the previous post, you will have selected a 5 colour palette, which should serve for the majority of your use cases. However, at this stage, it won’t be perfect. I’ll guide you through the process of tweaking your palette. From trying your colours in different combinations, to colour blindness. This post helps to refine your palette.

Colour series: tweaking your palette

In this first post, I’m going to run through why colour theory is only a small part of choosing colours. Then you’ll begin to pick your palette. I’ll explain the things, that I consider when choosing a colour palette. This should help to inform your choices.

Colour series: picking your palette

Feature detection is a core part of day to day life as someone who makes websites. It’s one of those features I usually hand off to Modernizr. I recently saw a tweet, which spurred the curiosity to see if we’re ready to use the @supports feature query. Now is definitely a good time to start.

Feature detection with CSS using @supports

As it’s the festive time of year, I thought I would add to the lists of gifts that people are writing. Christmas is one of my favourite times of year, not just for the gift giving, but it’s a time to relax and enjoy what surrounds Christmas. Usually there’s a bit of a designer spin on it, which is my aim, but I think they’re suitable for everyone. I own some of these things already, so for what I can I have provided a brief review. There’s a mix of things from notebooks to shoes, with varying price points.

Christmas gift guide 2015

The idea of this post comes from a previous one, ‘accuracy in wireframes’. I thought more about the topic, which was around trying to decide layout and  adding visual style. Focusing on two very important aspects of making websites leads to difficulties. It was part of a larger problem in my process.In this post I want to cover ways, where split focus can creep in, and the purpose of each step, so you can gain understanding for avoiding split focus. This is based on my process, so yours may differ, but the premise is the same.

Avoiding split focus will make you a better designer

There are many opinions against rolling your own CSS framework. To the extent, it can make you think, let’s get bootstrap (or another) and see what happens.I genuinely believe there is no harm in making your own. I started one a couple of years ago and have just got back to it recently (as I have been focused more on designing lately). It isn’t in too bad shape, but it’s made me evaluate it and begin refining it again. There’s value in creating your own if you use it regularly and keep it up to date.

Why you should roll your own framework

I’ve seen tweets, and hear people say “I’m no good at sketching/drawing.” So they don’t bother with doing it. For me not sketching your website before going into a wireframe or design, means you’re missing out!Just because you feel like you can’t sketch, doesn’t mean you shouldn’t do it. After all, you’re capable of building a website, and at some point in the past you weren’t. In this post, I’ll show you my process and how to sketch websites.

Tips for sketching websites

This is one of the first things; I’ve worked on aside from what’s posts, to give away. It’s quite difficult to figure out what to design to give away, without just adding to the masses of things out there already. I’ve decided to code up some form styles. So you should be able to grab their styles and apply them right away to your forms. There are three variations.

Three free form styles

Grunticon updated to V2 a while ago now and what came with it was the ability to insert inline SVG. This is great because it can generate the necessary fallbacks and not ruin layout in old browsers with the presence of an <svg> tag. The main benefit of having your SVG inline is it can be easily modified with CSS.All this is done by running a grunt task. However, if you’re not too familiar with using Grunt, or want to avoid build tools altogether, it’s not possible at this stage. I have wrote previously on an alternative approach, however it doesn’t have the inline SVG benefits.

Using Grunticon to inline SVG

I’ve been thinking about doing this for a little while over the course of posting regularly. I feel it a duty to go back and refine some posts or make additions to them to improve them.So there is no post as such this week. I’ve decided to go back and update some. I’ve listed each of the posts and changes I’ve made for you.

Maintenance week #1

One of the trickiest things to deal with cross browser is the styling of form elements. All browsers influence these strictly, but over the years the ‘appearance’ property has been present in WebKit and Blink browsers, and Firefox to help gain some control. More recently it’s been added to Edge. It is a little more to it than just using this property. I’ll explain the advantages and drawbacks to this and how I handle it. The goal of this post is to give you the base for you to apply your visual style on top of. I will be covering text, button and select elements.

How to consistently style form elements

I have updated my logomark. It’s been around 5 years, since I last made a change relating to my logo. Since then, I have grown as a designer, my aims, goals, and where I am have shifted. I’m going to cover the steps leading up to this. It’s relevant to the process and gives a better of understanding of what’s planned for this website. Then, I will cover the process.

iamsteve – a new logomark

Following on nicely from the previous post. One of the things with critical path CSS, is you can’t use wp_enqueue_style. It’s not a huge deal, as the easiest way to get around it is by putting it in your <head> the regular way. Though when you combine that with cookies and <noscript> tags, it can make for quite a messy <head>. Particularly for a Wordpress template, as I have found in the past..In this post I will show you how to avoid this. It’s similar to the way Wordpress recommends you queue your scripts and styles.

Add critical CSS with wp_enqueue_scripts

At one point, I was relying on JavaScript for setting the cookie for my critical path CSS. The issue with that is when JavaScript isn’t available the cookie will not be set. Not a huge deal as the website, would still function.When it comes to Wordpress, it’s not as straight forward as using setcookie in your header.php file or another less than ideal location. In this post I will show you how to set a cookie with Wordpress and use it in your code. The method is very similar to the JavaScript method, with a focus on PHP and Wordpress.

Setting a cookie with Wordpress

If you’ve ever wanted to place your logo in the centre of your header, between your navigation items, at first it can appear tricky to achieve. You may have been used to an approach that involved setting up, two separate menus, within Wordpress. May you added a link to ‘home’ in between the items in a single menu. Or worse still you used JavaScript to change the position. Each of them have a less than ideal feeling to it. This is where flexbox can really help.

Having a central logo with a Wordpress menu

I wrote a fairly lengthy post previously on vertical rhythm. I considered adding a section on how to adjust font sizes whilst maintaining vertical rhythm. However, with the experience of seeing how people struggle with the topic of vertical rhythm, it was best to keep it for a separate post.I will assume you do have a grasp of vertical rhythm, at this point, otherwise some parts may not make sense. In the examples I will be using em units, with Sass. So I assume you will have an understanding of how em units work. However, I will give you a brief overview.

Responsive vertical rhythm

Here’s 4 typefaces from typekit; that you may not have used. These are typefaces I have used in the past and have qualities that I believe make a good choice. Generally they are all suitable for paragraph text. They feature nice italics and a variety of weights. Hopefully through this post you can discover some nice typefaces that you can find appropriate for your designs.

Typekit gems

In this post I’m going to cover a process I’ve brought in for doing wireframes, I’m finding really useful lately. It involves taking back all the visual style and just focusing on the layout of elements — as a result creating accurate wireframes. Then you build up your visual style from there. The problem for me comes from wireframes that have too little detail, being used as the basis for the whole page.

Accuracy in wireframes

This post is a follow up to a different method for horizontal scrolling navigation which used inline-block. In this post, I want to cover how flexbox can be used to achieve the same thing and the benefits over the inline-block method.

Using flexbox for horizontal scrolling navigation

Vertical rhythm is the typographic practice, to create a vertical harmony between text, images and so on. On the web it’s quite difficult to achieve. Yet understanding what it is, with the aim to maintain it, you can improve your reading experience. If you’re aware of it, but have struggled to understand vertical rhythm, this post is for you. It will focus more on the why, rather than the how. So you come away with a better understanding.

A guide to vertical rhythm

Servers isn’t a topic I thought I would write about, however I had to do something for the first time on nginx. There is plenty of information out there on this topic. As someone who was new to redirecting old and new domains on nginx particularly, the information is making a few assumptions. For me, it wasted much of the time, it took me to do this. As I was second guessing what would happen.In this post I want to reassure you and guide you through the process. Answering the questions, that you may have, for what appears to be a simple looking task.

Redirecting an old domain to a new domain with nginx

During the Christmas holidays, I made the decision to write blog posts weekly, at the turn of the year. Knowing that I couldn’t be sure, if I would be able to see through writing, for a whole year. I wrote 4 posts over the course of the Christmas holidays and decided that I would go ahead with it.

What I’ve learnt from 6 months of writing weekly

One of the best things about Sass, is the ability to adjust colour nicely and be able to apply that, consistently across, many colours.In this post I’m going to demonstrate, as I have in the past with scale-color. How you can create gradients, that look much more harmonious. Instead of the standard, take the colour and darken it. Using adjust-hue and scale-color we can achieve this.

Using Sass to create harmonious gradients

Illustrator has a fair variety of default width profiles, however you may find yourself wanting to tweak them slightly. In my case I needed to tweak one, for creating some eyelashes. It’s not apparent how to do this. So it makes for a good post to explain for anyone having a similar problem.

Creating custom stroke width profiles in Illustrator

I think the variety of masking techniques there are in Photoshop are part of its strongest features. In this post I’ll show you the ones I use most frequently. How to clip images to a shape and how the overlay blending mode can be used as a mask to dodge and burn non-destructively.

A couple of masking techniques in Photoshop

The great thing about the Wordpress customiser, is it allows you to make editable regions throughout your website. Without giving you too much control, but allowing that, real time, visual focus.You could have much of the functionality, I will show, within the admin panel. However, being able to make the edits in real time, makes decision making, easier. Particularly, with how your text or images display.

Using Wordpress customiser to create editable regions

One of the frustrating things about the letter-spacing property is the addition of the letter-spacing you apply to the last letter of the text. This is fine when you have left aligned text, however if you right align or centre the text, you’re left with a little bit of space.

Remove letter-spacing from last letter

I find myself needing to remember, how do I create a set of grid guides in Illustrator. As I’m a relatively new convert to using Illustrator, well I find myself switching between Illustrator and Photoshop, for much of the work I do. This is a quick tip to show you how to make a grid, for those who just can’t remember, due to it generally being easier to remember in Photoshop. In the post I will cover how to create a simple grid and toggle it’s visibility.

Illustrator quick tip: grid guides

I have only recently looked into using the custom meta boxes that come with Wordpress. I’ve been a fan of Advanced Custom Fields for a long time, so it’s something I’ve never had a great urge to use.I’m going share with you over the course of this post how to get them set up. You’ll learn to add them efficiently, how to add custom CSS, change placement to under the title and finally how to use them in your theme.

Wordpress custom fields

In the October 2014 update, Adobe added a new grid/guide creator and it’s great. It covers the majority of things extensions like GuideGuide do and has a couple of advantages.I’m not sure it’s been given the attention it deserves, a small feature, yet one we will use so often. It’s simple to use and allows you to save (like GuideGuide) and should sync your grid layouts with Creative Cloud.

You don’t need an extension for Photoshop grids

If you use Wordpress, it’s likely you’ll be familiar with the_post_thumbnail() or one of its variants. In this post I want to provide a way of using srcset with your post thumbnails today. The aim will be to create a similar function, that takes the same parameters and except the output will contain the srcset attribute.

Using srcset with the_post_thumbnail() in Wordpress

Sass maps can provide some powerful functionality to make life easier and less repetitive. I’ll cover briefly how to use them and then detail some of the cases that I use them, as I don’t think the benefits are immediate.

Sass map use patterns

With blend modes we can apply a vintage style to any image like we would in Photoshop. Blend modes is something I have been looking forward to coming to CSS for a while and this feels like a fitting way for me to share a deeper look at them. You can test them for yourself with the demo at the bottom.

Creating vintage filters with CSS blend modes

Flexbox is still one of those properties that isn’t quite ready for prime time use. Due to the necessary support of IE 8 and 10. There are some uses of flexbox we can use for ‘free’ without worry of any knock on effects. These are especially handy if we don’t have the time to invest into heavily flexbox based layouts.

Get the articles