Ohne klare Struktur deiner Website kommst du nicht weiter. In diesem Artikel geht es um den Wireframe, den du mit Hilfe einer Übung leicht ausarbeiten kannst. Dafür brauchst du nur Papier und Stift. Bleibe dran und mache einen Schritt näher an deine zukünftige Webpräsenz.
Websites sollten nicht mit Informationen überflutet sein. Wenn auf der Hauptseite alles steht, was für den Webnutzer potentiell nützlich sein könnte, braucht der Webnutzer viel Zeit, um das zu finden, was er wirklich sucht. Du hast maximal 2-3 Sekunden, um die Webbesucher zu überzeugen, bei dir zu bleiben. Deswegen ist es wichtig, die entscheidenden Themenblöcke und Elemente zu definieren, die die Webnutzer brauchen. Dabei hilft dir das Wireframing.
Was ist ein Wireframe?
Ein Wireframe ist ein sehr einfaches Abbild eines Designs. Es beinhaltet die Themenblöcke einer Website, die Informationsstruktur und eine Beschreibung der User-Interaktionen. Er ist ein schwarz-weißer Entwurf deiner zukünftigen Seite. Damit du dich auf das Wesentliche konzentrieren kannst, sollte dein Wireframe schlicht gehalten werden.
Dieser Entwurf beantwortet folgende Fragen:
Warum sind sie da?
Wo befinden sie sich?
Welche Elemente werden auf meiner Website vorhanden sein?
Wie funktionieren sie?
Beim Wireframe geht es an erster Stelle um Konzeption und nicht um Design.
Webnutzer haben Erwartungen an deine Website
Eine gute Website sollte das Leben von Webnutzern einfacher machen. Der Webnutzer möchte eine Antwort auf seine Frage finden. Deswegen gibt er im Suchfeld die Anfrage ein und erwartet ein ganz bestimmtes Ergebnis zu sehen. Seine Erwartungen, wie eine Seite aussehen soll, beruhen auf seinen persönlichen Erfahrungen, die er schon bei anderen Websites gesammelt hat. Deine Webnutzer sollten intuitiv verstehen, wo sie sich befinden, was die Website macht und wie sie noch dies oder jenes machen können.
Wenn ein Mensch eine Lupe sieht, geht er davon aus, dass wenn er sie anklickt, ein Suchfeld erscheint.
Ein blau unterstrichenes Wort weist auf einen Link hin. Aus diesem Grund solltest du auf blaue Unterstriche als einfache Hervorhebung von Wörtern verzichten.
Der Webnutzer bemerkt so etwas. Wenn er sie auf neuen Seiten sieht, fühlt er sich wohl, denn er weiß, was auf ihn zukommt. Bei der Erstellung des Wireframes behalte immer im Hinterkopf, dass die Informationsarchitektur deiner Website eine große Rolle spielt.
Erstellung des Wireframes
Vorab: Du solltest nicht vergessen, dass die Website gleichzeitig zwei Ziele erfüllen soll. Als erstes geht es darum, dass sie die Probleme der Webnutzer löst und die Antworten auf die gesuchten Fragen gibt. Auf der anderen Seite ist es wichtig, dass du damit deine Ziele erreichst, die du dir bei der Planung der Website gesetzt hast.
Wenn du Schwierigkeiten bei der Erstellung deines Wireframes hast und nicht weißt, welche Themenblöcke du wirklich brauchst, biete ich dir eine kleine Übung an, die dir dabei hilft.
Am besten ist es, wenn du eine Bespielperson aus deiner Zielgruppe im Kopf hast und du dir genau diesen Menschen vorstellst. Diese Persona gibt bei der Suchmaschine eine Anfrage ein und in den Suchergebnissen taucht deine Webseite auf. Welche Fragen entstehen im Kopf dieses Menschen, der zum erstem Mal bei dir ist?
Die wichtigste Frage richtet sich immer nach dem Kern der Website. Was bietet die Website? Worum geht es hier? Nachdem dein Webnutzer die Antwort auf diese Frage gefunden hat, klickt er entweder weiter oder geht.
Diese Fragen helfen dir, wichtige Themenblöcke für die Gliederung deiner Website zu identifizieren. Versuche im Anschluss diese Fragen in der Reihenfolge zu sortieren, in der sie dem Besucher am wahrscheinlichsten in den Sinn kommen. Auf jeden Fall sollten die drei folgende Fragen in deiner Liste auftauchen:
Was ist das?
Wie teuer ist es?
Wieso soll ich dir vertrauen?
Die Unzufriedenheit der Webnutzer mit den Antworten auf diese drei Fragen ist der häufigste Grund, warum sie eine Website wieder verlassen.
Reihenfolge der einzelnen Themenblöcken
Achte darauf, dass die Themenblöcke deiner Website die gleiche Ordnung haben, wie die potentiellen Fragen deiner Zielgruppe. Wenn du Schwierigkeiten bei der Ermittlung der Reihenfolge hast, halte dich an die folgende Regel.
Als erstes kommen die wichtigsten Themenblöcke, dann die weniger wichtigen und am Ende die, die am wenigsten von Bedeutung für dich und deine Kunden sind.
Wenn du dich gut in die Rolle des Webnutzers versetzt hast, wirst du leicht und schnell deine Gliederung finden. Nichtsdestotrotz kommt es oft vor, dass sich bei der Erstellung des Wireframes die Struktur mehrmals ändert. Mache dir keine Sorgen. Du nimmst neue Ideen oder Fragen auf und verzichtest vielleicht auf etwas, das doch nicht hundertprozentig zu dir passt.
Bei der Recherche hast du deine Konkurrenz analysiert und die Elemente herausgefiltert, die besonders häufig zu finden waren. Jetzt kannst du davon profitieren. Sie bieten dir bei der Ausarbeitung des Wireframes zusätzliche Unterstützung. Prüfe, ob die von der Konkurrenz häufig benutzten Elemente auch bei dir auftauchen. Als nächstes ordnest du die Fragen aus deiner Liste den potentiellen Elementen zu. Jedes Element sollte eine Frage beantworten. Jedes Element der Webseite soll eine Frage aus deiner Liste beantworten.
Wireframe Beispiel – Website von Sveta
Als letztes gehe ich auf die Webseite meiner Freundin Sveta, die du bestimmt schon aus früheren Beiträgen kennst. Am Anfang jeder Website steht eine Idee oder auch ein Konzept. Svetas Konzeption beruht auf der Idee, Familienfotografie als zentrales Element einzubinden. Sie zeigt mit Hilfe der Anwendungsszenarien, aus welchen Gründen man diese Leistung bei ihr bucht und wie man davon profitiert.
Familienfotografie ist das, was Sveta als Fotografin von ihrer Konkurrenz unterscheidet. Sveta fotografiert sehr gut große Familien und hat mehrere Fortbildungskurse dazu absolviert. Dies muss sie bei der Erstellung ihres Wireframes hervorheben. Sie macht Familienfotografie zu ihrem persönlichen Unterschiedsmerkmal, zu einem Vorteil gegenüber den anderen. Nichtsdestotrotz bietet sie auch die anderen Fotoshootings weiter an.
Schauen wir an, welche Fragen bei potentiellen Kunden von Sveta entstehen können.
| Frage | Themenblock |
| Worum geht es hier? | Der erste Screen |
| Welche Fotoshootings? | Arten des Fotoschootings |
| Warum soll ich sie buchen? | Spezialisierung Familienfotografin |
| Wie teuer sind ihre Leistungen? | Preise |
| Was sagen die Kunden über sie? | Erfahrungsberichte |
| Wie kann ich sie kontaktieren? | Kontaktmöglichkeiten |
Richtig gut ist, dass in diesen Fragen die drei auftauchen, die bei der Entscheidung, ob der Webnutzer bleibt oder geht, eine Rolle spielen. Diese Fragen kann Sveta mit Hilfe von Themenblöcken ihrer zukünftigen Seite beantworten. Sie ordnet diese jeweils den passenden Antworten auf die gestellten Fragen zu.
Zum Vergleich waren bei der Konkurrenz folgende Elementen zu finden: ein Bild oder eine Bildergalerie auf dem ersten Screen, Information über sich, Kundenmeinungen und Aufzählungen der möglichen Shootings. Diese sind auch bei Sveta zu finden.
Elementen deiner Website
Themenblöcke geben dir jetzt einen Überblick darüber, welche Informationen auf deiner Website zu finden sein müssen. Es ist aber nicht alles, was du brauchst, um ein Wireframe zu erstellen. Jede Website besteht zusätzlich aus Elementen. Diese können sich im Header, in der Sidebar, im Bereich für den Hauptcontent oder im Footer befinden.
Zum Header gehören oft Logo, Kontaktinformationen, CTA-Button oder ein Suchfeld.
Im Bereich für den Hauptcontent kannst du zum Beispiel die Beschreibung deines Produkts, ein Portfolio, Blogeinträge, Karten, Feedbacks, Fotos oder auch Videos finden.
Eine Sidebar wird immer seltener bei der Gestaltung von Websites in Anspruch genommen. Dies bedeutet aber nicht unbedingt, dass du sie nicht brauchst. Es hängt vom Zweck deiner Website ab. In der Sidebar kann man die Elemente finden, die Links auf die soziale Netzwerke aufweisen oder ein Feld zum Login. Eine Sidebar wird weniger genutzt, denn in diesem Teil erwarten Menschen mittlerweile oft Werbeinhalte und deswegen wird dieser Bereich häufig ignoriert. Bei der Darstellung auf den kleinen Bildschirmen mobiler Endgeräte schränkt eine Sidebar zusätzlich den Sichtbereich ein.
Als letztes kommt der Footer. Hier sind häufig zusätzliche Navigationselemente, Logos, Copyright oder Bankdaten zu finden.
Wie zeichne ich ein Wireframe?
Sveta hat eine Reihenfolge ihres Wireframes bei der Erstellung ihrer Website herausgearbeitet. Sie beschäftigt sich jetzt mit der Frage, was sie damit weiter tun soll.
Ein Wireframe kann sie in jedem Programm erstellen, mit dem sie malen kann. Sie braucht keine spezielle Kenntnisse von professionellen Programmen, die Webdesigner dafür nutzen.
Die einfachste und preiswerteste Lösung ist, ein Blatt Papier zu nehmen und darauf eine Gliederung zu skizzieren. Diese hast sie davor mit Hilfe der potentiellen Fragen und Analyse der Konkurrenz ausgearbeitet.
Überschriften und Text
Alle Überschriften und der Haupttext werden durch Linien unterschiedlicher Länge dargestellt. Ein Wireframe sollte nicht auf viele Details eingehen. Aus diesem Grund werden keine Wörter und Buchstaben benutzt. Statt eines Logos nutzt man eine kurze durchgehende Linie. Überschriften zeichnet man als dicke Linie in der entsprechenden Größe. Fließtexte bestehen aus mehrere Linien gleicher Breite.
Bilder und Videos
Bilder werden durch ein Viereck mit zwei überkreuzenden Linien dargestellt. Wenn das Bild groß ist und über die ganze Breite der Webseite geht, wird es auch entsprechend dargestellt. Videos werden als Vierecke mit einem Dreieck in der Mitte dargestellt.
Icons und Buttons
Sie werden vereinfacht dargestellt. Man muss aber darauf zu achten, dass die Form erhalten bleibt.
Umsetzung
Du weißt nun, welche Elemente auf deiner Website zu finden sein sollten. Außerdem kennst du ihre Reihenfolge und bist mit den wichtigsten Hilfsmitteln vertraut. Du kannst nun mit der Erstellung deines Wireframes loslegen. Nimm Papier und Stift.
Ein Wireframe auf dem Papier ist die billigste und einfachste Möglichkeit, deine Idee umzusetzen. Deine Linien müssen nicht mit einem Lineal gezeichnet werden, aber sie sollten annähernd gerade sein. Zeichne dein Wireframe nicht so groß. Es reicht, wenn du ein DIN-A4-Blatt nimmst. Die Breite des Fensters sollte etwa 5-6 cm betragen, damit die Felder noch Platz für deine Kommentare haben.
Dein Wireframe muss nicht professionell aussehen. An erster Stelle kann man daraus die Struktur der zukünftigen Seite ableiten und das ist der Hauptgrund, warum ich diesem Thema so viel Aufmerksamkeit gewidmet habe. Vergiss nicht, dass ein Wireframe nur ein Entwurf deiner zukünftigen Website ist. Es hilft, die großen Fehler zu vermeiden, die sich auf die Struktur und dementsprechend auf den Inhalt deiner Seite auswirken.
Checkliste für dein Wireframe
Du kannst dein Wireframe zusätzlich prüfen, wenn du die folgenden Punkte durchgehst und schaust, ob deine zukünftige Website diese Fragen beantwortet.
Navigationsfragen:
Wo befinde ich mich?
Worauf kann ich klicken?
Wohin soll ich klicken, damit ich mein Ziel schneller erreiche?
Inhaltliche Fragen:
Welchen Wert bekomme ich als Nutzer?
Welche Probleme der Nutzer werden durch meine Website behoben?
Zusätzliche Fragen:
Kann ich dir vertrauen?
Was ist bei dir besser als bei der Konkurrenz?
Wie teuer ist es?
Welche Einschränkungen gibt es? Was machst du nicht?
Unter welchen Bedingungen findet der Deal statt?
Was bekommt der Webnutzer?
Warum sollte und wie kann der Webnutzer dich weiterempfehlen?
Deine Webseite sollte alle Navigations- und einige inhaltliche Fragen beantworten. Aus diesem Grund sollten auf deiner Website folgenden Elemente auf jeden Fall zu finden sein: Logo, Überschrift und Beschreibung deines Produkts. Die Beschreibung sollte auf das Problem der Webnutzer eingehen. Links zu Produkterklärungen sollten den Nutzer dorthin führen, um dein Produkt besser kennenzulernen. Ein CTA-Button lenkt die Webnutzer und beantwortet damit die Frage, wohin soll ich klicken, um mein Ziel schneller zu erreichen.
Fazit
Wie du siehst, ist das Erstellen eines Wireframes und somit einer Struktur für deine Website gar nicht so schwer. In weiteren Beiträgen beschäftigen wir uns gemeinsam mit dem eigentlichen Webdesign und gehen dabei explizit auf die Gestaltung von Svetas Website ein. Es wird spannend. Bleibt daran.
