ThoughtWorks
  • Contact
  • Español
  • Português
  • Deutsch
  • 中文
Go to overview
  • Engineering Culture, Delivery Mindset

    Embrace a modern approach to software development and deliver value faster

    Intelligence-Driven Decision Making

    Leverage your data assets to unlock new sources of value

  • Frictionless Operating Model

    Improve your organization's ability to respond to change

    Platform Strategy

    Create adaptable technology platforms that move with your business strategy

  • Experience Design and Product Capability

    Rapidly design, deliver and evolve exceptional products and experiences

    Partnerships

    Leveraging our network of trusted partners to amplify the outcomes we deliver for our clients

Go to overview
  • Automotive
  • Cleantech, Energy and Utilities
  • Financial Services and Insurance
  • Healthcare
  • Media and Publishing
  • Not-for-profit
  • Public Sector
  • Retail and E-commerce
  • Travel and Transport
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

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

Go to overview
  • Conferences and Events
  • Diversity and Inclusion
  • News
  • Open Source
  • Our Leaders
  • Social Change
  • Español
  • Português
  • Deutsch
  • 中文
ThoughtWorksMenu
  • Close   ✕
  • What we do
  • Who we work with
  • Insights
  • Careers
  • About
  • Contact
  • Back
  • Close   ✕
  • Go to overview
  • Engineering Culture, Delivery Mindset

    Embrace a modern approach to software development and deliver value faster

  • Experience Design and Product Capability

    Rapidly design, deliver and evolve exceptional products and experiences

  • Frictionless Operating Model

    Improve your organization's ability to respond to change

  • Intelligence-Driven Decision Making

    Leverage your data assets to unlock new sources of value

  • Partnerships

    Leveraging our network of trusted partners to amplify the outcomes we deliver for our clients

  • Platform Strategy

    Create adaptable technology platforms that move with your business strategy

  • Back
  • Close   ✕
  • Go to overview
  • Automotive
  • Cleantech, Energy and Utilities
  • Financial Services and Insurance
  • Healthcare
  • Media and Publishing
  • Not-for-profit
  • Public Sector
  • Retail and E-commerce
  • Travel and Transport
  • Back
  • Close   ✕
  • 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

  • Back
  • Close   ✕
  • 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

  • Back
  • Close   ✕
  • Go to overview
  • Conferences and Events
  • Diversity and Inclusion
  • News
  • Open Source
  • Our Leaders
  • Social Change
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.

  • What we do
  • Who we work with
  • Insights
  • Careers
  • About
  • Contact

WeChat

×
QR code to ThoughtWorks China WeChat subscription account

Media and analyst relations | Privacy policy | Modern Slavery statement ThoughtWorks| Accessibility | © 2021 ThoughtWorks, Inc.