1. Starbucks – Nostalgie, Abenteuer und Romantik

(Fotokredit: pierofix)

Ich gebe es zu, ich liebe Kaffee :-) Daher hat es mich natürlich brennend interessiert, woher das extravagante Logo der beliebtesten Kaffee-Kette der Welt, das Starbucks-Logo eigentlich kommt, und welche Bedeutung und Wirkung das Logo hat.

Der Name Starbucks ist inspiriert von Starbuck, dem kühnen Seefahrer aus dem Roman »Moby Dick«. Damit wollten die Gründer von Starbucks an die alte Kaffeehändler-Kultur anknüpfen, was auch sehr gut passt, denn das erste Starbucks-Kaffee wurde in der Hafengegend von Seattle eröffnet. Ursprünglich war das Logo braun, und nostalgischer gestaltet. Die Figur im Starbucks-Logo mit den zwei Fischflossen ist eine Sirene, ein Fabelwesen aus der griechischen Mythologie. In der ersten Logo-Version waren die Brüste der Sirene und ihr Bauchnabel zu sehen. Später wurden die Brüste durch die offenen Haare der Sirene verdeckt. Du kannst dir das erste Starbucks-Logo auf der Starbucks-Webseite anschauen. Die derzeitige, moderne Version des Logos gibt es seit 1992.

1.1. Nostalgische Symbole und Wappen

Ich finde die Geschichte des Logos sehr interessant, und habe eine Auswahl ähnlicher Symbole zusammen gestellt, die für mich Nostalgie, Abenteuer und Romantik ausstrahlen. Als Formen für Logos im nostalgischen Stil sind Wappen und Embleme sehr geeignet.

1.2. Weitere, kreative Logos im Nostalgia-Stil

2. Amazon.com – Geschwindigkeit, Humor und Zufriedenheit

(Fotokredit: soumit)

Das Logo des weltberühmten Versandhandels Amazon hat eine clevere und humorvolle Doppelbedeutung. Der Pfeil, der Geschwindigkeit aussagt, zeigt von A bis Z. Das bedeutet, Amazon-Kunden können Waren jegliche Art bestellen.Gleichzeitig ist der Pfeil zu einem Lächeln geformt. Ein Symbol für eine clevere Business-Idee und zufriedene Kunden.

Ich finde es sehr spannend, was für eine geniale Wirkung eine eigentlich so simple Idee haben kann. Der Pfeil ist natürlich ein sehr beliebtes Logo-Symbol, der für Dynamik, Geschwindigkeit und Zukunft steht. Bei einem so deutlichem Symbol ist es besonders wichtig, die Logo-Idee kreativ umzusetzen.

2.1. Jede Menge Pfeil-Symbole

2.2. Kreative Logoentwürfe mit Pfeilen

3. Deutsche Bank – Wachstum und Sicherheit

(Fotokredit: Deutsche Bank AG)

Das zeitlose Logo der Deutschen Bank ist ein richtiger Klassiker, und wurde 1974 entworfen. Das Logo-Symbol ist ein Schrägstrich im Quadrat. Der Schrägstrich steht dabei für ständiges Wachstum und eine dynamische Entwicklung. Das umrahmende Quadrat für Sicherheit und ein kontrolliertes Umfeld. Das Logo kann alleine stehen oder mit dem Schriftzug der Deutschen Bank (Schriftart: Univers). Der Schriftzug ist zeitlos und auch auf der Entfernung noch gut lesbar. Mehr über das Logo und seine Geschichte kannst du übrigens auf der Internetseite der deutschen Bank nachlesen.

Geometrische Formen symbolisieren Ordnung, Struktur und Zuverlässigkeit. Sie sind daher ebenfalls beliebte Logo-Symbole.

3.1. Geometrische Formen, Quadrate und Rechtecke

3.2. Kreative, geometrische Logos

4. WWF – Treue und Hilfsbedürftigkeit

(Fotokredit: Stéfan)

Das berühmte Logo der Tierschutzorganisation WWF zeigt das Symbol eines Pandabärs und wurde inspiriert vom Pandabär Chi Chi, der zur Zeit der Logo-Entwicklung im Londoner Zoo lebte. Das Logo besteht fast unverändert seit 1961.

Ein Tier als Logo-Symbol ist sehr beliebt und wird nicht nur bei Organisationen und Firmen, die direkt etwas mit Tieren zu tun haben gerne verwendet. Tiere sind Sympathieträger und strahlen Unschuld, Treue, Hilfsbedürftigkeit, manchmal auch Humor aus.

4.1. Tierformen und Silhouetten

4.2. Jede Menge Logos mit Tieren

5. Apple – Natur versus Technik

(Fotokredit: ping ping)

Das berühmte und von vielen heiß geliebte Apple-Logo symbolisiert den Gegensatz von Technik und Natur. Die erste Version des Apple-Logos war ein Kupferstich-ähnliches, nostalgisches Bild, das Issac Newton unter einem Apfelbaum sitzend zeigt. Die nächste, modernere Logo-Variante war der bunt gestreifte, angebissene Apfel. Das der Apfel angebissen ist, wird als eine Anspielung auf das englische Wort bite (Biss) und die Ähnlichkeit zu Byte interpretiert. Das Apfel-Symbol hat sich seit dieser Zeit kaum noch verändert, seit 1998/99 ist der Apfel aber nur noch einfarbig dargestellt.

Auf Wikipedia kannst du dir die verschiedenen Apple Logo-Varianten anschauen.

Früchte und Pflanzen sind ähnlich wie Tiere ein sehr beliebtes Logo-Symbol. Sie symbolisieren Wachstum, Ausgeglichenheit, Fortschritt und Einklang mit der Natur. Wie beim Apple-Logo werden Natur-Symbole gerne auch im Kontrast zu technischen Themen eingesetzt, wobei der Gegensatz beider Symbole die Wirkung verstärkt.

5.1. Früchte und ihre Formen

5.2. Kreative Logos mit Früchten

6. Nike – Schwung, Geschwindigkeit und Dynamik

(Fotokredit: Daniel Y. Go)

Das Nike-Logo hat ebenfalls eine sehr spannende Geschichte. Es wurde 1971 für gerade mal 35 Dollar von einer Studentin entworfen (die allerdings später von Nike noch etwas besser für ihre Arbeit entlohnt wurde). Heute ist der simple Nike-Haken, auch »Swoosh« genannt sicher eines der berühmtesten Logos der Welt. Die geschwungene, dynamische Form symbolisiert den Flügel der griechischen Siegesgöttin Nike.

Anfangs wurde das seither kaum veränderte dynamische Symbol zusammen mit dem Nike-Schriftzug dargestellt, inzwischen wird der Swoosh alleine dargestellt.

6.1. Formen mit Schwung

Geschwungene Formen werden nicht nur für Logos im Sportbereich sehr gerne verwendet. Geschwungene, einfache Formen symbolisieren Geschwindigkeit, Modernität, Dynamik, Kraft, Sieg und Zukunft.

6.2. Weitere kraftvolle, dynamische Logo-Symbole

Welche Formen und Symbole gefallen dir am besten in Logos? Hast du ein ganz spezielles Lieblings-Logo oder kennst du weitere, kreative Logos, die zu den besprochenen Symbolen passen? Über deine Tipps und dein Feedback freue ich mich sehr!

Ähnliche Artikel zu diesem Thema

1. So findest du die passende Schrift für dein Logo
2. Webdesign Inspiration: 30 deutschsprachige WordPress-Webseiten und -Blogs
3. 25 köstliche Logo Inspirationen zum Thema Essen
4. 20 grandiose Webseiten-Header, die deine Kreativität beflügeln
5. Typo-Tipps für Webdesigner (Teil 1): Styling der Überschriften

Grafikprogramme zum Herunterladen

1. Inkscape

Inskape ist wohl das Beliebteste, unter den kostenlosen Vektor-Grafikprogrammen. Du kannst das Programm für Windows, Mac und Linux herunterladen. Speichern kannst du deine Grafiken dann u.a. in den Dateiformaten EPS, SVG und SVGZ und AI.

Eine ausführliche Beschreibung des Programms und aller Features kannst du auf der Inkscape-Webseite durchlesen (auf Deutsch). Auf dem Blog für Inkskape-Tutorials findest du außerdem jede Menge Anleitungen zur Verwendung.

2. Karbon

Karbon ist das Grafikprogramm des Koffice-Pakets http://www.koffice.org/, einem kostenlosen Software-Paket ähnlich wie dem OpenOffice-Paket. Hier findest du weiter Infos über Koffice.

Mit Karbon hast du die Möglichkeit auf mehreren Ebenen zu arbeiten, deine Dateien kannst du in den Dateitypen ODG, SVG, PNG, PDF, WMF abspeichern. Alle Programm-Features findest du auf dieser Karbon-Webseite.

Online-Grafikprogramm

3. Aviary Vector Editor Raven

Aviary bietet ein ganzes Paket von Online-Tools, mit den du Bilder, Grafiken und Audio-Dateien online bearbeiten uns abspeichern kannst. Das hat den Vorteil, dass du auch von unterwegs auf deine Arbeiten zugreifen kannst. Allerdings kannst du die Dateien derzeit und in vereinfachter Version (also als JPG oder PNG) auf deinen eigenen Computer herunterladen.

Raven ist das Grafikprogramm von Aviary und vorausgesetzt du hast eine schnelle Internetverbindung, kannst du auch sehr schöne Ergebnisse mit dem Programm erstellen. Auf dem Aviary-Server kannst du deine Grafiken als PDF, SVG, EPS oder Bitmap abspeichern (dafür musst du dich vorher bei Aviary kostenlos anmelden). Hier findest du auch jede Menge hilfreiche Tutorials für die Aviary-Tools.

