A selection of fresh new foundries worth adding to your list!

Letterform lovers, rejoice! It’s only November, and this year has already seen the apparition of several new foundries created by incredibly talented type designers from all around the world.

While we already covered their respective launch in our newsletter, Fresh Fonts, we wanted to share with you the list of our favourite foundries founded in 2018. All of them are making high-quality, unique typefaces that will definitely add character to your print and web projects. Make your designer friends jealous and your clients happy — give these a try!

Before you read any further, make sure to have a look at Fresh Fonts, our newsletter sharing handpicked new font releases and high-quality free fonts.
👉🏽 More info & sign up

🇫🇷 General Type Studio

General Type is the impressive new foundry of Stéphane Elbaz, a French designer gone New York City, whose work you might have already seen on Typofonderie (or in case you’ve read it recently, on the French Constitution, as it is now set in Stéphane’s PS Fournier). On the foundry’s website, three of his most recent typefaces are available to try and buy: Pilat, Cambon and Mier.

View the typefaces of General Type →

🇺🇸 Etcetera Type Co.

New York-based designer Tyler Finck just launched his very own foundry last week, after self-releasing dozens of fonts and various commissioned type designs over the past six years. On his new website, you’ll discover Anybody, a brand new, massive family of 72 fonts spanning four different widths, and the latest version of Grandstander. Both of them are available as variable fonts.

View the typefaces of Etcetera Type →

🇨🇿 Florian Karsten

Based out of Brno in Czech Republic, Florian Karsten launched his own independent foundry, on which you’ll find the FK Grotesk family, freshly released after four years in the making. The typeface also comes with an additional monospace style, and a display family, making it suitable for a wide range of uses. Furthermore, I invite you to have a look at Space Grotesk, his free, pretty sleek open source sans serif.

View the typefaces of Florian Karsten →

🇩🇪 Forgotten Shapes

Based in Leipzig, Germany, Forgotten Shapes publishes digital reconstructions of lost and forgotten typefaces. The foundry is also committed to reviving these typefaces in a form as faithful to the original as possible, despite the amount of research involved. You can currently find three typefaces on the foundry’s website, whose designs all originate between 1821–1967.

View the typefaces of Forgotten Shapes →

🇵🇹 Nova Type Foundry

Launched at the beginning of the year, Nova Type is the foundry of the very talented Portuguese designer Joana Correia. On her foundry, you’ll find her most recent work, including Laca, a semi-sans serif inspired by retro Portuguese soap packagings, Artigo, a fantastic old style inspired text typeface, and Artigo Display, its TDC award-winning companion.

View the typefaces of Nova Type →

🇬🇧 Frostype

Frostype is the new independent type practice of Studio H, or Harrison Marshall pour les intimes. Named after Colin Frost, who was a letterpress compositor in the 1960s, the young foundry already published two retail typefaces: Polar, a geometric sans family with “neutral and expressive characters for dynamic contrast”, and Switch, its own take on the grotesque genre.

View the typefaces of Frostype →

✌️ Frostype is cooking up new typefaces, including monospaced Modular. Don’t miss its release, sign up here to get it in your inbox.

🇫🇷 Pizza Typefaces

Pizza Typefaces is the love child of Paris-based art directors Adrien Midzic and Luc Borho. On the website of their new foundry, four typefaces are available, including Metal, a variable font boasting nine different widths. They guys are also raising funds on Kickstarter to publish Orelo, a delightful superfamily of 120 styles ranging from Condensed Hairline to Wide Heavy, with their italics and a special Text version. All of them available as variable fonts, of course.

View the typefaces of Pizza Type →

🇪🇸 Bruta Types

Bruta Types is the new foundry of Barcelona-based designer Estela Ibarz, and the second female-founded foundry in this list! Her first release, Trash, is a typeface with extreme stroke contrast and a great deal of personality. On the website of her new foundry, you can also have a glimpse at her two upcoming unreleased typefaces, Ockham and Monor.

View the typefaces of Bruta Types →

👉🏽 Don’t miss the upcoming releases of Bruta Types by signing up for our carefully curated newsletter.

🇫🇷 Extrabrut Shop

Bureau Brut created extrabrut.shop, a platform on which the French design studio shares (and sells) its typographical creations. Okay, I’m cheating a little bit — Extrabrut Shop was actually launched at the end of 2017, but still, I couldn’t resist adding it to this list. Five typefaces are currently available to try and buy on their website, including Bourrasque, the studio’s latest release.

View the typefaces of Extrabrut Shop →

🇺🇸 Narrators Studio

Launched in March, Narrators is the side hustle of Josh Warner, a product designer based in Redding, California. At the moment, his catalogue includes three display typefaces: Ultra, an expanded geometric font, Gothic, a sharp font that can be combined with an outline or cutout version to give it ‘a neon glow vibe’ and Carta, an ultra-thin serif perfect to evoke feelings of elegance.

View the typefaces of Narrators →

🇮🇳 Archetype Foundry

Fresh work from India, Archetype is the new foundry of Bangalore-based designer Sujan Sundareswaran. His first release, Dita Grotesk, is a monospace font available in two weights, and perfect for use in programming and small body text. What’s even more impressive is that he designed the typeface and launched the foundry in under three weeks. Read the full story.

View the typefaces of Archetype →

🇦🇺 Foster Type

Foster Type is the new foundry of Dave Foster, an independent designer based in Sydney. His first retail release, Blanco, is a serif designed for comfortable, extended reading at smaller text sizes. Interestingly, the typeface was named after fellow type designer Noe Blanco, as it was inspired by a brief that she gave him while he was studying at TypeMedia.

View the typefaces of Foster Type →

🇩🇪 Kilotype

Kilotype was founded by Sebastian Losch and William Montrose, two designers who graduated from the MA Typeface Design at University of Reading. At the moment, the foundry counts two typefaces in its library: Frequenz, a typeface with a nonconformist rhythm inspired by sound waves, and Sequenz, another sans featuring even more accentuated letterforms.

View the typefaces of Kilotype →

Thanks for reading! 👋🏽

Fresh Fonts is a newsletter dedicated to promoting the work of independent designers and small foundries. We send an email twice a month with new releases, discount codes and high-quality free fonts. Sign up here to get the upcoming releases of these foundries in your inbox.

newsletter.freshfonts.io
@freshfonts

🏆 The Best New Type Foundries of 2018 was originally published in Fresh Fonts on Medium, where people are continuing the conversation by highlighting and responding to this story.

Update: After publishing this article, Tumblr reached out to me with an opportunity to work with them, and I’m happy to say that I’m now a part of their Product Design team.

The Challenge

A few months ago I confronted every belief telling me it was too late to start a career in product design and started taking steps to make it happen. It was a field I’d been fascinated by for a long time, and I didn’t want it to remain something I told myself I’d someday learn.

The problem was — how? I didn’t have the necessary background or skills, nor did I have the financial means to enroll in a bootcamp or take courses that would help me get them.

Soon enough I realized the only circumstance holding me back from having a career I dreamed of was me believing it was too late. All that I had to do was commit to going after it.

So, I did. I searched high and low for every free resource I could find and soaked up as much information as possible. I woke up early and stayed up late countless nights in a row practicing, messing up, and learning from all of it.

I knew I’d learn most through practice, so I challenged myself to redesign a platform near and dear to my heart: Tumblr.

A bit of background

I remember signing up for Tumblr when I still had braces. It’s connected me to some of the most interesting people I know and helped me navigate problems I thought no one else had.

But over the years it’s had problems of its own. I’ve watched it struggle to compete and stay relevant in today’s fast-changing social media industry. I didn’t want to remain a passive observer and watch it tumble (pun intended) from the sidelines anymore. So, I took a hands-on approach in figuring out what UX/UI solutions I could think of to remedy some of its problems.

Before diving into the study, I want to express my admiration for what Tumblr designers have already done with the iOS app. And nope, I’m not just saying that for the sake of this article. I understand there are reasons to decisions they’ve made based on data and research I don’t have access to. This study is based strictly on my own research and resources, and for that reason isn’t fully comprehensive.

Business goals vs. and user goals

To avoid an unsolicited redesign, I made sure there was a real user need for whatever I proposed and that it solved a problem. I started by understanding Tumblr’s business and user goals, then worked toward solutions that would connect them.

First things first, what is Tumblr?

“A place to express yourself, discover yourself, and bond over the stuff you love … where your interests connect you with your people.” — Tumblr’s mission statement (Feb 2018)

A part of my research involved understanding what made Tumblr successful, what it stood for, and what it was doing for users today.

Its founder, David Karp, built it from the ground-up with the goal of lowering the barrier to blogging. It was his baby. I believe the groundwork he laid down for it has been a large part of Tumblr’s success, and I wanted to create something that respected his vision.

He designed Tumblr to not have many of the features thought of as necessary for social media. Showing follower count on a user’s profile, and other numerical markers of popularity, was one example. He believed it poisoned a community having it built around numbers. And he feared it becoming metric and optimization-driven like “every [other] big tech company.”

Business goals

1. Make revenue

Karp never intended to run Tumblr like a business. He felt monetizing it would compromise its authenticity as a platform for creatives. But he needed to make it work if Tumblr were to stay up and running, so he sold it to YAHOO! in 2013.

YAHOO! rolled out several ad products and merged its sales team with Tumblr’s, but it repeatedly missed sales goals. Both had very different audiences from each other with YAHOO!’s being much older and Tumblr’s being much younger. This made it difficult to work together, since both teams were going after different types of advertisers.

Tumblr struggled to move from being a small, independent company to being run by a large one. And it’s still trying to find that balance. Today it’s run by Verizon after they bought YAHOO! in 2017, and Karp has since resigned.

2. Grow user base

Tumblr’s struggling to grow its user base at the same rate as its competitors. It has almost four million blogs today, but growth has been down for the past four years and it’s predicted to keep going down for the next two years.

3. Increase engagement

Tumblr doesn’t have as many active users as its competitors, but its users are pretty engaged. They spend more time on it per month than Instagram users and their session lengths beat Instagram and Facebook.

This is where staying relevant is a problem, because its competitors are constantly introducing new ways to keep their audience engaged.

User goals

I conducted 72 interviews with randomly selected Tumblr users by survey and chat. Since most of them wanted to remain anonymous, I omitted their usernames from public view. The most common goals that came up were:

User demographics

Tumblr has the youngest user base of its competitors with the average user being around 18–24 years old. There’s an equal amount of male and female users, which is also unlike its competitors.

67 percent of interviewees said they’d been on Tumblr for more than five years. When asked what kept them on Tumblr, the most common answer was they could be themselves without judgement from others. They didn’t feel pressured living up to a certain image, because the community was accepting of differences. Some even opened up about Tumblr being the first place they felt safe exploring issues they felt completely alone in, like sexuality and mental health.

I didn’t realize how meaningful Tumblr was to a lot of users. It was more than a space to pass time looking at memes or aesthetically pleasing photos. For many it was somewhere they could genuinely connect with others like them, figure themselves out, and navigate personal issues.

User persona

I built the following user persona around the responses I received in my interviews and kept it at the center of my design:

Research

Users struggled with the iOS app

• 54% used the iOS app more
• 32% used desktop more
• 13% used both equally

…but don’t let the numbers fool ya! Even though over half used the iOS app more, it wasn’t because they found it easier or more enjoyable. Their on-the-go lifestyles didn’t give them much of a choice.

“[I use the] iOS app more because it’s just more practical to my lifestyle, but I prefer the desktop version because it’s easier to navigate.”

