Unsere Top 11 Web Typografie Trends 2017

Zu den üblichen Verdächtigen, die sich zuweilen auch schon länger auf dem Bankett der Webdesign Trends tummeln und die wir zum Teil in unserem Blog besprochen haben, gehören Gestaltungsmittel und Stile wie Ghost Buttons, Hero Images, Minimalismus, Flat, Hamburger Menü, Storytelling Webdesign oder Scrolling Websites. Im heutigen Blogbeitrag haben wir ebenfalls die Trend-Brille aufgesetzt. Unter die Lupe nehmen wir jedoch eine spezifische Webdesign Sparte, nämlich die Typografie. Konkret: Was sind die Web Typografie Trends 2017? Mit welcher Web Typo ist man in diesem Jahr auf der sicheren Seite?

typographie trends 2017

Moderne Typo muss responsive sein

Bevor wir auf die einzelnen Font Trends eingehen, Eines vorweg zu zeitgemäßer Web Typografie: Die Faktoren Responsive Design und positive mobile User Erfahrung müssen bei der Entscheidung der Font und Typeface Wahl unbedingt berücksichtigt werden. Ein Großteil der Bevölkerung nutzt inzwischen hauptsächlich Smartphones und Tablets für den Internetzugang. Folglich müssen Schriftarten in Abhängigkeit der Bildschirm-Dimensionen vergrößer- und verkleinerbar sein, ohne an Lesbarkeit und Wirkung einzubüßen.

#1 Maßgeschneiderte Fonts

typo trend customized fonts apple

Mit dem Sans-Serif Typeface "San Francisco" führte Apple 2014 nicht nur ein neues Produkt - die Apple Watch - ein, sondern legt einen Grundstein für den Trend der auf Branding maßgeschneiderten Typografie (Screenshot).

Personalisierte Fonts sind nicht ganz neu, in den vergangenen Monaten jedoch umso häufiger anzutreffen und sie gewinnen an Bedeutung. Warum auch nicht? Welchen besseren Weg gibt es, eine Marke ganzheitlich zu promoten, als diese von Beginn an schon im Schriftbild zu branden und einen visuellen Wiedererkennungswert zu schaffen? Sicherlich, dies kann zu einer Mammutaufgabe werden. Aber der Aufwand lohnt sich, siehe  San Francisco, das Apple Watch Typeface.

#2 Geometrische Figuren

Geometrische Figuren in den Schriftschnitt einzuarbeiten - ein heißer Typo Trend 2017.

Am schönsten zeigt sich die geometrische Versessenheit bei Drap Agency (Screenshot).

Nicht nur als Fashion Trend machen geometrisch verspielte Formen gerade Karriere. Dreiecke, Kreise und Quadrate halten vermehrt auch Einzug auf unseren Bildschirmen. Dieser schlicht und modern anmutende und dennoch Retro-Vibe ausstrahlende Style verzaubert inzwischen auch auf der Web Typografie Ebene. Die Figuren haben einen schön futuristischen Touch und bilden schöne Kontraste - die perfekten Eyecatcher auf unterschiedlichen User Experience Leveln. Schön sauber sieht derlei Geometrie beispielsweise auch in Flat Design 2.0 Konzepten aus.   

#3 Handarbeit hoch im Kurs

Handgemachte Fonts sind als Typographie Trend hoch im Kurs.

Beispiel für handgeschrieben Schriftarten bei Ta Dah Foods (Screenshot).

Von Hand geschriebene oder gemalte Schriftarten sind derzeit äußerst präsent im World Wide Web. Zahlreiche Businesses setzen auf “Handarbeit”, weil diese Ihren Seiten eine natürliche und persönliche Note gibt und einfach ein freundliches Willkommensgefühl vermittelt. Gerade für ein erfolgreiches Storytelling Webdesign bieten sich solcherlei handgemachte Fonts an, weil sie ausdrücklicher Geschichten zu erzählen vermögen. Ob im Graffiti-Style oder mit weichen Wasserfarb-Pinselstrichen, die handgemalten Fonts können dabei völlig unterschiedlichen Stilen folgen.  

#4 Mix & Match

Das Mixen von traditionellerweise nicht zusammen passender Fonts ist ebenfalls einer der Web Font Trends 2017.

Der Burtons Font kombiniert völlig verschiedene Schriftarten zu einem Interesse weckenden Gesamtkonzept (Screenshot).

Auch unter dem Begriff des Font Pairing bekannt, ist das Prinzip des bunten Vermischens traditionell nicht zusammen passender Schriftarten. Dieser Typografie Trend ist ganz gut darin, als Gestaltungsmittel die Aufmerksamkeit des Betrachters sogleich auf sich zu ziehen. Oft werden kombiniert: serif + sans serif, handgeschrieben + monotype, verdichtet + ausgeweitet oder fett + filigran - es gibt keine Regeln. Auch die Kombi aus Flat Design Typo und einer Serifen Schriftart findet man inzwischen häufiger.

#5 Fast-aber-nicht-ganz Helvetica

Helvetica inspirierter Web Font mit Trend Status: Die Neue Haas Grotesk Schriftart

Screenshot der Neuen Haas Grotesk Schriftart von Max Miedinger & Christian Schwartz als Beispiel für den Typo Trend Helvetica inspirierter Fonts.  