Bildbearbeitungs-Programme zum Download

4. GIMP

GIMP ist eines der umfangreichsten Freeware-Programme für die Bildbearbeitung und kann gut mit den teuren Profi-Programmen Schritt halten. Es gibt das Programm für Windows, Mac und Linux zum downloaden. Jede Menge Tutorials zum Programm findest du auf der GIMP-Webseite und auf der Webseite GIMP-Tutorials.net.

5. Paint.NET

Paint.NET ist ebenfalls ein umfangreiches Bildbearbeitung-Programm für deinen Computer. Es wird unterstützt von Windows (ab XP). Deine Bilder kannst du nach der Bearbeitung in den Dateiformaten JPG, PNG, TIFF, BMP und GIF speichern.

Zu den Grundfunktionen kannst du dir praktische Plugins installieren. Mit dem PSD-Plugin kannst du dann z.B. auch die Ebenen von PSD-Photoshopdateien öffnen und bearbeiten (allerdings ohne Ebeneneffekte). Hier findest du weitere Infos zu den Paint-Plugins.

Weitere Infos und Hilfe zum Programm kannst du im Paint-Forum bekommen. Außerdem gibt es eine ausführliche Dokumentation aller Programm-Funktionen (nur auf Englisch), anschaulich mit jeder Menge Screenshots dargestellt.

6. Krita

Krita ist das Bildbearbeitung-Programm des Koffice-Pakets.

Du kannst das Krita für Linux, Mac und Windows herunterladen. Du kannst mit praktischen Bearbeitungs-Ebenen arbeiten, und das Programm Programm unterstützt das Importieren von RAW und PDF-Formaten, sowie das Speichern in JPG, PNG und TIFF.
Alle Features von Krita, wie Werkzeuge, Farbwertunterstützung und Filter kannst du dir auf der Krita-Webseite genau anschauen.

7. Picasa

Mit dem Bildverwaltungs- und Sharing-Programm Picasa von Google kannst du deine Fotos auch bearbeiten. Du hast die Möglichkeit grundlegende Funktionen wie Farben, Sättigung, Hell/Dunkel-Kontraste, Zuschneiden etc. einzustellen. Außerdem gibt es mehrere Effekte mit denen du deine Fotos optimieren kannst. Für die schnelle und einfach Bearbeitung direkt beim Sortieren deiner Bilder auf dem Computer ist Picasa also durchaus sehr hilfreich.

Online-Tools zur Bildbearbeitung

8. Pixlr

Pixlr ist eines meiner Lieblingsprogramme für schnelle Bildbearbeitung online. Es ist schnell und hat eine angenehme, aufgeräumte Benutzeroberfläche. Zum schnellen Zuschneiden und Bearbeiten von Fotos also genau das Richtige. Pixlr kann natürlich noch jede Menge mehr. Du hast sogar die Möglichkeit verschiedene Bearbeitungsebenen anzulegen. Speichern kannst du deine Bilder auf deinem Computer als JPG, PNG oder BMP.

9. Picnik

Picnik ist ein bisschen mehr ein Spaß-Tool. Du kannst deine Fotos z.B. mit lustigen Icons verzieren. Es bietet aber auch die grundlegenden Möglichkeiten der Bearbeitung wie Zuschneiden, Farbeinstellung, Hell/Dunkel-Kontraste, Drehen etc. Außerdem hat das Tool eine sehr schöne Effekte-Palette, die ich z.B. sehr für die Bearbeitung von Flickr-Fotos nutze. Picnik lässt sich übrigens auch direkt mit Flickr verknüpfen.

10. Aviary Image Editor Phoenix

Phoenix ist das Bildbearbeitung-Tool von Aviary. Du kannst deine Bilder online bearbeiten und das Tool testen, um deine Bilder online bei Aviary zu speichern, musst du dich allerdings erst anmelden. Bist du als User registriert, kannst du deine Bilder auch als JPG und PNG auf deinen Computer herunterladen.

3D Modeling und Animation

11. Blender

Ein spannendes Programm für alle, die sich auch für 3D Modeling und Animation interessieren, ist das umfangreiche, kostenlose Programm Blender. Mit Blender kann man aufwendige 3D-Modelinerungen bauen, rendern und animieren. In der Gallery kannst du dir beeindruckende Artworks anschauen, die mit dem Programm erstellt wurden. Jede Menge Tipps und Tutorials für den Einstieg ins Programm findest du im Tutorial-Bereich der Webseite.

Hast du diese Freeware-Programme bereits getestet? Können die Programme deiner Meinung eine echte Alternative zu den teuren Profi-Programmen sein? Und kennst du weitere kostenlose Programme für Webdesigner und Foto-Fans? Ich freue mich über dein Feedback und deine Tipps!

Ähnliche Artikel zu diesem Thema

1. Typo-Tipps für Webdesigner (Teil 3): Texte spannender gestalten
2. 16 praktische Cheat Sheets für Webdesigner
3. Kostenlose Icons, Fonts & Texturen – die 20 besten Ressourcen für Webdesigner
4. 15 praktische Typografie- und Font-Tools für Webdesigner
5. 20 Google Chrome Extensions für Webdesigner und Programmierer

1. Miley Cyrus

2. Diddy Blog

3. Kylie Minogue

4. Beastie Boys

5. Bush

6. Katy Perry

7. Ellie Goulding

8. Jay-Z

9. Fettes Brot

10. Morcheeba

11. The Roots

12. Phoenix

13. Pete Yorn & Scarlett Johansson

14. Alejandro Escovedo

15. Jane Monheit

16. Dark Child

17. Kimberly Caldwell

18. Seal

19. stanfour

20. David Garrett

Wie gefallen dir die WordPress-Seiten der Stars? Kennst du weitere Webseiten von Musikern? Über deine Meinung und deine Tipps freue ich mich sehr!

Ähnliche Artikel zu diesem Thema

1. Webdesign Inspiration: 20 mobile Webseiten für iPhone, Android & Co
2. Webdesign Inspiration: 30 deutschsprachige WordPress-Webseiten und -Blogs
3. Webdesign Inspiration: 30 minimalistische WordPress-Blogs
4. Webdesign Inspiration: 40 kreative Kontaktformulare
5. Webdesign meets Soccer: 15 Webseiten zum Thema Fußball

Fluid Webdesigns

Die innovativsten Beispiele mobiler Webseiten sind die neuen Webdesigns von Hicksdesigns oder SimpleBits. Die Layouts sind so flexibel konzipiert, dass sie sich dem jeweiligen Gerät (Smartphone, iPad, Laptop oder großer Desktop-Monitor) anpassen. Ein spannender Artikel zum Thema flexibles Webdesign ist »Responsive Web Design« bei A List Apart.

1. Hicksdesign

Webseite: hicksdesign.co.uk

Das neue Blogdesign von Hicksdesign verändert sich je nach Gerät in ein ein-bis vier-spaltiges Layout. Die einspaltige Version ist dabei für das 320 Pixel breite iPhone-Display optimiert. Jon Hicks beschreibt in seinem Blogartikel »Finally a fluid Hicksdesign« sehr schön das Konzept seiner neuen Seite.

2. Simple Bits

Webseite: stream.simplebits.com

Den gleichen Designansatz wie Jon Hicks hat auch Dan Cederholm von SimpleBits. Das Ergebnis seines neuen Bitstream-Designblogs ist wirklich sehr gelungen und inspirierend.

Mobile Webseiten-Versionen mit flexibler Breite

Natürlich muss man nicht gleich ein ganz neues Design für seine Webseite erstellen. Es gibt auch die Möglichkeit, eine extra Version eines Webdesigns für die unterschiedlichen Smartphone-Formate z.B. auf einer Subdomain (m.meinedomain.de) einzurichten. Dazu kann man sich entweder ein Account bei einen Online-Anbieter (z.B. Mobify) einrichten, oder falls man eine WordPress-Seite hat, auch ein WordPress-Plugin verwenden. Hier findest du jede Menge Infos zu Tools und Plugins für mobile Webseiten.

3. Tanya Ryno

Webseite: m.tanyaryno.com

Ein schönes Beispiel für eine mobile Webseiten-Version von Mobify ist die Webseite der Produzentin Tanya Ryno.

4. thirdoor

Webseite: thirdoor.com/m

Die mobile Seite von thirdoor ist sehr sehr benutzerfreundlich gestaltet. Über den Home-Button kannst du dich geschickt durch die gesamte Seite navigieren.

5. mediaburst

Webseite: mediaburst.co.uk/m

Eine sehr schöne mobile Seite gibt’s von mediaburst.

6. WolframAlpha

Webseite: m.wolframalpha.com

Die clevere Wissensmaschine Wolfram Alpha sieht auch in der mobilen Version sehr übersichtlich aus.

7. I Love Typography

Webseite: m.ilovetypography.com

Sehr schön sieht auch das minimalistische Webdesign von I Love Typography in der Mini-Version made by Mobify aus.

8. SNOOK.CA

Webseite: m.snook.ca

Das schlichte Webdesign von Jonathan Snook sieht auch in der mobified Version seiner Webseite klasse aus.

9. Erskine Design

Webseite: m.erskinedesign.com

Auch die Designagentur Eskine Design hat eine iPhone-Version ihrer Webseite.

10. upstract

Webseite: upstruct.com/m

Auch das Design Studio upstruct berlin oslo hat eine schöne mobile Webseiten-Version.

11. Crush & Lovely

Webseite: m.crushlovely.com

