Theorie des Grafikdesigns – Web- und digitales Design

1. Einführung: Sie haben schon einmal das Hauptmenü einer Website, eine einzigartige Teebar auf einem mobilen Schoß, ein lustiges Symbol oder eine coole Animation eines Logos bewundert einzigartige Teebar auf einem mobilen Schoß, ein lustiges Symbol oder eine coole Animation eines Logos Wenn das der Fall ist, wirst du diesen Kurs lieben. Alles, was nicht gedruckt ist und in digitaler Form erscheint , fällt unter b und digitales Design, das eine Untergruppe des breiteren Bereichs des Grafikdesigns darstellt In diesem Kurs behandeln wir alles, was Sie über Webdesign, Benutzeroberflächen- und Benutzererlebnisdesign, Bildschirmgrößen, Dateiformate und vieles mehr wissen Benutzeroberflächen- und Benutzererlebnisdesign, Bildschirmgrößen, Dateiformate und vieles mehr Wir werden uns auch eingehend allen Spezialgebieten in diesem Bereich befassen, wie Ab-Design, Icon-Design, Social Media-Design, Präsentationsdesign, digitales Publizieren Motion-Design, und lernen, wie Designsysteme und Bannerwerbekampagnen funktionieren. Wir werden Hunderte von Ab- und Digitaldesign-Projekten analysieren , um Ihnen ein fundiertes Verständnis der wichtigen Regeln und Begriffe zu vermitteln, mit denen Sie vertraut sein müssen , wenn Sie in die Branche einsteigen möchten. Zusammen mit dem spannenden Klassenprojekt , das Sie hoffentlich am Ende des Kurses abschließen werden, haben Sie auch das Analyse-Arbeitsblatt und das Begriffs-Glossar , mit denen Sie alles, was Sie gelernt haben, in die Praxis umsetzen können Ich hoffe, Sie freuen sich genauso wie ich darauf, loszulegen und in das Meer des Wissens und der schönen Grafikdesign-Beispiele einzutauchen und der schönen Grafikdesign-Beispiele 2. Rollen in diesem Sektor: Ähnlich wie beim Printdesign müssen Sie, falls Sie sich als Grafikdesigner auf Webdesign spezialisieren möchten, auch einige wesentliche Begriffe kennen . Diese helfen Ihnen, besser mit anderen Fachleuten in der Region, mit Entwicklern und auch mit Ihren Kunden zu kommunizieren . Aber in erster Linie versuchen wir zu definieren, was eigentlich Webdesign ist. Obwohl viele Leute diesen Begriff lieber für alles verwenden , was mit dem Labor und der Erstellung von Websites zu tun hat, einschließlich Codierung und deren Entwicklung, wird er genauer verwendet, wenn er sich auf den Benutzer bezieht Erfahrung und alle anderen vorderseitigen Aspekte einer Website. Ein Webdesigner würde normalerweise an Aussehen, Layout, Struktur und Inhalt einer Website arbeiten . Ein Webdesigner ist nicht in erster Linie für das Codieren einer Website verantwortlich. Einige Kenntnisse in HTML, CSS, JavaScript und anderen Codierungssprachen können jedoch , JavaScript und anderen Codierungssprachen in diesem Bereich sehr nützlich sein. Für den Fall, dass Sie sehr spezifisch sein möchten und sicherstellen möchten, dass niemand Ihre Rolle mit jemandem verwechselt, der ebenfalls codiert. Sie können sich auch als visuellen Designer bezeichnen , der rein für die Ästhetik unserer Website verantwortlich ist , die Schaltflächen, Menüs, Hintergründe usw. enthalten kann . In diesem Kurs werden wir auch viel über digitales Design und die Rolle eines digitalen Designers sprechen. Und der Hauptunterschied zwischen einem Webdesigner und dem digitalen Designer besteht darin, dass sich ein Webdesigner zwar ausschließlich auf das Entwerfen von Websites konzentriert ausschließlich auf das Entwerfen von Websites und digitaler Designer über breitere Fähigkeiten verfügt und digitaler Designer über breitere Fähigkeiten verfügt und eine Reihe von Verantwortlichkeiten, die das Design und die Erstellung von Bannern und Bannerkampagnen und Emissionen, Bewegungsgrafiken, interaktiven Elementen, Videos und auch Websites umfassen können Bannern und Bannerkampagnen und Emissionen, Bewegungsgrafiken, interaktiven Elementen, . Es gibt also eine Überschneidung zwischen diesen beiden Rollen und es lohnt sich immer, es zu klären. sie von Ihnen erwarten , wenn Sie sich um eine Stelle bewerben Was sind die tatsächlichen Verantwortlichkeiten, die ? Um die Rollen innerhalb des Webdesigner-Sektors besser zu verstehen Webdesigner-Sektors einige zusätzliche Begriffe durchgeführt, die Ihnen helfen können. Sie haben wahrscheinlich von Front-End und Back-End gehört und sie vereinfachen die Dinge, alles, was mit dem Design und dem Aussehen einer Site zu tun hat, würde als Teil der Front-End-Entwicklung angesehen werden . Dazu gehören aber auch HTML, CSS, JavaScript-Codierung, Suchmaschinenoptimierung, Barrierefreiheit, browserübergreifende Probleme und so weiter und so weiter. Und wieder müssen Sie als Webdesigner möglicherweise an all diesen Dingen beteiligt sein. Alles, was sich auf den Front-End-Aspekt der Entwicklung einer Site bezieht . Selten ist eine Aufgabe eines Webdesigners, ist auch Back-End-Entwicklungsaufgaben zu erledigen. Hier geht es also mehr um Datenbankverwaltung, Serverarchitektur, Sicherheit, Datentransformation, Backup und so weiter und so weiter. Wenn Sie nun aus Sicht des visuellen und grafischen Designs kommen , ist dies wahrscheinlich der am wenigsten attraktive Teil des Webdesigns, aber dies ist offensichtlich auch entscheidend für die Funktionsweise. Und selbst wenn Sie zum Beispiel einen einfachen Blog haben, müssten Sie dennoch ein Content-Management-System im Hintergrund laufen lassen. Also auch wenn es nicht von einem Fachmann behandelt wird , der immer noch Dinge im Back-End sind, die alle angezeigten Daten und Informationen oder die Dinge , die die Benutzer sind, behandeln angezeigten Daten und Informationen oder die Dinge , die die interagiert mit. Es gibt einen zusätzlichen Begriff, den Sie vielleicht gehört haben, die vollständige Stack-Entwicklung, die sowohl das Front- als auch das Back-End zusammen beinhalten würde . Jetzt ist die Benutzererfahrung ein weiteres großes Thema, und wir werden es in einem separaten Video ausführlicher behandeln . Aber in Bezug auf das Webdesign die drei wesentlichen Begriffe und Aufgaben, an denen Sie arbeiten und verbessern müssen, so weit wie möglich. Zuallererst ist die Navigation, für die wir Menüs, Schaltflächen, Dropdown-Elemente und alle Arten von interaktiven Elementen auf einer Website haben. Und während es im Druckdesign ist, ist dies normalerweise eine ziemlich einfache Sache und ziemlich linear. Zum Beispiel hätten Sie von einer Zeitschrift das Inhaltsverzeichnis, das bei der Navigation hilft. Und dann haben Sie Seitenzahlen auf den Strängen. Aber außerdem liegt es wirklich an dem Leser, Seiten physisch umzublättern und von einem Artikel zum anderen zu wechseln. Käufer mit einer Website gibt es fast unbegrenzte Optionen und Möglichkeiten oder Wege , die ein Benutzer einschlagen kann. Und Sie als Webdesigner müssen darüber nachdenken, wie Sie sicherstellen können, dass die Benutzer alle Navigationselemente leicht finden und die gesamte Erfahrung auf der Website nahtlos ist und praktisch. Jetzt gibt es einen noch breiteren Begriff, wenn es um die Erfahrung eines Benutzers mit einer Seite geht , die Benutzerfreundlichkeit ist. Und das beinhaltet die Navigation, aber auch alle anderen Aspekte, die eine Website nutzbar machen. Warum sich die Navigation also mehr darauf konzentriert , von einer Seite zur anderen zu gelangen, würde die Benutzerfreundlichkeit auch das allgemeine Layout einer Webseite beinhalten . Wie groß sind bestimmte Elemente im Vergleich zu anderen oder wie hoch der Kontrast zwischen Elementen ist. Im Allgemeinen geht es jedoch hauptsächlich darum, mögliche Hindernisse zu beseitigen, den Benutzer daran hindern können, die relevanten Informationen zu finden , nach denen er sucht. Und nicht zuletzt ist auch die Zugänglichkeit sehr wichtig, wodurch sichergestellt wird, dass Menschen mit Hör- oder Sehbehinderungen auftreten. Wir können die Website auch ohne Frustration oder Schwierigkeiten nutzen . 3. Grundlegende Begriffe des Webdesigns: Jetzt, da wir die Hauptaufgaben eines Webdesigners abgedeckt haben , können wir uns auf ein paar zusätzliche Begriffe konzentrieren bevor wir über komplexere Dinge sprechen. Fangen wir mit etwas Einfachem an. Über der Falte beziehen wir uns auf die Teile oder Elemente einer Site , die zuerst auf dem Bildschirm des Benutzers sichtbar erscheinen würden , unabhängig davon, ob sie einen Desktop oder Laptop verwenden Computer oder ein mobiles Gerät. Und unter der Falte würde sich auf alle zusätzlichen Inhalte der Seite beziehen alle zusätzlichen Inhalte der , für die Benutzer nach unten scrollen müssen. Obwohl dies im Falle einer horizontalen Navigation innerhalb einer Site am häufigsten eine vertikale Trennung wäre am häufigsten eine vertikale Trennung , haben Sie möglicherweise auch über der Falte links und dann unter der Falte weiter zur richtig. Im Allgemeinen müssen Sie jedoch immer darauf achten , dass der obige Abschnitt Ihres Designs bereits sehr ansprechend und informativ sein muss, um sicherzustellen, dass jeder, der die Website wird sofort abreisen und sie werden ein wenig Zeit damit verbringen, sie zu erkunden und hoffentlich lange genug zu bleiben , um zu finden, wonach sie suchen. Sie können über die Falte einer Website wie die Ladenfront nachdenken , die aufregend genug sein muss, damit Kunden sich tatsächlich entscheiden, in den Laden oder das Cover einer Zeitschrift oder eines Buches zu gehen , was wieder aufregend genug sein muss , damit Benutzer mit dem Produkt interagieren und schließlich die Entscheidung treffen können, es zu kaufen. Jetzt fragen Sie sich vielleicht, wie wir den genauen Speicherort dieses Ordners angeben können , an dem das eigentliche Scrollen auf der Seite beginnt , wenn es so viele verschiedene Bildschirmgrößen gibt. Dies ist eigentlich etwas , das wir ausführlicher behandeln werden wenn wir speziell über Bildschirmgrößen sprechen. Aber da wir darüber sprechen wie wichtig dieser Abschnitt in Bezug auf die Bindung oder das Engagement eines Besuchers ist. Das gebräuchlichste Element oder die häufigste Komponente, die das meiste davon über dem Faltbereich aufnehmen würde , ist das, was wir als Header - oder Hero-Abschnitt bezeichnen würden . Und diese Informationen müssen wirklich die Seite einführen, damit sie den Titel oder das Logo haben können , auch einen Slogan, ein überzeugendes Bild oder eine Illustration, Navigationselemente, vielleicht Zeugnisse und alle zusätzlichen Beweise oder Alleinstellungsmerkmale, die direkt zu Beginn erwähnenswert sind. Abgesehen davon, dass dieser Heldenbereich wirklich auffällig und ansprechend ist, ist es auch eine gute Idee anzugeben , dass es weitere Inhalte für den Down gibt, die Leute dazu bringt, nach unten zu scrollen und erforsche den Rest der Inhalte. Denken Sie daran, dass genau wie im Printdesign der erste Eindruck äußerst wichtig ist. Und deshalb ist es so wichtig, den Header- oder Heldenbereich richtig zu machen? Im Falle einer komplexen Website, wie bei der von Adobe, könnte es zunächst so aussehen, dass der Header- oder Hero-Bereich ziemlich einfach ist und nicht viele Elemente enthält. Aber das ist nur, um die Dinge einfach zu halten und sicherzustellen , dass die Leute schnell das finden wonach sie suchen , wonach sie suchen, ohne sie zu überwältigen. Und beachten Sie, wie wir hier im Haupt-Navigationsbereich neben dem Logo diese fünf Hauptkategorien haben, also 12345 und dann einige zusätzliche Optionen hier auf der richtigen Suche, die Kontoinformationen und ein Schnellzugriffsmenü, dem Sie direkt zu einem bestimmten Tool gelangen können. Aber mal sehen, was passiert, wenn wir zum Beispiel auf Kreativität und Design klicken . Jetzt sehen Sie, dass der größte Teil des Header-Bereichs von diesem Element aufgenommen wird , das wir als Megamenü bezeichnen würden, was den Benutzern viel mehr Navigationsoptionen eröffnet . Jetzt geben Sie all diese Optionen ganz am Anfang an , wo sie extrem überwältigend waren . Deshalb war es wichtig, all dies unter einem einzigen Knopf versteckt zu lassen . Im Allgemeinen empfiehlt es sich , die Hauptteile, die ein Benutzer aus einem Header-Bereich nehmen kann, auf etwa sieben zu beschränken , geben oder zu entfernen, aus denen die wichtigsten platziert werden sollten irgendwo in der Mitte, wie in diesem Fall, ist die Verwaltung Ihres Kontos wahrscheinlich das wichtigste und es sticht wirklich hervor. Es bringt uns also dazu, darauf zu klicken. Dann ist dies wahrscheinlich der zweitwichtigste. Und dann kategorisieren alle übrigen Navigationsoptionen, die wir hier oben haben Navigationsoptionen, die wir hier oben haben, erneut und erleichtern den Zugriff über dieses Mega-Menü. Ein weiteres gutes Beispiel ist die Website von Apple, auf der wir erneut ein sehr einfaches Design haben, wir erneut ein sehr einfaches Design haben sich auf das derzeit beworbene Produkt konzentriert zwei Hauptnavigationsoptionen bietet, um mehr zu erfahren herauszufinden mehr über das Produkt oder um es sofort zu kaufen. Und alle zusätzlichen Optionen , die Sie auf der Seite finden, sind alle unter diesen Optionen hier oben kategorisiert und versteckt . Denken Sie daran, dass sie früher nur vier oder fünf Elemente hier waren, aber es wächst einfach weiter, weil Apple so viele verschiedene Dinge tut. Aber es ist immer noch ein ziemlich einfaches Menü, das man durchkommen kann. Und wenn ich noch einmal auf eine dieser Optionen klicke, wie zum Beispiel Mac, haben wir viele zusätzliche Optionen zur Auswahl. Jetzt wissen Sie wahrscheinlich schon, dass die wichtigsten Navigationselemente einer Site oder die Schaltflächen sind. Und wenn es darum geht, eine Website zu entwerfen, Es gibt auch ein paar spezifische Begriffe, mit denen wir eine Schaltfläche definieren würden denen wir eine Schaltfläche definieren die meiste Zeit ein Label, vielleicht ein Icon, die Hintergrund , der je nach Ästhetik des Geländes auch eine Grenze haben könnte, kann es auch abgerundete Ecken haben, die mit dem Grenzradius definiert sind. Um dann den Abstand zwischen dem Symbol und der Beschriftung und dem Rand der Schaltfläche festzulegen , würden wir als Polsterung bezeichnen. Sie hätten also die obere, linke, rechte und untere Überschrift. Und das Auffüllen ist eigentlich ein allgemeiner Begriff, der nicht nur mit Schaltflächen, sondern fast jedem Element, das Sie auf einer Website haben würden, verwendet wird sondern fast jedem Element das Sie auf einer Website haben würden, den Platz direkt um den Inhalt herum definiert. Und was der Polsterung folgt, ist das, was wir als Grenze bezeichnen, die wiederum durch die vier Richtungen definiert wird. Also oben, unten, links und rechts. Und schließlich hätten die meisten Elemente auch einen Spielraum , den Sie sich als negativen Raum oder Leerzeichen im Webdesign vorstellen können . Dies ist also etwas, das definiert ist, um leer zu bleiben, um sicherzustellen, dass zwischen allen anderen Komponenten oder Elementen der Seite genügend Abstand besteht . Zurück, um ein bisschen mehr über Knöpfe zu sprechen, Es gibt auch die Zustände, die Sie individuell gestalten müssen. Und die meisten Schaltflächen hätten einen normalen Zustand oder einen Ruhezustand. Es gibt einen Hover-Status, der hauptsächlich auf dem Desktop und auf mobilen Geräten wichtig ist. Die Interaktionen erfolgen jedoch durch Antippen anstatt mit der Maus zu klicken und den aktiven Status, wenn die eigentliche Interaktion je nach Schaltfläche stattfindet, es kann auch viele haben von zusätzlichen Optionen, wie die, die Sie hier sehen können. Es kann auch einen Fortschritt beim Laden von Fokuss-deaktivierten Zuständen haben. Und neben dem generischen Schaltflächentyp , den wir bisher gesehen haben, gibt es viele zusätzliche Arten von Schaltflächen wie Checkboxen, Optionsschaltflächen, Schalter, Auswahlchips oder Multi-Select-Chips Chips. Und Sie als Designer sollten dies immer verwenden, wann immer sie am besten geeignet sind. Beispielsweise möchten Sie, dass der Benutzer bei Optionsfeldern eine bestimmte Option auswählt. Warum kreuzen wir Kästchen an? Benutzer würden erwarten, dass sie mehrere Auswahlmöglichkeiten auswählen können . Ein weiterer gebräuchlicher Begriff , den wir hauptsächlich für Schaltflächen verwenden , ist zum Handeln oder CTA aufgerufen. Dies kann tatsächlich jedes Element auf der Seite bedeuten, das den Besuchern hilft, eine Entscheidung zu treffen, ob es darum geht, ein Produkt zu kaufen oder sich für einen Newsletter anzumelden, was auch immer Sie verwenden möchten ein Call-to-Action-Element, es sollte immer auffallen und auf der Seite sehr prominent sein. 4. Zusätzliche Webdesign-Begriffe: Wenn es nun darum geht, sich auf Farben im Webdesign zu beziehen, verwenden wir die Hexadezimalcodes oder Hexadezimalzahlen, denen es sich um ein Basis-60-Zahlensystem handelt, was bedeutet, dass es 16 Symbole einschließlich Zahlen und Buchstaben gibt definiere Farben. Wenn ich zum Beispiel eine dieser Farben von dieser Seite probiere und zur Farbauswahl in Photoshop komme, können Sie diesen Hex-Code hier unten sehen. Dieser ist zum Beispiel d 27643. Aber bevor wir versuchen genau zu verstehen, was das bedeutet, gibt es auch eine wichtige kleine Warnung hier in Photoshop. Dieser kleine Würfel bezieht sich auf Probleme für Vab mit einer bestimmten Farbe. Dies ist eigentlich keine websichere Farbe. Was heißt das jetzt? Dies ist eigentlich eine sehr begrenzte Palette von nur 216 Farben, die standardisiert und einheitlich in jedem Browser angezeigt wird . Und falls Sie die nächstgelegene ähnliche Farbe finden möchten , die als Website angesehen wird , müssen Sie auf diesen Würfel klicken und Sie können sehen, dass er leicht nach rechts verschoben wird. Und wir können die ursprüngliche Auswahl und diese neue miteinander vergleichen . Wenn wir jedoch Farben im Web sehen wollen, können wir auch hier links auf diese Option klicken. Und wie Sie sehen können, ist es sehr begrenzt da alle Farben, die ich in diesem Bereich auswählen würde , zu denselben Werten und demselben Hex-Code führen würden . Wenn Sie also diesen Hex-Code im Auge behalten, egal wo ich in dieser Region klicke, wird er uns immer denselben Code geben. Aber wenn ich die einzigen Webfarben ausschalte, können wir uns bewegen und sehen, wie dieser Hex-Code aktualisiert wird. Die gute Nachricht ist, dass Sie sich keine Sorgen mehr um websichere Farben machen müssen , da es ein sehr kleiner Bruchteil der Benutzer sein könnte , der Probleme mit nicht websicheren Problemen haben könnte Farben. Und es kommt hauptsächlich darauf an, dass die Bildschirme Monitore sind, die sie verwenden. Und wenn sie älter sind als, sagen wir mal, zehn oder 15 Jahre. Aber obwohl websichere Farben nicht wichtig sind, sind Hex-Codes immer noch sehr wichtig zu verstehen , da sich jede Codierungssprache Farben bezieht. Und falls Sie interessiert sind, beziehen sich die ersten beiden Symbole innerhalb eines Hex-Codes auf die Intensität von Rottönen aus RGB als der zweite Satz, der das dritte und das vierte Symbol ist, wäre das Intensität der Grüns. Und schließlich wären diese beiden am Ende die Intensität von Blau. Dies sind also die RGB- oder roten, grünen, blauen Kanäle. Und wenn der Hex-Code eine 00 anzeigt, ist das keine Intensität, was bedeutet, dass keine Farbe verwendet wird. Während wenn die beiden Symbole, die F, F, das bedeutet, dass es volle Intensität ist. Auf diese Weise hätten Sie die tatsächliche Farbe selbst. Und da RGB ein additives Farbmodell ist, wenn Sie alle drei Kanäle leer oder auf 0 eingestellt haben, würden Sie schwarz werden, da die Farbe und der Wert alle von ihnen volle Intensität haben, also alle drei Farben vollständig sichtbar, dann würden sie sich als weiß summieren. sich keine Sorgen, Sie müssen keine Hex-Codes lernen oder wie Sie bestimmte Farben mit diesen Codes beschreiben, es ist einfach nützlich zu wissen, wie es funktioniert. Die meiste Zeit könnten Sie jedoch Farben mit einem ähnlichen Werkzeug wie dem Farbwähler in Photoshop auswählen , unabhängig davon, welche Anwendung Sie zum Entwerfen einer Website verwenden. Und nicht zuletzt gibt es nur ein paar zusätzliche Begriffe, die erwähnenswert sind, wenn es um das Scrollen geht. Was ist zunächst ein festes oder klebriges Element? Dies ist tatsächlich etwas, das auf dem Bildschirm bleibt, während alle zusätzlichen Details nach oben und unten scrollen. Obwohl dieses Beispiel ein Telefon zeigt, gilt dies natürlich auch für die Desktop-Versionen von Websites. zum Beispiel auf unserer Website nach unten scrolle, Wenn ich zum Beispiel auf unserer Website nach unten scrolle, können Sie sehen, dass der Haupt-Navigationsbereich sichtbar bleibt. Das wäre also ein klebriges oder festes Element. Da wir auf dieser Seite sind, gibt es hier auch ein weiteres interessantes Detail , das wir sehen können. Dies ist etwas, das Parallax-Scrollen genannt wird. Wenn Sie sehen können, dass sich Details in unterschiedlicher Geschwindigkeit auf der Seite bewegen. Der eigentliche Abschnitt über die Pro-Mitgliedschaft scrollt also mit einer bestimmten Geschwindigkeit. Aber die Hintergrunddetails oder die Grafik im Hintergrund sind, scheinen stationär oder fest zu sein. Es fühlt sich also fast so an, als gäbe es zwei Schichten in der Komposition und sie bewegen sich mit unterschiedlichen Geschwindigkeiten, eignen sich hervorragend, um die Illusion von Tiefe zu erzeugen und Wissenschaft im Allgemeinen nur interessanter zu machen. Und nicht zuletzt, da wir über das Scrollen sprechen, gibt es auch unendliches Scrollen mit Websites wie Pinterest, wo Sie Home-Feed und neuen Pins nach unten scrollen können würde einfach ständig auftauchen. Es ist also wie eine nie endende Seite. Aber jetzt, da wir im nächsten Video einige dieser wesentlichen Begriffe behandelt haben , können wir uns konzentrieren, genauer über die Struktur von Websites zu sprechen . 5. Struktur einer Website: Obwohl es viele verschiedene Arten von Websites gibt , die immer noch ein paar Begriffe sind , die für so ziemlich alle gelten. Ein häufig verwendeter Begriff ist Container oder Wrapper, was im Wesentlichen bedeutet, was auch immer die Struktur oder den Inhalt einer Site zusammenhält . Dies ist also eine Region, die normalerweise eine feste Breite hat, die beispielsweise 1280 Pixel betragen könnte. Und die Höhe davon hängt natürlich von der Menge des Inhalts auf einer Seite ab. Die meisten Websites sind auf die Mitte ausgerichtet, was bedeutet, dass Sie links und rechts vom Wrapper normalerweise Hintergrund haben, egal ob es sich nur um links und rechts vom Wrapper normalerweise Hintergrund haben, Sie links und rechts vom Wrapper normalerweise Hintergrund haben, Leerzeichen oder vielleicht um eine Farbe oder ein Muster handelt. Während Sie sich im Container befinden, hätten Sie ein paar sehr unterschiedliche Elemente, wie den Header-Bereich , den wir bereits im vorherigen Video behandelt haben. Und normalerweise ist das Haupt-Navigationsmenü Teil der Kopfzeile. Es kann auch zwei separate Elemente sein, und das Menü kann über dem Header liegen oder umgekehrt. Aber im Wesentlichen sind dies die ersten Elemente , die der Besucher sehen würde, wenn sie auf ihre Website gehen. Und diese beiden zusammen werden das meiste von dem aufnehmen, was wir oben betrachten, falten über die Seite. Weiter unten erreichen Sie den Inhalt der Hauptseite der die volle Breite des Containers einnehmen kann. Oder optional können Sie die Seitenleiste entweder links oder rechts auf der Seite haben. In seltenen Fällen auf beiden Seiten. Und ähnlich, wie wir mit der Kopfzeile in voller Breite begonnen haben, enden wir auch mit einer Fußzeile in voller Breite, enden wir auch mit einer Fußzeile in voller Breite, die normalerweise Kontaktinformationen, kleine Sitemap und ein paar zusätzliche Links wie Social Media und so weiter, so weiter. Der größte Teil der Website ist normalerweise der Inhaltsbereich, den wir bereits besprochen haben. Und um die Navigation zu erleichtern und den Inhalt in kleinere Chunks zu trennen. Wenn die Benutzer nach oben und unten scrollen, wird empfohlen, verschiedene Abschnitte oder wie manchmal erwähnt, Felder zu erstellen , die Sie auch hier sehen können. Die Bereiche, die ich hervorhebe und jeder dieser Abschnitte sollten eine unterschiedliche Rolle spielen. Es könnte sich um den Newsletter handeln, in dem sich Personen anmelden und Informationen über diese bestimmte Website erhalten können. Eine gute Analyse einer Website und wie viele Abschnitte verwendet werden, ist einfach die Verwendung der Befehls- oder Steuerelement-Tastenkombinationen in jedem Browser , den Sie verwenden, es sollte funktionieren, was wird hilft Ihnen, herauszuzoomen und diese Vogelperspektive zu sehen, wo Sie die gesamte Struktur aus der Ferne sehen können . Hier können wir also deutlich sehen , dass der Container oder der Wrapper den gesamten Inhalt an der Mitte ausrichtet. Und es gibt diese unterschiedlichen Abschnitte durch Farbe getrennt sind, wie hier haben wir diese schwarze Kulisse oder wir haben den grauen für diesen Abschnitt hier. Und wir haben auch diese schöne Farbverlaufslinie die die Fußzeile vom Rest der Seite teilt. Wenn Sie die Site aus dieser Entfernung betrachten, werden Sie auch eine vertikale Ausrichtung zwischen den Elementen bemerken. So können wir zum Beispiel sehen, dass der Rand dieser Bilder ausgerichtet ist. Aber wenn ich weiter nach unten komme, gibt es auch eine Ausrichtung auf diese Komponenten. Und das Gleiche wird auf den rechten Rand dieser Elemente zutreffen . Und die beiden Kanten links und rechts definieren normalerweise den Wrapper oder Container selbst oder die Seitenbreite. Es kann jedoch irreführend sein, wenn Sie sich nur auf den Inhalt konzentrieren Es ist immer besser, einen Blick auf die ganze Seite zu werfen, wie in diesem Fall das Hauptmenü oben oder die Fußzeile unten. Und damit können wir sehen, dass es hier auch diesen Raum links und rechts gibt , der als Rand innerhalb des Standorts gilt. So können wir es hier auf der linken Seite sehen, und wir können es auch auf der rechten Seite sehen. Und das ist eigentlich immer noch etwas, das als Teil des Containers angesehen wird . In Bezug auf die tatsächlichen Komponenten oder Bausteine einer Website würden wir uns nun oder Bausteine einer Website auf visuelle und funktionale Elemente und eine Kopie, die Schriftarten, die Farben, die Bilder, Videos, Animationen beziehen funktionale Elemente und eine Kopie, die Schriftarten, die Farben, , das Recht selbst, sogar der Raum zwischen den Elementen würde alle als visuelle Elemente betrachtet werden. Während alles andere, was für Navigation oder Interaktionen verwendet wird , einschließlich Schaltflächen, Drop-downs und Menüs, einschließlich Schaltflächen, Drop-downs und Menüs, als funktionale Elemente betrachtet wird. Eine Aufgabe von Webdesignern besteht darin, sicherzustellen, dass zwischen diesen Elementen ein gutes Gleichgewicht besteht. Eine gute Website sollte immer klarstellen , ob wir nur ein rein visuelles Element oder etwas betrachten ein rein visuelles Element , das auch eine Funktion hat. Wenn ich zum Beispiel den Mauszeiger über dieses Bild fahre, kann ich sehen, dass sich mein Cursor ändert, was bedeutet, dass wenn ich darauf klicke, kann ich sehen, dass sich mein Cursor ändert, was bedeutet, dass wenn ich darauf klicke, etwas passieren wird. Aber neben der Cursoränderung war dies nichts anderes, was darauf hindeutete, dass dies ein anklickbares Element ist , das viele Möglichkeiten sein kann , Dinge offensichtlicher zu machen. Im Falle eines Bildes kann dies beispielsweise ein Hover-Effekt sein oder irgendwo auf dem Bild eine kleine Beschriftung geben , die besagt, dass Sie hier klicken, um mehr zu erfahren. im Allgemeinen daran, dass eine gute Navigation drei Hauptmerkmale aufweist. Einfachheit, Klarheit und Konsistenz. Und wir werden uns während dieses Kurses immer wieder darauf beziehen . Aber es gibt auch einen anderen Begriff, auf den Sie stoßen könnten, und das ist Informationsarchitektur oder IA, sich wiederum darauf bezieht, die Informationen zu organisieren und auf unserer Website auf eine Weise anzuzeigen unserer Website auf eine Weise klar, intuitiv und vernünftig. 6. Raster, Sitemap, Wireframes und Scanmuster: Genau wie im Printdesign ist auch die visuelle Hierarchie im Webdesign äußerst wichtig. Und eine der wichtigsten Möglichkeiten, diese Hierarchie zu erstellen, ist die Verwendung eines Rasters. So kann ein Website-Raster dazu beitragen, visuell zu bleiben, oder sie befinden sich innerhalb der Website und zwischen den Elementen. Genau wie im Print-Design besteht ein Raster aus Spalten. Oder im Falle von Webdesign werden diese auch als Einheiten bezeichnet. Zum Beispiel würde sich bei 12 Einheiten Raster auf 12 Spalten beziehen, was übrigens die gebräuchlichste ist, die im Webdesign verwendet wird. Und hier ist ein Beispiel für diese Verwendung durch die Website der BBC. Jetzt werden die Leerzeichen zwischen den Spalten, die wir als Dachrinne bezeichnen und wo mehrere Einheiten für bestimmte Abschnitte innerhalb eines Standorts zusammen verwendet werden , wir diese als Spalten bezeichnen. Hier ist dies zum Beispiel eine Spalte mit drei Einheiten oder eine andere hier auf der linken Seite, die doppelt so große Schulden ist, sechs Einheitenspalten und mehrere Spalten zusammen können ein Feld bilden, das diese horizontalen Abteilungen innerhalb einer Seite, die auch als S bezeichnet werden kann. Dieser ist hier oben, und dies würde wiederum als eine andere angesehen werden, in diesem Fall aus drei Spalten besteht und jede Spalte aus vier Einheiten besteht. Um über die Struktur einer einzelnen Seite innerhalb unserer Website hinauszugehen , verwenden wir normalerweise eine Sitemap, die eine diagrammatische Darstellung aller Abschnitte und Seiten sowie der Verbindungen zwischen ihnen. Und es ist eine großartige Möglichkeit, die wichtigsten Navigationseinheiten und Beziehungen innerhalb einer Website zu visualisieren die wichtigsten Navigationseinheiten . Ein weiterer sehr gebräuchlicher Begriff, auf den wir uns in diesem Kurs immer wieder beziehen werden , ist das Drahtgitter, das wiederum hauptsächlich in der Planungsphase einer Website oder Anwendung verwendet wird, was vereinfacht wird Skizze oder Entwurf der letzten Seitenstruktur, die Hauptbausteine wie Bilder oder Videos davon, Rechtecke und Kopieren in der Regel mit ein paar horizontalen Linien darstellt Hauptbausteine wie Bilder oder Videos davon, Rechtecke und Kopieren in der Regel . Möglicherweise haben Sie auch von Scan-Mustern gehört, was sich im Falle von Webdesign auch wirklich auf die visuelle Hierarchie der zugewiesenen auswirkt. Hier sind ein paar Beispiele für diese Heatmaps, auf denen wir sehen können, wo die Besucheraugen bewegen und am längsten bleiben. Die am häufigsten gesehenen Bereiche sind rot. Und wir können sofort ein bestimmtes Muster sehen , das sehr allgemein als F-Muster bezeichnet wird. Das können wir also auch hier sehen. Dies gilt für die meisten Websites, auf denen viele Informationen vorhanden sind oder speziell kopiert werden. Während eine andere sehr gebräuchliche Art des Durchsuchs einer Seite als Z. Z-Muster bezeichnet wird , das ähnlich wie beim F-Muster oben links beginnen. Von hier aus würde es nach rechts gehen und dann nach unten links auf dem Bildschirm und dann schließlich nach unten rechts gehen. Wir können sehen, dass es im Falle dieser Seite sehr gut für dieses Scanmuster funktioniert , da dies genau die Reihenfolge ist , in der die Informationen angezeigt werden und für Menschen sinnvoll sind. Eine vereinfachte Struktur, die dieses Scanmuster verwendet, kann also sein, wo wir das Logo haben, mit dem wir beginnen möchten , oder den Namen des Unternehmens als die Anmelde- oder Anmeldeoptionen auf der rechten Seite. Dann haben wir das Hauptheldenbild oder die Helden-Sektion mit einigen hilfreichen Texten darunter. Und dann schließlich der CTA oder Call to Action Button oder Link. Und die ganze Idee ist wenn jemand hier an diesen Punkt kommt, genau weiß, wofür er sich anmeldet oder was er kauft. Es ist verrückt, aber statistisch gesehen dauert es nur 50 Millisekunden, dauert es nur 50 Millisekunden bis ein durchschnittlicher Website-Besucher entscheidet, ob er am richtigen Ort ist oder nicht. Im Grunde dauert es also so lange , bis sie eine Entscheidung treffen, ob sie eine Seite mögen oder nicht. Aus diesem Grund ist es so wichtig bei der Definition der Struktur einer Website eine visuelle Hierarchie zu verwenden der Definition der Struktur einer Website eine und sicherzustellen, dass die Besucher nicht frustriert werden. Und sie werden immer finden , wonach sie suchen. 7. Bildschirmgrößen und responsives Design: Eine der schwierigsten Dinge im Webdesign ist, dass die Erfahrung eines Benutzers schwer vorherzusagen ist, da sie je nach vielen Faktoren wirklich variieren kann . Aber wahrscheinlich am wichtigsten ist die Bildschirmgröße des Geräts, das sie für den Zugriff auf das Internet verwenden. Da Sie nun technisch nicht vorhersagen können, welche Bildschirmgröße am häufigsten verwendet wird , müssen Sie sicherstellen, dass eine Site auf jeder Bildschirmgröße ordnungsgemäß funktioniert und funktioniert. Um dies zu erreichen, gibt es verschiedene Methoden wie Responsive Design oder adaptives Design, und wir werden diese in diesem Video ausführlicher besprechen. Beginnen wir zunächst mit dieser interessanten Grafik, die zeigt, dass es in den letzten zehn Jahren eine große Veränderung gab und die Art und Weise verändert hat, eine große Veränderung gab und die Art und wie Menschen mit Websites interagieren und wie sie heute am häufigsten sind würde ihre Mobiltelefone benutzen. So finden mehr als 50% des globalen Webverkehrs auf den Handys der Menschen statt. diesem Grund würden die meisten Unternehmen heutzutage den mobilen ersten Webdesign-Ansatz in Betracht ziehen, dem es sich um eine Philosophie handelt, die sich darauf konzentriert, die Benutzererfahrung auf kleineren Bildschirmen und Handys zum besten zu machen die Benutzererfahrung auf kleineren Bildschirmen und Handys zum besten zuerst, und passen Sie dann Design und Layout als zweiten Schritt an größere Bildschirme Dieser Ansatz passt auch sehr gut zur Suchmaschinenoptimierung von Google, die auch mobil begünstigt erste entwerfen oder mobile freundliche Websites. Dafür gibt es tatsächlich ein offizielles Google-Online-Tool, mit dem Sie eine URL eingeben können und nach ein paar Sekunden das Ergebnis erhalten. Und in diesem Fall habe ich gerade einen Test mit unserer eigenen Website gemacht und es kam als mobile freundliche Seite heraus. Jetzt gibt es einen anderen Aspekt von Mobilgeräten, den Sie auch beim Entwerfen von Websites beachten müssen. Einige Leute sehen die Website möglicherweise im Hochformat, während andere sie möglicherweise im Querformat betrachten. Und es kann noch komplizierter werden, wenn man auch Tabletten oder verschiedene Größen in Betracht zieht, die wiederum beide Ausrichtungen haben können. Diese Grafik hilft uns jedoch zu verstehen, dass ein weiteres sehr interessantes Verhalten oder eine Statistik, bei der sich die bevorzugte Ausrichtung je nach Bildschirmgröße eines Mobilgeräts dramatisch ändern wird. Und wir können deutlich erkennen, dass je größer der Bildschirm wird, desto wahrscheinlicher werden die Leute ihn im Querformat verwenden. Während in diesen kleineren Größen, bei denen es sich um die gängigsten Handygrößen handelt, ist es wahrscheinlicher, dass die Leute sie im Hochformat verwenden. Wir haben bereits über den mobilen First-Design-Ansatz gesprochen, bei dem wir zuerst den kleinsten Bildschirm betrachten und ihn dann an größere Bildschirme anpassen. Und obwohl es sich umkehrt, beruht die Reihenfolge der Priorität immer noch auf dem gleichen Prinzip wie der responsive Webdesign-Ansatz, was wiederum bedeutet, dass sich das Layout der Site automatisch an die verfügbare Bildschirmgröße. Aber was wichtig ist, ist, dass Sie immer auf dieselbe Seite schauen werden, die einfach anders gerendert wird . Und am häufigsten würde die Unterscheidung zwischen den verschiedenen Bildschirmgrößen den Haltepunkten abhängen die im CSS-Code in einer Site definiert sind. Und hier sehen wir ein Beispiel für ein paar häufig verwendete Haltepunkte , die sich auf die Breite der Site basierend auf der verfügbaren Bildschirmgröße beziehen . So wären zum Beispiel 1920 Pixel die größte Größe, wären zum Beispiel 1920 Pixel die größte Größe für die Sie entwerfen müssten. 320 Pixel sind ein Standard für die engste oder kleinste Bildschirmgröße. Und wir können sehen, dass wenn Sie ein Telefon halten, nur so viel Speicherplatz als der eigentliche Inhaltsbereich noch geringer wäre. Es wären also etwa 280 Pixel mit den Rändern auf der linken und rechten Seite. Jetzt hätten Sie für die meisten mobilen Geräte diese kleineren Haltepunkte und all diese würden normalerweise eine einzige Spalte verwenden. Die Struktur wäre also ziemlich einheitlich und Sie würden nur oben und unten scrollen, um auf bestimmte Teile der Website zuzugreifen. Wenn Sie größere Bildschirmgrößen haben, können Sie möglicherweise mehr Spalten und Divisionen horizontal in die Seite einführen, bis Sie vielleicht drei oder vier Spalten erreichen können Sie möglicherweise mehr Spalten und Divisionen horizontal in die Seite einführen, Divisionen horizontal in die Seite . Selbst wenn Sie Ihren Browser auf Ihrem Computer verwenden, können Sie eine Site tatsächlich testen und wie sie sich an verschiedene Bildschirmgrößen anpasst. So können wir sehen, wenn ich einen bestimmten Punkt ohne Seite erreiche, wird es anfangen, den Inhalt zu verschieben. Es gab einen Bruchpunkt, damit ich hin und her springen kann. Und wir können zwischen den beiden Haltepunkten sehen wie einige der Elemente verschwinden. Oder das Menü hier oben wird in ein einfaches Hamburger-Symbol wie dieses vereinfacht. Wenn ich dann wieder weiter nach links gehe, war das ein weiterer Haltepunkt. Die beiden Spalten sind also jetzt in einer einzigen Spalte vereinfacht. Und dann noch weiter unten ist jetzt alles in einer einzigen Spalte. Und wenn ich dann weiter gehe, kommt es immer näher an was wir auf einem Mobiltelefon sehen würden. Hier ist ein weiteres großartiges Beispiel für eine reaktionsschnelle Website. Wenn ich anfange, meine Browserbreite zu ändern, werden sofort alle Elemente aktualisiert und es gab einen Haltepunkt. Wir können deutlich sehen, wie alles neu angeordnet ist. Und wenn ich dann noch weiter nach unten gehe, werden wir dort einen weiteren Haltepunkt sichtbar haben. Und das ist wahrscheinlich der letzte. Also nochmal zwei große Haltepunkte. Eins genau hier und dann noch eins genau dort. Das Tolle an dieser Website ist, dass sie diese Blöcke sehr gut verwendet und alles immer noch sehr einfach zugänglich ist und zu finden ist, egal welche Bildschirmgröße Sie verwenden. Hier ist auch ein Beispiel dafür , wie Sie das Handy und die Desktop-Version derselben Website nebeneinander sehen können. Und obwohl Benutzerfreundlichkeit Priorität haben sollte, ist neben der Benutzerfreundlichkeit auch die Ähnlichkeit zwischen den verschiedenen Versionen der Site wichtig. Sie möchten, dass Benutzer ein sehr ähnliches Erlebnis erhalten unabhängig davon, welches Gerät sie für den Zugriff auf eine Website verwenden. Fluid Design und flüssiges Layout auch ein weiterer Begriff, den Sie wahrscheinlich hier waren, was bedeutet, dass statt Pixel zu verweisen oder Pixel zu verwenden , um die Größe eines Bildschirms zu definieren. So würde zum Beispiel die Breite eines Standorts alle Komponenten innerhalb des Standorts anhand von Prozentsätzen berechnen . Da das Ansichtsfenster kleiner oder größer wird, würde das Fluid-Layout alle Werte automatisch und dynamisch anpassen, wobei wiederum Prozentsätze verwendet werden. 8. Adaptives Design und Pixeldichte: Jetzt gibt es auch eine andere große Kategorie im Webdesign als adaptives Design bezeichnet wird, anstatt ansprechendes Design, obwohl das Ziel das gleiche ist, um sicherzustellen, dass Benutzer eine Website auf die bequemste Weise erleben können die bequemste Weise abhängig von dem Gerät , das sie verwenden. Aber durch reaktionsschnelles Design wurde nur ein universelles Design an die verschiedenen Bildschirmgrößen angepasst . Im Falle eines adaptiven Webdesigns wären das völlig einzigartige und unabhängige Designs, wären das völlig einzigartige und unabhängige Designs für verschiedene Bildschirmgrößen erstellt wurden. Und der Hauptvorteil des adaptiven Webdesigns besteht darin , dass es die Geschwindigkeit der Website immer verbessert. Es ist jedoch viel zeitaufwändiger und teurer, eine Website wie diese zu entwickeln, da Sie natürlich mehrere Versionen erstellen müssen und auch warten und aktualisieren müssen jede dieser Versionen nebeneinander. Um die Sache noch schlimmer zu machen, ist im Falle des Webdesigns nicht nur die Bildschirmgröße, die Sie beachten müssen, sondern auch die Pixeldichte eines Geräts. Und verwechsle das nicht mit der Auflösung eines Bildschirms. Bei diesem speziellen iPhone beträgt die Auflösung des Bildschirms im Querformat beispielsweise die Auflösung des Bildschirms im 1136 Pixel mal 640 Pixel bei 326 PPI. Pixeldichte, PPI steht für Pixel pro Zoll, ähnlich wie im Druck, wobei 300 PPI als hochauflösender Druck betrachtet werden , bei dem die ursprünglichen Pixel eines Bildes bzw. in einer solchen Dichte gedruckt, dass Sie diese Pixel nicht voneinander unterscheiden können und Sie einfach ein kontinuierliches Bild sehen. Und die Pixeldichte funktioniert wieder in ähnlicher Weise. Je höher diese Zahl ist, desto feiner werden die Details auf dem Bildschirm aussehen. Und im Allgemeinen wird es das Seherlebnis verbessern. Jetzt haben Sie wahrscheinlich von Apples Retina-Displays gehört. Und das sind im Wesentlichen diese Bildschirme mit höherer Pixeldichte. werden jedoch viele andere Standards verwendet Für diese Bildschirme mit höherer Dichte werden jedoch viele andere Standards verwendet. Und aus Sicht des Webdesigns müssen Sie nur sicherstellen, dass es immer einen Fallback für Bilder gibt, es immer einen Fallback für Bilder gibt die für diese Bildschirme mit höherer Dichte funktionieren können . Dies ist natürlich nur für Pixel- oder Rasterbilder wichtig , da sie im Falle von Vektorgrafiken auf jede erforderliche Größe skaliert werden können, sie im Falle von Vektorgrafiken auf jede erforderliche Größe skaliert werden können ohne an Qualität zu verlieren. Und es gibt tatsächlich ein bestimmtes Vektordateiformat das im Webdesign verwendet wird, das wir im nächsten Video ausführlicher behandeln werden . 9. Häufig verwendete Dateiformate: Die vier wichtigsten Dateiformate beim Webdesign sind JPEGS, PNGs, SVGs und Geschenke. Auf diesem Board sehen Sie einen großartigen Vergleich der die Hauptunterschiede zwischen ihnen erklärt, und eine großartige Erklärung, die Ihnen hilft, zu entscheiden , welches Dateiformat für das Bild am besten geeignet ist , mit dem Sie arbeiten. Der einfachste Weg, diese am häufigsten verwendeten Phi-Formate im Webdesign zu vergleichen , ist die Verwendung von Photoshops, Option Für Web speichern, die Sie im Menü Dateiexport finden. Sobald Sie dieses ausgewählt haben, können Sie hier oben links zwei auswählen , mit denen Sie die ursprüngliche Bildqualität, das spezifische Dateiformat oder die Voreinstellung vergleichen können ursprüngliche Bildqualität, das spezifische Dateiformat oder die Voreinstellung vergleichen spezifische Dateiformat oder die Voreinstellung Sie werden hier auf der rechten Seite wählen. zum Beispiel das JPEG-Dateiformat auswähle, Wenn ich zum Beispiel das JPEG-Dateiformat auswähle, können wir sehen, dass die aktuelle Dateigröße immer noch sehr hoch ist. Es sind fast drei Megabyte. Durch die Reduzierung der tatsächlichen Pixelabmessungen können wir dies jedoch bereits verbessern. Anstatt dies über zweitausend Pixel zu haben, können wir vielleicht auf eine Breite von tausend Pixeln sinken. Und wenn wir etwas näher zoomen, können wir die Qualität im Auge behalten. Am wichtigsten ist jedoch, dass Sie mit dem JPEG-Dateiformat diese Option hier ändern möchten, die tatsächliche Qualitätseinstellung, die wir auf 0 einstellen können, was zu der höchsten Komprimierungsmenge führt Artefakte. Es sind also im Grunde diese kleinen Blöcke , die wir hier auf der rechten Seite sehen können. Durch die Verwendung der niedrigsten Qualität erhalten wir jedoch auch die niedrigstmögliche Brandgröße, die in diesem Fall weniger als 50 Kilobyte beträgt. Dies ist natürlich etwas, das Sie optimieren und die beste Option für alles finden können , was Sie die meiste Zeit tun , wenn Sie diese um 50 einstellen würde Ihnen ein sehr gutes Ergebnis liefern, wo Die Komprimierung ist kaum bemerkbar, aber die Dateigröße wird im Vergleich zum Original oder im Vergleich zur JPEG-Einstellung von höchster Qualität immer noch radikal reduziert Original oder im Vergleich zur . Der Hauptvorteil der Verwendung von PNG gegenüber dem JPEG-Dateiformat besteht darin, dass Sie mit diesen auch Transparenzinformationen aufnehmen können . Und das ist eigentlich eine Einstellung, die Sie hier oben sofort sehen können . Falls Sie dieses Dateiformat jedoch für Fotos verwenden , sollten Sie sicherstellen, dass es auf PNG 24 eingestellt ist, was eine Tiefe von 24 Bit bedeutet, verglichen mit PNG Acht, einer begrenzteren Version von das gleiche Dateiformat mit nur 256 Farben oder einer Tiefe von acht Bit. Jetzt, selbst bei dieser begrenzten Farbversion von PNG, wäre das Dateiformat immer noch viel höher als bei mittlerer Komprimierung jpeg. Wir können sehen, dass es fast doppelt so viel ist, rund 400 Kilobyte. Warum sind wir von höherer Qualität? PNG 24, es wäre also der größere, in diesem Fall 1,2 Megabyte, fast zehnmal so groß wie das komprimierte JPEG. Wenn es jedoch um Illustrationen von Grafiken anstelle von Fotos geht , sollten Sie stattdessen PNGs verwenden. Hier können wir also sehen, dass ein JPEG zu 41 Kilobyte führen würde , wenn die Qualitätseinstellung 50 verwendet wird. Und wenn ich zu PNG 24 wechsle, die Größe der Datei genau gleich. Hier können wir jedoch bereits den Vorteil nutzen, dass Transparenz in der Datei enthalten ist, was es einfacher macht, diese Grafik auf verschiedenen Hintergrundfarben zu verwenden , zum Beispiel auf unserer webseite. Wenn ich jedoch zur Option für die niedrigere Farbtiefe PNG acht wechsle, erhalten wir sofort eine viel kleinere Dateigröße, also sind das nur 15 Kilobyte. Und da es keine Verläufe, Unschärfeeffekte oder fotografische Details gibt, sind Unschärfeeffekte oder fotografische Details gibt, die 256 Farben mehr als genug, um das Bild darzustellen und uns genau das gleiche Ergebnis zu liefern , was wir haben in der Originalversion zu sehen. Jetzt ist eine GIF-Datei dem PNG-Format sehr ähnlich. Auch hier ist es auf 256 Farben begrenzt und das ist tatsächlich das Maximum , das Sie speichern können. Aber hier kannst du sogar darunter gehen. So können wir bis zu zwei Farben hinuntergehen, was natürlich zur kleinsten Dateigröße führt. In diesem Fall können wir jedoch einfach zu acht Farben gehen. Und genau wie bei P&G hier können Sie auch entscheiden, ob Sie die Transparenz einbeziehen möchten oder nicht. Wenn Sie es aktivieren, wird es tatsächlich als Farbe innerhalb der Farbtabelle betrachtet . Einer der Hauptvorteile eines GIF gegenüber PNG besteht darin, dass es Frame-Animation unterstützt. Hier ist ein Beispiel für eine GIF-Datei mit 12 Frames. Und wir können die Animation hier tatsächlich abspielen. Und wir können auch entscheiden, wie oft wir möchten, dass diese Schleife standardmäßig auf ewig eingestellt ist. Aber das können wir natürlich leicht ändern. Und alle diese Frames zusammen würden zu einer Dateigröße von 32 Kilobyte führen. Der beste Weg, diese verschiedenen Dateiformate zu studieren , besteht darin, einige Beispiele von verschiedenen Websites zu speichern . Öffne sie in Photoshop. Mit der Option Für Web speichern können Sie die Einstellungen sehen , die beim Speichern verwendet wurden. Wir werden Frame Animation ausführlicher besprechen und wie man sie in Photoshop einrichtet. Sobald wir in diesem Kurs zum Abschnitt „ Banner-Design“ gekommen sind. 10. SVG, WebP und JPEG 200: Wenn es um das Speichern von SVG - oder Scalable Vector Graphics-Dateien geht , wird empfohlen, Illustrator zu verwenden. Und von hier aus musst du nur zu Datei, Speichern unter gehen. Und dann können Sie aus dem Format zwei Arten von SVGs auswählen. Das ist die normale oder die komprimierte Version. Und im Allgemeinen gibt Ihnen die komprimierte Option eine etwas kleinere Dateigröße. Dieses Format wird jedoch nicht so häufig unterstützt wie das Standard-SVG. Also entscheide ich mich einfach dafür. Und sobald ich auf Speichern klicke, erhalten wir hier die zusätzlichen Optionen. Es gibt tatsächlich ein paar verschiedene Profile und auch mehr Optionen, wenn Sie tiefer darauf eintauchen möchten. Am interessantesten ist jedoch , dass wenn Sie auf SVG-Code klicken, tatsächlich in Code umgewandelt wird, der auf Websites verwendet werden kann. So kann es kopiert und von hier direkt in den Code einer Site eingefügt werden. Und das wird das Bild bereits in einem Browser darstellen können . Und genau wie bei Vektorgrafiken im Druckdesign auf einer Website wie dieser haben Hauptvorteil neben geringen Dateigröße darin, dass sie vollständig auflösungsunabhängig ist, wenn Sie eine SVG-Datei . Selbst wenn ich ganz nah zoome, werden wir immer scharfe und scharfe Kanten sehen . Wir werden also niemals eine Pixelation sehen. Aber es gibt noch viel mehr, was Sie mit SVGs machen können. Sie können sogar Animationen in sie einbeziehen. Sie können sie auch für Schriftarten verwenden. Hier ist ein weiteres cooles Beispiel für eine SVG-Datei, die nicht nur Animationen, sondern sogar Interaktionen enthält. So kann ich den Kreis steuern und die Zahlen folgen auch den Änderungen, die ich mache. Und alle dafür erforderlichen Informationen geben tatsächlich den Code für das Schreiben in HTML-, CSS- und JavaScript-Sprachen zurück . Und nicht zuletzt ist es auch erwähnenswert, ein anderes Dateiformat zu erwähnen, das auf Websites immer häufiger verwendet wird. Dies ist das WebP-Format, das von Google entwickelt wurde. Leider wird es in Photoshop noch nicht nativ unterstützt. Sie können jedoch ein offizielles Plugin von Google finden , das Sie über den auf dem Board aufgeführten Link herunterladen können . Sobald Sie dies installiert haben, können Sie Web-Py-Dateien in Photoshop öffnen. Am wichtigsten ist jedoch, dass Sie auch in diesem Dateiformat speichern können . Also nur um es dir auf meinem Computer zu zeigen, habe ich das schon installiert. Und wenn ich zum Menü Datei gehe und Kopie speichern wähle. Hier unten finde ich die Option VAB p sharp. Dies wird also das Web-Py-Dateiformat sein , das wir hier oben sehen können. Sobald ich auf Speichern klicke, erhalte ich diese Einstellungen und sehe sogar eine Vorschau bestimmter Details. Und genau wie bei einem JPEG können Sie die Qualität kontrollieren. Entweder speichern Sie etwas auf verlustfreie Weise oder mithilfe der Einstellung „Verluste“ können Sie die Dateigröße reduzieren. Dieses Dateiformat unterstützt sowohl Animation als auch Transparenz. In gewisser Weise kombiniert es alle Vorteile von JPEGS, PNGs und GIF-Dateien, jetzt von den meisten Browsern weitgehend unterstützt werden. Daher empfehle ich dringend, es in Webdesign-Projekten zu verwenden. Als letzte Anmerkung ist es erwähnenswert, dass versucht wurde, einen neuen Standard für JPEG-Dateien namens JPEG 2 tausend einzuführen , der tatsächlich nativ in Photoshop unterstützt wird was eine bessere Bildqualität bei kleinerer Dateigröße im Vergleich zu den ursprünglichen JPEG-Standards erreichen kann. Leider hat sich dieser neue Standard nicht wirklich durchgesetzt. Die meisten Plattformen unterstützen seinen Schwanz nicht. Und deshalb würde ich lieber empfehlen diese ursprünglichen Dateiformate oder das neue Webformat , über das wir gesprochen haben, zu verwenden. 11. UX- und UI-Design: Sie haben höchstwahrscheinlich von den Begriffen UX und UI-Design oder Benutzererfahrung und Benutzeroberflächendesign gehört . Und die meiste Zeit würden diese Bedingungen auftauchen, wenn wir über Entwicklung einer Anwendung und eines Online-Tools, einer mobilen App, sprechen. Darauf kann aber auch bei Webdesign-Projekten Bezug genommen werden . Wenn Sie etwas erstellen, bei dem Benutzer mit Ihrem Produkt interagieren, müssen Sie im Wesentlichen Benutzer mit Ihrem Produkt interagieren, über die Benutzererfahrung nachdenken und sicherstellen, dass es so reibungslos wie möglich ist. Jetzt sind UX- und UI-Designer zwei separate Berufe, obwohl sie zusammenarbeiten und gemeinsame Verantwortlichkeiten haben. Sie müssen nicht wirklich die gleichen Fähigkeiten besitzen. Ein UX-Designer würde sich auf Strategie konzentrieren , planen, testen und allgemein versuchen, das Problem zu verstehen, das gelöst werden muss, und eine gute Lösung dafür zu finden. Während sich ein UI-Designer auf Dinge wie Topographie, visuelles Design, Grafiken, Symbole, Illustration und Farbe konzentrieren würde auf Dinge wie Topographie, visuelles Design, Grafiken, Symbole, Illustration und Farbe konzentrieren visuelles Design, Grafiken, Symbole, . Am wichtigsten ist jedoch, dass diese beiden Regeln miteinander verbunden sind. Der UI-Designer wäre also ohne die erste Arbeit eines UX-Designers nicht in der Lage, gute Arbeit zu leisten. Die meiste Zeit beginnt die Arbeit hier mit der Planung. Am Ende kann es dann die Phase der tatsächlichen visuellen Designs erreichen. Eine der besten Möglichkeiten, sich diese beiden Rollen und Verantwortlichkeiten vorzustellen und wie sie auf der Arbeit des anderen aufbauen können auf der Arbeit des anderen aufbauen sind diese fünf Elemente der Benutzererfahrung, bei denen die Arbeit immer beginnt mit der Strategie. Das ist die erste Schicht oder das erste Fundament. Und dies ist eigentlich die abstrakteste Phase. Von hier aus wird alles immer konkreter, da wir nach der Strategie jede Schicht nach oben gehen und den Umfang erreichen. Dies sind also die tatsächlichen Anforderungen die das Projekt erfüllen muss. Von hier aus kann eine Struktur erstellt werden, die dann weiter in die Skelette oder Wireframes verfeinert werden kann . Und schließlich kommt die Entwurfsphase auf der Oberfläche, wenn wir uns auf das konzentrieren, was die Benutzer sehen werden. Jetzt fragen Sie sich vielleicht in diesen fünf Ebenen, dass die Trennung zwischen den Aufgaben eines UX- und UI-Designers bestehen würde ? Ich würde sagen, dass die beiden obersten Ebenen etwas sind , auf das sich der UI-Designer konzentrieren würde. Die unteren drei Ebenen wären zwar eher eine Rolle des UX-Designers, aber normalerweise gibt es immer eine Überlappung. Ich würde also sagen, dass all diese drei Schichten hier in der Mitte gemeinsame Verantwortlichkeiten sein könnten. Eine Sache, die definitiv zwischen diesen beiden Rollen liegt, ist, dass sich beide Fachleute auf Design Thinking verlassen müssen . Und das ist eigentlich ein Begriff, der hauptsächlich in diesem Bereich verwendet wird. Design Thinking kann jedoch auch auf alle anderen Bereiche des Grafikdesigns angewendet werden . Und es ist wie eine Methode oder ein Prozess, bei dem Sie die wichtigsten Schritte ausführen können , um das Endprodukt zu erreichen. Alles fängt also immer mit der Design-Herausforderung an, um herauszufinden, was das Problem ist und was gelöst werden muss. Dann kommt die Empathiephase, in der es hauptsächlich darum geht, Interviews und die Beobachtung von Benutzern, die bestimmte Aufgaben erledigen, zu beobachten. Anhand dieser Beobachtungen und genau zu definieren, was das Problem ist, kann die Idee beginnen, die dann dazu übergehen kann, tatsächliche Prototypen zu erstellen und diese schließlich auszuprobieren. Falls Sie nun in dieses Feld einsteigen möchten, sei es als UX- oder UI-Designer, müssen Sie ein paar wesentliche Begriffe lernen. Ähnlich wie alle anderen Bereiche im Grafikdesign. Lassen Sie uns also einfach ein paar davon in diesem Video behandeln. erste einer Benutzerpersönlichkeit ist eine erfundene fiktive Person , die ein Archetyp oder Benutzer eines Produkts ist , dessen Ziele und Eigenschaften die größere Gruppe von Benutzern des Produkts darstellen . Definition dieser Benutzerpersona steht am Anfang eines Projekts, ist sehr hilfreich. Und es ist etwas, auf das Sie sich als ähnlich bezeichnen würden , wenn Sie sich auf den Projektbrief beziehen. Sobald Sie Ihre Benutzerpersonas haben, würden Sie auch Szenarien erstellen, die definieren, wann und wie eine User Story stattfindet. Und es ist eher eine Erzählung, die beschreibt, wie sich diese Musik in einer bestimmten Abfolge von Ereignissen verhalten würde . Und schließlich ist es auch wichtig, das Ziel oder die Ziele eines Benutzers zu definieren , was die Hauptmotivation ist, warum dieser Benutzer Maßnahmen ergreift. Sobald sie ihre Ziele erreicht haben , endet das Szenario. Sobald die Benutzerpersonas, Szenarien und Ziele definiert sind, können Sie weiterhin nach Möglichkeiten suchen, die wichtigsten Funktionen Ihrer App oder Ihres Tools zu definieren die wichtigsten Funktionen Ihrer App oder Ihres , an denen Sie arbeiten. Eine dieser Methoden heißt User Story Mapping, bei der alle potenziellen Aufgaben aufgeführt sind. Es kategorisiert also alle Feature-Anforderungen aus der Sicht des Benutzers, beginnend mit den wichtigsten Aufgaben , die er ausführen möchte, bis hin zu verschieben auf zusätzliche Aufgaben oder Funktionen in der Reihenfolge, in der sie höchstwahrscheinlich erfüllen möchten. Dies ist eine großartige Möglichkeit, die wichtigsten Eigenschaften eines Produkts herauszufiltern die wichtigsten Eigenschaften und sicherzustellen, dass sie wirklich auffällig und leicht zugänglich sind . Wir haben bereits in einem früheren Video besprochen , was Wireframes sind. Also werde ich nicht zu viel Zeit damit verbringen. Aber natürlich sind diese äußerst wichtig für das UX- und UI-Design. Und das würden wir normalerweise als eine Low-Fidelity-Übersicht über das Tool oder die Anwendung bezeichnen . Das Hauptziel dieser einfachen Abbildungen oder Skizzen ist es, die Struktur und den Fluss der möglichen Designlösung festzulegen . Das Erstellen von Benutzerflussdiagrammen kann auch in der Planungsphase sehr nützlich , um die Aktionen zu verstehen und in welcher Reihenfolge die Benutzer , die sie übernehmen werden. Und abhängig von der Komplexität und Umfang des Tools, der Anwendung oder der Website können diese Diagramme auch skaliert werden und mit vielen verschiedenen Routen ziemlich komplex sein. Und schließlich können Sie Ihren Benutzerfluss auch mit Wireframes kombinieren , die wir einfach per Flow aufrufen würden. Und das ist ein großartiges Beispiel. Wieder einmal können wir die Wireframes jeder dieser Seiten oder Bildschirme sehen . Und anstatt die tatsächliche Struktur des Tools anzuzeigen , konzentriert es sich auf die Flows des Benutzers, also wie er die App durchläuft und welche potenziellen nächsten Schritte sie könnten nehmen Sie von einer bestimmten Seite oder einem bestimmten Bildschirm. 12. UX-Gesetze: Neben den grundlegenden Begriffen, die wir im vorherigen Video behandelt haben , ist es auch wichtig, über einige der Benutzererfahrungen, Gesetze oder Prinzipien zu sprechen . Und falls Sie in diesem Kurs bereits die Gestaltprinzipien oder das Thema Designpsychologie gesehen die Gestaltprinzipien oder haben, werden Sie wahrscheinlich einige dieser Regeln erkennen , weil es sich tatsächlich um dieselben Regeln handelt in einem anderen Kontext angewendet. Darüber hinaus gibt es einige Gesetze, die speziell für das UX-Design verwendet wurden . Lassen Sie mich Ihnen ein paar Beispiele dafür zeigen. Zunächst einmal wird Fitts Law sicherstellen , dass umsetzbare Gegenstände leicht zugänglich sind. Und falls es mehrere umsetzbare Gegenstände gibt, sind sie nicht zu nahe beieinander und stellen sicher, dass Benutzer nicht versehentlich etwas drücken oder anklicken , das sie nicht sollten. Dies ist eine sehr interessante Illustration , die zeigt, dass wenn jemand ein Telefon hält, welche Regionen am einfachsten zugänglich sind, und in diesem speziellen Fall die Einhandnutzung ist. Es ist also nur die Verwendung des Daumens auf dem Bildschirm. Und wir können sehen, dass rechte Benutzer eine etwas andere Region im Vergleich zu linken Nutzern haben würden . Am wichtigsten ist, dass es für einen linken Benutzer viel schwieriger wäre, auf diese Ecken zuzugreifen, während für unsere rechten Benutzer die gegenüberliegende Ecke ist. Aber für das universelle Design ist es natürlich immer gut, sowohl Links- als auch Rechtshänder in Betracht zu ziehen . Wenn Sie das Fitts Law anwenden, bedeutet dies, dass dies der Bereich ist, in dem es am einfachsten ist, die wichtigsten umsetzbaren Punkte zu erreichen. Bei Hicks Gesetz geht es um Einfachheit, die Entscheidungen, die ein Benutzer treffen kann, auf ein Minimum zu beschränken. Und dieses Beispiel zeigt einen Vergleich zwischen zwei Arten von Fernbedienungen und wie ein sehr minimalistisches Design wie Apples Controller dem Hicks-Gesetz wirklich gut folgt. Das gleiche Prinzip, das auf ein Formular oder eine Interaktion auf einer Website angewendet wird, würde jedoch so aussehen. Wo Sie wieder einmal so viele verschiedene Optionen auflisten möchten, hätten Sie nur begrenzte Optionen. Und vielleicht kann einer von ihnen bereits als optimales Ergebnis oder Wahl aus dem Forum ausgewählt werden . Natürlich kann der Benutzer dies ändern. Wenn Sie jedoch etwas bereits ausgewählt haben, wird der Entscheidungsprozess immer noch etwas schneller und einfacher. Jacobs Gesetz besagt , dass Sie immer vertraute Szenarien und Logik für Dinge verwenden sollten immer vertraute Szenarien und Logik für Dinge verwenden , denen Benutzer regelmäßig begegnen. Und ein gutes Beispiel ist das Anmeldeformular, das wir an einigen verschiedenen Seiten sehen können , sehr ähnlich aussehen würde. Also gehe ich nur drei davon durch und wie Sie alle zuerst sehen können, beginnen wir mit den schnellsten oder einfachsten Möglichkeiten, sich anzumelden, auf ein bestehendes Konto bei Google verlassen . Apple oder Facebook. Danach geben Sie dem Benutzer die Möglichkeit, sich mit seiner E-Mail-Adresse oder seinem Passwort anzumelden , gefolgt von demselben genauen Setup, erneut auf die Anmeldung konzentriert. Das ist also der Hauptaufruf zum Handeln hier. Und dann zusätzliche Aufgaben, die der Benutzer möglicherweise benötigt , falls er sein Passwort vergessen hat oder falls er noch kein Konto erstellt hat und sich anmelden möchte. Wenn ich also wieder zwischen diesen wechsle, kann man sehen, dass die allgemeine Struktur, obwohl die Designs etwas anders sind , ziemlich gleich ist. Das Gesetz der Schwangerschaft geht es auch um Einfachheit. Und in diesem speziellen Fall geht es darum, wo immer möglich einfachere Formen zu verwenden. Und das ist etwas, was wir sehen können, wenden Sie die erfolgreichsten Designs an. So wären zum Beispiel Avatar-Bilder immer im Kreis. Icons wären sehr klar und vereinfacht. Funktionselemente wie Schaltflächen hätten auch eine einfache Form und selbst Informationen, die verbunden sind, werden normalerweise als einfaches visuelles Element wie ein Rechteck enthalten oder gruppiert . 13. Zusätzliche UX-Gesetze: Dieser Abschnitt einer Seite von Amazons Website zeigt zwei der anderen geltenden Gesetze, das Gesetz der Nähe und die gemeinsame Region, die beide Gestaltprinzipien sind. Zuallererst bedeutet das Gesetz der gemeinsamen Region, dass Sie die damit verbundenen Funktionen oder Merkmale in öffentlichen Bereichen beibehalten sollten . Daher können wir diese Gruppierung hier bereits als gemeinsamer Bereich betrachten . Aber wenn wir uns diese sechs Gruppen gemeinsam ansehen, bildet dies auch eine gemeinsame Region, die diese von denen trennt , die wir hier oben sehen können. Wir können dies also auch als eine Region betrachten. Und da diese Optionen oben auf der Seite höher sind, ist der Text in ihnen größer und sie haben auch Grafiken in sich. Sofort fühlen sie sich wichtiger. So wird es für den Benutzer einfacher sein, diese am häufigsten nach Optionen zu finden. Und falls sie etwas anderes brauchen, können sie in die nächste Region auf der Seite wechseln . Und die Art und Weise, wie das Recht der Nähe hier angewandt wird darin, diese beiden Gruppen weiter voneinander zu trennen. Hier wird also ein größerer Raum geschaffen, sogar eine sehr subtile Trennlinie zwischen diesen beiden Gruppen. Und ein weiteres Beispiel für das Gesetz der Nähe wären Menüs im Falle der Website von Adobe. Auch hier können wir sehen, dass diese Optionen näher beieinander liegen und im Vergleich zu den zusätzliche Optionen , die wir hier auf der rechten Seite finden können. große leere Raum , den wir hier haben, ist derjenige, der diese beiden Gruppen voneinander trennt. Jetzt gibt es auch Millers Gesetz, das wir hier mit diesem Beispiel besprechen können, dem es darum geht, Ihre Inhalte in kleinere Stücke zu unterteilen , um sie für Ihre Benutzer verdaulicher zu machen. Sie möchten also die Anzahl der Optionen einschränken , die sie zu einem bestimmten Zeitpunkt wahrnehmen müssen. Und wir haben bereits in einem früheren Video gesehen, dass es ein riesiges Mega-Menü gibt , das sich öffnen würde, falls wir hier oben auf eine dieser Optionen klicken, aber diese sind alle am Anfang versteckt. Dann können wir uns auf diese fünf Optionen hier links und auf die weiteren drei Optionen auf der rechten Seite konzentrieren diese fünf Optionen hier links und auf . Im Falle des Haupt-Navigationsmenüs das acht Optionen für die Benutzer zur Auswahl, sind das acht Optionen für die Benutzer zur Auswahl, die tatsächlich perfekt mit Millers Gesetz übereinstimmen, das auch besagt, dass sieben die magische Zahl sind. Es ist die Menge an Dingen, die eine durchschnittliche Person in ihrem Kurzzeitgedächtnis behalten kann. Und alle sieben sind der Durchschnitt. Es ist immer gut, plus minus zwei in Betracht zu ziehen. Alles zwischen fünf und neun sollte also eine gute Menge an Informationen sein, die angezeigt werden müssen. Das Gesetz der Ähnlichkeit ist ein weiteres Gestaltprinzip, für das wir hier ein gutes Beispiel sehen können. So werden ähnliche Objekte immer als verwandt oder miteinander verbunden wahrgenommen. Und im Falle eines einfachen Chatbots oder Messaging-Tools können Sie die beiden an der Konversation teilnehmenden Personen immer sofort unterscheiden . Wir haben also eine Person hier links und die andere auf der rechten Seite. Und in diesem Fall ergibt sich die Ähnlichkeit zwischen diesen Elementen aus der Farbe dieser Blöcke, aber auch von dieser Ausrichtung auf der rechten Seite des Bildschirms. Und diese hier sind auf der linken Seite des Bildschirms ausgerichtet . Und wann immer Sie sehen, dass Ihre Fortschritte verfolgt werden, wenn Sie beispielsweise etwas online kaufen, sehen Sie das Gesetz der einheitlichen Verbundenheit in Aktion. Die Linien zwischen diesen Elementen, unabhängig davon, ob sie einige Lücken dazwischen haben oder vollständig verbunden sind, stellen wir sicher, dass Sie diese Details als eine einzige Einheit wahrnehmen . Der serielle Positionseffekt ist ebenfalls interessant, was bedeutet, dass das erste und das letzte Element der Serie immer am besten in Erinnerung bleiben werden. In Bezug auf Ihr Design sollten Sie hier immer Ihre relevantesten oder wichtigsten Informationen aufbewahren . Aber neben diesen gängigsten Gesetzen, die wir als viele zusätzliche Gesetze diskutiert haben , die im Design der Benutzererfahrung verwendet werden. Und diese Tabelle zeigt einige von ihnen. Schauen Sie es sich also an, es ist an der Tafel. Aber jetzt, da wir besser verstehen wofür UX und UI stehen, werden wir uns im nächsten Video speziell auf das App-Design konzentrieren . 14. App-Design: Er ist verrückt darüber nachzudenken, aber heutzutage können Sie so ziemlich alles tun, indem Sie Ihr Mobiltelefon verwenden , ohne sich auf einen Laptop oder Desktop-Computer verlassen zu müssen. Ich erinnere mich noch daran, dass der Kauf von etwas online sehr komplex war und online sehr komplex war und für das ich mein Handy definitiv nicht benutzt hätte . Aber jetzt ist dies das völlige Gegenteil. Und selbst Banking ist etwas , das ich lieber auf meinem Handy machen würde , verglichen mit meinem Computer. Und der Hauptgrund dafür ist, dass sich mobile Geräte und mobile Apps in insbesondere mobile Geräte und mobile Apps in den letzten Jahren so stark verbessert haben. Und insbesondere in Bezug auf ihre Benutzerfreundlichkeit, die sie tatsächlich übertreffen, sind sie besser als die meisten Websites. In diesem Video möchte ich Ihnen nur ein paar Beispiele oder interessante Dinge nennen Ihnen nur ein paar Beispiele oder , die ein App-Designer bei seiner Arbeit berücksichtigen muss. Aber das ist natürlich ein riesiges Thema. Und um AB-Design in Aktion sehen zu können, zeige ich Ihnen nach diesem Video tatsächlich ein bestimmtes Projekt von Anfang bis Ende in von Anfang bis Ende in ein paar Videos mit Adobe XD App-Designprojekten wie normalerweise würden alle anderen Grafikdesign-Projekte in der Forschungsphase beginnen. Und hier ist es am einfachsten, Änderungen an der Projektrichtung vorzunehmen. Und dann erhalten Sie diese Regel zur 100. Änderungsregel, was bedeutet, dass Sie entweder zu Beginn dieser Forschungsphase 1 US-Dollar ausgeben können Beginn , um das Projekt zu ändern. Oder Sie würden nicht zehnmal mehr ausgeben , wenn Sie sich bereits in der Entwurfsphase befinden, oder noch schlimmer, Sie können 100 Mal mehr ausgeben , wenn sich Ihr Projekt bereits in Entwicklung befindet. Und deshalb ist es so wichtig, zuerst mit einer hochrangigen Planung zu beginnen, die wir bereits besprochen haben, dass es sich um eine Aufgabe des UX-Designers handelt. Das ist also die Strategiephase und die Identifizierung des Problems. Und sobald alle wichtigen Funktionen und Funktionen einer App identifiziert sind, können die Designer der Benutzeroberfläche mit der Arbeit an verschiedenen Prototypen beginnen . Normalerweise würden sie mit diesen Low-Fidelity-Prototypen beginnen, bei denen es sich diesen Low-Fidelity-Prototypen beginnen, um einfache Skizzen handelt auf das Layout und die Struktur jedes Bildschirms konzentrieren. Und sobald diese getestet und genehmigt wurden, können sie mit der Erstellung von High-Fidelity-Prototypen fortfahren , die der endgültigen Version sehr ähnlich aussehen. In den meisten Fällen würden sie aber auch bereits ähnlich wie das Endprodukt funktionieren. Sie können dies also als Pilotversionen des Endprodukts betrachten . Diese sind äußerst nützlich für alle, die am Designprozess beteiligt sind, auch für den Kunden. Natürlich, am wichtigsten ist, dass es auch sehr helfen wird, wenn es darum geht, vom Design zur tatsächlichen Entwicklung zu wechseln. Die Designer müssen also ihre Arbeit an die Entwickler unterbrechen. Und ein funktionierender Prototyp wie diesen, bei dem die Interaktionen alle sichtbar gemacht werden , wird alles viel klarer machen. Und es kann viel Zeit und Geld sparen, um alles in viel weniger Phasen richtig zu machen. Hier ist ein Beispiel für einen High-Fidelity-Prototyp, der in Adobe XD erstellt wurde. Und das ist eigentlich etwas, das wir uns in den nächsten Videos genauer ansehen werden. Aber um Ihnen zu zeigen, wie es funktioniert, ich einfach die Befehlstaste oder die Eingabetaste. Und das gibt uns die endgültige Version dieser App in Adobe XD. Hier können wir also bereits mit der Interaktion beginnen und auf verschiedene Elemente klicken und wir können sehen, wie sich dies auf alle Elemente im Design auswirken wird. Wir können auf andere Seiten springen. Wir können zwischen diesen Seiten wechseln. Wir haben sogar ein Menü , in dem wir wieder auf verschiedene Seiten oder Bildschirme innerhalb der App springen können wieder auf verschiedene Seiten oder Bildschirme innerhalb der App springen . Und dann können wir auch zurück zum Home-Bildschirm springen und es gibt sogar ein paar Informationen hier oben. Das Tolle an Adobe XD ist, dass Sie sogar jedes Design direkt auf Ihrem Mobilgerät testen können dass Sie sogar jedes Design direkt , solange es mit Ihrem Computer verbunden ist. Und diese Art von sofortigem Feedback kann äußerst nützlich sein , wenn Sie die Dinge benutzerfreundlicher gestalten möchten. So können Sie die Dinge selbst testen, sobald Sie etwas in der Anwendung erstellt haben. Jetzt haben Sie vielleicht von Software oder Wirtschaft gehört, und dies ist tatsächlich ein spezialisiertes Feld , das sich hauptsächlich mit den Interaktionen eines Benutzers bei der Verwendung einer Software oder Anwendung befasst den Interaktionen eines Benutzers , oder in diesem Fall eine App auf einem mobilen Gerät. Wir haben einige Beispiele für Benutzerfreundlichkeit gesehen, und wir haben auch diskutiert, dass die Bereiche, die näher am Daumen einer und wir haben auch diskutiert, dass die Bereiche, die näher am Person liegen, eine ideale Platzierung für primäre Navigationselemente sein werden . Eine weitere wichtige, wichtige Sache, die Sie beachten müssen , ist , dass die meisten Elemente in Ihrem Design, mit denen der Benutzer interagieren soll , etwa zehn Millimeter groß sein müssen. Alles, was kleiner ist, wäre für die meisten Menschen ziemlich schwierig , genau darauf zu tippen. Es kann extrem frustrierend , wenn man nichts zum Laufen bringen kann. Dies ist also definitiv etwas , das jeder App-Designer im Auge behalten muss. Und aus diesem Grund die Anzahl der Optionen, beispielsweise im Haupt-Navigationsbereich , den wir normalerweise als Tableiste bezeichnen , auf ein Minimum beschränkt Haupt-Navigationsbereich , den wir normalerweise als Tableiste bezeichnen , auf . In diesem Fall gibt es also nur drei davon. Und es gibt diese wirklich schönen Animationen, die Sie natürlich in einigen Apps sehen würden, die die Ästhetik einer App einzigartiger und ansprechender machen können . Hier ist ein weiteres großartiges Beispiel für eine Tableiste die eines der Prinzipien anwendet über die wir im vorherigen Video gesprochen haben. Wir können also sehen, dass wir die Benutzeroberfläche vereinfachen können, indem wir nur den Namen einer Funktion oder des Symbols anzeigen die Benutzeroberfläche vereinfachen können, indem wir nur den Namen einer Funktion oder des Symbols . Und anstatt acht Elemente zu haben, wenn es jeweils nur vier gibt, die wir sehen können. Dies ist eine sehr clevere Möglichkeit, die ausgewählte Registerkarte oder den ausgewählten Bildschirm anzuzeigen , auf dem sich der Benutzer befindet. Das ist also derjenige, der in schriftlicher Form oder im anderen Zustand in ikonischer Form auftaucht . Vielleicht erinnern Sie sich auch daran dass Jacobs Gesetz sagte , dass Sie sich an vertraute Szenarien halten sollten , und das gilt auch für bekannte Symbole oder Formate bestimmter Designelemente. Und das Hamburger-Symbol für Menüs kann als eines dieser Standardelemente angesehen werden, die jeder verwenden kann. Und wir werden erwarten, dass ein Overlay wie dieses angezeigt wird, wenn sie darauf tippen. Die Art und Weise, wie die Tab-Leiste oder das Hamburger-Menü funktionieren wird. Und bei Peer kann alles perfekt in einem Prototyp mit Tools wie Adobe XD neu erstellt werden. Und dafür werden wir in Kürze Beispiele sehen. Und es gibt einen letzten sehr wichtigen Aspekt beim Entwerfen für mobile Geräte zum Beispiel im Vergleich zum Entwerfen einer Website, und zwar der Einsatz von Gesten. Jetzt wurden diese so standardmäßiger, als fast jeder Benutzer erwarten würde , sie nutzen zu können. Abhängig von der Art der App. Natürlich können Sie diese Gesten für sehr spezifische Dinge oder Dinge verwenden sehr spezifische Dinge oder Dinge , die Benutzer normalerweise erwarten würden, wie zum Beispiel das Einklemmen oder Verbreiten würde ein- und auszoomen. 15. Intuitive Tools für Webdesign: Für den Fall, dass Sie eher eine visuelle Person sind aber immer noch daran interessiert sind, sich mit dem Webdesign zu beschäftigen. Eine Frage, die Sie möglicherweise stellen , ob Sie einen Job bekommen können oder ob Sie in diesen Sektor einsteigen können ohne etwas über Codierung zu wissen. Und die gute Nachricht ist, dass Sie es natürlich können und sogar voll funktionsfähige Websites oder Prototypen erstellen können , die sich auf Tools wie Adobe XD-Beispiele verlassen , die wir in den vorherigen Videos gesehen haben. Es gibt aber auch Tools wie Webflow, denen Sie voll funktionsfähige Websites erstellen und sogar bereitstellen können , ohne dass Sie eine einzige Codezeile schreiben müssen. Jetzt ist der Webflow nicht Teil der Creative Cloud, wird aufgrund der Vertrautheit der Benutzeroberfläche für die meisten Grafikdesigner immer noch ein ziemlich einfaches Werkzeug aufgrund der Vertrautheit der Benutzeroberfläche für die meisten Grafikdesigner sein. Nun, wir werden dies zusammen mit Adobe XD in Aktion sehen für ein Webdesign-Projekt verwendet wird die in den nächsten Videos für ein Webdesign-Projekt verwendet wird. In der Creative Cloud haben wir auch Adobe Spark , ein großartiges Tool , mit dem Sie schnell und einfach Leihseiten erstellen können , ohne irgendeine Programmierung durchzuführen. Und es gab früher ein anderes Tool in der Creative Cloud namens Adobe Muse, das Webflow ähnlich war, aber leider ist es jetzt eingestellt und Adobe entwickelt es nicht weiter. Ich erwähne auch gerne Thrive Architect, das ist das Tool, das wir für unsere WordPress-Site verwenden. Das ist wiederum ein großartiger Drag-and-Drop-Typ von Builder, das Anpassen von WordPress-Themes und -Vorlagen so viel einfacher macht , sich auf die Codierung zu verlassen. Um die ursprüngliche Frage zu beantworten, ja, Sie können Webdesign ohne Programmierkenntnisse durchführen. Und indem Sie solche Tools verwenden, können Sie in Ihren Projekten sehr weit kommen, vielleicht sogar zu einem Endprodukt. Wenn Sie jedoch ein grundlegendes Verständnis für Codierungssprachen haben , ist es viel einfacher, mit Entwicklern zusammenarbeiten zu können , wann immer es notwendig ist , sie an Ihren Projekten zu beteiligen. Falls Sie also interessiert sind zu sehen, wie Webflow in Kombination mit XD verwendet werden kann. In den nächsten paar Videos zeige ich Ihnen ein Beispiel dafür. 16. Adobe XD + Webflow-Workflow – Die ersten Schritte: Bevor wir anfangen, wollte ich Ihnen nur zwei Websites zeigen , die in Webflow integriert wurden. Und sie zeigen und heben einige der coolen Funktionen hervor, die Sie verwenden können, wie diese Parallax-Effekte , die Sie hier unten sehen werden, die Interaktionen beim Hover und auf der Seite scrollen. Und wir können sehen, dass dies auch eine voll reaktionsschnelle Seite ist. Als ich also die Größe meines Browsers geändert habe, passt er sich daran an. Nun, das Beste ist wieder in Webflow, Sie können dies tun, ohne eine einzige Codezeile zu schreiben , und Sie werden genau sehen, wie es gemacht wird. Aber hier ist eine andere wirklich nette Seite. Ich werde es nur aktualisieren, damit du sehen kannst, wie es geladen wird. Wir haben hier ein paar sehr nette Animationen und Effekte. Und man sieht hier eine Menge Dinge vor sich. Coolere Fakten, wirklich nette Übergänge. Und dann ist das alles wieder ansprechbar. Und wir haben hier ein paar nette Menüs, sogar Cursoreffekte und so weiter und so fort. Wenn Sie nun auf Webflow-Seite gehen, finden Sie diese Beispiele im Showcase. Aber ich werde ein neues Projekt starten, wie ich es versprochen habe. Lasst uns also ohne weitere Verzögerung loslegen. Ich wähle die leere Seite und nenne einfach dieses Naturfoto. Ich erstelle das Projekt. Jetzt sind wir hier im Webflow Builder. Und wenn Sie mit Adobe-Produkten vertraut sind, werden Sie das Layout und die Benutzeroberfläche sehr ähnlich finden . Auf der linken Seite haben wir die Symbolleiste, dann haben wir Panels, und wir haben auch hier oben ausgewählt , um die Ansicht zwischen verschiedenen Plattformen oder Bildschirmauflösungen zu ändern . Aber ich werde dir mehr darüber erzählen, während wir weitermachen. Also zeige ich dir zunächst in XD, was ich geschaffen habe. Dies ist also das visuelle für die Seite, die Hauptseite der Website. In XD können Sie den Befehl scrollen oder Strg scrollen verwenden, um schnell ein- und auszuzoomen und Command oder Control 0, genau wie in Photoshop und Illustrator, um die Seite oder die Kunsttafel an den Bildschirm anzupassen. Sie können also sehen, dass es sich um eine ziemlich einfache Seite handelt. Wir haben einen Header, wir haben einen gemeinen Schieberegler oben und ein paar Dinge unten. Jetzt werde ich es im eigentlichen Webflow, einem Projekt, etwas länger machen . Aber im Moment ist dies alles , was wir in XD beachten müssen , wenn Sie mit der Erstellung Ihrer Mockups beginnen, Sie können auch Prototypen erstellen. Erstellen Sie also mehrere Seiten und probieren Sie sogar aus wie er funktioniert, wenn Sie zwischen den Seiten wechseln. Aber im Moment zeige ich Ihnen nur, dass Sie, wenn Sie bereit sind, in das Menü Datei gehen und Exportieren, Alle Zeichenflächen oder Stapel wählen können . Oder Sie können sogar eine Auswahl haben und dann nur die ausgewählten Elemente exportieren. Aber bevor wir in Webflow einsteigen, möchte ich Ihnen hier in XD eine Sache zeigen, was auch eine erstaunliche Funktion ist, besonders wenn Sie an diesen Bildern oder Mock-ups arbeiten . Ich doppelklicke zuerst auf die Kunsttafel und ziehe es weiter nach unten. Wir haben also ein bisschen mehr Platz hier. Und sagen wir einfach, dieses Layout , das ich in der Kamera habe, und der Text daneben wäre etwas, das ich gerne mehr haben möchte. Ich möchte also ein paar Funktionen haben, die unten aufgeführt sind. Dazu können Sie die Funktion Raster wiederholen in XD verwenden. Sie können Command oder Strg R drücken oder hier rechts auf dieses Symbol klicken. Und das erzeugt daraus ein Raster, was bedeutet, dass Sie es dann nach unten ziehen können und Dinge so einfach in beide Richtungen duplizieren so einfach in beide Richtungen und dann einfach perfekt, aber auch horizontal arbeiten. Das Beste daran ist, dass wir jeden dieser Gegenstände wiedergutmachen können jeden dieser Gegenstände wiedergutmachen , ohne das Raster zu vermasseln. Also lass mich dir zeigen, was ich meine. Ich zoome ein bisschen näher. Zum Beispiel, wenn ich den Text für dieses zweite Element ändern möchte , wäre es Wildtiere an Ihren Fingerspitzen. Sie werden sehen, dass es oben und unten nichts ändert. Und um das Bild zu ersetzen, ziehen Sie am besten alle drei Bilder, die es verwenden soll, per Drag & Drop . Wenn ich sie also per Drag & Drop hier reinziehe, werden alle drei Bilder gleichzeitig aktualisiert. Das Coole daran ist, dass , da es sich immer noch um ein Wiederholungsraster ich, da es sich immer noch um ein Wiederholungsraster handelt, es auswählen kann den Abstand zwischen ihnen gleichzeitig anpassen kann, ich kann auch weiter unten weitere Bilder hinzufügen . Und beachte, dass es sich mit dem ersten in dieser Spalte wiederholen wird. Aber natürlich kann ich zusätzliche Beträge erstellen, wie zum Beispiel den Text auswählen, darauf doppelklicken und ihn verschieben. Beachten Sie, wie alle gleichzeitig aktualisiert werden, oder vergrößern Sie einfach die Größe des Textes. Und ohne die Kopie zu vermasseln, bewegen sie sich alle gleichzeitig. Und das ist nur eines von vielen Dingen, die ich an der Arbeit in Adobe XD liebe, insbesondere für Webdesign. Es ist wirklich ein Rapid-Prototyping-Tool, mit dem Sie loslegen und es in eine funktionierende Website in Webflow verwandeln können. 17. Adobe XD + Webflow-Workflow – Importieren des Designs in Webflow: Aber ich habe schon alles vorbereitet, damit wir einfach zurück in den Browser greifen können. Das erste, was wir tun müssen, ist , den Header hinzuzufügen. Dafür. Ich klicke hier auf das Pluszeichen. Und Sie können sehen, dass wir hier ein paar vorgefertigte Layouts haben , aber womit wir beginnen müssen, ist die Navigationsleiste. Also werde ich das einfach per Drag & Drop hier rein ziehen. Wenn Sie jetzt anfangen, ohne Abschnitte in Ihrem Design zu haben , könnte dies später ein Problem sein. Also empfehle ich, das zuerst zu machen. Und natürlich können Sie dies auch später tun, weil Sie jedes Element einfach von einem Ort zum anderen ziehen und ablegen können . Ich ziehe diesen Abschnitt einfach und du kannst sehen, dass ich den Navigator auch verwenden kann um zu entscheiden, wo dies sein wird oder hier im eigentlichen Viewer- oder Layoutbereich. Also werde ich es einfach hier oben fallen lassen und dann die Navigationsleiste in den Abschnitt ziehen, genau wie im Ebenenbedienfeld, sehen Sie genau jetzt, dass sich Navbar im Abschnitt befindet. Also jetzt ist das fertig. Wir können unser erstes Bild in diese Schachtel legen. Es gibt eine sehr praktische Verknüpfung in Webflow. Und wenn Sie Befehlstaste oder Strg E drücken, erhalten Sie das schnelle Geldbußen. Und wenn ich nur ein Bild eintippe und dann Eingabetaste drücke, wird es bereits innerhalb des ausgewählten Artikels platziert , damit wir es jetzt im Markenbereich sehen können , haben wir das Bild. Jetzt kann ich Bild auswählen und wir können Bilder einfach per Drag & Drop hier hineinziehen, ich benutze den Finder und wähle das Bild aus, das wir benötigen, das Logo und ziehe es einfach hierher. Sie können auch mehrere Elemente oder Bilder gleichzeitig per Drag & Drop mehrere Elemente oder Bilder gleichzeitig ziehen und sie in Webflow in der SAS-Bibliothek hinzufügen . Übrigens können Sie auch zu dieser Ansicht wechseln, indem Sie auf der Tastatur G drücken. So können Sie immer alle Ihre Assets sehen oder einfach auf dieses Symbol hier auf der linken Seite klicken, es gibt auch eine Verknüpfung für den Navigator , nämlich z, oder klicken Sie auf dieses Symbol hier links. Jetzt, da wir das Bild an Ort und Stelle haben, kann ich damit beginnen, den Abstand und die Polsterung zu verfeinern. Was ich also tun werde, ist eine Marge darüber hinzuzufügen. Und merke, dass ich diese Zahlen einfach nach oben und unten ziehe. Aber was noch cooler ist, ist, wenn Sie die Umschalttaste gedrückt halten, können Sie diese Werte auf einmal erhöhen und verringern, also in alle Richtungen. Oder wenn Sie die Alt- oder Wahltaste verwenden, indem Sie nach oben und unten ziehen, werden die gegenüberliegenden Seiten gleichzeitig geändert. Wenn Sie die Alt- oder Wahltaste gedrückt halten auf eine Zahl klicken, können Sie sie zurücksetzen. Also kann ich diese sehr schnell zurücksetzen und dann immer noch Alt oder Option gedrückt halten, ich werde nur den oberen und unteren Rand erhöhen. Und dann reduziere ich auch die Größe, indem ich die Alt-Taste oder Wahltaste gedrückt halte. Sie können auch auf beliebige Werte nach links und rechts klicken und ziehen , und Sie können sie sehr schnell aktualisieren oder ändern. Jetzt kann ich es also einfach auf etwa 70% einstellen. Ich denke, das ist eine gute Größe für das Logo und für die eigentlichen Navigationslinks. Ich kann das ganze Menü auswählen und ich kann das Gleiche weitermachen , damit ich sie so etwas weiter nach unten bewegen kann . Und dann können wir natürlich anfangen, diese zu ändern. Also hier tippe ich einfach Zeitschriften ein. Und dann wähle ich dieses aus. Und ich denke im ursprünglichen Design, wenn wir zurück zu XD gehen, ist der nächste die Schule. Doppelklicken Sie also einfach und tippen Sie sie ein. Wenn wir jetzt oben mehr Navigationsoptionen benötigen, können wir einfach die Alt- oder Wahltaste gedrückt halten und eine dieser Optionen ziehen und dort platzieren, wo es hin muss. Lassen Sie uns noch einmal prüfen, dass der nächste Autoren ist. Also doppelklicke ich einfach, tippe das ein. Und dann können wir das Gleiche auch tun, indem Command C oder Control C zum Kopieren und dann Command oder Control V zum Einfügen verwenden. Sie können sehen, wie schnell wir wieder eine weitere hinzugefügt haben. Und ich kann vorerst einfach ein Maulwurf-Portfolio eintippen. Jetzt werde ich vorerst nicht mehr Zeit in der Navigationsleiste verbringen . Lassen Sie uns zu einem aufregenderen Element übergehen, dem Schieberegler. Dafür erstelle ich erneut einen neuen Abschnitt. Sie können also sehen, dass unser erster Abschnitt hier ist. Ich wähle es einfach aus und erstelle eine Klasse dafür, was nützlich ist, denn später können wir diese Klasse bei Bedarf wiederverwenden. Ich nenne es einfach Navigation oder Hauptmenü vielleicht so etwas. Lassen Sie uns nun einen neuen Abschnitt erstellen. Wir gehen in die Anzeigenoptionen ein und ziehen diesen Abschnitt dann direkt hier unter die Navigationsleiste. Für diesen Abschnitt verwende ich ein anderes Element. Quickfind ist wahrscheinlich der einfachste Befehl oder Control E, geben Sie den Schieberegler ein und dann die Eingabetaste. Das ist also schon damals platziert, jetzt die Höhe vier, das sollte anders sein. Also finde ich einfach die Größe. Es ist hier oben. Anstelle der automatischen Höhe definiere ich dies also auf 400 Pixel, vielleicht sogar größer, 500 Pixel. Im Moment können wir diesen immer Liter ändern, aber das ist eine gute Größe. Und das zeige ich dir hier im Navigator. Wenn wir das öffnen, sehen Sie bereits, dass wir zwei Folien haben. Und auch hier unten können wir sehen, dass ich jetzt in Folie eins das erste Bild platzieren werde. Und der beste Weg , es zu platzieren, ist anstatt ein Bild darin zu ziehen und abzulegen, ich werde diese Hintergrundoption verwenden. Klicken Sie also auf das Pluszeichen und Sie sehen, dass standardmäßig das Hintergrundbild hinzugefügt wird. Dann können wir das Bild auswählen. Und wieder einmal, aus dem Finder, ich eines dieser Bilder per Drag & Drop ein. Lassen Sie uns einfach noch ein paar Mal einholen. Also wähle ich dieses aus. Und dann vielleicht die Pelikane als Drag & Drop oder drei von ihnen hier rein. Jetzt wähle ich aus diesen den ersten aus. Natürlich möchten Sie die Größe Ihrer Bilder minimieren. Wenn sie also wirklich hochauflösend sind, kann es lange dauern, bis die Site geladen wird. Aber das ist eigentlich einer der größten Vorteile des Luftstroms, dass, wenn Sie Ihre Website mit ihnen hosten, die Geschwindigkeit unglaublich ist. Die Wissenschaft wird also sehr schnell geladen. Es ist sowohl den Code als auch das Hosting sehr gut optimiert . Jetzt gehe ich zurück zu den Bildern. Wähle noch einmal Bild und ich fange mit dem Bild an. Aber es ist wichtig, dass wir, anstatt es als Muster zu verwenden, es auf Deckung setzen möchten. Wir können die Position auch an den Mittelpunkt oder an beliebige Punkte des Bildes anheften . Wenn ich also ein bisschen mehr vom unteren Teil sehen möchte, können wir es unten anheften. Jetzt stelle ich es in die Mitte, damit wir den Nachthimmel mit den Nordlichtern sehen können. Und ich wechsle zu Folie zwei und wiederhole das Gleiche. Also gehen wir wieder zu Hintergründen wählen das Bild dafür aus. Ich werde mich für diesen zweiten entscheiden, Canyon, und ich werde es abdecken und dann an den Teil stecken, der Sinn macht. Ich denke, dieses Mal ist es wahrscheinlich gut, es hier oben zu haben. Wenn Sie nun diese dritte Folie hinzufügen möchten, gehen Sie am einfachsten zur Registerkarte Einstellungen. Und dann können wir die Option Folie hinzufügen besser wählen , um es dann zu kopieren, denn wenn Sie eine Folie kopieren, werden sie möglicherweise verbunden. Einer von ihnen wird also der Elternteil sein und der andere ist das Kind. Und dann musst du nur ein bisschen mehr herumspielen, um sie zu teilen oder auf diese Weise zu trennen. Ich glaube, es ist schneller. Jetzt, da wir Folie drei haben, können wir wieder in die Stiloptionen zurückkehren. Und dann gehen wir weiter unten ins Bild und wählen dann ein anderes Bild aus, und wir wählen dieses aus. Wieder einmal wird es bereits abgedeckt. Es scheint, dass wir nur die Position ändern müssen . Wahrscheinlich wird Center für diesen arbeiten. Ja, ich mag es. Das einzige, was ich ändern werde, ist, zur Hauptgröße des Schiebereglers zurückzukehren. Also wähle ich den Schieberegler aus und erhöhe ihn dann vielleicht auf 550 Pixel. Ja, so etwas. Wenn Sie jetzt testen möchten, wie Ihre Website funktioniert, können Sie die Befehlszeilenkombination oder die Steuerverschiebung P verwenden, mit der Sie es testen können. Und standardmäßig wird sich der Schieberegler nicht bewegen. Wir können also nur manuell zwischen den drei Bildern wechseln, die wir hinzugefügt haben. Und natürlich werden wir je nach Bildschirmgröße verschiedene Teile davon in der Vorschau sehen. Wir können bereits auf die Tablet-Größe umschalten, in der ich einen etwas anderen Anteil im Bild sehen kann . Und beachte, dass das Menü bereits in ein mobiles Menü gewechselt ist, was ganz nett ist. Sie können auch sehen, wie es auf Mobilgeräten aussehen wird. So können wir mit der gleichen Verknüpfung Command oder Control Shift P in den Entwurfsmodus zurückkehren der gleichen Verknüpfung Command oder Control Shift P oder oben auf das Symbol klicken. Also da sind wir, Wir sind zurück. Und ich wähle den Schieberegler aus und gehe in die Einstellungen. Und ich möchte, dass es automatisch die Seiten spielt. Also füge ich diese Option einfach hinzu. Und dann können wir alle möglichen anderen Dinge einrichten. Wie anstelle des Animationstyps, den wir hatten, können wir Fade over wählen, was ganz nett ist. Lassen Sie mich Ihnen also einfach dieses kleine zeigen, das wir in der Vorschau sehen werden und ich lese nur ein bisschen länger. Und dann bekommen wir den Feed oder wir können ihn auch sehen, wenn wir zwischen ihnen wechseln. Okay, das ist alles, was wir für den Schieberegler tun mussten. 18. Adobe XD + Webflow-Workflow – Hinzufügen von Animationen: Jetzt zeige ich dir ein wirklich cooles Feature wie du eine Animation nebenbei hinzufügst. Dieser Flow hat eine Integration mit einer Site namens Lottie, und Sie finden dieses Element hier auf der linken Seite. Fügen wir zuerst unten einfach einen weiteren Abschnitt hinzu. Und ich werde wieder Elemente hinzufügen, scrollen Sie ganz nach unten, und dann sehen Sie es hier im Medienbereich, Latae-Animation. Ich ziehe dieses Element per Drag & Drop in diesen neuen Abschnitt. Und wenn ich etwas weiter nach unten scrolle, siehst du es schon hier. Und um einige Beispielanimationen zu finden, können wir zu diesem Link gehen, Latif-Dateien, und er öffnet die Website, auf der Sie ein Konto für sich selbst erstellen müssen . Und dann können Sie diese vorgefertigten Animationen herunterladen. Jetzt werden einige von ihnen bezahlt, aber es gibt auch kostenlose. Wenn ich zum Beispiel nur die Kamera eintippe, können wir viele coole Animationen finden. Und hier ist eine, die völlig kostenlos ist. Alles, was Sie tun müssen, ist diese JSON-Datei herunterzuladen. Sobald Sie das heruntergeladen haben, können Sie die Straße in Webflow importieren. Und dies ist das Dateiformat , das Sie auch verwenden müssen wenn Sie selbst etwas in After Effects erstellen . Und das ist ein wirklich cooler Aspekt davon. Auch hier ist eine Integration zwischen dem Adobe Creative Cloud Webflow , dass es diese Tools wirklich gut miteinander verbindet. Wenn dies etwas ist, worüber Sie mehr erfahren möchten und Sie möchten ich etwas in After Effects erstelle als es für Webflow vorzubereiten. Lassen Sie es mich im Kommentarbereich unten wissen und ich werde gerne ein separates Tutorial zu diesem Thema aufnehmen . Aber wenn ich zum Designer zurückkomme, habe ich diese Datei bereits heruntergeladen, damit wir sie einfach zu unseren Assets hinzufügen können. Hier ist die Datei JSON, und ich werde sie einfach per Drag & Drop hineinziehen. Jetzt ist es hinzugefügt. Ich kann es einfach durch dieses ersetzen und es ist bereits auf der Website, aber Sie werden es nur sehen, wenn Sie in den Vorschaumodus wechseln. Du kannst im Moment sehen, dass es riesig ist. dies zu beheben, benötigen wir ein separates Element innerhalb des Abschnitts. Was ich normalerweise mache, wenn ich ein Element einschränken möchte , ist entweder einen Container oder einen Block zu verwenden. Ich benutze Command oder Control E und tippe dann div ein. Und sie haben blockiert. Jetzt, da wir das haben, können wir es einfach so einrichten, dass die Animation innerhalb des Blocks befindet. Dann wählen wir den Def-Block aus und aus den Einstellungen hier rechts können wir seine Größe einrichten. Also werde ich für die Breite, vielleicht 200, und dann für die Höhe, vielleicht einen 150, so etwas verwenden. Und dann können wir es mit diesem Icon zentrieren. Der DFF-Block befindet sich jetzt in der Mitte. Sehen wir uns also die Vorschau an, wie das aussieht. Und ich denke, das sieht perfekt aus. So schnell und einfach war es , diese Animation einzurichten. Und wir können in die Einstellungen zurückkehren und sicherstellen , dass die Animation weiterläuft. Wenn also die Animation selbst ausgewählt ist, können wir zu den Einstellungen gehen und einfach Schleife auswählen. Um sicherzustellen, dass Sie verstehen wie schnell und einfach das war, werde ich diese Animation durch eine andere ersetzen. Also gehe ich einfach zurück zu Latif-Akten. Und hier ist noch eine, die nur die Blende zeigt und wie sie sich verändert, was ziemlich cool ist. Wenn ich noch einmal darauf klicke, ist dies eine kostenlose Animation aus Latif-Dateien. Ich lade die JSON-Datei herunter. Jetzt, da die Datei heruntergeladen wurde, können wir zurück zu Webflow gehen und in unsere Assets gehen und einfach die Datei n ziehen und ablegen. Das ist also die Blende Datei JSON. Und dann müssen wir nur von den Medienressourcen aus, wir können dies einfach per Drag & Drop in den Def-Block ziehen. Kann hier auf der rechten Seite auf Preview-Animation klicken und wir sehen, dass sie bereits funktioniert. So schnell und einfach ist es also, Ihren Webdesigns Animationen hinzuzufügen. 19. Adobe XD + Webflow-Workflow – Scroll-Animationen: Lassen Sie mich nun zurück zu XD wechseln, um Ihnen den nächsten Teil der Seite zu zeigen. Ich werde diesen Teil hier in der Mitte tatsächlich überspringen , weil ich mich auf diesen unteren Teil konzentrieren möchte , in dem ich mehr auf die Funktionen dieser Magazine eingehe. Und der erste betrifft die vor Ort getesteten Kameras und Ausrüstung. Dafür möchte ich jetzt mit der Einführung einiger Parallax-Animationen beginnen Einführung einiger Parallax-Animationen , nur um etwas zu haben, um auf und ab scrollen zu können und den Parallax-Effekt sehen zu können. Ich füge hier ein weiteres Element hinzu. In dieser Zeit ein Container. Ich verwende Command E und tippe Container ein. Da ist es. Stellen Sie einfach sicher, dass es nicht im If-Block ist. Ich ziehe es einfach raus. Ja, da ist es. Und ich werde ein Bild darin platzieren und das Bild auswählen. Lass uns einfach das Magazin wählen. Und da ist es. Jetzt können wir unten einen neuen Abschnitt erstellen. Gehen wir also zum Pluszeichenbereich und ziehen Sie ihn dann ganz unten. Beachten Sie also, dass wir diesen Abschnitt nicht in einem anderen Abschnitt hinzufügen können , der völlig normal ist. Jetzt, da wir unseren Abschnitt hier haben, verwende ich ein anderes Element namens Columns, das uns die Einstellungen gibt, ob wir 234 oder irgendwelche Arten von Spalten wünschen . Ich wähle zwei aus. Beachten Sie auch, dass wir die Größe oder Aufteilung zwischen diesen Spalten bereits einrichten können . Ich hätte eigentlich gerne etwas mehr Platz auf der rechten Seite für dieses erste Feature als hier in dieser linken Spalte. Also in der ersten Spalte möchte ich ein Bild platzieren. Also tippe ich das Bild erneut ein, platziere es und wähle dann das Bild und ziehe die Kamera einfach in unsere Bibliothek. Und sobald es hochgeladen wurde, können wir es auswählen und es ist bereits da. Jetzt auf der rechten Seite hätte ich gerne Text, also füge ich zuerst eine Überschrift hinzu. Und dann füge ich einen weiteren Elementabsatz hinzu, der diese Verknüpfung verwendet , fühlt sich wirklich so an, als wäre ich in InDesign, wo wir Quick Apply mit Befehl oder Control Return oder Enter haben . Sogar die Abkürzung ist fast gleich. Also gefällt mir das wirklich. Es fühlt sich wirklich natürlich an. Jetzt nehme ich nur ein paar Anpassungen für den Absatz vor. Ich hätte gerne etwas Polsterung von rechts. Also werde ich es einfach ein bisschen so hineindrücken . Und dann tippe ich hier einfach Kameratests ein. Es spielt keine Rolle , was wir gerade da sind. Und ich werde noch etwas mehr Spielraum von oben haben. Dann wähle ich das Bild aus und wir haben auch einen Rand von links. Ich werde das kleiner machen. Ziehen Sie also alle nach links die maximale Breite, so etwas. Dann werde ich von der Position aus öffnen, schweben und löschen und die richtige Option wählen. Positionieren Sie das Element also rechts daneben in dieser Spalte. Und dann werde ich vielleicht einfach die Marge am Text etwas mehr erhöhen , so etwas. Und jetzt können wir anfangen, unseren Parallax-Effekt hinzuzufügen. Was Sie verwenden müssen, ist eine Interaktion. Also wähle ich das Bild aus, ich gehe zu Interaktionen hier rechts. Wählen Sie das Pluszeichen auf dem Element-Trigger aus, wählen Sie dann beim Scrollen in der Ansicht aus, wählen Sie Aktion auswählen und eine neue Bildlaufanimation erstellen. Jetzt ist dies ein wirklich leistungsfähiger Editor, in dem Sie alle Arten von coolen Animationen erstellen und auch mehrere Bewegungen kombinieren können . In diesem Fall beginne ich mit einer einfachen Bewegung-Transformation. Wählen Sie also Verschieben aus. Und wenn Sie Unterstrichenwahlen sehen, wird, wenn Sie etwas auswählen einen Start- und einen Endpunkt erzeugen. Damit das funktioniert, müssen Sie etwas definieren. Für den Startpunkt. Ich werde tatsächlich zuerst den Endpunkt definieren , weil ich ihn hier haben möchte. Also gebe ich einfach 00 Pixel in die X- und Y-Werte ein. Dann gehe ich zurück zum Startpunkt und verschiebe ihn nach links. Also möchte ich, dass es von der linken Seite kommt. Und für den Y-Wert gebe ich einfach 0 Pixel ein. Das kleine Ausrufezeichen verschwindet. Das bedeutet, dass die Animation jetzt funktionieren kann und wir sie sogar testen können, indem wir diese Live-Vorschau-Funktion aktivieren. Wenn ich also nach oben und unten scrolle, können wir sehen, dass die Kamera von links in die Seite kommt , was großartig ist. Aber um es richtig sehen zu können, füge ich der Seite einen weiteren Abschnitt hinzu. Lassen Sie uns also einfach als Abschnitt hier unten im Navigator fallen , es ist einfacher. Ich gehe auf die Optionen ein und tippe 800 ein, damit wir mehr Platz haben, um nach unten zu scrollen , das Bild erneut auszuwählen und dann gehe ich zurück zu Interaktionen. Übrigens ist es gut, Ihre Interaktionen wie diese umzubenennen , indem Sie in der Ansicht scrollen, ich werde es auswählen und den Namen der Bildlaufanimationen ändern , weil dies etwas ist die wir wiederverwenden können, wenn wir es wollen. Also benenne ich es einfach um und nenne es Fade in von links. Ich möchte die Anweisungen in Hauptstädten ableiten , die ihn normalerweise von links ernähren. Das ist nett. Aber wenn ich Änderungen daran vornehmen möchte, können wir einfach auf das Zahnradsymbol klicken. Und ich füge eine zusätzliche Bildlaufaktion , weil ich möchte, dass sie auch einblendet. Ich möchte also, dass die Deckkraft oder so animiert wird. Und ich möchte einen zusätzlichen Deckkraft-Keyframe hinzufügen. Wir können diese auch nennen. Es liegt also unsere Deckkraft bei 100%. Ich werde es einfach auswählen und wir können sehen, dass die Deckkraft 100% ist, aber es sollte mit 0 Prozent beginnen. Wenn wir also die Live-Vorschau einschalten, sollte dies bereits funktionieren. Ich bin mir nicht sicher, warum sich das nicht registriert hat. Lass es uns einfach nochmal einrichten. 0, das war's. Schalten Sie jetzt die Vorschau ein. Wenn wir dann nach oben und unten scrollen, können wir sehen, wie das aussieht. Nun möchte ich eigentlich, die Deckkraft bereits anfängt, sagen wir 20 Prozent. Wenn ich also nach oben gehe und nach unten scrolle, kannst du sehen, wie sich das verändert hat. Und ich möchte auch die Deckkraft und auch die Bewegung an ihrem endgültigen Ziel oder Endpunkt ankommen an ihrem endgültigen Ziel oder Endpunkt bevor sie unser Ansichtsfenster oder Bildschirm verlässt. Also werde ich es ein bisschen weiter einrichten. Der Endpunkt wird also bei 6070 Prozent liegen. Wenn Sie sich das ansehen, werden Sie sehen, dass es jetzt etwas schneller das Zentrum erreicht. Ich würde sagen, noch früher ist es besser. Es wären 50, 60%. Die Bewegung sollte tatsächlich vor der Deckkraft oder dem Verblassen oder sehr nahe beieinander liegen. Also lasst es uns jetzt testen. Ja, das fühlt sich gut an. Es kommt also an sein endgültiges Ziel wenn es in der Mitte des Bildschirms ist, was meiner Meinung nach sehr gut funktioniert. Und natürlich können Sie alle möglichen Dinge wie Rotation hinzufügen . Auch hier werden wir einfach Wahlen scrollen, drehen und dann können wir es so einrichten, dass die Z-Rotation an dieser Stelle 0 ist. Das ist also wieder der Endpunkt. Dann fügen wir den Startpunkt für Drehen hinzu. Wir fügen das einfach hier hinzu und ziehen es dann nach oben und ändern dann die Z-Rotation vielleicht etwas nach links. Jetzt noch einmal, wenn es das raus hat, scrollen wir nach unten. Wir werden sehen, dass dort auch eine subtile Rotation hinzugefügt wird, was wirklich schön ist. 20. Adobe XD + Webflow-Workflow – Out-of-Bounds-Effekt mit Parallax-Scrollen: Nun zum nächsten Objekt, Lasst uns den Parallax-Effekt noch weiter gehen. Ich werde mit diesem Bild, das wir bereits in XD gesehen haben , einen coolen Out-of-Bounds-Effekt erzeugen mit diesem Bild, das wir bereits in XD gesehen haben , einen coolen Out-of-Bounds-Effekt . Was ich hier in Photoshop gemacht habe, ist, dass ich bereits den Hintergrund und den Vogel in zwei separaten Bildern vorbereitet habe bereits den Hintergrund und den . Ursprünglich ist das ein Foto. Aber was ich getan habe , ist den Adler zu entfernen. Und ich habe einfach den Hintergrund dafür. Ich verwende inhaltsbewusste Fülle. Und auf einer separaten Ebene trennte ich den Vogel durch einfaches Maskieren vom Hintergrund. Ich benutze das Stiftwerkzeug, den Weg um den Adler gezogen. Es hat einige Zeit gedauert, aber jetzt habe ich es komplett isoliert. Was ich also tun werde, ist, diese beiden Bilder separat zu speichern. Ich werde den Hintergrund als JPEG und die Vogelebene als PNG speichern die Vogelebene als PNG da ich die Transparenz brauche, damit dies funktioniert. Jetzt können Sie dies in Photoshop ganz einfach tun , indem Sie beide Ebenen auswählen. Und Sie können mit der rechten Maustaste klicken und Exportieren als wählen. Sobald Sie dort sind, können Sie den Layer auswählen, den Sie als JPEG-Setup speichern möchten Die Qualität ist wahrscheinlich auf 60% normalerweise eine gute Idee und stellen Sie außerdem sicher, dass Sie die Größe reduzieren . In diesem Fall kann die Skala viel niedriger sein. Wahrscheinlich kann die Breite etwa 600 betragen. Für diese Website denke ich, dass das genug ist. Und man sieht schon, dass es 60 Kilobyte sind. Daher ist die Fi-Größe immer wichtig, um so viel wie möglich zu reduzieren. Aber dann können wir die Vogelebene auswählen und dann auf PNG setzen, damit wir dort Transparenz haben. Aber wieder einmal sollte die Breite niedriger sein. Auch hier sollten 600 Pixel in diesem Fall in Ordnung sein. Jetzt ist das etwas größer, aber wir können immer versuchen, die kleinere Dateigröße mit acht Bit zu verwenden . Dann wird es viel kleiner und ich denke, es sieht immer noch gut aus. Also habe ich das schon gerettet. Also lass mich dir zeigen, wie ich es in Webflow zusammenstelle. Hier haben wir also bereits einen Abschnitt unten vorbereitet, und ich werde hier einfach eine Kolumne ablegen. Also wähle ich den Abschnitt aus, verwende die Verknüpfung Command oder Control E und gebe dann Spalten ein. Dann benutze ich die gleichen Einstellungen, wahrscheinlich fünf auf der linken Seite, sieben auf der rechten Seite. Wir können bereits ein paar Margen hinzufügen , nur damit wir es von oben trennen. Und dann füge ich auf der linken Seite tatsächlich einen Div-Block hinzu. Also fangen wir wieder an, es einzutippen und fügen es ein. Ich verwende die gleiche Verknüpfung erneut für die schnelle Bearbeitung. Also haben wir den Block hier drin. Der Grund, warum ich einen Diblock verwende , weil wir zuerst einen Hintergrund erstellen und dann das Bild darüber platzieren müssen . Also wird das Buch selbst den Hintergrund verwenden , indem es von hier aus hinzufügt, Hintergründe klicken auf das Pluszeichen und wählen dann Bild aus. Und wir müssen diese Bilder, die ich gespeichert habe, per Drag & Drop ziehen. Also das PNG und der Hintergrund, also der Vogel zurück. Also lasst uns sie einfach ziehen und fallen lassen. Und ich wähle für diesen Block aus. Ich wähle den Vogel aus, der bereits ausgewählt ist. Es ist großartig. Wir können es einfach als Deckung einstellen. Stellen Sie die Position auf Mitte ein. Und dann können wir zur tatsächlichen Größe gehen. Ich stelle die Höhe auf vielleicht 600 ein. Mal sehen, wie das aussieht. Okay, das ist also ein bisschen zu groß. Machen wir es 300. Und dann die Breite auch 300. Okay, das funktioniert ganz gut. Ich kann dies jetzt an der Mitte des Rahmens ausrichten und dann vielleicht ein bisschen mehr Rand hier auf der linken Seite hinzufügen . Ich mache einfach so etwas. Okay, das funktioniert gut. Jetzt können wir ein Bild in diesen Div-Blöcken hinzufügen. Obwohl wir bereits ein Bild darin haben , das nur der Hintergrund des Blocks ist, können wir dennoch ein Bild darin platzieren. Das ist also wirklich der Trick. Was ich also tun werde, ist die Verknüpfung Command E zu verwenden und dann mit der Eingabe von Image zu beginnen. Und beachte, dass dies bereits hier im Navigator innerhalb des Diblocks angezeigt wird. Jetzt können wir unser Bild wählen, und das ist der Vogel PNG. Das ist also schon da. Und wir können den Rand wieder einfach anpassen, nach unten ziehen. Wieder einmal fühlt es sich an, als würde man in Photoshop arbeiten Dinge so leicht bewegen. Ich liebe das an Webflow. Also werde ich es einfach irgendwo dort einrichten. Ich denke, das ist gut. Und jetzt, da wir es an Ort und Stelle haben, können wir zu Interaktionen gehen. Klicken Sie auf das Pluszeichen des Elements, lösen Sie es aus und wählen Sie die gleiche Option wie auf der Kamera aus, während Sie in der Ansicht scrollen. Wählen Sie dann die Option Scroll-Animation abspielen Und dieses Mal werden wir eine neue Scroll-Animation erstellen. Wir könnten dasselbe gebrauchen wie vor der Kamera. Stattdessen werde ich ein neues erstellen , weil dies etwas anders sein wird. Wir fangen mit der Bewegung an. Also füge ich die Bewegung und den Startpunkt hinzu. Ich möchte, dass es dort ist, wo es ist. Also tippe ich einfach 00 für x und y ein. Und dann werde ich den Endpunkt weiter nach rechts verschieben , so etwas. Das reicht außerhalb der Grenzen. Ich denke, ich möchte nicht, dass es den Text durchgeht , der auf der rechten Seite sein wird. Das ist also schon gut. Aber wir können das einfach ein bisschen höher bewegen , so etwas. Und vergessen Sie nicht, 0 für y hinzuzufügen. Der y-Wert ändert sich nicht, aber Sie müssen dort immer noch die Nummer hinzufügen , damit die Animation funktioniert. Jetzt ist das alles eingerichtet. Wir können die Vorschau einschalten und erneut nach oben und unten scrollen. Wir können sehen, wie es funktioniert. Okay, das ist großartig. Und wir können auch ein bisschen Rotation hinzufügen. Wählen wir „Drehen“. Ich stelle das hier hin, damit es so ankommen kann, wie es ist. Also werde ich nur die Z-Rotation um 0 Grad hinzufügen, und dann füge ich hier am Anfang eine weitere Rotation hinzu, bei der ich die Rotation tatsächlich auf ja, irgendwo, vielleicht dort einstellen werde . Okay. Und dann kann der andere etwas höher gedreht werden? Ja, so etwas. Schauen wir uns die Vorschau noch einmal an. Wenn ich nach oben und unten scrolle, können wir die nette Bewegung dort sehen. Der Adler geht also außerhalb des Rahmens und dreht sich auch leicht. Jetzt kratzt dies natürlich wieder nur noch einmal an der Oberfläche der möglichen Interaktionen in Webflow. Wenn Sie also kreativ sind, können Sie dies nutzen und wirklich einige erstaunliche Effekte auf Ihr Webdesign erzielen. Und natürlich reagiert die Seite schon ohne dass ich etwas mache, bereits. Natürlich können Sie die reaktionsschnellen Einstellungen verfeinern, wenn Sie in die Tablet-Größe und dann in die Landschaft gehen die Tablet-Größe und dann und mobile Größen darstellen. Und da Webflow das gesamte CSS im Hintergrund verarbeitet , wirkt sich dies nicht auf die anderen Haltepunkte aus, wenn Sie Änderungen an einem Haltepunkt vornehmen . ich also möchte, Wenn ich also möchte, dass es diese Elemente bewegt, kann ich den Rand anpassen, ihn ein wenig nach oben bewegen, und dann unser Logo, wir können es weiter zum center, in diesem Fall so etwas. Und wenn ich jetzt zur Desktop-Größe oder zum Tablet zurückkehre , sehen Sie überhaupt nicht betroffen, aber in der mobilen Größe können wir sehen, wie schön es positioniert ist. 21. Designsysteme: Ein Designsystem ist eine Bibliothek von Benutzeroberflächenelementen und anderen Komponenten, die eine gemeinsame Sprache haben. Die Verwendung eines Designsystems kann sicherstellen, dass Sie im Falle eines größeren und komplexeren Verbs oder digitalen Projekts die Harmonie aufrechterhalten können Falle eines größeren und komplexeren Verbs . Jetzt ist es nicht mit einem UI-Kit oder einem Styleguide zu verwechseln , da diese normalerweise auch Teil des Designsystems sind , das normalerweise auch die folgenden Hauptkategorien enthalten würde . Die Bausteine, die Pattern-Bibliothek und die Regeln, die alle Elemente zum Funktionieren bringen können. Um nur ein paar Beispiele für Designsysteme zu sehen. Hier sind Apples Richtlinien für die menschliche Schnittstelle. Wir können mit jeder dieser Plattformen beginnen, aber vielleicht konzentrieren wir uns auf iOS. In Reichweite können wir alle relevanten Informationen finden , die sicherstellen, dass die meisten Apps im App Store auf ähnliche Weise fühlen und verhalten. Es hat also Kategorien wie App, Architektur, Benutzerinteraktion in Reichweite. Wenn wir zum Beispiel nur zum Drag & Drop springen, können wir sehen, dass dies erklärt wird, wie es verwendet werden muss und wie das erwartete Ergebnis dieser Benutzeraktionen ist. Das Microsoft-Designsystem wird als fließend bezeichnet, das auch plattformübergreifend ist. Und wieder finden wir alle relevanten Informationen auf dieser Website. Googles Designsystem heißt Material Design ist drei, das ist die aktuelle oder neueste Version, und es hebt einige neue Funktionen in dieser Iteration hervor. Es hat also Komponenten, Bibliotheken und Richtlinien aktualisiert, einschließlich Design für faltbare Geräte, die Implementierung dynamischer Farben und Dinge, die in Android 12. neu sind. Aber es gibt hier auch einen interessanten Begriff, Design-Token, was in Designsystemen eine sehr verbreitete Dimension ist. Dies sind im Wesentlichen die Bausteine eines Konstruktionssystems. Sie fügen die kleinsten Arten von Stilwerten hinzu und können alles definieren, von Farbe, Typografie, Abstand und sogar Animation. Wahrscheinlich ist einer der größten Vorteile von Design-Token , dass sie auch die Änderungen im Designsystem aufzeichnen können die Änderungen im Designsystem aufzeichnen , während es sich weiter weiterentwickelt. Und atomares Design ist ein weiterer Begriff, der sehr häufig verwendet wird, wenn wir uns auf Designsysteme beziehen. Und im Wesentlichen bedeutet es , dass Sie die kleinsten Komponenten in Betracht ziehen würden , die Atome. Und dies sind die einfachsten Bausteine wie ein Label - und Eingabefeld-Lehrbücher oder eine Schaltfläche. Warum? Wenn du anfängst, diese Atome zu kombinieren, würdest du Moleküle erzeugen, die komplexere Komponenten sein könnten. Mehrere Moleküle zusammen würden einen Organismus bilden, der ein ganzer Abschnitt innerhalb eines Bildschirms oder einer Schnittstelle sein könnte . Um dies in Adobe XD zu demonstrieren, habe ich ein Spektrum, das das Designsystem von Adobe ist. Und das ist eigentlich ein kostenloses Plugin , das Sie für XD installieren können, aber in dem wir feststellen können, dass diese Komponenten eine Schaltfläche mögen, die wir hinzufügen können, die bereits alle Attribute eingerichtet haben. Und wir können natürlich Änderungen daran vornehmen. Wir können zum Beispiel die verschiedenen Zustände dafür finden und sofort aktualisiert werden hier im Design. Natürlich können wir das Label selbst aktualisieren. Und wir können das Farbthema auch von hell zu dunkel ändern das Farbthema auch von hell zu dunkel oder sogar in den Drahtgittermodus wechseln. Wenn wir nun zur Komponentenliste zurückkehren, finden wir all diese anderen Elemente wie das Kombinationsfeld, das hier wieder viele Optionen hätte , die wir ändern können. Nun, wie ich bereits erwähnt habe, wäre dieses UI-Kit Teil eines Designsystems. Und in diesem Fall ist dies das Kartenoberflächen-Kit für Spektrum. Und ich kann näher zoomen, damit wir den Stil und das Raster dieser Karten sehen können , bei denen wir die verschiedenen Ausrichtungen und Variationen auf Karten haben . Und es enthält auch alle verschiedenen Arten von Karten, je nachdem, wo sie in der Schnittstelle erscheinen würden . Und nur damit Sie verstehen, wie diese Karten verwendet werden, wenn ich zur Creative Cloud App wechsle, können wir sofort sehen, wie diese Karten hier in der Benutzeroberfläche angezeigt werden. Dies ist also alles in dem Spektrum-Designsystem definiert , das wir gerade gesehen haben. Auch hier ist das Wichtigste an Designsystemen die Konsistenz, um sicherzustellen, dass überall alle Elemente vertraut und einander ähnlich aussehen . Ein gutes Designsystem ermöglicht natürlich auch eine gewisse Flexibilität, was bedeutet, dass es Raum für Verbesserungen lässt und dem System selbst ermöglicht, sich weiterzuentwickeln und besser zu werden. Und wie wir an den Beispielen gesehen haben, die wir durchgemacht haben, ein weiterer sehr wichtiger Aspekt eines Designsystems ist ein weiterer sehr wichtiger Aspekt eines Designsystems, dass es sehr gut dokumentiert sein muss. Und das bedeutet, dass es nicht nur detailliert, sondern auch regelmäßig aktualisiert werden muss. Falls Sie jetzt mehr über Designsysteme erfahren möchten , schauen Sie sich diese paar Beispiele an, die ich hier im Board habe. Und als letzte Anmerkung wollte ich auch erwähnen, dass es heutzutage auch Illustrationssysteme gibt , die einem Designsystem sehr ähnlich sind , aber diese konzentrieren sich auf tatsächliche illustrative Elemente, ob sie statisch oder animiert sind. Und ein gutes Beispiel dafür ist das Illustrationssystem von Google Chrome Operating Systems, das einen sehr spezifischen visuellen Stil aufweist , der wiederum sicherstellt, dass sich alle Elemente anfühlen verwandt und Teil derselben Familie. Jetzt, da wir hier in unserem nächsten Video bereits ein paar erstaunliche Icons sehen können , werden wir uns ausführlicher mit dem Ikonendesign befassen. 22. Symboldesing: Icon-Design ist ein spezialisiertes Feld im Web- und Digitaldesign. Und in diesem Video werden wir ein wenig über die Hauptprinzipien sprechen , die in diesem Bereich verwendet werden, und auch über einige verschiedene Stile oder Trends, die Ikonendesigns in den letzten Jahrzehnten beeinflusst haben. Und wir werden auch eine Symbolvorlage in Illustrator sehen , die die zugrunde liegende Struktur anzeigt , die verwendet wird, wenn jemand ein Symbol entwirft. Beginnen wir zuerst mit den sieben Schlüsselprinzipien des Icon-Designs. Klarheit, was einfach bedeutet, dass das Symbol sehr klar sein muss und sofort gelesen werden muss, um sicherzustellen, dass die Leute genau wissen , wofür das Symbol steht. Lesbarkeit ist etwas, das gilt, auch wenn Sie keine Texte oder Topografie in Ihrem Icon haben. Es kann sich beispielsweise auch auf den Abstand zwischen Elementen beziehen oder sicherstellen, zwischen Elementen beziehen oder sicherstellen dass die Linien im Symbol nicht zu dick nicht zu dünn sind, sodass sie genau die richtige Menge für eine bestimmte Größe sind. Icon. Ausrichtung ist auch wichtig, um sicherzustellen, dass sich das Symbol, insbesondere wenn es Teil eines Sets ist, ausgeglichen anfühlt. Und wie ich im Falle eines Icon-Sets erwähnt habe, ist natürlich auch Konsistenz sehr wichtig. also sicher, dass die Icons in diesem Set alle in Harmonie sind. Persönlichkeit in Icons bedeutet, dass sie einzigartig sind und leicht erkannt werden können. Icons können zum Beispiel abstrakt, skurril oder verspielt sein. Je nachdem, wie hoch ist der Ton der Anwendung oder der Schnittstelle , für die sie entwickelt wurden? Kürze bezieht sich im Wesentlichen auf die Einfachheit einer Ikone. Um sicherzustellen , dass Sie nur die notwendige Menge an Details und nicht mehr als das verwenden . Denken Sie an die aussagende Dichte im Logo-Design. Und nicht zuletzt kann die Benutzerfreundlichkeit erreicht werden, indem sichergestellt wird, dass eine Icon-Familie oder ein Icon-Set organisiert, gut dokumentiert und auch im Kontext in Bezug auf die Klarheit der Symbole getestet wird. Vergleich, von klaren und sofort erkennbaren Symbolen zu denen, die nicht unbedingt unkompliziert oder verschwommener sind . Und das sind übrigens alles Icons, die auf Autos verwendet werden, Armaturenbretter in Bezug auf die Kürze, wir können hier auch einen interessanten kleinen Vergleich sehen. Auf der linken Seite können wir also die einfachste Darstellung eines Hauses haben , eine einzige Zeile. Und indem wir weitere Details einführen, können wir das Design etwas klarer oder erkennbarer gestalten. Und das ist wahrscheinlich die ideale Menge an Details. Wenn wir zu viele Details hinzufügen, wird es jedoch zu komplex, als wird es jedoch zu dass ein Symbol effektiv funktionieren kann. Da es sich um Kürze handelt, ist hier ein lustiger Rückblick auf die Macintosh-Ikonen aus dem Jahr 1984. Und in diesem Fall gab es viele Einschränkungen, die Icon-Designer zurückhielten , um feine Details einzuführen. Zuallererst sind dies alles einfarbige Designs, und sie haben auch eine sehr begrenzte Anzahl an Pixeln, mit denen sie arbeiten können. Aber manchmal können Einschränkungen, wie in diesem Fall, die Designs wirklich verbessern. Und ich denke, diese Icons funktionieren immer noch sehr gut und sie können immer noch erkannt werden. Und es ist auch einfach eine lustige Sache, dass wir zum Speichern von Dingen immer noch das Symbol einer Diskette verwenden, obwohl diese längst vorbei sind und ich glaube nicht, dass jemand sie mehr benutzt. Jetzt haben wir auch die Ausrichtung erwähnt und wie wichtig es ist, Icons im Feld Balance zu machen. Und hier ist ein großartiges Beispiel dafür , dass die optische Ausrichtung in den meisten Fällen wichtiger ist als die geometrische Ausrichtung. Oben sehen wir, dass die linke und die rechte Seite den gleichen Abstand gehalten den gleichen Abstand in diesem Fall ein merkwürdiges Endergebnis ergeben. Und das liegt hauptsächlich an der Verteilung der Werte innerhalb dieses Dreiecks hier in der Mitte im Vergleich zum Beispiel, wenn wir einen Stopp-Button haben , der einen Quadrat hätte, das würde das Icon viel symmetrischer anfühlen lassen. Im Falle eines Play-Buttons benötigen Sie tatsächlich mehr Platz auf der linken Seite als auf der rechten Seite. Und das bezeichneten wir als optische Ausrichtung. 23. Symboldesigntechnicken und Begriffe: Jetzt gibt es zwei Begriffe, die Sie nicht vermeiden können , wenn es um Icon-Designs geht. Und hier ist ein großartiger Vergleich, der zeigt wie Apple vom ursprünglichen Skeuomorphismus zu dem flachen Design übergegangen ist, das wir auf der rechten Seite sehen können. Dies ist wahrscheinlich der drastischste oder extremste Übergang, 2013 in iOS sieben passiert ist. Und obwohl sich das Symbol seitdem geändert hat, haben sie sich nicht so stark geändert wie zwischen diesen beiden Versionen. Jetzt verwendete die ursprüngliche Ikonenfamilie, wie gesagt, Skeuomorphismus , den wir nennen, wenn ein Design versucht wirkliche Objekt nachzuahmen. Ein großartiges Beispiel dafür ist der neue Standard , der buchstäblich eine illustrierte Version eines neuen Standards oder des Notiz-App-Symbols ist , wo wir diesen kleinen zerrissenen Papiereffekt tatsächlich sehen können diesen kleinen zerrissenen Papiereffekt tatsächlich dieses realistisch aussehende Rendern eines Notizblocks. Der Schlüssel des Skeuomorphismus ist, dass er versucht, fotorealistisch zu sein und Texturen und viele Details durch flaches Design verwendet , andererseits ist der minimalistische Ansatz , der konzentriert sich auf Einfachheit, Lesbarkeit und Benutzerfreundlichkeit eines Icon-Sets. Diese Art von Ansatz beruht mehr auf negativem Raum, zweidimensionalen Illustrationen, festen Farbblöcken und einfachen Formen und Formen. Hier ist auch ein weiteres schönes Beispiel dafür, wie Google von seinem ursprünglichen Symbol für Gmail, der Kalender-App, Google Drive, Google Docs und Google Meet oder Hangouts durch diese vereinfachten versionen von ihnen. Und die Hauptsache, die wir hier wieder sehen können , ist , dass diese Icons völlig flach sind. Sie verwenden nicht einmal mehr Farbverläufe oder Schatten. Und im Allgemeinen sind sie im Vergleich zum Originalset einfach viel gleichbleibender zueinander. Wenn ich wählerisch sein möchte, ist das wahrscheinlich nur eines dieser Icons, das immer noch auffällt. Das ist das Google Drive-Symbol, das im Vergleich zu den anderen Symbolen im Set eine andere Dicke dieser Linien hat . Ähnlich dem Skeuomorphismus gibt es auch einen neuen Trend, der als neuerer Morphismus bezeichnet wird , der irgendwo zwischen flachem Design und Skeumorphismus liegt . Es wird manchmal auch als Soft UI bezeichnet, hauptsächlich wegen seiner weichen Ästhetik. Das kommt vom monochromatischen Farbgeschmack, den weichen Schatten und den Details mit geringem Kontrast. Hier ist ein weiteres ziemlich extremes Beispiel bei dem eine Ein-Aus-Taste, die wahrscheinlich das wichtigste Funktionselement in dieser App ist, fast unsichtbar, kaum wahrnehmbar ist, aber ausbalanciert Dinge aus und um sicherzustellen, dass es immer noch nutzbar ist, nimmt es viel größeren Platz auf dem Bildschirm ein. Es ist also wirklich ein dominantes Element und wo es eingeschaltet ist, zeichnet es sich tatsächlich viel mehr durch den Farbkontrast aus. Für den Fall, dass Sie sich fragen, wie dieser subtile Schatteneffekt in neuen morphischen Designs erreicht wird . Dies ist ein großartiger Vergleich, der das Geheimnis zeigt oder offenbart. Im Falle eines generischen Designstils hätten Sie beispielsweise ähnliche Schatten um die Karte herum. Und wenn wir uns dieses Objekt von der Seite vorstellen, fühlt es sich an, als würde es über der Oberfläche schweben. Während eine neue morphische Karte mit dem Gefühl hat, dass sie Teil der Oberfläche ist Teil der Oberfläche und sich nur leicht von ihr abhebt, aber sie schwebt nicht. Es ist also eher ein Extrusionseffekt im Vergleich zu dem Floating-Effekt , den wir auf der rechten Seite gesehen haben. also ein weiteres schönes Beispiel für neuen Morphismus ansehen, Wenn Sie sich also ein weiteres schönes Beispiel für neuen Morphismus ansehen, der in einem App-Prototyp verwendet wird, können Sie sehen, wie diese subtilen Schatten und diese weiche Extrusion bei all diesen Elementen funktionieren. Es ist eine sehr interessante Seite, die sich offensichtlich nicht nur auf Icons, sondern auch auf vollständige Schnittstellen bezieht , sondern definitiv nicht die brauchbarste ist. Denn denken Sie daran, dass der Kontrast im UI-Design im Allgemeinen sehr wichtig ist . Wenn es um das Entwerfen von Symbolen geht, kann es helfen, ein Symbolraster zu haben , das sicherstellt, dass alle Symbole und die Familie konsistent und einander ähnlich sind. Und im Falle des App Store ist dies das Symbolraster, das im iOS verwendet wird, oder hier ist die Illustrator-Vorlage für das Play Store-Symbol. Wieder einmal haben wir das Raster auf der linken Seite. Und ein paar Beispiele hier rechts, wie die Icons aussehen werden In den verschiedenen Formaten. Und um zu sehen, wie sich diese Raster auf die tatsächlichen endgültigen Symbole beziehen. Hier sind ein paar Beispiele aus Apples kreisförmigen Icons. So können wir Safari, die Uhr, den Kompass und die Einstellungs-Apps sehen den Kompass und die Einstellungs-Apps und wie der Durchmesser all dieser kreisförmigen Elemente vom ursprünglichen großen Kreis innerhalb des Rasters abhängt. Und im Falle mehrerer kreisförmiger Standardfunktionen innerhalb von Symbolen würden sie sich auch auf diese anderen kleineren Symbole beziehen diese anderen kleineren Symbole , die ebenfalls innerhalb des Rasters festgelegt sind. solche Symbolraster verwenden können Sie wirklich sicherstellen, dass Sie die Ausrichtung und Konsistenz eines Symbols vertraut machen, oder? Letzt wollte ich nur ein Beispiel für ein animiertes Symbol zeigen, bei dem der Download-Button in einen Fortschrittsbalken verwandelt , der sich dann in ein Abschlusssymbol verwandelt. Es ist also fast wie drei Icons in einem, abhängig vom tatsächlichen Status dieses Prozesses. Im Allgemeinen ist Adobe Illustrator für das Icon-Design das bevorzugte Tool. Um jedoch so etwas wie dieses animierte Symbol zu erstellen, müssten Sie auch ein Tool wie After Effects verwenden. Und wir werden dies tatsächlich ausführlicher besprechen, sobald wir in diesem Kurs zum Motiondesign-Thema angekommen sind. Aber jetzt, da wir im nächsten Video Symbole behandelt haben, können wir über Banner sprechen. 24. Banneranzeigen: Webbanner ähneln Plakaten und Werbetafeln. Sie sind die wichtigsten Online-Werbetools. Der Domain-Zweck, die Aufmerksamkeit eines Benutzers zu erregen und ihn dazu zu mit dem Banner zu interagieren bringen, mit dem Banner zu interagieren, um auf die Website, die Zielseite oder die App des Werbetreibenden im App Store im Allgemeinen zu gelangen, der Zweck von Banner sollen Traffic für den Werbetreibenden generieren. Und im wirklichen Leben ist es schwierig, die Effizienz eines Posters oder einer Plakatwand mit Webbannern zu messen die Effizienz eines Posters oder einer Plakatwand . Es ist eigentlich etwas, das perfekt gemessen und verfolgt werden kann . Und eines der wichtigsten Ergebnisse, das gemessen wird, heißt CTR oder Klickrate, die berechnet, wie häufig Personen auf eine Anzeige klicken würden. Es ist wichtig, dass CTR eine viel bessere Möglichkeit ist , den Erfolg oder die Effizienz einer Anzeige zu messen oder die Effizienz einer Anzeige , als nur die Anzahl der Klicks zu zählen, da sie immer relativ dazu ist, wie viele Leute haben die Werbung gesehen. Es ist also tatsächlich der Prozentsatz der Beziehung zwischen der Anzahl der Klicks und der Anzahl der Impressionen, der zählt. Und der Grund, warum es wichtig ist zu verstehen, dass die Leistung von Webinaren immer gemessen wird, liegt darin, dass der Designer hauptsächlich dafür verantwortlich ist, wie erfolgreich kann das Banner sein. Nun ist die gute Nachricht, dass alle Designprinzipien , die wir im Printdesign und in anderen Themen dieses Kurses behandelt Printdesign und in anderen Themen haben, auch für Webbanner gelten werden. Und um ein paar Dinge zu erwähnen, Farbharmonie, Kontrast, Nutzung des negativen Raums , die Betonung bestimmter Elemente sind Farbharmonie, Kontrast, Nutzung des negativen Raums, die Betonung bestimmter Elemente und kühne Typografie nur einige der Dinge , die Ihnen helfen werden Banner zeichnen sich aus und schneiden gut ab. Wenn wir jetzt über digitale Anzeigentypen sprechen, sind Bannerwerbung eigentlich nur eine Gruppe ohne Geld. Wie Sie sehen können, gibt es viele andere Optionen wie Video, Werbung, Popup-Anzeigen, kostenpflichtige soziale Apps, native Apps, die in Websites, Inhalte oder Anzeigen integriert sind , die erscheinen innerhalb der mobilen App. Zum Beispiel. Obwohl diese anderen Arten von Anzeigen einen etwas anderen Ansatz erfordern würden, richten Sie sie im Vergleich zum Erstellen von Bannern ein. Der Grund, warum wir uns in diesem Video auf Banner konzentrieren , liegt darin, dass dies immer noch die am häufigsten verwendeten Arten von Werbung im digitalen Raum sind immer noch die am häufigsten verwendeten Arten . In Bezug auf die Größe der Banner, Es gibt viele verschiedene Standards und Namen, die ihnen zugeordnet sind. Und Sie können einige davon hier aufgelistet sehen. Interessanterweise können Sie aber auch sehen , oft diese verwendet werden. Das gebräuchlichste von all diesen ist also dieses mittlere Bannerformat, das 40% aller Banner im Internet ausmacht. Dann ist das zweithäufigste dieses schmale horizontale Banner, normalerweise als Bestenliste bezeichnet wird . Ebenso häufig wird der Vide-Wolkenkratzer verwendet. Je mehr Werkzeugformat. Und dann werden die restlichen Größen im Vergleich zu diesen ersten drei viel weniger verwendet . Neben den Pixelabmessungen von Bannern und anderen sehr wichtigen Aspekten ist es, die Dateigröße von ihnen richtig zu bekommen? Und im Allgemeinen gilt: Je niedriger es ist, desto besser. Die meisten Werbetreibenden hätten jedoch eine sehr spezifische maximale Dateigröße , die der Designer sicherstellen muss, dass Sie sich treffen. Andernfalls verzichten Sie auf Design, wird abgelehnt. Wir können also sehen, dass bei kleinsten Bannergrößen die tatsächliche Dateigröße begrenzt ist, normalerweise auf 50 Kilobyte. Und das gilt für JPEG, PNGs und Geschenke bei statischen Bannern und bei animierten Bannern. Es gibt ein paar zusätzliche Möglichkeiten zu messen, Es gibt ein paar zusätzliche Möglichkeiten zu messen wie sie sich auf die Ladezeit der Seite auswirken werden. Iab bezieht sich tatsächlich auf das Interactive Advertising Bureau, das beispielsweise die universellen Richtlinien für Bannerwerbung erstellt hat. Eine davon ist, dass das Audio in Webbannern standardmäßig stumm geschaltet sein sollte und nur dann abgespielt werden darf , wenn der Benutzer sich entscheidet, es abzuspielen. Eine weitere wichtige Richtlinie ist , dass eine Anzeige immer sehr klar vom Rest der Umgebung, in den meisten Fällen von einer Website oder einer App, zu unterscheiden sein sollte klar vom Rest der Umgebung, in den meisten Fällen von einer Website oder einer App, zu unterscheiden . Aber es gibt auch andere Regeln, die für solche Bednar-Designs gelten , da sie den Bildschirm einer App niemals vollständig abdecken sollten . Im Vergleich zu den statischen Bannern können animierte Banner effektiver die Aufmerksamkeit der Menschen auf sich ziehen. Und sie können auch komplexere Geschichten erzählen, was auch wichtig sein kann, wenn Sie nicht alle relevanten Informationen in ein einziges statisches Banner einfügen können. Die wichtigsten Dateitypen , mit denen diese animierten Banner erstellt werden können , sind Geschenke, HTML und MP4-Videodateiformat. 25. Social Media-Design: Für die meisten Menschen wurden die sozialen Medien zu einer der am häufigsten verwendeten Inspirations-, Nachrichten - und Unterhaltungsquellen . Alle diese Plattformen sind so aufgebaut, dass Menschen süchtig werden und immer mehr Zeit damit verbringen möchten, sie zu nutzen. Und deshalb wurden sie auch so effektiv wie digitale Marketinginstrumente. Es genügt, sich diese Statistiken nur anzusehen und die tatsächlich vorhandenen Daten und den Rest, der Vorhersage ist, zu sehen. Dies zeigt also, dass die Ausgaben für Social-Media-Werbung weltweit in Milliarden US-Dollar belegt werden. Und wir können auch das Verhältnis sehen, das auf dem Desktop im Vergleich zu Mobilgeräten ausgegeben wird. Die dunkleren blauen Farben sind die auf mobilen Geräten. Wir können sehen, dass die Gesamtausgabe 2021 bereits fast 154 Milliarden US-Dollar betrug. Und nach dieser Vorhersage wird sich dieser Trend fortsetzen, wir in den letzten Jahren erlebt haben. Nun würde die Aufgabe eines Social-Media-Designers , der auf diesen Bereich spezialisiert ist , der auf diesen Bereich spezialisiert ziemlich viele verschiedene Dinge beinhalten. Zunächst geht es darum , Designs für die individuellen Bedürfnisse jeder Social-Media-Plattform zu erstellen . Dies kann tatsächlich eine ziemlich knifflige Sache sein, nicht nur weil es nur so viele verschiedene Plattformen gibt , sondern sie sich auch sehr häufig ändern und mit allen Anforderungen auf dem neuesten Stand sind und am besten praktiziert, müssen Sie ständig neue Dinge lernen und neue Workflows einführen. Ähnlich wie bei den anderen Videos in diesem Kurs werde ich mich nur auf ein paar wichtige Begriffe in diesem ersten Video konzentrieren . Und wir werden eigentlich hauptsächlich Instagram als Beispiel verwenden. Die meisten dieser Bedingungen gelten jedoch auch für andere Social-Media-Plattformen. Und dann werden wir im nächsten Video YouTube-Miniaturansichten analysieren und sehen, was einige davon effektiver macht als andere, um Aufrufe auf dieser Plattform zu gewinnen. Auf allen Social-Media-Plattformen hätten Sie eine Zeitleiste, die den Beitrag in der Reihenfolge zeigt , in der sie veröffentlicht wurden. Eine der wichtigsten Aufgaben eines Social-Media-Designers besteht darin, wichtigsten Aufgaben sicherzustellen, dass zwischen diesen Posts eine gewisse Harmonie besteht, insbesondere für Plattformen wie Instagram, wo sich in der Timeline alles um Bilder und Videos dreht. Und um die Harmonie in einer Zeitleiste zu etablieren, müssen Sie sich auf wiederholte Elemente und Konsistenz verlassen , die für eine Typografie, Farben, die Sie verwenden, angewendet werden können . Es ist aber auch wichtig sicherzustellen , dass es auch eine Vielfalt gibt. Sie möchten also sicherstellen , dass jeder Beitrag auffällt , damit er nicht alle gleich aussieht. Es ist also eine gute Balance und es kann schwierig sein , manchmal kann man sehen wie wir bestimmte Elemente verwenden , die sich wiederholen oder wiederkehren. Aber wir stellen auch sicher, dass es genügend Kontrast und Unterschiede gibt, damit jeder dieser Beiträge einzigartig aussieht. Jetzt außerhalb des regulären Feeds auf den meisten Plattformen hätten Sie heutzutage auch Geschichten, die Bilder oder Videos enthalten könnten. Am wichtigsten ist jedoch, dass diese im Vollbild-Vertikalformat vorliegen. Und Sie hätten die Möglichkeit, mehrere Bildschirme zu haben , wie in diesem Fall verwenden wir diese zusätzlichen Bildschirme für die Designtrends 2022. Und ich kann sie hier auf dem Desktop oder natürlich auch auf dem Handy durchblättern . Und standardmäßig würden diese Geschichten verschwinden, wenn sie nicht gespeichert werden. Diese haben wir hier in der Sektion Sammlungen. Jetzt ist der Social-Media-Designer nicht nur die meiste Zeit dafür verantwortlich , tatsächliche Grafiken für die verschiedenen Plattformen zu entwerfen, sondern auch die Leistung der Beiträge zu analysieren. Als Beispiel ist hier das Back-End oder das Dashboard, in dem wir die Analysen Ihres Pinterest-Kontos Ihres Auftragsdesigners sehen können . Und oben gibt es ein paar wichtige Begriffe , die auf allen Social-Media-Plattformen ziemlich gleich wären . Und dies sind die Hauptindikatoren für den Erfolg. Zuallererst sind es die Eindrücke. Und in diesem Fall sind dies die Gesamteindrücke aller unserer Bilder sind Beiträge auf dieser Plattform in den letzten 30 Tagen. Und dann bedeutet Eindruck einfach oft Post oder Pin angesteckt werden. In diesem Fall sehen wir auf einem Bildschirm eines Benutzers. Dies ist bereits eine wichtige Metrik, aber wahrscheinlich die wichtigste ist das Engagement. Und das kann bedeuten, wie oft Leute durch eine Pin oder Post klicken oder damit interagieren, ob sie ihn speichern oder mögen. Auch hier kann es zwischen den Plattformen variieren, aber im Falle von Pinterest würde es die Klicks und die Saves zählen. Und ähnlich wie das Verhältnis zwischen Eindrücken und Engagements hätten Sie auch ein größeres Gesamtpublikum. Leute, die sich Ihre Pins und Alt ansehen, was zu einem bestimmten Betrag Ihr engagiertes Publikum sein wird , das Ihre Beiträge tatsächlich mag, klickt oder interagiert. Ein weiterer wichtiger Begriff im Social-Media-Design ist, was ist ein organischer Beitrag? Wir meinen einfach nur , dass es ohne Bezahlung erstellt und geteilt wurde. Es ist also im Wesentlichen kein beworbener Beitrag. Wenn wir zum Beispiel zu unserem YouTube-Kanal springen und ich den ganzen Weg nach unten scrolle. Die Produktbewertungen, die ich habe, waren alle bezahlte Werbeaktionen. Also wurde ich von diesen Firmen per Gerät geliefert. Und im Gegenzug habe ich das Bewertungsvideo erstellt. Es ist jedoch immer wichtig, in dieser Art von Beiträgen oder Videos klarzustellen , dass sie nicht organisch sind und dass sie bezahlte Werbung beinhalten eine bestimmte Marke kaufen. Der Grund, warum ich dies erwähnt habe, ist, dass dies wiederum ein weiterer sehr wichtiger Aspekt der Verantwortung des Social-Media-Designers ist. Neben den tatsächlichen Grafiken oder Designs und den Analysen besteht eine weitere entscheidende Aufgabe darin, bei jeder Aktion, die auf Social-Media-Plattformen ergriffen wird, ein gutes Markenimage beizubehalten ein gutes Markenimage . Dazu gehören Kommentare oder Antworten auf Kommentare von Personen, die Kuration der behandelten Themen und den allgemeinen Ton der Stimme, und den allgemeinen Ton der Stimme der auf allen Plattformen verwendet wird. Wie Sie sehen können, obwohl es auf dem ersten Schritt erscheinen mag, da Job des Social-Media-Designers ziemlich einfach und unkompliziert ist. Es ist eigentlich ziemlich komplex und es gibt viel mehr als nur die eigentlichen Beiträge zu entwerfen. Wenn Sie also daran interessiert sind, mehr über dieses Feld zu erfahren , analysiere ich im nächsten Video ein paar YouTube-Miniaturansichten von verschiedenen Kanälen oder falls Sie weitermachen möchten. Im nächsten Thema werden wir tiefer in das Präsentationsdesign eintauchen . 26. YouTube-Thumbnail-Design: Eine der effektivsten Möglichkeiten, die Aufmerksamkeit der Menschen zu erregen, besteht darin einen Kopfschuss oder eine Darstellung in Ihrem YouTube-Miniaturbild zu machen. Dies kann also eine einzelne Person sein oder es kann eine Gruppe von Personen sein. Aber wahrscheinlich am wichtigsten ist, dass Sie eine übertriebene Emotion bekommen möchten. Also jemand mit einem sehr spezifischen Ausdruck. Jetzt würden einige YouTuber wie PewDiePie den Liquify-Filter verwenden , um das Gesicht zu verzerren und die Emotionen wieder zu übertreiben. Während andere Pizza McKinnon oder Gezer mögen, wählen Sie einen Schnappschuss aus diesem Video aus, der aus allen Ausdrücken am ausdrucksstärksten oder interessantesten ist . Aber auch hier sind wahrscheinlich die extremeren effektiver. Jemand hat also Angst oder mit den Schultern, oder jemand ist wütend, oder jemand sieht überraschend aus, diese funktionieren normalerweise am besten. Jetzt müssen Sie nicht immer einen Blickkontakt mit der Person in Ihrem Miniaturbild herstellen . Oder das kann auch dazu beitragen, die Effektivität der Miniaturansicht zu erhöhen. Aber zum Beispiel ist er mit Lou vom Unbox-Verkäufer P immer ein bisschen weiter im Hintergrund, aber er starrt dich immer an. Hier steht das Produkt natürlich im Fokus und Louise unfokussiert. Es gibt also ein bisschen von dort, das wir sehen können. Aber er starrt und schaut uns immer mit einem ernsten Gesicht in all seinen Thumbnails an. Aber wie gesagt, man muss nicht immer den Blickkontakt haben. Und Sie können sehen, wie gut das mit dieser Miniaturansicht funktioniert, Jeremy Jones schaut nach rechts. Und offensichtlich, weil es um den unsichtbaren Mann geht, erwarten wir, dass etwas auf dieser Seite außerhalb des Rahmens passiert . Wieder einmal ist es eine sehr kluge und gute Komposition, die sich hauptsächlich auf einen Kopfschuss konzentriert. Und denken Sie daran , dass ich erwähnt habe, dass Sie mehrere Personen in Ihren Miniaturansichten haben können. Jetzt macht die Korridor-Crew das wirklich gut. Sie haben es geschafft, so viele Zeichen in ihre Miniaturansicht zu passen . Also haben wir Ausrüstung hier draußen, wir haben Baby Yoda. Sie haben auch den Mandalorianer, und wir haben alle drei im Rahmen. Obwohl das Miniaturbild Ihnen einen sehr kleinen Platz zum Arbeiten bietet, haben sie es geschafft, so viele Informationen darin einzufügen. Und all diese Gesichter oder Kopfschüsse zu haben, macht es wirklich interessant und viele Leute würden darauf klicken. Jetzt müssen Sie Ihre Miniaturansicht natürlich nicht immer vollständig füllen , da negativer Raum, wie bei jedem Design, dazu beitragen kann, sich wirklich auf bestimmte Bereiche zu konzentrieren. Und hier rangiert das Spiel. Wir haben immer diese großen leeren Räume in der Miniaturansicht, weil sie immer den gleichen ausdrucksstarken Körper und diesen Kerl im Anzug benutzen , aber dann ersetzen sie den Kopf immer den Hauptteil Charaktere porträtieren aus einem Spiel. Jetzt führt dies manchmal sehr interessanten Miniaturansichten, aber im Allgemeinen funktioniert das wieder sehr gut, weil es ein Kopfschuss ist, aber sie nutzen auch den negativen Raum in ihrem Miniaturansichten. Und die Technik der Nutzung von negativem Raum ist auch hier mit Miniaturansichten von Unbox-Therapeuten sehr klar, eine Technik, die Ihre Designs immer verbessert und dazu beiträgt, sie ansprechender und interessanter zu machen , ist wann immer Sie die Tiefe feststellen können. Und um dies zu schaffen, besteht eine dieser Techniken darin, außerhalb der Grenzen zu verwenden. Ein gutes Beispiel dafür wäre Rostral Thumbnail. Schreib es einfach über mich, wo wir sehen können , dass sich die Pizza überlappt. Das eigentliche endgültige Kunstwerk hier auf der rechten Seite. Darüber spreche ich, dieser Abschnitt hier , der Überschneidungen mehr Tiefe und mehr Interessen schafft. Wir haben also diesen schönen Schichteffekt. Beachten Sie auch, dass wir einen weißen Umriss um die Hand haben. Ich werde ein bisschen mehr darüber sprechen, aber das ist der Aufklebereffekt, der im Wesentlichen wiederum eine Möglichkeit ist, die Hand vom Hintergrund zu trennen. Erstellen Sie also eine vielschichtige Komposition. Und da wir auf dieser Miniaturansicht sind, gibt es hier auch ein weiteres Detail, den Rahmen um die Miniaturansicht, tatsächlich Teil des Designs ist. Und beachte noch einmal, dass die Tiefe hier wirklich klug genutzt wird, weil sich die Hand vor diesem Rahmen befindet. Also ein weiterer sehr subtiler Out-of-Bounds-Effekt. Wenn Sie sich unsere Thumbnails ansehen, werden Sie feststellen, dass wir dies oft verwenden. Wir verwenden also beide einen Rahmen und wir verwenden manchmal auch den überlappenden oder außergrenzen Effekt, der bestimmte Details trennt oder hebt und es so aussehen lässt, als würden sie außerhalb des Rahmens kommen. Es kommt zurück zu Peter McKinnon, Thumbnail. Wir können diesen Effekt auch außerhalb der Grenzen sehen. Dies ist also der ursprüngliche Hintergrund oder Hintergrund seines Videos. Dann lassen wir die Schultern davon rauskommen und das Design überlappen, das wirklich alles in die gesamte Komposition integriert . Und obwohl es sehr subtil ist, können wir die Überlappung auch hier sehen. Die Schulter überlappt das Poster nur sehr sanft. Jetzt kann es wieder sehr effektiv sein, Ihre Miniaturansichten zu schreiben , da viele Leute, wenn sie durchscrollen, ob sie sich auf ihrem Mobiltelefon oder der Fehler auf dem Computer befinden . Sie schauen sich nicht unbedingt die Titel an. Sie würden einfach durchlaufen und das Visuelle als Miniaturansichten betrachten. Eine SMS der Miniaturansicht zu schreiben, kann also eine gute Strategie sein , um die Aufmerksamkeit der Menschen zu erregen. Stellen Sie sicher, dass sie verstehen , worum es in Ihrem Video geht. Es tut jedoch ein paar Dinge, die Sie Betracht ziehen sollten, wenn Sie sich dafür entscheiden. zunächst und vor allem, Versuchen Sie zunächst und vor allem, Clickbait zu vermeiden. Was auch immer Sie eingeben, entweder im Titel oder in der Miniaturansicht, sollte immer repräsentativ für das Thema sein , das Sie behandeln. Machen Sie die Leute also nicht dazu, auf Ihre Videos zu klicken denn wenn sie nicht , denn wenn sie nicht den erwarteten Inhalt erhalten, werden sie dir nicht vertrauen und sie werden deine Videos höchstwahrscheinlich nicht im Zukunft. Eine andere Sache, die Sie vielleicht berücksichtigen möchten, ist, den Titel nicht genau in der Miniaturansicht zu wiederholen. Vielleicht kannst du etwas haben , das den Titel erweitert. Anstatt also zu versuchen, in alles zu passen, können Sie einfach einen Titel finden oder sogar mehr Kontext hinzufügen. Ian Barnard zum Beispiel hat es geschafft, hier in der Miniaturansicht eine sehr lange Steuer einzubringen, sieben Tipps zur Fortpflanzung, die Sie in weniger als fünf Minuten sprachlos machen werden . Das wird also sehr lang für einen Titel sein, aber es funktioniert eigentlich ganz gut. Und obwohl er eigentlich keinen Out-of-Bounds-Effekt verwendet hat, fühlt es sich fast so an, als wäre das iPad aus dem Rahmen. Und das liegt nur an der Komposition selbst. Und auch eine andere sehr intelligente Technik ist hier eine Vergrößerung oder Zunahme der Kopfgröße. Lassen Sie es noch übertriebener aussehen und fast wie eine Comicfigur. Wenn es darum geht, Texte in Ihren Miniaturansichten zu verwenden, ist es gut, konsistent zu sein und erkennbar zu machen. Zum Beispiel macht IG N dabei einen brillanten Job. Wir können also sehen, dass sie eine Vorlage oder einen Standard haben , den sie für ihre Zusammensetzung verwenden. Es wird also immer im gleichen Winkel sein. Es wird diesen harten Schlagschatten hinter diesem Gliederungstext haben. Und dann werden wir den Titel und den Untertitel immer gut getrennt und geteilt haben. Und da wir uns dieses Miniaturbild etwas näher ansehen , möchte ich auch erwähnen, dass sie brillante Arbeit geleistet haben, um sie brillante Arbeit geleistet haben diesem roten Highlight dem Gesicht der Schauspielerinnen hinzuzufügen. Das war ursprünglich nicht da. Dies wurde hinzugefügt, weil sie diese rote Kulisse hier verwenden . Und um diese realistische Atmosphäre zu schaffen, verwenden sie diesen Photoshop-Effekt , der ihn sehr professionell und filmisch aussehen lässt. Ähnlich wie bei der Verwendung von Steuern können Sie auch grafische Elemente einbeziehen, die die Aufmerksamkeit der Zuschauer wieder lenken können. Und das können Kreise sein wie in diesem Fall mit Ms-Modul oder auch größere Elemente wie dieser riesige Pfeil hier, und sogar die Trennung zwischen links und rechts kann diese diagonale weiße Linie sein betrachtete grafische Elemente Preisschilder sind äußerst nützlich, genau wie bei Werbung im Allgemeinen. Thumbnails auch. Er wurde zu einem sehr häufig verwendeten Element. Pizza MacKinnon verwendet diese Preisschilder hier auf der Miniaturansicht auf beiden Seiten, die zeigen, wie viel er für Fiverr für die Fotobearbeitung bezahlt hat . Und wir haben auch ein gut integriertes Preisschild hier in dieser Miniaturansicht von Kuh. Und da wir das etwas näher betrachten, können wir ein paar Dinge sehen , über die wir bereits gesprochen haben, wie den Kopfschuss hier rechts, den Titel oder die Texte, um es in der Miniaturansicht. Und noch einmal eine sehr subtile Überlappung mit der Schulter und dem Reifen, nur um das festzustellen. 27. Wie kann man Thumbnail-Bilder hervorheben?: Kontrast ist einer der wichtigsten Aspekte des Designs und gilt auch für YouTube-Miniaturansichten. So können Sie den Kontrast auf viele verschiedene Arten nutzen. Sie können entweder kontrastierende Farben zusammenfügen Tonwerte kontrastieren. Und Sie können auch Kontrast erzeugen, indem Sie Anpassungen und Filter wie Schärfen und Sättigung verwenden. Nun, hier ist ein gutes Beispiel für eine Miniaturansicht, die automatisch aus dem Video selbst generiert wurde. Das ist also etwas, das Sie immer meiden sollten. Stellen Sie immer sicher, dass Sie eine benutzerdefinierte Miniaturansicht erstellen, anstatt sich auf die YouTube-Engine zu verlassen , die Miniaturansichten für Sie generiert. Dies ist das eigentliche Miniaturbild auf YouTube für den Ankündigungstrailer für die Saison für die erstaunliche Serie namens Last Kingdom auf Netflix. Und das ist eindeutig nur eine Momentaufnahme aus dem Video selbst. Es wurde nicht als benutzerdefinierte Miniaturansicht entworfen oder erstellt. Ich möchte Ihnen also zeigen, wie dies verbessert werden kann indem Sie den Kontrast einführen und spannender machen. Der beste Filter, den ich normalerweise benutzen würde , ist der Camera Raw Filter. Bevor Sie dies jedoch normalerweise anwenden, sollten Sie für intelligente Filter konvertieren wählen sicherzustellen , dass der Layer, mit dem Sie arbeiten in ein intelligentes Objekt umgewandelt wird. Dann können Sie es also zerstörungsfrei verwenden. Ich gehe in den Camera Raw Filter , der diesen separaten Bearbeitungsbereich öffnet. Was Sie normalerweise tun möchten , ist, fast wie einen HDR-Tonungseffekt zu erzeugen , bei dem Sie die Schatten erhöhen und die Belichtung erhöhen. Wahrscheinlich kannst du noch weiter gehen , alles wirklich übertreiben. Und dann können Sie wahrscheinlich die Highlights von Weißen und Schwarzen ein wenig erhöhen . Sie können auch nach rechts oder links ziehen, je nachdem, was mehr Kontrast erzeugt. In diesem Fall ist es wahrscheinlich besser, es nach links zu ziehen. Ich habe das Gefühl, dass wir hier noch ein bisschen mehr Helligkeit haben können . Und dafür würde ich den Einstellpinsel verwenden, mit dem ich diesen dunkleren Teil des Gesichts übermalen werde . Und dann können Sie sehen, dass wir die Exposition auch selektiv erhöhen können . Ich gehe zurück zu den zusätzlichen Einstellungen. Und sobald wir die Tonwerte haben, richten Sie sie richtig ein, damit wir sehen können, dass ich vorher und nach dem Drücken von P auf der Tastatur nur P drücke, was bereits einen großen Unterschied macht. Und vergiss nicht, wir denken immer darüber nach ein kleines Miniaturbild zu benutzen , denn das werden die Leute sehen. Wir sehen nicht das ganze Bild. Für dieses kleine Detail muss es wirklich knallen und sehr ausdrucksstark sein. Und um den Kontrast noch weiter zu erhöhen, können wir auch Klarheit hinzufügen. Das funktioniert normalerweise ganz gut. Wir können vielleicht auch ein bisschen vom Dunst hinzufügen, aber ich denke, in diesem Fall hilft das nicht, aber definitiv dazu beitragen würde, die Lebendigkeit und Sättigung zu erhöhen. Damit Sie wieder aus der Ferne sehen werden, dass es tatsächlich funktioniert, wenn wir es aus nächster Nähe betrachten, kann es verkocht werden. Und natürlich würde ich das nicht auf einem Poster verwenden, aber für ein YouTube-Miniaturbild, das winzig ist, es diese kuratierten Anpassungen und Änderungen, die es zum Laufen bringen werden. Eine andere Sache, die ich normalerweise tun würde , ist auch das Schärfen hinzuzufügen. Also von der Schärflasche aus können wir das Schärfen erhöhen. Und wieder kannst du verrückt werden. Normalerweise würde ich nicht so weit gehen, aber weil wir an einer Miniaturansicht arbeiten, würde ich das normalerweise tun, vielleicht ein bisschen Rauschunterdrückung hinzufügen , nur damit Sie nicht anfangen , auch ein viel Lärm in die Komposition. Aber wenn wir diese Änderungen jetzt akzeptieren, können wir vorher und nachher sehen. Offensichtlich ist das ein großer Unterschied, besonders wenn man sich das in einer kleinen Größe wie dieser anschaut . Vor und nach massiver Differenz. letzte Mal haben wir darüber gesprochen Das letzte Mal haben wir darüber gesprochen, wie wichtig es ist, Headshots in Ihren Miniaturansichten zu verwenden. Auch der Out-of-Bounds-Effekt, um Tiefe zu erzeugen. Ein Effekt oder eine Technik, die sehr effektiv zu verwenden sein kann , ist der Aufklebereffekt , den Sie hier auf Jess Thumbnail wirklich gut nutzen können . Dieser weiße Umriss mit einem subtilen Schlagschatten um ihn herum ist derjenige, von dem ich spreche. Und das ist eine sehr einfache Technik. Um Ihnen zu zeigen, wie das geht, kehren wir zu unserem letzten Königreich-Miniaturbild zurück. Hier. Alles, was ich tun werde, ist, zum Auswahlmenü zu gehen und Betreff auswählen zu wählen, wodurch unsere Hauptfigur ausgewählt wird. Jetzt müssen wir diese Auswahl nur noch ein wenig verfeinern. Also verwende ich das magische One-Tool, wenn ich Alt oder Option gedrückt halte. Ich kann Abschnitte übermalen , die ich nicht auswählen muss. Und dann werde ich, ohne irgendwelche Tastenkombinationen gedrückt zu halten, einfach das Schwert hier auf der linken Seite auswählen . Und ich denke, das ist so ziemlich genau das, was ich bei dieser Auswahl brauchte. Jetzt muss ich dies nur noch in einen Umriss verwandeln. Und der einfachste Weg, dies zu tun, besteht darin, eine separate Ebene zu erstellen, nur die leere Ebene, und dann die Auswahl mit einer Farbe auszufüllen. Es kann jede Farbe haben. Ich verwende nur Alter Option Backspace, die mit meiner Vordergrundfarbe ausgefüllt wird. Dann verwende ich Command oder Control D , um die Auswahl loszuwerden. Übrigens können Sie an dieser Stelle mit Ihrem Pinselwerkzeug Teile dieser Auswahl verfeinern. Auf diese Weise kann ich sehr deutlich sehen, ob es irgendwelche überlappenden Details gibt, die das Auswahlwerkzeug verpasst hat. Aber dann ist dies der wichtige Teil. Was Sie tun möchten, ist, den tatsächlichen Strich oder den Umriss mithilfe der Ebenenstile hinzuzufügen . Doppelklicken Sie auf die Ebene und wählen Sie dann Strich aus. Und Sie werden sehen , dass ich bereits die weiße Farbe mit einer dicken Größe ausgewählt habe und die Position nach außen eingestellt ist. Und ich kann immer vergrößern, die Größe von Phi eins verringern. Aber ich klicke jetzt einfach auf Okay. Und ich kann sehen, dass es hier ein paar Details gibt, die nicht sichtbar sein sollten. Dafür verwende ich das Radiergummi-Tool und lösche es einfach sehr schnell. Jetzt, da ich mit dem Ergebnis zufrieden bin, muss ich nur noch die Deckkraft der Füllung reduzieren. Wenn Sie das reduzieren, bleibt der Schlaganfall sichtbar. Oder alle Ebenenstile , die sich auf dieser Ebene befinden. Und es wird den eigentlichen Inhalt, der diese Füllfarbe war, völlig transparent machen . Aber damit dieser dickere Effekt noch besser funktioniert, kann ich dann in die Ebenenstile zurückkehren und auch Schlagschatten hinzufügen, die noch besser vom Hintergrund getrennt waren. Wir können die Deckkraft erhöhen. Vielleicht können wir dem gewünschten Effekt auch etwas mehr Distanz und Verbreitung und Größe hinzufügen etwas mehr Distanz und Verbreitung . Vergessen Sie nicht, dass Sie den Schatten auch ziehen und bewegen können , während Sie auf das Miniaturbild klicken. Und das wird einen noch getrennteren und mehr aufkleberähnlichen Effekt erzeugen . Eine weitere effektive Komposition , die Sie in Ihren YouTube-Miniaturansichten verwenden können , besteht darin, eine Aufteilung zwischen der linken und der rechten Seite zu erstellen . So kann es für Vorher und Nachher verwendet werden, oder es kann verwendet werden, um bestimmte Dinge zu vergleichen. Und wir haben dies bereits in einigen dieser Miniaturansichten gesehen . Aber schauen wir uns einige von ihnen genauer an. Zum Beispiel haben wir hier ein schönes Gesicht zwischen Beauty Pie und Charakter von Minecraft, das wieder einmal auf Kopfschüsse zurückgeht. Wir haben also zwei sehr effektive Headshots hier. Aber dann haben wir auch diese schöne Trennung oder Aufteilung zwischen den beiden Seiten des Rahmens. Es gibt auch ein wenig Überlappung oder Out-of-Bounds-Effekt, der mit den Händen verwendet die die Details im Hintergrund überlappen. Und denken Sie daran, dass wir über den übertriebenen Ausdruck mit dem Liffy-Filter gesprochen haben. Ein anderes Beispiel für diese geteilte Komposition wäre die Miniaturansicht Jesu, in der wir Jesus als Teilung zwischen zwei Kompositionen gedreht haben , die links und dann eine rechts. Nun ist der Unschärfe-Effekt, den wir hier sehen können, auch eine sehr verbreitete Technik, Sie auf das Miniaturbild klicken möchten. Vor allem, wenn es ein Endergebnis oder eine Enthüllung im Video gibt, ist das normalerweise keine gute Idee Sie in Ihrer Miniaturansicht zeigen können, denn dann werden die Leute nicht so interessiert sein zu sehen, was es ist dreht sich alles um. Die Verwendung von Unschärfe-Effekten aus diesem Grund kann in Miniaturansichten sehr effektiv sein, was wir auch bei Peter McKinnon sehen können. Er zeigt den auf der linken Seite, was das billigere Design war. Aber dann haben wir hier auf der rechten Seite eine ziemlich starke Unschärfe mit dem teureren Design, was uns wieder begeistert und interessiert, wie es tatsächlich aussieht. Und nicht zuletzt möchte ich Sie daran erinnern, die untere rechte Ecke Ihrer Miniaturansicht nicht für wichtige Details zu verwenden für wichtige Details , da dort der Timecode angezeigt wird. Sie können also sehen, dass die meisten dieser Schöpfer sich dessen bewusst sind. Und sie halten diesen Abschnitt hier unten rechts absichtlich völlig leer. Also haben wir noch einmal einen leeren Platz hier. Außerdem behält IgM diesen Bereich absichtlich MT bei. Hier würde normalerweise der Zeitcode auftauchen. Das einzige Miniaturbild von all diesen, wo es sich überlappen würde. Eine wichtige Information wäre Peter McKinnon und weil sie die 200 Dollar haben , wäre aufgrund des Timecodes tatsächlich schwer zu lesen. 28. Präsentationsdesign: Präsentationsdesign ist eine weitere interessante Nische in der Welt des digitalen Designs der Welt des digitalen Designs, falls Sie sich auf diesen Bereich spezialisieren möchten. In diesem Video gebe ich Ihnen ein paar nützliche Tipps, die Sie beachten sollten. Zunächst besteht das Hauptziel einer Präsentation darin, das Publikum zu überzeugen. Und eine der besten Möglichkeiten , dies zu tun, besteht darin Folien in die Präsentation einzubeziehen, aber auch auf Storytelling zu verlassen, falls Sie der Designer sind und die Präsentation nicht durchführen werden sich selbst. Höchstwahrscheinlich wird Ihnen die Kopie zur Verfügung gestellt , die der Moderator auf den Folien verwenden möchte . Sie können jedoch immer zusätzliche Dinge wie einen Code vorschlagen . Zum Beispiel, wenn es im Kontext der Präsentation gut funktioniert und hilft, das Publikum einzubeziehen. Sie beim Entwerfen von Folien sicher, dass Sie sie nicht überdrängen. Nutzen Sie also viel negativen Speicherplatz und vermeiden Sie es zu viel Text oder Aufzählungszeichen zu bearbeiten. Stellen Sie sicher, dass die Moderatoren ihre eigene Kopie haben , während sie präsentieren. Es muss nicht wirklich auf den Folien erscheinen. Stattdessen sollten das Design und die Elemente, die Sie in Ihren Folien verwenden immer mit dem, was der Moderator sagt, verknüpfen oder erweitern. Ähnlich wie eine Zeitleiste auf einer Social-Media-Plattform sollten die Folien auch Harmonie zwischen ihnen haben. Es sollte also Konsistenz und wiederholte Elemente geben, egal ob es sich um Farben, Typografie oder Illustrationsstil oder Fotografien handelt. Um das Publikum zu beschäftigen, müssen Sie jedoch auch einen Rhythmus zwischen den Folien einführen . So können Sie beispielsweise stärkere oder lebendigere Hintergrundfarben für die Einführungsfolien verwenden stärkere oder lebendigere Hintergrundfarben , sind Folien, die bestimmte Kapitel innerhalb der Präsentation aufteilen und hellere Hintergrundfolien verwenden hellere Hintergrundfolien der allgemeine Inhalt der Präsentation. Sie auch keine Angst davor, bestimmte Elemente innerhalb von Folien zu beschneiden. So haben wir zum Beispiel hier all diese schwebenden Details in der Mitte der Folie. Während die Rutsche viel aufregender sein kann , wenn die Dinge größer werden und sie wieder an den Rändern der Rutsche platziert werden, bevor kleine schwimmende Gegenstände vorhanden sind. Und nachdem alles größer geworden ist, hat das viel mehr Auswirkungen und viel mehr Interesse an dieser Folie. also diese Details an den Rändern haben und nicht jedes Detail von ihnen anzeigen, wird das Publikum sofort engagierter , da es automatisch beginnt , die Fehlenden zu füllen Details in und stell dir vor, wie diese Illustrationen vollständig aussehen würden. Obwohl PowerPoint und Keynote oder die bekanntesten Tools zum Erstellen von Präsentationen sind, ist es besser, wenn Sie ein professioneller Präsentationsdesigner sind, wenn Sie Tools wie Adobe InDesign verwenden. Und ich habe hier nur eine kurze Präsentation als Beispiel. Und natürlich in InDesign-Daten und vielen nützlichen Techniken und Tools wie die Verwendung Master- oder Elternseiten, da sie jetzt nach wiederholten oder wiederkehrenden Details aufgerufen werden . Wie in diesem Fall dieser kleine Balken hier unten, der auf allen Folien auftauchen würde. Mein Lieblings-Tool ist jedoch Adobe XD, um Präsentationen zu erstellen. Und es gibt sogar ein erstaunliches Plugin namens Presentation von Adobe, das Sie installieren können. Und es ist völlig kostenlos. Und es wird viele vorgefertigte Vorlagen haben , für die Sie verwenden können. In diesem Fall habe ich bereits ein Präsentationsprojekt gestartet und mich für einen bestimmten Stil entschieden. Und wenn ich auf Folien klicke, kann ich aus all diesen vorgefertigten Vorlagenoptionen auswählen . Sagen wir einfach, ich brauche einen mit einem Absatz und einem Bild. Und sobald ich das hinzufüge, erscheint es neben meiner vorherigen Folie, alles ist natürlich vollständig editierbar, sodass ich Dinge auswählen, verschieben, den Text ändern und die Bilder ändern kann. Und ich kann hier auf der linken Seite auch auf Elemente zugreifen, darunter Symbole, Formen, Diagramme , Illustrationen, Bilder usw. 29. Digitale Veröffentlichung: Digitales Publizieren, manchmal auch Online oder E Publishing genannt, bezieht sich auf die Veröffentlichung von normalerweise langformatigen Dokumenten, die im Internet oder auf elektronischen Geräten wie E-Readern und Tablets angezeigt werden die im Internet oder auf . In diesem Video werden wir ein paar wichtige Dinge durchgehen , die Sie über diesen Sektor wissen müssen. Ein paar Begriffe, mit denen Sie vertraut sein sollten , und die Vor- und Nachteile des digitalen Publishings im Vergleich zum traditionellen Publizieren. Zunächst einmal ist hier eine interessante Statistik, die die Meinung der Menschen im Allgemeinen über gedruckte Bücher im Vergleich zu E-Books zeigt über gedruckte Bücher im Vergleich zu E-Books und welche sie in bestimmten Situationen bevorzugen würden. Zum Beispiel würden die meisten Menschen lieber ein gedrucktes Buch haben, wenn sie mit einem Kind lesen, während sie ein E-Book bevorzugen würden, wenn sie auf Reisen sind oder schnell ein Buch bekommen möchten. Und im Falle des Lesens von Büchern im Bett ist die Entscheidung wirklich zwischen gedruckten und E-Books aufgeteilt. Einer der Vorteile einer digitalen Publikation besteht darin, dass sie ein größeres Publikum erreichen kann. Weil eine gedruckte Publikation immer auf die Anzahl der erstellten Drucke beschränkt ist. Im Falle einer digitalen Veröffentlichung gibt es natürlich kein physisches Produkt, das hergestellt und vertrieben werden muss. Die Zeit, die benötigt wird, um eine Publikation in den Händen Ihres Publikums fertig zu machen, ist im Vergleich zum herkömmlichen Drucken sehr schneller . Und natürlich nicht mit Druck und Vertrieb beschäftigen zu müssen , bedeutet auch , dass es viel kostengünstiger ist , digitales Publizieren zu verwenden, aber es ist auch einfacher, den Erfolg von Publikationen dank Statistiken. Ähnlich wie das, was wir bei Social Media im Falle einer digitalen Veröffentlichung auf den meisten Plattformen gesehen haben , können Sie auch wichtige Daten wie die Anzahl der Impressionen oder Publikationen sehen , die von jedem hervorgegangen sind. Wie viele Leute blättern tatsächlich die gesamte Publikation durch, was meistens nicht unbedingt bedeutet, dass sie tatsächlich alles lesen, aber sie haben nur alle Inhalte in der Publikation gesehen. Und Sie können die meiste Zeit auch die durchschnittliche Zinszeit und vor allem die Klicks oder Interaktionen sehen die durchschnittliche Zinszeit und vor allem , die Personen durchführen. Denn das ist wieder ein großer Vorteil bei digitalen Publikationen , dass Sie auch Interaktivität einbeziehen können . Hier ist ein Beispiel für eine Online-Publikation. Es ist eine Zeitschrift über Naturfotografie. Es ist auf Ungarisch. Aber wir können sehen, dass wir zum Beispiel hier sofort beim ersten Spread hier sofort beim ersten Spread eine Anzeige haben, auf die ich geklickt habe. Es bringt mich direkt auf die Website des Werbetreibenden. Interaktivität in digitalen Publikationen kann auch für viele andere nützliche Dinge wie die Navigation innerhalb der Publikation genutzt werden andere nützliche Dinge wie die . In diesem Fall befinden wir uns auf der Seite des Inhaltsverzeichnisses. Und hier kann ich ganz einfach zu einem dieser Artikel springen. Lasst uns einfach zu diesem hier springen. Anstatt also die ganze Publikation durchzublättern, komme ich sofort dazu. Übrigens, wenn ich zu einem neuen Spread auf dieser speziellen Plattform, issue.com, komme einem neuen Spread auf dieser speziellen Plattform, , wird jedes interaktive Element in einem Spread vorübergehend hervorgehoben, wie die Website dieses Sponsors hier unten. Wenn ich wieder auf die vorherige Seite gehe und dann zu diesem Spread komme, könntest du die kleinen Highlights sehen die dort unten auftauchen. Ein weiterer großer Vorteil digitaler Publikationen besteht darin, dass im Falle von Fehlern, zum Beispiel Tippfehler, die nach dem Live der Veröffentlichungen entdeckt werden , diese dennoch leicht geändert werden können. Und die meiste Zeit bedeutet es nur, eine bestimmte Seite zu ersetzen, die sofort auf jedem Gerät aktualisiert wird sofort auf jedem Gerät aktualisiert , wo auch immer diese Publikation angezeigt wird. Natürlich können Sie digitale Publikationen direkt aus InDesign mit einer Funktion namens Publish Online erstellen. Und hier ist ein Beispiel für eine Publikation, die ich vor ein paar Jahren erstellt habe. Wir können alle Seiten durchblättern. Natürlich könnten wir auch näher zoomen, wenn wir es wollen und um oder dann wieder schwenken, wieder herauszoomen und sogar die kleinen Miniaturansichten hier unten sehen . Falls dies etwas ist, das Sie ausprobieren möchten, müssen Sie nur zu den Exportoptionen hier oben rechts in InDesign gehen und Online veröffentlichen auswählen, wo Sie es als neues Dokument oder aktualisiert ein vorhandenes Dokument. Das meinte ich also. Wenn Sie Ihr Dokument aktualisieren müssen , nachdem Sie Ihre Änderungen in InDesign vorgenommen haben, müssen Sie nur sicherstellen, dass Sie hier das richtige Dokument auswählen und es wird sofort mit der geänderten Aktualisierung aktualisiert entwerfen Es gibt auch ein paar zusätzliche nützliche Optionen, wie Sie es den Zuschauern ermöglichen können, das Dokument als PDF-Datei herunterzuladen , falls sie offline darauf zugreifen oder es vielleicht ausdrucken möchten . Und standardmäßig stehen Optionen zum Teilen und Einbetten zur Verfügung, die Sie im Fall, dass Sie es nicht verwenden möchten, sich vor dem Online-Viewer verstecken können. Bisher haben wir uns auf die Vorteile digitaler Publikationen konzentriert . Es ist aber auch wichtig zu erwähnen, dass eine Publikation in vielen Fällen sowohl in gedruckter als auch in digitaler Form verteilt wird . Hier können wir also ein Magazin im Hintergrund sehen, wir sehen die gedruckte Version, und hier auf einem E-Reader können wir die digitale Version sehen. Der Grund, warum ich dies zeige, ist , dass dies aus Sicht des Designs oft eine subtile Neuanordnung des Inhalts bedeutet. Anstatt sich für diese beiden Formate auf genau das gleiche Layout zu verlassen , müssen Sie möglicherweise kleine Anpassungen vornehmen und ein paar Dinge neu anordnen. Es gibt eigentlich zwei sehr wichtige Begriffe mit denen Sie vertraut sein sollten. Was sind nachfüllbare und feste Layout-e Publikationen oder ePubs. Im Falle einer Veröffentlichung eines festen Layouts bleibt der Inhalt der Seiten immer statisch. Es wird auf jedem Gerät genau auf die gleiche Weise angezeigt . Und dies ist die Option , die normal verwendet wird, wenn der Herausgeber alles replizieren möchte was während eines Reflow-Balls gedruckt wurde , dh der Inhalt wird immer in der Lage sein passen Sie sich an ein bestimmtes Gerät an. Und in diesem Fall variieren die Seitenumbrüche und die Anzahl der Seiten zwischen den Geräten und zwischen den Einstellungen, die ein Benutzer bevorzugen würde, oder dem Gerätetyp, den er verwendet, unabhängig davon, ob es sich um ein Telefon handelt , ein Tablet oder einen Desktop-Computer. In diesem Vergleich können wir übrigens die fünf gängigsten Dateiformate sehen, die für digitale Publikationen und Funktionen verwendet werden digitale Publikationen und Funktionen mit ihnen verfügbar sind, auf der rechten Seite. Und falls Sie sich fragen, wofür DRM steht, bedeutet dies tatsächlich das Management digitaler Rechte, eine Funktion, die es dem Autor der Veröffentlichung ermöglicht , rechtliche Kontrolle darüber zu haben , was der Käufer wird mit der Arbeit fertig werden können. Zusammenfassend lässt sich sagen, dass digitales Publizieren ein sehr interessantes Feld sein kann, insbesondere wenn Sie bereits mit dem traditionellen Publikationsworkflow vertraut sind , da Sie nicht wirklich lernen müssen viele zusätzliche neue Fähigkeiten, abgesehen davon, dass Sie Interaktivität nutzen und verstehen, wie Sie den Erfolg von E-Publikationen verfolgen können. 30. Bewegungsdesign: Motion Design ist ein weiteres sehr aufregendes und interessantes Feld, das Sie leicht vom Grafikdesign übergehen können , da es im Wesentlichen dieselben Prinzipien und gleichen Tools verwendet dieselben Prinzipien und gleichen Tools sogar vielleicht mit dem Zusatz von Adobe After Effects oder Adobe Animate. Und der beste Weg zu beschreiben, wofür Motion Design steht , ist, dass es sich um eine Art von Animation handelt, die eher einem dynamischen oder beweglichen Grafikdesign ähnelt, als die anderen traditionelleren Animationsarten Wie Cartoons wird Motion-Design in vielen verschiedenen Bereichen verwendet, von Werbung über Logo-Designs bis hin zu Interface-Design im Vergleich zu herkömmlichen Animationen. Im Falle von Motion Design animieren Sie die meiste Zeit Topographie und Formen. Und auf diesem Board können wir die zehn Prinzipien des Bewegungsdesigns sehen , denen es sich um verschiedene Methoden und Wege handelt, die wiederum ursprünglich in Animationen entwickelt wurden, die Ihre Entwürfe ansprechender machen können und interessanter. Lockern ist zum Beispiel eine sehr verbreitete Technik , mit der sich die Animation subtiler und realistischer anfühlen kann . Statt einer sehr abrupten Veränderung oder einer sehr linearen und langweiligen Bewegung können Sie hier sanftere Bewegungen wie diese beiden Beispiele haben . Im Allgemeinen ist Lockerung also nur eine Möglichkeit, dem Betrachter zu helfen, zu verstehen was passieren wird bevor eine Aktion ihre volle Wirkung ergreift. Dribble ist eine großartige Plattform, um Beispiele für Motion Design zu erkunden und sich von ihnen inspirieren zu lassen. Wenn Sie also nach diesen Projekten suchen, empfehle ich, Animation als Hauptkategorie zu wählen und dann Motion Design auf die Tags einzugeben, was Sie zu wirklich coolen Projekten führt. Und es wird Ihnen ein besseres Verständnis dafür geben was als Motion Design zählt. Dieses Beispiel fällt beispielsweise in eine bestimmte Kategorie innerhalb des Bewegungsdesigns, fällt beispielsweise in eine bestimmte Kategorie innerhalb die wir als kinetische Topographie bezeichnen, die Buchstaben und Wörter in Charaktere oder Schauspieler einer Animation umwandelt . Es ist eine großartige Möglichkeit, eine Botschaft überzeugender und ansprechender zu gestalten . Und wieder, um die Aufmerksamkeit der Menschen auf sich zu ziehen. Es ist also wieder etwas, das sehr häufig in der Werbung verwendet wird. Sie erinnern sich vielleicht, als wir über Icons sprachen, ich habe bereits erwähnt, dass das Animieren in die Kategorie des Bewegungsdesigns fallen würde . Hier sind auch ein paar einfache Beispiele , die selbst mit ein paar Zeilen durch die Einführung dynamischer Bewegungen Dinge viel interessanter machen und sogar eine ganze Geschichte erzählen können , verglichen mit einer einfachen statisches Symbol zum Beispiel. Falls Sie also ins Grafikdesign einsteigen möchten, arbeiten Sie hauptsächlich mit Illustrator und After Effects zusammen, bereiten Ihre Elemente und Komponenten in Illustrator vor und animieren sie dann mit After Auswirkungen. 31. AR und VR: Sowohl Augmented Reality als auch Virtual Reality eröffnen neue Dimensionen in der Welt des digitalen Designs. Wenn Sie planen, auf diese Art von Projekten einzusteigen, , benötigen Sie neben der Verwendung von Tools wie Photoshop und Illustrator auch einige Kenntnisse über 3D-Anwendungen da sowohl AR als auch VR auf drei- dimensionale Erfahrungen. Neben 3D-Fähigkeiten ist Animation und Codierung auch für diese Art von Projekten wichtig. Die gute Nachricht ist jedoch, dass Sie, selbst wenn Sie keine dieser Fähigkeiten besitzen und nur aus einem grafischen Design-Hintergrund kommen . Sie können weiterhin Augmented-Reality-Szenen generieren , indem Sie das Werkzeug „Pfeil“ verwenden. In den nächsten paar Videos zeige ich Ihnen ein echtes Projekt, zeige ich Ihnen ein echtes Projekt, wie ich es von Grund auf neu zusammenstelle und auf Assets angewiesen bin, die ich in Photoshop und Illustrator vorbereitet habe . Aber bevor wir dorthin gehen und falls Sie neu in diesen Feldern sind, möchte ich nur sicherstellen, dass Sie den Unterschied zwischen AR und VR kennen . Im Falle von Augmented Reality verwenden Sie Ihr mobiles Gerät und über den Bildschirm Ihres Telefons oder Tablets können Sie eine erweiterte Version Ihrer eigenen Umgebung sehen . Und wenn Sie mit Ihrem mobilen Gerät herumlaufen, können Sie verschiedene Zeichen der Objekte sehen , die in dieser Augmented-Reality-Welt platziert sind . Und natürlich ist der beste Einsatz von AR, wenn Sie auch mit diesen erweiterten Details interagieren können , die zum Beispiel großartige Beispiele für AR sind , die bereits in der Bildung verwendet werden. Und die wichtigste Anforderung von AR, ordnungsgemäß zu funktionieren, ist, dass es Ihre Umgebung erkennt. Jetzt kann es ein ganzer Raum oder sogar draußen sein. Es kann sich jedoch auch auf ein bestimmtes physisches Objekt verlassen , das Sie benötigen, damit die AR-Erfahrung funktioniert. In diesen Fällen ist die interaktive Erfahrung also damit verbunden, dieses physische Objekt zu haben. Sobald Sie dieses Objekt haben und auf Ihr mobiles Gerät hingewiesen ist , wird es im Weltraum verfolgt und alle Details der erweiterten Realität, einschließlich der 3D-Objekte, des Animationen, Sounds und Interaktivität mit diesem verfolgten Objekt in Ihrer Umgebung. Ein weiteres großartiges Beispiel ist, wie es verwendet werden kann , um Möbel beispielsweise in Ihrem eigenen Raum zu testen , um zu prüfen, ob es passt und ob es die richtige Größe hat. Denn das ist eigentlich auch etwas, das ein EIR-Projekt für Sie leicht schätzen kann. Da die Kameras auf den meisten mobilen Geräten jetzt Entfernungen und den richtigen Umfang Ihrer Umgebung verstehen können Entfernungen und den richtigen Umfang Ihrer Umgebung verstehen . So wird ein AR-Projekt wie dieses in der Lage sein, die richtige Größe eines Möbels genau darzustellen, z. B. im Vergleich zu Augmented Reality, VR ist nicht auf Ihre tatsächliche physische Umgebung angewiesen. In diesem Fall müssen Sie ein Headset oder einen Helm anziehen , der Sie in diese virtuelle Welt bringen wird. Und um diese Welt zu erleben, musst du einfach den Kopf drehen. Und in einigen Fällen können Sie auch hin und her gehen, solange es eine sichere Umgebung gibt , um mit einer Virtual Reality-Welt interagieren zu können . Sie benötigen auch Controller in Ihrer Hand. Und neben den offensichtlichen und am häufigsten verwendeten Beispielen von Spielen , die tatsächlich bereits erstaunliche kreative Tools sind , die speziell für VR entwickelt wurden, wo Sie formen, malen oder andere kreative Dinge machen können. Aus Sicht eines Schöpfers sind sowohl AR als auch VR äußerst interessante Bereiche, sind sowohl AR als auch VR und ich empfehle dringend beides selbst auszuprobieren, um die kreativen Möglichkeiten zu schätzen. Begleiten Sie mich also in den nächsten Videos, wenn Sie daran interessiert sind, zu sehen, wie Adobe Aero verwenden, um ein Augmented-Reality-Projekt zu erstellen. 32. Schlussbemerkung: Herzlichen Glückwunsch zum Abschluss dieses Kurses der Grafikdesign-Theorie-Serie. Ich hoffe, Sie fanden es nützlich und inspirierend. Vergessen Sie nicht, das Glossar der Begriffe PDF zu durchlaufen, alles zu überprüfen, was wir behandelt haben, und wenn Sie sich bereit fühlen, nehmen Sie am Quiz teil, um Ihr Wissen zu testen. Kommen Sie jederzeit zu den Referenzen auf den Millenial Boards zurück , die wir in diesem Kurs verwendet haben, um Ihnen zu helfen sich an die Dinge zu erinnern, über die wir gesprochen haben, oder definieren Sie Inspiration für Ihr nächstes Designprojekt . hatten das Gefühl, dass in diesem Kurs etwas fehlt oder wenn Sie Vorschläge haben , wie wir ihn verbessern können, senden Sie uns eine E-Mail an info unter der Aufgabe designer.com, und wir werden uns bei Ihnen melden, sobald möglich. Wir bedanken uns sehr für Ihren Beitrag und Ihre Hilfe. Jetzt ist es an der Zeit, dass Sie Ihr nächstes Thema auswählen und in einen anderen Kurs zur Grafikdesigntheorie eintauchen. Denken Sie daran, dass es keine richtige oder falsche Reihenfolge gibt, um diese Serie abzuschließen. Alle Regeln, die wir behandeln, sind gleichermaßen wichtig und alles hängt zusammen. Am wichtigsten ist es jedoch , diese Regeln gut zu verstehen und sie in Ihren Projekten anzuwenden. Ich bin sicher, dass Sie das Gelernte verwenden werden , um etwas Erstaunliches zu erschaffen. Und ich kann es kaum erwarten, es zu sehen.