Helvetica - als Schriftart viel geliebt und oft genutzt (nicht nur auf minimalistischen Webseiten). Wenn richtig gesetzt, kann Helvetica wirklich glänzen. Weil sie fast immer passt, ist sie auf Dauer auch irgendwie schnell langweilig. Zu einem der aktuellen Web Typo Trends gehört daher auch die Neuinterpretation dieses never-fail font-Klassikers: Beispielsweise zählen Lorano, Pine Font oder Neue Haas Grotesk zu solchen Helvetica inspirierten Schriftarten.

#6 The Big, Bold & Beautiful vs. tiny typo

Große Fonts als Eyecatcher im Gesamtdesign am Beispiel von Digital Mash.

When in doubt, scale up. Riesenschriften als Typo Trend in 2017 am Beispiel von Digital Mash (Screenshot).

Typo Trend Nummer 6 sind eigentlich zwei Trends, die sich jedoch beide auf die Font-Größe beziehen. Die eine Ausrichtung fassen wir unter dem Motto “Make it big. And then make it bigger.”. 2017 ist das Jahr der Boldness in Sachen Typo. Auch wenn die Typografie nicht unbedingt das wichtigste Gestaltungsmittel eines Designs ist - wobei dies natürlich auch immer vom Gesamtkonzept abhängt - so setzt eine Trendbewegung auf waghalsig große Schriften für Titel mit den zentralen Statements.

Demgegenüber steht die “Tiny-Bewegung”: Der Kniff hier ist, dass klein gehaltene Texteinheiten es ermöglichen, den Fokus stärker auf ein Produkt oder Service zu lenken. Da die Highlights weg vom Text sind, können andere Elemente visuell herausstechen. Kleine Schriftarten passen gut bei Designs mit Hero Images, die beispielsweise Produkte abbilden.

#7 Serifen Revival

Wieder vermehrte Verwendung von Serifen-Schriften, nach der der nahezu serifenlosen Flat-Ära.

Dekorative Serifenschriften wie der Kingston Font gehören zu den Typo Trends 2017.

Serif vs. Sans Serif: Eine wichtige Frage, die die Mehrheit der Designer in den vergangenen Jahren als Flat Design Vertreter mit einem klaren Sans-Serif beantwortet haben. Nachdem sich diese etwas einseitige Bewegung inzwischen allmählich aufgeweicht hat, etabliert sich nun sogar wieder der Trend hin zu (dekorativen) Serifen-reicheren Websites. Serifen vermitteln zudem den Eindruck von Vertrauenswürdigkeit und Zuverlässigkeit.

#8 Animierte Texte

Animation von Schriften gehört ebenfalls zu den Typo Trends 2017

Das Projekt Gotham Pro Animated Typeface lässt Buchstaben hüpfen.

Fun Factor Trend unserer Webdesign Berlin Redaktion: Animation von Schrift.

#9 Farbverläufe

Farbliche Transition als 2017 Font Trend am Beispiel von Fluor.

Den Color Transition Trend findet man auf immer mehr Seiten. Besonders illustrativ ist er bei FLUOR (Screenshot).

Farbübergänge sind derzeit das Webdesign-It-Girl schlechthin. Auch vor Schriftarten macht die Bewegung keinen Halt. Die spanische Agentur FLUOR macht es vor mit einem Übergang von Neongelb hin zu einem grün-stichigen Türkis.

#10 Wasserfarben

Typographie-Trend Nummer #10: Wasserfarben Fonts.

Die Wasserfarben Fonts von Livy Long vermitteln Kreativität, persönlichen Charme und Liebe zum Detail (Screenshot).  

Der Website Leben einhauchen, als wäre sie eine digitale Leinwand: Watercolor typeface ist unser Typo Trend Nummer 10 und eignet sich insbesondere bei Webseiten, die eine down-to-earth-Attitude, Persönlichkeit, und Leichtigkeit vermitteln soll.

#11 Retro Grunge Typo

Sehnsucht nach der Vergangenheit auch in Schriftform. Der Retro Grunge Typo Trend am Beispiel von Bubba Kroketten.

Unternehmen wir doch eine kleine Zeitreise auf Schriftart-Ebene. Und zwar mit dem Retro Grunge Typografie Trend, wie bei Bubba Kroketten (Screenshot).

Die Sehnsucht nach vergangenen Jahrzehnten findet in verschiedensten Formen vermehrt Ausdruck in unserer Gesellschaft. Zu nennen wären hier beispielsweise das Revival von Vintage und Retro Flohmärkten und Second Hand Shops. Auch Tanz und Feierei findet mehr und mehr in Zeitreise-Seifenblasen à la Lindy Hop Festivals, 20er Jahre Kostüm-Bällen oder Mad Men Themenpartys mit 50s-Fingerfood sowie einer Menge Alkohol und Tabak statt. Auf Schriftebene manifestiert sich diese Nostalgie in Form von sogenannten Retro Grunge Schriftarten. Als Gegenentwurf zu Minimalismus und Reduziertheit im Flat Design, schnörkeln diese Fonts uns zurück in vergangene Zeiten. Gerade “Gastronomie Websites” setzen auf den Style, etwa Bubba Kroketten.

Flat 2.0 - Flat Design einen Schritt weiter gedacht

