Visualisation of mouse movements when I was working in a design tool back in 2009. What’s the intent behind each click, drag or nudge? https://www.flickr.com/photos/fl0urish/4155725071/in/photostream/

Designing with intent

Florian Schulz
Nov 6, 2016 · 8 min read

In 2016, I’ve seen an ever increasing number of style guides and articles on design systems on the web. More and more web and interface designers started to document their color palettes, text styles and component libraries that help them with consistency and scalability.

While a lot of effort goes into documentation and implementation of design systems, I think we actually need some tools that help us create such systems in the first place.

Personally, I’m looking for better ways to design relationships and have means to express and communicate my design intentions.

I feel that the next generation of design tools would benefit from a solid foundation that promotes a systematic approach to screen design. These tools will likely need to work different than we’re used to, but it might also make us more productive and reduce the time for house-keeping.

Building my own tools

While Modular Scale for Sass and CSS calc() are simple to implement technically, I struggled to find the right values for all the parameters that are involved.

I felt tired of guessing and typing values, reloading the page to see changes, resizing the browser to see how it behaves on various screen sizes, etc. I felt rather trapped in a mechanical process, than being empowered by the system. I thought that I needed a simple interface to better understand the dependencies and behaviors of the different parameters. I had to see this in real-time.

How it works

Parameters, not values

Scrubbers make it easy to explore the full range of possibilities with less effort than input fields or keyboard shortcuts

It’s important to note, that sizes and contrast depend on the overall design and white space. While big contrast can look great on a big screen, the same contrast ratio will look off on a small mobile device screen.

This means, that simply making everything smaller on mobile (e.g. decreasing the base font size of the HTML element) isn’t enough. Titles will be too big compared to the available screen estate. We can improve that by using less contrast for the modular scale on our minimum end.

Interpolation

Instead of thinking about arbitrary breakpoints and fine tuning each font size for each breakpoint, would it be enough to just think about the extremes and how they play together? How does it feel to design minimum and maximum in parallel?

Designing with those “multiple masters” is common in the making of typefaces. By designing two extreme weights (e.g. black and thin), you are able to interpolate in between and generate as many weights as you want (e.g. bold, regular, light).

Multiple weights of the lowercase letter “k” overlapping. “TheSerif” designed by Luc(as) de Groot.

Usually, the visual quality of interpolations is not guaranteed to be perfect and manual adjustments by eye are required.

Such a combination of algorithmic automation and human fine tuning seems to be a good approach to me. Computers assisting with design, not taking over.

I believe that interpolation can be a useful method to deal with other complexities such as designing for many different devices, screens, light conditions, and other contexts that we cannot fully control or anticipate.

For more information on that topic of interpolation, I recommend reading “Interpolation Theory” from 1987 by Luc(as) de Groot.

Snappy previews

Steps

Limitations

Two different fonts with technically same size and line height often result in different perceived size, number of lines, and paragraph contrast. Here: “Avenir Next” on the left and “Alegreya” on the right.

In reality, we would also need to be able to bind our system to HTML containers instead of relying on the width of the page. Currently, this is only possible with JavaScript and using libraries such as EQCSS. There is a lot more that needs to be done to make such a system more generic and bullet proof for various use cases.

So nope, you can’t:

  • Choose fonts
  • Change spacings

Working with systems and limitations

Think of it as a design police (or a design linter) that ensures that you stay within the system or whatever rules you agreed on as a team. Instead of freely choosing from a continuous range of font sizes, your tools would automatically snap when you resize. Similar mechanisms are imaginable when working with color, spaces, and other properties.

Prototype of a design tool that snaps font sizes to a defined range of sizes

If that sounds interesting from a CSS point of view, you should check out “Dialog Size” by my co-worker David Aerne.

The concept of contrast

I also believe that contrast is a powerful way of thinking about various design relationships. It doesn’t only apply to a typographic scale, but also to space and color.

For example, instead of picking a text color that “looks good” and is legible, we could simply define a desired color contrast (e.g. 4.5) and let the design tool figure out the actual color based on the background color of the text.

That way we have aesthetic control (“high or low contrast”) while also ensuring legibility.

Build your own tools

All I get from those hacks are usually learnings. It takes a lot more effort to turn those ideas into real tools that work in production. But I still want to encourage anyone to start building your own (small) tools if you can. Help yourself!

Complaining about a lack of features won’t bring us anywhere soon. That’s also the reason behind the many Sketch plugins I developed. (Color Contrast Analyser, Line Height, Mate, Style Inventory, Consistency, …).

In my opinion, the fact that Sketch has a completely open API that plugin developers can build on, is the most powerful feature. The team behind Sketch basically accepted that they can’t solve every individual’s problem. But they made it incredibly easy to use our creativity to build tools on top of a solid foundation.

Try the tool

Credits

Modularscale.com is a tool that previews modular scale as a water fall of text. I think the website has made the concept a lot more popular. Personally, I find the type of visualisation only partially helpful. I like to see the system in context (example article or a real project). A tool by Tim Brown and Scott Kellum.

GridLover is a tool that also helps you establish a modular scale including a vertical rhythm. Essentially a better and more complete version of my experiment, but without the interpolation. I love how Tuomas Jomppanen and Ville Vanninen integrated scrubbers inside the CSS panel!

Thanks to Isabel Plana.

Florian Schulz

Written by

Pushing boundaries, not pixels. I make design tools, apps & bagels. Previously @ginettateam. Studied @idpotsdam. Former Intern @Behance, NYC.