It’s been a while, blog!

When I first began this blog, I was originally using it to complete the assignments for my web design class VIC5325. I would post weekly assignments that showcased what Photoshop skills I was learning and what pieces I was creating. In this class, I found that I really loved updating my portfolio by explaining my thought processes behind each piece, and I would love to continue that with other projects I have continued to take on.

Though my original intent for this blog was to be entirely web focused, I would like to expand it to include some other mediums as well. I have completed work in new areas that I am really excited to share! So, from here forth, I will be reactivating this space as more than just a web design portfolio, but also as a revamped creative outlet. I hope you enjoy, and as always, I appreciate any feedback or comments you may have!

Paid Sick Days for American Workers: An Infographic

Disclaimer: I am in no way affiliated with ThinkProgress and this is for solely educational purposes.

Brands are constantly trying to find new ways to convey information to a quick-skimming audience in an interesting manner. Along with an increase in video content (see last week’s assignment), infographics—images that take information and represent it graphically—are gaining in popularity.  Infographics are eye-grabbing, and they break down data into charts, diagrams and imagery that viewers can easily digest. For my Design Showcase this week, I was assigned to create an infographic based off of this ThinkProgress article, which describes Obama’s proposed Healthy Families Act. The act aims to enforce that full-time workers should be able to earn paid-sick days, as the U.S. is the only developed country that does not already have such a program in place.

I have never created an infographic before, so the process initially seemed a bit overwhelming. I began by going to Pinterest and looking at infographics of all kinds for inspiration on how to separate information, what kind of charts are popular, how text is chunked and so on. When I felt ready to start, I pasted my article into a word document, highlighted any information that I wanted to include and then separated the data by a hierarchy of bullet points. I took information from the original article as well as this second article, which is linked though in the first. I thought that stressing the length and intensity of the average American workweek really helped to stress why it’s important that full-time workers should have access to paid sick days.

In the end, I decided to divide the data into four main areas, excluding my header and footer. The first discusses how few Americans currently have access to paid sick days. The second emphasizes the intensity of the workweek. The third deals with maternity leave, since Obama plans to sign a memorandum that will give federal employees paid sick days for the birth of a child if the act is passed. The fourth and final section describes the effects of the act.

Mundo-Design-Showcase-14

When I was developing the actual layout, I selected a color scheme and typeface and moved forward from there. I wanted consistency with flat icons but created some variation by playing with their opacities. I used the pen tool to create the semi-circles in the first panel that represent the percentage of Americans with paid leave benefits. This was probably the most difficult part of the assignment, as the pen tool is still new to me and I really struggled with forming the shapes that I wanted. My favorite imagery is in the third panel, which depicts the minimal amount of countries that do not require paid maternity leave as a few drops of milk in the bottom of a baby’s bottle. I wanted to get the statistic across in a creative way that immediately conveys the point.

Overall, this proved to be one of the more time-consuming projects I have completed this semester. It has also been one of my favorites, because I was able to take information and completely develop exactly what I wanted to say and how I wanted to show it from the bottom up. I have been wanting to take a stab at infographics for a while, and I am happy with my results.

Video Editing in Photoshop: Ojai Olive Oil Company

Disclaimer: I am in no way affiliated with the Ojai Olive Oil company and this is for solely educational purposes.

Everyone knows that Photoshop is the premier program for editing images, but what fewer know is that you can also edit videos within the program. This is something that I had no knowledge of prior to this week, so learning about Photoshop’s video capabilities was interesting for me. I have very little video editing experience, so this week’s Design Showcase proved valuable, giving me some insight into video editing with software I’m becoming increasingly comfortable with.

I was provided with a video clip from lynda.com  about the Ojai Olive Oil company and a tutorial on how to edit the video. After being given the basic guidelines, I was assigned to rebrand the company and enhance the video as I saw fit. My only requirements were that it needed to have a title, lower-third element, and closing slide with information about the brand.

After viewing the video, I began by designing a new logo for the company. I wanted to create a brand that felt approachable and kept the family-owned feel while also modernizing it. I chose a trendy sans-serif font, Dolce Vita, for the main logo and Mistral for the “Extra Virgin Olive Oil” text. I also wanted to incorporate a graphic element, so I found a free vector image of an olive branch online. I placed a right branch in alignment with the cross of the A in Ojai and a left one along the bottom of the O. I edited them to take some of the leaves out and put in olives that I created, finishing the logo.

Mundo-Design-Showcase-13-Logo

Never having done much video editing, I found working with Photoshop to be a neat experience. I liked that I was able to use elements I am familiar with, such as the marquee tool, text tool and smart objects to impose new graphics over the original video. I decided to shorten the video, as the original was a bit long and the entire second half felt like it should be its own video on a different topic. I did, however, use a piece of this to create an end slide with different music and a semi-opaque background to entice the viewer to learn more about the company. I personally like simple transitions because I feel like they are less distracting, and so I primarily used fade outs and minimized the use of motion.

Social Media for the Summer Season

Disclaimer: I am in no way affiliated with the AAA company and this is for solely educational purposes.

The summer months are quickly approaching, and now is the time for brands to begin preparing for the excitement and warm feelings associated with summer. Since so many travel companies get the most business during this time of year, this week I was assigned to select a company within the travel industry and create new social media graphics for them to use. My family is a big fan of the American Automobile Association, so I chose them for my campaign.

AAA began as a company with “the purpose of lobbying for driver and passenger rights, fair laws and safer vehicles — all to better promote the love of the open road and the adventure of driving.” Since then, AAA has expanded to also provide roadside assistance, insurance and travel accommodations for members. I wanted to focus my campaign on the travel aspect of their company, encouraging members to use AAA’s services to plan a summer trip.

I created three Facebook cover photos that the company could alternate between throughout the summer months. On the company’s website, you can find the slogan “Expect Something More.” I wanted to incorporate this into my designs and portray a variety of environments where members could vacation to. I also wanted to evoke emotion, creating a desire for travel.

Mundo-Design-Showcase-12_0000_Adventure

Mundo-Design-Showcase-12_0001_Sunshine

Mundo-Design-Showcase-12_0002_Relaxation

Along with the cover photos, the rest of the Facebook page must also convey the same feel. The profile image should be kept as the simple logo, but posts should pertain to summer travel. The brand could highlight weekly travel spots to promote their deals, keeping with the “expect ______.” theme.

Bringing this idea over to Twitter, I also created a cover photo for the company’s profile. Though their Twitter is primarily focused around driving news and facts, the company could use this image if they decided to change their focus for the summer.

Mundo-Design-Showcase-Pt2

AAA has a presence on most forms of social media. However, the company actually does not have an official Instagram. I think that creating one would be beneficial for the company, especially if they used it to feature travel destinations. They could also use it to promote driving facts and new information.

I created a sample image, using an overlay that the company could use to brand their summer campaign.

Mundo-Design-Showcase-12Pt4

To keep all imagery consistent, I made sure to place the logo on all materials and always use the same font, Bebas Neue Regular. I also used sunny, fun and attractive imagery. The hashtag I created, #ExpectSummer, could be used on Instagram and Twitter.

As for another social media channel I would recommend, I would choose to implement a company Tumblr. The company does have a travel blog, but it is a bit outdated and disorganized. A company’s Tumblr seamlessly blends in among regular user posts, and AAA could use one to create a revamped travel blog.

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

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.