Icon fonts and Sketch. A single source of truth.

Much has been made of utilising icon fonts. I don’t want to go into too much depth of whether they are appropriate, or better than SVG in this article. Instead I would like to share a way for designers to use icon fonts to improve their workflow. First an overview around implementation.

Trust your developers

I really don’t care if icon fonts are used to deliver icons. You can use SVG, or PNG. It doesn’t matter to me as long as this criteria is hit:
– The performance is optimal
– It looks good everywhere
– It doesn’t impact negatively on people with different needs, such as those using assistive technology (A11Y Y’all).

It’s an implementation detail

As such, it falls to engineering the determine the most appropriate solution. If, however, engineering are already using icon fonts, or you are working on white label solutions this article might be helpful, and provide you with some workflow tips.

Be a D.R.Y. aul yolk

D.R.Y. is a acronym used by engineers. It means don’t repeat yourself. I want to make a case for designers to think more like engineers for a change. Don’t worry, no coding is required. This principle boils down to reusing code, instead of rewriting it. It’s pretty fundamental. Write a piece of code once, put it into a function, and call the function wherever you need it.

Say no to manual labour

Thanks to Sketch, much of the manual processes required to produce screens has been eliminated. Nowadays, the dull UI production of screens is a distant, yet vividly horrible, memory. Symbols and styles reduce monkey work tremendously, and allow for automation to take place. Don’t. Repeat. Yourself.

Some context to the bad old days

In the rare auld times, you would have to manually design and maintain each screen. It was an art of pressing Cmd+C followed by Cmd+V. Doing that today is not just inefficient–It is also very boring, and leaves you open to making mistakes.

If a component appears on more than one screen it deserves to be a symbol. If a component appears just two times (unsymbolised?), you double the risk that your design will be out of sync. You need to update both components if there is a change. This risk increases and multiplies with each instance in the design. Remember: Don’t repeat yourself.

What is good about icon fonts

Icon fonts hold all of your icons in a single font file. This means that you have a better chance of achieving consistency. Done correctly, you will have a single source of truth for icons that both design and engineering can reference. I’ll try to communicate a few ways that this can be valuable.

Be consistent, and avoid death by duplication

Often in products you see a variety of idioms used in the design. There can be multiple different icons in place that do the same job. This means that people need to first discover that two icons represent the same thing, and store this information in memory. Then they have to recall this quirk each time they return to the interface. This is stupid, needless, and makes the product just a little bit more complex.

You may argue that this is not that big a deal. You’re actually (sort of) right. In isolation it is not. But, think of it as a small snowball rolling down a hill. It’s accumulating little issues along the way, increasing not only in size, but in velocity. By the time it becomes a big deal, it is too late. You might even have a metaphor, before you are crushed by an avalanche of little inconsistencies.

Here’s a good post about applying recognition over recall by our friends at NNGroup, and understanding the principles of cognitive load and cognitive barriers.

An example of “The Frankenstein effect”

Let’s take Facebook as an example. In the mobile app notifications is represented as a bell icon. If you visit their mobile website it uses a globe icon for notifications.

screenshot showing Facebook navigation bar on android and the web with the notification icon highlighted
Screenshot of the Facebook navigation bar as it appears on the native android app, with another screenshot showing how it appears on the mobile site below.

How did this happen?

Honestly, there’s probably a decent reason. I don’t know, and it would be easy to criticise. The globe icon is a likely just a leftover legacy from the web that works for the audience who use the website. It’s design debt that doesn’t probably cost too much to them (people are addicted to Facebook, and probably don’t think much about what goes where).

It’s safe to assume Facebook has a bunch of different design teams. The web team, and the app teams. Also, I do realise the mobile website for Facebook is (probably) a keep the lights on initiative, with most of the website use being done on a laptop. Facebooks primary focus is mobile, but it’s (a bit) interesting that the experience is out of sync between the app and the web version.

“The Frankenstein effect” is not a real term as far as I am aware, but one I feel describes the issue appropriately.

Nerdy game time

I personally like my tabs to be labeled. Obvious always wins as Luke Wroblewski would say. Coincidently, he has been collecting data on the navigation versions Facebook A/B test. At the time of this post it was up to 56 variants. You can view the documented versions here.

A quick fun exercise is to ask people to open an app they use all the time with icon only navigation (such as the Facebook app).Then, get them to tell you what the tabs mean before they navigate.

