Image for post
Image for post

Two years ago, I published “Designing with Intent” in which I wrote about design tools that can capture the intent and relationships of a design in addition to mere properties and values.

Programming design

I think programming can be part of a design process, but it should not require switching to a text editor to do so. Creating abstractions and establishing intentional relationships are concepts that are too powerful to stay outside of a designer’s toolbox. They enable working with a dynamic medium and taming the uncontrollable.

It’s about the relationships, the boundaries, the extremes, and everything in between.

But in order to do so, we need tools to free our mind. We need tools that get out of the way. We need tools that allow us to design at the speed of thought. We need tools that are fluid and adapt. We need tools that suit us. Thus, we need to shape our own tools so that they can shape our work.

Introducing: Ratio

Instead of waiting for others to build a better design environment, I’ve created it myself. It’s called Ratio. It combines modular scales, fluid typography, color transformations, design tokens and the layout power of modern browsers.

Ratio equips designers with the same tools and concepts that developers use to implement complex design systems. Take creative control over typography, color, time and space by using variables, scales and functions. By appreciating the abstract and rationale, designers get the chance to explore more and worry less. Discovery instead of pixel pushing.

Under the hood, design in Ratio is powered by CSS. Thus, you can do everything that CSS can do. It’s certainly not the first tool doing that, but my approach is to be slightly more transparent about the underlying code and utilize it. If you want, you can always do some hand-coding in between.

The power of CSS

Building a tool on top of CSS comes with a lot of built-in responsive design features. Just think about all the relative size units that you can work with: %, em, rem, vh, vw, and many more that enable us to encode relationships for dynamic design systems.

  • em — a size relative to the element’s font size
  • rem — a size relative to the root element’s font size
  • vh — a fraction of the viewport’s height
  • vw — a fraction of the viewport’s width
  • vmax — the larger value of either the width or height of the viewport

Auto-complete for design

Unfortunately, CSS is still a big black box to many since there are so many properties available and some properties are tedious to type. The good news: Ratio knows about all those properties and auto-completes them for you. It also provides abbreviations for the most commonly used properties, so you can just type “ff” to find “font-family”. Developers may know this from Emmet.

Image for post
Image for post
Image for post
Image for post
Box-shadow design tokens within the CSS inspector.

Design tokens

For many years, web developers have been using pre-processors like Sass or Less to extend the capabilities of CSS. A main feature that came with those were variables. This fundamental programming concept allowed developers to write more maintainable code. Variables have been useful to store color values, breakpoints, spacing values, timing values and typographic features.

Image for post
Image for post
The library shown design tokens for various properties. Shown here are colors.

Fluid Typography

While design tokens can be added manually, they can also be generated, scaled and interpolated across breakpoints. This enables the setup of modular scales and fluid typography. Instead of messing with individual font sizes of paragraphs, headings, blockquotes etc., you simply define base font sizes and scale ratios and let interpolation do the rest.

Image for post
Image for post
Setting up modular Scales in Ratio that can help with responsive typography. Font sizes can scale fluidly and you can control a whole layout by adjusting a few settings and ratios.

Inspectors in Ratio

Ratio doesn’t try to just give you a single all-purpose design inspector, but instead offers multiple different perspectives on code. That way, Ratio supports both sides of web design: exploration and engineering. With Ratio, you are in full control over individual properties, but you are also able to set up systems that orchestrate more than one thing at a time.

Color Canvas

For example, the color canvas visualizes connections between colors and can be used to transform from one color into another. As known from CSS pre-processors, colors can be darkened, lightened, shifted in hue, desaturated and more. Those are powerful mechanisms not only for developers that want to write less code, but also for designers that want to explore color combinations and design with theming in mind.

Image for post
Image for post
The canvas shows a base color (blue), a hue-shifted color (yellow) and a darker blue color used for the card on the bottom.
Image for post
Image for post
Initial concept of showing color relationships between palettes. The UI for creating this inside Ratio today (screenshot above) looks different, but the concept remains the same.

Driver Inspector

Another example of visualization of code is the driver inspector, an interface that works similar to a timeline in video editing tools. In addition to time, it can be used to manipulate values based on other variable inputs such as window size (breakpoints), scroll position (parallax scrolling), mouse position and more.

Image for post
Image for post
The driver inspector shows the change of values across breakpoints, time, scroll position and other variable inputs.

CSS Inspector

When you select a layer in Ratio, you can see its related CSS declarations in the CSS inspector. That way, you have full access and control over styles — no limits. It’s like writing CSS to a file. But, compared to text editors, Ratio filters out the noise of other selectors so that you don’t need to scroll, jump and search around in your CSS files.

Image for post
Image for post

Style Dial

The style dial is the gestural counter part to the CSS inspector. It’s a compact interface that combines the most important aspects of typography, color and space into a radial menu. Instead of typing values, it allows you to spin/scroll values up or down while keeping your eyes on the content. The contextual menu has been designed for freestyle design exploration without constraints.

Image for post
Image for post
The style dial controls the line height, font size and font weight by scrolling up/down. Using the mouse to change values and keyboard to switch between properties is a fluid and precise way to control numeric values.

Extensibility

While Ratio already offers many different perspectives and interfaces on CSS, there are many more possibilities and web developers have already built tools for specific tasks.

Image for post
Image for post
Meodai’s harmonious color palette generator in sync with Ratio.

A broader understanding of code

For now, we’re used to call code what is plain text in text files that get compiled and can run in a browser. But any form of communication is code. Any word we say, write, any image we draw, encodes information. It’s up to the other to interpret and understand.

The future of Ratio

Ratio is currently in closed Alpha with everything presented here being functional as shown in the video. In a future story I will write about technical aspects of Ratio and how it fits in with your existing projects and workflows.

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store