The Post PSD Era doesn’t want to kill designers.
In fact, it needs them more than ever.
As an interactive designer, I am of a dying breed. I am one of the many interactive designers who is slowly being nudged (pushed, shoved, tossed) out of the digital design process. And I have the Post-PSD Era to blame.
The Post-PSD Era is a product of the successful web. Due to the rise of mobile and constant innovation in our development standards and processes, it is becoming increasingly outdated to provide PSD Mock Ups for each screen of a website or app, or even to provide more than a handful. In some cases, PSDs can be avoided altogether. This is to the benefit of clients, developers, businesses, pretty much everyone — even, in fact, the designer. Learn how all designers can adapt in the Post PSD Era.
Why do I hate Photoshop?
I don’t. I have done most of my work using Photoshop. Photoshop does have its downfalls though. Web designer Brad Frost summarizes Photoshop’s strengths and weaknesses in his own blog post, The Post PSD Era:
To sum up what Frost is saying, Photoshop does the things it was built to do very well. Photoshop serves its purpose so well that designers found new ways to use it for what it’s not very good at — web design.
Now, If you look up the definition of designer on Google, you’ll see this:
Notice it does not say: designer: a person who builds designs in photoshop.
The definition of a designer’s role hasn’t really changed, but rather, their workflow has.
Your Current Workflow (or something like it)
Previously, web design workflows have been something like this:
- Discovery. This covers everything from getting to know the business to what the look and feel should be. Standard stuff.
- Concepts. After the discovery meeting, you have a few ideas of what the new design could look like. Anywhere from two to five concepts are usually presented, each with its own design style, colors, font treatments, photo treatments. Surely, with all these different looks, they’ll like one of them.
- Mix & Match. This is where the client tells you what they like about each of the concepts and tells you to match Concept 1’s dark color scheme with Concept 4's fun text treatment and Concept 3's grunge look, but make sure to keep it simple and clean. This is the creative equivalent of mixing all the flavors at the soda fountain into one “Suicide” soda.
- Repeat Until You Get It Right. Repeat steps 2 & 3 until the client is happy. Make sure you’re wearing your comfortable jeans, because you could be here awhile.
The Post-PSD Workflow
The Post-PSD Era, on the other hand, is all about pre-defining the rules of whatever it is you are about to design. Instead of wasting time designing multiple unique concepts for look and feel, more research is done up front to find the right look, feel, tone, and style to achieve the business goals of your client and the project. A Post-PSD Workflow might look like this:
- Discovery. Same as above.
- Definition. In the Post-PSD Workflow, this is where your money is made. Where a designer would usually present multiple concepts, they now present multiple “styles”. The decision of how the project should look and feel will be determined by what style best helps meet the business objectives. When this step is done, the style, tone, and overall visual theme should be identified. (There are several techniques you can use to arrive at these conclusions, which we will go over in minute.)
- Application. Since the styles have already been defined, you aren’t wasting time trying to Frankenstein multiple design concepts together with multiple layouts. Instead, you are just building on top of wireframes with the styles you’ve already established. If comps are still necessary now you only have to do one concept and work off of that.
Gone are the days of old where a designer would present multiple website design “concepts” to the client or when a PSD was needed for each version of a web-page. Instead, you establish a style for the whole project, perhaps the whole brand, and then you let that determine the design.
Post-PSD Methods
There are numerous different processes that go beyond the multi-PSD design methodology.
Visual Inventory
Dan Mall’s idea of a Visual Inventory is my personal favorite. He builds the Visual Inventory document for the client to help them identify design solutions for the business goals. It’s a more abstract way of getting to a design solution. Specifically, he says:
“Full-page comps are designed to solve the question, “What should this site look like?” To solve the more abstract question, “What should this site feel like?” I’m pleased to see that we’re turning to abstract deliverables like style tiles, style prototypes, or—my personal favorite—element collages.”
When you create a Visual Inventory for a client, you are helping them find the solutions that will work for their product instead of the aesthetics that they prefer. This provides the optimal experience for their target customer.
StyleTiles
According to the Stiletil.es website:
“Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.”
Like the Visual Inventory above, it’s a way of capturing styles without building out a full comp. Unlike the Visual Inventory, a style tile actually goes an extra step of identifying the exact styles that should be used: which fonts, color combinations, imagery, illustrations. The goal is to pick one definite style to continue with for development. The end result looks something like this:
With this as my roadmap, I can easily pick which of these styles I want to use for specific elements on the site. I’ve already defined the look and feel, now it’s just down to application.
In-Browser Design
There are those who support the idea of designing in the browser. Chris Thelwell, Digital innovator and Lead UX Consultant at ThoughtWorks, lays out some critical beneftis to In-Browser Design in his article Design-in-browser, are you ready?:
“Design-in-browser forces you to make the content lead the design.
There is no better way to test your design than by actually testing your design.
Design-in-browser is responsive by default, enabling design for multiple devices without multiple versions.
We can present rich, useable HTML to demonstrate the design (both visually and in the way it feels to use), rather than static comps.
CSS allows quick iterations, making real-time collaboration possible across multiple locations.
Move forward with something more real at every stage, to start building the final product in the design stage.
The design itself is the wireframe, visual design, sliced up assets and the documentation in one.”
This is the evolution of creating a Style Guide for the developer without handing off actual visual comps. In-Browser design requires collaboration between designer and developer to make sure the site not only looks right, but functions correctly as well.
Agile Methodology
Agile is actually a development methodology that focuses on iterative design. However, I’m actually no expert, so I’ll quote a credible source. According to AgileMethodology.com:
“Agile development methodology provides opportunities to assess the direction of a project throughout the development lifecycle. This is achieved through regular cadences of work, known as sprints or iterations, at the end of which teams must present a potentially shippable product increment. By focusing on the repetition of abbreviated work cycles as well as the functional product they yield, agile methodology is described as “iterative” and “incremental.” In waterfall, development teams only have one chance to get each aspect of a project right. In an agile paradigm, every aspect of development — requirements, design, etc. — is continually revisited throughout the lifecycle. When a team stops and re-evaluates the direction of a project every two weeks, there’s always time to steer it in another direction.”
In other words, it is expected that styles, functionalities, even the content, will change. This is truly the most “agile” workflow methodology. However, the Agile Methodology assumes a certain scale, and may not be ideal for smaller projects.
Providing Value
In today’s digital ecosystem, our digital experiences are rapidly evolving, and there isn’t enough time to constantly redesign in Photoshop. But that doesn’t mean designers aren’t important. Rather, the opposite. Designers are more important in today’s digital world than ever. You are still responsible for creating flexible design systems and finding the styles that will connect with the user. Now you just have to do it faster. By ditching the PSD and streamlining the design process, you aren’t just providing the client the value of saved time, you are making yourself more valuable. And ultimately, the real goal of the Post PSD Era is about creating more value — for your customers, for your team, and for you.
