Wieso Stift und Papier noch keine Fremdwörter für Webdesigner sind

Ein paar einfache, schnelle Skizzen per Hand können bei den ersten Überlegungen zu einem neuen Webdesign wahre Wunder bewirken und meiner Ansicht nach jede Menge Zeit sparen. Natürlich ist man es als Webdesigner gewohnt, alle Arbeiten direkt am Computer zu erledigen. Und gerade deshalb finde ich es so sinnvoll, zu Beginn eines neuen Projekts den Computer auch einmal auszuschalten und die ersten Gedanken ganz simpel und old fashioned mit Papier und Stift festzuhalten.

Konzentration aufs Wesentliche

Da man sich so ganz allein auf das Designkonzept konzentrieren und nicht von zu vielen Inspirationen (anderen Webseiten-Designs etc.) abgelenkt wird, ist diese Vorgehensweise wirklich sehr effektiv. Bei der Arbeit am Computer wird man außerdem schnell dazu verleitet, schon zu Beginn eines neuen Designs zu sehr ins Detail zu gehen und zu früh Styling-Elemente (wie z.B. Farben) in das Design einzubringen.

Webdesign Konzeptskizzen

Bei der Arbeit auf dem Papier können z.B. schnell folgende, wichtige Punkte eines Webdesigns geklärt werden:

  • Wie soll die Aufteilung der Designelemente funktionieren? Wenn man konzentriert skizziert und so quasi auf dem Blatt denkt, kann man sehr schnell die passende Lösung für die Aufteilung aller Webseiten-Inhalte finden.
  • Wie soll die Navigation der Webseite funktionieren?
  • Wie viele Unterseiten benötigt man und sind diese für den Webseitenbesucher leicht zu erreichen?

Wenn man so eine gesamte Seite in mehreren kleinen Zeichnungen aufscribbelt, kann man außerdem auch schon die Gesamtwirkung der Seite erkennen und auf eine ausgewogene Verteilung bzw. Gewichtung der Inhalte achten. Schließlich sollen wichtige Inhalte dem Besucher sofort ins Auge fallen und Zusatz- oder Hintergrundinformationen sollten natürlich auch gleich als solche zu erkennen sein.

Webdesign Konzeptskizzen
Meine Konzeptskizze zur neuen Gestaltung der Yoko Themeseite hier auf dem Blog.

Man muss kein Zeichentalent sein!

Klasse ist, dass man bei konzeptionellen Skizzieren eigentlich überhaupt keine Begabung oder Übung im Zeichen benötigt, wie man an meinem Beispiel sieht ;-). Lediglich ein visuelles Vorstellungsvermögen ist wichtig, aber das hat man als Designer ja eigentlich sowieso.

Bei den Skizzen kommt es nämlich vielmehr darauf an, verschiedene Lösungen für ein Webseiten-Design oder auch ein Logo schnell durchdenken zu können und unterschiedliche Ansätze auszuprobieren. Meist bin ich selbst erstaunt, wie viel leichter und flüssiger die Umsetzung eines Designs klappt, wenn ich vorab einige Skizzen angelegt hatte.

Probiere das Scribbeln doch einfach einmal aus oder schreibe mir deine Lieblings-Methode, um die ersten Konzepte für ein neues Design zu durchdenken. Über dein Feedback und deine Tipps freue ich mich sehr!

Einer meiner Lieblingsartikel zum Thema Skizzieren als Webdesigner ist übrigens der Beitrag: Sketching: „The Visual Thinking Power Tool“ von Mike Rohde bei A List Apart.

