1. Pictory

Auf der Webseite Pictory werden Fotografien zu unterschiedlichen Themen als Serie präsentiert. Jedes Bild wird dabei in einer großen Ansicht präsentiert. Navigiert werden kann auch mit dem Keybord.

2. Andersson-Wise Architects

Die Webseite des Architekten-Büros Andersson-Wise Architects ist mit einem responsive Webdesign umgesetzt. Die Webseiten-Ansichten für Tablet PCs und Smartphones kannst du dir auf der Mediaqueri.es Webseite anschauen.

3.TRACEBACK photoblog

Der Fotografie-Blog TRACEBACK ist mit Hilfe des Fotoblog-Anbieters Pixelpost umgesetzt. Mit Hilfe der Tasten »w« und »b« kannst du dir den Webseiten-Hintergrund auf schwarz oder weiß einstellen.

4. Mr. Oso

Mr Oso ist eine Kreativagentur aus Madrid. Auf der Portfolio-Webseite kann man sich ebenfalls durch die präsentierten Arbeiten mit Hilfe der der Tastatur-Pfeiltasten navigieren.

5. Hugo & Marie

Auf der Webseite der Kreativagentur Hugo & Marie aus New York City werden große Bilder in einer Artikel-Ansicht untereinander präsentiert. Die Webseiten-Navigationsleiste bleibt feststehend.

6. Defringe

Die Kreativ-Sammlung Defringe präsentiert Arbeiten sehr schlicht und übersichtlich. Ein besonderer Hingucker sind die animierten Fotografien.

7. Reserve Büro

Die Webseite Reserve Büro ist das Portfolio des Schweizer Designers Loïc Dupasquier. Die Arbeiten werden Bildschirmfüllend präsentiert. Über eine rechtsbündig angelegte Navigation kannst du dich durch die Arbeiten klicken.

8. NyTHAN JAMES

Sehr minimalistisch werden die Fotografien auf der Webseite von Nythan James untereinander präsentiert. Die einzelnen Fotos kommen so gut zur Geltung und die Webseite wirkt nicht überladen.

9. Soho Fixed Blog

Ebenfalls sehr reduziert ist der Foto-Blog des Londoner Soho Fixed Bike Shops umgesetzt. Einzelne, große Bilder werden mit mit Datum und Social Media Links dargestellt.

10. Blog von Ismael Burciaga

Auch auf der neuen Webseite von Designer Ismael Burciaga sind Fotos großzügig präsentiert. Ein grafisches Highlight ist ein gelber Balken für Foto-Überschriften.

11. Kokokaka

Die Webseite der Digital Agency Kokokaka aus Schweden arbeitet fast ausschließlich mit Fotografien. Alle Bilder können in einer Überschicht oder in einer Bildschirm-füllenden Einzelansicht angeschaut werden.

12. Collate

Die Portfolio-Webseite Collate des Fotografen Benedict Redgrove zeigt große Fotografien, die über mehrere Pfeil-Buttons navigiert werden können. Eine Info zu den einzelnen Projekten kann angezeigt oder verborgen werden.

13. Yvan Rodic Visual Diary

Das Visual Diary des Fashion-Fotografen Yvan Rodic (auch bekannt als Face Hunter) zeigt die neusten Bilder seines Foto-Tagebuchs in einer Übersicht. Die einzelnen Bilder-Serien werden dann jeweils minimalistisch untereinander gezeigt.

Wie gefallen dir die vorgestellten Webdesigns? Kennst du weitere kreative Webseiten, die mit Fotografien umgesetzt sind? Über dein Feedback und weitere inspirierende Link-Tipps freue ich mich sehr!

1. Five Simple Steps

Das Webdesign von Five Simple Steps ist auf einem zwei- bzw. dreispaltigen Raster aufgebaut. Da das Design sehr minimalistisch gehalten ist, funktioniert die Umwandlung der Inhalte von der großen Bildschirmansicht, bis hin zur einspaltigen Layoutansicht auf Smartphones sehr flüssig und elegant.

Die drei unterschiedlichen Layout-Ansichten vereinfacht im Überblick.

Interessant ist bei der Five Simple Steps-Webseite vor allem die flexible Umsetzung des Webseiten-Menüs. Bei der Ansicht auf Tablet PCs und Smartphones wird das zuvor rechtsbündig angelegte Menü zu einem Dropdown-Menü. Auf modernen, mobilen Geräten werden Dropdown-Menüs in einer Art Popup-Ansicht zur Auswahl auf dem Touchscreen-Display angezeigt.

Die Menü-Anzeige von Five Simple Steps auf einem Android Smartphone.

2. Sparkbox

Die Sparkbox-Webseite ist weniger minimalistisch, das responsive Layout funktioniert aber auch hier sehr schön. Interessant ist, dass der Footer erst bei Mausklick sichtbar wird und quasi »auffährt«. Hier sind dann zusätzliche Elemente wie Flickr-Bilder oder die neusten Tweets untergebracht.

Besonders interessant ist die Anpassung des Sparkbox-Layouts im Headerbereich.

Das große Headerbild und der Webseiten-Slogan skalieren sich im responsive Layout proportional mit. Auf die Grafik der verschiedenen Bildschirme (auf der schwarzen Hintergrundfläche) wird in der Smartphone-Ansicht komplett verzichtet. Schön gelöst ist auch die Verwandlung des Menüs. Es rutscht in der Smartphone-Ansicht unter das Logo und beide Elemente werden zentriert angezeigt.

