Rock Paper Scissors

Phase One: Design

25 June, 2009

The first stage, the designing stage, is always the most exciting and most critical of all. It is at this point that everything you see at the end of development is decided upon. We have to be careful here that every detail is looked upon closely and any potential issues are identified before they become problems.

A Website Design is a plan for an interface between a user and information and/or functionality. The effectiveness of a website is determined by two factors: how much information the user obtains and how much of the functionality the user utilises. For example, if a user looks up a Wikipedia page, they will have easy access to usually relevant information and will leave the site having obtained a significant amount of information. In the same way, if a user is able to leave a website with a clear idea of the services offered by Rock Paper Scissors, the website will be considered effective.

Progression

The current website for Rock Paper Scissors offers a lot of useful information regarding services, contact information and classes. It has been developed to be simple, yet elegant to ensure effectiveness as an informative site. This project on the other hand has been decided to be a complete replacement for that site. As such, with a completely fresh design comes a new look on what the website will do. The new website is taking a leap towards being functional as well as informative, which will allow Rock Paper Scissors to utilise its potential for profit.

Tania, our liaison at Rock Paper Scissors, and I brought forward a number of ideas that we believed could be implemented in the site. From this, we were able to develop the following rough templates for the site, incorporating example images for perspective.

Index Page

The home page was created to be simple, stylish and effective. Visitors are able to clearly identify available options, with the large bold text and a contrasting background. The key idea behind this page is already being used in many navigation solutions - a set of sub-options appears once one of the main options is clicked on.

Information Page

This page is an example of the 'submenu' layout. The black box layered upon the home page keeps the entire any page in perspective - the user will never get lost. This layout will be used for almost all of the pages on the site. The Information Page template will be used to present most of the information relating to Rock Paper Scissors, particularly information pertaining to services and contacting the business.

Planning Page

One unique aspect of the new site will be the ability to customise your own stationery and order your own creation online. The planning pages allow customers to do that using a limited set of simple, graphical options. The configuration they create will be displayed on the left hand side keeping them up-to-speed in real-time with their updated configurations.

Summary Page

Any finalisation of a set of items, be they a list of items in an order or all items included in the shopping cart, will be processed using this summary template. It provides detailed information on unique items chosen including quantity, price per unit and total price. Any extra information, such as chosen configuration, is also included below the item name.

What goes next?

From this stage, we are able to develop working, interchangeable and presentable templates. What this means is that by creating a set custom HTML templates from our design images, we are able to quickly and easily fill them with the necessary content and maintain a powerful consistency throughout the site.

The next update will push into Stage 2 of this project - Basic Markup, stay tuned.

Adam Dickinson
Lead Designer