This document contains information about a brochure Natalie Brito created for a class project using Adobe InDesign. It includes the process she took to design the brochure, critiques she received, and what she learned. Specifically, it details how she sketched logos and layouts, imported text from Word, edited photos in Photoshop, designed additional elements in Illustrator, received feedback from peers and her instructor, and printed the final brochure. The top thing she learned was to lean more toward her initial instincts with designs and that simple is usually better.

1. Dessert for your eyes.
Designs
Rhiannon
Natalie
Portfolio

2. Table of Contents
Brochure
Infographic
Business Identity
Photo Montage
Magazine Cover
Photo Design
Prezi
Web Page
Coding
Natalie Brito
253.320.5211
JoseAndNatalie@gmail.com
3308 77th Ave NW,
Gig Harbor, WA
HowToGrowAFamilyTree.
wordpress.com

3. Brochure
Description
Use Adobe InDesign to create a company brochure.
Process
1. First, I sketched some logos and designed a couple of them in Adobe Illustrator.BrochureSketche0001
2. Then I sketched the brochure, and folded it so that I would have a better idea where to place things in Adobe InDesign.
3. I opened InDesign and started creating my layout. I used guides to mark where the folds would be. Then I laid out where
the other images and text would go.
4. I typed the information I wanted in Microsoft Word, then pasted it into InDesign once my design was complete.
5. I edited the pictures I wanted to use in Photoshop, using filters to make some color adjustments. I also used the
masking feature to create a cutout effect on some of the images.
6. I used Illustrator to draw a picture of a BrochureSketche0002kayak and make the map.
7. After everything was placed into InDesign I exported my documents as JPEGs
8. I worked with my local print shop to print out the images.
Critique Process
I met with Halle and Carrie for a design critique. They liked the logo with the ruler behind the fish, but after
feedback from my instructor I decided to go with the simpler one I had created.
Facebook Critiques: Kathleen Baber, Justin Scott, Stephanie Paxman
One-on-One Critique: Halle Fort, Carrie Fort
Feedback from my instructor included:
Move the sub headers further from the text
Work more on the amenities section
Put more white space in the food section
Make the Amenities section bigger
Simplify the logo typography
Put more spacing between paragraphs
Make the top of the restaurant section stand out better
Improve spacing on the activities section
Make the bike bigger
Fix the descender on “Shopping”.
Message
There are a lot of fun things to see and do in Gig Harbor.
Audience
Vacationers in Gig Harbor
Top Thing Learned
Lean more toward my instinct with the logo. Simple is good. Also, you can’t
cut waves all of the way across a page, and plan plenty of time at the printer,
don’t go in right before closing time.
Color Scheme & Color Names
Complementary // Blue, orange
Title Font Name & Category
(Logo) Verdana // Sans Serif
Copy Font Name & Category
Candara // Sans Serif
Welcome to
Gig Harbor
Food
Burgers:
Blazing Onion 4701
Pt Fosdick Dr NW,
St 200
Pizza:
Fondi 4621 Pt
Fosdick Dr Bldg 10,
UpTown
Mexican:
Blue Agave 4729
Point Fosdick Dr NW
Puerta Vallarta 4225
Harborview Dr
Dessert:
Menchi’s 4819 Pt
Fosdick Dr NW, Ste
100
YoG’s 4784 Borgen
BLVD NW, Suite E
Groceries:
Fred Meyer 5500
Olympic Dr NW
Main & Vine 5010 Pt
Fosdick Dr NW
Random
good stuff:
Panera 4751 Point
Fosdick Dr NW
Kelly’s 7806 Pioneer
Way
Kinza Teriyaki 6820
Kimball Dr Ste A1
Seafood:
Tide’s Tavern 2925
Harborview Dr
Anthony’s 8827 N
Harborview Dr
Bistro Satsuma 5315
Pt Fosdick Dr NW
Do you hear that rumbling?
That’s your stomach calling, but don’t worry, we
have solutions.
Blue Agave is our favorite indulgence. This place
serves monster burritos built your way &
smothered (or not) in sauce. The fajitas are
delicious, tacos are authentic, and the
salsa bar is varied, fresh & delicious.
We’ve never ordered anything we
didn’t like.
Blazing Onion Gourmet burgers,
fish n chips, or exotic meat
burgers. Always tender, hot, and
flavorful. Try the sweet potato fries
and always order extra BOB sauce.
Fondi is a trendy pizzeria which features unique pizzas.
Dinner & lunch choices include: loaded salads, rustic
sandwiches, pizza & more. Try our favorites: Bella
Chopped Salad & Oven-Fired Bruschetta.
Cut out
Raft Island
Bremerton
Tacoma
Rosedale
40th St
RayNash
W
ollochet
Burnham Dr
Pioneer
56th St
16
16
Kopachuck
Artondale
78thAve
Uptown
Waterfront
Borgen
Borgen:
Uptown:
Waterfront:
Target, Costco, Pier One, Famous
Footware, Yo! G’s
Boutiques, Christmas Store, Kelly’s,
Historical Museum
Movies, Blazing Onion, Marshalls,
Fondi, Menchies
2TalesFish
Welcometo FishTales
2 in Gig Harbor. We are so excited that
you came to visit on our little island!
There is so much to see and do that we
know you’ll be back soon.
Since this is your home away
from home we wanted to help
you feel comfortable so we are sharing
all of our secrets with you. There is
plenty to see and do here in town. So
snuggle up with Netflix, grab a bike and
go for a ride, try kayaking, or spend
some time in town. Whatever you do we
know you will have a great adventure.
Remember to sign the guest book, and
enjoy your stay!
Kopachuck State Park
great for an alternative beach access or
island adventure. 10712 56th St NW
Harbor History Museum
Learn about Gig Harbor’s pioneers &
life before the Narrows bridge 4121
Harborview Dr
Movie Theatre
Updated seating or upgrade to the VIP
room for full service. Choose advanced
seats. 4649 Pt Fosdick Dr NW.
Archery
They supply the materials, you learn a
skill. 9721 Burnham Dr NW
Cushman Trail
Up to 6 mile hike, if you start at 32nd
street you are starting near the beach
under the Tacoma Narrows. The trail is
paved with restrooms. There are other
stop/start points too. 14th Ave. NW just
south of 32nd St. Ct. NW to Borgen Blvd.
Borgen
Target
Costco
Pier 1
Famous Footwear
Uptown
Marshalls
The Garden Room
Teaching Toys 2
Various fashion stores
Waterfront
Beach Basket Christmas Shop
Java and Clay Cafe
Boutiques
Fishing & Sporting
Shopping
Activities
Kayaks
Fire Pit &
Beach access
Beach Bikes
Deadman’s island
Amenities
Burgers:
Blazing Onion 4701 Pt Fosdick Dr
NW, St 200
Pizza:
Fondi 4621 Pt Fosdick Dr Bldg 10,
UpTown
Mexican:
Blue Agave 4729 Point Fosdick
Dr NW
Puerta Vallarta 4225 Harborview
Dr
Dessert:
Menchi’s 4819 Pt Fosdick Dr NW,
Ste 100
YoG’s 4784 Borgen BLVD NW,
Suite E
Random good stuff:
Panera 4751 Point Fosdick Dr
NW
Kelly’s 7806 Pioneer Way
Kinza Teriyaki 6820 Kimball Dr
Ste A1
Seafood:
Tide’s Tavern 2925 Harborview
Dr
Anthony’s 8827 N Harborview
Dr
Bistro Satsuma 5315 Pt Fosdick
Dr NW Ste A
Groceries:
Fred Meyer 5500 Olympic Dr NW
Main & Vine 5010 Pt Fosdick Dr
NW
Do you hear that rumbling?Food
Welcome to
Gig Harbor 2TalesFish
Borgen:
Uptown:
Waterfront:
Target, Costco, Pier One, Famous
Footware, Yo! G’s
Boutiques, Christmas Store, Kelly’s,
Museum
Movies, Blazing Onion, Marshalls,
Fondi, Menchies
Raft Island
Bremerton
Tacoma
Rosedale
40th St
RayNash
W
ollochet
Burnham Dr
Pioneer
56th St
16
16
Kopachuck
Artondale
78thAve
Uptown
Waterfront
Borgen
Burgers:
Blazing Onion 4701 Pt Fosdick Dr
NW, St 200
Pizza:
Fondi 4621 Pt Fosdick Dr Bldg 10,
UpTown
Mexican:
Blue Agave 4729 Point Fosdick
Dr NW
Puerta Vallarta 4225 Harborview
Dr
Dessert:
Menchi’s 4819 Pt Fosdick Dr NW,
Ste 100
YoG’s 4784 Borgen BLVD NW,
Suite E
Random good stuff:
Panera 4751 Point Fosdick Dr
NW
Kelly’s 7806 Pioneer Way
Kinza Teriyaki 6820 Kimball Dr
Ste A1
Seafood:
Tide’s Tavern 2925 Harborview
Dr
Anthony’s 8827 N Harborview
Dr
Bistro Satsuma 5315 Pt Fosdick
Dr NW Ste A
Groceries:
Fred Meyer 5500 Olympic Dr NW
Main & Vine 5010 Pt Fosdick Dr
NW
Do you hear that rumbling?Food
Welcome to
Gig Harbor 2TalesFish
Borgen:
Uptown:
Waterfront:
Target, Costco, Pier One, Famous
Footware, Yo! G’s
Boutiques, Christmas Store, Kelly’s,
Museum
Movies, Blazing Onion, Marshalls,
Fondi, Menchies
Raft Island
Bremerton
Tacoma
Rosedale
40th St
RayNash
W
ollochet
Burnham Dr
Pioneer
56th St
16
16
Kopachuck
Artondale
78thAve
Uptown
Waterfront
Borgen
Brochure Front
Brochure Back

