Icing bags design

chocolate, baby blue, baby pink and white

Example Images

Here are some images I found which I liked the design of. All images were taken from iStockphoto. I used some as a template to draw round in illustrator.

ideas - animation for swirly topping

To get an idea of how I wanted the animation of the piping bags to look I drew out some ideas of the stages in my sketch book.

When the user chooses the coloured icing they want and pick up the appropiate icing bag and drag it over to the cupcake a movie clip will begin of the icing bag drag the icing over the top of the cupcake.

cupcake cases - stages

Originally when I made my cupcake cases I took inspiration from this image from shutterstock:

After recieving feedback on the cases I had drawn, I felt they were a bit too "sharp" for cases.

I went on to draw a more rounded version of the cupcake case. I think this complimented the look of the game better than the original drawing.

Project Structure

Visual Design - Oven

To get an idea of the way the oven door would open I drew some sketches. With the help of games design student, Steven Conlan I used 3D X max to create a prototype of the oven door opening.

Visual Design - First Draft Flowchart

Since I have been drawing the visuals for my project I have found I will have to change the perspective as later on in the interactive game the user has to put the cupcakes into an oven. My visuals need to be set out so that an oven can be opened and closed in the animation.

Flow Diagram of Interactive website:

Visual Design - More sketches

Cupcake Ingredients

Basic Cupcake Ingredients

Butter
Caster Sugar
Eggs (beaten)
Self Raising Flour (sifted)
Icing
Sprinkles

Tools to bake Cupcakes

Cupcake tray
Cupcake papers
Bowl
Mixing Spactula or Electric Mixer
Oven
Fridge (to keep things cool!)
Sieve

Visual Design - Logo

First sketch of the proposed logo design for the shop front:

Visual Design - Sketches

Store front (homepage) First draft:

Kitchen (Stage 1) First Draft: My first draft I drew an image of the whole kitchen, I later decided to change this as some of the items in the kitchen were useless in the game.

Kitchen (stage 1) 2nd Draft: For my second draft I zoomed in on the kitchen worktop and got rid of the objects in the kitchen which were not in use.

Kitchen (stage 2) 2nd draft: I had to think about the placement of objects on the kitchen worktop for when they move from slide to slide.

Project Structure

Project Content

The following is a brief explanation of the components I will be producing for submission for mamas little bakery:

- Flash Action script 2.0 FLA file

- Documentation

- Blog of development

Goals

From my chosen self initiated project I would like to achieve a better knowledge of the flash program and animation. As a professional in the industry I will be expected to have some knowledge of action script and the flash program. I also enjoy designing and feel this is were my strengths lie. Knowing this I chose a project that would suit both my strengths and build on my weaknesses.

My goal for this project is to build a fully working flash interactive website designed around a bakery theme for users wanting to purchase my cupcake jewellery.

Visual Design - Mood Board

Competitive Analysis - Pincstuff

www.pincstuff.com


Pinc.stuff sells all handmade clay sweet style jewellery. The website design looks like a template and there is too much information on each page, which you have to scroll down to get to. The website is static and there is no interaction for the user. Pinc.stuff offers custom made jewellery pieces to its users, by contacting her through email.

Summary of analysis

Overall my competitors websites do not offer the user much interactivity other than a static navigation bar. Custom bespoke jewellery is only offered on pinc.stuffs' website by contacting the jewellery designer through email which could end up being a lengthy process.

Competitive Analysis - Tiny Hands Online

http://tinyhandsonline.com

Tiny Hands website sells all handmade clay jewellery and it includes a separate "cupcake corner" page on the site. The design feels cute but does not suggest what it sells. The design makes me think the website has something to do with the environment, which it doesn't. Again, similar to Ku-Ki Shop the website is static and there is nothing which allows the user to customize their own individual piece of jewellery.

Competitive Analysis - Ku-Ki Shop

Online shopping communities such as etsy and ebay make it easy for many people to sell their cupcake and/or food charms from home. Many of these shops offer inexpensive good quality charms, however belonging to a community such as etsy does not give you much free reign on site design and it opens you up against a lot of competition.
The biggest competition comes from online websites such as the following:

http://www.ku-ki-shop.com/