Die inspirierende Webseite von Crush & Lovely hat jetzt auch eine tolle mobile Version von Mobify bekommen.

12. Diesel

Webseite: m.diesel.com

Eine sehr schöne mobile Version gibt’s auch von Diesel.

13. Webdesigner Depot

Webseite: m.webdesignerdepot.com

Auch den sehr beliebten Webdesign-Blog Webdesigner Depot gibt’s jetzt Dank Mobify in Mini-Version.

14. David Praznik

Webseite: davidpraznik.com/m

David Praznik hat eine schöne mobile Version seiner Portfolios, inklusive About-Seite und Kontaktformular gebaut.

15. Coldwater Creek

Webseite: coldwatercreek.com/mobile

Die mobile Version von Coldwater Creek ist ein spannendes Beispiel für ein mobiles Shop-Design.

Mobile Webdesigns mit fixer Breite

Eine weitere Variante mobiler Webdesigns sind extra für die Smartphone-Displays gestaltete Webseiten mit einer festgelegten Breite (meist 320 Pixel wie beim iPhone).

16. coosh

Webseite: coosh.com/iphone

Die mobile Webseiten-Version des Headset-Herstellers Coosh.

17. Christopher Meeks

Webseite: christophermeeks.com

Die sehr schön gestaltete, minimalistische Seite von Christopher Meeks hat zwar kein fluid Layout, ist aber auch auf einem größeren Bildschirm schön anzusehen, ohne das sich das Design verändert.

18. Pixelumbrellla

Webseite: pixelumbrella.com/iphone

Auf der mobilen Version von Pixelumbrella gibt es sogar einen Mini-Slider zu bewundern.

19. Procab Studio

Webseite: procab.ch/iphone

Eine sauber durchgestylte iPhone-Seite der schweizer Design-Agentur Procab Studio.

20. Alex Buga

Webseite: alexbuga.com/v9/iphone

Alex Bugas Seite ist ein schönes Beispiel für ein privates Blog-Design und zeigt, dass auch der self-made Notizenbuch-Stil klasse in der Mini-Version funktioniert.

Wie gefallen dir die mobilen Webdesigns? Hast du selbst schon darüber nachgedacht, für deine Webseite oder deinen Blog eine mobile Version zu gestalten? Und kennst du noch weitere schöne Bespiele für mobiles Webdesign? Über dein Feedback und deine Tipps freue ich mich sehr :-)

Hast du selbst kein eigenes iPhone und gerade auch keines von einem Bekannten zur Verfügung, kannst du dir die mobilen Webdesigns übrigens auch prima mit dem Online-Tool TestiPhone anschauen. Und für Google Chrome gibt es die praktische Erweiterung Window Resizer, mit der du dein Browser-Fenster schnell in die verschiedensten Größen wechseln kannst.

Ähnliche Artikel zu diesem Thema

1. Webdesign Inspiration: 30 deutschsprachige WordPress-Webseiten und -Blogs
2. 20 grandiose Webseiten-Header, die deine Kreativität beflügeln
3. Webdesign Inspiration: 40 kreative Kontaktformulare
4. Webdesign meets Soccer: 15 Webseiten zum Thema Fußball
5. Webdesign Inspiration: 16 Webseiten zum Thema Kaffee

1. Ice-Horse.de

Ice-Horse.de ist kreative Plattform und Portfolio von Webdesignerin, Grafikerin, Fotografin und Pferdeliebhaberin Birgit Zimmermann.

2. Chris Magiera

Moargh ist die wunderschön poetische Webseite und Fotografie-Portfolio von Chris Magiera.

3. surfgarden

Surfgarden ist kreativer Spielplatz der Berliner Webdesignerin und Grafikerin Manuela Hoffmann.

4. Blog.Tocki

Auf dem kreativen Blog des Stuttgarter Webdesigners und Grafikers Tocki alias Tilman Ockert findest du jede Menge interessanten Lesestoff zum Thema Mediengestaltung.

5. David Hellmann

Der Grafiker, Webdesigner und Webentwickler David Hellmann schreibt auf seinem Blog u.a. über Webdesign, Apple, und seinen Webworker-Alltag und in Davids Portfolio findest du jede Menge kreative Arbeiten.

6. Style Spion

Kai Müller schreibt auf seinem Blog StyleSpion über Design, Fotografie, Musik, Inneneinrichtung und viele andere schöne Dinge des Lebens.

7. Andreas Hommel

Die Webseite von Andreas Hommel ist Portfolio und kreatives Journal des Webdesigners und Webentwicklers mit interessanten, buntgemischten Themen.

8. faebric

faebric ist ein Online-Magazin für alle Modestudenten und jungen Leute, die sich für Mode interessieren. Das Magazin bietet u.a. jede Menge Tipps und Infos über neue Projekte und Events, Studiengänge und kreative, junge Mode-Labels.

9. Kulturbanause

Kulturbanause ist Blog und Portfolio des Düsseldorfer Mediengestalters Jonas Hellwig. Auf seiner Seite findest du jeder Menge Infos zu den Themen Webdesign, Programmierung, Werbung, Internet, Reisen und Alltägliches.

10. Jazz Drummer World

Jazz Drummer World ist Online-Magazin und Blog für alle Schlagzeuger und Percussionisten und Jazz-Liebhaber gegründet von David Kobrehel.

11. webdemar

Webdemar ist der Webdesign- und WordPress-Blog von Simon Rimkus, dessen WordPress-Themes du auch bei Themeshift ersteigern kannst.

12. WordWeb

WordWeb ist die Webseite der schweizer Texterin Barbara Frolik. Auf ihrem Blog findest du jede Menge hilfreiche Tipps zu den Themen Texten im Internet, Freelancing und Webdesign Inspiration.

13. shortees skizzenblog

Auf Shortees Skizzenblog gibt es jede Menge Skizzen, Illustrationen, Wallpapers und kreativen Input vom Leipziger Designer und Illustrator Shortee.

14. Orangetopic

Bei Orangetopic, dem Blog von Svenja Paulsen und Janet Freysoldt geht’s um Vielseitiges aus den Bereichen Netzkultur, Lifestyle, Musik und Design.

15. Playground

Playground ist Blog und kreativer Spielplatz des Webentwicklers und WordPress-Plugin Programmierers Sergej Müller.

16. bueltge.de

Frank Bültge hat auf seinem Blog bueltge.de jede Menge hilfreiche Tipps und Infos über WordPress, Themes, Plugins und WordPress-Programmierung für dich parat.

17. UARRR.org

UARRR.org ist Blog und experimentelle Plattform von Marcel Wichmann. Marcel schreibt über Musik, Zeichnen und Illustration, über Bücher und Themen aus dem Internet.

18. ZWEIVIEREINS

ZWEIVIEREINS ist Webseite und Blog des BMX- und Skateboarding Vereins 2plus4macht1 e.V. in Plauen.

19. aHeadwork

aHeadwork ist der Blog von Hannah, mit jeder Menge kreativen Texten, Koch-Rezepten und Alltagsgeschichten.

20. Hadouken

Hadouken ist der private Blog von Jeremy Lonien. Jeremy schreibt über alles was ihn im Internet gerade so begegnet und bewegt.

21. Kubis Welt

Kubis Welt ist Blog und T-Shirt Shop vom kleinen, neuseeländischen Spatz Kubi.

22. Franzbully

Auf der Webseite Frankbully.de dreht sich alles um niedliche, kleine Hundewelpen.

23. Artcore Skizzenblog

Der Artcore-Blog ist der Blog der Grafikerin und Illustratorin Nadja Hallfahrt. Hier gibt’s tolle Illustrationen, Icons und Wallpapers zu bewundern.

24. Showscreens

Auf Showscreens kannst du Inspirationen für neue iPhone-Apps bekommen, indem du nachliest welche Apps bei Bloggern, Designern und Entwicklern gerade besonders beliebt sind.

25. Admartinator.de

Admartinator.de ist der Blog des Apple- und Social Media Fans Martin Sauer. Martin schreibt über alles rund um Apple, gibt Blog- und WordPress Tipps und berichtet über ganz unterschiedliche Internet-Themen.

26. Codecandies

Codecandies ist der private Blog des Webdevelopers und Frontend-Entwicklers Nico Brünjes.

27. Make Better Apps

Bei Make Better Apps, dem neusten Projekt von David Hellmann findest du Beurteilungen und genaue Infos für verschiedenste iPhone, iPad, und Mac Apps.

28. Cute monstR Blog

Der cute monstR-Blog ist der Blog mit News zu neuen Designs und Events des Online-T-Shirt-Shops cute monstR.

29. Markus Freise

Markus-Freise.de ist der private Blog des begeisterten Poetry-Slammers und Comic-Zeichners Markus Freise.

30. Martin Neuhof

Martin-Neuhof.com ist Portfolio und Blog des Webdesigners, Mediengestalters, Fotografen und Bloggers Martin Neuhof von Farbwolke.de.

Im wilden Web-Dschungel ist uns bestimmt der ein oder andere Leckerbissen entwischt. Daher würden wir uns sehr über deine Mithilfe freuen!

Kennst du weitere kreative, deutschsprachige WordPress-Seiten, die hier auf keinen Fall fehlen dürfen? Über deine Empfehlungen und dein Feedback freuen wir uns schon sehr!

Ähnliche Artikel zu diesem Thema

1. Webdesign Inspiration: 20 mobile Webseiten für iPhone, Android & Co
2. Webdesign Inspiration: 30 minimalistische WordPress-Blogs
3. 20 grandiose Webseiten-Header, die deine Kreativität beflügeln
4. Webdesign Inspiration: 40 kreative Kontaktformulare
5. Webdesign meets Soccer: 15 Webseiten zum Thema Fußball

