Illustrator CC für Webdesigner: Kernkonzepte

Grundprinzipien guten Designs verstehen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Das Video geht auf grundlegende Designprinzipien ein und vermittelt, dass hinter jedem Objekt oder Designelement eine Absicht stecken muss. Die Festlegung von Farbschemas ist ebenso wichtig wie die Definition von Schriftfamilien. Die Hinweise werden durch Beispiele abgerundet und mit der Empfehlung eines Style-Guides abgeschlossen.

Transkript

In diesem Video möchte ich ein wenig über grundlegende Design-Prinzipien sprechen, aber keine Angst, ich werde keine stundenlange Abhandlung über Designtechniken halten, sondern mich wirklich nur auf wenige Punkte konzentrieren. Die erste Regel, die ich immer befolge oder versuche zu befolgen, nennt sich KISS, Keep It Super Simple. Also mit anderen Worten, halte es so einfach wie möglich. Hierbei geht es darum, dass man sich Gedanken darüber macht, welches Element ist wirklich wichtig, um eine bestimmte Aussage zu erreichen, welches Objekt wähle ich links oder rechts, welche Farbe und ja wie groß muss das sein und mein persönlicher Favourite ist halt, dass man sich fragt, was ist überhaupt notwendig, um die Informationen, die ich... ja, um das Gefühl was ich erzeugen will, überhaupt zu erreichen. Darum geht es. Weiterhin wichtig ist die Verwendung eines einheitlich Farbschemas. Stellen Sie sich vor, Sie besuchen eine Website. Dann möchten Sie das Design und die Benutzerführung ja sehr schnell durchschauen und Sie würden wahrscheinlich genauso irritiert sein wie ich, wenn auf einer Seite Buttons in blau oder Schmuckelemente in grün erscheinen und auf der nächsten Seite, die Sie ansteuern wandelt sich die Farbe in pink oder grün, wird also komplett anders, also ist nicht nachvollziehbar. Natürlich darf man mit Farben arbeiten, aber es sollte ein Schema erkennbar sein und dabei hilft die Anlage von Farbpaletten, die konsequent über den gesamten Design-Entwurf eingehalten werden. Das Look and Feel, wie man so schön sagt, muss durchgängig erkennbar sein. Ein Aussehen, eine Benutzererfahrung, eine Aussage, das ist wirklich wichtig. Ebenso verhält es sich mit der Auswahl von Schriftarten. Alle Überschriften müssen gleich aussehen, alle Fließtexte identisch sein. Texte für Schaltflächen wechseln ebensowenig die Font-Familie, wie Beschriftungen oder Zitate. Vermeiden Sie also, zu zeigen, dass Sie wissen, wie viele unterschiedliche Schriftarten Sie installiert haben, sondern suchen Sie sich den passenden Font zu der Designaussage aus, der am besten Ihre Idee transportiert. Design ist wie ein Puzzle und jedes Detail, sei es ein Hintergrund, eine Headline oder eine Schaltfläche muss wie ein Puzzleteil nahtlos und stimmig ins Gesamtbild passen. Nur so ermöglichen Sie dem späteren Benutzer eine durchgängige und durchschaubar abgestimmte Nutzererfahrung. Selbst bei der Auswahl von Fotos und Bildern sollten Sie, wenn möglich auf eine vergleichbare Stimmung und Farbwahl achten. Vieles kann man auch nachträglich mit beispielsweise Photoshop einfärben. Kontraste sollten abgestimmt sein als auch die grundlegende Motivauswahl. Möchten Sie beispielsweise ein Design erstellen, das eher dunkel wirkt, dann arbeiten Sie ja mit dunklen Oberflächen, dunklen Farben, Bildern und Objekten oder auch mit starkem Schwarz-Weiß-Kontrast. Auch die Motivauswahl der Bilder ist wichtig. Sie müssen sicherstellen, dass Bilder den Inhalt ergänzen. Grafiken und Images sind nichts anderes als eine visuelle Form der Textergänzung und müssen absolut zum Inhalt passen. Ich habe im Folgenden einfach mal ein paar Beispiele herausgesucht, die mir persönlich aus Designsicht heraus sehr gut gefallen und diese zeige ich Ihnen mal. Ich habe hier den großen Nike Sport Hersteller und wechseln wir da mal auf die Seite hier von Deutschland Da sehen Sie, gibt es direkt erkennbar einen Trend, der Video in der Website zeigt Das ist möglich, da sich die Bandbreiten verbessert haben und ja wir auch ganz einfach von der Qualität her Bildschirme haben, wo es sich lohnt, ein Video anzuschauen. Aber viel wichtiger ist die Erkenntnis, dass wenn man auch scrollt, dass die Stile überall auf der Seite gleich bleiben. So gehe ich zum Beispiel mal jetzt auf Damen, dann bekomme ich hier wieder einen Aufbau der ähnlich ist, der auch wiedererkennbar ist, sowohl von der Motivwahl, also hier haben wir die gleiche Dame, die gerade eben zum Abschluss drauf zu sehen war, bis hin eben zum Aufbau der Struktur. Das ist also im Prinzip sehr schön gemacht. Schauen wir uns mal die nächste an. Nehmen wir mal eine Seite, die ich von der Bedienung her sehr schön finde. Die hat auch übrigens einen Preis bekommen, europäisch, und ja man sieht hier, dass das Ganze so ein bisschen technisch verspielt ist und wenn ich nun scrolle, also hier auf den nächsten Punkt klicke, dann bekomme ich hier angezeigt, was die alles machen, welche Märkte die bedienen und auch hier findet man in durchgängiges Design, das ist erkennbar. Und noch mal, es muss einem jetzt vielleicht nicht unbedingt gefallen, aber Bilder, die zum Beispiel zur Windtechnologie passen oder zur Luftfahrt oder zu Energie, die sollten natürlich vorhanden sein und nicht einfach irgendwie wahllos ausgewählte Bilder. Besonders schön auch hier, ganz einfach und übersichtlich haben wir hier mal eine eine Website, die wir gemacht haben für einen Oldtimer-Vermieter. Der bietet Autos für Hochzeiten und für Veranstaltungen an und auch hier sieht man, dass das Ganze durchgängig ist in Farbe, Schrift und, ja, Auswahl. Also auch wenn man auf die Links klicken würde, geht das Prinzip immer in dieser Richtung weiter und selbstverständlich sind diese Designs auch responsible, das heißt sie sind mit einem Finger oder mit einem Daumen navigierbar. Der Hauptpunkt bei der Steuerung ist natürlich hier die Fahrzeuganfrage. Darum geht es in dieser Seite und entsprechend ist das gesamte Design, das Layout darauf ausgelegt. Da sieht man auch da springt das Ganze bisschen anders, wie wir das eben in der mobilen Ansicht gesehen haben. Was ich ganz besonders gelungen finde, finde ich hier eine Website DangersOfFracking.com, die die Gefahren des Frackings beschreibt und ja diese Seite, die scrollt man quasi nach unten. Also ich bewege jetzt einfach mal das Rad an meiner Maus. Und Sie sehen, da ändert sich der Inhalt der Seite. Hier wird dann ein bisschen was über das Fracking beschrieben und dann geht's einfach weiter und dieser Regentropfen, das ist ja quasi meine Leitlinie durch das Design hindurch. Ich finde das äußerst gelungen, weil hier wirklich eine Geschichte erzählt wird und es einfach Spaß macht, zu schauen, was kommt als nächstes. Zwischendurch taucht dann wie hier zum Beispiel wieder Information auf als Text, aber immer sehr gleichmäßig und immer auf gleiche Art und Weise. Hier, da gehen wir weiter, jetzt verlassen wir die Straße und kommen in so ein Depot und da geht's dann auch weiter. Also wirklich eine sehr schöne Seite, die einfach Lust auf mehr macht. Und naja, wenn man sich mal das trockene Thema Fracking oder das dreckige Thema Fracking überlegt und sich das anschaut, was dann die Designer sich hier bei dieser Arbeit gedacht haben, ist das für meine Begriffe wirklich ein sehr gelungenes Design, was einer Richtlinie folgt und diese Richtlinie ist erkennbar und man kann dieser ganzen Sache auch wirklich folgen. Okay, was wir jetzt vielleicht nicht bei dem letzten Beispiel gesehen haben, aber bei den anderen Beispielen, das ist eine weiße Fläche, viel weiß oder viel Freifläche. Abschließend zu den gezeigten Beispielen möchte ich eben darauf noch hinweisen, dass auch der ungenutzte Raum wichtig ist und man diesen sehr gut nutzen kann. Weiße Flächen wirken zum Beispiel immer sehr edel und die perfekte Nutzung dieses weißen Raumes oder vielleicht auch dieses leeren Raumes ist ebenfalls ein sehr starkes stilistisches Mittel. Das funktioniert hervorragend auf großen Bildschirmen wohingegen Sie bei einem Smartphone sich eher fragen müssen, welche Objekte sind hier überhaupt vonnöten, damit der Benutzer noch sehr gut mit den Fingern navigieren kann, denn dort muss alles benutzerfreundlich sein, das bedeutet, es muss neben der Maus auch mit Stiften oder ja eben sogar mit den Fingern auswählbar und navigierbar sein. Als berührungsfreundliche Objekte bezeichne ich diese Elemente sehr gerne. Also diese Elemente brauchen mindestens eine Fläche von 45 x 45 Pixel, damit Benutzer sie auch als berührungsfreundlich empfinden und damit interagieren können. Bitte beachten Sie hier, dass ein entsprechendes Upscaling besonders wichtig ist, da sonst das Objekt so klein ist, dass man höchstens mit der Spitze des kleinen Fingers tippen kann. Webdesigns, die das heute nicht mehr berücksichtigen, nutze ich schlicht nicht mehr und Statistiken zeigen, dass auch viele andere Benutzer lieber zu anderen Seiten gehen, wenn es Alternativen gibt. Kein Mensch möchte heute mehr zoomen, um etwas lesen oder gar auswählen zu können. Damit Sie bei Ihrer Arbeit an all diese Punkte denken und das ist umso wichtiger, wenn Sie in Teams arbeiten, Empfiehlt es sich, eine Art Designrichtlinie oder eben einen Styleguide zu erstellen. Ein Styleguide ist eine Sammlung von eben diesen Vorschriften, die Sie bei jedem Inhalt Ihres Designs passend auswählen Eine Schrift ist dunkelgrau, ein Ding grün, eine Überschrift hat diese Farbe und ein Schmuckelement jene, verwendete Fotografien besitzen einen bestimmten Farbton oder es werden nur schwarz-weiß Grafiken verwendet, beziehungsweise die Ecken werden abgerundet und so weiter. All das sollte festgelegt sein und vor allen Dingen auch aktualisiert werden, wenn es später dann doch noch Änderungen gibt. Viele Unternehmen fordern auch so etwas als eine Art CI-Richtlinie oder Sie erhalten als Designer eine solche und müssen sich dann daran halten. Eine weitere Empfehlung ist die Beobachtung natürlich der großen im Bunde. Gehen Sie zu Websites von beispielsweise mal Microsoft, Apple, Nike und Co. Schauen Sie, wie machen die es und ich möchte dabei wichtig sagen, dass man nicht unbedingt alles nachmachen muss, was die großen machen, das ist auch nicht alles richtig. Aber sich Gedanken darüber zu machen, was ist der Grund warum macht das jemand, die sich auch wirklich mit Designern als Teams zusammensetzen. Warum löst jemand ein bestimmtes Webdesign auf diese und jene Art und Weise? Lesen Sie Fachzeitschriften, schauen Sie andere Websites an blättern Sie in Magazinen, also schlicht bleiben Sie auf dem Laufenden, studieren Sie diese Trends und versuchen Sie vor allem zu verstehen, was das Ziel dieser Designentwürfe ist. Was ist das Ziel, das man mit seinem Design erreichen möchte? Welche Botschaft soll transportiert werden? Welches Gefühl möchten Sie wecken?

Illustrator CC für Webdesigner: Kernkonzepte

Lernen Sie die grundlegenden Begriffe des Webdesigns kennen und konfigurieren Sie Illustrator für den teamfreundlichen Webdesign-Einsatz.

1 Std. 49 min (18 Videos)
Derzeit sind keine Feedbacks vorhanden...
Hersteller:
Exklusiv für Abo-Kunden
Erscheinungsdatum:31.05.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!