My team and I have been hard at work with Allrecipe’s Dinner Spinner Grocery Scanner.  It’s now possible to scan a barcode on the side of your food items to add an item to your shopping list, keep track of what’s in the kitchen, or find related recipes. According to the comScore MobiLens report, 58 percent of smartphone owners use a phone while in brick and mortar stores to shop, and 1 in 5 use it to scan barcodes.

Like with all new features adding the grocery scanner was another labor of love. Integrating the scanner with current UI was the tricky part.  Dinner Spinner is an app that let’s you select your dish type, ingredient, and the time you want in ready in.  The solution was to add a custom ingredient button on the spinner.  This allowed a user to quickly scan or type on an ingredient and get recipes ideas quickly.

Top 5 Ways to Use the Grocery Scanner

• Quickly scan a grocery item’s barcode to search for recipes with related ingredients.
• Manage shopping lists with the touch of a finger. Out of milk? Scan the carton’s barcode before it hits the recycle bin to add milk to the list.
• Scan groceries to easily keep track of what’s in the kitchen. Home cooks can check their scan history at the grocery store so they don’t buy something they already have — creating a virtual pantry on their phone.
• Save money by scanning sale items to find related recipes. For example, if Greek Yogurt is on sale, but a home cook isn’t sure what to do with it, a quick scan reveals nearly 100 matching recipes ranging from an easy Tzatziki Sauce to a delicious Garlic Feta Dip!
• Search the fun and easy way! Home cooks can now add a custom panel to the Dinner Spinner’s slot-machine-style search feature. Quickly scan or manually add favorite ingredients such as quinoa or sour cream to find recipes with ingredients that match. Undecided? Let the spinner choose!

With the death of web 2.0 and a mobile app explosion I thought I’d give my take on where I see mobile and web design going this year.  Photoshop filters are dead and it’s all about non-destructive smart filters, vulgar gradients, and lots and lots of texture.  If you need a transparency don’t worry about plopping a 500k png right in the middle of your webpage, everybody who has money now-a-days pay for a broadband connection anyhow, that’s unless you are on a (gasp) 3G mobile plan.  Huge files for web design are becoming less and less of a no-no but as long as their is an plan to handle mobile traffic.

I’ve seen huge growth in the adoption of adaptive layouts where a website, a tablet, and a mobile site will change the look.  Adaptive layouts are still in their infancy but I see a huge potential in this.  Although it’s not a industry standard in mobile application design, the amount of time I’ve spent resizing graphics and optimizing layouts for Android apps this would be a huge time saver.

It’s funny I also see alot of new trends replicating real knobs or typewriter letterpress-esque effects that are a nod to the old way of doing things.  I guess that old is the new new.  Back in the early 2000′s it was all the rage to create visual representation of what you are selling (like a hardware website would actually look like the store).  Those design metaphors eventually gave way to showing clear information and splitting up your information in sections that are easy to find.

OMG Ribbons!

If 2012 had a single design meme I'd say it would be Ribbons. Designers can't pack enough of eye catching, drop shadowed ribbons into their designs.  I myself am guilty of using of couple of these from time to time.  Ribbons are a great way to lead the eye to most important thing on a page but I'm starting to see an overuse of them. 

One of the problems with ribbons are it can set the tone for the whole design and they generally don't mix well unless you do a retro styled design.  Mixing ribbons with a modern design can be a challenge.  It also has a tendency to over power the whole page.  If you'd like to hit the user over the head with a sledgehammer go ahead and use ribbons with wild abandon.  At least cats love them!

A Stitch in Time

You know what goes with ribbons?  Stitching.  Putting stitching and textures into your mocks can add depth and interest and a subtle hint of 3D.  With a little bit of push away from all elements having to be hard coded into CSS, I'm actually enjoying this trend.   Although again it's best for if you are selling your hand crafted items on Etsy.

I think this trend is again going against the previous web 2.0 smooth silky very unnatural styled glossy buttons that dominated the web not long ago.  Texture and stitches that mimic the real world begging to be swiped, petted, and scrolled.  Recreating your grandma's old blanket on your iPad is again following old is the new, new.  This trend can sometimes grow to overtake an entire interface, bloating it with redundant visual references to physical objects and materials.

