(PDF) DESIGN-RATGEBER #2: Die wichtigsten Webdesign Facts im Überblick! NOV 2015

Transkript

1 DESIGNRATGEBER #2: Einleitung Nahezu jedes Unternehmen weltweit, welches größere Ziele verfolgt, ist heutzutage im Internet vertreten. Die logische Konsequenz einer immer größer werdenden Vernetzung auf globaler Ebene nach dem statistischen Bundesamt verwendeten im ersten Quartal des Jahres 2014 alleine in Deutschland ca. 80% der Bevölkerung (ab 10 Jahren) das Internet. Umso wichtiger ist es, dass gerade Sie sich mit Ihrer Firmenseite von anderen Websites abheben. Der initiale und womöglich wichtigste Schritt ist die Konzeption, worauf die optische Gestaltung sowie die Funktionalität basiert. #1 Das Konzept Aus konzeptueller Sicht gibt es viele Punkte zu beachten. Mit einigen Aspekten werden Sie sicherlich bereits im Vorfeld beschäftigt haben wie zum Beispiel die Zielgruppe, der generelle Fokus und die "Mission" Ihres Unternehmens / Ihres Projekts. Nun heißt es aber, das Konzept in Form einer Website umzusetzen. Die Umsetzung gestaltet sich sehr unterschiedlich: Sind Sie beispielsweise in einem Vertrieb der Süßwarenbranche tätig, so wird die Zielgruppe dabei oftmals gleich mehrfach definiert einerseits existieren in Ihrem Betrieb Süßwaren, die für eine Altersgruppe von 3 bis 16 Jahren bestimmt sind, andererseits vertreiben Sie aber auch Produkte, die Koffein enthalten und ab einem Alter von 16 Jahren freigegeben sind. Alle Produkte sollen aber gleichermaßen im Netz präsentiert und beworben werden. Die Schwierigkeit liegt also darin, die Gestaltung für alle entsprechenden Altersgruppen so effektiv und interessant wie möglich zu halten. Eine Möglichkeit wäre, für jede Zielgruppe das Design komplett anzupassen, die sich einer generellen Maske unterordnen. Solche "Subdesigns" können minimale Abänderungen des jeweiligen Layouts beinhalten, indem grafische Elemente hinzugefügt oder abgeändert werden oder sich gleich auf ganzer Ebene beziehen, wobei zumeist eine übergeordnete Navigation beibehalten wird. Die Rede ist von einer Art Kombinationslösung verschiedener Bereiche. Seit einigen Jahren lässt sich aber zusätzlich eine weitere, modernere Variante als alternative Lösung derartiger Fragen immer häufiger beobachten, was mit der stetig zunehmenden Popularität von Geräten wie Smartphones und Tablets zusammenhängt: Die Navigation der Website wird hierbei nicht nur mehr ganz klassisch durch das Anklicken der verschiedenen Menüpunkte bedient, stattdessen rückt der Seitenwechsel überwiegend in den Vordergrund, der durch das vertikale Scrollen (zum Beispiel im Rahmen eines OnePageDesigns, siehe Abschnitt 3.3) eingeleitet wird. 01

