Become a better UX designer through code

The web is a fluid and inherently flexible medium - to design effectively for it you need to understand it better. In this hands-on workshop we will look to level up your HTML & CSS skills to learn how you can create responsive prototypes and re-usable pattern libraries for your web projects. We’ll explore how to create layouts that flow beautifully from tiny screens to large ones and how to design responsive grids from the content-out. Through practical examples we’ll discuss the benefits of developing responsive pattern libraries including when and how to use them.

Transcript

1. Become a better UX designer through code Sylvain Reiter - @sylvainreiter | Ramon Lapenta - @ramono Cyber-Duck Ltd - www.cyber-duck.co.uk
2. Sylvain Reiter
 Development Director
 @sylvainreiter Who? Ramon Lapenta
 Senior Frontend Developer
 @ramono
3. 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?
4. CodePen Editor Window & Full page CodePen is a playground for the front end side of the web Write some code, see the result! CodePen
5. CodePen Setting up CodePen for 
 responsive coding Set up a base Pen http://bit.ly/uxl2014 Resources Add necessary resources, like frameworks or libraries, and viewport metatag. Fork it! Add necessary resources, like frameworks or libraries, and viewport metatag
6. 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
7. Practical Coding Practical HTML HTML <div class=“container”>! <div class=“col4”>! <p>Text here</p>! </div>! </div>
8. Practical Coding Practical HTML CSS .container {! width: 100%;! margin: 0;! } @media (min-width: 980px){! .container {! width: 940px;! margin: 0 auto;! }! } CSS Media Query
9. Become a better UX designer through code BREAK
10. 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
11. Pattern Libraries Navigation
 http://codepen.io/bradfrost/full/hkuzA Content boxes
 http://codepen.io/bradfrost/full/vspLD Sidebar
 http://codepen.io/bradfrost/full/gtkHy Forms
 http://codepen.io/chriscoyier/full/DmnlJ Different pattern examples
12. 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
13. Pattern Libraries ! • http:// www.mobiledesignpatterngallery.co m/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
14. Fit the Content Responsive content layout
 http://codepen.io/ramonlapenta/full/xCtIF/ 
 
 Approaching RWD 
 from the Content out
15. Fit the menu Responsive navigation
 http://codepen.io/ramonlapenta/full/GcknD/
 
 Approaching RWD 
 from the Content out
16. 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
17. Become a better UX designer through code THE END Sylvain Reiter - @sylvainreiter | Ramon Lapenta - @ramono Cyber-Duck Ltd - www.cyber-duck.co.uk