medani-pixel
news
25
Okt 13

Webdesign: Schicke Designeffekte mit HTML5 & CSS3 - Teil 2

Über gestochen scharfe CSS Icons und was One-Page-Websites ausmacht, die Usability und gutes Design gekonnt kombinieren.

One Page Websites und die Kunst Usability und gutes Design optimal zu kombinieren

Durch die Möglichkeit mit CSS3 und HTML5, Java Script und Ajax div-Elemente auf unzählige Arten zu animieren, haben sich Navigationsstrukturen entwickelt, die in dieser Art neuartig sind. Ein aktuell sehr verbreitetes Beispiel davon sind One-Page Websites, die auf einer einzigen Seite aufgebaut sind. Navigiert man über die Inhalte, bewegen sich die sichtbaren Teile der Seite klassischerweise nach oben und unten, so dass der gewählte Ausschnitt im Zentrum ist. Auch wenn tolle filmartige Effekte durch die Bewegungen entstehen, ist es eine Kunst – was die Benutzerfreundlichkeit angeht – die Gratwanderung zwischen klar und verwirrend, zwischen hip und undurchsichtig, zu Gunsten von Design UND Userfreundlichkeit zu entscheiden.

Dabei ist es eine Kunst, die Informationen so zu platzieren, dass das Design ästhetisch wirkt, alle Inhalte verständlich organisiert werden, und man sich im wunderbar rollenden Screen gut zurechtfindet. Dass es dabei einige sehr gelungene Beispiele gibt, zeigen wir hier.

 

medani-web-und-design-artikel6-bild5 quelle: Whole World Water

Die Website der Kampagne Whole World Water besticht durch äußerst elegantes, zeitgemäßes und reduziertes Design. Gleichzeitig kann trotz einer relativ großen Menge von Inhalten die Orientierung bewahrt werden. Dies liegt vor Allem daran, dass die Headerelemente so lange am oberen linken Bildrand bleiben, bis das Kapitel endgültig wechselt. Auch die auffällige groß gesetzte Typografie wirkt als Orientierungsmerkmal.

 

medani-web-und-design-artikel6-bild6 quelle: Joseph Brot vom Pheinsten

Trotz der vielfältigen Informationen, ist diese äußerst ästhetische und sympathische Wiener Website der Bäckerei Joseph Brot durch das fixe Menü im oberen Bereich durchwegs klar überschaubar. Die große gut gesetzte Typografie, die sich auf allen Seitenteilen als grafisches Kernelement durchzieht, gibt dabei auch hier Orientierung. Persönliche Atmosphäre schaffen auch die Hintergrundbilder, die Brotkrümel, die als Backgroundelemente jedem Teilbereich einen weiteren persönlichen Touch geben. Die Seite wird übrigens von webfeuer, unserem Social Media Partner betreut.

 

medani-web-und-design-artikel6-bild7 quelle: bigcartel

Diese One-Page Website des Labels bigcartel arbeitet mit sehr reduziertem Design und hat auch einen kleinen integrierten Webshop. Plakative aussagekräftige Fotos und geschickt platzierte grafische Icon- und Typografie Elemente erzeugen ein schönes Gesamtwerk, das durch Zen-artige Ruhe und präzis pointierte Blickfänge besticht. Die Orientierung wird durch dezent gesetzte Navigationselemente erleichtert, wie etwa Pfeile und Buttons.

 

medani-web-und-design-artikel6-bild8 quelle: Life According to Sam

Auf dieser Webpage für den Feature Film Life According to Sam liegt die Besonderheit in der Platzierung der Inhalte, sie scrollen nämlich von allen Seiten, auch schräg und horizontal. Wegen dem schlichten reduzierten Design, in dem stark mit plakativen Bildern und feinen Textelementen und auch mit viel Freiraum gearbeitet wird, bleibt die Navigation trotz den extravaganten Platzierungen relativ überschaubar. Die Seite überzeugt auch durch ihr tabletfreundliches und platzsparendes Menü, das sich per Klick ausbreitet und wieder einzieht.

100% CSS basierte Icons

Die Zeiten sind vorbei, als Pixelbild basierte Icons bei geringer Vergrößerung der Bildschirmauflösung verpixelt dargestellt wurden. Heute gibt es neben Icons die als Webfonts geladen werden und damit beliebig skaliert werden können, auch andere die zu 100% mit CSS direkt „gezeichnet“ werden. Das ist möglich, seitdem mit CSS auch geometrische Formen direkt dargestellt werden können, ohne auf Grafiken zurückgreifen zu müssen.

Neben klassischen Dreiecken, Quadraten und Herzen, mit denen diese Funktion gestartet ist, sind aktuell durch die ehrgeizige Feinarbeit von unzähligen Webdesignern und Entwicklern auch sehr komplexe stilvolle Formen möglich. In der Galerie one-div gibt es eine Vielfalt von gelungenen Beispielen, die teilweise auch animiert sind!

medani-web-und-design-artikel6-bild1 quelle: one-divmedani-web-und-design-artikel6-bild4amedani-web-und-design-artikel6-bild3 quelle: doug neiner

  1. higgins sagt:

    Die css icons sind mir neu aber halt nur verwendbar in browsern die css3 verstehen.

    Ich binde icon fonts ein – check mal http://icomoon.io Sehr einfach zu handhaben.

    1. Vielen Dank für Deinen Tip. Sowas kann man immer brauchen. Wir verwenden auch gerne die Font-Icons von Font Awesome: http://fontawesome.io/

SENDEN
SENDEN