7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Workflow

Skizzieren: Wie kann ein einfacher Stift und Papier Ihr Webdesign transformieren?

Scroll to top
Read Time: 14 mins
This post is part of a series called Let’s Talk About Creativity.
Don’t Squelch Your Creativity With the Constraints of Possibility
Readers' Poll: How do You Combat Designer's Block?

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Wir verbringen einen Großteil unserer Zeit vor einem Monitor. Höchstwahrscheinlich haben wir mehr als einen Computer, ganz zu schweigen von iPhones, Grafiktabletts und all den anderen moderne Teufeleien, die in unsere Schreibtische eindringen. Wir sind alle Teil der Generation, die eine Maus benötigt, um ein Album mit den Familienfotos (auf Wiedersehen, liebe Familienalben, deren Seiten vergilben werden) und Facebook zu durchsuchen, um einem Freund Geburtstagswünsche zu senden. 20 Beispiele für großartige, von "Skizzen" inspirierte Websites enthalten!

In der Mitte dieses digitalen Zeitalters sind die besten Verbündeten eines Webdesigners gängige Werkzeuge, die Sie mit dem Wechselgeld unter Ihren Sofakissen kaufen können. Ich spreche davon, Stift, Bleistift und Papier zu einem Teil des kreativen Prozesses zu machen, den andere "nicht digitale" Designer seit Ewigkeiten verwenden: Skizzieren.

Mit diesem Artikel werden wir ein Argument behandeln, das sicherlich viele von Ihnen im Herzen haben werden: Wir werden in der Tat sehen, wie das Skizzieren uns helfen kann, die Ideen zu ordnen, ein effektives Layout zu entwerfen und - warum nicht - dem Theme eine frische und originelle Note zu geben.

Skizzieren als Teil des Planungsprozesses

Stellen Sie sich dieses Szenario vor: Wir haben gerade ein anstrengendes Briefing mit unserem Kunden abgeschlossen und jetzt ist es an der Zeit, die Ideen neu zu ordnen. Wir kennen die Vorlieben und Bedürfnisse unserer Kunden. Auf dieser Basis sollten wir in der Lage sein, das Layout festzulegen, das wir entwerfen müssen. Das Problem ist die Menge an Informationen, die wir berücksichtigen müssen! Wir haben definiert, dass wir auf der Homepage einen Schieberegler und eine sichtbare Handlungsaufforderung einfügen müssen, die zu einem Kontakt einlädt. Die Website hat sieben Seiten und wir müssen auch die neuesten Nachrichten auf der Homepage einfügen usw.

An dieser Stelle versichere ich Ihnen, dass das Öffnen von Photoshop mit dem Anspruch, ein effektives Layout zu erstellen, nutzlos ist. Ohne einen Plan für das, was Sie im Detail zeichnen müssen, werden Sie blockiert und gezwungen, im Wesentlichen ohne ausreichende Voraussicht zu entwerfen, um intelligente Entscheidungen zu treffen. Dies bedeutet oft später mehr Arbeit, um zu beheben, was man beim ersten Mal mit ein wenig skizzieren hätte richtig machen können.

Das Skizzieren bietet Webdesignern etwas Einzigartiges... es hilft uns, große Informationsmengen in überschaubare Teile zu organisieren, um die wir herum entwerfen können.

Wenn Sie stattdessen das Glück haben, Konzepte und Ideen in einem Design zu verstoffwechseln, werden Sie höchstwahrscheinlich etwas Wichtiges vergessen, sodass Sie das Layout später erneut in die Hand nehmen müssen. Und Sie wissen wahrscheinlich auch, dass es Layouts gibt, die selbst bei einer kleinen Änderung vollständig geändert werden und ihre kommunikative und ästhetische Wirksamkeit verlieren… ein wirklich frustrierendes Ergebnis.

