Posts Tagged "One-Page-Design"

Wie viele  Dinge unterliegt das Webdesign Trends und folgt technischen Entwicklungen. Profis wissen: aktuelle Designs, Stilsicherheit und Modernität ziehen Besucher an und lassen sie länger auf den Seiten verweilen.

Was sind die derzeit angesagtesten Webdesign-Trends?

Seit einiger Zeit ist bei den Webdesign Trends das sogenannte Flat-Design aktuell. Flat-Design arbeitet mit klaren Farben und Strukturen. Typische Vertreter des Flat-Designs sind Windows-8 und Apple iOS 7. Sowohl Microsoft als auch Apple haben diese Designvariante bekannt gemacht. Das gerade erschienene Update des neuen Apple Betriebssystem OS X Yosemite geht nochmals einen Schritt in diese Richtung.

Flat-Design bedeutet Minimalismus, arbeiten mit reduzierten Oberflächen, ohne Schattierung, ohne Material-Imitaten oder imitierten Oberflächenstrukturen, 3D-Effekten, Hochglanz oder verspielte Flash-Effekte.

Dabei wird nach wie vor viel „Whitespace“ eingesetzte, oder einfarbige klar gegliederte Hintergründe. Also keine Angst vor weißen Flächen. Bereits begonnen hat der Trend das Flat-Design in seiner statischen Struktur durch andere Design-Formen aufzulockern.

Typisch für diese Entwicklung sind die geänderten Banner / Slider. Älterer Banner haben fertige Bilder auf die eine oder andere Weise in das Bild „sliden“ lassen. Moderne Banner hingegen arbeiten mit einzelnen Elementen innerhalb der Sequenzen: Auf teilweise verschwommene Hintergründe fahren freigestellte Grafikelemente und gestaltend erklärende Texte. Das erzeugt ein hohes Maß an Abwechslung und Aufmerksamkeit und ist gleichzeitig informativ.

Parallax-Scrolling

Weitere Stilelemente die diesem Trend folgen sind einzelne Passagen, deren grafischen Hintergründe sich beim Scrollen mit der Maus anders bewegen als der Rest der Seite (z.B. entgegen der Scroll Richtung, oder schneller bzw. langsamer). Diesen Effekt nennt man Parallax-Scrolling und es bietet ein besonderes Scroll-Erlebnis. Leider hat es den Nachteil, dass es oftmals bei mobilen Geräten sehr ruckelig läuft. Es ist zu wünschen, dass 2015 bessere Lösungen zur Verfügung stehen.

Ein weiterer Trend: One-Page-Design

Der Trend momentan geht ganz klar weg von kompliziert verschachtelten Seiten hin zum One-Page-Design. Inhalte werden untereinander dargestellt anstatt auf einzelnen Seiten. Scrollen statt klicken.

Die Seiten erreichen dadurch zum Teil beachtliche Längen, und man muss sich mehr denn je Gedanken zur Gliederung, zum Layout und Inhalt machen. Es ist wichtig diesen Seiten eine Struktur zu geben, damit sich der Kunde nicht verliert. Häufiges Stilmittel hierbei ist, den verschiedenen Kapiteln (Segmenten) der Seite unterschiedliche Farben zu geben.

One-Page-Lösungen kommen in ihrem Design und ihrer Bedienbarkeit der Nutzung auf Tablest und Smart-Phones sehr entgegen.

Beispiel einer responsiven One-Page-Lösung, die ausgeprägt mit farblichen Segmenten arbeitet.

Beispiel One-Page Lösung Homepage-oldenburg.de

Responsives Webdesign

Diese oben beschriebene Art des Designs ist ganz eng verbunden mit dem Design für mobile Geräte. Das Stichwort hier lautet „responsives Webdesign“. Das Design soll sich inhaltlich und Layout technisch an die unterschiedlichen Größen der Displays von den mobilen Geräten anpassen. Seit Anfang 2013 ein riesen Thema bei den Webdesignern.

Bei mobilen Geräten ist das Scrollen durch Streichen mit den Fingern sowieso die bessere Lösung als das Fingerdrücken auf bestimmte Bereiche (Bottons). Somit sollten auch die klassischen Menüs flexibel gestaltet werden.

Beispiel für respnsives Design

