Content First, Designing in the Browser - UX camp CPH

  • 2,829 views
Uploaded on

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.

More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,829
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
10
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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