This can yield some interesting results. Efficiency is often impacted, when clean design gets priority over clarity. Wayfinding requires thinking. You can see the cognitive cogs turning in people when faced with this challenge. Put labels on the tabs and try this test. People will look at you as though you are insulting their intelligence.

In conclusion to this detour, unless your app is going to be used as much as Facebook and Twitter, you might want to consider labels. It’s just a kind thing to do. Form should not lead function–at least, this is what I tell myself when I look at this ugly site.

Get to the point. You promised me workflow tips

So now that I have rabbited on about some of the benefits of icon fonts, I’d like to share a way of using icon fonts within Sketch in a smart way that embraces D.R.Y. The main technique comes from this post on Medium (go and share some claps, or whatever Medium do now to show appreciation).

In this article Peter takes you through a step by step technique for using icon fonts in Sketch. It’s really efficient. I won’t repeat this, but I will add one thing to it. In the article, he mentions copying and pasting icons from font-book into Sketch. This is kind of weak as a process & something that would be a hard sell to the designers.

However, he goes on to show that you can reference the icons and call them by a friendly name. He points out that Googles material design icon font does this, and it is way better, and a much easier sell.

I wanted to understand how this was done, so I downloaded the material icons and did some investigating. This took a little time, as I was trying to uncover where the voodoo was happening. It took me a while to realise that the article was wrong in it’s assessment on the situation. The icons had not been named at all. Instead the folks at Google had utilised ligatures.

The magic of Ligatures

In typography, a ligature occurs where two letters are joined as a single glyph. Here’s some code to show how it works:

sub m e n u by uniE961;

Essentially this script says that when the letters that make up the word menu are written, you want to substitute it for the glyph(icon) with a unicode of uniE961.

This is a pretty clever solution, and might have good benefits towards improving a11y. It won’t be an easy way of working if you have to write a piece of script for every icon. I knew the designers would (probably) be even less happy with this approach then copy and pasting from font book. I almost gave up…

Hello icomoon

Icomoon is a free service for creating icon fonts. It, rather usefully, has the capability to add ligatures to your icons in a way that doesn’t require scripting. It is also conveniently the tool that design team was creating their icon fonts with. This was a big win. It meant I didn’t need to introduce any new tools to the team. It simply added to the process that was already in place.

Show. Don’t tell

I’m a big fan of showing rather than telling (although this might not be so obvious with the textual nature of my site). Here’s a video I made with loom, showing how to go about creating your own icon font using friendly ligatures using icomoon and Sketch. I’ll upload a narrated version during the week. I’m too self conscious to talk to myself (what if I like it to much), so if anyone wants a remote walkthrough I can provide it!

Note: Loom is great by the way, and free to use (yeah this is a referral link).

Potential Benefits of using icon fonts this way

  1. Single source of truth: Engineers and designers are using the same file.
  2. Control in the designers hands (they need to reinstall new font releases)
  3. Whitelabel rebranding potential. If you establish a naming convention, you simply need to change the font the icon is pointing at, and don’t spend hours swapping individual icons.
  4. It’s much faster, and reduces production work. Who has times to resize and slice each icon in sketch at 25pts and 24dpi for iOS & android

Tip: If you are using something like Zeplin for redlines, it might makes sense that the ligature you use matches the CSS modifier. This way they would be able to just copy the content from Zeplin with a click. For example:

span class="icon [modifier class]"

Who’s job is it anyway?

Really, it is the designers responsibility (if they exist) to step up, and ensure that there are at some guiding principles in place. If not a full design system, then at least a set of icons, and components, that consider the future of the product. Go beyond addressing just the immediate need.

In conclusion

Some caveats to this approach. It has not been tested to scale, and there are likely potential issues that I haven’t seen. I don’t know what the release of Sketch Libraries means, as I have yet to dive in to it. I just think that we should be a little bit more clever about how we do the production work.

And remember:
Don’t.
Repeat.
Yourself.

Download a Sketch file to play with, and an icon font here.

Learn UX for free! 4 complex steps towards interaction design

Ok. I’ll admit it. That is a pretty clickbaity title. I kinda wanted to lower your expectations in advance. Curb your enthusiasm if you will. I promise that I will not tell you how to apply design thinking, or UX to your life. My hope is that this will serve as a decent starting point for you to learn UX.

Why should you care?

Well. For one, there has been a UX boom in recent years, with organisations investing heavily in design. Currently there are not enough people to fill the roles that exist. Supply is not meeting demand, so more people need to get trained.

For another, better reason, it is an incredibly interesting job to have, and you never stop learning how to do it.

