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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
A look at type that features prominent cuts or tapering into the type and a variety of recommendations you can use in your designs.| iamsteve • RSS feed
In a responsive world, managing font sizes can be tricky. So how can an atomic approach help?| iamsteve • RSS feed
Our websites can offer us an important advantage when it comes to choosing colour for illustration—constraint.| iamsteve • RSS feed
Lazy loading doesn’t have to be difficult, here’s how to add smooth loading images to your website.| iamsteve • RSS feed
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.| iamsteve • RSS feed
There are three types of stroke alignment, so when and where is each useful?| iamsteve • RSS feed
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.| iamsteve • RSS feed
It happens, sometimes you can be stuck starting a new design, here’s some tips that aim to help overcome the challenge.| iamsteve • RSS feed
In Illustrator it appears more difficult than it needs to be to export a colour palette to hex values, here’s a quick way.| iamsteve • RSS feed
Learn how to create, change and duplicate patterns as swatches.| iamsteve • RSS feed
Understand the differences between the two, along with how and when to use them.| iamsteve • RSS feed
2016 was the second year I’ve written a post every week. This post is a summary of what’s happened over the year.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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 • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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…| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve • RSS feed
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.| iamsteve.me
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.| iamsteve.me
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.| iamsteve • RSS feed
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.| iamsteve.me
Add a little extra polish to any of your designs with these tips.| iamsteve.me