Overview
Overview
This is my very first web development project. While I was learning HTML and CSS, I created a website about a fictional video game called Nordhalla. The story follows a knight’s journey through the Five Lands in Between. The website is designed to showcase the game’s lore, story, and other information.
This is my very first web development project. While I was learning HTML and CSS, I created a website about a fictional video game called Nordhalla. The story follows a knight’s journey through the Five Lands in Between. The website is designed to showcase the game’s lore, story, and other information.
Timeline
Timeline
Oct 30 2023 - Nov 15 2023
Oct 30 2023 - Nov 15 2023
Project
Project
Relevant Coursework
Relevant Coursework
Role
Role
Web Developer
Web Developer
Tool
Tool
VS Code
VS Code
Photoshop
Photoshop
Adobe Firefly
Adobe Firefly
After Effects
After Effects
Skills
Skills
Web Development (HTML + CSS)
Web Development (HTML + CSS)
What is Nordhalla?
Nordhalla is heavily inspired from beloved video game series like Dark Souls and Elden Ring, as well as popular TV series like Game of Thrones and King Arthur. We aim to highlight and capture the power struggle between the five lands in the game. As players explore the world, they will witness every characteristics of these lands. We can't wait for our players to dive into the world we've created.
What is Nordhalla?
Nordhalla is heavily inspired from beloved video game series like Dark Souls and Elden Ring, as well as popular TV series like Game of Thrones and King Arthur. We aim to highlight and capture the power struggle between the five lands in the game. As players explore the world, they will witness every characteristics of these lands. We can't wait for our players to dive into the world we've created.
What is Nordhalla?
Nordhalla is heavily inspired from beloved video game series like Dark Souls and Elden Ring, as well as popular TV series like Game of Thrones and King Arthur. We aim to highlight and capture the power struggle between the five lands in the game. As players explore the world, they will witness every characteristics of these lands. We can't wait for our players to dive into the world we've created.
Design
Design
Background
Background
As a player, you will take on the role of Prince Wilhelm, who must find a way to save the fallen kingdom of Nordhalla. Explore the world, settings, and characters featured in the game on the website.
As a player, you will take on the role of Prince Wilhelm, who must find a way to save the fallen kingdom of Nordhalla. Explore the world, settings, and characters featured in the game on the website.
Fun Fact: I created this fantasy background story exclusively for this project.
Fun Fact: I created this fantasy background story exclusively for this project.
Illustration
Illustration
Given the short timeframe, there was plenty of artwork that needed to be created. To ensure the project was completed on time, from writing and design to web development, I used Adobe Firefly to generate most of the artwork, so they can better immerse themselves in the world I created.
Given the short timeframe, there was plenty of artwork that needed to be created. To ensure the project was completed on time, from writing and design to web development, I used Adobe Firefly to generate most of the artwork, so they can better immerse themselves in the world I created.
graphic assets
graphic assets
Since this is not a graphics design project, I decided to use Firefly AI to quickly generate some AI illustration assets for the website, which greatly saved me time and resources.
Since this is not a graphics design project, I decided to use Firefly AI to quickly generate some AI illustration assets for the website, which greatly saved me time and resources.
Ideation
Ideation
Wireframe
Wireframe
The website will contain around 7-8 pages, using a zig-zag layout to present the information hierarchy, making it easier for users to read through the story. I also plan to create an animated banner for the hero section on the homepage.
The website will contain around 7-8 pages, using a zig-zag layout to present the information hierarchy, making it easier for users to read through the story. I also plan to create an animated banner for the hero section on the homepage.
Final Design
Final Design
Homepage
Homepage
The animated hero section features Prince Wilhelm of Nordhalla battling the Skogsra Draugr, the Abyss Watcher.
The animated hero section features Prince Wilhelm of Nordhalla battling the Skogsra Draugr, the Abyss Watcher.
Homepage
Homepage
The homepage will feature animated game art and a link that directs visitors to the game trailer.
The homepage will feature animated game art and a link that directs visitors to the game trailer.
Story page
Story page
Visitors will be able to read the prologue to better understand the lore before diving into the game.
Visitors will be able to read the prologue to better understand the lore before diving into the game.
World page
World page
Explore the Five Lands in Between, with a brief description of each faction.
Explore the Five Lands in Between, with a brief description of each faction.
Character page
Character page
Discover the story behind each character featured in the game.
Discover the story behind each character featured in the game.
TRailer
TRailer
Check out the prologue trailer video, which introduces the beginning of this massive world.
Check out the prologue trailer video, which introduces the beginning of this massive world.
Overview
Overview
Development
Development
Building the MVP
Building the MVP
The website is built with HTML and CSS.
The website is built with HTML and CSS.
Reflection
Reflection
Summary
Summary
Generative AI is a super powerful tool, but getting the right results requires a lot of experimentation. I'm happy to see the result of my very first web project. It was such a fun experience, from writing the lore and designing characters to building the site itself.
Generative AI is a super powerful tool, but getting the right results requires a lot of experimentation. I'm happy to see the result of my very first web project. It was such a fun experience, from writing the lore and designing characters to building the site itself.
The client requested that the website be built on Squarespace, as she had already subscribed to their payment plan. Even after the website was launched, our work continues as we explore ways to optimize SEO settings and keyword searches to maximize her business’s online exposure.
Next Project
Next Project
Phantom Pneuma
A web mini-game where you play as a supernatural detective
Phantom Pneuma
A web mini-game where you play as a supernatural detective
Phantom Pneuma
A web mini-game where you play as a supernatural detective