¶ Beginning Graphic Design
Kurzfilmsammlung Beginning Graphic Design des Youtube-Kanals LearnFree, die kompakt und charmant in die Grundlagen des Graphic Designs einführt. Weiter unten kommen auch noch Beiträge zu Layout und Typografie.
Wenn Sie noch ein bisschen Zeit haben, empfehle ich noch diese beiden Videos / Serien:
- Und immer wieder die wirklich ganz vorzügliche Kurzfilm-Serie „Everything is a Remix“ von Kirby Ferguson. Alle Teile sind toll und gerade wurden sie frisch... ge-remixt. Hier ist der 2021er Remix (nur auf Youtube):
Die Kurzfassung: in der Kunst und im Design ist das meiste ein Remix vorheriger Ideen. Meist beginnt man schlicht mit Kopien, dann mit Kombination und idealerweise kommen irgendwann eigene Ideen hinzu.
¶ Quellen für Videos, Musik, Sounds, Tools
Wir experimentieren auch mit AI-Methoden, aber vieles gibt's ja auch legal im Netz zum Benutzen. Hier eine kleine Auswahl.
- Videos & Fotos Pixabay · Pexels · Archive.org (vor allem für historische Filme)
- Sounds Freesound.org
- Musik Incompetech.com · Free Music Archive · Soundcloud (nicht alles, nach Creative Commons suchen)
- Schnitt Adobe Creative Cloud · DaVinci Resolve · Luma Fusion · Avid Media Composer First · Vegas Pro · Final Cut Pro · Kdenlive · Shotcut
- Zeichnen Clipstudio Paint · Easy Paint Tool SAI (90s alert)
- Pixel. Es muss nicht immer Photoshop sein. Checkt z.B. mal Krita, Asesprite (Trial) oder PixilArt (direkt im Browser)
- Sound Tools Audacity · Reaper (free DAW) · Garageband (MacOS) · Ableton (30 days trial) · FL Studio (Demo)
- Vektorgrafik Omni Graffle · YED · Affinity Designer · Inkscape · Sketch (Mac, kostenpflichtig)
¶ Layouts und Rastersysteme (Layout & grids)
Layout- und Rastersysteme sind der Knaller, um Ihr Design zu standardisieren und so die Produktion dramatisch zu vereinfachen. Als erste Einführung in Layouts würde ich das hier empfehlen:
Rastersystem (Wikipedia: Gestaltungsraster) allerdings gehen noch viel weiter. Wie Kästchenpapier oder Lego bieten sie festgelegte Felder oder Bausteine, aus denen Layouts und Seitengestaltungen zusammengebaut werden können.
Ein Standardwerk ist Josef Müller-Brockmanns „Rastersysteme für die visuelle Gestaltung“, aber das ist eher was für (Buch-) Profis.
Eine essentielle Einführung in die Grundlagen rasterbasierter Software-Gestaltung findet sich in Google / Androids „Material“-Regelwerk. Dort werden auch viele andere Basics erklärt. Wer irgendwie mit Software-Frontends zu tun haben möchte, sollte das mal durchackern.
¶ Schrift
Auch hier gibt es eine wirklich schön gemachte Einführung von LearnFree.
Meist geht’s erst mal darum, möglichst gut gemachte und gut lesbare Schriften zu verwenden, damit man Ihre Sachen gerne liest… und sich zum Beispiel bei einem Bewerbungsschreiben für Sie entscheidet. Gute Schriften sind oft ganz schön teuer, aber zum Glück gibt's …
¶ Portale für kostenlose Schriften
Eine der beste Quellen für professionelle, hochqualitative und vor allem kostenlose Schriften. Diese Schriften bei Google sind übrigens gar meist gar nicht von Google, aber Google hat hier eine sehr hervorragende Auswahl zusammengestellt. „Open Sans“ und „Martel“ sind die aktuellen Hausschriften der HAW Hamburg und dort kostenlos ebenfalls erhältlich.
Da sind tolle Sachen dabei. Bisweilen lohnt Vorsicht: manche Schriften haben keine Sonderzeichen (ä ö ü ß) , sind nicht von hoher Umsetzungsqualität oder manchmal sind die Lizenzen auch nur frei für private Nutzung. Vorm Benutzen checken! Man muss viel suchen, kann dann aber auch tolle Sachen finden.
- Hier eine Auswahl sehr guter Sans-Serif Schriften auf Google Fonts.
- Hier ein paar Muster für Zusammenstellungen aus Schriften und Farben, direkt mit Code. Ich stimme nicht mit allen Auswahlen überein, aber das ist ja letztlich auch Geschmackssache.
Crashkurs: bessere Typografie in 10 Minuten und Butterick's Practical Typography
Schriftbestimmung. Klappt nicht immer, aber bisweilen schon: MyFonts’ What the Font!
¶ The 8-bit arcade font, deconstructed
Wieder mal so ein Vox-Design-Kurzfilm, der gleich ein ganzes Bündel designrelevanter Themen behandelt: Schriftkultur generell (sehr kurz), Arcade-Game-Kultur, die dazu passenden 8-Bit-Pixel-Schriften, die dafür nötigen Raster und Adressräume und einige Besonderheiten westlicher und japanischer Schriftkultur. Nicht schlecht für etwa 8 Minuten!
¶ Typografische Stolpersteinchen
- Benutzt keine falschen Apostrophe
- Richtige Anführungszeichen, falsche Anführungszeichen
- Bindestrich, Gedankenstrich und Streckenstrich
¶ Bonus: Sometimes bad typography (and bad graphic design) really hurts people
Ja, okay, ich bin ein Sucker für diese Vox-Design-Kurzfilme. Aber die sind auch wirklich sehr gut geschrieben und erzählt. Hier geht es um eine dunkle Seite von Design. Das können so vergleichsweise harmlose (aber superpeinliche) Momente sein wie diese Oscar-Verleihung. Und wenn man die grausig schlechte grafische Gestaltung der Presenter-Karten sieht, wird wirklich klar, dass es vor allem die Schuld der Designer war. Aber es geht noch weiter: schlechte Gestaltung kostet manchmal ganze (US-)Wahlen oder sogar Menschenleben (bei Fehlbedienung der Bedienelemente von Autos und anderen Maschinen zum Beispiel).
¶ Farbe
Die 5 einfachsten und wichtigsten Prinzipien, entspannt und anschaulich erklärt.
Die Vortragsfolien hier. Sehen hübsch – und hübsch bunt – aus, erklären sich aber stellenweise nicht wirklich selbst. Schauen Sie vielleicht lieber die Links direkt durch:
- Dietrich Zawischa: Grundlagen der Farbenlehre
- 10 Best Uses of Color of All Time (CineFix 2017, Video)
- Kapitel „Farbe“ von Thomas Stapelkamp (nur abrufbar auf dem Campus oder mit VPN)
- Jennifer Janviere: Farbanwendung und Farbpsychologie
- Wikipedia: Farbperspektive
- Movie Bar Code – Die Farben ganzer Filme als Grafik
Palettengeneratoren, Farbwähler
Paletton – hat eine Einstellung für Farbfehlsichtigkeiten
- Naturalpalettes Tumblr – sehr schöne Farbpaletten aus Naturaufnahmen
- Palette Generator – erstellt eine Palette aus Euren Bildern
- Coolors.io – Paletten in Images festlegen
- Colorpicker.com – solider Web-Colorpicker
¶ Die Kunst des (Film-)Titels
The Art of the Title - Fast durchwegs fantastische Beispiele für die Kunst des Film- oder Fernsehtitels. Anspieltipps: Psycho, Dr. No, Goldfinger, Casino Royale, Skyfall, Seven, Casino, Cape Fear, Fight Club.
Schöner Kurzfilm über Saul (und die viel zu wenig genannte Elaine) Bass, zwei prägende Titel-SequenzgestalterInnen.
¶ Besser schreiben
Tipps:
- Rechtschreibprüfung per duden.de, aber am besten über Google und "site:duden.de" und Suchbegriff.
- Zur Zeichensetzung (vor allem Kommas) gibt's kleine Duden-Extrabücher.
- Solide Textverarbeitung mit deutscher Rechtschreibprüfung und Silbentrennung installieren.
- Wolf Schneider ist der große alte Fuchs für gutes (journalistisches) Deutsch. Hier eine Voransicht eines seiner Bücher.
- Dies sind eher Ratschläge für gute „journalistische" Schreibe. Manche wissenschaftliche Artikel werden nicht alle diese Ideale einlösen können – und müssen das auch nicht. Fast jeder Text wird aber durch diese Hinweise besser.
- Mein Vortrag handelt neben diesen Hinweisen zur besseren Schreibe auch noch vom richtigen Zitieren (siehe weiter unten).
¶ Besser Suchen
Einfach nur Suchbegriffe bei Google eingeben ist zwar nicht die schlechteste Strategie... aber auch nicht die beste. Hier sind ein paar Tricks der Profis:
- Google-Suchen verfeinern – mit diesen Zusatzbefehlen können Suchen merklich verfeinert werden. Top-Trick: "site:haw-hamburg.de" ;)
- Google Books – teilweise Volltextsuche oder zumindest Blick ins Buch. Tag-Clouds und vieles mehr.
- Google Scholar– es gibt viele spezialisierte Varianten der Google-Suche. Dieses hier ist die akademische, die nach wissenschaftlichen Artikeln, Büchern und sogar Patenten suchen kann.
- HIBS – HAW Bibliothek(en)– die HAW hat eigene Suchkataloge. Die sind zwar meist wesentlich störrischer als Google, aber dafür kann man sich damit nahezu jedes Medium auf den Campus schicken lassen. Ebenso dort die Links zu ganz vielen ausgezeichnete Portalen und E-Books im Direktzugriff. Teilweise nur auf dem Campus (oder mit VPN) nutzbar.
- Worldcat.org – die weltweite Variante. Findet auch Bücher, bei denen Amazon schon lange aufgegeben hat.
¶ Bessere Diagramme und Tabellen
Zwei wunderbare Beispiele, wie Sie Diagramme und Tabellen wirkungsvoll „entmüllen“ und vereinfachen können.
Diagramme: http://darkhorseanalytics.com/blog/data-looks-better-naked/
Tabellen: http://darkhorseanalytics.com/blog/clear-off-the-table/
Und hier die wichtigsten Fallen bei der Nutzung von Diagrammen: How to spot a misleading graph (TED Ed)
¶ Richtig zitieren
- Ein guter erster Anhaltspunkt ist die ISO-Norm 960
- Ich bevorzuge APA-Stil. Viele Ingenieur*innen / Kolleg*innen bevorzugen IEEE-Stil.
- Alles Weitere: https://www.scribbr.de/category/richtig-zitieren/
¶ Was darf ich zitieren?
- Die Kurzfassung: als Studierende so ziemlich alles. Sogar, ohne die Urheber*innen vorher zu fragen. Aber auf jeden Fall mit der Verpflichtung anzugeben, woher Sie die Sachen haben (sonst ist es sofort richtig verboten – Plagiat).
- Genauer wird's hier erklärt: Urheberrecht und Wissenschaft: Was muss ich als Autorin/ als Autor wissen?
Dort: „Zitieren im wissenschaftlichen Kontext“. - Es ist unwahrscheinlich, dass Sie für ein akademisches Zitat Ärger mit Rechteinhaber*innen bekommen werden. Bei kommerziellen Projekten sieht das aber anders aus.
- Hier ein besonders erschütterndes Beispiel, das gleichzeitig auch ein tolles Beispiel für Remix-Kultur und die Fallstricke hinter „Appropriation“ bringt. „Fair Use“ gibt es im deutschen Recht so nicht. Wir haben aber das oben beschriebene Zitatrecht.
- Video: Andy Baio: Cut, copy, paste (CreativeMornings/PDX)
- Artikel dazu: Waxy.org: Kind of Screwed
¶ User Interfaces
- Kleine Übung: suchen Sie eine nervige Software-Funktion und stellen Sie sie in einer Minute vor.
- Schauen Sie die folgenden Videos.
¶ Crashkurs UI- / UX-Design-Geschichte
¶ It's not you. Bad doors are everywhere.
¶
Eine Kurzeinführung in gutes / schlechtes Anwendungsdesign (User Experience Design) und den „Erfinder“ des Phänomens, Donald Norman. Schlechte User Experience und schlechte User Interfaces gibt's genauso in der Realität als auch bei Software.
extra 3 – Realer Irrsinn: Neue digitale Stromzähler
Es ist leicht, sich hierüber lustig zu machen, weil der Aufruf dieser Interfaces wirklich besonders schrullig und AnwenderInnen-unfreundlich ist. Dennoch, es ist ein ausgezeichnetes Beispiel dafür was passiert, wenn man mit einer technischen Idee keine Anwenderinnentests macht (oder mal eine UI/UX-DesignerIn um Rat fragt). Die 3% AnwenderInnenquote sind ebenso ein guter Hinweis darauf, wieviele Leute solche Interfaces tatsächlich nutzen... was aber dennoch keine derart schlechten Lösungen rechtfertigt.
¶ Everything is a Remix Case Study: The iPhone
Dieser Kurzfilm aus der Reihe erklärt am Beispiel des iPhone sehr gut und knapp, welchen Quantensprung das Smartphone bedeutet, wie neue Interfaces erst Vorhandenes nachempfinden und sich dann schrittweise davon befreien.
¶ Everything is a Remix (Teil 3 Original Series)
Um Kreativität ranken sich zu viele Mythen. Oft sind Elemente des Erfolgs: einfach nicht locker lassen. Kopieren ist gar nicht böse. Der gesamte Xerox- / Macintosh-Teil erklärt gut die Interface-Geschichte in den 1980ern.
¶ Minority Report’s gesture-based user interface
(Die Videos ändern sich wegen ©-Strikes dauernd. Sonst schauen Sie halt nach dieser Topic.)
Eine gute Zusammenfassung der ganzen Ideen von 2002. Knapp 5 Jahre später hatte sich das dann quasi erledigt: Apples iPhone von 2007 bringt die meisten dieser Ideen als ultra-transportablen (und später auch IP-vernetzten) Minicomputer auf den Markt. Wifi konnte Hollywood allerdings offenbar nicht voraussehen; der putzig umständliche „Glasdatenträger“ wirkt jetzt schon fast historisch. Die leuchtenden Fingerkuppen finden sich nun in Multitouch-Interfaces auf den Glasscheiben von Smartphones oder Tablets.
Dennoch, Herumgewirbele im Raum ist nicht tot: es spielt mit den entsprechenden Controllern in manchen VR-Anwendungen eine Rolle... und ist dort ähnlich schweißtreibend. Manchmal sogar absichtlich
¶ Buchtipp
Für einen fundierten Einstieg in ein Thema finde ich es nach wie vor ergiebig, mal ein Buch durchzuackern. Die sind beim Thema Design meist auch noch angenehm zu lesen und hübsch bebildert. Dieses hier enthält für alle Formen von Design nützliche Prinzipien:
- Lidwell, W., Holden, K., & Butler, J. (2004). Universal Principles of Design. Auch auf deutsch: Design: Die 100 Prinzipien für erfolgreiche Gestaltung. Der Link führt zu einer unvollständigen, aber durchaus nützlichen Voransicht in Google Books.
Und das hier ist eine gute Kurzeinführung in das Feld Interaction Design:
- Saffer, D. (2006). Designing for Interaction: Creating Smart Applications and Clever Devices.
Der Link führt zu einer unvollständigen, aber durchaus nützlichen Voransicht in Google Books.
¶ Crashkurs UI- / UX-Design
¶ (Interaction) Design: wie geht’s denn nun eigentlich?
Die ganz kurze Kurzfassung aus meiner Praxis:
- Für wen mache ich hier eigentlich was? Man kann es nicht allen recht machen, aber 70-85% schon. Wenn man weiß, wer das sein soll. Auch wichtig: für wen machen wir das nicht?
- Wie machen die Anwender*innen das aktuell?
- Recherche: Was gibt’s?
- Kann man das auch anders machen?
- Kann man das einfacher machen?
- Analysieren. Sortieren. Aufräumen. Entmüllen.
- Das Wichtige nach oben / vorn. Das Unwichtige: weglassen oder versteckeln.
- Normans Ideationskreis: Observe! Ideate. Prototype. TEST!!! Do it again. Do it again. Do it again ...
¶ Riot Games Edu: So You Wanna Make Games?? – Episode 9: User Interface Design
Mehr dazu aus dem Bereich Games? Selbst Videospiele machen (Beta)#UserInterface(UI)Design
¶ Software Interface Design Guidelines
- Google Android's Material Design ist aktuell wahrscheinlich das beste Mobile OS.
- Apples Human Interface Guidelines sind aber auch nicht übel.
- Beide sind gleichzeitig auch sehr gute Beispiele für ganze Software-Design-Systeme.
¶ Interaction Design Foundation
- Stolpert man früher oder später immer drüber. Enthält wirklich viele gute Artikel.
- Hier ist ein guter Einstieg: https://www.interaction-design.org/literature/topics
- Lieber nicht Mitglied werden, die wollen Ihnen kostenpflichtige Kurse verkaufen.
¶ Mobile Patterns
Eine Seite mit Gestaltungsprinzipien (Patterns, „Muster“) für mobile Devices
http://www.mobile-patterns.com
¶ Crappy User Interfaces
Der Sitzball ist seehr seltsam, aber die Beispiele (hauptsächlich softwarebasierte Entertainment-Interfaces) sind sehr gut kritisiert.
¶ Lessons Learned from VR Prototyping (2016 VRDC Talk)
Ein ganz gutes Beispiel für diese Art von Konferenz-Lernvideos.
Davon gibt's eine Unzahl bei Google, Apple, Unity und hier bei der Game Developer Conference (GDC).
¶ Basics of (Game) Design
„07 Gamedesign für Welpen“, in unserem Vorträge-Ordner.
Dieser kleine Vortrag erzählt ein paar Grundlagen des Game Designs. Manches ist ziemlich naheliegend (Übung macht MeisterInnen... – stimmt aber trotzdem), manches ist sogar recht deep (z.B. gutes Design hat am Ende einfache Regeln und wirkt deshalb elegant).
Vor allem ist die Idee aber, und das gilt für fast alle Arten von Medienproduktionen: fangen Sie eher klein mit etwas an, das Sie gerne mögen. Und versuchen Sie das dann soweit zu zu entwickeln, dass Sie es anderen Leuten auch zeigen können. Auf diese Art fangen Sie möglichst früh an, Ihr eigenes Portfolio und auch Netzwerk aufzubauen.
Präsentationen
Alle Teams präsentieren in jeweils etwa 5 Minuten ihre Videos.
Bitte prüfen Sie vorher, welche Computer dafür genommen werden. Es ist ein gute Idee, die Dateien auf einem Rechner oder im Web zu sammeln, damit nicht viel umgestöpselt oder langwierig eingeloggt werden muss.
Hier noch … Die Geheimnisse einer guten Präsentation
¶ Bonus-Inhalte
Hier noch Bonus-Inhalte, die wir im Kurs aus Zeitmangel nicht anschneiden konnten.
¶ Images
¶ Branding & Corporate Identity
¶ Bonusmaterial für angehende MeistertypografInnen:
Robert Bringhurst’s “The Elements of Typographic Style”
Typo-Humor und Nerd-Futter
- Themen: Serifenschriften und Sans-Serif-Schriften – Helvetica vs. Arial – Trajan, die Filmplakat-Schrift „Trajan" – eine kleine (aber nur bedingt gut gemachte) Comic Sans-Doku http://buildinternet.com/2009/12/a-handful-of-fascinating-typography-tidbits/
- College Humor: Schriftkonferenz
- Helvetica - The Film https://www.hustwit.com/helvetica/
¶ UX
¶ Verstörender Bonus-Content: CyberSex 1994!
Stahl Stenslie, Kirk Woolford (1994). CyberSM, The 2nd Experiment, 1993-94.
¶ Steve Jobs Introducing The iPhone At MacWorld 2007
Das muss man nicht komplett angucken und mancher Pathos von Jobs ist auch schwer zu ertragen. Dennoch, er hat ein paar wichtige (und richtige) Punkte: das Smartphone ist auch deshalb so bedeutsam, weil es den Triumph der komplett flexiblen Glasoberfläche (des „white Canvas“, also der „weißen Leinwand“) über festgefügtes, spezifisches Hardware-Design markiert.
¶ UI/UX Design Iron Man
Beispiele für zeitgenössische Holo-Interface (eher in der zweiten Hälfte). Meine These: das ist ein letztes Aufbäumen der Ideen der letzten 50 Jahre, und zwar sowohl hinsichtlich der WIMP- oder Star-Wars-Holo-Interfaces als auch der (meist männlichen) Dominanzfantasien.
Die Realität ist schon lange viel vernetzter, mobiler, viel weniger in Laboren (oder „Bat-Caves“) als viel mehr in Wohnbereichen, zum Teil tatsächlich sprachgesteuert (aber noch lange keine echten Dialoge), zum Teil „Wearable“ (am Körper getragen, also Smartphones, Watches, Gadgets) und zum Teil in virtuelle oder reale Umgebungen augmentiert.