In late 2014, I joined stable/kernel as the Director of Design. Over the past couple months, it’s been a pleasure to design and build things with our team of brilliant developers. In order to keep up with them, a designer must deliver lots of value in a short amount of time. Here are some guiding principles that help keep us on track.
Our work is judged based on what we ship
Mockups and prototypes are valuable tools to communicate design ideas. But too often, a designer’s involvement ends after polishing a round of static screenshots. In reality, users will never see those perfect mockups with model avatars who have conveniently short names. They’ll see the final product as an app on their device. As a designer, take ownership of the finished product by looking at builds before the anyone else sees them. Instead of spending time perfecting mockups and prototypes, sit alongside developers and help them polish the actual app. Mockups lie, but the app tells the truth.
Everything in one place
Every project should have a design hub that links to all relevant design deliverables (sketches, wireframes, mockups, interaction notes, prototypes). At stable/kernel, we create an “App Map” in OmniGraffle and export it as a webpage hosted at a static URL. Clients, Project Managers, and Developers should always be able to see the current plan of record by navigating to that static URL. Maintaining this resource does take a significant amount of time, but it’s time well spent compared to the time wasted comparing dates in PDF filenames and searching through archived email threads.
Know the constraints
If you don’t understand the business goals of a project, ask questions until you do. If your client went through the trouble to create brand guidelines, stick to them. If you’re designing for iOS, use the Human Interface Guidelines as a foundation. If you’re designing for Android, familiarize yourself with the old and new guidelines. And do your best to understand exactly how your design deliverables will be rendered once the final product is in the user’s hands. Creative solutions may come from coloring outside the lines, but make sure you’re still coloring on the page.
Don’t repeat yourself
Developers love to repeat this phrase. It’s worthwhile for designers to adopt as well. Think about design as a holistic system instead of a series of disparate screens. Does an editable text field really need to have 5 different appearances? Should tappable elements share a similar appearance? Create modular components that can be used throughout the project and organize them in a Style Guide. (And link to that Style Guide in the App Map!) Your developers will appreciate your adoption of their mantra, and your future self will thank you for keeping things maintainable.
Create just enough deliverables
It’s inefficient and nearly impossible to create and maintain full-fidelity mockups of every screen for every screen size in every possible state. Deliver just enough to communicate the essence of the design. Sometimes, a few words can sufficiently describe layout rules or an interaction and take much less time than a prototype to compose. Other times, a sketch or wireframe is enough to communicate how a screen should behave, especially if a Style Guide exists. Only when words and sketches aren’t enough is it worth investing the time to prototype an interaction with a tool like Pixate or Framer.
Improve your workflow
Having the right setup is vital to making the most of your time as a designer. Right now, we wireframe in OmniGraffle, create mockups in Photoshop, prototype user flows with Flinto, and prototype custom interactions with Pixate. However, a year from now we may be using completely different tools that allow us to tighten the feedback loop between creation and validation. We’ll always use the tools that allow us to bring ideas to fruition the quickest.