Add/Edit Recipe - Wireframes

I’ve now generated some initial wire frames for the site… mere minutes after my last post, amazing eh ;)

The following features have been wire framed so far:

  • Add/Edit Recipe (3 views)
  • Search page
  • Recipe book (list and details)

Alas, only the Add/Edit recipes wire frames are online. The good old pencil and pad was proved best for the others, not nearly so high tech but certainly faster!

I’ve used an online application called Gliffy to create the add / edit recipes wire frames. The application is pretty well featured for a ‘free’ online app. Actually it is only free to use after 30 days if you publish the wireframes online, so maybe not ideal for a top secret ‘best idea ever’ type of development, but for my needs its just fine!

Below are the posts of the wire frames. You can click the links in the titles if the text is too minuscule to read on the images:

Step 1 – Add Summary page

The add summary page needs to be simple and quick, I don’t want users getting bored on the first screen!

Step 2 – Add Ingredients page

This page will be tricky to keep simple, early users will have to add each of the ingredients but once they are in the database and approved then anyone can use them. I’d like some kind of self approval mechanism as I doubt anyone would want to moderate this (I know I certainly don’t!)

Step 3 – Add Method page

Will need to make sure that the Rich Text editor options are limited here to prevent users mucking up the site styling. Each of the above steps will be reused for the edit interface with the controls pre-populated with data.

Now I’m almost ready to fire up Visual Studio (finally!) however before that I will need to sort out an overall layout and styling to tie the site together. If I was American (and whooped a lot) I’d probably says that the templates could do with some jazzing up to make them more punchy. As I’m English and hardly ever whoop (intentionally) I’d say that the site could do with some prettifying. I will most likely customise an existing CSS template (open source of course) which is close to what I am looking for.

Copyright © 2016 - Hook Technologies Ltd - Powered by Octopress