Interactive Design Final Project : Design Exploration & Application

10/6/2024 - 22/7/2024 ( Week 8 - Week 14)

Lew Guo Ying / 0365721

Interactive Design / Bachelor's of Design Honors In Creative Media

Final Project : Design Exploration & Application

---

1. Final Project : Design Exploration & Application

A. Theme Choosing & Proposal

B. Figma Design 

C. Dreamweaver Coding 

2. Feedback 

3. Reflection

---

1. Final Project : Design Exploration & Application

Objective: In this assignment, you have the creative freedom to design and develop a single page microsite centered around the theme of lifestyle. Your goal is to craft an immersive and visually appealing microsite that effectively communicates the chosen lifestyle theme and engages users through thoughtful design and interactive elements.

A. Theme Choosing and Proposal

As a dedicated Terraria enthusiast, I have been deeply immersed in the game since my youth, enjoying its rich gameplay and vibrant world. Over the years, I've developed a profound appreciation for its unique blend of exploration, crafting, and adventure. Inspired by my passion for the game, I have decided to create a comprehensive website dedicated to providing in-depth information about Terraria. This platform will serve as a valuable resource for both new and experienced players, offering detailed guides, tips, and insights into various aspects of the game, from character development and building strategies to boss battles and modding opportunities. 

B. Figma Design

I did a rough wireframe regarding the design of the website, I seperated it into different sections.

Tagline: Explore, Build, Battle – All in Terraria!
Core Concept: Enter a world of infinite possibilities where you can dig, fight, explore, and build, experiencing unparalleled adventures.
Features & Highlights:
Infinite Exploration: Randomly generated worlds full of surprises.
Creative Building: Use hundreds of materials to construct your dream home.
Intense Combat: Challenge powerful bosses and monsters for rare loot.
Diverse Gameplay: Enjoy solo adventures or team up with friends for cooperative fun.

Featured Content Page
Tagline: Explore the Infinite, Create Wonders!
: Tagline: Every adventure is unique! Explore randomly generated worlds, each corner filled with the unknown and surprises. From dense forests to mysterious underground caves, every adventure is one-of-a-kind.
Creative Building: Tagline: You r imagination is the limit! Utilize hundreds of materials and items to build your dream home. From simple wooden houses to grand castles, your imagination is the only limit.
: Tagline: Face mighty foes, fight to the end! Confront various powerful bosses and monsters, experiencing thrilling battles. Collect rare loot to enhance your combat abilities and gear.
Rich Ecosystems: Tagline: Every biome has its own story! Explore diverse biomes, each with unique environments and enemies. From scorching deserts to icy tundras, each biome has its own distinct charm.
Dynamic Events: Tagline: Always ready for new challenges! The game is filled with random events and challenges, making every playthrough fresh and exciting. Be prepared for unexpected surprises and challenges!
Multiplayer Mode: Tagline: Double the fun with friends! Cooperate with friends in multiplayer mode, sharing the joy of exploration and combat. Whether building together or teaming up for battles, collaboration brings more fun.
Regular Updates: Tagline: New content, new adventures, never-ending fun! Regular new content and updates keep the game fresh and engaging. Discover new items, events, and features, ensuring your adventures never stop.

Photo Gallery :

Here, we showcase selected game screenshots and player creations, offering a deeper look into Terraria's visual charm and creative possibilities.
Game Screenshots: Browse stunning landscapes and rich details from the game, featuring grand structures to mysterious underground worlds, each image a part of an adventure.
Player Creations: See what players have crafted, including amazing buildings and unique character designs. In Terraria, your imagination is the only limit!
Featured Events: Explore highlights from special in-game events and community activities. Witness how players showcase their talents in this diverse world.
Share Your Experience: Join our community and share your game screenshots and creations. Whether you're a newcomer or a seasoned player, everyone has their own story in Terraria.

Testimonials :

Tagline: What do players say about Terraria?
Here, discover real testimonials and experiences from players and reviewers about Terraria. See how they describe the fun and challenges this game has brought to them.
Player Reviews: Read insights and stories from real players, sharing their adventures and gaming experiences in Terraria.
Gaming Media: Explore reviews and analyses from gaming media and critics, offering professional opinions and insights into Terraria.
Social Media Feedback: Browse player feedback and discussions from social media platforms like Twitter, Reddit, and more.
Share Your Review: Join our community and share your own review and thoughts about Terraria. Your voice matters to us!

Mods :

Tagline: Enhance Your Terraria Experience!
Discover and download a variety of mods here to bring new features, content, and experiences to Terraria.
Popular Mods: Browse and download popular mods including new weapons, tools, buildings, and gameplay mechanics to enhance your gaming experience.
Developer Picks: Explore mods recommended by developers for their quality and creativity.
Installation Guide: Learn how to install and manage Terraria mods to ensure you can enjoy customized game content seamlessly.
Share Your Mods: If you're a mod developer, join our community to share your creations and ideas. Let more players enjoy your creativity!

Figma Design File :

C. Dreamweaver Coding

I started to code on dreamweaver starting with HTML

Fig1.1 code

In first, I put title and font linked inside, and the index.html head.

Fig1.2 header

I write two version of header because the header in computer version too big, if using in responsive mobile media size, this will look weird and difficult to use, so i try to match with java script to detect screen size and change header version.

Fig1.3 Hero Page

Fig1.4 HTML

My design is divided into several sections, each identified with an ID. The navigation links are used to navigate to these different sections.

Netlify Link : https://gy-terraria-final-project.netlify.app/

---

2. Feedback

Week 10 : Mr Shamsul commented that i should reduce the amount of content and wireframe should be made more obvious such as labelling them clearly. 

---

3.Reflection

Coding is actually quite interesting and enjoyable, but I've only recently started learning it. The teacher didn't provide extensive instruction, so I've had to rely a lot on self-study and searching for tutorials online. However, this is quite normal in university, as self-learning is a big part of the experience. 

I can feel that sometimes coding relies heavily on luck. Once you get it right, it's great, but if not, you just have to keep trying until you find what works. This often means that the code can become very long and complex. Making it responsive can be quite challenging. 

For the final project, I created two headers because the display differs between computers and phones. A large header on a phone looks unattractive and is not user-friendly. So, I learned how to use JavaScript to detect screen size. It was a bit complicated and took quite some time to figure out. 

Overall, it was still very interesting. I need to continue learning so I can save time and reduce the complexity of my code, making it more concise.