Content First, Designing in the Browser -  UX camp CPH
Upcoming SlideShare
Loading in...5
×
 

Content First, Designing in the Browser - UX camp CPH

on

  • 1,480 views

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

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.

Statistics

Views

Total Views
1,480
Views on SlideShare
930
Embed Views
550

Actions

Likes
1
Downloads
10
Comments
0

2 Embeds 550

http://blog.kvasnickajan.cz 495
https://twitter.com 55

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Content First, Designing in the Browser -  UX camp CPH Content First, Designing in the Browser - UX camp CPH Presentation Transcript

  • April 2013Content first, designingin the browser
  • LIV MADSENFRONTEND DEVELOPER @livmadsen METTE SCHOU UX DESIGNER @mettecharita @creuna_dk
  • WARNING View slide
  • 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 View slide
  • WE’LL SHARE REAL LIFE EXPERIENCES
  • The emergence of responsive webdesign have made it very difficult to employ the traditional prototyping methods in a meaningful way… 6
  • OUR APPROACH
  • … to client cooperation•  Align expectation•  State the objectives•  Embrace close cooperation•  Be transparent•  Map resources (honestly) and establish clear responsibilities
  • … 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)
  • •  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
  • … 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
  • IT’S A TEAM EFFORT
  • THE CASE – BOCONCEPT CAMPAIGN SITE HTTP://CAMPAIGN.BOCONCEPT.COM
  • •  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)
  • INITIAL CHALLENGES
  • •  At kickoff content was unknown•  Release in 60 countries•  40 languages to be added by independent editors•  No content strategy
  • RESPONSIVE DESIGN = CONTENT FIRST,DESIGNING IN THE BROWSER
  • DESIGNING IN THE BROWSER?DID YOU DO AWAY WITH PHOTOSHOP?
  • NOT ENTIRELY!
  • SO… DID YOU DO AWAY WITH AXURE?
  • NOT ENTIRELYWE’LL GET BACK TO THAT
  • ARTEFACTS – LOWER THE BRIDGE
  • •  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
  • Defining theMinimal Viable Product (MVP) 30
  • BACK TO THE DRAWING BOARD!
  • SO YOU MENTIONED AXURE EARLIER….
  • TAKE-AWAYS
  • 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
  • WILL WE DO IT AGAIN? YESSIR, H5IR
  • DIY•  Grab any and all team members you can access•  Include the customer•  Focus on tasks at hand as they appear•  Allow diving (dedication)
  • QUESTIONS?http://www.flickr.com/photos/matterphotography/2739799786/