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,