Fullscreen-Hintergründe oder Videos

Ebenfalls im Webdesign Trend liegen ganzformatige Bilder oder Videos im Startsegment, über die das Firmenlogo oder einigen Slogans gelegt werden. Manchmal werden diese ganzformatigen Bilder auch als Slider dargeboten. Die Idee ist damit eine erste Einstimmung auf das Thema zu erzeugen.

Dieses Stilelement wird besonders gerne bei One-Page-Lösungen als oberstes Element eingesetzt. Klickt man dann auf einen „weiter Button“, fahren von unten das Menü und der erste Kontext ins Bild.

Dieser Trend wird sich fortsetzen. Zu lösende Aufgaben sind zukünftig bei dieser Technik die enormen Datenmengen, die insbesondere bei mobilen Devices ins Gewicht fallen.

Beispiel einer Seite mit einer Video-Sequenz im Startsegment

Ein anderes Beispiel eines ganzseitige Startsegments mit einer Video-Sequenz: https://www.sandra-schotten.com/

Metro-Design

Das Metro-Design ist allen spätestens seit Einführung von Windows 8 bekannt. Metro-Design bedeutet, man hat ein Kachel-Design. Die einzelnen Kacheln bestehen aus Grafiken oder Fotos, die meistens einen kleinen Text zeigen, wenn man mit der Maus darüber fährt. Dieser Text eröffnet dann einen Link , der zu weiteren Inhalten führt.

Hardcopy aus Instagram.com

Bekannte Seiten im Kacheldesign sind Instagram und Pinterest.

Auch im Kleinen und nur für bestimmte Bereiche hat sich das Kacheldesign durchgesetzt, ohne dass man es als solches wahr nimmt. Viele Webseiten bieten eine Galerie im Kacheldesign. Über eine Menüzeile können unterschiedliche Themengebiete ausgewählt werden. Die Kacheln sortieren sich dann neu und schließen die nicht gewählten Inhalte aus.

Diese Technik ist sehr gut geeignet, wenn man z.B. Fotos, Projekte und Arbeiten vorstellen möchte:

Eine Variation als Portfolio-Darstellung

Beispiel: Eine Variation des Metro-Designs zur Darstellung des Portfolios auf KRquadrat.com

Individuelle Typographie

Früher wurde fast ausschließlich auf sogenannte websichere Schriftarten zurückgegriffen (wie. z.B. Arial). Der Hintergrund ist, dass diese Schriftarten auf nahezu allen Geräten installiert sind. So wird sichergestellt, statische Layouts einer Webseite überall identisch wiederzugegeben.

Diese Zeiten sind vorbei, seit über CSS beliebige Schriftsätze eingebunden werden können. Webdesigner setzen immer mehr auf aussagekräftige Fonts und individuelle Typographie. Somit sind Schriftarten heute maßgeblich für die Ästhetik einer Seite verantwortlich und nicht mehr nur rein funktional.

Der Trend wird sich fortsetzen, besondere Schriften als Gestaltungselement einzusetzen. Nachteilig sind die damit verbundenen längeren Ladezeiten der Seiten.

Microinteractions und Ghost-Buttons

Dieser Webdesign Trend folgt der Tendenz, Internetseiten mehr im Sinne eines aktiven Marketings einzusetzen. Der Besucher soll zu einer Handlung und Aktion bewegt werden. Grundsätzlich ist das eine gute Idee. Allerdings nötigen geradezu speziell diese Techniken den Besucher, aktiv zu werden. Es ist zweifelhaft, ob ein Besucher das noch als positiv empfindet, da sein positives Surf-Erlebnis durch diese Methode nachhaltig gestört wird.

Beispiel einer Microinteraktion ist z.B. ein Fenster, das sich als erstes bei Aufruf der Seite automatisch öffnet und den Besucher auffordert, sich für eine Aktion oder den Newsletter einzutragen oder sich an einer Umfrage zu beteiligen. Der Besucher gelangt erst dann auf die eigentlichen Inhalte der Seite, wenn er dieses Fenster schließt oder das Formular ausfüllt.