4. Infographic
Description
Make an info-graphic with visual appeal.
Process
1. I knew I wanted to do an info-graphic on Doodle Notes, so I started studying the topic and used my research
combined with experience. I re-watched the YouTube videos I’d already seen and read some other blog posts and
websites on the topic.
2. I also did a search to find out the average retention rate for different styles of learning.
3. I sketched out the ideas I wanted to get onto my Info-graphic.
4. Then I re-sketched them in a more organized way.
5. I used adobe illustrator to create my info-graphic.
6. I used the pen tool, line tool, shape tool etc to create my stick figures and trace an image of a brain.
7. Finally I added my text.
8. After completing this project I felt that it would be better as a series of three info-graphics, so I did a bit of a
redesign to accommodate.
Critique Process
I talked to my mom and my sister over the phone for a critique. They suggested that I move
the “Image Library” section to the middle. They also thought I should tweak some of
the fonts and make the graph more readable. I also had some alignment that they
helped me refine.
Facebook Critiques: Sydney Machen and Kathleen Baber
Instructor Critique: Sister Kunz said that she liked the colors and the
typography. She recommended that I simplify some of the images. She also
recommended that I further unify my piece by adding white body copy
to the bottom section. The other things she said was to: work on visual
hierarchy, make the title bigger, remove some title banners, work on
spacing and alignment.
Message
To inform readers about the benefits of doodle notes and give them
some ideas for how to get started.
Audience
People who are trying to learn more effectively.
Top Thing Learned
Lots about Adobe Illustrator, including pen tool use, grouping, a little about the
pathfinder tool and a lot about the grid lines.
Color Scheme & Color Names
Split Complementary // Red, Blue, Green
Title Font Name & Category
DJB almost perfect // Handwriting
Copy Font Name & Category
Corbel // Sans Serif
DOODLE NOTES
What to Doodle
Sources:
tenouk.com/learningretentionrate.html
https://www.youtube.com/watch?v=7fx0QcHyrFk
https://www.youtube.com/watch?v=3tJPeumHNLY
It is important to build your own image library.That way you will
be able to quickly visually communicate what you are learning.
Remember, it’s more about what you learn than about art.
Put ideas into perspective.Think of different ways you can group ideas. A list of pros and
or overlapping ideas with aVen Diagram can help you find meaning.
conspros
Frame Works
1
2
1
2
Link ideas from different areas of your notes so you can connect ideas quickly.
Connectors
Different list styles
home
family
building
city
community
store
bank
library
commerce
Your artistry level is unimportant. Use pictures o represent what you are thinking.They
only have to be relevant to you.
group
of ideas
ideas
light
thinking
Image Library
One stick man can be used many ways
Connect ideas
Not every idea can be drawn. Dffering handwriting styles changesnotes to make
sections memorable. Most people know one banner or fancy style of writing, which can
be a great title. Writing one word in a different style can help an idea stand out.You
don’t have to have beautiful handwriting to make it a memorable part of your notes.
Regular print
UPPERCASEDROPCASE
FANCYC�r����
Text Styles
0 5 10 15 20 25 30
hands on experience
see
read
hear
Average retention based on type of
experience
29%
Doodling notes
improves
retention by
DOODLE NOTES
Why you should Doodle
Benefits of Doodle Notes
Sources:
of neurons are
dedicated to sight
75%
Children are natural artists. Using Doodle Notes they can slowly transition from
more pictures to more words, while improving retention.
tenouk.com/learningretentionrate.html
https://www.youtube.com/watch?v=7fx0QcHyrFk
https://www.youtube.com/watch?v=3tJPeumHNLY
DOODLE NOTES
Who Should Doodleand what they can use
How do you know if your Doodle
Notes are effective?
Read back what you
learned!
Sources:
ToolsWhy
Personal Notes
Group notes
giant paper (bigger is better)
big markers
colaborate
perasonalize
engage
connect
create solutions
tablet
fine tip
markers
pen
pencil
notebook
anything
familiar
listen
hear
understand
retain
ToolsWhy
Children are natural artists.
Using Doodle Notes they can
slowly transition from more
pictures to more words, while
improving retention.
tenouk.com/learningretentionrate.html
https://www.youtube.com/watch?v=7fx0QcHyrFk
https://www.youtube.com/watch?v=3tJPeumHNLY