Ein paar Ratschläge, wie Sie vorgehen sollen, ohne den Kopf zu verlieren? Holen Sie sich Stift und Papier...

  1. Markieren Sie die Schlagwörter, die das Unternehmen auszeichnen müssen und die Sie während der Projektphase vor Augen haben möchten, damit Sie grafisch darstellen müssen, um nicht den Fokus auf die Wünsche zu verlieren. Vermeiden Sie komplizierte Sätze und Konzepte, seien Sie organisch: Je unmittelbarer Sie sind, desto schneller kann Ihr Verstand die Informationen schnell und einfach verarbeiten.
  2. Notieren Sie die für die Entwurfsphase nützlichen Informationen immer schematisch, möglicherweise als Liste. Sie müssen nur die Informationen und Konzepte auf Papier aufzeichnen, die Sie nach dem Öffnen des Grafikprogramms benötigen.
  3. Teilen Sie die Informationen in Abschnitte auf, damit jede Phrase so einfach wie möglich ist. Wenn Sie das Layout der Startseite noch gestalten müssen, machen Sie sich keine Notizen zu den Inhalten, die auf der Kontaktseite enthalten sein sollen: Vermeiden Sie Verwirrung und Ablenkung. Notieren Sie sich die Informationen auf verschiedenen Seiten Ihres Notizbuchs, damit Sie sich jeweils auf einen einzelnen Schritt konzentrieren können.

Diese erste Phase des Skizzierens betrifft die schematische und einfache Ausarbeitung der Informationen. Sie denken wahrscheinlich, dass all diese Präzision und Dispziplin nichts mit Kreativität und Fantasie zu tun haben und möchten einen Szenenwechsel? Okay, gehen wir zum nächsten Schritt über.

Skizzieren als Teil des kreativen Prozesses

Wir sagten, dass das Skizzieren ein kreativer Prozess ist, aber was bedeutet dies in der Praxis?

Wir können das Skizzieren als ein „mittleres Land“ zwischen den Informationen in unserem Besitz und dem Layout betrachten, das wir am Ende planen werden. In diesem feindlichen und magischen Gebiet finden wir Farben, Schriftarten, Kästchen, Ideen, Inspirationen, Texturen, Bilder, Empfindungen, Zweifel… und vieles mehr. Es ist nutzlos zu sagen, dass es mitten in all dem leicht ist, verwirrt zu sein und die richtige Idee zu finden, die Idee, die funktioniert und die uns stolz macht, Designer zu sein.

Ich denke, dass es nichts Irritierenderes gibt, sich vor einem leeren Blatt wiederzufinden und auf Inspiration zu warten, die vielleicht aus dem Nirgendwo kommt, um hässliche Layouts zu erstellen (und wenn Sie, wie ich, wirklich Glück haben, klinken sich die Kollegen ein, um Ihnen zu sagen, dass Ihre Arbeit schlecht ist).

Eines meiner eigenen Skizzenbücher... wir werden später darauf zurückkommen.

Persönlich habe ich einige schwierige Zeiten mit einigen Kunden verbracht: Ich hatte keine Inspiration und schämte mich für meine graphischen Vorschläge. Ich verbrachte Stunden damit, Galerien zu betrachten, und fühlte mich noch deprimierter, weil es so schien, als ob jeder in der Lage war, schöne Layouts zu erstellen. Die einzige Person, die nicht in der Lage war, zwei Rechtecke auf nette Weise zusammenzusetzen, war ich. In meinem Fall hat mir der Bleistift den Druck genommen.

Geben Sie dem kreativen Prozess auf Papier den Startschuss, und lassen Sie Ihrer Fantasie freien Lauf, damit Sie spontaner und anregender arbeiten können.

Vor allem, wenn das Projekt, an dem Sie arbeiten, riesig ist und viele technische Details hat, kann die erste Phase sicherlich die Kastration für den kreativen Fluss sein, ohne schon über die schwächende Angst "zu scheitern" zu sprechen, die viele Designer haben: sie haben den Wunsch die Arbeit schnell und gut schaffen, sie bleiben oft vor dem Monitor gelähmt und können die Ideen nicht neu ordnen und in die richtige Richtung lenken.

