P8: Brochure Project


Outside of the Brochure



Inside of the Brochure

  • Description: A full bleed, offset, tri-fold brochure.
  • Process (Programs, Tools, Skills): I created the brochure design and layout in Adobe InDesign. I split the layout into three sections. The front of the brochure is an offset fold, so when it’s folded and closed, the soccer ball on the grass image continues on the page beneath it.
  • I repeated the soccer ball throughout my design. I also used several circular images to pull the repetition of the circle throughout the design.
  • For the large soccer ball in the inside of the brochure, I used the ‘quick selection tool’ in Adobe Photoshop to remove the background of the image. I used the ‘refine mask’ dialogue box to smooth, feather, and shift the edge to make a softer image that doesn’t look so stark and cutout against the brochure’s background. I then ‘placed’ the image of the soccer ball into InDesign where I used the ‘text wrap’ option to wrap the text in the center around the ‘alpha channel’ of the image.
  • I chose an analogous color scheme with green, lime, and yellow. The greens play off of the green grass in the images. I chose to use the Almaq rough font for the titles and the subtitles because the rough texture plays is reminiscent of the grass texture in the images. I used Baskerville Old Face regular font for the body copy.
  • I created the original logo for BenD United Soccer. I designed the logo in Adobe Illustrator. I used a live trace to create the black parts of the soccer ball. I put a yellow circle behind to create a yellow soccer ball. I used the pen tool to draw the shield. I chose a font that allowed me to “unite” the “D” in BenD and the “U” in United to further emphasize the name.
  • Used: Adobe InDesign | Adobe Illustrator | Adobe Photoshop
  • Message: Advertise and give information about Kickin’ It Summer Soccer Camps
  • Audience: Parents of children ages 5-15
  • Top Thing Learned: I learned how to wrap text around an image in InDesign.
  • Color scheme and color names: Analogous: green #296331, lime #78dd10, yellow #ffdd19
  • Title Font Name & Category: Almaq rough | decorative
  • Copy Font Name & Category: Baskerville Old Face | serif
  • Word Count of copy: 251
  • Thumbnails of Images used: 
  • Sources (Links to images on original websites)
  • Soccer ball on grass: http://www.nif.org/wp-content/uploads/2015/10/soccerBall_iconic.jpg
  • Soccer ball near sideline: http://rockyfordco.com/wp-content/uploads/2015/09/soccer.jpg
  • All other images are my own

P7: Web Page Project


P7NatalieDansieScreenshotfinalDescription: This is a web page designed to showcase a personally created logo.

Process (Programs, Tools, Skills): I created this web page using Notepad++. I manipulated HTML and CSS code to create this design to showcase my logo. I also used the http://www.W3.org HTML validator to check all of my HTML and my CSS to make sure everything validated.

After I wrote my content and inserted my image, I attached a pre-made CSS document to my HTML. I pulled colors from my logo to coordinate my webpage to the colors in the logo. I pulled up my logo in Photoshop and found the coordinating HEX colors using the eyedropper tool. Then I used those colors in my CSS. I also changed my fonts to Arial Black and Palatino Linotype. I declared back up front just in case the viewer’s browser didn’t have these exact fonts. I added padding around the logo to give it ample white space and breathing room and to make it the focal point of the page. I also added padding to the text to set them apart from the edge of the webpage.

Message: Winterwood is band that produces original acoustic music.

Audience: This logo and brand message is geared toward the music professionals who will be interacting with Winterwood, particularly sound engineers, producers, and recording studios. It is also geared toward the fans of Winterwood’s music.

Top Thing Learned: How to change the CSS to customize an HTML web page.

Color scheme and color hex(s): Triadic (indigo, lime and brick): Indigo #024c47, Lime #414d21, and Brick #884429. Also used a white background: White #ffffff

Title Font Families & Category: Arial Black: san serif

Copy Font Families & Category: Palatino Linotype: serif

Changes made to the CSS: I changed the font families. I changed the colors to match my logo. I changed the padding and the alignment to create more white space. I added in bold to the headers in my list. I added in some h2 and h3 headers in the HTML and styled the font and color for them in my CSS. I added a link to my blog in my HTML and centered it in my CSS.

Word Count: 231 under “Thinking that went into this logo design” on web page and 372 on this blog post