2 DESIGNRATGEBER #2: Obwohl sich viele erwähnenswerte Webde schiedlich erweisen, lassen sich bei näherem meinsamer Elemente festmachen. Das richstarke Landing Page tragen enorm dazu bei, wenn es darum geht, den Besucher bzw. den Kunden von der eigenen Seriösität zu überzeugen und zum Angebot zu lenken. nd mit grafischen Elementen im Zentrum des wiederum mit einem weiterführenden Link zum Angebot ergänzt werden. Zum Anderen unterteilt werden, die sinngemäß unterschiedlichen Content beinhalten. #2.1 Die Landing Page Es handelt sich hierbei um die Seite, die der Nutzer sieht, wenn auf einen externen Link (beispielsweise auf Suchmaschinenergebnisse oder Verlinkungen auf anderen Webseiten) oder auf eine Werbefläche geklickt wird. Die Landing Page gestaltet sich sehr individuell und je nachdem, was gerade bezweckt wird: So ist es nicht verwunderlich, dass Provider den Loginbereich ihres Service zur Landing Page machen. Erfahrungsgemäß sollte sich die Landing Page genau auf das Wesentliche konzentrieren, gleich zum Punkt kommen und nicht zu überladen wirken. Im Internet herrscht eine große Konkurrenz, die der Internetnutzer wahrnimmt und in seiner Art und Weise der Nutzung aufnimmt. Unübersichtliche Seiten, die unter Umständen mehrere Ziele verfolgen, werden dementsprechend häufiger vermieden. Die Landing Page darf sozusagen mit der Titelseite der BildZeitung verglichen werden: Es soll kurz und "knackig" das Interesse anregen und ein Ziel verfolgen, welches direkt zum Vorschein kommen muss. Hierfür schiedene Möglichkeiten: #2.2 Das Logo Das Logo sollte auf Ihrer Website gut sichtbar sein. Übertreiben bzw. untertreiben Sie es mit der Größe aber nicht. Es gilt die Prämisse: Ein wirklich gutes Logo wirkt auch in einer angemessenen Größe einprägsam und sollte auch dann leicht wiederzuerkennen sein. 02

3 DESIGNRATGEBER #2: #2.3 Der Slider als EyeCatcher Der Sinn und Zweck eines Sliders ist das Hervorheben eines bestimmten Contents, was häufig bereits am Anfang des Contentbereichs erfolgt. Eine weitere Besonderheit liegt darin, dass der hervorgehobene Content dem Betrachter auf mehreren Ebenen abwechselnd und in der Regel mit animierten Übergängen präsentiert wird. Unternehmen mit einem zu vermarktenden Produktangebot entscheiden sich hier oftmals für einen FullScreenSlider (zum Beispiel: Amazon.de), der sich automatisch an die aktuelle Bildschirmbreite des Geräts anpasst und so gesehen aus einer Collage von Foto, weiteren Grafik und Schriftelementen besteht. Dabei wird stets der Fokus auf große Fotound Bildelemente und im Vergleich hierzu eher platzsparenden Typografien gelegt. So kann beispielsweise ein Online Shop für Damenschuhe über den Slider die Aufmerksamkeit des Besuchers auf die aktuellen Angebote oder Bestseller lenken und durch den dynamischen Sliderwechsel mit den damit sich wechselnden Produktvorführungen entsteht gleichzeitig eine gewisse Einkaufsatmosphäre. Auch Videos können in den Slider eingebaut werden, die den zuvor beschriebenen Effekt wiederum deutlich verstärken. Der wohl größte Nachteil eines FullScreenSliders liegt in dem Platzverbrauch. Wenn eine Website viele Informationen hergeben soll, so erscheint die Sliderkomponente sicherlich ungünstig. Wer aber überhaupt nicht darauf verzichten kann, für den dürfte die Verwendung eines Sliders mit einer fixierten und angemessenen Größe eine Lösung des Problems sein. #2.4 Der Footer Während der letzte Abschnitt einer Website traditionell als "Footer" bezeichnet wird, hat sich auch hier über die letzten Jahre hinweg vieles an der Funktionalität geändert. Hier hat sich regelrecht ein Wandel von einem einfachen Abschnitt, in dem die Urheberrechtshinweise zu sehen waren, zu einer Art Hilfsnavigation vollzogen. Im Footer werden insbesondere die internen Links, also diejenigen, die zu wichtigen Informationen um und über das Unternehmen führen, blockweise platziert. Diese müssen gut sichtbar sein, daher handelt sich nicht selten beim Footer um einen Abschnitt, der sich vom restlichen Design abspaltet und nicht durch zusätzliche Elemente beeinflusst wird. 03

