Kommentare 20

Designvorschläge und Tipps für die Gestaltung von Text-Links

Bei der Gestaltung von Textlinks für Webseiten gibt es mal wieder etliches zu bedenken:
Wie deutlich sollen die Link-Markierungen hervorgehoben sein? Und wie sieht der Hover-Zustand für die Links aus? Welche Farben sind für Textlinks geeignet, und passen diese auch zum gesamten Farbkonzept der Webseite? Um all diese Fragen zu klären, habe ich nützliche Design-Vorschläge, CSS-Tipps und interessante Beiträge zum Weiterlesen für dich zusammen gestellt.

1. Möglichkeiten der Link-Gestaltung

Natürlich gibt es die verschiedensten Möglichkeiten mit Textlinks umzugehen. Farben können von hell zu dunkel, oder von dunkel zu hell wechseln. Links können unterstrichen oder mit einer gepunkteten Linie markiert werden, entweder im Ausgangsstadium oder erst bei Hover. Wichtig ist meiner Meinung nach vor allem, eine Balance zwischen einem angenehmen Textfluss, und einer deutlichen Link-Markierung zu finden. Alle Link-Zustände sollen angenehm lesbar sein, und in das farbliche Gesamtkonzept der Webseite passen. Hier einige Beispiele für die Gestaltung:

1.1. Link-Farben

Mit am häufigsten besteht die Link-Markierung lediglich aus der Auswahl einer bestimmten Link-Farbe. Im Hover-Effekt wechselt die Link-Farbe dann in einen dunkleren Farbton, oder auch in eine ganz neue Farbe. Meist ist die Link-Farbe kräftiger und heller gewählt, als die Hover-Farbe. Du kannst den Effekt aber auch genau anders herum wählen. Wichtig ist immer den Effekt im Browser noch einmal zu testen, um den richtigen Hover-Effekt abschätzen zu können.

Text Links gestalten
In den meisten Fällen ist der Link-Effekt am angenehmsten, wenn die Hover-Farbe aus einer verwandten Farbwelt gewählt ist.

Ein Beispiel

Auf der Webseite von Trent Walton ist jeder Artikel individuell gestaltet, somit ändert sich auch die Link-Farbe immer wieder. Das Schema bleibt aber meist das gleiche, eine hellere Farbe als Link, und eine dunklere Nuance einer ähnlichen Farbe im Hover-Zustand.

Text Links gestalten
In diesem Beispiel ist die Link-Farbe ein leicht schmutziges Gelb, bei Rollover wandelt sich die Farbe in einen hellen Olive-Ton.

1.2. Unterstrichene Links

Ein weiterer Link-Klassiker ist eine unterstrichene Linie zur Markierung von Links zu verwenden. Hier gibt es wieder verschiedene Kombinationsmöglichkeiten. Entweder ist die text-decoration: underline bereits im Link selbst angegeben, oder sie erscheint erst bei Hover.

Die Underline-Variante ist außerdem in den meisten Fällen mit einer Link-Farbe kombiniert. Entweder ändert sich diese bei Hover ebenfalls, oder der Link bleibt einfarbig.

Text Links gestalten

Ein Beispiel

Auch bei Jason Santa Maria ändern sich die Link-Farben, je nach Artikel-Layout. Die unterstrichenen Linien bleiben als Link-Markierung und im Hover-Zustand erhalten.

Text Links gestalten
Im aktuellen Artikel von Jason Santa Maria wird ein helleres Grün für den Link, und ein dunkleres Grün bei Rollover verwendet.

1.3. Links mit Hintergrund

Eine weitere Alternative sind Links mit Hintergrund-Farben. Diese werden generell erst bei Hover sichtbar, da ansonsten der Textfluss sehr von den Farbflächen unterbrochen werden würde. Da diese Link-Variante etwas dominanter ist, wird sie gerne auch nur bei Artikel-Überschriften verwendet.

Text Links gestalten

Ein Beispiel

Bei »A List Apart« bekommen sowohl die Überschriften, als auch normale Textlinks bei Hover eine ganz dezente Hintergrund-Farbe. Zusätzlich sind die Links im Hover-Zustand in einer dunkleren Farbe unterstrichen.

Text Links gestalten
Im normalen Zustand sind die Textlinks bei »A List Apart« bereits hellblau und unterstrichen.

1.4. Links mit Border-Bottom (gepunktet, gestichelt oder unterstrichen)

