Kostenlose Icon Sets für Flat Design

social media icons

Flat Design spaltet die Design Community. Die einen schwören auf den funktionalen, farbenfrohen Webdesign-Stil mit langen Schatten, die anderen verteufeln ihn als langsamen aber sicheren Untergang des guten Geschmacks. Außer Frage steht jedoch: Flat ist kein verfliegender Webdesign Trend. Wie Ghost Buttons, Infografiken und Storytelling Webdesign bleibt uns dieser Gestaltungsstil länger erhalten.

In unserem Flat Design Beitrag haben wir bereits Grund- und (künstlerische wie auch technische) Vorzüge aufgezeigt. Auch Flat Design Fonts stellten wir vor. Heute soll es nun um konkrete Formen bei der Umsetzung gehen, und zwar mithilfe von schön entworfenen Flat Icon Sets.

Flat Icons: unsere Lieblinge

Icons sind ein essenzielles Element im UI Design. Sie sparen Platz, sind ansprechend für den User, werden schnell erkannt und müssen nicht übersetzt werden. Schön entworfene Icons, die mit den anderen Details einer Webseite harmonieren, können ein Design merklich aufwerten.

Welche Icons wir in unseren Webdesign Berlin Projekten nutzen, hängt stark von den Kunden und dem Stil der Seite ab. Ist die Seite beispielsweise sehr filigran und in einem Minimalistischen Webdesign gehalten, kommen Line-Icons zum Einsatz, ist sie sehr plakativ mit großen Flächen, dann nutzen wir gerne ausgefüllte Icons. Je nach Zielgruppe können die Icons sehr klar oder auch verspielt sein. Ganz klar ist aber: Die gewählten Icons unterstützen die Aussage der Webseite und runden das gesamte Design ab.

Für jedes Webdesign-Projekt immer neue Icon Sets zu entwerfen, steht jedoch in keinem Verhältnis. Schließlich gibt es zahlreiche Plattformen, die wunderbare Icon-Sätze bieten. Zugleich ist der Pool an kostenlosen Icon Sets so riesig und unübersichtlich, dass die Suche nach Icon-Schätzen sich ganz schön ziehen kann. Wie bei Web Fonts verliert man sich schnell im Vektoren-Wald - die Grafiken und die kreative Vielfalt ist ja auch schön anzusehen.

font awsome icons

Bei unseren Projekten nutzen wir FontAwesome - ein Open Source Projekt für hochwertige Vektor Icons und Social Logos - sehr gerne. Interessanterweise haben die Macher Ende 2016 eine der erfolgreichsten Kickstarter Kampagnen in der Branche geführt, mit 35.550 Backern und $1,076,940 die meistfinanzierte Software.

heisenberg flaticon

Sollen es andere Icons sein, nutzen wir genauso gerne flaticon.com. Da findet man die ausgefallensten Icons, inklusive Heisenberg.

Hier ein kleine Auswahl unserer Lieblinge unter den kostenlosen Flat Icon Sammlungen:

Flat Icon Sammlung Bildungsbereich

education flat icons

veröffentlicht von: Popcorn Arts
Download Format: Vector icon (SVG & EPS), PNG und PSD

Energie Icons

energy icon setveröffentlicht von: Zlatko Najdenovski
Download Format: Vector icon (SVG & EPS), PNG, PSD und Iconfont

Icons auf Weltreise

monument icon sammlungveröffentlicht von: Zlatko Najdenovski
Download Format: Vector icon (SVG & EPS), PNG, PSD und Iconfont

Landschaften Icon Set

icon satz landschaftenveröffentlicht von: Popcorn Arts
Download Format: Vector icon (SVG & EPS), PNG und PSD

Icon Satz Marketing

marketing icon packveröffentlicht von: Zlatko Najdenovski
Download Format: Vector icon (SVG & EPS), PNG, PSD und Iconfont

Menschen Icons

people flat iconsveröffentlicht von: Roundicons
Download Format: Vector icon (SVG & EPS), PNG, PSD und Iconfont

Icon Sammlung Berufsfelder

