Validated Website

Our website validated, we had difficulty with javascript but overcame it.

Entity Relationship Diagram

Here is the Entity Relationship Diagram for Yumi's gallery...

WC3 validation standards

6 errors to go....

Website hotspots

Why have we chosen our final design layout? How does it work?

• We wanted to created a dynamic page that catches peoples attention on their first impression so we have done a page that you don't have to scroll down (to save their time).
• We have designed it to have all of the major elements on the areas that people generally look at on a page to give them quick, informative information.
  

As we have developed the game we have taken it in stages to develop the games sophistication. We began by labelling and using as3 for 2 of the ice cream scoops to get it working which has turned out fine but once we started using an array to make all of the movie clips be scooped and move with the key board.

Game Screenshot

This is a screenshot of hte game that we have been working on. The idea is that the user selectsfrom the ice cream down the left hand side of the page and it appears in the ice crream scoop. The user then moves the ice cream to above the sundae bowl to drop it in. Once the ice cream has been made it can be printed off in a voucher to take into the shop and get made.

When the mouse hovers over the different Ice cream colours text will apear telling the user what flavour they are selecting.

Basic Website Structure

So far I have managed to create a basic structure for Yumis ice cream parlour. I am still having problems with using fixed boxes with older browsers (the annoying IE6!!!!) but i am trying to find a solution, but i am having no luck. Below is a screenshot of what the structure looks like in Dreamweaver.

Sizing up the website

Before I put the design into Dreamweaver I have drawn up a basic frame with Box (Div) sizes.

Accessibilities issues

Due to the colourful nature of our website design. I have been looking at accessibility issues that reoccur within website design. This site would be a good chance for us to test our boundaries of using javascript to help the client as he is trying to attract as many people as possible. As it is a family orientated place he would also send out a good, welcoming message tot he public with he welcomes all 'walks of life'.

http://www.cardiff.ac.uk/accessibility/keyaccessibilityissues/visionimpairments/index.html

Vision impairment seems to affect more people that any thing else. So I am planning to use a text enlarger, text colour change and a background colour change so that the audience can choose what settings help them the most.

Voucher Research

This is some research I have done for the voucher attched to the website. The voucher that our Client wants is 15% off Ice cream at the Yumi shop. The voucher will need to include the Yumi Logo, I wil experiment with the Nottingham Illustrations that we are putting on the website to keep the theme that Yumi is the only ice cream parlour in Nottingham.

Yumi Gallery

Below is a list of possible options for the Yumis gallery.

Lightbox
http://www.huddletogether.com/projects/lightbox2/

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.

FancyBox
http://fancybox.net/



FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats over the top of web page. It was built using the jQuery library. Licensed under both MIT and GPL licenses.

Shadowbox
http://www.shadowbox-js.com/index.html


Shadowbox is a web-based media viewer application that supports all of the web's most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page.

Zoomy
http://cssrevolt.com/upload/files/zoomy

Zoomy is a Prototype class that allows you to easily create image gallery: the script make simple magnification of images with customizable options, as popup and overlaying boxes. Also you can drag the boxes and position them anywhere on the screen.

Final Design, Finally!!!

Here is our final mock up design

Client website inspiration

The below sites are a few of the clients favourite websites that could be related to his business.

This site could be a good one to look at as it is about people enjoying the product, which the client wants. It has bright colours that accentuate the site and draw your attention to certain areas in a subtle way. The use of people means that the audience has some one to relate to.

Bright colours and character attracts the audience.

New Action plan

Today we all met up as a group to discuss some trouble we are having with our client. We are finding that we are running out of time because we have had to spend a lot of time coming up with mock-ups of which the client hasn't been entirely happy with. He has had very specific ideas that are not achievable, such as 3D rotating ice-cream, a two player ice cream flash game with different levels and more. He has also changed his theme with each set of mock-ups, he's gone from 50's American diner to the concept that YUMi is the only ice cream parlour in Nottingham and is about the people (eat ice cream for daily happiness).

Problem's with the Mock-ups (from his point of view):

• The concept isn't literal enough. He wants people sharing and enjoying ice cream together
• He wants iconic buildings of Nottingham to be made out of ice cream to show that YUMI is the only ice cream parlour in Nottingham.

Want we need to do:

• Go back to the requirement stage and ask ourselves what is this site for?
• Build the site based on one of our designs and test the functionality

The above diagram is based on the development cycle we need to go around a few times to see if our site is user friendly and not to heavily based on how pretty it look, which is the way the the client is seeing it from. We are doing one last mock-up and and making him choose for the project and the building on it after the deadline so his needs don't get in the way of the time scale.

Also we have assigned ourselves different roles so that we can develop our personal professional practice

ERD Diagram- Nick

Gallery-Nick

Build in Dreamweaver- Nick

Project management/client liaison- Gayr

Javascript to change background design- Gayr

FB link/ widget- Emma/Gayr

Voucher design- Emma

Flash game-Will

Photo up loader (PHP)- Will

Rough Game Design 1

Above is the initial rough design for the game on the Yumi Website, the idea is to create your own sundea by selecting 3 flavour ice cream scoops and three toppings of choice. Your selection will then be printed off and act as a voucher if taken into store, where your personalised ice cream will get you 15% off.

More Mock-Ups

Mock Ups Round 2

More Mock-ups

I have created This mock-up from he clients feedback. He wanted his USP to be that he is the only ice cream parlour in Nottingham so we have gone with a bright, family friendly colour scheme. I went for a hand drawn theme to emphasis the welcoming feel that YUMI has.


I put a tram in there to represent Nottingham and YUMI is right next to the Hyson Green tram stop. I also made the castle out of ice cream to track a journey through Nottingham to get to YUMI.

Yumi re-design mockups

After receiving feedback from our client we have taken into count his opinions and came up with new designs.

One of a kind in Nottingham

We developed a few basic mock ups to give us a starting point based upon the idea that YUMi is the only ice cream parlour in Nottingham. We thought a drawn city at the bottom of the content would flow nicely and allow the viewer to get a sense of where, why and what yumi's is. We worked with different colours for the background but the light blue worked out the best as it reflects that logos colour and gives the general site a positive feel.

We though t we'd see how photos look with the mock up as it was one of his favourite elements before but we decided it was too much imagery.
No colour=very boring
Doesn't look balanced with the shorter header.

YUMI Theme

So far we have been getting mixed messages bout exactly what the theme is. We have been asked to create a 50's style diner but on feedback from our previous mock ups there are only a few elements he like such as, The layout that uses images as navigation, the black footer that has ice-creams coming out of it and the collage on another mock up. So below The YUMI's owner has given me these images that he likes. Each picture has a theme that interlinks with each other.

Quality family time and sharing-

Family fun/childhood/retro-
Retro, yummy childhood deserts-
Retro, engages with the public-
Childhood illustration-
Again childhood illustration-
Childhood/family-
Overall these images reflect a sense of childhood fun. Whilst talking to the owner he asked for a theme that incorporates a retro sense of the 50's. It's about having a modern environment with a modern twist.

Also the ice creams UPS (unique selling point) is that it is the only ice cream parlour in Nottingham (that has a presence on the web anyway) therefore he suggested another theme based upon this idea. That yumi is in a unique place, selling unique ice cream and is one of a kind within Nottingham.

We have started developing mock ups based on this theme.