Scribd Logo
Upload

Welcome to Scribd!

  • 298 views

    04 Laboratory Exercise 142

    Uploaded by

    andres tabaldo
    This document provides instructions for a laboratory exercise on wireframing an online store interface using Fluid UI. Students will: - Design the interface for their own online store with 5-10 pages - Apply principles of interaction modeling and interface design - Share a clickable link to their work for grading based on content, creativity, and organization The goal is for students to practice wireframing skills and determining the effects of design principles on the GUI structure.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    04 Laboratory Exercise 142

    Uploaded by

    andres tabaldo
    298 views2 pages
    This document provides instructions for a laboratory exercise on wireframing an online store interface using Fluid UI. Students will: - Design the interface for their own online store with 5-10 pages - Apply principles of interaction modeling and interface design - Share a clickable link to their work for grading based on content, creativity, and organization The goal is for students to practice wireframing skills and determining the effects of design principles on the GUI structure.

    Original Title

    04 Laboratory Exercise 142 (1)

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document provides instructions for a laboratory exercise on wireframing an online store interface using Fluid UI. Students will: - Design the interface for their own online store with 5-10 pages - Apply principles of interaction modeling and interface design - Share a clickable link to their work for grading based on content, creativity, and organization The goal is for students to practice wireframing skills and determining the effects of design principles on the GUI structure.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    298 views2 pages

    04 Laboratory Exercise 142

    Uploaded by

    andres tabaldo
    This document provides instructions for a laboratory exercise on wireframing an online store interface using Fluid UI. Students will: - Design the interface for their own online store with 5-10 pages - Apply principles of interaction modeling and interface design - Share a clickable link to their work for grading based on content, creativity, and organization The goal is for students to practice wireframing skills and determining the effects of design principles on the GUI structure.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 2

    IT1906

    Laboratory Exercise
    Wire-framing with Fluid UI
    Objectives:

    At the end of the exercise, the students should be able to:

     Merge interaction modeling and interface options through wire-framing; and


     Determine the effects of fundamental design principles on GUI structure.

    Materials:

     One (1) personal computer with a pre-installed Google Chrome, Microsoft Word, and Snipping Tool
     Internet connection

    Instructions:

    1. Open Google Chrome and log on to your eLMS account. Go to 04 HCI Design > 04 Laboratory
    Exercise Answer Sheet. This will serve as your answer sheet for this activity.

    2. Access Fluid UI (https://www.fluidui.com/). Sign in using the account you created during your previous
    laboratory period. Make sure that the e-mail address you used in signing up is your STI e-mail address.

    3. After signing in to Fluid UI, delete the content of your current project since there can only be one (1)
    project on the free version of Fluid UI. Double check the project name. It should be in the following
    format: HCIProject_LastName. (ex. HCIProject_Reyes)

    4. Design the software interface for your own online store. Conceptualize the details, such as the name of
    the store, items that you are selling, the specific module you are designing, possible features, etc.
    Create a minimum of five (5) pages and a maximum of 10 pages in wire-framing. Then, click the Add
    Page icon to start with your new design.

    5. After designing the software interface of your online store, and when you are ready to submit your work,
    go to (a) Preview > (b) Share > (c) Clickable. Copy and paste the (d) Clickable link to the answer
    sheet in your eLMS account. Make sure to follow the instructions in 04 Laboratory Exercise Answer
    Sheet.

    04 Laboratory Exercise 1 *Property of STI


    Page 1 of 2
    IT1906

    (b) (a)

    (c)
    (d)

    Figure 1. The image indicates the specific buttons needed to be clicked when submitting the exercise.

    6. Note that upon accessing the clickable link to your work, the instructor will be able to navigate within
    your work as if s/he is a customer browsing your online store. Your work will be graded based on the
    grading rubric below.

    GRADING RUBRIC (Application Design):


    Criteria Performance Indicator Points
    Content The correct ideas and HCI design principles were included. 50
    Creativity The application design was created imaginatively. 30
    The software interface components were placed in an organized manner based on the HCI 20
    Organization
    guidelines.
    TOTAL 100

    Reference:
    Create Web and Mobile Prototypes in Minutes. (n.d.). In Fluid UI. Retrieved from https://www.fluidui.com/ on
    June 28, 2019

    04 Laboratory Exercise 1 *Property of STI


    Page 2 of 2

    You might also like