Ku-Ki Shop sells handmade jewellery in a mixture of clay, metal and plastic. All the jewellery that they offer are girly and sweet, I think the design of the website reflects this well. They have used candy colours in baby pinks. blues and mint greens which makes the site feel sweet and candy-like. The site is static and doesn't give the user much interactive other than clicking the navigation and viewing the products. They also do not offer the user a choice of customizing their jewellery to create a bespoke piece.

Competitive Analysis - Baking Games

Ice Cream making game

- Seperate screens for each stage of the process

- User selects from the options hovers over the ice cream and drops

- Minimum graphics
- In the 4th screen the user can select as many toppings as they want. Each topping can be minimized, maximised, rotated and deleted.

Screen 1:

Screen 2:
Screen 3:
Screen 4:
Screen 5:

Other Designs and layouts

Competitive Analysis - Bakery Games

Bunny Baking Game

- Cute pastel coloured graphics

- 2D Design

- User is given a list of ingredients and a time limit to remember them, they have to then select the ingredients from the shelf and put them in the bowl.

-User selects item and moves it over to the bowl, the bunnies then mix the ingredients together

- Once all the ingredients have been put into the bowl "done!" appears on the side of the bowl. User has to click this to then move onto the next stage of the game.




Crazy Cupcake Game

- Simple cupcake making game

- On screen instructions allow the user to know what to do next

- Instructions display in a pop up box pointing to the item you need to choose next

- User picks up item (mouse down) and hovers it over bowl, once they drop the item (mouse up) animation is played to show the item being poured into bowl.

-User makes the icing sugar

- Each part of the cooking process is displayed on one screen.

Cupcake Jewellery

Cupcake charms and jewellery first become popular in Japan, their obsession with these small snacks followed into pastries and even sushi. People purchased the small food items for doll houses originally but they soon were made into cute wearable pieces of jewellery in the form of necklaces, bracelets, brooches and earrings. With the introduction of polymer clay, soon people throughout the USA and UK had the tools to make cute cupcake charms.

(NB: All images below are NOT my jewellery)

Abstract

For my self initiated project I intend to create a flash interactive website with a cupcake baking theme. The website will be set in a bakery where the user has the ability to interact with selected baking tools to make cupcakes. The end result of the users input will be an individual cupcake necklace which they then have the option of purchasing.

The user will be able to choose from the following options for their cupcake:

- Coloured Cupcake Case:

brown, neutral, purple, baby pink, baby blue.

- Type of icing:

swirl, piped, dollop.

- Coloured icing:

brown, white, baby pink, baby blue .

- Cupcake Decoration:

hearts, sprinkles, stars, diamantes.

The website will be aimed at women with an age range of 16-24. The cupcake jewellery appeals more to a younger demographic so the visuals used in the project will reflect a young girly theme.

My reasoning behind choosing this as my self initiated project is because from my personal research I have found most cupcake jewellery websites are static and there is not much option for users to create their own bespoke cupcake charm. Considering the age group of most customers who buy cupcake jewellery I think a more interactive website would be more appealing to them.

First Ideas

After some thought over christmas I came back to Jay with an idea that I wanted to pursue a project involving learning about e-commerce. We struck up a few ideas including:

- Re-designing a shopping basket icon and/or a range or e-commerce icons

After careful consideration we decided I needed a project that would challenge me more.

I wrote down a list of areas I wanted to work on, these included:

- Flash/animation
- Advanced Coding
- Design
- Advanced marketing methodologies
- Complex CSS

From this I came up with a list of ideas for projects I would be happy doing:

- Design and code a magazine website (a re-design of Hull vibe)

- Design and code layout

- Design a bakery website for one of my clients with full integration of working wordpress blog and social networking sites - how social networks influence successful businesses.

-Design a scrap book style website for local designers

- Design and code a flash interactive website for mamas little bakery cupcake charms

After putting these ideas to Jay, we both agreed the flash interactive bakery website for cupcake charms would be a challenging yet achieveable project.

Self Initiated Project - The Brief

The student will identify a suitable project idea/topic, formalise through appropriate documentation, and produce an online product to their own specification.

Brief to be negotiated between student and New Media staff.

Learning Outcomes

Evidence

Propose an appropriate topic for a web project		Project proposal presentation
Design and document a well considered web project		Final piece and project development blog
Show independence in the organisation and management of your work		Final piece
Construct an appropriate and substantial web design product(s)		Evaluation entry on project blog
Critically appraise the outcome of your work		Evaluation entry on project blog