iCanvas
iPad Application: iCanvas The Wireframe By: Nancy Yu Wen Sun
Scope:
The first objective was to create an iPhone interface, iCanvas, for designers to generate vector art on the go and transfer to Adobe Illustrator.
The second objective of this project was to seamlessly connect iCanvas with other 2 independent mobile applications and expand its functionality.
Duration: 2 months Team:
Matt Viklund (Developer) Anita Phanthikane (Interface Designer) Drew Hutchinson (Interface Designer) Nancy Yu Wen Sun (Interactive Designer)
My roll: As an interactive designer on the team, I had to translate the ideas to workable documents for the developer and interface designer.
Application Structure: iCanvas
Home Page Library
Credits
Canvas Stage
IP and Port # setting
Help
Color Box
Tool Box
Shape Box
Edit
Save
Kuler swatch
Pen Tool
Star Adjust shape
Crop Tool
Open Kuler Application
Your own swatch
Brush Tool
Shape Adjust shape
Flip Tool
Open Hype Application
Rotate Tool
Export to computer
Bucket Tool Gradient Tool
Text Tool
Undo/ Redo
“Home Page” 1.1 Apple Tool Bar
(Static)
1.2 Name (Static) 1.3 Logo (Static) 1.4 Start Button (Linked to “Library” page) Activate the button with a single tap 1.5 Setting Button (Place to change IP and Port#, goes to “IP and Port#” page for reference)
iCanvas
1.6 Credits Button (Linked to “Credits” page) Camera
Create
Credits
Recent
“IP and Port#” : Activate Menu by 1.5 Setting Button
3.4.3.5 Port # (stationary label)
3.4.3.1 Back Button Activate with a single tap to go back to “Home Page”
3.4.3.6 Port textfield On tap, enable the text field. The text length is unrestricted. 3.4.3.7 Keyboard
3.4.3.2 Edit Button Activate keyboard with a single tap. The IP text box and Port # text box becomes editable. 3.4.3.3 IP (stationary label) 3.4.3.4 IP textfield On tap, enable the text field. (The longest charactor possible is 16 characters)
3.4.3.8 Help Leads to help info page which teaches the user how to find the IP and Port #
“Library stage� 2.2.1 Title: Library (text) 2.2.2 The Thumbnails Activate the saved canvas (bring to canvas active platform) with one finger double taps 2.2.3 Delete Select and delete the canvas
deselect
“Canvas Stage” 2.1.1 to 2.1.5 Color swatches (This is also the location where Kuler uploads) Activate the “color wheel“ box with a double-tap Action: color select with a single tap 2.1.6 Switch swatches button between Kuler and your personal picks (there are five swatch spaces for personal picks)
Kuler Palletes
If there is no previous Kuler swatch in memory, this button will open the “my Kuler” page 1. Activate the switch with a single tap 2. Activate the “my Kuler” page with a double tap Back Back
* There are 2 icons needed at this position:1. Kuler & 2. Swatches
2.1.7 Tool Box (Contain tools: Pen, Brush, Bucket, Gradient, Circle, Square) Hold the icon to activate the drop down menu 2.1.8 Shape Tool (Contain: Font choice, Font Size, Convert Text to Vector) Hold the icon to activate the drop down menu 2.1.9 Crop Tool (Contain tools: Crop, Flip, Rotate, undo, redo) Hold the icon to activate the drop down menu- “image tool menu”
2.1.10 Save and Trash (Open “info tool”, which contains: Save, Trash, Open “Library”, E-mail, Open Kuler) Hold the icon to activate the drop down menu- “Save or Trash menu” 2.1.11 Tool Bar Background (Static) (Both tool bar will disappear when user touch canvas)
“Canvas Stage” : Activate 2.1.1 to 2.1.5 (Color Box) 2.1.5.1 “C” Text (selection color name) 2.1.5.2 The Cyan slider picker (slider bar) Hold and drag the color picker. The slider has the value from 0% (left side) to 100% (right side). Action: Hold, drag and release on position to select. 2.1.5.3 (C) Cyan Selection result box. Display in percentage 2.1.5.4 “M” Text (selection color name) 2.1.5.5 The Magenta slider picker (slider bar) Hold and drag the color picker. The slider has the value from 0% (left side) to 100% (right side). Action: Hold, drag and release on position to select. 2.1.5.6 (M) Magenta Selection result box.
2.1.5.7 “Y” Text (selection color name) 2.1.5.5 The Yellow slider picker (slider bar) Hold and drag the color picker. The slider has the value from 0% (left side) to 100% (right side). Action: Hold, drag and release on position to select. 2.1.5.9
(Y)
yellow Selection result box
2.1.5.12 “K” Text 2.1.5.5 The Black slider picker (slider bar) Hold and drag the color picker. The slider has the value from 0% (left side) to 100% (right side). Action: Hold, drag and release on position to select. 2.1.5.12 (K) yellow Selection result box
2.1.5.13 Picked color display Display the result of the CMYK color On tap, close Color Box. 2.1.5.14 Return On tap, close Color Box
“Canvas Stage� : Activate 2.1.7 (Tool Box) 3.1.1 Brush Tool (Able to draw with finger tip) Making the selection by holding and dragging to the icon and release 3.1.2 Pen Tool (Able to draw with anchor points and lines) Making the selection by holding and dragging to the icon and release 3.1.3 Bucket Tool (Able to fill a closed path with the selected color) Making the selection by holding and dragging to the icon and release 3.1.4 Line Tool (Able to create straight lines) Making the selection by holding and dragging to the icon and release
“Canvas Stage” : Activate 2.1.8 (Text/ Shape Tool) 3.2.1 Shape Tool Pentagon Making the selection by holding and dragging to the icon and release Action: When Clicked Activate pop up box, reference “Shape page” 3.2.2 Shape Tool Star Making the selection by holding and dragging to the icon and release Action: When Clicked Activate pop up box , reference “Shape page” 3.2.3 Shape Tool Round Corner Square Making the selection by holding and dragging to the icon and release 3.2.4 Shape Tool Circle Making the selection by holding and dragging to the icon and release 3.2.5 Shape Tool Square Making the selection by holding and dragging to the icon and release
“Shape page” : Activate from either 3.2.2 and 3.2.1 (Star and Pentagon tool) 3.2.1.1 Text “Sides” Stationary text 3.2.1.2 Side Slider The slider changes how many sides on the pentagon or star. (Left value= 0, right value = 100) 3.2.1.3 Side Value Display Display the selected value 3.2.1.4 Text “Size” Stationary text 3.2.1.5 Size Slider The slider changes how many sides on the pentagon or star. (Left value= 0, right value = 100) 3.2.1.6 Size Value Display Display the selected value
“Canvas Stage� : Activate 2.1.9 (Image Tool) 3.3.1 Undo and Redo Making the selection by single tap 3.3.2 Crop Image Making the selection by single tap 3.3.3 Flip Making the selection by single tap Action: To flip image, swipe with one finger across the page 3.3.4 Rotate Making the selection by single tap Action: To rotate image, draw arcs with one finger across the page Or draw arcs with two fingers on the page To 1. 2. 3.
Click off One finger One finger One finger
this function: tap off the canvas active area tap on other function icon double tap on the canvas area
“Canvas Stage” : Activate 2.1.10 (Function) 3.4.1 Save Activate with one finger tap 3.4.2 Trash Activate with one finger tap 3.4.3 Export to computer Activate with one finger tap 3.4.3-1 A pop up box saying “You haven’t set your destination . Would you like to set it? OK Cancel” “OK” will lead the user to “IP and Port# page” “Cancel” will lead to close to box and no action 3.4.4 Open Hype Activate with one finger tap 3.4.5 Open Kuler Activate with one finger tap
3.4.6 Library Activate with one finger tap 3.4.7 Pop up box (Static) To Click off this function: 1. One finger tap off the Tool Box active area
The project was complete at the wireframe stage and has not being developed further due to the large scope we eventually defined. However, the project did expanded my knowledge on application development for Smart Phone and iPad.
Project Leader: Brett Forsyth Scrum Master: Vincent van Haaff Special Suport: Clarence Lee VFS March 2009