July 22, 2015

Recipe Artboards

Since my last post, I've drawn up some artboards for the recipes web-app (currently called "recipes"—I need to work on a more creative name!).

Drag & Drop

Drag & Drop

The idea here is that you have a list of recipe possibilities, and a list of days—today, tomorrow, and then more days, continuing as far as you care to scroll. You can drag recipes from "possibilities" to another day. While similar to Trello in functionality, there are a few big differences:

  • you can't add or remove lists
  • dragging from the "possibilities" list will duplicate, not move, your card (dragging from another list will move the card, though)
  • I'm planning on having card categories and card tags. Categories will be a simple structure like you might find in a physical recipe box—"Breakfast", "Meat", "Pasta". That will determine card color. On the other hand, multiple tags will be allowed for each card, allowing more fine-grained searches.
  • every day, your lists will shift left—in other words, Today disappears, Tomorrow becomes Today, etc. I'll probably have some sort of view of your past cooking, though, since I expect to find that interesting/useful.

Recipe Detail

Drag & Drop

A recipe has the following components:

  • Title—this is what's printed on the front of the card
  • Description—markdown-formatted description of the recipe
  • Photos—photos of the recipe
  • Notes—not pictured, but we'll want to share recipes, and each person should be able to add personal notes to the recipe, not viewable by anyone else
  • Ingredients—newline-delimited list of ingredients
  • Directions—markdown-formatted description of what steps to follow for the recipe

When viewing a recipe in detail, a selector will appear at the top of the screen, to choose whether you're in "edit" or "cook" mode.

Edit Mode

Drag & Drop

In "edit" mode, clicking on a section (e.g. clicking one of the ingredients) will allow you to edit it.

Cook Mode

Drag & Drop

In "cook" mode, clicking on an ingredient in the directions will open up a small preview window of the ingredient list. If the ingredient is listed more than once (e.g. there is butter in a crust and in a filling), multiple windows will open up. This allows me to instantly answer the question I often have when cooking: "how much X was I supposed to add here, again?"

Tags: artboards recipe-app