Mehr als nur das Logo: Verbesserung der Markenidentität mit einer effektiven Benutzeroberfläche

1. Über das Logo gehen: Hallo an alle. Mein Name ist Sofia und ich bin Art Director , Grafik- und UI-Designer. In dieser Klasse werden wir verstehen, dass es sehr einfach sein kann, einen großen digitalen Schub zu geben, was Sie entwerfen . Während meiner Berufserfahrung wurde mir klar, dass die Gestaltung eines starken visuellen Systems nicht ausreicht, um die Einzigartigkeit einer Identität zu garantieren, insbesondere im digitalen Kontext. Ich entwarf mir, Städte interaktive Karte, aus einem grafischen Muster. Ich habe Vektorillustration erstellt, um mit dem jüngeren Publikum einer Marke zu sprechen. Ich habe Infografiken entwickelt, um Daten leicht zugänglich zu machen und sie in Material für Social-Media-Poster zu verwandeln. Ständig die Kohärenz der Marke von traditionellen bis hin zu digitalen Medien. Deshalb kann ich es kaum erwarten, Ihnen alle Tipps beizubringen, die Sie brauchen, um eine erfolgreiche Markenidentität mit digital-orientiertem Ansatz zu gestalten . Insbesondere werden wir alle Geheimnisse entdecken, um das grafische Element einer Marke in ein einzigartiges und herausragendes UI-System zu verwandeln. Wir werden lernen, ein richtiges Symbolset zu entwerfen, um einen korrekten typografischen Ansatz zu haben , um Animationen zu integrieren und Richtlinien für Ihre Kollegen zu erstellen. Diese Klasse richtet sich an Designer, die bereits einige Erfahrungen mit Adobe Illustrator und Stahlskizze haben. Aber wir werden Schritt für Schritt fortfahren. Jeder, der verstehen will, wie man mit einem digitalen Touch designt, wird viel zu lernen finden. Bereit? Lasst uns gehen. 2. Unser Projekt: Hallo an alle. Ich bin froh, dass du dich entschieden hast, diese Reise mit mir zu beginnen. In dieser Einleitung werde ich schnell erklären, was wir gemeinsam bis zum Ende dieser Klasse erreichen werden. Wir können unsere kurze Beschreibung als Ausgangspunkt nehmen. In der Tat fasst er bereits kurz zusammen, zwei der Hauptschwerpunkte unserer Lektionen. Eine davon ist die Markenidentität, was in unserem speziellen Fall bedeutet, die wichtigsten visuellen Merkmale, die das Thema definieren, das wir für unser Projekt wählen werden. Es könnten bestehende Markenelemente oder andere visuelle Funktionen sein , die wir in sinnvolle digitale Erlebnisse verwandeln werden. Die zweite ist eine effektive Benutzeroberfläche, was das herausragende digitale System bedeutet, in dem wir die Markenidentitätselemente, die wir in der vorherigen Folie hervorgehoben haben, transformieren werden . Alles, was wir gemeinsam über Identität und UI lernen, wird sich schließlich zu einem speziellen Projekt zusammenfassen, das Sie Lektion für Lektion erstellen und abschließen werden. Das Projekt ist eine großartige Website Homepage. Warte, ich habe keine Homepage gesagt, ich sagte eine tolle Homepage, weil, wie wir sehen werden, es ist keine leichte Aufgabe, es richtig zu machen. Um zusammenzufassen, was wir bisher gesagt haben, werden wir von der Markenidentität ausgehen und durch ein effektives UI-Design erhalten wir eine großartige Website-Homepage. Cool. Aber da Lernen während Spaß das Wichtigste ist, wäre unsere Website eine gemeinsame. Ich möchte, dass Sie einen Charakter wählen, den Sie tief lieben oder Sie sind sehr interessiert, ob er real, fiktiv, menschlich, nicht-menschlich, lustig, sogar romantisch, mutig, und bauen seine eigene Website Homepage. Das Wichtigste, was man sich bei der Auswahl eines Charakters merken sollte, ist, dass er visuell gut definiert sein muss , mit vielen interessanten Features, die verwendet werden, um diese digitale Präsenz aufzubauen. Schließlich werden wir sehen, wie diese erstaunliche Studie des Charakters und allgemein gesagt, was wir in dieser Klasse lernen könnten leicht als eine Ausbildung für das, was wir alle tun sollten, während es mit einem realen Arbeitsauftrag zu tun. Möchten Sie dann eine kleine Vorschau sehen? Ich wusste es. Nun, ich könnte anfangen zu enthüllen. Ich werde Henri Matisse als meinen Charakter wählen. Ich werde ihn mit Hilfe eines Moodboards studieren, aus dem ich Farben, Typografie und erkennbare Grafikstile entwerfen werde . Später werde ich diese Elemente verwenden, um die Benutzeroberfläche meiner zukünftigen Homepage zu entwerfen, indem ich zum Beispiel das Symbolset definiere. Dank einer kurzen Reise durch die Wunder der Informationsarchitektur, User Journeys und Interaktionen definieren wir Schritt für Schritt unsere wunderbare Homepage. Das ist der Grund, warum Sie ein hochqualifizierter Grafikdesigner oder ein brillanter Art Director sind und lernen möchten, wie Sie die Markenidentitäten, die Sie entwerfen, digital steigern können, dies ist die richtige Klasse für Sie. Einige Erfahrungen mit Adobe Illustrator und XD werden großartig sein. Aber da wir Schritt für Schritt weitergehen werden, wird jeder, der daran interessiert ist, zu verstehen, wie man eine Identität mit digitaler Note gestaltet, viel zu verdienen finden. Bereit für den Start? Hier sind einige kleine Vorschläge, die ich Ihnen gerne geben möchte, bevor wir gemeinsam auf diese Reise gehen. Haben Sie immer Spaß beim Experimentieren mit Ihrem Design, arbeiten Sie an etwas, das Sie wirklich mögen und tief entdecken möchten, und geben Sie nie auf, wenn etwas am Anfang nicht funktioniert. Nur für den Fall, dass Sie noch mehr darüber wissen möchten, was wir gemeinsam tun werden, schlage ich Ihnen vor, einen Blick auf einige der super interessanten Artikel zu werfen, die ich am Ende der Kursbeschreibung gestellt habe. Das ist alles für diese ganze Lektion Jungs. Machen Sie sich bereit mit Ihrem Laptop oder Notebook und sehen Sie sich in der nächsten Lektion. 3. Online-Erfolg: Hallo an alle und ein herzliches Willkommen in der ersten Lektion dieser Klasse. Auf der folgenden Folie werden wir unsere Reise mit einigen großartigen Fallstudien beginnen. Dank ihnen wird es viel einfacher zu verstehen, worüber wir sprechen, wenn wir eine erfolgreiche digitale Identität sagen. Im ersten Teil der Lektion werden wir vier großartige Beispiele für Marken untersuchen, die eine sehr kohärente Identität von physischen bis digitalen Berührungspunkten aufbauen . Im zweiten Teil werden wir uns mit den ersten Schritten unseres Projekts befassen. Warum sollten wir uns zunächst auf Markenkonsistenz konzentrieren? Nun, denn im digitalen Zeitalter ist sehr wahrscheinlich, dass unsere Identität in einem Universum voller Inhalte verloren geht, deshalb müssen wir garantieren, dass unsere Marken ihre Einigkeit und Stärke in jedem visuellen Ausdruck behält . All diese Ausdrücke sollten auch sehr sorgfältig in Betracht gezogen werden, denn heute müssen wir unseren Kunden Werte geben, nicht nur visuelle Ergebnisse. Diese Werte lassen sich dank all der Funktionen, die wir um unsere Markenidentität aufbauen, verbreiten. An dritter Stelle sollten wir nicht vergessen, dass eine Marke heute auch sozial, vernetzt und schneller ist. Jeder Markenausdruck sollte diese nie endende Entwicklung widerspiegeln, aber gleichzeitig konsistent zueinander sein. Warum sollten wir unsere Reise nicht von den Fallstudien beginnen, die ich für Sie ausgewählt habe? Von visueller Konsistenz bis hin zu Animationen, von Social Media bis hin zu Markenrichtlinien — ich werde Sie dabei begleiten, die Schlüssel ihres Erfolgs zu entdecken. Die erste Marke, über die ich gerne mit Ihnen sprechen würde, ist AESOP. Ich persönlich liebe es und denke wirklich, dass es Ihnen als Fallstudie eine große Menge an Inspiration geben kann. Denn wenn Sie sich ihre Verpackung ansehen oder Sie in einem ihrer schönen Designer-Läden gehen , haben Sie das gleiche Gefühl von Eleganz und Schönheit das Sie wahrnehmen, wenn Sie ihren Instagram-Feed scrollen, oder einfach, wenn Sie schauen sich ihr Logo an. Wie wir aus ihrer Verpackung annehmen können, sind ihre wichtigsten visuellen Merkmale sehr wichtig und einfach. Designer bei der AESOP sind wirklich super gut darin sie immer super ausgewogen und elegant zu mischen. Es ist auch leicht zu sehen, wie sie es geschafft haben, alle grafischen Elemente, die wir im physischen Universum von AESOP finden, in das digitale zu übersetzen . Sie kümmerten sich auch darum das beste digitale Gegenstück ihrer institutionellen Typografie zu finden. Hier ist eine kurze Reise durch ihre Website. Wie Sie sehen können, sagt alles AESOP, von der Farbanpassung bis zu den glatten Übergängen, dekorierten Produktbildern und der sauberen Typografie. Hier ist ein weiteres Beispiel. Lassen Sie uns die Perspektive komplett ändern und über einen Riesen im digitalen Universum sprechen. Google, wer besser als sie könnte uns eine gute Inspiration geben? Natürlich weiß ich, dass Google bereits ein digitales Produkt ist, aber es ist sehr interessant zu sehen, wie die Menschen bei Google in der Lage sind, die Marke zu diversifizieren und zu erweitern und sogar die kleinsten Details zu kuratieren. Wie Sie sehen können, spielt ihre Identität um eine ikonische Topographie in vier sehr markanten Farben. Sie setzen diese als Ausgangspunkt und mit einem Vorgeschmack auf die Verwendung von geometrischen Formen und Animationen, schaffen sie es, ihre Identität lebendig zu machen. Hier finden Sie eine kurze Zusammenfassung dessen, was wir zuvor gesagt haben. Vier Farben, essentielle grafische Linien. Wenn wir diese tiefer erforschen, werden wir feststellen, dass dank einer unglaublich geschickten Verwendung von Animationen und Übergängen die Formen wirklich so sprechen lassen, dass sie von einer breiten Palette von Benutzern vollkommen verständlich sind. Mit dieser Deklination ihrer digitalen Identität gehen sie über Worte und Sprachen hinaus. Eine weitere Fallgeschichte, die ich Ihnen gerne zeigen würde, ist Kinfolk. Kinfolk ist weltweit anerkannt als eines der raffiniertesten Zeitschriften, die Sie in Buchhandlungen finden können. Es befasst sich vor allem mit Lebensstil, Heimat und Kultur. In diesen Tagen spiegelt das Wort der Menschen wider, die im Inneren vorkommen. Was auf den ersten Blick wirklich fällt, ist die unglaublich geschmackvolle und ausgewogene Verwendung von Typografie, redaktionellen Raster und schönen Bildern, die Sie Seite für Seite mit immer anderen und intelligenten Lösungen überraschen werden. Wenn wir versuchen, zusammenzufassen, die wichtigsten visuellen Merkmale von Kinfolk redaktionellen Layout, müssen wir unbedingt das Raster erwähnen, die Verwendung von Leerzeichen, und elegante Typografie Paarungen. Dieselben Eigenschaften definieren und machen ihre digitale Identität so einzigartig und erkennbar. Das Raster ist vorhanden und hilft, zwischen den Haupt- und Sekundärstarts zu unterscheiden. Die Verwendung von Schwarz-Weiß und die typographischen Experimente werden verwendet, um die gleiche Eleganz und Balance zu vermitteln, die Sie auf dem Papier finden können. Das letzte Beispiel, das ich gerne mit Ihnen teilen würde, ist Monki. Monki ist eine relativ neue Marke aus der H&M-Gruppe mit einem Ziel vor allem junge Frau, die sich selbst und ihre Werte durch Mode ausdrücken wollte. Was an dieser Marke am meisten auffällt, ist eine starke Community, die schnell um sie herum wuchs. Hier ist eine so kleine und nicht erschöpfende Übersicht über ihr Instagram-Konto. Wie Sie sehen können, funktioniert die Verwendung einer vielfältigen und dennoch konsistenten Farbpalette mit Parzellen und femininen Tönen zusammen mit kohäsiven Typografieexperimenten wirklich gut. Ist schön, insbesondere zu sehen, was mit nur einer Schrift getan werden kann, wenn wir uns entscheiden, es kreativ abzulehnen, aber ohne es zu verzerren. Am Ende ist das, was wirklich interessant an Monki ist, dass es Kühnheit, Selbstwertgefühl und Spaß mit einem zusammenhängenden und wirkungsvollen Ansatz kommuniziert , sowohl von Ton der Stimme als auch von künstlerischen Gesichtspunkten. Jetzt, da wir viele großartige Beispiele für digitale Identitäten gesehen haben, sind Sie bereit, die Grundlage für Ihr eigenes Projekt zu setzen? Es ist an der Zeit, unseren Charakter zu wählen, die absoluten Protagonisten unseres Designs. Warte, warte, warte, keine Panik. Ich weiß, was es bedeutet, von einem leeren Schiefer zu beginnen. Deshalb werde ich in den folgenden Folien einige Ratschläge überprüfen, die mir sicher hilfreich sein werden. Bei der Auswahl Ihres Charakters denken Sie daran, was wir im letzten Video gesagt haben. Es könnte wirklich jeder sein, der dich inspirieren kann. Es könnte real, fiktiv, menschlich über Menschen, lustig, böse sein, wer auch immer Sie eine Geschichte erzählen möchten. Es wird sogar einfach sein, wenn Sie diese Regeln befolgen. Wählen Sie jemanden, den Sie wirklich bewundern und tief erkunden möchten, werden Sie seine Nummer eins Fan werden. Zweitens, Ihre Ergebnisse werden noch atemberaubender sein, wenn Ihr Charakter einige erkennbare Eigenschaften hat. Drei, viel Spaß und lassen Sie Ihrer Fantasie freien Lauf. Wie ich im vorherigen Video erwähnt habe, werde ich Henri Matisse aus mehr als einem Grund wählen. Als ich seine Ausschnitte während eines Besuchs einer Ausstellung entdeckte, verliebte ich mich in ihre organischen Formen, demographischen Kompositionen und ihre Farbexplosionen. Ich denke, sie haben alle Funktionen, um meine Inspiration zu sein, Matisse Website zu bauen. Cool. Nun, jetzt bist du dran. Nun, da du deinen Charakter gewählt hast, führe ich dich durch die Schaffung seines Moodboards. Ein Moodboard ist ein super nützliches Werkzeug, das an einem einzigen Ort alle visuellen Inspiration sammelt , die die Richtung Ihres Projekts beschreiben. In unserem Fall wird es die kultigsten Bilder sammeln, die unseren Charakter darstellen. Wir sprechen von einem sehr nützlichen Tool, das Ihnen dabei hilft eine visuelle Konsistenz zu behalten, während Sie mit dem verschiedenen Schritt Ihres Projekts umgehen, aber auch Ihren Kunden helfen wird, damit sie klar verstehen können, was in Ihr Verstand. Um das perfekte Moodboard zu bauen, denken Sie immer daran, dass Sie nicht viele Bilder benötigen, um Ihre Idee auszudrücken. Ein paar, aber gut gewählt sind genug. Sie müssen auch nicht unbedingt an einem visuellen Universum festhalten. Inspiration kann aus vielen verschiedenen Quellen stammen und durch verschiedene Medien vermittelt werden. Nach einer auffälligen Sammlung von Bildern entschied ich, dass diese mir beim Aufbau der Matisse-Website-Identität geholfen hätten. Warum? Nun, zwei von ihnen gehörten zu seiner eigenen Arbeit. Es ist wichtig, zumindest einige Originalreferenzen zu haben , um zu vermeiden, dass Sie zu weit von Ihrem Ausgangspunkt entfernt sind. Aber diese Bilder erzählen auch viel über Farben, Farbabstimmung und organische Formen. Diese anderen beiden Bilder sind stattdessen zusätzliche Referenzen, die mir helfen, meine Farbpalette zu erstellen und meinen Grafikstil zu definieren. Ich möchte, dass es weich, organisch und handgefertigt ist. Bist du bereit? Es ist an der Zeit, Bilder zu sammeln und diejenigen auszuwählen , die Ihren Charakterstil am besten darstellen. Sobald Sie sie bekommen haben, legen Sie sie in ein Moodboard und bleiben Sie dran für die nächste Lektion. Wir sehen uns im nächsten Kapitel, Leute. Danke, dass du dir das angesehen hast. 4. Finde deinen Stil: Hallo an alle, willkommen zu unserer dritten Lektion. Gemeinsam werden wir verstehen, wie man die visuelle Eigenschaft unseres Projekts definiert, ausgehend von dem Moodboard, das wir in der zweiten Lektion definiert haben. Wie Sie in den nächsten Folien sehen können, werden wir eine Menge Dinge lernen, um alle die Grundlage zu haben, um eine konsistente visuelle Identität aufzubauen. Bevor wir anfangen, möchte ich Sie noch einmal daran erinnern, dass wir uns vor allem auf eine digitale Landschaft konzentrieren. Was brauchen wir, um unsere digitale Identität unter Berücksichtigung einer visuellen Perspektive aufzubauen? Um es zu entdecken, müssen wir zuerst unsere Markenwerte analysieren. Werte sind die Schlüsselwörter, um unser Projekt zu kommunizieren, und helfen uns, effektiver zu gestalten. Um Werte zu definieren, müssen wir studieren und uns mit unserer Marke oder in unserem speziellen Fall mit unserem Charakter vertraut machen. Der erste Schritt, den wir unternehmen sollten, um das Wort zu finden, um unser Projekt zu repräsentieren , ist die Analyse unseres Moodboards. Übrigens erinnerst du dich an das Stimmungsbrett, das wir während des letzten Unterrichts vorbereitet haben? Wir sammelten das repräsentative Bild verwendet, um unsere Charaktere Arbeit zusammenzufassen. Ich wähle Matisse. Was Matisse betrifft, so können wir zunächst an unserem Moodboard feststellen, dass sein Pinselstrich meist nicht genau ist, besonders seine Ausschnitte. An zweiter Stelle können wir davon ausgehen, dass die Arbeit von Matisse durch eine sehr minimale und einfache Art der Darstellung der Dinge gekennzeichnet ist . Die Farben sind schlicht und die Linien werden auf das Wesentliche reduziert. Wir können auch sagen, dass wir generell ein sehr elegantes Werk betrachten, aber ohne den Eindruck, dass es zu komplex und unerreichbar ist. Nennen wir es einen unprätentiösen Stil. Am Ende unserer Analyse haben wir daher diese drei Schlüsselpunkte gesammelt: unvollkommen, einfach und essentiell und unprätentiös. Dies sind die Werte, die wir verwenden werden, um unser Projekt zu kommunizieren. Jetzt, da wir unsere wichtigsten Punkte haben, werden wir sie als Ausgangspunkt für den Aufbau unserer visuellen Sprache verwenden. Um dies zu erreichen, brauchen wir Farben, Typografie und einen hervorragenden Grafikstil. Farben sind die Grundlage unseres Designs, wir brauchen sie, um die Qualität zu stärken, Aktionen zu kommunizieren und Informationen zu geben. Sie bei der Auswahl der Farben daran, dass weniger mehr ist, Sie erhalten bessere Ergebnisse, wenn Ihre Farbpalette auf maximal drei Primärfarben bleibt. Je mehr Farbe Sie verwenden, desto komplizierter wird es sein, Ihr Design zu verwalten. Wenn es zu schwierig ist zu wählen, können Sie immer ein Farbschema verwenden, 60 Prozent für Ihren dominanten Farbton, 30 Prozent für die sekundäre Farbe und 10 Prozent müssen nur für die Akzentfarben verwendet werden. Denken Sie immer daran, die Aufmerksamkeit auf die visuelle Kultur zu zahlen, in der Sie arbeiten. Zum Beispiel trägt Orange in Indien eine Reihe von Bedeutungen, die Sie nicht ignorieren sollten. Bevor wir entdecken, wie man die Farben für unser Projekt auswählt, habe ich noch eine weitere praktische Empfehlung für Sie. Um die Farbauswahl zu vereinfachen, versuchen Sie, mit dem zu beginnen, was Sie haben, wie dem Material, das Sie bereits gesammelt haben. Es ist auch wichtig, immer das Publikum zu beachten, für das Sie arbeiten, und um die Farbe des Wettbewerbers zu vermeiden, wird es Ihnen helfen, sich von der Masse abzuheben. zu unserer geliebten Matisse zurückkommen, wenn dies die Bilder sind, die wir bereits ausgewählt haben, könnten dies die Farben sein, die wir für unsere erste Palette berücksichtigen sollten. Nur um klar zu sein, denken Sie daran, dass, wenn Sie nicht zu 100 Prozent sicher sind Sie Ihre Meinung bei jedem Schritt des Projekts ändern können. Wir folgen dem spezifischen Weg, weil es uns hilft , einen Prozess bei der Gestaltung unserer Website zu definieren, aber fühlen Sie sich immer frei, zu experimentieren und Ideen zu ändern. Neben den verrückten guten Farben, die wir vom Moodboard gezogen haben, ist es wichtig, auch Grautöne in unser Design aufzunehmen , besonders weil wir für die digitale Welt arbeiten. Normalerweise ist es besser, mindestens zwei Grautöne, eine dunkle und eine helle zu wählen . Um sie auszuwählen, können Sie eine einfache Methode folgen, indem Sie Editorial zerschlagen, in dieser Folie finden Sie den Link, um die Methode zu sehen. Hier sind wir mit unserer endgültigen Farbpalette nicht so schwierig, oder? Jetzt sind wir bereit, zum zweiten Kapitel unserer Lektion, Typografie, zu gehen. Webdesign ist 95 Prozent Typografie, wie Oliver Reichenstein sagte. Typografie ist unerlässlich, um Lesbarkeit und Zugänglichkeit zu gewährleisten und Ihrer Website eine korrekte grafische Balance zu geben. Wie wir in Bezug auf Farben gesagt haben, kann die Verwendung von mehr als drei Schriftarten dazu führen, dass Ihre App oder Website beschäftigt und unstrukturiert aussieht. Es ist besser, die Anzahl der Schriftfamilien zu begrenzen, zwei ist reichlich, eine ist oft ausreichend. Um Rhythmus bei der Auswahl der Typografie zu erstellen, beginnen Sie mit zwei sehr unterschiedlichen Schriftarten, da Kontrast und Unterschiede Balance schaffen. Achten Sie schließlich darauf, die richtige Schriftgröße mit jeder Methode zu wählen, die Sie bevorzugen, aber denken Sie daran, dass weniger als 14 Punktdimensionen schwer lesbar werden könnten. Denken Sie in der Regel daran, dass Textkörper das häufigste Element in einem Produkt ist, das ist, was alle Benutzer sehen und erleben werden. Dadurch wird das Aussehen und die Haptik Ihrer Körpertexte den größten Einfluss auf die Qualität Ihres Designs haben. Wie wir mit Farben gemacht haben, lassen Sie uns von den Referenzen beginnen, die wir gefunden haben. Achten Sie darauf, die Schriftart mit unterscheidbaren Buchstaben auszuwählen, um die Lesbarkeit zu gewährleisten. Es ist nicht ungewöhnlich, Schriftarten mit verwirrenden Buchstabenformularen speziell mit I und L zu finden . Wenn wir einen Blick auf das alte Ausstellungsplakat von Matisse werfen, können wir unsere Schriftrecherche leiten. Wir können zum Beispiel nach Handschriftarten suchen, die Matisses Signatur ähneln, oder wir können Serifen-Schriftarten auswählen, um die natürliche Eleganz seines Gemäldes zu vermitteln. Um Kontrast zu schaffen, wird es großartig sein, wenn wir beide sind SANS-Serif und eine Serifen-Schriftart wählen. Zum Beispiel fand ich diese erstaunliche freie Schriftart online, es könnte eine gute Wahl sein, da es zwei verschiedene Gewichte hat , die sich in Bezug auf den Stil stark ändern. Die leichte Version erinnert mich an Jugendstil und Liberty-Details, während die reguläre Version kühner und lesbarer ist. Jetzt, da wir Farben und Typografie haben, ist es an der Zeit, über unseren grafischen Stil nachzudenken, der uns hilft , die gesamte Kunstrichtung des Projekts besser zu strukturieren. In diesem Moment ist es nicht notwendig, alle Stile Aspekt zu definieren, aber es könnte hilfreich sein, zumindest das Hauptkonzept abzugrenzen. Grafikstil ist ein wichtiger Punkt eines Designs weil es hilft, die Markenpersönlichkeit zu kommunizieren. Erinnern Sie sich an die drei Werte, die wir zu Beginn der Lektion ausgewählt haben, werden sie von jedem Grafikstil bekannt gegeben und unterstrichen. Deshalb müssen Sie, wenn Sie eine Marke aufbauen, viele verschiedene Aspekte definieren, von Schriftart über Zeichen, Schaltflächen und bis hin zu Bildern. Alles muss schön und konsequent sein. Den richtigen Grafikstil zu finden, ist etwas, das Ihnen während des gesamten Prozesses der Kunstrichtung und des Designs helfen wird . Es ist eine erste visuelle Erkundung, um mit der Abbildung der Richtung zu beginnen , die Ihr Projekt folgen wird. einmal, um Ihren Stil zu definieren beginnt von dem, was Sie haben und beschränken Sie sich nicht. Zum Beispiel können Sie denken, bestimmte Muster oder bestimmte grafische Elemente zu entwickeln , um Ihnen die zukünftigen Schritte Ihres Projekts vorzustellen. Aber es ist immer wichtig, am Anfang nicht zu übertreiben, einfach zu bleiben. Denken Sie daran, dass Sie für Digital denken müssen , wo alles bereit sein muss, transformiert zu werden. Wenn wir wieder einen Blick auf das werfen, was wir gesammelt haben, können wir einzelne Features isolieren und beginnen, Formen und Linien vorzustellen , die auf unser Design angewendet werden können. Zum Beispiel, ausgehend von Matisse Ausschnitten, können wir flache organische Formen isolieren, die innerhalb des Projekts verwendet werden , und einige undefinierte Linien. Wir können auch über eine fotografische Größe nachdenken, die gut mit den Entscheidungen führt, die wir zuvor getroffen haben. Nun, wir werden am Ende unserer dritten Lektion ankommen, nicht so schwierig? Jetzt ist es Zeit für Sie zu üben, was Sie bisher gelernt haben. Ich kann es kaum erwarten, Ihre Ergebnisse zu sehen. Bleiben Sie dran und sehen Sie sich bei unserer nächsten Lektion. 5. Online-Spiel: Hallo an alle und willkommen zu unserer Lektion Nummer 4. Machen Sie sich bereit und befestigen Sie Ihren Sicherheitsgurt. Dieser wird sehr aufregend sein. Endlich springen wir in die Welt der UI. Wie wir es immer tun, , um einen Schritt-für-Schritt-Prozess zu verfolgen wird der erste Teil der Lektion, um einen Schritt-für-Schritt-Prozess zu verfolgen, auf eine grundlegende Einführung über die tatsächliche Bedeutung von UI und einige sehr gute Fallstudien konzentrieren . Der zweite Teil wird stattdessen ganz der Entwicklung unseres Projekts gewidmet sein. Wie ich bereits erwähnt habe, ist das Verständnis, was der Begriff UI wirklich bedeutet, eines der Hauptziele der heutigen Lektion. Wir alle wissen, wie es schnell zu einem sehr vertrauten Begriff wurde, aber lassen Sie uns sicher sein, es jedes Mal richtig zu verwenden, wenn wir uns darüber reden. Die korrekte Verwendung dieses Begriffs ist unerlässlich, da UI die Art und Weise ist, in der wir als Designer sicherstellen, dass wir die Bedürfnisse unserer Kunden erfüllen und gleichzeitig eine einfache und intuitive Umsetzung der von uns entworfenen digitalen Produkte sicherstellen. Letzt möchte ich, dass Sie in dieser Lektion verstehen, dass selbst wenn wir innerhalb einiger Grenzen und Regeln entwerfen, dies nicht bedeutet, dass unsere Ergebnisse schlechter oder weniger kreativ sein werden. Immer wenn wir einen guten Weg finden, Best Practices und Branding-Anforderungen zu verschmelzen , schaffen wir einen echten Mehrwert. Beginnen wir mit einer sehr kurzen Zusammenfassung dessen, was wir während der dritten Lektion gemeinsam gemacht haben, nämlich der Stil unserer digitalen Identität in Bezug auf Farben, Typografie und grafische Elemente. Wir haben auch einige fotografische Referenzen gesammelt. Wenn Sie möchten, können Sie alle Materialien in einem Brett sammeln und es während dieser Lektion griffbereit halten. Wir haben wirklich alles, was wir brauchen, um zu starten, also lassen Sie uns entdecken UI. Was genau ist UI und warum ist es so wichtig, eine digitale Identität aufzubauen? User Interface Design ist der Prozess der Herstellung digitaler Schnittstellen mit einem Fokus auf Aussehen oder Stil. Designer Ziel, Designs Benutzer zu erstellen, wird einfach zu bedienen und angenehm zu finden. Das ist genau das, was wir brauchen. Um die Dinge noch klarer zu machen, sehen Sie hier eine einfache Grafik, aus der Sie den Unterschied zwischen UI- und UX-Design verstehen können . Diese Begriffe sind oft verwirrt, aber wie Sie sehen können, ist der Unterschied durchaus sichtbar. UI innerhalb von UX ist das, was wir brauchen, um das resultierende Aussehen unseres Designs spezifisch zu definieren. Wenn wir noch genauer sein möchten, gibt es auch einen kleineren Teil der UI genannt, die grafische Benutzeroberfläche, die sich auf alles bezieht, was die visuelle Wahrnehmung betrifft. mit einem praktischeren Ansatz sprechen, könnten wir sagen, dass UI tatsächlich eine Menge dieser Elemente beinhalten kann. Wir müssen eine Website erstellen. Aber um dich nicht mit zu vielen Informationen zu überwältigen, bleibe ich bei diesen drei. Sowohl weil sie die am häufigsten verwendeten und bekanntesten sind, als auch weil sie uns erlauben, Spaß zu haben, während wir darüber nachdenken, wie sie zu entwerfen. Wir könnten jedoch einige goldene Regeln festlegen, bevor beginnen, Schaltflächen, Symbole und Formen gründlich zu untersuchen. Denken Sie daran, zusammenhängend in dem, was Sie entwerfen. Wenn Sie denken, dass ein bestimmtes Verhalten zu Ihrem Zweck passt, dann halten Sie sich daran. Der Benutzer wird es Ihnen danken, weil er in der Lage sein wird, alles zu finden , was er braucht, ohne dass jemand erklärt, wo er danach suchen soll. Beginnen wir unsere Analyse von Schaltflächen. Das erste, was Sie wissen müssen, ist, dass sie sich von anderen Elementen in der Seite unterscheiden müssen, so dass sie leicht bemerkt, erinnert und verwendet werden können. In vielen Websites, ob es sich um kommerzielle, institutionelle oder informative handelt, sind Schaltflächen aus verschiedenen Gründen den Zielort des Nutzers. Sie symbolisieren das Erreichen der Aufgabe des Benutzers. Deshalb müssen sie erkennbar, leicht zu finden und erklärend sein. Meinung nach ist Spotify eine Marke, die tatsächlich Tasten auf die klarste Art und Weise verwendet. Aber bevor ich dir die nächste Folie zeige, würde ich gerne ein Experiment machen. Versuchen Sie, an Ihrem Spotify Dashboard zu denken. Was ist das erste, was dir in den Sinn kommt? Man erinnert sich an jedermanns Aufmerksamkeit auf den ersten Blick ist offensichtlich der Unterschied zwischen dem dunklen Hintergrund und den grünen Knöpfen. Gibt es einen besten Weg, um Dinge bemerkt zu werden? Vielleicht ist es nicht immer so einfach, mit Knöpfen so explizit zu sein. Es hängt wirklich von den Elementen unserer digitalen Identität ab. In anderen Fällen können Symbole uns helfen. Icons sind ein super wichtiges Fahrzeug für Ihre digitale Identität. Sie helfen Ihnen, das Imaginäre rund um Ihre Marke aufzubauen. Sie können sie verwenden, um seine visuelle Eigenschaft zu verstärken und die Benutzer zu unterstützen, während sie auf Ihrer Website navigieren. Letzt, denken Sie daran, dass sie auch ein unglaubliches Werkzeug sind, mit dem Sie über kulturelle Barrieren hinausgehen und mit jedem sprechen können . Hier können wir ein gutes Beispiel für Identitätsverstärkung durch Symbole sehen. Uber behaupten, dass das Design ihrer Ikonen vom Transport inspiriert ist. Hier ist ein kurzes Video, das das Raster zeigt, in dem die Leute von Uber ihr Wand-Icon-System entworfen haben. Wie wir im zweiten Teil dieser Lektion sehen werden, ist die Verwendung eines Rasters eine gute Möglichkeit, die Konsistenz zwischen den grafischen Kompositionen der verschiedenen Symbole sicherzustellen . Dies ist ein kurzer Überblick über ihr Icon-System. Wie Sie sehen können, können sie sofort als Teil desselben visuellen Universums erkannt werden. Sie haben konsistente Eigenschaften, ausgewogene Details, und vor allem gibt es sofort eingängig und eine echte Anleitung für den Benutzer. Sie werden sie nicht zufällig missverstehen. Der dritte und letzte Aspekt, den ich gerne mit Ihnen analysieren würde, ist einer, der vielleicht auf den ersten Blick versteckt werden könnte, aber das wird seine strategische Bedeutung offenbaren, wenn Sie tief ein gut gemachtes Design analysieren. Wir sprechen über Formen. Formen sind sehr interessant zu betrachten, nicht nur aus konsistenter Perspektive, sondern auch, weil sie die Macht haben, eine echte Bedeutung in Bezug auf Kommunikation und Ausdruck zu vermitteln . Wie Symbole können Formen sprechen. Hier ist ein Beispiel für eine App: Schrein, entworfen nach einer kohärenten Verwendung von Formen. Wir können sehen, wie Winkel die Grundlage vieler UI-Elemente innerhalb der App sind. Ausgehend von Symbolen über Schaltflächen, Kanten und andere kleine Edelsteine finden Sie im gesamten Layout verstreut. Auch Spotify kann eine gute Fallstudie bieten, wenn es um Formen geht. Die Leute bei Spotify nahmen einige visuelle Charakteristiken aus der kreisförmigen Typphase als Ausgangspunkt. Ich denke, dies ist ein super intelligenter Ansatz, um ein großartiges UI-Ergebnis zu gewährleisten. Hier können wir sehen, wie sie wiederkehrende grafische Muster für Buchstaben und Blatt genommen und in das Design des Wand-Icon-Systems übersetzt haben. Gleiche Kanten, gleiche Winkel, gleiche Optik und Haptik. Nach all diesen großartigen Beispielen, denke ich, dass wir wirklich inspiriert sind. Was ist mit der UI-Basis unseres Projekts zu beginnen? In diesem Abschnitt werde ich Ihnen zeigen, wie ich meine Ergebnisse in Bezug auf Symbole, Schaltflächen und Formen entwickelt habe . Ich würde gerne, dass Sie diese Überlegung so berücksichtigen, wie es ist und allgemein für Ihr eigenes Projekt führt, auch wenn das allgemeine Aussehen und Gefühl, das Sie wählen, sich sehr von meinem unterscheidet. Beginnen wir mit den Symbolen; um mit dem Aufbau des Systems zu beginnen, lassen Sie uns ein 24 pro 24 Pixel Raster einrichten. Dies wird Ihr Design-Spielplatz sein. Innerhalb des Rasters definieren wir einen sicheren Bereich von 20 pro 20 Pixel. Dies ist der Bereich, in dem Sie Hauptdesigns werden Form annehmen. Ich empfehle nur, Ihr Raster mit anderen Elementen zu integrieren. Ich spreche von Hilfslinien, vertikalen, horizontalen und diagonalen und anderen geometrischen Formen, die nützliche Interaktion schaffen , die zu unverwechselbaren Merkmalen für Ihre Symbole werden können. Hier ist meine erste Ikone. Im Anschluss an das Gitter habe ich runde Form als Hauptkante verwendet. Ich entwerfe mit einem 45-Grad-Winkel und versuche generell, mich an die Regeln zu halten, die ich in den vorangegangenen Phasen aufgestellt habe. Was das grafische Aussehen angeht, wähle ich einen dicken Strich und weiche Linien, die, wie wir sehen werden, mit meinen grafischen Formen übereinstimmen. Kleiner Hinweis, wie Sie sehen können, das Aussehen und Gefühl und folglich, welche Symbole kommunizieren, kann sehr unterschiedlich sein mit nur einem leichten Schalter von einigen Parametern, wie zum Beispiel, Schlaganfall. Deshalb ist es so wichtig, sorgfältig Ihren Icon-Stil zu wählen. Um das Design zu vervollständigen, wähle ich aus meiner Farbpalette, die richtigen Töne für die verschiedenen Teile meiner Ikone und als letzten Schliff, um noch mehr die Werte zu umarmen und hervorzuheben, die ich die Matisse Arbeit erkenne. Erinnerst du dich an Lektion drei? dem Fischaugen-Effekt von Adobe Illustrator habe ich beschlossen, dem farbigen Bereich meines Designs eine unscharfe Note Mitdem Fischaugen-Effekt von Adobe Illustrator habe ich beschlossen, dem farbigen Bereich meines Designs eine unscharfe Notezu verleihen. Hier sehen Sie einige weitere Beispiele aus meinem Icon-System. Passend zu dem Stil, den ich für meine Symbole gewählt habe, gehe ich mit einigen abgerundeten Ecken und insgesamt weichen Look and Feel, auch für Knöpfe. In Adobe XD habe ich eine Ecke mit einem Radius von 35 Grad für alle verschiedenen Schaltflächen ausgewählt. Was die Formen anbelangt, um die Verwendung von weicheren abgerundeten Elementen noch mehr zu verbessern, entschied ich mich, diesen grafischen Stil zu einem definierenden Muster von meiner Homepage zu machen, was ihn in vielen verschiedenen Modulen entlang der Seite sichtbar macht. Hier können Sie beispielsweise sehen, wie ich mich entschieden habe , meine Formen in das Kalendermodul zu integrieren. Ein netter und einfacher Trick, aber sehr nützlich, um meine digitale Identität zu stärken. Hier sind wir Jungs, am Ende dieser sehr intensiven Lektion. Ich kann es kaum erwarten, Ihre Ergebnisse hochgeladen zu sehen und Sie im nächsten Kapitel zu treffen. 6. In den Fluss: Hallo an alle. Willkommen zu unserer neuen Lektion. In den folgenden Folien werden wir darüber sprechen, wie Sie Benutzerverhalten identifizieren können , um eine perfekte User Journey zu erstellen. Wir werden entdecken, was wir unter menschlichem zentrierten Design meinen und wie es funktioniert. Wir werden dann unser Zielstereotyp definieren, das wir unsere Persona nennen werden. Um am Ende unserer Lektion unsere Website-Architektur zu definieren. Wir können die Website-Struktur als ihr Skelett betrachten und wir müssen einen Schritt für Schritt Prozess folgen, um es zu definieren. In dieser Lektion werden wir über drei dieser notwendigen Schritte sprechen. Erstens, die Ziele unserer Website zu definieren , um zu definieren, was wir tun und warum. Zweitens: Legen Sie ein Ziel fest, mit dem identifiziert werden kann, für wen wir planen. Drittens, das Verständnis der Reise, den Weg, den der Benutzer tun wird, um seine persönlichen Ziele zu erreichen, die wir auf unserer Website getan haben. Beginnen wir zunächst mit der Definition des menschlichen zentrierten Designs. Menschliches zentriertes Design ist die Praxis, die den Benutzer als Hauptfigur in den Mittelpunkt des Designprozesses stellt , immer unter Berücksichtigung seiner Bedürfnisse, versteckt oder nicht, seiner Wünsche, Ziele und Fragen. Wie ich bereits sagte, um menschliches zentriertes Design anzuwenden, müssen wir unseren Benutzer kennen und deshalb ihn studieren. Um dies erfolgreich zu erreichen, benötigen wir die so genannte Nutzerforschung, die nach einem quantitativen oder qualitativen Ansatz durchgeführt werden könnte. Der quantitative Ansatz basiert auf Zahlen, in der Regel lesen Leute Berichte, sammeln und analysieren Daten. Der qualitative Ansatz basiert im Gegenteil auf weniger Nutzern, basiert im Gegenteil auf weniger Nutzern, aber er geht in der Regel dank spezifischer Interviews und direkter Beobachtung sowie mit Hilfe von Workshops und Meetings tiefer . Trotzdem kann es manchmal passieren, sich selbst zu finden, ohne genügend Zeit oder Ressourcen, um echte Menschen zu finden, um zu interviewen. In diesen Fällen, um die Ergebnisse unserer Forschung zu garantieren, können wir eine Übung der Phantasie machen. Wir können damit beginnen, eine Reihe von Fragen zu definieren, um besser zu wissen, für wen wir entwerfen und welche das endgültige Ziel unserer Website ist. Am Anfang ist es besser, verschiedene Benutzer zu untersuchen, um die Antworten zu diversifizieren und ein größeres Spektrum möglicher Outputs zu geben. Zum Beispiel, für Matisse Website, kann ich mir vorstellen, dass der Benutzer könnte ein Sammler, ein moderner Kunstkritiker, ein Student oder einfach ein Kunstliebhaber sein. Zweitens können wir uns fragen, warum sich diese Menschen für moderne Kunst interessieren. Wenn wir eine Antwort geben, werden sie alle eine andere Perspektive haben. Um ein Beispiel zu machen, wird sich der Sammler dem Markt der zeitgenössischen Kunst nähern, um eine wirtschaftliche Investition zu tätigen, während der Schüler aufgrund des Bildungsbedarfs tiefer in das Fach gehen muss. Nach dieser Methode können wir weiterhin Fragen stellen und versuchen, sie zu beantworten, um unsere Benutzer besser kennen zu lernen. Zum Beispiel können wir fragen, wo sie von Matisse hören, oder was sie suchen und vor allem, warum sie Matisse entdecken müssen. Diese Frage ist besonders wichtig, um zu verstehen, inwieweit sich Matisse in unserer Benutzergröße von anderen Malern unterscheidet. Für die nächste Übung werden wir einen der Charaktere wählen, die unsere Fragen beantwortet haben, und wir werden versuchen, eine tatsächliche Welt um ihn herum zu bauen, daher werden wir einen generischen Benutzer in eine echte Person verwandeln, die mit seinen Bedürfnissen bewaffnet ist und Ziele, werden wir eine Persona aus ihm bauen. Um meine Persona zu definieren, wähle ich den Kritiker aus. Ich stelle mir vor, ihr ein Gesicht und Alter zu geben , um sie zu sprechen, und ich fügte ihr ein paar Zitate hinzu. Um sie besser zu verstehen, definiere ich ihre Bedürfnisse und ihre rationalen und emotionalen Ziele. Sie muss einige Artikel für eine lokale Zeitung schreiben, aber sie träumt davon, eine neue Kunst Avanguardia zu entdecken und als beste Kritikerin aller Zeiten in Erinnerung zu werden. Jetzt, da wir unsere Persönlichkeit klar definiert haben, können wir damit beginnen, Ihre Customer Journey zu erstellen und sie durch den Weg zu führen, den sie innerhalb der Website folgen wird , um die Informationen zu erreichen, die sie benötigt und ihre endgültigen Ziele zu erfüllen. Um eine korrekte Customer Journey zu erstellen, können wir uns vorstellen, eine Zeitachse in verschiedene Momente zu teilen und einige Schmerzpunkte darin zu beheben. Schmerzpunkte sind schwierige Momente für den Benutzer, in denen wir, als Designer handeln können, um Probleme zu lösen. Das ist im Wesentlichen der Grund, warum wir ab einer User Journey eine vollständige Liste der Anforderungen für unsere Website erhalten können. Dies ist ein Beispiel dafür, wie eine Customer Journey strukturiert wird. Wie Sie sehen können, stellt jede Zeile ein anderes Thema im Zusammenhang mit dem Benutzer, der ausgefüllt werden muss. Zum Beispiel wählte ich für Camila, fünf verschiedene Momente während ihrer Reise. In jedem habe ich versucht, mir eine mögliche Gedanken und Emotionen vorzustellen , und ich benutzte Emojis, um eine visuell definitere Reaktion zu haben. Wie Sie in dem Moment sehen können, in dem sie Artikel und Publikation liest, unsere Emoji Ausdruck Verwirrung, dies könnte an einem Schmerzpunkt betrachtet werden und wird daher eine große Gelegenheit für uns, über einen Weg, um ihre Reise zu machen einfacher. Wenn wir unsere Website gestalten, kümmern wir uns darum, Informationen in Schlüsselwörtern auf die einfachste und klarste Art und Weise wie möglich zu geben . Um mit unserer Nutzerforschung zu einem Schluss zu kommen, haben wir eine letzte Übung zu tun, sie nennt sich die Only-ness-Aussage. Only-ness ist bei weitem der stärkste Test, um eine strategische Position zu definieren. Marken brauchen eine starke Positionierung, weil Kunden Präferenzen haben Wenn Sie nicht auffallen, verlieren Sie sie. Um das Positionierungsspiel zu gewinnen, müssen Sie eine einfache Frage beantworten, was macht Sie die einzige? Für unsere Matisse Website wird das Only-ness-Statement so klingen: „Matisse Website wird das einzige Online-Portfolio sein, das es vorschlägt und sich auf Matisse Themen für Kuratoren bezieht, die etwas Schlaues schreiben wollen.“ An diesem Punkt der Lektion haben wir genug über unsere Endbenutzer und Ziele gewusst, es ist Zeit, die Erfahrung unserer Website zu strukturieren. Die Disziplin, die Struktur, es nennt sich das Interaktionsdesign. Daneben brauchen wir auch eine weitere Schlüsseltechnik, die Informationsarchitektur genannt wird. Interaktions-Designs versuchen, Benutzer mögliche Gedanken und Verhaltensweisen zu definieren, sowie die Art und Weise, wie das System auf sie antworten wird. Genauer gesagt verwendet Interaction Design Informationsarchitektur, um Unterteilungen, Gruppen und Beziehungen darzustellen und zu visualisieren , die innerhalb des Websitesystems existieren. Informationsarchitektur auch bekannt als IA, definiert das Skelett der Website zeigt uns die verschiedenen Abschnitt, die es teilen. In bestimmten Fällen, in denen wir mit einem komplexeren System konfrontiert sind, hilft es uns, eine Benutzerflüsse zu entwickeln. Für Flows verstehen wir die Ergebnisse, die den vollständigen Pfad visualisieren , den Benutzer über die gesamte Lösung folgen. Es gibt verschiedene Arten von Informationsarchitektur, am häufigsten sind das hierarchische System, das sequentielle und die Verwendung einer Matrix. Lassen Sie uns versuchen, sich zum Beispiel den IA unserer Website vorzustellen. Diese können einer sequentiellen Organisation folgen, in der Benutzer zwischen verschiedenen Themen auf derselben Ebene wechseln. Im Gegenteil, dies könnte die Visualisierung des gleichen Inhalts in einem hierarchischen Diagramm sein, in dem Benutzer Schritt für Schritt durch den Inhalt gehen können , um ihre Aufgaben zu erfüllen. Sind Sie bereit, die Basis Ihrer Website zu erstellen? Beenden Sie die Übung, die wir in dieser Lektion durchgemacht haben, und seien Sie bereit für die, die kommen Warten Sie im nächsten Kapitel auf Sie. 7. Lauf: Hallo an alle, willkommen zu unserer sechsten Lektion. Es ist an der Zeit, das Gelernte in die Praxis umzusetzen. Also lasst uns Drahtrahmen. In den folgenden Folien werden wir Schritt für Schritt als ersten Schritt vorgehen, aber wir werden unsere Matisse Zeichenfläche einstellen. Danach werden wir sehen, wie Sie die Module definieren, die Ihre Homepage füttern und sie in einem Wireframe platzieren. Dabei müssen wir uns immer an unser letztes Ziel erinnern , die Homepage für die persönlichen Webseiten unseres Charakters zu gestalten. Das ist der Grund, warum wir während dieser Lektion sowohl auf der Designseite als auch auf den Inhalt ein Auge behalten werden. Wir werden sehen, wie sie zutiefst miteinander verbunden sind. Zunächst müssen wir wählen, auf welchen Dimensionen wir unsere Homepage gestalten möchten. Natürlich, entweder eine Website, kann es von verschiedenen Geräten gesehen werden und es muss für jeden von ihnen funktionieren. Aber in meinem Fall, aus Gründen der Präsentation, werde ich für einen Desktop-Bildschirm entwerfen. Hier sehen Sie die gebräuchlichsten sind, was die größere Auflösung für diese Klasse ist. auf mobilen Websites kommen, werden Sie wahrscheinlich von dem mobilen ersten Ausdruck gehört haben. Aber was bedeutet es? Heute genießen die meisten Menschen Website direkt von ihren Telefonen. Viele Designer ziehen es vor, zuerst für Mobilgeräte und nicht für Desktop-Bildschirme zu skizzieren und hier können Sie die Auflösung sehen die die meistverkauften und beliebtesten Geräte darstellt. In anderen Fällen und für einige besondere Erfahrungen, wie redaktionelle oder interaktive. Wie zum Beispiel, eine virtuelle Realität passieren Tablet-Größe könnte besser geeignet sein, um zu entwerfen, Ich werde vorschlagen, die Testversion von Xd herunterladen, eine Software von Adobe lizenziert, die es an unsere Designer veröffentlicht wurde , um leicht erstellen ihre Layouts. Auch Skizze ist ein großartiges Werkzeug, wenn es um Designer-Layout auf eine schnelle und super präzise Weise geht. Die Skizzen-Testversion ist für den ersten Monat kostenlos. Danach können Sie $99 für Ihre persönliche Lizenz bezahlen. Wenn Sie keine Zeit haben, ein neues Programm zu lernen, könnten auch Adobe Illustrator oder Photoshop geeignete Werkzeuge zum Entwerfen sein. Aber ich schlage Ihnen herzlich vor, in Ihrer Skizze zu lernen, weil sie wirklich intuitiv und äußerst hilfreich sind , wenn es um digitale geht. Also Jungs, lasst uns mit unserem Klassenprojekt gehen. Lasst uns ein Drahtmodell bauen. Kurz gesagt, wir könnten sagen, dass das Drahtmodell das Skelett unserer Homepage ist , das alle Elemente unseres Layouts sammelt und organisiert. Das erste, was zu tun ist, um es zu bauen, ist, zurück zu unserer Informationsarchitektur zu gehen und sie beim Entwerfen im Auge zu behalten. Zum Beispiel, wenn wir über Matisse und das endgültige Ziel seiner Website nachdenken, die seine Arbeit zeigt und das sind Poesie. Wahrscheinlich werden wir große Bilder, viele grafische Zeichen und große Texte verwenden . Zuallererst wird der Platz oben auf der Seite die Kopfzeile beherbergen. Die andere, ist ein wesentliches Element, weil es dem Benutzer ermöglicht, jeden Abschnitt der Website jederzeit zu erreichen , wenn sie i variabel sein könnte, sind in der Regel entworfen es die maximale 100 Pixel i für eine Desktop-Auflösung. Das erste Must-Have-Element im anderen ist das Logbuch der Marke, das normalerweise auf die Homepage selbst umleitet. In meinem Fall werde ich Matisse Unterschrift als Logo platzieren. Ein weiteres notwendiges Element ist natürlich das Menü oder vielmehr alle Etiketten, die zu den verschiedenen Abschnitten unserer Website verlinken. Insbesondere in diesem Moment, in dem soziale Medien eine so wichtige Rolle in der Kommunikation spielen. Lassen Sie mich vorschlagen, dort zu platzieren, dort auch einige soziale Symbole. Sie müssen auf Ihrer Website sehr sichtbar sein. Platzieren Sie sie dort drin, könnte es eine gültige Option geben. In meinem Fall werden diese Symbole direkt mit dem sozialen Netzwerk von Matisse verknüpft werden. Über dem anderen könnten wir auch Platz für eine kommerzielle Folie bieten , in der der Benutzer zum Beispiel über Neuigkeiten oder bevorstehende Himmel informiert werden kann. In der Regel wird der Raum kommerzielle Website verwendet, um Kunden über Lieferdienste oder spezielle Angebote zu informieren. Okay, jetzt ist es an der Zeit, über den ersten großen sichtbaren Bereich unserer Website nachzudenken. Da dies der erste Inhalt sein wird, den Ihr Benutzer auf der Website landet, muss er fett sein. Bitten Sie den Benutzer, mit dem Scrollen fortzufahren und andere Inhalte zu entdecken. Aus diesem Grund finden Sie in der Regel Videos, große Bilder oder ein Karussell von Bildern. Dies ist der Moment, um zu verkaufen. Was die Kopie betrifft, denken Sie an einen bemerkenswerten Titel. Jedes Mitglied, um immer einen Call to Action hinzuzufügen. Wenn der Benutzer nicht scrollen kann, liegt dies daran, dass er klicken möchte. In der zweiten Schriftrolle werden wir den Charakter präsentieren, in meinem Fall, Matisse. Übertreiben Sie die Worte nicht. Das zentrale ist, dass die Leute nicht gerne ein paar Worte lesen, aber gut durchdacht wäre genug für den Benutzer, um schnell zu verstehen, worüber wir reden. In diesem Abschnitt habe ich auch beschlossen, etwas Platz für Angriffs-Wolke zu sparen. Es könnte nützlich sein, wenn Sie dem Benutzer die Chance geben wollen, sofort zu erreichen, was sucht und gleichzeitig, um auf einen Blick zu verstehen, worum es bei Matisse Kunst geht. Nachdem wir attraktiv und informativ mit unserem ersten Abschnitt, ist es an der Zeit, unsere tatsächlichen Inhalte mit einer Reihe von Modulen anzuzeigen angeordnet die innere Chu Spalte Bildschirm. Ich werde ein bemerkenswertes Beispiel der Arbeit von Matisse zeigen. Wie Sie sehen können, besteht jedes Modul aus einem Bild, einem Text mit Projekttitel und Kurzbeschreibung und einigen Texten. Diese Module sind potenziell endlos replizierbar. Aber lassen Sie mich noch einmal vorschlagen, die Aufmerksamkeit der Menschen nicht zu übertreiben, ist sehr flüchtig. Das Gute daran ist, dass, wenn der Benutzer Ihre Website bis zu diesem Punkt der Seite scrollt, es wahrscheinlich bis zum Ende fortgesetzt wird und wenn er bis zum Ende scrollt, er wahrscheinlich die nächste Matisse-Ausstellung besuchen möchte. Deshalb platzieren ihre Kalendermodul an dieser Stelle der Seite, könnte eine kluge Wahl am Ende der Website sein, versuchen Sie nicht, Ihre Benutzeraufmerksamkeit zu verlieren. Ich schlage vor, ihm einen schnellen Überblick aus dem Social-Media-Universum zusammen mit einer Zusammenfassung der anderen zu geben, so dass es weiterhin entdecken andere Bereiche Ihrer Website. Vergessen Sie nicht, Platz in der Fußzeile für ältere Legals-Infos zu sparen, und jetzt ist es an der Zeit, diesen Wireframe zu füllen. Dies bedeutet, dass wir in den folgenden Folien sehen, wie wir Inhalte entsprechend den Entscheidungen integrieren, die wir bereits in Bezug auf Grafikstil und Look and Feel zu entscheiden haben. Wenn Sie sich erinnern, haben wir während der vier Lektionen alle unsere visuellen Elemente in einem Brett gesammelt. Was du hier siehst, gehört mir, verwandt mit Matisse. Ich habe zwei verschiedene Telefone. In Bezug auf Größe und Stil eine tolle Farbpalette mit zwei verschiedenen Grauen, unregelmäßigen Formen und einigen Bildern mit natürlichem Licht und der romantischen Atmosphäre und ja, das ist meine füllen die Seite. den Adder angeht, entschied ich mich, mit einer transparenten Lösung zu gehen weil ich es vorziehe, mein wunderbares Bild im Vollbildmodus zu sehen. Ich wählte dieses Bild, um die Kraft der Matisse-Kunst zum Ausdruck zu bringen, dank seiner Farbe und Zusammensetzung und wegen seiner Komplexität brauche ich Titel, Texte und Call-to-Action, um deutlich hervorzuheben. Deshalb wähle ich Weiß für Texte und dunkelgrau für Schaltflächen. Wie Sie sich vielleicht erinnern, haben meine Knöpfe abgerundete Ecken, um eine Matisse Verspieltheit anzukündigen. Dies ist meine zweite Schriftrolle, wo der Benutzer eine Einführung über Matisse finden kann. Aus visuellen Gründen habe ich beschlossen, mehr Platz zu geben, um Cloud zu erkennen. Wie Sie hinter allen Inhalten entlang der Seite sehen können, entschied ich mich, die unregelmäßigen Formen charakterisieren Mattise Stil zu platzieren, wie für die Arbeit Highlights, Ich wähle verschiedene Arten von Fotografie zu verwenden, um das Geschichtenerzählen auszugleichen. Zum Beispiel habe ich für die Buntglasfenster ein Foto ausgewählt, ein Interieur y für die Lithographie, ich benutze direkt ein Autorenbild. Für Details aus der Garbe. Nur um ein weiteres Beispiel zu machen. Ich benutze ein Foto, das während einer Ausstellung aufgenommen wurde. Wie Sie sehen können, wähle ich die Symbole, die ich entworfen, die Azteken zu verwenden. gleichen Symbole, die Sie im [unhörbaren] Streifen direkt unter dem anderen finden können. Um die Verbindung zu den vorherigen Abschnitten nicht zu verlieren, entschied ich mich, meine grafischen Formen auch in das Kalender-Modul der Ausstellungen zu setzen. Im letzten Modul finden wir die Matisse Social Feeds, in denen es eine Mischung aus Fotografien, Ausstellungen und Kunstwerken geben könnte und am Ende der Seite gibt es die Fußzeile mit einem dunkelgrauen Hintergrund zu unterscheiden sie von der Homepage Farbexplosion. In meinem Fall entschied ich mich, das Newsletter-Abonnementmodul hervorzuheben. Je mehr Anhänger wir sammeln können, desto mehr wird unsere Botschaft weltweit verbreitet und das ist alles für diese Lektion, Jungs. Was meinst du? Bist du bereit, die Homepage deines Charakters zu erstellen? Ich kann es kaum erwarten, deine Kunstwerke zu sehen. Denken Sie daran, einige Kommentare zu hinterlassen, wenn Sie diese Lektion mögen oder wenn Sie nur Fragen haben, zögern Sie nicht, mich zu kontaktieren und Ihre Arbeit hochzuladen. Wir sehen uns im nächsten Kapitel. 8. Animation: Hallo Leute, hier sind wir. Dies ist unsere Lektion Nummer 7 und da wir uns dem Ende der Klasse nähern, ist es an der Zeit, der schönen Homepage, die wir entworfen haben, den letzten Schliff hinzuzufügen. Ja, wir werden über Animationen sprechen und wie sie den UI-Elementen auf unserer Seite einen Schub geben werden. Vielleicht wird es am Ende etwas wirklich Einfaches sein, aber glauben Sie mir, es wird ausreichen, um Ihre Benutzererfahrung zu verbessern. Diese Lektion soll auch zeigen und beweisen , dass die Designer arbeiten nicht mit dem Layout enden. Unsere Mission ist es sicherzustellen, dass die Marke auch für diese kleinen, aber bedeutenden Details wahrgenommen wird . Alle zusammen hinzugefügt, können eine zusätzliche Möglichkeit sein, Ihre Zielgruppe zu erreichen. Aber diese Details sind auch für Benutzer notwendig, da sie einen Dialog mit ihnen aufnehmen und ihre digitale Erfahrung klar und einfach machen, aber nicht ungewöhnlich oder so lustig und lohnend. Natürlich, selbst wenn dieser ein spannender Teil der Arbeit sein könnte, ist es wichtig, den Benutzer nicht zu überwältigen. Fügen Sie also keine Tonnen von Effekten oder super komplizierten Animationen hinzu. Denken Sie immer daran, dass weniger mehr ist. Fangen wir von der Basis an. In den folgenden Folien werden wir einige wesentliche Definitionen von Mikro-Interaktion und Handlungs-Feedbacks sehen, die lernen, wie sie im Wesentlichen funktionieren werden. Um von Anfang an klar zu sein, finden wir in diesem Diagramm eine Definition des Unterschieds zwischen ihnen. Mikro-Interaktionen werden durch eine Aktion oder durch eine Änderung des Systemzustands ausgelöst. Action-Feedback ist eine Antwort auf diesen Trigger, die visuell an den Benutzer kommuniziert werden so einen virtuellen Zyklus erzeugen. Darüber hinaus ist Feedback notwendig, um Benutzer auf dem Laufenden zu halten, damit sie sicher sein können, was in einem bestimmten Moment während einer Aktion passiert. Auch wenn man es nicht merkt, ist meist jedes digitale Produkt mit Mikrointeraktionen gefüllt. Wenn Sie sie nicht bemerken, während Sie eine App verwenden, na ja, es könnte bedeuten, dass sie gute sind. Bevor wir weitermachen, ist hier eine kurze Zusammenfassung der Empfehlungen und Best Practices, die wir in den vorherigen Folien erwähnt haben. Denken Sie daran, dass es sehr wichtig ist, Gewohnheiten zu erstellen, damit Benutzer sich leicht an das digitale Erlebnis gewöhnen können, das sie leben. Übertreiben Sie nicht Redundanzanimationen, sondern stellen Sie sicher, dass Benutzer mit der Schnittstelle kommunizieren und sie verstehen. Nun, nach dieser Empfehlung ist es jetzt an der Zeit, einige großartige Beispiele für Interaktionen, Animationen und Feedbacks zu sehen. Ich hoffe, sie werden Sie verstehen lassen wie selbst die kleinste Twist einen großen Unterschied in Bezug auf den digitalen Markenerfolg machen könnte . Hier sind wir wieder. Dies ist die Liste, die wir in Lektion 4 gesehen haben. Als wir unsere UI-Elemente zum ersten Mal trafen, wie Sie sich vorstellen können könnte jeder von ihnen seinen eigenen animierten Effekt haben, seine Leistung verbessern und es dem Benutzer klar machen kann. Aber natürlich, da wir wenig Zeit haben, werden wir schnell einen Überblick durchlaufen. Ausgehend von der einfachsten und gebräuchlichsten Animation finden Sie einige komplexe, die dem Benutzer helfen könnten, Ihre Marke in ihrer Gesamtheit wahrzunehmen. Deshalb wähle ich ein Beispiel, um Ihnen zu zeigen, die am meisten mit den Elementen zusammenhängen, die wir bereits während unserer Klasse entworfen haben. Ich bin sicher, sie werden Ihnen erklären, wie diese Animation tatsächlich dazu beitragen kann, Ihre digitale Identität aufzubauen Ihren Entwürfen zusätzliche Bedeutungen zu geben. Beginnen wir mit den Symbolen. In Lektion Nummer 4 haben wir gesehen, wie einige Parameter während des Entwurfs geändert werden, können wir auch die Werte ändern, die sie kommunizieren. Dasselbe gilt für Animationen wie wir sie entsprechend unserer Markenpositionierung gestalten können. Zum Beispiel können wir auf den ersten Blick den Unterschied zwischen den Symbolen oben und denen am unteren Rand dieser Seite wahrnehmen . Während die ersten klar geschnitten sind, sind die letzteren weich und flüssig. Hier, sicher, die oben, geben ein sofortiges Gefühl von Verspieltheit, während die unteren einen Lauf zu nehmen scheint bevor sie sich vollständig ausdrücken, sobald sie gefüllt sind, eine dynamischere Wahrnehmung zu geben. Ja, das können wir auch für Knöpfe sagen. In dieser Folie zum Beispiel, während die Umrisse sehr beruhigend ist den Benutzer bis zur Aktion führt, ist die zweite direkt und informativ auch mit Hilfe der grünen Farbe am Ende. Denn ja, Feedback kann auch durch Farben gegeben werden. Hier sind zwei interessante Beispiele, in denen Interaktion visuell mit dem verbunden ist, was sie tatsächlich bedeuten, auf wörtliche Weise ihre Werte mit Formen und Farben kommuniziert. Textfelder betrifft, können wir sagen, dass es verschiedene Möglichkeiten gibt, wie wir sie steigern können, indem beispielsweise eine formellere oder informellere Wendung der Aktion, eine einfache Texteingabe zu füllen, geben. Aber wie wir bereits gesagt haben, können nicht nur Mikro-Interaktionen angewendet werden, um den Nutzern eine genauere Wahrnehmung unserer Marke zu bieten . Einige Animationen können in direktem Zusammenhang mit unserer digitalen Identität stehen, wie die, die das Logo und andere Seitenelemente betreffen. Lassen Sie uns zum Beispiel über das Logo sprechen. Wir alle betrachten es als den offensichtlichsten Ausdruck unserer Marke. Aber denken wir jemals darüber nach, es zu animieren, da wir auf einer digitalen Umgebung handeln? Hier sind zwei verschiedene Logo-Animationen. Wie wir für Icons und Buttons gesehen haben, kann auch die Art und Weise, in der wir das Logo animieren, die Werte unserer Marke zum Ausdruck bringen. In diesen Fällen oben, während Mailchimp sofortiger und verdichteter ist, bekommt Ubers' Logo seinen Weg, Zeile für Zeile gefüllt. Es gibt wirklich viele andere Dinge, die wir tun können , wenn wir über Animationen für UI-Elemente sprechen. Schauen Sie sich die erste Ansicht Port von Hello Mondays Website zum Beispiel. Alles in der Rede Teil, können wir neben der Haupt-Illustration, die Text-Animation und das Öffnen der Sidebar mit der folgenden Interaktion auf über auf dem Menü Stimmen sehen die Text-Animation und das Öffnen der Sidebar mit . Wie Sie sehen können, ist alles sehr glatt und weicher und haftet an einer Schwarz-Weiß-Farbpalette. Hier ist ein weiteres Beispiel, das zeigt, wie Einfachheit auch viele Informationen liefern kann. Werfen Sie einen Blick auf die Menüanimation. Wenn Sie auf einem Etikett bestellen, können Sie sofort eine Vorschau dessen haben, was Sie in diesem Abschnitt sehen werden, was sehr hilfreich ist, um den Benutzer genau dorthin zu bringen, wo er hingehen möchte. Jetzt sind wir dran. Ich weiß, dass, wenn wir über Animationen sprechen, sich nicht jeder wohl fühlt. Sie scheinen immer schwer zu tun. Nun, lassen Sie uns tief drauf gehen, um zu sehen, was wir gemeinsam tun können. zunächst daran, dass ein großer Teil der Animation, die Sie auf einer Website sehen , direkt mit Code erstellt wird, der Parameter mit CSS ändert. Dies bedeutet, dass unsere Rolle als Designer darin besteht, Entwicklern eine klare Vorstellung davon zu geben , was wir tun wollen. Wir können ihnen direkte Links zu einigen Online-Referenzen geben, die wir mögen oder Prototypen etwas. Für diese zweite Option haben wir verschiedene Werkzeuge, die wir verwenden können. Adobe After Effect ist großartig, da es uns erlaubt, sehr präzise bei der Bereitstellung eines Mock Up dessen zu sein , was wir gerne online sehen möchten. Für die einfachsten Animationen sind zum Beispiel GIFs. Wir können auch Adobe Photoshop verwenden. Aber, um eine breite Palette von Animationen abzudecken undviel Zeit zu sparen, viel Zeit zu sparen, wird das Prinzip das beste sein. Nicht so sofort, aber sicherlich die Mühe wert. Ich habe Adobe After Effect verwendet, um zwei Animationsbeispiele zu erstellen , die ich gerne auf meiner Matisse-Website sehen würde. Der erste ist der Aufruf zu Aktionen über Wirkung. Um die Verspieltheit und unpräzise Linien aufzuzeichnen, erkennen wir, dass ich als ikonisch des Matisse-Stils beschloss, einen weichen Übergang zu verwenden, um den Knopf auf meine Aktion zu antworten. Ich wollte auch die Symbole animieren. Wir sehen innerhalb der Tech-Tasten für diese Elemente, Ich wähle, um das ungenaue Farbfeld zu betonen, es als bewegte Bewegung zu geben, wenn ich über die Tasten gehe. Was ist mit den Elementen auf Ihrer Homepage? Welches und wie möchten Sie sie animieren? Vergessen Sie nicht, Ihre Ergebnisse auf den Kommentaren hochzuladen. Dann sind wir hier Jungs. Dies ist das Ende dieser Lektion. Jetzt komm mit mir zum nächsten. Ich gebe Ihnen einige Best Practices, um unser Projekt abzuschließen. 9. Best Practices: Hallo, alle. Willkommen zu dieser neuen Lektion. Da unsere Arbeit an dieser Stelle erledigt ist, in den folgenden Folien gebe ich Ihnen in den folgenden Folieneinige hilfreiche Ratschläge für das Gesamtmanagement des Projekts. Wie Sie sehen können, werden sie im Grunde eine Zusammenfassung bewährter Praktiken sein. Um genau zu sein, werden wir verstehen, was Design mit Pixel-Perfektion bedeutet und wie man grafische und fotografische Richtlinien erstellt. Jeder dieser Punkte ist notwendig, um die Konsistenz innerhalb Ihrer Website zu gewährleisten. In dieser Phase der Klasse sprechen wir über die nächsten Schritte, die es Ihnen oder anderen Designern in Ihrem Team ermöglichen , die großartige Arbeit, die Sie geleistet haben, weiterzumachen und neue Seiten derselben Website zu entwerfen. Deshalb brauchen wir Regeln, um klare grafische und fotografische Richtlinien einzuhalten. In der Tat, wenn wir uns ansehen, was wir getan haben, ist es leicht zu verstehen, dass wir wahrscheinlich erst am Anfang unserer Arbeit stehen. Wir müssen unsere Website vervollständigen und die restlichen Seiten gestalten, die mit der Homepage und einem Teil desselben Systems übereinstimmen müssen. Sicher ist die erste Regel, die wir befolgen müssen, die Pixelperfektion. Dies hängt nicht direkt mit der Konsistenz zusammen, aber es wird uns ermöglichen, mit soliden Konstruktionsgrundlagen zu arbeiten und zukünftige Probleme zu vermeiden. Wie Sie vielleicht bereits wissen, ist ein Pixel das kleinste kontrollierbare Element eines Bildes, das auf dem Bildschirm mit 1.920 Pixeln von 1.080 Pixeln dargestellt wird. Zum Beispiel können wir 1.080 Spalten und 1.920 Zeilen von Pixeln haben. Daher beträgt die Gesamtzahl der Pixel 2.073.600 Pixel auf dem Bildschirm. Eine pixelperfekte Methode zu folgen bedeutet schärfere Exporte und präzisere Kunstwerke zu haben. Pixel verhalten sich wie ein super winziges Raster und wir müssen uns an diesem Raster halten, um sicherzustellen, dass unser Design perfekt ist. Was wir tun müssen, um Pixelperfekt zu sein, ist, vor allem, ein Auge auf Zahlen zu behalten. Unsere äußere Dimension und alle Elemente, die wir auf der Seite entwerfen werden, müssen ohne Komas voll sein. Symbole müssen auch innerhalb eines präzisen Pixelrasters gestaltet werden und sich nicht an den Rändern überlappen. Wenn wir zum Beispiel auf unsere Icons zurückblicken, können wir sehen, dass wir bereits im Raster entworfen haben. Wir legen einige Geometrie-Hilfslinien fest und verwenden sie, um unsere Symbole zu zeichnen, wobei Grenzen und Richtungen respektiert werden. Unsere Füllmethode überlappt das Raster, aber dies kann als eine grafische Website-Wahl betrachtet werden, und es beeinträchtigt nicht die Methode, die wir zum Entwerfen unserer Symbole befolgen. Nun, da wir wissen, wie man einen großen Designer Höflichkeit zu gewährleisten, lassen Sie uns verstehen, wie man alle Regeln, die wir brauchen, um unsere Website zu entwerfen, in eine grafische Stilführung verschmelzen . Wenn Sie sich Unternehmen wie Dropbox, Google und Spotify ansehen, werden Sie feststellen, dass jeder von ihnen seine eigene einzigartige Ästhetik hat. Über all ihre Produkte hinweg gibt es ein starkes Gefühl von Konsistenz und Einheitlichkeit. Dies geschieht auch, weil sie klare Richtlinien zu respektieren haben, aber was genau ist ein Styleguide? Wir können es als ein Dokument betrachten, das das gesamte Designsystem zusammenfasst und als Leitfaden dient, sowohl für die Gestaltung neuer Elemente als auch für die folgende Umsetzung. Ein Styleguide als Ganzes kann mehrere Abschnitte haben und eine große Anzahl von Themen erkunden, aber für diesen Klassenzweck werde ich nur einige Beispiele machen, die mit den Elementen zusammenhängen, auf die wir uns bereits konzentriert haben. Ganz klar: Je mehr Sie ins Detail gehen, desto konsistenter wird Ihr Design sein. Lassen Sie uns zum Beispiel über Farben sprechen. In diesem Styleguide können wir alle Entscheidungen sammeln, die wir zuvor in Bezug auf die Palette getroffen haben, und definieren, für welche Elemente Designer eine bestimmte Farbe verwenden sollten. Beispielsweise werden Beschichtungsaktionen immer in ihrem dunkelgrau für den Standardzustand angezeigt. Hat für Typografie, können wir eine Liste von Größen definieren, die durch alle Seiten verwendet werden. Zum Beispiel wird jeder große Titel auf Panamera Regular 120 Punkt sein. Der Körper wird stattdessen immer in Panamera Light 36 Punkt sein. Um die Dinge einfacher zu machen, gibt es einige Codes wir verwenden können, um auf bestimmte Titel Verwendung beziehen. Beispielsweise ist H1 normalerweise mit Primärtiteln verknüpft, H2 ist vier sekundäre Titel usw. Für Schaltflächen müssen wir Dimensionen und Ränder angeben, aber wir müssen auch definieren, wie sie sich entsprechend ihrem Status ändern. Wir können zum Beispiel eine andere Farbe zuordnen, wenn der Benutzer darauf klickt und definieren, welche kommuniziert, dass die Schaltfläche angeklickt werden kann. Es kann auch sehr nützlich sein, ein Interaktionsbeispiel innerhalb des Styleguides zu haben. Auf diese Weise können wir sicherstellen, dass fremde Animationen entsprechend diesem Stil gestaltet werden , den wir für den ersten definiert haben. Wie ich bereits sagte, ist dies nur ein Vorgeschmack darauf, was ein Styleguide sein kann, aber aus diesen Beispielen können wir einige nützliche goldene Regeln gewinnen. zunächst daran, dass die Anleitung eine Ausgabe ist, die nach dem Entwurfsprozess kommt. Zusammenfassende es daher, entwerfen, bis Sie zufrieden sind, dann standardisieren Sie es. Es könnte großartig sein, wenn Sie auch einige Designprinzipien einbeziehen , die Sie während des Arbeitsprozesses inspiriert haben, zusammen mit einigen neuen Studien, um anderen Designern und Entwicklern zu ermöglichen , wann sie bestimmte Elemente verwenden. Jetzt ist es an der Zeit, in das letzte Kapitel dieser Lektion zu gehen, fotografische Richtlinien. Fotografische Richtlinien definieren, welche Art von Bildern Sie und andere Designer verwenden sollten, um die Stimme und Identität Ihrer Marke korrekt zu vermitteln. Uber, zum Beispiel, widmet viel Platz für die Fotografie in seinen verteilten Richtlinien, geht sehr tief ins Detail und berücksichtigt verschiedene Kategorien. Wie Sie sehen können, teilen die Menschen bei Uber Fotografie in Unterkapitel, die sich auf fünf Hauptthemen beziehen Interaktionen, Kompositionen, Casting, Beleuchtung, Farbe und Orte. Jedes Unterkapitel enthält Best Practices und Empfehlungen für dieses spezifische Thema. Aus Ubers Fallstudie können wir viel lernen. Zuallererst, halten Sie Ihre Marke immer im Mittelpunkt. Bei der Auswahl von Bildern, fragen Sie sich, Nach meinen Markenprinzipien, welche Bilder werden gut für seine Kommunikation sein? Dann denken Sie daran, die Arten von Themen zu definieren, die auf Ihren Bildern zu sehen sind und in welchem Kontext sie handeln werden. an dritter Stelle Definieren Siean dritter StelleLichter und Töne, die wesentlich sind, um bestimmte Emotionen und Gefühle zu vermitteln. Lassen Sie uns Uber Kategorien auf unserer Website ausprobieren. Erinnerst du dich an die Markenwerte von Matisse? Wir sagten, sie seien Unvollkommenheiten, Einfachheit und Unprätentiosität. Wahrscheinlich, anstatt nur Kunstwerke anzuzeigen, können wir annehmen, dass wir auch andere Arten von Inhalten zeigen. Nun, in Anbetracht der Bilder, die wir bereits in das Layout gelegt haben, können wir sagen, dass unsere Einstellungen in modernen Räumen mit natürlichen und warmen Dias geöffnet werden . Menschen, die im Mittelpunkt der Aufmerksamkeit stehen wollen, aber Matisse Kunst wird sein, deshalb werden Menschen nicht erkennbar sein. Bevorzugen, zum Beispiel, verschwommene Menschen im Hintergrund. Ihre Interaktion mit der Kunst wird immersiv und kontemplativ sein. Um dieses Kapitel zu beenden, hier sind einige zusätzliche Ratschläge, die ich Ihnen gerne geben würde. Immer versucht, qualitativ hochwertige Originalinhalte zu liefern. Es wird ein Super-Plus für Ihre Marke sein und die Benutzer werden es erkennen. Wenn Sie mit einem Budget sind, sollten Sie Aktienkataloge betrachten, einige von ihnen sind frei zugänglich und ermöglichen es Ihnen, großartige Bilder in hoher Auflösung herunterzuladen. Andernfalls vergessen Sie nicht, dass auch Illustration Ihre Markenidentität vermitteln kann. Geben Sie ihnen einen unverwechselbaren Stil und Sie sind bereit zu gehen. Leute, wir sind jetzt am Ende dieser Lektion. Vergessen Sie nicht, einige Kommentare zu schreiben, wenn Sie es lieben. Ich hoffe, Sie folgen mir zum nächsten, der gemeinsam das Ende unserer Klasse markieren wird. Wir sehen uns. 10. Ratschläge und Schlussfolgerungen: Hallo, meine lieben Freunde, hier sind wir. Dies ist die letzte Lektion unserer Reise. Ich bin sehr traurig, aber gleichzeitig bin ich mir auch ziemlich sicher, dass du alles, was wir gemeinsam gelernt haben, anwenden wirst , um etwas Erstaunliches zu entwerfen. Bevor wir uns gegenseitig verabschieden, habe ich ein paar Ratschläge über den Designprozess, den ich Ihnen gerne als Abschluss Ihrer PAF geben würde. In der Tat ist es nützlich zu wissen, dass es Tools und Best Practices gibt , die uns in den verschiedenen Phasen der Projektentwicklung unterstützen können. In dieser Lektion werden wir einige beliebte Tools sehen, die wir sowohl mit unserem Team als auch mit dem Kunden teilen können, die laufende Entwicklung unseres Projekts und einige Best Practices zum richtigen Exportieren Assets, damit Entwickler ihre beste Arbeit. Darüber hinaus werden wir auch feststellen, dass es einige einfache Regeln zu befolgen gibt , um ein freudiges Arbeitsumfeld unter den Teammitgliedern zu gewährleisten. Wir müssen uns wirklich dessen bewusst sein, einfach weil wir die meiste Zeit nicht alleine arbeiten werden. Daher ist es sehr wichtig zu lernen, mit den verschiedenen Akteuren, die an unserem Spiel beteiligt sind, wie dem Design-Team, Kunden und Entwicklern, richtig zusammenzuarbeiten . Vielleicht wird es nicht immer einfach und lustig sein. Wir werden viel Zeit brauchen, um ein Projekt zu verwalten. Aber je mehr wir Erfahrung bekommen, desto mehr werden wir in der Lage sein, verschiedene und komplizierte Situationen zu bewältigen. Um zusammenzuarbeiten, ist das erste, was zu beachten ist, wie man Ausgaben teilt, ohne zu chaotisch zu sein. In diesem Abschnitt haben wir einen kurzen Überblick über zwei der bekanntesten Tools, die Teams auf der ganzen Welt nutzen, um alles rund um das Design zu teilen, vom Konzept über unsere Boards bis hin zu Kommentaren und Spezifikationen. Diese Empfehlung ist wirklich wichtig und sollte immer im Auge behalten werden. Denken Sie immer daran, dass am Ende der Entwurfsphase die Arbeit überhaupt nicht abgeschlossen ist. Zum Beispiel können Sie InVision verwenden, um Ihre Designs zu teilen Dies ist ein Web-Service, der Designer bei der Präsentation und Prototypen digitaler Produkte unterstützt, Websites und Apps sehr schnell, einfach und intuitiv mag . Der erste Upload ist offen und für alle zugänglich, warum? Für mehr als ein Projekt benötigen Sie ein Abonnement. Wenn Sie Ihre Bildschirme hochladen, zeigt InVision diese auf eine Weise an, die ein tatsächliches Browsererlebnis nachahmt. Diejenigen, die Zugriff auf das Projekt haben, können auch die verschiedenen Komponenten Ihres Designs überprüfen und korrekte Kommentare hinterlassen, um einen einfachen und direkten Dialog über das Projekt zu halten . InVision ist sehr nützlich, weil es uns erlaubt, Prototypen zu erstellen und die Produktvorschau mit dem Kunden oder anderen Teammitgliedern zu teilen. Kunden können Kommentare hinterlassen, und diese Funktion ermöglicht ein klares Gespräch unter Menschen, die oft nicht einmal das gleiche Vokabular sprechen. Mit InVision können Sie Ihre Zeichenflächen auch direkt in Designspezifikationen umwandeln und ohne weitere Tools mit Entwicklern kommunizieren. Um Ausgaben zu teilen, können Sie auch Zeplin verwenden, ein weiteres großartiges Online-Tool, das zusammen mit den gängigsten Designprogrammen arbeitet. Wie bei InVision ist der erste Projekt-Upload kostenlos. So können Sie es ausprobieren und verstehen, warum es so erstaunlich ist. Zeplin ermöglicht es uns, unser Design hochzuladen, zu organisieren, zu inspizieren und zu kommentieren. Die Schnittstelle ist super sauber und lässt Sie nicht während der verschiedenen Phasen Ihrer Arbeit verloren gehen. Zeplins erstaunlichste Feature ist, dass Sie Ihre Dateien direkt aus der Design-Software exportieren können , egal ob Sie Sketch, Adobe XD, Figma oder Photoshop verwenden . Mit nur einem Plugin generiert es automatisch maßgeschneiderte Spezifikationen, die Sie in organisierten Styleguides sammeln können. So kann jeder im Team auf die neuesten Design-Ressourcen zugreifen und benachrichtigt werden, wenn Änderungen auftreten. Was wir bisher gesehen haben, sind Werkzeuge, die uns unter ihren Funktionen die Möglichkeit geben , Assets ohne die Unannehmlichkeiten zu erhalten, sie einzeln zu exportieren. Aber falls Sie Ihre Assets einzeln exportieren müssen, was leicht passieren kann, gibt es ein paar Dinge, die Sie wissen müssen, um es richtig zu machen. Sobald Sie sie bekommen, nichts wird Sie aufhalten, und Sie werden der Entwickler Held sein. Sind wir sicher, dass wir alle wissen, was Vermögenswerte sind? Mit Vermögenswerten meinen wir alle Materialien, die wir benötigen, um ein Projekt erfolgreich zu realisieren. Gemäß Webdesign und Entwicklungsterminologie beziehen sich Assets typischerweise auf Textinhalte, Grafiken, Fotos, Videos, Audiodateien und Datenbanken. Um ein perfektes Pixelergebnis zu gewährleisten, müssen Assets eine doppelte Auflösung aufweisen, da Retina-Displays eine höhere Pixeldichte aufweisen als herkömmliche. High-Definition-Export kann die Ladegeschwindigkeit Ihrer Website sehr schwer machen, was die Überholungs-Website oder App-Erfahrung beeinflussen könnte. Sie können dieses Problem leicht mit geeigneten Online-Tools lösen, um die Größe der Bilder zu ändern. Beispielsweise kann TinyPNG das Gewicht Ihrer Bilder senken , ohne die Gesamtqualität zu untergraben. Sie beim Exportieren von Assets daran, das richtige Format auszuwählen. Zum Beispiel funktioniert SVG für Vektordateien wie Symbole, kann aber nicht für Bilder funktionieren. Es ist besser, ein PNG- oder JPEG-Format zu wählen. Auch der Farbmodus ist sehr wichtig. Denken Sie also daran, immer in RGB zu exportieren, wir arbeiten für die digitale Welt. Hier ist der dritte Teil unserer Lektion, guter Letzt. Da niemand alleine Erfolg hat, wirst du vielleicht aufgefordert, dein kreatives Ego zu unterschreiben und in einer teamorientierten Perspektive zu denken. Aber warum ist es so wichtig, ein kühles Arbeitsumfeld zu gewährleisten? Während Ihrer Karriere werden Sie wahrscheinlich in einem Team arbeiten, es ist sehr wichtig zu beachten, dass Sie, ob Sie der große Chef oder die junge Praktikantin sind, müssen Sie Ihre eigene Aufgabe von Ihrer besten erfüllen, und in Rücksicht auf die allgemeine Mannschaftsrichtung. Also, wenn Sie für ein Team verantwortlich sind, versuchen Sie, Ihre Freunde zu kennen, und was sind die Dinge, die sie gerne tun. Denken Sie daran, dass jedes Mitglied Ihres Teams ein Experte in seiner eigenen Disziplin ist. Seien Sie also offen für ihre Meinungen und Eingaben. Seien Sie die Art von Person, mit der andere Menschen arbeiten wollen, stellen Sie sicher, dass das gesamte Team fühlt sich wohl und sicher, um sich auszudrücken. Also hier sind wir am Ende dieser Klasse. Hoffe, meine Eingaben könnten hilfreich gewesen sein. Ich bin hier für alles, was Sie brauchen, und ich würde gerne sehen, ob Sie etwas verwenden , das wir gemeinsam für eine bestimmte Arbeit gelernt haben. Natürlich liebe ich es, Ihr Ergebnis zu sehen. Also haben Sie keine Angst, mich zu kontaktieren, und wir sehen uns in der nächsten Klasse.