Let’s move away from Photoshop

Static visuals fail by definition.

Andrew Clarke

Designing static Photoshop comps, or even wireframes may not be the most efficient way of producing a website. This top-down, waterfall process fails to accurately investigate the needs for a website design.

We’re not designing pages, we’re designing systems of components.

Stephen Hay

A website is not a bunch of pages bound together. It is systems of components, and it is software that requires development and testing—both initial and ongoing. This should inform our design process.

In our current process we design to our planned IA in wireframes, define functionality, header and footer areas and basic page layouts, then move on to visual treatments in Photoshop comps.

Creating wireframes of pages, then comps of pages, then development of pages incurs an enormous amount of “design debt” and “development debt”. That is, for the shortcomings it produces the debts will have to be repaid in full at a later stage. Things like:

  • Not designing to fit content
  • Not designing to information architecture, or, information architecture changing later
  • Not developing simple, scalable HTML markup
  • Not developing scalable CSS
  • Bandaid fixes for serious problems, or new elements requested by clients
  • Not designing to pre-existing patterns
  • Development and design debt is incurred immediately as design is handed over from designer to coder, regardless of briefing measures taken.

The MailChimp Pattern Library describes and acts as a lexicon for the “Atomic Elements” they use to build pages and UIs, minimising accrual of new development or design debt.

Brad Frost describes elements as the following:

  • Atoms are individual elements: buttons, inputs, labels
  • Molecules are groups of atoms, that are bonded together to form a search box, for instance
  • Organisms are complex, distinct sections of an interface, made up of multiple molecules, a header for instance. See also: Pattern Library Slats.

Development of new atomic element patterns comes at a huge cost, both to designers and developers, but also to users for whom cognitive load is increased. By minimising the number of visual and code patterns used, the usability of a website and cost of development is dramatically reduced.

When you design a system, or a language, then if the features can be broken into relatively loosely bound groups of relatively closely bound features, then that division is a good thing to be made a part of the design. This is just good engineering.

Tim Berners-Lee

It’s worth mentioning that a pattern library is not the same as a bootstrap to start building a prototype on. It’s a set of rules that you define, a way of defining content structure, visual design patterns and code patterns.

Responsive Design

Responsive design has the feeling of a buzzword that does not communicate its intended outcome. The real meaning is smart design—knowing your target browsers, audience, and choosing appropriate breakpoints. Static page comps for responsive designs are often time-consuming, expensive and not sustainable as a practice.

Element Collages

An element collage seeks to bridge the gap between visual style and functionality. It is a tool that can be used to develop visual style, application of brand and explore the relationship of visual elements in a web space. Atomic and molecular elements can be developed and even combined into examples of organisms (header, footer, login forms) during this process.

[Style tiles are] a catalyst for discussions around the preferences and goals of the client.

Samantha Warren

These are the drivers of the visual design conversation. Because they are not being presented with comps, clients will not ask about “the fold” or where the information sits on a page, their focus can be on effectiveness of calls to action, visual hierarchy, language, tone of voice, look and feel and application of their brand.

… presenting a full comp says to your client, ‘This is how everyone will see your site.’ In our multi-device world, we’re quickly moving towards, ‘This is how some people will see your site,’ but we’re not doing a great job of communicating that.

Daniel Mall

What does this mean for clients?

Every client has stakeholders, the bigger the client the more stakeholders are likely to be involved. Not every client can do without full Photoshop comps. Some won’t be able to commit straight to code from sketches. Their approval process could run through a gauntlet of critiques and opinions, which need to be considered. But the theories discussed within this article can be applied regardless.

Using this combination of collage based design, and bearing the atomic design theory in mind, iterations over single “Atomic” elements are quick and easy. If some elements don’t work, the problems can be iterated over quickly and rolled back into a full comp if it is a necessity for the client’s approval process.

It is up to us as designers and business people to choose our own processes, make them known to clients and collaborate with them effectively.

We sell ideas, intelligent thinking and effective visual communication. If these were not valued commodities then companies worldwide would adopt services such as 99designs as industry standards.

Fostering positive change and adopting new ideas in our own processes will ensure the continued success of our industry and to protect the value of good design to businesses everywhere.

Becoming more efficient isn’t only about reducing costs. It should also be about making more time to be creative. So if businesses and organizations are looking to maximize value for money, we need to find ways to make more time for creativity.

— Andrew Clarke

These are techniques that we believe can help us produce better design, and we will be exploring them more in the coming months.

Leave a Reply

Your email address will not be published. Required fields are marked *