Marken- und Webdesign: Erstelle eine visuelle Sprache von Grund auf

1. Einführung: Hallo, wie läuft's? Mein Name ist Tariq Osama, Visual Designer und mein Regisseur aus Barcelona. Meistens arbeite ich über digitale und interaktive Projekte und auch Markendesign. Ich dachte, das wäre es, was wir heute tun könnten. Wenn Sie ein Student sind, fragen Sie sich vielleicht, auf wen die Klasse ausgerichtet ist? Ich würde nicht sagen, dass es für die totalen Anfänger ist. Ich werde eine Menge Inhalt abdecken und ich werde nicht in der Lage sein, alles in der Tiefe zu decken. Es ist eher auf junge Designprofis und Art Directors ausgerichtet , die bereit sind, neue Tricks und Inspirationen zu bekommen. Wenn es um die Software geht, werde ich hauptsächlich Photoshop, Illustrator und After Effects verwenden , weil wir auch das Logo animieren werden. Ich empfehle Ihnen, Ihre Adobe CC bereit zu haben. Ja, was bis zum Ende der Klasse zu erwarten ist, sollten Sie wahrscheinlich in der Lage sein, Ihr eigenes geometrisches Logo zu erstellen, wird das auf unserem Gitter tun. Gleichzeitig sollten Sie eine Reihe neuer, frischer Ideen bekommen, wie Sie ein Webprojekt mit modernen Web-Technologien wie WebGL angehen können. Lassen Sie mich über den Klienten sprechen, mit dem ich arbeiten werde. Ihr Name ist Paid Toys. Es ist eine natürliche Marke aus Barcelona und sie entwerfen diese Art von Jungs. Sehen Sie, sie haben eine Reihe von Designs, die sie auf einer 3D-Software erstellen. Das Ziel ist, dass sie sie verkaufen wollen, damit die Kunden sie tatsächlich anpassen können , so dass sie sie leer wie dieses verkaufen. Dann sollte der Kunde in der Lage sein, sie nach Belieben zu malen. Genau wie in diesem Beispiel. Oder sogar dieser andere Kerl hier. Es ist ein ziemlich cooles Projekt, also hoffe ich, Sie fühlen sich genauso und sind bereit, mir in dieser Klasse beizutreten. Lasst uns dafür gehen. 2. Logo | Kunstrichtung und Skizze: Lasst uns diese Lektionen beginnen. Ich werde mit dem Logo beginnen. Zunächst einmal würde ich Ihnen empfehlen, mit Ihrem Kunden darüber zu sprechen, was er im Sinn hat. Das ist äußerst wichtig. Sie wollen nicht anfangen, etwas zu entwerfen, das brillant sein könnte, aber es hat nichts mit dem zu tun, was er oder sie im Sinn hat. Das ist also ein wichtiger erster Schritt. Das habe ich schon getan. Die einzige Voraussetzung war, dass das Logo irgendwie japanisch aussieht. Japan ist, wo das Wort der [unhörbaren] Bewegungen begann, also war das die Verbindung, die er wollte. Es war ein ziemlich offener Auftrag für mich, was mir sehr gefallen hat. Also habe ich einige Ideen auf Mood Board zusammengestellt, die ich gerade durchreden werde. Hey, also lass mich dir das Mood Board zeigen, das ich dem Klienten bereits gezeigt habe. Was ich hier versuche, ist irgendwie ein Logo zu kreieren, das japanisch aussieht. Das sieht fast wie japanische Kanji aus. Dann werde ich diese geometrischen Formen und diese Farbe verwenden, ich spreche über das Rot hier, das von der japanischen Flagge kommt. Es wird Sie fast sofort nach Japan bringen. Die Idee kam eigentlich von dem einzigartigen Logo. Was ich hier mag, ist, dass es in einem Quadrat geformt ist, fast wie ein Etikett aussieht und das ist etwas, was ich denke, dass ich Lage sein sollte, auf das neue Design zu replizieren. Wenige andere Dinge, die ich von diesen Bildern gemocht habe, zum Beispiel, diese, die scharfen Kanten und wie minimal es ist, macht es meiner Meinung nach sehr modern. Dann sehen wir hier ein paar schmeichelhafte Stücke. Das hier oben links, ich mag sehr, weil es immer noch sehr lesbar ist. Die auf der rechten Seite ist nicht so sehr und das ist etwas, was wir brauchen, um sehr vorsichtig auf unsere Logos zu sein , da es kein Schriftstück ist und es unsere Marke sein wird, also muss es super zuverlässig sein. Hey, also fing ich an zu skizzieren, wie dieses Logo aussehen könnte. Ich benutze einen Checker-Notizblock, der sehr praktisch ist, damit ich bereits ein Raster auf meiner Skizze verwenden kann. Ich benutze auch einen Marker anstelle von Bleistift, so dass Sie tatsächlich sehen, was ich entwerfe. Das ist super rau, ich mache es einfach wieder, damit du meine Idee verstehst. Im Grunde möchte ich irgendwie die Zahlbuchstaben p, e und i verwenden und sie innerhalb eines Quadrats platzieren, damit es wie ein japanisches Kanji aussieht. Ich fange an, wirklich rau. Nur mit dem P, so etwas. Ich werde das P noch nicht schließen. Sie werden später sehen, warum. Ich werde diesen Raum unter dem P verwenden, um die anderen beiden Zeichen zu platzieren. Das wäre das E und das I auf seiner rechten Seite. Nun lassen Sie mich diese P. mehr oder weniger das ist die Idee, die ich über die Erzeugung dieses Quadrates gesprochen habe, das wie ein Kanji aus der Ferne aussieht. Wir haben bereits unser Logo. Wahrscheinlich werde ich es später tun, wenn ich digitalisiere, aber wir müssen schreiben, was diese Marke erlaubt. So etwas wie, sie sind Spielzeug direkt unten. Ja, ich denke, das wird funktionieren. Also lass mich zurück zu meinem Computer gehen. [unhörbar] Leute. 3. Logo | Digitalisierung und Variationen: Lassen Sie uns dieses Logo digitalisieren, ich werde es in Illustrator tun, also lassen Sie uns ein neues Dokument erstellen. Zum Beispiel 600 pro 600 alles, was Sie sich wohl fühlen, mit, das sollte RGB sein. Ich werde es öffnen. Hier, was wir wahrscheinlich zuerst tun sollten, ist, zu den Präferenzen und zu den Führungen und Raster zu gehen und Ihr Raster einzurichten, damit Sie es anschnappen und das geometrische Logo erstellen können, über das wir gesprochen haben. Ich habe eine Rasterlinie alle 100 Pixel mit Unterteilungen von acht eingefügt, die wahrscheinlich auch für Sie funktionieren sollten. Ich klicke auf „On“ und dann muss dies angezeigt werden, also zeigen Sie Raster, Sie können Verknüpfungen zu diesem verwenden, empfehle ich, die Verknüpfungen so viel wie möglich zu lernen. Dann müssen Sie gehen, um den Fang am Raster anzuzeigen. Dies ist sehr wichtig, also wird unabhängig von der Form, die Sie zeichnen, durch Ihr Raster gefangen, genau wie diese. Sieh mal, was ich meine. Wir haben das Dokument alles eingerichtet, wir können anfangen, das skizzierte mit ihm vor einer Weile zu reproduzieren. Ich fange wieder mit B an. So und dann können wir für das E gehen, also mehr oder weniger, das wird das sein, was wir vorher gemacht haben. Dinge erweisen sich als zu breit, zu viele Abstände hier, also ziehe ich einfach nach unten. Das sieht schon gut aus, ganz so. Vielleicht ist es zu horizontal, so etwas, ich denke, es wird schöner funktionieren. Gut, also haben wir bereits das PEI erstellt, das P-E-I. Nun, wie ich bereits erwähnt während des Moodboards, wäre es schön, es irgendwie in einem Etikett zu platzieren, so werde ich ein Quadrat um es zeichnen, so etwas, das ich schneiden und auf die Rückseite einfügen werde. Ich werde die Farben der PEI ändern. So etwas, also jetzt ist es eingebettet. Ich denke, ich brauche wahrscheinlich mehr Platz zwischen den Zeichen und dem und dem Rand des Labels. So etwas sollte funktionieren. Ich werde hier etwas Platz machen, dass unten, um die Kunstspielzeuge zu platzieren , wie wir es vorher getan haben. Ich werde hier Art Toys eintippen. Sie können jede Art wählen, die Sie mögen, Ich denke, ich werde für die gehen [unhörbar]. Vielleicht ist die GT America, die ich habe eine Menge Gewicht, so kann ich sehen, was am besten funktioniert. Ich denke, das erweiterte Fett wäre großartig dafür. Ich werde das Tracking öffnen. So etwas vielleicht, denke ich, das sollte. Vielleicht können Sie es mit weniger Tracking arbeiten, so dass es auf die Gitter passt. Sagen Sie so etwas. Ich glaube, das funktioniert. Dann über Farbe nachzudenken, haben wir vor dem roten erwähnt, also werde ich dieses rot drehen, ich habe vor einer Weile Rotton ausgewählt. Mal sehen, ob ich es zurückziehen kann. Es ist nicht mehr hier. Na ja, nichts dagegen. Ich werde nur ein Rot verwenden, wie nur für die Übung. Ich mache das ziemlich schnell. Ich werde unten an sekundärem Rechteck für die Wahl arbeiten, also werde ich kopieren, einfügen auf dieses. Dieses werde ich schwarz machen, so dass die Kunstwahl im Inneren weiß sein muss. Das fängt an zu sehen, als würden wir irgendwo hinkommen. Ich habe zu viel Platz direkt unter den Charakteren, also werde ich das beheben. Ich glaube eigentlich, ich habe zu viel Platz an den Rändern. Jedenfalls, also sollte ich vielleicht, gut gemacht. Ich werde den Typ erweitern, weil ich denke, dass das bereits funktioniert. Jetzt werde ich mich darauf konzentrieren, den Abstand so zu fixieren. Ich glaube, das ist unser Logo. Vielleicht sieht es für mich ein wenig flach aus, also werde ich versuchen, es in einem flachen Schatten direkt hinter dem P-E-I zu platzieren und zu sehen, was passiert. Sie ziehen die vereinbarte Verwendung des Stiftwerkzeugs in etwa diesem Fall zurück , um die Form zu erstellen. Jetzt ziehe ich es nach unten oder hoffe, dass ich das richtig gemacht habe, denke ich. Lassen Sie mich zuerst am Rot arbeiten, damit es etwas dunkler ist. So etwas wird funktionieren. Jetzt wähle ich beide Formen und vorbei unten, so, ich denke, es könnte sogar etwas dunkler sein, etwas wie dieses beginnt, wie ein schönes Logo aussehen. Lassen Sie mich ein wenig einstimmen, aber ich denke, damit sind wir gut, zum nächsten Teil der Lektion zu gehen. Nun, da wir diese erste Herangehensweise an unser Logo haben, gibt es einige Dinge, die wir berücksichtigen müssen, einige Variationen davon. Wie verhält sich das für den Druck, für das Online? Wie wird es nur für eine Tinte auf positive, negative funktionieren, mehr Formate als eine Menge Dinge zu berücksichtigen , wenn es um Branding geht. Auch heutzutage bekommen wir immer mehr dynamische Identitäten zu sehen , die Teil eines Systems werden, sogar reaktionsschnell, so dass es ein bisschen komplexer, aber definitiv eine Menge Spaß macht. Ich werde jetzt etwas davon erholen. Ich werde dieses Logo ein wenig aufräumen, damit es tatsächlich zum Drucken bereit ist. Zuallererst werde ich es in CMYK konvertieren. Ich kann das aus Dateidokument-Farbmodus, CMYK-Farbe, gut tun , so dass das ein wesentlicher erster Schritt wäre. Dann, was ich tun werde, habe ich diese P-E-I-Zeichen, die tatsächlich durch mehrere Rechtecke ergänzt werden. Ich möchte, dass dies nur einer ist, also werde ich das mit dem Pathfinder vereinen. Dann will ich nicht, dass diese beiden roten Farben aneinander kleben, also werde ich diese kopieren, ich werde dieses Rot teilen, also haben wir nur diese Form und ich werde es wieder einfügen. Jetzt haben wir zwei isolierte Rottöne. Ich werde das gleiche mit diesem Kerl hier machen, ich hier wieder mit dem Pathfinder teilen werde und dann werde ich einfach das Pay-Logo aufheben und es oben setzen. Ich werde es schneiden und es vorne einfügen und dann werde ich das gleiche mit dieser Form hier tun, ich werde es einfach so teilen, siehe. Jetzt ist dieses Logo bereit für den Druck. Lassen Sie mich nun einige der Logo-Variationen angehen, die ich vier Auszahlungswahl gemacht habe. Dies ist das Logo, das Sie bereits gesehen haben, das ist das Standardlogo, und es ist das, das ich den Kunden ermutige, so viel wie er kann zu verwenden. Aber natürlich, wenn Sie diese auf einem sehr dunklen Hintergrund verwenden möchten, verlieren Sie vielleicht diese Blackbox hier. Vielleicht möchten Sie so etwas verwenden, das ist das Negativ-Logo auf einer Tinte. Jeder würde weniger Bedürfnisse in einer Tinte arbeiten, würde ich sagen, sowohl positiv als auch negativ. Möglicherweise möchten Sie Ihrem Kunden Flexibilität bei der Verwendung des Logos in mehreren Anwendungen geben . Vielleicht will er es als Wasserzeichen verwenden, das ist etwas, das tatsächlich besser funktionieren könnte. Logo könnte auch für kleine Formate funktionieren, wie auf sozialen Avatar ist ein Mock up, wie könnte sein Instagram sein. In diesem Fall würden wir die Kunstwahl unter der Bezahlung verlieren, nur weil es viel zu klein wird, um auf der Instagram-Zeitleiste lesbar zu werden, also ist das etwas zu berücksichtigen. Zum Schluss, was ich in der nächsten Lektion abdecken werde, könnten wir sogar dieses Logo animieren, um es wie nur mehr Reichtum zu geben. Das werde ich bei der nächsten Lektion abdecken. Bleib bei mir. 4. Logo | Animation: Gut, also lassen Sie uns dieses Logo animieren. Ich bin immer noch in Illustrator. Was ich zuerst tun werde, ist die Datei für die Animation vorzubereiten. Ich animiere in After Effects. Sie werden sehen, dass in ein bisschen passiert. Zunächst einmal wollte ich, dass diese Zeichen einzeln in verschiedenen Ebenen getrennt werden, das ist, was Sie hier sehen. Ich habe alle p unter einer Farbe, ich habe alle E's unter einer anderen Farbe. Mal sehen, ob ich etwas davon entferne. Dadurch können Sie mehr Vielseitigkeit haben, wenn Sie in After Effects springen, um zu animieren. Lass es uns tun. Ich ziehe in After Effects ein. Ich werde die Datei hochladen, die wir gerade hier gesehen haben. Sie können es als Komposition hochladen, das sollte in diesem Fall besser sein, also lassen Sie mich darauf hineingehen. Hier sehen Sie alle Ebenen. Sie möchten jetzt alle diese Illustrator-Layer in Formebenen konvertieren. Dies gibt Ihnen mehr Vielseitigkeit zu animieren. Sie werden in der Lage sein, einige Plug-Ins zu verwenden, die ich später darüber sprechen werde. Wenn Sie diese Registerkarte tatsächlich tun, sollten Sie in der Lage sein, einige Striche, Farbverläufe zu platzieren , also ist das eigentlich ein Muss hier. Wie werde ich diese in Formebenen umwandeln? Ich wähle sie alle aus, ich mache mit der rechten Maustaste, und dann gehen Sie zu Erstellen, Formen aus Vektorebene erstellen. Sehen Sie, Sie haben alle diese Ebenen dupliziert. Nun, was ich tun werde, ist, die alten Illustrator-Layer einfach so loszuwerden. Ich lösche sie, also habe ich das gleiche, aber als Formebenen. Als nächstes ist das wahrscheinlich ein bisschen zu klein. Diese 100 Prozent ist die Auflösung, die ich an Illustrator gearbeitet habe, also denke ich, dass ich mich wohler fühle, wenn ich es doppelt so groß mache. Um dies zu tun, so dass alle Ebenen zur gleichen Zeit wachsen, werde ich ein neues Objekt verwenden. Ich gehe zu Ebene, Neues, Neues Objekt. Siehst du, es kam einfach ganz oben drauf. Dann werde ich alle Ebenen auswählen, und ich werde diese Spirale hier verwenden und sie antreiben damit ich sie dem neuen Objekt einfach so überziehen kann. Jetzt sollte ich in der Lage sein, alle diese Ebenen insgesamt zu 200 Prozent zu transformieren. Genau, genau so. Jetzt werde ich nur den Rahmen öffnen, ich denke, ich werde die 1920 und 1080 verwenden, also video-freundliches Format, Hintergrundfarbe weiß genau so. Dies ist die Art und Weise eingerichtet, um die Animation zu starten. Ich habe dieses Logo bereits animiert. Ich werde nur sehr schnell durchgehen, wie ich das gemacht habe und was die Idee dahinter war. Grundsätzlich wollte ich nur, dass es von 0-100 wächst. Dann wollte ich diesen Charakter erscheinen lassen und diese untere Kachel mit der Art Toys hüpfen bis zum Ende. Ich werde es für eine Sekunde für dich spielen. Es wird ungefähr so aussehen. Sehen Sie? Natürlich ist das nicht sofort passiert. Ich habe mehrere Iterationen ausprobiert, also denke ich, dass Sie dasselbe tun sollten. Ich wollte, dass es wirklich schnell geht, innerhalb von maximal drei Sekunden passiert, also bin ich ziemlich zufrieden mit dem Ergebnis. Ich habe nicht genug Zeit, um alles durchzugehen, aber ich kann Ihnen ein paar Tipps geben, die tatsächlich nützlich sein könnten. Einer von ihnen, es ist einfach sehr einfach. Es geht darum, Farben zu verwenden, zu denen Charakter jede Ebene gehört. Das ist einfach sehr praktisch und sehr visuell, so dass es das Animieren viel einfacher macht. Das ist etwas, was ich hier mit all diesen Farben gemacht habe. Dann werde ich über ein tolles Plug-in sprechen. Es nennt sich Mt. Mograph Motion_2, Ihre Animation Wingman. Im Grunde, was es Ihnen erlaubt, ich lege es aus dem Menü heraus, ist, an dem is-ing zu arbeiten, das is-in, isout, so dass Sie nicht den AAfter Effects ts-Standard verwenden müssen, sondern tatsächlich an etwas aufwendigerem arbeiten können. Ich benutze es schon so lange nicht, aber ich bin schon in sie verliebt. Zum Beispiel, hier auf dem Text auf dieser schwarzen Kachel, Ich habe es als is-in und isout verwendet, aber auch ich denke, ich habe diese Aufregung oder Sprung verwendet. Ich erinnere mich nicht an den Moment, aber versuchen Sie es einfach. Es ermöglicht Ihnen, mehr Reichtum und Details in die Animation zu bekommen. Vielleicht kann ich diese Komposition einfach packen und ich werde sie vorkomponieren, denn jetzt sah es einfach rein, aber ich möchte, dass es auch herauskommt. Natürlich müssen Sie es nicht noch einmal animieren. Eine gute Sache wäre, es vorkomponieren, also werden wir das IN nennen und es dann zu duplizieren Control-C, Control-V. Ich werde das umbenennen, ich werde das OUT nennen. Ich mache diese Komposition statt drei Sekunden, sechs. Ich werde es einfach bis zum Ende schieben. Nun, was Sie tun müssen, ist, mit der rechten Maustaste auf die OUT-Komposition zu klicken, gehen Sie zu Zeit und nur Zeit-Reverse-Ebene. Ich denke, das sollte funktionieren. Mal sehen, wie das funktioniert. Spot auf. Wir haben es jetzt mit sehr wenig Aufwand kommen und herauskommen. Endlich wollte ich über die Bewegung des Körpers sprechen. Dies ist eine AAfter Effects Erweiterung, mit der Sie Ihre Animation im Grunde in ein Webformat wie eine SVG-Animation exportieren können. Sie können es unter dieser URL finden. Ich benutze es viel und ich empfehle es wirklich, wenn Sie Dinge animieren, die im Web landen. Zurück zu unserem Projekt dachte ich, wir könnten diese Logo-Animation als Drei-Sekunden-Preloader verwenden. Wir wollen, dass das nicht schwer ist, also ist es gut für die Leistung und der Körper, der sich bewegt, wird es uns erlauben, das zu tun. Wie werden wir es benutzen? Der erste Schritt wäre, diese Leinwand kleiner zu machen, wahrscheinlich weil sie viel zu groß ist. Mal sehen, wie das funktioniert. Das sollte schon besser sein. Ich werde den Körper bewegen, den Sie auf Fenster, Erweiterungen, Body Moving finden können öffnen. Hier ist es, sehen Sie, ob es geladen wird. Unsere Komposition, es ist bereits diejenige, die der Preloader ist. Hier können Sie Ihre Einstellungen auswählen. In diesem Fall genügt es, eine Demo zu haben. Alles, was ich will, ist ein HTML, um Ihnen zu zeigen, wie das online aussehen wird. Wenn Sie mit Tags arbeiten, können Sie auch auf Glyphen oder eine andere Einstellung klicken. Aber in diesem Fall sollte das ausreichen. Ich klicke auf „Sicher“. Stellen Sie sicher, dass Sie den Player haben, ich habe ihn bereits, und das ist der Zielordner. Diese Dateien werden tatsächlich auf meinem Desktop landen. Ich klicke auf „Rendern“. Das ist super-schnell. Schon erledigt. Lass mich zu meinem Desktop gehen und sehen, ob wir sie finden. Hier sind sie. Das ist die demo.html und die data.json. Ich werde jetzt diese Demo für Sie öffnen. Dieses Logo, an dem wir gearbeitet haben, ist bereits Code, so dass wir es sofort verwenden können. Es hat einen Preloader, natürlich ist es kleiner. So funktioniert die Bewegung des Körpers. Ich hoffe, du probierst es aus. 5. Web | Interaktive Kunstrichtung: Gut. Beginnen wir mit dem zweiten Teil dieser Lektion, sich hauptsächlich auf Webdesign konzentriert. Hier wollen wir eine brandneue visuelle Sprache von Grund auf neu erstellen. PEI Toys, es ist eine neue Marke, so dass sie nichts haben, wenn es um Typografie, Farbe, Layout, so dass wir völlige Freiheit haben, das zu schaffen , und wir werden dies tun mit dem Web, vor allem Design für Desktop. Ich habe keine Zeit, ich habe Angst, für Handy zu dieser Zeit zu entwerfen. Aber natürlich gibt es einige Gedanken, die Sie bereits in Betracht ziehen sollten , um Ihren Designfluss für das gesamte Responsive. Diese visuelle Kommunikation sollte für das Web funktionieren, aber zur gleichen Zeit, es könnte für einen neuen Katalog oder für einige Social-Media-Posts oder für einige stationäre funktionieren. Also lasst uns mit diesem Web beginnen und vielleicht in unserer zweiten Phase können wir sogar mehr Dinge entwerfen können. Ich möchte auch über die kreativen Möglichkeiten sprechen, die uns dieses Projekt bringt. Die Spielzeuge wurden auf Cinema 4D entworfen, die eine 3D-Software ist. Also haben wir die Masse als drei Stücke. Jedes Spielzeug besteht aus drei Teilen, die wir als OBJ oder jedes andere Format exportieren können , das wir in einen Webbrowser implementieren können. Wir werden dies mit WebGL tun, die eine JavaScript-Bibliothek ist, mit der Sie 3D-Grafiken in Ihrem Browser erstellen und implementieren können . Lassen Sie uns also mit einigen Richtungsübungen beginnen. So würde ich normalerweise meinen Prozess starten. Die Art, wie ich ein Projekt wie dieses beginnen würde, ist mit einem leeren Dokument, das ich mit allen Ideen, UX Visual Design, Typografie, interaktiven Ideen,einigen Referenzen ausfüllen würde UX Visual Design, Typografie, interaktiven Ideen, . Ich würde anfangen, es zu strukturieren und dies wird schließlich als eine Präsentation enden, die ich meinem Kunden zeigen könnte. Also hier ist dieses Dokument, das ich bereits ausgefüllt und älter ein wenig. Wir können sehr schnell etwas davon durchgehen. Zunächst einmal habe ich versucht, die Website zu strukturieren und wie das auf der Speisekarte aussehen würde. So werden wir sechs Seiten haben, einschließlich der Homepage. Zweiter werden die Spielzeuge sein. Die dritte wäre die Feature-Künstler Spielzeug, die wir Sammlungen nennen und dann haben wir die Spaß-Galerie, wo der Benutzer in der Lage , die Spielzeuge, die sie angepasst haben, einreichen. Dann haben wir die Info Seite und die Kontaktseite. Vielleicht können wir einen Blick auf einige der kreativen Ideen, die ich für dieses Web habe. Auf der Landung, zum Beispiel, die eine dynamische Landung sein sollte, damit der Kunde das Bild weiter aktualisieren kann , wenn es wie eine neue Sammlung kommt, zum Beispiel. Wir können ein h1 haben, das interaktiv sein könnte und wir könnten variable Schriftart dafür verwenden. Ich zeige nur ein Beispiel dafür, was ich meine. Das ist also eine interaktive Variablenschriftart. Siehst du, wenn ich von links nach rechts gehe, ändert es die Form. In meinem Fall denke ich, es würde das Gewicht ändern, also würde es höchstwahrscheinlich von hell zu schwarz gehen. Ich denke, das sollte Spaß machen. Irgendwann auf der Homepage denke ich, es wird ziemlich cool sein, da diese auf 3D entworfen wurden, um die PNG-Sequenz zu exportieren, so dass wir mit einem Scroll bestätigen würden. Ich habe nur eine Referenz dafür, dass ich denke, es wird viel einfacher zu verstehen sein. Es wird nur etwas Reichtum zu dieser Seite hinzufügen. Sehen Sie, ich scrollen nach unten, das ist wahrscheinlich eine PNG-Sequenz und vor allem dieser Teil, Ich mag, dass Sie weiter scrollen, aber die Seiten dort stecken und Sie sehen es nur ändern. Natürlich sollte das 60 Frames pro Sekunde sein und wir müssen sehen, ob Entwickler, ob es lebensfähig ist oder nicht leistungsorientiert ist. Vielleicht sollte ich auf die Produktseite springen, die der Ort sein wird, an dem die Hauptspielzeuge, die leeren Spielzeuge, die Spielzeuge, die noch nicht von irgendwelchen Künstlern angepasst wurden, angezeigt werden. Also hier, was wir tun werden, ist WebGL zu verwenden, da diese Spielzeuge in 3D erstellt haben und jedes Spielzeug wird diese drei Stücke haben, über die ich gesprochen habe. Wir werden als Benutzer in der Lage sein, diese Spielzeuge um 360 herum zu drehen und mit einigen schönen Übergängen von Spielzeug zu Spielzeug zu wechseln. Ich habe hier ein paar Ideen, die auch funktionieren könnten. Lassen Sie mich aufmachen. Dies wäre für den Spielzeug-Übergang, die ich sehr mag, dass es ziemlich nahtlos ist, genau wie diese Referenzen, wir brauchen nicht das Spielzeug, um von der oberen Seite der Seite oder von einer der beiden Seiten verschwinden . Es kann einfach wie nahtlos im Rahmen passieren, genau so. Ich denke, das wird ziemlich cool. Dann könnten wir einige Effekte hinzufügen. Es ist diese super-gekühlte Seite. Nur einige Effekte, Kamera-Effekt oben auf den Spielzeugen, nur einige interaktive Effekte, um etwas Reichtum, um es hinzuzufügen. Sogar beim Übergang von Spielzeug zum Spielzeug könnten wir einige Pannen gebrauchen. Ich habe mir dieses photomosh.com angesehen, das super cool ist. Es ist gut eine WebGL-basierte Plattform. Also hier kann ich ein Bild nur als Beispiel auswählen und ich kann es auf verschiedene Arten mosh. Sehen Sie das zum Beispiel, ich mag es sehr. Vielleicht könnte das ein Anfang für unseren Übergang sein, Sie können ihn tatsächlich so optimieren, wie es besser ist. Das ist natürlich etwas, das wir am Ende des Prozesses mit den Entwicklern festnageln werden. Aber es ist gut, bevor sie tatsächlich mit der Entwicklungsphase beginnen , dass sie bereits wissen, was ich gerne tun würde. Dann kann ich vielleicht ein wenig über Typografie reden , da ich denke, diese Seite wird einige haben. Ich habe erstellt, nun, es ist noch kein [unhörbares], es ist eher eine Mappe von Sachen, die ich mag. Ich dachte an ein h1, das einige ziemlich schwache kondensierte Typografie-Features wie diese oder noch mehr wie diese verwendet. Der andere ist wahrscheinlich etwas zu extrem. Ich mag auch diesen Not-Effekt, diese Textur innerhalb der Typografie. Also denke ich, das wird wirklich gut für die Titel funktionieren. Das meinte ich mit den variablen Schriftarten mit dem wachsenden Gewicht. Dann für den Rest der Topographie, gut nicht für die Körperkopie, aber ich werde ein paar kleine Untertitel haben. Ich habe mir einige Referenzen angesehen, bei denen diese kleinen Untertitel tatsächlich ausgebreitet sind, wie hier auf der linken Seite. Sie sind wirklich auseinander verteilt oder sogar hier wie mit diesen kleinen Typ und nur einige HUD verteilt auf der ganzen Seite. Ich mag das. Ich denke, es gibt ihnen einen technischen Vorteil, den wir für dieses Projekt brauchen. Sogar so etwas, kleine Typografie in diesen kleinen Details, die es einfach ein bisschen kantiger machen. Dasselbe hier. Ich habe diese Dokumente auch gesammelt. Sogar dieses, ich mag es auch einige der Typografie auf den Kopf zu stehen. Ich mag auch das Rosa als eine meiner Grundfarben. Das werden wir später sehen. Hier hinten gibt es noch etwas, das es wert ist, zu überprüfen? Ja, vielleicht auf der Sammlungsseite, denke ich, das wird tatsächlich eine horizontale Schriftrolle sein, die nur alle Kollaborationsspielzeuge enthält. Vielleicht würden wir mit der Maus hineinzoomen, das ist eigentlich nicht hineinzoomen, aber Sie sehen, was ich meine. Wir könnten in das Spielzeug hineinzoomen, damit Sie mehr Details sehen können. Eigentlich würde sich Ihre Maus in eine Lupe verwandeln. Ich denke, das wäre ziemlich cool. Ich habe auch einige Animationsreferenz hier. Sehen Sie, wie diese Produkte kommen. Ich mag, dass sie nicht alle auf einmal kommen, aber sie tun das nacheinander. Das ist ziemlich nett. Okay Leute, lasst uns zu etwas anderem übergehen. Leute, ich wollte hier nur einen Punkt über UX machen. Ich werde diese Phase in dieser Lektion nicht abdecken, aber es ist äußerst wichtig, dass Sie, bevor Sie tatsächlich mit dem visuellen Design beginnen, ein UX-Dokument abzeichnen, das auch als Informationsarchitekturdokument bezeichnet wird. Sie müssen es mit einem Client abmelden, bevor mit dem Rest beginnen, damit die Struktur sehr klar ist. Das spart Ihnen später Zeit, und es ist der beste Weg, produktiv zu bleiben. 6. Web-| Vorbereitung deines Dokuments: Gut, also werde ich mit dem Design beginnen. Ich werde das auf Photoshop tun, wenn Sie sich wohler fühlen mit Sketch oder Adobe XD, Figma, jeder von denen geht voran. Software sollte auf keinen Fall ein Handicap sein. Ich werde ein neues Dokument erstellen, das ich Homepage nennen werde. Machen wir es zu einem Webdokument, also ist es bereits eine Kunsttafel. Ich benutze normalerweise diese Web-Medium-Auflösung, die 1440 mal 900 ist. Der Hintergrund, mach es einfach ein bisschen grau, einfach so. Das ist unsere Kunsttafel. Wenn Sie nicht viel RAM-Speicher auf Ihrem Laptop haben, können Sie vielleicht ohne Art-Boards arbeiten und es einfach zu einem Kunstboard machen , wenn Sie am Ende müssen, das sollte möglich sein. Erster Schritt, würde ich sagen, einige Richtlinien zu erstellen. Ich würde normalerweise mit [unhörbar] aka 12 Spalten Raster beginnen. Das ist ein Klassiker und es sollte ziemlich gut für Web-Design und jede Auflösung funktionieren. Ich werde damit anfangen und sehen, wie das aussieht. Diese neuen Eigenschaften des Leitfadens auf Photoshop sind großartig, da Sie nur die Zahlen hier einführen müssen und es automatisch erstellt wird. Vielleicht werde ich diese 24 Spalten verwenden, und das wäre die Baseline, die in diesem Fall aus 10 Pixeln besteht. Für Mobilgeräte könnte sich das auf ein bisschen weniger ändern, vielleicht denke ich, dass acht Pixel großartig wären, aber für Desktop, ich bin gut, damit zu gehen. Jetzt, da wir das Dokument eingerichtet haben, werde ich sehr schnell an der Shell arbeiten, diese gemeinsamen Elemente auf allen Seiten. Das wird unsere Speisekarte sein, die ich in diesem Fall auf der linken Seite platzieren werde, und dann haben wir einen Call to Action in den Laden und ich werde knöpfen. Konzentrieren wir uns zuerst auf das Menü, nennen wir diese Shell, in der Shell, nennen wir dieses Menü. Wir haben bereits diesen weißen Hintergrund und ich werde das Logo von Illustrator einziehen. Machen wir es 60 Pixel Breite so dass es auf dieses Layout passt. Ich werde es als intelligentes Objekt einfügen. Ja, gut. Dann würde ich Hamburger-Menü hier in der Mitte. Ich habe das Asset bereits vorbereitet, damit wir nicht in den Grundlagen stecken bleiben. Benennen wir diese Dateien, so dass wir sie später nicht durchgehen müssen. Ich gehe auf die Speisekarte, gut. Am unteren Rand dieser linken Navigation werde ich die Sprachen verwenden. In diesem Fall werden sie freie Sprachen sein. Ich werde das Type-Werkzeug verwenden, das sie schwarz macht, so etwas tatsächlich. Es ist schon auf der Schrift, die ich wollte, also das ist großartig. Ich werde den Stoff Mono benutzen, und dann brauche ich das auf Englisch, Spanisch und Katalanisch, ja, genau so. Legen Sie es hier, und sagen wir, Englisch könnte unsere Standardsprache sein, so dass es ausgewählt werden könnte. Wir haben bereits diese linke Navigation, die ich denke, sie sieht vielleicht ein bisschen zu eng aus. Ich werde es tatsächlich etwas größer machen. Wenn es jetzt 60 Pixel breit ist, ja, werde ich es vielleicht 72 in dieser Breite machen. Dann legen Sie sie einfach aus unserem Guide hier. Ich kann das reparieren, damit es in der Mitte ausgerichtet ist. Das hier, es ist sehr größer. Machen wir es 72 Pixel Breite wie folgt. Ja, das sieht besser aus. Ich denke, wir haben unsere linke Navigation hier schon. Wie Sie gesehen haben, habe ich ein paar Regeln gebrochen. Ich habe gerade in ein Gitter gelegt, das ich gerade gebrochen habe. Das passiert manchmal, haben Sie keine Angst, die Regeln zu brechen. Die Guides sind nur da, um Ihnen zu helfen. Ok. 7. Web: In Ordnung, Jungs. So wie Sie sehen können, magische selten passiert, in diesem Dokument. Ich habe die meisten Seiten bereits entwerfen. Lassen Sie mich also einen kleinen Durchbruch machen und wir können jede Seite irgendwie analysieren. Ich werde mit einer Homepage beginnen, einige der Ideen hinter dieser Seite, die ich bereits zuvor auf diesem Dokument der Inspiration beschrieben habe . Also im Grunde, was Sie hier sehen, ist die linke Navigation, mit der Sie bereits vertraut sind, und das wird die Landung sein. Also werden wir eine dynamische Landung haben, wo der Kunde in der Lage sein wird, dieses Bild jederzeit für ein anderes zu ändern. Das könnte sogar zu einem Schieberegler werden, und dann werden wir einige, gemeinsame Elemente wie diese haben . Tun Sie es selbst, Spielzeug, die variabel und interaktiv sein wird, wie wir zuvor gesehen haben. Ich habe auch noch einen Qualitätsstempel , den ich Ihnen hier etwas detaillierter zeigen kann. Nur um ein wenig mehr Handwerk zu dieser Homepage hinzuzufügen, und einige andere Elemente hier, die auf der gesamten Website gemeinsam sein werden, Jagadish the shop now Button, die ein externer Link zu einer Shopify-Seite sein wird, wo Sie wird in der Lage sein, alle Spielzeuge zu kaufen, und dann werden wir den Anteil am Schweben haben, werden die sozialen Symbole auftauchen. Also diese im Grunde die Landung. Lassen Sie mich zu einer anderen Seite gehen, ja, das ist das Menü, wenn Sie auf das Hamburger-Menü klicken, wird dieses Menü angezeigt, und hier können Sie die Website navigieren. Also haben wir diese fünf Kategorien, die wir bereits beschrieben haben, und die Idee hier ist, dass ich eine dieser Kategorien beherbergen werde. Das Bild auf der rechten Seite könnte sich ebenso wie die Farben ändern. Vielleicht ist es hier ein guter Ort, um über Typografie zu sprechen, ich benutze diese kondensierte Semi-Volt-Sanserif für die Titel, die ich wirklich mochte. Dann werde ich diese Monospace für die kleine Kopie verwenden, nicht für die Körperkopie, sondern für die Untertitel. Wenn es um Farbe geht, habe ich diese rosa vorgestellt. Ich habe eigentlich eine Palette von drei Farben gemacht, die wir auf der nächsten Seite sehen können, die diese ist. Also möchte ich jede der Charaktere unserer Farbe zuordnen. So zum Beispiel könnte dieser Hubert-Typ auf die grüne Farbe kommen, dieser Typ namens Western, könnte auf den rosa kommen und den stacheligen, er wird zu der orangefarbenen gehören. Dies ist die Seite mit diesem gebraten vorher, wo die Zeichen in 3D sein werden, so dass der Benutzer in der Lage, sie in 360 drehen, und mit der Maus, werden Sie in der Lage sein, von Charakter zu Zeichen zu wechseln. Übrigens habe ich gerade erkannt, dass wahrscheinlich einige UI-Indikatoren benötigt werden, so dass Sie erkennen, wie viele Zeichen Sie durchblättern. Gut, also lassen Sie uns durch eine andere Seite gehen. Ja, das ist die Kollaborationsseite, also wird der Feature-Artist diese Seite sein. Dies wird also eine horizontale Schriftrolle sein, stellen Sie sich einfach einen riesigen Spielzeugstreifen vor, der beim Scrollen von rechts nach links navigiert. In diesem Bereich wird es mehrere Sammlungen geben, die Sie schneller erreichen können , indem Sie diesen Indikator oben verwenden. Ja, also die obige Seite, wird es tatsächlich einen redaktionellen, magazinischeren Look haben. Also werde ich zuerst vorstellen, was bezahlt Spielzeug haben. Beim Scrollen denke ich, dass dieser Charakter tatsächlich eine PNG-Sequenz sein wird, also können wir ihn drehen. Ich denke, das sollte lustig sein. Wie Sie sehen können, habe ich hier eine weitere Typografie für die Körperkopie eingeführt. Normalerweise verwende ich nicht mehr als zwei Typografie, aber das ist etwas, was Sie tun können, wenn Sie sich wohl fühlen. Also haben Sie keine Angst, mehr als drei Typografie zu verwenden, in diesem Fall habe ich eine san-Seriif verwendet, die gut für das Web optimiert ist, und ich rechtfertige den Text, nur weil ich das Layout mag, wie Sie sehen können, ist [unhörbar] im Moment. Also mal sehen, was mit den eigentlichen Texten passiert. Sobald wir also Pay-Spielzeug eingeführt haben, können wir einfach beschreiben, dass es tatsächlich aus drei Teilen besteht. Die, die Sie hier in diesem Bild sehen, könnte ein animiertes GIF sein, das die drei Stücke entfaltet, und dies, nur kopieren, um den Abschnitt zu beschreiben. Es wäre Teil desselben Abschnitts, nur etwas Spaß, ich dachte, wir könnten etwas tun, irgendwie Max Schott mit diesen beiden Jungs, die ziemlich schlecht aussehen. Also denke ich, das macht Spaß. Mischen Sie sie, weil Sie tatsächlich mischen können Ihre Spielzeuge , die ziemlich cool sein sollte, und um fertig zu werden, konzentrieren wir uns ein bisschen mehr auf den Prozess, wie die Spielzeuge produziert werden. Daher möchte ich diese in fünf Schritten in diesem Layout erklären. Nur sehr wenig Informationen, die Menschen nicht wirklich viel lesen, und vielleicht können wir das verbessern, und ein Schweben eines dieser Bilder, die eine animierte Video-Schleife sein könnte. Vielleicht ein paar oder zwei Sekunden. Dann werden wir über die Verpackung sprechen. Dieses Bild gehört nicht zu zahlen Spielzeug ist nur eine Referenz. Der Klient weiß also, wie wir das tatsächlich anzeigen können. Also gibt es Richtung der Fotografie, und schließlich werden wir kurz über Robert reden, wer der Handwerker ist, der Typ hinter dem Spielzeug. Also ich denke, wir können drei freie Form hier haben abhängig davon, warum möchten Sie Pay-Spielzeug erreichen, zukünftige allgemeine Botschaft könnte diese sein. Aber vielleicht, wenn Sie ein Feature-Artists geworden sind, klicken Sie hier und ein anderes Formular erscheint, wo Sie tatsächlich in Ihr Portfolio eingeben können. Dasselbe mit, wenn Sie Ihr Finale einreichen möchten, vielleicht gibt es sogar eine Schaltfläche, so dass Sie es tatsächlich hochladen und einreichen können. Dann wird Ihre Datei direkt an den Client gehen. Gut, das ist es also für diese Lektion, wir sehen uns in der nächsten. 8. Produktionstipps + Schlussfolgerung: Leute, jetzt, da wir unsere Designs für den Desktop haben, sollten wir wahrscheinlich anfangen, über den Rest des reaktionsfähigen Flow nachzudenken. Ich würde in der Regel mit Handy und nach diesem Tablet beginnen. Es ist gut, dass Sie sich mit Ihren Entwicklern so früh wie möglich in den Prozess setzen , damit Sie beginnen können, über welche Ideen Sie im Sinn haben zu reden. Ich nenne das einen Entwicklungsanstoß. Ich denke, es ist äußerst wichtig, so dass Sie Ihre Ideen auch kommunizieren, wenn es um Animationen geht, Scroll-Animationen, es könnte basierte Übergänge sein. Schließlich ist Web-Projekte ein kollaboratives Projekt. Sie müssen versuchen, Ihren Entwicklern so viel wie möglich zu helfen. Seien Sie super aufgeräumt mit Ihrer Datei, wie Sie sie benennen, wie Sie Ihre Assets benennen, wie Sie sie gruppieren, wie Sie Ordner mit SVGs bereitstellen, mit Bildern, die für eine gute Leistung optimiert sind usw. Es gibt auch ein paar Tipps, die ich Ihnen zur Produktion geben möchte. Einige Plugins, die ich tatsächlich selbst oder Photoshop oder für Skizze wie Zeppelin oder Avocode verwende . Dies ist großartig, weil der Entwickler Ihre Dateien überprüfen und genauer mit der Art und Weise arbeiten kann , wie sie das Front-End-Design implementieren. Sie können sogar einige Styleguides tatsächlich machen, indem Zeppelin verwenden, was ich denke, es ist viel Zeitersparnis. Sie können diesen Farbstil-Guide, den Topographie-Styleguide, einfügen. Das ist etwas, was der Entwickler auf jeden Fall gerne von Ihnen wissen würde. Das ist es von mir. Das war meine Klasse, ich hoffe, ihr habt es genossen. Ich freue mich sehr darauf, zu sehen, was Sie entworfen haben, hoffen, dass Sie bereit sind, es zu teilen. Ich werde mich zur Verfügung stellen und versuchen, auf Ihre Kommentare zu antworten und Ihnen so viel wie möglich zu helfen.