I created a fictitious website for a game called Brawlhalla, where users can post guides and content. To see the final result of the site go to http://stripenode.com/brawlbasesite/
Primary Goal: The primary goal of the website is to create a website with multiple pages that people can easily navigate through. The website will have a menu, a page with blog entries for updates, a page for character information, social media will be placed in the footer along with the contact information. There will be a page with a form to make guides. We want the users to spend their time on the website enjoying the content that is there.
Secondary Goal: I want the navigation to be fixed at the top so while they are browsing the site they will be able to navigate at any time.
Secondary Goal: Have a gallery of images and videos that people can see of cool plays or character designs.
Secondary Goal: It would be nice to have user registrations for people to upload their own content.
- Character Stats
- Player Stats
- Item information
- Character information
- Patch Notes
- Website News
Which would fit best
Having a content inventory makes sure all the requirements are checked off makes sure to keep every person organized.
- As a User, I want to see the website on my phone so that I can view the site anywhere.
- As a User, I want to see content on the front page so that I don’t have to click through the site to see the content.
- As a User, I want to see a navigation bar so that I can navigate the website easily.
- As a User, I want the navigation bar to take me to other pages so that I can see the full extent of the site.
- As a User, I want readable text so that I can read the text without straining my eyes.
- As a User, I want to a login form so that I can log in and comment/add content to the pages.
- As a User, I want a register tab so that I can register to the site.
- As a User, I want a fixed navigation bar so that I can click on it no matter where I’m at in the page.
- As a User, I want to see the news at the top, so that I don’t get it confused with the content.
- As a User, I want the patch notes on the front page, so that I don’t have to keep clicking through pages for the latest information.
- As a User, I want the colors to contrast so that I can see the website clearly.
- As a User, I want the patch notes as a separate page so that I can get to the content without having to scroll a lot.
- As a User, I want to see social media at the bottom so that I can follow and see content on twitter and other social media.
- As a Designer, I want to have a footer so that there can be website information and social media space.
- As a Designer, I want to have a content section so that I can have a location to input all the content.
- As a Designer, I want to have a sidebar so that I can have login and register features on desktop.
- As a Designer, I want to replace the sidebar with a tab in the navigation so that the user doesn’t have to scroll all the way down to login.
Low fidelity Wireframes
- Dark Blue: #071826
- Blue: #0B283F
- Orange: #DF764E
- Yellow: #FCDE38
- Beige: #A68473
High fidelity Wireframes
After seeing how the site would function and the main base it is now time to come up with how it would actually look when created. This process is useful because there is still no coding involved so no time will be wasted by developers if it doesn’t work right.
I created a front-end design on how Brawlbase would look and feel if completely created. You can find the created one page here: http://stripenode.com/brawlbasesite/