10 Things You Didn’t Know About Pizza – An Infographic

Happy Sunday, all!

This week I designed an infographic for an article called “10 Things You Didn’t Know About Pizza.” Pizza is hands-down my favorite food (Burrito, if you’re reading this, you hold a special place in my heart, too), so this was a pretty fun assignment for me!

If you’re unaware, infographics are the images you may have come across as you surf Pinterest or other “hip” websites. They display information in a quick, concise, visual manner. I love them, and have always wanted to make my own, so this was an exciting moment for me! I had a lot of fun doing “research” online to get ideas for designs. I noticed that the ones I loved most were very simple, often using just a few different colors, and didn’t have much text besides bare facts. I tried to echo that in my design.

The first thing I did was come up with a color scheme. I went on Adobe Color CC and picked a red color out of the color picker, and clicked “Monochromatic” to see similar shades of the red I picked. Side note: This was my first time utilizing Adobe Color CC, and I have to say that it was a very smooth and easy process to find different colors. If you’ve never used it before, I highly recommend taking the time to check it out. Anyway, selecting “monochromatic” ended up being a crucial step for me, because–as you’ll see at the end of my post–I ended up sticking with different shades of red for my entire infographic. I love red, and I picked it because when I think of pizza I recall that deep, red sauce color.

After selecting the color, the next thing I did was try to pick fonts. This was also an important step for me, because there is so little text on the graphic, it had to make sense with the overall theme of the project. In the end I chose fonts called Myriad Pro for 95% of the main copy and Iowan Old Style for random words I wanted to stress and the numbers. I went with Iowan Old Style specifically because I liked the serif/feet on the numbers; they felt very Roman.

From there I surfed Pinterest for free icons. I expected to find just simple kitchen/restaurant themed icons, but I found what I feel are the perfect icons: a freebie pizza icon set from Freepik.com, which I downloaded and separated using the magic wand tool. I was so excited when I found these because they were already the perfect shade of red! After finding the icons, I tried to imagine how I wanted the overall picture to look. I decided to just wing it, which in hindsight I would never do again (will I ever learn?). Creating a wireframe would have been much easier, especially because I dealt with spacing and sizes issues almost immediately. Note to safe: planning is your friend!

I was required to use the pen tool on this project, so I decided to create a small banner for Facts #7-9, “In Italy.” To make the banner, I created one long rectangle shape, and another much smaller rectangle on its right side. The two shapes were connected. Working with the smaller rectangle, I simply added a point in the middle of the shape’s outside edge using the pen tool, then clicked on the same point with the “convert point tool” to rid the point of bezier curves. Finally, I moved the point I created into the shape, creating a backwards “K” look to resemble the edges of a banner. Then, I simply copy and pasted the shape and rotated it 180 degrees to align it with the other side of the banner. And, voila: a simple banner shape.

Below is my final design! I was especially excited to find out that the nation’s oldest pizzeria is located in Trenton, NJ, since I live so close. Someday I will have to track it down!

design12

DISCLAIMER: I am in no way affiliated with the author of the 10 Things You Didn’t Know About Pizza article I reference throughout this post. This was entirely for educational purposes.

Email Design for Dunkin’ Donuts

Phew, this week sure was a doozy! In class we learned about company e-mails and how important they are for marketing. Did you know that 91% of people check their e-mail at least once per day, and that the average person receives 416 e-mails in a single month? I know that I receive at least that many from all the companies I have subscribed to. Emails are a very popular and useful way to market a brand, when done correctly. This week my class learned tips and tricks to create the most effective design for e-mails, and how the slice tool in Photoshop makes it that much easier to translate graphics to HTML and CSS.

This week, my class was given the task to create a promotional e-mail based on the company we chose last week for the banner ad assignment. I had chosen Dunkin’ Donuts and did a holiday inspired theme based on their holiday coffee flavors, so some work was already done for me! The logo and coffee bag image was easily accessible, and I had already downloaded a variation of the Dunkin font, so that made my assignment easier already.. but don’t let it fool you, this was probably one of my most time-consuming projects yet.

We had various criteria to meet, including displaying at least three photos, the company logo, a navigation bar, a footer, three social media icons, a clear promotion, a call-to-action, contact information, a way to unsubscribe, a way to share with a friend, and a way to view in a browser. Basically we needed to include all the tiny background elements you often forget are even in an e-mail!

My banner ads had an orange background, but I decided not to translate to the e-mail literally. So, I simply gave the white e-mail a thick orange border. Next, I placed the logo image and created the navigation bar. You can see from my final that I set the navigation behind the logo to make it stand out, and added various links to different pages of their website. I copied the navigation bar and pasted it as my footer at the bottom, but of course altered the content. The social media icons on the footer took a long time to perfect; I could see what I wanted in my mind’s eye but couldn’t figure out a simple way to reproduce it!