Bevor Sie mit der Arbeit an einem Grafikprogramm beginnen, besorgen Sie sich daher Stift und Papier und… skizzieren Sie! Kritzeln Sie, notieren Sie sich ein paar Ideen, beginnen Sie, eine Art abstraktes Design zu verfolgen, um sich vertraut zu machen und Ihre Intuition zu befreien. Anschließend analysieren Sie Ihre Ideen. Lassen Sie jetzt einfach los und vermeiden Sie Logik und Rationalität. Sie helfen Ihnen in dieser Phase nicht weiter.

Skizzieren Sie das Layout, machen Sie sich ein paar Notizen, löschen Sie alles und beginnen Sie von Anfang an: Während dieser Arbeit arbeitet Ihr Geist schnell und frenetisch. Notieren Sie sich also alles, bevor diese intuitive Phase weg geht! Sie werden feststellen, dass es angenehm und entspannend ist, Ihren Ideen völlige Freiheit zu geben.

Fehler machen... absichtlich

Die erste Idee wird selten die Richtige sein, seien Sie bereit, dies zu akzeptieren. Das Skizzieren hilft Ihnen dabei, sich zu entsperren und verschiedene grafische Möglichkeiten zu nutzen, die für Sie sofort und leichtfertig geeignet sein könnten. Das bedeutet aber nicht, dass Sie in dieser Phase keine Fehler begehen. Die positive Sache ist, dass Sie, selbst wenn Sie in dieser Phase Fehler machen, das Blatt immer zerreißen, den Stift spitzen und mit einem neuen Blatt von vorn beginnen können. Ein mit Photoshop erstelltes Layout wegzuwerfen, nur weil Sie erkannt haben, dass es nicht die beste Lösung für Ihren Fall ist, ist ohne Zweifel demotivierend.

Skizze, kein Wireframe

In diesem Fall rate ich Ihnen, das Skizzieren nicht mit dem Erstellen eines Wireframes zu verwechseln: Wir sprechen über zwei verschiedene Dinge, auch wenn ich sehe, dass das Argument etwas verwirrend ist. Vor ein paar Tagen sage ein Webdesigner zu mir, und ich zitiere wörtlich: „Ah, Sie benutzen Stift und Papier? Ich mache alles online" und er erwähne eine Website, auf der Modelle mit mathematischer Präzision und vollständiger Kontrolle über Farben und Typografie erstellt werden können.

Nun, das ist kein Skizzieren, das ist eine ganz andere Sache. Wenn Sie mit der Maus auf einige Schaltflächen klicken, um einige Rechtecke anzuzeigen, können Sie Ihren Ideen keine Form geben und Ihren kreativen Fluss freisetzen. Versuchen Sie, mir zu glauben. Mit dieser Aussage bezweifle ich nicht die Nützlichkeit eines guten Wireframes, ich möchte nur die Unterschiede zwischen diesen beiden Ansätzen unterstreichen.

Umarme das Chaos

Packen Sie Ihr Verlangen nach Präzision, Lineal und Kompass weg! In dieser Phase gibt es keinen Raum für Ordnung und Genauigkeit. Beschränken Sie den kreativen Fluss also nicht, indem Sie sich auf Ränder und Räume beschränken. Sie werden später darüber nachdenken. Machen Sie sich auch keine Sorgen, wenn Sie als Künstler nicht besonders talentiert sind und Ihre Fähigkeit erlaubt Ihnen kaum, einen Bleistift zu halten: Skizzieren hilft uns Ideen neu zu ordnen, nicht um begabte Künstler zu formen.