1. Text und Bilder

Bilder sind eines der wichtigsten Elemente, um einen längeren Text oder Artikel aufzulockern. Dabei solltest du darauf achten, dass der Abstand zwischen Bild und Text immer gleichmäßig und in einem angenehmen Abstand gesetzt ist (CSS margin).

Außerdem kannst du Bilder rechts oder linksbündig setzen und den Text (mit floating) darum fliessen lassen.

Dabei ist es aber sehr wichtig, dass die Textbreite nicht zu schmal wird.

1.1. Vorschaubilder (thumbnails)

Eine tolle Option (die du z.B. bei WordPress-Blogs ganz einfach einfügen kannst, hier eine kleine Anleitung) sind Vorschaubilder (thumbnails) für deine Artikel. Ein Vorschaubild macht es dem Leser leichter, einen Einstieg in den Artikel zu finden.

1.2. Bilder mit oder ohne Rahmen

Bilder kannst du mit oder ohne Rahmen einfügen. Die Entscheidung, ob du einen Rahmen verwenden möchtest, hängt stark vom Hintergrund der Seite ab. Wichtig ist, dass sich die Bilder genug vom Hintergrund abheben. Bei dunklen Bildern auf dunklem Hintergrund (oder hellen Bildern auf hellem Hintergrund) ist die Kante des Bildes nicht mehr deutlich zu erkennen. Wenn du möchtest, kannst du aber auch gerade diesen Effekt als Stilmittel einsetzen.

Ein Beispiel für Bilder auf dunklem Hintergrund. Hier wäre ein Rahmen überflüssig.

Ein Bild auf hellem Hintergrund, dass ebenfalls ohne Rahmen auskommt.

1.3. Bildunterschriften (Captions)

Ein weiteres, hilfreiches Stilmittel beim Arbeiten mit Text und Bild sind die Bildunterschriften (Captions). Diese sind oft kleiner als die eigentliche Textgröße und eventuell in einer leicht helleren Farbe gesetzt. Du kannst auch kursiven Text für deine Captions verwenden.

Beispiel einer Bildunterschrift innerhalb des Rahmens.

Hier kommt eine kursive Schrift zum Einsatz.

2. Listen

Inhalte in Listen zu unterteilen ist ebenfalls sehr hilfreich, um Texte zu ordnen. Listen verdeutlichen die Struktur eines Textes. Der Leser kann leichter überschauen, was ihn im Text erwartet.

Du kannst deine Listenelemente entweder in einer »Unordered List« (HTML-tag ul) sortieren, oder in einer »Ordered List« (ol).

2.1. Unordered List

Eine »Unordered List« ist nicht nummeriert, sondern wird durch verschiedene Listenzeichen (Bullets) markiert. Es gibt unterschiedliche CSS-Elemente, die du den Listenelementen (HTML-tag li) deiner Unorderd List mit dem CSS-Style »list-type« zuweisen kannst.

Falls du deine eigenen Bullets gestalten möchtest, kannst du auch ein Image erstellen und es als Bullet einfügen.

Eine Liste mit kreativen Sternchen.

Hast du einen relativ breiten Text, kannst du das Listenelement auch noch ein wenig nach rechts einzurücken. So hebt sich die Liste deutlicher vom übrigen Text ab. Außerdem ist es sinnvoll zwischen Fließtext und Listenelement, sowie zwischen den einzelnen Elementen innerhalb der Liste, einen gwissen Abstand zu halten. So wirkt die Liste nicht gequetscht und die einzelen Listenelemente sind optisch angenehm voneinander getrennt.

2.2. Ordered List

Bei einer Ordered List kannst du deine Listenelemente z.B. mit Zahlen, Buchstaben oder römischen Zahlen nummerieren.

Hier findest du eine Zusammenstellung aller CSS-Styles für Listenelemente.

3. Initiale (große Anfangsbuchstaben) setzen

Den ersten Buchstaben deines Artikels kannst du als einleitendes Element in Großbuchstaben setzen. Entweder verwendest du dafür ein Image, oder du stylst den ersten Buchstaben im Text mit in einer größeren Schrift. Du solltest allerdings darauf achten, das der Abstand ziwschen Initiale und Fließtext angenehm gestaltet ist.

4. Zitate und Textpassagen hervorheben

Ein sehr schönes Stilmittel ist es auch, besondere Textpassagen (z.B. Zitate, die wichtigste Ausage eines Textes etc.) durch Schriftgröße, Hintergrund oder kursiven Text hervorzuheben.

4.1. Zitate

Zitate markierst du in deinem Code durch »blockquotes«. Um Zitate hervorzuheben, kannst du ihnen eine besondere Schrift- oder Hintergrundfarbe geben, sie in kursiv setzen und eine größere Schrift verwenden. Wenn du möchtest, kannst du auch eine andere Schriftart einsetzen (z.B. eine Serifenschrift).

Ein Trend im Webdesign ist es auch, Zitate mit einem Balken links vom Text zu markieren oder besonders große Anführungszeichen zu verwenden. Allgemein ist es sinnvoll Zitate ein wenig rechts und links einzurücken.

4.2. Mit Pullquotes Inhalte hervorheben

»Pullquotes« sind hervorgehobene Textpassagen oder Säzte, die du aus deinem Text herausziehst, um so die Aussage des gesamten Textes besonders zu unterstreichen. Der Unterschied zu »blockquotes« ist, dass der Text wiederholt wird (also im Fießtext noch einmal vorkommt).

Oft sind »pullquotes« rechts oder linksbündig vom Textblock platziert, und in einer größeren oft fetten Schrift gesetzt.

Du solltest Zitate und hervorgehobenen Text nur dezent einsetzen. Hast du zu viele Zitate in einem Text, geht der Effekt verloren und der Textfluß wird zu stark unterbrochen.

4. Code anzeigen

Hast du eine Webseite oder einen Blog auf dem du auch Code-Beispiele zeigen möchtest, solltest du diesen ebenfalls besonders gestalten.

Ein sehr schönes Beispiel für die Gestaltung von Code kannst du dir auf der Webseite Perishable Press anschauen.

Die HTML-tags um Code in Text zu kennzeichnen sind pre und code.

Da sich der Code vom übrigen Text abheben soll ist es hilfreich, wenn du einen Rahmen oder eine Hintergrundfarbe verwendest. Eine geläufige Methode ist auch, eine farbige Border an der linken Seite zu setzen. Für die Darstellung von Code solltest du eine eigene Schriftart verwenden. Meist werden für Code Monospaced Fonts (nichtproportionale Schriftart) verwendet.

Hast du eine WordPress-Webseite kannst du natürlich auch ein Plugin installieren, um Codeschnipsel auf deiner Seite anzuzeigen. Beim Plugin »Syntax Highlighter Evolved« hast du z.B. die Möglichkeit die Codezeilen zu nummerieren und den Code farblich zu unterscheiden. Außerdem können deine Leser den Code ausdrucken, kopieren oder sich in einem extra Fenster anzeigen lassen.

So sieht Code mit Hilfe des WordPress-Plugin aus.

Wie du siehst gibt es jede Menge Möglichkeiten deine Webtexte ansprechend und übersichlich zu gestalten. Kennst du weitere Techniken, um Texte attraktiv darzustellen? Über dein Feedback und deine Tipps freue ich mich sehr!

Ähnliche Artikel zu diesem Thema

1. Kostenlose Grafik- und Bildbearbeitungs-Programme für Webdesigner
2. Typo-Tipps für Webdesigner (Teil 2): Fließtexte gestalten
3. Typo-Tipps für Webdesigner (Teil 1): Styling der Überschriften
4. 10 WordPress-Plugins für Typografie-Liebhaber
5. 15 praktische Typografie- und Font-Tools für Webdesigner

1. Jad Limcaco

2. z8

3. EMQuinn

4. Triimpuls

5. Drexler

6. iA

7. Kyle Fiedler

8. On

9. The Living Principles

10. Human Recources

11. James Deer Design

12. David Airey

13. 204 Beech Avenue

14. Merkmal

15. Olliekav

16. Voce antica

17. Flixic

18. The Old Fashioned

19. Stefan Persson

20. 70folk

21. Spinz

22. NotJones

23. I Love Typography

24. One Twentysix

25. Shaken and Stirred

26. Tobias Ahlin

27. SimpleBits

28. Do it for the fame

29. Astheria

30. Fresh01

Wie gefallen dir die reduzierten Blog-Designs? Kennst du noch weitere minimalistisch gestaltete WordPress-Blogs, die in dieser Liste auf keinen Fall fehlen dürfen? Über dein Feedback und deine Tipps freue ich mich sehr!

Ähnliche Artikel zu diesem Thema

1. Webdesign meets Music: 20 WordPress-Seiten berühmter Musiker
2. Webdesign Inspiration: 20 mobile Webseiten für iPhone, Android & Co
3. Webdesign Inspiration: 30 deutschsprachige WordPress-Webseiten und -Blogs
4. Webdesign Inspiration: 40 kreative Kontaktformulare
5. Webdesign Inspiration: 16 Webseiten zum Thema Kaffee

1. Verschachtelte Kommentare aktivieren

Um eine spannende Diskussion mit Fragen, Meinungen und Antworten auf deinem Blog zu ermöglichen, kannst du die Blog-Kommentare ineinander verschachtelt anzeigen.

Der Kommentarbereich bei Nettuts.

