Kilian Valkhof

Design tools for 2018

In the past few years tons of new web design tools came out. The old model of static pixel-based comps of screens is slowly being replaced with more modern ideas of designing. These new design tools use constraint based components, or even entire lay-outing systems, they use machine learning to suggest you colors and fonts, they let you version your designs or let you design component systems instead of static pages.

With these new concepts, we are slowly bridging the gap between design and development. As someone who has a foot in both the design and development side of things, this is incredibly exciting.

Here’s a list of the design tools that I came across and that I think will be useful for any designer that wants to improve their craft. I sorted them in a couple of categories, but most tools here could easily fit in multiple categories. For clarity, I only mention each tool once.

This list is by no means exhaustive, nor have I tried each one of these tools (yet!). I’m sure I missed a bunch of really cool tools as well, so, please do @ me if I need to add new cool tools here!

Typography #

Web design is 95% typography, so you better get it right. These tools will help you pick fonts, then create the perfect set of sizes and settings for your design.

Fontbase
Fontbase is a really quick, cross-platform and free font manager. It’s fast, provides a nice overview and lets you install google fonts with a single click. I wish it did more when indexing the fonts (such as categorize them) but it’s a useful tool regardless

The anatomy of a thousand typefaces
choosing a typeface is hard, and finding a nice typeface in most design tools is an exercise of patience. Most tools just give you a single dropdown, with the fonts ordered by name. Good luck! The anatomy of a thousand typefaces, now just an experiment, lets you search and filter your fonts based on their properties: The contrast and weight, the x-height. need a thick font with a high x-height? Just filter down and choose from a much smaller list. I can’t wait for this to index the fonts on your hard drive.

Fontjoy
Picking a font is difficult, but picking a font pairing is even more difficult, and you often revert back to ‘tried and true’ combinations. Fontjoy lets you find novel combination by using deep learning, using a neural net to find combinations ‘that share an overarching theme yet have a pleasing contrast.’

Archetype
Once you have your font pairings, them comes the real work: Creating a nice variation of font-sizes, weights and line-heights for your headings and paragraphs. Of course, these should all scale on a proper vertical rhythm as well, and have a pleasant amount of space around them. Archetype lets you quickly design and style your headings and paragraphs, with a live preview and export to CSS, or to Sketch.

Modularscale
If archetype gives you too much options, then Modularscale quickly gives you, well, a modular scale of font-sizes to use. Select a base size, a ratio, and this site will give you a nice scale of font-sizes to use.

Typeshift
Are the many, many fonts in Google Fonts or Typekit not enough? Why not tweak your own variable font into something that’s perfect for your design? With Typeshift you can prototype and live preview your font, then export it to use on your websites.

Working with real data #

I think designing with fake content is the wrong approach. I thought that in 2007, and I think nowadays this is even more true when designing web apps. We don’t always have access to the real content, but we can at least use real values, or realistic data with the following tools.

Lists.design
A collection of all sorts of real data (addresses, headlines, file formats, realistic marathon times, names) to use in your designs. Available to just copy-paste, or download values as json and use that.

Tadviewer
A cross-platform, free app to quickly inspect CSV files. Got a large dataset from a client that you need to make sense of? Load it into Tad where it shows the data in a nice pivot table.

Prototyping/mockups #

“The time required to test an idea should be zero.“. While we might not all be able to train a neural net to map our rough sketches to the appropriate components in our component library, the following tools will speed up your prototyping phase.

Fermion
With Fermion.js you can create a block layout of your design and attach behavior to it to quickly create a low-fi prototype. It exports to working React components, so you can design and refine on top of your prototype.

TrueUX
TrueUX is not available yet, but is a series of articles detailing a prototype of ‘the perfect ux app’. They’re describing some really exciting stuff, and I can’t wait to play around with it.

File/version management #

If you’re working with designs, you have to deal with files and versions. Nobody want to figure out if they have to use homepage_v3.4_final_Final.sketch or homepage_v3.4_final_2.sketch, and nobody wants to keep track of half a dozen files either. Luckily it’s a lot easier to version vector-based designs, and there are a number of tools to help you with that.

Plant
Plant is a simple version control plugin for Sketch. It lets you create, update and sync sketch files among different people right from inside Sketch.

Abstract
Abstract is another tool that works well with Sketch and lets you share and version designs easily in a team. You can even branch your designs.

Kactus
Again for Sketch, Kactus is an app and interface that lets you use Git (and thus your own Git hosting!) to version and work with Sketch designs. It claims to bring all the power of Git to your design workflow. So that means merging, branching and pull requests for design.

Modern graphic design tools #

I am so happy that most designers (that I work with) have weened themselves off Photoshop. The current crop of vector based design tooling makes it really easy to create coherent web designs and share those with developers.

Sketch
This list wouldn’t be complete without Sketch. It’s been a few years in the making, but is now the best design tool when it comes to both web and app design. The wealth of plugins and the constant updates with exciting features (symbols, constraints, libraries) make it the best design tool out there. It’s a shame it only works on Mac, which means that designers on windows are getting left behind.

Adobe XD
XD is Adobe’s contender for modern design tool and it’s …fine. It works fine. If you’re on Windows this is a great option, but there aren’t many good ways to work together with developers if you use Adobe XD yet. It has simple prototyping built-in, which is a nice bonus.

