April 2013Content first, designingin the browser
LIV MADSENFRONTEND DEVELOPER    @livmadsen   METTE SCHOU    UX DESIGNER   @mettecharita    @creuna_dk
WARNING
Our talk may include buzzwords and concepts, such as•    Content First (whoa buzz!)•    UX-driven•    Responsive design (w...
WE’LL SHARE REAL LIFE EXPERIENCES
The emergence of responsive webdesign have made it very difficult to employ the traditional prototyping  methods in a mean...
OUR APPROACH
… to client cooperation•    Align expectation•    State the objectives•    Embrace close cooperation•    Be transparent•  ...
… to user centered design•    Know end user’s motivations, questions and     challenges•    Stick to the defined objective...
•    Think content first (text, images, video etc.)     •    Create the right containers and UI elements in order to creat...
… to content first implementation•    Progressive enhancement – start with the content,     end with behavior•    Responsi...
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 ...
INITIAL CHALLENGES
•    At kickoff content was unknown•    Release in 60 countries•    40 languages to be added by independent     editors•  ...
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 an...
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 ta...
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•  ...
QUESTIONS?http://www.flickr.com/photos/matterphotography/2739799786/
Content First, Designing in the Browser -  UX camp CPH
Content First, Designing in the Browser -  UX camp CPH
Content First, Designing in the Browser -  UX camp CPH
Content First, Designing in the Browser -  UX camp CPH
Content First, Designing in the Browser -  UX camp CPH
Content First, Designing in the Browser -  UX camp CPH
Content First, Designing in the Browser -  UX camp CPH
Content First, Designing in the Browser -  UX camp CPH
Content First, Designing in the Browser -  UX camp CPH
Content First, Designing in the Browser -  UX camp CPH
Content First, Designing in the Browser -  UX camp CPH
Content First, Designing in the Browser -  UX camp CPH
Content First, Designing in the Browser -  UX camp CPH
Content First, Designing in the Browser -  UX camp CPH
Content First, Designing in the Browser -  UX camp CPH
Content First, Designing in the Browser -  UX camp CPH
Upcoming SlideShare
Loading in …5
×

Content First, Designing in the Browser - UX camp CPH

3,223
-1

Published 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 designer, frontend developer and client.

Published in: Design, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,223
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
14
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Content First, Designing in the Browser - UX camp CPH

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

    Clipping is a handy way to collect important slides you want to go back to later.

×