Embed Size (px)
DESCRIPTION
Is prototyping mobile experiences in the web browser useful? How do responsive web application techniques help to manage maintainability, performance and designs and how does it lead to client buy-in at product demos? Learn to leverage the following 4 strategic principles derived from nature’s models: Modularity - Overwrite general box model to make site wide changes, optimize application workflow and asset management Efficiency - maximize use of JS templates & CSS pre-processors Responsiveness - realign design workflows to work more efficiently and effectively Flexibility - achieve timelessness by making visual and interaction styles easier to iterate with advanced preprocessor techniques Nature’s models will be explained then practical application demonstrated to speed up prototyping. Also a recent case study of how these were applied for data exploration tools.
Citation preview
Fast Prototyping Strategies
for UI Design
HTML5?
WIN!
Code behind Design
photo credit: http://www.deviantart.com/?view_mode=2&order=9&q=by%3AGauntDusk
Clients...
#UXBIOMIMICRY
NaturalWorld
Modularity
Standardized Units
Larger Composition
Standardized Units
Larger Composition
HTML5 CSS3 JS
UI Patterns
Settings Workflow Assets
SPAs
http://mimosa.io
http://codepen.io/uxcodeine/pen/ylneo
Sloppy selectors
http://codepen.io/uxcodeine/pen/irhmJ
VisualizeComponents
http://codepen.io/uxcodeine/pen/rkvda
Content & Pseudo Elements
“end result: intelligent, responsive, platform-appropriate yet adaptable components”
- Stephanie Rieger
Efficiency
Support Flow
Lessened Friction
Support Flow
Lessened Friction
Maximize Use
Preprocessors
Redesign
Rediscover & Redefine
How We Code
http://codepen.io/uxcodeine/pen/hwHsB
SmartSelectors
http://codepen.io/uxcodeine/pen/vgxnq
EventToggles
http://codepen.io/uxcodeine/pen/jkclE
Popovers
http://codepen.io/uxcodeine/pen/vgxnq
ClassToggles
“is your css preprocessor actually making your app's css more manageable, or is it just allowing you to make the mess more complex?”
@ryanflorencehttps://twitter.com/ryanflorence/status/405775198739111936
Responsive
Complex Relationships
Ecosystem
Complex Relationships
Ecosystem
Adaptable Workflow
Effective & Efficient
Pixel Perfect
Layout & EMs
touch targets & readability
BoxModel
photo credit: http://www.w3schools.com/css/css_boxmodel.asp
http://codepen.io/uxcodeine/pen/jyzop
DOMManipulation
http://codepen.io/uxcodeine/pen/FhHgc
Beyond EMs & %s
Forced issue
Flexibility
Bendable
Few materials
Bendable
Few materials
Timeless
Iteration
code
iterationn
vanilla
preprocessors
JS
frameworks
http://codepen.io/uxcodeine/pen/AcBky
Offset & Alignments
http://codepen.io/uxcodeine/pen/jfCAe
Gesture & Motion
Letting Go
“happy”
users
Futurehacking
#IoT
photo credit: http://www2.psd100.com/ppp/2013/09/2601/rfid-sensor-icon-0926021202.png
“#UX prototyping often feels like getting off a deserted island: build whatever you need with whatever you have to get to Data Civilization.”
- Caryn Vainio@Hellchick
https://twitter.com/Hellchick/status/395650876653588480
“Building
Stuff”
ModularEfficientResponsiveFlexible
Thanks!Questions & Contact:Luis Daniel [email protected]@uxcodeline
http://codepen.io/collection/egcls/
