MIRAGE Website Design

Chris Moore

Brand Designer
Web Designer
UI Designer
Adobe After Effects
Adobe Photoshop
Figma

The Brief:

This project was based on an ISTD brief for 'Big Data'. The aim was to create a web app that can allow users to manage, view and control their data privacy. The visual direction was inspired by classic analogue devices and interfaces, as well as lofi-scifi. The end result was a unique looking website that pays homage to pre-1990s computing, whilst retaining a contemporary structure that can be easily navigated by users.
MIRAGE Sections
MIRAGE Sections

Initial Explorations

The first step was going to be the name and logo design. I knew the name needed to convey themes of perception, concealment and masking. Ultimately, "Mirage" was chosen because it represents the user's ability to obfuscate and mask their data without completely removing it entirely.
Initial Naming Mind map
Initial Naming Mind map

Logo/Wordmark

The site design would lean heavily into typography, with monospaced fonts used to reference command terminals and old school interfaces. As such, I wanted a big, bold wordmark that could capture attention and contrast heavily against the much smaller copy that would follow it. This wordmark would 'Span the horizon' of the page, paired with a mirage themed gradient and server icon in the place of the 'E' to represent data storage.
Wordmark & Logo Colorways
Wordmark & Logo Colorways

Typeface & Color Palette

Systems & Layout Concepts

The next step was figuring out how to layout the site and approach the design of various interactions in way that could be easily understood by users. I wanted to retain the 'techy' terminal direction, whilst keeping the overall structure contemporary and intuitive.
Systems Exploration
Systems Exploration
Early Section Wireframes w/ Placeholder Wordmark
Early Section Wireframes w/ Placeholder Wordmark

Final Outcome

Learn more and view the full motion walkthrough at: www.cmdr.design/mirage
Hero Section
Hero Section
Signpost Section
Signpost Section
About/Stats Section
About/Stats Section
Data Section
Data Section
Profile Builder Section
Profile Builder Section
FAQ Section
FAQ Section
Footer Section
Footer Section
Mobile Previews
Mobile Previews
Partner With Chris
View Services

More Projects by Chris