How the Responsive Web is
Redefining the Role of the Visual Designer.
January 2015. 6 min read
You can’t help but notice that designing responsive websites has quickly become the industry norm. But what’s perhaps less obvious, is that this is forcing Visual (UI) Designer to adapt and try out new practices. As I recently found out, this temporarily takes designers out of their comfort zone. But feeling uncomfortable is all part of the learning process and there’s a lot of value in adopting new ways of working.
My first experience of working differently came from a recent design project. The most obvious difference in the process was that everyone on the project was encouraged to play an active role in design decisions. For a UI designer, used to having control over the whole design process, this blurring of the lines between disciplines was hard to accept. At times I will admit I felt lost.
As technology continues to reshape the canvas on which we design, and the customer becomes ever more present in the design process, how we design needs to also adapt. This means disciplines previously not considered part of ‘design’ are ever-growing in their importance within the design process.
• • •
Designing in browser and delivering in code
On a typical project, a visual designer will hand over a set of static designs. These are made up of design files and accompanying design documentation. But when it comes to designing a responsive site there are drawbacks to this type of deliverable. Static designs are time-consuming to create and do not accurately reflect the infinite combinations of a responsive design. This would be impossible to achieve or at the very least impractical and costly.
So how do you communicate the design variables of a responsive design without investing a huge amount of time? You design in browser and deliver in code. This affected how I work as a visual designer, after all I no longer had sole responsibility for the final deliverable. It also meant I had to embrace the variety of skills and disciplines working on the project, facilitate better conversations and accept feedback and design insight from a cross-departmental team.
Creating static designs still played an important role in this process – I don’t advocate designing in browser from scratch. But once I had created high-fidelity mock-ups and a front-end developer had translated these into HTML, I had to move straight into working code and let go of my design files. As a visual designer, this is disconcerting and at first, I felt reluctant to get involved with working code at such an early stage. Doing this meant that I had to physically sit with a front-end developer and provide visual feedback for the remainder of the project, a way of working that made it difficult for me to track any changes.
• • •
What are the benefits?
But there are benefits of this approach in the long run and it certainly doesn’t remove the need for a visual designer - it just redefines the role. Working collaboratively during the crossover period between design and front-end development reduces the risk of detail being lost during the build. Amends can be made dynamically straight into code, which takes less effort and is more efficient than amending flat design files. It also enables clients to see an accurate translation of what the final product might look like, not just a fictional version.
In this project, the collection of design elements were housed in a pattern library. This deliverable is now seen as industry best practice when designing for the responsive web. It lays the best possible future foundation to modify, extend and evolve a design direction and helps teams create smart, scalable, maintainable designs.
• • •
Who drives it?
Taking on a leadership role has meant I’ve had to think about culture in ways I had never considered before. As our VP of Design Lucas mentions in his post It's all about what you do, “The decisions you make in different situations and how you act on a day to day as a leader, are the biggest signals of culture your organisation has”. This means that everything I do is now in the spotlight and my actions influence and shape the behaviours of others. I am particularly conscious of this.
Although as Design Tribe Lead I feel like I play an integral role in helping demonstrate the actions that contribute to a healthy culture, the rest of the team are the driving force behind it as individuals, taking the initiative to organise other events that enrich lives, both at work and after-hours. This is why culture is such an important consideration when hiring. Hiring talented people with a unique perspective who can bring so much more than just craft to our growing team. These new additions need to have the ability to connect and bring our company's mission, goals, and values to life through their behaviour.
• • •
5 things I learned that you may find helpful if you are ever required to work in this way.
Establishing a concrete design direction upfront before design begins is crucial in this process. Make sure you have built enough time into your project plan to accommodate this.
It’s difficult, but as a designer, you need to learn to let go of your designs and trust others on the team to deliver. Once they are translated, the code will always be one step ahead and you won’t be in full control.
Learn to code: you’ll need at least a basic working knowledge of code to amend, tweak, and even create new design concepts in browser to save front-end development time and resources.
Printing out live versions of the build can be useful for documenting visual feedback.
Accept feedback beyond the usual suspects, you might just be pleasantly surprised.