Wie designe ich eine Website? Wie bringe ich meine Ideen ein? Und wie kann ich sichergehen, dass ich bei dem Bau der Website keine elementaren Bausteine übersehe? In unserer mehrteiligen Kolumne erklären wir, welche 12 Schritte für eine erfolgreiche Websiterealisierung nötig sind.
Part I / Let’s Start
Für ein gutes Website-Layout müssen mehrere kleine Bausteine aufeinander aufgebaut werden, die dann ein Haus ergeben. Das Layout zeigt die Struktur, Anordnung und Gliederung der Website. Dazu gehört die Anordnung der Menüführung und wie die Seite im Allgemeinen aufgeteilt ist. Für verschiedene Branchen und Inhalte gibt es demnach unterschiedliche Layouts für bestimme Absichten, die je nach Art und Umfang variieren.
1. Definiere dein Ziel
Bevor es ans Handwerkliche geht, sollte man sich sicher sein wo man hin will und wie das Ergebnis im Endeffekt aussehen soll. Deshalb ist es wichtig zu wissen welche für eine Grundidee mit welchem Layout anpassbar und realisierbar ist. Hilfreich ist es hierbei über den Inhalt der Website, das Layout und die Funktionalität Gedanken zu machen.
2. Je einfacher, desto besser
Auf einer guten Website sollten relevante Informationen möglichst schnell und einfach auffindbar sein. Deshalb sollte man sich gute Gedanken darüber machen, wie man die Website strukturiert und Informationen relevant ordnet. Denn je einfacher Webdesign und Layout sind, desto leichter ist es für den User die Informationen zu finden, nach denen er sucht. Das Layout sollte den Inhalt hervorheben, der am Wichtigsten ist. Am Ende des Tages sollte der Benutzer mit der Website zufrieden sein.
3. Auswahl des Layouts
a) Featured Image – Bild im Mittelpunkt
Wie sagt man so schön? Ein Bild sagt mehr als tausend Worte! Ein Layout mit einem Featured Image bzw. einem Titelbild sollte in Betracht gezogen werden, wenn das Unternehmen oder das Projekt nicht viele Bilder im Angebot hat. Der Fokus wird so auf ein einziges Bild gelegt, während der andere Teil der Website simpel belassen wird. Des Weiteren können Webseiten mit viel Inhalt sich auf den Text fokussieren.
b) Featured Image mit Gitter
Dieses Layout ist ein Mix aus dem Featured-Image-Layout und einem Gitter-Layout. Hier wird eine Grafik als Titelbild den Großteil der Seite einnehmen. Anschließend wird der Rest der Seite in mehrere verschieden große Blöcke unterteilt, in denen dann unterschiedlicher Content eingefügt werden kann. So können verschiedene Produktbilder, Artikel oder andere Inhalte strukturiert und logisch platziert werden.
c) Gittermix
Wenn man viele verschiedene Arten von Content hat, sollte man dieses Layout verwenden. Es macht es möglich Videos, Texte, Bilder, Formulate und Artikel geordnet unter einen Hut zu bringen. Das Gittermix Layout kann verschiedene Quadrate, Rechtecke und freie Bereiche innerhalb eines Gitters beinhalten. Dies lässt die Website optisch trotzdem strukturiert aussehen und macht es dem Benutzer weiterhin einfach schnell einen guten Überblick zu bekommen.
d) Fixed Sidebar
Bei dem Fixed-Sidebar-Layout findet man die Navigationsleiste in der Seitenleiste mit weiterem Content. Wo man die Seitenleiste platziert ist dem Designer überlassen – rechts oder links. Hier kann man auch kreativ werden und verschiedene Elemente von anderen Layouts einarbeiten und so das Layout individualisieren.
Dieses Layout ist sehr zu empfehlen für Webseiten, die viele verschiedene Seiten hat, bei denen man den Überblick leicht verlieren kann. Da die Navigationsleiste stets auffindbar und im Vordergrund ist, kann der User sich daran orientieren und verirrt sich nicht auf der Website.
4. Responsive Webdesign
Heutzutage ist das Smartphone oder das Tablet nicht wegzudenken. Es gibt mehr Nutzer, die mobil auf Webseiten zugreifen, als vom Computer. Deshalb ist es wichtig, mitzuhalten und auf diversen Geräten präsent zu sein, möchte man eine Website erstellen lassen. Die Website sollte genauso gut auf einem iPhone aussehen wie auf einem iMac, damit jeder Nutzer einen guten Eindruck bekommen kann. Das Responsive Webdesign macht dies möglich und ist auch nicht schwer zu implementieren.
Die meisten Themes haben heutzutage automatisch ein Responsive Design, ansonsten kann ein guter Webdesigner den Code manuell verändern. Wichtig ist es hier die Website auf allen verschiedenen Geräten und Computern zu testen, bevor man mit der Website online geht.