It’s no secret that app design will have a huge impact on the desire of people to download and continue to use your app. We’ve selected the very best app design tools to help you create beautiful, amazing mobile apps. We’ve ordered them by the beginning stages of sketching and object creation then proceeded onto wireframes, prototyping, and adding finishing touches to your mobile apps.
Early Sketching
iOS Sketch Paper
Many designers and app developers prefer to start off the initial app design process with the good old traditional pencil and paper. iOS Sketch paper is generally a great place to start, with a dot grid for alignment and several screens per sheet. There are even markers along the screen frame to help you align windows, popups, and placement of notifications and buttons. iOs sketch paper is available for devices with iOS 10 (iPhones) or iOS 7 (iPads, iPhone 5), and comes with both a landscape and portrait mode for each device.
Android Sketch Paper
Same concept, different platform – Android sketch paper gives you the appropriate screen sizes and dimensions to draw out new development ideas with a pencil before digitizing them. Some versions of the Android sketch paper don’t come with a dot grid like iOS Sketch paper, but we’ve found a version that does! Sketch papers are a fantastic way for digital artists to begin the app design process.
Most sketch papers should be free to download so you won’t have to worry about cost.
UI Stencils
To help take your android and iOS sketches one step further, we’ve included a UI stencil kit that will help you hash out features like notification bubbles, social icons, dropdowns, etc. You can buy a complete Starter Pack set of stencils for $80, and it comes with everything you need to start sketching out your app ideas.
Objects + Artwork
Adobe Color
Adobe Color is app design tool helps you choose color schemes based on any color or input. This super cool design tool can be adjusted by shade or tint to create imperative perfectly matched colors no matter what information you give it.
Adobe Color also offers pre-made color palettes to help you quickly choose the right color scheme right from the get-go.
Pyxel Edit
Pyxel Edit is a tool that allows you to make a wide variety of 8bit objects, scenes, and animations. Pyxel Edit lets you edit your 8-bit art by individual tile, and all tiles update instantly as you make changes. It allows you to export files in XML, JSON, or plain text to make sharing and transitioning to other app design tools easy.
The main drawback of Pyxel Edit is that it is relatively new, so support is limited. Also, it only allows for a small list of export file types, meaning it might not be compatible with the app design tools already in your toolbox.
Pyxel Edit is currently in Beta, and they warn users that the “ price will then increase gradually with newer versions.” It’s currently only $9 for the Pyxel Edit license key for Windows and Mac, so if you find yourself making a lot of 8-bit artwork for your app designs, you should take advantage of this design tool now!
Aseprite
Another pixel-based 2D art design tool is Aseprite, which is compatible with Windows, MacOS, and Ubuntu systems. This app design tool allows you to create animated characters and graphics, as well as retro images.
The $15 license fee gets you full updates and includes Windows portable .zip, Windows installer, Mac OS X app bundle, Ubuntu 14.04 .deb package, and a Steam key. The tool has an extensive library of tutorials and guides to help you get the most out of your license, from the basics of the workspace to guides on how to create animations and layers.
The tool is known to have bugs and issues, but it does a pretty good job of keeping track of known issues and statuses on GitHub.
Inkscape
Inkscape has made itself famous as a free design tool similar to Adobe Illustrator. This free and open source vector editor is a fantastic tool if you’re looking for a professional editing suite for Windows, MacOS, and/or Linux. Inkscape offers broad file format compatibility, live editing capability, drag and drop object rendering during interactions, full control of object manipulation, and much more – also completely on par with what Illustrator offers. The best part is it’s completely free to download.
Inkscape has a large community where you can ask questions, learn new functionalities and skills, start discussions, and show off some of your best app designs. One of the few drawbacks of the tools has been known to lag, sometimes significantly, though this can depend on the system you’re using, as well as some filters used on objects, etc.
Images
Unsplash
If you’re looking for beautiful, unique, and often inspiring images to use in your app design, look no further than Unsplash. Unsplash boasts “free, do-whatever-you-want” high-resolution photos that you can download with one click (you don’t even have to cite the source!). Unsplash has been around since 2013 and functions a bit like a social channel in that you can follow your favorite accounts and see their photo additions in your ‘followers’ feed.
One of the main drawbacks is the site is image-based with microscopic searchable text, which can mean that finding the image you’re looking for can get tricky. Also, image download is only one image at a time, which can be time-consuming if you’re downloading lots of pictures.
Pic Jumbo
PicJumbo is a great resource for free stock photos as it doesn’t require you to create an account or worry about licensing. Images are categorized by image subject, which can make finding a particular type of image easier. PicJumbo allows you to download pictures and do whatever you’d like with them (although they do recommend that you attribute credit to the source). Photos are organized into categories (more so than Unsplash), and social sharing buttons are available for each image.
The main drawback from this free image library is images can be difficult to find via search since the images aren’t intuitively tagged. Additionally, it’s been reported that images take longer to download than similar websites.
Pattern Library
The Pattern Library is precisely what it sounds like – a library of patterns, free to download. The patterns range from geometric shapes to realistic patterns to cartoonish flat application designs. It’s entirely crowd funded, which means if you’re interested in sharing your patterns, you can write to them to share your work. You could spend hours of time making your own versions of these designs for use in your app, or you could just simply download them for free and for any use here.
One drawback of the source is it can be difficult to search for a particular type of pattern or image since there isn’t really any rhyme or reason to their order. That drawback is definitely overshadowed by the uniqueness and visual appeal of the images available.
Freepik
Freepik provides designers like you with free PSDs, Icons, Vectors, and images to use on their mobile design projects. They offer a wide array of layouts and patterns for any need, even including charts and marketing material. Unlike the other free image sources we’ve listed, freepik is tightly organized by category, file type, occasion, placement, and more, making it easy to find exactly what you need (for free!) very quickly. One of the main drawbacks, however, is they do require you to cite the creator when you use the images (a link is provided to you at download).
The site is available in a wide array of languages too, which makes it a widely used tool in the mobile app design industry.
Wireframing + Prototyping
Omnigraffle 7
Omnigraffle is a powerful design tool for app development that helps designers create beautiful graphics of all kinds, including wireframes, visual maps, and mockups. The tool is compatible with Mac and iOS and offers tools to create artboard layers and layered documents, grids, and other layouts with a number of drawing tools.
The cost of Omnigraffle is a one-time $99 per license, $199 for the pro edition. The tool is pricier than many free tools (though they do offer education and business pricing), and you have to buy a license for Mac separately from the iOS license.
Omnigraffle is compatible with Photoshop file type, and the pro version offers compatibility with Visio.
The tool is only compatible with iOS and Mac, and the license for each must be purchased separately. The standard version is missing a lot of functionality that is offered with the pro version and is not compatible with any non-iOS systems or file types.
Invision
InVision is a prototyping tool that allows your app prototypes to be fully equipped with animations and transitions for a responsive web, iOS, and Android apps. It supports many file formats, is compatible with many tools in your toolbox, and is compatible with Photoshop, Illustrator, and Sketch platforms. It has a comment mode feature in the preview that allows for collaboration between teams and with clients and even allows for real-time collaborating with its “LiveShare’ mode.
$25 per month for unlimited prototypes, $15 per month for 3 prototypes. A team of up to 5 members runs for $100 a month for unlimited prototypes. All plans include encryption and daily backups.
InVision allows you to integrate your prototype with Dropbox for cloud saving, and also supports more file types than Proto.io or Marvel. Since the tool syncs with Dropbox, accidentally deleting a screen within InVision won’t remove the file in your Dropbox account. You can share your prototypes with teammates and clients via email, SMS, embedding, downloading, or a URL, and the when viewed on mobile devices, InVision lends a very native user experience. On a web view, InVision provides a brief tutorial to make sure the user knows all capabilities before viewing the prototype. It even provides a notification if a newer version has become available. Lastly, InVision allows for feedback via a comment feature, so clients or peers can easily review.
One of the main drawbacks of InVision is that its transitions and animations can be limited. Customer support is also very limited, and the features don’t allow for wireframe creation (it’s best for ready-made mobile app prototype designs).
Framer
Framer studio utilizes a simplified version of JavaScript that allows you to do all the things you can do in web browsers – meaning you can use live data to create real-time feeds. Android and iOS apps allow you to view your projects on any device. If on the same WiFi network, cross-device connections refresh your designs every time you save in the Framer Studio.
Framer.js, the JavaScript framework, is open-source and free. Framer Studio is $129.
You can refer to layers and objects in Photoshop or Sketch by the names you’ve previously given them while designing your app in Framer. Anything you can do with JavaScript, you can do in Framer. Framer has an Android, iOS, and a Windows 10 mobile app so you can view your prototype on any device.
Framer doesn’t have the same GUI that allows for drag-and-drop functionality as the other prototype tools on this list. Developers will easily pick up the functions, but designers might have trouble, but only at first.
Framer is an entirely code-based tool, which means you’ll need to hard code every animation and interaction. Fear not, app designers – Framer does use a simplified version of JavaScript called CoffeeScript, so while you will have to code everything, it’s a little easier than full blown JavaScript.
Flinto for Mac
Flinto provides Mac users all the tools needed to quickly create transitions and transition based animations. You can display a large number of screens at once, helping you to trace and perfect your user’s journey through your entire app and all of its interactions. It allows for import from Sketch and other widely used tools, and you can share your prototypes via email or SMS. Flinto is best when you’re developing an app that has many different screens and individual transitions between screens.
Flinto for mac costs a one-time $99, and they offer a 14-day trial if you’d like to test it out.
A huge benefit of Flinto for Mac is its compatibility with Sketch. It not only allows for import from Sketch, it also imports all Sketch elements as individual objects. It even keeps the names you give your Sketch elements, making the transition from Sketch to prototyping seamless. It allows for 3D prototyping and includes built-in mobile app-specific behaviors and gestures (think toggle switches, scroll-based animations, tap, double tap, long tap, swipe, etc).
A key drawback of Flinto for Mac is that it’s, well, only for Mac. Another drawback – even though the prototypes can be shared via email or SMS, the file must be opened by the Flinto iOS app before the interaction, which can make sharing prototypes with clients directly from the tool difficult. There is no Photoshop import, and its lack of animation value export makes it difficult for mobile designers to share prototypes with a development team.
Proto.io
Proto.io is an app design tool that creates beautiful and fully interactive prototypes and supports a very wide range of file types, including mp4, .weBm, .pdf, .psd, .ai, .eps, and .sketch files. No coding is required with Proto.io, which makes it a good choice for mobile designers who want fully-functional prototypes to deliver to clients or teams without waiting for a development team. The tools allow you to create public links of your work for easy sharing.
Cost is subscription-based and costs $29/month (or $288/year) for up to 5 active projects.
Proto.io allows you to easily create public links of your prototypes, making sharing your mobile app designs with clients on both mobile and desktop easy and efficient. You can also share your designs with the community on Proto.io Spaces. Proto.io has a pretty extensive UI element and template library, which helps you create mockups quickly. It also allows you to create transitions between multiple screens for a complete prototype. Lastly, Proto.io is compatible with Dropbox so that you can sync your projects to the Dropbox cloud. There’s an iOS app as well as an Android app so you can view your projects on any device.
No autosave feature means that to see changes made to your design, you have to manually save then preview your project (no live preview feature). The design tool can begin to run slowly if you add too many interactions. Lastly, no 3D animation is possible.
Related content: App Development Tools Game Developers Should Use When Building An App
Design
Marvel
Marvel offers a great design tool called Canvas that allows you to design mobile apps within your browser. Marvel is completely compatible with other traditional mobile design tools like Photoshop and Sketch (also on this list), which means exporting and importing images into your app design board is a snap. They have also recently integrated with Dropbox and Google Drive, so your design prototype is automatically saved to your drive. Lastly, Marvel has Android and iOS apps, meaning you can sketch out your design ideas using the iOSabove or Android sketch paper (or a dinner napkin, whichever is most your style).
The cost is $15 a month or $144 a year for an individual license with unlimited projects. They offer a 20% discount when you buy a yearly subscription.
Marvel is highly compatible with the most common mobile app design tools and cloud-based drives, saving you a considerable amount of time and helping you to seamlessly transition through the application design process. Marvel also allows you to share your prototypes via URLs, email, SMS, QR Code, or embedding, and you can download prototypes in HTML, CSS, and JavaScript (with the pro plan).
Marvel doesn’t have a comment feature yet, which is a very standard feature for prototyping tools. Marvel also doesn’t scale to fit custom screens unless viewed in the native app with your personal credentials, which makes sharing prototypes on mobile devices difficult.
Principle
Principle for Mac is a handy tool that helps you prototype and test complex animations and interactive aspects of your app. The robust tool lets you create interactive game flows (for game designers) and test out interactions on multiple screens before you begin coding. This means you can see possible issues and roadblocks ahead of time and can save time between design teams and development teams.
Principle offers a free trial and costs $129 per license, and they do offer a free trial if you want to test it out before committing to purchase. A huge benefit to Principle is it allows you to test out functionality that is based on user input, such as object dragging, color blending, and selecting from a drop-down. If you’re designing a complex multi-screen app that requires user input, Principle can be a great tool for you.
Sketch
Sketch is a popular vector-based UI app design tool that many designers have used to replace Adobe Photoshop. Sketch is a combination of ACS favs, like Photoshop, Illustrator, and Fireworks (R.I.P.). Sketch provides you with fast styling attributes and pre-installed templates and text styles to ensure your app’s design remains consistent across all screens and devices. Sketch has quickly become an industry standard for many app designers and the go-to for both design and development.
The Sketch License has a one-time fee of $99 per developer with the option to extend the membership to team members.
Sketch has many benefits for mobile app devs. Its ability to integrate seamlessly with almost every other app design tools in your toolbox means you can transition effortlessly through the design process. Sketch also lets you create reusable elements distinct. It also offers live updating as you make changes, so it’s never out sync.
The main drawback when working with Sketch is most app designers still use Adobe Creative Suite tools, and Sketch makes exporting files to these tools more difficult. This can cause significant time delays when transitioning between design steps.
Sketch has an enormous amount of additional plugins and tools that are you can add to your Sketch UI.
Affinity Designer
Affinity Designer by Serif Labs is a graphic design tool for Mac and is very comparable to both Adobe Illustrator and Sketch due to its ability to edit vector-based images. Affinity is often credited with being more ‘beginner-friendly’ than Illustrator and Sketch, and was specifically created as a tool for professional designers in the Mac design environment.
An Affinity Designer license costs a one-time fee of $50 (currently on sale for $40!) and is currently only available for Mac. There is a Windows beta version available, but so far Affinity does not have any companion apps for a mobile-based rendering of prototypes.
A significant benefit to Affinity Designer is its ability to open, and edit PSD, AI, and EPS files with relative ease. Another major advantage is the cost of the tool – $50 is considerably lower than a license key for Adobe Creative Suite, making it the low-budget choice for many app designers.
One of the drawbacks of Affinity Designer is that despite being a vector editor, Affinity Designer exports files as PSDs rather than AI documents, which means going from Affinity back to AI is impossible. Exporting files once they are finished, however, is a breeze. Secondly, Affinity Designer sometimes causes pattern overlays, files, and grouped objects to drop off from imported PSD and AI files.
Pttrns
Pttrns is a project of an individual app developer named Robin Roszka and is a design tool meant to help you to view visual examples of how essential app functions and interactions would look live. This tool also allows you to see the solutions that other app designers have come up with, helping you to learn new tactics, app screen options, and transitions for the best UX/UI possible.
The images are tightly categorized by functionality within the app, and you can search by platform, category, popularity, and tags like ‘fun’ and ‘minimal’. This categorization serves as a significant benefit, making finding inspiration for exactly what you’re looking for quick and easy. The tool is free to use.
The major drawback of Pttrns is that it doesn’t necessarily tell you how to create the solution shown, just gives you a visual to let you know it can be done. Even without tutorials and instructions, Pttrns is a great visual tool for both new and experienced designers alike.
Tips
Apple’s UI App Design Do’s and Don’ts
If you’re looking for tips and tricks to use in your iOS app, Apple is here to help. Apple’s UI App Design “Do’s and Don’ts” offers a complete library of best practices and interface design tips available to all designers and app developers for free. The library covers formatting, touch controls, contrast and usability, alignment, and more for Mac, iOS, watchOS, tvOS, and basically anything else Apple related that you can develop for. It even includes developer forums and bug reporting to ensure all bugs are being addressed and to give you a place to ask questions and crowdsource advice.
Tuts+
Tuts+ is a mobile designer’s go-to tutorial website to learn new skills and sharpen existing ones. Tuts+’s enormous library of tutorials on any skill anyone could ever want to learn (and it’s not limited to development and design work – there’s even crocheting!). Tuts+ tutorials are thorough, walking you through each action taken to complete the desired project. They also provide you with tons of additional info and resources.
Android Patterns
Android provides an extensive library filled with tons of unique Android design patterns and layouts to inspire you and help you create Android apps. The details are organized by which category the app falls into, such as ‘productivity’ or ‘social.’ If you need some new app design ideas for Android mobile devices, check out androidpatterns.com.
Fantastic Examples + Inspiration
If you need a little inspiration to get your design wheels turning, we’ve also included a few bonus sources you can use to get inspired, see what solutions are already being implemented into the design of existing apps, and learn more about what you can design.
Laudable Apps
Laudable Apps is an independent showcase of beautifully designed iOS apps. The site showcases the very best of iPhone app design, from news apps to image galleries and everything in between. The inspiration site uses hardly any words, with the focus on emphasizing the elements and overall appearance of the mockup rather than an explanation of it. If you need some ideas for flat design, layouts, or objects, Laudable Apps is a great resource.
Mobile Patterns
Mobile Patterns is about as minimal as it gets for a tool that delivers a lot of inspiration for designers. Similarly to Pttrns, Mobile Patterns is a library of existing mobile app screens and their specific elements; the library doesn’t provide tutorials or guides on how to create these app screens. Functionality and type categorize images, and all images are free to view. If you’re looking for a cut and dry mobile app inspiration site, Mobile Patterns is for you,
Collect UI
Collect UI is a feed-style library of mobile app design examples that updates daily from multiple sources around the web. The library is always updating and includes new designs and solutions, especially after new OS releases. You can sort by category, date, and functionality, as well as the goal of the app as well (example: Crowdfunding Campaign). If your app has a unique purpose and you need fresh inspiration on how best to design it, look no further than Collect UI.
Additional resource: Creative Bloq
Marline
Marline is an app for iOS devices that allows its users to plan their travel and beach adventures by browsing weather forecasts, track beach tides and tidal height info, wind direction and speed, and moon phases. The minimalist-style app design provides a soothing look and feel, and the beautiful simple interface makes using the app again and again effortless.
Streaks
Available in the iTunes store, Streaks is an app that is meant to help the user form healthy habits by visually displaying a schedule and the user’s progress on the various tasks they’ve set. Streaks was featured as one of Apple’s Best App of 2015 and was an Apple Design Award winner in 2016, so there’s no denying its flat, colorful, and simplistic layout is intuitive and beautifully designed.
Isotope
Isotope is a mobile app for Android with the goal of making the periodic table general appealing for users who want a high-quality UI. Access to details about each element is available with the premium version of the beautifully designed app. Developer Anders Bjarnle said he developed the app because the usual Periodic Table design was “too boring to study,” and he set out to change that by making an interactive mobile app both beautiful and extremely informative.
Mint
Mint has become the go-to money management app for both Android and iOS users. While financials can often be a boring subject to review, Mint delivers a surprisingly beautiful app experience that graphically displays the user’s financial health and budget in one overview. One of Mint’s founders Jason Putorti says that his goal is to design a User Interface that instills trust and confidence in user, which is very important when it comes to users’ financial information.
Mint can display financial health and info in a number of ways, from line graph budgets to pie chart spending habits. Mint mobile apps boast intuitive, easy-to-follow menus as well as a strong, simple color scheme throughout the application.
Google Trips
The Google Maps app has become the standard of map design for developers and designers since its release. Google Trips takes the familiar, all-in-one feel of Google Maps one step further by combining the Google user’s travel itinerary with Google’s powerful map and search network. This means users can search for, locate, schedule, and view itinerary for just about any activity in any area of the world. With Google Trips, everything a user needs for their travels in one sleek beautiful app on Android devices.
Google Trips has a variety of app screen layout variations, such as grid-like displays, icon based lists and itineraries, and map listings with full info located underneath the geo-location map.
3D4Medical Complete Anatomy
3D4Medical Complete Anatomy is an app designed only for iPad devices that give extremely detailed, realistic visuals and information about human anatomy. Used primarily by caregivers and students, this app can display every possible angle of over 6,500 anatomical structures in stunning 3D quality. The app allows the user to animate the model body in the UI, which allows medical professionals to accurately visualize movements and effects of the body. It’s no surprise this breathtaking app design also was a winner of the 2016 Apple App Awards. The app comes with an extensive library of resources and reference materials created by advanced medical professionals, making the app a critical component for any healthcare professional who seeks intricate, detailed views of the body displayed on an extremely well-designed 3D application.
There you have it, a complete list of app design tools to help you design your app efficiently, accurately, and most of all beautifully to captivate and impress your audiences. Do you know of any other must-have design app design tools? Let us know!
Comments are closed.