Aufgabe · Fonts im Web
Ausgangslage
Es gibt tausende von Webfonts (Schriftart) die man kostenpflichtig lizenzieren kann oder aber frei einsetzen darf. Durch die Vielfallt fällt es leicht, die Übersicht zu verlieren und man bedient sich oft bei den «Klassikern», von denen man die Qualität und Vorzüge bereits kennt. Um sich mit neuen Fonts vertraut zu machen und aber auch Kriterien bei der Wahl zu erlernen, soll jeder Student sich vertieft mit einem Font beschäftigen.
Der Unterricht orientiert sich an der Font-Vorstellung, es werden jedoch auch Themen behandelt, die generell mit Webdesign zu tun haben.
Aufgabe & Ziel
Jeder Student wählt einen Font aus der sowohl Lizenzrechtlich frei zu verwenden ist, wie auch die Kriterien für Mengentext (lineares Lesen) erfüllt.
Die Aufgabe umfasst folgende Punkte:
- Selektion des Fonts
- Recherche und Erarbeitung eines Textes über Autor und Font
- Gestaltung eines Schriftmusters (Website)
- Abstimmung mit der Klasse um alle Schriftmuster als zusammenhänges Werk darzustellen
- Dokumentation des Vortschrittes und der Erkenntnisse
Vorgehen und Zeitplan
Dieser Zeitplan umfasst lediglich die Tasks der hier gezeigte Aufgabe. Dazu kommen Inhalte und Aufgaben aus dem LAB-Unterricht.
KW08 · 23.02.2018
- Was ist ein Schriftmuster → Funktion, Inhalt, Geschichte, Gegenwart
- Betrachtung, Analyse und Dokumentation von bestehenden Papier-Schriftmustern (jeweils zwei Personen untersuchen zwei Schriftmuster)
- Präsentation von Schriftmustern in Klasse
Heimarbeit
Welche Text-Schrift (keine Headline-Fonts) wähle ich? Weshalb glaube ich, dass sich diese Schrift für grosse Textmengen am Bildschirm eignet? Erste Analyse von Schrift: Gibt es Eigenheiten, die allenfalls besser sind als andere?
Einige Schriften, die man berücksichtigen könnte.
- Source Sans & Serif
- Ubuntu
- Droid Sans & Serif
- PT Sans & Serif
- Montserrat
- Lato
- Faustina
- Vollkorn
- Alegreya Sans & Serif
- Merriweather Sans & Serif
- Work Sans
- IBM Plex
- Barlow
- Open Sans
- Noto Sans & Serif
- Fira Sans
- Amstelvar
- Inter
Abzugeben ist ein SVG, bei dem das Wort «Hamburgefonts» (klassisches Testwort für Schriftmuster) gesetzt wird und spezielle Merkmale der Schrift farblich markiert sind. Die Legende dazu ist in einer Textdatei abzugeben. Siehe Beispieldatei.
Zusätzlich; Kenne ich digitale Schriftmuster? Bringen Sie drei URL's mit; Zwei Schriftenhersteller (nicht Linotype, Monotype, Fontshop, fonts.com, google-Fonts), eine Website bei der Schriften vorgestellt werden (Blog-Post oder ähnliches). Kurze Vorstellung des Favoriten in der Klasse.
KW11 · 16.03.2018
- Präsentation von Schrift in Klasse
- Dokumentation der Schriftwahl
- Worin unterscheidet sich meine Schrift von anderen Schriften?
- Was sind relevante Kriterien und Eigenschaften von Text-Schriften?
- Betrachtung, Analyse und Dokumentation von bestehenden digitalen Schriftmustern?
- Dokumentation der digitalen Schriftmuster
Heimarbeit
Abzugeben ist das korrigierte SVG von letzer Woche mit neu gelernten Kriterien oder Eigenheiten. Zusätzlich sollen die Proportionen der Schrift eingezeichnet werden (siehe Beispiel). Zusätzlich soll ein Text mit 1000 Zeichen zur Schrift geschrieben werden, der die Geschichte/Hintergrund/Entstehung der Schrift beleuchtet. Quellen müssen korrekt und vollständig angegeben werden. Ein kritischer Umgang mit der Zuverlässigkeit der Quellen ist gefordert. Dieser Text soll als Textdatei abgegeben werden.
KW12 · 23.03.2018
- Präsentation von eigenschaften der Schrift in Verbindung mit der Geschichte. Warum sieht die Schrift so aus? Welchen Zweck sollte die Schrift erfüllen. Warum gibt es die Schrift?
- Welche Möglichkeiten haben wir für die Navigation innerhalb des Werkes (mobile first)?
- Dokumentation von verschiedenen Navigations-Konzepten.
Heimarbeit
Jeder Student macht ein Fact-Checking des bisher erarbeiteten Textes eines Mitstudenten. Stimmen alle Angaben? Wurde keine Wertung im Text eingearbeitet, sondern nur die Faktenlage dargestellt? Sind die eingezeichneten Merkmale wirklich relevant?
KW14 · 06.04.2018
- Präsentation des Autors der eigenen Schrift
- Welche Inhalts-Elemente/Darstellungen sollen nun auf unserem Schriftmuster gezeigt werden
- Untersuchung über grössen des Screens und Schriftgrössen
Heimarbeit:
Es soll ein Text mit 1000 Zeichen zum Designer/Zeichner der eigenen Schrift geschrieben werden. Hintergrund/Geschichte/Werdegang und weitere Schriften des selben Gestalters sollen erwähnt werden. Quellen müssen korrekt und vollständig angegeben werden. Ein kritischer Umgang mit der Zuverlässigkeit der Quellen ist gefordert. Dieser Text soll als Textdatei abgegeben werden.
Beispiel-Websites mit der eigenen Schrift suchen. Gute und schlechte Punkte beim Einsatz des Fonts auf den Beispielen aufzeigen. Die Untersuchung beinhaltet zwei Listen (Positiv/Negativ) pro URL mit kurzen Stichworten. Abgabe als Textdatei.
KW16 · 20.04.2018
- Erarbeitung von Schriftmuster-Beispielen (Mengentext)
- Media-Queries für verschiedene Screen-Grössen
- Dokumentation von Beispiel-Websites
Heimarbeit
Es werden zwei Schriftmuster (HTML) abgegeben. Ein Muste, welches eine Anwendung als Grundtext zeigt bei dem der Text in Schwarz auf Weiss möglichst gut Lesbar gesetzt wird. Daneben soll ein Beispiel abgegeben werden, wie in Kombination mit einem (!) anderen Font eine möglichst ansprechende Typografische struktur erarbeitet werden kann.
Jeder Student macht ein Fact-Checking des bisher erarbeiteten Textes eines Mitstudenten.
KW20 · 18.05.2018
- Präsentation von Schriftmustern
- Besprechung und Überarbeitung von Schriftmustern
Heimarbeit
Überarbeitung der Schriftmuster und zusammenstellen der Texte und Bilder.
KW22 · 01.06.2018
- Präsentation von Schriftmustern
- Besprechung und Überarbeitung von Schriftmustern
Heimarbeit
Überarbeitung der Schriftmuster und zusammenstellen der Texte und Bilder.
KW22 · 29.06.2018
- Abgabe und Präsentation der Schriftmuster
Bewertung
Technik (20%)
- Die technischen Vorgaben sind eingehalten
- Die publizierten Inhalte sind technisch einwandfrei
- Responsive Ansicht ist gegeben
Inhalt (20%)
- Wahl eines geeigneten Fonts (Text-Font)
- Informationen übersichtlich und vollständig
- Inhaltliche Strukturen wurden geschaffen
- Alle Inhaltselemente wurden vollständig erarbeitet und eingefügt
- Texte erfüllen die Anforderung und sind vollständig
- Text wurde mit Sorgfalt verfasst (Quellen/Vollständigkeit)
- Wichtige Merkmale angezeichnet und erkannt
Führung/Menü (10%)
Da die Studierenden dies gemeinsam erarbeiten, wir dies auch über die Klasse hinweg bewertet.
- Menüstruktur ist schlüssig und schnell zugänglich
- Menü wurde für Touch-Devices optimiert
- Die aktuelle Position innerhalb der Website ist stets nachvollziehbar
- Die Leseführung ist überlegt und offensichtlich Gewohnte Interface-Konzepte
Grafisches Konzept (40%)
- Das Grafische Konzept der Seite und des Schriftmuster ist schlüssig und durchgängig
- Grafische Sprache entspricht dem Inhalt
- Typografie überlegt eingesetzt
- Seitenarchitektur überlegt
- Zweckmässigkeit gegeben
- Wissensvermittlung gelungen