Where to begin? How I start a visual design for the web

Editor's note: This blog post is a written version of a talk that I gave at the UX Bar Camp DC 2015.

Visual Design, which, despite my background in it, often feels like the hardest part of an overall web design project for me. By "Visual Design" I'm referring to establishing look, feel, texture color, etc. So much of it seems objective and hard to judge. There aren't arbitrary boundaries that can easily be evaluated against.

This is not another "blah blah - first design" argument. This part of the process is independent of research, testing, business goals, discovery, etc. This is purely the moment of when you crack open a design document - what do you do?

This is not prescriptive. This is about what works for me, which I'm posting in the hopes that it helps someone else out there help think through their processes.

So, when I'm about to set out on a visual design - where do I start?

Setting the paragraph.

That's it. Step number 1. On a journey of possibly thousands of steps, jumps and dance moves.

“Setting the paragraph” is an pre-digital typographic term to mean the act of consciously choosing the typeface, weight, size, style and line height for the humble paragraph.

Why does this make sense for me?

There are a lot of reasons I find setting the paragraph to be a good first step. When thought through, it bakes in a lot of solid design decisions that will inform the rest of the design.

First, I value well crafted typography as a core aspect of any successful design. If you get this wrong, there will be very little the rest of the design can do to fix a fundamentally broken design.

There is the saying that "the web is 95% typography". That is to say, the vast majority of visual elements on your site will be written words. If you build cotent driven sites, the vast majority of that will be paragraphs. By starting with the paragraph, you are accounting for what will be the element users will experience the most.

Visual design has many objectives, but arguably it's primary goal is to establish a tone to the content it conveys. I would argue that your paragraphs will have both the most subtle but powerful tone cue to your content. It's the aspect that many people are unaware of, but recoil when it's wrong.

You should also address the practical needs of your content early. Are there established brand guidelines that need to be taken into account? Are you going to need multilingual support? What accent characters are common in your content, and does a given typeface support them? Will you need italics (hint: probably)? It's far easier to figure this out first than realize you've picked a typeface with no italics halfway through a design project.

If you choose a paragraph typeface, other accent typefaces are easier to narrow down. You will want sufficient harmony or contrast. For instance, if you opt for a sans serif paragraph typeface, you're probably not going to want a slightly different sans serif for headers. You'll probably either want the same typeface, or opt for another type style (e.g. serif).

When considering type size, you can bring all kinds of data points- what is your audience demographic? Does that dictate a minimum type size? Where will this be seen? Do you need a responsive scale (hint: probably)?

With a type size in mind, you can work out things like how big columns need to be in order to accommodate your text while maintaining optimal line lengths. This way, you can start working on layouts with an informed starting point. I personally feel it's actually better to build a layout that accommodates good body copy, then to make body copy 'fit within' a layout. Keeping type size and line lengths in mind also let you establish the upper bounds of your design.

Color choices can also be driven by this decision - if you've settled on a lighter weight typeface, you will probably have to favor a more high-contrast color palette to maintain readability.

This is not a permanent decision. I just find its a reliable starting point to begin, which can lead to sound decisions further down the line. This can be revisited and changed. I find it harder to make other decisions first, then make the body copy fit within that.

A Closing plug for the Font Combinator

Looking back at writing the Font Combinator - this line of reasoning is a big reason I created it. I didn't think through it this way at the time. When I start visual designs I actually do start here a lot.