Webdesign 101 – vom Wireframe zum Mockup

Webdesign vom Wireframe zum Mockup. | upcite Online-Marketing

Wir müssen unsere Homepage neu gestalten.“ Oder „Das Webdesign muss verbessert werden.“ Oder „Wir müssen unsere Homepage relaunchen.“ Wie auch immer der Auftrag lautet, für den Webdesigner geht es jetzt los. Wir haben unsere Auszubildende Denise befragt, wie sie an eine solche Aufgabe herangeht. Falls du auch mit dem Gedanken spielst, deine Webseite mit einem neuen Design zu erfrischen oder dir deine erste Webseite selbst gestalten möchtest, findest du hier Anregung:

Bevor du dich an den Rechner setzt, solltest du erst zum Bleistift greifen.

Zuerst muss eine visuelle Anleitung erstellt werden, auf die du immer wieder zurückgreifen kannst. Am besten fängst du mit schnellen Skizzen an, so bringst du deine ersten Ideen aufs Papier und wirst sie nicht verlieren. 

HIER EIN TIPP WIE DU DEINE WEBDESIGN-SKIZZEN FÜR VERSCHIEDENE GERÄTEGRÖSSEN AUFS PAPIER BRINGST:

Alles was du tun musst, ist ein DIN-A4-Blatt 3x in der Mitte falten. Nun hast du ein Handy-Format. Wenn du es einmal auseinander faltest, ergibt sich ein Tablet-Format und danach ein Desktop-Format. Versuche, so viele Skizzen wie möglich zu zeichnen! Wenn dir eine Skizze gefällt, versuche diese nun ordentlich als Wireframe zu zeichnen. Ein Wireframe hat noch keinen Inhalt wie zum Beispiel Bilder oder Texte. 

Bilder kannst du in Form von Vierecken und Kreisen mit einem „X“ in der Mitte darstellen. Für die Texte kannst du mit unterschiedlich dicken Strichen als Platzhalter arbeiten. Ein Wireframe stellt lediglich die Struktur des Layouts da. Du kannst zudem auch Anmerkungen zu Farben oder Typografie daneben schreiben.

Bei einem Wireframe fängst du mit der Mobilen Ansicht an (Mobile First!). Du beginnst mit den verbindlichen Vorgaben. Das kann zum Beispiel ein Logo sein. Die Leserichtung ist in unserem Kulturkreis von links oben nach rechts unten, deswegen ist es üblich, das Logo links oben zu platzieren, so dass der Betrachter direkt weiß, auf welcher Website er ist.

Danach gibst du der Navigation einen Platz. Dieser sollte sich auch nach der Zielgruppe der Website richten. Wenn du zum Beispiel weißt, dass die meisten in deiner Zielgruppe Linkshänder sind, ordnest du die Navigation auch links an, so ist der Weg für den Daumen kürzer und das verbessert die Usability. Versuche dies verständlich zu skizzieren, gerade wenn du mit mehreren Personen zusammenarbeitest, damit sie immer deinen Gedankengängen folgen können. 

Während du den Wireframe erstellst, wird die Frage aufkommen: Welche Farbe / Typografie / Formen soll ich für das Webdesign benutzen?
Genau deswegen solltest du dir zu deinem Wireframe direkt parallel einen Styleguide anlegen. Dieser beinhaltet hauptsächlich das Farbschema, die verschiedenen Schriftarten mit Größenangaben, an welche Formen du dich halten solltest und andere wesentliche Designelemente deiner Webseite. Dies ist eine Auflistung der wichtigsten Komponenten, auf die du immer zurückgreifen kannst, falls du zum Beispiel mal vergessen hast, wie der Farbcode lautet. 

Während du an deinem Projekt arbeitest, habe immer die Datei mit dem Styleguide offen. So kannst du ganz leicht nachgucken und rauskopieren. Dieser Schritt kann je nach Auftrag am Anfang kommen oder auch relativ am Ende, doch wichtig ist, dass dies ordentlich erfolgt, damit es bis zur Veröffentlichung aus einem Guss läuft! 

Webdesign - vom Wireframe zum ersten Mockup

So, jetzt wo du mit dem Grundgerüst deiner Website zufrieden bist, wäre es wichtig zu wissen, wie sie Digital aussieht. Ein Mockup ist die Lösung!

Ein Mockup sieht wie ein Screenshot aus. Es ist bis ins kleinste Detail dargestellt. Ob du dies erst auf Papier darstellen möchtest oder direkt digital (Bspw. in einem Programm wie Adobe Illustrator), ist dir überlassen. Wenn du anschließend einen genauen Plan hast, wie die Website aussehen soll, hol dir Feedback! Deine Kollegen oder Freunde sehen den Entwurf aus einem ganz anderen Licht. Dadurch könntest du deine Website enorm verbessern.

Zudem solltest du dich zwischendurch immer wieder vergewissern, ob du das umsetzten kannst, was du geplant hast. Denn der Arbeitsaufwand für die Programmierung ist direkt abhängig von deiner Gestaltung. 

Und dann steht das Design deiner Webseite, Homepage oder Website.

Natürlich ist der Arbeitsaufwand viel größer als hier beschrieben. Eine Website zu erstellen erfordert Geduld, Skills und mitunter auch Teamarbeit. Deswegen hab ich mich auch bei upcite beworben, weil ich weiß, dass ich diese Eigenschaften hier super erweitern kann! 

Ich hoffe, euch hat diese Einführung in das Thema Webdesign/Websitegestaltung gefallen und dient euch vielleicht irgendwann als roter Faden!

Ein Beitrag von:

Denise

Denise

Auszubildende Mediengestalterin

Scroll to Top