McAllister and Associates Style Guide

Overview

Site Purpose

My website is a tax accounting and bookkeeping services site. My site will display information about the accountant, services offered, a monthly newslettter with helpful tax and bookkeeping tips, and contact/quote request information.

Target Audience

My target audiences are both individuals and small businesses. The individuals that use my site are both men and women over the age of thirty. These people live in the United States and bring in at least sixty thousand per year. They are business professionals or retirees with or without families that need help with a complicated return. Additionally, the users are well-educated and like to spend at least 5 hours on the web each week using their cell phones or lap tops.

The small businesses that seek to use my site consist of fifty or fewer people. The small business owner or office manager will be my primary site visitors as they are responsible for the bookkeeping and tax needs of the small business. They have control of all income/expense aspects of the small business.

Layout

Sitemap

McAllister and Associates Sitemap image

Wireframes

McAllister and Associates Wireframe 1 image McAllister and Associates Wireframe 2 image

Photoshop Design

Download the McAllister and Associates Photoshop design file

Branding

Website Logo

McAllister and Associates Logo image

Color Palette

I chose to use a cool color palette for my website that has a lot of blue and grey tones. The colors blue and grey typically evoke feelings of calm and trust which is very important when dealing with matters of financial importance.

cloud

#F2F2F2
RGB:242,242,242

ocean

#095ACC
RGB:9,90,204

azul

#8BBBD9
RGB:139,187,217

thunderstorm

#404040
RGB:64,64,64

Typography

I chose to use Cinzel as my heading font because it has a nice modern-looking serif with a variety of weights that will call attention to my headings and give the site a professional look. Roboto is my choice for the body copy because it also has a variety of weights and contrasts well with the Cinzel that I chose for the headings.

Cinzel-Heading Font

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

Sample Heading

Roboto-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
Business Professionals

References

Links to Web Design Examples

Links to images, textures, or other borrowed assets