iCanvas Wireframe

download iCanvas Wireframe

of 17

  • date post

    26-Mar-2016
  • Category

    Documents

  • view

    224
  • download

    1

Embed Size (px)

description

A iPhone Application wireframe for the developer.

Transcript of iCanvas Wireframe

  • iCanvas

    iPad Application: iCanvasThe 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.

  • Home Page

    Library

    Canvas Stage

    Color Box Tool Box Shape Box

    Star Adjust shape Crop Tool Open Kuler Application

    Open Hype Application

    Export to computer

    Flip Tool

    Rotate Tool

    Undo/ Redo

    Shape Adjust shape

    Text Tool

    Kuler swatch Pen Tool

    Brush Tool

    Bucket Tool

    Gradient Tool

    Your own swatch

    Edit Save

    Help

    Credits IP and Port # setting

    Application Structure: iCanvas

  • iCanvas

    Create RecentCamera

    Credits

    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)

    1.6 Credits Button(Linked to Credits page)

  • IP and Port# :

    Activate Menu by 1.5 Setting Button

    3.4.3.1 Back ButtonActivate with a single tap to go back to Home Page

    3.4.3.2 Edit ButtonActivate 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 textfieldOn tap, enable the text field.(The longest charactor possible is 16 characters)

    3.4.3.5 Port #(stationary label)

    3.4.3.6 Port textfieldOn tap, enable the text field.The text length is unrestricted.

    3.4.3.7 Keyboard

    3.4.3.8 HelpLeads to help info page which teaches the user how to find the IP and Port #

  • Library stage

    2.2.1Title: Library (text)

    2.2.2 The ThumbnailsActivate the saved canvas (bring to canvas active platform) with one finger double taps

    2.2.3DeleteSelect and delete the canvas

    deselect

  • Back

    Kuler Palletes

    Back

    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) If there is no previous Kuler swatch in memory, this button will open the my Kuler page1. Activate the switch with a single tap 2. Activate the my Kuler page with a double tap

    * 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 displayDisplay the result of the CMYK colorOn tap, close Color Box.

    2.1.5.14 ReturnOn 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 PentagonMaking the selection by holding and dragging to the icon and releaseAction: When Clicked Activate pop up box, refer-ence Shape page

    3.2.2 Shape Tool StarMaking the selection by holding and dragging to the icon and releaseAction: When Clicked Activate pop up box , refer-ence Shape page

    3.2.3 Shape Tool Round Corner SquareMaking the selection by holding and dragging to the icon and release

    3.2.4 Shape Tool CircleMaking 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 SidesStationary text

    3.2.1.2 Side SliderThe 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 SizeStationary 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 DisplayDisplay the selected value

  • Canvas Stage :

    Activate 2.1.9 (Image Tool)

    3.3.1 Undo and RedoMaking the selection by single tap 3.3.2 Crop ImageMaking the selection by single tap

    3.3.3 FlipMaking the selection by single tapAction: To flip image, swipe with one finger across the page

    3.3.4 RotateMaking the selection by single tapAction: To rotate image, draw arcs with one finger across the page Or draw arcs with two fingers on the page

    To Click off this function: 1. One finger tap off the canvas active area2. One finger tap on other function icon3. One finger double tap on the canvas area

  • Canvas Stage : Activate 2.1.10 (Function)

    3.4.1 SaveActivate with one finger tap

    3.4.2 TrashActivate with one finger tap

    3.4.3 Export to computerActivate with one finger tap

    3.4.3-1 A pop up box saying You havent 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 HypeActivate with one finger tap

    3.4.5 Open KulerActivate with one finger tap

    3.4.6 LibraryActivate 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

  • Project Leader: Brett ForsythScrum Master: Vincent van HaaffSpecial Suport: Clarence Lee

    VFS March 2009

    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.