urbanscratcher / project-minecraft-park

A personal static web site for Minecraft Theme Park as practice

Minecraft Adventure Park

May - July 2023

The project focused on the planning and development process, from requirements gathering and wireframing to site design and CSS/HTML implementation. It emphasized user experience by efficiently organizing information based on importance and providing specific details on each page.

Features

• Effective Communication: The project emphasized identifying target audiences and tailoring information accordingly.
• Importance-based Placement: Information was organized based on its perceived importance.
• Page-specific Information Segregation
  • Main Page: Provides key information.
  • Detailed Service Page: Offers detailed information on attractions and services.
  • Customer Support Page: Includes ticket information, park maps, accessibility information, and FAQs.
• Sitemap: A sitemap with contact information was placed at the bottom of each page for easy navigation.

Technical Focus

• This project is crafted using pure CSS and HTML without JavaScript, focusing on the theme park concept.
• During the design phase, the primary purposes of the site (online ticketing, attraction information, visual branding, advertising, customer support) were defined, and the target audience was identified.
• An analysis of five similar websites was conducted to identify common information and their pros and cons, which were then incorporated into the design.
• Decisions on page division and information placement were made, followed by wireframing.
• Wireframes were refined using MS PowerPoint and Figma, selecting appropriate fonts and colors to create a simple design system.

Demo

minecraft-demo.webm

Visit the Site Final Report(ENG).pdf

Tech Stack

Frontend

• HTML, CSS

Backend

• None

Development Environment

• Source Code: Managed manually
• Design: MS Powerpoint for wireframing, Figma
• Communication: Slack

Cloud Services and Deployment

• Hosting and Deployment: GitHub Pages

Design Process

1. Organize the planning document clearly.

   minecraft-plan.webm

2. Create wireframes.

   minecraft-wireframe.webm

3. Select typography and colors that match the site.

   minecraft-typo-color.webm

4. Create mockups.

   minecraft-mockup.webm

Visit the Figma File

---

Reflection

• This was my first extensive use of Figma, and I found it optimized for applying styles uniformly across components.
• ChatGPT was immensely helpful in developing virtual content.
• Although it was a four-person project, I handled the ideation, documentation, Figma design, and implementation due to circumstances.
• Communicating solely via Slack was challenging, especially with different time zones, making it hard to coordinate meetings.
• Despite some review from two team members, I primarily treated this as a solo project due to my high standards for the final product.