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.

The Camp.site Design: How the Concept Came to Be

Back in May, the organizer of CAMP approached gskinner to create a site to promote their festival. For those who don’t know, CAMP is a festival held in Calgary every year that describes itself as: “…a non-profit organization celebrating the art and technology of creative storytelling. We bring together like-minded professionals, artists, educators and students to share and shape experiences that educate, challenge and inspire.” 

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 →

Upcoming Talks

I’m excited to be doing talks all over the world in the next couple of months, focusing on two related topics: CreateJS, and the Atari Arcade.

Create The Web, San Francisco, London, Tokyo, & Sydney (Sep & Oct)
I’ll be on an around the world tour with a group of Adobe evangelists (I’m the only non-Adobe presenter), talking about the open source CreateJS libraries, and how to get started creating rich content in HTML5. Adobe is the primary sponsor of the libraries, and is a great partner in helping to actively promote them.

The SF event is full, but you can still sign up free for the other locations here.

Screens, Toronto (Sep 26-28)
Screens focuses on multi-screen content, and I’ll be presenting on the HTML5 Atari Arcade project and some of the challenges we had in making it work well with both desktop and multitouch tablets. You can get more info on the conference here.

FITC Vancouver (Nov 17-18)
Once again, I’ll be talking about the Atari Arcade, and our continuing experiences building games and rich content in HTML5. Despite my (relative) proximity, this will be my first time speaking in Vancouver, and I’m really looking forward to it. More info here.

In addition to the above, I will also likely be hanging out at the MS Build conference Oct 30-Nov 2. I’m pretty excited to see first hand what’s announced with respect to Windows 8, Windows Phone, IE10, and Surface.

It’s going to be a busy autumn, but it should be a lot of fun!

Great Pumpkin Showdown 2011 Results

I am proud to announce the winner of this year’s pumpkin contest!

“Kill All Pumpkins”, Ryan and Lanny’s homage to Futurama brings home the gold, narrowly edging out Grant and Wes’ “2001, a Squash Odyssey”, and “The Angry Pumpkin” by Sebastian and Chris, which kept up until the last few days of the race. There were some great entries this year, and I think it was one of the best contests yet.

Thanks to everyone that voted!

Why I’m Excited About FITC Toronto

I try not to spam my blog with posts about every conference I’m involved with, but I’m genuinely excited about FITC Toronto this year. Beyond the usual collection of reasons I like this conference (great speakers, awesome people, good vibe, etc), there’s a list of reasons that are specific to this event:

  1. It’s the 10th anniversary of the conference, and I imagine Shawn (the organizer) has some cool things planned to celebrate it.
  2. It’s being held in the Guvernment, which is a cool space & the first venue I ever spoke in, way back during Flash In The Can 2003 (before it became just “FITC”).
  3. It will be the 20th FITC conference I’ve spoken at, including events in: Toronto (x9), Edmonton (x2), Ottawa, Montreal, Tokyo, Amsterdam (x3), Hollywood, SF, & Chicago. Scary!
  4. I’m going to be super involved. I’m doing 4 separate talks, including my main talk (see #5), a retrospective panel (for us old coots), a Voodoo lounge talk on HTML5 & Flash, and one on one Q&A at the Get A Job event.
  5. I’m switching out the talk I originally planned to do (“ADHD FTW, LOL!!”) for a new talk that I put together quite recently (“The Art of Being Inspired”). In some respects, it’s similar content, but presented in a way that better reflects my current creative optimism and showing some stuff I’ve been playing with recently. Don’t tell Shawn – he hates when I change sessions last minute!
  6. I think it’s a very dynamic time in the industry, and I’m genuinely excited to see what people are working on and thinking about. There’s so much change and that’s bringing so much new opportunity – it’s just a great time to be exposed to other people’s thoughts and inspiration.

Anyway, I know this is pretty last minute, but if you’re in the area, and not going you might want to consider it. I’m not trying to sell tickets, but I think it’ll be a great event. I hope to see some of you there!