Brief
Revisit the user experience of the Flutter Gallery app and create a holistic visual direction for both the app and the wider Flutter brand.
Solution
The Flutter team at Google had a functioning app, showcasing various native components, but no visual direction for the app itself. The developers had adopted a Material Design approach in creating the app, but this proved confusing when looking at Material components in an already Material frame.
We created a visual direction influenced by coding editors that would then scale across devices and even react to dark mode settings on the user’s phone.
We started by looking at the overall user experience of the app, which is designed to be a showcase of the various components available to developers. These span components from both Google’s own Material Design language, and that of Apple’s iOS. The app should show how these look, the variations on each that is possible, plus any support documentation required to implement the component into your app.
This gave rise to a multi-layered concept for the app, with the animation intro at the bottom, the main Flutter interface, including settings and navigation next, and the components themselves as the top-most layer. Coupled with the visual changes, this would give the user a clear idea of what they are looking at.
Application Screens
Before
After
