Fonctionnalités

An art direction proposed for your site

As an option, the studio studies your trade, proposes three art directions, and the one you keep builds your page. How it unfolds and what it costs.

Updated · 5 min read

An art direction is the idea that holds a whole site together: what it should convey about your trade, and what follows for its palette, its typography, its motion and the tone of its copy. In the studio, it is an option. If you know what you want, you build your page yourself, and the copy is written from your description. If you would rather be offered a line to follow, the “Propose a direction” button, in the console, asks for one.

What it costs

The price is written on the button: 120 credits ($12), debited on click. They cover the two searches, the three directions and their comparison.

If the work fails, for example if no direction passes the checks, the amount is refunded, and the page stays as you built it. If the directions are written and you keep none of them, they remain available to you, and nothing is refunded.

First, two searches online

Before proposing anything, the studio looks into your trade.

  1. Usage: what visitors come looking for on the site of a trade like yours, in order; what everyone does; and an angle from which to stand apart, consistent with what you say about yourself.
  2. Visuals: what the sector’s sites look like. The colors that recur and why, the families of typefaces used, the way these sites open and move, and what has become a tic.

These searches serve to decide, never to fill the page. They bring back no figure, price, opening time, address or name: your description remains the only source of facts. Colors spotted at competitors are removed, so that no palette is taken from someone else. If a search fails, the direction is made without it.

Three directions, and a jury

Klein, the studio’s art director, then writes three directions. Each direction is composed for your description, with no catalog of ready-made styles: it has a name, and must declare at least three refusals, what it forbids itself. It is on these refusals that two directions truly part ways.

Each direction goes through checks before being shown to you. The contrast of its palette, in particular, is measured, for the text on the background as for the text of the action button. Below a ratio of 3:1, the direction is refused and rewritten. Between 3:1 and 4.5:1, it passes with a warning, which asks for larger text or an opaque background behind it. These are the two thresholds of the web accessibility guidelines: 4.5:1 for body text, 3:1 for large text (W3C, WCAG 2.2).

A jury then compares the three, ranks them, and proposes one. It also says when they are too alike. If your trade calls for only one right answer, it owns it; otherwise, the studio asks once more for readings further apart.

The whole thing takes several minutes. The studio shows the current step and the time elapsed.

What you see, and what you choose

The directions are shown side by side, under the title “Three directions, one to keep”. Each one shows:

  • its rank, and the word “proposed” on the one the jury prefers;
  • its name and its stance, the idea in one sentence;
  • the world it is drawn from;
  • its palette, in four swatches;
  • its refusals;
  • its typography, its first screen and its treatment of images;
  • what the jury sees in it, and what it costs in exchange.

Nothing is composed before your choice. “Keep this one” takes the proposed direction; each of the others has its own button, “Keep no. 2” for example. “Choose later” closes the panel without losing anything: the directions wait for you.

What the direction does to your page

The direction you keep governs the palette, the typography, the motion and all the copy, as well as the background film.

It also ticks the path for you: the background, the texture, the navigation, where the title sits, the sections, the contact and the footer. The conversation says what it chose, and why. Everything can be unticked, slice by slice.

Finally, it ticks “Let the studio create the images”: your images will be created in this direction, from your description. This box can be unticked too, if you would rather drop in your own photos.

Nothing paid goes out without you. The studio takes you back to the background slice: you start the shoot at the price shown on each render, then you write the copy, and the images entrusted to the direction are created at that moment, each at its own price.

When to ask for it

The direction is most useful when you start from nothing: no logo yet, no colors of your own, or several wishes that contradict each other. It puts three stances in front of you, and it is often by seeing what you reject that you know what you want.

It is less useful if you already have an identity: a logo, two colors, a typeface. Then build your page yourself, and give your colors in your description, or ask for them afterwards in an edit.

In any case, keep two landmarks:

  • Convention has its reasons. Visitors spend most of their time on other sites, and expect yours to work like them (Nielsen Norman Group, 2017). A medical lab in white and blue stays readable, and reassures. Departing from convention is done knowingly, and that is what the searches are for.
  • Readability comes before style. A bold palette that makes the text hard to read loses visitors. Our guides on the color palette and choosing a typeface detail what to check.

In short: “Propose a direction” starts two searches on your trade, three directions and a jury, for the price written on the button. Nothing is composed before your choice; the direction you keep ticks your page, which you remain free to untick.

Sources

  1. W3C, Understanding Success Criterion 1.4.3: Contrast (Minimum), WCAG 2.2
  2. Nielsen Norman Group, Jakob’s Law of Internet User Experience (video, 2017)

Read next

Your site, filmed for your business

Describe your business and the scene of your background: the video is filmed for you, you build the page slice by slice, and the copy writes itself into it.

Create my site