Design can never be static, be it the UI design or the Logic design of a software product. Every project is different and so is the process that varies as per the product, personal preferences, team size and other relative variables, but when it comes to tools, you will find only a handful that is every designer’s pet. These tools pave the way for planning and brainstorming, help in clear communication of ideas, solve technical troubles to build mind-blowing animations and even sort interactions with the developers. Over the years, the app designers have worked relentlessly to refine their design tool kits so that they can fasten the workflow and execute right design decisions.
There are many steps involved in designing an app beyond the visual aspect. Other steps include wireframing and prototyping, but many who are not well-acquainted with the process may feel overwhelmed. Whether you’re an expert or an amateur in design, this list will provide you with the resources needed to start on the prototype for your long-awaited app idea.
OmniGraffle is a diagram design tool that provides the features and freedom to prototype screen flows, wireframes, strategy maps, and a variety of diagrams. OmniGraffle is used to quickly and easily visualize the flow of an app. The tool’s pre-defined symbols and libraries, as well as its familiar interactions and concepts like layers and pages make sure there are few roadblocks to positioning our ideas. OmniGraffle provides an infinite canvas so there are no constraints. It’s also easy to re-arrange diagram components later on in the strategy and planning process by setting your arrows to follow each other. Developers usually use OmniGraffle during the planning and strategy phase to create flowcharts and system diagrams for their apps.
- UI Stencils Kits
This may come as a surprise but the stainless steel stencil kits by UI Stencils are made specifically for mobile and web designers. These high-quality stencils come with a little carrying case and sketch pads specifically sized for different devices (Android phones, iPhones, tablets, etc.). They offer commonly used icons and conventions like nav and tab bars to help designers draw user interface, user experience, and other mockups.
You may use UI Stencils to quickly sketch out ideas during the ideation and brainstorming phase. They help developers keep things a little neater than just scribbling. The sketch pads have a sticky top on the back so you can throw them up on the wall or whiteboard when collaborating with others. Some developers like to break out the stencils after completing very rough sketches on a whiteboard, and before we start doing wireframes in Sketch.
MindNode is a mind mapping tool used to visually represent a central idea and all its corresponding pieces, as well as how each item interacts with the other. MindNode’s single purpose is to help organize thoughts. This narrow functionality makes it easier to do just that, as there aren’t a lot of features to distract you. It’s flexible, making it easy to reorganize your thoughts as they expand, gain new relationships and priorities. MindNode also offers a free flowing nature that doesn’t slow you down, a cornerstone of effective mind mapping. We use MindNode to organize ideas and feature requests from customers.
Generally, traditional app designers prefer 3 different tools for 3 purposes namely Omnigraffle for wireframing, Photoshop for visual design, and Illustrator for vector logos. All these 3 tools are perfectly aligned with Sketch, thereby making one app fulfill all your needs and achieve overall productivity with no wastage of time.
Although Photoshop is a personal favorite with the designers, still some have made a switch to Sketch. This super graphic design tool possesses similarity to Photoshop but is more focused on UI/UX design. The tool is powerful, has a wide range of features and brings out professional results. It extends infinite zooming, 2x export, and styled vector shapes which are apt for multiple resolutions. Sketch offers an ‘Export All’ feature and as it is vector-based, there is no problem in exporting PDF, JPG, and PNG (optionally in 2x) files.
The sketch is suitable to use owing to its simple operation and the feature which can design the symbols of common elements like buttons, tabs, headers etc with ease. It not only fires up the process of wireframing but also enables an easy hand-off to the visual designers. As we are employing the same tool in the visual design stage, there won’t be much trouble in updating wireframes into high-fidelity visuals. All the changes that we have witnessed in-app designing have been made possible because of Sketch’s vectorized model, components like multi-resolution exporting and shared styles and symbols.
- Illustrator & Photoshop
This should go without saying. Not surprisingly, Adobe Illustrator and Photoshop CC are the most commonly seen programs used by many designers. Although Photoshop gained its popularity from photo editing, it has increasingly been adopted by UI and UX designers to create interface visuals.
Being that Photoshop is a pixel based bitmap, it tends to lend itself most appropriately to screen interface design. Contrastingly, Illustrator is a Vector graphic program and has the advantage of infinite element resizing without any loss of quality. It’s preferable to create logos and icons with unrestricted manipulation, making Illustrator a more viable option.
The Marvel app converts raw sketches on paper into engaging, tappable prototypes that permit you to demo your app ideas and collect feedback from others. It works perfectly well with .psd files, so you are not required to convert your designs before uploading. Marvel saves the testing time consumed on changes as it automatically updates them in the background. By replicating the device, the web browser can successfully test your prototype very much in the natural milieu.
Leading you towards most realistic prototyping experience, this tool also gives the benefit of custom animations and fading between screens. Marvel, being an interactive tool, enables designers to import from Sketch, build prototypes of app interactions, animations, and transitions, and further forward these prototypes with stakeholders and developers. It is a convenient way to open up an entire flow to the customer as well, without being bothered by the static user flows.
Here, designers don’t have to be equipped with advanced programs like Framer and After Effects to include animations, transitions and other interesting features in their app layouts. Marvel permits any designer to form transition-based animations over various app screens speedily. The tool is used to prototype an entire app, especially the one with basic transitions in a large number of screens.
Invision is a free prototyping tool for mobile and web that makes real-time collaboration easy for teams. Invision prides itself in making prototyping accessible for everyone. In fact their tagline reads “Design Better. Faster. Together”, but it is their “the world’s leading prototyping, collaboration and workflow platform” that really encourages developers to give them a try. At first glance Invision certainly looks very professional and it seems they mean business, listing some of their big name company users. Invision does this by enabling direct comments on designs and threaded conversations. As a UX prototyping platform, Invision is very accessible and straightforward to use and lets designers update screens easily while retaining button interactions from previous screens.
This prototyping, collaboration and workflow tool quickly transforms static designs into fully interactive prototypes. Prototypes which are fully equipped with gestures, transitions and animations for responsive web, iOS and Android. Most importantly, this tool helps developers better sell to potential and existing clients, allowing them to navigate through the designs and experience it first-hand. Invision has enabled many developers to test initial mobile app wireframe flows and visuals more tangibly. It lets designs come to life without any code required, allowing designers better identify problems or UX concerns upfront, and enabling them to iterate more effectively.
- Adobe Comet Experience Design (XD)
The next product among Adobe’s already wide selection of creative tools is Adobe Comet. The app includes live preview for designs on connected devices, easy prototype link sharing, and imports assets from other Adobe products like Photoshop and Illustrator. Although there are currently “lots of tools tackling many parts of the problem” of designing apps, Adobe is positioning XD to compete more directly with Sketch, and it does a fantastic job. Not only will you as a designer be able to design artboards, but XD lets you make macro changes and prototype as well.
It begins with the type of project you have (Web, iPhone, iPad or ‘custom size’ designs), but XD also has UI Kit packets preloaded. You can choose from iOS, Google’s Material Design or Windows. XD also shows you recent files so you can jump right back into prototyping. Where XD really shines is when you’ve got larger projects. Multiple artboards can both be altered in batches and given unique elements. If you had a view displaying multiple users, for instance, XD is able to give each of those users a unique name rather than having “John Smith” show several times.
UXPin is an intensive wireframing and prototyping web tool. Its simple interface and built-in features make you assimilate a design and create highly interactive wireframes and prototypes. Having drag and drop synchronization with Photoshop and Sketch, this tool systematizes the workflow keeping all the layers of the design intact. To execute design decisions, usability testing is also present which can help to perform tasks, count the users and their clicks and display results to the team.
UXPin adds efficiency to the design, testing, and rollout stages. Here, there is a dynamic toolkit that consists of various design elements and patterns for creating brilliant designs from scratch. The UI libraries are a great source with several ready-made features including bootstrap elements. The drag and drop interface of UXPin enables you to build wireframes and prototypes that are compatible with multiple devices with a range of screen sizes and resolutions. Other powerful components are the intuitive commenting system, real-time joint editing and easy-to-share previews. A spectacular add-on is Smart Guides, wherein you can measure the exact distance between the elements.
It is possible to edit all the images within UXPin, i.e., you can change brightness, sharpness, contrast and transparency with ease. The tool also gives the advantage of exporting the finished prototype to pdf, HTML or png formats. Thus, you can successfully execute interactions that can improve the performance of the entire project. The UXPin library supports all the three platforms-iOS, Android, and the web.
Zeplin is a plugin and web app that is compatible only with Sketch. It combines all the attributes of the shortlisted elements into a collective specifications sheet, which clearly explains the handoff between the design and developer teams. With this app, you can frame living, breathing, and interactive specification sheets. Zeplin is useful as the designers are not required to wait until the end of the design process to hand over the specs to the developers. The developers can be introduced to the process much earlier and then iterations can be done as per the need of the course. The app can cut the speccing time to a great extent and thus, enhance the overall app speccing process.
It goes without saying, that any tool that can expedite the slicing process is a resource worth looking into. Slicy is a Mac app that specializes in exporting assets (png, jpg etc) from a Photoshop PSD. This adds a huge benefit for designers in iOS workflow using Photoshop. With Slicy, exporting visual assets out of your PSDs becomes virtually painless– just drag & drop your Photoshop file on the Slicy window after you have launched the application, and your files are automatically exported. The only thing you need to do is tell Slicy which layers, or layer groups, you want to be exported.
A wonderful prototyping tool, JustInMind allows better and faster prototyping for websites and mobile apps. Created in 2008, the best feature of JustInMind is that it can be downloaded to your computer, not the just browser, which gives the option of working offline. Not only you can design self-explanatory wireframes, but receive feedback on the same instantly. Being a dynamic prototyping tool, JustInMind is accompanied with a superb widget library that permits you to enter HTML, videos, online widgets, docs, interactive maps and online/offline content in your website or application.
From websites to advanced administration, the application does its wonders for everything you want to create. You can add elements from UI libraries and build Master pages easily. A big merit is that you are able to download add-ons through ready-made modules, which has bootstrap elements too. Also, now conveniently share mobile prototypes with other team members and conduct testing on your smartphone. Simplicity works in favor of JustInMind, but there are times when a lot more is expected from the performance.
Iconjar allows developers to upload and organize all of their icons into a single hub from which they can search for specific icons and browse their icon collection in full. This tool also allow developers to drag our icons into Sketch, Photoshop, and Illustrator. Only certain file types are supported (.svg and .png are among them, .ai and .sketch are not).
Iconjar is a time saver. Developers work with over 20 different sets of icons and potentially thousands of individual icons. Iconjar allows such designers to organize all of their icons in one place so they don’t have to go searching for them. It also helps locate existing icons for icon design ideas. Not all icon styles fit in an app, so when you’re searching for something like “filter” the search process itself sometimes sparks an idea for a certain kind of filter icon designers can tweak to use.
PlaceIt is a simple, drag-and-drop web tool which lets designers generate realistic product screenshots within seconds. If you want to reveal your latest app design to a client in an enticing and elegant way, PlaceIt is certainly worth a look. It also provides realistic environments to help your designs beautifully come to life. PlaceIt supports screenshots of iOS, Microsoft, and Android products.
- Adobe Color
Having trouble finding the perfect color scheme for your upcoming project? Adobe Color lets you create custom color schemes with an interactive color wheel and browse thousands of previously created color combinations from the Adobe Color community. This online tool also lets you easily edit color palettes and save them for future use in Adobe applications such as Photoshop and Illustrator. You can view the newest, the most popular, and the highest rated color schemes to specify your selections. A truly useful tool for visual design.
- Font Face Ninja
Font Face Ninja is a free plugin that lets you identify the font being used on any website. The extension is extremely simple to use and has consistently helps developers cultivate a sense of inspiration for exploring new unearthed fonts. Font Face Ninja also hides all pictures and commercials so you can seamlessly enjoy fonts on a blank background. Once you’ve added the plugin to your browser, and have clicked the extension icon, simply drag your mouse over the font being used on any website, and a pop-up window containing the font name, point size, and line spacing will appear. Pure magic!
- Pen and Pencil (Special)
always use pencil and paper, or pen and a notebook, throughout the design process to list, sketch, and map out thoughts. The simplest of any tool, there’s no real learning curve to jotting down thoughts on paper. Stepping out of the digital space is something that is too often overlooked. It helps to remove yourself from distractions and sit with the project you’re working on. It’s also the fastest way to generate ideas and, more importantly, get ideas out. We rely on pencil and paper for a no excuses, no obstacles approach to ideating.
Although a design process may vary by the type of project, personal preferences, team size, and other similar variables, as designers we find we keep coming back to a handful of tools. These tools provide us a solid foundation for planning and brainstorming, help us communicate our ideas clearly, overcome technical hurdles to create stunning animations, and even simplify our interactions with developers. From powerful new design software meant specifically for apps to the ever-useful pen and paper, these are the tools the Savvy Apps design team wouldn’t want to work without.