WordPress Webdesign

Webdesign mit WordPress

Die eigne WordPress Website soll ein möglichst einzigartiges Webdesign erhalten. Viele Websites die mit WordPress erstellt wurden, sehen jedoch sehr ähnlich aus. Da rund 25% aller Websites weltweit auf WordPress laufen und vier große „Fertig-Themes“ (Enfold, Avada, DIVI und Jupiter) den Großteil der verwendeten Designs stellen, gibt es zwangsläufig Überschneidungen beim Webdesign vieler WordPress-Seiten. Hier zeigen wir Alternativen auf, wie Sie das Webdesign für Ihre WordPress-Seite einzigartig werden lassen.

Ein eigenes WordPress-Webdesign durch Grafiker erstellen lassen

Der Weg über einen echten Designer/Grafiker ist zweifelsohne, der hochwertigste Weg um ein einzigartiges Webdesign für die eigene WordPress-Seite zu erhalten. Gute Grafiker erzeugen hochwertig aussehende Designs, die Ihre WordPress Website aus dem Meer der Mitbewerber hervorheben.

Das Format in dem das Design am Ende ausgeliefert wird basiert meist auf Photoshop, Sketch oder InDesign. Mit diesen Rohdateien, bzw. dem eigentlichen Webdesign, erhält der WordPress Entwickler nun eine exakte Vorgabe, nach der er Ihr WordPress Theme erstellen kann. Dieses Vorgehen empfiehlt sich für alle Unternehmen, die einen Styleguide bzw. ein Corporate Design einhalten müssen. Außerdem empfiehlt es sich für umfangreiche Websites, die mehr als 30 Unterseiten aufweisen oder Mehrsprachigkeit anbieten. Denn das Einpflegen von neuem Content und auch die Pflege bestehender Inhalte sind mit einem eigenen Design/WordPress-Theme wesentlich effizienter umsetzbar. Gerade bei mehrsprachigen Websites oder auch wenn mehrere Mitarbeiter mit dem Erstellen von Content beschäftigt sind, kann man nicht mit Pagebuilder-Lösungen arbeiten. Die Einhaltung eines einheitlichen Designs auf allen Unterseiten ist mit solchen Fertiglösungen nahezu unmöglich.

Vor- und Nachteile beim WordPress Webdesign mit einem professionellen Designer- und Entwicklungsteam

Nachteile

  • Planung und Abstimmung mit allen Beteiligten ist im Vorfeld nötig
  • Beispiel-Inhalte, Texte, Bilder etc. müssen im Vorfeld gestellt werden
  • Die Website-Struktur muss im Vorfeld bestimmt werden
  • Inhalte können erst eingepflegt werden, wenn das Theme bzw. einzelne Templates fertig programmiert sind

Vorteile

  • Es wird ein einzigartiges WordPress-Webdesign erstellt
  • Das Webdesign hebt sich deutlich von der Masse ab
  • Die Website lädt in der Regel schneller
  • Das Backend hat genau die Funktionen, die das Unternehmen benötigt
  • Neue Inhalte können auch von Laien erstellt werden
  • Skalierbare Erstellung neuer Inhalte
  • Inhalte sehen auf mobilen Endgeräten immer gleich aus
  • Wenig Aufwand für Updates und Wartung
  • Kein Risiko durch fremdentwickelte Themes und Updateroutinen

Der Weg zum eigenen WordPress Webdesign über fertige Multipurpose-Themes

Der scheinbar einfachere Weg geht über ein sog. Multipurpose-Theme. Hier ist das Webdesign der WordPress Seite bereits vorgegeben, bzw. kann auf das eigene Unternehmen angepasst werden. So lässt sich z.B. bei jedem Hersteller aus Dutzenden Vorlagen ein auf das eigene Unternehmen passendes Design auswählen. Anschließend modifiziert man das Theme auf die eignene Wünsche bezügl. Farbschema, Schriftarten und sonstige Feinheiten hin.

Vor- und Nachteile beim Erstellen von Webdesigns mit WordPress Multipurpose Themes

