Become a better UX designer through code
0 likes1,398 views
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. Well 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 well discuss the benefits of developing responsive pattern libraries including when and how to use them.
More Related Content
Similar to Become a better UX designer through code (20)
Recently uploaded (20)
Become a better UX designer through code
- 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
- 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. Weve 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