Visual Campaign for Orlando Harpist Christine MacPhail

Table of Contents

A. Company Analysis
B. Banner Ad Designs
C. Social Media
D. Email Design
E. Wireframe
F. Web Page
G. Misc Graphics
H. Summary

A. Company Analysis

Christine MacPhail is a well-established, professional harpist in the Orlando, Florida area. As a small business, she mainly provides harp music for corporate and other specialty events and weddings, ranging from ceremonial music to reception. Besides viewing her current website and Facebook page, I found Christine MacPhail very easily on theknot.com, with an impressive 5-star rating out of a whopping 83 votes. It’s clear from the voters that she is very talented and has a tremendous relationship with her clients. I feel very fortunate to have the opportunity to redesign the campaign.

For the past four months, the importance of an Integrated Marketing Communication (IMC) has been absolutely drilled into me. In summary, having a brand with an IMC means that your messages along all communication channels will be consistent and clear. Doing this will help your brand appear unified, and will help potential clients remember your brand. I have learned that it is especially important to achieve ubiquity in a campaign because it takes “7 different touches” for someone to notice or respond to a brand; being consistent in the ways that a client may come in contact with your campaign (through different sources of media) will create that recognition and trust you need to drive traffic. To learn more about the importance of IMC campaigns, feel free to click here.

Christine’s main clientele are 20-something women planning their weddings. Even though I have never been married and have no personal experience in wedding-planning, these women were my main inspiration for the way I designed her campaign. Because Christine’s business resides in Central Florida, a hotspot for destination weddings and just a beautiful, scenic area in general, I definitely wanted to take advantage of color to attract soon-to-be brides. Elegance, beauty, and romantic: three words every woman wants to exude on her wedding day; three words that could easily apply to the sound of a harp. It was my mission to create imagery that gave off that vibe.

B. Banner Ad Designs

I designed four banner ads for this campaign. I chose to do the same large image throughout of a bouquet with a bridge in groom blurred in the background. I think this imagery would easily catch the eye of a young woman surfing around for wedding inspiration and ideas. I chose the same slogan, “You found your prince, now find your song,” throughout every ad. I purposely used this slogan to market the company for what it is. More than a wedding advertisement, it has to advertise music. You also get a preview of my logo design as well. You can view them below.

Leaderboard
Leaderboard design.
enhancedleaderboard
Enhanced leaderboard design.
Cube
Cube design.
Button
Button design.
bannergif
Animated leaderboard.

Finally, I also designed an animated version of one of the banner ads. I chose to use the leaderboard, because I thought it most visually interesting.

C. Social Media

Social media is such an integral part of a campaign. You can never underestimate the value of reaching out to potential clients through all different channels and giving your clientele the option of how to connect with you. Below you will see that I developed three Facebook cover options, one Facebook timeline image, one Twitter cover option, and one overlay for Instagram. You can view them below.

fboption1
Facebook Cover Option #1
fboption2
Facebook Cover Option #2
fboption3
Facebook Cover Option #3
timeline
Timeline cover photo.
twitteroption
Twitter cover photo.
instagramexample
An example of how the instagram overlay would look on an actual image.

 

As you can see, I decided to continue with the blurred, mostly green, outdoor theme. Because the business is centralized in beautiful sunny Florida, I thought what better way to showcase what a typical wedding could actually look like. I also mimicked the same overlay banner in white with a lowered opacity, with the same font as in the banner ads, Raleway, in a variety of weights. You can clearly see the similarities between the social media and designs and the banner ads, this goes back to the “integrated” part of the campaign. 🙂

D. Email Design

Next, I created a “Dedicated Email” style e-mail. This means that the email was styled toward someone with a specific purpose: to get them to respond to a call to action. As you can see from this email design, I continued to use wedding-inspired imagery. However, I also wanted to integrate the colors of your new logo design into the email. You can see that I included a promotion to contact you for an event the new person may be interested in. I also added a small tidbit on the bottom for people who may be interested, but have no experience in classical instruments. The result is below.

email.jpg
Potential email design for a new subscriber.

E. Wireframe

From the e-mail design, I dove into the wireframe. This is simply a mock-up of how I envisioned your website to look. It gives you a basic foundation of the concept.

