How to Design for a Developer
Time and time again, designers will tell you about the importance of having a relationship with the developer from the start of a project to the end. I’ve heard this repeated at multiple studio tours, talks, and even read about it in blogs like this one from InVision: Why You Should Design to Develop. Developers aren’t designers, and designers aren’t necessarily developers. It’s important to have that communication right away in order to end up with the best design.
I can speak from experience here (at least a little). Last year at an internship, I had the opportunity to re-design a couple of websites for the company I worked at. I can remember having multiple meetings with the design team and developers. We would show the wireframes up on a large screen, and sync it to our phones via Sketch. We would discuss some of the potential issues with content structure, navigation etc. And I learned a ton from these meetings! While the other designers might have some more “designy” advice, the developers had a ton of insight into technical things that I wouldn’t have otherwise thought of. They can tell you if what you’re designing is even possible, and can help redirect you from spending too much time on something if it isn’t going to work.
Developers save you time.
Well these meetings continued throughout the process, and each time I would come back with a page of notes and changes to make. And the thing was, these meetings never took that much time. In fact, it was probably one of the best uses of our time. (Not to mention how excited the new design made everyone by the end of the meeting). It kept everyone informed and on track throughout the entire project.
And if you’re really good about sharing your ideas with your developers, your designs can reach the next level. I’ve recently learned about some tools that can help with this.
You’ve probably used this, or at least have heard of it by now. Every design studio I’ve toured used this tool, and it is a great one. InVision allows you to demo your design by showing a clickable walk-through. It also allows other people (developers, designers, clients) to comment on specific aspects of your design.
This is a new one I just discovered. Flinto is an app that syncs with Sketch (yay) and allows you to create simple page and content animations. The interface looks just like Sketch and is a lot easier to maneuver than Adobe’s AfterEffects (although that is also a good tool to learn).
Similar to Flinto, but from what I understand, is better with fewer screens and more extensive animation. It uses a timeline similar to AfterEffects, but the interface is still simplified to look like Sketch. (See here to read more about the difference between Flinto and Principle).
I haven’t used this one yet, but it is basically a red lining tool to pass off to your developer. It can show you dimensions of elements and distance between them to create (as they say) a pixel-perfect design. And yes, it does sync with Sketch.
All of these apps can help you communicate your idea better to the developer, and, in the end, create a better looking design.
Happy Creating (and developing!) 🙂