I want to say Apple is the main reason this trend has been red hot.  The iPad has been Apple's break away hit for them.  For the calendar app for example they used a leather bound background, and visual metaphor of an old day planner that would sit on your desk.  The metaphor works great for simple apps but quickly breaks down if you need something as complex as Excel or Photoshop.  But since the grand majority of mobile apps have been for simple uses I don't see this trend slowing down anytime soon.

Oversized Footers

Footers used to be an afterthought or just a place to link to the website's email and privacy policy.  Footers are less obtrusive than sidebars, but elegant enough to hold the sites most important information. Look for footers that feature contain random information, such as feed updates from various social media, daily polls, and Flickr feeds.  I can see the future of footers holding more important personal information. Personally I'm in love with this trend, not only does it solve the problem of users focusing on the content of the page, I'm seeing alot of designers having the content of the page be above ground and then putting the footer showing what's below ground.

Image Sliders are so hot right now

You know what's better than a single huge image to grab a user's attention?  How about 5 large images that slide from left to right? 

Sliders are no doubt a quick way to convey a company's mission statement, a product they want to feature, or have more than one message they would like to say quickly.  Image sliders have come a long way since my old flash days.  Now there are numerous frameworks where you can plug in the code, replace the images, and set up a slider in less than ten minutes.  When I have a client that has a complex story to tell I usually recommend a series of slides that go over their concept in easy to digest sentences accompanied by large pictures. 

Recently at my job at Allrecipes we hit an important milestone of surpassing over ten million downloads for all our mobile apps.  To help bring attention to this great achievement I created my first infographic to highlight some fun facts about our apps.  Some of these figures were easy to get others took some digging.  During it’s creation I tried to stay away from a tone that would sound like we were boasting about our numbers and instead focused on interesting tidbits of information that an average user didn’t know.

Check it out:

In every designer’s life some projects get dreamed up and never see the light of day.  During the start of my current gig we were tasked to take Reader’s Digest Brands and develop apps for brands such as Taste of Home, The Family Handyman, and a bird watching photography brand called Birds and Bloom.  Initially I was stumped on how to create an app that would catalog certain types of birds and planting tips especially since our team wanted to create the app but not spend a ton of time updating it and changing out the content regularly.

Through a little research I found out a fact that stood out to me.  Birds and Bloom facebook page had so many users submitting photos that it actually exceeded the limit of photos it can have on it’s facebook wall.  This gave me thought that sharing bird photos was the sought out feature for the app.  Much like a instagram for birds watchers, my idea for Birdspotting was created.

The idea behind the app is simple: photo-sharing but only for bird pictures.  The first tab would be just for the most recent photos in the stream where users could comment, or all the picture to their favorites.  The second tab is where the most favorite photos would appear in a grid view.  Other sections would be submit picture, a sorted category view, and a user profile page. I never fleshed out the other sections of the app and my team decided to focus on more of it’s home brands but rather than this little app sit in my design graveyard I thought I’d share.

.

Ok, so don’t get me wrong.  There are plenty of gorgeous looking websites out there now.  I’ve been involved in web designer for over 11 years now.  Granted when I started there were many ugly websites.  There were more sparkly and under construction animated gif’s than you could shake a stick at.  But since there were no standards, I saw many websites that would break the mold.  Exploratory navs, new ways to navigate between pages, and dare I mention it: Flash websites.

Before Steve Jobs personally killed off flash, flash websites back in the day were leading the charge for a UI experience.  Before CSS had taken control you could make a flash website with custom fonts, animation, and sound.  And best of all a designer could do a complete website.  Granted there were also alot of crap flash sites but there were also good ones too.  Take for example MeCompany.com.

MeCompany had a UI of dots in a pattern that you would hover over to reveal different wallpapers.  No instructions, no header, no footer, no sidebar with random ads.  No this isn’t appropriate for a medical site or a bank.  But what I’m saying is websites now all follow a predictable path.  It’s a top header with the nav, a slideshow below that, main content with blog articles, sidebar and footer with contact info and a sitemap.  It’s great that most websites follow this pattern especially if a user want to find something quickly, but it’s boring.   Where’s the innovation in having everything look the same. 

