Creating a Series of Banner Ads for Autism Speaks

Disclaimer: I am in no way affiliated with the Autism Speaks organization and this is for solely educational purposes.

Autism Speaks, a science and advocacy organization dedicated to furthering autism research, has always been a company that is close to my heart. My brother was diagnosed with Asperger Syndrome as a young child, and so I grew up around autism support groups and lots of individuals facing the the autism spectrum.

One of the primary ways that Autism Speaks raises money and promotes awareness is through their annual Walk Now for Autism Speaks events. Across the country, groups organize to walk for the cause, and it is all supported through volunteers, families and local businesses. I have been to numerous of these walks and I have seen the impact that they have on the community.

That being said, I was excited to focus my Design Showcase this week on a worthwhile cause. I was assigned to create a series of banner ads that a company could use to advertise their current campaign. Since many of the walks take place during the second quarter of the year, I felt that this would be a perfect opportunity to promote them.

I began by looking at the company’s current branding and color scheme, deciding that I wanted to achieve a simple style that matched the colors of the recognizable logo of the brand. Since the silhouetted puzzle piece is commonly associated with autism, I decided that I wanted to focus on that and other similar flat imagery.

ASLogo

Because the walk is a known annual event, I wanted the promotion line to convey a sense of establishment while also showing the organization’s devotion to progress. I decided on the tagline “10 years of progress and still moving forward.” I also decided to use a line of shoe prints as my main imagery to symbolize continuing forward while also literally referring back to the walk itself.

ASBanner300x250


ASBanner728x90

ASBanner320x75

ASBanner160x600

In making each ad, I had to adjust the recurring elements to display them in the most appealing format for each canvas size. For most of the designs, I made the logo the most prominent piece, though this approach worked better on the horizontal ads. I changed the size and arrangement of the text to effectively cover the blue space and draw the viewer’s eye across the banner. I also kept the shoes in a right-facing horizontal pattern, only changing this for the skyscraper to keep the flow with the other ads and draw the viewer down the banner.

The final part of my assignment was to make one of the ads into a changing GIF. I decided to animate the skyscraper into three panels: The blank with just the logo, the added text, and the final completed banner with the call to action.

ASBanner_Final_Gif

Advertisements

Moving Into Web Design: Wireframing

Disclaimer: I am in no way affiliated with the LaSpada’s brand and this is for solely educational purposes.

In starting any new design project, the first step is to really think about the goals of the finished product. The most important part of any graphic or web design is to effectively convey information. Functionality is king, and when you’re designing, it can be easy to get lost in typefaces, colors, graphics and illustrations, and lose track of where you were going in the first place.

This is particularly important when you are designing for the web. A company’s website really shows the face of a company, and it is one of the primary places that consumers can interact with a brand and make decisions about it. If a consumer visits a website and finds it difficult to navigate, unprofessional, or overall poorly designed, they will lose interest and may form negative opinions about that company, even if their products and services are good.

For these reasons, a very important and early step in the web design process is wireframing. A wireframe is a basic layout, created with boxes and placeholder text to plan a website’s features and elements. Wireframes are important because they give a true feel for what an end website will look like and allow for changes early on. They ultimately save time and money, especially if there are multiple clients and designers involved in the process.

My Design Showcase this week displays a wireframe that I created for LaSpada’s Original Hoagies, a local sub sandwich chain located in South Florida. Lines that span the entire length of the restaurant are a daily occurrence at LaSpada’s, and everything about the restaurant is top quality. Where LaSpada’s lacks, however, is in web presence. The chain lacks any form of social media and its website is outdated–it hasn’t been changed since 2008.

laspadas

Tests have been done and it is proven that when scanning a website, we tend to read in an “F” shaped pattern. We begin at the top corner, move across the page to the right, and then move downward. Effective web design places important information in places where users are likely to read and lays out the elements in a way that makes sense to the reader. Keeping this in mind, I designed my wireframe to convey important information while also creating a layout that is graphically pleasing.

Mundo_DesignShowcase8

I started with what I felt are most important elements and gave them priority placing: the logo, the navigation and the Contact Us section. I placed the logo in the top left corner because it is the first place the reader looks when they open the website. I created several layers in Photoshop so that I could leave blank space for the logo or put it in, depending on how I wanted to look at the layout. I then placed the navigation along the top so that users can easily find what they are looking for. For me personally, nothing is more frustrating than going to a website knowing exactly what I am looking for and being unable to navigate the site. This thought also links why I put the Contact Us section in a prime location. Whenever I look up restaurants online, it’s usually because I want to call them, find the hours or find the exact location. To make sure that the user only has to deal with relevant information, I designed the layout so that a user could click on a location, and a pop-up with all of the details for that restaurant would appear.

