Plane deine Webseite

Wie kannst du mit einer leeren Webseite beginnen und diese in die Webseite deiner Träume verwandeln? Ein Weg ist es, sofort mit dem Schreiben von HTML und CSS zu beginnen. Du änderst, während du die Seite entwickelst, entfernst Teile, die du nicht magst, fügst neue hinzu und ordnest die Elemente um.

Dies ist aber nicht unbedingt die beste Strategie, da du schlussendlich viel HTML und CSS schreibst und später wieder löschst. Du solltest stattdessen deine Webseite planen, bevor du sie entwickelst. Überlege dir, was sie enthalten soll, wie du die Elemente anordnen willst und sogar, wie sie gestaltet werden soll.

Als ersten Schritt der Planung macht man oft ein Brainstorming. Man überlegt sich alles, was man machen will. Du kannst dazu Mindmaps auf Papier zeichnen, Notizen in einem Dokument sammeln oder auch Post-It an eine Wand heften.

Du kannst ein Brainstorming alleine oder wenn du viele Ideen sammeln willst auch in einer Gruppe machen. Wenn du ein Brainstorming in einer Gruppe machst, sage immer "Ja, und...". Konzentriere dich bei euren Ideen darauf. was funktioniert und nicht, was eventuell nicht geht oder schwierig ist. Sammle alle Ideen, egal wie verrückt diese sind.

Nachdem du nun ganz viele Ideen gesammelt hast, entscheide, welche du weiter verwenden willst. Gib jenen Ideen den Vorrang, welche dir am besten gefallen (mach einen Stern daneben oder nimm sie in eine Liste auf) und verwirf die weniger guten Ideen oder hebe sie dir für später auf.

Als Nächstes machst du einen Entwurf deiner Webseite auf Papier. Dies ist eine Skizze der Bausteine deiner Webseite mit Schraffuren für die Texte und Kästen für die Steuerelemente.

Hier siehst du einen Papierentwurf für SF Quiche, eine Webapplikation, die ich einmal entwickeln möchte, um all die Restaurants, wo ich gerne Quiche esse, zu verwalten:

Da du nicht viel Zeit für einen Papierentwurf aufwenden musst, kannst du schnell neue Entwürfe machen, bis dir einer gefällt. Oder du machst mehrere ganz verschiedene Entwürfe oder Entwürfe für verschiedene Seiten deiner Webseite.

Nachdem du einen Entwurf gemacht hast, könntest du ihn durch Anwender testen lassen. Zeige ihn deinen Freunden, um herauszufinden, was sie zuerst anklicken würden oder wohin der Blick zuerst gezogen wird. Frage nach, was ihnen sonst noch auffällt.

Wenn dir die Entwürfe auf Papier gefallen, kannst du diese nun in sogenannte Wireframes (Drahtmodelle) umwandeln. Die sind nicht wirklich aus Draht, sondern digitale Zeichnungen deiner Webseite mit wenigen Strichen. Ein Wireframe deiner Webseite besteht aus einer Box für jedes Element und ganz wenig Text und ein paar Icons. Hier ein Beispiel eines Wireframes für die SF Quiche App.

Ich habe den Wireframe in dem beliebtem Tool Balsamiq gemacht. Du kannst aber auch Wireframes zeichnen, indem du Formen in Office-Programmen wie Powerpoint/Keynote, Zeichnungprogrammen wie Photoshop, Gimp oder InDesing oder mit anderen Online-Tools zeichnest. Viele der Wireframe Apps kosten Geld, beachte dies, bevor du dich für ein Tool entscheidest.

Nachdem du den Wireframe gezeichnet hast, kannst du nochmals eine Runde von User-Tests machen. In einigen Wireframe-Tools kannst du diese auch gleich an deine Freunde senden, und diese können sie gleich dort kommentieren. Es gibt auch Tools wie die InvisionApp, in denen man sogar interaktive Wireframes entwickeln kann, wo anklickbare Bereiche auf neue Seiten verlinken können.