There’s a lot of papercuts, general polish required and and endless list of things to make better as my opinions have evolved since this current design was released in early 2024 and a lot of stuff I just didn’t get to.

Tailwind v4 and dark mode

At the start of the year I upgraded to v4 of tailwind and added dark mode. This was a bit of an effort over months prior. I’ve purposely kept it simple in regards to not having a theme toggle.

I decided this as I added dark mode to my portfolio with a toggle and it just felt like a faff. And I knew it would be more painful on this website.

So I opted for using light-dark and creating a bunch of tokens.

--color-heading: light-dark(var(--color-fern-1100), var(--color-fern-0));
--color-body: light-dark(var(--color-fern-1100), var(--color-fern-200));
--color-body-80: light-dark(
  oklch(from var(--color-fern-1100) l c h / 0.8),
  oklch(from var(--color-fern-300) l c h / 0.8)
);

A few tokens really carried things quite far in regards to text. But the challenge lay with the ‘surfaces’, anything that had a background. I’ve experimented in the past with a layer kind of approach. I’m not sure I like it totally, but it’s ok for now.

--color-canvas-light: var(--color-neutral-01-150);
--color-canvas-dark: var(--color-fern-1300);
--color-canvas: light-dark(var(--color-canvas-light), var(--color-canvas-dark));

--color-surface: light-dark(
  rgb(255 255 255),
  color-mix(in oklch, var(--color-fern-1100), transparent 70%)
);
--color-surface-02: light-dark(
  var(--color-neutral-01-50),
  color-mix(in oklch, var(--color-fern-900), transparent 60%)
);
--color-surface-03: light-dark(
  var(--color-neutral-01-50),
  color-mix(in oklch, var(--color-fern-900), transparent 50%)
);
--color-surface-04: light-dark(
  var(--color-neutral-01-50),
  color-mix(in oklch, var(--color-fern-900), transparent 10%)
);

It definitely needs refining further as I have noticed some contradictions, but things are ok.

Moving to Content Collections

The most significant change was migrating from Contentlayer to Content Collections. Contentlayer hasn't been actively maintained for a long time and it’s one of those things in the back of your mind you know is going to break at some point.

I upgraded Next.js to 16.1 but that broke a lot of stuff. I reverted and left it. I’m not sure it was all Contentlayer but that spurred me to do so. Alongside that, I upgraded Next.js to 16.2 and there’s been no issues.

Previously, I tried to move to Velite, but that didn’t work mostly due to the way post images are handled. So it’s nice Content Collections was a more like for like replacement.

Post layout improvements

One of the things that bugged me for a good while was the post layout. I’ve changed things up slightly.

For larger screens you had the table of contents on the right, it’s now on the left. I also managed to get it to feel better when scrolling with scroll driven animations.

.toc * {
  animation: toc-blur-scroll linear both;
  animation-timeline: view();
}

@keyframes toc-blur-scroll {
  0% {
    filter: blur(12px);
    opacity: 0;
  }
  10%,
  95% {
    filter: blur(0);
    opacity: 1;
  }
  100% {
    filter: blur(24px);
    opacity: 0;
  }
}

Scroll driven animations are a real nice addition—which allowed me to blur the contents on entrance and exit at different rates.

Whilst the code is simple, it’s a new concept to get my head around. By setting animation-timeline to view() it says you want the @keyframes to apply based on the visibility of the element whether it’s in view(). Essentially, between 10% and 95% of the viewport the element will not be blurred.

It’s cleaned up the code from having a janky masking implementation blurring the scroll bar to something with a more seamless feel.

Syntax highlighting

I replaced Prism with Shiki for syntax highlighting. Initially, I didn’t have the best impression of Shiki because I misunderstood the control you got and how theming worked.

With the help of Claude I was able to move to Shiki and update every code block and improve upon everything I was trying to achieve with Prism previously.

What’s improved?

1. Light and dark themes
2. Handling of line numbers with scrolling
3. General code block design (title, line highlighting, copy button, etc.)
4. Additional features like diffing, word highlighting, warnings, etc.
5. Fixed Tailwind's @theme directive highlighting

Notes improvements

The notes section has an improved design. I’ll continue to iterate here but I’m happier with it. I’ve added a couple of unique things to notes like lightbox with zoom panning for touchscreens, a chat bubble component and probably some other stuff.

Bug fixes

• Fixed mobile nav not closing on route change
• Fixed heading link icon alignment and scroll margin
• Preserved straight quotes in chat blocks by running smartypants before the chat remark plugin
• Quite a few things in regards to maintainability that I overlooked whilst adding a dark mode

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 design if you use them in larger headings as well as mixed in different blocks of content. If you have multiple people working on a project, some people typing in code, or directly into a CMS, some copy direct from the app, you’ll have a pretty inconsistent experience with quotes used.

You can be well intentioned and try to ensure you have the correct quote, but with LLM’s they work through the document and change them to dumb quotes.

I was writing this post with a different angle but I was using vscode the day before publishing and copilot tried to autocomplete some code I didn’t need and I noticed it had used the correct entity in the content it generated.

So this led me to think have LLM’s finally cracked it? This is by no means conclusive and the use cases are entirely different.

I asked Claude in a couple of situations.

Opus in app gets it, however, Claude Code and Raycast don’t. Their use cases are very different but considering code is a big way they interact with our code. I wish they treated them the same. Or maybe it’s how the app itself encodes the output or something beyond my comprehension?

It doesn’t work with AGENTS.md or CLAUDE.md

You could add to either of these docs the guidance on how to use quotes, dashes, ellipsis—down to the specific HTML entities—and it will ignore them in my experience.

Lint and GitHub action all the things

However, you still need a solution. Thankfully AI can solve its own problem by creating a script and or Github Action relevant to your codebase.

In economics, the Jevons paradox, or Jevons effect, is said to occur when technological improvements that increase the efficiency of a resource's use lead to a rise, rather than a fall, in total consumption of that resource.^1

Rather than take the most efficient path to complete your idea you end up adding more to the scope.

I’ve been finding that there’s always that little bit more you can do. The ideas just get more ambitious as the request you give succeeds.

However, I’m finding it fun and I wonder what my design workflow will look like in the next 6 months? There’s so much change and stuff going on in this space I am just going with the flow.

I first noticed it with Apple products. The example here builds upon the processor section in more detail.

My initial impressions is it's a bit of an app crossover to retain context within the initial page. You can browse a page, expand the detail, return back to where you were.

There's been two "high-profile" examples recently from Stripe and Linear which do similarly.

Pages are striving to be succinct as possible because of attention spans and reality. But there's always the nagging feeling of "I'm not representing this feature as to its full extent as it is". And using this design pattern to expand on things is how it comes to be. I know I've relied on this in more sales focused journeys not wanting to overwhelm the customers.

But this as a pattern feels like it's inspired by Notion and similar apps. You pop in and out of content rows, edit a bit, return to your database. Pages within pages in Notion feel a seamless pattern whether that is a popover or navigating through.

I do agree with the sentiment it probably should be a page. However, the behaviour on the web isn’t standardised and there is such an unpredictability in some interactions that it probably doesn’t matter? Who knows whether you’ll go to a new page, open a new window or open a modal. Not that I agree with that, but it’s the reality.

To add to this as well, we have good support for View Transitions and that is blurring the lines between what is and isn’t a page change.

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 a CMS I’ve not seen one replicate the niceties of writing in iA Writer. Be it on a computer or phone.

In effect not much changes. Some of the tedious publishing workflow remains with file based but with better version control.

However, one thing I’ve discovered with Claude Code is automating that process with GitHub Actions.

It’s not particularly easy when some things for your website are bespoke. But chucking AI at it makes it easy.

With my publishing workflow I’ve managed to be able to create an action. I create a new note in the correct folder in my repo I can push this up to GitHub the action will run. Add necessary frontmatter, slugify the file name if needs be and publish for me.

In theory this is the least friction to writing I’ve found. The remaining tedium is committing it to git, making sure I’m on a branch then opening a pull request.

It should make publishing from my phone easier. This note is an attempt to test this.

There is the effect of AI now, that’s driving how we consume things, share things, put in the effort to learn or do things. I’ve certainly noticed the change in how I browse for solutions.

Combined with Googling being worse, which isn’t a revelation. It’s encouraged the worst in how to create a website. And that has swayed my opinion on how we’re going to find things.

This combined with seeing things around making your website easier to access for LLM’s in markdown feels like the next wave of “SEO”.

There’s nothing to gain or lose from this, as everything is available to the public on Github. Anyway, I’ve written this to say: articles on this website can be viewed in Markdown by adding .md to the end of a URL.

Building a more evergreen website

I’ve been thinking of expanding in different areas of this website since redesigning back in 2024.

The direction is set around web design craft and seeing the digital garden approach this has allowed me to shift my mindset a bit. I can still do this by having the “/blog”, as I see this as the reason people visit or articles are indexed. But I want to allow myself more freedom with notes.

Expanding beyond blog posts

I want to build out different areas, I have an idea for a “letterforms” section, or rather a more typography focused section. I’d like to use this as a way to explore typography, through pairings and anatomical features.

Type design trends come and go also, but this will be a growing collection. It’ll be “typewolf-esque”, but I want to add my own spin.

My own “gallery” and “collectibles”

I’d like to use this notes section to post design practice, which can fuel ideas for blog posts or to build out a “patterns” section.

I want it to almost be a place where I collect things and be kind of fun. I started this with Collections for a link library. I intend to build upon this further as I've been prototyping some ideas.

Let’s see where I go with this.

TLDR

I needed to figure out why my usage was going up dramatically on Netlify. I didn’t want a complex solution, I wanted to get a sense of the number of visits and where if any additional traffic was coming from with a privacy focus. I didn’t want to pay. All which Simple Analytics meets.

Toggle between options on the website for comparison

What prompted the need for analytics

With the move to Next.js and “serverless” hosting services, there’s always the potential for an increase in your bill.

And at the time my Netlify function invocations suddenly started creeping up and eventually going over the plan limit. On contacting support I found out that there were changes to the way was now calculating function invocations.

I did believe a view counter on posts was enough of an indicator for. I have had this in place for the majority of the lifetime of this website. I use it to sort popular posts on the homepage. And there was nothing out of the ordinary.

But to rule out anything irregular, I figured adding analytics would be useful to see if I was getting traffic from somewhere unexpected.

Searching for a simple privacy based solution

Over the years I’ve used different analytics solutions on this website in aim of avoiding Google Analytics—from Gauges to GoSquared. Eventually, I gave up around the time GDPR stuff set in place.

But to be able to go forward with this it needed to be privacy focused.

Simple Analytics respects the user whilst giving me a good idea of the data

The feature set is simple in comparison to Google Analytics, but this is true of privacy focused services in this space. I didn’t have many requirements other than getting an idea of page views and referrers. This allows me to see how articles are picking up and understanding the source of traffic.

The features which are important to me

• No need for a cookie banner
• Respects user preferences like do not track
• Visitors and page views
• Referring traffic
• Session length
• Bots excluded by default

Other nice free features

• Manage multiple sites (up to 5)
• Visibility of your dashboard
• Email reports
• Alert when the script is missing
• Dark and light mode
• Data import for Google Analytics

Free tier

It has to be mentioned it’s free with a month of history, which is great. I would be happy to know the amount of visitors—everything else is a bonus.

It’s simple to get started

With simple analytics it’s like other services you drop in a script, get confirmation and you’re good to go.

It’s simple to get updates

I want to view my dashboard and not have to dig and click to get an idea what’s happening. As soon as I go into Simple Analytics I can get an overview of how my site is doing.

Managing multiple sites is easy

Again, in addition to getting updates I was working on a website for one of my clients and there was no idea of the traffic levels.

And I went to my dashboard and had a site setup within minutes. It’s an unfair comparison but doing this with Google would take longer to setup.

You can add up to 5 websites as part of the free plan.

Data accuracy appears to be good

By default bots and things are excluded, it mentions that 95% of bots should be blocked. You can also enable advanced robot blocking as a paid user and I would assume that would get closer to the 100%.

My previous experiences here with Google Analytics you have to configure yourself which is a pain. So it’s nice that the majority is covered.

I have trialled Netlify’s analytics as a free trial—which was $9 a month at the time—I wasn’t a fan of it as there was no control over the bots and being able to get any real insight.

You can’t expect total accuracy and no one should with the use of ad blockers.

Email reports

These reports depend on whether you choose between weekly and monthly. These give a quick overview which is easy to understand.

I can see this weeks traffic versus last weeks and whether there are any new referrers or not. This is handy when most of the time you’re not going to want to inspect much further than this.

Respect for users privacy

The core selling point of Simple Analytics is the privacy element. To understand what this is as there is a level of configuration, depending on what you value.

• Respecting adblockers and the ‘do not track’ directive
• No need for cookies and IP addresses aren’t collected
• Ability to set your dashboard to public additional transparency
• Missing script notification

What’s kind of missing

It’s difficult to critique a free independent service, as it doesn’t have to be free. But there’s a few additions I’d like to see, or maybe I’m missing them.

Full referrer

With referrers it doesn’t really cover the location it comes from exactly. You can see the website, but not the referring page. I imagine this may be a privacy restriction, but I am not sure.

Browser version

As creators of websites the browser split and versions are quite handy to understand your audience and level of browser support you offer. Whilst this isn’t as big of an issue as it was, I think it would be nice to see browser versions.

Browser version appears to be exposed within goals, so would be good to see it available within the analytics views.

A few more metrics

It may be missing some of what I would consider simpler metrics, such as exit and bounce.

Finishing thoughts

Overall, the service can meet some of the complex needs someone may require with features like goals, events and the API. You can depend on UTM to also be tracked. Even AI is available to summarise and give an opinion on your traffic.

But for my use case I need an idea of who is visiting and from where. If this suits your needs too then Simple Analytics is for you.

It’s important to aim for the ideal, but not to the detriment of creating something unmaintainable.

Here’s a breakdown

1. Line height is proportional to size
2. Letter spacing or tracking is proportional to size
3. Everything is sentence case
4. Everything is left aligned
5. Use the correct type of dash
6. Use the correct quotes
7. Hanging lists and punctuation
8. Avoid punctuating titles where possible
9. When emphasising, highlighting or linking text watch out for punctuation
10. Use paragraphs to create help rhythm
11. Avoid orphans and widows

Line height is proportional

There’s a few things you can use to determine the line height for your type. It’s a balance between your text looking loose or readable.

• Font size
• Line length
• The proportions of the typeface (eg: baseline, cap height, x height)
• Where you’re using the type
• How often this needs to change
• What control over the change you have

For example, in a hero title you can afford to be precise with your line height but where components vary with the text within; you may find challenges.

Each of the items listed can impact your choice of line height. For larger headings, a line height lower or closer to the font size can be ideal. Whereas paragraphs with a good measure can be around a more comfortable 1.5x the font size.

Line length determines your line height

It’s an important to use the length of your copy to determine your line height. The shorter the line length, the smaller the line height. The longer the line length, the larger the line height.

Toggle between options on the website for comparison

This works for large and small type, as a readable measure still applies. It’s a fine balance because with shorter line lengths it can easily look like there’s too much space between each line and throw off your composition. But for longer line lengths if it’s too tight it will be difficult to read.

Using baseline, cap height and x height

These are the important proportions of a typeface to create balance when creating your text composition. Spacing is applied using the ‘box’ of the type across web and some design tools by default—I’ll get into this and text-box-trim shortly.

But first, let’s look at how you apply spacing. Doing so evenly between items will result in an awkward feel to the space because of how this line height works.

Using a combination of baseline, cap-height and x-height to choose your spacing will help create a better balance.

Understanding the ‘half leading’ of CSS

Half leading[^1] in the browser based world of design means that half of the line height is applied to the top and the bottom of your text box.

The heading’s box is more flush with the text, as there isn’t anything extra to be applied above and below. And this can change the way your spacing looks if not taken into account. The line height of the heading uses 0.9 or 90% and the line height of the paragraph uses 1.5 or 150%.

This used to be more of an issue in the days where you used Photoshop or Illustrator to design. But as Figma is now the industry standard, expectations between designers and developers around spacing are more aligned.

Levelling it out with text-box

As of writing, the method to remove this through text-box trimming is gaining traction in terms of browser support[^2] with Safari and Chrome. It’s not quite ready for day to day, but as more users upgrade this should become more viable.

It’s available in Figma and Sketch albeit both have limited control compared to CSS. And I imagine once the usage aligns, they will dictate how it’s used as they don’t have the same extent.

This will be more of a thing of the past in the future[^3], but I am curious to see how text-box-trim changes how you design.

Letter spacing or tracking is proportional

Like line height, I don’t think you can apply a simple percentage rule to any typeface and call it a day for every design you do.

Toggle between options on the website for comparison

It takes a little tweaking depending on the typeface you’re using. Think of a display typeface versus a text typeface. Using them at varying sizes will require different extremes of tracking. Typefaces with ink traps, for example, tend to be designed for display use and benefit from tighter tracking at large sizes.

Everything is sentence case

Everything, whether that is a heading, button, navigation link or whatever else you can think of. It’s sentence case—no exceptions.

It should go without saying but the only exceptions are names or something important like ’I’.

Sentence case is superior for readability and remembering the system. Is it the first letter or is it a name? Simple. The inconsistency at which people apply title case is enough to oppose it when setting a style guide.

Everything is left aligned

This is something I feel I always contradict myself with. But like any guidance it doesn’t mean there aren’t exceptions—eg: a hero section.

Toggle between options on the website for comparison

Anyway, for the vast majority of your design it should be aligned to the left (or right if your language is right to left). It means your right side of text has a ragged edge which makes it easy to scan. It’s most true for articles.

If your composition works better centrally, it must be a small amount of text. You don’t want to be reading large centralised paragraphs.

Use the correct type of dash

I’d recently heard a pointer for identifying AI copy was the use of the em dash (—). Which feels unfair, but I see it, AI does like to use them. I hope doesn’t lead to a lack of their use—as I like to use them.

I do wonder if this comes from the assumption that the judge of the writing assumes the writer doesn’t know how to use them? Which is where I was going with that. And knowing where to use each dash ensures your writing is typographically correct.

Hyphens (-)

Hyphens are used to join words to create meaning or indicate where a word breaks within a sentence to maintain grammatical correctness.

En-dash (–)

The name comes from the letter ’n’ as the character tends to be the width of the letter ’n’. But its use is important to understand.

It’s used to indicate a range. It could be a range of numbers, dates or start and end of a destination eg: MAN–LON.

Em-dash (—)

The name comes from the letter ‘m’ as the character tends to be the width of the letter ‘m’. And in terms of CSS this is where the em unit comes from too.

The easiest way I remember how to use an em-dash is as more of a substitute for a commas, parentheses or semicolons.

I see it as a way to break up a sentence. The statement you write in between the dashes should make sense on its own and the sentence should make sense on its own if the statement between the dashes is removed.

I could be wrong here, but that is my understanding.

Composing sentences with em-dashes

My stylistic preference, when writing a sentence that contains an em-dash it shouldn’t have spaces before and after it. You can use a   but otherwise no space is preferred.

Design is not just what it looks like and feels like — design is how it works

Design is not just what it looks like and feels like—design is how it works

Keyboard shortcuts

The en and em dash have the following keyboard shortcuts to access.

en-dash

option -

em-dash

option shift -

Use the correct quotes

I’ve put this before in a previous article, but let’s go over it again. There’s straight quotes and curly quotes. Curly quotes are more complementary with your typeface.

The best reference for the usage of quotes smartquotesforsmartpeople.com. The shortcuts are fairly simple, but it’s better if you have something to do it automatically for you as it can be easily missed.

Opening double quote

shift option [

Closing double quote

shift option ]

Opening single quote

option [

Closing single quote

option ]

When dealing with automatic transformation into them. Many apps do this by default. For code, you’ll need to use a library like smartypants.

Hanging lists and punctuation

The aim with hanging punctuation is keeping a clear key line. Overall, it helps keep the rhythm for the eye to follow. Depending on your design tool of choice there is varying levels of control and convenience to do this in your design.

Toggle between options on the website for comparison

Across these examples, you can see the difference hanging the quotes makes to the flow of the writing. I like it as a design detail as it gives an opportunity to add a little flair without being disruptive.

Toggle between options on the website for comparison

With CSS use hanging-punctuation

To achieve it for all the cases you may require it was a challenge, until hanging-punctuation came about.

The browser support is poor as of writing[^4]—but it presents a future with greater control.

Although, I like hanging punctuation for the alignment reason, it can be challenging to always achieve it on smaller screens with the more restricted space.

Avoid punctuating titles where possible

I will try to avoid punctuation in a title because it looks messy. I find it’s difficult to apply with consistency. If one title is punctuated it will stand out more when another isn’t.

Toggle between options on the website for comparison

Watch out for full stops in centralised titles

It’s something that can optically throw off the balance of your heading. It stands out more on mobile due to the narrower width. Well I am kind of reaching, but it does stand out optically.

Toggle between options on the website for comparison

On a separate note, it’s similar to hanging punctuation. Where you have a central title with a full stop at the end the final line will feel off optically.

When emphasising, highlighting or linking text watch out for punctuation

This is a small detail, but the vast majority of the time and more so with linking you shouldn’t include the full stop.

Use paragraphs to create help rhythm

When some things like headings, lists, buttons follow a heading; it can create a sense of awkwardness in an article or design.

Toggle between options on the website for comparison

Why? For me it’s down to the presence of the thing which follows the heading. A heading following a heading may not feel right. A button following a heading will likely feel out of place due to the balance between the elements.

The spacing flows much better when there is a paragraph to break it up. Your rhythm suffers when there isn’t.

Sometimes you can’t avoid it and it shouldn’t be at the expense of unnatural writing or forcing it but it’s a conscious effort I make.

Avoid widows and orphans

Widows can create some awkwardness in your design. A widow is a single word or short line of text. So where you have greater control over the flow of text in a component you can try to ensure it doesn’t happen.

CSS text-wrap can handle it

Before text-wrap it would be generally pointless to try cover every possible case of a widow in your design. But now with CSS you have two options to control text wrapping.

text-wrap: balance

balance does exactly that it aims to achieve the most balanced layout. Which is ideal for your headings and this works well the majority of the time.

text-wrap: pretty

pretty is a bit of a arbitrary word to decipher what happens, but it ensures that there isn’t one word left on it’s own. It’s for the use cases where balance would be excessive—like lengthier paragraphs.

There is also a performance aspect to it. If you think the browser has to calculate and reflow the text to balance it correctly.

Before text-wrap this is something that would be less practical to chase in a lot of situations and you’d have had to approach it manually. A method of doing so is still valuable to know.

Manual balancing

Methods for manually balancing titles or keeping word groups together is worth knowing. Sometimes you might find text-wrap doesn’t quite balance the title the way you want or you need to break a long word.

Don’t reach for <br/>. Use <wbr/> or  .

<h1>Fundamentals of visual&nbsp;design</h1>
<p>Underlying principles and elements<wbr/>that guide effective and visually appealing design.</p>

Using a   (non-breaking space) will ensure you can keep word pairs together and using <wbr/> will only insert a <br/> when necessary.

Avoiding widows

A widow is where a single line of a paragraph ends up at the top of a new column or page, separated from the rest of its text. In print, this is a well-known problem. On the web it’s less common because we rarely work with columns or paged layouts.

But if you use CSS columns or break-inside for content layout, it’s easy to come up against them. That lone line draws the eye to an awkward gap rather than the content. It breaks the reading flow. You can use break-inside: avoid on elements you don’t want split across columns, but that can create its own spacing issues. The honest answer is that if you’re using CSS columns for long-form text, you’ll likely need to test and adjust manually.​​​​​​​​​​​​​​​​## Ending thoughts Taking these rules into account, a balanced approach to typesetting improves both readability and visual appeal. Paying attention to factors like line height, letter spacing, and alignment makes things more intentional and works within the constraints of the chosen typeface.

Keeping in mind the practicality of doing these things ensures your design is maintainable and not introducing more work. However, I have written similarly before with visual design tips and these posts seem to go down well.

[^1]: The Thing With Leading in CSS [^2]: Can I use text-box [^3]: CSS text-box-trim [^4]: Can I use hanging-punctuation

For this example masonry isn’t required — we have a known number of items with predetermined sizes, so CSS grid handles it well. That said, masonry would shine if you had a variable number of items or unpredictable content heights — it’s something I would like to see part of CSS in whatever way it ends up being.

I make the assumption that you’re comfortable setting up Tailwind for your project

The bento design

The design showcases a rough idea of an app I wish existed. Each section displays a different feature with larger sections having an illustration of the feature.

Considerations

• Content spans different column widths
• Icon plus title style in unpredictable width containers
• Rows with equal height content and imagery
• Images will need to retain or change aspect ratio
• Image masks will need to change with different image crops

Project files

The design is available through Figma’s community and the code is available through Github. There’s two layout options in both.

HTML structure

First, it’s necessary to get the structure of the bento grid. Then it makes sense to cover the rest of the layout and visual style with Tailwind.

Create a container

Everything needs to be contained within a <div> with this you’ll apply the grid styles to it.

<section>
  <header>
    <h2>Publish from anywhere with your frontmatter blog</h2>
    <p>
      Why should you be left out of a cross device writing experience because
      you’re using a static site? Bureau takes away the pain of manually moving
      posts to your codebase and gives you the writing experience you need.
    </p>
  </header>
  <div class="bento-container">
    <!-- sections here -->
  </div>
</section>

Basic structure for each section

As the design features sections with different sizing and visual weight through use of imagery your markup for each will differ slightly.

<section class="bento-section">
  <div class="bento-body">
    <h3>
      <span aria-hidden="true"><svg width="24" height="24"><use href="#automated"></svg></span>
      Automated versioning with Git
    </h3>
    <p>When you create a new post Bureau automatically creates a branch—keep working on drafts as long as you need. Open a pull request when you’re done and find yourself publishing more than ever.</p>
  </div>
  <div class="bento-image-container">
    <img srcset="../images/git-versioning.png 1x, ../images/git-versioning@2x.png 2x" width="468" height="376" class="bento-image">
  </div>
</section>

Grouping the text based content together and applying a container around the image allows you greater control later when adding style and layout.

Putting all the HTML together

Overall for this design there’s 6 sections. Some sections will have an image others without. Some will span more columns and some will span more rows. For layouts like this tailwind is perfect to manage these variations.

If you’re working in an environment that allows for a components, each section could be a single component with some properties for customisation.

<section class="features">
  <header class="features-header">
    <h2 class="features-title">Publish from anywhere with your frontmatter blog</h2>
    <p class="features-description">Why should you be left out of a cross device writing experience because you’re using a static site? Bureau takes away the pain of manually moving posts to your codebase and gives you the writing experience you need.</p>
  </header>

  <div class="bento-container">
    <section class="bento-section bento-section-primary">
      <div class="bento-body">
        <h3 class="bento-title">
          <span aria-hidden="true"><svg width="24" height="24"><use href="#automated"></svg></span>
          Automated versioning with Git
        </h3>
        <p class="bento-description">When you create a new post Bureau automatically creates a branch—keep working on drafts as long as you need. Open a pull request when you’re done and find yourself publishing more than ever.</p>
      </div>
      <div class="bento-image-container">
        <img srcset="images/git-versioning.png 1x, images/git-versioning@2x.png 2x" width="468" height="376">
      </div>
    </section>
    <section class="bento-section bento-section-primary">
      <div class="bento-body">
        <h3 class="bento-title">
          <span aria-hidden="true"><svg width="24" height="24"><use href="#autocomplete"></svg></span>
          Component autocomplete
        </h3>
        <p class="bento-description">Bureau finds MDX components and autocompletes them for you—taking the best bits of a code editor combined with a beautiful writing experience. Start writing a component for autocomplete or use the menu.</p>
      </div>
      <div class="bento-image-container">
        <img srcset="images/component-autocomplete.png 1x, images/component-autocomplete@2x.png 2x" width="468" height="376">
      </div>
    </section>
    <section class="bento-section bento-section-secondary">
      <div class="bento-body">
        <h3 class="bento-title">
          <span aria-hidden="true"><svg width="24" height="24"><use href="#markdown"></svg></span>
          Markdown as standard
        </h3>
        <p class="bento-description">Bureau provides a first-class markdown editing experience, by using the same library as you.</p>
      </div>
      <div class="bento-image-container">
        <img srcset="images/markdown-menu.png 1x, images/markdown-menu@2x.png 2x" width="232" height="342">
      </div>
    </section>
    <section class="bento-section bento-section-primary">
      <div class="bento-body">
        <h3 class="bento-title">
          <span aria-hidden="true"><svg width="24" height="24"><use href="#contextual_token"></svg></span>
          Frontmatter templates
        </h3>
        <p class="bento-description">It’s pretty tedious starting a new frontmatter post, isn’t it? The editor works with your frontmatter and will generate timestamps, ID’s and more. All with a simple setup—we’ll find your config or generate one with Bureau.</p>
      </div>
      <div class="bento-image-container">
        <img srcset="images/frontmatter-templates.png 1x, images/frontmatter-templates@2x.png 2x" width="468" height="376">
      </div>
    </section>
    <section class="bento-section bento-section-tertiary">
      <div class="bento-body">
        <h3 class="bento-title">
          <span aria-hidden="true"><svg width="24" height="24"><use href="#typed"></svg></span>
          Typed content
        </h3>
        <p class="bento-description">Bureau will look to see if your frontmatter is typed and if not you can let Bureau know.</p>
      </div>
    </section>
    <section class="bento-section bento-section-tertiary">
      <div class="bento-body">
        <h3 class="bento-title">
          <span aria-hidden="true"><svg width="24" height="24"><use href="#automated"></svg></span>Works with your code
        </h3>
        <p class="bento-description">Bureau doesn’t care about the framework you use. Add your Git repository or start a new one and Bureau will look after your content. This is the publishing experience for static websites.</p>
      </div>
    </section>
  </div>
</section>

On to the grid’s CSS

The CSS required to create a bento grid is surprisingly minimal. You could also use subgrid for your columns, if your grid is defined on a parent element. It’s worth noting that subgrid would be particularly useful for aligning the internal content of each card — icon, title, and description — consistently across cards without extra CSS. That’s a worthwhile next step if you’re building this into a component system.

.bento-container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 1rem;
}

The important bit of CSS here is grid-auto-flow aside from defining the 12 column grid itself. This tells the grid algorithm to fill in gaps where possible with smaller grid items.

/* optional */
@media (min-width: 1280px) {
  .bento-container {
    grid-auto-rows: 1fr;
  }
}

Another important part to the design is grid-auto-rows. As this affects the two smaller square items they need to occupy an equal amount of rows. Only applying this to larger screens ensures it doesn’t create excess space on smaller screen layouts. This is a deliberate design choice — achieving a true bento style layout on smaller screens is difficult with the space constraint, so rows size to their content on mobile and are forced to equal height on desktop where the grid has room to breathe.

When a grid is overlayed onto the design you can see what to aim for. Each section aligns with a row and each row is of an equal height.

Grid sections CSS

This is a matter of setting how many columns and rows you wish for each section to span. As part of the design there are 3 different sizes for sections.

.bento-section-primary {
  grid-column: span 6;
  grid-row: span 4;
}

.bento-section-secondary {
  grid-column: span 3;
  grid-row: span 4;
}

.bento-section-tertiary {
  grid-column: span 3;
  grid-row: span 2;
}

What this looks like

Without the content you’re left with a shell that matches the initial design.

Tailwind setup

For this I have used Tailwind 4, which changes from using tailwind.config.js to using CSS for most configuration.

In this CSS file we’ll setup the type as well, for which I’m using Inter Variable.

@font-face {
  font-family: 'Inter';
  src: url('/fonts/InterVariable.woff2') format('woff2');
  font-display: swap;
  font-weight: 100 900;
}

@theme {
  /* color */
  /* general */
  --color-zircon: rgb(154 205 203);
  --color-cream: oklch(97.3% 0.086 120.3);
  --color-bittersweet: rgb(254 95 85);
  --color-lavender: rgb(204 201 220);

  /* gunmetal */
  --color-gunmetal-900: rgb(24 36 37);
  --color-gunmetal-850: rgb(32 48 50);
  --color-gunmetal-800: rgb(40 60 62);
  --color-gunmetal-750: rgb(48 72 75);
  --color-gunmetal-700: rgb(43 78 81);
  --color-gunmetal-650: rgb(64 96 100);
  --color-gunmetal-600: rgb(72 108 112);
  --color-gunmetal-550: rgb(80 120 124);
  --color-gunmetal-500: rgb(88 132 137);
  --color-gunmetal-450: rgb(95 144 149);

  /* mask */
  --image-mask-bottom: radial-gradient(
    125% 85% at 50% 15%,
    #000 65%,
    transparent 100%
  );
  --image-mask-top: radial-gradient(
    97.5% 80% at 50% 80%,
    #000 65%,
    transparent 100%
  );
}

:root {
  font-family: 'Inter';
  font-feature-settings: 'dlig' on, 'ss03' on;
}

If you’re looking for a standard CSS application you can take the variables here too or the compiled CSS.

Applying layout

You can get the complete markup on Github—there’s a lot to get through but I will run through what’s needed with Tailwind to create this layout.

<section class="w-full px-4 md:px-14 py-16 flex flex-col items-center gap-10">
  <header class="flex flex-col gap-4 items-center max-w-[612px]">
    <h2
      class="text-cream text-center text-balance text-4xl md:text-[3.5rem] leading-[.9285714286] font-medium tracking-[-.03em] m-0 optical-size-32"
    >
      Publish from anywhere with your frontmatter blog
    </h2>
    <p class="text-white text-center m-0 max-w-prose">
      Why should you be left out of a cross device writing experience because
      you’re using a static site? Bureau takes away the pain of manually moving
      posts to your codebase and gives you the writing experience you need.
    </p>
  </header>

  <div
    class="w-full max-w-[1328px] grid grid-cols-12 grid-flow-dense xl:auto-rows-fr gap-4"
  >
    <!-- sections here -->
  </div>
</section>

