Project 7: Web Page

Description:
A web page designed to showcase a personally created logo.

Process:
This web page was created using only Notepad++, a simple text editor. I first inserted my image and text into the HTML document and then made sure my coding was accurate. I linked a pre-made CSS document to the HTML and then proceeded to change the coding to what I wanted. I changed the fonts to Paytone One and Slabo 13px, contrasting Google fonts that were very similar to the fonts in my logo. I added a link to Google fonts in the HTML file for each of the fonts I used, and then specified the fonts in the CSS. I also declared some backup fonts in case the viewer’s browser doesn’t support the specified fonts. I adjusted the padding around the logo so it had good white space. I also adjusted the padding between headings and paragraphs for good proximity. I used the colors from my logo as the colors for the web page. I found these colors by opening my logo in Adobe Photoshop and using the eyedropper tool. When I was done editing all the code, I used the HTML and CSS validators at the W3.org site.

Programs used: Notepad++, Adobe Photoshop

Message:
The Puget Sound Education Resource Library is for younger children and has items to supplement their education.

Audience:
Those in the Puget Sound area that are involved with homeschooling, scouting, or other community groups that focus on children. Also, anyone looking for ways to supplement their child’s education.

Top Thing Learned:
CSS is a very powerful tool for styling web pages. It is important to use the correct codes and all the codes needed in order to accomplish what you want to do. I also learned how to use Google fonts for the text on my web page.

Color scheme and color hex(s):
Tetradic
Indigo – #292765
Violet – #92278d
Gold – #f9b624
Lime – #a4c639

Title Font Families & Category:
‘Paytone One’, sans-serif – Sans Serif

Copy Font Families & Category:
‘Paytone One’, sans-serif – San Serif
‘Slabo 13px’, serif – Slab Serif

Changes made to the CSS:
I added a gradient image to use as the background and specified it should repeat. I centered the logo. I changed the font families and colors to match my logo. I also widened the body to fit the title on one line and thickened the border around the body. I centered the title and adjusted the padding to center it on the background color which was also changed to match the logo. I added headings to the unordered list and removed the bullets. I also adjusted the padding around the headings, list items, paragraphs, and logo. I changed the active and visited link color to match the logo and removed the underline.

Word Count:
311 words

Project 6: Stationery

Letterhead:

P6 Jocelyn Tucker

Business Card (8.5×11 layout):

P6 Jocelyn Tucker2

Business Card (large layout):

P6 Jocelyn Tucker Bus Card

Description:
Matching letterhead and business card designed using a personally            created logo.

Process:
I created the logo using the pen tool in Adobe Illustrator. I also used a font and then used the “create outlines” option to turn the letters into shapes. I picked two contrasting fonts and adjusted the tracking to align them with the edges of the image. When done, I used the “object, path, outline stroke” option on my image and “create outlines” on my text so that the entire logo would scale correctly. When I was done, I opened a new Adobe InDesign document with two pages and placed my logo .AI file into it.

I created letterhead on the first page in my document. I positioned the logo in the upper left corner .5 inches from the edges. I then created a text box and typed my contact information using a 9.5pt font that was used in my logo. I left aligned the information and then placed it to the right of my logo. I then used Adobe Illustrator to create a pattern piece with the pen tool to use as a watermark. I used one of the same markings from my logo and the same purple to create repetition. When it was complete, I outlined the stroke so it would scale correctly and then placed the .AI file in my letterhead file on the right side of the page with it bleeding off. I changed the opacity on the watermark to 5% to keep it from being too dark.

I used the second page of the document to create a business card. I created an outline with the rectangle tool for the front of my card. I then copied the logo and contact information, adjusted the sizes, and positioned them on the card. I centered the logo vertically on the card and then aligned the contact information with the bottom edge of the logo. I used .25 inches of space around the edges of the card. For the back of the card, I used the rectangle tool and filled the rectangle with the darker purple from the logo. I then saved a copy of my pattern piece I used for my watermark with it changed to white and placed the .AI file on the business card page. I reduced the size of the image and positioned it on the right side of the card with it bleeding off like I did on the letterhead to create unity with the stationery pieces.

Programs used: Adobe Illustrator and InDesign

Message:
Danica Foltz is marketing her sewing skills as a “Personal Sewing Buddy.” The logo depicts pattern pieces laid out on folded fabric and the watermark is a pattern piece, communicating the level of her abilities.

Audience:
Anyone looking for some help with a sewing project or improving their sewing abilities.

Top Thing Learned:
How to create a unified letterhead and business card.

Color scheme and color names:
Monochromatic
Purple

Title Font Name & Category:
Arial Black – Sans Serif

Copy Font Name & Category:
Serifa BT Roman – Slab Serif

Project 5: Logos

Jocelyn-Tucker-P5-Logos

Description:
Logo for the Puget Sound Education Resource Library.

Process:
I first created three different styles of logos, using varying font choices. I paired two different font categories in each logo for good contrast. I then got feedback on which communicated the message the best. I then took the logo with the most votes and refined it by adjusting the children. I then created a greyscale and white on color version of the logo. When each was complete, I changed all text and images to outlines so they would scale properly when the size was changed, making them quality vector images.

Program used: Adobe Illustrator

Message:
The Puget Sound Education Resource Library is for younger children. They have items to supplement your child’s education.

Audience:
Families, especially those who home school, and community groups such as scouting organizations.

Top Thing Learned:
I learned how to use the pen and pencil tools. I also learned when I am done with my image I should change all my text and drawn images to outlines. This makes it so they scale properly when the size is reduced or enlarged.

Color Scheme and Color Names:
Tetradic
Indigo
Violet
Gold
Lime

Font Name & Category:
American Typewriter Medium BT – Slab Serif
Berlin Sans FB Demi Bold – Sans Serif