Asher Blumberg, Mobile UX Designer at StumbleUpon, hosted a webinar with us last week about 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
Super interesting how @ashergodfrey thinks wearables help us get OUT of being immersed in our technology. #InvisionWebinar
— Bridget Devlin (@beestrawn) July 14, 2015
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.
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.
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.
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.
We love how Matt summed it up:
"We should strive to design interfaces that can fluidly interact with the complexities of the real world" – @ashergodfrey | #InVisionWebinar
— Matt Johnston (@heymatt_j) July 14, 2015
Margaret Kelsey leads content marketing at Appcues. Before Appcues, she built content programs for InVision’s design community for 3.5 years and has roots in painting and PR. She’s a big fan of puns, Blackbird Donuts, and Oxford commas—probably in that order.