What was bento-container earlier now contains all of those same styles within. In addition to setting a max-width to the container.

Section breakdown

Now to apply all of the style and additional layout adjustments. Highlighted are the lines which affect layout.

<section class="@container/section flex flex-col col-span-full md:col-span-6 xl:row-span-4 gap-2 p-2 bg-gunmetal-850 ring ring-gunmetal-750 rounded-2xl">
  <div class="p-6 flex flex-1 flex-col gap-4">
    <h3 class="text-cream font-semibold flex flex-col @[17.5rem]:flex-row @[17.5rem]:items-center gap-4 [font-variation-settings:'opsz'_32]">
      <span class="bg-gunmetal-750 ring ring-gunmetal-650 w-10 h-10 flex flex-[0_0_auto] items-center justify-center rounded-full" aria-hidden="true"><svg class="fill-cream" width="24" height="24"><use href="#automated"></svg></span> Automated versioning with Git
    </h3>
    <p class="text-white text-pretty max-w-prose">When you create a new post Bureau automatically creates a branch—keep working on drafts as long as you need. Open a pull request when you’re done and find yourself publishing more than ever.</p>
  </div>
  <div class="flex justify-center items-end rounded-lg bg-gunmetal-800 ring ring-gunmetal-750 overflow-hidden aspect-100/66 md:aspect-square xl:aspect-640/376">
    <img srcset="images/git-versioning.png 1x, images/git-versioning@2x.png 2x" class="object-none object-[center_1rem] w-full h-full mask-(--image-mask-bottom)" width="468" height="376">
  </div>
</section>

Setup the @container

There’s adjustments that need to be made based on the containers size for images and titles which will be covered shortly. You can scope this container as well with a container-name or use Tailwind’s / syntax.

<section
  class="@container/section flex flex-col col-span-full md:col-span-6 xl:row-span-4 gap-2 p-2 bg-gunmetal-850 ring ring-gunmetal-750 rounded-2xl"
></section>

Here the container has further adjustment on column width throughout the standard Tailwind breakpoints.

Spacing is another crucial element. It’s applied to the outer edge of the container and between the content and image.

Ensure content fills the available space

On line 2 you’re using flex-1 or flex: 1 1 0% to have the text content to expand fill any remaining space. It ensures when content differs in height images will be in alignment.

<div class="p-6 flex flex-1 flex-col gap-4"></div>

This could be seen as optional or applied to the image container. It depends on your preference.

Section title

Within each of titles there is an a <span> with an <svg> referencing a sprite icon with the fill colour applied as a class.

<h3 class="text-cream font-semibold flex flex-col @[17.5rem]:flex-row @[17.5rem]:items-center gap-4 [font-variation-settings:'opsz'_32]">
  <span class="bg-gunmetal-750 ring ring-gunmetal-650 w-10 h-10 flex flex-[0_0_auto] items-center justify-center rounded-full" aria-hidden="true"><svg class="fill-cream" width="24" height="24"><use href="#automated"></svg></span> Automated versioning with Git
</h3>

Each title will switch its layout to row when the space available is 17.5rem or greater. You could do this automatically with flex-wrap—but I have opted for greater control here so that all titles will wrap at this point.

Art directed images

Lines 8–10 are ensuring each image is tailored for the container it’s in. Each image uses object-none or object-fit: none to ensure the image doesn’t scale down.

<div
  class="flex rounded-lg bg-gunmetal-800 ring ring-gunmetal-750 overflow-hidden aspect-340/376 @md:aspect-640/376"
>
  <img
    srcset="images/git-versioning.png 1x, images/git-versioning@2x.png 2x"
    class="object-none object-[1rem_1rem] @md:object-[center_1rem] w-full h-full mask-(--image-mask-bottom)"
    width="468"
    height="376"
  />
</div>

Bear with me, this may seem a little backwards from what you may be used to with responsive design. If these images scale you begin to lose detail—so the aim with object-fit is to keep it. And by using object-position you can align the image more favourably.

And by setting an aspect-ratio on the container it allows more precision for the image size. Managing this with @container queries applies the aspect-ratio in a better way than @media queries.

This does differ for each image. The alignment of each image does change. A freedom we’re allowed in this demo at least.

Finishing up

Well this post is longer than I had anticipated—hopefully it’s clear enough to follow. There’s a lot to go through to get through with the slight differences between sections—and that’s why I enjoy using Tailwind. This could be easily created with components in mind, whether that’s using a React framework or Web Components.

I’ve also not covered too much in terms of implementing the visual design here—again due to the length of the post.

Why rebuild the website?

ExpressionEngine was no longer cutting it for me. I had reached a point where things were breaking and I couldn’t replace those things in ExpressionEngine.

The lack of community around ExpressionEngine made things really difficult for me. I rely on a community that shares how to do things or plugins for getting by with a lot of my development work. So even simpler things like RSS and getting structured data to output were no longer working.

I wanted a better deploy system

This was another important thing, being able to deploy and have rollbacks, preview branches, etc. for convenience. Which is where moving to a host like Netlify was ideal. I had given this a try with my portfolio. The ease of it all was great.

I’m wary of cost here, as it can easily escalate, but for now it’s in line with what I was paying previously. I’ve also seen a lot around Cloudflare being a good alternative and this is something I may explore.

Being able to use MDX

If you’re unfamiliar with MDX it allows you to use JSX in your markdown files. So with it you’re able to use components within posts and can make them much more interactive.

For where I use code demos this is really useful. I can keep the code in here for the most part without need for an external service. I intend to do this with simpler examples as I will have greater control over the integration into the article.

It was time to go static

So round mid-2021 (see, it’s taken a while to write about), I decided it was time to get it over with if I ever planned to redesign the website. And I decided to go the static route—if you can call Next.js a static site generator.

Theres always been a lot of hype around static site generators, from the original popularity of Jekyll. And I feel I had always avoided it due to having to go all in on the static side, but that’s not the case anymore.

I was torn between Gatsby and Next.

I had built my portfolio in Gatsby a year earlier, so I felt ok with the React world. Gatsby was a strong choice, I liked the way GraphQL worked to a degree and the community around it seemed to be thriving at the time.

Choosing Next.js

However, I went for Next.js because on reading it seemed it was better for sites with more pages, such as a blog.

Other than that I didn’t think too much of it. But I am so glad I didn’t pick Gatsby. It’s turned out to be a wise decision as Gatsby has lost all of that momentum.

But importantly my content is much more portable and there’s a great community around Next.js and React in general. So if it all changes and we’re all building sites on Astro or something else, I know the change won’t be as painful.

Before the rebuild

I had 2 major tasks before I could start rebuilding, future self stuff. Changing the URL structure and exporting all post files from a database in to text files.

Thankfully one was far easier than the others.

Preparing a URL structure change

One of the things I felt could would be a problem was the current URL structure surrounding blog posts. And I didn’t want to have that as a problem on top of moving to Next.js and a new hosting platform.

The structure was /blog/entry/[slug] and was moving to /blog/[slug].

I was aware this would break links from other websites, for which I setup redirects. And knew by the time I’d finally finish redeveloping the website on Next all the issues will have been ironed out.

Eventually, on the move over to Netlify it was easy to switch up and knowing that was done was something I thanked my past self for doing.

All it takes is a few lines of code in netlify.toml and using :splat

[[redirects]]
  from = "/blog/entry/*"
  to = "/blog/:splat"
  status = 301
  force = true

Manually exporting posts to a file

I knew there was a tedious task ahead getting each post into markdown files. This was not straightforward and had me debate whether it was the right thing to do. I persevered and I ended up creating an export template in ExpressionEngine which allowed me to format everything as plain markdown with frontmatter.

---
title:
date:
lastmod:
summary:
metadesc:
theme: '#fff7e0'
tags: ['Design']
categories: ['Design', 'Visual design']
images:
large:
medium:
ogImage: '/opengraph-image.png'
status: 'open'
id:
fileroot:
---

I went overboard with this as I was unsure what I would and wouldn’t need. Which was better than figuring it out later and having to edit ~140 files again.

I went as far as using fileroot to avoid naming it as slug, slugAsParams or url or something likely to conflict with anything. Separate summary and metadesc. A lot of the stuff I anticipated needing, I didn’t. I’ll eventually clean this up.

By far the most tedious part of this job.

Finally… the build

Everything beyond the point of code was a much nicer in terms of effort required. I did have to compromise in areas, I didn’t want this to take any longer as I wanted to redesign the website. On top of having to get to grips with Next and how to build a blog website.

Using a starter

I found an excellent Next.js starter which covered the unfamiliar parts for me. It set me off immediately with Tailwind, search, MDX, newsletter handling and publishing script.

Making components and keeping CSS as is

I was able to move all CSS over as a global import and continue with Sass as this had always been.

I begun to break down the previous HTML and begin to create components. A lot of stuff was in partials previously in ExpressionEngine but it needed converting to React based components. This way of working is something I have desired for a while.

It was all ready to use and convert to a combination of CSS modules and Tailwind. For me, I like the way the components are managed, you keep all the associated style and behaviour closer together.

Failing to sort posts

The painful parts were sorting the posts on the homepage by view count, I couldn’t figure out a solution to this. I was able to track them without too much trouble following an article by Corey O’Donnell. I used Supabase and it was linking the data together that wouldn’t happen for me.

Fortunately for version 8, I was able to get this working.

Setting up the newsletter

The newsletter subscription was challenging too. I did manage to figure it out and then it broke afterwards around 8 months later and took me a while to realise. Far better developers than I would probably say you need tests or something. Which is something I would like to explore.

But this is something I felt a real achievement in doing the overall behaviour of this is much more seamless and nicer. No third party JavaScript to insert anything. Just post from the page and update the state.

Compromising on the search overlay

I had to compromise on the search, I wasn’t able to get it to work as an overlay anymore. However, I was able to get it to search through the posts and show thanks to the starter.

It offered more of a live search experience which is a win. Not many use search, it worked and I wasn’t willing to put more time in to delay—so I accepted the tradeoff.

Database to static complete

But that’s my experience of moving from a database CMS to React framework. I find a lot of the additional conveniences a beneficial for developing the website and fixing small bugs here and there.

Goals

There’s always goals when you set out to redesign outside of modernising the design and working towards something fresh.

• A new colour palette
• A richer reading experience with MDX
• Image flexibility
• Use Next.js app router
• Embrace Tailwind more

Design

The design itself is a modernised version of what came before it. When I design something for myself or part of my own projects, I want to utilise the skills I have. It’s what makes it enjoyable.

I have evolved the design through the typography, illustration, colour and layout.

Typography

I’ve opted to move to two sans serif typefaces. They’re both grotesque’s, so they do complement each other.

I feel both are within the trends of where type is at currently. I’m drawn to type trends, the choice does carry how modern a design feels. The last version I used a typeface that was inline with the Circular/Product Sans popularity of the time.

I chose Roc Grotesk for its strong presence, which I use for headings. I really like the proportions and the variety in widths and weights that come in a variable font.

Whereas I’m using Elza for body copy, which is a better choice for reading, for a few reasons.

• The slightly larger x-height
• More open characters
• Characters like ‘a’, ‘e’ and ‘r’ feel better for reading

Colour

The colour palette is familiar but renewed. My aim was to pair back the colour and really reserve that for post images and the occasional flourish. I achieve that through introducing more neutral colours and complementary colours that have a stronger contrast (eg: red vs green).

I have made some sensible decisions with the colour palette—but I know myself I will likely change this over time. Overall, I want the website to less stark, less washed out and have more harmony.

Monochrome or colour?

I struggled with the amount of colour used throughout the website. It’s probably to do with how much I’ve looked at this design. But I’d like to show what the homepage hero would look like between the monochrome and colour variations.

Slight structural changes

Overall, throughout the website remains similar. I want to try divide the design and code categories and everything else into the archive.

Design iteration

It took a long time I felt for me to reach a point I was happy with the design.

I had a couple of clear directions and had I not decided to throw everything out I think this version would have been released much sooner.

I felt confident in this direction for a while, but the more I looked at it the more I wasn’t happy with it. There was something I couldn’t correct with this and I also feel it would look dated quite quickly.

I liked where I was going with the navigation. And I liked the divided popular in sections, the numbers and chart ranking feel gave something different.

The one thing I feel with the design I have now, is it will hold up better over time. There’s loads of ideas I had and how I wanted to structure the homepage, but they were a bit too ambitious for the time being.

Early mobile ideas

Mobile was where I kicked off the design, I wanted to not leave it as an afterthought even though it’s a small portion of the traffic. It felt easier to approach a redesign from mobile as well.

You can see within these examples some different directions I was thinking of heading.

Rebuilding and moving to Next.js app router

As part of the last version I decided to move to Next.js. This was a learning curve and using the pages router.

However, for this redesign that was flipped on its head with app router. I was expecting to reuse some of the more challenging elements of initially moving to Next.js.

I did try to transition to app router from pages but for me it didn’t work and as Vercel are clear this is the way forward I decided to do it from scratch.

View counter

I spent an inordinate amount of time on the view tracking—JavaScript development is not my best skill 😅. I referenced a lot of Lee Robinson’s code as he had one in place, but there was a lot of figuring out required as I was using Supabase over Planetscale.

But this was much easier to setup view count sorting on the homepage which I wasn’t able to achieve previously. Swings and roundabouts.

Pagination

I felt pagination was surprisingly painful to do. I feel there’s some bugs in it but it seems to do the job. I referred to timlrx’s theme for this and customised to my needs.

Contentlayer

I discovered Contentlayer, which I really like from a publishing aspect. It adds a lot of flexibility to how you can get your content as there is a JSON representation of it.

You can also make your frontmatter typesafe, which is a nice benefit as I can force myself to make sure all needed frontmatter is present.

Otherwise I’m not bothered about types and typescript, it’s too much for me.

Contentlayer appears it is no longer being maintained. I intend to replace it with velite as this looks like the closest thing to it.

Better code highlighting

Another place I had a load of faff with getting builds to work on Netlify. But I think in the end this was down to the node version I was using on Netlify even though I thought I was on a more up to date version.

I was resigned to using rehype-pretty-code but managed to get it all working with rehype-prism-plus. Which I was able to get a decent theme going, pretty code is far too limited in code highlighting.

And personally I find it easier to read when your brackets in HTML and JSX are the same colour as the tag, which wasn't achievable without using Prism.

Using border-image for nicer borders

The standard borders available in CSS aren’t desirable visually. You have dotted, dashed and not a lot else when it comes to controlling border style.

That’s where border-image comes to the rescue. Throughout the homepage and header sections of most pages I use a more visually pleasing border.

In terms of code it’s fairly simply but I don’t think border-image is easy to use. The border will break at certain screen widths but for the most part it’s fine.

Container queries to create large and medium sized cards

This has been a great opportunity to learn how to use container queries to build some things on this website.

It took some getting used to, as it’s no longer tied to the window size. I found it’s more getting over your years of being used to using media queries than a bit of new syntax.

It’s quite pleasing to have one component serve two purposes. If you look at the homepage, there are large cards with images and smaller cards without images. These also differ with font size and spacing.

Grid and sub-grid to manage layout

At the time of building this website, subgrid had become available, this means I can define the whole layout for the website from the <body>. Which makes it quite straightforward to orchestrate your layouts throughout breakpoints.

grid-template-columns:
  [margin-start]
  var(--grid-margin)
  [container-start]
  repeat(2, minmax(0, 1fr))
  [content-start]
  repeat(2, minmax(0, 1fr))
  [prose-start]
  repeat(8, minmax(0, 1fr))
  [prose-end]
  repeat(2, minmax(0, 1fr))
  [content-end]
  repeat(2, minmax(0, 1fr))
  [container-end]
  var(--grid-margin)
  [margin-end];

I have defined a few layouts, but the one here is for larger screen layouts. I have a few points where I can decide where to place content.

I still have some things to learn with grid, but I’m fairly confident with it.

What’s next?

There’s things I decided not to include for launch and spend more time figuring out how I want to approach them. I’ve a bit of learning to do for some of them, but they are…

• Categorisation of posts & article cleanup
• Publish new articles and find some rhythm of what I write about
• Move from Contentlayer to Velite
• Bug fixes and responsive improvements for less loved pages (eg: contact & about)
• Links archive
• Notes section for updates and emerging articles
• Different homepage structure as I add more content
• Post improvements, better layout, content styling, etc.
• Search

I’ve wanted an opportunity to look at this particular style of type—as I’ve worked on my portfolio and I consider a redesign for this website. Within this post I’m going to detail the things to look for and a bunch of typefaces.

What details are you looking for?

The majority in this post will be ‘ink trap’ by definition, but some may use similarly exaggerated forms. As you can see in the example, Averta has a steady tapering towards the joins. Whereas, Whyte has angular notches, which give a sense of the individual letters having part missing.

Looking at another less apparent example, with Degular Display the tapering happens far quicker to create a stronger contrast. Unlike Whyte it isn’t as like a ridge, creating a different feel.

What’s the purpose of an ink trap

Ink traps retain legibility at smaller sizes in print. They’re carefully designed parts of type, which disappear when printed—due to the ink bleeding and filling in the gaps.

While it may display a certain way on screen, the appearance will change when printed. If you pay attention to printed material and notice the type isn’t as crisp as it could be, this could be down to the choice of typeface.

What’s this got to do with websites?

It can serve the same purpose on the web. Looking at the examples at smaller type sizes, ink traps help by opening spaces in the letters further. This can make legibility better at those sizes.

Fonts

Let’s get into the fonts that have this feature.

Whyte Inktrap

In terms of Ink trap fonts, I feel like Whyte could be the ‘Circular’ of this style. The Figma website was the first time I’d come across Whyte and I’ve seen it used a few times elsewhere.

It feels futuristic, because of its curves on the ascenders—which goes against the feeling of a traditional grotesque. It surprised me how it remains legible at small sizes—even in the heavier weights—despite the ink traps being as prominent as they are.

Degular

Available on Adobe Fonts and one of my favourite typefaces I’ve come across recently—I had to use it in my portfolio.

The first typeface by OH no Type Co featured in this article. Which comes in three optical sizes, each with ink traps that lead to wonderfully exaggerated curves at the joins.

Retina

It’s important to note the microplus version is where you see the ink traps.

In smallish sized lighter weights, it adds extra character. In larger sized heavier weights it feels overdone—which makes it have a much more limited use case.

GT Flexa

An incredibly flexible and versatile typeface—to be fair it’s in the name—as the website will demonstrate. You could create endless compositions, I wish I could afford the full thing.

I enjoy the wide crossbars on the lowercase ‘t’ and ear of the lowercase ‘r’. They add a uniqueness.

Neue Machina

A typeface which has a lot of character, it has deep ridges at the joins for a real exaggerated style.

It has an almost monospace feel with the lowercase ‘a’, ‘i’ and ‘l’ which gives it a quite futuristic feel. But combining abrupt curves with lovely geometry, it feels unique but familiar.

Juane Grande

A typeface that throws out a lot of conventions. The bolder weights are particularly nice, the letters push the limits of legibility.

It’s as if this is what the Didone of the sans serif world would look like—with the characteristic contrast between thick and thin lines.

Halyard (text & micro)

At first it looks like a pretty plain sans serif, but on closer inspection at the micro variation, it feels delicate and legible.

The micro italic really embraces the ink traps and almost as if the letterforms were written. The italic lowercase ‘h’ and ‘p’ in the light weight are excellent.

On a similar level, the text version is slightly more subtle, but just as nice.

Albeit each of these have different intended use cases. I’d definitely use the micro italic with some tighter letter spacing for more decorative uses.

Fraktion Sans

Another option from Pangram Pangram, with plenty of weights and styles, it’s an option which is more on the compact side.

Like many of the choices in this article, it has an angular style about it. The lowercase ‘a’ is identical (or almost) to its monospace counterpart—which sets this typeface apart.

Uxum Grotesque

Uxum features a more subtle approach to ink traps. They have the depth of other typefaces, but are much finer. It creates a nice harmony and allows for unique characteristics—which sets itself apart from your Circular and FF Mark styles.

Polysans

Polysans is similar to Uxum, in the sense it has much finer ink traps. It has a Helvetica feel about it, especially with lighter weights. The difference being it comes with proper italics.

Covik Sans / Mono

The final OH no Type Co. option and it’s a push to include this as it doesn’t feature ink traps. It has a contrast to suggest, which is why I want to include it. It’s different to a lot of the type in this article too.

F37 Jan

If you’re looking for geometric type, then look no further than F37 Jan. It’s inspired by Matthew Carter’s Bell Centennial and Jan Tschichold’s Untitled Sans Serif—which makes for a great blend of styles.

The one thing I’d like to see is heavier weights as part of the set.

Tomato Grotesk

A typeface with a few unique properties of its own along with the ink traps. The double storey ‘a’ and lowercase ‘k’ have a unique style to them compared to others in this post.

Google Fonts

The availability of ink trap typefaces on Google Fonts is pretty good. There are a fair few options that compete with premium ink trap typefaces found within this article.

Bricolage Grotesque

I’ve seen this used quite a lot, it’s very popular lately and has the strongest ink trap personality of all the Google Font examples. It has a similarity with Whyte Inktrap in terms of the prominent ink traps. But otherwise it has quite a fun look and feel.

Spline Sans

Spline Sans Mono

Anek

Anek is a variable typeface, there's a good variety of weights and styles. It feels like a fairly balanced typeface with quite a large x-height that would be good for either headings or paragraphs.

Anybody

A subtle example again particularly in lighter weights. I like the uniqiue ascenders on the lowercase 'y'.

DM Sans

DM Sans is another example that’s pushing it, but it has a subtle tapering at the joins. I like the flatness of the double storey 'a'.

Pathway Extreme

A style that’s grown on me

As I reflect on it, it’s a nice response to the “plainer” sans serif typefaces that have dominated since 2015 give or take. It gives us more creative options for our designs without hindering legibility and readability of some of the more experimental typefaces out there.

Nonetheless, it’s an interesting use of a design detail that otherwise fulfilled a purpose. It’s grown on me and I feel it’s going to gain more popularity than it already has.

A very brief overview of tachyons/atomic CSS

If you’re new to this style of writing CSS, the principle is generally to do one thing and do it well, and across multiple breakpoints.

In the example of font sizing, we’ll end up with CSS which looks somewhat like the following:

.f1 {
  font-size: 36px; }

/* and so on... */

.f6 {
  font-size: 16px; }

@media (min-width: 480px) {
  .f1-a {
    font-size: 36px; }

  /* and so on... */

  .f6-a {
    font-size: 16px; } }

@media (min-width: 960px) {
  .f1-d {
    font-size: 36px; }

  /* and so on... */

  .f6-d {
    font-size: 16px; } } }

You have multiple class names for applying one property across a set of media queries. The class names inside the media queries have a suffix which identifies them eg: -a. You may have more font sizes, you may have more breakpoints. The idea is speed, less repetitive writing of the same CSS and more consistency.

<h1 class="f3 f2-a f1-d">This is my heading</h1>
<p class="f6 f5-d">This is my paragraph of text, lorem ipsum dolor sit.</p>

There’s something nice about this approach to your HTML:

1. Knowing which font size is applied at which media query
2. Knowing changes won’t affect anywhere else
3. Being able to trial sizes quickly
4. Knowing the font sizes are always part of your type scale

Now, let’s get into the setup with Sass.

To begin get your font sizes together

Depending on the stage you find yourself at, be it the site is built, ready to build or in the design phase. The first step is to gather all the font sizes you currently have. This can also help identify where you may have too many.

Add your font sizes to variables

Next, add each of those font sizes to variables. They will be used within the next steps, it also helps keep things reusable.

$f1: 36px;
$f2: 30px;
$f3: 24px;
$f4: 21px;
$f5: 18px;
$f6: 16px;

The naming of each variable isn’t make or break. For me f1 through f6 works well. The similarity is shared with h1 through h6. h1 is the larger and h6 is the smaller. Also, it isn’t necessarily tied to being the ‘h’ of heading.

Set up the initial font sizes

Next, you need to choose a naming convention and write the CSS for your font sizes. These will be used as the lowest breakpoint, or when you don’t need the font size to change across the board.

.f1 {
  font-size: $f1;
}
.f2 {
  font-size: $f2;
}
.f3 {
  font-size: $f3;
}
.f4 {
  font-size: $f4;
}
.f5 {
  font-size: $f5;
}
.f6 {
  font-size: $f6;
}

Setting up a breakpoint map

Now you need to decide how many breakpoints you want each font size to be applied at. I’m using three in the following example, but it’s entirely up to what your design requires.

$a: 480px;
$b: 600px;
$c: 960px;

Define variables for your widths, like your font sizes. And again, naming isn’t hugely important, but I always recommend something short and memorable.

$breakpoint-map: (
  'a': $a,
  'b': $b,
  'c': $c,
);

The second step is to set up your breakpoint map. You want the keys (eg: 'a') to be named the same as your variables minus the $, the values of those keys are your variables.

Looping through the breakpoint map and assigning font sizes

The next step is where Sass does all the work for you and you will see the benefits of how quickly it can be adjusted.

// Loop through the breakpoint map, assign each breakpoint to the relevant variable
// eg: $breakpoint-name = 'b' and $breakpoint-width = 480px
@each $breakpoint-name, $breakpoint-width in $breakpoint-map {
  @media (min-width: $breakpoint-width) {
    .f1-#{$breakpoint-name} {
      font-size: $f1;
    }
    .f2-#{$breakpoint-name} {
      font-size: $f2;
    }
    .f3-#{$breakpoint-name} {
      font-size: $f3;
    }
    .f4-#{$breakpoint-name} {
      font-size: $f4;
    }
    .f5-#{$breakpoint-name} {
      font-size: $f5;
    }
    .f6-#{$breakpoint-name} {
      font-size: $f6;
    }
  }
}

What’s happening here is the @each loop is going through the $breakpoint-map and:

1. Assigning each key (eg: 'a') to $breakpoint-name to every font size class
2. Assigning each value (eg: $a) to $breakpoint-width to every media query

Quick and easy to update

The benefits of this approach versus doing it through manual CSS are fairly clear. It’s a matter of adding a new breakpoint to the map or quickly adjust on a per project basis. All you have to wait for is Sass to compile.

Even if your project doesn’t allow for Sass and you need to generate something quickly you can always use Codepen.

Alternative: font size ‘locks’

This approach gained some popularity a while ago now, but CSS locks can build upon this style of writing CSS further.

The main benefit of font size locks is having proportional font sizes no matter the screen size.

A smart *calc()*ulation

The linked article does a far better job of explaining the intricacies than I’m able to. Essentially you use calc() to have a minimum and maximum font size between two minimum and maximum screen widths.

// overview
calc( min-font-size + ( ( max-font-size - min-font-size ) * ( 100vw - min-screen-width ) / ( max-screen-width - min-screen-width) ) )

// actual usage
calc( 16px + ( ( 24 - 16 ) * ( 100vw - 480 ) / ( 1280 - 480) ) )

I wouldn’t worry about understanding this too much, as the next step is to make a Sass function for easy use.

Put it all in a Sass function

To save remembering whether part of the calculation should or shouldn’t be a pixel value, you bundle it all together into a Sass function instead.

@function font-size-lock(
  $min-font-size,
  $max-font-size,
  $min-screen-width,
  $max-screen-width
) {
  @return calc(
    #{$min-font-size} +
      (
        (#{strip-unit($max-font-size)} - #{strip-unit($min-font-size)}) * (
            100vw - #{$min-screen-width}
          ) /
          (#{strip-unit($max-screen-width)} - #{strip-unit($min-screen-width)})
      )
  );
}

There is also the use of a strip-unit() function because of the variables you set earlier. They can be used without breaking the calculations.

@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}

Usage

Drop those functions into your current setup and you’re good to go.

.f1-l {
  font-size: font-size-lock($f3, $f1, 480px, 1200px);
}

Set a restriction once you go beyond min/max screen size

Beyond the screen sizes specified, you’ll find the font size will still increase and decrease. So to counter that you need to add a couple of media queries.

// $f1: 36px;
// $f3: 24px;

.f1-l {
  font-size: $f3;

  @media (min-width: 480px) {
    font-size: font-size-lock($f3, $f1, 480px, 1200px);
  }

  @media (min-width: 1200px) {
    font-size: $f1;
  }
}

Now you have your font size starting at 24px, below 480px wide viewports. Then, beyond that it will scale between 24px and 36px, until 1200px. Finally, above 1200px the font size will not go beyond 36px.

That’s it

If you’re like me, the ability to keep track and be able to feel in control of your design implementation is the main reason this approach should grow on you.

Again, if you don’t use Sass or any preprocessor for that matter, you can still benefit, by using something like Codepen. Drop in the code and copy the output and you’re good to go.

Choosing your colour palette

The first thing to cover is choosing your palette. There are two approaches: you have an existing colour palette or you’re beginning a redesign in which you have more freedom.

Use your existing colour palette

If you have colours already determined for your website, why not use those as a starting point? Things will immediately feel more at home.

Choose for your website first

A website colour palette will be made up of some neutral and some vibrant (or differing) colours, for the various uses throughout a website. These colours will offer a lot of choice for your illustrations too.

So, if you’re struggling initially, this is a good way to spark inspiration and find any gaps you may have in your selection.

Let the choices be determined by the type of illustration

For example, is your illustration more of a scene or character? The differing use case can determine the range of colours you will need.

A scenic illustration will need some neutral colours—with varying shades and tones. These are useful for adding detail to the background, so it doesn’t feel overwhelming. If you were to use vibrant and varied colour it would distract from the subject of the illustration.

Your vibrant colours should be used to draw the eye to the main subject of the illustration.

With a character based illustration, you’re going to need colour for smaller areas like eyes, variety for skin tones, and not have to worry as much about the issues of a larger scene.

Use the colours & refine during use

I don’t think I’ve ever picked a colour palette and it’s right from the off. I can pick a set of colours which are reasonably close, but I tend to find things need tweaking.

Don’t try to add every colour you will need

If you already have a palette determined, use those colours as far as they will go. Use those colours in different ways and see how they combine.

This way you’ll keep your colour palette limited and potentially find creative combinations that you wouldn’t have without the restriction. Then, if you absolutely need to, you can add additional colours.

Using your colour palette

Using your palette consistently is one of the most challenging things.

Think about the context and use

I covered this to an extent earlier, but use case is important. If your illustration is the main feature, for example a large hero image, you have more freedom in the amount of colour you can use. Whereas if it’s a list of blog posts with individual featured images, you will be better served by keeping the colour restricted further.

Don’t overwhelm small areas with lots of colour

The balance of colour on the page is important, if many small images, have many colours, it’s going to feel busy and overwhelming.

I have found using one or two stronger colours to be a good balance. Making use of neutral complementary tones for everything else. The aim is to bring focus to the main objects and again think of the surrounding areas.

When shading and highlighting

A successful set of illustrations feel harmonious together. Much of this is achieved through consistent stroke styles, highlights and shading.

Make a range of tints

This is a step to save you time and help with consistency. Each colour you have make lighter versions of it. You want a reasonably wide variety of them, with plenty of the lightest of colours as the change in lightness is more apparent.

For example, you may increase the lightness by 20%–30% for the first few tints. Then decrease that to 5%, at the very lightest colours it becomes more obvious the difference.

Make fewer tones and shades

It’s much easier to get by on fewer tones and shades. As well, you don’t really want a huge variety in saturation or how dark these colours are.

You’ll use these if you intend to have outlines as part of your illustration. I recommend two darker colours for borders, one that’s a higher saturation and one that’s a lower saturation. There are different instances where the warmer and cooler colours will be a better fit.

The good thing with using one shade/tone for outline colour is when you apply a shadow you can reduce the opacity and the stroke is unaffected by the colour. Whereas, if you apply it to a highlight you’ve created a new colour, which more often than not doesn’t look ideal.

Use a darker saturated colour for shadows

When you use black, or add black to a colour to make a shadow it can feel unnatural. The colour goes muddier. There are two techniques for handling this:

1. Make the colour darker and increase the saturation
2. Apply a black square over the colour with overlay/soft light blending mode then reduce opacity as needed

It makes a subtle but important difference, I’ve spoke about this before in a visual design tips post. So this is at least one crossover between illustration and web/UI design.

Make strokes a contrasting colour

This can depend on the style you’re going for but the correct stroke colour is important. Make sure it contrasts well, it’s better it’s darker than too light. A stroke which is too light can make things feel off.

There are other techniques for approaching things like shadows and strokes, but this approach is easier to remember.

Watch out for colour clashes

Colour clashes is possibly the wrong word here. Anyway, for example, you have lighter colour with a dark border, next to another dark colour, this can cause an awkward look with the colours.

A simple fix can be to change the darkest stroke to be above the lighter stroke, as the image demonstrates.

Illustrator tips

Here’s a few things where the power and features of illustrator can really help you out.

Let Illustrator handle your tints, shades & tones

One thing I really love about Illustrator is the colour guide panel. It’s got a lot of power to help you quickly generate colour palettes with limited fuss. The amount of functionality it has is worth a post on its own, however, I’ll cover some things quickly.

Go to Window > Colour Guide in the menu. From here you can choose which types of colours you’d like, from shades to the warmth of colour. You can change this by clicking the little icon to the top right of the panel.

You may also find the range of colours to be limited, by again clicking the little icon at the top right and going into the panel options you can expand the amount of colours you need. You can also add them to the swatches panel for ease of use.

Select same

In the menu you will find Select > Same, if you haven’t used this before, I’m certain you’ll be using it a lot in the future. From here you’ll be able to quickly select and change fills, strokes and so on with ease.

Refine or recolour with ‘Recolor Artwork’

The colour adjustment tools within Illustrator are really powerful, especially ‘Recolor Artwork’. If you’re close to the colour palette you want, but things don’t feel as harmonious as you would like, these tools can really help.

Select all of your colours and go to Edit > Edit Colors > Recolor Artwork. From here you can adjust each colour individually, and once you click ok it will update all the colours.

Under the same Edit > Edit Colors menu you can also find ‘Recolor with preset’, this is handy for reducing the amount of colour in an image or making it monochrome. You can get a totally different look and feel through this, it’s a useful tool otherwise meant for print related jobs.

