Workflow des modernen Webdesigns → Ideenfindung, Wireframing, Mockups und Prototypen

1. Einführung: Mit Responsive Web Design, adoptivem Webdesign und Hunderten von Online-Design-Apps hat sich in den letzten Jahren viel mit dem Webdesign-Prozess verändert. Designer, sie skizzieren, sie Wireframe, sie Prototyp, sie arbeiten sogar mit ihren Entwicklern zusammen, sie generieren sogar Style-Guides online für ihre Entwickler. Wir werden diesen ganzen modernen Prozess des Webdesigns während dieses Kurses behandeln also lassen Sie mich Ihnen zeigen, was wir in diesem Kurs ausführlich behandeln werden. In diesem Kurs werden wir ein reaktionsfähiges Website-Projekt von Grund auf entwerfen, bei dem Informationen von Kunden erhalten, Design Briefs studieren, Ideation oder zumindest Skizzen, Wireframing, und dann Mockup oder Web-Design für große, mittlere oder kleine Bildschirme zusammen mit dem Einstellen und Berechnen von Gittern, und schließlich werden wir Spezifikationen und Styleguides für unsere Entwickler erstellen. Am Ende für die Flows und Interaktionen werden wir einen einfachen Prototyp mit der InVision App erstellen. Ich werde Ihnen auch einige Design-Ansätze und Frameworks wie Atomic Design, Design mit Content-First-Ansatz, Responsive Web Design Überlegungen und Design für Entwickler zeigen. Die Werkzeuge, die wir während dieses Prozesses verwenden werden, sind Balsamiq Mock-ups für die Erstellung von Wireframes. Dann, Adobe Photoshop für die Erstellung Ihrer Web-Design oder Mock-ups für große, mittlere und kleine Bildschirme. Dann werden wir Zeplin verwenden, um Online-Styleguides für Entwickler zu erstellen, und am Ende werden wir einen einfachen Prototyp mit der InVision App erstellen. Nun, welche Probleme werde ich in diesem Kurs lösen? Wie Sie sich in den Kopf Ihres Kunden zu bekommen, und wo Sie Design-Inspirationen erhalten, um Ihr Design zu beginnen, und wie Sie Ihr Raster für verschiedene Bildschirmgrößen berechnen und wie Sie Anleitungen für verschiedene Bildschirmgrößen einrichten, benötigen Inhalte vor dem Entwerfen, und kann mein Design leicht in Code konvertiert werden, was sind die neuesten effizienten Ansätze für responsive Webdesign? Ich werde all diese Fragen während dieses Kurses beantworten. Dieser Kurs ist nicht für Anfänger in Photoshop gedacht. Wenn Sie ein Anfänger waren, sollten Sie sich meine anderen UI-Design-Kurse ansehen. Hallo, ich bin Ahsan [unhörbar] und entwerfe UIs aus den letzten acht Jahren und ich bin Freiberufler. Wenn Sie meinen Prozess der Erstellung atemberaubender Web-Designs und Responsive Web-Design mit Kunstboards lernen atemberaubender Web-Designs und Responsive Web-Design möchten und wie Sie eine coole freundliche Website erstellen werden, dann sollten Sie diesen Kurs nehmen. Lass uns dich in diesem Kurs sehen. 2. Was wir in diesem Kurs behandeln werden: Lassen Sie mich Ihnen ein wenig ausführlich zeigen, was wir in diesem Kurs behandeln werden. Am Ende werden wir im Grunde entwerfen diese responsive Website für Tablet-, Mobil- und Desktop-Ansichten zusammen mit der Erstellung ihrer Raster Sie hier sehen können, ist es vier Spalten Raster. Dann haben wir acht Säulenraster für Tablet. Lassen Sie mich es Ihnen zeigen. Wir haben 12-Säulen-Raster für unseren Desktop. Abgesehen davon werden wir auch diese gerade Linie Dokumentation erstellen. Sie können hier die Abstände und Spezifikationen für unsere Entwickler sehen. Darüber hinaus werden wir auch unseren UI-Styleguide entwickeln. Sie können hier alle Farben, Verläufe, Topographie, Muster, Ikonographie, Formularelemente, UI-Elemente, alles, was wir mit dem Styleguide entwerfen werden, sehen. Während unseres Entwurfsprozesses werden wir weitere Boards erstellen. Sie können hier drüben sehen, ich habe noch ein Brett hier erstellt. Dann werden wir am Ende einen Styleguide erstellen , der mit Zeplin sein wird. Sie können hier sehen, ist der ganze Code, Farben, Schatten und alle Textilien, die hier generiert werden. Dann werden wir auch einen Prototyp für Flows oder Animationen erstellen , die Ihren Entwicklern zeigen, dass dies das ist, was ich gemeint habe. Sie können hier sehen, wie diese Navigationsleiste herauskommt und ausgeblendet wird. Einige der Designkonzepte, die ich abdecken werde, sind atomares Design. Hier können Sie sehen, wie wir mit der Chemie von Atomen, Molekülen, Organismen, Vorlagen und Seiten entwerfen werden. Auch werden wir mit diesem 8-Punkt-Gittersystem entwerfen, das von Google Material Design entlehnt wird und ich werde Ihnen zeigen, wie wir diese Skala von 8-Punkt-Gittersystem in unseren Entwürfen verwenden werden. Teil des Teils, den wir behandeln werden, stammt von UX, das wird unsere Idee oder Skizze sein und Details von Ihren Kunden bekommen und wie wir erste Skizzen von unserem Kunden bekommen werden, wie wir Drahtmodelle entwerfen werden, und wie wir unsere Wireframes in Mock-Ups übersetzen werden. Wie wir diese Mock-Ups in Style-Guides liefern und dann codierte Styleguides für unsere Entwickler am Ende. Wenn Sie Vorschläge zu diesem Kurs haben, können Sie mich direkt fragen, Sie können mir eine Nachricht senden, Sie können alle Fragen stellen, die Sie mögen. Wenn Sie irgendwo stecken oder eine Lektion hinzugefügt werden soll oder Sie möchten, dass Sie mehr Details zu diesem Thema wünschen, lassen Sie mich wissen, dass ich Ihnen helfen werde. Lasst uns loslegen. 3. Die Requriements: Beginnen wir jetzt mit dem, was wir für diesen Kurs brauchen werden. Wir werden zwei Dinge brauchen. Eins ist Ihr Skill-Level und zweitens ist die Software wie Photoshop. Wir brauchen Photoshop CC neueste Version jetzt ist es 2017. Ich weiß nicht, wann du diesen Kurs kaufst. Es könnte 2018 oder etwas anderes sein. Die neueste Photoshop-Version, können Sie die Testversion von Photoshop herunterladen oder Sie können ihre Fotografie, monatlich verpackte CC-Paket kaufen . Versuchen Sie nicht, für einzelne App zu gehen, wir brauchen nur monatliches Foto-Paket. Es ist nur für $10 pro Monat. Nun, was in Bezug auf Fähigkeiten, was wir brauchen werden, ist, dass wir zumindest die Fähigkeiten, die ich in meinem UI-Design in Photoshop-Kurs geschrieben habe, benötigen . Sie können auf diesem Bildschirm jetzt sehen. Sie müssen zumindest wissen, wie Sie Photoshop für das UI-Design einrichten und wie Sie Photoshop verwenden, wie Sie benutzerdefinierte Tastenkombinationen einrichten und Erweiterungen, Ressourcen, Skripte und alles installieren. Ich denke, die ersten zwei oder drei Abschnitte, müssen Sie wissen, wie man diese Dinge macht, bevor Sie diesen Kurs beginnen. Auch, wenn Sie sich Sorgen über Typographie-Kombinationen machen, müssen Sie meinen diesen Kerl Typografie Kurs für Ihre Designer nehmen. Ich werde Ihnen nicht alle Tipps und Tricks zeigen, wie ich das Falsche für dieses Design ausgewählt habe. Dieser Kurs behandelt insbesondere alle Schritte und den Prozess eines modernen Web-Designers vom Designprozess bis hin zur Handhabung der Entwickler. Auch wir werden einige der Codierungs- und Styleguides in diesem Kurs produzieren. Es gibt viele Tonnen von Informationen in diesem Kurs. Verpassen Sie es nicht, und fangen wir an. 4. Photoshop die wir brauchen: Bevor wir mit unserem reaktionsfähigen Webdesign und dem modernen Webdesign-Workflow von Photoshop beginnen, zeige ich Ihnen einige der Plug-Ins und Skripte, die wir während dieses Kurses benötigen. Werfen wir einen Blick auf sie und ich werde Ihnen sowohl die freien als auch die bezahlten zeigen. Nun, von hier an werde ich nicht alles erklären, was ich weiß, dass Sie Experte sind, zumindest wenn Sie Photoshop behandeln. Wenn Sie kein Experte sind, sollten Sie einige andere Kurse sehen, die UI-Design in Photoshop und Typografie für typografische Kombinationen und die Auswahl der richtigen Schriftart und Schriftart für Ihr Projekt. Lassen Sie uns anfangen, ich werde Ihnen die meiste Zeit zeigen, die freien und die wichtigsten, die wir während dieses ganzen Kurses brauchen werden . Mal sehen, was wir haben. Nun, das erste Plugin, das ich Ihnen zeigen werde, ist dieses UberFaces für die Anzeige von Avatar-Symbolen und Gesichtern der Menschen. Sie können verschiedene Fotos in Photoshop für hauptsächlich die Portrait- und Avatare in Ihr UI-Design einbringen . Ähnlich ist diese, das ist im Grunde ein randomuser.me. Sie haben Photoshop-Erweiterung, Sie können die neueste herunterladen. Dann haben wir diese Tinte. Wir werden Spezifikationen für unsere Entwickler generieren, Sie können dieses Beispiel hier sehen, die Höhe und Breite der Elemente und auch die Kraft. Sie können hier drüben sehen, es wird die Kraft hier drüben zeigen. Dann werden wir diesen Gridify brauchen. Dies ist wirklich das am meisten benötigte Plugin während meines Kurses. Du brauchst das hier wirklich. Dann können Sie auch diese Font Awesome PS installieren. Manchmal brauchen wir ein paar Icons aus der Font Awesome Bibliothek, die im Grunde für Entwickler und Bootstrap ist. Vier andere, die ich hier erwähnen werde, sind die Plugins, die wir nicht wirklich brauchen, aber sie sind genial. Einer von ihnen ist dieser GuideGuide. Es kostet $10 und es ist eines der besten, die ich gesehen habe, um Ihre Noten und Führer zu legen. Dann haben wir diese Subtile Patterns, um verschiedene Muster in Photoshop zu bringen. Dann haben wir den CSS Hat 2, um ihn für verschiedene CSS zu bringen und zu verwenden. Generieren Sie sofort CSS-Farben, Verläufe für Ihre Photoshop-Ebenen und -Elemente. Dann für wieder, Entwickler-Spezifikationen, können Sie sehen, dass dies eine andere ist. Diese werden als rote Linie Spezifikationen bezeichnet, die Sie hier sehen können. Meistens müssen unsere Entwickler wissen, was sind die Abstände zwischen verschiedenen Elementen von oben und was sind die Breiten und Höhen dieser Elemente wie Tasten. Das ist also einer von ihnen, aber das ist ein bisschen kostspielig. Wir werden das kostenlose benutzen, Ink. Versuchen Sie, meinen Schülern die kostenlosen Plugins zuerst zu geben, weil ich denke, Sie sollten nicht zu viel für den Kauf von Plugins ausgeben, wenn es eine gute kostenlose Alternative gibt. Wenige andere Plugins, dieses exportiert auch Photoshop-Ebenen, aber wir werden Photoshop-Export-Panel stattdessen verwenden, also vielleicht, wenn Sie dieses mögen oder Sie für iOS oder Apple entwerfen, dann können Sie 2X oder 3X Ausgabe für Retina-Bildschirme extrahieren, dann haben wir noch ein paar Plugins wie dieses. Dies ist Renamy, und das ist für SVG-Dateien, SVG-Dateien exportieren, hauptsächlich für Symbole. Dann exportieren Sie SVG-Symbole, sie werden sich leicht erweitern und zusammenziehen, sie sind Vektorformen. In HTML und Programmierung werden sie wirklich Ihren Entwicklern helfen, anstatt PNG-Dateien zu exportieren. Dann haben wir noch ein paar Dinge, die ich dir zeigen werde. Jetzt für den Installationsteil der Plugins, werde ich Ihnen einige der Artikel zeigen, die Sie wissen müssen. Wenn Sie also meinen vorherigen Kurs, das UI-Design in Photoshop,nicht gesehen UI-Design in Photoshop, müssen Sie ihn wirklich sehen oder nehmen. Sie werden den Rabattcode für meine anderen Kurse am Ende dieses Kurses finden Wenn Sie also diesen Kurs absolvieren müssen, sollten Sie ihn nehmen. In diesem Kurs habe ich Ihnen den gesamten Prozess der Installation verschiedener Photoshop CC-Plugins in Mac oder sogar Windows-Betriebssystem gezeigt , und wie Sie dieses ZXP-Installationsprogramm verwenden , um verschiedene Plugins in Photoshop CC 2017 zu installieren, und auch, wie Sie es manuell installieren werden. Ich werde diese beiden Links die meiste Zeit teilen, versuchen, die Anweisungen eines Plugins, das Sie herunterladen zu lesen, weil ich eine Menge von meinen Studenten gesehen habe, die mir Fragen stellen und wenn ich ihnen sage „Haben Sie die Readme-Datei gelesen oder Installationsanweisungen?“ Dann sagen sie: „Oh, ich habe vergessen, es zu lesen. Ich bin nicht in der Lage, es zu installieren. Jetzt habe ich es installiert.“ Bevor Sie sich mit mir in Verbindung setzen oder mir Fragen stellen, versuchen Sie, die Installationshandbuch sorgfältig zu lesen und folgen Sie den Schritten. Dies sind alle Plugins, die wir brauchen werden, ich werde am Ende noch einmal wiederholen. Die vier oder fünf Plugins, die wir wirklich brauchen, ist dieses Uber-Plugin, UberFaces. Entweder können Sie UberFaces oder diesen zufälligen Benutzergenerator verwenden. Ich mag diese UberFaces mehr. Dann sind wir wirklich brauchen diese Tinte, und auch diese Gridify, und diese Font Awesome Photoshop. Wenn du andere kriegen kannst, liegt es an dir, aber ich empfehle nicht, zu viel für sie auszugeben. Nun gehen wir zur nächsten Lektion, in der ich Ihnen meine Setup-Photoshop-Oberfläche zeigen werde . Ich werde mit viel Geschwindigkeit gehen, weil all diese Dinge, die ich in meinem UI-Design Photoshop-Kurs besprochen habe , der für Grundlagen und Profis oder sogar Experten ist, also lassen Sie uns mit der nächsten Lektion fortfahren. 5. So organisierst du ein to: In dieser Lektion werden wir über die Ordnerorganisation sprechen. Viele Designer, die ich gesehen habe, sie versuchen normalerweise, ihre PSD in verschiedenen Ordnern anzuordnen und alles ist verstreut, sie finden nicht die Schriftarten oder die verwendeten Assets. Am Ende ist es also ein sehr großes Chaos, wenn Sie mit einem Team oder einem Entwicklungsteam oder einem Projektmanager arbeiten , müssen Sie sehr gut darin sein, Ihre Sachen zu organisieren. Lassen Sie mich Ihnen zeigen, wie ich normalerweise meine PSDs und Assets und verschiedene Dateien organisiere. Zuerst erstellen wir einen Ordner mit dem Namen des Projekts, wie Wstudio Design oder Sie können ihn auch mit dem Namen eines Kunden nennen, und Sie können auch mehrere Projekte in einem einzigen Client-Ordner erstellen. Wenn Sie also viel Arbeit von einem einzelnen Client erhalten, können Sie den Namen des Clients erstellen und dann mehrere Projektordner erstellen. Also benennen Sie sie, Sie können auch das Datum kennzeichnen. So ist es wie 2017, also weiß ich, dass ich es im Dezember 2017 oder November 2017 gemacht habe. Sie merken sich, dass Sie am Ende, wenn Sie es finden müssen, leicht finden können, dass ich es im Jahr 2017 getan habe. Jetzt ist hier ein Beispiel dafür, wie ich den Ordner eines Clients benennen werde. Hier ist der Name meines Kunden und darin habe ich ein Design-Projekt von diesem Client und wenn ich in dieses Design-Projekt gehe, können Sie sehen, dass es verschiedene Ordner gibt, den Inhalt der Website, den schriftlichen Inhalt, Text und Kopie, Ich werde es draußen behalten. Auch, dass US-Style Guide, die wir am Ende erstellen werden, Moment müssen Sie sich keine Sorgen darüber machen, nur Sie werden diese beiden draußen zu halten. Dann das Wireframe, finden Sie Ordner für die Wireframes, Sie können hier sehen, ich habe einen Wireframe. Dann haben wir alle PSDs mit ihren Vorschauen, also stellen Sie sicher, dass Sie immer eine Vorschau jeder Datei erstellen, die Sie entwerfen, weil manchmal nur den Namen Entwickler oder vielleicht Projektmanager betrachten, werden sie nicht bekommen, was diese -Datei ist alles über. Nur wenn sie sehen, dass es eine kleine Vorschau ist, wissen sie, dass dies das große Design ist. Sie können auch sehen, ich habe sie landingpage_lg genannt, lg steht für große, die meisten Entwickler kennen diesen Begriff, aber immer noch, wenn sie diesen Begriff nicht kennen werden Sie eine Vorschau generieren und sie werden die Vorschau und sofort wissen, dass diese Datei ist Medium für mittlere Bildschirm oder großen Bildschirm oder kleinen Bildschirm. Nun in der Inspiration, es ist im Grunde Ihr Moodboard oder die Inspirationen, Sie können hier sehen, ich habe eine Menge, Sie können sehen, wie ich Inspirationen von verschiedenen Fotos und Bildern bekam, Sie können hier sehen, ich habe die Bilder gemacht der Website so wie, Ich mache Screenshots. Sie können hier sehen, hier ist ein anderes Thema oder Moodboard, ich werde viel über Moodboard sprechen und wir werden eine online erstellen, damit wir mit anderen Designern oder vielleicht Entwicklern oder Projektmanagern zusammenarbeiten können. So werden Sie alle Ihre Ordner und Assets anordnen. Im Ordner „Assets“ werden wir alle unsere Schriftarten und auch die Stockbilder behalten , die wir während unseres Projekts verwenden werden. Also nächstes Mal möchte ich nicht die endgültige, letzte Ende vermasselte Ordnerorganisation sehen , wenn Sie für einen Kunden entwerfen. Also alle meine Schüler, ich möchte nur sicherstellen, dass Sie wissen, wie Sie Ihre Design-Ordner organisieren, vielleicht andere Designer könnten es anders machen, aber ich denke, ich mache es so. Also das sind die Inspirationen, PSD ist das Finale, PSD ist mit Vorschauen, Wireframes. Auch mit Vorschauen denke ich, dass ich die Vorschau hier vergessen habe. Dann der Inhalt der Website, UI Style Guide, Inspirationen und Assets. Es gibt noch eine Sache, die Sie hier erstellen können, vielleicht können Sie ein Spezifikationsdokument erstellen, vielleicht einen Spezifikationsordner für Ihre Entwickler. Jetzt in diesem Ordner werden wir das rote Liniendokument behalten, lassen Sie mich Ihnen das rote Liniendokument zeigen. Lassen Sie uns das von hier kopieren und ich werde es einfügen. Das ist also unser rotes Liniendokument, wir werden es in einem anderen Ordner teilen, wie Sie hier sehen können, haben wir die Entfernungen und die Größen unserer Schaltflächen und all die anderen verschiedenen Dinge gezeigt . Das sind also die Entfernungsspezifikationen und vielleicht können wir unseren UI-Styleguide so in die Spezifikation verschieben. Ich denke, das ist es, so können Sie gut in der Ordnerorganisation für Ihre Designprojekte zu bekommen. Gehen wir also zur nächsten Lektion über. 6. Die your und Gruppen organisieren: In dieser Lektion werde ich darüber sprechen, Ihre Photoshop-Ebenen in Gruppen zu organisieren und wie Sie sie richtig benennen werden, so dass Ihre Entwickler oder andere Teammitglieder oder andere Designer, wann immer sie Ihre PSD-Datei öffnen, sie wissen, was dieser Ordner bedeutet oder diese Gruppe bedeutet oder diese Namenskonvention bedeutet. Lasst uns loslegen. Jetzt können Sie auf der rechten Seite in meinem Ebenen-Panel sehen, lassen Sie mich es einfach ein bisschen größer machen. Ich werde jetzt die Größe der Miniaturbilder erhöhen. Nun, wenn Sie sich dies im Ebenenfenster ansehen, können Sie oben sehen, das sind im Grunde die Spezifikationen, die von Ink verärgert werden. Ich werde es Spezifikationen nennen, so etwas wie das. Damit Entwickler wissen, dass dies die Spezifikationen sind. Sie können sie ausblenden oder Sie können sie anzeigen. Sie können hier drüben in den roten Linien sehen, wenn ich versuche, sie zu verstecken, können Sie sehen, dass sie versteckt und angezeigt werden. Das sind also die Spezifikationen. Dann wird das nächste Grid sein. Es gibt zwei Gitter, vertikales und horizontales Gitter. Sie können sehen, dass dies das Säulenraster ist, Sie können hier sehen, 1200 Pixel breit und dies ist das vertikale Raster. Es ist besser, dass Sie sie wie 8-Punkt-vertikales Gitter nennen, so etwas. Sie können auch etwas wie 1200 Pixel, 10 Pixel, Rand, mit der 30 Pixel Rinne verwenden. Der Entwickler weiß also, dass dies das Grid-System ist, das Sie verwendet haben. Jetzt voran, Sie können sehen, wir haben Kopfzeile an der Spitze, dann haben wir, wenn ich versucht, es zu verstecken, können Sie sehen, diese ganze Helden Bereich und Header Bereich ist versteckt. In diesem Header habe ich einen, der als Inhalt bezeichnet wird. So können Sie sehen, alle meine Texte und Schaltflächen sind auf diesem Inhalt. Wenn Sie zu dieser Navigation und Logo gehen, ist es ein oberer Abschnitt, dann dieses Video-Hintergrund, es ist in einer anderen Gruppe. Sie können diese Ebene auch so in die Video-Hintergrundebene verschieben. Es ist ein Ein-Block hier drüben Videobereich. Auf diese Weise werden Sie Ihren gesamten Inhalt in verschiedenen Ordnern und verschiedenen Abschnitten ausrichten und organisieren. Dann haben wir den nächsten Abschnitt, das ist dieser Prozess auf Meilensteinen jedes Projekts, das wir nehmen, Abschnitt 1. Nun, wenn Sie auf ein beliebiges Symbol klicken, können Sie hier sehen, Ich habe diesen Ordner Schritte genannt. Alle vier Schritte befinden sich in diesem und sie haben ihre separaten Ordner mit ihren Symbolen, wie Sie sehen können, Schritt 1-Icon. Die meisten der Zeit verwenden Entwickler Benennungskonventionen mit Bindestrichen oder Unterstrichen. Versuchen Sie also, sie zu verwenden, verwenden Sie Kleinbuchstaben, Schritt 1-Symbol oder Schritt 2-Symbol, Schritt 1-Symbol oder Schritt 2-Symbol, Schritt 3-Symbol. Sie können hier drüben sehen. Das Gleiche gilt für die Knöpfe. Also, wenn ich auf diese Schaltfläche klicke, können Sie sehen, dass ich diesen ganzen Knopf benannt habe, btn-main. Grundsätzlich ist btn für Taste und das ist main. Sie sich keine Sorgen um diese Ebene, aber die meiste Zeit sollte Ihr Ordner richtig benannt werden, also ist dies eine Gruppe. Nun, gehen wir zu ein paar weiteren Dingen über. Jetzt können Sie in der Fußzeile sehen, wir haben diese Fußzeile am Ende und Sie können sie ausblenden oder anzeigen, wie Sie wollen. Eine weitere Sache manchmal, vielleicht absichtlich, ich kann hier mit der rechten Maustaste klicken und diesem etwas Farbe geben, wie das ist orange oder vielleicht möchte ich diesem Header eine rote Farbe geben oder vielleicht möchte ich die rote Farbe geben Raster und keine Farbe für alle von ihnen. Diese rote Farbe bedeutet, dass dies Farbverlauf ist und es gesperrt ist und der Entwickler oder jeder Designer, der daran arbeiten wird, sie können sofort wissen, dass diese Ebene im Grunde gesperrt ist. Auch wenn Sie den Hintergrund so wollen, können Sie so etwas verwenden oder Sie können eine neue Ebene wie diese hinzufügen, einfarbig und für den Hintergrund verwenden, ich werde es bg nennen. Es ist leicht, die Farbe jederzeit zu ändern. Ich kann es grau machen oder jede Farbe, die ich mag. So werden Sie Ihren gesamten Dokumentkopf Abschnitt 1, Abschnitt2, Abschnitt 3, Abschnitt4 und Fußzeile anordnen 2, Abschnitt 3, Abschnitt . Um all diese Ordner zu erstellen, habe ich hier eine Aktion gespeichert, also werde ich das im nächsten Video zeigen, wenn wir anfangen, diese zu entwerfen. Moment ist der Hauptzweck dieser Vorlesung, dass, wie Sie gehen, um Ihre Schichten so zu organisieren, dass die Entwickler oder andere Designer oder andere Teammitglieder, können sie leicht verstehen, was Sie entworfen haben. Gehen wir nun zur nächsten Lektion über. 7. Benennungskonventionen mit Entwicklern bearbeiten: Jetzt habe ich noch ein paar Tipps, wie Sie Ihre Layer richtig benennen können. Wenn Sie sich nun eines der Elemente wie diese Schaltflächen oder Dropdown-Menüs ansehen, was auch immer anklickbar ist oder eine Interaktion darüber haben, wird es zwei oder drei weitere Zustände dafür geben. Wenn ich diesen Knopf habe, den Sie hier sehen können, hat er zwei Zustände. Einer ist dies, und einer ist Hover oder aktiver Zustand. Ich werde sie sehr richtig benennen. Gleiche ist die Geschichte mit diesem bekommen Sie einen Zitat-Button, ich habe zwei Versionen davon. Der eine ist dieser Geisterknopf. Wenn der Benutzer den Mauszeiger darüber bewegen wird, wird es so frei sein. Wenn Sie nun die Ebenen von Gruppen dieser Interaktion benennen , werden Sie sehr vorsichtig sein. Im Moment können Sie hier sehen, dass ich Button-Quote-Geist habe. Dann wird dieser Button gefüllt und mit einem Unterstrich, den ich hier angegeben habe, ist es Hover und aktiver Zustand. Also wird es Hover und aktiver Zustand für beide Staaten sein, es wird so sein. Jetzt auf mobilen Geräten gibt es meistens keinen Hover-Zustand, da die Berührung im Grunde der aktive Zustand sein wird. Wenn jemand versucht, die Schaltfläche zu berühren, beliebige Schaltfläche auf Ihrer Website, auf einem mobilen Bildschirm, gibt es keinen Mauszeiger auf einem mobilen Bildschirm, so denken Sie daran. Wenn Sie eine Animation oder irgendetwas oder irgendeine Interaktion planen, passen Sie sich mit dem Ganzen und einer anderen für das Aktive an, dann sind Sie in einer falschen Position. Also denken Sie sorgfältig nach. Ihre Schaltfläche hat sowohl den aktiven als auch den Hover-Status gleich, da auf mobilen Geräten kein Hover-Status vorhanden ist. Sie können also nicht mit dem Mauszeiger über ein Symbol oder ein Element auf Ihrem mobilen Bildschirm bewegen. Wenn Sie sich diesen Knopf ansehen, werde ich Ihnen zeigen, wie ich ihn umbenannt habe. Sie werden also den aktiven Status Hover hinzufügen, und dann ist dies die einfache Phase. Sie können auch den normalen Zustand hier drüben wie diesen normalen am Ende hinzufügen , nur um deutlich zu machen, dass Ihre Entwickler verstehen, was es sein wird. Stellen Sie also sicher, dass für alle Symbole, auch wenn diese Symbole Interaktionen beim Hover oder so etwas haben, Sie werden eine andere Gruppe hinzufügen und sie entsprechend ihrem Status umbenennen. Das ist das Hauptband. Wie Sie hier sehen können, ist dies im Grunde der Hover- oder Aktivzustand. Sie können sehen, ich habe hier erwähnt Designer Highlight Hover. Dies ist also das hervorgehobene Element oder der Benutzer konzentriert sich jetzt hier drüben. Dies ist also das Band, das ich Ihnen geben wollte, um Ihre Ebenen und Schaltflächen oder Dropdowns zu benennen, die interaktiv sind und sie richtig benennen, damit Ihre Entwickler wissen , dass dies eine Änderung der Farbe oder eine Änderung des Zustands sein wird. Gehen wir nun zur nächsten Lektion über. 8. Was ist eine gute Designbrief?: Jetzt, wann immer Sie ein Designprojekt starten, ob es sich um ein Webdesign oder Logo-Design oder ein App-Design handelt, das erste, was Sie von Ihrem Kunden erhalten werden, ist die Designbeschreibung. Nun gibt es zwei Arten von Clients. Eine, die einen sehr schönen Designbrief erstellen kann und andere, die nur sagen, wir brauchen eine Website. In diesem Fall erhalten Sie die Informationen von Ihrem Kunden, die ich in der nächsten Lektion behandeln werde. Moment, in dieser Lektion werde ich Ihnen Beispiele zeigen, reale Beispiele für mehr als drei oder vier Design-Slip und was sind die Details, die Sie mit ihnen bekommen können, so lassen Sie uns beginnen. Nun, hier ist unser Designbrief vom 99designs.com Web Design Contest. Ich habe diesen Wettbewerb geöffnet, der im Grunde läuft jetzt, schlanke Website für intelligente Elternschaft Produkte. Nun, wenn Sie zu diesem kurzen Tab gehen, habe ich diesen geöffnet. Es gibt nur wenige Abschnitte. Hintergrundinformationen dieser Organisation. Dann haben wir benutzerdefinierte visuelle Stile. Dann haben wir Inhaltsdetails; was wird der Inhalt Ihres Designs oder Ihrer Seite und was Sie vermeiden müssen. Dann haben wir andere Informationen wie andere Notizen, Sie können sehen, es gibt all die verschiedenen Anhänge und Logos und Markenfotos, Bilder, die Sie hier sehen können. Dies sind sehr schöne Bilder, die auf weißem Hintergrund aufgenommen wurden. Auch gibt es Leistungen. Diese sind im Grunde für den Wettbewerb, dass endgültige Dateien in diesem [unhörbaren] Nun, lasst uns eins nach dem anderen über sie sprechen. Hintergrundinformationen werden darüber sein, was ist die Organisation? Was sind ihre Zielgruppe, sei es für Eltern, sei es für alte Menschen, sei es für Finanzberater oder was auch immer. Sie müssen all das sorgfältig lesen. Was ist dann die Branche dieser Organisation? Ob es sich um eine Modebranche, Tech-Industrie, und dann haben wir bestehende Website. Die meiste Zeit, in der Regel, haben Designbriefs bestehende Websites und Sie müssen diese Website neu gestalten oder Sie müssen eine bessere erstellen. Dann haben wir diese visuellen Stile, so gibt es hier nichts spezifiziert diesen Client in Stil, aber es gibt viele inspirierende Websites. Von diesen inspirierenden Websites, werden Sie eine Menge Moodboard bekommen oder Sie können sagen, dass das, was Ihr Kunde wirklich braucht. Über jede Website hat er angegeben, dass er nach so etwas sucht. Dann mag er Sauberkeit dieser Website. Dann ist dies im Trend, trendy, sauberes Projekt, minimales Produktbild, schlank. Das sind die Stile, nach denen er sucht. Für jede Website oder Inspirationsseite, die Ihr Kunde Ihnen schickt, auch wenn Sie ihn um einen kurzen bitten, dann erwähnen Sie immer, was er daran mag. Erhalten Sie nicht nur zwei oder drei URLs, Website-URLs, die Ihnen überhaupt nicht helfen werden. Fragen Sie Ihren Kunden, was gefällt Ihnen an dieser Website? Was ist der spezifische Teil, den Sie an dieser Website mögen? Nehmen Sie das in Ihrem Kopf und machen Sie Screenshots dieser Websites. Was ich mache, ist, dass ich diese inspirierenden Websites öffne und ich mache den Screenshot mit diesem Plugin, das ich habe, dieses Firefox-Plugin. Ich glaube, es heißt „Shot“. Ich erinnere mich nicht an seinen Namen, aber ich werde die URL dafür teilen. Es gibt viele gute, die Screenshots auch machen können, manchmal erstelle ich einfach eine PDF-Datei dieser kurzen und speichere sie in einem Ordner. Gehen wir zu den Inhaltsdetails. Jetzt werden Inhaltsdetails sein, worum es auf dieser Seite geht und was der Inhalt dieser Seite, die Überschriften und alles andere. Sie können sehen, dass es weniger Beschreibung hat, aber vielleicht in den Anhängen finden Sie den Inhalt der Rede. Nun, was Sie vermeiden sollten, sind die Dinge, die Sie vermeiden müssen. Nun, hier hat es nichts spezifiziert, aber ich habe viele andere Slips gesehen, wo der Entwickler oder der Projektmanager oder der Kunde normalerweise darum bitten, dieses oder diese Dinge zu vermeiden. Nun, in der anderen, können Sie sehen, dass es viele Design-Assets in der Anlage gibt. Außerdem hat der Kunde Ihnen das Thema Ihres Designs erzählt, das ist sehr wichtig. Es sollte zwei oder drei Wörter wie schlank, verspielt, smart, kreativ, Oberklasse, trendy und Premium sein. Dies sind die Themen oder Design-Trends, nach denen Sie suchen werden. Dies sind alle Produktbilder, laden Sie sie herunter und speichern Sie sie in dem Assets-Ordner, von dem ich Ihnen erzählt habe. Auf diese Weise werden Sie jede Designbeschreibung interpretieren. Sie müssen suchen, was sind die Themen, die er sucht. Trendy, Oberklasse, kreativ, verspielt, smart. Sie können sehen, es hat einen Hauch von Premium-Wickeltasche oder was auch immer es ist. Lassen Sie mich Ihnen ein weiteres Beispiel zeigen. Hier ist ein weiteres Beispiel, das ich gerettet habe. Es könnte ein altes Projekt von 99designs sein. Name der Organisation, Beschreibung der Organisation und ihrer Zielgruppe. Das ist sehr wichtig. Sie müssen einen Ihrer Kunden fragen, wenn Ihr Kunde Ihnen keine Entwurfsübersicht gibt, können Sie ein Word-Dokument oder eine Frage erstellen, PDF beantworten und sicherstellen, dass Ihr Kunde alle diese Fragen beantwortet wenn Ihr Kunde Ihnen keine Entwurfsübersicht gibt,können Sie ein Word-Dokument oder eine Frage erstellen, PDF beantworten und sicherstellen, dass Ihr Kunde alle diese Fragen beantwortet. Vorlage, die darauf basiert. Ich werde die Vorlage mit Ihnen teilen, also machen Sie sich keine Sorgen, Sie können es von hier herunterladen. Jetzt können Sie Industrie, bestehende Website, Anzahl der Seiten, Seitenbeschreibung, Stil, Theme-Idee, was zu vermeiden. Sie können sehen, dass dieser Kunde sehr weniger Informationen gegeben hat , so ist es nicht eine sehr gute Design-Briefung, aber ich denke, es kann mit diesem inspirierenden Websites arbeiten; Sie können sehen, der Kunde erwähnt, was er an dieser Website mag. Es gibt andere Notizen, Content-Management-System, und die Anbringung ihres Logos. Stellen Sie sicher, dass Sie die Designrichtlinien oder das Logo oder das Branding dieses Unternehmens benötigen, wenn Sie einen Designbrief von Ihrem Kunden erhalten. Sie können hier sehen, es hat bereits eine Website, also müssen Sie es neu gestalten. Sie können das Logo von dort bekommen. Aber es ist besser, dass Sie das Logo im Adobe Illustrator Format oder ein transparentes Bild im PNG-Format erhalten. Lassen Sie mich Ihnen ein weiteres Beispiel zeigen, dies ist eine sehr detaillierte kurze über eine Website, TraderPlaza, Sie könnten mein Design auf gesehen haben [unhörbar] für diese Website. Jetzt können Sie sehen, dass es eine sehr lange ist. Sie müssen es sehr sorgfältig lesen. Sie können sehen, es hat wichtige Informationen gezeigt, primäre Ziel der Homepage, visuelle Stile. Es hat auch etwas in rot hervorgehoben. Dann haben sie einige inspirierende Websites hier aufgelistet; auch die Dinge, die sie daran mögen, Inhalte Details. Es ist sehr spezifisch in inhaltlichen Details. Sie können die obere Navigation von links nach rechts, das Logo, zwei Links und die Dropdown-Liste „Sprache“ sehen. Es hat einen sehr spezifischen Inhalt. Sie können hier sehen, sogar es zeigt, was Sie in der Kopfzeile 1 und Überschrift 2 in Ihrem Header-Bildbereich schreiben werden. Sie können andere Dinge sehen, die sie wollen auf dem Formular und anderen Inhalten. Lassen Sie mich Ihnen ein weiteres Beispiel zeigen. Dies ist Web-App. Es heißt Ripenn, also App Homepage-Design. Es gibt UX-Ziele. Was sind die Hauptziele, was sind die Benutzer gehen, um mit diesem Design oder mit dieser App zu erreichen. Dies sind die benötigten Design-Assets. Dann haben sie die neue Homepage. Sie haben alles erklärt, was auf dieser Web-App benötigt wird. Dann dieser Teil New Seed und es gibt diesen Teil Stream Page, Stream Page Count. Wenn Sie so etwas von einer Web-App haben, müssen Sie verstehen, wie es funktioniert. Es ist der Zweck dieses Designs, sonst müssten Sie Ihren Kunden Fragen stellen, dass es darum geht. Manchmal mit dem Design Briefs, was Sie bekommen werden, werden Sie diese Standardvorschau der Seiten erhalten, die Sie neu gestalten müssen, so etwas, so dass Sie sie bei sich behalten müssen. Hier geht es um Design-Slip und darum, wie Sie sie interpretieren werden. Wenn Ihre Kunden Ihnen keine Design- oderDesignelemente oder Design-Ressourcen wie ihr Logo, ihreProduktbilder gegeben Designelemente oder Design-Ressourcen wie ihr Logo, ihre haben, ist dies die Zeit, um sie von Ihrem Kunden zu bekommen. Dies ist der erste Schritt. Ich hoffe, jetzt verstehen Sie viel über Design Slips und was sind ihre Formate. Fahren wir mit der nächsten Lektion fort. 9. Erste Ideen und frühzeitige Skizzen bekommen: Die schwierigste Aufgabe für jeden Designer ist es, in den Kopf ihrer Kunden zu kommen. Dies ist die schwierigste Aufgabe. Nun, der beste Weg, um in den Kopf Ihres Kunden zu kommen, und was Ihre Kunden wirklich brauchen, ist, sie ihre eigenen Ideen skizzieren zu lassen. Geben Sie ihnen etwas Papier. Wenn Sie zu Ihren Kunden gehen können, geben Sie ihnen etwas Papier und lassen Sie sie zeichnen, was Sie brauchen, was Sie in der Kopfzeile und im ersten Abschnitt Ihrer Website, zweiten Abschnitt, dritten Abschnitt und die Fußzeile wollen . Dies wird Ihnen helfen, die Do's und Don'ts Ihres Wireframes oder Ihres Webdesigns. Lassen Sie sich jetzt nicht zu sehr auf diese Layouts oder diese Skizzen Ihrer Kunden konzentrieren. Sie werden sie später verbessern. Lassen Sie mich Ihnen einige Beispiele von Client-Skizzen zeigen. Nun, hier sehen Sie eine der Client-Skizzen. Sie können sehen, dass sie sehr rau sein können und sie haben nicht zu viele Details. Stellen Sie sicher, was auch immer Ihr Kunde schreibt, es sollte lesbar sein, damit Sie später sehen können, was Ihre Kunden wirklich darüber geschrieben haben, denn manchmal werden Sie vergessen, was Sie mit Ihrem Kunden besprochen haben oder was es ist. Wenn Sie sich auf einer Remote-Site befinden und diese von Ihrer E-Mail erhalten haben, dann werden Sie in Schwierigkeiten geraten, wenn Sie seine Handschrift nicht lesen können. Lassen Sie mich Ihnen ein paar weitere Beispiele zeigen. Hier sind ein paar weitere Beispiele. Sie können die mittlere und die linke sehen. Diese stammen von einigen meiner Kunden, und Sie können sehen, dass der mittlere ein sehr großes Problem hat , dass ich es nicht sehr gut lesen kann. Was ist das für ein Wort? Punktzahl. Ich denke, Kredit-Score-Karte, Sie können so viel in Ihrem Leben sparen. Das ist also sehr umständlich. Ich kann nicht lesen, was es hier steht. Dies ist ein sehr schlechtes Beispiel, also stellen Sie sicher, dass Ihr Client etwas sehr lesbar und lesbar schreibt. Sie können es leicht lesen und verstehen. Auf der linken Seite, wieder, das gleiche Problem ist, dass es Dinge, die ich verstehen kann, aber die Bildqualität ist sehr gering. Sie können auch diese Notationen sehen, ich kann nicht lesen, was hier geschrieben ist. Nachricht Batterie oder ich weiß nicht, was es ist. Also habe ich diese Ebene 1, Level 2, Level 3, Level 4, aber ich weiß nicht, was die Anmerkungen hier sind. Was ist diese Skizzenleiste oder was auch immer es ist? Dies sind also die Probleme, die Sie mit diesen Client-Skizzen bekommen können. Seien Sie sich also bewusst, stellen Sie sicher, dass Sie Ihren Kunden davon überzeugen, dass bitte lesbare Dinge zeichnen oder schreiben, wie Sie hier im richtigen Beispiel sehen können. Es ist ein vergrößertes Bild einer Client-Skizze, aber ich denke, es ist sehr lesbar. Ich habe es von einer Website online bekommen, googelte es, also ist es nicht meine. Das ist also das Video und das ist die Denkbox oder was auch immer es ist. Dann haben wir Pläne, Hilfe hier drüben. Das ist also sehr prägnant und sehr gut geschrieben. Sie können es leicht lesen. So sollten Ihre Client-Skizzen auf diese Weise sein. Sie können Ihrem Kunden auch helfen, ihnen vielleicht einige Beispiele zeigen, ihnen einige Beispiele der Skizzen schicken und sie ihre eigenen zeichnen lassen. Auf diese Weise wissen sie, dass dies das Endergebnis ist, das sie bekommen werden. Sobald Sie alle Skizzen erhalten haben, wird der nächste Schritt im nächsten Video gezeigt. Gehen wir also zum nächsten Video über. 10. Fragen zur den Kunden vor jedem to: Jetzt haben wir in diesem Stadium bereits die Skizzen von unserem Kunden bekommen. Jetzt ist es an der Zeit, dass wir weiterkommen und weitere Informationen über das Design und das Projekt erhalten, das Sie für Ihren Kunden tun werden. Es gibt zwei Fragen, die ich stellen werde. einen geht es um das Geschäft selbst und seine Konkurrenten, und der zweite geht es um seine Endnutzer oder Kunden. Nun die Fragen über sein Geschäft, das Geschäft Ihres Klienten. Die erste ist, wie beschreiben Sie Ihr Geschäft selbst? Wenn es um eine einzelne Person oder Persönlichkeit geht, wenn ich eine Website über eine soziale Figur oder eine soziale Persönlichkeit erstelle, dann werden sie sich selbst beschreiben, dass ich enthusiastischer Experte bin oder vielleicht ich ein Sport bin Experte oder ich bin ein Blogger oder so etwas. Aber wenn es ein Geschäft ist, dann werden sie es so beschreiben, als ob wir dies mit dieser Art von Verkauf tun und unsere monatlichen Verkäufe sind dies. Also alles über ihr Geschäft, egal ob sie etwas in der Nähe verkaufen oder so etwas. Zweitens: Was ist das primäre Ziel Ihrer Website? Das ist sehr wichtig. Ihr Kunde muss sich hier ein einziges Ziel vorstellen. Dies wird zeigen, dass das Ziel Ihres Designs ist. Sie werden eine gute Idee aus dieser Antwort bekommen. Jetzt ist die dritte, welches Problem Sie mit diesem Design lösen möchten? Das ist sehr wichtig. Jetzt müssen Sie wissen, mit welchem Problem Ihr Kunde konfrontiert ist. Dies ist der grundlegende Punkt, wo Sie ihn wirklich hart schlagen wollen, um etwas gutes Geld zu bekommen. Was auch immer sie hier schreiben, das wird sehr gut für Sie sein. Die vierte ist, wer sind Ihre Konkurrenten, und fügen Sie die Website-Links. Das ist wirklich entscheidend. Sie müssen sehen, was die Konkurrenten tun, wie gut ihr Geschäft verkauft, ist die Struktur ihrer Websites? Welche Farben verwenden sie? Wie haben sie ihre Lernseiten angelegt, was sind die Überschriften oder Konvertierungsauslöser, die sie dort benutzen? Es gibt viele Informationen, die Sie von den Konkurrenten erhalten können. Dann haben wir die letzte Frage, die ist, haben Sie den Inhalt für Ihre Website bereit? Hier geht es um Ihren Kunden und seine Website. Sie müssen Logo- und Textinhalte bereit haben, bevor Sie mit dem Entwerfen beginnen. Sonst wird es am Ende sehr weh tun. Manchmal, wenn Sie den Text haben und wenn Sie den Text nicht haben, kann Ihre gesamte Struktur Ihres Designs geändert werden. Zum Beispiel, wenn Sie vier oder fünf Zeilen in den Header oder Heldenbereich Ihrer Website setzen , und wenn Ihr Kunde Ihnen den echten Inhalt gibt, gibt er Ihnen eine oder zwei Zeilen. So wird es wirklich Ihr Design ändern. Sie müssen es neu entwerfen oder neu ändern oder viel ändern. Holen Sie sich das Logo und die Markenrichtlinien. Wenn sie einige Markenrichtlinien haben, wie sie ihr Logo oder die Dinge und den Textinhalt oder den Inhalt ihrer Seite verwenden , wie Bilder, Text-Header, alles. Sie müssen dies also vorbereiten, bevor Sie in das Design einsteigen. Jetzt sind die zweiten Fragestellungen über die Benutzer und Kunden. Die erste Frage wird sein, was sind demographisch von Ihren Kunden oder Benutzern? Wie alt ist ihr Alter? Was ist ihre Gehaltsspanne oder vielleicht was ist ihre Authentizität? Ob junge Frau oder alte Leute oder so etwas. Es löst aus, dass, Sie gehen, um Ihr Design auf die Frau zu zielen, und was kann Ihr Farbschema auf diese Informationen ändern. Demographie kann Ihr Design und die Form Ihres Designs verändern. Nun ist die siebte Frage, welchen Eindruck Sie Ihren Benutzern geben möchten wenn sie Ihre Website zum ersten Mal sehen? Das ist wirklich wichtig. Dies sind die Designrichtlinien oder Design-Schlüsselwörter. Ich nenne sie Design-Schlüsselwörter wie die Website muss zuverlässig sein, oder vielleicht sollte es etwas Spaß oder Kreativität zeigen, oder vielleicht ist es sehr ernst oder fett. Das sind also die Themen. Sie werden Ihnen wirklich helfen, Ihre Typografie, Ihre Schriften, vielleicht Ihre Farben, vielleicht die Rundheit Ihrer Tasten zu entscheiden Ihre Schriften, vielleicht Ihre Farben, . Jetzt die achte und letzte Frage, welche Informationen Ihre Benutzer auf Ihrer Website suchen? Das ist wirklich wichtig. Ob sie nach Rabatt-Coupons suchen oder das beste Angebot suchen, oder ob sie ein PDF oder das Wasserregister herunterladen möchten oder abonnieren möchten. Dies ist die Hauptfunktion Ihrer Website. Damit wird dieser Fragebogen beendet. Ich werde diesen Fragebogen mit Ihnen im PDF-Format und im Wortformat teilen. Sie können es Ihren Kunden geben und es verwenden, wie Sie möchten. Wenn Sie weitere Fragen hinzufügen möchten, können Sie weitere Fragen hinzufügen. Aber so erhalten Sie gute Informationen, bevor Sie mit dem Design beginnen. Gehen wir also zur nächsten Lektion über. 11. Verwendung von Content zur Erstellung von Vorlagen für die Inhalte der Website der Website: Lassen Sie mich Ihnen nun zeigen, wie Sie den Inhalt Ihres Kunden im Format haben möchten. Lassen Sie mich Ihnen das Format zeigen, das ich für meinen Kunden verwende, um seinen Inhalt auszufüllen. Also hier haben wir die Top-Navigation und es hat Links zu unserer Marke Lift, Fallstudien, Kontaktieren Sie uns, Holen Sie sich ein Angebot. Wenn sie also etwas haben, das sie wie Dos oder Don'ts angeben müssen, können sie in der nächsten Zeile rot angeben. Dann haben wir die Überschrift, dann haben wir die Unterüberschrift, den ersten Absatz und dann haben wir, Sie können hier die Schaltflächen sehen. So werden Sie alles auslegen, Abschnitt 1. Das ist also wirklich wichtig. Alles sollte in verschiedenen Abschnitten sein. Sie können sehen, dies war unsere Kopfzeilen Top-Navigation und Schlagzeilen. Dann haben wir den Abschnitt eins, wir haben Meilensteine. Dies ist unsere Hauptüberschrift, und das ist unsere Unterposition. Sie können sehen, dass dies eine Notation ist, die ich verwende. Diese erste Zeile, dann gibt es zwei Bindestriche für die zweite Zeile, die Untertitel sein wird. Sie können auch das gleiche Format oder die gleiche Sache wie dieses verwenden, immer und immer, aber ich mag es einfach. Hier haben wir Prozessschritte eins, zwei, drei, vier, ihre Details. Dann haben wir Abschnitt 2, dann haben wir Abschnitt 3. Unser Hauptteam ist etwas Besonderes, wir sind Tasche voller digitaler Zauberer, Bilder mit Titeln hier drüben. Dies ist im Grunde das Dokument, das unser Design prägen wird. Dies ist der gesamte Inhalt geschrieben, Sie haben vielleicht eine Menge, aber im Moment ist dies der, den ich für mein Design W Studio verwendet habe, was Sie in Zukunft tun werden. Dies ist der Abschnitt für oder Sie können es auch hier Fußzeile aufrufen, so etwas. Lassen Sie uns für Sie bereit, es Schritt weiter zu gehen. Also das ist der Knopf, konsultieren Sie am Telefon oder sagen Sie uns, was Sie wollen. Soziale Links, ausgefallenes Büro, unsere Büroadresse, E-Mail und Telefonnummer. So möchten Sie alle Inhalte von Ihrem Kunden erhalten. Abgesehen davon benötigen Sie auch Logos und die Bilder, die Sie wie dieses Bild verwendet haben, ist im Grunde das Stockbild, aber Sie wollen die Bilder von dasist im Grunde das Stockbild, aber Sie wollen die Bilder von den ursprünglichen Teammitgliedern Ihrer Website oder ihren Kunden oder was auch immer sie haben. Also holen Sie sich die Bilder, das Logo, bevor Sie mit dem Design beginnen. Dies ist der Inhalt, den Sie von Ihrem Kunden erhalten müssen. Wenn sie Produktbilder haben, werden sie Ihnen die Produktbilder geben. Ein weiterer Tipp ist, dass diese Produktbilder manchmal etwas nachbessern müssen oder sie etwas bearbeitet werden müssen. So können Sie dafür extra berechnen, aber im Moment habe ich diese Bilder, die bereits bearbeitet sind und sie auf dem weißen Hintergrund sind, also brauche ich keine Bearbeitung. Denken Sie daran, manchmal kann es den Termin oder die Zeit des Projekts ändern. Wenn Sie den Inhalt erhalten, können Sie Ihrem Kunden mitteilen, dass es jetzt noch ein paar Tage länger dauern wird, weil ich all diese Bilder bearbeiten muss, die Sie mir gegeben haben , weil sie auf einem roten Hintergrund oder so etwas sind. Behalten Sie all diese Dinge im Hinterkopf, verwenden Sie diese Vorlage. Ich werde diese Vorlage mit Ihnen teilen. Gehen wir also zur nächsten Lektion über. 12. Mood für das Webdesign: Heute werde ich über Mood-Boards sprechen. Warum sind Mood-Boards in jedem Designprojekt wichtig? Weil sie die Richtung oder das Team oder den Stil dieses Projekts gestalten werden. Mood Boards sind nur eine Sammlung von wenigen Bildern, Texten oder Ausschnitten oder sogar verschiedene Screenshots von verschiedenen Teilen von Websites, sogar Porträtbilder von verschiedenen Modellen oder so etwas, oder sogar nur jede Fotografie außerhalb. Auch wenn Sie ein Foto aus Ihrem Klassenzimmer oder so etwas gemacht haben , nur um die Idee oder das Thema des Stils dieses Designs zu bekommen. Es könnte Farben, Schriftfamilien oder Text oder Texte sein, die Sie mögen, auch wenn Sie einige Symbole von einer Website mögen, Sie schneiden Sie einfach, dass. Dies ist im Grunde, um Ihr Thema und Stil Ihres Designs zu setzen. Jetzt habe ich dieses Online-Tool verwendet, es heißt N-I-I-C-E.C-O, niice.co. Es ist wirklich cool. Es schafft ein Moodboard, Online-Moodboard. Es gibt verschiedene Stile, aus denen Sie wählen können. Es gibt verschiedene Stylings und Optionen, Sie können Ihr Logo und andere Dinge hochladen, so dass ich nicht so viel brauche. Ich ändere nur den Titel und den Untertitel, und es gibt auch Optionen, die Sie exportieren können. Auf dem kostenlosen Konto habe ich drei Exporte übrig. Ich kann es als PDF exportieren, und auch Zip-Datei für alle Bilder. Auch ich kann dies mit dem E-Mail-Download-Link teilen, privaten Link, Passwort Dropbox, so können Sie es mit jedem teilen oder Sie können es exportieren und senden Sie es an jeden. Die Hauptsache ist, dass Sie auch Personen zu diesem Board hinzufügen können, können Sie Ihre Entwicklerteams hinzufügen oder einen anderen Designer, mit dem Sie arbeiten, können Sie ihn hier hinzufügen. Nun, der Hauptzweck ist, dass Sie gehen, um das Thema Ihres Designs zu setzen. Sie können in diesem Design sehen, ich werde eine Schriftart wie diese verwenden. Also brauche ich eine sehr mutige, sehr dicke Schrift, sehr gekrümmt und fett und serif Schrift wie diese, ich mag diese. Dann mag ich auch dieses, das sind die Icons, die ich mochte. Ich mochte zwei Farben Symbole, Liniensymbole. Es könnte eine gute Inspiration für unsere Funktionen oder Schritt Prozessschritte Bereich sein. Außerdem können Sie hier sehen, haben wir ein weiteres Beispiel für Text oder Typografie. Dann können Sie hier sehen, wieder, wir haben Stil, Farben, Typografie, Sie können die Graue sehen, die Verwendung von Grauen und Purple Ich nahm es von hier. Dann haben wir eine weitere Inspiration, die ich hier gesammelt habe, können Sie diese User Experiences Inspiriert von Menschen sehen. Dieser Absatz, diese Schaltfläche, können Sie den Schatten sehen, die Farben, Lichter um ihn herum, wir können es erweitern, vergrößern es so. So können Sie es deutlich sehen. Sie können die Alt- oder Wahltaste darauf klicken, um die Größe zu verkleinern. Dies sind verschiedene Bilder, die ich gesammelt habe oder die Textclips, oder verschiedene Screenshots, die ich gesammelt habe, um das Thema und die Richtung unseres Designs zu erhalten. Wenn Sie sich dieses Bild ansehen, können Sie sehen, wie dieses Bild in diesem Feld unten abgeschnitten wird. Das ist die Idee, die ich aus diesem Bereich genommen habe, diese Inspiration Mood- Board und ich habe es in unserem Team Bereich verwendet, wo ich die Bilder von unserem Team stehen gezeigt habe. Dies sind all die Dinge und Themen, Farben und Text- und Topografie-Ideen, sogar die Layout-Ideen. Ich habe einige der Layout-Ideen von diesen verwendet. Außerdem können Sie sehen, dass dieses Bild Überlagerung von Schwarz hat. So sehr schwarzes Overlay und grau-schwarzes Overlay, ich mochte es. Ich habe ein violettes Overlay verwendet, ähnlich wie dieses. Auch die Anordnung der Inhalte hier drüben, ich mag es wirklich. Hier haben wir die Adresse, hier haben wir unsere sozialen Links. Dies ist der beste Weg, um Ihr Design-Team zu erstellen. Andere können hier auch Bilder oder so etwas hinzufügen. Wenn Sie auf dieses „Pluszeichen“ klicken, können Sie Bilder hochladen, Sie können ein Video hinzufügen, Sie können Text hinzufügen, und Sie können Unterbretter hinzufügen , wenn Sie mehrere Pinnwände haben, wie zwei oder drei. Im Moment brauche ich wirklich nicht mehr als diese wenigen. Ich mag diese wirklich und ich brauche nur diese beiden, beginne mein Design. Auch wenn Sie Ihr Logo hier hinzufügen können, wenn es bereits entworfen ist, können Sie es hier hinzufügen, damit sie den Stil mit all diesen übereinstimmen können. Das ist es um Mood-Boards. Wenn Sie ohne Moodboard entwerfen, fehlt Ihnen etwas. Sie können Online-Mood Boards erstellen oder Sie können nur einen Ordner mit all diesen Bildern gefüllt haben , um die Inspiration zu erhalten. Normalerweise erstelle ich einen Ordner auf meiner Festplatte. Ich benutze dieses Tool kann vor ein paar Tagen sein, ich mochte es wirklich. Aber trotzdem werde ich meine eigene Festplatte bevorzugen, wenn ich alleine arbeite. Wenn Sie in einem Team arbeiten, ist dieses Tool ein Segen. Es gibt kostenlose Version und auch eine Pro-Version, gerade jetzt verwende ich kostenlose Version und das ist genug für mich. Hier dreht sich alles um Moodboards. Fahren wir mit der nächsten Lektion fort. 13. Ideenphase (mindestens 3 Layouts): Der erste Schritt in irgendeiner Art Design ist die Idee. Nun, Ideation bedeutet, dass Sie einige grobe Skizzen von Ihrer Idee bekommen und sie sehr schnell auf das Papier bringen werden. Zumindest denke ich, dass du mindestens drei Designs brauchst. Beginnen Sie zuerst mit dem ersten Design und dann mit einem anderen. Vielleicht können Sie bis zu sechs Layouts wie das hinzufügen. Manchmal entwerfen Teams, sie kommen mit mehr als 20 oder vielleicht 30 verschiedenen Layouts oder Skizzen in dieser Ideationsphase. Sie können hier sehen, ich habe die ersten Skizzen, vier verschiedene Skizzen, vier verschiedene Layouts für die gleiche Seite, die wir entworfen haben. Nun, auf der linken Seite, wenn Sie hier sehen können, haben wir Logo auf der linken Seite und Navigation und die Schaltfläche hier drüben. Eine Sache, die Sie beachten müssen, dass Sie in Ihrer Ideationsphase oder in diesem Abschnitt keine Wörter verwenden werden. Sie können hier sehen, die Schaltflächen sind einfach nur schlichte Kästchen, die mit der schwarzen Markierung oder Tinte gefüllt sind, und die Linien hier sind nur die Wellenlinien für den Text hier drüben. Dies ist nur ein Video, dass dies hier, es wird ein Video hier drüben sein. Dann sind dies vier Symbole, Sie hier sehen können. Dann wiederum winkt der Text vier Texte. Dann sind dies ein paar Bilder oder Portraits von Teams. Dies ist nur das Layout. Sie können hier drüben sehen, ich lege nur meine Inhalte auf dieser Seite sehr schnell aus. Nun, dies ist das mittlere Layout für die obere Kopfzeile. Nun, in diesem Abschnitt, können Sie hier sehen, dass ich völlig das Layout geändert. Ich lege das Video hier drüben und Text und Button hier drüben. Dann die vier Schritte, ich benutze sie in Schritt-Icon oder Bild hier drüben, Details hier drüben. Schritt-Symbol hier drüben, Details hier drüben. So ändere ich das Layout der ersten Iteration hier drüben. Dann können Sie in diesem Abschnitt für unser Team sehen, Sie können sehen, die Bilder sind völlig verändert. Hier hatten wir ovale Formen, und [unhörbar] über die [unhörbaren] jetzt, die wir die Hälfte des Körpers des Bildes oder die Hälfte des Körpers unseres Teams haben . Dann unten können Sie sehen, dass ich eine Karte und einen Standort habe. Wir können hier auch die Telefonnummer hinzufügen. Dann auf der rechten Seite, ich habe ein Formular zu kontaktieren oder vielleicht ein Angebotsformular zu starten. Dann unten habe ich ein paar Zeilen hier drüben und soziale Links. Alles hier ist nur auf die einfachste Art und Weise illustriert. Sie werden hier nicht die Anmerkung und Ausarbeitung in der Drahtmodellphase erläutern . Wenn Sie also aus all diesen vier Optionen oder fünf Optionen oder sechs Optionen entscheiden , werden Sie einen von ihnen abschließen und Sie werden darauf Wireframe aufbauen. Sie können hier sehen, wir haben ein anderes Layout. Ich habe eigentlich zwei Seiten durcheinander gebracht. Also habe ich versucht, es hier zu setzen, aber Sie können sehen, dass der Abschnitt 3 ein bisschen falsch ausgerichtet ist, weil ich die nächste Seite verwendet habe. Sie können hier drüben sehen. Nun, hier haben wir ein anderes Layout. Hier haben wir zwei Videos hier drüben, und wir haben unseren Text und Button hier drüben. Außerdem können Sie entlang des Videos sehen, wir haben einen Text oder vielleicht ein Zeugnis von unserem Kunden, dann haben wir völlig anderen Bereich hier drüben 1, 2, 3 ist der Prozess und hier zeige ich meinen Teammitgliedern, die dafür verantwortlich sind -Schritt. Dann haben wir wieder ein paar Team-Mitglieder Bilder oder vielleicht denke ich, das sind einige weitere Kunden-Testimonials zusammen mit dem Prozess oder vielleicht können wir ein oder zwei haben. Das ist also die Idee, die ich im endgültigen Design verwendet habe. Wir hatten zwei Kundenreferenzen hier drüben. Jetzt können Sie im letzten sehen, dieses historisch zentralisierte Layout eins und zwei, und das ist fast das gleiche hier drüben. Dieser ist völlig anders für die Footer Map und das Kontaktformular. Dann ist dieser hier ganz anders. Wir haben Button und Text hier drüben, und wir haben aktuelle Gebote oder etwas Neues hier drüben , was vielleicht aktuelle Tweets oder so etwas ist, oder aktuelle Projekte Links. Dann haben wir diese soziale Bar hier drüben und wir haben ein paar Links und Texte hier drüben. So werden Sie einige Ideen von anfänglichen Ideen und Skizzen aus Ihrem Design auslegen . Dies ist auch eine Phase im User Experience Design. Ich denke also, wir werden einige der Phasen des User Experience Designs in diesem Kurs berühren . Ich denke, das ist eine Menge über Ideenfindung. Gehen wir nun zur Draht-Framing-Phase über. 14. Einführung in Balsamiq Mockups: Jetzt werden wir Balsamiq Mockups verwenden, um unser Modell für diese Übung zu entwerfen, für dieses Design. Es ist im Grunde ein nächster Schritt aus unserer Ideationsphase. Jetzt werde ich Balsamiq Mockups benutzen. Ich werde Ihnen einige der Einführung dieser Software geben. Es ist sehr einfach zu bedienen, also machen Sie sich keine Sorgen. Sie können die Testversion für 30 Tage herunterladen. Auch, wenn Sie es kaufen können, denke ich, es lohnt sich, wenn Sie viele Drahtmodelle zeichnen. Wenn Sie es nicht kaufen möchten, dann können Sie sogar Photoshop verwenden. Sie können diese Kits für Wireframing-Kits herunterladen. Sie können hier drüben sehen, es gibt viele, Sie können sehen, oder Sie können Ihre eigenen erstellen. Das ist keine große Sache. Nun, der Vorteil der Verwendung von Balsamiq ist, dass es sehr skizzenhaften Stil verwendet. Endanwender, unsere Kunden, wenn Sie ihnen Ihren Wireframe präsentieren, werden sie nicht verwirrt, dass dies das endgültige Design ist. Der zweite Vorteil ist, dass es viele Erweiterungen hat. Sie können sehen, Sie können viele andere Design-Mockups laden, wie Sie hier sehen können. Es gibt verschiedene Bibliotheken, um iOS-Design oder Android-Design zu unterstützen. Auch Sie können sehen, gut, Apple Watch Vorlagen. Dann haben wir viele tolle Vorlagen wie diese, Bootstrap. Wenn Ihre Entwickler Bootstrap verwenden, können Sie mit dieser Bootstrap-Bibliothek direkt Ihr gesamtes Design verdrahten . Außerdem gibt es Vorlagen für UX Design. Wir brauchen sie momentan nicht, Use Cases und andere Projekte. Es gibt also eine Menge großer Symbol-Bibliothek, die kostenlos zu verwenden ist. Sie können es laden. Ich werde Ihnen zeigen, wie wir es laden werden. Dies sind im Grunde BML-Dateien. Sie können sehen, oder wenn Sie mit der rechten Maustaste „Download BMML.“ Wenn Sie hier klicken, Download BMML, Sie werden diese Datei herunterladen und wir werden in unsere Balsamiq Mockup laden, um diese zu laden. Nun, lassen Sie uns zum Fenster von Balsamiq Mockups wechseln, und ich werde Ihnen nur den Überblick über die Verwendung dieser App geben. Hier ist der Bildschirm von Balsamiq Mockups. Sie können hier sehen, hier haben wir neue Balsamiq Projekt Tool. Sie können doppelklicken und den Namen in Wstudio ändern. Ich werde es umbenennen. Auf der linken Seite sehen Sie hier unsere Mockups. Es könnte ein, zwei, drei oder vier Wireframes geben. Es liegt an dir. Dann auf der rechten Seite haben wir Projektinformationen. Wenn Sie hier klicken und etwas beschreiben möchten, können Sie Ihren Designern oder was auch immer, Ihren Entwicklern, anderen Teammitgliedern einige Informationen geben . Dann gibt es noch zwei weitere, Skizze, und Sie können hier drüben sehen, Skizzenmodus ist etwa so. Wir haben dieses iPhone hier drüben, so dass Sie sehen können, dass es ein bisschen skizzenhaft ist. Es ist nicht perfekt rund. Wenn ich zu Wireframe wechseln, können Sie sehen, dass es seine Form geändert hat. Es ist ein bisschen präziser aussehen. Es liegt also an Ihnen, welche Sie verwenden möchten. Es ist etwas sauberer. Es spielt keine Rolle, welche Sie verwenden. Ich werde das jetzt löschen. Also lassen Sie uns dies in Landing Page umbenennen. Das ist unsere Zielseite. Ich werde Sie gerade jetzt mit dieser Schnittstelle vertraut machen. Ich werde hier nichts erschaffen. Nun, oben, können Sie hier drüben sehen, wir haben „Alle Vermögenswerte“. Assets sind im Grunde die Dateien, die Sie importieren können. Zum Beispiel, wenn Sie irgendwelche Bilder in Ihren Mockups verwenden möchten, können Sie sie von hier importieren, gehen Sie zu diesem Projekt, Import, Assets. Auf die gleiche Weise können Sie die BMML-Symbolbibliotheken importieren. Ich habe diese IOScontrols.BMML. Ich kann diese Datei auswählen und öffnen, und es wird Symbole Library sein, können Sie hier sehen. Wo ich es finden kann, wenn ich zu diesem Schweizer Symbole gehe, können Sie sehen, dass ich viele Bootstrap-Grids geladen habe, diese iOS7-Warnung, aber wie Sie hier sehen können. Dies sind IOS7-Steuerelemente. Sie können sehen, dies sind einige Toggle-Kontrolle. Dies sind die Steuerelemente, die nicht standardmäßig waren, in dieser Software vorhanden und ich habe sie von diesem geladen. Lassen Sie mich Ihnen zeigen, welche anderen Kontrollen es hat. Sie können zu Assets gehen, Sie können zu Big gehen, wo wir Diagramme und Bilder haben , und einige andere Dinge. Dann können Sie zu Buttons gehen. Es gibt viele Tasten, Ein-Aus-Schalter, numerische Schritt-Tasten und viele andere Steuerelemente. Sie können auch gemeinsam gehen. Es gibt Symbol, Symbolnamen, Bilder, Links, Etiketten. Sie können auch zu Containers gehen, wo wir dieses Browserfenster verwenden werden. Sie können hier für unser Wireframe-Design, Hintergrundformulare für Formular-Steuerung, Symbole sehen. Wir haben eine vollständige Bibliothek von Font Awesome Icons hier drüben. Dann haben wir iOS-Steuerelemente. Sie können hier drüben sehen. Dann haben wir Layout-Steuerelemente wie Feldset, Tastenleisten, Akkordeons, Sitemaps, Taskleisten. Dann haben wir Mockup. Was sind die Befehle, die wir geben werden. Vielleicht auf der Seite eines beliebigen Teils eines Drahtmodells. Dann haben wir Medien, wo wir Bilder, Webcam, Video-Player haben. Also, wenn du kein Symbol finden kannst, schreib hier drüben wie bu ein. Ich werde für Schaltflächen schreiben, und Sie können sehen, dass es viele Schaltflächen gibt. Taste, Taste, Bar, Kreistaste, mehrzeilige Schaltflächen, spitze Taste. Es gibt auch einige Symbole, die mit B. beginnen also wenn ich Fehler schreibe, können Sie hier drüben sehen, wir haben das Symbol hier drüben, was ein Fehler ist. So verwenden Sie dieses schnelle Add. Dies ist sehr hilfreiches Werkzeug hier drüben. Auch, wenn Sie zum Symbol gehen, sind dies die Symbole, die ich geladen habe. Ich habe die BML-Datei heruntergeladen und einige BML-Bibliotheken wie Bootstrap und iOS7 Steuerelemente hier importiert. Jetzt können Sie auch zu Texten gehen, wenn Sie eine Überschrift oder ein Etikett oder so etwas schreiben müssen. Das sind also alle Texte Importe, Brotkrumen, Textblock. Sie können so etwas verwenden, wenn es keinen Inhalt gibt oder Sie eine sehr skizzenhafte Vorstellung von Ihrem Layout wünschen. Dies ist die ganze Einführung Ihres Balsamiq Mockup Interface. Hier können Sie neue Mockups hinzufügen. Sie können dieses duplizieren, indem Sie hier mit der rechten Maustaste auf diesen Pfeil klicken, es dupliziert umbenennen. Sie können auch alternative Versionen für dasselbe Mockup oder Wireframe erstellen , das Sie gerade entwerfen. Außerdem gibt es mehr Kontrollen. Sie können sehen, ob ich versuche, etwas zu erschaffen, lassen Sie mich einfach ein paar Dinge hier drüben. Ich habe das und ich habe dieses Bild, und ich möchte sie ausrichten. Wenn es nicht ausgerichtet ist, wähle ich beide mit Shift aus. Wenn Sie hier nichts sehen, können Sie auf diese, Informationsfeld, klicken. Dies sind die Steuerelemente, um sie auszurichten. Ich kann sie in der Mitte ausrichten, oder ich kann sie links ausrichten, oder ich kann sie so in der vertikalen Mitte ausrichten . So richten wir es aus. Wenn wir es gegen einen Container ausrichten wollen, wie ich dieses Browserfenster habe, also werde ich es zurückverschieben, indem Sie mit der rechten Maustaste klicken und An Zurück senden. Zum Beispiel, so etwas und ich werde mit der rechten Maustaste klicken und sperren. So wird es sich nirgendwo bewegen. Lass es uns nicht entsperren und ich werde beide bewegen. Erstellen Sie eine Gruppe, Control G oder Befehl G, um eine Gruppe zu erstellen, und ich werde diese Gruppe damit verschieben, also werde ich es so ausrichten. Auch, wenn Sie so etwas ziehen, können Sie sehen, hier haben wir intelligente Leitfaden. Es zeigt, dass es die Mitte ist. Es ist die linke Ecke hier drüben, so etwas. Wenn wir hier drüben klicken, können Sie sehen, Sie können auch einige Scrollbalken hier setzen. Ändern Sie den Hintergrund. Alles über dieses Steuerelement, die Eigenschaften eines beliebigen Steuerelements werden hier drüben sein; Größe, Position, Layering, extra usw. Es gibt wenige Steuerelemente wie ich denke, Kopieren Einfügen, vielleicht Gruppe, Gruppierung aufheben. Ich habe nichts von hier benutzt. Ich benutze nur meine Tastatur, weil sie sehr selbsterklärende Tastenkombinationen sind. Du kannst hier drüben abschließen. Meistens sperre ich diesen Browser-Bildschirm, so dass er sich nicht bewegt und meine Objekte in Bezug auf diese platziert. So werden wir diese Balsamiq Mockups verwenden. Es ist sehr einfach zu bedienen. Ich glaube, ich habe viel erklärt. Sobald Sie mit der Erkundung beginnen, werden Sie dieses Tool wirklich lieben. Fahren wir mit der nächsten Lektion fort, in der wir unser Drahtmodell tatsächlich entwerfen werden. 15. Wireframing in Balsamiq Mockups Teil 1: In dieser Lektion werden wir diesen Wireframe für unser Webdesign-Projekt W studio entwerfen und Balsamiq Mockups verwenden. Ich habe einige Einführung gegeben, und während dieser Lektion werde ich Ihnen einige der Tastenkombinationen zeigen, die ich viel Zeit verwenden werde . Lasst uns loslegen. Wir werden ein neues Projekt erstellen, oder wir werden ein Projekt öffnen, das wir letztes Mal gespeichert haben. Das ist unser W Studio, es ist einfach leer und wir haben ein Mockup erstellt. Wenn Sie hier kein Mockup haben, können Sie auf dieses Pluszeichen klicken und ein neues Mockup hier oder Control N oder Befehl N für ein neues Mockup erstellen. Das erste, was wir tun werden, ist, dass wir hier einen Container bekommen , der unser Browser sein wird. Unser Browser-Fenster, lassen Sie es ein bisschen breiter machen mindestens 900 Pixel oder vielleicht ein bisschen mehr als 900. So wie das. Außerdem werden wir es ein bisschen mehr erweitern, vielleicht 1.500 oder so etwas hier drüben. Ich denke, das reicht. Wenn wir es mehr erweitern wollen, werden wir es weiter ausbauen. Jetzt werden wir mit der rechten Maustaste darauf klicken und wir werden diesen Web-Browser sperren. Jetzt ist unsere Basis-Web-Browser-Webseite hier behoben. Das erste, was wir bekommen werden, sind Medien, die unser Bild oder Logo hier drüben sein werden. Sie können auch diesen oder diesen verwenden, es ist für Sie. Ich werde dieses Bild verwenden, ich werde es Logo nennen. Unser Logo wird hier drüben sein, dann werden wir unsere Navigation benutzen. Mal sehen, welche Navigation wir hier haben, vielleicht Linkleiste so. Dies ist unsere Hyperlinkleiste, und ich werde diese in vielleicht Webdesign umbenennen. Damit dies erfolgreich ist, werden wir unser Word-Dokument verwenden oder Sie können den Inhalt unserer Seite, Web Design Brand Uplift, sehen . Wir haben es im ursprünglichen Design umbenannt, also ist dies Tour, wer wir sind, oder hier hatten wir Fallstudien, Kontakt und bekommen ein Angebot. Wir werden diese vier Links hier drüben platzieren, lassen Sie sie von hier kopieren. Dieses mein Word-Dokument, kopieren Sie sie von hier, und ich werde es hier einfügen. Sie sind alle durch ein Komma getrennt, ich werde die gleiche Syntax verwenden, die sie verwendet haben. Setzen Sie einfach ein Komma hier drüben, und unsere Navigation ist erledigt. Hier drüben gibt es noch einen Knopf, der „Angebot bekommen“ ist. Ich werde hier klicken Schaltfläche, ich werde eine Schaltfläche hierher ziehen, doppelklicken, und wir werden ein Angebot zu bekommen. Wir haben unseren Knopf hier drüben, und wir haben unser Logo und alles eingerichtet. Nun, als nächstes haben wir die Header-Elemente, Untertitel, unser Bild oder Video hier drüben. Für Video-Player werde ich diesen Video-Player hierher ziehen. Lassen Sie uns diesen Videoplayer so hierher bewegen. Sie sich keine Sorgen um das Design oder das endgültige Design, dies ist nur ein Drahtmodell. Platzieren Sie einfach die Elemente, die dort sein werden, damit unser Kunde sieht und beurteilt, dass dieses Element hier nicht fehlt. Ich werde aufstehen Spielsymbol hier drüben, lassen Sie es uns so bewegen. Nun, für die Überschrift, gehen wir zurück zu unserem Word-Dokument, kopieren Sie das in unseren Text, wo ist unser Text? Hier haben wir einen Text, oder wo ist Überschrift? Untertitel, ein großer Titel. Wir werden diesen großen Titel ziehen, diesen hier rüber legen und wir werden ihn so ziehen. Wird es mehrzeilig sein? Lassen Sie uns in diesem Panel sehen. Auto Größe, und wir haben nicht, ich denke, mehrzeilige hier drüben. Wir werden hier einen mehrzeiligen Text wie diesen verwenden. Wir haben mehrzeiligen Text, lasst uns ihn entfernen, so etwas. Wir werden die Größe auf 40 erhöhen, was unsere Schlagzeilen Größe war, lasst uns so etwas platzieren. Wir haben unsere Schlagzeile hier drüben. Nun, für die Untertitel, Untertitel, werden wir dies verwenden, mal sehen, was unser Untertitel, Untertitel oder unser erster Absatz ist . Ich werde es so benutzen. Denken Sie daran, dass, selbst wenn Sie diese Dinge am Ende platzieren, vielleicht im Design wir es hier ersetzen könnten. Dies ist keine Platzierung oder Design-Probleme, es ist nur, dass unsere Inhalte in diesem Teil und in diesem Bereich oder ich vermisse keine entscheidenden Inhalte hier drüben, nur um sicherzustellen, und auf der gleichen Zeile oder der gleichen Seite mit Ihrem Kunden. Diese sind sehr wichtig, lassen Sie es löschen und ich werde wieder Alt- oder Wahltaste verwenden , um eine Kopie zu erstellen, genau wie Photoshop, und ich werde etwas hier drüben setzen, und wir werden vielleicht 28 verwenden, Nein, ich denke, 20 werden gut genug sein. Wir haben unsere Unterüberschrift hier drüben, mach dir keine Sorgen um die Ausrichtung, wir machen uns keine Sorgen um das Design jetzt, wir wollen nur unsere Elemente hier drüben, erster Absatz, wir müssen sehr schnell darin sein. Ich habe nur ein paar Texte hier drüben, Absatz, wir haben Absatz, und das ist unser Absatz hier drüben. Jetzt brauchen wir einen Knopf, um loszulegen, hier drüben, wir haben eine Schaltfläche „Erste Schritte“, also werden wir darauf klicken, „Erste Schritte“. Es gibt zwei Dinge, Sie können die Größe dieser Schaltflächen ändern, Sie können ihnen auch Farben geben, wenn Sie möchten. Normalerweise schlage ich vor, dass Farben nicht gegeben werden sollten, vielleicht, wenn Ihr Kunde nicht versteht und ob es sich um einen Knopf handelt oder nicht, können Sie ihn in etwa so hervorheben. Das bedeutet, es ist ein Knopf und es ist hier sehr hervorgehoben. Jetzt ist unser Header fast fertig, lassen Sie uns das ein bisschen nach unten bewegen, so und auch diesen hier drüben. Jetzt ist unser Header fertig, lassen Sie uns eine horizontale Linie oder H-Regel erstellen, die aufgerufen wird. Ich werde hier eine Zeile bekommen, um sicherzustellen, dass dieser Abschnitt beendet ist, also gehen wir zum nächsten Abschnitt. 16. Wireframing in Balsamiq Mockups Teil 2: Nun, was wir tun werden, ist nur dieses und dieses zu kopieren, weil unser nächster Abschnitt auch eine Überschrift und Unterüberschrift wie diese hat. Mal sehen, was die Unterposition oder Überschrift ist. Meilensteine, ich werde einige der Abschnitte dieses Videos mit viel Geschwindigkeit überspringen Meilensteine, ich werde einige der Abschnitte dieses Videos mit viel , weil sie die gleiche Aufgabe sind, die wir immer wieder getan haben. Mach dir keine Sorgen, wenn ich es sehr schnell mache. Ich werde es zentrieren. Vielleicht so etwas. Jetzt ist es in der Mitte. Control C, Control V. Ich denke, ich habe zusätzliche Kopien gemacht , also werde ich auch geben, um es zentriert auszurichten, so etwas. Jetzt haben wir unseren Weg hierher. Jetzt haben wir Schritt 1, 2, 3, 4 und sie werden einige Symbole haben. Ich gehe zu den Symbolen. Sie können einige Symbole platzieren, überspringen, Sie verschwenden Ihre Zeit hier drüben, indem Sie Symbole auswählen. Was ich tun werde, ist, dass ich zu den Medien gehe. Ich werde ein Symbol Namen geben wie, Vorname wurde Ihr Business-Design für Ihre Benutzer bewerten. Bewerten Sie Ihr Unternehmen, so etwas. Dann haben wir einen Text darunter. Es wird ein Text wie dieser sein. Ich gebe Ihnen hier einen Tipp. Kontrolle C, Kontrolle V. Es wird in der Mitte so sein, ein bisschen kurz. Vielleicht können Sie die Farbe in etwas stumpfes Grau zu so etwas ändern. Nun, was wir tun werden, ist, dass wir es gruppieren, steuern oder Befehl G, und drücken Sie die Option, werden wir 1, 2, 3, 4 Kopien machen . Die vier Exemplare haben wir bereits angefertigt. So werden Sie auch in Ihren Entwürfen erstellen. Dies ist eine sehr gute Methode. Erzeugen Sie ein Element, das immer wieder wiederholt wird. Machen Sie es perfekt und wiederholen Sie es dann. Hier haben wir die zweite Option. Ich werde das mit Geschwindigkeit überspringen, denn das wird sich wiederholende Aufgabe sein. Sie müssen doppelklicken, um in eine beliebige Gruppe zu gelangen. Sie können auch mit der rechten Maustaste klicken und die Gruppierung aufheben. Wo ist die Aufteilung? Es ist im Grunde das. Sie können auch auf diese Aufheben der Gruppierung klicken. Ich denke, es ist Command Shift Control G oder Command Shift G, um die Gruppierung aufzuheben. Sie sind einfach so zu bearbeiten. Andernfalls müssen Sie darauf doppelklicken, um in das Symbol zu gelangen. Jetzt werde ich mein Video wieder beschleunigen. Ich werde sie wieder gruppieren. Richten Sie sie erneut aus, weil einige von ihnen falsch ausgerichtet sind. Ich werde auf beide klicken, um sie wieder so auszurichten. Wenn Sie denken, dass etwas nicht ausgerichtet ist, stellen Sie sicher, dass Sie es so ausrichten. Alle von ihnen wurden ausgerichtet. Jetzt werde ich Anpassungen vornehmen. Vielleicht werde ich sie alle so auswählen. Das ist keine Gruppe. Befehl G oder Kontrolle G. Jetzt werden wir alle Gruppen auswählen und wir werden klicken. Ich glaube, es war dieser, ja, dieser hier. Es hat alle von ihnen horizontal in der Mitte so ausgerichtet , mit dem gleichen Abstand von jeder Seite. Jetzt sind sie viel besser ausgerichtet. Alt-Option. Ich halte es und ziehe es, um eine weitere Kopie zu erstellen. Nun, wir werden zu einem anderen Abschnitt ziehen, der unser Team ist, denke ich. Ja, wir haben unser Team. Sie können auch Ihre Erfolge oder so etwas zeigen. Aber ich werde diesen Abschnitt überspringen. Unser Team ist etwas Besonderes. Wir sind voll davon. Ich werde Befehl C oder Control C, Steuerung oder Befehl V kopieren . Ziehen Sie es nach unten. Nun, wir werden ein paar Bilder hier rüber bekommen, wie Kopfaufnahmen oder so etwas. In den Medien haben wir diese Webcam, die dem ähnelt, was wir hier brauchen. Wir haben hier drüben so einen, und wir können hier drüben einen Text haben. Vielleicht ein Link oder nur ein Text. Wir können diesen Untertitel oder vielleicht Text verwenden. Hier ist Name mit Titel. Der Name ist John Doe. Wir sollten uns nicht viel Sorgen über den Text machen, der sehr klein ist. Wir haben hier einen Text, der ein großer Text war. Hier haben wir vielleicht nur eine Zeile, einen Titel oder ein Label oder so etwas. Also mach dir keine Sorgen darüber. Ich werde es hier rüber stellen und ich werde es duplizieren und seinen Namen wie Internet schreiben. Vielleicht Internet Marketer, so etwas. Ich werde das alles schnell duplizieren. Richten Sie sie zuerst aus. Ich drücke die Umschalttaste, um mehrere Auswahlen zu treffen. Dann werde ich sie so ausrichten. Gruppieren Sie es, wählen Sie alle aus, Kontrollbefehl G. Wir haben eine Gruppe hier drüben. Es wird mit der oberen Gruppe hier ausgerichtet werden, Alt- oder Wahltaste 1, 2, 3. Jetzt werde ich sie schnell mit dieser horizontalen Ausrichtung ausrichten. Sie können sehen, dass wir unseren Teambereich erledigt haben. Auch hier brauchen wir eine horizontale Regel. Also werden wir es so duplizieren. Jetzt haben wir ein paar Weltraumprobleme hier drüben. Entsperren Sie den Browser und machen Sie ihn so etwas größer. Verriegeln Sie es erneut, damit Sie sich nicht irrtümlich bewegen. Auch hier brauchen wir eine Überschrift und eine Unterposition. Lass es uns ein bisschen Größe machen. Befehlskontrolle C, Befehl V. Wir haben hier einen Absatz. Für unseren Absatz werden wir diesen Text hier verwenden. Dies sind die Notationen, die Sie verwenden können. Sie können Ihre Haarfarbe rot sehen. In diesem wird der Text von roten Farben sein. Also, wenn Sie so etwas verwenden möchten, können Sie es verwenden, aber ich möchte nur einfachen Text und Absatz verwenden, also sollten wir uns jetzt keine Sorgen darüber machen. Ich werde dies auswählen, doppelklicken, es hier einfügen, zentrieren und so ausrichten. Jetzt haben wir zwei Knöpfe hier drüben. Lassen Sie uns ein paar Schaltflächen hinzufügen oder vielleicht können wir die gleiche Schaltfläche kopieren. Befehl C und Befehl B. Lassen Sie es uns so nach unten verschieben. Ich ziehe es. Also haben wir zwei Tasten, ich denke, ein Angebot zu bekommen oder ich denke, kostenlose Beratung. Also haben wir zwei Knöpfe hier drüben. Wir haben ein paar Texte hier, was ein Label sein wird, denke ich. Lasst uns ein paar Texte wie ein kostenloses Zitat setzen , ich weiß nicht mehr, was wir hier drüben gemacht haben. Auch hier haben wir Telefonnummern 0800-333-555. Es wird also damit in Einklang gebracht werden. Jetzt haben wir fast die Form unserer Hauptseite. Fügen wir hier die Adresse hinzu, die diese ist, Befehlskontrolle C. Lassen Sie uns hier Text hinzufügen, was dies sein wird. Mal sehen, was wir hatten. Absatz ist fett formatiert. Wir müssen Sternchen hinzufügen, um es fett zu machen. Also verwende ich Sternchen vor dieser Zeile. Also haben wir diesen einen mutigen. Das ist also erledigt. Lassen Sie uns unsere Links hier rüber bewegen, die unsere sozialen Links sein werden. Lasst uns Facebook schreiben. Das wird also Facebook-Link sein. Dann brauchen wir ein Twitter-Quadrat. Dann brauchen wir ein Instagram oder LinkedIn. Vielleicht denke ich, LinkedIn. Jetzt können Sie auch alle von ihnen klicken, den Raum zwischen ihnen konstant machen, und wir werden sie gruppieren, steuern G des Befehls G. Lassen Sie uns es so bewegen. Also haben wir unser erstes Drahtmodell bereit. Wir müssen uns nicht darum kümmern, wie es aussehen wird, wenn es Design abgeschlossen ist. Wir brauchen nur die Elemente, um auf dieser Seite zu sein. So im Moment können Sie sehen, dass es nicht in der Mitte ist. Auch dieser, das muss in der Mitte so sein. Wir haben also ein Problem hier drüben. Sie können auch die ganze Gruppe so auswählen und verschieben. Es muss nicht sehr pixelgenau sein, aber ich denke, es sollte eine Form haben. Also, um die Idee zu bekommen, wie es aussehen wird. Ich glaube, wir haben hier etwas vermisst. Außerdem denke ich, dass wir hier zwei Nutzerbewertungen hinzugefügt haben. Dies kann in der Entwurfsphase hinzugefügt werden. Also, wenn Sie es hier hinzufügen möchten, können Sie zu Benutzerbewertungen hier hinzufügen. Wo ist unser Layout? Ich schätze, so dass Sie Mockup. So können wir auch einige Mockup-Overhead verwenden, können wir Kundenrezensionen in diesem Bereich hinzufügen. Ich werde es so bewegen. Ich werde das erschaffen und es so hierher schieben. Es macht also Sinn, dass wir auf diesen Abschnitt hinweisen. So können Sie Ihr Design kommentieren. Sie können auch alternative Versionen erstellen, in denen Sie Ihr Layout variieren, oder Ihr Design kann ein weiteres Modell für das gleiche sein und es an Ihren Kunden senden. Ich benutze auch diese geschweiften Klammern, vielleicht Video von Ihrem Kunden mit Ihrem Produkt, so etwas. Also ich weiterhin diese Anmerkungen hier hinzufügen, um sicherzustellen, dass Ihr Kunde oder sorry Ihren Kunden, verstehen, was ich meinte, dann werden wir es in PNGs exportieren. Wir werden alles in das PNG exportieren und wir werden es an unseren Kunden senden. Mal sehen, wie unser PNG aussehen wird. Also haben wir Landing Page PNG. Dies ist unser Wireframe und Sie sollten stolz darauf sein. Wir haben die meisten User Experience Design-Techniken verwendet. Stellen Sie sicher, dass Sie kommentieren, um Ihre Ideen und so etwas zu erklären. In der nächsten Phase werden wir mit diesem Drahtmodell entwerfen und eine High Fidelity oder Visual Design Phase Ihrer Landing Page erstellen. Gehen wir also zur nächsten Lektion über. 17. Atomic: Heute werden wir über ein Design-Framework namens Atomic Design sprechen. Dieses Design-Framework wurde von Brad Frost vorgeschlagen. Ich denke, das ist der Weg, um jetzt in der letzten Zeit zu gehen wenn unsere Web-Apps und unsere mobilen Apps, sie haben 50 Bildschirme. Dann benötigen Sie ein Framework, um Ihr Design zu steuern. Warum werde ich das anfassen, denn dies ist ein bisschen fortgeschrittener Designkurs. Wir werden sehen, was Atomic Design eigentlich ist, und auf dieser Grundlage werden wir unsere UI-Design-Richtlinie in der nächsten Lektion erstellen. Was ist Atomic Design? Atomic Design wurde im Grunde genommen von der Idee der Chemie genommen, wo wir Atome, Moleküle und Organismen haben. Nun, was es tut, ist, dass es fünf Arten von verschiedenen Ebenen von Designs gibt. Wir teilen unsere Gestaltungselemente in fünf Ebenen auf. Atome, ist die einfachste Form Moleküle. Dann kombinieren sie verschiedene Gestaltungselemente, um Moleküle zu erzeugen. Dann werden verschiedene Moleküle kombiniert, um Organismen zu schaffen. Wir stellen verschiedene Organismen zusammen, und sie erstellen Vorlagen, die in Seiten umgewandelt werden können, indem sie einen Inhalt hinzufügen. Lassen Sie uns einige der Beispiele aus diesem Blogbeitrag sehen. Sie könnten hier drüben sehen, hier haben wir Atome, Moleküle, Organismen, Vorlagen und Seiten. Nun, Atome sind Sie die Bausteine sehen können, sehr einfach in Web-Interface-Elemente wie Beschriftung eines beliebigen Feldes, dann Eingabefeld wie die Schaltfläche. Das sind alles Atome. Dann haben wir Moleküle. Sie können sehen, dass wir diese drei Atome kombinieren, um eine Suchleiste zu erstellen. Dies wird nur eine einzige Aufgabe ausführen. Ein Molekül wird eine einzige Aufgabe erfüllen. Trotzdem sind sie sehr einfach. Sie haben keine komplexen Funktionen oder sind nicht sehr komplex. Dann Organismen. Jetzt werden Organismen in eine Form des Designs geraten. Wie Sie Ihren Header sehen können oder er nennt es Massenkopf eines beliebigen Designelements. Ich nenne es Header und Navigation. Sie können diese Überschriftenleiste oder Navigationsleiste sehen. Es hat Logo, dann hat es Navigation, alle Links. Dann hat es eine Suchleiste oder vielleicht kann es auch soziale Links haben. Das wird ein Organismen sein. Wir haben hier ein Molekül, ein Molekül hier drüben und ein Molekül, das unser Logo und Link sein wird, oder vielleicht ist es ein Atom. Grundsätzlich kombinieren wir verschiedene Moleküle, um Elemente zu schaffen und zu entwerfen. Es wird Organismen genannt werden. Warum brauchen wir all diese Methodik und all diesen Rahmen, um unser Design zu kontrollieren? Wenn Sie eine sehr große App entwerfen, und wir haben diesen Header auf allen verschiedenen Seiten, und vielleicht haben wir verschiedene Header in wenigen Seiten, also wird dies alles kontrollieren. Wir wissen, dass dieses Designelement oder dieses Designmuster oder Organismus für diese Seite bestimmt ist, und dieses ist für diese Seite. Sie können hier einige weitere Beispiele sehen, wie dies ist die Yahoo Top Bar. Dann haben wir Tumblr, dann haben wir die CNN, und Facebook und Google. Sie können alles darüber lesen, wenn Sie wollen. Es gibt auch ein Buch von Brad Frost zu diesem Thema. Wenn Sie genauer gehen wollen, denke ich, Sie können voran gehen, und bestellen Sie sein Buch, das $10 ist, denke ich. Jetzt werden Vorlagen im Grunde verschiedene Organismen kombinieren. Normalerweise werden Vorlagen wie ein Drahtmodell sein. Sie werden den tatsächlichen Inhalt der Seite nicht ausfüllen. Im Moment haben wir verschiedene Organismen geschaffen, oder Sie können sie Designmuster nennen. Wir bauen im Grunde eine Design-Bibliothek. Wir können hier einen Block auswählen und den zweiten Block setzen, also ist das im Grunde ein anderer Organismus. Dann haben wir noch ein paar Organismen, die Sie hier sehen können. Hier haben wir einen Blogbeitrag. Das ist ein anderer Organismus. Dann haben wir die Liste, Bilderliste, das ist ein anderer Organismus. Dann haben wir diesen Absatz und Videobeschreibung für dieses Video, das ist ein anderer Organismus. So erstellen wir eine Vorlage. Jetzt werden Vorlagen uns im Grunde helfen, unser Design sehr schnell zu erstellen. Warum? Wenn Sie eine WordPress-Blog oder eine WordPress-Website, die Sie wissen, entworfen haben, dass die Blog-Seiten und die Blog-Beitrag-Seiten, sie unterscheiden sich von der Hauptseite Ihrer Website. Wir werden eine Vorlage für die Hauptseite entwerfen. Dann für die zweite Seite, werden wir nur diesen Organismus zu bekommen, und legen Sie ihn an der Spitze aufeinander, um eine andere Seite zu erstellen. Es wird sehr einfach sein, wenn wir ein integriertes Framework haben , um Designrichtlinien zu folgen. Dies ist im Grunde ein Design-Framework. Wir werden es beim Erstellen von UI-Entwurfsrichtlinien verwenden. Dies ist ein sehr guter Rahmen. Ich wollte wirklich, dass ihr da reinkommt. Jetzt gibt es eine andere Möglichkeit, den gleichen Ansatz zu erstellen. Nur wenige Leute, was sie tun, ist, dass sie diese Vorlagen verwenden und sie als Graustufenvorlage verwenden. Sie verbessern es einfach weiter und fügen Details hinzu, bis zum endgültigen Design. Sie können hier sehen, es hat gezeigt, dass Studio in Pittsburgh einen ähnlichen Prozess folgen, wo Design Sterne, Graustufen und Layout weniger. Sie versuchen normalerweise, ihre Komplexität und Treue zu erhöhen. Treue ist im Grunde, wie genau es ist oder wie nah es am tatsächlichen Produkt ist. Wenn es sich um ein Drahtmodell handelt und es keinen Inhalt hat, nur Linien wie diese, ist es eine geringe Wiedergabetreue. Wir haben hier keine SMS. Sie können hier sehen, sobald wir anfangen, Text und einige Details zu setzen, wird es mittlerer Treue sein. Die Mockups, farbigen Mockups, die wir in Photoshop erstellen, werden High Fidelity genannt. Seiten. Nun, Seiten sind die gleichen wie eine Vorlage, es nur sie haben den echten Inhalt. Sie können hier sehen, sie fingen an, Inhalte hinzuzufügen, wie Bilder. Also der eigentliche Inhalt hier drüben. Das ist echter Inhalt, deshalb zeigt es sich hier drüben. Seiten werden die höchste Ebene der Treue sein, die ich Ihnen gerade beschrieben habe, dass sie im Grunde die Mockups sind. Das ist das Atomic Design. Sie können diesen Beitrag lesen. Ich werde den Link zu diesem teilen. Außerdem haben sie eine andere, ich denke, es ist auch eine weitere Erklärung hier drüben. Ich werde beide Links mit Ihnen teilen. Du kannst es lesen. Es ist sehr notwendig. Ich denke, Sie haben die Idee von Atomic Design und warum ich es in meinen Entwürfen folge. Gehen wir zur nächsten Lektion über, um UI-Entwurfsrichtlinien zu erstellen. 18. 8-Punkt-Raster mit 8-Punkt: Heute werden wir über ein Design-Framework namens 8-Punkt-Grid-System sprechen. Es ist im Grunde Grid-System, Sie können es auch auf vertikale Gittersysteme und horizontale Gittersysteme anwenden. Wenn Sie nun nicht wissen, was vertikale und horizontale Rastersysteme sind, müssen Sie meine Kurs-Typografie für UI-Designer sehen. Ich habe viel über Gittersysteme und vertikalen Rhythmus und viele andere Designelemente im Zusammenhang mit Gittern erklärt . Das 8-Punkt-Gittersystem ist wegen des Materialdesigns beliebt. Googles Materialdesign basiert auf 8-Punkt-Gitter-System und Sie können es auch 8-Pixel-Gitter-System nennen. Ich werde mit wenigen Beispielen erklären, was eigentlich 8-Pixel-Grid-System ist und wie wir es in unserem Web-Design oder jedem UI-Design anwenden können. Lassen Sie mich es mit einem Beispiel für Photoshop-Datei erklären. Ich werde eine neue Datei öffnen. Ich werde die Breite nehmen ist 1.280 und Höhe wird 2.400 sein, 1.280 ist ich denke, Standard für ein Bootstrap-Gitter, also werde ich es erstellen. Wir haben diese Akte. Nun, was ich tun werde, ist, dass ich ein 8-Pixel-basiertes oder 8-Punkt-Gittersystem oder ein Leitungslayout darauf erstellen werde . Sie können ein neues Leitlinienlayout anzeigen. Wir werden 12 Spalten und Rinne verwenden. in der Rinne sicher, dass alles, was Sie in Ihren Messungen verwenden , das Vielfache von acht sein wird. Sie können hier sehen, ich habe Rinne ist gleich 24 Pixel, was wieder das Vielfache von acht ist. Sie können auch 16 verwenden, wenn Sie möchten, es liegt an Ihnen. Jetzt können Sie in den Zeilen für den vertikalen Rhythmus die Höhe auf 48 Pixel verwenden, oder Sie können 16 Pixel verwenden, oder Sie können acht Pixel verwenden. Es liegt an dir. In meiner Design-Übung habe ich Patron-Overlay von 8-Pixel-vertikalen Gittern verwendet. Wenn Sie mit 48 gehen, haben Sie mehr Platz und ich denke, es ist einfacher, sich auszurichten, und Sie können auch 32 verwenden, es liegt an Ihnen. So werden wir 8-Punkt-Gittersystem erstellen. Lassen Sie mich jetzt mit ein paar Knöpfen erklären. Zum Beispiel, wenn ich versuche, eine Schaltfläche zu erstellen, können Sie hier sehen, es wird wirklich perfekt in dieses Gitter kommen, und seine Größe wird gleich dem Vielfachen von acht sein. Wenn ich zu diesem Info-Panel gehe und wenn ich Control auf diese Ebene klicke, können Sie hier über 200 mal 48 Pixel sehen. Grundsätzlich ist es ein Vielfaches von acht, also 48 ist ein Vielfaches von acht. Sie können hier auch etwas Ähnliches verwenden, vielleicht 196 oder so etwas, das auch ein Vielfaches von acht ist. Aber ich denke, meistens wird diese Höhe gut genug sein , um alle Gestaltungselemente zu kompensieren. Dies ist, wie Sie diese Design-Elemente tun werden. Nun, andere Einstellungen, die Sie hier tun können, sind, gehen Sie zu Einstellungen und Hilfslinien Raster und Slices, und ich verwende 64 Rasterlinien Pixel für jeden, also Division ist vier. Wenn wir 64 durch 4 teilen, wird es 16 Pixel sein. Es ist im Grunde ein Gitter, das Ihnen helfen kann, Ihre zu erstellen, also werde ich Grid-Befehl Doppelpunkt, Koma aktivieren , ich denke, es ist ein Zitat. Also Befehl Zitat, und Sie können sehen, dass wir das haben. Wenn wir nun versuchen, dieses Raster zu verwenden, das Photoshop-Raster ist, können Sie sehen, dass Sie eine Schaltfläche entwerfen können, die sich perfekt innerhalb des Bereichs dieses acht Pixel-Rastersystems befindet. Also lassen Sie mich Ihnen zeigen, was es ist. Es ist 256 von 64. Diejenigen von Ihnen, die Informatik studiert haben, wissen Sie bereits, dass unsere Computer und unsere Bisse und das ganze System auf acht basiert, also 32, 64, so etwas. Das funktioniert wirklich gut, wenn Sie etwas entwerfen. Lassen Sie mich das verstecken. Auf dieser Seite können Sie sehen, das sieht wirklich cool, sehr proportional. Dasselbe, Sie können die Typskala verwenden. Type-Skala, können Sie acht Pixel, 16 Pixel, 24 Pixel verwenden. Dann kannst du es haben, lass uns hier etwas kreieren. Ich werde 16 Pixel verwenden. Farben sollten diese sein, und lasst uns hier etwas eingeben. Dies ist 16 Pixel, das sind 32 Pixel, das sind 24 Pixel, und das sind 64 Pixel. Lassen Sie uns die Größen von hier aus ändern. Ich werde 64 für diesen verwenden, 24 für diesen, 32 für diesen, und 16 für diesen. Diese Skala wird Ihnen wirklich bei der Gestaltung helfen. Das bedeutet nicht, dass Sie auf dieser Typskala zu viel fixiert sein müssen. Sie können auch Ränder und Füllstände verwenden, um sie anzupassen. In meinem echten Design verwende ich nicht 64 oder 24, ich verwende 49 und 54 Pixel, und ich verwende Marge und Padding, um sie in mein 8-Pixel-Gittersystem zu passen. Dies ist alles über 8-Pixel-Gittersystem. Sie können dieses Rastersystem in Ihren Pads, in Ihren Rändern, in Ihren fast jedem Element Ihres Designs verwenden. Wenn Sie einen Abschnitt haben, wie ich diesen Abschnitt zum Beispiel habe, diesen Abschnitt hier drüben, und ich habe einen anderen Abschnitt. Lassen Sie uns diese Farbe in etwas anderes ändern, damit Sie sehen können. Ich habe diesen Abschnitt, und meine Inhalte beginnen von diesem Bereich. Zum Beispiel, das ist mein Inhalt. Das ist mein Inhalt, das ist mein Abschnitt. Was wir tun werden, ist, dass wir die Höhe von beispielsweise 96 verwenden werden. Ich werde das benutzen. Dies ist mein Mailingblock, den ich verwendet habe, um die obere Polsterung und die untere Polsterung meines Inhalts zu setzen . Dies können Sie es auch Ränder nennen. Diejenigen, die ein bisschen Programmierung kennen oder HTML kennen, wissen, dass dies durch Ränder oder Pads erreicht werden kann. Das wird unser Abschnitt sein. Zum Beispiel war ein Abschnitt 800 Pixel hoch oder was auch immer. Das ist unser Inhalt, und das sind unsere Polsterungen oben und unten. Sie können hier sehen, warum ich diesen 64-Pixel-Block benutze. Sie können sehen, wenn ich hier drüber klicke, es ist 96, Höhe ist 96, weil 96 ein Vielfaches von acht ist. Wir werden dieses Layout in unserem gesamten Design haben. Ich habe viel über diesen ganzen vertikalen Rhythmus in meiner Typografie erklärt, also wenn Sie es nicht genommen haben, denke ich, Sie sollten es sehen, und Sie werden eine Menge über Gittersysteme und modulares Design und all diese vertikalen Rhythmus-Zeug. Dieses 8-Punkt- oder 8-Pixel-Gittersystem ist ein neues Konzept. Viele Designer, auch für mobile Apps, die mobile Apps designen, verwenden sie dies. Google Material Design verwendet es. Android-Design basiert auf diesem 8-Pixel- oder 8-Punkt-Gittersystem. Ich denke, das ist eine Menge über 8-Punkt-Gittersystem. Fahren wir mit der nächsten Lektion fort, in der wir die UI-Richtlinien für unser Projekt entwerfen werden. 19. Schriftart und Farbauswahl: In dieser Lektion werde ich darüber sprechen, wie ich die Schriftkombination und Farbkombinationen für dieses Projekt entschieden habe . Was ich eigentlich mache, ist, dass ich normalerweise in Illustrator nach den Schriftkombinationen experimentiere. Warum? Da in Illustrator Schriftarten ein bisschen sehr schön sind und gute Kurven haben, haben sie keine verpixelten Kanten oder so etwas. So kann ich mehr rein oder genauer sehen, was die Kante ist und was die Schriftart ist oder der Ton der Schrift ist, oder die Botschaft der Schriftart, die Schriftart vermittelt. Also habe ich viele Schriftkombinationen ausprobiert. Hier können Sie sehen, Nunito Sans mit Nunito und Yorkten mutig mit Nunito Sans und Orkney mit Corbert. Dann haben wir Yorkten mit Nunito. Ich mochte Yorkten die meiste Zeit, also habe ich es für die Überschrift verwendet. Ich habe nur die kühne Version davon. Ich denke, ich habe es von einer Premium-Site bekommen. Dann gibt es noch eine andere Schriftart, die ich wirklich mochte, es ist dieser Pier Sans. So war es auch sehr gut aussehend. Was ich getan habe, ist, dass ich einige von ihnen mit verschiedenen Farben hervorgehoben habe, was mir wirklich gefallen hat. Sie können hier sehen, das ist eine andere Kombination, aber für mich sah es nicht sehr gut aus für das technologiebasierte Unternehmen. So gibt es noch einen, den Sie hier sehen können, Proba Pro und Serif72 Beta. Es gab eine weitere mutige Schrift, die ich wirklich mochte. Es war Trueno, und es war auch frei Schriftart. Ich habe es wirklich geliebt, aber ich denke, am Ende war ich für diesen ein Stick. Ich war für diesen hier. Yorkten und Nunito Sans. Nunito Sans ist im Grunde Googles Schriftart. So können Sie auch diese beiden verwenden, Nunito Sans und Nunito. Wenn Sie diese Yorkten nicht haben, werde ich versuchen, zu verlinken, wenn ich seinen kostenlosen Link finden kann. Ich werde versuchen zu finden, ob es noch frei ist. Nun, so ging ich für verschiedene Schriftkombinationen und ich versuche es weiter. Zuerst wähle ich zwei oder drei Schriftarten für diese Überschrift. Grundsätzlich ist der Anzeigetext oder Überschrift Text. Weil ich etwas Mutiges, Mächtiges, Verlässliches wollte. Also benutze ich das hier. Dann verwende ich für den Text eine Schriftart oder versuche, eine Schriftart zu wählen, die sehr lesbar ist, auch bei kleinen Größen, und ich versuche zu sehen, dass sie mit diesem oder mit unserem ganzen Team übereinstimmt. Wenn wir also ein kreatives, technologiebasiertes Studio oder ein technologiebasiertes Studio haben, sollte es mit unserem Font-Strich übereinstimmen. Unsere Schriftart sollte also die gleiche Botschaft vermitteln. Jetzt über die Farben. Ich habe dieses Logo nur für diesen Trainingszweck entworfen. Ich habe drei Farben ausprobiert. Dies ist ein bisschen blaugrün Farbe mit den lila und bläulichen lila, im Grunde Blues und Purples meist und sie werden kombiniert, um dieses W-W zu bilden. Ich benutze wieder Nunito Sans, denke ich, oder vielleicht denke ich, Nunito. Ich denke, ich benutze Nunito. Ich erinnere mich nicht daran. Also Nunito verwende ich für dieses Logo und ich wähle die Farben, alle drei Farben aus diesem Logo in meinem Hauptthema, und wir verwenden im Grunde die Variation dieses Farbverlaufs. Auf diese Weise habe ich verschiedene Schriftarten und verschiedene Schriftkombinationen, Schriftarten und Farbschemata ausgewählt. In der nächsten Lektion zeige ich Ihnen meinen U-I-Design-Styleguide und die Vorlage, die ich verwendet habe , und ich werde Ihnen eine Übung geben, um einen selbst zu erstellen, okay? Sie können hier drüben sehen. Hier sind einige weitere Farbkombinationen, die ich ausprobiert habe. Das ist ein bisschen sehr scharf und sehr energisch. Ich wollte diese Botschaft nicht vermitteln. Das ist ein bisschen, man kann sagen, grün oder vielleicht grünes Produkt. Ich habe diese Farbe vernachlässigt, also benutze ich diese. So kam ich zu den Farbschema- und Typografie-Übereinstimmungen und wählte meine Schriften aus. Fahren wir mit der nächsten Lektion fort. 20. Was sind UI: In dieser Lektion werden wir das Konzept der UI Style Guides, oder manchmal auch als Style-Kacheln bezeichnet, und warum wir sie wirklich brauchen. Als nächstes werden wir sehen, was Entwurfsmuster oder Musterbibliotheken sind und was andere größere Unternehmen wie Yelp oder Salesforce sie sind, wie sie die Styleguides verwenden, um ihren Entwicklern und Designern zu helfen. Eigentlich ist der Grund, warum wir Styleguide verwenden, um Entwicklung und Ihre Designer auf die gleiche Seite zu bringen oder sie näher zu bringen. So ist das jetzt der Style Guide ist mit Photoshop gebaut. Es gibt Styleguides, die mit HTML erstellt werden und sie sind online. Ich werde Ihnen die Beispiele nur in wenigen Minuten zeigen. Lassen Sie uns zunächst einige der Beispiele sehen, und wie ich diesen UI Style Guide erstellt habe. Ich benutze eine Vorlage von Medialoot und es ist eine sehr gute Vorlage für UI Style Guide. Es gibt keine Steigungen in seiner, aber ich habe sie hinzugefügt. Zunächst einmal werden wir alle Farben definieren, die wir verwenden werden. Also verwende ich hier einige Farben, verschiedene Schattierungen der gleichen Farbe. Sie können hier drüben sehen, das ist unsere Hauptfarbe. Das ist ein weiterer Farbton. Dies ist ein bisschen heller Schatten. Nun, was ich verwendet habe, ist, dass ich diesen Farbwähler verwenden, um die Sättigung und Helligkeit zu ändern, um ein paar mehr Farben zu erhalten. Dann haben wir dieses hellgrau. Dieses hellgrau ist auch näher an diesem lila denke ich. Dann haben wir Steigungen, dann haben wir Typografie. Das ist die Typografie-Skala, die ich gewählt habe. Ich werde Ihnen zeigen, wie ich das in einer anderen Lektion gewählt habe. Dann haben wir unseren Körpertext, unseren Hyperlink, wie der Link sein wird. Dann haben wir die Tastenabschnitte. Was sind die Größen der verschiedenen Tasten? Dies sind verschiedene Stile: Normal, Hover, Aktiv. Dies sind andere Stile, die wir für die gleiche Schaltfläche verwenden können. Dann haben wir Ikonographie, alle Symbole, die ich verwenden werde, ich werde sie hier einfügen. Sie können sehen, das sind die Symbole, die ich in meinem Design verwendet habe. Dies sind benutzerdefinierte Symbole, ich kaufe sie von Creative Market. So habe ich sie bekommen. Ich ändere ihre Farben nach meinem Thema. Ich benutze lila und diese blaugrün Farbe, um diese Symbole zu bekommen. Dann haben wir unsere Formelemente. Nun folgt dieser UI Style Guide den Regeln des atomaren Designs. Sie können sehen, dass wir unsere Atome hier definieren. Wie Sie sehen können, haben wir Knöpfe, Textilien, Farbverläufe, Farben, sind all die Atome, die wir verwenden werden, um unser Design zu bauen. Sie können auch diese Formularelemente sehen. Sie sind auch die Atome. Wenn Sie sie kombinieren, werden sie unsere Pattern-Bibliothek erstellen. Also erster Schritt ist in allen Designprozessen, wenn Sie eine sehr große Website, eine Web-App oder vielleicht eine Social-Web-App entwerfen , dann müssen Sie diesen UI-Styleguide erstellen. Es wird Ihnen wirklich in der Entwicklung und in Ihrem Designprozess helfen. Wir werden Ihre Entwicklung ausrichten und ein bisschen näher mit diesem Styleguide gestalten. Sie können hier sehen, jetzt wird dies UI-Elemente genannt, und das sind im Grunde unsere Moleküle. Sie können hier sehen, dies ist unsere Schritt-Leiste, Fortschrittsbalken, dann ist dies auch Schritt-Fortschrittsbalken. Das sind andere Steuerelemente. Das sind wieder unsere Atome. Dies ist wieder dieses UI-Design. Dies ist unser Artikel und es verbindet drei Dinge: unseren Absatz, unsere Titel und unsere Bilder hier drüben. Das ist also ein Molekül im atomaren Design. Sie können es weiter voranbringen. Sie können viele verschiedene Pattern-Bibliotheken voller davon erstellen. Sie können modale Fenster erstellen. Sie können eine vollwertige Formulare, Fehlermeldungen, Fehlerseiten, Vorlagen, verschiedene Seiten erstellen. Das liegt an dir. Aber das ist der Ausgangspunkt für jedes Design. Wenn Sie dies erstellen können, ich manchmal beim Entwerfen das erste Design und dann erstelle ich diesen UI-Styleguide aus ihrem Design. So können Sie von oben nach unten oder von unten nach oben gehen. Es liegt an dir. Sie können sich vorwärts oder rückwärts bewegen; es ist Ihre eigene Technik. Aber manchmal könnte ich diese ändern, wenn ich sehe, dass das Gesamtdesign nicht zu diesen passt, also könnte ich sie ändern. Das sind alle Farbverläufe, alle Farben, die wir verwenden werden, und alle Typografie. Lassen Sie mich Ihnen einige weitere Beispiele zeigen, die wirklich gut sind, Sie können sie in Ihrem Design verwenden. Also hier ist noch eine. Dies ist auch ein Styleguide, und es hat verschiedene Abschnitte. Sie können hier drüben Typografie sehen. Dann haben wir Schaltflächen und Tabs, Symbole, Formulare, dann haben wir Grafiken, Temp. Dies sind die Farbpaletten. Sie können Farbpaletten für Typografie, Hintergrund und Illustrationen verwenden. Nun, das ist völlig anders, und ich denke, es war von Mindy Wagner-Stil Fliesen, denke ich, es ist. Dies ist ein weiterer Style Guide, Zeichenfläche, und es ist von [unhörbar], denke ich. Ich mag diesen Designer wirklich und ich folge ihm sehr. So können Sie hier drüben sehen, er hat verschiedene Zeichenflächen. Eine ist mit Farben eingerichtet, eine ist mit Typografie. Sie können hier drüben sehen, es gibt all die verschiedenen Arten. Sie können sehen, wie er das Gerichtsgebiet hier drüben gezeigt hat. Dann haben wir diese Form. Alles, was sie befolgen, ist die gleiche Richtlinie. Ich liebe diesen hier wirklich, weil er noch wenige Dinge hat. Sie können hier drüben sehen, wenn wir zu diesen Farben gehen, dann haben wir dieses ganze Gittersystem. Sie können sehen, dass es auch das Raster, 1080-Pixel-Raster und mit diesen Spalten zeigt . Dann können Sie hier sehen, wir haben Schrifteinstellungen. Noch eine Sache, wenn Sie Zeilenhöhe mit Ihrer Schriftart hinzufügen können, denke ich, dass es das Beste ist, was ein Entwickler bekommen kann. Also fehlt es mir hier drüben. Ich kann hier auch Zeilenhöhe hinzufügen. Aber wir werden etwas Ähnliches mit unserem Zeplin-Tool erstellen. Also werden wir am Ende Zeplin verwenden, um einen Styleguide in Codierung zu erstellen. Nicht das, nur das Bild. Dies sind verschiedene Styleguides. Ich liebe dieses eine Tool wirklich, das hat viele andere Optionen. Sie können sehen, dies sind die Formular-Steuerelemente, Muster, und das ist der Absatz, seine Zeilenhöhe und alles. Außerdem können Sie einen kleinen Text einfügen. Sie können hier sehen, es ist Fälle kleine Texte, Montserrat 12 Pixel, und die Zeilenhöhe beträgt 18 Pixel. So werden Sie einen Styleguide entwerfen. Lassen Sie mich Ihnen nun einige der Beispiele von Online-Styleguides zeigen , die andere große riesige Unternehmen verwenden, und wie sie es verwenden, indem sie Musterbibliotheken und alles andere erstellen. 21. Beispiele für UI: Im Moment zeige ich Ihnen die Richtlinien, Typografierichtlinien von Salesforce, die Sie hier sehen können. Dies sind ihre Richtlinien, Farbe, Barrierefreiheit, Dateneingabe, Anzeigedaten, Layout, Bewegung, Navigation. Sie können hier sehen, hier ist die Typografie Leitlinie: Dünn, leicht, normal, fett. Vier Schriftarten, die sie verwenden. Sie haben ihre eigene Schriftart und Sie können unten sehen, dies sind die Einstellungen, die sie verwenden. Dann können Sie auch verwenden, sehen Sie diese Symbole hier drüben. Wenn Sie zu Icons gehen, können Sie sehen, dass es sich um die unterschiedliche Farbe und das andere Symbol handelt, die sie verwenden. Dies ist ein Beispiel für Salesforce-Styleguide oder vielleicht Muster-Bibliothek, die Sie sehen können. Dann haben wir diese sehr schönen mailchimp.com Muster und diese sind wirklich Grid. Sie haben ihr Grid System hier gezeigt, wie Sie ihr Grid System verwenden und auch mit Codebeispielen. Dies ist also im Grunde das ultimative Ende Ihres Styleguides. Ihre Programmierer werden dieses System entwickeln und es ist im Grunde das System Ihres entworfenen UI Style Guide in ein Codierungsformat. Sie werden diese Elemente verwenden und sie werden sie im atomaren Design-Framework zusammenstecken , um ganze Seiten und Vorlagen zu erstellen. Sie können hier sehen, haben wir Pixelwerte und auch diese Zeilenhöhe. Der Pixelwert, dies ist die Zeilenhöhe, halb fett, als wir Untertitel und Zeilenhöhe haben. Auf diese Weise haben sie diese anderen Beispiele für den Code gezeigt, den Sie verwenden können. Das ist wirklich großartig. Sie können auch auf diese Tabellen gehen und sehen, wie ihre Tabellen Stile sind, können Sie hier sehen. Es gibt ein Live-Beispiel, codiertes Beispiel, interaktiv. Dies ist also die ultimative Muster-Bibliothek, die Sie aus Ihrem UI-Styleguide erstellen werden. Außerdem können Sie sehen, ob Sie zu diesem Code für Amerika gehen, Sie können sehen, dass sie ihre eigenen Styleguide haben. Sie können sehen, dies sind das Symbol, Größen, die sie verwenden, diese anderen Symbole. Wenn wir nach unten gehen, können Sie sehen, dass dies alle Farben sind, die sie verwenden: primär, sekundär. Dies ist das Layout, das sie verwenden. So werden Sie einen ganzen Styleguide erstellen und was Ihr Styleguide tun wird, wird es am Ende etwas Ähnliches tun. Ihre Designer und Entwickler, sie werden sich zusammenfinden, um so etwas zu schaffen. Am Ende ist dies das System, das Ihr Design vorwärts bewegen wird. Es ist eine sehr komplexe Web-App oder so etwas. Dies sind verschiedene Styleguides. Dies ist ein Styleguide für Yelp und ich werde diese Links mit Ihnen teilen, damit Sie sich mit diesem Styleguide und Musterbibliotheken und all diesem Zeugvertraut machen können Styleguide und Musterbibliotheken und all diesem Zeug und das ist wirklich ihre modernen Techniken des Entwerfens, so sollten Sie sich wirklich mit ihnen vertraut machen. Fahren wir mit der nächsten Lektion fort. 22. Gestalte einen Stilleitfaden: In dieser Lektion werde ich Ihnen zeigen, wie ich meinen UI Style Guide erstellt habe und wo ich die Vorlage dafür erhalten habe. Ich habe die Vorlage von medialoot.com Website bekommen und es ist eine kostenlose Vorlage, die Sie zuschreiben müssen, wenn Sie es irgendwo teilen. Wir teilen es jetzt. Ich zeige Ihnen, dass ich das hier benutze. Es gibt wenige Dinge, die nicht darin vorhanden waren, wie Sie sehen können, gibt es drei Farben, dunkelgrau, hellgrau und die Blues. Aber ich habe hier noch ein paar Farben hinzugefügt. Ich habe die Größe dieser Portion erhöht. Dann änderte ich auch die Typografie, Tastengrößen und einige Dinge hier drüben. Jetzt werde ich zu meiner Photoshop-Ansicht dieser Datei wechseln, die ich erstellt habe. Hier können Sie sehen, dass dies mein Styleguide ist. Es gibt nur wenige Dinge, die ich mit Ihnen teilen werde, wie ich erstellt oder bekam drei Schattierungen dieser Farben, weil viele Leute, sie normalerweise kämpfen mit Farbschemata. Nun, wenn ich zu diesem dunkelgrau gehe, wenn Sie darauf doppelklicken, können Sie sehen, dass dies das dunkelgrau ist, aber es ist nicht völlig grau, es ist ein bisschen in lila Farbe. Wie habe ich diese Farben bekommen, diese dunklen Farben? Eigentlich fange ich hier mit dieser Farbe an. Dann gehe ich so etwas. Sie können sehen, dass dies in dieser Farbe sein wird. Die zweite Methode, die Sie verwenden können, ist, dass Sie auf eine beliebige Farbe klicken können, und Sie können zu dieser Helligkeit gehen und sie auf 20 Prozent reduzieren. Auch die Sättigung, reduzieren Sie es auf 20 Prozent. Sie können sehen, dass Sie eine sehr dunkle violettgraue Farbe bekommen. Auch hier können Sie in diese Richtung bewegen, wenn Sie möchten, zu einer breiten Farben innerhalb des grauen. Es wird etwas von diesem lila und den größten Teil des Schwarzen bekommen. Dann kann man auch sehen, dass dieses hellgrau ist auch völlig nicht hellgrau, es neigt sich in Richtung dieser blauen Farbe hier drüben. Es ist grau, weiß und blau. Es ist nicht völlig graue Farbe. Dann haben wir dieses Blau. Meine Hauptfarben waren eins, zwei und drei. Ich habe all diese Farben aus diesen drei Farben. Das hier, wie habe ich es bekommen? Ich änderte die Helligkeit oder ein bisschen Sättigung, wenn Sie wollen. Sie können hier drüben sehen, wir haben Farbton 226. Der Farbton dieser Farbe wird 226 sein. Es ist der gleiche Farbton, den ich benutze, 226. Sie können sehen, dies sind nur die Schattierungen und verschiedene Farbtöne, verschiedene Töne dieser Farbe. Grundsätzlich füge ich hier weißes Weiß hinzu. Auch hier habe ich eine Verschiebung der Sättigung hier drüben. Ich versuche, es mehr zu sättigen, damit es mehr Schärfe hat. Sie können viele Farben ausprobieren. Es ist nicht sehr schwierig, wenn Sie wissen, wie man diese Technik, Farbtonsättigung und Helligkeit verwendet. Ich habe dies in meinem UI-Design in Photoshop Course beschrieben , der der meistverkaufte Kurs im UI-Design ist. Nun, in Richtung des Gradienten zu kommen, war unser grundlegender Gradient dieser, dann habe ich diesen erstellt. Ich habe eine Farbe von hier entfernt, also ist es von blau zu blaugrün. Dann haben wir diese dunkelviolette bis blaugrün Farbe. Dies sind im Grunde die gleichen Farbverläufe, ist nur ich versucht, einige weitere Schattierungen der gleichen Farbe hinzuzufügen, vielleicht stumpfe Farbe, oder vielleicht ein bisschen heller Farbe, um diese Farbverläufe zu erstellen. Jetzt für Entwickler können Sie so viele Farben erstellen, Sie können so viele Farben in den Farbverläufen verwenden. Wenn Sie Designer sind, sollten Sie wissen, dass Ihr Entwickler nur brauchen, dass Farbe stoppt. Wie Sie sehen können, was hier, wenn ich zu diesem Gradient Overlay gehe, können Sie hier sehen, wenn ich darauf doppelklicke oder darauf klicke, das ist die Stopps. Sehen Sie hier drüben, das ist unser Stopp bei null Prozent und wir haben den Stopp hier drüben, was zu 100 Prozent ist. Was sie brauchen, ist, dass welche Farbe Sie bei null Prozent verwenden? Was bei 50 Prozent? Wenn Sie drei Farben verwendet haben, wenn Sie zwei verwendet haben, dann sind Null und 100 Prozent mehr als genug. Außerdem ist es ein linearer Farbverlauf. Die zweite Methode ist, dass Sie einfach mit der rechten Maustaste klicken und CSS kopieren können, und das war's. Ihre Entwickler brauchen nur die CSS-Datei. Wenn ich es hier einfüge, können Sie sehen, dass dies der Farbverlauf ist, der bereits in dieser CSS-Datei generiert wurde. Wir müssen uns keine Sorgen machen, dies ist nur für Präsentationszwecke, dass Ihre Entwickler wissen, dass ihre Entwicklung oder ihre HTML-Datei Ihren Stilen entspricht. Dann haben wir diese Typografie. Hier, ich habe diese Viewer-Skala. Ich werde etwas Zeit dazu kommen. Ich habe auch diesen kleinen Text hier drüben hinzugefügt. Es ist 16 Pixel, und dieser Körper verwendet 20 Pixel, Sie können hier sehen, ich habe es hier erwähnt. Außerdem haben die Überschriften 54, 36, 28, 24, 20, 20. Diejenigen von euch, die meinen Typografiekurs gesehen haben, wissen dann, wie ich diese Skalen erstelle. Dies ist im Grunde eine 16-Pixel-Basisty-Skala, und ich habe 1,5 als Skalierungsverhältnis verwendet. Ich werde Ihnen zeigen, wie ich die in ein paar Minuten bekommen habe. Außerdem können Sie hier sehen, dies sind verschiedene Schaltflächen Stile. Auch hier verwende ich die gleichen Farbverläufe an der Spitze. Sie können sehen, dass dies die Farbverläufe sind, die ich innerhalb der Schaltflächen verwende. Einige der Schatten, die ich benutze, können Sie hier sehen, Schlagschatten. Ich benutze die Schlagschatten lila Farbe, dunkelviolett, 30 Prozent, dann Entfernung, 20, Größe. Ich werde diese Datei mit Ihnen teilen, also mach dir keine Sorgen, dass du nicht weißt, was diese Stile sind. Gleiches, Sie können Ihrem Entwickler auch sagen, dass die Rundheit Ihrer Kante, acht Pixel Ihrer Schaltflächen. Dies sind nur wenige weitere Stile. Sie können sehen, dass ich diese Stile an verschiedenen Stellen in meinem Design verwendet habe. Dann habe ich diese Icons. Ich habe diese Icons erstellt. Ich habe sie aus Illustrator-Akte. Ich änderte ihre Farbe und fügte sie ein. Es ist eine Vektordatei mit einem intelligenten Objekt hier drüben. Wenn ich darauf doppelklicke, werden sie in Illustrator geöffnet. Wir haben diese Formularfelder. Ich habe gerade den Rahmen oder den Strich dieser Formularfelder geändert, um diesen Effekt zu erzielen. Im Moment konzentrieren wir uns darauf, nur eine Zielseite zu entwerfen, aber Sie bekommen die Idee, dass Sie mehr Steuerelemente und mehr gestaltete Gönner wie das Layout von Post, und die Artikel und Zitate, und viele andere Dinge. Ich will jetzt nicht zu viel ins Detail gehen. Ich denke, diese wenigen Stile und dieser Style Guide ist mehr als genug für uns. Beginnen wir mit der Vorbereitung unseres Designs. 23. Type erklärt: Aber vorher lassen Sie mich erklären, wie ich das geschafft habe. Ich verwende eine sehr komplexe oder eine sehr andere Typskala. Sie können hier sehen, dass sich mein Vektorobjekt geöffnet hat. Lassen Sie es uns minimieren. Also verwende ich diese Art Skala, Modular Scale-Website. Sie können sehen, 16 Pixel ist meine Basis, 1.5. Also 16 Pixel, 24, 36, 54, das sind die vier Größen. Dann verwende ich für mobile Bildschirme und Tablet-Bildschirm 1.75. Das sind also 49, 28. Das sind einige weitere Größen, die ich habe. Dann, wenn ich zu 1,25 gehe, sind das die Größen, 25, ich kann sie verwenden, 32 oder 31. Dann kann ich 48 verwenden, wenn ich will. sind also alle Unterschiede und mehr Größen, die ich von der Skala bekommen habe. Wenn Sie mehr darüber erfahren möchten, müssen Sie meinen Typografiekurs sehen. Dort habe ich erklärt, warum und wie wir diese Waagen bekommen. Sie können diesen Typografie-Stil und Maßstab auch aus dem Materialdesign verwenden. Sie können sehen, ihre Basisstile sind 12, 14, 16, 20, 34, und Sie können auch diese verwenden. Das ist also wirklich großartig, wenn Sie diese verwenden möchten, wir werden sie mit Rändern und Polsterungen anpassen. Ich denke, ich habe all dies in Typografie Kurs erklärt, aber immer noch, wenn Sie nicht wissen, werden wir sie mit Rändern und Polsterungen und alles andere ausrichten. So habe ich meinen UI-Styleguide erstellt, ich werde ihn in meinem Design verwenden. Das zweite, was Sie tun können, ist, dass Sie unten sehen können, Ich habe alle diese Farben hinzugefügt, die ich verwenden werde. Wenn Sie zu den Stilen gehen können, alle meine Schaltflächenstile hier gespeichert. Also, wenn Sie auf diese Schaltfläche gehen und Sie sollten wissen, dass, wie man einen Stil zu speichern, neuen Stil und es wird hier gespeichert werden. Dies wird unsere Arbeit wirklich beschleunigen, denn dieser Kurs konzentriert sich mehr auf den Workflow und wie ich einen schnellen Workflow erreichen werde. Sie können hier drüben sehen, alle meine Knöpfe sind hier aufgelistet. Außerdem benutze ich diese Bibliotheken, aber ich denke, sie sind gerade für mich sehr chaotisch. Also werde ich jetzt bei Mustern und Styles bleiben. So verwenden Sie Ihren Styleguide, um Ihr Design zu erstellen und Ihr Design mit Entwicklern auszurichten. Nun, gehen wir zur nächsten Lektion über. 24. Online-Tools für das Raster: Wann immer Sie etwas entwerfen, ist es wirklich wichtig, dass Sie Ihr Design mit Ihren Noten und Führungen und Ihrem modularen Raster sehr sorgfältig planen . Jetzt, im Webdesign, die meisten gebräuchlichen Größen, wenn Sie für ein Desktop-Design beginnen, werden sie werden 1280 Pixel sein. Also heute werde ich Ihnen die Online-Tools zeigen, die Gitter und Führungen mit Ihrem Grid-System erstellen können , das von Entwicklern viel verwendet wird, was Bootstrap und andere großartige Systeme ist. Für eine Desktop-Größe werden wir sehen, welche Grid-Werkzeuge normalerweise verwendet werden. Es gibt vier Werkzeuge, die ich Ihnen in dieser Lektion zeigen werde. Einer ist dieser grid.guide, und die Größe, die wir verwenden werden, ist diese 1.280 und 12 Spalten, und das äußere größere Verhältnis ist im Grunde seine Marge. Wenn Sie also etwas Marge außerhalb erhalten möchten, können Sie sehen, dass die Marge nicht möglich ist. Wenn Sie zu 1.0 gehen, gibt es einen gewissen Spielraum. Sie können in diesem roten rosa Pfirsich-Bereich sehen, und Gelb ist im Grunde unsere Säulengröße. So können Sie die Spaltenbreite 98 sehen, Rinnenbreite ist acht, aber wir brauchen etwas mehr. Vielleicht 20 Pixel Rinnenbreite ist gut oder vielleicht, wenn Sie für einige Mode-Website entwerfen, benötigen Sie möglicherweise sehr große Räume dann benötigen Sie diese 32 oder 44 Rinnenraum. Normalerweise denke ich, ich würde mit diesen zwei, 32 oder 20 Pixeln gehen . Ich denke, das sind mehr als genug. Acht Pixel ist etwas kleiner. Sie können auch auf 1,5 verschieben. Sie können sehen, ob ich auf 1,5 verschieben möchte, es zeigt mir einige Optionen wie für Rinnenbreite 4, 10, 16, 22. Nun, die coole Sache ist, dass wir diese PNG-Datei herunterladen können, und Sie können hier sehen. Dies ist PNG-Datei und Untermuster. Sie können es einfach in Photoshop importieren. Lassen Sie mich eine neue Datei erstellen. Neue Kunsttafel 1.280 Breite, 2.400 Höhe und ich werde Kunstbrett verwenden. Überprüfen Sie das, und erstellen Sie es einfach. Also haben wir unsere Kunsttafel hier drüben. Ziehen wir diese Anleitung und fügen Sie sie hier ein. Wir werden es so dimensionieren und Sie können sehen, dass dies eine Rasterdarstellung Ihrer Gitter und Hilfslinien ist. Also haben wir unser horizontales Gittersystem Setup, Spalten oder das Säulenrastersystem Setup, und Sie können sehen, dass wir diese Ränder und all diese anderen Dinge eingerichtet haben. So erstelle ich die Hilfslinien sofort, anstatt sie mit diesem neuen Leitlinienlayout zu erstellen. Das ist besser, weil ich sie dann sperre, damit sie sich nicht bewegen. Eine andere, die sehr ähnlich ist, ist diese. Ich habe es viel Zeit benutzt, und das coole Ding ist, dass Sie jede Größe verwenden können. Wenn ich für ein Tablet entwerfen werde, werde ich 768 verwenden, und vielleicht kann ich die Rinnenbreite reduzieren oder vielleicht behalten, vielleicht 28, und jetzt werde ich diese Anzahl von Spalten auf acht ändern. Lassen Sie uns die Ränder entfernen. So erstellen Sie Ihre Grid-Systeme. Wir werden drei verschiedene Gitter erstellen und die Größen, die ich verwende, sind 1.280. So können Sie auch 20 Pixel oder vielleicht 10 Pixel hier und 12 hier drüben verwenden, so. Lassen Sie uns die Größe ändern. Wenn ich 24 Pixel Rinne und 10 Pixel Ränder verwende, können Sie sehen, dass dies grün statt rot wird. Wir verwenden also volle 1.280 Pixel. Stellen Sie also sicher, dass jedes Mal, wenn Sie versuchen, ein Raster zu erstellen die volle Breite verwendet wird. Wenn Sie zu diesem Tool gehen, führt dies automatisch alle Berechnungen durch, so dass wir uns keine Sorgen darüber machen. Sie können es auch Null lassen, Sie können sehen, wenn wir es verlassen Null wir 16 und 28. Sie können diese auch verwenden. Diese PNG ist Gitter 28 Breite ist auch sehr genial. Es ist näher an 30 und gute Abstände. Wir können auch diese 16 verwenden. Also jeder dieser beiden können Sie wählen. Diese beiden sind großartig. Nun, gehen wir zu diesem Reglerwerkzeug. Es ist auch das Gleiche. Das coole daran ist, wenn Sie nur zwei Eingänge Gesamtbreite und Spalten benötigen. Also, wenn Sie diese eingeben, wird es die ganzen Kombinationen für sich selbst berechnen. Wenn Sie die Rinnenbreite auf vier festlegen, können Sie 12 Spalten mit 103 Pixel Breite haben, und es kann auch PNG-Datei erstellen. Lasst uns das hier benutzen und sehen, wie es aussehen wird und wie es aussehen wird. Also sah es so aus. Es ist auch sehr gutes Werkzeug, um Spalten zu erstellen und ich denke, der Name ist sehr cool, 12 Spalten, 70 Breite und 40 Rinne. Ein wirklich gut angelegtes Werkzeug. Ich mochte wirklich, wie es es es auch dieses genannt hat, diese beiden Werkzeuge sind genial. Das letzte Tool, das ich Ihnen zeigen werde, ist diese modulare grid.org. Es hat eine seltsame Berechnung, weil Sie die gesamte Berechnung selbst durchführen müssen. Also bestehe ich darauf, dass du es mit einem anderen Werkzeug wie diesem oder diesem verwendest. Ich weiß, dass, wenn ich die Spaltenbreite auf 81 und die Rinnenbreite auf 28 setze, ich leicht 12 Spalten haben kann. Also in diesem werde ich meine Baseline verwenden, die acht Pixel ist. Ich erzählte Ihnen von acht Pixel-Gittersystem vertikalen Rhythmus. So verwenden wir Acht-Punkt-Grid-System oder Acht-Punkt-Design-Framework, das von Google Design-Team verwendet wird , und wir werden dieses modulare Design entsprechend dieser generieren. Wenn Sie also nicht wissen, was modulares Design ist, müssen Sie meinen typografischen Kurs sehen. Nur eine kurze Einführung, dass wir unser Design in verschiedene Module unterteilen werden. Sie können hier sehen, wenn ich die Größe auf sechs ändere, Sie können sehen, dass diese weiße Linie im Grunde unser ganzes Modul trennt. Sie können Ihre Modulhöhen und so etwas verwenden. Jetzt verwende ich 12 Spalten. Das sind im Grunde unsere vertikalen Säulen wie diese. Diese Module sind im Grunde vertikalen Rhythmus. Sie werden also für vertikalen Rhythmus verwendet, und das sind unsere Säulen. Unsere Basis ist im Grunde acht Pixel, Sie können auch auf 16 einstellen, wenn Sie möchten. Sie können sehen, so wird es das Design ändern. Sie können auch für ein Vielfaches von acht gehen. Also, wenn Sie zu 32 oder 48 gehen, wird es so etwas zeigen. Es hilft unserem Design, Dinge einfach auszurichten und verschiedene Elemente auszuräumen. Sie können diese weißen Flächen, diese weißen horizontalen Linien, verwenden , um verschiedene Bereiche und Abschnitte zu platzieren. Nun, die coole Sache an diesem Tool ist, dass Sie einen Photoshop-Benutzer herunterladen können und Sie können es schnell in Ihrem Photoshop-Dokument anwenden. Lassen Sie mich also ein neues Dokument erstellen. Ich gehe zu Neu, und ich habe eine Vorlage gespeichert, nur um schnell diese 1.280 zu erstellen. Doppelklicken Sie, und wir haben diese Ebene eins. Ich gehe zu Alt Option Löschen. Option Löschen Werkzeug schnell. Füllen Sie es mit weißer Farbe, und jetzt werde ich auf diese Ebene und Blending Options doppelklicken. Ich gehe zu Patron und ich habe diesen Patron, was okay ist. Also 108 mal 40 Pixel. Wenn ich dazu gehe, können Sie sehen, dass es mehr Gönner gibt. Jetzt können Sie sehen, dass ich diesen benutzt habe und es sieht wirklich cool aus. Ich denke, die Spaltenbreite ist 28 und die Rinnenbreite ist 28. Jetzt haben wir das benutzt. Also, wenn Sie etwas Platz um Ihre Leinwand wollen, dann gehen Sie für Kunsttafeln zu diesem Kunsttafelwerkzeug und klicken Sie auf dieses Kunstboard und ändern Sie seine Breite auf 1.400. Wir werden diese Schicht 1 in der Mitte so ausrichten. So können Sie sehen, so bekomme ich mein Gitter-Setup. Wenn Sie also Ihre Gitter und Ihr modulares Gitter verwenden möchten, gibt es andere Möglichkeiten, wie Sie auch einen Gönner verwenden können. Erstellen Sie einen Benutzer mit diesen acht Pixelzeilen und richten Sie ihn in Photoshop ein, und Sie können das anwenden. Aber wenn ich nur eine Ebene habe, um alle meine Spalten und meinen vertikalen Rhythmus und meine vertikalen Gitter und horizontalen Raster einzurichten , dann denke ich, dass dies das beste Werkzeug ist, das dieses modulargrid.org ist. Es kann Ihr modulares Gitter erstellen. Manchmal, wenn ich entwerfe, benutze ich dieses Acht-Pixel-Gitter nicht vorne. Ich setze nur weiter Dinge mit den Spalten. Für die feinen Anpassungen, werden Sie Ihr Design am Ende verlassen. Jetzt habe ich Ihnen erzählt, wie ich mein Gitter, vertikales und horizontales Gitter und die vier Werkzeuge einrichten werde, mit denen Sie Ihre Gitter einrichten können. Die sind echt cool. Für dieses Tool können Sie hier sehen, lassen Sie mich Ihnen zeigen, dass Sie auch eine Transplantationsdatei Adobe PNG-Datei und auch ein Skript erstellen können. Wenn Sie also ein Skript ausführen möchten, liegt das an Ihnen. Normalerweise verwende ich diese PNG-Datei. Also, wenn ich hier klicke, können Sie sehen, dass es mir ein Raster geben wird. Das Problem mit diesem Raster ist, dass es mir keine Zahlen zeigt. Es zeigt mir nicht, wie viel Spaltenbreite oder was auch immer es verwendet hat. Stellen Sie also sicher, dass Sie es richtig benennen. Also, wenn ich zu diesem gehen, 24 Pixel Rinne und 10 Pixel Rand. Ich gehe zurück zu Photoshop. Benennen Sie Ihre Ebene 1.280 und 24 Rinne, und was war 10 Pixel 10 Rand. Ihr Entwickler weiß also, welche Einstellungen Sie beim Erstellen Ihres Grid-Systems verwendet haben. Sie sollten ihnen immer mitteilen, dass Sie diese Einstellungen verwenden. Lassen Sie uns es in der Mitte so ausrichten. So ist dieses Gitter angelegt. Wenn Sie dieses verwenden möchten, ich normalerweise, was ich mache, ist, dass ich dies mit grauer Farbe überlage und auch ich habe versucht, es ein bisschen so zu machen. Nun, lassen Sie es so verstecken, und was ich mache, ist normalerweise dass ich es so ziehe und es auf die Höhe des gesamten Dokuments mache. Dann werden wir es zu sperren und wir werden sie beide in Gitterordner oder Gruppe gruppiert bekommen . Also haben wir dieses Gitter eingerichtet und so werden Sie Ihre Noten und Spalten einrichten und alles, um Ihr Web-Layout zu entwerfen. 25. Planung deiner Raster für die Desktopansicht: Nun, die zweite Sache ist, dass wir auch die anderen Ansichten wie 768 erstellen werden. Sie können sehen, dass wir jetzt das Problem haben. Wir können acht Spalten erstellen und Sie können sehen, es zeigt die 780 Breite. Das Problem ist, ich denke, dass Sie verschiedene Größen perfekt bekommen müssen. Lassen Sie uns zu diesem Rechner gehen und sehen welche Berechnungen wir für die anderen Rastersysteme haben können. Also, wenn ich versuche, acht Spalten hier zu haben, kann ich 16, 18, 24 haben. Also 16 und 32, sie sind in beiden üblich. Ich schätze, wenn ich zu 1.280 und 12 gehe. Lass uns sehen. Ich habe 16 Jahre alt. So ist 16 Spalte Rinnengröße in allen von ihnen üblich. Also denke ich, wir können bei diesem hier bleiben. Auch wenn ich zu vier und 400 gehe und zu diesen vier gehe. Lass uns sehen. Wir haben wieder 16. Ich denke, eine 16 Rinnenbreite ist in allen meinen Größen üblich. Versuchen wir es auch mal. Selbst wenn ich die iPhone-Breite verwende, die 320 Pixel ist, habe ich immer noch 16 Pixel als meine Rinnenbreite in allen drei Kombinationen, die ich ausprobiert habe. Also, wenn ich zu 960 gehe, mal sehen. Sogar im Jahr 960 haben wir 16, 24. Wir haben 28 hier drüben. Wenn ich zu 16 gehe, haben wir 16 und 32. Also ich denke, lasst uns gehen, um 1.200 zu verwenden und 12 Pixel zu verwenden, damit wir sehen können, wie viele Kombinationen. Wenn wir 1.200 Rastergröße, Breitengröße und mit 12 Spalten verwenden , ist die gemeinsame Rinnenbreite 24. Wenn ich also auf 768 und acht Spalten verschiebe, habe ich immer noch 24, was ziemlich ordentlich ist. Wenn ich zu 400 und vier Spalten gehe, habe ich immer noch 24. Also 24, denke ich, ist der Gewinner und auch Sie können mit 1.200 Pixeln gehen. Mal sehen, ob ich mit 1.240 und 12 Spalten gehe, 48. Lass uns sehen. Wir können auch so etwas verwenden, 48. Wir können 1.200 Rastersystem mit 12 Spalten verwenden und ich denke, wir können das PNG von hier herunterladen. Es kann ein sehr schönes PNG erstellen. Also liegt es an dir. Sie können 1.200 oder 1.280 oder 1.400 verwenden. Es liegt an dir. Sie können auch 1.400 verwenden, wenn Sie möchten. Sie können jetzt sehen, dass es sich auf 28 verschoben hat, aber 16 ist in allen von ihnen üblich. Es liegt an Ihnen, was auch immer Sie sich entscheiden, stellen Sie sicher, dass Ihre Rinnenbreite ähnlich ist, aber ich denke, Sie können jede Rinnenbreite verwenden. Das ist kein Problem, wenn Sie ein kleineres mobiles Design haben, können Sie die Rinnenbreite ändern. Nun, der Grund, warum ich versuche, eine gemeinsame Rinnenbreite zu finden , ist, dass ich denke, dass es ein Problem für Ihre Entwickler schaffen kann, aber ich denke, dass es in Rastersystem vier möglich ist , dass Sie verschiedene Spaltenrinnenbreiten verwenden können. Aber ich denke, wenn Sie versuchen, Ihren Entwickler in diese Probleme zu führen, denke ich in Bootstrap, dass die Entwickler die Rinnenbreite und Rinnengröße für verschiedene Geräte oder verschiedene Layouts wie klein oder vielleicht groß oder mittel ändern können -Geräten. Also mach dir nicht viel Sorgen darüber. Wenn wir die Rinnenbreite wirklich ändern müssen, werden wir sie ändern. Im Moment brauchen wir uns keine Sorgen darüber zu machen, wie es in Ihrer realen Situation oder realen Codierung implementiert wird. Aber denken Sie daran, dass ich denke, es ist besser, dass Sie etwas Gemeinsames verwenden, wo wir die gleiche Rinnenbreite in allen Ihren Designs mit verschiedenen Spaltengrößen, Anzahl der Spalten haben. Dies endet meine Rasterberechnungen und Gitter und schafft vertikalen Rhythmus für Ihr Design. In der nächsten Lektion werden wir anfangen, etwas zu entwerfen und das alles nach meinem Plan einzurichten. Gehen wir also zur nächsten Lektion über. 26. So verwendest du White Space im Webdesign: Jetzt werden wir unseren vertikalen Rhythmus planen, und unsere Gitter und Leitfäden werden wir in dieser Übung einrichten. Nun, zuerst lassen Sie mich Ihnen zeigen, wie mein gesamtes Design angelegt ist, und ich verwende hier 8-Punkt-Gittersystem oder 8-Punkt-Design-Framework, das Google Material Design von Google Material Design entlehnt ist. Wenn ich zu diesen Rastern gehe, können Sie hier sehen, wenn ich versuche, meine vertikalen Raster zu verstecken, können Sie sehen, dass ich 1200 Pixel Breite verwende und ich 12 Spalten verwende. Moment, in dieser Design-Übung, meine Rinnenbreite ist ich denke, 30 Pixel. Aber ich werde 24 Pixel verwenden, nur um sicherzustellen , dass wir unser 8-Punkt-Gittersystem verwenden werden. Es spielt keine Rolle, welche Entfernung Sie wählen, stellen Sie sicher, dass Ihr vertikaler Rhythmus, der dieser ist, diese Linien, sie sollten acht Pixel breit, also acht Pixel hoch sein. Sie können hier sehen, wenn Sie in diesen Bereich gehen, lassen Sie mich vergrößern, jetzt können Sie sehen, wie viel Platz ich von oben, 1, 2, 3, 4, 5. Also ist es 5 multiplizieren mit 8, so ist es, denke ich, 40, 40 Pixel an der Spitze. Wieder können Sie unten sehen, wir haben den gleichen Abstand, 1, 2, 3, 4, 5. Unser vertikaler Rhythmus ist fast nach fünf Blöcken. Sie können auch sehen, unsere Schaltfläche ist 1, 2, 3, 4, 5, 6. Wir werden die gleiche Technik in unserem Design verwenden. Sie können diese Entfernungen sehen. Dies sind die wichtigsten Punkte, die wirklich sehr Schlankheit und sehr Einzigartigkeit in Ihrem Design schaffen können. So wird Ihr Design sehr schlank und kühl und sauber aussehen. Eine gleiche Technik, die Sie hier sehen können, wenn ich in diesen Bereich gehe, können Sie sehen, dass wir einen Abstand von 1, 2, 3, 4. Zwischen Überschrift und diesem Absatz habe ich vier, dann können Sie hier sehen, wieder, haben fünf, ich denke, 1, 2, 3, 4, 5. So funktioniert mein gesamtes Design. Wenn Sie in diesen Bereich gehen, können Sie hier wieder sehen, zwischen diesen beiden Überschriften, Unterposition und Überschrift, wir haben 1, 2, 3, 4, 5 Blöcke getrennt. So werden wir unser ganzes Design auslegen. Diese Entfernungen sind wirklich wichtig. Sie können hier drüben sehen, wieder, in diesem Bereich, wir haben 1, 2, 3, 4. Manchmal verwende ich 32 Pixel Entfernung, und manchmal verwende ich 40, und an wenigen Stellen in unseren Abschnitten verwende ich 64 und manchmal 96 Pixel. Wenn wir in diesen Bereich gehen, können Sie hier sehen, es ist fast 60 und 96 Pixel von diesem Abschnitt zu diesem Abschnitt. Aus diesem Bereich wieder, es hat, lassen Sie mich Ihnen zeigen, so ist es 56. So werden wir unser ganzes Design auslegen. Zuvor, stellen Sie sicher, dass Sie alle Ihre Farbfelder bereit haben hier drüben. Wenn Sie nicht wissen, wie Sie sie erstellen, wählen Sie einfach eine beliebige Farbe aus und fügen Sie sie zu Farbfeldern hinzu. Sie können hier klicken, und es wird hier hinzugefügt werden. Normalerweise behalte ich eine Menge Farbfelder. Meistens sind die Farbfelder, die ich benutzen werde, unten, von diesem Bereich bis zu diesem Bereich. Gehen wir nun zu unseren Werkzeugen, um dieses Acht-Pixel-Raster zu erstellen. Gerade jetzt, weil meine Bewegung von acht Pixeln nicht fixiert ist, benutze ich manchmal fünf Lücken, manchmal benutze ich vier Lücken, irgendwann sieben Lücken oder acht Lücken, also werde ich nur diese einzelne Acht-Pixel-Linie verwenden. Ich werde etwas Ähnliches verwenden. Es gibt viele Möglichkeiten, dies zu erstellen. Es gibt Online-Tools, Sie können auch ein Pixelmuster erstellen, Sie können hier sehen, ich habe dieses Muster Overlay. Ich habe dieses Muster erstellt. Lasst uns das „Entsperren“. Lassen Sie mich es Ihnen zeigen. Ich habe diese Muster erstellt, Sie können hier sehen, das sind acht und das sind 16 Pixel, und das ist, ich denke, es ist 24. Dies sind also verschiedene Pixelrastersysteme, die Sie verwenden können. Sie können auch 16 verwenden, wenn Sie möchten. Vielleicht wird es Ihre Platzierung vereinfachen, weil die Gitter breiter sind. Sie können sehen, dass einige meiner Elemente hier nicht synchron sind. Sie können hier drüben sehen, aber das ist fast perfekt passen, Sie können die Überschrift sehen. Auch die Schaltfläche passt hier nicht hinein , da sie acht Pixel und acht Pixel oben, unten hat. Aber Sie können sehen, dass der Block hier drüben ist. Wir werden so etwas aufstellen. Also lasst uns anfangen und so etwas einrichten. 27. Zeichenflächen und Raster für die Desktop-Ansicht einrichten: Jetzt werden wir unser modulares Gitter mit dieser Website modulargrid.org erstellen. Wir werden acht als Grundlinie verwenden, acht Pixel, das sind diese kleinen Linien, diese vertikalen Linien. Dann haben wir unser Modul, 78, das ist diese Spalte, diese Breite. Dann haben wir 12 Module, das sind 12 Spalten hier drüben. Die Rinnenbreite beträgt 24 Pixel, was dieser weiße Bereich ist. Dies ist der Abstand zwischen unseren beiden Spalten. Dann haben wir unsere Modulhöhe, die eins ist. Denn wenn ich versuche, hier so Null zu setzen, hat es einige Probleme verursacht. Also benutze ich das hier. Das ist, wie das Layout hier gemacht wird. Wir haben unsere Gesamtbreite von 1.200. Klicken Sie auf diesen „Download“. Ihr Muster wird heruntergeladen. Jetzt werden wir dieses Muster verschieben. Ich habe es bereits verschoben, Sie können es in Ihren Presets-Ordner kopieren, innerhalb des Pattern-Ordners. Daraus werden wir es in Photoshop laden. Jetzt werden wir eine neue Datei in Photoshop erstellen. Wir werden New erschaffen. Ich habe viel mit Zeichenflächen gekämpft und viel gelernt. Lassen Sie mich Ihnen zeigen, was der Prozess ist, den wir verwenden werden, 1.200 mal 2.400, und wir werden auf Zeichenflächen klicken. Sie arbeiten auf eine sehr seltsame Art und Weise. Es gibt viele Fehler in Zeichenflächen. Ich mag sie überhaupt nicht, aber wir müssen sie benutzen. Es gibt zwei Möglichkeiten, ob Sie sie in der ersten Zeit verwenden und weiterhin in der Zeichenfläche entwerfen können, oder Sie können einfach jedes Dokument ohne Zeichenfläche erstellen. Wenn Sie also ein neues Dokument erstellen, deaktivieren Sie dieses und Sie können ein 1.200 Pixel Dokument ohne dieses Artboarding erstellen. Ich denke, es hat ein Buggy-Gefühl für mich, also werde ich jetzt bei dieser Zeichenfläche bleiben. Mal sehen, wie es ausfallen wird. Nun, für diese Ebene, lassen Sie uns hier ein weiteres Rechteck erstellen. Klicken Sie hier, das sollte 1.200 sein. Nun, warum ich das erschaffe. Ich werde Ihnen in wenigen Minuten sagen, Höhe wird 24 sein. Das ist mein Haupt-Rechteck-Dokument hier drüben, Rechteck. Ich habe ein Rechteck erstellt. Nun, ich werde tun, wenn ich werde, um Abschnitte dieses Designs in dieser Zeichenfläche 1 erstellen . Ich habe hier drüben unsere Aktion geschaffen. Wenn Sie nicht wissen, was die Aktionen sind und wie Sie sie erstellen, müssen Sie meine anderen Kurse sehen oder Sie können online gehen. Es ist sehr einfach. Ich werde diese Aktion mit Ihnen teilen, zumindest müssen Sie wissen, wie man sie lädt. Ich werde verschiedene Ordner erstellen. Sie können hier drüben sehen, Grid Header, Navigation, alles. Es ist da drin. Lassen Sie uns dies innerhalb der Kopfzeile verschieben. Jetzt werde ich mein Rechteck duplizieren und ich werde es innerhalb des Rasters verschieben. Im Grid habe ich bereits das Raster heruntergeladen, das sich in meinen Mustern befindet. Ich werde Pattern Overlay verwenden, und ich werde das Grid verwenden. Lasst es uns weiß färben. Ich werde auch dieses Weiß färben, es wird unser Hintergrund sein. Ich werde diese Schicht hier sperren, und das wird unser Gitter sein. Sie können es auch wie 1.200, 24 Pixel Rinne oder so etwasnennen 24 Pixel Rinne oder so etwas um sicherzustellen, dass Sie sich daran erinnern, dass es so ist. So ist meine Ordnerstruktur oder Gruppen, die ich in meiner Zeichenfläche erstellt habe. Sie können es auch auf Desktop umbenennen, so etwas. In diesem Bereich werden wir entwerfen. Mal sehen, was die Größe davon ist. Es wird gleich 1.200, und ich werde sehen, was die Größe dieser Schicht ist. Es sind auch 1.200, aber ich weiß nicht, warum das hier oben vermasselt ist. Mal sehen, was unser Muster ist. Sie klicken einfach auf „Snap to Origin“ und ich denke, das Muster wird an seiner Position sein. Also drücke „OK“, und lass uns sehen. Vergrößern Sie, dass unsere Spalte, dass alles aufgereiht ist. Alles ist gut. Jetzt können wir damit beginnen, in diesem Bereich zu entwerfen. Die zweite Option ist, dass ich meine Zeichenfläche auf 1.400 erweitern werde , nur um etwas Platz um sie herum zu bekommen. Also mal sehen, ich habe nicht auf die Zeichenfläche geklickt. Stellen Sie sicher, dass Sie auf die Zeichenfläche klicken, die Zeichenfläche im Ebenenbedienfeld auswählen und die Größe wie folgt auswählen. Nun, ich werde mein Gitter darin ausrichten, so. So erstellen Sie ein Dokument mit 1.400 Pixeln. Sie können auch 1.400 Dokumente am Anfang anlegen. Ich werde dieses Dokument mit der gleichen Farbe füllen. Ich denke, es ist ein bisschen aus, also werde ich es so skalieren. Das ist mein Hintergrund, ich werde es wieder sperren, damit ich mich nicht in Sachen bewegen kann. Ich werde die Dinge im Grunde mit diesem Hintergrund ausrichten. So wird unser Hauptdokument eingerichtet und so werden Sie Zeichenflächen verwenden. Wenn Sie also am Anfang keine Zeichenflächen verwenden, wählen Sie am Ende alle Ebenen aus, etwa so, und Sie werden mit der rechten Maustaste auf Zeichenfläche aus Ebenen oder Gruppen klicken. Sie können auch in diesen Bereich gehen und Sie können Zeichenfläche von Ebenen gehen. Also werden wir alle unsere Schichten und alles in unserem Design auswählen und wir werden Zeichenfläche von dort erstellen. Also verwende ich die zweite Methode, die ist, dass wir mit einer Zeichenfläche beginnen. Wir haben unser Gitternetz eingerichtet. In der nächsten Lektion werden wir unsere Kopfzeile entwerfen, und ich werde Ihnen zeigen, welche Dinge Sie gleichzeitig öffnen müssen , wenn Sie eine Kopfzeile entwerfen. Also lasst uns weitermachen. 28. Gestalten von Header/Hero Teil 1: Beginnen wir nun mit unserem Design, das wir in der letzten Lektion erstellt haben. Speichern wir es mit einem Namen, wie wstudio. Jetzt habe ich alle Dokumente geöffnet, die ich brauche. Einer davon ist dieser Inhalt. Ich brauche diesen Inhalt geöffnet. Dann brauche ich dieses Dokument, wo wir unser Logo haben, die Illustrator-Datei ist. Die anderen Dinge, die Sie brauchen, sind dieses Bild, das ich benutze, die im Grunde mein Vermögen sind. Ich werde dieses Bild verwenden, das lizenzfreie Bild ist. Außerdem werde ich meinen UI Style Guide in Photoshop laden. Ich werde diese Seite jetzt so in meinen Photoshop laden. Das erste, was wir tun werden, ist, dass wir sie so horizontal anordnen . Ich habe diesen UI Style Guide oben so geladen, und mein Design ist hier drüben. Lassen Sie uns es ein wenig nach oben bewegen und ich werde auf diese klicken und zu 100 Prozent hineinzoomen. Jetzt werden wir diesen Header auswählen. Ich werde diese Kopfzeile, Navigation und Logo auswählen , und ich werde mein Logo von hier aus greifen. Kopieren. Ich werde es hier einfügen, Control V, Befehl V, Smart Object, und es wird ein Smart Object sein. Nun, für das Gitter werden wir es 20 Prozent schaffen, damit wir es durchsehen können, und ich werde es sperren. Machen wir es 10 Prozent. Ich denke, 20 Prozent sind gut. Ich werde es sperren und ich werde umziehen. Sobald ich das gesperrt habe, kann ich auf jede Ebene dahinter klicken. Im Moment richte ich sie nur aus, ohne Entfernungen oder Leerzeichen zu verwenden. Der nächste Schritt ist, dass wir diesen Text verwenden , der unsere Links sein wird. Ich werde mal hier rüber klicken. Jetzt werden wir den Inhalt von hier bekommen. Ich werde diese Links von diesem oberen Navigationsdokument kopieren, und ich werde es hier so einfügen. Ich werde das auch färben. Ich habe bereits diese Farbpalette, also stellen Sie sicher, dass Sie diese Farbpalette haben. Sie können auch Variationen dieser Farben erstellen, wie ich diese verwendet habe. Ein bisschen dunkler, gräulicher Farbe. Lassen Sie uns das Gitter hier verstecken. Lassen Sie uns ein paar Hilfslinien erstellen, damit ich zumindest die Grenze kenne. Ich werde jetzt mein Gitter verstecken, nur damit ich frei entwerfen kann. Jetzt werde ich hier einen schwarzen Knopf erstellen, der in unserem Styleguide hier drüben war. Das ist ein normaler Knopf. Lassen Sie uns hier klicken und ich werde es greifen. Das ist unsere Ebene, und ich werde sie greifen und hierher ziehen. Das ist jetzt unser Knopf. Nennen wir es „Holen Sie sich ein Zitat“ so etwas. Wir werden regelmäßig hier drüben benutzen. Die Lesergröße regulär 20 Pixel, und die Tastengröße sollte 144 mal 40 sein, weil wir gehen, um kleine Taste zu verwenden. Dies wird ein kleiner Knopf sein. Kontrolle T oder Befehl T, 144 von 40. Stellen Sie sicher, dass Sie nicht darauf geklickt haben, sonst wird es Ihre Höhe und Breite durcheinander bringen. Ich werde es so ein bisschen nach unten bewegen. Ich denke, ich sehe einige Abstände, also werde ich das hier entfernen. Es ist im Grunde Tracking. Es sieht seltsam aus. Es war zu viel, vielleicht fünf ist gut. Ich werde das hiermit bewegen. Stellen wir sicher, dass wir es hier ausrichten. Wählen wir das aus und richten Sie es hier aus. Sie können sehen, dass die klugen Jungs kommen, sie richten die Dinge damit aus. Ich werde alles so ausrichten. Ich denke, meine abgerundete Ecke ist ein bisschen zu viel, also werde ich hier vier Pixel so verwenden. Es sieht gut aus. Wir haben „Get a quote“ und oberster Abschnitt fast fertig. Als nächstes ist unsere Überschrift und Absatz und Schaltfläche hier drüben, und dann fügen wir Videobild hier drüben hinzu. Davor werden wir die Höhe unseres oberen Bereichs einstellen. Lassen Sie uns die Höhe von 800 erstellen, so etwas. Was ich tun werde, ist, dass ich hier oben 800 Pixel hoch etwas wie dieses erstellen werde. Warum brauche ich diesen Block, um den oberen Abschnitt zu bekommen. Ich werde einen Leitfaden wie diesen erstellen . Es ist auf 800. Jetzt werde ich es löschen. Ich denke, jetzt sollte ich so zu dieser Fliese wechseln. Lass uns hier drüben etwas Platz haben. Außerdem können wir ein wenig verkleinern, so dass es für uns einfacher ist. Ich habe mehr Platz hier drüben. Jetzt müssen wir einen hinzufügen, ziehen Sie ihn einfach und löschen Sie alles andere. Ich werde Rubrik 1 verwenden. Ich glaube, ich habe alles gelöscht. Die Schriftart ist Yorkten, und wir werden 54 verwenden, und auch ich werde die Zeilenhöhe verwenden, um 54 zu sein. Sie können auch 56 verwenden, wenn Sie möchten. Jetzt haben wir unseren Weg hierher, lasst es uns zufällig ausrichten. Sie sich keine Sorgen über die Ausrichtung, wir werden das beheben, sobald wir in unserem Raster sind. Jetzt brauchen wir einen Absatz hier drüben und wir werden unser D- und Text-Werkzeug auswählen und so etwas ziehen. Wir werden diesen Bereich kopieren, diesen Absatz, und gehen zu Photoshop. Es hat Nunito Sans, Regular, und 20 Pixel oder 20 Punkte, und wir werden 24 hier verwenden. Vierundzwanzig ist im Grunde unsere Linienhöhe. Es ist auch ein Vielfaches von acht. Sie können sehen, dass diese Farbe sehr scharf aussieht, also werden wir sie so langweilig machen. Wir haben diese Farbe in Ihrem Styleguide angegeben. Du kannst hier rüber sehen, wenn du dazu gehst. Sie können sehen, dies sind die Farben für Ihre dunkle und hellgrau. nächste Schritt ist, dass wir hier eine Schaltfläche erstellen. Dafür hatten wir unseren Knopfstil, der dieser war. Ich ziehe meinen Knopf hier rüber. Das heißt: „Jetzt loslegen“. Das ist unser Knopf. Lassen Sie uns es in der Mitte so ausrichten. Das sieht gut aus. BTN-Main. Das ist unser BTN-Main. Lassen Sie es uns in unseren Header-Bereich verschieben. Das wird hier drüben sein. Was ist das? Ich glaube, es ist unser Knopf. Lassen Sie uns verkleinern. Es ist btn-quote-nav bar. Es befindet sich in der Navigation. Ich werde es auf Navigation und Logo, Navigation und Logo, Navigation und Logo, Navigation und Logo verschieben. Benennen wir es in „Logo“ um. Das ist unser Vektor-Smart-Objekt, dieses. Jetzt werden wir diesen Knopf hier rüber bewegen. Wählen Sie diese Schaltfläche, V, und ich werde es so verschieben. Sie sich keine Sorgen über die vertikale Ausrichtung, wir werden das bekommen, nachdem wir das gesamte Design repariert haben. Jetzt werden wir hier etwas erschaffen. Wir haben nur wenige Schichten draußen. Wir müssen sie innerhalb der Kopfzeile verschieben. Jetzt schalten wir unser Raster ein, weil wir jetzt unser Raster brauchen, und ich denke, wir brauchen es mindestens 50 Prozent, damit ich sehen kann, was die Größe meiner Spalten ist. Wir haben diese Säulen hier drüben. Lassen Sie uns ein Rechteck erstellen, und ich werde ein Rechteck wie dieses erstellen. Das wird unser Videobereich sein. Sie können hier ein beliebiges Bild erstellen oder einfügen. Ich habe einen Ordner voller freier Bilder, lassen Sie mich Ihnen zeigen. Hier ist der Ordner, den ich von kostenlosen Bildern des Arbeitsbereichs habe, also werde ich jedes Bild von hier greifen und ich werde es in meinen Photoshop ziehen und wir werden es hier so verschieben. Das ist also unser Bild. Ich werde es darin platzieren. So etwas. Wir werden es gruppieren und nennen es „Video-Bereich“. Wieder wird es innerhalb der Kopfzeile sein oder Sie können es Helden Bereich oder was auch immer nennen, es liegt an Ihnen. Ich werde ein paar Dinge arrangieren. Also Video-Bereich und es wird einige Overlay darauf haben. Ich werde etwas Overlay in diesem Bereich verwenden. Gehen wir zu Ebenenstilen, Verlaufsüberlagerung, und wir werden den gleichen Farbverlauf verwenden, den wir hatten, vielleicht diesen. Wir alle haben diese Steigungen in unseren Styleguides, denke ich. Mal sehen, wo es sein wird. Wir werden es so etwas machen. Vielleicht können wir Overlay verwenden oder multiplizieren oder vielleicht verdunkeln. Versuche es weiter bis zu dem Zeitpunkt, zu dem du kommst. Ich werde Overlay mit Normal verwenden. Das sieht gut aus. 29. Gestalten von Header/Hero Teil 2: Ich kann mehr hinzufügen, wenn ich das mögen möchte. So sieht es aus. Ich kann jeden anderen benutzen, vielleicht wie diesen. Wieder, ich denke, ich hatte einige Schatten im Hintergrund dieses Bereichs. Also werde ich Schatten auf diesem Rechteck hinzufügen. Gehen Sie also zu Ebenenstile und Schlagschatten. Also habe ich diesen Schatten. Sie können jede Farbe für diesen Schatten oder vielleicht eine dunklere Farbe zufällig von hier aus verwenden. Also werde ich diese Farbe jetzt verwenden. Größe, ich werde 10 verwenden, bewegen Sie es fünf Pixel. Also denke ich, es sieht toll aus. Neunzig, so etwas. Vielleicht können wir etwas dunklere Farbe verwenden. Also etwas hier drüben. So benutze ich hier drüben etwas Schatten. Jetzt können wir hier einen Knopf hinzufügen, was sehr einfach ist. Wir werden ein Ellipsenwerkzeug verwenden. Halten Sie „Shift“ für die Proportionen gedrückt. Also habe ich diese Sonnenfinsternis und es wird hier weiß sein. Dann brauchen wir eine Play-Schaltfläche, die in unseren benutzerdefinierten Formwerkzeugen sein wird. Es ist also im Grunde ein abgerundetes Rechteck. Sie können sehen, dass es ausgewählt ist, Sie müssen es finden. Wenn Sie es nicht finden können, müssen Sie alle Ihre Shapes hier aktivieren. Also, was ich tun werde, ist, dass ich es so ziehen werde. Malen Sie es lila, ich glaube, es war dieses Lila, und wir werden es mittendrin bewegen. Also werde ich es mittendrin bewegen. Auch ich werde es mit meinen Augen platzieren. Also stellen Sie sicher, dass Sie Ihre Augen trainieren. Wenn es proportional ist, werden Sie es mögen. So habe ich fast den oberen Abschnitt meiner Kopfzeile erstellt. Vielleicht muss ich die Steigungen besorgen. Mal sehen, welche anderen Effekte wir haben können. Lineares Licht sieht auch gut aus. Auch das harte Licht sieht toll aus. Weiches Licht sieht auch gut aus. Licht und Farbe, lineares Ausweichen nur Farbe, Bildschirm aufhellen, lineares Brennen, Farbbrennen, Multiplizieren, Verdunkeln. Also werden wir normal mit Opazität wie folgt verwenden. Sie können es auch erhöhen, wenn Sie wollen, so etwas. Es sieht gut aus. Sie können auch Farbe verwenden, die diese ist, dieses bläuliche lila. Hier drüben sieht es besser aus. In der Schaltfläche „Original“ habe ich einen weiteren Schlagschatten erstellt, der diesen ist. Sie können sehen, dass wir drei Schatten hier haben, Sie können sehen, dass dies der Farbverlauf ist, und dann habe ich einen Schatten, der bläulicher Schatten ist. Sie können diese bläuliche lila Farbe auch für diesen Schatten verwenden. Wenn Sie es etwas dunkler machen möchten, können Sie die Sättigung so erhöhen und es liegt an Ihnen. Lassen Sie uns hineinzoomen, um zu sehen, was tatsächlich mit der Schaltfläche passiert. So können Sie hier sehen, wir haben einige Schatten. Lasst uns den anderen Schatten erhöhen , der dieser ist. Lassen Sie uns es ein bisschen langweiliger machen und seine Größe erhöhen. Auch wir werden es mehr so multiplizieren. Es sieht jetzt besser aus. Wenn Sie diese zu viel scharfe Farbe um sie herum verstecken möchten, die blau ist, können Sie diese Farbe eher hinzufügen, also ist es ein bisschen lila blau. Jetzt sieht es besser und schlanker aus. Jetzt ist es an der Zeit, dass wir es mit unserem Raster ausrichten. Also werde ich mein Gitter einschalten. Das erste, was ich tun werde, ist, mal sehen, was die Größe davon ist. Höhe, ich werde die Höhe meines Logos entsprechen. Ich werde das mit meinem Gitter drücken, 48. Also wird es in meine Bars passen, acht Pixelbalken. Ich gehe auch zu eins, zwei, drei, vier. So können Sie so etwas verwenden. Vier Linien von oben und dann werden wir diesen Bereich damit ausrichten, wie diese eins, zwei, drei, vier, fünf. Vielleicht denke ich, dass ich es hier drüben platzieren werde. Also fünf von oben. Nun, für den Knopf, werde ich es so ausrichten. So ist es fast in der Mitte ausgerichtet. Ich denke, von oben ist es eins, zwei, drei, vier, fünf. So ist es 40 Pixel von oben. Diese sind wirklich wichtig, stellen Sie sicher, dass das so sein wird. Nun über diesen Bereich, lasst uns es ein bisschen so erweitern. Jetzt haben wir unseren Videobereich und es ist unser Spiel. Lasst uns sie zusammenfassen. Play-BTN oder Play-Taste. Also haben wir unseren Videobereich, lassen Sie es uns entsprechend unserem Raster ausrichten. Ich werde es so dimensionieren und von hier so. Also mal sehen, was näher an der 591 ist. Fünfhunderteinundneunzig teilen sich durch 8. Also denke ich, wir brauchen 74 multipliziert mit 8, 592. Also werde ich es 592 so dimensionieren , und es wird perfekt in mein Raster passen. Ich denke, ich muss mir keine Sorgen machen. Es ist schon ich denke in diesem, ausgerichtet auf die Größe. Hinweis zu den Spalten. Sie können hier drüben sehen, ich benutze zwei Spalten dafür. Dann werde ich dies verwenden; eins, zwei, drei, vier, Spalten dafür. Diese Links nehmen also ein, zwei, drei, vier Spalten. Sie können diese vier Spalten sehen. Dies wird Ihren Entwicklern wirklich helfen, alles auszurichten, etwa so. Dann haben wir unser Logo in diesen beiden Spalten. Andere vier von drei Spalten sind leer. Sie müssen sich also keine Sorgen darüber machen. Jetzt werden wir unseren Text so in unsere Zeilen ausrichten. Lassen Sie es uns ein wenig hier rüber bewegen und bewegen wir unseren Knopf in das Raster. So etwas. Jetzt werden wir unser Raster verstecken und verkleinern, um zu sehen, wie verhältnismäßig unser Design ist. Es sieht toll aus. Nun, wenn Sie den nächsten Bereich oder nächsten Abschnitt hinzufügen möchten, können Sie ihn hier hinzufügen. Wir fügen einige Überlappungen dieses Bereichs mit unserem nächsten Abschnitt hinzu. Nun, in der nächsten Sitzung werden wir den nächsten Abschnitt dieses Entwurfs erstellen. Gehen wir also zur nächsten Lektion über. 30. Schritte entwerfen Teil 1: Jetzt in dieser Lektion werden wir den zweiten Abschnitt erstellen, wir nennen es den ersten Abschnitt, Abschnitt 1 und Sie können sehen, dass unsere Kopfzeile fast abgeschlossen ist. Es gibt wenige Dinge, die ich hier übersehen habe, das ist eine Zeile, die hier ist. Lassen Sie Ihren Kunden Ihre Website nicht mit den ersten drei Sekunden verlassen. Also, was ich tun werde, ist, dass ich das in diesem Bereich bekommen werde, T oder Text auswähle, und wir werden es hier einfügen. Klicken Sie mit der rechten Maustaste, und konvertieren Sie ihn in Vielleicht wird es in diesem Bereich nicht passen. Wir werden einen Absatz erstellen. Es wird so sein. Mal sehen, was hier passiert. Wir haben das hier. Lassen Sie uns es auf der linken Seite ausrichten, damit es besser aussieht. Richten Sie es in der Mitte aus oder vielleicht richten wir es danach aus. Lassen Sie uns die Schriftgröße einstellen, die Yorkten Normal Bold sein wird, und es wird sein, welche Skala haben wir? Vierundzwanzig ist gut. Wir haben es hier drüben. Also werden wir 24 verwenden, und es wird Yorkten Normal Bold sein. Wir können auch 24 und vielleicht 28 verwenden. Wir wollen hier drüben, so. Ich denke, 24 sieht gut aus. Unsere Zeilenhöhe wird 28. Also haben wir das hier drüben. Lassen Sie uns unser Gitter einschalten, so etwas. Das, was wir tun werden, ist, dass wir hier drüben etwas überschneiden müssen. Lassen Sie uns hineinzoomen und sehen, wo wir das aufgereiht haben. So etwas wie das. Vielleicht können wir diese Spalte hier benutzen. So ist es einfacher, sich so auszurichten. Nun der zweite Teil, den wir tun werden, ist, dass wir zuerst die Hintergrundfarbe oder die Hintergrundebene dieses Teils erstellen. Wir werden diesen Abschnitt 1 verschieben, und ich werde mein Rechteck-Werkzeug greifen und wir werden etwas ähnliches wie dieses ziehen. So etwas wie das. Wir werden die Größe danach anpassen. Also mach dir keine Sorgen darüber. Ziehen Sie es einfach so. Unsere Farbe wird sich auf beide Seiten ausdehnen. Wir werden es so etwas bewegen. Nun, ich weiß nicht, was das Problem damit ist. Doppelklicken Sie auf, und wir verwenden diese Farbe, die f2f4f7 ist. Es ist ein bisschen bläulich, dieser Schatten hier drüben. Wenn ich zu diesem Farbton gehe und ich weiter die Helligkeit steigere und die Sättigung weiter reduziere, so. Also werde ich hier drüben etwas besorgen. Ich werde das mittendrin kriegen. Farbe, die ein bisschen bläulich-grau oder sehr hell weiß bläulich-grau ist. So habe ich diese Farbe bekommen. Ich benutze es 5-2-5-4-5-7. Sie können sehen, es ist sehr nah an dem Farbton dieser. So ist es 226 und es ist 223. Sättigung ist zwei, Helligkeit in 97. Ich werde auf „Okay“ drücken. Mal sehen, wo die Grenze davon ist. Lass es uns ein bisschen nach oben bewegen. Lassen Sie uns unser Gitter multiplizieren. Also werden wir so etwas multiplizieren oder vielleicht verdunkeln. Das ist also eine bessere Sicht. Dies ist ein Trick, den ich gerade vor ein paar Tagen entdeckt habe, dass Sie etwas schaffen können, und wir werden es Hintergrund nennen. Das ist also unser BG. Sie können sehen. Lassen Sie uns es etwas anderes färben, damit wir es leicht ausrichten können. Jetzt denke ich, es ist ausgerichtet, und lasst uns es dunkel färben und unser Gitter verstecken. Sie können sehen, wie sich unser Abschnitt in den nächsten Abschnitt bewegt, und wir haben einige Schatten hier auf diesem Abschnitt. Jetzt werden wir von hier an ein paar Stile erstellen. Wir werden Brennstofftextilien schaffen. So können wir sie immer wieder verwenden. Dies ist unser grundsätzlich Absatzstil. Lassen Sie uns also zum Absatzformat wechseln. Wenn Sie hier nichts sehen, können Sie zu Fenster gehen und Absatzformate hier aktivieren. Ich werde ein neues Absatzformat erstellen. Ich habe es doppelt geklickt und ganze Texte ausgewählt und neu erstellt. Dies ist unser grauer Absatzstil. Dies ist unser grauer Absatzstil. Drücken Sie „OK“ und gehen Sie zu diesem, und dann werden wir erneut darauf doppelklicken. Was passiert hier drüben? Lasst uns das behalten. Wir werden diese auswählen, einen neuen Stil erstellen und es wird unsere Überschrift 1, Überschrift 1 oder Hauptüberschrift sein. Obwohl wir es nicht immer wieder verwenden werden, denke ich, aber ich denke, es wird Abschnittsüberschriften sein. Es wird Abschnittsüberschrift sein. Es wird alle Farben und alles zu speichern. Ich werde Ihnen zeigen, wie es uns am Ende helfen wird. Dies ist unsere Rubrik, und ich denke, wir brauchen einen weiteren Stil , der diesen sein wird. Ich werde diesen auswählen. Ich werde eine Unterposition Weiß erstellen. Es wird unsere Unterposition Weiß sein, und lasst es uns so speichern. Noch eine Sache, wir werden eine Unterüberschrift dieser Farbe erstellen. Also werde ich im nächsten Abschnitt eine weitere erstellen. Erstens, was wir tun werden, ist, dass wir in diesem Bereich, nämlich in diesem Abschnitt 1, übergehen werden. Stellen Sie sicher, dass Sie darin sind. Andernfalls werden Sie irgendwo draußen klicken. Jetzt haben wir dies, das ist unsere Überschrift, und das ist unsere Unterposition. Lassen Sie uns in diesen Bereich bewegen und ich werde T. auswählen Dies ist ein sehr netter Trick, den ich entdeckt habe, drücken Sie Shift, während Sie gehen, um zu klicken, sonst wird es für diesen Pfad oder diese Form im Hintergrund zu schreiben. Also habe ich so etwas. Fügen Sie es hier ein, und ich werde meine Stile verwenden, die mein Absatzformat ist. Ich habe Abschnittsüberschrift und klicke darauf. Wir haben unseren Stil zurück. Jetzt werden wir die Unterposition verwenden, die so etwas sein wird. Wenn Sie eine Ebene, Textebene in Photoshop auswählen , gibt es einen sehr netten Trick, dass, wenn ich dieses ausgewählt habe und dann auf dieses Textsymbol klicke, es wird den Text im gleichen Stil zu erstellen, Farbe und Schriftgröße, die ich kürzlich geklickt habe. Manchmal ist es sehr schwierig für mich, die Schriftarten zu finden, die ich habe. Also, was ich tue, ist, ich klicke einfach auf die Ebene, die ich mag, und gehe dann zurück zu dem Ordner oder Gruppe und klicke dann hinein und es wird mir das gleiche alles geben. Also lasst uns das versuchen. Kontrolle C und ich werde es hier drüben so einfügen. Jetzt werde ich eine Farbe verwenden. Ich denke, ich habe diese Farbe in meinem Design verwendet. Also, ja. Wir haben diese Farbe. Jetzt hier werden wir einen anderen Stil erstellen, Absatzstil. Ich werde darauf doppelklicken, und ich werde auf diese klicken. Das wird unsere Unterposition Purple sein. Subhead Purple, so etwas. So können Sie sich daran erinnern. Unterkopf weiß, so etwas. Ich brauchte es diesen. 31. Schritte entwerfen Teil Teil 2: Also haben wir unsere lila Unterposition hier drüben. Jetzt werden wir den nächsten Abschnitt erstellen, der unsere Symbole und ihre Details hier drüben sein wird . Also, was ich tun werde, ist der gleiche Trick. Lassen Sie uns zuerst den Prozess sehen, den wir hatten. Bewerten Sie Ihr Geschäft und Design für die Benutzer, testen Sie Produkte an Ihren realen Benutzern, vermarkten Sie Ihr Produkt. Jetzt werden wir zuerst alle diese Texte bekommen. Also vorher werden wir nur ein Beispiel erstellen. Ein Block. Also zuerst, der erste Block wird dieser sein. Das ist unser erster Block. Ich werde das hier in diesen Bereich bringen. Ich werde es entsprechend dimensionieren, vielleicht denke ich, dass ich eine Größe von 128 brauche. Ich denke, 128 ist gut, sieht gut aus. Lassen Sie uns verkleinern und sehen, wie sich die Größe vergrößert. Ja, ich denke, es sieht gut aus. Dann werden wir hier eine Unterüberschrift erstellen, die lautet „Bewerten Sie Ihr Geschäft“, also werde ich Ihr Unternehmen hier drüben bewerten. Bewerten Sie Ihr Unternehmen. Dies ist unser erster Schritt, und wir werden etwas näher daran verwenden. Vielleicht das hier. Ich denke, ein bisschen dunkler ist gut. Also haben wir das hier. Warum ich keinen Stil für diesen geschaffen habe, ist, weil wir hier keinen Stil brauchen, wir werden 20 wie diesen verwenden, und ich denke, das ist gut. Vielleicht brauchen wir etwas Ähnliches. Also haben wir das fast erledigt. Kopieren Sie einfach den Rest des Textes, Ctrl C und ich werde hier einen Absatz wie folgt erstellen und ich werde es zentrieren. Lassen Sie uns unsere Absatzformatvorlage anwenden, die grauen Absatz ist. Also muss ich meinen Stil nicht außer Kraft setzen, also habe ich das getan. Jetzt werden wir unser Gitter einschalten, weil wir hier drei Spalten benutzen werden. Also lasst uns hierher gehen und das passiert sehr viel mit mir, dass ich nicht in den richtigen Bereich geklickt habe. Also gehe ich zum Abschnitt 1, Strg G und es wird mein Schritt 1 sein. Lassen Sie es uns nun innerhalb dieser drei Spalten verschieben. Wir haben es fast in der Mitte dieser drei Spalten. Das zweite, was wir tun werden, ist, dass wir es so ausrichten werden , dass wir nicht alles wieder ausrichten müssen. Also lassen Sie es uns so ausrichten. Ich denke, es sieht gut aus. Dies wird Kapital W sein, und wir haben unseren ersten Schritt abgeschlossen. Jetzt werden wir dies in den anderen drei Spalten replizieren. Ich werde nur das Symbol und den Text ersetzen. Also werde ich es sehr schnell machen. Also gehe ich zu Strg G oder Befehl J und ich werde es hier so verschieben. Stellen Sie sicher, dass, sobald Sie Ihr anderes Symbol hierher bringen, Sie es richtig benennen und Sie sie richtig dimensionieren, damit ich das vorherige Symbol nicht ausblenden, ich kopiere einfach das andere und dimensioniere es in diesem Raster. Ich werde 128 verwenden, damit sich das richtig ausrichten wird. Sie müssen sich daran erinnern, welche Größe Sie verwendet haben. Ich werde den vorherigen löschen. So werde ich alles kopieren, und ich werde diese vier Schritte replizieren. Jetzt haben wir unsere sich wiederholende Aufgabe erledigt. Es gibt noch eine Sache, die Sie tun können. Sie können zu diesem oberen Raster gehen und wir werden dies in vier Abschnitte teilen , um sicherzustellen, dass wir alles genau verwenden. Was wir tun werden, ist, dass wir unsere Führer aktivieren werden. Lassen Sie uns unser Gitter verstecken. Wir werden unsere Griddify benutzen und wir werden es in vier vertikale teilen. Stellen Sie also sicher, dass es so vertikal ist und wir werden es so teilen. Also, jetzt haben wir vier Bereiche hier drüben, gibt es ein Problem. Lassen Sie uns zuerst die Auswahl dieses Bereichs so treffen. Dann werden wir sie so teilen. Das ist perfekt. Also Strg D oder Befehl D, um die Auswahl zu verbergen und ich denke, vielleicht könnte das GuideGuide-Plug-In funktionieren. Im Moment ist unser alles aufgereiht. Sie können diese Leitfäden auch am Anfang Ihres Dokuments erstellen , da ich es jetzt um 1.400 erweitert habe, so dass meine Guides nicht funktionieren. Mal sehen, ob ich sie mit meinem GuideGuide-Plug-In erstellen kann, lassen Sie uns die Anleitungen löschen und ich werde mein GuideGuideGuide-Plug-In verwenden. Mal sehen, ob es eine gewisse Marge schaffen kann. Also 12 Spalten, Breite wird 78 sein, Rinne wird 24 sein, und es ist Mitte. Also werde ich Guides hinzufügen. Also habe ich meine Guides und dieses Plug-in hat mir wirklich den Tag gerettet. GuideGuide, Sie sollten es haben. Also habe ich gerade eine Auswahl getroffen und die Führungen um sie herum erstellt, so dass Sie sehen können, dass es perfekt über meinem Layout ist, das dahinter steht, also ist es mein Gönner. Sie können dies verwenden, um sich leicht auszurichten, Sie können solche Auswahlen treffen und Ihre Elemente ausrichten. Also das nächste werde ich in der nächsten Lektion erstellen, weil diese viel Zeit in Anspruch nehmen. Lassen Sie uns es in der Mitte ausrichten. Entschuldigung. Stellen Sie sicher, dass Sie alle Elemente in den richtigen Bereichen verschieben. Wie ich dieses Problem hier drüben habe, also ist dies Schritt 4. Sie können alle diese auch in eine andere Gruppe namens Schritte verschieben. Es wird Ihre Arbeit so vereinfachen. Es ist in der Mitte, damit ich sie so verstecken und zeigen kann. Auf diese Weise werden wir verschiedene Richtlinien und Leitfäden erstellen , auch wenn ich meine Dokumentgröße erweitert habe. Andernfalls funktioniert das standardmäßige Leitsystem von Photoshop nicht. Es erstellt Leitfäden für das gesamte Dokument. Gehen wir also zur nächsten Lektion über. 32. Die User gestalten: Nun, in dieser Lektion, werden wir einige der vertikalen Rhythmus dieses Bereichs anpassen, und wir werden auch zwei Benutzerbewertungen hier erstellen. Lasst uns anfangen. Zuerst werden wir dieses Gitter verstecken, weil wir unsere Spalten hier drüben haben. Danke an das GuideGuide-Plugin hier drüben, es hat mir wirklich den Tag gerettet. Der erste Schritt ist, ich werde hier eine Eclipse von 64 oder vielleicht 96 Pixeln mal 96 Pixeln erstellen . Stellen Sie sicher, dass Sie sich innerhalb des richtigen Layers oder Schnitts befinden. Ein weiterer Abschnitt, lassen Sie es an der Unterseite verschieben und eine Gruppe erstellen. Erstellen Sie eine Gruppe namens Benutzerbewertungen. Wir haben unseren ersten Benutzer. Wir werden eine erstellen und duplizieren. Wir erstellen einen Block und wir werden ihn wiederholen. Dies wird als Wiederholung in Bezug auf Design bezeichnet. Lassen Sie es uns in Abschnitt 2 verschieben. Benennen wir diesen Abschnitt 2 in Bewertungen um. Verwenden Sie Benutzerbewertungen und ich werde es weiß färben. Ich bin mir nicht sicher, warum das nicht funktioniert, weil ich denke, wir haben einen Hintergrund. Lassen Sie es uns über den Hintergrund bewegen. Jetzt haben wir unseren Hintergrund. Ich werde es in Abschnitt 1 verschieben. Wir können es auch Abschnitt Bewertungen nennen. Stellen Sie sicher, dass Ihre Organisation und Organisation gut ist. Jetzt werde ich etwas Grenze haben. Es wird Strich sein, und ich werde einen Strich von 4 Pixeln verwenden, und es wird diese scharfe Farbe sein. Vielleicht das hier. Das sieht gut aus. Dies sind die Farben, die ich aus diesem Bereich bearbeiten, dieser, und wir werden einen Plugin-Benutzer UberFaces verwenden. Während Ihre Ebene ausgewählt ist, werden Sie auf diese klicken, und wir haben unseren einen Benutzer hier drüben. Wir werden hier einen Text benutzen. Das wird unser Name sein. Lassen Sie uns 20. Verwenden Sie 20 Pixel und wir werden beide in diesem Bereich bewegen. Was ich versuche zu tun, ist, dass ich all diese Spalten hier und diese sechs Spalten für die zweite Überprüfung verwende. Lass es uns so bewegen. Ich werde heranzoomen. Vielleicht können wir nur eine andere Schriftart verwenden, die Nunito Sans sein wird. Mal sehen, wie es hier drüben aussehen wird. Nunito Sans Regular. Es sieht besser aus. Lasst uns diese Farbe färben. Lassen Sie uns halb fett Nunito Sans hier benutzen und wir werden dunkle Farbe verwenden, die diese sein wird. So etwas wie das. Es sieht besser aus. Mal sehen, wie fett aussieht. Bold sieht besser aus, schätze ich. Wir haben diesen Stil hier drüben so eingestellt. Es ist ein individueller Stil, also mach dir keine Sorgen darüber. Wir können auch Schriftarten am Ende ändern und ändern. Feinabstimmung, halten Sie das am Ende. Wenn jemand ein Auto malt, werden sie alles am Ende fein abstimmen. Drücken Sie die Umschalttaste und ziehen Sie so. Im Moment werde ich ein paar Lorem ipsum von hier einfügen. Paste Lorem ipsum. Ich werde das Textil hier drüben verwenden, das Absatzstil war, wo es unser grauer Absatz ist. Dies ist unsere erste Bewertung. Ich werde dieses Gesicht mit der Rezension so ausrichten, so etwas, und dieses auch mit diesem. Ich werde es mit dieser Ellipse ausrichten. Entschuldigung, wie nennen wir es? Ellipse. Ellipse, keine Sonnenfinsternis. Es ist mit Mond verwandt, schätze ich. Wir haben unsere Nutzerbewertung erstellt. Mal sehen, was wir in unserer Benutzerbewertung haben. Wo ist unser Text? Verschieben Sie es in die Benutzerbewertung und jetzt haben wir unseren vollen Block. Sie nun sicher, dass wir einen konstanten Abstand von der linken Seite haben. Eins, zwei, eins, zwei, drei, vier. Ich benutze 24 Pixel von hier. Wenn Sie dies ein bisschen länger bekommen möchten, können Sie es so etwas verwenden. Vielleicht so etwas. Das sieht gut aus. Jetzt haben wir unsere Rezension bereit. Jetzt werden wir es duplizieren und wir werden die ganze Gruppe duplizieren. Eins, zwei, eins, zwei, drei, vier. Grundsätzlich hat es auch die gleiche Entfernung. Mal sehen, ob wir es hier ausrichten können. Wie sieht es so aus? Es sieht immer noch gut aus, so dass wir uns keine Sorgen um die Ausrichtungen machen müssen. Jetzt werden wir das Bild hier ändern. Wir werden das nochmal benutzen. Lass uns ein paar Männer hierher bringen. Erstellen Sie eine andere. Das sieht gut aus. Wir haben das hier drüben. Lass es uns hineinschieben. Lasst uns das hier bewegen. Lassen Sie uns beide löschen und wählen Sie einfach dieses aus, und ich werde es darin abschneiden. Das ist gut. Wie hieß das? Carl Bates. Lasst uns diesen Carl Bates benutzen. Jetzt haben wir unsere Bewertungen aufgestellt. Sie können auch so etwas verwenden. Vielleicht kannst du diese zentrieren und diese links halten. Lassen Sie uns unsere Ebenen aktivieren, und wir werden diesen Namen zentrieren, und gruppieren Sie sie einfach. Name, Bild. Wir werden es zentrieren mit diesem ausrichten. Diese Spalten, lassen Sie uns sie in der Mitte und in der Mitte ausrichten. Lasst uns dasselbe für diesen machen. Sie können auch die ganze Spalte hier für diese und auch für diese hier auslassen. Ich werde darauf doppelklicken, um die Größe und so etwas zu ändern. Es gibt viele Stile. Sie können diese Probleme und Probleme mit großem Abstand später ausgleichen. Jetzt können Sie sehen, dass sie ausgeglichener aussehen. Wir werden jetzt unseren vertikalen Rhythmus anpassen. 33. Anpassen des weißen Raums und des vertikalen Rhythmus: Nun, in dieser Lektion werden wir diesen zweiten Abschnitt abschließen und wir werden die Dinge bewegen, um unseren vertikalen Abstand richtig zu bekommen. Ich denke, wir sollten unsere Sektion immer so beenden. Nun, was ich tun werde, ist, dass ich sehen werde , was die Abstände meiner verschiedenen Elemente hier drüben sind. Sehen Sie hier drüben, wir haben diese eins, zwei, drei, vier, fünf, sechs, sieben, acht. Es wird fast 48 sein. Machen Sie es in der Mitte dieser Linien. Dies ist der Teil, den ich verwende, diesen ganzen Block, um dies auszurichten. Dann werde ich es von hier unten aus diesem Abschnitt eins, zwei, drei ausrichten. Ich denke, es ist ein bisschen weit genug. Ich denke, das sieht gut aus. Drei Blöcke, die ich in der Mitte bewege oder benutze. Sie können auch so etwas verwenden, vielleicht zwei Blöcke. Was ich von zwei Blöcken spreche, bedeutet diese zwei Blöcke, einen weißen und einen roten. Das sieht gut aus. Lassen Sie uns unser Gitter verstecken und sehen, wie es aussieht. Es sieht gut aus. Die Entfernungen sind gut. Mal sehen, was die anderen Entfernungen für unsere anderen Schritte und Symbole sind. Das sind unsere Schritte. Vielleicht kann ich eins, zwei, drei, vier gebrauchen. Ich glaube, ich mag es hier, so. Lassen Sie uns verkleinern. Dieser Abstand sieht gut aus. Dann werden wir unsere User-Review-Abschnitt mit diesem verschieben. Ich denke, ich habe die Benutzerbewertung vergessen, die hier drüben geht. Was ich tun werde, ist, dass ich dieses Control G duplizieren und es mit meinen Shift- und Pfeiltasten verschieben werde, und ich werde es umbenennen, was meine Benutzer über mich sagen. Ich denke, es war das, was unsere Kunden über uns sagen. Es war in schwarz, weil es im gleichen Abschnitt war, also werde ich diese Farbe verwenden. Ich werde es in der Mitte schnell ausrichten, und Control D. Mal sehen, wo ich das bekommen kann. Ich denke, es ist ein neuer Abschnitt. Das sieht gut aus. Hier ist gut, und dann lassen Sie uns die beiden bewegen, vielleicht hier drüben. Lassen Sie uns verkleinern, um den Effekt zu sehen. Vergewissern Sie sich immer, dass Sie verkleinern, um zu sehen, wie es aussieht. Ich denke, es sieht ein bisschen ausgewogen aus, sieht gut aus. Lassen Sie uns die Größe dieses Bereichs anpassen. Wir haben ich denke, 96 auf dieser Seite. Ihr Ober- und Unterteil jedes Abschnitts sollte ähnlich sein. Wenn Sie so etwas hier drüben verwenden, also werde ich ein paar Guides hier drüben platzieren, die den Abstand spiegeln. Es ist im Grunde 96. Ich werde 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 und 12. Wir werden 12 Blöcke hier drüben benutzen. Verwenden wir nur eine Höhe von 96 und die Breite 1.200. Es ist einfacher für mich, ein paar Blöcke wie diese zu verwenden. Sie können hier sehen, ich kann es mit den Linien ausrichten, und ich werde meinen Hintergrund auswählen und ich werde es so ausrichten. Unsere Entfernungen sind perfekt. Mal sehen, ob es ein anderes Problem gibt, lass es uns so verwenden. Ich glaube, das ist außerhalb meiner Kolumne. Das ist kein großes Problem, ich glaube, sie sind fast mitten in diesem Bereich. Gibt es noch etwas, das ich ändern muss? Das ist fast perfekt. So etwas wie das. Mein vertikaler Rhythmus ist perfekt. Wir müssen mit der nächsten Lektion und dem nächsten Teil fortfahren , der unser Team sein wird. Dafür werde ich Sie in der nächsten Lektion sehen. 34. Team Teil Teil 1 entwerfen: Jetzt in dieser Lektion werden wir unseren dritten Abschnitt erstellen, der über unser Team geht. Also lasst uns anfangen und wir werden das jetzt erstellen. Jetzt werden wir die Größe unseres Kunsttafels ändern, wir werden das Kunsttafelwerkzeug von hier auswählen und wir werden auf diesen Namen der Kunsttafel klicken und wir werden die Höhe auf 3.400 erhöhen, so etwas wie dieses. Sie können sehen, es hat sich von unten erweitert. Jetzt werden wir unser Raster ändern, also entsperren Sie es. Eigentlich, was hier passiert ist, ist, dass es nach unserem Kunstboard dimensioniert werden wird. Wir haben es verkleinert und das war unsere Form, es ist sehr widerstandsfähig, es zu ändern. Jetzt haben wir die Muster, so dass Muster bereits auf diese Form angewendet werden. Jetzt werden wir ein anderes erstellen, lassen Sie uns dieses eine Gitter sperren und wir werden zu Abschnitt zwei bewegen. Hier werden wir einen Hintergrund erstellen. Lassen Sie uns einen Hintergrund wie diesen erstellen. Es ist mit diesem abgestimmt, dem oberen Hintergrund, und ich werde eine Farbe haben, die ein bisschen langweilig gräulich lila Farbe ist, ein bisschen langweiliger als die obere. Ich werde das auswählen, lassen Sie uns das Gitter verstecken. Sie können sehen, wie das gut kommt. Dies ist weiß, um mehr Wert auf diesen Bereich zu erhalten, dann ist dies ein bisschen langweilig grau und das ist mehr grau. Nun ändern wir den Namen in Hintergrund oder BG. BG ist kurz für Hintergrund wird in CSS und HTML Codierung viel verwendet. Ich denke, Ihre Designer, Entwickler werden diese BG wirklich lieben. Jetzt lasst uns etwas hier haben, was unser Überschrift sein wird. Unser Team ist etwas Besonderes, wir sind Tasche voller digitaler Zauberer. Das sind die Worte, die wir verwenden werden. Unser tolles Team, also werde ich es jetzt ändern, lassen Sie es in der Mitte ausrichten, dann werde ich eine andere Linie verwenden. Lassen Sie uns unsere Absatzformatvorlage darauf anwenden. Hier haben wir unseren Absatzstil , der dieser war, und wir werden ihn dahin ändern. Lassen Sie es wieder in der Mitte ausrichten, Strg+D oder Befehl+D, um die Auswahl aufzuheben. Was ich also tue, ist, ich schnell die gesamte Leinwand oder das Kunstbrett auswähle, und ich richte sie in der Mitte aus, damit. Das ist unser Abschnitt zwei, lasst uns sie so nach oben bewegen. Nun, was ich hier getan habe, ist, dass ich die Bilder meiner 40 Mitglieder hinzugefügt habe, und wir werden wieder Gitter, Gitternetzlinien und Hilfslinien verwenden. Ich habe tatsächlich einen sehr einfachen Trick benutzt, lassen Sie mich es Ihnen zeigen. Hier haben wir dieses schöne Mädchen und wir werden es hier drüben in diesem Bereich kopieren. Jetzt können Sie sehen, hier ist sie. Wir werden es greifen und schrumpfen, damit wir es in diesem Bereich zentrieren können. Wir können mindestens vier oder drei Teammitglieder hier drüben haben. Sie können drei haben, oder Sie können vier haben, es liegt an Ihnen. Lassen Sie uns die Größe so senken. Jetzt werden wir einfach einen sehr einfachen Trick verwenden, der multipliziert oder verdunkelt wird. Ich denke, dunkeln wird gut funktionieren. Darken wird gut auf dem Folienhintergrund funktionieren. Das zweite, was wir tun werden, ist, dass wir sie in diesem Hintergrund behalten werden. So habe ich diesen sehr einfachen Trick gemacht, lasst uns ihn ein bisschen hierher bewegen, so. Hier ist unser einziges Teammitglied. Lassen Sie uns einige andere von hier verwenden, ich werde den gleichen Trick immer wieder verwenden, verdunkeln und bewegen Sie ihn in der Gegend und in denen. Lassen Sie uns sie aktivieren. Wieder stecken Sie es in diese Box. Bewegen Sie es herum. Nun, wie Sie sehen können, habe ich drei Spalten für jedes Bild verwendet, Sie hier sehen können. Sie können vier Spalten verwenden, wenn Sie drei Teammitglieder haben, oder Sie können drei Spalten verwenden, wenn Sie mehr als drei anzeigen möchten. Ich vermeide die Gosse, hier haben wir vier Teammitglieder und wir können ihre Titel an der Spitze verwenden. Ich werde eine erstellen und dann überspringen die andere sehr schnell, also wissen Sie, dass ich Benutzer habe. Lassen Sie uns dieses abgerundete Rechteck hier erstellen und wir werden hier etwas wie 15 auf vielleicht 16 Pixeln verwenden. Nicht richtig aussehen, also werden wir 32. 24 Pixel und es ist vollständig abgerundet. Mal sehen, welche Höhe es hat, es hat 48 Höhen, perfekt. 48 Pixel hoch. Es ist perfekt. Jetzt werde ich eine andere Form kombinieren, die diese sein wird. Ich denke, das ist mehr als genug, lassen Sie es uns so bewegen. Jetzt werden wir beide diese Form mit Befehl+D oder Strg+E kombinieren. Lassen Sie uns es außerhalb dieses Clips verschieben und nennen es Tag oder so etwas. Dies ist unser Hauptname und Tag dieses Mitglieds, lassen Sie es 64 behalten, so etwas. Jetzt werden wir ein Textil verwenden, das Nunito Sans regelmäßig 20 Pixel sein wird, und die Farbe, die ich verwenden werde, ist weiß. Ich werde Designer benutzen, so etwas. Das sieht echt cool aus. Lassen Sie uns unsere schwarze Farbe verwenden, die unser Team schwarze Farbe ist, die diese ist. 3d3d3f. Wenn Sie diese Farbe mehr hervorheben möchten, können Sie dies verwenden. Ich reduziere die Helligkeit, um mehr Farbkombination zu erhalten, so dass Sie sehen können, dass es mehr schwarz ist. Warum benutze ich diese Kombination, weil mein Hintergrund ein bisschen langweilig ist. Ich habe einen dunkelgrauen Hintergrund, also verwende ich so mehr Hervorhebungsfarbe. Auch wenn Sie mit der vorherigen Farbe bleiben möchten, liegt es an Ihnen. Wenn Sie mit dieser Farbe bleiben möchten, sieht dies auch sehr anständig aus. Lassen Sie uns dies in der Mitte mit Ihren eigenen Augen bewegen. Jetzt gehen wir zu Strg+G oder Befehl+G, um dies zu gruppieren und lassen Sie es zu einem Tag machen. Wir werden ein anderes Tag verwenden. Jetzt gibt es mehr Kreativität. Wenn Sie verwenden möchten, können Sie einen Stil wie diesen verwenden. Bewegen Sie die Tags nach oben und unten mit den Köpfen von verschiedenen Personen Ihres Teammitglieds, also Marketing oder so etwas. Dann haben wir noch einen Tag , der diese Person sein wird. Jetzt werde ich das ein bisschen nach unten und ein bisschen auf der rechten Seite bewegen, und das wird unser UX-Design-Team Mitglied sein, und lassen Sie uns das in die Mitte bewegen. So machen wir hier drüben ein paar kreative Sachen. So habe ich all diese Tags verwendet. Nun zum Highlight, Ich werde diese blaugrün Farbe verwenden, um dies hervorzuheben. Auch wenn Sie es flach halten möchten, können Sie es flach halten. Normalerweise habe ich hier drüben einen Schlagschatten hinzugefügt, der diese Farbe war, schätze ich. Nein, ich denke, es war die gleiche Farbe, und Sie können etwas Dunkelheit hinzufügen, vielleicht 50 Prozent behalten, so etwas, und wir werden die Deckkraft auf 30 reduzieren, so etwas. Nur um zu machen, dass es hervorgehoben wird. Also schwebt jemand über diese Person, es wird so hervorheben. So haben wir etwas Cooles gemacht und lassen Sie uns es ein bisschen nach unten bewegen , nur um sicherzustellen, dass er auf dieses ausgerichtet ist oder vielleicht ein bisschen nach unten als dieses. 35. Team Teil Teil 2 Teil: Jetzt können Sie eine beliebige Skriptschriftart für die Namen über ihnen verwenden. Mal sehen, ob ich eine handgeschriebene Schriftart habe. Ich glaube, ich habe einen Marker benutzt, vielleicht schreiben wir einen Marker. Das ist Eds Market Main Script Regular. Ich habe das hier. Ich benutze Permanent Marker Regular, ich denke, es ist Google-Schriftart und Sie können es auch verwenden. Was ich tun werde, ist, dass ich ihren Namen schreiben werde, Jenna Jem, so etwas wie das. Lassen Sie uns das hier rüber bewegen und wir werden permanente Marker für 24-Pixel-Größe verwenden, und wir werden unsere gräuliche weiße Farbe verwenden. Wir werden ein paar Schlagschatten hinzufügen. Weil es so nicht sichtbar sein wird, also werde ich so etwas Schlagschatten hinzufügen , nur um es etwas näher an den Text zu machen, so. Es sieht gut aus. Jetzt werden wir sie duplizieren und sie an die Leute binden, damit ich das überspringen werde. Jetzt haben wir fast diesen Teil abgeschlossen, wir müssen nur unsere vertikalen Sachen ausrichten, die zusammen mit vertikalem Gitter ist. Mal sehen, was wir hier tun werden. Lasst uns das packen und wir werden etwas Ähnliches verwenden wie die alten Dinge, die wir getan haben, also lasst uns sehen, was wir hier drin hatten. Lassen Sie uns auf dieses Raster klicken, und ich werde es multiplizieren und es zu 100 Prozent machen. Mal sehen, wie es aussehen wird. Dennoch bin ich nicht in der Lage, den Hintergrund zu sehen, also was ich tun werde, ist, dass ich den Hintergrund für den Ausrichtungszweck etwas dunkler machen werde . Ich denke, es ist ein bisschen falsch ausgerichtet, lass es uns nach unten bewegen, du kannst hier drüben sehen. Das ist ein bisschen Chirurgie Zeug, ich nenne es Design Chirurgie, weil Sie sehr genau sein müssen, also 1, 2, 3 , 4, 5 und 6. Ich denke, ich werde fünf an der Spitze lassen, acht, fünf ist 40; 40 Pixel an der Spitze. Lassen Sie uns das hier ein bisschen nach oben bewegen, also ist es in diesem Bereich. Jetzt können wir unsere Haupthintergrundgröße reduzieren. Mal sehen, wie die Entfernung ist. Wir haben hier fast wie 107 oder vielleicht 108, so etwas, und wir haben hier 107, also ist es fast perfekt. Wir haben denselben Platz hier drüben in diesem Bereich und in diesem Bereich. Nun, ich werde die Farbe zurück in den Hintergrund ändern, den wir verwendet haben. Lassen Sie uns noch ein paar Dinge sehen, vielleicht zoomen Sie hinein und sehen Sie die Unterseite und Sie können sehen, dass wir ein Problem haben. Wir haben jetzt den perfekten vertikalen Rhythmus. Es ist nicht notwendig, wenn Ihr Coder diese nicht sehr präzise machen kann, ist es egal, aber stellen Sie sicher, dass die Abstände von oben und unten gleich sind. Sie sollten in einem guten Abstand sein; es ist im Grunde eine Verwendung von weitem Raum. Jetzt können Sie auf diesem Hintergrund sehen, der sehr bunt ist, habe ich Schlagschatten verwendet. Wie ich über diese Technik in meinen vorherigen Kursen gesagt habe, dass, wenn Sie sehr bunten Hintergrund haben, Sie einige Schlagschatten verwenden müssen. Nun, dieser Bereich ist fertig, also lassen Sie uns das ein bisschen nach unten bewegen, weil wir eine Zeile darin hatten. Ich denke, ich fühle, dass diese Entfernung ein bisschen klein ist, also werde ich es erhöhen, indem ich diese 2 und 1, 2, 20 und 1, 2, 3, 4, also füge ich 24 weitere hier hinzu. Wieder werden wir sie 24 Pixel nach unten verschieben. Lassen Sie alle diese und alle Tags auswählen, und ich werde diese verwenden. Tut mir leid, nicht das. Was ist das? Auch dieser hier. Control G. Das sind meine Gegenstände über den Bildern. Dies sind tatsächlich Gegenstände über den Bildern. Ich werde die vier Bilder dieser Leute und der Elemente auswählen, und dann werden wir sie 1, 2, 3, 4 bewegen , also nur um die Entfernung genau zu bekommen. Wir bewegen die nach unten, und wir bewegen sie nach unten. Wir sind gut mit diesem Abschnitt, und ich denke, wir haben sehr schöne Abschnitt erstellt. Fahren wir mit der nächsten Lektion fort, in der wir den letzten Abschnitt erstellen werden , der Fußzeile sein wird. Fahren wir mit der nächsten Lektion fort. 36. Die Gestaltung von Fußzeilen Teil Teil: Jetzt in dieser Lektion werden wir den letzten Abschnitt erstellen , der unsere Fußzeile sein wird. Ich habe bereits einige kostenlose Bilder gesammelt, die wir verwenden werden. Sie können jede von ihnen verwenden. Jedes Bild von Ihrem Büro, oder ein cooles Bild von außen wie dieses gemacht, oder vielleicht Ihr Bürositz leer. Sie können sich mit uns unterhalten oder so etwas. Was ich tun werde, ist, ich werde in die Fußzeile dieses Bild ziehen. Das ist unser Hintergrund. Jetzt halte ich meine „Option“ oder „ Alt“ -Taste mit „Shift“ -Taste, um so etwas zu erstellen. Ich vergrössere die Größe auf so etwas. Sie können auch die Zeichenflächengröße ändern. Wählen Sie dieses Kunstboard und ich werde vielleicht 3460 verwenden, oder vielleicht 3500, nur erhöhen 100 mehr. Wir haben mehr Platz. Jetzt ist das erledigt, dann werden wir etwas anderes darauf überlagern, das unser Rechteck sein wird. Ziehen Sie einfach ein Rechteck wie dieses und wir werden einige Farbe verwenden, kann dieses sein. Wir werden Overlay verwenden. Dann auf diesem Death for Stock das Bild, das wir benutzt haben, verstecken Sie einfach dieses. Zuerst werden wir es Graustufen machen. Ich gehe zu Anpassungen. Es gibt viele Möglichkeiten, die Farbe zu ändern. Ich werde Farbüberlagerung verwenden. Ich werde die violette Farbe von hier aus verwenden. Lass es uns hierher bringen. Dieser oder Sie können diesen verwenden, es liegt an Ihnen. Es gibt viele Möglichkeiten, eine Menge großer Wirkung zu erzielen. Wenn Sie zu dieser Farbe gehen, können Sie sehen, dass dies grundsätzlich in Schwarz und Weiß gefärbt ist. Sie können auch eine andere Farbe verwenden. Jetzt ist es gefärbt. Jetzt können Sie das Overlay aktivieren, und lassen Sie es uns normal machen und es ein wenig Deckkraft machen. Verwenden Sie eine gewisse Deckkraft wie diese. Jetzt können Sie sehen, dass ich den gleichen Effekt erzielt habe. Es gibt viele Möglichkeiten, diesen Effekt zu erzielen. Lassen Sie es uns bis zum Ende bewegen, damit nichts drinnen gesehen wird. Das ist unser Büro. Die coole Sache ist, dass Sie die Farbe ändern können, wann immer Sie möchten. Du kannst zu diesem gehen, zu diesem, oder zu diesem, oder zu dieser Farbe, oder vielleicht zu dieser Farbe, es liegt an dir. Lassen Sie uns nun verkleinern und sehen, wie es aussieht. Es ist sehr schön gebaut. Jetzt lassen Sie uns einige Stile und Dinge hier hinzufügen. Unsere Überschrift war, Lass uns dich wow und all das Zeug. Dies ist Absatz, bereit, einen weiteren Schritt zu machen. Ich werde eine neue Überschrift erstellen, drücken Sie „Shift“ und „Control V“. Jetzt können Sie sehen, die Schriftart ist sehr seltsam hier drüben. Dies ist unsere Unterüberschriften, also werde ich es in eine neue Ebene einfügen. Ich habe jetzt zwei Zeilen. Dies ist unser Hauptabsatzstil. Was ich tun werde, ist, dass ich Abschnittsüberschrift verwenden werde. Ich werde jetzt überschreiben und ich werde weiße Farbe verwenden. Jetzt stört es nichts anderes, ändert nichts anderes. Für diesen werde ich wieder Unterkopf weiß verwenden und alles außer Kraft setzen. Lasst uns ändern. Mach dir keine Sorgen über die Entfernung, wir werden hier eine andere erstellen, und dieses Mal werden wir den Absatz hier drüben einfügen. So etwas wie das. Hier haben wir den Absatz und wir werden graue Absatz-Stil verwenden. Wir werden hier die weiße Farbe verwenden. Ändern Sie nichts anderes, wenden Sie das einfach einmal an und verwenden Sie dann Ihre eigene Phantasie, um Dinge zu ändern. Ich werde es ein bisschen breit machen, nur um zwei Zeilen hier drüben zu haben. Wir werden alles am Ende ausrichten, lassen Sie uns einfach all diese tollen Sachen erstellen und weitermachen. Jetzt werden wir unseren Template Style Guide verwenden. Ich werde es schnell so ausrichten. Lassen Sie uns alles aus ihm ziehen. Ich werde Shift V verwenden und im Grunde werde ich diese Schaltfläche verwenden. Das wird hier rüber kommen. Das ist es, was ich brauchte. Dies wird unser Consult Free With Us Button sein. Das sieht echt cool aus. Lass es uns in der Mitte ein bisschen nach oben bewegen, ein bisschen hier drüben. Lassen Sie uns Ihre Guides aktivieren, Ihr Raster. Lassen Sie es uns duplizieren und wir werden so etwas verwenden. Lassen Sie uns es mit diesem ausrichten. Wir werden die Ausrichtung am Ende machen. Lasst uns zuerst weiter Dinge erschaffen. Was ich tun werde, ist, ich werde diese schwarze Farbe verwenden und dieser Knopf wird weiß sein. Ich glaube, dieser Knopf war „Sagen Sie uns, was Sie wollen. Vielleicht brauchen ist gut. Wir haben vergrößert und Sie können sehen, dass unsere Buttons wirklich schön aussehen. Nun die zweite Sache ist, dass wir hier etwas hinzufügen können, was unsere E-Mail hello@wstudio.org sein wird , so etwas. Farbe wird weiß sein, vielleicht können wir dieses Weiß verwenden. Dann werden wir es duplizieren und wir werden es mit dieser 0800 ausrichten , es wird unsere Telefonnummer sein. Stellen Sie nun sicher, dass wir alles in diesen Schaltflächen haben. Wie Sie jetzt sehen können, ist das ein bisschen anders, also werde ich es darin bewegen. Dies war btn consult, und dieser war btn E-Mail. Das sind zwei Knöpfe und alles ist aufgereiht. Lasst uns sie so aufstellen. Wir haben alles aufgereiht zumindest diese Knöpfe. 37. Die Footer Teil 2: Wir brauchen hier drüben eine Adresse und ich denke, die sozialen Links hier drüben. Gibt es noch etwas übrig? Ja, ich denke, das sind die einzigen Dinge , die noch übrig sind, oder vielleicht in Ordnung reserviert. Das ist das Letzte, was wir hier rüber bringen müssen. Jetzt werden wir den gleichen Absatz verwenden, ihn duplizieren, und ich werde ihn außerhalb dieser Schaltflächen verschieben. Wo erschaffen wir alles? Diese sind außerhalb der Fußzeile, also werde ich sie so in die Fußzeile verschieben. Sie befinden sich jetzt in der Fußzeile, so dass alles gut aussieht. Wo waren wir das letzte Mal? Das ist der Ort, an dem wir das letzte Mal waren. Hier ist unser Büro. Sie können sehen, sobald Sie Ihr eigenes Designmuster oder System etabliert haben, es wird sehr einfach für Sie sein, es zu implementieren und es sorgfältig zu verwenden und fantastisch aussehende Designs mit ihm zu erstellen. Ich wähle das aus und färbe es mit diesem. Sie können auch diese Farbe oder vielleicht schwarze Farbe verwenden, es liegt an Ihnen. Schwarze Farbe sieht auch gut aus, diese. Es gibt viele Möglichkeiten, diese zu betonen, so dass Sie auch fett hier verwenden können und die Farbe auf dasselbe Weiß ändern können. Du kannst es so lassen. Mal sehen, was die Zeilenhöhe ist, weil es für mich etwas seltsam aussieht. Nein, ich denke, die Zeilenhöhe ist perfekt. Wir brauchen volle Icons hier drüben, also werde ich einen sehr praktischen Trick verwenden, der Social Icon-Schriftarten genannt wird. Sie können hier sehen, ich habe einige von ihnen aufgereiht, also lassen Sie es uns duplizieren und einige Social Icon Schriftart verwenden, damit wir diese verwenden können, Socialico Regular. Also werde ich das hier benutzen, Socialico Regular. Was wir brauchen, ist Facebook und nicht Amazon. Vielleicht brauche ich Bhars, LinkedIn. Die sind sehr klein. Du kannst jeden auswählen, den du magst. Eigentlich müssen Sie nur ein paar Wörter eingeben. Wenn ich versuche, so etwas zu verwenden, so werde ich F. Wenn ich nur F drücke, können Sie das Facebook-Symbol dann Twitter sehen, W. Ich werde nur einige zufällig hier drüben setzen, weil es sehr schwierig für mich sein wird zu finden die Richtigen. Ich werde diese vier verwenden und die Schriftgröße, die ich verwenden werde , könnte 64 sein, so etwas. Lass uns mein Gitter einschalten und sehen, was ich hier mache. Diese werden als soziale Schriftarten bezeichnet. Sie können sie installieren und sie werden Ihnen einige Formen wie diese geben, und Sie können sie einfach in Ihren Entwürfen verwenden. Sie müssen keine verschiedenen Formen oder Symbole einbinden. Wenn Sie einige SVG oder irgendwelche Symbole verwenden möchten, können Sie sie verwenden, aber ich mache normalerweise so etwas. Es ist sehr praktisch für mich. Lassen Sie es uns nach draußen schieben. Hier ist unsere Büroadresse, lassen Sie uns diese aus, und wir werden sie so ausrichten, oder vielleicht so. Tut mir leid, es sollte so sein. Es gibt ein Problem, das ist diese Box. Stellen Sie sicher, dass es genau dimensioniert ist, sonst werden sie nicht ausgerichtet. Ich habe beide ausgerichtet und wenn Sie die Größe ändern möchten, können Sie die Größe dieser ändern. Unser schickes Büro sieht toll aus. Ich denke, vielleicht können Sie Yorkten Bold Schriftart verwenden, die unsere zweite Schriftart hier drüben ist. Sie können es so ersetzen. Es sieht mehr cool aus, mehr gut wie diese. Sie können auch die Zeilenhöhe erhöhen, wenn Sie möchten, etwa so. Aber ich denke, die Zeilenhöhe war gut. Es sah nicht seltsam aus. Jetzt ist das komplett. Lassen Sie uns unsere Linienhöhen und alles andere anpassen. Mal sehen, wo wir alles ändern können. Lassen Sie uns zuerst die Rastergröße hier ändern, vielleicht so etwas. Wir haben den Platz an der Spitze, der bereit sein wird zu nehmen. Ich glaube, wir haben eins, zwei, drei, vier, fünf, sechs, sieben, acht. Lasst uns hier acht benutzen und wir werden zwei hier drüben benutzen. Wir fügen so etwas hinzu und wir werden es hierher verschieben. Es sieht perfekt aus. Lassen Sie uns es ein bisschen nach oben bewegen und für die Tasten, ich werde sie beide in eine Gruppe Buttons bekommen und ich werde sie ein bisschen nach oben bewegen, vielleicht hier. Sie sind nicht aufgereiht. Lasst uns sie zuerst aufstellen, so etwas wie das. Sie sind sehr perfekt mit diesem Gitter aufgereiht. Lassen Sie uns sie bewegen, diese beiden Elemente ein bisschen mehr nach oben. Lassen Sie uns verkleinern und sehen, wie es ausbalanciert. Ja, ich denke, es sieht gut aus, aber vielleicht sehen sie jetzt perfekt aus. Ich erinnere mich nicht, ob ich etwas verpasst habe, aber ich denke, sie sehen toll aus. Jetzt werden wir unsere Leinwand groß machen. Was wir hier drüben brauchen, ist eins, zwei , drei, vier, fünf, sechs, sieben, acht. Mal sehen, was wir oben hinzufügen. Was ist daran falsch? Jetzt ist das einzige, was übrig ist, dass wir die Unterseite dieses Designs ändern müssen, das ist dieser Bereich. Wir müssen es abschneiden und dafür werde ich wieder einen Block von 48 Pixel hoch verwenden. Ich werde es breit machen, die gleiche Breite, also wird es an der Spitze von diesen sein. Ich werde es unten so ausrichten. Jetzt werde ich sehen, welche Größe hier drüben übrig bleibt, denn es ist ein bisschen schwierig für mich zu berechnen. Jetzt werde ich 163 sehen, also muss ich 163 Pixel von unserer Zeichenfläche entfernen. Gehen wir auf die Zeichenfläche und ich werde 163 von dieser Höhe entfernen. Es wird 3.500 minus 163, 3.337 geteilt durch 8. Mal sehen, es ist 417 mal 8, 3.336, also sollte die Größe 3.336 sein. Dies ist die perfekte Größe. Jetzt werden wir diesen weißen Balken von hier entfernen. Die zweite Sache ist, dass wir unser Gitter und Voila verstecken, unser Design ist perfekt bereit. So werden wir Zeichenflächen verwenden und ein tolles Design schaffen, das vertikal ausgerichtet ist und alles. Es gibt noch wenige Änderungen, die ich hier gemacht habe, wie ich den Knopf in Schwarz geändert habe, und auch dieser Gradientseffekt, Ich änderte es zu diesem, dieser dunklere Farbverlauf, den wir in unserer Übung verwendet haben und auch ich änderte den Winkel. Der Winkel ist jetzt 140 so. Der Winkel ist fast von hier aus. Ich habe ein paar Dinge hier drüben geändert, dann können Sie sehen, dass dieses Design großartig aussieht. Wenn Sie Fragen haben, fragen Sie mich. In der nächsten Serie werden wir Tablet-Ansichten und mobile Ansichten für dieses Design erstellen. Warum habe ich Zeichenflächen verwendet? Wir hätten es ohne Zeichenflächen entworfen, weil das Zeplin-Plugin, es braucht Zeichenflächen. Wir werden diese Zeichenfläche nach Zeplin exportieren , um einige tolle Dinge für unsere Entwickler zu schaffen. Ich bin offen für alle Fragen. Wenn Sie mich brauchen, um Fragen zu beantworten, können Sie mich jederzeit fragen. Fahren wir mit der nächsten Lektion fort. 38. Responsive Web Teil 1: Bevor wir anfangen, für Tablet-Benutzer Smart-Geräte Ansichten zu entwerfen, werden wir einige der Responsive Design-Techniken, die Sie im Auge behalten müssen , während der Gestaltung für mobile Bildschirme oder Tablet-Bildschirme oder responsive Websites. Das erste, was ist, ich werde Ihnen zeigen, ist Inhaltspriorisierung, was bedeutet, dass wir auf kleinen Bildschirmen weniger Platz zur Verfügung haben. Daher müssen wir möglicherweise einige der Inhalte basierend auf seiner Wichtigkeit verstecken oder anzeigen. Es wird auch bedingtes Laden genannt, und Sie müssen es mit den Benutzern oder Ihren Teammitgliedern wie Ihrem CEO oder dem Website-Besitzer entscheiden , dass welcher Inhalt für Ihre Benutzer wichtig ist. Sie müssen dies mit Ihrem Kunden entscheiden, welche Inhalte Sie verbergen werden und welche Inhalte Sie zeigen werden. Lassen Sie mich Ihnen nun das Beispiel der Inhaltspriorisierung zeigen. Hier, wie Sie sehen können, ist dies unsere Desktop-Ansicht. Auf einem mobilen Gerät müssen wir möglicherweise eines davon verstecken. Dies ist ein Absatz, es kann einige Zeit in Anspruch nehmen. Unser Raum und wir werden ihn entfernen, und stattdessen werden wir dies zeigen. Dies ist wichtiger Zeile, die nicht zulassen, dass Ihr Kunde Ihre Website innerhalb der ersten drei Sekunden verlassen. Dies ist wichtiger als das Lesen dieses Absatzes oder das Anzeigen dieses Absatzes auf einem mobilen Bildschirm. Was wir tun, ist, dass wir das verbergen werden, und wir werden das hier rüber bringen. Ich werde über andere Techniken sprechen. Aber im Moment bedeutet das, dass wir einige der Dinge verstecken werden. Möglicherweise müssen wir diese vier Elemente in einer Schaltfläche verstecken, und wir werden diese Schaltflächen zeigen, also zwei Schaltflächen an der Spitze. Hierbei handelt es sich um inhaltliche Priorisierung. Dieser Knopf ist sehr wichtig, also müssen wir ihn hier behalten. Dies sind die Dinge, die wir berücksichtigen werden, wenn wir für responsive Websites entwerfen. Nun, der nächste Schritt ist reaktionsschnelle Bilder. Wir werden verschiedene Bilder für verschiedene Bildschirme liefern. Manchmal wird sogar das ganze Bild mit einem anderen Bild geändert, das ich auf vielen Websites wegen seiner Ladezeit und Geschwindigkeit gesehen habe. Größere Bilder, sie werden viel Zeit in Anspruch nehmen, also was Entwickler tun, ist sie verschiedene Satz von Bildern für verschiedene Bildschirmgrößen erstellen. Lassen Sie mich Ihnen das Beispiel zeigen. Nun, hier können Sie sehen, wir haben dieses sehr große Hintergrundbild dieses Video-Players. Dieser Hintergrund hinter diesem Play-Button, wir werden es auf einem mobilen Bildschirm drücken. Was wir tun werden, ist, wenn seine Größe 800 mal 700 Pixel ist, werden wir drei verschiedene Größen erzeugen. Vielleicht erzeugen wir für einen mobilen Bildschirm eine Größe, die nur 400 Pixel breit ist. Was es tun wird, ist, dass es sehr schnell auf kleineren Bildschirmen geladen wird. Dies ist die wichtigste Technik hinter diesen reaktionsfähigen Bildern oder dem Ändern verschiedener Bilder auf verschiedenen Bildschirmgrößen. Jetzt ist die Technik, die wir die meiste Zeit beim Entwerfen verwenden , die Position des Inhaltsblocks ändern. Was wir tun werden, ist, dass wir unsere Inhaltsblöcke basierend auf der Bildschirmgröße neu positionieren werden. Wenn Sie zum Beispiel einige Blogs gesehen haben, können Sie sehen, dass die Seitenleisten normalerweise den Hauptinhalt nach unten bewegen. Lassen Sie mich Ihnen das Beispiel zeigen. Hier ist eine Vorlage von jemandem, von dem ich denke, es heißt Milana. Nun, was Sie hier sehen können, ist, dass es zwei Spalten hat : Basis-Haupt-Spalten-Layout, das ist dieser ist unser Hauptinhalt. Sie können hier drüben sehen, das sind verschiedene Beiträge. Dies ist im Grunde die Seitenleiste auf der rechten Seite Über mich, Follow Us, Labels, und etc.. Jetzt, wenn es auf einem mobilen Bildschirm gequetscht werden, können Sie sehen, der Hauptinhalt wird an der Spitze sein. Alle anderen Dinge, die ihr hier sehen könnt, Über mich und alles, sie sind unten neu positioniert. Außerdem wenden sie Inhaltspriorisierung da dieser Inhalt nicht viel von einem Wert ist Wir müssen den Benutzer zuerst diesen Inhalt sehen. So werden wir die Blöcke der gesamten Konstruktionselemente ändern. Jetzt können Sie sehen, dass es noch eine Sache gibt, dass sogar sie das gesamte Layout geändert haben. Jetzt haben die Blog-Beiträge ein anderes Layout. Sie befinden sich in einem Kartenlayout wie das. Dies ist, wie Sie für responsive Websites entwerfen werden. Eine weitere Überlegung, die viele Designer nicht verstehen, ist die geringere Verwendung von Bildern. Wenn Sie vorhaben, eine Tonne von Bildern auf jedem Bildschirm Ihrer Website zu laden, und es wird viel Zeit für Ihre Website zu laden, werden Sie wirklich verlangsamen Ihre Website. Auf Smartphones denke ich, dass Benutzer nicht länger als fünf Sekunden warten, um die Website zu laden. Ihre Website sollte sehr schnell geladen werden. Um das zu erreichen, müssen Sie weniger Bilder verwenden. Lassen Sie mich Ihnen nun das Beispiel von weniger Bildern zeigen. Nun, was wir tun werden, ist, dass Sie in diesem ganzen Design sehen können, es gibt nur wenige Bilder, eines ist dieses. Dies sind die wenigen Teammitglieder, vier Bilder und dieser Hintergrund. Es gibt nur fünf Bilder in diesem gesamten Design. Diese vier werden SVG-Symbole sein. Ich werde es am Ende erklären. Diese werden alle durch CSS-Code oder Entwicklercode generiert werden. Dies kann auch ein SVG-Symbol sein, und alles andere ist nur CSS oder vielleicht ist dieses Logo ein Bild. Alles andere ist kein Bild. Ich denke, dass es sehr klein sein wird, weniger Laden auf Ihrer Website und sehr weniger Größe für Bilder. Nun, wenn Sie so etwas auf einem Bild überlagern, wird es wirklich ihre Größe kleiner machen. Wenn Sie ein Bild wie dieses Vollfarbbild verwenden, wird es etwas mehr Größe Raum in Kilobyte haben. 39. Responsive Web Teil 2: Nun, eine weitere Überlegung sind Überschriften und Textgrößen. Die meisten Designer wissen nicht, dass wir unsere Typografie auch reaktionsschnell machen können. Wir werden unsere Überschriften- und Textgrößen für jeden Bildschirm ändern. Nun nehme ich normalerweise drei verschiedene typografische Skalen, und ich benutze sie für jede Gerätegröße. Bei mittleren Geräten oder Tablet-Ansichten werde ich eine andere Überschriftengröße verwenden, die kleiner ist als die Desktop-Größe. Auch für Smartphones werden wir kleine Überschriftengrößen verwenden, denn wenn wir die gleiche Kopfgröße verwenden, wie wir hier in diesem Design haben, können Sie hier sehen, wir helfen, Vertrauen mit Design aufzubauen. Es ist 54 Pixel. Wenn ich versuche, es auf einem sehr kleinen Bildschirm, mobilen Bildschirm zu verwenden, können Sie wie hier sehen, es wird den ganzen Bildschirm nehmen. Ich denke sogar, es wird drei Zeilen dauern, um diese Überschrift mit 54 Pixeln zu zeigen. Was ich tun werde, ist, dass ich eine kleinere Größe verwenden werde, vielleicht 49 Pixel oder vielleicht 38 Pixel oder 36 Pixel, nur um sicherzustellen , dass es lesbar ist und es gut um den kleinen Bildschirm kümmert. Dies sind die Überlegungen, die wir bei der Gestaltung für mobile Geräte oder kleine Geräte berücksichtigen werden. Nun sind die letzten Überlegungen unterschiedliche Stützenraster. Was wir tun werden, ist, wir werden acht Spalten für Tablet-Ansicht und für Smartphones verwenden, ich werde vier Spalten nur zum Zweck der Einfachheit und Ausrichtung verwenden. Nun, eigentlich, was es tut, ist, in der tatsächlichen Codierung, die Anzahl der Spalten ist die gleiche, aber tatsächlich, unser Design wird die ganze Spalte oder vielleicht die Hälfte von ihnen in den meisten Fällen nehmen. Lassen Sie mich Ihnen die Beispiele zeigen. Wenn Sie diese Tablet-Ansicht sehen, können Sie sehen, dass wir eins, zwei, drei, vier, fünf, sechs, sieben, acht Spalten haben. Nun, was wir tun werden ist, Sie können hier sehen, wir verwenden einige Inhalte [unhörbar]. Hier habe ich den Absatz auf meiner Tablet-Ansicht entfernt. Sie können sehen, ich verlasse diese erste Spalte und ich benutze diesen Bereich hier drüben so. Oder vielleicht können Sie sagen, dass ich auch die Mitte dieses Bereichs benutze. Ich habe diese Spalte übersprungen und meinen Inhalt hierher verschoben. Außerdem können Sie sehen, dass ich diese Kontur Priorisierung habe oder wie Sie sehen können, meine Links sind in diesem Bereich versteckt. Dann können Sie sehen, dass ich völlig andere Größe für meinen Videobereich habe. Jetzt können Sie sehen, dass mein Videobereich den ganzen Raum einnimmt. Es verwendet acht Spalten, aber in Bezug auf unsere Codierung oder Entwickler, können Sie sehen, dass es die ganze Breite oder volle 12 Spalten nimmt. Mach dir keine Sorgen darüber. Selbst wenn Sie weniger Spalten verwenden, werden Ihre Entwickler erraten, dass, wie sie dies verschieben werden. Mach dir keine Sorgen darüber. Sie können jetzt sehen, es nimmt sechs Spalten. Dieser Bereich und dieser Bereich werden sechs Säulen nehmen. Nun, die Basis all dieses reaktionsfreudigen Designs sind Hälften, Viertel und Fulls. Sie können hier sehen, dass wir die Hälfte der Spalten verwenden und hier verwenden wir fast volle Spalten. Wir sind im Zentrum, alles auszurichten. Dann verwenden wir in diesem Bereich auch die Hälfte. Sie können sehen, dass dieser Bereich die Hälfte ist, dieser Bereich ist die Hälfte. Wir verwenden halbe Spalten für dieses Layout. In den mobilen Bildschirmen haben wir weniger Platz, also werden wir alles zentrieren. Sie können hier drüben sehen, sie sind oben und unten gestapelt. Dies ist, wie wir für kleine Bildschirm entwerfen werden. Es gibt noch eine Sache, die du hier drüben sehen kannst. Dieses Bild, es ist völlig anders als das Bild, das wir auf dem Desktop haben. Es ist abgeschnitten, es ist ein kleineres Bild, so dass es schneller auf einem mobilen Bildschirm geladen werden kann. Dies ist, was Sie auf Ihrem mobilen Bildschirm oder Responsive Design tun werden. Vergewissern Sie sich, dass Sie Inhalte ausblenden oder die Inhaltsbasis auf verschiedenen Dingen anzeigen. Sie können hier sehen, ich habe den Absatz versteckt und ich habe diese Zeile benutzt, die hier drüben war. Verwenden Sie es hier als Absatz. Lassen Sie Ihren Kunden Ihre Website nicht innerhalb der ersten drei Sekunden verlassen. Auf diese Weise werden wir alles ändern. Jetzt können Sie sehen, dass meine Schaltfläche „Zitat“ verschwunden ist. Es ist nur in diesem hier. Wir haben unseren Zitat-Button hier drüben. Außerdem können Sie die Größe Ihrer Tasten anpassen. Möglicherweise müssen Sie sie drücken, wenn Ihre Tastengröße für kleine Bildschirme zu groß ist , um alles proportional zu halten. Sie können auch sehen, dass diese Schaltfläche und diese Schaltfläche, sie haben unterschiedliche Größen. „ Erhalten Sie ein Angebot“ und „Kostenlose Konsultation Call“ oben aufeinander. Sie sind gestapelt. Außerdem habe ich diese Links verschoben und ich habe alles andere nach unten verschoben. Auszeichnungen und Kunden haben mehr Priorität, also habe ich es hochgezogen. Dies ist die Verschiebung von Inhaltsblöcken oder Neupositionierung des Inhaltsblocks basierend auf der Inhaltspriorisierung. Dies sind einige Konzepte, mit denen Sie sich vertraut machen müssen , bevor Sie für responsive Websites und für mittlere Ansichten oder Tablet-Benutzer und -Geräte kleine Geräte entwerfen. Ich denke, wir sind mit diesem Vortrag fertig. Lasst uns weitermachen. 40. Planungsraster für Tablets /mittlere Ansicht: Ok. Nun, in dieser Lektion werden wir unser Responsive Design beginnen, das für Tablet-Ansichten oder Tablet-Geräte, iPads oder andere Tablets sein wird. Zuvor habe ich einige Änderungen in meinem Desktop-Design vorgenommen. Sie können hier drüben sehen, es gibt nur sehr wenige Änderungen, aber sie sind sehr subtil und sehr einzigartig. Was ich tat, ist, zuerst, ich benutzte diese sechs Spalten für diesen Videobereich und ich fühlte, dass der weiße Raum zwischen diesen beiden Bereichen zu viel war. Also, was ich getan habe, ist, dass ich diesen Bereich, diesen Container, auf die Hälfte dieser Spalte erweitert habe , die siebte Spalte. Jetzt benutzt es eins, zwei, drei, vier, fünf sechs. Sieben Säulen im Grunde. Sie keine Angst, halbe Spalten zu verwenden. Ihr Coder, was er tun wird, ist, dass er diesen ganzen sieben Säulenblock benutzen wird. Aber er wird etwas von der Polsterung oder Marge auf diesem Bereich verwenden. Er wird 39 oder 38 Pixel Ränder oder Polsterung auf der linken Seite hinzufügen. So funktioniert die Programmierung. Sie also keine Angst, dass mein Design diesen Bereich oder dieses Gitter nicht berührt, es passt nicht perfekt. Ob es perfekt passt oder nicht, es liegt an Ihnen. Deine Programmierer werden so entwerfen. Sie werden logisch denken, sie werden hier etwas Polsterung hinzufügen. Dasselbe ist der Zustand hier drüben. Sie können in diesem Bereich sehen, wir haben eine Polsterung oder Rand. Dies sind die Entfernungen, die sie kümmern werden und Tour Grid Layout. Stellen Sie sicher, dass Sie so etwas tun und Sie wissen, was sich hinter dem Code bewegt und wie der Code funktioniert. Wenige weitere Dinge, die ich hier hinzugefügt habe, ist diese Zeile, und dieses Copyright-Symbol, und all dieser Text ist in Kapital. Außerdem habe ich 16 Punkte verwendet. Sie können hier sehen, es ist eine kleine Textgröße, 16 Punkte für diese Awards Kunden in diesem Lehrbuch hier drüben. So ist unsere Dokumentgröße jetzt 4.000 Pixel hoch. Noch eine Änderung. Was ich hier getan habe, ist, dass ich es dir zeige. In diesem Bereich hatten wir viel Platz zwischen diesem Holen Sie sich ein Zitat und diese Links. Also, was ich getan habe, ist, dass ich 32 Pixel entfernt benutze. Also eins, zwei, drei, eins zwei. Also bin ich gerade jetzt 32 Pixel von der Schaltfläche Get a quote entfernt. Dies ist auch ein Vielfaches von acht, also stellen Sie sicher, dass Sie die Entfernungen so verschieben. Dies wird Ihnen wirklich helfen, etwas Harmonie in Ihrem Design zu schaffen. Jetzt werden wir zum Browser springen, um unsere Gitter für unsere Tablet-Ansicht zu berechnen. Jetzt werden wir Gridulator verwenden, um unsere Gitter zu berechnen. Warum verwende ich jetzt 736? Obwohl ich die Dokumentgröße von 768 verwende, weil wir einige Ränder um unser Design verlassen werden, um etwas Atemraum zu bekommen. Wenn Sie 768 abziehen und 32 davon abziehen, werden Sie diesen Wert hier drüben bekommen. Also werden wir 71 und 24 verwenden und uns durch diesen Bereich bewegen. Wir haben schon alles eingestellt. Acht Pixel ist unsere Grundlinie, 71, acht Module, 24 Pixel Gutter, ein Modul Höhe und 736 ist unsere Größe. Wir werden dieses Muster herunterladen und wir werden es in Photoshop installieren. Wir werden es speichern, wir werden es ausschneiden, und wir werden es in unseren Pattern-Ordner von Photoshop einfügen. Voreinstellungen, Muster. Sie müssen es auf Ihrem Mac finden, oder selbst wenn Sie Windows verwenden, müssen Sie diesen Ordner finden. Es ist im Installationsordner oder vielleicht im Bibliotheksordner von MAC, denke ich. Also 736, also nennen wir es 736. Ich werde meinen Photoshop neu laden, um dieses Muster zu erhalten. Jetzt habe ich meinen alten Desktop geöffnet. Sie wissen, was wir tun werden, ist, dass ich diese Zeichenfläche duplizieren werde, weil wir alle Inhalte darauf brauchen. Ich werde mit der rechten Maustaste Duplicate Artboard und ich werde es Tablet nennen und wir werden eine andere duplizieren. Also haben wir noch eine Kopie der gleichen Zeichenfläche. Nun, was wir tun werden, ist, dass wir die Breite ändern, 768, so. Also haben wir die Breite geändert, jetzt werden wir das Gitter und alles andere darauf anwenden. Im Moment werden wir nichts anderes als das Gitter ändern. Also entsperren Sie einfach diese Ebenen. Jetzt im Pattern, was wir tun werden, ist, dass wir dieses Muster 736 „Append“ laden, und es wird in der letzten sein, wie folgt, klicken Sie auf „OK“. Was wir tun werden ist, wir werden es zu dimensionieren, Control T oder Befehl T und wir werden 736 verwenden. Was passiert hier drüben? 736 Pixel. Jetzt werden wir es in der Mitte dieser Leinwand ausrichten, auf diesem ganzen Bereich. Ich werde alles auswählen und es in der Mitte ausrichten, so. Gehen wir zum Verschieben-Werkzeug. Ich weiß nicht, warum es nicht in der Mitte ausrichtet. Ich habe die Kontrollen angerufen. Also haben wir das in der Mitte, aber unser Muster ist ein bisschen aus. Lassen Sie uns hineinzoomen und Sie können sehen, dass dies unser Muster ist, es ist wirklich aus. Also werde ich auf diesen Snap to Origin klicken, und es wird unser Muster zu beheben. Jetzt können Sie sehen, wie ich das ganze Muster angelegt habe. Wir haben etwas Platz rund um das Design. Sie können diese Ränder sehen und wir nutzen diesen Bereich im Inneren, um unser Design zu gestalten. Stellen Sie sicher, dass Sie beim Entwerfen von Tablet- oder Mobilansichten weniger Platz für diese Ränder benötigen. Verwenden Sie hier nicht zu viel von der Breite, da wir bereits sehr wenig Platz haben. In der nächsten Lektion werden wir dieses Design verwenden, dieses Raster, um unser Layout zu entwerfen. Sie können sehen, dass dies auch ein Problem ist hier drüben. Jetzt ist es auch perfekt von oben. In der nächsten Lektion werden wir diesen Entwurf für diesen Kopfbereich ändern und mit der nächsten Lektion fortfahren. 41. Gestalten von Header/Hero für Tablet: Nun, in dieser Lektion werden wir diesen tabellarischen Entwurf studieren und wir werden uns nur auf diesen Bereich konzentrieren. Also diese obere Kopfzeile oder diese Template-Ansicht unserer Header oder Heldenbereich. Also lasst uns anfangen. Zuerst werde ich diesen Desktop-Bereich verstecken, damit ich mich nur darauf konzentrieren kann. Zoomen Sie einfach ein bisschen hinein. Was wir tun werden ist, zuerst werden wir das festhalten. So jetzt können Sie sehen, dass unser Raster nicht gesperrt ist, also stellen Sie sicher, dass es gesperrt ist. Protokollieren Sie diesen Ordner auch. Jetzt werden wir es nach links bewegen, so. Jetzt können Sie sehen, dass der Raum ein bisschen seltsam aussieht, weil wir kleine Ansicht haben, also werden wir es nach oben bewegen. Vielleicht verlassen diese drei Zeilen oder vielleicht, ich denke, diese vier werden mehr als genug sein. Davor hatten wir fünf Zeilen hier drüben. Wir werden die hier rüber bringen, aber ich denke immer noch, dass wir etwas brauchen werden, das ist mehr Zitatknopf hier drüben. Es wird also rechts von diesem Bereich ausgerichtet sein. Ich denke, wir können unsere Links hier drüben anpassen, wenn du willst, kannst du sie so behalten. Aber was ich normalerweise mache, ist, dass ich das hier drüben schiebe und hier drüben werde ich ein Hamburger-Menü erstellen. Also, wenn Sie das Hamburgermenü verstecken können, liegt es an Ihnen. Ich denke, es ist besser, wenn du deine Links überhaupt nicht verbirgst. Also, wenn Sie sie wirklich verstecken wollen und Sie denken, dass, wenn jemand mehr auf die Tablet-Ansicht drückt oder vielleicht etwas ändern, dann kann es einige Probleme geben, können Sie das anpassen. Nun, eine andere Technik ist, dass Sie auch die Größe dieser Bereiche ändern können. Wenn Sie es also auf 16 Punkte oder 16 Pixel ändern möchten, liegt es an Ihnen. Aber ich denke, bis jetzt kannst du diese Größe behalten. Also lassen Sie es uns so bewegen. Also 1-2-1-2-3-4. Also verwende ich jetzt 24 Pixel. Also lassen Sie mich das Gitter hier verstecken und sehen, ob etwas gut aussieht. Also weiß ich nicht, warum es hochgegangen ist. Lass es uns hier runterziehen. Ich denke, es sieht immer noch gut aus, ich weiß nicht, aber irgendwas fühlt sich an. Also, was ich tun werde, ist, dass ich meine Navigation ändern werde. Also werde ich es verstecken. Wir werden diesen Zitatknopf an die Seite der linken Seite verschieben, hier drüben, und wir werden schnell drei Zeilen hinzufügen, um eine Navigation wie diese zu erstellen. Also werde ich die Höhe auf zwei Pixel ändern. Also eine Kontrolle G, zwei Kontrolle G, oder Befehl G drei. Also werde ich es hier rüber bringen. Lassen Sie uns alle auswählen und ihnen einige proportionale Entfernungen geben. Also werde ich jetzt das Gitter verstecken, also sieht es gut aus. Wenn du etwas abgerundet haben willst, so etwas hier drüben. Also lassen Sie mich es so etwas nennen, einen Knopf wie diesen. Es liegt an dir. Also werde ich es ändern, um so etwas, oder vielleicht so. Jetzt werde ich all diese Formen an der Spitze verschieben, und ich kann ihre Farbe ändern. Also muss ich sie manuell ändern, eins nach dem anderen. Lassen Sie uns den Farbverlauf erstellen und sehen, wie er jetzt aussieht. Also habe ich eine sehr harte 72, aber die Höhe sollte 48 sein. So etwas wie das. Vielleicht können Sie die Größe dieser reduzieren. Es wird 36 sein, so etwas. Also lassen Sie uns unsere Angebotsschaltfläche verstecken und sehen, wie es aussieht. Es sieht fast perfekt aus. Nun, wenn Sie den Stil Ihrer Code-Schaltfläche ändern möchten, können Sie das auch tun. Stellen Sie sicher, dass Ihre Tastengrößen identisch sind. Also lassen Sie uns die Größe dieses im Verhältnis bewegen, etwas Ähnliches wie dieses. Es sieht wirklich breit aus. Dieser sieht besser aus, und erhalten Sie Ihren Code, Sie können ihn ganz entfernen. Also jetzt in diesem Design werde ich es ganz entfernen, weil wir das bereits haben, beginnen Sie jetzt hier drüben. Also, was ich tun werde, ist, dass ich hier einen Schlagschatten brauche, um ihn hervorzuheben. Also lassen Sie uns hier etwas Schlagschatten hinzufügen, und ich werde acht Pixel verwenden, da Größenabstand vier Pixel betragen wird, und die Richtung wird 90 Grad betragen. Also ein sehr subtiler Schatten um mein Objekt. Also lasst uns es ein bisschen mehr erweitern, vielleicht 10 Pixel wie diese. So sieht es gut aus. Also haben wir hier unser Navigationssymbol eingerichtet, und auch ein Logo Overhead. Jetzt werden wir uns auf diesen Bereich konzentrieren. Es gibt jetzt noch eine Technik, wir müssen uns nicht auf diese konzentrieren, also werde ich alle anderen Abschnitte verstecken weil sie mir sonst in die Quere kommen. Jedes Mal, wenn ich etwas ziehe oder ändere. Jetzt bewegen wir uns. Also noch eine Sache, die wir brauchen, um diese Führer zu klären. So klare Führungen, und wir werden einige Führer erstellen, wieder, dafür werden wir diesen Bereich auswählen. Ich gehe zum Führer. Ich weiß, die Spaltengröße war 70. Wir hatten acht Säulen. [ unhörbar] war 24, und wir können die Führer hinzufügen, die so sind. Also haben wir unsere Führer eingerichtet. Das wird uns wirklich helfen. Diese Plug-in-Anleitung hat meinen Tag wirklich viele Male gerettet. Also, was wir jetzt tun werden, ist, wir werden es ein bisschen nach oben bewegen. Auch dieser hier. So sind Sie frei, alle Feinde, die Sie mögen, auszurichten. Ich richte gerade hier drüben aus, also was ich tun werde, ist, dass ich meinen Videospielbereich jetzt auf der linken Seite verschieben werde, und wir werden die ganze Breite verwenden. So etwas wie das. Also werden wir es hier drüben platzieren. Ich werde dieses Rechteck bekommen, das im Grunde der Container ist, und ich werde es mit diesem ganzen Bereich skalieren. Sie können es auch auf diese Weise ändern, wie folgt. Ich denke, das ist mehr als genug, die Größe ist mehr als genug. Sie können es auch ein bisschen mehr drücken, so dass es im Einklang mit Ihrem Führer ist. Jetzt werden wir diese Modalität neu dimensionieren, sieht wirklich groß,128 [unhörbar] aus. So sieht das in der Mitte gut aus. Wir können diesen Bereich auch ausblenden, wenn Sie möchten. Aber im Moment, in dieser Design-Iteration, werde ich es behalten. So können Sie diese Dinge auch nachträglich entscheiden. Also, weil unsere Tablet-Ansicht, ich denke, wir werden einige Dinge sehen hier drüben. Also lassen Sie uns diesen Knopf ein bisschen nach oben bewegen, so in diesem Bereich, so etwas wie diesem. Wir werden unsere Videoidee etwas nach unten verschieben, ein bisschen mehr nach unten, etwas Leerraum bekommen. So haben wir unseren Abschnitt fast abgeschlossen. Aber wir müssen einen horizontalen Abstand haben oder so etwas. Also werden wir [unhörbar] verwenden. Lassen Sie uns zuerst dieses ausrichten. Wir werden sie in den Hamburger für die Gruppe bringen. Im Moment werde ich es ausrichten, indem ich einen Führer hier drüben platzieren. Richten Sie also dieses Hamburger-Menü mit meinem Logo aus , wo ist mein Logo. Also hier ist mein Logo. Ich werde beide auswählen, und ich werde sie so ausrichten. Jetzt werde ich es nach oben bewegen. So etwas wie das. Das ist besser jetzt, wenn wir diesen oberen Bereich ausgerichtet haben, jetzt sind wir bis zu diesem Punkt. So wie das. Ich denke, es ist schon drin. Jetzt werden wir es hier rüber bringen. Das ist gut. Nun, dieser Knopf. Ich denke, wir können es auf einen Schritt nach oben verschieben. Jetzt sieht das gut aus. Lassen Sie uns unsere Gitter verstecken und sehen, wie es aussieht. Sieht es toll aus? Ja. Es sieht toll aus. weiße Raum ist fast perfekt. So ist unser oberer Abschnitt, unser Header Abschnitt ist komplett. Gehen wir zum nächsten Abschnitt über, in dem wir andere Abschnitte ändern werden. Gehen wir also zur nächsten Lektion über. 42. Schritte entwerfen (So funktioniert es ist) für das Tablet: Jetzt werden wir uns auf den nächsten Bereich konzentrieren, der unser Schrittbereich war. Es gibt eine Technik. Nun, was ich tun werde, ist, dass ich nur diesen Abschnitt 1 zeigen werde und ich werde nicht alle anderen aktivieren. Was ich tun werde, ist, dass ich es runterschieben werde, weil wir hier drüben mehr Platz hatten. Der Raum wird geändert. Jetzt gab es hier einige Überlappungen. Im Moment in diesem Abschnitt denke ich, dass ich vielleicht meinen Hintergrund etwas nach oben verschieben muss, wenn Sie sehr genau nach diesem suchen müssen. Sie können hier auf der linken Seite sehen, dieser Hintergrund ist bis zu hier drüben. Es überlappt sich mit diesem Abschnitt. Jetzt werden wir verkleinern und wir werden das Gitter ausschalten, aktivieren Sie diese Gitterführungen, Steuersäule. Jetzt werden wir alles in der Mitte ausrichten. Diese werden vier und vier Spalten dauern. Lassen Sie uns anfangen und beginnen, diese Dinge zu bewegen. Strg+A und Alt Control+H. Jetzt können Sie sehen, dass wir einige Probleme haben. Ich werde es dir in ein paar Sekunden zeigen. Jetzt können Sie sehen, dass wir einige Probleme haben. Was wir tun werden, ist, dass wir mit der rechten Maustaste klicken und in Absatztext konvertieren. Wir haben keinen Absatz, jetzt werden wir es so dimensionieren. Ich verlasse diese linke Spalte und auch diese Spalte. Ich lege alles in diese eine, zwei, drei, vier, fünf, sechs Mittelsäulen. Sie können hier drüben sehen, wie ich alles platziert habe. Jetzt für die zweite Zeile, ich werde es auch in Absatz konvertieren und ich werde es so ändern. Das ist fast abgeschlossen. Lassen Sie uns diesen Review-Abschnitt ausblenden, weil wir ihn jetzt nicht brauchen und was wir tun werden, ist, dass wir zu diesen Schritten gehen. Zuerst werden wir sie ein bisschen so hierher bringen. Jetzt für die Schritte eins und zwei, und wir haben drei und vier. Drei und vier, wir werden sie so unten bewegen. Sie können sehen, wie ich alles platziere und Sie können sehen, dass sie sich oben bewegt haben, also werde ich sie zurück in die Stufen verschieben. Ich denke, es ist ein Fehler mit Photoshop. Immer wenn ich versuche, sie zu bewegen, und sie bewegen sich unabhängig von ihren Gruppen. Jetzt werde ich sie ausrichten. Schritt 2 und 4, wir müssen sie hier in diesem Bereich bewegen. Es ist fast die Mitte dieser vier Säulen. Was ich versuche zu tun, ist, dass ich sie fast in der Mitte dieser vier Spalten ausrichte, auch für diese beiden Schritte. Ich habe sie beinahe mittendrin ausgerichtet. Lassen Sie uns dies erstellen und sie in der Mitte ausrichten. Jetzt sind sie die perfekte Mitte und auch diese beiden, Ich werde die Auswahl mit diesen Guides verwenden. Diese Guides helfen Ihnen wirklich, sie sofort auszurichten und diese Linie ist mir aus dem Weg, also werde ich es nach unten bewegen. Auch wir werden diesen Bereich erweitern. Reduzieren wir es hier und wir werden es ein bisschen nach unten verschieben , weil unsere Kundenrezensionen hier drüben sein werden. Lass uns so etwas haben. Sie können sehen, wie cool es jetzt aussieht, auch ich habe gerade angefangen, meine Inhaltsblöcke neu anzuordnen. Ich nenne sie Inhaltsblöcke, weil wir einige Bits aus atomarem Design studiert haben. Jetzt für den Überprüfungsabschnitt. Also unsere Rezension Abschnitt, ich werde es in der Mitte so bewegen und dies ist eine Rezension , die außerhalb dieses Bereichs war, wo ich es auf der linken und dann unten so bewegen werde . Lassen Sie uns verkleinern, um einige Abstandsprobleme zu sehen. Das sieht gut aus. Lassen Sie uns beide ein bisschen nach unten bewegen. Auch diesen Hintergrund müssen wir erweitern. Es ist wirklich klug, Ihr Design von Zeit zu Zeit von ein bisschen weit weg zu sehen. Verkleinern und vergrößern Sie, um zu sehen, wann Sie etwas perfekt ausrichten müssen, Sie vergrößern Wenn Sie das gesamte Design sehen möchten, wie verschiedene Komponenten zusammenkommen, müssen Sie die Ansicht verkleinern. Dies sind die wichtigsten Dinge, die Sie beachten müssen , wenn Sie für so etwas entwerfen. Jetzt werde ich meine Gitter einschalten und Sie können sehen, dass sie fast in der Mitte sind. Lassen Sie uns dieses in der Mitte und auch diese Bewertungen ausrichten. Lassen Sie uns diesen Abschnitt auswählen und ich werde die Mitte ausrichten, so etwas. Ich bin mir nicht sicher, warum das nicht in der Mitte ausgerichtet ist. Es ist in der Mitte, aber irgendwie aufgrund dieser Gegend, denke ich, es sieht nicht so aus, als wäre es in der Mitte. Vielleicht liegt es daran, dass die Ausrichtung dieser beiden Absätze nicht korrekt war. Ich werde eine weitere Zeile hier drüben platzieren und führen. Control+Z. Wir haben diesen Bereich fast abgeschlossen. Lassen Sie uns sie vertikal ausrichten. Ich werde mein Gitter einschalten und mal sehen, was wir hier haben. Diese Gegend ist fast perfekt. Lass es uns ein bisschen nach oben bewegen. Es sieht toll aus. Ich denke, sie sehen perfekt aus. Sie sind fast in der perfekten Ausrichtung. Natürlich ist das auch fast perfekt. So etwas wie das. Was ich versuche zu tun, ist, dass ich diesen ganzen Bereich von drei Blöcken benutze , um ihn in der Mitte auszurichten. Für diese beiden sind sie fast ausgerichtet. Ich denke, wir müssen nichts ändern. Vielleicht so. Auch so. Mal sehen, welchen Raum wir zwischen diesen beiden haben. Wir haben 118 auf dieser Seite und auf dieser Seite. Mal sehen, ob es mir den Raum von hier bis hierher zeigen kann. Ich werde auswählen, eine Zeile hier drüben platzieren. Dies ist die beste Methode, denke ich für mich. Mal sehen, was der Raum hier drüben ist. Es ist 38, was sehr seltsam ist. Eins, zwei, drei, vier, fünf, es sollte 40 sein. Mal sehen, wie viele Räume wir hier haben, eins, zwei, drei, vier, also haben wir hier einen Raum weniger. Das ist es, was passiert. Lass es uns ein bisschen nach unten bewegen und dann werden wir das hier runterschieben, so wie hier. Jetzt ist es perfekt. Sie haben fast den gleichen Raum mit diesen Elementen. Wir haben fünf Räume hier drüben. Es [unhörbar] 40 Pixel entfernt und 40 Pixel von hier entfernt. Das ist gut und wo ist unser Hintergrund oder Abschnitt 1? Das ist unser BG. Sehen Sie, wo es ist. Wir haben eins, zwei, drei, vier, fünf, sechs, sieben. Vielleicht können wir so viel gebrauchen und mal sehen, was wir oben haben. Eins, zwei, drei, vier, fünf, sechs und sieben. Wir haben sieben Räume und ich denke, wir haben auch sieben Räume hier drüben. Also werde ich es so dimensionieren, eins, zwei, drei, vier, fünf, sechs, sieben, acht. Gehen wir einen Schritt zurück, eins, zwei, drei, vier, fünf, sechs, sieben. Wir haben perfekten Raum um ihn herum und es ist fast 7 mal 8 Pixel. Ich glaube, es sind 56 oder 42. Es sind 56 Pixel oben und unten für jeden Abschnitt, den wir erstellen werden. Stellen Sie also sicher, dass dieser Raum in allen Abschnitten ähnlich sein wird. Wir haben diesen Abschnitt abgeschlossen. Fahren wir mit der nächsten Lektion fort. 43. Team für Tablets entwerfen: Jetzt in dieser Lektion werden wir für den Abschnitt 2 entwerfen, der unser nächster Abschnitt ist. Ich denke, es ist unser Team, und wir werden das in dieser Tablet-Ansicht entwerfen, und ich werde einige der Teile überspringen, weil sie meistens Ausrichtung bis jetzt haben Sie vielleicht die meiste meiner Technik gesehen , so dass ich Inhalt und wie ich alles horizontal und vertikal platziere und verschiebe. Lassen Sie uns diesen Abschnitt beginnen und ich werde zuerst auswählen, und ich werde zu Eigenschaften gehen, und wir brauchen etwas mehr Höhe in dieser Zeichenfläche, also vielleicht werde ich 4.400 hier hinzufügen, so. Wenn Sie die Größe Ihres Rasters ändern möchten, können Sie dieses entsperren und Sie können es jedes Mal ändern, wenn Sie es benötigen, um die Größe , etwa so. Auch hier vergessen Sie nicht, sie fallen zu lassen, und ich werde zum Abschnitt zu bewegen, zoomen Sie heraus, aktivieren Sie Ihren Abschnitt 2, jetzt, ich denke, es ist hinter diesem oberen Bereich versteckt, so dass wir gehen, um es nach unten bewegen, Shift Pfeil, um sie nach unten zu bewegen wie das. Jetzt sehen wir, ob ich sie ausrichten oder sie mit diesem Bereich zusammenführen werde. Was ich tun werde, ist, ich werde das auswählen und eine Linie hierher ziehen , die gut aussieht. Nun, mein Abschnitt, lasst uns hineinzoomen, er ist perfekt ausgerichtet. Ich werde das gleiche tun hier drüben, ich werde diese in der Mitte ausrichten, und dann werde ich jedes Teammitglied verwenden, um diese vier Spalten zu verwenden. Ich werde in diesem Abschnitt sehr schnell gehen, keine Sorge, dass alles so schnell geschieht, lasst uns anfangen. Es gibt eine Sache, die ich hier ändern werde, nämlich ich werde sie all diese Bilder in ihre eigenen Blöcke schneiden. Ich werde sie von hier entfernen, so, und was ich tun werde, ist, dass ich hier drüben einen benutzerdefinierten Größenblock verwenden werde , so etwas. Die Höhe wird 428 sein, so etwas. Dies ist unsere erste, also werde ich es in diesem Clip schneiden, ich werde diese Farbe dieses Clipping-Bereichs in den gleichen Hintergrund ändern, und ich werde diesen umbenennen. Ich werde alle diese Ebenen durch Drücken der Umschalttaste auswählen, und ich gehe zu Steuerung G oder Befehl G, um sie zu gruppieren. Wenn ich versuche, dies zu verbergen, können Sie sehen, dass dies ein vollständiger Block ist. Jetzt werde ich sie in diesem Bereich platzieren, so etwas, oder vielleicht für Spalten, die ich hier irgendwo benutzen werde, und dasselbe werde ich für diesen hier tun. Ich werde alles schnell überspringen, ich werde wiederdie gleiche Höhe Box verwenden, die gleiche Höhe Box verwenden, die dieses Rechteck sein wird, das 436 ist, Größe 36 Höhe, und ich werde alles in ihnen stecken, alle in ihnen, und wir werden sie so gruppieren. Es passiert etwas Seltsames, dass, wenn ich versuche, einige Gruppen zu bewegen, sie aus ihren Gruppen herauskommen und sie an die Spitze dieser Zeichenfläche gezogen sind. Dies ist ein Fehler in Photoshop, mach dir keine Sorgen, wenn ich etwas gruppiere und etwas bewegt sich herum. Das wurde außerhalb meiner Gegend verlegt, also werde ich es hier rüber ziehen, was vermasselt ist, schätze ich. Dies ist im Grunde das Tag für diese Person, das war ein UX-Designer. Ich werde es hier rüber bewegen, so etwas. Jetzt haben wir alles darin platziert, ich werde immer noch tun und diese beiden innen abschneiden, auch wir werden die Hintergrundgröße erweitern, die hier drüben sein wird. Wir müssen auch die Größe unserer Tablette Zeichenfläche ändern und ich werde 600 hier drüben eingeben, um sicherzustellen, dass alles gut passt. Nun, wenn Sie keine Ebene finden können oder es außerhalb Ihrer Ebenengrenzen oder Ebene als Canvas ist , können Sie jetzt Steuerelement klicken Sie darauf und Sie können sehen, dass es ausgewählt ist, es hervorgehoben, und hier habe ich festgestellt, dass dies bewegte sich woanders, also werde ich es in diesen sozialen Medien verschieben, ich denke, ich hatte soziale Medien. Das wird in den sozialen Medien sein, und ich werde es nach links und unten bewegen. Mal sehen, wo es gerade ist, es wurde hierher bewegt. Ich wähle es zuerst aus, schiebe es hierher, dann schiebe ich es in meiner Social-Media-Gruppe nach unten. Das ist Sonia Bismal, und dasselbe, was ich für ihn tun werde. Mal sehen, wo der andere Name ist, lassen Sie uns eine andere Ebene erstellen und sie so ersetzen, nur um die Dinge zu beschleunigen. Jetzt haben wir vier verschiedene Gruppen, und ich werde sie entsprechend ausrichten. Lassen Sie uns unsere Show erstellen, unsere Führer, und das ist unser Designer, lassen Sie es in diesem, das ist Marketing. Dann haben wir UX Designer, es wird in der Mitte dieses Bereichs sein. Dies ist fast abgeschlossen, lassen Sie uns unsere Gitter zeigen und sie besser am Gitter ausrichten. Jetzt können Sie sehen, dass ich es irgendwo hierher schieben werde oder vielleicht ein bisschen nach unten, weil ich etwas Abstand brauche. Hier habe ich es so eingerichtet, und auch wenn Sie es nach Ihrem Canvas vergrößern können, könnte es besser sein. Nichts ist außerhalb Ihrer Canvas, es ist besser so. Diese lassen uns sie ausrichten, Marketing, lasst uns zuerst zur Gruppe gehen. Wenn ich etwas auswähle, wird es mir die Gruppe geben. Das funktioniert nicht, also gehe ich zurück zu Layers, Marketing, ich werde es ein bisschen nach unten bewegen, gleich diesem Mädchen hier drüben, General Designer. Das ist gut, sie sind fast beide ausgerichtet, sie werden hier drüben sein. Wir sind alle für diesen Teambereich eingerichtet, lassen Sie uns diese Gitter verstecken und sehen, wie unser Design aussieht. Es sieht wirklich cool aus. Dieser Bereich ist fertig, lassen Sie uns zum Fußzeilenbereich gehen , der unser letzter Teil für diese Tablet-Ansicht sein wird. Fahren wir mit der nächsten Lektion fort. 44. Fessel für die tablet entwerfen: Ok. Nun, in dieser Lektion werden wir den letzten Teil entwerfen, unsere Fußzeile für die Tablet-Ansicht oder mittlere Ansicht ist. Also werde ich es nach oben ziehen und vergrößern. Ich habe meine Gitter und Guides eingeschaltet, wie Sie hier sehen können. Okay, jetzt, die letzte unsere Fußzeile. Also werde ich es aktivieren. Im Moment ist es hinter diesen Abschnitten versteckt. Also werde ich es nach unten bewegen, weil es vorher oben war und so werde ich es so nach unten bewegen. Ok. Es wird also viel Platz in Anspruch nehmen. Also werde ich so etwas tun. Also jetzt werden wir dieses Bild erweitern. Vielleicht konzentrieren wir uns auf woanders. Vielleicht nur dieser Sitz. Ok. So etwas wie das. Auch in diesem Bereich werden wir es über dieses Bild bewegen, so etwas wie dieses. Okay, jetzt sind diese Hintergründe fertig. Jetzt werden wir diese verschieben. Diese Überschriften und was wir an der Spitze verwenden, verwenden wir so etwas. Also verwenden wir dafür eine linksgerichtete Ausrichtung. Ich weiß nicht, warum das etwas kleiner für mich ist, vielleicht bin ich verkleinert. Das ist also unser Absatz. Sie können es auch auf der linken Seite verschieben. Es gibt andere Optionen, wie wir es hier zusammen entfernen können, so etwas. Oder du kannst es hier drüben aktivieren und so behalten. Vielleicht können wir diesen ganzen Raum hier nutzen, trotzdem kommt er nicht aus dieser Position heraus. Also jetzt müssen wir auch diese Tasten ein wenig nach oben bewegen. Sie können sehen, dass wir sie nicht nach oben und unten stapeln müssen weil sie hier einen guten Abstand haben. Wir haben hier einen guten Platz. Also müssen wir sie nicht so aufräumen. Ok, irgendwas. Also denke ich, wir sollten sie so behalten, wie sie vorher waren und den Abstand zwischen ihnen nicht ändern. Dann über diesen Bereich, dieses schicke Büro. Also schickes Büro der Künste, Klienten, all das, wir werden sie ein bisschen nach oben bringen. Sie können sehen, wie es sich bewegt hat. Also lasst uns sie so bewegen. Dafür werde ich sie zuerst nach innen bewegen, dann werden wir sie zurückbringen. Etwas Ähnliches. Okay, jetzt können Sie sehen, dass sie alle nach oben verschoben sind, also werde ich sie in Footer Bottom gruppieren. Ich werde es bewegen, so etwas. Also müssen wir es hier rüber bringen. Also, was ist dieses Rechteck? Dies ist im Grunde Overlay. Benennen Sie Ihre Ebenen immer richtig, überlagern Sie lila. Also, das ist zu kontrollieren. Sie können die Überlagerung auch zu diesem, diesem, diesem oder diesem oder sogar lila ändern. Also lassen Sie uns jetzt unser Gitter verwenden, um sie richtig auszurichten. Also muss ich die Rastergröße ändern. Okay, meine Rastergröße ist perfekt. Jetzt sperren wir es und ich werde es so ändern. Also für diesen Bereich werden wir in Ordnung verwenden. Das ist also etwas in Ordnung. Also werde ich sie eins, zwei, drei, vier, fünf, sechs und sieben bewegen . Also sieben Räume von diesem Bereich und lassen Sie es uns sperren. Ich werde diesen auswählen. Lassen Sie es uns so hierher bringen. Auch dieser, ich; m werde es ein bisschen nach oben bewegen. Als ich versuchte, es zu erweitern, passiert etwas wirklich Seltsames, dass es das Muster ändert. Also denke ich, was wir tun müssen, ist, dass wir es ein bisschen von oben so verschieben müssen. Oder vielleicht müssen wir diesen Snap auf Origin einstellen. Das ist das Problem, das wir hatten, als wir die Größe unseres Rasters änderten. Nachdem Sie die Größe geändert haben, müssen Sie die Muster am Ursprung fangen. Also stellen Sie sicher, dass Sie es anders tun, es wird einige Probleme für Sie zu schaffen. Okay, also hier ist mein. So ist das Top perfekt. Lassen Sie uns sie ausrichten. Sie sind fast perfekt ausgerichtet. All diese Schriftzug und Typografie. Jetzt denke ich, dass wir sie ein bisschen nach oben bewegen müssen. Sie sind wirklich weit weg. Irgendwo hier drüben. Ich denke, sie sehen gut aus, der Abstand ist gut. Lassen Sie uns diesen Bereich bewegen. Auch Fußzeile unten ein bisschen nach oben. Ich denke, vielleicht hier drüben. Jetzt sieht der Abstand gut aus. Wir müssen nichts anderes ändern. Also, was wir jetzt tun werden, ist, wir die Größe unseres Kunsttafels ändern werden, eins, zwei, drei, vier und fünf oder vielleicht vier. Also lasst uns hier einen Gitterführer platzieren. Okay, also vielleicht hier drüben, so. So ist es fast bei 4.888. Vier acht acht acht acht teilen sich durch acht. Wählen Sie also dieses Kunstboard aus, gehen Sie zu „Eigenschaften“. Ich werde 4, 8, 8, 8 so etwas verwenden . Jetzt haben wir diesen Entwurf fast fertiggestellt. Ich finde, alles sieht perfekt aus. Lassen Sie uns unsere Hilfslinien und Raster verkleinern und ausblenden. Mal sehen, wie es aussehen wird. So sieht es perfekt aus. Sehr schön, gut, haben gute Margen hier drüben. Vielleicht können Sie hier die Margen um 24 erhöhen, schätze ich. Wenn Sie also eine größere Größe innerhalb von 24 haben, denke ich, wenn Sie Ihre Margen auf 24 erhöhen, dann denke ich, es wird besser sein. Also, ich denke, das nächste Mal, wenn Sie Ihr Design erstellen, werden Sie 768 minus 24 minus 24. Also 720. Verwenden Sie also die Breite von 720, erstellen Sie ein Raster von 720 lassen Sie hier 24 und 24 Ränder. Also verwende ich 16 Pixel, aber für mich denke ich, dass es etwas näher an die Grenzen auf beiden Seiten schaut. Aber ich denke, du schaffst es. So haben wir unser Tablet-Design und den letzten Teil vervollständigt. Wenn Sie Fragen haben, fragen Sie mich. Im nächsten Abschnitt werden wir für die mobile Ansicht entwerfen. Dazu müssen Sie den nächsten Abschnitt sehen. Gehen wir also zum nächsten Abschnitt über. 45. Die Einrichtung von Kunstkarten für die mobile Ansicht: Jetzt werden wir unsere Mobile View unseres Designs starten. Wir haben bereits die Desktop- und Tablet-Ansichten erstellt, aber bevor wir eine andere Zeichenfläche erstellen, werden wir unsere Gitter und Hilfslinien einrichten. Um dies zu tun, werden wir zu unserem Google Chrome wechseln und wir werden einige Online-Tools verwenden. Also mal sehen, was das sind. Okay, also wie immer, werden wir diesen modulargrid.org, Gridulator verwenden , und dieses Mal werde ich Ihnen auch zeigen, wie Sie es mit diesem Grid.Guide machen können. Ok. Nun, die Breite, die ich verwenden werde, ist 400. So 400 Pixel, Ich liebe es, dafür zu entwerfen. Wenn Sie wirklich die letzte Bildschirmgröße gehen möchten, sollten Sie für diese, 320, und wir werden Spalten, Anzahl der Spalten, 4 verwenden. Also werde ich 400 verwenden, nicht 4.000, 400, und Ihr Rinnenverhältnis sollte 1 sein. Das ist also ein Werkzeug. Das ist ein weiteres Werkzeug. Nun, was ich suchen werde, ist, dass ich nach meinem 8-Pixel-Gitter suchen werde. Das ist also Rinnenbreite 8. Wir können das hier benutzen, oder vielleicht können wir das hier benutzen. Also werde ich dieses verwenden, Spaltenbreite 80 und Rinnenbreite wird 16 sein. Außerdem können Sie auf der rechten und linken Seite sehen gibt es einen Rand, der auch gleich 16 ist. Wenn Sie nun Ihr Raster mit Gridulator erstellen, müssen Sie Ränder davon subtrahieren. Also 368 und Sie können hier drüben sehen, hier, wir haben die Berechnung 80 und 16. Nun, wenn wir zu diesem modularen Gitter gehen, weil wir auch diese Linien verwenden werden, also werden wir Baseline verwenden, die immer unsere 8 Pixel sind, was diese 8 Pixel Höhe dieses kleinen Raumes hier drüben ist, und dann haben wir Modulgröße 80, Anzahl der Module 4. Wir haben vier Säulen. Rinnengröße wird 16 sein, Modulhöhe 1, und unsere Layout-Größe ist 368. Also im Grunde verlassen wir 16 und 16, 32 Pixel für die Ränder. Also werden wir dieses Photoshop-Muster herunterladen und es in Adobe Photoshop Installation, Presets und Pattern-Ordner installieren . Also habe ich es 400 16margin 16rinne genannt. Also werde ich es in Photoshop laden und wir werden danach unsere Zeichenfläche einrichten. Also lasst uns anfangen. Nun, lassen Sie uns unsere Tablet-Zeichenfläche duplizieren. Ich werde mit der rechten Maustaste auf meine „Tablet“ und „Duplicate Artboard“ klicken, und ich werde es mobil nennen. Also habe ich meine andere Zeichenfläche, jetzt werden wir es dimensionieren und wir werden 400 Pixel Breite und für die Höhe, ich denke, wir werden mehr als 6400 brauchen , weil es übereinander stapeln wird. Wir brauchen also viel Platz, um diesen Inhalt anzupassen. Lasst uns jetzt unser Raster einrichten. Also werden wir zu diesem Rasterbereich gehen und wir werden dies entsperren, und wir werden zu „Patterns“ gehen, und laden wir unser Muster, das 400 angehängt ist. Es wird am Ende sein. Wenn Sie den Mauszeiger für einige Zeit darüber bewegen, werden Sie den Namen sehen. Sie können 96 mal 16 Pixel sehen, also ist dies unser Raster. Also werden wir es wieder auf die Breite von 368 ändern. Also werde ich es in der Mitte ausrichten. Es ist nicht gut, also werden wir uns an den Ursprung schnappen und es wird alles ändern. So werden wir unser Raster einrichten, und in der nächsten Lektion werden wir unser Design für diese mobile Ansicht ändern. Gehen wir also zur nächsten Lektion über. 46. Kopfzeile für kleine Geräte entwerfen: Bevor wir in unser mobiles View-Design springen, werden wir einige der typografischen Skalenkonzentration sehen. Ich werde die typografische Skala ändern, weil wir hier weniger Platz haben, also werden wir weniger große Überschriften verwenden und wir müssen möglicherweise die Größe unserer Texte oder vielleicht Unterüberschriften ändern. Lassen Sie mich Ihnen meine typografische Skala zeigen. Nun, die Skala, die ich gewählt habe, ist 16, 20, 24 , 28, 32, 36, 49 und 54. Diese drei sind für Rubriken, größere Rubriken, und diese zwei oder drei können für Unterrubriken verwendet werden. Dies ist für Text und das ist für kleinen Text. Bei kleinen Geräten gehe ich zur Überschrift für 36, Unterüberschrift für 24 und Text 20 und kleinen Text 16. Mal sehen, wie es aussehen wird. Beginnen wir mit der Gestaltung unserer Header-Teil. Nun, hier in der Kopfzeile, wie Sie oben sehen können, haben wir zu viel Platz. Wir haben 16 hier drüben, also werden wir nur zwei verlassen, denn auf mobilen Geräten werden Sie wirklich Platz sparen. Töten Sie nicht die Ränder, machen Sie es nicht zu verpackt. Lasst uns zuerst dieses Gitter reparieren. Wir werden dieses Mal weniger gebrauchen. Vielleicht zwei, wir können es am Ende ändern, also mach dir keine Sorgen. Nun, über die Navigation, schauen wir mal, wo unser Hamburger ist. Ich werde wechseln und meinen Hamburger wieder in die Ansicht bringen, weil er zu weit weg war. Wir werden es hier drüben platzieren, am Rande der Sache. Wir haben das hier platziert, jetzt, lassen Sie uns unsere Überschrift hier drüben platzieren. Lassen Sie es uns mit diesem Bereich hier ausrichten, so. Versuchen wir 49. Neunundvierzig ist ein bisschen groß, versuchen wir 36. Sechsunddreißig sieht gut aus. Jetzt werden wir unseren Absatz von hier aus vergrößern und ihn so von hier ziehen. Jetzt müssen Sie auch Ihre Zeilenhöhen ändern. Wo ist mein Text weg? Lasst uns zurückkehren. Ich werde verkleinern, um diese Dinger zu testen. Manchmal ist es besser, dass Sie aus Ihrem Design verkleinern. Manchmal ist es besser, sie so zu kontrollieren. Nun, ich werde den Text auswählen und mal sehen, was wir hier verwenden können, vielleicht 36. Für Überschriften verwenden wir die gleiche Zeilenhöhe, da wir in der Typografie für Ihr Design untersucht haben, dass dies wirklich helfen wird. Sie können entweder linksbündig ausrichten oder mittlere Ausrichtung verwenden. Ich mag es so, weil es harmonischer ist und auch wenn Ihr Design mehr zusammenzieht. Wenn wir weniger Platz haben, wird es immer noch gut aussehen. Wir haben es hier drüben ausgerichtet. Nun, vielleicht müssen wir auf den mobilen Geräten diesen Absatz ändern oder überspringen. Wir werden dies überspringen und wir werden einige weitere Dinge wie die Schaltfläche Erste Schritte aktualisieren. Wir werden es nach oben bewegen und es sieht im Moment sehr groß aus. Wir werden uns danach darauf einstellen. Bewegen Sie einfach die Dinge herum. Wo ist unser Videobereich? Nun, dieses Mal werde ich diesen Text verschieben, der über dem Videobereich ist. Ich werde es hier raufschieben. Ich werde es direkt unter meine Hauptüberschrift verschieben. Sie können es nicht sehen, weil es in weißer Farbe ist, also werde ich seine Farbe in dieses Grau ändern. Es ist jetzt in 24 Punkten. Wenn Sie weniger Punkte verwenden wollen, können wir vielleicht 20 hier drüben versuchen, weil es vor diesem sehr groß aussieht. Außerdem werde ich Nunito Sans Regular benutzen, hier ist es. Diesmal damit. Dies ist im Grunde unser Absatzstil. Lassen Sie uns Absatzformat darauf anwenden. Wo ist unser grundlegender grauer Absatzstil? Ich werde überschreiben, und das ist unser Absatzstil. Was ich getan habe, ist, dass ich sein Design und seine Schrift völlig verändert habe. Wir werden sie danach ausrichten, also mach dir keine Sorgen. Nun, was den Videobereich betrifft, ist das sehr groß für mich, also werde ich es quetschen. Lassen Sie uns das außerhalb des Bereichs bewegen, diesen Text, weil er immer noch in diesem Bereich ist. Ich werde es so skalieren. Mal sehen, ob es dieses Mal die Größe ändern wird. Nun, lassen Sie es uns so hierher bringen. Nun, es sieht gut aus. Ich denke, wir müssen den vertikalen Rhythmus unseres oberen Bereichs hier anpassen. Fangen wir mit diesem an. Ich werde es hier in der Mitte so ausrichten, oder vielleicht das, so. Dies ist bereits sehr gut ausgerichtet, und das ist bereits ausgerichtet. Ich habe 1, 2, 3, 4, Leerzeichen hier drüben, 1, 2, 3, 4, 5 Räume hier drüben und 1, 2, 3 Räume hier drüben. Im Moment ist dieser Text eher mit diesem verwandt, also ist er näher dran. Dies ist eine sehr einfache Designkonzentration, die beide miteinander verbunden sind, wenn wir Chunking oder Gruppierungen verwenden werden. Das hängt mit diesem zusammen. Jetzt verkleinern wir uns. Vielleicht denke ich, die Überschrift ist zu nah an unserem Logo und vielleicht können wir hier unsere Logo-Größe reduzieren. Lassen Sie uns versuchen, unsere Logo-Größe zu reduzieren und sehen, wie es aussehen wird. Lassen Sie uns seine Größe reduzieren , um das hier zu setzen. Sieht viel besser aus. Ich denke, halten Sie das größer, weil wir ein bisschen Daumen brauchen. Wir brauchen eine bessere Konvertierung, weil Daumen nicht sehr klein sind, also werden wir diese etwas größer verwenden. Seine Größe beträgt 62 mal 48 Pixel. Es sollte mindestens über 44 oder 48 Pixel liegen. Stellen Sie sicher, dass es darüber steht. Für diesen Bereich werde ich es nach oben und unten ausrichten. Logo befindet sich in der Kopfzeile, also verschieben wir das Logo heraus, oder vielleicht muss ich all dies mit Shift auswählen. Wir können all dies mit Shift klicken. Auch mit Video-Bereich, und ich werde sie zu gruppieren, so ist es mein Header-Inhalt. Lassen Sie uns es Header-Inhalt nennen. Ich werde es ein bisschen hier runterschieben oder vielleicht hier rüber. Nun, es sieht gut aus, bewegen Sie das Muster ein wenig nach oben. Du denkst vielleicht, ich verschwende viel Zeit mit diesen Ausrichtungen, aber sie sind es wirklich wert. Sie werden wirklich Ihr Design gestalten. Ich werde das verstecken. Ziehen wir es in meine Kopfzeile und ich werde mein Raster verstecken, um zu sehen, wie das Design kommt. Es sieht wirklich gut aus. Ich denke, ich werde die Tastengröße so groß halten. Es sieht nicht sehr seltsam aus. Aber wenn Sie die mittlere Größe verwenden möchten, können Sie es verwenden. Laden wir unseren UI Style Guide. Nun, hier ist mein Styleguide und Sie können sehen, dass die mittlere Taste 208 mal 56 Pixel ist. Lass es uns so groß machen. Aber wir können die Höhe ändern, da der Inhalt die Breite Ihrer Schaltfläche ändern wird. Lassen Sie es uns auf 56 Pixel verschieben. Ich werde die Höhe davon auf 56 Pixel ändern und mal sehen, wie es aussieht. Es sieht gut aus. Lassen Sie uns die Breite ein wenig reduzieren. Es sieht jetzt gut aus. Kein Problem mit irgendetwas. Ich werde es retten. Sie können sehen, wie ich die Tastengröße von diesem auf diese verschoben oder geändert habe. Auch unsere typografische Skala, können Sie sehen, wie ich die Logo-Größe und alles geändert. Auch, wenn Sie das ganze Bild ändern möchten, können Sie hier ändern. Sie können einfach eine Textzeile hier hinzufügen , dass es 30 Sekunden oder 40 Sekunden sein wird, nur um dem Benutzer zu zeigen, dass es nicht lange dauern wird, um dieses Video zu sehen. Als nächstes werden wir unsere Abschnitt 1 Schritte entwerfen. Fahren wir mit der nächsten Lektion fort. 47. Schritte im Bereich für kleine Geräte entwerfen: Jetzt werden wir den Abschnitt 1 unserer mobilen Version neu gestalten. Dafür werden wir das ein bisschen nach oben bewegen. Sie können sehen, dass dieser Abschnitt ein bisschen klein ist, also werden wir unseren Abschnitt 1 ein bisschen nach oben verschieben. Versuchen Sie es auszurichten oder nehmen Sie es hinter unserem Videobereich. Vielleicht können wir es so ausrichten. Nun zu diesen Schlagzeilen werden wir die Größe auf 36 ändern. Auch wir werden sie in der Mitte ausrichten. Wenn Sie eine neue Absatzvorlage erstellen möchten, können Sie eine neue Absatzvorlage für mobile Überschriften erstellen. Lassen Sie uns eine neue Absatzformatvorlage erstellen. Wir werden es mobile Rubriken nennen. Für mobile Überschriften, denke ich, dass unsere Zeilenhöhe zu viel war. Ich werde 36 so benutzen. So wird es in der Mitte sein. Wir haben viel Platz, also werde ich es hochziehen. Auch für diesen, wenn Sie einen anderen Stil erstellen möchten, den Sie erstellen können, aber ich denke, ich werde es einfach auf 20 und Mittellinie verschieben, und hier haben wir einen anderen Text. Ich werde es schnell tun, weil Sie wissen, dass die meisten Dinge, die ich tue, sich wiederholend sind. Also benutze ich hier drüben einen Bereich. Lassen Sie uns unser Gitter einschalten, um zu sehen, wie wir alles nach unserem Gitter ausrichten. Das Gitter sollte gesperrt sein und wir werden darauf klicken. Wir werden es vollständig mit den vier Spalten, die wir so verwenden, erweitern. Auch für diesen, lasst uns so etwas tun. Nun für diese werden wir sie übereinander ausrichten , so dass es nichts mehr zu tun gibt, nur die Ausrichtung. Ich werde das sehr schnell überspringen. Wenn Sie nun die Größe der Symbole ändern möchten, liegt es an Ihnen. Ich denke, wenn Sie sie ändern möchten, können Sie sie vielleicht ändern. Bewegen Sie sie einfach so, wie sie sind, also sind die 128. Lassen Sie uns sie 96 machen, Excel-Höhe. Tun Sie es für alle von ihnen. Ich denke, sie sehen jetzt gut aus. Wir werden alles mit SVG kontrollieren. SVG sind im Grunde skalierbare Vektorgrafiken. Ich denke, du solltest deinen Codern davon erzählen und sie werden diese Idee lieben. Jetzt haben wir die Größe über alle unsere Symbole geändert. Jetzt werden wir dies vertikal mit unserer vertikalen Ausrichtung im vertikalen Rhythmus ausrichten. Mal sehen, wie viele Bars wir hier hatten, 1,2,3,4,5,6,7. Wir haben sechs. Ich lasse sechs hier drüben, 1,2,3,4,5,6, also haben wir schon sechs hier drüben gelassen, aber wir werden das ein bisschen nach oben verschieben. Vielleicht hier drüben. Außerdem denke ich, dass die Zeilenhöhe seltsam aussieht. Es wird jetzt 24 sein, also 20 und 24, sie sehen gut aus. Lassen Sie uns dann verkleinern, um zu sehen, wie viel Entfernungen wir in jedem Schritt benötigen. Wir werden das ein bisschen nach oben bewegen, hier drüben, ich denke, es sieht gut aus. Ich denke, es gibt viel Abstand, mehr Abstand zwischen diesen, also werde ich diese auch ein bisschen nach oben bewegen, sie anpassen. Ich werde sie schnell anpassen. Ich denke, das sieht gut aus, ,1,2,3,4,5,6. Wir verwenden eine Lücke von sechs, also sind es im Grunde 48, denke ich. Jetzt werden wir unsere anderen Überprüfungsabschnitte aktivieren. Ich werde mich auch ausrichten, ich werde das bekommen und ich werde es in der Mitte ausrichten. Nun lasst uns dies auch in der Mitte ausrichten, also werden wir zuerst unsere Überschriften ausrichten. Lassen Sie uns zuerst diesen Abschnitt bewegen und nach unten bissen. Es ist ein ganzer Abschnitt. Ich denke, ich sollte dies auch in diesem Abschnitt verschieben. Ich werde den ganzen Abschnitt so nach unten verschieben. Lassen Sie uns dies in Absatz ändern, klicken Sie mit der rechten Maustaste auf Absatztext, weil wir hier mehrere Zeilen benötigen. Ich werde die gesamte Breite verwenden, und ich werde Centralize verwenden. Normalerweise sind ein oder zwei Wörter unten, weil wir es nicht kontrollieren können. Wenn Sie es wirklich kontrollieren wollen, können Sie so etwas haben. Es liegt an dir, aber ich mag es wirklich in der Standardposition. Außerdem, was wir tun werden, ist, dass wir die Nutzerbewertungen stapeln, und wir werden den Namen unten kleben. So etwas wie das. Was ich tun werde, ist, dass ich das Bild gruppieren werde. Lassen Sie uns das Bild gruppieren. Lasst uns diesen Bereich erweitern. Es ist Bildgruppe, die unser [unhörbares] hier drüben ist, und ich werde es in der Mitte damit ausrichten. Auch wir werden es so ausrichten. Das ist etwas seltsam, weil unsere Absatzgröße etwas größer ist. Ich werde es so kurz machen. Vielleicht kannst du es links behalten. Aber wir werden die Mittellinie dieses nach diesem Bereich, so etwas wie diesem. Weil die längeren Texte, ich denke, sie sollten nicht in der Mitte ausgerichtet sein, weil es schwierig sein wird, sie zu lesen. Jetzt werden wir das Gleiche für diesen hier tun. Jetzt werden wir die vertikale Höhe für den vertikalen Rhythmus festlegen , den wir diesen Abschnitt 2 verstecken werden, und wir werden diesen verwenden, und lassen Sie uns seinen vertikalen Rhythmus anpassen. Davor werden wir auch seinen Hintergrund ausdehnen. Ich werde die Größe so ändern. Hier haben wir unseren Hintergrund. Wir werden es auch neu dimensionieren, um die volle Breite unseres Gebiets hier drüben zu haben, die mobil ist. Sie sehen gut aus. Ich benutze zwei Lücken, die 16 Pixel zwischen ihnen sind. Wir werden das Gleiche für dieses tun, weil es nicht zwei Lücken gibt. Jetzt gibt es zwei Lücken, 16 Pixel zwischen ihnen und auch ich werde hier 16 Pixel verwenden. Das wird etwas sein. Ich brauche drei oder vielleicht vier hier drüben. Sie sehen hier ein bisschen gut aus. Gute Menge an Platz kann es wirklich sehr tolle Effekte erzeugen, und Sie können hier sehen, wie ich es benutze. Wenn ich das Gitter ausschalten, können Sie sehen, das sieht sehr schön aus. Wenn ich sie sehr näher bewege, werden sie nicht sehr in einer guten Form oder Position sein. Ich denke, wir haben mit diesem Bereich fast fertig. Lassen Sie uns die Größe ändern. Dies sind vier Lücken sind mehr als genug. Fahren wir mit der nächsten Lektion fort, in der wir unseren Abschnitt 2 verschieben oder ändern werden. 48. Team für kleine Geräte entwerfen: Jetzt werden wir Abschnitt 2 entwerfen, das unser Team ist und wir werden es ermöglichen. Hier ist unser Team. Zuerst werden wir diesen Abschnitt etwas nach unten verschieben und unser Raster verstecken. Mal sehen, wie wir die Lücken dazwischen haben. Als erstes werden wir dies auswählen und wir werden unsere mobile Überschrift verwenden, und es wird die Stile überschreiben. Auch, wenn Sie einen Stil aus diesem hier erstellen können, können Sie sehen. Wo ist unser? Ich glaube, ich habe vergessen, die Größe dieses zu ändern, also ist es 24, wir werden es 20 machen. Lasst uns so etwas benutzen. Unsere Größe all dieser Rubriken ist 20, also werden wir 20 verwenden. Außerdem denke ich, dass unsere Texte zu viel Tracking haben, also werden wir es auf dem mobilen Bildschirm reduzieren. Auch für diesen werde ich fünf benutzen, also lass uns den ganzen Bereich benutzen. Nun, es gibt eine Sache, die ich verlassen, die klar ist unsere Führer und wir werden erstellen, wieder ein paar mehr Führer mit unserem GuideGuide. Ich lasse einige Margen herum, die 16, 16, 4 Spalten sein werden. Gutter wird 16 sein. Ich werde sowas hier drüben hinzufügen. Das ist unser Gitter. Es ist gut, dass wir dieses Gitter zurück haben. Mit dem Raster ist es einfacher, alles auszurichten , so dass ich mein anderes Raster nicht ein- und ausschalten muss. Lassen Sie uns den Wortlaut ändern. Dies kann auch helfen, weil Sie manchmal Ihre Kopie oder Ihren Text entsprechend Ihrem Raster und allem ändern müssen. Lassen Sie uns unsere Nutzerbewertungen ein bisschen nach oben verschieben. Diesmal werde ich sie hierher bringen. Sie sehen gut aus. Lassen Sie uns unseren Führer und Führer verstecken. Zeig das nicht nochmal. Was wir hier haben, ist unser tolles Team. Ich werde das Zentrum ausrichten, und ich werde es ein bisschen nach oben bewegen. Lassen Sie uns zuerst dieses Gitter verstecken, so dass wir offen unsere Ausrichtung und alles ohne Ablenkungen sind. Fünf und 24, das ist unsere Größe. Warum nicht ein anderes Absatzformat für dieses erstellen? Ich werde einen neuen erschaffen. Es wird Yorkten sein, Schriftart wird Yorkten sein. Die Größe wird 20 sein, und das wird 24 sein, und die Farbe wird diese sein, und das wird fünf sein. Es wird Unterposition mobil sein. Lassen Sie uns das löschen und ich werde dieses benutzen, also sind wir gut. Jetzt müssen wir uns nicht zu oft ändern. Wir haben unseren Stil kreiert. Hier können wir dieses Rechteck reduzieren, die Größe, die wir hier verwendet haben, und wir werden es auf, sagen wir, 300 Pixel. Lassen Sie uns die Größe auf 264, so etwas. Ich werde es nach oben bringen. Ich denke, das ist gut. Wir werden das Gleiche für alle ändern. Ich werde 264 plus 16 plus 16 berechnen. Wir können 296 gebrauchen. Ich denke, 296 wird gut aussehen, weil ich den Menschen hier drüben zeigen muss, also 296. Es sieht gut aus. Zeigen Sie einfach die Oberseite des Kopfes. So etwas, jetzt werden wir diesen UX-Designer ein bisschen nach oben verschieben. Davor denke ich, wir wollten unser Marketing und die Guides, ich denke, zweitens war Marketing, also werde ich es verschieben oder hier, so. Ich drücke „Shift“, um alles so zu bewegen. Wir werden so etwas tun. Lassen Sie uns diesen Abschnitt 2 schließen und ich werde ihn wieder zurückverschieben, weil dies ein Fehler ist. Immer wenn ich versuche, etwas, das aus meinem Viewer außerhalb der Leinwand ist, verschieben Sie es zurück nach oben. Okay, also habe ich den Hintergrund korrigiert Richten Sie ihn hier aus. Jetzt werden wir alles vertikal ausrichten. Jetzt liegt es an dir. Stellen Sie sicher, dass Sie diese Bereiche gleich halten. Ich glaube, wir haben hier ein Missverhältnis. Wir haben hier mehr Platz, wir haben weniger Platz. Ich werde mein Gitter einschalten und mal sehen, was wir ändern können. Zuerst werde ich den Hintergrund ändern, um klarer zu sehen, wo alles liegt. Also werde ich es so einen Schritt nach unten verschieben, das hier nach oben oder vielleicht mehr so oben auf die Lücke von 16. Wir werden unsere Gruppe nach oben ziehen. Ich denke hier, das sieht gut aus. Dann schauen wir mal, wie weit wir hier drüben haben. Lassen Sie uns zuerst das beheben, wir werden es in dieser Gruppe bewegen, Team. Der Marketing-Typ muss so ausgerichtet sein. Das wird an der Spitze so etwas sein . Das ist fast perfekt. Dieser Marketing-Typ ist perfekt ausgerichtet und wir haben eine Lücke von 1, 2, 3, 4 und 8 und 9. Ich denke, ich sollte es etwas mehr nach oben bewegen, um die gleiche Lücke zu haben , so etwas, also 1 , 2, 3, 4, 5, 6, 7, 8. Ich werde, mit der acht Entfernung, acht Blöcke mit acht Pixeln. Auch gehen, um den Hintergrund zusammen mit diesem Bereich zu verschieben. Ich werde es wieder färben, was es hatte. Wir hatten die Farbe. Jetzt ist dieser Abschnitt fertig und es ist fast perfekt. Sie müssen sie in der Mitte ausrichten, also wenn ich sie falsch ausgerichtet habe, werde ich sie danach ausrichten. Ich denke, wir sind gut, zum nächsten Abschnitt zu gehen, davor werde ich sie in der Mitte ausrichten. Das ist es. Ich denke, wir haben diesen Abschnitt abgeschlossen. Fahren wir mit der nächsten Lektion fort. Wir machen das Foto Zeug. 49. Fessel für die tablet entwerfen: Jetzt werden wir für den letzten Abschnitt entwerfen , der unsere Fußzeile sein wird, und lassen Sie uns in die Fußzeile gehen und emulieren und Sie können sehen, dass seine Ausrichtung deaktiviert ist, also werden wir unsere Fußzeile verschieben. Stellen Sie sicher, dass Sie die Fußzeile ein wenig nach unten auswählen, vielleicht so. Jetzt werden wir die Dinge bewegen. Mach dir keine Sorgen um sie. Es gibt zwei Dinge, die wir tun werden. Wir werden die Größe dieser Schaltflächengrößen in der Höhe ändern, und wir werden auch unsere Überschriften ändern, und alles wird zentriert ausgerichtet sein. Also werde ich das sehr schnell machen, weil ich nicht möchte, dass das Video sehr lang ist. Wir werden einige der endgültigen Anpassungen und Konzentration [unhörbar] vornehmen. Lasst uns loslegen. Jetzt sind wir alle bereit, wir werden den vertikalen Rhythmus anpassen, indem wir unsere vertikalen Bestimungsraster verwenden. Also werden wir das Gitter einschalten und ich denke, es ist nicht richtig dimensioniert, also was ich tun werde, ist, dass ich es neu dimensionieren werde. Mal sehen, es ist immer noch verschlossen. Ich werde die Größe bis zu diesem Bereich ändern und das zweite, was wir tun müssen, ist, dass wir wieder auf diesen Snap die beiden Region klicken müssen , weil manchmal wird es ändern, wie es aussehen wird. Auch müssen wir die Größe unserer Kunsttafel ändern. Ich werde zum Kunstboard wechseln, und ich werde die Größe meiner Kunsttafel so ändern. Das ist besser. Jetzt werde ich meinen vertikalen Rhythmus hier drüben in diesem Bereich verwenden und mal sehen. Ich werde zuerst diesen Bereich sperren, also sperren. Wir haben einen Abstand von 1, 2 ,3, 4, 5, 6. Sechs sieht gut aus, oder vielleicht fünf sieht aus, was ich denke. Fünf sieht besser aus, und ich werde es hier drüben so benutzen. Wir können dies auch auf unserem mobilen Bildschirm ändern, die klicken, um uns jetzt anzurufen, weil wir dies leicht aktivieren können, können wir jederzeit anrufen, wenn wir auf einem mobilen Gerät sind. Wir werden diese Funktion in etwa so verwenden. Ich denke, diese Distanz ist gut. Lasst uns einen Block hier rüber in diesen Bereich setzen , oder vielleicht hier werde ich einen Führer hier drüben platzieren. Ich werde meine Kunsttafel auswählen, die von hier aus sein wird , und lassen Sie uns dieses Kunstboard anklicken und ich werde es vergrößern. Wählen wir dieses Kunstboard aus und passen Sie es so an. Es ist eine neue Funktion, die ich nicht wusste, dass es so in der Größe geändert werden kann. Wir haben unsere Kunsttafel geändert und unsere Entfernungen sind 1, 2, 3, 4,5 von hier. Es gibt nur wenige Dinge wie Überprüfung all diese Entfernungen oben und unten in den Abschnitten, lassen Sie mich einfach bestätigen, ob sie ähnlich sind 1, 2, 3, 4, 5, 6. Ich habe sechs hier drüben. Also lassen Sie uns das ein bisschen nach unten bewegen, weil ich sechs oben benutze. Etwas runter. Jetzt können Sie sehen, was ich tue, ist, dass ich diesen ganzen Block benutze, um dies in der Mitte auszurichten. Denken Sie nicht, dass ich alles perfekt auf diese Linien ausrichte, wir müssen nur bestimmte Bereiche definieren. Eine Sache, die ich hier gesehen habe, ist diese Größe. Diese Textgröße ist etwas seltsam, weil alles andere auch 24 oder 28 oder so ist. Ich werde 24 hier drüben für diesen hier benutzen und lass es uns so groß machen, dass es in zwei Zeilen wie dieser ist. Wir müssen sicherstellen, dass unsere Textgrößen sie einen gewissen Kontrast haben, also lassen Sie uns alles verbergen. Sie können hier drüben sehen. Dieser Text und dieser Text, sollten sie einen gewissen Unterschied in der Größe haben. Sie können sehen, ich denke, wir haben das bereits gebaut und ich denke, es sieht toll aus. Unsere Symbole sind alle groß, vielleicht, wenn Sie diese Größe wollen, reduzieren Sie die Größe dieser Finsternis, Sie können sie reduzieren, aber ich denke, 96 ist perfekt. Sie sollten wie einige Menschen aussehen, nicht zu kleine Dinge. Also ja, ich denke, wir sind so ziemlich, wir haben dies abgeschlossen, wenn es einige Anpassungen gibt, können Sie sie verwenden, stellen Sie sicher, dass alle Ihre Überschriftengrößen von allem anderen so unterscheiden. Eine weitere Sache, die Sie hier tun können, können Sie auch diesen Inhalt verstecken. Es hängt von Ihrem Unternehmen oder Ihrem eigenen Kunden ab. Wenn Sie ausblenden möchten, zeigen Sie einfach hier Nummer eins oder etwas, Schritt Nummer 1 bewerten Sie Ihr Unternehmen, und entfernen Sie diesen Text. Wenn Sie es behalten wollen, es an Ihnen, aber ich denke, dieser Text ist nicht zu viel, also werde ich es hier behalten, weil ich meine Symbole in der Größe geändert habe. Dies ist der Blick auf unsere mobile Ansicht unserer Website, können Sie sehen, hier haben wir die Übung abgeschlossen. Ich denke, wir haben eine ziemlich Reise aufgenommen und ich schätze die Geduld all der Designer , die bei mir standen und mich gehalten haben, diesen Kurs zu schaffen und diesen Kurs zu schaffen und diesen bis zum Ende zu beobachten. Dies ist das Produkt, das wir am Ende bekommen haben. Jetzt im nächsten Abschnitt werden wir einen Styleguide erstellen , der mit Zeppelin codiert wird, um es an unsere Programmierer zu liefern. Ich werde Ihnen auch ein paar weitere Werkzeuge zeigen, die Sie auch das Gleiche tun können. Fahren wir mit dem nächsten Abschnitt fort. 50. Was müssen Entwickler über dein Webdesign kennen?: In diesem Abschnitt werden wir für Entwickler entwerfen und wir werden unser Design übersetzen, damit unsere Entwickler es einfach codieren können. Also werden wir uns eine Menge verschiedener Werkzeuge, eine Menge verschiedener Techniken ansehen . Wie Sie Ihr rotes Linienspezifikationsdokument entwerfen und wie wir verschiedene Online-Tools verwenden, um am Ende unseren codierten Styleguide zu entwickeln. Lassen Sie uns beginnen und lassen Sie mich Ihnen zeigen, was wir in diesem Abschnitt behandeln werden. Also lasst uns anfangen. Jetzt müssen unsere Entwickler viele Dinge wie die Entfernungen zwischen verschiedenen Elementen kennen . Also, was ist die Entfernung? An der Spitze dieses Elements können Sie hier sehen. Auch müssen sie wissen, was die Größen verschiedener Elemente sind. Außerdem müssen sie das Gitter kennen. Wie viele Spalten Sie verwendet haben. Sie können hier sehen, wie viele Spalten dieses Element nimmt und wie viele Spalten dieses Element nimmt. Sie müssen ein Layout aufbauen. Was sie also tun werden, ist, dass sie diesem Logo diese beiden Spalten geben und alle anderen Spalten werden für diese Schaltfläche „Get a quote“ und für diese Navigation sein. Auch hier drüben können Sie hier sehen, dass sie 1, 2, 3, 4, 5, 6, 7 Spalten zu diesem Element geben 2, 3, 4, 5, 6, werden und sie werden etwas Rand oder Polsterung auf der linken Seite verlassen. So werden sie kodieren. Außerdem werden sie wissen, welche verschiedenen Stile, Layerstile Sie verwenden. Sie können hier in den Effekten, Farbverlauf über Layer-Schlagschatten sehen. Ich werde über diese Ebeneneffekte in einem separaten Vortrag sprechen und wir werden sie sehr gründlich sehen. Eine Sache ist also Entfernungen. Die andere Sache ist unser Layout. Wie viele Spalten? Sie müssen wissen, was die Spalten für jedes Element sind. Dann haben wir, hier drüben, können Sie sehen, dass es vier verschiedene Schritte gibt und jeder nimmt drei. Also hier haben wir ein anderes Layout. Hier haben wir sechs Spalten, die alles nehmen. Hier haben wir wieder drei Säulen und auch hier drüben. Das erste, was sie tun werden, ist, dass sie ihr Layout aufbauen werden. Wie viele Spalten für jede Zeile? Das ist also eine Reihe für ihr Design. Dies ist die zweite Reihe oder der zweite Abschnitt für ihr Design. Dann ist dies eine weitere Zeile und das ist eine weitere Zeile mit vier Spalten oder vier Elementen. So funktioniert die Codierung. Sie werden Spalten für jedes Designelement angeben , und sie werden schnell ihr Layout aufbauen. Sobald sie ihr Layout erstellt haben, werden sie über Farben und den Text, Schriftarten, ihre Größen, ihre Farben, ihre Ausrichtungen und auch sie werden diese Schaltflächen entwickeln. Sie werden Stile zu ihrem CSS geben und sie werden verschiedene Schaltflächen wie „Black“ Button oder „Gradient“ Button oder „Blue“ Button sein. So können Sie sehen, hier haben wir „White“ -Taste. Lassen Sie uns dieses Gitter verstecken. Hier haben wir 1, 2, und 3 und 4 verschiedene Tasten, die wir hier verwendet haben. Ich habe keinen Link verwendet, aber ich denke, Sie können diese Cyan Farbe für den Link verwenden, wie Sie hier sehen können. Das sind also die Dinge, die sie wissen müssen, dann müssen sie wissen, was die Schriftgrößen und Zeilenhöhen sind , die Sie hier verwendet haben. Also Zeilenhöhe für diesen. Auch welche Polsterung und Ränder Sie für diesen verwenden werden. Wir werden all dies in einem anderen Online-Tool namens Zeppelin abdecken. Wir werden darüber erfahren, weil es wirklich ein Segen für alle Entwickler ist. Das sind also verschiedene Dinge, die wir unseren Entwicklern mitteilen und sicherstellen, dass Sie auch Ihre Layer benennen und sie richtig gruppieren, wie Sie hier sehen können, Header Abschnitt auf Abschnitt zu Fußzeile, und dann alle Schaltflächen und Symbole. Sie sollten richtig benannt werden, sonst werden sie wirklich in Schwierigkeiten geraten, Ihre Ebenen und Ihre Namen zu finden. Also Entfernungen, Farben, Stile, Schriftarten , ihre Größen, ihre Farben, wie viele Spalten jeder nehmen wird? Dies sind die Dinge, die Ihr Entwickler über Ihr Design wissen muss. Lassen Sie uns also zur nächsten Lektion übergehen und mehr darüber erfahren. 51. Die Entstehung von roten Linien von den Anfängern → Teil 1: In dieser Lektion werden wir nun ein Dokument mit roten Linien entwerfen, aber wir werden nur einen bestimmten Teil davon entwerfen. Andere Teile, wir werden sie in einem Online-Tool namens Zeppelin bekommen. Das Plugin, das wir für Photoshop-Erweiterung verwenden werden, heißt Ink. Es ist ein kostenloses Plugin und ich werde Ihnen in wenigen Sekunden zeigen, wie man es benutzt. Also lasst uns anfangen. Hier ist das Ink-Plugin, über das ich gesprochen habe, ink.chrometaphore.com. Es ist ein kostenloses Plugin, und Sie können hier sehen, es kann die Breite und Höhe jeder Auswahl erzeugen, jede Ebene. Außerdem können alle Ebeneneigenschaften einer Textebene angezeigt werden. Wie Sie hier sehen können, wird es zeigen, dass das, was ist die Deckkraft für Namen, Stil, auch für Größe zusammen mit Zeilenhöhe. Dies sind viele verschiedene Details, die Sie von diesem Plugin erhalten können. Sie müssen es installieren. Stellen Sie also sicher, dass Sie dieses Plugin installieren. Jetzt werde ich zu Photoshop wechseln. Nun, hier können Sie in meinem Photoshop sehen, Sie können sehen, dies ist das Ink Plugin. Wenn Sie diese Erweiterung nicht sehen, können Sie zur Erweiterung gehen und auf Ink klicken. So ist es. Das Layout wird angezeigt. Es gibt verschiedene Dinge, die Sie aktivieren und deaktivieren können, wie Layer-Messungen, Print-Layer-Haupteigenschaften, Farben, Ebeneneffekte oder Generieren einer XML-Datei. Es ist bereits ausgeschaltet. Dies sind verschiedene Symbole, die Sie hier sehen können. Diese sind für die Auswahl bestimmt. Wenn ich so etwas auswähle, und dann klicke ich darauf, können Sie hier sehen, es wird die Größe meiner Auswahl zeigen. So habe ich 49 Pixel ausgewählt. Diese drei Steuerelemente dienen zur Auswahl, und diese drei sind für Layer. Wenn ich auf eine Ebene wie diese klicke und ich auf eine dieser Eigenschaften wie diese klicke, so wird es mir die Breite und Höhe dieser Ebene zeigen. Sie können hier drüben sehen. So generiert es all diese Spezifikationen. Nun, was wir tun werden, ist, dass wir nur einige Führer verwenden, und wir werden die Entfernungen zwischen jedem Element zeigen. Wie weit ist die Entfernung von hier nach hier? Wie groß ist der Abstand zwischen diesen beiden Elementen? Was ist dann der Abstand zwischen der Spitze dieses Elements und diesem Bereich hier drüben? All diese Entfernungen werden wir zeigen. Die wichtigsten sind die Entfernungen in verschiedenen Abschnitten. Wenn Sie bedenken, dass dies ein Abschnitt oder eine Reihe unseres Designs sein wird, wie groß ist dann der Abstand zwischen diesem und der nächsten Reihe? Außerdem können Sie hier drüben sehen, hier ist unser zweiter Abschnitt. Sie können sehen, dass dies der Abstand zwischen unserem oberen Abschnitt, Kopfbereich oder [unhörbar] Abschnitt und dem nächsten Abschnitt ist. Außerdem werden wir die Entfernungen zwischen den Unterabschnitten anzeigen, wie Sie hier sehen können. Dann können wir die Abstände zwischen diesen Elementen sehen, auch diese Elemente, und auch unten. Also lasst uns anfangen. Ich werde Ihnen ein paar zeigen, und ich werde die anderen überspringen und sie dann vielleicht schnell überspringen, damit Sie sehen können, wie ich sie entwerfe. Nun, die wichtigste Technik hinter der Erzeugung dieser roten Linie Spezifikation ist, dass wir Richtlinien verwenden werden. Was wir also tun werden, ist, dass wir jedes Element auswählen werden. Wählen wir das Verschiebenwerkzeug aus. Wir werden ein beliebiges Element wie dieses auswählen, und dann ziehen wir eine Richtlinie hierher, also wird es daran bleiben. Das ist also sehr nett. Dann werden wir diesen auswählen, und wir werden einen anderen wie diesen fallen lassen, vielleicht diesen. Stellen Sie sicher, dass Sie den Container auswählen. Ich werde das auswählen und es wieder fallen lassen, und es wird so passen. Dann, wenn du willst, kannst du auch so etwas hier rüber fallen lassen. Ist es ein Absatz? Ich denke, es ist ein Absatz. Ich werde es in Punkttext konvertieren. So kann es Raster genau dort einrasten, wo es sein sollte. Dann kannst du auch etwas hier drüben benutzen, dann hier drüben, so etwas, dann kannst du auch von hier aus gehen und dann von hier so. Du hast also die Vorstellung davon, was ich hier drüben versuche. Jetzt habe ich die verschiedenen Richtlinien aufgestellt. Warum habe ich diese Richtlinien oder Leitfäden platziert? So kann ich meinem Entwickler helfen, die Entfernungen zwischen verschiedenen Elementen zu schätzen. Sie können sehen, dass ich hier einen übersprungen habe, warum? Denn wenn ich ihm den Abstand zwischen diesen beiden Elementen zeigen werde, denke ich, er wird verstehen, dass der Abstand zwischen diesen beiden Elementen schaltet. Die Rubrik und die Unterposition werden gleich sein. Also müssen wir ihm diese Guides nicht immer wieder zeigen, also werde ich sie entfernen. Lasst uns das entfernen. Wir werden es ihm einmal sagen, und er wird von dort gehen. Dies sind die Entfernungen, die wir erzeugen werden, und das sind alle vertikalen Abstände von oben nach unten. Nun, was ich tun werde, ist, dass ich hier drüben eine Auswahl treffen werde, so. Ich werde das drängen. Dies ist im Grunde die Messung der Höhe. Grundsätzlich werden wir all diese Höhen erzeugen. Ich werde D oder Befehl D steuern, um die Auswahl aufzuheben. Dann werde ich dazwischen schnappen, und ich werde das wieder generieren. Das ist also ein bisschen nicht genau. Also, was ich tun werde, ist, dass ich einen hier drüben platzieren werde. Das ist eigentlich unser Hauptzweck. Das ist ein ganzes Gebiet. Sie können hier drüben sehen, er muss wissen, dass es eine gewisse Distanz zwischen diesen Grenzen gibt. Ich werde wieder diesen Bereich auswählen, und ich werde diesen Bereich drücken. Es ist 62. Ich denke, es ist nicht in unserem Netz. Mal sehen, was unser Gitter haben sollte. Es sollte 64 sein. Also, was ich tun werde, ist, dass ich den Fehler hier drüben korrigieren werde. Also sollte es 64 sein, also werde ich 64 hier drüben setzen. Mal sehen, was der Abstand zwischen diesen beiden ist. Wenn Sie das Gefühl haben, dass die Entfernung nicht in Ihrem Gitter oder Ihrem Acht-Pixel-Raster liegt, werden Sie es berechnen, und 104 dividieren durch 8, so dass es sich in unserem Raster befindet. Dann brauchen wir etwas Raum zwischen diesen Bereichen, diesen Überschriften. Also lasst uns hier drüben ein Gitter platzieren und sehen, wie viel wir hier haben, vielleicht 16, oder vielleicht 32. Es wird also 32. Keine Sorge, es könnte Probleme mit einem oder zwei Pixeln geben, unser Auge ist nicht genau das Pixel perfekt, also werden wir uns nicht darum kümmern. Wir werden die Größe in ganze Zahlen ändern, damit unsere Designer wissen oder Entwickler wissen, dass, wie sie dieses Design bauen werden. Die sind anders. Lassen Sie uns auch die Größe zwischen diesen beiden berechnen. Ich denke, es wird 42 sein, also sollte es im Grunde 40 sein. Es gibt also einen Abstand von zwei Pixeln. Lasst uns das klären. Die Entfernung eines Abschnitts wird 96. Also ja, es ist gut. Wie wird dann der Abstand zwischen diesen beiden Überschriften sein? Wählen wir das aus. Ich glaube, es ist 16. Es ist 20, aber ich denke, es sollte nicht 20 sein, es muss etwas näher an 24 sein, denke ich. Lass uns mein Gitter einschalten und sehen, was hier schief gelaufen ist. Mal sehen, ob sie richtig ausgerichtet sind. Ich denke, es gibt ein bisschen Problem hier drüben. Eigentlich benutzt dieser Abschnitt diese ganzen Zeilen hier drüben. Also ein bisschen Zeile, ein bisschen von unserem Text ist ein bisschen aus dem Raster. Eigentlich, was wir tun müssen, ist, dass wir D. kontrollieren müssen. Ich denke, 24 wird funktionieren, Sie brauchen sich keine Sorgen darüber zu machen. Eigentlich sollte es so etwas am unteren Rand des Rasters sein. So wird es funktionieren. Aber in der Mitte ist es okay, mach dir nicht viel Sorgen. Dies sind nur die Richtlinien. Also lassen Sie uns unser Gitter verstecken. 52. Die Entstehung von roten Linien von den Anfängern → Teil 2: Beachten Sie, machen Sie Ihr Design zwei Pixel perfekt. Stellen Sie einfach sicher, dass Sie gehen, um die richtigen Größen hier zu verwenden oder die Entfernung ist diese, große und kleine Entfernungen, sie wirklich eine große Rolle. Sie können sogar eine Skala entwickeln und Ihre Quoten darüber erzählen. Wenn Sie einen großen Raum wie diesen verwenden möchten, große Auffüllung, dann sollte es 104 sein, der Abschnittsaufstand beträgt 96 Pixel, der Abstand zwischen der Überschrift und Unterüberschrift ist 24. Das ist also deine Skala. Sie können sehen, dass wir 40 viel und auch 104 verwenden, und manchmal verwenden wir 64. Also 40, 64, 104, 32. Das ist unsere Skala unserer Polsterung. Wir sind also Wohnräume zwischen verschiedenen Bereichen, dann können Sie hier drüben sehen. Wir können auch unser Raster einschalten, um zu sehen, wo unser Guide sein sollte. Also werde ich meinen Reiseleiter hier drüben platzieren. Sie können auch so etwas tun. Ich werde den Abstand zwischen diesen beiden messen. So ist es 80, es ist 10 mal. Vielleicht können wir hier auch 64 oder vielleicht 96 benutzen. Ich denke, wir können hier auch 64 gebrauchen. Wenn Sie also Ihr Design etwas nach oben verschieben möchten, können Sie das tun. Dann haben wir etwas Raum zwischen diesen beiden Bereichen, ich denke, es wird fast 64 sein. Es ist 44. sie in eine Skala zu bringen, müssen wir sie auf 40 kürzen. So wird es 40 sein und es wird gut aussehen. Verwenden Sie nicht zu viele verschiedene Räume, ich denke, wir haben bereits viele verschiedene Räume, 96, 64, 40, 32. So kann es die Harmonie zwischen Ihrem Design entfernen, also verwenden Sie nicht zu viele von ihnen. Ich denke, dieser Block ist gleich der Größe von 96, denke ich. Es ist 96. Also werde ich es so hierher schieben. Auf diese Weise werden wir unsere Rote Linie Dokumentation entwickeln. Also werde ich alles überspringen. Jetzt können Sie sehen, dass ich einen ganzen vertikalen Rhythmus hinzugefügt habe wie viele Leerzeichen und wie viele verschiedene Leerzeichen oder Polsterungen ich verwende. Sie können hier drüben sehen, wir haben 80, 40, 96, 40, 96, 64, 104. Auch wenn Sie Ihr Design zu sehr kompatibel verwenden oder in viel Harmonie variieren möchten , können Sie Ihre Räume nachträglich anpassen. Also, wenn Sie 104 überall verwenden möchten, können Sie diese 144 auf 104 reduzieren, wenn wir volle 40 Pixel unten und auch oben verwenden. Sie können sehen, wir haben auch 64 für das Medium dann 104 ist die größte. Vielleicht, wenn Sie anpassen möchten, können Sie dies anpassen. Anstatt 144 hier drüben zu verwenden, können wir auch für 104 gehen. Also verwende ich hier 40 Pixel weniger. Sie können sehen, wie Ihr Design hier aussehen kann , es anpassen und sehen, ob es besser wird. Wenn dies nicht der Fall ist, können Sie stattdessen 144 verwenden. Sprechen Sie also mit Ihren Entwicklern darüber, erstellen Sie einen Rhythmus oder eine vollständige Skala von verschiedenen Polsterungen und Rändern und sagen Sie ihnen, dass dies die verschiedenen Entfernungen sind, die Sie verwenden. Sie werden sich freuen, über Ihren Prozess und alles zu sprechen. Treffen Sie sich also mit Ihrem Team und sagen Sie ihnen, was Sie hier verwenden. Sie können auch sehen, dass ich diese in diesem Block hier zentrieren kann. Wenn Sie möchten, können Sie auch so etwas tun. Auch können Sie sehen, alle meine Spezifikationen sind in diesem Dokument, diese Ordner Tinte, so kann ich sofort verstecken und zeigen Sie sie. Dieses Plugin ist wirklich cool, Sie müssen es verwenden und Sie sollten eine PNG-Datei liefern oder Sie können ihnen die PSD so zeigen. Sie können einfach so eine PNG-Vorschau Ihres Dokuments liefern. Das gleiche können Sie auch mit Ihrem Tablet und mobilen Ansichten tun. Ich werde das nicht wiederholen, weil wir hier unterschiedliche Breiten haben. Wir haben hier unterschiedliche Abstände, vielleicht unterschiedliche vertikale Rhythmus, die wir hier verwenden, wir verwenden weniger Abstand. Sie können eine, zwei oder drei verschiedene Skalen oder vielleicht zwei Skalen für verschiedene Geräte entwickeln zwei oder drei verschiedene Skalen und sie zum Auffüllen und Ränder zwischen Ihren verschiedenen Elementen verwenden . Es geht also darum, Tinte zu verwenden, und ich hoffe, Sie haben diese Lektion genossen, also fahren wir mit der nächsten Lektion fort. 53. Welche Ebenenstilen können in Code (HTML) konvertiert werden?: In dieser Lektion werden wir über verschiedene Photoshop-Effekte und Layer-Stile sprechen , die von Ihren Entwicklern oder CSS Cascading Stylesheets unterstützt werden. Wenn Sie mit einem Entwickler sprechen, müssen Sie wissen, dass diese Dinge möglich sind. Wenn Sie sich nicht sicher sind, dann sollten Sie mit Ihren Entwicklern oder Entwicklerteam sprechen, dass „Ich werde diesen Effekt oder diesen Farbverlauf in meinem Design verwenden, ist es in CSS möglich oder nicht?“ Können Sie es leicht in Code konvertieren oder nicht? Ich werde Ihnen einige der Tools und Websites zeigen, auf denen Sie die neuesten CSS-Experimente und verschiedene Effekte verwenden können . Ich denke, wenn Sie diese kennen und Sie diesen Effekten ausgesetzt sind und Sie wissen, dass diese Dinge in CSS möglich sind, können Ihre Entwickler nicht mit Ihnen streiten. Lasst uns anfangen. Ich werde mit verschiedenen Photoshop-Ebeneneffekten beginnen. Jetzt, hier habe ich einige Unterstützung, die von CSS Kopf ist, es ist Photoshop Plugin-Erweiterung und es erkennt verschiedene CSS-Stile und kann ihren Code sofort generieren. Es zeigt die Füllung der gradienten/durchgezogenen Ebene, Verlaufsüberlagerung, Schlagschatten , Textebenen, Innenschatten, Farbüberlagerung, Innenglühen, Kontur, Äußeres Leuchten, Rahmenradius. Border Radius ist das, was wir in abgerundeten rechteckigen Tasten verwenden. Opazität, wie undurchsichtig oder wie transparent es ist. Dann haben wir weniger Stil und SASS und Stylus. Dies sind verschiedene Sprachen, oder Sie können CSS-Präprozessoren sagen. Du brauchst dir keine Sorgen um sie zu machen. Lassen Sie uns zu Photoshop wechseln und ich werde Ihnen zeigen wie viele Stile und Layout-Stile Sie hier verwenden können. Hier haben wir diesen Knopf. Ich werde es auswählen, weil es viele verschiedene Effekte verwendet. Wenn wir zu Ebenenstilen gehen, können Sie sehen, dass ich ein „Gradient Overlay“ verwende. Diese Verlaufsüberlagerung ist möglich. Du brauchst dir keine Sorgen darüber zu machen. Sie können so viele Farben verwenden, wie Sie möchten, jeden Winkel, den Sie möchten. Dann haben wir diese „Drop Shadows“. Sie können sogar mehrere Schlagschatten verwenden und sie können leicht in Code umgewandelt werden. Auch für Innere Schatten können Sie mehrere zwei innere Schatten verwenden. Sie können auch „Kontur“ verwenden, aber nicht über zwei Striche gehen. Verwenden Sie nicht mehr als zwei Striche des tatsächlichen Gehäuses. Du siehst, dass ich sie verdoppelt habe. Vermeiden Sie diese Abschrägung und Prägung. Inneres Glühen, Innerer Schatten, Kontur, Farbüberlagerung, Farbverlaufsüberlagerung und Schlagschatten und äußeres Leuchten vermeiden Sie diese Musterüberlagerung und diesen Satin und diese Abschrägung und Prägung. Du brauchst sie nicht zu benutzen. Andere Effekte können leicht in Ihre Codierung berechnet werden und wenn Sie mit der rechten Maustaste darauf klicken, können Sie sehen, dass Sie „CSS kopieren“, was der Code für Ihre Entwickler ist und wenn Sie es einfügen, können Sie hier sehen, es hat Rahmenradius, das ist Ecken Ihrer Knöpfe. Dann Hintergrundbild, hier haben wir alle Farbverläufe. Dann haben wir mehrere Box-Schatten, das ist unser Schlagschatten, wir haben Position absolut, sich keine Sorgen über diese, wir haben diese Breite und Höhe und machen uns auch keine Sorgen darüber. Lassen Sie mich Ihnen das Live-Beispiel zeigen, wie ich diesen Code verwende und ihn in diesen Button hier drüben umwandle. Lassen Sie mich es Ihnen zeigen. Hier ist unser Gleiches, aber, und es ist kein Bild, es ist im Grunde ein codiertes Beispiel. Ich benutze jetzt diese Einstellungen hier drüben. Ich benutze den gleichen Code, der von Photoshop generiert wurde und ihn hier drüben eingefügt und Sie können hier drüben sehen. All die Schatten. Sie können sehen, drei Schatten sind lila und zwei dunkle Schatten sie sehen hier toll aus. Dann lassen Sie mich Ihnen einige der mehr Effekte zeigen, die möglich sind, und neue Dinge und Blogs, die Sie sehen müssen , und die Websites, die Sie sehen müssen, um sich zu entlarven. Einer ist diese codepen.io. Es gibt viele verschiedene Experimente hier drüben. Sie können sehen, dass dieser schräge Hintergrund durch Coding gemacht wird, so dass sie hier keine Art von Bild verwenden. Sie können auch diesen Cinematic CSS Effekt sehen. Dies wird auch mit CSS generiert. Es gibt Millionen von Möglichkeiten, die Sie jetzt mit dem neuesten CSS3 tun können. Sie können auch sehen, ob ich über sie schwebe, Sie können sehen, dass es eine schwere gesäumte um diese. Dann lassen Sie mich Ihnen zeigen, dass dies verschiedene Klickeffekte sind. Sie sind wirklich interaktiv, wirklich genial. Wenn Sie diese Effekte kennen, die Sie diese gesehen haben, ist dies der Blog tympanus.net und es gibt Millionen von verschiedenen Experimenten und Dinge hier drüben. Sie können sehen, dies ist Play and Pause Sie können es auf einigen Audio-Sound-App oder so etwas verwenden . Dann können Sie sehen, es gibt viele Schaltflächen Stile. Dies sind sehr interaktive Stile. Sie können Ihren Entwicklern sagen, dass Sie diesen Stil oder diesen auf meiner Schaltfläche verwenden werden. Hier drüben sind das verschiedene Stile. Wenn ich sie drücke, zeigen sie verschiedene Stile, wie Sie hier sehen können. Es gibt viele Möglichkeiten, die Sie tun können. Hier drüben gibt es verschiedene Möglichkeiten. Es gibt verschiedene Ladeeffekte von verschiedenen Texten. Diese sind mit nur einer Codierung möglich, die Sie sich nicht um die Implementierung kümmern müssen. Wenn Sie bereits wissen, dass dieser Effekt möglich ist, dann haben Sie Oberhand über Ihrem Team und Ihrem Entwicklungsteam. Du weißt, dass du ihnen leicht sagen kannst, dass ich diesen Effekt hier brauche. Lassen Sie mich Ihnen zeigen, dass es andere Möglichkeiten gibt, die Sie sehen können. Der Gradient bewegt sich von dieser Richtung in diese Richtung. Wenn ich versuche, den Winkel zu ändern, oder wenn ich versuche, hier eine weitere Farbe hinzuzufügen, vielleicht diese. Lassen Sie mich Ihnen die Vorschau zeigen und Sie können sehen unser Farbverlauf geändert hat und er sich von dieser Richtung in diese Richtung bewegt. Es gibt viele Möglichkeiten. Sie können viele verschiedene Stile verwenden, verschiedene Header-Stile, die Sie hier sehen können. Auch habe ich diesen kurvigen Stil gesehen. Sie können diese Kurven sehen. Diese Kurven sind auch mit CSS und HTML und all diesen verschiedenen Stilen möglich. Es gibt viele Möglichkeiten. Ich werde die Links für all diese Seiten einschließen und ich hoffe, Sie haben diese Lektion genossen. Wenn Sie mehr über sie erfahren möchten, können Sie mich in den Fragen stellen. Dies sind die Haupteffekte. Sie müssen wissen, dass diese in Photoshop möglich sind, und auch Ihre Entwickler können mit diesen Stilen entwickeln. Ich hoffe, dass Sie viel über diese Ebenenstile gelernt haben. Fahren wir mit der nächsten Lektion fort. 54. Zeplin für die Zusammenarbeit von Webdesign installieren: In dieser Lektion werden wir Zeplin verwenden, ein Online-Tool und es ist auch eine Photoshop-Erweiterung und wir können es verwenden, um mit unseren Entwicklern sehr gut zusammenzuarbeiten. Also werden wir es installieren und dann werden wir unsere Kunstboards in Zeplin exportieren und es ist Online-Tool. In der nächsten Lektion werden wir tatsächlich einen Styleguide aus unserer PST entwickeln, die auf Zeplin hochgeladen wird. Lasst uns anfangen. Nun, das ist die Zeplin-Website. Das Beste daran ist, dass es eine kostenlose Version hat. Also müssen Sie sich kostenlos registrieren und Sie müssen die Erweiterung herunterladen. Sie müssen ihre Photoshop-Erweiterung herunterladen. Sie können hier drüben sehen. Sie können auch für ihre verschiedenen Tutorials und wie es zu verwenden gehen. Am unteren Rand können Sie hier sehen, Mac App und Windows-App, Sie können diese herunterladen. Sobald Sie diese heruntergeladen haben, können Sie sehen, Sie werden so etwas sehen, Zeplin installieren. Ich bin gerade auf Windows. Also habe ich es installiert. Mein Windows-System ist 64 Bit, also habe ich es installiert und es wird in Ihrem Photoshop angezeigt. Jetzt wechseln wir zu Photoshop. Ich bin hier in meinem Photoshop und Sie können sehen, dass Sie zu diesem Windows und Erweiterung gehen müssen, dann müssen Sie zu Ihrem Zeplin wechseln. Sie können hier sehen, wenn ich darauf klicke, es wird geladen, dauert einige Zeit und Sie können sehen, dass ich ein Kunstboard ausgewählt habe, zeigt mir, Export ausgewähltes Kunstboard nach Zeplin. diesem Grund haben wir in unseren Entwürfen Kunsttafeln verwendet. Jetzt können Sie nur einen exportieren oder alle exportieren. Aber ich denke, Sie können eins nach dem anderen exportieren. Mal sehen, was es tun wird. Es wird mir zeigen, dass diese drei Kunsttafel ausgewählt. Nun, es gibt eine weitere Funktion, die Sie hier sehen können. Es zeigt Markierung als Asset. Was bedeutet das? Ist das so, als ob ich dieses Bild habe, das ist mein Logo. Ich werde diese mit dieser Schaltfläche klicken und es wird es als ein Asset markieren. Asset bedeutet, dass wir verschiedene PNG- oder JPEG-Bilder für dieses Logo benötigen. Also jede andere Sache, die mit CSS oder Codierung allein generiert werden kann, wie diesen Text und diese Buttons, brauchen wir sie nicht. Aber das wird unser Vermögen sein. Stellen Sie sicher, dass Sie sie richtig nennen, wie dies mein Flaggen-Symbol ist und ich werde es richtig nennen, auch, all diese Symbole. Das ist nur zur Demonstration. Du musst wissen, wie ich sie als Vermögenswert kennzeichnen werde. Ich werde sie als einen Vermögenswert markieren. Auch diese Bilder sind ein Vermögenswert. Sie können das gesamte Tag als Bild verwenden. Sie können diese Gruppe auch markieren. Sie können hier sehen, Sublayer der Gruppe ignorieren, alle Ebenen in dieser Gruppe in Zeplin deaktivieren. Das wird so etwas tun. Ignorieren, deaktivieren Sie alle Ebenen innerhalb dieser Gruppe in Zeplin. Es wird Ihnen also keine Ebenen innerhalb dieses Tag-Bereichs zeigen. Das ist unser Tag. Aber lassen Sie uns diese jetzt entfernen und auch diese Bilder Ich möchte sie Sindbad nennen. Ich muss sie auch als Vermögenswert markieren. Sie müssen also alle Ihre Bilder wie 1, 2, 3, 4, diesen Hintergrund markieren . Ich muss beide markieren, sie gruppieren. Ich werde sie gruppieren und ich werde es bg-footer nennen und ich werde es als Vermögenswert markieren. Außerdem werde ich die Sublayer der Gruppe ignorieren, weil ich sie nicht separat brauche. Dies ist ein einzelner Hintergrund. So werden Sie alle Ihre Assets markieren, Ihre Bilder, die Sie exportieren müssen. Wenn Sie so etwas wie dieses Bild als Symbol wollen, werde ich es markieren. Dies wird als userstestes Symbol bezeichnet, und ich werde es als ein Asset markieren. Sie können diese auch als Asset markieren, aber ich denke, das ist in der CSS-Codierung möglich, Sie brauchen nur ein Bild und Sie können es oval machen und mit Ihrer Codierung einen Strich darauf setzen. Dies ist mit Codierung möglich, wir müssen hier nichts ändern, vielleicht müssen wir dies als Asset ändern, weil das ein Play-Button ist. Sie können auch als Asset markieren. Stellen Sie sicher, dass Sie all diese Dinge tun müssen. Außerdem können wir dies als ein Asset markieren, vielleicht Control G und video-bg. Also werde ich sie als Asset markieren, Sublayer ignorieren. Ich werde jetzt nur einen von ihnen exportieren. Um diesen Prozess einfacher für Sie zu verdauen. Lassen Sie es uns importieren. Ich habe bereits ein Projekt. Wenn Sie kein Projekt haben, wird es Ihnen zeigen, dass ein Projekt erstellt wird. Dafür musst du hier deine Zeplin App starten. Ich werde Zeplin durchsuchen. Wenn ich auf Zeplin klicke, können Sie eine sehen, die wir diese Erweiterung in unserem Photoshop haben, dann haben wir eine weitere vollwertige App, wo Sie verschiedene Projekte in Zeplin erstellen können. Jetzt können Sie sehen, dass Zeplin hier geschaffen hat. Lassen Sie uns dieses Projekt jetzt löschen. Projektname Wstudio. Ich werde es löschen. Ich habe das Projekt gelöscht, um Ihnen zu zeigen wie es funktionieren wird, wenn Sie kein Projekt haben. Wenn ich jetzt versuche, meine zu exportieren, Sie können sehen, dass es mir zeigt, dass eine aus der App erstellen. Also habe ich die App geladen und ich werde hier ein neues Projekt erstellen, mal sehen, mein erstes Projekt erstellen. Es wird Web sein. Also werde ich hier mein Webprojekt erstellen. Es erstellt gerade mein Projekt. Dichte ist 1x, wir haben auf 1x ausgelegt, nicht 2x, was Netzhaut ist. Wir entwerfen bei 72 Pixeln, also 1x und dann werden wir nichts tun. Also können wir den Titel hier ändern, Wstudio, so etwas. Jetzt werden wir gehen, um Photoshop, wie Sie hier sehen können, und wir werden wieder wählen Sie diese und Sie können hier sehen, können wir importieren. Also haben wir diesen Import, aber es wird einige Zeit dauern, bis der Import. Es wird es in den Webserver laden. Jetzt können Sie sehen, unsere Art Board ist in Zeplin App geladen und Sie können hier sehen, hier ist unser Desktop Art Board und das sind die gleichen Einstellungen wir hier getan haben, und auch wenn Sie andere Mitglieder einladen möchten, können Sie hier klicken und laden Sie andere Mitglieder mit Benutzername ein, oder Sie können Ihren E-Mail-Namen eingeben. Dies ist die beste Kollaboration App. Sie können dies auch zu Slack hinzufügen. Du kannst dein Slack-Team auch hierher bringen, wenn du Slack URL hast. Gehen wir zurück zu unserem Dashboard. Sie können sehen, dies ist unser Styleguide. Momentan haben wir keinen Styleguide, aber wir werden diesen Styleguide in der nächsten Lektion erstellen. Lassen Sie uns das öffnen und sehen, welche Beschreibung es Ihnen geben kann. Sie können hier drüben sehen, ich wollte die verstecken, aber ich glaube, ich habe sie vergessen. Wenn du sie behalten willst, kannst du sie behalten. Also werde ich bei 75 Prozent verkleinern. Das sieht gut aus. Wenn Sie auf eine Ebene klicken, können Sie sehen, dass es CSS ist und auch seine Farben und alle seine Eigenschaften auf der rechten Seite. Wenn Sie hier klicken, können Sie sehen, dass Sie auch Tag. Dies ist der Link für diese Datei Wenn Sie sie an jemanden senden möchten, können Sie sie an jemanden senden. Dann haben Sie verschiedene Farben, die Sie in diesem ganzen Dokument verwendet haben. Sie können hier drüben sehen, das ist die rote Farbe, sie kommt hier rüber. Wir brauchen sie nicht. Sie können auch sehen, dies sind alle Vermögenswerte. Sie können hier drüben sehen. Ihre Entwickler können einfach auf sie klicken und sie herunterladen , und das sind ein paar Muster hier drüben. So funktioniert unser Projekt. Wenn wir mehr Bildschirme hochladen, werden sie hier rüber kommen. Im Moment werde ich nur mit diesem Bildschirm arbeiten, um diesen Vortrag ein wenig kurz zu machen. In der nächsten Lektion werden wir Styleguide von diesem Kunstboard erstellen. Fahren wir mit der nächsten Lektion fort. 55. Die UI mit Zeplin erstellen: Jetzt, in dieser Lektion, werden wir lernen, wie wir unseren Styleguide mit Zeplin entwickeln, also lasst uns anfangen. Hier haben wir unsere Zeichenfläche in unserem Armaturenbrett geöffnet. Wenn wir darauf klicken, können Sie hier sehen, werden wir das bekommen. Wenn wir auf eine Schaltfläche klicken, können Sie hier sehen, dies ist die Schaltfläche, die Sie können, sehen es zeigt alle Felder, die es verwendet hat, und zusammen mit all diesen Schlagschatten. Das sind also zwei Schlagschatten, also werden wir sie retten. Davor denke ich, dass wir all diese Farben hinzufügen müssen. Jetzt ist auch der Zeplin nicht perfekt, Sie können sehen, dass wir Farbverlauf von dieser Farbe zu dieser Farbe verwendet haben, und es gibt vier Farben. Es zeigt, dass es sich um eine Farbverlaufsfüllung handelt, aber es zeigt nicht an, wo der Stopp der Farbe ist. Dafür werden wir die Hilfe von Photoshop bekommen. Wir werden mit der rechten Maustaste auf diese Ebene in Photoshop klicken und CSS kopieren, um diese Werte für unsere Entwickler zu erhalten. Was wir jetzt tun werden, ist, dass wir diesen Ebenenschatten kopieren, also werde ich vielleicht blau verblasst. Die Farbe ist gut. Sie sind wirklich mit sehr schöne Farbe, Schiefer 57. Ich werde vielleicht Schatten hinzufügen, um sicherzustellen, dass meine Entwickler wissen, dass dies Schatten sein werden. Sie werden sie so nennen, also bedeutet dieses Hash-Zeichen die Klasse, also ist dies für die Entwickler, dieser ganze Name. Stellen Sie sicher, dass zwischen ihnen keine Leerzeichen vorhanden sind, und sie beginnen mit dem Kleinbuchstaben. Wenn Sie Großbuchstaben verwenden möchten, denke ich, es ist besser, dass Sie hier einen Kleinbuchstaben verwenden. Das ist das ganze CSS, man kann hier drüben sehen, es gibt Kastenschatten, auch hier gibt es Farbverläufe. Der Code ist hier bereits generiert, wir müssen diese nicht in unserer Farbpalette hinzufügen. Also andere Farben, lassen Sie uns diese Farbe hinzufügen. Das ist unsere anthrazitgraue Farbe. Dann müssen wir noch etwas hinzufügen? Wir müssen unseren Nunito Sans-Regular hinzufügen, das ist unser Stil. Dies ist im Grunde unser Stil, und lassen Sie uns diesen hinzufügen. Das ist also unser Nav-Text. Das ist nav-Text normal, vielleicht ist es normal, weil wir nicht darüber schweben, also vielleicht so, dann werden wir dieses verwenden. Dies ist unser Absatz Text und Farbe, also gehen wir zu Text, Absatz-Text. Dies ist ein weiterer Textstil, das ist unsere Überschrift 1. Ich werde Überschrift 1 hier drüben verwenden, Überschrift 1 so etwas. Stellen Sie sicher, dass Ihre Namen ein wenig beschreibend sind, damit Ihre Entwickler wissen, was sie sehen. Das wird unsere Überschrift 3-weiß sein. Dies ist die Überschrift der Stufe 3. Es sollte nicht so sein, Überschriften3-lila. Sie können es auch Untertitel nennen, es liegt an Ihnen. Dann werden wir das auch nutzen. Überschrift 1 ist im Grunde Ihre Hauptüberschrift, die größte Überschriftengröße in Ihrem Dokument, Überschrift 1. Ich denke, wir haben diesen Stil bereits, also werden wir ihn nicht noch einmal hinzufügen. Ich werde auf „Flucht“ drücken. Man kann es Absatzkopf nennen, so etwas wie dieses. Dies ist eine weitere Überschrift, nennen wir es Überschrift 4. Dann haben wir diese Stile, lassen Sie sie einfach so. Wenn Sie darauf klicken, können Sie sehen, dies ist das Asset, das wir ausgewählt haben, so können Sie sehen, dass wir diese Assets herunterladen können. Wenn Sie hier klicken, wird dies PNG-Assets herunterladen, und sie werden in drei Größen sein; 1x, 2x und 3x. Lassen Sie mich das für Sie öffnen, ich werde es öffnen. Sie können hier drüben sehen, dies ist die größte Größe 3x. Dies ist der zweite, und das ist der dritte, also sind diese für drei verschiedene Auflösungen verschiedener Bildschirme, aber ich denke, wir werden diesen verwenden. Das Problem, das Sie hier sehen können, ist, dass es nicht abgeschnitten ist. Wenn du dein Design fertigstellst und hochladest, es vor dem Hochladen auf Zeplin musst dues vor dem Hochladen auf Zeplinclippen. Sie müssen diesen Teil unter diesem Abschnitt löschen. Sie müssen diese Ebene rasterisieren und den unteren Teil löschen. Verstecken Sie es nicht, im Moment schneide ich es ab, aber Sie können sehen, dass es das ganze Bild hochgeladen hat. Ich denke, auch das ist das Problem damit, Sie können hier sehen, es zeigt mir alle Grenzen dieses Bildes, sonst, was es tun sollte, ist es sollte nicht außerhalb der Grenze dieses Bildes gehen. Das ist der Fehler, ich glaube, ich habe es vergessen. Sie müssen den gesamten Bereich zuschneiden, diesen Bereich zuschneiden, Layer zuschneiden und sicherstellen, dass die Layer keine Smart-Objekte sind. Wenn Sie ein Smart-Objekt haben, werden diese nicht beschnitten. Stellen Sie sicher, dass Sie Ihre Smart-Objekte in gerasterte Layer konvertieren. Sie müssen mit der rechten Maustaste klicken, lassen Sie mich es Ihnen zeigen. Jetzt bin ich in Photoshop, lassen Sie mich Ihnen zeigen, wovon ich gesprochen habe, also ist das im Grunde unsere Fußzeile. Sie müssen also „C“ für den Zuschneide-Button drücken, und Sie müssen hier einmal klicken. Lassen Sie mich Ihnen zeigen, wie es sein wird. Nun, was wir tun werden, ist, dass wir unsere Schichten mit der Größe dieser machen werden. Stellen Sie sicher, dass Ihre Ebenen alle beschnitten sind ich werde diese Ebene rastern, Sie können hier sehen, ich muss dies auswählen und ich werde die Auswahl invertieren. Ich werde alles aus diesem Bereich löschen. Wählen Sie dies aus und löschen Sie alles, was sich um ihn herum befindet. Nun, wenn ich versuche, dieses auszuwählen, können Sie sehen, es hat dies. Lassen Sie uns hier auch alles löschen. Also, wenn ich etwas hier drüben habe, werde ich diese Auswahl so verwenden und drücken Sie „Löschen“, „Control D“, und lassen Sie uns es auswählen. Stellen Sie sicher, dass Ihre Auswahl ungefähr so ist. Wissen Sie, dass Ihre Bereiche nicht außerhalb dieses Rahmens liegen sollten, wenn es sich also um eine Dokumentgrenze handelt. Ich werde zurückkehren, weil ich meine Akten mit euch teilen muss. Jetzt bin ich wieder da. Nun, andere Sache, die Sie hier sehen können, ist auch, dass Sie den unteren Teil dieser Bilder einzeln löschen müssen, treffen Sie Ihre Auswahl so und löschen Sie alles darunter. Stellen Sie sicher, dass Sie die Originalkopie des Designs haben Wenn Sie also später etwas nach oben und unten verschieben möchten, gibt es keine Probleme. Es gibt wenige Probleme, wie Sie hier sehen können, das ist gut, aber ich denke noch einmal, die Größen sind nicht genau. So können Sie nur den Photoshop verwenden und diese Bilder über Photoshop exportieren. Sie können dies tun, indem Sie einfach mit der rechten Maustaste auf „Quick Export als PNG“ klicken. Dies wird wirklich gut in Photoshop funktionieren. Es ist wirklich schnell gehen, um Ihre Vermögenswerte zu exportieren. So werden Sie es schnell tun. Nun gehen wir weiter, um einige weitere Stile hier zu erstellen. Sie können hier drüben sehen, das ist unser weißer Knopf und das ist unsere Farbe blaugrün. Mal sehen, ob wir hier noch eine andere Farbe haben. Ja, wir haben hier eine Farbe, die bereits hinzugefügt ist, aber wir haben diese Farbe nicht, dies geschieht auch in blauer Farbe. Mal sehen, ob wir noch etwas haben. Ich denke, wir haben bereits unsere Farben gebaut. Sie können hier sehen, das sind die Farben, die in diesem Design verwendet werden. Ich glaube, ich habe diese Farbe vielleicht nicht. Also muss ich diese Farbe hinzufügen, ist für die Überschrift, und auch ich denke, ich habe vergessen, diesen Stil hinzuzufügen. Dies ist im Grunde Überschriften1, und das ist nicht Überschriften1, es ist nur 20 Pixel Yorkten normal fett. Das ist also keine Überschrift. Das ist unser Absatz-Text, das ist unsere Überschrift 1. Also lassen Sie uns den Styleguide überprüfen, indem Sie hier rüber gehen. Das sind unsere zwei Schatten. anthrazitgraue Farbe, blaugrün, denimblau, grau, und wir haben unsere hellgraue Farbe hier vergessen, schätze ich. Sie können sehen, dass wir bereits Überschrift 1, Überschrift 3 erstellt haben. Wenn wir darauf klicken, können Sie sehen, dass alle diese Kacheln in diesem Code sind. Absatzkopf und Absatztext, Text-Normal, Überschriften4, Überschriften3, Überschriften1. Sie können mit Ihrem Entwicklerteam einige Namenskonventionen erstellen, und wenn sie ein anderes Benennungsschema haben, wie sie Überschrift 1 oder so etwas setzen, liegt es an Ihnen. Oder vielleicht kannst du es einfach h1 und h3 nennen, so etwas. Vielleicht kürzere Namen. Hier ist mein Styleguide. Dann haben wir h4, navigation-Text-normal, Absatz-Text, Absatz-Kopf. Ich glaube, wir brauchen das hier nicht. So ist es ein anderer Stil, es ist für Absätze Überschrift. Wir haben unsere Zeichenfläche und Farben hier drüben, vielleicht, wenn wir unsere Farbe verpasst haben, können Sie sie wieder hinzufügen. Mal sehen, ich glaube, ich habe diese Farbe nicht, schiefergraue Farbe. Dies ist der Inhalt, können Sie sehen, Sie können auch diesen Inhalt kopieren. Es gibt CSS für jedes Element. Ihre Entwickler können dieses Dokument durchsuchen, und sie finden jedes. Sie können hier sehen, wenn ich darauf klicke, es zeigt auch die Breite und Höhe dieses zusammen mit dem Radius. All diese Formen stammen aus den Ecken, was ist der Eckenradius? Sie können auch sehen, es zeigt die Farbe Füllung und unser Dokument zeigt bereits die Entfernungen. Auch wenn Sie darauf klicken, können Sie sehen, dass sie die Assets herunterladen können. Dies sind also einige Dinge, die Ihre Entwickler von Ihnen brauchen; verschiedene Entfernungen, Farben, Styleguide. Dies kann wirklich eine sehr schöne Styleguide erstellen, Sie können hier sehen wir haben 1, 2, 3, 4, 5 Farben mit zwei Schatten. Ihre Quartale können all diese CSS kopieren, sie können auch andere Dinge wie SASS, SCSS, Weniger, Stylus verwenden. Dies sind verschiedene Frameworks für die Erstellung Ihrer Style-Guides und Stile in HTML-Codierung. Nun, selbst wenn Sie unser Entwickler sind, werden Sie dieses Tool wirklich mögen, und ich denke, ich liebe dieses Tool wirklich. Ich habe gerade angefangen, es vor einem Monat zu benutzen. Sie können hier sehen, Sie können auch Ihre Mitglieder einladen. Dies ist der Besitzer, und das ist alles über Ihre Zeplin Tool Online-Styleguide. Sie können hier sehen, dass Sie eine erstellt haben, und das wird wirklich Ihren Entwicklern helfen. Jetzt denke ich, das ist mehr als genug über Zeplin, es gibt mehr Werkzeuge, die ich in der nächsten Lektion behandeln werde. Sie können sie mit Ihren Entwicklern verwenden. Fahren wir mit der nächsten Lektion fort. 56. Zepling vs Avocode → Vergleich von Designer/Entwickler-Tools: Nun, in dieser Lektion werde ich drei verschiedene Werkzeuge vergleichen , die Ihre Codierung und Ihr Design sehr nahe bringen können. Einige von ihnen sind sehr mächtig und einige von ihnen sind für Designer und alle Teammitglieder gedacht, und einige von ihnen konzentrieren sich nur auf Entwickler. Mal sehen, was diese Werkzeuge sind. Einer von ihnen, den ich dir gezeigt habe, ist Zeplin. Es gibt noch ein paar [unhörbare] Funktionen, die ich vergessen habe. Einer davon ist, dass Sie hier verschiedene Befehle hinzufügen können, obwohl Ihre Teammitglieder Ihnen Feedback geben können. Dies ist das Pluszeichen, mit dem Sie Ihren Kommentar überall und überall ablegen können. Wie: „Das ist Logo, sollte es in Farbe oder Schwarz-Weiß sein?“ Sie können dies posten und andere können hier antworten. Sie können auch sehen, wie Sie Ihre Notizen ausblenden und anzeigen können, also sind dies meine Notizen. Sie können auch die gewünschten Farben auswählen, und Sie können sie auch [unhörbar]. Sie können hineinzoomen, verkleinern. Dies ist ein sehr schönes Collaboration-Tool. Dann ist der andere Konkurrent, was sehr gut ist, dieser Avocode. Es hat keine kostenlose Version. Sie können es einfach für 14 Tage verwenden und das Minimum, das sie haben, ist $9 pro Monat. Das ist auch sehr mächtig, ganz in der Nähe von Zeplin. Ich denke, vielleicht sind einige Funktionen besser, wie Sie hier sehen können. Es kann auch Code für die Entwicklung mobiler Apps wie Swift, CSS in JS, Android generieren . Dies sind eine Menge mehr Bearbeitungsfunktionen, auch für die Entwicklung mobiler Apps. Cloud-basierte Versionskontrolle, dies ist sehr gut für Designer, weil Sie alle Ihre Änderungen im Auge behalten müssen. Nun, was es zu tun ist, wird es Ihre Änderungen, die Sie ändern, um Ihre PST-Datei zu versionieren. Es wird in verschiedenen Versionen sein, wie Entwickler GitHub verwenden. Echtzeit-Design-Kollaborationen, können sie auch hier kommentieren. Es hat auch andere Werkzeuge wie Messen, Farbe, Dias, Hand. Ich habe es vor einigen Jahren verwendet, vielleicht ein Jahr oder zwei Jahre zurück, aber die aktuelle Version, Ich habe sie nicht verwendet und ich habe diesen Dienst nicht abonniert. Aber ich denke, es lohnt sich wirklich zu überprüfen. Diese beiden sind derzeit branchenführende Apps, Avocode und Zeplin. Andere, die frei ist ein, ist dies Klammern und es ist ein im Grunde ein Code-Editor von Adobe-Website, Adobe-Unternehmen. Was es tut, ist eigentlich für Entwickler gedacht. Es wird Ihre PST-Datei am unteren Rand zu laden. Ich denke nicht, dass es sehr hilfreich für mich ist. Ich mochte es nicht sehr im Vergleich zu diesen beiden Werkzeugen. Avocode oder Zeplin, Sie müssen einen von ihnen verwenden. Sie werden wirklich die Lücke zwischen den Designern und den Entwicklern näher bringen. Nun, nach diesem Abschnitt, wissen Sie, welche Werkzeuge notwendig sind, um Ihr Entwicklungs- und Design-Team zusammenzubringen. Hier geht es darum, Ihr Design für Entwickler zu bringen und für Entwickler zu entwerfen. Ich glaube, Sie haben viel gelernt. Wenn Sie Fragen haben, fragen Sie mich. Ich bin hier, um zu helfen. Wenn du nichts verstehst, werde ich weitere Vorträge darüber machen. Fahren wir mit der nächsten Lektion fort. 57. Sympli vs Avocode → Vergleich von Designer/Entwickler-Tools: Heute werde ich Ihnen zwei weitere Tools zeigen, die Designer helfen, mit Codern zusammenzuarbeiten und Ihre PSDs leicht in Codierung zu konvertieren. Nun, einer von ihnen ist Sympli, ich bin gerade darüber gestolpert und ich habe nur wenige Designer gesehen, die darüber reden. Hier ist es, Sie können hier sehen, dass es die gleiche Funktionalität hat, Sie können Ihre Assets in Photoshop wie in Zeppelin taggen und dann können Sie es hier exportieren. Was es also tat, ist, tatsächlich hat es Stile, Assets und alles automatisch erstellt . Für mich war das Problem, dass ich nicht zu viel Kontrolle darüber hatte. Sie können hier sehen, sind alle Assets, die ich deklariert habe, und wenn ich hier drüben klicke wird es einfach die Bitmap herunterladen und mal sehen, was es erstellen wird. Ich denke, es wird das gleiche tun, also würde ich gerne einige SVG-Funktionalität hier drüben haben, also wenn ich diese Icons oder dieses Icon in SVG herunterladen kann. Diese Assets werden automatisch erstellt, auch, alle diese Farben wurden automatisch erstellt, Sie können hier sehen. Außerdem können Sie hier alles sehen, was Textstile, soziale Symbole, die Schriftart, die ich für soziale Symbole verwendet habe, das ist hier drüben. Also gibt es ein paar zusätzliche Dinge, die ich für mich denke, und ich weiß nicht, wie ich den Code von hier bekommen soll, also habe ich all das, wenn ich hier drüben klicke oder wohin ich gehen muss, um diesen Code zu bekommen, also ist das ein bisschen problematisch für mich weil ich den CSS-Code hier drüben haben möchte. Das ist gut für, denke ich, die Entwickler, die Android Studio oder Xcode verwenden, Ich habe viele Designer gesehen, die Android Studio verwenden oder sie für Android-Apps entwerfen, sie lieben es wirklich. Aber für mich denke ich, es ist einfach okay, ich mochte es nicht sehr, weil ich nicht viel Kontrolle über diesen Bereich habe, also erzeugt es tatsächlich alles automatisch. Ich liebte Zeppelin wirklich, ich denke, es ist das perfekte Werkzeug für Web-Designer und Web-Entwickler, ich bin mir nicht sicher über mobile App-Entwickler oder Designer, ich denke, vielleicht ist dieses Tool gut für Android-App-Design. Jetzt kommen wir zu diesem Avocode. Ich versuche jetzt den Avocode, lass mich es dir zeigen. Jetzt habe ich meine PSD-Datei in diesem Avocode geöffnet und das erste, was ich bemerkte, ist, dass die Informationen überwältigend sind. Wir haben einige Abschnitte hier, wie Hand, können Sie Dinge bewegen, dann auswählen und Sie können alles auswählen und alle seine Eigenschaften werden hier drüben sein, Sie können auch den Text auswählen. Also, wenn Sie ein Entwickler sind, ich denke, dieses Tool wird Ihnen ein wenig Hilfe geben, Sie können auch Text hier kopieren oder wenn Sie es exportieren möchten, können Sie es exportieren als PNG, JPEG und SVG ist hier nicht vorbei. Dann können Sie auch einen Code haben, wenn Sie zu dieser Ansicht wechseln, können Sie sehen, dass Sie hier codiert haben. Ich glaube nicht, dass es alle Codes generiert, wenn ich in diesen Bereich gehe, lass mich zu diesem Bereich hier gehen, wenn ich das wähle, jetzt können Sie sehen, dass es mir die Option gibt, es als PNG zu exportieren, aber Sie können sehen hier wird Gradienten erzeugt, das ist eine gute Nachricht, so dass es den Gradienten und alles schafft. Ich denke, der Code ist hier perfekt, aber insgesamt liebe ich Zeppelin wirklich mehr als diesen. Dadurch werden Hilfslinien erstellt, so dass automatisch Hilfslinien erstellt werden. Dann können Sie auch zur Farbe gehen und Sie können jede Farbe aufnehmen. Lassen Sie uns diese Farbe wählen, zum Beispiel, so ist es schwierig für mich, diese Farbe zu wählen, also hat es mir die Farbe hier gegeben. Fügen Sie als Variable hinzu, Sie können auch eine Farbe mit variabler, vielleicht lila, so etwas hinzufügen . Ich weiß nicht, was das mit Variable bedeutet, vielleicht ist es eine Variable von weniger Quelle, anderen Dingen, vielleicht anderen Vorverarbeitungssprachen, aber im Moment habe ich nicht verstanden, was es bedeutet. In Zeppelin war es sehr einfach, den gesamten Styleguide aus verschiedenen Elementen hier zu erstellen . Jetzt können Sie sehen, dass wir einige Aktivitätsbalken haben, das sind die Ebenen hier drüben, alle Ebenen. Ich denke, das ist alles, wenn Sie es mehr erkunden wollen, können Sie es mehr erkunden, aber aus meiner Sicht denke ich, es ist einfach in Ordnung. Vielleicht weiß ich nicht, wie man es richtig benutzt, aber trotzdem denke ich, dass Zeppelin der beste unter all diesen vier Webdesign und Webentwicklung ist. Das war's für diesen Vortrag, wenn ich ein neues Werkzeug finde, werde ich dich aktualisieren. Also bis dahin, auf Wiedersehen und aufpassen. Bis bald mit einigen Updates. 58. Einführung in die Prototypen: In dieser Lektion werden wir über Prototypen sprechen und was ihre Zwecke sind, warum wir sie erstellen und warum wir in unserem Webdesign-Prozess erstellen müssen, warum wir jetzt Prototypen brauchen. Lasst uns anfangen. Nun, die erste Frage ist, was sind Prototypen? Prototypen sind im Grunde interaktive Version Ihres Endprodukts, egal ob Sie eine Web-App, eine mobile App oder eine Website entwerfen , es sollte einige Interaktionen in sie haben. Wenn Sie auf etwas tippen oder klicken, interagiert es und zeigt einen anderen Bildschirm, dies ist im Grunde der Prototyp. Ziel Ihres Prototyps ist es, Ihre Produkte, digitale Produkte wie Websites oder mobile Apps mit Ihren Nutzern zu testen . Lassen Sie uns über den Zweck von Prototypen sprechen. Nun, warum Prototypen erstellt werden, um Feedback von Ihren Benutzern zu erhalten , um die Benutzerfreundlichkeit Ihrer Website zu testen, ob Ihre Website einige Usability-Fehler aufweist, wie zum Beispiel, ob sich ein Benutzer einfach anmelden kann, oder einfach ein Konto erstellen kann, oder einfach ihren Warenkorb einrichten. Auch warum wir Prototypen erstellen, gibt es einen anderen Grund , dass wir unsere Flüsse und Richtungen testen müssen. Nun, wenn ich auf Login Button klicke, ob es ein Pop-up oder eine neue Seite anzeigen wird. Diese Entscheidung wird design-basiert sein, also wie Sie diese Botschaft an Ihren Entwickler weitergeben werden. Sie müssen ihnen Ihre Flows und Interaktionen auf Ihren Websites oder mobilen Apps anzeigen. Lassen Sie uns über die Arten von Prototypen sprechen. Es gibt nur wenige Arten von Prototypen, wie Low-Fidelity, High-Fidelity, und es gibt auch tatsächlich codierte Prototypen, die sehr nah am tatsächlichen Produkt sind. Papierprototypen sind im Grunde statische Prototypen oder Low-Fidelity-Prototypen, die auf Papier erstellt werden. Sie zeichnen einfach verschiedene Formen und testen Ihre Benutzer, und sie werden in frühen Phasen erstellt, um Feedback von Benutzern zu erhalten. Ich werde mich nicht sehr intensiv mit diesen Prototypen befassen, denn in diesem Kurs liegt der Fokus nicht auf der Benutzererfahrung, sondern auf Websites oder Webdesign. Hier ist ein Beispiel für Papierprototypen. Sie können hier sehen, es ist ein visuelles Bild von Getty Fisher und es ist ein sehr Low-Fidelity-funktionaler Papierprototyp. Was es tut, ist, dass Benutzer tippt, oder klickt, oder wählen Sie auf einem Menüpunkt und Sie gehen, um sie den nächsten Bildschirm selbst zu zeigen. Grundsätzlich werden alle Animationen und Interaktivität manuell sein und Sie werden den Bildschirm ändern und ihnen die nächste Papierfolie zeigen. Nun, in diesem Kurs, warum wir Prototypen erstellen, müssen wir im Grunde unsere Interaktionen und unsere Flows unserer Website von einer Schaltfläche oder einer Seite zu einer anderen oder von einem Link zu einer anderen Seite zeigen oder einer Seite zu einer anderen . Dies sind die Interaktionen, wie das Schweben aller Schaltflächen und Animationen, und so etwas. Dies sind die Animationen und Interaktionen, die wir unseren Entwicklern zeigen oder erzählen müssen. Es gibt viele Apps, um Prototypen zu erstellen. InVision App ist mein Favorit unter denen, Marvel haben auch ein kostenloses Konto, und proto.io ist überhaupt nicht kostenlos, aber sie haben viele Animationen und verschiedene Interaktionen. Proto.io ist sehr fortgeschritten, aber es hat kein kostenloses Konto. Außerdem können Sie UXPIN verwenden, um Wireframes und Prototypen zu erstellen. Ich habe keinen Prototyp mit UXPIN erstellt, aber ich habe InVision App und Marvel verwendet. In der nächsten Lektion werden wir einen sehr einfachen Prototyp mit InVision App erstellen. Fahren wir mit der nächsten Lektion fort. 59. Mit der Invision App zum Prototyping vertraut machen: Jetzt, in dieser Lektion, werden wir tatsächlich einen Prototyp mit InVision App erstellen. Sehen Sie hier drüben, das ist der Prototyp, den ich Ihnen zeigen werde. Mit dieser Übung können Sie jede Art von Prototyp erstellen, egal ob es sich um eine gleitende Animation handelt oder von Seite zu Seite oder Dropdown-Menü oder so etwas handelt. In diesem Beispiel werden wir diesen Fade Outted Feed in Drop-down-Liste erstellen. Dies ist unser Prototyp für Tablet-Ansicht. So werden wir unseren Entwicklern zeigen , dass die Animation so funktionieren wird. Lassen Sie mich Ihnen nur die Schnittstelle der InVision App zeigen. Also gehe ich zurück zu diesem InVision mein Dashboard. Hier sind verschiedene Kategorien wie „Alle“, Prototypen“, „Boards“ und „Favoriten“. Boards sind im Grunde mehr Boards. Sie können auch weitere Boards mit der InVision App erstellen. Wir sind nur an Prototypen interessiert. Wenn Sie auf „Alle“ klicken, können Sie hier sehen, es gibt verschiedene Boards und andere Dinge, mehr Board, SimplySocial und Inside Design, und Findli Board. Das sind nur Dummy-Boards. Wir werden auf „Prototypen“ klicken. Wenn du zu diesem Prototyp gehst, kannst du hier drüben sehen. Ich kann auch mehr Bildschirme laden oder mehr Bildschirme hochladen, wenn ich möchte. Moment habe ich zwei Bildschirme, einer ist im Grunde der erste Bildschirm Tablet1, und zweitens ist, wo ich meine Navigationsmenüleiste geöffnet habe. Eine ist ohne Navigation, andere ist geöffnet Navigationsleiste. Ich muss nur diese Interaktionen zeigen. Wenn ich zu diesem Bildschirm gehe, „View Screen“, können Sie hier drüben sehen, es gibt fünf verschiedene Steuerelemente hier drüben. Sie können Preview-Modus sehen, dann haben wir Build-Modus. Im Build-Modus können Sie hier sehen, dass hier ein Hotspot erstellt wurde. Es ist sehr einfach, Sie müssen nur klicken und ziehen Sie so, und bewegen Sie Ihren Hotspot hier drüben, und dann können Sie auf einen anderen Bildschirm verlinken. Wenn ich zu einem anderen Bildschirm gehen möchte, so kann ich hier klicken. Sie können hier drüben sehen, hier sind zwei Bildschirme. Auch gibt es ein paar weitere Optionen wie Link zurück/schließen, Bildschirm als Overlay. Ich habe das nicht getestet, und vielleicht könnte ich in der nächsten Vorlesung dieses Feature testen. Das sind nur wenige Dinge. Sie können auch eine externe URL verknüpfen, wenn Sie sie mit einer anderen Website oder so etwas verknüpfen möchten. Nächster Bildschirm in Serie. Aber ich liebe es, hier rüber zu gehen, weil es spezifischer ist. So erstellen Sie Hotspot. Sie können sehen, dass wir bereits eine erstellt haben, und wenn Sie darauf klicken, können Sie sehen, dass es mit Tablet-2 oder dem zweiten Bildschirm verknüpft ist. Dann können Sie hier sehen, die Geste, die ich verwende, ist „Tap“ und der Übergang, es gibt verschiedene Übergänge und Effekte, wie Instant, auflösen, schieben Sie rechts, schieben Sie rechts. Wenn ich meine Navigationsleiste hier drüben in voller Breite hätte, könnte ich diesen Push links verwenden und hier einen schwarzen Navigationsbereich anzeigen. Aber gerade jetzt, da unsere Navigationselemente sehr niedrig sind, so haben wir drei oder vier, so ist es nicht ratsam, einen vollständig verschiebbaren Bereich hier zu erstellen. Wir brauchen nur wenige Elemente hier drüben, also reicht eine Pop-up- oder Ausblendungsnavigationsleiste aus. Es gibt einige weitere Steuerelemente, die Sie hier so sehen können, halten Sie die Bildlaufposition nach dem Klicken. Wir müssen dieses Design nicht nach oben und unten springen. Wir müssen nur unsere Scroll-Position beibehalten. Wir werden dies anklicken. Es gibt eine weitere Option, Hotspot in Vorlage einschließen. Hotspot ist, dass ich diesen Teil in den ganzen sechs oder sieben Bildschirmen verwenden werde. Wir brauchen momentan keinen Hotspot. Hier geht es nur darum. Wir werden auf „Speichern“ klicken. Wir verwenden keinen festen Header. So ist unser Design so. Es gibt eine weitere Option, „Kommentarmodus“. Wenn Sie zu diesem gehen, kann Ihr Team zusammenarbeiten und kommentieren um Feedback zu verschiedenen Teilen zu hinterlassen, wie vielleicht Ihre Entwickler zeigen, dass „diese Fade Away Animation ist“, so etwas. Klicken Sie auf „Senden“. Sie können hier drüben sehen, das ist der Kommentar, den ich habe. Es gibt auch einen weiteren „Inspect-Modus“. Im Moment, ich denke, es braucht meine PSD dafür. Dies ist genau wie ein Zeplin oder Photoshop, Adobe Photoshop Extraktor. Es wird die Spezifikationen und verschiedene Ebenen meiner PSD-Datei zu zeigen. Im Moment ist es im Beta-Modus. Nun, ich denke, es könnte eine Version sein, die für Designs beibehalten wird. Es ist eine neue Funktion. History Mode, können Sie sehen, was sind die Änderungen und Versionen, die ich für dieses Design getan habe. Dann können Sie es sozial teilen, Sie können mehr Bildschirme hochladen, Sie können zu „Konfigurationen“ und Einstellungen gehen. Hier können Sie sehen, ich verwende iPad - White, oder Sie können iPad - Black verwenden. Mein Design beginnt unterhalb der Statusleiste, unabhängig davon, ob Sie die Statusleiste oben von Ihrem Design ausgeschlossen haben oder nicht. Sie können auch etwas Hintergrund, transparent, Vordergrund, hell, dunkel, andere Optionen haben , Statusleiste ausblenden, und Sie können es so „Speichern“. Dann haben wir Screen Status. Wie ist der Status, z. B. ob dieser Entwurf gesperrt ist, in Bearbeitung ist, überprüft oder genehmigt werden muss. Dann können Sie von hier aus Liveshare-Links generieren. Sie können es live mit Ihren Teammitgliedern teilen und sie können darüber in Live-View ziehen. Sie können zu dieser Zeit kommentieren. Sie können es auch „Teilen“, und Sie können hier sehen, es gibt eine weitere E-Mail. Ich kann die E-Mail hier drüben eingeben, oder wenn ich ein wenig nach unten gehe, lassen Sie mich Ihnen zeigen, hier, können Sie öffentliche Freigabe-Link sehen. Sie können hier klicken und Sie können diesen Link teilen, und sobald jemand auf diesen Link klickt, werden sie dieses Design so sehen und diesen Bildschirm so, und sie können hier klicken. Oder wenn dies irgendwo anders so klickt, wird es zeigen, dass dies der anklickbare Bereich ist. Dies ist der interaktive Teil. Das ist sehr einfach. 60. Prototyping mit Invision: Jetzt, wie Sie Ihre Bildschirme aus Photoshop extrahieren werden. Wechseln wir zu Photoshop. Ich werde es Ihnen sehr einfach zeigen. Wir brauchen nur zwei Bildschirme mit verschiedenen Zuständen. Einer ist dieser, und der eine ist dieser. Jetzt sind wir in Photoshop und Sie können sehen, dass wir hier sind, das ist mein Tablet-Design. Was ich getan habe, ist, dass ich hier ein weiteres Rechteck erweitert habe und meine Links hier drüben so setze und auch ich habe dieses Kreuz mit nur einigen Zeilen gemacht. Was ich tun werde, ist, dass ich Control A auswählen werde, und es wird die gesamte Leinwand auswählen. Was wir brauchen, ist, dass wir nur dieses eine Tablette auswählen müssen. Ich werde mit der rechten Maustaste darauf klicken und auf Quick Export als PNG klicken. Wenn ich auf Exportieren als PNG klicke, wird mir das Tablet 1 angezeigt. Es war Tablette 2. Es ist der zweite Bildschirm. Nennen wir es Tablette 2. Ich werde es jetzt auf dem Desktop speichern. Sie sind bereits gespeichert, also wird es mir einen Fehler zeigen. Dann werden wir diese Navigation ausblenden, und wir werden diesen Hover-Zustand entfernen. Sie können hier drüben sehen, das ist schweben. Ich werde meine Hamburgerkarte auftauchen, so. Wieder werde ich mit der rechten Maustaste klicken und klicken Sie auf Als PNG exportieren und ich werde es als Tablet 1 speichern. Wir haben jetzt zwei Bilder, eines dieser Zustand und dann einen anderen Zustand mit geöffneter Menüleiste hier drüben. Wir werden sie in InVision importieren. Gehen wir zurück zu InVision. Ich werde Ihnen zeigen, wie wir das nutzen werden. Wo befindet sich mein InVision-Dashboard? Das ist also mein Armaturenbrett. Im Moment benutze ich kostenlose Version, also werde ich das löschen, nur um Ihnen zu zeigen, wie ich es wieder gemacht habe. Bitte bestätigen Sie, dass Sie verstehen. Ich werde es so löschen. Ich verstehe. Starten Sie den ersten Prototyp. Ich wähle meinen Prototyp aus. Ich werde mein Android-Tablet oder vielleicht iPad auswählen. Also werde ich es nennen Wstudio Tablet View, so etwas. Fangen Sie an. Es wird meinen ersten Bildschirm erstellen. Es gibt zwei Möglichkeiten, Ihre Bildschirme hier hochzuladen. Eine davon ist, dass Sie Ihre Projekte von Photoshop oder Sketch hier synchronisieren. Sie können ihre Plugins herunterladen. Sie können von hier aus anfangen. Es gibt eine InVision-Erweiterung für Photoshop. Ich habe es installiert. Aber ich bevorzuge diese Methode, ich werde ein Pluszeichen mit diesem Pluszeichen setzen und ich werde diese Dateien hochladen, zwei Dateien. Ich werde sie auswählen und öffnen, und sie werden hier hochgeladen werden. Sobald unsere Bildschirme hier drüben geladen wurden, beginnen wir mit unserem ersten Bildschirm, View-Screen. Klicken Sie hier und Sie können hier sehen, es wird es so laden. Jetzt werden wir zu diesem Build-Modus wechseln, und wir werden klicken und ziehen auf diesen Bereich oder dieses Verknüpfungssymbol hier drüben. So Hamburger-Symbol, und ich werde meinen Bildschirm auswählen 2. Geste wird Tippen und Übergang wird auflösen sein. Sie können diesen Instant auch verwenden oder auflösen. Ich denke, auflösen wird Ihnen einen sehr guten Verblasseffekt geben. Also werde ich hier rüber klicken, Speichern. Das ist alles, wenn Sie Ihre Einstellungen ändern möchten, wie ich schwarzen, transparenten Hintergrund und Vordergrund sollte dunkel oder hell sein. Also werde ich Licht und Save verwenden. Ich gehe erneut in den Vorschaumodus und lassen Sie es uns testen. Klicken Sie hier. Es geht zu einem anderen Bildschirm, aber was ist mit einem erneuten Klick hier. Jetzt sind wir auf dem zweiten Bildschirm, also müssen wir jetzt zum zweiten Bildschirm gehen und wieder in den Build-Modus gehen. Jetzt sind wir im zweiten Bildschirm, und ich werde diesen Bereich hierher ziehen, und ich werde es mit Bildschirm 1 verknüpfen, der Tablette 1 ist. Wählen Sie auch die Auflösen und pflegen Sie die Bildlaufposition nach dem Klicken. Jetzt gehen wir wieder zur Vorschau. Sie können hier sehen, jetzt arbeitet es mit dem gleichen Effekt, den wir brauchen. Erster Bildschirm zu Sekunde und zweitens zum ersten. Von Erster zu Zweiter und von zweiter nach erster. So werden wir Prototypen erstellen. Sie können ähnliche Prototypen erstellen, vielleicht für diesen Hover-Effekt oder vielleicht ein Schieben in ein anderes Fenster oder Schieben auf einen anderen Bildschirm oder einige Effekte wie das. Oder vielleicht, wenn Sie hier Ihr Beratungsformular auftauchen möchten, wenn Sie hier etwas anklicken und dem Benutzer das Formular zum Ausfüllen des Kontakts zeigen . Sie können das mit diesem Prototyp zeigen. So erstellen wir Prototypen. Es ist sehr einfach, sehr einfach, und für InvisionApp ist es sehr kostenlos, denke ich. Hier geht es also um Prototyping. Wenn Sie Fragen haben, fragen Sie mich. Sie können auch Marvel verwenden. Es hat eine ähnliche Funktionalitäten, aber es ist nicht sehr einfach. Ich denke, ihre Benutzerfreundlichkeit und Benutzererfahrung ist nicht so gut. Diese InVision App ist sehr einfach zu erlernen und Sie werden keine Probleme oder Probleme bekommen. Es ist sehr intuitiv und sie haben eine gute Schnittstelle. Das wird also meinen Kurs zusammenfassen. Wenn ich Updates oder neue Dinge habe, werde ich es dem Kurs hinzufügen. Ich werde mit Ihnen die Links zu verschiedenen Apps für Prototyping in der nächsten Lektion teilen. Gehen wir also zur nächsten Lektion über. 61. Erstellen benutzerdefinierte Icon mit Iconmoon: Einer meiner Schüler hatte Probleme bei der Installation seiner Font Awesome PS Erweiterung, und ich hatte einen Gedanken, warum sollte ich Ihnen nicht auf die andere Weise sagen, was fantastischer ist als die Verwendung dieser Erweiterungen? Welches verwendet ICOMoon und erstellt Ihr benutzerdefiniertes Icon-Set. In diesem Video werden wir unsere benutzerdefinierte Symbolsatz-Schriftart erstellen, und wir werden es in Photoshop verwenden, um viele verschiedene Symbole zu zeigen. Für jedes Projekt, ob Sie mobile Apps oder Web-Apps verwenden, benötigen Sie ein paar Symbole, vielleicht wie 20 oder vielleicht 25 Symbole, maximal 20 Symbole, denke ich. Wir werden 20 benutzerdefinierte Symbole aus verschiedenen Bibliotheken auswählen, und Sie können auch SVG-Symbole importieren, die ich in unserer nächsten Lektion behandeln werde. Im Moment werden wir diese ICOmoon benutzen. Ich habe mein Konto dafür erstellt. Also werde ich zu dieser iCOMoon App gehen. Sie können hier drüben sehen, es gibt verschiedene Dinge an der Spitze. Hier ist mein Projekt-Setting. Wenn ich dazu gehe, habe ich diese E-Commerce-Icons verwendet. Ich habe es selbst genannt. Du kannst es benennen, was immer du willst. Sie können ein neues Projekt erstellen. Für diesen werden wir ein neues Projekt erstellen, und wir werden dieses entfernen. Ich werde es Iconset-WebDesign nennen, so etwas. So habe ich es also genannt. Lassen Sie uns hier über die Auswahl gehen, und ich werde Symbole aus verschiedenen Bibliotheken hinzufügen. Sie können hier sehen, es gibt nur wenige Bibliotheken, die kostenlos sind und wenige von ihnen, die Sie kaufen müssen. Sie können hier sehen, Sie haben Font Awesome Bibliothek, Sie haben Material Symbole, und Sie haben andere Symbole. Sie können hier drüben sehen, es gibt viele Möglichkeiten. Stellen Sie sicher, dass Sie Symbole haben, die viele Glyphen haben. Sie können hier sehen, es hat 845 verschiedene Symbole, und Rastergröße ist 24. Sie sind perfekt für Mobiltelefone, da ihre Rastergröße 24 x 24 Pixel beträgt. Diese sind hauptsächlich für das Web. Für diese Übung werde ich diese Iconic hinzufügen. Ich habe diese hinzugefügt, und lassen Sie mich noch mehr hinzufügen. Ich kann so viele Bibliotheken auswählen, wie ich möchte. Sie können hier sehen, es gibt ein paar Premium-Symbole. Im Moment werde ich diese Font Awesome und auch das hinzufügen. Also lassen Sie uns noch einen hinzufügen. Also dieser hier. Ich werde diese drei Symbole und Bibliotheken hinzufügen. Lassen Sie uns für diese Übung einige der Symbole auswählen, wie dieses Android, auch dieses, dieses Kontrollkästchen, dieses. Jetzt werde ich aus Font Awesome wählen. Sie können hier drüben sehen, es gibt Sterne, leere und gefüllte Sterne. Es ist besser, dass Sie aus einer Symbolbibliothek auswählen, da sie einen bestimmten Stil haben. Versuchen Sie also nicht, zwei oder drei verschiedene Stile zu mischen. Vielleicht können diese Art von Symbolen, kleine Symbole funktionieren. Aber andere Symbole, wie dieses, sie haben unterschiedliche Kurven und Formen und sogar Rastergrößen für App-Symbole. Sie werden also nicht sehr gut funktionieren. Im Moment bleibe ich bei diesen und gehe zu „Generate Font“, hier drüben. Jetzt können Sie sehen, ich habe 14 Glyphen ausgewählt, die diese Größe haben wird. Sie können hier drüben sehen. Das coole Ding ist, was wir tun werden, ist, dass wir die Schlüssel wechseln werden. In diesem Bereich, in dem Sie dieses seltsame Alphabet oder Zeichen sehen, müssen Sie diese Rücktaste löschen. Ich drücke meine A-Taste auf meiner Tastatur. Also A, B, C, D, E, M und N. Sie können sie auch mit ihrem Symbol benennen. Wenn dies Tick ist, können Sie T hier drüben drücken, nur um sich zu erinnern, aber ich mache es gerne so. Sobald ich diese Symbole meinen Tastaturtasten zugeordnet habe, gehe ich zu diesen Optionen, und ich werde Internet Explorer 8 unterstützen, Symbolpräfix, alles sieht gut aus. Wenn Sie zu dieser Schriftart Metriken gehen oder etwas ändern möchten, weiß ich nicht viel über diese zusätzlichen Einstellungen. Wenn Sie Metadaten hinzufügen möchten, wie URL, Beschreibung, Copyright, Designer, oder wenn Sie Ihre eigenen Symbole entworfen haben, können Sie hier gehen. Ich werde es Webdesign-Kurs nennen. Lassen Sie uns das so nennen. Also werde ich es herunterladen. Es wird mir das geben. Also lade es herunter. Ich gehe zu diesem Ordner, extrahiere ihn. Es wird eine ZIP-Datei, ZIP-Ordner sein. Es gibt also eine Demo-Datei, die Sie hier sehen können. Wenn Sie doppelklicken, werden Sie alle Symbole sehen, die in einer HTML-Datei verwendet werden. Wenn Sie ein Front-End-Entwickler sind, müssen Sie diesen sehen. Wenn Sie ein Designer sind, dann müssen Sie zu diesem Ordner gehen, webdesign-course. Dies ist die Schriftartdatei, TrueType-Schriftartdatei, und ich werde mit der rechten Maustaste klicken und installieren. Stellen Sie sicher, dass Ihr Photoshop momentan nicht läuft. Ich habe es installiert. Jetzt werde ich zu meinem Photoshop wechseln. Ich werde dieses benutzerdefinierte Symbolset verwenden. Das ist echt cool. Ich denke, es kann Ihnen Tonnen Zeit sparen. Wir werden nur eine einfache Datei erstellen. Drücken Sie T auf der Tastatur, um diesen Text auszuwählen. Ich werde dieses Webdesign auswählen, ich denke, es war Webdesign-Icon-Schriftart von hier. So ist es dieser, Webdesign-Kurs regelmäßig. Ich werde hier klicken, A, B, C, D, E, F, G, H, I, J, K, L, M, N. Also das sind die Schlüssel, die ich verwendet habe, denke ich. Erhöhen wir die Linienhöhe. Jetzt können Sie sehen, dass ich diese benutzerdefinierten Symbolsätze in Photoshop verwendet habe. So einfach. Es ist so genial. Dies ist die beste Technik. Ich liebe es, weil Sie nur wenige Symbole auswählen können, die Sie nur in Ihrer App, Ihrem Webdesign oder Ihrem Design benötigen . Wenn Sie wie 20, oder 13, oder 10 Symbole benötigen, müssen Sie nur nicht 500 KB Größe von Font Awesome Icon Set verwenden. Sie müssen nur diese Bibliothek verwenden. Außerdem können Sie sehen, dass nur vier KB maximale Dateigröße ist. Wenn Sie diese SVG- oder EOT-Datei mit Ihrem Webbrowser laden, laden Sie nur vier KB für Ihre Icons. So ist das wirklich schnell für Ihre Websites und Web-Apps. So geht es darum, Schriftartsymbole mit dieser iCOMoon App zu erstellen. Ich werde euch in der nächsten Lektion sehen, wenn ich eine weitere Lektion erstellen werde , in der wir SVG-Symbole, Ihre benutzerdefinierten Symbole, erstellen werden. Also bis dahin, auf Wiedersehen , kümmern wir uns um die nächste Lektion. 62. Verwendung und Exportieren von SVG im Webdesign im Bereich Webdesign: Heute werde ich über SVG oder Scalable Vector Graphics sprechen. Was sind im Grunde SVGs oder skalierbare Vektorgrafiken? Sie sind im Grunde Code, ich werde codieren, und sie sind Vektor, das bedeutet, dass sie auf jede Größe erweitert oder zusammengezogen werden können, ohne sie zu verzerren oder zu pixeln. Jetzt, in den jüngsten Trends des Webdesigns, werden sie wirklich in Web-Design und Web-Entwicklung verwendet. Entwickler liebten sie, Sie können sie skalieren, wie Sie möchten. Sie können sie 64 Pixel, 128 Pixel, oder was auch immer Sie wollen. In dieser Lektion zeige ich Ihnen beide Methoden und die beste Methode zum Extrahieren von SVG- oder Scalable Vector Graphics-Code, damit Sie ihn an Ihre Entwickler senden können. Wenn Sie bereits die Entwicklung oder Codierung für Websites oder Front-End-Entwicklung kennen, werden Sie diese Lektion lieben, weil ich Ihnen am Ende einen Teil des Codes zeigen werde. Lasst uns anfangen. Dies ist ein einfaches Symbol, das ich in Photoshop gemacht habe. Sie können hier drüben sehen, es gibt nur wenige Formen hier drüben. Nun, wenn ich zu diesem gehe, ist das der Ordner oder die Gruppe. Ich habe all diese Formen in enthalten. Nun, wenn Sie eine SVG-Datei von Photoshop erstellen möchten, die Methode darin, dass Sie mit der rechten Maustaste klicken und Exportieren als, und dieses Fenster wird sich öffnen und aus dem Format wählen Sie SVG. Jetzt können Sie hier sehen, das ist die SVG-Datei. Jetzt werden wir es exportieren und ich werde es auf dem Desktop exportieren. Nennen wir es Icon Wireframing Photoshop, so PS. Jetzt haben wir es exportiert. Mal sehen, wo es ist. Da ist es. Ich werde mit der rechten Maustaste klicken und es in erhabenem Text öffnen. Dies ist mein Code-Editor, jetzt können Sie sehen, dass dies alles Code ist, es gibt nichts hier. SVG ID und all das Zeug, das ist alles Code. Es gibt eine Lücke zwischen hier drüben, lasst uns das entfernen. Jetzt können Sie sehen, dass dies alles Code ist. Nun, wie benutzt man diesen Code? Sie werden es einfach kopieren und in einen beliebigen HTML-Editor einfügen, den Sie mögen. Ich werde es hier einfügen, lasst uns ein anderes div erstellen. Wenn Sie ein Designer sind, machen Sie sich keine Sorgen um dieses div oder codierende Zeug. Ich werde es hier drüben einfügen, und Sie können sehen, wie ich mein SVG-Symbol hier drüben habe. Jetzt empfehle ich nicht, Photoshop zum Extrahieren von SVG-Grafiken zu verwenden. Ich empfehle Ihnen, Adobe Illustrator zu verwenden. Weil es ein Vektorwerkzeug ist und es wird, um Ihre Symbole sehr scharf und sehr schön zu machen. So habe ich das Symbol von Photoshop SVG verwendet, und ich werde es jetzt löschen. Gehen wir zu diesem Adobe Illustrator. Jetzt, in der Mitte dieser Übung, zeigte ich Ihnen meine Symbole, verwendet Adobe Illustrator -Datei, wo ich alle meine Symbole. Nun, warum ich Adobe Illustrator verwendet habe, um alle meine Symbole in einer Größe und an einem Ort zu erhalten, weil ich sie am Ende normalerweise in SVG oder Scalable Vector Graphics extrahiere. Nun, der Vorteil ist, dass ich sie dort skalieren kann, wo mein Webdesigner-Entwickler, er kann die Farben ändern, er kann sie skalieren. Was immer er will. Nun, die Schritte sind, zuerst, Sie werden dieses Symbol auswählen, alles auswählen, und dann gehen Sie zu Objekt und erweitern. Stellen Sie sicher, dass Sie alles erweitern, füllen und streicheln. Nun, wie exportiere ich es in SVG? Jetzt gehen wir zu Datei, und gehen Sie zu Exportieren, und exportieren Sie für Bildschirme. Dies ist eine sehr neue Funktion, kam gerade in Adobe Illustrator. Ich gehe zu diesem Export-Panel, und ich werde es hierher ziehen. Ich habe ein Set 1, ich kann es Icon Wireframe Illustrator umbenennen, und dann werde ich auf Export drücken und es wird exportieren, wählen Sie einfach einen Ordner aus und Sie werden es exportieren. Wählen Sie Ordner, und wir haben es auf dem Desktop exportiert, und Sie können sehen, dies ist der Code von Illustrator generiert. Es ist bereits minimiert. Sie können hier drüben sehen, das ist sehr schön. Wenn Sie nun ein Coder sind, können Sie sehen, dass Sie die Füllfarben von hier aus steuern können. Dies sind fünf Klassen für fünf verschiedene Formen. Sie können sehen, dies sind die Farben in diesen verwendet, dieses Symbol. Lassen Sie mich Ihnen zeigen, wie ich diesen Code in meinem Code-Editor verwendet habe. Jetzt können Sie sehen, hier ist der gleiche Code, den wir vor ein paar Sekunden generiert haben, und Sie können hier sehen, gibt es drei Größen. Wenn Sie die Größe vergrößern möchten, können Sie voran gehen, Sie können die Größe auf was auch immer Sie wollen erhöhen. Jetzt werde ich die Größe des größten Symbols erhöhen. Sie können sehen, wie sauber und knackig sie sind. Ihre Ecken, alles, nichts ist verpixelt. Dies ist die Sache, die wir in SVG und skalierbaren Vektorgrafiken verwenden können. Sie können skalieren, sie basieren alle auf Code. Sie sind verschiedene Rechtecke und Formen. Sie bestehen aus Formen mit Codierung. Lassen Sie mich Ihnen die Magie zeigen, Sie können hier jede Farbe verwenden. Ich werde das Farbschema jetzt mit allen Klassen hier drüben ändern. Jetzt können Sie sehen, wie ich das ganze Symbol geändert habe. Wenn ich auch die äußere Grenze ändern möchte, können Sie hier sehen, ich habe das ganze Icon-Farbschema geändert. Nun, dies ist der Hauptgrund über die skalierbare Vektorgrafiken sind so beliebt in diesen Tagen. Ich denke, viele Leute benutzen sie. Außerdem haben sie eine sehr kleine Größe, okay, vielleicht drei oder vier KB. Das andere Feature, das sie haben, sind Animationen. Sie können hier drüben sehen, sie können so geschätzt werden. Dieses Krokodil hier drüben. Wenn ich den Mauszeiger darüber führe, basiert alles auf SVG. Es öffnet seinen Mund wirklich schön. Ich liebe diese SVG-Animationen. Hier können Sie ein paar weitere Beispiele sehen. Dies sind SVG-Animationen. Dies ist auch ein Happy Birthday Poly, und lassen Sie mich Ihnen zeigen, wie diese aussehen werden, wenn sie geladen werden. Das ist wirklich schöner Ladeeffekt, dann können Sie hier sehen, wie diese Animation funktioniert. Dies ist auch SVG animiert. Sie können sehen, das sind auch SVG-Animationen, SVG-Uhr, wirklich schön. Lassen Sie mich Ihnen dieses Symbol zeigen. Immer wenn ich darauf klicke, können Sie sehen, dass dies eine sehr coole Animation ist. Ich liebe es. Es gibt noch wenige weitere Animationen wie Zeichnen Animationen, die Sie mit diesen Bibliotheken Viewer machen können, und es gibt viele Bibliotheken, die Sie sehen können. Lassen Sie mich es Ihnen zeigen. Jetzt können Sie sehen, wie sich das verändert hat. Lasst uns das wiederholen. Nun, diese SVG ist wirklich mächtig. Es gibt noch wenige Methoden, die Sie mit ihnen gehen können. Sie können auch SVG Sprite von etwa 10 oder 50 Icons erstellen. Sie können sie einfach mit Ihren Webseiten verwenden. Sie können das Icon Moon Tool verwenden, das ich mit Ihnen in der letzten Lektion geteilt habe, Sie können sehen, was hier in den Einstellungen Sie dieses SVG Sprite erstellen können. Ich werde den Link einschließen, den Sie online suchen können, Google online für svg-sprite, gibt es einen sehr guten Artikel über CSS-Tricks. Es gibt jede Menge Dinge, die Sie mit diesen SVG-Symbolen tun können. Diese SVG-Grafiken sind sehr mächtig, Sie können hier sehen, wie ich das ganze Farbschema und alles von diesen Glühbirnen-Symbolen geändert habe . Das einzige, woran Sie sich erinnern müssen, ist, dass Sie, wenn Sie es mit diesem Illustrator verwenden , die gesamte Form auswählen und sie einmal erweitern werden. Dann kannst du es hier rüber ziehen. So, und ich werde es Drahtmodell nennen, und lassen Sie es uns exportieren. Ich werde es auf Desktop-Wireframe exportieren, und jetzt werde ich alles Code kopieren, Kontrolle A, Kontrolle C, und ich werde es in meinem Editor hier einfügen. Löschen wir das hier und fügen Sie es so ein. Nun, es verwendet im Grunde die gleichen Klassen, also nimmt es die gleichen Farben hier oben von diesem Symbol, das Sie hier sehen können, das sind die Farben. Wenn ich versuche, etwas zu ändern, können Sie sehen, dass es die Farben in beiden Formen ändern wird. Es wird speziell Farben von hier erhalten, also sind dies die gleichen Klassen. Wenn ich die Klassen der Farben ändern möchte, kann ich sie hier umbenennen. Vielleicht CLZ oder so etwas. Jetzt liegt es an dir. Wenn Sie ein Programmierer oder Programmierer sind, können Sie es tun, es ist sehr einfach. Du hast die Klassen, du kannst sie zähmen, wie du willst. Nun, das ist der Hauptgrund, warum ich diese SVGs wirklich liebe, wenn Sie eine App oder irgendetwas entwerfen, oder vielleicht Web-Design für WordPress für unsere Webseite, eine Landingpage. Versuchen Sie, SVG-Symbole so viel wie möglich zu verwenden. Sie können die Seitengröße wirklich reduzieren. Sie können animiert werden. Sie können sehr scharfe Winkel haben und alles, sie werden nicht auf Netzhautgeräten pixelisiert werden oder selbst wenn Sie es auf einem iMac oder 27 Zoll betrachten, werden sie wirklich schön aussehen. Hier geht es um SVGs, SVG-Animationen mit SVG-Symbolen. Hier geht es um SVGs und SVG-Animationen, alles, was Sie mich fragen müssen, Sie können mich in den Fragen stellen, sobald ich mehr Updates bekomme oder diesen Kurs aktualisieren möchte, Ich werde weitere Vorträge hinzufügen. Bis dahin versuche, meine Facebook-Seite beizutreten und auch meinen YouTube-Kanal zu abonnieren, kümmere dich und bis bald. 63. Stilanleitung in 2020 mit Figma: Ich habe diese Klasse vor fast drei Jahren geschaffen. Jetzt, seitdem hat sich viel verändert und viele Leute verwenden sie Figma und Adobe XD und Sketch. Dies sind die neuesten Tools für Webdesign und User Interface Design. Ich habe separate Kurse für Figma-Tool und Adobe XD-Tool. Hier werde ich Ihnen sagen, wie Sie verschiedene Plugins verwenden können, wie Sie verschiedene Komponenten verwenden können, wie Sie Ihre US-Style-Guides mit Figma und Adobe XD erstellen können. Lasst uns anfangen. Jetzt habe ich meine Figma schon geöffnet. Dies ist mein letztes Projekt und Sie können sehen, hier ist mein Design. Ich habe eigentlich drei Seiten. Lassen Sie mich rauszoomen. Lassen Sie mich Ihnen zeigen, wie ich meine Dateien organisiere und meine verschiedenen Prototypen und alles hier baue . Wann immer ich entwerfe, entwerfe ich meistens die erste Seite, zum Beispiel diese Zielseite, und beginne dann mit der Erstellung von Komponenten. Komponenten ist eigentlich der wiederverwendbare Teil, den wir in Photoshop, Smart Objects oder Dinge wie diese diskutiert . Aber ich denke, Photoshop ist in diesen Tagen kein gutes Werkzeug für Web-Design. Vielleicht können Sie sie für ein einzelnes Landing Page-Design verwenden, aber nicht für Website, wo wir drei oder vier Seiten haben. Wann immer ich entwerfe, habe ich normalerweise meine Designdateien wie diese. In diesem ganzen Canvas hier drüben habe ich mehrere Kunsttafeln erstellt. Wir haben Tablet-Art-Boards, wir haben mobile Version Art-Boards, und wir haben hier auf der rechten Seite Desktop-Art-Boards. Jetzt können Sie sehen, wann immer ich es schaffen muss, ich verwalte meine Styleguides hier drüben. Ich erstelle verschiedene Komponenten, wie Sie hier wiederverwendbare Komponenten sehen können. Wir haben diese ListBig Tasten, und dann haben wir zwei Tasten. Lassen Sie mich es Ihnen zeigen, ein bisschen heranzoomen. Hier sind meine Knöpfe. Hier ist ein Listenelement, hier sind meine Art Formularelemente. Dies sind ein paar weitere Komponenten hier drüben, größere Komponenten. Hier habe ich dieses Logo und ich denke, es ist ganze Menüleiste hier drüben zusammen mit Logo. Hier ist meine Farbskalen. Ich habe tatsächlich ein Online-Tool verwendet, um diese Farbskalen zu erstellen. Aber wenn Sie eine Farbskala wie diese in Figma erstellen möchten, gibt es ein Plugin. Lassen Sie mich es Ihnen zeigen. Wenn ich zu „Suchen“ gehe, rufen wir den Farbskalengenerator an. Wir haben ein Plugin namens Farbskalen Generator, und wenn Sie auf eine beliebige Farbe klicken, zum Beispiel, lassen Sie mich ein weiteres Rechteck hier erstellen. Lassen Sie uns dieses Rechteck erstellen und eine beliebige Farbe wählen. Zum Beispiel werde ich dieses auswählen. Ich möchte eine Farbskala, die aus diesem Rechteck hier generiert wird. Dies ist meine mittlere Farbe, oder Sie können Startpunkt sagen. Jetzt werde ich mein Plugin namens Farbskala Generator verwenden. Sie können die Schritte auswählen, zum Beispiel 6, 10, 8, also werde ich hier 8 klicken. Sie können sehen, dass ich alle meine Farben hier drüben habe, und sie wurden benannt, wie Sie hier sehen können, Rechteck 15/10, 20, 30. Dies sind verschiedene Intensitäten von helleren bis dunkleren Farbtönen. So werde ich mein Farbschema auf meinem Styleguide hier aufbauen. Dies ist eine andere Seite, ich benutze eine separate Seite. Für meinen Styleguide kannst du hier drüben sehen, so dass ich leicht mithalten oder etwas ändern kann, wenn ich will. Alle meine Komponenten, alle meine Stile, alle meine Knöpfe, meine Liste, meine Farben, sie werden hier drüben sein. Wann immer Sie in Figma entwerfen, wenn Sie sicher sind, dass Sie nicht ändern müssen, haben Sie dies entworfen, erstellen Sie einfach eine Komponente. Ähnlich für diese Texte werden wir Textstile erstellen. Ich habe das in meiner Figma-Klasse besprochen, und Sie können hier sehen, dass ich diesen Stil geschaffen habe. Wenn ich für diesen einen Stil erstellen möchte, zum Beispiel diesen Text, kann ich hier drüben klicken und diesen „Plus“ -Button drücken und hier einen neuen Stil erstellen. In ähnlicher Weise können Sie hier sehen, ich habe sie Desktop-Schrägstrich oder Tablet-Schrägstrich genannt. Wir haben verschiedene Überschriften hier drüben. Sie können Überschrift 1 sehen. In der Rubrik 1 habe ich Desktop, Tablet, Handy. Dies sind drei verschiedene Stile für meinen Text. In ähnlicher Weise möchte ich Ihnen meinen Workflow in Adobe XD zeigen. Jetzt in Adobe XD können Sie sehen, dass dies meine eigene Website ist, mein eigenes Projekt. Was ich hier mache, ist, dass ich einen Style Guide wie diesen erstelle. Ich habe hier getrennte Kunsttafeln, zum Beispiel diese Farben. Dann haben wir Type-Skala. Dann haben wir Textstile. Hier haben wir Typ Skala. Zusammen mit diesem können Sie hier sehen, das sind verschiedene Stile. Zum Beispiel ist dies ein Link. Dies ist wieder ein Link. Dies ist ein Zitat Stil. Auch hier haben wir das gleiche auf dem dunklen Hintergrund. Dann habe ich Button-Formulare und einige Icons hier drüben, die Sie hier sehen können. Auch hier habe ich Komponenten erstellt. Sie können hier sehen, sind einige weitere Komponenten. Dies sind alle Master-Komponenten. Du kannst hier drüben sehen, lass mich rauszoomen und dir meinen ganzen Style Guide hier drüben zeigen. Mein Styleguide ist in verschiedene Abschnitte: Farben, Typ Skala, dann haben wir Schaltflächen, Formularelemente. Dann habe ich alle Illustrationen mit unterschiedlichen Hintergründen. Das ist also alles. Wenn Sie Ihren Styleguide erstellen, stellen Sie sicher, dass Sie zuerst mindestens eine Ihrer Seite dann weiterhin Komponenten erstellen und diese Komponenten werden sich in Ihren Assets befinden. Ich habe all diese Farben hinzugefügt, die ich hier in meinem Vermögen verwendet habe. Wenn Sie sie verschieben möchten, können Sie sie bewegen. Wie Sie sehen können, können Sie ziehen und bewegen Sie sich so. Zum Beispiel ist dies die Orange, also werde ich es in den orangefarbenen Abschnitt hier drüben verschieben. Wenn Sie diese grün oder grau haben, versuchen Sie, sie richtig zu benennen. Vielleicht können Sie sie nach ihrer Funktion benennen. Zum Beispiel wie diese, das ist meine sekundäre Farbe, ich kann es so nennen. Das ist meine Primärfarbe, nennen wir es Primärfarbe. Du kannst so etwas tun. Es ist einfacher für Sie, sich zu erinnern. Lassen Sie mich Ihnen mein Design zeigen. Das ist das Design. Lassen Sie uns das verstecken. Das ist das Design. Sie können sehen, dies ist meine Schaltfläche Ich habe bereits eine Komponente für diese Schaltfläche erstellt. Dann haben wir viele Textstile hier drüben. Das sind meine Farben. Sie können den Hintergrund und den Bildschirm oben sehen. Das sind eigentlich 100 Prozent. So verwende ich tatsächlich Styleguides in meinem Design. Ich habe Mitarbeiter separate Art Boards gefüllt mit diesen Farben, Typ Skala, Tasten und alle verschiedenen Komponenten, so dass ich immer wieder verwenden muss einschließlich meiner Illustrationen hier drüben. Ich kann die Illustrationen einfach per Drag & Drop ablegen. Sie können sie auch in Ihren Assets hier drüben hinzufügen, wie Sie hier sehen können. Hier habe ich verschiedene Knöpfe hier drüben. Dies sind wenige Komponenten wie diese Kurskomponente. Dann haben wir verschiedene Knöpfe. Lassen Sie mich hineinzoomen und es Ihnen zeigen. Sie können sehen, dies ist die Schaltfläche, und wir haben verschiedene Textfelder. Dies ist wirklich einfach in diesen neuen UI-Design-Tools, die Figma sind, dann haben wir Adobe XD, dann haben wir Sketch. Erstellen Sie einfach Komponenten, die wiederverwendet werden. Sie müssen Ihre Textstile für verschiedene Textmaßstäbe auf weißen und dunklen Hintergründen erstellen , und das ist alles. Sie müssen all diese haben und Sie können sie immer wieder in Ihren Entwürfen verwenden. Ich hoffe, das wird Sie auffüllen. Dieser Kurs wurde vor drei oder vier Jahren aufgezeichnet. Für mich denke ich, es wurde alt. Das ist meine Antwort. Ich habe noch ein paar Lektionen für euch aufgezeichnet. Ich hoffe, Sie werden diese genießen und wenn Sie Fragen haben, können Sie mich fragen. Vergessen Sie es, dass Sie Ihre Styleguide in Photoshop oder PSD-Datei erstellen, erstellen Sie in Adobe XD, Figma, oder ein beliebiges Werkzeug. Folgen Sie diesem Kurs und zeigen Sie mir, was Sie haben. Wir werden uns in einer anderen Lektion treffen. Bis dahin, kümmert euch und tschüss. 64. Handoff in Figma und Adobe XD 2020: In diesem Video werde ich Ihnen zeigen, wie ich tatsächlich mit Figma und Adobe XD übergebe. Nun, in meinen vorherigen Videos, meinen alten Videos, habe ich dir von Zeplin, Avocode und all diesen verschiedenen Plug-Ins erzählt , um dein Design an deine Programmierer zu übergeben. In diesem Video werde ich Ihnen zeigen, wie ich es mit Figma und Adobe XD mache. Dies sind die neuesten Tools, also aktualisiere ich neue Videos und füge diesem Kurs neue Videos hinzu. Ich hoffe, Sie werden das genießen. Lassen Sie uns beginnen und zeigen Ihnen meinen Prozess, wie wir Zeplin verwenden und wie wir Figma verwenden, um unseren Entwicklern Code oder Spezifikationen zu geben. Lasst uns jetzt anfangen. Wenn Sie nun in Figma sind, wie Sie hier sehen können, müssen Sie keine Tools von Drittanbietern verwenden, um Ihren Code anzuzeigen oder Ihren Entwicklern Ihre Spezifikationen zu geben. Ihre Entwickler da draußen, müssen Sie sie zu Ihrem Projekt einladen. Zum Beispiel, wie dieser, können Sie hier rüber gehen. Mal sehen, zum Beispiel, ich habe hier drüben einen anderen Designer. Hier drüben, ähnlich können Sie, hier haben wir es. Ich denke, ich habe geteilt, Sie können es mit einer anderen Person teilen, und Sie können einfach schreiben Sie die E-Mail Ihres Coder kopieren Sie den Link und sie können die Spezifikationen sehen. Sie müssen nur tun, ist, dass sie zu diesem Inspect Tab hier drüben gehen müssen. Wenn Sie hier klicken, können Sie sehen, in der Registerkarte Inspector haben wir alle Eigenschaften: Höhe, oben, links. Die Platzierung dieser Überschrift hier drüben. Dann haben wir den Inhalt, sie können den Inhalt von hier kopieren. Dann haben wir diese Typografie. Am unteren Rand können Sie sehen, wir haben den CSS-Code. Sie können es auch wieder auf iOS und Android übersetzen. Dies ist eine wirklich coole Funktion. Ich denke, Figma ist eigentlich Zukunftsbeweis. Wenn ich jemandem sage, dass du zu einem Werkzeug wechseln musst , das für die nächsten Generationen geschaffen wird, würde ich sagen, dass es Figma ist. Ich habe einen separaten Kurs über Figma. Wenn Sie interessiert sind, können Sie das nehmen. Sie können das einfach kopieren. Versuchen wir, das hier drüben zu kopieren und zu sehen, ob es gewesen ist, ja. Wenn Sie versuchen, hier drüben zu kopieren, können Sie sehen, dass es tatsächlich einen ganzen Stil hier so erstellt. Das ist wirklich nett. Es hat alles, aber nicht die Farbe hier drüben. Farbe fehlt. Ich glaube, die Farbe ist hier drüben. Wenn wir hier runtergehen, denke ich, das ist der ganze Code, wo wir Farbe haben und alles. Lassen Sie uns versuchen, das zu kopieren, und fügen Sie es hier drüben ein. Wir brauchen keine Position und alles hier drüben, wir brauchen nur das und es hat alles. Das ist besser, das hat Farbe damit. So können Ihre Coder den CSS-Abschnitt von hier kopieren. Als nächstes reden wir über die Symbole hier drüben. Sie können sehen, ich habe ein paar Symbole hier drüben, wie dieses Telefon, dieses Dokument hier drüben. Ich habe versucht, das SVG-Format zu verwenden, damit ich sie einfach meinem Entwickler geben kann. Ich gebe ihnen all diese Symbole im 24-by-24-Pixelformat. Im SVG-Format können sie sie hier benutzen. Ähnlich für all diese Bilder habe ich sie extrahiert. Sie können sehen, ob Sie zu Design gehen, und wenn Sie hier zu Exporten gehen, können Sie sie in JPG, PNG, SVD oder PDF exportieren. Ich habe all diese Logos verwendet und exportiert und an meine Entwickler weitergegeben. Es ist einfacher für sie, diese Bilder zu verwenden. Setzen Sie keinen Druck auf Ihre Entwickler aus. Du musst sie erleichtern. Sie müssen alle diese Bilder extrahieren und sie ihnen geben, damit sie dies leicht codieren können. Sie können hier sehen, haben wir einige weitere illustrative Symbol, dieses Logo. Das ist wieder, ich werde exportieren. Ich habe es bereits in einem SVG-Format gegeben. Sie können diese auch direkt aus Adobe Illustrator in das SVG-Format exportieren. So verwende ich diesen Inspect-Reiter hier drüben , um meinen Programmierer alles zu geben, was sie brauchen. Normalerweise teile ich dieses Dokument mit ihnen oder lade sie zu diesem Projekt ein. Das ist alles, was du brauchst. Klicken Sie einfach auf „Teilen“. Sie können hier drüben sehen, hier ist mein Entwickler, Tayyab Hanif. Das sind meine Klienten hier drüben, Manny Vetti, und einige andere Teammitglieder. Dies ist ein Projekt für sie. Ich habe dieses Projekt mit diesen Programmierer und diesen Kunden gemacht. Das ist mein Workflow in Figma. Gehen wir jetzt zu Adobe XD. In Adobe XD verwende ich Zeplin. Zeplin ist ein großartiges Tool, um Ihre Spezifikationen mit Ihren Entwicklern zu teilen. Ein anderer Weg ist, wenn Sie auf ein Kunstboard klicken und Sie hier rüber gehen können, wo ist der Share? Gehen Sie auf die Registerkarte Teilen, und Sie können es wie vielleicht Landing Page, so etwas wie folgt nennen. In den Einstellungen werden Sie auf diese Entwicklung klicken, also Export for Web. Herunterladbare Assets, wenn Sie klicken möchten, können sie Assets von hier herunterladen. Aber ich denke, ich empfehle das nicht. Jeder mit dem Link, also wenn Sie diesen Link erstellen, einen Ihrer Coder, Ihre Entwickler, können sie diesen Link verwenden, um die Entwicklungsspezifikationen zu sehen ohne irgendwelche Plug-ins oder Drittanbieter wie Zeplin zu verwenden. Dies ist ein Weg, zum Beispiel, wie dieser. Ich werde es jetzt öffnen. Mal sehen, was wir hier haben. Adobe verbessert dieses Tool ständig. Mal sehen, was wir hier haben. Sie müssen auf diesen Code klicken hier auf der rechten Seite. Sie können sehen, wir haben alle Farben, wir haben alle verschiedenen Stile verwendet. Sie können auch auf diesen Code klicken. Das sind eigentlich meine Farbstile, oder Sie können meinen Styleguide sagen. Sie müssen hier doppelklicken. Sobald Sie auf ein Element doppelklicken, können Sie sehen, dass dies tatsächlich der Code ist und tatsächlich Variablen für Entwickler verwendet. Man muss sie sehr richtig benennen. Wie Sie hier sehen können, Schriftart unbenannt, Schriftart, normal, normal, var. Ich mag diesen Codierungsstil nicht. Ich denke, das ist wirklich verwirrend für viele Entwickler. Der andere Weg ist, mal sehen, wie, was ist der andere Weg? der Registerkarte Design Wählen Sie aufder Registerkarte Designdiese Grafikkarte aus und gehen Sie zu diesem Export. Ich habe Zeplin bereits installiert. Klicken Sie auf Zeplin, und es wird Ihnen den Zeplin-Plugin-Bildschirm zeigen, wie Sie hier sehen können. Es zeigt Ihnen die Auswahl, was auch immer das Projekt Sie ausgewählt und exportiert haben. Sobald du es exportiert hast, zeige ich dir meinen Zeplin hier drüben. Sobald Sie exportiert haben, können Sie sehen, alle diese Bildschirme sind hier in diesem Zeplin-Dashboard. Wenn ich darauf klicke, und wenn ich auf dieses klicke, wird es geladen. Wenn ich auf dieses klicke, können Sie sehen, dass dies meine Farben sind, sind meine Überschriftenformate, und das ist der CSS-Code. Es ist viel besser. Es ist ein direkter Code. Sie können hier drüben sehen, sehr nett, sehr einfach. Dennoch verwenden sie var navy. Es ist einfacher, weil ich hier leicht Farben hinzufügen kann. Zum Beispiel dieses, können Sie sehen, es wurde hinzugefügt. Sie können klicken und zum Styleguide gehen. Sie können sehen, dass ich den Styleguide bereits erstellt habe. Es hat meine Textilien, es hat meine Abstände und Layout. Ich habe keine Komponenten verwendet. Ich habe keine Komponenten exportiert. Verknüpfen Sie mit dem Styleguide, wenn Sie einen anderen bestimmten Styleguide für Ihre separate Entwurfsdatei erstellt haben . Sie können es hier verlinken. Ich würde einfach lieber gehen und diese alle Farbpaletten und Textstilkataloge erstellen. Die sind genug für mich. Ich werde all die verschiedenen Assets, das Symbol und alles separat meinen Entwicklern geben. In ähnlicher Weise können Sie hier drüben sehen, lassen Sie uns das Gitter einschalten. Sie können sehen, es hat eine sehr schöne Möglichkeit, das Gitter ein- und auszuschalten, können Sie sehen. Wenn Sie mithilfe von Rastern erstellt haben, ist dies eine nette Option. Ihr Entwickler kann sehen, wie viele Raster zugewiesen wurden. Zum Beispiel, dieser Kontinent hier drüben, 1, 2, 3, 4, 5, 6 Gitter hier drüben. Es ist fast in den 50 Prozent hier drüben. So verwende und exportiere ich normalerweise meine Designs. Ich benutze Zeplin mit Adobe XD und mit Figma. Ich muss Zeplin nicht verwenden, obwohl Sie Zeplin als Plugin hier installieren können. Wenn Sie Zeplin hier installieren wollen, können Sie zu Community gehen, Plugins, und Sie können Zeplin hier finden. Ein Plugin, es wurde bereits installiert. Wenn Sie etwas auf Zeplin hochladen möchten, können Sie das auch mit Figma verwenden. Aber ich würde lieber zu dieser Registerkarte „Inspect“ gehen. Es ist wirklich praktisch, es ist wirklich einfach. Zum Beispiel können Sie sehen, dass ich mein CSS einfach mit einem einfachen Klick anzeigen kann. Das ist alles. Das ist mein neuer Prozess. Dies ist meine neue Übergabe-Methode an Entwickler, die Zeplin und Figma verwenden. Ich hoffe, Sie haben diese Lektion genossen. Wenn Sie Fragen haben, können Sie mich immer fragen. Triff dich in einer anderen Lektion. Bis dahin, dann kümmern Sie sich. Tschüss. 65. Prototyping mit Adobe XD und Figma 2020: In diesem Video werde ich darüber sprechen, wie Sie Ihre Websites oder Webdesign-Ideen mit Figma oder Adobe XD Prototypen erstellen können. Also werde ich Ihnen beide Werkzeuge zeigen, die Sie verwenden können, Catch oder irgendetwas anderes. In diesem Kurs geht es um den Prozess und wie Sie verschiedene Dinge tun können, oder Ihre Prototypen zeigen oder Prototypen für Ihre Entwickler oder Ihre Kunden darstellen können. Nun, wenn Sie etwas fortgeschrittenes Prototyping wollen, kann ich Ihnen auch ein Werkzeug zeigen, das wirklich fortgeschritten ist. Wenn du dafür gehen willst, kannst du dafür gehen. Aber ich denke für Webdesign, Figma-Prototyping-Fähigkeiten und Adobe XD-Prototyping-Fähigkeiten sind mehr als genug. Lassen Sie uns beginnen und sehen, wie ich tatsächlich verschiedene Prototypen verwende und wie ich tatsächlich in Figma und Adobe XD erstelle. Wenn Sie sich diese Figma-Akten ansehen, können Sie hier drüben sehen. Wenn wir zu diesem Prototyp Registerkarten gehen müssen, um zu sehen wie alle diese verschiedenen Bildschirme verknüpft wurden. Ich habe diesen Prototyp meinem Entwickler gezeigt. Diese Buttons gehen tatsächlich zu dieser Form hier drüben. Lassen Sie mich es Ihnen wirklich zeigen. Klicken Sie einfach auf das Element, das Sie haben und verlinken Sie auf die gewünschte Seite. Dann hier drüben können Sie auf die Interaktion klicken, die Sie beim Klicken, beim Ziehen, beim Drücken oder all diese Dinge wollen. In der Animation wählen wir „Auflösen“ oder „Smart Animate“ oder „Instant“. Sie können gut sehen, hier haben wir zwei verschiedene Interaktionen, Hover und klicken Sie auf „Hover“, es wird etwas anderes verhalten, auf Klick wird es gehen, um Textform in einem Augenblick zu navigieren. Das ist also alles. Wenn Sie den Prototyp sehen möchten, können Sie den Prototyp mit Ihren Kunden teilen, Ihren Entwicklern, weil sie ihn wirklich brauchen werden. Sie wissen nicht, wie sie das tatsächlich codieren sollen. Sie können zum Beispiel diese Hover-Animation sehen, dies wurde nur mit Figma gemacht. Ähnlich für diese Schaltfläche können Sie hier sehen. In ähnlicher Weise, wenn wir auf diese Schaltfläche klicken, denke ich, es war dieser. Hier ist eine weitere dieser Schaltflächen. Diese werden zu einer dunkleren Farbe verschmelzen. Dies ist eine einfache Hover-Animation. Ähnlich, wenn Sie hier klicken, können Sie sehen, dass dies erscheint und wenn Sie hier klicken, geht es zurück. Dies ist eine andere, die ich benutze, um es meinen Entwicklern zu zeigen. Ähnlich können Sie in Adobe XD dasselbe mit der Registerkarte Prototyp hier tun. Sie können versuchen, verschiedene Bildschirme zu verknüpfen, zum Beispiel wie diesen. Das wird mein Home-Bildschirm sein. Also werde ich hier rüber klicken. Für diese Navigation oben hier, wenn ich auf diese „Kommende Kurse“ klicke oder vielleicht Kurse durchsuchen, kann ich es hier auf Typ, Übergang verlinken. Ich denke, ich werde mit diesem einfachen Übergang gehen. Lassen Sie uns Kurse Seite, Easy Out, Easy In, drei Sekunden verwenden. Lassen Sie mich Ihnen jetzt den Prototyp zeigen. Wenn ich auf „Kurse durchsuchen“ klicke, können Sie sehen, dass diese Seite zu diesem Durchsuchen Kurse geladen wurde. Warum dieser Bereich ausgeschnitten ist, bin ich mir nicht sicher. Hier ist eine einfache Technik, um einen einfachen Prototyp zu erstellen. Sie können das Gleiche tun, wenn Sie den Mauszeiger hier in Adobe XD bewegen. Sie haben unterschiedliche Zustände. Wenn ich zu „Design“ gehe und klicke. Eigentlich glaube ich, ich habe es bereits Prototypen. Wenn Sie den Mauszeiger darauf zeigen, können Sie sehen, dass dies der Effekt ist, den ich meinem Entwickler tatsächlich gezeigt habe, dass dies ist, wie Sie diese Schaltfläche animieren werden. Es ist sehr einfach. Sie müssen nur hier rüber klicken. Sie können sehen, wir haben Tap und Hover. Auf Hover wählen Sie den „Hover State“ aus. Sie können hier sehen, Hover State wurde ausgewählt. Wenn Sie zu „Design“ gehen, können Sie sehen, dass dies eine Komponente ist. Wenn Sie jemals eine Komponente erstellen, können Sie verschiedene Statussoftware erstellen. Sie können weitere Zustände erstellen. Zum Beispiel, Deaktivierter Staat oder so etwas. Wenn Sie es mit Prototyp animieren möchten, können Sie hier zwischen diesen Zuständen wechseln. Sie werden die Farben und all die verschiedenen Dinge für diese deaktiviert ändern. Zum Beispiel ist dies meine Behinderte. Wenn ich hierher gehe und versuche, diesen Standardstatus beim Hover zu verwenden, wird das Ziel deaktiviert. Also, jetzt habe ich das deaktiviert. Lassen Sie mich sehen. Sie können jetzt sehen, ob ich auf diesem schwebe, es ist eine deaktivierte Schaltfläche. So werden Sie Ihren Entwicklern zeigen, dass dies mein grundlegender Prototyp ist. So wird der gesamte Fluss der Website funktionieren und Dinge wie diese. Das ist alles über die Verwendung von Adobe XD und Figma für Ihre Website Prototyping, sehr einfach, sehr einfach. Sie können sogar Bildlaufpositionen beibehalten. Sie können verschiedene Navigationen haben, die an ihrer Position bleiben. Alles andere wird sich bewegen. Dies sind die Fähigkeiten dieser Tools in diesen Tagen. Also dachte ich, dass ich meine Lektion aktualisieren sollte. Ich hoffe, Sie haben etwas Neues gelernt und genossen. Wenn Sie Fragen haben, die Sie mir stellen müssen, werden wir uns in einer anderen Lektion treffen. Bis dahin, kümmert euch und tschüss.