Granted I’m more a mobile designer than a web designer and I cannot say the same stagnation has taken ahold of the mobile design community.  Let’s face it Mobile design is still in it’s infancy.  But it also has many exciting UI’s being created for it.  I love standards I think it’s great but my whole point is don’t get so caught up in UI standards that you are afraid to try try something different.

Back in 2007 I was a full time Senior Designer for Nordstrom.  Although I don’t call myself a fashionista I did apparently beat out a couple of women for the position to design BPNordstrom.com. BPNordstrom.com used to be Nordstrom.com’s sister site focused on the teenage girl market.  The idea was to get young girls used the quality of Nordstrom’s brand at a early age and then have the customer for life.

As the Senior Flash Designer this was back in the day when flash was all the rage and using the browsers back button wasn’t necessarily a web standard.  BPNordstrom.com focused on clothes that were new and in season, what to wear, how to wear, in-store events, quizzes, horoscopes, downloads, and a online closet where you can build virtual outfits.  I worked at the job for over two years and it felt more like working for a magazine rather than a website because the content completely changed out every single month.

I was especially proud of the Try it On section.  A user could start with a blank avatar of one of our models and then could try out different tops with different pants or skirts and different shoes.  It was wildly successful and one of the most popular pages on the site. It took quite a bit of production time to cut up transparencies of each outfit and have it fit exactly against the model.  And then have to repeat the process each month with a whole new set of items.

Eventually I moved on to another position at a Wizards of the Coast but that’s a tale for another day.

You can check out the complete BPNordstrom site here.

My latest app is an application I never thought would be making.  Baconnection™ is iPhone and Android mobile app that has a collection of hundreds of recipes all with BACON!

In addition to collecting hundreds of mouth watering Bacon recipes, we also packed in Bacon Bits trivia game that tests your true knowledge of bacon, and the game Baconnection™ is a fun new riff on a familiar game, challenging you to make “Baconnections™” between the unlikeliest ingredients and bacon.  Basically the game is like six degree of Kevin Bacon minus the Kevin.

The app itself is a labor of love and with the help of my team at AllRecipes.com we went through many iterations to bring to you a truly on of a kind experience.  Play the game using a database of hundreds of recipes with bacon assembled from some of the top cooking sites on the internet: Allrecipes.com, Taste of Home, and Every Day with Rachael Ray.

Basically you begin with a starting ingredient then link it to a recipe, and then back to an ingredient, until you get a recipe with Bacon in it.  Not unlike connecting a movie with actors, and then actors with another movie.  Learn more at the Baconnection FAQ.

I also designed the micro-site which explains the app has more complete screenshots.   Baconnection is available to download for iPhone and Android platforms.

-Joe Donato

In the past 11 years as a designer I’ve gone from a graphic designer, to flash designer focused on animation, to a web designer focused on html and wordpress, to a mobile designer focused on Android and iOS applications. It may sound erratic but my career path has always been purposeful and focusing toward what is the best way to digitally convey information. There has certainly been a lot of changes in the digital landscape this past decade. I’ve done my best to keep up and not get pulled under.

In art college I initially wanted to a be a painter, but after careful research pulling off a successful art career is akin to the chances of being a successful music artist (slim to none). In my first computer class (back in 1997) I learned Adobe Illustrator on a now very outdated Mac Performa with a floppy disc drive. Rather than going to take a lunch break I got so enthralled with the graphic design I’d skip lunch and taught myself Photoshop during the class break. I still remember the thrill of putting a Gaussian blur filter on a image coming back two hours later and it still not being done.

Now-a-days I’m working a number of mobile applications and custom wordpress sites. In alot of ways working on mobile sites right now reminds me of the the golden days when websites where in their infancy; no standards, no wysiwyg editors, and slew of design challenges to content with.  Although this second time around I managed to get a few tricks up my sleeve.

I’m going to do my best to update this blog with my newest work, personal updates, and things I find interesting.  Check back to see everything that is going on in the land of Joe.

-Joe Donato