3. iAWriter

Sehr elegant umgesetzt ist die Webseite der iAWriter-App. Das Layout basiert übrigens auf dem Template von Information Architects.

Bei der iA Writer-Webseite ist das Header-Menü besonders raffiniert gelöst.

Spannend ist auch hier wieder die Webseiten-Navigation. Auf dem Tablet-PC wird die zuvor vierspaltige Navigation dreispaltig. Die Punkte »About« und »Twitter« werden jetzt in einer neu eingeführten Leiste ganz oben auf der Webseite angezeigt. In der Smartphone-Ansicht wechselt das Menü dann, genau wie bei Five Simple Steps, auf die Dropdown-Menü-Lösung.

4. Earth Hour von WWF France

Eine weitere interessante Umsetzung eines responsive Layouts ist die Earth Hour-Webseite von WWF France.

Auch hier ist das Menü wieder besonders interessant umgesetzt, im Smartphone-Layout schiebt sich die zuvor rechtsbündig und horizontal angelegte Navigation untereinander. Das Webseiten-Logo wird kleiner skaliert und die zwei Logo-Elemente rutschen untereinander. In der Smartphone-Ansicht wird auf das Headerbild mit der Glühbirne verzichtet.

5. Arrrcamp Conference

Die Webseite der belgischen Webdeveloper-Konferenz Arrrcamp setzt das responsive Layout auch sehr interessant um. Das Webdesign ist hier insgesamt sehr großzügig angelegt und mit Hintergrundflächen und Image-Elementen umgesetzt. Auch in der Tablet PC und Smartphone-Ansicht werden die Bilder und Backgroundflächen weiter angezeigt. Spannend ist auch die Umsetzung des Headers und des Speakers-Feldes in der einspaltigen Smartphone-Ansicht.

Die unterschiedlichen Hintergrundflächen bleiben auch im Tablet PC und Smartphone-Layout erhalten.

Die Navigation wechselt auch bei Arrrcamp wieder unter das Logo und die einzelnen Punkte werden größere Button-Flächen. Auf diese Weise können sie auch auf einem Touchscreen angenehm bedient werden.

Wie gefallen dir die vorgestellten responsive Webdesigns? Kennst du weitere spannende, responsive Designs oder hast du bereits eigene Erfahrungen bei der Umsetzung einer responsive Webdesign-Layouts machen können? Was sind deine Erfahrungen und welche Schwierigkeiten siehst du während des Designprozesses?

Über dein Feedback freue ich mich sehr!

1. Die historische Entwicklung von Piktogrammen und Icons

Bildzeichen spielen in der Geschichte der Menschen schon sehr lange eine wichtige Rolle. Schließlich helfen sie Menschen unterschiedlicher Kulturen bei der Kommunikation miteinander. Icons und Piktogramme (das Wort Piktogramm setzt sich aus dem Lateinischen »pictus« für Bild und dem Griechischen »gramm« für Geschriebenes zusammen) sind Bildzeichen, die eine möglichst Kultur unabhängige Bedeutung haben sollen. Eine besonders wichtige Rolle spielen die Bildzeichen daher besonders im internationalen Handel und Verkehr. Zum Beispiel findest man internationale Bildzeichen z.B. auf Flughäfen, Bahnhöfen oder beim internationalen Transport von Gütern.

Bildzeichen für die Orientierung auf Flughäfen.

Bildzeichen auf Bahnhöfen.

Verschiedene Bildzeichen für den Transport von Paketen.

Einen richtigen Piktogramm-Kult haben die Olympischen Spiele ausgelöst. Das erste Piktogramm-Set für die Olympischen Spiele wurde 1964 bei den Spielen in Tokyo gestaltet, daraufhin folgten die ebenfalls sehr berühmten Olympia-Piktogramme für die Spiele in München 1972 gestaltet des Grafikers Otl Aicher (Direktor der HfG Ulm 1962-64. Otl Aicher hat u.a. auch das Logo der Lufthansa gestaltet). Seitdem wurden die Olympia-Icons immer wieder neu interpretiert und modernisiert, wie z.B. für die olympischen Spiele in Beijing 2008.

Ausschnitt aus der Piktogramm-Kollektion für die olympischen Spiele von Tokyo 1964.

Verschiedene Piktogramme von Otl Aicher. (Flickrbild von EveryDayLifeModern)

Piktogramme für die Olympischen Spiele Beijing 2008. (Flickrbild von Duet G.)

2. Wichtige Merkmale von Icons und Piktogrammen

Wenn man sich etwas genauer mit dem Sinn und den Hintergründen bei der Verwendung Bildzeichen auseinander gesetzt hat, kann man folgende wichtige Merkmale für die Gestaltung gelungener Bildzeichen zusammen fassen:

• Die Bedeutung eines Piktogramms und Icons sollte möglichst ohne den Zusatz von Text verständlich sein.
• Bildzeichen sollten international und unabhängig von einer jeweiligen Kultur verstanden werden können.
• Bildzeichen sollten möglichst auf unnötige Gestaltungselemente verzichten können.
• Icons und Piktogramme sollten vor allem der Information und Navigation dienen. Im Gegensatz zu Signets oder Markenzeichen, die der Unterstützung einer Corporate Identity dienen.
• Icons und Piktogramme sollten möglichst innerhalb eines Gestaltungssystems erstellt werden, da so leicht mehrere einheitliche Icons für ein Set erstellt werden können.