Finishing thoughts

One of the things I try to put across a lot in my posts is things aren’t final. You’re entitled to change them later, especially with personal projects.

Iterating is important, once you become aware something isn’t working, don’t be afraid to put it to one side and start again. Even if this means you’ve put this work public, you can change it.

What makes a good lazy loaded image?

Before I get into the how, I want to quickly list some things I believe makes good lazy loading.

• Has a fallback when JavaScript is disabled
• Will work with srcset, retina, etc.
• Doesn’t make the page ‘jump’ about as the images load
• Doesn’t force you to change your markup structure
• You can customise the loading
• Doesn’t depend on the likes of jQuery

The fact images don’t affect performance like JavaScript, and aren’t always needed in the page, this means you can lazy load all the things and reduce page size and requests significantly.

Example

Each of those things can be compared here, albeit you may need to view the Codepen on a slow connection!

Lazy loading with lazysizes.js

Now to get into how to achieve lazy loading, using lazysizes.js. You’re reasonably spoilt for choice and have a fair amount of libraries to choose from. I chose lazysizes.js for it’s vanilla JavaScript, simplicity, and plugins for extra functionality—like lazy loaded background images. It also has a bunch of events which you will utilise later in this post.

Setup

To begin using lazysizes, download and include lazysizes.min.js or a method that suits your project best.

...everything else

<script src="path/to/lazysizes.js"></script>
</body>
</html>

Basic markup required for lazyloading images

At it’s most basic there is no additional JavaScript setup required. It’s mostly done through HTML and CSS.

<img
  data-src="image.jpg"
  data-srcset="image.jpg 1x, image@2x.jpg 2x"
  class="lazyload"
/>

The main differences here are relatively small, the src and srcset attributes become data-src and data-srcset. The class is a requirement too—many times I have forgot to add it.

That’s all you need to make your images lazy load. However, left like this there will be no indication the image is loading and page load itself will feel janky.

Making the load smoother

To take away the page jank as images load, you need to use the intrinsic ratio technique for sizing the images.

As the images don’t exist on page load, there is no way for the browser to know the dimensions. The browser can’t predict the space required, so once they load the page can feel jumpy. The way this is solved is by creating a ‘placeholder’ and positioning the image over that.

Adjust the markup

The first step to do this, is to adjust our current markup. The only change is to add a div round the image. This is so the image inside has a reference, to be placed and sized correctly.

<div class="image loading">
  <img
    data-src="image.jpg"
    data-srcset="image.jpg 1x, image@2x.jpg"
    class="lazyload"
  />
</div>
<noscript>
  <img
    src="image.jpg"
    srcset="image.jpg 1x, image@2x.jpg"
    class="image-fallback"
  />
</noscript>

The image class name will be used to apply the image sizing and placement with an intrinsic ratio. This div can also be used to indicate something is happening. So additionally a loading class name has been added.

The fallback

You’ll notice the <noscript> tag in there too. This is treated as a regular image, no data attributes. As when JavaScript is disabled this will show instead.

The placeholder padding calculation

Just before getting into the CSS, you need to understand how to calculate sizing the images. The size is applied with a percentage padding.

( height / width ) * 100

This calculation is based upon the aspect ratio of the image. To calculate this you divide the height by the width and multiply by 100.

CSS for image sizing

This is called the intrinsic ratio method, with a few additional lines of CSS, this sizes your image appropriately. A background gradient has been added to show something will be there.

.image {
  position: relative;
  padding-bottom: 66.5492958%;

  // Tweak as needed
  background: linear-gradient(rgb(242, 242, 242) 66%, rgba(242, 242, 242, 0));
}

.image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

Another benefit of lazy loading images is if the visitor doesn’t reach that image within the page it’s not something they have to download. For those with smaller data plans, it’s a good thing.

CSS for loading indicator

The loading class will apply the loading indicator and also be used in JavaScript later.

@keyframes scaleout {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.loading:before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  margin-top: -16px;
  margin-left: -16px;
  width: 32px;
  height: 32px;
  border-radius: 32px;
  animation: scaleout 1.2s infinite ease-in-out;

  // Tweak as needed
  mix-blend-mode: soft-light;
  background-color: rgba(0, 0, 0, 0.9);
}

Essentially this is a kind of pulsing indicator using a pseudo element.

You’ll also notice mix-blend-mode, this will mean that the loading indicator looks ideal over any background. There are other ways to indicate loading, a more skeleton style or using other indicators.

CSS to fade the image in

The final step to make it all seamless is to utilise the lazyload class. This was added to the img tag earlier and gets transformed into lazyloaded. You can use this to transition the opacity, or whatever you see fit.

.lazyload,
.lazyloading {
  opacity: 0;
}

.loading,
.lazyload,
.lazyloaded,
.image {
  opacity: 1;
  transition: 2s cubic-bezier(0.215, 0.61, 0.355, 1);
}

This bit of code appears a little messy, but each class is used at a different stage. So you need to ensure each of them has the appropriate transition and opacity.

Using events in JavaScript to clean up loading

lazysizes.js has a few events you can utilise to make changes. One of the things you can do is listen for the lazyloaded event and remove the loading class.

This can be used to stop the loading indicator running in the background. Which I can’t say for certain, but I’m sure it’ll help page performance slightly.

var lazy = function lazy() {
  document.addEventListener('lazyloaded', function (e) {
    e.target.parentNode.classList.add('image-loaded')
    e.target.parentNode.classList.remove('loading')
  })
}

lazy()

The code is calling a function called lazy. Inside this function there is an event listener waiting for the lazyloaded event to happen. This happens individually for each image as and when they have loaded.

addEventListener allows you to pass a function as the second argument, which in this example using e will allow you to modify the image. In your anonymous function, to remove the loading class you need to look at the current element e.target and find its parent parentNode.

All combined that means e.target.parentNode will return the image. The parentNode in this instance is the <div> around the image and the class will be removed.

What to do when JavaScript is disabled

As mentioned earlier the need for the image to show when JavaScript is disabled. When JavaScript is disabled you will still have the leftovers from the image which will be lazy loaded.

In your <head> you can add some CSS to hide this. It’s the most reliable way to do so.

<noscript>
  <style>
    .image.loading {
      display: none;
    }
  </style>
</noscript>

With the code in place your design shouldn’t look out of place, for the times when JavaScript can fail and when it’s disabled.

Flicker of a border around the image

Occasionally you may see a default browser border, this is because there is no src defined in our example.

<img
  src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
  data-src="path/to/image.png"
  data-srcset="path/to/image.png 1x, path/to/image@2x.png 2x"
/>

However, as recommended as part of the lazysizes.js documentation you can add a transparent pixel as the src. This overcomes that problem. In general use I rarely see it, so I haven’t included it as part of the examples. It can make your HTML look pretty messy too!

Other effects

Here are some other ways of transitioning in the image. Have a look at the code, the CSS used is towards the top.

You may also want to apply the whole effect to the container, so the text transitions in too. The JavaScript would need some slight modifications, but it can somewhat double up as a scroll effects library.

Summary

When I first set out with lazy loading images, I thought it would be a real pain. It isn’t without extra work, but it isn’t a huge hassle unless it’s with background images.

With most use cases you will be using the <img> tag, with changes in the attribute names.

Summary

These posts usually serve as a good way to start the year. I aim to reflect upon myself, the site and goals. I set out goals for 2016, but decided not to in 2017, at least not to do with this website.

• 2017 in reflection
• Website year in review

2017 in reflection

At the start of the year, I posted one final post which saw me complete my goal of posting weekly for two years. I had a break in mind as soon as I’d hit this. I returned with a monthly posting schedule, with the first post after the break coming in March.

The main reason for this was I couldn’t maintain weekly posting, as I was looking for a new job and building a portfolio.

Going back to doing things just for fun

This year was one I tried to really position myself as only being a designer. It put a lot of pressure on myself to make design only posts, I wrote less about code.

I originally started designing websites many years ago for fun. I started writing this website for fun and learning too. Over time, I feel like I’ve taken things too seriously—which isn’t me. The pressure I put on myself to be seen as ‘only a designer’ was wrong.

It was part of what had a knock on effect. As well as, things happening in my life and trying to succeed with finding a new job, I lost motivation.

Finding motivation again and not over doing it

I avoided a lot of topics to keep things design focused. I had planned to change it and go back to an earlier idea of designing and coding. It’s too much work, I was being far too much of a perfectionist.

If I find myself posting regularly again, the content will be mixed between design and code. There’s benefits to each type of post, and it allows me to manage my time better.

Website year in review

This was a good year in terms of website visits and newsletter subscribers. Overall, traffic had a couple of spikes, but grew steadily. The same can be said of newsletter subscribers as well.

Things of note

In 2016 I got featured by a couple of prominent people in the industry, and this year was similar but with a couple of prominent websites instead. It’s always a pleasant surprise when it happens and I appreciate it.

I had the design submitted to Site Inspire and one or two articles popped up on Awwwards. This all happened between the end of April and early May. Gallery features, tweets and some other social stuff meant a high of nearly 20k sessions for the month of June! I believe at one stage I saw nearly 50 people online.

From what I can gather it was a bit of a snowball effect from the website being submitted to bestwebsite.gallery. I’m really grateful for those submissions. It brought a huge amount of traffic and newsletter subscribers (by my standards at least).

Website updates

I released a redesign at the end of August 2016. With many plans for improvements, 2017 allowed me to work on improving iteratively. This is what I call my own iterating in public experience.

Over the course of the year I’d made some bigger changes but many small improvements and bug fixes. Some notable changes and additions were:

• New header area with illustration and lettering
• New illustration for the newsletter
• Footer updates
• Navigation and search updates
• About tweaks
• Uses page
• Contact update
• Progressive web app
• Critical CSS
• Lazy loading images

There’s quite a change between these two homepages. It seems people resonated more with the full width hero area in terms of design.

The rest of the changes have been mostly around visual refinement. Adhering to a more rigid grid and alignment throughout. Objectively those changes have made for a nicer flow through out the page. Less of the wide narrow wide narrow layouts.

Visits month by month

A comparison table of visits in 2017, 2016 and 2015.

You can see the biggest month was May, the features mentioned earlier was the influence. It dropped off, but has maintained a nice increase overall.

Comparing to the previous two years you can see the difference writing consistently has made. Albeit this year has been dramatically reduced.

Visits by notable browser

No surprises here, as always Chrome is the runaway leader, with Safari and Firefox the next biggest browsers.

Top 10 read articles

It’s nice to see some of the newer articles I have wrote move into this list in comparison to last year.

1. Creating a horizontal scrolling responsive menu
2. Creating custom stroke width profiles in Illustrator
3. Alternatives to Circular
4. Using flexbox for horizontal scrolling navigation
5. Enhancing horizontal scrolling with flickity.js
6. Multiple level horizontal scrolling
7. How to use kerning and tracking
8. A guide to vertical rhythm
9. How to flexible squares with CSS
10. Websites using alternatives to the hamburger

Summary of the year

I was quietly hoping to double traffic, last year was 58k and this year was 131k, so it’s definitely exceeded expectations. One of the surprises is the average of 2 pages per session, this was around 1.4 last year.

The most important thing for me is to keep readers returning. I can only do that by giving reason to keep coming back. I aim to do this, but without pressuring myself too much.

Goals for 2018

This year again, it’s going to be things which I’d like to do, rather than hold myself to (aside from one or two):

• Get back to a more regular posting schedule
• Find a healthy balance between life and creating
• Follow ‘if it’s not hell yes, then it’s no’ better
• Make more improvements to the website
• Upgrade the website to the latest ExpressionEngine
• Look at ways to make better use of my email list

I hope you have a good year ahead.

9 times out of 10 you should stick with centre

There are three alignments, centre, inside and outside. You’ll see there are subtle differences between them. Each make the look and feel of an object slightly different. They also behave differently with caps and corners.

At first it looks like the squares are made larger. However, to summarise this post quickly, you should almost always use centre. Why? I’ll get into the details now.

Inside alignment

Aligning your strokes to the inside is by far the easiest to manage. It doesn’t affect the dimensions of your object, the size you make, is the size you export. However, there are two downsides to keep in mind.

Inside doesn’t accommodate stroke caps

The biggest negative of inside alignment is no stroke caps. If rounded caps and joins are part of your style, you won’t be able to achieve them as easily. You would need to expand the object and do it manually—no thanks.

Open paths are only central without a custom stroke width

If your design style doesn't require stroke caps, you still need to watch out when drawing paths which aren’t closed. It may be tricky to achieve consistency. As they will always align to the centre, you can overcome this by making a custom stroke width profile.

Outside alignment

The outside stroke is one of the trickier ones to use and it’s not one I’d personally recommend using unless you’re in a rush. It’s suitable for complex shapes, with intricate areas which you want to retain those details.

Different dimensions on save

As the stroke is applied completely round the outside the size will appear the same (in Illustrator). However, on saving it will increase. This is the main thing to be aware of.

If you were intent on having a particular size, you may find your design to be off in those areas. For example, if you were to make a 16px favicon, which had a 1px stroke on the outside your favicon would be 18px.

Difficult to align

With the stroke not being accounted for in the dimensions it can make things trickier to align precisely. You’ll find things snap or line up using guides, but you’ll need to nudge the object over slightly each time.

Corner radius feels off

As demonstrated in the image you will see the centre and outside stroke alignments. Having the correct corner radius can make things feel more intentional.

Centre alignment

Finally, with centre it’s the default. As it’s the only available option until a path is closed. I aim to use the majority of the time, though it’s not without its ‘gotchas’.

Different dimensions and alignment is off

Again, as the stroke isn’t positioned inside the path the dimensions are different. You’ll also need to also nudge things over slightly to account for the stroke when aligning things precisely.

Centre is better for stroke caps and corners

As mentioned previously, inside alignment doesn’t account for stroke caps and corners. The outside does to an extent, but things like inner corner radii can feel off.

Centre is better for SVG

When you use inside or outside for stroke alignment the exported paths have a fill. When you export with a centre alignment you have access to all the stroke properties. This allows you to adjust the width, caps and joins without having to save it out again.

Stroke caps

When you add a stroke cap that’s rounded or projecting. It can also affect the dimensions, as it extends beyond the anchor point. This is something to be aware of when you require exact dimensions when a path isn’t closed.

The solution: a template

If centre is the best, how do you size things reliably? The answer is to make a template and use a grid & guides.

Enable guides

Go in to the Illustrator menu > Preferences > Guides & Grid, to setup your grid. Change ‘gridline every’ to be the size of the object you’re making. Add the same value in subdivisions (or fewer if it suits you better). This way you'll end up with a reliable pixel grid.

Enable snap to grid & snap to pixel

You can enable these under View > Snap to Grid and View > Snap to Pixel.

Enabling these initially will help with sizing the template quickly. Keeping snap to pixel enabled will ensure things stay on the pixel grid where possible.

Draw a square the size of the object

In this example I want to have a 32px icon. So using the rectangle tool by pressing m and draw a 32px rectangle.

Draw another rectangle minus the stroke width (optional)

This step is optional, as it serves as more of a reminder, for the place your points should start from. Once a stroke is applied it will go into the defined area.

The size here depends on the stroke width you intend to use. When aligning centrally you can take the stroke size minus the overall width. In this case of 32px, it would be a 31px inner square with a 1px stroke. With a 2px stroke it would be 30px, as half of the stroke is positioned either side of the path.

On export or aligning

When exporting you’ll want to remove the fill applied (if there is one) and group the objects together cmd + g.

Grouping the template and object together is ideal for aligning. It’s also useful if you have icons, everything will scale consistently too.

That’s everything

This is the way to get all the benefits of having a centre stroke. So if you want round caps and joins, you can. You don’t have to worry about alignment, and scaling proportionally.

In this post, I want to show you how to create a search which appears with a smooth transition on the click or tap of a button.

What you're making

If you'd like to grab any of the code and skip the post feel free to browse the CodePen.

All code and design files can be downloaded for being part of my list.

Design: overview

Here’s the design you’ll be making. It’s quite simple, so I have avoided a walk through as the designs themselves serve as a place to explain.

Search overlay

Overall, the design aims to visually grab the attention. It makes use of the screen size available through the large input and icons. I wanted the form to appear ‘clickable’ through having clearly a defined input. As you see some which do away with the defined field approach.

There are a couple of shadows applied to the search field itself. A smaller shadow to add intensity to the bottom, and another with larger radius to make it feel more realistic. The shadow is a darker version of the background which makes things feel intentional.

The background has a subtle gradient, the aim is for it to have a sense of depth as it transitions over the existing background.

Small screen

For smaller screens, I've opted to move the search to the bottom of the screen. This means it’s easier to reach, as you can focus on the input with JavaScript, but it doesn’t always bring up the keyboard.

Things are sized more according to the screen size, with the icons and form field. Aside from them, nothing else has changed.

Icon setup

The icons are designed on at 32px x 32px and scaled down to 24px x 24px for the small screen design. You can download the two icons used for your design.

HTML

Let’s get into making this usable, starting with HTML. The summary of the markup you need: button to open, button to close, overlay and the form.

Open button

The button is an anchor tag, with an SVG inside. This allows us to style and reuse the icon easily. Pasting this code into your editor without CSS will mean the icon will be a black square.

<a href="#link-to-search" class="button button-open">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="32"
    viewBox="0 0 32 32"
    class="icon"
  >
    <rect class="fill-none" width="32" height="32" />
    <path
      class="fill-currentcolor"
      d="M29.82861,24.17139,25.56519,19.908A13.0381,13.0381,0,1,0,19.908,25.56525l4.26343,4.26337a4.00026,4.00026,0,0,0,5.65723-5.65723ZM5,14a9,9,0,1,1,9,9A9.00984,9.00984,0,0,1,5,14Z"
    />
  </svg>
</a>

The class names button and button-open will be used for both styling and JavaScript later in the post. The href should ideally link to a fallback search page, should JavaScript fail or be disabled.

You may notice the icon has several class names applied to it. I’ve detailed my process about how I use SVG for icons before.

Overlay

The overlay itself is a <div> tag round a form. Each element inside the form has an appropriate class to be used for styling.

<div class="overlay hiding">
  <!-- Form markup here -->
</div>

You will notice the overlay has two class names. overlay and hiding all general styling will be applied to .overlay. .hiding will have styles which hide the element and will be transitioned to .showing.

This approach helps keep our CSS more maintainable. As when you switch class names there is less to override.

Close button

Similar to the open button, the icon and class name are different.

<button class="button button-close">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="32"
    viewBox="0 0 32 32"
    class="icon"
  >
    <rect class="fill-none" width="32" height="32" />
    <path
      class="fill-currentcolor"
      d="M18.82813,16,29.41406,5.41406a1.99979,1.99979,0,0,0-2.82812-2.82812L16,13.17188,5.41406,2.58594A1.99979,1.99979,0,0,0,2.58594,5.41406L13.17188,16,2.58594,26.58594a1.99979,1.99979,0,1,0,2.82813,2.82813L16,18.82813,26.58594,29.41406a1.99979,1.99979,0,0,0,2.82813-2.82812Z"
    />
  </svg>
</button>

Search form

The form markup should be placed inside the overlay <div>.

<form action="#" class="form-search">
  <label for="keywords" class="visuallyhidden">Search</label>
  <input
    class="input input-search"
    id="keywords"
    name="keywords"
    type="search"
    placeholder="Find something…"
    autocorrect="off"
    autocapitalize="off"
    required
  />
  <button type="submit" class="button button-search">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="32"
      height="32"
      viewBox="0 0 32 32"
      class="icon"
    >
      <rect class="fill-none" width="32" height="32" />
      <path
        class="fill-currentcolor"
        d="M29.82861,24.17139,25.56519,19.908A13.0381,13.0381,0,1,0,19.908,25.56525l4.26343,4.26337a4.00026,4.00026,0,0,0,5.65723-5.65723ZM5,14a9,9,0,1,1,9,9A9.00984,9.00984,0,0,1,5,14Z"
      />
    </svg>
  </button>
</form>

The form markup isn't complex and each individual element has a relevant class name. Which will be used for styling later. The icon is the same one used earlier (ideally the repetition would be avoided).

You should be able to adjust the form to one that works with your CMS.

Sass: visual style and layout

This is where it gets trickier, there's quite a bit to get through for the styling. This bit focuses purely on getting the layout and visual style in place. I’m going to be writing the CSS using Sass, though you can get the compiled code from the Pen.

Variables

// Variables
$base-px: 8px;
$breakpoint: 768px;
$breakpoint-max: $breakpoint - 1px;

// Colours
$background: #f7fbfb;
$background-2: #eaf5f5;
$background-3: #bbd8d8;
$primary: #fd7f71;
$primary-2: #c3d8d7;
$white: #fff;

// Font stack
$system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
  Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

$base-px is for spacing, $breakpoint and $breakpoint-max are for media queries. Then you have several colours and a system font stack. These variables will allow you to tweak things easier.

General setup

// Basics
// ----------------------
body {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  background-color: $background;
  height: 100vh;
  font-family: $system;
}

This code is so the open button will align centrally vertically and horizontally.

Hiding the label

A design choice is to hide the label, however, it still serves a purpose to screen readers (albeit proper accessibility isn’t covered here).

// For hiding the label
// ----------------------
.visuallyhidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

.visuallyhidden is a reasonably common practice, which ensures the element is hidden, but can be picked up by screen readers.

SVG colour inheriting styles

This CSS is important for the SVG icons having the correct colour applied to them. As mentioned earlier there are class names applied to the SVG paths.

// SVG Helpers
// ---------------------------
.fill-currentcolor {
  fill: currentcolor;
}

.fill-none {
  fill: none;
}

The fill property is an SVG specific property. The default fill on an SVG is black, this is why you need to have one for removing the fill.

Icons

Each icon used is the same size, starting at 24px for smaller screens and then increased to 32px at the $breakpoint.

// Icon
// ---------------------------
.icon {
  width: 24px;
  height: 24px;
  transition: 0.3s ease-out;

  @media (min-width: $breakpoint) {
    width: 32px;
    height: 32px;
  }
}

Button and input ‘reset’

These styles normalise the browser applied styling and give you a consistent starting point. Particularly the appearance property, this removes much of the browser default styling.

// Input/button reset
// ---------------------------
.input,
.button {
  display: inline-block;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  line-height: normal;
  border: none;
  outline: none;
  max-width: 100%;
  font-family: $system;
}

Button .button

This is the reason you apply two class names to each button. For each button I want to ensure a consistent cursor and color. The .button itself and .icon within scale up.

// Button
// ---------------------------
.button {
  cursor: pointer;
  color: $primary;
  transition: 0.3s ease-out;

  &:hover,
  &:focus {
    transform: scale(1.125);

    .icon {
      transform: scale(1.25);
    }
  }
}

The important thing to note is the color, this is inherited by the icon. You can change this to any colour and the icon will follow suit.

The hover state is applying a scale effect to both the button and the icon. With the subtle ease-out transition it makes for a kind of jelly effect.

Button to open .button-open

This is the means for opening the search overlay. In JavaScript shortly you will apply code so when it’s clicked, the overlay opens.

.button-open {
  // Display/alignment
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;

  // Sizing
  width: 96px;
  height: 96px;
  border-radius: 48px;

  // Style
  background-color: $white;
  box-shadow: 0 1px 1px rgba($background-3, 0.6), 0 3px 3px rgba($background-3, 0.4),
    0 8px 16px rgba($background-3, 0.3);

  &:hover,
  &:focus {
    box-shadow: 0 2px 2px rgba($background-3, 0.4), 0 4px 4px rgba($background-3, 0.3),
      0 12px 32px rgba($background-3, 0.3);
  }
}

Along with the icon transition earlier the box-shadow is also being made to appear as if the element is becoming slightly raised. It’s a subtle tweak to show depth.

Button to close .button-close

The close button is reasonably simple, you’re positioning it to the top right and making sure it the background colour is transparent.

// Button (close)
// ---------------------------
.button-close {
  position: absolute;
  top: 7.5vw;
  right: 7.5vw;
  padding: 0;
  background-color: transparent;
}

Form .form-search

The form element itself, serves as a container to limit the width of the input and allows you to align the search button easily.

.form-search {
  position: relative;
  width: 100%;

  @media (min-width: $breakpoint) {
    max-width: 720px;
  }
}

Adding position: relative will make sure the button is anchored to the form element. At smaller screen sizes you want the form to fill the viewport.

Search input

There’s quite a bit of CSS applied to this element, the majority is related to visual style and sizing, rather than alignment.

// Input
// ---------------------------
.input-search {
  // Sizing
  padding: 26px ($base-px * 2) 25px; // 72px height
  width: 100%;

  // Style
  font-size: 18px;
  font-weight: 600;
  color: $primary;
  background-color: $white;
  box-shadow: 0 1px 1px rgba($background-3, 0.6), 0 3px 3px rgba($background-3, 0.4),
    0 8px 16px rgba($background-3, 0.3);

  @media (min-width: $breakpoint) {
    // Sizing
    padding: 29px ($base-px * 6); // 96px height

    // Style
    font-size: 32px;
    border-radius: 30em;
  }
}

.input-search::placeholder {
  color: $primary-2;
}

I find it easier to use padding to apply the size you want over adding a height and corresponding line-height.

Overlay

The overlay is fixed to the viewport and everything again is positioned centrally with flexbox. This is much of the heavy lifting for positioning.

// Overlay
// ---------------------------
.overlay {
  // Display
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  align-content: flex-end;

  // Positioning
  position: fixed;
  z-index: 3;
  left: 0;
  width: 100%;
  height: 100%;

  // Style
  background-image: linear-gradient(to top, $background, $background-2);

  @media (min-width: $breakpoint) {
    align-items: center;
    align-content: center;
  }
}

On smaller screens the form is aligned to the bottom, as you get beyond the $breakpoint the form is aligned centrally. align-items and align-content properties are what control this.

Going into further detail, a z-index is applied to ensure it’s above the other content. There is only the left value set here, normally you would want to apply a top or bottom value. However, when getting into the animation shortly, this will be covered.

The gradient is also applied here so it matches the design.

SCSS: animation/transition setup

If you followed along with the code as is, you should have what resembles a complete design. The following code will have the class names applied through JavaScript at the relevant points.

Hiding

The initial state the form is hidden. That’s why the class on the overlay <div> is class="overlay hiding".

// Initial state
.hiding {
  max-height: 0;
  opacity: 0;
  bottom: 0;

  // This transition happens when the close button is clicked
  // and should be faster than the .showing state
  transition:
    max-height .3s .2s cubic-bezier(0.215, 0.61, 0.355, 1),
    opacity .6s ease-out;

  // When hiding inner elements should be invisible too
  .button-search,
  .input-search {
    opacity: 0; }

  // Offset the button
  .button-search {
    transform: translate3d(0, 33%, 0); }

  // Offset the input more
  .input-search {
    transform: translate3d(0, 50%, 0); }

Hide the contents

What’s happening here is you’re using both max-height and opacity to hide the contents of the overlay. The overflow set earlier in .overlay ensures that everything is completely hidden.

Closing goes off from the bottom

Next you have the bottom property, this will be apparent when closing the overlay. It will appear to go off the screen from the bottom.

Hint at the height collapsing

With the transition the max-height value transitions quicker than the opacity. The reason for this is to give a hint that the height is shrinking.

Inner elements ‘nudge’ up

The form elements will be positioned centrally, or at the bottom depending on screen size. So in both instances making them reveal upwards looks as if it’s a coordinated and waiting for the overlay to be open.

Showing

When .button-open is clicked this class name will be applied to the overlay.

// Showing state
.showing {
  max-height: 100vh;
  top: 0;

  // This happens when the open button is clicked
  // max-height transition is to appear more subtle
  transition: max-height 0.4s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), opacity
      0.8s ease-out;
}

With the showing state the max-height ensures the height is transitioned and the top position ensures the overlay looks like it comes from the top. Working in combination with the hidden state when the showing class is swapped for hiding it will look like it’s going off the bottom of the screen.

This is the good thing about removing class names through JavaScript—which will be covered shortly. You also don’t have to write as much CSS. So you don’t need to have opacity: 1 and you don’t need to change the transform on the inner elements. This is because those styles don’t exist once the class name is removed.

Transitioning inner elements

Finally, once the overlay opens, you want the form elements to transition in slightly later. This gives a more intentional appearance.

.button-search {
  transition: 0.4s 0.6s ease-out;
}

.input-search {
  transition: 0.8s 0.3s ease-out;
}

I’ve chosen to make the button have a quicker overall transition, but a longer delay. This gives the search input a chance to appear.

The search input is delayed by .3 seconds, which is inline with the max-height transition. The aim is so it begins to happen, as that the max-height transition is ending.

JavaScript

Here’s all the JavaScript to make this function. It’s broken down in to four parts. The variables which select the elements you need throughout. Two functions, the first, for adding focus to the search and the second, which will toggle the visibility. The event listeners to watch for clicks on the buttons.

// Keep search toggling out of the global scope
;(function (window, document, undefined) {
  // Variables
  var open = document.querySelector('.button-open')
  var close = document.querySelector('.button-close')
  var overlay = document.querySelector('.overlay')
  var search = document.querySelector('.input-search')

  // Focus on an element
  var focusOn = function (element) {
    // Only focus on the element if it contains the relevant
    // class name that means it’s actually visible
    if (overlay.classList.contains('showing')) {
      console.log('focus')
      element.focus()
    }
    // Otherwise remove the focus from the element
    else {
      element.blur()
    }
  }

  // Toggles a set of class names on an element
  var toggler = function () {
    // Add the active class to the element clicked/tapped
    // So if necessary the style can be changed
    this.classList.toggle('active')

    // Toggle the classes which set off the transition
    overlay.classList.toggle('hiding')
    overlay.classList.toggle('showing')

    // Once the overlay’s transition ends focus the search field
    overlay.addEventListener('transitionend', focusOn.bind(null, search), false)

    // Prevent the clicks from navigating away
    return false
  }

  // Add the event listener to the toggle
  open.addEventListener('click', toggler, false)
  close.addEventListener('click', toggler, false)
})(window, document)

Have a scan over the code and then I’ll cover it in more detail.

Contain everything with an IIFE

You’re containing all the code required in an ‘IIFE’. This means immediately invoked function expression. Which makes the code only accessible from within this to avoid code conflicting elsewhere.

// Keep search toggling out of the global scope
;(function (window, document, undefined) {
  // Code here
})(window, document)

Todd Motto has a great explanation on his blog of why this is approach is used.

Variables

The first step is to assign all the elements, that will have some change happen to them, to variables.

// Keep search toggling out of the global scope
;(function (window, document, undefined) {
  // Variables
  var open = document.querySelector('.button-open')
  var close = document.querySelector('.button-close')
  var overlay = document.querySelector('.overlay')
  var search = document.querySelector('.input-search')
})(window, document)

Both buttons, the overlay and search input are selected. Click event listeners will be assigned to both the open and close buttons. The overlay will have class names changed and the field will be focused once the transitions end.

Assigning event listeners to the buttons

Next, you want to assign click event listeners to both of the buttons.

// Keep search toggling out of the global scope
;(function (window, document, undefined) {
  // Variables
  var open = document.querySelector('.button-open')
  var close = document.querySelector('.button-close')
  var overlay = document.querySelector('.overlay')
  var field = document.querySelector('.input-search')

  // Add the event listener to the toggle
  open.addEventListener('click', toggler, false)
  close.addEventListener('click', toggler, false)
})(window, document)

With addEventListener you have a few parameters. The most important are the event to listen for, in this case click. The second parameter is to pass a function that you want to be called.

It’s important to note that you don’t write the function as toggler(). This is so the function is only called when you click on the relevant element.

The third parameter is more for backwards compatibility. It doesn’t have much bearing here, so I’m not going to go into detail.

Writing the ‘toggler’ function

Now you need to write the toggler function. The aim for this is to toggle a couple of class names to make the search visible. Once the transitions have completed, it would also be ideal to focus on the search input. So the user can begin typing without any extra interaction.

// Keep search toggling out of the global scope
;(function (window, document, undefined) {
  // Variables
  var open = document.querySelector('.button-open')
  var close = document.querySelector('.button-close')
  var overlay = document.querySelector('.overlay')
  var search = document.querySelector('.input-search')

  // Toggles a set of class names on an element
  var toggler = function () {
    // Toggle the classes which set off the transition
    overlay.classList.toggle('hiding')
    overlay.classList.toggle('showing')

    // Once the overlay’s transition ends focus the search field
    overlay.addEventListener('transitionend', focusOn.bind(null, search), false)

    // Prevent the clicks from navigating away
    return false
  }

  // Add the event listener to the toggle
  open.addEventListener('click', toggler, false)
  close.addEventListener('click', toggler, false)
})(window, document)

Toggle class names to keep things efficient

Digging into the function now, the class names that set off the transition are toggled on the overlay variable. Clicking the open button means 'hiding' will be removed and 'showing' will be added.

Alternatively, when close is clicked 'showing' will be removed and 'hiding' will be added.

Arguments are passed using bind

You’ll notice bind following the focusOn function in the transitionend event listener.

The reason you use bind is to avoid the function being called too early. It’s still the case even when you pass arguments. So if you want to pass arguments, bind is one of the best solutions.

It’s important to note the first parameter of bind is what you want this to be assigned to. In this instance there isn’t any use for this so null is passed.

Focusing on the input

Finally, to complete your code is to add the focusOn function. This has one parameter element, which when it’s used the toggler function is the search variable.

// Keep search toggling out of the global scope
;(function (window, document, undefined) {
  // Variables
  var open = document.querySelector('.button-open')
  var close = document.querySelector('.button-close')
  var overlay = document.querySelector('.overlay')
  var search = document.querySelector('.input-search')

  // Focus on an element
  var focusOn = function (element) {
    // Only focus on the element if it contains the relevant
    // class name that means it’s actually visible
    if (overlay.classList.contains('showing')) {
      element.focus()
    }
    // Otherwise remove the focus from the element
    else {
      element.blur()
    }
  }

  // Toggles a set of class names on an element
  var toggler = function () {
    // Toggle the classes which set off the transition
    overlay.classList.toggle('hiding')
    overlay.classList.toggle('showing')

    // Once the overlay’s transition ends focus the search field
    overlay.addEventListener('transitionend', focusOn.bind(null, search), false)

    // Prevent the clicks from navigating away
    return false
  }

  // Add the event listener to the toggle
  open.addEventListener('click', toggler, false)
  close.addEventListener('click', toggler, false)
})(window, document)

