Trek Tech

Where Science Fiction has Gone Before

Web Design

The Challenge

Create an entertaining, art-directed informational experience for desktop web browser.

The Concept

Trek Tech: a site exploring real-world technologies boldly going where Star Trek has gone before.

When it comes merging thoughtful education with entertainment, as a pair of classic nerds, Willy and I naturally thought of Star Trek. We were excited to learn about and share some very interesting technologies under development that seemed straight from the United Federation of Planets toolkit.

My Roles

  • Web Design

  • Front-End Development

  • Copywriting

Partner

Timeline

5 Weeks

Mood Board

image of project mood board, featuring vector illustration in bold, saturated colors

Concept Development

Setting the tone for the future.

We began our work by defining the visual tone for the project. We chose bold, bright colors and clean vector-style imagery to convey a confident, optimistic tone.

Type & Color

Typography samples for Trek Tech web page
Color samples for Trek Tech web page

Illustration

SVG illustrations by Willy Eddy.

SVG illustration of the Enterprise Bridge, rendered in red outline
SVG illustration of the Enterprise Bridge, rendered in block color with black outlines
SVG illustration of thethe Enterprise-D engine room, rendered in black outline and block color
SVG illustration of the Enterprise-D engine room, rendered gold outlines

Web Development

Bringing our vision of the Future to life.

While Willy set to work creating vector illustrations for the site sections and backgrounds, I set up the architecture of the site in HTML, and began working out the CSS rules to implement our visual direction.

As soon as Willy finished an illustration, I would drop the SVG directly into the HTML, in order to animate the images using CSS keyframe animations.

An Animated image of the final Trek Tech browser experience

The Result

The ouput of our of our five-week mission is live at trektech.fun. Click the button below to view the site!

Boldly Go

Reflection

Science Fiction has always been an outlet for human hopes and anxieties about how society might change in the future.

Early 2017 was a time of more anxiety than hope for some, and my partner and I were among those looking for something to feel hopeful about. While the future seen in Trek universe is pretty far from our current reality, it was pure joy to learn about these technologies while stretching and growing my front-end skills.

More Projects to explore

Can a Smart Toy Teach Kids to Read?

Book Buddy

UX / UI, Visual Design, Motion

Licensing without the Line

RUNDMV

UX / UI, Visual Design

Building a Website with Class

Portshowlio 2018

Web Design, UX / UI

Making the Old-School Look New

Stone Gardens

Branding, Visual Design, Environmental Graphics

Setting Savings Goals that Stick

Marshmallow

UX / UI

Augmenting the Museum of Flight

FARTHER

AR / XR, UX / UI

How to Plan a Moving Funeral

Odyssey Memorials

Visual Design, UX / UI