Die Zeichnung eines Künstlers, das Werk eines Haarstylisten, die Portraits einer Fotografin – es ist keine Überraschung, dass diese Arbeiten weit professioneller aussehen als die eigenen Kritzeleien, der selbstgemachte Dutt oder das schnell geschossene Selfie im Badezimmer. Gelten dann auch dieselben Regeln für Webseiten? Kann die eigene Jimdo-Seite niemals so gut aussehen, wie die Seite eines Webdesigners?

Nicht unbedingt. Mit ein bisschen Know-How und einigen Tricks könnt ihr Techniken professioneller Designer anwenden, sodass eure Webseite sich von „gut“ zu „wow!“ wandelt.

Was ist das Geheimnis? Ich gebe euch hier 10 Design-Tipps, die auch die Profis nutzen, um ihre Jimdo-Seiten zu bauen.


1. Sucht euch 1-2 Akzentfarben aus und haltet euch daran

Bei der Farbauswahl für eure Jimdo-Seite sind euch keine Grenzen gesetzt. Dennoch braucht ihr keine ausufernde Farbpalette, um gute Ergebnisse zu erzielen. Die meisten Designer suchen sich einfach ein bis zwei Farben aus und verwenden dieses Farbschema durch die ganze Webseite hindurch.

Wenn ihr euch professionell erstellte Webseiten anschaut seht ihr, dass sie oft nach einem bestimmten Schema aufgebaut sind: neutraler oder hauptsächlich weißer Hintergrund, dunkler Text und dann ein bis zwei Akzentfarben, die herausstechen.

Diese Jimdo-Seite hat das Prinzip perfekt umgesetzt hat:

Gute Stellen, um die Akzentfarbe(n) einzusetzen:

  • Überschriften
  • Links
  • Navigation
  • Buttons
  • Trennstriche

Nun stellt sich die Frage: Welche Farben nutzt ihr dafür am Besten? Das kann zum Beispiel eine Farbe sein, die ihr schon in eurem Logo oder Branding nutzt, oder sogar einfach eine Farbe, die ihr euch aus dem Hintergrundbild gezogen habt.

Wenn ihr euch für eine intensive Farbe entscheidet ist es wichtig, die anderen Farben eurer Webseite sehr minimalistisch und dezent zu halten – zum Beispiel Weiß, Schwarz oder Grau. Denn: Wenn ihr ein buntes Shirt tragt, kombiniert ihr das vermutlich auch mit einer schwarzen Hose oder einer Jeans, oder?

 

2. Wählt nicht mehr als 2-3 Schriftarten

Gute Designer wissen, wie man leserliche Schriftarten mit dekorativen und kreativen Schrifttypen ausgewogen kombiniert. Oft sieht man, dass sie eine verspielte und expressivere Schrift für die Überschriften und andere Akzent-Stellen wählen und für den Text dann zu einer einfachen Sans-Serif Schrift greifen, wie zum Beispiel Open Sans.

Manchmal wählen Designer auch einen dritten Font für die Navigation aus, aber auch diese Schriftart ist dann sehr dezent gehalten.

 

3. Investiert in ein professionelles Logo

Wenn es euch ernst damit ist, eure Webseite zu professionalisieren, ist das Logo ein guter Startpunkt. Es zeigt den Besuchern, dass ihr ein solides, etabliertes Geschäft habt und bildet die Basis für Farben und Fonts, die ihr auf eurer Webseite nutzt.

Ich empfehle euch, hier wirklich eine professionelle Lösung zu wählen, statt selbst etwas zu erstellen – es sei denn, ihr seid Designer.

Wenn ihr einen Designer dafür engagiert stellt ihr dadurch sicher, dass ihr eine kreative und qualitativ hochwertige Lösung bekommt. Euer Grafiker wird euch dann auch Versionen ohne Hintergrund und zusätzlich zur farbigen Version Varianten in Weiß, Schwarz oder Grau anbieten, damit ihr euer Logo für verschiedene Zwecke verwenden könnt. Das beste Beispiel ist unser Jimdo-Logo: Normalerweise ist es bunt, jedoch findet ihr es auch ab und zu in weiß oder dunkelgrau auf unserer Webseite und den Social Media Kanälen.

 

4. Gebt euren Inhalten Platz zum Atmen

Wenn ihr euch schon einmal etwas mit Grafik Design beschäftigt habt, habt ihr bestimmt schon den Begriff White Space (=Weißer Raum) gehört – und auch, wie wichtig dieser für gute Design-Ergebnisse ist. White Space bezieht sich dabei auf den Raum rund um eure Inhalte, wobei nicht zwingend eine weiße Fläche gemeint ist, sondern einfach nur leere Fläche – ohne Inhalte.

