Coding
Vorbereitung
22. März
- Kursübersicht (PDF)
- Tools (PDF)
- Code Bausteine (PDF)
- Code Inspector und Pseudoklassen/-elemente (PDF)
- MDN Pseudo Elements CSS
- MDN Pseudo Klassen CSS
6. April
- Buttons und Transitions (PDF)
- CSS-Tricks Background-Image
- CSS-Tricks Perfect Full Page Background Image
- 100%-breiten Bildern
- Background Image in CSS Übung
- CSS-Position (YouTube-Video)
- Positionierung
Mit der Eigenschaft position können Elemente aus dem normalen Fluss entfernt und an jeder beliebige Stelle des Viewports positioniert werden. Ein Link zu Positionen. Auf andere Elemente haben positionierte Elemente keinen Einfluss.
3. Mai
- MDN Viewport Metatag
- CSS Transitions (PDF)
- MDN Transitions
- MDN Using CSS transitions
- CSS Trasforms (PDF)
- MDN CSS-Transform
- SVG (PDF)
- MDN SVG-Tutorial
- Pixel und Device-Pixel-Ratio DPR (PDF)
- Media-Query (YouTube-Video)
- Animierte Verschiebung Übung
- «3D-Effekt» mit box-shadow Übung
- Verschachtelte Elemente mit Delay Übung
18. Mai
- Flexbox und Grid (PDF)
- Grid Units (PDF)
- MDN Flexbox
- CSS Flexbox
- CSS Tricks Flexbox
- Flexbox Froggy
- MDN Grid
- CSS Grid
- Grid by Example
- CSS Tricks Grid
- MDN Grid CSS Properties
14. Juni & 15. Juni
- DrawBot
- Daily DrawBot
- Drawbot: Intro
- Drawbot Funktionen (PDF)
- Getting Started with DrawBot
- Colors (PDF)
- Python for Designers
- The Coding Train (Dan Shiffman)
- Plus Gleich (PDF)
- Rotate Translate (PDF)
DrawBot ist geeignet für Print und animierte GIFs.
30. August
- OpenType features in CSS
- Wakamaifondue
- HTML Sonderzeichen
- HTML Symbole
- Problems solved by OpenType (YouTube-Video)
- Velvetyne
- Übersicht über Events
- Add Event Listener
- Programmieren mit p5js für Anfänger (YouTube-Video)
- p5js
- p5js Editor
- Open Processing
- The JavaScript library
- matter js
- three.js
kleiner Einschub CMS
28. September
- Web Apps mit Open Data (PDF)
- API Call mit JavaScript (PDF)
- CSS-Animation (YouTube-Video)
- Easing functions
- Beispiel CSS-Animation: Studio Feixen
19. Oktober
UI Design
«The Design of Everyday Things.»
Donald A. Norman
Vorbereitung
23. März
- Prototyping 1 (PDF)
- The Anatomy of a Thousand Typefaces
- Lineto Type Foundry
- Web Design is 95% Typography
5. April
20. April
- Prototyping 3 (PDF)
- Apple Human Interface Guidelines
- Podcast «Design Details»
- Sidebar
- Lottie Files
- SF Symbols
17. Mai
27. September
- Prototyping 5 (PDF)
- Datensätze
- Datensätze Selektion
- What's new from Config 2024
- New in Figma (YouTube-Video)
- Google Sheets
18. Oktober
1. November
6. Dezember
Typo-Tech
19. April
- Einstieg Thema Lesen (PDF)
- Leserlichkeit
- Leserlichkeit (PDF)
- Webfonts und flexible Schriftgrössen im CSS (PDF)
- Schrift am Screen und Hinting (PDF)
- Flexible Grössen per CSS einstellen (PDF)
- Digitales Lesen
- Digital Lesen (PDF)
- Buch «Buchstaben im Kopf. Was Kreative über das Lesen wissen sollten, um Leselust zu gestalten.»
von A. Cornelius - Legibility (Talk von Sophie Beier mit Forschungsergebnissen)
- Coding — die @font-face Regel
- font-sizes
- OT Features im CSS
- Leserlich
- Fünf Filme zeigen die Welt mit Sehbehinderung
1. November
- Projekt – Aufgabe und Material
- Variable Variationen (Video)
- Variable Variationen Beispiele (Video)
- Einführung in variable Schriftarten im Web
- Variable Fonts
- MDN Variable Fonts Guide
- What can my font do? – Analyse-Tool für Variable Fonts von Roel Nieskens
- Google Variable Fonts Links von Roel Nieskens
- Variable Fonts (YouTube-Video)
- Fremd gehostete Fonts (YouTube-Video)
- Eine Variable Font von Google Fonts einsetzen (YouTube-Video)
- Variable Font Eigenschaften mit CSS steuern (YouTube-Video)
- Variable Font Eigenschaften mit JavaScript steueren (YouTube-Video)
- Intro Variable Fonts (PDF)
7. Dezember
UX Konzeption
4. Mai
«People do not buy products, they contract them to do a job.»
Clayton Christensen
- UX Vorgehen und User Research (PDF)
- Articles from Nielsen Norman Group
- UXmatters
- A List Apart
- UX BOOTH
- UX Insights from Intercom
- Articles from a UX Expert
1. Juni
«Remember that your system will be tested for usability – even if you don't do so yourself.»
Jakob Nielsen
31. August
«A journey map is a visualization of the process that a person goes through in order to accomplish a goal.»
Nielsen Norman Group
13. September
«The purpose of your Information Architecture (IA) is to help users understand where they are, what they’ve found, what’s around, and what to expect.»
Peter Morville
23. November
«The Best User Interface is No user interface.»
Golden Krishna
- How Story Principles Create Great UX (PDF)
- «Knowledge-Base» auf Notion – Links zu Tools, How-Tos, Best-Practices, Inspiration etc.
7. Dezember
Präsentation & Projektmanagement
«Write less, say more.»
Sue Factor