5. Business Identity
Description
Create a logo and incorporate it into letterhead and business cards. The logo will establish the identity of a business.
Process
1. I sketched out three different types of logos. The person who needed this logo already had a strong idea of the direction they
wanted to go.
2. Using Adobe Illustrator I created each of the logos. The one that I spent the most time on was the one with Mt. Rainier in
the background.ClearlyBetterNavyBlue2BusinessIdentity2
3. The idea for this design originally was to have a kind of seal with a picture of the mountain in the background. There
would be a squeegee cleaning off the mountain as if seen through a window. I spent most of my time tracing the
mountain, adjusting the opacity, and creating the seal around the mountain.
4. I thought that I would try to make the letters look embossed or stamped out but that wasn’t turning out the
way I wanted it to.
5. When I took a poll the direction was clear which logo to go with. I also used the pole to help me change the
color and design of the circle a little bit.
6. I cleaned up the circular logo a little bit then went to work creating a letterhead and business card.
7. I used contrasting colors and repeated them to promote repetition. I also stuck with two contrasting fonts.
Critique Process
I got some of the best critiques on Facebook. People were really nice but also really specific about what they liked and
didn’t like. On their recommendation I changed the background from gold to Navy blue. I also knew I needed to make
the name stand out a little better.
Facebook Critiques: Anji Nilsson, Jessica Noorlander, Pamela Montgomery, Crystal and
Brent Noorlander, Monica Brito, Heather Brown and Cindy Ashby
Kathleen Baber, Erica Cardon, Stephanie Paxman, Marina Russell.
One-on-One Critique: Carrie Fort, Jessica Noorlander
Instructor Critique: My instructor recommended that I make the business
name bigger on the logo, and simplify the illustration. I should put the
business card on gray, make the logo smaller and contrast some of the
text font more. I needed to add an address, and create a back for my
business card. For the letterhead she recommended that I create
more space on the line and darken the watermark.
Message
Josh Noorlander is the guy to go to if you want the outside of
your building to look great.
Audience
My audience is business and homeowners in Gig Harbor, Washington
who are looking for exterior building maintenance. People in Gig Harbor
are very proud of the mountain, and on a clear day locals are known to
say, “the mountain is out today.”
Top Thing Learned
People on Facebook are great resources for design.
Color Scheme & Color Names
Complimentary // Gold and dark Indigo
Title Font Name & Category
Sitka // Serif
Copy Font Name & Category
Accidental Presidency // Sans Serif
Clearly Better
W
indow Cleaning
LLC

