Blog

Tips and tutorials about the design and build of web interfaces

Illustrator quick tip: evenly distribute objects
Quick tip

Illustrator quick tip: evenly distribute objects

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.

Websites using alternatives to the ‘hamburger’
Design

Websites using alternatives to the ‘hamburger’

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.

Maintenance week #4
Website

Maintenance week #4

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.

Stop headroom.js hiding when your navigation is open
Code

Stop headroom.js hiding when your navigation is open

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.

Designing a pricing table in code
Code

Designing a pricing table in code

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.

CSS only iOS style ‘toggle’
CSSPatterns

CSS only iOS style ‘toggle’

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.

Designing a pricing table in Illustrator
Design

Designing a pricing table in Illustrator

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.

Redesign progress update
Design

Redesign progress update

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.

Efficient table creation in Illustrator
Design

Efficient table creation in Illustrator

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.

Illustrator quick tip: align to key object
Quick tip

Illustrator quick tip: align to key object

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.

Why you should use tachyons to make CSS easier
Code

Why you should use tachyons to make CSS easier

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.

iamsteve • design & code blog