Von blindem Text und Kaisermord

am 26 Feb 2018 in Aktuelles, WebDesign von
Bisher unkommentiert »

Als der römische Philosoph Marcus Tullius Cicero im Sommer des Jahres 45 vor Christus sein Werk „De finibus bonorum et malorum“ (zu Deutsch: „Vom höchsten Gut und vom größten Übel“) vollendete, konnte er nicht ahnen, dass seine Worte noch Jahrtausende später Einfluss auf die Arbeit von Designern, Mediengestaltern und Layoutern auf der ganzen Welt haben würde.

Cicero widmete sein Werk Marcus Iunius Brutus. Eben jenem Brutus, welcher für seine – per Dolchstoß vorgetragene – Kritik an der Politik Cäsars in die Geschichtsbücher einging.

In insgesamt fünf Büchern behandelt Cicero Themen wie die Philosophierichtungen des epikureischen Hedonismus, der Stoa und des Peripatos. Doch was hat das alles mit Design oder Layout zu tun?

Nun, es sind die folgende Zeilen, durch die Ciceros Vermächtnis Webdesign-Prototypen und Flyer-Entwürfen Leben einhaucht:

„Neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit […].“

Wem das irgendwie bekannt vorkommt, muss nicht zwangsläufig Fachmann für antike Philosophenschulen sein. Denn seit den 60er Jahren verwendet das Unternehmen Letraset Teile dieses Textes zur Demonstration der Gestalt verschiedener Schrifttypen. Um genau zu sein die folgenden Teile:

„Lorem ipsum dolor sit amet, consectetur adipisici elit …“

Warum das so ist und wer auf die Idee kam, ein 2000 Jahre altes Buch als Vorlage für diesen berühmten Blindtext zu verwenden, kann heute leider nicht mehr mit Gewissheit beantwortet werden. Außer Frage steht jedoch, dass „Lorem Ipsum“, dessen Verteilung der Buchstaben und Wortlängen etwa der natürlichen Sprache entspricht, inzwischen schon fast Kultstatus erreicht hat und unter Designern und Gestaltern oft auf kreative Weise als Insider-Witz genutzt wird.

Wer nach Abwechslung zum klassischen „Lorem Ipsum“-Blindtext sucht, der findet hier zwei mögliche (wenn auch nicht ganz ernst gemeinte) Alternativen:

Die Seite http://bavaria-ipsum.de/ bietet einen „bissl gemütlicheren“ Blindtext-Generator an, der einen bayrischen Platzhaltertext ausspuckt.

