There are 3 screens to be designed
A) Hamburger menu in the upper left and the name of the app centered: Trenches 101 in the TopNav Bar. This bar should be navy blue (see color scheme), with white text.
B) TOP: The top should have the IUOE NTF logo (minus the words) with the blue ribbon and gold/tan circle gauge. Words should be changed to: (First Line- TRENCHES 101:) (Second line- OSHA Trenching & Excavation Safety).
C) MIDDLE: Labeled TOPICS. The label may be horizontal or up and down orientation. Would show four icons with labels (Key Definitions; Excavation Hazards; Soil Classification; Protective Systems). Icons may be in a list one above the other or in a 2x2 layout.
D) Use of Photo. I think would like to use Joe (http://thecde.org/Trenches101/Chara…%20Joe.zip) or another photo image like a hard hat or excavator arm and bucket. Makes sense to have Joe run the length top to bottom.
E) BOTTOM: Labeled TOOLS. The label may be horizontal or up and down orientation. Would show three icons with labels (Slope Tool; Safe Trench Quiz; OSHA Standards). Icons probably need to be in a horizontal list.
(Some icons may be found here: http://www.thecde.org/Trenches101/T…0Icons.zip )
F) Home screen colors. Please use the Navy and Brick Red. Use the Gold/ Tan sparingly. If you use a light background go with the light blue. http://thecde.org/Trenches101/Image…ground.png
G) Homescreen Background- This is up to you. The options I see are 1) Solid; 2) Photo; 3) Partial solid, partial photo 4) split horizontally into the three sections (top logo area, middle Topics, and bottom Tools)
H) Borders- Up to you to add borders around elements/ sections or not.
2-SECTION LANDING PAGE
When you click on one of the seven sections on the home screen, it takes you to a landing page showing section topics (also called subsections). Each section has anywhere from five to thirteen subsections.
A) Name of the section should be centered at the top
B) Subsections should be listed underneath. This should be scrollable since there may be up to 13 subsections. Please provide a nice design on how this listing of subsections should look.
C) Please make suggestions for underneath background image/ color. In the example, this is a mottled light blue and white. Looks like a counter-top. Would like this to be revised.
We are going to have a “tool” built into the app, which functions exactly like:
A) At the top of the screen, the user selects whether it is Soil Type A, B, or C
B) (Prominently) in the middle is a needle, which will be either red, green, or yellow depending on the angle of the phone
C) Around the needle, circular is a compass showing degrees (0 to 90). It should be able to be partially transparent without losing details. This circle should be smaller and less prominent than that shown in the Clinometer app.
D) In the four corners around the circle are:
1. A lock/unlock Icon
2. Icon to turn on/off the camera. user can turn off the background and show the camera instead.
3. Curved arrow pointing to the upper left to rotate the circle 90 degrees.
4. Information icon (an “I”) to access help
E) At the bottom should be room for the user to get 1-2 sentences of feedback.