MAT-120 P2 :: Collective Consciousness

Collective Consiousness : Group Interface Design

20% of Semester Grade

Quick Links on this Page:


Overview

Students will form in groups and collaborate to create a user interface for all group members’ works from Project-1.

This assignment will focus on the navigation and interface design, usability, developing group collaboration skills, typography, color, and texture to create a media-rich launch page to showcase student work. Primary digital tools used will be Adobe PhotoShop (and/or Illustrator) for wireframe mockups and samples, and Adobe Adobe Animate CC for interface design.

This is just the overview! You must read this entire  page to be sure you are doing everything necessary to succeed in this project.

Tools, Techniques, and Concepts Covered

As part of the overview section, you can see at a glance which tools, techniques, and concepts will be addressed in this assignment:

Tools and Techniques
  • Keyframing
  • Blend Modes
  • Design sample development
  • Collaborative work
  • Introduction to interactive interface design
  • Simple programmatic scripting events
  • Timelines, tweening, and easing
  • Adobe Photoshop, Illustrator, Animate CC
Concepts

↑ Back to Top


Process

For this project we will use a standard professional Project Management Outline so that you can become familiar with the stages of larger scale professional projects.

Following is the outline at a glance. After this summary, you will find all of these sections broken down and detailed with specific information to help you complete your assignment successfully.

Project Management Outline (summary):

  • Concept Development Phase
    • Define Project Scope
    • Set Goals and Parameters (Requirements)
  • Prototype Design Phase
    • Develop Project Outline
  • Content Development
    • Step 1 :: Gather and review all group videos. Create ‘credits’ copy.
    • Step 2: Individual storyboarding (how to approach getting started and generating creative ideas)
    • Step 3 : Identify any necessary changes to individual videos and update.
  • Prototype Development
    • Create a draft of your composite using appropriate tools demonstrated in lessons.
    • Focus Group Feedback (Peer Review)
    • Rework Prototype and Collaborate
  • Delivery
    • What to turn in and how to turn it in

Project Management Outline (detailed)

Concept Development Phase

Define Project Scope

Analyze the need for the project and define the media scope. Include the reality of budget, time, and resource limitations (if any).”

For this assignment, you will have 3 weeks to complete the entire project in the following phases:

  • Week 01 : (Overlaps with end of Project-1) Form groups. Brainstorm interface ideas, storyboard, and assign roles. Start research by gathering materials, creating samples, creating wireframes, and creating a written map of button behaviors.
  • Week 02: Work in groups to start assembling in Adobe Animate CC.
  • Week 03: Complete project (hopefully) in class.

Resources Available:

You will need all group members’ final rendered mp4 files to be uploaded to YouTube. The group will use Adobe Photoshop, Illustrator, and Animate CC to build an interface deliverable for the class.

Set Goals and Parameters (Requirements)

Goals:

Students will collaborate to create a cohesive, intuitive, and well designed interface to present Project-1 clips.

Additional goals met within this process are a majority of the Student Learning Outcomes for this course, with exception to 3D design.

Requirements

The group interface must meet the following:

  1. generally responsive: all components will ideally fit on scalable stage and maintain ratio/relationship. This doesn’t have to work on mobile devices since output will likely be in swf+html format, but it should at least look good when scaled on a desktop. (Most Android and iOS devices don’t allow swf files).
  2. concept: must be a result of group collaboration.
  3. video resources: each group members’ work must be linked to the interface.
  4. credit link: each group should have a credits link that has everyone’s name and role title in the project, as well as a note that it was prepared for MAT-120.
  5. intuitive to use
  6. completely functional: no broken links
  7. good usability (example: if you don’t link directly out to YouTube, make sure that users have some way of controlling video playback even if you don’t use the standard player controls).
  8. well balanced: must employ good design principles.
  9. reflection statement and evaluation: each person must write a reflection on the group experience and self-evaluation at the end of the assignment to turn into the instructor privately.

↑ Back to Top

Prototype Design Phase

Develop Project Outline

Think about how you want to portray the work as a group and discuss a common theme you might work towards when collecting material resources.

