5. Mockups
Pixel perfect screen designs that are the scale models showing exactly how the finished product should look and flow. They also provide the material from which we can pull the visual design specs engineering needs.
Tools
- Sketch
- Flinto
- Zeplin
Sketch
Pixel Perfection
You all know Sketch. Most of you use it. I used to use Illustrator. I did not hate it. But it clearly was not a UI design tool. Sketch is. Pixel based. Data integration. Batch export features. Basic clickable interactive prototyping. And its system of symbols and overrides that keep my work truly DRY (Don’t Repeat Yourself). Its not perfect, but its getting pretty close.
I started with CorelDraw, Flash and Illustrator. I switched to Sketch shortly after leaving my PC for a Mac years ago. For a while it was the only serious alternative to misusing Adobe products. Recently many direct competitors to Sketch have sprouted up. This is fantastic.
Benefits
- A layout tool optimized specifically for screen design
- The developers are constantly releasing improvements
- Lots of 3rd part plugins to extend value
- Symbols and overrides help keep things DRY
- Real data integration
- Sketch Cloud makes showing easy, plus supports basic interactivity (so long InVision!)
Drawbacks
- The symbol overrides list can become a hard to scan mess creating friction.
- Mac only
PRICE
- $99 per year. That’s a steal of a deal for this chef’s knife of a tool.
Alternatives I Have Used
- Illustrator. Vectors have always been better for UI work. Plus, symbols! Still viable solution. No excuse for using PS.
- CorelDraw. Vectors before I switched to Mac. Still has unique helpful features unheard of on other apps, like making piece slides of any arc from a circle with a click and drag.
Flinto
Animated Transitions
Flinto imports a Sketch source file. You define start and end states for selected dartboards, and with a few selections you have a satisfying animated transition. It is easy in theory but I always find its easy to get confused switching between states and managing elements transition.
I use Flinto rarely. Most of my focus in a larger scale flow, less on micro interactions and animation. But when it is necessary to communicate these to developers a Flinto demo is far more effective than static screens and narrative.
Benefits
- Very similar UX to Sketch
- Define state is easier and faster than managing a timeline
- Active developers
Drawbacks
Focused on very narrow aspects of design
Easy to forget which state you are working on
Price
- $99 which include all updates for one year.
Alternatives I Have Used
- Principal. Timeline based. I found it more complicated.
- Flash. Yes folks, Flash has always been able to solve the same problem, just in a worse way.
Zeplin
Screens and Specs
With a keystroke Zeplin takes your Sketch, PS, XD or Figma source file and produces a complete set of screens and interactive style guide and shares them with your team.
My goal in using Zeplin is to never write another visual spec document again.
Benefits
- Clean and simple UI
- Easy to understand
- An increasing list of integrations with other tools like Slack and Jira
- Syncs engineers perfectly with the latest designs
Drawbacks
- Renaming artboards in Sketch de-syncs them with the screens in Zeplin.
- Expensive compared to other subscription services.
- Sketch Cloud already does a lot of what Zeplin does.
Price
- There is a free account, but you will quickly outgrow that
- $19/month for 3 active projects — supposed unlimited inactive projects.
Alternatives I Have Used
- Avocode. I preferred Zeplin’s UI.
- Sketch Cloud. Does some of what Zeplin offers, but not enough yet.