Image for post
Image for post

The Post PSD Era doesn’t want to kill designers.

In fact, it needs them more than ever.

Trevor Connolly
May 14, 2014 · 7 min read

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?

Image for post
Image for post
Brad Frost — “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:

Image for post
Image for post
via Google

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)

  1. Discovery. This covers everything from getting to know the business to what the look and feel should be. Standard stuff.
  2. 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.
  3. 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.
  4. 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

  1. Discovery. Same as above.
  2. 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.)
  3. 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

Visual Inventory

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

Image for post
Image for post
Dan Mall — “Visual Inventory”

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

“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:

Image for post
Image for post
http://styletil.es

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

“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 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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store