Das gewisse Etwas…

  • von Lennart Prange

Ich denke, jeder kennt das Problem: Man sitzt vor dem fertigen Design, meint theoretisch alles perfekt gemacht zu haben und ist dennoch nicht zufrieden. Irgendetwas fehlt. Gute Webdesigner wissen was los ist und schaffen es, ihrem Design das gewisse Etwas zu verleihen. In diesem Beitrag möchte ich Tipps geben, wie euer Webdesign vom Gewöhnlichen zum Außergewöhlichen werden kann.

Kommentare und Social Bookmarks würden mich wie immer freuen.

Der Eye-Catcher

Der Eye-Catcher ist ein Element, welches die Blicke der Nutzer auf sich zieht. Wenn man sein Webdesign interessanter machen will, ist der Eye Catcher wohl die erste Wahl.

Was ist zu beachten?

  • Der Eye Catcher soll zwar auffallen, allerdings darf er die Nutzer nicht von dem Inhalt ablenken. An dieser Stelle ist es wohl sinnvoll an den Sinn von Internetseiten zu erinnern. Ein zu heftiger Blickfang von dem die User kaum ablassen können stört mehr, als dass er Nutzen bringt.
  • Verwendet keine ausgelutschten Effekte. Heftige Spiegelung oder sonstiges Web 2.0 Geplänkel ist zwar nicht out, sollte aber nur dann verwendet werden, wenn man wirklich weiß wie man damit umzugehen hat. Eine einfache Spiegelung kann fast jeder machen, sie so einzusetzen das gut ins Design passt, ist aber ungleich schwerer.
  • Der Eye Catcher muss ins Design passen. Aus diesem Grund, sollte er nie nachträglich hinzugefügt werden sondern von vornherein eingeplant werden. Der Eye Catcher bestimmt zum großen Teil den Charakter des Designs und da liegt auch die eigentliche Schwierigkeit. Einen passenden Eye Catcher zu gestalten ist die hohe Kunst, bei der ich euch leider wenig helfen kann. Das Wichtigste: Achtet darauf, dass der Eye Catcher zum Thema passt.
  • Der Eye Catcher muss gut aussehen. Um einen guten Eye Catcher zu gestalten, braucht es schon ziemlich viel Können. Daher sollte man von einem Blickfang absehen der man sich nicht so weit fühlt. Ein hässlicher Blickfang zerstört das ganze Design, da er das Element ist, welches am meisten auffällt.

Beispiele für einen Eye Catcher

ec_benford

Die Lichteffekte sind DAS ELEMENT dieser Website!

ec_cultf

Aufwändige Grafik, die einfach gut aussieht!

ec_netnova

Stellt euch diese Seite mal ohne die Figur vor - langweilig!

Die Schafe sind genial!

Die Schafe sind genial!

Texturen

Im Nachhinein wundert es mich, dass ich bisher noch nichts über das Thema auf diesem Blog berichtet habe. Texturen sind ein sehr guter Weg um einen Webdesign das gewisse Etwas zu verleihen. Sie sind häufig dezenter als Eye Catcher.

Was ist zu beachten?

  • Texturen vermitteln ein ganz bestimmtes Gefühl. Zerknittertes Papier, Rost, Steine, Fliesen oder sonstige Texturen haben ihre eigene Wirkung. Bei einigen Seiten zum Beispiel die eines Fliesenleger aus wäre es ziemlich abwegig Rost als Hintergrundtextur zu verwenden, oder?.
  • Macht sie nicht zu auffällig. In 90 % der Fälle ist es sehr sinnvoll die Deckkraft der Texturen extrem niedrig anzusiedeln; sie soll nicht so sehr ins Auge fallen wie ein Eye Catcher.
  • Nicht alles kann man als Textur verwenden. Geeignet ist alles, was der Nutzer eindeutig identifizieren kann.
  • Benutzt qualitativ hochwertige Bilder. So stellte sicher, dass die Textur das Aussehen oder Website nicht zerstört und der Nutzer nicht etwas völlig abwegiges in der Textur erkennt

Beispiele für gute Texturen

tex_signalfeuer

Hier wurden mehrere Texturen sehr schön kombiniert!

tex_shifting

Die Textur passt sehr gut zur restlichen Seite!

tex_rory

Eine Holztextur, ohne die die Seite nicht funktionieren würde!

Kleine Dinge können Großes bewirken

Oft reichen schon die kleinsten Änderung um den Design den letzten Schliff zu verleihen. Hier sollte man alles ausprobieren was das Grafikprogramm zu bieten hat. Ein sehr gutes Beispiel ist meiner Meinung nach dieses Blog. Schaut euch mal den Header an. Das Rauschen und die Reflektion machen das sonst schlichte dunkelgrau doch schon sehr insgesamt, oder?

Was ist zu beachten?

  • Achtet auf den restlichen Stil der Website. Wenn ihr eine schlichte Seite erstellt hat, ist es besser dezenten Verlauf zu verwenden, als hier und da eine abgeknickte Ecke hinzuzufügen.
  • Schaut auch in den Content. Listen und Überschriften können viel bewirken. Über solche Dinge machen sich viele Webdesigner zu wenig Gedanken.

Beispiele für kleine Dinge, die Großes bewirken

problogger_listen

Die Listen von problogger sind wirklich cool!