Dieses tolle YouTube-Video von iconwerk erklärt sehr anschaulich die wichtigsten Kriterien bei der Gestaltung von Icons:

3. Icons im Webdesign

Im Webdesign sind Icons ebenfalls nicht mehr wegzudenken und die praktischen Bildzeichen bieten ein wichtiges Hilfsmittel bei der Gestaltung eines übersichtlichen und international verständlichen Webseiten-Navigation.

Besonders beliebt sind Webdesign-Icons bei Onlineshops, für die Verlinkung auf Social Media Plattformen, bei der Navigation auf Blogs (Tag-Icons, Kommentar-Icons, Artikel-Formate etc,) oder auch auf Kontaktseiten.

Beim Einsatz von Icons im Webdesign ist es ebenfalls hilfreich, ein einheitliches Icon Set innerhalb eines Designs zu verwenden. Natürlich kannst du ein eigenes Icon-Set für eine Webseite erstellen, es gibt aber auch einige sehr schöne Icon-Sets als Freebies oder Premium-Set zu kaufen:

• Picons Icons: verschiedenste hochwertige Premium Icon-Sets und ein Freebie Social Media Icon Set.
• The Nounproject: Icon-Sammlung mit immer neuen Freebie-Icons (jeweilige Lizenz der Icons beachten)

Wie gefallen dir Icons zur unterstützenden Navigation auf Webseiten? Kennst du weitere hilfreiche Quellen und Infos zum Thema Icons oder weitere schöne Icon-Sets zum downloaden? Über dein Feedback und weitere Tipps freue ich mich sehr!

Link Icons

Bei Link-Icons wird oft mit Pfeilen, einer Weltkugel oder zwei verknüpften Ketten-Elementen gearbeitet.

Video Icons

Beliebte Icon-Symbole für Video-Artikel sind Fernseher, Videokameras oder eine Filmklappe.

Bild Icons

Bei Bild-oder Bildergalerie-Artikeln sind Icons mit Fotokameras natürlich besonders beliebt.

Text-Artikel Icons

Bei der Darstellung von Text-Artikeln wie Standard-WordPress-Artikeln, Kurzmitteilungen oder Statusmeldungen kann man ein Stift-Symbol, Text-Linien oder eine Schreibunterlage als Icon verwenden.

Zitat Icons

Bei Zitaten können Anführungszeichen, Mikrophone oder Megaphone zum Einsatz kommen.

Chatprotokoll Icons

Icons für Chatprotokolle sind meist mit Sprechblasen gestaltet. Doch auch Pfeile, die einen Kreis andeuten sind als Chat-Symbol denkbar.

Audio Icons

Für die Icons von Audio-Artikeln kommen Turntables, Lautsprecher, Kassetten-Symbole, Kopfhörer oder Noten verwendet werden.

Ich hoffe dir gefallen die Icons und es sind einige Inspirationen dabei, die dir bei der Gestaltung eigener Icons weiterhelfen? Kennst du weitere Themes oder Inspirationsquellen, die Icons für die Darstellung der Artikel-Formate nutzen? Über dein Feedback und weitere Tipps freue ich mich sehr!

Digitalmash

Die Navigation auf der Webseite Digitalmash von Grafikdesigner Rob Morris ist eine schlichte, farbenfrohe Textnavigation. Auf der Startseite werden die Überschriften der neusten Artikel aufgelistet, bei Maus-Hover werden die Links farbig eingeblendet.

Bit Byte Bit

Das Portfolio Bit Byte Bit des Webentwicklers Mike Stephens kann über eine minimalistisch gestaltete Filterfunktion sortiert werden. Die Arbeiten der unterschiedlichen Kategorien werden dann mit Hilfe von JavaScript neu eingeblendet.

Manufacture d’Essai

Das Menü auf der Webseite Manufacture d’Essai wird erst über einen Öffnen-Button am rechten Webseiten-Rand sichtbar. Beeindruckend ist auch die Überlappung von Überschriften und Texten mit den großen Fotografien im Bildhintergrund.

Tedx Portland

Die Single-Page Tedx Portland kann über ein schlichtes Header-MEnü navigiert werden. Ein besonderer Effekt der Webseite ist außerdem die Animation des Schriftzuges XRD.

Girlfriend

Die Navigation auf der Webseite Girlfriend ist sehr reduziert und funktioniert lediglich über zwei Buttons in der oberen schwarzen Header-Leiste. Interessant ist auch der beschreibende Text zu den Projekten im Portfolio gelöst. Dieser wird bei jedem neuen Projekt dezent eingeblendet.

Unfold

Bei der Single-Page Unfold ändern die Menüpunkte je nach Hintergrund die Farbe. Das Menü bleibt immer feststehend am oberen, rechten Rand der Webseite.

Stephen Vernon Clarke

Auf der Webseite des Fotografen Stephen Vernon Clarke ist die Navigation kreisförmig und mit minimalistischen Icons umgesetzt. Erst bei Hover werden die Texte Home, About etc. sichtbar.

Hundert Grad Kommunikation

Die Seitennavigation bei Hundert Grad Kommunikation ist über eine linksbündige Leiste gelöst. Die Navigation sowie Unterpunkte werden animiert eingeblendet.

Chitwood & Hobbs

Überarbeitet wurde die Navigation auf der sehr modern umgesetzten Webseite Chitwood & Hobbs. Hier sind die Navi-Punkte horizontal und vertikal in einem Balken angeordnet. Bei Hover über »Choose a Sport« werden weitere Menüpunkte eingeblendet.