Nachteile

  • Man ist beschränkt in den Anpassungsmöglichkeiten
  • Das Webdesign ist abhängig vom WordPress-Theme-Hersteller
  • Man ist möglichen Änderungen am Theme ausgeliefert
  • Multipurpose-Themes laden in der Regel langsamer
  • Die mobile Darstellung muss auf jeder Unterseite angepasst werden
  • Das Erstellen von Inhalten ist ggf. umständlich
  • Das Erstellen von Inhalten ist nicht skalierbar

Vorteile

  • Jeder Laie kann einen Pagebuilder bedienen und Inhalte erstellen
  • Günstige Bereitstellung, da keine Programmierung nötig
  • Lediglich Kosten für eine Jahreslizenz
  • Man kann sofort nach der Installation mit dem Erstellen von Inhalten beginnen

Generelles zum Thema Webdesign

Webdesign ist ein weitläufiger Begriff, der sowohl das Website erstellen selbst, als auch die Erstellung von grafischen Vorlagen, beispielsweise für das Erstellen eines WordPress Themes umfasst. Der Weg zum eigenen WordPress Webdesign ist in mehrere Schritte unterteilt und hängt zum einen von den Anforderungen, zum anderen vom Budget ab.

Webdesign von Grund auf – Wireframes

Auf einer unserer Unterseiten beschreiben wir den Prozess, welchen wir für maßgeblich für den Erfolg einer Website halten. Hierbei ist das Webdesign ein Schritt von vielen anderen. Gutes und ansprechendes Webdesign lebt von strukturierter Vorarbeit und ist nur das Ergebnis der einzelnen Prozessschritte.

Wenn einmal die Inhalte bzw. Texte bestimmt sind, werden erste Entwürfe für die Website generiert. Hierbei spricht noch nicht von „Webdesign“ sondern von Mockups oder Wireframes. Wireframes sind Grobentwürfe – noch ganz ohne Bild und Farbe – welche die grundsätzliche Darstellung und Struktur verschiedener Seitentypen darstellen sollen. Sie sind quasi die Vorstufe zum eigentlichen Webdesign und dienen dazu, einen ersten gemeinsamen Nenner aller Beteiligten zu definieren.

Hierbei wird z.B. festgelegt, welche Seitentypen es geben soll, ob eine Sidebar integriert wird, wie viele Spalten der Footer erhält usw.

Diese Punkte werden vom Webdesigner skizziert und meist als PDF oder als „Klick-Dummy“ ausgeliefert.

Warum sollte man fürs Webdesign Wireframes nutzen?

Der Grund für diesen scheinbaren „Mehraufwand“ ist machen nicht ganz klar. Dies sind die wichtigsten Gründe, warum man Wireframes fürs Webdesign nutzen sollte:

Webdesign Wireframes, um das generelle Layout der Website zu visualisieren

Ein Bild sagt mehr als 1000 Worte. Alle Spezifikationsdokumente einer zukünftigen Website zu lesen, ist zeitaufwendig, und es ist ein Wunder, wenn dies alle Beteiligten tun. Mit einem Wireframe können alle Beteiligten sehen, wie das zukünftige Webdesign, bzw. die Struktur der Website aussehen wird. Sie können uns helfen, unsere Ideen zu organisieren und zu teilen und Missverständnisse zu vermeiden. Wireframes dienen dazu, das allgemeine Layout zu demonstrieren und kümmern sich noch nicht um Farbe oder Typografie.

Webdesign Wireframes, um Zeit und Geld zu sparen

Mit einem Wireframe in der Hand erhalten wir eine viel bessere Vorstellung vom Erscheinungsbild der künftigen Website. Wireframing kann uns während des Entwicklungsprozesses Zeit sparen und auch Nacharbeiten vermeiden. Ein Wireframe kann innerhalb von Teams schnell geteilt und kommentiert werden, und wir können laufend Änderungen daran vornehmen, so dass wir sehen können, was in Echtzeit getan wird. Zeit ist Geld. Ob Konzeption, Design oder Entwicklung – Zeit sparen bedeutet auch Ressourcen sparen. Einer der Hauptgründe für das Wireframing des endgültigen Webdesigns ist die Einsparung von Zeit. Daher wird er in der Regel mit billigeren und einfacheren Technologien entwickelt als die, die im Endprodukt verwendet werden.

