Hungrily is a project I designed in a UI bootcamp. The goal of this project was to design a food/recipes app across breakpoints, to get more adept with responsive design.
This first set of screens is the recipes overview page, designed for mobile, as well as “step by step” mode.
This recipes app aims to look and feel sleek and interactive, beyond just the typical recipe page. I used my personal experience of owning/running a food blog to design these experiences, solving for pain points I have felt myself. Because I know as a food blogger that end-users hate scrolling through miles of copy before finding the recipe, I decided to make the recipes page focus strongly on the how-to content of the recipe and less so on the exposition/headnote copy. I also went with a light/airy look and feel to allow for the recipe's food photography to really shine. Last, I incorporated a "step by step mode" functionality here to make the recipe reading experience more interactive and less transactional.
The main challenge in designing this web app was figuring out how much to show above the fold versus below for the photography to shine through but the recipe itself to not be buried.
This is the style guide/mood board that informed the look & feel of this app.
This second set of screens is the recipes overview page, designed for tablet, as well as “step by step” mode.
And here's those same pages, on desktop.
Here's what the recipes archive page would look like above the fold, visible on desktop.