Versions Compared

Version Old Version 9 New Version Current
Changes made by

Rebecca Morganti-Pfaffhauser

Rebecca Morganti-Pfaffhauser

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

I

...

I

Reactive Screens
Rebecca Morganti-Pfaffhauser — Visual Programming: Luke Franzke


                  

  

fltr: Andy Kirk, Sophie Anderhub, Sonjoi Nielsen, Fabian Frey — 2018 , Chen - Szakacs  — 2017

Screen 06: THE WORLD OF ...... VISIT THE WEBSITE OF ......

City guides

Here you can find all the city guides that offer your brand.

+

Here you can find additional information.

Exercise 03.2

Start screen of a selected city. On the screen is the name of the city and the main menu. With the arrow you come back on the start screen.

Arrow: Develop an arrow that returns the user a hierarchy level.

Image Removed

Exercise 03.3

Display the content in a list with icons. Extend or modify your icons from exercise 02.1

Circle: The circles are placeholders for icons.

Image Removed

...

The maximum effect of a poster is a striking verbal and visual reduction to the essentials. "Like something unexpected and surprising, as a kind of optical incident ..." ... "The poster must enter the emotional sphere ... like a burglar through the window, with a crowbar in his hand ..." A.M. Cassandre

Slimy pit tea – its playtime!
An anagram is a word or phrase formed by rearranging the letters of a different word or phrase, typically using all the original letters exactly once. For example, the word anagram can be rearranged into nag a ram, or the word binary into brainy. The original word or phrase is known as the subject of the anagram. Any word or phrase that exactly reproduces the letters in another order is an anagram. Someone who creates anagrams may be called an "anagrammatist", and the goal of a serious or skilled anagrammatist is to produce anagrams that reflect or comment on their subject. Wikipedia

By chance, we select only one term from a dictionary. This term we supplement with two other self-selected words, generate anagrams and find the right juxtaposition. By rearranging the basic design elements (e.g., word, point, line, from,), the context changes and we provoke new products, new moving posters. The play with the coincidence and the process generates new compositions during our work. We work analog and digital.

Material to bring to the Kick-Off

dictionary

Dictionary, laptop, scissors, cutter, metal ruler, pencil, Edding fat to narrow, thin, thick brush, thin brush ,USB stick, cutting pad, research material, adhesive tapes, line, Duct tape, thread, adhesive tapes, glue: Rubber Cement, sample papers,  magazines / notebooks, newspapers, stencils, Letraset, stickers, colored pencils, pastel pencils, pair of compasses, triangle ruler, cardboard, rubber, Bostich, Post-it ..

Expected Products
A  —

7

5 x Poster A3, 3 x A1,

XL (1260mmx 891mm) or
XXL (2100mm x 1485mm) optional

optional: AR (artivive app)
color: Black & white

B — Moving

Walls

Screens
2 Screens @ 45" (122cm x 69.5cm))
as one Screen:122cm x 139cm
programmed with processing

C — Documentation Format:

PDF A4Presentations
— interaction Anagram/Design/movingposter

 
printed & digital

Fonts for use as a base:
Helvetica, Favorit oder Swiss
GT Super, Century Schoolbook MT

Working form
The poster can be designed and programmed in a team (max 2 persons).
The exercises does each student individually.

Learning goals

Learning goals:

— playful learning
— learning by doing
— with simple methods and technics producing
     a variety of material
     only with letters in different fonts
— get to know and understand basic rules in composition

— capture the influence of word and image
— work processively and in the format
— talk about your own work
— work alone and in team
— learning from each other

Criterion of the evaluation

— motivation
— variety / combinations
— expressiveness and formal aesthetics
—

— design & interaction reactive wall +/- 40%
— documentations 25%
— presentations 10%
— poster prints B&W (A4, A3) 25%
and of course:
— motivation
— variety / combinations
— expressiveness and formal aesthetics
— expressiveness and formal aesthetics
— message


