Being a designer in the ever-changing landscape of digital design is a job that requires constant acceptance of change, which is not always an easy task. Every time a new phone, tablet, or entirely new product (looking at you, Apple Watch) is brought to market, our past knowledge of standards is frequently thrown out the window. In fact, the word ‘standard’ really only applies to what’s relevant from the past 6 months, and what we can predict the trends being for the next 6.

As designers, we have to design for the majority, but plan ahead for the minority.

Designing for what’s next

It’s impossible to remain leaders in digital design if we’re content with our past learnings. We’re incessantly looking for new ways to improve upon existing practices and how we can future proof our designs. Getting out to conferences and reading external opinions is one part of staying sharp. But internal and interdepartmental collaboration are also key elements to staying on top of trends. The design and development teams at Spyder Trap are constantly sharing new updates on the latest web design trends, mobile navigation functionality, and what is the new ‘best practice’ for every day user interface elements.

Why is collaboration with developers important? Web design doesn’t end with the design team. We can’t just throw a bunch of good looking drop down menus, a few well paired type faces, a nice photo gallery, and a great looking call to action button on a page and call it a day. The elements we design have to be categorized, optimized and thought-out beyond just the inactive (or flat) state.

For a typical responsive web design (RWD) project at Spyder Trap, there are 4 phases the project goes through: discovery, design, development and deployment. In between the design and development phase, we have a very thorough design handoff meeting which consists of developers grilling us designers on every possible aspect of the design to make sure they know exactly what needs to be programmed, how, and in what language. This communication ensures that processes are smooth, so we can keep the project moving and clients happy.

Efficiency is in the details

We as designers at Spyder Trap are very lucky (read: spoiled) to be able to work on-site with, not only a fully stocked in-house development team (front end, back end, iOS and Android), but developers who are freaking rockstars. They can handle anything we throw at them, but there are still ways to make the process easier on the developers to get projects completed even faster.

Categorizing page elements is a tedious job, but absolutely essential for the development team. Being able to hand off a Photoshop file with grouped, labeled, and intuitively organized layers is an essential part of a successful design to development handoff. Unlabeled and unorganized Photoshop files can drive any Type-A designer crazy. But, being able to ensure that we are handing off the best file to the development team can save essential time and budget in the development phase which is essential for keeping clients happy—the goal of all of our projects.

Optimizing the elements that we use in a Photoshop file is also an essential part of our jobs. Making sure there are no (or limited) rasterized components that need to be scaled up or down is a basic practice. With screen sizes having such high resolutions, we have to make sure any iconography used is optimized for retina display screens. Often times this requires creating a separate vector icon document for the development team after the client approves designs so they are able to export the icons as SVGs and icon fonts. This practice ensures that loading speed, screen size, pixel density and zoom level will not be an issue for users.

Getting cool features right – the first time

Many of the components that we design are interactive. Buttons, drop down menus, navigation elements, links, search bars, etc. With each hover, click and release comes a subsequent change that signifies to the user that they have completed an action. As designers, we have to think about how these interactive elements will come to life in development. How they will work on a desktop device versus a mobile device. And just as importantly, how we will be able to communicate our vision to the front-end developers. By thinking about these things before passing off the designs, we’re able to cut down on changes during development. We’re able to create killer designs that are functional and just as killer on the live site for the users to enjoy.

There is a massive amount of communication between the designers and the developers not just at the handoff meeting, but also throughout the design and development phases. Ideas are swapped, shot down and sometimes documented and saved for later. The most important things to remember when designing for development are to be organized, to always think ahead and to have an open line of communication with the developers assigned to your design.