creattica_h

Mal etwas andere Überschriften!

copyblogger_oob

2 Icons sprengen den Rahmen und machen das Design interessanter!

14 Kommentare

  1. Sebastian Erhardt
    26. September 2008 um 18:55 Uhr

    Sehr geil die Schafe. Gute Auswahl wie immer.

  2. H3ad5hot
    26. September 2008 um 20:47 Uhr

    Danke werd mal versuchen mit Texturen zu arbeiten

  3. Mediensache
    26. September 2008 um 20:52 Uhr

    Deine Liste kann ich super gebrauchen. ich bin in einer schaffensphase, damit ich mal ein halbwegs anständiges design vorweisen kann. das jetzige war nur eine “notdurft”, damit überhaupt eins vorhanden ist. das habe ich nur ruckzuck gemacht.

    freue mich auf weitere solcher tollen artikel!

    Mediensaches letzter Beitrag..Geld verdienen ohne Werbung

  4. NeX
    26. September 2008 um 21:14 Uhr

    Schön geschrieben, danke.

  5. Tartanrocker
    26. September 2008 um 22:24 Uhr

    Gute Auflistung – auch weniger oberflächlich wie bisher. Wobei man jedem einzelnen Punkt wiederum einen Artikel widmen könnte 😉 Weißt du, was mir grad auffällt? So einen richtigen Eyecatcher hat deine Webseite nicht 😛

    Was bedeutet eigtl “Gute Webdesigner kennen wir die richtige Antwort und wissen(,) was zu tun ist.”?

    Tartanrockers letzter Beitrag..Pixelblut – Es ist nur ein Spiel

  6. OrangeBlue
    26. September 2008 um 22:38 Uhr

    Sehr gut, wie immer halt, weiter so 🙂

  7. Lennart Prange
    26. September 2008 um 23:29 Uhr

    Danke erstmal 🙂 Schön, dass ihr damit was anfangen könnt.

    @ Tartanrocker: Der Satz, den du nicht verstehst, ist erstmal völlig falsch geschrieben und außerdem ziemlich schlecht formuliert ;). Es sollte heißen: Gute Webdesigner wissen was los ist, und schaffen es, ihrem Design das gewisse Etwas zu verleihen.
    Beim Schreiben des Artikels ist mir tatsächlich auch augefallen, dass diesem Blog der wirkliche Eye-Catcher fehlt. Aber ich habe mir schon eine Antwort überlegt: Erstmal sollte der Eye-Catcher bei einer so Contentlastigen Website wie einem Blog auch der Content sein. Außerdem hat Sebastian das Logo doch sehr schön verpackt.

  8. OrangeBlue
    27. September 2008 um 02:01 Uhr

    Ja, das Logo ist echt schick verpackt, und wenn man hier drauf geht, will man ja eh die Artikel lesen, und nicht nach nem Eyecatcher suchen 😀

  9. Tartanrocker
    27. September 2008 um 11:01 Uhr

    Ah danke 😀

    Ich hab die Website nochmal genauer unter diesem Gesichtspunkt betrachtet. Auf der Startseite dient ja eigentlich die Slideshow als Eyecatcher. Vor allem wenn gerade attraktiver Inhalt drin ist, funktioniert das ganz gut. Aber die weiteren Seiten, nur mit dem Logo im Header (https://daswebdesignblog.de/_images/logo.jpg) – find ich etwas dürftig. Einerseits ist der Headerbereich eigentlich zu klein, das Logo damit sowieso – und ich finde, das Logo ist NICHT gut verpackt; zu unauffällig, schlechter Schlagschatten, man erkennt nicht was es darstellen soll und typografisch unausgeglichen.
    Ist jetzt schon etwas hart, aber ich denk’ mal du verträgst die Kritik, gerade wenn du über diese Themen schreibst 😛
    Zum Inhalt: “Der Eye Catcher soll zwar auffallen, allerdings darf er die Nutzer nicht von dem Inhalt ablenken.” Ich denke, gerade bei Blogs kann man sehr gut Eyecatcher einsetzen. Und ein guter Webdesigner wie du schafft es auch, den Mittelweg zu finden 😀
    Grüße

    Tartanrockers letzter Beitrag..Pixelblut – Es ist nur ein Spiel

  10. Lennart Prange
    27. September 2008 um 19:02 Uhr

    Danke für das Kommentar. Du hast mir die Idee für einen neuen Beitrag geradezu auf einem Silbertablett serviert ;). Ich werde die Problematik mit den Unterseiten mal umfangreich erläutern. Ich denke, dass das sehr wichtig ist.

    Zum Logo:
    Mhm mir gefällt die “Verpackung” des Logos. Allerdings spricht mich der Schriftzug noch nicht so an. Da werden wir uns eventuell noch mal dran setzen.

    Danke für die Kritik. Sehr konstruktiv und daher vollkommen ok.

  11. kmo
    30. September 2008 um 21:22 Uhr

    Falls ich mal keinen Eye-Catcher input habe, so greif ich meistens auf jQuery zurück, damit lässt sich immer etwas feines zaubern!

  12. Werner Leder
    5. Februar 2009 um 18:00 Uhr

    Wunderbare Seite hier.Viele Tipps für den Gebrauch. Danke allen für die Beiträge.

Trackbacks/Pingbacks