Books
— Geschichte des Plakates Histoire de l‘affiche History of the poster,  Josef und Shizuko Müller-Brockmann
— Generative Gestaltung entwerfen, programmieren, visualisieren, Hartmut Bohnacker, Benedikt Gross, Jul
— Postercollection, Lars Müller Publishers (verschiedene Ausgaben)
— Tissi & Odermatt, Swiss Posters, Waserverlag Zürich
— Tissi & Odermatt, Grafic Design, Waserverlag Zürich
— H. Knuchel/J. Nänni «BLUE. YELLOW. RED» colour anagrams 1991, Lars Müller
— Typo China mit einem Essay von Eva Lüdi Kong, Museum für Gestaltung Zürich, Plakatsammlung
— Posters by members of the Alliance Graphique Internationale (AGI) 1960 - 1985 ed. by Rudolph de Hara
— Plakat polski 1970-1978 [introduction: Zdzisław Schubert]
— Breaking the rules posters from the turbulent 1980s in Switzerland Plakate der bewegten 1980er Jahre
— Armin Hofmann mit einem Essay von Steven Heller, Museum für Gestaltung Zürich, Plakatsammlung
— Handmade mit einem Essay von Claude Lichtenstein, Museum für Gestaltung Zürich, Plakatsammlung
— Ralph Schraivogel mit einem Essay von Robert Massin, Museum für Gestaltung Zürich, Plakatsammlung
— Schwarz und Weiss mit einem Essay von Lars Müller Black and white with an essay by Lars Müller
— Visuelle Wahrnehmung = Visual perception, Jürg Nänni, Sulgen, Niggli
— Poemotion 3 Takahiro Kurashima, Lars Müller Publishers
— Optical Illusions and the visual arts, Ronald G. Carraher, Jacqueline B. Thurston
— Das Bild als Schein der Wirklichkeit, Herbert Schober, Ingo Rentschler, Moos Verlag München 
— See waw, Hans Knuchel, Jürg Nänni, Lars Müller Publishers

Links

— Anagramm

— https://ingesanagram.appspot.com/
— Anagramm-Generator de (Wort):

http

 https://

www

en.

nlp

anagramme-expert.

de/cgi-bin/anagrams/wordplay.cgi

com/
— DE, (mehrere Wörter) http://www.anagrammgenerator.de/
— Anagramm-Generator eng: http://www.wordplays.com/anagrammer
— https://www.grillitype.com/typeface/gt-super
— https://www.abcdinamo.com/front
— https://www.linotype.com/de/1549538/egyptienne-f-schriftfamilie.html
— https://lineto.com/
— https://www.milieugrotesque.com/
— blelb ist ein Labor für Gestaltung zwischen Kunst und Technik:
http://www.blelb.ch/
— Space type Generator:
https://editor.p5js.org/full/ryzpqAjKm
— chanching Fonts
https://www.standardabweichung.de/design/projekte/html5/design-font-chemical-munich

— Programming Fonts

https://issuu.com/jpagecorrigan/docs/type-code_yeohyun-ahn

Graphic Classics / Some Inspirations:
please google:
— Armin Hofmann 
— Moholy Nagy Typography
— Wolfgang Weingart Typography
— Emil Ruder
— Koichi Sato
— Max Bill
— Ralph Schaivogel
Graphic Now / Some Inspirations:
http://dia.tv/nike-basketball/
http://www.studiofeixen.ch/
http://www.therodina.com/ecstatic-trap/
http://a-g-i.org/
http://www.johnsonkingston.ch/index.php?/do-make
http://erichbrechbuhl.ch/
http://yaherd.tumblr.com/
http://hubertus-design.ch/
http://www.ludovic-balland.com/en/poster/0/poster.html
http://www.vier5.de/10/info.html
https://www.google.ch/search?q=na+kim&espv=2&biw=
1393&bih=775&source=lnms&tbm=isch&sa=
X&ved=0ahUKEwiwxK2aztfPAhXEsxQKHetIBwQQ_
AUIBigB£
http://www.ok-rm.co.uk/cat/selected
WHICH WALLS
https://intern.zhdk.ch/?wandgestaltung
https://intern.zhdk.ch/fileadmin/data_subsites/data_serviceportal/FM-Downloads/Gestaltung_von_Waenden__Reglement_und_Anhaenge.pdf
KLEISTERN
https://www.youtube.com/watch?v=hLr-8vETkvI
A MOVING POSTER COLLECTION
http://www.themovingposter.com/—
ARTIVIVE APP
https://artivive.com/
Inspiration films ;) (concerning the theme play and coincidence )
Adriano Celentano:
https://www.youtube.com/watch?v=G96luhHhxnI
https://www.youtube.com/watch?v=-VsmF9m_Nt8
Fischli Weiss, Der Lauf der Dinge:
https://www.youtube.com/watch?v=L_HWDQxcngE
Michelangelo Antonioni, Professione Reporter, Final Scene :
https://www.youtube.com/watch?v=pvbqy8FZq8Y