Filmliebhaber können auch den „Samuel L. Ipsum“-Generator (http://slipsum.com/) verwenden, welcher einen Platzhaltertext im Duktus von Jules Winnfield (Samuel L. Jacksons Rolle in Pulp Fiction) ausgibt. Aber Achtung: Für eine Kundenpräsentation ist dieser mother****ing Blindtext selbstverständlich nicht zu empfehlen!

Template Engine – was ist das ?

am 03 Jan 2018 in Tech, WebDesign von
Bisher unkommentiert »

Da Template-Engines diverse Vorteile bieten, werden diese in der modernen Webentwicklung häufig eingesetzt. Doch was sind Template-Engines überhaupt und wie werden diese benutzt? In diesem Artikel werde ich euch einen kurzen Überblick über das Thema geben und euch ein Anwendungsbeispiel dafür vorstellen.

 

Was ist eine Template Engine?

Template-Engines werden dazu eingesetzt, Arbeitsprozesse zu teilen und aus Vorlagen, sogenannten Templates, Internetseiten zu generieren. Möglich wird das durch Platzhalter in der Template-Datei welche variable Werte annehmen können. Dadurch können diese Platzhalten mit generischen und aktuellen Inhalten gefüllt werden. Jedoch können die meisten Template-Engines noch mehr als nur Platzhalter austauschen. Es können Schleifen geschrieben werden oder bedingte Anweisungen implementiert werden. Dadurch können mit wenig Zeilen Code zum Beispiel etliche Produkte aus einer Datenbank ausgelesen werden oder ein bestimmter Bereich einer Webseite nur geladen werden, wenn eine bestimmte Variable gesetzt ist.

Ein Beispiel einer solchen Template-Engine ist Smarty. Smarty basiert auf der weit verbreiteten Scriptsprache PHP und wird in diversen Webseiten eingesetzt. Im Folgenden wird die Verwendung von Smarty dargelegt. Im ersten Schritt wird eine PHP-Variable dem Objekt Smarty zugewiesen nachdem dieses instanziiert wurde. Die zugewiesene Variable kann ein Array oder ein String sein und zuvor zum Beispiel aus einer Datenbank gelesen worden sein (siehe Abbildung 1).

Abbildung 2: Ausgabe einer Variablen mit Smarty

Nachdem die Variable in PHP zugewiesen wurde, ist diese im Template verfügbar und kann als HTML ausgegeben werden (siehe Abbildung 12: Ausgabe einer Variablen mit Smarty). Hierbei sind die zuvor angesprochenen Platzhalter mit einer geschweiften Klammer für den späteren Interpreter markiert.

Abbildung 2: Ausgabe einer Variablen mit Smarty

Angenommen, der Variablen „firstname“ wurde der Wert „Max“ und der Variablen „lastname“ der Wert „Mustermann“ zugewiesen: Das Ergebnis des Aufrufs von Abbildung 2 würde dann wie folgt aussehen (siehe Abbildung 13: Ergebnis der Templateausgabe).

Abbildung 3: Ergebnis der Template-Ausgabe

 

Fazit:

Die Verwendung einer Template-Engine bringt diverse Vorteile mit sich. Die wichtigsten sind die Trennung von Logik und Darstellung. Dadurch wird nicht nur eine Arbeitstrennung zwischen Backend-Entwickler und Frontend-Entwickler möglich, sondern auch die Sicherheit der Applikation verbessert. Da ein Frontend-Entwickler nun nichtmehr im Backend arbeitet, kann er auch keine sicherheitsrelevanten Fehler mehr begehen. Er ist nun einzig für die Darstellung der Daten verantwortlich. Ein weiterer Vorteil ist die einfache Änderung von Weblayouts. Es muss im Code nichtmehr, oder nur noch sehr begrenzt zwischen Logik und Darstellung unterscheiden werden, wodurch Änderungen viel weniger Aufwand mit sich bringen. Aus diesen Gründen empfehle ich euch für das nächste Webprojekt die Verwendung einer solchen Template-Engine. Es benötig zwar anfangs etwas Einarbeitungszeit, jedoch erspart es in der Summe mehr Zeit als dadurch verloren geht.

Ein weiteres Beispiel für eine Template Engine ist Twig.

Getagged: , ,

Single Page Applications

am 26 Nov 2017 in Tech, WebDesign von
Bisher unkommentiert »

Wer ständig mit dem Internet zu tun hat und etwas aufmerksamer durch die
verschiedenen Internetseiten surft, wird etwas feststellen: Immer mehr Internetseiten sind
nicht mehr wie früher Aufgebaut als eine Ansammlung von Seiten, die miteinander
verlinkt sind, sondern es gibt nur noch eine einzelne Seite auf der alle gewünschten
Informationen zu sehen sind, oder nachgeladen werden.

Dass dies nicht nur ein Trend ist, dem nur wenige innovative Startups folgen, wird
durch die vielen Giganten im Internet deutlich. So ist zum Beispiel die komplette Seite von
Facebook zum Großteil eine Single Page Application, auch SPA genannt. Doch auch Gmail,
Google Maps, Twitter und dir fallen bestimmt noch mehr Seiten ein, sind alles SPA’s.

Doch warum wird diese Technik so häufig und gerne eingesetzt? Dies lässt sich leicht
durch die vielen Vorteile, die eine SPA mit sich bringt nachvollziehen. Denn unter anderem
verringert eine solche Internetseite die Serverlast des Betreibers enorm. Die eigentliche Seite
wird nur einmal heruntergeladen und anschließend müssen nur noch Informationen, Texte
und Bilder nachgeladen werden. Es müssen nicht bei jeder Navigation alle Skripte, Header
und Stylesheets der Seite neu geladen werden. Dies bringt einen großen Vorteil für Seiten, die
sehr große Benutzerzahlen zu verzeichnen haben. Ein weiterer Nutzen bringt das SPA-Paradigma bei Seiten die hohe Interaktivität zwischen dem Benutzer und der Anwendung
benötigen. Hier kann eine solche Seite wie eine typische Desktopanwendung auftreten, sodass
man garnicht mehr das Gefühl hat, im Internet unterwegs zu sein. Dies ist zum Beispiel bei
Google Docs der Fall.

Wenn wir jetzt die Vorteile einer SPA wissen, müssen wir jetzt nur noch mehr über die
technische Realisierung einer solchen Web-App erfahren. Ermöglicht werden diese Art von
Internetseiten nur durch JavaScript oder andere auf clientseitig laufende Skripte.
Hierbei ist der Begriff AJAX der Kern einer jeden SPA. Denn nur durch AJAX
(Asynchronous JavaScript and XML) ist es möglich, Inhalte dynamisch nachzuladen,
nachdem die Seite fertig geladen wurde. Dazu gibt es auch immer mehr mächtige
Frameworks, die eigens dafür entwickelt wurden. So sind AngularJS, React oder Backbone.js
nur die Bekanntesten unter den vielen Verfügbaren.

Da wir jetzt auch die Technik dahinter verstehen, sollten wir uns aber noch über die
Nachteile einer SPA im Klaren sein. Denn ein großes und nicht zu vernachlässigendes Manko
ist die Suchmaschinenoptimierung einer Single Page Application. Da der komplette Inhalt
der Seite nicht sofort beim aufrufen der Seite verfügbar ist, können die meisten Crawler nicht
alle Inhalte erfassen, die die Seite zur Verfügung stellt. Außerdem wird beim Klick auf einen
Link keine neue Seite geladen, da alle Inhalte nur nachgeladen werden und es im
wesentlichen nur eine Seite gibt. Daher sollte bei Firmenseiten oder ähnlichem auf eine SPA
verzichtet werden. Denn eine solche Seite ist im Normalfall nicht bei den obersten
Suchergebnissen gelistet.

Folglich sollte genauestens überlegt werden, was die Ziele einer Seite sind, bevor die
eigene Seite als Single Page Application gebaut wird. Kann der SEO-Faktor vernachlässigt
werden, oder ist viel Interaktion gefragt, so kann getrost auf bekannte Frameworks wie
AngularJS gesetzt werden. Ist jedoch ein gutes SEO-Ranking erforderlich, so sollte von dieser
Technologie abgeraten werden und eher eine Seite im klassischen Stil entwickelt
werden.

Quellen

http://www.dtelepathy.com/blog/design/8-reasons-why-pageless-design-is-the-future-of-the-web
http://t3n.de/news/single-page-webdesign-beispiele-323225/
http://singlepageappbook.com/goal.html
https://de.wikipedia.org/wiki/Single-Page-Webanwendung
https://blog.secu-ring.de/software/single-page-applications-loesung-fuer-probleme/
http://www.flyacts.com/blog/seo-und-spa-single-page-applications-unvereinbar-oder-unzertrennlich/

Microinteractions – UX bewegt sich?

am 24 Nov 2017 in WebDesign von
1 Kommentar »

Leute, die sich mit User Experience beschäftigen, befassen sich im Allgemeinen mit der
Optimierung von technischen Interfaces für deren Nutzern. Initial befasste sich Usability
bislang mit Richtlinien wie Übersichtlichkeit oder Zugehörigkeit von Elementen.
Doch bestimmt ist auch einigen von euch schon aufgefallen, dass sich manche Interfaces
greifbarer und intuitiver anfühlen als andere. Auf den ersten Blick ist es schwer die
Ursache dafür herauszufinden – vor allem, wenn dir der Begriff „Microinteractions“ noch
nie über den Weg gelaufen ist.

Sicher hast du in deinem bisherigen Leben als Digital Native unzählige Geräte ein und
ausgeschalten, die Lautstärke deines Radios oder Walkmans angepasst oder hoffentlich
deinen Laptop ab und an eingeschalten. Als Studenten von Onlinemedien kennen wir
wohl allzu gut das Geräusch eines angehenden Macs oder Windows im Vorlesungsraum,
während der Dozent seinen bedeutungsschwangeren Satz beendet. Oft lacht der Kurs
nun, da es sich anhört, als ob das Geräusch den Worten des Dozenten eine höhere
Bedeutung gegeben hätte. Auch wenn wir es vielleicht, abgesehen von diesen
besonderen Momenten, noch nie bewusst wahrgenommen haben, genau das sind
Microinteractions.

Sie können quasi als ein Stilmittel der Usability verstanden werden, bei welcher ein
Nutzerszenario auf einen bestimmten Moment der Interaktion zwischen Nutzer und
Interface heruntergebrochen wird, damit genau dieser ausgearbeitet werden kann. Der
Fokus liegt dabei auf einer einzigen Interaktion, wie beispielsweise das Entsperren des
iPhones oder das Hochfahren des Laptops. Zudem sind diese genannten Momente eine
der wesentlichen Microinteractions, die ein Nutzer überhaupt mit dem Gerät tätigen wird.
Es ist nämlich die erste Interaktion zwischen dem Nutzer und dem Interface. So werden
jetzt vielleicht einige von euch an das Geräusch zurückdenken, mit welchem sich euer
iPhone entsperrt, oder dem leichten Zoomeffekt, mit welchem euer Homescreen danach
auftaucht (iOS 10, für alles andere ist mein Handy zu schlecht).

Genau solche Gesten lassen uns das Interagieren mit unserem Smartphone viel flüssiger
und effektiver erscheinen, auch wenn wir das bewusst vielleicht noch nie wahrgenommen
haben. Ein Microinteraction ruft dann positive Assoziationen bei uns hervor, wenn er
reizvoll, menschlich und effektiv ist. Solche Microinteractions sammeln und fließen in die
Gesamtwahrnehmung der Usability mit ein. Sie trennen somit ein gutes Produkt von
einem besonders gutem Produkt.

Microinteractions umgeben uns aber nicht nur bei der Interaktion zwischen Lautsprechern
oder Smartphones, sondern sollten uns idealerweise auch die Bedienung von Webseiten
„versüßen“. Denn Microinteractions können die Lücke zwischen Nutzer und Technologie
mithilfe von humaner und emotionaler Bindung schließen. Durch die intuitive und nahezu
unscheinbare Art begleiten uns Microinteractions durch den Webseitenfluss.
Um Micromoments selbst gestalten zu können, ist es wichtig ihren Aufbau zu verstehen.
Dieser setzt sich aus 4 Teilen zusammen:

  1. Trigger
  2. Eine Microinteraction muss zunächst ausgelöst werden. Im Idealfall soll der Trigger den
    Nutzer zur Interaktion animieren. Die besten Trigger sind solche, die dem Nutzer dann zur
    Verfügung stehen wenn er sie benötigt, ohne dass der Nutzer seine Bedürfnisse äußern
    muss.

  3. Rules
  4. Die Regeln bestimmen, was bei einer Microinteraction passiert. Sie müssen sich natürlich
    anfühlen und den Nutzer animieren und keinesfalls bei der Interaktion stören oder
    ablenken.

  5. Feedback
  6. Ganz wichtig ist es dem Nutzer klar zu machen, was durch die Interaktion passiert ist. Ein
    Mensch ist durch natürlich Konditionierung daran gewöhnt, dass auf eine Aktion eine
    Reaktion folgt. So fühlt es sich für einen Nutzer störend und unnatürlich an, wenn auf eine
    Aktion des Nutzers keine Reaktion des Systems folgt. Reaktionen können beispielsweise
    eine Live-Validierung von Nutzerdaten oder Ladeanimationen, die dem Nutzer klar
    machen, dass seine Aktion eine Reaktion hervorgerufen hat, er sich aber noch einen
    Augenblick gedulden muss, sein.

  7. Schleifen und Varianten
  8. Wenn eine Microinteraction mehrfach benutzt wird, sollte sie sich im besten Fall
    anpassen. Ein Unterschied sollte spätestens zwischen der ersten und der siebten Microinteraction
    sichtbar sein, idealerweise sollte sie sich an dem Nutzerverhalten orientieren.

Dieses Prinzip der Microinetractions spielte bei der Neugestaltung des Microsoft
Designs, welches im Mai 2017 erstmals vorgestellt wurde, eine bedeutende Rolle. Wie es
auf der Seite von Microsoft heißt:
„These are our foundational elements — the moments that will make our designs perform
beautifully across devices, inputs, and dimensions. This is how we build the next era
of Windows.“

Hier wird von Momenten gesprochen, welche das Design geräteübergreifend schöner
darstellen soll. Insgesamt setzt sich Fluent Design aus 5 Elementen zusammen. Licht,
Tiefe, Bewegung, Material und Skalierung.

Dabei spielen Microinteractions im Fluent Design vor allem bei Licht und Bewegung eine
große Rolle. Der Reveal Effekt, welcher größtenteils die Komponente Licht darstellt,
wurde im Rahmen des Creator Updates ausgerollt. Dieser Effekt beleuchtet die Stelle,
über die die Maus gerade fährt. Wenn mit der Maus geklickt wird erscheint ein Lichtkreis.
Die Interaktion stellt hier die Bewegung der Maus dar. Das Feedback, welches der Nutzer
erhält, sind die Lichtreflexe.

Die zweite relevante Komponente Bewegung, soll laut Microsoft nahtlose Übergänge
zwischen Interaktionen bewirken und so dem Nutzer helfen sich zu fokussieren.
Nicht nur Microsoft, sondern auch Apple oder andere Designer und Designguidelines
verwenden schon seit geraumer Zeit Microinteractions. John Pavlus, der zu diesem
Thema ein Kommentar zu Dan Saffers Buch verfasst hat, behauptet sogar, dass jeder
gute Designer Microinteractions genutzt hat. Letztendlich besitzen wir nun allerdings
durch die fortgeschrittenen Fähigkeiten von Webseiten und Endgeräten die Möglichkeit,
Micromoments besser zu entwerfen und umzusetzen. Diese Möglichkeit sollten wir alle in
der Zukunft nutzen, um unseren Nutzern die beste UX zu bieten.

Quellen

https://www.fastcodesign.com/1672922/the-future-of-ux-design-tiny-humanizing-details
http://microinteractions.com/
http://microinteractions.com/what-is-a-microinteraction/
http://t3n.de/news/ux-designtrend-478358/
https://blog.proto.io/secret-killer-ux-design-microinteractions/

Weniger ist Mehr! Warum Minimal Webdesign? – Part 1

am 08 Mrz 2017 in WebDesign von
Bisher unkommentiert »

Weniger ist mehr. Jeder kennt diesen Spruch, doch was bedeutet er für Webdesigner? Warum sollte jeder der Webseiten gestaltet schon mal davon gehört haben und warum  ist das Konzept, das diesem Leitspruch folgt gerade so beliebt?

Eins ist klar. Der Trend des Minimalismus im Web ist sehr präsent. Jede große Website wie Youtube, Google, PayPal, Amazon und auch viele andere Riesen im Netz reduzieren die Gestaltung auf ein Minimum. Dabei folgen sie verschiedenen Designprinzipien, wie dem Flat-Design-Ansatz, dem Material Design und was es noch für „neue“, „trendige“ Ansätze gibt, die das Web revolutionieren wollen.

Doch was ist eigentlich der Kern dieser ganzen Prinzipien, Ansätzen und Konzepten?

Der Minimalismus!

Dabei ist das Fokussieren auf das Wesentliche keinesfalls eine Neuerfindung. Das gibt es schon immer und ist nicht nur im Webdesign oder Design anzutreffen. Er kann auch im Alltag und im echten Leben gelebt werden. Menschen die den Essenzialismus verkörpern haben keine vollstehende Wohnung, in der von jedem Urlaub ein „Mitbringsel“ aufgestellt wird, oder in der mehrere hunderte Bücher im Schrank stehen. Noch werden alte Kleidungsstücke, ausrangierte Möbelstücke oder andere Dinge im Keller gelagert, wo sie auf ihren eventuellen neuen Einsatz warten. Außerdem wird diese Person keine zahlreichen oberflächliche Beziehungen und Freundschaften pflegen.

Ein solcher Mensch hat wenige gute Freunde, für die er aber mehr Zeit aufbringen kann. Er hat eine offene, klare Wohnung, in der nur die nötigsten Möbelstücke stehen. In seiner Wohnung gibt es viel Whitespace an der Wand, da hier nicht tausende von Bildern aufgehängt sind.

Diese Personen sind nicht von der gegensätzlichen Werbeindustrie geblendet worden, in der der übermäßige Konsum im Mittelpunkt steht. Dadurch ist ihr Leben überschaubarer, was in vielen fällen zu einem glücklicheren und zufriedeneren Leben führt. Daher lässt sich sagen: Minimalismus funktioniert im Leben, warum dann nicht auch woanders?

o_minimal-desk-minimalist-room-24324

Minimalismus in der eigenen Wohnnung

Schauen wir uns zum Beispiel den Zeitungsdruck an. Stellen wir uns eine Zeitung vor, in der Artikel an Artikel aneinander gereiht ist. Nach den Letzten Wort des einen Berichts folgt der nächste. Es gibt keinen Abstand, keine Überschriften, noch Unterschriften. Wir würden uns niemals durch ein solches Blatt kämpfen. Daher wird hier eines genutzt: Minimalismus.

Zwischen jedem Bericht prangt eine minimalistische Zusammenfassung des kompletten Berichts – die Überschrift. Wenn diese alleine nicht genügt, wird ein Untertitel eingesetzt. Aber auch bei diesem gilt: Er wird so kurz wie möglich gehalten und enthält somit nur das Wesentliche und Unverzichtbare des Artikels.

Wenn dir dieses Beispiel zu weit hergeholt ist, dann schauen wir uns ein anderes an. Apple. Jeder weiß, was damit gemeint ist. Es ist nicht ein Obststück, dass hier aus Versehen in der falschen Sprache geschrieben wurde. Es handelt sich um ein weltweit bekanntes und vielerseits beliebtes Unternehmen. Und was macht das Unternehmen? Genau, es stellt Produkte her, genau wie jedes andere Unternehmen auch.

apple-laptop-notebook-office-39284-edit

Minimalistisches Produktdesign

Doch warum ist dann gerade dieses so erfolgreich?

Das liegt unter anderem an einem klaren Prinzip, dass bei jedem Produkt von Apple eingehalten wird. Es wird das Prinzip des Minimalismus befolgt und gelebt. Dabei wird hier alles weggelassen, das nicht dem Benutzer und dem eigentlichen Zweck dient. Dabei gilt, je einfacher das Produkt und dessen Bedienung, desto beliebter und intuitiver kann der Bediener das Produkt benutzen. Umso mehr Spaß macht es, das Produkt zu benutzen und umso erfolgreicher wird es.

Auch diese zwei Beispiele machen es deutlich: der Minimalismus ist keinesfalls ein unnützes und überschätztes Mittel zum besseren Ergebnis.

Jetzt haben wir vieles über den Minimalismus gehört und wo er bereits eingesetzt wird. Doch was dies nun mit Webdesign zu tun hat, erfahrt ihr im zweiten Teil von „Weniger ist Mehr! Warum Minimal Webdesign?“.

Weniger ist Mehr! Warum Minimal Webdesign? – Part 2

am 08 Mrz 2017 in WebDesign von
Bisher unkommentiert »

Im ersten Part dieser Serie haben wir schon erfahren was Minimalismus ist und wo er überall eingesetzt wird. Wenn wir jedoch jetzt anfangen, dieses Prinzip auf das Webdesign zu übertragen, dann fragen wir uns logischer Weise:Was bedeutet das jetzt für das Design im Web?

Auch hier gilt eines: der Minimalismus. Es sollte sich auf das Wesentliche konzentriert werden. Jetzt stellt sich die Frage, was das Wesentliche einer Website ist. Und das ist die zentrale Frage, um die es sich zu Beginn eines Website-Gestaltungsprozesses drehen sollte. Was ist das Ziel der Seite? Was soll sie bewirken?
Möchte ich Produkte verkaufen und wenn ja welche und an wen? Möchte ich eine Botschaft vermitteln, den Besucher informieren, Hilfestellung leisten, ein Unternehmen oder eine Person präsentieren, oder was auch immer. Egal wie die Website am Ende aussehen soll, es muss immer zuerst ein Ziel definiert werden. Und auch hier gilt der Minimalismus.

Das Ziel sollte klar, präzise und kurz formuliert werden.

road-nature-hand-path-edit

Fokus

Sobald das Ziel der Seite feststeht, kann es an die eigentliche Konzeption der Seite gehen. Hierbei sollte bei jedem Element hinterfragt werden, ob es zielorientiert ist, oder ob es auch ohne schlechtes Gewissen weggelassen werden kann. Auch hier gilt, ist das Element nicht unbedingt notwendig, um das Ziel zu erreichen, muss es weggelassen werden. Denn alles was auf der Seite ist und nicht zielführend ist, lenkt den Benutzer ab, oder irritiert ihn im schlimmsten Fall. Im besten Fall verlängert es den Weg des Besuchers und kann somit schon zum Scheitern der Seite führen.

Die weit verbreitete Meinung, dass auf Websites nahezu unendlich viel Platz ist und dieser daher auch ohne Probleme genutzt werden kann, ist schlichtweg falsch. Klar ist hier keine Platznot vorhanden, wie zum Beispiel bei einer Zeitung oder einem Bild. Aber eine Seite, die überladen mit Elementen ist, wirkt eher amateurhaft, als professionell. Daher sollte als Webdesigner lieber davon ausgegangen werden, dass nur sehr wenig Platz auf einer Website ist, der sinnvoll und vor allem überlegt verwendet werden soll.

Dabei geht es nicht nur um das Webdesign an sich, was ein sehr oberflächlicher Blickwinkel ist, sondern es geht um das gesamte Konzept einer Website.

Warum?

Jetzt wissen wir worum es beim Minimal Webdesign geht, doch die Frage nach dem Warum bleibt bisher unbeantwortet. Um diese Frage zu klären, kann von ganz unterschiedlichen Positionen ausgegangen werden.

Schauen wir uns den Standpunkt des Besuchers an. Hier wirkt eine klar strukturierte Seite viel schöner, man findet sich einfacher zurecht und das Ziel wird leichter und schneller erreicht. Dies alles resultiert in einer besseren User Experience. Außerdem nimmt der Besucher, bei einer nach diesem Ansatz erstellten Website, die wichtigsten Infos schneller war und kann sie sich viel besser merken. Denn ein durchschnittlicher Besucher kann sich nur zwischen fünf und neun Dinge merken. Bei einer vollgestopften Seite hat hier der Besucher Schwierigkeiten, sich die zentralen Informationen einer Seite zu merken. Bei einer „Minimal-Website“ dagegen, werden ihm auch nur die zu merkenden Informationen präsentiert.

Doch auch beim Entwickler oder Gestalter der Website gibt einen Vorteil, der nicht minderwichtig ist. Bei einer Website, die nur die wichtigsten Elemente benötigt, müssen viel weniger Komponenten gestaltet und auch umgesetzt werden. Dies bedeutet nicht, dass am Ende weniger Aufwand für die Seite benötigt wird, wie jetzt fälschlicher Weise angenommen werden kann. Aus dem Verzicht von unnützen Elementen resultiert nämlich mehr Zeit für die restlichen, die somit besser überlegt, konzeptioniert und am Ende entwickelt werden können.

Tipps

Da wir jetzt wissen, warum wir das Minimal Webdesign umsetzten sollten, möchte ich euch hier noch ein paar explizite Tipps geben, mit welchen Ihr ganz einfach ein besseres Minimal Webdesign hinbekommt.

Einen sehr wichtigen und großen Bestandteil des Minimal Webdesigns haben wir schon kennen gelernt. Die Reduktion. Wie bereits erwähnt sollten alle nicht zielführenden und nicht benötigte Elemente entfernt, beziehungsweise erst garnicht erstellt werden. Dadurch entsteht mehr Whitespace, der sehr wichtig ist, um dem Betrachter halt zu geben und ihn auf die wichtigen Elemente und den Inhalt zu lenken. Dadurch rückt das unwichtige in den

Hintergrund und das Wichtige steht im Fokus.

whitespace-skiing-winter-skilift-24034-edit

Whitespace

Auch die Farben sollten so weit es geht reduziert werden. Das bedeutet nicht, dass eine Seite im Schwarz-Weiß look erstrahlen sollte, wenn sie dem Minimal Webdesign folgen möchte. Dies bedeutet nur, dass alle überflüssigen und nicht hundert Prozent benötigten Farben aus der Farbplatte der Seite verschwinden sollten.

Was für die Gestaltung der Website gilt, gilt natürlich auch für die Bildkomposition und die Bilderanordnung auf der Seite. Die Seite sollte wie bei allen Elementen nicht mit Bildern überladen sein. Wenige aber gezielte Bilder haben einen viel größeren Mehrwert für den Besucher der Seite. Und selbst der Fotograf sollte schon darauf achten, dass die Bilder ihren Zweck nicht verfehlen und das Ziel im Auge behalten.

Die einzelnen Komponenten der Website sollten ebenfalls alle diesem gelernten Prinzipien folgen.

Ich hoffe diese zwei Artikel haben dir verdeutlicht, es braucht nicht viel um eine gute Website zu gestalten, man braucht nur wenige aber gut durchdachte und gezielt eingesetzte Elemente um eine Website ansprechend, schön, klar und modern zu gestalten. Also erinnere dich bei deinem nächsten Projekt einfach an diese Artikel und du wirst merken, du erzielst mit dem Ansatz des Minimal Webdesign eine spürbar bessere Website.

 

Quellen für beide Beiträge:

  •            Bilder von www.pexels.com
  •             http://t3n.de/news/minimal-webdesign-anders-774216/
  •             http://www.instantshift.com/2011/03/07/understanding-the-theory-of-minimalism-       in-web-design/
  •             https://webdesign.tutsplus.com/articles/less-is-more-fundamentals-of-minimalist-       web-design–webdesign-8