4 DESIGNRATGEBER #2: #3 Verschiedene Webdesign Trends Insgesamt kann behauptet werden, dass sich die WebdesignSzene innerhalb der vergangenen 10 Jahren weg von den überfüllten Seiten mit klassischen links oder rechtsbündigen Menüs hin zum Layout mit viel Platz, zentralisierten Elementen und dynamischer Layout besteht nun nicht mehr aus einer dern ist viel mehr freigestellt. Durch Designeinflüsse von Vorreitern wie Google, Grundgedanke immer stärker propagiert. Internet wird immer schneller und kann dadurch auch größere Grafiken mit einer angemessenen Geschwindigkeit laden. Die Auflösung diverser Geräte verbessert sich ändert sich und das Internet wird immer mehr in den Alltag eingebaut, dient also Altersgruppen. Neue Computer bzw. Internetsprachen wie HTML5 bringen diesbezüglich neue Möglichkeiten mit sich, etc. Hier grob die verschiedenen Trends der letzten und aktuellen Zeit im Überblick: #3.1 Responsive Design Das Design wird so ausgelegt, dass es sich auch an den kleineren SmartphoneBildschirmen. Dies gelingt zum Einen durch flexible Anordnung aller Layoutelemente Anderen durch eine neue und angepasste mten Breitengröße oder bei diversen Geräten angezeigt wird. Die Vorteile eines Responsive Designs liegen klar auf der Hand und benutzerfreundliche Website auf allen Grafikelemente müssen so konzipiert sein, Ausserdem sollte darauf geachtet werden, nicht zu viele Elemente in das Layout aufzunehmen, da dies ansonsten in stundenlangem Scrollen enden würde. Abhilfe könnte hier jedoch OffCanvas verschaffen. #3.1.1 OffCanvas Um genau das zuvor beschriebene Problem zu vermeiden und den Nutzer beim Scrollen zu entlasten, wird bei OffCanvas ein Teil des Inhalts in den seitlichen, nicht sichtbaren Bereich des Smartphone bzw. TabletDisplays versetzt. Diese Teile können durch bes schirmbereich geholt werden. Je größer die Bildschirmgröße, desto mehr deckt sich der Bereich stufenweise auf. Ein ziemlich beliebtes Feature bei Apps (unter anderem Facebook), welches aber zur Zeit immer weiter in den Fokus der Webdesigner rückt: Ein Beispiel liefert uns der Slider der Marke der nachfolgenden Abbildung zu sehen ist: Selbst bei einer Bildschirmbreite von 1600 px ist der Slider, welcher aus drei Banner bestewerden mit Hilfe von JavaScript abwechselnd 04

5 DESIGNRATGEBER #2: von rechts nach links innerhalb bestimmter Zeitintervallen geschoben. Dabei geraten die beiden äußeren außerhalb des Bildschirmrands, zur rechten und linken Seite. Bei einem größeren Bildschirm wäre der Slider komplett zu sehen. Bei der Betrachtung über ein Smartphone ist es genau umgekehrt: Hier ist nun nur noch der mittlere Banner zu sehen. hatte Microsoft selbst den Stil bereits vor einiger Zeit in "Modern UI" umbenannt und Richtlinien hierzu veröffentlicht. Die Idee der geometrischen Regelmäßigkeit und der reduzierten Funktionalität ist hierbei keine Neue und erinnert stark an den Bauhausstil. Es ist womöglich Microsofts Antwort auf den Erfolg von Google und Apple, mit der eigenen MinimalismusDesignStrategie. Neben dem Kachel Design von Microsoft Windows 8.1 bietet auch silktricky.com ein gutes Beispiel für das Metro Design: #3.2 Metro Design Angelehnt an Microsofts letzte WindowsErscheinungen, bei den gerade das Kachel Design eine besonders große Rolle spielt, kann dieser Trend auch bei einigen wirklich gelungenen Webdesigns gesichtet werden. Das "Metro" Design verzichtet konsequent auf alle dreidimensional wirkenden Effekte, wie beispielsweise den Schlagschatten oder einige Texturen. Dabei soll eine klare und deutliche Typografie sowie einfache und simple Icons im Vordergrund stehen. Im Mittelpunkt des Ganzen: Die Kacheln gleich große, regelmäßige und nebeneinander liegende, eckige Kästen, die je nach Designer einer unterschiedlichen Anordnung unterzogen werden, ohne dabei den Grundgedanken der gleichmäßigen Ordnung zu verlieren. Um Verwirrungen zu vermeiden, #3.3 OnePage Design Wie der Name bereits verrät, geht es hier um eine Einzelseite, wobei die verschiedenen, logisch angeordneten Abschnitte durch Scrollen erreicht werden können. Zusätzlich wird üblicherweise eine Navigation im Header oder Seitenbereich der Seite 05