professionals icon setveröffentlicht von: Freepic
Download Format: Vector icon (SVG & EPS), PNG, PSD und Iconfont

Office Icon Set

office icon setveröffentlicht von: Madebyoliver
Download Format: Vector icon (SVG & EPS), PNG, PSD und Iconfont

Coffee Icons

coffee icon sammlung

veröffentlicht von: Madebyoliver
Download Format: Vector icon (SVG & EPS), PNG, PSD und Iconfont

 

 

Tabelle generieren und konvertieren: HTML, DIV TABLE und CSS

Tabellen sind der Klassiker, wenn es um die strukturierte Darstellung von Informationen geht. Sie sind flexibel in der Gestaltung und werten eine Website nicht nur optisch auf. Für den Nutzer erfassen die Inhalte in der Regel besser, wenn diese gut aufbereitet und in Spalten und Zeilen strukturiert sind.

 

So nützlich sie für den Besucher auch sind, für manche ist das Erstellen von Tabellen und Tabellengittern eine Sisyphos-Arbeit. Vor allem ungeübte Hände haben beim Webdesign oft Probleme, Ihre Vorstellungen umzusetzen - trotz der vielen Plug-Ins, die es in modernen Content Management Systemen gibt. Abhilfe schafft die Website divtable.com mit einem Tabellengenerator, der sehr einfach zu bedienen ist.

tabelle generieren mit divtable

Individuelle Tabellen generieren

Unter divtable.vom/generator haben Sie die Möglichkeit, mit wenigen Klicks eine Tabelle nach Ihren Vorstellungen zu generieren. In den “Settings” wählen Sie zunächst zwischen der Verwendung von Table tags und Div tags - nutzen Sie letzteres, werden Ihnen die entsprechenden CSS-Befehle vom Tool mitgeliefert.

 

Weiterhin bestimmen Sie die Stärke des Tabellenrahmens und die Tabellenbreite in Pixeln oder Prozent. Für das Cell Padding (Abstand des Zelleninhalts vom Zellenrand) können Sie ebenfalls einen Wert vergeben.

 

divtable generator zur tabellenerstellung

 

Das vorgegebene Tabellengitter auf der rechten Seite hilft Ihnen dabei, die Anzahl der Spalten und Zeilen ohne großen Aufwand zu bearbeiten. Im visuellen Editor können Sie durch die Bedienflächen einzelne Spalten oder Reihen ober- oder unterhalb hinzufügen oder entfernen.

 

Bei der Verwendung von Table Tags bieten die Table properties weiterführende Einstellungsmöglichkeiten wie die Ausrichtung, Werte für das Cell spacing (Abstand der Zellen zum Tabellenrand) oder Farben für Rahmenlinie und Hintergrund.

 table properties bestimmen

Vorhandene Tabellen konvertieren

Mithilfe des Online-Tools können Sie nicht nur eine eigene Tabelle generieren, sondern auch vorhandene Tabellen mit Table Tags in Tabellen mit Div tags umwandeln. Auch beim Table Converter unter divtable.com/converter gibt das Tool die Angaben für Ihre CSS-Datei dazu.

 

divtable converter

 

Im visuellen Editor, dem HTML-Editor und den CSS-Befehlen können Sie gegebenenfalls Anpassungen vornehmen, um Ihre Tabellen weiter zu personalisieren und Inhalte einzutragen. Anschließend kopieren Sie einfach die benötigten Elemente und binden sie in Ihren Beitrag bzw. die CSS-Datei ein. Et voilá - da ist die gewünschte Tabelle mit all den gewünschten Komponenten!

Barrierefreies Webdesign

Bei der Erstellung einer Webseite spielen viele Kriterien zusammen: Die Optik, eine gute Struktur und eine intuitive Menüführung zum Beispiel. In den letzten Jahren bekommt außerdem ein weiterer Punkt immer mehr Relevanz: Barrierefreies Webdesign - auch Web Accessibility genannt.