In diesem Zusammenhang müssen wir hinzufügen, dass selbst wenn das Skizzieren als freies Ausdrucksmittel für Vorstellungskraft und Kreativität neben Ihren grafischen Fähigkeiten geboren wurde, dieses aber nicht bedeutet, dass die Skizze in gewisser Weise auch keinen künstlerischen Wert hat. Mal sehen, wovon ich spreche.

Skizzieren als Teil des Designprozesses

Die Tendenz vieler Webdesigner zum Skizzieren hat den Anstoß zu einem echten Grafikstil gegeben, der an die ästhetischen Aspekte des Skizzierens erinnert: Wir haben Pinsel, die  Spontanität und Leichtigkeit nachahmen, ohne über die Vielzahl von Schriften in in handgeschriebenem Stil im Web zu sprechen.  Dank dieser Ressourcen ist das Erstellen eines Layouts im Skizzenstil heute wirklich einfach, aber Designs, die diesen Grafikstil verwenden, haben normalerweise einen Hauch von Originalität, der sie ansprechend und ungewöhnlich macht.

Der Skizzenstil wird häufig auf Websites von Freiberuflern oder Kommunikations-/Designagenturen verwendet, die dieses Konzept grafisch übertragen möchten, nur weil er mit einer Aktivität verbunden ist, die vielen Kreativen gemeinsam ist. Auf jeden Fall kann selbst die Kombination einiger Skizzenelemente zu einer traditionelleren Grafik ansonsten gewöhnlichen Designs eine neue Perspektive geben.

Lassen Sie uns sehen, wie einige Websites diesen Stil auf effektive und originelle Weise verwendet haben und wie dies die Ästhetik und Effektivität ihrer Layouts beeinflusst hat.

Kunal Chhajer

http://www.kunalchhajer.com/

Die Seite des Webdesigners Kunal Chhajer spiegelt genau das Konzept des Skizzenstils wider. Die Grafik ist leicht und angenehm. Sie wird auf originelle Weise durch einige Designs bereichert, die das Layout einzigartig machen. Der Stil wird auch durch die Verwendung einer handgeschriebenen Schriftart im Navigationsmenü aufgerufen. Alle diese Details verleihen dem Design die Kreativität, die ein Designer auf seiner persönlichen Website zum Ausdruck bringen möchte.

Creative mit einem K. 

http://www.creativewithak.com/

In der Creative with a K-Site werden häufig Skizzen und Kritzeleien verwendet, um die „kreative Natur“ der Site deutlich zu machen. In diesem Fall macht selbst die so untypische Besonderheit des Layouts die Site besonders und ungewöhnlich, auch wenn es schwierig ist, sie zu konsultieren.

Lega-Lega

http://www.lega-lega.com/

Die Website Lega-Lega ist ein Online-Shop für Shirts mit etwas ungewöhnlichen Drucken und richtet sich definitiv an einen jungen Markt. Das Hinzufügen einiger Skizzendetails verleiht der Site einen kreativen und frechen Schnitt.

Beavory

http://beavory.com/

Beavory ist die Seite/der Blog von Karen Mack, israelische Illustratorin. Der Stil ihrer Website basiert auf einem Stil, der auf ausgesprochene und originelle Weise an ihre kreative Natur erinnert. Jedes Detail, von der Struktur des Layouts auf der Grundlage unregelmäßiger Linien - als ob sie mit einem Filzstift gezeichnet wären - bis zu den Symbolen der sozialen Netzwerke zeichnet einen effektiven Skizzenstil nach.

Bowtie

http://bowtieperiod.com/

Bowtie ist ein digitales Studio, das sich entschlossen hat, sich wirklich kreativ im Web zu präsentieren. Die Animationen der Site zusammen mit niedlichen, ungewöhnlichen Zeichnungen machen das Layout attraktiv und stark extravagant. Sie nennen sich „kreativ“ und verwenden dazu Elemente im Skizzenstil.

MakoMako

http://www.makomako.cz/home/