Das Prinzip dahinter lautet: Eure Webseite braucht Platz zum Atmen! Statt also die komplett verfügbare Fläche mit Bildern und Texten vollzustopfen, lasst ihr euren Inhalten Raum. Durch Abstände und viel Hintergrundfläche kommen sie besser zur Geltung.

Designer wissen, dass Webseiten mit viel White Space für Besucher deutlich einfacher zu lesen und zu bedienen sind. Die Seite wirkt einladend und offen und hilft den Betrachtern dabei, die für sie relevanten Informationen schneller zu finden. Weiterhin wirken diese Webseiten viel eleganter und vornehmer – ein bisschen so, als vergleiche man einen vollgeräumten Schnäppchen-Laden mit einer minimalistisch eingerichteten Designer-Boutique.

Diese Jimdo-Seite ist ein gutes Beispiele dafür, wie hochwertig die Nutzung von White Space auch eine Webseite mit farbigem Hintergrund wirken lässt:

Wie könnt ihr jetzt mehr White Space auf eurer bestehenden Webseite einsetzen? Eine gute Hilfe dabei sind die Spalten– und Abstands-Elemente. Mit letzteren schafft ihr vertikale Abstände zwischen den Inhalten. Um rechts uns links von einem Element etwas Raum zu schaffen, könnt ihr leere Spalten einfügen.

 

5. Quält eure Besucher nicht mit zu langen Texten

Wieviel Text sind Webseiten-Besucher eigentlich bereit, zu lesen? Die Antwort lautet leider: nicht viel. Die Aufmerksamkeitsspanne ist online sehr kurz und die Nutzer wollen die für sie wichtigen Informationen sofort präsentiert bekommen. Wenn sie das, was sie suchen, nicht auf Anhieb finden, werden sie eure Webseite verlassen und zur Konkurrenz gehen. Wenn also ein Besucher auf eure Jimdo-Seite kommt und vor einer regelrechten Text-Wand steht, denkt er sich: wow, diese Webseite durchzugehen wird anstrengend, dazu habe ich weder Zeit noch Lust.

Für mehr Licht im Text-Chaos geht ihr am besten einmal alle Texte durch. Priorisiert die Informationen und entfernt alles, das nicht wirklich essenziell ist. Könnt ihr eure Kernaussage auch in einem statt zwei Absätzen rüberbringen? Könnt ihr Unterseiten entfernen, sodass euer Menü übersichtlicher wird?

Wenn ihr all das entfernt habt, was nicht zwingend notwendig ist, kommt der nächste Schritt: eine neue Gliederung der übriggebliebenen Texte. Lockert sie mit Bildern und Überschriften auf und umgebt sie mit White Space. Überlegt, ob ihr große Text-Blöcke nicht auf ein Spalten-Element verteilen möchtet, sodass sie einfacher zu lesen sind. Ein gutes Beispiel hierfür sind Zeitungen, die ihre Texte nicht ohne Grund in Spalten arrangieren.

 

6. Peppt eure Seite mit Icons auf

Vorgefertigte Icons sind eine gute Möglichkeit, mehr visuelle Elemente auf eurer Webseite zu nutzen, ohne dafür direkt einen Grafik Designer beauftragen zu müssen.

Auf vielen professionell erstellten Webseiten findet ihr Icons. Sie lockern Texte auf, geben der Seite einen frischen Look und verstärken die Aussage von Text-Blöcken (dass eure Besucher vermutlich eher lesefaul sind, habe ich ja schon oben beschrieben).

Um auf eurer Seite eine ähnliche Wirkung wie Authea zu erzielen, braucht ihr natürlich erst einmal Icons. Im Internet findet ihr viele Seiten, die vorgefertigte Icons gratis zur Verfügung stellen. Oft könnt ihr sogar die Farben ändern, sodass sie perfekt zu eurer Jimdo-Seite passen! Eine gute Anlaufstelle dafür ist FlatIcon.

Wichtig ist es darauf zu achten, dass der Look der Icons mit dem eurer Seite harmoniert. Wünscht ihr euch hingegen etwas Individuelles, könnt ihr natürlich ebenfalls einen Grafik Designer engagieren.

Sobald ihr eure Icons habt, ladet ihr diese als Bild-Element auf eure Jimdo-Seite und verlinkt sie, falls nötig. Um sie nebeneinander anzeigen zu lassen, nutzt ihr einfach wieder das Spalten-Element.

 

7. Arrangiert eure Inhalte sorgfältig

Wenn ihr einen Laden hättet, würdet ihr die Auslage sorgfältig arrangieren, den Boden fegen, die Vorhänge glatt streichen. Ihr würdet alles so einrichten, dass ihr euren Kunden gegenüber professionell auftretet. Verhaltet euch genau so auf eurer Webseite! Webdesigner achten sehr darauf, dass alle Inhalte einer Webseite perfekt angeordnet sind.