Image Added

II

Typo & Icons

Image Removed

Rebecca Morganti-Pfaffhauser

In the second part of GDB you will go with a

clear

chosen style on a virtual Citytrip.

Explore 3 Brands that

You first dive in to the worlds of brands. Second you will choose one brand and then get to know it. Third: you design a city guide with the look of your chosen brand.

A
Explore 2 brands that have a strong and clear visual identity which you like allot. These brands can come from fashion,

automotive

visual designers, search engines, automotives, places, newspapers, events etc.

Fashion: Chanel, Louis Vuitton, Moncler, Vetements etc.
Automotive: Ferrari, Maserati, Fiat etc.
Watches: Patek Philippe, Rolex, IWC etc. Nike, Adidas, 

...

Explore 3 luxury brands or premium brands that have a strong and clear visual identity. These brands can come from fashion, automotive, watches, jewelery, cosmetics etc.

Example brands

Fashion: Hermes, Chanel, Louis Vuitton etc. Automotive: Ferrari, Maserati, Aston Martin etc. Watches: Patek Philippe, Rolex, IWC etc. Alcoholic beverages: Richard Hennessy, Chateau Lafite Rothschild, Dom Perignon etc.

Exercise 01.2

Create a Moodboard with the essential, visual parameters of each of the 3 brands, from which the look & feel of the brand is readable.

Moodboard content

01 word mark, figurative mark or word/figurative mark

02 primary colours and secondary colours of the corporate design

03 fonts of corporate design

04 corporate design elements

05 materiality of the products

06 design language of the products

07 images

08 etc.

Moodboard media

All media are welcome

Exercise 01.3

Find the used fonts and name them.

Example tools

www.myfonts.com/WhatTheFont

www.identifont.com

Result

font, font style and application area

Exercise 02.1

Explore for the following terms pictograms and / or icons.

Terms

01 hotel

02 dinner / meal

03 coffee

04 nightlife

05 shopping

06 entertainment

07 recreation

08 visitor attraction / sight

09 map

Number of pictogram / icon

at least 5 to each term

Books

https://www.amazon.de/Zeichensysteme-visuellen-Kommunikation-Architekten-Organisatoren/dp/3433026505/ref=sr_1_8?s=books&ie=UTF8&qid=1543562985&sr=1-8&keywords=otl+aicher

https://www.amazon.de/Piktogramme-Icons-Pflicht-oder-Kür/dp/3874396495/ref=sr_1_2?s=books&ie=UTF8&qid=1543563119&sr=1-2&keywords=piktogramm+icons

https://www.amazon.de/Mensch-seine-Zeichen-marixwissen/dp/386539907X/ref=pd_sim_14_1/260-5127393-7767659?_encoding=UTF8&pd_rd_i=386539907X&pd_rd_r=59c231a3-33ee-4735-b0f7-924e010f0cc9&pd_rd_w=Cweg1&pd_rd_wg=TQAzl&pf_rd_p=cf60832e-60a2-4831-ae77-b58b4652b054&pf_rd_r=CVB0T4P6TZEE9WJZGJJW&psc=1&refRID=CVB0T4P6TZEE9WJZGJJW

otl eicher

sbb https://museum-gestaltung.ch/de/ausstellung/sbb-cff-ffs/

Zeichen und Signete

Novum Press

Exercise 02.2

Select a brand from exercise 01.1. For this brand, develop two different icon families for the terms in exercise 02.1.

Phase 01

First create analog sketches of the terms.

Phase 02

After phase 01, convert two icon families digitally.

Tools phase 01

Paper, pen

Tools phase 02

Illustrator

Example pictogram family

Image RemovedImage Removed

https://www.iconfinder.com/iconsets/aiga-symbol-signs

Exercise 03.0

Your selected brand knows your customers and their needs very precisely. For this reason, they are developing a city guide app to accompany their customers when traveling with tips and services. It is important to notice the brand, but not by the frequent placing of the logo, but by applying the visual parameters such as fonts, colors, elements etc.

