Inspiration geht manchmal weite Wege. Da können einen ganz alltägliche Dinge auf gute Ideen bringen, die dann doch wieder ganz anders aussehen können. Bei mir sind das manchmal sowohl die Musik als auch die Platten-Cover von Putumayo – DAS Label für Weltmusik. Zu speziellen Themen werden grandiose Musikstücke vorgestellt. Die Platten-Cover sind jeweils eine Augenweide.

Schon lange hatte ich mir vorgenommen, einige der Kunststücke, die Putumayo auf ihre Platten-Cover zaubern, hier vorzustellen. Das Ganze passt zwar nicht direkt in die Sparte Webdesign, aber Inspiration wird durch alle möglichen Impulse erzeugt.

→ Putumayo World Music – Official Site

World Reggae

World Groove

Turkish Groove

Sahara Lounge

Rhythm & Blues

North African Groove

Latin Lounge

Asian Lounge

Arabic Groove

Afro Latin Party

African Groove

African Odyssey

Acoustic Arabia

¡Baila!

Women of Latin America

Relevante Links

• Putumayo World Music – Official Site
• EXIL MUSIK

Retro ist entgegen der Definition absolut zeitgemäß und nicht etwa Kram von gestern. Der Retro-Stil im Webdesign gilt als hip. Jeder Webdesigner weiß, dass besonders die ungerade Formgebung nicht ganz einfach umzusetzen ist und ein Vielfaches an Mehrarbeit bedeutet. Somit lässt sich mit Retro-Design mancher Blumentopf gewinnen. Bei richtiger Form- und Farbgebung ist die Aufmerksamkeit garantiert.

Im Folgenden habe ich mal ein paar Beispiele zusammengestellt, die mir besonders gut gefallen haben. Am Ende des Artikels findet Ihr ein paar nützliche Links zu Tutorials und zahlreichen Ressourcen für das Gestalten eines Retro-Designs.

Radio – The New York Moon

→ Link zur Website

Ready Photo Site

→ Link zur Website

MISTER-AERO

→ Link zur Website

All Star Lanes

→ Link zur Website

TargetScope

→ Link zur Website

Element Fusion

→ Link zur Website

Rockabilly Rules

→ Link zur Website

Blue Moon Dueling Piano Bar

→ Link zur Website

Cottonseed Oil

→ Link zur Website

Lataka

→ Link zur Website

Michela Chiucini

→ Link zur Website

The Trian Woodburns

→ Link zur Website

Sottocosto Ska

→ Link zur Website

Level 2 Design

→ Link zur Website

The Hipstery!

→ Link zur Website

Webdesigner.ro

→ Link zur Website

Thrush Exhaust

→ Link zur Website

Style 4 you

→ Link zur Website

Prahba

→ Link zur Website

Carrozzeria Verga

→ Link zur Website

Tutorials

• 35 tolle Retro Photoshop Tutorials
• 40 Incredibly Inspirational Retro & Vintage Photoshop Tutorials
• 50 Beautiful Retro and Vintage Photoshop Tutorials
• 30 Useful Photoshop Tutorials for Vintage and Retro Style
• 25 Cool Retro Photoshop Tutorials

Photoshop-Pinsel

• 28 of the Coolest Retro Style Photoshop Brush Sets
• 500+ Free Photoshop Retro Brushes
• Retro Photoshop Brushes And Vector Images – Giant Design Pack

Texturen & Hintergrundbilder

• 6 large retro textures 01pack
• 30 Most Incredible Textures for Vintage Style Design
• Retro on WebTreats

Für die Handwerker ein Material mit vielen Möglichkeiten. Für Designer oft die erste Wahl. Die Überschrift hat ja schon alles verraten, die Rede ist natürlich von Holz. Es kommt auf vielen Webseiten zum Einsatz und das sieht meistens auch noch sehr schön aus. Es schafft so eine schöne Atmosphäre wie ich finde. Aber schaut am besten selbst.

Electric Pulp

→ Link zur Webseite

Mayflower Brewing

→ Link zur Webseite

TapTapTap

→ Link zur Webseite

Kendo

→ Link zur Webseite

The Things we make

→ Link zur Webseite

Freelenz

→ Link zur Webseite

Kuhboom

→ Link zur Webseite

Matthias Schütz

→ Link zur Webseite

