UXUIDesign

=UX & UI Design=

Splash Screen:



media type="file" key="Crayon_Cook_End_Animation_Neutral.swf" width="360" height="270" media type="file" key="Crayon_Cook_End_Animation_Good.swf" width="360" height="270" media type="file" key="Crayon_Cook_End_Animation_Bad.swf" width="360" height="270"



Plate Analysis Update (nb: look for more files for individual pieces of this image in the dropbox) - I still need to make pre-drawn food items to place in this food box - I still need to make a new, smaller drawing pallet (opened when you click on the far right tab) within this food box page - nutrition label has also been changed: with 'food selected' and 'servings' headings (to show number of servings) - instead of showing how each item changes the score with a specific number, we can just highlight the nutrient in red if it's over the maximum/optimum value

Dining Room Update:



Hi Tarek, the xlsx file is a list of the nutrition facts of 21 ingredients and food.

== Nutrition facts label!

It's the end-animation (good and bad). It's not the final version and the eating part is included. Any comments are welcome. I'll revise them. --Yang Colored drawing board scene with tool pallet... you can expand the color pallet to full screen, and there is a drop-down menu for stroke/line thickness, and also for geometric shapes.

^Adorable! Good job Yang :)



New colored fridge scene:

New and colored kitchen scene; taking into account the landscape view, and that iPhone games take up the whole screen space (960px x 640px). ==

Dining Room scene:

A potential character, Winston. He has a peanut allergy and high blood pressure... (nb: I think it might be easier to animate him if I make a 3D model that we can animate, and texture to look like a cartoon...)

Mock up of the Pop-up questions before drawing.

mockup.ppt

Some more example foods taken from the Design and Access prezi sketches:

Basic interaction in flash: Beiyi: I built a basic flash file with some basic interactions. Can someone test it on iPhone to see if it works? I'm also wondering if the fridge should have a closer view so that user will be able to see what food items in it; otherwise the food items will be too small to click and drag? Krista:^ Hi Beiyi, this swf looks great- I can definitely make close-up views of the fridge, maybe letting the user choose one of four quadrants.. Do we know if you can interactively zoom in and zoom out inside iPhone applications like you can in google maps on the iPhone ? Beiyi: I'm not sure about that. We can ask our TF. An alternative is to add some interactions to allow users to further choose the area of the fridge to load closer view.

Crayon_Cook_v1.0.fla

Drawing board and fridge wireframes (moar coloring and texturing needed):

Kitchen and plate wireframes (//ibid// colors and textures):

iPhone App Interface

Food Lab sketch ! I think I'll take your advice and experiment with different background colors for each screen.. Meeting decisions: you can click on each of the nutrition items for a breakdown of how they affect your plate's score in the 'details' box. Also, we will add tabs so that you can look at the TOTAL nutrition information for the plate, or nutrition for each of the COMPONENTS in the plate (i.e. apples, lettuce, cheese). In this interface you can also adjust and tinker with the quantity of the plate's components (i.e. add more apples, take away some quantity of cheese).

Dining room (without guests) ! ..what navigation / buttons should there be? Beiyi: Will all of our UIs be in this kind of brownish colour? I mean ... will it be too monotonous for teenagers? I like the bright blue of the avatar-creation interface because it makes me feel excited and happy. Krista please don't feel limited by that brownish game beginning interface. I think we can keep the style coherent by using a "crayon-like" brush but we don't need to use similar colour patterns all the time. What do you think?

Kitchen drawing-board screen sketch! Beiyi: Oh I really want to draw something with it right away

Beiyi: I also played around with the interface design today ^_^ Krista^: I love this Beiyi! That girl is adorable, the layout is clean and engaging..! Though, (maybe taking our community rules into account) is her outfit too //risqué// .. 8D? Beiyi: Haha ... i must admit that i've watched too many japanese animations ...

Krista: First stab at the avatar customization screen- thoughts? Suggestions?

Beiyi: Ow I like it! So our game will be 3D-like? Krista: I'm not sure if I want it to be too 3D-like; I just often gravitate that way in my art. I like your sketch and the character's almost pixelated/8-bit style. Her proportions are adorable/appealing too. Beiyi: i guess that's Asian style vs. North American style, hahaha. But I definitely love this 3D-look style. Keep going, Krista! ^o^



Apples and hamburgers in the fridge



This article gives some guidance on designing UX and UI's for children. The take-home message is that most of the same rules we follow when designing for adults apply, but that children's sites should involve less text (or very large, simple text if you need some), interaction with a mouse instead of with keyboard keys, and a reduced number of buttons/scroll bars/clickable items. Keep it obvious, simple, and engaging.. ? Designing User Experiences for Children : UXmatters

== What's the difference between UX & UI Design? []

First try at using fireworks (it's //fun//), combined with a plate made in autdoesk maya: I used this website as a guide.