Back to articles

Oops! I doodled again. Creating a brand from start to _

Josh Burns
Date: June 5, 2022 | Time: 4 min to read

Seats are limited, adventures are limitless!

Introducing UpRush and an exciting and wacky cast of characters

Some context for why this became a reality. There was recently and will continue to be a craze in digital art and spaces. First discussing this with a colleague compelled me to build out a first draft. UpRush was actually an old idea that started with an all css character. The idea was and still is to inspire people through creative storytelling and compelling digital experiences. It was a great time to begin to bring it (back) to life.

If I am being honest UpRush also came to be as a release from stress. Quite a few high stress events took place recently, and I had to busy myself and my family with some positive activity. I have a teenager and a toddler to inspire and provide strength and security to. Many of the doodles here are a result of creating some enjoyment in these rough times. Hopefully others might also feel the UpRush, or at least have a little fun with it.

You can skip ahead and see the end result here →

The brand

Seats are limited, adventures are limitless!

As mentioned Uprush was an old concept that is not only fun, but fills a need. It (UpRush) is defined as "A sudden upward surge or flow, especially of a feeling.". So combining these I created a simple old school look and a logo that could be reused everywhere—a favicon, as a crew badge, ship emblem, merchandise, and overarching connector to everything UpRush.

The logo

The right angle and square canvas are the foundation of the UpRush logo. The upward motion represented in the stripes is intentional and takes inspiration from the mission and definition of UpRush. A very simple, but identifiable brand mark. Given the comic book/video game approach we use Press Start 2P.

The color palette

I picked a retro throwback palette with a dark blue, bright red, beige, and white primary color system. Within the site are many components that leverage the primary colors while introducing secondary colors depending on the experience and intent.

The characters

Each character was designed in Adobe Photoshop → and exported in png and svg formats. This is kind of a transhumanistic era, so we have human qualities throughout, but have adapted using sophisticated technologies that can greatly enhance longevity, speed, and cognition. In addition, we find ourselves jumping in to the avatar if a field bot. Not to mention we get to meet some adventurous, fun, flying friends and colleagues.

The ship

The ship is a combination of shapes and incorporates the logo. I wanted to create a ship that when flown felt like you might actually be flying that ship. Which is the point after all.

The spaceship is a fun little take over design. This one was inspired by my oldest. I think it represents the ability to get away and continue to explore. At least is does through my interpretation. It was a real blast to create and is all code. The ship is layered on top of the experience and includes the trigger to go warp speed. Essentially there is a designed motion for end users to first—start the ship/engines, then to launch the ship, and once in space to hit warp button and off you go! Once warp speed is over we finish our adventure—for now!

Test drive the ship →

The very special Bud, Boo, and Bad bugs

When I asked my youngest what I should create and animate, the immediate and animated response was "bugs!". So I set out to keep it simply but to provide a unique fun character for each of the bug personalities. The end result is pretty cute in my humble opinion. These are SVGs and are animates using CSS transitions. I plan to create more browser based games with these characters at the center. I expect a bunch of different adventures ahead for these small but mighty characters.

Watch the bugs analyze →

Crew training! Remote controlled avatar

One of my favorite pieces is the crew training section. This character is handcrafted out of sunny California using HTML and CSS. We do activate some classes using JavaScript as well.

Use this avatar to train soldiers, to explore different regions, or to assist in emergency situations where it might otherwise be too deadly unless using an avatar. I hope you enjoy taking over the controls.

Take control of the crew training →

The music and sound effects

The audio player was custom-built using HTML audio element. The colors and accents are unique to the UpRush brand. Adding in micro animation when music is playing and leveraging default progress bar from Vuetify. Also, a huge thank you to my brother for quickly tossing up some theme music and sound effects. Pretty awesome with as little detail I provided. Keep an eye out for the rest of the UpRush soundtrack.

Where do we deploy and host our experience?

I will definitely try to write another much more detailed walk through of both the hosting setup and the Gridsome → setup and configuration process. In short this is a really simple process.

Purchase a domain name for your brand.
Create a project on Firebase and select hosting option
Build your app. In my case I am leveraging vue.js → and Firebase →.
This app is all hand coded. Each comic strip, lab experience, character is built using CSS and JavaScript.