2pitch

→ Link zur Webseite

IconDock

→ Link zur Webseite

Tohavit

→ Link zur Webseite

Siebert Surfboards

→ Link zur Webseite

Vige Turf

→ Link zur Webseite

Creative Spaces

→ Link zur Webseite

The Farmer and the Chef

→ Link zur Webseite

Viele Webseiten die wir täglich besuchen sind sehr komplex und bestehen aus Unmengen an Seiten und Unterseiten. Jedoch ist es seit längerer Zeit ein Trend Seiten zu gestalten wo sich alles auf einer Seite abspielt. Es wird hier dann mit so genannten “Ankern” durch die Seite navigiert. Hier möchte ich euch heute 15 Stück davon vorstellen. Viel Spaß beim durch klicken!

Alex Arts

Link zur Webseite

Chris Benz

Link zur Webseite

Schneider Garten

Link zur Webseite

Fajne Chlopaki

Link zur Webseite

Fat Man Collective

Link zur Webseite

FS Dsign

Link zur Webseite

Jon Brousseau

Link zur Webseite

Kevin Lucius

Link zur Webseite

Legwork Studio

Link zur Webseite

Liverpool Design Symposium

Link zur Webseite

Orange Label

Link zur Webseite

Sacred June

Link zur Webseite

Tea Round App

Link zur Webseite

Thierry Castel

Link zur Webseite

Yodaa

Link zur Webseite

Für die Handwerker ein Material mit vielen Möglichkeiten. Für Designer oft die erste Wahl. Die Überschrift hat ja schon alles verraten, die Rede ist natürlich von Holz. Es kommt auf vielen Webseiten zum Einsatz und das sieht meistens auch noch sehr schön aus. Es schafft so eine schöne Atmosphäre wie ich finde. Aber schaut am besten selbst.

Andrew Bradshaw

Link zur Webseite

Bell 2 Lodge

Link zur Webseite

Formrausch

Link zur Webseite

Foxie

Link zur Webseite

Level 9 Design

Link zur Webseite

Marchand de Trucs

Link zur Webseite

Mayflower Brewing

Link zur Webseite

Perfect Order

Link zur Webseite

Quality xHTML

Link zur Webseite

Slabovia

Link zur Webseite

Van der Vaart

Link zur Webseite

Vanilla Splits

Link zur Webseite

Weblounge

Link zur Webseite

Wrap Rage Cure

Link zur Webseite

Your Church

Link zur Webseite

Illustrationen sind oft Bestandteil einer Webseite. Oft kommen hier Landschaften zum Einsatz oder eine Karikatur der Seitenbetreiber. Meiner Meinung nach hübschen Sie eine Seite fast immer auf und lassen die Seite freundlich wirken.

Kitfolio

Link zur Webseite

Boagworld

Link zur Webseite

also known as

Link zur Webseite

Answer Jam

Link zur Webseite

DivVoted

Link zur Webseite

Miki Mottes

Link zur Webseite

Marchand de Trucs

Link zur Webseite

Krolikov

Link zur Webseite

Volll

Link zur Webseite

Studio E-Space

Link zur Webseite

unlimited Orange

Link zur Webseite

Stoodeo

Link zur Webseite

YoDiv

Link zur Webseite

Meomi

Link zur Webseite

Adit Shukla

Link zur Webseite

Alle Webseiten sind gleich, aber manche sind gleicher! Dieser Artikel zeigt 25 ungewöhnliche Ideen zur Navigation im Webdesign. Wer sich von alternativen Navigationsmöglichkeiten für die eigene Website inspirieren lassen möchte, sollte diese Beispiele unbedingt kennen.

24 Ways

Link zur Webseite

24 Ways ist ein Adventskalender der besonderen Art. Seit 2005 erscheint jeweils vom 1. Dezember bis zum 24. Dezember ein neuer Tipp zum Webdesign und der Webentwicklung. Jeder Artikel steht für eine Tür im Adventskalender und man darf gespannt sein, welche Tipps es dieses Jahr wieder geben wird.

Blue Bug Digital

Link zur Webseite

Das besondere an Blue Bug Digital ist schnell entdeckt. Sobald man die Maus bewegt, kann man sich um 360° drehen und die Firmenräume sehen. Die Navigation erfolgt über Symbole, die im Raum angeordnet sind. Dabei gibt es einiges zu entdecken und es macht Spass das Büro zu erkunden.

