1.9 Element #4: Das gewisse Etwas (optional)

in • • Kommentar hinterlassen

Bei der Wahl dieses 4. Elements, dem „gewissen Etwas“, ist noch am ehesten etwas Kreativität gefragt.

Grundsätzlich ist dieses 4. Element aber optional.

Du kannst Dein Webdesign definitiv auch ohne ein „gewisses Etwas“ gestalten (es kommt also auch ganz darauf an, wie einfach Du die Erstellung Deiner Website halten möchtest).

Also:

Was ist das „gewisse Etwas“?


Das gewisse Etwas ist ein Design Detail, welches bewusst auffällig gestaltet ist und damit:

  1. Einen zusätzlichen Wiedererkennungseffekt schaffen soll.
  2. Ganz einfach das Design etwas interessanter und hochwertiger machen soll. Ein Blickfang für das Auge, um das Design etwas aufzulockern.

Wenn Du Dir auf ThemeForest.com (normalerweise der ersten Anlaufstelle für WordPress Themes) die Demo-Websites ansiehst, dann sehen diese praktisch immer wegen den gewählten Farben, Schriftarten, Bildern (siehe letzte Lektionen) und vor allem dem „gewissen Etwas“ so toll aus.

Also wegen dem Branding, das wir hier in diesem Modul jetzt erarbeiten 🙂

Das Theme selbst ist völlig leer und „langweilig“ (wenn Du eines dieser Themes einmal gekauft und installiert hast, dann weisst Du genau was ich meine).

Zusätzlich gibt es jetzt mit dem „gewissen Etwas“ im Theme 2 Probleme:

#1: Das gewisse Etwas ist meistens fest im Code des Themes integriert (weil das mit manueller Arbeit verbunden ist, also z.B. Effekte, die mit CSS Code gemacht wurden).

Wenn Du also einmal eines dieser WordPress Themes gewählt hast, kannst Du das gewisse Etwas nicht (oder nur sehr schwierig und mit viel Aufwand) wieder ändern.

#2: Diese Themes sollen ja für möglichst viele Käufer geeignet sein. Das heisst:

Das gewisse Etwas ist häufig eher subtil und vor allem meist eher im „Mainstream“ Design Trend.

Also alles andere als „einzigartig und auffällig“, was ja das eigentliche Ziel wäre.

Ein konkretes Beispiel: Der Hover Effekt im Enfold Theme (eines der beliebtesten Themes auf ThemeForest):



Nur Dank diesem „gewissen Etwas“ erkennt man mit einem Blick, wenn eine Website mit dem Enfold Theme gemacht wurde.

Kurz gesagt: Die Themes auf ThemeForest werden wegen dem fertigen Beispiel-Branding (Farben, Schriftarten, Bildern und dem gewissen Etwas) gekauft, nicht wegen der Qualität des Themes an sich.

In unserem WordPress Paket mit dem GeneratePress Theme gibt es kein Standard „gewisses Etwas“. Darum ist das Theme auch so schnell. Und wir sind damit völlig frei, um unser eigenes Branding umzusetzen.

Sammlung & Inspiration für das „gewisse Etwas“


Ich habe das „gewisse Etwas“ hier in 7 Kategorien eingeteilt. Diese Einteilung ist natürlich nicht abschliessend oder vollständig, sollte Dir aber einen guten Überblick darüber geben, was Deine Möglichkeiten sind.

Noch ein Hinweis: Ich kann hier natürlich teilweise nur eine sehr begrenzte Auswahl der Möglichkeiten zeigen.

Hier ist also etwas Entdeckungsfreude gefragt: Besuche die verlinkten Websites, klick Dich etwas durch und lass Dich von den unzähligen Ideen und Stilen der Designer inspirieren.

#1: Trennlinien / -grafiken

Mit Trennlinien kannst Du Inhalte in kleinere Häppchen aufteilen und strukturieren, und lockerst Deine Inhalte auf.

Trennlinien sind eine simple, aber effektive Methode um Dein Design aufzuwerten und interessanter zu machen (natürlich in Deinen Branding Farben).

Das können relativ einfache und simple Linien sein:



