Interactive Design - Project 2 Prototype

Interactive Design - Project 2

Ke Bo Zhi / 0362533

Bachelor of Design (Hons) in Creative Media 

Project 2

INSTRUCTIONS

From prototype to preliminary design - Building a "Plants vs. Zombies" themed website

1. Website planning and goal setting

1.1 Determine website goals

"Plants vs. Zombies" is a very popular tower defense game, and because its gameplay is very interesting, the website can include the following:

Game introduction: including the background story of the game, introduction to gameplay, detailed information on characters and plants.

Strategies and cheats: Provide strategies on how to defeat zombies, pass-through skills, and detailed introductions to each level.

Character and plant encyclopedia: Display all plant and zombie characters in the game, explain their characteristics, abilities and usage skills.

Game information and updates: Contains the latest updates, new version information and event news of the game.

Interactive community: Provide forums, player discussion areas, or comment areas to increase user interaction.

1.2 Website target users

Core players: fans who have played "Plants vs. Zombies".

New players: potential users who are learning about the game.

Strategy enthusiasts: players who seek to improve their game skills and understand deeper strategies.

2. User research and demand analysis

Through questionnaires, competitive product analysis, or through interaction with fans, you can better understand user needs. Here are some possible needs:

Concise and clear game tutorials: Novice players can quickly get started and understand how to start the game.

Character information: Players want to know detailed information about each plant and zombie.

Multi-platform compatibility: Make sure the website can run well on both PC and mobile devices.

3. Design prototype and interactive design

3.1 Wireframe design

During the prototype design stage, the most important thing is to plan the page structure of the website and ensure that the function of each page is clear. For example:

Homepage: game introduction, quick links to plant and zombie encyclopedia, hot news, etc.

Plant encyclopedia page: images, descriptions, usage tips of each plant, and how they fight different zombies.

Zombie encyclopedia page: Display various zombies, their abilities and weaknesses.

Strategy and tips page: Detailed level strategies, plant combinations, and the best strategies to fight specific zombies.

3.2 Interaction design

Make the player's browsing experience on the website more interactive. For example:

Mouseover effect: When the user hovers over a plant or zombie, detailed information about the plant or zombie is displayed.

In-game video: Provides a demonstration video of the gameplay or highlights of Plants vs. Zombies.

Plant selector: Allows users to select different plants or zombies to view detailed information through a simple drop-down menu or click effect.

4. Visual design and style

When designing a website, follow the game style of "Plants vs. Zombies". Here are some design points:

Color: Green (grass and plants), purple (night mode), brown (dark atmosphere of zombies), etc. commonly used in the game.

Font: You can use the style fonts in the "Plants vs. Zombies" game to increase the fun.

Illustration: Use character images and scenes in the game to strengthen the game atmosphere of the website.

Button design: Make sure the button style is simple and consistent with the game style, such as round buttons, green leaf backgrounds, etc.

5. Determine the technology stack and development plan

At this stage, we need to determine the development tools and technology stack used:

HTML5: Create the basic structure of the website.

CSS3: Used for layout design and animation effects.

JavaScript: Implement dynamic effects and interactive functions of the page.

Front-end framework (optional): such as Vue.js or React, if you plan to do more complex interactive functions.

Design tools: Use Figma, Sketch or Adobe XD to design page prototypes and interactions.

The Figma link ：https://www.figma.com/design/RtzLcns0PpKgcemJ1uqYpq/Untitled?node-id=0-1&t=btET9zwSDl0i9NJE-1

Conclusion

The focus of this first blog is on planning and designing the framework and interaction of the "Plants vs. Zombies" website. You need to clarify the website's goals, user needs, and the visual style design of the website. This step is completed by using wireframes, prototyping tools, and user feedback to ensure that the overall direction of the website is correct.