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
Styling on SteroidsAn issue of Scale
PROJECT
DATE CLIENT11-13-2014 EVERYONE
I'M HERE TO PUMP YOU UP! OR AT LEAST GET YOU TO THE DESIGN GYM...
WHO THE HECK ARE YOU?
I’m Mario NobleWeb Designer/Front End dev/Graphic Designer/UX/UI/Southern California Cliche for 12 years and counting...
JESSE JAMES GARRETT’SELEMENTS OF USER EXPERIENCE DIAGRAM
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...
MotivesChanging landscape of structure and use
FundamentalStructural ChangesAffects color, typography, space, flow, contrast, form and shape.
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!
Problem Framing:
In the past, Comps have served as...
Wireframing tools...
...Prototyping tools...
...and final deliverables.
They’d also:act as a method to collaboration with, discuss and get stakeholder buy in and build momentum for the final product.
It’s getting tough now.Many comps = lots of effort in little time
Problem.
How do you have something to show that is fast and flexible down the road while still communicating your vision in detail?
Solution
Use approaches that generate html/css or "componentize" into a flexible deliverable.
What are these?
Do I need to code?Not necessarily. In fact, you’ll want to do what you usually do at first.
There are lots and lots of tools out there.
They fall into various categories with some overlap.Their creators are always improving too.Usually.
CategoriesIdeation, Reference, Prefab, Custom Creation
Some examples
IDEATIONREFLOW AND AXURE
Pros and ConsBetter design "flow"
Bad or difficult to access html/css
REFERENCESTYLE TILES / COMPONENT COLLAGES, STYLE GUIDES, PATTERLAB.IO
Pros and ConsProvides easy to understand guidelines to follow
Sometimes overly simplistic or overly complex
PREFABBOOTSTRAP, FOUNDATION, XCODE INTERFACE BUILDER, ETC.
Pros and Cons
Quick and well documented
Can be very cookie cutter and generic
CUSTOM ONLINE EDITORSFROONT, WEBFLOW, DIVSHOT - COLLABORATIVE BUT SOMETIMES A “WALLED GARDEN”
DESKTOP EDITORSMACAW, PINEGROW - SINGLE USER ORIENTED BUT FLEXIBLE
Pros and ConsLots of control over look and layout
Requires a more intimate knowledge of html/css
One Tool to Rule them All is attractive...but could also be limiting.
Inspiration
Ideation
Communication
Reference
Implementation
Flexibility
What’s the 10,000 foot purpose?
Each piece a small bit of beauty capable of lending itself to harmonize into a coherent whole.
It can be frustrating.Custom crafting versus mechanization.
Take away...Reduce your throwaways.
Create deliverables that serve as either:
Ongoing universal references.
Resources that can actually be used in production.
Stay as “close to the metal” as possible, while maintaining “subjectivity”.
Pretentious koan time.
How does one paint on a river?
By not trying to paint on a river.
Many tools, one purpose.
We want to be creative...
...but produce something that will be able to be easily produced, changed, used, referenced and maintained
All brands are their owners copyright
Floating lanterns - https://matsuetravelguide.files.wordpress.com
10,000 feet-http://www.laurendrusso.com
Copyrights and Credits
Q&A: talk, talk, talk...