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...