6 DESIGNRATGEBER #2: eingebaut, die bei Verwendung den Nutzer mit Hilfe zuvor gesetzter Ankerpunkte zum gewünschten Abschnitt durch schnelles automatisches Scrollen führt. Dabei werden fortlaufende Elemente oder unendlicher Content in der Regel vermieden, da die eigentliche Herausforderung darin liegt, jeden Abschnitt der Einzelseite für sich zu gestalten und dennoch einen globalen Zusammenhang zu bewahren. Klare, deutliche und nicht zu aufwendige Typografien, miinmalistische Layouts der Abschnitte, je Abschnitt ein zentrales Element so könnte das Ganze aussehen. Interessant ist hierbei die Möglichkeit, dass durch den chronologischen Aufbau der Inhalte der Abschnitte eine Message an den Nutzer gesendet werden kann. Das OnePage Design ist responsive und somit auch auf kleinere Displays optimial zu betrachten. Allerdings bringt es auch Nachteile mit sich: Für eine Website mit einer Füllmenge an Informationen und unterschiedlichem Content ist eine meterlange und überladene Einzelseite sicherlich nicht die beste Lösung. Beispiel für ein OnePage Design: mightyslider.com #3.3.1 Navigationstrend: Parallax Scrolling Eine Technik bei der sich das grafische Element im Hintergrund, wie beispielsweise ein Foto, welches als Hintergrundbild fungiert, während des Scrollens langsamer bewegt, als das grafische Element im Vordergrund. Es werden zum Betrachter unterschiedliche Bewegungsgeschwindigkeiten verschiedener Objekte simuliert. Auf der 2DEbene entsteht hierbei eine Illusion der Tiefe dem Nutzer wird somit das Gefühl gegeben, in den Kontext nahezu "einzutauchen". Dies kann und wird überwiegend beim vertikalen Scrolling verwendet (zum Beispiel beim OnePage bzw. Responsive Design), muss aber nicht: Auch wenn es auf den ersten Blick etwas außergewöhnlich erscheint und das Konzept aber hierzu passen sollte, kann dieser Effekt ebenfalls beim horizontalen Scrolling (siehe OffCanvas, Abschnitt 3.1.1) eingebaut werden. Parallax Scrolling wurde gerade im Jahr 2014 von vielen Global Playern gerne verwendet. Der Effekt sowie die gesamte Navigationsform bringt sicherlich viele Vorteile mit sich, wie beispielsweise die optimierte und interaktivere Seitenausgabe oder aber aus Sicht des Nutzers das Erleben von Innovation und spielerischer Navigation. Es gilt allerdings auch zu beachten, dass eine solche Website den Fokus weniger auf detaillierte und ausgeführte Informationen im Contentbereich, mehr auf visuelles Präsentationsmaterial legt, da andernfalls die Übersicht schnell verloren gehen und die eigentlich doch so einfache Navigation zu einer Hürde werden könnte. 06