Mundo_DesignShowcase8_withPOPUP

For the rest of the elements, I arranged them in the way that I felt best made the best use of visual hierarchy. I chose my color scheme based on the LaSpada’s logo and the overall tone of the restaurant. Although LaSpada’s currently does not have social media, I also placed in icons for future developments.

Creating a Mood Board for Spotify

This week’s Design Showcase has definitely been the most fun to date. My favorite thing to do in design is arrange elements on a blank canvas (why I love typography and collaging), and creating a mood board allowed me to do exactly that. I was assigned to select a brand and create a mood board for a campaign I would like to see executed in the future. The goal of a mood board is to convey the general emotions one hopes to evoke with a campaign, setting an aesthetic, color scheme and sample type choices. Someone working in advertising or PR may use a mood board to pitch a campaign concept to their company or client.

I chose to create a mood board for online music-streaming service Spotify. Music is a huge part of who I am, and Spotify is a service I use daily. It allows users access to 30 million songs for free with ads, or offers Premium service for $9.99 a month.

Spotify

When you look at Spotify’s website and it’s imagery, the tone is youthful, energetic and slightly rebellious. There are lots of images of young adults having fun with their friends, partying and exploring the world around them. To keep with this feeling, I centered my campaign around the concept of adventure. In pitching this idea, I would say that the goal is to persuade the target audience to create playlists for their own personal adventures, and thus they should use Spotify.

I began creating my mood board by gathering images that fit with this adventurous theme. I also wanted to keep some of the images directly related to technology and music, since Spotify is an entirely virtual product. I gathered my images from Unsplash and Pexels, which provide free high-res photos for designers to use. I also went to dafont to find some appropriate new typefaces for my board.

As part of my assignment, I also incorporated three Pantone spot colors into my design. I used the CMYK equivalents of this year’s Marsala, 2006’s Sand Dollar and 2003’s Aqua Sky.

Pantone-Colors

I originally began integrating these colors into my final design by using them as color replacements and semi-opaque overlays with some of my images. In the end, I also included rectangles with the hues themselves, as I felt that it tied my whole design together.

I also applied the Helga Action that I downloaded from SpoonGraphics to the following concert scene, giving it a slightly more subdued look that I felt matched with the tone of the rest of my mood board.

unsplash_52c319226cefb_1

In the layout process, I used a variety of Photoshop tools to achieve the sense of excitement and adventure that I wanted to display in my final product. I had a lot of fun experimenting with different effects and placement of imagery, and was very happy with my final composition.

Mundo_DesignShowcase7

Bringing in Valentines Day the Right Way: With IMC

Disclaimer: I am in no way affiliated with the Francesca’s brand and this is for solely educational purposes.

With Valentine’s Day being just around the corner, many brands are taking advantage of this holiday for lovers. For retail companies, Valentine’s day is more than just a fun holiday–it’s the perfect opportunity to market their products in a seasonal way. The obvious players are brands that sell chocolates, flowers, cards and gifts, but lots of other brands enjoy the festivities as well. One such brand is Francesca’s, a clothing boutique targeted at young women.

F5

Across the company’s online outlets, such as their website, Facebook, and Instagram, you can see that the company is pushing their Valentine’s Day products. Francesca’s messaging feels young, flirty, loving and feminine, and it encourages women to feel pretty on the special holiday, no matter what their plans are.

F5

For my Design Showcase this week, I was assigned to create a 600 x 800 pixel graphic that could be used on the web to accompany an integrated marketing communications (IMC) campaign. I chose Francesca’s because I personally am a huge fan of the company, and I thought that their Valentine’s promotions were well executed.

I began by looking through all of their social media profiles to make sure I really understood the feel that the brand wanted to convey to it’s consumers. With any IMC plan, the most important aspect is that the message sent is compatible across all media channels. After I felt that I had a good understanding of the company, I started the process of designing my graphic. In order to keep consistency with the brand’s visuals, I took assets from their websites, including banners from their Facebook profile and examples of dresses from their catalog. Since many of their promotions stress finding the perfect Valentine’s Day outfit, I decided to create a design that could be used on social media channels for last minute advertising.

