Tom Hermans

About me

  • designer / frontend & WordPress developer
  •  
  • freelancing + Sony Europe UX team
  • Communications graduate
  • played with LEGO as a kid

Purpose : Know what your site is about

  • Read
  • Buy
  • Contact
  • Use
  • Signup
  • Share

Photoshop mockup with "styles" and "guides"

fixed width, 3 versions for "each device"

Tom Hermans

We should

  • focus on content-first
  • design from the content out
  • embrace mobile-first
  • use progressive enhancement
  •  
  • Meaning is our baseline.

    Design is an enhancement.

User Experience touches

  • content strategy
  • information architecture
  • UI
  • usability
  • user needs
  • business needs

User Experience :
how a person feels
about using a device

UX Questions
we should ask

Content should be

  • useful
  • easy to use
  • evoke emotion and appreciation
  • be findable
  • be accessible
  • be credible

Patterns

  • media block
  • DRY: Don't Repeat Yourself
  • Re-usable block of code

HTML is a lot like LEGO

Atoms

Molecules

Templates

Pages

Atomic Design System

source: brad frost

Atomic Design System

Why should you use HTML for Prototyping

  • Know the medium
  • Build on what you know: the content
  • Build on what you know: the atoms
  • Fluid by default
  • Interactions / animations
  • CSS : CONSISTENT Style Guide [Patent pending, TH ;) ]
  • Easy to ADAPT design SITE WIDE on real content
  • Prototype becomes Designed Website

Responsive Workflow : Keep UI consistent

  • typography
  • shape and form
  • colour
  • progressive enhancement

Responsive Workflow : Keep UI consistent

  • typography
  • shape and form
  • colour
  • progressive enhancement

Responsive Workflow : Keep UI consistent

  • typography
  • shape and form
  • colour
  • progressive enhancement

Responsive Workflow : Keep UI consistent

  • typography
  • shape and form
  • colour
  • progressive enhancement

Responsive Workflow : Keep UI consistent

  • typography
  • shape and form
  • colour
  • progressive enhancement

Typography

p.s.: sass rules

Colours

p.s.: hammer or grunt rules

Mobile first,
progressive enhancement

Consider multi column layout later

Build a library of molecules

We’re not designing pages, we’re designing systems of components.

—Stephen Hay

Editorial Feature List Demo

Editorial Hotspots E6.E1

Editorial Hotspots E6.E1 - active

Store : Header, nav, product-row

Questions ?

What about this guy ? He seems lost..

The user..

Define your target audience

  • Who is visiting your site ?
  • What is their feedback ?
  • What are their questions ?
  • Which devices do they use ? (analytics)
  • Which pages do they visit ? (analytics)
  • You always have an audience. Apply the 80/20 rule.

Persona's

  • Map out your persona characteristics
  • Focus on a few primary personas
  • Make your personas believable
  • Give them a name and a picture
  • Test site with persona's and real life scenario's
  • Recruit participants for user testing

UX is iterative

<Thank You!>

More questions or wanna get in touch ?