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.

Bow-Wow’s Beans

This week I was tasked with creating a chalkboard-styled web image for a new coffee company: Bow-Wow’s Beans. This pooch-themed cafe wanted their chalkboard styled with everything dog-related: paw prints, bones, the works! So, let’s get right into the nitty-gritty of what I did.

manalio_designshowcase4
Final product of my image for Bow-Wow’s Beans.

After finding a suitable background chalkboard image, I set out to find a  font that was naturally somewhat transparent and evoked the image of hand-writing. I downloaded four fonts from Typekit: Almaq Rough, HWT Catchwords, Lust Script Regular, and Sail Type. I also downloaded two fonts called Puppybellies and Austie Bost Kitten Klub from 1001fonts.com.

From here I began to actually designed the chalkboard. We were given many ornaments to use for our chalkboard image. I pasted the border ornament and stretched it past the image so that only the dotted dashes appeared on the board. I knew that I wanted the arced ribbon ornament, so I pasted that in as well and moved it to the top. I typed “Welcome to…” and arced the text using the warp text tool and fit it within the arced ribbon.

From there I added the different coffee specials, syrups, and other texts. I had a lot of fun changing the fonts and adding the different chalk text styles and changing colors. I added a final ornament on the bottom to draw attention to the new “Pumpkin Spice” flavor. I purposely kept a bit of white space between my “headers” to draw the eye down to the specific points in my chalkboard.

Puppybellies had a few of glyphs in their text that I utilized throughout my design. For example, the + sign was a solid dog bone, the { symbol was an outline of a dogbone, and the * was a paw print. I had a lot of fun figuring out how I wanted to place them all along the chalkboard and am pleased with the way it came out.

Note: Please be aware that this was an assignment for class and not an actual project I was paid or tasked to do. This was entirely for educational purposes. Thank you!