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
   

   View Slide

2. Photo by Dan Willis
   

   View Slide

3. RWD
   Photo by Jeremy Keith
   

   View Slide

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?
   

   View Slide

5. @chuckborowicz
   

   View Slide

6. DESIGN APPROACH
   •Paradigm Rejection — why things
   change
   •Atomic Design — visual inventories
   and validating full-page layouts
   •Mood Boards — listening, guiding,
   improving, personifying
   

   View Slide

7. PARADIGM REJECTION
   

   View Slide

8. san francisco 2013
   

   View Slide

9. Mandy
   Brown
   

   View Slide

10. par•a•digm |ˈparəˌdīm|
    a typical example or pattern of
    something; a model.
    

    View Slide

11. Paradigm: things are status quo, no red alerts.
    

    View Slide

12. Problems emerge. Suddenly things aren’t as “normal”.
    These are called, anomalies.
    

    View Slide

13. Multiple anomalies trigger a crisis.
    

    View Slide

14. Crisis leads to revolution, wherein
    we find a new normal.
    

    View Slide

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.
    

    View Slide

16. Image ©Mashable, 2013. http://mashable.com/2012/12/11/responsive-web-design/
    DON’T MAKE ME THINK
    More real, more better.
    

    View Slide

17. “It isn’t olden
    times anymore,
    Kevin.”
    

    View Slide

18. ATOMIC DESIGN
    

    View Slide

19. View Slide

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
    

    View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. MOOD BOARDS
    

    View Slide

27. Listening
    •Gather adjectives
    •Ask questions
    •Get the client to talk about what their
    product does
    

    View Slide

28. STORIES BUILD RELATIONSHIPS
    

    View Slide

29. View Slide

30. “Large blocks of color
    complicate the palette.”
    “Dark UI is hard to read.”
    

    View Slide

31. THEORY REALITY
    

    View Slide

32. ORGANIZING BOARDS
    

    View Slide

33. •Color
    •Typography
    •Texture
    •Form and Button Styles
    •Image Treatments (like borders & corner radius)
    ORGANIZING BOARDS
    

    View Slide

34. THINGS ARE GETTING SKETCHY
    

    View Slide

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
    

    View Slide

36. Sketches
    

    View Slide

37. Patterns
    

    View Slide

38. View Slide

39. View Slide

40. View Slide

41. BE ADVENTUROUS
    

    View Slide

42. PERSONIFY
    

    View Slide

43. Sophisticated and contemporary
    Bold and contrast-driven
    Light and playful
    Dark and vivid
    

    View Slide

44. These Aren’t The Mood Boards
    You’re Looking For
    

    View Slide

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…
    

    View Slide

46. EMBRACING NEW WORKFLOW
    

    View Slide

47. •Paradigm Rejection Revisited
    •Chemistry — embracing the virtues of
    awareness and respect
    •Visual Designers & HTML Prototypers
    EMBRACING NEW WORKFLOW
    

    View Slide

48. BECOMING A
    REMOTE DESIGNER
    

    View Slide

49. View Slide

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
    

    View Slide

51. Stormtrooper Helmet © markalbiar
    

    View Slide

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

    View Slide

53. •Boundaries, preference
    and style
    •Communicating
    availability
    •Self awareness and self
    respect
    

    View Slide

54. VISUAL DESIGN
    & HTML PROTOTYPING
    

    View Slide

55. Mood Boards
    Guidelines
    + Specs
    Mockups
    Visual Design
    

    View Slide

56. HTML
    Prototyping
    Mood Boards
    Guidelines
    + Specs
    Mockups
    Visual Design
    High Fidelity
    Deliverables
    

    View Slide

57. HTML
    Prototyping
    Visual
    Design
    

    View Slide

58. HTML
    Prototyping
    Visual
    Design
    What’s the size
    and color of this
    text?
    

    View Slide

59. HTML
    Prototyping
    Visual
    Design
    color: #333
    text-size: 13px
    

    View Slide

60. HTML
    Prototyping
    Visual
    Design
    .psd
    
    .png
    color: #333
    text-size: 13px
    

    View Slide

61. background-color: #fafafc
    border: 1px solid #e4e4ec
    border-radius: 4px;
    color: #333;
    font-size: 13px;
    .classname{
    }
    

    View Slide

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
    

    View Slide

63. PHOTOSHOP & VARIABLES
    

    View Slide

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

    View Slide

65. WORKING LIKE AN I.A.
    

    View Slide

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
    

    View Slide