Paradigm Rejection: A Visual Designer's Journey

First given at Mobile UXCamp DC, this presentation is about the challenges I faced in light of responsive web design and my learned appreciation for why things change.

Covered herein…

Design Approach
- paradigm rejection: why things change
- atomic design vs. full page iterations
- mood boards/style tiles

Embracing New Workflow
- paradigm rejection revisited: becoming a remote designer
- embracing the values of awareness and respect
- visual designers & HTML prototypers

Not Covered In This Deck…

My Photoshop Variables Demo

Transcript

1. PARADIGM REJECTION A VISUAL DESIGNER’S JOURNEY presented by Chuck Borowicz, Visual Designer
2. Photo by Dan Willis
3. RWD Photo by Jeremy Keith
4. GOALS FOR TODAY DESIGN APPROACH • Full-page and component-level (atomic) visual design • Telling better stories with mood boards EMBRACING NEW WORKFLOW • Adjusting to working remote • Playing well and designing well with others If time is available… WORKING SMARTER NOT HARDER IN PHOTOSHOP • Have you met variables?
5. @chuckborowicz
6. DESIGN APPROACH •Paradigm Rejection — why things change •Atomic Design — visual inventories and validating full-page layouts •Mood Boards — listening, guiding, improving, personifying
7. PARADIGM REJECTION
8. san francisco 2013
9. Mandy Brown
10. par•a•digm |ˈparəˌdīm| a typical example or pattern of something; a model.
11. Paradigm: things are status quo, no red alerts.
12. Problems emerge. Suddenly things aren’t as “normal”. These are called, anomalies.
13. Multiple anomalies trigger a crisis.
14. Crisis leads to revolution, wherein we find a new normal.
15. 1. Visual Design chose a fixed width, usually around 960 pixels. Mockups were considered the source of truth. 2. Enter the first iPhone in 2007. Mobile Safari brings the Internet to our fingertips but our fingertips are too big. 3. Anomalies persist with the inclusion of tablets and more phones, all with varying sizes and eventually pixel density. 4. This crisis led to a Responsive Design Revolution.
16. Image ©Mashable, 2013. http://mashable.com/2012/12/11/responsive-web-design/ DON’T MAKE ME THINK More real, more better.
17. “It isn’t olden times anymore, Kevin.”
18. ATOMIC DESIGN
20. VISUAL INVENTORY • Exposes inconsistencies in a current system • Provides proof that cohesion is needed • Deconstruction makes me more aware of what components I’m designing for
26. MOOD BOARDS
27. Listening •Gather adjectives •Ask questions •Get the client to talk about what their product does
28. STORIES BUILD RELATIONSHIPS
30. “Large blocks of color complicate the palette.” “Dark UI is hard to read.”
31. THEORY REALITY
32. ORGANIZING BOARDS
33. •Color •Typography •Texture •Form and Button Styles •Image Treatments (like borders & corner radius) ORGANIZING BOARDS
34. THINGS ARE GETTING SKETCHY
35. •Identify sketches that represent main components •Pick at least 2-3 that you feel are the strongest examples •Each board uses the same patterns but treats elements individually
36. Sketches
37. Patterns
41. BE ADVENTUROUS
42. PERSONIFY
43. Sophisticated and contemporary Bold and contrast-driven Light and playful Dark and vivid
44. These Aren’t The Mood Boards You’re Looking For
45. •Don’t represent the finished state of design •Are utilized only when needed •Aren’t open-ended questions •Not an excuse to pirate Mood boards…
46. EMBRACING NEW WORKFLOW
47. •Paradigm Rejection Revisited •Chemistry — embracing the virtues of awareness and respect •Visual Designers & HTML Prototypers EMBRACING NEW WORKFLOW
48. BECOMING A REMOTE DESIGNER
50. • Politely interrupt via IM or Skype • Pace reviews and ask questions to make sure everyone is on the same page • Over-communicate, to ensure I understand requirements and let my PM know I understand them LEARNING TO COMMUNICATE
51. Stormtrooper Helmet © markalbiar
52. “The virtue of awareness and respect requires that team members should be respectful of each other’s contributions and be aware of how their work a ects others.”
53. •Boundaries, preference and style •Communicating availability •Self awareness and self respect
54. VISUAL DESIGN & HTML PROTOTYPING
55. Mood Boards Guidelines + Specs Mockups Visual Design
56. HTML Prototyping Mood Boards Guidelines + Specs Mockups Visual Design High Fidelity Deliverables
57. HTML Prototyping Visual Design
58. HTML Prototyping Visual Design What’s the size and color of this text?
59. HTML Prototyping Visual Design color: #333 text-size: 13px
60. HTML Prototyping Visual Design .psd  .png color: #333 text-size: 13px
61. background-color: #fafafc border: 1px solid #e4e4ec border-radius: 4px; color: #333; font-size: 13px; .classname{ }
62. • We benefit from seeing both the visual and the HTML prototype • It creates an immediate soundboard for ideas and validation • Helps developers gain an earlier, deeper interaction with the visual designer • Visual Designers gain more modular, specific tasking • Real-time changes — things can be edited immediately Pros of Paired Prototyping
63. PHOTOSHOP & VARIABLES
64. Adobe PHOTOSHOP FROM: San Jose, California WEIGHT: 770+ MB, Heavyweight FACTION: Beloved Heel FINISHER: The Photoshop Crash FACTOIDS: A standard in the industry, but bloated. Watch out for his favorite move, “the slice”.
65. WORKING LIKE AN I.A.
66. Component-Level/Atomic Design • Brad Frost on Atomic Web Design http://bradfrostweb.com/blog/post/atomic-web-design/ • Modular Web Design, by Nathan Curtis http://www.amazon.com/Modular-Web-Design-Components-Documentation/dp/0321601351 Mood Boards and Inspiration • Style Tiles http://styletil.es • Colour Lovers www.colourlovers.com • Pttrns pttrns.com • Pattern Tap patterntap.com • Dribbble dribbble.com Working with Photoshop • Photoshop Etiquette: http://photoshopetiquette.com/ • Photoshop’s Role in Web Design*, by Ian Yates: http://psd.tutsplus.com/articles/tools/photoshop-role-in-web-design/ Collaboration • Designing Together, by Dan Brown http://www.designingtogetherbook.com RESOURCES