↑ Back to Top

Content Development

Step 1 : Group storyboarding/mockups (how to approach getting started and generating creative ideas)

As a group, create some rough sketches to arrive at a common interface overview. Discuss what options to explore in materials research so that those group members have a common direction.

↑ Back to Top

Step 2: Gather material resources and build wireframe

Group members do assigned research to gather and create samples, fonts, and wireframes.

During this phase, you will each individually also be doing Animate CC practice tutorials so that each member has competencies in the software. Additionally, each member will create his or her own “video page” so go into the larger group composite piece.

↑ Back to Top

Step 3 : Bringing it back together

Meet again in class and present each other with your independent research. Discuss ways that you can organize everything in a digital format and create a repository of materials. Make design decisions based on color, typography, and textures. Also come to final agreement on navigation and interface usability before continuing with development.

↑ Back to Top

Prototype Development

Create a draft

As a group, combine skills to create a draft of your composite using Animate CC as necessary to realize your design. Look to each other (group peers) for troubleshooting and testing before asking the instructor for help.

To see how to get started in using the tools necessary for this assignment, please go to the project’s TUTORIAL PAGE. It has a playlist of video tutorials to assist you in getting started with Animate CC and other tools. It walks you through each phase of the project, both individual and group parts with this example project:

spokenword


 

Focus Group Feedback (Peer Review)

Work outside of class to get feedback from other people to see how you can improve the work.

Rework Prototype
  1. Finalize your project and create deliverables.
  2. Test to see that your full project files will work when transferred to another computer before uploading to the server. This will help you immediately see if asset links are broken in your SWF and/or HTML files before turning in files.

↑ Back to Top

Delivery

Due at the Critique
Special Group Assignment Submission Info:

Where and how to save final files

  1. Since this is a group assignment, the group should identify a single user’s directory to which the entire project folder should be uploaded (including ALL properly linked assets such as imagery, audio, and video). Place the files in the user’s directory under a “groupname-group-project” folder, where “groupname” is the name of your group. For instance, if your group name is “roosters” then your group folder would be called: “roosters-group-project“. When submitting the assignment in Canvas, you will provide the exact URL web link to the html file that displays the group project.
  2. In addition, make a zipped version of this folder on the server so that group members can download as a completed project at any time from a web browser.

 

Reflection statement

Write a reflection statement of your group experience. Either type or attach it in the comments of your Canvas assignment submission (DO NOT PLACE IT ON THE SERVER). This statement should be about one paragraph (two at a maximum) and should address the following:

  1. How successful you think the communication was overall
  2. Who was assigned which tasks
  3. Discuss any additional tasks you did above and beyond your duties
  4. If any break-downs occurred in the workflow, please describe them in a professional manner.
  5. Overall, what was your experience like working in the group?
  6. Do you feel that the final output was successful? Why or why not?

↑ Back to Top


Grading

Design, Concept, Participation

  1. layout
  2. visual consistency coherence, and cohesion
  3. successful communication/ impact
  4. craftsmanship
  5. color harmony
  6. movement
  7. form
  8. image quality
  9. inventiveness/ creativity
  10. Did you meet all of your progressive deadlines?

Technical Requirements

  1. generally responsive: all components will ideally fit on scalable stage and maintain ratio/relationship. This doesn’t have to work on mobile devices since output will likely be in swf+html format, but it should at least look good when scaled on a desktop. (Most Android and iOS devices don’t allow swf files).
  2. concept: must be a result of group collaboration.
  3. video resources: each group members’ work must be linked to the interface.
  4. credit link: each group should have a credits link that has everyone’s name and role title in the project, as well as a note that it was prepared for MAT-120.
  5. intuitive to use
  6. completely functional: no broken links
  7. good usability (example: if you don’t link directly out to YouTube, make sure that users have some way of controlling video playback even if you don’t use the standard player controls).
  8. well balanced: must employ good design principles.
  9. reflection statement and evaluation: each person must write a reflection on the group experience and self-evaluation at the end of the assignment to turn into the instructor privately.

↑ Back to Top

Digital Art, Design, and Communication Education