style guide web design

1. ADULT LITERACY
LEAGUE
By: Jessica Gold
EXERCISE 3:
Style Guide & Wire Frame

2. POSITION STATEMENT
VOICE & TONE
Position Statement:
The Adult Literacy League, a
nonprofit organization located in
Orlando, Florida provides
opportunities for individuals and
families in Central Florida to
develop reading and writing
skills to build a strong and
literate community. Our
knowledgeable, empathetic, and
dedicated staff is passionate
about helping students improve
their lives through literacy. We
pride ourselves on our ability to
provide a welcoming, inspiring,
and loving environment that
encourages literacy for all.
Voice & Tone:
Empathetic
Dedicated
Knowledgeable
Helpfulness
Warm
Passionate
Welcoming
Inspirational
Loving
DESCRIPTIVE ADJECTIVES WORD LIST 1
DESCRIPTIVE ADJECTIVES WORD LIST 2
TOP 250 ADVERBS WORD LIST 3
ADVERBS VOCABULARY WORD LIST 4

3. Insert the six best alternative you created for a new logo.
Logo #1
A book symbol to represent Literacy.
Pink background to align with their voice and tone, being warm,
loving, passionate. I use white to represent a new beginning and
simplicity to seem welcoming and not overwhelming. Gray is used
to create a sense of calmness and balance centered on the logo.
The font appearance is more serious. Bottom reads..Building a
strong & literate community. Founded 1968.
Open Sans Extra bold used.
Give each version a title or descriptive name.
Logo #3
“OLD STANDARD FONT” is used for this logo with pink
lettering on a white background with a pink border. A
gray playful symbol is used to emphasize the centered
words and below the symbol in gray is the words EST.
1968 similar to their previous logo. The main symbol
has 3 books lined up to reinforce literacy. The logo has
warmth, balance, and sense of seriousness.
Place your logo images here.
Adjectives, adverbs, phrases to describe it.
Any special rules about it?
Logo #4
“OLD STANDARD FONT” is used with pink, gray, black,
white, and blue colors for this logo. A gray elegant border
and white background creates simplicity and balance. The
font gives off a serious yet warm appearance while the
symbol below gives a more imaginative creative feel
aligning with similar feelings when reading and writing. 3
books appear on a shelf and loop design aligns below the
centered words with 2 blue small circles at the ends.
Logo #5
The centered lettering looks like a font from
a book, and very eye catching yet easy to
read with a clear symbol of a book. A bright
pink background with white on top creates
a passionate balanced refined look that is
more imaginative fantasy-like with the font
choice.
Logo #6
Words nonprofit organization
literacy for all written at the
bottom. Blue, pink, and white
colors used. Words and
symbol are enlarged.
Logo #2
This logo has a sophisticated bright
appearance with a royal blue background
color and magenta pink color used to shade in
the book symbol. The words are easy to read
in white cinzel font centered on the page
LOGO

4. Insert your color palette from Adobe Color CC or another palette
generating tool. There are many to be found on the web. Did you use
a particular color scheme such as complementary? Where did you
get your starting color?
COLOR
I created this color palette to align with the brand style I am aiming for staying consistent with other defined brand elements such as voice and tone, logo, and
typography. The brand colors I feel exude the Adult Literacy League are pink, white, black, gray, and blue.
The color pink representing “compassion, nurture, love, warmth, and empathy aligning with the tone and voice of Adult Literacy League, . Studies have also
found that exposure to large amounts of pink can have a calming effect” (The Color Pink, 2018). White, one of the colors on the color palette, “ is the color of
clarity, freshness and used to spark creativity” which aligns perfectly with the brand style in mind. (Admin, 2017). Blue is used to reinforce Adult Literacy
League being knowledgeable and dependable. According to Ignite brands, “Brands are not taking any risks when they call on a shade of blue for their identity.
It is seen as a sign of stability and reliability, and it’s been shown that workers are more productive in blue rooms.” (Lischer, 2017). Blue has been shown to be
the “most common favorite color among the world’s population, according to color psychology studies,” (Lischer, 2017). Black helps with the company/brands
sophistication level, and being taken seriously. “With its diametric partner in crime, white, black stands for sophistication, weight, and seriousness.” (Lischer,
2017). The color I feel that pulls everything together, and enhances all of the other colors on the color palette is gray, additionally aligning with the voice,
tone,and logo created, “working both to balance tones and establish negative space in lieu of white. The attributes of gray comprise of timelessness, neutrality,
reliability, balance, intelligence, and strength.” (Lischer, 2017). Both visuals are of the same color palette basically with the first taken from Canva and the
second with Adobe customizing the color palette to align with the brand style that I feel best represents the Adult Literacy League and their mission.
Insert 5-10 color palette here.