Those who used both equally felt some features were easier on one over the other. And they split their time between them depending on what they needed to do.

While desktop users deliberately avoided using the iOS app. They complained it was very inconvenient, time consuming, and difficult to navigate.

Here’s a quick analysis of Tumblr’s homepage

Problem #1: Tumblr’s interface went against user instinct

98 percent of users said when browsing their feed, they focused immediately on a post’s content, not who posted it.

You may be thinking, “Well, that makes sense. Tumblr’s made up almost entirely of large, colorful photos. How could it not grab their attention first?” But that’s not enough to explain it. The same percentage of users said who posted it was just less important to them than the content itself. And in most cases, they ignored who posted it altogether.

Solution #1: Content first, information second

Let’s cover the basics of my redesign. I changed the general layout of posts by putting the content at the beginning, so it’d be what users saw first when going down their feed.

After that I put user information. This included who posted it to their feed, who they reblogged it from, and who the original source was. I organized it all together, so users wouldn’t have to scan the post from one spot to another.

But it was still problematic that users were ignoring each other. So, I added the feature of swiping left to see a user’s eight most recent posts in grid form.

This would make it easier for users to find more of what they’re looking for, since a blog they like a post from is likely to have more of the same content. They’re also getting to know another user and their blog without having to even leave their feed. If a blog has content they like, they’re likely to remember it and the user behind it.

But it’s not only useful for getting to know new blogs or finding new content. One of the biggest reasons users gave for staying on Tumblr was interacting with and checking in with close friends they made on it. With this feature they could see how their friends are doing by checking on their recent posts.

Here’s an example of a friend who’s recent posts suggest you may want to reach out to them:

Another problem area was Tumblr’s way of recommending new blogs to follow. Every nth post, a handful of recommended blogs showed up based on a user’s like history. But the algorithm wasn’t the problem. A blog’s avatar, banner, and bio took up over half of the given space, while a preview of the actual blog only took up a fraction.

This didn’t make any sense. Since Tumblr is one of the only platforms that lets users customize their profiles, was this to let them express their creativity or personas more? Or was it to encourage them to pay less attention to content and more attention to each other?

In any case, the window of opportunity to convince users to follow blogs they didn’t know was narrow. And based on my interviews, they were going to base their decision on content and not avatars, bios, or banners.

So in my redesign, I made the blog’s content the star of the show. I displayed the most recent posts in a grid to give a better overview of what the blog was about. This would better guide the user’s decision to follow or not.

I also gamified the experience to encourage users to not only spend more time doing it but to have fun with it. They could swipe right to follow or left to see another blog. This would be a more effective way of getting users to connect with each other, because what their blogs contain is more representative of their interests than what their bios say. Especially since a majority of users don’t have anything in their bios at all.

It’s a win/win. Users find more blogs they like and people they’re likely to connect with. They’re spending more time browsing and chatting. And they’re increasing Tumblr’s engagement rates doing it.

Problem #2: Queuing posts

Before this study, I had no idea how important queuing posts was to users. I thought a dedicated few just set aside several hours to churn out content around the clock. But, let’s face it…

Queuing let users schedule their posts ahead of time, which took some of the pressure off managing a blog. After finding out more than half depended on it to keep their blogs active, I had to make it a priority. Active blogs helped engagement rates, and letting users keep their blogs active on-the-go would switch more from desktop to mobile.

But queueing was the most complained-about feature in my interviews. Users complained there were too many steps involved, and some of even resorted to third-party apps to get the job done. That so many were going out of their way to make the app work for them, and even compensating for what it lacked with another app, was a huge red flag to me.

So, the first thing I did was take apart the process. I wanted to understand how every part of it made up an experience that frustrated users.

UX designer Steven Hoober said 49% of mobile users hold their phones with one hand, and 75% of mobile interactions are thumb-driven. He called this the “thumb zone” principle. In the current design, all but the first step are in the red-zone. Can you imagine doing this on a crowded bus where you had little to no wiggle room for every post you wanted to queue? This was an actual scenario a user gave.

Solution #2: Manage your blog on-the-go

The first thing I did was unhide the feature and get rid of all the unnecessary steps. Now all you had to do was press and drag to get the job done.

You might have noticed I switched the commenting feature out for a queueing one. Tapping on a post’s notes also led to its comments, and it didn’t make sense having two buttons doing the same thing on the same page. So instead I added the option to swipe right to view or leave comments. Users would still be able to access comments when viewing a post’s notes, but this way conserved space and felt less redundant.

Problem #3: Users weren’t seeing what they wanted

A part of my research involved going through reviews of the current version in the app store. I wanted to understand what users were having the most trouble with.

Aside from queueing, the biggest complaint was users not getting the content they wanted. They complained of scrolling their feed to no avail in search for something they liked. It wasn’t a matter of following the wrong people — rather, what they looked for differed per session.

This made sense. Finding and sharing enjoyable content was the first user goal I mentioned earlier in this article. And if users weren’t getting the content they wanted, there was little to no reason for them to continue using the app.

Solution #3: Filter and grid view

So having the option to filter through content in a user’s feed was something I had to make a priority. Since over 70 percent of content on Tumblr are image-based, I added the option to view the feed in a grid for a better overview of content. It would let users browse their feed without feeling like it was a chore.

Although it’s not demonstrated in my other mockups, I kept the filter and chat features docked while a user browsed their feed. This would keep them up to date with any new messages they received. And it gave them control over filtering their feed again if they wanted.

Problem #5: Activity and messages grouped together

The activity section alerts users of new likes, reblogs, and followers. It was a part of the main navigation until Tumblr replaced it with instant messaging.

If users wanted to see their activity, they had to 1) go into their inbox and 2) swipe left. Not only did removing it from the navigation and cramming it with chat make it less accessible, but users didn’t get notifications for new activity either. The number of notifications that showed above the chat symbol only referred to new messages. So if users wanted to know if they had new activity, they had to check manually every time.

I’m assuming Tumblr put instant messaging in the main navigation to encourage users to chat with each other more. The more they’re chatting with each other, the more time they’re spending on Tumblr.

But knowing how others are interacting with your blog is an opportunity for engagement itself. It lets you know how your content is being received and who’s interacting with your blog. It may encourage you to post more and keep your blog active if you see that it’s doing well.

And it may even open up the opportunity to discover new people to chat with. You’re more likely to check a blog out and follow it after seeing they’ve interacted with yours, for example.

Solution #5: Separate activity from inbox

I put activity in the main navigation and moved messaging to the top-right hand corner of the feed. Having them separated and in plain view lets users stay up to date with how their blog is doing and how their friends are doing. It didn’t have to be one or the other.

And that’s all, folks 👏🏼

I’ve learned that every problem is an opportunity to get creative, especially the ones that seem too difficult to solve. And this isn’t limited to design or programming. I’ve applied this lesson to my own life, and this study is a result of it.

My problem was that I wanted to start a career in and product design but didn’t have the experience. I couldn’t afford courses or bootcamps, and I didn’t want to burden myself with loans. But none of that mattered. There are hundreds of free resources available online. You could look up anything you’ve ever dreamt of learning — it’s literally at your fingertips. I knew with diligence and patience I could get the ball rolling on my own, and build experience by creating projects like this one.

If you want to learn something but feel you don’t have the ability, experience, or resources — create them. Find out how to make your problems work for you instead of against you. Keep pushing through, especially when it gets hard.

If you have any suggestions or questions, I’d love to hear them! I eagerly welcome constructive feedback — it helps me understand what to improve on and think of solutions I hadn’t previously considered.

How I learned product design by redesigning Tumblr was originally published in freeCodeCamp.org on Medium, where people are continuing the conversation by highlighting and responding to this story.

Sometime late last year I realized that I wanted my ordinary bathroom mirror to be more like the future we were promised in the movies.

There doesn’t seem to be anyone selling the product I was looking for. The individual parts, however, were fairly easy to get. A number of people have done similar custom builds recently, but I had something different in mind.

So I ordered myself a two-way mirror, a display panel and controller board, plus a bunch of components and arts & crafts supplies. In reality there was quite a bit of experimentation and some dead ends before I got to this set of parts, but let’s have a look at the finished — yet by no means final—result:

Welcome to my bathroom. Please excuse the carefully arranged mess around the medicine cabinet and its pristine mirror surface.

To the right of where my face would be we have the time and date. To the left is the current weather and a 24-hour forecast. Below are some recent news headlines. Here’s a close-up of that area:

Unless the weather is cloudy, there will be a little color in the UI, but for the most part the text and icons are monochrome to prevent them from being too distracting.

The code behind this UI uses some simple Android APIs (e.g. this one is neat) plus Forecast for the weather and the Associated Press for news.

Other concepts I’m playing with are traffic, reminders, and essentially anything that has a Google Now card. The idea is that you don’t need to interact with this UI. Instead, it updates automatically and there’s an open-ended voice search interface for anything else.

The display is only a couple of millimeters thin and embedded in a layer between the two-way mirror glass and the door of the medicine cabinet. That way it looks very clean and I can keep using all the shelf space inside. Here’s the open door at an angle and viewed edge-on:

This prototype is still a work in progress and I haven’t spent much time on the software yet. The UI above is only a few hundred lines of code and I’m experimenting with different devices to run it—initially Chromecast, then Nexus Player, and most recently Fire TV Stick.

That means until I settle on a platform and clean up the electronics it does look a little bit messy when you peek inside:

And that’s where I am with this project so far. Looking forward to realizing some of the remaining ideas. Maybe I’ll post a more detailed making-of with the pictures I took during the build.

Update! Read the follow-up here.

Smarter Mirrors and How They’re Made

In 2017, the most popular programs to create presentations are still PowerPoint and Keynote. They have great features overall but being desktop applications, sharing and collaboration are made very difficult if not impossible.

Ludus is a new presentation tool for creative people, see it as PowerPoint for the 21st century.

What’s wrong with PowerPoint?

Sharing can be very painful with PowerPoint and Keynote. If your presentation is heavy because it contains HD videos or pictures, sending it by email will take forever, if it doesn’t crash at 99%. But that’s only if you’re lucky! If your recipient has a size limit on the attachments they can receive, you have to use third-party tools like WeTransfer to make sure they can get it. Sounds familiar?

Another pain is compatibility: if your recipient doesn’t have the same version of the software as yours or doesn’t have all the required fonts, it can result in layout problems or worse, the impossibility to open the file. You end up exporting the file as PDF, losing all the animations and interactive objects (like videos), and resulting in a boring flat file.

Collaboration can also be challenging with desktop apps. In a rush, have you ever worked with other people at the same time on the same presentation? Do you remember the nightmare it was when you needed to do the big merge? If you work in an agency, that kind of problems must be very familiar to you too.

One thing that’s bothering too is the fact that PowerPoint doesn’t seem to care about how you create your slides, or if you can share them easily. It’s only about presenting. They built it as a replacement for the old overhead projectors, something that millennials will never know (good for them).

At Ludus, we want to provide a great tool to create presentations (and have fun while doing it), but also a tool that helps to share them without friction. You just need to send a URL and that’s it! Nothing is lost and you can be 100% confident that your recipient will see your presentation exactly as you created it.

Finally, desktop apps don’t allow you to embed web content like YouTube or Vimeo videos, or more advanced services like Dropbox, GIPHY, Framer, InVision or SketchFab. This is something that can be accomplished naturally in a web-based application, but that is totally impossible with old-school desktop softwares. The reason is simple: PowerPoint was invented before the World Wide Web, and did not evolve much since then.

These are not problems we just invented. These are problems we have every day. And we think we are not alone.

