Brand Experience not Hard Design

When we design a website for a client, it is easy to get hung up on making each part of our UX design ‘pixel perfect’, this is could be because the UX team don’t trust a UI-Dev to carry the vision through to the end user, or a client themselves is suffering with ‘Everythingitis’ (every pixel, for every page, for every situation, for every user, in every browser, on every operating system).

The reality of web design and development is that by trying to create ‘everything’ you can limit the flexibility of a page, especially when dealing with responsive and adaptive content. If you design to the last pixel, you have to design how that page should look on different screens. This is why so many designs use fixed breakpoints where a design layout changes.

By definition a breakpoint is where a layout starts to look ‘broken’ (not a particular screen size or viewport), so in themselves they are not a bad thing, but how many should be defined and why? Do you design for (horizontal pixel counts of) 320 768 & 1024 or 320 480 600 768 800 1024 & 1200? Do you give a percentage users a ‘fat phone’ web view just because you don’t have the time or budget to create a design for their screens?

This is why we should design for brand experience, not hard fixed pages. We have been doing this for years in print, so why are so many designers adverse to doing this for the web?

The key to this is a ‘Brand Book’ or style guide. This living, breathing document shows all the important information for the design such as; minimum sizes, border-widths, padding requirements, margins, font size and line-height, RGB colours and so on. When a new component is defined, we add a visual to this guide and list anything that is common to the design, i.e. ‘uses box type 2’ and anything unique such as ‘fixed height 200px’.

simple example

This style guide becomes a single point of reference for new components (why reinvent the wheel every time you add a new feature), and enables UX and UI to work cohesively and coherently in delivery of the client’s site.

The rulesets defined in the style guide for how components of a page should function or look in situations, will carry the brand experience across all devices and screens. By defining those rules then UX and UI-Dev can work together to specify ‘natural’ breakpoints. ‘Natural’ being the point that layouts and components should change to their next valid rulesets.

This by no means does not infer that mocking up pages goes into the trash. At the UX stage we still have to look at best and worst cases for the content, and clients do like to have a PDF of how a page would appear. What it does mean is that the mock ups do not have to be used by UI-Dev to check that the code is accurate to the last pixel in terms of position or scale, just that they are adding the right components formatted as specified in a style guide. In turn UX do not get bogged down in art-working files.

The rulesets defined by UX become the rulesets related to the markup and CSS. As such the designs are ‘fixed’ in the mix of the codebase.

Advantages

  • Shorter design iteration times.
  • Faster prototyping.
  • More flexible web pages.
  • ‘Brand Book’ created and maintained more easily.
  • Final layout is checked in browser and in native display.
  • UI-Dev becomes more involved with UX (for some a boon).

Disadvantages

  • Can require ‘client education’.
  • UX needs to think at a component level not page level.
  • UI-Dev becomes more involved with UX (for some a bane).

I’m not saying that UX designers and architects should become UI Developers, I am recommending a more brand centric approach to the web design rather than ‘page’ centric. All web sites are a series of components arranged into layouts, so why shouldn’t we design at a component level?

Martin Mcloughlin,

UI developer and CSS junkie, lover of fast motorbikes and strong black coffee.