Nordhalla

A website about a video game that follows a knight's journey through the Five Lands in Between.

Nordhalla

A website about a video game that follows a knight's journey through the Five Lands in Between.

Overview

Introducing Nordhalla, a video game that follows a knight's journey through the Five Lands in Between. The website is designed to showcase the lore, story, and game information. Plus this is also my very first web development project.

Introducing Nordhalla, a video game that follows a knight's journey through the Five Lands in Between. The website is designed to showcase the lore, story, and game information. Plus this is also my very first web development project.

Timeline

Oct 30 2023 - Nov 15 2023

Oct 30 2023 - Nov 15 2023

Project Team

Relevant Coursework

Relevant Coursework

Role

Web Developer

Web Developer

Tool

VS Code

VS Code

Photoshop

Photoshop

Adobe Firefly

Adobe Firefly

After Effects

After Effects

Skills

Web Development (HTML + CSS)

Web Development (HTML + CSS)

What is Nordhalla?

Project Overview

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?

Project Overview

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?

Project Overview

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

Story

Story

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.

Design

Design

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.

Design

Design

graphic assets

graphic assets

With the power of generative AI, I can quickly created graphic assets for this project, saving me both time and resources.

With the power of generative AI, I can quickly created graphic assets for this project, saving me both 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.

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

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.

The animated hero section features Prince Wilhelm of Nordhalla battling the Skogsra Draugr, the Abyss Watcher.

Final Design

Final Design

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.

The homepage will feature animated game art and a link that directs visitors to the game trailer.

Final Design

Final Design

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.

Visitors will be able to read the prologue to better understand the lore before diving into the game.

Final Design

Final Design

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.

Explore the Five Lands in Between, with a brief description of each faction.

Final Design

Final Design

Character page

Character page

Discover the story behind each character featured in the game.

Discover the story behind each character featured in the game.

Discover the story behind each character featured in the game.

Final Design

Final Design

About us

About us

I will be sharing insights into what inspired me to start this project.

I will be sharing insights into what inspired me to start this project.

I will be sharing insights into what inspired me to start this project.

Final Design

Final Design

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.

Check out the prologue trailer video, which introduces the beginning of this massive world.

Final Design

Overview

Overview

Production

Building the MVP

Building the MVP

Once all the graphic assets have been generated, I can then start the development process.

Once all the graphic assets have been generated, I can then start the development process.

Production

the prologue

the prologue

Don't forget to check out the prologue for the untold secret of the Five Lands in Between.

Don't forget to check out the prologue for the untold secret of the Five Lands in Between.

Outcomes

Outcomes

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.

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.

Thankyou for your time!

Thankyou for your time!

Feel free to send me a message to share your valuable feedback. I'm also happy to discuss your projects.

Feel free to send me a message to share your valuable feedback. I'm also happy to discuss your projects.

Feel free to send me a message to share your valuable feedback. I'm also happy to discuss your projects.