Creating an iOS app for Old Navy

Hello, faithful viewers. We have already reached week 13, can you believe it?

This past week in class, we learned about mobile design and the guidelines specifically associated with iOS design. We were tasked with creating an iOS app for the iPad, for any shopping app we wished. With Thanksgiving and–ahemBlack Friday approaching, it seemed natural to get in the spirit of shopping so I was happy to oblige. ūüôā I chose Old Navy, a company that I enjoy and more importantly think needs an app redesign.

ipadwithapp

So, the first thing I did was decide that I wanted to make my app vertical, because I personally dislike having¬†to turn my app sideways to use an app. I created a document at the standard 768×1024 for iPad. Next, I turned the grids on for this document. I copy and pasted a status bar that I found online, and tweaked it to look more like the iPad interface that I use, instead of just a standard iPhone. (I have the outdated second generation iPad that only has wifi capabilities, which is why I designed mine without a carrier.)

I quickly realized that Old Navy has a versatile logo. The colors are a very clean: blocked white text on a navy blue background. I liked this because it meant that I could easily translate simplicity to my app design! I love simple, effective designs. I chose to use Helvetica and Arial because both are featured on Old Navy’s website, and because they have a variety of weights.

I pulled the main promotion and the main promotion image right from Old Navy’s website, which you can see below. I also pulled four images of their different new arrivals for the second promotional section.

Screen Shot 2015-11-22 at 6.21.18 PM

Something interesting I noticed on their website is that every image with text is just that, an image. In my web design I had been told so many times to¬†not¬†do this, and to set the text in the HTML, that I thought this worth pointing out. ūüôā

Anyway, I found this free shopping-themed UI icon set on Dribbble.com. I used the magnifying glass icon for a search button, a heart icon to be used for favorites, a shopping cart icon for products added to the shopping cart, and a speech bubble icon for a contact option. I changed the color by adding a stroke and setting the stroke to my desired color and setting the stroke to “inside.”

Something you may not know is that iOS apps have strict guidelines! I found it helpful to review the guidelines for inspiration, especially for things such as spacing and alignment. I can’t tell you how many times throughout this assignment I used Layer>Alignment and Layer>Distribute to make my shapes and text even. I also turned on my grid and made multiple guidelines. It’s pretty much impossible¬†to try to line up elements by eye alone, so I was glad to have a helping hand!

Below you can view my final home page screen for my Old Navy mobile app design:

showcase13-regular.jpg

And again, below, you can see what my mobile app for Old Navy looks like when something in the side navigation is selected:

showcase13-selected

As you can see, I overlaid a dark grey color and changed the opacity so you can still see through it to the design beneath. I repeated that step with the new white display box, just in white.

Something I really wanted was to give enough space for fingers! Nothing annoys me more than when you’re trying to click one thing on an app, and keep clicking on another because they didn’t put enough space around the link. The iOS guidelines recommend an 88px square for touch points, so I tried to do that whenever possible, especially in the main navigation, the header, the footer, and the additional selections in the navigation.

I did not wireframe for this project, but again, I could see how it would be useful for a more intricate mobile app design. I just had a vision for a simple design, so I went with it and I’m pleased with the way it came out. Overall I believe I successfully utilized many of the recommended iOS guidelines, including (but of course not limited to) spacing, grids, layers, alignment, touch points/targets, and typography.

I hope you enjoy my mobile app design! ūüôā

Disclaimer: I am in no way affiliated with Old Navy, I am simply a student who used the company for educational purposes for this design showcase.

10 Things You Didn’t Know About Pizza – An Infographic

Happy Sunday, all!

This week I designed an infographic for an article called “10 Things You Didn’t Know¬†About Pizza.” Pizza is hands-down my favorite food (Burrito, if you’re reading this, you hold a special place in my heart, too), so this was a pretty fun assignment for me!

If you’re unaware, infographics are the images you may have come across as you surf Pinterest or other “hip” websites. They display information in a quick, concise, visual manner. I love them, and have always wanted to make my own, so this was an exciting moment for me! I had a lot of fun doing “research” online to get ideas for designs. I noticed that the ones I loved most were very simple, often using just a few different colors, and didn’t have much text besides bare facts. I tried to echo that in my design.

The first thing I did was come up with a color scheme. I went on Adobe Color CC and picked a red color out of the color picker, and clicked “Monochromatic” to see similar shades of the red I picked. Side note: This was my first time utilizing Adobe Color CC, and I have to say that it was a very smooth and easy process to find different colors. If you’ve never used it before, I highly recommend taking the time to check it out. Anyway, selecting “monochromatic” ended up being a crucial step for me, because–as you’ll see at the end of my post–I ended up sticking with different shades of red for my entire infographic. I love red, and I picked it because when I think of pizza I recall that deep, red sauce color.

After selecting the color, the next thing I did was try to pick fonts. This was also an important step for me, because there is so little text on the graphic, it had to make sense with the overall theme of the project. In the end I chose fonts called Myriad Pro for 95% of the main copy and Iowan Old Style for random words I wanted to stress and the numbers. I went with Iowan Old Style specifically because I liked the serif/feet on the numbers; they felt very Roman.

From there I surfed Pinterest for free icons. I expected to find just simple kitchen/restaurant themed icons, but I found what I feel are the perfect icons: a freebie pizza icon set from Freepik.com, which I downloaded and separated using the magic wand tool. I was so excited when I found these because they were already the perfect shade of red! After finding the icons, I tried to imagine how I wanted the overall picture to look. I decided to just wing it, which in hindsight I would never do again (will I ever learn?). Creating a wireframe would have been much easier, especially because I dealt with spacing and sizes issues almost immediately. Note to safe: planning is your friend!

I was required to use the pen tool on this project, so I decided to create a small banner for Facts #7-9, “In Italy.” To make the banner,¬†I created¬†one long rectangle shape, and another much smaller rectangle on its right side. The two shapes were connected.¬†Working with the smaller rectangle, I simply added a point in the middle of the shape’s outside edge using the pen tool, then clicked on the same point with the “convert point tool” to rid the point of bezier curves. Finally, I moved the point I created into the shape, creating a backwards “K” look to resemble the edges of a banner. Then, I simply copy and pasted the shape and rotated it 180 degrees to align it with the other side of the banner. And, voila: a simple banner shape.

Below is my final design! I was especially excited to find out that the nation’s oldest pizzeria is located in Trenton, NJ, since I live so close. Someday I will have to track it down!

design12

DISCLAIMER: I am in no way affiliated with the author of the 10 Things You Didn’t Know About Pizza¬†article I reference throughout this post. This was entirely for educational purposes.

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!

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.