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.
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.
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.
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.
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
Coloristic UI Kit
IMDb Concept
Subscribe & Login
Material Color Icons
Switches & Sliders
Music Player
Facebook PSD
FM Radio UI
Android Material Keyboards
Gamecenter Icons
Dribbble Sketch UI
Sketch Checkout Template
Weather Line Icons
Mobile App UI Kit
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.
