A whimsical outlet

Web design tools

We are spoilt for choice. But we might not always take advantage of how much, and where and when we should be doing it.

On it’s 25th birthday the breadth of tools and workflow options Adobe’s Photoshop has to offer is seemingly infinite for a graphics editing suite. It has revolutionised image retouching, image composition, web design and even animation and has become the go-to-tool* for visual design based projects. But there’s more out there to offer, so keep an open mind and don’t limit yourself…

For web design, digital design or interaction design (whatever you call yourself – if it’s online, the platforms are similar) nothing in Photoshop really handles the environment you are designing an experience for. The internet isn’t static, apps aren’t a simply sequence of screens. The journey as a whole is an ecosystem which needs to have consistent elements and hierarchy throughout. Without meaning to preach to the converted, here are some other ways I go about forming designs for digital devices.

1. I always start out in good old pen and paper, and then moving into Sketch or similar, wireframing to work out the fundamental skeleton of the structure and blueprint in black and white.

2. OK, using Photoshop for initial concepting or moodboarding, finding a direction and working out a look and feel is great. It handles rasterised graphics in the exact way we’ve become accustomed to on our high resolution screens, and it’s (annoyingly) industry standard, which means sharing files is ridiculously easy. However, I would always at some point recommend getting yourself a flexible framework and jumping into HTML & CSS to establish logical page hierarchy and true styles of a browser environment. This allows you to apply realistic styling to elements and even define certain changes at specific breaking points. It also helps when handing over styleguides for build, even if they are tweaked to fit in with development set-up, but if you’ve used a breakdown of typesetting, colour, padding within browser rendered conditions then refinement and launch is much easier if you’ve thought about the little-big details and encountered any high-level issues early on. If markup seems a touch daunting there are a few things that can help.

3. Quickly show off designs in Invision or framer.js and get it in the clients hand on the right device. Having a prototype of the journey up your sleeve, brings basic function to life and allows you to move away from conversations about viewport dimensions and avoids showing long pages of design, which is misleading. You are able to get closer to a more representative version of the end result.

4. When it comes to interaction design, don’t just look for ‘inspiration’, use paper mock-ups, Keynote, or if you know what you want to do, and can’t find a way of doing it yourself, ask a dev, It’s about collaboration, and they are some of the best people to learn from. Web design, can only be made better by knowledge sharing, and pushing boundaries both in design and dev.

Design > Iterate > Test > Evolve > Repeat.
I’m moving away from single stream design to get the best out of the brief, using different tools where appropriate, means you are stress testing along the way, instead of stumbling across it at the end. It’s so important to ensure the journey works from every possible entry point. The internet isn’t a native environment for a lot of people. There needs to be reassurance and after care. Iterate every release based on user feedback. You know your product, you know what you want it to achieve, so stick to your guns but bear in mind people need to want it in their lives they want to be able to use it the way they want too.

*Broad-sweeping statement