Dazu musst du die Funktion im Adminbereich unter Einstellung / Diskussion freischalten (ab WordPress-Version 2.7). Du kannst bestimmen, wie weit die Kommentare ineinander verschachtelt werden können (also wie oft eine Person auf eine Kommentar-Antwort wiederum antworten kann).

Unter jedem Kommentar erscheint jetzt ein Antworten-Link.

Falls du ein älteres Theme nutzt oder dein eigenes Theme entwickeln möchtest, musst du dein Theme noch auf diese neue Funktion anpassen. Eine genaue Beschreibung für die Anpassung des Codes findest du auf WordPress.org.

2. Autorenkommentare hervorheben

Ein weiterer Effekt, der deinen Kommentarbereich noch übersichtlicher macht, ist es alle Kommentare des Artikel-Autors besonders zu stylen. Du kannst z.B. eine leicht dunklere Hintergrundfarbe wählen. Seit der WordPress-Version 2.7 geht das ganz einfach. Du musst lediglich die CSS-Styles li.bypostauthor in deine CSS-Datei einfügen und entsprechend stylen (z.B. mit background-color, border etc.).

3. Avatare anzeigen

Um die Kommentare deines Blogs persönlicher zu gestalten, hilft es Avatare neben den Kommentaren anzuzeigen. Die nötigen Einstellungen kannst du wieder im Adminbereich unter Einstellungen / Diskussion vornehmen. Du kannst zusätzlich bestimmen, welche Bewertungen du zulassen möchtest und was für ein Motiv angezeigt werden soll, falls jemand noch kein Avatar-Bild besitzt.

Damit dein Theme Avatare unterstützt, muss dieser Code in der functions.php Datei (wenn du bereits die Custom Callback-Funktion nutzt) oder in der comments.php Datei einfügt sein.

<?php echo get_avatar( $comment, 65 ); ?>

Im Codex bei WordPress.org findest du weitere Infos Funktion.

4. Ein eigenes Standard-Avatar hinzufügen

Mit einem kleinen Trick, den ich bei WPEngineer entdeckt habe kannst du dein eigenes Standard-Avatarbild für dein Theme hinzufügen. Dazu musst du nur einen Codeschnipsel in deine functions.php Datei einfügen, und anschließend dein neues Standard-Avatar in den Diskussionen-Einstellungen im Adminbereich auswählen.

Hol dir den Codeschnipsel für dieses Feature auf der WPEngineer-Webseite.

5. Verschachtelte Kommentare nummerieren

Nummerierte Kommentare bei Perishable Press.

Um deine Blog-Kommentare besser zu strukturieren (das ist vor allem bei verschachtelten Kommentaren sinnvoll), kannst du z.B. das WordPress-Plugin »Greg’s Threaded Comment Numbering« verwenden.

Mit Hilfe des Plugins kannst du verschachtelte Kommentare in bis zu 10 Ebenen nummerieren. Nachdem du das Plugin aktiviert hast, musst du noch folgenden Code in deine Callback-Funktion (in der functions.php) einfügen.

<div class="commentnumber"><?php gtcn_comment_numbering($comment->comment_ID, $args) ?></div>

Anschließend kannst du die Nummerierung mit der CSS-Class .commentnumber in deinem Style-Sheet stylen. In den Einstellungen des Plugins unter Configurations / Styling Comment Numbers solltest du dann noch angeben, dass du dein eigenes Styling verwendest.

6. Kommentare sortieren

Du kannst dir überlegen, ob du die neusten Blog-Kommentare ganz oben anzeigen möchtest, oder das älteste Kommentare an der ersten Stelle stehen soll. Die Einstellung dazu findest du wieder unter Einstellungen / Diskussion im Admin-Bereich.

Die üblichere Methode ist das älteste Kommentar zuerst anzuzeigen, vor allem wenn auf deinem Blog viele Fragen gestellt werden und zusätzlicher Support zu den Artikel-Themen geleistet wird.

Auf Blogs mit sehr vielen Kommentaren (über einen längeren Zeitraum) macht es aber eventuell Sinn, die neusten Kommentare nach vorne zu stellen. Bei WebdesignerWall kannst du dir diese Vorgehensweise sehr schön ansehen.

Der Kommentarbereich bei Webdesigner Wall.

7. Kommentare zitieren

Sehr schöne Zitate auf Veerles Blog.

Eine weitere schöne Funktion, um die Kommunikation untereinander zu verbessern, ist die Möglichkeit sich gegenseitig zitieren zu können. Für diese Option gibt es das praktische »Quote Comments Plugin«.

Es erstellt einen Quote-Button unter jedes Kommentar, der den Kommentar-Text bei Klick kopiert und in das neue Kommentar mit blockquote-tags einfügt.

Du kannst die Zitate und den Zitat-Button dann noch in deiner CSS-Datei stylen. Der Zitiere-Button hat die CSS-Class .comment_quote_link.

8. Benachrichtigung bei weiteren Kommentaren

Deine Leser kommentieren oftmals auf deinem Blog, um Fragen zu stellen oder interessieren sich allgemein für die Diskussion zu einem Artikel. Daher ist es sehr hilfreich, wenn du deinen Lesern die Möglichkeit gibst, über weitere Kommentare zu einem Artikel per Email informiert zu werden.

Hierfür gibt es wieder etliche Plugin-Optionen. In Deutschland ist es Pflicht das »Double-Opt-In Feature« in die Abo-Funktion einzubauen. Das bedeutet der Leser bekommt erst eine Mail, in der er das Abo bestätigen muss, bevor er die Benachrichtigungen über weitere Kommentare erhält.

Das WordPress-Plugin »Gurken Subscribe to Comments« erfüllt z.B. diese Funktion. In den Einstellungen des Plugins kannst du die Texte für die Email und den Text im Kommentar-Formular anpassen.

Ein sehr hilfreicher Trick, um die Option zum Kommentar-Abo oberhalb des Senden-Buttons zu positionieren, ist im Artikel »Mehr Usability in WordPress: Subscribe To Comments perfektionieren« von Sergej Müller beschrieben. So können die Kommentatoren die praktische Abo-Funktion nicht so leicht übersehen.

9. RSS-Feed für Kommentare eines Artikels

Eine weitere Option die Diskussion in den Kommentaren weiter mitzuverfolgen, ohne jedesmal wieder den Artikel besuchen zu müssen, ist den RSS-Feed für Kommentare eines Artikels zur Verfügung zu stellen. Dazu musst du einfach folgenden Codeschnipsel in deine comments.php Datei einfügen.

< ?php post_comments_feed_link( $link_text = 'link_text', $post_id = 'post_id', $feed = 'feed_type' ) ?>

Weitere Infos zu post_comments_feed_link findest du im WordPress-Codex.

10. erlaubte HTML-Tags anzeigen

Eine sehr schöne Lösung von Veerle, um die erlaubten HTML-Elemente zu zeigen.

Um in deinem Kommentar-Formular darauf hinzuweisen, welche HTML-Tags in den Kommentaren verwendet werden dürfen fügst du folgenden Code oberhalb des Kommentar-Formulars ein.

Folgende HTML-Elemente sind erlaubt: < ?php echo allowed_tags(); ?>

11. Kommentare in mehrere Seiten unterteilen

Hast du einen Blog mit sehr vielen Kommentaren kannst du die Kommentare in mehreren Unterseiten sortieren (seit WordPress-Version 2.7). Dazu musst du als erstes die Einstellung unter Einstellungen / Diskussion im Admin-Bereich aktivieren. Anschließend fügst du folgenden Code in deine comments.php Datei ein.

< ?php paginate_comments_links( array('prev_text' => '&laquo;', 'next_text' => '&raquo;') ) ?>

Weitere Infos zur Paginate WordPress-Funktion kannst du im WordPress-Codex nachlesen.

Wie gefallen dir diese Optionen, die Kommentare auf deinem Blog noch attraktiver zu gestalten? Kennst du weitere, praktische Möglichkeiten, um den WordPress Kommentarbereich zu pimpen? Über dein Feedback und deine Tipps freue ich mich sehr!

Ähnliche Artikel zu diesem Thema

1. Jede Menge Tipps und Plugins, um die Artikelseiten in WordPress zu optimieren
2. So optimierst du deinen WordPress RSS-Feed mit Feedburner
3. 12 WordPress-Plugins für den Kontaktbereich deines Blogs
4. WordPress Tipp: Die neusten Blog-Artikel mit Thumbnails anzeigen
5. Die beliebtesten Artikel im WordPress-Blog anzeigen – mit oder ohne Plugin

1. Carroket

2. Du Jardin

3. Jamie Oliver’s Food Revolution

4. BestFood

5. Golden Spoon

6. Fresh Fast Food

7. Joey’s Pizza

8. Mc Dougal’s

9. The Fat Bun Restaurant

10. Blink Chocolate

11. Umami Burger

12. Monty’s Crab Shack & Grill

13. Big Oak Catering

14. Lindy’s Corner Cafe

15. the dining room

16. cookietrail

17. MogiMirim

18. Osaka

19. Art Kitchen

20. Little Swift Olives

21. Devious Treats Patisserie

22. Tatanka’s

23. Smarter Foods

24. Ajisen Ramen

25. Sprouts

Wie gefallen dir die Logo Inspirationen? Kennst du weitere schöne Logos zum Thema Essen? Über dein Feedback freue ich mich sehr :-)

Ähnliche Artikel zu diesem Thema

1. Über die Kraft von Symbolen, und wie du das passende Symbol für dein Logo findest
2. So findest du die passende Schrift für dein Logo
3. Webdesign Inspiration: 30 deutschsprachige WordPress-Webseiten und -Blogs
4. 25 Logos inspired by Nature
5. Webdesign meets Soccer: 15 Webseiten zum Thema Fußball

