Here’s the situation: you’re a developer and have all the necessary tools to code an amazing app. But you’re a bit stuck as far as the design. Without the mastery of industry-standard design tools like Adobe Photoshop, how do you design a mobile app that reflects your inner genius? How do you make an app that is both visually stunning and easy for users to navigate?
Don’t worry, there’s good news. You may not have much (or any) experience with UX/design, but you don’t necessarily need it to create a visually stunning final project. These solutions will help you in the process of how to design a mobile app – each one fulfilling this promise without requiring you to pay a dime.
Image credit: TubikStudio
Wireframing involves creating a bare minimum product that essentially represents the skeleton for the design of your app. If you were to compare your app to a startup, you could refer to this design stage as the minimal viable product (a concept popularized by the book, The Lean Startup).
Wireframing is an essential stage when going through the process of how to design a mobile app because it allows you to think about structure as separate from the final design elements. It also makes it possible for you to effectively get your concept across to any relevant parties – collaborators, designers, or investors – without you personally needing any design experience to accurately express these ideas.
The following tools can be helpful during this important foundational step of how to design a mobile app.
For those that really do not want to spend a dime, good old reliable pen and paper is the way to go to sketch out your initial app ideas as a rough draft for your design. While some prefer going directly to Photoshop or a prototyping tool, this method can be ideal for capturing ideas quickly as they happen. As an added bonus, you don’t need any special training or tool mastery to get the most out of this wireframing method.
For those figuring out how to design a mobile app, there exists a specialty wireframing tool with you specifically in mind. For the reasonable price of free, you can download dot-grid papers that have iPhones and iPads printed on them. This is the ideal design solution for developers that need a better visual than pen and paper can provide. This iOS sketch paper is also ideal for storyboarding or showing the various states of how your app will look in use.
This iOS sketch paper includes grid lines for all default UI elements on the aforementioned iOS devices. For the Android version of this sketch paper, the paper has 8 phone models printed on it. However, unlike the iOS paper (which has a dot grid), this one has no lines at all.
If you’re looking for a slightly more techy tool to do your mobile app wireframing, consider something like MockFlow. Mockflow is an online wireframing solution, with the flexibility to handle any type of design project – whether that’s a mobile or web app (or something else entirely). There’s a basic free version available which allows you to work on one project at a time, up to 1 GB of storage and two team members. You can unlock additional functionality (more projects, storage, and team members) when you upgrade to a paid plan, which starts at $14/month.
WireframeApp is another web-app based wireframing option similar to MockFlow. All plans are paid, but you can often find an affordable lifetime deal (under $49 total) by signing up for their email newsletter or AppSumo.
Prototyping is the next step for how to design a mobile app once you’ve finished wireframing. The whole point of this next stage is to create a workable version of the design, similar to what you want the final project to look like.
Image credit: TubikStudio
The following tools fit the bill for how to design a mobile app without paying a dime since they’re all 100% free to use!
Marvel is a web application that’s also available for iOS and Android. Besides the ability to design on whatever device you’re most comfortable with, this tool makes it easy to turn your sketches into workable prototypes. Besides the ability to add basic design elements, you can also link designs together to create a flow. Marvel allows you to create interactive hotspots and realistic transitions, and you can choose actions like whether to hover, click, swipe, pinch and more. With tons of third party integrations, Marvel plays nice with many of the other tools you already use, and the collaborators on your team.
InVision is similar to Marvel, in that it’s a free web and mobile prototyping tool. It is a perfect prototyping tool for teams, thanks to functionality that allows for simple commenting and collaboration. What sets it apart from many similar types of tools is their version control feature, which allows you to revert your changes to a previous version if necessary.
InVision is used by innovative companies like Adobe, Zappos, AT&T, Dell, and Sony, as well as fast-growth startups like Prezi, Soundcloud, and Evernote. Using InVision doesn’t guarantee you their success, but you can’t deny the benefits of association!
To round out your options for how to design a mobile app without paying a dime, here’s an option that is paid if used over the long-term, but completely free to use during a 30-day trial. Axure allows for easy app prototyping thanks to highly functional designs (similar to the transitions on Marvel). Like the other options in this article, this tool provides functionality for easy team collaboration.
Proto.io bills itself as a tool that can help you create “Prototypes that feel real.” For a mobile app developer looking to create a realistic and functional prototype, this may be music to your ears. They supply users with multiple UI libraries, 3rd party integrations (with partners like Dropbox), and even user testing to ensure the user experience is seamless upon launch. A free trial allows you 15 days of access with lifetime access to limited features, or the option to upgrade to a fully-functional account with multiple projects and features, starting at $24/month.
If you have yet to find the perfect wireframing or prototyping tool, Developer Drive shares some additional generic options to consider.
Of course, if this is the extent of your interest and ability when it comes to app design, you’ll have to pay someone to take your bare-bones wireframe or prototype to the next level. But coming in with a basic plan can be a good way to save time and money upfront. The better you’re able to communicate your vision to a designer, the easier it will be to make it a reality, and the less money you’ll waste on design versions that don’t align with your vision.
Whether you’re looking for guidance on how to design an app for iPhone, or how to design an Android app, these free tools can help you wrap your head around the perfect design for either mobile operating system.
Image credit: TubikStudio
Sometimes, a little inspiration can help remove a creative block, and getting lost in a design tutorial can help you figure out how to finish the project completely on your own.
Laudable Apps is abare-boness website/app gallery that focuses specifically on showcasing beautiful iOS 7 designs. There’s no text or other distractions, just designs presented without commentary.
While you’re thinking specifically about iOS, you may also want to take the time to review the Apple App Store’s strict submission guidelines. Since they have a “no exceptions” attitude, keeping these guidelines in mind while determining how to design a mobile app can help you get things right the first time, saving time and money in the long run.
Whether you’re designing exclusively for an Android device, or are creating two versions of your mobile app (with one for the Apple App Store), you’ll want to familiarize yourself with the in’s and out’s of design for an Android device. It may surprise you to know that this is decidedly different (and significantly less rigid) than iOS app design standards. It can be helpful to read through the Google Play store’s submission materials, like this launch checklist.
You can also use Android Patterns as your crash course in Android Design. This website is a library of Android interaction patterns that you can use when creating your design. The interaction patterns are arranged by app type and include actions such as navigation, notifications, and screen interactions. While these patterns can be helpful for a new mobile app designer, they should be taken as a guide, but not absolute rules.
Adding some dimension to your visual elements can help your prototype to look as close as possible to the final output. Icons8 provides a library of over 150,800 icons that are completely free to use. In addition to this gigantic free resource, you should also check out these user interface design tools for different ways to search and use icons when you’re determining how to design a mobile app.
Adobe has a lot of resources for those looking to design a mobile app, from a beginner to advanced level of design, but one of the simplest and most useful is their color scheme tool. Kuler helps designers and non-designers alike pick out color schemes based on the color wheel, and different color rules: monochromatic, complementary, triad, etc. You can create a color scheme from an image, or browse the color scheme submissions of others for inspiration.
According to CSSWinner, Mobile Design Inspiration is the densest inspiration gallery for mobile app design, with app design inspirations available for and organized specifically by iPhone, Android, Apple Watch, and iPad. New designs are added weekly, and their “Creative Fields” section can provide additional inspiration if you’re also working on designing an app logo.
If you really want to know how to design a mobile app without paying a dime, you should consider investing your time in picking up new skills. Learning how to design your own app over hiring someone to do it can save you money AND also earn you valuable skills that you can monetize later on.
There are several websites that offer excellent online courses in design (Treehouse is an awesome paid resource), but Tuts+ offers a lot of in-depth knowledge, completely for free, without sacrificing quality. In addition to helpful articles, they also have additional lengthy resources on design, like ebooks.
You really don’t have to hire a designer to design your mobile app, especially in the early stages of wireframing and prototyping. Take some time to get your app where you want it to be on a basic level, then even if you do end up hiring a designer, the project won’t be as deep (and expensive).
With these mobile app design tools, you can figure out how to design a mobile app on your own, and pick up a few new skills along the way. Imagine the hiring opportunities for an individual who can prove their ability in both designing and developing an app!
What tips or tools would you add to this list on how to design a mobile app without paying a dime? We’d love to hear your thoughts! Tweet your insights at @icons8, and we’ll share our favorites.
About the Author
Maddy Osman loves WordPress and writing. When she’s not busy helping to organize WordCamp Denver, she shares her best content marketing/SEO tips on her blog, www.the-blogsmith.com. Keep up with her latest articles across the web on Twitter: MaddyOsman.
Discover top Figma plugins to streamline your workflow, enhance visuals, and add creative flair to…
Learn how to manage visuals in blog posts to optimize them for SEO in this…
Unraveling Figma’s pricing structure: tips to avoid hefty bills and save money. (more…)
Don't switch tabs to browse icons, illustrations, and photos for your websites. Get them inside…
Transform your Notion space with custom covers! Dive in for easy steps, pro tips, and…
Each design has its own scale. It applies to elements size and like thickness. Now,…
This website uses cookies.