Harbor Team Clubhouse Style Guide

Overview

Site Purpose

This is a website for my sports photography designs company which sells individual and team pictures for local sports teams in the form of custom magazine covers, trading cards, and posters.

Parents, grandparents, coaches and leagues of Gig Harbor area athletes

Most of my target audience are married parents between 25 and 65 years. Probably more men than women will be interested in this, although there will still be plenty of sports minded women. Residents of Gig harbor are mostly suburban living, with an average income of 70,980. There is actually a wide range of incomes, but I'm mostly targeting the higher income households. Most of these people have a college degreee, or advanced education. All of these customers have internet and smart phones. They probably spend 7-8 hours a day on the internet.

Layout

Sitemap

Harbor Team Clubhouse Sitemap image

Wireframes

Harbor Team Clubhouse Home page Wireframe image Harbor Team Clubhouse Wireframe 2 image

Photoshop Design

Download the Harbor Team Clubhouse Photoshop design file

Branding

Website Logo

Harbor Team Clubhouse Logo image

Color Palette

Since our target audience is parents of local athletes an Americana theme seemed appropriate. I used a little bit deeper tones of red and blue. I also chose to use gold to compliment and add interest.

Patriot Red

#ab1f25
171 31 37

Deep Blue

#1a204e
26 32 78

Soft Blue

#d6eff7
214 239 247

Gold

#cda120
205 161 32

Typography

Egyptian Slate and Klint Standard. Egyptian Slate is a heavy weighted slab-serif and Klint Standard is a lighter sans-serif. They make a good contrast.

Heading Font

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

Sample Heading

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

Figure image
Custom Magazine Covers

References

Links to Web Design Examples

Links to images, textures, or other borrowed assets