Yuna Kim

Die Webseite von Yuna Kim ist sehr schön minimalistisch gestaltet. Die Navigation ist mit reduzierten geometrischen Icons, farblicher Unterteilung und aufklappbaren, animierten Menüs gelöst.

Camp David Film

Die rechtsbündige, feststehende Navigation auf der Webseite Camp David Film ist in Stil eines Tab-Menüs gestaltet. Bei Hover kommen zur weiteren Unterteilung verschiedene Link-Farben zum Einsatz.

SURROUND

Die Navigation auf der Webseite SURROUND ist extravagant und kreativ gestaltet. Neben einer schlichten Hauptnavigation kann man sich durch die verschiedenen, untereinander angeordneten Projekte klicken. Diese klappen beim Anklicken auf und können dann horizontal gescrollt werden.

Major Tom

Die Webseite Major Tom ist experimentell wie ein Puzzle aus mehreren Quadraten angelegt. Bei Anwählen eines Projektes oder Menüpunktes slidet das Feld auf, die übrigen Felder faden in den Hintergrund.

ap-o.com

Auf der Single-Page ap-o.com kann man sich über die in allen vier Ecken des Browserfensters sitzenden Menüpunkte durch navigieren. Die Navigation erfolgt sowohl von oben nach unten, als auch (bei den einzelnen Projekten) von links nach rechts. Die einzelnen Menüpunkte sind mit reduzierten Pixel-Icons umgesetzt.

JR/Group

Eine weitere experimentelle Umsetzung ist die Navigation der JR/Group. Hier sliden Untermenüpunkte und Inhalte aus einem rechtsbündig angelegten Navigationselement. Je nach Menüpunkt passt sich auch das Bildschirmfüllende Hintergrundbild an.

Six

Sehr reduziert ist die Navigation auf der Webseite von Six. Die Menüpunkte inklusive weiterer Untermenüs werden erst bei Hover sichtbar.

Brandon W. Oxendine

Das Menü der 4. Webseiten-Version von Brandon W. Oxendine ist ebenfalls reduziert und graphisch durch ein schlichtes Feld unterhalb eines Kontaktfeldes gelöst. Weitere Menüpunkte werden erst beim Anklicken sichtbar.

Blitz

Die Navigation auf der Webseite Blitz blendet sich erst bei Hover über das Webseiten-Logo ein. Es slidet eine linksbündige Menüleiste ins Bild. Die Möglichkeit zum Einblenden der Navigation ist durch ein schlichtes Plus-Zeichen gekennzeichnet.

iconwerk

Als Beispiel, dass man im Webdesign auch komplett ohne Navigation auskommen kann, ist die Webseite iconwerk. Die Webseite besteht lediglich aus Projektbildern, einem Infotext, sowie reduzierten Kontaktmöglichkeiten.

Wie gefallen dir die vorgestellten Lösungen, die Navigation auf einer Webseite umzusetzen? Kennst du weitere Webseiten, die eine besonders gute und innovative Umsetzung des Navigationselements haben? Über dein Feedback und weitere Webseiten-Tipps freue ich mich sehr!

Heath Waller Creative

Der Image-Slider auf der Webseite der Webdesignerin Heath Waller ist sehr schön in die Webseite integriert. Die Navigation funktioniert über schlichte Vor- und Zurück-Buttons und eine weitere dezente Übersichts-Navigation am unteren Sliderrand. Sehr elegant gelöst ist auch die Integration von Text in den Slider-Bildern.

Fish

Sehr elegant gelöst ist der Image-Slider auf der Webseite Fish. Die Bilder befinden sich hinter dem leicht transparenten Webseiten-Menü. Auch die Navigations-Buttons des Sliders liegen auf dem Menübalken.

Humaan

Das Besondere am Bilder-Slider auf der Webseite der australischen Designagentur Humaan ist, dass die Navigations-Buttons auf dem Webseiten-Hintergrund liegen. Die Slider-Bilder füllen die gesamte Webseiten-Breite aus.

LK Hjelle

Auf der norwegischen Webseite von LK Hjelle zieht sich der Image-Slider über die komplette Browser-Breite. Navigiert wird über schlichte Pfeil-Buttons in der linken Bildhälfte.

Lars Ahrens

Die minimalistische Webseite von Kommunikationsdesigner Lars Ahrens zeigt einen schlichten, großen Bilder-Slider auf der Startseite. Sehr schön ist auch die dezent animierte Typografie über den Bildern.

FreeAssociation

Der Slider bei FreeAssociation hat eine sehr schöne Unter-Navigation. Die dezent animierten Vor- und Zurück-Buttons sitzen ganz rechts und links am Bildschirmrand.

Brave Nu Digital

Der schlichte Slider auf der Webseite der Creative Agency Brave Nu Digital zeigt, dass auch typografische Elemente sehr gut in einem Bilder-Slider funktionieren.

IWC Schaffhausen

Die Webseite des Uhrenherstellers IWC Schaffhausen zeigt auf der Startseite einen eleganten Image-Slider mit einer sehr schön animierten Timeline.

Freunde von Freunden

Die Slider-Bilder auf der Webseite des Interview-Magazins Freunde von Freunden sliden von oben nach unten. Die Navigations-Buttons werden erst bei Maus-Hover sichtbar.

afgn

Der Bilder-Slider auf der Webseite afgn ist innovativ gestaltet. Die Bilder füllen die gesamte Browsergröße, die Navigation erfolgt über schlichte Buttons am rechten Bildrand. Das Logo und Introtext-Balken kann komplett ausgeblendet werden.