6. Photo Montage
Description
Create a montage for a Christian company that uses at least two images and some text.
Process
1. I was looking through my Pinterest boards and noticed that I really liked this quote by President Monson and I had
pinned it a few times so I knew that was the one.
2. I used Photoshop to blend together three different images (actually four if you count the word “timber”). I
used masking, blending, brushes, and the smudge tool to make the leaves have more of that blowing look.
3. I added two rectangles then took out the inner sides so they looked like brackets around the words and
pictures.
4. I used the font tool in cut-out mode on top of a picture of birch trees to emphasize the word “timber”.
Critique Process
I talked with my mom and my husband about their perspective on this project. My mom really thought there
was nothing that needed to be changed. My husband really liked the message and the picture that I used. He did
suggest that the leaves might look like they are blowing in the wrong direction. I decided that it was a matter of
perspective so I left it. In my original I had the girl squared off in a box with the text creating two sides of a rectangle.
The Facebook critiques I got were not in favor of the change in text direction though they did like the technique on
the word “timber”. The instructor suggested that I address some dead space and work with the
readability of my text so I changed one of the fonts to a sans Serif.
Facebook Critiques: Sierra Flannary Pack, Stephanie Paxman
One-on-One Critique: Carrie Fort and Jose Brito
Instructor Critique: The instructor suggested that I release some of the
trapped space I created around the girl. She also suggested creating the
bracket look in opposing corners. Another thing she thought could be
improved was the readability.
Message
Sometimes we think our trials are going to topple us over when they
are actually making us stronger.
Audience
My audience is anyone religious who is feeling the burden of their
responsibility and wondering why they are trying so hard.
Top Thing Learned
I learned great blending and masking tools. I also think I’m just
learning bit by bit to develop a better eye for things.
Color Scheme & Color Names
Triadic // Orange, teal, red
Title Font Name & Category
Timeless // Slab Serif
Copy Font Name & Category
Candara Regular // Sans Serif

