UI Design Bootcamp, Woche 1: Komposition | Rob Sutcliffe | Skillshare

Playback-Geschwindigkeit


1.0x


  • 0.5x
  • 0.75x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

UI Design Bootcamp, Woche 1: Komposition

teacher avatar Rob Sutcliffe, UI Designer / Developer

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

    • 1.

      UI Bootcamp Einführung

      2:31

    • 2.

      Komposition

      6:34

    • 3.

      Ausdruck

      4:39

    • 4.

      Ausgeglichenheit

      3:44

    • 5.

      Kontraste

      6:26

    • 6.

      Formular

      4:30

    • 7.

      Hierarchie

      7:34

    • 8.

      Beziehungen

      3:18

    • 9.

      Ausrichtung

      6:56

    • 10.

      Sequenz und Pace

      5:06

    • 11.

      Zusammenfassung

      1:05

  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Jedes Niveau

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

971

Teilnehmer:innen

20

Projekte

Über diesen Kurs

Der entscheidende Aspekt für eine großartige Benutzererfahrung ist die Verwendung einer wunderschön gestalteten Benutzeroberfläche. Einige kleine Änderungen an deiner Ästhetik können den großen Einfluss oder die Erfahrung für deine Benutzer
haben.Wenn du auf einer Webanwendung gestaltet, triffst du Entscheidungen über Typografie, Farbe und Komposition. Dadurch werden Branding, Stil, Benutzerfreundlichkeit und Benutzerfreundlichkeit der Anwendung bewirkt. Du triffst diese Entscheidungen schon, aber bist dir ihrer Wirkung bewusst. Sehr dezenter Gebrauch von Typografie und Farbe kann genug Persönlichkeit haben, dass wir keine anderen Grafiken benötigen. Wir können einem stumpfen Textblock Leben verleihen und es kann es für unseren Benutzer einfacher oder schwieriger machen, zu lesen. Ein paar einfache Auswahlmöglichkeiten zu erhalten, kann die Anwendung treffen oder brechen.

Woche 1: CompositionA
gute Komposition macht unsere Designs gleichmäßig anfühlen, aber es schafft auch visuelles Interesse. Wenn wir wissen, wie man eines benutzt, ist es die einzige Sache, die ein Design sofort professioneller anfühlen und gleichzeitig die Benutzer anstrengen lässt.

Diese Woche folgen wir einer Reihe von praktischen Übungen, um deine Intuition beim Platzieren von Elementen auf einer Seite zu verbessern. Sobald du diese Intuition hast, können wir mit dem Hinzufügen von Text, Bildern und anderen UI beginnen. Aber lass uns sicherstellen, dass wir unsere Kompositionen meistern, bevor wir all das andere Zeug einbeziehen.

Ist dieser Kurs für me?Ideally
hast du schon einige Zeit mit der Gestaltung von Websites und/oder Anwendungen verbracht. Jeder Aspekt des Kurses wird mit Anfängern im Auge gelegt, aber du kannst feststellen, dass du den Kurs mehr you wenn du bereits einige Designs erstellt hast. Du wirst auch idealerweise wissen müssen, wie du eine Designsoftware verwendest. Ich empfehle Figma, aber Adobe XD, Invission Studio, Skizze oder eine ähnliche Software wird auch in Ordnung sein.

Der Kurs wird mit Designern im Auge gelegt, aber es kann auch für Frontend-Entwickler oder designers interessant sein.

Triff deine:n Kursleiter:in

Teacher Profile Image

Rob Sutcliffe

UI Designer / Developer

Kursleiter:in

Skills dieses Kurses

Design UX/UI-Design Webdesign
Level: Beginner

