User Testing for Poster Draft #2

So, I took video of my family and my neighbor trying to follow the directions for Nutella Hot Chocolate. Here are some still shots from the videos.

What I learned:

  • Everyone understood that the ingredients were shown in the top of the poster.
  • They also understood which step to start at.
  • I need to clarify the amount of milk used in the recipe. It’s supposed to be one cup, but only one person got that. The rest guessed.
  • I need to retake my photo of the microwave showing a minute and a half on the timer or come up with some other way to show that the hot chocolate should be cooked one minute. Most people guessed one minute. As a side note, one minute seemed plenty to heat the milk, so maybe one minute would be easier to demonstrate without using numbers.
  • The two spoonfuls of Nutella was very clear.
  • The stirring of the cocoa was very clear.
  • Most people just topped their mug off with the amount of marshmallows they were comfortable with, and that was just fine.
photo-jan-16-9-39-23-pm

Ben

photo-jan-16-9-42-16-pm

Melanie

photo-jan-16-9-46-35-pm

Adam

photo-jan-16-9-47-11-pm

Cambrie

photo-jan-16-9-38-54-pm

Blake

 

How-to Poster Draft #2 WIP

Here’s the work in progress on my second draft of my poster. As you can see, I overhauled it quite a bit and retook some of the pictures. Any feedback is welcome and appreciated. how-to-posters-draft-2-wip-for-blog

Project 9: Portfolio

  1. Project Corrections / Time spent: 120 minutes total. 20 minutes refining the edge on the masked, Photoshopped image on the flyer. 15 minutes scaling the quote and fixing the border on the photo montage. 15 minutes tweaking the colors and adjusting the grayscale on my Winterwood logo design. 20 minutes adjusting and reworking the levels of blue on the photo design winter picture. 20 minutes changing the spacing for some of the text on the Mountainside Yoga Retreat event ad. 30 minutes making various brochure improvements including reworking the line spacing and alignment on the inside of the brochure, changing the rectangle pictures on the inside to bleed off the edge, and nudging the alignment of the text on the cover so it better aligns with the entire design when closed.
  2. Message: I am showcasing my work in a professional way. I designed my portfolio to reflect my own style.
  3. Audience: Potential clients and employers.
  4. Top Thing Learned: How to pull all of my projects together in a professional portfolio and then present it in Scribd and through a screencast presentation.
  5. Future application of Visual Media: I plan to continue taking art and graphic design classes while I continue growing my own company, Charming Bliss.
  6. Color scheme and color names: Monochromatic- teal and monochromatic- grey
  7. Title Font Name & Category: Lobster – Decorative
  8. Copy Font Name & Category: Century Gothic- Sans Serif
  9. Thumbnails of Images used: All images and design elements for the portfolio were created by me.

P8: Brochure Project

P8-NatalieDansie-outside

Outside of the Brochure

 

P8-NatalieDansie-inside

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

Project 6: Stationery

P6NatalieDansieP6NatalieDansie2Large image Business Cards for Blog

  • Description: This is a full-bleed, matching letterhead and business card stationery set created along with a custom logo.
  • Process (Programs, Tools, Skills): I created the logo in Adobe Illustrator. I used dotted lines to create the circles for the logo as well as the border. I chose fonts that had plenty of contrast. One is an all caps serif font and the other is a script font. The colors are pulled from a Design Seeds color scheme. Once the logo was created, I opened up a 2-page document in Adobe InDesign. There I created the text for the name and business information. I repeated the logo on the letterhead and again on the business card. I also repeated the dotted border to tie the design together. I took the medium blue color from the dots and found the lightest hue of that blue and made that the background for the business card.
  • Message: The company is a graphic design company that created cute, fun designs for birthday cards, wedding invitations, birth announcements, and photo cards.
  • Audience: The audience is anyone looking for cute, fun graphic design services.
  • Top Thing Learned: How to brand a company with a unified letterhead an business card.
  • Color scheme and color names: Analogous: pink, violet, purple, indigo, blue
  • Logo Font Names & Categories: Chaparral Pro Bold- serif font, Pea Noodles Girlfriend- script
  • Copy Font Name & Category: Chaparral Pro- serif font, Century Gothic regular- sans serif

 

 

