Over the past 9 months, I’ve been exploring what alternatives exist to the lackluster reality of Lists, Details, and Flows, a personal journey to cure my boredom. New frameworks, switching programming languages, and changing build tools every 6 weeks keeps me on my toes; but what I really seek are new ways to express content.
Here are a handful directions and technologies I’ve explored…
React?
I heard React was good and I was so impressed by Wes Bos’ React for Beginners course that I’ve started a few projects using it. There are a lot of strengths and weaknesses with React that would take me months to un-(web)pack, but what I really like is the “real-time’y’ness” of it all.
The React+Firebase combination that Wes demonstrates makes it incredibly easy to start daydreaming about real-time applications. The output is still Lists and Details, but real-time adds another dimension to designing and developing. If I had to pick a “future” or even “present future” of the web, I think the real-time aspect – regardless of how pedantic you want to be about frameworks vs vanilla JavaScript – is what the web ultimately wants to be.
React’s approach to state management and self-updating components are groundbreaking, but also a lotta action to get up and running. I’m optimistic about the future of web applications.
New data structures?
Spending a lot of time in document-based databases, I began to wonder if our typical key/value pair system of storing data (in objects and arrays) might be the cause of mundanity of lists and details. Maybe how we store data… affects how we collect and fetch data… affects how we present data.
GraphDBs are probably what I’m craving. If you’ve seen a graph visualization (e.g. a social graph), you’ll know they do a great job at illuminating relationships in content.
They can be beautiful, but there’s not a huge emotional response to a bunch of tethered nodes unless you’re a data scientist. That data can be used to render better, more relevant content but it would still likely exist in some kind of List view.
This path hasn’t taken me very far.
SVG animations?
While skimming graphic design books at a bookstore, my mind wondered as it usually does to how this applies to the web. Great print design has a few recurring themes (again, being over-reductive): imagery, playing inside fixed dimensions, with type set to masterfully interact with and balance the art.
As I thumbed through page after page of this, I realized the web has almost the opposite set of limitations. Images can be dynamic (gifs/video) or scripted, device dimensions are unknown, and type and imagery on the web have a clumsy relationship and often don’t couple well. Some of the structures that make for great graphic design almost make for bad web design.
After hearing great talks from Sarah Drasner, Brenna O’Brien, Val Head, and others about animation at CSSDevConf, I decided to try my hand at animating SVGs.
SVG animations are exciting! Frameworks like GSAP lower the bar and make complex animations easy to code, even for Math-ophobes. I’ve toyed with a few animations and I really see well crafted SVGs becoming the future of Art Direction on the web. Here’s an beautiful example from Dennis Gaebel:
See the Pen Underneath by GRAY GHOST (@grayghostvisuals) on CodePen.
Simple animations with a smidge of interactivity can add delight and I think this is something the web could be good better at when compared to its print-based predecessors. Using Saul Bass as an example, the web can be closer to designing opening credits than designing a movie poster.
Bots?
Bots and conversational UIs (aka, “No UIs”) are interesting territory. There is lots of “Bots are the new Apps” hype, so maybe removing the interface entirely can cure my interface boredom!
Fortunately I’ve been able to tinker with Slack bots for the past couple months and form quite a few opinions. While bots are a lot of fun to program, it seems they mostly just serve as a proxy for these Lists, Details, and Flows on the web.
A /command typically fetches data from a list or detail view, often just a single component from the more complex webview. A “conversation” with a bot is just a line-by-line abstraction of a “wizard” or “flow”, often more obtuse.
Integrations are powerful tools and I think bots have the ability to impart a powerful (magical) feeling when a somewhat complex task is automated through a very short command. Bots may be the worst way to order a pizza, but I think there’s a lot of mundane tasks waiting to be optimized in large companies. “Bots are the new Intranet” is maybe a more accurate statement.
Video games?
In my (limited) spare time I’ve started making a video game in Unity. This has been rewarding because it’s a very different kind of programming compared to the web. Objects can spawn objects that have the power to destroy each other! There’s nothing like that in web/app/product development.
TEH MONSTERS> THEY SPAWN pic.twitter.com/vGlyTIrETy
— Dave Rupert (@davatron5000) February 2, 2016
The “World Building” aspect of making video games is incredible. In a couple hours I can have a first-person camera walking around a rudimentary scene. I haven’t felt that thrill of creating in a long time.
I owe this blog more updates about the progress on this game. What I can say now is that it’s a Cartoon Horror Survival game with a focus on two player local co-op.
WebVR?
Like bots, VR is also super hyped up right now. After a few conversations with VR-believers, my curiosity was piqued. Along the lines of “world building”, VR and MR can blur the lines between reality and the impossible. One of my favorite VR demos is Timoni West showing Unity’s new VR Editor tool that allows you to make video games from within the video game you’re making! Inception!
I have the same reservations as everyone else; that isolating yourself in a facemask is just too weird for mass consumption. But when I see things like the whale in that video, my body involuntarily releases endorphins of wonder and I fall into VR’s trap.
WebVR is particularly interesting because no one has figured it out yet. How do we use the web in VR? What does my website look like in VR? Other than “Keep a high FPS so people don’t barf,” there aren’t really any rules. It might be the “junior varsity” version of VR, but I see a lot of creative potential for WebVR experiences in a Cardboard. Best of all, it’s not as complicated as you might imagine.
A-frame is an easy-to-use framework that allows you to create a VR environment, even in a CodePen. Then throw your phone into a (Free~$20) Cardboard viewer and marvel at the new universe you created with just a few lines of HTML. No Cardboard? That’s okay, you can make it fullscreen on your computer and walk around using the W``A``S``D keys. It’s like Progressive Enhancement for VR.
I have lots of thoughts on VR swirling around in my head, so if you want to drunkenly ramble about it in a bar let me know. “VR is the Future” is maybe overselling, but “VR is fun” is certain and my two year old son demands it whenever he comes into my office.
So…
That’s all I got. React is a lotta action, data structures aren’t that compelling, SVG Animations are a neat trick, Bots are okay, Video games are thrilling, and VR is fun. Again, maybe information wants to exist in Lists, Details, and Flows; and trying to imagine otherwise is futile but I’ve enjoyed my explorations thus far.
I’d love to hear what others are exploring in terms of creating different ways to experience content. Great examples, best practices, anything. I would love to see them and read about them.
Before I go, if you’re interested in more SVG Animation stuff (you should be), here’s an incomplete list of links and people to follow: