I got a burst of energy to fire up Adobe XD and get this out. I don’t know where it came from, but I’m not going to question it. The last project I completed in the #dailyui #notsodailyui series was in June and my goal is to push as many of these out as I can by the end of the year. I’m going to aim to complete at least one #notsodailyui once a week.

We’ll see how well that goes since we’re heading into the holiday season and working in retail is always chaos.

I immediately pictured a simple dropdown menu that you would see when your cursor hovers over a website link. I didn’t think too much about what the website would be when I made the wireframe below.

That changed once I started looking at pictures related to Italian restaurants on Pexels and ended up getting hungry just from looking at the pictures of pasta.

And Nonna’s Kitchen was born. It’s not an original concept. There’s probably a cute Mom and Pop restaurant somewhere based on this with REAL dishes that someone’s Nonna used to make or currently makes.

Sometimes the hardest thing is deciding which image to use or colour palette to go with. I played around with black and red based on the images I decided to use.

Hint: When in doubt (or when I don’t have much time), I use colours already found in an image I’m using (if I go this route) or ones that complement it well. I’ve written about it before, but Adobe Color CC is one of the many tools available to use if you need to put together a colour palette.

At this point, I removed the tag line and promo copy from this first version since I decided to make a second version.

I wanted the navigation menu to stand out more with this second version, so I made the decision to make the navigation menu’s background white with red text. I thought it provided a nice balance to some of the colours in the hero image.

I wanted to show a promotional offer that a user could easily close out when the website was first launched. First it only contained the BOGO offer, but I added the button to book a reservation as a way to encourage users to jump on the offer. In retrospect, I could have just added an additional line saying that it was valid for both walk-ins and reservations, but hey, maybe I’m just thinking too far ahead.

Now it’s time for the dropdown menu…

(Alt caption: Lisa Bonet rubbing her hands together and smiling.)

VOILA!

I couldn’t put my finger on it at the time, but I knew that something was missing from the dropdown menu. I wanted something to not only reinforce the whole cooking/restaurant concept, but also function as a way to separate the menu categories. After a deep dive into all of the icons I have stashed away, I found this spoon in an icon food package that I probably haven’t used since I first downloaded it.

Cute, right?

I loved how it looked as a whole and figured that I was finished at this point. See the final website images below.

Web 1280 – #027 - Option 1– Dropdown@2x.jpg

Web 1280 – #027 - Option 2– Dropdown@2x.jpg

…Until I got the great idea to design two screens for the corresponding iOS app that Nonna’s Kitchen would have. I didn’t like how the picture I used in the second desktop website version looked with the iPhone XS, so I found another picture to make people drool and consider paying an Uber Eats delivery fee.

An interactive prototype is on Figma, and it can be viewed here if you want to personally see how the dropdown menu works on the iPhone XS.