Mit dem Windows Phone 7 wurde Flat Design 2010 (neu-)geboren und etablierte sich auf kleinen wie großen Bildschirmen schnell zum Webdesign Trend schlechthin. Noch heute dominiert das minimalistisch anmutende Gestaltungskonzept mit grellen Farben, Ghost Buttons und überwiegend serifenlosen Flat Fonts das Netz. Wenn nicht das Gesamtkonzept so sind wenigstens einige wenige flat Elemente unter Designern gern verwendetes Motiv.

Seit seinem Debüt 2010 hat Flat Design sich weiterentwickelt. Einst als Gegenentwurf zum Skeuomorphismus gedacht, der die Einfachheit geradezu auf die Spitze treibt, bedeutet der nächste Schritt für Flat Design nunmehr einen Schritt zurück. Oder anders gesagt: Flat 2.0 (auch als Almost Flat oder Semi Flat bekannt) ist erwachsen genug aus der anfänglichen Radikalität und Rebellion zu lernen und einzugestehen, dass subtile Tiefe eine noch bessere Lösung sein kann.  

flat vs flat 2 0

Gegenüberstellung Flat Design und Flat 2.0 bei Dapper Gentlemen (Screenshot).

Flat, flatter, almost flat

Almost Flat ist im Grunde nichts Neues oder Innovatives. Vielmehr ist es als Entwicklung zu verstehen, die sich aus Unzulänglichkeiten im Design ergab. Almost Flat Design stellt eine Reaktion auf den “extremen Minimalismus” dar, der einerseits auf Usability Ebene zu vielen Problemen führte und andererseits Gefahr lief, allmählich langweilig zu werden.

Der Kerngedanke im Flat

Weg vom Überfrachteten, Kitschigen hin zum Aufgeräumten, zu Klarheit und Fokus. Diese Entdeckung der Schlichtheit findet sich nicht nur im Flat bzw. Minimalistischen Webdesign. Verzicht ist hip geworden: Konsumverweigerung, Entrümpelung, Befreiung durch das Weniger ist Mehr dominieren unsere Gesellschaft zu großen Teilen. Den Trend der Einfachheit sieht man nicht nur auf den Bildschirmen, sondern ebenso auf Laufstegen, in den Schaufenstern von Einrichtungsläden oder in Form von Projektmanagementsystemen - siehe Scrum: "Simplicity - the art of maximizing the amount of work not done - is essential." als eines der Prinzipien im Agil Manifesto.

minimalismus aera

Die (Wieder-)Entdeckung der Schlichtheit. Nicht nur Phänomen im Webdesign.

Nachteile der Flachheit

Das Risiko, dass Webdesign an Spaß verliert und langweilig oder austauschbar wirkt, nimmt durch diese Art von Minimalismus und Verzicht stark zu. Denn die Beliebtheit des Gestaltungsstils und seiner Handvoll Fonts und filigranen Flat Icons, die besonders gern verwendet werden, nehmen Webseiten den Raum für Individualität. Es ist wie bei selbstgebauten Betten aus Europaletten, die zu Anfang noch Kreativität, Purismus und Individualität symbolisierten, heute jedoch in gefühlt jedem dritten Schlafzimmer einer Großstadt zur mainstreamigen und wenig inspirierenden Einheitseinrichtung geworden sind.

Die absolute Flachheit verliert aber nicht nur an Reiz, sie führt zugleich auch dazu, dass wir nicht mehr wahrnehmen, mit welchen Elementen wir “interagieren” können. Es ist, als stünde man vor einem Regal, dessen Schubladen, Schranktüren und Dekor-Elemente wohlsortiert und optisch ansprechend erscheinen. Aber es ist schwer, die Kanten auszumachen und unklar, welche Elemente sich öffnen lassen.

Die Art der “Usability-Falle” äußert sich im Flat Webdesign mit der Problematik für User, klickbare Elemente zu erkennen: Vor der flat revolution waren User daran gewöhnt, bestimmte visuelle Signale - wie etwa blaue unterstrichene Links oder 3D-Buttons - als anklickbar wahrzunehmen. Mit der flachen Ära fallen Verläufe, Texturen, deutliche Kanten, Schlagschatten und derlei visuelle Effekte, die Klickbarkeit andeuten und die natürliche Illusion von Tiefe schafften, einfach weg. Am Ende ist es jedoch so: Sobald Besucher sich nicht einfach und intuitiv durch eine Seite oder Oberfläche navigieren können, versagt das Design. Leider lässt sich die Prioritätensetzung - alles für den Minimalismus ungeachtet der Userunfreundlichkeit - im Flat häufig beobachten.

flat usability flawsDas Problem der unkenntlichen Klickbarkeit am Beispiel von Seclgroup

Auf der Seclgroup Website bringt das Flat Design das Viel an Informationen in Szene, ohne dass es überladen wirkt und die Seite insgesamt gut strukturiert daherkommt. Allerdings herrscht Verwirrung darüber, welche Elemente anklickbar sind: Während einige Einheiten als klickbare Elemente herausstechen, wird dies an vielerlei anderen Stellen nur deutlich, wenn man mit der Maus über das entsprechende Element hovert. Gerade mit Blick auf Touch Screens ist das ein großes Problem.

Die nicht vorhandene Dreidimensionalität, das Fehlen der z-Achse im Flat trüben die Website-Erfahrungen, weil es mehr Mühe erfordert die visuelle Hierarchie zu durchschauen und die Zusammenhänge zwischen Objekten auf der Seite zu verstehen. Mehr und mehr reagieren Designer in den vergangenen Jahren auf diese Mangelerscheinungen - die Evolution zum Falt 2.0 nimmt ihren Lauf.

