How-To

Digitale Zeichnungen: Schritt für Schritt zur perfekten Illustration

Der Chat-Anbieter Slack ist eines von vielen Unternehmen, die die Vorteile von Illustrationen erkannt haben und diese nutzen, um ihr Konzept zu visualisieren. (Screenshot: Slack)

Hinweis: Wir haben in diesem Artikel Provisions-Links verwendet und sie durch "*" gekennzeichnet. Erfolgt über diese Links eine Bestellung, erhält t3n.de eine Provision.

Illustrationen spielen im Webdesign eine wichtige Rolle. Damit sie aus der Masse der Webgrafiken herausstechen, braucht es ein gutes Konzept und die richtige Umsetzung. Eine Anleitung.

Wie lassen sich abstrakte oder sehr funktionale Konzepte sowie digitale Produkte richtig gut visualisieren? Mit Illustrationen! Denn mit Stockfotos stoßen Agenturen schnell an ihre Grenzen: Die richtigen Motive zu finden, ist oft schwierig bis unmöglich. Und selbst wenn Designer fündig werden, ist die Suche mühsam und sie müssen die Bilder dann auch noch einmal bearbeiten – schließlich soll sich die Bildsprache ins Corporate Design einfügen. Eigene ­Fotos helfen meist auch nicht weiter. Denn selbst einem professionellen Fotografen geht ein Shooting beispiels­weise zum Thema ­„Intuitives User-Interface“ nicht unbedingt leicht von der Hand.

Um digitale Produkte ansprechend darzustellen und ihre Vorteile hervorzuheben, eignen sich daher vor allem Illustra­tionen. Mit ihnen können Designer ihre Lösungen aus der Perspektive des Benutzers kommunizieren, statt nur technische ­Vorzüge zu präsentieren. Viele Unternehmen arbeiten mittlerweile mit einer illustrierten Bildsprache, wenn sie ihre Produkte und Konzepte veranschaulichen wollen. Der Chat-Anbieter Slack beispielsweise visualisiert seine Vision und sein Konzept mithilfe von Illustra­tionen auf seiner Startseite. Diese zeigen, wie Slack die Zusammenarbeit im Team unterstützt. Auch der Anbieter der Projektmanagement-Plattform Asana nutzt Illustrationen: In Kombination mit beschreibenden Texten füllen sie ansonsten leere Bereiche auf der Seite, geben den Nutzern Anregungen, was sie an der jeweiligen Stelle tun könnten und motivieren sie somit, bestimmte Funktionen anzuwenden. Die Plattform GitLab wiederum nutzt Illustrationen, um die Kommunikation mit den Nutzern persönlicher zu gestalten. Illustrative Elemente kommen hier zum Beispiel dann ins Spiel, wenn ein Filter keine Ergebnisse erzielt. So lässt sich der Frust der Benutzer mildern, wenn ihre Suche nicht erfolgreich ist. So viel zur Theorie. Doch wie sieht es in der Praxis aus?

Das Konzept entwickeln

Der erste Schritt hin zur passenden Illustration verlangt eigentlich kaum zeichnerisches Talent. Natürlich tun sich Menschen damit leichter, die gut und schnell skribbeln können. Doch es geht zu diesem Zeitpunkt nicht um ausgefeilte Zeichnungen oder einen realistischen Stil. Wichtig ist, dass Designer aufwendige ­Ideen und Konzepte leicht verständlich darstellen. „Aber ich kann doch gar nicht zeichnen“, ist daher kein Argument, um das Thema digitale Illustration auf die lange Bank zu schieben.

Vielmehr müssen Designer die Marke oder das Produkt genau verstehen: Wie lässt es sich gut präsentieren? Sollte eine Idee oder der Illustrationsstil eher verspielt, seriös, komfortabel, technisch oder innovativ sein? Die Antworten auf solche Fragen sind die besten ­Voraussetzungen für ein Konzept mit ­individuellem Stil und Wiedererkennungswert. Erst danach geht es an die ­eigentliche Umsetzung.

Das passende Werkzeug wählen

Bevor es nun an die Ausarbeitung geht, stellt sich noch eine entscheidende Frage: Welches Werkzeug ist das Richtige? Es gibt mittlerweile sehr viele Möglichkeiten. Am Ende geht es auch um die Vorlieben eines Kreativen – also darum, mit welchem Werkzeug er oder sie am besten zurechtkommt. Dennoch gibt es einige Tipps zu Werkzeugen, die sich in der Praxis bewährt haben:

