An Event Apart Seattle - Day 1 Notes

Written by Joe Bibby  |  April 2, 2014  |  Permalink

Understanding Web Design

Jeffrey Zeldman
@zeldman

Art Directors club example. Judging. Didn’t actually look at websites. Looked at commercials

“We had this conversation 10 years ago”

“It’s interactive if it’s on the internet”

The mystery or web design

Designed the Batman forever website
Fixed width 400x300 pixels

Web design is like typography
Web design is like architecture

Web design is the creation if digital environments that facilitate…

Secret of great design is details

A great website makes interaction easy

Guides you
Can be invisible or in your face

Empathy is a designers chief virtue

We are all evangelists

The Future of Responsive Typography

Nick Sherman
@NickSherman
Font Bureau
Webtype
Fonts In Use
Type Directors Club

Typographic Basics

max width of paragraphs
max-width 40em

Kerning & Ligatures -
text-rendering: optimizeLegibility;

font-smoothing
fix subpixel rendering
h1,h2,h3 {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

Other issues
subpixel spacing
OpenType features
Hyphenation
Justificaitn
Line Balancing
Rendering Bugs

Problem No2

Media query functionality

Physical Resolution

If something needs fixing avoid breaking other things while you fix it.
But still fix it

Physical size does not match to actual size in the real world.

Windows8 allows you to request the RawDpi
EDID - standard way to deliver display information
SizeCalculator

Resizes typography based on face distance

Problem No3

Our fonts are static

fonts don’t just scale in print when they change size, they change they way they look

The Reading Edge Series at Font Bureau

"If you design a single font, it’s an island. If you design more than one, your

Donald Knuth’s Metafont
mathematically driven font

font derivation tool - Prototype.io

The Glass Floor
or,
The Irony of 100–900

Promoting a variable font format - geared towards the web - multi-interpolation
A flexible type system instead of individual standalone styles

Detect & Serve

A list Apart switches between Georgia Pro and Georgia Pro condensed when going from desktop to mobile view

Font-To-Width

Dynamically scaling fonts using spacing not sizing

Faster Design with Style Tiles

Samantha Toy
@SamanthaToy

Designers present multiple fixed width comps to clients

Style Tile

design deliverable consisting of fonts etc..

“Design systems, not pages”

content out, not canvas in

Moodboard
concepts & emotions.
most situations, it’s too vague - brand agencies already do it
“how does a chair become a button on my website?”

Comp/Mockup
jumping right to mocking up what the site should look like

Style Tile example includes:
logo, header treatment, typography, colors, ui elements, buttons, adjectives

Separates style and Structure
Device Width agnostic

Communication around a responsive project

“Every time a client asks a designer to make something look pretty, a baby kitten dies.”

Educate through Design Process:
Generate a definition of success that is separate from taste.

The style tile process:
1 - listen, 2 - interpret, 3 - define a visual language, 4 - iterate

the ikea effect - people who built their furniture valued it higher

Listen:
Types of questions
  • Exploratory
  • Metaphor
  • Degree of
  • Goal Oriented
Client Survey


Hold a Design Kickoff Meeting

Have the stakeholders complete a survey before the meeting or have everyone answer questions together.
Goal Oriented - what are the top 3 user goals in order of importance?
What are the top 3 business goals in order of importance?

Ask Why?

Generate a definition of success separate from taste

Exploratory Questions

Who is the audience?
What are the websites of the competitors?

Metaphor Questions

Client’s product/service is like a ______.
If it were a ________, it would be a _________ and why?

Adaptive Path

using metaphor questions for UX

Degree of Questions

On a scale of 1 to 5 How strongly do you feel the site should be _______?
Illustrative, photographic, etc…

Interpret

I see myself as a therapist, not an artist.\

Blanket Adjectives
  • Patriotic
  • Authoritative
  • American
  • Readable/Publishing
    Aggregate adjectives and put them into piles/categories
Break Down Big Ideas

Elements and Principles of Design - look at this slide more
line example - happy, sad, aggressive, whimsical - line demonstration

Humans make subconscious assumptions based on Subtle Visual Cues


Define a visual Language
Iterate

Iterating on a style is more efficient than iterating on a comp

"The role of a designer is basically that of a good host, anticipating the needs of the guest." - Charles Eames  

Pattern Library by MailChimp
Gazebo Component Library

Deliver a system
  • element
  • component
  • compound component

Brad - Atomic Web Design

“Carousels exist to keep people from beating the shit out of each other in meetings”

side note - architectural document

Style Tiles site

Screen Time

Luke Wroblewski
@lukew

Know Your Screen
Output

“not just the size but the resolution, the clarity, […] we care about all those.” - Tim Cook

mediaquery

@media only screen and (min-device-pixel-ratio: 1.5) {.class}

min-device-pixel-ration

“Any piece of glass you can’t touch and interact will feel broken” stephen synophski (sp?)

Do you have touch capabilities?
document.createEvent(“TouchEvent”)

Media Queries Level 4
light-level: washed

Content / Communication

Kristina Halvorson
@halvorson

“I would start to feel less like a consultant and more like a therapist”

Principles

Principles and Rules
principles are internally motivates us to do things that seem good and right
rules externally compel us to do things that seem good and right

Government Digital Service Design Principles

  1. Start with needs*
    (user needs not government needs)
  2. Do less
  3. Design with data
  4. Do the hard work to make it simple
  5. Iterate. Then iterate again.
  6. Build for inclusion
  7. Understand context
  8. Build digital services, not websites
  9. Be consistent, not uniform
  10. Make things open: it makes things better

Client example content principles

  1. This content is not for us.
  2. “Responsive” does not equal “reactive.”
  3. The story informs the format.

“Move fast and break things.” - Facebook

Strategy

example - “We will share user-facing, task-based content that makes our customers feel smart and safe, both personally and professionally.”

Strategy keeps us accountable.

Process

Content strategy is not a fast or agile process.
Do not make process your god.
Artifacts are tools not outcomes.
Good process helps us move together.

Roles

The Big Plan

  1. Take away everyone’s job titles.
  2. Have a series of four-hour working sessions to break out “big tasks” and “little tasks.”
  3. Managers go away and come back with “team missions.”
  4. Employees pick a team and write their own job descriptions.
  5. Select goals, review quarterly.
  6. Go!
The RACI Model

R - Who is responsible for completing the task
A - Who is accountable for the work’s success
C - Who must be consulted before the work can be signed-off on?
I - Who must be kept informed along the way?

Roles give us a place.

Perception

“In content strategy, our master skills must include translating and negotiating, so we can facilitate communication between disparate disciplines and help them to communicate.” – Rachel Lovinger, “Tinker, Tailor, Content Strategist”

Perception gives way to perspective

We are perpetually catching up

This multi-device web design increases stress exponentially. – Trent Walton, .net Magazine

Our work is together

Don’t tell them what’s wrong, tell them how to be more awesome.

UX Strategy Means Business

@jmspool
Jared M. Spool

The Gist

Design: the Rendering of Intent

Amazon Cash Float Model

Amazon turns inventory every 20 days
Best Buy turns inventory every 74 days
Standard retail payment terms are 45 days

Cash float is the time between when they sell the product and have to pay for it.

Great business models are designed.

What are our business model options?

South Park - gnomes stealing peoples underpants
Business Plan
Phase 1 - collect underpants
Phase 2 - ?
Phase 3 - Profit

Business Strategic Priorities
  • Increase Revenue
  • Decrease Costs
  • Increase New Business
  • Increase Existing Business
  • Increase Shareholder Value
Zappos.com

the first e-commerce company to allow return items at no cost
have instruction sheet on website along with return label
So where does this fit in the business strategic priorities?
reduces cost
instruction sheet reduces call costs
return label allowed discount from UPS
increases existing business because people keep stuff they didn’t intend to keep
increasing overall revenue
increases shareholder value

Content marketing - how does it help? unknown -

Web Advertising
how does it map? it just increases revenue

When you don’t pay for the product – you are the product.

Advertising: Corporate Centered: Broadcast

Experience: In the moment of what the user is doing

Advertising and Experience are almost exact opposites

Advertising should be the last resort for your business model

NY Times - removed adds and added a counter for articles you read
a metered paywall

the NYTimes is now earning from revenue from metered paywall customers than from advertising

Metered paywalls demand excellent content

Business models beyond advertising

Business models play with the experience to get the best returns.
Business models play with the returns to get the best experience.

Delightful content adds real value

The best UX strategists create delight by working in the intersection of business and design.