Short term solutions

Many organisations and companies offer short term UX courses. A friend of mine, who wants to learn UX, asked me recently if these courses were worth paying for. Personally, I think that they are, but full disclosure; I’ve previously taught one of these evening courses, so your BIAS alarm should be sounding.

Two days isn’t enough time to learn UX. These courses can set you on the path, and give you an overview of the tools and methods, but you shouldn’t expect them to turn you into a rockstar designer (whatever that is). Also, the prices are quite high, especially if you are just starting out. Enough to be prohibitively expensive if you are a student. Which got me to thinking…

Wouldn’t it be nice to remove the financial barrier?

To answer my friends question, I suggested a couple of more cost effective ways to start off. This way, if he decided that user experience design isn’t a good fit for him, he would at least have found out before spending a big sum of money.

I decided to set the criteria out so the only cost my friend would need to invest was time. I mean, what else is free time for? I’m sharing this here, in the hope that the advice could be useful for others who want to learn UX.

Some context

If you were to ask my wife what I do, she would say something to do with computers, and apps. This is probably my failing as a communicator, but user experience design is quite broad, and can be hard to define. Here’s the wikipedia definition.

I prefer the Cooper approved term interaction designer. I find it to be the most descriptive and useful when describing what I do to someone outside of the tech world. User experience designer is currently the most common title, although product designer is now in vogue. The lack of consensus is frustrating. Here is some insight to the terms used from the always excellent UX Switch. Handily, they have already covered what it means to be a UX designer, so I can defer to them and move on.

Where UX people come from

The path to becoming an interaction designer is, surprise surprise, not rigidly defined. Lots of people who work in UX studied different things at college. I came to UX after starting out my career as frontend designer. What you studied in college actually doesn’t actually matter as much as you may think. For example, Bill Buxton, the author of Sketching User Experiences, and a pioneer in the field of Human Computer Interaction originally studied music at college.

What matters if you want to become an interaction designer?

You need to be interested in understanding people, and exploring what motivates them to do the (crazy) things they do. You also need a healthy interest in technology. Which is not to say you need to know how to code, because you do not. Arguably, it could actually set you back. You ought to be interested in shaping how things should be, and making products or services work better for the people who use em.

Step 1: Start with the soft skills. Read the books

This is counter to how we are typically taught, but soft skills are the hardest to acquire. They take the most time, and lend the most value if you want a career in UX. I personally believe that reading books gives you a huge advantage. So much of this job is how you interact with people. Reading helps you to better formulate your thoughts, and communicate your ideas. There are a tonne of UX books lists on the internet. I won’t overwhelm you with recommendations. Instead I’ll pick a handful I consider to be good jumping off points.

Right now you might be thinking; I’m pretty sure books cost money

Well, yes. They do. But in keeping with my promise of free learning, here’s a tip:
Join your local library.

For those of you in Ireland, here’s something you might not be aware of; all of the libraries here are connected. This means you can request any book from the catalogue, and get it shipped to your local library for free. As an added bonus, the deadline is built in when you take a loan of a book.

Getting your books from the library means that you have a deadline of about a month to read and return the book. To make things even easier, for Irish readers, I’ve included library links for the books listed here.

The Design of Every Day Things, by Don Norman

A brilliant book, and a great place to start. It’s written in an easy conversational tone, and will change the way that you look at the world. You will learn to spot poor design in everyday things. This book makes a case for design better, and in more elegant terms, than I ever could. Read this first!
Get it from the Library, or buy it from Amazon quite cheaply.

Thinking Fast and Slow by Daniel Kahneman

This book will help you understand how little you understand people, and give you insight into human behaviour that might seem at odds. Breaks the thinking process into two systems. A fast system which is automatic, and a slow one which is deliberate and considered. No prizes for guessing which one we rely on most. It is well worth reading to get up on the concepts of cognitive biases alone.
Library link here.

The Essential Principles of Graphic Design by Debbie Millman

I’m including this on principle. It’s a graphic design handbook. Graphic Design is a very important part of UX. As a field I feel it has been marginalised as making shit look pretty. Graphic Design is the art of communicating visually, and it deserves much more respect. Typography is an incredibly hard craft, and like interaction design, it stands out most when it is done poorly. Library link to the wonderful Debbie Millman book, with an added link to this classic by
Adrian Shaughnessy.

About Face by Alan Cooper & Designing for the Digital Age by Kim Goodwin

