Raster erstellen (UI Bootcamp Woche 6)

1. Einführung: Diese Woche werden wir ein Netzsystem aufbauen. Zuerst werden wir uns historische Gitter ansehen , auf alte Bücher zurückblicken usw. und dann prüfen, wie einige dieser Regeln Websites gelten könnten. Vor allem, wie das vertikale Raster alles diktieren wird, insbesondere bei ansprechendem Design. Ohne uns Gedanken über die Codierung zu machen, werden wir ein wenig darüber sprechen, wie das Box-Modell in CSS funktioniert und wie dies für CSS Flexbox und CSS Grid gilt. Nochmals, keine Sorge, wir werden uns keinen Code ansehen. Wir werden dieses Wissen nutzen, um ein grundlegendes, gut aussehendes Raster für einen einfachen Artikel auf einer Webseite zu erstellen ein grundlegendes, gut aussehendes Raster für . Und schließlich werden wir ein etwas komplizierteres Raster erstellen , das für eine moderne komponentenbasierte UI-Webanwendung verwendet werden kann . Wir werden uns ansehen, wie das Raster für die einzelnen Komponenten funktionieren würde , die dieser Site hinzugefügt würden. Verwendung von Grid-Systemen für das UI-Design hat sich in den letzten Jahren stark verändert , da wir individuelle Komponenten für unsere Benutzeroberflächen erstellen . Es ist also wirklich nützlich zu wissen, wie man diesen Gitterstil aufbaut. Also lasst uns anfangen. 2. Geometrie: In vielen Ländern zogen die Menschen zu Beginn des 20. Jahrhunderts aufgrund der Industrialisierung in Städte, es gab mehr Arbeitsplätze und Städte und sie gaben die alten aristokratischen oder feudalen Systeme , die existierte in vielen Ländern. Daneben haben wir die alten klassischen Kunst- und Designformen aufgegeben und uns mehr mit Dingen wie Kubismus, Konstruktivismus und Futurismus befasst. Wir begannen, Kunstformen und Designs zu kreieren , die etwas geometrischer und etwas geordneter waren geometrischer und etwas als die vorherigen Generationen. Natürlich verwenden sie in Persien, Arabien und Zentralasien bereits seit Tausenden von Jahren geometrische Designs . Manchmal werden diese Stile darauf zurückgeführt , dass einige islamische Sets das Zeichnen von Menschen oder Tieren nicht zulassen das Zeichnen von Menschen oder Tieren , weil sie nichts vergöttern wollen. Aber tatsächlich sind viele davon keine entworfenen Formen vor dem Islam und sind viel wahrscheinlicher relevant weil dies die Bereiche sind, in denen Menschen Mathematik, Wissenschaft und Technik verehrten lange vor dem Rest der Welt haben wir bereits ein wenig über Geometrie gesprochen, als wir über Typografie sprachen, über die wir Anfang des 20. Jahrhunderts gesprochen haben, viele geometrische Schriften wurden beliebter. Und die Leute benutzen die Entschuldigung, dass sie leichter zu lesen waren, als wäre es rationaler oder logischer , diese Schriften zu haben. Und tatsächlich wissen wir jetzt , dass sie fast am schwersten zu lesen sind , weil die Formen so ähnlich aussehen. Ebenso, wenn wir dem Rest unseres Designs geometrische Raster hinzufügen , geht es tatsächlich ein bisschen mehr um aktuelle Trends, wie brauchbar sie sind. Wir möchten sagen, dass es sauberer aussieht und daher einfacher zu bedienen ist. Aber wirklich liegt es nur daran, dass die Leute erwarten , dass Designs derzeit aussehen. Wenn wir uns diese Kunsttrends wie Kubismus, Futurismus aus dem frühen 20. Jahrhundert ansehen, erkennen wir, dass diejenigen, die eigentlich ziemlich auffällig sind , und wir betrachten gerne ein Element des Chaos in sie. Als wir versuchten unsere Kompositionen im ersten Modul zu erstellen, war es ein großes Mitnehmen, dass war es ein großes Mitnehmen, dass wir ein Gefühl der Ordnung schaffen wollten, aber wir müssen es mit ein bisschen Chaos durcheinander bringen, wir können schaffen Sie etwas vernünftig optisch Ansprechendes mit nichts als geometrischen Formen. Und wir werden etwas später mehr darüber sprechen, Bilder für unsere Website zu erstellen . Wenn wir dies jedoch für einen Teil unserer Website verwenden würden, möchten wir sicherstellen, dass dieses Raster auf dem Raster basiert das wir bereits für unsere Typografie erstellt haben. Und beachten Sie, dass wir durch den Akt der Typografie auf dieser Seite Typografie auf dieser Seite bereits versehentlich einen horizontalen Rhythmus mit all diesen vertikalen Linien im Text erstellt einen horizontalen Rhythmus mit haben. Wenn dieses Design eine breitere Schrift oder sogar eine Monospace-Schrift verwendet , wird es dem horizontalen Rhythmus der Seite ein ganz anderes Gefühl geben . Und an dem Raster, das wir schaffen sollte diesem Gefühl folgen. Wenn unsere Seite nur einen Textblock hätte, hätte sie natürlich bereits ein Raster mit den horizontalen und vertikalen Linien, die aus dem Text erstellt wurden. Und der Rest unserer Seite sollte diesem Raster folgen. Vielleicht sehen diese geometrischen Formen auf der linken Seite ganz anders aus. Wenn wir eine breitere Schrift hätten, würde es vielleicht besser aussehen mit breiteren Linien zum Raster. Ich bin einigermaßen zufrieden mit diesem Design ich hier erstellt habe, nur mit einem sehr einfachen Raster, einigen geometrischen Formen, die auf diesen typografischen Entscheidungen basieren. Aber ähnlich wie jene revolutionären Künstler, die sich Kubismus und Futurismus ausgedacht haben, hatten die besten Kunstwerke tatsächlich ein Element des Chaos und ähnlich wie die Kompositionen, die Sie geschaffen haben im ersten Modul hatte ein Element des Chaos, das sie interessanter machte. Unser Design ist nicht wirklich ein vollständiger Riss. Dieses Design sieht ein bisschen zu einheitlich aus. Lassen Sie mich versuchen, einige organische Formen hinzuzufügen. Sie können sehen, dass ich in einem echten Foto hinzugefügt habe, ich habe einige Zeilen eingefügt, die nicht ganz auf das Raster ausgerichtet sind. Und ganz unten links gibt es eine Form, die mit Ausnahme des Fotos fast wie eine seltsame Blumentypform mit Ausnahme des Fotos Diese Formen passen nicht in das ursprüngliche Gitter, das der Rest dieser geometrischen Formen tut es. Sie durchbrechen die Linien dieses Gitters, geben ihm aber ein reales organisches Gefühl und es erregt unsere Aufmerksamkeit ein bisschen besser. Jetzt fühlt sich das eher wie eine vollständige Komposition an. Wenn Sie sich Ihre typografischen Systeme ansehen , die Sie in den früheren Modulen erstellt werden Sie feststellen, dass zwei verschiedene typografische Systeme haben, werden Sie feststellen, dass zwei verschiedene typografische Systeme nur aufgrund von die horizontalen und vertikalen Rhythmen die durch die natürlichen Gitter aus verschiedenen Schriften erzeugt werden. Sie haben auch Entscheidungen über Berline-Höhen oder Lading und die Verfolgung oder den Buchstabenabstand getroffen. Dies sollte hauptsächlich dazu dienen, das Lesen einfach und bequem zu machen. Aber beachte, wie wenn ich dieses typografische System nehme und die Tracking- und Linienhöhen massiv ändere . Es ändert das Gefühl der Seite komplett und es wird daher alle Raster ändern , die ich um sie herum erstellt habe. Wenn ich eine ähnliche Übung gemacht habe wie die, die ich zuvor gemacht habe, wo ich einige geometrische Formen hinzugefügt habe. Ich würde einige hinzufügen, die vielleicht viel größer und dünner sind , viel dünner. Denken Sie daran, dass wir im ersten Modul, als wir all diese verrückten Kompositionen erstellt haben , versuchen Sie es jetzt mit einem Ihrer typografischen Systeme. Fügen Sie einfach ein paar zufällige verrückte Formen und bemerken Sie, wie sie sich anfühlen oder ganz anders aussehen werden, abhängig dem natürlichen Raster, das bereits von Ihrer Schrift erstellt wurde. Diese habe ich hier auf dem Bildschirm erstellt , es ist völlig unlesbar. Aber wenn du etwas mit dieser hohen Zeilenhöhe hattest, wird es vielleicht schlecht aussehen. Mit einigen hohen Formen und einigen ziemlich dünnen Linien, war es in den letzten 100 Jahren sehr in Mode , sehr geometrische Kunst - und Designarbeiten zu haben . Durch den Rest dieses Moduls werden wir darüber sprechen, ein Raster zu erstellen in das alle Elemente in Ihrem Design sauber passen. Sie haben bereits ein natürliches Raster aus dem typografischen System , das Sie erstellt haben. Also werden wir diesem natürlichen Raster folgen , wenn wir das Raster für unsere Website erstellen. Wir wollen nie, dass alles auf unserer Webseite perfekt in dieses Raster passt und perfekt geometrisch ist, wir werden immer ein paar organische Formen und Dinge hinzufügen wollen , die einfach nicht zum Raster passen , um es optisch interessanter zu machen. 3. Rasterart: Bevor wir uns irgendwelche Raster auf Webseiten oder Webanwendungen ansehen, schauen Webseiten oder Webanwendungen ansehen, wir uns zunächst die ersten Raster aller Zeiten an und beginnen, sie von dort aus aufzubauen. Die allerersten Bücher aller Zeiten hatten eine Art Raster und es wird als Manuskriptgriff bezeichnet. Es sieht so aus. Alle Buchstaben auf der Seite passen bequem in diese schöne, ordentliche kleine Schachtel. Jetzt werden Sie feststellen, dass es viel Dekoration um ein Haus gibt, viele organische Formen. Es ist sehr klassisch. Aber es gibt immer noch diesen ausgewiesenen Bereich in dem sich die Buchstaben befinden, das eigentliche Raster für diese Seite, es sieht einfach so aus, wie diese roten Linien hier. Jetzt, am Anfang, als wir die Box umrahmten, als wir etwas über unsere Kompositionen erfuhren, erfuhren wir, dass es eigentlich nur mit einer einfachen Form wie einer gerahmten Schachtel alle möglichen Variationen gibt. Sie können damit immer noch etwas Spaß haben, und Sie werden feststellen, dass dieses Raster unten und rechts als großer, viel größerer Rand außerhalb zentriert ist . Und es ist immer noch kreativ, noch bevor wir all diese organischen Formen und alle Buchstaben hinzufügen, nur mit diesem einfachen Manuskriptraster könnten wir es zentral gestalten. Wir könnten unten eine ganze Last mehr Marge haben, oder wir können einen viel dramatischeren Spielraum auf einer der Seiten haben. Danach kam beispielsweise das Spaltenraster, in dem wir möglicherweise mehr als ein Textfeld auf der Seite haben. Wenn wir weiterhin nur in Bezug auf die Zusammensetzung darüber nachdenken würden , gibt uns dies eine neue Messung, um über den Raum zwischen diesen beiden Boxen nachzudenken , wir nennen dies die Rinne. Dies muss offensichtlich groß genug sein , um zwischen diesen beiden Textfeldern zu unterscheiden. Und klein genug , dass wir am Ende nicht zu viel Seitenraum verbrauchen. Aber es wird sich auch darauf auswirken, wie sich die Seite anfühlt. Diese Seite hat insbesondere ein zusätzliches Feld oben und ein weiteres Feld unten. Dies sind natürlich Kopf- und Fußzeilen. Aber jetzt werden Sie feststellen, dass es tatsächlich auch eine Gosse zwischen diesen gibt. Wir wollen wahrscheinlich diese Art von Uniform mit dem Raum behalten , wir bereits zwischen den anderen Boxen haben, oder zumindest passt sie in ein komfortables Verhältnis. Hier ist eine modernere Seite. Diese beiden Spalten haben exakt die gleiche Breite. Es ist viel offensichtlicher, dass du das links und dann das Monomer gelesen hast , richtig? Es ist auf jeden Fall klarer. Es sieht moderner aus. Aber halt eine Sekunde fest. Es gibt tatsächlich dieses extra kleine bisschen Text auf der linken Seite. Also haben wir hier tatsächlich eine dritte Spalte , die eine völlig andere Breite hat. Und das lässt es etwas interessanter aussehen. Erinnern Sie sich an unsere Kompositionen, als wir darüber sprachen , Dinge nachvollziehbar zu machen Diese schmalere Kolumne sagt uns auch , dass es nicht dasselbe ist. Wir können sofort feststellen, dass diese andere Kolumne einem etwas anderen Zweck dient. Da wir wollen, dass sich unsere Säulen und Dachrinnen immer so anfühlen, als würden sie zusammengehören. Es mag seltsam aussehen, eine andere Breite zu haben, aber tatsächlich gibt es eine andere Möglichkeit dass es sich nicht um drei Spalten handelt, es könnte tatsächlich fünf sein, wobei einige der Elemente mehr als eine umfassen -Säule. Wenn wir unser zugrunde liegendes Raster erstellen, sagen wir nicht, dass alles darauf eine Spalte breit sein wird. Nehmen wir an, dieses Raster wurde für ein Magazin verwendet. Jetzt kann in anderen Teilen des Magazins dasselbe Raster verwendet werden, aber es kann verschiedene Bereiche die sich über verschiedene Spalten erstrecken. Wir können sogar Elemente verwenden, die sich über alle Spalten oder keine der Spalten erstrecken . Wir könnten einen Bereich haben , der gerade offen geblieben ist. Und nur um Sie auf etwas andere Weise über Raster nachdenken zu lassen , Es ist auch möglich, dass dies fünf Spalten sind, aber sie haben tatsächlich nicht die gleiche Breite, aber nicht so, wie wir ursprünglich dachten. Dies würde für genau diese Seite keinen Unterschied machen, aber es würde einige interessante Unterschiede zu anderen Seiten desselben Magazins machen. Und deswegen können wir einige etwas interessantere kreative Layouts haben. Und die nächste Art von Raster, über die ich sprechen möchte, ist ein modulares Raster. Das ist eher wie ein Tisch. Es hat sowohl Zeilen als auch Spalten aus dem, worüber wir bereits gesprochen haben. Sie können wahrscheinlich bereits feststellen, dass sich dies für Websites und Webanwendungen besser eignet, da es sich um etwas handelt , das Sie für viele, viele Seiten nach unten scrollen können. Es ist viel länger als breit. Dinge plötzlich vertikal aufzuteilen viel sinnvoller, Dinge plötzlich vertikal aufzuteilen. Eine Webseite kann verschiedene Abschnitte haben , wenn Sie auf der Seite nach unten scrollen. Und indem wir ein modulares Raster haben, stellen wir sicher, dass diese Höhe eine gewisse Gleichmäßigkeit und eine Art vertikaler Rhythmus aufweisen. Wenn du die Seite runterkommst. Möglicherweise haben Sie im ursprünglichen Seitenlayout bemerkt, dieses Bild und die Texte unten links auf der Seite in diesem modularen Raster nicht trennen. In diesem Abschnitt befindet sich ein eigenes Raster. Und das ist total in Ordnung. Wir betten oft ein Raster in ein anderes ein. Wie wir im nächsten Video sehen werden, haben wir, sobald wir mit der Arbeit an Websites beginnen, sehr selten nur ein Raster für alles. In der Tat, wenn ich Ihnen dieses letzte Beispiel eines etwas moderner aussehenden Magazins zeige dieses letzte Beispiel eines , sieht es vielleicht sogar aus wie eine Zeitschrift, die Sie heute noch aufnehmen könnten, Sie werden ein Bild sehen, das erstreckt sich über die gesamte Breite, einige Überschriften, die zentral ausgerichtet sind und links und rechts dasselbe Modul verwenden, diese Textspalten und dann einige Module mit einigen Fußnoten unten. Diese Seiten versuchen eindeutig, viele verschiedene Arten von Informationen darin einzupassen . Und es gibt viele verschiedene Arten von Modulen auf der Seite. Aber es gibt eine gewisse Einheitlichkeit, nicht nur von Seite zur nächsten, sondern auch in einigen Eingeweiden sind Breiten und solche Dinge, die ein Gefühl der Einheitlichkeit vermitteln , wenn Sie die Seite herunterkommen immer noch. Ich weiß, dass die Beispiele in diesem Video alles mit Printdesign zu tun haben. Und offensichtlich sehen bis zu diesem letzten alle ziemlich altmodisch aus. Aber hoffentlich bereitet uns das Setup für das nächste Video vor. Wenn wir eine Webanwendung oder eine Webseite entwerfen, verwenden wir im Allgemeinen eine Form eines modularen Rasters, in dem es Zeilen und Spalten, ein vertikales und ein horizontales Raster enthält . Jedes Element auf der Seite kann mehrere Spalten oder Zeilen überqueren. Sie geben ihm danach einfach einen einheitlicheren Look. Und normalerweise können wir, insbesondere beim Website-Design, ein Raster in ein anderes einbetten. 4. Bedeutung von Raster: Hier haben wir ein schönes schlichtes Design für vielleicht eine Homepage oder ein Heldenbanner auf einer Website. Jetzt habe ich diese Elemente nicht einfach irgendwo hingebracht. Ich habe dafür gesorgt, dass sie sich irgendwie ein wenig aneinander stellen. Wenn ich alles ein wenig aus diesem zugrunde liegenden Raster herausziehen würde , das ich Ihnen gerade gezeigt habe, werden Sie feststellen, dass es sofort viel schlimmer aussieht. Es sieht sofort viel weniger professionell aus. Du vertraust ihm weniger, du fühlst dich ein bisschen ängstlich, wenn du es nur ansiehst. Dennoch sind es die gleichen Farben, die gleichen Schriften, alles ist das gleiche Verhältnis, die gleiche Abbildung, es ist der gleiche Boden. Sie richten sich einfach nicht aufeinander aus. Meiner persönlichen Meinung nach das absolut beste und wichtigste, was ein Designer tun kann um seine Designs sofort zu verbessern. Lassen Sie sie professioneller und vertrauenswürdiger aussehen , müssen Sie nur sicherstellen, dass sie diese Dinge in Einklang bringen. Wenn wir uns zuerst die Topographie ansehen , weil wir bereits Experten sind, haben wir bereits ein vertikales Raster für unsere Schriften erstellt. Das Zeug sieht hier schon gut aus weil es gut in dieses vertikale Raster passt. Jetzt wissen wir, dass das meiste Zeug auf unserer Webseite Topographie sein wird, und dies basiert bereits auf diesem einen vertikalen Raster. Wir sollten also das vertikale Raster aus unserer Typografie verwenden , um alles andere zu diktieren. Wenn wir dieses Raster jetzt wieder hinzufügen und wir möchten, dass dieser Header eine Hintergrundfarbe hat. Wir möchten sicherstellen, dass dieser Bereich an demselben vertikalen Raster ausgerichtet ist. Und so habe ich diese Seite gerade in drei vertikale Abschnitte mit etwas unterschiedlich farbigen Hintergründen aufgeteilt drei vertikale Abschnitte mit . Und diese drei Abschnitte richten sich an diesem anfänglichen vertikalen Raster aus. Jetzt werde ich diese Seite einfach mit einigen anderen kleinen Elementen füllen , die ich gefunden habe , und füge sie in dieses Raster ein, und dann schauen wir uns an , wo dieses Raster unserer Meinung nach sein könnte. Dieser obere Abschnitt hier oben sieht aus , als gäbe es vielleicht zwei Spalten, eine mit dem Text auf der linken Seite und eine mit diesem Bild auf der rechten Seite. Aber wenn ich dann nach unten scrolle und du diesen Abschnitt siehst, könnte man sagen, nun, tatsächlich ist dies ein dreispaltiges Raster, weil du dir diesen Bereich ansiehst. Vielleicht hat er für diese ganze Seite ein dreispaltiges Raster verwendet . Jetzt sage ich natürlich, dass das Offensichtliche speziell etwas wollte, wo wir diesen oberen und unteren Abschnitt verwenden könnten . Wir könnten dieses Sechs-Säulenraster haben. Und diese Elemente oben könnten nur über drei der Spalten erstrecken. Nun, eigentlich, ursprünglich mit dem Webdesign, als ich anfing, hätte jeder nur diese Art von 12-Säulenraster, das wir auf alles setzen und alle Elemente ausgerichtet machen würden irgendwie zu diesen 12 Spalten. Und tatsächlich zwangen einige ältere CSS-Frameworks Sie dazu, auch so zu denken . Einer der Nachteile, wenn Sie nur dieses eine Standard-12-Säulenraster für alles haben dieses eine Standard-12-Säulenraster , ist, wenn Sie anfangen , es vielseitig zu machen, Sie brauchen sehr große Dachrinnen und das funktioniert nicht immer. So hacken Sie es irgendwie und haben etwas, das aufgrund von Fortschritten in CSS nicht wirklich darauf abgestimmt ist . Wir können jetzt an einer Webseite arbeiten, die eher an einem modernen Magazin-Layout arbeiten würde. Dieser obere Bereich ist vielleicht nur ein Zwei-Säulenraster, und dann ist dieser untere Bereich nur ein völlig separates Drei-Säulenraster. Wir müssen einen Teil der zugrunde liegenden CSS-Theorie verstehen zugrunde liegenden CSS-Theorie , damit wir unsere Raster entwerfen können. Sie können jedoch bereits die Vorteile eines Rasters sehen , das nur aus zwei Spalten besteht, und dann ein völlig separates Raster mit drei Spalten. Weil wir jetzt die Kontrolle über die Gosse haben. Wir können diese Dachrinne relativ zu unserem vertikalen Raster und dem Stil machen unserem vertikalen Raster und , den wir auf unserer Seite erstellen. Und es wird einheitlich sein, wenn wir auf dem mobilen Desktop schauen und die gesamte Reaktionsfähigkeit dazwischen liegt. Wir haben die Kontrolle über diese Breite. Wir können es in unser schönes einheitliches Design passen lassen. Sicherzustellen, dass die Elemente auf unserer Seite an einer Art Raster ausgerichtet sind, ist das Wichtigste, was wir tun können, damit sich unsere Designs wohl und professionell anfühlen und sie vertrauenswürdig aussehen lassen. Unsere Topographie diktiert das anfängliche vertikale Raster und verleiht den Höhen jedes Abschnitts eine gewisse Gleichmäßigkeit und einen gewissen Rhythmus. Aber jeder Abschnitt wird tatsächlich ein anderes horizontales Raster haben . Webseiten variieren gelegentlich in der Breite, je nachdem welches Gerät wir es betrachten, und gelegentlich auch aus anderen Gründen. Die einzige Messung, über die wir die Kontrolle haben, ist eigentlich die Rinne zwischen den Säulen. Und wir können dies auf unserer gesamten Website einheitlich machen. 5. Box Modal: Wenn Sie überhaupt nichts über CSS wissen, müssen Sie einige Konzepte kennen , um Raster erstellen zu können. Wenn Sie jedoch bereits wissen , was das CSS-Box-Modell ist, können Sie dieses Video überspringen. Jedes einzelne Element auf einer Webseite hat potenziell. Diese drei Dinge sind Grenze, Polsterung und Ränder. Mach dir keine Sorgen, wenn das keinen Sinn ergibt. Schauen wir uns ein Beispiel aus dem letzten Design an , das ich dir gezeigt habe. Schauen wir uns diesen Inhaltsbereich an, den ich derzeit als lila Box zeige. Diese Box hat eine Polsterung. Das zeige ich derzeit hier grün auf dem Bildschirm an. Es hat eine Grenze, die ich derzeit als gelb zeige, aber es war nicht marineblau. Noch einen Moment zu gehen. Jetzt ist der Rand der Teil, den Sie tatsächlich auf dem Bildschirm sehen können. Und es hat einen Spielraum. Das ist der Bereich, den ich derzeit in Orange zeige, die Polsterung, der Rand und der Rand können alle unterschiedlich groß sein. Alles was sie können 0 sein. Sie können nicht existieren. Zum Beispiel, wenn es keine Grenze gab und ich gerade den Hintergrund hier schwarz gemacht habe, und ich gerade den Hintergrund hier schwarz gemacht habe um es ein bisschen offensichtlich zu machen , wo der Unterschied zwischen Polsterung und Rand liegt. Wir haben vielleicht etwas , das so aussieht. Der Inhalt wird lila angezeigt, die Polsterung wird grün dargestellt und der Rand ist immer noch orange dargestellt. Um Ihnen zu helfen, genau zu visualisieren, wie das funktionieren würde, schauen wir uns ein anderes Beispiel an. Aber dieses Mal haben wir keine Polsterung. Ohne Polsterung würde es so aussehen. Stattdessen ist der Inhaltsbereich lila. Wir haben die Grenze jetzt in Gelb und der Rand wieder in Orange. Und warum beenden Sie das Set nicht einfach, indem Sie Ihnen zeigen, wie dieser Teil des Designs aussehen würde wenn es keine Ränder gäbe. Lassen Sie mich noch einmal den Inhaltsbereich in Violett hervorheben und die Polsterung ist grün und der Rand ist gelb. Hoffentlich ist das inzwischen alles unglaublich klar, aber zögern Sie nicht zurückzugehen und einen weiteren kurzen Blick darauf zu werfen. Wenn du immer noch ein bisschen verwirrt bist. Es ist auch durchaus möglich , dass die Größe des oberen, unteren, linken oder rechten Randes, Randes oder der Polsterung völlig unterschiedlich sein kann. Zum Beispiel habe ich hier die richtige Grenze dicker gemacht als die anderen drei. Jedes einzelne Element auf jeder einzelnen Webseite hat diese drei Dinge, Polsterung, Rahmen und Rand. Obwohl sie natürlich auf 0 eingestellt sind, können Sie sie also nicht sehen. Jeder dieser vier Abschnitte hier drin, das Bild und der Text, und vielleicht ist dies ein Button unten. Sie haben jeweils ihre eigenen Boxen mit Polsterung, Rändern und Rändern. Diese vier Elemente haben wir einen Namen für Text und Bilder von allen, die in dieser einen Box eingewickelt sind. Jetzt hören Sie vielleicht, dass Entwickler das Wort div ziemlich oft verwenden . Es ist die Abkürzung für das Wort „Teiler“. Das nennt man ein Div. Es gruppiert dieses Bild und diesen Textinhalt darin. Und wie wir bereits gesehen haben, hat dies eine eigene Polsterung, Grenze und Ränder. Und wir können so viele dieser unsichtbaren Divs haben , wie wir möchten, teilen unsere Webseite in bequeme Gruppen auf. Jetzt werden wir in Kürze wieder über Design sprechen. Zuallererst müssen Sie jedoch sicherstellen, dass Sie wissen, dass jedes Element auf einer Seite, einschließlich der unsichtbaren Divs, die Dinge zusammenfassen, Grenzen, Ränder und Polsterungen aufweist. Jetzt gibt es ein paar wirklich gute Techniken, die wir anwenden können. Diese Teiler trennen also die Seite, wie wir sie trennen wollen. Einer von ihnen heißt Flexbox und einer von ihnen heißt Grid. Und wir werden sie uns in den nächsten beiden Videos ansehen. Es wird also ein bisschen mehr CSS geben. Also ganz einfach, jedes Element auf einer Webseite hat Polsterung, Rahmen und Rand. Dies können verschiedene Breiten auf verschiedenen Größen haben und sie können sogar Nullen sein, sodass sie überhaupt nicht angezeigt werden. Wir können Elemente in Divs gruppieren und sie werden auch Polsterungen, Grenzen und Ränder haben. Um die Größe dieser Divs bequem zu steuern, können wir Flexbox und Grid verwenden, denen es sich um zwei CSS-Regeln handelt, die wir uns in den nächsten beiden Videos ansehen werden . 6. Flex Box: Wenn wir anfangen würden, eine Website zu erstellen, erstellen wir vielleicht zuerst etwas , das so sehr einfach aussieht. Nehmen wir an, dass es sich bei diesem Feld oben links um ein Logo handelt. Und diese beiden Boxen oben rechts, tolle Schaltflächen, diese Elemente selbst haben immer die gleiche Breite, unabhängig von der Breite des Browserfensters. Es wird für uns Sinn machen, diese einfach in einem dieser unsichtbaren Elemente zu gruppieren , die ich erwähnt habe, als div bezeichnet. Dies wäre hier sinnvoll, weil wir möchten, dass dies eine maximale Breite ist, die dieses div haben kann. Wenn wir es auf einem sehr, sehr großen Monitor betrachten, möchten wir nicht, dass das Logo ganz oben links auf dem Monitor und rechts unten rechts ganz oben rechts eingeschränkt wird. Wir möchten, dass dieses Div durch eingeschränkt wird eine maximale Breite und damit es relativ zentral auf der Seite sitzt . Wenn ich jetzt einen zweiten Abschnitt zur Seite hinzufügen würde, wie vielleicht einige Überschriftentexte. Es kann gut am Logo ausgerichtet erscheinen, einfach weil das umgebende div die gleiche maximale Breite hat und die gleiche Polsterung und die gleiche Ränder aufweist. Ich habe den Rand des Divs hier in Gelb gezeigt , nur damit Sie es klarer sehen können, aber es hat auch etwas Polsterung. Die Tasten passen nicht ganz an den Rand des Entwicklers. Und es hat auch einen gewissen Spielraum. Das div berührt nicht ganz oben auf dem Bildschirm oder das darunter liegende Element. Wenn wir uns diese Webseite beispielsweise auf einem iPad angesehen haben , bedeutet dies, dass das Logo nicht die Seite des Bildschirms berührt und die Tasten auch nicht. Wenn wir dies jetzt vereinfachen und direkt in diese Überschriftenleiste die darin enthaltenen Elemente schauen , haben wir zwei Knöpfe auf einen Seite und ein Logo auf der anderen Seite. Und wir könnten dies vereinfachen, indem wir sagen, dass die beiden Schaltflächen einfach in einer anderen Gruppe befinden. Nun, diese beiden Boxen die wir jetzt links und rechts haben, diese beiden Gruppen oder werden diese beiden Gruppen oder Elemente immer die gleiche Größe haben. Dies bedeutet, dass der dazwischen liegende Raum wächst und schrumpft, wenn die Browsergröße zunimmt und schrumpft. Und hier können wir Flexbox verwenden. Dies ist eine ziemlich einfache Regel, aber es ist sehr wichtig, als Designer zu verstehen, weil Sie schnell erkennen, dass die Messungen, die uns wichtig sind , ein Gefühl von Gleichmäßigkeit und um sicherzustellen, dass die Dinge in unserem Design sauber ausgerichtet sind, ist wahrscheinlich kein zugrunde liegendes Gitter und wahrscheinlich mehr die Breiten dieser Polsterungen und Ränder um diese verschiedenen Elemente. Wenn wir die Flexbox-Regel zu einem div oder einer Gruppe hinzufügen, können wir sie so gestalten, dass der Platz um jedes Element gleich ist. Wir könnten jedes der Elemente nach innen strecken und wir können es so ausrichten , dass alle Elemente in der Mitte, nach links oder rechts gequetscht werden . Dann können alle diese Regeln natürlich horizontal als auch vertikal funktionieren. Werfen wir einen Blick auf das einfache Design zurück ich vor ein paar Videos erstellt habe. Und schauen wir uns an, wie wir das Menü oben machen würden , wir haben ein Logo auf der linken Seite, wir haben einen Knopf auf der rechten Seite und wir haben ein kleines Menü in der Mitte. Wir können die exakte Positionierung dieser Dinge nicht kontrollieren. Es hängt von der Breite des Browsers ab. Und es kann möglicherweise davon abhängen, wie der Benutzer seine Standardtextgröße in seinem Browser festgelegt hat. Wenn wir dies entwickeln oder an einen Entwickler übergeben, werden sie wahrscheinlich eine Flexbox verwenden , um sicherzustellen, dass sich dieses Menü in der Mitte befindet. Und diese beiden anderen Elemente befinden sich ganz links und ganz rechts. Die Größe, über die wir ein Designer haben, ist das Muster dieser Schaltfläche und der Abstand zwischen diesen Menüpunkten. Wir könnten einen einheitlichen Stil kreieren und ihm das Gefühl geben sich ausgerichtet zu fühlen, indem wir diese alle gleich groß machen. Damit meine ich, wir könnten sagen, dass die Polsterung auf dieser Schaltfläche und der Abstand zwischen diesen Menüpunkten genau die gleiche Anzahl an Pixeln beträgt. Jetzt wird das nicht überall funktionieren. Und ich glaube nicht, dass das in dieser Situation wirklich funktioniert , in der die Menüpunkte wahrscheinlich etwas mehr Platz um sie herum benötigen. Ähnlich wie wir bereits eine typografische Skala haben. Und es gibt nur eine begrenzte Anzahl von Schriftgrößen, die wir in unserem gesamten Design verwenden Wir werden nur eine begrenzte Menge an Polsterung und Randgrößen haben . Es ist also in Ordnung, dass der Abstand zwischen diesen Menüpunkten und der Polsterung auf dieser Schaltfläche unterschiedlich groß ist. Aber im Idealfall möchten wir, dass sie in das gleiche Verhältnis passen. Im Beispiel auf diesem Bildschirm habe ich sie in das goldene Verhältnis passen lassen. Da Typografie fast immer den Großteil dessen ausmacht, was in Ihrem Design steckt. Es ist absolut sinnvoll, dass dieses Verhältnis auf dem Zeilenhöhenverhältnis basiert , das Sie bereits in dem Designbeispiel haben, das ich auf meinem Bildschirm zeige Die Polsterung für die Schaltfläche genau die gleiche Größe wie die Zeilenhöhe des Absatzes. Und für die Menüpunkte, in denen etwas mehr Platz vorhanden ist, habe ich die Zeilenhöhen einer meiner Überschriften verwendet. Dies bedeutet, dass das Design insgesamt immer noch dieses Konformitätselement aufweist, obwohl sich das Raster ziemlich dramatisch ändern kann. Flexbox gibt uns die Kontrolle darüber, wie die Elemente innerhalb einer Gruppe oder einem DIV gerechtfertigt, beabstandet und ausgerichtet sind. Dies hinterlässt uns die Elemente mit fester Breite in diesem div sowie die Muster an den Rändern , die sich innerhalb unserer Kontrolle befinden. Und wirklich möchten wir dies zusätzlich nutzen , damit wir immer noch ein Gefühl der Einheitlichkeit in unseren Designs schaffen können , obwohl sie reagieren können. Und es gibt alle möglichen Dinge, die sich ändern können. 7. CSS-Gitter: Css Grid gibt uns viel weniger Kontrolle als Flexbox, aber es ermöglicht uns, einige Regeln über mehrere Zeilen anzuwenden. Wenn Sie sich eine, eine Tabelle wie ein Excel oder so vorstellen , haben Sie Spalten und Zeilen, und das haben Sie im CSS-Raster. Wenn Sie sich das leicht vorstellen, können wir sie zwingen, die gleiche Breite und die gleiche Höhe haben, die ich derzeit auf dem Bildschirm habe, die gleiche Breite und die gleiche Höhe zu haben. Dies wird schnell nützlicher , wenn Sie feststellen, dass Sie dann beispielsweise ein Element auf zwei Zeilen festlegen können. Dies macht das CSS-Raster viel nützlicher für die Layouts über das gesamte Modul oder die Komponente unserer Webanwendung. Wie wir bereits gesehen haben, ein Design wie das auf dem Bildschirm gerade könnte ein Design wie das auf dem Bildschirm gerade ein sechstes Spalten- oder 12-Säulenraster mit verschiedenen Elementen sein , die eine unterschiedliche Anzahl von Spalten umfassen . Aber tatsächlich wäre es für jede dieser Komponenten viel sinnvoller , einfach verschiedene CSS-Gitter zu sein, wobei der mittlere Abschnitt einfach ein Zwei-Säulenraster und der obere und untere Abschnitt eine Drei ist -Säulenraster. Jedes Element im Raster hat eine einheitliche Breite, die sich ändern kann, da die Änderungen der Browsergröße alle möglichen Dinge aufweisen. Also nochmal die Sache, über die wir die Kontrolle haben , als Polsterung und Marge. Dies ist es, was wir verwenden werden, um ein Gefühl der Konformität in unseren Entwürfen zu schaffen. Dies ist nicht nur sehr nützlich, um es als Designer zu realisieren, sondern kann Ihnen auch das Leben erheblich erleichtern. Die Art, wie viele Webdesigner denken. Und die Art, wie wir traditionell dachten, besteht darin, ein Standard-Sechs- oder 12-Säulenraster über alles zu haben . Und um es vielseitig zu machen, müssten wir ihm tatsächlich eine viel größere Rinne geben als die hier auf dem Bildschirm gezeigte, die, wie wir wissen, wegnehmen wird die eine Variable wegnehmen wird dass wir unsere Designs einheitlich aussehen lassen oder uns dazu bringen, jedem Element eine so große Polsterung hinzuzufügen , die uns eigentlich nicht so viel Platz gibt, um mit dem weißen Bereich hier in jedem von Diese Elemente, zum Beispiel, basierten alle auf dem ursprünglichen modularen Raster, das wir früher im Druckdesign hatten. Und um Sie an ein Beispiel zu erinnern, hier ist eins hier. Eine Sache, die Sie bei diesem Magazindesign bemerken werden , ist nicht alles. Die Abschnitte sind ausgefüllt. Einige Abschnitte oder einfach nur weiß und einige haben irgendwo eine Überschrift in einer oberen Ecke. Wir verwenden das Raster, um uns dabei zu helfen, Elemente auszurichten und die Dinge danach einheitlich anfühlen zu lassen. Aber niemand muss jemals das Raster sehen oder wissen, dass es da ist. Und wir wollen uns sicherlich nicht zwingen , jeden Teil davon zu füllen. Das CSS-Raster macht es auch viel angenehmer , mit der mobilen Ansicht oder der Tablet-Ansicht zu arbeiten. Wir müssen einfach nur sagen, dass sich bei bestimmten Breiten eine Sache über alle Spalten erstrecken wird, während es zuvor nur die Hälfte der Spalten umfasste. Dies bedeutet, dass wir uns unsere Designs nicht mehr als mobile Ansicht oder Desktop-Ansicht vorstellen müssen . Vielmehr können wir uns vorstellen eine einzelne Komponente in eine einzelne Spalte mit einer bestimmten Breite aufteilt in eine einzelne Spalte mit einer bestimmten oder zwei Spalten mit einer anderen Breite ist. Wenn wir noch einmal auf einen Abschnitt dieser einfachen Seite zurückblicken , die ich erstellt habe, funktioniert dies vielleicht nicht an einem einzigen Raster. Vielleicht handelt es sich um zwei verschiedene Komponenten, die jeweils eine eigene Säulenliste und ihre eigenen Ränder und Polsterungen haben. Dann ist das, was sie einheitlicher macht und ihnen das Gefühl macht und ihnen das Gefühl gibt, zusammen zu gehören, die Polsterungen, Ränder, der Abstand und die maximalen Breiten. Jetzt, wenn wir die Gesamtbreite des Browsers reduzieren, oder schauen wir uns ihn vielleicht auf einem iPad an. Vielleicht rastet die untere Komponente einfach nur eine Spalte ein, während sich die oberste Komponente in zwei Spalten befindet. Und wenn wir dann etwas schmaler werden oder auf ein Mobiltelefon schauen, ist die oberste Komponente vielleicht auch nur eine einzige Spalte. Die genaue Breite , bei der diese Änderungen geschehen, liegt jetzt vollständig in unserer Kontrolle. Und sie können in ganz unterschiedlichen Breiten passieren. Wir wollen nicht unbedingt darüber nachdenken, dass ein Raster etwas ist, das wir von Anfang an erstellen. Wir erstellen ein Raster für alle einzelnen Komponenten und sie müssen nicht unbedingt gleich sein. Was wir jetzt schaffen wollen möglicherweise einige einheitliche Regeln darüber, wie diese Ränder und Polsterungen sein können, und möglicherweise eine Skala für verschiedene Größen. Css Grid ermöglicht es uns, einige Elemente in einer Tabelle mit Zeilen und Spalten zu positionieren . Sie haben jetzt alle eine einheitliche Breite und die Reihen können möglicherweise auch eine einheitliche Höhe haben. Wir können Regeln hinzufügen, damit sich die Anzahl der Zeilen breit und das Element bei unterschiedlicher Browserbreite ändern kann . Und es gibt keinen logischen Grund mehr für uns, eine bestimmte Anzahl von Spalten für unsere gesamte Webseite zu haben. Jede Komponente kann völlig getrennt voneinander arbeiten . Ähnlich wie bei der Flexbox können wir wieder ein einheitliches Konformitätsgefühl erzeugen, indem wir eine Skala für unsere Ränder und Polsterbreiten haben. Wenn Sie keine Entwicklungserfahrung haben, waren diese letzten Videos vielleicht etwas verwirrend, aber wir werden es als nächstes ganz zusammenbringen. 8. Responsive vs Fluid: Im Laufe der Jahre gab es verschiedene Möglichkeiten, Ihre Websites an unterschiedlich große Gerätebildschirme anzupassen. Ursprünglich würden die Leute das tun, was sie als adaptives Design bezeichneten, wo Sie versuchen würden, herauszufinden was das Gerät war, und dann ein anderes CSS-Stylesheet laden , so dass ein iPhone und ein Desktop-Computer hätte zwei verschiedene Websites. Das war ziemlich viel Arbeit, und es wurde auch absolut unmöglich, da wir mehr Geräte mit allen Arten von Bildschirmen unterschiedlicher Größe bekamen . Die beiden, über die wir heute noch sprechen sind fließend und reaktionsschnell. Wir haben vorhin das Fluiddesign angesprochen. Wir haben darüber gesprochen, wie Sie die VW-Einheit verwenden könnten, die Breite des Darstellungsfensters, um die Schriftgröße anzupassen, wenn sich die Browsergröße anpasst. Dies bedeutet, wenn sich die Breite Ihres Browsers von 999 Pixel breit auf einhundertzehnhundert Pixel breit ändert von 999 Pixel breit auf einhundertzehnhundert , wird sich Ihr Design leicht anpassen. Bei jeder Anpassung der Breite des Ansichtsfensters wird sich das Design geringfügig unterscheiden. Und wenn wir die Breite erhöhen, erhöhen wir die Schriftgröße, erhöhen die Zeilenhöhe und erhöhen die Zeilenlänge, wenn wir unsere Designs erstellen und den Code erstellen, um diese Designs zu implementieren wollen wir uns immer bewusst sein , wo wir Kompromisse eingehen. Jetzt gibt es bei so etwas wie der Topographie tatsächlich mehrere Dinge. Wir möchten immer, dass unsere Seite gut aussieht. Meiner persönlichen Meinung nach der wichtigste Teil der Benutzererfahrungen, hat der wichtigste Teil der Benutzererfahrungen, eine gut aussehende Website den größten Einfluss auf die Benutzererfahrung. Wir möchten natürlich, dass der Benutzer den Text schnell und effektiv lesen kann . Und bis zu einem gewissen Grad ist uns die Leseerfahrung wichtig, uns die Leseerfahrung wichtig da die Leute das Gefühl sie mit Texten in Texten , die sie tatsächlich langsamer lesen, voranschreiten dass sie mit Texten in Texten , die sie tatsächlich langsamer lesen, voranschreiten. Wir haben früher in unserem Lesbarkeitsmodul darüber gesprochen . Nun für all diese drei Dinge, wie gut es aussieht, das Leseerlebnis und die Lesbarkeit. Wir werden an verschiedenen Stellen in unserem Design Kompromisse eingehen. Mit dieser Idee des flüssigen Designs kommt es jedoch keinem von ihnen zugute, Text zu erstellen, der für jemanden leicht zu lesen ist. Die einzige Variable, die uns wichtig ist wie weit der Text von ihrem Gesicht entfernt ist? Wir haben bereits die perfekte Schriftgröße, diese perfekte Zeilenlänge und die perfekte Zeilenhöhe für Personen herausgearbeitet , um Text oder die genaue Schriftart, die wir aus verschiedenen Entfernungen verwendet haben, zu lesen . Und so haben wir ein reaktionsschnelles Design. Hier haben wir im Wesentlichen drei verschiedene Designs leicht unterschiedlichen Änderungen an unserem CSS für leicht unterschiedliche Gerätebreiten. Alles, was wir tun müssen, ist zu entscheiden, welche Breite ein Mobiltelefon haben könnte, die größte Breite, die ein iPad haben könnte. Und wir können einige CSS-Regeln mit diesen Zahlen festlegen. Es gibt jedoch ein Problem hier, nicht wahr? Denn irgendwann könnte jemand einfach ein wirklich großes Telefon oder einen wirklich kleinen Desktop-Monitor erstellen . Die Leute verwenden möglicherweise ihre Fernseher, um Websites anzuzeigen. Es ist jedoch die Technik, die von vielen Menschen allgemein als bewährte Praxis angesehen wird , einschließlich Google und Google, verwenden diese, um zu entscheiden, ob sie eine Website in ihrem SEO-Ranking als gut einstufen soll oder nicht. Selbst wenn Sie nicht der Meinung sind, dass Responsive ein gutes System ist , damit eine Website auf einem Mobiltelefon funktioniert. Vielleicht möchten Sie überlegen, wie sich dies auf das Ranking Ihrer Website in Suchmaschinen auswirken wird . Was wir tun können, ist, dass wir responsiven Code erstellen können. Es wechselt also zwischen einem Telefon, einem iPad und einem Desktop. Aber wir können ein gewisses Maß an Fluidität zwischen einem großen iPad und einem kleinen iPad zulassen. Wir wollen dies nie mit unserem Absatztext tun, aber für so etwas wie unsere Überschriftentexte werden Text oder sogar Bilder und andere Teile der Website angezeigt sogar Bilder und andere Teile der Website , wo es vielleicht nicht wichtig ist wie einfach es zu lesen ist oder wie gut es aussieht, aber vielleicht ist es wichtiger, als das tatsächlich eine gute Technik sein kann, wie gut es die Aufmerksamkeit der Menschen erregt wichtiger, als das tatsächlich eine gute Technik sein kann, wie gut es die . Bei flüssigem Design passt sich das Design an, wenn sich die Breite des Browsers ändert. Das nützt uns in der Typografie nicht allzu sehr , da es bei der Lesbarkeit nicht hilft. So gut sieht die Seite aus. Responsive ist der Ort, an dem wir bestimmte Punkte bei der Änderung der Breite haben bestimmte Punkte bei der Änderung , an denen die CSS-Regeln aktualisiert werden, und das Styling der Site ändert. Dies ist weitaus nützlicher, da wir nur versuchen, unsere Website gut aussehen zu lassen und gut auf drei verschiedenen Designs für einige Elemente in unserem CSS zu arbeiten drei verschiedenen Designs für einige Elemente in unserem CSS . Wir möchten vielleicht ein bisschen von beiden verwenden. Wir möchten vielleicht das ansprechende Design haben , bei dem es zwischen Mobil und Desktop wechselt, jedoch mit einer gewissen Fluidität. So passt es sich je nach Größe des Telefons geringfügig an. Wir werden uns alle drei dieser Techniken in den nächsten drei Videos ansehen. 9. Anatomie eines Rasterraums – Teil 1: Unser Raster, das einmal erstellt wurde, wird auf unseren abgeschlossenen Websites nicht angezeigt. Wir erstellen das Raster, um die Dinge auf der Seite zu gestalten. Und wir zeigen sie nie auf der eigentlichen fertigen Seite. Aber es macht einen großen Unterschied. Wie wir gesehen haben, als wir unsere Kompositionen kreiert haben, können wir dazu führen, dass sich die Dinge passender und verbundener anfühlen. Wenn wir Regeln haben, wo sie auf der Seite erscheinen können. Weil es hier um Regeln geht , die wir innerhalb eines Teams haben. Wir werden am Ende oft darüber reden. Und deshalb müssen wir die Terminologie rund um ein Gitter kennen und wie all die verschiedenen Dinge heißen. Unser vertikales Raster wird bereits hier auf dem Bildschirm angezeigt. Und denken Sie daran, dass wir dies wahrscheinlich nicht als Basisraster bezeichnen wollen , da dies im Druckdesign verwendet wird und dort die Topographie auf der Linie sitzt, was wir mit CSS nicht tun können. Nennen wir das also das vertikale Raster. Es ist ziemlich typisch , dass diese Linien in Schritten von vier Pixeln geteilt werden. Aber wenn Sie eine speziell textabhängige Website haben eine speziell textabhängige Website und Sie sich sehr mit der Lesbarkeit befassen. Möglicherweise möchten Sie dies basierend auf der von Ihnen verwendeten Schrift leicht anpassen , wie wir in früheren Modulen gesprochen haben , genau wie bei der Arbeit mit einer Excel. Spalten sind die Dinge, die trennt unsere Seite horizontal. Dieser Raum zwischen jeder Spalte wird als Dachrinne oder manchmal als Lücke oder Gasse bezeichnet , aber ich würde das Wort Rinne verwenden. Und wir wollen dieses Padding nicht nennen, weil wir das Wort Padding später verwenden werden, aber wir möchten hier immer etwas Platz haben. Der Bereich am Standort unseres Rasters wird hier als Marge bezeichnet. Und wir werden dies nicht unbedingt zur Größe der Gosse machen. In der Tat würden wir es normalerweise etwas größer machen, vielleicht doppelt so groß wie die Breite der Rinne. Wir werden die Marge für andere Bereiche unseres Netzes verwenden . Aber das ist in Ordnung, weil wir im Wesentlichen dasselbe meinen , wenn wir dieses Wort verwenden. Wenn Sie sich vorstellen, dass diese weiße Box eine Website ist, aber wir sehen sie irgendwann auf einem viel größeren Bildschirm an , wird es nur Platz auf beiden Seiten geben . Diese hier rot dargestellten äußeren Ränder sind flexible Ränder. Sie werden nur wachsen, um den Raum zu füllen sobald wir die maximale Breite unserer Website erreicht haben, natürlich, auch wie Excel, werden die Abschnitte, die sie vertikal aufteilen, Spalten genannt. Und wenn wir diese beiden Trennzeichen aus unseren Entwürfen verwenden , möchten wir wahrscheinlich, dass diese Spalten ein Vielfaches dieses vertikalen Gitters sind. Wir haben diese Felder bereits erstellt , die Sie dort erhalten, wo sich Zeile und Spalte schneiden. Wir nennen diese Module. Wir haben früher das modulare Raster gesehen. Es ist kein guter Name, weil Entwickler das Wort Modul verwenden , um etwas ganz anderes zu bedeuten, aber wir müssen uns selten darum kümmern, diese zu benennen. Diese werden manchmal Einheiten genannt und dies ist wahrscheinlich ein noch schlechterer Name. Vielleicht hören Sie Leute ein Zwölf-Einheiten-Raster sagen, in diesem Fall bedeuten sie Spalten, aber das Wort Einheit kann auch Rho oder Modul bedeuten. Achten Sie also nur auf diese beiden Wörter, aber ich würde es wahrscheinlich vermeiden, sie wirklich zu benutzen. Ein Feld ist eine Gruppe von Zeilen, da dies verwendet wird, um die visuelle Monotonie aufzulösen, würde idealerweise nicht die gleiche Anzahl von Zeilen haben, aber wir möchten sicherstellen, dass es in unser Raster passt. Ich mag das Namensfeld nicht, besonders wenn es sich um Webdesign handelt, denn offensichtlich ist ein Feld etwas, das ein Eingabeformular auch hat. Sie könnten dies stattdessen eine Gruppe von Zeilen oder eine vertikale Region nennen . Das Wort vertikale Region ist ziemlich gut, da eine Sammlung von Spalten manchmal als Region bezeichnet wird . Auch hier würde ich es vermeiden , diese Regionen die gleiche Anzahl von Spalten breit zu machen, da die Dinge dadurch die gleiche Anzahl von Spalten breit zu machen, da die Dinge dadurch eintönig aussehen. Schließlich wird dies als räumliche Zone bezeichnet, aber wir sprechen selten davon, Dinge im Webdesign auf diese Weise zu zerbrechen . Also würde ich mir nicht allzu viele Sorgen machen, dass ich mich daran erinnere. Vielleicht hören Sie es irgendwann von einem Druckdesigner. Es gab ziemlich viel Terminologie in diesem Video, aber die wenigen, an die Sie sich unbedingt erinnern sollten , weil Sie sie verwenden werden, das vertikale Raster. Wir kennen bereits die Spalten und Zeilen, die denen ähneln Sie in einer Tabelle hätten. Die Dachrinnen, der Abstand zwischen den Säulen. Der Rand ist der Platz an der Seite. Der variable Rand für den Fall , wenn die Seite zu groß oder zu klein ist. Ihre vertikalen und horizontalen Bereiche , die eine Sammlung von Zeilen oder Spalten sind. 10. Anatomie eines Rasterraums – Teil 2: Ich habe ein vertikales Raster, ein sechstes Säulenraster, und ich habe einige horizontale Bereiche oder auch Felder genannt. Und ich habe dieses vertikale Raster. Jetzt kann ich diese selbständig verstecken , damit sie nicht super ablenken. Und offensichtlich möchte ich einige davon regelmäßig ein- und ausschalten, damit ich sehen kann, wie mein gesamtes Design aussieht. Wie wir in einem Moment sehen werden. Ein Grafikprogramm wie Sketch, InVision Studio oder Figma ermöglicht es uns, einige dieser Raster zu erstellen, damit wir sie mit Hotkeys sehr schnell ein- und ausschalten können . Aber für einige von ihnen wie die Regionen müssen wir unsere eigenen Ebenen erstellen. Es ist sinnvoll, jeden von ihnen einer anderen Ebene hinzuzufügen damit wir sie ein- und ausschalten können, damit wir unser Design besser sehen können. Es ist sehr verwirrend, wenn wir alle unsere Raster gleichzeitig eingeschaltet haben. Beginnen wir, uns einige der Teile des Rasters anzusehen , die Sie in irgendeiner Weise visuell sehen können. Eine Hängeleine ist fast etwas, das man sehen kann. Dies ist etwas, das ein Zeitschriftendesigner verwendet bei dem immer eine bestimmte Linie im vertikalen Raster verwendet wird, um die Überschrift anzulegen. Auch wenn das Design einer Seite völlig anders ist, setzen wir immer die Überschrift auf diese eine Hangline. Jetzt wird es in einer Zeitschrift manchmal für ein bisschen visuellen Effekt verwendet, ein bisschen Punch-Gattung, wenn eine Seite eine besonders wichtige Überschrift hat damit sie nicht auf der Hängelinie steht. Und dann wird es die Konvention brechen und das mit unserer Webanwendung stärker hervorstechen . Es ist gut, das nicht zu tun, weil die Leute ziemlich zufällig herumstöbern und immer etwas irgendwo auf der Seite brauchen . Sie wissen immer, wo sie sich auf der Website befinden. Daher würde ich ermutigen, eine bestimmte Linie im vertikalen Raster zu haben , was eine hängende Zeile für unsere Überschriftentexte darstellt. Wir haben bereits unsere vertikalen Regionen und trennen diese manchmal, brechen die visuelle Monotonie ein wenig indem wir ihnen eine andere Hintergrundfarbe geben. Und das lenkt die Aufmerksamkeit auf und hilft uns dabei, unseren vertikalen Rhythmus beizubehalten. Stattdessen könnten wir unsere Abschnitte mithilfe von Strömungslinien wie dieser trennen . Nur eine schwarze Linie auf der Seite, die tatsächlich eine der Linien und unser vertikales Raster zeigt . Fließlinien können oft verwendet werden, um Aufmerksamkeit der Menschen zu lenken, und sehr viel auf etwas oberhalb oder unterhalb der Linie. Sie sind sehr aufmerksamkeitsanspruchsvoll und verleihen einem Design sehr leicht eine Menge visuelle Komplexität. Also würde ich sagen, wenn man nicht wirklich so etwas wie eine dieser Strömungslinien braucht , würde ich sie nicht wirklich oft einsetzen. Normalerweise möchten wir viel Leerzeichen in unserem Design haben , zumal wir uns nicht darauf beschränken, wie viel Papier wir verwenden, wie Druckdesigner. Warum nutzen Sie nicht das ganze Weiß? Dies bedeutet, dass unser Raster, das wir sorgfältig erstellt haben , möglicherweise nicht offensichtlich ist und die Website möglicherweise eine kleine Marke aussehen lässt. Nun, wir haben unsere Kompositionen bereits ausgeglichen und bietet Module an. Vielleicht können wir manchmal ein bisschen davon gebrauchen. Wir könnten ein kleines Kreuz oder Punkte in der unteren Ecke hinzufügen , um zu versuchen die Elemente auf der Seite auszugleichen. Wenn wir das tun, wollen wir das wahrscheinlich irgendwo an einer der Ecken unseres Rasters platzieren . Wenn wir unsere Raster zusammenstellen, wollen wir uns das vorstellen , als würden wir entwerfen, wohin unser Leerzeichen führt. Stellen Sie sich das eher wie eine Möglichkeit vor, Raum zum Atmen zu gewährleisten, als eine Möglichkeit, so viel Inhalt wie möglich auf die Seite zu stopfen. Nicht jede Region unserer Seite wird etwas drin haben. Ziemlich viele von ihnen werden einfach leer sein. Und so wollen wir es wirklich. Wenn wir eine farbige Schachtel um eine unserer Regionen haben und Text hinzufügen möchten, muss sichergestellt werden, dass es eine innere Polsterung hat. Wir möchten nicht, dass die Texte in Rechten am Rand dieses Grenzfeldes sitzen. Aber jetzt stimmen unsere Überschriftentexte leider nicht gut mit unserem Haupttext überein. Natürlich könnten wir die Überschriftentexte an diesem Körpertext ausrichten . Oder eine andere Option könnte einfach sein, dass es eine farbige Box gibt , die nicht perfekt in das Raster passt. Vielleicht sitzt es etwas außerhalb der IT. Problem mit dieser Technik kann sein, dass wir vielleicht hier unten in Kisten haben und dann werden sie sehr, sehr nahe beieinander aussehen . Zwischen diesen beiden Boxen ist nicht viel Platz. Es gibt keine wirklich perfekte Lösung für dieses Problem. Aber genau für dieses Beispiel würde ich sagen, dass sich die farbigen Kästen bis zu den Rändern der Regionen erstrecken und jede Region eine Polsterung hat. Dann haben wir ein Design , bei dem sich alles ausgerichtet anfühlt, aber nichts ist zu nahe am Rande, sich zu unwohl zu fühlen. Beispielen wie diesem haben Sie möglicherweise diese spezifischen Regionen erstellt , die Sie für Ihre Entwürfe verwenden. Und vielleicht möchten Sie einfach die Polsterung dort direkt hinzufügen , um die Arbeit zu erleichtern. Ihr Grafikprogramm wird wahrscheinlich eine Möglichkeit haben , die Raster ein - und auszuschalten, aber Sie möchten wahrscheinlich Ihre vertikalen und horizontalen Bereiche in einer separaten Ebene platzieren Ihre vertikalen und horizontalen Bereiche in , damit Sie es können schalten Sie sie einfach ein und aus. Eine Hängelinie ist eine der Linien in Ihrem vertikalen Raster , auf die Sie immer Ihre Überschrift für Ihre Seite setzen. Strömungslinie zeigt eine der Linien in Ihrem vertikalen Raster, um die Aufmerksamkeit auf etwas zu lenken. Und wenn Sie horizontale und vertikale Bereiche erstellen horizontale und vertikale Bereiche und sie in eine separate Ebene einfügen, möchten Sie dort möglicherweise auch etwas Polsterung hinzufügen, insbesondere wenn Sie einen Rahmen haben oder eine Hintergrundfarbe. 11. Zusammenfassung: Mit Typografie, Farbe und Komposition oder Gittern müssen wir unser Auge entwickeln, müssen wir unser Auge entwickeln um festzustellen, wann es gut funktioniert. Wir müssen intuitiv sehen können , wann das Design gut aussieht und wann nicht und was getan werden muss. Wir haben zu Beginn dieses Kurses unsere Intuitionsbauübungen gemacht, als wir mit Kompositionen spielten. Jetzt haben wir unser Vokabular entwickelt, um über Grids zu sprechen. Arbeiteten fast immer in einem Team oder mit einem Kunden. Und in einem Team müssen wir gut kommunizieren. Wir brauchen ein gemeinsames Vokabular. Wir können jetzt über alle Anatomie und Arten von Gittern sprechen. Mit der modernen Webentwicklung werden Komponenten als einzelne Codestücke erstellt , die in verschiedenen Teilen einer Anwendung wiederverwendet werden können und unabhängig voneinander gewartet und ausgetauscht werden können . Aus diesem Grund haben wir jede Komponente auf unserer Seite ein eigenes Raster. 12. Richte du dich an: Als praktisches Beispiel für einige der Dinge, über die wir gerade gesprochen haben. Ich habe hier ein sechstes Säulenraster erstellt und werde es für einige Designs verwenden, die auf den sechs Spalten basieren , die ich drei vertikale Regionen erstellt habe. Jetzt hat jede Region tatsächlich eine andere Breite. Ich werde versuchen, die Originalspalten so weit wie möglich zu verwenden, da diese Regionen viel interessanter sind, um die Originalspalten so weit wie möglich zu verwenden, da diese Regionen viel möglich zu verwenden, da diese Regionen mit ihren variablen Breiten zu arbeiten , während sie sich immer noch einheitlich anfühlen basieren auf derselben Spaltenstruktur. Und ich weiß, dass es aus demselben Grund mit CSS funktionieren wird. Ich weiß, dass ich später etwas Polsterung für diese vertikalen Regionen brauche , also füge ich das einfach hinzu. Jetzt. Ich füge jedem dieser zehn Pixel Polsterung hinzu, die wir etwas später verwenden werden. Hier ist ein Teil des Textes, den ich für eines meiner typografischen Systeme in einem der früheren Module erstellt meiner typografischen Systeme in einem der früheren Module Ich habe ihn über zwei vertikale Bereiche erstreckt, die tatsächlich drei der ursprünglichen Spalten haben. Und das ist absolut in Ordnung. Jetzt füge ich nur eine Schachtel mit Farbe hinzu. Vielleicht denke ich, dass dies dazu beiträgt, mein Design auszugleichen oder so. Es sieht gerade ziemlich leer aus. Das kann ich nicht tun. Was ich hier gemacht habe, ist, dass ich die Box an die Außenseite meiner vertikalen Regionen ausgerichtet habe . Ich schaffe das nicht. Ich kann es nur nach innen ausrichten. Zum Beispiel wäre es völlig in Ordnung, es stattdessen hier zu positionieren . Realistisch gesehen werde ich es nicht hier ablegen. Ein guter Ort, um es auszudrücken, wäre offensichtlich hinter dem Text. Und dann wird sich diese Polsterung als nützlich erweisen. Jetzt habe ich links und rechts ein bisschen Polsterung , so dass der Text nicht mit dem Rand der Box gespült wird, was, wie wir bereits gesehen haben, vollkommen in Ordnung ist, solange wir sicherstellen, dass wir die gleiche Polsterung für verwenden alle nachfolgenden Texte in anderen Teilen der Seite. Derzeit denke ich, dass das ziemlich gut aussieht, aber es nutzt unser Grid nicht wirklich zu sehr. Ich habe tatsächlich zwei der vertikalen Regionen zusammen verwendet, was bedeutet, dass wir genauso gut ein Zwei-Säulenraster haben könnten. Zum Beispiel könnte ich hier einfach ein Bild auf der rechten Seite machen. Und das ist eine ziemlich schön angelegte Seite, aber so interessant ist es nicht. Wir könnten das Netz zu unserem Vorteil etwas besser machen . Vielleicht. Eine Sache, die wir tun könnten, um es sofort interessanter zu machen, ist, das Bild tatsächlich am Raster auszurichten. Und das ist eine ziemlich häufig verwendete Technik und Webdesign, aber es kann technisch ziemlich schwierig sein in diesem Beispiel hier zu erreichen Ich habe es geschafft, dass die Boote aus diesem Bild bequem passen in die Gosse zwischen meinen beiden Regionen. Dies ist ein Designer Student von mir, der mir kürzlich gezeigt hat, und ich dachte, es sei wirklich, wirklich beeindruckend, was man vielleicht nicht zuerst bemerkt , dass das Bild links und Der Text auf der rechten Seite verwendet fast das gleiche Raster. Sie sind beide zentral ausgerichtet. Es gibt eine Art Begrenzungsfeld auf beiden Seiten. Und das Bild hat tatsächlich einige Zeilen oben und unten wo der Abstand zwischen Teil des Textes beginnt und endet. Diese Seite ist fast vollständig symmetrisch, da genau das gleiche Raster für das Bild und den Text verwendet wird Es kann sehr, sehr schwierig sein, Bilder zu finden oder zu bearbeiten, damit sie perfekt dazu passen. Obwohl ich zurück zu meinem Design ziemlich zufrieden mit der Größe und der Positionierung des Bildes bin , aber es wird es ziemlich schwierig machen, diesen Text wieder in die Überschrift einzupassen . Nehmen wir an, für einen Moment bin ich sehr glücklich, den Hintergrund dunkel zu machen und die Texte leuchten und lassen Sie uns das umschalten. Dies ist eine andere Technik, die völlig in Ordnung ist, aber Sie sehen nicht immer zu oft, da Sie überprüfen müssen, ob Ihre Bilder gut funktionieren, aber Sie können Text absolut über ein Bild überlagern. Hier erstreckt sich mein Körpertext über eine meiner vertikalen Regionen. Mein Überschriftentext erstreckt sich über zwei und mein Bild erstreckt sich über. Es sind völlig andere vertikale Regionen. Es ist derselbe Inhalt, aber es ist optisch viel interessanter als das, wo ich ihn einfach von links nach rechts getrennt habe. Stellen wir uns vor, ich wollte das alles fallen lassen und hier eine seltsame Ikone einer Yacht oder etwas oben anbringen . Da ein Symbol auf sich allein gestellt ist und es eine obskure Form hat, kann es oft etwas schwieriger sein den Text oder die Bilder ähnlich wie wir gesehen haben , als wir Kompositionen direkt am beginne. Wir wollen nicht, dass der Punkt ganz oben auf dieser Yacht den Rand dieser Rasterlinie berührt. Es ist ein sehr, sehr winziges bisschen von der Ikone. Es kann sich ein wenig überlappen. Also möchten wir das vielleicht einfach über die Grenzbox schieben. Oder da es eine etwas knifflige Form ist, mit der man arbeiten kann. Wenn ich hier ein Symbol hinzufügen möchte, wäre es vielleicht besser , es in diesem vertikalen Bereich ein wenig zentral auszurichten. Nehmen wir stattdessen an, dass wir tatsächlich kein Bild zu diesem Design haben und wir verwenden den Text, um die beiden vertikalen Bereiche auf der linken Seite zu überspannen beiden vertikalen Bereiche auf der , wie wir es ursprünglich hier hatten. Jetzt möchten wir vielleicht das Icon hinzufügen. Wir möchten es vielleicht verwenden, um eine Art Anker zu verwenden, um zu versuchen das Gewicht von oben nach unten und von links nach rechts ein wenig auszugleichen . Wir könnten dieses Symbol tote Mitte auf der Grenzlinie unseres Rasters positionieren auf der Grenzlinie , so dass der Meister des Fehlers direkt auf dieser Linie liegt. Weil dieses Icon nur als eine Möglichkeit verwendet wird unsere Komposition ein wenig zu verankern. Das ist absolut in Ordnung, wenn es nicht genau im Raster sitzt. Und auch wenn wir typografische Interpunktion hinzufügen, wie wir in einem früheren Modul gesprochen haben, möchten wir, dass die Interpunktion so außerhalb unseres Rasters hängt. Leider ist das auch mit der Programmierung nicht so einfach zu tun. Und vielleicht möchten Sie einfach etwas wie Aufzählungspunkte einrücken , damit Sie nicht das Problem haben herauszufinden, was damit zu tun ist. Bevor wir ausführlich über Raster sprechen, sollten Sie diese Übung ausprobieren. Erstellen Sie ein einfaches Sechs-Spaltenraster. Stellen Sie sicher, dass sie gleich lang sind und gleiche Dachrinnen haben. Gruppiere einige von ihnen in vertikale Regionen. Fügen Sie den Seiten von jedem von ihnen etwas Polsterung hinzu, dann auf einer separaten Ebene und Ihrem Grafikprogramm und einigen Texten aus Ihrem bereits erstellten typografischen System. Versuchen Sie, einige Bilder, Symbole und alles andere hinzuzufügen , was Sie auf einer Seite sehen könnten. Und versuchen Sie, sie innerhalb des von Ihnen erstellten Rasters auszurichten. Und mal sehen, wie das aussieht. für eine zusätzliche Herausforderung, Versuchen Sie für eine zusätzliche Herausforderung, das vertikale Raster beizubehalten, das Sie bereits erstellt haben. Wenn Sie es erstellen, ist das typografische System. 13. Eingebettetes Raster: Ich hoffe, dass die Bewegung relativ produktiv war. Ich werde Sie in Kürze bitten, ein Raster und Layouts auf einer ganzen Seite zu erstellen . Aber bevor wir das tun, schauen wir uns einige etwas vollständigere Beispiele an. Und dann zeige ich Ihnen, wie Sie das Raster tatsächlich richtig erstellen können. Diesmal beginne ich mit einem 12-Säulenraster, aber ich werde es wieder in etwas weniger vertikale Bereiche vereinfachen , fünf vertikale Bereiche mit leicht unterschiedlichen Größen. Hier könnten potenzielle Elemente wie Text oder Bilder sitzen. Sie könnten eine vertikale Region zwei oder drei wie folgt ausgeben . Wie Sie sehen können, gibt uns dies möglicherweise einige Layoutoptionen, wo unsere verschiedenen Elemente sitzen könnten. Dies gibt uns viele verschiedene Möglichkeiten Dinge auf unserer Seite zu positionieren. Ich nehme dieses typografische System, das ich in einem früheren Modul erstellt habe, und ich werde versuchen, dies in eine Blogpost-Seite umzuwandeln. Ich mache das, indem ich einfach ein paar Bilder und vielleicht ein paar farbige Formen hinzufüge . Später. Ich beabsichtige, diese fünf vertikalen Regionen zu verwenden, die ich gerade erstellt habe, aber ich werde diesen Text und diese Bilder hinzufügen. Und das ist es, was ich mir ausgedacht habe. Nun, das erste, was ich wissen muss, ist, dass ich tatsächlich ein anderes Raster für diesen Überschriftenabschnitt mit einem dunkelblauen Hintergrund und einem der Bilder verwendet diesen Überschriftenabschnitt mit einem dunkelblauen Hintergrund und einem der Bilder Ich verwende eigentlich nur diese fünf Bereichsraster für den Textbereich weiter unten. Die Überschrift dieser Seite basiert auf demselben 12-Spaltenraster, verwendet jedoch tatsächlich zwei verschiedene vertikale Bereiche, die offensichtlich sechs links und sechs rechts sind. Wir werden in einem Moment noch ein bisschen mehr darüber sprechen. Aber schauen wir uns zunächst den eigentlichen Text an , der auf diesen fünf Regionen basiert. Wie Sie sehen können, hat es ein Gefühl der Konformität da es nur diese fünf Regionen gibt, auf denen es basiert, aber es hat immer noch ein gewisses visuelles Interesse, da sich verschiedene Elemente über verschiedene Regionen erstrecken. Und wie Sie sehen können, habe ich mich an das Raster gewöhnt, um Leerraumbereiche zuzulassen , insbesondere oben links im weißen Bereich. Und ich habe versucht, eine visuelle Balance mit der Art und Weise zu haben , wie die Bilder um den Text herum positioniert sind. Nehmen wir an, wir haben entschieden, dass die Zeilenlänge dieses Textes nur ein bisschen zu lang war. Hier ist ein weiteres Layout mit einer etwas begrenzteren Zeilenlänge. Und dann erlaubt es ein bisschen mehr Leerzeichen um den Text herum. der bevorstehenden Übungen willen, die wir machen werden, empfehle ich, ein Spiel zu machen und zu sehen, welche verschiedenen Optionen Ihnen tatsächlich zur Verfügung stehen. Versuchen Sie vielleicht, jeweils ein paar Versionen zu erstellen. Als Nächstes nehme ich dieses typografische System, das ich in einem früheren Video erstellt habe. Und dieses Mal werde ich versuchen, dies eher auf ein UI-Dashboard mit einigen Datendiagrammen und ähnlichem anzuwenden ein UI-Dashboard mit . Etwas komplexeres. Dieses Mal werde ich tatsächlich weniger Spalten haben. Ich bleibe bei sechs. Und dafür gibt es einen guten Grund , den wir in Kürze sehen werden, ist, dass ich tatsächlich verschiedene Raster einbetten werde. Ich werde dies in nur drei vertikale Regionen aufteilen und ihnen eine gewisse Polsterung geben. Und lasst uns unsere Inhalte da rein stecken. Vorläufig verwende ich nur Felder und Zeilen, um Text und Bilder darzustellen anstatt jede Menge Sachen hinzuzufügen. Nehmen wir an, wir wollten dieser Seite jetzt tatsächlich noch ein paar Sachen hinzufügen. Es ist nicht kompliziert genug. Wir wollen noch ein paar Dinge drauf. Nun, hier werden wir ein Raster einbetten, anstatt uns auf das Raster zu verlassen das wir für die gesamte Seite hatten , das entscheidet, wohin diese Komponenten gehen, und versuchen, mit diesen vertikalen Regionen zu arbeiten Ich werde hier ein ganz neues Gitter erstellen. Dies gibt uns ein bisschen mehr Kontrolle, bedeutet, dass wir mehr Dinge tun können, aber es ist auch viel einfacher, Laser zu entwickeln und funktioniert viel besser mit der Art und Weise, wie wir derzeit Websites entwickelt haben. Auch, nur weil ich es kann, und ich denke, dass es besser mit den Inhalten funktioniert , die ich gerade einbringen werde. Ich habe es zu einem Siebenspaltenraster gemacht, macht absolut nichts falsch daran, es zu einer ungeraden Zahl wie dieser zu machen. Ich habe das in fünf Siebtel und zwei Siebtel aufgeteilt . Und jetzt kann ich meinen neuen Inhalt hier neben dem Text hinzufügen . Dieser neue Inhalt und diese neuen vertikalen Regionen beziehen sich nicht unbedingt auf das Hauptkörperraster, das wir überhaupt erstellt haben. Aber es hat ein Gefühl der Einheitlichkeit weil wir die gleiche Rinnenbreite verwendet haben. Und wenn wir dabei Margen hätten, haben wir ähnliche Margen verwendet. Denken Sie daran, mit ansprechendem Design, dies die Bereiche sind, über die wir die Kontrolle haben. Jetzt bin ich mir sicher, dass du bereit bist zu gehen. Wir sprechen seit Ewigkeiten über Grids und Sie wollen wahrscheinlich verzweifelt ein Designprogramm eröffnen und anfangen, etwas zu erstellen. Aber halte einfach fest und sieh dir die nächsten paar Videos an. Ich werde ein wenig über die technischen Möglichkeiten sprechen , eine Designsoftware zu verwenden , um so etwas zu erstellen. Wir haben gerade zwei Beispiele im Blogbeitrag gesehen, die Überschrift der Blogbeiträge verwendete einen anderen Satz vertikaler Regionen als der Hauptteil des Blogbeitrags. Und in der eher Dashboard-Art des Layouts haben wir gesehen, wie Sie einfach ein separates Raster in Teile des Designs einbetten können . Wir werden heutzutage fast immer unser Design als individuelle Komponenten erstellen. Und diese Komponenten werden an verschiedenen Rastern arbeiten. Der Bereich, der ihnen ein Gefühl von Einheit und Konformität gibt, besteht darin, dass sie die gleiche Rinnenbreite oder ähnliche Rinnenbreite und -ränder haben . Öffnen wir unsere Designsoftware und beginnen Sie jetzt, diese zu erstellen. 14. Unser Raster aufbauen – Teil 1: Wenn Sie sich einige der Inspirationsgalerien ansehen oder wirklich erstaunliche Designarbeiten sehen. Vieles davon funktioniert leider einfach nicht in der realen Welt. Wenn wir dies also in Figma darlegen, möchten wir sicherstellen, dass wir etwas erstellen , das der Entwickler, wenn er es aufnimmt, tatsächlich etwas Reales damit schaffen kann und es wird tatsächlich arbeiten. Der Entwickler wird immer einige Designentscheidungen treffen. In diesem Stadium wird es immer Änderungen geben , weil Sie kein Design erstellen können , das vollständig in jeder Reaktionsfähigkeit und allem funktioniert . Es gibt immer einige Entscheidungen, die der Entwickler getroffen hat. Wir werden versuchen, die Anzahl der Entscheidungen zu reduzieren , zu denen wir sie gezwungen haben. Und ich werde in Figma arbeiten. Ich empfehle es erneut, dies als Ihre Software Ihrer Wahl zu verwenden . Und es gibt wieder verschiedene Gründe, die ich mich nicht einlassen werde, aber mach dir nicht zu viele Sorgen. Ich bin es nicht, das wird nicht erklären, wie man Figma benutzt, sondern nur die Dinge erklärt, die ich einschalte und verwende, um ein Raster zu erstellen. Für unsere Topographie haben wir also bereits ein vertikales Gitter wie dieses erstellt Ich habe ein vertikales Raster mit vier Pixeln. Wenn es uns besonders um die Lesbarkeit geht , werden wir wahrscheinlich nicht etwas haben, das genau vier Pixel für unser vertikales Raster ist, da es auf der Zeilenhöhe unseres Ideals basiert Körpertexthöhe, wie wir bereits in einiger Länge gesprochen haben. Denn einige Designsoftware lässt uns einfach nicht mit Drei-Punkt-Fünf-Pixeln oder ähnlichem arbeiten . Manchmal kann es sinnvoll sein, nur vier Pixel zu machen während wir das Design machen und erklärt dann dem Entwickler danach, alle Zahlen ein wenig angepasst werden müssen , wenn sie es erstellen, weil es nicht ganz anders aussehen wird , wenn Sie keinen großen Text in Ihrem Design lesen. Aber es wird einen großen Unterschied machen, wenn Sie es sind, ein Benutzer kommt, um den Text zu lesen. Wenn Sie also im Topographie-Modul für eine bestimmte Schrift entschieden haben, dass die beste Zeilenhöhe Ihnen tatsächlich ein Raster von 5,7 Pixeln oder etwas Unklarem wie diesem geben würde. Vielleicht mach es einfach sechs für das Design und sag dem Entwickler danach , dass du es angepasst hast. Wenn wir uns keine großen Sorgen um die Lesbarkeit machen, arbeiten die Leute gerne mit etwas wie vier Pixeln, da es ziemlich einfach ist , es auf 2,5 zu halbieren, falls sie es brauchen und verdoppeln arbeite damit auf diese Weise. Weil dieses Vier-Pixel-Layout-Raster für sehr, sehr körnige Dinge bestimmt ist. Ich werde es in ein Raster wie in vollen Zeilen und Spalten umwandeln . Jetzt benutze ich Figma. Wenn ich also eine Kunsttafel oder eine Komponente auswähle, kann ich dorthin kommen, wo Layout-Raster steht. Ich kann einen hinzufügen und ich kann zwischen Zeilen, Spalten und Körnung wechseln . Ich werde dieses volle Pixel als Raster haben. Jetzt können wir ein prominenteres vertikales Raster für größere Vielfache hinzufügen , sagen wir 16 Pixel, es ist viermal vier. Jetzt werden die meisten Elemente an diesem neuen 16-Pixel-Raster ausgerichtet . Aber wenn wir so etwas machen müssen, wie die Topographie-Linienhöhe trainieren und sicherstellen, dass kleinere Dinge wie diese passen. Wir haben dieses Vier-Pixel-Raster , das wir für das Design, das ich mit diesem Raster erstellen werde, wieder einschalten können , alle Ränder, alle Muster, sie werden alle ein Vielfaches von vier sein, aber idealerweise Vielfaches von 16, und das wird es noch einheitlicher machen. Jetzt schauen wir uns ein paar Spalten an. Also unser Beispiel, das wir gerade gemacht haben, hatten wir ein Säulenraster wie dieses. Jetzt machen wir diese 12 historisch gesehen , nur weil das die Einschränkung von CSS-Frameworks wie Twitter Bootstrap eingestellt war , die wir sollten, aber aus meiner Erfahrung sind es 12, eine ziemlich gute Zahl. Wie wir in unserem letzten Beispiel gesehen haben, werden wir kleinere Raster darin einbetten. Wir werden eigentlich nur dieses 12-Säulenraster verwenden , um zu positionieren, wohin unsere Hauptkomponenten gehen. Sie werden realistisch gesehen kein Text oder Bilder oder ähnliches sein, die direkt an diesem Raster ausgerichtet sind. Dies ist ziemlich wichtig, um sich daran zu erinnern denn wenn Sie jemals mit einem Druckdesigner sprechen , werden sie denken, nun, Sie haben nur plus 12 Säulenraster und Sie legen alles darauf. Und wenn man mit einem Webdesigner von vor mehr als ein paar Jahren spricht , könnte er das Gleiche denken. Aber die Art und Weise, wie wir Websites und Anwendungen jetzt entwickeln , bedeutet, dass die Komponenten tatsächlich keinen Zugriff auf dieses Raster haben. Sie haben tatsächlich ihre eigenen unabhängigen Netze, wie wir im letzten Video gesehen haben. Ein letzter Punkt in diesem Stadium, bevor wir weitermachen , ist, dass Sie ziemlich viele Raster bekommen werden. Es ist klar, dass Sie Gitter in verschiedenen Komponenten haben . Sie haben dieses vertikale Raster, Sie haben dieses granulare Raster, das vier Pixel eins. Und jetzt hast du diese Kolumnen. Überall gibt es Gitter. Jetzt benutze ich Figma. Wenn ich Control G halte, schaltet es alle Gitter aus. Und wenn ich Control G noch einmal halte, schaltet es sie alle ein. Wenn Sie eine Software für verschiedene Designs verwenden, gibt es wahrscheinlich einen anderen Schlüssel, um das Raster einfach schnell ein- und auszuschalten. Es ist wahrscheinlich das Gleiche. Ich kann natürlich auch jedes Raster unabhängig mit dem kleinen Augensymbol neben dem Raster ausblenden dem kleinen Augensymbol neben , wo Layout-Raster an der Seite stehen. Tot einfach. Ersten Schritt hier, nimm eines der typografischen Systeme, die du bereits erstellt hast. Nehmen Sie das vertikale Raster, das Sie dafür verwendet haben, multiplizieren Sie es dann mit etwa vier, um ein größeres vertikales Raster zu erstellen, an dem die meisten Ihrer Elemente auf der Seite ausgerichtet werden . Und dann erstellen Sie auch dieses horizontale Raster. Dies sind normalerweise 12 Spalten, muss es aber nicht sein. Und du kannst auch zurückkommen und das später ändern , wenn du herausfindest, dass es mit 12 nicht wirklich funktioniert hat. Sobald Sie mit dem Übersetzen der Seite beginnen, wird Ihre Übung einfach ein größeres vertikales Raster erstellt und das anfängliche horizontale Raster erstellt, möglicherweise etwa 12 Spalten. 15. Unser Raster aufbauen – Teil 2: Was ich hier habe, ist eine Seite mit einem 12-spaltigen Raster, das an den Seiten einen Rand von 48 Pixel hat, 32 Dachrinnen. Und das liegt daran, dass es ein vertikales Raster von 16 Pixeln hat. Dies wird nur verwendet, um diese beiden Hauptkomponenten zu positionieren. Dieser Gürtel auf der linken Seite , der offensichtlich eine Art Menü oder so sein wird. Und es gibt einen Bär auf der rechten Seite , der offensichtlich einige Dashboard-Charts enthalten wird und solche Sachen. Es gibt gelegentlich einige kleinere Komponenten wir möglicherweise direkt an diesem 12-Säulen-Raster ausrichten. Zum Beispiel habe ich hier ein Logo und eine Seitenüberschrift gesetzt. Lasst uns die reinlegen. Für die anderen beiden Komponenten. Die Sache, die offensichtlich ist, dass Sie ein Menü auf der linken Seite sein werden. Und die Sache, die offensichtlich ist, dass Sie den Seiteninhalt auf der rechten Seite haben werden. Ich habe sie zu Komponenten gemacht. Ich habe zwei Kästen gezeichnet, die am ursprünglichen 12-Säulenraster ausgerichtet sind. Ich habe einen von ihnen ausgewählt und oben auf die Schaltfläche „ Komponente“ geklickt. Und das gibt mir jetzt die Möglichkeit, jeder dieser einzelnen Komponenten meine eigenen Layoutraster hinzuzufügen meine eigenen Layoutraster . Wir könnten den gleichen Effekt in Figma mit Zeichenflächen erzielen. Der Vorteil einer Komponente besteht jedoch darin, dass wir einige dieser Bits wahrscheinlich nicht auf anderen Seiten wiederverwenden werden , wenn wir den Rest unserer Designs erstellen . Jetzt haben sie für diese beiden neuen Komponenten ihre eigenen Spalten und Reihen sowie Ränder und Dachrinnen. Und denken Sie natürlich daran, die Ränder und Dachrinnen alle Vielfaches von vier und idealerweise Vielfachen von 16 sind vier und idealerweise Vielfachen von , denn das ist das, worüber wir die Kontrolle haben. Das ist es, was es dazu bringt, sich einheitlich anzufühlen. In diesem gegenwärtigen Stadium könnte dies eine Vorlage sein. Dies könnte eine Vorlage sein, die wir auf mehreren Seiten verwenden , um sicherzustellen, dass sie ein ähnliches Layout haben. Ich könnte das auf eine Seite stellen und eine Kopie davon machen und dies einfach die Master-Vorlage für meine App nennen. Jetzt werde ich diesen rechten Abschnitt in verschiedene Komponenten aufteilen . Und wieder mache ich ihnen Figma-Komponenten, damit ich ihnen ihre eigenen Ränder und Dachrinnen geben kann. Die Anzahl der Spalten hier könnte unterschiedlich sein. Es müssen hier nicht drei oben sein. Es könnten vier sein, es könnte alles sein. Es muss sich in keiner Weise auf die ursprünglichen Spalten beziehen , die wir auf der Seite hatten. In diesem Beispiel habe ich es drei gemacht, um Ihnen einen sehr wichtigen Punkt zu veranschaulichen , nämlich dass wir einen Abstand zwischen den Komponenten unten haben und eine Dachrinne an den Komponenten im oben. Und diese sind nicht perfekt ausgerichtet. Wir können sie nicht dazu bringen, immer perfekt ausgerichtet zu sein. Dies ist nur einer der Verluste ein reaktionsschnelles Raster zu haben. Es gibt nicht die gleiche Menge an starrem Raum und Fluidraum. Und so werden wir nie in der Lage sein , diese perfekt zu passen. Jetzt kann ich einige tatsächliche Sachen in mein Menü auf der linken Seite hinzufügen, sicherstellen, dass es gut an meinem Raster, einigen Texten, einigen Symbolen passt . Ich kann ein paar Sachen in dieser oberen Komponente und der rechten und in der unteren Komponente ausrichten dieser oberen Komponente und der . Und ich werde hier auch eine weitere Unterkomponente in diese untere Komponente legen . Was wir jetzt haben, ist, dass eine weitere Box in dieser Box befindet, die auch ihre eigenen Ränder haben wird. Es ist seine eigene Komponente. Jetzt stimmt der Inhalt der Unterkomponenten nicht wirklich mit irgendetwas anderem auf der Seite überein, sich aber immer noch einheitlich an und fühlt sich immer noch konform weil wir ähnliche Ränder um diesen Rand verwendet haben ist immer noch ein Vielfaches von vier. Und so gibt es einige Dinge, die nicht aufeinander abstimmen. Aber ich habe insgesamt das Gefühl , dass das Design dieses Konformitätsgefühl hat, aber es hat auch diesen Bereich von Spielraum. Es gibt Bereiche der Fluidität. Wenn ich einfach die rechte Seite des gesamten Designs ergreife, kann ich es dehnen, ich kann es schrumpfen und sie sind alles immer noch funktioniert. Aber beachte, dass ich es hier nur dehnen und auf engstem Raum schrumpfen kann , weshalb ich diese lila Schachtel hinter das Design gelegt habe. Für diese zweite Stufe beim Erstellen Ihres Rasters erstellen Sie einige Komponentenraster. Positionieren Sie einige Komponenten in den Rastern, Sie erstellen sie im letzten Video, Ihrem vertikalen und Ihrem horizontalen Hauptraster. Und geben Sie jeder dieser Komponenten ihr eigenes Raster mit eigenen Rändern und eigenen Dachrinnen. Versuchen Sie, universelle Messungen für diese Rinnen und Ränder zu verwenden , die Sie bereits in Ihrem gesamten Design verwendet haben . Idealerweise Vielfache des vertikalen Rasters , das Sie ursprünglich erstellt haben. Experimentieren Sie ein wenig damit, wie diese Komponenten auf die Seite passen und wie sie Raster funktionieren, und fügen Sie dann etwas Inhalt hinzu. Du könntest zum ursprünglichen Wikipedia-Artikel zurückkehren aus dem du deinen Text abrufen kannst. Oder Sie könnten einfach eine Anwendung öffnen , die Sie regelmäßig verwenden , und kopieren Sie einfach den Text als Bilder und Symbole und ähnliches daraus. Sie sich keine Sorgen, wenn der Inhalt keinen Sinn ergibt. In diesem Stadium lernen wir, wie Dinge in unser Raster ausrichten können. Und wir lernen auch, die Fähigkeiten zu nutzen , die wir im ersten Modul erstellt haben, eine gut aussehende Komposition zu schaffen , die ausgewogen ist und all diese anderen Dinge. Also bitte zögern Sie nicht, Spaß zu haben und damit zu experimentieren. 16. Unser Raster aufbauen – Teil 3: Werfen wir einen Blick darauf, wie wir unser Raster reaktionsschneller gestalten können , um dies ein wenig zu vereinfachen und es einfacher zu verstehen. Diesmal habe ich das gerade zu einem Sechsspaltenraster gemacht. Aber was ich auch tun werde , ist, dass ich sagen werde , wenn es auf einem Tablet ist, wird es tatsächlich drei Spalten sein. Und wenn es auf einem Handy ist, wird es eine Spalte sein. Wir können nie wirklich mit Sicherheit sagen , ob jemand auf einem Mobiltelefon, einem Tablet oder einem Desktop ist, und es ist auch nicht wirklich das Wichtigste. Wir sprechen eigentlich nur über die Breite des Browserfensters. Diese drei Designs sind tatsächlich 600 bis 900 Pixel, neunhunderteinhundert, einhundert, zehnhundertzweihundert Pixel und 1201 bis 1600 Pixel. Für alles unter 600 Pixel wird es keine Änderung geben. Und für alles über 1600 haben wir nur größere variable Ränder auf der linken und rechten Seite. Unter 600 oder mehr als 1600 ist nichts fließend, alles ist statisch. Und dann haben wir zwischen jedem dieser Abschnitte haben wir zwischen jedem dieser das Kanalsperrsystem. Wir haben darüber gesprochen. Es gibt ein bestimmtes Element des flüssigen Designs zwischen sechshundert und neunhundert, zum Beispiel möchten wir nicht, dass unsere Typografie wächst und schrumpft, wenn das Browserfenster wächst und schrumpft weil wir bereits sorgfältig gute Zahlen für die Lesbarkeit erarbeitet haben. Aber bestimmte Dinge auf unserer Seite werden sich dehnen und zerquetschen. Um dies ein bisschen leichter zu erkennen, habe ich hinter der rechten Seite jedes dieser Designs eine violette Schachtel hinzugefügt , damit wir den Raum sehen können , in den er einziehen muss. So zum Beispiel auf dem größten Design, das offensichtlich für einen Desktop-Bildschirm wäre , von wo etwa die 1201-Pixel-Marker bis zu dem 1600-Pixel-Marsch es markiert. Es gibt diese lila Schachtel. Auf diese Weise kann ich mein Kunstbrett leicht zwischen diesen beiden Haltepunkten dehnen und verkleinern und sehen, wie diese Spalten anders aussehen werden. Und sobald ich Inhalte der Seite hinzugefügt habe, kann ich sehen, wie sie bei etwas unterschiedlichen Breiten anders aussehen werden . Für jede der Boxen habe ich jedem dieser drei Layouts hinzugefügt . Ich habe die Beschränkungen ausgewählt , um links und rechts zu sein. Dies bedeutet, dass diese Komponenten den Einschränkungen bleiben, wo sich dieses Stützenraster befand. Diese Haltepunkte habe ich dem Master-Raster mit 900 Pixeln hinzugefügt , wo es zwischen 13 Spalten und bei 1200 Pixeln wechselt, wo es von drei auf sechs Spalten wechselt. Dies sind relativ Standardpositionen für die Bremsen, damit die Anzahl der zu ändernden Säulen auftreten kann. Wenn es bei Ihrem Design sinnvoller dass sie an einem anderen Punkt brechen, können Sie sie nicht in genau diese Besitztümer stecken. Und natürlich können potenziell verschiedene Seiten auf Ihrer Website auch an etwas anderen Stellen Haltepunkte haben, wenn dies sinnvoll ist. Aber seien Sie sich bewusst, dass dies der Entwicklungsarbeit weitere Komplikationen bereiten wird und vom Rest des Designteams kommuniziert und verstanden werden muss . Wenn wir uns das Layout von Komponenten in diesen drei Ansichten mit unterschiedlicher Breite ansehen , können wir sehen, dass einige der Komponenten von der Hälfte des der Komponenten von der Rasters auf die gesamte Breite von das Gitter und ähnliches in verschiedenen Breiten. Werfen wir einen Blick auf eine bestimmte Komponente. Hier haben wir eine Komponente, die sich über die halbe Breite des Designs erstreckt . Und es wird ein eigenes Raster haben. Ich habe eine einzelne Zeile und eine einzelne Spalte mit einem Rand von 16 Pixeln eingeschaltet . 16 Pixel sind während des gesamten Designs, das ich erstelle, ziemlich einheitlich. Jetzt muss alles in dieser Komponente innerhalb dieses Rasters funktionieren. Diese Komponente könnte auch mehrere Zeilen oder mehrere Spalten haben . Und wenn ja, hätte es eine einheitliche Rinnenbreite, die ein Vielfaches von vier Pixeln betragen würde. Ich habe etwas Text ausgerichtet und ich habe Rechte ein Tortendiagramm ausgerichtet. Und in Figma in den Abhängigkeiten ist der Text auf links beschränkt und das Kreisdiagramm ist auf Beschränkung eingestellt, oder? Das bedeutet, dass ich jetzt sehen kann, wie diese Komponente innerhalb der Flüssigkeitsbeschränkungen dieses aktuellen Designs aussieht . Das große Design ist 400 Pixel lang flüssig und dies ist die halbe Breite. Deshalb ist es für 200 Pixel flüssig. Ich möchte nur überprüfen , ob das innerhalb dieses Bereichs von 200 Pixeln funktioniert . Nehmen wir an, wenn unsere Seite nur drei Spalten breit ist, ist diese Komponente nur eine dieser Spalten, also ist es ein Drittel der Seite. Dies wird die Breite der Komponente dramatisch verkleinern. Vielleicht ändert sich das Layout, vielleicht ist jetzt nur der gesamte Inhalt übereinander und er ist zentral ausgerichtet. Natürlich arbeitet es immer noch innerhalb der Margen. Und dann sagen wir, wenn die Browserbreite unter 900 Pixel liegt, rastet diese Komponente vielleicht in voller Breite ein, da es zu voller Breite ein, da es diesem Zeitpunkt nur eine Spalte gibt, wie wir bereits wissen. Dies bedeutet tatsächlich, dass das Layout für diese Komponente auf mobilen Wänden identisch ist und auf Tablets tatsächlich etwas anders ist, oder ich sollte etwas anders sagen, zwischen neunhundert und einhundert, zehnhundert, zweihundert Pixel. Aber die tatsächliche Position, die es schnappt befindet sich irgendwo zwischen hier und hier. Nun könnte es sein, dass der Punkt, an dem sich das Layout dieser Komponente ändert, tatsächlich irgendwo zwischen 901.200 Pixeln liegt, womit ich den Punkt meine, an dem es sich um sechs Spalten handelt drei Spalten für das Seitenlayout sind nicht unbedingt die genaue Position , an der sich das Layout dieser einzelnen Komponente ändert. Um die Entwicklung zu erleichtern und auch mit anderen Designern zu kommunizieren, würde ich normalerweise versuchen , dies zu vermeiden. Beachten Sie auch, dass ich die Topographie für die mobile Version der Komponente kleiner gemacht die mobile Version der Komponente als für die Desktop-Version der Komponente. Denn wie wir bereits wissen, arbeite ich in einem Designprogramm auf meinem Computerbildschirm. heißt, ich arbeite mit den Referenzpixeln meines Desktop-Bildschirms. Ich betrachte die Designer nicht auf meinem Mobiltelefon, das natürlich kleinere Referenzpixel haben wird. Dies ist ein etwas fortgeschritteneres Thema und nicht etwas, das Sie immer oft begleiten werden. Der Entwickler wird zur Entwicklungszeit einige Urteilsrufe darüber treffen Entwicklungszeit einige Urteilsrufe darüber treffen wie es funktioniert verschiedene Breiten. So kann alles hineinpassen. Wir möchten jedoch so viel wie möglich als Designer helfen. wir also sicher, dass wir mindestens eine andere Version erstellen. Nehmen Sie das Design, das Sie im letzten Video erstellt haben, und erstellen Sie diesmal ein neues, aber eine viel engere Ansicht. Vielleicht hat es eher zwei Spalten als die ursprünglichen 12. Fügen Sie dieser neuen Ansicht nun dieselben Komponenten hinzu, die Sie im letzten Video abgeben. Sie werden also viel schmalere Komponenten sein. Und vielleicht möchten Sie darüber nachdenken, alles in diesen Komponenten auf IVR links, rechts oder links, rechts zu beschränken alles in diesen Komponenten auf IVR links, rechts oder links, , damit Sie die Zeichenfläche leicht anpassen und sehen können , wie sie aussieht zum Beispiel ein etwas breiteres Telefon oder ein etwas schmaleres Telefon. Wenn Sie die ganze Zeit und das gesamte Budget der Welt haben, können Sie in diesem Video tun, was ich mit einzelnen Komponenten gemacht habe, in dem ich überprüft habe, ob es auf jeder möglichen Breite funktioniert . 17. Zusammenfassung: Ein einheitliches Raster wird unseren Entwürfen sofort ein Gefühl der Konformität geben . Indem wir unsere Elemente an einem Raster ausrichten. Wir erleichtern nicht nur das Leben unseres Entwicklers, eine der einfachsten Änderungen vor , die der Designer vornehmen kann, um die allgemeine Ästhetik eines Designs drastisch zu verbessern. Wir sind dabei, unser eigenes Raster zu erstellen , das wir mit unserem Design verwenden können. Aber zuerst müssen wir ein paar Dinge darüber verstehen , wie modernes CSS funktioniert. Und im nächsten Abschnitt erfahren wir ein wenig mehr darüber wie sich moderne komponentenbasierte Entwicklung Verwendung von Rastern im Design auswirken wird. Meiner Meinung nach ist die Welt des Designs und der Entwicklung beide zu kompliziert geworden, um beides zu beherrschen. Um jedoch mit Rastern zu entwerfen, müssen wir CSS Flexbox und CSS-Grid verstehen , die wir in diesem Abschnitt betrachtet haben. Jetzt können Sie aufhören, ein Raster für Ihr Design zu erstellen.