Mobile is here to stay, with its own set of rules and constraints. At the same time, it’s a rapidly evolving platform, with new technologies and capabilities being added by the quarter. We can’t design for mobile like we used to do for posters and Web pages. So what toolkit and mindset does a mobile designer need to thrive?
Challenges and Constraints
Every medium has its limitations. Even mobile—one of the richest canvases a designer can dream of—still has particularities that need to be addressed:
Device fragmentation
There are countless smartphone and tablet models out there, each one with a different screen size, pixel density, and physical input (not to mention screen orientations). This means we can’t just pre-assume an iPhone 5 screen-size and design tightly to it. In mobile Web, responsive design allows us to plan for variations and make the design adjust to different screens with little effort. In native mobile design there is less liquidity, so we need to think our designs as tolerant to screen differences, and document the way such variations impact the layout.
OS fragmentation
As of today, we have three major mobile operating systems to consider: Android, iOS, and Windows Phone, in order of usage. Every OS has its own set of interface patterns, external inputs, and guidelines, not to mention variations between OS versions as well. Within Android things are even more complex: the version of Android a device will use is going to be influenced by the device maker, which can overlay its own layer of UI on top of it, and the device itself and its processing capabilities (not to mention the upgrade delays imposed by some carrier companies).
Even if this fragmentation does not make the design vary too much, it does influence how users experience an OS and what they expect from it. Consider, for example, that the experience of Android that most users have is actually the TouchWiz or Sense interfaces.
Performance
The way an app is designed can influence the amount of energy it uses. To put in other words, our design can leave our users without battery juice. Certain unnecessary visual effects or animations may need intensive graphic processing to run; a JavaScript-intensive Web page can also use a lot of power. And while our newly purchased device may be running our app smoothly, a 2-year old device may be struggling with it. These are just examples to illustrate the idea that a mobile designer needs to understand the impact that their decisions have in how an app performs and uses the device’s resources.
Development and cost constraints
Just because we saw it in that cool new app the other day doesn’t mean that it can be easily implemented. The way we design an app can make the difference between meeting and missing a deadline. If we don’t clearly understand the cost of the design decisions we make, we are basically putting the burden on the developers and creating an opportunity for friction later on.
Things to Unlearn
Many of us have been trained as designers in an era where a digital mindset was still incipient. That has historically caused us to approach digital design from a static point of view (exporting HTML directly from Fireworks, anyone?), and the misalignments that result from this perspective are still being taught in design schools. With mobile design the gap is even wider, as mobile brings a language for which nearly all of our current tools and methods fall short. So it’s time to update our mindset.
Mobile is not a canvas
HTML isn’t a canvas either. You can’t just throw things at it like you’re designing a poster. I suspect that designing in Photoshop is not helping us in making the switch, because we have been using it to design posters and illustrations and retouch photos for more than two decades. We’re still “painting” our interfaces, when screen size fragmentation and the dynamic nature of mobile call for a different approach to design.
Mobile is not a canvas … You can’t just throw things at it like you’re designing a poster
Stop thinking of screens and start thinking of transitions
We are just starting to realize that the “screens” approach doesn’t cut it when it comes to mobile design. Thanks to apps like Facebook Paper or Yahoo! Weather that showcase a different way of designing, we know we need to design based on transitions rather than still images.
Transitions, once just disposable eye-candy, are becoming the center of a mobile experience. They not only give a live, interactive tone to the interface: they are an interface element in their own right. Transitions convey movement, space, change, and hierarchy and are a great ally in communicating the underlying app structure to the user. They also render a static approach useless.
Put your designer ego aside
You don’t need to be unique or original, especially when being “unique” means redesigning a known interface pattern just for the sake of uniqueness. More often than not, sticking to native UI elements and patterns is the smartest move to get the app completed on time. Rather than pushing your designed-from-scratch set of UI controls, focus on creating a simple, effective interface and create branding that shines.
For inspiration, real apps are better than designer portfolio sites
Many designers go to the likes of Behance or Dribbble in search for inspiration for their next mobile project. While you will always find beautifully crafted artwork on such sites, if you are not a seasoned mobile designer, those mockups can be misleading. Many of them are just that—mockups that have never met reality, and they can bias your judgment toward believing that you must create an entirely customized UI every time.
Get inspired by real, successful apps. There you’ll find the designs that have made products thrive. Their interface patterns have been tried and tested in the real world, and you know for sure they can be replicated.
New Skills to Learn
Know the platform
Just as you need to understand HTML/CSS to be a good Web designer, you need to understand the underlying structure of mobile apps too, and they are totally different from Web pages. For instance, they don’t “flow” the content as HTML/CSS do, and that changes a lot the way we should think about the layout. You won’t have the magic of CSS inheritance (at least not nearly as polished and not out of the box) to separate markup from presentation. Oh, I almost forgot: there’s no “markup” either.
You will need to get into some documentation for developers, read the manuals and understand how mobile apps are assembled, compiled, and published. Understand how a mobile device works and which things drain the battery the most. You may even need to learn some code basics, which pays off in the long run: you’ll be able to learn the developer’s language and you will design with efficiency and feasibility in mind.
Know the nuts and bolts of mobile technologies
Here’s a laundry list to get you started: location services (Wi-Fi- and GPS-based), Bluetooth, Low-Energy Bluetooth, beacons, front and rear camera, microphone, gyroscope, accelerometer, vibrator, fingerprint scanner, eye tracking, voice recognition, face recognition, tap detection, and the list goes on and on. Every new technology opens the doors to a whole new breed of apps. Your responsibility as a designer is to be aware of the cutting-edge.
Discover how far you can get with native components
Native UI components actually give lots of freedom to customization efforts, but you need to know exactly how to use them. If you can do most of your UI with native controls with a few tweaks, you’ll save a great deal of the developer’s time, which they will be thankful for.
Know the mobile workflow
Learn about mobile SDKs, install them and get them to run. Learn about mobile frameworks, such as RubyMotion, Xamarin, or Titanium. Get familiar with IDEs, where the graphic assets are located within a mobile project, how they should be named, etc.
Learn mobile interface patterns
All three major mobile platforms have similarities and profound differences on how they understand mobile interaction design. Their users expect different things from them. As a mobile designer, you should be completely aware of these differences and able to detect them on the spot.
Don’t stick with a single mobile platform. Try all three, or at least use Android and iOS on a daily basis for at least 6 months each. I did it, and it’s great—you get insights from each platform you’ll never get with casual use or looking at screenshots. And switching is good: being a fanboy is bad for a mobile designer.
Document and explain your UI
Since screens don’t tell the whole story anymore, you will have to document different states, transitions, and animations as well as how the app reacts to data and to the environment. Annotate your mockups, provide animation examples, and plan for device orientation.
Embrace Lean UX in the design phase
A modern designer should be a strategic designer. So your goal, rather than just come up with something beautiful, is to infuse into the design everything the team has learned about the product. Prioritize rapid prototyping in order to get early insights of what the users want. Save the detailed artistic work for later. Ensure that everything that is designed is aligned with the core value proposal and with the users’ needs.
Embrace Agile UX when implementing
You can’t just hand your mockups to the developer and forget about it, as most of the graphic requirements will arise when developing. There will be always screens not previously considered, new transitions and state changes that require new graphic assets. You need to be there and respond in real-time. So bring your chair next to the developers and be ready to step into the design when needed. Make sure that the developers only have their mind in development and that they don’t have to make UX decisions to fill your gaps.
Some Extra Tips for Mobile Web
Be responsible with responsive
For mobile Web, responsive design is not the one-size-fits-all solution. In some cases it makes sense, in others it doesn’t. It’s your responsibility to know where mobile demands a dedicated solution and where a few responsive tweaks are enough to maintain a single code base. Even if you are designing for “traditional” Web, plan your layout so it adapts gracefully to different screen sizes. And mind asset sizes: that nice full-screen 1Mb background image can make your mobile visitors waste money in cellular data consumption.
Use CSS and JS candy with caution
Yes, CSS animations, gradients, transitions, and shadows are great and incredibly easy to implement. And parallax is neat, plus all the cool guys do it, right? But these elements can take a toll on a mobile device battery. The more “live” visual effects you pile up, the more sluggish the scrolling will feel and the more power it will consume.
Even innocent CSS3 selectors can impact performance on low-end devices. Prefer ID’s and classes when possible, and try to keep your descendant selectors low. So if you can go with #submit instead of .main .container .form > div .submit, it’s a good idea.
Use the Right Tools for the Job
This is not at all a definitive list, and you will find great alternatives for many of them, but these are some good tools suited for mobile design (some of them are free, most of them are Mac-only):
- Sketch for graphic design and @2x hi-resolution export. This is arguably the heir of the now discontinued Adobe Fireworks, and it has been done with mobile in mind.
- LiveView and Sketch Mirror (a companion for Sketch) for mirroring your screen to your phone. Things look and feel very differently in a device. You’ll be able to easily test the size of interaction areas and controls.
- Origami (by Facebook) and Quartz Composer for mobile interaction and animation prototyping. This is the closest you can get to a native UI prototyping without coding, and will give you a good introduction of the kind of logical thinking that programmers use.
- PaintCode for creating UIs and graphics and exporting them directly to Objective-C.
- Mockup web software. There’re plenty: Balsamiq Mockups, Axure, UXPin, Moqups, Proto.io, just to name a few.
- Flinto for creating mobile interactive mockups that can be installed in your iPhone, mimicking real apps (taking advantage of Safari’s Add to Home Screen feature).
- ImageOptim for compressing your PNG and JPG files without loss of quality.
- Version-control software, preferably Git or Mercurial. Commit your assets and changes directly to the repository and in real time, rather than e-mailing a ZIP to the developer.
All of this is Already Obsolete
Not really, but the pace of progress in mobile technology is incredibly rapid. In no time we will be faced with the challenge of designing for wearables, smart appliances, and sensors connected to our mobile apps. New challenges and innovations come out daily. So ,if anything, being dynamic, flexible, and ever-curious as a designer is what will ensure you grab a seat in this roller coaster.
Illustration of smartphone coutesy Shutterstock.