wireframe.jpg
Wireframe for the homepage of the website.

F. Web Page

Following the wireframe, I constructed the actual home page. As you can see more easily, I decided to have a rolling image gallery of photos of you in action, Christine. Your current website has many images of you, and I think it helps to connect potential clientele to a real person instead of a business title. For that reason, I decided to showcase you playing the harp at various venues.

As for everything else, I thought a simplistic, clean design in the logo colors would work best. Of course, I also wanted a music player on the homepage to give clients a taste of your work. (Side note: I love Jason Mraz, so I had to put him first!)

webpage
Web page design.

G. Logo Design

Finally, we get to my favorite part: your new logo! I designed this image as a vector, which means it can be transformed to any size without pixelation. I know that you requested a “flowy harp” image, and so I designed a harp in one of Pantone’s new Color of the Years, Serenity, a tranquil blue-purple. I thought it was such a beautiful color and would work perfectly in the music and wedding industry. As I mentioned in my company overview, when I think of a harp, I think of elegance, beauty, and romance. I chose Serenity because it embraces all of that and more.

The secondary color I chose is a beautiful orange-yellow. On the color wheel, orange mirrors blue and purple mirrors yellow, so to offset Serenity I chose this color. Because it is an inviting, warm color, they pair nicely together. They are both vibrant and eye-catching, and I know that any bride-to-be will be drawn to them.

I decided to make your name in a script font called Daydreamer. I was drawn to it for many reasons, but I think it works well again because it looks like an actual signature. I wanted your webpage to feel like an extension of you and your work, and to feel cozy and intimate to invite young women to contact you for your services. “Orlando Harpist” is in the same font used throughout the entire campaign: Raleway, in a variety of weights.

An optional slogan can also be included: “Fairytale music for your happily ever after!”

logo1
Original logo without slogan.
logooriginal
Original logo, with slogan.
logoreverse
Inverse logo option.
logograyscale
Greyscale logo option.

 

H. Summary

For additional ideas to promote your integrated marketing campaign, I would highly suggest continuing to utilize your social media on a weekly basis (at the bare minimum). Utilize your channels like Instagram and Youtube with new music.

Many believe that print is a dying media, but I advise you to consider mail and flyers. People like to see things in person, and there are many ways to capture a person’s attention. You could attend bridal shows with goodies, like magnets, pens, or stickers.

This about wraps it up on my end. I hope you enjoyed this potential new design for your business. I sincerely appreciate the opportunity to create this campaign for you.

 

Wireframing for Vagabond Kitchen & Tap House

Hello everyone! This week I chose to redesign a local eatery’s website, Vagabond Kitchen & Tap House in Atlantic City, NJ.

Image found on company’s Twitter page.

I have been eating at Vagabond (or as almost everyone calls it: “Vagabond’s”) since the location was rebuilt after Hurricane Sandy hit the shore back in 2012. Besides their extensive craft beer list (although a huge selling point), Vagabond’s retake on classic bar food is what makes me come back for more. They have something for everyone: classic food like a burger or nachos, but also foods with a little sophistication, such as seared ahi tuna. I’m not exaggerating when I say I’ve had at least ten different meals there and they’re all delicious and inexpensive. My personal favorite, the Turkey Apple Brie sandwich served on walnut-raisin bread and pepper jam. Mmm.

They present most of their meals on a butcher block, and their menus are not the classic laminated 8.5×11 paper, they again smaller, more sophisticated menus in a cork binding (see first picture, above). They pay attention to detail, which sets them apart from you’re typical restaurant or bar. If you go on a Friday or Saturday night, there’s usually a band playing and the atmosphere is just very relaxed and fun.

When this guy rolls up, you know you’re eating good.

Overall, it’s one of my favorite places to eat and hang out with friends in the summer, especially when I don’t feel like paying big bucks in the casinos of Atlantic City. 🙂 And get this, this past Monday (10/12/2015) Diners, Drive-Ins, and Dives announced that Guy Fieri was coming to Atlantic City to do a show that included  Vagabond’s, airing February 2016!

