A memo to product and website designers

With modern CSS properties including Grid, Flexbox, Multi-column, and Shapes, designers have countless opportunities to make diverse, and engaging designs. Sadly, many of us haven’t had the memo which gives us permission to make more interesting work, so I decided to write that memo. Feel free to modify the message for your company or organisation and of course, circulate it to the designers on your team.


Memo to designers

Team


For years we’ve told each other the web isn’t print. We’ve told ourselves the things we admire in other design media cannot—and sometimes should not—be used online. We needn’t think that anymore and I’m writing to tell you about five design techniques from other media we can accomplish on the web today. These will make the web more interesting to work on and for people who use what we make.

Aligning elements to flowlines

In print media, it’s common to see elements aligned along their bottom edges. For example, we often see captions aligned to the bottom of an image instead of its top.

A more interesting design aligning elements to the bottom. (Examples from Art Direction for the Web by Andy Clarke.)

In the past, aligning elements to anything other than the top of their boxes was difficult to accomplish, but today we can align items easily to the bottom, center, or top using just a single CSS Grid or Flexbox style. There’s also no reason why captions need to stay underneath images as with a couple of lines of CSS we can place them above, left, or to the right of a picture.

Bespoke and diverse grid layouts

Frameworks including Bootstrap made layout easy and their off-the-shelf grids were useful when implementing responsive designs because their twelve columns are divisible by four, three, and two. Sadly, using the same grid time and time again meant our designs were often barely distinguishable from one another.

A diverse range of layouts are now easy to implement. (Examples from Art Direction for the Web by Andy Clarke.)

Today, modern CSS properties including CSS Grid and Flexbox make it just as easy to implement a diverse range of layouts including column, compound, and modular grids. Designing our own grids will help make our products and websites more distinctive.

First-lines and initial letters

Just like in the offline world, attention to typographic details makes a big difference. Drop and initial caps can be both decorative and useful in that they mark where someone should start reading. Initial caps sit on the baseline and drop caps fall below it.

Left: Emphasising the first-line of this first paragraph. Right: Study manuscripts from centuries ago and you’ll find that one of the most distinctive aspects of their design was the use of large capitals. (Examples from Art Direction for the Web by Andy Clarke.)

On magazine and newspaper pages, you’ll often find the first word or line in the first paragraph emphasised in some way. Sometimes set in bold, other times uppercase. Drop caps, initial caps, and first-line treatments are rarely seen on the web but are easy to accomplish using CSS.

Irregular shapes

One of the complaints levelled at website design over the years has been that it’s boxy and rectangular. This was true, to an extent. However, boxy layouts needn’t now be the norm. Organic shapes add movement, which draws people to them and helps to connect an audience with a story.

Top: A simple polygon clips this photograph to form an arrow which points to the content. Bottom: Clipping paths can turn images into unusual shapes like the coastline of Australia. (Examples from Art Direction for the Web by Andy Clarke.)

Thankfully, we don’t need to struggle with hacks any more, because CSS clip-path and Shapes make using irregular shapes more accessible for the web.

Wrapping text around shapes

One aspect of print design we wished was more easily achievable on the web was wrapping text around irregularly shaped images. For years developers dreamt up elaborate hacks using presentational HTML in a series of attempts at emulating print layouts. Thankfully, we don’t need to struggle with hacks any more.

Above: Text wrapped around a shape can make a design appear more polished. (Examples from Art Direction for the Web by Andy Clarke.)

CSS properties like clip-path and shape-outside give us countless opportunities to use art direction to capture someone’s attention and then keep them engaged.

Sources of inspiration

Of course, there are more than those five ways to make designs which are engaging and interesting. Finding those ways is your job as a designer, but here are five places you can look for inspiration:

  1. Editorial design
  2. Graphic design
  3. Magazines
  4. Posters
  5. Literally everywhere other than the web

What do do next

  1. Experiment with new and unexpected design ideas. Use your imagination without limiting yourself to making designs you’ve been told in the past were difficult to implement or inappropriate for the web.
  2. Share what you make without feeling self-conscious that what you produce has value. You never know, often the simplest idea can start you and others down an unexpected path.
  3. Write about what you make—preferably on your own blog—and describe what you were trying to achieve, the inspiration you found, and the steps you took along the way.

Modern web technologies have opened the door to opportunities to be creative, not for creativity’s sake but to help us express our point of view and that of our companies and customers. They help us to convey important messages more clearly through design and tell more interesting and engaging stories. Through clever use of these technologies, we can make designs which are distinctive, opinionated, and stand apart from framework-based designs and generic templates. It’s important to remember that these technologies cannot do this alone and we also need creative thinking to bring ideas to life.

Now’s the time to start thinking differently about how we design for the web. Today’s the day we’ll all look back on a turning point in the history of our medium.


Sincerely


____________________


My new book, Art Direction for the Web is available now in beautiful hardcover and digital formats from Smashing Magazine. Buy the book and stream the video course.


Availability

I’m available for hire to consult on and design products and websites. Based in North Wales, I travel regularly to work with clients world-wide.

Available from January 2020

Talk soon

For work enquiries email

Or call us on +44 (0)1745 851848

Studio

Stuff & Nonsense Ltd.
Eversleigh, Lon Capel,
Gwaenysgor,
Flintshire, North Wales,
LL18 6EJ, UK