Exercise 03.1

The introduction to the City Guide goes through the inspiration of several cities in word and image through which the user can swip. Two further screen situations are intended to encourage the user to browse through the individual City Guides and to refer
to the website.

Image Removed

Image material
Find pictures of the different cities in order to put them in the background. Consider, if possible, the language of the brand.

Text

Screen 01: NEXT GUIDE LONDON DISCOVER THE CITY GUIDE

Screen 02: IT´S 9PM CAPE TOWN THE PERFECT TIME TO SAVOUR DELICIOUS DISHES AT THE GREEN HOUSE. DISCOVER THE CITY GUIDE

Screen 03: NOW IN SYDNEY TROPFEST INTERNATIONAL SHOWCASE FOR SHORT FILMS DISCOVER THE CITY GUIDE

Screen 04: MEXICO CITY 150 MUSEUMS CAN BE EXPLORED HERE DISCOVER THE CITY GUIDE

Screen 05: FEEL LIKE TRAVELLING? BROWSE THE CITY GUIDES

Create a moodboard (A4 landscape format) with the essential, visual parameters from each of the 2 brands, from which the look & feel of the brand is readable.

Contents
1 word mark, figurative mark or word/figurative mark, Title
2 primary colors and secondary colors of the corporate design
3 fonts of corporate design
4 corporate design elements
5 materiality of the products
6 design language of the products
7 images
8 Find the used fonts and name the font, font style and the application area.
Example tools
www.myfonts.com/WhatTheFont
www.identifont.com
9 ...

B
Select one brand of phase A. Explore for the following terms pictograms and / or icons. Design at least 5 pictograms to each term which fit to the chosen brand. First create analog sketches, then convert the icon families digitally with Illustrator.

1 hotel
2 dinner / meal
3 coffee
4 nightlife
5 now
6 entertainment
7 discover
8 visitor attraction / sight
9 map

C
Create a City Guide with the look and feel of your selected brand. It is important to notice the brand, but not by the frequent placing of the logo, but by applying the visual parameters such as fonts, colors, elements etc.

— Home / Welcome screen 
— City Screen
— Discover Screen
— Map
— ...


Image Added

Expected Products
A —Moodboard 
A4 landscape format
printed & digital

B — Icon families
A4 portrait format
printed & digital

C — City guide design
A4 portrait format
printed & digital
(one page, full size A4)

Working form
The exercises does each student individually.

Learning goals
— get to know brands
— appearances of brands
— simple layouts
— basic icon / pictogram design
— first steps screendesign mobile

Criterion of the evaluation
— design icons / icon families +/- 40%
— design city guide +/- 30%
— design mood board +/- 10%
— presentations +/- 10%
— documentations +/- 10%

Image AddedImage Added

Books:
— Zeichensysteme der visuellen Kommunikation: Handbuch für Designer, Architekten, Planer, Organisatoren, 1. Januar 1996 von Otl Aicher(Autor), Martin Krampen(Autor)

— Piktogramme und Icons: Pflicht oder Kür? Gebundenes Buch – 1. Juli 2005 von Rayan Abdullah(Autor)  Galeriegeschoss 288- 50 Regal G45.2
— Der Mensch und seine Zeichen (marixwissen) Broschiert, 2013 von Adrian Frutiger(Autor)

— Fahrgastinformationssystem : Gestaltungshandbuch für die Schweizerischen Bundesbahnen : design manual for the Swiss Federal Railways = Passenger Information System

Josef Müller-Brockmann, 1914-1996; Andres Janser, 1961-; Museum für Gestaltung Zürich; Shizuko Yoshikawa und Josef Müller-Brockmann Stiftung

— Josef Müller-Brockmann : ein Pionier der Schweizer Grafik Lars Müller, 1955-; Josef Müller-Brockmann, 1914-1996

Links
https://www.iconfinder.com/iconsets/aiga-symbol-signs
www.myfonts.com/WhatTheFont
www.identifont.com
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm

https://snazzymaps.com/build-a-map



Moving Poster Template 

https://github.com/IAD-ZHDK/Moving_Poster_Template

Screen arrangement

Image Added

Schedule

