Info Products Articles Work

New Site & Identity

Info
AUTH Michael Delaney
DATE 06/27/2022
TAGS Branding, Aviation, SvelteKit, TailwindCSS
EXPT A new site and identity for Fusepilot
New Site & Identity Cover
I've always wanted a website that authentically represented who I am and what I do. I previously had a single landing page with a motion graphics reel and a quip about my work, but it never painted the complete picture. So I'm excited to present this new site and identity.

Identity

Sarah Stroschein helped update the Fusepilot brand with modern scalability and systematic considerations. The previous logo was created 10 years ago and didn't scale well onto the web and other applications. She quickly narrowed in on a new bold, wordmark that is versatile enough to fit into any design system of applications, plugins, and other products that I'm developing.
Wordmark Comparison
Wordmark Comparison
Once the identity was finished, I started on the site design. It was important to me to have an interesting landing page that would create intrigue and hint at both my creative technology background and data visualization interests.

Theme

I came up with Fusepilot in 2011 when I needed to name my new freelance motion graphics business. "Fuse" is from my ambition to combine my many interests together to create new and interesting work and art. "Pilot" came from my interest in aviation, one I've had since I was very young (I used to carry a six-pound aircraft encyclopedia to grade school, every day. Just in case I would need it.) As I was searching for ways to incorporate both of these elements into the site design, the terminals used at air traffic control centers came to mind. These are essential pieces of the U.S. aviation system that manage thousands of aircraft for large airspaces throughout the country. They're unglamorously called Standard Terminal Automation Replacement Systems , STARS for short. They help controllers efficiently monitor and manage air traffic safely and reliably. The large center screen — known as the scope — has a wonderful low-fi, minimalistic design.
Photo by Raytheon
A STARS Terminal
Photo by Raytheon
Side note — when looking at these and other mission-critical systems, I can't help but think of the vast amounts of time and money spent on researching the user interfaces to best encapsulate and present information in the most optimal way for humans to use and interact with. But to the uninitiated, these interfaces look almost indecipherable or incomplete. Yet, it's actually showing exactly what it needs to show when it needs to show it. To me, this says something about the bloated, non-user-friendly interfaces we see and put up with every day in our lives.
Having established the theme, we set out in creating a design language that incorporated colors and elements from the scopes.
Brand Elements
Brand Elements

function

The main things the new site needed to do:
  • Feature my Motion Graphics and 3D Animation projects
  • Provide a central place to host the various types of products I'm developing, with store functionality that allowed multiple payment structures
  • Include a space to write down thoughts (that wasn't Medium)
Pages
Pages

Landing Page

I spent a comical amount of time creating a simulated scope to feature prominently on the landing page.
LOADING
Scope Demonstration
PLAY
UNMUTE
|
0:00 / 0:00
Some notable features of the scope:
  • Aircraft flight management system that could probably power a standalone air traffic control simulator.
  • Procedural terrain, obstacles, flight plans, airports, ILS approaches, operator sectors, and coastlines.
  • Every viewer sees a unique variation.
  • Made from scratch using Javascript and HTML Canvas.
For the motivated, there's some additional functionality that can be tinkered with. Instructions are hidden behind the pulsing question mark in the lower right corner.

Tech

  • SvelteKit - full-stack framework
  • Tailwind CSS - CSS utility framework
  • Fly - hosting
  • Mux - video hosting
  • Sanity - CMS
  • Plausible - analytics
Share
Twitter
LinkedIn
Email
Copy Link
← Back
  • Email
  • Twitter
  • LinkedIn
  • GitHub
© 2023