Mundo_DesignShowcase5

I took care to choose dresses that conveyed the “Valentine’s Day” feel and kept within the colors of the campaign. Once I knew how I wanted to organize my graphic, I put in the images on the top and bottom. I lowered the opacity and put in a color balance adjustment layer until I felt satisfied with the look of the image. For the text, I knew that I wanted to keep a romantic tone. I chose Lobster because Francesca’s is a feminine brand that often uses script fonts. To make the text really pop and give it a polished look, I applied layer styles to the text, including bevel and emboss and stroke styles. I used the same styles on the logo, with the addition of a color overlay, since the logo I worked with was originally black. I also changed the color of the text in the “Be Mine” banner by creating a mask and cutting out the letters and placing the new color beneath it. My final step was to add in the hearts to help draw the viewer’s eye down the graphic and fill in some of the white space.

My favorite part of this assignment was having a set tone to achieve and planning out how to create a graphic that would flow with the rest of the brand’s imagery. I created this with the mindset that it could be used as a post on the brand’s Facebook or Twitter to compliment their other messaging. It was also fun to get to work on a brand that I love, though it did make me want to go out and buy a Valentine’s Day dress myself!

Little Bean Coffee Company, Now Open for Business

As a typography enthusiast, I was excited to complete this week’s Design Showcase. Given some background and ornament assets, I was assigned to create a local coffee shop chalkboard advertisement. Of my work thus far, this assignment required the most planning, as I was given many options of where I could take my design. Instead of editing an image, I was to build one from scratch.

I decided that before I could start, I wanted to really know what kind of business I was designing for. I created a list of words that I associated with coffee (such as bean, mocha, cup, caramel, warm, relaxing, etc.) to create a name for my company. Eventually I chose Little Bean Coffee Company because I felt that it fit the vibe of the shop I was mentally creating. I wanted a shop that felt folky, authentic and comfortable, and I began my design from there.

After choosing a smooth board for my background, I added a Brightness/Contrast adjustment layer to darken the surface. I added the decorative border and lightly adjusted the opacity so that it didn’t feel too harsh against the black. Once I had my basic canvas ready, I began arranging the type and wingdings. I decided to focus on weekly specials because that is what personally catches my eye whenever I see these types of advertisements. Because I wanted the graphic to be versatile, I added social media icons at the bottom. My assignment was to create a graphic to be used on a website, so I wanted it to attract attention to the brand’s other social media outlets. The image could also be used as print advertising, and this would integrate the online presence with the print media.

Once I had laid out my type exactly how I wanted, I added some layer styles to the text. The layer styles helped give the finishing touch to the “chalkboard” feel of the design.

Little Bean Coffee Co.

This is the first graphic I designed and built on my own, so it was fun to see what I could do. I found that organizing my Photoshop file was extremely helpful, as I finished with many different layers of text and ornaments and keeping them all straight proved to be a challenge. Overall, I am very happy with the finished look of my final design.

A Light Amid the Flowers

As I move further into my Photoshop exploration, I am learning how to use more of the core image manipulation tools. This week, my emphasis was on the dodge, burn and clone tools, along with adjustment layers and layer masks. I had a choice of three floral images and given some creative freedom on how I wanted to edit my selection.

The original file I was given to work with

The original file I was given to work with

One of the major points stressed in class this week was the importance of editing without damaging or changing the original file. Keeping this in mind, I started by saving the .jpeg as a new .psd file and resizing it to fit my needs. I then began by using the clone tool to extend the flowers along the length of the image. I took samples from across the flowers to create variation and keep them looking realistic.

After working with the flowers, I decided that I wanted to give the image a muted, vintage feel. I applied a Color Balance adjustment layer and stressed the red and magenta tones. I then used the burn tool to darken the metal on the post and the dodge tool to lighten the actual lamp. After I was satisfied with the colors, I sharpened the llamp-post to make it stand out against the flowers. Though these tools make subtle changes, I enjoyed working with them to see how the small changes affected the overall composition.

My color image was then complete. The second portion of my Design Showcase required me to apply a black and white adjustment layer. I applied the layer at 60% opacity, continuing to mute the flowers. I finished by creating a mask over the lamp-post so that its edited color would show through the adjustment layer, leaving me with my final picture.

Mundo_DesignShowcase3_colorMundo_DesignShowcase3