Kursbewertung

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen auf Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. UI Bootcamp Einführung: Willkommen beim Benutzeroberflächendesign Bootcamp. Sie lernen, Ihre Benutzeroberflächendesigns ästhetisch schön zu gestalten . Der größte Faktor, der die Benutzererfahrung beeinflusst , wenn Ihre Anwendung darin besteht, wie gut sie aussieht. Also lasst uns das richtig machen. 95 Prozent Ihrer Anwendung sind Topographie. Also werden wir zuerst versuchen, das richtig zu machen, wir werden einige der häufigsten Mythen aufdecken , die Sie über die Lesbarkeit hören. Sie erfahren mehr über die Geschichte der Schriften, wie sie oft interpretiert werden, und erstellen dann Ihr eigenes typografisches System. Sie erhalten Aktivitäten, um Ihre intuitive Verwendung von Farben zu verbessern. Dann folgen Sie praktischen Übungen, um eine Farbpalette für Ihre Anwendung zu entwickeln. Ausrichtung Ihrer Elemente an einem Raster ist der schnellste Weg, den ich für einen Junior-Designer gesehen habe , um seine Kreationen sofort zu verbessern. Sie werden erneut Übungen befolgen, um Ihr Auge zu trainieren und Ihre Kompositionsfähigkeiten intuitiv zu verbessern. Und Sie folgen Übungen, um ein Raster zu erstellen , das mit moderner komponentenbasierter Webentwicklung arbeitet. Durch das Verständnis von Bits darüber, wie Websites erstellt werden, erstellen Sie Raster, die in realen Szenarien funktionieren die in realen Szenarien oft von Designelementen der Benutzeroberfläche übersehen werden. Dieser Kurs hat eine Menge Theorie, aber er ist meist praktisch und ermutigt Sie Ihr Lernen in die Praxis umzusetzen. Sie haben ein besseres Auge und Intuition für das UI-Design. Wetten sind ästhetische Entscheidungen in Ihren Benutzeroberflächendesigns. Und Sie haben ein besseres Verständnis und einen besseren Wortschatz, um kommunizieren zu können diese Entscheidungen mit Ihrem Team oder Kunden kommunizieren zu können. In dieser ersten Woche dreht sich alles um Komposition. Jedes Video wird auf dem letzten aufbauen und Ihnen die Elemente beibringen, die eine Komposition aus Ihrem Klassenprojekt machen , müssen Sie ein sehr einfaches Kritzeln aus jedem Video hochladen . Es ist wirklich wichtig , dies zu tun, weil diese Kritzeleien Ihre Intuition aufbauen , damit Sie Kompositionen besser sehen und mit ihnen arbeiten können. Es ist großartig, dies zu tun, bevor Sie sich Gedanken über alle Elemente der Webseite machen. Wenn Sie mit der Erstellung wunderschöner Benutzeroberflächendesigns beginnen möchten , müssen Sie in diesem Schritt beginnen. Also lasst uns kritzeln. 2. Komposition: Wenn wir über das Entwerfen einer Anwendung oder einer Website sprechen , ein großer Teil dessen, worüber wir sprechen ist ein großer Teil dessen, worüber wir sprechen, eine Komposition zu entwerfen. Und wirklich können wir uns von der Kunstwelt inspirieren lassen, um damit zu beginnen. Hier ist ein Gemälde von John Constable vor etwa 200 Jahren. John Constable war ziemlich berühmt, weil er einer der ersten Menschen war, die etwas taten, wo er ins Feld gehen würde und eine Kuh zeichnen würde, und er zeichnete einen Baum, und er würde zeichnen eine Brücke. Aber dann brachte er all diese Zeichnungen zurück ins Studio und überlegte wie man sie auf der Seite zusammenpasst. Was ist auch optisch ansprechender Weg? Ordne sie auf dieser Leinwand an. In Wirklichkeit waren diese Kühe vielleicht nicht in dieser Position. Vielleicht war dieses Gebäude und Gott weiß, was in diesem Gemälde sonst noch nicht genau an diesem Ort war. Dies sind einfach die Positionen, in denen John Constable glaubt, dass sie gut aussehen würden. Meiner Meinung nach war diese Kuh das Dominanteste in diesem Gemälde. Unten links im Bild. War das Kuh? Warum war das ein guter Ort, um diese Kuh zu platzieren? Wir wollen auf jeden Fall, dass eine Sache auf dem Bild ist. Das ist das erste, was die Leute bemerken, das zuerst ihre Aufmerksamkeit auf sich zieht. Und diese Kuh entschied sich John bequem. Aber würde es nicht mehr Aufmerksamkeit erregen wenn es in der Mitte wäre? Und hätte das nicht mehr Auswirkungen, wenn die Kuh größer wäre, falls Sie es nicht sagen können. Das waren rhetorische Fragen. Ich weiß die Antwort nicht. Und die Antwort wird auch weitgehend davon abhängen, was sonst noch auf dem Bild ist. In diesem ersten Modul werde ich Ihnen viele sehr, sehr kurze Übungen geben. Sie können sie mit einem Bleistift und einem Stück Papier machen. Du kannst sie machen, während du jemanden anrufst. Du könntest sie wahrscheinlich machen , während du fernsiehst. Diese Übungen sollen helfen unsere mentalen Muskeln zu trainieren und aufzubauen, um zu erkennen, was eine gute Komposition sein wird , wenn wir anfangen, Topographie hinzuzufügen, Farben hinzuzufügen und Bilder hinzuzufügen auf unserer Website, wenn wir intuitiv eine gute Komposition erstellen wollen , wir beim Erstellen einer Website recht gut in der Lage sein, müssen wir beim Erstellen einer Website recht gut in der Lage sein, bevor wir 1000 weitere Gedanken im Kopf haben 1000 weitere Gedanken im Kopf welche Schrift wir verwenden und welche Farbe hat etwas. Während dieses Moduls werden wir also nicht über Schaltflächen und Überschrift Texte und Illustrationen sprechen . Wir werden auch nicht einmal über Kühe, Gebäude und Flüsse sprechen . Wir sprechen nur über Formen, Linien und Markierungen. Und wir werden es langsam aufbauen. Wir werden es sehr langsam, einen Schritt nach dem anderen aufbauen und unsere Kompositionen schrittweise verbessern. bedeutet jedoch nicht, dass Sie für jede Übung lange Zeit aufwenden müssen. In der Tat fordere ich Sie dringend auf, diesem quälenden Bedürfnis nach Perfektionismus zu widerstehen. Es spielt keine Rolle, ob sie ein bisschen hässlich sind, ob sie nur Kritzeleien auf der Rückseite einer Serviette sind, ist absolut in Ordnung. Wir werden unsere Augen und unsere Intuition trainieren, also ist es da, wenn wir sie später brauchen. Stellen Sie also sicher, dass Sie diese Übungen tatsächlich machen , bevor wir dieser Seite etwas hinzufügen. Ich möchte zumindest, dass Sie schätzen, dass dies wirklich eine Komposition ist. Diese schlichte weiße Seite ist eine gute Komposition. Und tatsächlich haben viele Künstler im Laufe der Jahre Kunstwerke geschaffen , die nur eine schlichte weiße Leinwand sind und sie für ziemlich gutes Geld salzen. Diese Komposition wird absolut niemals die Anforderungen Ihrer Website oder Ihrer Webanwendung erfüllen . Aber achten Sie nur darauf, dass Sie Ihrer Komposition wahrscheinlich nichts hinzufügen sollten, wenn Sie Ihrer Komposition nichts hinzufügen müssen Sie Ihrer Komposition nichts . Die nächste einfachste Komposition, die wir möglicherweise erstellen könnten, wenn wir einfach eine einzige gerade Linie in der Mitte unserer Seite hinzufügen würden. Dies ist zweifellos auch eine Komposition. Ich habe gesagt, wir würden es langsam angehen. Wahrscheinlich ist es etwas zu langweilig, diese Linie direkt in der Mitte zu haben. Bringen wir es irgendwo zur Seite. Es könnte unsere Komposition interessanter machen, wie wir die Kuh nicht einfach in die Mitte des Bildes stellen würden. Obwohl wir nicht wollen, dass die Dinge zu langweilig werden, wollen wir auch nicht, dass dies zu verrückt wird. Wenn wir die Linie viel zu nahe an den Rand bewegen, fühlt es sich möglicherweise unangenehm an. Es könnte ein Gefühl geben, dass es herunterfällt oder falsch gedruckt wurde oder so. Vielleicht fühlt sich das nicht ganz wohl an und vielleicht wollen wir das manchmal. Vielleicht fühlt es sich anders an, wenn die Leichtigkeit auf der einen Seite und nicht auf der anderen Seite, ohne noch zu viel darüber nachzudenken was jede dieser Kompositionen tun wird, wir können erkenne an, dass es ein etwas anderes Gefühl gibt, das wir von jeder dieser Kompositionen bekommen , wenn es buchstäblich nur eine Linie in der Mitte eines Quadrats ist. Derzeit ist dies ein bisschen zu simpel, als dass Sie sich Sorgen machen müssen, Ihren Bleistift noch herauszuholen. Es gibt eine Variable und das ist die X-Achse, wie weit über diese Linie liegt. Aber Sie können einfach an diesen Beispielen sehen ich auf den Bildschirm gelegt habe, dass sie das Anfühlen der Komposition für Ihre erste Aufgabe ändern. Ich möchte, dass Sie ein Quadrat rahmen. Sehen Sie, wie viele verschiedene Möglichkeiten Sie diese sehr, sehr einfache Übung machen können, um ein Quadrat in einer Box zu positionieren. Stellen Sie sich das vor, als würden Sie ein Foto einrahmen. Ein üblicher Trick, den die Leute beim Framing machen, ist, dass sie unten etwas mehr Platz lassen Platz als oben. Vielleicht ist auf der einen Seite mehr Platz als auf der anderen Seite. Vielleicht ist R-Quadrat einfach sehr, sehr klein. Verwenden Sie einfach Größe und Position hier und sehen Sie wie viele verschiedene Kompositionen Sie erstellen können. Ich denke, das ist interessant , weil man ein einzelnes Element auf einer einzigen Webseite haben kann . Und es gibt hunderttausend verschiedene Möglichkeiten , das möglicherweise zu tun. Für deine allererste Übung möchte ich, dass du ein paar Quadrate rahmst. Sie werden zwei Minuten damit verbringen, sich ein Stück Papier zu schnappen und so viele Quadrate zu zeichnen, wie Sie darauf passen. Dies werden Ihre Frames sein und dann zeichnen Sie ein Quadrat hinein. Es kann verschiedene Größen geben. Sie können verschiedene Abstände von den Kanten haben und sehen, wie viele Variationen Sie erhalten können. Stellen Sie sich vor, es ist eine Webseite, die ein Element enthält. Wo geht das Element hin und wie groß ist es? Sie müssen nicht gut aussehen. Das ist nur, um uns anzufangen. Es geht nur darum, unser Gehirn ein bisschen zum Laufen zu bringen. Sehen Sie, wie viele verschiedene Quadrate Sie in zwei Minuten gestalten können. 3. Ausdruck: Im nächsten Modul werden wir anfangen, über Typografie zu sprechen. Aber im Moment möchte ich, dass du dir diese beiden As ansiehst. Jetzt sprechen sie nicht mit derselben Stimme, oder? Sie haben sehr, sehr unterschiedliche Gefühle und Emotionen und sie vermitteln sehr unterschiedliche Dinge. Manchmal versuchen die Leute einfach, Briefe zu finden , die nicht so viel zu kommunizieren scheinen, die sehr normal aussehen und denken, dass das nichts aussagt. Aber wenn es natürlich der Fall ist, übermitteln Sie bei diesen Entscheidungen immer eine Art Botschaft. Es gibt alle möglichen subtilen Details in dem Brief. Der Kontrast zwischen dicken und dünnen Linien, die Winkel, die die Räume einnehmen, trägt alles zur Buchstabenpersönlichkeit bei. Aber bevor wir uns um all diese Dinge kümmern, werden wir das langsam aufbauen. Mal sehen, ob wir mit nur einem R-Quadrat ein paar Emotionen aufbauen können . Diese Komposition, die ich hier links erstellt habe und diese Komposition auf der rechten Seite haben ein ganz anderes Gefühl als sie. Etwas darüber, wie viele Räume um sie herum sind, wie viel Größenunterschiede es gibt. Es gibt alle möglichen Dinge, bei denen wir jetzt die Kontrolle über diese Veränderung haben , wie sie sich fühlen. Wenn Sie sich diese beiden Bilder ansehen und sagen müssten , was Sie fühlen lassen oder welche Art von Persönlichkeit Sie glauben, dass sie sie haben. Sie würden sich wahrscheinlich etwas andere Antworten auf mich einfallen lassen, aber wahrscheinlich haben Sie sich etwas vage Ähnliches einfallen lassen. Jetzt werde ich Sie in einem Moment bitten, diese Übung zu machen, um eine Komposition zu erstellen , die nur Quadrate verwendet , die ein Gefühl oder ein Gefühl vermitteln. Und Sie werden nicht alle die gleiche Komposition erstellen. Es gibt keine richtige oder falsche Antwort. Wir werden sehr unterschiedlich aussehende Kompositionen aus den gleichen Worten Lu erstellen . Der eigentliche Zweck der Übung ist es, Sie dazu zu bringen, an Kompositionen zu denken, die ein Gefühl ausdrücken. Wenn man darüber nachdenkt, was jede Form, ihre Position und ihr Winkel vermitteln, was sie kommunizieren. Und wir möchten ganz einfach alleine darüber nachdenken , bevor wir anfangen, über etwas anderes nachzudenken, damit es intuitiv verfügbar ist , wenn wir unsere Kompositionen erstellen, die wir immer denken darüber auf einer bewussten oder unbewussten Ebene , wenn wir anfangen, den Rest des Zeugs aufzubauen. Für dieses erste Beispiel habe ich mir das Wort „betrunken“ gegeben. Mir hat die Idee sehr gut gefallen, auf der einen Seite der Seite viel Gewicht zu haben und die andere nicht zu haben, es fühlt sich unangenehm an und trägt zu Gefühl bei, dass es umfallen wird , wie es natürlich der Fall ist, Mit den schwersten Formen nach oben und den leichteren Formen nach unten fühlt es sich oberlastig an. Es gibt ihm dieses instabile Gefühl, als ob es umfallen könnte. Und die Winkel und verschiedenen Größen geben ihm ein gewisses Gefühl von Energie. Es fühlt sich ein bisschen energisch an. Wir würden sehr selten einen Winkel in einem Webseiten-Design verwenden, aber derzeit denken wir nur darüber nach, wie mit den Formen eine Bedeutung ausdrücken können. Zweitens habe ich mir das Wort klaustrophobisch gegeben. Und es gab etwas, das ich ziemlich ängstlich fand ziemlich ängstlich dass ich eine sehr geordnete Reihe von Blöcken hatte. Und es gab etwas , bei dem sich viele auch etwas unwohl fühlen , wenn sie etwas haben , das so seltsame Arbeit war in der Mitte etwas unvollständig war. Und dann ist das gefangene Leerzeichen in der Mitte natürlich sehr klein und man fühlt sich sehr geschlossen, wenn man es nur betrachtet. Und jetzt stimmen Sie meiner Begründung für eine dieser Kompositionen vielleicht überhaupt nicht zu, aber das ist in Ordnung. Eigentlich sind Teile der Erklärung, warum Sie denken, dass etwas Emotionen vermittelt ein ziemlich wichtiger Teil dieser Aufgabe 2, denn das ist immer eine Konversation, die Sie möglicherweise mit einem Kunde oder ein Teammitglied. Und wenn Sie eine ziemlich logische Person sind, Sie nie zur Kunstschule gegangen oder haben studiert. Das fühlt sich wahrscheinlich alles ein bisschen wishy-washy an, aber bleib einfach für den Moment bei mir und gib dem eine Bash. Ihre Übung beim Nachdenken über Ausdruck besteht darin, nur sehr schnell ein paar Kompositionen mit beschreibenden Wörtern zu erstellen . Was ist mit Konflikten oder Ekstase? Sie können Ihre eigenen Wörter wählen oder diese beiden Beispiele wählen, die ich gegeben habe. Und nur sehr, sehr schnell ein paar Quadrate auf eine Komposition gekritzelt , von der Sie glauben, dass sie diese Botschaft vermittelt. Und volle Bonuspunkte. Sehen Sie, ob Sie rechtfertigen können, warum Sie diese Entscheidungen getroffen haben. Sehen Sie, ob Sie erklären können, warum Ihre Anordnung von Formen Ekstase bedeutet. Darauf gibt es absolut keine richtige oder falsche Antwort. Fühlen Sie sich frei, verrückt zu werden. Und natürlich, je öfter Sie dieses Experiment ausprobieren, und wie ich bereits sagte, könnten Sie es einfach tun, während Sie telefonieren. Je besser, desto am besten wirst du dran sein. 4. Ausgeglichenheit: Eine Emotion, die wir fast immer vermitteln wollen, ist Stabilität. Unsere Marke, unsere, unsere Anwendung könnte ein Gefühl haben, war ein bisschen wild und liberal und kreativ. Oder vielleicht hat es das Gefühl, sehr vernünftig, konservativ und sicher zu sein . Aber jeder dieser polaren Gegensätze möchte sich immer noch stabil fühlen. Bleiben wir noch ein bisschen länger bei der Kunstwelt. Stell dir vor, du malst einen Baum. Wenn du nun den Baum malst, also waren alle Zweige auf einer Seite, würde es dem Betrachter ein unangenehmes Gefühl geben , denn auf einer unbewussten Ebene könnten sie denken, dass er schaut etwas, das gleich umfallen wird oder, und dies ist eine wichtige Theorie, die viele Dinge untermauern wird , über die wir in diesem Kurs sprechen werden. Sie werden fühlen, was sie sehen, etwas, das nicht natürlich ist und das uns ein unangenehmes Gefühl gibt. Wir möchten die Welt um uns herum verstehen. Um also freundlich zu unseren Zuschauern zu sein, welche Eigenschaften Baum auch immer noch hat, werden wir immer noch wollen, dass auf der einen Seite zur anderen eine gleiche Anzahl von Zweigen hat. Oder wenn wir einen großen schweren Zweig auf der einen Seite haben, haben wir vielleicht ein paar leichtere Zweige auf der anderen Seite. Balance zu schaffen bedeutet nicht unbedingt , es konservativ zu machen. Es heißt nicht, langweilig aussehen zu lassen, und das bedeutet sicherlich nicht, dass wir es symmetrisch machen müssen. Es bedeutet einfach, es so aussehen zu lassen, als ob es in der realen Welt existiert und den Gesetzen der Physik gehorcht. Wenn wir damit beginnen, diese wirklich einfache Komposition zu erstellen, hat sie nur eine große, schwere Box auf der linken Seite. Und wir wollen dem jetzt entgegenwirken, weil unsere Seite auf einer Seite gewichtet wird. So könnten wir zum Beispiel eine kleinere Box auf die rechte Seite legen, eine kleinere Box auf die rechte Seite legen wenn sie weiter von der Mitte entfernt wäre. Stellen Sie sich für eine Sekunde vor, dass die Seiten auf einer Wippe, wenn eine kleinere Form weiter von der Mitte entfernt ist, Es wird die größere Form gut ausbalancieren. Vielleicht wird diese kleine Box auf der rechten Seite diese Komposition in etwas ausgeglicheneres umgewandelt . Alternativ könnten wir auch noch kleinere Boxen auf der rechten Seite haben, aber dann vielleicht nur noch mehr davon. Dies wird also auf dieser Seite zusätzliches Gewicht erzeugen . Und um dieser nächsten Übung willen schlage ich vor, dass Sie damit spielen können, wie hell oder dunkel die Boxen sind. Denn wenn wir die Box zum Beispiel auf der linken Seite etwas weniger dunkel machen , hat sie weniger Kontrast zum Hintergrund, auch weniger Gewicht verleiht. Und schließlich können wir natürlich unsere Komposition ausgleichen, indem wir sie einfach symmetrisch machen. Natürlich werden Sie in der realen Welt der Erstellung einer Website sehr selten die Möglichkeit haben, werden Sie in der realen Welt der Erstellung einer Website sehr selten die Möglichkeit haben eine Komposition zu erstellen, die einfach symmetrisches Gleichgewicht bei Erstellung einer Komposition bedeutet einfach symmetrisches Gleichgewicht bei der Erstellung einer Komposition bedeutet eine gleiche Menge an visuellem Signal auf beiden Seiten sein. Und es lohnt sich wirklich, dies jetzt zu üben, denn wenn wir mehr Elemente in unsere Komposition, alle verschiedenen Farben, Formen und Dichten bringen, wird es sehr, sehr schwer werden, wird es sehr, sehr schwer werden, dies zu verstehen Balance richtig. Je mehr wir es jetzt praktizieren, desto mehr wird unsere Intuition später damit arbeiten können. Ihre Übung für dieses Video ist also ganz einfach. Wir werden einige Kompositionen mit Quadraten erstellen, wobei mindestens zwei oder drei Quadrate wobei mindestens zwei oder drei Quadrate in denen sich die Komposition ausgeglichen anfühlt. Wir können mit der Form spielen, wir können damit spielen, wie dunkel sie sind. Wir können mit ein paar verschiedenen Dingen spielen um ein Guthaben auf der Seite zu erstellen und einfach zu sehen, wie viele Sie in ein paar Minuten erstellen können. 5. Kontraste: Wenn Sie ein bisschen zu schlau für Ihren eigenen Umfang sind, haben Sie wahrscheinlich erkannt, dass Sie eine ausgewogene Komposition erstellen können, indem Sie eine ausgewogene Komposition erstellen einfach absolut nichts auf die Bezahlung zeichnen, gut gemacht. Aber Ihr Marketingteam wird damit als Design wahrscheinlich nicht sehr zufrieden sein, aber mit diesem völlig symmetrischen wäre es wahrscheinlich nicht sehr zufrieden. Entweder. Menschen mögen natürlich Benin-Umgebungen und betrachten Designs , die sie nicht verwirren, aber eine sehr geringe visuelle Komplexität, sehr begrenzte Farbpalette sehr begrenzte Anzahl von Formen auf der Seite aufweisen. Aber wir merken diese Dinge auch nicht. Wir schenken nicht wirklich zu viel Aufmerksamkeit. Wir erinnern uns nicht an sie und wir beschäftigen uns nicht so sehr mit ihnen. Wir finden sie entspannend und angenehm. Selbst wenn wir also nur ein einfaches Eingabeformular auf einer Webseite entwerfen , möchten wir, dass dies ein gewisser Kontrast dazu ist. Wir möchten, dass der Baum ausgeglichen, aber nicht vollständig ausgeglichen aussieht . Es muss ein bisschen Spannung und ein wenig Unkomfort geben, die unsere Benutzer wach und interessiert halten. Um dies zu tun, stellen wir immer sicher, dass unsere Entwürfe einige Elemente des Chaos haben, ein Element von Kontrasten zwischen dem, was in der Komposition enthalten ist. Wenn wir zum Beispiel ein Quadrat auf einer Seite haben, balancieren wir es vielleicht mit der Form aus, die so groß ist , dass sie nicht einmal auf die Seite passt. Und eine Form, die sehr unterschiedliche visuelle Attribute als das Quadrat hat . Jetzt haben wir etwas, das die Leute dazu bringt, es zu betrachten. Es hält ihr Gehirn mehr stimuliert , als wenn wir nur die beiden Boxen hätten. Und wir könnten jede der Techniken anwenden, die wir verwendet haben, als wir über Balance sprachen, aber vielleicht ein wenig mit ihnen spielen. Diese Kreise sind jetzt so angeordnet , dass sie sich von einem Quadrat unterscheiden, aber die Seite hat immer noch ein angemessenes Guthaben. Ein Quadrat mit einem Kreis zu kontrastieren ist ziemlich schön, da ein Quadrat sehr steif ist und ein Kreis sich sehr organisch anfühlt, aber wir können weitaus organischer sein als ein Kreis. Was ist, wenn ich mit diesem Blatt kontrastiere? Wir werden später viel mehr über kontrastierende Farben sprechen, aber dieses Blatt ist grün. Vielleicht machen wir die Box in einer ganz anderen Farbe. Vielleicht machen wir es rot. Ich denke, das sieht ziemlich gut aus. Aber irgendwann, besonders wenn wir mehr Elemente auf unserer Seite haben, werden wir an den Punkt kommen, an dem wir einfach zu viel Kontrast haben. Wir wollen nur ein bisschen Kontrast. Wir möchten, dass es sich größtenteils ziemlich konform und unwohl anfühlt. Wie wäre es also, wenn wir die Anzahl der Attribute begrenzen , die zwischen diesen beiden Formen variieren. Jetzt, da wir auch ein Bild aufgenommen haben, können wir mit der Idee spielen, dass wir vielleicht die gleiche Form wie das Quadrat behalten, aber wir verwenden die Textur aus dem Bild. So können wir schon sehen, dass Dinge wie Form, Farbe und Textur verwendet werden können, um einen gewissen Kontrast in unserer Komposition zu erzeugen gewissen Kontrast in unserer Komposition , um sie optisch interessanter zu machen. Wir könnten möglicherweise auch einige der Formen in eine Art Muster anordnen . Wenn wir wollten, könnten wir mit der Qualität dieser Linien spielen . Diese sehen sehr starr aus, aber es könnte etwas rauh sein. Sie könnten gebogen sein, könnten handgezeichnet aussehen, ähnlich wie unser Blatt. Wenn wir eine Komposition wie diese erstellen würden, wäre es sehr einfach für uns zu viel Kontrast zu schaffen damit die beiden Bereiche der Seite so aussehen, als gehöre sie zu verschiedenen Welten. Und denken Sie daran, wir möchten, dass sich unser Benutzer auf einer unbewussten Ebene wohl fühlt, das Gefühl hat, dass es eine natürliche echte Sache ansieht und dass er es versteht und Muster darin sieht. Wir möchten also nicht nur die Anzahl der Attribute einschränken, die wir kontrastieren, dann möchten wir vielleicht andere Einschränkungen erstellen, um, wenn wir nur versuchen, einen Kontrast auf der Seite zu erzeugen, wir sind sehr schnell etwas machen , das fast abstoßend anzusehen ist, dass sich die Leute unwohl fühlen, selbst wenn sie es betrachten. In genau diesem Beispiel habe ich nur Linien der gleichen Dicke, der gleichen Länge und nur vertikalen, horizontalen oder einem bestimmten Winkel verwendet der gleichen Länge und nur vertikalen, . Wir haben auch Kontrast in dieser exakten Komposition, da die linke Seite immer noch viel Leerzeichen um sich herum hat . Es ist sehr sauber. Und je mehr Unordnung wir bekommen, desto mehr wollen wir sicherstellen, dass wir viel Platz oder rundes Ding haben . Versuchen Sie, diesen Gleichgewichtssinn beizubehalten, während Sie versuchen, einen Kontrast in Ihrer Komposition zu erzeugen . Und was Sie bemerken werden, ist, Sie anfangen, Formen hinzuzufügen wenn Sie der Komposition drei oder vier Formen hinzugefügt haben , wird es etwas chaotischer aussehen. Und es wird helfen, wenn Sie dann anfangen Art von Regeln zu erstellen, z. B. nur eine bestimmte Anzahl von Formen verwenden oder nur eine bestimmte Anzahl von Farben verwenden. Oder natürlich könnte es gut sein, darüber nachzudenken wie sie sich in der Komposition aufstellen. an dieser Stelle keine allzu großen Sorgen um Erstellung dieser Richtlinien oder ähnliches. Erkenne einfach an, dass du der Komposition weitere Formen hinzufügst, mentale Regeln darüber zu erstellen welche Größen sie haben können und welche Farben erlaubt sind. Sie neigen dazu, Regeln zu erstellen, um dieses Konformitätsgefühl in Ihrer Komposition beizubehalten . Aber was Sie tun werden, ist, dass Sie mit einer Komposition mit einem Element beginnen , dass Sie mit einer Komposition mit einem Element und dann mit zwei versuchen und dann versuchen, eine weitere Komposition mit drei Elementen zu erstellen und sicherzustellen Sie haben ein gewisses Kontrastelement, aber sicher, dass es nicht auch verrückt aussieht. Dies war ein ziemlich kurzes Video, aber es ist ein sehr wichtiges Thema, das Sie üben können. Stellen Sie also sicher, dass Sie für diesen etwas länger ausgeben als die vorherigen. Ich möchte, dass Sie viele verschiedene Kompositionen erstellen , bei denen es ein Kontrastelement gibt. Kontrastierende Formen, kontrastierende Farben, kontrastierende Größen, groß und klein, weiche und harte Texturen, Muster erzeugen eine gewisse Form von Kontrast. Fangen Sie klein an, drei Formen. Und dann für Formen und Aufbau und komplexer machen. Wenn Sie sie komplexer machen, müssen Sie keine absichtlich Regeln erstellen, sondern nur anerkennen, dass Sie beginnen, einige Regeln zu erstellen, um ein Gefühl der Konformität zu bewahren, damit sie gut aussehen Sie beginnen, einige Regeln zu erstellen, um ein Gefühl der Konformität zu bewahren . in diesen Kompositionen. 6. Formulare: Dies ist eine Übung von Kandinsky, in der er seine Schüler bat, die Eigenschaften von Farben mit den Eigenschaften von Formen in Einklang zu bringen. Ich lege einen Link in die Ressourcen, damit du es selbst versuchen kannst. Ich klicke nicht auf Absenden, also verderbe ich die Überraschung nicht, wenn du es richtig machst oder nicht. Ich bin mir nicht sicher, ob ich seinen Vorstellungen, welche Formen Persönlichkeiten haben, welche Farben Persönlichkeiten haben, unbedingt zustimme seinen Vorstellungen, welche Formen Persönlichkeiten haben, welche . Aber wir können wahrscheinlich zustimmen , dass verschiedene Formen unterschiedliche Dinge kommunizieren und für verschiedene Marken oder verschiedene Emotionen, verschiedene Situationen besser verschiedene Marken oder verschiedene Emotionen, verschiedene sind. Nehmen wir zum Beispiel das Dreieck. Jetzt hat das Dreieck sehr präzise Punkte an den Rändern. Und ich glaube, das vermittelt eine sehr gute Branding-Botschaft, wenn Sie vielleicht eine Anwendung für ein Ingenieurunternehmen erstellen , aber das würde seine Bedeutung völlig ändern, wenn wir dann rundete die Kanten dieses Dreiecks ab. Jetzt fühlt es sich ganz anders an. Es kommuniziert tatsächlich eine ganz andere Botschaft. Oder wenn wir die Kanten von Hand zeichnen würden, könnte es etwas raue Kanten haben und dann würde es definitiv nicht für ein Ingenieurunternehmen funktionieren. Woran wir denken, wenn wir das Wort Dreieck sagen , könnte möglicherweise sehr unterschiedliche Dinge bedeuten , die sehr unterschiedliche Dinge kommunizieren. Sie haben sehr unterschiedliche Persönlichkeiten. Die Form einer einfachen Form kann sich ziemlich ändern. Aber was ist, wenn wir auf etwas noch komplizierteres wie diese Muster oder Texturen eingehen noch komplizierteres wie , die wir uns im letzten Video ein wenig angeschaut haben . Ich habe diese Texturen des Internets irgendwo heruntergeladen und sie haben viel Chaos und eine Menge raues texturales Gefühl für sie. Aber wenn ich das einfach wieder in die reale Welt des Entwurfs einer Anwendung zurückbringe , würde ich wahrscheinlich etwas ähnlicheres verwenden, ein bisschen subtiler. Angenommen, ich habe eine mobile Anwendung erstellt , um Musikern dabei zu helfen, sich gegenseitig zu finden. Jetzt ist die Musik sehr viszeral. Es ist sehr eine Art fließende natürliche Art Ding. Also würde ich nicht etwas so Winkeliges und Langweiliges mit so wenig Kontrast wollen . Aber ich könnte diese winzige Änderung sehr leicht vornehmen und die Anwendung tatsächlich verbessern. Ich verwende diese flüssigen, natürlichen, organischen Gefühllinien als Textur im Hintergrund sehr subtil. Und ich habe das Gefühl, dass das sehr gut funktioniert, um Musik und Community zu kommunizieren. Wir haben offensichtlich auch gerade über den Kontrast gesprochen, und wir wollen wahrscheinlich über die Form unserer Formen nachdenken und wir schauen uns den Kontrast an. Die Form dieser Box ist wirklich eckig und starr. Und die Form dieser fließenden Linien steht perfekt im Kontrast dieser Box in einer Weise, in der mein vorheriges Beispiel einen vollen Kreis vielleicht nicht so gut war. Nehmen wir an, anstatt eine Box hier zu haben, haben wir einige Texte, die gerade Form gesagt haben. Das mag jetzt sehr, sehr schön Kontraste, weil der Text hier sehr geometrisch und eckig ist , ähnlich der Box, die wir gerade hatten. Wenn ich versuche, denselben Text zu machen, dieselben Buchstaben, aber mit einer etwas anderen Form. Es sieht fließender und natürlicher aus und vielleicht, anstatt sich mit den Formen auf der rechten Seite zu kontrastieren , kollidiert es irgendwie mit ihnen. Dieses Video war also eine kleine Zusammenfassung dessen , worüber wir bisher gesprochen haben, aber wir haben uns auch ein bisschen die Form angeschaut und wie man ein Dreieck haben kann und ganz anders erscheinen kann, einfach durch Anpassen der Linien und der Kanten ein wenig. Und genau wie in unserer ersten Übung haben wir darüber gesprochen, wie wir Emotionen und einige Eigenschaften mit unserer Komposition ausdrücken wollten , mit den sehr genauen Formen in der Komposition können wir kommunizieren einiges davon auch. Ich möchte also , dass Sie zu dieser allerersten Übung zurückkehren , in der wir ein paar Kompositionen erstellt haben der wir ein paar Kompositionen erstellt , die ein bestimmtes Wort ausgedrückt oder Sie könnten einige neue erstellen wenn Sie möchten. Und dieses Mal möchte ich, dass du nimmst, was wir seitdem gelernt haben. Ich möchte, dass Sie sie neu erstellen, damit sie ein bestimmtes Gleichgewicht haben , aber auch ein bestimmtes Kontrastelement. Und Sie können kontrastierende Formen jetzt zwei verschiedene Formen verwenden , aber auch verschiedene Texturen und Muster, die helfen, das zu kommunizieren, was Sie ausdrücken möchten. Wenn Sie zwei neue kreieren wollten, versuchen Sie vielleicht, ein Gefühl der Sicherheit mit einer Komposition auszudrücken und versuchen Sie dann, ein Gefühl der Freiheit mit einer Komposition auszudrücken. 7. Hierarchie: Bisher haben wir uns mit Balance und Kontrast befasst, die sicherstellen werden, dass unsere Kompositionen gut aussehen. Wir haben uns Ausdruck und Form angeschaut, wodurch sichergestellt wird, dass sie im richtigen Ton kommunizieren oder sprechen. Bauen wir nun darauf mit einigen Techniken auf , die unsere Kompositionen ein wenig nützlicher machen werden. Wir werden keine Kunst erschaffen. Irgendwann werden wir Entwürfe kreieren und sie werden einen Rückdenken an das John Constable-Gemälde mit der Kuh darauf haben. Nun gab es ein anderes Objekt, ich denke vielleicht ein Gebäude auf der anderen Seite des Flusses und einen anderen Baum, vielleicht gab es eine offensichtliche Hierarchie innerhalb dieser Komposition. Es machte es leicht zu wissen, worauf zuerst achten sollte und was man sich ansehen Die meisten Künstler werden eine Art Hierarchie in ihrer Komposition haben , um den Betrachter zu formen , was zuerst zu sehen ist, zweitens, manchmal verwenden Sie sogar tatsächliche Linien oder sogar Pfeile innerhalb von Mustern, um das Auge um die Komposition zu lenken und sie innerhalb der Grenzen dieses Bildes zu halten. Nehmen wir zum Beispiel die Komposition noch einmal. Es waren nur zwei Kühe von gleicher Größe in meiner Komposition gewesen . Wir wissen bereits, dass dies keinen besonders schönen Kontrast in unserer Komposition schafft, obwohl es eine sehr schöne Balance schafft, aber auch der Betrachter fragt sich, welcher dieser beiden umso wichtiger ist worauf sie sich zuerst ansehen sollten. Und es gibt ein gewisses Maß an Konflikten und Unkomfort in ihrem Unterbewusstsein. Der Künstler oder Designer, der die Komposition erstellt, hat viel mehr Informationen, um zu entscheiden, was jemand vielleicht zuerst betrachten sollte, die Person, die sie ansieht, kann sich nicht innerhalb eines Bruchteils einer Sekunde entscheiden, was ist das Wichtigste, was man sich ansehen sollte. Ich habe eine Beispiel-News-Homepage erstellt , die ich erstellen könnte, wenn ich jemals einen Blog hätte. Und es gibt relativ offensichtliche Routen , die Sie auf dieser Seite sehen könnten. Sie würden zuerst diese Geschichte über die Rechte bemerken. Es hat den größeren Text. Es sieht anders aus als all die anderen Geschichten, ähm, und es ist ziemlich hoch oben auf der Seite. Und dann gibt es vielleicht zwei verschiedene Bereiche Sie als nächstes betrachten könnten weil einer etwas größer ist und mehr Platz verbraucht, aber der andere hat hier ein etwas einzigartigeres Layouts. Also diese möglicherweise zwei Dinge, die Sie sich danach ansehen könnten. Nachrichtenwebsites sind großartige Quellen um zu untersuchen, wie Menschen die visuelle Hierarchie verwenden , da sie normalerweise ziemlich viele Informationen haben. Sie versuchen, auf sehr wenig Platz zu gelangen. Aber schauen wir uns zuerst etwas an, bei dem meisten Nichtkrankheiten eintreten, über Hierarchie nachdenken würde . Wenn Sie jemals einen Aufsatz in einem Word-Dokument geschrieben haben, hatten Sie zweifellos einen großen Titel an der Spitze mit einigen Texten in und kleinerem Text unter in Absätzen. In diesem Fall zeigt möglicherweise ein Aufzählungszeichen für eine Inhaltsseite da dies der Hintergrund ist, den wir alle beim Erstellen einer Hierarchie haben. Neue Designer denken immer über Textgröße nach, wenn sie versuchen, etwas Wichtigeres zu machen. Und denken Sie möglicherweise darüber nach, Dinge auf der Seite nach oben zu verschieben , wenn Sie versuchen, es wichtiger zu machen. Wenn wir uns dieses Dokument ansehen, habe ich hier, Es gibt eine Überschrift und fünf Links zu Artikeln unten. Die Überschrift. Die neuesten Nachrichten sind nicht sehr informativ, besonders für jemanden, der diese Seite oft gesehen hat. Deshalb wollen wir nicht wirklich, dass das wirklich groß wird. Wir wollen jedoch wahrscheinlich, dass es höher in der Hierarchie liegt. Vielleicht könnten wir das zu einer anderen Farbe machen. Es sticht also hervor, macht es aber tatsächlich viel kleiner. ist es also aus dem Weg. Fünf Überschriften zu haben ist eigentlich ein bisschen zu viel. Es ist sehr schwierig für Menschen, eine Entscheidung zwischen fünf oder sicherlich mehr als fünf Dingen zu treffen. Also möchten wir sie vielleicht zu einem führen, um sie zumindest dazu zu bringen, Schlagzeilen zu lesen, anstatt von Unentschlossenheit entmutigt zu werden und sie niemals wirklich zu lesen. Wir möchten also vermeiden, fünf Dinge von exakt gleicher Bedeutung zu haben , und vielleicht einfach eines herausziehen. Wenn wir einfach einen nach dem Zufallsprinzip auswählen könnten oder entscheiden könnten was wir für das Wichtigste halten, und ziehen Sie ihn heraus, machen Sie den Text viel größer machen Sie ihn zur höchsten Hierarchie. Und wir könnten dies noch wichtiger machen indem wir es aus der Liste entfernen. Es ist derzeit drin. Werfen Sie einen Blick zurück auf dieses Design. Ich habe gerade diese News-Homepage erstellt und sehe, ob du herausfinden kannst, was das Wichtigste auf der Seite ist. Was ist das, was dir zuerst auffällt? Bestellen Sie sie vielleicht ab 1, 2, 3, 4 in der Reihenfolge, wie Sie sie bemerken, prüfen Sie, ob Sie feststellen können, was etwas auf der Seite macht. Das erste, was Sie bemerken oder das zweite, was Sie bemerken, ist wahrscheinlich nicht nur die Größe. Und wenn Sie sich das ansehen, schauen Sie sich Ihre Lieblingszeitung an die Sie sich normalerweise ansehen, und sehen Sie, welche Techniken sie verwendet haben. Und vielleicht schauen Sie sich sogar einige Kompositionen von Künstlern an und sehen Sie, welche Hierarchiegruppen sie verwendet haben, um Sie zuerst eine Pfadkomposition anzusehen und einen Teil Sekunde zu betrachten. Lassen Sie uns nun wieder unsere Kompositionen erstellen. Als Ausgangspunkt dafür können Sie sich gerne alle ansehen, die Sie für die vorherigen Übungen erstellt haben . Und ich möchte, dass du Formen hinzufügst über den Kontrast und die Balance nachdenkst. Aber dieses Mal fing ich an, über die Hierarchie nachzudenken. Stellen Sie sicher, dass es eine Sache und die Komposition gibt, die das Wichtigste ist. Und dann eine zweite Sache, die das zweitwichtigste ist. Wenn wir weiter unten in der Hierarchie arbeiten, ist es in Ordnung, ein paar Dinge auf derselben Ebene zu haben, aber höher, das sollte nur eine wichtigste Sache sein. Versuchen Sie, einige der Techniken zu verwenden , die Sie beim Betrachten von Zeitungen und anderen Kunstwerken identifiziert haben , und prüfen Sie, ob Sie sie verwenden können , um verschiedene Kompositionen mit verschiedenen Hierarchien zu erstellen , um verschiedene Kompositionen mit verschiedenen Hierarchien vielleicht hol dir einen, mit dem du mit Haaren zufrieden bist. Ich habe den Farbkontrast ziemlich oft benutzt. Die helleren Grautöne sind weniger hervorstechend. Aber vielleicht, wenn ich einen dunkler mache und das Stück plötzlich viel wichtiger in der Komposition mache das Stück plötzlich viel wichtiger . Oder wenn ich tatsächlich seine Farbe geändert und diese Form ändere, wird es sie in diesem Wettbewerb enorm wichtiger machen . Versuchen Sie dann, einige Kompositionen zu erstellen , die keine Hierarchie haben. Das Offensichtliche wäre nur eine Liste von Quadraten wie diesem und dann sehen, ob Sie damit spielen können , um eine Sache hervorzuheben, um es wichtiger zu machen. Wie bei allen unseren bisherigen Übungen gibt es keinen richtigen oder falschen Weg. Und du versuchst nicht , sie gerade fantastisch aussehen zu lassen. Was Sie versuchen, ist Ihre Intuition so zu trainieren, dass Sie, wenn Sie mit mehr Elementen zu tun haben, mehr Dinge sind , über die Sie auf der Seite nachdenken müssen. Sie können diese Hierarchie ganz natürlich in Ihren Entwürfen erstellen . Es tut mir so leid, das war ein bisschen lang. Aber um Ihre Übung dazu zusammenzufassen , müssen Sie eine Komposition erstellen. Sie können verschiedene Farben, Formen und alles, was wir bisher verwendet haben, verwenden. Stellen Sie jedoch sicher, dass es eine visuelle Hierarchie für die erste gibt , erstellen Sie einfach drei Elemente in Ihrer Komposition und versuchen Sie es dann mit vier und fügen Sie sie hinzu und sehen Sie, ob Sie eine haben können kohärente Hierarchie in Ihren Kompositionen. 8. Beziehungen: In unserem vorherigen Video haben wir also über Hierarchie gesprochen, bei der es hauptsächlich darum geht etwas von der Masse abzuheben. Was macht etwas zum wichtigsten offensichtlichsten Ding auf der Seite. Aber das Gegenteil davon ist, wie gruppieren wir die Dinge zusammen, um zu zeigen , dass sie zusammengehören? Wenn wir hier auf dieses Design zurückblicken, können wir sehen, dass diese drei Artikel auf der linken Seite offensichtlich in irgendeiner Weise verwandt sind. Sie haben ein ähnliches Maß an Bedeutung. Sie haben wahrscheinlich eine Art Beziehung zueinander. Ebenso sagen diese Artikel unten links oder diese Artikel unten rechts, indem weitere Artikel unten rechts dem gleichen Muster folgen , dass sie weniger wichtig sind damit sie unsere Aufmerksamkeit nicht so schnell erregen. Aber es sagt uns auch, wenn wir anfangen, sie anzusehen, dass sie etwas Ähnliches haben, dass sie aus irgendeinem Grund zusammengehören. Wenn Sie also auf dieses Design oder eine Zeitung zurückblicken oder sogar eine Kunstkomposition mögen, können Sie versuchen herauszufinden wie bestimmte Elemente so aussehen, als wären sie Teil des das gleiche Muster, das sie zusammengehören. Und dann versuche, mit diesen Techniken unsere eigenen Kompositionen zu erstellen . Also, wenn ich zum Beispiel einen Kreis hätte und das auf der rechten Seite der Komposition ausgleichen wollte das auf der rechten Seite der Komposition ausgleichen . Ich könnte diesen Nachrichtenartikeln auf der Webseite ähnlich sein, etwa drei Quadrate verwenden, die zu gleichen Teilen gestapelt sind. Es hat das gleiche Gewicht wie der Kreis, aber sie sehen weniger wichtig aus, weil sie dem gleichen Muster folgen und sie aussehen, als würden sie sich aufeinander beziehen. Wir wissen, dass sie etwas gemeinsam haben. Wir könnten zwei Formen haben, die nicht so sehr in ein Muster passen wie einander, aber vielleicht sind sie in einer anderen Form enthalten. Dies ist eine andere Art, wie wir sagen können , dass diese beiden Formen miteinander verbunden sind. Und selbst wenn diese Formen zum Beispiel Kreise wurden, Es scheint immer noch, dass die Formen auf der rechten Seite mehr miteinander verwandt sind als die auf der linken Seite. Weil es eine ähnliche Größe gibt und sie relativ nahe beieinander liegen. Sie sehen vielleicht aus, als gehören sie mehr zusammen als die auf der linken Seite. Wie auch immer, lasst uns versuchen, sie verwandter aussehen zu lassen. Sie könnten einfach durch eine tatsächliche Linie verbunden werden , die die funktionierenden Formen verbindet. Oder vielleicht gibt es eine Art abstrakte Form, die sie beide überlappen, die ihnen das Gefühl gibt, zu einer dritten Form zu gehören. Oder natürlich könnte es alle möglichen Qualitäten geben, die die Formen unterschiedlich haben , die deutlich machen, dass sie in irgendeiner Weise verwandt sind. Also hast du es wahrscheinlich erraten. Ich möchte, dass du genau das Gleiche machst, was du in der letzten Übung getan hast. Erstellen Sie eine Komposition mit Hierarchie. Aber jetzt versuchen wir, einige der weniger wichtigen Elemente auf der Seite in Beziehung zu setzen . Und natürlich können Sie einige der sehr wichtigen Elemente mit einigen der weniger wichtigen Elemente in Verbindung bringen. Wenn wir mit der Erstellung von Designs beginnen, haben Sie natürlich eine sehr wichtige Überschrift mit einigen etwas weniger wichtigen Elementen darunter. 9. Ausrichtung: Wie wir bereits erwähnt haben, werden die Dinge etwas chaotisch werden, sobald Sie zu viele Elemente auf Ihrer Seite haben. Und so werden wir natürlich anfangen, einige Regeln zu erstellen , um eine gewisse Konformität hinzuzufügen. Es gibt also nur einen kleinen Raum für kreatives Chaos. Zum Beispiel können wir die Anzahl der Farben einschränken, die wir verwenden können. Vielleicht sagen wir, dass es nur drei spezifische Farben gibt, die wir für diese Formen in unserer Komposition verwenden können. Wir werden später im Kurs mehr über Farben sprechen. Aber jetzt sprechen wir über unser Kompositionslayout. Vorhin sagte ich, Sie könnten anfangen, eine Art Gitter in Ihrem Kopf zu erstellen oder sicherzustellen, dass die Dinge ausgerichtet sind, um zu versuchen, dieses Chaos zu reduzieren. Wir werden auch später im Kurs über Gitter sprechen . Aber im Moment fängst du an, einige Kompositionen zu erstellen. Und einige von ihnen haben viele Elemente. Sie sehen langsam ein bisschen chaotisch aus. Wir wollen sicherstellen, dass wir die Dinge miteinander in Einklang bringen. Und deshalb wollte ich einige Dinge vorschlagen, die diesen Ausrichtungen helfen könnten, gut auszusehen. Auf dem Bildschirm habe ich drei gleichermaßen große Boxen die gleiche Farbe und sie passen ordentlich in dieses imaginäre Raster. Ich hab es überlegt. Wenn ich ein viertes Feld hinzugefügt habe, möchte ich idealerweise nicht, dass es nicht an demselben Raster ausgerichtet ist, indem die Positionen einschränkt, in denen Elemente in meiner Komposition erscheinen können. Ich gebe ihm ein Gefühl der Konformität, was ihm ein schönes befriedigendes Muster gibt das der Benutzer anschauen kann. Vielleicht möchte ich jedoch einige visuelle Interessen schaffen und ich möchte vielleicht etwas Chaos, in diesem Fall scheint vielleicht ein Element nicht auf den Rest des Rasters ausgerichtet zu sein. Aber selbst dann möchte ich entscheiden, dass nur ein Element in meiner Komposition an das Raster ausgerichtet werden kann. Diese Regeln werden sich jedoch je nach Komposition ändern , die wir erstellen. Oft abhängig von der Art des Gefühls möchten wir , dass die Komposition der Person, die sie ansieht, einflößen soll. Wir könnten so etwas schaffen, wo es eine schöne Ausgewogenheit für die Komposition hat, aber auch ein bisschen Kontrast zwischen links und rechts hat und einfach die größte Form zwei verschiedene innerhalb des Rasters, also ist es größer. Wo dies etwas komplizierter wird , ist, wenn wir mit der Einführung verschiedener Formen beginnen, sie aber auf dasselbe Ausrichtungsraster anwenden möchten. Wenn wir zum Beispiel die Komposition wie diese wollen, wo wir ein Quadrat und einen etwas leichteren Kreis ausbalancieren . Der Kreis wird nicht so aussehen, als würde er in dieses Raster passen, genauso wie das Quadrat, weil die Ecken nicht wie ein Quadrat ausgefüllt sind . Der Kreis hat keine schöne flache Kante um bündig mit dem Ausrichtungsraster zu sitzen. Damit unser Kreis also in das gleiche Ausrichtungsraster passt, möchten wir ihn tatsächlich so leicht erweitern. Wir wollen sein Gewicht leicht nach außen schieben. Und jetzt fühlt sich das vielleicht ein bisschen mehr so an, als wäre es am selben Raster ausgerichtet wie das Quadrat. Im letzten Video haben wir darüber gesprochen, Beziehungen zu Shapes aufzubauen , wenn sie zusammengehören oder es eine Art Beziehung zwischen dem gibt , was diese Formen für die Seite bedeuten. Wenn wir zum Beispiel wollten, dass dieses Quadrat und der Kreis ausgerichtet werden und sich auch in irgendeiner Weise beziehen. Vielleicht würden wir sie tatsächlich basierend auf dem Mittelpunkt der beiden Formen ausrichten . Nehmen wir an, wir wollten aus irgendeinem Grund den Kreis eher an der Grundlinie des Platzes als an der Mitte des Platzes ausrichten der Grundlinie des Platzes , wie wir gerade über die Größenbestimmung gesagt haben, wir werden ihn schieben ein bisschen über diese Linie hinweg. Ich stelle mir gerne vor, dass diese Zeilen ein bisschen schwammige Gattung haben. Jetzt machen wir einfach dasselbe mit einer etwas anderen Form mit einem Dreieck. Wenn wir das Dreieck so oben hätten, würde es wahrscheinlich auf der gleichen Grundlinie sitzen. Aber wenn wir es umdrehen, dann ist es an einem sehr, sehr scharfen Punkt, der aufgrund der zentralen Gewichtung wahrscheinlich etwas nach unten drücken wird . Und wenn wir das Quadrat und das Dreieck zentral ausrichten wollten , wartet das Dreieck offensichtlich auf der größeren Seite. Also werden wir das tatsächlich ein wenig nach unten drücken und dies so behandeln, als wären die zentralen Punkte des Dreiecks etwas weiter vom Pointier entfernt. Und überlegen Sie sich, wo der Mittelpunkt des Gewichts der Form ist und nicht das eigentliche Zentrum. Und schließlich, wenn wir aufhören, für eine Sekunde über Rasterlinien oder Ausrichtungslinien nachzudenken, denken wir über eine Reihe von Formen in einer gleichmäßigen Abfolge nach. Sie können sehen, dass ich den Kreis tatsächlich etwas größer und das Dreieck etwas größer gemacht habe, um über diese Baselines und diese oberste Linie zu schieben. Aber ich möchte darüber sprechen, wie sie horizontal über den Bildschirm verteilt sind . Nun, im Moment, was ich früher ähnlich wie die Rasterlinien gemacht habe , ist, dass ich einen gleichen Abstand zwischen der Kante jeder dieser Formen gelegt habe . Jetzt ist das Problem hier wieder, dass die Quadrate eine sehr flache Kante haben. Sie sitzen bündig gegen diese Lücke. Während das Dreieck und der Kreis sehr präzise Punkte haben sehr präzise Punkte , die den Rand der Lücke berühren. Anstatt diese Formen auszuräumen, beschäftige ich mich viel mehr mit der Fläche des Raums zwischen den einzelnen Formen. Wenn ich mir stattdessen die drei Zwischenräume zwischen den Formen anschaue, merke ich schnell, dass dieser Raum auf der linken Seite viel, viel kleiner ist. Also möchte ich diesen Kreis rüberschieben und dass der Platz rechts etwas kleiner ist. Also möchte ich dieses Dreieck nur ein bisschen nach links zerquetschen . Und wenn ich diese Formen jetzt wieder einfärbe, bin ich viel glücklicher damit, wie gut sie verteilt sind. Natürlich arbeitest du immer noch mit Stift und Papier. Sie stellen sich also die Rasterlinien vor oder stellen sich diese Bereiche zwischen ihnen vor. Und ich möchte Sie dringend bitten, weiterhin mit Stift und Papier zu arbeiten, weil wir unsere Augen trainieren und unsere Intuition trainieren, indem wir jede dieser Kompositionen erstellen. Nehmen Sie die Kompositionen, die Sie für die letzten beiden Abschnitte erstellt haben , und erstellen Sie sie neu, aber nehmen Sie sich etwas mehr Zeit darüber, vielleicht machen Sie sie ein bisschen größer und verbringen Sie Zeit, um über die Ausrichtung nachzudenken. wie nah jede Form zueinander ist und warum die Komposition, und warum die Komposition wir in dieser Übung erstellen, fast genau so aussehen wird wie die beiden vorherigen. Aber glauben Sie mir, es wird einen großen, großen Unterschied machen . Immer wenn ich einen Anfänger, Grafikdesigner oder einen Webdesigner sehe , verwende ich ein Raster und denke über die Ausrichtung nach. Ehrlich gesagt ist es die Nummer eins , die diese Kompositionen einfach viel professioneller aussehen lässt . 10. Sequenz und Pace: Mit all den Dingen, über die wir gerade gesprochen haben, Hierarchie, Beziehungen und dann Ausrichtung. Wir sprechen sehr darüber, auf der Seite ein Gefühl der Ordnung zu schaffen . Wir schaffen immer noch viel Chaos mit dem Ausdruck und dem Kontrast. Und dann schaffen wir einfach eine ganze Ordnung. Ordnung geht es um die Funktion der Seite, aber das Tempo dreht sich ein bisschen mehr um das Geigen. Wir werden jetzt ein bisschen mehr über Tempo sprechen. Wenn man sich Musik vorstellt, hat Musik natürlich ein Tempo. Sieh dir diese Boxen auf dem Bildschirm an. Sie sind gut in einem ganz bestimmten Tempo verteilt. Stellen Sie sich ein Lied vor, das sich nur wiederholende Beats hat. Diese Komposition ist einem Lied sehr ähnlich , das während des gesamten Liedes nur kontinuierlich wiederholende Beats hat . Jetzt kann ein Lied mit kontinuierlichen sich wiederholenden Beats durchaus befriedigend sein. Wir mögen es vielleicht sehr, aber wir werden uns schnell langweilen. Es wird eintönig. Und wo wir es für unser Gehirn ausschalten werden, wird schlafen. Es könnte eigentlich ziemlich gut zum Schlafen sein. Was wir mit einer Komposition machen werden, ist , was wir mit Musik machen werden, sehr ähnlich. Vielleicht entfernen wir einfach ein paar dieser Beats. Vielleicht ist einer von ihnen Offbeats oder synkopiert. Vielleicht verlängern wir einige dieser Beats, oder vielleicht lassen wir es einen anderen Klang haben oder in diesem Zusammenhang wäre es natürlich eine andere Farbe. Wenn wir unserer Komposition ein Raster hinzufügen, schaffen wir natürlich unnatürlich eine Form von Rhythmus. Wir kreieren natürlich Beats , bei denen bestimmte Elemente in unserem Design sitzen. Worüber wir in diesem Video ein bisschen mehr nachdenken , ist, erzeugt die Position dieser Beats einen interessanten Rhythmus? Gibt es ein schönes Tempo auf der Seite? Und das ist ziemlich unmöglich , wenn wir von diesem horizontalen Tempo sprechen , das von links nach rechts geht. Und das liegt daran, dass wir natürlich wissen, dass wir unsere Mobiltelefone manchmal auf unserem iPad benutzen. Und die Breite des Designs, die Komposition wird sich drastisch ändern und viele Bits werden sich bewegen, und daher wird es dieses horizontale Tempo ziemlich ruinieren. Auch wenn Sie auf ein Mobiltelefon schauen, Es gibt keinen großen Unterschied von links nach rechts. Wenn wir also in die Welt des Webdesigns zurückkehren, wollen wir wirklich an unser Tempo von oben nach unten denken , das vertikale Tempo. Für die letzte Übung in diesem Modul möchte ich, dass Sie mit einem vertikalen Canvas arbeiten, der hier wie ein weißer Bereich auf dem Bildschirm aussieht , ob Sie ihn in Kästen auf einem Stück herauszeichnen Papier oder was auch immer sonst ist absolut in Ordnung. Stellen Sie sich zunächst vor, es hat diesen sich wiederholenden Beat , weil es die Seite heruntergeht. Oder du könntest es leicht mit Bleistift über deine Komposition zeichnen . Und dann werden wir eine Komposition aufbauen , in der wir Elemente hinzufügen , die nur eine Linie zu diesen ersten Beats haben. Offensichtlich könnten wir sie alle in der gleichen Größe aufstellen die Seite so heruntergehen. Aber das wird wirklich langweilig und es wird unseren Benutzer zum Einschlafen bringen. Versuchen wir stattdessen, diese Formen in verschiedenen Größen und leicht unterschiedlichen Farben aufzubauen diese Formen in verschiedenen Größen und leicht unterschiedlichen , um zu versuchen, ihr ein interessantes Stück auf der Seite zu geben , aber immer noch an diesen zugrunde liegenden Beats auszurichten. Probieren Sie ein paar verschiedene Versionen aus. Probieren Sie verschiedene Formen aus, wenn Sie möchten. Aber versuchen Sie zu bemerken, wenn etwas besser funktioniert und wenn es zum Beispiel diese Orange nicht ist , nimmt es nicht zu viel Platz ein, aber wenn wir eine große orangefarbene Form hätten, könnte es ein bisschen zu viel sein. Es kann die gesamte Komposition übernehmen, ein Tempo, mit dem Sie zufrieden sind, und versuchen Sie dann, der Komposition ein paar andere Elemente hinzuzufügen . Ich denke über all die anderen Dinge nach über die wir in diesem Kurs gesprochen haben. Denken Sie darüber nach, wie sich die Dinge zueinander beziehen und ob die Komposition gut ausbalanciert ist und ob es einen gewissen Kontrast gibt. Nehmen Sie sich ein bisschen Zeit, um auf diesen endgültigen Kompositionen aufzubauen , um alles zu integrieren, was wir im gesamten Modul gelernt haben . Verbringen Sie also ein bisschen mehr Zeit damit und verwenden Sie an dieser Stelle ein Grafikprogramm. Wenn Sie sich dabei wohler fühlen, möchten Sie sicherstellen, dass Ihre Leinwand, die Form, die Sie erstellen, die Komposition im Inneren vertikal ist. Es sind Porträts. Es ist, es ist höher als lang. Zeichnen Sie leicht einige Linien mit einer konsistenten Lücke dazwischen. Stellen Sie sich vor, dies ist Ihr zugrunde liegender Beat Ihrer Seite, das Tempo. Und dann verwende diese Beats, um unterschiedlich große Boxen zu erstellen, die den Hintergrund Ihrer Komposition bilden und ihnen verschiedene Farben und unterschiedliche Höhen machen . Verwenden Sie schließlich alles andere, wir im gesamten Rest dieses Moduls gelernt haben , um der Komposition drei oder vier weitere Elemente hinzuzufügen. Und dies könnte Ihre letzte Gelegenheit sein , etwas zu schaffen, bei dem Sie kein anderes Ziel im Sinn haben, nur darum zu spielen und ein bisschen Spaß zu haben und zu versuchen identifiziere, was deiner Meinung nach gut aussehen könnte. Stellen Sie also sicher, dass Sie ein bisschen Spaß mit diesem haben. 11. Zusammenfassung: In diesen ersten Videos haben wir an mehreren schnellen, aber sehr praktischen Übungen gearbeitet aber sehr praktischen Übungen , die jeweils auf den letzten aufbauen und unsere Augen trainieren und unsere Intuition trainieren , um bessere Gespräche zu führen. sind so oft zu diesen zurückgekehrt, wie Sie möchten. Lassen Sie die Komposition gut aussehen, bevor Sie anfangen, über den Inhalt, das Branding oder irgendetwas anderes nachzudenken. Wenn wir später mit der Positionierung des tatsächlichen Inhalts auf der Seite arbeiten , denken wir an 100 andere Dinge und es wird uns dann wirklich schwer werden , herauszufinden, ob die Gesamtzusammensetzung ist ausgewogen, visuell interessant oder sogar wenn die Komposition selbst die richtige Botschaft vermittelt , indem sie unabhängig vom Inhalt der Seite an diesen Übungen arbeitet . Es ist jetzt eine zweite Natur für uns. Es kommt natürlich zu uns, wenn wir es brauchen, und wir müssen nicht bewusst darüber nachdenken damit unsere Kompositionen gut funktionieren.