Oktober 2017
Iconfonts im UX-Design – Teil 2: Wie man einen passgenauen Iconfont erstellt
Wir zeigen, wie man einen individuellen Iconfont mit Hilfe von Adobe Illustrator und dem Fonteditor Glyphs erstellt und diesem ein praktisches Feature hinzufügt, um Zeit im täglichen Designprozess zu sparen.
Von Markus Remscheid
Icons werden auf Webseiten meistens in Kombination mit Textlabeln verwendet. Hier sind Iconfonts besonders hilfreich, da diese mit dem Text fließen und einfach editierbar sind. Es ist viel einfacher, eine Glyphe aus einem Font auszuwählen als ein EPS oder anderes Vektorformat im Layout-Programm einzufügen (mehr dazu im ersten Teil).
Noch einfacher wird es, wenn die Icons und Textlabel in einer Schriftgröße verwendet werden können und die Icons ohne weitere manuelle Nachbesserungen perfekt platziert sind. Das ist es, was wir mit unserem Iconfont erreichen möchten.
UX-Design in Sketch einfach gemacht – dank passgenauem Iconfont
Wie man dazu genau vorgeht, zeigen wir Ihnen in fünf einfachen Schritten am Beispiel eines Iconfonts, den wir für unseren Kunden bonprix erstellt haben.
1. Die Werkzeuge
Die Icons zeichneten wir in Adobe Illustrator. Zur Font-Erstellung nutzten wir das Mac-only-Programm Glyphs. Weitere empfehlenswerte Font-Tools sind FontLab oder Fontographer, die auch für Mac und Windows verfügbar sind.
Kostenlose Online-Tools, wie z.B. IcoMoon werden auch angeboten. Allerdings kamen diese für unsere Zwecke nicht in Frage, da hier der Funktionsumfang recht eingeschränkt ist und z.B. ein exaktes Platzieren der Icons nicht oder nur sehr schwer möglich ist.
2. Metrische Grundeinstellungen ermitteln
Als Grundschrift kommt im bonprix Online-Shop Arial zum Einsatz. Deshalb stimmten wir den Iconfont entsprechend darauf ab.
Ausgangsbasis bildeten die metrischen Werte von Arial, die wir als Erstes herausfinden mussten. Dazu öffnet man die Schrift mit Glyphs, indem die Schriftdatei (OpenType oder Truetype) einfach auf das Glyphs-Icon gezogen wird.
Der geöffnete Font in Glyphs:
In Glyphs öffnet man nun das Fenster „Datei/Schrifteinstellungen“ (⌘I) und klickt dort auf den Reiter „Master“. Im Abschnitt „Dimensionen“ fanden wir die metrischen Werte, die wir im nächsten Schritt auf unseren Iconfont übertrugen:
3. Iconfont anlegen:
Wir erstellten in Glyphs eine ganz neue Schriftdatei indem wir „Datei/Neu“ (⌘N) aufriefen. Als Erstes öffneten wir auch hier die Schrifteinstellungen und trugen die metrischen Werte der Schrift Arial in die jeweiligen Felder ein.
4. Icon in Font einfügen
Wir öffneten unser Icon in Adobe Illustrator und kopierten dieses einfach über die Zwischenablage in Glyphs. In unserem Fall handelte es sich um ein Warenkorb-Icon, das wir in Glyphs in das Zeichen „c“ kopierten.
Pro-Tipp:
Wichtig ist es, den richtigen Maßstab für die Icons zu finden. Ein Punkt in Illustrator entspricht einer Font-Einheit in Glyphs. Um schnell die richtige Icon-Größe einzurichten, kann in Glyphs ein Rechteck in der Gesamthöhe (Gevierthöhe) gezeichnet, kopiert und dann in Illustrator eingefügt werden. Dieses Rechteck dient der Orientierung und die Icons können entsprechend an die Größe des Rechtecks angepasst werden.
5. Schrift exportieren und testen
Jetzt konnte der Font über den Menübefehl „Datei/Exportieren“ (⌘E) zum ersten Test exportiert werden.
Um die Schrift möglichst einfach auf dem eigenen Computer zu installieren, ist im Exportdialog das Format „OTF“ zu wählen und ein Häkchen bei der Option „Installiere Schrift“ zu setzen. Nach dem Export war die Icon-Schrift dann sofort in unserem Schriftmenü verfügbar.
Wir probierten den Iconfont direkt in Sketch aus und gestalteten dazu einen Button, bei dem der Buttontext mit unserem Warenkorb-Icon kombiniert wurde. Wir benötigten jetzt nur noch einen Textrahmen, der den Text „In den Warenkorb c“ beinhaltete. Dem Buchstaben „c“ wiesen wir anstatt Arial unseren neuen Iconfont zu.
War die Positionierung anfangs noch nicht ganz stimmig, korrigierten wir die Ausrichtung des Icons in Glyphs und exportierten die Schrift neu.
Ein Iconfont macht die Gestaltung von Listen einfach
Nach ein wenig Feintuning passte alles, und weitere Icons konnten dem Iconfont hinzugefügt werden. Voilà!
Markus Remscheid, Designer und Gründer der H2D2 GmbH, setzt in Projekten sehr gerne eigens erstellte Schriften und Iconfonts ein, um sich so von Mitbewerbern abzuheben oder den Workflow zu verbessern. Am besten sogar beides.