Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Content First, Designing in the Browser

Liv Madsen
April 13, 2013
480

Content First, Designing in the Browser

A practical, UX-driven approach to designing in the browser. Based on a real life case we share our experiences with incorporating a tightly integrated, iterative and co-creative process between UX designer, frontend developer and client.

Liv Madsen

April 13, 2013
Tweet

Transcript

  1. Our talk may include buzzwords and concepts, such as • 

    Content First (whoa buzz!) •  UX-driven •  Responsive design (whoa, last year buzz) •  Progressive enhancement •  Designing (/deciding) in the browser •  Immersive developing
  2. The emergence of responsive web design have made it very

    difficult to employ the traditional prototyping methods in a meaningful way… 6
  3. … to client cooperation •  Align expectation •  State the

    objectives •  Embrace close cooperation •  Be transparent •  Map resources (honestly) and establish clear responsibilities
  4. … to user centered design •  Know end user’s motivations,

    questions and challenges •  Stick to the defined objectives •  Clear the path! •  use simple, clear copy, e.g. keep product in focus (show don’t tell) •  Use explicit directional cues (Be visual) •  Remember white space, color contrast and sequencing (support scanning and scrolling)
  5. •  Think content first (text, images, video etc.) •  Create

    the right containers and UI elements in order to create an emotionally engaging experience •  Establish content levels •  Encourage people to interact with content using strong visual cues •  Save organizational resources /ease implementation •  Choreograph visual content and page flow •  Making key statements decodable at a glance •  Be tap-worthy 10
  6. … to content first implementation •  Progressive enhancement – start

    with the content, end with behavior •  Responsive – a mix of flexible grids and layouts, media queries, flexible images •  Performance and data structures is also design •  Designing/deciding in the browser
  7. •  Client was tackling growing mobile audience and came to

    us for help •  Design was ready •  All they needed was a little help to turn it into a reusable template in the CMS •  Tight deadline (and budget)
  8. •  At kickoff content was unknown •  Release in 60

    countries •  40 languages to be added by independent editors •  No content strategy
  9. •  Content strategy •  + telling the story, accommodating scanners

    and jumpers •  Chunking, structuring and sequencing the content •  Screen dumps and videos •  Illustrate navigation principles, interactions and transitions •  Creating a responsive grid – thinking cross device •  Examples of colors and textures •  Hand-drawn sketches •  Illustrates IA and red routes/page flow •  Style Tiles / Mood board •  Collaborative tool •  Supports designing in the browser •  Basic HTML PoC •  Illustrate grid, transitions and page flow 27
  10. Content First •  A great foundation •  An inspiring way

    to work – continuous drive •  Not a silver bullet – it still takes time •  Requires new deliverables and adapted client communication •  A team effort •  if resources are not available, this is not for you •  Transparency pays, be inclusive
  11. DIY •  Grab any and all team members you can

    access •  Include the customer •  Focus on tasks at hand as they appear •  Allow diving (dedication)