nswalters / bear-watcher

Project for NSS: https://github.com/nss-evening-cohort-12/e12-homework/blob/master/week08.md

0 stars 0 forks source link

Create wireframe(s) #2

Open nswalters opened 4 years ago

nswalters commented 4 years ago

Dev Story

As the developer, when reviewing the code repo, I should see a directory with wireframe(s) of each section of the page.

AC

WHEN the developer views the wireframes directory of the repository THEN I should see wireframe(s) for major pages/sections of the website AND there should be provided styles

nswalters commented 4 years ago

Top of Page Image

Link to image here

Lots_and_lots_of_bears_at_Brooks_Falls

Full Page - Zoomed Out

Top of Page with Form Button

Top of Page with Guides

Middle of Page with Guides

Bottom of Page with Guides

nswalters commented 4 years ago

Updated Overall Wireframe

Note that the hero image now only takes up three quarters of the top screen section, and the form takes up the last bottom quarter. Also, the footer now takes up the same size as a card row does, instead of a half-row like before.

Wireframe with guides for sizing

nswalters commented 4 years ago

After further review of the wireframe, I've determined that the multiple uses of "Bear Watcher" and "Bear Tracker" were rather redundant. A new issue will be opened to remove the 'Bear Tracker' line of the overlay text on the image.

nswalters commented 4 years ago

Instead of a set of standard columns, instead we will be utilizing the 'card-deck card-columns' functionality of Bootstrap to support dynamic contents for individual bears.

Example screenshot:

Example of dynamic cards in card-columns card-deck

nswalters commented 4 years ago

After further review, the footer section has been scrapped as there is no specific requirement to have one and there is no data we need to put in it right now.

nswalters commented 4 years ago

Bear Card Update - Bonus 1: Tracking Fishing

Full Card Border: 8px solid black
Vertical line, horizontal line, and name border: 4px solid black
Fish icon: 
Success icon/button: 
Success icon/button hover: Caught Fish
Success color: #629c44
Failure icon/button: 
Failure icon/button hover: Missed Fish
Failure color: #b70f0a

Bear Card Layout Update

nswalters commented 4 years ago

WIP Example with counts and timestamps hard-coded.

WIP Example

nswalters commented 4 years ago

Updated card layout with live times added and functional.

Bear card layout with live times

nswalters commented 4 years ago

iPhone 6/7/8 Plus screenshot

iPhone-6-7-8-Plus-screenshot