Mobile First: A Future-Friendly Approach to UX Design

Asher Blumberg, Mobile UX Designer at StumbleUpon, hosted a webinar with us on why ‘mobile first’ thinking isn’t just about devices. Thinking mobile is about better usability, optimizing for screen real estate, and simplifying your design elements and layouts.

Check out the video below for the full recording, and read on for our short recap.

A history of interfaces

1961: The Rand Corporation invented the first computer interface

1984: The Apple Macintosh computer debuted for a mass audience

2007: The iPhone — though not the first touchscreen — was the most significant

2009: The Kinect showed a new way to connect technology with the body

2011: We met Siri, the “no-interface interface”

2011: We welcomed Nest into our homes

2013: Oculus Rift, the VR technology, allows people to immerse themselves in other realities

2015: The Apple Watch shows that wearables can allow you to be less distracted by physical devices by not being tied into an interface

2015: Amazon Echo launched out of beta and is currently the most powerful voice-powered device on the market

Innovation is exploding in every direction. With all of these “smart” things — smart cars, smart phones, smart watches, smart glasses — it’s a designer’s job to figure out the best way to deliver content in such a vastly connected world.

“The projects you’re working on at this very moment will be interacted with on devices that didn’t exist when you created them.”

While we don’t know what future technologies will look like, we do know that future-friendly strategies will allow our designs to work and look the best on devices that haven’t even been invented yet. The projects you’re working on at this very moment will be interacted with on devices that didn’t exist when you created them.

Reconciling iOS and Android paradigms

Asher’s specialty is creating native mobile apps that bridge the gap between Apple and Google devices. Both iOS and Android’s design guidelines share commonalities worth exploring.

While working on StumbleUpon’s iOS and Android redesigns, Asher and his design team focused on balancing the app’s unique characteristics and the core conventions of these 2 dominant mobile platforms.

Design guidelines

Asher laid out a few of his own design guidelines to create a cohesive iOS and Android experience, while making it unique enough that users realize they’re in a distinctly branded app.

Iconography Pour over both guidelines, especially the iOS Human Interface & Material Guidelines. You might choose to style icons for their respective platforms, sticking to thin-stroked, hollow icons on iOS and going bolder on Android. Alternatively, you can create custom icons that can live across both iOS and Android.

Colors Stick with colors specified in your branding guide. This will help with consistency in the future when working across platforms.

Above and beyond the guidelines Be intentional and back it up with good reasoning when you take liberties with the guidelines. Adapt your designs to varying contexts and blend different styles to create an authentic and meaningful UI.

Some final pro tips

• Use good naming conventions
• When exporting assets for development, stick to layer names that match your naming conventions
• Use text styles for headlines and other repeating text types. Create symbols for repeating patterns or UI elements.
• Take advantage of artboards for a multi-screen view so you can quickly see your flows and product depth. Doing this will help you stay focused on the big picture.

Originally published at blog.invisionapp.com on July 21, 2015.