The beginners guide to mobile app design

MobileApp_Design Design The beginners guide to mobile app design MobileApp Design

Who is this post for?
– Designers
– Design students
– Account/project managers
– Anyone else interested in design

I often talk about my design background and how I got started. The University I attended didn’t have much of a design program when I enrolled in 2008, so I resorted to the Internet in an attempt to learn on my own. Since then, I’ve used the Internet to teach me all kinds of things; from coding and writing to entrepreneurship and productivity.

Six years later, I am now teaching an interactive design class at the University (they now offer a design program btw).

While preparing my lessons, I did a lot of research and found a few tools and resources that were extremely helpful. I introduced all of them in my class during various stages of the design process and my students successfully used them to create their own apps, so I figured I’d share.

1. Sketching (Pencil / Paper) – (Free)
Paper and pencil (or pen) will never get old when it comes to design. Even the top designers start with paper and a writing utensil to get their ideas down. Sketching allows you to communicate with your team, get your ideas together, and make mistakes that can be easily erased or crossed out before spending too much time digitally designing.

2. PopApp.me (Prototyping on Paper) – (Free)
In most cases, the design process starts with the design brief then sketching, wireframing, designing and lastly, the prototype. PopApp doesn’t necessarily disrupt that process; but rather it enhances it. PopApp is a cool app that lets you take your sketches and turn them into instant prototypes. These are low fidelity (lo-fi) prototypes made for reassurance and collaboration. You simply install the app, snap a picture of your sketch, crop it, then assign hot points.

3. Moqups.com – (Free – $20.00 monthly)
Now that you’re finished with your sketch, and you’ve reassured it with Popapp, then it’s time for the wireframe. There are tons of wireframing tools out there but I highly recommend Moqups.com. Wireframes are great for further collaboration; clear communication; sharing work with clients… you name it. And the thing I love about Moqups is that they help you do that just that—you have the ability to LIVE edit files as a team, create hot points (to make prototypes, and export the prototypes as .PDF files for viewing and presenting.

4. Canva.com – (Free… for the most part)
Once your wireframe is approved and ready to go, this is where things get really serious. This is the stage where you start creating the design mockups for your product/app. Professional graphic designers use Photoshop, Illustrator, Fireworks, etc. for this kind of stuff but Canva is on a mission to change that. Canva offers a web based app with a great user interface to make designing as easy as 1-2-3, from the professional designer to someone with little to no design skills. There are a couple of limitations and it’s not Photoshop yet, but it’s a very good (free) alternative.

5. InvisionApp.com – (Free for two projects)
Last but not least, the mother of all prototyping: InvisionApp. This powerful tool has grown to become one of the industries standards in prototyping. After you design your mobile app screens, you can import them into InvisionApp. InvisionApp allows you to create hotspots with animations for each screen to give a realistic prototype of how your app will function. Hands down a great tool for designers. Just when you thought it was done, InvisitionApp also allows you to share your prototype with Desktop and Mobile users. The mobile users can then download the prototype and view it live on their screen as if it were a real app!

Bonus:

ColourLovers.com
ColourLovers is a great tool when searching for the right shades of specific color palettes and for getting inspiration on which colors may look good together. Just go and type green and blue and you’ll see a bunch of colors with different shades of green and blue. Really good for branding color research.

Dribbble.com
Call it a hangout for designers, call it a hub for inspiration, whatever you call it, it’s definitely a great space for designers and people who appreciate good design. Dribbble is an amazing tool (and social network) that allows users to stay creative, inspired, and up-to-date with design trends. If you can get an invite, then you can enjoy the beautiful perks I mentioned above; in the meantime, you can just use it for inspiration. Search for colors or tags related to things you’re working on and it’ll show you some great designs from other Dribbblers.

There it is. I hope this post was helpful in breaking down and helping you understand the design process for app development. And I hope you find these resources as helpful as I find them.

What did I miss? Tell me some of your favorite design tools in a comment below and don’t forget to subscribe to the mailing list!

Let me help you turn your passion into profits

If you enjoyed this post, then you should definitely sign up to receive more content like it. Go ahead, what are you waiting for?

Powered by ConvertKit