Kreativität UX-/UI-Design Meisterschaft Mit Figma

1. Kurs-Einführung: Hallo Leute. Mein Name ist Ran SiblHH, ich bin XI-Designer, Konzeptkünstler, kreativer Programmierer und Grafikdesigner und vieles mehr Ich habe 20 Jahre Erfahrung in der Arbeit vor Ort mit vielen Ich habe diesen Kurs, den kreativen UHI Design Master with FIGMA, ins Leben gerufen , um Ihnen zu helfen Ihre Designideen in benutzerfreundliche digitale Standerlebnisse umzusetzen benutzerfreundliche digitale Standerlebnisse In diesem umfassenden Kurs gehen wir über die Grundlagen hinaus und führen Sie durch den gesamten Designprozess, vom ersten Konzept bis hin zum Sie werden Figma, das branchenführende Tool, beherrschen, während wir kreative Briefings, eingehende Recherchen, Wettbewerbsanalysen, Moodboards, Inhaltsstrategien und Navigationskarten behandeln eingehende Recherchen, Wettbewerbsanalysen, Moodboards, Inhaltsstrategien und Moodboards, Inhaltsstrategien Anschließend erlernen Sie praktische Fähigkeiten wie Drahtrahmengestaltung, Layoutdesign, Arbeit mit Typografie Blockieren von Inhalten und sogar Ready-Motion-Design und Interaktion Erfahren Sie, wie Sie effektiv Feedback erhalten und Ihre Arbeit souverän präsentieren können, und erstellen Sie einen soliden Styleguide für professionelle Konsistenz Um Ihr Lernen weiter zu verbessern, stelle ich Ihnen detaillierte HTML-Dateien für diesen Kurs zur Verfügung, die Ihnen helfen , möglichst viele Informationen zu erhalten, sowie Quizfragen, mit denen Sie Ihr Wissen bei jedem Schritt testen können zu erhalten, sowie Quizfragen, mit denen Sie Ihr Wissen bei jedem Schritt testen Ihr Wissen bei jedem Schritt Machen Sie sich bereit, Ihr kreatives Potenzial auszuschöpfen und entwerfen, die sich wirklich von der Masse abheben 2. Was mich beeinflusst: A Für Designer das Erkennen der Bedeutung von Einfluss über ihre eigenen Kreationen hinaus ihre eigenen Kreationen umfasst die riesige Landschaft vorhandener Beobachtung und Analyse der Arbeit anderer geht es nicht um Nachahmung, sondern darum, das grundlegende einflussreiche Prinzip zu erkennen , das diese Designs effektiv oder effektiv macht Durch die Dekonstruktion erfolgreicher Benutzeroberflächen kann ein Designer die subtilen Hinweise identifizieren Intuitive Muster und überzeugende Techniken , die das Benutzerverhalten steuern und es ihnen ermöglichen, diese Erkenntnisse zu verinnerlichen und sie auf ihre eigenen Projekte anzuwenden. Kritische und weniger effektive Designer decken Fallstricke in Bereichen auf, in denen Einfluss falsch angewendet oder übersehen wurde diskontinuierliche Lernen vom kollektiven Designbewusstsein fördert die Fähigkeit des Designers, bewusst und ethisch Einfluss auszuüben , was letztendlich zu wirkungsvolleren und nutzerzentrierteren Lösungen führt nutzerzentrierteren Schauen wir uns einige meiner Influencer an . Das Portfolio von Colin Moy ist ein gutes Beispiel, das man sich ansehen sollte. Ist aufgrund seiner hochinteraktiven und ansprechenden UX-Benutzeroberfläche etwas Besonderes hochinteraktiven und ansprechenden UX-Benutzeroberfläche Ein herausragendes Merkmal ist der kreative Einsatz von Augen, der seinen Namen in der Heldenabteilung buchstabiert Diese Augen sind nicht nur eine visuelle Überraschung sondern erfüllen auch einen funktionalen Zweck Klicken Sie in sie, aktivieren Sie im Hell- und Dunkelmodus Tuggle und lösen Sie eine Animation aus, bei der die Augen dem Besucher folgen Er lädt auf subtile Weise zur weiteren Erkundung der Stätte ein. Diese clevere Strategie kombiniert mit einem konsistenten Playpool-Stil, bei dem O in der Navigation wie zum Beispiel zu Portfolio und Kontakt anklickbar ist Portfolio und Kontakt , um weitere Informationen anzuzeigen, trägt zu einem einzigartigen und unvergesslichen Benutzererlebnis bei, das die Besucher bei der Stange hält und sie dazu anregt, tiefer in seine Arbeit einzutauchen Eine weitere Website von Justin Solly , das Design, zeichnet sich durch außergewöhnliche Interaktivität dynamische visuelle Mischung aus Ästhetik aus, die mit Auszeichnungen wie Website des Monats und Preisverleihung als Website des Tages ausgezeichnet wurde Monats und Preisverleihung als Website des Tages ausgezeichnet Die Website bietet faszinierende interaktive Animationen, einen interaktiven Header und WebGL, eine Mausinteraktion, die für ein äußerst ansprechendes und immersives Surferlebnis sorgt äußerst Das dynamische Zusammenspiel der Elemente sorgt dafür, dass der Benutzer aktiv einbezogen wird Es nutzt das Brutal Style-Menü mit der spielerischen Wendung, wenn der Mauszeiger darüber bewegt wird Dieses Menü enthält Projektzusammenfassungen, begleitet von einem markanten Windows-Verzögerungsbildschirm, der der Navigation ein einprägsames und interaktives Element verleiht Das Design beinhaltet eine kontinuierliche Weiterentwicklung der Farben, Typografie und Animation, was zu einem Spielerlebnis führt, man gerne in einem Spiel spielt Dies wird durch einzigartige Seitenübergänge und horizontale Fallstudien, die einen neuen Ansatz für die Anzeige von Inhalten bieten , noch weiter verbessert einzigartige Seitenübergänge und horizontale Fallstudien einen neuen Ansatz für die Anzeige von Inhalten bieten , Eine weitere Website, ebenfalls von Carlos Carr wurde mit Schwerpunkt auf dynamischen Inhalten und Designsystemen erstellt und zeigt ein fortgeschrittenes Verständnis dafür, wie digitale Erlebnisse anpassen und weiterentwickeln können Dies deutet auf einen innovativen Ansatz Webentwicklung und -gestaltung hin interaktives Archiv, Die Website löst sich von traditionellen Portfoliostrukturen und fungiert als in dem jedes Werk als separate Einheit behandelt wird anstatt thematisch gruppiert zu werden Die Navigation erfolgt auf einzigartige Weise über die Suchleiste und spezifische Tags, die die Art und Weise, wie Benutzer mit dem Portfolio interagieren, grundlegend neu definieren , indem sie die übliche Navigation auf den Die Verwendung von Plattformen wie Webflow und Spline deutet auf starke Intersas und ein ausgeklügeltes Grafik- und Bewegungsdesign ausgeklügeltes Diese Kombination führt wahrscheinlich zu einem visuell reichhaltigen und sehr ansprechenden Erlebnis Website, eine weitere interessante Website der Agentur Milly, Design der Website, eine weitere interessante Website der Agentur Milly, gilt aufgrund ihrer hochgradig interaktiven und einzigartigen Benutzererfahrung, die mit Auszeichnungen wie Awards Mobile Excellence und Hornble Mansion ausgezeichnet wurde, als besonders aufgrund ihrer hochgradig interaktiven und einzigartigen Benutzererfahrung, die mit Auszeichnungen wie Awards Mobile Excellence und Hornble Mansion ausgezeichnet wurde , als Und als Beispiel für zehn Standard-Portfolios gehören zu den Webflows . Die Website bietet ein unverwechselbares und ansprechendes Erlebnis, durch einen Röntgenmodus und einen umfangreichen benutzerdefinierten Code hervorgehoben wird. Dieses Element trägt zu einer dynamischen und unvergesslichen Interaktion für Besucher bei. Es klingt von Plattformen wie Worte unterstreicht die hohe Qualität seines Designs und seiner Entwicklung und signalisiert ein innovatives und wirkungsvolles signalisiert ein innovatives und Das Design beinhaltet durchweg interessante Layouts und subtile benutzerdefinierte Details, was auf einen sorgfältigen und kreativen Ansatz hindeutet auf einen sorgfältigen und kreativen Ansatz hindeutet , der über die konventionelle Webseitenstruktur hinausgeht. Dies ist eine meiner Lieblingsseiten, die Flakes heißt. Es ist hochgelobt und gilt aufgrund seiner innovativen Mischung aus Minimalismus und Maximalismus, außergewöhnlicher Interaktivität und ausgeklügelter technischer Ausführung als etwas Besonderes aufgrund seiner innovativen Mischung aus Minimalismus und Maximalismus, außergewöhnlicher Interaktivität und ausgeklügelter außergewöhnlicher Interaktivität . Es wurde mehrfach ausgezeichnet und von einer renommierten Designplattform ausgezeichnet von einer renommierten Designplattform Die Website balanciert meisterhaft ein minimalistisches Fundament mit maximalistischen Elementen Es verwendet eine große animierte variable Schrift, eine lebendige und dennoch unkonventionelle Farbpalette und dann, um Details nachzubilden, ein schnelles, reichhaltiges visuelles Erlebnis, ohne dass es überladen wirkt eine lebendige und dennoch unkonventionelle Farbpalette und dann, um Details nachzubilden, ein schnelles, reichhaltiges visuelles Erlebnis, ohne dass es überladen wirkt. Es bietet umfangreiche Scroll-Animationen, komplexe Drei-D-Elemente, darunter ein anspruchsvolles Drei-D-Logo, und einen reibungslosen Übergang, der auf modernen Technologien wie nm Dot Gs, Vlt und Web DO basiert modernen Technologien wie nm Dot Gs, komplexe Drei-D-Elemente, darunter ein anspruchsvolles Drei-D-Logo, und einen reibungslosen Übergang, der auf modernen Technologien wie nm Dot Gs, Vlt und Web DO basiert. Unterinteraktionen wie die Umwandlung des Cursors in eine Lichtquelle auf einem Desktop verbessern die Benutzerinteraktion zusätzlich hebt sich von herkömmlichen mehrseitigen Menüs ab und Play.com hebt sich von herkömmlichen mehrseitigen Menüs ab und bietet eine nahtlose Bedienung auf einer einzigen Seite. Projekte werden im Concess-Screencast präsentiert, sodass Besucher die Arbeit schnell verstehen können, ohne sich von übermäßigen Inhalten überwältigen zu lassen, wobei der Inhalten überwältigen zu lassen, wobei Schwerpunkt auf Wirkung und Einfachheit liegt. Eines meiner beiden Lieblingsbilder ist ein seltsames Pixel. Auf der Website wurde der Einsatz von Animationen zur Schaffung eines visuell beeindruckenden und innovativen Designs stark betont Animationen zur Schaffung eines visuell . Dieser Fokus auf Bewegung verbessert das Engagement und erweitert das Benutzererlebnis um dynamische Ebenen. Trench-Pixeln wird Farbe kreativ eingesetzt. Dabei handelt es sich häufig um kontrastreiche Schemata mit lebendigen Akzenten, wie z. B. einem Hauch von Gelb auf weißem und schwarzem Grundton Dies wird mit dem strategischen Einsatz großer, fett gedruckter Typografie kombiniert, um eine starke Aussage zu erzielen und die visuelle Identität zu verbessern Das Design schafft oft ein Gleichgewicht zwischen Minimalismus und Wirkung Es besteht aus klaren Linien, gebrochenen Layouts und einer begrenzten Farbpalette, um eine maximale Wirkung zu erzielen Französische Pixel konzentrieren sich darauf, ein digitales Erlebnis zu schaffen, das über reine Funktionalität hinausgeht jedem Projekt Abwechslung und Emotionen hervorruft Ihr Portfolio zeigt vielfältige Arbeiten darunter Web-Apps und E-Commerce-Design. Das Cursor-Design ist eines meiner besten Elemente dieser Website Es macht die Interaktivität sehr schön und sehr ansprechend Dieses Element trägt zusammen zu seltsamen Pixelwiederholungen bei und sorgt so für ein topaktuelles und einprägsames Webdesign Unser letzter auf der Liste ist Dennis Snellenberg. Dennis wurde mehrfach ausgezeichnet, unter anderem wurde Rona Bal erwähnt und Diese Anerkennung unterstreicht die hohe Qualität, Innovation und Wirkung des Designs und der dieser Website Seine Designs zeichnen sich durch subtile und dennoch raffinierte Nekroanimationen, sanfte Übergänge und ein ansprechendes interaktives Element Diese Details tragen wesentlich zur polierten und immersiven Benutzererfahrung bei und sorgen dafür die Website dynamisch und responsiv anfühlt Als freiberuflicher Designer und Entwickler Dennis Kraft eine skalierbare Website von Scratch entwickelt, die perfekt zum Design passt Dieser ganzheitliche Ansatz stellt sicher, dass Funktionalität und Ästhetik perfekt integriert sind, was zu einem hocheffektiven und großartigen Projekt Seine Kenntnisse in modernen Webentwicklungstools wie Webflow, HRB CMS und Animationsbibliotheken wie Framer Motion und GSAP ermöglichen es ihm, und Animationsbibliotheken wie Framer Motion und GSAP auf visuell reichhaltige und hochinteraktive Erlebnisse zu verzichten visuell reichhaltige und hochinteraktive Erlebnisse die die Grenzen des Im Wesentlichen ist Dennis' Website etwas Besonderes, weil sie eine harmonische Verschmelzung von ästhetischen, brillanten, technischen Fähigkeiten und einem tiefen Verständnis für Nutzer und Produktion verkörpert , die alle durch die Anerkennung der Branche bestätigt Nutzer Also wie ihr, Leute, das ist die Summe Sie sollten immer die Personen finden, die Sie beeinflussen, und versuchen , sich alles Neue auf dem Gebiet auf dem Laufenden zu halten. diese Weise können Sie sicherstellen, dass Sie als Designer auf einer Seite sind. 3. Weitere Informationen zu Creative Brief: A Das Design-Briefing ist ein wichtiges Dokument für unseren Prozess. Denn damit werden wir bestimmen, was die Ziele des Projekts sind. Es ist wichtig, vom Kunden so viele Informationen wie diese Informationen zu sammeln . Sie helfen uns dabei, das Ziel unserer Produktdesign-Möglichkeit zu definieren und die Risiken zu definieren, die wir mit unserem Design eingehen können Für unser Projekt werden wir eine Marke TikoCden kreieren. Wir werden das Briefing, das wir vom Kunden erhalten, sehr gut lesen Briefing, das wir vom Kunden erhalten und alles verstehen, was er für sein Design braucht Wie Sie hier alle Informationen gesehen haben, wie zum Beispiel den Markenkern, sind die Ziele, eine visuell ansprechende, immersive Website zu schaffen , die die Identität von TKUBND verkörpert. Sie sehen auch die Zielgruppe, die Designrichtung, die Farbpalette, die Typografie und all die Elemente, die wir für das Dies ist eine andere Art von kreativem Briefing, das ich selbst erstellt habe. Dies ist Ihr eigenes kreatives Briefing, das Sie an Ihren Kunden senden können , um sich selbst oder Ihre Arbeit zu repräsentieren. Es ist nicht notwendig, dies zu tun, aber es ist etwas, das sie in Betracht ziehen sollten. Wie Sie gesehen haben, haben wir Antleduction, ein Fragebeispiel wie: Warum sollten Sie uns einstellen? Der Designprozess der Website, das, was wir tun, zum Beispiel das Verständnis der Marke, des Konzepts, der Überprüfung und der Überarbeitung, was unsere Kunden zu sagen haben, wenn Sie bereits Kundenfeedback zu Ihren früheren Arbeiten haben, die Preisgestaltung für jede Ihrer Dies ist ein weiterer kreativer Brief, den ich auch mit der HTML-Datei selbst erstellt habe auch mit der HTML-Datei selbst erstellt Sie können es sehen, es ist detaillierter. Es enthält alle Elemente, die für ein kreatives Briefing erforderlich sind, um es zu verstehen. Die Website, die Zielgruppe, die Markenidentität, die inhaltlichen Anforderungen, die technischen Spezifikationen Zeitplan und das Lieferdatum Sie sehen, dass alle notwendigen Fragen gestellt werden können. Wenn Sie ein Briefing von Ihrem Kunden erhalten haben und keine Frage haben, die beantwortet werden muss, können Sie ein weiteres Briefing von Ihnen erstellen und es an den Kunden senden , alle Fragen und die Sie benötigen, um weitere Informationen von ihm einzuholen. Was ist der Hauptzweck Ihrer Website für Bekleidungsmarken? Was sind die drei größten Wettbewerber in Ihrem Marktsegment? Was unterscheidet Ihre Bekleidungsmarke von Mitbewerbern? Wer ist Ihre Hauptzielgruppe, Alter, Geschlecht, Interessen und Einkommensniveau? Hier wird er einspringen. Wie Sie gesehen haben, habe ich gerade eine HTML-Datei erstellt, aber das sollte eine PDF-Datei sein, damit der Kunde sie ausfüllen kann. Inhaltliche Anforderung ist hier, der Integrationsbedarf. Sie senden nur die Frage, die Sie nicht im Kreativ-Briefing von Ihrem Kunden erhalten haben. Stellen Sie nicht dieselben Antworten, die er Ihnen bereits gegeben hat. Nachdem Sie das Briefing gelesen haben, sollten Sie sich immer an der Zielsetzung des Kunden orientieren. Anschließend setzen Sie die Kommunikation mit dem Kunden fort, indem Sie Konzepte senden und sein eigenes Feedback einholen. Kurz gesagt, das Briefing ist der Weg , um die richtige Frage zu stellen. Wir müssen zuerst verstehen, wer wir als Designer sind und wer unser Kunde ist. Wir sind Designer für den Benutzer oder wir entwerfen für uns selbst. Dies ist eine wichtige Frage, die Sie sich bei jedem Projekt stellen sollten. Sobald wir verstanden haben, wer wir als Designer für dieses Projekt sind , müssen wir wissen, dass der Kunde uns erwartet, um seine Ziele und Vorgaben zu erreichen. Diese Ziele können darin bestehen, ein Produkt zu verkaufen , in Ihrem Unternehmen zu wachsen, neue Mitarbeiter einzustellen, sich bekannt zu machen oder Ihre Dienstleistungen zu erläutern. Und all dies können sogar auf derselben informativen Website sein. Unser Ziel als Designer ist es also , diese Ziele zu erreichen, und dafür müssen wir uns an der Marke, ihren Werten und ihrer Art der Kommunikation ausrichten . Kehren wir zum Briefing zurück. Bei dem Briefing handelt es sich um ein Dokument, mit dem Kundeninformationen eingeholt werden sollen. Diese Informationen werden verwendet, um das Projekt, die Marke, für die wir arbeiten, die Branche, in der die Marke ansässig ist, und die mit dem Projekt verbundenen Produkte zu verstehen die Marke, für die wir arbeiten, die Branche, in der die Marke ansässig ist, . Dies sind einige der Fragen, die wir in der Kurzfassung stellen können. Was hoffen Sie mit der Website zu erreichen? Was ist die Geschichte hinter der Marke? Was ist dein Unterschied? Was ist Ihre Position auf dem Markt? Gibt es Einschränkungen in Bezug auf Budget und Zeit oder nicht? Was ist Ihre Zielgruppe? Das haben wir schon gesehen. Was sind Ihre Server und Produkte? Die Antwort auf unsere Frage, die andere Weise kommen kann. Wir können sie durch ein Meeting, einen Videoanruf, ein schriftliches Dokument oder sogar in einem Markenhandbuch selbst erhalten einen Videoanruf, ein schriftliches Dokument . Möglicherweise gibt es Antworten auf unsere Fragen. Wir müssen wissen, dass nicht alle Antworten erster Hand kommen werden. Deshalb ist es wichtig , die richtige Frage zu stellen. Dadurch erhalten wir relevante Informationen für unser Produkt. Einige Empfehlungen sollten Sie beachten wir eine kurze Phase durchführen und die beste Antwort von den Kunden erhalten möchten, kann uns die Frage, die wir stellen, verschiedene kreative Möglichkeiten bieten . Wenn wir fragen, erwarten wir wirklich , dass wir den Aktionsbereich unseres Projekts erweitern Wir wollen es nicht einschränken. Scheuen Sie sich nicht, alle Fragen zu stellen, wir geben uns wertvolle Informationen , um unser Produkt zu entwickeln. Dies sind einige Fragen , die Sie auch stellen können , um weitere Informationen von Ihrem Kunden zu erhalten. Was hat sie inspiriert? Wenn die Marke eine Person wäre, wie würde sie sich verhalten? Haben sie einen Stil , der sie identifiziert? Dies ist unsere erste Phase, in der wir unser Produkt auf den Markt bringen. Es ist wichtig, das Kreativ-Briefing sehr gut zu lesen, die wichtigsten Elemente und all die Dinge zu berücksichtigen, die Sie dazu bringen , das Ziel Ihres Kunden in Einklang zu bringen. 4. Lernen Forschung Und Wettbewerb: I Der Prozess der Untersuchung und Entdeckung ist für die Durchführung eines erfolgreichen Projekts von entscheidender Bedeutung, da er uns viele Informationen über den Sektor gibt , in dem wir das Projekt entwickeln werden . Es zeigt uns nicht nur kreative Möglichkeiten, sondern besteht auch das Risiko, dass das Projekt unter anderem bietet. Ich denke, das ist einer der wichtigsten Prozesse ich als Designer durchführe. Sehen wir uns das etwas genauer an. In diesem Schritt führen wir unseren eigenen Untersuchungsprozess durch, unseren eigenen Untersuchungsprozess um relevante Informationen, Chancen und Risiken zu ermitteln , die das Projekt möglicherweise Es ist wichtig, dass wir uns in diesem Prozess mit dem Kunden abstimmen , um sicherzustellen, dass wir das Projekt genauso verstehen, wie das Ziel, das für uns als Design erreicht werden soll, und eine informative Website einer Marke TCO zu erstellen, auf der die Leute auf freundliche und interessante Weise die erlesene Kleidungskollektion erkunden können erkunden freundliche und interessante Weise die erlesene Kleidungskollektion Gelegenheit zur Gestaltung. Wir werden verschiedene Effekte auf Bilder untersuchen , um ein interaktiveres Erlebnis zu schaffen. Wir möchten auch interessante Möglichkeiten zum Filtern des Projekts vorstellen , die sich von der traditionellen Kategorie unterscheiden. Technologieempfehlung: Wir benötigen einen Content Manager, Bildoptimierung, eine für mobile Geräte optimierte Website, Animationen und Übergänge, die für mobile Geräte konzipiert sind. Überlegungen zur Marke. Ein Großteil des grafischen Vorschlags der Website wird auf dem Bild basieren, mit dem das Portfolio erstellt wurde. Auf der anderen Seite stehen wir vor der Herausforderung, die Aspekte der Marke zu kommunizieren. Beobachtung über den Benutzer. Es handelt sich um junge Leute mit Zugang zu Highspeed-Internet , um auf der Website zu navigieren. Ein Großteil des Traffics, der die Seite erreichen wird, wird über Instagram abgewickelt. Aus diesem Grund werden mehr als 50% der Nutzer die mobile Version der Website sehen. Die Leute, die die Website besuchen werden , sind Menschen mit Sensibilität für Design, und deshalb werden wir uns sehr um die Details der Seite kümmern. Das Projekt kann auch Risiken beinhalten, die berücksichtigt werden müssen. In diesem Fall können die Navigationen und die grundlegenden Funktionen der Seite und die grundlegenden Funktionen der Seite schwierig zu verwenden sein Hohe visuelle Belastung der Anzahl der Bilder, Mangel an Informationen über die Projektseite, sobald die Website bereits live ist Was sind die Funktionen der Navigationskarte? Definieren Sie den letzten Abschnitt, aus dem die Website bestehen soll. Verstehen Sie die Navigationsabläufe zwischen den Abschnitten, aus denen die Website besteht. Machen Sie sich mit der Art von Inhalten vertraut, die jeder Abschnitt enthalten kann. Zu Beginn müssen wir uns einige andere Wettbewerber ansehen, die ein hervorragendes Website-Design haben. Wie Sie hier sehen können, wie diese Website von Gucci ist sie wie diese Website von Gucci sehr reich an Bildern und von sehr guter Qualität. Die Erfahrung ist so einfach und minimalistisch. Eine der wichtigsten Websites, die es zu berücksichtigen gilt, ist Zara. Die Seite ist auch so einfach. Es ist einfach zu navigieren und leicht zu verstehen. Sie sehen die Struktur der Website, auf der Sie alle erforderlichen Informationen finden. Ein wichtiger Schritt, den ich immer mache, ist auch mir die Bewertungen der einzelnen Websites anzusehen, die ich verwende. Hier erfahren Sie mehr über die Vor - und Nachteile dieser Website. Ich habe die negativen Bewertungen der Leute gut gelesen, um zu verstehen, welche Fehler ich bei der Gestaltung meiner Website nicht machen sollte. In meinem Prozess ist es sehr wichtig , es mir anzusehen und sehr gut zu studieren. Ich habe all die schlechten und die guten Kommentare gelesen und verstehe, was die Schwäche dieser Seite ist. Wie Sie hier sehen, können wir in einem Medium eine Fallstudie der Zara-Website lesen, in der es darum geht, wie Designästhetik die Kaufabsicht beeinflussen kann Wie Sie hier sehen können, habe ich ein sehr detailliertes PDF über die Website Wie Sie sehen können, ist die Größe der Größe über den Stil und die Geschwindigkeit der Website das Risiko einer Konversion Sie sollten also immer ein Gleichgewicht zwischen diesen beiden Aspekten finden , sowohl den Auswirkungen von Einbußen Benutzerfreundlichkeit und Barrierefreiheit für das Design Dies ist, wie bereits erwähnt, sehr wichtig, dass die Website ein großartiges Design hat, aber auch sehr einfach zu navigieren und sehr einfach zu lesen ist. Navigationshürden stören den Standard-E-Commerce-Fluss . Effektive Suchfunktionen untergraben Fehlende Kundenrezensionen mindern das Vertrauen und stören das Einkaufserlebnis Das ist also etwas, das Sie in Betracht ziehen können. Wenn es sich bei Ihrer Website um E-Commerce handelt, ist es sehr effektiv, einen Abschnitt für die Bewertungen Ihrer Kunden einzurichten. Hier habe ich eine HTML-Datei, die ich für Sie erstellt habe , um mehr über die unterstützenden Elemente und die Verbesserung Ihrer Website zu erfahren . Hier können Sie all die Dinge verstehen, die immer beachten müssen, um eine großartige Website zu erstellen. Das Farbschema, die Typografie, die Bilder und Grafiken, die Typografie-Richtlinien, die Barrierefreiheit, das Beispiel Barrierefreiheit, Die Bereiche Sicherheit und Wartung nicht für Sie als Designer bestimmt, sondern Sie können all diese Informationen hier lesen, um mehr über das Design der Website zu erfahren mehr über das Design der Website und zu erfahren, wie es effektiv sein sollte. Wir beschäftigen uns mit jedem dieser Elemente und verstehen es sehr gut. Jeder Schritt, den Sie unternehmen, bevor Sie mit Ihrem Design beginnen, gibt Ihnen eine Roadmap und erleichtert Ihnen die Arbeit erheblich Endlich die Tools, die ich für die Navigationskarte empfehle: Mero Whimsico und Mero Whimsico Es ist wichtig zu verstehen, dass die Navigationskarte der Ausgangspunkt für die Organisation unseres Projekts ist Navigationskarte der Ausgangspunkt für die Organisation unseres Projekts ist. In der nächsten Lektion werden wir mehr erfahren. 5. Sammeln von Referenzen für Moodboard: In dieser Liste werden wir über die Suche nach Inspiration und Referenzen für unser Projekt sprechen Inspiration und Referenzen für unser Projekt Dies ist ein sehr wichtiger Schritt, bevor Sie beginnen, der es uns ermöglicht, verschiedene Ideen zu prüfen , um unser Projekt interessanter zu gestalten Inspiration kann von überall kommen, aber mit einem klaren Prozess wird es viel einfacher sein, interessante Ideen zu finden , die wir später in unserem Produkt verwenden können. Bei diesem Designprozess achten wir darauf, das Moodboard zu erstellen, auf dem wir alle Referenzen und Inspirationen sammeln alle Referenzen und Inspirationen , die wir für weitere Projekte im Internet, in Büchern oder sogar in Kunstausstellungen finden . Auf diese Weise stellen wir sicher, dass wir etwas schaffen, das kommuniziert, was wir wollen , und das sich von anderen privaten Produkten abhebt. Um mit der Suche nach Referenzen zu beginnen, suchen wir gerne nach Projekten oder Unternehmen, die zur gleichen Kategorie gehören wie unser Kunde. Wenn unser Kunde beispielsweise ein Unternehmen ist , das Brillen herstellt, können wir nach einem ähnlichen Unternehmen in der Region suchen. Unternehmen, die direkte Konkurrenten unserer Kunden sind oder Unternehmen an anderen Orten , die in dieselbe Kategorie fallen. Auf diese Weise stellen wir sicher, dass wir wissen welche interessanten Ideen in der Kategorie enthalten sind, wie andere Unternehmen kommunizieren und was wir vermeiden sollten. Um sicherzustellen, dass wir ein Projekt erstellen , das sich von den anderen abhebt. Danach können wir unsere Suche auf Kategorien ausweiten , die unserem Projekt ähneln. Zum Beispiel wird die Marke Tiko eine Website sein. Die Verwendung von Bildern wird sehr relevant sein. Daher können wir nach einem Projekt suchen, in dem Bilder verwendet werden. Zum Beispiel in der Architektur, wo wir jeden Tag nach einem Projekt suchen , das uns interessiert. Dann schauen wir uns vielleicht ein Projekt aus einer anderen Kategorie oder Branche an. Lass uns Ideen finden. Wie Sie hier sehen können, heißt diese Website Word. Sie können einige Beispiele finden, die Sie durchgehen und viele Ideen finden können. Dies ist eine der Websites, die Bilder für ihre eigene Erstellung verwenden. Es gibt viele von ihnen, die Sie überall überprüfen können. Das ist nicht in unserer Kategorie, aber ich fand es wichtig, es mir anzusehen , weil ich eine neue kreative ID wissen möchte. Schauen wir uns hier eines der Beispiele an. Wie Sie gesehen haben, verwendet diese Website ein schönes Bildlayout. Es kann eine Idee für unsere Website sein. Also werde ich mehr darüber erfahren, wie es funktioniert und wie es navigiert. Wie Sie gesehen haben, ist die Website sehr schön. Schauen Sie sich diese Websites an, um einige Ideen zum Beispiel für Interaktivität zu erhalten einige Ideen zum Beispiel für Interaktivität zu Hier ist die Cursor-Interaktion sehr schön, da beim Ziehen viele Bilder angezeigt werden Ein weiterer Stil, der ebenfalls berücksichtigt werden sollte, ist der Stil von Schwarz und Weiß Es hat viel Grafik, aber es geht hauptsächlich um die geometrischen Formen und die Typografie Die Interaktivität ist etwas Besonderes, das ich noch nie gesehen wir hier klicken, sehen Sie, wie das quadratische Element zusammen mit dem Cursor erscheint Der typografische Stil und die Linien machen es so besonders und unterscheiden sich stark von anderen Websites Dies können wir für unsere Website in Betracht ziehen. Wir können es auf andere Weise erstellen. Ich glaube sowieso nicht, dass ich mich für so etwas entscheiden werde , weil ich nicht einmal mehr Design über Bekleidungsmarken machen kann , aber mit einem anderen Hintergrund. Ich werde zum Beispiel eine urbane Marke im Switch-Stil machen, ich kann mir so etwas vorstellen. Awa.com ist auch eine großartige Inspirationsquelle. Diese Website mit viel Erfahrung und Anerkennung, die seit vielen Jahren digitale Projekte veröffentlicht und belohnt Ich kann diese Website nur empfehlen, um digitale Projekte zu finden, die etwas experimenteller sind und aus einem traditionellen Website-Design herauskommen Eine weitere Seite, die ich auch sehr wichtig fand, ist Ana. Es handelt sich nicht um eine Website, die sich auf Design oder ein digitales Projekt konzentriert , unabhängig davon, ob diese Website es Benutzern ermöglicht, Dashboards zu erstellen und Bilder und Links zu einem beliebigen Thema hochzuladen Ähnlich wie Pintors und wird heutzutage immer beliebter Es gibt viele Kategorien, die du durchgehen und professionell lernen kannst. Wie dieses eine Beispiel für Illustration im Allgemeinen hat es ein wunderschönes Design, das Sie bei Ihren Arbeiten berücksichtigen können. Auf dieser göttlichen Website finden Sie ständig eine neue Webseite, auf der Sie nach neuen Referenzen und Inspirationen suchen können neuen Referenzen und Inspirationen suchen Weil wir neue Ideen leicht in Bewegung und Animation sehen neue Ideen leicht in Bewegung und Animation Es gibt viele Referenzen , die Sie überprüfen und Ihnen großartige Ideen geben können. Wie hier, wenn ich auf das Beispiel klicke, gib mir alle Informationen für das Design der Website, die Elemente, die sie in ihrem Website-Design verwenden, wie den Fonk, das Framework, das Hosting, den Stil und all das Und unten finden Sie auch eine andere ähnliche Seite. Sie weiter nach, lernen Sie und sammeln Sie weitere Informationen und Referenzen, bis Sie die Dinge gefunden haben , die zu der Idee in Ihrem Kopf passen. Load More ist sehr interessant, weil es sich auf Projekte für mobile Geräte konzentriert und einen sehr experimentellen Designansatz verfolgt Es scheint wichtig , Kategorien für unsere Referenzen zu erstellen , da sie auf diese Weise beim Entwerfen viel nützlicher sind Zum Beispiel können wir für unser Projekt die Entscheidung bestimmen, die wir in Bezug auf die Typografie treffen Wie Sie in diesem Beispiel hier sehen können, werde ich mich für etwas wie Son Ser entscheiden Es sah modern und sauber aus. Ich kann auch eine andere Art von Typografie in Betracht ziehen. Diese hat mehr geometrische Formen an den Kanten. Der Tippfehler ist sehr schön, aber ich glaube nicht, dass er nicht Markenidentität passt Das ist eine sehr schöne und saubere Typografie, die ich auch berücksichtigen kann Hier werfen wir einen Blick auf einige der Farben, die wir auf unserer Website verwenden können Die Farben sind sehr interessant. Ich möchte auf dieser Seite nicht mehr als fünf Farben verwenden, und ich kann für jede Farbe einige Abstufungen wählen. Diese Farbe ist genau hier, die rote Koralle und der grüne Wald, sie sehen sehr schön aus. Ich denke schon, dass ich das für mein Produkt in Betracht ziehen könnte. Hier können wir uns ein wenig über das Zusammenspiel des Layouts der Bilder informieren. Das ist sehr wichtig und gibt mir schon die Idee des Parallax-Effekts Wie wir den Inhalt filtern können, den wir auf unserer Website haben Wir können den Inhalt nach Farbe oder Kategorie filtern. Ich habe auch Ideen gefunden, für die ich mich entscheiden könnte und vielleicht auch nicht, ich bin mir immer noch nicht sicher. Hier lege ich alle Referenzen für mein Website-Design zur Überprüfung nach Kategorien dar. Ich zähle nur den Tippfehler, die Farben, die Bilder, die Grafiken, die Links und die Interaktion All diese Elemente werden als Entwurf einer Roadmap für Ich werde immer genau hier nach Ideen suchen und die Referenz erneut aufrufen, um meiner Fantasie freien Lauf zu Nun, das ist alles als Referenz. Wir sehen, wie man ein Moodboard erstellt und wie man anfängt, über Ideen nachzudenken. Lass uns in der nächsten Lektion weitermachen. 6. Weitere Informationen Zu Strategien Und Architektur: I Strategie und Architektur, das ist der Schlüssel zum Verständnis der Inhalte, die wir auf unserer Website haben. Aus diesem Grund werden wir es klar organisieren , damit unsere Nutzer es gut konsumieren können. Zwei Disziplinen sind für diesen Inhalt verantwortlich, die Inhaltsstrategie und die Informationsarchitektur Deshalb wollen wir ein wenig über sie sprechen. Lass uns jetzt anfangen. Um sie zu verstehen, müssen wir wissen, dass jedes dieser Probleme seinerseits gelöst wird, nämlich die Inhaltsstrategie. Also die Frage des Inhalts sollten wir für die Website entwerfen? Ein Tipp, den Sie bei der Inhaltsstrategie beachten sollten . Als Designer müssen wir den Kunden so weit wie möglich entlasten Das bedeutet Unterstützung und den Kunden mit den Inhalten. Oft kennt unser Kunde unser Produkt oder unsere Dienstleistung sehr gut, aber was meistens passiert, ist, dass Sie nicht die Zeit haben , sie speziell für uns und Ihre Website zu kündigen . Aus diesem Grund werden wir hier als Designer Inhalte eingeben und bewerten , um uns den Einstieg zu erleichtern und unserem Projekt Interaktion zu verleihen Wir werden einen ersten Inhalt erstellen , der Platzhalter ist, sodass wir später ein Gespräch mit unserem Kunden Und wir können es zusammen mit ihm verfeinern. Die Informationsarchitektur hat die Frage gelöst, wie sollten wir den Inhalt der Website strukturieren? Um mit der Phase der Inhaltsstrategie, der Informationsarchitektur, zu beginnen Informationsarchitektur, müssen wir unser Projekt sehr gut verstehen. Aus diesem Grund haben wir eine Forschungsphase durchgeführt. Diese Phase hat uns alle Werkzeuge an die Hand gegeben, um den Zweck zu verstehen und unser Projekt richtig zu strukturieren. Jetzt, da wir unser Projekt verstanden haben, ist es an der Zeit, unsere Inhalte vorzuschlagen Wir können das auf zwei Arten tun. Wir können eine mögliche Liste besprechen. Dann stellen wir uns vor, was die Website enthalten könnte. Zunächst haben wir ein Beispiel dafür, was unsere Website optional enthalten kann. Es kann ein Zuhause mit Lookbook, Shop und Karte haben. Das ist, wenn es E-Commerce ist. Aber für unsere Website brauchen wir nur die Startseite über Kontakt und Support M in Betracht zu ziehen . Um zu beginnen, werde ich gleich hier aufgeschlossen sein. Ich werde eine Architektur für meine Website erstellen. Die Elemente, die meine Website möglicherweise benötigt, sind Home, Kontakt, Look Book und Support. Ich füge ein weiteres Thema hinzu, vielleicht speichere ich Filter für den Heimbedarf. Umgekehrte Folie folgt uns ein anderes Thema für den Kontakt, die E-Mail und die Nummer. Ich werde ein weiteres hinzufügen, das sich mit uns befasst, und es wird zwei Unterthemen haben, nämlich Teamgespräche und Veröffentlichung Ich kann auch Dienste hinzufügen. All dieses Element kann in einer der beiden Optionen enthalten sein. Beispiel für AI-Agenten für Support und Telefonsupport. In diesem Geschäft gibt es Sammelstücke, die Zahlungsmethoden und den Preis. Kann auch Maße haben Nun, was das Buch angeht, sollte es ein Layout haben. Ich sollte Sammlung haben, und auch Bilder, Bilder, Fotografie. Wie wir hier gesehen haben, haben wir in jedem unserer Themen ein Unterthema Nun, das ist auch, was ich selbst mit einem HTML-Code über eine Architektur mit Notizen erstellt habe einem HTML-Code über eine Architektur mit Notizen Wie ihr seht, hat jedes auch ein Unterthema, wie zum Beispiel: Eigenheimportfolio, Filter, Projekte folgen uns der Projektphase kann es sich Fallstudien über uns handeln, es kann ein Gespräch, Veröffentlichung im Team, Texte, Dienstleistungen und auch wir haben den Kontakt Dies ist die Haupt-Hub-Architektur meiner Website. Ich kann viele Elemente ändern, wenn ich will. Eine weitere Datei, die ich ebenfalls erstellt habe, kann Ihnen bei Ihrer Arbeit helfen. Es geht um die Architektur. Wie Sie sehen, hat es informative Informationen. In jedem Layout, auf das Sie klicken, wird es so skaliert, dass es sehr einfach mit allen Informationen, die Sie hier haben, übersichtlich dargestellt werden kann . Das wäre sehr hilfreich, um zu verstehen, wie Sie Ihre eigene Website erstellen können. Diese Datei können Sie in jedem Projekt, das Sie gerade durchführen, bei sich haben . Ich gebe dir hier die Möglichkeit, die Farbe zu ändern und mehr Layout und mehr Informationen hinzuzufügen. Wie Sie sehen, kann ich ein neues auswählen oder erstellen. Dieses fand ich für jedes meiner Projekte sehr nützlich. Ich habe alle Informationen und Ideen, die ich brauche , um sie mir vorzulegen, bevor ich mit meinem Design beginne. Versuchen Sie es zu benutzen, es wird für Sie sehr hilfreich sein. Wie ihr gesehen habt, müssen wir, um unser Projekt zu beenden, viele Prozesse durchlaufen bevor wir überhaupt mit dem Design beginnen. Wir beginnen mit der kreativen Spezies. Wir haben recherchiert, Referenzen gesammelt und die Architektur und die Strategie vorbereitet. Und jeder dieser Prozesse fand ich bei dieser Methode sehr wichtig Wir stellen die Effektivität Ihres Entwurfs sicher. 7. Weitere Informationen zu WireFraming: Der Wire-Framing-Prozess ist wichtig, um uns mit unserem Kunden über die Struktur und Navigation unserer Website abzustimmen unserem Kunden über die Struktur und Navigation unserer Darüber hinaus ist es der Ausgangspunkt um kreative Lösungen zu finden, Probleme, die oft auf langweilige Weise gelöst werden Lassen Sie uns zunächst unseren visuellen Vorschlag erstellen. Wireframes sind sehr allgemeine Schemata, bei denen wir zeigen, wie wir den Inhalt auf jeder Seite organisieren werden den Inhalt auf jeder Seite organisieren Als erstes werden wir die Zeichenfläche erstellen. Wir können alle verfügbaren Größenoptionen sehen. Ich werde den Desktop-Computer wählen. Wir haben schon den Arbeitstisch. Ich werde die Größe ein wenig ändern , um das Verhältnis ein wenig zu verbessern , und wir werden es umbenennen. Jetzt kann ich die Farbe auf Weiß ändern. Dann geben wir den Namen des Logos ein. Wenn Sie ein Logo haben, das Sie bereits erstellen, können Sie es anstelle des Tikkunamens verwenden Das ist nur ein Beispiel. Jetzt werden wir alle anderen Optionen für die Struktur unserer Website beenden . Kontakt über uns. Kopieren und einfügen. Dann Look Book. Dann ordnen wir sie oben an und versuchen, die Größe des Tippfehlers zu ändern Wir müssen immer ein ausgewogenes Verhältnis zwischen den Waagen herstellen, dafür muss das Logo mutiger sein als alle anderen Optionen Ich versuche, sie so zu ordnen, dass sie zuerst und welche zweitens kommen Folgen Sie der Anleitung von Figma , um das richtige Leerzeichen einzufügen. Okay. Jetzt werde ich mit einem Rechteckwerkzeug ein Layout erstellen. Ich möchte etwas anderes erstellen, also kann ich kleinere und größere Rechtecke erstellen. Okay, hier habe ich vier Rechtecke mit unterschiedlichen Formen und einer anderen Farbe erstellt vier Rechtecke mit unterschiedlichen Formen und einer Unten werde ich weitere Optionen hinzufügen. Ich kann zum Beispiel Sammlung, Kategorie und Start hinzufügen . Ich füge auch mit Farbe und allem hinzu. Ich versuche nun, sie anzuordnen und die Schriftgröße zu ändern. Hier verzichten wir auf unsere Option, auf andere Weise auf unserer Website zu navigieren, z. B. mit einer Farbe Wir können die Kollektion nach Farbe oder Stil oder zum Beispiel nach Kategorien wie Hosen, Jacke oder Mantel oder was auch immer die Kategorie sein mag, durchgehen Stil oder zum Beispiel nach Kategorien wie Hosen, Jacke oder Mantel oder was auch immer die Kategorie sein mag, Jacke oder Mantel oder was auch immer die Kategorie Jetzt werde ich jeden einzelnen von ihnen rahmen. Ich klicke auf jeden von ihnen und treffe die Rahmenauswahl. Und gib ihnen auch einen Schlag. Auf diese Weise möchte ich sie wie einen Boton aussehen lassen. Dann werden wir ein automatisches Layout erstellen. Und versuche, das Muster und die Größe zu ändern. Okay? Okay. Heap, optimiere das Muster. Behalte den Zweig. Ich mache es rund. Und ich werde dasselbe für die anderen Flaschen tun. Okay. Machen Sie dasselbe für die Kategorien und den Stil und mit den Farben. Mach dasselbe, mach sie abgerundet. Erstellen Sie das Muster und die Dimension des Layouts. Wie Sie hier sehen, haben wir fünf Knöpfe, die duften und verschiedene Formen haben. Den alten Button möchte ich mit Schwarz füllen und auch die Schrift ändern und ihn weiß machen. Ich wollte ihn von den anderen Buttons unterscheiden und ihn noch spezieller machen. Deshalb denke ich auch darüber nach, die Art und Weise zu ändern, wie wir unsere Option oben organisieren, die klassische Kernmethode. In diesem Fall möchte ich ein wenig ändern und andere Art der Gestaltung unserer Option beenden. Also werde ich jeden in ein Quadrat setzen. Okay. Okay. Da ist es. Jetzt werden wir die Zeichenfläche kopieren und einfügen und alle Elemente löschen Wir werden eine weitere Seite erstellen. Ich ändere die Platzierung der Option und stelle jede Option in eine Ecke. Jetzt möchte ich die gesamte Zeichenfläche einrahmen. Okay. Jetzt erstellen wir im Layoutraster eines. Und dann wählen wir kein Raster, sondern eine Spalte. Wir wählen eine Zahl in einer Spalte, die 12 ist. Es ist eine der bekanntesten Zahlen sie im Design der Website verwenden. Dann ändere ich die Farbe und lasse sie ein wenig verblassen. Okay. Jetzt ändere ich den Randwert auf 20 Pixel, das ist der Abstand zwischen der Spalte und dem Rand der Seite. Und die Dachrinne wird 32 Pixel groß sein. Damit können wir alle unsere Elemente an diesen Rand anpassen , um dem Bild mehr Platz zu geben Im Layout, hör zu, wir werden uns eingehender damit befassen, wie man die Werte für ein gutes Raster und ein gutes Layout festlegt. Als Nächstes werden wir den Titel für das Projekt erstellen. Dies ist eines der wichtigsten Elemente auf der internen Seite des Projekts. Daher muss die Hierarchie, die wir in der Typografie angeben werden , wir in der Typografie angeben werden , im Vergleich zu den anderen Elementen sehr groß Ich muss es auch größer machen. Wir werden dem Titel, der Straße zwei Sterne geben. Machen Sie es fett, richten Sie es sehr gut aus. Für dieses Projekt wollen wir sehr große Bilder erstellen und durch die verschiedenen Bilder des Projekts navigieren. Für dieses Projekt wollen wir große und kleine Bilder verwenden und dass sie mehrere Spalten einnehmen. Wir erstellen Mondquadrate mit unterschiedlichen Formen und Größen, ändern den Abstand, wo auch die Rahmen angeordnet sind, um unserer Kreativität freien Lauf zu lassen Mit dieser Spalte ist es sehr einfach, auf eine Lösung zu stoßen , die wir auf anderen Websites sehr leicht finden Verwenden Sie zum Beispiel ein Layout, bei dem das Bild drei Spalten einnimmt usw. Was wir hier jedoch schaffen wollen, ist ein interessantes System, bei dem die Leute Gefühl haben, beim Scrollen mit der Seite interagieren zu können Dafür werden wir Bilder mit einem anderen Verhältnis verwenden , und wir werden ein kleines Layout verwenden, bei dem wir die Bilder an verschiedenen Stellen anordnen müssen. Darüber hinaus werde ich den Test erstellen, damit wir alle Informationen sehen können. Wenn sie durch das Projekt scrollen und die Bilder sehen, können sie auch die Beschreibung hier lesen. Fügen wir einen Titan und auch einen Untertitel hinzu. Wir sagen vorerst eine Beschreibung und fügen jeden beliebigen Absatz Sie können alles angeben, da dies nur ein Beispiel ist. Es wird nicht die endgültige Website sein. Also werden wir den Titel fett und den anderen mittelmäßig oder regelmäßig gestalten . Ich kann auch die kleine Farbe, die kleinen Quadrate ändern, ihnen etwas Farbe geben, um meiner Seite etwas Stil und der anderen Seite Konsistenz zu verleihen. Wie ihr hier gesehen habt, Leute, verwenden wir die Spalten, um die Seite der Sammlung zu erstellen, und wir haben auch die Hauptseite erstellt. Wir werden in der nächsten Lektion weitermachen. 8. Lernen Sie Die Unterschiedlichen Arten Von WireFraming Kennen: Und jetzt, zum Abschluss, werden wir die Fußzeile erstellen und einige Kontaktdaten hinzufügen, damit die Leute mit ihnen kommunizieren können, wann immer sie wollen einige Kontaktdaten hinzufügen, damit Leute mit ihnen kommunizieren können, wann immer sie Es kann eine clevere Methode sein, die Kontaktdaten auf jeder Seite unten hinzuzufügen die Kontaktdaten auf jeder Seite unten Dort können die Leute jederzeit einfach auf die Kontaktdaten zugreifen . Wir müssen bedenken, dass wir diese Fußzeile und die restlichen erforderlichen Seiten verwenden können diese Fußzeile und die restlichen erforderlichen Seiten Die Kontaktdaten lauten wie folgt. Die Nummer, die Straße die Stadt die E-Mail mit Sicherheit. Außerdem kann ich die Social-Media-Plattformen hinzufügen und sie mit dem Pfeil verknüpfen. Jedes Mal, wenn der Benutzer auf einen dieser Pfeile klickt, benötigt er diese spezifischen sozialen Medien. Überprüfen Sie immer wieder, ob der Abstand für die drei korrekt ist. Damit beenden wir unser Foto und die interne Seite des Projekts. Es ist sehr wichtig, beim Entwerfen von Wireframes zu beachten , dass dies mit einer anderen Genauigkeit erstellt werden kann Zum Beispiel Wireframes mit niedriger Genauigkeit. Sie enthalten nicht so viele Details. Sie können sogar von Hand gemacht werden, und sie werden verwendet, wenn wir eine Idee sehr schnell validieren wollen . Auf der anderen Seite sind High-Fidelity-Wireframes dem Design viel näher und enthalten viel mehr Details zu den Inhalten, die auf der Website erscheinen werden In der Regel verwenden diese Arten von Wireframes ein viel komplexeres Gewählte Genauigkeitsstufe, die wir unseren Wireframes erreichen wollen Es hat unter anderem viel mit der Branche zu tun, in der wir arbeiten , und mit den Kundenpräferenzen Als Designer glaube ich, dass dieses Maß an Genauigkeit , das wir hier erreichen , ausreicht, um den Prozess fortzusetzen und mit der Phase des visuellen Designs zu beginnen. Schließlich ist es in dieser Phase sehr wichtig, wie wir Ideen gegenüber unseren Kunden präsentieren. Darüber hinaus, dass wir uns an ihnen orientieren und dass sie sich bei uns sehr sicher fühlen, wenn sie mit der nächsten Phase , der visuellen Gestaltung, fortfahren. Dafür empfehle ich, den Drahtrahmen immer als Figma-Prototyp darzustellen den Drahtrahmen immer als Figma-Prototyp Um den Prototyp zu beenden, werde ich die Wireframes mitbringen In diesen Wireframes organisieren wir den Inhalt der beiden Seiten, die Die erste ist die A-Seite, auf der wir alle Informationen organisieren, die wir über die Marke haben Die Informationen sind sehr einfach. Wir fügen einfach die notwendigen Informationen über die Marke hinzu und stellen die notwendigen Informationen über die sie auf sehr kreative und organisierte Weise bereit. Hier können wir einige Bilder der Marke hinzufügen, das wichtigste Beispiel von Tipo Wir können einen Absatz über die Marke und ihre Geschichte und vielleicht auch über eine Zusammenarbeit oder einige berühmte Mediennachrichten, über die sie gesprochen haben, falls sie es schon getan einige berühmte Mediennachrichten, über die sie haben, denn als neue Marke werden sie kein Titelbild in den Nachrichtenmedien haben Wo waren auch all die Städte, in denen sich die Marke befindet? Und unten haben wir dieselben Kontaktinformationen hinzugefügt. Die letzte Seite wird die Kontaktseite sein, auf der wir verschiedene Daten eingeben, die wir haben, damit die Leute mit der Marke in Kontakt treten können. Das Letzte, was wir tun werden, ist einen sehr einfachen Prototyp zu erstellen, um die Drahtrahmen darstellen und sie so steuern zu können , dass sie für unsere Kunden sehr klar sind. Um den Prototyp zu erstellen, klicken wir auf die rechte Seite des Bildschirms, wo Prototyp steht, und beginnen, die Elemente zu verknüpfen, die wir verwenden möchten. Klicken Sie auf das Element, das wir verwenden möchten, wenn wir es unserem Kunden präsentieren möchten. Ich möchte zum Beispiel, dass ich mit diesem Bild zur Kategorieseite oder zur internen Seite des Produkts weitergeleitet werde . Dazu wähle ich diesen Kreis mit der Plus-Schaltfläche aus, die am rechten Rand erscheint. Ich ziehe ihn auf die nächste Seite. Ich möchte zum Beispiel, dass dieses Bild mich zur A-als-Seite führt. In der Auktion wählen wir einen Klick auf einen Klick, navigieren zu A als Seite und wählen dann Dissolve. Und lassen Sie es dann 300 Millisekunden lang laufen. Dann lass es auf 300 Millisekunden laufen. Jetzt werden wir andere Optionen wie Kontakt verknüpfen. Zuerst möchte ich Autoayout hinzufügen und dann werde ich es auf jeden Fall mit der Kontaktseite verknüpfen Wir haben die gleiche Option beim Klicken und auch beim Auflösen. Wir verknüpfen alle Kontaktoptionen mit derselben Kontaktseite. Alle A S, die Sie auf jeder Seite haben, verknüpfen Sie mit derselben AS-Seite. Das TICO verknüpft es zurück mit der Startseite und das Lookbook verknüpft es mit der Seite des Buches Also machen wir das Gleiche und verknüpfen alle Optionen mit ihren Seiten Also werden wir den Flow auf der ersten Seite erstellen. Diese Tools ermöglichen es uns, wesentlich flexiblere Prototypen zu erstellen wesentlich flexiblere Prototypen zu Für unseren Fall reichen diese Optionen jedoch aus Auf diese Weise haben wir unseren Prototyp erstellt, den wir navigieren und unserem Kunden präsentieren können. Schließlich stellen wir sicher, dass der Link auch zur Homepage führt, wie wir bereits gesagt haben, und alles an seinem Platz überprüft und dreht einfach weiter. Jetzt haben wir bereits einen Prototyp , den wir mit unserem Kunden teilen können. Ich gehe zur Prototyp-Ansicht, indem ich auf die Display-Schaltfläche und überprüfe, ob alles funktioniert. Wenn ich auf den Kontakt klicke , komme ich zur Kontaktseite. Wenn ich auf die Sammlung klicke, werde ich zur Sammlungsseite weitergeleitet. Über uns, führe mich zur Seite „Über uns“ mit einer schönen Animation zum Auflösen. Erkunden Sie uns. Bring mich auch zur Sammlungsseite. Kontaktiere uns. Klicken Sie auf Teco, um zur Hauptseite zu gelangen. Am Ende des Wireframe-Entwurfsprozesses ist es sehr wichtig, einige Empfehlungen zu berücksichtigen , um sicherzustellen , dass wir uns korrekt an unseren Kunden orientieren Und auf diese Weise können wir es in der Phase des visuellen Designs nahtlos verwenden es in der Phase des visuellen Designs nahtlos Ich werde dir in dieser nächsten Lektion alles erzählen. 9. Welche WireFraming-Empfehlungen gibt es?: Und Wireframing-Empfehlung. Am Ende der Wireframe-Phase ist es wichtig zu wissen, wie wir unserem Kunden präsentiert werden , wie uns an unserem Kunden orientieren, damit Sie verstehen wichtig Struktur, Inhalt und Navigation dieser Phase , und uns an unserem Kunden orientieren, damit Sie verstehen, wie wichtig Struktur, Inhalt und Navigation dieser Phase sind. In dieser Lektion werde ich Ihnen einige Empfehlungen geben, mit denen Sie den Erfolg der Wireframe-Phase sicherstellen Erfolg der Lassen Sie uns also anfangen. Ich habe die Empfehlung, dass die Wireframes zuerst auf die Kunden abgestimmt werden Was wir in Bezug auf den Wireframe-Prozess, die Struktur, die Navigation und den Inhalt überprüfen sollten . Hier ist es wichtig, dass wir nicht definieren, was Design ist, da dies eine sehr wichtige Phase ist , um zu definieren, was Struktur Ich denke gerne, dass Wireframes ein graues Haus sind. diesem Haus in grauer Bauweise weißt du, wie man sich darin zurechtfindet Du betrittst das Haus, du weißt , dass die Küche hier ist. Sie wissen, dass das Sofa, das Badezimmer und das Zimmer da sind. Es fehlt jedoch immer noch die Designebene, die weiße Arbeit ist sozusagen angesichts der grauen Arbeit oder der Drahtrahmen, wo wir als Benutzer in angesichts der grauen Arbeit oder der Drahtrahmen, wo wir als Benutzer in der Lage sein werden, uns in den einzelnen Abschnitten zurechtzufinden. Wir können unser Zuhause gut betreten und uns darin zurechtfinden. Aus diesem Grund möchten wir in dieser Phase von Wireframe entscheiden, was unser Haus benötigt, um zu bestimmen, was Sie benötigen, um zu White zu gelangen, die Arbeit oder das endgültige Design zweite Empfehlung lautet, dass Wireframes der Ausgangspunkt sind , um den Inhalt zu definieren, mit dem wir uns auf der Website auseinandersetzen. Aus diesem Grund ist es wichtig, dass Sie sich an dem Kunden orientieren , den der Inhalt bestimmt ist, da wir ihn so organisieren, dass er gut konsumiert werden kann Wenn wir dem Kunden also die Wireframes präsentieren, kann er feststellen, ob wir die Informationen am besten zusammenstellen Die dritte Empfehlung hat mit dem Design zu tun. Das bedeutet, dass wir verstehen, dass Wireframes keine Einschränkung für unser Es ist an sich schon eine Gelegenheit, die verschiedenen Arten der Darstellung unserer Art von Inhalten zu erkunden die verschiedenen Arten der Darstellung unserer Art von Inhalten zu Viertens, die Wireframes, sie sind nur der Ausgangspunkt für unser Projekt Also vereinbaren wir mit dem Kunden, was wir inhaltlich haben können Möglicherweise werden wir es jedoch in Zukunft weiter anpassen. Was wäre der beste Weg, all diese Inhalte zu arrangieren? Wie Sie sehen, überprüfen wir hier, während wir über unsere Empfehlung sprechen, über unsere Empfehlung sprechen, sehr wichtige Beispiele. Ich gebe Ihnen die Links für jede dieser Websites. All diese Websites, durch die wir scrollen. Sie verwenden alle dieselbe Methode für die Rahmung und die Spalte. Sie sehen anhand von Bildern, Tippfehlern und Informationen, wie sie ihren Inhalt organisieren von Bildern, Tippfehlern und Informationen, wie sie ihren Inhalt Alles sieht ausgewogen und gut organisiert aus und kann gut navigiert Wenn wir unsere Inhaltsstrategie und unseren Wireframe-Prozess abgeschlossen haben , ist es an der Zeit, unsere Lieblingsphase zu beginnen, nämlich die Phase des visuellen Designs Eines der wichtigsten Elemente dieser Phase ist das Layout . Lassen Sie uns also anfangen. 10. Weitere Informationen Zu Rastern Und Layouts: Das erste Element , das wir berücksichtigen , ist die Wahl eines Rasters und eines Layouts, denen wir alle unsere Inhalte organisieren werden In dieser Lektion werden wir neben den kreativen Möglichkeiten, sprechen die wir damit haben, auch über die unterschiedlichen Gestaltungsmöglichkeiten , die wir beim Entwerfen verwenden. Dies sind Tools, mit denen wir den Inhalt unserer Website organisieren und zusammenstellen können. Einer der beiden Typen, die ich in meiner Arbeit verwende, ist der erste Typ, das Layout , das wir gerade untersuchen werden. Er wird im Webdesign am häufigsten verwendet, und dieser Typ besteht am besten aus einer Spalte. Um es zu verwenden, setzen Sie einfach eine leere Zeichenfläche gleich und fügen dann ein Layout Und bei dieser Option „Out-Grid“ standardmäßig von Figma auf der Grundlage von zehn Pixelquadraten Aber ich werde die Option ändern, indem ich hier klicke und die Spalte mit der Grid-Crew ändere Wie wir sehen können, dass Figma standardmäßig fünf Spalten erstellt, würde ich die Anzahl einer Spalte auf 12 ändern, da das 12-Spalten-Layout im Webdesign am häufigsten verwendet wird, da es leicht in 64, drei und zwei aufgeteilt werden kann und auch sehr flexibel ist im Webdesign am häufigsten verwendet wird, da es leicht in 64, drei und zwei aufgeteilt werden kann , um auf verschiedenen Bildschirmgrößen zu arbeiten Die Option, die ich hier schnell einstellen kann, ist der Rand , also der Abstand zwischen unserem Layout und dem Rand unseres Bildschirms Und die Dachrinne, also der Abstand zwischen unserer Kälte und dem Layout, passt sich der gewünschten Größe Um dieses Layout an verschiedene Bildschirmgrößen anzupassen, werde ich meine Zeichenfläche duplizieren und den Namen ändern Ich werde die Größe meiner Zeichenfläche auf 800 Pixel ändern, da es sich um eine Größe handelt, die normalerweise für Designs auf Tablets verwendet wird. Und es ist dieselbe Option, ich werde die Anzahl der Spalten ändern Der Rand zwischen dem Layout und dem Rand des Bildschirms und der Abstand zwischen den Spalten. Und um mich an das mobile Gerät anzupassen, werde ich dasselbe tun. Ändern Sie zuerst den Namen. Ich werde die Breite meiner Zeichenfläche auf 300 Pixel ändern meiner Zeichenfläche auf 300 Pixel Welche Größen verwenden wir normalerweise, um die Geräte zu entwerfen Diese Messung kann je nach Produkt etwas variieren. Und zum Schluss werde ich die Anzahl der Spalten ändern. Normalerweise werden für Mobilgeräte vier oder sechs Spalten verwendet, der Rand zwischen den Spalten und dem Rand, und ich werde in diesem Fall den gleichen Abstand zwischen den Spalten lassen . Diejenigen, die wir erstellt haben, sind eines der am häufigsten verwendeten Layouts im Webdesign, das uns viele kreative Möglichkeiten zum Erkunden bietet. In diesem von mir entworfenen Projekt habe ich zum Beispiel dasselbe Raster mit 12 Spalten verwendet, aber immer nach einer viel kreativeren Art gesucht , mit dem Raum zu spielen. Ich versuche zum Beispiel, mit dem Raum, den jedes Modell einnimmt, einen anderen Rhythmus zu erzeugen mit dem Raum, den jedes Modell einnimmt, einen anderen Rhythmus . Auf diese Weise wurde die Navigation viel interessanter. Auf dieser Seite versuche ich, wie bei den Details jedes Projekts, Momente zu erzeugen, in denen durch Elemente, die mehr oder weniger Spalten einnehmen, Hierarchie und Kontrast berücksichtigt werden. Außerdem verwende ich Elemente , die alle Spalten belegen. Elemente, die jeweils 50% der Zeichenfläche einnehmen, oder ich versuche, neue Verwendungsmöglichkeiten des Layouts zu erkunden Auf diese Weise achten wir darauf, dass das Layout von 12 Spalten kein Hindernis für die Suche nach neuen kreativen Lösungen darstellt Wir suchen zum Beispiel danach, dass die Anordnung von Text, Bild und Leerraum viel teurer war Und obwohl wir uns an demselben 12-Spalten-Layout orientieren , uns viel mehr kreative Freiheit gönnen um riskantere Dinge vorzuschlagen. Im Detail des Projekts können wir sehen, dass durch die Verwendung der Spalten dem Leerraum viel mehr Bedeutung beigemessen wird, was zu einer sehr interessanten Lektüre geführt hat. Darüber hinaus versuchen wir, ein Gleichgewicht zwischen Bildern, Text und Leerraum herzustellen, um den Benutzern, die die Seite besuchen, ein sehr angenehmes Gefühl zu vermitteln. Wenn wir zu unserem Projekt zurückkehren, können wir sehen, wie das Layout von 12 Spalten viele der Designentscheidungen beeinflusst hat, die wir auf den Seiten treffen. Und wir können sehen, wie wir versuchen, die unterschiedlichen Anordnungen von Texten und Bildern in den einzelnen Modellen zu untersuchen unterschiedlichen Anordnungen von Texten . Die andere Art von Layout, die ich verwende, heißt Vander-Graph. Ich nutze das, wenn ich die Möglichkeit sehe , etwas viel Visuelleres, Beeindruckenderes oder Experimentelleres zu kreieren , da es uns ermöglicht, den Raum freier zu nutzen Um dieses Layout in Figma zu erstellen, müssen Sie es manuell erstellen, und wir zeigen Ihnen Als erstes müssen wir diagonale Linien von Ecke zu Ecke auf unserer gesamten Seite erstellen diagonale Linien von Ecke zu Ecke auf unserer gesamten Seite Dann erstellen wir eine vertikale Linie in der Mitte der Seite. Und nach den unteren Ecken in Richtung der oberen Mitte der Seite. Dann das Gegenteil. Und wir wiederholen dasselbe von den oberen Ecken aus. Auf diese Weise sehen wir, dass es zwischen all diesen Diagonalen keine Schnittpunkte mehr gibt Und von ihnen aus werden wir beginnen, vertikale und horizontale Linien zu erstellen Okay? Okay. Okay, beschleunigen Sie es durch Kopieren und Einfügen. Okay. Dieser Vorgang kann mehrmals wiederholt werden , wenn Entersearch die Zeilen herausgibt , die wir erstellen Hier erstellen wir eine weitere Horizontale , die wir beim Bor replizieren Und diese letzte Vertikale ist viel näher am Rand. Okay. Mach weiter. Machen Sie weiter und beenden Sie weitere Warteschlangen. Mehr Linien. Wir können dies so oft wiederholen, wie wir möchten, je nach Anzahl der Anleitungen, die wir für unser Design benötigt haben. Sobald wir alle Anleitungen haben, werde ich die Deckkraft etwas verringern Ich werde es gruppieren und die Ebene sperren , um unseren Designvorschlag darauf erstellen zu können Auf diese Weise haben wir ein Layout, das uns so viel mehr kreative Freiheit bietet und das wir zu Zeiten verwenden können , in denen wir das auch beeinflussen wollen , damit wir nicht so sehr von der 12. Spalte abhängig sein wollen . Diese Art von Layout wurde in einem Projekt wie dieser Website verwendet. Wie Sie sehen können, unterscheidet sich die Anordnung der Elemente stark von dem Projekt, das ich Ihnen zuvor gezeigt habe. Dadurch wird ein Eckraum stärker genutzt . Darüber hinaus ist es eine sehr nützliche Art des Layouts für Websites, auf denen die Navigation etwas experimenteller ist. Wie ich bereits sagte, verwenden wir diese Art von Layout, wenn wir eine sehr starke visuelle Wirkung erzielen und auch anziehen möchten . Ein anderes Projekt, für das diese Art von Layout ebenfalls verwendet wurde , ist diese Website. Es hat das Element in der Ecke an den Seiten angeordnet. Das Projekt ist jedoch sehr fortschrittlich , da die Adresse viel kostenloser und interaktiver sein sollte. Verwenden Sie es zu Beginn des Projekts sehr gut , um die erste Entwurfsentscheidung zu treffen. Das letzte Thema, das ich in dieser Liste ansprechen möchte , ist der vertikale Abstand zwischen Elementen Normalerweise achte ich darauf, dass der Raum über und unter jedem Element auch ein Vielfaches von acht Pixeln enthält Auf diese Weise können wir unabhängig von der Größe des Bildschirms, auf dem die Anzeige angezeigt wird, für Konsistenz in unserem Design sorgen unabhängig von der Größe des Bildschirms, auf dem die Anzeige angezeigt wird, Außerdem erleichtern wir Entwicklern, die an unserem Projekt arbeiten werden, die Arbeit erheblich . Eine einfache Möglichkeit, diesen vertikalen Abstand in unserem Projekt mit den verschiedenen Größen zu erstellen diesen vertikalen Abstand in unserem Projekt mit , die wir verwenden werden und bei denen es mehrere Achter gibt. Mit den rechteckigen Werkzeugen erstellen wir diese Balken. Wir multiplizieren jedes Mal mit acht. Okay? Okay. In diesem Fall habe ich 4-56 Pixel erstellt. Und dann können wir diese Blöcke verwenden, um sicherzustellen , dass der Abstand unseres Projekts korrekt ist Der einfachste Weg, dies in FDM zu tun, besteht jedoch darin, ein beliebiges Objekt auszuwählen und die Optionstaste auf dem Mac oder die Alt-Taste auf Windows zu verwenden die Optionstaste auf dem Mac oder die Alt-Taste , um den Abstand zwischen verschiedenen Elementen zu messen den Abstand zwischen verschiedenen Elementen Auf diese Weise können wir den vorhandenen Abstand anpassen. Auf diese Weise stellen wir sicher, dass unser Design viel konsistenter ist. Und dass die Bereiche viel besser organisiert werden wenn der Benutzer scrollt und sie verschiedenen Elementen der Seite gefunden Wir haben bereits unsere klaren Raster und das Layout für unser Design definiert , und in der nächsten Lektion werden wir damit beginnen, unser endgültiges Design zu blockieren 11. Vorbereiten von Elementen in Photoshop: Okay, bevor wir anfangen, unsere Webseite zu blockieren, bereiten wir zunächst einige Elemente vor, die wir für unsere Käfige benötigen Wir werden Photoshop öffnen. Wir werden ein beliebiges Dokument erstellen und dann einige Bilder importieren, die wir benötigen. Okay? Wie Sie hier sehen, haben wir unterschiedliche Bilder. Das erste, was ich tun muss, ist einen Hintergrund zu entfernen. Nachdem ich den Hintergrund entfernt habe, muss ich das Bild weiter reinigen. Nachdem wir den Hintergrund entfernt haben, wählen wir die Maske aus und klicken auf Maske auswählen. Hier geben wir einige Optionen ein, bei denen wir viele Folien anpassen müssen, um unsere Maske zu verbessern Wir beginnen also einfach mit dem Radius, dem Glatten, der Feder Versuche es zu optimieren, bis du siehst, dass deine Maske besser ist. Okay. Wie du hier siehst, kann ich sehen dass ich schon so viel war, es einen Teil des Gesichts ausradiert Also muss ich wieder schwach werden. Das sieht okay aus, aber ich habe immer noch etwas, das ich reinigen muss. Nun, ich werde das mit dem Pinsel machen . Du wählst einfach die Masse und dann werde ich mit der schwarzen Farbe einige Teile von den Ohrringen löschen, die ich nicht benötige. Okay, die Dinge sehen besser aus, schätze ich. Vielleicht spiele ich ein bisschen mit den Schaltkanten. Mehr Radius. Ich denke, dieses Mal sieht es besser aus. Okay. Jetzt machen wir dasselbe für ein anderes Bild. Entferne den Hintergrund, wähle dann die Maske aus und optimiere die Folien Okay, der Radius, B. Ich finde, er sah gut aus Es gibt noch etwas, das du anpassen musst , du kannst es später tun Jetzt möchte ich es nur noch bei PNG speichern. Das Letzte, was ich tun muss , ist ein Poster in einer roten Koralle zu erstellen, und dann werde ich vorne Earthtones erstellen Okay? Nun, die Idee hier, ich möchte einen separaten Teil machen. Der obere Teil und der untere Teil bedeuten separate Ebene. Also von der Mitte aus das Market-Werkzeug zur Auswahl, ich wähle den oberen Teil und beende ihn dann mit Strg G auf einer neuen Ebene. Dann bettle ich zur Hauptebene und lösche den oberen Teil. Okay? Nun, wie Sie sehen, habe ich beide und eine andere Ebene. Okay? Jetzt bleibt nur noch, jede Ebene einzeln zu exportieren. Sie können es als GPEG oder als PNG exportieren. Okay, es ist so einfach? Wir haben gerade ein paar Elemente für unsere Webseite erstellt, ein Design. Wenn Sie Dinge, wie ich sie gerade benötige, nicht für mein Webdesign benötigen, ist dies nicht notwendig. 12. Blockierung der Website starten: Okay , jetzt fangen wir an, unsere Website zu blockieren. Das erste, was wir erstellen müssen, ist die Hauptseite. Mit dem metrischen Tool werde ich also ein Rechteck erstellen und ihm eine Dimension geben. Die Dimension wird 1440 mal 900 sein. Dann werde ich die Farbe auf Weiß ändern. Okay. Okay. Okay. Jetzt erstelle ich zwei, indem ich daraus einen Rahmen mache. Dann ändere ich natürlich den Namen und nenne ihn wie zu Hause. Die Dimension, die wir hier haben, ist die Dimension , die auf dem Desktop des Benutzers angezeigt wird. In der Layoutanleitung werden wir das Spaltenprinzip verwenden. Das haben wir bereits in den vorherigen Lektionen gesehen. Ab der Klasse wechseln wir also zu den Spalten. Ändern Sie die Spalte auf 12, den Rand auf 22 und die Rinne auf 20. Okay? Jetzt muss ich die Opazität verringern Also. Die Dimension können Sie so ändern, wie Sie möchten, dass Ihre Website danach sucht. Ich kann das Beispiel horizontal vergrößern. Ich mache einfach ein Rechteck wie das, das wir hier haben. Sie können je nach Design Ihrer Website mit einer anderen Dimension spielen . Jetzt möchte ich meinem Rechteck eine andere Farbe geben. Ich versuche, der Farbe für die Website näher zu kommen. Dafür werden wir eine separate Lektion haben. Wir werden mehr darüber erfahren, wie das geht. Okay, gib ihm ein farbiges Abzeichen und mach es heller. Jetzt werde ich mein Layout beenden. Also als erstes muss ich hier ein Rechteck in der Ecke erstellen. Ich möchte ein kleines Rechteck machen. Ich möchte verschiedene Größen haben. Ich mache es auf jeden Fall abgerundet und ändere die Farbe. Mach die Farbe für den Kontrast dunkler, klar. Okay? Jetzt werde ich ein anderes Rechteck beenden. Diesmal werde ich ein anderes Rechteck beenden, indem ich eines kopiere. Ich kopiere dasselbe Rechteck, indem ich die Maustaste gedrückt halte und ziehe. Dann verlasse das mittlere Rechteck größer. Machen Sie dasselbe, wenn Sie es vergrößern möchten einfach die Taste gedrückt und ziehen Sie mit der Maus. Jetzt kopiere ich weiter ohne Drogen. Achten Sie immer auf den Rand der Figur, um den richtigen Abstand Ich möchte das größer machen. Auf der Hauptseite möchte ich also vier Layouts mit unterschiedlichen Formen und Größen haben . Auf diese Weise schaffen wir das Gleichgewicht. siehst du genau hier. Ich versuche, mein Rechteck ein wenig zu vergrößern, um ein Gleichgewicht auf der Hauptseite herzustellen. Okay. Der Abstand sollte immer gleich sein, sollte korrekt sein. Okay? Medikament am Pfeil. Ich passe die Größe meines Rechtecks ständig an. Das mittlere Rechteck hier, ich möchte seine Farbe ändern Vielleicht orange. Warum jetzt, ich lasse es orange. Nun, was ich tun möchte, ich werde auch die Farbe des größeren Rechtecks ändern. Das ist der erste Blockierer , der sieht, wie das Ding aussehen wird, bevor ich zu den Bildern übergehe . Ich möchte am Anfang sehen , wie alles aussehen wird. Jetzt möchte ich dem größten Rechteck ein Bild hinzufügen. Ich möchte ein Bild hinzufügen. Ich habe ein Bild hier. Ich mag die Farbe dieses Bildes , weil es genau das ist, was ich im Kopf habe. Gehen Sie also zum Bild und laden Sie es dann vom Computer hoch. Wenn du siehst, wie das Bild in das Rechteck passt, muss ich es nach unten bewegen, damit die Gesichter des Mädchens zu sehen sind. Also, um das zu tun, statt zu füllen, machen wir Mist. Okay. Geh zu Mist, dann geh runter mit deinem Bild. Ich finde, das sieht gut aus. Okay. Die Dinge sehen gut genug aus. Du legst sie einfach in die Mitte. Okay. So sah unser erstes Layout aus. Ich denke die Farbe richtig, wenn ich sie brauche, also werde ich dasselbe für andere rechteckige AptiImageGet-Zeiten tun , ich lasse es einfach fühlen Jetzt werden wir natürlich die Optionen erstellen. Das ist die Architektur meiner Hauptseite. Wenn Sie zu Hause sind, ändern Sie die Farbe auf Weiß. Okay? Okay. Dies sind unsere ersten Anleitungen zum Blockieren, aber wir werden uns später noch eingehender mit Typografie und Farbe befassen Also muss ich die Größe meiner Option hier ändern. Versuche es richtig zu platzieren. Jetzt müssen wir die anderen Optionen erstellen. Halten Sie Alt gedrückt und drücken Sie die Taste, um weitere Kopien zu erstellen. Okay. Okay. Überprüfe den Abstand. Okay. Okay. Versuche den Raum zu überprüfen und immer mit dem Führer von Figma. Das ist sehr hilfreich Okay. Jetzt werde ich jede Option benennen. Die erste, die wir hier haben, sind Sammlungen. Die zweite über uns und den Kontakt ist so einfach. Dies ist die sündenfreie Option, die Sie auf der Website haben können, aber Ihre Website kann komplizierter sein und mehr Optionen bieten Es hängt vom Design ab, das Sie tun müssen. Wenn das zum Beispiel der E-Commerce wäre, wird es mit Sicherheit mehr Optionen geben. Wir werden eine Kategorie haben, wir werden den Laden haben, wir werden die Karte haben. Wir werden viele, viele Dinge haben, Leute. Das ist wie ein Portfolio für eine Marke. Also nachdem ich die Größen geändert habe, versuche ich, sie sehr gut zu platzieren. Wenn Sie jetzt ein Logo als B & G haben, können Sie es importieren und in die Ecke stellen Mein Logo wird nur ein Tippfehler sein, also werde ich es alleine erstellen , indem ich den Namen in die Farbe eintippe Eine andere Sache, die ich hier tun muss, ist dieses orangefarbene Layout. Wir müssen hier eine Option mit fernen Erdtönen und Symbolen erstellen . Ich werde es mutiger machen und die Farbe auf Weiß ändern Dieses Layout, das ich hier erstellt habe, wird das Layout für die Filterfarbe sein Deshalb wollte ich es anders gestalten. Während Sie Ihre Website entwerfen, sollten Sie immer darüber nachdenken, wohin sie führen soll und wie die Seite, auf die wir verlinken, aussehen wird. Und eine weitere Sache, an die Sie beim Entwerfen einer Website immer denken , ist die Animation. Welches Element müssen Sie animieren und welche Dinge werden Sie statisch lassen Also habe ich hier Ton und Tumble erstellt und dann müssen wir hier also einen Tippfehler als Kontrast nach Größen erzeugen Also werde ich die Größe von Rooted In Nature ändern und es für dich stylen Soweit möchte ich, dass es kleiner aussieht. Ich kann auch den Abstand zwischen Erde und Probe ändern . Ich versuche, die beste Struktur für dieses Produkt zu finden. Wir machen in der nächsten Liste weiter. 13. Erstellen der Sammlungsseite: Jetzt werden wir weitermachen die Sammlungsseite erstellen. Wie Sie hier sehen, musste ich als Erstes die Linealanleitung mögen. Sie wählen einfach die Option Rollenführung und ziehen dann von oben eine Linie, um sie nach oben zu legen, und eine weitere Linie, ich lege sie nach unten. Deshalb habe ich sicher, dass ich für jede Seite die gleiche Größe habe. Okay. Erstellen Sie jetzt einfach ein Rechteck, etwas größer, und ich füge das erste Rechteck füge ein Bild hinzu. Dann habe ich mein Poster mitgebracht, mit dem es in Photoshop erstellt werden sollte , und ich habe es über das Bild gelegt. Es ist keine große Sache, Leute, es ist genauso, wie wir es zuvor gemacht haben. Das einzig Neue, was wir gemacht haben, ist, dass wir dieses Poster Recruit in Photoshop über dem Bild hinzugefügt haben dieses Poster Recruit in Photoshop über dem Bild Jetzt möchte ich die Deckkraft verringern, damit ich besser sehen kann , wie ich über das Bild passen muss, und es dann zuschneiden Ich gehe zu Mist und Mist. Wenn wir es zuschneiden, schneiden wir es einfach von einer Größe ab, also muss ich dasselbe für die andere Seite machen P hier. Okay. Jetzt wähle ich den aus und mache Mist und schneide ihn dann so zu Ich gehe wieder zu A Crap. Das soll sagen. Okay. Gehen Sie auf diese Weise und versichern mir, nur das Teil auszuwählen, das ich benötige. Jetzt werde ich versuchen, sie richtig zu verlegen, um sicherzugehen, dass sie nicht gleich aussehen. Okay? Versuchen Sie also zu ziehen, indem Sie die Strg-Taste gedrückt halten und versuchen Sie, sich gut übereinander zu legen. Okay. Okay. Optimiere weiter, bis du es richtig gemacht hast Kehren Sie jetzt zur Opazität zurück. Lassen Sie uns die Opazität auf 100% einstellen. Wie Sie gesehen haben, bringen wir jetzt das Bild mit , das wir in Photoshop erstellt haben Okay. Wir legen es auf den Boden. Dann werde ich mit dem Rechteckwerkzeug ein Rechteck erstellen . Versuche sie in die Mitte zu legen. Okay. Okay. So versuchen Sie, die richtige Position zu finden Jetzt muss ich natürlich die Farbe ändern. Also werde ich vielleicht zu Grün wechseln. Versuchen wir es mit Grün und Orange. Also entschied ich mich schließlich, sie orange zu machen. Jetzt werde ich für jedes Quadrat eine Phrase erstellen. Mach es fett. Okay. Nimm das neue, ich mache es zu niedrigerem Kapital, schätze ich. Ich werde kein Kapital machen dann die Größe der Position übernehmen Jetzt denke ich auch schon, dass ich diesen Teil animieren werde Also jedes Mal, wenn ich ein Element hinzufüge, denke ich darüber nach, wie es animiert werden soll Und entsprechend kann ich es anders positionieren. Hier, ich werde sagen, dort Palette. So wie wir es hier getan haben. Jetzt muss ich das Bild oben anordnen. Also wähle ich einfach. Jetzt werde ich diese beiden Bilder mitbringen. Ich habe es schon beendet. Ich erstelle einfach ein Rechteck mit einer größeren Größe und mache es dann abgerundet und lade auch ein Bild vom Computer wie wir es zuvor in der vorherigen Liste getan haben. Also schiebe ich sie nach unten. Okay. Jetzt muss ich einen Bot quatieren Machen Sie mit einem Rechteck einfach ein kleines Gewirr und runden Sie es dann ab. Richten Sie es in der Mitte Okay. Dann drück es auf den Boden, gib ihm eine Farbe. Die Taste muss immer eine kontrastreiche Farbe haben. Also werde ich dem Button einfach einen Namen geben. Erkunde mehr. Okay. Ich habe dieses grüne Rechteck erstellt und nenne es natürliche Palette und füge jedes eingefrorene hinzu, was nicht wichtig ist Du könntest jede Art von eingefrorener Farbe hinzufügen, die du vielleicht als unwichtig erachtest. Nein, ich kopiere diese Bilder und werde schauen, ob ich etwas lasse oder ob ich etwas mache Okay. Okay. Ich werde sie anders positionieren , um ein Gleichgewicht herzustellen, aber mit einer anderen Art und Weise. Dam ist sich sicher, dass wir sie ändern weil wir nicht dieselben Bilder haben werden. Ich werde die Größe meiner Rechtecke ändern und nach oben drücken Manche Ideen kommen und gehen, während ich den Leitfaden für die Website entwerfe Ich bleibe also nicht immer bei Dingen, die ich im Kopf habe, wenn ich anfange. Es ändert sich immer , je nachdem, was ich über Animation und Design denke . Jetzt zitiere ich mehr Rechtecke. Und unten werde ich auch dieses kleine grüne Rechteck haben Wir werden die Website haben. Inzwischen habe ich diese Paletten. Ich lege es neben mich, um mir ein paar Farben auszusuchen. Das sind die Grundfarben. Später werden wir sehen , wie wir die Farbtafel perfekt für die Website machen werden. Jetzt habe ich nur die Bilder der einzelnen Rechtecke geändert. Ich habe schon eine Idee, wie ich das animieren werde. werden wir später sehen. Jetzt muss ich zu jedem Bild eine Beschreibung hinzufügen. Sie oder der erste. Ich könnte sagen, Blazer, Jacke, die als Teil eines intelligenten Fangs getragen wurde Das ist nur ein Beispiel, Leute, versuche also nicht, die Größe meines Textes zu ändern Mach es auch kleiner, dann werde ich es besser positionieren. Okay. Wir werden dasselbe mit den anderen Bildern machen. Stell es her. Und der Frost vielleicht noch zwei andere Dinge. Lässiger Blazer und Hosen mögen vielleicht grün, genauso wie wir es zuvor gemacht haben, ändern Sie die Größe, ändern Sie die Schriftstärke Ich meine mittel oder normal oder fett. Wir machen dasselbe für das dritte Bild weiter. Okay, also sagen wir schicker und lässiger Blazer, lebendig, und nennen es Blazer und Hose Vielleicht sollten wir einfach einen Freizeitanzug nehmen Was wir noch für unsere Kollektionsseite tun können. Wir werden sehen. Zuerst muss ich die Beschreibung sehr gut positionieren. Okay. Ich kann die Farbe des Rechtecks auch hier ändern. Ich möchte nicht dieselbe Farbe haben, oder ich mache etwas viel Besseres, indem ich ein Bild als Hintergrund mache. Nun habe ich für die letzten beiden Rechtecke ein Bild als Hintergrund erstellt. Du weißt einfach, wie man mit dem Kerl umgeht, also ist es nicht wichtig. Nicht wichtig, du weißt schon, wie man das macht. Das ist auch sehr einfach. Ich habe gerade sechs kleine Rechtecke verlassen. Ich mache sie ein bisschen abgerundet, und dann habe ich dasselbe gemacht, indem ich jedes Quadrat ausgewählt habe und jedem Quadrat ein Bild hinzugefügt habe Füge in jedes Quadrat ein Bild ein. Ich versuche hier, die Größe der Ziffer zu ändern. Okay. Mach es größer. Dann positioniere ich drei Bilder in der Mitte und das andere wird außerhalb der Seite sein. Warum habe ich das gemacht? Ich habe das gemacht, weil ich diesen Teil animieren werde, und um ihn zu animieren, benötige ich sechs Bilder, und jedes Mal müssen nur drei Bilder erscheinen Also, wie ich euch gesagt habe, Leute, wenn ihr am Design arbeitet, denkt ihr bereits an die Animation Dementsprechend positionieren Sie Ihre Inhalte. Jetzt müssen wir sie näher zusammenbringen und sie im gleichen Abstand nebeneinander ausrichten , okay? Okay. Okay. Okay, großartig. Ich denke darüber nach, weitere Bilder hinzuzufügen. Okay, ich kann mehr Bilder erstellen, wenn ich diesen Teil mehr animieren muss Nach reiflicher Überlegung habe ich beschlossen, die Bilder ins Labor zu bringen. Okay? Also lege ich sie in den Bob und ändere die Bilder. Ki. Es ist so einfach. Es ist nicht kompliziert. Jetzt habe ich diese Papierstruktur, die gefaltet aussieht nur meinem letzten Hintergrundbild Wirkung verleiht. Also lege ich es über das Bild. Okay. Ich weiß schon, wie man das macht. Jetzt gehe ich hier zum Drop, wo es die Mischoption Dann wähle ich eine Mischung. Ich werde Multiplizieren wählen. Dann sieht es so aus. Ich denke darüber nach, die Opazität der Textur zu verringern. Ich möchte keinen so großen Effekt haben, brauche nur ein bisschen davon Also verringere die Opazität. Dann unterbreche ich die Textur. Kältebekämpfung und Medikamente. Okay. Unten habe ich dieses grüne Rechteck erstellt und gesagt, 2025, in Ordnung, reservieren Sie es oder Sie können nehmen, was auch immer Sie brauchen. Unten können Sie sogar die Kontaktinformationen der Marke eingeben. Square wird auf jeder Seite sein. Bringen Sie das Rechteck und den Frosch nach vorne Rechteck und den Frosch , weil ich möchte, dass sie über dem Bild sind. Okay. Jetzt wollte ich ein weiteres Rechteck erstellen, es vergrößern, und ich werde auch ein Bild dafür anwenden . Okay? Sie wählen es einfach aus und gehen zum Bild und wählen ein Bild aus dem Computer aus. schon so einfach, das haben wir schon einmal gemacht. Das ist das Bild, das wir haben. Ich muss es größer machen. Jetzt kommen mir im Moment andere Dinge in den Sinn. Ich habe diese Farbpalette hier und ich dachte darüber nach, sie unten auf der Seite zu verwenden. Ich gebe ihr einen neuen Touch. Okay. Ich ändere die Größe und lege es nach unten Ich brauche es gleich in der Ecke. Ändere die Größe auf diese Weise. Okay, also werde ich ein Rechteck erstellen und ihm einen Farbbereich geben, ich verkleinere es, kopiere es und mache ein weiteres größeres Rechteck Okay? Jetzt habe ich beschlossen, das andere Rechteck auf die Unterseite zu legen und das andere, ich füge einen Zoll hinzu. Im unteren Rechteck habe ich die Farbpalette hinzugefügt. Dann ändere ich die Größe, mache es kleiner und lege es in die untere Ecke Jetzt habe ich genau hier einen Stempel, den ich selbst erstellt habe. Diesen Stempel musste ich unten platzieren. Nur angehängt, um meine Seite kreativer zu gestalten , indem ich zum Beispiel diese Textur hinzufüge, einen Stempel hinzufüge, diese Farbpalette hinzufüge. Einige Ideen kommen Ihnen vielleicht bei der Arbeit am Design. Manche Ideen haben Sie vielleicht schon einmal. Kombiniere einfach all die Ideen, die du im Kopf hast , und versuche , dir etwas Kreativeres auszudenken und denke nicht immer auf die klassische Art wie alle, die versuchen, kreativer und offener zu sein , neue Dinge auszuprobieren. Versuchen Sie nun, das ganz oben anzuordnen. Jetzt habe ich noch einen Stempel hier. Ich mache Mist und wähle einen aus , um ihn auch am Ende der MyPage zu platzieren Wir fahren mit dem nächsten Unterrichtsleitfaden fort. 14. Erstellen der letzten Seiten: Also, hallo Leute, jetzt werden wir die endgültige Hauptseite für unsere Website erstellen. Ich habe gerade eine weitere Seite erstellt, sie vergrößert und eingerahmt. Dann habe ich einfach über Tiko oben geschrieben und dann wird es fett gedruckt sein Dann habe ich IFRS verlassen und über die Marke gesprochen. Alles, was du sagen kannst, ein Beispiel. Kein Problem. Und lege es auch in die weiße Farbe. Dies wird die A-us-Seite sein. Jetzt werde ich unten auf jeder Seite, die ein Kontakt sein könnte, das Quadrat angeben, das ich haben musste , oder, in meinem Fall, 2025, alle Rechte vorbehalten. Das ist also so einfach. Jetzt werden wir ein Rechteck erstellen. Wir machen es abgerundet und dann größer. Ich mache einen Teil davon außerhalb der Seite. Erstellen Sie dann ein weiteres Rechteck darüber. Ich lege es nur über den Teil, den ich löschen muss. Wählen Sie beide aus und gehen Sie dann zu der Option hier oben und wählen Sie Subtrahieren. Auf diese Weise haben wir den Teil gelöscht, den wir außerhalb der Seite nicht benötigen Wir lassen nur die Hälfte des Rechtecks übrig. Wählen Sie nun das Rechteck aus, und ich wähle ein Bild aus meinem Computer aus. Jetzt lege Mist hinein und ich versuche , dieses Bild zu positionieren. Über uns Paige, ich möchte, dass es einfacher wird. Ich brauche nicht viele Informationen, wie wir sie in den Pergus-Lektionen gesehen haben Wir gehen hier viel einfacher vor, aber kreativ und elegant Jetzt versuche ich nur, das Bild auszurichten. Der beste Weg, den ich tun muss. Ich werde es auf den Boden legen. Dann richte ich auch den Text aus. Was ich jetzt tun werde, ich werde dieselbe Seite kopieren und dann einige Elemente löschen, die ich nicht benötige. Kopiere das 2025, das für die rechte Seite reserviert , lege es nach unten, und dann ändere ich die Farbe des Quadrats. So einfach. Das wird die Kontaktseite sein. Also werde ich mit dem Rechteckwerkzeug ein großes Rechteck erstellen. Ich gebe ihm eine Farbe. Es wird vielleicht rot sein. Okay. Dann erstelle ich ein kleines horizontales Rechteck. Ich erstelle das erste. Dann kopiere und erstelle noch einen und noch einen. Das dritte, ich möchte, dass es größer und dann erstelle ich ein anderes, lege es nach unten. Das wird kleiner sein , weil es unten sein wird. Okay, ich gebe ihr eine kontrastreichere Farbe, weil ich möchte, dass sie das wichtigste Element ist das der Benutzer sehen kann, wenn er auf die Seite geht. Ich werde jeder Box einen Namen geben. Der Name wird fett und kontrastreich sein . Ich werde den vollständigen Namen, die E-Mail-Adresse und Ihre Nachricht sagen E-Mail-Adresse und Ihre Nachricht Das wird die Box für E-Aufgaben sein. Unten sage ich Nachricht senden. Das wird mein Hintern sein, okay? Okay. Die Idee hier ist, dass der Kunde eine Nachricht senden kann, indem er seinen Namen E-Mail-Adresse eingibt, eine beliebige Nachricht schreibt Sie mit der Marke kommunizieren möchten, und dann auf Nachricht senden klickt und die Marke wird seine Nachricht erhalten. Okay, ich mache den Kontakt einfacher. Jetzt werde ich unten das, was in den vorherigen Lektionen geschrieben wurde, die E-Mail, die Nummer, die Stadt und die Links für die Social-Media-Seite mitbringen die E-Mail, die Nummer, . Versuche, sie sehr gut aufeinander abzustimmen. Okay. Okay, so einfach. Die Seiten sind nicht kompliziert. Sie haben alle notwendigen Dinge, aber auf elegante Weise. Jetzt werde ich die Farbe dieser Informationen ändern. Okay. Okay. Okay, das haben wir inzwischen gebraucht. Also habe ich sie genau da hingelegt. Und das ist es. Dies sind die Hauptseiten, die wir für unsere Website benötigt haben. Wir haben sie bereits erstellt. Wir wollen mehr mit dem Tippfehler, der Farbe sehen. Wir werden sehen, was die Interaktion ist. In unserem Kurs gibt es noch viel mehr zu behandeln. Also lass uns weitermachen. 15. Arbeiten mit Tippfehlern in der Benutzeroberfläche: Typografie ist der grundlegendste Teil eines Designprojekts Daher ist es sehr wichtig, dass wir einen klaren Prozess für die Wahl des Telefons haben uns nicht nur sehr klare Regeln für die Erstellung der typografischen Palette geben, All dies wird uns nicht nur sehr klare Regeln für die Erstellung der typografischen Palette geben, sondern es uns auch ermöglichen , einen Vorschlag zu erstellen , der viel aussagekräftiger ist Wir müssen es auf das Ziel unseres Kunden abstimmen und uns von den anderen abheben Typografie ist einer der grundlegendsten Bestandteile des Designvorschlags Gehen Sie also so weit zu bestätigen, dies mehr als 90% des Projekterfolgs ausmacht Daher müssen wir bestimmte Grundregeln einhalten, um den Erfolg unseres Produkts sicherzustellen Die erste dieser Grundregeln besteht darin, jedes dieser Projekte unterschiedlich zu behandeln. Jedes Projekt ist ein anderes Wort. Das heißt, wenn mir jedes Produkt zur Verfügung steht, an dem ich arbeiten kann, möchte ich nicht dieselbe Strategie , die ich in einem früheren Produkt eingeführt habe, auch in diesem neuen Produkt anwenden , die ich in einem früheren Produkt eingeführt in diesem neuen Produkt Mit jedem Produkt lösen wir ein Kommunikationsproblem Dies spiegelte sich im Text wider. Wenn wir über Texte sprechen, sprechen wir über Typografie Um für jedes unserer Projekte eine Auswahl an Typografie zu treffen, kommunizieren wir mit unserem Benutzer Die zweite dieser Grundregeln ist, dass wir einen sehr klaren Zweck oder die Wahl der Schriftart haben müssen Die zweite dieser Grundregeln ist, dass wir Wahl der Schrift ein ganz klares Ziel verfolgen müssen. Die Entscheidung muss aus der Ausrichtung unseres Kunden und unserer Marke resultieren. Da jede Entscheidung, die wir in Bezug auf Typografie treffen , für jedes Problem, das wir zu lösen versuchen, spezifisch ist Problem, das wir zu lösen versuchen Daher bringt die Entscheidung für eine Schrift viele Überlegungen mit sich Was wir beachten sollten. Ein Teil der Überlegungen ist, dass Typografie ein Gleichgewicht zwischen etwas Emotionalem, das mit dem Benutzer in Verbindung steht, und etwas Natürlichem sein muss ein Gleichgewicht zwischen etwas Emotionalem, das mit dem Benutzer in Verbindung steht, und etwas Natürlichem Gleichzeitig muss es eine charakteristische, aber auch praktische Persönlichkeit haben, die wir zu verschiedenen Zeiten verwenden können Schließlich muss es lesbar sein, damit Benutzer keine Probleme beim Lesen des Textes der Webseite haben. Aber wir müssen es auch flexibel sein , damit es uns in einem anderen Kontext dient. Eine weitere Überlegung, die wir bei der Auswahl unserer Telefone berücksichtigen müssen , ist, dass Schriftarten uns helfen sollten, die Lesbarkeit zu optimieren. Das heißt, dass unser Benutzer sie richtig lesen kann , um die Barrierefreiheit zu verbessern Mit anderen Worten, bei der Auswahl dieser Schrift werden sie keine Leseprobleme haben, sodass jeder den Inhalt lesen kann Die letzte Sache ist die Optimierung der Benutzerfreundlichkeit. Durch diese typografische Auswahl Benutzer die Seite auf sehr einfache Weise durchsuchen, um Inhalte zu finden Die dritte dieser Regeln ist, dass wir das Hauptmerkmal der Schrift gut kennen müssen Hauptmerkmal der Schrift gut kennen Zum Beispiel die Hauptklassifikation, die charakteristischsten Merkmale und der Unterschied zwischen ihnen. Wenn wir eine Schriftart auswählen, sprechen wir auch über verschiedene Dinge , die eine Kettenreaktion hervorrufen. Wählen Sie beispielsweise die Schriftart aus, und dabei müssen wir die Größe berücksichtigen. Bei der Auswahl der Größe berücksichtigen wir den Zeilenabstand. Und bei diesem Abstand müssen wir entscheiden, welche Hintergrund- und Schriftfarbe verwendet werden soll. Ein weiteres wichtiges Merkmal bei der Auswahl der Schrift ist die Höhe des X. Wir können zwei verschiedene Schriftarten verwenden, aber sie haben dieselbe Punktzahl, und wenn wir sie vergleichen, werden wir feststellen, dass die typografischen Felder unterschiedlich sind Nachdem wir eine Schriftart und die Größe, die wir für den Text verwenden werden, ausgewählt haben, eine der wichtigsten Beziehungen und ist eine der wichtigsten Beziehungen und Entscheidungen, die wir treffen werden, die Größe des Leads Ein guter Ausgangspunkt ist es, die Schriftgröße mit 1,5 zu multiplizieren und von dort aus die Werte entsprechend der von uns verwendeten Schriftart zu ändern . Wie beim redaktionellen Design ist es wichtig, dass wir die Anzahl der Zeichen berücksichtigen , die wir pro Zeile verwenden. Da ein Absatz mit einer sehr kurzen oder sehr langen Kontextzeile die Lesbarkeit beeinträchtigen kann Dies ist ein Leitfaden , den wir als Grundlage mit unterschiedlichen Punktzahlen verwenden können , um sicherzustellen, dass der Haupttext unserer Website auf allen Geräten lesbar bleibt Schließlich ist eines der wichtigsten Merkmale, die bei der Auswahl eines Telefons zu berücksichtigen sind, das Format. Normalerweise finden wir zwei Formate, TTF und WOFF. Der große Unterschied zwischen diesen beiden Formaten darin, dass das WFF gleichgesetzt wird und Verwendung in einem digitalen Produkt vorgesehen ist, während das TTF Informationen für Druck und Bildschirm enthält Jetzt möchte ich einige Tipps für eine gute Schriftauswahl mit Ihnen teilen. Als Erstes empfehle ich, auf der Website eines Gießereihauses direkt nach den Quellen zu suchen , bei denen es sich um die Unternehmen handelt, die für die Einstellung und Verteilung der Gelder verantwortlich sind Einstellung und Verteilung der Einige meiner Lieblings-Gießereien sind Pen gram Pen Gram, Clean Type, Snopon und Grilli Type Der zweite Tipp ist, drei sehr unterschiedliche Schriftgrößen als Basis zu verwenden drei sehr unterschiedliche Schriftgrößen als Auf diese Weise können Sie Lesemomente schaffen , sodass der Benutzer einen Kontrast zwischen den Schriftarten erzielen und so jeden Text hervorheben kann. Denken Sie auch daran, dass wir diese von uns ausgewählten typografischen Grundlagen Gestaltung unseres Produkts ändern können Der dritte und letzte Tipp , den ich mit Ihnen teilen möchte, ist , die Anzahl der Schriftarten zu begrenzen , die Sie im Produkt verwenden Es ist sehr wichtig , eine Quelle als Grundlage zu haben und weitere Quellen hinzuzufügen falls dies unerlässlich ist oder einen Mehrwert für das Produkt generiert. Wir müssen die Anzahl der verfügbaren typografischen Gewichte berücksichtigen die Anzahl der verfügbaren typografischen Gewichte , die wir in unserer Basistypografie haben und sie verwenden, bevor wir nach weiteren Quellen suchen beispielsweise an einem Projekt arbeiten, sendet Ihnen der Kunde möglicherweise ein Handbuch mit verschiedenen Schriftarten Aber für unser Projekt werden wir nach unserem Tippfehler suchen und uns auf eine oder zwei Schriftarten beschränken Die erste, die wir auf der Speisekarte haben, ist die Schriftbucht. Sie können es einfach herunterladen und dann öffnen und im Hintergrund laufen lassen. Wie Sie sehen, hat es viele verschiedene Telefone. Jede Schrift hat unterschiedliche Gewichte und unterschiedliche Längen. Sie können ein Beispiel auswählen, mit dem Sie arbeiten möchten, und es wird auf Ihrem Computer aktiv sein. Ein weiteres auf der Liste ist Google Phones. Von hier aus können wir nach Schriftarten suchen , die gut zu unserem Projekt passen könnten. Wie Sie sehen, suche ich nach etwas wie example, mocerf und auch clean Andere haben vielleicht einige geometrische Formen. Ich habe bereits einige der Dinge ausgewählt, mit denen ich arbeiten möchte, und dann klicke ich, um sie herunterzuladen. Okay. Ein weiterer, den Sie ebenfalls überprüfen sollten , ist Font Share. Sie können eine Schriftart auswählen und dann die gesamte Familie anzeigen. Sehen wir uns ein Beispiel an: Sie haben normale Mittelkursivschrift und die Fettschrift K. Sie können sogar überprüfen, wie Zahlen aussehen und Buchstaben, wie sie aussehen. Es gibt Ihnen auch die Möglichkeit, mit der Größe zu spielen und zu sehen, wie der Text aussehen wird , wenn er nass und schon nass ist. Wie der Text mit unterschiedlichen Größen und Schriftstärken aussehen wird . Das ist eine sehr schöne Website, um einen Film zu starten. Eine andere, die Sie auch überprüfen können, ist mplust.com. Hier kannst du auch sehen, dass es viele verschiedene fehlerhafte Optionen gibt und jede Schrift mag eine Auswahl oder sogar, wie sie aussieht, ein Beispiel auf einem anderen Produkt Hier können Sie ein kostenloses Telefon kaufen oder finden, aber es gibt 1 Million mehr Auswahlmöglichkeiten. Mein Telefon ist auch ein weiterer Ort zum Durchstöbern. Sie finden auch viele Optionen, die Sie kaufen können , oder einige davon sind kostenlos. Ich zeige dir auch schon, wie es auf deinem Grafikprojekt aussieht. Nachdem Sie also Ihre Telefone heruntergeladen haben und sie im FeGMA online verwenden müssen, müssen Sie den Font-Installer herunterladen Sie laden es einfach herunter und öffnen es und installieren es und lassen es laufen Jetzt werden wir uns für unser Projekt entscheiden und die von uns ausgewählten Schriftarten anwenden. Das Erste, was ich brauche , ist, dass ich eine andere Art von Schrift erstelle und die beste Auswahl überprüfe. Also die erste, die ich hier schreibe und die ich wählen werde , ist Donser Okay? Ich werde versuchen, verschiedene Gewichtsklassen zu überprüfen, die funktionieren, und kopieren und versuchen, verschiedene Gewichte zu wählen. So sah es in einer Schüssel aus, wie es in einer mittleren Schale aussah, und so sah es in einer normalen Ich glaube, ich werde mich schon jetzt für diese Wahl entscheiden. Lassen Sie uns also löschen und diesen Tippfehler auf meine Arbeit anwenden. Ich werde vielleicht vor einigen anderen Typen nachschauen. Aber nein, ich werde mit offenem Menschenverstand nähen. Das ist die Seite. Du musst hier besonders mutig sein. Ich denke nicht fett oder extra mutig und entscheide mich für extra mutig. Für den nächsten Text werde ich dieselbe Schrift wählen, aber auf andere Weise. Ich werde es auf Medium oder Regular setzen. Oder vielleicht Seibold das Medium. Danach. Also wähle ich ein Medium. Jetzt machen wir dasselbe für den anderen Text. Das Logo wird Seher öffnen, auch extra fett. Bei den anderen Optionen wähle ich eine, die mir gefällt. Um Stifte zu öffnen, und dann werde ich schauen, ob ich Medium wähle, bei fett gedruckten Kindern Medium. Machen Sie dasselbe für die anderen. Ich habe hier zwei Hauptseiten , weil ich einige Ideen zur Animation habe Ich brauche vielleicht zwei Seiten, aber wir werden uns später ansehen. Also machen wir dasselbe für dieselbe Seite. Okay. Für die Sammlungsseite mache ich dasselbe, wähle zusätzliches Board für den Titel und wähle dann erneut. Also, wie ihr hier gesehen habt, Leute, arbeite ich nur mit einer Schrift und mit unterschiedlichen Schriftstärken. Also habe ich genau hier gewählt. Macht nichts, Leute, wenn manche Strukturen anders aussehen. Das ist nur ein Beispiel. Wir werden später die richtige Struktur sehen wenn wir animiert sind. Hier versuche ich nur, mit dem Weihnachtsmann zu experimentieren. Okay? Aber du hast das Design der Sammlungsseite schon auf der Sperrseite gesehen. Das ist nur ein Experiment. Okay. Also wählen wir immer wieder die Schriftarten aus, die wir benötigen, und wenden sie auf unsere Seite an. Das ist nichts, was du siehst , Leute, die dasselbe tun werden. Manche Titel werden dieselbe Schrift haben, aber mit einer anderen Schriftstärke wie fett und normal oder mittel Das Gleiche gilt für „Über uns“. Der Titel wird sicher fett sein und der Text wird entweder mittel oder normal sein. Da ist er. Okay, ich ändere die hier in Kleinbuchstaben. Okay. Okay. Okay. Okay, mach dasselbe für den Rest. Bleiben Sie informiert mit den gleichen unterschiedlichen Eigenschaften. Ich beschränke mich hier so sehr darauf, nur mit einer Schrift zu arbeiten Das ist meiner Meinung nach die beste Art zu arbeiten. Ich werde nie weiter als zwei Schriften gehen. Ich bevorzuge es immer, nur mit einer oder maximal zwei Schriftarten zu arbeiten . Das ist die sauberste Art zu arbeiten, aber trotzdem kann man mit vier oder drei mehr machen Das sind deine Ideen. Aber wie dem auch sei, ich werde dir niemals raten , maximal vier Telefone zu telefonieren, okay? Und am besten arbeitet man mit einer oder zwei Schriften. Das schafft Konsistenz und sorgt nicht für Chaos im Design. Okay, das ist es also, Leute. Das müssen wir über den Tippfehler wissen. Ich hoffe, du verstehst sehr gut, wie man arbeitet. Wir haben es nicht kompliziert. Wir haben alles Notwendige gesehen , um ein großartiges, erfolgreiches Design zu erstellen. Also machen wir weiter. In der nächsten Lektion werden wir sehen, wie man mit Cool arbeitet. 16. Arbeiten mit Farben in der Benutzeroberfläche: Normalerweise ist die Farbe auf einer Website funktionsfähig zeigt die Aktionen an, die wir auf der Website ausführen können. Außerdem wird hervorgehoben, welche Farben mit der Marke verwandt sind. Wir glauben jedoch, dass wir ihm zu viel kreative Jugend geben können. Wenn wir sie richtig einsetzen, werde ich in dieser Hörprobe über die Verwendung von Farben und Webseiten sprechen und darüber, wie man sie kreativer einsetzt. Das ist ein Creative-Briefing. Angeblich habe ich mich selbst geschaffen. Wir werden in der Lage sein zu verstehen, was die richtigen Verwendungszwecke sind und welche Farbpalette sie in ihrer Marke haben. Wie Sie hier sehen, ist die Farbpalette sehr reichhaltig. Es hat warme Creme, Waldgrün, goldenen Sand sowie Korallenrot und sanftes Beige. Die Informationen, die wir hier für jede Farbe haben, den Code von G, RGB und CMYK. Das ist es, was die Marke von ihrer Farbpalette erwarten möchte. Unten können wir die Farbanwendung, die Hintergrundfarben, die Vordergrund- und die Textfarbe sowie das Website-Element haben. Ich gebe Ihnen ein Beispiel, wie die Farbe zu jedem Beispiel passen kann, die Farbe des Textes und die Farbe des Hintergrunds. Es ist sehr wichtig , jeden von ihnen durchzugehen und etwas über sie zu lernen. Ein sehr wichtiges Element ist die Kontrastkombination. Wir haben einen hohen Kontrast und einen mittleren Kontrast. Das ist alles, was ich für optimale Lesbarkeit und Zugänglichkeit aller Markenmaterialien sorge Die Farbberatung der Marke. Hier finden Sie auch nützliche Informationen zur primären Verwendung, zur unterstützenden Farbe und zur Barrierefreiheit. Wie Sie sehen können, finden Sie hier alle Informationen. Hier geht es um die Farbanwendung für die Marke. Wenn ich also an der Webseite arbeite, müssen wir uns genau an diesem Briefing orientieren. Jetzt möchte ich Ihnen etwas zeigen, das ebenfalls sehr interessant ist, diese Website namens Colors. Hier können wir mit der Generierung einer Farbpalette beginnen. Wir werden versuchen, die Farbpalette aus dem, was wir im Briefing haben, zusammenzustellen Wenn Sie sich ein Bild von den Farbpaletten machen möchten , mit denen Sie hier arbeiten können, erstellen Sie einfach schnell eine Farbpalette und klicken Sie weiter auf die Leertaste, um eine andere Farbpalette Klicken Sie immer auf die Leertaste, um eine andere Farbpalette zu erhalten. Wenn Sie zum Beispiel eine wichtige Farbe finden und diese beibehalten und die anderen Farben ändern möchten , loggen Sie sich einfach ein. Okay? Oder wenn du eine Farbe loswerden willst, klickst du einfach auf X. Jetzt, wie du hier siehst, wenn ich auf das Leerzeichen klicke, stelle ich eine andere Farbe ein. All diese Optionen, die wir hier haben, Sperren und Ändern. Um also dieselbe Farbe zu haben, bringen wir einfach den Code mit und fügen ihn in jede dieser Farbpaletten ein. Dann sperren wir es mit demselben für die andere Farbe. Bis wir diese Farbpalette haben, haben Sie sie hier vor der Ansicht. Jetzt werde ich es einfach herunterladen. Okay. Sie können auch die Trendfarbpalette überprüfen Sie geben Ihnen eine Vorstellung von einigen davon, die Sie für Ihre Arbeit verwenden können Eine weitere Möglichkeit, den Eckenkontrast zu überprüfen, um dies zu überprüfen. Hier fügen Sie den Hintergrund- und den Vordergrundtext ein, den Sie verwenden möchten, und prüfen ob der Kontrast lesbar und gut ist. Wie Sie hier gesehen haben, beantworten wir nur den Code der Text- und Hintergrundfarbe. Wir wollen aus dem Briefing wählen, wir wollen die Codes auswählen. Wie Sie hier sehen, testet es sehr gut. Auf diese Weise wissen wir, dass wir mit dieser Farbe sehr sicher arbeiten können . Sie können eine andere Farbe im Auge behalten. Und bevor wir sehen. In diesem Beispiel ist die Farbe des Hintergrunds das erste Grün und die Farbe ist sanftes Beige. Es sagt also sehr gut und gib ihm eine gute Zahl. Ich weiß also, dass ich auch diese Art von Kombination verwenden kann. Dies ist eine weitere Website mit einem Farbtext. Sie können auch alle Links zu allen Quellen im Unterrichtsmaterial angeben wollen . Vielleicht habe ich eine andere Farbpalette und ich habe auch eine andere Art von Kontrastfarbe. Wie wir gesehen haben, habe ich einige Hintergrund- und Vordergrundfarben hinzugefügt und angegeben, wie sie sich gegenseitig kontrastieren. Das wird ein Leitfaden sein, den ich bei meiner Arbeit verwenden kann? Außerdem habe ich für jede Farbe, die wir dort gesehen haben, einen Grad erstellt. Jetzt werde ich die Farben auf meine Webseite anwenden und dazu möchte ich mit der Option Ich lasse die Farbe fallen, indem ich jedes Objekt auswähle , auswählen. Ich wähle das Soft-Badge für die Hintergrundfarbe der Hauptseite aus. Dann wähle ich das Colalrot für dieses Layout. Das gleiche Rot für dieses Layout. Spritze es. Sie sehen interessanter aus. Jetzt werde ich auch die Farbe Rot für das Logo wählen. Ich werde die Farbe für die Option wählen. Sie halten sich immer an die Farbvorgaben Ihres Kunden. Zu Grün gezwungen, wird der Geborene auch zu Grün gezwungen, die Quadrate unten werden zu Grün gezwungen, und die Farbe des Textes wird weich sein , die Farbe hat Rollen auf jeder Webseite. also einige Farben in Gesichtern, Wir brauchen also einige Farben in Gesichtern, einige Elemente, die dominieren sollen , und wir brauchen sie, um die Aufmerksamkeit des Benutzers auf sich zu ziehen. Diese Elemente müssen wir also kontrastreich gestalten , wie zum Beispiel die Knöpfe oder sehr wichtige Informationen Okay. Also füge ich immer wieder den grünen Wald für das Element unten hinzu. Das ist weniger kontrastreich, ich möchte, dass sie es sind. Wie ich jetzt sehe, ich eine weitere Seite erstellt, das wird der Farbwähler sein Ich mache einfach ein Rechteck und wende ein Bild darauf an Ich füge die Informationen unten und erstelle dann ein kleines Quadrat. Andere Seite, es hat ein Bild und jedes Bild hat ein kleines Quadrat und auch eine kleine Beschreibung. Jetzt möchte ich die Farbe jedes Bildes auswählen und es auf dieses Quadrat legen. Also zum Beispiel die erste Farbe, sie hat diese dunklen Zeichen, setze sie auf das und auch auf dieses kleine Quadrat genau hier, es wird orangefarben sein, füge es zu diesem Quadrat Und auch hier werde ich die gleiche Farbe wie Braun hinzufügen die gleiche Farbe wie Braun Die gleiche Farbe wie das Braun. Diese Seiten werden miteinander verlinkt. Das werden wir später in der Ankeraktion sehen. Es ist so einfach, es ist nicht kompliziert. Du hast gesehen, wie wir sie mit Gott geschaffen haben, um die Farbe der Bilder an die Farbe des Quadrats anzupassen . Jetzt ändere ich immer wieder die Farben des Textes, um sie zu kontrastieren Okay. Wir fügen immer wieder dasselbe Element hinzu, dieselbe Farbe. Okay. Okay, jetzt diese Seite ein bisschen. Okay. Macht euch keine Sorgen, Leute, wenn ihr auf den Seiten etwas seht, das ihr nicht versteht, das nicht die Seiten, die wir benutzen werden. Wie ich euch schon sagte, das sind alles experimentelle Seiten. Die Seiten, die wir für unsere Unterbrechung verwenden die Seiten, die wir bereits in unseren Lektionen erstellt haben. Okay? Also lass uns weitermachen. Vielleicht ändere ich auch die Farbe dieser Seite und wähle die Sendefarbe. Natürlich steht die rote Farbe jetzt nicht im Kontrast zu der Sendefarbe, die wir verwendet haben, also ändere ich sie vielleicht in eine kontrastreichere Farbe, nämlich die sanfte Farbe. Dann die Boxen, ich werde sie ändern, um Farbe zu senden. Und auf jeden Fall brauche ich das kontrastreichste Element auf meiner Seite, hier ist der Button Ich werde alle Schaltflächen auf meiner Website hier mit einem roten Doppelpunkt versehen, sie werden in einer roten Farbe sein, was die kontrastreichste Farbe ist Ich kann auch diesen Text in Green Forest ändern. Text auch hier zu grünem Wald, und auch der andere Text. Okay? Okay. Versuche mehr mit der Farbe zu experimentieren. Also habe ich beschlossen, die Farbe der Seite auf Rand und das Quadrat auf Senden zu ändern , okay? Ich denke, das ist besser. Jede Farbe hat ihre Rolle auf dieser Webseite. Versuchen Sie, sie auf die richtige Art und Weise und entsprechend jeder Rolle anzuwenden und so, wie Sie die Augen des Benutzers lenken möchten. Abschließend werden wir über Barrierefreiheit und Farben sprechen. Wenn wir eine Webseite, eine Anwendung oder ein digitales Produkt entwerfen , ist es sehr wichtig, dass wir den Kontrast und die Barrierefreiheit der Benutzer berücksichtigen den Kontrast und die Barrierefreiheit der Benutzer Barrierefreiheit bedeutet , all diese Menschen zu berücksichtigen , die möglicherweise sehbehindert sind. Deshalb müssen wir bei der Farbauswahl und der Art, wie wir sie überprüfen, vorsichtig sein . Dafür zeige ich Ihnen zwei Tools in Figma. Es sind die gleichen, die wir am Anfang gesehen haben , die für den Kontrast Hier können wir es auch in Figma haben. Dieses Plugin heißt Kontrast. Und es zeigt uns, ob das ausgewählte Farbschema zugänglich ist oder nicht Das A bedeutet, wenn es einen sehr großen Text gibt, und das A, wenn es funktioniert, wenn es langen Text gibt In diesem Fall funktioniert es beispielsweise, wenn wir einen roten Hintergrund mit überlagerten schwarzen Typografiken oder dunklem Grün Wenn wir jedoch einen schwarzen Hintergrund mit einem roten Tippfehler haben , funktioniert dies nicht Wenn es langen Text gibt, funktioniert es möglicherweise nicht. Wir können dasselbe mit einer anderen Prüfung machen. Ich zeige dir, dass es hier zeigt, dass du sehr gut arbeitest. Wie wir bereits im ersten Teil des Kurses gesehen haben, wollte ich dir aber auch zeigen wie man das Plugin in Fegma benutzt Das war's also, Leute, so wendet ihr die Farbe für euer Ich hoffe, ihr versteht es sehr gut und ihr wisst, wie man den Kontrast nutzt und die Augen des Benutzers lenkt und auch Dinge für den Benutzer gut lesbar macht . 17. Hinzufügen der grafischen Elemente: Okay, Leute, hier werden wir einige grafische Elemente überprüfen , die wir für unsere Website benötigen werden. Grafikelemente, wir verwenden sie, um unsere Webseite zu verbessern. Machen Sie kein Chaos, indem Sie überwältigende Elemente erstellen. Wir verwenden nur Dinge, von denen wir glauben, dass sie zu unserem Design beitragen werden. Wir können hier als Beispiel in SVG auf dieser SVG-Website beginnen. Sie können viele Elemente wie ARO-Quadrate oder wo auch immer herunterladen , oder Sie können den Illustrator verwenden um Ihr eigenes Element selbst zu erstellen, zum Beispiel mit dem geometrischen Werkzeug, und sie dann als SVG oder PNG speichern Ich bevorzuge immer SVG , weil ich die Farbe direkt in der Figma ändern kann die Farbe direkt in der Figma Hier auch kostenloser Blick, das ist eine weitere Website, die Sie auch von einigen Grafiken, Texturen oder was auch immer Sie benötigen herunterladen Texturen oder was auch immer Sie benötigen Nun zurück zu unserem Projekt hier, wir haben alle Elemente, die ich brauche. Ich werde die Farbe dieses Pfeils ändern. Direkt hier kann ich die rote Farbe ändern. Das erste, was ich hinzufügen werde, ist dieser Pfeil, den ich selbst erstellt habe. Ich möchte diese rote Korallenseite anwenden. Dann noch ein Stempel, den ich auch auf das andere Layout auf einer kleinen Seite auftrage . Als erstes muss ich die Gob-Pfeile auftragen. Das wird auf jeder Seite unten stehen. Auch die quadratischen Pfeile möchte ich auf der Farbwähler-Seite bearbeiten Also bearbeite es gleich hier und ich gebe es ein bisschen. Einige kleine Elemente können auch animiert werden, wenn ich möchte. Ich kann diese quadratischen Pfeile animieren , weil mir das als Leitfaden dienen wird Ich wende die Gob-Pfeile immer wieder auf die anderen Seiten an. Okay, ziehe ein Element vor mir her, um zu sehen was ich hinzufügen werde und was nicht Das ist die Farbkollektion. Ich werde hier unten noch einen Stempel hinzufügen. Okay. Okay. Jetzt füge ich dieses Muster der Punkte hinzu. Ich möchte vor jedem dieser Bilder bearbeiten. Wie Sie gesehen haben, fühle ich mich durch die elegante Art und Weise, dieses Element hinzuzufügen, ein bisschen mehr Platz. Tun Sie das für jedes dieser Bilder? Nein, er hat auch noch eine Briefmarke. , ich scheiße es und lege es nach unten, wo es kleiner ist Okay. Okay. Ich habe auch dieses Quadrat. Ich muss es in die Mitte legen. Ich füge es meinem Schlüssel hinzu. die Sammlungsseite habe, füge ich am Ende der Kollektionsfarben Wenn ich die Sammlungsseite habe, füge ich am Ende der Kollektionsfarben dieses andere Rechteck hinzu. Ich füge dieses andere Rechteck unten hinzu. Ich füge dieses Bild hinzu, und ich füge auch diese Farbpalette unten hinzu, und dann werde ich zwei Rechtecke und eine andere Pvision erstellen und eine andere Pvision Okay. Jetzt füge ich Bilder zum oberen Teil des Bildes hinzu, ich werde zwei kleine Rechtecke erstellen Dann füge ich eine Farbe aus demselben Bild hinzu. Ich möchte, wenn der Benutzer die Farbauswahlseite besucht. Wenn er auf Explore Moe klickt , wird er zu diesem Teil der Seite weitergeleitet. Jetzt füge ich diesen kleinen Rechtecken Farbe hinzu. Wählen Sie mit dem Augentropfen die Farbe aus dem Bild aus. So einfach. Jetzt füge ich hier eine kleine Beschreibung hinzu. Nun, wie Sie sehen, habe ich diese kleine Extraktorfarbe genau hier mit HDML erstellt diese kleine Extraktorfarbe genau hier mit HDML Hier, wenn Sie diese Datei öffnen, können Sie diesen Extraktor haben Sie laden einfach ein beliebiges Bild hoch und erstellen standardmäßig eine Farbpalette und fügen diese Kreise Sie können die Kreise verschieben, um verschiedene Farben zu erhalten und eine andere Art von Farbpalette Sie können auch auf die Plus-Schaltfläche klicken und Ihrer Farbpalette mehr Farbe hinzufügen, oder Sie können einen Teil der Farbpalette wegziehen und entfernen. Bei jeder Farbe geben wir dir auch den Hex-Code. Das wird also für jede Arbeit oder jedes Projekt, das ihr macht, sehr nützlich sein , Leute. Also werde ich es für dich und das Material für den Kurs vermieten. Wir wenden immer wieder einige Elemente auf unsere Seiten an. Wir fügen diese kleinen Kreise auch zur Farbseite der Kollektion hinzu. Gehen Sie, um die Lücken hinzuzufügen und zu füllen, aber auf ausgewogene und kreative Weise. Wie ihr hier gesehen habt, Leute, etwas, das euch vielleicht an dieser Farbseite auffallen wird, habe ich diese PNG-Datei eingefügt, die wir in Photoshop erstellt haben. Das Bild hat es einfach über den Hintergrund gelegt, um es auch größer zu machen , und es wurde Teil des Hintergrunds der Seite. Sie füllen die Lücken mit diesem grafischen Element aus. Und wie Sie gesehen haben, haben wir den Farbwähler und die Seite dafür erstellt, und es sah auch sehr gut Dies sind optionale Seiten, die Sie erstellen können, aber es ist auch eine sehr nette und kreative Möglichkeit für den Benutzer, die Sammlung auf eine andere Art zu erkunden und ihr ein anderes Erlebnis zu bieten Jetzt beenden wir den gesamten Designprozess und beginnen mit dem Animationsprozess. 18. Weitere Informationen zu Motion Design: I im Mitten im digitalen Design kann die Einbeziehung von Animationen in einen visuellen Designvorschlag den Unterschied zwischen einer ausgezeichneten und einer normalen Website ausmachen . Deshalb werden wir in dieser Lektion über Motion Design sprechen. Das zu berücksichtigende Grundprinzip sowie die Möglichkeiten und Tools, die uns heute zur Verfügung stehen , um Animationen für das Web zu erstellen. Lass uns anfangen. Sobald wir die visuelle Designphase unseres Projekts abgeschlossen haben, können wir mit dem Hinzufügen von Animationen, Interaktionen und anderen grafischen Elementen beginnen . Das wird dem Vorschlag viel Interaktivität verleihen und unser Design viel interessanter machen In dieser Lektion werden wir über Bewegungsdesign sprechen, das alle Animationsvorschläge umfasst , die wir auf unserer Website erstellen werden Zu Beginn werden wir über einige Grundprinzipien der Animation sprechen , die es uns ermöglichen, mit der Animation von Vorschlägen aufzuhören , die sehr innovativ sind und viel Persönlichkeit haben Das erste zu berücksichtigende Prinzip ist die Geschwindigkeit, die sich auf die Dauer der Animation von Anfang bis Ende bezieht der Animation von Anfang bis Ende Wenn die Dauer kurz ist, sagen wir weniger als eine Sekunde, sorgen wir dafür, dass sich das Element sehr schnell bewegt. Wenn die Dauer jedoch viel länger ist, lassen wir die Animation viel langsamer aussehen. Und das zweite Prinzip, das berücksichtigt werden muss, ist Ethen. Was ist die Beschleunigung oder die Beschleunigung der Elemente Warum passiert die Animation? Viele Standardanimationen sind linear, wodurch sie etwas dualer und seriöser wirken. Aber wenn wir mit diesem Element spielen, können wir Animationen erstellen , die viel ausdrucksvoller sind und viel mehr Persönlichkeit haben. Um dieses Prinzip besser zu verstehen, gibt es Tools, die es uns ermöglichen, Veränderungen in Geschwindigkeit und Lockerung zu visualisieren und so zu verstehen wie sich jedes einzelne auf unsere Animation auswirkt Diese Website namens eins.com ermöglicht es uns beispielsweise, mit verschiedenen Werten zu spielen, um die Veränderungen zwischen den beiden zu verstehen Um die Dauer oder Geschwindigkeit zu starten, die sich darauf bezieht, wie lange eine Animation vom Anfang bis zum Ende dauern kann, beträgt der Standardwert in diesem Fall 1.000 Millisekunden Das ist 1 Sekunde. Wenn ich diesen Wert auf einen viel kleineren Wert ändere, können wir sehen, dass die Animation viel schneller abläuft. Ich belasse den Wert bei Tausend. Und auf der linken Seite können wir die Lockerung untersuchen. Das ist die Beschleunigung oder die Beschleunigung der Elemente Lockerung wird anhand der Kurven visualisiert , die einem mathematischen Wert entsprechen Einfach in bedeutet, dass unsere Animation gegen Ende schneller wird Und wenn ich den Wert des Einfachen ändere, sehen wir, dass diese Beschleunigung viel deutlicher wird. Umgekehrt bedeutet der einfache Ausgang, dass sich unsere Animation am Anfang beschleunigt Und dann wurde es langsamer, als das Ende kommt. Wie wir in diesem Beispiel sehen können, jede dieser Beschleunigungsoptionen hat jede dieser Beschleunigungsoptionen einen anderen Wert auf der Sure-Kurve Dieser Wert kann dem Projektentwickler übermittelt werden , um sicherzustellen, dass die Animation so ist, wie wir sie uns vorstellen guter Letzt bedeutet die einfache Eingabe, dass sich die Animation am Anfang und auch am Ende beschleunigt , was ein tieferes Verständnis von Easing und Wir können anfangen, Animationen zu generieren, die viel interessanter sind und viel mehr Persönlichkeit haben zum Beispiel mit den Werten für Beschleunigung und Geschwindigkeit spielen, können wir einen Animationsvorschlag wie diesen Wir können sehen, wie sich der Animationsvorschlag und andere Details bewegen Wenn die Person scrollt, versucht sie, die Marke widerzuspiegeln. Okay. Das bringt uns zu einem sehr wichtigen Punkt, was wir in unserer Animation verwenden werden. Das liegt an den Eigenschaften der Marke, mit der wir arbeiten. Davon werden sich viele unserer Entscheidungen leiten lassen, wenn es um Animationen geht. Und dann wird dasselbe passieren, wenn die Marke respektlos ist. Zum Beispiel kommunizieren Hilfsgeräte dieser Marke auf sehr klare und sehr direkte Weise mit dem Benutzer, was sich in diesem Animationsvorschlag widerspiegelt, bei dem das und Abbildung mit sehr niedriger Geschwindigkeit und sehr beschleunigter Bewegung Seitenelement wie Text und Abbildung mit sehr niedriger Geschwindigkeit und sehr beschleunigter Bewegung animiert wie Text Ein anderer Fall ist die Lieferung von Knödeln auf der Website Melhip. Diese Website möchte ein Erlebnis bieten, das dem Videogewinn nahe kommt Verwenden Sie daher eine viel ausdrucksstärkere Animation. Und mit Ressourcen wie Rebounds und anderen Elementen, um Ihre Animation viel unterhaltsamer zu gestalten und die Botschaft nicht einfach direkt zu vermitteln Und schließlich versucht diese Marke von Haushaltsartikeln, in der Form, wie sie auf ihrer Website präsentiert wird, viel zarter und subtiler zu sein Dies spiegelt sich auch in den Animationen wider, die eine viel langsamere Geschwindigkeit und sehr subtile Bewegungen aufweisen , die der Persönlichkeit der Marke entsprechen. Für unser Projekt werden wir interessantere Animationen verwenden. Es heißt Parallex Animation. Parallex-Animation ist eine Technik zur Gestaltung von Websites Bodenbilder langsamer bewegen als Bodenbilder, wodurch , bei der sich Bodenbilder langsamer bewegen als Bodenbilder, wodurch eine Illusion von Tiefe und Immersion entsteht, eine Illusion von Tiefe und Immersion entsteht würde man aus einem Autofenster in der Nähe eines Objekts schauen, schnell vorbeiziehen und die Landschaft scheint Landschaft Wir werden sehen, wie man das macht und wie man es anwendet. Für ein Projekt wie dieses müssen Sie dem Kunden beispielsweise Beispielreferenzen mitteilen. Um sich auf die Art der Animation einzustellen, die sie in der Entwicklung implementieren werden . Daher ist es sehr wichtig, dass wir uns an die Leute anpassen, die für die Umsetzung der Animation verantwortlich sein werden . Da die Tools, die Menge der Animationen oder der Aufwand, sie zu implementieren , je nach Projekt und verfügbarer Zeit variieren können . Schließlich sind dies die Programme, die ich am häufigsten verwende und empfehle, um Animationen für Webseiten zu erstellen. Erstens gibt es After Effect , eines der am häufigsten verwendeten Programme der Welt. Zweitens gibt es Ate, ein Tool, mit dem Sie die Animation , die wir nach Effect erstellt haben, in einem Format exportieren , die wir nach Effect erstellt haben, in einem Format das die Implementierung dieser Animation auf der Seite erleichtert. Schließlich gibt es Green SOC, eine Codebibliothek, die für Animationen geeignet ist und die es wert ist, gelernt zu werden für Animationen geeignet ist und die es wert Wenn Sie an der Entwicklung der Seite interessiert sind , auf jeden Sobald wir den Animationsvorschlag fertiggestellt haben, erstellen wir die Interaktion und die Mikrointeraktion auf der Website. 19. Erstellen der vertikalen Parallel-Animation: Oh Um eine Mikrointeraktion in der Benutzerinteraktion zu erzeugen, müssen wir verstehen, was wir mit unserer Website implementieren können, was sie sind und wie sie erstellt Hier gehen wir detailliert auf das für das Webdesign wesentliche Thema ein. Lass uns anfangen. Eine Mikrointeraktion in einem Produkt ist eine Interaktion, die es den Benutzern ermöglicht oder ihnen hilft, die Aufgabe zu erledigen, entweder von der Startseite über das Projekt bis hin zum Erreichen und Weiterkommen geht. Mikrointeraktionen treten überall auf dem Handy, auf dem Computer, in unserem Haushaltsgerät oder sogar in der Umgebung Im Bereich des digitalen Designs haben wir mehrere Beispiele. In den Schaltflächen, der Schriftrolle oder in der Navigationsleiste. Mikrointeraktionen spielen eine sehr wichtige Rolle bei der Benutzererfahrung, da sie uns helfen, durch Interaktivität die Benutzerfreundlichkeit eines Produkts zu verbessern die Benutzerfreundlichkeit eines Produkts Ich werde Ihnen einige Fälle für die Arbeitsstudie zeigen. Ihre verschiedenen Mikrointeraktionen wurden gut umgesetzt. Auf dieser Website zum Beispiel erscheinen die Elemente auf wunderschöne Weise, erscheinen die Elemente auf wunderschöne Weise sodass der Benutzer das Erlebnis bereits spürt. Es sieht so aus, als müssten Sie die Website genauer erkunden. Auf dieser Website tritt die Mikrointeraktion der Art und Weise, wie sie erkannt wird, ein. Es musste den Benutzern die Idee vermitteln , dass er etwas sehr Interessantes sehen wird . Auf dieser Website gibt es auch eine Mikrointeraktion, bei der Sie den Benutzer auffordern, das Menü zu öffnen, um in den anderen Bereichen navigieren zu können , während sie sich eingepflanzt haben Das Logo ist gut stehen und das Element wird langsam übergangen Es bietet eine sehr gute Lesbarkeit des Projekts und bietet auch eine Möglichkeit, auf dem Bildschirm mit dem Projekt zu interagieren Jetzt werden wir mit dem Prozess unserer Interaktion beginnen. Das erste, was wir hier erstellen müssen, ist die vertikale Parallaxenanimation Und dafür werden wir viele separate Teile und Frames von der Sammlungsseite haben viele separate Teile und Frames von der Sammlungsseite Ich habe den Teil, in dem wir Erdtöne haben, kopiert und eingefügt Dazu gehören ein Rechteck mit dem Bild und diese Erdfarbengrafik. Ich habe es nur in einen Rahmen eingefügt und dann einen weiteren Rahmen kopiert und eingefügt. Und dieses Mal werde ich es unten vergrößern. Dann öffne ich die Grafik. Eine Seite wird nach oben gehen und die andere wird es nach unten drücken. Und wie Sie hier sehen, positioniere ich das Quadrat der Natur draußen so und das Quadrat der Palette auch draußen und das Bild unten. Dann ist es wichtig, den Inhalt des Clips zu überprüfen. Auf diese Weise machen Sie alle Elemente, die Sie außerhalb der Seite haben, nicht sichtbar. Jetzt gehe ich zur Prototyp-Option und fange an, die Interaktion zu erstellen. Jetzt werden wir die Interaktion erstellen. Okay? Also klicken wir auf Navigate to Collection two, Smart Animate, und lassen es inzwischen 600 Millisekunden laufen Wir werden eine Interaktion wieder auf dieselbe Weise durchführen. Die Idee hier ist also, dass wir jedes Mal, wenn wir auf die Grafik klicken, das Bild darin öffnen und das Bild darin anzeigen. Also, wie ihr hier gesehen habt , Leute, ist das die Position jedes einzelnen unserer Elemente. Ich habe hier den ursprünglichen grafischen Teil gesehen, ich muss ihn noch mehr zusammendrücken. Also habe ich es auch gemacht. Außerdem müssen Sie am Anfang des Frames immer einen Flow erzeugen. Also habe ich den Flow schon erstellt. Klicken wir nun auf die Play-Schaltfläche und sehen wir uns an, wie unsere Animation aussieht. Also klicken wir. Also klicken wir und dann wird das Bild angezeigt. Da wir nun gesehen haben, dass wir diese Position genau hier haben, werden wir auch diese Sammlung kopieren, und als Sie dann die Position genau hier gesehen haben, habe ich sie unten außen positioniert wie wir es in der vorherigen gesehen haben, wie Sie es zuvor gesehen haben. Im Rahmen der Sammlung drei werde ich nun die Grafik und das aufgedeckte Bild nach oben schieben , sodass sie verschwinden. Und die Spitze. Sie können sie jetzt sehen, weil es sich um einen Clip-Inhalt handelt. Überprüft, mach es und überprüfe. Du wirst sehen , was ich getan habe. Ich schiebe alles nach oben, dann positioniere ich den unteren Rahmen an seiner Stelle und positioniere ihn so. Die Idee, die ich gemacht habe, ist, sie draußen zu positionieren. Wenn du dann auf dem Rahmen auftauchst, werden sie so etwas machen. Sie werden also animiert, indem sie jedes Quadrat von der Seite eingeben und das Bild wird angezeigt Also werde ich einen weiteren Fluss erzeugen, und dann werde ich die Interaktion zwischen dem zweiten und dem dritten erzeugen die Interaktion zwischen dem zweiten und dem dritten Lassen Sie uns versuchen zu sehen , was wir inzwischen haben. Wie Sie hier gesehen haben, klicke ich einfach auf Schließen, erneut und schon geht's los. Nein, ich werde für eine erneute Interaktion der beiden sorgen. Also von Sammlung zwei, Sammlung drei, Create the Flow und dann von Sammlung zwei zu Sammlung drei. Ich lasse beim Ziehen zu Sammlung drei navigieren, Smart Animate verlangsamt sich bei 600 Dieses Mal wird die Animation per Drache funktionieren. Okay, Sie haben also genau dort die Position im vorherigen Frame und die Position im Mainframe gesehen die Position im vorherigen Frame und die Position im Mainframe Dadurch wird unsere Animation erstellt und sie wird durch Ziehen initiiert Also lass uns nachschauen. Okay, klicken Sie auf Reveal Drag und so wird die Animation aussehen , wenn wir ziehen. Klicken Sie, klicken Sie erneut, um zu schließen. Klicken Sie zum Öffnen, ziehen Sie und so wird die Animation angezeigt. Okay. Am Ende haben wir auch diesen Rahmen länger, weil wir ihn so positionieren werden, wie Sie es gesehen haben. Am unteren Rand dieses Rahmens haben wir das also nicht mehr wie zuvor gesehen, aber im gleichen Rahmen unten haben wir diese beiden Bilder unten. Also werden wir diesen Frame kopieren und ihn an die erste Stelle setzen, ich muss ihn hierher verschieben. Ich muss das pushen. Dann die nächste Frame-Sammlung f, wir machen dasselbe, schieben den vorherigen Frame nach oben und lassen stattdessen nur ein Bild genau hier erscheinen. Okay? Also, wenn ich den Inhalt des Clips überprüfe, werde ich dir zeigen, wie er aussieht. Also hast du gesehen. Also, als Sie das vorherige Bild gesehen haben, schiebe ich es nach oben, lasse es verschwinden, und dann lege ich stattdessen dieses Bild und das andere Bild habe ich an der Bohrung gelassen. Ich möchte nicht, dass sie zusammen erscheinen. Ich möchte, dass sie eins nach dem anderen erscheinen, okay? Ich werde also verschiedene Arten von Rahmen haben. Es wird das erste Bild enthüllen. Und der zweite Frame wird das zweite Bild enthüllen. Machen Sie das Erstellen einer Sammlung richtig indem Sie die Sammlungs-CD kopieren. Und dieses Mal werden wir nichts an die Spitze treiben. Ich lasse nur das andere Bild in dem anderen Frame erscheinen. Im nächsten Frame werden wir jetzt zwei Bilder haben. Im anderen Bild wird die Schaltfläche angezeigt. Also fangen wir an, klicken Sie auf Ziehen, ein Bild erscheint, ziehen Sie erneut, ein anderes Bild erscheint. Was wir tun werden, wir werden dasselbe durch Kopieren und Einfügen erstellen und den Kopieren und Einfügen erstellen und anderen Teil, nämlich diese drei Bilder , von der Hauptsammlungsseite holen . Vergessen Sie nicht , immer den Flow zu erzeugen. Hier ein Beispiel, erstellen Sie Flow Four. Die Animation war, wie Sie gesehen haben, dieselbe wie beim vorherigen Ziehen. Navigiert durch zwei, Sammlung vier, und auch von Sammlung vier zu Sammlung fünf geht per Ziehen. Drug Navigator und Smart Animate. Und das heißt, wir haben es ein bisschen schneller gemacht acht Millisekunden pro Sekunde statt 600, 800, also langsamer. Lass es uns jetzt versuchen Wenn es erscheint und langsamer. Überprüfe alles. Inzwischen ist das alles, was wir haben. Beim nächsten Bild werde ich einfach kopieren und einfügen, und dann lasse ich die Schaltfläche in diesem Bild erscheinen. Machen Sie es länger und holen Sie das andere Element von der Sammlungsseite, ein anderes Element hinzu, kopieren Sie es und fügen Sie es ein und positionieren Sie es am unteren Rand von Frame 6. Wir werden diese Elemente im nächsten Frame animieren. In den sieben Frames werden wir also zuerst alle vorherigen Frames nach oben verschieben alle vorherigen Frames nach oben Dann ersetzen wir es und teilen das nächste Bild. Also lass uns im nächsten Kapitel weitermachen. 20. Erstellen des Enthüllungsbilds: In dieser Hörprobe werden wir also die Animation der Maske erstellen , die das Bild enthüllt. Als Erstes muss ich also ein Rechteck mit der gleichen Größe wie das Bild erstellen. Ich werde das Quadrat hinter dem Bild anordnen. Das machen wir einfach, indem wir das Quadrat auf den Ebenen hinter dem Bild nach unten ziehen . Wählen Sie sie dann aus. Sie sollten übereinander sein, Leute, okay? Im Ebenenbereich. Das ist sehr wichtig. Wählen Sie dann beide aus. Zuerst möchte ich sie gruppieren. Du kannst der Gruppe einen Namen geben, wo ich will. Okay. Jetzt wähle ich beide aus. Ich wähle das Rechteck und das Bild aus. Gehen Sie dann zu der Option hier und klicken Sie auf Als Maske verwenden. Wie Sie in der Ebene hier gesehen haben, wurde die Maske für mein Bild erstellt. Jetzt muss ich das Bild nach unten drücken. Ich wähle das Rechteck aus, nicht das Bild, das Rechteck, und dann drücke ich es nach unten, damit es verschwindet. Okay. Jetzt auch um den Text zu animieren, also werde ich ihn draußen positionieren Ich möchte dieses grafische Element auch animieren, also werde ich zuerst die Deckkraft auf Null setzen Kopieren Sie jetzt den Rahmen. Schieben Sie den vorherigen Frame nach oben und dann den anderen Frame stattdessen auf die Seite. Zum Mainframe, genau hier. Jetzt möchte ich die Position des Bruders korrigieren . Ich möchte, dass sie auf dem Mainframe erscheinen. Ich positioniere sie nach unten. Jetzt lasse ich einen Teil des Bildes erscheinen. Ich lasse 50% der Deckkraft auch auf der Grafik erscheinen, und ich schiebe den Text ein wenig hinein Schneide einen weiteren Rahmen aus. Und dieses Mal werde ich enthüllen, ich werde die Deckkraft auf 100 erhöhen und den Text an die endgültige Position bringen Okay. Jetzt werde ich die Interaktion erstellen. Also auf Ziehen, Navigate Two, Collection 7, Smart Animate. Ich werde es langsam machen. 600 Millisekunden. Mach dasselbe Diesmal wähle ich die Option nach der Verzögerung, eine Millisekunde, eine Millisekunde Navigiere zu Sammlung acht, intelligent animiert und langsam. Einfach raus. Jetzt werde ich Flow beenden. Fangen wir mit Sammlung sechs an. Gehen wir zu Prototype. Lass uns auf Play klicken und sehen, was wir haben. Jetzt ziehe ich, zeige an, ziehe, klebe die Tasten, ziehe, ziehe, ziehe, ziehe mit der Maus und jetzt schaue ich mir das Bild an. Ich habe diese Animation Bild-Enthüllung und Textanimation. Okay. Ich muss etwas an der Interaktion ändern , ich werde sie auf langsam und auf 600 ändern, okay? Also das ist besser. Anstatt einfach raus, ändere ich es auf langsam. Jetzt kopieren wir einfach dieselbe Methode für die anderen beiden Bilder. Vorher möchte ich das weiter herunterdrücken und mir jetzt die Animation ansehen. Ich sehe nett aus. Okay? Also werden wir dasselbe mit den anderen Bildern machen. Sie werden das achte Bild kopieren und dann das vorherige Bild nach oben schieben und dann die anderen Bilder erstellen, wie wir es zuvor getan haben. Also lass uns sehen Okay. Das ist das Bild, das du für die anderen kopieren musst, okay? Also lass uns weitermachen. 21. Erstellen der parallelen Horisontalanimation: I nun Nachdem wir nun das aufschlussreiche Bild mit der Maske für die drei Bilder erstellt haben und für jedes Bild zwei Frames erstellt haben, haben wir jetzt standardmäßig Das sind also unsere 12 Frames. Unten haben wir dieses Bild hier als Hintergrund, das Bild des Hintergrunds, das wir von der Sammlungsseite kopiert haben. Jetzt unten fügen wir diesen Teil unserer Sammlungsseite genau hier ein, um die horizontale Parallaxe zu animieren In diesem Rahmen positioniere ich die Bilder also so draußen und auch das Quadrat Ich habe den vorherigen A-Rahmen zusammen mit den anderen nach oben geschoben. Okay, so siehst du das. Dann werden wir den gleichen Frame kopieren. Bevor ich nochmal klicken muss, um den Inhalt zu überprüfen , wollte ich euch zeigen, wo ich hergebracht habe, Leute. Das ist der Teil, in den ich den ganzen Teil gebracht habe. Wir müssen noch mehr Teile animieren. Aber inzwischen werden wir diesen Teil animieren . Inhalt des Clips Also positioniere ich mein Element so, schneide Inhalt ab, um das Element unsichtbar zu machen. Wir werden diesen Rahmen nach oben schieben. Damit sie auch den Hintergrund verschieben können. Okay? Wir drücken den anderen nach oben. Jetzt positionieren wir die drei Bilder im Inneren. Okay. Kopiere den gleichen Rahmen und schiebe verschiedene Bilder hinein und lasse das andere nach außen gleiten. Kopiere den gleichen Rahmen erneut. Dieses Mal werden wir diesen Rahmen nach oben schieben. Stattdessen lassen wir zuerst dieses Quadrat im Inneren erscheinen und positionieren es so. Nochmals, ich werde den Hintergrund in anderen Frames weiter nach oben schieben in anderen Frames weiter nach oben und auch die anderen drei Bilder erscheinen lassen. Okay. Das ist also die endgültige Animationsposition. Wir haben es hier hingestellt. Ganz unten möchte ich all diese letzten Elemente genau hier platzieren . Ich werde sie einfach genau dort positionieren. So einfach, Leute, positionieren Sie es im vorherigen Bild und positionieren Sie es dann so, wie Sie es möchten. Nun zu diesem Bild hier, ich möchte wie zuvor auch eine Maske erstellen, eine Beibehaltung der gleichen Bildgröße Sie positionieren es unten, positionieren es hinter dem Bild und drücken es dann nach unten, bis es verschwindet. Kopiere den Frame und schiebe den vorherigen Frame nach oben. Nimm den anderen und zeige dann das Bild. Enthülle einfach das Bild. Dieses Mal habe ich nicht zwei Frames für die Enthüllung erstellt. Ich habe gerade einen Frame erstellt. Schiebe jetzt auch alles nach oben und lasse jetzt einfach das Bild seinen Platz im Hauptrahmen einnehmen. Okay? Dann mach eine weitere Kopie des Frames dann das letzte Element der Sammlungsseite hier oben im Astarray Ich kann sogar noch weiter gehen und das animieren auch die Farbpalette animieren, aber das werde ich für diesen Teil nicht tun Dann werden wir die Interaktion so einfach gestalten , okay Lassen Sie uns in der nächsten Lektion weitermachen. 22. Erstellen von Komponentenanimationen: Und Hallo, Leute. In diesem Kurs werden wir verschiedene Dinge machen. Wir werden eine Komponentenanimation erstellen. Also nehme ich dieses Layout und dann werde ich es bei Autoayout rahmen Dann werde ich warten und ziehen, um zu beenden. Jetzt muss ich es zuerst auswählen. Wählen Sie es aus, wählen Sie es aus, gehen Sie dann hier zu Constraint und platzieren Sie es in der Mitte. Und dann einfach kopieren und einfügen. Überprüfen Sie die Einschränkung in derselben Mitte. Dann wähle ich die zweite Skala und skaliere sie auf 1,3. Vielleicht ändere ich die Skala etwas weniger als 1,2. Wie 1.2, okay? Wählen Sie jetzt beide aus. Gehen Sie hier zur Option und erstellen Sie einen Komponentensatz. Benennen Sie die Komponente um. Ich werde es Layout eins nennen. Nein, erstelle die Interaktion. Die Interaktion läuft also so ab. Jedes Mal, wenn wir mit der Maus über das Bild fahren, müssen wir es vergrößern Dazu setzen wir beim Bewegen des Mauszeigers auf Frame 23 , Smart Animate, und dann passen wir diese Kurve an. Okay? Passen Sie diese Kurve so an Ich stelle die Interaktion wieder her. Ich habe es so gemacht, dann gehe ich zu den Assets und suche nach Layout eins. Die Assets finden Sie links auf der Seite, Sie gehen zu Assets und suchen nach Layout eins. Dann löschen Sie es und ersetzen es durch das statische Layout. Okay, positioniere es jetzt sehr gut. Gehen wir jetzt zum Prototyp und schauen, was wir haben. Wie Sie hier sehen, wird das Bild vergrößert, während wir mit der Maus darüber fahren Okay? Also jedes Mal, wenn wir mit der Maus darüber fahren, vergrößert sich das Bild Es gibt einige Dinge, die angepasst werden müssen. Es war dasselbe für das andere Layout. Also, was wir zuerst gemacht haben, habe ich das Bild und den Stempel gruppiert und dann habe ich dasselbe gemacht wie beim vorherigen. Ich habe dasselbe mit dem anderen gemacht, ich habe die Mittelbeschränkung erstellt. Dann habe ich es auf 1.2 hochskaliert. Jetzt erstellen wir die Interaktion auf die gleiche Weise, während wir mit der Maus darüber fahren. Intelligente Animation, nachdem wir den Komponentensatz erstellt haben den Komponentensatz erstellt Gehen wir nun zu Assets, holen es von dort und ersetzen es durch das statische Layout. Ersetze es dort. Und jedes Mal, wenn ich mit der Maus über eines davon fahre, werden sie größer Ich muss die Größe und die Position anpassen. Also gehe ich hier auf die Hauptseite und versuche, ihre Position zu optimieren Ich versuche, ihre Position ein wenig zu ändern. Korrigieren Sie also die Position, indem Sie die Größe meines Layouts dort ein wenig ändern die Größe meines Layouts dort ein wenig , damit es übersichtlicher aussieht . Okay. Okay, das ist es. Lass uns mit dem nächsten Mädchen weitermachen. 23. Erstellen der Seitenübergangsanimation: Und Hallo, Leute. Jetzt werden wir an unseren Seitenübergängen arbeiten. Als Erstes kehren wir zu unseren Frames zurück und beenden die Interaktion. Navigiere beim Ziehen zu Sammlung 13, Smart Animate Slow 600, wir können es in eine andere Zahl ändern oder es sagen lassen Wir sehen unsere Animation und danach entscheiden wir. Machen Sie jetzt dasselbe 13-14 beim Ziehen. Das Gleiche langsam und 600. 14 bis 15, das Gleiche beim Medikament, navigiere zu 16. Jetzt bei Drug, Navigate. Auch Ragate und dann Drogen, dieselben Typen bis zur letzten Seite. Was ich jetzt tun werde, ich werde die Größe jeder Seite ändern. Begrüßen Sie also weiterhin den Flow und überprüfen Sie es dann. Ich denke, den Flow wieder erstellen. C auf dem Boden genau hier. Also bevor wir unsere Arbeit putzen, muss ich überprüfen, was wir inzwischen haben. Klicken Sie auf Ziehen, Ziehen Bild zeigt horizontale Parallaxe, ziehen Sie erneut, horizontale Parallaxe, dann Bild wird genau hier angezeigt Dann auch der Stempel nach oben. Okay. Also das haben wir inzwischen. Lassen Sie uns also an unserem Seitenwechsel arbeiten. Der Pfeil wird es mit der Homepage verknüpfen. Den ganzen Pfeil, den ich auf jeder Seite habe, möchte ich mit der Hauptseite verknüpfen. Jedes Mal, wenn ich auf den Pfeil klicke, komme ich zurück zur Hauptseite. Wir klicken auf Klick, Navigiere zur Startseite, Disol und Slow Okay. Okay. Klicken Sie jetzt. Ich bringe mich zurück zur Seite. Macht euch keine Sorgen, Leute. Es gibt Elemente, die sich nicht in derselben Ebene befinden. Ich werde das reparieren. Also muss ich dasselbe für jeden Pfeil unten auf der Seite tun. Jetzt verknüpfen wir die Sammlungsoption der Sammlungsseite. Das erste Bild beim Klicken und Auflösen und die gleichen Werte. Verknüpfen Sie nun weiterhin die anderen Optionen. Also verlinke AS gleich hier mit AutsPageo AutsPageo . Gleiche Option beim Klicken. Navigieren, auflösen und alles dieselbe Option. Verknüpfen Sie nun weiterhin die anderen Elemente. Jetzt kontaktieren. Wenn Sie auf jede Option klicken und die Plus-Schaltfläche nicht angezeigt wird, bedeutet dies, dass Ihre Option nicht eingerahmt ist. Sie müssen zur Entwurfsphase zurückkehren und darauf und auf die Rahmenauswahl klicken darauf und auf die Rahmenauswahl bevor Sie die Interaktion darauf anwenden können. Okay, also füge ich den Kontakt auf der Kontaktseite und „Über uns“ der Seite „Über uns“ hinzu, die Sammlung der Sammlungsseite. Jetzt möchte ich dieses Layout mit der Farbauswahl-Seite verknüpfen. Jedes Mal, wenn jemand auf dieses Layout klickt, wird die Farbauswahl-Seite aufgerufen. Okay. Okay. Dann verlinke auch den Pfeil zurück zur Hauptseite, wie wir es zuvor getan haben. Das Gleiche gilt für die anderen Pfeile. Okay. Also versuchen wir mal zu sehen , was wir inzwischen haben. Klick. Bring mich zum Farbwähler. Okay. Klicken Sie auf Condor Bring mich zurück Jetzt auf der Sammlungsseite, ein Medikament, ein Medikament. Okay. Okay. Schau nach, was wir inzwischen haben, aber wir werden mehr auf der endgültigen Interaktionsliste sehen . Und wir werden subsff reparieren. Der Seitenübergang funktioniert also sehr gut. Jeder verlinkt es mit jeder Zielseite. Lassen Sie uns mit der letzten Lektion zur Interaktion weitermachen. 24. Erstellen der endgültigen Interaktion: Wir sind dabei, unsere Interaktionsstunde zu beenden. Im letzten Schritt werden wir einige Dinge optimieren und reparieren, und wir werden auch an der Farbauswahl-Seite arbeiten. Okay? Also lass uns nachschauen, was wir inzwischen haben. Ich klicke ein paar Sachen drauf. Wie ich sehe, kann ich richtig klicken und skalieren. Das ist sehr nett. Ich wollte den Maßstab der Komponenten ändern. Mach es weniger. Sie können es eins nach dem anderen machen, Beispiel 1.1 oder wo auch immer Sie möchten. Okay? Also, wie Sie jetzt sehen, funktioniert es besser. Was ich nun mit all meinen Seiten gemacht habe, ich ziehe es von unten, bis es die Hauptgröße erreicht hat. Wenn Sie Clip-Inhalte haben, können Sie das ganz einfach tun. Aber jetzt werde ich diese Interaktion mit dem Pfeil erstellen . Ich werde hier einen Komponentensatz erstellen. Ich werde die Opazität des ersten Pfeils auf Null setzen und ihn am Anfang einrahmen Ich muss ihn rahmen und dann kopieren. Die Einschränkung sollte sich ebenfalls in der Mitte befinden, und dann sollte die erste Deckkraft Null und die zweite die Deckkraft Wählen Sie dann „Komponentensatz erstellen“ und benennen Sie ihn um. Okay. Nachdem ich es umbenannt habe, gehe ich zum Prototyp und erstelle die Interaktion. Die erste Einführung erfolgt nach einer Verzögerung, einer Millisekunde, intelligent animiert, sanft, und das Gleiche gilt für die andere Also fangen wir bei Opazität Null an, werden dann 100 und dann zurück zu Opazität Null und dann Die animierte Schleife wird niemals enden. Okay. Jetzt ersetzen wir es durch den StatticerRW Wir gehen zu den Assets und suchen nach Arrow. Das war's also, jetzt sieht alles sauber aus. Wie ihr hier gesehen habt, was ich gemacht habe, Leute, habt vergessen, es euch gleich hier zu sagen , aber auf der Seite mit der Farbsammlung habe ich viele Rahmen davon erstellt. Jedes Bild habe ich in einen Rahmen gesteckt . Wir kopieren einfach und machen dann dasselbe, schieben den Rahmen nach oben und ersetzen ihn durch den anderen Rahmen und so, bis der Lasa-Rahmen so aussieht Okay? Also habe ich diesen Pfeil in jedem der Frames hinzugefügt. Wir machen das Gleiche wie zuvor. Erstelle viele Frames. Jeder Frame sollte ein anderes Bild haben. Kopieren Sie einfach den Rahmen, platzieren Sie die anderen Elemente unten auf dem Hauptrahmen und fahren Sie mit dem gleichen Verfahren fort. Bis Sie jedes Bild in einem anderen Rahmen haben. Nur den unteren Rand der Seite habe ich so größer gelassen als den anderen. Also das ist es. Reinigen Sie alle Seiten und bringen Sie sie an die richtige Position. Okay. Was ich für den Farbwähler gemacht habe, ist so einfach Ich verbinde jedes Quadrat mit dem Rahmen des Bildes , das dieselbe Farbe hat Das ist die Schaltfläche „Mehr erfahren“. Ich verlinke es mit dem Ende der Seite des Color College. Okay? Also werden wir sehen, ich werde mir das ansehen. Also schauen wir uns die Animation an. Wie Sie sehen, klicken wir und scannen nach oben. Jetzt gehen wir zur Sammlungsseite, wir ziehen, ziehen. Okay, Bildkritik, Bildkritik, Bildkritik hier auch. Horizontale Parallaxe. Okay? Okay. Die Bildrezension dazu. Okay. Geh, das ist es. Klicken Sie nun auf den Pfeil, um zur Hauptseite zurückzukehren. Klicken Sie auf den Farbwähler, klicken Sie auf ein beliebiges Quadrat Lassen Sie uns zuerst nachsehen. Dies ist die Komponente, die wir erstellt haben. Jetzt klicke ich darauf. Ich bringe mich zu diesem Bild. Klicke auf den Pfeil, bring mich zurück. Bring mich zurück, wähle eine andere Farbe. Bring mich zurück. Die Animation ist dieselbe, löst sich auf und verlangsamt sich. Klicke und bring mich zurück. Wenn ich jetzt klicke, kann ich mit der Maus nach unten ziehen und sehen, auf Weitere Informationen klicken und ich komme zu dieser Seite. Okay. Klicke auf den Pfeil und zurück zur Hauptseite. Nun, über uns, bring mich zurück. Führe mich zur Seite von Über uns, Pfeil, Kontakt. Klicken Sie auf die Links, die in der Entwicklungsphase verlinkt werden sollen. Okay, das ist es also. Das ist unsere ganze Interaktion. Das haben wir für unsere Website erstellt. Es sieht wunderschön, kreativ und ordentlich aus. Wir konnten sehr einfach auf unserer Website navigieren und alles ist lesbar. 25. Mehr Über Gesten Und Interaktionen Erfahren: Gester- und Grafikdetails im Designprozess geben uns die Möglichkeit, Details zu kreieren , die unsere Benutzer überraschen In dieser Hörprobe werden wir über verschiedene Möglichkeiten sprechen, unserem Designvorschlag grafische Details und Gester hinzuzufügen und auch eine weitere Ebene der Interaktion mit den Benutzern zu schaffen Lass uns anfangen. Zu diesen zusätzlichen Details oder Interaktionen gehören das Ändern der Standardcursor beim Besuch der Website-Seite und eine weitere zusätzliche Interaktion, die eine hohe Interaktivität mit den Benutzern sorgt und für eine hohe Interaktivität mit den Benutzern sorgt und ihnen das Erlebnis auch viel unterhaltsamer macht Die einzige Einschränkung, die wir derzeit haben, ist , dass Gester normalerweise schwierig zu implementieren sind, da sie fortschrittliche Technologie und viel Entwicklungswissen erfordern und viel Entwicklungswissen Andererseits sind die grafischen Details viel einfacher und können dem von uns erstellten Design viel Persönlichkeit verleihen dem von uns erstellten Design viel Persönlichkeit Um ein Beispiel für diese grafischen Details zu geben, werde ich einige Beispiele zeigen. Und in diesem Beispiel für eine Webseite sehen Sie als Erstes den schwarzen Balken unten mit der Nachricht, die animiert ist den schwarzen Balken unten mit der und sich wiederholt. Und die Benutzer sehen es, wenn sie die Webseite besuchen. Das zweite grafische Detail ist der Cursor. Sie haben den Cursor, der standardmäßig einen etwas größeren und pixelierten Typ hatte, geändert standardmäßig einen etwas größeren und pixelierten Typ Das passt sehr gut zur Persönlichkeit der Seite. Außerdem ändert sich der Cursor, wenn wir mit einem anderen Element der Seite interagieren. Schließlich wollten sie diesen Abschnitt hinzufügen, wir die Karten auf der Seite bewegen können. Dieses Detail, das sich anfühlt , verleiht dem Projekt viel Persönlichkeit, und das ist es, was der Benutzer sehr interessant findet. einer anderen Website fügen sie Details hinzu , die sehr interessant und verleihen dem Projekt Persönlichkeit. diesem Detail handelt es sich um eine Maske, die sich mit der Maus bewegt, sodass Sie der Rückseite die Konstruktion der typografischen Knoten sehen können . Es ist relativ einfach, dieses Detail in der Entwicklung zu implementieren Und auch der Benutzer wird es sehr lustig finden. Hier möchte ich Ihnen einige Beispiele von einer anderen Website zeigen , auf denen grafische Details und andere Interaktionen das Benutzererlebnis beim Surfen auf der Seite viel unterhaltsamer machen . Zum Beispiel ist diese Feldman Studio-Website voller Interaktionen , die es den Benutzern ermöglichen, das Erlebnis beim Navigieren auf der Seite selbst zu gestalten Erlebnis beim Navigieren auf der Seite selbst Mithilfe von Aktionen wie Klicken und Ziehen können Benutzer das Erlebnis selbst gestalten In diesem Abschnitt reagieren beispielsweise die Kreise im Hintergrund die Kreise im Hintergrund auf die Mausbewegung. Auch als Klick auf die Seite und Hinzufügen von Kreisen, die in den Hintergrund integriert sind. Es schafft auch ein sehr interessantes Erlebnis. Beim nächsten Modell füge ich, wenn ich die Maus bewege, am unteren Rand der Seite leichte Vertiefungen hinzu Außerdem sind die Details, obwohl sie nicht Teil des visuellen Designvorschlags als solchem sind, Elemente, die wir vorschlagen und der Seite hinzufügen können und die das Endergebnis viel interessanter machen , als das, was wir tun, sich viel mehr von anderen Webseiten abheben Eine weitere Webseite, die ich gefunden habe, steckt ebenfalls voller interessanter Details und Interaktionen, Nathan Tokyo, wo jedes dieser Modelle auf unterschiedliche Weise auf die Aktion reagiert unterschiedliche Weise auf , die der Benutzer mit der Maus ausführt In diesem Modell ändert sich beispielsweise der Buchstabe. Im Folgenden gibt es sehr lustige Animationen. Im Allgemeinen reagiert jedes Modell unterschiedlich auf die Benutzerinteraktion. Was macht die Erfahrung, die Website zu besuchen , sehr interessant und sehr lustig. Und ohne Zweifel ist es eine Webseite, an die Sie sich immer noch erinnern. Jedes der Modelle kann anders sein, wie Sie hier sehen. Und einige davon sind sehr einfach auf der Website zu implementieren, und sie werden den Benutzern unserer Meinung nach viel mehr Spaß machen , da sich auch unsere Designvorschläge von den anderen abheben. Und was auf dieser Website passiert ist, wo ich die Maus bewege, generiere ich verschiedene Bilder, zusätzlich zu dem Bild in der Mitte. Folgen Sie der Bewegung der Maus , um einen sehr interessanten Effekt zu erzielen. Auch bei dieser Website, hier zum Beispiel als Designer-Portfolio, kombinieren Sie Animationen und andere einfachere grafische Details wie die Änderung des Cursors oder diese Änderungen der Farbe im Hintergrund. Wir können einen Vorschlag erstellen , der zwar nicht viel Inhalt hat, aber visuell von anderen abhebt. Bei dieser Art von Website entsteht das Erlebnis, wenn der Benutzer mit ihr interagiert, und das fanden wir sehr interessant. ansehen einer anderen Website können wir uns diese von Daniil Spedzek Das zentrale Element des Fernsehers spielt bei der Einführung dieser Website eine große Rolle Jedes Mal, wenn ich eine Option auswähle, zeigt sie uns eine animierte Sequenz auf dem Fernseher, und das lässt sie so anders und so schön aussehen Und jedes Mal, wenn ich darauf klicke, wird das Arbeitsprojekt auf der Website angezeigt. Ein weiteres Beispiel auf dieser Website wo es einen iFrame-Globus gibt, Sie interagieren können, z. B. ein Raumschiff, das diesen Globus umkreist Und jedes Mal, wenn ich für dich eine Click-u-Ball-Option gleichsetze, während du sie anklickst , gelangst du zu einer anderen Seite, das funktioniert Das ist eine sehr interessante und kreative Art, die Werke zu überprüfen Und für diese Website das zentrale Element dieses ist das zentrale Element dieses Drei-D-Element, mit dem Sie interagieren und blättern können , um sich die Arbeit anzusehen. Es sieht so einfacher aus, aber all diese Elemente verleihen dieser Website eine Persönlichkeit. Hier, auch die letzte Website, die ich überprüfen möchte, ist diese Website, auf der Sie Instaga von Menschen finden, die in den 90ern oder 80ern geboren wurden Dort können Sie ein altes Produkt sehen , es auf einen Tisch legen und mit ihnen interagieren können Wenn Sie auf jedes dieser Projekte klicken, erhalten Sie den Namen des Projekts und es wird Ihnen auch ein Animationsvideo zu diesem Nostalgie-Alphabet angezeigt Dies ist eine sehr kreative und sehr schöne Erfahrung, die vielen Menschen viele Emotionen hervorrufen wird Diese Website kann auch eine Verbindung zu den Benutzern herstellen , die auf diesen Fehler gestoßen sind. Ebenfalls unten haben wir diese Tastatur mit anklickbaren Tasten Jedes Mal, wenn Sie auf eine davon klicken, gelangen Sie zu einer anderen Social-Media-Site wie X oder Instagram Im Allgemeinen macht die Erfahrung auf dieser Website viel Spaß und macht den Benutzern viel Freude. Also bin ich immer bei ihm geblieben und werde ihn vielleicht oft besuchen. Abschließend möchte ich Sie einladen, immer sehr offen für die Möglichkeiten zu sein, die es Ihnen ermöglichen, ein Web zu entwerfen und zu entwickeln, da mehr neue Technologien sehr interessant sind und es auch wert sind, studiert zu werden. diese Weise können wir auf einfachste Weise ein Webdesign- und Entwicklungsprojekt zusammen mit anderen Ressourcen wie Videos und Sound sowie künstlicher Intelligenz erstellen einfachste Weise ein Webdesign- und Entwicklungsprojekt zusammen mit anderen Ressourcen wie Videos und . Diese Grenzen dessen, was wir erreichen können, werden Zeit mit der neuen Technologie immer geringer. Es eröffnet uns mehr Möglichkeiten , unsere Arbeit kreativer und einfacher zu gestalten. Zu diesem Zeitpunkt hätten wir den Designvorschlag für unsere Website fertigstellen sollen. Es gibt jedoch Prozesse, die genauso wichtig sind wie das Design , um den Erfolg unseres Produkts zu gewährleisten , sobald wir das Design unseres Projekts abgeschlossen haben 26. Weitere Informationen Zu Darstellung Und Feedback: Repräsentation und Feedback. Präsentation vor dem Kunden In einem Designprozess ist es wichtig, eine durchsetzungsfähige Kommunikation mit unserem Kunden zu eine durchsetzungsfähige Kommunikation mit unserem Kunden Dies hilft uns auch dabei, unsere Ideen zu klären und so das Projekt fortzusetzen In dieser Hörprobe werden wir darüber sprechen , wie wir unserem Kunden einen Designvorschlag unterbreiten können. Eine gute Beziehung zu unserem Kunden ermöglicht es, das Projekt weiter voranzutreiben und das Licht zu erblicken. Einige der Empfehlungen, die Sie dem Kunden vorlegen sollten, sind zunächst Es ist wichtig, dass unser Kunde versteht, wie Designentscheidungen Ihre Ziele unterstützen. Sie müssen ihnen den Prozess vermitteln, der hinter jeder Entscheidung steckt. Dies wird uns helfen, dem Kunden zu zeigen , dass alle Elemente, für die wir uns entschieden haben, aus irgendeinem Grund gerechtfertigt sind. Zweitens werden wir für jeden Entscheidungspunkt nachweisen, dass wir uns gemäß dem Auftrag und dem Forschungsprojekt entschieden haben . Das heißt, wenn wir uns für eine Farbe entscheiden , zum Beispiel Rot, zeigen wir Ihnen, woher diese zum Beispiel Rot, zeigen wir Ihnen Informationen aus diesem Briefing stammen. Drittens können wir unseren Kunden, wenn wir kreativere, riskantere Designideen kreativere, riskantere Designideen haben, zeigen, wie sie dadurch Unternehmen näher kommen, die viel innovativer sind, und sie auch von ihren Mitbewerbern distanzieren. Viertens, damit der Kunde sich selbst eine Vorstellung davon gibt , was Sie am Ende erhalten werden. Was wir gerne tun und es ist eine gute Praxis, ist, den Prototyp von Figna in seiner Desktop- und Mobilversion zu beenden in seiner Desktop- und Mobilversion Auf diese Weise kommen Sie dem, was Sie erhalten, wenn die Seite bereits entwickelt ist, sehr nahe was Sie erhalten, wenn die Seite bereits entwickelt ist Fünftens, wenn es um Interaktion und Bewegung geht . Etwas, das wir gerne tun und es hat sich bewährt, ist, den Fortschritt dieser in After Effect erstellten Animation weiterzuentwickeln oder zu zeigen . Oder wir setzen auch Schiedsrichter von anderen Websites ein, damit unsere Kunden besser verstehen , was wir mit dem Produkt erreichen wollen Sechstens, am Ende jeder Entwurfsphase ist es wichtig, eine Genehmigung vom Kunden zu erhalten Dadurch werden Verzögerungen und Rückschläge in der Zukunft vermieden. Diese andere Empfehlung Ihre Arbeit für den Kunden zu vertreten, ein weiterer wichtiger Teil der Kommunikation mit ist ein weiterer wichtiger Teil der Kommunikation mit unserem Kunden, das Feedback von ihm erhalten zu können Oft stellen wir fest, dass der Feedback-Prozess uns daran hindert, einen interessanten und kreativen Designvorschlag zu erstellen . Aber wenn wir diesen Prozess auf organisierte Weise gestalten und klicken, kann uns das sehr helfen, unseren Vorschlag zu verbessern und auch etwas zu schaffen , das immer interessanter wird. Der gute Feedback-Prozess ist sehr wichtig , um das Projekt auf organisierte Weise voranbringen zu können. Darüber hinaus ist es wichtig, eine gute Beziehung zu unseren Kunden aufzubauen . Und dafür ist es sehr wichtig. Feedback ist korrekt, umsetzbar und für das gesamte Team sichtbar Es ist sehr wichtig , dass wir den Kunden nicht als eine Person betrachten den Kunden nicht als eine Person , die die Kreativität im Projekt Im Gegenteil, wir müssen als Verbündeten und als Teil des Designteams betrachten. Ich empfehle, sofortiges und variables Feedback zu vermeiden. Teil des Feedbacks mag aus einem Meeting oder einer Präsentation stammen , aber es ist sehr wichtig, dass wir am Ende alles schriftlich festhalten. Dies sind einige Punkte, die wir für sehr wichtig halten. Das Feedback muss sichtbar sein. Es ist wichtig, das Feedback schriftlich zu haben und ein Tool zu haben, das es dem gesamten Team ermöglicht, es zu visualisieren. Das Feedback muss auch klar sein. Es ist wichtig, im Feedback-Prozess genau anzugeben, auf welchen Teil des Designs wir uns beziehen, zum Beispiel auf welche Seite, auf welchen Bereich oder auf welches Gerät. Feedback sollte auch umsetzbar sein. Es ist wichtig, Unklarheiten zu vermeiden und darauf hinzuweisen , was anders sein sollte und wie anders sein sollte Und schließlich gibt es viele Tools, denen wir das Feedback organisieren können, wie Notion, Asana Das Wichtigste ist, dass es sich um Tools handelt , die das gesamte Team nutzen kann Am Ende der Design- und Feedbackphase mit dem Kunden besteht der letzte Schritt darin, sicherzustellen , dass das, was wir während der Entwurfsphase erstellt haben , in der Entwicklung auf die gleiche Weise widergespiegelt wird . Wie Sie hier gesehen haben, all die Dinge, über die wir sprechen. In dieser HTML-Datei des UX-UI-Leitfadens, den ich selbst für Sie und für diesen Kurs erstellt habe, sind sehr detailliert beschrieben dieser HTML-Datei des UX-UI-Leitfadens, den ich selbst für Sie und für diesen Kurs erstellt habe, . Wir haben es in der Materialquelle der Klasse zur Verfügung gestellt, damit Sie es öffnen und verwenden können. Es ist so einfach wie die anderen HTML-Dateien, die ich erstellt habe, du doppelklickst einfach darauf und es erscheint im Browser und du kannst es durchgehen. In der nächsten Lektion werden wir nun über den Style Guide sprechen. 27. Weitere Informationen zum Style Guide: Es ist sehr wichtig sicherzustellen , dass das von uns entworfene Design im Endprodukt umgesetzt wird. Ein sehr gutes Tool dafür sind die Styleguides. Hier können wir klare Regeln für den Stil des Webwebsite-Designs erstellen , wie z. B. Typografie, Farbe und Komponenten, die für den Start des Entwicklungsprozesses sehr nützlich sind Lassen Sie uns sehen, warum diese Styleguides für unser Projekt wichtig sind und wie wir einen erstellen können In diesem Styleguide besteht das Ideal darin, Schriftarten, Farben und Abstände, weitere Komponenten, die wir in der Entwurfsphase unserer Website verwenden, organisieren zu können , um sicherzustellen, dass das Endergebnis des Projekts so ist, wie wir es uns vorstellen und gestalten. Als Empfehlung ist es sehr wichtig, sich vor der Beendigung des Styleguides mit den Personen abzustimmen der Beendigung des Styleguides mit den Personen Entwicklung des Projekts verantwortlich sein werden In den Ventilen werden sie sich auf Themen wie Typografie, Farbe, Abstände und Auf diese Weise stellen wir sicher, dass wir dies auch im Styleguide tun, wenn die Typografie beispielsweise in Pixeln implementiert ist wir dies auch im Styleguide tun, wenn die Typografie beispielsweise in Ebenso, wenn die Farben unter anderem hexadezimal in GB verwendet werden sollen hexadezimal in GB Im Internet finden wir viele Beispiele für Styleguides und Designsysteme, die wir von den weltweit größten Unternehmen verwenden Eines der bekanntesten und wichtigsten heißt Material Design by Goog Und auf ihrer Website finden wir alle Oberflächen und alle Empfehlungen für die Verwendung von Stil und Komponenten, die sie in ihren Projekten verwenden Es ist eine sehr gute Anleitung, um zu beginnen und uns eine Vorstellung davon zu geben, wie man einen Styleguide erstellt und später oder später ein Designsystem fertigstellt. Wir können uns zum Beispiel die Definition von Farbe ansehen. Was ist unter anderem die empfohlene Verwendung von Farben, Kombinationen, Akzent, Haupt- und Sekundärfarben Dieser umfassende Leitfaden enthielt Ressourcen wie die Figma-Datei technische Dokumente für die Implementierung in der Entwicklung Wie wir sehen können, ist es sehr umfangreicher und sehr vollständiger Leitfaden, da es viele digitale Projekte gibt , die auf Materialdesign basieren Wir finden auch Definition, Typografie, Anwendungsempfehlung und auch typografische Es wird von Google empfohlen und basiert auf deren Roboto- und Zusätzlich zum Hauptbereich eines Stils, nämlich Farbe und Typografie, finden Sie einen vollständigen Abschnitt, der den Komponenten gewidmet ist, die im Projekt abgelehnt wurden Eine der wichtigsten ist zum Beispiel die Flasche. Hier finden wir unter anderem Anwendungsbeispiele , Empfehlungen und Einschränkungen. Wir haben auch einen Abschnitt sehr wichtigen Komponenten gewidmet ist , einschließlich der Konstruktionsspezifikationen für alle Sets. Beispielen gehören auch Geogs, Menüs, Navigationsleisten und viele weitere technische Ressourcen für die Entwicklung Nicht für alle digitalen Projekte ist ein umfassender Styleguide erforderlich ein umfassender Styleguide Meine Empfehlung ist, mit den wichtigsten Stilen und Komponenten zu beginnen , von denen wir wissen, dass sie während des gesamten Projekts verwendet werden, und dann Schritt für Schritt zu wachsen, wenn das Projekt skaliert. Ein anderes Beispiel, das ich ebenfalls sehr interessant fand , ist das Designsystem von IBM, das Carbon genannt wird. Wir können die verschiedenen Richtlinien des wichtigsten Entwurfsprinzips, das sie bei der Erstellung all ihrer digitalen Projekte verwenden, finden des wichtigsten Entwurfsprinzips, das sie . Wie beim Materialdesign gibt es neben der Verwendung von Typografie, die im Fall von ABM als IBM Plex bezeichnet wird , auch Empfehlungen und Erläuterungen zur Verwendung von Farbe zur Verwendung von Die typografische Skala, die Verwendung verschiedener Stile, Einschränkungen Von diesem Designsystem aus lohnt es sich, den Bereich Bewegung hervorzuheben, da er sehr gut widerspiegelt, wie wir Markenwerte wie Produktivität und Ausdruck in Animationsvorschlägen zum Leben erwecken können Markenwerte wie Produktivität und Ausdruck in Animationsvorschlägen zum Leben Produktivität und Ausdruck in Animationsvorschlägen Darüber hinaus beinhaltet es ein weiteres wichtiges Thema, nämlich den Abstand. Wir definieren auch die Abstandsskala pixelbasiert. Schließlich können wir sehen, dass sie vollständige Abschnitte haben. Für viele Komponenten, zum Beispiel Formulare in jedem der Felder, Fortschrittsbalken, die in einem anderen digitalen Projekt verwendet werden können . Dieses Entwurfssystem ist sehr vollständig und sehr gut erklärt. Ich empfehle daher, einen Blick darauf zu werfen jede der von ihnen vorgeschlagenen Komponenten zu verstehen, um sie bei der Erstellung eines Designsystems als Beispiel zu verwenden. Für unser Projekt ist es leicht zu verstehen, dass es auch von allen Menschen im Nichts verwendet werden kann. letzte Beispiel, über das ich sprechen möchte , ist das Designsystem für Milchschimpansen Es ist zwar viel einfacher als die anderen, die wir gerade gesehen haben, es enthält wichtige Informationen darüber, wie man ein digitales Projekt auf der Grundlage der Marke erstellt Beispiel: Die Farbdefinition beginnt mit der Hauptfarbe der Marke und fügt funktionale Farben und Feedback-Farben hinzu, um einer Erfolgs- oder Fehlermeldung eine Akzentfarbe für die Momente zu verleihen einer Erfolgs- oder Fehlermeldung eine Akzentfarbe , in denen wir Aufmerksamkeit erregen möchten Wie wir sehen können, enthält die Definition jeder Farbe das Wesentliche, um sie im Projekt verwenden zu können. Zum Beispiel die Definition des Higadisimalwerts für Unzugänglichkeit, um festzustellen, ob jede Farbe mit einem schwarzen oder weißen Text oder einer natürlicheren Farbe verwendet werden kann einem schwarzen oder weißen Text oder einer natürlicheren Dieses Entwurfssystem erklärt auch auf sehr klare Weise die Verwendung von Noten, sodass Design- und Entwicklungsteams Und was die Typografie angeht, wird auch sehr einfach erklärt , wie man die einzelnen Gewichte und Seiten verwendet, sowohl in Überschriften als auch in Absätzen Dazu gehören auch die gängigsten Komponenten wie Schaltflächen in ihren verschiedenen Zuständen, Tabellen und globalere Elemente wie die Navigation Wie wir sehen können, ist dieses Designsystem viel konkreter als die anderen, die wir gesehen haben. Aber es ist ein sehr guter Leitfaden für das Design- und Entwicklungsteam, der alles beinhaltet, was notwendig ist, um ein digitales Projekt mit der Marke für männliche Schimpansen erstellen zu können ein digitales Projekt mit der Marke für männliche Schimpansen Außerdem ist es ein großartiges Tool, um Zeit im Design- und Entwicklungsprozess zu sparen Zeit im Design- und Entwicklungsprozess Auf diese Weise stellen wir auch sicher , dass das Ergebnis unseres Projekts so konsistent wie möglich ist. Um fortzufahren, halte ich es für sehr wichtig, sich dem Unterschied zwischen Styleguide und Designsystem zu befassen. Da diese Begriffe verwendet werden, werden sie häufig verwendet, um sich auf ähnliche Themen zu beziehen. Kurz gesagt, der Styleguide ist eine grundlegende Definition von Elementen wie Typografie, Farbe, Abstand und grundlegende Komponenten, die bei der Entwicklung verwendet werden sollen Auf der anderen Seite wird das Designsystem in viel komplexeren und robusteren Projekten verwendet . Es entsteht normalerweise , wenn zwischen Design und Entwicklung ein ständiger Prozess stattfindet, bei dem Komponenten hinzugefügt, bearbeitet und gelöscht gibt es viele Informationen Internet gibt es viele Informationen zum Designsystem. Da es heutzutage ein sehr aktuelles Thema ist, insbesondere in Technologieunternehmen konsistent sein muss insbesondere in Technologieunternehmen , dass dieses Projekt ständig aktualisiert und , wenn ein Projekt größer wird. Die Komponente, die es uns ermöglicht, Elemente zu verwenden , die auf anderen Seiten verwendet werden, alles Variationen derselben Komponente , die in unserem Designprojekt verwendet werden soll. Ein Beispiel dafür sind all die Zustände, die das Booten haben kann Und das letzte Tool, das ich zum Erlernen empfehle, ist Autoayout, mit dem Sie eine Gruppe verschiedener Elemente erstellen und diese auf sehr einfache Weise bearbeiten Für mein Projekt verwende ich diese Websites normalerweise für Beispiel: Eine Tipo-Fießerei. Dies ist eine sehr interessante Website für typografisches Gewicht Wir überprüfen, wie das Telefon angebracht wurde. Es gibt eine Menge Möglichkeiten, und es wird auch auf sehr schöne Weise dargestellt. Die wichtigste Definition halte ich für die Durchführung des Entwicklungsprojekts für sehr wichtig. Als Erstes müssen Sie zum Beispiel einen Leitfaden zur Typografie erstellen und alle Stile definieren, die einen Leitfaden zur Typografie erstellen und alle Stile definieren, die für die Überschriften, Absätze und andere Textelemente verwendet werden Absätze und andere Textelemente die im Designvorschlag verwendet werden können Jede dieser Definitionen beinhaltet die Verwendung , die Sie der jeweiligen Schriftgröße und -stärke geben wollten der jeweiligen Schriftgröße und -stärke Dies sind beispielsweise große Schlagzeilen wie H eins, H zwei und H drei, die dann die Werte dieser Telefone definieren. Auf diese Weise kann die Person, die das Projekt entwickeln wird , die genaue Definition der Typografie für jede dieser Anwendungen finden genaue Definition der Typografie , die eingestellt werden. Das ist sehr nützlich und spart viel Zeit im Entwicklungsprozess Stellen Sie außerdem sicher , dass der Stil implementiert wird, wie wir es uns vorstellen Auf die gleiche Weise definieren wir die Stile der Absätze und beziehen Größen wie Abstände, die Gewichte der Quelle und vieles mehr mit ein Und in diesem Teil wollte ich einen anderen Textstil hinzufügen, den wir auf der gesamten Seite verwenden, der aber nicht in die Definition von Überschriften oder Absätzen einfließen lässt. Zum Beispiel Zahlen, Links, ob intern oder extern. Ich glaube, dass eine solche klare Definition von Schrift das Leben der Person, die für die Entwicklung des Projekts verantwortlich sein wird, erheblich erleichtern wird. Darüber hinaus können Sie das Design von Bildschirmen wie Mobiltelefonen oder Tablets oder viel größeren Bildschirmen einheitlich gestalten das Design von Bildschirmen wie Mobiltelefonen oder Tablets oder viel größeren Bildschirmen einheitlich Bildschirmen wie Mobiltelefonen . Und dieser Bauch beinhaltet auch eine gewisse Definition von Farbe. Zum Beispiel die Hauptfarbe der Marke mit ihren jeweiligen Schweinen, ein Dezimalcode , der es viel einfacher macht, ihn bei der Entwicklung des Projekts zu implementieren der Entwicklung des Projekts und auch die Komplementärfarben, die wir vor allem in den Filtern des Pegs verwenden . Ebenso kann dieser Abschnitt einer Farbe weiterhin ergänzt werden, beispielsweise durch unterschiedliche Farbtöne oder Schattierungen für jede Farbe, die wir für verschiedene Aktionen wie das Bewegen der Maus auf den Schaltflächen oder für ergänzende Elemente wie Illustrationen oder Symbole verwenden können verschiedene Aktionen wie das Bewegen der Maus auf den Schaltflächen oder . Bevor ich weitermache, möchte ich Ihnen einige Beispiele meiner bisherigen Arbeit zeigen einige Beispiele meiner bisherigen In diesem Website-Beispiel verwende ich ein sehr einfaches Element, um es zu etwas Besonderem zu machen. Ich habe mit einem Tippfehler gespielt und diesen geometrischen Kreis erstellt, der sich immer wieder wiederholt. Und auch der Übergang. Ich mache es jedes Mal so schön, wenn ich auf die Unterseite klicke, es zeigt die Farbe und ich komme auf eine andere Seite Eine andere A-Website, die ich erstellt habe, ist ebenfalls einfacher Diese Leiste am unteren Rand animiert in einer Schleife, und der Benutzer kann mit der Spher interagieren , wenn sie sich gegenseitig zugewinkelt Du kannst sehen, ob ich auf Arbeit klicke. Ich habe hier keine Bilder, aber so macht man das Gericht zwischen den Gerichten hin und her, ist sehr einfach, aber auch sehr kreativ. Diese Seite ist sehr nett, weil ich genau hier im Zusammenspiel der Farbbalken gearbeitet habe . Jedes Mal, wenn ich mit der Maus darüber fahre, kann ich mit diesen Balken interagieren Sie sind das zentrale Element meiner Website. Und wenn ich dann jede dieser Optionen auswähle, können Sie sehen, wie der Übergang funktioniert. Ich habe mich so sehr auf die Farben dieser Website verlassen, dass ich sie auf diese Weise beendet habe. Nun, wie Sie hier sehen, um unser Entwicklungsprojekt durchzuführen, bin ich der Meinung, dass seine grundlegende Definition von Farbe mehr als ausreichend ist. Und zum Schluss wollte ich noch hinzufügen, ich hier eine Anleitung für eine Farbe eingefügt habe. Du kannst nachschauen. Und schließlich wollte ich noch eine Anleitung zum Thema Abstände hinzufügen, in der wir die Abstände definieren, die zwischen allen Elementen auf der Seite liegen müssen. Für diese Abstandsanleitung verlasse ich mich auf acht Pixel, verlasse ich mich auf acht Pixel die bereits in den vorherigen Lektionen erklärt und definiere auch die Beziehung zwischen den Layoutabständen auf dem Desktop und auf Mobilgeräten. diesem Grund ist es für den Entwickler viel klarer, wie dieser Abstand im Stylesheet definiert wird. Und wir können diesen Styleguide auch weiter vervollständigen , sodass Komponenten, die wir verwenden auf der gesamten Webseite wiederverwendet werden Zum Beispiel sind Schaltflächen unter anderem Links. Es ist jedoch ein sehr guter Anfang. Abstimmung mit dem Projektentwickler garantiert, dass sich der Stil, den wir in Abbildung 3 vorschlagen, auch in der Entwicklungsphase des Projekts widerspiegelt der Entwicklungsphase des Und ich glaube auch, dass es wichtiger als Styleguide ist, eine sehr gute Kommunikation mit den Leuten zu haben eine sehr gute Kommunikation , die für die Entwicklung verantwortlich sind, unabhängig Stil und den Komponenten unseres Projekts Nach Abschluss aller Entwurfsphasen ist der nächste Schritt die Entwicklung des Projekts. Bis dahin sind wir mit dem gesamten Design der Website fertig , das wir angefangen haben, vom kreativen Briefing und der Recherche über die kreativen Briefing und der Recherche über die Strategie bis hin zum Wireframing, der Designphase und auch den grafischen Elementen, Interaktion und dem Motion-Design All diese Lektionen, die wir durchgehen, ermöglichen es Ihnen, ein gutes, sauberes und lesbares Website-Design für jeden Kunden und für jedes Projekt zu erstellen ein gutes, sauberes und lesbares Website-Design für jeden Kunden und für jedes Projekt zu Ich hoffe, Sie haben alles Notwendige gelernt , um Ihre Reise zu beginnen. Das ist alles und ich hoffe, das ist sehr hilfreich für Sie. Danke, dass du an dem Kurs teilgenommen hast. 28. Kursprojekt: Am Ende dieses Kurses werden Sie alle Fähigkeiten und Techniken anwenden, werden Sie alle Fähigkeiten und Techniken anwenden die Sie gelernt haben, um eine vollständige benutzerorientierte Website vom Konzept bis zum interaktiven Prototyp zu entwerfen eine vollständige benutzerorientierte Website Konzept bis zum interaktiven Prototyp zu Ihre Herausforderung besteht darin, eine Geschäftsnische oder Idee auszuwählen , die Sie inspiriert, sei es ein lokales Café, eine nachhaltige Modemarke, ein einzigartiges Tech-Startup oder sogar ein persönliches Portfolio Anschließend erstellen Sie eine ansprechende ansprechende und hochinteraktive Website , die ihren Zweck und ihre Zielgruppe perfekt erfüllt. Dieses Projekt ist nicht nur eine Übung. Es ist Ihre Gelegenheit, ein aussagekräftiges Portfolio zusammenzustellen und im Fall der Fälle Ihre Fähigkeit unter Beweis zu stellen, eine FOUXUI-Designherausforderung von Anfang bis Ende für ein von Ihnen gewähltes Szenario in der realen Welt zu bewältigen eine FOUXUI-Designherausforderung von Anfang bis Ende für ein von Ihnen gewähltes Szenario in der realen Welt