The NoticeBoard
Style Guide Logo Colours Typography Elements Templates
Logo
The NoticeBoard
Master Logo
The NoticeBoard The NoticeBoard is an Internet-based application which allows instructors and students to put class materials on the Internet. It provides a variety of tools to facilitate teaching and learning. The basic
tools used in a NoticeBoard course includes a Course-Structure, Learning Module, discussions, calendar, email, announcements, grades, assessments, and assignments.
Logo Variations
The NoticeBoard Horizontal layout
The NoticeBoard Inverted Colors
Logo mark only
Colors
The NoticeBoard
Primary Colors
Orange
Teal
Green
#FEA522
#4DB6AC
#87CB3A
Color Palette The emotion that is brought out of this colour palatte is Fresh (Orange), Calm (Blue) and Knowledge (Green) combining the three, emotes an essence of a stressfree environment.
#F57C00
#009688
#689F38
#FEA522
#0EB3BB
#8BC34A
#7A7A7A
#808285
#AED581
#FFCC80
#B2DFDB
#C5E1A5
#FFE0B2
#808285
#DCEDC8
Typography
The NoticeBoard
Main theme of being fresh and friendly these two typefaces work well together. Helvetica Regular: Body text
Helvetica Medium: Sub-header Helvetica Bold: Header
Archer : Notice or articles
Primary Typeface
“The quick onyx goblin jumps over the lazy dwarf" Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0 1 2 3 4 5 6 7 8 9 ( @ & $ * : ; ! ? ) HELVETICA REGULAR
“The quick onyx goblin jumps over the lazy dwarf" Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0 1 2 3 4 5 6 7 8 9 ( @ & $ * : ; ! ? ) HELVETICA BOLD
SIzes
Header Bold pt 45. Sub- Header Regular pt 33 Body Regular pt 33
Graphic Elements
The NoticeBoard
Icons
COMPONENTS These are the basic component elements I have chosen.
Course title elements
Annoucements
Notification
White on orange background
Graphic Elements Styling
The NoticeBoard
Sizes
Normal
Large :
Active
Medium :
Back
280 x 60px 220 x 50 px
Next
Image Styling
The Banner image in the home page will be a rectangle with sharp edges.
The event and annoucement posters will have rounded edges.
Template Website
Mobile Responsive
The NoticeBoard
Hi-Fidelity Screens Website
Mobile
The NoticeBoard
The NoticeBoard