Sehr beliebt sind auch Links, die als Hover-Effekt eine Border haben. Diese Border-Bottom kann man dann, im Gegensatz zur text-decoration: underline, auch auf gestrichelt oder gepunktet setzen.

Text Links gestalten

Ein Beispiel

Brian Hoff verwendet auf seiner Portfolio-Webseite lediglich eine Link-Farbe (ein dezentes Blau) und eine gepunktete Linie als Hover-Effekt.

Text Links gestalten
Durch die gepunktete Unterstreichung wirken die Links auf der Webseite von Brian Hoff doch deutlich, obwohl nur eine Farbe verwendet wird.

Natürlich gibt es neben diesen Optionen für Textlinks noch etliche Lösungen, die sich z.B. für eine Link-Liste in der Sidebar oder im Footer eignen. Z.B. kann man Links bei Hover ein wenig nach links schieben, oder beim Anklicken einen Pixel nach unten versetzen. Jede Menge Hover-Effekte zur Inspiration findest du z.B. auf der Webseite CSS Tricks.

2. Weitere Tipps zur Link-Gestaltung

Natürlich sind bei der Gestaltung von Links und Hover-Effekten deiner Kreativität keine Grenzen gesetzt. Da Text-Links aber vor allem ihre Funktion erfüllen müssen, und für die Webseiten-Besucher angenehm zu bedienen sein sollten, habe ich hier noch einige hilfreiche Überlegungen und Tipps für die Gestaltung von Links aufgelistet.

  • Besonders wichtig bei der Gestaltung von Textlinks ist es, auf die Lesbarkeit zu achten. Trotz verschiedener Farbigkeit oder Unterstreichung sollten die Texte nicht zerstückelt wirken und angenehm zu lesen sein.
  • Auch die Link-Farben sollten so gewählt sein, dass ein ausreichend hoher Kontrast zwischen dem Webseiten-Hintergrund und der Link-Farbe besteht. Dies gilt natürlich auch für den Hover-Zustand. Ein helles Gelb funktioniert z.B. sehr gut auf einem dunklem Hintergrund, bei einem hellen Hintergrund wird eine gelbe Link-Farbe dagegen unleserlich.
  • Die größte Herausforderung bei der Wahl des Link-Effekts ist also eine Balance zu finden, zwischen der Lesbarkeit des gesamten Textes und einer deutlichen Markierung von Links im Text.
  • Die deutliche Markierung wird sogar noch viel wichtiger, da mit der Verbreitung von Touchpads (z.B. iPads, iPhones) der Hover-Zustand dort nicht unterstützt wird. Daher sollte man darauf achten, dass alle Links deutlich als solche zu erkennen sind. Auf die Gestaltung von wichtigen, versteckten Elementen, die erst im Hover-Zustand sichtbar sind (z.B. bei Dropdown-Menüs oder Tooltips), sollte daher bei Designs für mobile Geräte verzichtet werden. Trent Walton hat zu diesem Thema den sehr interessanten Beitrag »Non Hover« geschrieben.
  • Aus meiner Erfahrung ist es sinnvoll die kompletten Farbkombinationen für Links bereits zu klären, bevor man sich an die CSS-Programmierung macht. So kannst du dir besser dein Farbkonzept veranschaulichen, z.B. in dem du dir in deinem Layout eine Farbpalette für Links und Hover-Zustände anlegst.
  • Ein spannendes Thema ist auch die Verwendung von CSS3-Effekten für Links. So kannst du z.B. eine Animation für den Übergang zwischen Link-Farbe zur Hover-Farbe erreichen. Wie du diese CSS3 Transitions für deine Links verwendest, und was dabei zu beachten ist, kannst du im sehr schönen Artikel »Understanding CSS3 Transitions« bei »A List Apart« nachlesen.

Wie gefallen dir diese Tipps und Vorschläge zur Gestaltung von Textlinks im Webdesign? Welches sind deine Lieblings- Link-Effekte, und welche Tipps findest du bei der Umsetzung von Links besonders hilfreich? Über dein Feedback und deine Vorschläge freue ich mich sehr!

