Winter Campaign for EF College Break

Hi everyone! This week in class we talked about all the options for utilizing social media. There’s  so much to take in with all the various networks, and from what I have learned it is a simple, effective way to draw attention to your brand without much cost.

My showcase this week was to design winter-inspired social media campaign for a brand in the travel industry. I immediately chose EF College Break, a company that offers overseas trips at discounted prices for people between the ages of 18-28. As the name suggests, EF College Break is a company geared toward adventurous college students. I have been following them for a little over two years now, and although I’ve never participated in a trip personally, I think it would be a great opportunity for students to travel the world without committing to an expensive travel abroad program. They offer all different kinds of trips for a variety of lengths (7 days to 30–what an opportunity) and  excursions. They even give you a specific travel itinerary so you can be sure to see it all.

Since it was a winter-inspired campaign, I wanted to do the opposite and play up the idea of being warm over New Year’s. I came up with a variety of slogans, which I featured in all three cover photos you can see below. “Get a tan this winter break,” “Have a warmer New Year,” and “Take your break in paradise.” You guessed it, I went for a tropical, anti-winter-blues campaign. 🙂 I used the font Tornac Regular from TypeKit and added an outer glow and a drop shadow on the text for all three designs, since the the various colors in the backgrounds made it difficult to see. For the top version I created a rectangle in black, changed the layer style to Overlay, and changed the opacity to about 50% to make the type stand out more on the various sky colors.

We also learned about Layer Comps this week, which are really amazing if you’ve never experienced them. I did not know that something like this existed before, but I can already see its value. The easiest way to understand Layer Comps is to think of them as a snapshot of a current layer panel. It allows you to change different aspects of a document, like toggling on and off specific layers and changing the text, and create a new Layer Comp or “snapshotting” a way the layers panel looks. You can then change things in the image, but you’re still able to go back to that original Layer Comp if necessary. This technique made displaying my different cover photo options SO much easier than creating different documents for all the options! I can see how useful this will be for future clients.

Below you can see my Facebook cover options (all backgrounds were pulled from EFCollegebreak.com):

option1
Facebook Cover, Example #1

option2

Facebook Cover, Example #2

 

option3

Facebook Cover, Example #3

 

Next I created a Twitter cover photo option. I kept the text exactly the same, but used a larger, more high-resolution photograph I found. Even though it does not use any of the cover photos from my Facebook options, I think you can easily tell it’s from the same campaign because of the font styling and paradise feel.

 

twitteroption
Twitter Cover Option

 

Finally, I had to create an Instagram overlay for my winter campaign. Since the name of the company is EF College Break, I decided to create an overlay called “EF Winter Break,” in the same font, Tornac, and put a small airplane shape in front of it. Again, I applied the Layer Style from the other images. Here is an actual Instagram photo with the overlay used:

instagramex2
Instagram Photo with Overlay

For this campaign so far, to further integrate the theme of a “warm winter break,” I would suggest promoting tropical-themed vacations in EF College Break’s Facebook timeline posts through November, December, and January. Perhaps suggesting that it’s not too late to book a vacation, or posting fun traditions that other countries do for New Year’s in banner ads would further attract attention from potential consumers. Honestly, I think this a very easy campaign to run away with! Everyone wants to escape for those few weeks they’re not in school… I speak from experience! 😉

As far as other social channels, Snapchat/Youtube would be obvious choices. While I am a personal fan of Snapchat and the different SnapStories, I know that not everyone carries around their phones when they go to the beach or are around water, so that might not be the best platform for this reason… However, GoPros are very “in” right now, so I think those personal videos of students zip-lining or snorkeling in the excursions would be a great way to promote all the fun people are having on these vacations. Using personal videos would also inspire students to post and tag EF College Break, so I think it’s a win-win all around. I also think that Pinterest could easily showcase the beautiful locations of these trips. EF College Break could easily create all different boards for their locations and make suggestions for the destinations by using pins (like packing lists, places to eat, must-sees, etc) within each board.

Disclaimer: I am in no way affiliated with EF College Break. I have never participated in one of their programs, either, though I think it looks like a ton of fun!

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.