The first part of the focusOn function is the if statement. This is looking at the overlay to check if it contains a class name. If this is true it will find the element and bring focus to it.

In the else you can assume that’s when the element is being closed and remove the focus by using blur().

Bringing focus to an element is hit and miss, it serves you well in desktop browsers. However, for mobiles it does focus, but doesn’t always bring up the keyboard. This is fine, but something to be aware of.

That’s it

You should now have the complete overlay. If you’d like to take this a step further, the JavaScript could be made more reusable. The toggler function could be passed elements instead of referring to variables.

1. Shadows respect their surroundings

One of the most common issues with shadows I see is they don't respect the background they are on.

In the example, the ‘bad’ uses a black shadow. When a transparent black is placed on a coloured background, the overall colour appears muddier. Whereas if you take the background colour and make it darker and more saturated it will feel more intentional.

This is true of how real shadows behave, they're the absence of light. So while this is on a screen, it makes your design better if you remain true to this.

How about blending modes?

Alternatively, you may find a blend mode more accurate. Using a black shadow with an overlay or soft light blending mode can be equally effective.

In the example image, the shadows both use black with an overlay blending mode. This can be a great way to apply shadows which fit better. If you were to replicate this in CSS or without the need for a blending mode based shadow ‘B’ allows you to pick the colour and use it.

2. Your shadows shouldn't look like a ‘glow’

On to another shadow tip, which can be tricky to control, is when the shadow makes the object look like it’s glowing. It commonly happens with dark objects on a light background.

It can take a bit of tweaking but you need two shadows, both of the same colour. You should keep your original shadow, but reduce the opacity and increase the Y axis slightly. The idea is this shadow should be subtle.

Next, duplicate the layer to add a second shadow. This shadow is 0 x axis, 1px y axis and 1px blur shadow. The opacity should be higher, around 60%. Essentially you’re creating a border for some additional contrast.

3. Gradients should feel harmonious

When you want a light to dark transition of colour in a gradient, usually you'll take your base colour and make it darker. That's fine, but sometimes it can feel off. Why? You may wonder.

This is similar to the earlier shadow tip. A gradient applied to an object is adding depth. So similar rules apply, when darkening a colour, don’t only add black.

In the image you can see a breakdown of the colours used. Comparing the examples the differences are more apparent. The good example uses a more saturated red.

Use a different hue

Saturation doesn’t work as well for some colours, in those instances it can work to adjust the hue. Here are a couple of examples using hue adjustment only.

By adjusting the colour on the hue of the colour, by around 10–20 degrees you perceive the colour as being darker.

4. Use hanging punctuation

It’s not supported in many apps (aside from InDesign) and CSS (yet). However, it’s an important consideration for improving your reading experience.

Bulleted lists

When you indent your bullets at the first level you remove the left edge of the content. Your reader will have to adjust to the bullet points then again. It’s important to keep the left side consistent for the best reading experience.

Quotes

The same applies to pull quotes, as seen in the image. If you’ve ever felt like your text feels off with quotes, this is why. It’s a subtle improvement.

Of course your style may vary, and you may apply something more stylistic, as shown in the example for the design of this website.

5. Text always has an ideal line length

Having an ideal line length means content can be read easier. The eyes don’t have to work harder tracking from side to side.

Typically this is 55-75 characters, it depends on the typeface you use but this can be approximately 30em in CSS.

6. Balance titles & avoid widows/orphans

To avoid widows and orphans this means when you have a paragraph or title you avoid short lines of text. In the instance of titles it would be to avoid a single word. It can be difficult to control on a website, but being aware of it helps.

It’s considered bad in terms of typography, because it looks like there is excess white space. Excess whitespace can interrupt the flow of reading and balance of a particular area of your design.

How to fix or prevent?

When making a website there are a lot of variables to control this (eg: responsive). The best way I have found is to use   on the areas you can control.

The title in the example would look like the following:

Illustrator quick tip: non destructive shape editing

7. Keep spacing consistent with using multiples

This is something I'm passionate about, using one multiple as a basis for all spacing. For example, using multiples of 8, this is a good number to use as it will divide/multiply and never hit a decimal placed number.

There are a few good reasons you should be:

• Improves speed of designing
• Improves decision making
• Helps collaborating with developers
• Improves consistency and hierarchy
• Helps with maintaining a vertical rhythm

Having your Illustrator templates setup correctly means this is a breeze to stick with.

8. Make sure icons and logos are pixel fitted

A subtle but important aspect of design is ensuring your design assets remain sharp. Sometimes you may feel like something is off with an icon or logo, it most likely it looks ever so slightly blurry.

This is quite the topic in itself, but pixel fitting your icons and logos is an important skill to acquire. It’s essentially hinting them to make sure they appear sharp and retain their original clarity.

Take this notebook icon, the central rectangle is off the pixel grid. If you were to enable pixel preview cmd + Y and toggle it back and forth you would notice the fuzziness. This is what I mean when making sure things are pixel fitted.

You don’t see it in vector applications, but when you export and view it on screen normally you will see the difference.

Making things pixel fitted

With the transform panel open, you use the direct selection tool a to select the individual points. Referring to the transform panel you will see which points are off a whole pixel.

You can either add or subtract the pixels after the decimal place. The main thing is the numbers should be whole eg: 16px. Not 16.5px or 16.12325px, you get the point.

Make Pixel Perfect is a feature which was added in Illustrator 2017 (Nov 2016 update). Make sure snap to pixel is on by going to View > Snap to Pixel and then select your object and go to Object > Make Pixel Perfect. It’s not fantastic, but it does do some heavier lifting.

9. Use a type scale

Like picking a consistent value to base spacing off; having a type scale is important too. A type scale means your font sizes are based upon a ratio.

I pick a scale that has the smaller font sizes you need and shows a clear difference with the larger sizes. As you need a variety at small sizes but more differentiation.

I would recommend using between 6–8 different type sizes. This should be more than enough for a website. Using more than this may make things feel inconsistent.

Modular Scale

I recommend using this website to help determine your type scale. You can add multiple base values, this will give you a wider variety of smaller font sizes. It offers many sizes, but as mentioned I would select between 6–8.

10. Use the correct quotes

A simple one but using the correct quotes can make things look more elegant aside from being typographically correct. They vary in their look between typefaces, it could even be a factor in why you use that particular typeface.

Straight quotes have very few if any uses outside of code. Some applications will automatically convert to them for you like Illustrator, Photoshop and some other text editors like iA Writer.

Shortcuts

On a Mac the shortcuts are fairly straightforward, Windows and Linux require more effort. A good reference website for all shortcuts and entities is Smart Quotes for Smart People.

Markdown

Markdown is a great way to write it’s simple to format text and one of the benefits of using markdown is the ability to enable quote conversion. If you write a lot in your CMS you may be able to enable it.

11. Optical alignment — aligning for your eyes

You’ve got a set of icons, you add a background colour in a circular shape, you align it and it looks off. The align tool isn’t broken surely?

It’s not broken, sometimes align tools don’t work in certain areas. The easiest way to get round this issue is to eyeball things, and that’s fine.

The play icon

This particular icon is the most common example used when demonstrating optical alignment. As it’s really clear what the issue is.

Optical alignment comes in many forms

I’m only covering this topic briefly, but it applies to typography too. Being aware of when something is mathematically correct, but feels off from an optical view, will allow you to make the subtle tweaks needed.

It’s a subtle, but noticeable difference, to the way things appear when aligned.

12. Make sure your nested corner radius account for the outer radius

When you have two rounded rectangles nested within each other you need the corner/border radius to feel consistent.

There is a fairly simple calculation for this, the outer radius - the space between = inner radius. In the example above this would be 40px - 28px = 12px. There’s a handy tool to help you calculate this.

That’s it

Hopefully there are some tips you didn’t know here and they’re useful. I’d like to know have I missed any? Let me know on twitter).

Starting a new skill requires patience

I received a few emails which made me feel like this would be a good topic. It’s also a good reminder to myself to write this. As you can go through stages where you can’t quite create what you visualise.

When you find things being more challenging than you thought, it’s important to remember you’ll get somewhere in time. You can’t know everything and part of it is being comfortable knowing that. It’s through these challenges you learn and grow your experience. Without challenges it becomes boring.

Use different constraints to help

Some of the things I mention within will contradict each other, because you will need to approach things in a mixture of ways. Using different constraints and having patience can help see your vision through.

Sometimes you don’t know what to learn

There’s lots of reasons you can struggle. Being an aspiring illustrator and someone who wants to be better at art in general, you can find yourself not knowing what to learn or frustrated when things don’t go to plan.

Slow down

One of the most important things I can recommend is slowing down. You find difficulty because you want the instant gratification of designing something good. Slow down and let the time taken be what’s necessary.

If you’re new to designing, be it altogether or for a particular industry, it will take you longer. Your trial and error will take longer, there is nothing wrong with this, it’s the opportunity to learn.

It’s important to reflect on your learnings. So note them down, keep your sketches, wireframes anything that shows progress.

Start somewhere

It can sometimes feel overwhelming when starting out. However, getting something down is what you need to build momentum. It doesn’t have to be in a blank canvas, it can be as small as noting things down.

I have found it extremely helpful over the years to write notes. From what the main goal is, to what elements must be part of what I design, summarising research, what the brand image is, etc.

Writing these initial thoughts (and repeating them) allows you to process them better. By having the thoughts on paper you don’t need to remember them. It frees up focus on producing the work.

Don’t be afraid to start again

This is one thing I will say is vital. You may have had a great idea in mind, but you can’t make it work. This may not be down to your skill, it might just be the idea doesn’t work.

Consider the following

1. What are you trying to achieve?
2. Have you imposed a constraint that is too strict?
3. Is the use case different to what you expected?
4. What have you learnt so far?

The reason I consider these questions are, for example, when I was making the new logo for this website, I wanted to also make it into an illustrated version. I was happy with the logo overall and reasonably happy with the illustrated approach.

However, when it came to placing it in the design in reference to the sketches I had done, it didn’t work. It didn’t work because the space felt awkward in the surrounding area. I recognised this and completely changed my approach and was happier for it.

Sometimes you need to see an idea as far as you can, but once you realise it’s not working, think about why. Again, document this as progress.

Try things out and don’t be afraid to reevaluate

With so many ideas floating around it can be difficult to choose which one to go with.

• List all ideas with detail for remembering
• Start with any idea
• Sketch a rough version of it
• Note any key points
• Move on to the next
• Repeat

The key is speed, you may repeat yourself and things not look too different. That’s fine, you're iterating and making progress.

Some ideas will be poorer than others, but you have to go through those to get to the good.

Start small

You’ve probably noticed there is an emphasis on sketching and notes. An artist doesn’t immediately embark on a full scale drawing of the scene they have in their mind. It would more often than not be wasteful.

They start with small sketches. Moving quickly, to figure out where all the main components of the scene go. If the drawing features people or objects they will try different compositions to figure out lighting, focus and proportions.

Sketches can help you to understand where to head

Equally you should have things you can rely on to get a better picture. It’s a way of visualising quickly, with a significantly lower time investment. Sketches allow you to visualise something without it being in your mind. You can throw ideas away without feeling like much has been lost if they don’t work.

Jump about in your process

The value in having a process is clear. It’s a set of steps you follow to ensure the best quality of work and nothing gets missed. However, with designing websites, you need to jump about the process to get a feel for your ideas.

If you want to experiment with some visual style or wireframes quickly, you should. It’s something I struggled with, you can see people who do great work and explain their process and feel like it always works.

This is down to two things; the way they present their work and it simply doesn’t always work out that way. It’s important having those steps, but you may need to revisit them and approach them in different ways.

Become familiar with the details

You can read about design techniques, styles or processes, but without intentionally designing using techniques you wish to understand better, it will be difficult to learn the intricacies.

It’s important to practice these techniques outside of your work. Use side projects and challenges for yourself to practice them. You’ll gain a greater understanding and be able to draw upon techniques quicker in the future.

Don’t let inspiration rule you

Inspiration can be both your best friend and worst enemy. It is a form of research, you can use to back up your initial options and inspire ideas. However, the one thing I’ve always disliked about inspiration is the things you’ll see are never going to be what you output. So you’ll always have some level of dissatisfaction, unless you separate yourself from it completely.

That’s the point here; inspiration shouldn’t rule you. Once you’ve got the inspiration needed you need to step back and forget it. Take a break and then come back to your work.

Practice deliberately

This is a topic in of itself, but taking the example you want to be better at a particular skill within design. For example, typography, there is a lot to understand. You can understand the rules and the principles behind good typography. Without practicing, learning from your mistakes and understanding what you need to improve from the repetition.

Vectors are free

Aaron Draplin says ‘vectors are free’ and that’s something to remember when designing. You start out making something and you’re going to change direction slightly. Duplicate it and work on it.

Now you can iterate in many directions without worry of being able to revert. It’s a simple mindset change, but it’s really helpful.

Take a break

Breaks are important, whether that’s a walk or sleeping on something. It’s important you come back to a design with fresh eyes. If you’re struggling with your vision, but have something almost there a break will be good for you.

There has been many times I’ve left a design and come back to it after a nights sleep to carry on and make improvements that I’m happier with.

Not only this, but prolonged breaks and recognising when you're pushing yourself too hard is key to your creativity.

Have your colour palette ready

You may be using swatches already, or have a bunch of shapes which are filled with the colours. If you don’t draw some shapes now with each of your colours.

Select the objects and copy

Next copy each of the objects. This will copy an SVG version of your colour palette to the clipboard.

Open your text editor

It doesn't matter what app you use here you need something to paste in what you've copied.

<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In  -->
<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
  x="0px"
  y="0px"
  width="546px"
  height="98px"
  viewBox="0 0 546 98"
  style="enable-background:new 0 0 546 98;"
  xml:space="preserve"
>
  <style type="text/css">
    .st0 {
      fill: #ff7e6d;
    }
    .st1 {
      fill: #553143;
    }
    .st2 {
      fill: #ffdb6d;
    }
    .st3 {
      fill: #09465c;
    }
    .st4 {
      fill: #27cba4;
    }
  </style>
  <defs></defs>
  <circle class="st0" cx="48" cy="48" r="48" />
  <circle class="st1" cx="162" cy="48" r="48" />
  <circle class="st2" cx="274" cy="48" r="48" />
  <circle class="st3" cx="386" cy="50" r="48" />
  <circle class="st4" cx="498" cy="50" r="48" />
</svg>

Yours will resemble something similar to this code.

Grab the CSS

Copy the code between <style type="text/css"> and <style>. Delete the rest, paste it back in and tidy it up so you have the hex codes left.

#FF7E6D #553143 #FFDB6D #09465C #27CBA4

Each colour should correspond with Illustrator

The order each colour is should be how you made them in Illustrator. That’s all you need to know, you’ve got your hex codes.

This is something I find less tedious than selecting the object, opening the fill window and pasting the value elsewhere. It’s a technique I consider to be one of those: “why didn’t I think of this sooner”.

Your pattern can be anything

A pattern is something that is repetitive, a piece of an image that can repeat over and over. It can be anything, so long as it's seamless.

So if you have a set of icons, or shapes you would like to repeat, it can work. In the example throughout this post I will be using several icons I have made.

More importantly, it has to work for your design, which depends on the look and feel you’re going for.

Initial setup

Start a new document, with a 600x600 artboard. This will ensure you don’t make a huge tile, but still allow for a good repetition.

Now you want to turn on snap to pixels, you can find this under View > Snap to Pixel. The idea is to try keep everything a whole pixel.

Gather your objects

Next, add each of the objects you want to be part of the pattern to the artboard.

Make sure you keep the originals. This will help later with duplicating and positioning.

Place centrally working your way outwards

The shape should kind of form a diamond. The reason for this will become clearer in the coming steps, but you’ll be adding objects manually to the centre.

You want a pattern to feel completely random, yet consistent at the same time. You create randomness through the objects used and consistency through spacing.

Placing objects

Resize, rotation and colour can all add to how random the pattern feels.

Density

If you pack the objects together it’s going to appear busier. So if you’re to overlay text on it, you may struggle unless the application is subtle.

If you space your objects out much more you’ll have freedom to overlay text easier. It will allow you to make it more striking as a result. As text will be less likely to blend in.

It’s all a balance, which is something to consider with your design.

Repetition

The repetition of the pattern can be difficult to make appear random. This is due to the amount of objects you may have, but don’t be afraid to place two similar, close to each other. It won’t be as obvious as you think.

This is where applying a different transform can really help.

Transform each

If this fits your pattern and look you’re going for transform each is great. To use transform each, select your objects and go to Object > Transform > Transform Each.

You can randomly change most things in this window. Make sure you check random, and tweak the values a few times as each time is different. You should be able to refine it to suit the pattern best.

As the image shows it works well to add more randomness to your pattern.

Rotate, scale, reflect, etc.

Transform each is great, it does the majority of the work quickly. There are instances where it may not be favourable or you need to keep things precise.

This is where the regular transform controls come in. An example may simply be to flip a search icon using reflect. All these options can be found under Object > Transform.

Preparing the pattern

The next steps will finalise the pattern and make it be repeatable.

Make sure the dimensions are whole numbers

This step will generally make your life easier later. As you can see in the image above the dimensions are 376.001px x 411.314px. It would be nicer if this pattern was 376px by 412px, whole even numbers.

Find the item that’s positioned on a half pixel

This is a quick method I like to use to make a selection of objects a collectively have a whole pixel value.

Look at the width and height of all of them and look for a value, in this instance, around the .314px off. If you find that value nudge it to the next pixel value up or down. Then repeat the process to find any others.

Change the transform origin and make it a whole pixel

If I want to nudge an item to the right, I need to make sure the transform origin is also the right.

In the transform panel you can see 9 squares in a grid like appearance. Where you click depends on where you want to move the object. If you wanted the object to be off the half pixel at the bottom, you would change the transform origin to the bottom.

You should then select all your objects again and check if you have whole pixel values.

Break it up into quarters

This is the most important step as this sets you up in the right way so the pattern will repeat.

Duplicate 3 times

1. Select all your placed objects
2. Group with cmd + g
3. Paste in place with cmd + f 3 times (so there are 4 in total)

Mask in quarters

Take the dimensions of all your objects and divide that by two. In the case of this post, it’s 380x412, which makes 190x206.

1. Draw a rectangle which is those dimensions (in my case 190x206)
2. Select both the rectangle and the top pattern layer
3. Click the pattern layer the selected area should change (aligning to key object)
4. In the align panel (in the menu Window > Align)
5. Align to the top left
6. Press cmd + 7 to create a layer mask

Repeat this process 3 more times, except going to each corner of the pattern.

Move each masked quarter to the diagonally opposite corner

This is what makes the pattern repeatable, as at each of the corners it will join.

To do this quickly and accurately use the align panel and make sure you’re aligning to the artboard.

Once you have them aligned correctly, select them and press cmd + 2 to lock them. This will ensure you don’t move them later.

Fill in the remaining area

There will be space in the centre, which you can fill in with the elements you used earlier. You don’t have to be too mindful of repetition here, it’s the consistency of spacing.

Start filling in round the edges working your way in. Once you’ve done this you can make further tweaks.

Finalising the pattern

The final steps will now make the pattern usable. You’ll need to expand and trim the objects that are masked, make it into a swatch and any final adjustments.

Expand and trim the excess

It’s the frustrating thing about masks in Illustrator, when you create a swatch it accounts for the excess masked with empty space.

1. Expand appearance by going to Object > Expand Appearance
2. Expand the stroke and fill by going to Object > Expand
3. Open the pathfinder panel Window > Pathfinder
4. Under the ‘Pathfinders’ heading click ’Trim’

You should notice a difference when selected.

Add a background layer

Draw a new rectangle with m and set it to be the size of the artboard. It can be transparent or have any fill of your choice.

Group together everything with cmd + g. Adding this layer helps keep the pattern correctly aligned.

Make it into a swatch

Open the swatches panel Window > Swatches and drag your pattern to the swatches panel. It should appear as a usable swatch.

Testing and identifying adjustments

Now you’ve made the pattern into a swatch, you need to make sure it repeats nicely. Draw a large rectangle (at least 3 or 4 times larger than the pattern itself) with m.

Next, fill it with your pattern in the swatches panel. You’re now looking for mostly spacing issues that are apparent. It’s only at this stage you identify them.

Applying adjustments

You may have a few changes in mind, open the swatches panel and double click your pattern. You’re now in an isolated view to modify the pattern.

Once you’re happy with the changes you can exit it by clicking ‘Save a Copy’ or ‘Done’ under the toolbar near the top. If you want to keep track of changes a copy may be beneficial.

That’s it

You should have a repeating pattern now. You can also duplicate the pattern swatch and modify the colour in the same way.

You can apply the technique to most patterns. The complexity depends on the type of pattern you want to make.

What is kerning?

Kerning is when you adjust the space between two individual letters. In the world of fonts, it’s the relationship between two letters. Making them feel like they were intentionally placed near each other.

In the image you’ll see on characters like ‘W’ that the guides go under the letter. This is an important benefit of kerning, which I will cover in more detail later in the post.

You’ll commonly use kerning for logo type, art directed pieces of design, and generally areas where you know the words are never going to change.

Kerning is built in

The vast majority of fonts will have their own kerning defined within. Letters where the space appears larger need what’s called optical adjustment. This is where the type foundry will define the way certain characters behave together. So where you have, for example, a capital ‘w’ before a letter the space will be adjusted accordingly.

So why do it yourself?

It’s not always perfect and it’s generally make or break for having a well-designed logo. You also have to consider the usage intentions of the typeface, as it may be more suited smaller or larger sizes. So while there is nothing stopping you from using a particular font how you wish, you will likely find undesirable spacing between letters.

In the image there are two examples of text. The example without kerning, you can see less desirable distribution of spacing between many of the letters.

Particularly the ‘er’ pairing, there is too much space for the size of the type. The ‘rt’ pairing is an awkward combination, because they meet closely, but also have empty space below that. With that said they benefit from a tiny addition of space.

Kerning applied to the font depends on the intended use

In the example, large type was used and the kerning applied was to reduce the spaces between letters. Whereas, if I were to shrink the text down with the particular kerning applied, the spaces may need to be increased.

If you were to choose a display typeface the kerning will have been optimised for larger sizes. Alternatively, one for paragraph uses will be optimised for smaller sizes. Using each of these out of their intended uses will mean more adjustment is necessary.

A display typeface will have tighter kerning at smaller sizes, because it compensates for its use at larger sizes. A paragraph typeface will have looser kerning at larger sizes, because it compensates for its use at smaller sizes.

What is tracking?

Tracking is similar to kerning in the sense it adjusts the positions of letters. However, tracking adjusts all the spacing between letters by a specified amount. It disregards the relationship between letters.

The differences are subtle, but important. If you compare both sets of type in the image you will notice where tracking is poorer in comparison to kerning.

Tracking in CSS is similar to letter-spacing

They essentially are the same. You can use the majority of measurements available to CSS, but it doesn’t take a unitless value like tracking.

The closest measurement to tracking is em. As this will make the spacing relative to the font size, which is how tracking works.

How do I convert tracking to letter-spacing?

The most accurate method to convert tracking for CSS, is using em. 100 tracking is the equivalent to .1em. 150 would be .15em, 200 .2em and so on.

Hopefully you can see the pattern that emerges for translating the two. It isn’t 100% precise, but it does match closely if you want to achieve consistency between all type on your website.

How to kern in Illustrator

It’s a simple task to carry out in Illustrator, however a bit trickier to master.

Kern quickly with arrow keys

1. Press t
2. Place your cursor between two letters
3. Hold alt
4. Nudge with left and right arrow keys (use shift for larger jumps)

Precise kerning with the character panel

1. Place your cursor between two characters
2. Enter a value into the box
3. Tweak until satisfied

You can also use this dropdown to apply different types of kerning. For example, ‘optical’ applying this across the whole type should make the overall kerning better.

How to distribute kerning space

The techniques to master kerning take some time. As I mentioned earlier it’s making the space feel equal between all letters and natural. While it’s inefficient to kern whole blocks of text, doing so for logos and smaller type compositions can improve legibility as well as overall quality.

Apply a little blur

Doing this means you’ll see the type blur slightly. This can help identify areas where letters may merge poorly.

Zoom out

This has a similar effect to adding blur. Whilst it’s not an accurate representation of the way it will be read. It can help you identify poorer kerning.

Optical alignment: nudge under capitals

This is more of a tip. Where you have an uppercase letter like ‘T’, ‘Y’ or ‘P’ you’re usually better off nudging slightly under the letter.

This may seem to go against the true bounds of the letterform, however, in the world of type, optical alignment nine times out of ten is better.

Use ligatures

A ligature is where two or more letters form one. They are very handy for creating a better relationship between two letters. But not every typeface has ligatures.

The combinations in the image, show how the letters combine. It’s quite obvious and if this is new to you, it may appear worse. However, in the context of reading, your eyes only partially take in letterforms, so ligatures help with reading efficiency.

Ligatures improve readability because when you read and scan text you don’t take in every letterform. Ligatures can help make this more efficient by reducing awkward spaces. They are there to make things feel more natural and intentional.

How to apply tracking in Illustrator

Tracking requires the tweaking of one option, like kerning but controls all letters. To apply tracking it generally works in increments of 100. However, you can use any number necessary for more precise control.

1. Select your text layer or specific line of text
2. Open the character panel with cmd + t
3. Set the value in the box by clicking the dropdown arrow or typing a number

Use cases

There are a few use cases of tracking which are useful out of choosing to do so for style.

Decrease tracking to titles

When using a font size which is large you can increase readability by applying negative tracking.

Increase tracking to all/small caps

When making something all capitals, usually at a small size it is stylistic. However it can usually benefit from a small increase to tracking.

As all caps letters near each other may appear too close. Especially at a smaller size you will benefit.

Recap: when to use kerning or tracking?

When you have complete control over the content. Kerning only makes sense in places you can apply it quickly. It’s not possible to apply on a large scale.

A logo is the main use case, but you may have a one off image that you want to typeset and have ideal kerning. If you’re applying it to your own website, tracking (letter-spacing in CSS) is the better option. It’s highly inefficient and impractical to maintain kerning at that scale.

Taking a break

Firstly, it’s been challenging to write posts weekly and now feels like a good time to take a break. I want to focus on getting a solid portfolio completed and plan where this website should head. I also want to work on a few website improvements and make it more appealing long term to be subscribed to the newsletter (as I’ve been saying for months).

This is likely to take a couple of months, but not having to juggle it with writing a post each week allows me the focus.

Thanks for reading

Now on to the more positive stuff. I would like to thank you for reading and visiting this website. I have steadily begun to build a following and I’m thankful people actually find the things I write useful.

Things I wanted to achieve in 2016

I had several goals over the course of the year gone I wanted to achieve:

• Position myself a designer
• Build my confidence
• Become a better writer
• Introduce higher quality content
• Post featured images to dribbble
• Explore the idea of screencasts

Positioning myself as a designer

I’ve definitely worked on positioning myself as a designer. That has been helped by the redesign. The changes were really positive.

This was the most important goal, I want to be seen as a designer first. There's still a way to go and things to debate, like dropping anything code related altogether.

Finding my design voice

I feel more confident about posting things now, I used to have doubt. It’s still there, but I’m not as afraid to post about certain topics as I used to be.

I’m still working on finding my design voice. I admire the confidence and honesty of Eli Schiff, Armin Vit and Tobias Van Schneider. Each have a different approach to writing and critique.

They write about design without reliance on how a design meets a certain metric. We need more writing like this, but also more writing you can actually learn from. Particularly visually what makes good design. It’s a hard topic to teach.

This is something I still need to work on. As metrics and analytics don't stop you from designing things that look like crap.

Twitter and dribbble are still an issue

The main issue with twitter is I don’t tweet that much to begin with, so I don’t want it to be a self promotion feed.

Posting featured images (and work in general) to Dribbble is a confidence issue. I don’t think the featured images are high enough quality—so that’s something to work on over this next year. Expanding into the work I mentioned earlier with my portfolio.

Explore the idea of screencasts

I know the majority of my posts would work well as a video tutorial. It’s just a no brainer, but there is lengthier production times and I just never could persuade myself to do it. I recognise the importance, maybe I’ll convince myself in the future.

Introduce higher quality content

I was pleased with much of the content I wrote, I made a few series. Series of posts allowed me to pick something and see it through as a topic. They take a lot of planning and effort. They don’t receive a huge amount of attention.

It isn’t too off putting, but as the year went on I introduced the newsletter and it added to the workload. This is where things got difficult. It was hard to maintain the same quality I believe. It’s part of why I’ll be taking a break and evaluating the way I handle this.

Site goals

I didn’t have any make or break goals, it’s more: “if I hit this target, great.” Which I had two in mind:

• Achieve month on month traffic increase every month by 10%
• 40k visits per year done at the start of October

Growing month on month traffic by 10% was a more than ambitious goal. It scales exponentially, it was possible for a few months. The majority came very close with 8-9%.

Generally, each month traffic beat the previous month except April, August and December. April was due to a spike in March so it couldn't be matched. August and December were slower months due to the summer/holiday season.

Traffic continued to be strong from September through November, I almost reached the limit of the free plan in GoSquared. So that is a new problem to solve as £39/month isn’t something I can afford. Google Analytics is awful, I use it as more of a backup as I knew this day was coming.

It’s a shame as GoSquared is a great analytics platform for many reasons.

Yearly stats

Here are some of the stats from my analytics over the course of the year.

Top 10 article

1. Creating a horizontal scrolling responsive menu
2. Creating custom stroke width profiles in Illustrator
3. Using flexbox for horizontal scrolling navigation
4. Enhancing horizontal scrolling with flickity.js
5. Flexbox quick wins
6. Get up to speed with CSS shapes
7. A guide to vertical rhythm
8. Using BrowserSync and Safari for testing your responsive website
9. Remove letter-spacing from last letter
10. Using srcset with the_post_thumbnail() in Wordpress

Visits month by month

A comparison table of visits in 2016 versus 2015.

Visits by notable browser

Yearly differences

Traffic was up over 200% over the course of the year, a huge increase. This was down to more articles being picked up in search results and sharing happening.

Found something that works? Run with it

I have had a lot of success with the horizontal scrolling theme. So I have wrote 4 or so posts in relation, they have also seen a reasonable amount of popularity.

Featured in CSS Layout News

I was featured in CSS Layout News newsletter back in March for the CSS shapes article I wrote. That felt like the first kind of recognition. In turn directed a nice amount of traffic. It was picked up by Stephanie Walter and HeyDesigner and a couple of other sites.

The three sources mentioned were the most significant influence.

Notable tweets

I wrote about tachyons and one of the authors Adam Morse (@mrmrs_) tweeted it out a couple of times. This article was a positive review of tachyons, but I still didn’t expect much to come of it.

Many shares happened with the CSS shapes article too.

Quieter through summer

Things seemed quieter through July and August, versus last year where there was a significant boost. It is typically holiday season, so that's fine, come September there was a huge spike. It continued through October which was a surprise!

Apple News

I submitted the blog to Apple News, initially this didn’t really have an effect on traffic. However, once I had posted the case study for version six, it saw a fair amount of traffic.

An observation I made was ‘case study’ type posts saw more visits. Regular posts although with similar content saw much less traffic. I don’t know why this is.

Overall continued growth

I’ve been pleasantly surprised with the continued growth. It’s small in comparison to others, but to avoid comparison I’m pleased. However, the most important thing to me is to retain visitors, which is making progress.

The redesign

The biggest change to the website in 4 or so years. It has truly made a huge difference. I put the redesign live at the end of August.

The impact was better than I could have imagined. Page views per visitor have improved significantly. I've already begun making many changes since and have many more in mind.

On to the next year

I'm not going to set any goals within this post. I aim to evaluate them after I've got my portfolio together and made some plans.

I hope you have a great year ahead.

There are two techniques

The first technique combines two shapes but allows them to appear like one. This is handy for manipulating a shape that is transparent or refining in general. The second is a quick way of doing a clipping mask. This is handy for creating highlights and shadows, not having to worry about the outer shapes.

Method one: non destructive pathfinder

Pathfinder is one of the handiest tools within Illustrator which by default will combine shapes removing all knowledge of the previous state.

Open the pathfinder

You can do this by finding Window > Pathfinder.

Draw your shapes

Next the best way to demonstrate this is to draw two shapes, overlap them and reduce their opacity.

Select your shapes and hold alt using a pathfinder option

The important part is to hold alt, it will combine both shapes without destroying their paths.

After making using the pathfinder on the shapes, you’re free to change them as you like.

Use the direct selection tool to edit further

To select a shape press a to use the direct selection tool. You can also double click to isolate them, which can be easier to change the shape.

Method two: choose a drawing mode

Choosing a different drawing mode allows three options: normal, inside and behind. For this example you need inside.

Select an object

To be able to change drawing mode you need to select an object, so it can be used as a mask.

Change to the inside drawing mode

With the drawing mode, generally you will want to choose inside. This is a quick way to create a clipping mask out of any shape. The benefit is you can draw multiple shapes inside another shape and not worry too much about the remainder.

The icon can be found below the fill and stroke options in the toolbar.

A dotted border should appear

This is how you know when a different drawing mode is active. You’re free to draw shapes anywhere, however, parts will not be visible outside of the mask.

To exit select normal drawing mode

Once you’re done with drawing inside you can select the normal drawing mode.

That’s everything

These are two methods which allow you to combine shapes non destructively. Are there any that have been missed? Let me know on twitter.

Icon fonts are just too convenient

I saw a tweet recently from Brad Frost asking for posts that sold the use of SVG for icons. From my perspective, SVG is part of my workflow. When designing being wary of each asset that needs exporting is part of the job.