Why can’t we just use Google Slides?

Unfortunately, existing web-based tools like Google Slides or Slides.com, even though they are doing a pretty decent job, still lack features, sometimes pretty basic, that are absolutely essential for designers (for example: uploading a font, letter spacing, color overlay, blending mode, or keyboard shortcuts). If you spend most of your day in that awesome design software called Sketch, you’ll be in familiar ground with Ludus.

These web-based apps also barely benefit from being on the web and all the integration opportunities arising from it. For example, Google Slides only allows you to add YouTube videos to your presentations! With Ludus, you can integrate images from Dropbox, Flickr, GIPHY, Instagram and Unsplash; fonts from Google Fonts, Typekit and your own computer; icons from Icons8 and The Noun Project; videos from YouTube, Vimeo, Streamable, Wistia and Vid.me; and also rich content from InVision, Framer and SketchFab. That’s already a pretty impressive list but it’s really just a beginning. Because we plan to open the platform to developers, just like Slack, everything you need will be available at some point.

How much is it?

Ludus is free by default and offers unlimited presentations and access to all editing features. If you need professional features like password protection, white label or advanced metrics, you can subscribe to a Pro plan for only $99/year. And if you’re part of a team, we’ll soon release a Team plan with all the collaboration features you need, for only $49/month.

Slides are a great way to communicate and share ideas. Imagine a tool mixing the share-ability of Google Slides, with the power of native apps like Keynote or PowerPoint, up to the expert features of Sketch, through the integration power of Slack. We aim at solving that equation, by being the single destination for content creation and sharing.

Does the world need another presentation tool?

We think so, the same way the world needed a better team collaboration tool to replace Skype (Slack), a better graphics editor to replace Photoshop (Sketch), or a better publishing platform to replace WordPress (Medium).

Why “Ludus” by the way?

“Ludus” is a latin word and can both mean “play, entertainment, fun” or “school”. In Ancient Rome, a ludus was the place where children up to the age of 11 went to learn new things in a playful way. We are convinced (and recent studies prove it) that the best way to learn is to have fun doing it. This is something we are trying to achieve with Ludus.

Wanna try? Get early access to Ludus by leaving your email here.

Meet Ludus was originally published in Ludus on Medium, where people are continuing the conversation by highlighting and responding to this story.

Why this article?

Digging into accessibility and usability in form design was a shocking experience. I felt frustrated when I tried screen readers, accessing input field using only keyboard and changing the colour contrast in my screen. I shared the whole experience in a few talks, some people asked me if I would write about it and here I am!

Forms are important and a lot of businesses rely on them

A form is an electronic document that contains a structured set of related user input fields.

Following best practice in form design helps business by making it easy for user to complete their goals. It makes their experience seamless and delightful which usually results on a rise in completion rate.

Sometimes the effort could be as small as changing the call to action message. Jared M. Spool wrote an article about The $300 Million Button that resulted in an increase of $300 million for an e-commerce business.

“The number of customers purchasing went up by 45%. The extra purchases resulted in an extra $15 million the first month. For the first year, the site saw an additional $300,000,000” — Jared M. Spool

User frequently leave sites because:

•They keep getting an error in a form
•They don’t want to register
•They don’t want to give unnecessary information

The 10 golden rules

I summarised part of my talks about usability in form design. The chapter merges 10 recommendations by Kathryn Whitenton with examples I found in different websites to back up each point. I also added a few things from Web Form Design by Luke Wroblewski

1. Keep it short

Eliminating unnecessary fields requires time but increases the conversion rate.

2. Visually group related labels and fields

Labels should be close to the fields. Use some white space to group or separate elements visually. If the form is long, you can break it down to steps. One step per page.

If your form asks about different topics, section it into separate groups of fields and name the groups accordingly.

3. Present fields in a single column layout

Multiple columns interrupt the vertical momentum of moving down the form.

There are some exceptions to this rule: short and/or logically related fields such as City, State, and Zip Code can be presented on the same row.

‘Option A’ vs ‘Option B’

If you had to choose between ‘Option A’ and ‘Option B’, which one will you go with?

I’ve done a few talks about usability and accessibility in form design. Every time I asked this question, it created a noise and people started debating. Some raise their hands for option A and some for option B. The best option is B’ and this is based on a research Primary & Secondary Actions in Web Forms by Luke Wroblewski.

The primary call to action should be on the left and aligned with the rest of the form. Easy scan and quick access by keyboard.

Primary call to action

Make the weight of the primary call to action stands more than the secondary one. This helps reduce errors and it’s easy to access by keyboard.

4. Use logical sequencing

Stick to standard sequences and consider regional or cultural differences such as date formats.

It’s important to consider the cultural difference in sequencing information. Dates as an example, Japan, Europe and the US all have a different way of displaying it.

5. Avoid placeholder text as a label

Without labels, users cannot check their work before submitting a form. Disappearing placeholder text strains users’ short-term memory.

A placeholder is supposed to help users understand what’s required from them.

6. Match fields to the type and size of the input field

In this instance, if your form requires a 3 digits security number, design for that size. Imagine if the security number field was as big as the rest of the fields? This would easily create doubts and confusion.

7. Distinguish optional and required fields

No more asterisk symbol* in forms. If you don’t need the information, don’t ask for it.

If, for marketing reasons, you want to collect more data than what you need, you can always ask for it later.

8. Explain any input or formatting requirements

It’s important to explain what you require from the user. This prevents errors which results on reducing the completion time.

9. Avoid Reset and Clear buttons

Thankfully this is not a common practice but you can still see it in old websites.

10. Provide highly visible and specific error messages

Be specific about the error message otherwise users won’t know what went wrong and what’s required from them.

Wrap Up

It doesn’t take a substantial amount of time and effort to make a form usable and the experience more enjoyable.

Here’s the deck for a talk I did for Women Who Code and Mobile UX London about How to Design Good Forms. See you next time for Accessibility and Usability in Form Design, where I’ll be sharing my experience with screen readers.

Before you go!

If you liked this article, clap and share. Get in touch if you have any questions or any examples you want to share.

If you liked this article, you might also like Why Testing with Real Content Is Better Than Lorem Ipsum and Communication layers you need to know about in UX Leadership

Lastly, I created Snaget to help people get an additional stream of income while helping others get stuff done. Help us spread the word and sign up to get early access!

Use these top 10 tips when you design for forms was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Have you ever heard of Design Thinking?

Your answer to that question will depend largely on where you sit in the world. The phrase Design Thinking is known almost universally in design circles. It’s made its way around networks of business hype more than once. Hell, the folks at Singularity University — a cult of technological utopians who hoover handfuls of vitamins and believe we’ll all upload our minds to servers in a few decades — think Design Thinking may be your “Secret Weapon for Building a Greater Good.” No doubt, many others have also heard from people excited about Design Thinking — a state of being known as “having a bad case of the DTs.”

As the designer Natasha Jen explains, Design Thinking can be traced back to foundational thinkers like the polymath Herbert Simon and the designer Robert McKim. The architect and urban designer Peter Rowe, who eventually became the dean of Harvard University’s Graduate School of Design, was one of the first people to popularize the term in his 1987 book, Design Thinking.

The notion of Design Thinking is often centrally associated with the fabled design and consulting firm, IDEO, most famous for crafting nifty consumer electronics, like Apple’s first mouse and the look of the Palm V personal digital assistant. But in recent years, it is individuals at Stanford University’s design school — or d.school (their asinine punctuation and capitalization, not mine) — who’ve been pushing and selling Design Thinking. IDEO will charge you $399 for a self-paced, video-based Design Thinking course, “Insights for Innovation.” Or you can pay Stanford $12,600 for a 4-day “Design Thinking Bootcamp” called “From Insights to Innovation.”

What is Design Thinking, this thing you’d want to put all your hard-earned bread towards? That’s a good question. Its Wikipedia page, which was clearly written by enthusiasts, defines the term in this way: “Design Thinking refers to creative strategies designers use during the process of designing. Design Thinking is also an approach that can be used to consider issues, with a means to help resolve these issues, more broadly than within professional design practice and has been applied in business as with as social issues.”

If you’re confused, don’t worry. You’re not alone. That confusion is a common reaction to a “movement” that’s little more than floating balloons of jargon, full of hot air. The deeper you dig into Design Thinking, the vaguer it becomes.

None of this would matter, though, if Design Thinking was just another fad taking hold with the gullible. The problem is that certain individuals and interests have recently been pushing Design Thinking as a way to reform higher education and other fundamental social institutions. A recent New York Times article describes a new high school called d.tech in Redwood Shores, California. d.tech, which was funded by the Oracle corporation, focuses on giving teenagers the DTs. As the NYTs article puts it, “Big Silicon Valley companies have been in a race to shape students’ education and use schools to train their next generation of workers.” You might ask, are these schools factories for producing corporate tools?

While Design Thinking is mostly just vapid, I will argue that, via illicit connections, this fad could spread through the nation — possibly even the world — and that, kind of like syphilis, if Design Thinking goes left untreated, it eats your mind. Therefore, it’s our duty to protect our fellow citizens — especially the innocent and impressionable young — from its ravages.

Over the last year, the Chronicle of Higher Education has run articles on Design Thinking with titles like “Can Design Thinking Redesign Higher Ed?” and “Is ‘Design Thinking’ the New Liberal Arts?” The reasonable answer to both of these questions is “oh hell no,” but that doesn’t keep some individuals from thinking otherwise.

Both the just named articles feature DT enthusiasts taking pilgrimages to Stanford’s d.school. In “Is ‘Design Thinking’ the New Liberal Arts?” Peter N. Miller, a professor of history and dean at Bard Graduate Center, explains that the d.school has its roots in three streams: the ultimate source is the product-design program in Stanford’s engineering school. The second stream is a product of geographical happenstance: in the 1960s, Stanford community members started hanging out at the Esalen Institute, a retreat center in Big Sur, California, which was a home to the Human Potential Movement and an institutional purveyor of New Age nonsense. Esalen, Miller claims, gave the d.school its focus on “creativity and empathy.” Finally, the designer David Kelly, who received a master’s in design from Stanford and got deeply into the empathy thing, started the design firm IDEO in 1978.

After founding the company, Kelly was a sometimes instructor at Stanford. In 2005, he approached the software billionaire and IDEO fan-client, Hasso Plattner, with, as Miller writes, “the idea of creating a home for Design Thinking.” Plattner donated $35 million, creating the d.school, or “IDEO.edu.”

Kelly became influential at Stanford, particularly by getting the ear of the university’s president, the computer scientist John L. Hennessy. Hennessy now believes that undergraduate education should be reformed around a “core” of Design Thinking. Kelley pushes this view, arguing for “incorporating Design Thinking into existing courses across the humanities and sciences.”

Hennessy and Kelly think the goal of education should be “social innovation,” which makes you wonder how earlier “innovators” ever managed without getting the DTs. The d.schoolers believe Design Thinking is the key to education’s future: it “fosters creative confidence and pushes students beyond the boundaries of traditional academic disciplines.” It equips students “with a methodology for producing reliably innovative results in any field.” It’s the general system for change agent genius we’ve all been waiting for.

Miller fawns over the d.school and notes that its courses are “popular” and often “oversubscribed.” He writes, “These enrollment figures suggest that whatever it is the d.school is doing, it’s working.” We will see that popularity is a crucial marker of success for Design Thinkers. Following this criterion, one social innovator Miller might look into is a guy named Jim Jones who had many enthusiastic followers and who, among other things, is most famous for the breakthrough, disruptive innovation of introducing sugary drinks to his fans. But, then, Miller knows a thing or two about Kool-Aid.