5. TYPOGRAPHY
NAMES OF FONTS OR FONT-FAMILIES
FONT #1 -Avenir
FONT #2 -Helvetica Neue
FONT #3 -Microsoft Sans Serif
FONT #4 -Monaco
FONT #5 -Baskerville
FONT #6 -Palatino
H1 The quick brown fox jumps over
the lazy dog.
H2 The quick brown fox jumps over the
lazy dog.
H3 The quick brown fox jumps over the lazy
dog.
H4 The quick brown fox jumps over the lazy dog.
H5 The quick brown fox jumps over the lazy dog.
H6 The quick brown fox jumps over the lazy dog.
EXAMPLES OF YOUR FONTS FOR HEADINGS
Avenir (Heavy) 24 pt
Avenir 22 pt
Microsoft Sans Serif 20 pt
Microsoft Sans Serif 18 pt
Avenir 16 pt
Microsoft Sans Serif 14 pt

6. EXAMPLES OF YOUR
FONTS
TITLE: Helvetica Neue 24 pt
CAPTION: Palatino 10 pt
BODY: Baskerville 16 pt
LABEL: Monaco Bold 14 pt
ARTICLE: Microsoft Sans Serif 14 pt
ASIDE: Avenir 14 pt
1. TITLE:The quick brown
fox jumps over the
lazy dog.
2. CAPTION: The quick brown fox jumps
over the lazy dog.
3. BODY: The quick brown fox
jumps over the lazy dog.
4. LABEL: The quick brown fox
jumps over the lazy dog.
5. ARTICLE: The quick brown fox
jumps over the lazy dog.
6. ASIDE: The quick brown fox jumps
over the lazy dog.
NAME OF FONT SAMPLE OF FONT

7. • Photographs
• Textures
• Illustrations
• Clipart
• Dingbats or Flourishes
MOOD BOARD
Mood Boarding Methods for Web Designers
Creating Inspirational Mood Boards

8. MOOD BOARD
CONTINUED

9. REFERENCES
References:
Admin. (2017, April 28). The Psychology of Colors in Marketing and Branding. Retrieved from
Color Psychology : https://www.colorpsychology.org/color-psychology-marketing/
Canva Images [Digital image]. (n.d.). Retrieved December 2, 2018, from https://
www.canva.com/design/DADKm3x9HNI/FdkBGo86iq0D6VOU73XHRA/edit?
category=tACZCstt_G4
Empathy [Digital image]. (2016, May 4). Retrieved December 2, 2018, from https://
lifegivingwaterdevo.org/tag/empathy/
Giving Relationally: Prioritizing a Culture of Empathy and Joy [Digital image]. (n.d.). Retrieved
December 2, 2018, from https://cep.org/wp-content/uploads/2017/07/Giving-Relationally-
Prioritizing-a-Culture-of-Empathy-and-Joy.jpg
Giving Tree [Digital image]. (n.d.). Retrieved December 2, 2018, from https://images-na.ssl-
images-amazon.com/images/I/41ak9Ds2dWL._SX258_BO1,204,203,200_.jpg
HOME: Adult Literacy League. (n.d.). Retrieved December 1, 2018, from https://
www.adultliteracyleague.org/
Lischer, B. (2017, February 26). The Psychology of Color in Branding. Retrieved December 1,
2018, from http://www.ignytebrands.com/the-psychology-of-color-in-branding/
The Color Pink. (n.d.). Retrieved November 26, 2018, from https://www.empower-yourself-with-
color-psychology.com/color-pink.html
Why Nonprofits Choose Intacct [World globe in several hands]. (n.d.). Retrieved December 2,
2018, from https://www.sageintacct.com/blog/why-nonprofits-choose-intacct