However, there exists the use of dropping in FontAwesome, relevant CSS and off you go. I’ve never really used FontAwesome, but I have used icon fonts and understand the speed and convenience they offer.

SVG is more performant

Like everything there are pros and cons. Icon fonts are at the mercy of page rendering significantly more so than SVG. You need to download the font, then the browser needs render it. In a ~3s on 3G world the icon font has to go.

What SVG is up against

Firstly, what are the benefits of an icon font? Listing them will provide the competition for the SVG icon system.

• Icon fonts can be recoloured easily
• Hover/active states and change colour without a new image
• Can have a simple markup and class based structure
• Infinitely scaleable

A simple markup and class based structure is key

This is the most important part. Those who write the code just want to be able to change a class name, get an icon and keep code readable.

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

This is the approach Bootstrap uses, so this is the benchmark to achieve. Icons should be able to be applied by changing class names eg: .glyphicon-star and size adjust with the sizing of an element eg: .btn-lg.

Start with exporting

So let’s say you want to use a different set of icons and start using SVG. Setup is the most significant step and is the primary reason you will be put off this approach. I’ll be using Illustrator for the next steps.

Choose an icon set

I’m going to use SS Standard, which was my go to icon font. The next steps are tedious, but they only have to be done once. This set has 172 icons, so not a small amount.

Output all the icons

Type out each icon, this depends on your icon font or set of icons. Either way, you need to fill a document with each icon.

Change the colour to something that isn’t black. This ensures on export everything will have a fill applied, for finding and replacing later. Black is the default colour so no fills will be applied.

Expand them

Select the icons in your type layer and expand them by going to Object > Expand. This stops them from being a type layer (if they are).

Add each icon to the Asset Export panel and name it

By far the most tedious part, but a necessary step.

Exporting the icons

Go to File > Export for Screens.

Click the little cog icon, next to ‘Android’.

Click SVG and change the ‘Styling’ option to ‘Inline Style’. This will make it easier to find and replace shortly. Finally, make sure responsive is unchecked, as when the icons are generated the fallback png will be larger.

Find and replace the inline style

Using the export method earlier to apply a fill to each icon, it makes it easier to find and replace. Your style attribute should look similar to style="fill: #1a626e" in each icon file.

Find each inline style

style="fill: #1a626e"

Replace with (or a naming convention you feel appropriate)

class="fill-currentcolor"

Depending on which text editor you use this should be possible to do quickly.

Following the find and replace, you will need to add to your CSS:

.fill-currentcolor {
  fill: currentcolor;
}

Method one: Use Grumpicon.com (no build tool)

So now you have all your SVG files prepared, head over to Grumpicon.

Upload the SVG and download the files

After allowing Grumpicon to generate the necessary files, download them and it’s almost ready to go.

Grab the script with the enhanceSVG addition

Grumpicon hasn’t been updated to include the enhanceSVG option. So the loader script bundled with the download isn’t as useful. The enhanceSVG option is a crucial step in building this icon system. The script below includes enhanceSVG.