Durch die Berücksichtigung von Kriterien, die einen barrierefreien Zugang zum Internet garantieren, bieten sich für Sie als Webseitenbetreiber und für Ihre Kunden nur Vorteile. Wir haben die wichtigsten Punkte zusammengefasst.

Barrierefrei heißt offen für alle

Was ist barrierefreies Webdesign?

Beim erstellen einer Website steht für den Betreiber oft die Optik an erster Stelle. Doch dabei sollte nicht vergessen werden, dass Menschen mit einer motorischen Einschränkung besonders auf den Service von Online Angeboten angewiesen sind.

Für 30 % der Deutschen ist Barrierefreiheit im Internet notwendig:

  • Web Accessibility hilft Menschen mit einer Sehschwäche
  • Menschen mit motorischen Einschränkungen fällt die Bedienung der Website wesentlich leichter
  • Einfache Texte sind für Nicht-Muttersprachler, Menschen mit einer geringeren Lesekompetenz und jeden anderen leicht und schneller verständlich

Deshalb ist ein barrierefreies Surfen im Internet für 10% in Deutschland sogar unerlässlich:

  • 7,5 Millionen Menschen in Deutschland haben eine anerkannte Schwerbehinderung
  • Ein barrierefreies Webdesign ist auf die Verwendung einer reinen Tastatursteuerung, Braille-Zeilen, einer Sprachausgabe oder eines Joysticks abgestimmt
  • Durch eine überdurchschnittlich hohe Internetnutzung sind sie als Online-Kunden eine relevante Zielgruppe

Warum hilft ein barrierefreies Webdesign allen Usern?

Die Berücksichtigung der Web Accessibility Kriterien ist für 100% der Internetnutzer hilfreich. Wenn Sie Ihre Website für alle potentiellen Kunden zugänglich machen möchten und ein barrierefreies Webdesign einsetzen, fördert das garantiert die Usability.

  • Eine leichte und intuitive Bedienbarkeit hilft allen Kunden
  • Ein hoher Kontrast macht Ihre Text noch besser lesbar - auch bei Sonneneinstrahlung auf dem Smartphone
  • Einfache Texte werden schneller erfasst

Doch wie wird eine Website barrierefrei?

Eine bestehende Website barrierefrei zu machen, kann unterschiedlich komplex sein. Der Arbeitsaufwand hängt von der Art der Inhalte, der Größe und Struktur der Seite ab.

Wer bereits bei der Erstellung bzw. dem Redesign der Website die Grundlagen der Barrierefreiheit mit einplant, hat einen großen Vorteil gegenüber einer ergänzenden Implementierung.

Barrierefreies Webdesign ist modern

Kriterien für barrierefreies Webdesign

Auf diesen sechs Säulen steht Web Accessibility:

1. Schrift & Kontrast

Um einen Text gut lesen zu können, benötigt dieser einen hohen Kontrast zum Hintergrund. Je kleiner die Größe des Textes ist, umso wichtiger ist die Kontraststärke. Dabei sollten außerdem Fehlsichtigkeiten, wie eine Rot-Grün-Schwäche berücksichtigt werden.

Überprüfen Sie jetzt den Kontrast Ihrer Website auf seine Barrierefreiheit mit dem Contrast Checker.

2. Bedienflächen

Größe ist nicht nur im Zusammenhang mit Schrift ein wichtiger Aspekt. Auch bei Schaltflächen und Links ist es wichtig, dass diese einfach anzuwählen sind. Was mit der Maus noch zu schaffen ist, benötigt auf dem Tablet häufig Fingerspitzengefühl.

3. Bildoptimierung

Sie haben sich gefragt, warum beim Einfügen von Bildern neben der Bildüberschrift noch ein alternativer Text angefordert wird? Diese Alternativtexte, mit dem Alt-Attribut gekennzeichnet, werden von Vorlese-Systemen genutzt, um einen Bildinhalt durch die Sprachausgabe zu beschreiben. Ein optimiertes Alt-Attribut wird auch von der Suchmaschine positiv gewertet und hat Auswirkungen auf das Ranking.