7. Magazine Cover
Description
Create a magazine cover to describe myself.
Process
1. I drew out four possible magazine layout options.
2. Using InDesign and my sketches I recreated the ideas I had come up with.
3. I didn’t have any pictures I could use of myself because I’m kind of camera shy, so I had my 12 year old son take a few
pictures of me looking at the camera after church on Sunday.
4. I tried to cut the background out of the picture, but I didn’t like how the edges were coming out so I created a magazine
cover with both a solid and a natural background.
5. Using InDesign I opened the shape map that I liked the best, which was on an 8.5 by 11 page.
6. I added my picture to the background.
7. I wrote a title, “How to Grow a Family Tree” using two different contrasting fonts.
8. I found an analogous color scheme that went with the dress I was wearing by Googling the phrase: “analogous
color schemes with green”
8. I added a green stripe down the side, and a barcode in the corner
9. I filled in the article information I had created.
10. I saved my file and exported it as a JPEG (60ppi) so I could share it on Facebook.
Critique Process
The feedback from the instructor and all of my classmates was so helpful. The instructor
suggested that I put my body space closer together and synchronize it, simplify and
streamline, use more normal leading, align the Monster article information, help
the titles stand out better, simplify the title and remove the green bar. From
watching other critiques I also decided to work on my hierarchy and add my
name to the cover. I did each of these things and considered making the title go
behind my head but after feedback from my mom decided not to. My mom
also helped me align the title better. Another piece of feedback I received
on Facebook was to shrink the barcode, I did that too because it was
taking too much focus.
Message
The message I am trying to send through this magazine cover
is who I am by describing a little bit of my life. I want people to
know about the joy of families.
Audience
My audience would be anyone interested in family life.
Top Thing I Learned
I learned some tricks to create hierarchy and focus. I also learned a lot
about alignment.
Color Scheme & Color Names
Analogous/dark green, light green and yellow.
Title Font Name & Category
Mochary // Script
Copy Font Name & Category
Corbel // San Serif
Project
Natalie’s secret:
Monster-Proof Paint
Vanquish uninvited guests.
COOKING
WITHKIDSCutthroat kitchen...
but real.
GrowMay 2016 Issue 16
YOGA
FROM
YOUTUBE
In your livingroom
and totally free!
WEEDSAND
MEMORIES
Living in an
orchard...
the ultimate
dream. P. 7
Make us Proud or Make us Laugh
Take 7 kids, shake them up and see what
happens. P.23