Semi Flat aka die Entdeckung subtiler Tiefe

Semi Flat Design nimmt den Pfad in Richtung Realismus wieder auf. Der Stil ist nach wie vor flach, aber Designer bringen nun doch etwas mehr Textur, Highlights, Schatten und ein wenig Dreidimensionalität ins Spiel. Intelligent umgesetzt kann Flat 2.0 so mehr Leben in eine Seite bringen und den User zufriedenstellen, ohne dabei die Vorteile des Minimalismus-Gedankens (etwa Klarheit, Leichtigkeit, schnelle Ladezeiten) zu verlieren. Man könnte es auch beschreiben als den smarten Kompromiss zwischen Funktionalität, Ästhetik und Usability. Beispiel für Flat 2.0 ist im Übrigen Material Design.

Merkmale im Flat 2.0

  • Subtile Aufforderung
  • dezente Schatten, Highlights und Verläufe
  • Schnittstellen halten weiter an den Flat Design Prinzipien grelle Farben, keine Schlagschatten und Verwendung von Farben als zur Handlung ermutigendes Element fest
  • Buttons werden in der Textur leicht angehoben
  • Tiefe wird genutzt, um Schnittstellen verständlich zu machen
  • höchst userfreundlicher Stil, der optisch anspricht

Gelungenes Flat 2.0 am Beispiel von Lander

lander semi flat beispiel

Lander illustriert die innovative Umsetzung einer Flat 2.0 Variation mit den markanten grafischen Elementen besonders deutlich. Während insgesamt ein blockartiges Konzept erkennbar ist, wird die Aufmerksamkeit auf die Details am Grund der Seite gelenkt. Diese heben sich durch Schattierungen, herausgenommene Grellheit und “Radierungen” von der blauen Ebene ab.

Weitere Almost Flat Beispiele

Neben Lander hat unser unser Webdesign Berlin Team hier ein paar weitere Beispiele für Almost Flat zusammengestellt:

Primer

primer almost flat example

Die perfekte Vermählung von Flat und Skeuomorphismus

Sceatt

semi flat beispiel sceatt

Flat Color und ein wenig Dreidimensionalität bei Sceatt

Dropbox Guide

almost flat beispiel dropbox guide

Mehr Userfreundlichkeit durch 3D Texturen bei Dropbox

Triplagent

flat 2 0 beispiel triplagent

Ein Hauch mehr Realität bei Triplagent

Cybeer Bar

flat 2 0 example cybeer bar

Vereinfachtes Design mit ausgeschmückten Details bei Cybeer Bar

Welches CMS für meine Website?

Die Möglichkeiten sind vielfältig, die Empfehlungen zahlreich: Wordpress, Joomla und Typo3 sind nur einige Beispiele für Content Management Systeme, die ihre Befürworter haben, dem Laien aber erst einmal nichts sagen. Wer sich eine Website erstellen oder seine vorhandene Webpräsenz neu auflegen möchte, der steht vor der Frage: Welches CMS soll ich wählen? Wir liefern einen groben Überblick über die wichtigsten Content Management Systeme, um Ihnen die Entscheidung leichter zu machen.

Vorbetrachtung: Was soll meine Website leisten?

Bevor es ans Eingemachte geht, sollten Sie sich zunächst diese Frage stellen. Werden Sie sich klar darüber, welchen Ansprüchen Ihre zukünftige Website gerecht werden muss. Liegt ein starker Fokus auf der neuen Website und erwarten Sie eine vermehrten Austausch mit Kunden und Interessenten? Oder dient die Website lediglich als Vervollständigung Ihrer Werbung? Wie viele Inhalte möchten Sie auf der Website platzieren und wird die Seite im Verlauf der Zeit stark wachsen? Welche Funktionen wünschen Sie sich - Kalender, Blogbereiche, Archive, Galerien, Buchungs- und Shopfunktionen?

checkliste anforderungen cms

 

Werden Sie sich im Vorfeld klar darüber - anschließend können Sie sich auf die Suche nach dem passenden Content Management System begeben.

Der aktuelle Favorit: Wordpress als CMS

Es ist nicht nur unser Favorit, sondern auch weltweit der Platzhirsch unter den Content Management Systemen. Laut dem Analyseunternehmen BuiltWith nutzen 18 Millionen Websiten Wordpress als Content Management System. Auch bei uns im firmennest ist Wordpress seit vielen Jahren das Mittel der Wahl für die Erstellung von Websites.

 

Die Software bietet neben grundlegenden Einstellungen viele erweiterte Funktionen wie Widgets, Plug-Ins und verschiedene Themes. Dank vieler kluger Köpfe in der Nutzergemeinde ist die Auswahl hier sehr groß. Das Wordpress-Backend ist sehr leicht verständlich und intuitiv bedienbar - dies ist der Hauptgrund für die Beliebtheit unter den Websitebetreibern.

 wordpress logo

Durch die vielen (teilweise kostenpflichtigen) Erweiterungsoptionen ist Wordpress als CMS für kleine Websites mit geringerem Umfang wie auch komplexe Webpräsenzen geeignet. Zur Gestaltung der Website können Sie entweder vorhandene Themes nutzen oder selbst tätig werden - eine absolut individuelle Darstellung gibt es von firmennest. Wir sind Ihr Partner für das Webdesign in Berlin und ganz Deutschland und setzen Ihre Website-Vorstellungen mit Wordpress in die Tat um!

 

