Design
Header 1
font-family: Roboto-Medium;
font-size: 57px;
color: rgba(255,255,255,0.87);
letter-spacing: 1.61px;
text-align: center;
line-height: 79px;
Header 2
font-family: Roboto-Light;
font-size: 48px;
color: rgba(0,0,0,0.87);
Header 3
font-family: Roboto-Light;
font-size: 34px;
color: rgba(0,0,0,0.87);
letter-spacing: 0.25px;
Body
font-family: Roboto-Regular;
font-size: 24px;
color: rgba(0,0,0,0.87);
letter-spacing: 0.75px;
text-align: left;
Subtitle 1
font-family: Roboto-Regular;
font-size: 16px;
color: #000000;
text-align: left;
Subtitle 2
font-family: Roboto-Regular;
font-size: 14px;
color: rgba(0,0,0,0.87);
letter-spacing: 0.25px;
line-height: 20px;
Button
font-family: Roboto-Medium;
font-size: 20px;
color: #000000;
letter-spacing: 3.3px;
text-align: left;
Where the fonts are used
The content will float in the center of the screen, and as screen width changes the margins on either side of the main content will increase. The dimensions of the content will scale with a vertical change in screen size.
The pixels serve more as a starting point for sizing. These columns are useful for showing the general ratios of the content.
For reference for navigation between pages and page layouts and functions. Orange arrows highlight a section that navigates when clicked.
Message that is currently being viewed is one color. Notification is a bar on the right side of the message preview.
### New user online, notification to accept chat
A notification of a new chat appears the same as a regular message notification, the admin must accept the chat before they can begin talking.
### Delete a thread
Threads can only be deleted once the other user signs off.
### User has disconnected.
These pages have the same notifications as Admin Desktop, but just have a different display and navigation.
To navigate from an individual chat screen to view all of the chat the user can swipe left to right.
The first screen might be displayed on the E4P site, or be its own site (if this is the case more information about E4P can be added below the "need to talk?" button.
I've also added a navigation section in the top right corner, which could link to a number of different pages and could also include a log off button. I thought having a way to provide feedback within the page would be useful for E4P and it would also be useful if users had access to more resources if they need.
Swipe up to be paired with an ear.
Optional: Adding an exit button, and what happens when it is/is not activated.
Navbar on mobile.
