Simple Mythology Site
Project Type
Web Design
User Experience Design
Programs Used
Figma
VSCode
Overview
Labyrinth is a simple website serving as a fun source for stories and characters from classical mythology that friends can share with each other.
Competitor
Sites solely dedicated to the study and appreciaton of classical mythology are few and far between. Our main competitor is a site called Theoi.com.
Labyrinth site is meant to serve as artful and surreal web design. Theoi does its job, but lacks interest at its interactivity and styling.
Process
Labyrinth is all about staying true to the fantasy elements of classical myth. Low-tech that feels supernatural and straight from the source material.
Personas
John
male | age 50
Lower middle class father of two children (8yrs and 11 yrs). First exposure to classical myth was the 80s film Clash of the Titans. Never read from source material but can google names of characters from mythology.
Ariadne
female | age 22
College student from middle class family. Living away from home at a campus apartment. Exposed to classical myths by friends who were fans of the Percy Jackson and the Olympians series.
Joseph
male | age 28
College graduate who is fond of video games, anime, and films. Dislikes reading because it is more boring than other media he's interested in.
Despite the academic nature of the subject matter, our target audience is more casual enjoyers of classical mythology genre, specifically people who have been exposed to work that references source material like video games, films, and novels
Design Approach
Labyrinth's styling is based on ancient Greek material culture, specifically glass, wax, iron, and bronze.
Sitemap
User has to be able to access many interconnected pages without feeling lost. Global navigation menu gives users an easier way to get to more distant infromation pages without having to retrace their steps.
Styling Colors and Type
Headings and body text are new but feel older, which is why Cinzel Decorative handles static headings and Cormorant Garamond is for reading large bodies of text.
Global Navigation
The global navigation for Labyrinth is an animated talisman-like action button that animates the material qualities of the site.
Button press reveals an overlay that takes up the full window and breaks the passivity of the site's design.
Page Layout and Design System
Character and story pages feature similar formats sitewide. images are kept in stylized border boxes that make images seem more interactive with the rounded corners.
Home page leads users to archive views of each category where they can pick a character from the image portals, or in the case of text-only content, from the story links.
Each story or character page contains links to other pages in the site that mention said subject.
Characters like gods and demigods have short-form biographical information and characteristic information that sets them apart from the greater collection. Monsters found in the Bestiary have survival information that conveys the might of each mythical creature.