Now that you are more familiar with Vagabond’s Kitchen & Tap House, I can tell you more about my assignment. You might be wondering, “How do you even begin designing a website?” Never fear, I was wondering the same thing until this past week. I learned that most designers use a process called wireframing, which acts as a blueprint for websites. The wireframe lacks all the bells and whistles of fonts, images, and color; it focuses instead on functionality and user experience. Wireframing also helps you build a hierarchy of information so that what is most important to a user is easy to find. Let’s face it, a website can look like a work of art, but if you can’t navigate the site quickly and find what you’re looking for in seconds, it’s pretty much worthless.

Like any other project, I started cruising around the Internet to give myself inspiration. What I found interesting, if a little strange, is that most restaurants follow the same exact style of website. I looked up major chains such as Panera Bread, Red Robin, Chili’s, Starbucks, and Carrabba’s–every single one looked like they had the same designer who simply swapped colors/logos/images around.

Getting back on topic, I needed to have various criteria included on the homepage of the website. This included:

  • Logo
  • Navigation bar
  • Social media icons
  • Rotating slideshow images
  • Upcoming Events/Specials
  • Three feature areas (pictures or copy)
  • Contact Us area
  • Another feature of my choice
  • Color swatches

Our image had a required size of 1280 x 972 pixels, or about 18 x 13.5 inches. The first thing I did was set up guidelines two inches in on both sides and create a big container rectangle on my image. Vagabond’s current website does a similar practice, and they have a background image outside that container box. I also set up guidelines at 9 inches (width) and ~6.75 inches (height), the halfway points of my document.

Something that I learned in lecture was that researchers find that most users
a) scan the page quickly for information they want, and
b) look at websites in an “F”-shaped pattern.

So, it makes the most sense for your most important information in the uppermost left corner of the website.  I began to add my navigation and logo image on the top left corner, because it would be instantly recognizable when logging onto the web page, and then proceeded to the “rotating images” box. From there I added the various other criteria. I wish I could describe exactly what I did in a more interesting way, but I simply created many rectangles and free transformed them until I had some semblance of a layout I was pleased with. Oh, and I added about twenty guidelines to help me align the boxes/text/images/random-things-you-have-probably-never-even-thought-about! Phew!! After the boxes were all aligned, I brainstormed on the specific information I wanted to include in the layout, and ordered the headlines from most to least important. This last step helped me decide what should be on the left side, because as I mentioned, it should house the most important information. I decided to add the “rotating images” right below the logo because Vagabond’s should be advertising their food first and foremost. Next I added an events section, a beers on tap section (they are a tap house, after all), and a section about delivery all the way to the right. I found the social media icons for free at iconfinder.com, which I highly recommend and will bookmark for future use. layersscreenshot I put a small “social media feed” containing their activity on different social platforms directly below the icons because they flow well together.

Something of invaluable importance was my use of the layers panel and folders. For a project like this where it felt like I had insurmountable layers, being organized and keeping everything flowing helped keep my sanity. To the right you can see what my layers panel looked like after some time. If it seems overwhelming here, you should have seen it before I began to organize it! 🙂

vagabond-inside
Image courtesy of Google.

Finally, all that was left was possible color swatches. Vagabond’s logo is white text on a black background, so the possibilities are endless. Recalling the blocks of wood they serve their food on, I thought that wood colors could work, as well as the green of the paint inside the tap house itself. I went with hexcodes #330000 (not quite black), #ffffff (white), #7d3300 (brown), and #b9bf8e (green). My idea was that the nav bar and footer would be the brown wood color, with the container box containing the green. I would have the individual content boxes containing white with the off-black text. I would also consider changing the opacity on the white container boxes just slightly, but that’s something I would need to see first-hand.

Below is a final image of my wireframe for Vagabond Kitchen & Tap House.

wireframe

I would like to think it’s an improvement of their current website. 🙂 Thanks for stopping by!

NOTE: This is strictly for educational purposes, I am in no way affiliated with Vagabond. Just a local patron who has been enjoying their food/beer for years.

Green Initiative Logo Design: Water Warriors

Above: Hershey Kiss logo.