Überprüfen Sie Ihre Alt-Attribute mit dem Web Accessibility Evaluation Tool: Einfach links den Reiter “No Styles” auswählen und eine Übersicht der Alt-Beschriftungen erhalten.

4. Sprache

Eine gut verständliche und einfach formulierte Sprache erreicht jeden Nutzer und vermeidet Missverständnisse. Kurze Sätze, ein einfacher Satzbau und wenig Fremdwörter gelten als grundsätzliche Kriterien für Online-Texte.

5. Struktur

Semantische Auszeichnungen strukturieren eine Website und unterteilen sie in abgetrennte Bereiche. Menschen mit einer Sehbehinderung nutzen semantische Auszeichnungen, um die Struktur einer Seite zu erfassen und sich zu orientieren.

Das Web Accessibility Evaluation Tool überprüft neben dem Alt-Attribut auch die Codierung des Textes. Sind alle Überschriften, Texte, Listen etc. sinnvoll ausgezeichnet?

6. Formulare

Kontaktformulare sind ein wichtiges Tool zur Kundenakquise und zum Abschluss eines Online-Einkaufs sind sie essentiell. Doch nur barrierefreie Formulare können alle Kunden mit Ihnen in Kontakt treten bzw. bei Ihnen einkaufen.


Die Berücksichtigung der Akzeptanzkriterien für ein barrierefreies Webdesign fördern nicht nur den Inklusionsgedanken, sondern kombinieren alle Grundlagen einer modernen Website. Wenn Ihre Seite also barrierefrei ist, ist Sie auch responsive, klar strukturiert und für die Suchmaschine optimiert.

Inklusion durch barrierefreies Webdesign

Die Bedeutung der Infografik im Zeitalter des Überfliegens

infografik anatomy of infographics

Die Infografik zur Infografik: On-point-Visualisierung zum Thema Informationsgrafiken. (Quelle: graphicdesigndegreehub.com)

In unserer von Schnelllebigkeit und von kurzer Aufmerksamkeitsspanne geprägten Zeit erleben Infografiken einen regelrechten Boom. Die smarten Daten-Visualisierungen erobern die soziale Netze und werden geshared und geliked was das Zeug hält. Kein Wunder, denn die für den Konsumenten kompakt und visuell ansprechend verpackten Informationen, lassen sich leicht verdauen und prägen sich einfacher ein.

Grafik zum Menschen in idealisierten Proportionen

Dabei ist die Infografik nichts neu Erfundenes. Schon immer stellten Menschen Erlebnisse, Geschichten und Daten bildlich dar. Ein besonders schönes Beispiel für die lange Tradition der grafischen Aufbereitung von Wissen ist der Vitruvianische Mensch. Diese Zeichnung von Leonardo da Vinci, die den Menschen in idealisierten Proportionen abbildet, stellt eine Infografik aus dem Jahr 1490 dar.

Dieser Beitrag widmet sich der Informationsgrafik als wirksames (Content-) Marketinginstrument, ihren Vor- und Nachteilen sowie ihren Anwendungsbereichen. Erfahren Sie außerdem, welche Tools es gibt, um Infografiken zu erstellen und welche Informationsgrafiken zu den Favoriten unserer Redaktion gehören.

Da Vincis vitruvianischer Mensch - eine der ältesten Infografiken (Quelle: WikiCommons)

Infografiken erstellen - von der Kunst Inhalte visuell in Szene zu setzen

Grafik zum Thema Storytelling

Storytelling Webdesign on the rise: Diese Informationsgrafik zeigt die Entwicklung vom Geschichten-Erzählen (Quelle: iversity.org)

Was sind Infografiken

Der Infografik-Begriff ist im Wandel. Während man einfache Visualisierungen von Daten

bereits im alten Ägypten in Form von Hieroglyphen antrifft, beschreiben Infografiken heutzutage vergleichsweise weiterentwickelte Formen graphischer Darstellung, die wesentlich mehr Aspekte umfassen:

