Bambi Gibson Style Guide

Overview

Site Purpose

My website is a resource for public elementary school teachers. This will be a place for the teachers to find information that I have recently taught them or information that will be useful for them. For example, they are required to record observations with a SWIVL Camera and send the video to the principal. I will post instructions on how to use the SWIVL camera so they can have quick access to that information. To start, I also plan to post introductory links to information about 21st Century Learning Design and innovation skills.

Target Audience

My website target audience is elementary classroom teachers, approximately 85% female and 15% male visitors. The users all live in the local Utah area in urban settings. Most users income is between $35K and $60K annually. The majority of visitors have a bachelors degree and many will have masters degrees.

Layout

Sitemap

Bambi Gibson Sitemap image

Wireframes

Bambi Gibson Wireframe 1 image Bambi Gibson Wireframe 2 image

Photoshop Design

BambiGibson.com Photoshop Design File

Branding

Website Logo

Bambi Gibson Logo image

Color Palette

I chose a monochromatic color scheme - variations of blue that we might see in a tropical picture of the ocean. I chose blue because the color blue suggests trust and authority. My target audience is teachers and I felt this color scheme would be calming for them when they visit my website. Blue is associated with water and sky in nature. I don't have a lot of men in my audience but blue is generally preferred by men and I wanted men to feel welcome on my site.

Calypso

#36768e
RGB: 53, 116, 140

Shadow Green

#9bb9bf
RGB: 155, 185, 91

Breaker Bay

#5b98a6
RGB: 91, 152, 166

Teal Blue

#024059
RGB: 2, 64, 89

Jungle Mist

#c0d1d9
RGB: 2, 64, 89

Aqua Haze

#f1f5f7
RGB: 241, 245, 247

Catskill White

#fdfefe
RGB: 253, 254, 254

Mystic

#e5ecef
RGB: 229, 236, 239

Typography

I chose one typeface with different weights and styles for harmony. The Source Sans Pro font is a simple sans-serif font that is a pleasing type face for online reading. It includes 12 styles that will allow for contrast.

Source Sans Pro Heading Font

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()_+

Sample Heading

Source Sans Pro Body Copy Font

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()_+

Lorem ipsum nonsed eicillabore essum fugit lantisit, si nis eictia num fugiam et quatquis resto eossitem quunt quae sit dolupis maio omnimo il id maio bea ipid que conseque volorem. Et facidebit vel ma doluptasitis num, ullandebit hicto beaquos tiumquis postrum cori odit eosam quiatur? Volo quid minvel earuptatem quiatur?

Mod qui quunturiam idenderro ma et ex ex ex exerum faci repel molut evelign amenduciis moloreperum qui nullupt ustrumet, sequi a pre non net is dia comnimusant isque voleseque eatur simpori beruptae quam fugit eostios quasi nulpa quatur molorero quam eventio ma venis quideri atiaturione volupiscia sime denestis et hil magnatem aliquundella cusanihit fuga. Pienia dolo tem voluptassi volor as voluptae nulla sed maximincium sapelen tiatqui busapernatus aspis as aborioreic tet recta volessu ndelit hil is explame niminve ratur? Mus andebis si adipsamus ad moluptiae cum este verupid es sequam veri tem sequi re volum doluptatque veriorepudis et, tetum as porem et que sim natiis doluptatures et, sam rehent alicipis suntio conestio ipsandam que prem idi quiasped mod maximod iatium ex et quassimin nonempo reperisci te nonsedit ut auta volorisque paribus.

Navigation

Main Navigation

Secondary Navigation

HTML Elements

Headings

h1

h2

h3

h4

h5
h6

Lists

Unordered List

Ordered List

  1. Item 1
  2. Item 2
  3. Item 3

Links

Link style 1
Link style 2

Paragraphs

Lia sitio blabore ruptatium, to dolorum erum siniscia cor serum sinum solupti aecepe dolupta quiaturion exerum quasi ut et eatemolorem fugit, adistis ab in et dolectem venda custisint occabor esequas core mod est, anditium everes as idundae rferferferi qui re dit eaquo veliquia qui totatiam denis iniscii squatur?

Ant aliquias alis es ma proribus. Solest, officiendic tem eatibeatium re voluptas es diae eate a eostrume nis il erum facit et ex est, ipsae cum simodi tet quos ma volupta aut latur, et quamus nobis netur seritius excero voloratuscia essequaspis sequo cus, everum nissit et fugiaeperor acepedit quatiam et eum volo dicaeribus dest lab illiqua temporrum, que quam que perovidus, voluptatur, officto doluptata nempore icipsapid eatas es eum quiaspis earum que offic tem fugita voluptatinis quis as audigen derferf erition sectasitia solupta nam net quatur andis del ium re enihit aut apelist et es milit quaes ulles expliquunt volorum eictium quia iur, nis dit asped estiatem.

Figure & Figcaption

Students in classroom
Photo by Nicole Honeywill on Unsplash

References

Links to Web Design Examples

Links to images, textures, or other borrowed assets