Where to Begin – My Starting Point for Visual Design

View Github Repository Open presentation in a new window

chipcullen

See all presentation from chipcullen

Where to Begin – My Starting Point for Visual Design

0 0

where-to-begin

My presentation on a starting point for Visual Design

On Github chipcullen / where-to-begin

Where to Begin

My Starting Point for Visual Design

By Chip Cullen / @chipcullen

The Visual Design Process

What works for me

What works for you?

Caveats

  • Not prescriptive
  • Not a “blah blah - first” design argument
  • After discovery

Visual Design is Hard

For me, anyway

It is the realm of instinct. So much of it *seems* subjective and hard to judge. There aren't arbitratry boundaries that can easily be measured against - unlike code efficiency or testing results.

So 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.

What do I mean by "setting the paragraph"? This borrows an old-world typographic term to mean the act of conciously choosing the typeface, weight, size and line height for a piece of text. In this case, I am 'setting' the humble paragraph.

Why does this make sense for me?

I value well-crafted typography

If you get this aspect of typography wrong, there will be very little the rest of the design can do to fix a fundamentally broken design.

“The Web is 95% Typography”

https://ia.net/blog/the-web-is-all-about-typography-period/

A lot of that typography is paragraphs.

You are accounting for a what is aguably the largest portion of what the final product will be, in terms of visual elements.

Visual Design is about Tone

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. There is a saying that in movies, the video can actually be crap - what an audience won't put up with is bad audio.

Discovery should drive decisions

  • Audience demographics
  • Visual context
  • Content needs
  • Multilingual needs
  • What is the minimum type size?
  • Where is this going to be seen?
  • What accent characters are common? Will you need italics?
  • What languages/alphabets need supporting?

Layout can be content-driven

Line lengths are crucial

You can work out things like how big columns need to be in order to accomidate 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 accomidates 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

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.

Starting point, not a final decision

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.

(Shameless plug)

The Font Combinator!

http://font-combinator.com/

it's a big reason I created it. When I start visual designs I actually do start here a lot. Google Fonts only.

So, how about you?

Where do you start? What works? What doesn’t? Why?

What kind of design decisions do you graviate towards settling first? What do you do when confronted with a blank canvas, as it were?

Thank you!

http://chipcullen.github.io/where-to-begin/