Paradigm Rejection: A Visual Designer's Journey

Af7f298fde5f7411d5913278194e5b09?s=47 Chuck Borowicz
September 14, 2013

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

Af7f298fde5f7411d5913278194e5b09?s=128

Chuck Borowicz

September 14, 2013
Tweet

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

  19. None
  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
  21. None
  22. None
  23. None
  24. None
  25. None
  26. MOOD BOARDS

  27. Listening •Gather adjectives •Ask questions •Get the client to talk

    about what their product does
  28. STORIES BUILD RELATIONSHIPS

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

  38. None
  39. None
  40. None
  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

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