Become a better UX designer through code

1,146 views

Published on

Presentation at UX London 2014

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.

Published in: Internet
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,146
On SlideShare
0
From Embeds
0
Number of Embeds
205
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Become a better UX designer through code

  1. 1. Become a better UX designer through code Sylvain Reiter - @sylvainreiter | Ramon Lapenta - @ramono Cyber-Duck Ltd - www.cyber-duck.co.uk
  2. 2. Sylvain Reiter
 Development Director
 @sylvainreiter Who? Ramon Lapenta
 Senior Frontend Developer
 @ramono
  3. 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. 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. 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. 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. 7. Practical Coding Practical HTML HTML <div class=“container”>! <div class=“col4”>! <p>Text here</p>! </div>! </div>
  8. 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. 9. Become a better UX designer through code BREAK
  10. 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. 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. 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. 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. 14. Fit the Content Responsive content layout
 http://codepen.io/ramonlapenta/full/xCtIF/ 
 
 Approaching RWD 
 from the Content out
  15. 15. Fit the menu Responsive navigation
 http://codepen.io/ramonlapenta/full/GcknD/
 
 Approaching RWD 
 from the Content out
  16. 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. 17. Become a better UX designer through code THE END Sylvain Reiter - @sylvainreiter | Ramon Lapenta - @ramono Cyber-Duck Ltd - www.cyber-duck.co.uk

×