Wenn Du einzelne Abschnitte mit Hintergrundfarbe hast, kannst Du die Übergänge mit speziellen Trennformen gestalten (anstatt einer einfachen horizontalen Linie):



Während die ersten beiden Beispiele zu praktisch jeder Website passen, gibt es auch noch die Variante mit gezeichneten Trennlinien als Grafiken, die für etwas verspieltere Designs passen:



Solche Trenngrafiken findest Du hier (ich habe auf beiden Websites einfach nach „text divider“ gesucht):


Creative Market und Graphic River sind 2 Marktplätze, wo Designer Ihre Werke verkaufen (nicht exklusiv, dafür für nur ein paar wenige Franken). Diese beiden Websites sind noch für einige andere „gewissen Etwas“ unsere Anlaufstelle 🙂

#2: Hintergründe

Wenn Dir simple einfarbige Hintergründe (ob jetzt Weiss, Grau oder in Deiner Branding Farbe) zu langweilig sind, kannst Du mit einem Hintergrundbild sehr kreative und einzigartige Designs schaffen.

So ein Hintergrundbild kann (muss aber nicht) übrigens auch gleichzeitig Dein „Hero Image“ aus der letzten Lektion sein.

Mögliche Arten von Hintergründen:

  • Texturen, also z.B. wie Papier, Wasserfarben, Marmor
  • Muster, mit allen möglichen geometrischen Formen und Icons
  • Oder generell abstrakte Zeichnungen in verschiedenen Varianten und Stilen


Hier findest Du eine grosse Auswahl von „neutralen“ (und gratis) Hintergrundtexturen: http://subtlepatterns.com/

Speziellere und vor allem viele verschiedene Hintergründe findest Du hier (diese kosten ein paar $):


#3: Kreative Titel/Untertitel

Die Titel und Untertitel sind die wichtigsten Inhaltselemente auf einer Website: Sie sind das erste, was ein Besucher liest und entscheiden darüber, ob sie sein Interesse wecken.

Die Titel also etwas interessanter und auffälliger zu gestalten, ist eine sehr gute Idee.

Hier einige Möglichkeiten:

Eine der simpelsten und häufigsten (aber deswegen nicht schlechten) Methode, ist die Titel zu „unterstreichen“ – also in irgendeiner Form eine Linie hinzuzufügen:



Es muss dabei nicht klassisch „unterstrichen“ sein:



Oder auch nicht zwingend eine simple Linie sein:



Wieder eine andere Möglichkeit ist, unterschiedliche Textstärken für einzelne Wörter zu verwenden:



Oder für einzelne (oder alle) Wörter die Textfarbe umzukehren (invertieren, also mit weissem Text auf farbigem Hintergrund):



Ebenfalls eine tolle Möglichkeit ist 2 Titel untereinander mit unterschiedlicher Schriftart und Farbe zu verwenden:



Auch hier kann man noch kreativer werden und die Titel z.B. übereinander positionieren:



Wie gesagt: Das sind nur einige Beispiele und Ideen. Lass Dich ruhig auch von anderen Websites die Dir gefallen inspirieren.

#4: Icons

Icons sind eine gute Option, wenn Du 3 oder mehr verschiedene Angebote bzw. Themen abdeckst. Mit Icons kannst Du so diese Angebote auf der Website optisch ordnen bzw. strukturieren.

Icons sind also nicht nur zur Dekoration, sondern auch nützlich zur schnellen Orientierung für Besucher.

Es gibt die „bekannten“ und relativ simplen Icons:



Aber auch etwas speziellere und detaillierter gestaltete Icons:



Und mittlerweile natürlich auch sehr aufwändig gestaltete Icons in verschiedenen Design-Stilen:



Der Trick bzw. die Arbeit ist einfach, das passende Icon-Paket zu finden.

Grundsätzlich gibt es unzählige Icons für praktisch jedes Thema und in den unterschiedlichsten Stilen.

Aber: Auch bei Icons gibt es sowohl gratis, als auch kostenpflichtige Angebote.

Zuerst 3 Websites mit Icons, welche Du gratis und ohne Einschränkung (also z.B. auch ohne Quellenangabe) verwenden kannst:

  1. iconmonstr: https://iconmonstr.com/
  2. Material.io: https://material.io/resources/icons/?style=baseline
  3. Ionicons: https://ionicons.com/


