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-f4a261Primary | 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