8. Photo Design
Description
Use design and original photography to create a project that incorporates a color scheme from the picture, and color
swatches.
Process
1. I chose a triadic color scheme with brick, indigo and lime so I decided to take pictures near the water.
2. I didn’t really feel that the image needed a lot of changes because the weather was so nice. I did minor
increases to the vibrance and sharpness.
3. Using Photoshop I made a new document that was 8.5 by 11 and added my photo.
4. I used the ellipse tool to create circles next to each other so they would kind of mimic the view through
binoculars. In order to duplicate the colors I copied the circles twice. Then I colored each set of circles according to
my color scheme.
5. I used the cut tool in ellipse shape to make a mask the same way of my photo.
6. Then I lined up the photo with the colored circles and shifted them all in layers to the left.
7. I set the background color indigo because I thought that was best with the picture.
8. I wrote the words “I want to have adventures with you” on the left hand side.
9. I created arrows in each of the design colors for my color swatch, then labeled them and
pointed them to their corresponding circles.
Critique Process
I talked with my mom and my son who has a very artistic eye. My mom
suggested that I put the arrows in a different place. She also said that she
wasn’t getting the binocular effect that I was going for. Will said that he
liked the changes I made.
Message
Enjoy time together and not just watch a screen.
Audience
Someone looking for a travel adventure
Top Thing Learned
I learned a ton about Photoshop and using masks.
Color Scheme & Color Names
Triadic// Indigo, Lime, Brick
Title Font Name & Category
Mochary // Script
Copy Font Name & Category
Sylfaen // slab serif

9. Prezi
Description
Create a Prezi that gives directions for something.
Process
1. I had to decide what type of Prezi I wanted to do, I had a couple of options, either Doodle Notes or How to Find Joy. I
felt inspired to go with how to find joy because I there is a lot of need to combat depression. Many of the visual tools for
combating depression are themselves, depressing; I wanted to create something that would encourage happiness.
2. I wanted to choose an image that evokes joy, and I also thought of the Gestalt concept of one image sending a message.
I chose an image of my daughter at the beach and used that to create a sketch.
3. I used Photoshop to create the background picture, then added some other beach objects to add interest to each
slide.
4. I added the picture as a background, then created slides around it.
5. As I was doing the slides I decided that some Icons would help tell the message better and allow me to
use fewer words.
6. Then I added the slides where I wanted them to go.
Critique Process
My instructor gave me some tough but valuable feedback, so I changed everything.
I kept the same message but made
a more pleasing final image. I laid
out all of the frames in a line so I
could size everything the same. Then I lined the frames around
the sun so they would flow well. I made the title stand out with a
thought bubble coming from the sun. Because the sun was
yellow I changed the shade of yellow I used.
Message
There are many simple things we can do to improve our
happiness.
Audience
People suffering from depression
Top Thing Learned
I should have lined up all of the slides in a grid pattern, and then
created the content in each slide so they would have unity. Finally I
should have arranged everything on the background.
Color Scheme & Color Names
Tetradic: Gold, lime, violet, indigo
Title Font Name & Category
Komika Title // Decorative
Copy Font Name & Category
Sansita // Sans Serif
• Simplify the background
• Improve readability
• Fewer icons and formed in a
line to the left
• Improve alignment
• Show a final backing out slide.
• Then my mom helped me
with implementing this plan.
• Used a sun image to simplify
and get the message across
• Unified the slides and sizes a
little better
• Improved the color
• Changed the alignment of the
http://prezi.com/sbgfsl1mu3zl/?utm_campaign=share&utm_medium=copy&rc=ex0share
Slide Examples
Prezi Screen

