Here are some guiding mobile design principles that help keep designers on track with a team of brilliant developers.
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 up 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 development builds before your work sees the light of day. Instead of going back to perfect 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, etc…). 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 URL. Maintaining this resource does take a significant amount of time, but it’s time well spent compared to sorting through a dozen PDFs or tracking down decisions in 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 mobile design as a holistic system instead of a series of disparate screens. Does an editable text field really need to have 5 different variations? 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. When words and sketches aren’t enough, only then is it worth investing the time to fully 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.