The Design Huddle #18

Wednesday, December 7, 2016

The Design Huddle — our roundup of the best links shared in the Black Pixel design team’s Slack channel — is available as an email newsletter, delivered straight to your inbox. Subscribe now.

Framer Introduces New Multi-Screen Flow Functionality

In recent months, Framer has become our team’s go-to tool for prototyping individual transitions, animations, and single-screen interactions. It’s a powerful, highly customizable platform, but, until now, hasn’t been well optimized for working across higher level user flows and multiple screens.

Framer added the ability to easily prototype end-to-end user flows.

That’s now changing with the introduction of Framer Flows, a feature set that allows for easily wiring up end-to-end user flows (think “onboarding to checkout”), all within Framer. As an added bonus, standard iOS transitions are baked in, giving designers an out-of-the-box shortcut (though those same transitions are also fully customizable).

“With Framer Flows, you won’t have to manually code animations between every screen transition. It does the heavy lifting for you. It’s set up for common iOS transitions, so expect bouncy spring animations and horizontal scroll effects to happen naturally.”

The new functionality is now available in the latest Framer update, and there’s full documentation available online to help you get started.

Rolling Live Map Data Into Framer Prototypes

Speaking of Framer’s increasing flexibility as a prototyping tool, Product Designer Jacky Lee recently shared a Framer prototype that pulls in geospatial data from Mapbox and offers some slick cropping options.

A Framer prototype using geospatial data from Mapbox (courtesy of Jacky Lee).

You can explore the full prototype here.

Death by Hamburger

Hamburger navigation has been a controversial tool in the mobile designer’s toolkit since its introduction. While hamburger navigation provides an easy affordance for visually simplifying an interface, it’s not particularly intuitive to people, and in many cases it significantly reduces the likelihood that people will bother to access any of the links hidden behind or within it.

In recent years, a number of high-profile apps, including Facebook and Spotify, have move away from hamburger navigation in favor of tab bars.

UX Architect Fiona Foster reviews the pros and cons of a number of current hamburger (and similarly hidden) navigation systems used by Twitter, Amazon, eBay, Fitbit, and more. Luke Wroblewski conducted similar audits of various mobile apps. Unsurprisingly, he found that hidden navigation negatively impacts usage for linked items.

The moral of the story? Out of sight, out of mind.

A Windows-Based Design Team Switches to Sketch

Oscar Oto Mir wrote recently about his eight-person UX design team doing a two-week trial with Sketch, and how a number of features (symbols and overrides, grouping and symbol resizing, and working with live data via InVision’s Craft) led them to stick with Sketch over Adobe’s Creative Cloud suite as their design tool of choice.

So, what? That’s an experience plenty of teams have had, including our own here at Black Pixel. The twist: They are a Windows-based design team within a fully Windows company. They see Sketch offering enough advantages over working in Photoshop that they’ll continue running Mac VMs in order to use Sketch. It’s an interesting work arrangement and a unique endorsement of Sketch as a primary UI and UX design tool.

Toolkit Additions

We’re often on the lookout for fresh “in situ” stock imagery for product screenshots. Mockuuups is a excellent resource for a wide range of photos featuring mobile and desktop devices.

Example imagery from Mockuuups stock catalog.

Mockuuups offers Mac and Windows apps and handy integrations for Sketch and Photoshop.

Copio is a useful single-serving tool for Photoshop that allows you to quickly and easily copy layers between files.

AI hasn’t quite succeeded in putting web designers out of work (though The Grid is trying), but now there’s an algorithmically powered option for logo design. Logojoy offers a smart web app that allows you to quickly generate and preview a range of logo options, paying only for the one you want.

A sample of Logojoy’s output.

Logojoy seems to be hedging its bets on just how far AI can go, though the key feature of its top-level price tier is consultation time with a real human designer.

GIF of the Week

As a design team, we’re most definitely supportive of one another and our work, and as a remote team, sometimes we need to take to Slack to communicate that appreciation. When a simple reaction emoji doesn’t quite do the trick, well, there’s a always a GIF …


For more insights on design and development, subscribe to BPXL Craft and follow Black Pixel on Twitter.

Black Pixel is a creative digital products agency. Learn more at blackpixel.com.

Like what you read? Give Tom Carmony a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.