Wireframe
Der erste Schritt im Design einer Webseite ist das Erstellen eines so genannten Wireframes.
Basierend auf den Inhalten, die deine Webseite zeigen soll, ist der Wireframe ein
Konzept zur Anordnung einzelner Designelemente.
Durch die Anordnung der verschiedenen Objekte wird der Nutzer durch deine Webseite geleitet
und nächste Schritte werden für ihn möglichst leicht und offensichtlich gemacht.
Damit ist der Wireframe ein wichtiger Teil des UX-Design, welches die Nutzererfahrung (engl. User Experience)
optimiert. Ein guter Wireframe erhöht die Wahrscheinlichkeit, dass Nutzer sich lange und gerne auf
deiner Webseite aufhalten.
Als Beispiel ist ein Ausschnitt des Wireframes dieser Webseite zu sehen.
Assets
Nachdem mit einem guten Wireframe das grundlegende Layout erstellt wurde,
gibt es einen weiteren wichtigen Schritt bevor das Design beginnen kann:
Die Webseite braucht eindeutige Merkmale, die sie von anderen Designs abhebt und Individualität garantiert.
Im Design nennt man dies die Assets der Webseite. Dazu zählen Farbwahl, Schriftart und Logo, aber
auch feinere Details wie die Art der gewählten Icons, konsistente Buttons und vieles mehr.
An dieser Stelle können kleine Verbesserungen eine große Auswirkung darauf haben, wie hoch der
Wiedererkennungswert deiner Webseite ist.
Exemplarisch das Design eines Button Elements in unterschiedlichen Zuständen.
Design
Basierend auf einem Fundament aus Wireframe und Assets, kann im letzten Schritt das tatäschliche Design erfolgen.
Einzelne Elemente werden kreiert, mit Details versehen, aneinander und an den allgemeinen Stil der Webseite angepasst.
Die Anordnung der Elemente wird finalisiert. Hierbei spielt auch der Platz zwischen den einzelnen Elementen,
der Weißraum, eine wichtige Rolle.
Ebenfalls in diesem Schritt wird ein responsive Design erstellt, sprich die Webseite wird für die unterschiedlichen
Endgeräte mit ihren verschiedenen Bildschirmgrößen optimiert.
Am Ende entsteht ein Prototyp, der oftmals mit ersten interaktiven Features versehen ist und
z.B. simuliert, welche Funktion die Hyperlinks der Webseite später haben werden.
Anbei ist ein solcher Prototyp für diese Webseite vereinfacht dargestellt.