Dank der hohen Benutzerfreundlichkeit können Sie in Wordpress selbst Inhalte erstellen, bearbeiten und gestalten bei vergleichsweise geringem Aufwand. Leider stellt Wordpress mit seiner großen Beliebtheit bei Websitebetreibern eine attraktive Angriffsfläche für Hacker dar. Wer aber alle notwendigen Updates zeitnah durchführt, kann so eventuelle Sicherheitslücken schließen.

Joomla! als Content Management System

Mit einigem Abstand zum Marktführer Wordpress folgt an zweiter Stelle das CMS Joomla!. Die Basis-Version dieser Software ist bereits etwas umfangreicher als bei Wordpress und die Konfigurationseinstellungen nicht immer so leicht verständlich für Website-Einsteiger. Bei Fragen finden Sie in Online-Handbüchern Hilfe und einer aktive Community steht Ihnen gern mit Rat und Tat zur Seite.

 

Der Pool an Plug-Ins, Modulen und Themes ist, ähnlich wie bei Wordpress, vielfältig und teilweise kostenlos verfügbar. Für wen Individualität und ein einzigartiges Design nicht an erster Stelle stehen, der kann aus vielen vorgefertigten Designs für seine Joomla!-Website wählen.

 joomla logo

Zu Beginn ist das Handling von Inhalten und Erweiterungen im Backend für so manchen Webmaster gewöhnungsbedürftig. Generell zählt Joomla! aber zu den nutzerfreundlicheren Content Management Systemen und je mehr Sie sich damit beschäftigen, umso schneller Verständnis entwickeln Sie für die Funktionsweise des Systems.

 

Joomla! ist geeignet für Websites von geringerem Umfang, deren Ausmaß skalierbar ist. Hier sind die möglichen administrativen Einstellung völlig ausreichend und auch zielführend.

Drupal für die Website-Erstellung

Die Content Management Systeme Drupal und Wordpress sind in Hinblick auf die Komplexität der Grundinstallation ähnlich schlank gestaltet. Über Module lassen sich die Funktionen des Systems nach Bedarf erweitern und sehr flexibel gestalten. Drupal ist somit eine gute Basis für sehr individuelle Projekte von kleinem oder mittlerem Umfang.

 drupal logo

Nennenswert sind die vielen Funktionserweiterungen, die Drupal im Bereich des Web 2.0 zur Verfügung stellt. Hier liegen auf jeden Fall die Stärken des Systems und sein primärer Anwendungsbereich. Weiterhin positiv ist, dass Rechte sehr differenziert gestaltet werden können, wodurch Sie den Überblick behalten, auch wenn viele verschiedene Personen an der Website arbeiten sollen. Kleine oder mittlere Projekte, die in starkem Maße eine Community und user-generated Content einsetzen, finden in Drupal ein passendes CMS.

 

Der administrative Aufwand des Content Management Systems ist allerdings um einiges aufwändiger als zum Beispiel bei Wordpress. Die meisten Anpassungen sind nur über den FTP-Zugang möglich und bedeuten damit immer einen tiefen Eingriff in das System.

TYPO3 als CMS

TYPO3 ist zusammen mit Wordpress und Joomla! eines der am meist genutzten CMS weltweit. Wie bei den Mitstreitern findet sich auch hier eine kreative Folgerschaft, die fleißig Erweiterungen, Plug-Ins und Widgets programmiert und diese oft kostenlos zur Verfügung stellt.

 typo3 logo

Ein großer Minuspunkt für jeden, der sich nicht intensiver mit Content Management Systemen und deren Konfiguration auseinandersetzt: TYPO3 ist nicht einfach zu verstehen und anzupassen. Das System ist sehr leistungsfähig, muss aber unbedingt richtig implementiert werden, um seine volle Kraft entfalten zu können. Für jeden, der noch keine Erfahrung im Webdesign und der Webprogrammierung hat, ist TYPO3 ohne Betreuung durch einen fachkundigen Experten deshalb nicht zu empfehlen. Auch gängige Anpassungen von Inhalten und verwendeten Medien sind mit anderen Systemen wie Wordpress leichter zu handhaben.

 

Positiv zu nennen ist wiederum der Fakt, dass sich das System bei korrekter Konfiguration leicht an ändernde Umstände anpasst. Wer von Beginn an eine größere Website in Planung hat oder ein umfangreiches Wachstum der Komplexität erwartet, findet in TYPO3 ein zuverlässiges Content Management System.

Weitere Systeme

Mit den genannten Big Playern im Bereich CMS ist noch lang nicht alles gesagt. Viele weitere, größere und kleinere Entwickler haben Content Management Systeme auf den Markt gebracht, die sich etabliert haben. Dazu gehören unter anderem Jimdo, Redaxo, ProcessWire, Contao, Opencart - sie alle haben ihre Vor- und Nachteile, welche sich oft erst beim Selbsttest herausstellen.

 

Wir sehen: Pauschal lässt sich keine Aussage treffen, warum welches CMS für welches Projekt gewählt werden sollte. Für Firmenwebsites präferieren wir in der Regel Wordpress, da es die perfekte Kombination aus Gestaltungsfreiheit für den Webdesigner und intuitiver Bedienbarkeit für Sie als Nutzer ist. Sie wünschen sich eine neue Website? Standard-Designs und recycelte Programmierungen gibt es bei uns nicht - gern beraten wir Sie zu Ihren individuellen Möglichkeiten!

Typografie im Flat Design

Getreu dem Motto “weniger ist mehr” verzichtet Flat Design auf zahlreiche Gestaltungsmittel, die im Skeuomorphismus noch Anklang fanden. Dazu zählen aufwändige Verzierungen oder dreidimensionale, die Wirklichkeit imitierende Elemente. Im Vordergrund stehen Simplizität und das (farbliche) Hervorheben einiger weniger Elemente. Durch grafische Reduktionen im Flat kommt daher der Typografie wieder eine größere Bedeutung zu. Schriften werden zu den Hauptelementen, die wesentlichen Botschaften entfalten sich am besten im Text. Folge: Das Thema Flat Design Typo gehört zur zentralen Fragestellung im Gestaltungsprozess, auch für unser Webdesign Berlin Team. Was gibt es für eine harmonische Flat Typographie zu beachten?

Typographie im Flat Design - Was gilt es zu beachten?

Flat Design Typo am Beispiel von adayinbigdata.com (Screenshot).

Flat Design Typo Regeln

Simplicity - das zentrale Schlagwort im Flat Design - wirkt sich natürlich auch auf die Wahl der Schrift(en) aus. Im Sinne eines Minimalistischen Webdesigns, das die Webseite insbesondere mit farbigen Flächen und Schaltflächen strukturiert, arbeitet man optimalerweise auch mit “simplen” Fonts. Mit dem Text sollen dem Besucher einer Website Impulse übermittelt werden. Was zählt, ist der Inhalt. Die gestalterischen Mittel bzw. die Schriftart darf die Botschaft nicht übertünchen, sondern diese diese unterstreichen. Unaufdringlich und mit schlichter Eleganz, dennoch interessant fürs Auge und einfach lesbar sollte das Schriftbild im Flat Design sein und sich harmonisch in die Gesamtgestaltung einfügen.

 Die richtige Schriftart für Flat Websites finden.

Flat Design Fonts müssen mit der schlichten Eleganz und Farbenfreude der Gestaltung in ihrer Gesamtheit harmonieren, um die Message eindrücklich zu vermitteln.
Oft verwendet man nur eine Font-Familie, wie hier bei Ghost Games (Screenshot).

Die Idee des Simplen zieht sich auf allen Ebenen durch: In der Regel findet man auf Webseiten im Flat maximal zwei verschiedene Fontfamilien (wohingegen Designer in anderen Projekten zwei bis vier Schriftfamilien nutzen). Vor allem klare Schriftarten dominieren als Flat Design Fonts. Außerdem kennzeichnend: Speziell serifenlose Schriften mit mehreren Schriftschnitten werden in diesem Webdesign Trend bevorzugt. Die grellen Farben im Flat heißen im Umkehrschluss für die Flat Typo, dass Größenverhältnisse, Linien und Striche klar und ausbalanciert sind.

Serifen im Flat?

Auch wenn Novelty Fonts im Flat Design funktionieren können, sind es doch vielmehr serifenlose Schriften, die überwiegen. Insbesondere Schriften mit sehr dünnen oder sehr breiten Schnitten beherrschen das Bild. Serifenschriften sind eher selten anzutreffen; zu viel Aufmerksamkeit könnte die Verzierung auf sich ziehen. Hier gestaltet sich zudem die Suche für die passende Typographie dann wesentlich schwieriger.

Schriftarten ohne Serifen sind typisch für Flat Typo

Flat Design Typo am Beispiel des Webfonts «Montserrat» der argentinischen Designerin Julieta Ulanovsky.

Eine einheitliche, in der breite nicht variierende Schrift sowie Schriftstärke ist zudem einfacher zu lesen und passt mit den unterschiedlichsten Hintergründen zusammen. In unseren Projekten arbeiten wir häufig mit Flat Design Fonts wie

  • Lato
  • Open Sans
  • Montserrat
  • PT Sans
  • Source Sans Pro.

 

Im Rahmen von Flat Design arbeiten wir gerne mit Fonts wie Lato«Lato» - häufig im Flat Webdesign zur Anwendung kommendes Webfont von Łukasz Dziedzic.

Daneben werden häufig auch Proxima Nova, Helvetica oder Helvetica Neue als Flat Design Fonts genannt. Arial könnte sich hier ebenso einreihen. Für ein aussagekräftiges und Persönlichkeit ausstrahlendes Design eignen sich jedoch Webfonts mit mehr Pepp.

Novelty Fonts funktionieren auch für Flat Webseiten.Novelty Typo im Flat Webdesign am Beispiel von «Impact Label».

Sofern Novelty Fonts zum Einsatz kommen sollen, empfiehlt es sich zwei Fonts für das Design zu wählen. Hierbei ist es ratsam auf eine Novelty Schriftart zu setzen, die einer serifenlosen (hinsichtlich Attributen wie klare Linien und einheitliche Striche) ähnlich ist, also auch nicht zu verspielt oder dekoriert erscheint. Diese sollte dann an den Stellen auftauchen, an denen der Text einfach und groß gehalten wird.

Lesbarkeit, Raum und Farbkontrast in der Flat Typografie

Da der Flat Stil vollkommen auf dreidimensionale Effekte (etwa Schlagschatten) verzichtet, ist eine eingängige Farbpalette zur Gestaltung umso wichtiger. Mutige leuchtende und helle Farben mit ähnlich hoher Sättigung kommen bevorzugt zum Einsatz. Mit Blick darauf, dass eine solche farbenfrohe Gestaltung in Kombination mit Flat Icons wesentliches Ausdrucksmittel im Flat Design ist, muss die Wahl der Schriftart hinsichtlich Schriftgröße bzw. -breite, Strichstärke und natürlich auch Schriftfarbe gut abgestimmt sein.

Am häufigsten finden sich Schwarz und Weiß als Schriftfarben auf Flat Webseiten. Wenn man bedenkt, dass die Schriftzüge eben sehr häufig auf farbigem Hintergrund positioniert werden, wundert diese Farbwahl in der Flat Design Typo kaum. Schließlich sorgt dieser Farbkontrast für eine bessere Lesbarkeit von Texten. Da eben nicht auf Schatten gesetzt wird, müssen sich Text und Hintergrund eben durch den Farbkontrast abheben.

Des Weiteren beeinflussen leuchtende Hintergrundfarben auch die Strichstärke und und Schriftgröße der Typographie im Flat Design: Fonts sollten sich durch gerade Striche auszeichnen und groß sowie kräftig genug sein, um sich gut lesen zu lassen. Wir vermeiden in diesem Zusammenhang kursive Schriftschnitte, da diese zu viel Unruhe in das sonst so „gerade“ Design bringen. Insgesamt sollte man Texten im Flat “Raum zum Atmen” geben. Ausreichend Whitespace, große Fonts, Variation in der Schriftgröße ermöglichen es den Botschaften, sich auf der Seite zu entfalten.

Flat Design Font Trends

Nachdem wir bereits ein paar Flat Design Font Beispiele genannt haben, stellen wir hier noch ein paar weitere Klassiker und Trends vor:

Raleway

 raleway webfont

«Raleway» by The League of Moveable Type

Junction

junction webfont

«Junction» by The League of Moveable Type

Corbert

corbert webfont

«Corbert» by The Northern Block

Sofia Pro

sofia pro webfont

«Sofia Pro» by Mostardesign

Manteka

manteka webfont

«Manteka» by Eduardo Araya

Kidot

kidot webfont

«Kidot» by Massimo Vignelli

Market Deco

market deco webfont

«Market Deco» bySteve Ferrera

Gnuolane

gnuolane webfont

«Gnuolane» by Typodermic Fonts

RBNo2

rbno2 webfont

«RBNo2» by Rene Bieder

Langdon

langdon webfont

«Langdon» by xlntelecom

Museo Sans

museo sans webfont

«Museo Sans» by Exljbris

Dense

dense webfont

«Dense» by CD Type

Lovelo

lovelo webfont

«Lovelo» by Renzler Design

Klinic Slab

klinic slab webfont

«Klinic Slab» by Joe Prince

Caviar Dreams

caviar dreams webfont

«Caviar Dreams» by Nymphont

Muli

muli webfont

«Muli» by Vernon Adams

Josefin Sans

josefin sans font

«Josefin Sans» by Typemade

Moderne Sans

modern sans font

«Modern Sans» by Marius Kempken

Tracks

tracks webfont

«Tracks» by Gumpita Rahayu

Franchise

franchise font

«Franchise» by Weathersbee Type

Mohave

mohave font

«Mohave» by by Gumpita Rahayu

OSP-Din

osp din font

«OSP-DIN» by OSP-foundry

Big John & Slim Joe

big john slim joe font

«Big John & Slim Joe» by Ion Lucin

Bebas Neue

bebas neue font

«Bebas Neue» by Flat-it

Material Design: Be-Greifbar

 Material Design ist eine von Google entwickelte Designsprache, die vor allem auf mobilen Endgeräten und im Web bei diversen Google-Diensten zum Einsatz kommt. Sie wurde aus dem minimalistischen Flat Design abgeleitet. Dem zweidimensionalem Flat Design fügt das Material Design eine dritte Dimension hinzu, die den grafischen Oberflächen subtil Tiefe verleiht und Elemente haptischer gestaltet. Wie das Flat Design setzt das Material Design sehr stark auf die Betonung von Icons und Schriften. Die verwendeten Elemente sind großflächig, einfarbig und in leuchtenden und kontrastreichen Farben ausgeführt. Im Zuge der Einführung des Material Designs hat Google auch seine eigene Schriftart, den Android Font “Roboto”, angepasst.

material design

 Was ist das erklärte Ziel von Googles Design?

Material Design erhebt den Anspruch, die Prinzipien “guten” Designs mit sämtlichen Möglichkeiten von Technologie und Wissenschaft zu verbinden. Besonders gut lässt sich die Umsetzung dieses Anspruchs an animierten Elementen erkennen.

    Beispiel:

Wenn sich eine rechteckige Form auf dem Display ändert - egal ob sie lediglich die Größe ändert oder sogar auch die Form - dann ändert sich sowohl die Höhe als auch die Breite der Form asynchron; also die Breite verändert sich beispielsweise schneller als die Höhe. Diese Art der Choreographie wirkt auf eine subtile Art natürlich. In manchen Fällen ändert sich die Größe eines Inhalts synchron, während sich der dazugehörende Container asynchron ändert. So kann der Designer vermeiden, dass beispielsweise Bilder unnatürlich verzerrt werden.

google material design martphone 1796337 640

