Details some alternative approaches and tools to traditional design comps for designing quickly and flexibly in a mulit-layout / multi-platform world.

1. Styling on Steroids
An issue of Scale

2. PROJECT
DATE CLIENT
11-13-2014 EVERYONE
I'M HERE TO PUMP YOU UP!
OR AT LEAST GET YOU TO THE DESIGN GYM...

3. WHO THE HECK ARE YOU?

4. I’m Mario
Noble
Web Designer/Front End
dev/Graphic Designer/UX/UI/
Southern California Cliche
for 12 years and counting...

5. JESSE JAMES GARRETT’S
ELEMENTS OF USER EXPERIENCE DIAGRAM

6. A Short History of Web
Design
Basic 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...

7. Motives
Changing landscape of structure and use

8. Fundamental
Structural
Changes
Affects color, typography,
space, flow, contrast, form
and shape.

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

10. Problem Framing:

11. In the past, Comps have
served as...

12. Wireframing tools...

13. ...Prototyping tools...

14. ...and final deliverables.

15. They’d also:
act as a method to collaboration with,
discuss and get stakeholder buy in and
build momentum for the final product.

16. It’s getting tough now.
Many comps = lots of effort in little time

17. Problem.

18. How do you have
something to show that is
fast and flexible down the
road while still
communicating your vision
in detail?

19. Solution

20. Use approaches that
generate html/css or
"componentize" into a
flexible deliverable.

21. What are these?

22. Do I need to code?
Not necessarily. In fact, you’ll want to do
what you usually do at first.

23. There are lots and lots of
tools out there.

24. They fall into various
categories with some
overlap.
Their creators are always improving too.
Usually.

25. Categories
Ideation, Reference, Prefab, Custom Creation

26. Some examples

27. IDEATION
REFLOW AND AXURE

28. Pros and Cons
Better design "flow"
Bad or difficult to access
html/css

29. REFERENCE
STYLE TILES / COMPONENT COLLAGES, STYLE GUIDES, PATTERLAB.IO

30. Pros and Cons
Provides easy to
understand guidelines to
follow
Sometimes overly
simplistic or overly
complex

31. PREFAB
BOOTSTRAP, FOUNDATION, XCODE INTERFACE BUILDER, ETC.

32. Pros and Cons
Quick and well documented
Can be very cookie cutter and generic

33. CUSTOM ONLINE EDITORS
FROONT, WEBFLOW, DIVSHOT - COLLABORATIVE BUT SOMETIMES A “WALLED GARDEN”

34. DESKTOP EDITORS
MACAW, PINEGROW - SINGLE USER ORIENTED BUT FLEXIBLE

35. Pros and Cons
Lots of control over look
and layout
Requires a more
intimate knowledge of
html/css

36. One Tool to Rule them All is
attractive
...but could also be limiting.

37. Inspiration
Ideation
Communication
Reference
Implementation
Flexibility
What’s the 10,000 foot
purpose?

38. Each piece a small bit of
beauty capable of lending
itself to harmonize into a
coherent whole.

39. It can be frustrating.
Custom crafting versus mechanization.

40. Take away...
Reduce your throwaways.

41. Create deliverables that
serve as either:

42. Ongoing universal
references.

43. Resources that can
actually be used in
production.

44. Stay as “close to the
metal” as possible, while
maintaining “subjectivity”.

45. Pretentious koan time.

46. How does one paint on a
river?

47. By not trying to paint on a
river.

48. Many tools, one
purpose.

49. We want to be creative...

50. ...but produce something
that will be able to be
easily produced, changed,
used, referenced and
maintained

51. All brands are their
owners copyright
Floating lanterns -
https://
matsuetravelguide.files.
wordpress.com
10,000 feet-http://
www.laurendrusso.com
Copyrights and Credits

52. Q&A: talk, talk, talk...