Our experiments with taking recipe picture resulted in really good pictures, specially the food looked great on the plate. Having said that we were still left with some pictures with bluish tint to it. So after taking all those 2400 pictures and carefully selecting the best pictures truly representing the recipes in Cook With Me, at the time of app release our experiment to remove bluish tint started.
One other issue we needed to tackle was size of the picture. All along the app development we knew that initial download of the app is taking long time (~minute and half) due to the large size (~3 MB per recipe picture) of recipe pictures embedded in the app.
My first thought was to use some tools like “Preview” on OS X or “Gimp” to select background using color and change the selected color to transparency which will remove the bluish tint. I tried several times only to distort picture rather than improving the same. What made selecting color complex was color of the plate and food. Some of our recipe pictures were with white plate and others with brown plate. Brown plates were bit easy to deal with while white plates posed more challenge. Of course colorful food on the plate made selecting solely on the color more complex. Selecting food using rectangle or oval selection did not work either due to how food was placed on the plate and angle at which picture was taken.
This is where in house talent came in handy, thanks to Georgia our designX6 team member. Georgia has vast experience in working with pictures to make them look good on websites, brochures, and ad-campaigns she designs. With Georgia’s magic touch, we got pictures justifying the amazing recipes included in Cook With Me. Georgia used PainShop to work with pictures. After Georgia done working with her magic, bluish tint was gone. We made another key decision about background color of the recipe picture, rather than transparency we opted for same color as background color of the app. Now we were free to use JPG format than PNG to help reduce file size in the process. Using Preview app, I then reduced the file size further. After all these edits we were left with ~300 KB per picture compared to ~3 MB original picture. All these edits were done ensuring we do not distort plate and most importantly food on the plate. Our editing efforts resulted in better looking app and fast download speed from ~ one and half minute to ~ 18 seconds improving overall app experience from install to everyday use.
Keeping user interface simple and clutter free means making some tough decisions. On iPhone we decided to use swipe gesture on recipe name for navigation to “Recipe Details” and “Steps” from the “Recipe Collection” screen. There is bit of discovering to know this gesture, but once known then same is so obvious. Our decision keeps UI clutter free specially on iPhone 5, 5S, and 4 where space is premium. See below Youtube video where Manas explains how the user interface works on iPhone. Enjoy!
I have been waiting for a long time to write this post about our recipe app, Cook With Me a fresh approach to the recipe app; step-by-step instructions in a clear and simple format. I am excited to share that our app is available now in app store. Cook With Me release 1.0 features 27 rice recipes with flavors from around the world. Created, tried, and tested by designX6 team member Mrunal, an experienced cook.
We are working on Cook With Me for almost two years now. We had some diversions along the way but mostly long development time was because of pursuit of creating an app which you can actually use while cooking. I and each team member of designX6 believe that we have created a really useful recipe app. We were not alone in this journey, I really appreciate help from our family and friends who signed up as beta testers and provided valuable feedback to make the app great.
As I look back and remember all twists and turns along the way, I am amazed and actually proud that we never gave up. I have several tidbits to share about our journey and today I plan to share something about taking picture of food on the plate. Mrunal tried 3 different camera’s (two DSLR’s and one high end point and shoot), more than dozen different backgrounds, ten different types of plates, and numerous light conditions before settling on the setup she used for taking almost 2400 pictures for 27 recipes, approximately 88 picture’s per recipe.
From the beginning we decided to take picture with real food and at home not in a studio setup. Taking pictures in home setup meant we need proper light condition. So one fine sunny day in April 2013, Mrunal cooked one of her rice recipe, Cucumber Yogurt Rice and we were ready to take some pictures. Turned out the glare was too much in the sun. We tried few different locations, camera angels, flash, and so on. Nothing changed the final result. We decided to try again some other day as by now rice grains were not soft and glistening as they were in the beginning.
In our next attempt we chose bright sunny day however pictures were taken inside the home. This seemed to work better except this time flaw with plate we were using became more obvious. Plate was too shiny. All designX6 team member went on to hunt for perfect plate we can find for taking pictures. Anyway, once we got the plate we were satisfied with our next challenge was nature, yes the light we need for the picture in which food looks great. Taking picture needed fresh food preparation each time and aligning time available for that with nice sunny day quickly turned out to be very difficult. What we settled on was DIY card board with simple bright lights creating sunny day inside the box. See below picture of our DIY studio as well one of Mrunal’s recipe . With this setup we stayed true to our initial goal; real food and simple home setup for taking recipe pictures. Hope you will enjoy the pictures, recipes, and simple recipe format on your iPhone and iPad device.