A blog by Steve McKinney about the design and build of websites. Bridging the gap between your design tool and code, with a focus on typography, CSS and visual craft.
SaaS products largely look the same irrespective of functionality. They serve a functional purpose, so familiarity drives this. That’s not a dig — it’s just where I’m spending time design wise lately. However, there are little moments outside of that where you can add your own choice of detail without degrading user experience. Sidebar with content variation You’re likely to be…
A roundup of under the hood improvements I've made to the site recently.
Spoiler: not in code contexts When you write in your text editor or messaging app, it will likely change the quote to the correct one and do this for you across the OS. However with the advent of LLM assisted code, writing, etc. they have a habit in my experience of undoing them. The reason this bugs me moreso than correctness is because smart/curly quotes are more stylised. It’s easy to spot in a…
There’s a strong bias towards just a little more.
A pattern I've noticed is what feels like pages within pages. These seemingly contain a large amount of information expanding upon a section within a page. I first noticed it with Apple products. The example here builds upon the processor section in more detail. Apple M5 processor section My initial impressions is it's a bit of an app crossover to retain context within the initial page. You can…
I’ve had this website quite a while in a flat file system now. But there’s always a bit of friction when publishing something. As you have to write in a file, commit and push. It’s not big a deal, but depending on your setup you may have different quantities of frontmatter to contend with. However, a CMS isn’t all that better. You still have much of the faff, but it looks a bit different. And with…
It’s possible an LLM might find it useful, or yourself.
A place for things outside of design and code focused articles.
I was seeing an increase in my ‘serverless’ usage and it didn’t make sense. So I decided to add Simple Analytics and wanted to share a review of this privacy focused service.
I’ve developed some habits over the years when it comes to the display of text in a design with the aim of readability and aesthetic balance. And it feels like it could be useful to document this.
Bento grids offer a unique layout challenge for CSS. With the use of Tailwind you can create a flexible layout with modern CSS grid and @container queries.
Design and development decisions for the 8th version of this website. New design, using Next.js App Router and pretty much all in on Tailwind.
How I moved 140 posts from a database CMS to a static site in Next.js. No redesign just website rebuild and some hindsight into the decision making.
A look at type that features prominent cuts or tapering into the type and a variety of recommendations you can use in your designs.
In a responsive world, managing font sizes can be tricky. So how can an atomic approach help?
Our websites can offer us an important advantage when it comes to choosing colour for illustration—constraint.
Lazy loading doesn’t have to be difficult, here’s how to add smooth loading images to your website.
This year I took it at a slower pace with the articles. It was a year I felt I didn’t focus so much on this website, so I was quite surprised to see the website continue to grow.
There are three types of stroke alignment, so when and where is each useful?
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.
Add a little extra polish to any of your designs with these tips.
It happens, sometimes you can be stuck starting a new design, here’s some tips that aim to help overcome the challenge.
In Illustrator it appears more difficult than it needs to be to export a colour palette to hex values, here’s a quick way.
Learn how to create, change and duplicate patterns as swatches.
Understand the differences between kerning and tracking, along with how and when to use them.
2016 was the second year I’ve written a post every week. This post is a summary of what’s happened over the year.
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.
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.
Monthly design roundup #2 — the best websites, illustration, branding, and articles I found this month, with a few notes on each.
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.
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.
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.
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.
Monthly design roundup #1 — eight well-designed websites I found this month, with notes on what makes each one worth looking at.
The Illustrator keyboard shortcuts worth memorising. Not exhaustive, but the ones that save you from constantly clicking through panels and menus.
A case study of the v6 redesign of iamsteve. Covers the new logo, sketching, wireframes and the full design process from start to finish.
LL Circular is everywhere right now — Google, Airbnb and more. This post rounds up alternatives available on Typekit, Myfonts and Google Fonts at different price points.
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.
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.
Maintenance week #5 — bug fixes, grammar improvements, and adding featured images to older posts. A rundown of what was done instead of a regular post.
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.
Exploring a tab bar approach to shop filtering on small screens. Most filter UIs fall short on mobile — this post starts the series with sketches and wireframes.
How to set up Illustrator to stay pixel perfect. Using snap to grid and saving a template means you won’t accidentally export on half pixels for logos and icons.
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.
How to distribute objects with equal spacing in Illustrator using align to key object. A quick tip that saves spacing things out one by one.
A collection of websites using tab bar-style navigation as an alternative to the hamburger. Engagement improves when apps move away from hidden navigation.
Maintenance week #4 — bug fixes, grammar improvements, and adding featured images to older posts. A rundown of what was done instead of a regular post.
When using headroom.js, the fixed header can hide even when the navigation is open. This post shows how to prevent that using headroom's callbacks.
Coding up the pricing table designed in Illustrator. Flexbox handles the layout, keeping focus on matching the design and adding interactive button states.
A CSS-only iOS-style toggle using a hidden checkbox and the :checked pseudo class with the adjacent sibling selector. No JavaScript required.