Als Ergänzung hier 2 Artikel, die weitere Gratis Icon Pakete zusammengetragen haben (Wichtiger Hinweis: Diese sind zwar gratis, aber Du musst einfach schauen, ob nicht allenfalls eine Quellenangabe mit einem Link nötig ist):


Dann hier die kostenpflichtigen Angebote (falls Du bei den Gratis Icons nicht fündig wirst oder einfach etwas spezielleres und exklusiveres suchst):

  • The Noun Project: Mit einer Auswahl von über 2 Millionen Icons findest Du wirklich praktisch für jedes Thema das passende Icon: https://thenounproject.com/
    • Hinweis: Du kannst diese Icons auch gratis verwenden, musst dann aber eine Quellenangabe machen (Autor erwähnen und zur Website verlinken).
  • Creative Market & Graphic River: Auf beiden Websites findest Du für ein paar Dollar Icon Pakete zu den unterschiedlichsten Themen. Hier findest Du vor allem auch Icons in aufwändigeren bzw. spezielleren Designs:


#5: Illustrationen & Grafiken

Im Gegensatz zum Hero Image kannst Du Illustrationen und Grafiken zur Unterstützung (eben zur „Illustration“) im Inhalt Deiner Website verwenden.

Hier sind Deiner Fantasie praktisch keine Grenzen gesetzt.

Hier einige Beispiele:

Bereits so etwas Simples wie handgezeichnete Pfeile oder sonstige Formen und Symbole können Deine Inhalte optisch viel interessanter machen:



Du findest aber auch komplett fertige Illustrationen in verschiedenen trendigen und minimalistischen Stilen:



Es gibt natürlich auch andere einfachere Illustrationen:



Die Illustrationen bzw. Grafiken müssen nicht unbedingt eine Bedeutung haben, sondern können ähnlich wie das Hero Image einfach durch den Stil und Farben die Stimmung des Designs unterstützen:



Wobei Du natürlich auch direkt für spezifische Themen passende Illustrationen findest, wie hier z.B. für Yoga:



Eine tolle Illustration oder Grafik kann aus einer „nur“ schönen Website einen einzigartigen und einprägsamen Hingucker machen.

Auch dafür findest Du auf Creative Market und Graphic River eine grosse Auswahl:


Eine kleine „Warnung“: Es kann etwas Geduld brauchen, um auf diesen Websites etwas zu finden, dass zu Deinem Branding (also z.B. zu Deinen Farben) passt. Oder es kann natürlich auch einfach sein, dass Du schlicht nichts Passendes findest.

Oder aber umgekehrt, dass Du den Ton Deiner gewählten Farbe etwas anpasst, damit er zur perfekten Illustration passt, die Du gefunden hast.

#6: Buttons & Links (Design & Animationen bzw. Hover Effekte)

Buttons und normale Text-Links sind sehr häufig verwendete Elemente. Darum eignen diese sich ideal dafür, sie etwas kreativer und auffälliger zu gestalten.

Der normale Standard-Effekt bei Buttons ist ja ein simpler Wechsel der Hintergrundfarbe:



Hier einige kreativere Beispiele (zwar ohne Animation / Hover-Effekt, aber zumindest siehst Du einmal die Idee):



Normale Text-Links sind normalerweise ja unterstrichen (damit man sie auf einen Blick erkennt) und ändern einfach die Farbe:



Selbst hier gibt es einige interessante Möglichkeiten, sich von all den anderen Websites abzuheben:



Wie gesagt, dazu gehören natürlich auch die Animationen, also wie genau sich z.B. die Farbe eines Buttons ändert (ein flüssiger Übergang, füllt sich langsam aus einer Richtung, etc.), die Linie gezeichnet wird oder sich allenfalls etwas bewegt oder dreht…

Du siehst, auch hier gibt es sehr viele verschiedene Möglichkeiten. Achte einmal auf diese Details bei einer Website, die Dir besonders gefällt.

#7: Bilder „Effekte“

Wo Du tolle Bilder findest, habe ich Dir ja in der letzten Lektion gezeigt.