20 Kommentare

    • Hallo Chrissy,

      vielen Dank für dein Feedback, in den Textlink ist schlicht meist am angebrachtesten. Ich finde es vor allem auch immer wichtig, dass die Farben zum Theme-Layout passen und angenehm lesbar sind :-)

      Viele Grüße,
      Ellen

    • Hallo René,

      hehe, diese Farbe hört sich ja zu schön an, um wahr zu sein ;-) Es stimmt aber sicher, dass ein blauer Link sehr angenehm sichtbar ist, und blau ist natürlich auch die Standard-Linkfarbe z.B. in Email-Programmen, bei den Google-Suchergebnissen etc.

      Viele Grüße,
      Ellen

      • Charlotte

        Also meiner Meinung nach, sehen blaue Links sehr nach Web 1.0 aus, gerade weil sie überall Standard sind. Ich muss bei blauen Links immer an animierte gifs und die Webseiten der 90er denken.

        • Sicherlich erinnern blaue Hyperlinks an die Anfänge des Internets. Meiner Ansicht nach ist es die blaue Farbe, welche dem Otto-Normalverbraucher signalisiert, dass es sich hierbei um einen Link handelt.

        • @Charlotte, @Markus:

          Mhh, ja, das Blau schnell nach Standard aussehen kann, stimmt sicher. Aber es gibt ja so viele unterschiedliche Blautöne, und je nach Wahl, kann ein Blau auch super modern aussehen. Meiner Ansicht nach ist die Link-Gestaltung auf der Webseite von Brian Hoff ist ein sehr schönes Beispiel dafür :-)

          Viele Grüße,
          Ellen

  1. Grandios. Mir war gar nicht bewusst, dass man mit einfachsten Bordmitteln einen solch verblüffende Effekte erzielen kann. Gerade die Linkfarben, Unterstrichene Links und Links mit Hintergrund haben mich überzeugt. Insbesondere die Farben, welche Du verwendet hast.

    • Hallo Markus,

      vielen Dank für dein nettes Feedback, ja, oft kann man mit wenigen Mitteln viel erreichen :-) Und gerade bei der Gestaltung von Text-Links, die im ersten Moment ja doch eher unscheinbar sind, gibt es einiges was man beachten kann :-)

      Es freut mich, dass dir die gewählten Farben in den Beispielen Gefallen :-)

      Viele Grüße,
      Ellen

  2. Hoverspielereien lasse ich im Artikel komplett weg, Underline ist manchmal recht hilfreich. Background Color habe ich bisher noch nie verwendet und weiß noch nicht einmal warum. Wahrscheinlich Geschmackssache :-)

    • Hallo Andreas,

      vielen Dank für dein Feedback zum Thema Text-Links :-) Ja, die Verwendung von Link-Styles ist sicherlich auch immer Geschmackssache :-)

      Ich bin auch der Meinung, dass dezente Links im Text besser wirken, durch die Auswahl von Link-Farben kann man meiner Ansicht aber sehr viel erreichen. Die CSS3 Transitions gefallen mir auch sehr gut, allerdings ist da denke ich, auch weniger mehr :-)

      Viele Grüße,
      Ellen

    • Hallo Daniel,

      vielen Dank für diesen Hinweis. Ja, da hast du völlig Recht! Bei Links wie “Weiterlesen” etc. ist eine Kennung immer sinnvoll. Mir gefallen → oder » besonders gut :-)

      Viele Grüße,
      Ellen

  3. Auf jeden Fall klasse, dass Du diese ganzen Möglichkeiten aufzeigst ….manche vergisst man einfach, weil man denkt, die “einfache” Gestaltung sei nicht auffällig genug. Dabei finde ich auch hier den Grundsatz “weniger ist mehr” sehr passend, je nachdem, was man darstellen möchte.

    • Hallo Sivani,

      vielen Dank für dein Feedback zur Text-Link Gestaltung. Ja, das stimmt, weniger ist meist mehr :-)

      Ich selbst liebe ja Farben, und bin daher ein großer Fan von Link-Gestaltung mit Farbe :-) Wichtig ist sicherlich auch immer zu bedenken, für welches Zielpublikum man die Webseite gestaltet. Bei der Umsetzung von Gertis PC-Tipps haben wir z.B. sehr darauf geachtet, eine deutliche Markierung der Text-Links zu setzen, und eine Farbe deutlich als Link-Farbe hervorzuheben.

      Viele Grüße,
      Ellen

    • Hallo Bloggerschmidt,

      vielen Dank für deinen Kommentar. Ja, das stimmt, der Aspekt “Barrierefreiheit” ist natürlich auch super wichtig. Und deine Empfehlung die Hintergrund-Farbe mit der Link-Farbe zu tauschen, ist ein toller Tipp :-)

      Vielen Dank und viele Grüße,
      Ellen

Schreibe eine Antwort