Lecturers

• Prof. Jürgen Späth

Teaching Assistant

• Marcial Koch
  

External Inputs

• Florian Wille - Figma & Process of GUI Project @Dreipol
  
• Renato Soldenhoff - Digitales Arbeiten an der ZHdK (DAZ)
  
• Paolo del Ponte - Digitales Arbeiten an der ZHdK (DAZ)
  
• Caroline Pieracci - UX Writing
  

Students

Lukman Ascic, Lea Bischoff, Mo Bünzli, Sonja Cowley, Benjamin Eggstein, Carina Good, Loïc Hommel, Nanthatchaporn Pree Janthasom, Tanja Landolt, Giovanna Yanireth León Briceno (Exchange Student), Audrey-Meret Lohmann, Lyvia Muniz Gomes Wägli, Matthias Naegeli, Luis Praxmarer, Elena Walther, Lars Ziegler

• Group 01
  Loïc, Elena, Tanja


• Group 02
  Luis, Carina, Mo


• Group 03
  Matthias, Lars, Sonja, Giovanna


• Group 04
  Benjamin, Lea, Liv


• Group 05
  Luke, Audrey, PJ

Tools

• Teleconferencing Zoom
• Online Collaboration Figma
• Online Collaboration Miro

Attendance

In the contact hours a minimum attendance of 80% is required to pass the course. Contact hours: kick-off, input session, mentoring, presentation. Two or more unexcused absences will affect the final grade. Arriving late on more than one occasion will also affect the grade.

Grading

Grades will be based on final presentation, final work and deliverables.

• 20% Final presentation
• 50% Process and Outcomes (Concept, GUI, Micro Interactions, Prototype)
• 30% Deliverables

Deliverables

All deliverables have to be uploaded to the filer until Monday 13.06.2022 at 09:00 AM.

• PDF Documentation (to be stored in a file labelled “Documentation”)
• Mockup & screencast of interaction with the mockup. A short video (~2min) of the project (to be stored in a file labelled “Video”)
• Text file including the project title, a short description, and a project description (in a file to be labeled “Texts”)
• Approx. 10 representative images of the project (to be stored in a file labeled “Images”)
• Click-Dummy

Please take a look at the IAD documentation guidelines for submission.

Teaching Format

The module involves a mixture of inputs, mentoring, atelier visits and independent work. The difference between the mentoring and the atelier visit lies in the level of expectation:

Atelier Visit: Is like a shoulder view. Students show where they stand at the moment. They have the opportunity to ask questions that have arisen.

Mentoring: There is an expectation of what the mentors want to see. This is specially prepared for the mentoring session, i.e. there are individual boards on which the relevant things to be shown and discussed are displayed. Motto: No Prototype. No Meeting.

Overview & Objectives

The main objective of the course is to gain practical experience in creating a graphical user interface (GUI). Therefore the students will apply their theoretical knowledge on design methods and processes to create an interactive prototype.

Organised into groups, students will work their way through a four-part process.

During the course the student will learn:

• how to analyse implemented graphical user interfaces in a comparable way,
• how to design a graphical user interface in draft form and work it out as a simple prototype,
• access a box of design methods for developing graphical user interfaces and use them appropriately.

Topic

StuDAZ – Digital Transformation of Student-University organisation

Data exchanges between student and University, as well as other administrative tasks are part of a students daily life. Within ZHdK most of this data points are spread over different platforms, making it difficult for the students to manage their studies. Do you know how to apply e.g. a vacation semester or exchange semester? Is it clear how to access your ECTS credits and understand what is already done or how many ECTS you still need in all the specific sectors? All this possible questions could be answered by deeply searching on different platforms, which leads to frustration and insecurity on students side.
Furthermore, most of this processes are not digitalized, which means more administrative work on the part of students and the university.

More than 2,000 students study at the ZHdK in over 20 different disciplines ranging from dance, music, and theater to design, art education, and fine arts. In addition, there are more than 400 employees who perform numerous tasks in teaching, administration and research.

Students would enjoy to have an application for a clear organization of their study, whereby employees ask for a time-efficient student - University exchange. In this module we focus on an application that bundles all administrative processes and services that are required as a ZHdK student. All from the point of view of digitization. For this purpose, we are developing an interface for a smartphone application that students have all the important data in their pocket, accessible at every time. 

Kick Off

• Introduction into the module "Graphical User Interface"
  
• Introduction to the basic tools
  
• Super heroes & super villains
  
• Team culture, team building

