Wie kann man seinem Team und auch seinem Kunden ein geplantes Projekt veranschaulichen? Hier möchte ich euch erklären wie Ihr Website-Projekte mit Wireframes visualiesieren könnt.
Jedes Projekt sollte mit der Konzeptionsphase beginnen, so natürlich auch ein Online-Projekt. Hier werden Ideen, Funktionen und Inhalte entwickelt. Wie erklärt man jedoch seinem Kunden und auch dem eigenem Team das Geplante am besten? Ein gutes und bewährtes Hilfsmittel sind "Wireframes" die das Veranschaulichen komplexer Sachverhalte erleichtern.
Ähnlich wie in der 3D-Produktion das Drahtgittermodell oder einem Mock-up in der Gestaltung stellen Wireframes als konzeptionelle Prototypen einer Website die verschiedenen Elemente abstrakt dar. Der Detailgrad des Wireframes kann je nach Projekt von sehr oberflächlich bis hin zu ausformulierten Texten und Funktionen reichen. Somit sind Wireframes gut geeignet, um sich bereits in einem frühen Projektstatus ein Bild der Funktionsweisen zu machen, das ganz ohne sich in Detail-und Geschmacksdiskussionen zu verlieren. Einen großen Vorteil haben von Hand gezeichnetet Wireframes denn so ist für den Betrachter sofort offensichtlich das dies kein Designvorschlag ist.
Erstellung von Wireframes:
Bevor man damit Beginnt ein Wireframe zu erstellen, sollte man sich ein genaues Bild von dem Projekt machen und alle seine wichtigen Gedanken sammeln - erst dann kann man beginnen seine Gedanken zu visualliesieren.
Am besten ist es mit dem Erstellen eines groben Rasters anzufangen. Wenn der grundlegende Auffbau geklärt ist werden nach und nach die Details in das Wireframe eingearbeitet. Man sollte jedoch darauf achten, eine einheitliche Darstellung beizubehalten. Wie detaliert das Wireframe sein sollte, hängt von dem Projekt ab und sollte auch mit dem Projektteam abgestimmt werden. Der Phantasie ist in einem Wireframe keine Grenze gesetzt. Jedoch gehen die Meinungen, inwieweit bestehende Elemente das Design beeinflussen, weit ausseinander. Man sollte auch darauf achten. keine echte Bilder und so weinig Farben wie möglich zu verwenden. Durch den Einsatz verschiedener Grautöne kann man z.B. die Gewichtigung verschiedener Elemente aufzeigen. Auch auf Effekte wie einen Farbverlauf oder Schlagschatten sollte man verzichten, damit der Wireframe unvollkommen aussieht und Laien ihn nicht mit dem zu erwartenden Design gleich setzen.
Es ist sinnvoll mit Stift und Papier zu arbeiten. Diese Methode stellt von vornherein klar, dass es sich nicht um ein Design handelt. Texte, Buttons und Bilder werden dabei so stark vereinfacht, dass man sich nicht mit den vielen Möglichkeiten der Programme aufhält, sondern sich auf die Organisation der Oberfläche konzentriert.
So könnte das Ergebniss aussehen:
An die Mods: Würde mich freuen wenn dieses Tutorial unter die Design Tutorials kommt
______________
WebDesign | Corporate Design | Redesign