1. Die Schriftart wählen

Auch beim Fließtext stellt sich dir wieder die gleiche Frage, wie schon bei der Schriftwahl der Überschriften: Verwendest du eine serifen- oder eine serifenlose Schrift?

Eine Serifenschrift hat den Vorteil, dass sie auch bei längeren Textabschnitten gut lesbar ist. Eine serifenlose Schrift ist dagegen zeitloser und passt eventuell besser zu deinem restlichen Webdesign. Ein Trick (den du besonders gut bei Texten fürs Web anwenden kannst) ist es großzügig Absätze einzubauen, um die Textpassagen so kürzer und überschaubarer zu gestalten.

Du solltest auch daran denken, dass Texte im Internet eher vom Leser abgescannt werden, als von Anfang bis Ende durchgelesen.

2. Die passende Schriftgröße

Nachdem du dich für eine Schriftart entschieden hast, musst du dich nun noch für eine passende Schriftgröße entscheiden. Über die passende Größe von Webtexten wird ganz gerne diskutiert. Meiner Meinung nach tendieren viele Webdesigner dazu, eine zu kleine Schriftgröße zu verwenden (weil sie finden das es schicker aussieht oder besser zum übrigen Design ihrer Seite passt).

Doch was bringt der beste Text, wenn er nicht angenehm zu lesen ist? Daher würde ich beim Fließtext eher zu einer größeren font-size raten. Kleiner als 12px-13px sollte der Fließtext also wirklich nicht sein, eher größer. Ich denke eine Standard-Schriftgröße zwischen 14-16 Pixeln ist (je nach Schriftart) ideal.

3. Der Zeilenabstand (line-height)

Nicht nur die Schriftgröße ist für die Lesbarkeit eines Textes wichtig, auch der Abstand zwischen den einzelnen Text-Zeilen. Du solltest darauf achten, das der Text einen angenehmen Fluss bildet, und du beim Lesen mit den Augen leicht von einer Zeile in die nächste springen kannst. Bei zu geringem Zeilenabstand wirkt der Text gequetscht und man verrutscht beim Lesen leicht in der Zeile.

4. Die Textbreite bestimmen

Ein weiterer, wichtiger Punkt ist die richtige Textbreite für deinen Fließtext zu bestimmen. Diese sollte nicht zu schmal, aber auch nicht zu breit sein.

Bei einer zu schmalen Textbreite kann kein Rhythmus beim Lesen entstehen, da der Leser ständig den Text unterbrechen muss, um in die nächste Zeile zu wechseln.

Bei einem zu breitem Text verrutscht der Leser leicht mit dem Auge (während er in die nächste Zeile springt) und weiss dann nicht mehr, in welcher Zeile er weiter lesen muss.

Ist die Textbreite dagegen richtig gewählt, kann der Leser dem Text entspannt folgen, ohne sich besonders anstrengen zu müssen.

5. Kontrast zwischen Schrift und Hintergrund schaffen

Um zu Vermeiden, dass die Augen beim Lesen unnötig angestrengt werden, ist es auch wichtig einen gewissen Kontrast zwischen Schriftfarbe und Hintergrund zu erzeugen. Bei ähnlichen Farben für Text und Hintergrund ist der Text sehr schwer zu lesen.

Grundsätzlich ist es für das Auge angenehmer, dunkle Schrift auf hellem Hintergrund zu lesen. Helle Schrift auf dunklem Hintergrund ist vor allem für kurze Textpassagen oder besonders hervorgehobenen Text geeignet.

6. Absätze für bessere Lesbarkeit

Gerade im Web ist es wichtig den Text aufzulockern, und genügend Weißraum zwischen den einzelnen Absätzen beizubehalten. So kann der Leser auch an einer beliebigen Stelle im Text einsteigen, und eventuell nur für ihn relevante Absätze des Artikels lesen.

7. Textelemente hervorheben

Um bestimmte Wörter oder Sätze zu betonen, verwendest du am besten kursiven oder fett gesetzten Text.

Willst du einen ganzen Satz betonen, kannst du diesen auch kursiv setzen und zusätzlich einrücken. So hebt sich die Textpassage noch mehr vom restlichen Text ab.

Du solltest Text (der kein Link) ist, allerdings nicht durch Unterstreichen betonen, da unterstrichene Elemente in Webtexten als Links gesehen werden.

8. Text-Links stylen

Wie gerade schon erwähnt gelten unterstrichene Wörter als Links. Zusätzlich kannst du einen Link noch durch eine spezielle Linkfarbe hervorheben. Diese kann entweder im Normal-Zustand heller sein als bei Hover, oder anders herum.

Eine sehr beliebte Alternative zur durchgezogenen Linie (text-decoration: underline) ist, den Link mit einer gepunkteten Border zu unterstreichen (text-decoration: none; border: dotted;).

Natürlich kannst du deine Links auch nur mit einer Signal-Farbe markieren, und dann bei Hover unterstreichen oder eine Hintergrundfarbe setzen.

9. Abstände zu Elementen (margin, padding)

Als letzten Punkt möchte ich noch kurz darauf hinweisen, wie wichtig der Abstand zwischen Text und anderen Elementen im Artikel (z.B. Bilder oder Überschriften) ist. Du solltest bei deinem CSS-Styling der margins und paddings darauf achten, dass immer ein gleichmäßiger Abstand zwischen den jeweiligen Elementen eingehalten wird.

Haben dir diese Typo-Tipps weiter geholfen? Kennst du noch weitere wichtige Punkte, die bei der Gestaltung von Texten im Web unbedingt zu beachten sind? Über dein Feedback und deine Tipps freue ich mich sehr!

Ähnliche Artikel zu diesem Thema

1. Typo-Tipps für Webdesigner (Teil 3): Texte spannender gestalten
2. Typo-Tipps für Webdesigner (Teil 1): Styling der Überschriften
3. 15 praktische Typografie- und Font-Tools für Webdesigner
4. 20 Google Chrome Extensions für Webdesigner und Programmierer
5. 10 praktische Online-Tools für Webdesigner

1. Marie Catribs

2. Robbin Waldemar

3. Ma.tt

4. REKKIABILLY

5. Andy Ward

6. The Many Faces Of…John Cusack

7. Forrst

8. Cutler

9. New to York

10. N.Design Studio

11. Matt Salik

12. {ths}

13. The Pixel Blog

14. Mochi Media

15. Dreamer Lines

16. Living Design

17. Creative Switch

18. Kardo Ayoub

19. Hugs for Monsters

20. Colouring Code

Wie gefallen dir die Header-Designs? Kennst du weitere Webseiten, deren Header umwerfend schön oder beeindruckend kreativ sind? Über deine Tipps und dein Feedback freue ich mich sehr!

Ähnliche Artikel zu diesem Thema

1. Webdesign Inspiration: 20 mobile Webseiten für iPhone, Android & Co
2. Webdesign Inspiration: 30 deutschsprachige WordPress-Webseiten und -Blogs
3. Webdesign Inspiration: 30 minimalistische WordPress-Blogs
4. Webdesign Inspiration: 40 kreative Kontaktformulare
5. Webdesign meets Soccer: 15 Webseiten zum Thema Fußball

1. Die Überschriften-Hierarchie

Genau wie in Zeitschriften-Layouts gibt es auch auf Blogs eine Hierarchie für die Überschriften. Die erste Überschrift (mit dem HTML-Tag h1) wird dabei für die Blog-Überschrift (bzw. für dein Logo) verwendet. Sie sollte also auf jeder Seite nur einmal vorkommen. Die zweite Überschrift in der Hierarchie (mit dem HTML-Tag h2) kannst du dann für deine Artikel-Überschriften einsetzen.

Für die bessere Strukturierung deines Artikels kann es (vor allem bei längeren Artikeln) hilfreich sein, weitere Unterüberschriften einzusetzen. Diese sind in der Schriftgröße kleiner als die Artikel-Überschrift. Die Schriftart solltest du aber für alle Überschriften beibehalten.

2. Weißräume bewusst einsetzen

Um die Überschriften deines Artikels hervorzuheben ist nicht nur die Schriftgröße von Bedeutung, sondern auch der Abstand zwischen Überschrift und dem Artikel-Text (margin und padding).
Diesen Abstand solltest du so wählen, dass zwar deutlich wird zu welchem Text die Überschrift gehört, aber gleichzeitig die Überschrift nicht »eingequetscht« wirkt.

Vor allem bei Web-Texten musst du beachten, dass der Leser deinen Text erst mit dem Auge abscannt, bevor er an einer Textstelle intensiver zu lesen beginnt. Daher ist es wichtig, dass die Überschriften lesbar, und deutlich als solche zu erkennen sind.

Und nicht nur die Abstände zwischen der Überschrift und dem übrigen Artikel-Text sind wichtig, sondern auch der Abstand der einzelnen Überschrift-Zeilen (line-height). Beim Testen des richtigen Abstandes verwende ich immer eine Überschrift die ein g, und ein Ü enthält. So kann ich sicher sein, dass der Abstand auch bei besonders überlappenden Buchstaben noch ausreichend ist.

3. Serifen oder Serifenlos

Als nächstes solltest du entscheiden, ob du eine Schrift mit Serifen (z.B. Georgia oder Times New Roman) oder eine serifenlose Schriftart (z.B. Arial oder Verdana) für deine Überschriften verwenden möchtest. Um einen Kontrast zwischen Überschrift und Fließtext zu erzeugen, kannst du für deine Überschriften eine Serifenschrift wählen, und für den Fließtext eine serifenlose Schrift (oder umgekehrt).