iPad & Procreate

Die App Procreate ist in Kombination mit dem iPad sicherlich der Hipster unter den Illustratorenwerkzeugen. Procreate unterstützt die Arbeit von der Skizze bis zur fertigen Illustration. Das Interface ist sehr aufgeräumt, obwohl die Funktionen zahlreich sind. Designer können mit Ebenen, Masken, Gruppierungen, zahlreichen Pinseln und der sogenannten Quick-Shape-Funktion arbeiten. Dabei zeichnen sie einfach eine beliebige Form. Procreate interpretiert diese dann so, dass beispielsweise perfekte Kreise, Rechtecke oder andere Formen entstehen. Auf Instagram gibt es zahlreiche Videos, die zeigen, was sich mit einem Apple Pen und Procreate so alles zaubern lässt. Besondere Inspirationen sind bei spielsweise beim Illustrator Gal Shir aus Tel Aviv auf Instagram zu finden.

Grafik-Tablet & Affinity Designer

Wer ein Grafik-Tablet zur Hand hat, kann dieses natürlich auch nutzen. Eine empfehlenswerte Software dafür ist Affinity ­Designer*. Das Werkzeug arbeitet mit Vektoren, sodass Designer mit dem Pinselwerkzeug wunderbar geschmeidige Kurven zeichnen können. Destruktiv zu arbeiten, ist so kaum möglich. Kombinieren sie beispielsweise zwei Formen, so können sie diese danach immer noch einzeln bearbeiten – keine selbstverständliche Funktion bei einem Grafikprogramm. Außerdem können ­Illustratoren auch pixelbasiert vorgehen, etwa um Texturen hinzuzufügen. Darüber hinaus können sie die fertigen Arbeiten in die gängigsten Dateitypen – wie PSD, EPS, SVG, PDF JPEG oder PNG und so weiter – exportieren. Affinity Designer gibt es übrigens mittlerweile im App-Store auch für das iPad.

Maus und Tastatur & Figma oder Sketch

Auch mit den Interface-Design-Programmen Figma oder Sketch können Designer Illustrationen selbst erstellen. Der Vorteil ist, dass sie mit diesen Werkzeugen sehr gut modular statt ­destruktiv arbeiten können, was in diesem Fall ein absoluter Vorteil ist. Obwohl es viele gute Grafikprogramme gibt, kann Figma von den Funktionen her durchaus mithalten: Das Pfadwerkzeug und das Bearbeiten geometrischer Formen gehen hiermit leicht von der Hand.

Eine Skizze erstellen

Die ersten Vorlagen für die fertige Illustration sind die Skizzen. Sie können analog oder digital entstehen. Wer gleich mithilfe einer Software arbeitet, kann die einzelnen Skizzenelemente leichter verzerren, rotieren oder skalieren und hat damit einfach mehr Spielraum.

Skizze 1: Beim ersten Scribbeln geht es nicht um Schönheit, sondern darum, eine Idee verständlich darzustellen. In diesem Beispiel soll die Freude und Leichtigkeit am digitalen Illustrieren zum Ausdruck kommen. (Illustration: Livie Leontidis)

Skizze 1: Beim ersten Scribbeln geht es nicht um Schönheit, sondern darum, eine Idee verständlich darzustellen. In diesem Beispiel soll die Freude und Leichtigkeit am digitalen Illustrieren zum Ausdruck kommen. (Illustration: Livie Leontidis)

Viele Designer neigen bei diesem Arbeitsschritt dazu, gleich eine perfekte Skizze anfertigen zu wollen. Das kann dazu führen, dass gerade ungeübte Gestalter Angst vor dem weißen Blatt oder der weißen Arbeitsfläche entwickeln. Deshalb ist es wichtig, dass man sich nicht von den wunderschön ausgearbeiteten Skizzen abschrecken lässt, die schon an fast fertige Illustrationen ­erinnern. Es geht bei den Skizzen nicht um Schönheit, sondern um die Idee. Das Beispiel, das auf der folgenden Seite zu sehen ist [Skizze 1], soll etwa die Freude und Leichtigkeit am digitalen Illustrieren darstellen. Die Skizze ist übrigens in Mischief entstanden – ein schlankes Programm, das sich sehr gut für schnelle Scribbles ohne großen Schnickschnack eignet. Die fertige Zeichnung lässt sich anschließend einfach als Bild in Figma importieren.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung