Game Tracker Site Plan

Nathan Shumway

WDD 131


Overview

Purpose

This site helps users catalog and track their personal video game collection. It allows them to browse, sort, mark games as completed, and see detailed information.

Audience

Gamers of all ages who want a simple, personal way to manage and organize their video game libraries.

Dynamic Elements

JavaScript will dynamically load and display the game library from an array of objects, filter/search games, handle marking games as completed, and open a detailed view of a selected game.


Branding

Website Logo

A logo will be created later.


Style Guide

Color Palette

Palette URL: https://coolors.co/3b7a57-264653-2a9d8f-e9c46a-f4a261
Primary Secondary Accent 1 Accent 2
[#3B7A57] [#2A9D8F] [#E9C46A] [#F4A261]

Typography

Heading Font: Orbitron

Paragraph Font: Open Sans

Normal paragraph example

This site allows users to track their favorite games and mark progress. All information is stored locally in the browser.

Colored paragraph example

Your collection is always up to date. Explore, filter, and celebrate your gaming achievements.

Navigation


Content

Home Page

The Home page displays the library of owned games in a scrollable list, including cover images, titles, and buttons to mark as completed or view details. Below, a search section lets users browse all available games and add them to the library.

Game Details Page

The Game Details page shows the selected game's cover image, platform, genre, description, and options to return to the library or mark as completed.

Wireframes

Create two wireframes for your site. One for each page and list them here.

Home Page & Game Details Page

Home Page Wireframe Game Details Page Wireframe