Eine Serifen-Schrift bringt meist mehr Charakter mit sich.

Eine serifenlose Schrift wirkt dagegen moderner und ist vielseitiger einzusetzen.

Du kannst dich natürlich auch nur für einen Schrifttyp im gesamten Layout entscheiden. Deine Überschriften könntest du dann auch durch fette Schrift (font-weight: bold oder 700) speziell hervorheben.

Eine weitere Alternative wäre den Überschriften den CSS-Wert text-transform:uppercase; zu geben, und so alle Überschriften in Großbuchstaben zu setzen. Wenn du oft lange Überschriften für deine Artikel verwendest, ist ein Text in Großbuchstaben allerdings nicht unbedingt zu empfehlen, da dieser schwerer lesbar ist.

4. Verwendung von Farbe

Ein weiteres Element mit dem du deine Überschriften hervorheben kannst, ist der Einsatz von Farbe. Hierbei solltest du allerdings beachten, dass du Farbe auch sehr gut als Link-Style verwenden kannst. Daher solltest du mit Farbe dezent umgehen.

Du könntest beispielsweise einen dezenteren Ton deiner Link-Farbe als Farbe der Überschriften verwenden.

Oder du verzichtest im normalen Zustand deiner Überschriften auf Farbe und bringst diese erst beim Hover-Zustand zum Einsatz.

5. Überschriften als Links

Wie gerade schon erwähnt eignet sich eine Farbe besonders gut für die Markierung von Links. Auf der Startseite deines Blogs sind alle Überschriften Links zum jeweiligen Artikel. Diese Überschriften-Links kannst du bei Hover entweder mit einer Farbe, unterstrichen oder mit einer Hintergrundfarbe besonders hervorheben.

Hast du dich für eine Link-Farbe entschieden, ist es sinnvoll diese Farbe auch bei deinen weiteren Links wieder zu verwenden.

6. Datum, Kategorie, Schlagwörter und Autor des Artikels

Soweit es für deinen Blog sinnvoll ist, kannst du all diese Zusatz-Elemente oberhalb oder unterhalb deiner Artikel-Überschrift einfügen. Du solltest darauf achten das die Infos übersichtlich angeordnet sind, und den Fokus nicht von der Überschrift nehmen.
Viele Webdesigner nutzen diese Meta-Daten auch, um den Artikeln eine individuelle Note zu verleihen. Besonders bei der Darstellung des Datums gibt es viele kreative Lösungen.

Um nicht zu sehr von den Überschriften abzulenken, kannst du die Meta-Daten (die keine Links sind) auch in einem leichterem Farb-Ton darstellen, z.B. einem hellen Grau.

Findest du diese Tipps hilfreich oder kennst du weitere Tricks, um Blog-Überschriften besonders zu gut zu stylen? Über dein Feedback freue ich mich sehr!

Ähnliche Artikel zu diesem Thema

1. Typo-Tipps für Webdesigner (Teil 3): Texte spannender gestalten
2. Typo-Tipps für Webdesigner (Teil 2): Fließtexte gestalten
3. 10 WordPress-Plugins für Typografie-Liebhaber
4. 15 praktische Typografie- und Font-Tools für Webdesigner
5. CSS Grid-Systeme und Grid-Generatoren für Webdesigner

1. Fully Illustrated

2. Christian Sparrow

3. Matt Dempsey

4. nclud

5. Soh Tanaka

6. dConstruct 2010

7. Bullet PR

8. Frontier Room

9. GPacheco

10. Brizk Design

11. The Design Cubicle

12. Second & Park

13. Carsonified

14. Ready Made Designs

15. Envira Media

16. Media Novak

17. Il Frutteto

18. Marie Catrib’s

19. Malcolm Reading Consultants

20. David Fooks

21. David A.Molanphy

22. R/GA

23. Pioneers

24. Mutant Labs

25. Nosotros

26. Pro Theme Design

27. Story Pixel

28. Dreamer Lines

29. Ryan Kaiser

30. Odopod

31. Michela Chiucini

32. Finch

33. Sara Tusar

34. Colar Brunton

35. Who is Leon

36. Chriswi

37. Launchlist

38. DJ Eric C

39. Mohan Balaji

40. Jacob Lee

Welches Design gefällt dir am besten? Kennst du weitere Webseiten, deren Kontaktbereich etwas ganz Besonderes ist? Über deine Vorschläge und Feedback würde ich mich sehr freuen!

Ähnliche Artikel zu diesem Thema

1. Webdesign meets Music: 20 WordPress-Seiten berühmter Musiker
2. Webdesign Inspiration: 20 mobile Webseiten für iPhone, Android & Co
3. Webdesign Inspiration: 30 deutschsprachige WordPress-Webseiten und -Blogs
4. Webdesign Inspiration: 30 minimalistische WordPress-Blogs
5. 20 grandiose Webseiten-Header, die deine Kreativität beflügeln

1. Westlands Solar Farm

2. Wild Eye Photography

3. Ethical Studios

4. ecotaste

5. foresti

6. Amari

7. Walk in the Park

8. Coffee Tree

9. Growing Art & Craft

10. Northland Futons

11. Tulipae

12. Whitecliffs Brewery

13. Green Rowing

14. Leafcutter Studios

15. LeafTree

16. tee

17. Blue Oak Contruction

18. Lifelong

19. natura

20. Ryan Miranda

21. Vala Developments

22. Vine Creatives

23. ephfx

24. Pure Organic

25. EcoSpade

Welches sind deine Logo-Favoriten? Kennst du noch weitere schöne, aus der Natur inspirierte Logos? Über dein Feedback würde ich mich sehr freuen!

Ähnliche Artikel zu diesem Thema

1. Über die Kraft von Symbolen, und wie du das passende Symbol für dein Logo findest
2. Webdesign meets Music: 20 WordPress-Seiten berühmter Musiker
3. So findest du die passende Schrift für dein Logo
4. 25 köstliche Logo Inspirationen zum Thema Essen
5. Webdesign Inspiration: 40 kreative Kontaktformulare

1. Slidedeck

Ein sehr schöner Content-Slider im Accordion-Style. Slidedeck eignet sich super für eine Featured Projects.

2. Flip

Ein bisschen drehen und wenden gefällig? Mit Flip kannst du deine Projekte mit einer spannenden Animation präsentieren.

3. qtip

Egal ob Bilder oder Infotext, die qtips sehen schick aus und sind praktisch, um zusätzliche Inhalte unterzubringen.

4. Quicksand

Möchtest du deine Projekte nach Themen sortieren? Dann ist das Quicksand-Plugin genau das Richtige für dich. Ein wunderschönes Beispiel kannst du dir z.B. auf der Portfolio-Seite von Creative Spark anschauen.

5. Nivoslider

Nivoslider ist wohl der schönster jQuery Bilder-Slider derzeit. Du kannst aus mehreren Überblendungs-Optionen wählen und die Styles mit CSS anpassen.

6. Captipy

Mit diesem Plugin kannst du deinen Bildern schön animierte Bild-Unterschriften (Captions) hinzufügen.

7. prettyphoto

Eine der schönsten Lightbox-Varianten mit 5 verschiedenen Styles zur Auswahl.

8. Fancybox

Eine weitere sehr schöne Lightbox-Variante. Du kannst den Effekt wählen, wie deine Bilder eingeblendet werden sollen.

9. Galleria

Galleria ist ein praktisches und super schickes Fotogalerie-Plugin.

10. jQZoom

Mit jQZoom kannst du Detailansichten deiner Bilder per Mouse-Rollover hervorheben.

Beispiele schöner Portfolios

Auf diesen wunderschönen Portfolio-Seiten findest du jede Menge Inspiration, wie du die JavaScript-Plugins verwenden kannst.

1. CPeople

JavaScript-Elemente: Slider, Slide Up/Down

2. Rich Brown

JavaScript-Elemente: Lightbox

3. x3 Studios

JavaScript-Elemente: Carousel Slider

4. Galan Design

JavaScript-Elemente: Slider und Lightbox

5. Kitfolio

JavaScript-Elemente: Featured Slider mit Captions

6. Rokkan

JavaScript-Elemente: Image-Slider

7. Magouya

JavaScript-Elemente: Tooltips und Lightbox

8. dataselected

JavaScript-Elemente: Accordion und Image-Slider

Wie gefallen dir die Plugins und Beispielseiten? Kennst du weitere schöne Portfolio-Webseiten mit JavaScript-Elementen? Über deine Tipps und dein Feedback würde ich mich sehr freuen.

Ähnliche Artikel zu diesem Thema

1. 12 wunderschöne jQuery-Plugins, die du auf keinen Fall verpassen solltest
2. Webdesign Inspiration: JavaScript Elemente geschickt eingesetzt
3. Den Lightbox-Effekt für das NextGEN Gallery WordPress-Plugin nutzen
4. JavaScript Dropdown-Menüs mit Superfish
5. Meine Top 10 JavaScript-Plugins

1. Nike Soccer

2. Adidas

3. Puma Football

4. FIFA.com

5. UEFA

6. New Zealand All Whites

7. Unleash Football Australia

8. TheFA England

9. MLS Soccer

10. AC Milan

11. Manchester United

12. CokeFridge

13. Ronaldinho Gaucho

14. David Beckham

15. Dansk Boldspil Union

Kennst du weitere schöne Webseiten zum Thema Fußball? Über deine Tipps würde ich mich sehr freuen :-)

Ähnliche Artikel zu diesem Thema