Happy Sunday, everyone! In this week’s classes we discussed logos. I’m currently enrolled in another class that is very design and logo-heavy, so it was nice to refresh the basics in this class. We reviewed many company logos and learned why some are better than others, and that many companies utilize their negative space to hide imagery.  You probably have heard about the forward arrow hidden in the FedEx logo, but did you know that Hershey’s Kisses’ has a hidden “kiss” between the K and the I? Neither did I, until this class! (Can we say mind-blowing?) Logos are a lot more than just a symbol; through research, time, and effort, what appears to be as simple image actually takes on the responsibility of defining the entire company. It’s a big job, and it’s harder than you realize to try and convey a message in one image.

For this design showcase, we were given two company scenarios to choose between and needed to design a logo for our chosen company. I picked the one described as “dealing with green initiatives in Los Angeles; non-profit; target audience: acquiring local business partners and overall awareness of green initiatives.”

There were 50 designs for us to manipulate to our heart’s desire. At first I was checking them out, trying to narrow the image down right away, but I quickly realized that I felt a little out-of-touch with my company. I was born and raised in New Jersey, so you can probably understand why. 😉 I took to Google and searched for Los Angeles, Los Angeles stereotypes, and things to do in Los Angeles to give myself a better idea of the overall mood in L.A. After reading a few articles (some written in jest, others not so much) I began to jot down some common themes people have with Los Angeles, like a sense of community, New-Age hippies, a love for sun and sea, sustainability, being healthy, etc. I realize that these are stereotypes, but you have to admit that it sounds like the perfect place for a start-up green company.

A short GIF of California’s drought progression in 2014. Source: MotherJones.com

As I sat there, reading and brainstorming, it hit me: what’s something that we are constantly hearing on the news about California? That’s right: they are currently experiencing their worst drought in over a century. Bingo, I thought, perhaps if the drought was a state-wide problem, it would be an easy way to attract local attention of my company!

plainlogo
The logo I chose from about 50.

So, I went back to the list of 50 logos and scrutinized them. I finally settled on a logo that, to me, looked like a sun’s rays, changing color. I brought it over to my new document, which I had created quite large for flexibility, and saved it at 300 ppi since it will most definitely be printed. I really enjoyed this picture, because it reminded me of sunbeams fanning out on water. Since I had decided that water would be a major theme in my company, I wanted to incorporate water into my logo. To accomplish this I created a new, blue circle using the ellipse tool, nestled it into the negative circular space already in this image, and added about eight anchor points to the bottom of the ellipse. I then pulled all of them a little less than halfway up the circle to create a new shape, and pulled three anchor points using the direct selection tool even higher than halfway to mimic waves. I then played with the anchor points and their bezier curves until I had a shape whose negative space somewhat resembled waves of the ocean. I really loved the original image’s colors and felt that the blues and greens were a good marriage of earth and water, and didn’t feel the need to change it. I made my wave shape a brighter shade of blue, just to make it a little more distinguished and to separate it from the overall shape.

I settled on the name of “Water Warriors” with a tagline of “Dawn On A Greener L.A.” I chose a sans-serif font called Kannada MN Regular with no weight. I wanted to stick with a sans-serif font because to me they appear simple and raw–just like Earth. Since the name of the company was “Water Warriors,” I wanted each letter to stand strong, capable of standing on its own without leaning too closely to neighboring letters. After opening the characters panel, I set the name in small caps, and set the tracking to 25pts. I made the tagline’s colors a slightly lighter shade of grey so that the name stood out more clearly, and set the tracking a tad larger at 75.

Overall, I’m pleased with the final design of this logo for Water Warriors. Keeping the seven principles of logo design in mind, I wanted to make sure the logo was versatile yet simple enough to be used in a variety of mediums. Should Water Warriors take off and become a force for good in Los Angeles, I wanted their logo to be flexible enough to be used a variety of media for volunteers and promotions: pens, pins, T-shirts, embroidered on hats, stamped on mugs, and so on. I definitely believe this design could be easily manipulated for future rebranding, if necessary, as the type can easily be changed and altered as necessary.

logo-final
Final image of my logo for the fictitious Water Warriors.

Below you’ll see a few options I created for Water Warriors, their design in Grayscale and inverted in black and white.

logo-grayscale
Grayscale version of the logo.
logo-reverse
Inverted version of the logo.

Thanks for stopping by! See you next weekend.