Miller struggles to define Design Thinking in the article, “It’s an approach to problem-solving based on a few easy-to-grasp principles that sound obvious: ‘Show Don’t Tell,’ ‘Focus on Human Values,’ ‘Craft Clarity,’ ‘Embrace Experimentation,’ ‘Mindful of Process,’ ‘Bias Toward Action,’ and ‘Radical Collaboration.’” He explains further that these seven points reduce down to what are known as the five “modes”: Empathize Mode, Define Mode, Ideate Mode, Prototype Mode, and Test Mode.

Miller never bothers to define all the modes, and we will consider them more below. But for now, we should just note that the entire model is based on design consulting: You try to understand the client’s problem, what he or she wants or needs. You sharpen that problem so it’s easier to solve. You think of ways to solve it. You try those solutions out to see if they work. And then once you’ve settled on something, you ask your client for feedback. By the end, you’ve created a “solution,” which is also apparently an “innovation.”

Miller also never bothers to define the liberal arts. The closest he comes is to say they are ways of “thinking that all students should be exposed to because it enhances their understanding of everything else.” Nor does he make clear what he means by the idea that Design Thinking is or could be the new liberal arts. Is it but one new art to be added to the traditional liberal arts, such as grammar, logic, rhetoric, math, music, and science? Or does Miller think, like Hennessy and Kelly, that all of education should be rebuilt around the DTs? Who knows.

Miller is most impressed with Design Thinking’s Empathize Mode. He writes lyrically, “Human-centered design redescribes the classical aim of education as the care and tending of the soul; its focus on empathy follows directly from Rousseau’s stress on compassion as a social virtue.” Beautiful. Interesting.

But what are we really talking about here? The d.school’s An Introduction to Design Thinking PROCESS GUIDE says, “The Empathize Mode is the work you do to understand people, within the context of your design challenge.” We can use language like “empathy” to dress things up, but this is Business 101. Listen to your client; find out what he or she wants or needs.

Miller calls the Empathize Mode “ethnography,” which is deeply uncharitable — and probably offensive — to cultural anthropologists who spend their entire lives learning how to observe other people. Few, if any, anthropologists would sign onto the idea that some amateurs at a d.school “boot camp,” strolling around Stanford and gawking at strangers, constitutes ethnography. The Empathize Mode of Design Thinking is roughly as ethnographic as a marketing focus group or a crew of sleazoid consultants trying to feel out and up their clients’ desires.

What Miller, Kelly, and Hennessy are asking us to imagine is that design consulting is or could be a model for retooling all of education, that it has some method for “producing reliably innovative results in any field.” They believe that we should use Design Thinking to reform education by treating students as customers, or clients, and making sure our customers are getting what they want. And they assert that Design Thinking should be a central part of what students learn, so that graduates come to approach social reality through the model of design consulting. In other words, we should view all of society as if we are in the design consulting business.

Let’s pretend for a second that we find ourselves thinking, “What a fantastic idea!” But, then, the part of our brain that occasionally thinks critically starts asking, “Hold on, but is Design Thinking really that great? Does it even work in any deeply meaningful way?”

If Design Thinking is so terrific, you’d expect designers to be into it. But often enough the opposite is true. In June 2017, the graphic designer Natasha Jen, a partner at the design firm Pentagram, gave a talk titled, “Design Thinking is Bullshit.”

Jen began her talk by complaining that Design Thinking has become a meaningless buzzword. But the deeper problem is that Design Thinkers treat design like a simple, linear process. Stanford represents the five modes as a series of hexagons that someone with the DTs, searching for rehab no doubt, can stumble through.

The version above is full of Silicon Valley buzzwords and jargon (“fail fast”), but it’s missing what Jen calls “Crit,” the kinds of critical thinking and peer criticism that designers do all the time and that forms the foundation of design and architecture education. Crit is essential at every stage, insists Jen.

Jen also points out that Design Thinking reduces design to a single tool: the 3M Post-It note.

A Google Image search for “Design Thinking Post-Its” will get you photos of individuals spraying their ideations all over every nearby body and surface.

Jen argues this Post-It mania ignores the rich set of tools, methods, and processes that designers have for thinking, doing their work, and challenging themselves.

Still deeper, Design Thinking touts its own greatness, but has few successes to show for it. There’s “little tangible evidence,” Jen says. She lists cases where Design Thinking was supposedly used, like painting cartoons in a hospital room to make it less frightening to children, and points out that the solutions are completely obvious. You don’t need a special method to reach these ends. Later, she argues more forcefully, if Design Thinking is really that great, “Prove it.”

Jen puts forward a definition of Design Thinking today: “Design Thinking packages a designer’s way of working for a non-design audience by way of codifying design’s processes into a prescriptive, step-by-step approach to creative problem solving — claiming that it can be applied by anyone to any problem.” Design Thinking is a product — a Stanford/IDEO commodity.

She points out that the words that have become associated with Design Thinking are a variety of business bullshit that have little to do with actual design.

In recent episode of the Design Observer podcast, Jen added further thoughts on Design Thinking. “The marketing of design thinking is completely bullshit. It’s even getting worse and worse now that [Stanford has] three-day boot camps that offer certified programs — as if anyone who enrolled in these programs can become a designer and think like a designer and work like a designer.” She also resists the idea that any single methodology “can deal with any kind of situation — not to mention the very complex society that we’re in today.”

In informal survey I conducted with individuals who either teach at or were trained at the top art, architecture, and design schools in the USA, most respondents said that they and their colleagues do not use the term Design Thinking. Most of the people pushing the DTs in higher education are at second- and third-tier universities and, ironically, aren’t innovating but rather emulating Stanford. In afew cases, respondents said they did know a colleague or two who was saying “Design Thinking” frequently, but in every case, the individuals were using the DTs either to increase their turf within the university or to extract resources from college administrators who are often willing to throw money at anything that smacks of “innovation.”

Moreover, individuals working in art, architecture, and design schools tend to be quite critical of existing DT programs. Reportedly, some schools are creating Design Thinking tracks for unpromising students who couldn’t hack it in traditional architecture or design programs — DT as “design lite.” The individuals I talked to also had strong reservations about the products coming out of Design Thinking classes. A traditional project in DT classes involves undergraduate students leading “multidisciplinary” or “transdisciplinary” teams drawing on faculty expertise around campus to solve some problem of interest to the students. The students are not experts in anything, however, and the projects often take the form of, as one person put it, “kids trying to save the world.”

One architecture professor I interviewed had been asked to sit in on a Design Thinking course’s critique, a tradition at architecture and design schools where outside experts are brought in to offer (often tough) feedback on student projects. The professor watched a student explain her design: a technology that was meant to connect mothers with their premature babies who they cannot touch directly. The professor wondered, what is the message about learning that students get from such projects? “I guess the idea is that this work empowers the students to believe they are applying their design skills,” the professor told me. “But I couldn’t critique it as design because there was nothing to it as design. So what’s left? Is good will enough?

As others put it to me, Design Thinking gives students an unrealistic idea of design and the work that goes into creating positive change. Upending that old dictum “knowledge is power,” Design Thinkers giver their students power without knowledge, “creative confidence” without actual capabilities.

It’s also an elitist, Great White Hope vision of change that literally asks students to imagine themselves entering a situation to solve other people’s problems. Among other things, this situation often leads to significant mismatch between designers’ visions — even after practicing “empathy” — and users’ actual needs. Perhaps the most famous example is the PlayPump, a piece of merry-go-round equipment that would pump water when children used it. Designers envisioned that the PlayPump would provide water to thousands of African communities. Only kids didn’t show up, including because there was no local cultural tradition of playing with merry-go-rounds.

Unsurprisingly, Design Thinking-types were enthusiastic about the PlayPump. Tom Hulme, the design director at IDEO’s London office, created a webpage called OpenIDEO, where users could share “open source innovation.” Hulme explained that he found himself asking, “What would IDEO look like on steroids? [We might ask the same question about crack cocaine or PCP.] What would it look like when you invite everybody into everything? I set myself the challenge of . . . radical open-innovation collaboration.” OpenIDEO community users were enthusiastic about the PlayPump — even a year after the system had been debunked, suggesting inviting everyone to everything gets you people who don’t do research. One OpenIDEO user enthused that the PlayPump highlighted how “fun can be combined with real needs.”

Thom Moran, an Assistant Professor of Architecture at the University of Michigan, told me that Design Thinking brought “a whole set of values about what design’s supposed to look like,” including that everything is supposed to be “fun” and “play,” and that the focus is less on “what would work.” Moran went on, “The disappointing part for me is that I really do believe that architecture, art, and design should be thought of as being a part of the liberal arts. They provide a unique skill set for looking at and engaging the world, and being critical of it.” Like others I talked to, Moran doesn’t see this kind of critical thinking in the popular form of Design Thinking, which tends to ignore politics, environmental issues, and global economic problems.

Moran holds up the Swiffer — the sweeper-mop with disposable covers designed by an IDEO-clone design consultancy, Continuum — as a good example of what Design Thinking is all about. “It’s design as marketing,” he said. “It’s about looking for and exploiting a market niche. It’s not really about a new and better world. It’s about exquisitely calibrating a product to a market niche that is underexploited.” The Swiffer involves a slight change in old technologies, and it is wasteful. Others made this same connection between Design Thinking and marketing. One architect said that Design Thinking “really belongs in business schools, where they teach marketing and other forms of moral depravity.”

“That’s what’s most annoying,” Moran went on. “I fundamentally believe in this stuff as a model of education. But it’s business consultants who give TED Talks who are out there selling it. It’s all anti-intellectual. That’s the problem. Architecture and design are profoundly intellectual. But for these people, it’s not a form of critical thought; it’s a form of salesmanship.”

Here’s my one caveat: it could be true that the DTs are a good way to teach design or business. I wouldn’t know. I am not a designer (or business school professor). I am struck, however, by how many designers, including Natasha Jen and Thom Moran, believe that the DTs are nonsense. In the end, I will leave this discussion up to designers. It’s their show. My concern is a different one — namely that some fools are proposing that we build the DTs into many other parts of education. With even a bit of critical reflection, it’s clear that Design Thinking is even worse in these other contexts.

In a book I’m writing with Andrew Russell, The Innovation Delusion, we examine the origins of our culture’s current obsession with “innovation.” We make a distinction between actual innovation, the introduction of new things and practices into society, and innovation-speak, the empty-headed and misleading ways people have come to talk about technological and social change in the past few decades. Importantly, there was a lot of actual innovation before World War II, but use of the word “innovation” only began rising after World War II, with the steepest increases in the 1960s and 1990s.

Since the 1990s, innovation-speak has grown into an entire Silicon Valley-centered lexicon of newspeak, including terms like disruption, disruptive innovation, angel investors, thought leaders, entrepreneurship, change agents, startups, incubators, Regional Innovation Hubs, smart this or that, unicorns, STEM education, pivot, lean, and agile as well as dead or dying faddish jargon, like killer app and Big Data.

Innovation-speak also has bunch of paraphernalia: hoodies, white boards, open, flexible building plans, and the Post-It notes that Natasha Jen lampoons. Envision pornography produced by Apple: cool hues, white and silver, everything soft lit, precisely the mise-en-scène of films like Ex Machina. The whole thing has a minimalist aesthetic that you know is going to age poorly — the shag carpeting of the Second Gilded Age, the green corduroy bellbottoms of Digital Robber Barons.