Both classics, and go to books for anyone who makes lists about learning UX. They are only available as reference books in Irish libraries. You can usually get the 3rd edition of About Face very cheaply off Amazon, and it is still very relevant. It doesn’t cover the whole mobile thing but hey.

Just enough research by Erika Hall

UX research does not follow the scientific method. UX research is primarily qualitative. This book is the perfect primer, and includes a step by step guide to doing just enough research. It goes from conducting interviews, through to the correct way to do a usability test. It is compact, but mighty. Get it here. The book apart series is worth reading too. Here’s a video of one of the authors from the series talking – Consider it a treat for reading this far.

I get it! Enough with the books

I would happily go on, but in the interest of brevity I’ll conclude with one small suggestion. Don’t just read design specific books. To do so is to limit yourself, and leaves you with a narrow view of things. In the words of John Maeda;

“I was once advised by my teacher to become a light bulb instead of a laser beam, at an age and a time in my career when I was all focus. His point was that you can either brighten a single point with laser precision, or else use the same light to illuminate everything around you.”

Extract taken from his book, The laws of simplicity– also available from the library when I return it tomorrow.

Step 2: Practice what you learn

There are courses you can take online for free. A lot of courses and opportunities to learn UX.

EdX offers a series courses, called a micro masters, where you learn UX. You can enroll and complete the course without paying anything. Once you complete it you can pay for accreditation, but this is optional (although you might want that bit of proof).

Coursera also offer free courses in UX. Udacity do a free 2 month product design course by Google.

Want to learn Human-Centered Design. Here’s another free course from the people at IDEO that you ca do with a group. The point is, you have options for self directed study.

Step 3: Get familiar with the tools

This is actually the easiest part to learn. It is what people usually do first. It also (kinda) messes the learn UX free ideal that I set out with. Arguably, you don’t actually need to learn these tools. Assuming you are go into a pure UX role, and say, for example you are focused on solely conducting research. Then, you could get away with a couple of pens and paper, a whiteboard, and your big juicy brain.

This hasn’t really been my experience. Maybe yours has been different. Please let me know in the comments below.

(Most) places in Ireland would expect you to know how to use tools like the ones below, and to have experience creating wireframes, and put together visual comps to a certain fidelity. That said, this has been changing over the last few years, with more specialist UX roles getting listed every day in Ireland.

Designing screens

At the time of writing the industry standard tool for screen designers is Sketch. Previously, Photoshop or Illustrator served this purpose. Those tools are inappropriate, and inefficient these days. (In my humble opinion) you need to be a a bit of a masochist to use them for interaction design – Photoshop is a definite case of designing for the elastic user – as you will learn about this when you get to know what a persona is :). You can learn the fundamentals of Sketch at Treehouse.

Sketch is however, a Mac only tool and is likely to remain that way for the foreseeable future. Alternatives are available for our friends who use Windows such as Adobe XD, Figma, and so on.

Building interactivity

There are a tonne of prototyping tools. I use InVision. InVision is easy to use, with a low learning curve. It offers some free remote unmoderated usability testing. You kind get what you pay for, but it can be somewhat insightful, and it is exciting to see strangers using something you designed for the first time. InVision plays very nicely with Sketch – with their Craft plugin giving you the ability to prototype directly within Sketch itself. You can see a comparison of prototyping tools over at Cooper.

Step 4: Get to know people working in the field

In conclusion, I’d suggest that this is one of the most helpful things you do when you start. There are a lot of free meetups for design groups, with events on each month. These tend to be well attended, and full of kind, interesting friendly people (not to mention some free food and beer). I got my start on the back of talking to someone at a defuse event, which led me my first job in design, and introduced me to UX (thanks again Seamus).

Some Dublin events cherrypicked from memory:

Please suggest more if you have em, and I will happily add them!

Parting thoughts

This article is long enough, but here are a couple of additional tips and pieces of advice that I have been given, or picked up over time, that have been helpful to me.

Work with people better than you

Seek out smart people and don’t be afraid of asking questions or looking stupid. People are usually very nice. They like to impart their knowledge. It makes em feel warm and fuzzy. You do not want to work in a place where you are the sole designer, or the authority.

Think critically

Don’t accept everything at face value. Google and Apple do stupid things too. People sometimes become attached to the guidelines Apple, or Google put out, and guess what… Apple and Google go and change them.

