Character Sheet Site Plan

Overview

Purpose

I want to make a more visually appealing character sheet for a table top RPG game I'm playing with friends online. It would be a place for me to easily reference all the essential details of my character including stats, level, HP, etc. in a way that is more visually pleasing than the current sheet we use.

Audience

I am the primary audience, but I could also share this template with my friends so they could fill out their own character details.

Dynamic elements

I want to be able to manage my health and other stats that will change during the course of a normal game session. I would also like a toggleable button that allows me to make edits to things like level and character stats that will change only sometimes. I'd like to add a radar chart that adjusts dynamically with my character stats if possible. In my second page I want to be able to type notes in and then add them to the page.

Branding

Website Logo

Style Guide

Color Palette

Typography

Heading Font: Sixtyfour

Paragraph Font: Courier Prime

Normal paragraph example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Colored paragraph example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Navigation

Content

Home page

Character info and stats for the character formatted from a js file. Radar chart to display the stats visually.

Notes

Text entry area and a display scetion for the notes that are added to the a list from the text entry.

Wireframes

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

Home

Most of the details will be filled out by js objects, but this is the structure.

Notes

The title and nav will be the same as the home, I just didn't draw it again.