In The Innovation Delusion, Andy and I examine how innovation-speak has led us to neglect many essential aspects of our culture, including maintenance, our infrastructure, essential cultural traditions, and the ordinary, humdrum, mostly anonymous work that keeps the world going. Moreover, innovation-speak does not necessarily, or even often, lead to actual innovation. By some measures, truly deep technological change that increases economic productivity slowed down around 1970, but the era of high innovation-speak began later. Indeed, post-1970 innovation-speak was likely, in part, a response to wide-spread worries and fears about flagging productivity and economic growth, increasing international competition, and a host of uncertainties. The innovators would come and save us. Only they haven’t.

The value and usefulness of innovation-speak is totally unproven, but since 1980 or so, we have reformed a number of basic cultural institutions in innovation’s name. Universities and education more generally may be the institutions most deeply affected. For example, the Bayh-Dole Act of 1980 enabled researchers to patent inventions that had been supported through federal funding, something that was previously illegal. Since that time, the research time of professors has increasingly gone into patentable and exploitable; professors are encouraged to view themselves as entrepreneurs; and universities have amassed portfolios of intellectual property.

Universities have cast themselves as engines of innovation, and innovation-speak has traveled from campus to campus, something the English professor John P. Leary has examined beautifully. This kind of me-too-ism gets you Stevens Institute of Technology trademarking the highly-ironic motto “The Innovation University” (really? MIT and Caltech aren’t more innovative? Huh.); Texas Tech’s College of Arts and Sciences declaring “We Build Innovators”; and the University of Pennsylvania’s pathetic PENNOVATION Works (“Where Ideas Go to Work”). Reportedly, Penn faculty — female professors, mind you — refer to the PENNOVATION Works as the PENNETRATION Works and send each other speculative doodles of what exactly a PENNETRATION logo would look like.

Books like Philip Mirowski’s Science-Mart: Privatizing American Science, Lawrence Busch’s Knowledge for Sale: The Neoliberal Takeover of Higher Education, and Elizabeth Popp Berman’s Creating the Market University: How Academic Science Became an Economic Engine have shown repeatedly that leaders have increasingly remade universities in the corporate image. This transformation is thoroughgoing: professors are entrepreneurs now, and students are customers who have to be prepared for positions in corporations, particularly by receiving so-called STEM education. STEM ostensibly stands for science, technology, engineering, and math, but as the historian Nathaniel Comfort and others have argued, the science here isn’t about knowledge for its own sake or about the beauties of inquiry. STEM is focused on knowledge that can be easily commodified and sold.

Interests typically push these changes by arguing that higher education is in some kind of crisis and that it must be totally remade. Now, don’t get me wrong. I agree that higher education has DEEP problems. Most important is the well-known fact that college tuition has outpaced inflation for years, burdening students with mountains of debt. This way of doing things is completely unsustainable.

But innovation-centric reformers aren’t focused on these financial issues. Rather, they tend to make claims like “education hasn’t changed in 100 years.” They make vague and unsupported assertions, such as that “society is growing increasingly complex and will only be more complex in the future.” (What does this claim even mean? Complex in what way? Increasingly complex with respect to what metric? I have asked many professional historians this question, and they believe this increasing complexity claim is unsupportable.)

This manufactured general perception of “crisis” creates opportunities for change from two directions — from-above and from-below — though in practice these directions often work together hand-in-hand. From above, university presidents and provosts introduce new initiatives, funding streams, and incentives to encourage, or even force, faculty to model themselves on the current image of “innovation.” From below, the perception of crisis provides openings for faculty members to create new programs, centers, institutes, and other initiatives that promise to make the university more innovative and transform students into little innovators and entrepreneurs.

Furthermore, because STEM has become dominant model of innovation in universities, other disciplines have had to contort themselves to fit that profile. Artists raised their hands to announce, “Look, we can commodify things too,” and started talking about STEAM. Crucial point: if you add the humanities to this mix, you get SHTEAM. (Say it like Mel Brooks would say it.)

All of this is the larger context for current discussions of Design Thinking and questions about whether Design Thinking might be the new liberal arts and whatnot.

Design Thinking’s roots in consulting are instructive. As Margaret Brindle and Peter Stearns explain in their book, Facing Up to Management Faddism: A New Look at an Old Force, fads often enter organizations from outside in moments of perceived crisis, and the fads complete certain functions for the organizations’ leaders. First, they assuage leaders worries and uncertainties because this novel thing promises to solve their problems. Second, the fads legitimate the organization because it can show that it is keeping up with all the new, cool stuff out there. Third, fads enable leaders to show that they are doing something. And, finally, individuals get to champion this or that fad and, thus, build and advance their careers and win acclaim for being cutting-edge.

Christopher McKenna’s book, The World’s Newest Profession: Management Consulting in the Twentieth Century, is also helpful for understanding the current hubbub about Design Thinking. Of course, we refer to prostitution as the world’s oldest profession, so the book’s title gives you some sense of how McKenna approaches his topic. McKenna emphasizes repeatedly that consultants had to create the perception that they were experts with legitimate knowledge, especially by leading others to believe that the consultants had access to esoteric systems of thought, or “sciences.”

Natasha Jen and others complain about how schematic and “linear” Design Thinking’s self-representation, but as a tool for hucksterism, turf-grabbing, and bullshit-peddling, this seeming-systematic is precisely what makes the DTs attractive. Design Thinkers use modernist, science-y terms like “modes” to push the idea that they have some special technique.

Remember, Design Thinking is “a methodology for producing reliably innovative results in any field.” Strictly speaking, “methodology” is the analysis of methods. That just quoted sentence really means to say “methods for producing . . . “, not “methodology,” but Design Thinkers use the longer word because it sounds fancier and more sophisticated.

As George Orwell noted under the heading “Pretentious Diction” in his famous essay on language, “Bad writers . . . are always haunted by the notion that Latin and Greek words are grander than Saxon ones.” Fittingly, Design Thinkers prefer the three-syllable Latinate word “ideate” to the one-syllable Germanic word “think” and even more the four-syllable word “ideation” to the simpler words “thought” or “thinking.”

IdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeationIdeation

If you reflect for even half a second, you realize how vapid Design Thinking is. Here are the Design Thinking “modes” put next to some steps I was taught when I took a freshman writing class in 1998:

1. Empathize Mode: Consider Your Audience.
2. Define Mode: Pick a Clearly-Defined Topic, Neither Too Broad, Nor Too Narrow
3. Ideate Mode: Fucking Think
4. Prototype Mode: Write Your Fucking Thoughts Down
5. Test Mode: Give What You’ve Written to Someone You Trust to Read It and Let You Know if It Sucks

When you contemplate writing and many other activities, you realize there is nothing new about Design Thinking. It is commonsense tarted up in mumbo jumbo. For sure, it is commonsense tarted up . . . by design.

The even deeper problem, however, is that Design Thinking gives students a terrible picture of technological and social change.

I love design. (With tears in my eyes, I recall the heart-breaking moment when I realized that Design within Reach meant design-within-physical-proximity and not design-that-could-ever-be-grasped-by-my-income.) What’s more, anyone who has studied the history of capitalism knows how important design and style have been to the diffusion and reshaping of products.

But Design Thinkers put forward a seriously skewed picture of designs’ role in innovation. When IDEO-logues David and Tom Kelly write in their book, Creative Confidence, “Our first-person experiences help us form personal connections with the people for whom we’re innovating,” their bending the definition of innovation to the point meaninglessness. This is Design Thinking’s lipstick-on-a-pig conception of innovation.

Economists and historians who study innovation, like Nathan Rosenberg, David Mowery, Steven Klepper, and David Hounshell, often write about the genesis of entire industries born around new fundamental technologies, like steel, railroads, automobiles, electricity, airplanes, pharmaceuticals, chemicals, petroleum, electronics, computers, and the Internet. As Robert Gordon argues in The Rise and Fall of American Growth, most of these technological breakthroughs happened before 1970. We have been stuck in a period of slow economic growth and lagging productivity since that time. Yet, innovation-speak claptrap has mostly only developed since then. There’s no evidence that IDEO, Design Thinking, or the d.school have contributed to deep change. Compared to this more foundational kind of transformation, the lipstick-on-a-pig conception of innovation is just so superficial.

Design Thinking-types tend to worship Jony Ive, Apple’s Chief Design Officer, who deeply influenced the look and feel of that company’s most famous products. As writers like Patrick McCray and Mariana Mazzucato have described, however, the technologies undergirding the iPhone weren’t created at Apple but elsewhere — in fact, often through federally-funded research. Design Thinking isn’t focused on generating these kinds of fundamental technological changes; it’s centered on repackaging existing technologies behind slick interfaces. It’s the annual model change of some consumer electronic, slightly reconfigured in the name of planned obsolescence and unveiled at CES as a “New Revolution” in whatever. It’s iShit.

The government made your iPhone. And the Internet. Say thank you. #innovation (via @MazzucatoM) #HistSTM

 — @LeapingRobot

The picture gets even worse when you compare Design Thinking’s “social innovation” with movements that lead to deep and abiding social change. Were Rosa Parks and other activists supposed to “empathize” with owners, managers, and city leaders when “designing” the Montgomery Bus Boycott? How did Rosa Parks, Dorothy Height, Martin Luther King, and leaders of the Civil Rights Movement ever manage to be so successful without the Ideate Mode hexagon? Thank heavens they didn’t have to wait for the founding of IDEO to get going. Design Thinkers dream lubricated dreams of “social innovation” free of politics and struggle.

In the end, Design Thinking’s not about design. It’s not about the liberal arts. It’s not about innovation in any meaningful sense. It’s certainly not about “social innovation” if that means significant social change. It’s about COMMERCIALIZATION. It’s about making all education a shallow form of business education. It reminds me of a story I read when I was young where an unorthodox figure went into a building and started flipping over tables because the people at the tables had made a market of the temple. The is-design-thinking-the-new-liberal-arts people want the instrumental reason of commodity-making to reign all.

One of the greatest dangers in the current design education crisis operating in exploitative neoliberal models, is the emergence of schools that capitalise on this moment to expand that exploitation under the banal, seductive slogan of 'hacking education'. https://t.co/W8XblhSybp

 — @modescriticism

Design Thinking will mess up your brains. Decline sets in. Enthusiasts embrace sexed up platitudes as profundities and believe smooching lipsticked pigs is innovation. If you manage an organization, you do not want individuals infected with these mental models in your meetings. Their ignorance and gullibility are not assets but liabilities. But for all these issues, there’s an even deeper way in which pushing the DTs in education is problematic.

A couple of years ago, I saw a presentation from a group known as the University Innovation Fellows at a conference in Washington, DC. The presentation was one of the weirder and more disturbing things I’ve witnessed in an academic setting.

The University Innovation Fellows, its webpage states, “empowers students to become leaders of change in higher education. Fellows are creating a global movement to ensure that all students gain the necessary attitudes, skills, and knowledge to compete in the economy of the future.” You’ll notice this statement presumes that students aren’t getting the “attitudes, skills, and knowledge” they need and that, more magically, the students know what “attitudes, skills, and knowledge” they themselves need for . . . the future.

The UIF was originally funded by the National Science Foundation and led by VentureWell, a non-profit organization that “funds and trains faculty and student innovators to create successful, socially beneficial businesses.” VentureWell was founded by Jerome Lemelson, who some people call “one of the most prolific American inventors of all time” but who really is most famous for virtually inventing patent trolling. Could you imagine a more beautiful metaphor for how Design Thinkers see innovation? Socially beneficial, indeed.