/*! grunt-grunticon Stylesheet Loader - v2.1.6 | https://github.com/filamentgroup/grunticon | (c) 2015 Scott Jehl, Filament Group, Inc. | MIT license. */
;(function (e) {
  function n(n, t, o, a) {
    'use strict'
    var i = e.document.createElement('link'),
      r = t || e.document.getElementsByTagName('script')[0],
      d = e.document.styleSheets
    return (
      (i.rel = 'stylesheet'),
      (i.href = n),
      (i.media = 'only x'),
      a && (i.onload = a),
      r.parentNode.insertBefore(i, r),
      (i.onloadcssdefined = function (e) {
        for (var t, o = 0; d.length > o; o++)
          d[o].href && d[o].href.indexOf(n) > -1 && (t = !0)
        t
          ? e()
          : setTimeout(function () {
              i.onloadcssdefined(e)
            })
      }),
      i.onloadcssdefined(function () {
        i.media = o || 'all'
      }),
      i
    )
  }
  function t(e, n) {
    ;(e.onload = function () {
      ;(e.onload = null), n && n.call(e)
    }),
      'isApplicationInstalled' in navigator &&
        'onloadcssdefined' in e &&
        e.onloadcssdefined(n)
  }
  var o = function (a, i) {
    'use strict'
    if (a && 3 === a.length) {
      var r = e.Image,
        d = !(
          !document.createElementNS ||
          !document.createElementNS('http://www.w3.org/2000/svg', 'svg')
            .createSVGRect ||
          !document.implementation.hasFeature(
            'http://www.w3.org/TR/SVG11/feature#Image',
            '1.1'
          ) ||
          (e.opera && -1 === navigator.userAgent.indexOf('Chrome')) ||
          -1 !== navigator.userAgent.indexOf('Series40')
        ),
        c = new r()
      ;(c.onerror = function () {
        ;(o.method = 'png'), (o.href = a[2]), n(a[2])
      }),
        (c.onload = function () {
          var e = 1 === c.width && 1 === c.height,
            r = a[e && d ? 0 : e ? 1 : 2]
          ;(o.method = e && d ? 'svg' : e ? 'datapng' : 'png'),
            (o.href = r),
            t(n(r), i)
        }),
        (c.src =
          'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='),
        (document.documentElement.className += ' grunticon')
    }
  }
  ;(o.loadCSS = n), (o.onloadCSS = t), (e.grunticon = o)
})(this)
;(function (e, n) {
  'use strict'
  var t = n.document,
    o = 'grunticon:',
    r = function (e) {
      if (
        t.attachEvent ? 'complete' === t.readyState : 'loading' !== t.readyState
      )
        e()
      else {
        var n = !1
        t.addEventListener(
          'readystatechange',
          function () {
            n || ((n = !0), e())
          },
          !1
        )
      }
    },
    a = function (e) {
      return n.document.querySelector('link[href$="' + e + '"]')
    },
    i = function (e) {
      var n,
        t,
        r,
        a,
        i,
        c,
        d = {}
      if (((n = e.sheet), !n)) return d
      t = n.cssRules ? n.cssRules : n.rules
      for (var s = 0; t.length > s; s++)
        (r = t[s].cssText),
          (a = o + t[s].selectorText),
          (i = r.split(');')[0].match(/US\-ASCII\,([^"']+)/)),
          i && i[1] && ((c = decodeURIComponent(i[1])), (d[a] = c))
      return d
    },
    c = function (e) {
      var n, r, a
      r = 'data-grunticon-embed'
      for (var i in e) {
        a = i.slice(o.length)
        try {
          n = t.querySelectorAll(a + '[' + r + ']')
        } catch (c) {
          continue
        }
        if (n.length)
          for (var d = 0; n.length > d; d++)
            (n[d].innerHTML = e[i]),
              (n[d].style.backgroundImage = 'none'),
              n[d].removeAttribute(r)
      }
      return n
    },
    d = function (n) {
      'svg' === e.method &&
        r(function () {
          c(i(a(e.href))), 'function' == typeof n && n()
        })
    }
  ;(e.embedIcons = c),
    (e.getCSS = a),
    (e.getIcons = i),
    (e.ready = r),
    (e.svgLoadedCallback = d),
    (e.embedSVG = d)
})(grunticon, this)

To keep this option build tool free is the reason I’ve added the script here. Ideally, I would link you to the source on Github, but it’s slightly different and doesn’t embed the SVG inline.

Add the script and initialise grunticon

Add the script to your website and additionally the initialisation of grunticon.

<script src="grunticon.loader.js"></script>
<script>
  grunticon(
    [
      'path/to/icons.data.svg.css',
      'path/to/icons.data.png.css',
      'path/to/icons.fallback.css',
    ],
    grunticon.svgLoadedCallback
  )
</script>

You will need to update each URL to match where your grumpicon generated files are located. Once you add an icon to your document in the next step this will ensure everything works as expected.

You can add the grunticon(…) script to the grunticon.loader.js file and load it async for better performance.

Method two: with Gulp using Gulpicon

Using a build tool will make this task easier in the long run. Assuming you’re already familiar with Gulp, I’ll get into the setup.

Install Gulpicon and glob

Navigate to where your gulpfile is stored in terminal and install gulpicon.

cd ~/path/to/the/folder/gulpfile/is

These are the relevant npm scripts to get Gulpicon working.

npm install -s gulpicon
npm install -s glob

Setup the task in your gulpfile.js

Adding the following to your gulpfile will make an icons task. In the files variable you may need to update this for where your SVG files are located.

var gulp = require('gulp')
var glob = require('glob')
var gulpicon = require('gulpicon/tasks/gulpicon')

// Use glob to get file paths
var files = glob.sync('./svg/*.svg')

// Set up the config object
config = {}

// Change the location
config.dest = 'images'

// Enable inlining of SVG
config.enhanceSVG = true

// Setup the 'icons' task
gulp.task('icons', gulpicon(files, config))

There are many other options you can customise, which can be found on Github.

Run the icons task

With your gulpicon settings all done, all that’s left is to run the task.

Using the icons

To add an icon you add the relevant class, which can be found in the generated CSS file, eg: icons.data.svg.css. Adding the attribute data-grunticon-embed will allow the SVG to be inserted inline.

<span class="icon-check" data-grunticon-embed></span>

This is all you need to add to get an icon to show.

Make it reusable and flexible with colour and sizes

To make your icon set more effective and more ‘bootstrap’ like you need colours and additional size classes. This is up to your preferences and website colour scheme.

.color-red {
  color: red;
}
.color-blue {
  color: blue;
}
.color-green {
  color: blue;
}

Colours don’t need to rely on using fill. Due to the class fill-currentcolor applied earlier, they will use the parent colour.

.icon {
  display: inline-block;
}

.icon-small,
.icon-small svg {
  width: 16px;
  height: 16px;
}

.icon-medium,
.icon-medium svg {
  width: 32px;
  height: 32px;
}

.icon-large,
.icon-large svg {
  width: 48px;
  height: 48px;
}

As mentioned earlier, the width and height dimensions were kept on the SVG. So the parent element of the SVG and the SVG itself both need dimensions adding.

For a nicer page load the parent element needs dimensions. Until the SVG is inserted, it doesn’t know the width or height.

Usage now looks like this

Add the relevant class names you desire and you’re good to go.

<span class="icon icon-check icon-small color-red" data-grunticon-embed></span>

Multicolour icons

With SVG you can have multicoloured icons. Depending on your icon all you need to do is add additional class names to the individual paths. This is a benefit icon fonts don’t have, you have direct control of the parts of an icon.

It is possible to have multicolour icon fonts, in a roundabout way. This is far simpler.

Reviewing against the check list

To recap what was set out to be achieved:

• Icon fonts can be recoloured easily
• Hover/active states and change colour without a new image
• Can have a simple markup and class based structure
• Infinitely scaleable

Every point in the checklist has been met. Easy recolouring and states, as well as a simple one element markup structure and of course being SVG they are infinitely scaleable.

I hope this is a good enough argument for you to use SVG. A chunk of work is necessary, but, similar levels of work has gone into FontAwesome and Bootstrap to make your life easier. If you want to change icon set and have some uniqueness in your design, it’s a necessary step.

Design

There are some great websites I came across this month. Ueno have put out some great work recently, with their own rebrand and PrescribeWellness.

Basecamp

I really admire the approach of Basecamp as a company, and I feel like this design reflects them well. They aren’t afraid to do things differently. It’s a pleasant redesign and features a lot of illustration.

Design Inc.

Design Inc. have been through a few iterations lately. The last version was better visually, but that could only go so far with the amount of services offered. This is a good fit and explains the what Design Inc. is well.

Friends & Fools

Big and bold design. There are some nice little details throughout the design and it’s a nice use of big type.

Inturn

The animated illustrations help guide you through the page and it helps you to understand the service. However it could be a little more descriptive for the final point, but generally you get it.

Ueno

Ueno are a constant source of inspiration and great work. I was curious to see what would come of their rebrand. I like how everything is nice and smooth as you scroll through.

Yoke

Quite a minimalist design, but the illustrations add a bit of fun. Following that is a nice grid layout of content. Overall really well designed.

PrescribeWellness

This certainly isn’t what you would think a healthcare website would look like. Scroll on through and there is smooth animations and little videos in the background. It makes for a surprisingly nice touch.

Toi

The animated image combining real life with a ‘blueprint’ style over the top is really nice touch and adds a sense of uniqueness. It’s persisted throughout the design. Each slide and section throughout is well considered.

Apps/Tools

Here’s a few apps/tools I found over this month. Most notably Setapp, it seems like a great idea and beneficial to both parties where apps are concerned.

Spark for Mac

I’ve been using Spark for iOS for quite a while now. It’s been a reasonable replacement for Mailbox, and now it’s out for Mac. I was using Nylas N1 before this. I’m not completely sure it will replace Nylas, but I like I now have a cross platform mail app with snoozing again.

The main thing is I feel like Spark won’t suddenly disappear.

Setapp

Setapp is a competitor to the Mac App Store. “Imagine having select applications, within easy reach whenever you need them. No stores. No ads. Just apps.” Currently in beta, but you can get an invite if you sign up. It aims to be a subscription service of apps. It looks really promising.

Logo Miner

If you need a logo this is the place to remember. It looks like a great source of logo files.

Rightlight

A free stock photography website, another to add to your collection to refer to. There’s some great photos, which I’m sure will be suitable for your projects.

Articles

Last months articles weren't very design focused, but this month the aim is to keep everything related to design.

The benefits of sketchbook work

What this article made me think more about was the detail within sketches. Sketches can both be detailed and quick with less effort than a wireframe.

As lately I've questioned the value of wireframes. They’re a time sink, for what can be little return value. It depends how you work and whether you feel they are beneficial. Over making a full design versus the discussion around them.

Rethinking message notifications on iOS

On the face of it this looks like a small improvement, but it would be quite significant. It’s similarly frustrating to get a notification and you reply within the notification, but the other person sends additional replies.

This usually means you miss some messages or have to go in the app to make sure you haven’t. I could see this improving things like that.

Beauty vs function

It is seen as a crime in today’s design world to focus on making things look good. It always takes a back seat. I believe we’ll eventually come full circle and start designing things without the fear of focusing on aesthetics.

Tobias has posted many great articles over the past month, so I would highly recommend subscribing to his newsletter, if you haven’t already.

Space yourself

All the different spaces available to us. I’ve found this really helpful for understanding which should be used where.

Why it’s time to prioritise visual content

People will visit your website and scan the content in a matter of seconds. The images they see will determine the likelihood of them lingering on your website.

It’s a fair point and a good reminder to try make content as appealing as possible. However, I don’t think you need the stock photography account recommended, there are plenty of free sites out there!

Top monospaced fonts for coding

I found this a handy list to find some variety in monospaced fonts. They’re in fashion lately as well, outside of code, so it’s a useful list.

That’s it for this month

There has been some great web design found this month and I’m particularly excited to see where Setapp heads.

The list is suitable for everyone, but does have that ‘for the designer’ edge. There’s a mix of things with varying price points to cover every range. I've provided prices alongside them in the currency that the website uses. As exchange rates change so often, I thought this was the best approach.

Hopefully you find it handy, if like me you need ideas sometimes.

Tombow ABT dual brush pen — £2.95

I’ve used quite a few brush pens and I’m not the most skilled. However, with the limited practice I have had using them, I found this to be the easiest to use. The reason I find it easier is this particular Tombow has a sturdier brush.

It also helps that it comes in huge variety of colours. I like to use a cool grey, to then be able to outline in a black with more control. If you’re after more colours, it may be more cost effective to buy a set.

View on Amazon

DDC: Pretty much everything — £19.99

I’ve been learning much more about branding in recent times and I’ve bought a few books as a result. This being one of them. What made me buy this book was watching Aaron’s Skillshare classes, they are superb. He teaches with personality and enthusiasm, which makes his classes fly by.

I figured it would be true of the book and I wasn’t wrong. The book is inspirational like his classes and it has many great logos in it. Along with some personal stuff and you really get a feel for who Aaron is.

Buy on Amazon

Logotype mini — £12.95

Similarly to the DDC book, this is another huge source of logos. It has a nice categorisation throughout so you can find similar logos, which may spark ideas for you. It lists the creators of the logos too, so you can go hunt out their websites and see what other work they have done.

Buy on Amazon

Let’s draw: Illustration school — £12.99

I bought this a few of months ago out of curiosity. I was drawn to the whimsical style. It’s a nice way to approach learning.

If you’re wanting to be better at drawing or want a good way to practice, this book will be suitable. It’s not just aimed at beginners.

View on Amazon

Apple Watch – from £269

I got an Apple Watch last Christmas, and I thought I wouldn’t want one. It’s a handy extension to the phone and has little conveniences. People generally expect you to use it most of the day, which is fair, but it’s the wrong assumption.

I definitely don’t, the most useful stuff for me is Apple Pay, passbook, timer, stand reminders and being able to see messages/reply. I have the notifications for only important stuff, that’s a thing that can be abused by apps so easily and is.

The only thing I don’t recommend is getting a white colour strap. Mine got dirty very quickly!

Native Union Dock for Apple Watch – £50

Still with the watch theme, it’s somewhat necessary to have a stand for an Apple Watch. I like how the feature sold is that it’s weighted. It’s quite a frequent occurrence when my watch is charging that I can accidentally knock the cable, or it gets detached from the magnet.

As an aside, Native Union make some nice phone docks too.

Buy on Amazon

Skillshare subscription – $96 year

A yearly Skillshare subscription is affordable versus other websites. If like me you don’t always have the time to learn on a monthly basis it can become costly.

Not only because of cost, but I find that Skillshare has more design material. In general design being taught is an area to grow over the coming months and years. If you hunt around you could probably get it cheaper than the $96.

Buy on Skillshare

Present & Correct stationery

I didn’t pick anything specific from here as it’s too difficult. Everything has a distinct style, so it would be unfair to narrow it down to one thing. If you’re after any stationery, I recommend browsing.

Browse the website

Sandqvist Hege Backpack — €220

A stylish backpack that’s not too small, but not too large and looks to cater to laptops. In last years guide I recommended a more travelling focused one. This is more suited for day to day.

Buy on Sandqvist

Umbra Toto Storage Caddy ~ £30

A really neat and tidy desk storage. I really like the compartment that opens.

Buy on Amazon

Ecooe teapot infuser — ~£16

I’m more of a tea person over coffee. This looks like a handy way to make loose leaves go further due to the amount of water it can hold. It’s also stove friendly so it can be kept warm for longer.

Buy on Amazon

Polaroid ZIP mobile printer – £99

It seems to be gaining popularity small printers for printing pictures from phones. As no ink is required, just paper refills, they’re a nice way to make use of all the photos you take on your phone. The HP Sprocket is an alternative and similarly priced option to this.

Buy on Amazon

Fujifilm Instax mini 90 ~£119

If you still want the polaroid style of camera and have the printing happen as you take the picture, this is a more modern take. There are a few variations, the mini 90 being the upper end. Polaroid do their own version too.

Buy on Amazon

Start with requirements

The requirements for the logo were to be youthful and fresh. As a new company, it’s important to be recognisable too. I wanted the logo to convey golf, but still have a ‘smart’ element to the design.

Get an understanding of the industry

I set out to brush up on a little golf knowledge. As it’s not an area I’m overly familiar with, outside of the basics.

I was looking for an edge, to help my imagination. In turn, I found 2 under par is an eagle.

It was something to go off. An eagle is certainly recognisable and a strong mark. The golf crowd would know the link surely? However, on its own, you can’t immediately say ‘yes, this logo relates to golf.’

Take an idea as far as you can

I worked with other ideas, trying to play into the number two. Ultimately that was trying to force it. The reason I was quite set on this, is down to numbers in logotype specifically, being difficult to work with.

As time and ideas went on, aiming for something seemingly obvious. I thought more around Go2Golf is a place for finding golf course locations. So combining the ‘location’ symbol with a golf ball and tee.

Recognise why an idea isn’t working

It would be easy to go with the magnifying glass metaphor, but that’s not youthful. Nor can you really reinvent that, it would be the same as any icon.

Present your ideas

From my sketches, I was happy to present my explorations. I explained the strengths and weaknesses of each idea, and why I came to each idea. Some were more suitable than others.

Taking the time to explain your thought process with the client early can make the process much easier when presenting a final design. Going forward with the strongest idea, the location pin and tee combination was well received.

Execution

Usually, I would bring the sketches into Illustrator. However, I didn’t feel it was necessary for this instance. The basic shapes would be built from what’s available in Illustrator’s tools.

Relying too heavily on the sketches

I used my sketched idea as a direct basis for creating the mark. More often than not this approach works, but this time it didn’t.

I made the mark a few times following sketches trying different proportions. It just wasn’t working. It was difficult, I had doubts about the idea.

Leave it and come back to it

Whenever you hit a roadblock it’s important to take a step back. Have a break, sleep on it, go for a walk. Anything that involves letting the idea be left alone.

So I came back and I gave a different approach a try. That was it.

Choosing suitable type

What kind of typeface can communicate golf, but meet the goals? Immediate thoughts were bold and geometric.

I settled upon ITC Avant Garde Gothic. Other options were the likes of Futura and Brandon Grotesque. In the end, it was to the differences in the very bold weights of Futura and Avant Garde that made the decision easier. Brandon Grotesque was a little too soft in appearance.

Numbers can be quite clumsy in logos

As mentioned earlier, they’re difficult to work with. Especially the number two. It has a lot of white space around it to make things feel awkward. My aim was to de-emphasise it slightly, by making it smaller. This was another factor in the type choices.

As a result, it adds some character and distinction to the type, whilst taking some of the attention away from it.

Presentation is important

I used Marvel to present the logo. At first, this may appear strange, as it's a prototyping tool.

However, I wanted it to be seen in the browser. While not completely in the right context, it’s always helpful to see things where it will be used most. It's also easiest to keep everyone involved on the same page.

Getting into the example

Firstly start out with what you'll end up with at the end of this post. Then onto why this solution was reached.

It’s tricky

The difficulty with making this function as a multilevel/submenu is purely based on how it’s achieved. If you follow the traditional markup pattern it’s not really possible without complex JavaScript.

Overflow means typical methods don’t work

Rightly so, you keep the related markup together using a list. Then positioning through CSS, means you can’t show the submenu. The overflow ensures it remains hidden.

As the example shows, the biggest problem is you won’t be able to get the correct width or positioning. So how is it solved?

The approach unfortunately doesn’t cater too well to Wordpress. You’d have to set up a wp_nav_menu walker.

You need to use JavaScript

Anyway less of the can’t, you will need to use JavaScript. Which isn’t a huge problem, you just need to ensure pages can be navigated to when it’s disabled.

HTML setup

You may have more submenus, but for the sake of brevity I have included the markup here for one.

<header>
  <nav class="nav scroll">
    <a href="#" class="logo">Logo</a>
    <a href="#" class="nav-item active" data-id="blog">Blog</a>
    <a href="#" class="nav-item">Portfolio</a>
    <a href="#" class="nav-item">Downloads</a>
    <a href="#" class="nav-item">About</a>
    <a href="#" class="nav-item">Contact</a>
  </nav>
  <div class="submenu scroll" id="blog">
    <a href="#" class="nav-item">All</a>
    <a href="#" class="nav-item">Design</a>
    <a href="#" class="nav-item">Illustrator</a>
    <a href="#" class="nav-item">Photoshop</a>
    <a href="#" class="nav-item">Development</a>
    <a href="#" class="nav-item">CSS</a>
    <a href="#" class="nav-item">JavaScript</a>
  </div>
</header>

Adding an additional submenu means repeating the submenu div but changing the links to the relevant ones.

The same markup pattern for the submenu

As you can see, the submenu has to be separate from the actual navigation, but uses like for like markup.

You can use the exact same markup pattern for each submenu, so CSS doesn’t need to be different. It’s just lacking the semantic nesting that you would normally expect.

data-id and id for JavaScript reference

Each top level navigation item has a data-id. This is to reference the actual submenu which has an id later on with JavaScript.

CSS setup

The CSS required doesn’t need a huge increase to accommodate multiple levels. Each submenu will share the same scroll based CSS. The additions are for active states.

.scroll {
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.nav-item.active {
  color: #fff;
  box-shadow: -1px 0 #727c87, 1px 0 #727c87;
  background-color: #727c87;
}

.submenu {
  height: 0;
  opacity: 0;
}

.submenu.active {
  height: auto;
  opacity: 1;
}

.scroll controls the scrolling behaviour when needed. .active states for both navigation items and submenus. Importantly .submenu is hidden through the height.

This makes it have the ability to be transitioned, but I decided against it. The result is an ugly transition and to improve it, is out of the scope of this post.

If you would like a more in depth understanding of this approach, referring to the original horizontal scrolling post is best.

JS setup

The most important addition to making this work. Without JavaScript, your top level item will link through. So that should be a suitable alternative.

;(function (window, document, undefined) {
  'use strict'

  // Select nav items that have submenus
  var hasSubmenu = document.querySelectorAll('[data-id]')
  var active = 'active'
  var i = 0

  // Show the submenu by toggling the relevant class names
  function showSubmenu(event) {
    // We lose reference of this when filtering the nav items
    var self = this

    // Select the relevant submenu, by the data-id attribute
    var submenu = document.getElementById(self.dataset.id)

    // Probably best to prevent clicks through
    event.preventDefault()

    // Referring to the submenu parentNode
    // find all elements that aren't the submenu and remove active class
    var otherSubmenu = Array.prototype.filter.call(
      submenu.parentNode.children,
      function (child) {
        if (child !== submenu) {
          removeChildClass(child)
        }
      }
    )

    // Referring to the the nav item parentNode
    // find all elements that aren't the submenu and remove active class
    var otherItem = Array.prototype.filter.call(
      self.parentNode.children,
      function (child) {
        if (child !== self) {
          removeChildClass(child)
        }
      }
    )

    self.classList.toggle(active)
    submenu.classList.toggle(active)
  }

  // Remove the active class
  function removeChildClass(el) {
    // Check if it exists, then remove
    if (el.classList.contains(active)) {
      el.classList.remove(active)
    }
  }

  // On clicks show submenus
  for (i = 0; i < hasSubmenu.length; i++) {
    hasSubmenu[i].addEventListener('click', showSubmenu)
  }
})(window, document)

The summary of this code is to check for all elements with a [data-id] and loop through them. Adding an event listener that will use the showSubmenu function. This uses the [data-id] to find the element by ID. Finally, toggling the active class on the element and off any elements that may have it.

In summary

You must separate out the submenus from the item. This means breaking a setup you’re used to, but it’s really the only way. Otherwise, you would need to JavaScript to heavily manipulate things.

Then each navigation item needs to be related to the relevant submenu. You use JavaScript to tie that together and apply the relevant class names. Toggling the visibility of each submenu.

Watch out for touch screen usability

Dropdown menus on smaller screens aren’t hugely favourable. If your intention is to link to the top level item then a slightly different solution will be needed.

In the solution above you prevent clicks on the top level item. In terms of the blog submenu, you would have access to 'All' as another way to get to the blog. That’s the easiest way to get round it and keep things clear.

touchstart instead of click

I’ve only accounted for clicks in this instance, but it should work equally as well here without the need for touchstart.

You would change the following line from

hasSubmenu[i].addEventListener('click', showSubmenu)

To the following

hasSubmenu[i].addEventListener('touchstart', showSubmenu)

Accessibility issues

I don’t know a huge amount about accessibility, but from my understanding it is possible using the correct aria attributes. I don’t have enough knowledge to fill the gap accurately.

Example

That’s everything, it’s possible that you could use a more regular setup and modify the source order with JavaScript. I didn’t want to get into that, but it may be something I revisit in the future.

So while it’s not a post that directly gives value, it helps me keep on top of the library of content that I am acquiring.

Subscriber download update

I’ve made the decision to go against coding it up. It’s something I’m figuring out between now and new year the direction for this website.

Code is hugely time consuming, for now, I’m working on making the Illustrator files better designed and more comprehensive. Thinking ahead to coding it up made me scale it back.

I feel like my aim should be by the end of the year, it’s a slow process. Even though it's not a huge amount of work. It's making time.

I want to make it something valuable and a worthwhile download. Whether that be from the structure of the document, to how I've designed the UI kit. 

Search results spacing bug fix

This was a fix I’d put off through stubbornness. I had to make an awkward code change to accommodate the search pages. It’s probably a CMS bug, but I’m not sure.

Better font loading with font face observer

I’d started things off right with the development of this site. The page load times are pretty good. However, I want to improve this further, and fonts are a huge burden on page load.

I've used the fontfaceobserver technique. It makes sure the font is shown when it is downloaded and ready. It is the future for loading of fonts, from what I'm aware.

Speedtracker to monitor

Which leads on to speedtracker, which I setup recently. The rendering is certainly an area for improvement. When I was looking at the filmstrip it’s 1.5s before anything is shown.

Some of that comes from server connection (as it’s testing from the US and the server is UK based) so it would be ideal to get that ~1s and under 1s for UK. Hopefully the font load change improves things. This will help keep track of that.

Exploring lazy loading gifs/images

Many of my posts contain images now. This means that page weight goes up significantly. I’m looking for a lazy loading image library that is straightforward and accommodates a ‘no-js’ fallback. 

I’ve used Google’s PageSpeed lazy load module before. While it was as simple as it gets, it doesn’t work with srcset and the ?noscript parameter it adds is undesirable. If you’ve had any experience with this I would appreciate the heads up on twitter.

Two more hamburger alternatives

Basecamp recently redesigned their website and Quartz is another I came across.

Both are great navigation examples. View all the examples in the post.

That’s it

Next week will be back to the normal schedule. Have a great week.

Starting with websites

Here’s eight websites, there’s a lot of illustration and great use of colour throughout this set.

Riyo

The top to bottom use of illustration, calming and soft colours used throughout make this a really nice design. It really builds a level of trust and reassurance. The main colour used is red, most people would get scared off using red, but it shows confidence.

Nuage

There is some stunning attention to detail throughout this website. It’s minimalism, done right. Lots of personality throughout. Great use of whitespace and clarity, which really sets itself apart from other domain vendors.

Billdogg

Simple straight to the point, and you know what you’re going to get without having to shove a massive image in the background. The colour choice is vibrant but not overwhelming. The illustration style really adds to the page. With little splashes of colour throughout the page it really ties it all together.

Mess Hall

I particularly like the full viewport intro screen, that has a nice badge. It’s really well done. Which transitions smoothly into what it’s all about. There are some further nice transitions in the carousel just below.

Tasting Table

I really like the way so much information is presented in this website. There’s a variety of ways to browse and scroll through content. It’s engaging and a refreshing design for today’s world.

Waaffle

Again another page without having to have a random stock photo as the background. The illustration and animations throughout are superb. I particularly like the logo, which also is used for the loading indicator.

I really like the use of purple, orange and yellow throughout—a tricky combination to use—which is pulled off nicely.

Ambassador Watches

If you’re looking for a way to communicate luxury, look no further. I like how the headings are using small caps, but genuine small caps. The website is spot on to match the style of the watches.

When I first viewed this website and to get through to a watch page, I was surprised at how little the watches cost. Great design throughout.

Mylo

Sometimes I think the huge type thing is overdone, but that’s probably because it’s done poorly. Mylo does it well. You really get a sense that you’ll be getting good fashion choices and what the app is all about. It details and presents the app really well outside of the stereotypical page, it is possible.

Articles

Here’s some articles that I have found a good read.

How to make your portfolio actually get you clients

There’s some good advice in the article, but I’m not sure I agree with it all.

However, the main takeaway I gained was is there actually a good portfolio? I’ve read so many ‘do this, do that’ articles, which led me to: it depends on your situation. Are you trying to find a new job or get client work?

The way that you present the work if you're in either situation will be different. Then inside that there are ways you could tailor that further.

I've never had a goal

I relate to this article in the sense I find it hard to set goals. I don’t know where exactly I want to be in 5 years. In fact over the past year or so, I’ve been more unsure than ever. I feel like you’re looked upon wrongly if you don’t.

I’m happy designing, writing this blog and learning. I have a rough idea of where I want things to go, but I mostly take it week by week.

Digging into cart abandonment emails

Really Good Emails is a huge source of email knowledge. This is a great article on cart abandonment. Email is a valuable tool used right and this was an area of curiosity for me.

Marketing is something I know is skill I need to learn more about, as a designer it’s important. Without it you don’t sell things. I want to learn, but approach it by not being a forceful annoyance.

Comprehensive guide to font loading

I've been looking into a way to load fonts better. Considering the flash of invisible/unstyled text, but maintaining performance.

I purposely load the body font asynchronously here as it slows down page load times dramatically. I want to improve this further as the sans serif, albeit less, still slows down things. This guide helps, but I'm still wrapping my head round it!

shift + x — Switch stroke and fill

Switch fill to stroke, or stroke to fill. This should be a frequent occurrence, it is for me, I’m almost certain it will be for you.

cmd + shift + h — Hide or show artboards

Hide or show artboards with this shortcut. Sometimes artboards get in the way or you don’t really want to bother with one. Use this and Illustrator will hide them and turn your background white.

cmd + 2 — Lock layer

Lock layers with this shortcut. No more going into the layers panel.

cmd + alt + 2 — Unlock all layers

Unlock all layers with this shortcut. No more digging about in the layers panel wondering where the locked layer is. Even the most organised person will save a lot of time with this.

cmd + y — Outline mode

Outline mode is super handy for selecting overlapping paths or avoiding the background.

cmd + shift + / — Menu search

This is common to all applications. Forget which menu ‘Offset Path’ is in? No problem, this shortcut reveals the menu search. Use the arrow keys to navigate then press enter and you don’t have to leave the keyboard.

shift + o — Artboard tool

Sometimes resizing and making artboards is quite a repetitive process. You can need to resize, duplicate and move frequently. Using this shortcut makes that a little quicker.

cmd + g — Group

Grouping things within Illustrator is common. It has many use cases, to help with alignment, help isolate appropriate objects and keep things more organised.

cmd + shift + g — Ungroup

Sometimes grouping can get out of control, it can be both a great and frustrating feature. Sometimes spamming this keyboard shortcut is the best approach.

I hope these shortcuts find their way into your workflow if they haven’t already. Many of these get around some of the tedious annoyances of daily work within Illustrator.

Goals

I needed to first determine what it was I was looking to improve with the previous design. In reality this was easy to determine:

• I want to be perceived as a designer
• Design needs a stronger aesthetic
• Reflect me as a person better
• Make the blog more inviting
• Encourage browsing of the website

How the goals will be addressed

Some of these goals were achieved within the redesign. Some I will have to work at long term.

• Improve visual design
• Introduce more colour
• Add more images to posts
• Have images in the post archive
• Write more design content

Essentially, when I looked at the website, in its current form, it felt embarrassing. Which is a good thing, I designed it 4–5 years ago.

It needed a stronger visual element to it. I need to come across as if I know what I'm talking about, but also be fun, inviting and not too serious.

I want to teach that design should be fun as well as solving problems.

The logo

I started the process off small with a new logo and tweaks to the website. It had its own set of requirements. It set the ground work for the redesign.

Illustrations

I have wanted to include a bit of illustration throughout my designs for a long time. For one reason or another I backed out. Usually down to the time and my skill level.

I’ve always liked the idea of a ‘mascot’. I’ve started small, but it allows me the opportunity to build upon these further as time goes on. I think it helps us to get past that all websites look the same feeling.

Use side projects to challenge yourself

I wanted to use this opportunity, to try something I don’t do often. I enjoy illustrating, but it isn’t my strongest skill. I reminded myself that it’s the only way to learn.

The final illustrations

I’m really proud of these, it was a lengthy process of iterating on shading, and reshaping, to make them look right. I feel like I have made something good.

There are things I would redo and do differently, now that I’ve completed them. It’s these things that keep me going as a designer, something that is a genuine challenge and I always aim to have that with my side projects.

Colour palette

To begin with I always start with an initial colour palette that I iterate on during the design phase. The reason for picking initially is so that I have thought about what I want it to communicate. Iteration must happen due to the array of use cases.

The main goal towards usage of colour is to appear confident. When I look at other designers websites I admire, there is always great use of colour within those.

I was initially drawn to shades of red and green. Typically this is seen as a difficult colour combination to work with. Which is why I went for a green shade which had more blue feel, and a red that was more orange.

The relation to that was in the illustrations of the collars on my dogs. Which was down to it suits their fur colour, as strange as that may sound.

I paired that with yellow, dark purple and dark blue. These additional colours contrast, complement and give me a selection to work with for featured images and text.

With those colours I broke them down into two complementary palettes that are tied together by a common yellow colour. Of course there are plenty of tints and shades to go along with that to use as and when necessary.

Analysis and planning for the homepage

Before going into the sketching I thought long about my understanding of how people use the website. The main focus is retaining new visitors. That's generally everyone’s struggle right?

The main idea I had was:

1. Introduce
2. Latest content
3. Newsletter
4. Popular content within design and code categories

The homepage isn’t the most visited area, it didn’t invite that. Again, the visual interest was lacking, and I believe ways to browse content.

I have a reasonable amount of articles with a level of popularity, this was something I wanted to bring in. As well as promote newer content. It’s important that the website is perceived as active.

Analysis and planning for the articles

Changing the layout dramatically here isn’t really possibly. Highly art directed articles can become a maintenance issue. They are nice, but not feasible. It’s something I want to explore over time.

The main issue I want to address is, increasing the amount people browse the website. The vast majority of users arrive by search. To do it without being annoying and maintaining a great reading experience.

My observations were:

• Keep a similar layout
• Add a more editorial style where possible
• Improve reading experience
• Remove related articles
• Replace with one highly relevant article
• Allow for larger images where necessary

Sketching

I had done so many sketches, settling on the idea that the introduction accompanied a latest post.

Sketching serves as a way to explore themes and ideas that may fit the style of the website.

I progressed through the sketches considering the priority of the content. As mentioned earlier I did debate the value of an introductory area, which I’ve gone for. Along with the latest post it seemed the right thing to do. Following with more recent posts, the newsletter subscription and popular posts.

Small screen and post versions were explored too at different stages.

Wireframes, or designs without visual style

I had a reasonably good idea what I wanted to do from the sketches and planning earlier. The ‘wireframes’ closely matched my sketches, for the layout and visual style to be iterated upon further.

I used Avant Garde throughout the wireframes. Usually I would decide typefaces early, but it can be expensive mistake if you get it wrong. I picked based upon what I had available to me already, that matched closely to the requirements. It turned out to be a good decision.

I produced wireframes for only the homepage and blog/category pages.

The actual article page wasn’t necessary to wireframe. Many visual decisions are made within the articles which as a wireframe isn’t too helpful.

It was always in my mind for time saving that I focused on the core pages. As a better about and contact page can come later.

Typography

The specifics I wanted within typefaces aside from legibility were to fit in with the friendlier style I wanted.

Headings

I was looking for a sans serif, typeface that was something along the lines of, ITC Avant Garde Gothic, but not as geometric and a little softer.

I needed something that would be for the long term. I wanted to look at the choice objectively as possible. I eventually stumbled upon Averta from The Designers Foundry.

It has a nice variety of weights and true italics. This certainly helps longevity. It was extremely affordable and it matched everything I wanted.

Paragraphs

Paragraphs is more flexible in this regard, I had availability through Typekit and Cloud Typography. I ended up with Abril Text and Sentinel, as the choices.

They both have a relatively modern style, which pairs well with Averta. They’re both great for reading. The difficulty was choosing between them, they both worked great. In the end I settled with Sentinel.

Cloud Typography has really fine grained control of things like number style and ligatures. As the support for this with CSS is still limited, it’s a nice workaround.

Design details

After all the choices made earlier I built up the visual style. I wanted something that was light, inviting and colourful.

The header/navigation area I wanted to keep the overall style quite subtle. The focus would always be on the content. For new visitors, I want them to either read the introduction, or get into the latest article.

However, inside the articles it’s nice to have the navigation readily available at all times. It’s a balancing act, that’s why the scroll to show/hide style has been so popular.

Featured images

I wanted to develop a system for featured images that worked well. So when it came to image sizes in different locations I could have featured images generate sharp sized images, from one size.

The sizing of images

This was too idealistic. As illustrations made at small sizes felt weird scaled up to the large size and vice versa. So I settled upon the three you see on the homepage.

I decided that they should try to follow screen aspect ratio, which is most commonly 1:1.6, but this felt too tall.

I decided upon 1:1.5, this worked well for trying to achieve vertical rhythm. It was a good basis for images within posts too. As I wanted to try have them feel consistent.

My illustration style

This is still a work in progress, but featured images were always going to be a challenge initially. The time to make them alongside writing and building up a style.

I’ve done a fair amount so far. I’ve done some I’m happy with and others not so much. The important thing is I feel like I’m making progress and developing a style. Hopefully you will see this if you browse the website.

Type sizing

Another tricky area to achieve balance with and variety. The idea that was prominent in my mind was type sizes are a pain to manage responsively.

I set about creating some rules, eg: type on small screens shouldn’t exceed 24px. I find in the majority of cases that websites overlook typography on the small screen. I didn’t want that to be the case.

During the development I was able to keep this nicely under control with the Tachyons style of writing CSS. If there is one thing to use this approach for; it’s type sizing.

Posts

I wanted to try add some editorial ‘flair’ throughout. It’s hard to be creative with article pages in a sustainable way, so that was something to be wary of along the way.

Image alignment

Another part I could bring in the editorial spin was to extend the background out on the featured image.

All my images are generally solid colour backgrounds, so I knew I could use a bit of PHP to check the image and return the colour value. You’d never know that this is happening.

Flexible image sizes

Another part of the solution was to allow images to be flexible within them. As depending on the tutorial larger images may be beneficial. Then I can use that size throughout the post to keep consistency.

Blockquotes

I use blockquotes quite frequently, to highlight key areas. I use them to ‘sign post’ things, so I figured why not do that. As you’ll see with this.

Archive, categories and search

The main aim for these pages were to aid browsing. All the styles between them are pretty much like for like. So it builds a familiarity through navigating these pages. I kept it simple, as they aren’t the most visited or used pages.

I had three decisions. How many posts to display on a single page, the pagination style and the page title.

The answer to the how many posts to display is as many as you can get away with. I think it’s a fair balance. I wanted the page title to be small and compact.

The pagination at the bottom in particular I had to scale back a little. I initially wanted it to have the page numbers to navigate by. It was to do with the development making things tricky. Something I hope to find a solution for in the future.

There’s still a good amount to do

I’ve still got the about page to do. I’ve come round to the idea of hiring someone to write that for me, so I’m going to leave it until I have the content.

The contact page, the subscriber download, other improvements that build upon this redesign. It will go on. I’m motivated to get it all done.

Final thoughts and reflection

On reflection I’m happy with the outcome. On the brief time the redesign has been live, I’ve had a positive reaction. So far I’ve noticed positive trends in analytics data, a couple more months and it’s probably worthy of a post.

My main intentions were to get something out that was a strong start. As the homepage is a huge area for expansion, I’ve already been working on some improvements.

On articles

The same goes for articles, I’m happy with the readability. I will be adapting those as time goes on as I now have the time to invest in ideas. As mentioned earlier to make things sustainable but creative in design is tricky.

The biggest takeaway I gained from this was it’s important to ‘ship’ stuff you’re happy with, but pave a path for continual improvement.

Circular

There is reason for its popularity outside of what Google has done for it. It’s a superb typeface that has many aesthetically pleasing features. So, what makes Circular distinctive?

• Low contrast
• ‘Circular’ features
• Geometric style
• Which retains friendliness
• Good x-height
• Versatile in use

All these things are what I believe add up to it’s popularity. It’s modern and geometric, but friendly and approachable. It’s suitable for large and small text sizes. The alternatives that I have found try to fit that as closely as possible.

myfonts.com (none are free)

You could dig for ever on myfonts, there are a variety of price brackets and endless typefaces. I have found some really close matches here. It certainly is the best place for close alternatives.

Cera

[](http://www.myfonts.com/fonts/typemates/cera/)

Possibly the closest match. It has a very similar double storey ‘a’, and similar features in contrast and geometry. However, at the same time ‘a’ having a less round bowl may detract from the similarity.

Campton

[](http://www.myfonts.com/fonts/rene-bieder/campton/)

What makes Campton a good choice is it’s reasonably similar geometry. Though not perfect as you have a single storey ‘a’, and the ‘c’ differs.

FF Mark

[](http://www.myfonts.com/fonts/fontfont/mark/)

FF Mark on its own is popular, it is a similar typeface. It has been used part of many bigger rebrands like mastercard. The weight, width and styles of the letters match closely.

Texta

Texta is a good alternative because of its similar character width, double storey ‘a’, it’s not the best option but looks closer in lighter weights.

Qanelas Soft

[](http://www.myfonts.com/fonts/radomir-tinkov/qanelas-soft/)

Qanelas Soft, as it is in the name, is possibly a little too soft to compare with Circular as precise as you would like. What stops me from suggesting Qanelas itself is the closer match to Futura or Proxima.

Google fonts

Some of the matches here aren’t as close as I would like, but they do share some characteristics with Circular. Some have few weights and styles, but it’s expected for free fonts. Overall, there are a few alternatives.

Cabin

[](https://fonts.google.com/specimen/Cabin)

It’s a push to recommend Cabin, as the character width is narrower than Circular. However, it has quite a friendly feel to it.

Rubik

[](https://fonts.google.com/specimen/Rubik)

Rubik is a little bit of a weird example, and admittedly scraping the barrel for alternatives on Google Fonts. However, if you look past the softer edges of the characters and slight squareness, it's a reasonable match.

Montserrat

[](http://www.myfonts.com/fonts/fontfont/mark/)

Personally, this is the closest Google Font you will get to Circular. Montserrat has a good variety of weights, and it matches Circular well in x-height, weight and width.

Work Sans

[](http://www.myfonts.com/fonts/fontfont/mark/)

Work Sans is another good Google Fonts alternative, however, it is let down by the heavier weights. The contrast is noticeably higher at the heavier weights. It does have a friendly feel to it though.

Typekit

A reasonably wide variety can be found on Typekit, with plenty of weights and styles. I’m sure there will be others too. Some aren't the closest matches, but nonetheless share similar characteristics.

Usual

[](https://typekit.com/fonts/usual)

A better example at lighter weights, like some of the others it loses its resemblance at heavier weights.

Effra

[](https://typekit.com/fonts/effra)

A good example generally, however, it can be let down by the curves on letters like 'q', 'd' and 'g'. If you ignore those and look at the weight of characters and x-height, it shares similarity. Letter shapes like 'c' also share similarity.

Soleil

[](https://typekit.com/fonts/soleil)

Another good example where the weight and x-height of characters do match quite well. At lighter weights particularly it is a good match, when you get to the heavier weights, the characters are possibly a little narrow.

Gibson

[](https://typekit.com/fonts/gibson)

Gibson on the face of things is a good match, it’s also a pretty solid alternative to the likes of Gotham.

Europa

[](https://typekit.com/fonts/europa)

Europa is possibly one of the best alternatives you'll find in typekit. It has very similar geometry to Circular, making it a good match with the double storey 'a', single storey 'g'. You also have the 'c' which has a similar opening.

Faricy New

[](https://typekit.com/fonts/faricy-new)

Faricy New has good geometry on the ‘a’, but potentially lacks the linear contrast that Circular has.

Hopefully these provide suitable alternatives

Circular is a popular typeface, but it comes with a significant price tag too. So for projects that don’t quite have the budget, these typefaces may provide alternatives.

Catch up

To catch up with where this post is, the files from the previous post are available.

Completed files

If you’d like to skip ahead and you can download the completed design files.

Colour reference

I have numbered colours in the table for easy reference.

Highlight the open filter

Starting with the filter bar, it was left completed, but without a way to highlight the current filter being open.

Hiding the open filter icon in each artboard

The first step to this is to use the direct selection tool by pressing a.

Then select the icon path for the current icon. Changing the fill to colour 3, the filter background colour.

You’ll notice that by doing this none of the other symbols update. This is because this was made as a dynamic symbol. Which allows the editing of fills.

Repeat this for the other icons.

Change the text colour

Similarly to the icon, use the direct selection tool and select the text for each of the open filters.

Change the fill to colour 1. This is beneficial in the long run, as you may want to tweak things further.

You may need to expand your text to modify the colour by using either cmd + e or going to Object > Expand. An unfortunate limitation of dynamic symbols.

Close icon

At the start of this series I made some icons for download. Using the larger ‘x’ icon or making your own will be necessary for the next step.

Copy the icon and paste it into the art board and place it above the text replacing where the previous icon was.

Getting into the filters

So the first few steps are ones that are pretty consistent across each filter.

Transparent overlay

The overlay is added to bring focus to the filters and add a layer of depth. It doesn’t currently fit in with the theme.

Change the fill to colour 3 and the opacity to 80%. The reason for the opacity change is to give a hint, as to what’s behind. When the transparency feels off it can make things look ‘muddy’ with the weird contrast it creates.

All text to be colour 2

Some quick colour changes can be made in the next couple of steps. Change all text that exists within the filters to colour 2. This will help legibility for the next step.

The quickest way to do this is by selecting a text object and going to Select > Same > Fill Color.

White backgrounds to colour 3

All the rectangles that have a white fill can be changed to colour 3. Excluding the size and colour filters, those will be done in a later step.

Type and brand

Both of these filters are very similar in style. In these steps you’re going to apply borders between the items, this will make things feel equally spaced and define boundaries.

Vertical divider

Firstly draw a vertical line by pressing /. Then make the line span the height of the types, which is 280px.

Change the stroke to colour 4 and the thickness to 2px. You should be able to copy and paste this in place on the brand artboard with cmd + f.

Horizontal dividers

Similarly to the vertical divider, draw a horizontal line. Same stroke weight and colour. Place them between each row of items.

Overlapping dividers

It’s likely the vertical divider is overlapping the filters. Select each of them and use cmd + g to group.

Then cmd + [ to move backwards to the point where they no longer overlap.

Increase font weight

To give the names a little more legibility increase their weight. Depending on the font you’re using, semibold should be enough of an increase.

Size

Select all the size related things and use cmd + g to group them together. Double click the group, this should isolate the selection.

Fill and stroke

Highlight one of the rectangles that has a white fill and go to Select > Same > Fill and Stroke.

Change the stroke to colour 4, and the fill to colour 3.

Changing the corner radius

To change the corner radius you need to select the object and press a. This enables the ability to do that.

In the toolbar you should see ‘corners’ change the value to 4px.

Increase font weight

Again like the type and brand increase the font weight to semibold.

Price

The price needs to draw most attention to the handles.

Handle fill & shadow

Select the handles and fill them with colour 2.

Select both of the handles, and go to the ‘fx’ menu and go to Stlylize > Drop Shadow. Adding the shadow gives subtle depth.

Range rectangle

Select the rectangle that connects the handles, and change the fill to black #000, and add the consistent 2px stroke in colour 4.

Increase font weight

Finally, increase the font weight of the price text to semibold.

Colour

With price complete it moves on to colour, which is quite tricky. The shapes need a little adjustment and the colours need to have a subtlety about them. This is because it can look quite garish otherwise.

Make the text semibold

Like previous steps each colour name can be made semibold.

Resize the rectangles and make circular

Change the width to 44px, the height is fine. Change the corner radius to 22px.

Add a stroke and fill

Each circle has a 2px border and the relevant fill but at 40% opacity. This gives enough of an indication, without it being overwhelmingly colourful.

With the dark background colours can be lower in saturation and darker. The background brings them out. I’ve referenced the colours used in the table.

Align the text centrally

As the space has now increased between each item you want to make it feel more intentional.

Centralise the text by selecting the circle and text object, then click the circle again. Then using the align panel horizontally align them.

Once they’ve individually been aligned, you can align them centrally to the artboard.

That’s it

It’s complete, from here it’s time to code, but that’s for another time. Feel free to download the completed files. One oversight I made during this process was a way to clear the filters. How would you solve that?

Catch up

Previous to this was the completion of the 'wireframes'. Setting the basis for the layout for applying the visual style in this post.

• Download the previous post files
• Download the colour palette swatches

Skip ahead

If you'd like to download the files to have a look and skip ahead feel free.

Download the designs for this post.

Where you’ll be at the end of this post

At the end of this post the majority of the visual style will be applied, aside from on the filters themselves.

Colour palette

Firstly it’s necessary to choose colour palette. This really sets the tone for how things move forward. Choosing this early on is ideal. For this design the intention is to have a luxurious feel.

I decided to go for a dark, ‘rose gold/copper’ palette. Keeping it reasonably monochrome it helps to meet the luxury criteria.

Things with a dark theme tend to be trickier to design, so this makes for a good challenge. There can be different considerations you need to make throughout.

Opening swatches

If you downloaded the swatch palette earlier, open the swatches panel by going to Window > Swatches. Then click the little icon at the top right of the panel. In that menu go to ‘Open Swatch Library’, then ‘Other Library’.

Navigate to the swatch file in this post and you should be good to go.

Typeface

I’m going to continue to use Averta, from The Designers Foundry. Alternatively Cabin or Work Sans on Google Fonts are similar free options.

The aim will be to continue to communicate the message through the design. Averta fits the luxury feel and works well at the smaller sizes used throughout.

Low contrast sans serifs, or higher contrast serifs are good matches for the style.

Remove close

The more I thought about it the more it was the wrong decision to add this in the previous post. There are two reasons: aesthetically it is randomly placed and it would be difficult to reach.

Remove each of the close elements. In the coming steps it will be replaced in a more reach friendly position.

Filter bar

In the first art board you’re using as the base. Double click the filter bar to edit the symbol.

Set the background

Select each of the background squares and fill them with colour 3.

Fill the icons and text

Select all the icons and text and change their fill to colour 2. You can do this quicker by going to Select > Same > Fill or Stroke.

Add subtle dividers

To add to the luxury feel add dividers between each filter.

• Draw a vertical line / that is 16px
• Change stroke weight to 2px and colour 4
• Drag it to the centre of the first and second rectangles
• When it snaps let go
• Align centrally
• Duplicate for the other 3

Header, logo & icons

Firstly, delete the white and transparent rectangle. This will make editing things easier and clearer.

Then, similarly to the filter bar, double click to edit the symbol. Make the background colour 3 and change the icon strokes to colour 2.

Content

Moving on to content, select the background layer and change the colour to number 4.

All text

Change all the text colour to number 2.

Images

You can add actual placeholder images or change their background colour to 4. This will make things more realistic or more fitting.

Further building up visual style

Now you have something that looks complete. However, you can add a little extra affordance by adding a shadow to the filter navigation.

Add a drop shadow to the filters

Copy one of the rectangles for a filter background. Paste it in place cmd + f. Make the width 320px by stretching it to the artboard or using the transform panel.

Click the ‘fx’ icon and go to Stylize > Drop Shadow.

Add a black shadow with the settings 80% opacity 0px X and Y offset, 4px blur.

Finally, move that layer backwards with cmd + [.

Add a gradient to filters

Now that the shadow has been added, it causes a bit of an undesirable blended appearance. To account for that you need to add a gradient to each of the rectangles. It’s kind of like a bevel highlight.

Select each of the individual rectangles, and open the gradient panel, by going to Window > Gradient. Click the gradient in the panel, which should change the fills, to a white to black gradient.

Using colours 3 and 4 in the two gradient points. The first point at 92.5% and the other at 100% creates a subtle highlight.

Finally change the angle to 90°.

That’s it for this part

The aim for this post was to show you how to use a darker colour palette. There were limited colours, but it allowed all of them to be used purposefully.

Shadows can be difficult to convey well in a darker palette. The use of a highlight is valuable here.

All that’s left is to complete the visual style for the filters.

Again, here’s the Illustrator files to download.

So while it’s not a post that directly gives value, it helps me keep on top of the library of content that I am acquiring.

Focusing on the newsletter

It had become clear I wasn’t getting any closer to completing a download to go with subscribing to the newsletter. I spent this week working on this as much as I could.

Working on it infrequently was getting nowhere fast. As a subscriber it’s important that I repay that. So I am working on a form UI kit, it will be both Illustrator ready, and coded up for you to use. It will use much of the experience I’ve had with forms over the years to get a consistent style everywhere.

This is something I expect to expand upon over time, so I’m making it part of a git repository to keep track of what changes.

Small layout change to entries

I’ve moved the titles below the images, I feel like this is a better balance to the page. I want to adjust the title/image area quite a lot over the coming weeks to try add a more editorial/interesting spin on the layout.

Portfolio

/portfolio was originally where I had that, but recently I’ve begun to put one together on Adobe Portfolio at stevemckinney.net.

As a few visitors still somehow find their way there, I needed to put something to direct to the right place.

A featured image for these posts

Slowly but surely I’m getting into the rhythm of making these. I go back and forth with the style, but it’s a good way to practice illustrative styles.

CMS updates

It’s always important to keep your CMS up to date.

It has been relatively bug free

I’m surprised there hasn’t been more bugs. I’m aware of one with pagination, but that requires a frustrating rework. It’s an intermittent bug, so I’m not sure it’s worth the time investment.

There’s also some spacing issues in search results. This one again is tricky, as the search results share the same markup as the archive listing.

Catch up

This is where the post was left previously.

File download

There were two file downloads relating to the previous post.

• Icons
• Illustrator file to catch up
• Illustrator file to skip ahead

Sketch recap

The sketches for each of the filters are what will be referred to as a basis for this.

Add an overlay

Draw a rectangle by pressing m that’s 320x524px. Fill with a very dark grey colour, and change the opacity to around 60%.

Position that to the top of the artboard, so the filters are not obscured.

Add additional rectangle

On top of that draw another rectangle that is 320x236px. Positioning this time flush with the top of the filters so they are not obscured.

Add an obvious way to close

From the icons grab the small close icon. Paste it in the document and add a text layer with the word alongside. Using the content in the background as a guide, position it to the left and above the filters.

Paste across all artboards

Now that all the additional common elements are complete, select the additional elements. Press ⌫ backspace to delete, then press cmd + shift + alt + v (yep).

Type

The first step for the type section is to use split into grid to help make alignment easier.

2 columns and 4 rows are added with the row total being increased to 272px. The reason it’s increased is to allow for affordance. It will overlap the filters, this is handy for now.

Add types

Type out 8 types of clothing, using a 16px font size. This will allow good space for items spanning two lines. Make sure that the text is centrally aligned too.

Here’s a list of types to grab:

• Jeans
• Tshirt
• Coats
• Shirts
• Knitwear
• Loungewear
• Suits and blazers
• Accessories

Align types

Select a type, then click a rectangle to align it to. Click the rectangle again to use that as the basis to align to.

In the Align panel, horizontally and vertically align it.

Select types and move backwards

All the things that you have made now, select and group with cmd + g.

Finally select the filters below the types and move them forwards with cmd + ].

Brand

Brand is similar to types, so delete the white background layer and copy the grouped types. Use cmd + f to paste in front. Again being at the front now means easier selection.

Rename, and then you should be able to select the filters at the back and move forwards with cmd + ].

Size

Size is interesting, there are lots and it takes time to find yours. It’s difficult to identify whether they relate to the type or not. Categorising headings should help this for those who choose to review by size first.

Defining sizes

First you want to draw a rectangle that is 272x44px. Align it to the horizontal centre of the artboard, positioning isn’t too important vertically right now.

With the rectangle still selected go to Object > Path > Split into Grid.

Adding 4 columns with an 8px gutter gives you a nice selection and reasonably flexible area to work with.

Add a border, fill and duplicate

Fill them with white and a grey border, to define their bounds.

• Add a type layer t
• Type out the first size ’S’
• Press cmd + enter
• Eyedrop i the brand style
• Duplicate the ’S’ layer to add additional sizes

Repeat this for chest and shoe

Chest generally follows an inches measurement generally starting from 34 and going up incrementally in 2s. Shoe size, stick with the UK/US style, 6, 7, 8 etc.

• Copy
• Paste in place cmd + f
• Nudge down to give plenty of space
• Modify type layers

This has led to a very limited amount of sizes, that’s fine. You can see there is good room for sizes like XS, XL and more.

Add categorised titles

Type each title with a 12px font size, this is sufficient to break them up but not outweigh the selection.

Next will be to improve the alignment further.

Better alignment

Building upon the alignment that’s already been done, open the transform panel under Window > Transform.

• Select the ‘waist’ title and change Y to 312px
• Select waist sizes and change Y to 338px
• Select the ‘chest’ title and change Y to 402px
• Select chest sizes and change Y to 424px
• Select the ‘shoe’ title and change Y to 494px
• Select shoe sizes and change Y to 516px

Adjust the navigation placement with cmd + [ or cmd + ] to bring forwards or backwards as necessary.

After all that alignment, you should have something similar to this.

Price

A range slider tends to be most convenient for choosing price. It’s the most flexible for users to get a somewhat accurate range.

Add a rectangle

Click and hold the rectangle to get the pop out menu. Add a rounded rectangle that is 272x12px, with a 6px radius.

With the rectangle added, align it centrally to the white rectangle.

Add a circle

You need two circles for handles. Add a 24px circle by pressing L. Give it a white fill and grey border for now.

Duplicate this circle by copying and pasting in place cmd + f.

Align both circles centrally with the rounded rectangle, and one at either side.

Add text to show range

As the price will go from one to another. Adding a text layer that has ‘£10 to £120’ will indicate this.

Using the eyedropper tool to pick the type style from sizes earlier will help to keep a consistent style.

Align range text

Using the align panel to align it centrally, then nudge it up until it sits below the range slider. Not too close though.

Colour

Colour shares some similarity with size in terms of the shape size.

Copy size rectangles

Copy 4 of the rectangles from sizes, and place them over the final artboard. Using the transform panel, place the Y coordinate of all rectangles to 312px.

Add titles below

Copying ‘waist’, which is one of the size type headings for the basis.

• Duplicate it 4 times
• Align each to the left of the rectangle
• Then duplicate those 3 more times
• Align nicely

A word on whitespace

Much of this post has been based around alignment and whitespace. Generally it’s a tricky subject what the correct amount of whitespace is. It comes down to several points:

• Vertical rhythm or grid
• What feels right based on that vertical rhythm
• The space available
• Tap/click targets
• Importance of the element
• Visual hierarchy
• Readability/legibility

Completed wireframe download

Feel free to download the completed file.

That’s it for this part

So now all the filters have been made in wireframe form, you know the layout is pretty accurate now. You can also see how helpful symbols can be for repetition.

There are other areas that symbols could be used certainly, particularly the close button.

Introduction

This post will be using Adobe Illustrator, but it could equally be done in others. You need to consider the most common options a user will need to filter by, but importantly the options to filter within them and presenting them.

This is the first part of this post, you’ll follow the design process, from sketch to wireframe, then onto visual design.

Skip ahead

Feel free to skip this entirely, if you would like to download the files and take a look.

Download icons to follow along

I’ve made a set of icons for this post. If you’d like to follow along you can download the icons. Alternatively you can make your own or use a different icon set.

Designing for a clothing company

You're designing a website for a clothing company and at the stage of designing the small screen version of the shop page. The page where all products are listed, you have a few options to filter down the products.

Type, size, brand, price and colour are filters which will allow you to refine your results best. A convenient way to clear filters needs to be considered also.

Sketching

With those types in mind and it being a ‘tab bar’ you’ll need to sketch several screens. Icons will be needed to provide a representation of what the filter is, you’ll pair this with text underneath the icon for clarity.

Sketching icons

The idea with sketching icons is to think of the best representation for that word, which is also the most simplest. Sketch as many ideas as you need to, get all the poor ideas out and see what happens.

Each icon is based upon a 24x24px square. As their creation is somewhat out of the scope of this post, you can download ones I’ve made.

Sketching layouts

A basic layout to get an idea of what you’re working with. Then going on to sketching each of the potential layouts for the filters and the icons they will need. Some will be trickier than others, such as size, as it’s different for different types of clothing.

For each filter I have selected a layout which occupies space well. Price and colour require different considerations to make them most effective. While size, type and brand will generally retain more list like appearance.

Wireframing

You’re going to start the process by wireframing everything. This will allow you to focus better on layout, then build up the visual style later.

Start a new document

First you need to get the basics in place. You need a document with 5 artboards sized 320x568, based upon the smaller iPhone.

Add a background layer

Add a new rectangle by pressing m. Click the artboard and add the dimensions 320x568, so it fills the artboard and add the fill colour #f2f2f0.

Make a small grid

Add a new layer in the layers panel and name it ‘grid’. Copy the background layer, and click the grid layer, so it’s selected. Then press cmd + f, this will paste it in place.

Reduce the size

With the layer still selected, open the transform panel, which can be found in the menu Window > Transform.

With a central reference point and constrain proportions unchecked, subtract 48px from the width. The layer should remain selected and be central

Grid settings

With the layer still selected, in the menu bar go to Object > Path > Split into Grid.

Once you have added those settings, click ok. Copy those layers, then click the artboard next to it and paste in place cmd + f.

Repeat this process for the other artboards. Then select all the grid columns in each artboard and press cmd + 5.

Add rectangles for header and filters

Add another two rectangles with the dimensions 320x44, fill them white. Align one to the top and one to bottom of the artboard.

Header

The wireframe is now coming together. Using the icons mentioned earlier, copy the search and menu icons and paste them into the main document.

Add icons

Select the search icon and drag it to the left side of your guides, and repeat this for the menu icon, except to the right.

Add a logo

Next add a logo, which needs to be aligned to the horizontal centre of the header.

Align the icons and logo

Select the header background, the icons and the logo. Then click the header background again, to align to a key object. Next, go to Window > Align to open the align panel.

Add content

Towards the top, make two text layers. One with ‘Shop’ and the other ‘Browsing 84 styles’. With this the filter has an additional indication to show the page has updated.

I have made the title have an 18px font size. The styles counter is has a font size of 12px.

Add products

Now to add content in the way of products. Using a rectangle as a placeholder image, adding a title and price to make up a product.

Adding a 130x160 rectangle m and below a product title and price. Both the title and price have a 12px font size, with the title being bold.

Select those 3 items and group them together with cmd + g. Then copy, paste and align an additional three. Taking care to align them within the grid columns and have a consistent space above and below them.

Making a symbol

At this stage you’ve made the bulk of the reusable layout. Making it into a symbol is a good way to go. Open the symbols panel by going to Window > Symbols.

Then you need to select all the elements except the bottom rectangle for filters. In the Symbols panel you should see the ‘New Symbol’ icon become active.

Click the ‘New Symbol’ icon and enter a name. No other options here are really important.

After clicking ok, this will move everything to the top, move it to the back with cmd + [.

Tab bar

Now that the content is completed you can move on to the navigation.

Split the rectangle into 5

Select the bottom rectangle, then in the menu go to Object > Path > Split into Grid.

Icons

As mentioned earlier in the post I’ve made a set of icons for you to download. Or of course you can use your own.

Place the first 5 icons (including text) into the document nearby the rectangle. It’s not too important where, the alignment process doesn't depend on it.

Aligning icons

Making sure each icon and the text are grouped together cmd + g.

Select one rectangle and the grouped text and icon. Then click the rectangle again so that the border is thicker, aligning to the rectangle as the key object.

From earlier you should have the align panel open, if not go to Window > Align. Now vertically and horizontally align the icons.

Then taking care to make sure all the text aligns evenly.

Make it into a symbol

The final step for this part of the tutorial is to make it into a symbol. Making sure it’s dynamic, this will be particularly useful in the next post.

A good point to leave it

This is a good point to leave the post, the layout is essentially complete in terms of positioning. In the next post the individual filters will be made.

Why is it important?

The importance comes down to the export process for assets that require crisp edges. If icons and logos aren’t pixel fitted, it can make them look poorer.

Good logos and icons will already account for this. Sometimes. unintentionally you can knock things slightly out of alignment in Illustrator. Due to the vector nature of the application. You’re not as aware of things looking off.

It starts with the right document setup

However, once you have the document setup correctly in illustrator it's generally set and forget. It will also help you achieve a more consistently spaced design.

Firstly, decide upon a grid

This isn’t a traditional columned grid, it’s the overlay that is built into Illustrator.

Go to Illustrator > Preferences > Guides & Grid. From here set a gridline as a multiple of 16, with the subdivisions to equal a whole number too.

Why multiples of 16?

Icons and screen resolutions typically scale up from values that are multiples of 16. 16, 32, 64, 128 for icons. 1024, 1280, 1680, 1920 for screen resolutions. I recommend you follow this.

Aside from this you can depend on the number to always be whole when divided by 2.

Generally people will default to multiples of 10. I would strongly advise against this, you can quickly end up with a number that isn’t whole. With a 16px grid you can divide by 2 until you’re at 1px.

Make a new document

You can make any document size, as long as it falls within your gridline choice. In this instance it’s 16. If your document size follows screen resolution patterns, they will fall within the 16px grid.

After adding your dimensions, click advanced and check ‘Align New Objects to Pixel Grid’.

This can be the reason you will have trouble doing this with an existing document. It’s for new objects.

Enable snap to grid

The next step and possibly most crucial is to enable snap to grid. You can find in the menu View > Snap to Grid or the keyboard shortcut cmd + shift + ' (single quote).

This will make aligning things much easier.

Toggling the grid

To toggle the grid you can do this with cmd + ' (single quote).

Things to be aware of

With the accuracy you introduce within the document sometimes pasting items in that are not already a whole pixel will be troublesome to align. You will have to resize the object and align drag into place again.

You’ll likely be aware of ‘Snap to Point’ or come across it, I don’t recommend enabling this, as it’s very unpredictable. If you need to move things by the pixel change the grid settings.

That's it

If you’re a long time user of both Illustrator and Photoshop, but tend to use one more for designing websites, you’ll probably share similar frustrations to what I have. They’re both great, but they both miss things from each other, that would make life much easier.

From here you can set up a regular grid using guides and then save as a template for future documents.

So what’s new?

Aside from the visual changes, the focus is on the blog. This site will only serve as a blog for the foreseeable future. There was a portfolio, but this will be separate. It allows for quicker redesigns and not having to think about how it aligns with the rest of the site.

Header

The most important change to the header is the addition of search. There was search on the old version, just at the bottom. It wasn’t as helpful in the past due to the lack of content. Giving it more availability may increase searching.

Homepage

The homepage is the area I want to draw more people to. Previously it has been a single post, with the about section and dribbble, then moving into a list.

The aim has been to make content more discoverable and encourage browsing. From the introduction and latest post, through to the popular posts by category. Over time I want to evolve this further.

Illustration

I’ve gone with a couple of illustrations of my dogs to serve as mascots throughout the homepage. They add to the friendliness I want to bring to the website. They were a big challenge, as I’m not a fantastic illustrator… yet.

This is something I hope to bring out more in the future as I iterate on this design.

Newsletter

I have started a newsletter, it’s in the aim of growing and retaining an audience. I’ll notify you when posts go out, this will be once a week.

I have plans for subscribers, and it’s where most of my efforts will go now the redesign is done.

You should consider subscribing.

Posts

Posts don’t have a dramatic overhaul in layout. However, I made some observations, that would make for a better reading experience.

• Ability to have more flexibly sized images within posts
• Improve font sizing
• Better readability
• Improve the related post(s)

I'm happy with the improvements. I don't want to do anything to cause annoyance within them. You're here for the post.

A better small screen experience

Not very many people browse this website on their phones, 92% is considered desktop. Just over 1% of the remaining 8% is tablets and nearly 7% is phones.

Again, the reading experience is something I’m particularly happy with. I believe it’s a huge improvement. As well as just browsing through pages of posts and homepage both flow nicely.

I’m pleased with the way the header area works, from showing the navigation to switching to the search. Although I’m considering moving to a bottom navigation.

Going forward

The priority going forward will be to add incentive to sign up to the newsletter. Everybody wants you to subscribe to their newsletter. Why would somebody subscribe to mine?

Having people subscribe to your newsletter is highly valuable. I wanted something in place before this redesign went live, but I decided not to wait. The about and contact pages, will follow the newsletter improvements.

I have a few things design wise I want to improve too. The doubt over the past couple of weeks, was what pushed me to get it live. This tweet by Jason Fried was timely.

Danger of not shipping as soon as you can - second guessing creeps in. The longer you wait, the more doubt you cultivate…

— Jason Fried (@jasonfried) August 23, 2016

It’s something to always keep in mind. As I want to improve the homepage further.

Bugs

I'm fairly sure there's going to be some bugs. As I've been preparing this post, I've been fixing and tweaking things. I’ve done my best to cover all angles. If you see anything major I would appreciate the heads up.

That’s it

Thank you for spending time on this website and reading the content I produce.

Highlight your objects

You have a set of unequally sized objects. Such as navigation items. Select them all.

Click any item without holding shift

It doesn’t matter much which item as the items are having space put between them. After clicking, you should see that item highlight in a bolder blue. This chooses a key object and activates more align options.

Choose how to distribute the space

You can distribute the space horizontally or vertically, and with any amount of spacing you like. Once you have entered a value to space the items by click the relevant way to distribute space.

That’s it

The beauty of this method is you can specify how many pixels you want between your items. Once it becomes second nature to do, you’ll find this method to be the quickest. It's such a common part of every day design, that the time savings will certainly add up!

Why the change?

Usability research posts have found it improves engagement and exploration of a website. Which is something most people want to improve[^1]. In apps there is more freedom for implementation, as has long been part of iOS and as more recently Android.

However, it still remains elusive for websites, in the sense of the behaviour and experience in apps. For example, usability could be better on iOS and the potential clash with other UI elements, can make it difficult to use.

As phones have got larger and Google has started recommending it for Android, is the usability issue something to reconsider on websites and is it now a balance of trade offs? I’ve found several websites that haven’t been afraid to question this.

ysdn2016.com

I like how this combines the navigation with the event details. You can scroll through the page and access that at any point as well as other areas of the website.

It hides on scroll, so it forces you to scroll up a bit at least to bring it back. This can get around the ‘double tap’ and gives you the ease of reaching the navigation.

pitchfork.com

The Pitchfork website is probably one of the websites where I first realised ‘is it coming back into fashion?’ What I like about this navigation is it gives access to other features within the website, as well as the main navigation. It’s the potential to keep key features within reach at all times.

It also affords them the freedom to have a larger logo—not that I believe you need to do that—which means you don’t have to overwhelm that initial space.

studiothick.com

This is a repositioning of essentially what would be a ‘hamburger’ menu without the icon, it’s clear and visible, without being distracting. It is in the region to avoid the double tap and nicely allows you to jump to the top of the page too.

davidhellmann.com

The navigation would feel at home on iOS as much as it does apart of the website. So it’s easy to use and the way search can be utilised is a nice touch.

joycewang.com

Like the Studio Thick navigation, this uses an icon in the lower right avoiding the double tap in most instances. It works well and the style of this is interesting.

roscoproduction.com

This is more of an obscure navigation, but it’s usable with one hand to give you access to the portfolio. I like the ease of use it offers generally, but I would have liked the logo pinned to the bottom to link to the homepage.

whitehallinteriorsnyc.com

A discrete navigation initially, which hides on scroll down and it reappears when you scroll up. It could equally have been fixed to the top, but it wasn’t.

eventbrite.com

This is an interesting one and a really good use of the space, the button to checkout is simply very easy to reach. As part of researching this post, I found that eventbrite uses a technique to ensure the browser chrome is always visible. This means they avoid the need for double tapping.

For an ecommerce experience this seems like a no brainer, make the checkout steps easy to reach and you’ll frustrate buyers less.

Basecamp

Basecamp have gone with their main call to action fixed to the bottom on scroll. This means it's always present whilst you're browsing. No need for repetition. Just one clear button.

I'm sure this will emerge as a trend for pages of this type.

Quartz

Quartz have an array of navigation and their bottom bar serves as a kind of filtering of their stories.

Summary

Many of the examples work very well, because of the ease that they can be reached. Some examples can bypass the double tap, due to their positioning, but others require it. I’ve found that while it is an inconvenience, it’s less so over trying to reach the top of the phone one handed.

This is definitely more of a reemerging trend, as I remember seeing other websites with it and trialling a bottom navigation in version three of this website. I removed it due to thinking there was potential for tapping the wrong parts of the browser UI. I believe that’s why it hasn’t been used more until now.

[^1]: Obvious Always Wins

So while it’s not a post that directly gives value, it helps me keep on top of the library of content that I am acquiring.

Illustrator stroke profiles

This has become a really popular post in recent weeks. It was one I wrote quite early on in this writing weekly thing and on inspecting it again, it’s quite poorly formatted in terms of the images. So I have improved some of them.

Hero area series: selective refresh bug

I spotted a bug within the template files — a simple, but crucial one really — to do with the refreshing background colour. It had stopped working, for whatever reason. I needed to add echo to a function to make sure the style output. Strange, but annoying.

Progress

I spent the majority of this week sifting through posts and styling the various elements I use throughout. How they adapt with the screen and such.

I’m happy with the homepage, but I’m considering a rework of that as the current layout doesn’t adapt too well in the mid size range of screens, but I know I can do better. It’s just trying to think of a better solution.

Preparations for the redesign

I’m hoping to launch the redesign first week of September, which is a good time for me due to having a week off work. This means I’ve begun focusing my efforts much more on the redesign, as I mentioned a few posts back. It’s difficult to balance and progress suffers on both writing and the redesign.

I spent some time designing more featured images and tweaking posts.

Preparation

As I’ve been working on the website I’ve been trying to keep the database in sync locally, as I post and update images. As I have a couple of CMS addons that are not currently on this site, it causes an error every time.

I uploaded and enabled the addons here and other things round making sure when I put this live there is as few hiccups. Steps like this that don’t affect anything, just mean one less thing to rush and do.

Horizontal scrolling responsive menu

[](/blog/horizontal-scrolling-responsive-menu)

Custom stroke width profiles in Illustrator

Along with a couple of images inside that post updated, I have added a featured image too.

[](/blog/creating-custom-stroke-width-profiles-in-illustrator)

Get up to speed with CSS shapes

[](/blog/get-up-to-speed-with-css-shapes)

A guide to vertical rhythm

[](/blog/a-guide-to-vertical-rhythm)

Photoshop generator syntax cheatsheet

[](/blog/adobe-generator-syntax-cheatsheet)

The problem detailed

You’ve got your header setup and working with headroom.js. Your navigation is revealed by tapping or clicking an icon (be that a hamburger or whatnot). When you scroll the header still hides despite the navigation being visible.

You may even have the navigation cover the whole viewport, but you can still trigger scroll events.

Using CSS only could probably solve this, but that isn’t ideal. As it can quickly become difficult to maintain, if you’re adding an additional state to the navigation.

The solution

To solve this you need to stop the navigation hiding, when it’s ‘open’ or ‘visible’.

You may have this currently

You will have initialised headroom, it may look similar, or you may have passed some options.

var header = document.getElementById('header');
var headroom = new Headroom(header);
headroom.init();

Checking the state

Firstly, it’s helpful to write a small function to check whether the nav is visible. This will make code more readable amongst the options.

function isNavVisible(nav) {
  return ( nav.classList.contains('visible') ? true : false );
}

So this function has a single argument, which when you come to use this function, will look something like document.querySelector('.nav'). It then returns a value of true or false whether the navigation contains the class visible.

You can change this visible class to be more in line with your naming convention.

Using the onUnpin callback to disable hiding

If you have your options set up already, then it will be a matter of taking the onUnpin callback and adding it to your existing options.

var header = document.getElementById('header');
var nav = document.getElementById('nav');

var options = {
  onUnpin: function() {
    if ( isNavVisible(nav) ) {
      this.elem.classList.remove(this.classes.unpinned);
      this.elem.classList.add(this.classes.pinned);
    }
    else {
      this.elem.classList.add(this.classes.unpinned);
      this.elem.classList.remove(this.classes.pinned);
    }
  }
};

var headroom = new Headroom(header, options);
headroom.init();

If you don’t have options, this essentially passes an extra parameter to the headroom variable. Inside the options object, the onUnpin callback uses the function from earlier to remove or add a class name using the classes object built into headroom.

How the classes are chosen

Using this gives you access to all the options. Specifically you need to access elem and classes.

this.elem.classList.remove(this.classes.unpinned);

this.elem refers to the element you pass to headroom, in this case it’s the header variable. You can use this to look at the class list and use that to remove or add a class.

To remove the class that applies the unpinned state, you use this.classes.unpinned.

You’re free to update class names

This is useful because you may have an override in place for your own class names. You can also update them without the need to change this code later on.

Toggling your navigation

For the sake of completeness and clarity, I’ve included a basic navigation toggle.

var nav = document.querySelector('.nav');
var navToggle = document.querySelector('.nav-toggle');

navToggle.addEventListener('click', function() {
  nav.classlist.toggle('visible');
}, false);

This will listen for clicks on .nav-toggle and toggle a class on .nav.

Final code

To recap you've got a function to detect visibility of your nav element. That function is used as part of the onunpin callback, where you add and remove class names based upon the state. The class names are found in the classes object.

function isNavVisible(nav) {
  return ( nav.classList.contains('visible') ? true : false );
}

var header = document.getElementById('header');
var nav = document.getElementById('nav');

var options = {
  onUnpin: function() {
    if ( isNavVisible(nav) ) {
      this.elem.classList.remove(this.classes.unpinned);
      this.elem.classList.add(this.classes.pinned);
    }
    else {
      this.elem.classList.add(this.classes.unpinned);
      this.elem.classList.remove(this.classes.pinned);
    }
  }
};

var headroom = new Headroom(header, options);
headroom.init();

Preview

It may be better to view a larger version on CodePen.

Add the font

Work Sans is available for free on Google Fonts. There are 3 weights being used, light, normal and semi bold.

Here is the standard way of including the fonts, you may want to use an alternative.

<link href="https://fonts.googleapis.com/css?family=Work+Sans:300,400,600" rel="stylesheet">

Defining markup

All items need a containing element .boxes, so that you can apply styles to restrict the width of the element.

Following that ‘package’ should be in it’s own <div> with a class box and a positional one box-start, box-center, box-end. As each will have a slightly different offset.

<div class="container">
  <div class="boxes">
    <div class="box box-start">
      <h2 class="title">Starter</h2>
      <div class="price">
        <span class="price-value">£9</span><span class="price-billed">/mo</span>
      </div>
      <ul class="features">
        <li>Shared</li>
        <li>512mb ram</li>
        <li>20gb HDD</li>
        <li>200gb bandwidth</li>
        <li>
          <s>Choice of OS</s>
        </li>
        <li>
          <s>Host multiple sites</s>
        </li>
      </ul>
      <a href="#" class="button">Order starter</a>
    </div>
    <div class="box box-center">
      <h2 class="title">Developer</h2>
      <div class="price">
        <span class="price-value">£18</span
        ><span class="price-billed">/mo</span>
      </div>
      <ul class="features">
        <li>VPS</li>
        <li>4gb ram</li>
        <li>40gb SSD</li>
        <li>1tb bandwidth</li>
        <li>Choice of OS</li>
        <li>Host multiple sites</li>
      </ul>
      <a href="#" class="button">Order developer</a>
    </div>
    <div class="box box-end">
      <h2 class="title">Business</h2>
      <div class="price">
        <span class="price-value">£36</span
        ><span class="price-billed">/mo</span>
      </div>
      <ul class="features">
        <li>Dedicated</li>
        <li>12gb ram</li>
        <li>120gb SSD</li>
        <li>1tb bandwidth</li>
        <li>Choice of OS</li>
        <li>Host multiple sites</li>
      </ul>
      <a href="#" class="button">Order business</a>
    </div>
  </div>
</div>

Exploring the markup further, the name of each package is using a <h2> they the price is broken up into two parts to apply the styling necessary. A unordered list is used for the features.

Colours being used

For reference here are all the colours used.

Starting CSS

A quick note on the CSS hereon, all examples exclude prefixes for brevity. The codepen example has all necessary prefixes through the use of autoprefixer. It’s debatable whether they are necessary, so that’s up to you.

The container

The container mostly exists so the background fills the width of the screen.

.container {
  padding: 10% 0;
  background-color: #e1f7ee;
}

.boxes {
  display: flex;
  align-items: center;
  max-width: 798px;
  margin: auto;
}

Initial box styling

The styling required for each box. Here you can define common things early, that can be inherited through to the other elements, like text alignment and the font.

.box {
  position: relative;
  flex: 1;
  font-family: Work Sans, sans-serif;
  border-radius: 4px;
  background-color: #fff;
  color: #1a626e;
  text-align: center;
  box-shadow: 0 2px 2px rgba(77, 184, 152, 0.4), 0 2px 12px rgba(77, 184, 152, 0.4);
}

The most important values aside from the more visual styles is the flex value, as this will ensure everything occupies an equal amount of space.

The visual styling reflects that in the design, particularly the box-shadow it closely mimics that of the Illustrator drop shadow.

Specific box styling

Each box is somewhat unique, as reflected in our HTML with the outer and inner class names.

.box-outer {
  padding: 60px 0;
}

The start and end boxes, require the same padding, where the centre box requires more padding to create the size difference.

.box-inner {
  padding: 72px 0;
  margin: 0 -12px;
  z-index: 1;
}

This is where the strength of flexbox as a layout tool helps. The align-content set earlier, means it all aligns nicely.

Finally, the negative margin ensures the overlap is as intended and the z-index means it will be above the other boxes.

Title

Now that the general layout is done, you can move onto the content styles, starting with the title.

.title {
  color: #eb6e5e;
  font-size: 36px;
  font-weight: 300;
  letter-spacing: -0.05em;
  margin: 0 0 18px;
}

The font weight is light, which is 300 for this particular typeface.

Price

The price is broken up into three parts. The background, price value and the billing period.

.price {
  padding: 12px;
  background-color: #fff6e5;
  color: #4db898;
  font-weight: 600;
  font-size: 18px;
}

Here you define the style of this area, and then move onto the specific differences for the value and billing period.

.price-value {
  font-size: 24px;
}

.price-billed {
  font-variant: small-caps;
}

Individually the value is larger than ‘/mo’, which is also small caps.

Features

The features is broken up into a few areas. The <ul>, which some browser defaults need to be undone. The padding adds a good space round the title and button area.

.features {
  margin: 0;
  padding: 24px;
}

.features s {
  color: #bed8d8;
}

.features li {
  line-height: 2;
  list-style: none;
}

.features li:first-child {
  font-weight: 600;
}

Moving on to more of the content, the s of .features s could be easily considered a mistake, but it’s not we’re making the strikethrough a lighter blue to deemphasise it.

Then each item is spaced using line-height, you don’t want anything to break onto a new line so line-height is an easy way to get consistent spacing. Finally, the first item is made bold.

Button

When styling unless you want them to fill the width of the container, they are best being inline-block.

.button {
  display: inline-block;
  background-color: #eb6e5e;
  color: #fff3f0;
  padding: 12px 24px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}

The transition is important for the hover state. The text-decoration, makes sure the browser default is removed.

.button:hover,
.button:focus {
  color: #e1f7ee;
  box-shadow: inset 0 -44px #4db898;
}

The transition set earlier means that the shadow appears from the bottom, without that it would look like the background colour changes. It’s important to note the y value of the shadow needs to be the button height.

.button:active {
  transform: scale(0.95455);
}

The active state makes the button smaller, though the scale value may seem a little strange. The scale down needs to be subtle, so knowing the button height is 44px, scaling down to 42px is ideal. 42 ÷ 44 gives you .95455.

All CSS

That’s everything to be covered in terms of CSS, here is the full combined CSS, so it’s easier to copy.

/* Container */
.container {
  padding: 10% 0;
  background-color: #e1f7ee;
}

.boxes {
  display: flex;
  align-items: center;
  max-width: 798px;
  margin: auto;
}

/* Box */
.box {
  position: relative;
  flex: 1;
  font-family: Work Sans, sans-serif;
  border-radius: 4px;
  background-color: #fff;
  color: #1a626e;
  text-align: center;
  box-shadow: 0 2px 2px rgba(77, 184, 152, 0.4), 0 2px 12px rgba(77, 184, 152, 0.4);
}

.box-outer {
  padding: 60px 0;
}

.box-inner {
  padding: 72px 0;
  margin: 0 -12px;
  z-index: 1;
}

/* Title */
.title {
  color: #eb6e5e;
  font-size: 36px;
  font-weight: 300;
  letter-spacing: -0.05em;
  margin: 0 0 18px;
}

/* Price */
.price {
  padding: 12px;
  background-color: #fff6e5;
  color: #4db898;
  font-weight: 600;
  font-size: 18px;
}

.price-value {
  font-size: 24px;
}

.price-billed {
  font-variant: small-caps;
}

/* Features */
.features {
  margin: 0;
  padding: 24px;
}

.features s {
  color: #bed8d8;
}

.features li {
  line-height: 2;
  list-style: none;
}

.features li:first-child {
  font-weight: 600;
}

/* Button */
.button {
  display: inline-block;
  background-color: #eb6e5e;
  color: #fff3f0;
  padding: 12px 24px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}

.button:hover,
.button:focus {
  color: #e1f7ee;
  box-shadow: inset 0 -44px #4db898;
}

.button:active {
  transform: scale(0.95455);
}

Codepen preview

Skip ahead

Here's what will be explained in the coming paragraphs. Feel free to explore the code and skip ahead if necessary.

Identifying elements in the design

To understand what happens with this toggle, it’s more ‘faking’ the element. It’s still a regular checkbox, but to make the toggle work you need to retain the behaviour.

Depending on your stylistic choices it determines how you will setup your markup. As everything involved in this design changes with the checked state, it means careful consideration is needed.

Markup

Knowing that each part of the toggle style needs to change that means these elements will all need to follow the checkbox.

<label class="label label-toggle" for="night-mode">
  <div class="input-toggle">
    <input class="input-checkbox" id="night-mode" type="checkbox" />
    <span class="input-toggle-handle"></span>
  </div>
  Night mode
</label>

The markup follows a common pattern for using checkbox inputs. It’s contained within the label, to increase the area it can be interacted with.

A span for the styling must follow the checkbox, this will become clearer once you get on to CSS. These elements are then contained by a div, this will be used for positioning and spacing.

Get some basics in place

The basics here are what allow you to get the correct positioning, alongside label text and the correct positioning of the checkbox.

.input-toggle {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

Next is to position the checkbox to fill the toggle area, and remove its visibility with opacity. This is the ‘faking’ part.

.input-toggle input {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
}

Toggle background

For the background it needs to be fixed in width and height. It’s got to contain the area clearly, and invite interaction. As there is going to be a transition in the background, the styles need to be applied to .input-toggle-handle.

.input-toggle-handle {
  display: block;
  width: 84px;
  height: 44px;
  transition: 0.4s ease;
  background-image: linear-gradient(#51c2d7, #51dacf);
  border-radius: 10em;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(0, 0, 0, 0.15),
    inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 44px 44px #fff;
}

All styling here can be tweaked to your own liking, except for the box-shadow and background-image. They’re crucial to this particular style, as later on the line with inset 44px 44px #fff will transition out the to reveal the gradient. If you want to modify it this is something to consider.

Toggle handle

As you’ve had to use the class to form the background, now you’re left with using a pseudo element to make the handle.

.input-toggle-handle:before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 6px;
  left: 8px;
  width: 32px;
  height: 32px;
  transition: 0.4s ease;
  border-radius: 10em;
  background: #fff;
  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.15),
    0 1px 2px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(0, 0, 0, 0.1);
}

The positioning values are based upon the size of the toggle and what fits best within the background area. The box-shadow and background can be tweaked as necessary. You may want to tweak the transition values too.

The :checked state

In the next steps it becomes clearer why the checkbox is positioned the way it is. As the only way to change the appearance of the toggle is to use the :checked pseudo class.

Reveal the background

If the input is checked, style the adjacent sibling (~). Essentially the element that follows this one, this is why source order is crucial.

.input-toggle input:checked ~ .input-toggle-handle {
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.15), inset 0 0 0 1px #31a2a8;
}

Firstly, some adjustments to the box-shadow, this makes for a nice transition from white background to gradient. The choice of colour reflects the gradient, as #31a2a8 is a darker shade of blue.

Move the toggle over

.input-toggle input:checked ~ .input-toggle-handle:before {
  left: 44px;
  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px #31a2a8,
    0 1px 2px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(0, 0, 0, 0.1);
}

Finally, move the toggle over and adjust the box-shadow. The left value here is subject to tweaking, if you change the size of the elements.

It would be ideal to use pseudo elements on the input itself, but it’s necessary to use appearance to be able to. Which works in different ways in different browsers, that makes this approach the most practical.

Improving clarity

Generally with these types of toggles you have to make the shift in state very clear. The position of the toggle and colour certainly indicate this. It’s not ideal to rely only upon colour in your interface, if the action is something critical.

.input-toggle:before {
  content: 'on';
  left: 0;
  color: #fff;
}

.input-toggle:after {
  content: 'off';
  right: 0;
  color: #1a626e;
}

.input-toggle:before,
.input-toggle:after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 12px 16px;
  font-size: 12px;
  z-index: 0;
}

The bonus of the containing element allows you to add the state text on this element. Using both :before and :after you add the relevant content, and both need positioning similarly.

The important property here is the z-index ensuring that it remains positioned behind the toggle at all times. This means each transition will nicely hide the relevant text.

The padding, font-size and color can be tweaked here.

Demo

Again, here is the complete demo, I recommend forking it on CodePen and having a look around.

What you’re making and download

Choose your content

You may have a real world use, which I would suggest using, but I’m going to use a fictional web hosting service as an example, with developers/designers with the ability to host side projects on different domains.

I’ve added a line through parts of the service that are not available in others. This will be important for clarity later.

Design decisions

A 3 column layout is a must, so that offers an immediate constraint. The decisions to be made are round highlighting the most important features. All the information is important in the table but the deciding factors would likely be based around price and what type of server.

Initially I tried a couple of smaller sketches, and decided the name being larger is the best route. This is a common practice simply because price is always a hurdle, an important part, but you don’t want to emphasise it too much. The developer plan will have attention drawn to it through a slightly different size. The reason for this is the intention for it to be the most popular package.

Choose a typeface

To get into more design choices, through the typeface, I’m going to use Work Sans. It offers good legibility and has a good options at the bolder and lighter ends of the scale.

You can find it on Google Fonts, however, you may like to make your own choice.

Choose a colour palette

If you want to choose your own palette, I encourage you to, however this is the one I will be using.

Position the content

For this particular element it makes sense to get the rough layout defined by type only. This will allow for the sizes of each of the containing rectangles to be determined easily and changed less.

Start by typing out in separate type layers, spacing the items and groups, in the following order:

• Title
• Price
• Features
• Button text

Content styles

The majority of the styles applied will be through using the character panel. This may be open by default, but if not go to Window > Type > Character or press cmd + t

Title

For the title of each I have chosen to make them red, as they will be quite relatable for the user and size them appropriately.

Price

The price doesn’t need to be too emphasised, but it allows you the opportunity to provide some good visual separation, between the title and details.

For now make the value semibold and increase the size to 24px. Next change the ‘/mo’ to small caps keeping that at a regular weight and increasing the font size to 18px.

The small caps in comparison to numbers aren’t very small, hence the choice to decrease the size.

Finally make change the colour to #4db898.

Features

For the features, the server type is the most important factor. With a little knowledge you can immediately work out the quality you’ll get. So to add emphasis here is ideal, increase the weight to semibold.

Change the colour to #1a626e and increase the leading to 32px. This will give sufficient space between each item.

Reducing emphasis on features not included

The final step for the features is to have a way to show that they’re not included. For this select in starter the ‘choice of OS’ and ‘Host multiple sites’ and change the colour to #bed8d8.

Button

The button text should be semibold and have a red background. Add a rounded rectangle, select it by finding the rectangle in the toolbar. Click and hold to reveal the extra items.

For the ‘Order starter’ dimensions will be 132 width by 42 height. The corner radius will be 4px. Repeat this process for the other buttons, keeping the same height.

Button text colour

Finally, as the text colour won’t be very readable on this background colour change it to #fff3f0. It’s not quite white, but a very light shade, this creates a nicer contrast.

Check in

Now that you’ve applied all the text styles, and a background for the buttons you’re not far from complete.

Making each section clear

In these next steps you’ll make each section clearer. Firstly, select everything and press cmd + g and then open the align panel from Window > Align. Next change ‘Align to:’ to Align to Artboard.

Align everything to the vertical centre, this sets everything up nicely for later alignment.

Background

Press m to select the rectangle tool, click the artboard and draw a rectangle the size of the artboard. Following that cut it cmd + x, and paste it in the background cmd + b.

Now change the background to #e1f7ee. With the layer still selected press cmd + 2, this should lock the layer. This will ensure you don’t select it later as there is no further changes needed.

Sectioning

Find the rounded rectangle tool, then click the artboard and add dimensions 266px width by 516px height with a 4px radius.

Once in place, press cmd + [ until it has gone to the back of the text.

Alignment

With the shape still selected using the align window from earlier, align it both horizontally and vertically on the artboard.

Things will be a little out of place with the central column, select everything in the central column, and align to the horizontal centre.

Add a shadow

Next with the shape still selected, in the menu go to Effect > Stylize > Drop Shadow.

With the drop shadow window open, add the following settings:

The shadow colour

When choosing a shadow colour it should take on some of the colour around it. Hence why the shadow is a darker green, if you were to use black, it's less true to how shadows behave. Ideally it would be different colours for the central column, this is something that is for a post of it's own as it's difficult to achieve without multiple layers.

Add a different shadow

Copy your original shadow layer, paste it in place with cmd + shift + v.

In the appearance panel, which can be found under Window > Appearance, click the drop shadow to modify it. Change the shadow blur to 2px, and move it behind the text layers with cmd + [.

Group and duplicate the shadows

Select both of the shadow layers and group them with cmd + g.

Duplicate

With the group still selected, paste in place cmd + shift + v. Then nudge across until it lines up nicely at the side. Repeat this process again.

Resize

Now you should have two rectangles at either side. Select both of them and subtract 24px from their height.

Making sure your reference point is in the centre, and constrain width and height proportions is off.

Send to back and more alignment

Using cmd + [, send the two resized rectangles to the back. Now at this stage some alignment may be off, select each column and click the rectangle layer. The line should become bolder, now in the align panel use ‘Horizontal Align Center’.

This is aligning to a key object, repeat the process for the other side. Then take each side individually and nudge it in 12px.

Adding visual separation to the price

After getting this far, there is only improving the visual separation of the price. Add a rectangle that is 266px width by 54px height, with the fill colour #fff6e5. Place it roughly behind the price, then using the align to key object technique

Duplicate and align in each section

Copy, paste in place and then position it with the other price. Repeat this process for the third column and you're done.

Final thoughts

There are ways to build upon this add further dimension to buttons and such things. To keep the tutorial shorter I opted against this.

Feel free to download the finished files.

Wordpress: wp_trim_words()

I’m fairly certain that one of the most Google’d terms for Wordpress, would be around the truncation of excerpts. I know I have done it multiple times, but Wordpress has it’s own function.

wp_trim_words( $text, $num_words = 55, $more = null ); 

It takes three parameters, the text, number of words and what to append to the text should it be trimmed.

$content = wp_trim_words( get_the_content(), 40, '…' ); 
echo $content;

Wordpress: get_template_directory_uri()

Being new or experienced to Wordpress can leave you wondering what’s the best way to get the URL to something? There are a few different ways but the way that never fails, is get_template_directory_uri(). Remember that and you’ll be ok.

<img src="<?php echo get_template_directory_uri() ?>/images/logo.svg">

Wordpress: home_url()

Equally if you have a particular URL in mind, but just want to ensure the correct domain is used transitioning between local and live, the home_url() function is what you need.

It takes two parameters, the URL and the scheme. Building on the get_template_directory_uri() example from before.

<a href="<?php echo home_url(); ?>">
  <img src="<?php echo get_template_directory_uri() ?>/images/logo.svg">
</a>

Alternatively, if you wanted to link to a particular page using https.

<a href="<?php echo home_url( 'blog', 'https' ); ?>">Blog</a>

Or output the relative URL eg: ‘/blog’.

<a href="<?php echo home_url( 'blog', 'relative' ); ?>">Blog</a>

Wordpress: wpautop()

This is a particularly smart function built into Wordpress, it will add paragraphs round the content passed to it. If the content does contain paragraphs, it won’t. It’s quite handy for excerpts, if they are to span multiple paragraphs or to save you from having to do it manually.

echo wpautop(get_the_excerpt());

Custom: link_to()

This isn’t a Wordpress function by default, but if you’ve ever just wanted to get the page by it’s title (alternatively name). It involves a couple of steps, and this can get quite repetitive and difficult to remember.

function link_to( $title )
{
  return get_page_link( get_page_by_title( $title )->ID );
}

It was somewhat inspired by Rails, hence the naming link_to. Although it isn’t quite as powerful as the Rails version, it’s still a valuable addition to your Wordpress setup, for when you need to speedily get a link to a page.

echo link_to( 'Contact' );

Custom: add excerpts to pages

Sometimes you’ll want to add an introduction to a page, or have some descriptive text separate from the_content(). You can do this for posts with ease, but for pages it’s trickier. You shouldn’t have to set up a custom field of sorts, it should be simpler, which adding excerpts to pages is. Add both of these functions to functions.php.

function iamsteve_page_excerpt()
{
    add_post_type_support( 'page', 'excerpt' );
}
add_action( 'init', 'iamsteve_page_excerpt' );

After adding support for excerpts, you want to build a function to use it. As mentioned earlier, this is a handy place to use wpautop(), for automatic paragraphs.

function get_page_excerpt()
{
  global $post;
  $page_excerpt = get_page( $post->ID )->post_excerpt;

  if ( $page_excerpt )
  {
    return wpautop( $page_excerpt, false );
  }
}

The function then uses the global $post variable to gain access to the excerpt. This ensures that it will be accessible without needing a loop. Check if it exists, pass that through wpautop(), the second parameter can defaults to true to preserve line breaks <br>. You may or may not want this.

That’s it

These are the instances I have found myself Googling a lot for and to know that some of the functionality already exists within Wordpress is helpful. Is there anything you’d add to this list?

It also means every post I work on, the redesign release gets pushed back, or it takes away from a potential queue addition. As I don’t want to stop the weekly output, I think it’s worth posting a progress update to think some things through.

Why redesign

As I haven’t announced in great detail that I’m doing a redesign (why would it matter?) I want to reflect on that. This site was last redesigned early 2012, which was the year I graduated from University. I prepared a portfolio, and setup the site to be very focused on getting a job. Now I’ve been in the industry for nearly 5 years, much has changed for me professionally, but this website has remained the same.

There is a level of complacency that happens with having a job. You get comfortable and don’t really update your portfolio, which can really leave you lagging behind. As a result of this I eventually removed the portfolio and made some tweaks. They were focused on moving the website in a direction of having an active blog. This made sense, as it was something I proved to myself, that I could do regularly.

A new logo then redesign the site

As mentioned in the logo redesign post, the full redesign is something I originally started in around 2013. I made good progress with the design, but the design world shifted to flat and what I made was heavily ‘skeuomorphic’. I was put off by that, I didn’t want to appear outdated. It had a negative effect, I wasn’t motivated to start again. I just couldn’t get behind ‘flat’ and the amount of time it takes to redesign a website in your personal time.

On more recent reflection that design still met criteria of a redesign, but the shift in direction means, that much of it in terms of layout, would need to change.

The scrapped design

I explored several other ideas, within a similar style. Some of these versions at the time were testing my skills of visual design. It was a fun design process.

I tried various routes, and eventually reigned in the approach as I tried to balance the visual design with content and not make it too intense.

On to the actual redesign

I’ve mostly kept quiet about the process of the redesign as I’m documenting it along the way. A write up will follow with the redesign. I’m currently at a stage where I’m not too far away from completion. The homepage is done, and I’m working on the blog related pages.

Following my process, I identified a set of problems. These were as simple as the website is outdated and that I don’t feel as if I’m perceived as a designer. After that, I outlined a brief, to make a new ‘brand’ for this website, improve the blog, bring back a portfolio and bring focus to me being a designer.

Taking an idea and improving it

Getting into the design, I revisited what I had made previously in making a new logo and came up with a new solution. I visited wireframes and sketches briefly, whilst applying some illustration to the logo. I realised this wasn’t working and scrapped that idea.

Reworking an idea further

Determined to include illustration I went back to the drawing board and changed the idea. I tried to force them to be very closely based on the logo. Which was fine, it worked, but not with the layout. So I made them with a view to fit them in the design.

The illustrations are an area I spent most time. It’s an area I’m not as confident with, as I’m by no means an illustrator or good at drawing. It’s something I’m working on and I was determined to make it work.

Following finalising the illustrations, I made initial colour and typeface choices, alongside sketching ideas and moving on to wireframes. I made wireframes for the homepage and blog. Which then I designed. I made the decision quite early on to stagger the approach, and have left the portfolio until a later date. I have since got around 70% of the way with coding. With the homepage complete and the blog pages a good way through.

The plan from here

The priority is to get to finish the blog related pages, finish off the download for the newsletter and an extremely simple contact page. Finally some testing and make it public.

From there I have a list of things to do to build up on the blog:

• Contact improvements
• Performance improvements
• Series highlighter
• About
• Design system
• Portfolio

Regarding the portfolio, it’s a really intense task to do right. I am considering using the likes of Adobe Portfolio, as it’s purely about the process and work. This service exists for a reason, so I believe it’s a good choice. I want to take my portfolio more seriously, and be able to keep it updated easily.

What we will end up with

At the end of the post you’ll end up with something that looks like this, if you would like to skip ahead you can download the file.

Make a new document

The first step is to setup a new document, the size isn’t too important, but I’ve made an 1200⨉800 web artboard.

Getting the initial row layout

The first step is to get the necessary elements in place to begin to build up the table. Select the line tool using \.

Then click the artboard and you’ll be presented with a window. The length should be 840px and the angle should be 0°.

Duplicate the line

The next step is to duplicate the line and paste in place. Copy the line with cmd + c then paste in place with cmd + shift + v.

With the line still selected, open Window > Transform. Click to the end of the y coordinate and type '+256' this will add 8 rows worth of space at 32px each to the y coordinate.

Using the blend tool to make additional lines

Select both of your lines, then press cmd + alt + b, or in the menu go to Object > Blend > Make. After doing this you may have what appears to be a filled box.

Next, in the menu go to Object > Blend > Blend Options. This is where you can customise the blend. In spacing select ‘Specified Steps’ and put in 6. Click ‘OK’ and you have the cells.

Alternating row colour

Now you’re going to use split into grid to make rows to use for the background colour.

Add a rectangle

Press m, click the artboard and add the values 840px by 252px. So that the rows will be covered.

Next, fill the rectangle with any colour, purely for visibility.

Align the rectangle

Select both the rectangle and the lines that have been blended. Then open the align panel, which can be found under Window > Align.

Now using ‘Align to Artboard’ click both horizontal and vertical align centre.

Make the rows

Next is to select your rectangle then go to Object > Path > Split into Grid.

Add 7 to the row count and click ok. The rectangle will be the top most layer, so press cmd + [ until the rectangle is behind the lines.

Alternating row colour

I would recommend that you don’t delete rows to get the alternating row colour. This will make alignment trickier later for each row. Instead, fill them with the main background colour.

Expand

If you want to apply different stroke widths to change the style, it will be ideal to expand the blend. To do this you can press cmd + e, or by going to Object > Expand in the menu.

Add some content

At this stage now is ideal to add content, that way you can determine column length. Then add the vertical lines, if this is your preference. I would recommend a manual approach as column width isn’t easy to determine.

Once you have your content entered, you can think better about alignment. Everything is likely to be placed pretty well, but some things will be off.

Row alignment

Using align to key object you can align each row reasonably quickly.

Using align to key object is important because it makes sure nothing nudges out of place by a few pixels.

Column alignment

As mentioned a little earlier I recommend aligning these manually. Changing text alignment where you see fit and that should be it.

Define your style

That’s it, I’ve defined some simple styling, to keep the tutorial short, but you can very much build up on this. The techniques learnt within this post can really help tasks like this much more efficient.

When and why

The most common use case I can think of is making buttons. You’ve got a rectangle, above that is some text, which you want to align centrally. The rectangle is positioned correctly, your text isn’t. You use the alignment tools and everything is now off by a few pixels. This is the perfect use case for align to key object.

How to

To align to key object you must select two items and then change the ‘Align To’ option to Align to Key Object. The crucial part is then clicking the item you want to use to for aligning to.

Quicker for axis alignment

Using align to key object is a quick method for aligning horizontally or vertically. Using the same method it will help save time.

That’s it

I do wish there was a way to somehow default this behaviour. Taking the item in the back as the key object, this would work well. Anyway, I felt this was a necessary quick tip to highlight, as I’ve found it valuable.

Once you’re comfortable with this, it’s also the key to evenly spacing objects with a precise pixel value.

Why the tachyons approach?

Websites are ever growing in size and complexity and tachyons aims to bring some control to that in a performant way. It gives you the power to make websites with as little CSS as possible.

Just think of the amount of times you define and tweak at different screen sizes font size, margin and padding. It’s probably a significant amount, and if you’re like me you’ll want to keep it consistent. However, this is very difficult to keep track of.

It’s a struggle to keep these particular properties consistent and maintain how your design looks. It’s frustrating to see something out of alignment, or a font size too large. To write the extra CSS to fix it feels annoying. This is what tachyons solves.

Getting started

The approach is very easy to customise to your kind of setup. It’s applying the same rules across multiple breakpoints, which allows you to write your HTML towards that.

You may have something that looks like

So traditionally you may apply some basic styling to your headings and paragraphs, then get more specific as and when.

h1, h2, h3, h4, h5, h6 { … }
h1 { … }
h2 { … }
p { … }

.content-title { … }
.some-other-content-title { … }
.more-content-title { … }

@media (min-width: 800px) {
  .content-title { … }
  .some-other-content-title { … }
  .more-content-title { … } }

This is just a vague example. If you have separate margins and font sizes in all of those rules, that are very similar. The tachyons approach means you don’t redefine these styles over and over. Instead you apply the class in your HTML.

It takes the worry of CSS being off at a certain media query. It’s about having one area to rely upon, if a margin needs to be smaller at a breakpoint, add a class.

Using font sizing as an example

So let’s get on to the replacement. Within your design you will have a set of font sizes, that follow a type scale or a pattern, gather all these up. Each property is defined in a class.

.f1 {
  font-size: 30px;
}
.f2 {
  font-size: 24px;
}
.f3 {
  font-size: 21px;
}
.f4 {
  font-size: 18px;
}
.f5 {
  font-size: 16px;
}
.f6 {
  font-size: 14px;
}

You repeat this process in media queries, except apply a suffix to them. In this example I use -b and -d. I use these letters, because in Sass, I have variables assigned to each breakpoint, so I know what it’s tied to.

@media (min-width: 600px) {
  .f1-b {
    font-size: 30px;
  }
  .f2-b {
    font-size: 24px;
  }
  .f3-b {
    font-size: 21px;
  }
  .f4-b {
    font-size: 18px;
  }
  .f5-b {
    font-size: 16px;
  }
  .f6-b {
    font-size: 14px;
  }
}

@media (min-width: 800px) {
  .f1-d {
    font-size: 30px;
  }
  .f2-d {
    font-size: 24px;
  }
  .f3-d {
    font-size: 21px;
  }
  .f4-d {
    font-size: 18px;
  }
  .f5-d {
    font-size: 16px;
  }
  .f6-d {
    font-size: 14px;
  }
}

Tachyons also has a slightly different breakpoint setup. It uses ns (not small), m (medium) and l (large). It’s entirely up to you.

Using the classes

Now you may wonder what’s the point in defining the same sizes with slightly varied naming, in different media queries. That’s the beauty of this, once you understand you have a lot of control over your design, very quickly.

<h1 class="f3 f2-b f1-d">My title</h1>

With the markup you go from font size 3 up to font size 1. This makes it quick to apply any font size in your type scale.

Misunderstanding the approach

I did initially misunderstand the approach, I tied it too closely to specific situations.

.f1 {
  font-size: 21px;
}

@media (min-width: 600px) {
  .f1-b {
    font-size: 24px;
  }
}

@media (min-width: 800px) {
  .f1-d {
    font-size: 30px;
  }
}

The misunderstanding I had was having .f1 be one size and each of the media query variants be different sizes too. I seen it as I wouldn’t ever use this font size at this screen width, so I’ll just resize it here.

That causes the same problems with consistency and maintenance. It’s important to know that each font size is the same just a different suffix. If you need another font size then create a new class set.

Naming, yes it may be ugly

After all that, yes, it is considered an ugly approach. So is the repetitive nature of applying font sizes and spacing.

<h1 class="size-small size-medium-b size-large-d">My title</h1>

There is also nothing stopping you from using your own naming pattern. That’s up to you, this is a technique for applying CSS.

Get comfortable with applying classes

You also have to be comfortable with what could be considered ‘classitis’, but it’s so simple to manage. One place to update, not multiple. No approach is perfect, but this certainly takes away the headaches.

There are so many techniques for writing CSS, they all have similar goals in mind. This isn’t how I’m approaching every bit of CSS I write, I’ve just taken the parts that cause me frustration regularly. Spacing and font sizes happen to be mine.

Other examples

This approach can be used for anything, if you explore the tachyons documentation it will become clear.

.mb0 {
  margin-bottom: 0;
}
.mb1 {
  margin-bottom: 6px;
}
.mb2 {
  margin-bottom: 12px;
}
.mb3 {
  margin-bottom: 18px;
}
.mb4 {
  margin-bottom: 24px;
}

@include breakpoint(min-width: 600px) {
  .mb0-b {
    margin-bottom: 0;
  }
  .mb1-b {
    margin-bottom: 6px;
  }
  .mb2-b {
    margin-bottom: 12px;
  }
  .mb3-b {
    margin-bottom: 18px;
  }
  .mb4-b {
    margin-bottom: 24px;
  }
}

@include breakpoint(min-width: 800px) {
  .mb0-d {
    margin-bottom: 0;
  }
  .mb1-d {
    margin-bottom: 6px;
  }
  .mb2-d {
    margin-bottom: 12px;
  }
  .mb3-d {
    margin-bottom: 18px;
  }
  .mb4-d {
    margin-bottom: 24px;
  }
}

The naming behind this is the abbreviation of margin bottom. As mentioned earlier, it’s logically named. In designs your spacing should follow a pattern (like your type), so you should only need a set amount.

What about areas I can’t control?

Typically anything that’s managed in a CMS you can’t apply classes to. It doesn’t mean defeat. You have to apply styles more specifically.

.cms h1 {
  font-size: 21px;
}

@media (min-width: 600px) {
  .cms h1 {
    font-size: 24px;
  }
}

@media (min-width: 800px) {
  .cms h1 {
    font-size: 30px;
  }
}

This is fine, sure it kind of breaks the approach. It’s only one additional area, that you’ll be very aware of. You have had to make the decision to go specific, instead of being specific all the time.

The best thing I have learnt about CSS, is not to be dogmatic about it. Take bits of each approach and make it work for you.

Tachyons makes sense

I encourage you to look at tachyons.io for more information. Have a think about the most repetitive parts of writing CSS and use this approach. It’s made managing CSS much easier, and allows me to focus on what I enjoy most; designing.

This post is out of date. Scroll snap points has been updated significantly since this post was written. Many of the properties will no longer work, until this post can be updated, I would advise referring to the official spec.

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.

Browser support

Currently browser support isn't great (as of writing), due to Chrome not supporting scroll snap points altogether. So this cuts out a massive part of anyone’s audience. Always check caniuse for up to date usage.

Prefixes and deprecations

It’s important to note as well Safari is using the -webkit- prefix. The properties scroll-snap-points-x and scroll-snap-points-y are deprecated according to MDN.

The behaviour

Scroll snap points should behave quite familiarly. If you scroll or swipe an area that has it enabled, it will snap to the next area, that has been specified in CSS.

Properties on the scroll container

There are two types of properties that are necessary for scrolling regions, those on the container and those on the child elements. Some will also have the ability to be used on both the container and child elements.

Basic CSS required

Part of making this functionality viable means a base level of CSS will be required for the scroll container.

Horizontal scroll regions

.scroll-container {
  width: 100vw;
  height: 100vh;
  white-space: nowrap;
  overflow-x: auto; }

Vertical scroll regions

.scroll-container {
  width: 100vw;
  height: 100vh;
  overflow-y: auto; }

Defining a width, height and overflow will give you a basic scrolling area to build upon with snap-points. Additionally if you want it to scroll horizontally, you will need white-space: nowrap.

scroll-snap-type

There are 3 values for the snap type, none, mandatory and proximity. none being the more obvious value, in that if there is any snapping, it will be removed. mandatory and proximity allow for different types of snapping behaviour.

Comparisons

When using the values mandatory or proximity, I found in Safari it didn’t matter too much, but in Firefox it made a clear difference.

mandatory definitely had the more expected snapping behaviour, whereas proximity felt somewhat broken. proximity allows the user to scroll more freely, mandatory doesn’t.

Differences

Another difference is, when something happens to content, such as adding, moving, deleting or resizing. mandatory from my understanding will find the snap point again, whereas proximity will remain.

I imagine this will become more consistent with final implementation.

scroll-snap-points-x and scroll-snap-points-y

These properties only work in Safari, with the -webkit- prefix. This allows you to define a distance each scroll should snap to, using the repeat() function.

.scroll-container {
  scroll-snap-points-x: repeat(100%);
  scroll-snap-points-y: repeat(100%); }

The value can generally be any unit of measurement, px, em, or vw, to name a few. It’s fairly straightforward, but it’s clear why it was deprecated, which I will get into shortly.

scroll-snap-destination

This is the replacement to scroll-snap-points-x and scroll-snap-points-y. It’s setup to be more familiar, like background-position, as in the first value is the x axis and the second is the y axis.

By default the value is 0 0, it also accepts the same position values you would expect of background-position. This is the benefit over scroll-snap-points, there isn’t any new syntax to learn.

So with that in mind, once you scroll it will snap to that point within the element. If you were to use 200px as a value, it would snap to the element and an additional 200px.

I found the behaviour to work strangely, when experimenting with it within Firefox over Safari. If you compare the difference of the demo in either browser, it will become clearer. It feels like you’re forced towards the child elements taking up the whole browser width to work effectively.

Finally, this property you can animate, whereas scroll-snap-points can’t. That’s for a separate post to explore this capability.

Summary

• The properties mentioned are the minimum needed to get the scrolling behaviour
• scroll-snap-points-x and scroll-snap-points-y only work in Safari and are being phased out
• scroll-snap-destination is the replacement
• If you want horizontal scrolling extra properties are required
• Similarly for vertical, but less is required

.scroll-container {
  width: 100vw;
  height: 100vh;

  /* Not necessary for overflow-y */
  white-space: nowrap;

  /* Can be overflow-y */
  overflow-x: auto;

  /* Enable scroll snapping */
  scroll-snap-points-x: repeat(100%);
  scroll-snap-points-y: repeat(100%);
  scroll-snap-destination: 0 0; }

On the elements

There are no supported properties, as of yet that are element only.

All elements

Currently, there is only one element that will apply to all elements.

scroll-snap-coordinate

This property can be applied to child elements too, it’s usage is similar to background-position and you can also pass multiple coordinates.

.scroll-container {
  scroll-snap-coordinate: 0 0, center center; }

.scroll-item {
  scroll-snap-coordinate: 240px 240px; }

To be honest I don’t actually know how this property affected anything. It sounds like the behaviour is similar to scroll-snap-destination. With it being able to be applied to child elements, I would have expected it to align to each differently if specified.

It feels like this property should clash with scroll-snap-destination. I didn’t understand this very well, however it was only mentioned in MDN and supported in Firefox.

Final demo

This ended up being the best kind of layout for the most consistent behaviour across browsers that support this.

Future properties

The properties hereon are not currently available in any browser, but the intention is they are going to be part of this module. It may change, until the module is final, that’s where I’ll be keeping this up to date.

Not being able to use them in the browser, means interpreting how they will supposedly work. Which is quite difficult, so I will give a vague overview, particularly focusing on code usage.

scroll-snap-padding

This is a scroll container property. It works similarly to regular padding.

.scroll-container {
  scroll-snap-padding: 12px;
  scroll-snap-padding: 12px 0; }

The scroll-snap-padding property defines the snap alignment container, a region inset from the visual viewport of a scroll container used in calculating its snap positions. The snap alignment container is used as the alignment container when calculating valid snap positions. [^1]

scroll-snap-margin

This is a child element property. It works similar to the regular margin.

.scroll-container {
  scroll-snap-margin: 12px;
  scroll-snap-margin: 12px 0; }

The scroll-snap-margin property defines the scroll snap margin on elements within a scroll container, used in calculating snap positions for that scroll container.[^2]

scroll-snap-align

This property applies to all elements, using values none, start, end and centre.

.scroll-container {
  scroll-snap-align: centre; }

The scroll-snap-align property specifies how an element’s scroll snap margin should align with its ancestor scroll container’s snap alignment container. The two values specify the snapping behavior in the x and y axes, respectively. If only one value is specified, the second value defaults to the same value.[^3]

Finishing thoughts

The difficulty in researching some of this CSS module tells me it’s going to go through some changes. Like the CSS shapes and exclusions modules, it’s just the start. There is plenty of room for expansion. Such as animation and control over how it’s interacted with. Animation appears possible in Firefox and with future properties.

You may be put off using such CSS, but without experimenting and looking at new properties. You’re not able to form an opinion and join in the future of CSS. You can also see the difficulty in interpreting some of these properties, and the behaviour not being what you may expect. This type of feedback is helpful for CSS spec writers.

[^1]: Scroll snap padding specification [^2]: Scroll snap margin specification [^3]: Scroll snap align specification

So while it’s not a post that directly gives value, it helps me keep on top of the library of content that I am acquiring.

Featured images

The main aim of this week was to try get a few featured images out. It’s something I’m going to make more of a consistent thing, when the redesign is complete. Balancing the redesign and writing content, amongst a full time job and life is very tricky. It means it’s necessary, to devote blocks of time, away from writing, so that I can progress.

Colour series

Hero area series

How to use swatches in Illustrator

Challenging

Making featured images is quite challenging. I have focused on doing a quite a few now, during this post and the redesign. Trying to figure out my style and consistency with illustration, is something I’m beginning to nail down.

The more ways I find to illustrate things, my style is going to become clearer. It’s also a challenge to come up with an idea that represents the subject and deliver it in a more timely fashion.

Misc changes

Outside of the featured images it was useful to do some other site maintenance.

Setup for redesign

In addition to adding featured images, I will have two sets of images for each post. The featured image and a thumbnail, the thumbnails aren’t in use now, but they will once the redesign is complete. So I needed a way to define those ahead of time and begin uploading them now.

Time will tell how maintainable this is, but I like to have particular ‘art directed’ control over my images.

Twitter card/opengraph meta

Now that some posts have featured images, it was necessary to get twitter cards and opengraph meta to recognise them too. Images tend to drive more engagement, which may drive more clicks, as and when articles are shared.

Favicon & touch icons

Since updating the logo, it has been something I have been intent on doing, but never got round to it. Creating a favicon was relatively quick, as I had already considered it, when making the logo and drawn small sizes. The touch icons are also quick and simple, but do the job.

Particular markdown links

I discovered a bug in my particular setup for the way I handle posts in markdown. Links were being parsed incorrectly, in specific cases, that I couldn’t quite pin down. Hence why it’s taken so long to notice.

I spent some time making regular HTML links, then realised how much effort it was. I needed to find a more convenient fix, which I was able to.

Sequel Pro tool

I missed off Sequel Pro from my tools post. I realised shortly afterwards, I hadn’t added it. Read the updated article.

That’s it

Amongst these things progress has slowed getting the redesign done. I have made good progress, much of the homepage is coded, but I need to knuckle down and get a significant amount of posts in the schedule.

As well as adding the visual style, there will be a few techniques within Illustrator that can make your life easier.

Download to carry on

If you want to catch up download the wireframe.

Picking up from the previous post

There was very little in the way of visual design done in the previous post, aside from the text. So there are many changes that need to be made to make this easier to understand.

What you’ll end up with

If you want skip the post altogether download the completed file.

Preparing the design

At the moment the visual hierarchy isn’t clear, this is one of the first things I look to improve, then build upon the style further.

These are the following things that will be added or improved:

• Colour palette
• Visually separate the current month area from the dates
• Deemphasise the previous and next month days
• In turn bring focus to the current month days
• Increase the weight of the arrows and reduce size slightly
• Hover and selected states

Colour palette

I'm going to use a simple colour palette made up of 3 colours with a few tints and shades. A blue, green and white.

The colours complement each other well and will not be too overwhelming for where a datepicker is used. Of course, if you have your own colour palette in mind, I encourage you to use that. It should feel part of the website, but be recognisable once the interaction to show it has happened.

Deemphasise the previous and next month days

Firstly you want to select the day numbers of the previous and next months. Once those are selected make them a reasonably light colour. In this case #hex.

Bring focus to current month days

Next select the remaining days and make them a darker colour. In this case #hex. Now you should be able to see that it's clearer to work out which is from the next and previous month.

Reduce the border prominence

By doing this it will get rid of the eyesore the current borders, but importantly draw focus back to the numbers themselves.

Selecting items quickly

It can be frustrating to have to select so many items and try avoid other items. Fortunately you can select by certain properties.

First select a square, in which the days and boxes behind the days should be grouped together. Double click the group, this should isolate that area.

Then in the menu find Select > Same, then choose Fill & Stroke. The relevant items will now be selected.

Changing the fill and stroke

Change the fill to white (#ffffff) and the stroke to colour 4 (#c9d6d6). This will keep the visual separation of the area the days occupy, but not as intense.

Changing the text colour

Still in isolation mode, select one of the day numbers. Then again go to Select > Same, this time choosing Fill Color. Changing their fill to colour 2 (#1a626e).

Reduce prominence of previous and next month

Now finally here, you need to select the days of the previous month and the next. As there is a smaller amount of them I select them manually.

Once selected change their fill to colour 3 (#adc9c8). Double click the artboard to exit the isolation mode.

Where you should be

Visually separate the current month area from the dates

The next step is to work on the area above the days. Select both rectangles that are behind the text and change their fill to colour 2 (#1a626e) and their stroke to colour 1 (#0c464c).

Changing the text/arrow colour

Select each day of the week and the month, change the fill to colour 3 (#adc9c8). Then select the arrows and change their stroke to colour 3 also (#adc9c8).

There is now a nice contrast between the two areas, aside from a few more refinements, this is almost complete.

Increase arrow weight

While the arrows were put in place considering size to an extent, their weight is too thin. Increasing the weight will help make them more visible.

Select both arrows and open the stroke panel. In the menu find Window > Stroke, if you don’t have it open already.

Increase the stroke to 2px and change the cap and corner to round.

Reduce arrow size

Change your selection to only having one arrow. Then open the transform panel, in the menu find Window > Transform.

Change your reference point to the middle and make sure you constrain the proportions. After that reduce the height to 12px.

Repeat the process for the other arrow. The weight and sizing of the arrows feels much better now. The reason for this is, the wireframe has a different contrast, dark on light, rather than light on dark.

Rounding the corners

For this step it will involve applying rounded corners to the necessary corner most objects.

Open the transform panel, with your shape selected and you should see ‘Rectangle Properties’ below the usual options. Individually add 4px (or a radius you prefer) to the top left and right corners.

Sometimes when selecting an object the options won’t show, I’m not sure why this is. To get around this, you can use the direct selection tool, by pressing a. Then select an individual point at the corner you want to round.

Hover and selected states

It’s important that when interacting with a datepicker it’s clear what’s selected and what isn’t. This can be through a mix of background colours, borders, shadows, etc.

Firstly if you haven’t already ungroup the day numbers, by pressing cmd + shift + g.

Hover state

For the hover state we’re going to draw a new rounded rectangle with a fill using colour 6 (#e1f7ee). Select the rounded rectangle tool. Which you can get to by clicking and holding the rectangle tool, and a menu should pop out from the toolbar.

Next, fill using colour 6 (#e1f7ee), then drag the rectangle towards a number of choice. It should be covering the number, to stop this use cmd + [ until it goes behind the number.

Aligning to key object

Then using the technique to align from the previous post. Select both the hover and background shapes. Then open the align panel, in the menu go to Window > Align.

Open the align window, by going to the menu Window > Align. Then you need to click the icon in the top right below the double left arrows to expand the window. Once you have revealed the menu, click ‘Show Options’.

With both objects selected choose ‘Align to Key Object’, then click the background square. The blue border should get thicker, showing that the key object is selected.

Back to the align panel, align the objects by clicking both vertical and horizontal align centre.

Selected state

A good selected state should build upon the hover state, for this I’m adding a 1px stroke with colour 5 (#87d4be).

You can do this by duplicating the original square and following the same alignment process. To duplicate an object you can copy and paste in place with cmd + shift + v or selecting the object and holding alt and dragging.

That’s it

If you’re newer to Illustrator, over the course of these two posts hopefully you have learnt a good few techniques that help make designing a bit more efficient.

The purpose of this post, is to use it as an opportunity, to show use cases of the split into grid and align tools. If you have ever wondered how to align something in place in Illustrator, read on.

Feel free to download the document

This won’t be focusing on the more visual style and implementing hierarchy, in this post, next week I will cover that. If you would like to skip ahead, you can download the template.

Make a new document

The first step is to setup a new document, the size isn’t too important, but I’ve made an 800⨉800 web artboard.

Make the main rectangle

Press m or select the rectangle tool. Then click anywhere on the artboard, you will be presented with a window to add dimensions.

Make the rectangle 280⨉240, you can make this larger if you like, but the width must be able to be divided by 7 and the height divided by 6. The values must end up being whole numbers. In this case 280⨉240 each square ends up being 40⨉40.

Fill the rectangle for visibility

Your rectangle may have drawn with a black stroke by default, remove that by pressing x, this should activate selection of the stroke, then press /.

An alternate method is to double click on the fill and choose a colour, then click the fill and box with the red line through it just below.

Split into grid

This is such a powerful tool within Illustrator and is by far the quickest method. Select your rectangle then go to Object > Path > Split into Grid.

Add 6 rows and 7 columns

As the image demonstrates adding 6 rows and 7 columns allows both the width and height to be 40px.

Maintain the selection

One thing that happens when you split into grid, is the amount of similar items it creates. So you will want to press cmd + g. This makes it easier to move in the future.

Then with it still selected, add a stroke. This will add visibility for aligning text later on.

Day numbers

The basis for the view in this date picker is May, with a view into April and June. This step is quite tedious, but the technique for aligning the numbers should be helpful. At this stage the numbers don’t need to be placed accurately.

Add text layers and align centre

By pressing t or selecting the type tool, click without dragging and type each number. Once you have added a type layer, open Window > Paragraph. Click ‘Align Centre’ because if any changes to weight or font size are made this should keep them vertically centred.

Add 6 numbers of the previous month from 25 to 30, 1 to fill the final day of the first row. As the first day of the month is Sunday, this is most favourable.

Fill in the rest of the days from there with 2–31, and finally the last row will finish with the first 5 days of June. Of course you can pick any month, the day setup will likely differ.

Aligning the day numbers

To align each number we’re going to align to key object. This will take some of annoyance out of aligning so many items centrally within boxes.

Open the align window, by going to the menu Window > Align. Then you need to click the icon in the top right below the double left arrows to expand the window. Once you have revealed the menu, click ‘Show Options’.

Before you skip ahead, there is a process to doing this. Instead of individually selecting and aligning each item, if you do it by row then or column, you can drastically reduce the amount of clicking you need to do.

Aligning by row

Select a row of squares and numbers. With the items selected change align to ‘Align to Key Object’. Now click a square within the row that you have highlighted. Do this without holding shift, you may have a habit of doing that like myself.

Finally, you can ‘Vertical Align Centre’, in the align panel, repeating this process for each row.

Aligning by column

Similarly to aligning by the row select a column, change align to ‘Align to Key Object’. Click a square to make it your key object and click ‘Horizontal Align Centre’ in the align panel. Repeat the process for the remaining columns and you should have everything aligned.

Maybe you have a quicker way of doing this? I’d like to hear.

Days of the week

Press m to select the rectangle tool, and click the artboard and add a rectangle that is 280⨉24. This will offer a sufficient space for the days of the week. The height of this is debatable, I prefer to make the height smaller, as it’s not the main focus. The next post will cover the finer details on visual hierarchy.

Press t or select the type tool and add individual type layers for the days of the week. They should also be aligned centrally like the day numbers and placed very close to the right location.

Aligning the days

Now you will want to align each of the days, again the most accurate way to do this would be to align to a key object like earlier.

However, this time you will only need to select a day and one of the day number squares directly below it. After that, in the align panel, choose Align to Key Object. Then click your square to make it the key object. Finally to align the day use ‘Align Horizontal Center’.

Current month and year

Now to add another rectangle to accommodate the current month and year, select the rectangle tool, click the artboard and add a rectangle with the size 280⨉32. Position this above the days.

Press t or select the type tool and add the month and year.

Next and previous months

With a datepicker, you will need to navigate months, more often than not. So you will need some arrows, which are reasonably easy to make in Illustrator.

Making an arrow

Press \ or select the Line Segment Tool. Click on your artboard and set the length to be 12px with a 0° angle. Repeat this process, and make another line that has a 90° angle.

Choose a reference point

Now we need the correct alignment. To do this most accurately, in this particular case you need to select the bottom left reference point. To do this open the transform panel by going to Window > Transform.

Once you have selected the bottom left reference point your horizontal line should have the same x and y coordinates.

I use this method because I always find snapping points to be hit and miss. However, you can drag the lines to the correct locations and see how you go, but this technique removes any doubts.

Joining and rotating the lines

Now to make sure both of the lines are part of the same path. Using the direct selection tool (by pressing a) you can grab both points without selecting the whole path.

Drag and select the corner where both paths meet. Then right click the points that you have selected and select join.

Now that we have the basic path, it needs rotating. With the path selected, highlight near one the points, and you should see the cursor change. Hold shift, click and drag until it snaps into the position needed for an arrow.

Positioning

Position the arrow to the left side of the datepicker month. Copy the arrow and paste in place with cmd + shift + v. With the arrow still selected nudge it over a bit and rotate until it faces the opposite side. Position on the opposite side to the first arrow.

Finishing

So this is where this post finishes. There is no visual style in this post, the focus has been on the techniques for getting the elements in place. There has been a few things done in laying the groundwork for making it look better and clearer visually.

This method is no longer relevant with Illustrator CC export for screens.

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.

Previously covering ways of exporting SVG in Illustrator led me to realise, that it’s actually not readily apparent how to export at 2x or other higher density sizes. If you need to export PNG files it’s not as convenient as Photoshop’s generator functionality. This quick tip will show you how to work around the lack of generator style functionality in Illustrator.

Using export

Export is part of Adobe Illustrator CC, if you don’t have that then skip to the ’Save As’ section. To export a set of artboards at a larger size, you follow the regular path of using export.

To export press cmd + alt + e or go to file > export.

Use artboards

You will be presented with a window to choose your file name and location. Modify this as necessary, then select ’Use Artboards’.

Changing the resolution

This next step is the most important, as this is what allows us to export at a different size. The dropdown menu has a few options, in this case you want to select ‘Other’.

In the ppi field add 144. The current resolution is Screen 72 ppi, so with doubling it, this will get you the 2x size.

Things to watch out for

If you have any images, if they are at their maximum size in the file they will be scaled up. So their quality may appear poorer in the 2x version. The way to get round this is to make sure the images are large enough and resize them down.

That‘s everything, an easy to overlook part of the process of exporting in Illustrator.