1. Webdesign meets Music: 20 WordPress-Seiten berühmter Musiker
2. Webdesign Inspiration: 20 mobile Webseiten für iPhone, Android & Co
3. Webdesign Inspiration: 30 deutschsprachige WordPress-Webseiten und -Blogs
4. 25 köstliche Logo Inspirationen zum Thema Essen
5. 20 grandiose Webseiten-Header, die deine Kreativität beflügeln

1. Starbucks Coffee at Home

2. Art in My Coffee

3. C & C Coffee Company

4. stearns coffee

5. Wandering Goats

6. Remedy Coffee

7. lekali Coffee

8. Square One Coffee

9. Red Rock Coffee

10. Wawa Coffeetopia

11. Fernwood Coffee

12. Gorilla Coffee

13. Brooklyn Fare

14. Nespresso Citiz

15. Wake Up to whats New

16. Cinagro

Wir gefallen dir diese Kaffee-Webseiten? Kennst du weitere schöne Webseiten zum Thema Kaffee? Über weitere Tipps und Feedback würde ich mich sehr freuen!

Ähnliche Artikel zu diesem Thema

1. Webdesign meets Music: 20 WordPress-Seiten berühmter Musiker
2. Webdesign Inspiration: 20 mobile Webseiten für iPhone, Android & Co
3. Webdesign Inspiration: 30 deutschsprachige WordPress-Webseiten und -Blogs
4. Webdesign Inspiration: 30 minimalistische WordPress-Blogs
5. 25 köstliche Logo Inspirationen zum Thema Essen

Cheat Sheets für Adobe Illustrator

1. Adobe Illustrator CS4 / CS3 / CS2 Tastaturkürzel

Ein umfangreiche Auflistung von Illustrator-Tastenkürzeln. Auf der Seite findest du auch noch Shortcuts-Listen weiterer Adobe-Produkte z.B. für InDesign, Flash, Photoshop und Dreamweaver.

2. Adobe Illustrator Shortcuts

In diesem Artikel auf Web Designer Wall findest du eine hilfreiche Auflistung der Lieblings-Illustrator Shortcuts von Nick La.

Cheat Sheets für Adobe Photoshop

3. Photoshop Keyboard Shortcuts Cheat Sheet

Das Cheat Sheet veröffentlicht bei Smashing Magazine bietet eine übersichtlich gestaltete Ansicht der wichtigsten Tastaturkürzel in Photoshop.

4. Adobe Photoshop CS4 / CS3 / CS2 Tastaturkürzel

Die umfangreiche Auflistung von Shortcuts gibt’s auch für Photoshop.

5. Adobe Photoshop Tastaturkürzel (CS4 bis Photoshop 5)

In diesem vierseitigen PDF-Dokument kannst du nach jeder Menge Shortcuts stöbern. Das Dokument gibt es für Photoshop CS4 bis Photoshop 5.

6. Photoshop Werkzeug-Palette Referenz

Hier findest du eine übersichtliche Tabelle aller Photoshop-Werkzeuge inkl. kleiner Video-Screencasts, welche die jeweilige Werkzeug-Funktion erläutern.

7. Photoshop Secret Shortcuts

Auch für Photoshop gibt’s bei Web Designer Wall eine Auflistung der interessantesten Tastaturkürzel, die einem die Arbeit erleichtern.

8. Photoshop Lasso-Werkzeug Cheat Sheet

Alle Funktionen des Lasso-Werkzeugs auf einer PDF-Seite zusammen gefasst. Das Dokument ist auch super zum Ausdrucken geeignet.

9. Photoshop Pinsel-Werkzeug Cheat Sheet

Und weiter geht’s mit einer Übersicht aller Funktionen und Tastaturkürzel des Pinsel-Werkzeugs.

10. Adobe Stift-Werkzeug Cheat Sheet (für Photoshop, Illustrator, Indesign)

Als drittes Werkzeug im Bunde wird hier das Photoshop Stift-Werkzeug auf einer eigenen Seite erklärt.

11. Black White Cheat Sheet für Photoshop

Das Black White Cheat Sheet kannst du als Vorschaubild für die Schwarz/Weiß Filter-Funktionen in Photoshop nutzen.

Farben, Fonts, und Webbanner

12. Color Reference Guide

Das dreiseitige PDF-Dokument bietet eine übersichtliche Referenz für Webfarben.

13. Web Safe Color Chart

Eine weiteres Bookmark ist diese Farbwert-Tabelle wert.

14. RGB Hex Colour Chart

Bist du auf der Suche nach RBG- und Hex-Farbwerten ist die »RGB Hex Colour Chart«-Tabelle genau das Richtige für dich.

15. Win & Mac Websafe Fonts

Hier findest du eine übersichtliche Tabelle aller Websafe-Fonts für Window und Mac.

16. Web Banner Größen & Beispiele

Auf dieser Seite bekommst du eine Übersicht aller gängigen Bannergrößen mit Ansichts-Beispielen.

Kennst du weitere Cheat Sheets und Hilfs-Tools, die bei der täglichen Arbeit mit Photoshop, Illustrator & Co nützlich sein können? Ich freue mich auf deine Tipps!

Ähnliche Artikel zu diesem Thema

1. Kostenlose Grafik- und Bildbearbeitungs-Programme für Webdesigner
2. Typo-Tipps für Webdesigner (Teil 3): Texte spannender gestalten
3. 10 Cheat Sheets für die WordPress Theme-Programmierung
4. 18 hilfreiche Cheat Sheets für Programmierer
5. Kostenlose Icons, Fonts & Texturen – die 20 besten Ressourcen für Webdesigner

Detailansicht der Icons

Hier geht’s zum Download

• sushi-restaurant-icons-vector.zip (Dateigröße 3,54 MB)
• sushi-restaurant-icons-png.zip (Dateigröße 543 KB)

Wie gefallen dir die Sushi-Icons? Hast du weitere Ideen für Icon-Freebies? Wir freuen uns auf deine Vorschläge :-)

Ähnliche Artikel zu diesem Thema

1. Elmastudio feiert Geburtstag! Wunderschöne Happy Birthday-Icons downloaden
2. Lass den Sommer rein! Erfrischende Summer Holiday Icons downloaden
3. Tool Time – Werkzeug Icons kostenlos downloaden
4. Rudi the Rabbit wünscht Frohe Ostern – kostenlose Osterhasen-Icons downloaden
5. Stylisches e-Commerce Icon-Set in verschiedenen Farben downloaden

1. Nivo Slider

Der Nivo-Slider ist ein wunderschöner, cleaner jQuery Image-Slider. Du kannst aus 9 verschiedenen Überblendungen wählen, Captions einfügen, und deine Bilder verlinken. Die Styles des Sliders sind einfach anzupassen.

2. Meerkat jQuery Plugin

Mit dem Meerkat-Plugin kannst du versteckte Elemente an allen vier Seiten deiner Webseite einfaden / bzw. sliden lassen. Der Inhalt scrollt nicht mit der restlichen Seite mit. Eine tolle Möglichkeit um zusätzliche Elemente, wie z.B. ein Kontaktformular, die Suche oder Links zu deinen Social Sites zu integrieren.

3. Pretty Photo

Pretty Photo ist eine sehr schöne Lightbox-Variante, die neben Bildern auch Videos, Flash-Filme, YouTube- und Vimeo-Videos, und iFrames unterstützt.

4. qTips

qTips ist ein super flexibles und vielseitiges jQuery-Tooltips Plugin. Du kannst Texte oder Bilder einfügen, verschiedene Styles wählen, und die Postion der Tooltips bestimmen.

5. Jquery Quicksand Plugin

Mit dem Quicksand Plugin kannst du Elemente auf deiner Webseite mit Hilfe einer coolen Shuffle-Animation sortieren.

6. gMaps

gMaps ist ein tolles jQuery-Plugin, mit dem du GoogleMaps-Karten auf deiner Webseite integrieren kannst.

7. jQuery Captify Plugin

Mit jQuery Captify kannst du elegant-animierte Bildunterschriften bei Maus-Rollover einfügen.

8. jQZoom

jQZoom erzeugt ein Lupen-Effekt bei Bildern, sobald man die Maus über das Bild bewegt.

9. Galleria

Galleria ist eine sehr schöne jQuery Bilder-Galerie mit einer klassischen, einer Lightbox- und einer FullScreen-Variante.

10. Superfish – jQuery Menu Plugin

Superfish ist ein leicht zu verwendendes jQuery-Plugin, für angenehm animierte Dropdown-Menüs. Möchtest du mehr über das Plugin erfahren? Dann schau doch mal in folgendes Tutorial rein!

11. Coda Slider

Coda Slider ist einer DER Klassiker unter den JavaScript-Slidern, und mit seinen zahlreichen Optionen super flexibel einsetzbar.

12. jQuery ListMenu Plugin

Mit Hilfe des ListMenu-Plugins kannst übersichtliche Untermenüs in Stil der Reuters-Webseite integrieren. Das Plugin ist super für komplexe Seiten mit jeder Menge Infos und vielen Untermenüs geeignet.

Wie gefallen dir die jQuery-Plugins? Kennst du weitere praktische Plugins, die auf modernen Webseiten nicht fehlen sollten? Über dein Feedback und deine Tipps würde ich mich sehr freuen?

Ähnliche Artikel zu diesem Thema

1. Die 10 schönsten JavaScript-Plugins für dein Portfolio
2. Webdesign Inspiration: JavaScript Elemente geschickt eingesetzt
3. JavaScript Dropdown-Menüs mit Superfish
4. Meine Top 10 JavaScript-Plugins
5. 10 Javascript Lightboxes im Vergleich