AEA Boston 2014 Day 1 Notes

My employers decided to take me to a conference. Apparently they want me to learn stuff. And things. Though I guess a conference on web design is kind of a thing I should be interested in :)

Here are my notes from day 1:

Session One – Understanding Web Design

Art Directors are nuts. Brilliant, but nuts
We need to help teach our employers to evaluate what we do to help us reach our highest potential
Papyrus is totally an option
Responsive design in 1996 was seeing an orange background or NOT seeing an orange background
net magazine
web design is like typography design

  • creates a space for someone else’s expression
  • design can impose a great personality (see font rosewood) or remain neutral (helvetica)
    the secret of web design is details
  • as the secret of comedy is timing
    Layout is the servant of content

A great website makes interaction easy
Great website guides you subtly toward your heart’s desire

  • even a static website isn’t static, it is designed to guide you to the content you want
    Great web design can be invisible or in your face
    Great web design delights

Session Two – Designing with Data

Bringing data to meetings makes it much harder for negative members of a conversation

Data vs Research – data has connotations of number, research is still validated, but numbers are not the ultimate end-game

If you are going to design a change, ensure there is an reason to make that change that will matter to the person you are talking to

“Nobody has an excuse to make an uninformed decision any more”

-describing using many pieces of user feedback (direct & indirect) to inform modifications & additions

“…designers go from decorators to problem solvers.”

  • go from designing façades to designing solutions to problems
    Analytical services: - KissMetrics
  • GoSquared
  • Gauges
  • Mixpanel
  • Chartbeat

Vanity metrics – a piece of data which isn’t helpful in guidance

  • hits
  • total signups: better - signups over a period
  • page views: count people rather than views

track people and their habits

  • identify how people interact with your services

TrueSocialMetrics

Session Three – RWD is hard/easy

using frameworks instead of processes

  • processes have a set input and a set output
  • frameworks are guidelines and constraints that allow us to have flexibility in process and get a superior output
    content strategy
  • inspect each page and decide if you need to add content, edit content, or remove the page
    pattern inventory
  • PatternLab
  • Atoms > Molecules > Organisms - documenting how each component on the page is made up
  • Atoms: H1, PRE, H2, P, etc.
  • Molecules: Content block( DIV > H1 + P)
  • Organism:
    Visual Inventory
  • simple questions to avoid doing multiple comps up front
  • “How playful do you want the site to look?” - get cutesy websites, photoshop in their logo
  • Color/Concept/Tone - Highly saturated, Monochromatic
  • Flat, rounded
  • Serious, straightforward

Linear wireframe

  • list all the sections of the page
  • block the layout ont a webpage using gray boxes
    “It’s really easy to make a bunch of gray boxes responsive”

Element Collages

  • turn powerful phrases into visual hooks

Problem & Solution Statements

  • come up with specific problem statements & define what the solution is
  • iterate, starting with a problem anyone can solve (put a div on the page)
  • then add another iteration that moves the problem toward where you’re going via another simple step (morph the div by skewing it)

Session Four – Luke Wroblewski

increasingly mobile focused users

  • medium (3-5″) smart phones
  • full-size (10″) tablets

resolution

  • pcs: ~100 px/in
  • initial smartphones: ~200px/in
  • retina: 326px/in
  • modern smartphones: 441px/in or 538px/in

modern phones can have the same pixel density as 27″ desktop displays

full-bleed images on 3k+ resolutions come with a ~10mb download ball&chain

  1. use CSS & web type whenever possible
  2. use SVG & icon fonts whenever applicable
  3. Picturefill raster graphics
    media query: min-device-pixel-ratio: 1.5 which lets us know screen ratio

vertical mode tablet/phone

  • off canvas main navigation
  • contextual information toward bottom of screen where it feels most natural to tap
  • use vertical media queries to tighten up space as necessary

output trends

  • higher resolution
  • widescreen aspect ratios
  • media queries know about more than width

media queries level 4 (not released yet)

  1. pointer: coarse/fine (finger vs. mouse/pen)
  2. hover: if the pointing device can support the hover state

screen size is a poor proxy for figuring out capabilities, but it is all we have

media query level 4
light-level media query to let you determine ambient light and react accordingly

posture

  • design to human scale
  • and environments
  • not to screen width

Session Five – content / communication

content strategy is made up of 3 components

  • the content components (substance & structure)
  • the people components (workflow & governance)
  • the core strategy (how does the content get generated & used)

Things we need to (remember to) talk about

  • Principles
  • Strategy
  • Process
  • Roles
  • Perceptions

Principles

  • internally motivates us to do things that seem good & right
  • vs Rules – externally comels you to do things someone else has deemed good & right
    Principles allow teams to feel empowered

Strategy

  • define objectives based on who you are and what your principles are
  • strategy defines the general path to facilitate completing the objective
  • tactic defines how you will accomplish the given objective using the chosen strategy
  • good content strategy provides constraints that help focus the content
  • essentially guardrails
  • strategy keeps us accountable

Process

-ensure that processes can change over time
-artifacts are tools, not outcomes
-good process helps us move together

Roles
the RACI Model

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

On all projects

  1. at some point, invite ALL the people (but for the love of god not the kickoff meeting)
  2. Make sure everyone’s aligned on terminology (e.g. audit vs. inventory, wireframe vs. prototype)
  3. Identify timing issues

Roles give us all a place

Perceptions

Ensure that the feedback you’re giving is the feedback that you intend to give

Basically content needs to translate between 2 disparate disciplines

Session Six – UX Strategy Means Business

Every design has content

Every content has design

We need to remember that both great content and great design are intentional and they both exist

Great content + Great Design = Great UX
And we cannot have Great UX without awesome content and awesome design

UX Strategy cannot predict an outcome
-and if a strategy cannot predict an outcome, it is basically broken