content first, designing in the browser - ux camp cph
DESCRIPTION
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.TRANSCRIPT
Content first, designing in the browser
April 2013
LIV MADSEN FRONTEND 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 (whoa, last year buzz)
• Progressive enhancement
• Designing (/deciding) in the browser
• Immersive developing
WE’LL SHARE REAL LIFE EXPERIENCES
The emergence of responsive web design 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 ENTIRELY
WE’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 the
Minimal 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/