Category
Visual Design
Software Engineering

Published
Nov 1, 2019

Read
2 min

Tweet
Share
Comment

Greyscale HTML Mockups Trick

Introduction

Designers have an array of tools at their disposal today that were not available until fairly recently. Photoshop has long been superseded as a UI design tool by more dedicated ones like Adobe XD, Figma, Sketch, and others. These tools are geared toward and empower non-coders. This is great. For those that know how to code HTML and CSS however, many are even faster in comparison. This is due to CSS's cascading, HTML markup's copy-and-pasteability, and Emmet.

This article is for these coders.

With a fluency in HTML and a CSS library like Bulma, Bootstrap, Tailwind, or something similar, these coders can get a lot done quickly. In doing so however, the default colors used in these frameworks often become a discussion point and a distraction in pitches and presentations.

This is a waste of everyone's time.

Color is important, but each color's contextual relationship in the UI is more so regarding the visual hierarchy. Put another way, this means the saturation relationships are most important. Awareness of this also helps your decision making in the context of color blind users.

Regardless of lens, I have a simple trick to alleviate these waste-of-time tangents.

Greyscale Trick

Let's cut straight to it. Simply update your <body> with:


<body style="filter: grayscale(1);">

What does it do? You guessed it, your entire HTML mockup turns into a greyscale version with a single line of code.

Now you can focus on communicating your content, visual hierarchy, and layout design decisions without getting side-tracked on the personal color preferences of those in the meeting.

Trick Iteration

A mockup having an inline style usually is a non-issue. There are a few scenarios however where it is useful to have the flexibility of turning on and off greyscale mode:

  • Different audiences can be trusted to see the colors and not get distracted
  • Color decisions aren't framework defaults and are important to communicate in certain contexts

In these scenarios I recommend using the aforementioned .greyscale { filter: grayscale(1); } class in combination with some JavaScript. I typically setup a listener like so:


window.addEventListener('keydown', onKeyDown);

function onKeyDown(e) {
  // 71 is the "g" key
  if (e.keyCode === 71) {
    document.body.classList.toggle('greyscale');
  }
}

In fact, this code is embedded on this page. Go ahead and hit "g" on your keyboard. If you're a tablet or smartphone user sans keyboard, I got you:

Toggle Greyscale

Hope this trick is useful to you. If so, or if you have anything to add, just ping me on Twitter @derekknox.