The Mobify Toolbox
Designers at Mobify rely on the interface design tool, Sketch, by Bohemian Coding. Sketch is our design tool of choice as it provides options that best reflect a CSS-based design. It is also completely vector-based, as opposed to raster-based editing apps such as Photoshop.
Our workflow at Mobify allows us to get into coding as quickly as possible by leveraging a grid- and unit-based approach in Sketch, with inspection tools such as InVision Inspect or [Zeplin] (https://zeplin.io/).
The following is a list of tools that are both industry-tested and readily available. Although we stand behind all the tools on this list, it's up to you to determine which tool and approach will best communicate your design ideas.
What: Sketch is a vector-based user interface design tool. We like Sketch for its ability to easily manage multiple pages and variable artboard sizes, allowing designers to keep an entire project in a single file for easy management.
Our assessment: We recommend using Sketch instead of Photoshop as Sketch is suited to building precise CSS layouts. However, you’ll probably want a license for both as Photoshop is stronger for photo manipulation and retouching.
What: Sketch Mirror is an iOS app that enables mirroring between Sketch and iOS devices. You can use this to view your mockups on an actual device.
Our assessment: It’s a great tool that will allow you to better understand how your designs will feel and function in the intended context.
What: Crystal is an app on the Google Play store that will allow you to view your
.sketch designs on an Android device.
Our assessment: Very similar in functionality to Sketch Mirror (described previously). We always recommend previewing designs on the physical device for which they are designed.
What: InVision is a prototyping tool that allows you to test inter-screen interactions and user flows. You can drop in
.psd files directly, and add many standard transitions, such as slide-in, fade, or pop. InVision Sync allows you to keep all of your prototypes locally on your computer and have your shared prototypes update as you work.
Our assessment: We rely on InVision to communicate user flow and design systems with development teams; it’s also pretty great for collecting feedback from customers, using the commenting features.
What: Principle is a prototyping tool for creating user interactions and animations.
Our assessment: This app is best for micro-interactions within the page, and complements how we use InVision. We use Principle for designing same-page movement, and InVision for designing the inter-page movement between pages. Principle includes a powerful suite of Keynote-like motion tools for quickly mocking up interactions.
Visual Studio Code
What: Visual Studio Code is a free and open source text editor, available for macOS, Windows, and Ubuntu. Additional functionality can be added with extensions available through the VS Code Marketplace.
Our assessment: We believe that we can only design the very best mobile experiences for shoppers when we fully understand the constraints; one of these constraints is the capabilities and limitations of code. Understanding the medium in which you are designing will only benefit you. Visual Studio Code is our favourite by virtue of its extensibility (and the price is right).
What: ImageOptim is a tiny, single-purpose app that reduces image file sizes, while preserving image quality, by applying advanced compression. Reducing your image file sizes will help improve app performance.
Our assessment: We appreciate the simplicity, speed, and easy user experience offered by ImageOptim (and the price).