Website Sketches

Jackson Jolly
3 min readSep 2, 2015

--

Making a wire-frame of my website

Stock image (not my design)

The results are in, albeit late! (sorry Marcus!)

The Main Page

The landing page is divided up the middle, with segments down the page to divide the content. The landing has a small ‘About Us’ paragraph, as well as ‘Contact Us’ details and then links to the main functions of the webpage. The boxes will have various backgrounds - not solid colours - but either textures or tinted pictures of food items.

Place Order

The place order page has an interactive menu, where each type of food is a category, and there is a large button filled with a tinted photo of that type of food, and labelled appropriately. To the right in a little box is the current order being placed, which shows a subtotal, options to add notes, and remove items.

Interactive menu

When a button is clicked, the menu drops down to display the food in that category. The down arrow that appears next to the food item is where extras can be selected and added to the item. The plus button adds it to the order. This is subject to change, as the plus could be misinterpreted to add extras. Perhaps a brief tutorial will help, or redesigning the buttons.

The confirm order page shows your order after it’s been placed. It will ask for an order number, which will be given to you at the end of placing an order. Another part to add to this page is a status bar, so customers can see if their order is ready.

One thing that is missing from this design is the grocery order system, which I’m not %100 certain about yet, as there is no list of items in stock, however a simple text field that the store employees could read and call the customer to confirm the specifics might be enough.

The back-end involved in this is fairly substantial, as processing and storing orders will require a database of some description, whether it’s simply a text file, or an SQL type affair, remains to be seen.

--

--