drew stillwell

Stillcookingwell Design Notes

check out the site here

Design Goal

A clean, minimal recipe site created with a home chef's functional needs in mind. The overarching goal of the site is to be less of a cooking blog and more like an online cookbook. The blog-type pages with paragraphs of introduction and high-res pictures are nice, but when you're trying to use them as you cook (maybe on your phone or tablet) it can be difficult to find the "meat" of the recipe amongst all the fluff.

Simple Homepage

stillcookingwell homepage

The homepage was designed as a table-of-contents in order to aid the visitor in finding a specific recipe. Recipe links are organized alphebetically after fetching from the database before being displayed on the page.

Another alternative is to arrange the links in a responsive grid, with a picture of each dish shown. This is great for browsing, but not efficient when searching for a specific recipe (outside of browser search function).

Ingredient List Sidebar

A floating "Ingredients" button on mobile. Oftentimes it is necessary to reference the ingredient list of a recipe while cooking, and having to scroll up or down the page to find it can be a hassle, especially when in the middle of sautéing vegetables and the garlic is burning.

ingredients are shown when button is pressed

This floating button is my solution to this - tap to expand the container, get what you need, and then tap again to minimize. I gave the button a position: sticky so that once the user scrolls past the title, source, and brief introduction it will stay on the screen as they follow the recipe.

On wider screens, the ingredient list automatically expands and floats on the right-hand-side of the window.

ingredient sidebar floats on right side of window