Der Ghost Button ist ein Button, der über einen Hintergrund gestellt wird und durchsichtig ist. Fährt man mit der Maus über diesen Bereich, ändert sich der Mauszeiger in einen Aktionszeiger (z.B. vom Pfeil zur Hand) und signalisiert dem Anwender, dass man hier klicken kann (soll). Tut er es, wird eine Aktion ausgeführt, z.B. ein Umfragefenster geöffnet.

Auch diese Technik ist fragwürdig, weil der Besucher nicht weiß und sehen kann, was bei dem Klick passiert und ob es sich für ihn um eine interessante Aktion handelt. Auf jeden Fall wird sein Erkunden der Seite zu Werbezwecken unterbrochen.

Diese Trends, die aus den englisch sprachigen Ländern kommen, werden wohl zukünftig auch bei uns verstärk eingesetzt werden.

Zusammenfassung

Als wirklich innovativen Trend gab und gibt es aus Sicht der Webdesigner wohl nur das Thema responsives Webdesign. Auf diesem Gebiet sind noch einige technische Herausforderungen zu lösen.

Viele Seiten bezeichnen sich mittlerweile als responsive, aber wirklich konsequent umgesetzt sind sie in den meisten Fällen nicht. Wohl werden die Menüs bei Internet fähigen mobilen Geräten wie Smartphones umstrukturiert und der Inhalt entsprechend umgebrochen und angepasst. Aber eine Anzeigengröße abhängige komplette Umgestaltung und Anpassung des Layouts, der Inhalte sowie Bilder setzen die wenigsten Webdesigner konsequent um. Denn das würde auch beinhalten, dass je nach Größe und Möglichkeiten der Ausgabegeräte unterschiedliche Texte, Formatierungen und unterschiedlich optimiertes Bildermaterial zum Tragen kommen.

Das mag zum einen an der Komplexität des Themas liegen, das diejenigen Webdesigner überfordern dürfte, die ihre Kundenseiten bis dato mithilfe von Web-Buildern zusammen gestellt haben, ohne jemals eine einzige Zeile Programmcode geschrieben zu haben.

Zum anderen ist leider kaum ein Kunde bereit die nötigte Arbeitszeit zu honorieren, die ein komplett durchgestaltetes Konzept erfordern würde.

Welche Webdesign-Trends wird es also 2015 geben? Die aktuellen Trends werden wohl auch 2015 fortgesetzt. Spektakuläres Neues ist nicht zu erwarten. Ich gehe allerdings davon aus, dass immer mehr Unternehmen ihre alten Seiten aktualisieren und auf den neuesten Stand bringen werden.

Social Media

Ein weiteres großes Thema ist die Einbindung des Themas Social Media und die Sensibilisierung der Auftraggeber darauf. Auf diesem Gebiet trennt sich  zunehmend die Streu vom Weizen unter den Webdesignern. Der „Neffe“ und „Kumpel“ als Webdesigner sind genauso überholt wie statische Webseiten.

Social Media muss in Webseiten integriert werden und umgekehrt. Wer als Unternehmen erfolgreich am Markt agieren will, kommt um einen eigenen Blog zukünftig kaum herum. Auch dieser ist in Webseiten und Social Media zu integrieren. Gleichzeitig muss regelmäßig, aktuell und qualitativ hochwertig auf allen Kanälen kommuniziert werden. Das Ganze ist dann noch mit den klassischen Marketinginstrumenten zu kombinieren. Die Aufgaben eines guten Webdesigners setzen also mehr und mehr auch gute Marketingkenntnisse voraus, weil eine Internetseite einfach nicht mehr isoliert betrachtet und isoliert erfolgreich betrieben werden kann.

Schuld an diesem Dilemma sind die Suchmaschinen, vorneweg Google. Diese diktieren den Nutzern und Designern auf, wie Webseiten umzusetzen sind. Es steht natürlich jedem frei, sich nicht daran zu halten. Aber wer die Vorgaben mißachten wird von Google ignoriert. Die Zeiten, wo noch eine einfache Unternehmens-Visitenkarte im Netzt funktionierte, sind passé. Und so bin ich überzeugt davon, dass Google auch zukünftig ein entschiedenes Wort mitsprechen wird, wie Internetseiten technisch und gestalterisch umzusetzen sind.

Wir wollen, dass Ihre Kunden Sie gut finden!
MarketingWebdesign

Copyright: 2004 – 2017 | KRquadrat.com