Michæl Graves

Groundskeeper @ gskinner.

Google, Adobe, gskinner | Flutter Interact ’19

Flutter is a mobile UI toolkit that combines fast development, expressive and beautiful UIs, with native performance. To test-drive the platform, Grant Skinner & Mike Chambers recently built Redrix: a mobile companion app for Destiny 2.

Download Redrix on iOS or Android

In the short time since, in preparation for Flutter Interact ‘19, we’ve been collaborating with Google & Adobe to showcase the capabilities and potential of the platform.

With an open brief from Google, we were given the freedom to create expressive experiences with the purpose of inspiring and empowering designers and developers to explore the capabilities of Flutter and learn how easy it can be to elevate UI.

We created 17 distinct vignettes spanning a range of UI concepts and styles targeting different devices and screen sizes. They’re all released open-source (under the permissive MIT license) on our dedicated vignettes showcase website.

Approach

We established some high-level goals for the vignettes:

  • real-world: representative of pragmatic & relatable scenarios for apps (with an occasional fun, novel piece sprinkled in)
  • approachable: simple enough to help creators get started quickly
  • delightful: thoughtful & fun motion, interactions, and design

After dedicating time to charge up our own inspiration — researching the most beautiful interactive designs we’ve seen — we compiled a list of ideas, rough sketches and descriptions for potential vignettes.

We reviewed and prioritized the ones that would best achieve our goals. Our designers started working on visual language, illustrations, interactive models, and motion design prototypes.

In parallel, our dev team started building Flutter widgets: modular, re-usable elements used across numerous vignettes for common tasks, such as masking, sprite sequences, and simple 3D rendering. These serve as take-aways for developers to utilize in their own Flutter projects.

We set guidelines for design & development: the architecture and code for all the vignettes should feel like a single, cohesive, and approachable unit. We favored readability over optimization; simplicity over intricacy.

As our vignettes came to life, we earmarked time to share, critique, and prioritize. These sessions informed our iterations & effort, weighed against our timelines.

Near Real-Time Iteration

Hot-reload in Flutter is a game-changer for productive iteration — our design team could critique & communicate concepts, tweaks, and polish to developers to make changes right before their eyes: no recompiling, no deploying a new build for review. No wasted cycles.

We even performed critiques and applied real-time feedback remotely through screen-sharing. The feedback loop almost disappeared; designers and developers working in unison, applying discrete talents towards the same goal simultaneously.

We’re a bit smitten with hot-reload in Flutter.

It’s a testament to the Flutter team, that despite our ambitious vision for the vignettes, our biggest challenge was a familiar one — timelines.

XD to Flutter Plugin

To create our Flutter vignettes, all the UI was hand-coded.

If you’ve poked around our blog for the past 17 years (!) you know we have a long history of building tools, utilities, and workflow enhancements for Adobe products.

As such, we are incredibly excited to be working with the Adobe XD team on their integration with Flutter.

The goal is to empower creators to use familiar design and layout tools & workflows in Adobe XD, and generate Dart code to use in their Flutter apps — streamlining designer and developer collaboration to go from idea, to prototype, to working product, faster.

Leveraging a fairly complex view in Redrix, we re-created the design in Adobe XD, which is exported as a near pixel-perfect view in Flutter. It additionally offers functionality to export elements as re-usable Flutter widgets, complete with configurable instance parameters.

Paired with hot reload, you can make design changes in Adobe XD, and see them instantly reflected in Flutter on a simulator or device.

In 2020, we plan to continue helping Adobe to evolve this tool and release an open-source XD plugin.

If there are specific features or functionality you’d love to see, leave a comment and we’ll add it to the wishlist. You can sign up for early access here.

Join Us!

Reasons to Work at gskinner

A few years ago, we shared some awesome reasons why you should come work with us. We are in a brand new office and hiring smart developers and designers, so we thought we would update the list.

We Have the Coolest Clients & Projects

We’re privileged to collaborate with notable organizations like Adobe, Microsoft, Google, Disney, National Film Board, and FITC (to name a few). We are tasked to prove concepts, explore new functionality, and create flagship experiences for announcements. We design and build world-class apps, experiences, installations, and games on a wide variety of platforms. This rich breadth of work offers constant engagement and opportunities to learn and grow.

Continue reading →

Great Pumpkin Showdown 2016

It has been a few years since we did it, but this year we decided to spend an afternoon carving some pumpkins.

Last week, our newest team members Chris and Matthew found some time in their very busy schedules to build a voting app. You can check out the app at pumpkin.gskinner.com/2016/.

Please jump in and vote for best pumpkin! Instead of the usual “select your favorite”, this app uses a face-off model. If you don’t like where you end up, start again. We will cut off voting on Friday at 5pm.

Continue reading →

Explaining Patterns and Matches in RegExr

RegExr 2.0 was released a little over 2 years ago. If you haven’t used it, it is a great way to test, preview, and share Regular Expressions. We’re committed to updating and improving RegExr, and in January we quietly pushed out some features to help inspect and explain patterns.

Check out RegExr here.

The New “Tools” Bar

Initially, RegExr only had one tool, the “substitution” panel, which let users show sample text with matches substituted using an expression. It was hidden by default, unless a pattern included a substitution expression. This tool has been renamed “replace”, and is now part of a larger “tools” bar, which we hope to continue growing in the future. In the meantime, it has a few other useful tools that I’ll describe below in more detail. Continue reading →

The Dragon Age ISS

In 2014, we worked with BioWare to create the ISS: an interactive, animated cinematic of a player’s history in the first two games of the Dragon Age series, narrated by one of the characters, Varric.

When we first met with BioWare’s online team to discuss the Interactive Story Summary, we were floored. It’s always a privilege to work with one of the best game development companies in the world, and the ISS presented a challenge that was perfectly suited with some of the tech we have been focused on for the last few years. The goal of the ISS is to summarize the complex narrative and decisions that players have made in previous games in the series, and give them control of those choices leading into their latest chapter, Dragon Age: Inquisition.

Continue reading →

Technitone.com is back!

Create Music with Technitone (again!)

In 2011, we worked with Google on a Chrome experiment to demo the then-new Web Audio API. Although we were only tasked with coming up with something that could show the new audio features, our (often-excitable) team came up with a project that pushed our capabilities in a ton of technologies, including WebGL, Canvas, web sockets for multi-player, and CSS animations. For a great technical dive into the original Technitone.com we launched with, check out the html5rocks.com article!

Continue reading →