Typische Elemente von Informationsgrafiken:

  • strukturierte Führung durch ein Thema
  • kompakte, übersichtliche und präzise Darstellung komplexer Zusammenhänge
  • aufgelockerte “Textsorte”: wenig Text belebte durch zahlreiche Grafiken
  • anschauliche Aufbereitung von Inhalten
  • besitzen über die sozialen Medien hohes virales Potenzial

 

Heiße 2016-er Trends im Design

Unser Favorit in der firmennest Webdesign Berlin Redaktion zur übersichtlichen und unterhaltsamen Darstellung der Webdesign Trends 2016 (Quelle: oastalcreative.com)

Anwendungsgebiete:

  • zur Darstellung zeitlicher und räumlicher Zusammenhänge
  • Verdeutlichung bei der Gegenüberstellung von Vorteilen und Nachteile und deren Gewichtung
  • bei Stammbäume und andere Verzweigungen
  • bei Vergleichen und Typisierungen
  • zur Veranschaulichung von Funktionsweisen und bei Anleitungen
  • bei Diagrammen und Statistiken
  • Aufbereitung von Details via Lupenblick

 

CMS Vergleich Daten visuelle aufbereitet.

Wordpress vs. Joomla: Grafische Gegenüberstellung der beiden CMS Systeme (Quelle: redgiantdesign.co)

Was macht eine gute Infografik aus?

  • Recherche: Das (richtige) Thema muss in der Tiefe recherchiert worden sein – nur dann ist es möglich, das zu vermittelnde Wissen in der Infografik gebündelt und präzise aufzubereiten.
  • Thema visualisieren: Die Aufbereitung muss zum Thema passen. Ob Flussdiagramm, Zeitwahl, Bildstatistik, Gegenüberstellung oder Kartographie, jedem Bereich kann eine besonders passende Visualisierung zugeordnet werden.
  • Die optische Darstellung muss stimmig sein und die Grundregeln für Grafikdesign beachten. Farbbalance, Psychologie der Farben, Goldener Schnitt, Gewicht und vieles mehr sorgen für ein harmonisches und professionell wirkendes Bild. Das Design überlässt man entweder einem Profi, oder man nutzt eines der zahlreichen verfügbaren Tools.
  • Damit eine Infografik „einschlagen“ kann, muss sie natürlich an den richtigen Stellen verbreitet werden.

 

UX ist wichtiger Bestandteil modernen Webdesigns geworden. Warum, das zeigt diese Grafik.

Grafik-Favorit des Redaktionsteams zum Thema User Experience bzw. User-Centred-Design (Quelle: paznow.com)

Vorteile von Infografiken

Infografiken haben für die Leserschaft insofern eine sehr hohe Attraktivität, weil sie helfen, Informationen schnell aufzunehmen und sich in kürzester Zeit einen Überblick über ein komplexes Thema zu verschaffen. Unser moderner Alltag ist geprägt von zahlreichen Ablenkungen. Mit der Flut an Informationen wird unsere Überforderung größer und unsere Aufmerksamkeitsspanne immer kürzer. Oft Überfliegen wir Informationen nur noch.

Eine Infografik, wenn sie gut gemacht ist, vermag es komplexe Zusammenhänge anschaulich und einfach darzustellen und zugleich den Eindruck von gründlicher Recherche und kompetenter Wissensaufbereitung sowie -vermittlung zu hinterlassen. Die Leserschaft honoriert diese journalistisch und visuell aufgearbeitete Erklärstücke als Signal für fundierte Vermittlung von Informationen. Denn der Aufwand, der dahinter steht, Daten „auf den Punkt“ herunterzubrechen, ist oft immens.

Auch aus neurowissenschaftlicher Sicht bieten Infografiken Vorteile: Das Erinnerungsvermögen ist stärker an Bilder als an Texte geknüpft, wodurch Grafiken einen größeren Langzeiteffekt haben. Die Kombination aus Text und Bild sorgt insgesamt für das beste Verständnis.

Darüber hinaus funktionieren Infografiken als klassisches Content-Marketing, was auch die Verbreitung in sozialen Netzwerken einschließt: Schnell ist eine Grafik erfasst und weiter verbreitet. Mit anderen Textinhalten ist das in dieser Form nicht möglich.