NL Engenharia

Die Bilder des Sliders auf der Webseite NL Engenharia können sowohl in einer Gesamtübersicht als auch einzeln angezeigt werden. Das Navigations-Menü blendet sich mittig am unteren Slider-Rand ein und zeigt zusätzliche Vorschaubilder an.

Rickard Sund

Der Bildschirmfüllende Slider auf der Webseite des Fotografen Rickard Sund ist durch eine spielerische Navigation gelöst. Durch Drag’n’Drop können die Bilder weiter geschoben werden, der Mauszeiger malt dabei eine dünne Linie über die Bilder.

Assistly

Auf der Webseite Assistly nimmt das Slider-Element die obere Bildschirmhälfte ein. Die Slider-Elemente beinhalten Text, Illustrationen und einen Link-Button.

Gauged2

Der kreative Slider auf der Webseite von Gauged2 reagiert auf Bewegungen mit der Maus und lässt die Bilder leicht wackeln. Die Animation der Bilder ist ebenfalls innovativ gelöst.

Gughi Fassino

Ein sehr innovatives Slider-Element gibt es auch auf der Webseite von Gughi Fassino zu bewundern. Die Fotografien lassen sich entweder in einer Vorschauansicht sliden oder in größeren Einzelbildern. Eine Navigation am unteren Bildschirmrand bietet weitere Filterfunktion der Bilder.

The Greenway Pro

Die Webseite des The Greenway Pro Fesivals besteht aus einem großen horizontalen Image-Slider der den Webseiten-Hintergrund bildet. Das Logo, Webseiten-Menü und die Sponsoren-Logos bleiben in einer darüber liegenden Ebene an ihrer festen Position stehen.

Hunt Studio

Der minimalistische Portfolio Bilder-Slider von Hunt Studio zeigt Bildschirmfüllende Bilder der neusten Arbeiten. Die Navigations-Buttons werden dezent ausgeblendet. Eine zusätzliche Übersichts-Navigation befindet sich am unteren linken Bildrand. Ein Infotext zu den einzelnen Projekten kann aus- oder eingeblendet werden.

Atlason

Die Arbeiten einer Produkt-Kategorie können auf der Webseite der Design Company Atlason in einem Image-Slider angeschaut werden. Die einzelnen Bilder sliden von oben nach unten und werden über eine Navigation mit Vorschaubildern bewegt. Über ein Plus/Minus-Button gelangt man zurück auf die Übersichtsseite.

Tangent Graphic

Die Designagentur Tangent Graphic zeigt ihre Projekte in einem schlichten Slider, der den gesamten Webseiten-Inhalt ausfüllt. Ein beschreibender Text ist auf einem dunklen, leicht transparenten Feld darübergelegt.

SLINT

Auf der Webseite des Singaporer Designstudios SLINT kann man sich durch die einzelnen Projekte mit Hilfe eines vertikalen Sliders navigieren. Die Bilder eines jeweiligen Projekts werden dann noch einmal in einem horizontalen Slider präsentiert. Die Navigation funktioniert über schlichte Text-Links.

Wie gefallen dir die Slider-Inspirationen? Fallen dir noch weitere Webseiten mit tollen Slider-Lösungen ein? Über dein Feedback und weitere Links freue ich mich sehr!

Tadanori Yokoo

Tadanori Yokoo ist einer der berühmtesten, japanischen Grafikdesigner überhaupt und seine provokanten Plakate aus den 1960er Jahren haben längst Kultstatus erlangt. Besonders spannend bei Yokoos Arbeiten finde ich die radikale und immer noch sehr modern wirkende Interpretation traditioneller, japanischer Motive und Stilmittel.

Plakat für eine Show von Tenjo Sajiki, 1960er Jahre. (Foto-Kredit: Flickr-Foto von Marquette University.)

Yokoos Plakat zeigt den japanischen Schriftsteller und politischen Aktivist Mishima Yukio, 1960er Jahre. (Foto-Kredit: Flickr-Foto von Marquette University.)

Plakat für die provokante, japanische Schauspielgruppe Jokyo, 1966.

Plakat für die Ausstellung Persona in Tokyo 1965.

Ryuichi Yamashiro

Das Plakat von Ryuichi Yamashiro ist die Interpretation eines sehr bekannten, japanischen Holzschnitt-Motives.

Plakat für das Museum of Modern Art in Tokyo 1960.

Ikko Tanaka

Ikko Tanaka ist ebenfalls einer der bekanntesten japanischen Grafikdesigner. Seine Plakate wirken besonders beeindruckend durch die klaren, reduzierten Formen und stimmigen Farbkombinationen.

Das berühmte Plakat für die UCLA Asian Performing Arts Institute, 1981.

Japanese Magazine-Cover der 20er und 30er Jahre

Diese japanischen Magazin-Cover aus den 20er und 30er Jahren habe ich auf Flickr entdeckt. Besonders inspirierend finde ich die Farb-Kombinationen und Illustrationen der Cover-Designs. (Fotokredit: Flickr-Bilder von 2946).

Ich hoffe dir hat der kleine Ausflug in die japanische Plakatkunst der 1920er bis 1980er Jahre gefallen. Kennst du weitere interessante japanische Künstler oder Grafiker, deren Arbeiten eine Inspirationsquelle für dich sind? Über dein Feedback und weitere Link- oder Buch-Tipps freue ich mich sehr!

