1. Scan for ingredients using the camera (Must)
2. Look up ingredients by searching (Must)
3. Have a valid datasource which I'm not the responsible for. (Must)
4. Support iOS 7 and above (Must)
5. Have multiple categories (profiles) to choose from. (Must)
Because the scanning functionality is the biggest and main function in this app I had this idea to give it a prominent place like in the Instagram app:
This would mean the app should have an UITabBar at the bottom with 5 UITab's. Which UITab's? Well, the following:
1. Profile
2. Search
3. Scan
4. History
5. More
As you can see I added the History functionality even though it was a Should in our requirements.
I had to if I wanted 5 UITab's and, with that, the center button the Scan tab.
Cool. Let's go designing!
As I'm actually done designing since I'm writing this after release I'll try to explain some design choices I made.
The profile screen is pretty straightforward. Which is actually the case with the whole app. I wanted to make the app as simple as possible. Solely for the reason that everyone could use the app without figuring out how to. And by everyone I mean literally everyone.
You choose a profile and on top it shows your selected profile. As you can see with the shadow underneath it, it is a button. When you press it you can customise that profile to your own needs.
Simple, clear, effective, done.
The search screen. Not much to design here really. Apart from one thing; the more info button.
Initially the idea was to have a banner on top of the screen that showed more info on the ingredient that you had to select in the list. But this couldn't be accomplished with a search function that should be already on top. Well, maybe it could, but not for the junior developer I am. Because when you type in the search field it shows a new UITableView on top of the current view, hence removing the banner we created.
So the solution was an info button on the right. When an user presses it a popup comes in screen with more info on the ingredient. It works the same for the search UITableView. Perfect.
The main function. I changed this layout more than I can remember.
The scanning consists of three steps. Take the photo, crop the photo and scan the photo. I could make a 'next' button on the top right, but in the end the way I did above seemed the most easy to comprehend as a new user to me.
Only one button is orange and active at each step with the simple internationally familiar numbers 1, 2 and 3. The title above tells in what step you are. No questions, right? Next.
The history screen. A few ways we could design this screen. Make it a list like in the search screen, a large banner as with the profile screen or photo's as in the photo's app that people are already familiar with.
A list was a no-go. As this is a history screen people should come here to look up old scannend ingredient lists. What would be the text we showed users to distinguish between other ingredientlists? The result? One ingredient of the many dozens? The date? No, no and no. You would had to intensively search before you found the ingredientlist you wanted.
The banners as in the profile screens would be to big and before you were at a few days old ingredientlist you would be scrolling until you lost your fingerprint. Nope that wouldn't do.
A screen like in the photo's app? Hmm, let's see:
- Users are already familiar with it
- You could fit 12 ingredientlists on first glance
- A thumbnail could show directly what it is
- A footer in the thumbnail could show the date for even better distinguishment.
Yep, that was the way to go.
The more screen is a simple UITableView with two items; Feedback and Disclosure.
But what about the matte greenish-orange theme? Well that's something that came later into play.
When I designed the app I did it in black and white. Colours were something I would think of later.
While programming I found this usefull library for buttons: https://github.com/herinkc/HTPressableButton
It had a library for colours in it and it looked really nice to my eyes. I tried the mint-colour for the headers and footers and was surprisingly pleased with the result, so I kept it. The orange (called bittersweet in the library) was a trial and error result. I tried different colours but that one was the most pleasing.
The font used is Helvetica Neue, simply because it gives eyegasmes when I look at it. So clear, and elegant. How could I not use it?
I also have a tutorial screen with custom backgrounds. Those backgrounds are provided by a good friend and professional photographer. However, she hasn't taken photo's she is proud of yet so they would come in an update.
Programming timeeee!
No comments:
Post a Comment