Design Process: Designing With Development In Mind
Transitioning from the art phase of a project into development is incredibly exciting. You’ve finally got a clear vision of what your product will look like and in some ways, you can already start user-testing. But when you’re ready to make that transition, how can you be sure that your developers are able to recreate the art in an effective way? It turns out that this process doesn’t have to be an afterthought for your design team. Creating a thoughtful design process with the development team in mind is the first step in setting up your team for success.
As a designer at Rocksauce, the process we follow for a smooth transition into development starts at the beginning. When using Sketch to set up the art for a project, we start by taking our client-approved hero screens and building a fresh production document with it. The seeds of a project’s symbol library are then sown. Color palettes are fleshed out, and type and layer styles are defined. By doing this, we’re able to build a file that leaves room for variant artwork and mockups right from the start.
When it comes to naming symbols and styles, we aim to be as specific as possible without being pedantic. These names won’t just help us design an entire project efficiently, but they’ll be used to hit the ground running at the start of the development phase. It benefits no one to produce a disorganized design file in which a developer has to start their process by deciphering an artist’s intent.
Since we’re designing in an organized and efficient way, it helps us identify crucial art elements that may not be easily remembered. Elements like inactive states, tap states, hover states, and so on. For example, if we give an icon the name “nav/menu_inactive”, it’s obvious that we will need to create additional states at some point. You could think of it as a built-in reminder for a designer.
After we’ve finished with the art phase of a project, we prepare the transition into development. Because we’ve been diligent about the naming and structure of our file, it means we can cleanly and quickly deliver assets. To perform this hand-off effectively, we utilize a tool called Zeplin. Zeplin is a brilliant piece of software that allows a person to click any art element on a design mockup and get a breakout of style info and code snippets. It’s a godsend for any developer. We also use Zeplin to handle the bulk of the art asset delivery, too. If we’ve marked specific icons and graphics to be exported, Zeplin will identify them and let the developer download them on-demand in various file formats. We don’t have to worry about hosting hundreds of art assets on a separate server anymore.
At this point, we’ve successfully transitioned into development and as an artist, we can easily move into a support role to meet any art needs that arise. As I’ve said, because of the diligence in keeping a file organized from the start, it means expansion is easy, transitions are quick, and onboarding new artists onto a project is a cinch.
At Rocksauce, we operate based on our process that has helped our teams create world-class applications for our enterprise and entrepreneur clients. It keeps our clients informed and our team happy. In addition, we also pilot, create and develop new ideas, solutions, and software for companies and ideas big or small. Reach out to us today to see how an innovation or design sprint workshop can encourage goal-setting, ideation, and innovation at your company.