Das Layout der Band MakoMako ist vollständig im Skizzenstil erstellt, so dass die gleiche Struktur der Seite auf einem Blatt Papier mit unregelmäßigen Linien basiert, und auf der Homepage, als Teil des Designs, finden wir neben den üblichen auf Skizzen und handgeschriebenen Schriften basierenden Details einen Bleistift. Ein merkwürdiger und sehr ungewöhnlicher Look für eine Band.

Stan The Snowman

http://stanthesnowman.com/

Jetzt, wo es Sommer ist, verschwindet ein Großteil des Charmes, aber die grafische Wirksamkeit der Website Stan the Snowman steht außer Frage. In diesem Fall verleiht das Hinzufügen von stilisierten Bildern und einer kalligraphischen Schrift dem Layout einen spontanen, spielerischen und informellen Stil. Und es zeichnet das Konzept der Aktivität nach, das auf dem Schreiben von Grußkarten basiert.

Greenaway Pro

http://www.greenawaypro.co.uk/

Die Festival-Website Greenaway Pro 2011 kombiniert auf besondere und attraktive Weise den Sketch-Stil und den Grunge-Stil und verleiht dem Layout einen wirklich originellen Eindruck. Auch in diesem Fall drückt die Wahl dieses speziellen Grafikstils einen informellen, spontanen und exzentrischen Look aus. Sie ist perfekt für ein Festival, das sich mit Musik und Surfen beschäftigt, oder?

Julian Laval

http://www.julianlaval.com/

Julian ist ein weiterer freiberuflicher Webdesigner, der seine grafischen Fähigkeiten hervorheben wollte und die kommunikative Kraft der Skizze auf wirklich kreative Weise nutzte. Natürlich ist es nicht nur das, was seine Website zu etwas Besonderem macht, sondern auch die merkwürdige und absichtlich ungewöhnliche Natur seiner Zeichnungen. Wie bei vielen anderen Websites in diesem Stil sind die Farben auf eine Graustufe beschränkt, um die Abbildungen realistischer zu gestalten.

Little Creatures

https://www.littlecreatures.com.au/

Die Seite Little Creatures ist vollständig im Skizzenstil gestaltet und dank der Besonderheit ihrer Skizzen, die so wenig nachbearbeitet wurden, ist die Seite so attraktiv.

Le Carnet Ordinaire

http://carnetordinaire.com/

Carnet Ordinaire ist eine Website, die wie ein Tagebuch aussieht und Reisehinweise, Anmerkungen und persönliche Überlegungen hat. Mit der exzentrischen und intimen Natur der Site ist der Skizzenstil am besten geeignet: Das Layout basiert auf dem Bild eines geöffneten Moleskine, das durch Skizzen und stilisierte Zeichnungen ergänzt wird Sogar der Hintergrund wird origineller, indem einige Cartoons in verminderter Deckkraft und mit einem Bleistift eingefügt werden, der beiläufig in der Nähe des Moleskine verbleibt.

Wing Cheng

http://www.wingcheng.com/

Das Wing Cheng-Portfolio ist ein perfektes Beispiel für die neue Perspektive, die der Skizzenstil einem Layout verleihen kann. Die Seitenstruktur basiert auf einem angelehnten Moleskine, von dem die Seiten herunterfallen. Der Effekt wird dramatischer durch Schatten, die das Design umrahmen und die Verwendung von Kalligraphie-Schriftarten für jeden Inhalt des Layouts, von den Titeln der Projekte bis zu ihrer Beschreibung. Die eigentliche Besonderheit dieser Website besteht in der Darstellung der Projekte, die ebenfalls auf sehr kreative Weise mit Bleistift skizziert wurden.

Kuztown University

http://www.kutztown.edu/acad/commdes/faculty/

Die Kutztown University of Communications and Design könnte keinen besseren Weg finden, um sich effektiv an Kreative oder Aufstrebende zu wenden. Das Layout ist für eine akademische Realität sicherlich ungewöhnlich: der Hintergrund im Aquarellstil, die Seite, die auf einer Seite eines Buches basiert, die Abbildungen in Aquarellfarben, die besonderen Schriftarten des Navigationsmenüs… alles originelle und sicherlich ausdrucksstarke Details.