Bounty Bev

Link zur Webseite

Bei Bounty Bev sind alle Inhalte auf der Startseite zu finden. Man scrollt sich nach unten durch und folgt der Straße. In regelmäßigen Abständen findet man die verschiedenen Inhalte, zu denen man aber auch direkt über die horizontale Navigationsleite springen kann. Erst ganz am unteren Ende der Seite findet man das Bounty Mobil mit dem das Bier ausgeliefert wird.

Fat Man Collective

Link zur Webseite

Die Seite von Fat Man Collective erinnert mich irgendwie an ein Gedicht. Wie auf der Grafik bereits zu erkennen ist, werden verschiedene Wörter wiederholt, um diese “Digital Creatives” vorzustellen. Sobald man den Links dieser Auflistungen folgt, erscheint links der entsprechende Inhalt.

Forsman & Bodenfors

Link zur Webseite

Die Startseite von Forsman & Bodenfors ist sehr raffiniert. Das mittlere ovale Feld dient einerseits als Eingabefeld für die Suchfunktion und andererseits erscheint dort der Text der verschiedenen Unterseiten, sobald man die Maus über die verschiedenen Bilder bewegt.

Got Milk

Link zur Webseite

Bei Got Milk wird die lange Ladezeit gleich benutzt, um dem Kunden erste Informationen zu vermitteln. Diese Seite stellt eine Fabrik dar, bei der jedes Tier ein eigenes Schild mit einer individuellen Werbebotschaft hat, welches durch einem Hover Effekt angezeigt wird.

Hello Goodlooking

Link zur Webseite

Die Navigation von Hello Goodlooking erinnert an Brainstormingmethoden. Es wird gezeigt wie die Seiten untereinander vernetzt sind. Wenn man auf ein Element klickt, öffnen sich solange hierachische Unterseiten, bis schließlich der Seiteninhalt eingeblendet wird.

Im Design

Link zur Webseite

Auch die Webseite von Im Design überrascht durch eine sehr ungewöhnliche Navigation. Gleich am Anfang erscheint eine kurze Anleitung, wie man sich mit der Tastatur durch die Seite navigieren kann. man fliegt förmlich über die einzelnen Navigationselemente. Dabei kann man auch noch den Betrachtungswinkel ändern.

Mandchou

Link zur Webseite

Bei Mandchou sollte man eventuell den Ton einschalten, wenn man einen vollständigen Eindruck von der Seite erhalten möchte. Im Mittelpunkt der Webseite stehen die bisherigen Projekte.

Marc Anton Dahmen

Link zur Webseite

Auch bei Marc Anton Dahmen erscheint zunächst eine kurze Anleitung, wie man die Seite mit der Tastatur erkunden kann. Die Seiteninformationen sind als Visitenkarten angeordnet. Sobald man eine dieser Karten anklickt, erscheint die jeweilige Karte groß im Zentrum.

Marc Ecko

Link zur Webseite

Marc Ecko präsentiert sich auf seiner Webseite vor einer Wand stehend. Die Seiteninhalte erscheinen als Bilder an dieser Wand. Der Bildschirm meines Notebooks ist zu klein, um die gesamte Breite der Seite anzuzeigen. Sobald ich den Mauszeiger bewege, verschiebt sich auch der Seiteninhalt und ich kann trotzdem die ganze Seite sehr gut überblicken. Erst wenn man die Maus nach oben bewegt, fährt ein horizontales Menü aus.

Mareen Fischinger

Link zur Webseite

Die Webseite der deutschen Fotografin Mareen Fischinger aus Düsseldorf stellt die Bilder in den Mittelpunkt der Seite. Die verschiedenen Bilderserien kann man im linken Auswahlfeld wechseln. Mit dem Scrollrad der Maus kann man sich die wirklich sehr professionellen Bilder sehr bequem ansehen. Bei jedem Aufruf der Seite erscheint zufällig eine andere Fotoserie.

Okay Dave

Link zur Webseite

Die Navigation von Dave Werner lebt von den Bildern. Alternativ kann man aber auch die Navigationszeile unten auf der Seite benutzen.

Salinas

Link zur Webseite

Salina ist eine Seite für brasilianische Bademode. Die Seite braucht sehr lange beim Laden. Dann setzt die Musik ein und erst wenn man die Maus über die einzelnen Buchstaben führt, gibt es einen Überraschungs-Effekt. Wer diese Seite nicht kennt, wartet vermutlich selten, bis diese vollständig geladen ist.

Sensi Soft

Link zur Webseite

Die Seite von Sensi Soft beinhaltet als zentrales Element eine Litfaßsäule. Jede Unterseite zeigt diese Litfaßsäule in einer anderen Stadt mit einer anderen Hintergrundmusik. Die Inhalte werden dabei auf der Säule angezeigt.

Snuggle Fux

Link zur Webseite

Die Navigation bei Snuggle Fux ist sehr minimalistisch und übersichtlich. Es erscheint nur das Datum und die Überschrift eines Artikels. Sobald man auf einen Artikel klickt, fährt dieser aus und der Inhalt erscheint.

Steven Holl Architects

Link zur Webseite

Bei Steven Holl Architects erscheint bei jedem Seitenaufruf ein anderes Bild bisheriger Architektur-Projekte. Die Navigation wirkt minimalistisch und ist trotzdem funktional.

Studio Output

Link zur Webseite

Die Navigation bei Studio Output erfolgt über die Bilder. Sobald man mit der Maus über ein Bild fährt, erscheinen weitere Informationen zu den einzelnen Unterpunkten. Diese Navigation kann eventuell den Benutzer neugierig machen, die Seite zu erkunden. Ein gezieltes Suchen von Informationen ist allerdings nur schwer möglich.

The Anthropologist

Link zur Webseite

Auf dieser Seite wird schrittweise ein Text eingeblendet, der die Links zu den jeweiligen Unterseiten enthält. Die Idee ist interessant und die Seite kommt ohne Bilder bei der Navigation aus.

The Architects

Link zur Webseite

Bei The Architects dachte ich zunächst, man hätte die Bilder vergessen. Diese erscheinen jedoch, sobald man mit der Maus über die freien Flächen fährt. Wenn man auf eines der Bilder klickt, erscheinen auch alle anderen Bilder des jeweiligen Projektes.

The United Network

Link zur Webseite

Bei United Network ist ein Kreis, der vermutlich die Welt symbolisieren soll im Zentrum. Die verschiedenen Weltstädte, in denen das United Network aktiv ist, werden jeweils durch ein Wahrzeichen repräsentiert. Das ist eine sehr interessante Möglichkeit, um z.B. auf Zweigniederlassungen hinzuweisen.

Thibaud

Link zur Webseite

Bei Tribaut wird die Navigation in Form von verschiedenen Fächern dargestellt. Wenn man einen Bereich auswählt, klappt der jeweilige Fächer auf.

Whistles

Link zur Webseite

Das Grundprinzip der Navigation bei Whistles ist sehr ähnlich wie bei der bereits erwähnten Seite von Marc Ecko. Das besondere an Whistles ist, dass es sich hierbei um einen E-Commerce Shop handelt

Wonder Wall

Link zur Webseite

Die Webseite von Wonderwall wirkt durch die würfelartige Navigation sehr dreimensional und lebendig. Dadurch hat diese Seite definitiv einen großen Wiedererkennungseffekt.

Work Life Balance Centre

Link zur Webseite

Beim Work Life Balance Centre wirkt die horizontale Navigationsleiste zunächst sehr dezent. Wenn man einen dieser Navigationspunkte auswählt vergrößert sich die entsprechende Spalte deutlich und blendet die Unternavigationselemente sehr dominant vor einem schwarzem Hintergrund ein.

Hilfreiche Quellen

Diese Seiten kannnte ich natürlich nicht alle selbst. Auf die Idee mich mit ungewöhnlichen Navigationsideen kam ich, da ich Webdemar bei Twitter folge. Simon entdeckte einen Artikel zum Thema bei acrisdesign.com Aus dieser Übersicht habe ich sechs Beispiele übernommen. Weitere neun Beipiele fand ich bei noupe.com. Die weiteren Ideen habe ich in der großen Auswahl bei siteinspire.net gefunden.

Es gibt natürlich noch viele weitere Beispiele für ungewöhnliche Navigationsideen. Dies waren die 25, die mir persöhnlich besonders aufgefallen sind. Kennt jemand noch weitere Beispiele für ungewöhnliche Navigationsideen, die ihn beeindruckt haben?

Jede Webseite hat auch ihr eigenes Colorsheme im Schlepptau. Heute wollen wir uns Webseiten widmen die fleißig mit der Farbe rot daher kommen. Rot an sich ist ja bekanntlich eine Signalfarbe und von daher auch für geeignet um aufmerksamkeit zu erziehlen. Seht und beurteilt selbst ob dies gelungen ist.

30elm

Link zur Webseite

204 Beech Avenue

Link zur Webseite

Charles Eelena

Link zur Webseite

IGN Enternainment

Link zur Webseite

DIS AG

Link zur Webseite

England Squash & Racketball

Link zur Webseite

Future of Webdesign

Link zur Webseite

Host Riser

Link zur Webseite

New to York

Link zur Webseite

Nyxen

Link zur Webseite

Peter Kröner

Link zur Webseite

Stuff and Nonsense

Link zur Webseite

The black Harbor

Link zur Webseite

Vesess

Link zur Webseite

Youth against Sudoku

Link zur Webseite

CSS3 ist ein Segen für jeden Webdesigner. Mit dem Einsatz einfacher CSS-Eigenschaften lassen sich mit ein paar Zeilen Code tolle Effekte erzielen. Man kann sich so den Umweg über Bilder sparen und somit zur Suchmaschinenlesbarkeit, Performance und Sauberkeit des Codes beitragen.

s. a. Artikel vom 23. September 2009
Beeindruckende Effekte mit der CSS-Eigenschaft text-shadow

Weil mich interessiert, in wie weit die CSS3-Eigenschaft text-shadow bereits eingesetzt wird, habe ich mal im Netz umgesehen. Ich bin fündig geworden und habe ein paar Beispiele hier zusammengestellt.

1. MetaLab

Link zur Website

2. LittleSnapper

Link zur Website

3. Thermometer App

Link zur Website

4. Iced Cocoa – Keymote

Link zur Website

5. wpSEO

Link zur Website

6. Checkout App

Link zur Website

7. CSSEdit

Link zur Website

8. Server Density

Link zur Website

9. WordPress.com

Link zur Website

10. Tim Van Damme

Link zur Website

11. Ego App

Link zur Website

12. Snow Reports App

Link zur Website

13. atebits

Link zur Website

14. Rogie King

Link zur Website

15. Gilbert Pellegrom

Link zur Website

16. siteInspire

Link zur Website

17. Fusion Ads

Link zur Website

18. My Brand HQ

Link zur Website

19. MonAssoc

Link zur Website

20. Squarespace Blog

Link zur Website

21. For A Beautiful Web

Link zur Website

22. MacHeist

Link zur Website

23. CSS Wizardry

Link zur Website

24. Tommy Day

Link zur Website

25. Webtrendmap

Link zur Website

Persönlich habe ich eine klare Vorliebe für dunkles Webdesign. Man sieht es nicht zuletzt an meinen Themes, die überwiegend dunkel sind. Meiner Meinung nach ergeben sich in dunklen Designs mit gewissen Arbeitsschritten sehr interessante Effekte, die einer Website einen gewissen Glanz und Edel geben können. Hier eine Auswahl mich inspirierender Websites.

1. Positive Hype

Link zur Website

2. Firebird

Link zur Website

3. Creative Joomla

Link zur Website

4. piz’za-za

Link zur Website

5. Muslim Burial

Link zur Website

6. Ecoya Blog

Link zur Website

7. Dezine Zync

Link zur Website

8. Stjepan Tafra

Link zur Website

9. VMGBlades.com

Link zur Website

10. Septira

Link zur Website

11. DesignAddict.pl

Link zur Website

12. RAE Magazine Online

Link zur Website

13. Humza Ijaz

Link zur Website

14. Mr. Henry

Link zur Website

15. Pirata London

Link zur Website

16. Rezoactif

Link zur Website

17. Charlie Gentle

Link zur Website

18. Vyniknite.sk

Link zur Website

19. Mana Music

Link zur Website

20. Ryan McMaster

Link zur Website

21. Beautiful 2.0

Link zur Website

22. DreamStar Studios

Link zur Website

23. TANQ

Link zur Website

24. MAQUINA studio

Link zur Website

25. Danny Diablo

Link zur Website