Die Webseite designinspiration.net von Shelby White ist eine wahre Fundgrube für Kreative. Die Illustrationen, Grafiken, Album-Cover, Zeichnungen und Fotografien sind übersichtlich angeordnet und du kannst sie nach Farben, Beliebtheit oder Stichwörtern sortieren. Die Such-Funktion nach Farben gefällt mir dabei besonders gut. Möchtest du dich einfach nur ein wenig von den wunderschönen Bildern berieseln lassen, kannst du auch die praktische Keyboard-Navigation nutzen und dich so von Bild zu Bild weiterklicken.

Natürlich gefällt uns auch expressiveres Design sehr und die Gegensätze beider Richtungen macht Webdesign wohl erst so richtig spannend und vielseitig. Als Einstieg einer kleinen Serie über minimalistisches Webdesign habe ich in diesem Artikel die Grundprinzipien dieser Richtung, ein paar Infos zur Geschichte von Minimalismus, sowie Webseiten-Beispiele zur Inspiration zusammen gestellt.

1. Prinzipien minimalistischen Designs

Der prägendste Grundgedanke minimalistischer Kunst und Gestaltung ist das Prinzip: Die Form folgt der Funktion. Das bedeutet, dass alle Gestaltungselemente, die lediglich der Dekoration dienen und für die Funktion des Designs nicht notwendig sind, weggelassen werden.

Natürlich ist dieser Grundgedanke nicht neu und man findet minimalistische Prinzipien in den verschiedensten Bereichen von Kunst, Architektur, Design, Typografie aber auch in Lebensphilosophien. Besonders in asiatischen Kulturen und religiösen Weltanschauungen wie dem dem Buddhismus oder Taoismus sind diese Prinzipien der Vereinfachung und Reduktion aufs Wesentliche tief verankert. Aber auch in der modernen Konsumgesellschaft kommen die Menschen wieder zu einer reduzierten Lebensprinzipien zurück und das Motto „Simplify your life“ wird zum Trend.

Wichtig ist es meiner Ansicht nach, ein aufs wesentlichen reduzierten Designprozess nicht so zu interpretieren, dass keine individuellen Elemente mehr genutzt werden dürfen. Schließlich ist es auch bei einem minimalistischen Webdesign, eine Schrift oder ein Logo wichtig, Persönlichkeit und Identität auszustrahlen.

2. Entwicklung des Minimalismus in Kunst und Design

Eine sehr lange Tradition hat die minimalistisches Denkweise in der asiatischen Kultur. Japanische und chinesische Kalligrafie, japanische Architektur und Kunst spiegeln diese Prinzipien wieder.

Japanischer Garten in Singapur (Fotokredit von wilth).

In der modernen Kunst hat die minimalistische Kunst ihren Ursprung in den USA der 1960er Jahre. Der von Philosoph und Kunstkritiker Richard Wollheim prägte den Begriff »Minimal Art« in einem Artikel von 1965. Besonders großen Einfluss hatte der Minimalismus auf Skulpturen und Architektur, aber auch Musik und Design.

Sol LeWitt: Wall / Floor (Thress Squares) 1966 (Fotokredit von 16 Miles of String).

Geprägt ist der Minimalismus im Design sicher auch von den in Prinzipien und Denkansätzen des Künstlers Piet Mondrian mit seinen abstrakten auf die Grundfarben rot, gelb und Blau reduzierten Gittermustern.

Werk von Piet Mondrian (Fotokredit von Kent Wang).

In der Architektur prägte beispielsweise Ludwig Mies van der Rohe mit seiner Aussage »Weniger ist mehr« und seinen reduzierten, durch geometrische Formen geprägten Gebäuden die reduzierte Architektur der Moderne. Der Barcelona-Pavillion zur Weltausstellung 1929 ist wohl das berühmteste Beispiel für die Arbeit von Mies van der Rohe.

Barcelona-Pavillion, Nachbau in Barcelona (Fotokredit von Michael Schwegel).

Im Grafikdesign und in der Typografie wurde ein, auf die wesentlichen Elemente reduzierter Stil, besonders durch die Schweizer Typografie (ungefähr seit 1955) von Max Bill, Adrian Frutiger (Schriftentwürfe: Univers, Frutiger) oder Josef Müller-Brockmann (Rastersysteme) beeinflusst.

Univers-Schrift von Adrian Frutiger. (Fotokredit von 80magazine).

3. Gestaltungselemente minimalistischen Webdesigns

In der noch sehr jungen Disziplin Webdesign waren den Gestaltern anfangs auf Grund von technischen Einschränkungen nur relativ wenige Möglichkeiten gegeben. Durch die Weiterentwicklung von CSS und der Verwendung von Bildern (z.B. für Buttons oder Hintergründe) wurden den Webdesignern mehr Optionen gegeben. Inzwischen kann man aber auch wieder einen deutlicher Trend zu reduzierteren Designs, meist auf einem Rastersystem aufbauend erkennen.

Wichtige Prinzipien für minimalistisches Webdesign sind die Reduzierung auf die wesentlichen Designelemente. Auf alle Elemente, Flächen, Farben und Formen die nicht für der verbesserten Darstellung des Inhalts dienen, wird verzichtet. Eine gute Lesbarkeit und der Fokus auf den Inhalt sind die wichtigsten Ziele eines minimalistischen Webdesigns.

