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–ahem—Black 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.
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.
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:
And again, below, you can see what my mobile app for Old Navy looks like when something in the side navigation is 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.