Die Prinzipien von Material Design

“Material ist die Metapher” (Google)

Material Design basiert auf unserer realistischen Erfahrung der Welt; auf physikalischen Gesetzmäßigkeiten, die unsere Wahrnehmung strukturieren und von uns als “natürlich” empfunden werden. Materialien geben die taktile Dimension vor, vor allem Studien von “Papier und Farbe”, und werden durch technologische Finessen für “die Vorstellungskraft und Magie” geöffnet, so Google. Die Grundlagen von Licht, Oberfläche und Bewegung bestimmen, wie Elemente aussehen und animiert werden, wie sie sich in Interaktion miteinander verhalten. Licht und Schatten, Abstände und Absätze, Kanten und Ecken sind in diesem Sinne “realistisch” gestaltet und helfen den Nutzern, die Funktionalität der grafischen Oberfläche intuitiv zu “begreifen”.

“Kräftig, grafisch, intentional” (Google)

Print Design bildet in mehrfacher Hinsicht die Basis für Material Design. Typografie, Gitter, Räume, Dimensionierung, Farbe und der Einsatz von Bildern sind bestimmende Elemente und kreieren optische Hierarchien, Bedeutungen und bestimmen die Blickführung. Alles steht im Zeichen der User-Erfahrung. Der User soll geleitet werden und intuitiv verstehen: Darum setzt Googles Material Design auf ein bestimmtes Farbmanagement, großflächige Bilder, großformatige Typos und den bewussten und großzügigen Einsatz von white space.

“Bewegung verleiht Bedeutung” (Google)

Die Interaktionen der Benutzer mit der grafischen Oberfläche bringen diese in Bewegung: Sie transformieren die Oberfläche. Wenn sich die Elemente auf der grafischen Oberfläche ändern und neu organisieren, ist es von besonderer Wichtigkeit, dass die Nutzer dennoch ein Gefühl der Kontinuität erleben und die Oberfläche fokussiert auf die Intentionen der User bleibt. Zu den Prinzipien des Material Design zählt aus diesem Grund, dass die Feedbacks der grafischen Oberfläche subtil aber eindeutig und Veränderungen effizient aber kohärent sind.

google 920532 640

Materielle Eigenschaften

Wer Material Design anwenden möchte, muss sich mit den Qualitäten von Materialien auseinandersetzen, um sie in grafische Elemente “übersetzen” zu können. Im Falle des Material Design von Google bedeutet dies:

  • Elemente haben eine variable Größe (auf der x- und der y-Achse) und eine einheitliche Dicke von 1 Millimeter (y-Achse). Die Dicke bestimmt auch den unerlässlichen Schattenwurf der Elemente. Der Schatten stellt dar, wie groß Abstände zwischen bestimmten Oberflächen sind.
  • Materialien sind “massiv”: Ein Element darf nicht denselben Ort einnehmen, wie ein anderes Element. Zwei Elemente überlappen sich gegenseitig und zeigen dies durch den Schattenwurf, der vom oberen Element auf das untere fällt. Neue Elemente erscheinen auf der oberen Schicht der Elemente und durchdringen nicht etwa tiefere Schichten.
  • Materialien können ihre äußere Form verändern.
  • Wenn Materialien ihre Größe ändern (x- und y-Achse), verharren sie auf ihrer festgelegten Ebene (z-Achse).
  • Materialien falten und biegen sich nicht.
  • Zwei Materialien können sich miteinander verbinden und Eins werden. Einzelne Materialien können sich teilen und wieder “ganz” werden.
  • Material kann spontan auftauchen und verschwinden.
  • Material kann sich auf jeder beliebigen Achse bewegen.
  • Wenn sich Material auf der y-Achse bewegt, ist dies vor allem für Interaktionen des Nutzers vorbehalten.

Materialle Bewegungen

Bewegungen sind im Material Design besonders ausgefeilt. Bewegungen, die der User mit einem Element vollführt - etwa, wenn er einen Regler zieht - geben ein bestimmtes Tempo und eine eigene Dynamik vor. Erklärtes Ziel dieser Ausrichtung ist es, dass Bewegungen weder als “lahm” noch als “nervös” empfunden werden.

 

Elemente, die sich bewegen, folgen, wie oben bereits erwähnt, einer besonderen Choreografie. Entscheidend ist, dass nicht eine lineare Bewegung angestrebt wird, sondern eine, die unserem natürlichen Empfinden für Bewegungen entspricht. So verlangsamen sich Bewegungen am Beginn oder gegen das Ende hin - als würden sie gegen die Trägheit, die Materialien ja auch in der realen Welt überwinden müssen, ankämpfen.  

Fazit

Material Design ist eine faszinierende und bereits extrem ausgefeilte Design-Philosophie. Sie kann Entwicklern viele inspirierende Ansätze liefern. Gleichzeitig beschränkt sie natürlich: Sie ist ein geschlossenes System, dass für jedes Element der Gestaltung - Farbgebung, Icons, Layout, Bewegung etc. - feste Vorgaben bereithält. Spannend wird es immer dann, wenn Webdesign die Regeln derart verinnerlicht hat, dass ein Ausbruch möglich wird.

 

Quellen:

https://material.io/guidelines/

https://design.google.com/

https://www.youtube.com/watch?v=Q8TXgCzxEnw

material design icons

Jetzt unverbindlich und kostenlos beraten lassen!

030 53 08 82 35