Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Become a better UX
designer through code
Sylvain Reiter - @sylvainreiter | Ramon Lapenta - @ramono
Cyber-Duck Ltd - www.cy...
Sylvain Reiter

Development 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 ...
CodePen
Editor Window & Full page
CodePen is a playground for the
front end side of the web
Write some code, see the resul...
CodePen
Setting up CodePen for 

responsive coding
Set up a base Pen
http://bit.ly/uxl2014
Resources
Add necessary resourc...
Practical
Coding
Practical HTML / CSS skills that 

you can apply to your projects
HTML
Tags and attributes
Relation betwe...
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 {!
wi...
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 org...
Pattern
Libraries
Navigation

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

http://codepen.io/bradfrost/full/vspLD...
Pros &
Pros
Speeds up process



Knowledge is reusable, most
problems are not unique
Ensures consistency
Facilitate modifi...
Pattern
Libraries
!
• http://
www.mobiledesignpatterngallery.co
m/mobile-patterns.php
• http://www.smashingmagazine.com/
2...
Fit the
Content
Responsive content layout

http://codepen.io/ramonlapenta/full/xCtIF/ 



Approaching RWD 

from the Conte...
Fit the
menu
Responsive navigation

http://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...
Become a better UX
designer through code
THE END
Sylvain Reiter - @sylvainreiter | Ramon Lapenta - @ramono
Cyber-Duck Ltd ...
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
UX London 2013 - Notes and Key Themes
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

Become a better UX designer through code

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

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

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.

Views

Total views

1,350

On Slideshare

0

From embeds

0

Number of embeds

358

Actions

Downloads

5

Shares

0

Comments

0

Likes

0

×