[Beispielbild eines Wireframes]

Webdesign Stufe 2 – Mockups

Während Wireframes dazu da sind, die Struktur der Inhalte, der Navigation und der sonstigen Elemente darzustellen, sind Mockups für die Vorschau der späteren Design-Aspekte da. Im Webdesign-Prozess veranschaulichen Mockups das Zusammenspiel von Farben, Bildern und Typografie. Erst nachdem mit allen Beteiligten eine Einigung über die grundsätzliche Struktur des Webdesigns erzielt wurde, diskutiert man weiter über die Details. Mockups regeln also z.B. wichtige Details wie „Welche Schriftart nutzen wir für Überschriften und welche für Fließtexte?“ „Welche Farben werden an welcher Stelle eingesetzt?“ oder „Wie groß darf das Logo dargestellt werden?“.

All diese Fragen betreffen das Aussehen des Endresultats – nicht die Struktur an sich. Das Mockup stellt somit die letzte Stufe im Webdesign-Prozess dar, bevor es an die WordPress Programmierung geht. Ein Entwickler darf sich noch nicht an die Arbeit machen, solange das Webdesign nicht komplett abgestimmt ist. Andernfalls riskiert er wertvolle Ressourcen und letztlich bares Geld.

[Beispielbild eines Mockups]

Webdesign Stufe 3 – Die Programmierung

Nachdem 95% aller Fragen geklärt sind, darf sich der Programmierer endlich an die Arbeit machen. Er kennt nun die Struktur sämtlicher Seitentypen, weiß wie die Navigation, der Header und der Footer aufgebaut sind und kann sich nun um das eigentliche Theme und die einzelnen Seitenelemente machen. Er setzt die Vorgaben aus den Mockups detailgetreu und Pixelgenau in ein fertiges WordPress Theme um. Die fertige Website ist keinesfalls statisch sondern kann vom Kunden später im Loginbereich beliebig um Inhalte erweitert werden. Das fertige Theme stellt lediglich sicher, dass die Inhalt überall korrekt und stilgerecht dargestellt werden. Wurde das Webdesign korrekt programmiert, sehen neue Inhalte automatisch „gut aus“. Neue Texte, Artikel oder Unterseiten passen einfach ins Gesamtbild des Webdesigns, ohne dass der Mitarbeiter sich die eigenen Mitarbeiter um Abstände oder Farbgebung sorgen müssen.

Wichtigster Faktor beim Webdesign: Einhaltung der Prozesse

Wer beim Webdesign die Vorarbeit mit Wireframes vernachlässigt und gleich zu Beginn z.B. mit einem fertigen Multipurpose Theme beginnt, Inhalte zu erstellen, wird am Ende sehr viel Zeit und Geld verlieren. Der korrekte Prozess, wie oben beschrieben, spart Zeit, Geld und viele Nerven. Kein Schritt darf begonnen werden, ohne den vorherigen abgeschlossen zu haben. Sicher kommen bei der Programmierung oder beim Befüllen mit Content noch einige Fragen auf, die man zuvor nie bedacht hat. In der Regel sind dies jedoch wirklich kleine Details, die nur wenig Mehraufwand erfordern. Beispielsweise kommt es häufig vor, dass Inhalte auf mobilen Endgeräten überladen wirken oder von Nutzern nicht richtig wahrgenommen werden. Es muss dann geklärt werden, ob einzelne Inhalte beispielsweise ausgeblendet werden oder Ersatzinhalte für mobile Endgeräte erstellt werden. Keinesfalls jedoch diskutiert man nach obigem Prozess noch über die Höhe der Navigation, die Position des Logos oder über die Schriftarten.