For many years, the typical designer's contribution to a web project workflow involved assembling interfaces and layouts entirely in an image editing application.
We could move elements around. Position things perfectly to the pixel. Set not only the precise font styles and sizes we wanted, but also (with Photoshop) the anti-aliasing method for our chosen fonts, to get just the aesthetic effect we desired. It is quite remarkable how long Photoshop remained the pre-eminent digital design application, given how inappropriate or redundant so many of its features were.
Also, by their nature these designs were static. Not reflecting how the interactive elements on display might change when interacted with, or how the content of a page might be delivered to a user in a staged or animated way.
These lovely, but flat and inanimate designs would be proudly presented to a client. Then after a few (hopefully few) iterations, a final design would be agreed upon.
Of course, the big problem with this workflow was the potential for a gulf between what had been presented and sold at the design stage of a project, and what was actually delivered. Even in an ideal setup where a tech-savvy designer and understanding developer work closely and cooperatively, it was highly likely that either a particular feature or perhaps just the overall feel of a design could change enough for the client to become perturbed.
The game was well and truly up for designing wholly in a static way with the growing popularity of web browsing on non-desktop screens. When a website design needs to behave responsively it quickly becomes impractical to simulate that behaviour across a vast number of screen sizes, in a static artboard environment.
The current crop of custom developed web and UI design applications such as Sketch or Affinity Designer do provide great toolsets. The built-in UI kits and multiple device artboard sizes that can live in the same document. The ability to re-use design elements, set up styles and even employ a little pseudo responsive behaviour. These are all great innovations and make things far more efficient than good ol’ Photoshop ever did, but they are still not a substitute for real code in a real browser.
It’s been slightly scary, but hugely exciting for me personally to get closer to the code again. Here at Gecko, we have an in-browser design framework that we are constantly refining. It enables me to get to grips with all the different dimensions and aspects of a website design. At times it can be frustrating, but the build team are brilliant and supportive. Once you start taking your designs in-browser, there really is no turning back.
As I’ve written this post I’ve realised that the title might be misleading. It’s not trying to weigh up the pro’s and con’s of in-browser and in-app with a view to ultimately advocating one over another. Actually, I think there is room in the modern designer’s armoury for both.
A design application can be the right environment in the early stages. It’s great for quickly kicking around broad ideas, for honing your overall concept, figuring out your palette and styles of typography etc. As soon as possible though, it pays great dividends to move into the browser.
Think of it like the design application is the incubator, the nursery pool, but then before too long, it’s time to face the big bad (and beautiful) real world of the browser.
Benefits of designing in-application:
Faster for quick look & feel development, exploring and switching between font styles and colour combinations
More mental energy focused on the ‘what’ it is you are trying to achieve as opposed to the ‘how’ you will actually achieve it
You feel like you are designing rather than coding
Benefits of designing in-browser:
It’s a real and genuine representation of how the design looks in the environment it will ultimately exist in
Interactions and animations become more considered and worked out, rather than alluded to
Easier to fine tune the ‘responsiveness’ of a design, across a wide variety of screen sizes
You can create a pseudo-real version of a site or at least a subset of connected screens and interactions, which can facilitate accurate user testing
You provide better information and a more helpful starting point for the developers and engineers who will pick up the baton from you
Of course, these are entirely subjective points of view, developed as a result of the way my own particular design journey has evolved. Every designer will have their own take on what is the right tool or method to bring ideas to life on screen. Happy designing!
- Mark, @wearegecko!