RESPONSIVE! DESIGN?Me Non Techy. Ouch. It hurts.UXCampDC, Jan 5 2013
Photo by bagera3005 (http://bagera3005.deviantart.com/art/)Photo by jordoncooper (http://www.flickr.                   com...
Photo by justincooper (http://www.flickr.com/photos/justincooper/)    Photo by jordoncooper (http://www.flickr.           ...
Photo by juehuayin (http://www.flickr.com/photos/juehuayin/)
Photo by juehuayin (http://www.flickr.com/photos/juehuayin/)                 Photo from myfoxdc.com
We were solving thewrong problem for   our UX team.
Designers, Architects, Developers...
Media queries!
Media queries?
We needed a new tool!
Set our Requirements■ Fast sketching of ideas■ Show how elements respond in actual  environment (the web)■ The entire team...
Protys Heart■ Aims to minimize need for unicorns  when planning responsive design■ Bring up conversations pertaining to  r...
Protys Guts■ Pattern based library of largely self-  contained (HTML/CSS/JS) fully  customizable "primitives"■ custom.css ...
Protys Brains■ Core Web technologies  (HTML5/CSS3/JS)■ 20 column grid, three basic responsive  sizes (mobile/tablet/deskto...
Gorongosa - Large
Gorongosa - Medium
Gorongosa - Small
Time for a demo!
Download: protytype.comWERE HIRING!forumone.com/careers@forumone #uxdc@protytype
Responsive Design for Non-Techies
Responsive Design for Non-Techies
Responsive Design for Non-Techies
Upcoming SlideShare
Loading in …5
×

Responsive Design for Non-Techies

2,692
-1

Published on

A talk members of the Forum One Communications UX team gave at UXCampDC 2013. The focus was on some pain points we hit while trying to wrap our brains around Responsive Design and the tool we've made to help sketch solutions more easily and quickly.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,692
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
29
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Responsive Design for Non-Techies

  1. RESPONSIVE! DESIGN?Me Non Techy. Ouch. It hurts.UXCampDC, Jan 5 2013
  2. Photo by bagera3005 (http://bagera3005.deviantart.com/art/)Photo by jordoncooper (http://www.flickr. com/photos/jordoncooper/)
  3. Photo by justincooper (http://www.flickr.com/photos/justincooper/) Photo by jordoncooper (http://www.flickr. com/photos/jordoncooper/)
  4. Photo by juehuayin (http://www.flickr.com/photos/juehuayin/)
  5. Photo by juehuayin (http://www.flickr.com/photos/juehuayin/) Photo from myfoxdc.com
  6. We were solving thewrong problem for our UX team.
  7. Designers, Architects, Developers...
  8. Media queries!
  9. Media queries?
  10. We needed a new tool!
  11. Set our Requirements■ Fast sketching of ideas■ Show how elements respond in actual environment (the web)■ The entire team can use it■ Projects are customizable■ Can be iterated upon
  12. Protys Heart■ Aims to minimize need for unicorns when planning responsive design■ Bring up conversations pertaining to responsive design sooner in the process■ Loves the web■ Open Source
  13. Protys Guts■ Pattern based library of largely self- contained (HTML/CSS/JS) fully customizable "primitives"■ custom.css file for site-wide changes and style elements page■ Inspired by Drupal and the responsive Omega theme
  14. Protys Brains■ Core Web technologies (HTML5/CSS3/JS)■ 20 column grid, three basic responsive sizes (mobile/tablet/desktop)■ Firefox extension, project export creates cross-browser compatible files
  15. Gorongosa - Large
  16. Gorongosa - Medium
  17. Gorongosa - Small
  18. Time for a demo!
  19. Download: protytype.comWERE HIRING!forumone.com/careers@forumone #uxdc@protytype
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×