A blog with a renewed focus on design & code

Understanding the readers

It’s important to understand the frame of mind people are in whilst looking for solutions in articles. So throughout the process I wanted to keep this in mind.

Time is the main factor

There are two main types of people who visit this website. Those who are currently working and those who are learning.

The distinction between the two is the time they have. The person working wants a quick solution and the person learning wants to be guided and understand much of the why.

Understanding the workflow

There was a reasonable amount of articles on the website—which means a workflow is in place. I wanted to see where I could make the design of articles better without increasing workload.

With the majority of articles being tutorial based and few being the occasional essay, you don’t want to make things take longer. Consistent publishing is about having the least amount of friction in the way of hitting publish.

Improve the design and aim to increase efficiency

Each post has various assets associated with it. From application images, code samples, keyboard shortcuts and references to name a few things.

These things take time to gather and produce on top of an article alone. These extra details are aren’t necessary but improve understanding and engagement.

Flexible colour palette

Starting out, laying the foundations for producing content and addressing the primary goal is the colour palette.

It’s necessary for illustration

Whilst few colours would be used throughout the design. I wanted to give variety in hues, tints and shades so that featured images and illustrations had enough freedom. The challenge is in keeping things complementary.

Custom pixel perfect icons

With the illustrations throughout the website having particular stylistic choices (eg: stroke weight) it made sense that the icons were consistent with that.

All illustrations are drawn with 2px rounded strokes, this was the main constraint to adhere to. Each icon is drawn on a 16px grid, being implemented in a way the colour can be adjusted in code.

Bold and clear typography

For the design of articles, people reading or scanning articles will benefit from a clear visual hierarchy and lack of distractions. Along with generous spacing to help create areas for the eyes to find a break.

Headings are treated like a table of contents—in effect—denoting a new chapter. You can also click the icon next to these headings to grab a link to them.

It doesn’t stop at design

Design defines a lot of the harmony found within articles, but it goes beyond typography and spacing. It’s up to the creation of content to maintain that experience.

I defined ways to create a more unified feel between list pages & articles themselves efficiently.

• Use the same sizing for featured & in article images
• Even if the image could feasibly take up less space
• Use light shades of the colour palette for featured image backgrounds
• Aim to use one or two distinct colours within featured images
• Set up templates to save having to refer to image sizes & colour

Some of these things appear simple, but it was a challenge to define appropriate sizing for each element. So that it remained in harmony throughout the design.

Results

The design wasn’t just a massive visual improvement, it was a restructuring and refocusing of a website that balanced two competing goals. Focusing on the writing side of the website saw the following:

Features

• The website was saw a few submissions to user generated galleries like Site Inspire, HeaderLove and Best Website Gallery
• Article featured in CSS News
• Article featured in HeyDesigner
• Articles featured on Awwwards, 1 and 2