Eventually, the UIF came to find a home in . . . you guessed it, the d.school.

It’s not at all clear what the UIF change agents do on their campuses . . . beyond recruiting other people to the “movement.” A blog post titled, “Only Students Could Have This Kind of Impact,” describes how in 2012 the TEDx student representatives at Wake Forest University had done a great job recruiting students to their event. It was such a good job that it was hard to see other would match it the next year. But, good news, the 2013 students were “killing it!” Then comes this line (bolding and capitalization in the original):

*THIS* is Why We Believe Students Can Change the World

Because they can fill audiences for TED talks, apparently. The post goes on, “Students are customers of the educational experiences colleges and universities are providing them. They know what other students need to hear and who they need to hear it from. . . . Students can leverage their peer-to-peer marketing abilities to create a movement on campus.”

Meanwhile, the UIF blog posts with titles like, “Columbia University — Biomedical Engineering Faculty Contribute to Global Health,” that examine the creation of potentially important new things mostly focus on individuals with the abbreviation “Dr.” before their names, which is what you’d expect given that making noteworthy contributions to science and engineering typically takes years of hard work.

At its gatherings, the UIF inducts students into all kinds of innovation-speak and paraphernalia. They stand around in circles, filling whiteboards with Post-It Notes. Unsurprisingly, the gatherings including sessions on topics like “lean startups” and Design Thinking. The students learn crucial skills during these Design Thinking sessions. As one participant recounted, “I just learned how to host my own TEDx event in literally 15 minutes from one of the other fellows.”

The UIF has many aspects of classic cult indoctrination, including periods of intense emotional highs, giving individuals a special lingo barely recognizable to outsiders, and telling its members that they are different and better than ordinary others — they are part of a “movement.” Whether the UIF also keeps its fellows from getting decent sleep and feeds them only peanut butter sandwiches is unknown.

This UIF publicity video contains many of the ideas and trappings so far described in this essay. Watch for all the Post-It notes, whiteboards, hoodies, look-alike black t-shirts, and jargon, like change agents.

When I showed a friend this video, after nearly falling out of his chair, he exclaimed, “My God, it’s the Hitlerjugend of contemporary bullshit!”

Tough but fair? Personally, I think that’s a little strong. A much better analogy to my mind is Chairman Mao’s Cultural Revolution.

When I saw the University Innovation Fellows speak in Washington, DC, a group of college students got up in front of the room and told all of us that they were change agents bringing innovation and entrepreneurship to their respective universities. One of the students, a spritely slip of a man, said something like, “Usually professors are kind of like this,” and then he made a little mocking weeny voice — wee, wee, wee, wee. The message was that college faculty and administrators are backwards thinking barriers that get in the way of this troop of thought leaders.

After the presentation, a female economist who was sitting next to me told the UIFers that she had been a professor for nearly two decades, had worked on the topic of innovation that entire time, and had done a great deal to nurture and advance the careers of her students. She found the UIF’s presentation presumptuous and offensive. When the Q&A period was over, one of UIF’s founders and co-directors, Humera Fasihuddin, and the students came running over to insist that they didn’t mean faculty members were sluggards and stragglers. But those of us sitting at the table were like, “Well then, why did you say it?”

You might think that this student’s antics were a result of being overly enthusiastic and getting carried away, but you would be wrong. This cultivated disrespect is what the UIF teaches its fellows. That young man was just parroting what he’d been taught to say.

A UIF blog post titled “Appealing to Your University’s Faculty and Staff” lays it all out. The author refers to Fasihuddin as a kind of guru figure, “If you participated in the Fall 2013 cohort, you may recall Humera repeating a common statement throughout session 5, ‘By connecting to other campuses that have been successful, and borrowing from those ideas you hear from your UIF peers, it removes the fear of the unknown for the faculty.”

Where does the faculty’s fear come from? The blog post explains, “The unfortunate truth in [Humera’s] statement is that universities are laggards (i.e. extremely slow adopters). The ironic part is universities shouldn’t be, and we as University Innovation Fellows, understand this.”

Now, on the one hand, this is just Millennial entitlement all hopped up on crystal meth. But on the other hand, there is something deeper and more troubling going on here. The early innovation studies thinker Everett Rogers used the term “laggard” in this way to refer to the last individuals to adopt new technologies. But in the UIF, Rogers’ vision becomes connected to the more potent ideology of neoliberalism: through bodies of thought like Chicago School economics and public choice theory, neoliberalism sees established actors as self-serving agents who only look to maintain their turf and, thus, resist change.

This mindset is quite widespread among Silicon Valley leaders. It’s what led billionaire Ayn Rand fan Peter Thiel to put $1.7 million into The Seasteading Institute, an organization that, it says, “empowers people to build floating startup societies with innovative governance models.” Seasteaders want to build cities that would float around oceans, so they can escape existing governments and live in libertarian, free market paradise. It’s the same notion undergirding the Silicon Valley “startup accelerator” YCombinator’s plan to build entire cities from scratch because old ones are too hard to fix. Elon Musk pushes this view when he tweets things, like “Permits are harder than technology,” implying that the only thing in the way of his genius inventions are other human beings — laggards, no doubt. Individuals celebrated this ideological vision, which holds that existing organizations and rules are mere barriers to entrepreneurial action, when Uber-leader Travis Kalanick used a piece of software to break city laws. And then they were shocked, shocked, shocked when Kalanick turned out to be a total creep.

Now, if you have never been frustrated by bureaucracy, you have not lived. Moreover, when I was young, I often believed my elders were old and in the way. But once you grow up and start getting over yourself, you come to realize that other people have a lot to teach you, even when — especially when — they disagree with you.

This isn’t how the UIF sees things. The blog post “Appealing to Your University’s Faculty and Staff” advises fellows to watch faculty members’ body language and tone of voice. If these signs hint that the faculty member isn’t into what you’re saying — or if he or she speaks as if you are not an “equal” or “down at you” — the UIF tells you to move on and find a more receptive audience. The important thing is to build the movement. “So I close with the same recurring statement,” the blog post ends, “By connecting to other campuses that have been successful . . . it removes the fear of the unknown for faculty.”

Is there any possibility that the students themselves could just be off-base? Sure, if while you are talking someone’s body tightens up or her head looks like it’s going to explode or her voice changes or she talks down to you and doesn’t treat you as an equal, it could be because she is a demonic, laggard-y enemy of progress, or it could be because you are being a fucking moron — an always-embarrassing realization that I have about myself far more often than I’d like to admit. Design Thinkers and the UIF teach a thoroughly adolescent conception of culture.

Edmund Burke once wrote, “You had all of these advantages . . . but you chose to act as if you had never been molded into civil society, and had everything to begin anew. You began ill, because you began by despising everything that belonged to you.” The brain-rotting illness of innovation-speak leads us to see everything around us and others as objects that are in our way and to overvalue our own precious uniqueness.

It’s ironic because significant changes in art, technology, science, and all culture starts by building on what has come before, not by throwing it away. In jazz, for instance, Bird, Coltrane, and Herbie Hancock all spent years understanding the tradition — thousands of hours of listening and practice — before making their own musical breakthroughs. The best and deepest thinking always involves a dialectic between us and those who came before us, feeling our way forward together, forever imperfectly, towards truth. This is also why great teaching is always both a subversive and a conservative act, and why one of the foundational liberal arts is called love of wisdom.

In computer programming, there is an idea called “Chesterton’s Fence,” which is “the principle that reforms should not be made until the reasoning behind the existing state of affairs is understood.” Or as Burke again put it, “We are but too apt to consider things in the state which we find them, without sufficiently adverting to the causes by which they have been produced, and possibly may be upheld.” These principles challenge our impatience and overweening estimation of our own genius.

Individuals who hanker after “modes” and crave diagrams rich with hexagons cannot handle this kind of subtlety. Indeed, it is precisely this kind of subtlety and local tradition that, what André Spicer calls, “business bullshit” aims to erase. Spicer encourages us all to form an “anti-bullshit movement.” Perhaps we could sign up students all around the globe, who could have dance offs with those lame conformists, the University Innovation Fellows.

Spicer writes that the anti-bullshit movement “would also be a way of reminding people that each of our institutions has its own language and rich set of traditions which are being undermined by the spread of the empty management-speak. It would try to remind people of the power which speech and ideas can have when they are not suffocated with bullshit. By cleaning out the bullshit, it might become possible to have much better functioning organizations and institutions and richer and fulfilling lives.”

I do have to thank Humera Fasihuddin and her goose-stepping “innovators” for the newest addition to my wardrobe, however.

Design Thinking, the UIF, the whole trade association of Bullshit Artists United — it’s all so bleak. But thank God, there is hope.

There is reason for hope. There really is.

The greatest and most savage critic of Design Thinking has emerged from the heart of the Design Thinking world itself. His name is Bill Burnett, and he is a comedic genius.

Burnett is the Executive Director of “Stanford’s innovative Product Design program.” As his bio explains, Burnett has a “Masters of Science in Product Design at Stanford and has worked in start-ups and Fortune 100 companies, including seven years at Apple designing award-winning laptops and a number of years in the toy industry designing Star Wars action figures.”

No one is really clear what made Burnett break. Perhaps he just got tired of pretending that making yet another Chewbacca figurine constituted any kind of meaningful innovation. But about a decade ago, he began plotting to overthrow the Design Thinking madness that surrounded him — and to do so solely through the use of comedy.

Burnett’s first step was to found something called the “Life Design Lab” at the d.school and to create a new course, “Designing Your Life,” where he would begin rehearsing his satirical material. The conceit was that you could use Design Thinking as a form of self-help. He called the class d.life to lampoon Stanford’s ridiculous fashions and to skewer the idiocy of thinking a paint-by-numbers system for consulting could also be used to “design” human existence.

After nine years of creating and rehearsing jokes and one-liners in d.life, Burnett was ready for prime time. With his co-author Dave Evans, he wrote and published the 2016 book, Designing Your Life: How to Build a Well-Lived, Joyful Life.

If you thought Stephen Colbert’s I am America (and So Can You!), John Hodgman’s The Areas of My Expertise, or Amy Schumer’s The Girl with the Lower Back Tattoo were hysterical, you really must rush out and get a copy of Designing Your Life right now! I have read the book aloud at parties and nearly killed everyone in the room.

Designing Your Life is full of wonderful satirical moments where Burnett and Evans unmask Design Thinking as a fraud. For instance, they write, “Design doesn’t just work for creating cool stuff like computers and Ferraris; it works in creating a cool life.” They also poke fun at DT’s habit of overselling its promises, “A well-designed life is a life that is generative — it is constantly creative, productive, changing, evolving, and there is always the possibility of surprise.” (italics in the original) The book mauls Design Thinkers’ oversimplification of the world through absurd diagrams and formulas, like this one: Problem Finding + Problem Solving = Well-Designed Life. (Bolding and italics in original).

There’s a deeper level to Burnett’s humor, though, a layer beyond farce, which is a kind of meta-commentary on Design Thinking’s hucksterism. The best example is how Burnett and Evans use the term “reframe” in the book. In Design Thinking, “reframe” is jargon for looking at a problem in a different way. As an article titled, “How Reframing a Problem Unlocks Innovation,” puts it, “Mastering the ability to reframe problems is an important tool for your imagination because it unlocks a vast array of solutions.”

In Design Your Life, Burnett and Evans apply the reframe to self-help. Here’s one example from page xii:

