styling on steroids
DESCRIPTION
Details some alternative approaches and tools to traditional design comps for designing quickly and flexibly in a mulit-layout / multi-platform world.TRANSCRIPT
![Page 1: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/1.jpg)
Styling on SteroidsAn issue of Scale
![Page 2: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/2.jpg)
PROJECT
DATE CLIENT11-13-2014 EVERYONE
I'M HERE TO PUMP YOU UP! OR AT LEAST GET YOU TO THE DESIGN GYM...
![Page 3: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/3.jpg)
WHO THE HECK ARE YOU?
![Page 4: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/4.jpg)
I’m Mario NobleWeb Designer/Front End dev/Graphic Designer/UX/UI/Southern California Cliche for 12 years and counting...
![Page 5: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/5.jpg)
JESSE JAMES GARRETT’SELEMENTS OF USER EXPERIENCE DIAGRAM
![Page 6: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/6.jpg)
A Short History of Web DesignBasic html text and links – Look. A Cat.
Slice and Dice Hotspot comps images in tables – Just like a magazine!
A Flash of Silverlight in the Pan
The Rise of the Grid CSS - Separation of content, presentation and logic.
More CSS3 and HTML5 – Look, rounded corners!
Responsive Web Design – Phones, Tablets and HD TV's oh my! Crazy time...
![Page 7: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/7.jpg)
MotivesChanging landscape of structure and use
![Page 8: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/8.jpg)
FundamentalStructural ChangesAffects color, typography, space, flow, contrast, form and shape.
![Page 9: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/9.jpg)
Many possible variations need to be shown
Changing expectations – fast, agile iterations,
Consistent handoffs to devs (a la past print shops)
Fast, Cheap, Good! Or Bigger, Stronger, Faster!
![Page 10: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/10.jpg)
Problem Framing:
![Page 11: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/11.jpg)
In the past, Comps have served as...
![Page 12: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/12.jpg)
Wireframing tools...
![Page 13: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/13.jpg)
...Prototyping tools...
![Page 14: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/14.jpg)
...and final deliverables.
![Page 15: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/15.jpg)
They’d also:act as a method to collaboration with, discuss and get stakeholder buy in and build momentum for the final product.
![Page 16: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/16.jpg)
It’s getting tough now.Many comps = lots of effort in little time
![Page 17: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/17.jpg)
Problem.
![Page 18: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/18.jpg)
How do you have something to show that is fast and flexible down the road while still communicating your vision in detail?
![Page 19: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/19.jpg)
Solution
![Page 20: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/20.jpg)
Use approaches that generate html/css or "componentize" into a flexible deliverable.
![Page 21: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/21.jpg)
What are these?
![Page 22: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/22.jpg)
Do I need to code?Not necessarily. In fact, you’ll want to do what you usually do at first.
![Page 23: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/23.jpg)
There are lots and lots of tools out there.
![Page 24: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/24.jpg)
They fall into various categories with some overlap.Their creators are always improving too.Usually.
![Page 25: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/25.jpg)
CategoriesIdeation, Reference, Prefab, Custom Creation
![Page 26: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/26.jpg)
Some examples
![Page 27: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/27.jpg)
IDEATIONREFLOW AND AXURE
![Page 28: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/28.jpg)
Pros and ConsBetter design "flow"
Bad or difficult to access html/css
![Page 29: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/29.jpg)
REFERENCESTYLE TILES / COMPONENT COLLAGES, STYLE GUIDES, PATTERLAB.IO
![Page 30: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/30.jpg)
Pros and ConsProvides easy to understand guidelines to follow
Sometimes overly simplistic or overly complex
![Page 31: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/31.jpg)
PREFABBOOTSTRAP, FOUNDATION, XCODE INTERFACE BUILDER, ETC.
![Page 32: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/32.jpg)
Pros and Cons
Quick and well documented
Can be very cookie cutter and generic
![Page 33: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/33.jpg)
CUSTOM ONLINE EDITORSFROONT, WEBFLOW, DIVSHOT - COLLABORATIVE BUT SOMETIMES A “WALLED GARDEN”
![Page 34: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/34.jpg)
DESKTOP EDITORSMACAW, PINEGROW - SINGLE USER ORIENTED BUT FLEXIBLE
![Page 35: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/35.jpg)
Pros and ConsLots of control over look and layout
Requires a more intimate knowledge of html/css
![Page 36: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/36.jpg)
One Tool to Rule them All is attractive...but could also be limiting.
![Page 37: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/37.jpg)
Inspiration
Ideation
Communication
Reference
Implementation
Flexibility
What’s the 10,000 foot purpose?
![Page 38: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/38.jpg)
Each piece a small bit of beauty capable of lending itself to harmonize into a coherent whole.
![Page 39: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/39.jpg)
It can be frustrating.Custom crafting versus mechanization.
![Page 40: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/40.jpg)
Take away...Reduce your throwaways.
![Page 41: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/41.jpg)
Create deliverables that serve as either:
![Page 42: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/42.jpg)
Ongoing universal references.
![Page 43: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/43.jpg)
Resources that can actually be used in production.
![Page 44: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/44.jpg)
Stay as “close to the metal” as possible, while maintaining “subjectivity”.
![Page 45: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/45.jpg)
Pretentious koan time.
![Page 46: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/46.jpg)
How does one paint on a river?
![Page 47: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/47.jpg)
By not trying to paint on a river.
![Page 48: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/48.jpg)
Many tools, one purpose.
![Page 49: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/49.jpg)
We want to be creative...
![Page 50: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/50.jpg)
...but produce something that will be able to be easily produced, changed, used, referenced and maintained
![Page 51: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/51.jpg)
All brands are their owners copyright
Floating lanterns - https://matsuetravelguide.files.wordpress.com
10,000 feet-http://www.laurendrusso.com
Copyrights and Credits
![Page 52: Styling on steroids](https://reader036.vdocument.in/reader036/viewer/2022062419/55943fed1a28abd35b8b4826/html5/thumbnails/52.jpg)
Q&A: talk, talk, talk...