The Ins and Outs of Mobile App Design

by | May 16, 2018

Mobile App Design, app design, Hatch Apps, how to design app

So – you have an idea for an app – but may be wondering: where do I begin? Good design doesn’t just happen at the flip of a switch, it takes time, research, and careful consideration. Much like a website, a mobile app design can make or break your product.

It’s time to start creating your brain child – but before whipping out the drawing board and starting your awesome design, you have to learn to talk-the-talk – that’s why we’ve pulled together these key terms to kick it off.

 

3 Key Terms for Mobile App Design

 

Words can be hard – especially when you’re unfamiliar with a subject. I’m not a design maven myself, so when sifting through the mobile app design world – it’s easy to drown in jargon. Here are some important words you should know before embarking on your journey.

 

Wireframe
Your mobile app wireframe (also known as the page schematic or screen blueprint) will be the first real conceptualization of your mobile app. While this isn’t the design itself, Wikipedia defines it well as the “visual guide that represents the skeletal framework of a website.” Specifically speaking to apps, this would be the 2-D, and usually black and white version, of how your app will function. The wireframe is similar to an architects blueprint – but instead of buildings, according to StormIo – your wireframe should have:

  • Space distribution
  • Content prioritization
  • Available functions
  • Intended actions
  • Relationships between screens

And from the same article, your wireframe should not have:

  • Colors
  • Design elements
  • Real images
  • Fonts
  • Logos

 

Mockup
Your app’s mock-up is the fun part. This is the part of your app that’s going to include all of the elements that your wireframe shouldn’t have; this includes the design elements, the colors, images, and all of your fancy fonts and brand elements.

 

User Experience/User Interface (UX/UI)
Your User Experience and User Interface (UX/UI) are incredibly important when thinking about how you want to design your app. If you’re going to be the thought leader behind your app – about what content, design and features you want to have available in your app – these are two important terms you need to keep in mind. You UX/UI are going to determine how your customer feels while actually using the app; the user interface is, according to Search MicroServices “…the way through which a user interacts with an application.”

UX accounts for the aesthetic experience (think: your mockup), while UI, a term developed specifically for the growing popularity among mobile apps, is “…specifically concerned with creating usable, interactive interfaces on the smaller screens.” These two go hand in hand with one another.

 

Tools to Design Your Mobile App

 

Now that you know the important parts of bringing your concept to life, it’s time to figure out where to go and what to use to build your wireframes, mockups and user interface.

If you’re like me at all, you might be able to think up a wireframe – but don’t quite have it in you to make the mock-up. Or, perhaps, you’re pretty skilled and just looking for the write tools? Maybe you have no idea where to start and are reading this like I have no design experience and no ideas. That’s ok! Here are a few suggestions for every level of skill:

Sketch: Wireframes and Design tool for more advanced designers

Sketch is a great took for those of us with experience that needs just a little guidance. Sketch is a “digital design toolkit built to help you…from early ideas, through to final assets.” On Sketch, you’ll have the ability to build out from your wireframe to the design itself. If you’re confident enough in your design skills to not have to outsource, this is the tool for you.

Adobe XD: Wireframes and Design tool for the experienced designer who likes Adobe Suite

Adobe XD, much like Sketch – is build for folks with an eye for design. It’s particularly great if you’re already familiar with Adobe Suite products, and has intuitive tools that eliminate speed bumps. XD has UI kits that include: templates, components, and more.

Balsamiq: Wireframing tool for beginners to advanced designers

Balsamiq touts itself as a tool that allows “anyone to design a great software.” This is a powerful wire-framing tool that acts as a whiteboard, and allows you to iterate quickly — so if you have a couple ideas in mind, you can whip them all out.

Once you build your wireframe on Balsamiq, you’ll have the ability to take it to a designer, a design firm, or a freelancer — and get your mockup going.

Hatch Apps: Mockups and UX/UI design for the beginner to advanced designer

If you’re reading all of these options and you’re like — I’m not cut out for all this. Look no further. Hatch Apps provides a simple and easy way to build, design, and launch your app. All you need is an idea. This article walks you through what designing an app on Hatch Apps looks like.

These are our top choices, but Codecamp also has a wonderful breakdown of a comprehensive list of the best of the best design tools.

 

What Does Well Designed Really Mean for Your App?

 

App design, mobile app design, wire framing tools, mobile app mock up, hatch apps

A well designed app will have a user journey that is easy to use and intuitive, as well as aesthetically pleasing. Of course there are mobile design trends, but those come and go throughout the year. An app that will stand the test of time will be catered to your user — making it as easy as possible for them to navigate, this is importance of the positive “UX/UI” experience we touched on before. A good app will minimize cognitive load, or, in english: your users will use a minimal amount of brain power to poke around. Have you ever gotten on to an app and been like – I just don’t understand how to use this… it’s no fun, right? That’s what you want to avoid – which is why wireframes and mockups are such important steps in making sure your app offers an intuitive experience.

Marvel App points to the three main causes of cognitive load as:

  1. Too many choices
  2. Too much thought required
  3. Lack of clarity

A few things you can be sure to do to minimize cognitive load are, first and foremost, hashing out those initial steps of wire-framing and mockups (if you’re not using an app builder like Hatch Apps). You’re going to want to think a lot about how your app is going to function. While your building out, be sure not to overload your user with unnecessary clutter — this is where too much thought comes in. There shouldn’t be a ton of images, buttons, colors, etc. Think about what you want your user to do on each page, and focus on designing around that one action. As they say: keep it simple, stupid.

And, use familiar screens. Have you ever noticed the similarity of these CTAs:

Mobile App Design, app design, Hatch Apps, how to design app

Because I know what to do on Facebook’s status bar – I know what to do on Twitter’s.

Mobile App Design, app design, Hatch Apps, how to design app

Because I know how to start ordering food on Seamless, I know how to start ordering food on Grubhub!

Screen Shot 2018-05-16 at 4.19.05 PM

Because I know how to create an event on my iCal, I know how to create one on Google Calendar!

These features on Twitter/Facebook; GrubHub/Seamless; and Google Calendar/iCal — are like familiar screens. They are screens and application features that a user will intuitively understand from similar experiences across platforms. You can find examples of these best practices across various apps.

 

In Conclusion

 

Designing an app can be a lot of work — but once you establish your footing and figure out the basics – your good to go. Like most things when you’re building your app — the best things to keep in mind are: your own vision, and, how to communicate it to the customer in the most intuitive way possible.

Book a 15 minute conversation with Hatch Apps today!

Start Designing Your Custom App

Start Designing Your Custom App