Meist wird ein minimalistisches Webdesign auf der Grundlage eines Rastersystems aufgebaut. Das Raster garantiert einen übersichtlichen und strukturierten Aufbau der Inhalte.

Auch die Weißräume in die Gestaltung mit einzubeziehen ist ein wesentliches Element des minimalistischen Webdesigns. Durch die richtige Verteilung von Abständen und Leerräumen zwischen den Inhalten kann die Hierarchie der Inhalte erkennbar gemacht werden.

Die Typografie in minimalistischen Designs ist ebenfalls schlicht und reduziert, durch die Verwendung weniger Schriften in ihren unterschiedlichen Schnitten (italic, bold, normal) und Schriftgrößen kann die Hierarchie der Inhalte weiter betont werden.

Auch für die Farbgebung eines minimalistischen Designs gilt das Prinzip »weniger ist mehr«. Meist wird als Grundfarbe, weiß, schwarz oder Grau verwendet. Eine weitere Signalfarbe dient dann oft als Link- oder Hinweisfarbe.

4. Beispiele im Webdesign

Zur Inspiration habe ich noch einige interessanten Webseiten-Beispiele mit minimalistischem Designansatz zusammen gestellt.

Francesco Bertelli

Die animierte Portfolio-Webseite des in New York lebenden Designers Francesco Bertelli lebt von ihrer Großzügigkeit und Einfachheit. Die Farbigkeit beschränkt sich auf Blau- und Grautöne und Weiß. Bemerkenswert ist auch der angenehme Hover-Transition-Effekt der einzelnen Quadrate.

Kaune & Hardwig

Kaune-Hardwig.com ist die Portfolio-Webseite des Berliner Grafikdesign- und Typografiestudio von Malte Kaune und Florian Hardwig. Die schlichte Eleganz der Webseite präsentiert optimal die sehr schönen Arbeiten. Die schwarz/weiße Webseite setzt Gelb sehr dezent als Initialfarbe ein.

Allan Yu

Auch die Portfolio-Webseite des Grafikdesigners Allan Yu spielt mit einer sehr reduzierte Farbpalette. Einige Slider helfen bei dei Navigation der Webseite. Bemerkenswert und einprägsam finde ich auch das Logo, welches den Nachnamen Yu (weiß auf schwarz) auf dem Kopf liegend zeigt.

Andy Rutledge

Der Webblog des Designers Andy Rutledge hat eine wunderschöne Typografie. Auch interssant finde ich den etwas ungewöhnlichen Aufbau, geprägt ist von horizontalen grauen Hintergrunds-Flächen und einer knalligen Orange-Roten Initialfarbe.

Lundgren + Lindqvist

Auch diese sehr minimalistische Webdesign des Designstudios Lundgren + Lindqvist aus Göteborg, schafft es Inhalte und Projekte sehr schön in den Vordergrund treten zu lassen.

sindsindsind

Das Portfolio des Typografen und Designers Greg Ponchak ist meiner Ansicht ebenfalls ein gutes Beispiel für minimalistisches Webdesign. Sehr ungewöhnlich ist der Hover-Effekt von Bildern, da alles bis auf das jeweilige Bild mit einer blau-transparenten Fläche abgedunkelt wird.

Re-Format

Das englische Design Studio Re-Format nutzt für seinen Webauftritt ein sehr grelles Grün. Eine Besonderheit in der sonst sehr reduzierten Gestaltung finde ich das Logo, welches in zwei Teile geteilt ist (oben rechts und unten links auf der Webseite) und die Inhalte der Webseite dahinter vorbeiscrollen.

Keith Houston

Der Designer Keith Houston nützt für seinen Blog eigentlich nur rote und schwarze Typografie, aber dafür super lesbar und super angenehm.

The Dye Lab

Auch die Portfolio-Webseite des Grafikdesign-Studios The Dye Lab aus Seattle/New York basiert auf einem sehr klaren Rasterlayout. Sehr interessant finde ich die farbigen Felder und wie man diese auf der Seiteverschieben und wegklicken kann.

Method Design Lab

Die Webseite von Method Design Lab verwendet ein dezentes Grau als Grundfarbe, die Navigation ist reduziert. Die Überschriften der Artikel und neusten Tweets wird mit einer farbigen Grundform in unterschiedlichen Größen eingeblendet.

ZWEIDREI

Der sehr kreative und experimentelle Webauftritt der Berliner Medienagentur ZWEIDREI verwendet als Hauptdesign-Element und Webseiten-Navigation mehrere schwarze Dreiecke, die sich bei Rollover in verschiedenen Farben animieren.

Weitere minimalistische Webdesign-Inspirationen kannst du dir übrigens auch noch auf der Webseite Minimal Sites anschauen.

Wie gefällt dir minimalistisches Design und was hältst du von den Prinzipien dieser Richtung? Kennst du noch weitere interessante Quellen oder Webseiten-Beispiele für minimalistisches Webdesign? Über dein Feedback und weitere Tipps freue ich mich sehr!

1. Artikel-Formate bei Tumblr

Natürlich liegt es nahe einmal bei den Tumblr-Themes zu spicken, und zu schauen wie die Darstellung der verschiedenen Post Formats dort umgesetzt werden. Bei Tumblr gibt es ja bereits seit langem die Option, Artikel in verschiedenen Formaten auszuwählen. Möchte man einen neuen Artikel schreiben, wählt man einfach die benötigte Artikel-Art im Dashboard aus.

Die Artikel-Formate im Tumblr-Dashboard.