B&A’s too-cruel satire works in this way: anyone who knows anything about the history of psychology will instantly see that “reframe” as a reformulation of cognitive behavioral therapy (CBT). CBT has been one of the most prominent schools of therapy since at least the 1980s. A core assumption of CBT is that individuals are tortured by “negative thought patterns” or “negative automatic thoughts.” CBT encourages us to “challenge” those often by coming up with mantras that give a more realistic and supportive perspective. We can challenge “I am a fat turd” with “I’m good enough, I’m smart enough, and gosh darn it, people like me.”

This CBT rubric has formed the basis for hundreds, thousands, maybe even hundreds of thousands of self-help books for the last three decades, but Burnett and Evans make nary a mention of this fact. They just call negative thought patterns “dysfunctional beliefs” and challenges “reframes.”

In a gorgeous example of meta-commentary, what they are pointing out is that Design Thinking is the act of taking ideas that already exist, sexing up them up with a bit of rouge, and putting them in other words. Typically, people with a bad case of the DTs do this without recognizing their predecessors but instead claim to have done something new, to have made some “innovation.” As the historians David Edgerton and Will Thomas have argued, such bogus novelty claims actually produce ignorance because they hide the true nature of social reality from the speaker’s audience; they elide whole traditions of thought.

Burnett and Evans unmask all of this for us. Truly, this is some of the smartest humor in decades.

Writing humor is hard, but doing standup is much harder, and Burnett turned out to be a master. Watch at least the first minute and ten seconds of this video, and listen for the line, “Now, I’m gonna give you the first reframe, designers love reframes.”

Did you see and hear how he totally nails it? A perfect landing. He doesn’t even smirk. If you weren’t in on his brilliance, you might not even realize he was joking. He’s just that good.

Now, you can pay Burnett and Company $950 or more to take trademarked “Life Design” workshops — like this one, Designing Your Life for Women — though it’s not clear if the rumors are true and these are actually improv comedy classes or if Burnett just decided to take advantage of people who are stupid enough to believe that self-help banalities put in other words as Design Thinking could somehow improve their lives. My own guess is that these are comedy seminars, though. Just read this description: “We will focus on balance and energy, use ideation techniques to help get you unstuck, build Odyssey Plans for three potential futures, and define ways to prototype the compelling parts of these futures.”

Burnett has become the first comedian of the emerging and uncertain Post-Innovation-Speak Age. His wry voice is one of wisdom. He’s showing us the path away from bullshit and away from a juvenile picture of culture. As some book once said, “When I was a child, I talked like a child, I thought like a child, I reasoned like a child.” Burnett is imploring us to put away our childish things, to donate our Star Wars toys to Goodwill. It’s why his fall-down-laughing “reframe” jokes work so flawlessly. Burnett’s saying that we have to move beyond a moment where we put old wine in new bottles and call it genuine progress, that we have to move beyond this hollow era of repackaging. Burnett is reminding us that, for whatever reason, God did not fill his promised land full of Juiceros. He’s arguing that we shouldn’t pretend that we can boil education and, like, human life down into five-point diagram for selling shit. What he’s telling us is that it takes so many years of training, discipline, and hard work to even recognize something that is genuinely new, let alone pull it off.

Burnett is also pushing us to move beyond Design Thinking’s lipstick-on-a-pig conception of innovation. For instance, there is the question of where the pig came from and how to maintain and care for the pig so that it lives a long, healthy, happy piggy life. Burnett is begging us to adopt a mature, grounded, realistic picture of ordinary human life with technology. It’s the view of technology you get from authors who write books for grownups, like Ruth Schwartz Cowan’s More Work for Mother and David Edgerton’s Shock of the Old. It’s the conception of technology Andy Russell, many others, and I have been trying to explore through The Maintainers, an international research network dedicated to studying maintenance, repair, upkeep, and all the mundane labor that keeps the world going.

For all of these reasons and more, we’ve recently adopted Burnett as the Patron Comedy Saint of The Maintainers. I mean, how could we not? Virtually everything that comes out of his mouth is hilarious. That dude SLAYS!!!!!!!!!

(Update: If it’s not completely obvious, Bill Burnett is not a comedian. He’s selling these silly ideas and making money off them. I wanted to joke that I appended this little note about Burnett because readers have been waiting for Burnett to show up at their local comedy club. But the reality is that members of Stanford community are really upset by Burnett’s antics and the damage it does to Stanford’s reputation and learning environment. They want to make it clear: this is no game, and the harm it does isn’t funny.)

I wrote this essay for my friends, many of whom sent me ideas, anecdotes, jokes, and links for it. God bless them, every one.

Poor tables. Where did they go wrong?

After being the bread and butter of the web for most of its early history, tables were cast aside by many designers for newer, trendier layouts. But while they might be making fewer appearances on the web these days, data tables still collect and organize much of the information we interact with on a day-to-day basis.

For instance, there’s what I consider to be the mother of all tables: The United States’ “Harmonized Tariff Schedule,” a table that stretches over 3,550 pages and lists every single good that can be imported into the US, including such thrilling entries as “Men’s or boys’ overcoats, carcoats, capes, cloaks, anoraks (including ski-jackets), windbreakers and similar articles (including padded, sleeveless jackets).”

The ire raised by data tables is due, no doubt, to just how awful they can look when they’re not well designed. The design of a table is its linchpin: if it’s done right, it makes complex data easy to scan and compare. If it’s done wrong, it can render information completely incomprehensible.

So let’s do it right, right?

Know your numerals

Not all numbers were created equal. I’m not talking about π and ∞ (though I often do, at parties); I’m talking about numbers that are either tabular or oldstyle, either lining or proportional.

Here’s a quick illustration of the difference between oldstyle and lining figures.

Oldstyle figures look nice in sentences, where they better match the size and spacing of lower-case letters; lining figures are more uniform, and reinforce the grid-like structure of the table.

The difference between proportional and tabular figures is not quite so obvious:

Proportional figures are designed to match the color — that is, the general sizing and spacing — of the typeface. Tabular figures, on the other hand, are all identically-sized, so that columns of numbers line up properly. While the difference may not seem great on the scale of one or two lines, using tabular figures makes scanning large tables significantly easier and less error-prone.

A technical note on using tabular lining figures

When designing, you’ll need to do a bit of work to ensure the numerals you’re using are the correct ones (tabular lining figures aren’t typically the default). Adobe Products have an “opentype” panel that can be used to set the figures properly, and CSS provides a slightly-cryptic syntax for enabling this feature. Beyond that, some basic googling should lead you down the right path.

But now for the bad news: not all typefaces have true tabular lining figures available. The ones that do tend to be pretty expensive. There are a few exceptions: The excellent Work Sans is a free typeface that has true tabular lining figures.

If you can’t find a suitable typeface that has tabular lining figures, a good fallback is monospace fonts — while they tend to have a more “source code” look, they’ll always be well-suited to displaying numbers in tables. Additionally, the new Apple system default typeface San Francisco has excellent tabular lining figures and looks great at small sizes.

Alignment Matters

3½ simple rules to follow:

1. Numerical data is right-aligned
2. Textual data is left-aligned
3. Headers are aligned with their data
3½. Don’t use center alignment.

Numerical data is read right-to-left; that is, we compare numbers by first looking at their ones digit, then their tens, then their hundreds, and so on. This is also how most people learn arithmetic — start on the right and move left, carrying digits as you go[1]. Therefore, tables should keep numerical data right-aligned.

Textual data is read (in English) from left-to-right. Comparing textual elements is typically done by sorting into alphabetical order: if two entries start with the same letter, the second letter is used, and so on. Trying to quickly scan text can be infuriating if it’s not left-aligned.

Headers, generally, should carry whatever alignment their data has. This keeps the vertical lines of the table clean, and provides consistency and context.

Center alignment causes the lines of the table to become “ragged,” which makes it much harder to scan entries, often necessitating extra dividers and graphical elements.

Consistent Significant Figures = Better alignment

One easy way to keep your tables properly aligned is to keep the same number of significant figures — usually the number of digits after the decimal — consistent within each column. Significant figures is a whole rabbit hole of a topic, so I’ll keep my advice here brief: the fewer sig figs you can get by with, the better.

Fewer, Clearer Labels

Providing labels to accompany your data is crucial. These pieces of accompanying context allow a data table to be read by a wider audience, in a broader set of circumstances.

Title

It might sound like conventional wisdom, but giving your data table a clear and succinct title is as important as any other design decision you make. With a good title, tables are portable: they can be used in a number of different contexts, as well as cited from external sources.

Units

The most common label used in tables is the unit of measurement for the data; often, it’s repeated along with every single data point. Instead of repeating the label, only include it with the first data point in each column.

Headers

Keep headers as short as possible; the design of the data table should be focused around the data itself, and long header labels can occupy a lot of visual space.

As little ink as possible

When deciding how to style the graphic elements of a table, the goal should always be to reduce the table’s footprint without losing structural fidelity. One of the ways you can accomplish this is by using as little “ink” as possible — that is, whenever possible, choose not to style an element.

Rules

If you’ve properly aligned the data points in your table, rules become redundant. The primary benefit they provide is in allowing you to reduce the space between elements, while still being able to differentiate between elements. Even when used, rules should be extremely light to not interfere with quick scanning.

Horizontal rules are the most useful, as they allow you to significantly reduce the vertical space occupied by long tables, making faster work of comparing lots of values or seeing trends over time.

One unsubstantiated opinion I have about rules is that zebra striping is bad. Really, really bad. Take it or leave it.

Backgrounds

Backgrounds are most useful when indicating differences in the domain of data: switching between single values and sums or averages, for example.
Highlighting values, providing additional context to data, or indicating changes in values from previous periods can be done without backgrounds, using graphical elements like ✻, † (one of my faves), or ▵.

Additionally, tables should be monochromatic. Using colors to provide organizational context or added meaning increases the likelihood of misinterpretation or error, and causes usability problems for those with impaired vision.

In conclusion

Tables might be boring, but they are such a major element of any data-rich document that they’re worth every ounce of design thinking we can apply to them. By designing more efficient, clearer, and easier-to-use tables, you can vastly improve the often-painful experience of analyzing and understanding large sets of data.

Further Reading & Inspiration

FiveThirtyEight has always been a great source of inspiration— they set their numerical data in a typeface called Decima Mono, which is specifically designed to fit lots of data in a small space.

Butterick’s Practical Typography is my go-to for all things typographical, and the kind of reference you keep multiple copies of — it’s so practical!

Lastly, no article on data design would be complete without an Edward Tufte shoutout. His insightful writing on design is indispensable.

[1] For other interesting approaches to arithmetic, check out how Japanese children use a Soroban or how lattice multiplication works.

Special thanks to kontur, Nathan D Huening, Robin Rendle, Scott Dawson, Karen Bachmann, and Kelly Jepsen for catching errors in this story.

Design Better Data Tables was originally published in Mission Log on Medium, where people are continuing the conversation by highlighting and responding to this story.

An attempt to build a font database with opentype.js

Even years after Avatar’s release, there’s one thing Ryan Gosling just can’t get over: the choice of the movie’s logo font “Papyrus”. In the parody produced by Saturday Night Live, the designer of the logo opens the font menu, browses the fonts one by one, and randomly decides to go with “Papyrus”.

The seemingly mindless choice of a font is a general problem with font menus: there are either too few or too many options.

On one hand, a limitation to system fonts, as seen in the video, can lead to a bad choice because there simply isn’t something better installed.

On the other hand, web font libraries with hundreds or thousands of fonts can be quite overwhelming and lead to a paradox of choice.

Dinner for none: The font menu’s bitter taste