In den meisten Fällen wird das Bild einfach 1:1 im rechteckigen Format auf der Website verwendet:



Wir können das Bild aber auch mit einigen „Effekten“ individueller gestalten:

Hier zuerst einmal einige Beispiele, welche nur mit CSS (also ohne das Bild tatsächlich zu bearbeiten müssen) gemacht werden können:

Abgerundete Ecken:



Ein Kreis:



Mit Schatten, damit das Bild sich vom Hintergrund „abhebt“:



Es kann auch jede einzelne Ecke unterschiedlich abgerundet werden:



Falls Du es wirklich kreativ machen willst, musst Du das Bild selbst bearbeiten. Das macht es natürlich besonders aufwändig, dafür sind Dir praktisch keine Grenzen gesetzt, um die Bilder wirklich einzigartig zuzuschneiden oder durch kleine grafische Elemente zu ergänzen:



Und schliesslich gibt es auch noch die Möglichkeit, Hover-Effekte bei den Bildern zu nutzen (ebenfalls mit CSS).

Z.B. könnte man es so machen, dass ein Bild in Schwarz-Weiss angezeigt wird, und sobald man mit der Maus darüber fährt, wird es in Farbe angezeigt. Oder dass das Bild beim Hover mit der Maus etwas herangezoomt wird.

Tipps für die Wahl des „gewissen Etwas“


Du siehst:

Einige dieser „gewissen Etwas“ sind eigentlich verhältnismässig simpel, wenn Du sie einmal einzeln „unter dem Mikroskop“ betrachtest.

Aber:


Diese Liebe für das Detail ist genau das, was den Unterschied macht.

Unterschätze das also nicht 🙂


Der Schlüssel dabei ist wie immer (und wie Du mittlerweile schon mehrmals gehört hast): Weniger ist mehr.

Nutze bzw. kombiniere maximal 1-3 der 7 oben aufgelisteten Elemente für das gewisse Etwas.

Ansonsten wirkt es schnell zu hektisch und unfokussiert, und die Chance sinkt, dass sich beim Betrachter irgendein Detail einprägt.

Ich empfehle Dir ganz einfach, Dich zu Beginn einfach einmal auf die Suche nach einem einzelnen „gewissen Etwas“ Element zu machen.


Hier noch ein anschauliches „echtes“ Beispiel, wie das ein Grossunternehmen macht: Die AXA Versicherung.

Das „gewisse Etwas“ ist der rote Schrägstrich aus dem Logo:



Dieser rote Schrägstrich wird einerseits häufig in den Titelbildern verwendet:



Andererseits findest Du diesen Schrägstrich auch als subtiles Detail beim Hover Effekt bei den Buttons wieder:



Du siehst, das gewisse Etwas muss nicht übertrieben und möglichst überall eingesetzt werden.

Zusammenfassung und Checkliste für diese Lektion


Also, das Ziel dieser Lektion ist, dass Du Dir 1 bis maximal 3 „gewisse Etwas“ aussuchst bzw. überlegst:

  1. Trennlinien / -grafiken
  2. Hintergründe
  3. Kreative Titel/Untertitel
  4. Icons
  5. Illustrationen & Grafiken
  6. Buttons & Links (Design & Animationen bzw. Hover Effekte)
  7. Bilder „Effekte“


Die Umsetzung folgt dann im nächsten Modul 2.

Schau mir über die Schultern


Ich habe mir für meine Website 2 gewisse Etwas ausgewählt:

Einmal „#3: Kreative Titel/Untertitel“, bei dem ich meine Titel mit meiner Branding Farbe so halb hinterlege/unterstreiche. Hier ein Beispiel:



Ausserdem möchte ich dann mein Hero Image mit „#1: Trennlinien / -grafiken“ kombinieren. Also dass mein Hero Image dann unten so einen Wellen-Effekt/Übergang hat:



Die Umsetzung von Beidem zeige ich dann im nächsten Modul 2 🙂

Michael Brütsch

Webdesigner & WordPress Experte: Ich kreiere WordPress Websites, die Google liebt (aka Suchmaschinenoptimierung / SEO).

Schreibe einen Kommentar