10. Web Page Design
Description
Use the provided grid in Photoshop to create a website that a developer could easily develop a web page from.
Process
1. Since I have been working on the Clearly Better Brand I decided to continue with that for the web page.
2. I looked at some of the web pages I had pinned on Pinterest for inspiration. I sketched out three different
images that I could use for the basis for my web page.
3. I went to Photoshop to create the wire-frame based on one of the sketches I drew.
4. I filled in the wire-frame with the images and information I had collected.
5. I repeated steps 2-4 because my design got too complicated. (I started to drown in bubbles)
6. My final design I went with a more above the fold only design and completely simplified. I used some of the
same icons, only simplified, and some of the images.
Critique Process
My instructor critique was mostly about needing to simplify. There was too much to look at on the page and not
enough hierarchy or overall gestalt. I needed to simplify the icons. I needed to simplify the images. I needed to make
my message clearer. So I decided to just revamp the whole thing since I couldn’t find my way out of that sudsy mess.
I worked with my mom on finding a more simplified web design I could emulate. We took out all of
the bubbles, and then only added back a little bit at the end. I decided that I needed to
think about the needs of the customer more and what qualities they would look for
in an exterior maintenance company. Once I did that the re-design was pretty
simple.
Facebook Critiques: Kathleen Baber, Erika Cardon,
One-on-One Critique: Carrie Fort
Instructor Critique: Simplify.
Message
Clearly Better Window Cleaning will be the best company, in Gig
Harbor, for your exterior maintenance needs.
Audience
Homeowners and business owners in the Gig Harbor, WA area.
Top Thing Learned
Simplify. Think of one short message and one image I want to focus
on.
Color Scheme & Color Names
Complementary // Blue and Gold
Title Font Name & Category
Sitka // Serif
Copy Font Name & Category
Accidental Presidency // Sans Serif

11. Coding
Description
Create my own web page using CSS and HTML
Process
1. I resized a logo that I created for my previous project.
2. Then I created an HTML file and added the content I wanted included on my page. After I added the content I created
tags.
3. Then I checked for errors in my HTML file and corrected those.
4. Next I used the provided template for the CSS code and linked it to my HTML file.
5. I adjusted the image of bubbles for the background that I previously used on the business card to work for a web
page.
6. I customized the CSS page by changing the colors, text styles, spacing, padding, background image, headers
and list items.
7. I validated the CSS code and corrected the errors then revalidated.
Critique Process
I talked with my Mom, my husband, Emily (the tutor) and Stephanie Paxman about my design. Stephanie helped
me understand the coding a little better. She taught me to put some of the code in a Word document so I wouldn’t
lose it.
Facebook Critiques: Stephanie Paxman
One-on-One Critique: Emily
The critique from my instructor was:
Lower the background opacity
Improve the white space above and below the logo
Make the logo smaller
Fix some header spacing gaps
Fix some of the typography coloring
Left align the headers
Put the headers closer to the paragraph
Message
I can design a logo.
Audience
Those interested in the logo design process.
Top Thing Learned
Everything I currently know about HTML and CSS. I also learned to save
an original of the HTML and CSS files in Word, just in case…
Color Scheme & Color Names
Complementary // Blue and Gold
Title Font Name & Category
Noto Sans // Sans Serif
Copy Font Name & Category
Merriweather // Serif