Die Vorteile im Überblick:

  • optimale Kommunikation on-point
  • mehr Traffic durch weite Verbreitung
  • verbessertes SEO-Ranking durch eingehenden Links und virale Verbreitung
  • größere Reichweite und potenziell neue Kunden
  • gesteigerte Markenbekanntheit und Vertrauen

 

SEO-Infografik Periodensystem der chemischen Elemente

Suchmaschinenfreundliches Webdesign = erfolgreiches Webdesign: Mit dieser SEO-Infografik wird’s einfacher. (Quelle: searchengineland.com)

Neben den Vorteilen von Infografiken wären auch ein paar Nachteile zu nennen:

  • Zeitaufwand: Informationsgrafiken werden mit sehr viel Handarbeit erstellt sind entsprechend zeitaufwändiger und dadurch häufig einfach preisintensiver in der Erstellung als beispielsweise Texte.
  • Themenrelevanz: Die übersichtlichen Grafiken eignen sich insbesondere für “heiße” und diskussionsreiche Themen. Hat man auf das falsche Thema gesetzt, verfehlt sie ihren Zweck.
  • SEO-Relevanz: Da die Suchmaschine den Text in der Grafik nicht auslesen kann, sind Infografiken schwieriger für Google zu optimieren. Zusätzlicher Text, der die Grafik beschreibt, ist dann für die Onpage-Optimierung vonnöten.
  • Es lassen sich keine „echten“ Links einbauen. Die Urheber können nur hoffen, dass diejenigen, die die Infografik verwenden die Quelle nennen.

 

Infographic: Simple Webdesign

Redaktions-Pick zum Thema Webseitengestaltung (Quelle: lemongraphic.sg)

Infografik-Tools im Überblick

  • easel.ly
  • piktochart
  • infogr.am
  • Venngage
  • Google Databoard
  • Visual.ly
  • Tableau Public
  • What About Me?
  • Vizualize.Me
  • InFoto und Photo Stats
  • Dipity und Timeline JS
  • GeoCommons

 

Infografik passend zur Weihnachtszeit

Aus gegebenem Anlass: So überleben Sie die (Vor-)Weihnachtszeit. (Quelle: mint.com)

Webdesign-Trends 2017: Was kommt, was bleibt?

Das Internet ist schnelllebig – was vor einigen Jahren noch wie eine Drohung klang, ist mittlerweile zum Selbstverständnis von Webdesignern und anderen Onlinebranchen-Spezis wie SEOs geworden. Die neuesten Entwicklungen ständig im Blick zu haben oder sogar selber mit voranzutreiben, ist elementarer Bestandteil solcher Jobs geworden.

Deswegen dürften die Webdesign-Trends 2017 auch nicht aus heiterem Himmel kommen, sondern die logische Konsequenz des letzten Jahres sein. Worauf sich im Webdesign im kommenden Jahr der Fokus legt und welche Trends von 2016 fortgesetzt werden, zeigt Ihnen unser Überblick. Der ist nicht nur für Webdesigner und alle die, die es werden wollen, aufschlussreich, sondern auch für diejenigen, die in Zukunft Webdesign-Dienstleistungen in Anspruch nehmen möchten.

Webdesign 2017: Der Anspruch steigt

Schaut man sich die einzelnen Trends für das nächste Jahr an, lässt sich die Prognose insgesamt mit folgender Aussage zusammenfassen: Webdesign wird 2017 anspruchsvoller. Aber auf welchen Ebenen genau?

Das mobile Design übernimmt zukünftig die Hauptrolle

Die Erkenntnis, dass immer mehr Suchanfragen über mobile Endgeräte gestellt werden, hebt die Welt nicht mehr aus den Angeln – responsive Design gehört mittlerweile bei jedem Projekt zum Paket dazu. Die Reihenfolge war dabei stets die gleiche: erst die Desktop-Version, dann das mobile Design, sprich die Anpassung der Website auf responsive Ansichten.

Webdesign Trends 2017