Next I placed the coffee bag images (with drop shadows) and set them all side-by-side. I decided to create a banner image by using different rectangular shapes, altering them using the direct selection tool and free transform, turning the whole into a smart object, and warping it (specifically with arc at 15%) through free transform again. This took me about 30 minutes to really perfect because it had many layers, but ultimately I think it makes my design that much more interesting. I did this banner in a magenta color drawn from the Dunkin’ Donuts logo, and set white promotional text on it. The rest of the text of that promotion was done on a magenta button, which had a bevel and emboss effect to give it more dimension. I decided on a 40% off coupon for “our loyal subscribers” because it promotes e-mail and brand loyalty, in the form of a coupon. 🙂 I basically copied this process for my second promotion, the gift card. However, instead of all the text being on the button, I set the text in Dunkin’ orange and made a smaller button with “Click here.” Who doesn’t love gift cards, right?

Even though my design isn’t totally the same as my banner ads, the ideas are still identical. For example, in both I used the magenta color to draw your eye to the most important elements: the header and the call to action.

Below you can see my final image. I emphasize final because I cannot stress how many times I uploaded my image here, noticed something I didn’t like, changed it in Photoshop, and had to re-upload it again. (Hint: the answer is an embarrassingly high number.) Anyway, from here I could easily slice pieces of the image to then translate to the e-mail. I hope you enjoy it as much as I do.

design10

DISCLAIMER: I am in no way affiliated with Dunkin’ Donuts. This was an educational exercise, and I’m simply a long-time patron.

Kirkland’s and IMC

This week in Digital Imagery in Web Design, we learned all about Integrated Marketing Communication, or IMC. I had never heard of the term before this week (I have a science background, so I’ll be honest and admit most class content is completely foreign), but I learned that in summary, it is when a company has consistent messaging and advertising along all communication channels. I learned that I’ve been unknowingly enjoying IMC for quite some time through my personal social media channels, mailings, and TV advertisements. I actually enjoy when a company hypes a new product line this way, because I see it so constantly in different media, it strikes my interest.

football-turkey
Be honest: could you resist this face?

One company that always keeps me coming back for more is perhaps my favorite home store, Kirkland’s! I recently purchased my first house this past summer, and it was where I bought knick-knacks to turn my house into a home. If you’ve never stepped foot in a Kirkland’s, don’t. I’m serious, you will never want to go anywhere else for inexpensive decor. I’m not proud to admit that Kirkland’s all but forced me buy an NFL-themed turkey this year… in July, in 95-degree weather, the week it came out..

But I digress. Kirkland’s integrates their marketing year-round; I’m at the point where I look forward to their cover photo changing so I can see the new set of products. I follow Kirkland’s on Facebook, Twitter, and Pinterest, in addition to receiving an e-mail (and coupons) almost every day. When I received this assignment to create an additional image to match with their IMC campaign, I immediately thought of Kirkland’s and dove into their different social platforms. Here’s what I found:

screenshot-kirklands
An autumn-inspired advertisement from Kirklands.com.
pumpkins-fb
Pumpkins featured in their Facebook cover photo.
screenshot-dealoftheday
“Deal of the Day” screenshot from Kirkland’s website.
screenshot-twitter
Screenshot of their fall-inspired bg photo on Twitter.

I really love their “Deal of the Day” section and wanted to focus on that in my assignment a) because it changes everyday and b) they post about it on every channel. So, I started by opening the screenshot of the DotD in PS, and copied the stamp-looking image and pasted it into my document. At first I used the lasso tool to try and erase the box in the background, but I thought it looked too harsh, so instead I used the eraser tool with the hardness set at 40% to eliminate the crisp edge. I also did not like how the top part of the circle in DotD looked as though it had been cut off, so I selected another part of the circle, copy and pasted it onto a new layer, and turned it until I was satisfied with the way it fit. Then I softly erased some of the edges again to make it less harsh and blend easier. Next, I wanted to recreate the background rectangular box. Using the eyedropper tool, I selected the color from the screenshot and created a rectangle similar to the one seen in the original. I added a stroke (within layer styles) on the box.

Progress on my design.
Progress on my design.

The original also has a light, basket weave-like pattern. To mimic this, I selected the pattern stamp tool and looked through some of the styles offered. I chose the style group called “Artists Brushes Canvas” and selected the second one from the right. After creating a new layer, I then selected the inside of the rectangle (not including the stroke), and stamped everything inside this selection. Since the pattern was in black and white, I changed the layer mode to “Soft Light” which laid the pattern nicely over the color of the rectangle beneath. I’m actually surprised by how similar it looks to the original.

I chose which graphic I wanted to make my Deal of the Day: a cute Polka Dot Boo Wooden Sign. The photo had a background, so I added a mask to the pasted image and  painted the background black (this took forever, but it was a requirement to use a mask). From there I added a layer style, a drop shadow, to make the wooden image stand out more. The deals of the day always have a cute pun, followed by the details of the product. I chose “Fall into Halloween!” and then added the details of the sign and the price. The original photo has the text the same color as the circle in Deal of the Day, so I used the eyedropper tool to pick that up. Then I pasted in the Kirkland’s logo on the bottom so consumers would know where to buy the Deal of the Day.

showcase5Above you will see my final version! I’m very pleased with the way it came out and personally feel that it looks like something Kirkland’s could easily integrate on their website.

Thanks for stopping by, and please feel free to leave a comment or suggestion!

Disclaimer: I am no way affiliated with Kirkland’s, this was an educational exercise and I’m simply a fan of their merchandise.