Was die Tumblr Theme-Designer bisher so alles aus dieser Möglichkeit gemacht haben, zeigen folgende kreative Theme-Beispiele.

Inspire Well

Inspired Well ist ein flexibles, auf einem Raster aufgebautes Tumblr-Theme mit modernen Designelementen, schlichter Typo und schönen Icons. Die Artikel-Formate z.B. Link, Zitat oder Audio sind ebenfalls mit kleinen, minimalistischen Icons, jeweils rechts neben der Artikel-Überschrift umgesetzt.

Tiles

Tiles hat einen ungewöhnlichen Aufbau, die Artikel-Überschriften werden lediglich in kleinen quadratischen Flächen angezeigt. Bei Rollover erscheint dann der Artikeltext, bzw. die Chat-Nachricht, das Foto etc. auf der Webseite. Interessant ist, dass der Audiostream sofort abgespielt werden kann.

Vogue Theme

Im Vogue-Theme werden alle Artikel auf optisch hervorgehobenen Feldern angezeigt. Die Artikel-Formate unterscheiden sich lediglich in der unterschiedlichen Gestaltung. Die Gestaltung der Chat-Artikel mit einer farblichen Abtrennung finde ich sehr gelungen.

Trvl

Trvl hat ein sehr schlichtes, großzügiges Design und auch die Artikel-Formate sind hier nicht extra gekennzeichnet, sondern lediglich durch unterschiedliche Gestaltung umgesetzt. Die Zitate sind z.B. mit farbigen Hintergründen hervorgehoben.

Themenificent

Auch bei Themenificent bekommt man eine tolle Übersicht, wie die Artikel-Formate im Design umgesetzt werden können. Schön ist, dass bei Audio-Posts Autor, Song und Album mit angegeben werden können.

Palmatum

Palmatum ist ein sehr schlichtes, modernes Theme. Die Post Formats werden hier durch minimalistische Icons und eine Abtrennung mit Text markiert.

Esquire

Das Theme Esquire geht ebenfalls sehr kreativ mit den Artikel-Formaten um, ohne dass die Formate extra markiert sind. Die Chat-Artikel, Zitate und Audio-Artikel sind hier besonders interessant gelöst.

Retrobitch

Bei Retrobitch gibt es auch keine Icons, welche die verschiedenen Formate kennzeichnen. Die Artikel des schlicht gestalteten Themes sind in einem Raster unterteilt und jeweils leicht unterschiedlich gestylt.

LightGrid

Das moderne Tumblr-Theme LightGrid kennzeichnet die Artikel-Formate typografisch. Die Texte »Link, Chat, Image oder Audio« werden links in einem extra Text-Block angezeigt.

Firsts

Im Theme Firsts werden die Artikel zweispaltig angeordnet und in Feldern dargestellt. Die Post Formats werden mit einem farbigen Balken am linken Artikelfeld markiert.

Tumblog Themes von WooThemes

Wie du bei den Tumblr-Theme Inspirationen siehst, gibt es wirklich jede Menge kreative Wege, die Gestaltung der Artikel-Formate umzusetzen. Der große WordPress-Themeanbieter Woothemes hat die Idee unterschiedlicher Post Formats für seine WordPress-Themes übrigens auch schon seit längerem im Angebot.

Link, Zitat und Audio-Post im WordPress-Theme Elefolio von Woothemes.

Hier findest du eine Übersicht aller bisher veröffentlichten Woothemes mit unterschiedlichen Artikel-Formaten.

2. Weitere Gestaltungsvorschläge und Styling-Tipps für Post Formats

Auch wenn sehr beliebt, sind spezielle Icons natürlich nicht die einzige Möglichkeit, um unterschiedliche Artikel-Formate gestalterisch umzusetzen. Wie man ja bei den Tumblr-Themes schon gesehen hat, sind der Kreativität der Theme-Designer wirklich keinerlei Grenzen gesetzt.

Mir persönlich gefallen schlichte Icons zwar sehr gut, ich denke es kommt aber immer auf das jeweilige Theme an, ob Icons, eine schlichte Textmarkierung oder einfach nur eine unterschiedliche Gestaltung der Formate sinnvoller ist.

Eine spezielle Angabe oder ein Textfeld, z.B. mit Infos über Aufnahmeort und Kamera-Ausstattung bei Bild-Artikeln (ähnlich wie bei Flickr), ist außerdem eine tolle Möglichkeit, um WordPress-Blogs noch lebendiger und individueller zu gestalten.

Matt Mullenweg zeigt auf der Einzelansicht von Fotos auf seinem Blog ebenfalls eine solche Info-Notiz an.

Wie du siehst bietet das neue Theme-Feature jede Menge Optionen, um Blogs noch flexibler und vielseitiger zu gestalten, und so den Spaß beim Bloggen noch zu erhöhen. Fallen dir weitere Ideen und Gestaltungstipps ein, um die neuen Artikel-Formatvorlagen effizient zu nutzen? Denkst du, dass neue Feature wird großen Anklang finden und von vielen Bloggern genutzt werden?

Über dein Feedback und deine weiteren Gestaltungsvorschläge und Inspirations-Tipps freue ich mich sehr!

Übrigens, wenn du nachlesen möchtest, wie die Integration der Post Formats ab WordPress 3.1 funktionieren wird, und wie du die Post Formats mit Hilfe von CSS stylen kannst, schau doch einmal in unserem vorherigen Artikel über die Artikel-Formatvorlagen oder im Beitrag zu den Post Formats im WordPress-Codex nach.