Die Geheimwaffe beim Arrangieren ist hier definitiv wieder einmal das Spalten-Element. Nutzt es, um eure Inhalte nebeneinander auszurichten, ohne nur auf euer Augenmaß zählen zu müssen.

In vielen Beispielseiten dieses Blogposts seht ihr das Zusammenspiel von Icons, Texten und Spalten. Im unteren Beispiel hat der Seitenbetreiber drei Spalten erstellt. Jede Spalte beinhaltet ein Icon, das als Bild-Element hochgeladen wurde, eine kleine Überschrift darunter und anschließend ein Text-Element.

Ein weiteres Geheimnis guten Webdesigns: fürchtet euch nicht, euren Text so anzupassen, dass er genau in den vorgesehenen Bereich passt. Im obigen Beispiel haben alle Texte exakt dieselbe Länge und Zeilenanzahl. Feilt daher so lange an eurem Geschriebenen, bis alle Blöcke perfekt miteinander abschließen.

 

8. Nutzt gute Fotos und schneidet sie auf dieselbe Größe zu

Eure Fotos haben mitunter den größten Einfluss auf eurer Webseite. Hochwertige Fotos, die ihr geschickt einsetzt, könnten hier definitiv das Zünglein an der Waage sein.

Designer nutzen professionelle Fotografien, die dasselbe Farbkonzept und eine ähnlicheAtmosphäre haben. Diese schneiden sie dann auf dieselbe Größe und Proportionen zu, sodass der Look der Seite einheitlich bleibt. Dadurch sind alle Bilder gleich ausgerichtet, was wieder zum aufgeräumten und harmonischen Look eurer Jimdo-Seite beiträgt.

Um Fotos gleichmäßig zu arrangieren, nutzt ihr am Besten wieder unser Spalten-Element oder die Bildergalerie.

Wenn ihr Probleme damit habt, gute Fotos zu finden, könnt ihr auf Stockphoto-Börsen linzenzfreie Fotos finden. Bei Produktfotos hingegen lohnt es sich auf jeden Fall, in ein professionelles Shooting durch einen Fotografen zu investieren.

 

9. Entwickelt ein Konzept, das ihr auf jeder Unterseite nutzt

Wie ihr schon seht, taucht ein Gedanke in diesem Artikel besonders oft auf: der Gebrauch eines einheitlichen Konzeptes – seien es Farben, Schriften oder eine Art und Weise, eure Bilder zu arrangieren. Dieses Prinzip lässt sich auch auf den Aufbau der Unterseiten anwenden. Wenn ihr zum Beispiel eure Über mich-Seite mit einer großen Überschrift, einer Trennlinie und einem 20px-Spaltenelement aufbaut, stellt sicher, diesen roten Faden auf allen anderen Seiten durchzuziehen. Eure Webseite wirkt dadurch konsistent, durchdacht und hilft den Besuchern, alle Informationen schnell zu finden.

 

10. Wählt das richtige Hintergrundbild aus

Wir lieben die großformatigen Hintergrundbilder, die ihr so begeistert auf euren Jimdo-Seiten nutzt! Damit sie euer Design unterstützen und nicht stören: überlegt vorher, wie auf ihnen Seitentitel und Logo wirken. Wenn das Logo zum Beispiel mittig ausgerichtet ist macht es Sinn, den Fokus des Hintergrundbildes etwas seitlich anzusetzen, damit euer Logo das Hauptmotiv nicht verdeckt.

Im unteren Beispiel seht ihr, wie die Hochzeitsfotografin (und Jimdo-Mitarbeiterin!) Alina Atzler ein wunderschönes Bild ausgesucht hat, das perfekt zur zentrierten Ausrichtung ihres Logos passt.

Ihr könnt auch ein Foto hochladen, das ein bisschen abstrakter ist – zum Beispiel ein Landschafts-, Natur- oder Architekturbild. So stellt ihr sicher, dass zum Beispiel kein Gesicht verdeckt wird. Achtet auch unbedingt darauf, dass die Schrift noch gut lesbar ist, wenn ihr zum Beispiel den Inhaltsbereich leicht transparent stellt.

Wenn ihr euch professionelle Hilfe wünscht, könnt ihr zum Beispiel einen Jimdo Expert in eurer Nähe suchen. Das sind auf unser System spezialisierte Designer und Agenturen, die ein breites Angebot an Dienstleistungen rund um eure Webseite für euch haben.

Um den Artikel noch einmal zusammenzufassen, hier die wichtigsten Punkte: Haltet die Webseite schlicht, stopft sie nicht mit zu vielen Inhalten voll, lasst diesen wiederum viel Raum und verwendet ein konsistentes Design-Konzept..


Jetzt seid ihr dran: Habt ihr noch mehr Design-Tipps, die ich hier nicht aufgezählt habe? Dann erzählt sie mir und den anderen Jimdo-Nutzern im Kommentarbereich. Ich freue mich schon auf die Diskussion!