Week 1Tuesday 26.11Wednesday 27.11Thursday 28.11Friday 29.11
Morning

Graphic Design Lab (LF / RMP)
09.30 Kick-Off @ Nieves
Köchlistrasse 5

11.30 Material Lab RMP 4.K15
— Anagramm it / two words same letters

— Find anagrams 

Graphic Design Lab (RMP) 4.K15
09.00

How to work in to the format
10.00 Illustrator crash course
(

Material Lab RMP — warm up

/  Idea sketch)


 — Material-Lab 1 / A11

Graphic Design Lab (RMP) 4.K15
09.00 presentations Blowups Plenum
10:00 Illustrator crash course 
— fixing Anagramm 
— idea Anagramm combined with processing skills

Graphic Design Lab  (LF / RMP)
09.00–12.00 Mentoring
— Anagramm & Processing sketches
Afternoon

13:00 — Programming basic with (LF)

Graphic Design Lab  
Independent study
— Material-Lab 2 / Blowup

Graphic Design Lab
Independent study
— Typo-word combined with processing idea

Graphic Design Lab (RMP)
13:00

Input some Type

Basic Poster Rules

15:00 IAD Alumni Seminar.


Week 2Tuesday 3.12.Wednesday 4.12.Thursday 5.12.Friday 6.12.
MorningGraphic Design Lab
Independent study
— Material-Lab combined with
processing 
processing
opt. mentoring RMP

Graphic Design Lab (Benjamin / LF / RMP) 4K15

08

09:

30–11

00–11:30 — Presentation (Design & Idea)
— state pf project
— favourite A3's

Graphic Design Lab (RMP)

08:30–11:30

09.00–12.00 — Mentoring 
— state pf project
—

favourite

favorite A3's

—
Delivrables
Deliverables:
 11
 5 A3 print and 3 A1 prints per Person
(Black and White) for the Wall planning!

Graphic Design Lab 4K15 (RMP)
09.00 4K15 — short Input Artivive App 


& Indesign (optional) RMP
— Wall planning
— guidelines documentations

Afternoon13
:
.00 — Programming basic with (LF)

Graphic Design Lab  
13.00 — 17.00 Independent study


Graphic Design Lab
13.00 — 17.00 Independent study

13

:

.30 — 17

:

.00 (LF)
— Mentorings
— Artivive App (fakultative)
— reacting Poster,
Documentation A4

Week 3Tuesday 10.12.Wednesday 11.12.Thursday 12.12.Friday 13.12.
Morning

Graphic Design Lab (RMP
09

.00  — pasting the wall

:00 getting prepared for the presentation, finalizing moving poster

Graphic Design Lab
09.30-11:30 — final Presentation
Project Room IAD
Moving Posters LF & RMP

Typo & Icons

09.00 — 12.00

Kick-Off


pasting the wall

Typo & Icons

09

10.00

— 12.00 optional mentoring

presentations Moodboards
Start Icondesign

Typo & Icons
13.00 — 17.00
Independent Study

Afternoon

13

:

.00 — Programming basic with (LF)

Graphic Design Lab
Documentations
13.00 — 17.00 Independent study

Typo & Icons

13.00 — 17.00 Independent study

14.00 Kick-Off @
Museum für Gestaltung 



/Week 4Tuesday 17.12.Wednesday 18.12.Thursday 19.12.Friday 20.12.
Morning

Typo & Icons
09.00 —

12.00 Mentoring

11:30 Mentoring & Presentation Moodboards and state of Icons

Typo & Icons
09.

00 — 12.00

00  short presentations Iconfamiliy

Mentoring

Input Indesign (optional)


Typo & Icons
09.00 — 16.00 Independent study

((10:00 Testing and Installation @ Nieves (LF / RMP)))

Typo & Icons
09.00 — 12.00 Final presentation

Afternoon

Typo & Icons
13.00 — 17.00 Independent study

Typo & Icons
13.00 — 17.00 Independent study

17.00 Graphic Design Lab
(LF / RMP / BS)
presentations @ Nieves


Graphic Design Lab +
Typo & Icons
Documentations
13.00 — 17.00

I































RMP: Rebecca Morganti-Pfaffhauser, LF: Luke Franzke, BS: Benjamin Sommerhalder
red texts: not sure with number and Formats... will be set soon (smile)