Kreatives Layout-Design für Web- und UI-Designer ► keine langweiligen Layouts mehr | Muhammad Ahsan Pervaiz | Skillshare

Playback-Geschwindigkeit


1.0x


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

Kreatives Layout-Design für Web- und UI-Designer ► keine langweiligen Layouts mehr

teacher avatar Muhammad Ahsan Pervaiz, UI UX Visual Designer 15+ Years

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.

      Welcher Kurs behandelt?

      2:28

    • 2.

      Grundlagen des Layoutdesign

      8:59

    • 3.

      Inhalt definiert das Layout

      7:44

    • 4.

      Was sind Raster, Gutter und Ränder

      8:24

    • 5.

      So kombinierst du Spalten in Raster in Raster

      4:46

    • 6.

      Grundlinie und vertikaler Rhythmus

      11:55

    • 7.

      Vertikale Blocks für den Abstand ► Geheimnis

      9:12

    • 8.

      Ausgleich deines Layouts mit Blöcken

      10:39

    • 9.

      Abgleich deiner Layoutbeispiele

      10:20

    • 10.

      Single für Web- und mobile Apps

      9:33

    • 11.

      Projekt

      2:33

    • 12.

      Zwei column mit Beispielen

      9:55

    • 13.

      Projekt

      2:15

    • 14.

      Multi in column

      8:51

    • 15.

      Projekt

      2:01

    • 16.

      Flower

      7:03

    • 17.

      Projekt

      1:37

    • 18.

      Freiberufler im Webdesign und Mobile App-Design

      9:59

    • 19.

      Verhüten

      9:14

    • 20.

      Kreative Nutzung im Layoutdesign

      10:50

    • 21.

      Projekt

      1:13

    • 22.

      Out und overlay in Layoutdesign

      7:30

    • 23.

      Webdesign und Mobile aus box

      11:14

    • 24.

      Projekt

      1:27

    • 25.

      Emphasis im Layoutdesign verwenden

      10:59

    • 26.

      Bewegungen im Layoutdesign verwenden

      7:15

    • 27.

      Left für die Left

      15:18

    • 28.

      Dank allen

      0:37

  • --
  • 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.

2.667

Teilnehmer:innen

45

Projekte

Über diesen Kurs

Layout ist eines der Dinge, die die Geschichte deines Designs erzählt. Wie dein Website-Design entfaltet Wenn dein Layout groß ist, wird das user von Vulkanen

Es ist einer der Designbereiche, in denen die meisten Webdesigner und Benutzeroberfläche Designer viel aufschlagen Ich habe grundlegende und fortgeschrittene layout erstellt, die ich nach dem Einwerfen und Analysen von Hunderten von verschiedenen Web- und mobilen Web- Designs von vielen großen Designer:innen out

Also nicht mit langweiligen boxed

Dinge in diesem Kurs lernen

  • Entwerfen von ansprechender und leistungsstarker Layouts

  • Entwerfen von ähnlichen langweiligen Layouts wie andere UI-Designer

  • Warum erstellst wir Layouts (ihr Zweck)

  • Was sind Raster, Ränder und Ränder

  • Ein-/, zwei oder mehrheitliche Layouts von Spaltenen

  • Was sind flower an, wenn du sie verwenden kannst.

  • Was ist ein masonry von Mauer?

  • So verwendest du Margen auf Website

  • Wie du die Boxen und overlapping im Layoutdesign verwendest

  • Eine einfache Regel zu finden, die dein Layout hervorragend machen kann

mit der Menge von Beispielen und sample Ich versuche jedes Prinzip des Layoutdesign in einfachen Begriffen zu erklären, damit es dir leichter machen würde, was du dir diger. Ich habe die 5+ Aufgabe, diese Designkenntnisse in der Layoutdesign zu meistern.

Lass uns jetzt anfangen und tolle Layouts entwerfen

Triff deine:n Kursleiter:in

Teacher Profile Image

Muhammad Ahsan Pervaiz

UI UX Visual Designer 15+ Years

Kursleiter:in

Hi, I'm Muhammad Ahsan, a Senior UX/UI & Product Designer with 20 years of experience in UX design, product strategy, and design consultancy.

I started my journey from scratch and went on to work with FORTUNE 500 companies including Intel, Panasonic, and Coca-Cola, along with SaaS startups and ProductHunt launches. I've helped teams design user-centered products and UX onboarding systems, including a startup that ranked Top 3 Product of the Day on ProductHunt.

Currently, I work as a Lead UX Designer at Prodesign.tech, where I design and scale dashboards, portals, and SaaS applications. For the past few years, I've been leading UX efforts for a U.S.-based weight loss healthcare company, LumiMeds, designing patient, provider, and admin portals used by real users daily.

<... Vollständiges Profil ansehen

Skills dieses Kurses

