Webdesign für Anfänger: So entwirft man eine Website in Adobe XD (UX/UI)

1. Willkommen: Die meisten Leute denken, dass man Tausende von Dollar für ein Designstudium oder immersive Bootcamps ausgeben ein Designstudium oder immersive Bootcamps um in der Designbranche heute einen Star zu bekommen Das ist einfach nicht mehr der Fall. Wenn Sie die Grundlagen guten Designs verstehen und diese Designstrategien, Innenarchitekturprojekt, umsetzen , verspreche ich Ihnen, dass Sie in Ihrer Designkarriere erfolgreich sein können. Ich erwähnte mit Steel und ich bin ein autodidaktischer Grafikdesigner, der mein Geschäft Vollzeit für meinen Laptop führt , was mir im Wesentlichen die Zeit gibt, mehr von den Dingen zu tun , die ich liebe, auf einem mehr häufige Basis. Ich konzentriere mich hauptsächlich auf Branding, Webdesign und das Schreiben von Verkaufskaffee für Unternehmen sowie die Gesundheits -, Wellness- und Coaching-Branche. Und ich habe mit Kunden wie Clear Skin Lab, The Future Quote, Sophie, Dear, Qian Harmony und vielen anderen zusammengearbeitet wie Clear Skin Lab, The Future Quote, Sophie, Dear, . Ich habe keinen Abschluss in Design und theoretisch habe ich nicht die richtigen Qualifikationen, um mich Designer nennen zu können. Aber ich habe mir im Job so ziemlich alles selbst beigebracht , indem ich Strategien umgesetzt habe, die ich in Kursen wie diesem gelernt habe , die ich in Kursen wie diesem gelernt Mein Portfolio beweist , dass Sie ein Designer, egal was passiert. Wenn Sie bereit sind, Ihren Star in der Designbranche zu bekommen, müssen Sie lernen, einfallsreich zu sein, die Arbeit zu erledigen und mit der Umsetzung der Strategien zu beginnen, und mit der Umsetzung der Strategien zu beginnen um Ihr Portfolio so zu präsentieren, dass Sie können selbstbewusst in Verkaufsgesprächen oder Dienstleistungen für Ihre idealen Kunden auftreten. Ich glaube fest an aktives Lernen, weshalb ich in den verschiedenen Lektionen dieses Kurses Kundenbriefe für den Unterricht erstellt habe den verschiedenen Lektionen dieses Kurses Kundenbriefe , Sie verfolgen und umsetzen können Ihre Erkenntnisse fließen in die Unterrichtsprojekte ein , die ich für Sie erstellt habe. Dieser Kurs richtet sich an alle, die in einer Webdesign-Branche einsteigen möchten, egal ob freiberuflich oder in der Unternehmenswelt, oder für diejenigen, die ein bisschen mehr über die Website erfahren möchten Prototyping-Prozess und Adobe XD. Vielen Dank, dass Sie mich als Teil Ihrer Designreise ausgewählt haben, und ich kann es kaum erwarten, loszulegen. 2. Dich vorstellen: Jetzt, wo du ein bisschen über mich weißt, möchte ich dich auf einer persönlicheren Ebene kennenlernen. Stellen Sie sich im Diskussionsbereich unten mit Ihrem Namen, Alter, Designhintergrund, Ihrer Herkunft und den Dingen der Designbranche vor, und den Dingen der Designbranche die Sie am meisten begeistern. Es wird eine wirklich großartige Gelegenheit sein, Kontakte zu knüpfen, um sich mit anderen Schülern zu vernetzen, die ebenfalls diesem Kurs teilnehmen und sich in einer ähnlichen Phase ihrer Karriere befinden wie Sie, oder um sich mit Leuten zu vernetzen die Branchen, die Sie sein möchten. Ich gehe zuerst. Ich bin Angelica, ich bin 25. Ich bin ein freiberuflicher Grafikdesigner , der sich auf Branding, Webdesign und Text spezialisiert , Webdesign und Text seit mehr als drei Jahren in der Branche tätig. Ich liebe es, Herausforderungen stellen zu können meine tägliche Kreativität und die Arbeit mit mehreren Kunden in verschiedenen Geschäftsmodellen in mehreren verschiedenen Bundesstaaten und Ländern. Eines meiner Lieblingsdinge an meinem Designgeschäft ist es, Unternehmern aus allen Geschäftsbereichen helfen zu können Unternehmern aus allen Geschäftsbereichen , eine Ausgangsbasis zu schaffen, die es ihnen ermöglicht, selbstbewusst zu erscheinen ihre Kunden und verbreiten ihre Mission in der Welt. Jetzt bist du dran. Stellen Sie sich im Diskussionsbereich unten vor. 3. Deine Klassenprojekte: Ich habe ein Klassen-PDF erstellt, das zu all den verschiedenen Projektbeschreibungen passt all den verschiedenen Projektbeschreibungen passt , die ich in diesem Kurs besprochen habe. So können Sie in Ihrer Freizeit problemlos auf Aufgaben verweisen. Gehen Sie unbedingt zum Abschnitt Ressourcen, um Ihr PDF herunterzuladen , und dann können wir uns Abschnitt mit den Klassenprojekten zuwenden. In der PDF-Datei finden Sie die vier Kundenbeschreibungen sowie die verschiedenen Designparameter und Herausforderungen, die mit jeder Aufgabe einhergehen. Sie finden auch eine Ressourcenliste, die all die verschiedenen Plattformen miteinander verknüpft , die in meinem Designgeschäft täglich verwendet werden . In diesem Kurs werde ich meinen gesamten Prozess für jedes Projekt-Briefing durchgehen . Und Sie werden auch in der Lage sein, diese Strategien zu verfolgen und in Ihr eigenes Unterrichtsprojekt umzusetzen diese Strategien zu verfolgen und in Ihr eigenes Unterrichtsprojekt Das erste Projekt ist ein Yogastudio namens Alchemy Yoga. Sie haben keine Markenwerte , also keine Bilder, Farben, Kaffee oder Branding, sondern möchten eine Website erstellen, die sich neutral und organisch anfühlt . Projektauftrag für ist das mediterrane Restaurant genannt Catch 35. Sie verfügen über bestehende Markenelemente wie das Logo, Speisekarte, die Bildsprache und den Kaffee. Und sie sind seit mehr als zehn Jahren im Geschäft und möchten ihre Website modernisieren. Und im Wesentlichen werden Sie ihr vorhandenes Markenvermögen nutzen und ihre Website so modernisieren, dass Sie sich ein bisschen fühlen. Im dritten Projektbrief haben Sie die volle kreative Hand, um eine Website und Ihren eigenen Stil zu gestalten. Sie haben zwei Möglichkeiten. Option besteht darin, die Website eines Unternehmens oder einer Marke Ihrer Wahl neu zu gestalten . Und Option zwei besteht darin, eine Website für den bestehenden oder vorzutäuschenden Traumkunden zu entwerfen , oder so zu tun, als ob dieses Projekt Ihnen helfen soll , Ihren eigenen Designstil in der Branche zu entdecken , in der Sie sein möchten, in einem Experiment. mit verschiedenen Designelementen , zu denen Sie sich natürlich hingezogen fühlen. Und die Projektbeschreibung besteht darin, Ihre eigene Website zu entwerfen. Als Designer wird die Herausforderung darin bestehen, Ihre eigene Bildsprache zu verwenden und Ihren eigenen Webseitentext zu schreiben , der Ihnen als gefragter Designer sagt, dass Ihnen als gefragter Designer sagt, Sie meinen genauen Prozess finden, wie ich vorgehen würde jedes Kundenbriefing basiert auf den Parametern, die den Projekten zugewiesen wurden. Und Sie werden auch in der Lage sein, all diese verschiedenen Strategien zu verfolgen und umzusetzen , basierend auf dem, was Sie in den einzelnen Kundenbriefen gelernt haben. Ich freue mich so darauf, loszulegen. Stellen Sie sicher, dass Sie das PDF im Abschnitt Ressourcen herunterladen. Und wir sehen uns im nächsten Video. 4. Grafische Designressourcen: Bevor ich euch also meinen genauen Prozess für das Entwerfen von Websites zeige , wollte ich euch kurz durch einige meiner beliebtesten Ressourcen beim Entwerfen einer Website und beim Prototyping führen. eine Website in Bezug auf Design-Inspiration Wenn Sie im Designbereich tätig waren, haben Sie wahrscheinlich von vielen dieser Ressourcen gehört, aber offensichtlich ist Pinterest ein wirklich großartiger Ort, um sich inspirieren zu lassen. Sie können einfach in der Suchleiste nach Webdesign und Markendesign, Editorial Design suchen. Und ich werde Ihnen später auch zeigen, dass Behance in meinem Designprozess eine weitere wirklich großartige Plattform für Grafikdesigner im Allgemeinen ist für Grafikdesigner im Allgemeinen Sie können Webdesign-Inspiration und Logo-Design finden Lassen Sie sich inspirieren und verbinden Sie sich auch mit anderen Designern. Und Dribbling mit drei Bs ist auch eine wirklich großartige Ressource für Designer. Du kannst es als Hub verwenden, um Inspiration für Apps, für Websites, für Marken und so ziemlich alles zu finden Inspiration für Apps, für Websites, für , Design zu tun hat, das du auch auf Dribble finden kannst. Das sind also die drei wichtigsten Inspirationsquellen für Design , die ich täglich in meinen Projekten verwende. Und sie sind alle sehr, sehr nützlich, wenn es darum geht, wo man Schriften, Symbole und andere Markeninhalte findet . Ich verwende zwei Hauptressourcen. Das erste ist Envato Elements. Ich habe also ein monatliches Abonnement für Envato Elements. Ich denke, es lohnt sich so weil du ein monatliches Abonnement bezahlst, dann aber Zugriff auf alle Arten von Schriften, alle möglichen Grafiken, allerlei Vorlagen hast alle möglichen Grafiken, . Und Sie können dies wirklich als Ressource verwenden , um auch Symbole zu finden. Selbst wenn ich zu Grafikvorlagen übergehe, werden Sie auch feststellen, dass es Modelle gibt , die Sie in Ihren Branding-Projekten verwenden könnten. Und ich liebe diese Plattform einfach sehr und benutze sie wirklich täglich um Inspiration für all meine Projekte zu finden. Sie können Symbole finden, alles, was Ihnen einfällt, finden Sie wahrscheinlich auf Envato Elements. Ich liebe diese Plattform wirklich. Dies ist ehrlich gesagt meine bevorzugte Plattform für alles, was ich in Bezug auf Design verwende Creative Market ist ein weiterer wirklich großartiger Ort, um es zu finden. Schriften, Symbole, Grafikvorlagen und so weiter. Ich habe hier schon einmal Schriftpakete gekauft. Und was ich an Creative Market wirklich liebe , ist , dass sie wirklich gute Vorlagen für das Branding haben. Genauer gesagt würde ich sagen, aber auf Creative Market findet man so ziemlich alles , was mit Design zu tun hat, von Vorlagen für soziale Medien, Mockups, Lebensläufe, Präsentationen bis hin zu allem, was mit Design zu tun Sie finden es auf Creative Market. Das sind also die beiden wichtigsten Orte, an denen ich Schriften, Symbole, manchmal lizenzfreie Bilder, manchmal lizenzfreie Videos und sehr oft Modelle für meine Branding-Projekte finde manchmal lizenzfreie Bilder, manchmal lizenzfreie Videos . Also, wenn ich eines der von mir entworfenen Logos in einer Ladenfront präsentieren möchte . Sie haben Modelle, in denen du das machen kannst. sind also meine beiden wichtigsten Ressourcen , in denen ich den Großteil meines Markenvermögens finde, und es sind ehrlich gesagt meine beiden beliebtesten Ressourcen , die ich jeden Tag verwende um eine Farbpalette zu finden. coolers.co ist also ein wirklich großartiges Forum , um Farbpaletten zu finden. Ich benutze das auch täglich. Was auch wirklich nützlich ist , ist , dass sie farbige Namen haben. Wenn Sie also einen Markenführer entwerfen, können Sie diesen auch verwenden, da einige von Ihnen Farbnamen in Ihrem Markenführer sind . coolers.com ist also eine wirklich großartige Quelle für die Suche nach Farben und dem Farbpalettengenerator auf Canva. bin mir nicht sicher, wie du von der Homepage hierher kommst, aber normalerweise google ich einfach den Canva-Farbpalettengenerator und das wird angezeigt. Das Tolle daran ist , dass Sie jedes Bild hochladen können und dann wird Ihnen eine Farbpalette angezeigt , die auf dem von Ihnen ausgewählten Bild basiert. Das ist also sehr nützlich, wenn Ihre Kunden ihre eigene Bildsprache haben und Sie Farben aus ihren Bildern ziehen möchten Farben aus ihren Bildern ziehen Dies ist auch dafür eine wirklich großartige Ressource. 5. Wie man eine Webseite mit hoher Konvertierung entwerfen: Bevor ich mit meinem Designprozess beginne, wollte ich Sie kurz durch die wollte ich Sie kurz verschiedenen Funktionen führen, mit denen Sie heutzutage eine Website mit hoher Konversionsrate erstellen können . Sie müssen nicht nur etwas Hübsches machen, sondern auch etwas tun die Marke, mit der Sie zusammenarbeiten, strategisch vermarktet. Wenn Sie also wissen, wie Sie Ihre Websites mit einer Funnel-Mentalität gestalten , können Sie Ihren Kunden Ergebnisse auf mehr Arten als nur auf einer hübschen Website zeigen . Deshalb werde ich Sie nur durch einige der Funktionen führen, die ich auf den meisten meiner Websites habe. Zunächst möchten wir also über die Erstellung eines strategischen Funnels auf Ihrer Homepage sprechen . Wenn Sie ein Designer sind und keinen Marketing-Hintergrund haben, wissen Sie möglicherweise nicht wirklich, was ein Funnel ist. Ein Marketing-Trichter hilft dabei, einen strategischeren Ansatz zu entwickeln , zwischen der Gewinnung von jemandem , der die Marke nicht kennt wirklichen Kennenlernen der Marke, dem wirklichen Kennenlernen der Marke, der tatsächlichen Kontaktaufnahme mit den Marken, der Arbeit zusammen. Strategisch jemanden so positionieren , dass er die Marke, für die Sie eine Website entwerfen, tatsächlich erreicht , sodass er den Umsatz steigern, einen Anruf buchen, ein Produkt kaufen und vieles mehr kann diese Natur. Der Schlüssel liegt also darin , sicherzustellen, dass sie tatsächlich Maßnahmen ergreifen , was auch immer die wichtigsten Maßnahmen Sie von ihnen erwarten. Die Homepage einer Website ist also ein erster Eindruck und eine Einführung in die Marke, weshalb es äußerst wichtig ist, sie so zu gestalten , dass die Leute durch die gesamte Website geleitet werden. Eine Sache, die Sie beachten sollten , ist, dass Ihre Homepage eine allgemeine Beschreibung jeder Seite der Website enthalten sollte und Leute natürlich dazu ermutigen sollte, den nächsten Schritt zu tun, nämlich das Navigieren Schauen Sie sich den Rest der Website an, um mehr zu erfahren oder um am Ende etwas zu unternehmen. In Bezug auf Ihre Homepage sollte Ihre Homepage also auf jede innere Seite verweisen, die Sie haben. Wenn ich also eine Serviceseite habe, möchte ich sicherstellen, dass ich auf meiner Homepage die Serviceseite anklicke. Wenn ich eine Portfolio-Seite habe, möchte ich sicherstellen, dass ich auf meiner Homepage die Portfolio-Seite anklicke. Die Homepage dient als Trichter zum Rest Ihrer Website. Unabhängig vom Alter, das Sie in Ihrer Navigation haben, sollten Sie sicherstellen, dass Sie diesen Punkt auf der Homepage berühren . Möglichkeit, dies zu erreichen, besteht darin, sicherzustellen, dass Sie einen Abschnitt auf der Homepage festlegen für jede Seite der Website einen Abschnitt auf der Homepage festlegen. Wie Sie auf der rechten Seite sehen, gibt es so ziemlich auf jeder einzelnen Seite Handlungsaufforderungen , und jeder Abschnitt verweist auf diese verschiedenen Seiten. Wenn Sie also hier auf der rechten Seite genau hinschauen, werden Sie feststellen, dass diese Aufrufe zu Aktionen tatsächlich mit den verschiedenen Seiten verknüpft sind, die sich in der Hauptnavigation befinden. Eine andere Sache ist, sicherzustellen, dass 80% der Abschnitte auf Ihrer Homepage einen Aufruf zum Handeln enthalten. Und das heißt, sie zum Handeln aufzurufen. Um auf die nächste Seite zu klicken, um mehr über die Marke zu erfahren und die Marke zu kontaktieren, um Produkte zu kaufen. Das Wichtigste auf Ihrer Homepage ist, sicherzustellen , dass die meisten Abschnitte auf Ihrer Homepage eine Art Handlungsaufforderung enthalten, damit wir die Leute strategisch auf die nächste Seite weiterleiten können Leute strategisch auf die nächste Seite . Seite der Website. Und dann endlich, immer, immer, immer den letzten Call-to-Action auf allen Seiten der Website angeben. Jetzt haben die meisten Websites einen primären Aufruf zum Handeln, insbesondere wenn Sie gerade erst anfangen, aber manchmal haben sie mehrere Handlungsaufforderungen. Nehmen wir zum Beispiel an, Sie haben eine Serviceseite als auch eine Kursseite. Auf der Serviceseite sollten Sie sicherstellen, dass die Fußzeile die Handlungsaufforderung enthält , um ein Verkaufsgespräch zu buchen oder um Kontakt aufzunehmen, um mehr darüber zu erfahren, wie Sie zusammenarbeiten können. Und dann möchten Sie auf der Kursseite ausdrücklich die Tatsache zum Handeln aufrufen , dass Sie möchten, dass jemand kauft. Das sollte also der letzte Aufruf zum Handeln auf unserer Kursseite sein. Stellen Sie sicher, dass Sie auf jeder Hauptseite einen Aufruf zum Handeln haben. Das ist nicht deine Homepage. Das wird ein bisschen wortreich, aber das wird alles Sinn machen, wenn ich meinen Prozess tatsächlich durchlaufen habe. Und dann können Sie auch später immer auf diese Punkte verweisen später immer auf diese Punkte wenn Sie mit der Gestaltung Ihrer eigenen Website beginnen. Als Nächstes müssen Sie sicherstellen, dass Sie einen fesselnden und zusammenhängenden Text haben einen fesselnden und zusammenhängenden Text der Held Ihrer Website, der alles ist, was über den Tellerrand hinausgeht. Das Erste, was Sie sehen, wenn Sie auf einer Website landen sollte klar und fesselnd geschrieben sein. Sie sollten als Anziehungspunkt für Ihre gesamte Marke dienen , um sicherzustellen, dass Sie die Leute anziehen. Es ist im Grunde ein entscheidender Faktor dafür ob der interessierte Interessent Ihre Website weiter lesen sollte oder ob er weitermachen und denken sollte , dass dies vielleicht nichts für mich ist. Stellen Sie sicher, dass Ihr Text strategisch so geschrieben , dass er beschreibt, was die Marke bietet und wo die Probleme selbst liegen. Auf der rechten Seite, als meine Klientin Sophie, die Coach für Selbstwertgefühl ist, haben wir diesen Heldenbereich erstellt, um sicherzustellen, dass wir den richtigen Leuten lernen, denen sie dient. Und wenn sie nicht passen, können sie das normalerweise im ersten Abschnitt der Website erkennen . Und es ist besser, sicherzustellen, dass Sie Kunden, die nicht zu ihm passen, so früh wie möglich abschrecken . also sehr, sehr wichtig, sicherzustellen, dass Ihr Held Ihre Seelenverwandten, Kunden oder die Marke wirklich zum Handeln aufruft Ihr Held Ihre Seelenverwandten, Kunden oder ist also sehr, sehr wichtig, sicherzustellen, dass Ihr Held Ihre Seelenverwandten, Kunden oder die Marke wirklich zum Handeln aufruft. Auf dieser Website, die wir haben, stehen möglicherweise Tausende von Dingen auf Ihrer To-Do-Liste. Es gibt nur einen Als Selbstwertcoach helfe ich Ihnen, ein Leben zu gestalten, das Ihren einzigartigen Gaben und Ihrer Lebensvision dient Ihren einzigartigen Gaben und , damit Sie das Leben leben können. Du kannst nicht aufhören darüber nachzudenken. Es erzeugt ein Gefühl, das die Interessen von jemandem weckt, der vielleicht denkt, oh ja, ich bin es wert, ein erfüllteres Leben zu führen. Und ich werde mehr darüber lesen, was dieser Coach zu bieten hat , einige Dinge, um sicherzustellen, dass Sie in Ihren Helden aufnehmen, was er ist, was genau die Marke tut. Für wen ist es? Wen rufen Sie zum Handeln auf und warum brauchen sie es? Welches Problem lösen Sie? Das sind also die wichtigsten Dinge, die dein Haken im Hauptbereich über der Falte abdecken sollte . Die nächste Sache sind drei bis fünf Markenfarben und eine durchgehende Konsistenz. Farben spielen also offensichtlich eine große Rolle für den Zusammenhalt einer Website, weshalb es absolut wichtig ist , eine Farbpalette auszuwählen und sich daran zu halten. Wenn wir uns an eine einheitliche Farbpalette halten, können wir dazu beitragen, eine Marke durch Farben zum Leben zu erwecken und je nach den von uns ausgewählten Farben unterschiedliche Emotionen hervorzurufen . der rechten Seite sieht man, dass der Zusammenhalt durch die Hauptfarben wirklich zusammengeführt wird. Wir haben also drei Hauptfarben, wie Blau, Gelb und Orange. Und dann haben wir die Akzentfarben, also die weiße und cremefarbene Farbe um diesen Kontrast zu erzeugen. Ich würde also sagen, zwei bis drei Hauptfarben. Und dann kannst du Weiß, Cremeweiß und Schwarz haben. Diese verwende ich normalerweise in meinen Farbpaletten. Wenn eine Marke etwas lebendiger sein möchte , habe ich vielleicht eine sekundäre Farbpalette. In den meisten Fällen, insbesondere auf einer Website, ist es jedoch insbesondere auf einer Website, sehr wichtig , dass Sie nicht mehr als drei bis fünf Markenfarben auswählen . Sie können diese Konsistenz also durchweg beibehalten. also einige Möglichkeiten, dies zu erreichen, wie ich im vorherigen Video erwähnt habe Coolers.com ist eine wirklich großartige Möglichkeit Ihre Markenfarben zu festigen. Sie außerdem sicher , dass Sie drei bis fünf konsistente Farben als Ihre primären Markenfarben verwenden drei bis fünf konsistente Farben . Die nächste Sache sind kohärente visuelle Elemente und Bildsprache. Bilder rufen Emotionen hervor, ohne etwas sagen zu müssen, und spielen eine entscheidende Rolle bei der Vermittlung der Persönlichkeit der Marke. Es ist wirklich wichtig , dass eine Website über zusammenhängende visuelle Elemente verfügt, über zusammenhängende visuelle Elemente verfügt, sei es durch lizenzfreie Bilder, ein Marken-Fotoshooting, Illustrationen oder Ikonografie, wofür auch immer Sie sich entscheiden Ihre Website, an der Sie arbeiten, es ist wichtig, dass sie alle zusammenarbeiten. Diese beiden Projekte in der unteren rechten Ecke sind also der unteren rechten Ecke zwei Projekte , an denen ich gearbeitet habe. Offensichtlich sehr unterschiedliche Herangehensweisen für das, was wir für das Clear Skin Lab erreichen wollten, wollten wir, dass es wirklich unterhaltsam, verspielt und feminin ist. Für die Tonart Harmony. Es war ein bisschen technikaffiner und wir wollen, dass es den Illustrationsweg einschlägt, was wirklich cool war. Und offensichtlich passen diese Illustrationen sehr gut zusammen. Für die Illustrationen habe ich sie auf Envato gefunden, und für diese Bilder habe ich sie dann auf Pexels gefunden , einer wirklich großartigen lizenzfreien Bildwebsite. Möglichkeit, dies zu erreichen, besteht darin , Ihren Kunden zu ermutigen , in ein Fotoshooting zu investieren. Du könntest ihnen wirklich helfen, das zu heilen, indem du Pinterest inspirieren lässt und ein Moodboard erstellst und es dann deinem Kunden gibst, um es dem Fotografen zu geben, mit dem er arbeiten möchte. Es geht also wirklich darum, sicherzustellen , dass Sie die Markenessenz durch Bilder festhalten können , wenn es darum geht, Ihren Kunden zu bitten, in ein Fotoshooting zu investieren. Eine andere Möglichkeit besteht darin, sicherzustellen, dass Sie Quellenillustrationen oder Bilder von einem Schöpfer. Was das Clear Skin Lab angeht, merkt man, dass viele der Bilder gut zusammenpassen, weil sie von ein der Bilder gut zusammenpassen, weil sie oder zwei Hauptfotografen gemacht , die ich auf Pexels gefunden habe. Also habe ich eine Weile gebraucht , um sie zu finden. Aber je mehr Zeit damit verbracht wird , nach einer guten Bildsprache zu suchen, desto mehr wird sich diese auch in der Marke Qian Harmony widerspiegeln. Derselbe Illustrator, ich habe die Farben ein bisschen aktualisiert, aber dann wurde die Hauptmarke wirklich zum Leben erweckt, was wirklich, wirklich cool anzusehen war. Das nächste Ding ist eine klare und übersichtliche Navigationsleiste. Auf der rechten Seite haben wir eine Reihe verschiedener Marken, mit denen ich in der Vergangenheit zusammengearbeitet habe , und die verschiedenen Navigationslayouts , die wir für jede Marke erstellt haben. Im Grunde sollte Ihre Navigation also übersichtlich sein und Ihrem Publikum ein Verständnis dafür vermitteln, was passiert, wenn ich auf eine neue Seite klicke. Wenn eine Website mehrere verschiedene Angebote hat, ist es eine gute Faustregel, Dinge in Ordnern mit einem Dropdown-Pfeil zu kategorisieren , um die Navigationsleiste so minimal wie möglich zu halten . Eine Möglichkeit, dies zu erreichen, besteht darin, Dropdown-Sitzungen für ähnliche Kategorien zu erstellen . Wenn Sie also mehrere Kurse haben, können Sie z. B. ein Kursmenü mit einem Drop-down-Menü erstellen, das all Ihre verschiedenen Kurse verknüpft , um sicherzustellen , dass die Navigationsleiste relativ sauber ist. Eine andere Möglichkeit besteht darin, sicherzustellen, dass Sie Ihre Kunden ausdrücklich fragen , welche inneren Seiten sie sich für ihre Website vorgestellt haben. Es hilft Ihren Kunden wirklich, Ihnen als Designer mitzuteilen, was sie mit der Website erreichen möchten. Und eine andere Sache ist, dass Sie sicherstellen möchten, dass die Menüelemente in der gesamten Struktur der Website kohärent aussehen . So hat beispielsweise das Clear Skin Lab drei Handlungsaufforderungen, und jeder Aufruf zum Handeln besteht aus einer Reihe von Wörtern. Aber das ist okay, weil es für diese Marke funktioniert. Es wäre nicht sinnvoll, wenn Sie mehrere Wortreihen und dann ein Wort für den nächsten Navigationspunkt hätten . also sicher, dass Sie entweder ein Ein-Wort-Menü oder ein Menü mit mehreren Wörtern haben entweder ein Ein-Wort-Menü oder , falls das Sinn macht. Sie schauen sich also diese verschiedenen Menüpunkte und Navigationsleisten an und sehen welche Dinge Ihnen in Bezug auf das Layout gefallen. Ja, in diesem Sinne ist es auch sehr nützlich. Ich weiß, dass ich das am Anfang des Videos erwähnt habe, aber eine einzelne Handlungsaufforderung auf jeder Seite ist so, so, so wichtig. Sie möchten Ihre Kunden fragen, was die primäre Handlungsaufforderung ist , die ein Interessent ergreifen soll, wenn er auf Ihre Website kommt. Dies ist ein wirklich guter Ausgangspunkt, um sicherzustellen, dass Sie eine Website so gestalten können , dass sie strategisch funktioniert und Ihren Kunden zum Erfolg verhilft. Stellen Sie also sicher, dass Sie dies immer in der Fußzeile Ihrer Seite angeben und dann einen Einblick geben , warum jemand schnell rausgehen sollte oder warum jemand kaufen sollte, oder was er als Nächstes tun sollte? Im Grunde. Eine Website oder eine Verkaufsseite oder was auch immer Sie entwerfen, um jemanden zu ermutigen, Maßnahmen zu ergreifen, eine Marke zu bewerben, ein Produkt zu verkaufen, eine Dienstleistung zu verkaufen. Und der primäre Call-to-Action sollte nicht nur auf der gesamten Website und auf der gesamten Verkaufsseite oder auf dieser Seite wiederholt werden nur auf der gesamten Website und auf der gesamten , sondern auch in der Fußzeile, um das Wesentliche zu wiederholen Call-to-Action, den Sie möchten, dass jemand sie annimmt. Ein weiterer wirklich großer und wichtiger Teil der Gestaltung von Websites besteht darin, sicherzustellen, dass Sie große Textblöcke aufteilen . Oft haben einige Kunden einen Kunden, versucht , zu kommunizieren, was sie anbieten Die Worte und der Text können sehr, sehr wortreich werden. Es ist also Ihre Aufgabe als Designer , sicherzustellen, dass Sie Ihren Kunden helfen , große Textblöcke in verschiedene Abschnitte aufzuteilen . Die Hauptsache sollte also sein, dass der Text auf der Website sehr leicht verdaulich sein sollte. Niemand, und ich meine, niemand liest gerne Absätze und Absätze mit Inhalten. Sie möchten also sicherstellen, dass Sie Ihre Botschaft auf die einfachste Weise kommunizieren können Ihre Botschaft auf die einfachste Weise kommunizieren , um sicherzustellen, dass Sie Ihre Botschaft vermitteln. Einige Möglichkeiten, große Steuerblöcke aufzuteilen, sie in verschiedene Abschnitte aufzuteilen oder mit Aufzählungszeichen, Symbolen und Bildern. Auf der rechten Seite kannst du sehen, dass dieser Abschnitt offensichtlich nur aus Wörtern besteht, aber da ich ihn in verschiedene Abschnitte unterteilt habe, hilft es, ihn etwas einfacher zu lesen. Es sind immer noch viele Wörter, aber dann sind es viele Wörter, die in kleinere Abschnitte unterteilt sind, was den Leser normalerweise dazu ermutigt, sie durchzulesen. Wenn das alles wie ein leerer weißer Abschnitt aufgeführt wäre, würde es wie ein Word-Dokument aussehen und niemand liest gerne. Menschen fühlen sich aufgrund ihres Aussehens von Natur aus visuell zu Dingen hingezogen . Einige Möglichkeiten, dies zu erreichen bestehen offensichtlich darin, wenn möglich Aufzählungspunkte zu verwenden, große Textblöcke in mehrere Abschnitte aufzuteilen und sicherzustellen, dass Sie eine klare und konsistente Typenhierarchie verwenden . Auf der rechten Seite können Sie also auch die Typenhierarchie sehen. Sie haben Unterüberschriften, Sie haben die Schriftart für die Hauptüberschriften, Sie haben die Schrift für den Absatz, Sie haben die Call-to-Action-Schriftart. Sie haben den Hinweisbereich unten. Das ist auch eine andere Schrift. Versuchen Sie also einfach , die großen Textblöcke visuell so ansprechend wie möglich zu gestalten die großen Textblöcke . Dann ist der nächste Schritt die Typhierarchie. Und ehrlich gesagt ist einer meiner Lieblingsteile des Branding-Prozesses die strategische Auswahl von Schriften, um eine Markenpersönlichkeit und eine einprägsamere Marke zu schaffen . Es ist also wirklich wichtig , dass Sie sicherstellen, dass Sie eine Schrift für Ihre Überschriften, eine Schrift für Ihre Absätze, eine Schrift für Ihren Aktionsaufruf eine Schrift für Ihre Unterüberschriften haben, normalerweise wenn Sie verwenden eine Serifenschrift. Wie bei einer spiralförmigen Schrift, wie ich sie in meiner Kopfzeile verwende, ist es gut, eine serifenlose Schrift in der Absatzform zu verwenden. Und wenn Sie mehr Websites und mehr Marken entwerfen, werden Sie besser verstehen welche Schriftarten normalerweise gut zusammenpassen. Wenn Sie also eine Serifenschrift verwenden, ist das normalerweise etwas verschnörkelter als eine minimalistischere Sans-Serif-Schrift. Die Absätze sind, die Unterüberschrift hilft irgendwie dabei, diese großen Textblöcke aufzuteilen und macht die Dinge auch visuell interessanter. Das sind also die Hauptabschnitte. Schauen Sie sich unbedingt das Ende Ihrer Klassenarbeitsmappe an, um weitere Designressourcen und hilfreiche Hinweise zu finden. Und dann können Sie später jederzeit zurückkommen und auf dieses Video verweisen , sobald Sie den Designprozess durchlaufen haben . Aber ich werde all diese verschiedenen Aspekte der Gestaltung einer Website erläutern, wenn ich später in diesem Kurs die Projektbeschreibungen für Kunden durchgehe später in diesem Kurs die Projektbeschreibungen für Kunden Ich wollte Sie nur kurz behandeln und Sie durch sie führen. einige der wichtigsten Funktionen, bevor wir uns diesen Prozessvideos befassen. 6. Startseite Prompte und Anatomie kopieren: In diesem Video werde ich die Anweisungen zum Kopieren durchgehen. Ich habe diese Ressource für Sie erstellt, damit Sie sie in Ihren Kundenprojekten für diesen Kurs sowie für zukünftige Kundenprojekte verwenden können sie in Ihren Kundenprojekten für diesen Kurs sowie für zukünftige Kundenprojekte verwenden , unabhängig davon, ob Sie freiberuflich oder innerhalb eines Unternehmens oder Unternehmens tätig sind. arbeiten in. Im Wesentlichen hilft dir das hier, oder? Der Website-Text, den Sie für die Websites Ihrer Kunden verwenden werden , und sorgt für ein wirkliches Benutzererlebnis. Dieses Messaging hat ein allgemeines Webdesign. Sie werden also einige Kunden haben, die keine Ahnung haben, wie sie ihren eigenen Website-Text schreiben sollen. In diesem Video wollte ich also wirklich schnell den typischen Benutzerfluss in der allgemeinen Markenbotschaft behandeln . Offensichtlich wird sich dies je nach Branche ändern, in der der Kunde tätig ist, für den Sie eine Website entwerfen. Aber das gibt Ihnen eine allgemeine Vorstellung. Ausgehend von den UX-Designs, die wir im letzten Video erstellt haben, habe ich auch hier einen ähnlichen Look erstellt und ihn in verschiedene Textabsätze unterteilt , die wir verwenden können helfen, Kopien zu korrigieren. Das ist unglaublich nützlich. Oder Ihre Kunden, wenn sie ihr Exemplar nicht haben. Und was ich in meinen Designprojekten normalerweise mache , ist, diese Aussagen direkt in ein Google-Dokument zu schreiben und mit meinen Kunden zusammenzuarbeiten , bis wir mit der Richtung des Textes zufrieden sind . Also werde ich das einfach mit dir durchgehen. Sie können diese Textanweisungen gerne später in Ihren Entwürfen für Ihre Kundenkurzprojekte verwenden. Oder Sie könnten dies einfach in Ihren Kundenprojekten mit Ihren echten Kunden verwenden . Ich gehe einfach durch. Offensichtlich haben wir das Logo in der oberen linken Ecke und in der Hauptüberschrift. Dazu gehören also Ihr Logo, Ihr Menü und Ihre primäre Handlungsaufforderung. Wenn Sie mit einer E-Commerce-Marke arbeiten, kann diese auch einen Link zum Warenkorb oder eine Suchleiste enthalten. Dies sind nur allgemeine Feldfunktionen , die Sie in Ihrem Hauptheader haben würden. Und dann haben Sie das Heldenbild, das im Wesentlichen die Hauptposition oberhalb der Falte darstellt. Das Erste, was die Leute sehen , wenn sie auf Ihre Website kommen. Was Sie also sicherstellen möchten, wenn es um Texte geht, und was Sie sicherstellen möchten, dass Ihre Kunden dies tun, ist sicherzustellen , dass Sie eine sehr starke Aussage über die Marke haben eine sehr starke Aussage über , die die Aufmerksamkeit Ihres Publikums auf sich zieht. Das ist so wichtig, weil der Held Ihrer Website im Grunde genommen der ist wenn jemand, der Ihre Website besucht, ein Interessent oder ein Benutzer oder jemand aus Ihrem Publikum, außerdem , Oh, diese Website ist für mich. Es klingt, als wäre es für mich. Oder vielleicht denken sie, oh, diese Website, passt sie zu dem, wonach ich gerade suche, ich kann weitermachen. Du solltest also sicherstellen, dass du in dieser Aussage in deinem Heldenbereich spezifisch sprichst, hi fleet zu den Problemen, die du löst, wen du anbietest und was genau du anbietest. Designer ist das so wichtig und viel Zeit. Manchmal entfernen wir uns von Dingen, bei denen es um Messaging geht, weil wir uns zu schönen Dingen hingezogen fühlen. Aber die wichtigste Regel, die ich beim Webdesign habe, ist sicherzustellen, dass Sie Websites haben, die konvertieren. Und deshalb habe ich das Gefühl, dass ich in meiner Karriere so gut abgeschnitten habe , weil alles, was ich entwerfe, darauf ausgerichtet ist, die Leute einer Hauptaktion zu leiten, die unser Publikum auf einer Website ausführen soll. Für diese Website könnte dies z. B. für einen Dienstanbieter oder Kursersteller sein. Im Wesentlichen sollten Sie sicherstellen , dass der Text wirklich dazu beiträgt , die Benutzererfahrung zu fördern , um sicherzustellen, dass sie entweder zu Ihrem Kontaktformular gelangen oder einen Kurs gekauft haben oder über Ihre dienstleistungen. Wir wollen sie im Grunde den Trichter herunterbringen , damit sie dem tatsächlichen Auschecken, der Bezahlung einer Dienstleistung oder der Zusammenarbeit mit Ihnen näher kommen tatsächlichen Auschecken . Der erste Abschnitt ist also der Held, und dann haben wir hier einen weiteren Abschnitt, der eine tiefere Beschreibung enthält, die hilft, eine emotionale Verbindung aufzubauen. So wichtig, dass Ihre Website die Mission und Botschaft Ihres Kunden auf eine Weise kommuniziert Mission und Botschaft Ihres Kunden , die wirklich authentisch klingt. Sie verkaufen, verkaufen, verkaufen, ohne die Probleme zu , die Sie lösen, und Sie könnten Ihre Kunden abschrecken. Du sagst im Grunde, ich bin der Beste, ohne dich auf die egoistischen Gründe zu konzentrieren auf die egoistischen Gründe warum dein Publikum nach jemandem wie dir sucht. Also nochmal, eine weitere Einführung, ein weiteres gemeinsames Merkmal ist die Einführung der verschiedenen Dienste oder Angebote. Also sagen wir, wir bieten Webdesign und Branding an, aber wir haben auch einen Online-Kurs oder ähnliches. Wir möchten sicherstellen, dass wir Abschnitte haben , die sich mit jeder Ihrer spezifischen Innenseiten befassen. Wie Sie hier oben in meiner Navigation sehen können, habe ich genug über das Blog-Portfolio für Dienstleistungen. Die Benutzererfahrung meiner Homepage wird dem gleichen Format folgen. Wir haben also den Home-Bereich, der der Held ist. Wir haben einen kurzen Abschnitt über uns. Sie haben einen Servicebereich. Damit wird der Blog vorgestellt, und dann haben wir ein Portfolio. Weitere Informationen über die Marke und das Finale erhalten Sie bei uns. Sie können also sehen, dass dieses Webdesign und diese Textaufforderung wirklich auf all die verschiedenen Teile zugeschnitten sind, all die verschiedenen Links in der Navigationsleiste. Also nochmal, wir haben den Helden, wir haben ein bisschen über die Marke. Wir haben eine Einführung in die Dienste. Wir haben einen Link zum Blog, wir haben das Portfolio, wir haben den Gründer getroffen und dann Kontakt aufgenommen. Das ist also etwas, das Sie erstellen können, wenn Sie die Anatomie der Website erstellen , an der Sie gerade arbeiten. Und das ist auch sehr nützlich, wenn Sie eine Vorlage erstellen, die Sie immer wieder verwenden möchten. Denn oft ändern sich auf Websites nur die Bildsprache, ändern sich auf Websites nur die die das allgemeine Erscheinungsbild und das Erscheinungsbild einer Marke, die Schriftart oder die Farben völlig verändert . Das ist also ein wirklich guter Ausgangspunkt. Nochmals, aufbauend auf der Gestaltung der UX. Auch hier haben wir die UX, aber stattdessen haben wir die Eingabeaufforderungen kopiert. Sie können also gerne diese Kopieraufforderungen verwenden. Ich habe diese Datei im Google Drive, dem Bereich Klassenprojekt, verlinkt . Laden Sie es also unbedingt zusammen mit Ihrer Arbeitsmappe herunter. Und Sie können diese auch in Ihren Kundenprojekten verwenden. Deshalb wollte ich Ihnen diese Ressource nur zeigen , weil sie ein gutes Beispiel dafür ist , wie Sie eine Website ohne Bilder, mit sehr einfachen Farben und mit sehr einfachen Schriftarten gestalten können eine Website ohne Bilder, mit sehr einfachen Farben und mit sehr einfachen Schriftarten gestalten mit sehr einfachen Farben . Und dann helfen Sie auch Ihren Kunden und helfen Sie ihnen, richtig, also die richtige Botschaft für sie. 7. Kurz 1: Ein Yoga-Studio: Willkommen zum ersten Kundenbrief, in dem wir mit einem Yogastudio zusammenarbeiten werden. Sie finden diese Projektanfrage also in Ihrer Arbeitsmappe, die ich im Download-Bereich für Klassen bereitgestellt habe . Ich werde auch die Kundenbeschreibung und das Allgemeine durchgehen und meinen gesamten Prozess mit Ihnen durchgehen meinen gesamten Prozess mit , damit Sie wirklich verstehen können wie ich Kundenprojekte angehe, wenn sie zu mir kommen Offensichtlich ändert sich ein Kundenerlebnis je nach Kunde. Deshalb wollte ich das in den verschiedenen Kundenbriefen , die ich Ihnen vorgestellt habe, wirklich darstellen . Wir haben also ein paar verschiedene Aufgaben, die Sie aus Orfeo frei wählen können, um sie alle auszuwählen, oder Sie können sich frei für eine von ihnen entscheiden oder umgekehrt. Ich werde hier nur hineinzoomen, damit wir die erste Frage wirklich kennenlernen können . Also ein Kunde, der kurz ist, ist ein Kunde namens Alchemy Yoga. Sie sind ein in Portland ansässiges Yoga-Studio mit dem Ziel, mehr Menschen aus allen Gesellschaftsschichten ein Gefühl der Ruhe zu verleihen Yoga-Studio mit dem Ziel, mehr Menschen aus allen Gesellschaftsschichten ein Gefühl der Ruhe . Wir glauben, dass Yoga Sie sowohl auf als auch außerhalb der Matte verändern kann . Website-Vision von Kunden. Ich möchte, dass die Website sehr neutral ist und sich dennoch sehr erdig anfühlt. Ich liebe eine minimalistische Ästhetik , weil ich das Gefühl habe, dass sie ein Gefühl ausstrahlt, das ruhig, einladend und ausgewogen ist. Alchemy Yoga ist ein Ort, an dem Menschen aus allen Gesellschaftsschichten praktizieren und in diesen manchmal hektischen und geschäftigen Tagen ein Gefühl der Ruhe finden können . Ich möchte wirklich, dass das auf der Website rüberkommt, damit sich die Leute sofort zu der Marke und dem Raum, in dem wir tätig sind, eingeladen fühlen . Einige Adjektive , die Alchemie-Yoga beschreiben, wären also achtsam, erdig, organisch, neutral laden zu einem Gefühl von Ruhe, Wärme und Vertrauenswürdigkeit ein. Die größte Herausforderung für das Projekt besteht darin , dass es sich bei der Marke um ein Startup handelt. Sie haben keine Bilder. Dies ist im Bereich Webdesign sehr verbreitet, insbesondere wenn Sie mit Startups oder neuen Geschäftsinhabern oder Personen zusammenarbeiten , die gerade versuchen Ihre Geschäftsidee auf den Weg zu bringen. Sie benötigen also Hilfe bei der Beschaffung von lizenzfreiem Bildmaterial, das sie als Platzhalter verwenden können bis sie in der Lage sind, ihr eigenes Markenshooting zu machen. Sie haben auch keine Erfahrung mit dem Schreiben von Website-Texten und einer Anleitung, um die Botschaft der Marke an ihr Publikum zu formulieren . Dies sind die wichtigsten Herausforderungen, denen wir bei diesen Website-Projekten begegnen . Das passiert sehr häufig , wenn jemand zu dir kommt. Sie wollen eine schöne Website, aber sie haben noch keine schönen Bilder. diesem Fall können Sie Ihren Kunden entweder dazu ermutigen, Ihren Kunden entweder dazu ermutigen in ein Markenshooting mit einem lokalen Fotografen und seiner Region zu investieren . Oder Sie können ihnen lizenzfreie Bilder zur Verfügung stellen , die sie ab und zu als Inspiration für unser zukünftiges Markenshooting mit einem Fotografen verwenden können unser zukünftiges Markenshooting mit , wenn sie bereit sind , in ein Markenshooting. Das ist also eine primäre Projektherausforderung für die Aufgabe. Ich möchte, dass du die Homepage der Alchemy-Yoga-Website in Adobe XD oder einem anderen Prototyping-Tool, das du verwenden wirst, entwirfst die Homepage der Alchemy-Yoga-Website in Adobe XD und prototypst. Ich werde Adobe verwenden, aber Sie können gerne Figma oder eine andere Plattform verwenden oder eine andere Plattform , mit der Sie sich wohl fühlen. Also einige hilfreiche Hinweise und Projektschritte. Als Erstes sollten Sie sicherstellen, dass Ihre Quelle lizenzfreies Bildmaterial ist. Es ist wirklich wichtig , dass Sie einige Zeit damit verbringen , nach Bildern zu suchen, die Sie verwenden werden. Denn oft wählen Sie Bildsprache, Sepsis, Farbton der Farben aus, Sie wählen die Schriftarten aus, Sie wählen die Positionierung, an der Sie die Website gestalten möchten. Und das wird als Grundlage dienen. Ich wähle meine Markenfarben für eine Website oft anhand von Bildern aus. Das ist also ein guter Ausgangspunkt und es ist ein Punkt, mit dem ich beginnen werde wenn ich meinen Prozess durchgehe. Als Nächstes sollten Sie anhand der Bildsprache eine Markenfarbe auswählen . Also habe ich das gerade erwähnt. Ich wähle meine Markenfarben oft gerne anhand der Bildsprache aus, da dies dazu beiträgt, ein einheitlicheres Erscheinungsbild zu erzielen und beizubehalten und dann die Homepage der Website als Prototyp zu erstellen ein einheitlicheres Erscheinungsbild zu erzielen und beizubehalten . Insbesondere für dieses Projekt werde ich also nur die Homepage der Website erstellen, werde ich also nur die Homepage der Website erstellen wenn Sie auf jeden Fall die gesamte Website erstellen möchten, machen Sie es. Aber für dieses Projekt werde ich mich, da es unser erstes Kundenprojekt ist, unser erstes Kundenprojekt ist, nur auf die Homepage konzentrieren. Eine optionale Herausforderung , die Sie entweder an- oder abbestellen können , besteht darin in dieser Klasse bereitgestellten Kopieraufforderungen zu verwenden und die Kopie tatsächlich für Ihre Kunden zu schreiben. Für Designer ist das oft eine große Herausforderung , weil uns als Designer nicht unbedingt beigebracht wird, wie man Kaffee schreibt, sondern wie man Dinge visuell ansprechend macht. Also, wenn du dich selbst herausfordern und dir tatsächlich Mark Copy für Alchemy Yoga einfallen lassen willst. Tun Sie das gerne und Sie können ihnen wirklich helfen, ihre Markenbotschaft zu formulieren. Und das ist auch im Designbereich sehr verbreitet. Wenn Sie Websites schreiben, kopieren und gestalten können, haben Sie mehr Leistung, Sie werden viel mehr Dienstleistungen verkaufen. Nehmen Sie also gerne diese optionale Herausforderung an. Ich persönlich werde in meinem Website-Prototyp nur Copy Pumps verwenden , aber Sie können gerne auch etwas anderes tun. Also zuerst werde ich damit beginnen, Inspiration zu finden. Hier beginne ich immer all meine Designprojekte, weil ich wirklich eine Vorstellung davon bekommen möchte , welche Dinge existieren. Offensichtlich bin ich schon seit geraumer Zeit Designer, also weiß ich bereits, in welche Richtung ich gehen möchte. Aber wenn das dein Intro zum Thema Design ist, ist es immer eine wirklich gute Idee, dich vom Yoga inspirieren zu lassen, um diese kreativen Kräfte zum Fließen zu bringen, damit du wirklich ein Gefühl dafür bekommst , welches Design du hast. wird kreieren. Ich werde nach der Yoga-Website suchen und dasselbe auch auf Pinterest tun. Und jetzt gibt es viele verschiedene Websites, von denen wir uns inspirieren lassen können. Nun, einige Adjektive , die sie verwendeten waren sehr erdig, minimalistisch und sauber. Ich liebe diesen Look wirklich und werde mich einfach weiter inspirieren lassen, sodass ich das Gefühl habe , die verschiedenen Adjektive zu repräsentieren , die in der Kundenbeschreibung aufgeführt sind. Damit ich mir die Marke und die Richtung, in die wir gehen, wirklich vorstellen kann. Auch hier werde ich einfach einige minimale Website-Design-Stile öffnen einige minimale Website-Design-Stile , deren Aussehen mir sehr gut gefallen hat, die aber nicht zu klischeehaft wirken. Ich habe das Gefühl, dass der Designraum manchmal fast zu einfach ist. Falls das Sinn macht. Ich möchte, dass es minimal ist. Ich möchte, dass es sauber ist, aber ich möchte nicht, dass es zu klischeehaft aussieht. Ich werde einfach weitermachen und anfangen, verschiedene minimale Webdesign-Stile zu öffnen . Also werde ich minimales Webdesign machen und das nachschlagen. Sie müssen im Yoga-Bereich nicht nach Webdesign-Layouts suchen . Sie können nach verschiedenen Website-Designstilen suchen und sie dann im Yoga neu erstellen. Es ist üblicher, einen Stil oder ein Thema neu zu erstellen als sich speziell für eine Website inspirieren zu lassen, insbesondere in Ihre Nische , für die Sie entwerfen. Also werde ich auch weiterhin nach minimalen Website-Designs suchen . Dieser hat mir sehr gut gefallen. Ich werde einfach weitersuchen ein paar verschiedene Adjektive in Pinterest eingeben , nur um sicherzugehen, dass mir verschiedene Dinge gezeigt werden , wirklich wie dieses. Ich liebe die Textur dort. Also jetzt habe ich ein paar verschiedene Designs, die mir gefallen und die Farben hier haben mir sehr gut gefallen. Wir haben sehr neutrale Farben, sehr sanfte Farben. Und weil einige der verwendeten Adjektive kriegerisch, organisch, minimalistisch, vertrauenswürdig, sauber, simpel sind. Ich möchte wirklich, dass das rüberkommt. Jetzt habe ich also Inspiration für das Webdesign. Und noch einmal, ich werde sie mir nur genauer ansehen. Du bist auf Pinterest und siehst eine Website, die dir gefällt. Du kannst tatsächlich nach unten scrollen und dir werden tatsächlich mehr empfohlen, die dem ähneln , den du magst. Das ist also auch sehr nützlich, wenn Sie Inspiration für Webdesign suchen. Ich habe diese Zeile wirklich geliebt. Ich finde, die Sommerstimmung ist wirklich gut. Ich habe auch Sommerfreitage geliebt und ja, das war's für heute. Als Nächstes habe ich einige Designinspirationen , die ich als Grundlage verwenden kann. Auch hier habe ich keine Bildsprache, ich habe keine Markenfarben. Ich habe nichts. Ich fange komplett bei Null an. Das nächste, was ich tun werde ist lizenzfreies Bildmaterial zu finden. Also öffne ich einen neuen Tab und gehe zu Pixeln. Das ist meine Anlaufstelle für lizenzfreie Bilder. Es sind wahrscheinlich viele andere Websites, auf denen Sie lizenzfreie Bilder finden können. Es gibt auch kostenpflichtige Plattformen , auf denen sie Bilder finden können. Ich verwende Pixel. Das verwende ich für so ziemlich jedes einzelne Kundenprojekt, das eine eigene Bildquelle benötigt, aber Sie können gerne eine andere Ihrer Wahl verwenden. Ich werde nach einem Yogalehrer suchen, weil wir auch hier mitteilen möchten , dass wir mit einer Yoga-Marke zusammenarbeiten und sie noch keine Bilder hat. Wir wollen nur eine Vorstellung davon bekommen, welche Arten von Bildern sie verwenden können, um ihre Marke zu repräsentieren. Ich liebe dieses und ich werde einfach weitermachen und anfangen, sie herunterzuladen. Also klicke ich einfach auf Herunterladen. Ich werde das für so ziemlich viele verschiedene Bilder machen . Ich liebe dieses erdige Gefühl im Freien wirklich, ich habe das Gefühl, es fühlt sich an, als wäre es ein Wellness-Refugium. Also werde ich das herunterladen. Ich liebe das auch. Ich liebe die Erdfarben hier, also werde ich auch diese herunterladen. Und oft stellt man fest, dass man offensichtlich erkennen kann , dass dies von demselben Fotografen gemacht wurde. Wenn ich also in einem neuen Tab darauf klicke und ihn öffne, wirst du tatsächlich Bilder von genau demselben Fotografen sehen . Sie könnten also weitermachen und diese herunterladen, oder Sie können sogar den eigentlichen Fotografen öffnen und direkt zu seiner Sammlung gehen. Und dann haben sie hier vielleicht eine Sammlung, die spezifisch für das bestimmte Bild ist , nach dem Sie gesucht haben. Also ich liebe Pexels wirklich. Ich habe das Gefühl, dass es hier viele wirklich gute Fotos gibt. Und ich versuche, von der grundlegenden Bildsprache abzuweichen. Hier haben wir also eine ganze Sammlung von Bildern, die zusammenhängend eine Botschaft vermitteln. Es verkauft wirklich die Idee von Wellness und morgendlichem Yoga und all diesen wirklich schönen, erdigen Vibes. Es gibt auch Videos hier , was großartig ist. Ich liebe das. Ich liebe das Foto. Also werde ich das herunterladen. Ich werde im Grunde einfach weiter Bilder herunterladen, von denen ich denke, dass sie die Marke repräsentieren. Es dauert also einige Zeit, nach verschiedenen Yoga-Bildern zu suchen. Du musst mich nicht exakt kopieren. können dies in Ihrem eigenen Tempo tun und sich etwas Zeit nehmen , um herauszufinden welche Art von Joghurtmarke Sie kreieren möchten. Wenn ich also zu Pexels gehe, gibt es vielleicht eine andere Reihe von Bildern, deren Aussehen mir sehr gut gefallen hat. Und das kann ich mir auch ansehen. Mir hat die Idee, einen Lehrer anpassen zu lassen, sehr gut gefallen. Ich habe das Gefühl, dass es auch das Übergeordnete kommuniziert. Ziel eines Yogastudios. Ich habe das Gefühl, wie sie sagten, Menschen aus allen Gesellschaftsschichten. Ich denke, etwas, das auch wirklich einzigartig wäre. Es geht darum, ein Bild zu finden, das, Oh, ich liebe dieses. Ich denke, eine weitere Sache, die wirklich einzigartig wäre , wäre, Bilder von Menschen aus allen verschiedenen Altersgruppen zu finden Bilder von Menschen aus , von allen verschiedenen Unterschieden, allen verschiedenen Geschlechtern, Ethnien, all diesen verschiedene Dinge, um die Tatsache zu vermitteln, dass Alchemie und Yoga ausdrücklich erwähnt haben, dass sie sich um Menschen aus allen Gesellschaftsschichten kümmern. Wir wollen also nicht, dass alles zu flexibel ist , weil wir nicht nur superflexible Leute anziehen wollen . Sie wollen offensichtlich Menschen aus allen Gesellschaftsschichten anziehen . Also ich möchte das wirklich kommunizieren. Also werde ich vielleicht nach einem Yoga-Kurs suchen und sehen, welche Dinge auftauchen. Es wird nach unten scrollen. Ich habe auch diese launischen Bilder geliebt, um ein Gefühl dafür zu bekommen, ob die Klassen, die ich liebe, in diese Klasse gewählt wurden. Also werde ich das speichern. Und im Grunde werden wir die meisten dieser Fotos wahrscheinlich nicht verwenden. Die beste Idee ist, diese wirklich als Grundlage für Ihr Branding und Ihre Website zu verwenden . Also nochmal, ich scrolle einfach durch und suche nach weiteren Kodos für Gruppenkurse. Also ich liebe diesen. Ich liebe auch diesen. Und diese stammen offensichtlich alle vom selben Fotografen. Sie können dieselben Modelle sehen, dieselbe Szene. Ich möchte, dass du dieses Video pausierst, bis du mit der Beschaffung lizenzfreier Bilder fertig bist . Dies ist die erste Aufgabe dieses Kundenprojekts und unerlässlich, um das Fundament der Website zu legen. Deshalb möchte ich, dass du all die Bilder findest, von denen du denkst, dass sie für Alchemie-Yoga stehen. Und wenn du das gemacht hast, möchte ich, dass du dir dieses Video noch einmal ansiehst und dann können wir mit dem Rest des Unterrichts fortfahren. Jetzt habe ich also einen ganzen Ordner mit einer Reihe verschiedener Bilder, die Alchemy Yoga aus meiner Interpretation der Marke darstellen . Wenn Sie mit einem Kunden zusammenarbeiten, erhalten Sie natürlich viel spezifischere Informationen über die Marke als die Kundeninformation, die ich Ihnen präsentiert habe. Aber das ist ein wirklich guter Ausgangspunkt. Wir haben also die Bildsprache und wir haben auch die Webdesign-Inspiration, die als Ausgangspunkt für die Marke verwenden können. Also werde ich mir einfach einige dieser Ideen ansehen und wirklich anfangen mit den verschiedenen UX in meiner Adobe XD-Datei herumzuspielen. Ich liebe diesen auch sehr, also werde ich ihn auch einfach öffnen . Ich liebe diese Skriptschrift und die Formen und Texturen. Also möchte ich damit beginnen. Ich werde einfach weitermachen und die Bildschirme teilen, meine XD-Datei öffnen und im Grunde damit herumspielen. Also zurück zu der Art, wie ich entweder UX oder Website prototypisiert habe Ich werde hier im Grunde dasselbe tun und auf die verschiedenen Elemente einer Website konzentrieren. Wir haben hier also ein Quadrat, hier eine andere Form, um diese Kunstform darzustellen. Und wieder werden wir um die Ecken gehen. Also werde ich weitermachen und hier klicken und um die Ecken gehen. Perfekt. Das sind also verschiedene Formen. Dann werde ich auch sicherstellen , dass es hier ein Logo gibt. Also Logo, finde einfach eine Schrift , die ich vorerst als Logo verwenden kann. Das muss nicht perfekt sein, denn wir werden es später noch einmal verfeinern. Aber auch hier wollen wir nur eine allgemeine Vorstellung davon bekommen , in welche Richtung wir gehen. Das alles wird Sinn machen , wenn wir uns weiter mit den verschiedenen Designelementen befassen. Aber ich werde es vorerst so belassen, weil es sehr minimal ist. Also haben wir das. Und jetzt werde ich die verschiedenen Texteingabeaufforderungen öffnen, denn wie ich in der Kundenbeschreibung erwähnt habe, dieser Kunde keine Kopien, also wollen wir sicherstellen, dass wir die Kopie auf eine Art und Weise, die für Alchemie-Yoga spezifisch ist. Also werde ich diese Kopieraufforderungen öffnen . Und ich habe diese Kopieraufforderungen geöffnet. Und was ich tun werde, ist diese einfach zu kopieren und meine anderen Dokumente einzufügen, damit ich das kopieren und einfügen und hier einfügen kann. Das Gute an Adobe XD ist, dass Sie zwischen Dateien kopieren und einfügen können, was es wirklich einfach macht. Also werde ich die Farbe der Schriften auf Schwarz ändern. Ich werde das linksbündig ausrichten und die Größe so ändern , dass es zu diesem speziellen Design passt. Ich möchte hier eigentlich auch einen Button darstellen. das hier hoffe, werde ich schwarz. Und wieder werden wir in der Lage sein, diese Farben im Laufe der Zeit zu ändern . Aber auch dies ist ein wirklich guter Ausgangspunkt. Und ich habe noch einen hier. Ich wollte den Button speichern, fett machen und sicherstellen , dass er weiß ist , damit ich ihn sehen kann. Eine schnelle Möglichkeit, zu diesem Auswahlwerkzeug zu wechseln , besteht darin, auf V zu klicken . Und es wird automatisch diese Schaltfläche hier ausgewählt, was beim Drag-and-Drop sehr nützlich ist. Dann haben wir das. Und dann werde ich dieselbe Schrift auch für die Navigation verwenden . Es wird das auch hier wieder hochbringen , es schwarz machen. Wir wollen hier also wirklich eine Yoga-Marke vertreten. Was sind also einige der verschiedenen Elemente der Navigationsleiste, wäre Home. Vielleicht. Über vielleicht Unterricht, Yoga, vielleicht sind Yoga-Kurse dasselbe. Also Yoga-Kontakt jetzt buchen, Kurse über vielleicht statt über, ich werde die Philosophie einfach so platzieren, dass sie direkt auf das tatsächliche Angebot der Marke zugeschnitten ist. Und dann werde ich auch sicherstellen, dass ich diese zentriere und verteile. Also werde ich sie vertikal zentrieren und sie dann horizontal verteilen. Und dann öffne ich auch mein Netz. Wenn ich also auf Command Shift (Apostroph) klicke, können wir unsere Raster öffnen und wir können beginnen, die Dinge an unserem aktuellen Raster auszurichten. Ich möchte das auch am äußeren Raster ausrichten, sodass wir wirklich haben den Look, den wir erreichen wollen. Also haben wir das. Sie haben das Logo hier. Also werde ich das hier in eine Reihe stellen. Und ich werde die Netze wieder schließen. Wir haben also eine starke Aussage. Und jetzt möchte ich das tun. Also werde ich es öffnen. Moment gilt dies als der Held der Website. Und wieder der wichtigste Teil der Websites. Sie möchten sicherstellen, dass das visuell fesselnd ist. Jetzt möchte ich von hier aus Bilder erstellen, damit ich der gesamten Website verwenden können, besser verstehen verschiedenen Farben, die wir auf der gesamten Website verwenden können, besser verstehen kann. Also werde ich meinen Finder-Tab öffnen. Wir haben Bilder hier. Und ich möchte mit dem herumspielen, was ich als primären Header der Websites verwenden möchte. Ich werde das per Drag & Drop ziehen, weil ich das Gefühl habe, dass es eine Klasse darstellt. Vielleicht passen wir das an, damit wir das besser sehen können. Ich liebe auch diesen. Also möchte ich mit verschiedenen Bildern herumspielen , damit ich ein Gefühl für die Richtung bekommen kann . Sie können sehen, dass die Grenzen geschlossen sind. Also werde ich die Bilder hervorheben und sicherstellen, dass der Rand nicht markiert ist. Die sind sich ein bisschen zu ähnlich. Also möchte ich eigentlich ein anderes Foto haben, das eine Art Textur hat. Ich werde dieses Bild machen. Und ich mag es wirklich sehr, wie diese Ecken an der Ecke der Website geformt sind. Also werde ich das vorerst so belassen, wie es ist. Um das ein bisschen auszudehnen. Ich werde auch die Hauptnavigationsleiste oben etwas stärker ausrichten Hauptnavigationsleiste . Ich werde nur vorschlagen, dass ich das Gefühl habe, dass mir das nicht unbedingt gefällt, wie ein dezentrierter Look, ich werde damit experimentieren er aussehen würde, wenn er zentriert wäre. Und das ist perfekt vertikal. Ich bin mir nicht sicher, ob ich das liebe. Aber vielleicht möchte ich eigentlich einfach den Baum holen. Also werde ich das erweitern und vielleicht einfach die Bäume von diesem Foto holen. Weil ich eine Art Textur kreieren möchte. So soll es nicht ganz aussehen. Aber ich habe das Gefühl, dass ich hier auf jeden Fall eine neutrale organische Textur haben möchte . Also werde ich weitermachen und wieder zu Pexels gehen. Und ich werde nach einer ästhetischen Textur suchen und sehen, was dabei herauskommt. Hoffentlich kann ich etwas finden , das in diesem Bereich verwendet werden kann. Und es könnte einige Zeit dauern, mit verschiedenen Keywords zu spielen , da das offensichtlich nicht das ist , wonach ich suche. Es ist viel zu bunt. Also werde ich einfach Ästhetik eingeben und sehen, was dabei herauskommt. Das könnte gut sein, aber es ist nicht ganz das, wonach ich suche. Also öffne ich es einfach in einem neuen Tab. Ich liebe diese Farben, sehr minimalistisch, neutral. Vielleicht taucht etwas anderes auf, wenn ich minimal suche . Ja, genau das suche ich. Ich werde einfach einige dieser Texturfotos herunterladen. Wir können es immer anpassen sobald wir es tatsächlich in das Design aufgenommen haben. Aber ich möchte auf jeden Fall etwas haben, das sehr neutral und sehr elegant ist. Vielleicht sogar ein paar Schatten nachschlagen, nur um die neutrale organische Textur zu erhalten die neutrale organische Textur , die der Kunde kurz bespricht. Ich möchte etwas finden , das das repräsentiert. Vielleicht ist Bio ein anderes Schlüsselwort. Ich kann nachschauen. Organische, minimalistische Ästhetik. Oh ja, ich liebe den Schatten hier. Weißt du, manchmal braucht es ein paar Versuche mit verschiedenen Keywords, bis das, wonach du suchst, angezeigt wird. Es ist also wirklich nur ein Spiel, bei dem man die Suchmaschinenoptimierung erraten muss. Also ich liebe den Schatten und etwas in dieser Richtung wäre perfekt für das, wonach ich suche. Das entspricht also definitiv viel mehr der Stimmung, die ich mir wünsche. Ich liebe auch dieses Handtuch hier. Es ist ein Handtuch oder vielleicht eine Decke. Aber auch hier möchte ich eine Textur kreieren, aber auf eine sehr neutrale organische Weise. Also werde ich vorerst damit weitermachen. Ich werde sehen, ob es hier ähnliche Schattenbilder gibt , welche, was großartig ist. Ich liebe den anderen Schattenlook. Also werde ich weitermachen und weiter einige herunterladen, damit ich wirklich mit all diesen verschiedenen Texturen im Design herumspielen kann wirklich mit all diesen verschiedenen Texturen im Design herumspielen . Also zurück zu meiner Adobe XD-Datei, ich werde die Texturen, die ich gefunden habe, abfragen und sie einfach hier ersetzen. Also mir gefällt das Aussehen definitiv besser. Aber ich habe das Gefühl, dass es immer noch ein bisschen zu dunkel ist, also werde ich die Opazität ein wenig abschalten , damit wir diesen Effekt erzielen können, aber auf eine etwas neutralere Art und Weise. Wir haben diese Textur ein bisschen, aber sie ist etwas kühler und weicher. Also werde ich einfach mit der Opazität spielen. Und ich habe das Gefühl, dass dieses Bild nicht unbedingt zu dieser Farbe passt. Ich möchte, dass etwas farblich ähnlich ist, aber auch repräsentativ für die Marke ist. Wir spielen wirklich nur mit Bildern herum , bis sich etwas richtig anfühlt. Ich werde diese Opazität anpassen, um dich zu sehen. Das wäre vielleicht besser. Mir gefällt das bisherige Aussehen wirklich sehr gut. Ich werde das auch einfach erweitern, damit die Textur etwas verblasster wird. Vielleicht nehme ich die dunkle Ecke. Großartig. Ich liebe das. Etwas ausblenden. Und das gefällt mir nicht, die Form überlappt sich so. Also werde ich hier tatsächlich einen Rand hinzufügen. Ich werde es 20 mit Rand machen und ich werde es tatsächlich weiß machen, damit es aussieht, als ob es sich einfügt. Ich liebe, liebe, liebe das bis jetzt. Und das ist eine gute Grundlage , auf der wir dann Markenfarben wählen können. Ich bin also zufrieden mit diesem Heldenbereich der Website und jetzt werde ich Farben auswählen, um den Zusammenhalt dieser Website wirklich zusammenzubringen. Wie bereits erwähnt, ist das erste, was ich bereits erwähnt habe, die Auswahl der Farben anhand der Bildsprache. Also werde ich hier einfach ein Quadrat zeichnen, den Rand ausschalten und mit dieser Pipette eine Farbe von diesem Bildschirm auswählen. Also werde ich damit herumspielen. Verwenden Sie erneut die Pipette. Ich werde nur versuchen, Farben aus den Bildern auszuwählen , die ich möglicherweise auf dieser Website verwenden kann. Hier hinten ist etwas Grün. Vielleicht möchte ich das in das Design einfließen lassen. Ich werde nur versuchen, ein paar verschiedene Farben zu finden. Und dann werde ich in der Lage sein, ein Tool zur Farbauswahl zu verwenden, um den Zusammenhalt der Website in Bezug auf die Farben wirklich zu um den Zusammenhalt der Website in Bezug auf die Farben wirklich bestimmen. Also vielleicht sogar ein hellerer Ton hier unten, das Gleiche. Vielleicht diese Rückwand hier , die das repräsentieren kann, oder? Sie können also bereits sehen, dass Sie in der Lage sind, einen gewissen Zusammenhalt in Bezug auf Farben zu erkennen einen gewissen Zusammenhalt in Bezug auf Farben indem Sie Farben aus Bildern auswählen. Offensichtlich macht gutes Fotografieren aufgrund der Farben Sinn. Die Auswahl von Farben aus Bildern ist also ein wirklich guter Ausgangspunkt. Sobald ich das gemacht habe. Ich gehe dann auch auf eine Website namens coolers.com, die ein wirklich großartiger Farbgenerator ist, um Farbpaletten superschnell auszuwählen. Dies ist eine meiner bevorzugten Websites für die Auswahl von Farbpaletten. Also wähle ich einfach diese Farbe aus und kopiere den Hex-Code und füge ihn hier ein. Dann werde ich es verriegeln. Sobald ich den Hex-Code eingegeben habe, kann er Farbpaletten basierend auf dem von mir eingegebenen Hex-Code generieren . Also sagen wir, ich möchte auch diese grüne Farbe verwenden weil ich sie wirklich mag und ich denke , es wäre eine wirklich tolle Markenfarbe. Dann kann ich die nebeneinander stellen, das verriegeln. Dann werden die nächsten Farben, die mir präsentiert werden , Farben sein, die dazu passen. Ich habe tatsächlich das Gefühl, dass das zu dunkel sein könnte. Also werde ich versuchen, nur eine grüne Farbe zu verwenden, um zu sehen welche verschiedenen Farben wirklich zu der Marke passen , die ich kreiere. Also nochmal, wir werden hier wirklich einen minimalen Blick darauf werfen. Also ich möchte wirklich sehr neutrale Farben finden. Also ich liebe diese Champagnerfarbe, also werde ich sie sperren und die Leertaste weiter gedrückt, bis ich mit der endgültigen Farbpalette zufrieden bin . Das ist also nicht unbedingt das, was Sie tun müssen , um Farben auszuwählen. Es ist eine großartige Ressource für den Anfang, wenn Sie Schwierigkeiten haben, zusammenhängende Farben zu finden Wir haben ein Auge für Farben. Das ist auch wirklich großartig und das können Sie auch auf jeden Fall tun. Also werde ich das einfach reinkopieren. Eine gute Faustregel ist, darauf zu achten, dass Sie nicht mehr als fünf Farben auswählen. Sie können also sehen, dass sich diese Farbe und diese Farbe sehr ähnlich sind. Also werde ich das tatsächlich entfernen und durch dieses ersetzen. Ich finde das auch etwas zu dunkel und ich möchte auf jeden Fall auch Schwarz für den Text verwenden. Also werde ich das durch eine schwarze Farbe ersetzen. Also werden wir schwarz, leicht grün haben. Ich mag es, sie vom dunkelsten zum hellsten anzuordnen damit ich sie wirklich nebeneinander sehen kann. Ich mag diese blasse Farbe nicht unbedingt, also werde ich versuchen, einen anderen Farbton zu finden. Ich mag diese Farbe wirklich. Ich liebe diese beiden Farben. Und dann entscheiden wir uns vielleicht einfach für General White. Eine andere Sache, die ich gerne mache, wenn ich versuche, den richtigen Farbton zu finden, ist dieselbe Farbe aus der Farbe auszuwählen , die ich zuvor kombinieren möchte. Und dann gehe zum Farbwähler und bewege langsam meinen Cursor, bis ich eine Farbe finde, mit der ich relativ zufrieden bin. Ich mag diesen Weißton wirklich und er ist sehr, sehr , sehr subtil, was ich liebe. Damit werde ich weitermachen. Und wieder ist dies nur ein Ausgangspunkt. Sagen wir, wenn ich den gesamten Website-Prozess durchlaufe und diese Farben nicht wirklich zum Rest der Bildsprache passen oder nicht zu ihnen passen, kann ich sie später anpassen. Speichern Sie dies als endgültige Farbpalette. Ich bin zufrieden damit. Ich kann hier zu den Farben gehen und auf plus eins klicken. Ich habe sie alle markiert und dann kann ich die Farben sehr einfach auswählen , wenn ich etwas bearbeite. Sagen wir zum Beispiel, ich möchte diese Button-Farbe so ändern , dass sie grün ist. Es ändert sich dort automatisch, will seine gesamte Menüleiste auch grün werden lassen. Es kann dort gemacht werden. Wenn ich die gesamte Hintergrundfarbe auf Grau ändern möchte, kann ich das auch tun, aber ich bin es nicht, weil ich möchte, dass es nur weiß ist. Dies sind einige Ressourcen , um Farben zu finden. Also fangen wir an, hier einen etwas einheitlicheren Look zu bekommen . Und was ich eigentlich tun werde, ist das etwas weiter zu erweitern und es etwas größer zu machen. Als Nächstes möchte ich zu den Kopieraufforderungen zurückkehren und dann den nächsten Abschnitt der Website erstellen. Ich werde einfach diesen ganzen Abschnitt kopieren und einfügen, weil ich möchte, dass er ein ähnliches Format hat. Und es ist in der Regel eine gute Faustregel, sicherzustellen , dass Sie wechselnde Positionen haben. Sagen wir also, wenn sich der Text auf der rechten Seite befindet, der nächste Abschnitt, die Steuer sollte der nächste Abschnitt, die Steuer auf der linken Seite stehen, oder in Spalten mit drei abwechselnden verschiedenen Textilien ist das wirklich, wirklich wichtig. Also haben wir das. Ich werde das löschen und ich werde es tatsächlich zu einer Komponente machen. Also werde ich diese gruppieren, daraus eine Komponente machen und sie hierher ziehen und dort ablegen. Auch hier wollen wir eine Art von Bildsprache, die Sinn macht. Also werde ich weitermachen und vielleicht ein Quadrat zeichnen, weil ich vielleicht ein Quadrat in diesem Abschnitt hier haben möchte. Ich möchte sicherstellen, dass es zur Mitte ausgerichtet ist. Also werde ich einfach per Drag & Drop ziehen. Ich werde mein Raster einschalten, damit ich sehen kann , wo ich mich in meinem Design befinde. Und ich werde es an der Mitte ausrichten. Öffne meine Fotografie und schau, welche Art von Foto ich dann hier hinzufügen möchte. Auch hier liebe ich diesen Look wirklich, er ist zu groß. Was ich jetzt sehe und was mir gerade nicht besonders gefällt , bedeutet nicht unbedingt, dass es falsch ist. Es ist einfach etwas, das ich nicht unbedingt mag , ist , dass dieser weiße Teil ganz nach unten geht. Ich möchte also damit herumspielen, dass dieser Hintergrund eine andere Farbe hat. Also werde ich hier einfach ein Feld zeichnen, den Rand ausschalten und vielleicht eine andere Farbe auswählen und sie nach hinten schicken. Also ich mag das nicht wirklich. Vielleicht kann diese cremefarbene Farbe hier gut sein. Okay. Das gefällt mir sogar. Also werde ich sicherstellen, dass die Grenze übereinstimmt. Also wähle ich die Pipette für den Rand so aus. Es sieht also so aus, als ob es in diesem Sinne wirklich kohärent ist. Das gefällt mir sehr gut. Ich bin mir nicht sicher, ob ich diese beiden Farben zusammen mag. Also werde ich tatsächlich etwas mit diesem Farbton herumspielen und ich möchte, dass er zu dieser Farbe passt. Also werde ich das auswählen und langsam hochgehen, bis ich etwas finde , das mir in Bezug auf die Farbabstimmung wirklich natürlich erscheint . Es ist sehr subtil. Ich möchte nicht, dass es komplett weiß ist, aber ich möchte auf jeden Fall, dass es einen kleinen Farbton hat , um verschiedene Bereiche hervorzuheben. Also ich liebe diese Farbe. Ich finde es sehr neutral. Ich werde auch die Grenze anpassen. Ich mag das Grün nicht unbedingt, also werde ich es hier ersetzen, die Gruppierung aufheben und dann die Füllleiste auswählen. Und wieder werde ich einfach den Farbwähler verwenden, bis ich etwas gefunden habe, mit dem ich zufrieden bin. Ich liebe diese Farbe, nicht ganz grün, aber wir fühlen uns trotzdem irgendwie erdig an. Es ist ein bisschen leichter, was ich liebe. Ich werde das gruppieren, kopieren und einfügen und das hier ablegen. Ich werde also definitiv einen viel besseren, zusammenhängenden Look bekommen. Und ich bin sehr zufrieden mit der Richtung, die wir bisher eingeschlagen haben. Also lasst uns weitermachen. Ich werde diese Logos nur leicht anpassen. Und dann der nächste Abschnitt, ich gehe zurück zu den Kopieraufforderungen und kopiere diese verschiedenen Abschnitte und platziere sie hier und baue sie dann hier weiter. Jetzt konzentriere ich mich auf den Bereich Angebote und mache dann ein weiteres Rechteck, und mache dann ein weiteres Rechteck hier hinten liegt, und schicke es nach hinten. Wenn Sie also mit der rechten Maustaste klicken und auf In den Hintergrund senden klicken, können Sie das tun, oder Sie können auf diese Befehle klicken, nämlich Command Shift und die linke Klammer, und dann sollte es nach hinten gehen. Und dann wieder möchte ich mit den verschiedenen Farben herumspielen . Diese Farben sind noch nicht perfekt, daher möchte ich mich noch nicht wirklich darauf festlegen, aber ich liebe auf jeden Fall, ich liebe den Look bis jetzt. Ich gehe zu Alles und mache den Text weiß, und ich werde auch den Rand weiß machen. Und wieder sehen wir uns hier viel kohärenter um. Ich liebe diesen Designstil wirklich und ich habe das Gefühl, dass ich wirklich das minimale Gefühl habe, das ich mit diesem speziellen Design erzeugen möchte. Also nochmal, es ist nicht perfekt. Wir werden die Textstile am Ende finalisieren. Aber auch hier ist es ein wirklich, wirklich guter Ausgangspunkt. Also haben wir das. Ich werde einfach weitermachen und das hier hinzufügen. Was ich tun möchte, ist diese Textur wieder einzubringen. Ich kopiere das, füge es hier ein und erweitere es, sodass wir wieder diese Textur haben. Und was ich tun möchte, ist, dass das vielleicht ein Kontaktbereich oder ein Abschnitt über uns sein wird , aber etwas, das es mir ermöglicht etwas zu entwerfen , das wirklich einzigartig für den Sprint ist. Also werde ich mein Raster wieder öffnen und hier ein Rechteck zeichnen , weil mein Raster und dieses an der Mitte ausrichten. Und ich werde den Rand ausschalten und sicherstellen, dass die Füllung weiß ist. Weißt du was, vielleicht will ich einen Rand, aber anstatt dass es diese Farbe ist, möchte ich, dass es diese Farbe ist. Also werde ich 20 draus machen. Und wieder sorgt es für einen zusammenhängenden Look. Eine gute Faustregel ist, darauf zu achten, dass Sie auf einer Website nicht mehr als fünf Markenfarben haben auf einer Website nicht mehr als fünf Markenfarben , um sicherzustellen, dass alles zusammenhängend ist. Also wähle ich das einfach als Schwarz aus, weil ich das Gefühl habe, dass es nicht diese Schwarz aus, weil ich das Gefühl habe Farbe in der Mitte sein muss. Das werde ich ein bisschen anpassen, es größer machen. Ich werde es tatsächlich dort beenden. Ich mache daraus eine Kontaktseite, das Kontaktformular. Mach weiter und geh hier, kopiere das, nimm Kontakt auf oder buche deinen nächsten Kurs. Ich fülle das einfach hier aus. Kopieren und einfügen zentrieren Sie das. Kopieren Sie dann erneut die Schaltfläche. alles haben wir in der Mitte. Ich bin ziemlich zufrieden damit, wie das ausgegangen ist. Und jetzt möchte ich die Schrift finalisieren. Also werde ich weitermachen und alle anklicken, die ich sehe. Und ich werde einfach die Schriften durchgehen und sehen, welche Dinge ich mag, welche Dinge sie nicht mögen. Und versuche wirklich, eine Schrift zu finden, die repräsentiert, wie diese Marke aussehen soll. Ich bin mir nicht ganz sicher, welche Art von Schriftart mir das Aussehen gefallen wird. Aber ich werde herumspielen und hoffentlich auf etwas stoßen, das mir gefällt. Ich mag diese Schrift wirklich. Ich finde, es ist sehr minimal. Ich werde es etwas kleiner machen , weil es mir vielleicht ein bisschen besser gefällt. Ja, ich mag das Aussehen. Ich habe das Gefühl , dass es diese minimale Atmosphäre hat, die ich zu schaffen hoffe. Das hast du. Und dann werde ich sie auch ändern und die Gruppierung aufheben, weil sie zusammen gruppiert sind. Und stellen Sie sicher, dass es sich um dieselbe Schrift handelt. Um es mir einfacher zu machen, werde ich es zu den Charakterstilen hinzufügen. Ich wähle alle aus, indem ich auf eines klicke und 8. Kurz 2: Ein mediterranes Restaurant: Kurz gesagt, wir arbeiten mit einem Restaurant namens Catch 35 zusammen. Also werde ich einfach die Kundenbeschreibung durchlesen und dann werde ich euch zeigen mit welchen verschiedenen Assets ich arbeiten werde. Und dann werde ich Sie durch meinen gesamten Website-Prozess für das Prototyping einer vollständigen Website Prototyping einer vollständigen Website Adobe XD Catch 35 ist eine schicke Loungebar und mediterranes Restaurant. befindet sich in der Stadt Chicago. Sie haben eine offene Küche und eine trendige Atmosphäre, die ihre Kunden genießen, und betreuen Kunden seit über zehn Jahren. Sie möchten ihre Website umbenennen, um sich ein bisschen zeitloser, trendiger und moderner anzufühlen. Die Website-Vision für den Kunden, meine Vision für die neue Catch 35-Website, besteht darin, das allgemeine Erscheinungsbild der Website zu modernisieren. Unser Interieur ist sehr einfarbig und stilvoll, daher würde ich mich freuen, wenn das auf unserer Website veröffentlicht wird. Ich möchte, dass die Website sehr visuell ist minimalen Text enthält, um ein trendigeres, luxuriöseres und moderneres Erscheinungsbild zu erzeugen . Ich lasse mich wirklich von redaktionellen Designs inspirieren , die modern und trendig sind. Einige Adjektive beschreiben den Gesamtstil für den sie sich entscheiden, ist stilvoll, trendig, ausgereift, modern, intim, eine lebendige Atmosphäre mit eleganter Einrichtung. Die Herausforderung für das Projekt besteht darin, dass das Restaurant, da das Restaurant seit einigen Jahren geöffnet ist, über bestehende Markenwerte verfügt denen es sich nicht trennen möchte. Das Logo und die vorhandenen Markenelemente werden gedruckt und in verschiedenen Bereichen des Unternehmens präsentiert, darunter Menüs, Visitenkarten im Geschäft und lokale Werbung. Bildsprache ist auch ein großer Teil der Marke und wir möchten dieses Restaurant auf eine visuell sehr interessante Weise präsentieren . Für diese Aufgabe möchte ich, dass Sie die vollständige Catch-35-Website entwerfen und prototypisieren , damit wir die Website vollständig visualisieren und durch die nächste Seite der Website navigieren können , so wie sie live war. Einige hilfreiche Hinweise, die Ihnen Einstieg erleichtern, sind die Recherche nach Inspirationen für das redaktionelle Website-Design, um eine Vorstellung davon zu bekommen , in welche Richtung Sie mit den Assets gehen möchten . Wir haben noch etwas, wie in der vorherigen Kundenbeschreibung erwähnt, ich habe es immer geliebt, Markenfarben anhand von Bildern auszuwählen, und weil sie bereits Bilder von ihrem Interieur, diesem Team, dem Essen, das sie haben Angebot, ich möchte wirklich sicherstellen, dass die Farben auf der Grundlage der Bildsprache ausgewählt werden , da dies ein so großer Teil ihrer Marke ist , den sie porträtieren möchten. Und dann ist die dritte Sache, ich möchte, dass Sie die gesamte Website in Adobe XD prototypisieren. Ich werde Sie durch meinen gesamten Prozess der Gestaltung nicht nur der Homepage, sondern auch der Innenseiten führen und sie so verlinken, dass, wenn Sie dies Ihrem Kunden präsentieren , bevor Sie in den Entwicklungsmodus wechseln. oder wenn Sie mit einem Entwickler zusammenarbeiten, können Sie wirklich simulieren, wie die Website interagieren soll und wie sich ein Benutzer anfühlt , wenn er jede Seite der Website durchläuft. Also werde ich einfach weitermachen und all die verschiedenen Vermögenswerte ansehen, die wir haben. Hier. Wir haben den Text der Website, sie haben eine Homepage, ein Menü und Informationen zu den Öffnungszeiten und dem Standort der Seite sowie die Möglichkeit , eine Reservierung vorzunehmen. Also 12345 Seiten, es scheint, als ob es nicht viel gibt. Deshalb möchte ich die Submarke mithilfe von Bildern wirklich visuell ansprechend präsentieren . Schauen wir uns also die Bildsprache an. Sie können dies in Google Docs einsehen, aber ich habe es bereits auf meinen Desktop heruntergeladen. Also werde ich Ihnen einfach ein anderes Markenvermögen zeigen. Wir haben also das Logo, sehr simpel. Wir haben die bestehende Speisekarte, um ein Gefühl für die verschiedenen Dinge zu bekommen , die sie anbieten. Und dann haben wir eine Art Textur. Wenn wir dieses Grau verwenden wollen, wenn wir es nicht verwenden wollen, ist das auch in Ordnung. Aber nur etwas , das sie von ihrem vorherigen Logo-Designer haben und das für ihre Speisekarte verwendet wird. Wir haben also das Markenvermögen. Dann haben wir hier viele verschiedene Bilder. Wir haben also wirklich Lust auf düstere, intime Atmosphäre, gemütliche Verabredung, wirklich schickes Essen, professionelle Köche. Deshalb möchte ich all diese verschiedenen Dinge wirklich auf der Website präsentieren . Und ein großes Ding ist, wie in der Kundenbeschreibung erwähnt, das Ambiente. Es ist sehr luxuriös, ich liebe das Aussehen wirklich. Und das sind alles lizenzfreie Bilder. Sie werden also feststellen, dass nicht alle perfekt zusammenpassen, aber Sie können sie gerne verwenden , um den gewünschten Look zu erzielen. Wenn wir Kundenbriefe haben, an denen wir gerade arbeiten, haben wir oft Kundenbriefe haben, an denen wir gerade arbeiten, eine Menge verschiedener Bilder, die auf verschiedenen Fotografen basieren , und einige Bilder passen möglicherweise nicht unbedingt zu anderen. Ihre Aufgabe ist es, die Bildsprache mit dem Design zu kombinieren , das Sie erstellen. Also gehe ich zunächst zu Pinterest, damit ich anfangen kann, mich inspirieren zu lassen. Einige Stichwörter, die sie genannt hatten waren Editorial Design, Restaurantdesign. Das möchte ich wirklich zeigen. Also werde ich weitermachen und nach Editorial Design suchen. Und dann öffne ich einen weiteren Tab, weil ich auch nach Restaurantdesigns suchen möchte. Ich möchte eine Fusion zwischen einer redaktionellen Website , die normalerweise für hochwertige Mode genutzt wird, und einem Restaurant schaffen , die normalerweise für hochwertige Mode genutzt wird . Also werde ich weitermachen und nach Restaurant- und Webdesign suchen. Und dann gehe ich auch hier rüber zum Editorial Design. Redaktionelle Gestaltung, Restaurant. Wir werden etwas zu sehen haben. Ich sehe viele Menüs, was nicht unbedingt das ist, wonach ich suche. Ich werde einfach weitermachen und mir die verschiedenen Restaurant-Webdesigns ansehen . Also haben wir den. Ja, ich liebe diesen. Wir wollen, dass es sehr simpel , weil es viele Bilder geben wird. Ich empfehle daher nicht, viele Farben oder visuelle Muster zu verwenden , da sie viele Bilder enthalten. Ich möchte, dass die Marke anhand der vorhandenen Bildsprache präsentiert wird, denn dafür zahlen die Leute im Wesentlichen zahlen die Leute im Wesentlichen, wenn sie in dieses Restaurant gehen. Das Aussehen gefällt mir sehr gut. Ich werde einfach weiterhin Dinge in neuen Tabs öffnen bis ich etwas finde, von dem ich wirklich inspiriert bin. Ich mag das Aussehen wirklich. Und es ist wirklich nützlich, wenn Sie auf Designs klicken, die Ihnen gefallen , und Ihnen wird eine ganz andere neue Suche angezeigt. Nutze das wirklich zu deinem Vorteil. Normalerweise öffne ich Dinge gerne in neuen Tabs. gerne dein eigenes Board für das Projekt erstellen , an dem du gerade arbeitest. Normalerweise mache ich das für Kunden, damit ich sicherstellen kann, dass ich alles an einem Ort habe und Dinge öffnen kann , wenn ich über einen Zeitraum von ein paar Wochen oder Monaten an einem Website-Design arbeite über einen Zeitraum von ein paar Wochen oder Monaten an einem Website-Design . Aber sie macht es wirklich einfach. Ich werde mich einfach weiter mit all diesen Dingen befassen. Mir hat die düstere und launische Atmosphäre sehr gut gefallen und ich denke , das ist es, was ich auf der Website darstellen möchte. Aber auch hier kann es sich je nach Bildsprache, die wir wählen, ändern. Ich mag diese klobige Skriptschrift mit dieser großen serifenlosen Schrift sehr. Das ist also etwas , das wirklich cool sein könnte und das wir präsentieren. Also im Grunde habe ich ein paar verschiedene Websites. Wir setzen natürlich auf eine wirklich dunkle und launische Atmosphäre , weil sie erwähnt haben, dass sie das in ihrem Website-Design wollten. Jetzt, wo ich ein paar Stücke habe, die ich als Inspiration verwenden kann, werde ich weitermachen und die Datei öffnen. Jetzt. Ich werde einfach einige der Markenwerte nehmen und sie in das Design integrieren. Also zuerst füge ich das Logo ein, das hier oben ist. Und oft erhalten sie ein Website-Designprojekt mit vorhandenen Markenressourcen. Manchmal sind ein paar auch Markendesigner. Kunden kommen vielleicht mit Marken zu Ihnen, aber manchmal verfügen die Leute auch über bereits bestehende Vermögenswerte. Und wenn Sie sich nur auf Webdesign spezialisieren und dann versuchen, ihre vorhandenen Ressourcen zu nutzen, sie auf eine neue Art und Weise neu zu gestalten, ohne sich zu weit von den ursprünglichen Markenressourcen zu entfernen. Das ist auch eine wirklich nützliche Fähigkeit. Wir haben das Logo dort. Und weil viele der Websites, die ich zur Inspiration aufgerufen habe, einen Bildhintergrund als Helden haben. Damit werde ich auch in meinem Design herumspielen. Also werde ich weitermachen und ein Quadrat zeichnen , das in den gesamten Heldenbereich passt, den Rand ausschalten. Dann werde ich weitermachen und meine Bilder öffnen. Ich möchte wirklich etwas finden, das das übergreifende und darüber hinausgehende Gefühl dieses RAM vermittelt . Ich möchte also wirklich, dass Sie etwas finden, das zeigt, dass ich dieses Interieur wirklich liebe. Also werde ich das als Hintergrund verwenden. Ich werde das nach hinten schicken, weil es auf einem dunklen Hintergrund ist. Ich möchte das Logo eigentlich auf die weiße Logo-Variante ändern . Also werde ich weitermachen und das dort hochladen. Und das Aussehen gefällt mir definitiv ein bisschen besser. Jetzt öffne ich die Aufforderungen zum Kopieren der Website, um zu sehen, welche Abschnitte sie wollen. Ich werde das einfach kopieren, damit ich die Möglichkeit habe , es unten in meine XD-Datei einzufügen. Sie darauf klicken, kann ich das Design , das ich erstellen möchte, wirklich simulieren. Ich werde weitermachen und ein Textfeld erstellen und das dort einfügen. Jetzt werden wir mit der Schrift herumspielen. Also nehme ich einfach eine Farbe von hier und mache daraus 22. Ich wollte auch eine andere Header-Schriftart haben. Deshalb möchte ich vielleicht meine eigenen Überschriften erstellen, weil einige Dinge im Google-Dokument eigentlich keine Überschriften haben, sondern Absätze. Was das Design angeht, weiß ich, dass Header dazu beitragen verschiedene Abschnitte des Designs zu unterbrechen. Obwohl meine Kunden mir nur dieses Exemplar gegeben haben, kann ich trotzdem verschiedene Texte hinzufügen , um die Website ein bisschen zu verschönern. Also haben wir das. Und ich werde hier oben auch ein weiteres Textfeld erstellen. Außergewöhnliche Erlebnisse schaffen. Ich werde daraus eine Header-Größe machen. Und dann werde ich jetzt Schriften finden, denen ich denke, dass sie die Marke repräsentieren. Und vielleicht möchte ich das sogar oben in diesem Hauptabschnitt hier haben, was wir in den Inspirationsstücken gesehen haben, die wir gefunden haben Ich werde es vorerst dort platzieren, damit ich den Unterschied wirklich sehen kann. Und ich gehe einfach zum Anfang meiner Schriften und klicke mich durch, um wirklich zu sehen, worauf ich hoffe. Da ich mich noch in der Experimentierphase befinde, werde ich auch mit verschiedenen Textsorten experimentieren und vielleicht möchte ich Großbuchstaben verwenden, wodurch ein anderes Erlebnis entsteht . Also werde ich beide haben. Sie sind nur, damit ich den Text sehen kann. Ich werde eine leichte Überlagerung auf diesem Bild erstellen. Also werde ich einfach einen weiteren Block über denselben zeichnen . Mach es schwarz. Oder ich werde sogar eine Farbe aus diesem Bild ziehen. Also verrückt zurück, arrangieren Sie das Senden an den Rücken und arrangieren Sie auch dieses Senden an den Rücken. Jetzt ändere ich die Opazität meines Overlays. So erhalten wir ein individuelleres Farberlebnis, behalten aber trotzdem den übergeordneten Look bei. Und es ermöglicht auch, dass unser Text noch mehr hervorsticht. Ich werde weitermachen. Jetzt werde ich mit Schriften herumspielen. Ich werde es ein bisschen erweitern, damit sie sich nicht überschneiden. Ich möchte immer noch, dass es sowohl zum Logo als auch zur Marke passt, also muss es hier nicht perfekt sein, wenn wir Ryan's geöffnet haben , um unsere Schriftarten und Farben auszuwählen. Aber auch hier möchten wir wirklich sicherstellen, dass es zum Logo passt , da dies das wichtigste Markenmerkmal ist, das sie haben. Wir möchten sicherstellen, dass die Website auch dem entspricht . Also ich mag diese große Schrift wirklich, also werde ich sie einfach zur Seite legen, weil ich sie vielleicht später verwenden möchte. Ich werde mir immer noch die Schriftarten ansehen, um zu sehen , ob mir noch etwas anderes auffällt. Ich mag diese Skriptschrift. Vielleicht möchte ich es zum Verschönern verwenden. Also werde ich das auch dort hinstellen. Und es geht wirklich darum, Schriften zu finden, die gut zusammenpassen. Oft ist es wirklich gut, verschiedene Schriftstile für verschiedene Textarten zu kombinieren . Also eine Kopfzeile, z. B. wenn Sie eine Serifenüberschrift haben, möchten Sie vielleicht eine serifenlose Absatzschrift verwenden oder umgekehrt. Und jetzt möchte ich eine Seite zum Buchen erstellen , da es sich um ein Restaurant handelt Der primäre Aufruf zum Handeln wird darin bestehen, zu buchen. Deshalb möchte ich das hier präsentieren. Das ist vielleicht keine Farbe, die ich hier verwende, aber ich kann sie an einer anderen Stelle auf der Seite verwenden. Ich wollte nur sehen, wie es aussehen würde. Also werde ich diesen Button jetzt kopieren und hier einfügen. Manchmal sieht Ihr Designraum so aus. Es geht nur darum, eine Reihe verschiedener Assets hinzuzufügen, die Ihnen gefallen könnten und die Sie möglicherweise als Referenz verwenden möchten , wenn Sie mit der Fertigstellung Ihres Designs beginnen. Also ich möchte das vielleicht nicht dort haben, aber ich möchte es vielleicht auf einem weißen Bereich um zu sagen, dass meine weißen Abschnitte vielleicht einen gelben Aufruf zum Handeln haben. Meine dunkleren Bereiche haben einen weißen Aufruf zum Handeln. Also werde ich das weiß und schwarz machen. Ich möchte auch weitermachen und meinen Header erstellen. Also nach Hause über das Menü, über das Menü, über die Öffnungszeiten und den Ort. Und ich möchte einen Abschnitt, der sich auf die Schaltfläche Jetzt buchen bezieht. Also werde ich weitermachen und das kopieren. Stell es her. Ich bin mir nicht sicher, ob mir dieses Bild-Overlay gefällt, also kopiere ich es und füge hier eine neue Option ein, damit ich Designs wirklich vergleichen kann. Also werde ich weitermachen und das nach unten verschieben. Und dann werde ich auch ein Rechteck dahinter zeichnen , dass ich immer noch diesen dunklen Effekt habe, aber es ist in einer eigenen Menüleiste. Ich verwende das Farbpipettenwerkzeug, um eine Farbe auszuwählen und sie an die Rückseite zu senden. Ich bin mir noch nicht sicher, ob ich es liebe, aber das ist okay. Wir befinden uns immer noch in dem Teil des Designprozesses, in dem es okay ist, dass die Dinge noch nicht perfekt sind. Und es dreht sich alles um die Lernerfahrung, bei der wirklich alles im Mittelpunkt steht. Ich werde den Button hier oben entfernen . Vielleicht möchte ich, dass das weiß ist. Also werde ich einfach ein bisschen mit dieser Farbe herumspielen. Also ich möchte wirklich, dass es ein Onyx-Schwarz ist. Und ich mag diese Schrift eigentlich nicht. Also werde ich weitermachen und es in etwas anderes ändern, das mir gefallen könnte. Und ich mag diese Schrift, Belgien. Also werde ich dies als meine primäre Call-to-Action-Schriftart verwenden . Machen Sie alles in Großbuchstaben, um einen zusammenhängenden Look zu erzielen. Erweitere das. Vielleicht ändere ich das , um einfach einen Tisch zu reservieren. Toll, das gefällt mir bis jetzt. Und jetzt kann ich mir eine passende Schrift aussuchen. Wir haben also Header-Schriftarten, wir haben Call-to-Action-Schriftarten und eine Menüschrift, und wir haben noch nicht unbedingt einen Absatz, also werde ich weitermachen und das kopieren und dort einfügen. Ich werde das unter meinen Farben speichern , damit ich hier endlich die Farben ändern kann. Ich werde das beenden. Ich ändere das auf dich 44. Dann schnappe ich mir hier auch diesen Call-to-Action-Button. Also füge ich diese Farbe einfach auf der linken Seite hinzu. Ich bin mir nicht sicher, ob ich es verwenden werde, aber ich möchte es auf jeden Fall als Referenz haben. Ich werde weitermachen und mir die Farbe von hier drüben holen und das machen, richtig. Ich werde weitermachen und das verschieben. Also wollen wir jetzt einen vereinfachten Absatz finden. Ich glaube, das gefällt mir, aber ich werde mit der Linienhöhe herumspielen . Nicht ganz groß genug. Wir haben hier einen Aufruf zum Handeln am Bucket Table. Ich möchte testen, wie das mit diesem gelben Call-to-Action aussehen würde . Ich werde weitermachen und das hierher verschieben. Und ich möchte diese Opazität tatsächlich etwas erhöhen. Das ist nicht das, was ich will. Also werde ich das dort in der gleichen Farbe machen. Ja, der dunkle, wirklich dunkle Onyx-Look hat mir sehr gut gefallen . Ich habe das Gefühl, dass es dazu beiträgt, ein luxuriöseres Gefühl zu schaffen. Und ich denke, wenn ich sie Seite an Seite sehe, gefällt mir diese rechte Seite definitiv viel, viel mehr. Also werde ich weitermachen und mit diesem weitermachen. Wir haben ein Buch mit Call-to-Action für Tabellen. Dann haben wir die Speisekarte. Daher gehen Sie oft auf Websites, um sich das Menü anzusehen. Das haben wir also hier und ich möchte das für diesen Abschnitt präsentieren. Jetzt möchte ich eine Collage erstellen, da ein großer Teil dieser Website das kulinarische Erlebnis ist. Also möchte ich eine Art Collage erstellen, die die verschiedenen Mahlzeiten , die sie anbieten, und die verschiedenen Speisen, die sie hören können, zeigt die die verschiedenen Mahlzeiten , die sie anbieten, und . Also werde ich hier einfach ein paar Quadrate zeichnen und Hoffentlich kann ich diese Collage erstellen. Schau. Ich weiß noch nicht, ob das wie der perfekte Lee an Ort und Stelle ist. Aber im Moment scheint es mir zu gefallen. Also werde ich einfach weitermachen und das noch weiter anpassen. Und im Moment beobachte ich die Dinge wirklich nur. Das ist völlig in Ordnung, weil wir später immer eine Melodie finden können . In diesem Abschnitt möchte ich wirklich all die verschiedenen Aspekte der Marken vorstellen. Also werde ich weitermachen und das größer machen. Eigentlich. Ich werde weitermachen und die verschiedenen Vermögenswerte , die wir haben, öffnen . Und sie haben erwähnt, dass sie einen großen Teil der Website aus Bildern machen wollten. Deshalb möchte ich das hier wirklich präsentieren. Sie möchten eine Mischung aus Getränken, Essen und allem, was im Grunde das kulinarische Erlebnis beinhaltet oder einen Einblick in das Angebot der Marke gibt. Wir wollen auch ein paar Leute, also das sind alles wirklich schöne Fotos, aber ich möchte auch ein stimmungsvolles Erscheinungsbild schaffen. Das kommt also oft zum Vorschein , wenn Menschen auf Bildern zu sehen sind. Das haben wir und ich werde den Rand ausschalten , wenn die Bilder an Ort und Stelle sind. Ich werde diese ganze Breite tatsächlich so machen. Richten Sie dies nach unten aus, um den vollständigen Collage-Effekt zu erzielen. Bann die gleiche Breite. Ich werde auch den Kaiserschnitt anpassen, sodass alle eine Collage erstellen. Das gefällt mir bis jetzt. Ich habe das Gefühl, dass es noch nicht die perfekte Collage ist, aber das ist völlig in Ordnung. Ich werde das tatsächlich etwas kleiner überspannen . Wir haben also ein paralleles Muster wie dieses, das die gesamte Breite erstreckt, und dann nicht. Also möchte ich hier irgendwie den gleichen Effekt erzielen. Vielleicht machen wir das hier etwas breiter, nett. Vielleicht möchte ich sehen, wie das aussehen würde , wenn das in voller Höhe wäre. Okay. Ich glaube, das hat mir bisher gefallen. Ich möchte nur sehen, wie es aussehen würde, wenn sich beide über die volle Höhe erstrecken würden. Nur ein bisschen cool. Das gefällt mir, weil es immer noch diesen parallelen Look hat. Eine andere Sache, die falsch sein könnte, ist die Tatsache , dass dies etwas überzentriert ist. Also werde ich weitermachen und mit meinen Rastern nachschauen und sie so ausrichten , dass es etwas zentrierter erscheint. Wir haben also diesen Collage-Look und vermitteln definitiv das Ambiente der Website. Also werde ich weitermachen und das noch weiter reduzieren. Ich werde das sogar mit einer Seitwärtssteuer verschönern . Ich bin also ein großer Fan des Seitentextes. Ich verwende es und die meisten meiner Designprojekte für meine Kunden, weil es dazu beiträgt, ein anderes Erscheinungsbild zu kreieren . Also werde ich weitermachen und tippen. Dann werde ich das zentrieren, gruppieren und dann alles hervorheben. Zentrieren Sie es vertikal. Also ich liebe das. Das sieht auf jeden Fall gut aus. Und dann werde ich weitermachen und mir das nächste Exemplar für die Homepage schnappen und es hier platzieren. Das ist also eigentlich ein Abschnitt zum Anzeigen des Menüs. Deshalb werde ich diesen Menüaufruf hier entfernen , da es eine Kopie zum Anzeigen des Geldes gibt. Ich stelle eine Tabelle auf, ich kopiere das, füge es hier ein. Und ich möchte dasselbe Schwarz verwenden , aber anstatt es mit einer Opazitätsüberlagerung zu versehen, werde ich es einfach komplett schwarz machen und dann werde ich den Text weiß machen. Jetzt gehe ich zurück zu meinem Google-Dokument und tippe diesen Abschnitt ein. Ich werde weitermachen und mir diesen Abschnitt hier oben holen , weil ich immer noch eine Unterüberschrift haben möchte. Also werde ich weitermachen und das rotieren. Du nimmst Weiß und ziehst es hierher. Ich werde all diese Zentren zentrieren. Das haben wir also und mir gefällt das bisherige Aussehen dieser Website auf jeden Fall. Dann haben wir endlich den letzten Aufruf zum Handeln aus diesem Google-Dokument. Wir haben also die Möglichkeit, einen Tisch zu reservieren. Also nochmal, ich werde diesen Abschnitt einfach kopieren und hier einfügen, füge ihn hier ein. Richten Sie alles nach links , weil ich möchte, dass Sie dieses Zentrum aufbrechen. Schau, du kannst irgendwie sehen, dass das zentriert ist, das ist zentriert, das ist zentriert. Ich möchte also in der Lage sein, etwas zu schaffen, das es uns ermöglicht, dieses zentrale Gleichgewicht zu durchbrechen. Also werde ich weitermachen und das linksbündig machen. Und wieder werde ich einfach ein Bild kopieren und einfügen und das hier drüben platzieren. Ich werde das durch ein Bild ersetzen. Also ich liebe das bis jetzt. Also möchte ich tatsächlich versuchen, zu experimentieren, dass dies in voller Breite ist. Also werde ich es einfach kopieren und erneut einfügen , damit ich meine Designs leicht vergleichen kann. Dies ist sehr wichtig, wenn Sie versuchen, sehr subtile Unterschiede in InDesign zu vergleichen. Also werde ich einfach diese volle Breite überspannen. Ich halte also die Umschalttaste gedrückt und es erstreckt sich automatisch über die gesamte Breite, wenn ich nicht die Umschalttaste drücke. Es wird skaliert, aber die Bilder werden nicht skaliert. Sie also die Umschalttaste gedrückt halten, können Sie wirklich diesen Effekt erzielen, den ich auch einfach nach unten verschieben werde, um zu sehen, ob er mir gefallen würde und ob er mir nicht gefällt. Also werde ich es ein bisschen erhöhen, damit wir diesen Effekt immer noch haben. Richten Sie das nach unten aus und mir gefällt der Look in voller Breite definitiv viel besser. Also werde ich weitermachen und in diesem Sinne weiter entwerfen. Bisher sieht alles richtig gut aus. Ich bin also zufrieden damit, wie das aussieht. Und jetzt möchte ich die Menüseite erstellen. Also werde ich das einfach anpassen, bis ich mit Sicherheit weiß, dass es perfekt ist , das nach oben zu verschieben. Und die beiden sind zurück. schaue gerne nach, dass ich damit zufrieden bin, wie alles aussieht. Also werde ich jetzt mit diesem Design fortfahren. Ich bin zufrieden damit. Es ist definitiv mein Favorit unter diesen beiden. Also werde ich einfach weitermachen und sie löschen , wenn du sie in deiner Toolbox und Referenz behalten möchtest deiner Toolbox und Referenz , damit du den Fortschritt wirklich sehen kannst, dann kannst du es einfach dort belassen. Aber vorerst werde ich es dabei belassen und es nach unten verschieben , weil dies das Design ist , mit dem ich weitermachen werde. Also benenne ich das einfach, indem ich hier doppelklicke und catch 35 eintippe. Als Nächstes kopiere ich es und füge es ein, damit wir weiterhin diesen zusammenhängenden Look haben. Und die nächste Seite, an der wir arbeiten werden, ist das Menü. Wir haben hier die Speisekarte und die Assets, und es muss nicht wirklich so speziell sein. Was wir hier machen wollen, ist nur Showcase. Es muss nicht perfekt sein, denn das ist nur etwas, das sie bereits entworfen haben. Also werde ich es einfach per Drag & Drop hineinziehen. Und ich werde es so hier hinstellen. Ich werde das in Catch 35-Menü umbenennen . Wir haben unsere Speisekarte hier. Und ich habe das Gefühl, dass ich etwas kreieren möchte , das visuell ein bisschen besser anzusehen ist. Wir haben also das Menü und ich möchte , dass es auf der Website anklickbar ist. Aber vorerst möchte ich hier auch ein anderes Bild haben, um die verschiedenen Teile der Speisekarte darzustellen. Also werde ich einfach dieses Quadrat zeichnen und hier einen geteilten Bildschirm machen. Ich bin ein sehr großer Fan dieser Bildschirmabschnitte. Und dann werde ich einige dieser Fotos hier aufnehmen , um eine Marke wirklich zu präsentieren. Ich mache diese Deckkraft und den gleichen Farbblock von hier, kopiere und füge ihn ein und ziehe ihn hierher, damit wir immer noch diese dunklen und stimmungsvollen Effekte erzeugen können. Das schicke ich zurück. Das ist also die Fledermaus. Ich nehme es so, dass es nicht auf der Speisekarte erscheint. Ich werde das Menü tatsächlich hier nach unten verschieben , sodass es vollständig anklickbar ist, und öffne mein Raster und überspanne es so , dass es die gesamte Breite des Rasters abdeckt. Vielleicht nicht in voller Breite, weil es zu groß sein wird, aber vielleicht lege ich das hier hin. Ich werde hier eine Art Text einfügen. Ich werde das kopieren und einfügen , weil es das gleiche Design ist. Und nur um dies und das etwas anders aussehen zu lassen, werde ich einfach damit experimentieren , dass dies ein gelber Hintergrund ist. Es könnte zu viel sein und das ist in Ordnung. Aber ich möchte einfach damit experimentieren, um mit dem Look zu spielen, den wir anstreben. Okay, nicht zu, kein allzu großer Fan. Mir gefiel, dass das Gelb subtil ist, aber ich möchte, dass sich dieses Weiß etwas von diesem Abschnitt unterscheidet. Also werde ich hier einfach ein Feld zeichnen, den Rand ausschalten, es nach hinten schicken und leicht variieren, es so anpassen, dass es eine Nuance dunkler wird. Also ich bin zufrieden damit, wie das aussieht. Ich habe gerade diesen Text von hier kopiert. Das ist völlig in Ordnung. Dies gibt Ihnen nur die Möglichkeit, Ihren Kunden zu ermutigen, einen neuen Textabsatz zu erstellen. Also, wenn du willst, kannst du das ändern. Aber für den Anwendungsfall dieses Projekts werde ich es einfach so machen. Und ich werde dieses Menü tatsächlich so überspannen dass es die gesamte Breite des Rasters abdeckt. Und dann haben wir jetzt die About-Seite. Also werde ich weitermachen und die Homepage erneut kopieren und die About-Seite am Ende dieses Videos erstellen. Sobald Sie jede Seite erstellt haben, kann ich Ihnen zeigen, wie Sie die gesamte Website verlinken. Und das ist sehr nützlich, wenn Sie Modelle für Ihren Kunden erstellen. Und es präsentiert die Marke wirklich, was wirklich, sehr hilfreich ist. Wir haben also die Über uns-Seite und schauen wir uns einfach die Kopie an, die ich entfernen werde. Eigentlich werde ich das behalten, aber ich werde das nach oben verschieben, Gruppierung aufheben und es weiß machen. Ich werde das entfernen und in zwei verschiedene Abschnitte aufteilen. Und dann werde ich den Hintergrund hier noch einmal mit einer weiteren Bildsprache ändern . Ich liebe das Aussehen. Und brechen Sie diesen mit Liebe und Leidenschaft erstellten Abschnitt auseinander . Und jetzt möchte ich die Besitzer vorstellen. Also werde ich zwei Quadrate innerhalb meines Rasters zeichnen und sie an jedem der Gitter ausrichten. Dann werde ich zwei Fotos von jedem der Brüder haben . Ich habe das Gefühl, dass die zu nahe beieinander liegen. Also werde ich einfach dran sein. Dann haben wir Weiß. Ich mache das alles in Großbuchstaben und mache dann dieses viel größere Zentrum, das Gleiche hier drüben. Dann werde ich weitermachen und noch einmal zu unseren Fotos gehen. Mach weiter und schalte meine Grenzen ab. Dann haben wir noch ein Foto des anderen Bruders. Also haben wir das. Dann haben wir Öffnungszeiten und Ort. Deshalb möchte ich das auch dort zeigen. Also werde ich weitermachen und auch das Hauptstück kopieren. Jetzt konzentrieren wir uns also auf Stunden und Ort. Also haben wir mich zu der Kopie zurückkehren lassen, die jetzt vor Ort ist. Ich werde mir diesen hier schnappen, weil er für diesen Abschnitt bereits linksbündig ist. Ich möchte eigentlich versuchen, hier einen Kartenausschnitt zu erstellen. Es wird hier nicht anklickbar sein, aber ich möchte nur eine Karte anzeigen. Deshalb möchte ich einige Stunden und den Ort vorstellen. Wir haben diesen Abschnitt und ich werde weitermachen und Google Maps öffnen. Und nur aus diesem Grund werde ich weitermachen und die Ansicht vergrößern. Und ich werde diese Karte einfach hier platzieren. Das ist ein falscher Kunde, also haben sie nicht wirklich einen Standort, aber ich werde einfach so tun, als wäre er irgendwo hier drüben. Ich tu einfach so, als wäre es fett und mache einen Screenshot. Und dann nehme ich das von meinen Desktop-Screenshots und verschiebe es hierher. Ich möchte hier einen Mac präsentieren können, damit die Leute ihn einfach bei Google öffnen können. Ich werde das zusammen bewegen und es vertikal zentrieren. Also haben wir dort unsere Öffnungszeiten und unseren Standort aufgeführt. Ich werde sehen, wie das aussehen würde, wenn ich es in voller Breite drehe. Und sie werden viel besser, wenn es behoben ist Dann kopiere und füge ich diesen Abschnitt ein und verschiebe ihn hierher, sodass wir letzten Abschnitt haben , den wir hinzufügen können. Das sieht soweit gut aus. Dann haben wir dem Buch eine Tabellenseite. Also werde ich einfach weitermachen und das kopieren und einfügen. Und dann erstelle ich ein Formular. Die Formulardetails sind also Anzahl der Personen, Datum und Uhrzeit. Also wir haben das, ich kopiere es einfach und füge es noch einmal ein. Lassen Sie mich dieses Buch einer Tabelle zuordnen. Ich werde diesen Abschnitt einfach sehr, sehr einfach halten. Also werde ich hier nur ein paar Kästchen zeichnen. Die Schrift des Hauptabsatzes macht ihn schwarz. Wir haben also die Anzahl der Personen, Datum und Uhrzeit. Also will ich die eigentlich links haben. Behalte das so wie es ist. Dann reserviere einen Tisch. Ich werde auch ein Dreieck zeichnen, weil ich möchte, dass diese Daten und Uhrzeiten als Dropdownliste angezeigt werden. Also mache ich weiter und zeichne ein Dreieck, fülle es schwarz, drehe es und verschiebe es hierher, und dann werde ich es kleiner machen, damit es natürlich aussieht, nicht dasselbe wie der Zeitabschnitt, das bedeutet nur , dass es einen Abschnitt gibt , in dem wir das Datum und die Uhrzeit eingeben können. Also haben wir das. Und was ich tun möchte, ist gleichen Effekt im Hintergrund zu erzeugen. Also werde ich das nach hinten schicken. Und was ich eigentlich tun möchte, ist ein inneres Quadrat zu erstellen , damit es ein bisschen mehr wie eine Form aussieht. Mach das aus, zentriere es in diesem Bereich und das ist die Rückseite. Und noch einmal schicke ich den Hintergrund nach hinten. Und dann haben wir hier die Tatsache, dass wir wirklich einen Tisch reservieren können. Also werde ich diesen Abschnitt zusammenfassen. Ich werde die tatsächlich nach unten verschieben. Ich werde diesen Abschnitt noch einmal hervorheben und ihn gruppieren. Dann werde ich all diese verschiedenen Abschnitte zentrieren. Ich möchte auch einen Effekt erzielen, der eine Grenze hat , weil dies ein wichtiger Teil der Marke ist. Also mache ich einfach einen gelben Rand. Sie macht es etwas einzigartiger und steht für einen Aufruf zum Handeln. Ich habe ein Buch, eine Tabelle und jetzt habe ich all meine verschiedenen Seiten. Wir haben also die Startseite, das Menü, die Informationen zu den Öffnungszeiten und dem Ort und dann Das Buch, eine Tabellenseite. Jetzt, wo ich das habe, lösche ich sie gerne, aber Sie können wirklich sehen, wo ich angefangen habe und wo ich aufgehört habe. Und das ist nur ein Teil des Designprozesses. Ihr erstes Design wird nicht perfekt aussehen, aber wenn Sie die verschiedenen Abschnitte der Seiten immer zusammenhängender durchgehen, wird es so aussehen, als die verschiedenen Abschnitte der Seiten immer zusammenhängender durchgehen, ob ich mir das nebeneinander ansehe Ich sehe, dass ich dieses Bild zweimal verwendet habe, also werde ich dieses Bild einfach durch ein anderes Bild ersetzen . Dann lösche ich diese Abschnitte hier oben. Außerdem ist mir aufgefallen, dass dies auch dieselben Bilder sind, weil ich das kopiert und eingefügt habe. Also werde ich dieses Bild ersetzen. Also ein anderes Bild, nur um ein bisschen Aussehen und Gefühl zu haben. Ich liebe, liebe, liebe, liebe. Wie sich das bisher entwickelt hat. Jetzt möchte ich die Website prototypisieren. Ich habe jede meiner Seiten gestaltet. Und jetzt möchte ich sicherstellen, dass alle Schaltflächen hier anklickbar sind , sodass , wenn jemand auf diese Schaltfläche klickt, dies zu einem Buch, einer Tabellenseite führt. Bei allen Aktionsaufrufen sollten Sie also grundsätzlich sicherstellen, dass alle Schaltflächen, auf die Sie klicken möchten, gruppiert sind. Da der Text und dieses Rechteck also zwei verschiedene Elemente sind, Sie sicherstellen, dass Sie sie gruppieren. Wenn Sie also auf die Schrift klicken und die Umschalttaste gedrückt halten und dann auch auf das Rechteck klicken, können Sie sie gruppieren , und Sie können dies mit all den verschiedenen Schaltflächen auf Ihrer Seite tun . Und das ist wirklich nützlich für den nächsten Abschnitt, dem es um das Prototyping der tatsächlichen Benutzererfahrung dieser Website geht. Also werden wir das Gleiche dafür tun. Wir haben das und, aber wir haben alle verschiedenen Elemente zusammengefasst . Jetzt klicken wir auf diese Prototyp-Schaltfläche in der oberen linken Ecke. Und jetzt können wir sicherstellen, dass alle Schaltflächen wieder dorthin verlinkt sind, wo sie hin müssen. Wir haben also die Hauptnavigationsleiste und wollen jetzt sicherstellen, dass jeder Menüpunkt in der Navigation tatsächlich auf die richtige Stelle zeigt alles platziert werden soll. Also werde ich weitermachen und auf Home klicken. Und ich möchte, dass das auf diese Homepage übergeht. Ich werde weitermachen und auf Home klicken. Und dann möchte ich, dass das Menü zur Menüseite geht. Also werde ich einfach weitermachen und den Pfeil nehmen und darauf zeigen. Und du wirst sehen, dass, sobald ich auf diese Schaltfläche klicke, zum Menü gehen sollte. Ich mache das Gleiche mit der Über uns-Seite sie auf die Seite mit den Öffnungszeiten und dem Standort hingewiesen. Gehen Sie zu Öffnungszeiten und Ort, und dann buchen wir eine Tischseite. Wir werden einen Tisch reservieren. Da haben wir es also. Das ist das vollständige Menü. Und was wir dann tun wollen, ist das zu tun. Das Gleiche gilt für alle Knöpfe hier unten. Wir haben also einen Buchungstisch und ich möchte, dass dieser weitergeleitet wird, um eine Tabellenseite zu buchen. Ich werde weitermachen und das da drüben ziehen. Es geht um Katzen 35. Also werde ich das auf die About-Seite stellen. Das heißt, sehen Sie sich unsere Speisekarte an. Also werde ich das auf die Menüseite stellen. Dann heißt dieser endlich wieder Bucket Table. Also werde ich dem Buch eine Tabellenseite hinzufügen. Und weil wir wollen, dass dieses Menü in all den verschiedenen Designs präsentiert wird, werde ich das Ganze zu einer Komponente machen. Von dort aus kann ich all diese verschiedenen Abschnitte löschen. Also werde ich weitermachen und das tun. Ich werde diese Komponente per Drag & Drop hierher ziehen. Sie werden sehen, dass vieles davon bereits so eingestellt ist , dass es auf die richtigen Seiten geleitet wird. Es gibt ungefähr Öffnungszeiten und Ort. Das einzige, was jedoch fehlt, ist dieses Zuhause. Deshalb möchte ich sicherstellen, dass Home auf diese Seite gelangt. Das geht also nach Hause. Und genau das Gleiche machen wir mit dieser Schaltfläche „Einen Tisch buchen“. Dadurch wird die Seite „Eine Tabelle buchen“ aufgerufen. Das Gleiche machen wir mit diesem Menü. Also werde ich dieses Menü löschen und es durch die Komponente ersetzen. Dann haben wir die Homepage. Also doppelklicke ich noch einmal darauf und stelle sicher, dass es auf diese Seite geht. Und die Info-Seite ist nicht anklickbar, weil wir auf dieser Seite sein werden und dann haben wir diesen Abschnitt mit der Broschüre. Also noch einmal, leiten Sie das in den Abschnitt „Buch eine Tabelle“ ein. Und dann machen wir dasselbe für die Stunden und den Ort. Lösche diesen Abschnitt hier, schnappte dir dieses Bauteil, 9. Kurz 3: Entdecke deinen Designstil: dritten Projektbeschreibung machen Sie im Grunde alles, was Sie wollen, in Ihrem eigenen Stil. Die Hauptaufgabe besteht also darin, eine Website eines Unternehmens oder einer Marke, die Sie lieben, in Ihrem eigenen Stil neu zu gestalten eine Website eines Unternehmens oder einer . Oder Sie können eine Website für einen Traumkunden entwerfen, unabhängig davon, ob sie existiert oder ob sie erfunden ist. Also, wenn es einen Influencer gibt, den du wirklich magst, oder einen Coach oder einen Mentor, den du wirklich, wirklich magst. Sie können eine Scheinwebsite für diese Person erstellen oder sich eine falsche Person von jemandem in der Branche einfallen lassen , in dem Sie gerne in dem Projekt arbeiten würden. Für dieses Projekt haben Sie die kreativen Zügel, um in jede Richtung zu gehen, die Sie wählen . Wählen Sie eine Marke in einer Branche , in der Sie gerne arbeiten würden, damit Sie die volle Erfahrung davon machen können Das Rebranding einer Website würde so aussehen. Sie können aus praktisch allen Arten von Branchen wählen , wie Gesundheit, Wellness, disruptive Technologie, Mode, Einzelhandel, Coaching und persönliche Entwicklung, Innenarchitektur, Ärzte, Zahnärzte, Anwälte, und die Liste geht weiter und weiter. sind also nur einige Branchen, in denen Sie Ihr Interesse an Hochwasserprojekten wecken können, die Sie für welche Branche und für welche Art von Kunden durchführen möchten . Hier gibt es also zwei Möglichkeiten. erste Option besteht darin, die Homepage oder die gesamte Website eines Unternehmens oder einer Marke Ihrer Wahl neu zu gestalten . Also, wenn es eine E-Commerce-Marke gibt, die Sie wirklich mögen, oder wenn es eine persönliche Marke gibt , die Sie wirklich mögen , eine neu gestaltete Website-Idee für diese Person zu entwickeln, sie dann aber so zu gestalten, dass Sie gehe gerne rein. Erkunden Sie also wirklich, mit welchen Designstilen Sie übereinstimmen, und versuchen Sie auch, Inspiration für etwas zu finden, das Ihre Interessen als Ihren Designstil weckt. Es geht wirklich nur darum, Ihren Designstil zu erkunden und zu sehen, zu welchen Dingen Sie sich von Natur aus hingezogen fühlen. Option zwei besteht darin, die Homepage oder eine vollständige Website für einen Traumkunden und eine Branche zu entwerfen eine vollständige Website für einen Traumkunden und eine , in der Sie gerne arbeiten würden. Und natürlich habe ich oben eine Reihe von Branchen aufgelistet. Sie könnten sich entweder eine gefälschte Kundenpersönlichkeit einfallen lassen oder eine Person auswählen, von der Sie wissen, dass sie im Grunde Ihr idealer Kunde ist. Dies sind also die beiden Optionen: Sie können entweder nur die Homepage erstellen oder Sie können den vollständigen Website-Prototyp erstellen, wie wir es in der Projektbeschreibung getan haben , mit einigen hilfreichen Hinweisen für Option eins ist die Suche nach einem Unternehmen Marke, die du liebst, und gestalte ihre Website und deinen eigenen Stil neu. Sie können gerne ihre Bilder, Texte usw. verwenden. Achten Sie jedoch darauf, das Originaldesign zu nennen, wenn Sie es in Ihrem Portfolio präsentieren möchten . Du kannst also nicht wirklich sagen, oh, ich habe eine Website für Google entworfen, z.B. wenn du Google und deinen eigenen Stil neu gestaltest , aber ja, im Grunde nur darauf achten, dass du das Original nennst Marke und das lustige Projekt, das du nachbauen wolltest. Wenn dir keine Marke einfällt, kannst du auch auf Pinterest, Behance oder Dribble and Redesign nach Inspirationen für deine Website suchen . Eine der Websites , die Ihnen dort gefallen, oder eine der Websites in einer Branche, die Sie mögen, sie sind in Ihrem eigenen Stil. Bei Option zwei haben Sie die Möglichkeit, eine Kundenpersönlichkeit für einen Traumkunden zu erstellen und dieser Person eine Website zu erstellen. Sie können es ähnlich wie diese Kundeninformationen in dieser Klasse formatieren . Sie können es entweder aufschreiben oder wenn Sie es nicht aufschreiben möchten, machen Sie es. Eine weitere Option für diese gefälschte Münz-Persona besteht darin, lizenzfreie Bilder für diese Traumkunden zu finden lizenzfreie Bilder für diese Traumkunden und diese in Ihrem Webdesign zu präsentieren. Sie könnten es also entweder wirklich durch einen Text präsentieren , den Sie geschrieben haben und der einen falschen Kunden darstellt. Oder Sie können die Kopieraufforderungen verwenden, die ich Ihnen auch in diesem Kurs gezeigt habe. Also entscheide ich mich für Option zwei. Ich werde mir eine falsche Kundenpersönlichkeit einfallen lassen und Ihnen zeigen, wie ich das angehen würde. Ich weiß noch nicht wirklich, in welche Branche ich gehen werde. Aber ich denke, je mehr Inspiration ich auf Pinterest finde , desto besser kann ich herausfinden , mit welcher Art von Kunden ich zusammenarbeiten möchte. Also werde ich einfach nach einem neutralen Website-Design suchen . Als Designer würde ich sagen, dass mein Stil viel minimalistischer und neutraler ist. Ich fühle mich also wirklich zu feminineren Inspire-Marken mit neutralen Farben hingezogen . Das ist es also normalerweise, wozu ich mich hingezogen fühle. Ich habe in diesen Bereichen nicht nur mit Marken gearbeitet, sondern ich liebe es, auf sehr neutrale Weise zu entwerfen. Also das ist total in meinem Stil, nur die neutralen Farben und all diese Sachen sind wirklich das, was ich liebe. Also werde ich einfach einige davon öffnen , damit ich mich inspirieren lassen kann , wie die Website, die ich erstelle, aussehen soll. Ich liebe die Farben hier, ich liebe die Quadrate innerhalb Quadrate sowie diesen Bildausschnitt hier. Ich denke, was ich für diese Marke machen werde , ist eigentlich etwas für einen Coach entworfen. Ich habe bereits viele Websites für viele verschiedene Trainer und viele verschiedene Räume entworfen Websites für viele . Und ich würde sagen, eines meiner Spezialgebiete ist die Erstellung von Websites für Trainer unabhängig von Spicer. Deshalb werde ich Ihnen zeigen, wie ich diesen Prozess beim Entwerfen einer Website durchführe. Also gehe ich zunächst zu Pexels und lade einige Bilder herunter. Auch, wenn Sie nicht genau wissen, für welchen Kundentyp Sie etwas erstellen möchten. Sie können sich auch einfach Pexels ansehen und sehen, welche guten Bilder in Ordnung sind. Und dann erstelle die Persona auf der Grundlage der Bilder, die du findest, wie dieses Mädchen Kerzen macht. Wenn ich viele gute Bilder mit jemandem finde, der Kerzen herstellt, kann ich eine Website für einen Kerzenhersteller erstellen, z. B. weil Bilder bei dem, was wir kreieren, eine große Rolle spielen . Also werde ich einfach weiter Bilder herunterladen, von denen ich denke, dass sie zu meinem Stil passen und solange ich mich zu ihnen hingezogen fühle , und dann werden wir es von dort aus tun. Ich habe jetzt eine Menge Bilder , die ich auf Pexels gefunden habe. Ich werde einfach anfangen, anhand der Bilder, die ich finde, mit der Website herumzuspielen . Und dann erstelle ich meine Kundenpersönlichkeit ich versucht habe, verschiedene Designrichtungen zu erkunden, die ich mit dieser Marke einschlagen könnte, weil es ein Do this in deinem eigenen Stil ist und es keine Designparameter gibt. Ich werde dies nur als Erkundungsübung verwenden , um meinen Designprozess herauszufordern. Also werde ich in diese Richtung gehen . Also werde ich weitermachen und eine XD-Datei öffnen. Also werde ich einfach ein paar Rechtecke hier oben zeichnen, damit ich einige Bilder, die mir gefallen, per Drag-and-Drop ziehen und ablegen kann. Ich werde einfach ein paar kopieren, damit ich leicht auf Fotos verweisen kann , zu denen ich mich hingezogen fühle und erstelle dann ein Moodboard Bildern, bevor ich in das Projekt eintauche. Weil es natürlich viele verschiedene Möglichkeiten gibt , dieses Website-Design zu gestalten, aber ich möchte sicherstellen, dass alle Farben und Bilder zusammenpassen , da ich hauptsächlich lizenzfreie Bildsprache. Deshalb möchte ich sicherstellen, dass ich dieses Moodboard mit Bildern erstelle , von denen ich weiß, dass sie zusammenpassen. Ich werde mir das mal ansehen, mag diese Farbe wirklich. Und ich möchte sehen, ob es Farben gibt, die ich in diesem Stil finden kann . Offensichtlich gibt es viele Pastellfarben von Hanks. Ich bin mir noch nicht sicher, was diese Marke sein würde. Ich möchte, dass es in gewisser Weise lustig und verspielt ist. Also alles, was diese lustigen, lebendigen Pastellfarben hat , kann ich auf meiner Website verwenden. Also werde ich einfach weiter ziehen und ablegen. Einige davon sind vielleicht nicht genau das, wonach ich suche. Sie sehen hier also ein Muster. All diese Bilder passen irgendwie zusammen und ich bin mir immer noch nicht ganz sicher, was die Marke sein sollte, aber ich mag diese Farben und ich lasse mich von diesen Farben inspirieren. Also werde ich weitermachen und anfangen, mit dem herumzuspielen, was ich nehme. Das könnte sein, ich tendiere definitiv eher zu einer Art kreativer Marke, sei es ein Illustrator, jemand aus dem kreativen Bereich, denn es gibt viele wirklich lustige Formen und Zeichnen und Charaktere und interessante kreative Dinge. Deshalb möchte ich sicherstellen , dass diese Marke sehr kreativ und unterhaltsam wirkt. Jetzt verwende ich diese Bilder und gehe zurück zu Pinterest und suche ein bisschen mehr nach Inspiration, dem kreativen Bereich. Also kann ich einfach mit verschiedenen Designs herumspielen. Also öffne ich Google, aber Pinterest und tippe dann eine farbenfrohe Website ein. Und vielleicht würde ich in dieser eine Pastell-Website machen. Ich mochte dieses karierte Ding und die neutralen Farben. Dieser ist wirklich cool. Dieser ist wirklich cool. Ich werde das als Inspiration verwenden. Ich liebe sie, Minimalismus, aber dann die kleinen Farbtupfer. Und ich werde das verwenden und es mit einigen anderen Dingen kombinieren , die ich über Design weiß hoffentlich etwas wirklich Einzigartiges kreieren zu können. Ich werde nur meinen Bildschirm so anpassen, dass ich einfach zwischen den beiden klicken kann. Also gebe ich einfach einen Namen ein, Kunstgeschichte. Ich weiß nicht, nur ein zufälliger Name, der die Atmosphäre der Marke repräsentiert, die wir anstreben. Dann werde ich auch mit verschiedenen Logos herumspielen . Also werde ich das auch in Kleinbuchstaben verwenden, Justice, und dann mit verschiedenen Schriftarten herumspielen. Unser lustiger und kreativer. Ich gehe einfach an den Anfang meiner Schriftartenliste. Viele meiner Schriften, die ich in meinen Projekten verwende , wurden entweder auf Creative Market oder Envato Elements gekauft , da ich so viele Schriften in meinem Repertoire jetzt so viele Schriften in meinem Repertoire habe, seit ich so lange designe Ich musste einfach meine Schriften so durchgehen, wie sie sind, und dann herausfinden, welche Dinge mir gefallen. Aber wenn Sie keine Schriftarten haben und ich würde sagen, auf jeden Fall, schauen Sie sich Ressourcen wie Envato Elements oder Creative Market an, um einen Schriftstil zu finden, mit dem Sie experimentieren möchten. Es gibt jede Menge Schriftpakete, die in verschiedenen Projekten verwendet werden können. Ich empfehle also auf jeden Fall, in benutzerdefinierte Schriftarten zu investieren. Definitiv, ich mag diesen Namen nicht wirklich, also werde ich vielleicht mit etwas anderem experimentieren , also werde ich einfach beide verwenden und dann sehen, welche Dinge ich mag, so wie dieses. Aber ich möchte etwas Kreativeres als minimale Schriftarten. Also werde ich solche Dinge einfach weiter durchmachen . Ich denke, es könnte Spaß machen, wenn es richtig benutzt wird. Meistens werde ich das einfach auf Schwarz ändern. Es fällt mir also etwas leichter , das vom Stil her zu sehen. Hier suche ich nicht nur nach Schriften für das Logo, sondern auch nach Schriften, die möglicherweise auch für die Hauptüberschriften und Absätze gut sein könnten . Also werde ich mich für eine dieser Schriften entscheiden. Bringt sie alle rein. Das gefällt mir wirklich. Ich finde es sehr künstlerisch. Nun, lass uns sehen. Ich werde einfach zuerst damit experimentieren . Zentrieren Sie es einfach. Ich werde Rechtecke zeichnen, damit ich versuchen kann, eine Farbe von einem meiner Bilder oben in dieses und außerhalb des Randes auszuwählen . Und dann werde ich das einfach etwas breiter machen. Und dann schalte ich den Rand aus, benutze meinen Füllwähler, spiele vielleicht mit etwas Gelb und Rosa. Hey, lass uns das vorerst beibehalten und das Ganze irgendwie weiß machen. Also werde ich versuchen, eine Frau von einer dieser Farben zu finden , vielleicht in dieser Farbe. Also werde ich einfach kopieren und einfügen und versucht, ein anderes Weiß auszuwählen. Ich liebe dieses Bild wirklich, also werde ich einfach sehen, wie es aussehen würde. Und offensichtlich hat mir dieses Bild sehr gut gefallen, also werde ich es vorerst hier platzieren. Jetzt ist die Hauptsache , ich suche nach Farben, die mir gefallen. Also lass uns sehen. Ich möchte, dass es sehr künstlerisch ist. Sie benötigen diese, um verwendet zu werden. Jetzt werde ich versuchen, eine Farbe aus einem dieser Bilder auszuwählen . Auf diese Weise. Ich möchte, dass dies die Hauptüberschrift ist und ich werde versuchen, eine Farbe zu finden, die mir gefällt, vielleicht eine leichte Nuance, dunklere Farbe, vielleicht um Farbe hinzuzufügen. Ich werde auch weiterhin mit einigen anderen herumspielen. Nicht ganz. Ja. Also mir hat dieser Kontrast wirklich gefallen. Und dann habe ich es offensichtlich von dort gezogen. Also werde ich das vorerst behalten , wenn ich Button zeichne. So können wir eine Art Aufruf zum Handeln haben. Vielleicht spiele ein bisschen damit herum, dass der Rand eine dunkle Farbe hat. Dann werde ich Touch zeichnen. Und dann werde ich versuchen, eine minimale Schrift zu finden. Spiel mit dem Abstand. Vielleicht möchte ich es ohne Grenze testen. Füllfarbe, T, Bildschirmfarbe. Und dann dieser Button um okay zu sein, das gefällt mir definitiv viel besser. Also werde ich das einfach ein bisschen anpassen. Jetzt. Ich werde auch diese Schrift anpassen. Und dann teste einfach, diese Farbe zu sein. Das gefällt mir bis jetzt. Und ich möchte hier mit der Form herumspielen. Also werde ich weitermachen und das tun. Schalten Sie mein Raster ein, damit ich es zur Seite ausrichten kann. Ich werde Pinterest ganz schnell öffnen und nach ein paar verschiedenen Designs, kreativen Inspirationen und Layouts suchen . Also gehe ich zu Pinterest und schaue mir einige davon an, um zu sehen, wie ich auf einzigartige Weise einen Effekt erzielen kann , der auch etwas Interessantes erzeugt. Also werde ich mit einem Hauptabschnitt experimentieren , der durchgeht, und dann mit drei Bildern unten. Ich werde weitermachen und meine XD-Datei öffnen. Verschiebe das ein bisschen nach unten , um meine Akte etwas zu erweitern. Nimm diese Kopie und füge sie ein, nimm diesen Abschnitt, mach ihn grün. Dann nehme ich diese Schrift. Das habe ich. Ich werde das etwas kleiner machen weil ich finde, dass es zu groß ist. Dann nimm das, füge es vorerst ein. Ich mache hier einfach Lorem Ipsum-Text und gehe zu Google und suche nach dem Lorem Ipsum-Generator, kopiere und füge dieses unregelmäßige Medium ein, schalte den Buchstabenabstand aus, erhöhe die Größe, ändere die Zeilenhöhe, strecke das aus. kann damit experimentieren, das auf die Seite zu drehen , um den Look zu kreieren, den ich erreichen möchte Kopieren und fügen Sie ihn ein und legen Sie auch auf die andere Seite. Zentrieren Sie all diese vertikal. Cool. Mir gefällt das Aussehen, bis jetzt werde ich hier einen Button hinzufügen. Gruppiere das, zentriere es vertikal. Zahlen. Bisher liebe ich das Aussehen von Bots. Ja, das gefällt mir wirklich. Ich werde weitermachen und versuchen, hier oben ein Menü hinzuzufügen. Also grünes Pferd. Und dann füge ich hier einen Button hinzu. Wir werden diesen Hintergrund sperren, sodass ich ihn nicht ändern kann indem ich auf Befehl L klicke, oder diese Schaltfläche gruppieren und dann die Dinge vertikal ausrichten. Und dann werde ich das einfach ein bisschen verschieben und sie dann gleichmäßig verteilen. Dann möchte ich nur diesen Abstand sehen. Ich werde den Abstand zwischen den einzelnen Abschnitten auf 80 Pixel festlegen. Ich werde das einfach zu einer persönlichen Marke machen . Zentrieren Sie es vertikal, zentrieren Sie es innerhalb des Rasters. Also ich liebe das Aussehen bis jetzt, ich möchte eigentlich damit experimentieren , es in der Mitte zu haben. Also möchte ich nur sehen, wie es aussehen würde. Ich bin so ziemlich so. Also werde ich hier einfach eine Grenze ziehen , weil ich vielleicht den Header vom Hauptbereich trennen und ihn vielleicht sogar klebrig machen möchte den Header vom Hauptbereich trennen . Also werde ich einfach damit experimentieren. Vielleicht dieses Bild überspannen. Diese sind in der Spannweite gleich hoch, diese muss etwas angehoben und etwas höher sein. Ich werde diesen Hintergrund einfach entsperren , weil sie ihn schon einmal gesperrt haben. Und dann werde ich es an diesem Abschnitt ausrichten, damit ich alles vertikal zentrieren kann. Vertikal zentrieren und dann kopiere ich das und füge es ein. Machen Sie dasselbe für die Oberseite, denn das hilft wirklich dabei, diese Abschnitte aufzuteilen und sie vertikal zu zentrieren. Und dann schicke ich diese beiden Hintergründe auf die Rückseite. Großartig. gefällt mir bis jetzt wirklich gut. Als Nächstes möchte ich auf die verschiedenen Dienste eingehen. Also werde ich diesen Abschnitt hier belassen, ihn dreimal kopieren und einfügen, mein Raster einschalten, damit ich sie ausrichten kann. Cool. Als Nächstes möchte ich in diese Bilder verschieben. Also werde ich einfach weitermachen und das öffnen. Also ich mag dieses Farbbild sehr. Ich werde das einfach hierher verschieben, aber ich möchte das vielleicht für später verwenden. Als Nächstes möchte ich hier einige Rechtecke zeichnen. Und ich mache das in der gleichen Farbe wie das Oberteil an. Eigentlich mache ich das in der gleichen Farbe wie dieses Grün, vielleicht habe ich einen Rand, aber mache es so cremefarben, ändere die Größe auf zehn. Und dann kopiere ich diese Hintergrundfarbe und füge sie ein. Ich werde eigentlich nur mit einer Außengrenze experimentieren. Also werde ich das kopieren und einfügen und Umschalttaste drücken, um es ein wenig zu erweitern. Ich werde diesen Hintergrund einfach sperren, damit ich mit dem, was ich tue, herumspielen kann. Ich nehme die Füllung ab, drehe einen Rand an und mache ihn grün. Dann mache ich den Rand in Chu-Größe und zentriere ihn dann. Also möchte ich damit experimentieren, diese äußere Linie in diesen Bildern zu haben . Also mir gefällt das bis jetzt definitiv. Ich werde es kopieren und in die anderen Bilder einfügen und dasselbe auch hier tun. Schalten Sie mein Raster ein und stellen Sie sicher, dass die äußere Kante am Raster ausgerichtet ist. Also das gefällt mir auf jeden Fall. Es sieht definitiv viel sauberer aus als das, womit ich zuvor experimentiert habe , weil es hier unten Linien gibt , jetzt möchte ich sicherstellen, dass sie die gleiche Größe haben. Das war also eine Zwei-Pixel-Linie. Ich werde also sicherstellen, dass diese Linie am Rand auch aus Pixeln besteht, nur um sicherzustellen, dass wir diese Konsistenz in Bezug auf die Linienstärke haben . Dann nehme ich als Nächstes diesen Abschnitt und kopiere ihn und füge ihn ein. Schnapp dir die grüne Farbe. Mache diese Größe. Oder lernst du vielleicht einen Kurs , um diese Beschreibung zu absolvieren? Schalte diesen Hintergrund frei, überspanne ihn weniger als ein Experiment damit, ihn zu überspannen. Vielleicht verkleinern Sie das etwas , weil es ein kleinerer Absatzabschnitt ist. Und dann zentriere das alles vertikal, horizontal. Also werde ich das einfach ein bisschen nach unten bewegen dann auch einen Knopf schnappen. Also schnappe ich mir diesen Knopf von hier oben. Nur aus Designgründen werde ich das hier so überspannen, dass es die volle Breite hat. Ich habe das Gefühl, ich möchte eigentlich keine Beschreibung und vielleicht möchte ich diese als Unterüberschrift hinzufügen. Lernen Sie also in Ihrem eigenen Tempo. Vielleicht finde ich, dass dieser Button ein bisschen zu viel ist. Was ich also tun werde, ist einen Pfeil zu zeichnen , weil das im Grunde dasselbe bedeuten würde , aber auf eine einfachere Art und Weise. Also werde ich sicherstellen, dass es grün ist. Zoomen Sie ein wenig hinein, kopieren Sie es und fügen Sie es ein, passen Sie es dort an und machen Sie dann dasselbe auf dieser Seite. Stellen Sie sicher, dass diese Punkte um das herum verlaufen , damit wir auch um diese herum eine spitze Kante erstellen können. Also werde ich diese gruppieren und das so lassen, wie es ist. Und ich denke , das ist definitiv eine viel einfachere Art zu zeigen, worüber jemand lernt. Ich mag den Look auf jeden Fall, bis jetzt habe ich die Farben geliebt, Minimalismus liebe auch die Schriften und sperre den Hintergrund. Ich werde das einfach nach unten verschieben und ich möchte sehen, wie das aussehen würde, wenn ja, also das gefällt mir irgendwie. Also werde ich das beibehalten, um sie einfach zu gruppieren. Dann füge ich hier auch den Abschnitt Alarm Ipsum hinzu. Zentrieren Sie das. Und dann kopiere ich diese Zeile und füge sie hier ein. Und weil ich auch helfen möchte , diesen Abschnitt aufzulockern. Also die Gruppierung aufheben, die das vielleicht bis zur vollen Höhe überspannt. Sieht so aus, als ob diese Linien vielleicht verschiedene Farben haben. Also werde ich einfach versuchen , damit zu experimentieren. Sie fügen eine andere Farbe hinzu. Es wird cool, das sieht besser aus. Also ich denke, das bedeutet, dass diese Zeile falsch ist. Farbe auch. Also werde ich einfach sicherstellen, dass die Reihenfolge ausgewählt ist. Also ich liebe das bisherige Aussehen. Ich werde das nur verschieben weil ich vielleicht später sogar die Schriftarten ändere oder mit einer anderen Schrift herumspiele. Also werde ich diese Farbe kopieren und hier einfügen. Und eine weitere wirklich coole Möglichkeit, Farben auszuwählen, besteht darin, die Hauptfarbe, die Sie verwenden, zu nehmen und zu versuchen, denselben Farbton zu finden, aber in einer anderen Farbe. Also werde ich weitermachen und das einfach verschieben , um zu sehen, ob es irgendwelche Farben gibt, die mir gefallen. Und Sie können bereits sehen, dass diese Farben anscheinend zusammenpassen , nur weil sie einen ähnlichen Farbton haben. Ich werde die Opazität ändern. Ich mag diese Farbe, aber ich habe das Gefühl, dass sie in diesem Abschnitt nicht funktioniert, es sei denn, ich habe dort ein helleres Bild. Also werde ich einfach sehen, welche anderen Bilder ich habe. Und wenn sie hier arbeiten würden, würde ich zu diesem Grünton zurückkehren. Eine weitere nützliche Möglichkeit , Farben auszuwählen , besteht darin, dieselbe Farbe zu verwenden, den Farbfinder dann aber an eine andere Stelle auf dem Bildschirm zu bewegen . Es behält also immer noch diesen Farbzusammenhalt bei. etwas wie eine cremefarbene Farbe. Ziemlich zufrieden damit. Ich werde diesen Grenzabschnitt ausschalten und vielleicht versuchen, diesen Abschnitt zu teilen. Kopieren Sie das jetzt und fügen Sie es hier ein, heben Sie die Gruppierung auf. Schalte mein Raster ein, damit ich alles ausrichten kann. Ich füge diese Farbe einfach zur Seite hinzu , damit ich sie etwas einfacher auswählen kann. Ich gehe zurück zu meinem Lorem-Ipsum-Generator, kopiere das, gehe zu XD. Ich habe das Gefühl, dass diese Farbe immer noch etwas zu nah ist , weil sie das Lesen etwas schwieriger macht, aber ich möchte diese grüne Farbe immer noch als Haupttextfarben verwenden . Also werde ich einfach versuchen, eine etwas hellere Farbe zu finden . Eine andere Sache, mit der ich experimentieren kann ist, diese helle Farbe zu nehmen und einen Farbton zu finden, der etwas, etwas heller ist. Oder wir können einfach Vollweiß machen , weil mir das Aussehen wirklich gut gefallen hat. Also werde ich das vorerst benutzen. Und dann hole ich mir den Call to Action von oben. Eine andere Sache, mit der ich vielleicht experimentieren möchte , ist der Versuch, dies als eine der Farben auszuwählen. Ich möchte nur damit experimentieren. Ich weiß nicht, ob ich das genau machen werde, aber ich will das hier unten machen und sehen, wie es aussehen würde. Es hatte auch eine rote Farbe. Sieht es zum Beispiel zusammenhängend genug aus, dass es Sinn macht, oder ob es das überhaupt nicht tut. Also ich mag die Farben zusammen, vielleicht finde ich einen etwas anderen Farbton derselben Farben. Also ich denke, es ist ein bisschen zu zufällig. Also werde ich zu dieser Hauptfarbe hier zurückkehren. Ups. Ja, das dachte ich nicht. Ich mache diesen Bildschirm und mache dann vielleicht einen etwas dunkleren Farbton des Grüns. Behalte es einfach so wie es ist und verwende es dann vielleicht einfach als unseren anderen Farbton. Sehr, sehr geringer Farbunterschied dort. Es ist nicht genau der Grund, aber offline. Und dann verschiebe das ein bisschen nach oben und zentriere es einfach vertikal. Cool. Ich bin wirklich zufrieden damit, wie das aussieht. Ich werde hier nur einen weiteren Abschnitt hinzufügen , weil ich einen Aufruf zum Handeln habe , in dem Workshops erwähnt werden. Also werde ich Wälder hinzufügen. Workshops sorgen, wie ich es zuvor gemacht habe , dafür, dass alles 80 Pixel voneinander entfernt ist. Es wird diesen Abschnitt hervorheben und zentrieren, weil er leicht aus dem Gleichgewicht geraten aussieht. Also werde ich diesen einen Service machen, diesen einen Kurs. Ich bin sehr zufrieden damit, wie es sich entwickelt hat , ähnlich wie in einer der vorherigen Lektionen. Ich mache daraus einen Sticky-Header. Also werde ich das einfach zusammenfassen und das in den Vordergrund stellen. Und dann hier auf der rechten Seite klicke ich beim Scrollen auf feste Position. Wenn ich also auf Play drücke und mir den Prototyp tatsächlich ansehe, kann ich sehen, wie er aussehen würde. Also werde ich einfach alles durchsehen, um zu sehen, ob ich vorerst noch etwas ändern möchte. Ich denke, ich bin zufrieden mit dem Ergebnis, also werde ich einfach weitermachen und auf Play drücken, um das Ganze in voller Breite zu machen. Und ich habe die Farben absolut geliebt. Ich liebe es, wie es scrollt. Ich mag den Minimalismus, ich mag die Farben. Die Schriften passen sehr gut zusammen. Und ja, ich bin sehr zufrieden damit, wie es ausgegangen ist. Also werde ich weitermachen und das speichern. Es ist mein Desktop. Wenn ich also auf diesen Titel klicke, kann ich ihn Vanessa-Homepage nennen. Und wenn ich dann auf Befehl E klicke, kann ich es auf meinem Desktop speichern. Und von dort aus kann ich es in den Bereich für das Klassenprojekt hochladen und sozusagen das Projekt durchgehen, für das ich beschlossen habe, zu erstellen, für wen es ist, warum ich es gemacht habe und welches Ziel damit verfolgt wurde. Und dann, ja, ich hoffe, du möchtest dir meinen Prozess zur Erstellung dieses Layouts ansehen. Und ich freue mich sehr darauf zu sehen, welche Dinge Sie erstellen, wenn Sie sich dafür entscheiden, an diesem Projektbrief für Ihr Klassenprojekt zu arbeiten . Vergessen Sie nicht, ihn in den Bereich für Klassenprojekte hochzuladen. Ich kann es kaum erwarten zu sehen, was du kreierst. 10. Kurz 4: Deine persönliche Marke: Für die Projektbeschreibung werden Sie also eine Website für Ihre eigene persönliche Marke als Designer entwerfen und prototypisch erstellen. Eine eigene Homebase als Designer zu haben, eigene Homebase als Designer zu haben ist wirklich wichtig, weil ermöglicht es zukünftigen Kunden, Sie und Ihre Marke sowie die Art der Projekte, an denen Sie in der Vergangenheit gearbeitet haben, wirklich kennenzulernen sowie die Art der Projekte, an denen Sie in der . Indem Sie Ihr Portfolio präsentieren können. Für diese Aufgabe haben Sie entweder zwei Möglichkeiten. Sie können entweder die Homepage für Ihre eigene persönliche Marke als aufstrebender Designer gestalten . Oder Sie können einen vollständigen interaktiven Website-Prototyp entwerfen, ähnlich wie wir einen Projektbrief für Ihre eigene Marke als persönlicher Designer entworfen haben . Die größte Herausforderung besteht darin, dass Sie Ihren eigenen schreiben . Website-Text, um Ihren Traumkunden Ihr Alleinstellungsmerkmal zu präsentieren. Das ist eine wirklich tolle Möglichkeit zu üben, wie man als Designer in der Welt auftaucht. Sie fühlen sich also sicher wenn Sie die von Ihnen angebotenen Dienstleistungen anbieten können. Dies gibt Ihnen auch die Möglichkeit, die verschiedenen Branchen und Kundentypen anzusprechen , von denen Sie schon immer geträumt haben, zusammenzuarbeiten. Sie können gerne eine Aufforderung zum Kopieren verwenden, die ich zuvor bereitgestellt habe , um Ihnen beim Schreiben zu helfen. Ich habe also bereits meine eigene persönliche Markenwebsite, arbeite aber an einem anderen Designprojekt. Also werde ich das für diese speziellen Klassenprojekte und für diese Website durcharbeiten , insbesondere werde ich nur die Homepage entwerfen. Und hier sind einige Übungen , die Ihnen den Einstieg erleichtern. wichtigsten Ideen sind, beim Brainstorming zu helfen , wie sich Ihre Marke anfühlen soll. Ich öffne eine Adobe XD-Datei und lege sie Seite an Seite, damit ich ein paar verschiedene Ideen aufschreiben kann , die ich für die Designmarke habe, die ich entwerfe. Ich habe also eine leere Adobe XD-Datei und werde nur ein paar verschiedene Ideen aufschreiben. Vielleicht möchten Sie also einen Markennamen haben oder nur unter Ihrem eigenen Namen bekannt sein? Ich habe meinen eigenen Markennamen, Mutterseite, aber ich baue auch ein separates Designunternehmen auf, also werde ich das für dieses Projekt machen. Ich habe also den Brand Hub, der der Name des Unternehmens ist , das ich aufbauen werde. Und ich möchte nur ein paar Adjektive aufschreiben. Ich möchte, dass es minimalistisch, modern, raffiniert, edel und wiederum pflegend ist. Moment sind das die wichtigsten Adjektive , nach denen diese Marke aussehen soll. Nun, offensichtlich denke ich schon seit geraumer Zeit über diese Marke nach. Ich kenne also schon die Designrichtung, die ich einschlagen wollte. Aber nur um ein paar Ideen zu sammeln, fange ich wie immer auf Pinterest an und dribbele und helfe mit, damit ich Inspiration finden kann. Also werde ich weitermachen und Pinterest, die Homepage, öffnen und nach Designer-Websites suchen . Und vielleicht mag ich das Aussehen nicht einmal unbedingt. Aber wenn es Designer gibt, denen du auf Instagram folgst, z. B. oder TikTok, und dir das Aussehen ihrer Website gefallen hat. Fühlen Sie sich frei, ihre Website auch als Inspiration zu verwenden. Ich habe auch eine Menge Ressourcen auf meinem Pinterest. Wenn du also auf mein Pinterest gehst, kannst du auch all die verschiedenen Boards sehen , die ich für viele verschiedene Projekte erstellt habe . Ich habe eine über Webdesign-Inspiration, Landing-Page-Design in all diesen verschiedenen Aspekten der Designwelt. Fühlen Sie sich also frei, dies auch als Ressource zu verwenden. Ich gehe einfach in mein Webdesign-Inspirationsboard und sehe, welche Dinge ich hier finden kann. Ich liebe diesen modernen, sauberen Look wirklich und ich entscheide mich einfach für diesen Stil. Ich möchte wirklich, dass es sich neutral in Schwarz-Weiß anfühlt, weil ich das Gefühl habe , dass es für die Marke, die ich kreiere, am sinnvollsten ist. Also werde ich weiterhin Websites öffnen, die dem Stil entsprechen. Ich habe auch ein Pinterest-Board mit einigen Designideen für Bildsprache, Topografie und Website-Layouts kuratiert einigen Designideen für . Also werde ich weitermachen und das auch durchsuchen. Ich habe meine eigene Bildsprache, die ich in diesem Projekt verwenden werde . Aber vorerst werde ich weitermachen und mit verschiedenen Designs herumspielen. Also ich habe ein paar, die ich hier geöffnet habe. Ich liebe diesen redaktionellen Look hier wirklich, also werde ich damit herumspielen. Ich werde ein paar Quadrate zeichnen. Das sind im Moment nur einige Platzhalter für Bilder. Ich werde hier auch den Markennamen eingeben. Die Marke macht das groß und ich werde tatsächlich mit ein paar verschiedenen Schriftarten in ein paar verschiedenen Stilen herumspielen . Also möchte ich damit in Großbuchstaben herumspielen, und ich möchte auch damit in Großbuchstaben herumspielen . Offensichtlich werde ich hier nicht das Branding durchgehen, also wähle ich zunächst einfach eine einfache Wortmarke. Also werde ich einfach weitermachen und versuchen, eine Schrift zu finden, deren Aussehen mir gefallen hat. Ich werde sie schwarz machen damit ich sie ein bisschen besser sehen kann, aber so. Also werde ich das einfach kopieren und einfügen und dann weitermachen bis ich einige andere Schriftarten finde , deren Aussehen mir sehr gut gefallen hat. Ich werde nur ein bisschen hineinzoomen, damit ich sehen kann. Mir hat dieser minimalistische Look hier sehr gut gefallen. Ich werde das einfach kopieren. Ich mag die minimalistische Schrift hier, also werde ich mich vorerst für diese entscheiden . Auch das kann ich später jederzeit ändern. Dies ist nur ein Ausgangspunkt. Wenn Sie sich darauf konzentrieren, Ihre eigene Marke aufzubauen, können Sie hier einige Zeit verbringen. Absolut. Aber für den Anwendungsfall dieses Projekts, da ich mich nicht auf das Branding konzentriere , sondern eher auf Website-Layouts, werde ich vorerst nur diese vereinfachte Wortmarke verwenden, die ich wirklich liebe. Ich denke, es ist etwas zu groß. Ich werde das einfach in den Mittelpunkt stellen. Und dann werde ich mit Topografien herumspielen. Und dann werde ich weitermachen und ein Textfeld erstellen und meinen Haken eingeben. Deshalb möchte ich erklären, wofür die Marke Hobbys hat und für wen sie ist. Sie möchten einen Hook erstellen, der auf dem basiert , wofür Sie entwerfen. Der Markenhub wird für mich ein Ort sein, an dem ich Webdesign-Vorlagen und Branding-Vorlagen aller Art anbiete . Ich möchte das also im primären Hook des Projekts kommunizieren können . Also werde ich eine andere Schriftart für diesen Header wählen. Ich mag diese redaktionellen Schriften eigentlich sehr. Damit werde ich tatsächlich weitermachen. Dann erstelle ich auch ein weiteres Textfeld für das Absatzschriftsyndrom. Und dann ändere ich das auf 22. Brand ist Ihr One-Stop-Shop für all Ihre Designanforderungen. Und ich werde das vergrößern und auf minimalistischere Schrift ändern. Ihr One-Stop-Shop für all Ihre Designanforderungen. Ich und vielleicht auch ich lieben diese Schrift nicht unbedingt, also mache ich weiter, wenn sie zu groß ist. Also denke ich vielleicht , dass es 24 ist, ändere die Zeilenhöhe auf 40. Nein, ich liebe das nicht unbedingt zusammen. Also werde ich die Absatzschrift ändern und glaube nicht , dass ich von dieser Schrift besessen bin, also werde ich einfach eine Kopie davon erstellen, damit ich sie habe, falls ich zu ihr zurückkehren möchte aber ich werde auch mit einigen anderen Designs experimentieren . Schrift könnte mir gefallen, also werde ich sie mir noch einmal ansehen. Und das habe ich einfach hier hingelegt. Ich mache das im Vollbildmodus, damit ihr den vollen Effekt erzielen könnt. Jetzt möchte ich, dass diese Website ziemlich hochwertig aussieht. Ich möchte, dass es sehr modern, simpel und sauber ist, und ich möchte wirklich, dass sich das in seiner Topographie zeigt. Topographie ist für diesen Fall wirklich wichtig. Ich möchte, dass es nicht zu extrem ist, aber ich möchte auch nicht, dass es zu einfach ist. Und dann bleib vorerst damit. Jetzt werde ich tatsächlich die Navigationsleiste erstellen. Also ein nukleares Zuhause über Pferde. Vielleicht stelle ich hier den Kontakt zu Portfoliopferden her. Also werde ich diese horizontal verteilen und irgendwie sehen, wie weit sie entfernt sind. Ich werde sicherstellen, dass sie alle 100 Pixel voneinander entfernt sind. Ich werde das Gleiche auf dieser Seite tun. Wenn Sie nur die Pfeile auf Ihren Tasten bewegen auf etwas klicken, können Sie sie verschieben, indem jeweils ein Pixel auswählen. Und jetzt wähle ich sie aus und verkleinere sie, ändere den Buchstabenabstand auf 40.000, 6.000. Vielleicht ändere es auf Semi Bolt. Also haben wir das. Und ich möchte eigentlich die Navigationsleiste machen. Also werde ich weitermachen und hier hinten eine Kiste zeichnen, das Wasser abstellen und hierher gehen. Aber ich will nicht, dass es komplett Onyx Black ist. Ich will es wie leicht benötigte Schwarze. Also hast du das, schick es nach hinten. Dann kannst du die Texte dort irgendwie sehen . Also werde ich es hervorheben. Wenn ich auf Shift und dann auf den Hintergrund klicke, wird die Auswahl des Hintergrunds aufgehoben und nur der Text ausgewählt, wirklich nützlich ist. Dann werde ich das zentrieren. Großartig. Mir gefällt, wie das bisher aussieht. Dann ziehe ich Bilder per Drag & Drop. Ich habe hier also jede Menge Fotos, die ich mit einem Fotografen gemacht habe , und ich werde einige davon auf meiner Website verwenden . Also werde ich einige davon kopieren und einfügen. Und ich möchte diese abgerundete Form wieder machen. Schaltet die Grenze ab. Und ich werde mir auch eine Textur schnappen, die ich beim Alchemie-Yoga gesehen habe. Also werde ich mir das schnappen, das gefallen, es ein bisschen verblassen lassen. Es ist also sehr, sehr, sehr subtil, ich werde das Ganze im Vollbildmodus machen und sicherstellen, dass es zentriert ist. Ich möchte, dass das hier ist. Ich werde diesen Stil tatsächlich entfernen. Ich frage mich auch, wie es aussehen würde wenn ich das in voller Breite überspannen würde. Jetzt finde ich es toll, dass ich hier etwas Textur habe. Es ist immer noch sehr neutral und weiß, aber da ist jetzt eine sehr, sehr leichte Textur. Sie möchten also einen Rand erstellen, um wirklich den gewünschten Effekt zu erzielen. Ich glaube eigentlich nicht, dass ich die Grenze will und ich glaube nicht, dass ich den Radius will. Ich schalte das aus. Ich werde das einfach so überspannen, dass es die halbe Leinwand ist, um mich als persönliche Markenlinie zu präsentieren . Diejenigen, die links sind, richten diese tatsächlich in der Mitte aus. Ich werde tatsächlich auf Command Z klicken, weil ich das andere Design bevorzugt habe . Also werde ich wieder hierher gehen und es so machen. Ich schalte das wieder aus. Mach das aus. Ich will diesen Effekt immer noch haben, aber innerlich werde ich das auf diese Seite stellen. Dann möchte ich hier einen Button erstellen. Und ich möchte, dass es mit Weiß gefüllt ist. Erstellen Sie eine Schaltfläche für die äußere Linie, kopieren Sie die Menüschaltfläche und ändern Sie die Füllfarbe auf Schwarz. Geben Sie das als Kontakt ein. Ich werde den Rand auch schwarz machen. Cool. Das gefällt mir bis jetzt. Ich bin mir nicht sicher, ob mir dieses Foto hier gefällt, also werde ich versuchen, ein anderes zu finden. Ich werde das hier drüben stellen . Ziehen Sie das per Drag & Drop. Vielleicht mach den Rand schwarz, ändere das auf 50. Und ich habe das Gefühl, dass das etwas zu dem Look passt, den ich ein bisschen mehr erreichen möchte. Ich bin mir nicht sicher, ob mir das gefällt. Berühren Sie die Schaltfläche, also werde ich das ändern. die Füllfarbe schwarz ist, ändern Sie den Text in Weiß. Ich liebe dieses Foto immer noch nicht. Also werde ich einfach weitermachen und es vielleicht in so etwas ändern. Und ich habe das Gefühl, dass das definitiv besser zur Atmosphäre passt . Also werde ich die Grenze ausschalten und das Ganze überspannen eine volle Kiste im Hyrum entsteht. Ich liebe es wirklich , wie das bisher aussieht. Ich werde sehen, wie es ohne diesen Hintergrund aussieht . Und ich finde, es sieht etwas sauberer aus und ich möchte trotzdem, dass das einen Akzent setzt, also werde ich es auf die gesamte Breite ausdehnen und es als Teil des nächsten Abschnitts haben. Also haben wir das. Ich liebe das Aussehen bis jetzt. Ich werde das einfach toll zentrieren, ich finde dieses Logo etwas zu groß, also werde ich es einfach etwas kleiner machen. Ich werde zu diesem Schwarz passen, dem Schwarz, das hier auf meinem Shirt ist. Also werde ich das ausschalten, auf diesen Farbwähler klicken und das Schwarz auswählen. Und Sie sehen auf jeden Fall , dass es dazu beiträgt, die Farben ein bisschen kohärenter zusammenzuführen . Also werde ich dasselbe mit den Knöpfen machen. Ich liebe das bis jetzt. Jetzt werde ich mir einfach meine Webdesign-Inspiration ansehen meine Webdesign-Inspiration um zu sehen, welche Abschnitte ich als Nächstes haben möchte. Schauen wir uns also an, hier haben wir einen Servicershop und einen Blog. Ein bisschen über dich. Was ist hier sonst noch los? Wer sind wir? Ich scrolle nach unten, um zu sehen welche Dinge ich mag und welche nicht. werde das in einem neuen Tab öffnen, weil ich die Ränder hier wirklich mag und ich mag auch , dass alle H1-Tags, wie die Überschriften-Tags, in Kleinbuchstaben geschrieben sind. Also könnte ich auch damit experimentieren und möglicherweise sogar mit einer anderen Schrift. Ich liebe die Farben hier und ich liebe die Bildsprache. Wirklich, wirklich cooles Design, das bereits für Unternehmer aus dem Kernland kuratiert wurde , um Ihr Unternehmen für langfristigen Erfolg zu skalieren. Und ich werde auch einfach mit verschiedenen Texten experimentieren , weil ich von diesem Text nicht ganz überzeugt bin . Ich werde einfach weitermachen und sehen, welche Dinge ich mag. Und auch hier müssen Sie diesen genauen Prozess nicht befolgen. Mein Prozess ändert sich je nach dem Design, das ich entwerfe, ziemlich , aber es ist wirklich unterschiedlich. Manchmal denke ich, ich mag es als Schrift. Und sobald ich mit dem kompletten Layout fertig war, entschied ich, dass es mir vielleicht nicht so gut gefällt, wie ich dachte. Es ist also wirklich wichtig, beim Entwerfen einfach Ihrer Intuition zu vertrauen. Und je mehr du übst, desto mehr wirst du ein Auge für Dinge haben , die du magst und die du nicht magst. Und noch eine weitere Sache, die Sie beachten sollten, ist, dass nur weil Sie es mögen, das nicht unbedingt bedeutet, dass Ihr Kunde es mögen würde. Es ist also wirklich wichtig, sich nicht so Ihre Designs zu binden und kein Perfektionist zu sein. Ich denke, das ist für Leute im Design- und Kreativbereich im Allgemeinen sehr schwierig . Weil wir offensichtlich gerne schöne Dinge herstellen und uns von schönen Dingen angezogen fühlten, daher die Branche, in der wir tätig sind. Aber es ist wirklich wichtig, nicht zu perfektionistisch zu sein, denn selbst wenn Sie es präsentieren und denken, dass es die perfekteste Website ist, mögen Ihre Kunden sie möglicherweise immer noch nicht. Und das ist nur ein Teil des Designerdaseins und Teil des kreativen Prozesses. also auf jeden Fall sicher, dass Sie Dinge entwerfen, die Ihnen gefallen, aber nicht unbedingt zu sehr an sie gebunden sind. Also werde ich einfach weitermachen und weiter versuchen, nach einer Schrift zu suchen, die mir gefällt. Ich weiß, dass es immer etwas schwieriger ist, wenn man für sich selbst designt, kein Perfektionist zu sein. Oft geben Designer ihre eigene Marke auf Websites oder anderen Designern weiter, weil wir die Designs, die wir entwerfen, einfach im Kopf haben können . Also werde ich das einfach so lange durchgehen , bis ich etwas finde, das mir gefällt. Ich hätte gerne eine Schrift im redaktionellen Stil, so lang und groß. Vielleicht gefällt mir diese Schrift, also kopiere ich sie einfach und lege sie zur Seite, weil sie vielleicht ja ist , ich liebe das. Ich mag diese Kleinschreibung hier nicht, also werde ich einfach diese Prüfung machen. Das Aussehen hat mir auf jeden Fall gefallen. Es muss sich anfühlen, als könnte das auch etwas größer sein. Passen Sie das an und vielleicht möchte ich damit herumspielen, dass alles zentriert ist. Hör dir das an. Und ich kann das nicht wirklich anpassen denn obwohl es ein Quadrat zu sein scheint, gibt es hier kein wirkliches Raster, also werde ich einfach ein Quadrat zeichnen damit ich den Text zentrieren kann. Ich könnte es immer löschen. Dann werde ich das zentrieren. gefällt mir bis jetzt. Und dann werde ich darüber sprechen, für wen das ist und wonach genau jemand suchen könnte , wenn er auf diese Website kommt. Im Grunde ist es Ihr Ziel als Designer, sicherzustellen, dass Ihre Kunden genau wissen , wem Sie helfen und worauf Sie sich spezialisiert haben. Und in den ersten beiden Abschnitten sollte es immer um Ihr Unternehmen und die von Ihnen angebotenen Lösungen gehen. Also werde ich weitermachen und hier einfach einen Abschnitt hinzufügen, etwas länger machen. Das Markenzentrum wird für mich ein Template-Shop sein , der sich speziell an Unternehmen richtet , die gerade erst anfangen. Vielleicht haben sie nicht genug Geld, um ein vollwertiges Designpaket zu bezahlen. Oft können Branding und Website zwischen fünf und 10.000 US-Dollar kosten. Und wenn eine Marke gerade erst anfängt, hat sie vielleicht nicht die Mittel, um dafür Geld ausgeben zu können. Kuratierte Marke von Kostümen, vor allem, wenn sie nicht wissen, dass ihre Geschäftsidee funktionieren wird , oder wenn sie es einfach nebenbei machen und verschiedene Dinge testen und experimentieren. Deshalb möchte ich die Marke kreieren, die zu einem Zentrum für Leute werden muss , die gerade erst anfangen. Also alles, von Kursen über Vorlagen bis hin zu Branding und Dingen, dafür wollte ich im Wesentlichen den Brand Hub schaffen. Das ist es, worüber ich in der Kopie sprechen möchte. Ich weiß, das ist die Herausforderung und vielleicht möchtest du es einfach ohne den Text zuerst entwerfen, aber weil das meine eigene Marke ist, habe ich das Gefühl, dass ich den Text schreiben kann , während ich entwerfe und dann Ich sage, ich werde Lage sein einen vollständigen Überblick über alles zu verschaffen, was ich zu bieten habe. Ich möchte, dass Schaltflächen in Großbuchstaben geschrieben sind, also habe ich sie in Kleinbuchstaben eingegeben. Aber wenn ich darauf klicke, wird automatisch alles in Großbuchstaben geschrieben, was genau das ist, was ich will. Und ich habe tatsächlich das Gefühl, dass der Absatztext im Vergleich zum Kopfzeilentext sehr klein ist. Also werde ich das einfach leicht anpassen und vielleicht auch den Abstand anpassen. Und ich habe auch das Gefühl , dass ich das ebenfalls anpassen muss. Ich werde nur 70. Unglaublich. Also werde ich diese tatsächlich als Zeichenstile speichern , damit ich sie einfach bearbeiten kann. Und dann werde ich hier dasselbe mit diesen Inhalten machen. Ich werde das ändern und auch das ändern. Gruppiere das zusammen. Und dann werde ich immer noch dasselbe tun , um den Text in diesem Abschnitt zu zentrieren. Das haben wir. Ich denke auch, dass es hier eine Art Verschönerung geben muss. Ebenfalls. Ich habe das Gefühl, dass das nicht in Ordnung ist. Ich werde nur sicherstellen, dass sie übereinstimmen weil das der Held ist. Ich könnte die Schrift tatsächlich größer machen , weil sie als H1-Tag betrachtet werden könnte. Es ist nicht perfekt. Ich bin mir nicht sicher, ob ich es lieben, lieben will, aber ich werde das vielleicht noch einmal überdenken. Ich habe das Gefühl, dass wir als Designer oft so perfektionistisch sein können und ich liebe diesen Abschnitt immer noch nicht, liebe ihn, aber das ist in Ordnung. Ich werde das vielleicht am Ende noch einmal überdenken, oder vielleicht liegt es daran, dass es drei Zeilen sind. Vielleicht kann ich das entfernen, weil ich das Gefühl habe, es trotzdem gesagt zu haben, Designlösungen, maßgeschneidert für den Unternehmer. Und denken Sie auch an das Kopieren. Es spielt eine Rolle beim Design. Sie möchten also sicherstellen, dass alles auf dem neuesten Stand ist. Und ich habe das Gefühl, dass das alles in Ruhe gelassen werden muss. Ich weiß, ich habe mich darauf konzentriert, aber ich glaube, das ist es, was mir daran nicht gefällt. Also werde ich weitermachen und diese mittig ausrichten und dann die Absätze links ausrichten. Und ich habe definitiv das Gefühl , dass mir das viel besser gefällt. Ich werde es einfach am Raster ausrichten, um sicherzustellen, dass es funktioniert. Und ich werde testen und zum anderen Text zurückkehren. Und dann tatsächlich bis zu 55. Vielleicht ist es eine Schaltfläche, die ich testen werde, die sich über die gesamte Breite der Schaltfläche erstreckt , um etwas mehr Platz zu schaffen. Ich könnte hier ein Symbol machen , weil ich finde, dass das ein guter Platz ist, aber ich könnte hier ein Symbol platzieren, also werde ich es vorerst einfach als Platzhalter zeichnen. Oder ich kann manchmal auch testen, einen Unterheader zu haben , der hilft, den negativen Raum aufzubrechen. Also werde ich das hier tatsächlich zeichnen. Willkommen bei der Marke. Machen Sie alles in Großbuchstaben. Okay, ich lasse das vorerst so wie es ist und werde es vielleicht später noch einmal überprüfen. Dieser Abschnitt gefällt mir bisher, aber ich möchte an der Seite einige Verzierungen hinzufügen an der Seite einige Verzierungen um ihn etwas persönlicher zu gestalten. Also nehme ich diesen Header und drehe ihn tatsächlich zur Seite. Wenn Sie also zu diesem kreisförmigen Abschnitt hier gehen und auf Shift klicken, wird er automatisch um 90 Grad gedreht. Das ist genau das, was ich hier machen möchte. Und ich möchte die gleiche Verzierung an der Seite haben. Also werde ich weitermachen und das auch hier drehen. Weißt du was? Ich glaube sogar, dass ich es nicht liebe , wenn das nicht zentriert ist. Ich denke, weil es wie ein großes Stück Text ist, auf dem man landen kann, möchte ich es mittig ausrichten und dann die Verzierungen an den Seiten hinzufügen. Also werde ich das versuchen und sehen, wie mir das Aussehen gefallen hat. Und ich möchte irgendwie eine Collage machen. Vielleicht kann ich damit hier experimentieren. Dann wird sich das wahrscheinlich ändern. Ich werde die nur anpassen. Ich werde das in einen Bogenlook ändern und meinen Ordner mit Fotos öffnen und per Drag & Drop ziehen. Ich habe also bereits einen Abschnitt mit einer Reihe von Portfolio-Stücken. Ich werde einfach weitermachen und schauen, ob es etwas gibt, das mir gefällt. Dieser hat mir sehr gut gefallen, weil die Farbe vielleicht nicht unbedingt genau zum Design passt, aber das können wir später immer noch verfeinern. Dieser wäre dort besser und dann eine Art Verschönerung da. Ich möchte eigentlich einen Randeffekt machen , der weiß sein soll. Also werde ich die Pipette verwenden, damit es natürlich aussieht. Etwas kleiner. Und du kannst das löschen und sehen es aussieht, wenn es perfekt parallel ist wie das Minus, damit ich beide zentrieren kann. Ich habe definitiv das Gefühl, dass ich dem schon zustimme, noch viel mehr. Also werde ich das einfach kopieren und einfügen, weil ich diesen Abschnitt behalten möchte und ich denke, wenn du deine Designs kopierst, kannst du jederzeit zurückkehren, wenn dir etwas nicht gefällt. Also habe ich es einfach kopiert und eingefügt. Sie klicken hier oben, klicken auf Befehl C und dann auf Befehl V, um es einzufügen. Und dann füge ich das einfach hinzu, falls du hier etwas ändern möchtest. Also werde ich den gleichen Effekt erzielen , den ich zuvor versucht habe. Und dann werde ich es linksbündig ausrichten, linksbündig, mein Raster. Und ich werde das neu definieren und hinzufügen. Ich werde den gleichen Effekt wie im vorherigen Design erzielen. Aber was ich tun werde, ist es in diesem Abschnitt zu haben , dass ich das kopiere und einfüge und es hier drüben lege , damit Sie auch zwischen den Abschnitten ziehen und ablegen können, was wirklich nützlich ist. Ich werde mich hier mit der Opazität befassen, weil ich vielleicht diese Textur nicht wirklich liebe. Also werde ich es sehr, sehr, sehr, sehr subtil machen . Ich bin so weit gekommen. Dann möchte ich über meine Dienste sprechen. Also werde ich das einfach hier hinstellen. Ich möchte das zusammenhängend gestalten, also werde ich hier auch eine Unterüberschrift hinzufügen. Ich möchte hier einen Zeilenumbruch haben, also werde ich einfach weitermachen und diese Linie ziehen. Ich habe die verschiedenen Vorlagen, die ich anbieten werde , und dann werde ich sie horizontal überarbeiten. Ich werde das etwas größer machen, weil es ein Header ist, aber ein kleinerer Header. Also werde ich etwa 24 machen. Mach diese Schrift und ich werde diesen Motor machen, eigentlich werde ich das wie es ist behalten und das einfügen. Ich werde diese beiden Zahlen tatsächlich ändern um mehr Kundeninformationen zu erhalten. Also 1234, ich werde es tatsächlich ändern, ich werde das ganz oben platzieren und diese Zahlen machen. werde es einfach hinzufügen, damit ich sie wirklich richtig ausrichten kann. Also werde ich das mehrmals kopieren und einfügen. Dann richte ich diese aus und verteile sie horizontal, sodass sie alle gleich sind. Schalten Sie es aus und gruppieren Sie sie alle. Und dann kann ich weitermachen und es oder zwei bearbeiten. Das ist wirklich gut zu machen. Ich fühle mich beim Branding und Copywriting etwas kohärenter. Das sind also die verschiedenen Vorlagen, mit denen ich halbbenutzerdefinierte Marken erstellen werde , die Sie aktualisieren können. Deine Vorlagen für echte Instagram-Geschichten und Posts. Branded Instagram ist eine echte Stärke, um ein einheitliches Erscheinungsbild zu bewahren. Es ist eine gute Faustregel, sicherzustellen, dass die Absätze beim Entwerfen die gleiche Länge haben. Aber nur um dieses einheitliche Erscheinungsbild beizubehalten, ändert es sich je Bildschirmgröße, auf der die Website angezeigt wird. Aber auch hier hilft es, diesen Zusammenhalt und diese Zusammengehörigkeit aufrechtzuerhalten . Also das weiß ich. Das nächste, was ich zeigen möchte, ist mein Portfolio. Und weil ein Portfolio sehr visuell ist, haben wir als Designer viele verschiedene Farben in unseren Designs. Ich empfehle, Ihr Portfolio auf hellem Hintergrund zu präsentieren . Also, was ich jetzt tun werde, ist hier ein Quadrat zu zeichnen und es tatsächlich schwarz zu machen. Der nächste Abschnitt kann also weiß sein und um zurück den Rand auszuschalten, dann die Füllfarbe zu verwenden. Um das zu tun, werde ich alles hervorheben und das weiß machen, den Rand ebenfalls mit Y versehen. Und ich möchte das irgendwie unfarbig machen. Ich wollte es nur testen, um zu sehen, ob es mir wirklich gefallen würde. Vielleicht habe ich sogar versucht, eine Füllfarbe von einem der Fotos zu verwenden, mal sehen, ob es funktioniert. Ich werde es eigentlich einfach schwarz lassen weil ich nicht glaube, dass die Farben dort gut passen, aber ich werde das Foto ändern, weil das offensichtlich nur eine Kopie des obigen ist. Schauen Sie sich also meine verschiedenen Bilder an. Ich mag diesen, aber ich habe das Gefühl, dass ich auf der anderen Seite sein muss. Also werde ich das einfach hierher verschieben und es dann verschieben. Ich werde diese Opazität noch leichter machen , vielleicht sogar fünf. Wir haben also immer noch diese Textur, aber sie ist immer noch sehr leicht. Ich werde das tatsächlich etwas größer machen , damit wir ein bisschen mehr von dem Foto haben können. Unglaublich. Also ich mag den Look bis jetzt auf jeden Fall, weil ich diesen viel besser mag als diesen. Ich werde das tatsächlich umdrehen und löschen, damit ich es nicht mehr sehen muss und wir sehen, dass es auf jeden Fall zusammenkommt. Also ich liebe das bis jetzt. Das nächste, was ich zeigen möchte, ist mein Portfolio. Ich werde dieses Zentrum hier kopieren und einfügen, ihr Portfolio zentrieren, aktuelle Arbeiten. Die Tür. Jetzt möchte ich mein Portfolio präsentieren. Ich habe ein paar Stücke hier in meinem Portfolio-Bereich. Deshalb möchte ich das hier präsentieren. Ich möchte. Sibley. Und ich möchte tatsächlich einen Scroll-Effekt erzeugen, also zeige ich Ihnen, wie das geht. Also werde ich diese Spanne tatsächlich auf die volle Breite ausdehnen. Ich nehme noch zwei davon und sorge dafür, dass sie vom Netz gehen. Sie werden also sehen, dass es hier ein Quadrat gibt, das jedoch vom Raster abweicht, was völlig in Ordnung ist. Ich zeige Ihnen, wie wir in Adobe XD einen Scroll-Effekt erzielen können , der sehr nützlich sein kann, um etwas darzustellen, das Sie vielleicht entwerfen möchten, wenn Sie sich im Entwicklungsmodus befinden. Also werde ich einfach ein paar meiner verschiedenen Portfoliostücke durchgehen und sie hier platzieren, um die Marke und das, was ich kreiere, wirklich zu präsentieren . Also werde ich das da hinstellen. Ich möchte viele Ihrer verschiedenen Arbeiten auf eine sehr einzigartige Weise präsentieren . Wenn du etwas Zeit damit verbringen musst, solche Bilder zu erstellen, mache ich das normalerweise und verbringe am Ende meines Projekts einige Zeit damit, Dinge zu erstellen , die ich in den sozialen Medien posten kann. Und ich denke, es ist immer sehr nützlich, das zu tun. Ich biege von der Grenze ab. Wir haben also alle Teile unseres Portfolios und ich möchte Ihnen zeigen, wie Sie einen Scroll-Effekt erzeugen. Das kann also sehr nützlich sein , wenn Sie versuchen, Kunden ein Konzept zu präsentieren. Und Sie möchten zeigen , dass Sie etwas erstellen möchten , wenn Sie es entwickeln, oder wenn Sie einem Entwickler mitteilen möchten , welche Wirkung dieser bestimmte Abschnitt haben soll. Ich habe also sechs Stücke in meinem Portfolio. Ich werde es hervorheben, damit ich eine Gruppe erstellen kann. Wenn Sie also auf den Befehl G klicken, wird er automatisch gruppiert. Oder wenn Sie mit der rechten Maustaste klicken, können Sie hier auf Gruppe klicken. Sie werden also sehen, dass sie alle zusammen gruppiert sind. Und um den Scroll-Effekt zu erzeugen, verwenden Sie diese Schaltflächen hier. Wir haben also ein horizontales Scrollen. Dies ist der Fall , wenn Sie wünschen für diesen Abschnitt sowohl einen horizontalen als auch einen vertikalen Bildlauf Ich möchte einen horizontalen Bildlauf erstellen. Also werde ich weitermachen und horizontales Scrollen wählen. Und ich werde das hier auch noch anpassen. Und ich möchte das tatsächlich am Anfang des Rasters beginnen , um die vollen Effekte zu erzielen. Also werde ich einfach mein Grid einschalten , damit ich es präsentieren kann. Und ich möchte hier eigentlich einen Pfeil zeichnen, um zu signalisieren, dass dies ein scrollender Abschnitt ist. Ich werde das schwarz machen. Ich habe jetzt einen Pfeil hier, um diesen Scroll-Effekt zu signalisieren. Wenn ich weitermache und hier auf dieser Website auf Play drücke. Also werde ich weitermachen und diesen Titel hier oben anklicken und auf Play drücken. Und jetzt schauen wir uns die Website an. Ich werde das nur im Vollbildmodus machen, damit wir es sehen können. Sie haben das und jetzt können wir tatsächlich durchblättern , was wirklich nützlich ist, um Ihre Arbeit präsentieren zu können . Also ich liebe diesen Effekt. Und dann haben wir endlich die Kontaktseite. Also werde ich einfach weitermachen und diesen Abschnitt und diesen Abschnitt kopieren. Oh, eigentlich wollte ich, bevor ich das mache, hier einen Button erstellen , um auf das Portfolio zu verlinken. Und wir haben den Bereich für den letzten Kontakt. Also müssen wir uns melden. Warum? Ich werde das zentrieren und ich werde das aufeinander ausrichten. Ich möchte das eigentlich kleiner machen, so ähnlich breit. Und ich werde sie beide zentrieren und das zur Seite verschieben. Und ich möchte den Verschönerungseffekt erzielen , den ich zuvor in diesem Video versucht habe. Also drehe ich es nach links und halte die Umschalttaste gedrückt, um sicherzustellen, dass es perfekt um 90 Grad ist. Ich schalte mein Raster ein, damit ich sehen kann, wo ich bin. Ich werde dasselbe auf der anderen Seite machen. Also kopiere ich es und füge es ein, drehe es, indem ich die Umschalttaste gedrückt halte, und dann haben wir hier den gleichen Effekt. Also ich liebe diesen minimalistischen Look bis jetzt. Und was ich eigentlich tun möchte, ist diesen Sticky-Header zu erstellen. Also werde ich weitermachen und das Ganze gruppieren und ich möchte die Position beim Scrollen korrigieren. Das heißt, wenn ich scrolle, wird dies weiterhin oben angezeigt, was die Navigation auf der Website sehr einfach macht. Normalerweise habe ich diese Funktion auf den meisten meiner Websites, nur weil ich denke, dass es für einen Kunden wichtig ist , zu anderen Seiten auf Ihrer Website navigieren zu können , ohne ganz nach oben scrollen zu müssen. zurück zur Speisekarte. Es schafft auch wirklich ein Markenerlebnis , da die Logos oben bleiben. Also habe ich diesen Abschnitt gruppiert und wenn ich mit der rechten Maustaste klicke, möchte ich sicherstellen, dass er ganz nach vorne zeigt, sodass er sich über all den verschiedenen Elementen darunter befindet. Sie klicken also auf „Nach vorne bringen“ und dann klicken wir beim Scrollen auf „ Exposition“. Dies bedeutet, dass dies eine Sticky-Header sein soll. Wenn wir nun auf Play drücken, um uns den Prototyp anzusehen, haben wir diesen Sticky-Header-Look dafür sorgt, dass es sich wirklich wie ein Markenerlebnis anfühlt . Und ich sehe tatsächlich , dass mir jetzt, wo ich diesen Sticky-Header habe, nicht gefällt, wie der Header auf einigen dieser Bilder aussieht Um eine Trennung zu schaffen, möchte ich tatsächlich eine erstellen am unteren Rand der Kopfzeile. Also werde ich die Gruppierung aufheben und das etwas verkleinern, weil ich denke, dass es immer noch ein bisschen groß ist. Verschieben Sie dies leicht nach oben , sodass wir eine kleinere Kopfzeile haben. Zentrieren Sie es vertikal. Und dann werde ich tatsächlich eine Linie am unteren Rand der Kopfzeile zeichnen. Wenn Sie also programmieren und lernen möchten, wie man programmiert, ist das keine Tatsache, die Sie mit CSS machen können, also macht es es sehr einfach. Ich werde den Rand weiß machen, damit du ihn nicht sehen kannst, aber du wirst ihn sehen können, sobald wir ihn gruppiert und eine klebrige Kopfzeile daraus gemacht haben. Also werde ich das alles gruppieren und dasselbe tun, es nach vorne bringen und sicherstellen, dass ich beim Scrollen auf feste Position klicke. Ich werde das auch zentrieren, weil es jetzt etwas außerhalb der Mitte ist. Also werde ich weitermachen und mir meine Website ansehen. Und ich mag es, wenn die Höhe dieser Navigationsleiste etwas höher ist. Und dann, wie Sie dort sehen, ein sehr, sehr leichter Rand, beim Scrollen eine Trennung erzeugt. Und ich denke, es ermöglicht einfach ein etwas besseres Erlebnis und es entspricht hier der gleichen Reihenfolge, insbesondere Schwarz auf Schwarz, es hilft, diese insbesondere Schwarz auf Schwarz, es hilft, Trennung zu schaffen. Und dann haben wir das Portfolio. Und in diesem Abschnitt können Sie, wie bereits erwähnt, natürlich scrollen und mit diesen Elementen ein interaktives Design präsentieren. Ich hoffe also, dass das Sinn macht. Ich hoffe, es hat Ihnen Spaß gemacht, mir dabei zuzusehen, wie ich dieses Video und diesen Prozess zur Schaffung meiner eigenen Marke erstellt habe. Also werde ich weitermachen und es exportieren, damit ich es in unseren Klassenprojektbereich hochladen kann . Wenn ich auf den Titel und dann auf Command E klicke , öffne ich automatisch meinen Finder und nenne ihn persönliche Markenwebsite. Und dann kann ich es von dort aus hochladen und auf meinen Social-Media-Plattformen teilen. Da hast du es also. So würde ich meine eigene persönliche Marke entwerfen. Ich hoffe, Ihnen hat dieses Prozessvideo gefallen und ich hoffe, Sie haben nützliche Informationen und die benutzerdefinierten Scrolleffekte gefunden . Und wir sehen uns im nächsten Video. 11. Vielen Dank: Und das ist ein Wrap. Vielen Dank, dass Sie mich ausgewählt haben, um Teil Ihrer Designreise zu sein. Und ich kann es kaum erwarten, deine Kreationen zu sehen. Vergiss nicht, deine Klassenprojekte in den Bereich Klassenprojekte hochzuladen . Weil ich es wirklich liebe, Feedback zu Ihren Designs zu geben und auch zu sehen an welchen Dingen Sie arbeiten. Wenn dir dieser Kurs gefallen hat, schätze ich ihn sehr. Wenn Sie mir eine Bewertung hinterlassen könnten, damit ich ständig verbessern und auch sehen kann , welche Dinge bei den Schülern , die an meinen Kursen teilnehmen, Anklang finden. Folgt mir auf Skillshare, um meinen nächsten Kurs, den ich veröffentliche, auf dem Laufenden zu bleiben, und um mit mir in den sozialen Netzwerken bei Angelica Steel auf Instagram, TikTok in Kontakt zu treten bei Angelica Steel auf Instagram, , oder besucht meine Website unter Angelica steals.com. Danke, dass du mich ausgewählt hast, um Teil deiner Reise zu sein. Und ich kann es kaum erwarten, deine Klassenprojekte zu sehen.