Corporate Design (CD) ZHdK

Qualitativ Interviews

Ressources of the Explore Method «Interviews». What needs to be considered in order to produce useful material.

External Input: Digital work at ZHdK (DAZ)

Renato Soldenhoff and Paolo Del Ponte will give insights into DAZ.

Input: Design Method Personas

Download Session: Findings

Each team has 15 minutes to tell the others about their findings out of the explore phase. The people listening add these points with post-its on their white boards (Miro). All post-its must then be clustered and help to create a User Journey Map.

Source: Digital Innovation Playbook

Input Wireframes

A wireframe is a visual guide that represents the basic framework of a website. Wireframes are created to arrange elements to best serve a specific purpose.

External Input: Florian Wille

Room: Near Shift, 4.T06

I will show you the basics of Figma - the current industry standard for designing GUIs.
We will look at the basic functions, strategies on how to build a UI library that is easy to maintain and extend, and some tips&tricks.

Prepare by:

• creating a Figma account (preferably with your ZHdK address)
• downloading the Figma App. 
• Figma also runs in a Browser, so if you don't want to download the app have a current (chromium) browser installed.

We will be working together in this Figma File

Finally two articles on «Atomic Design» - a way of building a system of (nested) components:

• Atomic design 2022: what we can learn from Eames and other design giants
• Atomic design: how to design systems of components
  

Mentorings

Have a look on the google calendar for your timeslot.

We expect ideas from brainwriting and brainstorming translated into first sketches of wireframes.

Input Graphical User Interface

https://uxmag.com/articles/what-is-at-the-top-of-the-ux-pyramid

Mentorings

Have a look on the google calendar for your timeslot.

We expect advanced wireframes and first mockups.

Task: Beurlaubung

External Input: Caroline Pieracci

Caroline Pieracci will give insights into the field of UX writing.

Help Build-Up Diploma Exhibition

Schedule below
27 May 2022 in 4 slots: (its noted in the google calendar)

• 09:00 - 11:00: Tanja, Luis, Lars, Lyvia
• 11:00 - 13:00: Elena, Carina, Matthias, PJ
• 13:00 - 15:00: Loic, Mo, Lea, Luke
• 15:00 - 17:00: Sonja, Giovanna, Benjamin, Audrey-Meret

Mentorings

Have a look on the google calendar for your timeslot.

Expectation:

- continue working on your digital wireframes (Figma) 

- focus on one concept in the team

- three different skins for the main screen

Mid Presentations

Each group presents 10 minutes. This is followed by a maximum of 10 minutes of discussion per project. Make sure that not only one person from the group presents, but that everyone in the team talks for the same amount of time.

We recommend to work with slides. Of course, if you find a better way to present your project, you are free to do so.

Expectation:

- creates a presentation in e.g. keynote

- briefly outline the most important points of the process in order to be able to understand the decision

- The main focus of the presentation is the conception of the Figma wireframe

- Implement leave semester request in wireframe

- The further processed skin designs 

Mentorings

Have a look on the google calendar for your timeslot.

We expect advanced mockups incl. designskins, partly clickable.

Mentorings on request

Write us an email to juergen.spaeth@zhdk.ch & marcial.koch@zhdk.ch 1 day in advance.

Final Presentations

Each group presents 15 minutes. This is followed by a maximum of 15 minutes of discussion per project. Make sure that not only one person from the group presents, but that everyone in the team talks for the same amount of time.

We recommend to work with slides. Of course, if you find a better way to present your project, you are free to do so.

Feedback Session

Each group gets a 30 minutes timeslot for mentor feedback to their project.

Deliverables on filer

Upload the following deliverables on the server until 13.06.22, 09:00.

• PDF Documentation  (to be stored in a file labelled “Documentation”)
  
• Mockup & screencast of interaction with the mockup. A short video (~2min) of the project (to be stored in a file labelled “Video”)
  
• Text file including the project title, a short description, and a project description (in a file to be labeled “Texts”)
  
• Approx. 10 representative images of the project (to be stored in a file labeled “Images”)
  
• Click-Dummy

Prototyping Tools

Design Guidelines

• Design Guidelines Google
• Design Guidelines IBM
• Design Guidelines Apple

Tools overview

• Design Valley
• Prototypr

UI Frameworks

• Angular Material
• React

Prototyping Tools Tutorials

• Figma
• Protopie
• Origami
• AdobeXD

Icons

• Evericons
• TheNounProject
• Google Material Icons

Colors

• Palette List
• HTML Color Codes