Homepage
(Starting State)
As
you can see in the first mockup, above, Readingful's homepage
shall consist of a logo and subtitle in the upper left corner,
sign up and login buttons in the upper right corner, the
story infoblock (which contains the title, synopsis, and
button for the main "in focus" story being shown
in the background upon load), and finally in the lower right
a trio of stories curated for the current month, the "Story
Selection Array." Clicking the "Login" button
shall trigger the site's login module in the same upper
right location. Clicking the "Sign Up" button
shall take the user to the "Learn More" page.
Clicking the "Read It" button for the currently
story in focus shall take the user to the page on which
to actually begin reading said story. And finally, clicking
any of the trio of additional featured stories for the month
should load the select story into the background, bringing
it in focus.
Responsiveness
Readingful
shall be fully responsive, with it being usable on almost
any device's screen area. The guide overlay in the second
mockup, above, shows how all pages and views will essentially
function, with elements always drawn to the sides of the
inner area of a page.
Background
Images & Featured Stories
The
background image, and featured stories, shall be chosen
randomly from actual stories in Readingful's library that
have been selected by the site admin to display during the
current month. In other words, the admin will have the ability
to mark certain texts as being relevant to a certain month
of the year when uploading or editing them. That's the pool
of texts the platform should pull from to show in the "Story
Selection Array." This will ensure Readingful always
has a seasonal flair, no matter the time of year. All background
images on Reading ful are WebP format.
Background
Overlay
Each page on Readingful needs a gradient overlay over the
image, but this is part of the image. It's not a separate
styling element.
Component
Colors
The
color of nearly all components on Readingful, while they
all have default coloring, can be overridden via the "Color
Map" for a specific story's "Story Package"
upload. This allows the color of objects and text components
to change, depending on which story is currently in focus,
in the background.
Buttons
All
buttons and links across the platform shall have default,
hover, and onclick states, at minimum. Some will require
disabled states, as well.
Styling
Checklist:
Images:
1.
Site Logo: readingful_logo.svg,
540 x 118, #FFFFFF
2.
Site Subtitle, #FFFFFF80
3.
Selection Array Navigation Arrow: story_selection_arrow.svg,
34 x 50, #FFFFFF40
4.
Selection Array Navigation Arrow Hover: #FFFFFF80
5.
Selection Array Navigation Arrow OnClick: #FFFFFFBF
6.
Selection Array Navigation Arrow Disabled: #FFFFFF1A
Text:
MOCKUP
1:
1.
Story Title: 3.6
rem, #FFFFFF
2.
Story Synopsis: 1.8 rem,
#FFFFFFB3
3.
Read It Button Text: 2.4
rem, #FFFFFF
4.
Read It Button Text Hover: 2.4
rem, #FFFFFFBF
5.
Read It Button Text OnClick: 2.4
rem, #FFFFFF80
6.
Read It Button Text Disabled: 2.4
rem, #FFFFFF80
7.
Search Text Default:
4.8 rem, #FFFFFF80
8.
Search Text: 4.8 rem,
#FFFFFF
9.
Sign Up Button Text:
2.4 rem, #FFFFFF80
10.
Sign Up Button Text Hover: 2.4
rem, #FFFFFFBF
11.
Sign Up Button Text OnClick: 2.4
rem, #FFFFFF
12.
Login Button Text:
2.4 rem, #464D7F
13.
Login Button Text Hover: 2.4
rem, #464D7FBF
14.
Login Button Text OnClick: 2.4
rem, #464D7F80
15.
Story Selection Array
Title: 3.8 rem, #FFFFFF
16.
Story Selection Array Subtitle: 2.4
rem, #FFFFFFB3
Objects:
1.
Site
Background: #11141E - NOT SHOWN
2.
Site
Window Shadow: #0E1018 - NOT SHOWN
3.
Read
It Button Background: 130 x 50,
#6C96FF
4.
Read
It Button Background Hover: 130 x
50, #6C96FFBF
5.
Read
It Button Background OnClick: 130
x 50, #6C96FF80
6.
Read
It Button Background Disabled: 130
x 50, #6C96FF80
7.
Login
Button Background: 104 x 50,
#FFFFFF
8.
Login
Button Background Hover: 104 x 50,
#FFFFFFBF
9.
Login
Button Background OnClick: 104 x 50,
#FFFFFF80
|