Figma
I usually describe Figma as “multiplayer Sketch”, as multiple designers can work on the same design as the same time, and see each others update live. It also has a simple prototyping mode as well as rudimentary code export capabilities. Figma works in the browser and thus works on Mac, Windows and Linux. Personally, I switch between Sketch and Figma a lot. Sketch when I’m working on mac, and Figma when I’m working on Ubuntu, my primary OS. I really wish Figma released their desktop app on linux as well. It’s Electron-based so should be more than doable. Still, it works in the browser without much issues too. It’s free for most uses as well.

Gravit designer
Gravit started out as a free vector tool, but has quickly grown into a strong contender for web and other vector design, also sporting symbols, libraries and constraint based layouting for responsive design. Additionally, Gravit is free and cross-platform, so you should try it out.

Design tools with a layout engine #

All development platforms use some form of layout engine that automatically places elements on the screen according to a ruleset. So any time you design specifically for such a platform and are forced to nudge and move elements manually, you’re basically doing work that a computer does automatically, which is a waste of time and frankly, dumb. These design tools are the future.

Antetype
Even though the UI looks thoroughly archaic, Antetype actually has a really strong web-like design system that feels like it works with you to create a design. You should really check out the intro video they have on the site. Unfortunately, Mac only.

Webflow
Webflow does a little more than being a design tool, also giving you a CMS and hosting in the process, but it’s a very strong tool for designers that want to get more feeling for the way the web works. It very nicely combines a design tool-like interface with real web properties.

Framer Design
Framer started out as a way to create and test prototypes, often based on sketch designs, but has grown into its own design tool with support for constraint layouts and super strong prototyping and interaction capabilities. And of course, you’re working with real code in the process. Unfortunately, Mac only.

Subform
A CAD inspired design tool that brings a lot to the table: Responsive layouts, constraints, consistent styling and, something that’s difficult in almost all design tools: multiple states for your design components (think button vs. hovered button). It’s currently only available to their Kickstarter backers, and the betas show a ton of promise.

STUDIO
A web-based tool that’s based around designing (responsive) screens with sets of customizable components. It lets you plug in real data and generate UI based on it. Free to try and very powerful, but very light on documentation so you’ll need to figure it all out by yourself for now.

Interplay
Like STUDIO, Interplay lets you create responsive designs based on a component system. They’re in closed beta, so I haven’t had a chance to try it yet.

InVision Studio
This looks amazing. It ticks all the boxes: Responsive design, a layout system, prototyping, components, code export. If it works as slick as they show in the video then this might just well be the design tool to use in 2018. I hope to try it out on November 16th.

Component-based designing #

With the popularity of both React as well as atomic design, an increased focus has been placed on designing not just screens, but design systems, and in most practical instances, designing sets of reusable components with which to build your screens.

Compositor Lab
Compositor Lab is the front-runner when it comes to component-based designs. Thoroughly techy, it still looks usable enough for designers to pick up. Yes, Designers Should Code, but in Compositor Lab, they don’t have to. Provides an easy way to create and design various (react) components, and make alternatives and combinations. You’re already working with real components, so working with developers becomes straightforward.

Modulator
Decidedly smaller in scale, Modulator is a webpage that lets you quickly write out your (typographic) scale values and see a predetermined set of often-used components (button, list, card, etc) respond to your chosen sizes.

Storybook
This is more of a development tool, but I think we’ll see more of this sort of ‘programmatic design tools’ pop up in the coming year. Storybook manages your (React) components and shows them, with various states, automatically updated when you update your code.

Blur the line between design and code #

This section is a little Sketch-centric, but that is because it has the most, and the most interesting, plugins. These plugins let you import and export code into Sketch. This opens up a whole world of cooperation between design and development.

React-sketchapp
React-sketchapp lets you render react components in Sketch. This provides a sort of “complete truth” styleguide, as the rendered elements in Sketch are the real code. Requires some work to set up, especially on the development side (You have to switch to react-primitives) but I can see this speeding up the iteration cycle for designs and the creation of new pages with existing components.

html-sketchapp
Does the same as react-sketchapp, but it does it for any type of html. Doesn’t give a perfect representation but it’s a very useful tool to quickly riff off a design or to check consistencies with an existing design.

Sketch-to-react-native
This one goes the other way! Design your components in Sketch, then export them to svg and run them through sketch-to-react-native to generate React(-native) components ready to use. It uses machine learning to guess which parts of your component mean what and convert things correctly. How great is that?

Animation #

Animation is now an essential part of web design. It can make your design when done tastefully, or break your design when done inattentive. Many animation tools are very code-centric, so I only have one:

Spirit
I am eagerly awaiting beta access to this spiritual successor to Flash tweening. Everything I’ve seen so far has been really impressive, showing a great interface to hand-craft your animations.

Responsive design #

Designs for screens inherently mean designing for unknown bounds. For designers this means an extra level of complexity. A good designer doesn’t design the things they see, but designs the relations between them, so that it works for many screen sizes. This is a difficult thing to do, but there are tools to help you!

Browsersync
Browsersync hooks up all your browsers (including mobile ones) together. It will sync your clicks, scrolls and forms in all browsers, making it really easy to test a site in a bunch of different environments.

Polypane
Disclaimer: I made Polypane. A browser for web developers, it shows you your website in as many viewports as you want. It has a number of presets, syncs your scrolling, lets you generate screenshots of all your panes and has the awesome chrome devtools built right in. It’s in active development and there’s many useful and cool features coming up! Request an invite from the site.

I hope this list inspires you to try some new tools. Like I said, If there’s anything missing Let me know!