Master
ThoughtWorks
Menu
Close
  • What we do
    • Go to overview
    • Customer Experience, Product and Design
    • Data Strategy, Engineering and Analytics
    • Digital Transformation and Operations
    • Enterprise Modernization, Platforms and Cloud
  • Who we work with
    • Go to overview
    • Automotive
    • Healthcare
    • Public Sector
    • Cleantech, Energy and Utilities
    • Media and Publishing
    • Retail and E-commerce
    • Financial Services and Insurance
    • Not-for-profit
    • Travel and Transport
  • Insights
    • Go to overview
    • Featured

      • Technology

        An in-depth exploration of enterprise technology and engineering excellence

      • Business

        Keep up to date with the latest business and industry insights for digital leaders

      • Culture

        The place for career-building content and tips, and our view on social justice and inclusivity

    • Digital Publications and Tools

      • Technology Radar

        An opinionated guide to technology frontiers

      • Perspectives

        A publication for digital leaders

      • Digital Fluency Model

        A model for prioritizing the digital capabilities needed to navigate uncertainty

      • Decoder

        The business execs' A-Z guide to technology

    • All Insights

      • Articles

        Expert insights to help your business grow

      • Blogs

        Personal perspectives from ThoughtWorkers around the globe

      • Books

        Explore our extensive library

      • Podcasts

        Captivating conversations on the latest in business and tech

  • Careers
    • Go to overview
    • Application process

      What to expect as you interview with us

    • Grads and career changers

      Start your tech career on the right foot

    • Search jobs

      Find open positions in your region

    • Stay connected

      Sign up for our monthly newsletter

  • About
    • Go to overview
    • Our Purpose
    • Awards & Recognition
    • Diversity & Inclusion
    • Our Leaders
    • Partnerships
    • News
    • Conferences & Events
  • Contact
Global | English
  • United States United States
    English
  • China China
    中文 | English
  • India India
    English
  • Canada Canada
    English
  • Singapore Singapore
    English
  • United Kingdom United Kingdom
    English
  • Australia Australia
    English
  • Germany Germany
    English | Deutsch
  • Brazil Brazil
    English | Português
  • Spain Spain
    English | Español
  • Global Global
    English
Blogs
Select a topic
View all topicsClose
Technology 
Agile Project Management Cloud Continuous Delivery  Data Science & Engineering Defending the Free Internet Evolutionary Architecture Experience Design IoT Languages, Tools & Frameworks Legacy Modernization Machine Learning & Artificial Intelligence Microservices Platforms Security Software Testing Technology Strategy 
Business 
Financial Services Global Health Innovation Retail  Transformation 
Careers 
Career Hacks Diversity & Inclusion Social Change 
Blogs

Topics

Choose a topic
  • Technology
    Technology
  • Technology Overview
  • Agile Project Management
  • Cloud
  • Continuous Delivery
  • Data Science & Engineering
  • Defending the Free Internet
  • Evolutionary Architecture
  • Experience Design
  • IoT
  • Languages, Tools & Frameworks
  • Legacy Modernization
  • Machine Learning & Artificial Intelligence
  • Microservices
  • Platforms
  • Security
  • Software Testing
  • Technology Strategy
  • Business
    Business
  • Business Overview
  • Financial Services
  • Global Health
  • Innovation
  • Retail
  • Transformation
  • Careers
    Careers
  • Careers Overview
  • Career Hacks
  • Diversity & Inclusion
  • Social Change
Experience DesignTechnology

Evolution of Visual Design - A Workflow

Matt Copeland Matt Copeland

Published: Jan 10, 2014

In this blog I detail visual design workflow deltas from Waterfall to Landslide to Agile and then to Lean.

Let's start with the Waterfall process

 

A seemingly simple process? If you’ve designed in a waterfall workflow, you know that it actually looks more like this:

  • Designers and business communicate via documents - a very slow way to work.
  • Designers spends hours building their visual language in a Photoshop document (PSD).
  • A series of stakeholders spend lots of time on email to create a thick-document of feedback on the designs.
  • Repeat (for weeks/months) until the stakeholders are happy with a picture of their website-to-be.
  • Business finally delivers documents and requirements to development.

As designers never speak to developers prior to User Acceptance Testing (UAT), they have one shot at communicating via documents. This means time lost writing, refining and digesting books of documentation. Post that, as developers moves PSDs into visual assets, more translation time-consumers emerge - typefaces not suitable for web, non-normal blending in gradients, specific image treatments, inconsistent colors due to color-pickers. As do “short-cuts”, like image-sprites cut from PSDs to save developers the hassle of fully translating PSD into a Cascaded Style Sheet (CSS), which leads to technical debt and future problems (think retina screens.. and beyond retina).

Progression of “landslide” (fake-agile)

This is better than waterfall, but it still lacks pairing of the designer and developer. It is common for teams to practice landslide without even knowing it. At least they are trying.

Agile 101: Finally pairing!

  • The designer creates the PSD. The key being that the PSD is piecemeal, not a comp.
  • Brings the PSD to pair with the developer.
  • Developer and designer pair on translating the PSD.
  • Future proofing is discussed.
  • Knowledge share / culture share can finally happen. Developers learn more about design principals used and designers learn more about how to execute their designs in the final medium.

Lean (version 1): This is fast

  • Live changes to production code are the first and final medium.
  • The designer and developer work in the final medium.
  • The designer can tweak and polish on a consistent basis as their efforts are the final product.
  • Icons, illustrations, and graphics are made as needed.
  • Surprises are non-existent. You see how it looks in the browser now.
  • Translation issues like non-normal blending methods for colors are non-existent. 
  • Feedback rounds result in modified stylesheets. No need for more documentation. Time and money is saved.

Lean (version 2): This is faster.

  • Both are skilled as designers and developers.
  • One of the pair may have stronger developer skills, the other may have stronger visual skills.
  • Why two of them? Always pair. Never design in a silo.
  • The team executes their ideas directly in code.
  • No wasted time/money/documentation.

Master
Privacy policy | Modern Slavery statement | Accessibility
Connect with us
×

WeChat

QR code to ThoughtWorks China WeChat subscription account
© 2021 ThoughtWorks, Inc.