23 Kommentare zu “Wieso Stift und Papier noch keine Fremdwörter für Webdesigner sind

  1. alandres

    nice article!

  2. Thomas Sausen

    Stimmt absolut. Ich nutze mittlerweile wieder bewußt Stift und Papier, auch damit ich nicht ständig vorm Mac/iPad hocke. Und wenn ich mit anderen diskutiere und es Brainstorming gibt, nutze ich sogar das hier: http://www.uistencils.com/collections/frontpage/products/browser-dry-erase-board-whiteboard manchmal auch beim Kunden, in der Ideenphase.

    • Hallo Thomas,

      vielen Dank für deinen Kommentar und natürlich den genialen Link-Tipp. Das Board ist ja super cool, so eins brauche ich auch unbedingt :-)

      Viele Grüße,
      Ellen

  3. Jörg Wagner

    Hallo Ellen,
    ich bin zwar kein professioneller Webdesigner, nehme aber für Mindmaps und ähnliche Dinge wieder mehr und mehr Bleistift und Papier her. Ich denke, dass es einfach schneller und freier ist, schnell was aufzuzeichnen, drüber zu malen, durchzustreichen, mit höherem Bleistiftdruck was zu verstärken…
    Und: Man kommuniziert mit dem Team wesentlich besser an einem Tisch mit einer „Tapete“ in der Mitte…

    Viele Grüsse
    Jörg

  4. Das mach ich schon länger so… hab dann immer Tonnenweise Zeichnungen und setz die irgendwie zusammen… außerdem kann ich mir auf Zeichnungen auch Notizen immer problemlos machen, was ich eventuell dazu googeln will oder wo ich eventuell das so ähnlich gesehen hab, ect.

    Wenn ich dann ein Layout hab, welches ich ins HTML quetsch kommt die Zeichung wieder zum Einsatz. Notier ich mir meistens die Breiten der einzelnen Felder, die Padding und Margins :D Eventuelle Farbcodes für Schriften, Schriftarten und Co. :D

  5. Ich zeichne eigentlich immer vor. Ohne am Rechner zu sitzen.

    Das lenkt, wie du selbst schreibst, auch ab. Man vergleicht andere Seiten, schmult mal hier, mal da und entfernt sich von der eigenen Grundidee. Daher Rechner aus!

    Selbst mein Logo ist in der U-Bahn entstanden. http://momworx.de/neues-logo

    Meist habe ich ein Moleskine und Bleistift dabei. Ich habe aber schon mit Kunden im Restaurant auf Servierten Designs entworfen :-)

    Ideen lassen sich mit Stift und Papier schnell erfassen. Hier und da mal was hingescribblelt, fertig.

    Die Kreativität und die Ideen fließen direkt vom Kopf, zur Hand aufs Papier.

    • Jupp, dass ist der Grund überhaupt, weswegen ich ab jetzt auch nur noch skizziere bevor ich mich an die Hauptarbeit mache. Hab nämlich selbst die Erfahrung gemacht, dass man sonst eher einen Clon einer anderen Webseite baut. :D

  6. für ui und layoutentwicklung habe ich immer einen stapel papier unter der tastatur liegen, auch wenn zwischen drin irgendwelche ideen kommen für was cooles, einfach ne skizze machen und wieder unter die tastatur legen.
    und wie schon von chrissy geschrieben lassen sich auf den scribbles auch wunderbar farbcodes, pixel und dergleichen zu notieren ;)

  7. Also ich benutze für meine Seitenentwürfe regelmäßig Pencil von Evolus: http://pencil.evolus.vn/ Den Kunden gefällt vor allem jenes Theme, dass aussieht wie handgekritzelt, aber dennoch lässt sich damit alles bündig und sauber ausrichten.

  8. Hallo!

    Mein Problem ist allerdings, das ich zu allem eine schnelle Skizze mache und diese aber dann auch Monate lang aufhebe…

    Nach ein zwei Monaten kommen so viele Skizzen zusammen und oft weiss ich dann schon nicht mehr was ich aus einer alten Skizze herauslesen soll!!!

    Mein Glück ist ja nur, das ich die Skizzen alle in einer Ablage sammle und so kein „Wildwuchs“ entsteht.

    Ich finde aber Skizzen einfach das beste um schnell Ideen festhalten zu können…

    MfG

    Csaba

  9. Stift und Block haben meinen Schreibtisch eigentlich nie verlassen. Inzwischen konzentriere ich mich persönlich zwar mehr auf den Quellcode als das Design, aber sollte es doch einmal dazu kommen das ich in die Verlegenheit gerate selbst kreativ sein zu müssen wird heute wie auch vor Jahren immer alles auf Papier entworfen und dann erst umgesetzt.

    Gleiches gilt dabei übrigens auch für den Code: Notizen, Ideen und auch geplante Änderungen werden zu Papier gebracht und nicht am PC getippt. Warum? Kann ich eigentlich gar nicht wirklich sagen. Ich persönlich finde es angenehmer und bequemer ;)

  10. Ein sehr guter Artikel dem ich definitiv zustimme. Es spart enorm viel Zeit und es ist wesentlich effizienter vorher genaue Überlegungen und grobe Scribbles auf dem Papier zu erstellen.

  11. Als Webdesigner sind Stift und Papier Alltagswerkzeuge, auch wenn kaum einer das glauben mag. Ich bin selber noch ein Freund von Skizzen, die im Vorfeld gemacht werden als wenn ich mich Stunden lang an ein Layout setze und es gestalte, hinterher aber nicht das wirklich wahre ist.

  12. Super Artikel. Ich finde in Zusammenarbeit mit dem Kunden sind Zeichnungen vor allem sehr hilfreich. Bei kolorierten farbigen entwürfen vom PC denken die Kunden meist, es sein schon mehr oder weniger fertig und scheuen sich Änderungen vorzunehmen. Oft wird sich dann an Details aufgehalten die in dieser Entwicklungsstufe gar nicht von Bedeutung sind. Die Hürde etwas zu ändern ist auf dem Papier viel geringer es ist viel klarer das es ein Entwurf ist, der geändert werden kann/soll.

  13. Hallo Ellen,

    ich bin ja begeisterter Leser deines Blogs und hätte ein Verbesserungsvorschlag für dein Yoko-Theme. Vielleicht wurde es ja auch schon korrigiert.
    Wenn ein Kommentator einen Link postet, wird dieser immer im gleichen Fenster geöffnet. Ich fände es besser, wenn es in einem Extra-Fenster (blank page) geöffnet wird. Es ist immer schade, wenn man dadurch den „roten Faden“ zu Euch verliert.

    Liebe Grüße aus Karlsruhe

  14. @alle:

    Vielen Dank für das tolle Feedback und die Tipps zum Artikel. Ich finde es klasse, dass es so viele Skizzen- und Scribble-Fans gibt :-) Und ich denke wirklich auch, dass Skizzieren und Konzepte auf dem Papier entwickeln nicht nur Spaß macht, sondern auch super hilfreich bei der kreativen Arbeit ist :-)

    Viele Grüße und ein schönes Wochenende,
    Ellen

  15. Oh ja, so Notizbücher sind schon gut! Ich nutze auch noch einen echten Papierkalender von X17 mit Notizbuch drin. Großartig! Besser als jedes iPhone!

  16. Ich mache mich eigentlich immer direkt daran in PSD erste Design Ideen zu suchen.
    Finde aber auch das man den PC mal beiseite legen sollte. Werde das beim nächsten Projekt mal probieren.

  17. Ich kritzle neuerdings auf selbst gemachten Schablonen. Schneide mir auch ab und an Kästchen aus und verschiebe die hin und her. http://spheric.de/so-entsteht-ein-neues-blog-konzept Für mich durchaus ein effektiver Weg. Weil Mindmaps etc. nur vom Wesentlichen ablenken.

  18. Ich mag das ich nehm mein DIN A4 zeichenbuch und skribbel meine ersten Ideen auf Papier. Das hat was gemütliches und zugleich was rustikales ;)

    Ich könnte das gleiche zwar auf dem iPad oder mit Stift und Photoshop, aber für mich gehört Papier und Bleistift einfach dazu. Liegt wahrscheinlich auch an der Zeit, als ich mit Web angefangen habe, waren Mockups Fremdwörter.

  19. Startseite meist Bierdeckel. Folgeseiten mitsamt Anmerkungen auf dem Block der Bedienung. Für uns gibt es ja keinen Feierabend… Und am nächsten Tag die wirren Gedankengänge zu ordnen kann auch Spaß machen. :-)

  20. Skizzen und Mindmaps auf Papier oder direkt auf dem Desktop – das ist wohl eher Geschmackssache. Ich persönlich empfinde das Verwenden von Papier und Bleistift für den ersten Entwurf als zu nostalgisch für das digitale Zeitalter. Allein die Vorstellung, anschließend einen Stapel Skizzen auf dem Arbeitstisch ins Reine bringen – von denen einige vielleicht schon mehr als ne Woche alt sind – Hölle! Ich habe die Erfahrung gemacht, dass es Sinnvoll ist und auch Spaß macht, den Auftraggeber in der ersten Entwurfsphase mit einzubeziehen – so kann man vermitteln, dass man anschließend quasi seine Idee umsetzt und das ist eine sehr gute Grundlage für die weitere Beziehung. Dafür eignet sich besonders gut (wie ich finde) Mockingbird – ein kostenloses, browserbasiertes Mockup-Tool, das sich grandios einfach und intuitiv bedienen lässt: http://www.gomockingbitd.com.
    Den eigentlichen Entwurfsprozess am Rechner starte ich dann mit Fireworks. Ich weiß, Photoshop ist in der Webdesignergemeinde sehr verbreitet, allerdings finde ich, ist PS für den Designprozess einer komplexen Website völlig unzureichend. In Fireworks lassen sich mehrere Seiten anlegen, Vektoren und Formen viel präziser anlegen und insgesamt bietet die Anwendung einfach mehr Komfort und Präzesion hinsichtlich des gewünschten Ausgabemediums – der Website.
    Fazit: Für Mußestunden auf dem Sofa mit Papier und Bleistift lieber ein anderes Motiv als eine Website;-)

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *