Become a better UX designer through code

Sylvain Reiter - @sylvainreiter | Ramon Lapenta - @ramono Cyber-Duck Ltd - www.cyber-duck.co.uk

Sylvain ReiterDevelopment Director

@sylvainreiter

Who?Ramon Lapenta

Senior Frontend Developer@ramono

Communication between developers and designers is

massively improved

Understanding the code that makes a layout makes you think

of different ways.

Knowing the limitation of code helps you think of the

implementation

Help developers understand the idea behind a design concept

How coding can help you become a better UX Designer

Why?

CodePen

Editor Window & Full page

CodePen is a playground for the front end side of the web

Write some code, see the result!

CodePen

CodePen

Setting up CodePen for responsive coding

Set up a base Pen

http://bit.ly/uxl2014Resources

Add necessary resources, like frameworks or libraries, and viewport metatag.

Fork it!Add necessary resources, like frameworks or

libraries, and viewport metatag

Practical Coding

Practical HTML / CSS skills that you can apply to your projects

HTML Tags and attributes

Relation between elements Flow of elements

CSS/Sass Rules Properties and values Media Queries

Practical Coding

Practical HTML

HTML

<div class=“container”>! <div class=“col4”>! <p>Text here</p>! </div>!</div>

Practical Coding

Practical HTML

CSS.container {! width: 100%;! margin: 0;!}

@media (min-width: 980px){! .container {! width: 940px;! margin: 0 auto;! }!}

CSS Media Query

Become a better UX designer through code

BREAK

Pattern Libraries

Patterns: A design pattern is the solution to a specific, common design problem.

Pattern Library: An organised collection of patterns.

Content and interactions in responsive design layouts often calls for new and creative solutions, a pattern library will benefit you by helping you discover and create these solutions.

What is a pattern library Why, when and how to use it

Pattern Libraries

Navigationhttp://codepen.io/bradfrost/full/hkuzA

Content boxes http://codepen.io/bradfrost/full/vspLD

Sidebarhttp://codepen.io/bradfrost/full/gtkHy

Forms http://codepen.io/chriscoyier/full/DmnlJ

Different pattern examples

Pros &

Pros

Speeds up process Knowledge is reusable, most problems are not unique

Ensures consistency

Facilitate modifications and documentation

Cons

Flexibility might get compromised

Designers may feel limited by the patterns

New design challenges require new patterns

of patterns& Cons

Pattern Libraries

!

• http://www.mobiledesignpatterngallery.com/mobile-patterns.php

• http://www.smashingmagazine.com/2014/04/22/rethinking-mobile-tutorials-which-patterns-really-work/

• http://bradfrost.github.io/this-is-responsive/patterns.html

What is a pattern library Why, when and how to use it

Fit the Content

Responsive content layouthttp://codepen.io/ramonlapenta/full/xCtIF/

Approaching RWD from the Content out

Fit the menu

Responsive navigationhttp://codepen.io/ramonlapenta/full/GcknD/

Approaching RWD from the Content out

We’ve learned how Communication between developers

and designers is massively improved

Understanding the code that makes a layout makes you think of different ways.

Knowing the limitation of code helps you think of the implementation

Help developers understand the idea behind a design concept

What we have learned

Takeaways

Become a better UX designer through code

THE END

Sylvain Reiter - @sylvainreiter | Ramon Lapenta - @ramono Cyber-Duck Ltd - www.cyber-duck.co.uk