Mobile Ansicht gewinnt als Ranking-Faktor an Bedeutung

Mit diesem Design-Prozess dürfte es 2017 zu Ende sein, denn reine Desktop-Designs können heutzutage sogar zu Ranking-Verlusten führen. Nur wer mit seiner Seite dem Motto “mobile first” folgt, hat Chancen auf eine gute Platzierung und muss keine Abstrafung durch Google fürchten – was in einigen Fällen nicht-responsiver Seiten bereits vorgekommen ist. So ist für das kommende Jahr also zu erwarten, dass die Ansicht zunächst auf Smartphones und Tablets optimiert wird und dann erst die Desktop-Variante folgt.

Schnell, schneller, Page Speed

Zeit ist ein kostbares Gut. Deshalb kann Usern die Ladezeit einer Seite auch gar nicht gering genug sein, schnell setzt sonst der Frust ein und der potenzielle Kunde oder Leser springt ab. Wichtig bei den Webdesign-Trends 2017 wird deshalb auch die Optimierung auf superschnelle Ladezeiten.

Webdesign-Trends 2017

Bisher liegt die Messlatte nicht besonders hoch. Aus dem Hause Google kommt die Wunschvorgabe von maximal 1,5 Sekunden: Innerhalb dieser Zeit soll sich eine Website komplett geladen haben. Dabei könnte sich der Ladevorgang noch wesentlich schneller gestalten, vor allem bei Startseiten und bspw. Blog-Übersichtsseiten. Eine Ladezeit von unter einer Sekunde liegt hier durchaus im Rahmen des Machbaren und das sogar bei vergleichsweise geringem Aufwand. Baut sich hingegen ein einzelner Artikel innerhalb von 1,5 Sekunden auf, wäre dies für solch komplexere Seiten ein akzeptabler Wert.

Startseite bzw. Artikelübersicht könnten mit den verfügbaren Mitteln sogar innerhalb einer halben Sekunde laden. Was im Webdesign möglich (und sinnvoll) ist, wird deshalb 2017 auch möglich gemacht werden.

Storytelling: Aus erfahrbar wird interaktiv

Wie schon im Bereich mobile Design ist auch im Bereich Storytelling erkennbar, dass der Trend der letzten Jahre 2017 weitergeführt bzw. verfeinert wird und einen größeren Stellenwert einnimmt.

Dank Storytelling wird aus einem Webseiten-Besuch ein erfahrbares Erlebnis für den User. 2017 rückt dann verstärkt interaktives Storytelling in den Fokus: Bei jedem Mal Scrollen verändert sich der Bildschirminhalt. Auf solchen Parallax Scrolling Websites Weise entsteht eine ganze Geschichte, die den Kunden an die Seite bindet. Insider sind sich einig: Der Aufwand dafür ist zwar hoch, wird sich aber auszahlen und interaktives Storytelling sich dementsprechend durchsetzen.

Webdesign-Trends 2017: Handarbeit hoch im Kurs

Wirkung und Nutzen von Bildern, insbesondere von bildschirmfüllenden Hero Images, sind für das Webdesign schon seit Längerem unbestritten. Hier wird sich der Fokus 2017 aber verschieben – weg von Stockbildern hin zu eigens angefertigten, individuell auf den Kunden angepassten Illustrationen und Fotos. Dieser aufwändige und nicht ganz preiswerte Trend soll die Einzigartigkeit eines Webseitenbesuchs für den Kunden unter Beweis stellen und gleichzeitig den Wiedererkennungswert des Unternehmens steigern.

Ob und wie sich diese Trends bei einzelnen Projekten umsetzen lassen, kommt aber immer ganz auf das Projekt an. Nicht jede der hier skizzierten Entwicklungen passt auch zu jedem Kunden und seinem Produkt. Sehen Sie diese Trends also nicht als Schablone für kommende Webdesigns Ihrer Seite; eine professionelle Webdesign-Agentur bietet Ihnen immer eine individuelle Lösung.

 

Jetzt unverbindlich und kostenlos beraten lassen!

030 53 08 82 35