SpyreStudios

Web-Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

Best Tips, Tools, and Freebies for Mobile App Designers

December 22, 2014 by Jake Rocheleau

Can you imagine a world without mobile applications? Well considering they’ve only been around for a decade you probably can. But just the idea feels quite strange since much of our modern world is balanced in the power of smartphone devices. Our schedules, diets, to-do lists, and a whole lot more revolves around modern touch-based technology.

ios7 flickr app ui design

For designers this has created a microcosmic world unto itself. Mobile UI design has a series of emerging trends that have caught on quickly. This popular expansive force has thus rendered a marketplace for plenty of free tools and resources. I’d like to share a few of these resources along with some pertinent tips related to app UI design. Whether you’re new to the field or have years of experience, this post should have at least a few resources worthy of your attention.

Designing for Touch Gestures

Possibly one of the most important tips I can offer is a reframing of your entire perspective. Most designers who are familiar with website design think of mobile app design from the perspective of a mouse and keyboard. However this is not the case and you really want interfaces to react properly to hand gestures.

These gestures could include swipes, taps, flicks, or multi-finger motions. The iPhone and most Android devices support all of these gestures and have built-in code libraries to handle response animations. So when designing a mobile interface keep in mind that the page should be accessible to fingertips.

freebie touch gesture icons set

When crafting mockups it might be useful to indicate specific gestures. This can be accomplished using any number of touch gesture icons which typically scale as vectors. Not every designer will find a purpose for these gesture symbols, but they are great to clarify animation and user experience between designers and developers.

The Design Language

While design has no phonetic alphabet or strict grammar rules, it certainly does have a variety of languages. Some may call these styles or themes but the definition remains unchanged. These design languages often change based on the current medium or operating system. For example Google recently put out their own Material Design specs for Android.

In comparison Apple has always been known for their lengthy iOS documentation broken down into HIG(Human Interface Guidelines). Both of these design languages share many similarities, but the differences pertain to smartphone features and the unique variances of each operating system.

Android vs iOS: A Usability Battle

Granted neither of these options would be considered better or worse. In fact plenty of mobile designers release their applications for both operating systems. Most people do not have both Android and iOS in their home and it would be frustrating to switch between them for exclusive applications.

My recommendation would be to start with one design language that you prefer. It’s all a matter of opinion so it would probably be the operating system used on your own smartphone. Download some free applications and study each interface meticulously. Completely engulf your mind into the realm of mobile UI design and soon you’ll find yourself coming up with really great concepts for new applications.

Familiarity always breeds greater ingenuity.

Rapid Prototyping

Getting started with mobile app design requires a tough mentality. You need to be able to put down ideas quickly, even if those ideas might prove to be useless. We’re all full of great ideas but in order to get to them we need to go through the bad ones.

Rapid prototyping is a method of putting down new interface design ideas quickly. The simplest way to perform this method is with a pencil and paper. But there are online tools such as InvisionApp which offer digital workspaces for prototyping. Ultimately the goal is to have a wireframe that outlines a conceptual interface, including all the important elements like buttons and navigation links.

invision app website design prototyping

This is an important topic which doesn’t always get discussed. Although it seems like an extra step, prototyping can actually strengthen your ideas by putting them through different stages of scrutiny. It’s better to throw out an idea when it’s only a sketched outline, rather than after a mockup has been polished in Photoshop.

Taking the first step is super easy if you don’t stress over it. Let the process be fun and leave plenty of room for mistakes. In fact, you might spend 30 minutes sketching ideas and not come up with a single usable concept. This is normal and while it can be frustrating, you just gotta stick with it and keep thinking. Mental power improves the more you use it.

If you’d prefer an online application might I recommend Fluid UI? It has a free demo and some basic pricing plans like the other prototyping apps. To create more high-fidelity designs I might also recommend Proto.io which uses a similar web-based editor. But the tool you choose isn’t super important – it only matters if you’re debating between lo-fi or hi-fi prototypes.

Overall the final product is still a generalized wireframe meant to give each project a direction. Nothing is ever set in stone and you can always go back to make edits as needed.

Building your Library

When first getting started as an app designer you really need to spend time analyzing what others have created. This is true of every genre but especially mobile games because the interfaces can be so wildly different. The underlying concepts are always similar – create an application that people want to use(function) and design it well enough to be used(form).

The old adage “form follows function” is worth keeping in mind. This statement basically means that you need to understand the function of your app first; Form comes after function. If you spend enough time in the prototyping phase then you should end up with a rough outline explaining the main functionality and clear usability.

books library interior design photo

When it comes to designing an interface things can get tricky. This is why I recommend building up your library of symbols and interface ideas. This library is in your head but could become a folder of resources on your computer. The library is supplied with ideas through toying with applications and through designs found online. If you really love app design be sure to look at what other designers have created.

Make note of what you like and what you don’t like. Over time you’ll notice familiar ideas being repeated and the best ones seem to stick with you.

Freebie Graphics

In the following gallery I’ve organized a set of 15 free graphics for mobile app designers. Lots of talented people are willing to release their work for free to contribute something valuable to the design community. Most of these files have been designed for either Photoshop or Sketch, so be sure to read the description before downloading.

Analytics App

dark analytics app freebie psd alexander zaytsev

Coloristic UI Kit

coloristic ui kit freebie ios colorful screens

IMDb Concept

flat imdb app redesign freebie

Subscribe & Login

ios iphone app subscribe login screen

Material Color Icons

material color iconset freebie

Switches & Sliders

custom psd freebie ui switches sliders

Music Player

freebie psd ios app ui music player

Facebook PSD

facebook ad app ui layout psd freebie

FM Radio UI

fm radio ui ios 7 app freebie psd

Android Material Keyboards

nexus4 android keyboard material design freebie

Gamecenter Icons

freebie icons psd gamecenter pack download

Dribbble Sketch UI

sketch freebie dribbble client app

Sketch Checkout Template

mobile wireframe checkout template sketch freebie

Weather Line Icons

white line icons weather freebie thin design

Mobile App UI Kit

dark mobile app ui kit freebie download

Final Thoughts

Even if you don’t have much experience in mobile design it’s never too late to get started. I certainly hope this post offers enough tips and resources to expand upon the general design process. Compared to website layouts, mobile apps tend to be much simpler to design but more complicated in the way of user experience. With lots of practice designing mobile interfaces the creative process will gradually feel much more natural and intuitive.

Author: Jake Rocheleau

Jake is a creative designer, illustrator, and web developer. He frequently writes articles involving new-age design concepts and freelance management skills. You can find him in Google or follow his tweets @jakerocheleau

Filed Under: Mobile Tagged With: android ui, app design, ios ui, mobile apps

Search SpyreStudios

Web Design Jobs

Development & Programming Jobs

Graphic Design Jobs

Computer & IT Jobs

UX Design Jobs

LiquidWeb

Level up professionally!

Coursera - Hundreds of Specializations and courses in business, computer science, data science, and more

Envato

SpyreStudios © 2021