The average font menu presents a list of available fonts, sorted by name, but completely unrelated otherwise: A typeface designed for bold headlines is followed by one designed for small user interfaces and then a fancy script typeface made for wedding invitations shows up. Now you either get trapped in a time consuming process of scrolling through the whole list from start to end or you simply decide to pick the first best match from the upper part of the list and call it a day.

This is obviously not an interface made for systematic exploration — but infinite surprises. While I like to be surprised, I also like to influence my odds.

A systematic approach to finding typefaces

There are various ways to limit the options. Before I dive into parsing font files, glyphs and metadata tables, let’s first have a look at classification, curated lists and then anatomy.

1. Classification

Early in design school I’ve learned about the history of writing and practiced calligraphy to understand how writing evolved and how tools had an immediate impact on the design of type faces.

This lead to sophisticated systems for classifying fonts based on their appearance throughout history. The simplest classifications are serif, sans-serif, monospaced, script and display typefaces. We can usually find those classes in form of filters on any font website:

Those simple filters might still give us too many options. That’s when more specific terms such as transitional serif, humanist serif or blackletter can be introduced to differentiate typefaces of the class serif.

Sometimes those subcategories are available as tags. But sometimes they just don’t exist in such detail. Maybe there are too many categories? Maybe users don’t understand all those options? Maybe there is just no complete and consistent data available?

2. Curated Lists

Another way to put order into the chaos is to rely on the knowledge of others: Human-curated font lists. We can find those for example on Fontshop. There you can find collections based around a decade in history such as “1930”, based on similarity such as “Helvetica Alternatives” or application specific lists like “Branding” or “Newspapers”.

Similar lists can be found on Typekit, TypeWolf or FontsInUse. I think those lists are great and I encourage everyone to start making their own lists with fonts you have already worked with or seen in application. It will pay off in the future to have those references.

3. Anatomy

The most complex way to look at typefaces is to focus on their design details and to try to understand what makes a typeface good or special. Fortunately, there are books on type design, typefaces and typography. They can teach us how to make typefaces, how to choose them and how to use them.

One of those books is “The Anatomy of Type” by Stephen Coles. A few years after design school, this book was a refresher that reveals details about 100 well established typefaces. Stephen Coles uses terms such as x-height, width, weight, ball terminals, serif style and others to describe the quality of typefaces.

After looking at those 100 typefaces I thought: what about the rest? What about the fonts on my computer? And the ones on the web? What are their xheight, width, weight and contrast? How can I find out?

Inside a font file: Lack of meta data

Before I started coding, I was hoping that I could find out about the properties of a font in an easy way. In theory, every font file comes with a variety of metadata tables that contain information about name, author, language and visual characteristics of the typeface. Width, weight and font family class are the obvious ones. But also information about xheight, cap height, average char width, ascenders and descenders could be found. Another set of metadata called Panose describes even more properties such as serif style, proportion, contrast and many more. Using font design apps such as Glyphs, anyone can inspect fonts to view this information:

But the availability of this information depends on the work that has been put into making the font. While some fonts provide a lot of information, this isn’t always the case, especially not for free or open source fonts such as the ones from Google Fonts. But even if information is provided, it’s not necessarily consistent or complete enough to make comparisons based on it.

DIY: Parsing fonts with opentype.js

So in order to classify and compare typefaces myself, I had to take a close look at font files and find automatic ways to extract information. Fonts are available in a variety of file formats, but eventually they are almost always available as TTF (TrueType Fonts).

Other formats are OTF (OpenType) that includes information for additional features such as ligatures or WOFF (Web Open Font Format) that can compress the font and store additional meta data.

These days, thanks to Frederik De Bleser’s opentype.js, we can inspect font files using JavaScript in a web browser. Opentype.js gives us access to vector information of all the glyphs included in a font file and it also provides access to key metrics and metadata tables.

A database of characteristics

In the following section I will describe how I measured contrast, x-height, width and weight of all fonts provided in the Google Fonts Library. The same methods could be applied to other font libraries such as Typekit or fonts from your computer.

Stroke contrast

The contrast describes the ratio of thin to thick strokes. There are typefaces with little stroke contrast, e.g. slab serifs or many sans serif typefaces designed for user interfaces, e.g. Roboto or San Francisco. There are others with a lot of contrast, such as Bodoni or Didot. To measure the contrast, we can trace the outlines of an “o” and look for the smallest and largest distances between inner and outer shape.

It’s a simple and comparable letter shape that almost always consists of two paths. It’s a good candidate for estimating the contrast of a typeface. (Side note: While seemingly simple, the shape of an “o” is actually quite hard to draw well, because the stroke needs to smoothly grow and shrink between thin and thick.)

opentype.js provides convenient ways to get path data to draw characters to a SVG element. I actually draw inner and outer paths separately. Then I used an algorithm that travels along each path and measures the distance at each point. We can then calculate the ratio between the longest and shortest distance and voila — we have a comparable contrast measurement.

x-height

The x-height is an important characteristic that can be an indicator for legibility and perceived size of a font. It is usually measured at the top of a lowercase x.

opentype.js provides us with the needed measurements, namely yMax for any glyph.

In addition to the absolute measurement, it might be useful to also compare the x-height to the height of the ascenders. Thus, we can get percentage values such as “the x-height is 60% of the uppercase letters”.

To make the values comparable (some fonts use 1000 unitsPerEm, others 2048 unitsPerEm), it is necessary to normalize the values and map them to a range of 0–1.

Width / Proportion

With this value I try to grasp how narrow or wide a font is. Is it rather condensed or extended? One idea I had was to measure the width of an “M”. But to make those comparable, one would need to put those into context of the overall size or the x-height. Some typefaces also might have very special “M” glyphs that don’t represent the rest of the typeface.

Another idea is to calculate the average glyph width using a sample word like “Hamburgefontsiv”. While this works quite well, it also would need some normalization in respect to the overall design and height of the typeface.

Another approach is to look at the proportion of an “o”. This gives suprisingly good values for comparing the widths of fonts.

Weight

To measure the weight, I render the lowercase „o“ character to a HTML canvas element, fill it black and paint the background white. I then measure the ratio between black and white pixels. A script or hairline font will show very little values, while a very heavy blocky font will show high values. This gave me okayish results, but I want to improve this by measuring actual stems of glyphs in the future.

Spacing

When all glyphs of a typeface have the same width, they are called monospaced. Important here is, that we can’t necessarily look a the glyphs themselves to determine the width. Even in a monospaced font, a dot character takes less visible space than a “m”. Thus, we need to take into account the advanceWidth property that describes the invisible width around a glyph. Here we can find out that Google Fonts uses monospaced as a style classification, but not to indicate the technical property. Fonts such as Lekton or Libre Barcode are not listed as monospaced, but technically they are.

Similarity

Once we have a table of values, we can normalize those and then compute distances to see how similar fonts are. I implemented a very basic version of it that isn’t terrible, but could be better with higher accuracy of the data. Also, we might perceive similarity different than an algorithm that treats every characteristic equally. In that case, we might need to weigh some properties more than others.

Demo

I’ve built an interface to make the database accessible. Fonts can be viewed in a grid of varying size to get an overview over all fonts or to take a look at details of a few fonts.

Fonts can be sorted by weight, x-height, contrast, width, name and number of styles. Depending on the sorting criteria, adequate glyphs are shown.

Area charts show the distribution of values and can be used to filter out certain values. Each font has a detail view with a few samples, glyphs, metrics, Panose information and similar fonts.

Explore the dataset
https://getflourish.github.io/anatomy-of-typefaces/
For some reason some fonts fail to load in Safari, so I recommend to use Chrome.

Screencast
https://vimeo.com/239318934

Findings

The dataset invites one to explore and find similarities and irregularities. Setting low contrast and serif will return all the slab serif fonts. Low x-height will give us mostly handwritten or script fonts. Very high values often indicate all caps typefaces.

Misfits
Selecting the lower or upper ends of the spectrum will often return very weird designs. They mostly fall into the category display.

Ugly differences
The grid overview reveals the awful differences of baselines and alignments. Some fonts are radically off the grid. And even with subtle differences, it becomes clear that a simple 1-to-1 font substitution is almost impossible — with the exception of some popular fonts that all seem to share a similar skeleton.

Average is good
It’s interesting to see that commonly used fonts we consider to be good, all fall into a similar subset. By adjusting the filters, I can cut down the list to less than half and all the popular fonts will still be there. Selecting the average ranges is a simple way to filter out the misfits and extremes.

Forked Fonts
We can also find fonts that look exactly the same as others but with different names. Some of those are forks that extend the character set to support additional languages, e.g. Alegreya & Sahitya.

Number of styles
Above all, the number of styles a font has is a good indicator for its quality — at least as long as designers still need to make a lot of effort to design various weights and styles. Variable fonts are on the horizon and infinite customization may be the future. But until then, it’s good advice to work with font families that have multiple styles. Thus, sorting the collection by number of styles is a fast way to get an overview of the best fonts available.

Summary

This is a complex way of looking at font exploration. Ultimately, the quality of results depends on the quality of the fonts and the data around them. Only browsing Google Fonts is very limiting as their overall quality isn’t known to be the best in class. I’ve already started to run analysis on the Typekit library and ultimately met new challenges of user interface performance when previewing so many fonts. Such an undertaking requires proper caching and preloading strategies. But I don’t have to go that far just yet.

With no AI involved, I now have a good understanding of what’s inside font files and what’s missing. The more and more I got into this, I realized how massive the field of font technology is and that I’m only getting into something that’s been done for decades already.

Possibilities

With such a dataset, one could do more things:

• find fallback fonts with a similar width or style
• automatically adjust font sizes and line heights based on x-height
• find font combinations based on similarity or difference
• build a custom font menu for Avatar’s poster designer
• …

Try the app
https://getflourish.github.io/anatomy-of-typefaces/

Watch screencast
https://vimeo.com/239318934

Before I publish the raw dataset I want to improve the analysis and try to add more characteristics. If you have any ideas for improvement, don’t hesitate to leave a comment. Thanks for reading!

Further reading

Panose Classification Metrics Guide
The guide from 1991 describes in detail how to measure individual glyphs to derive comparable metrics. Unfortunately those measurements need to be taken by hand and can be quite time-consuming.

Taking The Robots To Design School, Part 1 by Jon Gold
Already in May 2016, Jon Gold wrote about his approach to analysing fonts in depth, covering topics such as rule based design, artificial intelligence and the relevance of such datasets for design tools.

Google Fonts Tools
A set of open souce tools that are used to analyse fonts for use on the Google Fonts website. You can find similar algorithms there, but also other ones that for example determin the italic angle of a font.

Font Bakery
Font bakery is a set of Python tools that runs checks on TrueType files, and Google Fonts related metadata files.

Appendix

Q: Why didn’t you use data from web font services?
A: Services that provide fonts such as Typekit, Google Fonts, Fontstand, Fontshop, MyFonts, etc. all provide their own set of filters with more or less fine control. The APIs of those services also differ in the amount of information that is available for each font. Usually the category is provided, but other information is either left out or not compatible between the services.

The following example shows, that all we get from Google Fonts Web API for Roboto is its category sans-serif, variants and subsets. https://gist.github.com/getflourish/d79836b0bebb6b44f76389b623fd7dc1

The Typekit API provides more information about width, x-height, weight, classification, contrast, capitals and a recommendation.
https://gist.github.com/getflourish/8c7c9ab4ddcf422cbb77866b5cf61575

As you can see, in the example API result, the information about a font is provider-specific. In order to be more flexible and independent I started to do my own analysis.