Project 5: Logos

NatalieDansie-P5Logos-for-blog

  1. Description: This is a logo for an acoustic music band named Winterwood
  2. Process (Programs, Tools, Skills): I created the entire logo in Adobe Illustrator. I used the o’s and the d to serve double duty as both the letters in the band name as well as the tuner keys on the top of the guitar neck. I chose a mahogany, brick color for the guitar neck and then worked in a triadic color scheme to pull the whole design together.
  3. Message: Winterwood is a band associated with acoustic music and guitars.
  4. Audience: Anyone who interacts with the band or appreciates their style of music
  5. Top Thing Learned: I learned how to use the pen and shape tools to create designs in Illustrator.
  6. Color Scheme and Color Names: Triadic: Indigo, Lime and Brick
  7. Title Font Name & Category: Century Gothic Bold- sans serif

Project 4: Montage

NatalieDansie-P4Montage-Rain

  • Description: An inspirational piece of art made by blending several images and using beautiful typography.
  • Process (Programs, Tools, Skills, Steps taken while designing): I cropped the image of the stormy ocean. I used the lasso in Photoshop to pull the rainbow from another image into this one. I used a mask and a 100% opacity brush to soften the edges of the rainbow. I used a 30% opacity brush to soften the whole thing and blend it into the stormy ocean. I found an image of falling rain and layered that over the ocean image. I used a blending mode and reduced the opacity to make the raindrops really subtle. I added in the typography by grabbing the purple color from the water and finding contrasting fonts that work well to convey the quote. I positioned the white copy so it forms a very subtle rainbow shape to further emphasize the design. I added the border and erased part of the edges to allow the key words in the quote to break through.
  • Message: In life, we are given trials and challenges. It’s important for us to recognize and be thankful for the challenges (the rain) and then to appreciate the rainbows.
  • Audience: The audience is anyone who is experiencing trials. It’s meant to give a moment of reflection.
  • Top Thing Learned: I learned how to gradually blend several images.
  • Filter / Colorization used and where it was applied: I increased the brightness of the rainbow.
  • Color scheme and color names: Monochromatic purple
  • Rainbow & Rain Font Name & Category: Edwardian Script ITC Regular- script
  • Copy Font Name & Category: Century Gothic Regular- sans serif, author’s name- Century Gothic Regular italic- sans serif
  • Thumbnails of Images used: 
  • Sources (Links to images on original websites / with title of site):
  • http://www.freeimages.com/photo/rain-on-sea-ii-1368899
  • https://unsplash.com/photos/96KUGPHRbUU
  • https://stocksnap.io/photo/HURPJAWUZC

Project 3: Photodesign

P3-NatalieDansie

  1. Description: Demonstrate good photography and image editing skills. Incorporate color into a full-bleed poster layout with an original picture.
  2. Process (Programs, Tools, Skills, FOCUS principles): I took a picture with my Nikon D90 camera. I metered the sky and took the photo to capture the blue. I made focal point of the water converging along the bottom and right third of the image. I uploaded the photo into Photoshop and edited it using levels, sharpness, selective color, and vibrance. I used Photoshop to design the decorative chevron banners and the typography elements.
  3. Message: The message is to convey how cold it is outside, but also how beautiful the cold can be.
  4. Audience: The photo appeals to a wide audience, but particularly to anyone who appreciates the beauty of nature in the wintertime.
  5. Top Thing Learned: I learned how to play with levels to take an ordinary photo to a fabulous one with some editing tricks.
  6. Color scheme and color names: monochromatic blue
  7. Title Font Name & Category: Century Gothic Regular and Chopin Script Medium
  8. Copy Font Name & Category: Century Gothic Regular and Chopin Script Medium
  9. Thumbnail of original, unedited image inserted
  10. Date and location you took the photo(s): February 2, 2016 Murray Park, Murray, Utah
Winter

Original, unedited image