I remember a particular time working on a product, that the product team made a case for bottom tabs on an Android app. We were told that Android users wouldn’t understand, or like them because they didn’t exist in the Material design guidelines. The thinking was that it would reduce the strain placed on people trying to reach for the top of the screen. In spite of evidence to the contrary, we lost that battle. A couple of months later, bottom tabs were added to Material design under the (slightly dirty sounding) name bottom navigation.

The point is, that these companies do not own innovation. A guideline has it’s place for sure, but it should not be an ideology.

If something is dumb, don’t do it.

Learn to take criticism

You will get critiques that you don’t like. This will hurt. Sometimes it may not seem fair. Occasionally it might not be fair. As a general rule, feedback should always be directed at the work and not the individual. That said, getting no feedback is more damaging than getting good feedback delivered poorly.

Don’t measure yourself against the internet

You are only competing with yourself, and shouldn’t compare yourself against the world when starting out. However, do try to reflect on the work you have done. Look back over time and track your progress. You’ll be surprised, and maybe a little embarrassed by early work, but you learn as you progress.

Ship it

Learn to work to a deadline, and try to stay out of the weeds. Shipping the thing is essential. I launched this site using the bog standard WordPress theme, in the interest of writing and posting my unedited thoughts.

This was done to light a fire under myself. I knew that if it was out in public, I’d be motivated to actually tend to it. I mean, the site has no real traffic, but I wouldn’t have been able to live with the vanilla WordPress 2017 theme.

Within a week, I put together this very basic theme you are looking at. It’s not done, but it never will be. This is the point!

Setting S.M.A.R.T. reading goals

I used to love to read as a kid. I think that is true for lots of people, but then, kids books are brilliant (I will happily continue to read anything that Phillip Pullman puts out regardless of how far I am from his target audience age). At some point though, I discovered computers, movies, tv boxsets, music, and all those other things that vie for your attention. I was still reading a few books a year, but I got to a point where most my reading was online blogs, articles, and social media. Books had gone by the wayside.

Near the end of 2015, I made a decision to get back into reading. I set a simple goal of reading one book per month. This fulfilled the S.M.A.R.T. criteria for setting goals.

S.M.A.R.T. goals go further than setting vague new years resolutions, and can be defined as Specific, Measurable, Achievable, Relevant, and timely–I have seen alternative labels used but you get the gist.

Anyway, broken down my goal looked a little like this:

Specific

I wanted to become a reader again. A person that reads books. It didn’t initially matter to me which books I read at first, although this definitely changed later.

Measurable

I joined Goodreads as a way to keep track of my progress by taking part in their reading challenge.

Achievable

I figured a book per month would be relatively straight forward to aim for.

Relevant

Part of my job involves understanding how people think. Books are medium of human expression that deserve our attention.

Timely

I set this goal in January of 2016. This gave me a year to complete 12 books.

Screenshot of GoodReads interface tracking progress related to yearly goal
Handily, Goodreads also tells you if you are hitting your reading target for the year. This is a nice touch, and a good use of a dynamic progress indicator that gives just enough information at just the right time.

Starting out

Initially, I struggled with my concentration. I found it difficult to develop this damned reading thing into a habit. I got distracted by my phone often. Bleeping notifications and flashing lights open up a rabbit hole for you to fall into. I’ve grown to view notifications as the dopamine releasing, attention sucking, anti patterns they are (for the most part).

I just want to check this one thing…

…is the worst lie you can tell yourself. On top of which it is rude to the people around you to be only providing them with half your attention. You don’t need to check anything, everything has been checked. Just ask David O’Doherty. He has beefs.

Progress

Over time, I settled into reading, and built upon these goals. By tracking my efforts with Goodreads, I noticed a pattern emerge that I might not have spotted otherwise. I was reading the same kinds of books, by authors I know. This selective bias was unconscious. I decided to make an effort to get out of my comfortable reading areas. I wanted to broaden the kinds books I was reading to include more non fiction, and books written by women.

Approach

I built up a library of books by authors I didn’t know. I visited charity shops to pick up stuff that looked interesting, and spent time online looking at lists. This would usually mean I would pick up several books at a time. The constantly growing bookshelves served as a visual presence in my house, and served to motivate me to take time to read more.

As great as the internet is

There are an endless amount of books with more detailed information, and human feeling that probably deserve your time more. Books have the benefit of an editor, and need to be of a certain quality to even get published. The internet is open to everyone. Great as this is, it means much of what is written doesn’t often go into much depth. Poorly written meandering shit (like the unfettered dreck that you are reading now) goes through unchecked. It isn’t, and probably shouldn’t be, policed by anyone.