Design UX/UI-Design Webdesign
Level: All Levels

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. Welcher Kurs behandelt?: Design ist wie eine Geschichte. Also, wenn Sie Ihren Benutzern eine Geschichte über Design erzählen, wird Ihr Layout entscheiden, wie diese Geschichte entfaltet werden soll. Wie du auf den Zeh gehst. Erzählen Sie dem Benutzer den ersten Teil der Geschichte, den zweiten Teil der Geschichte und dann die Drehungen oder interessanten Teil der Geschichte oder Features aus Ihrem Produkt So wird Ihr Design auf eine sehr schöne kreative Art und Weise entfalten. Wenn Ihr Layout in gerade so Layer-Design am wichtigsten ist, nehmen Sie Teil von Ihrer mobilen App, entwerfen Sie Ihre Website, Ihr Landing Page-Design, was auch immer Sie Layout entwerfen wird eine wichtige Rolle bei der Entscheidung spielen wie Ihre Geschichte Ihren Benutzern erzählt wird. Also dieser Kurs wird Ihnen helfen zu verstehen und einige kreative Vase zu entfalten , die Geschichte und wie Sie gehen Zehe, äh, legen Sie verschiedene, freundliche Designs und wie verschiedene Layouts kreativ sind, die gehen , um Ihnen dabei zu helfen, sich von der Masse abzuheben. Also andere Designer könnten sie einfache Layouts machen. Vier Säulen oder vier verschiedene Boxen. Ich werde Ihnen eine Menge Techniken zeigen, die Ihnen helfen werden, aus der Box herauszukommen und kreativ Outs zu kreieren. Wir werden eine Menge von verschiedenen, im Grunde, Outs sehen im Grunde, . Wir werden verschiedene Spalten, Gitter, Führungssysteme, verschiedene mobile Labore verstehen Gitter, Führungssysteme, , in denen Sie diese Ideen anwenden können, die ich Ihnen einige Übungen geben werde, um diese Fähigkeiten zu meistern. Also, wenn Sie Schwierigkeiten haben wie ich, als ich anfing, entworfen der schwierigste Teil für mich WAAS Layout-Design. Dann habe ich weiter verschiedene Designs analysiert und ich sortiere, du weißt schon, verstehe verschiedene Techniken, und ich werde sie auf einfache Weise erklären, so dass Sie diese Techniken im mobilen App-Design implementieren können Design und Website-Design. Also hoffe ich, Sie werden die Partituren genießen. Wenn Sie Fragen haben, können Sie mich immer stellen, und ich hoffe, Sie bald in den Schulen zu sehen 2. Grundlagen des Layoutdesign: Fangen wir mit ein paar kleinen Grundlagen an. Nun, die erste Frage, wann immer Sie mit Ihrem Design beginnen, sollten Sie sich fragen, welchen Zweck dieses Layout dient? Warum erstellen Sie dieses Layout? Was sind die Informationen, die Sie Ihrem Benutzer übermitteln? Also sind diese eigentlich von den wenigen Fragen, mit denen Sie beginnen sollten. Wenn Ihr Benutzer nicht in der Lage ist zu verstehen, was Sie versuchen, sie zu zeigen oder was Sie versuchen, wissen Sie, sie zu vermitteln, als Ihr dann ist Ihr Layout ein fehlgeschlagen. Jetzt habe ich viele Designer gesehen, dass sie sehr kreative Layouts erstellen, und sie zeigen viele verschiedene Stile in den Layouts. Aber das Problem mit ihren Entwürfen ist, dass es nicht verwendbar ist. Das erste ist, dass Sie verstehen müssen, dass wir ein Layout erstellen, um die Informationen oder die Bilder oder unsere Inhalte oder unsere Botschaft an unsere Benutzer in einer sinnvollen und verdaulichen Weise zu zeigen Informationen oder die Bilder oder unsere Inhalte oder unsere Botschaft an unsere Benutzer in einer sinnvollen und . Das ist also der Zuckerguss. Zweitens müssen Sie einige in nur Punkten in Ihrem Layout erstellen, so dass Sie Zehe brauchen, etwas haben, das ihnen die Zehe zeigt. Erkunden Sie dieses Layout ein bisschen mehr. Okay, das sind also die ersten Fragen, die Sie Ihren Benutzern immer stellen sollten. Nun gehen wir zur nächsten Sache über, die auch eine wichtige ist, die eine Priorität hat. Jetzt. Die zweite Frage, die Sie Ihren Benutzern oder Ihren Kunden oder Ihrem Unternehmen stellen werden, oder dass die Person, für die Sie entwerfen, ist, was der wichtigste Teil dieses Designs . Nun, das ist, Ah , Frage, die ich denke, viele Designer vermissen, was Ihre Benutzer zum ersten Mal in Ihrem Design sehen werden. Die Dinge sind viel. Dies sind tatsächlich erste Eindrücke und verwenden Benutzer geht Toe basierend auf ihren Entscheidungen auf ihren ersten Eindrücken oder das erste Mal, welche Informationen sie sehen werden. Wie fängst du deine Designgeschichte an? Wie sich die Geschichte entfaltet, damit Sie sehen können, wenn Sie einen Film ansehen oder einen Film ansehen. Die ersten 5 oder 10 oder 15 Minuten gehen zu Fuß. Schaffen Sie Interesse an dem Film, so dass sie manchmal etwas in der Zukunft zeigen, und dann werden sie zurückgehen und zeigen, dass eine Stunde später oder eine Stunde davor, oder Dinge wie diese. Sie werden also ein gewisses Interesse an Ihrer Studie wecken und wie Sie es entfalten damit Sie vielleicht gehört haben, dass unser Begriff „Full“ heißt und „Design vier“ eigentlich die erste Instanz ihres Designs im Betrachterfenster ist . Zum Beispiel, wenn sie mit ah, Desktop anzeigen , haben sie möglicherweise abgefaltet. 700 Pixel sind 800 Pixel auf einem mobilen Gerät. Vielleicht haben sie 600 oder so etwas. Also, das sind eigentlich Ihre Rahmen. Wenn Sie ein Foto gesehen haben, gibt es einen Rahmen, der dieses Foto enthält. Wenn sich also ein Bild außerhalb des Rahmens befindet, können Sie es nicht anzeigen. Sie können es nicht sehen, also müssen Sie in einer sehr vorrangigen Weise denken, welche Informationen die wichtigsten sind. Soll ich das Anmeldeformular oben bekommen, oder sollte ich oben ein Video hinzufügen? Dies sind also ein paar Fragen, die Sie Ihrem Unternehmen und Ihren Benutzern stellen sollten. Nun ist die dritte Frage, was ist die Art von Inhalt oder das Medium, für das Sie entwerfen. Also, wenn Ihr Design wird auf einem Kindle-Gerät gelesen werden, oder ob Ihre Benutzer gehen, um diese App auf einem Mitarbeiter auf einem Handy zu sehen. Alles, was sie gehen, konsumieren diese Inhalte auf Industrie, PC oder Laptop. Dies sind also tatsächlich die Fragen, die Sie stellen werden, bevor Sie mit dem Layer-Design beginnen . Es gibt also eigentlich zwei Arten von Grundtypen, von Content-Websites oder Designs. Ein Design ist Inhalt schweres Design, so haben wir eine Menge Rabatt auf Steuern. Wir haben eine Menge Bilder, wie ein News-Websites Blog verschiedene Artikel Websites, Dinge wie das. Dann haben wir einen zweiten Typ , der sich auf wenige Produkte oder nur ein Produkt konzentriert. Wenn wir also ein Produkt haben, zum Beispiel eine mobile App oder ein mobiles Spiel, haben wir sehr weniger Inhalte. Wir wollen nicht, du weißt schon, du weißt schon, wie Hunderte von Absätzen für dieses Produkt schreiben. Wir werden uns also mehr auf sehr kleine Linien konzentrieren, sehr wenige Funktionen, die unsere Benutzer davon überzeugen werden, unser Produkt zu kaufen. Dies sind also zwei verschiedene Typen von Layer-Designs, die basierend auf Ihren Inhalten Fuß gehen. Also Inhalt geht eigentlich Zehenform. Ihr Layout und andere Frage, die ich meinem Unternehmen oder meinen Benutzern stellen werde, ist, für welche Art von Sicherungen ich entwerfe, aber dass sie ältere Benutzer dort sind, alte Menschen und sie sind Kinder. Sie sind Millennials, oder moderne Menschen sind. Sie sind in ihren dreißiger oder vierziger Jahren. Wie gut, sie sind mit der Technologie vertraut. Das sind also die Fragen. Zum Beispiel, wenn ich für Kinder entwerfe, werde ich größere Großbritanniens einfachere Worte und, ah, ah, sehr helle oder scharfe Farben für die Burtons haben. Und auch werde ich die Informationen in einem einfachen Layout präsentieren. Ich werde nicht, wissen Sie, um den Herrn zu bewegen und eine ganz einzigartige heraus zu schaffen, wo meine und die Kinder oder die alten Leute Schwierigkeiten haben, die Informationen zu finden, die sie wollen. Das ist also sehr wichtig. Wenn Sie ah haben, alte Leute sind Kinder oder andere Art von Benutzern, werden Sie anders aus Designs haben. Zum Beispiel, wenn Sie gesehen haben, dass Design-Agenturen, sie verwenden viel Kreativität in ihren Websites oder Web-Designs, weil sie diese Art von Benutzern oder Zuschauer oder Verbraucher haben . Also, wenn jemand zu Fuß gehen, eine kreative Agentur, werden sie Zehe verstecken sie für einige kreative Arbeit, so dass sie ihre Kreativität in ihrem Layout Design ihrer Website Dinge wie diese zeigen. Das ist also sehr wichtig. Sie müssen überlegen, welche Art von Benutzer Sie entwerfen. Moment ist das letzte grundlegende Off-Layer-Design Funktion über Form. Das ist also ein sehr altes Sprichwort aus Grafikdesign. Und wenn Sie aus einem Grafikdesignhintergrund sind, wissen Sie das bereits. Nein, was bedeutet das eigentlich? Es bedeutet, dass, wenn Sie eine Website oder mobile App oder Zielseite oder ein Design haben, Ihr Layout die Funktionalität Ihres Designs unterstützen sollte, die Sie für zuerst die Funktionalität Ihrer App, Ihrer Webseite oder was auch immer Sie entwerfen. Dann wird die zweite Priorität für die Ästhetik gehen oder Sie werden,wissen Sie, wissen Sie, fügen Sie einige Farben oder etwas Kreativität hinzu. Also hier mein Rat ist, begrenzen Sie Ihre Kreativität. Layout sollte zuerst seinem Zweck dienen. Es bedeutet also, dass wir eine brauchbare App erstellen werden, anstatt unbrauchbar sehr kreativ aus. Also, wenn Sie ein Layout entwerfen, gehen Sie Fuß. Halten Sie Ihre Kreativität in Schach. Versuchen Sie nicht, ein Layout zu erstellen, das zu verzerrt oder zu schwierig ist, und es unterstützt nicht die Funktionalität von der APP zum Beispiel, Sie haben eine Menge APS gesehen. Wir, wie Sie die Bestellung aufgeben und die Schaltfläche „Bestellung platzieren“ ist am unteren Rand. Jetzt ist es unten. Aus irgendeinem Grund ist es ein wenig zu Benutzerfreundlichkeit und einfache Nutzung. Wenn Sie also versuchen, diese Schaltfläche oben oder in der Mitte des Bildschirms zu platzieren, wird es einige Probleme für Ihre Benutzer zu schaffen. Denken Sie also daran, dass die Funktionalität Benutzerfreundlichkeit auf der Lesbarkeit Lesbarkeit diese mehr Bedeutung haben als Ihre Form oder eine Statik oder solche Dinge. Das wird also diese Lektion zusammenfassen. Ich hoffe, Sie haben es genossen und sehen uns bald in der nächsten Lektion. 3. Inhalt definiert das Layout: Dies ist ein weiterer Fehler, den viele Designer tatsächlich machen, und das ist ohne Ihren Inhalt. Erstens können Sie kein Layout entwerfen, das Sie nicht definieren können. Ihre verschiedenen Elemente werden gehen, wie sie übereinander gehen oder nebeneinander oder Dinge wie diese. Sie können das Layout nicht bestimmen, wenn Sie nicht über Ihre Inhalte verfügen. Daher können Sie nicht entscheiden, wie viele Inhaltsblöcke Sie haben. Zum Beispiel haben wir eine Überschrift eine Unterüberschrift, als wir wenige Bilder in der Kopfzeile haben. Also haben wir, wie sechs oder sieben Elemente in unserem Header. Das sind also die Fragen. Dies sind die Dinge, die Sie haben müssen, bevor Sie mit einem Layout-Design beginnen. Wenn Sie also drei Gegenstände haben, die Sie haben können, können Sie sie arrangieren. In drei parallelen Boxen. Sie können eine Box ein bisschen größer und zwei Boxen auf der rechten Seite haben, so gibt es mögliche Arrangements, die durch die Anzahl der Elemente entschieden werden Sie haben. Also holen Sie sich die Inhalte von Ihrem CEO aus dem Geschäft oder anderen Ihrem Kunden, für den Sie entwerfen oder wer auch immer wird, diese Inhalte jetzt zu schreiben. Inhalt bedeutet nicht, dass nur Text und Bilder, die Sie haben, Radios haben. Vielleicht haben Sie Illustrationen. Möglicherweise haben Sie Symbole. Versuchen Sie also alle diese verschiedenen Dinge zusammen, bevor Sie mit Ihrem Design beginnen. Sie werden Ihre Kunden und die E-Mails fragen, die ich brauche diese Art von Bildern, die ich nicht brauche. Ich möchte diese Bilder von geringer Qualität oder solche Dinge nicht. Sie müssen auch Zehe bekommen Symbole, die unsere kleine Zehe ähnliche Team von Ihren Bildern oder Ihren Text. So sammeln Sie alle Daten und fragen Sie Ihren Kunden, die senden Sie mir all diese Bilder, den Inhalt, die besteuert, so dass ich anfangen kann, an meinem Layout oder Design zu arbeiten. Lassen Sie mich Ihnen nun ein paar Beispiele zeigen, wie unterschiedliche Inhalte Ihre Designs gestalten werden. Lassen Sie mich mal ein paar Beispiele sehen. Nein. Hier sind ein paar Beispiele. Websites zwang seine CS Bezirke. Es ist eine inhaltliche schwere Website für Web-Entwickler. Obwohl sie sind, verwenden sie viele tolle Farben, gutes Layout, sehr unterschiedliche und einzigartige Website. Aber immer noch ist es eine inhaltliche schwere Website. Wir haben eine Menge Text hier drüben. Sie können sehen, dann haben wir verschiedene Artikel hier drüben Sie sehen oder hören können. Und ach, wieder haben wir ein paar Artikel und in Zerstörung. Und wenn wir auf Artikel öffnen, zum Beispiel, dieser ein So werden Sie sehen, dass alles für ein besseres Lesen ausgelegt ist. Also haben wir ah, einfacher zu navigieren, leichter zu lesen, leichter zu verdauen in verschiedenen Abschnitten, die Sie hier sehen können. Das ist also eigentlich der Zweck von dieser Website. Nun, wenn wir auf den nächsten Inhalt Harry Website, die BBC Englisch, BBC Tür com und Sie können sehen, wir haben Neuigkeiten, wir haben Top-Nachrichten hier drüben. Dann haben wir hier drüben einige Nachrichten mit ein paar Texten und Bildern. So ist es im Grunde glücklich mit Text und Bildern. So können Sie sehen, dass dies tatsächlich ein weiteres Beispiel von einer inhaltsschweren Website ist. Wir haben viel Inhalt. Jetzt gehen wir zu diesem. Dies ist Bolivar Club dunkel sietch, und Sie können hier sehen, es ist nicht ein sehr Inhalt mit Websites. Wenn wir nach unten gehen, können Sie sehen, wir haben eine sehr kreativ aus. Texas bewegte sich ein bisschen auf der rechten Seite und Sie können diese einfachen Emissionen sehen. Und wenn wir nach unten gehen, können Sie sehen, dass wir weniger Bilder haben, weniger Zeilen vom Text, den Sie sehen können, haben wir einen Absatz auf Überschrift. Das war's. Das ist also das Ende. Das ist also eigentlich keine inhaltliche schwere Website. Es basiert auf einigen Service, einfache Sarees oder ein oder zwei Dienstleistungen und sehr einfache und einzigartige Website. Wenn wir zum nächsten Beispiel gehen, das Fitbit Ah ist, passt dies versa. Light Edition Website Und Sie können sehen, dass dies tatsächlich auf ein einzelnes Produkt konzentriert ist. So haben wir ein sehr großes Produktbild mit großem Produkttitel und einem Shop ohne Button. Also wieder, wir haben einige Features hier drüben mit dem mit dem Hintergrundbild. Dann haben wir wieder ein Bild und eine Steuer oder hier haben wir wieder etwas Neues und man kann sehen oder hören. Wir haben sehr wenige Zeilen aus Text, weil wir uns auf ein Produkt konzentrieren, so dass Sie sehen können, dass das Produktbild in den Benutzern erstellt wurde. Sie zeigen also sehr mächtige Bilder. Sie können hier sehen, sie haben ihre App, Bildschirmhaie und dann haben wir verschiedene, ähm hier, verschiedene Funktionen. Auch hier haben wir einige Funktionen auf der linken und auf der rechten Seite. Wir haben Bild ändert sich mit den Funktionen, so dass Sie so etwas sehen können. Dann können Sie wieder ein Bild Sterblichen sehen, das diese Uhr trägt. Und nur wenige Decks und Linien waren hier. So haben Sie die Idee, dass es sich nicht um einen Inhalt Terry Website. Es ist tatsächlich behauptet, ein einzelnes Produkt und konzentriert sich auf ein einzelnes Produkt. Lass uns noch einen sehen. Okay, hier haben wir einige, denke ich, eine Designfirma oder eine Designagentur? Innenarchitektur, schätze ich. Und Sie können sehen, dass sie eine einfache, aber einzigartig aus erstellt haben. Sie haben, wie, drei Spalten 12 und drei auf der linken Seite. Sie haben wenige Menüs und Angriffe in der Mitte. Sie haben ein Bild auf der rechten Seite. Sie haben ein paar andere Treffen oder solche Dinge. Projektinformationen. Also wieder, wir haben sehr wenige Steuern, weil ah, hier, ihre Arbeit wird zeigen, was sie tatsächlich tun können. So können Sie hier schöne Bilder von diesem Bürodesign sehen. Dies ist tatsächlich in Ihre Design-Website und Sie können das nächste Projekt sehen. Dies konzentriert sich also tatsächlich auf einen einzigen Dienst. So haben Sie jetzt verstanden, was ich eigentlich gemeint habe, indem Sie den Inhalt für haben. Also, wenn Sie alle Inhalte haben, zum Beispiel, wissen Sie, dass auf dem ersten Bildschirm, zum Beispiel, dieser hier drüben, wenn Sie all diesen Text haben, diese Funktionen, Sie wissen bereits, dass Sie fünf Funktionen haben. Dann werden Sie sie auf diese Weise zeigen, wenn Sie wie vier Funktionen haben, können Sie sie in vier verschiedenen Boxen übereinander gezeigt haben. Also lassen Sie mich es Ihnen zeigen. Also, wie Sie sehen können, was? Hier haben sie drei Funktionen. Anstatt sie horizontal zu zeigen, nahmen sie die vertikale Richtung ein. Das ist also eine weitere Option mit dem Layout, also wird der Inhalt tatsächlich Ihr Layout definieren. Wie viel komplexer Inhalt Sie haben, wie viele Spalten Sie werden machen, dass Sie gehen, um sie in 50 50 Spalte zu zeigen oder Sie gehen toe, haben ein anderes Layout. Also hoffe ich, dass Sie die Idee nicht von diesem Inhalt zerstört haben, der Inhalt hat, bevor Sie mit einem Layer-Design beginnen . Machen sie diesen Fehler nicht? Ich gebe Ihnen einen aufrichtigen Rat. Fahren wir mit der nächsten Lektion fort. 4. Was sind Raster, Gutter und Ränder: re Designer. Wiederverwendung Greets Zehenform unser Design, um unser Layout zu gestalten und verschiedene Design-Elemente entsprechend dem Zehenraster zu arrangieren . Warum verwenden wir Noten? Weil menschliche Köpfe, wir mögen organisierte Dinge. Wir mögen ausgewogene Schichten. Wir versuchen, das Gleichgewicht auch mit dem Ungleichgewicht in der Natur oder den Dingen zu finden. Wir werden also verschiedene Sorten verwenden, und wir werden unsere verschiedenen Elemente entsprechend ausrichten, um unser Design zu gestalten. Lassen Sie uns nun verstehen, was eigentlich unsere Noten, wenn Sie bereits wissen, was unsere Noten, Ränder, Dachrinnen oder verschiedene Begriffe, überspringen Sie diese Lektion Für diejenigen, die nicht wissen, Lassen Sie uns auf die nächste Folie gehen. Jetzt können Sie sehen, ich zeige Ihnen eine 12 Spalte Glaubensbekenntnis für Website-Design, und es heißt Grundsätzlich Bootstrap Bridge. Boot Shop ist ein Design-Framework für Web-Entwickler, so lassen Sie uns sehen, was unsere verschiedenen Teile aus dieser Klasse. So können Sie in der Mitte sehen. Wir haben 12 dunkle Linien oder dunkle bläuliche Linien dunkel. Ich würde sagen, dass sie schwarze Linien nur der Einfachheit halber. Okay, also haben wir 12 schwarze Linien in der Mitte. Dies sind eigentlich andere Säulen, so dass unsere verschiedenen Designelemente würden sie in zwei Säulen oder drei Säulen sind vier Säulen, abhängig von ihrer Größe und Rasse und ihrer Anordnung in der Mitte. Du siehst orangefarbene Linien und das sind eigentlich Curtis. Das sind tatsächlich Leerzeichen zwischen verschiedenen Spalten. Also im Moment sind sie 30 Pixel und die Spalte Bert ist 65 Bilder. Also werden diese Räume tatsächlich etwas Atemraum in unseren Inhalten oder innerhalb unserer Seite auf der linken und rechten Seite haben. Sie können die blauen Bereiche sehen, die tatsächlich Ränder sind. Die Ränder gehen zu Fuß. Haben Sie etwas Atemraum um Ihr Design. Also Rinnen werden einige Atemraum in Ihrem Design haben und Ränder werden sie auf der Außenseite haben. Also sind diese beide sehr, können Sie sagen, sehr wichtig. Jetzt werde ich eine Ressource teilen, wo Sie alle verschiedenen Arten von verschiedenen Rastersystemen für verschiedene Geräte herunterladen können und verschiedene Sie wurden Werkzeuge für Abb ma für Roby X t für den Shop für Skizze entworfen . Es ist nicht von mir, und es ist von einigen Sie sind Designfirmen, also werde ich diesen Link teilen. Normalerweise verwende ich sie in meinen Projekten. Ich öffne einfach das Gitter und beginne von dort aus mein Design zu bauen. So stellen Sie sicher, dass Ihr Download, dass ich Fuß den Link enthalten. , Lassen Sie mich Ihnen zeigen,wie Sie diese Noten verwenden werden und wie ich das einfache Design war nur um Ihnen zu zeigen, wie man diese Kisten benutzt. Jetzt können Sie alles hier an der Spitze sehen. Hier drüben haben wir eine sehr große Überschrift, die diese ist und ich benutze Ah, das ganze vert von diesem hier und einfach zentriert. Richten Sie es aus. Wenn Sie also ein Element haben, das in der Mitte ausgerichtet ist oder in der Mitte von Ihrem Design ist, werden Sie sich nicht um Ihre Krippen kümmern. Dies ist also auch Mittellinie, und diese Belastung ist auch zentriert Linie. Aber Sie können sehen oder hören, dass sich diese Last über vier Spalten erstreckt, so dass Sie sehen können, dass es tatsächlich 1234 Spalten sind, einschließlich ihrer Dachrinnen. Also, wenn Sie ah platzieren, Ihre Design-Objekte, sie gehen Fuß. Sie gehen Zehe nehmen wie, ganze zwei Spalten oder vielleicht drei Spalten und oder vielleicht volle Spalte 678 Aber es gibt einen Teil weil ich viele Studenten gesehen habe, dass sie anfangen, diesen Fehler zu machen. Schränken Sie Ihre Kreativität nicht ein, dass wir einen Knopf haben, der den Fuß perfekt passt. Diese vier Spalten, können Sie eine Last wie diese haben. Okay, also hängt alles von deinen eigenen Ideen ab. Und Sie können Sie gehen nicht immer die Zehe. Verwenden Sie die Wörter und Höhen von Ihren Elementen. Laut Toa dieses Skript, sie sind nur da, um verschiedene Dinge auszurichten. OK, also fahren Sie jetzt mit dem nächsten fort. Sie können den nächsten Abschnitt sehen. Wir sind hier voraus. Ich habe diese Grafik auf der linken Seite, die eine Illustration ist, und Sie können sehen, dass ich sie habe. Ah, in 1234567 Spalten. Es nimmt also sieben Spalten hier drüben. Und dann habe ich diese Marge verlassen und ich begann mein Dies ist im Grunde gooder. Und dann begann ich meinen Text zu verlassen entdeckt. Was bedeutet das eigentlich, ist, dass, wenn Sie Ihre Noten Anzahl von Noten zu einem Inhalt zuordnen , Sie gehen Toe verlassen. Und der nächste wird einen Abstand zwischen ihnen haben. Also brauchen wir etwas Distanz. Also müssen wir diesen Spielraum verlassen. Versuchen Sie also, das zu verstehen. Zum Beispiel, wenn ich versuchen Zehe, äh, sagen wir, ich versuche, das zu quetschen. Hoppla, ich habe es versucht. Verschieben Sie das. Und hier drüben. Jetzt können Sie sehen, dass ich 1234 Spalten hier drüben verwende. Und ich verlasse diese beiden Rinnen und das nennt ihn tatsächlich von hier aus. Nein, so etwas kann ich nicht tun, obwohl ich es schaffe. Aber das bedeutet eigentlich, dass ich 12345 Spalten nehme. Egal, ob Sie es hier oder da drüben verschieben, Sie verwenden fünf Spalten. Also, wenn du Ah, ganze Spalte nicht verlassen wirst , wirst du diesen Raum eine Spalte verlassen und es ist Roller. Okay, Sie jetzt, wenn ich will, O arrangieren meine Sie sehen, Hoffnungen X bewegen das. Ich werde es hierher bringen. Jetzt braucht es vier Säulen, nicht fünf. Aber wenn ich meine Designelemente lächle, fängt es an, die nächste Rinne zu besetzen. Es nimmt tatsächlich die nächste Spalte. Stellen Sie also sicher, dass Sie entwerfen und verstehen, wie diese tatsächlich schafft funktionieren. Lass mich zum Laden gehen und dir zeigen, was ich eigentlich gemeint habe, lass uns, ähm okay, also wenn ich es quetschen will, will ich vielleicht mehr Platz haben. Und ich will, weißt du, es über Hit schaffen. Okay, jetzt kannst du es sehen. Obwohl ich die Größe von dieser Grafik reduziert habe, dauert es immer noch 1234567 Spalten. Also, wenn ich versuche, es ein bisschen mehr zu reduzieren. Also hier drüben, es braucht sieben Spalten. Wenn ich will, dass es sechs Säulen nimmt, habe ich die Zehe weg von diesem Schneider. Jetzt nimmt es 123456 Spalten. Und wir haben hier eine Spalte hinterlassen. Das ist also tatsächlich zu verstehen, wie Sie diese Gitter verwenden werden? Viele Designer, meine Studenten, sie machen Fehler. Sie wissen nicht, wie man sie benutzt. Also denke ich, das wird Ihre Meinung in Bezug auf Ihre deutlich machen. Erhöhen. Wenn Sie noch Fragen haben, können Sie sie fragen. Ich habe Studenten gesehen, die mir tatsächlich 10 Fragen an einem Tag gestellt haben, und ich weiß es wirklich zu schätzen. haben, Okay, gehen wir zur nächsten Lektion über und graben uns ein bisschen mehr in die Noten 5. So kombinierst du Spalten in Raster in Raster: jetzt. Hast du schon etwas über Griggs erfahren? Nein, nein. Die Frage ist, wie wir verschiedene Spalten innerhalb eines Rasters kombinieren werden. Warum sollte ich vier Spalten für diesen Inhalt kombinieren? Und warum nicht sechs Säulen oder die Hälfte der Säulen? Es wird also von den Inhalten abhängen, die Sie haben. Wenn Sie nur wenige Zeilen haben, passen sie möglicherweise in drei Spalten. Wenn Sie nur ein Logo haben, passt es möglicherweise in zwei Spalten. Das ist also eigentlich die Frage, die Sie stellen werden, dass Ihr Inhaltstyp Ihre Kisten und das Layout definieren wird . Das meinte ich also. Ihre Inhalte. Wenn es klein ist, wird es in Schlepptau passen. Kleinere Säulen. Anzahl der Spalten. Und wenn wir ein sehr großes Bild haben, kann es 12 Spalten aufnehmen oder sogar außerhalb davon gehen. Lassen Sie mich Ihnen das zeigen und illustrieren mit einem Beispiel, das wir in der letzten Lektion gesehen haben. Also lass uns jetzt sehen. , Das ist das gleiche Design,das ich dir in der letzten Lektion gezeigt habe. Und Sie können sehen, dass ich ein bisschen vom Layout-Overhead geändert habe. So können Sie sehen, wir haben ah Grafik auf der rechten Seite haben wir 123456 Spalten und die strukturelle hier nimmt auch sechs Spalten oder hier, so können Sie sehen oder hören Es ist bis zu hier, aber tatsächlich nimmt es sechs Spalten ab. Wann immer Sie Entwickler oder Quartal sind, werden sie vor Gericht dieser Website. Sie gehen Fuß und entwickeln diese Website. Sie gehen auf die Zehe. Suchen Sie hier sechs Spalten für die Stapel und richten Sie sie auf der linken Seite aus. So können Sie sehen, dass ich Ihnen in der letzten Lektion gezeigt habe, dass Sie sie entweder in der Mitte ausrichten können oder Sie können sie auf der linken Seite haben. Das ist also jetzt völlig anders. Im nächsten Abschnitt können Sie sehen, wir haben unsere Dienstleistungen BIP, unser BIP sind oder diese Symbole haben wir so Symbole und diesen Text haben wir sehr kleinen Text. Es ist wie drei Linien oder maximal vier Linien. Also, was ich getan habe, ist, dass ich tatsächlich vier Spalten für jede von ihnen vier Spalten als eine Gosse hier drüben gefunden habe. Dannhaben wirnoch haben wir vier Säulen hier drüben. Dann sind wir hier drüben. Dann wieder, wir haben vier Spalten waren hier, so können Sie sehen, das ist. Eigentlich sind wir das. Und das ist eigentlich, wie wir Joes Ingrid benutzen. Also verlassen wir diese Dachrinnen, so dass die Zehe etwas Atemraum in diesen drei Inhaltsblöcken haben , also müssen Sie das im Hinterkopf behalten. Dies sind drei Inhaltsblöcke und lassen Sie uns de ausgewählt auf. Außerdem können Sie hier wieder sehen. Wir haben zwei verschiedene Inhaltsblöcke eins und so sind dies zwei Hauptblöcke. Eine ist eigentlich die Einleitung oder eine Rubrik. So sind die Tag-Zeile und dann eine Belastung. Auf der rechten Seite haben wir eine Illustration. Das sind also eigentlich zwei verschiedene Inhaltsblöcke, die wir haben. Also eigentlich, wir entwerfen in Blöcken. Okay, also, ähm, was ist das sonst? Wann immer Sie Raster verwenden, denken Sie nicht nur in Zahlen wie 678 Versuchen Sie, in Prozentsätzen wie diesem zu denken , ist 50% und das ist 50%. So haben wir Spalten großen Spalten, die 50 50% nehmen ein wenig 50% für dieses Bild oder Illustration, und 50% für den Inhalt. Dann hier drüben haben wir 33% oder 33,33 33,3 t und 30 Punkt TT. Das ist eigentlich so, wie Sie denken werden. Wenn Sie ein flexibles oder reaktionsfähiges Design haben möchten, werden Sie nicht in Begriffen nachdenken. Zwei Spalten, drei Spalten oder 12 Spalten mit 16 Spalten oder sieben Spalten. Sie werden in Prozent denken, dass dieses Layout 60% Bild und 40% Text und solche Dinge hat . Das ist also eigentlich ein sehr wichtiges Konzept. Deshalb habe ich dieses Design erstellt, und ich habe es gehandelt und es nach oben geändert, um Ihnen zu zeigen, dass ein einzelner Inhalt mehrere Layouts hat . Nein, ich hoffe, Sie haben die Bedeutung dieser Creeds verstanden und wie Sie verschiedene Layouts löschen können . Wie Sie in Bezug auf Prozentsätze denken und Ihre Layouts erstellen. Wenn Sie Fragen haben, fragen Sie mich. Fahren wir mit der nächsten Lektion fort. 6. Grundlinie und vertikaler Rhythmus: Nun haben wir bereits über Säulen und Rastersysteme gesprochen, die aber grundsätzlich horizontal in links-rechts-Richtung sind. Jetzt werden wir über den Abstand von oben nach unten sprechen, der als vertikale Grade oder vertikaler Rhythmus bezeichnet wird. Jetzt habe ich viel darüber in meiner Typografie Gores Kurs gesprochen, aber jetzt werde ich es noch einmal wiederholen, weil es sehr relevant für Ihr Layout und Ihren Abstand ist . Wenn Sie sich hier ansehen, habe ich diese Basis für Nein gezeigt. Wenn Sie sich hier ansehen, Das erste, was Sie etablieren müssen, ist Ihre Basis. Vier. Baseball-Größe ist eigentlich die vierte, die Sie für alle Ihre Absätze oder 90% Rabatt auf Ihre Absätze verwenden werden. Dies wird die Basis für alle Ihre Berechnungen sein. , Jedes Fort,was auch immer Schriftart Sie nachlassen, Sie werden eine Zeile haben. Höhe Linienhöhe ist eigentlich der Abstand zwischen zwei Linien. Sie können die obere und die untere sehen. Und wenn ich hier drüben klicke, sehen Sie rechts. Wir haben 24 Zeilenabstände online. Verstecken. Wenn ich versuche, es zu erhöhen, können Sie sehen, dass die Linien Fuß gehen, auseinander fallen und mehr Platz darin haben. Jetzt wird diese Zeilenhöhe eine sehr wesentliche Regel in Ihrem vertikalen vertikalen vertikalen Rhythmus spielen . Also, was wir tun, ist eine Basis für die Größe als eine Zeilenhöhe zu etablieren, und dann multiplizieren wir beide Werte 18 multipliziert mit 1,3333 und es ist fast näher an 24 Pixel. Nun, diese 24 Pixel werden tatsächlich die Basis sein, oder Sie können sagen, basierte Einheit von Ihrem vertikalen Raster. Jetzt werde ich Ihnen die vertikale Note in Adobe X D zeigen. Sie können es in für den Shop tun. Sie können es in einer Skizze tun. Wenn Sie mich wollen, kann ich ein YouTube-Tutorial auf, dass erstellen Sie vertikale sie auf allen drei thes drei Sie weiße Design-Tools. Okay, also basiert auf gut, haben wir Grundlinie Höhe. Multiplizieren Sie Baseboard, Multiplayer-Linie Höhe. Wir haben Baseline Creed. Es versucht, vier Pixel. Jetzt können Sie sehen, dass ich Ihnen zeigen kann, wie Sie es tun können. Und Sie können sehen, das ist eigentlich keine NATO 18 24. Also das ist eigentlich hatten wir mit basiertem Telefon und Leitungshöhe von 1,33, die 24 sein wird . Lassen Sie mich Ihnen ein Beispiel zeigen. Lassen Sie mich Ihnen das gleiche Design zeigen, das wir in der Vergangenheit gemacht haben. Und wenn wir hier rüber gehen, lassen Sie mich diese Wiederholungsnote verstecken und auf diesen Inhalt, oder hier sehen Sie, dass das dasselbe ist, was wir entworfen haben. Ich ändere das Layout ein wenig. Wir haben Mittellinie, alles oben. Und dann haben wir diesen Bereich unserer Dienstleistungen. Jetzt können Sie den Abstand sehen, wie ich werde. Nein, Nein, dass dieser Text diese Überschrift und der Abstand zwischen der Unterüberschrift so sein muss, wie ich die Entfernung kennen werde. Ah, im vertikalen vertikalen Abstand zwischen meinen verschiedenen Gegenständen. Zum Beispiel, dieses eine Lasst uns hier rüber klicken. Und wenn ich die Art oder Optionstaste drücke, können Sie sehen, dass ich den Abstand zwischen gekauften sie sehen kann. Es ist fast 88 Pixel auf. Dann, wenn ich wieder hier drüben klicke, ist dies 1.3 wieder, wenn ich Overhead klicke 46. Okay, eine weitere Sache ist, dass im Webdesign Ihre Zeilenhöhe anders funktioniert. So können Sie sehen, dass wir haben, wenn ich diese wähle, ist es 24. 36 ist die Zeilenhöhe für diese und 24 ist die Größe. In ähnlicher Weise haben wir 67 67 ist diese Größe für die Linienhöhe, die eine 100% Linienhöhe ist. Okay, also tatsächlich, Sie können sehen, dass Sie Raum über diesem und unter diesem Text sehen. Das ist also ein wenig Unterschied im Webdesign, dass unabhängig von der Zeilenhöhe Sie wählen werden , es wird Zehe diesen ganzen Block für diesen Raum haben. Also wird dieser ganze Block 67 Pixel von der Höhe nehmen. Also müssen Sie bedenken, dass, wenn Sie hier klicken, können Sie sehen, dass es 36 Zeilenhöhe ist, so dass es 36 Pixel vertikal Zehe nehmen wird, wissen Sie, dass dieser Text erlaubt. Also, wann immer Sie für Websites entwerfen, können Sie sehen, was ein kostenloser Klick hier Dieses Haus hat viel Platz oben und unten ähnlich, dies und dies auch. Jetzt können Sie sehen, wie ich dieses vertikale Gut geschaffen habe. Also, wenn ich das ein bisschen so mache, damit Sie hier drüben sehen können, wenn wir genau hinschauen, können Sie sehen, dass dieser Text hier drüben es innerhalb dieser X Zoom in ein bisschen mehr ist Es ist dieser einen Zehe sehen, eso gewann Zehe sehen und vier, fast vier Baselines. Also das ist eigentlich, wenn wir es ausrichten wollen, können wir es auch so auf das Leben ausrichten Dies Also wenn Sie genau sehen, die gesamte Entbeinungsfläche ist tatsächlich in der blauen. Also haben wir 12345 Also haben wir fast fünf vertikale Räume dafür. Ok, In ähnlicher Weise, wenn wir hier klicken, können Sie sehen, dies ist unser Text. 123456 Städte nehmen fast sechs und dann haben wir fast drei oben und drei nach unten fast. Oh, Bill! Also, wenn wir es ein bisschen nach oben bewegen, können Sie sehen, dass es auf eine Linie geht. Dieser Begrenzungsrahmen wird an diesen Linien über Kopf ausgerichtet. So werden wir unsere Sachen ausrichten. Jetzt bewegen wir das ein bisschen nach unten. Ähm, also haben wir so etwas. So, jetzt können Sie sehen, dieser Block Blue Block ist in dieser vier Rose. Das sind also eigentlich unser vertikaler Rhythmus Rose. Dann haben wir diese Stunde. Burton, wenn wir hier klicken, können Sie sehen, dass es auch 12345678 vertikale Räume nimmt. Und ähnlich, Sie gehen Zehe Raum aus Ihren ganzen Entwürfen. Alles wird vertikal angeordnet sein. Jetzt gibt es einen Trick. Wenn Sie etwas entwerfen, offensichtlich, wenn Sie, wenn Sie gehen, um eine neue blockieren Informationen einen neuen Abschnitt von Ihrer Website ein neues um zu starten , können Sie sagen, Funktion von Ihrer Website oder was auch immer Sie sind entwerfen. Du wirst hier mehr Platz haben. Sie können sehen oder hören. Wir haben hier etwas mehr Platz. Dann haben wir zwischen diesen Lasten und dieser, Sie können sehen, dass es in Ordnung ist, also ist das sehr wichtig. Mehr Platz, wenn Sie einen Abschnitt mehr Platz beginnen, wenn Sie einen Abschnitt beenden und weniger Platz, wenn Sie in einem Abschnitt sind, so wie Sie sehen oder hören können Hier zeige ich die Abschnittsüberschrift Dienste und dann haben wir paar Symbole hier drüben. Das ist also eine andere Sache. Ich denke, wir werden darüber reden. Ich werde Ihnen meinen Prozess und mein Design zeigen, an dem der letzte Designer gearbeitet hat und wie er tatsächlich entstanden ist. Ah, das ganze System aus vertikalen Matratzen und man kann Ziegel sagen. Normalerweise nenne ich sie vertikale Steine. Und ich benutzte diese vertikalen Blöcke oder Ziegel Zehe erstellen mein ganzes Design und Ausdruck. Das ist also sehr wichtig. Sie müssen diese vertikale erstellen. Großartig. Wenn Sie wissen möchten, wie Sie dieses vertikale Raster erstellen, erstellen Sie einfach ein erstellen, erstellen Sie einfach ein Rechteck von 24 Pixeln und entfernen Sie diesen Rahmen oder hier. erstellen, erstellen Sie einfach ein Rechteck von 24 Pixeln und entfernen Sie diesen Rahmen oder hier. Ändern. Ich werde die X-Farbspitze so etwas ändern, und dann werden wir und dann werden wires duplizieren und replizieren, und ich werde alle Zwischenräume zwischen ihnen entfernen. es duplizieren und replizieren, Ich werde es so ein bisschen langweilig machen. Nein, wir müssen sie ausschalten. Wiederhole, große, geschaffene Gier, Gier, und wir werden es so wiederholen. Jetzt schließen wir die Lücke zwischen diesen beiden. Und hier haben wir den ganzen Mäzen. Sie können in ähnlicher Weise einen Schirmherr für einen kurzen Shop erstellen und dieses Muster im Hintergrund von Ihrem Bild anwenden . Alle Ihre Website Sie können sehen, ob ich diesen Text hier drüben wie ich. Bewegen Sie es ein bisschen nach oben. Und wenn ich es hierher schiebe, kannst du sehen, dass es jetzt in all diese Linien passt. Das ist also eigentlich vertikaler Rhythmus. Also habe ich 24 große Linienhöhe, so dass es perfekt in 1234 vertikale Räume passt. So funktioniert der vertikale Rhythmus, und Sie werden Dinge ausräumen. Also, zum Beispiel, wenn ich so etwas oder hier habe und ich eine Überschrift hier rüber schaffen will, jetzt, wenn Sie sich hier ansehen, kann ich es zwischen diesen drei Zeilen platzieren. Also gerade jetzt, es nimmt tatsächlich die drei vertikalen Räume. Also, wenn du es so hierher schieben willst, kannst du das auch tun. Und wir haben fast die Hälfte des Raumes zwischen diesen beiden. Mal sehen, wie viel Platz wir dazwischen haben. Wir haben haben 11.3. Also machen wir es 1000 es Dean und 11. So können Sie noch eine Sache haben, die Blöcke genannt wird und zum Beispiel haben wir 24 Pixel aus vertikalen Rhythmus und 1/2 aus 24 ist 12 so kann ich ein 12 Leerzeichen zwischen Bord diese haben . Das ist also eigentlich 48 56 Zeilenhöhe, und das ist 18 Pixel von einigen Decks und 24 Zeilenhöhe, und der Abstand zwischen ihnen ist tatsächlich exult 12 Pixel. Du kannst so etwas haben. Also, jetzt werde ich diesen Beat verstecken, erstellen, erstellen, und Sie können sehen, dass wir einen sehr schönen ausgewogenen Abstand zwischen der Überschrift haben und es ist besser Diagramm . Das ist also, denke ich, eine sehr einfache Technik, und Sie können eine sehr einfache Methode sagen, die viele Designer in ihrem Design verwenden. Deshalb haben sie Ungleichheiten in ihrem Abstand vertikal und horizontal. Und ich hoffe, Sie haben diese Lektion genossen. Wenn Sie irgendwelche Fragen zu vertikalen, großartig haben, werde ich in den nächsten Lektionen mehr ins Detail gehen, um mich zu fragen Lassen Sie uns zur nächsten Lektion 7. Vertikale Blocks für den Abstand ► Geheimnis: Jetzt haben Sie bereits über vertikale erstellt gelernt. Aber jetzt werde ich mit Ihnen ein Geheimnis aus teilen. Große Designer erstellen Ihre Designer, erstellen Webdesigner, und das ist mit Leerraumblöcken oder Ziegeln. Ich nenne sie Steine. Sie können sie vertikale Matratzen oder vertikale Blöcke oder was auch immer Sie haben nennen. Du willst sie anrufen. Das werde ich Ihnen zeigen. Wie? Eigentlich habe ich dieses Design an mir erstellt. Teilen Sie mit Ihnen, wie ich tatsächlich X Höhe erstellt habe. Diese Ok, also ist das eigentlich ein Design aus der Zielseite? Ich habe es vor kurzem getan. Trotzdem arbeiten wir an der Werbeseite von diesem, so dass Sie sehen oder hören können. Dies ist ein sehr ausgewogenes Design. Sie können den Abstand zwischen verschiedenen Elementen zwischen verschiedenen Abschnitten und den Überschriften und den Inhalt ihres Abschnitts sehen. Und das ist konsequent hier drüben. Sie können einige ähnlich sehen hier wieder in diesem Abschnitt. Ich werde diesen Entwurf teilen. Vielleicht einen in den nächsten Lektionen. Mehr, weil ich dir noch ein paar Techniken aus Alignments und Leo X zeigen muss. Jetzt liegt das Geheimnis in deinem vertikalen Abstand. Lassen Sie uns das hier verstecken, und ich werde Ihnen zeigen, wie ich das System tatsächlich ausgeschaltet habe oder Leerzeichen kichern kann. Auf der linken Seite können Sie sehen, dass ich einige Komponenten habe, die 1 2096 70 bis 64 56 48 genannt werden. Dies sind alle verschiedene Ziegelgrößen oder vertikale Blöcke. SoHo. Ich platziere tatsächlich meine Gegenstände. Lassen Sie mich Ihnen zeigen, ob wir diese 20 hier drüben platzieren. Es ist also 1 20 Pixel. Sie können sehen, dass dies tatsächlich Komponenten sind. Also werde ich so ein Experiment machen. Ich werde dir in einer Minute mein Geheimnis von Designs zeigen. Und ich denke, ich denke wirklich, dass die meisten Leute es nicht so benutzen. Okay, also fast 20 einschließlich dieses Schattens wie diesem. Also wird es hier sein 24. Ich glaube, wir haben 36 hier drüben. So wie das. Ähm, das wird drinnen sein. Nur klingeln. Ok. Also wieder, 1 20, weil wir einen Abschnitt Hoppla, Abschnitt oder hier haben. Sie können hier sehen, wie ich das unterschiedliche Abstandssystem zwischen verschiedenen Elementen verwende. Ich denke, das reicht. Mehr als genug. Ich habe hier ohnehin schon eine Menge von rosa Linien erstellt, also ist das eigentlich, wie Sie Abstandssystem aussehen sollten. Jetzt können Sie sehen, dass dies tatsächlich eine geheime Technik ist. Ich enthülle gerade jetzt. Ich habe viele Designs gesehen und ich war nicht in der Lage zu verstehen, wie die verschiedenen Abstände Welt. Also schickte ich eine E-Mail und überlegte mit zwei erfahrenen Mawr-Designern und fragte sie, wie. Eigentlich sind der Raum verschiedene Abschnitte und sie sagten, dass der obere und der untere Teil jedes Abschnitts fast gleich ist. Also was auch immer, Sie gehen, um an der Spitze zu verlassen, wie wir 20 Bilder gewonnen haben und wieder unten haben wir 20 Picks gewonnen ist wieder, wenn ein neuer Abschnitt wird beginnen. Ich habe 1 20 Pixel oben und frage mich, dass Darstellungen aus weißem Raum unten sind und Sie können zwischen Abschnitten sehen, die wir weniger Basis haben, also müssen Sie zuerst ein Abstandssystem von Ihren Entwürfen erstellen. Also versuchen Sie Zehe, holen Sie diese Blöcke, und diese Blöcke gehen Fuß auf Basis Ihrer Basislinie. Also, zum Beispiel, wenn ich eine Basislinie wie, um 24 oder in einer geraden Zahl sein kann, versuchen Sie toe, haben eine Grundlinie in geraden Zahlen. Es ist einfacher und versuchen, Blöcke zu erstellen, die einen guten Unterschied untereinander haben. Wie 24 habe ich 24 36 48 56 64 72. Ich habe keine Dinge wie 1 21 118 Denn auf diese Weise, wenn ich versuche, ein 1 20 Raum und 1 18 dort zu schaffen, ist dieser Unterschied nicht spürbar. Also, wenn Sie dies erstellen, versuchen Ihre vertikalen Blöcke Zehe Blöcke haben verschiedene Größen, die eine gute Menge aus haben. Sie können sagen, wie 25 bis 30% einen Unterschied von der Größe zwischen ihnen. Sie können sehen, dass wir hier sind. Hier. Ich benutze 36 als 24 dann 1 2120 32 Es muss 36. Eigentlich glaube ich, dass ich hier ein paar Pixel verpasst habe. Also ist es eigentlich 36. Das muss eingeschaltet sein. Dies muss auch mit Ihrem gesamten Design übereinstimmen. Dann habe ich Untertitel zum Inhalt. 72 Pixel. 1 20 Dann wieder, eigentlich, eigentlich, ich habe ein bisschen weniger Platz hier drüben verwendet, weil ich denke, diese beiden Abschnitte sollten in ah, gleichen Abschnitt gehören , so dass sie fast verwandt sind. Also benutzte ich 1 20 Raum und dann änderte ich meinen Raum. Abgesehen von 72 habe ich 56. Das hier ist also noch eine. Dann haben wir wieder 20 an der Unterseite dieses Abschnitts gewonnen 64 nach dieser Rubrik 64 zwischen all diesen verschiedenen Testimonials. Dann wird wieder der neue Abschnitt beginnen. Also werde ich 1 20 unten lassen und ah, um Trennung zwischen diesen beiden zu haben. Dann wieder, wir haben 36 vor dem nächsten Slogan oder Sie können sehen, dass der zukünftige Absatz beginnt, als wir 56 zwischen diesen Aufzählungspunkten und diesem Absatz haben . Und dann wieder haben wir 48 48 40 Jahre und 48 Wiederholung für all diese Listenelemente. Dann haben wir wieder 20 gewonnen. Das ist also wirklich, wirklich wichtig. Sie müssen diese Technik auf Ihre gesamte Konstruktion und vertikale Richtung anwenden. Es geht auf die Zehe. Sie können sagen, verbessern Sie Ihr Design 200% so können Sie hier sehen, wenn wir zu diesem Abschnitt gehen und ich zog hier über, Dies ist tatsächlich 72 an der Spitze und 72 an der Unterseite. Das sieht also wirklich schön aus. Also wenn ich Wenn Sie sich dieses Design ansehen und ich versuche, es so etwas zu reduzieren, wird es nicht sehr schön aussehen. So hat es weniger Platz an der Tür. War mehr Platz an der Unterseite. Versuchen Sie also, etwas zu haben, das gleich oben und unten Für jeden Abschnitt, den Sie entwerfen , als innerhalb der Abschnitte, werden wir einige Abstandssystem definieren haben. Das ist also im Grunde Ihr Abstandssystem. Ich nenne es vertikale Blöcke. Ich benutze sie in all meinen Designs wie diesen. Sie können sehen, dies ist, wie tatsächlich, dies wurde ähnlich auf Ihrer mobilen Version auf Ihren mobilen Geräten angelegt. Diese Blöcke werden kleiner sein. Also hier können Sie sehen, wenn Sie sich alle hier ansehen, haben wir weniger Platz. Ich glaube, es sind 56 hier drüben, schätze ich. Hoffnungen? Ähm, 56. Ja. Also in meinem mobilen Design, was ich getan habe, ist, dass ich es tatsächlich reduziert auf 56 wir haben 56 oder hier ähnlich 56 hier drüben. So können Sie sehen, dass dies tatsächlich ist, wie Sie Ihr Design oder Blocksystem für Ihre mobile App ändern werden. Also werden wir kleinere Größen haben, weil wir kleine Bildschirme oder kleine Geräte haben. Ich hoffe, Sie haben gelernt und genossen dieses Geheimnis von meinen Entwürfen, und ich hoffe, Sie werden sie in Ihren Entwürfen versuchen, wenn Sie Fragen haben, mich zu stellen, lassen Sie uns mit der nächsten Lektion übergehen. 8. Ausgleich deines Layouts mit Blöcken: in dieser Lektion, werde ich teilen und andere Geheimnis, die Ihr Layout ausbalancieren. Es ist das schwierigste. Fragte viele von uns denken wir, dass wir ein symmetrisches Gleichgewicht zwischen allen verschiedenen Elementen haben sollten off over design. Wir haben Angst davor, Leerraum zu nutzen. Die meisten Male, die wir versuchen zu füllen und auszugleichen, wurden verfeinert, dass sie hier sind. Wir haben den leeren Raum, den wir versuchen, ihn auszufüllen. Also das ist die, ah, viele Designer. Das sind die größten Fehler, die sie machen. Ich habe viele Designer gesehen, sogar mich. Ich waas, glaube ich, vielleicht vor ein oder zwei Jahren war ich so. Ich habe nicht verstanden, wie eigentlich der weiße Raum funktioniert und wie du auf den Fuß gehst. Du kannst das Ah benutzen, in einer Menge von verschiedenen Phasen. Also, was wir hier tun werden, ist, dass es zwei Punkte gibt, die Sie im Auge behalten müssen. Nummer eins ist, dass, wenn Sie Ihre Layouts ausbalancieren, Sie denken, wie Sie verschiedene Holzblöcke haben und Sie sie übereinander setzen . Das ist ein Weg, um dein Layout auszugleichen. Also, als ob ich zwei Holzkiste mit Haftbefehlen, Platten oder was auch immer Blöcke unten habe. Dann werde ich einen aufstehen, und ich werde einen anderen an die Spitze stellen. Also das geht eigentlich Zehe haben eine ganz anders heraus. Also werde ich Ihnen einige Beispiele zeigen und es dann besser erklären, denn ich denke,Sie könnten sich vorstellen, wie es möglich ist? , Also lassen Sie uns einige Beispiel-Layouts sehen und sehen. Und dann gehen wir. Ich werde Ihnen einige echte Beispiele von verschiedenen Websites oder Webdesigns zeigen. Toe, erhalten Sie den Einstieg mit diesem Layout-Ausgleich. , Das ist das erste Layout,das ich dir zeigen werde. Viele Male haben Sie vielleicht verschiedene Zeitschriften, verschiedene Bücher gesehen , und Sie haben sie gelesen. Und Sie haben gesehen, dass dies eine Art von typischen Leo Sie haben. Sie haben einen großen Leerraum rechts oben unten links. Und eine Sache, die Sie alle hier bemerken werden, ist, dass wir mehr Leerraum hier auf der linken Seite haben , und wir haben auch eine Menge Leerraum an der Spitze. So funktioniert eigentlich dieser Leerraumblock. Und dann haben wir diese drei Blöcke hier drüben für den Inhalt. Und wieder, wir haben viel Leerraum. Oder Sie können sagen, gut hier drüben, um diese beiden Stücke von Informationen wie diese zu trennen. Okay, dann wieder, wir haben eine Lücke auf der rechten Seite, die wieder Marges auf der rechten Seite genannt wird. Also haben wir so etwas. Und wieder haben wir, ah, Grenzmarge für alles andere. So können Sie sehen, jetzt habe ich den Leerraum in diesem Design hervorgehoben, und es ist mehr als was auch immer der Inhalt ist. Wenn Sie also mehr Leerraum als der Inhalt haben, wird es sehr scharf und sauber aussehen. Das ist also ein weiterer Ausweg. Sie können Kontrolle sehen. Komm schon, D. Also haben wir das hier drüben, und du kannst dich sehen. Können wir haben Wenn Sie bedenken, dass dies drei Blöcke sind, kann dies auch ein Leerraum sein. Also, wenn ich diesen in den mittleren weißen Block entferne, kann das auch ein weißer Raum werden, so dass Sie ein sehr langes Bild hier haben können und dann Überschrift und Angriffe hier drüben haben können. Es hängt alles davon ab, was das Layout Sie versuchen. Es gibt also viele Möglichkeiten. Denken Sie nicht, dass Sie drei oder vier Spalten haben oder 50% für unser Bild und 50% für den Text. So gibt es viele Möglichkeiten, verschiedene Optionen für Ihre Layouts. Jetzt werde ich Ihnen eine andere Technik zeigen, die etwas Freiraum auslässt. Und es wird sehr, wirklich schön aussehen . Das ist also eine Technik, die ich benutze, wenn ich Dinge anlege. Und ah, was ist, dass du was sehen kannst? Hier. Hier haben wir einen großen Block , der 12345 Spalten nimmt und ich absichtlich eine Spalte dazwischen gelassen. Und dann wieder, ich habe mich geteilt. Sie können das Bild oder Informationen oder Symbole in drei verschiedenen Blöcken sehen. Also habe ich Sie sagen können. Eigentlich habe ich hier absichtlich einen Leerraumblock erstellt, also ist das sehr wichtig. In ähnlicher Weise können Sie sehen, dass wir wieder hier sind. Ich habe dasselbe getan, aber eigentlich habe ich es variiert. Also, was ich tat, ist, dass ich die Worte von meinen Blöcken vergraben habe. Sie können sehen, dass diese anders sind. Stellen Sie sich vor, dass dies verschiedene Holzblöcke sind. Wenn ich also so übereinander setze, werden sie leicht ausbalancieren. Ähnlich, anstatt hier einen weißen Raum zu leben, kann ich das gleiche tun durch Leerraum würde hier. Anstatt alles zu haben, kann ich das verwenden, damit ich all mein Design nach links verschieben und mehr Platz auf der rechten Seite haben kann . In ähnlicher Weise kann ich dasselbe tun, indem ich etwas Leerraum auf der linken Seite lasse und alles so herausschiebe . Das sind also verschiedene Optionen. Du musst trocken bezahlen. Versuchen Sie nicht, in nur Blöcken zu denken, und Sie können einfache Blöcke sehen und immer versuchen, so etwas zu tun . Wir müssen nicht alles so füllen, also versuchen Sie nicht, auf einfache Weise zu denken. Versuchen Sie, zu verlassen, versuchen, sehr Dinge, die anders sind und die werden ah haben, verschiedene Abstände Optionen, um einige Interesse zu schaffen. Jetzt hier habe ich noch einen Lee raus und du kannst sehen, dass alles gefüllt ist und ah, im Moment, was ich dir eigentlich zeigen will, ist ah, grobe Säulenkombination. So können Sie tatsächlich verschiedene Kombinationen aus Ihrer Rasterspalte erstellen, so dass Sie oben sehen können. Ich benutze 123 Blöcke und jeder Block nimmt vier Spalten hier drüben. Aber im nächsten Teil, was ich getan habe, ist eigentlich, dass ich es variiert habe. Ich habe gerade einen Block und einen größeren Block erstellt, um diesen Bereich abzudecken. Dies wird also etwas Interesse wecken, wenn Sie Ihre Combos ändern. Also, wenn Sie ah, Videospiel-Spieler, Sie wissen, dass, wenn Sie weiterhin O r mit der gleichen Combo Gin spielen und wieder, Sie gehen mit Ihrem Gegner zu verlieren. Es wird also nicht sehr interessant sein. Versuchen Sie also, Combos zu erstellen, wie zum Beispiel, ich kann auch so etwas tun. Vielleicht, Ah, ich mache so etwas. Anstatt drei verschiedene drei verschiedene gleiche Spalten zu haben, kann ich so etwas haben. Ich kann zwei Blöcke rechts und links haben, die gleich sind. Und in der Mitte habe ich zwei Blöcke, die zwei Spalten nehmen werden. So gibt es viele Variationen, die Sie Teig können, so versuchen, sehr Ihr Design. Vielleicht können wir so etwas hier überspringen und wir haben viel Leerraum. So gibt es viele Variationen, die Sie mit verschiedenen großen Spalten, Cambone-Kombinationen und mit Leerraum effektiv erstellen können. Nun, hier werde ich Ihnen noch einmal zeigen, wie Sie verschiedene Spalten kombinieren können. Sie können vier Elemente haben, die Sie haben können. Teilen Sie sie in zwei Teile. Sie können etwas zentriert wie dieses auf haben. Sie müssen sich keine Gedanken darüber machen, sie zu kombinieren. Du kannst alles haben, was Richie gewarnt hat. Und das ist fast Layout aus. Eine typische Website, die Sie rechts oben sehen können. Wir haben ein paar Links hier drüben als links. Wir haben ein Logo als die Überschrift, und dann haben wir vier Funktionen oder so etwas. Dann haben wir ein Bild. Wir sind hier auf der rechten Seite und auf der linken Seite haben wir wieder Text. Dies könnte ein E-Mail-Abonnierfeld oder so etwas sein. Hier bin ich. Kommen Sie die Kombination 3456 Sound it und vier Spalten und dann wieder, 50 50. Also versuchen Sie, sehr Ihr Layout, zum Beispiel. Ich habe vier hier drüben. Und wieder, ich muss jetzt hier rüber. Eigentlich habe ich meine Benutzer kaputt gemacht, man kann sagen, dass man die Augen benutzt, die man sehen kann. Jetzt sieht mein Benutzer den Raum so und dann habe ich ihn wieder gebrochen und den Raum hier drüben bewegt. Also haben wir jetzt einen Inhalt in Zerstörung. Ebenso wieder kam ich mit hier zurück, also ist das eigentlich sehr ating Ihren Leerraum und mit einer anderen, unterschiedlichen Kombination aus Ihren Spalten. Dies wird Zehe haben eine sehr gute Wirkung auf Ihr Design. , Das ist das letzte Beispiel,das ich Ihnen zeigen werde. Und das ist sehr einzigartig und sehr unterschiedlich aus und das ist eigentlich habe ich eine Menge von Websites gesehen , meist kreative Website operativen Agenturen, die diese Art von Layout verwendet, die alles wichtig ist, ist auf der linken Seite ausgerichtet. Also haben wir eine sehr große Überschrift hier drüben. Dies ist eigentlich, dass ihr Logo, die SEC. Dies ist eigentlich eine Navigation. Es kann oben sein, oder es kann auf der rechten Seite und auf der linken Seite sein. Wir haben sehr große und mutige Überschriften, und alles andere ist Leerraum. Das wird also Ach Herr auf diesen Abschnitt hier drüben auswirken. Es wird also eine Menge von Wichtigkeit haben . So etwas wie das. So wird es Zehe leuchten im Dunkeln. So ist es so etwas, dass man in einem weißen Raum dunkel sagen kann. Also, wenn Sie ah schwarzen Tisch in einem weißen Raum platzieren und es gibt nichts anderes, Sie werden sich immer auf diese schwarze Tabelle konzentrieren ähnlich, auf die im nächsten Abschnitt, was sie tun,ist, dass auf die im nächsten Abschnitt, was sie tun, wir Überschrift auf der linken Seite sehr große Überschrift und Text oder Informationen oder Bilder auf der rechten Seite, und sie gehen weiter so. Das ist also ein sehr schön auf sehr schönen Stil. Sie können es auf Ihren verschiedenen Websites versuchen oder stellen Nein, ich werde Ihnen einige Beispiele zeigen. Ich denke, diese Lektion ist schon sehr lang. Also werde ich zur nächsten Lektion wechseln, und wir werden einige echte Beispiele sehen und wie verschiedene Leerräume verwendet wurden, weil verschiedene Ebenen von verschiedenen Designern verwendet wurden. Gehen wir also zur nächsten Lektion über. 9. Abgleich deiner Layoutbeispiele: , Das erste Beispiel,das ich Ihnen zeigen werde, ist diese Seite. Ich erinnere mich nicht, tatsächlich weiter sammeln verschiedene Designs. Also das ist nicht mein Design auf diesem ist einige andere Designer Design. Wie auch immer, Ich mag es wirklich Wie einfach und elegant Es ist eine Menge von der Nutzung von Leerraum. Wenn Sie also genau hinsehen, können Sie auf der linken Seite sehen, dass wir hier drüben viel Leerraum haben. Also über Inhalt beginnt von hier drüben so und wieder unten. Wir haben eine Menge Arbeitsfläche auf der rechten Seite. Wir haben viel Arbeitsraum, und oben haben wir viel Leerraum. So können Sie sehen, es ist in der Regel unser Buch Lee heraus, wo wir mehr weißen Raum auf der linken und der unteren und auf der rechten und der oberen, wir haben weniger weißen Raum. Das ist also eine andere Technik, die Sie befolgen müssen. Sie haben tow erstellen so etwas, und es wird eine sehr beruhigende Wirkung oder sehr schöne Wirkung auf Ihre Benutzer haben. Äh, nur zum Spaß, ich glaube, sie haben sich vergrößert. Wenn dieses Bild und diese Linie aus diesem Feld und in den Rand, nur um etwas Interesse zu löschen . Und es sieht wirklich brauchen und wirklich nett aus. So werden Sie Ihren Leerraum effektiv nutzen. Versuchen Sie nicht den Zeh, haben Sie Angst vor dem weißen Raum. Versuchen Sie es zu verwenden und es wird eine sehr gute Wirkung auf Ihre Entwürfe zu erzeugen. Also lassen Sie uns ein anderes Beispiel sehen. Okay, hier ist ein weiteres Beispiel. Und hier können Sie sehen, es ist ein Design von Einkaufstasche für Seife Website. Ich schätze, das ist die Arbeit eines anderen Designers. Das ist nicht meine Arbeit. Ich wollte Ihnen zeigen, wie , diese Margen und diese Dinge funktionieren,und Sie können hier in diesem Abschnitt sehen. Wenn man es hier anschaut, hat es viel Platz auf der rechten Seite und auf der linken Seite. Okay, also nochmal, Sie können hier drüben diesen Abschnitt sehen. Wenn sich deine Augen in der Zerstörung bewegen, kannst du sehen, dass es hier den ganzen Raum einnimmt. Also, das ist tatsächlich begraben Ihre ah geschrieben von Ihren Inhalten. Also haben wir hier weniger Contador und viel Leerraum als wieder. Wir bewegen unsere Inhalte in den weißen Raum und dann wieder zurück. So können Sie sehen, dass dies einen sehr schönen Effekt erzeugen wird. Eigentlich, wenn Sie versuchen, Zehe, implementieren Sie dies. Das ist also wieder sehr tolles Design. Sie zeigen es in einem Buch. Bilden Sie es wieder. Wir haben mehr Platz oben und unten, und wir haben weniger Leerraum auf der rechten Seite. Das ist also eigentlich Buchform. Ich nenne es ein Buch für Mitt, und ich liebe es wirklich, wenn Sie versuchen, es auf Ihren Websites oder in Ihren mobilen App-Designs zu verwenden . Das ist also, wie tatsächlich die Leerräume, die hier arbeiten, wir haben einen Block hier so waren und der Block, den wir hier sind, so. Und dann haben wir hier wieder einen Block wie diesen. Wir haben hier wieder einen Block wie diesen. Wir haben einen Block oder hier so. Also, das ist eigentlich ein bisschen auf der linken Seite. Ich denke, vielleicht ist es nicht richtig ausgerichtet, aber tatsächlich ist dies ein Zentrum ausgerichtetes Design, aber es hat eine gute Variation vom weißen Raum herum. Das sieht also wirklich toll aus. Jetzt werde ich Ihnen ein weiteres Beispiel zeigen, das hier ist, und Sie können sehen, dass wir hier sind. Hier. Wir haben verschiedene Blöcke in verschiedenen Höhen. Obwohl ich diese Stunden nicht zu sehr kreativ mag, aber ich denke, es kann funktionieren. Oder hier. Also haben wir alles horizontal von links nach rechts ausgelegt. Und Sie können hier sehen, wir haben auf der rechten Seite, ich denke, ein Chad Symbol. Dann müssen wir hier Buttons herunterladen. Und dann haben wir diesen Block hier und diesen Block. Also, wenn du genau hinschaust, ist das eigentlich der ganze Block, okay? Und dann haben wir diese Gegend hier drüben, diese Gegend hier drüben und diesen Abschnitt hier drüben, damit Sie auf der linken Seite sehen können. Es hat Es hat nicht zu viel Leerraum, aber auf der rechten Seite hat es viel Leerraum. Es ist also so, als ob man es sich anschaut, sieht man, dass es wie eine Waffe aussieht. Okay, das ist also die Rückseite von der Waffe. Hier sind die Kugeln. Genau wie Bargeld und Golf. Und Sie können hier drüben sehen. Das ist der Nosal. Das ist also eigentlich geometrisch. Sie können sagen, dass einige Designs oder Layouts auf einigen Formen oder Geometrien basieren, so dass Sie das auch hier verwenden können. Ich wollte dir eine Sache zeigen, nämlich Leerraum. Also hier haben wir einen sehr großen Block aus Leerraum. Hier haben wir einen etwas kleineren Block aus Leerraum, und hier haben wir einen schlanken Block aus Leerraum. So können Sie sehen, wenn wir es hier sehen, wir haben fast einen sehr schmiedevollen Baum in diesen weißen weißen weißen Leerraumblöcken. Okay, das ist eigentlich das, was ich Ihnen hier nicht zeigen will und Sie führen, dass Sie auch so etwas tun können . Es kann auch funktionieren und alles jetzt. Hier drüben ist es links in diese Richtung ausgerichtet. Also bewegt es sich von links, richtig? Aber und der Designer, anstatt die Schraubstock auf der linken und rechten Seite zu begraben, variiert es die Schraubstock unten. Das ist eigentlich das, was ich dir zeigen wollte. Dies ist, wo das einzigartige Design Lassen Sie uns ein anderes Beispiel sehen. Okay, das ist also wie ich. Sicher, dass Sie hofft, dass die tatsächlichen 100% von diesem hier? Uh, Hoppla. Ich denke, jetzt 100%. Dies ist also eine Website namens verantwortungsvoll arbeiten. Und Sie können sehen, das ist das Layout, das ich Ihnen gezeigt habe. Wir haben eine sehr große Überschrift hier drüben. Als ob du sehen kannst, was passiert ist. Wir haben einige kleine Einheimische. Wir sind hier und ein kleiner Link hier drüben. Das ist also das Layout. Ein kurzes Sie in der letzten Folie vom letzten Teil meiner letzten Lektion. Und Sie können sehen, dies ist die gleiche Ebene gibt es mit Also auf der linken Seite wieder, wir haben Überschrift. Und wenn wir nach unten gezogen sind, können Sie sehen, dass wir diesen Inhalt haben. Dann wieder, die Überschrift ist auf der linken Seite und Sie können sehen, einige Inhalte ist auf der rechten Seite. Also ist das links, rechts, links, versucht. Und dann wieder, wir haben etwas auf der linken Seite. Es ist auf die Menge der weißen Raum auf der linken Seite und fahren und mit einigen, die Sie sehen können wenn jemand zu schaffen. Vertrauen Sie hier wieder. Wir haben dies und wieder wird es hellen weißen Raum auf der linken und rechten neben auf der linken Seite verlassen. Und wieder haben wir auf den meisten weißen Raum übertrifft und nutzen eine kleine Skala groß, kleiner und größer. Und wenn wir nach unten gehen, haben wir wieder viel Leerraum auf der linken Seite. Onda, äh, das ist alles. Also wollte ich Ihnen zeigen, dass Sie so Designs kreativ nutzen können und Sie hier eine Menge Leerraum haben können . Es wird eine Menge Bedeutung und Betonung auf diesen Abschnitt oder hier, das ist ihr Slogan oder was auch immer. Sie können es nennen, nur dass sie auf dem Weg sind. Und ah, das ist ein weiterer Weg, um Ihre Layouts zu lesen. Sehen wir uns ein weiteres Beispiel an und dann gehen wir zum nächsten Abschnitt. Nun ist dies ein Beispiel aus Ah, Dashboard oder eine App. Dies ist eine Web-App und Sie können hier die coole Sache über dieses Design sehen, die ich Ihnen wirklich zeigen möchte, ist Kampf Raum. So können Sie sehen, dass wir einen Herrn aus weißen Raum auf der rechten Seite haben, und wir haben einen Lord of White Space zwischen diesen beiden Abschnitten. Hier drüben, das ist die linke Navigation und der Inhalt. Also zwischen dem Inhalt und der Navigation haben wir eine Menge Leerraum, und ich lebe wirklich dieses Design, weil es ist, so dass Sie sagen können, so einzigartig und sauber weil aus seinem Leerraum es verwenden Ähnlich, wenn wir Blick auf die Spitze, wir haben Leerraum, aber es ist weniger Leerraum. Also das ist eigentlich und wieder haben wir Sie hier Leerraum. Aber es ist eigentlich die Navigation, die Sie können. Wenn wir mehr Navigation haben, können wir den Raum füllen. Also mag ich wirklich, wie das Layout viel von Leerraum war. Sie können hier drüben sehen. Hier haben wir an der Spitze dieses Content-Abschnitts als wieder in diesem Content-Abschnitt. Dann wieder drinnen, hier und wieder begreifen Sie sich im nächsten Abschnitt wieder in Bewegung. Wir haben viel Leerraum. Dies ist ein weiteres Beispiel, dass Sie eine Menge Variation von Leerraum auch in Web-Apsis haben können, wo die Kreativität begrenzt ist, weil dieses Web für den Web-Apsis haben können, Konsum von Inhalten ist. Und es hat viele verschiedene Abschnitte verschiedene Navigationen, So können Sie nicht viel aus erstellen. Sie können kreativ sehen. Dies ist eigentlich für die Bereitstellung von Inhalten, und Sie können sagen, dass Datenbereitstellung Websites oder Web-Apps basierend auf Daten, so können Sie immer noch eine Menge Leerraum hier verwenden und ein Layout erstellen, das in etwa so aussieht . Also haben wir hier wieder alles ausgerichtet. Wir haben hier alles übrig, aber wir haben viel Leerraum, was Klarheit und Schlankheit verleiht. Ich hoffe, Sie haben diese Lektion genossen. Wenn Sie Fragen haben, fragen Sie mich. Fahren wir mit der nächsten Lektion fort. 10. Single für Web- und mobile Apps: in dieser Lektion. Wir werden über eine andere Art von Layouts und verschiedene Arten von Lots sprechen, und dann sollten sie verwendet werden. Also 1. 1 Ich werde über eine einzelne Spalte sprechen oder wie wir es zentrierte Ebene nennen. So wird alles meist in der Mitte ausgerichtet sein, und es ist ein guter Weg. Und wann immer Sie es benutzen, werden Sie viel Aufmerksamkeit auf das richten, was in der Mitte ist. Also haben wir viel Leerraum auf beiden Seiten und die mittlere Sache. Was auch immer Sie haben, es ist ein Produkt. Es ist eine Bürde. Es ist eine Form, oder was auch immer Sie haben, es wird eine Menge von Aufmerksamkeit bekommen. Wenn Sie also eine Menge Inhalt wie vier Absätze, drei Bilder haben , sollten Sie nicht für eine einzelne Spalte gehen. Leo. Es ist gut, um etwas hervorzuheben, das weniger Inhalt hat. Also, wenn Sie viel Inhalt haben, denke ich, Sie sollten vermeiden, einzelne Spalte oder zentral Outs zu verwenden. Lassen Sie mich Ihnen zeigen, wie es wirklich aussieht. Hier. Es ist eine einfache Präsentation aus der Mitte Layout die meisten der Zeiten, wenn Sie eine Website öffnen wir Logo auf der linken Seite und wir haben Top-Navigation. Und dann unten haben wir eine sehr große Überschrift hier drüben. Okay, dann haben wir ein paar Slogan oder einige andere Funktionen, oder vielleicht ein oder zwei Zeilen Absatz oder solche Dinge. Dann haben wir ein sehr großes Video oder ein großes Bild vom Produkt oder ah, Formular hier drüben. Und dann haben wir einen Aufruf an Action Button. Aber Sie sollten sich für dieses Produkt oder solche Dinge anmelden. Dann haben wir etwas hier drüben. Vielleicht ist es sicher und sicher, und es sind nur $9,99 pro Monat. Oder vielleicht so etwas, das wird Zehe geben Ihnen einige eine Sicherheit, dass dies ein Abschied ist, oder Sie sollten dieses Produkt kaufen. Dies ist also im Grunde ein einfaches, zentriertes Layout. Die meiste Zeit wird es so aussehen. Sie können Dinge bewegen, wie Sie so etwas wie hier drüben haben können und Überschrift und denkt, wie hier drüben, es liegt an Ihnen, wie Sie tatsächlich versuchen Zehe, bewegen sich um Dinge und wie Sie die Aufmerksamkeit von Ihrem -Benutzer. Dies wird also meistens in der Haider- oder Helden-Sektion oder im oberen Bereich Ihrer Designs sein . Hier geht es also um zentral raus. Nun, lassen Sie mich Ihnen nur zwei oder drei Beispiele zeigen, weil ich denke, Sie haben es oft gesehen ich werde Ihnen ein paar Beispiele zeigen, also bekommen Sie die Idee auf Ihrem Kopf geschrieben oder Sie können sehen, graviert in Ihren Köpfen. Also lassen Sie uns einige Beispiele sehen. Jetzt sind hier ein paar Beispiele aus der Mitte früh, und die meisten der Male werden Sie es in der Kopfzeile zu sehen, weil sie wir brauchen, um Aufmerksamkeit zu erregen. Eine und zweite ist, dass wir ein wenig Wert auf unser Produkt legen müssen. Es ist Slogan oder was es tut. Also, hier geht's. Sie können oben sehen. Wir haben die gleichen Dinge hier. Wir haben alles in der Mitte. Dann haben wir einen Slogan, als wir diesen Button haben und hier haben wir einen kleineren Knopf. Oder vielleicht nicht viel hervorgehobenen Abschnitt ansehen Demo. Also wieder, wir haben diese Abbildung unten, die wieder in der Mitte ist. So starten diese APRA Io. Sie setzen Betonung oder hier, so ist es keine schlechte Übung, dies zu verwenden Ich denke, ich denke wirklich, dass, wenn Sie eine sehr schöne Atmosphäre mit einer schönen, freundlichen Typografie und Farben schaffen schöne Atmosphäre mit einer schönen, können, können Sie jedes Design erstellen. Wenn mit einem einfachen Layout. Wenn Sie ein sehr einfaches Layout haben, können Sie ein elegantes Design erstellen. Denken Sie nicht, dass Sie eine sehr komplex aus sehr kreativ aus, um Ihre Geschichte zu erzählen . Sie können Ihre Geschichte mit einfachen Layouts zu erzählen, indem Sie einige Typografie-Stil mit guten Farben haben . Als nächstes haben wir diese Website. Dies nennt man die gleiche Form und man kann hier sehen, dass sie wieder etwas haben, das früh ausgesendet wird . Also sehr groß auf dem Weg hierher. Und ich fange an. Sie haben einige gierige int los in der Überschrift, die ich wirklich mag. Dann haben wir diese Last. Ich denke, das sollte so sein. Aber jedenfalls, es ist ihr eigener Stil an, und das ist, wie sie tatsächlich die Aufmerksamkeit von ihrem Benutzer erregen und es auf diesen Bereich hier drüben setzen , dann haben wir diesen anderen , der Grenze Punkt io. Und das ist, denke ich, Teilkosten Art off Projekt, oder ich bin mir nicht sicher, was es ist sowieso, so können Sie sehen oder hören, es beginnt wieder mit dem Zentrum Layout. Obwohl es eine Linie auf der linken Seite ist, Wir werden diese Technik in den kreativen Ideen im nächsten Abschnitt diskutieren. Also behalte das in deinem Kopf und halte deine du kannst sagen, äh, dein, äh, neugieriges Niveau hoch. Halten Sie also Ihre Neugier hoch und wir werden in der nächsten Lektion darüber reden. Im Moment werde ich dir nur sagen, was dieser Trikot ist. Zentriert Layout Weiter ist Basislager Basis. Kim ist eine sehr beliebte Website und Sie können sehen, alle hören sehr groß und Brett Überschrift. Dann haben sie einige Absatz würde hier zeigen, was es ihren Kunden tut. Dann haben sie ihre Stadt A oder Call-to-Action-Button hier drüben. Nette Berührung. Und dann haben sie wieder eine Schlange hier drüben. Sie haben ein paar Bilder in der Mitte. Ich mag dieses einfache und gerade und viel Nachdruck auf das, was es tut. Das ist also ein großartiges Beispiel. Okay, hier haben wir eine andere, die im Grunde ein Design Verpackungsdesign ist, und Sie können sehen, wo hier dieses Symbol, das ihr Logo ist. Es ist in der Mitte von dieser ganzen Illustration, die wirklich Betonung gibt, und Sie können Stärke zu diesem Design sagen. Also, wenn man es hier wieder anschaut, ist dies in einem zentrierten Layout gestaltet. Alles ist in der Mitte. Aber es sieht wirklich schön aus, weil der Designer viel verwendet hat, Typ Typ Kerl Gesichter zu erstellen , denke ich, zu sterben. Gesichter, die hier aussehen, sind so kombiniert worden. So gute Illustrationen, Zentrum entworfen, alles sieht gut aus. So führen die Create-Designer ihr Design aus, das sich nicht viel um Einfachheit Sorgen macht . Ich denke, dass einfache Designs mit guter Grafik könnte Typografie und Farben. Sie werden mehr Aufmerksamkeit bekommen als komplexe Layouts. Wieder haben wir diesen einen Finisher, dunklen CEO, und es ist wieder etwas. Einige App. Und hier haben wir wieder das Zentrum Layout. Lassen Sie uns ein Beispiel aus dem mobilen Layout sehen, das gegen Anker ist. Dies ist die Shopify-Website, und das ist ihr Handy. Reaktionsschnell, damit Sie auf Mobil sehen oder hören können. Wir haben sehr weniger Platz, so manchmal haben wir, wie in Richtung drei Spalten. Design würde versuchen, es in eine einzelne Spalte oder zentrierte Spalte zu quetschen, so dass es verwendet wird . Ah, viel Zeit auf mobilen Schnittstellen sind Benutzeroberflächen für mobile mobile Geräte, weil wir weniger Platz auf dem Bildschirm haben. Also neigen wir dazu, ah, wissen Sie, einige bekommen etwas Platz, indem wir unsere Objekte in der oberen unteren Reihenfolge bewegen. Also alles, was die Mittellinie Sie sehen oder hören können, sieht toll aus. Du hast also keinen Wächter. Die Idee, wie Sie die Mitte verwenden, Layouts ausrichten und versuchen, Zehe zu schaffen Betonung in Ihren Entwürfen. Ich werde Ihnen eines meiner jüngsten Designs zeigen, das ich getan habe und wie ich das Center Layout toe verwende, erhalten Sie den Schwerpunkt auf den ersten oder den oberen Abschnitt dieses Designs. Nun, das ist mein jüngstes Projekt, das ich für Rücksteuern gemacht habe. Hilfe von Dies ist einer meiner Klienten von Ihnen USA, und ah, und ah, Sie können hier drüben sehen, das ist eine Brauch tiefste über ernst, weil es etwas Ernsthaftigkeit hat , weil es eine Steuergesellschaft ist. Das ist also eine benutzerdefinierte tiefste. Dies ist nicht Google tiefste. Also wieder, Sie können sehr guten Kontrast von grün und gelb oder gelbe Orangen, bernsteinfarbene Farbe und sehr einfaches Design sehen. Dies ist wieder Center-Layouts. Ich möchte, dass der Benutzer darauf aufmerksam wird. Wir haben 300.000 bundesweit dazu beigetragen, Steuererleichterungen zu erhalten. Also das ist wieder, ich denke, ein großartiger, den Sie sehen können Start für jeden Kunden hier drüben. Und dann hatten sie etwas Kredit. Zertifizierungen sind und solche Dinge. Also das ist eigentlich wollte ich Ihnen zeigen, wie Sie auf der Mitte Layout verwenden und einen guten Eindruck erzeugen können. Erster Eindruck auf Ihre Nutzer. Ich hoffe, Sie haben die Zentrale nicht zerstört. Wenn Sie Fragen haben, fragen Sie mich. Fahren wir mit der nächsten Lektion fort. 11. Projekt: jetzt ist es eine Zeit für Ihre Aufgabe. Jetzt ist Ihre erste Aufgabe, dass Sie gehen, um ein zentriertes Layout zu erstellen, wo Sie gehen, um ein Logo, etwas oder Menü auf der rechten oberen oder Navigation oder Telefonnummer oder was auch immer ein Element auf der Oberseite zu haben etwas oder Menü auf der rechten oberen oder Navigation oder Telefonnummer oder was auch immer ein . Dann brauche ich Sie, um eine sehr große Überschrift zu erstellen, Board-Text und mit einigen begleitenden Absatz oder Text an der Unterseite sind Belastung und und eine Schultern textuelle. Hier können Sie eine Abbildung unten verwenden. Sie können auf Bild mit einem übermäßigen Effekt verwenden, wie ich es verwendet habe. Oder hier sind Sie offen, alles zu verwenden, was Sie wollen. Sie sind offen für die Verwendung eines beliebigen Entwurfswerkzeugs. Sie können es in der Skizze entwerfen. Es wird eigentlich für einen Shop-Illustrator sein. Was immer Sie jetzt mit Ihnen zur Verfügung haben, Sie können das verwenden und ich möchte so etwas sehen. Also im Moment verwende ich ein Raster von Boucher Grid, das 12 Spalte 30 hat über 65 Spalte Bert und 1 65 Ränder an Bord Websites, und meine Leinwand ist eigentlich 14 40 nichtig. Also habe ich auch ah ah ah ah Video auf YouTube über das Erstellen von Stiefeln, Sha'ab Qualitäten, so dass Sie meine Kanalspitze sowieso überprüfen können, Also das ist ihr Design. Ich möchte von Ihnen Ah Header Entworfen mit einem zentrierten Layout eines Spaltenlayouts. Sie können auch so etwas tun, was meine vorherige Arbeit zurück ist. Vor einem Jahr. Sie können verwenden, sie haben eine Überschrift einen Absatz eins dieser Demo Testlast und einige begleitenden Text am unteren Rand. So können Sie auch so etwas verwenden. Und stellen Sie sicher, dass Sie hier drüben Matratzen benutzen, wie ich es Ihnen gesagt habe. Der vertikale Rhythmus, Brocks. Versuchen Sie also, einige Blöcke oben oder unten von diesem zu verwenden. Und auch hier drüben, wo ich dir diese vertikalen Blöcke in meinen vorherigen Lektionen gezeigt habe. Versuchen Sie also, diese Technik Zehe zu verwenden. Haben Sie einen guten Abstand zwischen Ihren Elementen. Stellen Sie also sicher, dass Sie diese vertikalen Räume und vertikalen Rhythmus auch verwenden werden. Also fangen Sie an, nein zu entwerfen und einen fantastisch aussehenden Header zu erstellen, der mit einem mittleren Layout entworfen wurde Und ich hoffe, Ihr Design bald zu sehen. Also lass es uns schnell machen. Und vergessen Sie nicht, diesen Auftrag einzureichen 12. Zwei column mit Beispielen: jetzt ein weiteres beliebtes Layout zwei Spalten Layout. Oder manchmal nenne ich es 50 50 Layout oder Magazinlayout. In den meisten Fällen, wenn Sie eine Zeitschrift oder Zeitung sehen oder lesen, haben wir meist Inhalte und Bilder auf linken und rechten Dingen wie diese. Dies teilt also im Grunde Ihren Inhalt in zwei Abschnitte auf. Man könnte Bilder sein, die man Steuern wieder. Einer könnte ein Produkt sein. Eine könnte seine Eigenschaften sein. Das teilt also jetzt Ihr Layout auf. Eine Sache, die Sie beachten müssen, ist, dass es nicht immer 50 50 Layout sein muss. Sie können die Spalte ändern. Vögel. Vielleicht bist du auf der rechten Seite. Sie haben mehr davon von Ihrer Spalte und die linke ist kleiner, also hängt dies von Ihnen ab. So ist es einfacher Zehensaft mit mehreren Bildern und Text auf Seite zu Seite. Und wenn Sie ein Thema oder einen Abschnitt haben, den Sie leicht haben können, Sie können leicht ah haben, erstellen Sie Lee heraus und Sie können Ihre Informationen leicht zeigen, und ich einfach nur Tabelle in diesem einstellbaren wir Ihren Benutzern. Also werde ich Ihnen eine Menge Beispiele zeigen und wie wir diese verschiedenen zwei Spaltenlayouts erstellen können . Also lasst uns jetzt anfangen. Im Moment zeige ich Ihnen einen ganz typischen Start. Ah, zwei Spalten Layout, wenn wir ein Video auf der rechten Seite oder ein Bild auf der rechten Seite oder Produktbild oder mobile App Bildschirm kurz hier und dann haben wir auf der linken Seite. Wir haben hier einige Überschrift, als wir einen Slogan oder eine Feature-Linie haben. Dann haben wir eine Last und sehen uns Demo an oder versuchen Sie es jetzt oder versuchen Sie es für 30 Tage. Also haben wir eine Art von Mäzen wie diesen. Dies ist also ein sehr typisches zweispaltiges Layout, also teilen wir uns die meiste Zeit so weiter ab. Jetzt müssen Sie feststellen, dass eine Sache, die wir verwenden, ist die meisten der Benutzer. Sie werden Ihre Website oder Ihr Design von links nach rechts scannen, so dass sie gehen. Ihre Augen werden hier zum ersten Mal treffen, also stellen Sie sicher, was immer Sie wollen, dass der Benutzer zuerst lesen. Das wird dein Sport sein. In ähnlicher Weise die meisten Bilder und die meisten Titel und Überschriften von rechts nach links auf dieser Seite auf der rechten Seite sein. Das ist also die Sache, die Sie bemerken müssen. Nun, hier ist eine weitere Variante von der gleichen 50 50. Aber Sie können sehen, dass Sie hier waren. Hier. Ich habe etwas Neues gemacht, das heißt, ich habe dieses Bild auf der rechten Seite auf den ganzen Hintergrund erweitert. Es wird aus diesem Abschnitt rauskommen oder getroffen. Das ist also ein anderer Weg. Und auch, Sie können ein Formular hier drüben mit dem Submit-Button haben. Meistens, wenn Sie eine Landing Page entwerfen und sie haben eine Menge von Formularen, so können Sie ein Formular auf der rechten Seite und vielleicht einige Überschriften und Text oder Bilder auf der linken Seite haben . So gibt es viele Kombinationen, die Sie tun können. Du kannst so etwas haben. Und lasst uns, ähm, diese Decks Linien so machen. Und wir haben hier drüben Sexlinien wie diese. Hoppla. So wie das. Und dann haben wir versuchen, Nein, so etwas. Und wir haben eine Art Layout wie dieses. So gibt es viele Dinge, die Sie hier tun können, wie Sie Ihr Layout ändern können, Sie können eine Menge Dinge tun. Vielleicht kannst du deine Bilder so in zwei Teile teilen. wie wir ein Bild haben oder hier und eins hier oder vielleicht eine Illustration oder so etwas . Also reservieren wir tatsächlich 50% Rabatt auf diesen Platz für unsere Bilder, und die Linke ist im Grunde Inhalt. Es gibt also, ich werde zeigen, wie es verwendet werden kann und wie es von verschiedenen Designern verwendet wird. Also lassen Sie uns weitermachen und einige Beispiele sehen. Nun, hier ist ein Beispiel, und es ist eine Portfolio-Website von ramen, ein Produkt. Entwerfen Sie sie aus Barcelona und Sie können hier sehen, dies ist eine sehr einfache Verwendung aus zwei Spalten Layout, so dass Sie hier seine Haare sehen können. Er hat einen willkommenen Dexter hier, eine Illustration von ihm. Dann hat er Bilder, die in Spalten fallen. Wieder, das ist wieder. Alles ist in zwei Spalten. Das ist also sehr einfach, sehr elegant. Saubere Arbeit von Ramon. Jetzt ist hier ein weiteres schönes Design, das ein Spiel zwei Spalten auf ist. Sie können sehen, dass diese Kopfzeile zwei Spalten auf der linken Seite ist. Wir haben einige Texte und erfahren Sie mehr Button, und auf der rechten Seite haben wir ein Produkt. Dies ist also eine andere Möglichkeit, ein Produkt einzuführen. Wenn Sie ein oder zwei Varianten von diesem Produkt oder einem Produkt haben , ist dies ein toller Weg Zehe. Erhalten Sie etwas Nachdruck und erzählen Sie auch ein wenig Informationen über Ihr Produkt. Es ist eine sehr beliebte E-Commerce-Website, die Shopify ist, und Sie können sehen, dass sie die gleichen zwei Spalten Layout hier verwenden, das ist Ah, diese Überschrift ein großes Versteck auf der linken Seite und auf Bild und das. Eigentlich ist dies wirklich hier drüben auf der rechten Seite, und wieder können Sie in diesem Abschnitt sehen, sie haben wieder einige Funktion. Sie erzählen die Funktionen, Starten Sie Ihre Geschäftsreise. Und so haben sie wieder dieses zweispaltige Layout verwendet. Wieder. Wir haben ein zweispaltiges Layout mit einigen Variationen auf der linken und rechten und von rechts und links. Dies ist eine gute Technik Zehe bekommen Variation, weil Ihre Musen Geist sie gehen, um mit dem gleichen Badran langweilig zu werden. Also, das ist eigentlich sehr ating. Das Muster Toe zeigen, dass dieser Kandidat wieder Sie sehen können, ist dieser Abschnitt. Dies ist ein großartiges Beispiel. Aus einem Buch-Layout. Sie haben ein Buch gesehen. Wenn Sie es so öffnen, ist dies eine bezahlt. Dies ist die linke Seite. Das ist also ein großartiges Beispiel. Und ich denke, du solltest so etwas versuchen. Ich werde eine neue Aufgabe machen, damit Sie ein Bild auf der linken Seite haben und Text auf der rechten Seite und einen Knopf unten haben. So etwas wie das. Sie können sehen, dass Sie die Idee haben. Und es gibt viele verschiedene Möglichkeiten, wie Sie dieses Zwei-Spalten-Layout verwenden können. Hier haben wir Bild auf der linken Seite und Steuer auf der rechten Seite. Oben haben wir Text auf dem linken Bild auf der rechten Seite als in der Mitte. Wir haben einige Variationen von Texten und Bildern, Dinge wie diese. Dies ist also ein guter Weg, um Ihr zweispaltiges Layout zu verwenden. Nun, hier werde ich Ihnen eine sehr schöne tut schön gestaltete App von Huberdeau zeigen. Ich folge dieser Designagentur für eine Weile. Und was ich Ihnen als dieser Bildschirm auf der linken Seite zeigen wollte, dieser erste Bildschirm auf der linken Seite und Sie können sehen, dass Sie hier waren. Es hat ein zweispaltiges Layout. Also, wenn wir näher hier rüber gehen, können Sie diese 24 Optionen sehen, die sie in zwei gleiche Spalten unterteilt sind, und es zeigt es sehr einfach. Es ist einfacher Zehenklopfen hier drüben. Wenn sie wie diese für Schaltflächen hier drüben haben, können sie leicht tippen Sie es hier über und verwenden Sie diese Funktionen. Also das ist eine große Verwendung von dieser Ah zwei Spalte hier. Beschränken Sie sich nicht, dass diese nur auf Mobilgeräten verwendet werden können, nur auf Websites. Sie können sie auch in mobilen Labors verwenden. Hier ist ein weiteres Beispiel für eine mobile App, und Sie können hier in diesem Abschnitt sehen oder hören Sie nachgelassen bis zu drei Sportarten, die Sie mögen. Sie haben hier vier Dinge zu wählen, und sie haben, wie, zwei Spalten Layout. hier vier Dinge zu wählen, und sie haben, wie, Dies ist also wieder ein weiteres Beispiel für ein zweispaltiges Layout. Es ist einfach zu tippen. Es ist einfacher zu navigieren. Sie können sich leicht nach unten bewegen. Sie haben eine Menge von guten Bereich, um über Kopf zu tippen. Das ist also ein anderer Weg. Sie können das in Ihrem mobilen APS verwenden. In ähnlicher Weise können Sie sehen, dass dies das aktuelle Design ist, das ich getan habe, und Sie können sehen, wo ich wieder bin, indem Sie ein zweispaltiges Layout verwenden, um diese Video nebeneinander zu zeigen. Das sind eigentlich Decks, professionelle Videos und das ist eine großartige Möglichkeit, so etwas zu zeigen. Ebenso, wenn Sie nach unten in diesem Abschnitt gehen hier, Textdienste zur Verfügung, Sie können sie sehen oder wieder hören. Ich verwende zwei Spalten, um alle diese Aufzählungspunkte oder Textdienste anzuzeigen. Dies ist also ein guter Weg, zwei Spalten zu verwenden. Denken Sie nicht, dass Sie ein Bild und eine Steuer verwenden müssen. Sie können Text inboard aus diesen Spalten so ähnlich verwenden, Sie sehen können, was hier. Ich habe das gleiche hier zwei Spalten verwendet, aber hier, nur um etwas Interesse zu schaffen, ändere ich diese Information, die ein bisschen anders als die Aufzählungspunkte ist. Das ist also wieder die Verwendung aus links, rechts, zwei Spalten. Ich hoffe, Sie haben das genossen. Ach Design. Sie können Lektion über Layouts sagen und wie Sie Ihre beiden Spalten verwenden, Entlassungen, Kreativität mit kreativen. Wenn Sie Fragen haben, die Sie mir stellen müssen, gehen wir zur nächsten Lektion. 13. Projekt: Nun möchte ich, dass Sie ein zweispaltiges Layout mit den gleichen Techniken erstellen, die ich Ihnen zuvor gezeigt habe . Vergessen Sie nicht, den vertikalen Abstand zu verwenden, rechts. Vertikale Abstände und Bullsh Upgrade hier drüben, Sie können hier sehen, ich benutze das gleiche Bootstrap Brot. Und was Sie sehen, ist die Variation vom Design beendet, das ist Mittellinien-Design. Und diese, die Sie sehen können, ist es mit zwei Spalten. Also diese Form, können Sie sehen, bekommen ein kostenloses Konzert und Gericht, das ich auf der rechten und der linken Seite verwende. Ich habe einen Text. Und auch ich benutze die Technik, die Überlappung genannt wird, die Sie in den nächsten Abschnitten bei boss Techniques lernen werden. Und Sie können hier sehen, Toe Bella ist, dass ich ein paar Bilder oder ein paar Symbole verwende oder was auch immer Sie hier verwenden können. Oder vielleicht Facebook wie in Zeitschriften oder so etwas gesehen. So können Sie hier drüben etwas Logos benutzen, so etwas. Versuchen Sie also, so etwas wie dieses zweispaltige Layout zu erstellen. Ich will nicht, dass du hier drüben immer eine Form hast, denn das war eine Kreditvergabe. Also trinke ich so etwas, lassen Sie mich Ihnen ein paar weitere Beispiele zeigen. Hier ist ein weiteres Beispiel. Das ist nicht mein Design, aber Sie können sehen, dass Sie so etwas verwenden können und was ich will. Äh, was ich Ihnen hier zeigen wollte, ist das hier. Also haben wir diese wenigen Logos hier drüben, die dieser Mann oder wer auch immer er hier ist, hier und hier drüben. Und du kannst so etwas verwenden. Sie können hier ein Logo oder etwas anderes verwenden. Versuchen Sie dann, zwei Spalten zu verwenden, um Ihren Layer so zu haben. Sie können 60 40% 50 50% verwenden, was auch immer Sie verwenden möchten. Ich dränge Sie nicht , 50 50 zu benutzen. Sie können sehen. Hier ist mein anderes Design. Mein alter, das ist vor einem Jahr. Und Sie können hier drüben sehen. Ich benutze zwei Spalten. Sie können das gleiche verwenden, und das ist auch versuchen, ein Zwei-Spalten-Layout zu erstellen. Und ich freue mich darauf, all Ihre Aufgaben zu sehen. Also fangen Sie jetzt an, Ihre Aufgabe zu entwerfen. 14. Multi in column: Jetzt ist unser nächster Stopp mehrspaltige Schichten. Wenn wir Spalten wie drei Spalten, vier Spalten, sechs Spalten haben vier Spalten, , dann verwenden wir tatsächlich ein mehrspaltiges Layout. Ich habe viele Zeitschriften mit drei Spalten gesehen. Deshalb habe ich hier das Magazinlayout geschrieben. Obwohl es nicht völlig ein Magazinlayout ist, aber viele Medikamente verwenden drei Spalten. Lee Unsere Zehe zeigen verschiedene Action-Bilder oder verschiedene Artikel und Geschichten. Wenn Sie also viel von Inhalten haben, können Sie T-Spalte oder vier Spalten Layer verwenden, da Sie Ihren Inhalt teilen müssen, wie wir vier Aufzählungszeichen, Punkt-Aufzählungspunkte oder drei Aufzählungspunkte oder drei Funktionen von einem Produkt oder vier Funktionen haben aus einem Produkt. Wir werden sie intern teilen. Verschiedene Säulen. Also das ist eigentlich die Verwendung von mehrspaltigen Lee Stunden. Jetzt werde ich Ihnen einige Beispiele, einige Beispiel-Layouts zeigen , und wir gehen zu Live-Beispielen, verschiedenen Websites und machen die Idee los. Was ist eigentlich Multi-Spalten-Layout. Jetzt hier ist ein Beispiel oder ein einfaches Layout, das Sie in der Start- oder Kopfzeile Ihrer Website tun können . Vielleicht musst du Bilder hier drüben machen. Zwei Produkte Zehe, vielleicht so etwas zu Boxen. Was auch immer Sie haben, das ist eigentlich in drei verschiedene Spalten unterteilt. Also haben wir 12 und drei, also können wir eine Person hier drüben mit einer Steuererklärung haben. Wir haben einige Funktionen hier, O r. Vielleicht eine Kundenrezension über hier. Dann haben wir eine Überschrift und einen Text hier drüben und versuchen es aus, aber ärgern was auch immer. Es kann in vielen verschiedenen Kombinationen und dies getan werden, aber es zeigt, dass wir mehr als drei verschiedene Inhaltstypen haben. Einer ist ein Labyrinth. Einer ist vielleicht ein Zeugnis, wenn wir versteckte Textüberschrift und vielleicht einen relativen Text und eine Stadt oder Caldwell Chamberlain haben. Also haben wir eigentlich drei Blöcke von Text. Also, wenn wir, wie vier Blöcke fünf Blöcke haben, könnten wir diesen nicht benutzen. Vielleicht können wir nur unsere Inhalte so. Zum Beispiel, wenn ich wenn ich zwei Ah-Testimonials habe,kann ich sie so bekommen. zwei Ah-Testimonials habe, Es gibt also viele Möglichkeiten, wie ich so etwas wie dieses ein größeres Zeugnis, kleineres Zeugnis machen kann. Unsere Kundenrezensionen zu Kundenrezensionen oder hören Sie Produktbild hier. Und, ähm, die Überschrift und Einführung des Produkts und probieren Sie es jetzt aus. Aber ein hier drüben. Es gibt also viele Möglichkeiten, wie Sie die Streifen machen und diese mehrspaltige, eine dreispaltige oder vierspaltige Layouts verwenden können. Haar ist eine weitere Darstellung aus dem gleichen Drei-Spalten-Layout, und Sie können hier sehen. Ich versuche tatsächlich, hier oben ein paar Ränder zu verwenden. Also das sind drei Spalten Wir haben eine Spalte hier links, eine Spalte hier drüben für den Abstand, und dann im nächsten Abschnitt hier haben wir vier Features oder vier Schritte. Schritt 1234 und ich habe sie in vier verschiedene Boxen aufgeteilt. Nun, warum ich diese Ränder oder Kopf links, nur um einige in nur Punkt in Ihrem Design zu erstellen, wenn der Benutzer sieht wie in einer linearen Weise, alles ist linear, linearer Ingenieur, sie werden gelangweilt. Sie gehen auf die Zehe. Tauchen Sie es ein. Weißt du, was die Ähnlichkeit ist? Dieselbe Erfahrung immer wieder. Also versuchen Sie sehr mit Ihrem Leerraum hier drüben mit Ihren Spalten. Hier drüben haben wir drei Spalten und dann haben wir wieder vier Spalten. Wir können wieder zwei Spalten haben, können wir haben. Ach, schon wieder in der Mitte. Dann können wir so etwas haben. Also, das ist nur, um Ihnen zu sagen, dass ich zwei verschiedene Arten von Multi-Säulen oder hier drei Spalten und vier Spalten gleichzeitig verwende . Also versuchen Sie nicht, Angst zu haben oder versuchen Sie den Zeh. Denken Sie in einem sehr, dass ich immer vier Blöcke oder vier verschiedene Stücke von Informationen verwenden und sie so teilen sollte. Sie können 34 sind Variationen wie diese verwenden. Hier ist mein aktuelles Design. Nur Beispiel Zehe geben Ihnen eine Idee. Sie können sehen, wo ich hier drei verschiedene Spalten zu drei verschiedenen Hauptspalten verwende . Um diese drei zu zeigen, können Sie vertrauenswürdige Funktionen oder Dienste sagen oder was auch immer sie haben. Also das ist eigentlich habe ich vorher, dass ich zwei Spalten habe, als ich drei Spalten habe. Dann haben sie früh ausgesandt. Ich zeige es dir noch einmal. Wir haben drei verschiedene Funktionen drei verschiedene Schritte hier drüben. Ein Zehe drei getreten. Hier drüben siehst du,dass ich vier verschiedene Spalten benutze. Hier drüben siehst du, Und wenn Sie wollen, dass ich das Gitter einschalten, lassen Sie mich diese Tastenkombination denken. Also hier ist mein Raster und Sie können sehen, dass dies eine Bootstrap-Klasse ist und Sie können sehen, dass wir hier sind. Ich habe diese Dachrinnen hier drüben gelassen, und diese nehmen etwa vier Säulen. Das ist zentriert. Dies ist zentriert zentriert. Dies nimmt wieder vier Spalten. Es nimmt jeweils drei Spalten. Und, ähm, das ist wieder zwei Spalten Layout auf und wir haben wieder hier drüben ein mehrspaltiges Layout, das drei Spalten ist, die oder so haben wir diese Spalte, diese Spalte hier drüben, die diese ist. Dann haben wir diese Kolumne hier drüben. Und dann haben wir diese Spalte hier drüben, so dass Sie sehen können, wie ich diese Fußzeile in drei verschiedene Spalten geteilt und wir haben Site-Links. Wir haben Kontakt. Wir haben die Informationen über diese Website. Was? Dieses Produkt? Was auch immer wir haben. Das ist also eine großartige Möglichkeit, wo man hier sehen kann, Eigentlich habe ich es mit einigen Farben geteilt, um zu portieren. Eigentlich sind das drei Spalten hier. Haben Sie noch ein Beispiel aus. Mobile App. Du warst es. Sie können sehen, was hier. Das sind verschiedene Spiele. Ich denke, Sticker-Shop ist ein Sticker-Shop und das ganze Gitter ist tatsächlich auf drei Säulen gebaut , so dass es schaffen, um verschiedene Produkte zu Ufer. Sie haben es viele Male auf E-Commerce gesehen, Step Seite auf Kleidung Website. Dies ist eine gute Möglichkeit, eine Menge Daten zu zeigen, weil wir, ah viele Dinge zu zeigen, so können wir sie in einem großen off drei oder vier verschiedene Elemente zeigen. Es ist einfacher, nach den Augen zu scannen. Das ist also ein anderer Weg. Jetzt können Sie hier ein sehr einfaches Beispiel sehen und Sie können hier sehen, dass die Toten tatsächlich in vier verschiedene Spalten unterteilt sind. Einer ist größer, drei sind kürzer. Und wie eigentlich das Ihre Designer-Daten sind, dass die Toten tatsächlich Dienstag, 26. Februar ist. Es erfordert mehr mit so haben sie Ah, wieder, sie haben einige Zeit 7 30 B m oder ein M. So ist dies ein guter Weg, um Datum Picker zu zeigen. Dies ist ein weiteres großartiges Beispiel aus drei Spalten hier drüben, so dass Sie sehen können, dass dies ein großartiges Design ist . Sie haben, wie, sechs Optionen hier drüben Sponsoren, weil Agenda Aussteller kontaktieren uns Karte, so dass sie drei verschiedene Spalten verwenden. Also, wenn Sie genau hinschauen in diesem oberen Abschnitt hier, unter dieser Überschrift der Homepage können Sie sehen, wir haben wieder diese drei Spalten. Also, wenn ich versuchen, Zehe, haben einige Ausrichtung oder Haare, so dass Sie hier sehen können, ist die erste Spalte, als wir die zweite Spalte haben . Und dann haben wir diese dritte Spalte hier drüben so etwas, so dass Sie ein bisschen von Gooder in ihnen sehen können, ein paar Betten. Also, nur um sie mit etwas Leerraum zu trennen, und dann haben wir zwei verschiedene Spalten. Dies ist ein weiterer guter Weg, um Informationen zu zeigen. Oder wenn Sie viele Optionen oder Informationen zu zeigen haben, können Sie sie in Teesäule Layout oder mehrspaltigen Layout anzeigen. Jetzt ist das Wall Marks Website, und ich mag ihr Design ein wenig minimal. Und, äh, es ist wieder, dass du hier drüben sehen kannst, wir haben drei verschiedene Säulen. Kostenlose Lebensmittel-Pickup-Training Beteiligung dot com. Also der kostenlose Versand. Dann haben wir wieder fünf verschiedene Spalten, um verschiedene Kategorien anzuzeigen, als wir wieder dasselbe Layout verwenden . Fünf Säulen. Dann haben wir wieder drei Spalten. Wir haben drei Säulen, eine links, eine ist größer und die rechte Zehe sind etwas kleiner. Das ist also tatsächlich die Verwendung von mehreren Spalten, und ich hoffe, Sie haben die Idee nicht zerstört und wie man das richtig benutzt. Wenn Sie Fragen haben, die Sie mir stellen müssen, fahren wir mit der nächsten Lektion fort. 15. Projekt: Jetzt ist es an der Zeit, mehrspaltige Lee oder drei Spalte vier Spalte zu erstellen. Was auch immer Sie wollen, Sie können sie sogar fünf Spalten verwenden. Jetzt werde ich Ihnen meine Entwürfe und einige Beispiele zeigen, und Sie können hier drüben sehen. Ich will so etwas hier drüben. Also, hier haben wir. Ich habe auf dem linken Text auf der linken Seite und Text auf der linken Seite. Also ist alles eine Linie auf der linken Seite. Links, links, links. Aber das Ganze geht in der Mitte weiter. Ah, und in der nächsten, hier drüben, haben wir. Ah, dieser Titel auf der linken Seite. Aber alles ist in der Mitte wie Symbol ist in der Mitte von dieser Karte auf auch, dieser Text ist in der Mitte. Also, was Sie tun müssen, ist eine Überschrift wie diese zu erstellen, gelöscht mindestens vier oder t Spalten und drei mit Symbol, einige Steuern und einige Link hier drüben und Multi-Spalten-Layout erstellen. Lassen Sie mich Ihnen noch ein Beispiel zeigen. Jetzt können Sie sehen, dass dies unter Design ist, was meine jüngste ist, die mein neues Website-Design sein wird und Sie können sehen oder hören, hier haben wir drei Spalten und ich zeige alle meine Kurse so. Sie können hier eine Schaltfläche verwenden oder Sie können Überschrift oder was auch immer verwenden. Also Tür Sache, die Sie immer zu platzieren haben. Du gehst in die Mitte. Sie können das Versteck auf der linken Seite benutzen und alles ist in der Mitte. Also, das ist, was ich brauche. Ich möchte, dass Sie drei Spalten mit vierspaltigem Layout erstellen und mir so etwas geben. Also lese ich für Ihren Auftrag. Stellen Sie sicher, dass Sie Fuß gehen. Reichen Sie dies ein, da Sie sich auf diese Weise verbessern werden, wenn ich versuche, sie zu überprüfen. Wenn ich versuche, Ihnen Ihre Fehler zu zeigen und ah, in diesem Prozess, habe ich auch viel gelernt. Das ist also, man kann sagen, gegenseitiges Lernen und Verständnis von Design und Design Mystiker. Also freue ich mich darauf, mich auf Ihre Aufgaben zu freuen oder sie jetzt einzureichen 16. Flower: Jetzt werden wir über eine ganz andere Art von Layout sprechen, die ich ein Blumen-Lei nenne. Warum nenne ich es eine Blume? Weil es eine Form von einer Blume mit einigen Schlachten hat. So können Sie sehen, wann immer Sie eine Blume sehen, sie hat, Ah, große Mitte. Und dann haben wir fünf, sechs oder vier Schlachten auf seiner ganzen Größe. Dies wird also Flavor Layout genannt. Warum und wann sollten Sie es verwenden? Wenn Sie einen zentralen Artikel haben, müssen Sie sich auf ein Produkt konzentrieren, zum Beispiel eine mobile App oder eine E-Zigarette oder etwas anderes. Also, was auch immer das Produkt es sein wird, wird es wahrscheinlich sein. Es wird meist in der Mitte des Layouts in der Mitte neben dem Highlight sein. So ist es gut, um verschiedene hervorzuheben, wie vier oder fünf oder sechs oder sieben verschiedene Funktionen aus einem Produkt. Normalerweise wird es haben, wie Sie mindestens vier verschiedene Dinge um das zentrale Element haben müssen, wie vier verschiedene Funktionen. Abschleppen, Sie können sie präsentieren In diesem Layout, Ich werde Ihnen ein paar Arrangements zeigen, als wir auf ein paar Beispiele schauen, wie andere es verwenden und wie ich es in meinen früheren Designs verwendet habe. Also lasst uns ein paar Arrangements sehen. Jetzt. Dies ist eine sehr einfache Anordnung, die wir oft gesehen haben, aber vielleicht erkennen Sie es vielleicht nicht. Das Produkt befindet sich in der Mitte. Es könnte mehr im Labor sein. Es könnte etwas Parfüm oder irgendetwas anderes sein. Und dann haben wir hier drüben Features. Funktion. 123456 Also das ist eigentlich ich benutze sechs Schlachten von dieser Blume, also nenne ich es Blumenlayout. Andere nennen es vielleicht nicht laut Blume. Sie könnten es etwas anderes nennen, aber der Einfachheit halber und um die Idee aus dem Schlitten heraus zu verstehen. Dies ist, ah, Blumenform Layout, und das ist ein sehr typisches Beispiel. Jetzt habe ich meine Kolumne eingeschaltet. Urgh führt 12 Säulenraster, und Sie können sehen oder hören, wie ich das gleiche verwendet habe. Eine Blume Lei aus zu meinem Vorteil, so haben wir ein Produktbild in der Mitte. An der Spitze. Wir haben auf der rechten Seite. Wir müssen Funktionen auf der linken Seite. Wir haben zwei Funktionen mit etwas Steuer und in der Unterseite haben wir durch keinen Knopf. So ist es immer noch Blumen-Layout. Aber es hat 123456 Schlachten. Und ich habe mein Versteck und keineswegs Button in der gleichen Anordnung aus einem Blumenlayout benutzt. Ich hoffe, Sie haben viel gelernt und wie Sie es verwenden können. Nein, lassen Sie uns einige Beispiele sehen. Lassen Sie uns voran gehen und lassen Sie mich Ihnen zuerst mein Design zeigen. Dies ist eines meiner alten Designs, von dem ich glaube, ich habe den Wettbewerb getragen. Und das ist ein Design-Wettbewerb Eintrag. Und Sie können hier drüben sehen, hier, in diesem Teil hier drüben. Dies ist im Grunde eine E-Zigarette und Sie können sehen, dass ich das gleiche Blumenlayout verwende. Wir haben das Produkt in der Mitte auf der linken Seite. Wir haben Patronen und Batterien auf der rechten Seite. Wir haben einige Funktionen wie tragbare Aufladung zurück Auto demises, Traditionelle Tabak Mann sagte in all diesen verschiedenen Funktionen auf der Oberseite haben wir Überschrift und Unterposition Tagline. Dann unten haben wir von niemandem. Also das benutzt ich hier drüben Blumenlayout. Sie könnten es vielleicht falsch beurteilen, dass es drei Spalten hat, aber immer noch ist es ein Blumen-Layout. Wir haben wie alles um dieses mittlere Objekt angeordnet eso Hier haben wir ein anderes. Das ist kein Blumen-Lei. Es sind im Grunde drei Spalten, also hofft, das ist, was ich Ihnen zeigen wollte, dass Sie Mehllayout so auf diese verschiedenen Arten verwenden können . Nein, ich zeige Ihnen noch ein paar Beispiele. Nein, das ist das zweite Beispiel. Und ah, hier können Sie diesen Designer sehen, den er hat oder sie verwendet hat Ah, dieses Design bereit einzigartig, weil Sie diese Form sehen können oder das glitzernde Haar ist in einem Drei-D-Format . Es ist in einer perspektivischen, äh, äh, perspektivischen Layout. Und wir haben wieder das Gleiche hier drüben. Also ist dieses Produkt in der Mitte. Wir haben Agilität, fokussierte Vitalität, Energie und Produkteigenschaften an der Unterseite, die tatsächlich ein Blumenlayout bilden. Bert. Ah, hier. Sie können sehen, dass es in diese Richtung ein wenig verschoben ist. Also oben, wir haben keine Kämpfe hier drüben, also können Sie sagen, es ist 1/2 liebevoll aus, aber es ist fast Boden Blumenlayout, das ich Blumenlayout nenne. Produkt ist in der Mitte und alles andere ist um ihn herum. Das ist also im Grunde eine weitere Verwendung von Blumen-Layout wieder. Dies ist eine andere Website von einem russischen Designer und Sie können hier wieder sehen. Wir haben Park in der Mitte und alles ist links und rechts. Und an der Unterseite ist dies wieder eine Verwendung von Bodenflub früh heraus und Sie können hier sehen , dass es keine Überschrift an der Spitze verwendet. Und wir haben 123456 links und rechts. Und sieben ist das im Grunde auf dem Knopf Öl hier. Das ist also wieder Blumen-Layout. Sie können das auf viele Arten verwenden. Sie können sehen oder hören, hören. Wir haben Symbole mit Text und bis Burton und ein Bild. Das ist also ein anderer Weg. Hier ist ein weiteres Beispiel für Mehl-Layout, obwohl Sie es nicht zu erkennen scheinen, dass es Bodenblumen-Layout ist, aber ich denke, es ist geschmacklos. Aber Sie können dieses Regal sehen. Sherlock Holmes in der Mitte ist fast eine Mitte von diesem Entwurf oder der zentrale Punkt dieses Designs. Dann haben wir 123 drumherum. Dann haben wir diese Schließung. Dies ist auch die Überschrift. Aber es ist, wissen Sie, um diese Hauptfigur aus der Serie. Also dieser Designer, sie haben das in verwendet. Ah, man kann Kreativität sagen, weil alles anders ausgelegt ist. So können Sie hier sehen, haben wir Bild und Text auf Text am unteren Rand. Das Bild Text auf dem linken Bildtext auf dem rechten Bild, Text auf dem linken Bild, Text auf dem Bild, und dann haben wir diese Überschrift. Das ist also ein weiterer kreativer Weg. Ich versuche nur, deinen Geist in verschiedenen kreativen Outs zu öffnen, denn das wird dir viel helfen, während du entwerfst. Versuchen Sie nicht, sich in Schleppnetze von Lebensmitteln wie diesem zu verbinden, wie vier gleiche Gegenstände. Versuchen Sie, Ihr Design zu verschleiern. Versuchen Sie, etwas Kreativität in Ihren Layouts zu verwenden. Ich hoffe, Sie haben dieses Blumenlayout, Vortrag oder Lektion genossen . Wenn Sie Fragen haben, die Sie mir stellen müssen, fahren wir mit der nächsten Lektion fort 17. Projekt: Jetzt ist es an der Zeit, Ihre Aufgabe einzureichen und etwas mit Mehl zu schaffen. Früh out, Sie können sehen Gerade jetzt habe ich Fitbit Vers von oben verwendet und erstellen Sie diese einfache Blume Layout sehr schnell. Und ich war es nicht, weißt du, ich habe es gerade in 10 Minuten erschaffen. So etwas erwarte ich wenigstens von dir. So Produkt in der Mitte, wir haben sechs Funktionen oder hier und hier ist die Seite, die ich nahm. Okay, das ist also die Seite. Das ist der Text. Dies sind die Dinge, die Sie auch die Symbole verwenden können. Ich hatte keine Zeit, all diese Symbole zu finden. Sie können sie verwenden, um Ihre Entwürfe zu verbessern. Und ah, das ist die blühende Lei, die ich will. Also lassen Sie mich Ihnen zeigen, wo wir das haben. Okay, also ist einer dieser und der zweite 1. ist dieser hier. Also habe ich dir das hier schon gezeigt, das ist Ah, mein altes Design. Und Sie können sehen, dass ich fast schön draußen habe. Aber die Dinge sind anders. Wir haben einige Features hier drüben zu Features hier und von niemandem. So können Sie entweder so etwas erstellen und Sie können eine mobile App haben, unseren mobilen Bildschirm in der Mitte und zeigen einige Features hier drüben. Und Sie können auch etwas Ähnliches haben, wie ich es benutzt habe, aber umgekehrt. Und ich bin die vier Mal mit oder Typhus, die ich benutze, ist wirklich groß, das ist ein freies sterben Gesicht. Und das ist alles. Wenn Sie also so etwas wie dieses Blumenlayout erstellen können, würde ich wirklich gerne Ihre Aufgaben sehen, um Ihre Aufgabe jetzt zu machen. 18. Freiberufler im Webdesign und Mobile App-Design: in dieser Lektion. Jetzt reden wir jetzt über Mauerwerk Gitter. Warum es verwendet wird. Wenn Sie viele Bilder haben, haben Sie eine Menge von Produkten. Sie haben, ah, viele von Posten. Artikel können Sie sie mit Mauerwerk cred zeigen. Jetzt Fasten ist, dass, wenn Sie eine Menge von Artikel oder Inhalt basierte Website haben, wo wir eine Menge von Bildern oder Nachrichten Artikel haben, können Sie sie mit dieser Klasse zweite zeigen. Warum der Name Mauerwerk ist. Denn wenn Sie eine Ziegelkugel Vaulx voll aus Ziegeln gesehen haben, wenn die Miss und versuchen, diese Mauer zu bauen , haben sie einen Gönner. Sie versuchen, verschiedene Steine in verschiedene Stile zu passen. Sie legen nicht jeden Ziegel übereinander. Einige Pausen sind rechts auf der linken Seite, und sie bilden die ganze Wand. So ist dieser Name, wie eigentlich Mauerwerk Gier, und ich werde Ihnen einige Arrangements zeigen, als wir uns ein paar Beispiele ansehen werden. Websites, die sie verwenden. Ich persönlich mag es nicht, ein großes viel zu verpassen sind zumindest einig, dass unbekannt und Ingrid So gibt es einige fehlen die Noten. Wenn du nach unten geschleppt wirst. Sie sind Es gibt Inhalte erscheinen immer wieder. Und da sind sie, endloser Bildschirm. Du kannst sie und Astrid nennen. Aber Mason stimmte zu, ist nicht wirklich ein endloses Scroll-Raster. Es ist im Grunde Ah, Design Designer Zeit. Okay, also lasst uns ein paar Arrangements sehen und dann sehen wir einige Beispiele. Okay, hier ist eine typische Mauerwerk Gier. Sie können hier drüben sehen. Wir haben drei Produkte auf der linken Seite, und wir haben Produkt und Produkt in der Mitte, die groß sind. Ah, ein bisschen größer als die linken Produktboxen. Unsere Karten. Sie können sie auf der rechten Seite anrufen. Wir haben kleinere Produkte kleiner, und dann haben wir eine sehr große für an der Unterseite. Das fehlt also tatsächlich. Einverstanden. Das Konzept ist, dass Sie gehen Zehe haben verschiedene Größen aus Ziegeln, so dass Sie in der Mitte sehen können. Wir haben sehr große Steine auf der linken Seite. Wir haben Standard-Briggs auf der rechten Seite. Wir haben zwei kleine Steine, als wir verwendet haben. Ein sehr großer Ziegelstein. Das hängt alles von dir ab. Sie müssen eine Vielfalt erstellen, die Sie erstellen müssen, abwechseln einige Längen oder Höhen Zehe, Sie wissen, Sie wissen, ein gewisses Interesse an Ihrem Layout zu schaffen. So ist es, wie Sie Mauerwerk Gitter verwenden werden? Hier ist eine weitere Anordnung von der gleichen Mauerwerk Gier. Aber dieses Mal versuche ich es auf eine andere Weise zu verwenden. In einem kreativen können Sie sehen, dass wir hier sind. Hier haben wir Ah, horizontal. Ah, sehr großes Produktbild an der Spitze, das zwei Spalten nimmt. Und wir haben wieder auf der rechten Seite kleinere Pause als wir eine große haben, noch hier als wieder in der Mitte. Wir haben ein paar breite Pausen auf der linken Seite. Wir haben einige rote Steine, die Standardgrößen sind. So gibt es, wie, Tonnen von verschiedenen Kombinationen, verschiedene Layouts, die Sie mit Miss und Bedauern tun können. Es liegt also an Ihren kreativen Ideen, was Sie versuchen zu tun, damit Sie einige Feature-Produkt in diesem Bereich oben haben können , wo wir ein sehr großes Bild haben, als wir einige Anzeigen auf der rechten Seite haben. Vielleicht etwas Werbung, vielleicht eine Abo-Box auf der linken Seite. Wir können unsere Artikel in verschiedenen Kategorien haben, so etwas. Es gibt also viele Möglichkeiten. Es hängt alles von Ihren Inhalten ab, also müssen Sie zuerst Ihre Inhalte haben. Fertige Zehe. Wenden Sie dieses Mauerwerk Gitter Design an. nun Lassen Sie unsnuneinige Beispiele sehen und die Zeitverwendung von diesen Layouts riel. Dies ist ein Beispiel für Mauerwerk Gier. Aber ich mag diese Schicht wirklich nicht. Warum? Es gibt zwei Gründe. Eins ist, dass das nett ist. Sehr kreative Layouts, die völlig aus dem Weg sind, werden Ihre Benutzer verwirren. Also oben könnte es gut sein, aber hier drüben ist das total ein Chaos. Ich kann nicht sagen, welcher Abschnitt ist oder Bilder später Zehenresektion. Ob es dieses Bild buchstäblich dieses oder dieses ist. Es muss also eine Lücke zwischen diesen Blöcken von Text und Bildern geben. Ich hasse es wirklich, wenn Designer versuchen, Kreativität zu nutzen und ein Chaos wie dieses zu schaffen. Dies ist ein sehr kreativer Rubley aus, aber es ist völlig weniger verwenden. Warum ich Ihnen hier gezeigt habe, weil meiner Meinung nach, das Layout, Ihre Farben, Ihr visuelles Design, alles wird die Funktionalität von Ihrer Website zu erleichtern. Die Benutzerfreundlichkeit von Ihrer Website, die Lesbarkeit Leistenfähigkeit und das Verständnis von Ihrem Benutzer müssen in der Lage sein, zu verstehen und zu bekommen, was er oder sie sucht leicht. Das ist total durcheinander. Ich denke für mich, das ist total, ähm, verlorene Ursache, also werde ich nie, äh, aber nur um dir sagen, dass du so etwas entwerfen sollst, die Idee zu bekommen, was mit Mason gemacht werden kann wirklich hier draußen wieder, können Sie sehen, wir haben dieses weitere Beispiel für Mauerwerk Layout. Vielleicht haben Sie dieses Layout in Ah, Fenster gesehen , Stan. Menüleiste. Für mich gefällt es mir nicht sehr, denn für mich ist es jetzt wirklich durcheinander. Dieser sieht besser aus, weil wir hier drüben Knöpfe haben und all das ist in dieser ganzen Box. So ist es kein Buchstabe auf das Bild auf der rechten Seite, auf der linken Seite. Jeder Abschnitt ist also für sich allein. Also ist es ein bisschen, wenn ich viel besser sehen kann als dieses für mich. Dieses Layout, wie Sie hier mit diesem Bild sehen können, kann ich nicht wissen, dass dieses Bild begeistert ist. Zehe den unteren Text oder den oberen Fonds. Das ist also ein bisschen verwirrend für mich, also neige ich normalerweise dazu, diese Art von Schichten zu vermeiden. Sie müssen sehr klare Trennungen zwischen verschiedenen Inhaltsabschnitten haben. Versuchen Sie nicht, solche Bilder zu verwenden. Unser Versuch Toe, haben einige Grenze um sie, so kann ich sehen, dass dies ein ganzer Abschnitt davon ist ein ganzer Block. Jetzt kannst du hier drüben nach mir sehen. Ich sehe, dass das hier Schau ist, diese Person schaut sich diesen an, und er schaut sich diesen an. Ich weiß nicht, ob diese ganzen Plakate verliehen wurden oder dieser Typ mit diesem Collender verwandt ist oder was auch immer. Also ich Das ist wirklich verwirrend für mich. Versuchen Sie also, Sie zu vermeiden. Haben Sie eine, ähm, ähm, Trennung riel Trennung zwischen verschiedenen Blöcken von Text oder Informationen. Nun, hier ist ein guter Schuh aus. Mason stimmte zu. Und es wird auf feines, nur feines Vertrauen verwendet oder war genau das, was man es nennt. Und Sie können sehen, was ich hier für Mauerwerksklasse habe, und Sie können Tonnen von fehlenden Reuen hier sehen. Wie dieser hier drüben. Sie haben eine große Nutzung von diesen und Sie können totale Trennung sehen. Sehen wir uns das an. Sie können sehen, dass diese Bilder völlig voneinander getrennt sind mit einer gewissen Lücke. Und das ist die gute Verwendung von Mason Rekrut. Also Mason Bedauern wird auf Pinterest verwendet und wir haben diese Bloggged oder curio snort com und Sie können sehen, dass all diese sind tatsächlich fehlt Regrade gezwungen Artikel Sie sehen oder hören können, es geht weiter und weiter für mich. Ich mag diese jemals scrollenden Websites nicht, die sowieso ein Ende haben müssen, also hier haben wir eine weitere voll jede dot com Und wenn wir runtergehen, können Sie es wieder sehen. Wir haben Mauerwerk Qualität und wir haben verschiedene Pfosten. Artikel sogar. Siehst du wo? Hier haben Sie klare getrennte Linien Boxen um sie herum, so dass ich sehen kann, dass dies ein Beitrag ist. Das hier ist noch eine. Das hier ist noch eine. Dies ist also ein weiteres Beispiel. Tolles Beispiel. Sehr einfach, sehr einzigartig. Sehr nett. Dann haben wir noch einen, was Eitelkeit ist, Dean. Und Sie können hier rüber sehen, wenn ich runterziehe, wir haben wieder die gleiche Medizin bedauern. Aber das Problem hier ist für mich, dass es ist, ähm Sie können sagen, manchmal sehe ich einige Unregelmäßigkeiten wie wir Bild Überschrift Text sehen können und ah, der Text ist schwach oder so. Etwas fehlt in diesem Design. Vielleicht benutzte ich einige Zeilen hier, um eine Trennung zu haben, oder vielleicht unten, Zeile, nur um zu zeigen, dass dies eine Trennung oder so etwas ist. Aber dafür ist ein weiteres Beispiel aus Mauerwerk, Griechisch. Also dieser hier ist großartig. Das hier ist gut. Das hier ist wirklich großartig. Und, ähm, das ist alles über Mauerwerk Gier. Ich hoffe, Sie haben die Idee verstanden, Mason Regrade zu verwenden. Ah, und Sie werden es auf verschiedene kreative Arten verwenden. Wenn Sie irgendwelche Probleme haben, lassen Sie es mich in den Fragen wissen. Oder du kannst mich alles fragen. Sie können mich persönlich kontaktieren. Meistens antworte ich, sobald ich hoffen kann, Sie in der nächsten Lektion zu sehen. Gehen wir also zum nächsten Video über. 19. Verhüten: in diesem Video, Ich werde toe Sprechen Sie über eine kreative Methode aus der Definition Ihres Layouts, die immer in Prozentsätzen denken, aber nie, wie Sie Ihre Note auf Ihrem Layout definieren. Versuchen Sie, in einer Weise zu denken, dass dies 20% Rabatt auf das Layout horizontal nehmen wird. Dies wird etwa 80% Rabatt auf das Layout nehmen, so dass Sie Lee in Prozentsätzen definieren und verschiedene Raster mit Prozentsätzen zuweisen können. Und Ihre Entwickler werden Sie lieben, weil es für Ihre Entwickler oder Entwicklungsteam leichter ist . Zitieren Sie es, und Sie können verschiedene einfache Variationen erstellen, um etwas Kreativität in Ihrem Layout zu haben. Nun, wenn Sie jemals Videospiele oder Kampfspiele gespielt haben, gibt es einen Begriff namens Combo. So Combo ist, wenn Sie versuchen, Ihren Gegner zu treffen und weiter schlagen sie mit verschiedenen Kombinationen aus. Er ist so in ihrem Design. Was ich meine mit Prozent komponieren ist, dass Sie verschiedene Layout-Combos wie 60% und 40% campell 50 50 Combo, 20% und 80% zwanghaft verwenden 60% und 40% campell 50 50 Combo, werden. Wir werden sehr über Layout mit all diesen verschiedenen Kombinationen gehen, dann können wir auch drei Spalten Combos wie 2020 und 60 com Schüssel 40% 30%. Also sind sie alle machen 100%, um sicherzustellen, dass sie addieren, 200% gekauft. Versuchen Sie, wissen Sie, eine Combo zu machen, die über oder unter 100% geht. Dann haben wir 50 30 20. Es gibt also, dass man Tonnen von Kombinationen sagen kann. Sie können viele verschiedene Kombinationen tun, indem Sie dies tun, wie Sie 10% oder 20% oder 30 pro 30 70% Combo haben können. Das ist also eine andere Technik, die ich denke, dass viele Designer beginnen. Versuchen Sie, in diese Art von Begriffen zu denken. Versuchen Sie, prozentuale Kombinationen in Ihrem Layout zu verwenden. Also hier können Sie sehen, ich zeige einige Ideen aus verschiedenen Combos, wie Sie oben sehen können . Wir haben 40 60 jetzt im nächsten Abschnitt, anstatt wieder 60 40 oder 40 60 zu verwenden oder schlecht zu wiederholen. Ich versuche, es auf der linken Seite zu verschieben, und ich habe versucht, 25% und 75% Combo zu verwenden, dann in der nächsten Zeile oder im nächsten Abschnitt von meinem Design verwende ich 25 25 25 25. Also haben wir vier gleiche Boxen. So ist es, wie Sie sehr Ihr Layout mit verschiedenen Prozent Alterskombos gehen, anstatt einen Monitor auf US-Layout von 40 60 40 60 40 60 oder 60 40 oder 50 50 zu verwenden. Dies wird ein langweiliges Design schaffen. Ihre Benutzer werden, wissen Sie, Ihre Gedanken. Sie brauchen etwas anderes nach ein paar Sekunden. Also, wenn Sie versuchen, sehr Ihr Layout, es wird einige Interesse in ihrem Geist zu schaffen, und sie werden weiter surfen, dass Wraps. Ich versuche nicht, über kreativ zu sein und versuche, Layouts zu erstellen, die, du weißt schon, ein Problem für die Benutzer sind du weißt schon, . Aber Sie haben zwei sehr Ihre Combos. Das ist also eine andere Technik, die ich denke, dass viele Designer nicht verwenden. Nun, hier ist ein völlig aus und hören, was ich versuche zu tun, ist, dass ich versuche, sehr mein Layout und versuchen, den Ratschlag Raum hier drüben, anstatt 2040 60 Combos zu haben. Ich werde hier etwas weiße Fläche haben, also haben wir 6 50% über Haare, 25% über Haare und 25% Leerraum im Haider. Was ich also tue, ist 50 25% Leerraum und 25%. Äh, was hier? So etwas kannst du auch tun . Versuchen Sie also nicht, immer alles zu spüren. Sie können den Leerraum in Ihrem Layout wieder verwenden. Hier drüben. Wie Sie sehen können, haben wir haben wir etwa 40% so oder hier. Ich denke, Sie müssen das 5/12 teilen. Also nehmen Sie die Idee ab, wann immer ich Prozentsatz verwende. Das ist 25% und ah, das ist, ich denke, würde in 75% aufgeteilt werden. Also, was auch immer ich benutze, ich versuche sehr mein Design. Und wieder, Sie können hier sehen, diese vier Boxen sind 25%, aber das Layout ist anders. Es hat etwas Strahlung, indem man hier etwas Leerraum hinzufügt. Jetzt werde ich Ihnen einige Beispiele von einem meiner Lieblingsdesigner zeigen. Verlosung morgen. Ich versuche ihm von einer Menge Zeit zu folgen, wie vielleicht ein oder mehr Jahr, und Sie können hier drüben sehen. Dies ist ein aktuelles Design für so Ihre sperrige und Sie sehen können. Ich möchte Ihnen zeigen, wie Sie Ihr Layout in Prozentsätzen verwenden und versuchen, es in verschiedene Unternehmenskombinationen zu variieren . Hier können Sie sehen, ob Sie sich diesen Kopf hier ansehen, wir haben, wie, wie, 65 oder 60% und 40% für dieses Hocker Tor oder diesen Download. Reden Sie es hier über ein Video. Dann, wenn Sie in den nächsten Abschnitt gehen wir über und diese kleinen Informationen über diesen tollen Kerl jedenfalls haben wir, wie , , 30 oder 20% um 80% Zuweisung Overhead. Dann wieder, wenn wir in diese Gegend gehen, haben wir, wie, fast 50% um 50%. Wir haben mehr Platz, etwas Leerraum, einen gewissen Prozentsatz für Leerraum. Also werde ich es 40 60 nennen. So 10% ist fast der weiße Raum. Also, das ist wieder, wieder. Sie können hier wieder sehen. Es hat 20 oder 80% verbraucht, als wir 25 25 25 25 wieder hatten. 2080 25 25%. Dann wieder, 2080. So können Sie sehen, das ist, wie Ihr Layout läuft. Zehe sehen aus wie kreativeres Design. So neigen Sie dazu, einige Gumbo, verschiedene Kombinationen für verschiedene Abschnitte zu haben. Sie können sehen, dass wir hier sind. Dies ist auf viele verschiedene Arten wiederholt. Dies ist also wieder ein Principal off Design Repetition Port. Versuchen Sie, sehr Ihre Wiederholung. Also versuchen Sie nicht, eine ähnliche Sache 10 Mal hier drüben zu verwenden. Versuchen Sie, sehr in Ihrem Layout. Das ist also ein guter Weg, um zu zeigen, wie Sie Layouts verwenden können und kreativ ist, wie Sie sehen können wo hier, anstatt nur Bild Sie zu verwenden. Er hat Bild mit Text verwendet und auf der linken Seite wieder, wir haben einige Taste und Bild und diese Saudi nächste und diese Überschrift jetzt. Sehen wir uns nun ein weiteres Beispiel an. Hier ist wieder ein weiteres Design aus der Anstrengung Amal. Und Sie können sehen, wo wir hier fast schwerer auf der linken Seite haben. Hier haben wir das Bild und diese Belastung, die diese Last in das Innere dringt. Man kann sagen, Ah, ein bisschen bricht das Layout. Aber es sieht immer noch toll aus. Es wird wie out of the box genannt. Später. Ich werde sowieso in einer anderen Lektion darüber reden, also kannst du hier wieder sehen, wir haben also kannst du hier wieder sehen, wir haben 70 40 oder 70 30 so etwas. Und wieder in diesem Abschnitt. Hier drüben haben wir hier auf der linken Seite, 40 oder 45 35 65 oder 60% fast auf dem Licht. So können Sie sehen, dies ist eine große vidi ation und legen Sie wieder. Wir haben Overhead. Wir haben 33 33%. Oder hier wieder in diesem Abschnitt, können Sie sehen, wir haben, wie, 30 70 wieder, fast ähnlich dem. Dies ist wieder eine große Verwendung. Und wir haben 33% 30% 33%. Das ist 100%. Dies ist wieder 33% 3 Bewertungen. Und hier haben wir etwas Ähnliches. Fast dieser Kopf hier drüben. Das Layout ist, dass wir 40% hier haben , , oder vielleicht 35% und 65 oder 60% auf der linken Seite. Das ist also die Aufschlüsselung von verschiedenen Layouts von großen Designern, und das ist, wie Sie Ihre Combos verwenden werden. Und ich kann Ihnen 10 und Tausende von verschiedenen Designs zeigen. Aber ich denke, das wird alles für Sie erklären, also muss ich nicht mehr erklären. Dies ist kein sehr wissenschaftliches Thema oder Zeitreise-Gleichungen. Das ist also alles. Wenn Sie Fragen haben, die Sie mir stellen müssen, fahren wir mit der nächsten Lektion fort. 20. Kreative Nutzung im Layoutdesign: in diesem Video werde ich über ein sehr wichtiges Konzept von Label-Design sprechen, das Leerraum und Ränder kreativ verwendet. Viele Designer habe ich gesehen, dass der Versuch Toe viel Weißraum und Ränder an den Seiten von ihrem Design vermeiden . Sie haben Angst davor, indem sie Weißraum oder Atemraum in ihrem Design verwenden. Jetzt werde ich Ihnen einige ah, viele Beispiele und einige Layout-Ideen zeigen . Und dann werde ich Ihnen zeigen, wie verschiedene Designer Whitespace und Ränder verwenden, um kreativ Outs zu kreieren, die aussehen werden ah, Herr besser als Ihre. Übliche Layouts, bei denen wir gleiche Menge von Margen auf beiden Seiten haben. Also hier werden wir zwei Techniken diskutieren. Mit Rändern auf einer Seite und Verwendung von Sprachraumblöcken. Jetzt ist Design eine Geschichte. So muss man in genau wie in einer Geschichte nicht alles am Anfang zeigen. Sie haben Zehen-Show-Szenen, in denen nur ein Teil des Designs sichtbar ist. Hier können Sie in diesem Design sehen, dass wir einen großen oder schweren Rand auf der rechten Seite verwenden. Wir haben viel Leerraum in unserem ersten Header-Abschnitt auf der rechten Seite. Jetzt bedeutet es eigentlich, dass wir hier einen großen Leerraumblock verlassen. Ähnlich, in diesem dritten Abschnitt lebten einen sehr großen weißen Raum Block auf der linken Seite. Whitespace, wenn es richtig verwendet wird, hat es seltsam. Also, wenn Sie versuchen, so etwas zu tun, können Sie es tun. Sie können es auch asymmetrisches Design nennen, weil es nicht richtig ausgewogen oder ausgewogen auf beiden Seiten ist. Aber trotzdem ist es irgendwie ausgewogen. Wenn Sie also in die Natur schauen, werden Sie eine Menge Symmetrie mit Asymmetrie sehen. Wenn man einen Baum auf den Ästen und den Blättern anschaut, die auf den Boden gefallen sind, sind sie nicht in einer Symmetrie, aber sie sehen gut aus, weil sie nicht zu sehr vom Pop-Gönner abweichen. Wenn Sie also ein Muster wie dieses haben und Leerraum auf der linken und rechten Seite verwenden und nicht, können Sie sagen, dass Sie die Vice Pres Blöcke innerhalb Ihrer Noten verwenden. Ihr asymmetrisches Design oder unausgewogenes Design fühlt sich immer noch ausgewogen an. Also hier bin ich, benutze eine Menge von großen Blöcken von weißen Räumen hier drüben. Nun, dies ist ein weiteres Beispiel, ich würde es nennen Manchmal Buch-Layout sind eine Menge Grafik. Designer könnten damit vertraut sein. Wenn Sie genau hinsehen, können Sie sehen, dass die sichtbare Linie, die dieses Design fällt, hier drüben ist. Also haben wir zwei Spalten. Lücke hier drüben auf der linken Seite. Und auch in ähnlicher Weise können Sie hier oben sehen. Wir haben hier drei Säulen und zwei Säulen. Also lasst uns das verstecken. Nun, wenn wir versuchen, so etwas zu tun, dann versuche ich diese Idee nur zu erklären. Jetzt können Sie sehen, dass diese Art off Layout wird Zehe haben, ah Ränder, die auf einer Seite mawr geneigt werden. Wir werden also größere Margen auf der einen Seite haben, wie Sie sehen können, dass Sie hier sind. Hier. Wir haben, wie, drei Spalten Rand, und auf der linken Seite, haben wir vielleicht einen kleineren Rand. Dies wird also einen sehr schönen Effekt in Ihrem Design erzeugen. Ich habe viele Designer gesehen, dass sie versuchen, die Reise auf beiden Seiten zu balancieren, aber manchmal, wenn Sie versuchen, Zehe Ungleichgewicht sie. Versuchen Sie, eine Seite schwerer mit Weißraum zu verwenden, wird es besser aussehen. In deinem nächsten Design würde ich dir raten, so etwas zu tun. Versuchen Sie, Ihre Designelemente zu verschieben. Lassen Sie zwei Spalten, anstatt, wissen Sie, Ihre alles mit diesen Spalten zu begrenzen und versuchen Sie, alles zu füllen. Versuchen Sie den Zehenweg. Ah, viel weg, äh, Platz auf einer Seite und ein bisschen weniger Platz auf einer Seite. So wird es einen sehr schönen Effekt erzeugen. Jetzt werde ich Ihnen einige Beispiele zeigen, wo Ränder kreativ verwendet wurden. Sie können sehen, ob Sie sich diesen Bildschirm hier auf der linken Seite ansehen. Die Ränder auf der linken Seite sind mehr als der Rand auf der rechten Seite. Wir haben also mehr Leerraum auf der linken Seite, als wir mehr Leerraum auf der rechten Seite haben. So werden Sie versuchen, toe, haben eine andere Art von Layout in Ihrer mobilen App. Es wird kreativer aussehen. Mal sehen, sagte dieses Beispiel und ich werde Ihnen zeigen, was ich eigentlich gemeint. Also, wenn du runtergehst, lass mich es dir zeigen, oder hier. Dies ist die Seite, die Sie sehen können, dass dieses ganze Design auf der rechten Seite geneigt ist. Es ist schwerer auf der rechten Seite und auf der linken Seite, Sie können sehen, ob Sie genau hinsehen. Es gibt viel außerhalb des weißen Raums. Wenn Sie also diesem Design folgen, können Sie sehen, warum. Viel Leerraum, viel Leerraum, viel Leerraum. Und dann änderte dieser Designer die ah lineare Ansicht und umgekehrt und wir haben eine Menge Leerraum auf der rechten Seite. Dann wieder, wir haben gleich fast gleiche Laster Wege auf beiden Seiten wieder. Viel Weißraum auf der rechten Seite. So werden Sie also Ihre Margen nutzen? Sind Ihre weißen Räume kreativ? Sie müssen einen größeren sprachbasierten Block auf der linken oder rechten Zehe verlassen. Holen Sie sich ein paar kreative Layouts. In ähnlicher Weise haben wir dieses Design Smart Retail. Und wenn Sie sich klar auf dieses Design konzentrieren und sehen, dass es auch fast auf der linken Seite geneigt ist. So haben wir mehr schwere Konstruktion auf der linken Seite. Wir haben Mawr Leere auf der rechten Seite. Also, wenn ich runterziehe, kannst du sehen, okay . Also hier haben wir mehr Leerraum. Alles ist eine Linie auf der linken Seite. Wir haben also mehr Leerraum hier drüben, ähnlich im Abschnitt. Das sind also Juden aus dem Leerraum. Versuchen Sie den Zeh. Konzentrieren Sie sich, dass Sie auch viel haben oder viel Leerraum auf der rechten oder linken Seite lassen können, um bessere Ideen bei der Gestaltung Ihrer APs oder Websites zu bekommen. Hier ist ein weiteres Beispiel Flex Flat Tax Schiff intelligenter und Sie können sehen, dass wir hier etwas haben einige kreative Verwendung in diesem Abschnitt aus Leerraum. Sie können sehen, wir haben einen sehr großen Textblock und wir haben Bild und wir haben eine Menge Leerraum unter diesem Bild. Also denke ich nicht, dass wir in Bezug auf die Margen verlassen werden. Ich Platz auf dem Lachen auf der rechten Seite. Sie können auch einen großen Block vom Leerraum unten lassen. So wird es eine Menge von Guter Wirkung zu schaffen. Sie können sehen, dass dieses Bild bereits sehr schwer ist. Es ist bunt, so dass Benutzer, so dass es nicht suchen Ungleichgewicht. Wir haben eine Menge Text hier drüben, aber es sieht immer noch toll aus. So ist es wie eine Form aus. Man kann sagen, äh ah ah Hammer oder so etwas. Also haben wir eine vertikale Richtung hier drüben und horizontal hier drüben. Also nur zwei Blocks entfernt, können Sie sagen, kombiniert zusammen? In ähnlicher Weise können Sie in diesem Abschnitt sehen wir die umgekehrte umgekehrte Anordnung für dieses Layout. Dies ist also eine andere Technik, die ich Ihnen bereits gezeigt habe, dass Sie versucht haben, sehr Dinge Zehe besser Layout zu bekommen und besser aussehen Zeh haben einige mawr ansprechende Designs wieder. Wenn Sie sich den oberen Rand dieses Abschnitts hier ansehen, können Sie sehen, dass es nach diesem viel Leerraum gibt. Ah, Navigation. Also haben wir, wie, wie, ich denke, zwei oder vielleicht 300 oder 350, vielleicht 400 Pixel aus der Lücke hier drüben. Das ist also eine Menge aus der Lücke. Ich habe nicht viele Websites gesehen, die sie versuchen, Leerraum so zu verwenden. Sehen wir uns hier einige weitere Beispiele an. Wir haben ein weiteres Beispiel und hier ist diese App und Sie können sehen, wir haben mehr Marge auf der linken Seite und alles ist auf der rechten Seite verschoben. Also, Hanzal, Sie können unsere Kinder nach rechts sehen und ah, diese ganze Information sofort nach rechts, obwohl sie auf der linken Seite ausgerichtet ist, aber alles, was ich habe. Ah, viel Spielraum. Oder hier, lass uns das noch mal sehen. Dies ist ein weiteres Beispiel. Auch hier werden Sie deutlich sehen, dass wir viel Leerraum auf der linken Seite haben. Dies wird also einen sehr schönen Effekt in Ihren Designs erzeugen. Wenn Sie für Mobil oder Websites entwerfen. Denken Sie nicht, dass wir einen sehr kleinen Bildschirm auf Mobilgeräten haben, so dass wir keine kreativen Ideen verwenden können. Du kannst sie benutzen. Okay, hier haben wir noch ein Beispiel. Und wieder sehen Sie hier drüben haben wir viel Weißraum auf der linken Seite, und alles ist Kinder auf der rechten Seite. Sogar die Plus-Taste wird sehr Vice Lee verwendet. So ist alles meist schwer auf der rechten Seite am guten Rand links. So wird es einige kreative Look in Ihren Designs zu schaffen. Also werde ich Ihnen ah geben, und Übung oder Zuweisung, um etwas so einen Bildschirm wie diesen zu erstellen. Ich werde Ihnen einen Beispielbildschirm geben. Wir werden versuchen, so etwas zu tun. Vielleicht so etwas wie dieses. Diese Woche und wir werden sehen, wie Sie mit verschiedenen Ideen kommen. Ich hoffe, Sie haben gelernt, wie wir auf den Fuß gehen. Verwenden Sie kreative Ränder auf der linken oder rechten Seite oder sogar unten. Einige Bild, um kreative Layouts zu erstellen und versuchen, Zehe raus aus den normalen Designern. Lynn. Also steigen wir aus ihrer Spur und wir fahren in einigen etwas abseits der kreativen Spur, unsere Design-Autos. Okay, ich hoffe, Sie haben diese Lektion genossen. Wenn Sie Fragen haben, die Sie mir stellen müssen, fahren wir mit der nächsten Lektion fort. 21. Projekt: Jetzt haben Sie gelernt, wie man Ah verwendet, viel Rand auf der linken oder rechten Seite, um kreative Layouts zu erstellen. Jetzt ist es an der Zeit, dass du mir einen Auftrag wie diesen geben wirst. Ich zeige es Ihnen auf Ihrem Bildschirm. Ich benutze gerade jetzt Figur. Sie können jede Design-Software verwenden, jedes Werkzeug, das Sie wollen. Und du Was ich will, dass du eine Menge Leerraum links oder rechts lassen wirst. Was auch immer Sie denken, ist für Sie möglich. Also, jetzt bin ich du. Ich habe diese Bauch-App namens gesunde Lebensmittel erstellt oder er wird Essen oder was auch immer. Du kannst so etwas gestalten und mir deinen Bildschirm so zeigen. Versuchen Sie also, ein Layout mit viel Leerraum oder Rand links oder rechts zu erstellen. Und hier haben wir das gerenderte Bild, das Sie hier sehen können. Also erschaffen Sie so etwas und ich warte auf Ihre Entwürfe. Versuchen Sie, ein Mock Up Design einzureichen, wo Sie Ihr Design auf einem Mobiltelefon oder so etwas zeigen . Also lass uns sehen, was du dir einfallen kannst 22. Out und overlay in Layoutdesign: in diesem Video werde ich über eine ganz andere Technik sprechen, die viele Designer nicht verwenden, oder vielleicht über die Hinweise, die sie nicht verstehen, die außerhalb des Box-Layouts liegt. Jetzt out of the box basiert im Grunde auf diesem Prinzip, dass, wenn ein Benutzer oder Menschen , sie weiterhin den gleichen Schirmherr sehen oder Ähnlichkeit in Ihrem Design scheinen, als hätten Sie mehr, nicht eigene Stimme. du zum Beispiel Wenndu zum BeispielMusik hörst, wenn der Sam be Beat etwa 10 Minuten läuft, wirst du dich langweilen. Was für Musiker gibt es also? Versuchen Sie Zehe sehr nach alle 30 Sekunden oder nach alle 15 Sekunden, die Toe Jane versuchen. Es Schläge oder solche Dinge. Es geht also um Musik. Aber wann immer Sie etwas entwerfen, haben Sie Layout. Sie müssen das Interesse Ihrer Benutzer an Ihrem Design abhalten. Um das zu tun, müssen Sie abschleppen, denken und ändern. Dort können Sie sagen, Ansichtslinie, zum Beispiel, wenn sie etwas sehen und alles auf einer Linie auf der linken Seite ausgerichtet ist, müssen Sie das ändern. Nach einiger Zeit, vielleicht ihre Kreuzung. Sie versuchen, den Hintergrund auf den gesamten Bildschirm zu erweitern, oder Sie versuchen, einige Elemente in Ihrem Design toe einen anderen Abschnitt zu überlappen . Sie überlappen zwei Elemente, und es wird ein sehr interessantes Layout erstellen. Versuchen Sie also, von den Rasterlinien abzuweichen. Versuchen Sie, von der gleichen monotone Art von Design-Layout abweichen. Versuchen Sie, aus der Box zu gehen und ich werde mit Ihnen viele verschiedene Beispiele und auch verschiedene Bildschirme teilen , die ich Beispielbildschirme habe, die ich für Sie entworfen habe. Also werden wir das besprechen und ich werde Ihnen viele kreative Ideen geben, um diese Out-of Box-Technik in Ihrem Leo-Design zu verwenden . Und jetzt hier zeige ich Ihnen die erste Anordnung und Sie können sehen, dass alles links zu einer einzigen Zeile aufgereiht ist . Nun, wenn Sie auf die rechte Seite schauen, bin ich sehr in meine Rassen. Ah, Herr. Im zweiten Abschnitt hier sehen Sie, dass ich das erweitert habe und ich dieses Bild außerhalb meiner Noten verschoben habe. Das sind also meine 12 Säulenraster und Sie können Ihre Haare sehen. Ich verwende 12 Spaltenraster und ich verschiebe dieses Bild außerhalb von Tikrit. Sie können das bewegen, und vielleicht wird es Ihre Haare berühren, um die ganze rechte Seite zu nehmen. Sie können auch etwas tun, wie Sie es in diese Richtung in beide Richtungen erweitern können und wird die Grippe von Ihren Benutzern zu brechen. Ich so könnten sie denken, dass alles in diesem Behälter enthalten ist. Aber wenn Sie versuchen, dieses Land in Container 12 Klasse Container brechen, es wird Zehe machen viel interessanter aus. Jetzt hier ist eine weitere Anordnung aus über die Off-die-Box-Technik. Anstatt Ihr Bild, Hintergrund oder irgendeine andere Sache unser liebes Designelement zu erweitern und die Klasse zu brechen, brechen wir tatsächlich das Layout. Wir überlappen die Dinge aufeinander, also haben wir Steuerbild im Hintergrund, und das nächste Stück aus dem Text überlappt sich auf dem Bild. Das ist also eine andere Technik , von der ich denke, dass viele bemerkte Designer neue Designer sind. Sie versuchen nicht, es zu benutzen, also haben Sie keine Angst. Du wirst viel besser aussehen. Ihre Entwürfe werden viel besser aussehen, wenn Sie versuchen, so etwas zu tun. Versuchen Sie also die Überlappung, das Bild über Text oder wir haben einen Steuerblock und wir haben hier ein Bild wie das, und der Text überlappt sich. Also, jetzt ist Text tatsächlich ein lesbares Element, so dass wir nicht viel Teil davon verstecken wollen. Wenn Sie einige von dem Text, den Sie haben, verstecken möchten, müssen Sie einige aus dem Teil verstecken. So ist es immer noch lesbar und der Benutzer kann die Bedeutung verstehen. Also bedenken Sie das im Hinterkopf. Jetzt können Sie auch Bild über ein Bild wie das überlappen. Wir haben viele Bilder. Wir können auch jeden Mitchell hier haben, nur um die Monotone abzubrechen. Ihr Designdesign ist eine Geschichte, die Sie Schleppwechsel haben. Einige Handlung Twist in Ihrer Geschichte ist, dass Sie Jane die Richtung von Ihrer Geschichte als wieder abschleppen . Gehen Sie zurück zum Punkt. Das sind also die Dinge, die Sie im Hinterkopf behalten müssen, während Sie kreativ gestalten. Jetzt können Sie sehen, dass Sie viele verschiedene Kombinationen hier erstellen können. Sie können sehen, ich habe ein vollständiges Vogelbild und ich habe überlappenden Text, der auf der linken Seite ist. Und es hat nur einige aus dem Teil als Überlappung. Jetzt, im nächsten Abschnitt, sehen Sie, dass ich die Richtung aus meinem Labor ändere. Ich ging auf die rechte Seite, und jetzt haben wir hier einen rechten Seitenblock, der sich auf dem Bild überlappt, das fast in der Mitte ist. So können Sie sehr diese Dinge in Ihrem Layout. Stellen Sie sicher, dass Sie ein paar Gitter hier rüber fallen. Sie können sehen, dass ich Dinge an den Gittern ausrichte, aber es wird viel von kreativem Layout löschen, wenn Sie versuchen, solche Dinge zu implementieren. Das ist also ein sehr wichtiges Konzept. Ich wiederhole mich immer wieder. Versuchen Sie, kreativ Out-Out of the Box-Layout zu verwenden. Versuchen Sie, die Dinge zu überlappen. Versuchen Sie, Ihre Sachen aus Ihren Kisten zu tauschen. Denk aus der Kiste nach. Und begrenzen Sie sich nicht auf die 12 Kolonien. Gier. Jetzt ist hier eine andere Beziehung. Du hättest das vielleicht gesehen. Ich habe einen vollständigen Bildhintergrund, und dann habe ich ein Anmeldeformular oben. Also habe ich das gesehen und habe das in vielen Designs verwendet. Ich habe einige Landingpages entworfen, auf denen ich dieses Anmeldeformular verwendet habe und das Abonnementformular ist ein bisschen, wissen Sie, erstreckt sich von diesem ersten Header-Abschnitt. Das wird also viel Interesse schaffen. Nun, unten haben Sie, sehen Sie einen Abonnenten-Abschnitt hier drüben, und Sie können sehen, wir haben ah, schlecht gewachsen an der Unterseite und an der Spitze. Wir haben dieses Abonnement. Ähm, das wird ein Abonnementformular in die linke rechte Richtung sein, anstatt mit Langeweile zu reden . Es wird also eine E-Mail hier drüben haben, als ah Burton hier drüben und etwas Textur hier drüben, etwas, das so unseren Newsletter abonnieren oder so etwas ist. Jetzt können Sie sehen, das ist ah, fast nehmen. Es ist fast in der Mitte von diesem Abschnitt hier drüben, und das ist auf der rechten Seite, und es dauert 12345 fast fünf Spalten. Und das dauert fast, glaube ich, 10 Spalten. Es gibt also viele Variationen, die Sie jetzt tun können. Ich werde Ihnen einige von den Beispielen zeigen s, damit Sie bekommen können, was Sie tatsächlich verwenden können und was Sie tatsächlich können, denn in der Inspiration wird Ihnen eine Menge Ideen geben. Wir generieren Ideen aus anderen Ideen. Also lassen Sie uns einige Beispiele in der nächsten Lektion 23. Webdesign und Mobile aus box: nun Lassen Sie unsnuneinige Beispiele aus dem Out-Ot-Box-Layout sehen und wie Sie das verwenden können. Wenn Sie sich dieses Design ansehen, lassen Sie mich es Ihnen zeigen. Wenn Sie sich dieses Design ansehen, Okay, also gehen wir zu diesem Abschnitt hier drüben. Also, wenn du es dir hier ansiehst, haben wir diese Stapel hier drüben, die so etwas nehmen. Auf der rechten Seite können Sie sehen, dass wir einen Teil haben. Und wenn Sie ein neuer Designer sind, könnten Sie Ihre Last in etwa so etwas nutzen. Also könnten Sie vielleicht verwenden, Sie könnten das ausrichten, was de ausgewählt ist. Möglicherweise richten Sie Ihre Schaltfläche so mit dem Text aus. Also nehmen Sie den ganzen Raum und eine weitere Steuer und solche Dinge. Hier können Sie sehen, anstatt diese Schaltfläche zu verwenden und sie direkt unterhalb mit diesem Text auszurichten, hat dieser Designer es tatsächlich nach links verschoben, damit Sie sehen können, dass alles hier ausgerichtet ist . Der Text ist eine Zeile, aber die Elemente auf der rechten Seite haben unterschiedliche Variationen. Das wird also viel helfen. Eigentlich dieser Designer diesen Knopf auf der linken Seite ein wenig verschoben. Das ist also eine andere Technik. Und hier können Sie sehen. Hier haben wir das. Siehst du was? Hier? Diese Bilder, sie sind aus diesem Abschnitt oder Kopf ausgedehnt. So ähnlich habe ich dir gesagt, dass du zwei hast. Sehr. Dein Layout. Du musst die Dinge ändern. Zum Beispiel, Sie können hier über diesen Abschnitt sehen, hier endet es mit dieser Linie aus Richtung. Also auf der rechten Seite, Wir haben mich hier etwas ziehen lassen, zum Beispiel, Rechteck. Also, eigentlich ist das eigentlich die Richtung, in der wir uns bewegt haben, als wir das verlassen haben. Okay, also müssen wir, äh, äh, Linien abschalten. Bewegung eins ist diese eine und zweite, diese. Also dieser, hielt er entlang bewegliche Elemente. Die Elemente sind hier oben auf dieser Linie ausgerichtet, aber hier eigentlich hat er eigentlichalles aus dieser Linie herausgezogen. So werden Sie nur in Ihrem Design erstellen. Schauen Sie sich diese beiden Abschnitte an. Ok? So haben Sie die Idee, wie, eigentlich werden wir out of the box Layout ähnlich im nächsten Schritt verwenden, und jetzt können Sie sehen, hey, tatsächlich versucht Zehe variiert oder er oder sie, wer auch immer der Designer ist dies Es ist ein tolles Design. Ich glaube, ich habe es von B Haas. Nein, ich erinnere mich nicht, wo eigentlich die UL ist oder was auch immer das Design ist. Dieser Name ist eso Hier haben wir wieder dasselbe. Aber Sie können das Arrangement absehen. Die Bilder wurden geändert. Also hier haben wir 12312 Und hier haben wir 12 und drei in der vertikalen Richtung. Das ist also eine große Veränderung hier drüben. Außerdem können Sie das Layout sehen, da Sie die Richtung vom Bild ändern. Ähnlich sieht es wieder klar aus. Wir haben hier etwas, das das Layout bricht, so dass Sie dieses Bild hier erweitert sehen können . Jetzt beginnt der nächste Abschnitt und nimmt das so, damit Sie sehen können, dass Sie verstehen können , was ich versuche Zehe. Sagen Sie den Punkt hier wieder, Sie können sehen, dass dies außerhalb der Box auf erweitert wird, und das ist alles. Deshalb wollte ich Ihnen dieses Beispiel zeigen. Weil es ein großartiges Beispiel ist, abwechselnd zu sein. Ihr Layout kommt aus der Box. Sehen wir uns ein paar weitere Beispiele an. Ok. Anstatt zu denken, dass Sie alle sind immer müssen nicht Ihr Bild oder Dinge aus der Box zu bewegen . Aber Sie können eine ähnliche Technik verwenden, die tatsächlich hier verwendet wird. Sie können in diesem Abschnitt hier sehen. Vergrößern wir uns ein wenig. Also in diesem Abschnitt hier drüben, können Sie sehen, ich nenne es auch Out-of the Box-Technik. Warum? Weil Sie sehen können, zeigt dies die Bewegung. Nun, hier haben wir einen Patron auf der Rückseite dieser Box, dieses Bild hier drüben und es bewegt sich in die linke und obere Richtung. Also ist es tatsächlich einige Hintergründe, ein wenig Hintergrund von diesem Patron oder Hilfe haben. Und es macht es auch aus der Box. Warum? Weil Sie sehen können, dass dies die Linie außerhalb des Standorts ist. Also hier bewegen sich die Verwendungen LA, ähm Augen in der Zerstörung. Aber um das zu brechen, hat er diesen kleinen Mäzen benutzt oder hier. Also habe ich diese Technik wirklich geliebt. Dies ist eine andere Technik, die Sie haben Zehe zeigen etwas einige, einige Farbe. Irgendein Mäzen. Sie können einen Hintergrund verwenden. Ich habe es oft gesehen. In ähnlicher Weise hier in diesem Haar sehen, können Siehier in diesem Haar sehen,dass es ein Muster hat. Es hat einige Blätter auf, die sich aus dieser Box erstrecken. Sie können sehen, ob Sie hier einen Kasten zeichnen. Zeichnen wir eine Kiste. Wenn wir also einen Kasten zeichnen, können Sie sehen, dass dieser Urlaub aus dem Kasten geht. Das ist ein weiteres Beispiel, Lexie. Wenige mehr. Und hier haben wir einige Beispiele aus der Hoffnung. Bringen Sie andere Elemente auf. Okay, hier haben wir ein anderes Design, das sehr einfaches Design ist. Und Sie können sehen, dass sich dieser ganze Text auf diesem Bild überlappt. Das ist also eine andere Technik, die wir haben, die ich Ihnen gesagt habe, dass sich mit anderen Designelementen überschneidet. Ähnlich, wenn wir hier wieder runtergehen, haben wir zwei überlappende Bilder. Anstatt Text, der das Bild überlappt, haben wir ein Bild, das das Bild überlappt. Das ist also eine andere Technik, die ich dir gezeigt habe. Und ah, hier haben wir die gleiche Technik. Was ist, dass Sie sehen können, ob wir von hier ziehen. Dies ist von einer Linie außerhalb des Standorts. Das ist also die Box. Und im nächsten Abschnitt, Sie können sehen, hey bewegt auf der linken Seite und ein nehmen anderen Raum hier drüben. Also, jetzt ist unser großer eigentlich so breit, so dass wir zwei Blöcke übereinander haben. Eins ist eine vertikale Richtung Großbritanniens. Einer ist ein bisschen in horizontaler Richtung. Dies variiert wiederum Ihr Layout, verschiedene Layouts oft aus der Box zu haben und Dinge zu bewegen. So wird das Zehe, um ein großes Interesse an Ihren Entwürfen zu schaffen. jetzt zur mobilen APS kommen, können Sie hier nicht viele Dinge sehen, aber , ich muss Ihnen etwas zeigen,das sich überschneidet, damit Sie diese Last sehen können. Ihr Haar fallen über, und es sieht wirklich schön aus, weil es hatte es überlappt die Hälfte der ah, die Hälfte aus. Die Last überlappt sich auf diesem Bild. Das ist also ein sehr wichtiges Konzept. Sie können die aß es verwenden, und es wird eine Menge Interesse zu schaffen, auch Ihre mobilen Labs. Sehen wir uns hier ein paar weitere Beispiele an. Wir haben wieder überlappenden Text hier drüben. Wenn Sie in diesem Abschnitt hier schauen, haben wir viele verschiedene Rassen und Wanderungen aus verschiedenen Blöcken, nur um sich zu ändern. Sie können das Monotone von Ihrem Design sagen. Lass uns zu diesem übergehen. Okay, hier haben wir also Bild im Hintergrund und Text ist überlappt. Es sieht sehr schön aus. Ah, Effekt. Und ich werde Ihnen nur ein paar Beispiele und Konzepte zeigen. Also, nur um deinen Geist zu öffnen, hier haben wir wieder dasselbe. Und das ist ein sehr tolles Design. Wir haben einen blauen und roten und orangefarbenen Block und darüber hinaus haben wir Ermittlungen neu. Das ist also ein Artikel, den Sie hier sehen können, lesen Sie Artikel hier. Sie können auf der linken Seite sehen, hier können Sie sehen, dieses Bild wurde durch den Stapelblock überlagert und es sieht wirklich cool aus. So nenne ich es manchmal verstecken und zeigen oder verstecken und suchen so etwas. Es ist eine sehr schöne Technik. Sie haben Zehenüberlappung Ihre Elemente. Du hast Zeh, bewegst sie, wie du hier drüben sehen kannst. Diese drei hier drüben sind nicht auf dieses Bild ausgerichtet. Sie ziehen aus diesem Bild heraus. Also das sieht hier wieder richtig cool aus, wir haben überlappende Bild- und Textbilder, die sich auf dem Steuerblock überlappen. Auch hier haben wir die gleiche Technik, dieses kleine Bild, das jeder Punkt sich in diesem großen Bild überlappt , Diese Texturen überlappen sich auf diesem großen, großen Bild. Das ist also eine großartige Technik, die Sie haben Zeh er es irgendwann benutzen. Nun, hier haben wir ein sehr minimales Design und Sie können wieder sehen, wir sehen die gleichen Gönner waren hier, was sich überlappend. Also dieses neue Aussehen Credo es überlappt sich hier drüben, Make-up. Und, ähm, alles ist in 33 Blöcken, drei Säulen , und trotzdem versuchen sie , diese zweite mittlere Spalte in zwei zu teilen. Und das Interessante ist, dass sie Dinge auf und ab bewegen. Also werde ich über den Moment in der vielleicht die nächsten paar Lektionen sprechen. Bis dahin musst du trotzdem lesen, also ist das eine andere. Das ist ein experimentelles Design, aber ich werde Ihnen hier ein paar Dinge zeigen. Eins ist, dass Sie sehen können. Das ist fast zentral raus. Wir haben wenig Steuern auf der linken Seite und einige von dem Brief hier drüben. Sie können sehen, es ist, ähm es ist hinter diesem Bild, das,glaube ich, Jelly Highlighter Elf ist glaube ich, . So etwas wie das. Also, aber ich empfehle nicht, dass Sie das einstellen. Du versteckst viel vor deinen Briefen. Vielleicht sind ein oder zwei maximal. Aber das ist ein experimentelles Design. Jetzt liebe ich wirklich, wie dieses ganze Geschäft im Shop Shopping-Shop, das ist, eigentlich, Ich denke, Navigation ist in Zerstörung. Es könnte also schrecklich oder beweglich sein. So etwas wie das. Wie auch immer, hier haben wir wieder einige hinter dem Text hinter diesem Bild versteckt. Dies ist also ein Layout, das tatsächlich zerstört wird, sich bewegt, zerstört von oben links nach unten. Richtig? Aber ich mag es wirklich. Es benutzt sowieso eine Menge kreativer Dinge hier drüben. Also wieder, wir haben verschiedene Blockgrößen. Wir haben völlig seltsam. Wir haben etwas Marge rechts und links, und dann haben wir wieder in der Mitte. Okay, die Sache, die ich dir zeigen wollte, ist diese Stapel, die sich dahinter verstecken? Das ist also alles. Ich hoffe, Sie haben die Idee verstanden, Dinge zu überlappen und Dinge aus der Box zu bewegen . Und ich hoffe, Sie werden es in Ihren Entwürfen genießen. Wenn Sie Fragen haben, die Sie mir stellen müssen, fahren wir mit der nächsten Lektion fort. 24. Projekt: Jetzt werde ich Ihnen einen Auftrag geben. Erstellen Sie ein Layout, in dem Sie Überlappung verwenden möchten. So können Sie in diesem Design sehen, dass sich dieses Mädchenbild überlappt. Dumb Die Kleider oder Kleider kurz hier drüben Der Text eso Dies ist ein Beispiel Auch, lassen Sie mich Ihnen zeigen. Hier ist mein Beispiel. Ich denke, Sie haben das bereits gesehen, dass ich diese Form hier über die beiden Abschnitte überlappte auch, es geht aus dem Boden von diesem Bild. Okay, hier haben wir ein Beispiel hier ist ein anderes, das Sie sehen können, wenn Sie hier in diesem Abschnitt genau hinsehen , können Sie dies sehen. Diese vier Symbole dieser vier Funktionen aus unseren Diensten sind tatsächlich überlappend Dieser Abschnitt an der Spitze, die auch dieser Header ist, ich denke, lassen Sie mich Ihnen eine weitere zeigen. Dies ist ein weiteres Beispiel, das Sie hier sehen können. Ich überlappe das Bild hier drüben. Lassen Sie mich es Ihnen zeigen. Das überlappt sich also im nächsten Abschnitt oder hier. Dies ist also nur, um einen guten Effekt in einem Layout zu erzeugen, so dass Sie so etwas verwenden oder entwerfen können und mir zeigen, wie Sie diese überlappende Technik verwenden werden, Sie können überlappende Bilder über Text verwenden oder Sie können Überlappungen in einem anderen Abschnitt verwenden. Also freue ich mich darauf, Ihre Aufgaben zu sehen. Also lasst uns anfangen, einige überlappende Technik zu machen und ihre Technik zu verwenden und mir deine Entwürfe zu zeigen . 25. Emphasis im Layoutdesign verwenden: in dieser Lektion, werde ich wirklich eine meiner geheimen Techniken, die ich durch gelernt habe. Man kann sagen, dass ich immer wieder verschiedene Designs analysiere, und dann habe ich etwas gelernt, das sehr einzigartig im Layer-Design ist. Also, wenn Sie etwas entwerfen und möchten, dass es Interesse schafft, dann werden Sie Maßstab und Hervorhebung in Ihrem Layout richtig verwenden. So Skala ist eigentlich eins aus dem Design. Sie können Techniken setzen, bei denen Sie versuchen, ein Element mehr hervorzuheben oder für ein Element hervorzuheben als andere. So können Sie sehen, ob Sie drei oder vier Funktionen von Ihrem AB oder so etwas haben. Sie werden hervorheben oder machen eine aus, eine von ihnen größer und größer in der Größe. Ähnlich, wenn wir, wie vier Steuerblöcke, könnten wir versuchen, den Hintergrund von einem der Blöcke zu ändern. Dies wird also ein gewisses Interesse schaffen, und es wird eine sehr einzigartige Wirkung auf Ihr Layout haben. Also werde ich Ihnen einige von den Dingen zeigen, die Sie wirklich genießen und lieben werden. Also lassen Sie uns ein paar Muster sehen und dann gehen wir zu verschiedenen Beispielen. Nehmen wir jetzt an, wir hatten vier Blocks von Features. Oh, sind ein Geschäftsprozess oder so etwas? Nein. Zum ersten Mal, wenn Sie versuchen, etwas zu entwerfen, werden Sie dies langweilig herausbekommen, indem Sie sie in vier ähnliche Blöcke aufteilen und es wird wirklich langweilig aussehen. Jeder kann das tun, sogar ein Kind lüften jeden. Wenn du ihnen vier Dinge gibst, die ihnen sagen, sie sollen sie arrangieren, gehen sie zu Fuß. Ordnen Sie sie so an. Anstatt das zu tun, werden wir etwas ganz anderes haben. Wir werden eine von ihnen markieren und wir werden ihr Layout ändern. Mal sehen, wie sie jetzt aussehen werden. Nun, das ist das gleiche Vier-Block-Layout, aber wir haben das Layout geändert. Jetzt ist ein Element auf der linken Seite hier eine Menge Nachdruck. Ob es sich um eine Funktion oder irgendetwas handelt, wir werden es hervorheben. Es ist das beste Feature unter diesen vier Funktionen, und wir wollen, dass Zehe das Layout ändern. Wir wollen nicht, dass alte langweilig für Blocklayout, also ist dies die Antwort darauf. Also haben wir hervorgehoben und skaliert und machen diese größer und rechts. Wir haben drei Funktionen, die in der Reihenfolge von oben nach unten aufgeführt sind. Also abgesehen von alten langweilig wollen 34 horizontale Brocks von links, rechts, haben wir das Layout geändert. Dies ist ein sehr, sehr wichtiges Konzept. Wenn Sie es verstehen und verwenden können, wird es Lord off Interesse an Ihrem Design schaffen. In ähnlicher Weise können Sie sehen, ich habe wie drei Elemente. Zum Beispiel habe ich drei Elemente in meinem Design. Zum Beispiel haben wir die drei Boxen an der Unterseite. Das erste Layout, das über meins kommt, sind diese drei Boxen, die sie in drei Boxen teilen . Anstatt sie in drei Kisten zu teilen, werden wir einen von ihnen hervorheben. Zum Beispiel, es ist Überschrift oder so etwas, und ich werde gehen und einige Textilhaare sehr groß. Ich werde es größer machen und einige der Details oder vielleicht einige Artikel, die mit diesem Zusammenhang zusammenhängen werde ich hier drüben stellen. Das ist also ein weiterer in nur interessanterweise aus, wenn Sie drei Elemente haben. Also habe ich einen von ihnen hervorgehoben und skaliert und ich habe Ah, die anderen beiden, die ein bisschen können Sie sagen. Nicht so sehr hervorgehoben. Habe nicht so viel Nachdruck. Das ist also eine großartige Technik. Nein. Ich werde Ihnen einige Beispiele zeigen, die Ihren Verstand klären werden, wie man diese Technik tatsächlich benutzt . Nein, hier ist ein Design von einem tollen Designer. Ich weiß sowieso nicht, was ich Ihnen hier zeigen wollte, ist, als ob Sie in diesem Abschnitt sehen können. Wir sind hier. Der zweite Abschnitt dieser Website. Wir haben eigentlich drei Blocks von Gegenständen. Der eine ist dieser Block. Dann haben wir diesen Block hier drüben. Und dann haben wir diesen Block hier drüben. So können Sie hier sehen. Was? Eigentlich benutzen wir. Wir verwenden Skala. Wir nutzen Betonung. Wir legen Wert auf einen Block von diesem ganzen Abschnitt, und wir haben eine sehr große Überschrift. Wir haben ein Sub-Slogan oben. Wir haben ein paar Farben hier drüben. Sie können sehen, dies ist völlig anders als die Stile und Text hier auf der rechten Seite. Also haben wir hier Farben, sehr dunkle Farben und sehr attraktiv für große Typografie. Und auf der rechten Seite haben wir nicht dasselbe vor sich. Also hier haben wir auf diesem Abschnitt, wir haben mehr Wert. Wir haben es in der Größe größer gemacht. Wir haben größere Typografie, Deckgrößen verwendet und einige Ärzte verwendet. Das ist also die Technik, von der ich gesprochen habe. Lassen Sie mich Ihnen ein paar weitere Beispiele zeigen. Hier ist ein weiteres Beispiel für die Verschmelzung von Betonung und in Ihrem Layout, und Sie können diesen Designer sehen oder hören. Sie haben , vier Blöcke, tatsächlich, tatsächlich, fünf Blocks von den Dingen hier drüben entfernt. Einer ist dieser Dorfherr hier drüben. Anstatt, wissen Sie, vier Blöcke oben in derselben Zeile zu haben und einen Download-Button am unteren Rand zu haben. Dieser Designer, was hasste, ist, dass er diesen ganz anderen Block hier benutzt hat und diesen vier Blöcke hier drüben benutzt und einen größeren und deine Fähigkeiten in seinem Layout benutzt. Also haben wir einen. Mach drei und vier Blocks hier drüben und einen größeren Block hier drüben. Also haben wir fünf Blocks. Versuchen Sie also, auf diese Weise zu denken, anstatt Sie wissen, mit einem einfachen Layout wie 1234 Blöcke und dann Download-Button am unteren Rand. Sie können so etwas tun, also versuchen Sie sehr Ihr Layout so, und Sie werden mit Ihrem Design zufrieden sein. Andere Leute, sie werden es lieben. Also das ist eigentlich der Punkt aus Interesse. Ich wollte Ihnen zeigen, dass Sie einen Punkt aus Interesse an Ihrem Design oder Abschnitt, den Sie entwerfen, schaffen müssen. Ich werde Ihnen eine Übung für den gleichen Abschnitt geben. Du musst so etwas entwerfen. Also, um Ihre Fähigkeiten zu schärfen, also sehen wir uns ein paar weitere Beispiele an. Okay, hier haben wir einen anderen Abschnitt, der die gleiche Technik verwendet, die ich tatsächlich beschrieben habe, bei der Skalierung in Ihrem Design oder Layout verwendet wird. Du kannst dich hier sehen. Hier haben wir diesen Abschnitt, der Ah, ein bisschen größer ist . Dann haben wir vier Qualitäten oder vier Dienstleistungen oder wie auch immer Sie sie auf der Fahrt nennen. Also tatsächlich, wir haben fünf Abschnitte, fünf Elemente, und wir haben sie in Schlepptau so angeordnet, anstatt hier drüben zu haben, als wir vier Blöcke haben oder da unten. Und wir haben hier eine große Last, die sehr, ähm, einfaches Layout haben wird ähm, , was Sie oft gesehen haben. In ähnlicher Weise können Sie in diesem Abschnitt oder hier wieder sehen, diese Designer verwenden das gleiche hier drüben. Also haben wir einen Block. Dies ist auch eine verwandte Zehe überlappend und aus der Box gehen. Also sind Sie eigentlich diese Designer Mischen zwei Techniken gehen aus der Box und wieder Zeit zur gleichen Zeit mit Fähigkeiten. Also haben wir hier drüben ein sehr großes Element, als wir vier Blöcke auf der linken Seite haben. Und dann haben wir hier drüben einen Block wie diesen. Das ist also ein tolles Layout. Dies ist, denke ich, eine große Verwendung von Layout-Design in dieser Information Anzeigen dieser Informationen sieht erstellen, Sie können sehen, dass er auch Symbole mit etwas Text verwendet. Versuchen Sie nicht, immer in nur vier Boxen zu denken, die wir haben. Wir müssen alles so ausrichten, damit wir nicht alles so ausrichten müssen. Wir haben unsere Layouts wieder zu ändern. Dies ist ein weiteres Design von einem meiner Dessert Gunst Designer, die ich neige zu folgen auf. Seid Haas. Ich bin mir nicht sicher, wie war der Name des Kämpfens. Ich habe es trotzdem vergessen, also wieder hier. Sie können sehen, dass das Gleiche vor sich geht. Ein Block, großer Block. Dann haben wir vier kleinere Blöcke. Das ist also die Idee. Ich glaube, du bist schon zerstört, also will ich es nicht noch einmal erklären. Aber es gibt viele Situationen, in denen Sie es verwenden können. Es wird Zehe haben eine Menge großen Einfluss auf Ihr Design. Das hier ist also ein weiteres Beispiel. Sie können sehen, das ist, ah, Autowäsche Service. Und es wurde von Quantico Labors aus Polen entworfen. Ich liebe viele Designer aus Polen, weil ich denke, sie haben viel Kreativität von dieser Seite Europas. Ich habe viele Ihrer Designer gesehen, die von dieser Seite zugestimmt haben. Jedenfalls, ähm, damit Sie sehen können, dass wir ein Bild haben, und zwei Funktionen haben uns kontaktiert und die beste Waschanlage. Eigentlich haben sie haben sie vier Blöcke. Aber man kann hier sehen, dass es auf eine ganz andere Art und Weise angeordnet wurde. Wir haben hier oben entschieden, und das ist in der Mitte. Dann haben wir hier ein Bild und etwas Textur. Alle hier. Dann haben wir wieder zwei Blocks hier drüben. Also drei Blöcke, die völlig anders sind. Ich liebe dieses Layout wirklich. Also du I Was ich normalerweise mache, ist, dass ich tatsächlich ein Werkzeug namens Jing benutze und diese in eingefangen habe und sie in meinen Layout-Design-Ideen behalten. Also, wenn ich Zehendesign etwas habe, verwende ich das ähnlich, in diesem Abschnitt ein großes Bild auf der linken Seite, vier Features wie diese. Das ist also wieder Off-Skala verwenden. Wir haben ein sehr großes Bild oder hier, als wir vier Features hier drüben haben. Eso Das ist eigentlich wieder. Wenn man es hier nochmal anschaut, wird die Skala verwendet. Dieses Bild ist ein bisschen größer als alle hier drüben. Und es ist ein großartiges Layout für all diese Bilder. Und das ist freundlich aus Medizin Mauerwerk sehr aus. Aber es sieht toll aus hier drüben. Das ist also alles über diese Technik. Und ich hoffe, Sie haben diese Skalierung genossen. Und, ah, ein großer Schwerpunkt auf Ihrem Design in jedem Abschnitt oder in Ihrem gesamten Design. Das geht alles darum. Wenn Sie Fragen haben, die Sie mir stellen müssen, gehen wir zur nächsten Liste. 26. Bewegungen im Layoutdesign verwenden: in dieser Lektion werde ich eine weitere geheime Technik diskutieren, die ich mit Ihnen teilen werde, was sehr einfach ist. Und Sie können mit Bewegung viel Interesse an Ihrem Layout und an Ihrem Design schaffen. Also, wie Sie Ihre Bewegung machen müssen. Denken Sie nicht, dass Ihre Boxen oder was auch immer Ihre Container, die verschiedene Elemente auf Ihrer Seite fortsetzen , statisch sind. Sie können sie nach oben und unten bewegen. Sie können sie von links nach rechts verschieben. Sie können sie in einem diagonalen Dampf bewegen, so dass es viele Optionen oder Tricks gibt, die Sie machen können. Also Bewegung wird viel Interesse an Ihrem Design-Tag schaffen, und es wird sie von bewegen, ähm, Sie können langweilige statische Boxen zu etwas sagen, das in nur so dass ich mit Ihnen für einige von der Layout-Optionen, und dann werde ich mit Ihnen teilen, nur um drei Beispiele zu behandeln, weil ich nicht in der Lage, mehr Beispiele zu finden . Vielleicht sind sie, können Sie sagen, aber es ist in meinem, ähm in meiner Inspirationsmappe. Also denke ich, das wird Ihre Meinung darüber klären, Bewegung für Ihr Layout zu verwenden und wie Sie das tun werden, um nur in Ihrem Design zu erstellen. Also hast du mit diesen vier Kisten angefangen. Jetzt sieht es ziemlich langweilig für mich aus, und ich denke, das wird nicht für mich funktionieren. Stattdessen werden wir das tun. Jetzt können Sie sehen, dass dies das gleiche Design ist. Aber ich habe die Bewegung meiner Boxen hinzugefügt, anstatt sie sind statische Boxen. Jetzt bewegen sie sich. Wir haben also eine Bewegung wie Jane-Bewegung, die in verschiedene Richtungen auf- und abläuft, und es wird ein gewisses Interesse an deiner Ebene schaffen. Das ist also eine Idee. Eine andere könnte diese sein, so dass Sie sie in diagonaler Richtung bewegen können. Zehe. Denken Sie nur nicht, dass Sie sie nach oben und unten bewegen müssen, können von links nach rechts sein. Sie können in verschiedene Formen wie Diagonale und andere Schiffe gehen, wie ein Dreieck. kannst du auch tun. Hier ist eine weitere Darstellung aus der Bewegung. Sie können hier drüben sehen. Ich habe eine sehr große Box oder einen großen Inhalt Abschnitt, vielleicht ein Bild hier drüben auf der linken Seite. Und ich habe zwei Bilder, die sich überlappen und einige Steuern hier drüben auf der rechten Seite. Wir haben also eine Überschrift und die drei Zeilen mit vier Textzeilen, so dass es viele Variationen gibt, die Sie tun können. Also, das sind einige Tricks, die Ihre Bewegung in Ihrem entworfen, um etwas Interesse zu schaffen. Ich weiß, dass ich Ihnen zwei oder drei Beispiele zeigen werde. So werden wir besser in diesem Bewegungsmaterial in unserem Design. Nun, dies ist ein Design von Andrew Lo Materie off aus Lettland, und das ist sehr schlichtes, sehr einzigartiges Design. Und du siehst, was ich dir zeigen will. Hier ist die Bewegung. So können Sie hier drüben in den Bildern und dem Text sehen. Bewegung ist also, dass es tatsächlich den Effekt in jedem Abschnitt umgekehrt. Also haben wir hier Bild, als wir hier textural haben. Und dann haben wir ein Bild. Wir sind hier. Text auf dem rechten Bild auf der rechten Seite, Text auf der linken Seite, Bild auf der linken Seite, Text rechts. Das ist also eigentlich eine Kettenbewegung, aber so gemacht, wie Sie sehen können, dass wir hier sind. Das ist wie ein Seil Vermögen, wie hier drüben. Und es ist in der Richtung von oben nach unten. Den, den ich dir Waas in Richtung links gezeigt habe. So können Sie sehen, dass dies viel Interesse an Ihrem Design schaffen wird. Also, wenn dieser Designer einfach alle Bilder auf der rechten Seite und den ganzen Text auf der linken Seite gehalten hat, könnte es sehr langweilig aussehen. Sehr statisch. Daher müssen wir ein gewisses Interesse schaffen, indem wir Bewegung in unserem Layout verwenden. In ähnlicher Weise haben wir dieses Design. Es ist von mehreren Ehren Smoove alle. Ich glaube, es ist eine Designagentur. Aber ich mag ihr dieses Design sehr minimalistisch, wo wir sehr Skript sehr sauber erstellen und Sie können sehen oder hören in diesem Abschnitt, Sie können sehen, obwohl es sieht aus wie eine Blume lei out toe me. Aber trotzdem werden Sie sehen, wie die Symbole und der verschiedene Text unterschiedliche Bewegungen haben. Also hier haben wir. Ah, dieses Symbol oben und dieser Text unten und links. Also haben wir Dinge in diese Richtung vorangehen. Dann hier drüben, dieser Läufer, es ist diese Ah, Richtung ist hier drin. Also hier haben wir Text. Dann haben wir diese führende Linie und es führt zu diesem Symbol. Also haben wir durch diese diagonale Richtung gegangen, als wir dies haben, dann haben wir so etwas . Dann haben wir so etwas. Dann haben wir so etwas. Das ist also tatsächlich Bewegung. Sie können Symbole nur oben und in der Mitte und in der Mitte haben. Sie könnten den Text verwendet haben, aber anstatt diesen einfachen Weg zum Auslegen von Symbolen und diesem Text zu verwenden, dieser Designer einige Bewegungen in der Cloud verwendet. So haben sie einige diagonale Bewegungen in fast all diesen Symbolen und diesem Text. Also das ist Ah, große Verwendung off Bewegung in Ihrem Layout. In ähnlicher Weise, wenn Sie sich dieses Design ansehen, haben wir diese Symbole hier drüben, und das sind alle diagonalen Symbole. Das sind genau wie Bienenstöcke. Aber die Sache, die ich Ihnen hier zeigen möchte, ist, dass wir hier drüben Bewegung haben. Also haben wir diese Kettenbewegung im Gange. Also das ist ich auf der linken Seite und ich bin oben in der Mitte. Dann hier und hier drüben, hier drüben, hier drüben. So ist es nicht Ah, wenn der Benutzer kann. Dieser Designer kann das Layout in nur ah, neun oder 10 Boxen machen. Aber was sie taten, ist, dass sie Bewegung benutzt haben. So können Sie sehen. Es funktioniert wirklich gut mit sogar den sind Zahlen. Also haben wir 123456789 neun Boxen und sie sehen toll aus. Dieses Layout ist großartig. Also lasst uns hineinzoomen und sehen. Okay, hier haben wir diese Symbole. Dies ist also wieder eine große Verwendung off Bewegung in Ihrem Layout. Nun, in diesem Beispiel, das ich nicht weiß, wie der Designer ist. Wie auch immer, das ist ein tolles Design, und Sie können in diesem mittleren Abschnitt sehen oder hier haben wir Mutter Tochter Vorschlag und Sie können hier sehen, wie dieser Designer Bewegung hier über verwendet hat, um Interesse zu schaffen, so sie können diese Boxen aufgereiht haben. Aber was? Diese Designerin, sie hat es gesehen. Das ist es. Sie hat tatsächlich einen von ihnen ein wenig nach unten gezogen, um ein paar Interessen zu schaffen. Außerdem gibt es diese Temp hier drüben, was eine andere Technik ist, die ich dir gezeigt habe, bevor ich aus den Kisten zog. Also, dieser Stempel zieht aus diesem Abschnitt heraus, nur um hier etwas Interesse zu wecken. sind also zwei Techniken, die Sie kombinieren können, um ein aussehendes Layout zu erstellen, und ich hoffe, dass dies viele Ihrer Probleme lösen wird. Wenn Sie Fragen haben, die Sie mir stellen müssen, fahren wir mit der nächsten Lektion fort. 27. Left für die Left: in dieser Lektion werde ich eine sehr einfache Technik und sehr elegante Technik diskutieren, die Sie in Ihrer Ebene mischen und verwenden können . Entwickelt, um viele interessante Layouts und Designs zu erstellen. Viele Designer, die sie nicht wissen, dass sie Dinge fast in der Mitte verwenden oder bewegen können, plus mit links ausgerichtet zusammen mit ihm. So haben Sie Schlepptau, richten Sie alles auf der linken Seite. Ihr seid alle entworfenen Elemente und bewegt den ganzen Block fast in der Mitte. Dies ist also eine sehr einfache Technik, um Interesse zu schaffen. Ich zeige Ihnen diese Layouts, und dann sehen wir einige Beispiele. Jetzt können Sie oben sehen, habe ich weißen Block , der ein sehr großer Text sein wird. Also jede Website, die Sie entwerfen, haben wir, wie, zwei oder drei Zeilen, sehr großen, fett Text, der zeigen wird, was wir tun. Unser Service und dieser weiße Block können Sie sehen oder hören, dass alles sein wird Ihr Text wird auf der linken Seite ausgerichtet, so dass alle Textzeilen von hier aus beginnen würden. Und was wir tun, ist, dass Sie sehen können, dass es wirklich seltsam aussieht, aber es sieht wirklich toll aus, wenn Sie versuchen, dies in Ihrem Layout zu tun, ich habe wie zwei Spalten von hier und drei Spalten von hier verlassen. Das wird also viel funktionieren. So ist es fast in der Mitte und es hat eine Linie hinterlassen. Versuchen Sie also, Dinge zu bewegen, während das linke ausrichten Element hier sind in Ihren Design-Elementen und es wird erstellen aussehen. Mal sehen, noch ein Arrangement. Jetzt ist hier noch eine. So können Sie hier drüben sehen. Hier, wir haben den Weg. Dann haben wir Unterüberschrift Zeile oder hören etwas dext. Dann haben wir vier verschiedene Funktionen oder so etwas. Jede Art von Funktionen oder vielleicht einige Dienste. Und Sie können sehen, wir haben ein Symbol, eine Überschrift eine Zeile ein Symbol, eine Überschrift eine Zeile und Sie können sehen, dass sie fast in der Mitte sind. Und dort ist ihr ganzer Container tatsächlich in der Mitte. Wenn wir also diesen ganzen Block kriegen, diesen ganzen Block kriegen, ist er in der Mitte. Aber wenn wir jeden Block einzeln betrachten, sind sie auf der linken Seite ausgerichtet. Sie können sehen, das ist, was ich meine, wenn Sie so etwas versuchen, haben Sie Schlepptau. Richten Sie Ihre inneren Elemente auf der linken Seite aus und der ganze Block blockieren diese Elemente in der Mitte. Dies wird also eine Menge von Ihrer Entwürfe anvertrauen zu schaffen und wir haben Knopf am unteren Rand. Wir haben Überschrift in Textdaten in der Mitte und dann diese vier Funktionen, sie sind alle links ausgerichtet. Aber sie sind in der Mitte, der ganze Block, der ganze Container für diese Funktionen oder für diese Dienste, sie sind in der Mitte. Dies ist also tatsächlich die Kombination der zentralen Linie, plus links ausrichten. Jetzt sehen wir einige Beispiele aus meiner Arbeit und auch von anderen Künstlern oder Designern. Und wir werden sehen, wie. Eigentlich funktioniert dies im realen Leben oder Website-Designs oder mobilen App-Designs. Nun, das ist ein Beispiel von dieser Zielseite, die ich entworfen habe, und Sie können hier sehen. Wenn Sie sich diesen Abschnitt ansehen, hören Sie sich einen Rial an, Steuererleichterungen Zeugnisse, und ich werde meine Noten einschalten und Sie können diese mittleren Boxen hier sehen, sie sind nicht irgendeine Gier ausgerichtet. Stattdessen sind sie in der Mitte dieses ganzen Containers in der Mitte und im Text und man kann sehen oder hören. Hören. Wir haben David auf und diesen Text dieses Zeugnis gehört, es ist eine Linie auf der linken Seite. Also, wenn wir hier einen Block zeichnen, können Sie sehen, dass er so ausgerichtet ist. Ich änderte die Farbe, damit Sie die Idee bekommen können. Also ist alles in diesem Container nach links ausgerichtet. Aber der ganze Container oder Block ist in der Mitte. Das ist es, was ich eigentlich gemeint habe. Und lassen Sie mich Ihnen noch einen zeigen. Okay, hier haben wir wieder dasselbe Arrangement. Alles ist auf der linken Seite. Richten Sie aus. Ich habe mich so beschworen. Und dieser ganze Block ist es in der Mitte von diesem thes 12 Spalten. Das ist also ein weiteres Beispiel, als wir es haben. Lassen Sie mich Ihnen das hier zeigen. Also lassen Sie uns diese verstecken und Sie können sehen oder hören. Dies ist steuerliche Dienstleistungen verfügbar und wieder das gleiche Konzept. Das ist in der Mitte. Das ist in der Mitte. Dann wieder, das ist dieser ganze Block in der Mitte und die zwei Blöcke. Sie sind übrig. Richten Sie ganze Textsymbole dort aus, linke Zeile. Ich verwende keine mittlere Ausrichtung damit. Also haben wir Mittellinie plus links ausgerichtete Elemente. Das wird also eine große funktionieren. In ähnlicher Weise haben wir diesen. Ihre nächste Aufgabe wird also sein, dass Sie so etwas wie dieses ein, vier oder fünf Features erstellen müssen. Und Sie müssen so etwas verwenden, was mittlere Ausrichtung und zentrale Lineman plus linke Ausrichtung sein wird. So können Sie den oberen Zeh hier sehen, dass diese Steuer und diese Überschrift es zentrale Linie ist. Und wenn wir auf diesem nächsten Abschnitt gehen, wo wir verschiedene Strafen und Steuern haben verschiedene Angebote getan und wir haben alles auf der linken Seite. Also alle diese Symbole, alle Schritte, die sie links Linie, aber der ganze Block am unteren. Wenn wir also diesen Block auswählen, ist er in der Mitte. Das ist also eine andere Technik, die ich oft gesehen habe, aber ich denke, die meisten Designer bemerken sie diese nicht. Also hier haben wir das und ich hoffe, Sie werden es besser verstehen. Sehen wir uns ein paar weitere Beispiele an. Hier ist ein anderes Design von wem ist das? Okay, also kann ich keinen Namen von diesem Christian Randall bekommen. Also, wenn Sie hier auf diesem Abschnitt schauen. Es ist ein Design. Und wenn man hier rüber schaut, sieht man diesen Text und die Stapel hier drüben in Rot. Dies ist eigentlich mittlere Ausrichtung und linke Linie. Also dies, Designer mit Mittellinie und linke Linie, können Sie hier sehen Wir haben zwei Spalten, die hier übrig sind. Wieder hier. Wir haben zwei Säulen. Du kannst sehen. Dies sind fast Gitterlinien auf, die diesen für diesen Entwurf folgen. Und er hat hier zwei Säulen hinterlassen. Zwei Säulen hier drüben. So ist es fast in der Mitte, aber er hat links ausgerichtet mit ihm verwendet. So können Sie sehen, wie es aussieht. Wir haben einen Block hier drüben, einen Block hier drüben. Ein paar Dunkelheit hier drüben. Und das sieht wirklich toll aus. Das ist also wieder einmal. Wenn wir diesen Abschnitt über Kopf betrachten, lassen Sie uns vergrößern. Dies ist die gleiche Technik. Es bedeutet nicht immer, dass Sie Ihren Text oder Ihren Block fast in der Mitte Ihrer Seite ausrichten müssen. Sie können das tun, indem Sie es auf der linken Seite bewegen, so wieder ist es linke Linie. Viel Platz auf der linken Seite und es ist links Linie, und es sieht toll aus. Sehen wir uns ein paar weitere Beispiele an. Okay, hier haben wir noch ein Beispiel. Und wenn Sie sich diesen Abschnitt ansehen, wo wir die Werkzeuge haben, brauchen Sie Okay, also haben wir alles. Eine Linie auf der linken Seite hier drüben. Also haben wir in der Mitte den Weg. Dann haben wir einen kleinen Slogan in der Mitte in der Mitte. Und diese alle diese Funktionen 123456789 Funktionen. Sie sind alle eine Linie auf der linken Seite. Und noch eine interessante Sache, die ich gesehen habe oder hier diese verschiedenen Funktionen sind diese verschiedenen Dienste. Sie sind in drei verschiedenen Abschnitten unterteilt. Das ist Abschnitt eins, Zehe drei. Und was dieser Designer tat, ist eigentlich, äh, mal sehen, wer mehrere Besitzer ist. Okay, wir haben sowieso Design-Agentur oder Kopf, so dass Sie sehen können, dass dieser Text diese Überschrift auf der linken Seite tatsächlich rechts ausgerichtet ist. Es berührt also diese Linie. Dies näht diese Linie. Also ist es wirklich, ich denke, kreative Verwendung off Alignment in Ihrem Layout. Dies sind also ein paar Beispiele, die ich wirklich mit Ihnen teilen wollte. Lassen Sie uns ein weiteres Beispiel sehen, das eine mobile App verwendet. Also, wenn Sie eine mobile App entwerfen, denke ich, dass Sie keinen Teil bemerkt haben. Die meisten von ihnen verwenden sie linke Linie mit mittleren ausrichten Behälter. So haben wir Sie sehen können wie diese weiße Karte hier drüben und all das Textil hier ist es. Und der Knopf Oh, hier ist es in diese Richtung. Also haben wir alles ausgerichtet und diesen ganzen Behälter, der all diese Elemente enthält , ist er in der Mitte. So haben wir Wir haben den gleichen Rand, die rechte und auf der linken Seite. So können Sie ähnlich sehen, wenn Sie auf diesen Bildschirm schauen, dies ist Home-Bildschirm. Und das ist ein einfacher Online-Hauskredit. Es ist alles die Linie verlassen. Alles ist links Futter, wenn Sie sehen können Ja, Ich sehe geregelt. Es ist auch eine Linie links. Aber Sie können in der Mitte sehen wir eine Box oder Behälter, die in der Mitte ist. Also, das sind die Dinge, die Sie gehen Zehe verwenden in Ihrem können Sie in Ihren Layouts sagen zu erstellen , wirklich Lee erstellen oder so werde ich mit Ihnen teilen eine weitere, Was ist das, was ich denke, ich zeigte Ihnen in früheren Lektionen. Bordüre. Und Sie können sehen, ich liebe wirklich, wie sie sehr schlecht, sehr organisiert, freundlich einfaches Design verwendet haben sehr organisiert, . Es ist nichts Komplexes, nur Produktteams. Teil ist eine einfache visuelle Möglichkeit, schiere Parks zu definieren, die zu einer stärker ausgerichteten Organisation führen . So können Sie einen sehr schönen Button sehen, einen einfachen Link. Aber was sie verwenden, hat tatsächlich Linie mit fast einer Mittellinie verlassen. So ist es nicht ein rein in der Mitte, aber es ist immer noch Handel auf der linken Seite, aber zusammen mit ihrer Verwendung linken Ausrichtung. Das sieht also wirklich, wirklich schön aus, als sie dieses Bild haben, das fast den ganzen Raum verbringt. Und dann haben sie wieder diese Technik verwendet Mittlere Mitte ausgerichtet diesen ganzen Behälter und alles ist eine Linie auf der linken Seite. Also Steuern schreibe ich auf der linken Seite. Es sieht wirklich toll und einfach aus. Mal sehen, ob wir noch ein Beispiel finden können. Okay, hier haben wir es wieder. Mittellinie und der Text ist eine Zeile links. Schauen Sie genau hin. Ich denke, du solltest das jetzt bis jetzt tun können , und, ähm, ich glaube, das war's. Wenn ich versucht habe, ein weiteres Beispiel zu finden, mal sehen, ob ich Ah habe, einige weitere Beispiele aus meiner vorherigen Arbeit. Okay, hier habe ich also meine eigene Design-Website, die ich gerade neu entwerfe. Ich bin mir nicht sicher, welche Version es ist. Letztes oder was auch immer. Also lassen Sie mich sehen, ob ich Ja benutzt habe. Ok. So können Sie hier drüben sehen. Das ist eigentlich, lasst uns das hier verstecken. Lassen Sie uns die verstecken. In diesem Abschnitt, abgesehen von Nutzerbewertungen oder meinen Studentenrezensionen, können Sie sehen, was Schüler sagen. Das geht also eigentlich auf britische Richtung, was in der Mitte liegt. Und diese all diese Zeugnisse. Sie sind alle eine Linie auf der linken Seite, Bilder auf der linken Seite. Dex ist eine Linie auf der linken Seite, aber Sie können sehen, es sieht wirklich gut aus. Ich will nicht, wissen Sie, dass nur eine Mitte ein Element ausrichten, und das wird dieses Design sehr langweilig machen. Also, wenn ich so eine in der Mitte hätte, könnte es ein bisschen gießen. Also habe ich die linke Ausrichtung mit der mittleren Ausrichtung verwendet. Ähm, das. Sehen Sie, ob ich es woanders benutzt habe. Okay, hier haben wir es wieder. Hier. Sie können diese Adresse und Kontakt sehen. Dieser Block ist fast in der Mitte. Ich glaube nicht, dass es fast in der Mitte ist, aber ein bisschen rechts. Aber ich benutze die linke Ausrichtung. Das ist also eine großartige Technik. Sie können das in Ihren Entwürfen verwenden und Sie können Ah erstellen, wirklich interessante Art off Funktionen oder Zeugnis Abschnitte oder Dienstleistungen Abschnitte, Dinge wie das. Ähnlich habe ich hier fast benutzt. Dies ist keine Linie in der Mitte, aber ich benutze diesen ganzen Block, der fast in der Mitte dieser sechs Spalten hier drüben ist. Versuchen wir, Zehe so etwas zu haben. Also haben wir unser Gitter an und Sie können sehen, dass es fast in der Mitte dieser ganzen 80 Stunde hier ist, okay? Und es verwendet die linke Linie. Also nicht alles, was Sie haben, um es in der Mitte von der ganzen Seite oder Ihrem gesamten Design auszurichten . Aber Sie können auch so etwas verwenden. Ich habe hier Übliches. So sieht das so aus, lass mich Härte. Das sieht also wirklich toll aus, wenn wir es haben. Wenn wir versuchen, etwas zu verwenden und so etwas zu machen, mal sehen, ob ich woanders benutzt habe. Okay, hier haben wir es wieder. Das ist schwer. Diese, so dass Sie vielleicht eine Menge von meiner Tastatur Geräusche hören sowieso, so dass Sie sehen können, diese Überschrift ist auf der linken Seite. Dann wieder, dieser Abschnitt dieser Ihr Design Kurse Abschnitt ist eigentlich in der Mitte, und es ist nicht wirklich ganz in der Mitte. Es hat einige. Sie können sehen, dass alles auf der linken Seite ausgerichtet ist. So haben wir Mittenausrichtung oder Mittenausrichtung mit kombiniert mit linker Ausrichtung. Das ist also wieder einmal. Wir haben Haare, zwei Kurse, und wir haben hier zwei Kurse. Das wird also das neue Design für mein, ähm, Website-Land sein ähm, . Du aufregend. Ich werde auch mein Logo-Redesign einem anderen Designer geben, und ich hoffe, dass Zehe, äh, zeigen Sie, dass ich bald weiß, dass ich keine Zeit habe, äh, zeigen Sie, dass ich bald weiß, dass ich keine Zeit habe, um das selbst zu befassen. Also werde ich einstellen, ich habe bereits ein weiteres Viertel eingestellt. Also, ähm, ich denke, dass Sie ähnlich in diesem mobilen Handy sehen können Lassen Sie mich Ihnen dieses zeigen. Also haben wir diese mobile Schnittstelle und wenn ich hier runtergehe, können Sie diesen Abschnitt hier sehen, er ist in der Mitte, und es ist eine Linie auf der linken Seite. Das sieht also wirklich gut aus. Also, uh, so können Sie diese mittlere Ausrichtung mit linker Ausrichtung verwenden und fantastisch aussehende Designs erstellen . Ich hoffe, Sie haben diese Lektion genossen. Wenn Sie Fragen haben, können Sie mich immer fragen. Fahren wir mit der nächsten Lektion fort. 28. Dank allen: vielen Dank für die Teilnahme an dieser Klasse. Wenn Sie Fragen zum Design oder zu dieser Klasse haben, können Sie mich jederzeit im Community-Bereich fragen. auch Vergessen Sieauch nicht die Zehe richtig. Einige überprüfen ein paar nette Worte. Also für mich, also kann ich, wissen Sie, etwas Inspiration bekommen, um mehr Klassen wie diese zu erstellen. Und vergessen Sie auch nicht, wenn Sie meine anderen Kurse besuchen, weil sie sind. Ich habe viele Kurse zu UX Design, User Interface Design und Freelancing und Visual Design. Also bis dahin, wir sehen uns bald in der nächsten Klasse.