Ecard for the University of Florida

Hello everyone!

For my final showcase, I was assigned to create a holiday e-card that the University of Florida could send.

I chose to do a general holiday e-mail for campus closures from December 24th-January 4th (since both Christmas and New Year’s fall on Fridays). This closure is entirely made-up, and otherwise I am not affiliated with the offices of University of Florida, so don’t take this card seriously!

My thought process was to, of course, go forth and find a cartoonish alligator. I found an image that I liked and used the magic wand tool to delete the background. I googled for free santa hat vectors and arranged it on top of the gator’s head. Finally I added a small red ellipse to the alligator’s nose so he could look like Rudolph.

After I designed the alligator, I drew a speech bubble with the pen tool and filled it with plain white. I added a bevel and emboss effect to the speech bubble (and the red nose). From here I added “HAPPY HOLIDAYS” in UF orange with, again, a simple bevel and emboss effect. I then Googled around and found this free snow layer style, which I added to the top of the type with the brush tool. I decided to go with the snow theme and found the blue background with snowflakes. Since it wasn’t very big, I added a UF blue rectangle on the bottom and used it as my “main body” box and added the text. I mimicked this step for the “header.” I then found the transparent Christmas lights online and added it as a bottom border.

For my lighting effect (a mandatory feature), I chose to copy the entire image and paste it into a new document to not disturb the entire image. I merged the layers together on this new document and added individual point lights to each Christmas light on the bottom of the card. This effect really brightened the card as a whole and tied it all together.

Here is my final e-card image:

ecard

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.