Dan Whittaker

http://www.dannwhittakercreative.com/

Dann Whittaker zeigt auf seiner Website einen Grafikstil, der vielen Webdesignern gemeinsam ist. Ein lässiger und spontaner Look, basierend auf einem Seitenbuchlayout und einer konsequenten Verwendung von Details im Skizzenstil. In der Anlage ist das Layout sehr effektiv und ästhetisch angenehm.

Chernobyl Heart

http://www.chernobylheart.org.uk/

Im Fall der Website von Tschernobyl Heart wird der Skizzenstil verwendet, um das Konzept der Kindheit grafisch hervorzuheben: Hier geht es um Kinder, und wir sehen es anhand einiger kleiner stilisierter Skizzen, die ihre Zeichenweise kopieren. Effektiv und angenehm.

Demain j’arrete

http://demainjarrete.stpo.fr

Der Skizzenstil eignet sich perfekt für die Präsentation in Webcomics und Illustrationen, sodass das Layout die Art der Website visuell und kreativ darstellt. Im Fall von Demain J'arrete hat die gesamte Site einen "Holzkohle"-Grafikstil, der vom Verlauf des Hintergrunds bis zu den unregelmäßigen Linien reicht, die das Layout und das Navigationsmenü enthalten.

Nature Shop

http://www.natureshop.co.nz/

Das Hinzufügen einiger Skizzendetails auf scheinbar beiläufige Weise kann einer minimalen und wesentlichen Site diesen besonderen kreativen Touch verleihen. Das Ergebnis, das auf der Website Nature Shop zu sehen ist, ist ganz angenehm.

Ready to Market

http://www.readytomarket.net/

Das Layout des Ready to Market ist ein Beispiel dafür, wie das Mischen eines modernen Stils mit einigen stilisierten und komischen Details zu einem neuen und anregenden Ergebnis führen kann.

Cou Cou Shop

http://www.coucoushop.ch/

Der Cou Cou Shop ist sehr schön und angenehm. Eines der besonderen Elemente des Layouts ist ohne Zweifel die Fußzeile, die eine stilisierte Landschaft der Schweiz zeigt. Auch die Skizze der Tasche aus verschiedenen Blickwinkeln ist ein sehr originelles Detail.

Upside Down-Town

http://upsidedowntown.me/

Bunt, ungewöhnlich und wunderlich: die Website des Lernzentrums Upside-Down Town investiert viel in die Originalität des Skizzenstils. Jedes Element des Layouts, besonders in der Überschrift, weist auf die visuelle Wirksamkeit von Zeichnungen, Skizzen und Farben hin, die die Kinderwelt grafisch und auf angenehme Weise hervorheben.

Schlussfolgerung

Wir haben gesehen, wie der Skizzierprozess uns helfen kann, Ideen auf kreative Weise zu verarbeiten, und gleichzeitig, wie einige Skizzen unseren Layouts eine andere und originelle Perspektive verleihen können. Machen Sie sich das Skizzieren zur Gewohnheit, wenn Sie an einem neuen Designprojekt zu arbeiten anfangen - und nicht nur dafür - es kann auch in anderen Bereichen sehr nützlich sein, wie z.B. beim Verfassen von Texten - und Sie werden mit der Zeit eine geistige Flexibilität entwickeln, die für Ihre Arbeit nützlich wird. Zum Schluss: Schalten Sie den Computer aus und holen Sie sich Papier und Stift!

Ich teile mit Ihnen zwei persönliche Skizzen: eine Skizze meines aktuellen Portfolios und die ersten Ideen, die ich für diesen Artikel während einer wirklich langweiligen Zugfahrt gemacht habe.

Jetzt sind Sie dran, ich möchte Ihre Skizzen sehen!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.