Web-Design in Adobe XD meistern

1. EINFÜHRUNG: Willkommen in der erstaunlichen Welt des Webdesigns. Ich bin Chris unfruchtbar. Säuern Sie den Adobe-Lehrer, und wir gehen zu den wichtigsten Web-Design-Prinzipien , die Ihnen helfen, fantastische Websites zu erstellen. Typografie, Farbtheorie, Symmetrie, Kontrast, Ausrichtung, aber auch Dinge wie Responsive Design, Conversion-Raten, Bounce-Raten, und so weiter. Dieser Kurs ist vollgepackt mit den neuesten Informationen über Webdesign und ist in zwei Teilen organisiert. In den ersten fünf, ich war, wird eine tolle Website von Anfang bis Ende zu entwerfen. Wir erforschen die Kurzbeschreibung, verstehen die Bedürfnisse des Kunden und arbeiten an der Desktop-Version. Und wenn das erledigt ist, decken wir das responsive Design ab. Ich werde dir alles beibringen, worüber du wissen musst. Schließlich wird in der ersten Hälfte dieses Kurses das Design für die Codierung vorbereiten. Wir werden das Design von sich selbst nicht programmieren, weil das nicht benötigt wird. Aber ich werde Ihnen zeigen, wie Sie die Entwickler glücklich machen können. Und das wird Ihnen viel helfen, indem Sie die Lücke zwischen der UI UX Seite voll funktionsfähige Website überbrücken . Wenn Sie verstehen, wie Sie mit Programmierer sprechen, Ihr Wert als Design, das weit nach oben geht. Und in der zweiten Hälfte dieses Kurses erfahren wir mehr über die Prinzipien des Webdesigns. Ich zeige Ihnen viele Fallstudien und Beispiele. So können Sie wirklich ihren Sinn bekommen, wie man Artikel basierend auf ihrer Wichtigkeit dimensioniert. Alles, was Sie über Typografie wissen müssen, wie man mit der Entscheidung arbeitet, Symmetrie zu erreichen, wie man mit Farben arbeitet und grauen Kontrast plus vieles mehr erreicht. Und wenn Sie diese Prinzipien verstehen, können Sie jede Website entwerfen, keine Mathematik des Stils oder des Kunden. Am Ende dieses Kurses haben Sie ein fantastisches Portfolio, ein komplettes Website-Design mit einer mobilen Version und dem einfachen interaktiven Prototyp, aber auch ein tiefes Verständnis dafür, was eine Website gestaltet. Hallo. Dies ist ein Kurs, in dem Sie Webdesign für reale Projekte unterrichtet werden. Ich werde Ihnen beibringen, wie Sie kämpfende Unternehmen nehmen, diese Website neu gestalten und ihnen helfen, fünfmal so viel zu verkaufen. Es gibt so viel mehr zu sagen, aber bitte, ich freue mich darauf, loszugehen. Also lasst uns anfangen. Wir sehen uns in der nächsten Vorlesung. 2. Schnelle Antworten auf allgemeine Fragen: Willkommen in der erstaunlichen Welt des Webdesigns. Ich bin Chris Baron. Ich bin zertifizierter Adobe-Dozent. Und gemeinsam gehen wir durch einige der wichtigsten Web-Design-Prinzipien, die Ihnen helfen, fantastische Websites zu erstellen. Ich spreche über Farbtheorie, Symmetrie, Kontrast, Ausrichtung, Typografie, aber auch Dinge wie Responsive Design, Konversionsraten, Absprungraten und so weiter. Bevor wir anfangen, lassen Sie mich schnell einige beliebte Fragen beantworten. Das Wichtigste Müssen wir unsere Projekte programmieren? Nein, nein, das tun wir nicht. Lassen Sie mich mit einem einfachen, aber echten Beispiel erklären. Also bin ich ein Unternehmer höre Rumänien und ich habe eine E-Commerce-Website. Es verkauft gesunden Pool. Nun, ich machte ungefähr $5.000 Umsatz pro Monat und ich steckte fest. Ich konnte das Geschäft nicht ausbauen, egal wie viel ich in Werbung investierte, ich konnte einfach nicht wachsen. Was ich tat, war, dass ich die Website neu gestaltet und Adobe XD, Ich habe den Coder eingestellt. Und mit dem neuen Design, das Geschäft springt auf 40000 Dollar pro Monat. Hast du das richtig gehört? Von fünf bis 40.000$ pro Monat, Monat über Monat. Also habe ich enormen Wert geschaffen, indem ich Adobe XD verwendet habe, ohne Codierung. Dies ist eines von vielen Beispielen, geht es nicht darum, wie viel Geld mein Geschäft macht. Es geht darum, wie Sie nicht codieren müssen, um Wert zu schaffen. Sie können viel Wert für jedes Unternehmen aus der ganzen Welt schaffen , obwohl Ihre Entwürfe in Adobe XD gemacht. Als Nächstes müssen Sie Adobe XD kennen, bevor Sie an diesem Kurs teilnehmen? Nein, das tust du nicht. Aber es wäre eine gute Idee, meine Adobe XD-Masse in der Klasse zu sehen, die Ihnen alles lehrt, was Sie darüber wissen müssen. All die fortgeschrittenen Techniken, all das lustige Zeug. Nachdem gesagt, dass, Mach dir keine Sorgen darüber, weil ich dich Schritt für Schritt durch den gesamten Prozess in diesem Kurs. Wir werden nicht auf sehr fortgeschrittene Adobe XD-Techniken eingehen. So werden Sie in der Lage sein, mit Leichtigkeit zusammen zu folgen, wird nichts kompliziert sein. Das ist, weil Sie sehen, dass ein tolles Website-Design, es geht mehr darum, bestimmte Design-Prinzipien zu befolgen , die nicht allzu schwierig sind, eine Adobe XD auszuführen. Als nächstes gibt es zwei Hauptteile zu diesem Kurs. Beim ersten geht es darum, aktiv zu sein, zuerst eine Website, die Desktop-Version und dann die mobile zu entwerfen . Es geht darum, in Adobe XD zu arbeiten. Und dieser Teil wird Spaß machen und ich werde meine Design-Entscheidungen erklären. ob du bei jedem Schritt neben mir stehst , wie ich erklären werde, warum ich tue, was ich tue. Im zweiten Teil gehen wir tief in die Prinzipien und die ganze Theorie ein. Der zweite Teil ist der wertvollste. Sie also sicher, dass Sie Ihr Bestes tun, um dorthin zu gelangen. Wenn Sie zu diesem Teil springen wollen, ist das auch in Ordnung. Aber lassen Sie mich das noch einmal sagen. Wenn Sie die Designprinzipien wollen, die Sie in jedem einzelnen Ihrer Projekte dort im zweiten Teil des Kurses anwenden können , wenn Sie etwas von Grund auf neu entwerfen möchten 0, eine Website oder responsive Version und vorbereitet für -Codierung. Das ist der erste Teil. Okay, jetzt, endlich, welchen Computer brauchst du? Jeder Computer ist in Ordnung, aber wenn Sie unter Windows sind, benötigen Sie Windows 10 oder höher. Adobe XD wird nicht unter Windows sieben oder Windows Acht ausgeführt. Sie können weder ein Tablet noch ein iPad verwenden, weder Audio noch Mobiltelefon. Ansonsten bitte lassen Sie die Patienten mit mir zusammenarbeiten und wir werden im Handumdrehen einige tolle Websites entwerfen. 3. Webdesign – was du wissen musst: Hey, hier ist Chris. Sie haben wahrscheinlich Ihre eigene Vorstellung davon, was ein Webdesigner tun soll. Hier ist, wie ich die Dinge sehe. Also sind wir auf der gleichen Seite in Zukunft. In einfachen Worten, eine Website ist wie ein Gebäude, da sie zwei Hauptkomponenten hat. Also zwei Komponenten, Es gibt das Fundament, das Skelett, wenn Sie so wollen, das ist aus Beton, Bewehrungsinstallation, Sanitär, Elektro, und all die anderen Sachen und all die anderen Sachen, die machen bis zum Kern des Gebäudes. Am Ende der ersten Bauphase können Sie mit einem Gebäude rechnen, das in etwa so aussieht. Das ist also nicht gerade atemberaubend, aber das ist das Ziel des ersten Schritts. Ist das Ziel, die zweite Hauptkomponente, wieder, in sehr einfachen Worten, konzentriert sich auf Aussehen, auf Ästhetik. Dazu gehören Hartholzböden, Tapeten, Leuchten, Möbel und so weiter. Dieser Teil macht das Gebäude lebenswert und nutzbar. Nachdem all diese Arbeit erledigt ist, werden beide Teile erst dann das Projekt als abgeschlossen betrachtet. Beide Komponenten werden benötigt, müssen aber klar voneinander getrennt werden. Sie treten irgendwie zurück. Dieser Teil eines Gebäudes wird von einer bestimmten Art von Arbeiter mit spezifischen Fähigkeiten in Maschinen durchgeführt . In unserer Web-Design-Welt, diese Jungs, die das Fundament aufbauen, werden sie Codons oder Software-Ingenieure, Entwickler, Programmierer genannt , was immer Sie sie nennen wollen, sie sind das Gleiche. Jetzt haben sie ihren Teil der Website mit Code wie HTML, CSS, JavaScript, MySQL, PHP und so weiter behandelt . Dieser Kurs wird Ihnen nicht beibringen Papa Seite das Web-Design. Stattdessen konzentrieren wir uns auf Ästhetik. Auf der Design-Seite, die die Website sieht und fühlt sich erstaunlich. Lassen Sie mich erklären, warum ich denke, dass dies der beste Weg ist. Zunächst einmal, finanziell, meine persönliche Erfahrung ist ein klares Beispiel, dass die Erstellung von Websites und Adobe XD, sehr lukrativ. Wie Sie wahrscheinlich wissen, habe ich über 50.000$ gemacht, indem ich Websites auf 99 designs.com entwarf. Nur Gestaltung, können Sie mehr über meine Karriere als Freiberufler auf den Plattformen Official Blog lesen. Kurz gesagt, Sie können gutes Geld verdienen, indem Sie nur auf dieser Seite des Projekts arbeiten. Das bringt mich also zur zweiten Sache. Berufe coder zu werden. Ein guter Programmierer ist wesentlich schwieriger, aber die Belohnung, ich glaube nicht, dass es dort vorerst rechtfertigt. Das ist natürlich meine eigene Meinung, denn für manche Leute kann das Lernen von Code natürlich kommen. Aber als ich in meinen frühen 20ern war, hatte ich die Entscheidung zu treffen, was ich tun kann, um meinen Job als Tür-zu-Tür-Vermittler aufzugeben und genug Geld zu verdienen, damit ich aus dem Haus meiner Eltern ausziehen kann. Zeit war von entscheidender Bedeutung, und ich habe versucht zu programmieren und fand es überwältigend. Ich fand es extrem einschüchternd. Ich wusste, dass es lange dauern würde, um Geld aus dem Programmieren zu verdienen. Aber als ich herausgefunden habe, dass ich Websites in Adobe XD oder Photoshop oder was auch immer entwerfen kann. Und das kann mir fast die gleiche Menge an Geld wie Codierung bringen, aber mit einem Bruchteil des Stresses und der Schwierigkeit. Ich dachte, Mann, das ist der beste Weg, mich vorwärts zu gehen. Ich dachte, das wäre der beste Weg zu gehen. Um diesen Punkt zusammenzufassen, kann ein Designer anfangen, viel schneller und mit weniger Stress und Aufwand im Vergleich zu einem Code dort Geld zu verdienen . Das dritte und letzte, was ich sehen möchte, ist dies als absoluter Experte Coder erstellt die Grundlage einer Website. Brillanter, gut geschriebener Code, eine großartige Grundlage. Es lädt schnell ohne Fehler, aber es sieht so aus. Wird es gelingen? Ist das eine großartige Website? Nein, natürlich nicht. Das Design ist entscheidend für ihren Erfolg. Es spielt keine Rolle, wie gut es gebaut ist. Wenn es schrecklich aussieht, sage ich das nochmal. Es spielt keine Rolle, wie gut es codiert ist. Wenn das Design nicht attraktiv ist. Unternehmen wollen schöne Websites, weil diese Zelle mehr, Es ist so einfach wie das. Großartig aussehende Websites verwandeln Besucher in zahlende Kunden. Sie sind diejenigen, die ihre Nutzung von aktiven, attraktiven Websites, machen oder brechen ein Geschäft, vor allem in dieser digitalen Welt, in der wir leben. Es gibt nur sehr wenige Ausnahmen. Natürlich gibt es einige Ausnahmen, bei denen das Design keine Rolle spielt, aber das ist ein kleiner Bruchteil, also werden wir nicht darüber sprechen. Nun, ich versuche zu sagen, ist, dass die Grundlage der Website, was den Code, das Backend, die Datenbank, die Funktionalität bedeutet . Obwohl es überwichtig ist, ist es offensichtlich nicht das, was das Geschäft zum Erfolg bringt. Das Aussehen ist viel wichtiger und angemessener Begriffe. Die UI und UX sind der Schlüssel zu einer großartigen Website und zu einem großartigen Geschäft. Und das werden wir in diesem Kurs lernen. Darauf konzentrieren wir uns. Nun denken Sie vielleicht daran, beide Seiten des Projekts zu machen, die Betonwände und den deklarativen Teil, richtig? Design und Code. Aber für mich, wieder, eine völlig subjektive Sache, ich glaube nicht, dass das eine praktikable Option ist, weil sie nur 24 Stunden drin haben. Man kann einfach nicht großartig in beiden Dingen gleichzeitig sein , es sei denn, man arbeitet sich zu Tode. Anstatt bei zwei Dingen mittelmäßig zu sein, würde ich mich lieber darauf konzentrieren, in einer Sache großartig zu werden, oder? So wird man tatsächlich ein besserer Designer, indem man dieses Ding macht. Sie kommen ein, Tag aus jeden Tag. Und das ist es, was Programmierer auch tun. Sie setzen die Zeit ein, Tag in, Tag aus, jeden einzelnen Tag. So werden Sie großartig. Ich denke, diese Fokussierung auf einen einzigen Zweig wird dich glücklicher machen, aber es wird auch mehr Geld in deine Tasche stecken. Schließlich sollten Sie wissen, dass die meisten Unternehmen wissen, dass es sich um zwei getrennte Arbeitsplätze für zwei getrennte Personen handelt. Nicht mehr im Jahr 2005, wo man erwartet wird, absolut alles zu tun? Nein. Jemand gießt den Beton, jemand anderes wählt die Tapete, jemand entwirft, jemand kodiert. Wenn Sie ein Unternehmen finden, das sowohl Design als auch Codierung von derselben Person durchführen möchte , gehen Sie einfach weiter. Unternehmen würden offensichtlich einen Mann bevorzugen, um die Arbeit der Menschen zu tun. Das verstehe ich total, aber es ist nicht fair. Also arbeiten Sie nicht mit den Unternehmen, die Sie nutzen wollen, fallen Sie nicht auf diesen Druck. Es ist eine Falle. Vertrau mir. Okay, lassen Sie uns mit dem Kurs fortfahren. 4. So wählst du Ebenen wie ein professioneller Designer aus.: Es ist wichtig, dass wir wissen, wie Ebenen in Adobe XD auswählen, weil es eine dieser grundlegenden Fähigkeiten ist, die in jedem Buch wissen müssen, gibt es ein paar Möglichkeiten zu arbeiten. Ich werde zwei Optionen vorstellen, die nicht so toll sind, aber sie sind leicht zu merken. Aber wenn Sie sich nicht um sie kümmern, überspringen Sie einfach zur dritten Technik, was ich empfehle. Lasst uns dran kommen. Bitte öffnen Sie dieses Projekt, das Sie dem Kurs beigefügt haben. Klicken Sie hier, um das Ebenenfenster zu öffnen, nur für den Fall, dass Sie kein Dopant haben. Okay, die erste Möglichkeit, Ebenen auszuwählen, ist nicht die, die ich empfehle. Und das nutzt die geschichtete Spanebene. Wenn wir nicht die Zeichenfläche ausgewählt haben, wird seinen Namen hier zu bekommen. Web 1920, eins, doppelklicken Sie darauf, und das wird seine Ebenen und Ordner offenbaren. Einfach genug, sagen wir, wir wollen Nordpol in Änderungen Farbe wählen, oder? Wir können jeden Ordner öffnen und danach suchen. Das ist ziemlich zeitintensiv. Glücklich dafür. Dies ist ein winziges Projekt mit nur einer Handvoll Ebenen und Ordnern. Insgesamt ist es nicht so schwierig. Immer noch auf der ersten Methode der Auswahl von Ebenen, könnten wir auch die Suchfunktion verwenden. Wenn wir wissen, dass wir nach „Erste Schritte“ suchen, könnten wir das eingeben. Aber natürlich wird davon ausgegangen, dass der Layer-Name der gleiche ist. Diese insgesamt ist nicht ein schneller Weg, die Arbeit, noch tut es, ob Sie zuverlässig. Als Beispiel, sagen wir, wir suchen nach dem Haus, den ersten Menüpunkt in der Navigation, oder? Xd findet nichts. Und warum ist das? Weil die Ebene tatsächlich Menü genannt wird. Um diese erste Technik zusammenzufassen, verlassen Sie sich bitte nicht auf die Verwendung des Ebenenbedienfelds, um Ebenen schnell auszuwählen, aber Sie sollten darüber Bescheid wissen, nur für den Fall, dass Sie jemals stecken bleiben. Die zweite Möglichkeit, eine Ebene auszuwählen, besteht darin, auf die Leinwand zu doppelklicken. Dies ist wieder, nicht so zu empfehlen, aber Sie sollten darüber auch wissen. Wir möchten die Textebene „Erste Schritte“ auswählen, oder? der Annahme, dass alle Ordner geschlossen im Ebenenfenster, hier ist die Prozedur. Wir gehen mit dem Text und doppelklicken darauf. Dies öffnet den Hauptordner und wir werden btn hervorgehoben haben. Ansonsten gesagt, wir haben eine Ebene nach unten gegangen, hätten wir nicht die Textebene ausgewählt. Doppelklicken Sie erneut, und jetzt haben wir einen guten Start. Die ausgewählte, wie Sie hier sehen können. Grundsätzlich bringt Sie jeder Doppelklick weiter nach unten. oft Sie diese Aktion ausführen müssen, hängt davon ab, wie tief Ihr Layer ist. In diesem Fall wird get started in einem Ordner gruppiert, BGN, und das ist in einer größeren Gruppe namens main enthalten. Deshalb müssen wir hier wieder doppelklicken, die einfachsten Situationen. Zum Beispiel, wenn wir doppelklicken, wird das Hauptmenü sofort auswählen. Und das liegt daran, dass es nur einen Ordner gibt, so dass wir nicht auf eine andere Ebene gehen müssen. Lassen Sie uns also die zweite Methode zusammenfassen. Sie müssen doppelklicken, um den Ordner zu erweitern. Wenn sich Ordner in Ordnern befinden, müssen Sie mehrmals doppelklicken. Deshalb bin ich kein großer Fan dieser Methode. Es funktioniert von Zeit zu Zeit, aber insgesamt, Hier ist der beste Weg, um darüber zu gehen. Lassen Sie mich Ihnen den dritten Weg zeigen. Den, den ich empfehle, zu klicken, wobei jeder Ordner angenommen wird, der im Ebenenbedienfeld offenbart wird. Und ich möchte die Erste Schritte auswählen. Ich werde das tun. Ich halte die Strg-Taste gedrückt und wähle das aus. Genau so haben wir es, egal wie tief es ist. Hier ist, was wir in diesem spezifischen Beispiel tun müssen. Symbol- und Textebenen zusammen über diesem Rechteck zentriert. Um das zu tun, müssen wir sie näher zusammenbringen. So etwas wie das, richtig? Als nächstes halten Sie die Strg-Taste gedrückt und klicken Sie auf die Koffergruppe. Wir haben beide ausgewählt. Also lasst uns Control G. G von der Gruppe treffen . Da gehst du. Wir haben einen neuen Ordner. Der letzte Schritt besteht darin, das orangefarbene Rechteck zusammen mit dieser neuen Gruppe auszuwählen. So wie so. Halten Sie erneut die Steuerung gedrückt, um Mehrfachauswahl zu aktivieren, und verwenden Sie jetzt dieses Symbol. Dies wird sie horizontal zentriert. Bitte werfen Sie einen weiteren Blick auf das Ebenenfenster. Wir haben jetzt drei Ebenen. Diese Gruppe befindet sich in btn, das ist innerhalb des Hauptordners. Wenn ich irgendwo außerhalb unseres Boards klicke und Methode Nummer 2 ausprobiere, schau nach, wie viele Klicks benötigt werden. Doppelklicken Sie also zweimal, dreimal. Und das ist eine Menge Arbeit. Aber mit Method3, steuern Sie das Klicken, nun, halten Sie einfach Controlling, greifen Sie es. Und das ist das. Wie Sie feststellen können, ist dies weit überlegen, als es das ist, was ich täglich empfehle, zumal wir das Ebenenfenster nicht allzu oft verwenden werden. Ich werde erklären, warum das später in den Gerichten der Fall ist. Das ist ein Haken, obwohl über Steuerelement klicken, sagen Sie, dass Sie vergrößern und Sie steuern möchten, klicken Sie auf den kurzen Blick, um die Farbe zu ändern oder was auch immer. Beachten Sie, was passiert. Sie haben tatsächlich einen kleinen Teil davon ausgewählt. Und das liegt daran, dass die Steuerklick-Technik alle Gruppen durchführt. Dieses Symbol besteht nicht aus einer einzigen Ebene. Es hat eigentlich drei Elemente. Wenn wir also versuchen, uns zu bewegen, wird es nur dieses kleine Stück neu positionieren. Gleiches mit jeder Farbänderung oder Größenänderung. Das ist also die negative Seite des Steuerelements, aber hier ist die Lösung, die Escape-Taste. Das hebt dich ein Level auf, und da gehst du. Sie haben nun die gesamte kurze K ausgewählt. Was ist, wenn Sie stattdessen den Ordner möchten? Drücken Sie erneut Escape. Und da gehst du. Dies erfordert etwas Üben. Es ist nicht etwas, das Photoshop-Benutzer vertraut ist. Aber denken Sie daran, Steuerung, klicken Sie auf Escape, Steuerung klicken Sie auf Escape. Das ist dein neues Mantra. Das ist deine neue Angewohnheit. Kontrollierter Beinentzug Behalten Sie dabei immer das Ebenenbedienfeld im Auge. Du weißt also, wie viele Diamanten du auf Escape treffen musst. Das wird Zeiten sein, in denen Sie es zweimal oder sogar dreimal tippen müssen. In der nächsten Vorlesung, dass wir noch mehr üben. Machen Sie sich also keine Sorgen, wenn Sie noch keine Ränder haben. Probieren Sie es ein wenig aus und gehen Sie dann zur Übung. Glückliche Auswahl, steuern, klicken Sie auf Escape, steuern, klicken Sie auf Escape. 5. Üben deine Auswahl: Hallo, hallo. Wir müssen Muskelgedächtnis entwickeln, wenn es darum geht, Ebenen in Adobe XD auszuwählen , ist nicht so schwierig, wenn Sie daran gewöhnen, aber Sie müssen üben, vor allem, wenn Sie mit anderen Design-Programmen vertraut sind, Photoshop, zwinkern, zwinkern. Hier ist die Übung. Sie haben diese Elemente auf der Leinwand gelegt und ich möchte, dass Sie diese Farbe ändern, aber als einzelne Komponenten, hier ist, wie das geht. Beginnen Sie mit der Einkaufstasche. Kontrolle. Klicken Sie darauf, und schauen Sie sich das Ebenenbedienfeld an. Wenn Sie kein Dotiermittel haben, verwenden Sie Control Y oder klicken Sie hier. Nun haben wir Pfad eins ausgewählt, und basierend auf diesem Rechteck können wir sagen, dass wir es ausgewählt haben. Bewegen Sie sich auf die rechte Seite des Bildschirms, sehen wir, dass wir eine Füllung aktiviert haben. Klicken Sie hier, um die Farbauswahl zu öffnen. Jetzt können Sie eine beliebige zufällige Farbe wählen oder Sie können meine Vorschläge von der rechten Seite der Leinwand verwenden . Um das zu tun. Du musst das benutzen, ich lasse es mit Dual. Bewegen Sie nun den Mauszeiger über das orangefarbene Rechteck und klicken Sie. Da gehst du. Als nächstes steuern Sie Glyc, den Handle. Diesmal öffne ich die Farbauswahl nicht. Stattdessen verwende ich dieses Symbol direkt. Und genau so habe ich die Griffe Farbe geändert. Jetzt fragst du Chris, wieso haben wir den Griff der größeren Tasche nicht gewechselt? Nun, lassen Sie uns einen Blick in das Ebenenfenster werfen. Diese kleinere Tasche besteht aus zwei Komponenten, zwei Elementen, Pfad drei, dem Griff, der derzeit ausgewählt ist, und Pfad zum Boden der Tasche. Und während wir dabei sind, lasst uns seine Farbe ändern, um auf das Pipettenwerkzeug zu klicken. Und im Grunde ist es das. Rückzug in die größere Tasche hat nur einen Pfad. Aus diesem Grund können wir den Griff vom Rest trennen. So entschied sich der Schöpfer dieses Symbols für die Arbeit. Ich habe sie nicht selbst gemacht, tatsächlich bekam sie von flat icon.com. Es gibt keine besondere Art zu arbeiten, die für richtig gehalten wird. Es stimmt, dass Sie, wenn Sie mehr Wege haben, mehr Flexibilität haben. Aber es ist auch ein bisschen schwieriger, die Form tatsächlich auszuwählen. Sie müssen also die Tatsache akzeptieren, dass Sie auf viele verschiedene Szenarien stoßen , die auf den Vorlieben aller basieren. Fahren Sie mit dem nächsten Shape fort, steuern Sie, klicken Sie auf den äußeren Rand und machen Sie ihn orange wie so. Nun, um das Symbol darin zu sehen, was los ist. Es besteht eigentlich aus drei Pfaden. Halten Sie die Strg-Taste gedrückt und klicken Sie im Ebenenbedienfeld darauf. Aber nehmen Sie nicht Bad fünf. Verwendet der orangefarbene Außenbereich die Pipette? Und das ist das. Wenn Sie mich beeindrucken wollen, können Sie diese beiden Kreise auswählen und sie eine andere Farbe machen. So wie so. Spielen Sie mit ihnen herum. Ich weiß, es scheint einfach genug, aber das ist unsere Jim, diese erlaubten Trainingsplätze, wo die Impfstoffkarten und Flüssigkeiten, aber es hat alles einen Punkt. So gewinnen Sie Geschwindigkeit und Geschicklichkeit. Selbst wenn du der Ungläubige bist. Vertrauen Sie mir, das hilft bei Textebenen. Hier ist, was ich tun möchte. Wir werden sie mehrfach auswählen. Wir wissen, dass, wenn wir Ctrl-Klick auf diese Zeile, wird es greifen. Wenn wir die gleiche Technik auf der zweiten verwenden, wird die erste aufheben und greifen diese stattdessen. Im Grunde springen wir im Ebenenfenster auf und ab. Die Mehrfachauswahl aus dem Canvas. Es ist ziemlich einfach. Nachdem Sie die erste Ebene gegriffen haben, halten Sie die Strg-Taste und Umschalttaste gedrückt, beachten Sie das Ebenenfenster Wir sind gut zu gehen. Ich werde die Auswahl aufheben und es erneut tun. Steuerelement klicken Sie auf diese, und jetzt Control verschieben Sie zu diesem anderen. Und der dritte und der vierte. Jetzt können wir sie alle rot machen oder was auch immer. Wechseln Sie zu den größeren Textzeilen. Kontrolliertes Bein und Kontrolle Shift klicken. Machen Sie diese zum Beispiel gelb. Aber du musst etwas im Hinterkopf behalten. Lassen Sie mich Ihnen zeigen, wie Sie einige Probleme haben können. Du könntest das tun. Klicken Sie bei gedrückter Ctrl-Taste wie gewohnt auf eine Ebene, aber halten Sie die Umschalttaste gedrückt, während Sie auf diese andere Ebene klicken Der Fehler ist, dass Sie sowohl die Kontrolle als auch die Verschiebung gedrückt halten sollen. Aber anscheinend hat es funktioniert. Es wurde ausgewählt. Es gibt ein seltsames Symbol hier neben dem Ausfüllen, aber wenn Sie darauf klicken, wird die Farbauswahl angezeigt und es scheint gut zu funktionieren. Das Ebenen-Panel sagt uns tatsächlich die Wahrheit. Wir haben eine Textebene und eine ganze Gruppe ausgewählt. Und mit der Farbänderung bearbeiten wir tatsächlich das obere Label sowie den Zeichenzähler von unten links, drücken Control Z und Backup. Die richtige Methode zur Mehrfachauswahl des Layers ist „Umschalttaste“. Klicken Sie auf. Okay, ich bin sicher, Sie haben es, aber wenn nicht, spielen Sie es noch mal, lassen Sie mich Ihnen eine letzte Sache zeigen. Diese Linie. Sie wählen das aus und Sie bemerken etwas Seltsames. Es gibt keine Füllung. diesem Grund wurde es von unserer vorherigen Aktion nicht beeinflusst. Die Füllung ist tatsächlich deaktiviert, da diese Ebene durch die Platine in diesem Abschnitt gesteuert wird. So können Sie das anpassen. Sie können es dicker machen, indem Sie dieses Feld verwenden. Aber der eigentliche Kicker sind die Armaturen- und Gap-Controller. Um das zu tun, kann man wirklich etwas Cooles machen. In den meisten Fällen werden Sie diese Funktionen nicht wirklich verwenden, aber es ist gut, über sie zu wissen. Sie können mit ihnen zu Ihrer eigenen Zeit spielen, aber denken Sie daran, Control Z zu verwenden, wenn Sie damit fertig sind. Ich überlasse Ihnen, diese speziellen Farbänderungen, einschließlich der Tastatur, abzuschließen. Ich bin nicht auf der Suche nach etwas Besonderem, aber ich möchte Ihre Arbeit sehen. Bitte nehmen Sie sich Zeit damit und zeigen Sie mir Ihr Design. Denken Sie daran, Spaß damit zu haben und überspringen Sie bitte nicht, ohne es zu tun. Vielen Dank. 6. Hier erfährst du, was die Programmierer mit unseren Designs machen: Hallo, hallo und willkommen zu diesem Vortrag, wo ich eine wichtige Frage beantworten möchte. Warum benötigen Codels Designs, die in Adobe XD erstellt wurden? Wie benutzen sie sie? Zunächst einmal öffnen sie die Quelldatei nicht. Und das hast du gehört, richtig? Das ist völlig richtig. Codons müssen Adobe XD nicht installieren und Ihr Design durchlaufen. Sie berühren Ihr Projekt nicht. Das ist der Weg. Das ist es, was einige Leute verwirrt haben. Wenn Codas nicht in die Grafik exportiert werden, warum wird das Design trotzdem benötigt, all diese Schaltflächen und Textebenen werden durch CSS-Code und alle Bilder von einem Server ausgeführt. Warum verschwenden wir dann unsere Zeit, indem wir Dinge in Adobe XD entwerfen? Die Antwort ist einfach. Das Design wirkt wie ein Leitfaden. Es ist eine Blaupause. In gewisser Weise möchten Sie einen Architekten. Wenn Sie ein Gebäude entwerfen, gehen Sie zu extremen Detaillierungsgraden. Das liegt daran, dass jeder Beteiligte das Design genehmigen muss. Der Kunde in die Stadt in Bezug auf die Genehmigungen, aber auch die Bauherren, die Baufirma, richtig? Sicher. Sie wissen, dass sie Beton gießen und Sanitär installieren müssen, aber sie müssen wissen, wo genau wo. Sie müssen alles in unglaublichem Detail wissen. Und ich rede hier Millimeter. Deshalb ist unser Design notwendig. Der Kunde kann das Design überprüfen und sehen, ob es seinen Bedürfnissen entspricht und ob es seine Marke repräsentiert. Die Codons überprüfen auch, ob sie das bauen können. Dies ist ein dringend benötigter Blueprint oder Plan, der gründlich überprüft und diskutiert werden muss , bevor Code zur Arbeit kommt. Basierend auf diesem detaillierten Plan kann der Projektmanager den Codons mitteilen, was zu tun ist, in welcher Reihenfolge und zu welchem Zweck. Ohne Design ist es, als würde man einen Schneider anrufen und ihn um einen Anzug bitten. Okay, vorausgesetzt, das ist ein fantastischer Taylor, kann er mit der Information anfangen, dass du nur einen Anzug willst? Wissen? Natürlich nicht. Er hat nicht genug Informationen. Was ist, wenn Sie sagen, Sie wollen einen lässigen Anzug, wo ein schwarzer Freizeitanzug, wissen Sie was? Lasst es uns hochfahren. Du willst einen schwarzen Casual-Anzug mit einem Slim Fit Bill. Und vielleicht haben Sie erwähnt, dass Ihre 510 Könnte, dass sie liebten einen tollen Job machen? Nein, nicht wirklich. Weil er nicht genug Informationen hat, um weiterzumachen. Du musst dich mit ihm treffen. Er muss präzise Messungen Ihres Körpers machen, zeigen Sie Stoffe, zeigen Ihnen verschiedene Optionen und Entscheidungen und so weiter, ist dieser gesamte Prozess. Backwater Web Design Welt. Hier sind nur zwei Beispiele. Der Klient sagt, er will eine große Schlagzeile, richtig? Nun, was bedeutet groß? Ist das groß oder ist das groß? Nun, wie wär's mit diesem Wert? Wenn Sie es mit diesem anderen Bit Text vergleichen, ist dies tatsächlich größer. Technisch gesehen ist das richtig. Zweites Beispiel, sechs Produkte auf der Homepage, richtig? Sagen wir, das ist es, was er will. Aber wollen Sie, dass die Bilder so gerundet werden? Oder willst du, dass sie wie wir es hier haben? Die Details sind extrem wichtig. Ein tolles Website-Design deckt absolut alles ab, was eine codierte braucht. Die Schriftgröße, das Gewicht, der Farbcode, die Zeile erhöht sich. Also auf dem Hub der Auswirkungen, dass verschiedene Zustände von Belastungen und Menüelemente, der Checkout-Prozess, Pop-up-Fenster und so weiter. Ohne diese Dinge, die Codons, müssen wir alles annähern. Und in den meisten Fällen wird Ihnen das bestenfalls ein mittelmäßiges Design geben. In manchen Situationen erhalten Sie eine schreckliche Website, die nicht so ist, wie Sie sich das vorstellen. Die Wahrheit ist, Codels nehmen all diese Informationen aus dem Design während des Übergabeprozesses, den wir besprechen werden. Kurz gesagt, das ist keine große Schlagzeile. Dies ist eigentlich neu Nieto schwarz, 40 Pixel im Farbcode zu einem 27, 49, Das ist in der horizontalen Mitte des Projekts positioniert, 40 Pixel von der Kopfzeile. Das ist, was der Coder von Ihren Entwürfen nehmen wird. Jedes einzelne Element hier hat viele Eigenschaften und der Codierungsprozess beruht darauf, diese Werte im Arbeitscode neu zu erstellen. Wieder, später im Kurs, werde ich Ihnen alles zeigen. Ich werde Ihnen zeigen, wie Sie alles für den Code vorbereiten. Aber hier sind die wesentlichen Punkte noch einmal, die Codons brauchen keine Adobe XD-Audio-Projektdatei. Sie werden ihnen einen Link geben, der alles enthält, was sie brauchen. Unser Design in Adobe XD ist unglaublich wichtig, weil es alle Details des Projekts zeigt. Nachdem der Kunde das Design genehmigt hat, können die Codons endlich an die Arbeit kommen, aber nicht davor. 7. Übung: Teste deine Fähigkeiten und deine Liebe zum: Hallo und willkommen zu dieser Übung, wo ich hoffe, dass Sie eine gute Zeit haben. Sie haben zwei Aufgaben. Die erste ist, diese Schichten in eine gut aussehende Website zu arrangieren. Nun, ein Teil einer Website. Nun, wie du das machst, liegt ganz bei dir. Wichtig ist, dass Sie die Control-Klick-Technik verwenden , die ich Ihnen in der vorherigen Vorlesung gezeigt habe. Und Sie wollen sicherstellen, dass es schön aussieht. Wenn Sie damit fertig sind, exportieren Sie bitte das Design als PNG und laden Sie es auf die Plattform hoch, damit ich Ihnen mein Feedback geben kann. Dies kann auf verschiedene Arten erfolgen. Der einfachste Weg, um zu exportieren, ist, klicken Sie auf die Art Boards Namen genau hier, wo es sagt Leinwand. Und dann verwenden Sie Control E. Nun, wenn Sie Control E nicht verwenden möchten, gehen Sie bitte zum Hauptmenü. Von hier aus gehen Sie zum Export und verwenden Sie dann Export ausgewählt aus diesem neuen Fenster, wählen Sie PNG und einen Ort, um es zu speichern. Ich schlage vor, dass Sie Ihren Desktop verwenden. Wenn Sie dieses Projekt arrangieren, wird mir ein wenig über Ihr Design I erzählen. Aber Aufgabe Nummer 2 wird Bände darüber sprechen, wo Sie sind und Ihre Karriere. Hier ist, was ich will, dass du tust. Ich habe absichtlich drei Fehler gemacht. Nun, diese Elemente zu erschaffen. Nachdem Sie das PNG hochgeladen haben, sagen Sie mir bitte in einem Kommentar die drei Fehler, die ich absichtlich aufgenommen habe. Mir ist klar, dass für einige von euch das unglaublich einfach sein kann. Für die anderen waren nicht tun Probleme könnte offensichtlich sein, aber die dritte, das könnte schwer zu finden sein, glauben Sie es oder nicht, Lage, kleine Fehler zu erkennen ist einer der wichtigsten Teile in jedem Web-Designer die Fähigkeiten gesetzt. Auch hier ist die beste Nummer 2, drei Fehler zu finden, aber bitte überspringen Sie die Nummer eins nicht, weil das Ihnen helfen könnte, die Änderungen zu finden. Bitte unterbrechen Sie den Kurs und doch die Arbeit, Sie nicht damit fort, denn in der nächsten Vorlesung werde ich Ihnen die fertige Version zeigen. Und ich werde Ihnen zeigen, dass wir Fehler machen, aber so macht es keinen Spaß. Also bitte, bitte hören Sie sofort auf. Probieren Sie es aus. Was ist, wenn Sie es aus irgendeinem Grund nicht tun können, behalten Sie bitte die Lösung, damit Sie die Fehler nicht sehen. Ok? Wenn Sie fertig sind, fahren Sie bitte fort. 8. Lösung der vorherigen Übung: Hey, hier ist Chris. Willkommen zurück. Haben Sie eine Chance , dass Mini-Website zu erstellen und erkennen, dass V Fehler, die ich enthalten. Wenn nicht, bitte Pause jetzt hatte die Leertaste. Andernfalls werde ich Ihnen in den nächsten Sekunden das Ergebnis zeigen und Ihnen die Antworten sagen. Bitte. Abschließende Warnung. Okay, lassen Sie mich Ihnen zeigen, dass beide Aufgaben abgeschlossen sind. Der erste ist ziemlich direkt für das Web. So soll Ihr Design natürlich aussehen, geben oder nehmen. Und hier sind die wesentlichen Punkte. Nummer eins, alle diese Elemente sind links ausgerichtet. Das ist wirklich wichtig. Also links ausgerichtet alles, das Logo, die Überschrift, den Textkörper und die Schaltfläche. Das ist sehr wichtig. Nächste Nummer zwei, das Logo und das Hauptmenü sind vertikal in diesem Rechteck zentriert. Ok, endlich, Nummer 3. Die Lücke auf der linken Seite entspricht der Lücke auf der rechten Seite. Also die gleiche Menge an Platz auf beiden Seiten. Ich verwende das Logo, um den Abstand auf dieser Seite zu messen, indem ich die Steuerungstaste gedrückt halte Diese rosa Linien werden angezeigt und diese werden als intelligente Guides bezeichnet. Sie sagen mir, dass Distanz und Pexels hier, das sind 130. Also 130 Pixel. Ich bin unterwegs, übrigens, auf der anderen Seite, werde ich das Hauptmenü als Bezugspunkt verwenden. Und wieder, ich bekomme 130. Der Wert selbst ist nicht wichtig. Stattdessen ist es wichtig, dass Sie die gleiche Nummer auf beiden Seiten haben. Also insgesamt, das ist das Design, aber was ist mit den Fehlern? Die zweite Aufgabe, die drei Fehler, richtig? Okay, Die erste ist die Tatsache, dass mehr herausfinden, ist nicht die vertikal zentrierte innerhalb der Taste. Wenn Sie mit der Strg-Taste und der Maus vergrößern, scrollen Sie und konzentrieren Sie sich wirklich darauf. Ich denke, du könntest den Fehler erkennen. Es ist ein bisschen auffälliger. Okay, jetzt werde ich mit Control 1 verkleinern, damit ich den zweiten Fehler aufdecken kann. Das ist die Menge an Platz in diesem Absatz, ist jedoch nicht so offensichtlich wie der erste Fehler. Sie können sehen, dass dies nicht sehr erfreulich zu betrachten ist. Es ist eigentlich schwer zu lesen, weil der Text zu kondensiert, zu kompakt, zu nah beieinander ist. Und das ist eigentlich ein sehr häufiges Problem bei Anfängern, sowohl Designern als auch Codons, als diese spezielle Einstellung auf der Standardstufe zu belassen. Und das macht den Text schwer zu lesen. Verwenden Sie nicht die Standardstufe. Wir werden im Kurs darüber reden. Wieder, es ist kein großer Fehler. Aber es ist, als würde man Ketchup auf ein teures Stück Steak setzen. Im Allgemeinen machst du das nicht. Nun zum letzten Fehler, Nummer 3, ist das etwas schwieriger zu erkennen. Meine Vermutung ist, dass die meisten Leute es übersehen werden. Das Problem ist mit dem Hauptmenü, der Abstand zwischen den letzten beiden Elementen ist nicht gleich. Es ist nicht das Gleiche. Eigentlich. Es sind genau zwei Weltraumbindungen, die hinter all den anderen liegen. Hier erfahren Sie, wie Sie es testen können. Lassen Sie mich mich darauf konzentrieren. Ich werde die getippte Welt aktivieren, indem ich D. Jetzt werde ich hier klicken. Während Sie die Umschalttaste gedrückt halten, tippe ich mehrmals auf die Nach-rechts-Taste, damit ich die Anzahl der Leerzeichen zwischen diesen beiden zählen kann . Und das ist 1, 2, 3, 4, 5, 6, 7. Es gibt also eine Lücke von sieben leeren Räumen. Ich werde dich nicht langweilen, wenn ich die anderen überprüft habe. Stattdessen werde ich dies tun, was viel schneller ist. Ich werde es mit Control C kopieren, dieses leere Feld hier. Du musst übrigens nicht mitverfolgen, einfach zuschauen und zuhören. Als nächstes werde ich die nächste Lücke so auswählen. Wenn ich jetzt einfüge, sich diese Textebene ändern, wenn es irgendeine Rücksicht solltesich diese Textebene ändern, wenn es irgendeine Rücksichtgibt. Aber wenn ich sie einfüge, passiert nichts, dann ist die Entfernung identisch. Also lasst uns Control V drücken und es ausprobieren. Und ja, es gibt keine Veränderung. Lasst uns das nächste machen. Wählen Sie diesen leeren Raum und basiert mit Control V. Wieder, keine Änderung. Das heißt also, es ist das Gleiche. Jetzt zum letzten. Ja, es hat sich bewegt. Haben Sie bemerkt, wenn nicht weniger, manuell gezählt? Also, das ist 12345. Also fünf Leerzeichen gegen sieben in diesen anderen Fällen. Und damit sind das die drei Fehler, die ich absichtlich eingeschlossen habe. Du hast übrigens nicht die richtigen sie selbst, also mach dir bitte keine Sorgen darüber. Lassen Sie es einfach für jetzt. Nur damit ich dich nicht hängen lasse. Hier ist die richtige Version. Die korrigierte gibt das Vorher und Nachher, so dass Sie sie leicht vergleichen können. Merkst du die Änderungen? Nun, wieder, Ihre Reaktion auf diese kleinen Dinge, diese kleinen Unvollkommenheiten ist wirklich wichtig. Wenn Sie nicht denken, dass diese kleinen Details im Webdesign wichtig sind, dann ist dies vielleicht nicht die richtigen Zitate für Sie, und vielleicht ist Webdesign nicht für Sie. Und das liegt daran, dass jeder anständige Designer sehr genau auf seine Arbeit achten muss und richtig mit Pixel perfekter Präzision ausgeführt wird. Mehr dazu ein bisschen später. Aber vorerst würde ich gerne hören, was Sie über diese Fehler denken. Glaubst du, sie sollten gesichtet und korrigiert werden? Was war das Design gut genug, wie es vorher war. Bitte lassen Sie mich im Kommentarbereich, im Abschnitt „Fragen und Antworten“ oder auf dem Discord Server wissen , ob Sie mich am häufigsten finden können. Vielen Dank. 9. Die drei Taschen, um ein tolles Webdesigner zu sein: Willkommen zu diesem Vortrag, wo ich die Grundlagen des Kurses, die drei Säulen eines großartigen Webdesigners, enthüllen werde . Dies sind die folgenden in dieser Reihenfolge. Nummer eins, Pixel perfekte Ausführungsnummer, um die Bedürfnisse des Kunden zu verstehen. Und Nummer 3, Liebe zum Detail. Dies sind die Dinge, die Sie meistern müssen , wenn Sie wirklich Ihren Lebensunterhalt als Webdesigner verdienen wollen. Eigentlich ist jede Art von UI-Arbeit auf diesen drei Komponenten angewiesen. Zuerst lassen Sie mich sie definieren. Also erinnere dich an die perfekte Ausführung eines Pixels. Dies ist, was wir gerade in der vorherigen Übung erlebt haben. Der Text und die Belastung wurden versetzt. Es hatte 29 Pixel oben und nur 24 unten. In der richtigen Version ist der Abstand auf beiden Achsen gleich, 27 Pixel vertikal und 69 Pixel horizontal. Die Lücke auf beiden Seiten des Designs entspricht hier wieder dem Abstand Gehör, wieder gleich der linken Ausrichtung dieser vier Schichten. Perfekt. So funktioniert ein Webdesigner. Präzision ist der Schlüssel, während ich nicht vorschlage, dass Sie von jedem einzelnen Pixel besessen werden, dies ist das allererste, woran Sie arbeiten und anschließend gemeistert werden müssen. Ein großartiger Web-Designer scannt immer mit Unvollkommenheiten in Bezug auf die Ausführung, Ihr Geist wird sich an diese neue Art des Denkens anpassen. Wenn Sie es praktizieren, werde ich meinen Prozess beschreiben und Ihnen viele Tipps und Techniken in einem separaten Kapitel geben. Aber wissen Sie, dass ich sofort imaginäre Linien in meinem Kopf kreiere, wenn ich ein Design sehe. Zuerst suche ich nach zwei großen vertikalen Linien, die die Grenze des Designs sagten. Dies wird als aktiver Bereich bezeichnet und muss mit Genauigkeit eingestellt werden. Jede anständige Website wird gut etablierte haben. Sehen Sie, wie alles auf beiden Seiten richtig aufgereiht ist. Dies ist, was Sie überprüfen möchten, aber das ist nur ein Schritt und Abstand ist nicht alles. Paul Kontrast ist eine andere Sache. Hier sind ein paar Beispiele. In meinem Buch. Dies ist ein weiterer Ausführungsfehler. Das Design von konnte die entsprechenden Farben nicht auswählen. Nun, hier ist noch eine, die mit Kontrast verwandt ist. Das Foto ist viel zu beschäftigt, um andere Texte drauf zu haben. Diese können auch als Anfängerfehler bezeichnet werden, aber ich verwende meine Terminologie gerne besser, weil sie beschreibender ist. Zusammenfassend ist die erste, die erste Säule eines großen Web-Designers, die eigentliche Grundlage die Fähigkeit, ein Design ohne Ausführungsfehler auszuführen. Dies impliziert ein gutes Verständnis von Photoshop, was Ihr Design-Programm der Wahl. Wenn Sie nicht wissen, wie Sie es richtig verwenden, verwenden Sie Hilfslinien, intelligente Hilfslinien, Raster, die Ausrichtungswerkzeuge, gruppieren Sie Dinge zusammen und so weiter. Dann können Sie nicht fortfahren, ist wie zu versuchen, ein Baumeister zu werden. Was Sie nicht wissen, wie man einen Hammer hält oder versucht, ein Kämpfer zu werden, aber Sie wissen nicht, wie man einen Schlag wirft. Sie sollten mich nicht um Rat oder jemand anderes für diese Angelegenheit bezüglich Ihrer Entwürfe bitten, es sei denn, Sie haben das herausgefunden. Wenn Sie keine Ausführungsfehler haben, buchstäblich 0 Fehler. Nur dann können Sie sich auf die beiden anderen Säulen konzentrieren. Ich weiß, das klingt beängstigend, aber wenn Sie meinen Kursen folgen, habe ich Ihnen gezeigt, dass Sie keine auffälligen Fehler machen werden. Nummer, um die Bedürfnisse des Kunden zu verstehen. Ich werde das kurz halten, indem ich Ihnen einen klaren Fall zeige. Stellen Sie sich vor, ein Kunde einmal eine Website für sein Gesundheitszentrum, oder? Also hat dieses Geschäft Personal Trainer, Fitnessgeräte, das Yoga-Studio oder Crossbite da noch funktioniert richtig? Welches der folgenden Designs ist am besten? Ist es das hier? Werfen Sie einen kurzen Blick darauf. Der erste Eindruck ist, was am wichtigsten ist. Wie wär's mit dem hier? Ist das besser? Ich werde die Links nur für Fall 1 einschließen. Ich habe sie erforscht. Ok, endlich das letzte. Also frage ich Sie noch einmal, welches Design am besten ist? Die Frage an sich ist das Problem. Du sollst sie nicht nach deinem Geschmack beurteilen. Dies sind radikal unterschiedliche Vibes. Zum Beispiel ist dieser völlig harter Kern. Dies ist für Bodybuilder, für Fleischköpfe, die gerne Gewichte zuschlagen. Es ist dunkel, ernst und es wird sicherlich eine bestimmte Gruppe von Menschen anziehen, 95 Prozent von ihnen sind Männer, wahrscheinlich mit früheren Jim-Erfahrungen. Aber dieser andere ist das völlige Gegenteil. Es ist, als wäre es einladend, es macht Spaß, es ist freundlich und es wird Leute anziehen, normale Leute, Männer und Frauen, die wahrscheinlich noch nie im Fitnessstudio gewesen sind. Sie könnten von genau diesen Arten von Menschen im anderen Design Angst oder eingeschüchtert sein. So wollen sie wahrscheinlich diese Arten von Fitnessstudios vermeiden. Andererseits ist dies auf Yoga spezialisiert. Es ist elegant und attraktiv sollte, aber es wird vor allem Frauen anziehen, die für das High-End-Yoga-Studio suchen. Es wird sicherlich gut mit dieser Zielgruppe konvertieren. Aber Bodybuilder und unregelmäßige Menschen würden es wahrscheinlich vermeiden. Sie sehen also, es geht nicht darum, welches Design am besten ist. Es stellt tatsächlich sicher, dass Sie die Bedürfnisse des Kunden verstehen. Er ist derjenige, der dir seine Zielgruppe sagen soll. Was ich die Website zur Verfügung stellen soll und so weiter. Wenn Sie alle diese Informationen haben, können Sie nur dann beginnen, verschiedene Designs zu beurteilen, die nach den spezifischen Bedürfnissen des Kunden erstellt werden . Wieder haben wir ein ganzes Kapitel zu diesem Thema, aber das ist die Idee in ein paar Worten. Schließlich ist die dritte und letzte Säule Liebe zum Detail. Wenn diese beiden anderen Dinge behandelt werden, Es ist Zeit, das Design zu erhöhen, indem es eine Menge Liebe zeigt. Dieser Weg ist weniger unkompliziert, aber lassen Sie mich Ihnen einige Beispiele zeigen. Der Unterschied zwischen dieser Art von Design und dieser ist die Menge an Liebe zum Detail, die jeder Komponente gegeben wird. Sie denken vielleicht, Oh, es sind die schönen Grafiken, die Illustrationen, Schriftarten und Symbole. Und ja, du hast recht. Diese brauchen Zeit, Energie und viel Aufwand. Auch wenn Sie nicht alles von Grund auf neu erstellen. Dies ist das Zeichen eines Designers, der etwas Besonderes, etwas anderes erschaffen möchte. Liebe zum Detail zu stehen ist der Schlüssel, denn alles muss zusammenarbeiten. Alles ist in Melodie und es singt das gleiche Lied. Jedes Element, jede Farbe, jede Schriftart wird sorgfältig ausgewählt, um alle anderen zu überladen. Es sind Synergie-Sites, die nicht genug Liebe zum Detail gegeben haben. Wir werden fad, langweilig oder besser gesagt, vergesslich aussehen . Wenn Sie also eine Website präsentieren, die das Leben mag, aber sie ist perfekt ausgeführt und es passt zu den Bedürfnissen des Kunden. Es könnte eine Sechs der Sieben von 10 sein. Gut, nicht großartig. Wenn Sie Ihr Spiel erhöhen möchten, ist dies die Art der Sache, die Sie tun müssen, arbeiten Sie mehr an jeder einzelnen Sache. Das ist die dritte Säule des Erfolgs im Web Design. Und das ist eigentlich der ganze Kurs. Das ist es, was ich vorhabe, Sie und mehrere Kapitel in kleinen Blöcken nacheinander beizubringen. Ich bin wirklich aufgeregt, weil ich dieses Feld geliebt habe und hoffentlich meine Leidenschaft mit Ihnen auf produktive Weise teilen kann. Ich weiß, dass Sie Fragen haben, aber bitte beobachten Sie den Kurs weiter, da sich alles zu gegebener Zeit allmählich entfalten wird. 10. Die wichtigste Frage, wenn du ein neues Projekt anfängst.: Hallo und herzlich willkommen zu unserem ersten Webdesign-Projekt von Anfang bis Ende. Hier ist die Aufgabe, die wir brauchen, um diese Website neu zu gestalten. Das ist mein eigenes Geschäft. Die Website Zellen gesunde Snacks in meinem eigenen Land, Rumänien, hier ist die wichtigste Frage beim Start eines Projekts, vor allem eine Neugestaltung. Was ist das Ziel des Unternehmens? Wieder, was ist das Ziel des Unternehmens? Wenn Sie sich erinnern, ist dies der zweite Schlüssel, um ein großartiger Webdesigner zu werden. Also, was bedeutet dieses Geschäft eines der, was sind ihre Ziele in diesem Fall, Ich bin glücklich, sowohl der Kunde und der Designer zu sein, so dass ich alles im Detail erklären kann. Deshalb habe ich mich für dieses Projekt entschieden. Aber Sie müssen mit dieser Frage beginnen, ohne eine Antwort. Du kriegst die Arbeit nicht. Sie könnten es auf der Grundlage Ihres eigenen Geschmacks und Ihrer Ideen verbessern. Aber denken Sie daran, die Fitness-Website, mehrere Versionen, alles schöne Wetter. Wenn Sie nicht wissen, was der Kunde will, was sind seine Ziele, dann ist alles umsonst. diesem Grund sollten Sie nichts entwerfen, bis Sie eine Antwort erhalten. Was ist das Ziel des Unternehmens? Was will es erreichen? Und hier ist der Prozess. Diese Website möchte uns Produkte verkaufen. Das ist offensichtlich, oder? Aber lasst uns tiefer gehen. Wer ist die Zielgruppe? Menschen in Rumänien? Weil es nicht international ausgeliefert wird. Ok, Cool. Aber alle Menschen in Rumänien ist das jemand besonders? Ist es für Kinder? Ist es für Menschen, die abnehmen wollen? Ist es für Männer, die ausgearbeitet haben? Das sind alles Fragen, die Sie stellen sollten. Der Kunde hat möglicherweise keine Antworten auf all diese Fragen, aber er kann sie über Google Analytics finden, zum Beispiel, bat ihn nur um Zugang und Sie werden ein besseres Gefühl der Dinge in diesem Video bekommen, ich werde nur konzentrieren sich auf ein paar Dinge. Wenn wir zu Publikum, Demografie und dann Geschlecht gehen , können wir sehen, dass etwa 80 Prozent der Besucher die Frauen sind. Das ist extrem wichtig für eine Neugestaltung. Wenn wir das Alter überprüfen, werden wir sehen, dass wir es nicht mit einem jüngeren Publikum zu tun haben. Also brauchen wir nicht etwas, das sehr modern oder mutig, aufregend, zukunftsweisend sein wird. Endlich noch eine letzte Sache. Wenn wir uns die Geräte des Besuchers ansehen, können wir sehen, dass Mobilgeräte 90% der Besucher sind. Die meisten Leute sind also auf ihren Telefonen. Aber eine kleine Sache, nicht zu Schlussfolgerungen springen, weil Desktop, während es nur 10 Prozent des Verkehrs, es erzeugt, was die 5% des Umsatzes, während so 10 Prozent macht 45% des Geschäfts. Das ist riesig. Machen wir einen kurzen Rückblick. Wir haben es mit einer Website zu tun, die gesunde Ernährung an Frauen verkauft, die 25 und älter sind, hauptsächlich auf ihren Telefonen. Aber diejenigen, die den Computer viel mehr benutzen als diejenigen, die ihre Telefone benutzen. Okay, das ist also das Bild. Lassen Sie uns nun einen Blick auf die bestehende Website werfen. Dies ist die Homepage. Ist es etwas, das Frauen anzieht? Erinnern Sie sich, 80 Prozent Frauen, richtig? Nun, lassen Sie uns die Dinge analysieren und sehen, was wir finden und was wir verbessern können. Darauf basiert, werden wir unser Redesign planen. Die quadratischen Kanten sind in erster Linie ein bisschen männlich, oder? Diese dunkle dicke Linie aus dem Kategorie-Menü ist auch scharf und maskulin. Die Hauptüberschrift, na ja, dieser Titel ist verspielt, aber es ist ein bisschen zu klobig, ein bisschen zu abgerundet. Und ich denke, es ist mehr für Kinder als für Frauen. In Bezug auf den Hintergrund, Es ist ein ziemlich kalter Grauton. Das Formular für die Beschreibung. Nun, es ist eine Serifenschrift. Es sieht nicht schlecht aus, aber ich kann nicht sehen, dass es auch als attraktiv für Frauen angesehen werden kann. Genau so haben wir noch ein paar Punkte vor uns. Dieses Design scheint nicht für die Frauen gemacht zu sein. Es geht eigentlich eher um Männer. Also lasst uns einen Moment innehalten. Du fragst vielleicht, Hey Chris, weißt du was, ich habe keine Ahnung, welches du ein feminines Design siehst. Ein maskulines Design. Wie kannst du das sagen? Ok, Sicher. Lassen Sie mich das klären. Lassen Sie uns Google Images öffnen und nach Deodorant für Männer suchen. Und in einer anderen Registerkarte, öffnen Sie bitte Deodorant für Frauen. Der Unterschied ist Nacht und Tag. Designs, die für Männer gemacht werden, sind hart, sie sind kalt, sie haben intensive, starke Farben. Maximaler Kontrast. Die Schriftarten sind gemeißelt. Sie sind gut definiert, Bolden, mächtig. Aber auf der anderen Seite sind Designs für die Frauen viel leichter. Sehen Sie, wie viel Weiß es gibt. Die Farben sind auch weicher. Wir können Pastellfarben mit sehr ausgewaschenen Farben sehen, nichts, was zu intensiv ist. Wir haben fließende Formen, Kurven. Wir sehen nicht viele scharfe Linien oder Winkel. Wir sehen hier einen Fade Away Gradient. Und wir könnten weiter und weiter über die Unterschiede gehen. So trennen Sie diese beiden Designstile, männlich und feminin. Zurück zu dieser spezifischen Website. Am besten könnte man sagen, dass dies neutral ist. Es ist nicht für Männer nichts für die Frauen. So oder so, das ist ein Problem, und es ist etwas, das wir beheben müssen. Schließlich sind die Produkte ziemlich teuer. Aus diesem Grund müssen wir ein bisschen Stil und Luxus in das Design einbeziehen. Wir müssen es sich gehobener, preiswerter fühlen . Versteh mich nicht falsch. Es ist nicht High-End, aber es gibt auch nicht billig. Vor diesem Hintergrund können wir folgendes schließen. Redesign ist notwendig, weil die Website nicht die Zielgruppe anzieht, und das sind Frauen in ihren dreißiger Jahren mit Kaufkraft, wir müssen sicherstellen, dass wir etwas, das feminin und gehobenes Design. Aber bitte beachten Sie, dass wir Männer nicht ausschließen wollen. Also machen wir keine Website, die zu mädchenhaft ist. Das wäre auch ein Fehler, denn wieder ist der Verkehr 80 Prozent Frauen. Sicher. Aber wir wollen, dass es etwa 60 Prozent weiblich ist, vielleicht höchstens 70 Prozent. Wir werden also nicht übertreiben mit Bank und Blumen und so, weil das Geschäft auch an Männer verkaufen will. Sie will sie nicht ausschließen. Aber die insgesamt beste, die wichtigste Frage beantwortet, wir verstehen jetzt das Ziel dieses Geschäfts und wie wir es ansprechen können, wie wir dem Unternehmen helfen können. Kurz, keine scharfen Kanten mehr, dicke Linien oder kalte Elemente. Wir müssen es freundlicher und mehr gegenüber Frauen machen. Damit wir verstanden haben, können wir fortfahren. 11. Wie du Inspiration für dein Projekt erstellst, und die Inspiration für dein Projekt findest.: Hallo, hallo und willkommen zurück. Wir wissen, dass wir diese Website neu gestalten müssen, damit sie sich weiblicher und luxuriöser anfühlt. Der nächste Schritt ist, Inspiration zu finden. Um Designs anzuzeigen, die zu dieser Beschreibung passen. Inspiration zu finden ist sehr zeitaufwendig. Sie müssen sich 2050, 100 Websites ansehen, bis Sie zwei oder drei finden, die für Ihr Projekt sinnvoll sind. Ich habe bereits drei Websites ausgewählt, die uns bei der Neugestaltung helfen können. Der erste ist net up, was sie annehmen com, Ich bin mir nicht sicher, dass das ist, wie Sie es aussprechen, aber trotzdem ist dies ein berühmter Online-Shop, der sehr teure Kleidung verkauft. Wenn man es anschaut, findet man nichts zu feminines DO oder irgendetwas, was sich in Bezug auf Design abhebt. Es ist eigentlich ziemlich einfach und das ist beabsichtigt. Tötet eine Frage. Wer kauft ein zweitausend $ Kleid oder die hundert, zehnhundert reiche Leute, die sich befinden? Das ist ziemlich offensichtlich. Aber dann ist hier die nächste Frage. Was sind reiche Leute gewohnt? Wie zu ihren Häusern aussehen? Sind sie dunkel und überfüllt? Wissen Sie, es gibt viel Sonnenlicht und Freiraum. Sie sind verwendet, um Marmor und Granit Edelstahl-Geräte und so weiter. Deshalb haben Luxus-Websites ein gewisses Aussehen. Hier sind die wenigen anderen Websites mit sehr teurer Kleidung als auch. Sie sehen alle ungefähr gleich aus. Schwarz, Grau und viel und viel Weiß. Einfache Schriftarten, keine Farbe zu sprechen, außer für die Produkte selbst. Sie mögen diese Websites vielleicht nicht. Und ich verstehe das, aber so sieht Luxus aus. Nun gehen wir zu einer anderen Website über. Dieses Mal ist es etwas aus meinem eigenen Land und es ist mit Lebensmitteln verbunden. Diese Typen verkaufen fantastische Eclair. Diese Französisch Suiten sind offensichtlich schöne Fahrt. Aber sieh dir das Design an. Viel Schwarz, viel Weiß in Pfirsich, Rosa hier und da. Nur ein winziges bisschen Schmerz. Es ist ein schlichtes Design ohne zu viele Dekorationen. Die Produkte der Stars der Show, sie zeichnen sich aus und sie sehen unglaublich aus. Beachten Sie, dass es auch nicht viel Text gibt. Das ist eine schicke Schrift hier. Nicht viel davon übrigens, aber Sie können es ohne Probleme lesen. Und es sieht gut aus auf diesem reinweißen Hintergrund. Die letzte Website, die mich inspiriert hat, ist Zyban.com. Ich liebe es, wie sauber das ist. Sollte die Abbildung groß sein, aber werfen Sie einen Blick auf das Hauptmenü zu horizontalen Linien mit einer geringen Deckkraft. Ein cooles Symbol für den Logan-Bereich, das es als 4 auffallen hilft. Die Hauptsache, die Sie tun müssen, ist ziemlich offensichtlich. Klicken Sie auf und, oder vielleicht diese natürlich, die Farbe macht es so sehr abheben, weil alles andere so einfach für das Auge ist. ein bisschen nach unten gehen, können wir das Gleiche sehen wie bei der Französischen Revolution. Dadurch sieht das weiße Rechteck fantastisch aus. Ich liebe es absolut. Und der weiche Schatten hier ist auch ausgezeichnet. Es macht diesen Bereich auffällig. Sicher, dass sie Illustrationen, Ich werde auch nett, aber es ist nicht etwas, das ich auf der Verwendung planen. Schließlich ist die Fußzeile am Ende des Designs reinweiß. Die Schriftarten sind schön und klein. Die Titel von in dieser schönen Farbe gezeigt. Es ist elegant, es ist gehobener Stil, es ist feminin Overall. Es ist wunderschön. Jetzt diese fünf Minuten zu präsentieren. Aber ich habe mindestens eine Stunde damit verbracht, nach diesen Websites zu suchen. Bitte beeilen Sie sich nicht. Sie müssen feststellen, dass mindestens zwei Websites für Inspiration, aber nicht mehr als vier oder fünf. So war die Schlussfolgerung hier. Nun, ich weiß, ich werde viel Weiß verwenden, eine schöne rosa Farbe für den Hintergrund, etwas sehr Weiches, eine schicke Schrift, aber in einer minimalen Dosis, nicht zu viel davon. Schöne Produktfotos wie in French Revolution. Und die starke Farbe für die Knöpfe. Wahrscheinlich reines Schwarz für das Hauptmenü oder Header. Ein einfaches Weiß oder vielleicht ein einfaches Schwarz weiter, alle Kappen mit den Hauptmenüs oder den Tasten. Das sind alles Ideen. Ich kann sie alle machen, oder vielleicht nur eine Handvoll von ihnen. Aber ich habe einen schönen Ausgangspunkt. Das ist es, was Inspiration Ihnen gibt. Es gibt dir eine Richtung. Wir wollen kein Design kopieren, auch wenn wir eine Website gefunden haben, die genau das gleiche Produkt verkauft hat, nein, wir wollen kein Design stehlen. Aber mit reinem Schwarz ist das völlig in Ordnung. Verwenden einer hellrosa Farbe für den Hintergrund. Wieder, das ist völlig in Ordnung. Das ist kein Diebstahl. Sie müssen sicherstellen, dass Sie eine klare Trennung zwischen Inspiration machen , um etwas zu stehlen. Aber nochmal, bitte hetzen Sie es nicht. Finden Sie Inspiration, bevor Sie an die Arbeit gehen. 12. Den wichtigsten Teil des Layouts einrichten: Hallo, hallo. Beginnen wir mit Adobe XD, indem wir ein neues Webprojekt erstellen, 1920 x 1080. Bitte beachten Sie, dass es sehr oft Änderungen geben wird. Es wird alle paar Wochen aktualisiert. Also, wenn Ihre Schnittstelle ein bisschen anders ist, Sie sich keine Sorgen, Sie können immer noch folgen. Nun, was ich möchte, dass Sie tun, ist auf dieses Symbol unten links klicken , das das Ebenenfenster öffnet. Wenn Sie es nicht finden können, können Sie auch die Tastenkombination Y verwenden. Also das ist Control Y, das öffnet oder schließt es. Okay, als nächstes müssen wir einrichten oder aktiven Bereich, der wichtigste Teil des Layouts. Der aktive Bereich ist der Ort, an dem wir alle unsere Inhalte hinzufügen müssen. Ich empfehle immer, dafür 1200 Pixel zu verwenden. Gut. Das Rechteck-Werkzeug, das zweite aus der Liste, Hotkey sind oder wie in Rechteck, klicken und ziehen Sie eine beliebige Form auf der rechten Seite. In diesem Eigenschaftenfenster erfahren Sie alles, was wir über jede ausgewählte Ebene benötigen. Da das Rechteck derzeit ausgewählt ist, haben wir alle Arten von Informationen über seine Breite, Höhe, Farbe usw. Alles in diesem Teil des Bildschirms wollen wir es 1200 Pixel breit. Bitte klicken Sie hier w für die Breite und geben Sie diese Zahl ein. Die Höhe ist wirklich nicht so wichtig, weil wir sie später ändern werden. Nächste ändert die Farbe, indem Sie hier neben zu füllen klicken. Im Moment ist es weiß, also ist es ein bisschen schwer zu sehen. Mein Rat ist, dass Sie einen beliebigen Grauton wählen und wenn Sie glücklich sind, drücken Sie einfach die Escape-Taste, um dieses Panel zu schließen. Okay, noch eine Sache mit diesem Rechteck. Bitte zentrieren Sie es waagerecht. Dies geschieht, indem Sie dieses Symbol hier verwenden. Und ich denke, die Ikone selbst erzählt die Geschichte wirklich gut. Wenn Sie also die Form oben auf dem Bildschirm verschieben möchten, würden wir diese verwenden. Graues Zeug. Wenn wir es links ausrichten wollen, ist es dieser hier. Mein Rat, zögern Sie nicht, mit ihnen zu spielen. Sie sind leicht zu verstehen, sobald Sie sie ausprobiert haben. Okay, ich werde es wieder zentrieren, damit wir unseren aktiven Bereich einrichten können. Klicken Sie jetzt bitte hier und erhalten Sie das Auswahlwerkzeug oder das Verschiebenwerkzeug, wenn Sie aus Photoshop kommen, ist der erste aus der Liste, Hotkey VI. Ok. Bitte bewegen Sie sich nun an den Rand der Leinwand und Sie sollten dieses Symbol sehen. Bitte werfen Sie einen Blick auf den Cursor, sehen Sie sich schwere Änderungen an. Klicken und ziehen Sie nun. Dies wird die Führung genannt, diese vertikale Linie. Dies ist ein Leitfaden und es wird uns helfen, alles richtig zu positionieren. Ziehen Sie es so, dass es den linken Rand dieses Shapes berührt und ziehen Sie dann eine andere von der Seite für die rechte Kante. Nun, es kann eine Situation geben, in der Sie es nicht tun können. Lassen Sie mich Ihnen diese Situation zeigen. Ich werde meine Guides deaktivieren, damit ich Ihnen zeigen kann, wie Sie es beheben können. Im Moment passiert nichts, wenn ich diesen Teil überziehe, oder? Wenn dies der Fall ist, dann gehen Sie bitte zum oberen Menü, um zu sehen. Wechseln Sie von hier aus zu Guides und wählen Sie dann Alle Hilfslinien anzeigen aus. Wenn Sie sich jetzt an die Kante bewegen, sind Sie die Kurve, so dass sich die Aufnahme ändern und Sie können folgen. Okay, zurück zu ihm. Dies ist unser aktiver Bereich und ist das Wichtigste in diesem Layout. Und hier ist der Grund. Alle Websites haben einen bestimmten aktiven Bereich, in dem der gesamte Inhalt platziert wird. Zum Beispiel, hier ist die New York Times. Sie können eine sehr gut definierte Linie auf beiden Seiten sehen. Und werfen wir einen Blick auf ein anderes, cnn.com, nur ein zufälliges Beispiel. Wieder wirst du das Gleiche finden. Es gibt eine klare vertikale Linie auf beiden Seiten. Um fair zu sein, ist der aktive Bereich in beiden Fällen breiter als 1200 Pixel. Und das liegt vor allem daran, dass diese Websites viele Informationen enthalten. Aber mein Rat, ich empfehle dringend, dass Sie nur 1200 Pixel verwenden. Und das liegt daran, dass die am zweithäufigsten verwendete Bildschirmauflösung 1366 mal 768 ist. Und das bedeutet nur, dass Menschen auf Laptops, die diese niedrigere Auflösung verwenden , den gesamten Inhalt ohne Probleme sehen können. Wenn Sie 1200 im Web verwenden, werden Sie Websites finden, die sehr breit sind, sogar 1600 Pixel breit, vielleicht sogar noch mehr, oder die sehr schmale, wie 960. Aber wieder, mein Rat ist, dass Sie immer 12,8 Pixel verwenden. Was die aktive Fläche und 1924, die Gesamtbreite der Leinwand. Und damit machen wir weiter. 13. Gestalte die obere Balken: Hallo und willkommen zurück. Die obere Leiste ist der obere Teil des Designs, das sich knapp über dem Hauptmenü und dem Logo befindet. Es ist nicht auf allen Websites zu finden, aber es ist eine gute Möglichkeit, eine Telefonnummer, einige Social-Media-Symbole, eine Adresse oder den Standortplan zu zeigen einige Social-Media-Symbole, . Bevor wir arbeiten, bitte tun Sie das. sich zuerst das Video an, ohne mitzuarbeiten. Schauen Sie einfach zu und sehen, was los ist. Wenn Sie zum Ende des Videos gelangen, spulen Sie von Anfang an zurück, öffnen Sie Adobe XD und arbeiten Sie mit mir zusammen, indem Sie so oft wie nötig anhalten. Dies ist der beste Weg, um den Kurs zu genießen und das Beste aus ihm herauszuholen. Wieder, schauen Sie sich das Video 2 mal an und arbeiten Sie mit mir an Ihrer zweiten Betrachtung. Vielen Dank. Beginnen wir also damit, die Breite dieses Rechtecks auf 1920 zu erhöhen und es zu zentrieren. Denken Sie daran, dass wir innerhalb dieser beiden Führungen bleiben müssen, diese beiden vertikalen Linien. Dies gilt jedoch für tatsächliche Inhalte, bei denen nichts Wichtiges außerhalb dieser Leitfäden platziert wird. Also ist es in Ordnung, ein so breites Rechteck zu haben. Als nächstes werde ich ein wenig kopieren einfügen und einige Inhalte von der alten Website geben. Sie können die automatische Übersetzung von Google verwenden, um den Inhalt besser zu verstehen. Führen Sie einfach eine schnelle Suche auf Google durch oder verwenden Sie den Text, den Sie wollen. Mein Rat ist, dass Sie drei verschiedene Textebenen verwenden. Das ist also ziemlich wichtig, drei verschiedene. Nun wissen wir, dass wir ein reines schwarzes Menü verwenden wollen, ähnlich wie diese High-End-Mode-Websites. Aber die Frage ist, verwenden wir das Schwarz mit der oberen Leiste oder dem Hauptmenü, das unter diesem Element platziert wird. Um das zu entscheiden, müssen wir unsere Dimensionierung einrichten. Die oberen Balken sind in der Regel sehr klein, von 20 bis etwa 50 Pixel. Also lasst uns das machen. Bitte wählen Sie das Rechteck aus und ändern Sie seine Höhe in 40. Der nächste Schritt besteht darin, es rein schwarz zu machen und den grauen Rand zu deaktivieren. Dies geschieht, indem Sie dieses Kontrollkästchen deaktivieren. Okay, tolles Zeug für die Textebene. Machen Sie sie am wenigsten rein weiß. Die gute Zeit damit. Du musst nicht überstürzen. Wenn das erledigt ist. Bitte wählen Sie alle vier Elemente aus, indem Sie die große Box wie dieses herausziehen. Stellen Sie sicher, dass Sie das erste Werkzeug im Ebenenbedienfeld ausgewählt haben , um Ihnen mitzuteilen, ob Sie sie alle erhalten haben. Okay, schließlich zentrierte sie vertikal, indem Sie diesen Knopf verwenden, Mitte ag vertikal ausrichten. Ich liebte die Hotkey, es ist verschieben sie, aber jetzt werde ich dieses Symbol verwenden. Okay, wir haben einen guten Fortschritt gemacht, aber ich möchte, dass Sie einige Symbole für jedes Element hinzufügen. Tolle Symbole im Web zu finden, ist eigentlich aus zwei Gründen ein bisschen knifflig. Nummer 1, die besten Arten von Symbolen ist nicht kostenlos. Und das ist flach icon.com und das erfordert ein Abonnement. Es ist nicht so teuer, aber es ist nicht, dass sie da ist. Es tut mir leid zu sagen, dass es keine ähnliche Website gibt, die völlig kostenlos ist. Das ist also ein Teil des Problems. Das zweite Problem ist, dass Sie sehr geduldig sein müssen, wenn Sie Symbole auswählen. Zuallererst sollten Sie niemals Symbole aus verschiedenen Sets mit verschiedenen Stilen mischen. Mein Rat ist, dass Sie sich hier auf der linken Seite konzentrieren und Packs aus diesem Drop-down-Menü auswählen. Suchen Sie jetzt nach sozialen Medien und Sie werden viele Packs in allen Arten von Stilen sehen. Aber bitte beachten Sie, dass einige nur vielleicht 16 Symbole haben, die 48 haben können. Und das ist das Problem, denn wenn Sie anfangen, ein Symbol von diesem Rücken mit einem anderen aus dieser Taschezu kombinieren ein Symbol von diesem Rücken mit einem anderen aus dieser Tasche , wird wirklich schlecht aussehen , wird schrecklich sein. Also nochmal, bitte, mischen Sie bitte keine Symbole aus verschiedenen Sets, wenn Sie ein Pack mögen, aber es hat nicht alle Symbole, die Sie brauchen. Nun, du musst nur weiter nach dem anderen Pack suchen, das all deine Symbole hat. In diesem Fall möchte ich keine farbigen, weil Weiß eleganter und raffinierter aussehen wird. Ich werde diesen Filter von der linken Seite verwenden, um nach der schwarzen Füllung wie ons zu suchen. Und hier ist die Rückseite, die ich ausgewählt habe. Nachdem ich eine Weile gesucht habe, werde ich drei Symbole als SVGs herunterladen, während ich im Hintergrund arbeite. Lassen Sie mich erklären, was das bedeutet. Schwarz gefüllt Schwarz bezieht sich also auf die Tatsache, dass das Symbol keine Farbe enthält und dass Sie es selbst in Adobe XD in eine beliebige Farbe ändern können. Es muss also nicht schwarz bleiben. Es bedeutet nur, dass es keine Farbe darauf angewendet hat. Gefüllt bedeutet, dass es vollständig solide ist. Und das liegt daran, dass es einen anderen Stil namens Umriss gibt, bei dem die Symbole aus einem Strich oder dem Rahmen mit dem gemacht werden, was Sie nennen möchten. Diese neigen dazu, etwas besser zu sehen, aber bei der sehr kleinen Größe sehen sie unscharf aus. Also mein Rat ist, dass Sie nie Umrisssymbole für die sehr kleinen Größen verwenden, das heißt unter den Pexels. Okay, jetzt habe ich alle Icons heruntergeladen und sie dann dieses spezielle Format namens SVG. Svg steht für Scalable Vector Format. Da VJ viel besser ist als PNG weil die Symbole gut aussehen, egal wie Sie sie ändern. Sie können sie so groß machen, wie Sie wollen, und sie werden immer noch eine große. Ein weiterer Vorteil als VJ ermöglicht es Ihnen, die Farbe so zu ändern, sehen, wie einfach es ist. Deshalb sollten Sie immer SVG-Symbole in Adobe XD verwenden. Encoder liebten ihn auch, also ist alles gut. Okay, wenn Sie die Größe der Symbole ändern, gehen Sie bitte folgendermaßen vor. Nummer 1, wählen Sie alle drei von ihnen, weil wir wollen, dass sie die gleiche Größe haben. Nummer zwei, bitte deaktivieren Sie diese Funktion, die als Responsive Responsive Resize bezeichnet wird. Also schalte es einfach aus. Schließlich drei, klicken Sie bitte hier auf dieses Schloss-Symbol, weil die obere Leiste so klein ist, nur 40 Pixel. Ich werde diese Symbole 26 bis 2006 machen. Das ist klein. Ja, aber diese Symbole sind sehr bekannt, so dass die Leute sicher verstehen werden, was sie sind. Bitte machen Sie sie weiß und verschieben Sie sie über die obere Leiste. Mein Rat ist, dass Sie alle drei auf einmal bewegen, weil es einfach einfacher ist, so zu arbeiten. Okay, Endlich müssen wir mit Präzision arbeiten. Halten Sie die Strg-Taste gedrückt, verwenden Sie die Maus, und vergrößern Sie die Ansicht. Klicken Sie auf das WhatsApp-Symbol, um es auszuwählen und ziehen Sie es in die Nähe der linken Führung. Ist es so, wie Sie es aussprechen? Whatsapp. Whatsapp. Wie auch immer, stellen Sie sicher, dass es berührt. Du wirst das Gefühl haben, als würde dich ein Magnet anziehen. Das ist völlig normal. Du wirst es spüren, wie es dich dorthin schiebt. Okay, als nächstes klicken Sie auf die Textebene und verschieben Sie sie 10 Pixel vom Symbol entfernt. Ich werde ganz nah zoomen, damit Sie sehen können, dass die Messung angezeigt wird. Es ist diese große Zahl hier. Wir wollen zehn Pixel. Okay, schließlich, ziehen Sie eine Box und wählen Sie alle drei Elemente aus. Das Rechteck, das Symbol und die Textebene. Jetzt zentriert sie vertikal. Das ist es, was wir noch zwei Mal tun müssen. Ich werde die Steuerung halten und ein wenig durch den Scroll auf meiner Maus herauszoomen. Stellen Sie sicher, dass Instagram die rechte Seite berührt. Sie können immer Ihre Pfeiltasten auf Ihrer Tastatur verwenden, um jede Ebene um ein Pixel zu schieben wird offensichtlich sicherstellen, dass es ausgewählt ist. Dann auch hier Pixel. Okay, ein letztes Mal mit Facebook. Und dann haben wir noch eine Sache zur Seite, den Raum zwischen Facebook und Instagram. Nun, ich denke, der beste Weg, um es zu gehen, ist 40 Pixel. Aber hier ist der wichtige Teil. Klicken Sie auf die Textebene, um sie auszuwählen. Einfach genug, oder? So wählen Sie auch das Symbol aus. Bitte halten Sie Shift gedrückt, klicken Sie darauf, und da gehen wir. Sie haben beide gleichzeitig ausgewählt. Lassen Sie 40 Pixel zwischen ihnen. Und bevor wir enden, stellen Sie bitte sicher, dass Sie alle auswählen, absolut jeden einzelnen, und sie vertikal zentriert. Okay, das ist ein wirklich wichtiger Schritt, also überspringen Sie ihn bitte nicht. Wenn Sie fertig sind, verwenden Sie bitte Control 1 oder verkleinern Sie einfach manuell und schauen Sie sich die obere Leiste an. Gute Arbeit. Ich bin sehr glücklich damit. Machen wir eine kurze Pause und dann machen wir in nur einer Sekunde weiter. 14. So wählst du Schriftarten für dein Projekt: Hallo und willkommen zurück. Die Frage ist, wie können wir tolle Schriftarten für unsere Designs wählen? Wir haben im Grunde zwei Hauptoptionen, und das sind Google Fonts oder Adobe Fonts. Die meisten Leute bevorzugen Google Fonts, weil es sehr einfach ist, damit aufzustehen. Ich werde Ihnen schnell zeigen, wie Sie eine Schriftfamilie installieren können. Klicken Sie darauf, und dann haben Sie diesen Download-Button direkt hier, der Ihnen ein Zip-Archiv erhält, das extrahiert werden muss. Sie finden den Ordner, der eine oder mehrere Dateien enthält , abhängig von der Anzahl der Stile, die die Schriftart hat. Übrigens, falls Sie nur einen Stil haben, sollten Sie ihn wahrscheinlich vermeiden. Mein Rat ist, dass Sie Schriftarten herunterladen, die mindestens drei verschiedene Stile haben. Und mit Stilen meine ich nur leicht, regelmäßig, fett, kursiv und so weiter. Okay, sobald das Archiv extrahiert ist, kopieren Sie einfach diese Dateien in C Windows-Schriften mit der zweiten, und dann können Sie sie in Adobe XD verwenden. Auf einem Mac können Sie auf die Dateien doppelklicken und die Schriftart installieren. Sobald das erledigt ist, merken Sie sich einfach seinen Namen, damit Sie ihn in Adobe XD suchen können. Kurz gesagt, das sind Google-Schriftarten, aber es gibt auch Adobe-Schriftarten. Wählen Sie „Schriftarten durchsuchen“, und Sie erhalten ein sehr ähnliches Layout wie bei Google. Sie haben alle Arten von Filtern. Sie können die Beispiel-Tags ändern, aber auch ihre Größe, sein graced Array hier, stellen Sie sicher, dass Sie sich wirklich die Zeit nehmen, um es zu erkunden. Der größte Unterschied besteht darin, dass Adobe Fonts ein gültiges Adobe-Abonnement erfordert. Ich habe eine Creative Cloud-Mitgliedschaft, so dass ich Zugriff auf all diese Schriftarten habe. Wenn ich eine verwenden möchte, klicke ich einfach darauf und innerhalb seiner Seite werde ich uns geben, welche Schriftarten aktivieren. Sie können möglicherweise nach unten scrollen und bestimmte Stile aktivieren. Aber die meiste Zeit will ich sie alle. Aber Google Fonts und Adobe-Schriftarten. Das ist nicht wirklich der wichtige Teil, Kinder , den Sie bei der Auswahl einer Schriftart für Ihr nächstes Projekt berücksichtigen müssen. Gehen wir für eine Sekunde zurück zu Google. So ist ihre Liste nach den beliebtesten sortiert, die beliebtesten Schriften im Moment, roboto ist immer an der Spitze, aber ist es eine gute Wahl für Ihr Projekt? Und ich werde nein sagen. Aber was ist mit Open Sans? Nochmals, ich denke nicht so spät. Oh, nein. Also, warum ist das? Und die Antwort ist, weil sie die beiden einfachen Schuld geben. Diese Schriften sind sehr beliebt, weil sie vielseitig sind. Sie können in jedem Projekt verwendet werden, unabhängig vom Thema. Sie sind wie ein weißes T-Shirt, einfach, einfach, nichts Besonderes. Ich sehe es gerne so an. Diese Entscheidungen sind Arial sehr ähnlich. Also Schöpfkelle, Roboto, Open Sans, sie sind Plato sehr ähnlich. Wie Sie wahrscheinlich wissen. Ariel ist wiederum einfach, Standard und langweilig. Die meisten Nicht-Designer werden nicht in der Lage sein, den Unterschied zwischen Antenne und Leto oder Open Sans zu erkennen. Auch hier spreche ich nicht von Designern, natürlich spreche ich über den Kunden oder die Besucher der Website. Also mein Rat ist, dass Sie sich von diesen Arten von Schriftarten fernhalten , die langweilig sind und keine Persönlichkeit haben. Auf der anderen Seite, suchen Sie auch nicht nach extremen Schriftarten. Zum Beispiel ist dieser Fall ein klarer Schnitt. Es hat viel zu viel Persönlichkeit. Django, das willst du nicht richtig. Leto ist ein schlichtes T-Shirt, dann ist Django Neon-T-Shirt, richtig? Jeder wird das wissen, aber nicht viele Leute schätzen Neon-T-Shirts, richtig? Ihre Aufgabe als Designer ist es also, das glückliche Medium zu finden, eine Schriftart, die toll anlockt, die mindestens drei Stile hat. Das ist ausgewogen. heißt, es ist nicht langweilig, aber es ist auch nicht zu extrem. Und natürlich braucht das wieder Zeit. Die richtige Schrift zu finden braucht Zeit. Hetzen Sie es nicht. Gönnen Sie sich genug Zeit, um mit verschiedenen Möglichkeiten zu spielen. Nun, an meinem Ende, persönlich, war Montserrat einer meiner Lohnrote. Aber es ist auch eine sehr breite Bindung. Es nimmt viel Platz in Anspruch. Es ist also nicht für jedes Projekt. Oswald ist zu maskulin, aber es ist auch irgendwie kondensiert. Die Buchstaben werden zusammen geschoben, also ist es am besten in Titeln verwendet, aber nichts mehr. Wieder, mein Rat ist, dass Sie mit einer Schrift beginnen, alles, was Sie möchten, und dann, nachdem Sie die Homepage beendet haben, können Sie die Worte ausprobieren. Aber alles in allem, üben Sie nicht viel Druck auf sich selbst aus. Sie müssen nicht von Anfang an die perfekte Wahl treffen. Du kannst deine Meinung immer ändern. Außerdem erzähle ich dir mein Geheimnis als Webdesigner. Ich liebe bestimmte Schriftarten und verwende sie immer wieder für viele Projekte. Ich benutzte Montserrat ziemlich viel, aber nach der Weile wechselte ich zu einem anderen namens Treibsand. Vor kurzem habe ich mich in Poppins verliebt, und das ist, was ich für fast jedes Projekt verwende. Nun, um es klar zu sein, natürlich sollten Sie Ihre Schrift je nach Projektanforderungen wählen, aber denken Sie nicht, dass Sie für jeden einzelnen Job etwas Besonderes einfallen müssen. Stellen Sie sicher, dass der Typ Gesicht Sinn macht. Wieder, wenn es eine freundliche Website, die für Kinder gemacht ist, müssen Sie, obwohl, zum Beispiel, könnte eine gute Wahl sein, aber ein Roboto Condensed wird nicht sein. Und das liegt daran, dass es viel zu ernst ist. Wenn es sich um eine Nachrichten-Website handelt, können Sie Django nicht verwenden, weil es zu lustig ist und News-Websites nüchtern und professionell sein sollten. Das Takeaway ist also, dass Sie nach den Homepages verschiedene Schriften ausprobieren müssen und diejenige auswählen müssen, die am besten aussieht. Für jetzt für dieses Projekt bin ich zuversichtlich, dass ich mit Poppins für die meisten Textebenen gehen werde. Wieder, warum Poppins? Weil es sehr ähnlich ist, was diese Leidenschaft Websites verwenden. Und ich denke, es passt zur Beschreibung. Es ist ein bisschen maskulin, vor allem in allen Kappen, aber wir können es mit einigen weichen Farben und einigen abgerundeten Formen ausgleichen. Und weil sie Eclair Website hatte eine ausgefallene Schriftart für den Titel. Ich beschloss, nach dem auf Adobe Fonts zu suchen. Und nach einer ganzen Weile, das ist diejenige, die ich wählte, heißt EDS Markt Hauptskript. Etwas seltsam. Und es ist schön, weil es elegant ist, aber man kann es immer noch lesen. Es ist aufgewühlt, aber es ist nicht protzig. Insgesamt denke ich, das ist eine tolle Wette. Lass uns eine kurze Pause machen. Aber denken Sie daran, wenn Sie Ihre eigene Version machen, probieren Sie Ihre eigenen Schriften aus. Für jetzt, verwenden Sie einfach die, die ich für die perfekte Replik gewählt. 15. Wie du schöne Farben auswählst: Hey da, wir werden über Farbe sprechen und wie Sie damit etwas später im Kurs, im Principles Teil arbeiten sollten . Aber ich möchte Ihnen von Anfang an ein paar Tipps geben, indem Sie unser Projekt als Leitfaden nutzen. Wir wissen, dass wir ein bisschen Schwarz in unserem Design wollen, also wird es elegant aussehen als gehobene, wie diese Mode-Websites, richtig? Aber was gibt es sonst noch? Nun, wir müssen die Farben der Marken in erster Linie berücksichtigen , das ist absolut wichtig. Wir können sehen, dass wir in allen Etiketten und auf der bestehenden Website orange, dunkelblau und ein bisschen gelb in sehr kleinen Dosen finden können . Aus diesem Grund werden wir sicherlich einige von ihnen benutzen, oder? Wir können nicht lila oder grün verwenden, weil es nicht auf das Logo, die Etiketten und alle anderen Designs passen würde. Denk darüber nach. Das Unternehmen hat wahrscheinlich Banner, Flyer, Visitenkarten, Broschüren und vieles mehr. musst du im Hinterkopf behalten. Gehen Sie zurück, um diese roten Knöpfe einzureichen, sehen so gut aus mit all dem Weiß. Also meine Idee ist es, dasselbe zu verwenden, aber mit Orange. Und damit sich das Design ein bisschen weiblicher anfühlt, sollten wir ein sehr helles Rosa verwenden. Wir können das Ding aus Zip kopieren. Und ich denke, das ist völlig in Ordnung, solange wir nichts anderes kopieren, besonders ein wichtiges Element. Jetzt, um einen Farbcode zu erhalten, Es gibt zwei Möglichkeiten, es zu tun. Sie können einen Druckbildschirm aufnehmen und ihn in Adobe XD ziehen. Sobald Sie die Datei dort haben, können Sie das Pipettenwerkzeug allein verwenden. So ist die Augentropfer sehr Standard. Das ist eine Art zu arbeiten, aber ich bevorzuge den anderen Weg , der ein bisschen komplizierter ist, aber ich denke, es hat einen großen Vorteil. Um das Inspect-Element zu tun. Wir können den genauen Farbcode bekommen. Also lassen Sie mich zu meinem Browser gehen und ich werde mit der rechten Maustaste über den rosa Hintergrund klicken. Dieser Teil wird auftauchen und wir sollten die Hintergrundfarbe hier sehen. Und in der Tat hier ist das sein Fc, F8, F7. Keine Notwendigkeit, sich daran zu erinnern, weil wir einfach kopieren können, fügen Sie das. Nun, hier ist, was ich will, dass du tust. Verkleinern Sie die Ansicht erneut, halten Sie die Strg-Taste gedrückt und verwenden Sie die Maus. Alternativ können Sie das Zoomwerkzeug direkt hier verwenden. Standardmäßig ist es so eingestellt, dass sie vergrößert wird, und Sie können die Bären durch Betrachten dieses Plus-Symbols erkennen . Wenn Sie jedoch die Alt- oder Wahltaste auf dem Mac gedrückt halten, werden Sie nun verkleinern. Hören Sie, was am wichtigsten ist, dass Sie zum Auswahlwerkzeug zurückkehren. Das ist eines der wichtigsten Dinge in Adobe XD. Wann immer Sie verwenden, gehen Sie dann zurück zum Auswahlwerkzeug, oder? Klicken Sie also auf Dashboards Namen , der wahrscheinlich so etwas wie Web 1920 dash eins genannt wird. Und von hier aus sehen Sie, dass Sie eine Fülloption auf der rechten Seite haben. Klicken Sie darauf, und Sie können den Farbcode einfügen. Wieder, das ist FC, F8, F7. Aber das funktioniert nur, wenn Sie das Kunstboard ausgewählt haben. Wenn ich die Auswahl aufheben, beachten Sie, dass es keine Möglichkeit gibt, eine Farbe hinzuzufügen. Okay, also lasst uns einen kurzen Rückblick machen. Wir werden jede Menge Weiß verwenden, weil es das ist, was reiche Leute gewohnt haben, und es wird die Website schöner aussehen lassen. Wir verwenden ein wenig Schwarz für dieses luxuriöse Gefühl, für dieses gehobene Gefühl. Orange wird die Aktionsfarbe sein, und wir werden es in kleinen Elementen wie Schaltflächen und Symbolen verwenden. Ein sehr helles Rosa für den Haupthintergrund, so dass es feminin aussieht. Und wenn nötig, vielleicht ein dunkler Blauton. Okay, jetzt, bevor wir enden, möchte ich Ihnen eine großartige Möglichkeit zeigen, in Adobe XD zu arbeiten. Bisher haben wir das Ebenenfenster auf der linken Seite verwendet, aber die meiste Zeit werden wir tatsächlich das Bedienfeld „Assets“ verwenden. Diese finden Sie hier unten links auf dem Bildschirm, direkt über dem Ebenenfenster. Wenn Sie darauf klicken, wird es nicht nur blau angezeigt, sondern Sie sehen, dass Dokumentobjekte oben angezeigt werden. So wissen Sie es also. Das ist aktiv. Assets bedeutet nur Ressourcen. Hier ist, was ich will, dass du tust. Klicken Sie auf eine beliebige Textebene. Ich möchte, dass wir diese Farbe auf die Orange von der bestehenden Website ändern. Der Farbcode ist FF Drei siehe 0000. Und ich weiß es auswendig, weil es meine Firma ist und ich viele Dinge mit diesem Farbcode entworfen habe. Drücken Sie die Eingabetaste oder Escape, um sie zu schließen. Als nächstes kommt die Magie. Wir haben hier schon drei Farben, Schwarz, Orange und Pink, richtig? Lassen Sie uns sie speichern, indem Sie hier auf dieses Plus-Symbol neben den Farben klicken. Wir könnten dies nacheinander tun, die Textebene auswählen, auf das Plus-Symbol klicken und dort geht's. Aber ich möchte alle Farben mit einem einzigen Klick machen. Deshalb verwende ich Rückgängig-Steuerung Z. Okay, als nächstes wähle ich die Zeichenfläche aus, indem ich hier klicke. Verwenden Sie nun das Plus-Symbol und wir erhalten vier Farben. Reines Weiß, dieses kräftige Orange, reines Schwarz und diese Pfirsichbank. Schön. Warum ist das jedoch nützlich? Weil wir die Textebene auswählen können, klicken Sie auf Weiß, und das wird sich schnell ändern. Gehen Sie nicht mehr zur Fülloption in der unteren rechten Seite. Dies ist also im Grunde viel schneller und es funktioniert mit mehreren Ebenen. Das wird also unser Leben viel einfacher machen. Probieren Sie es aus und sehen Sie, wie Sie es tun. Aber denken Sie daran, Sie können auch Farben einzeln oder alle gleichzeitig hinzufügen , indem Sie einfach das Kunstbrett auswählen. Und wenn Sie einen von ihnen löschen möchten, einfach mit der rechten Maustaste und Sie haben diese Option. Okay, probieren Sie es dann aus. Wir sehen uns in einer Sekunde. 16. Die obere Balken organisieren: Hey, willkommen zurück, ein kurzer Rückblick. Also haben wir uns für unser Farbschema entschieden, das Richtige für den Hintergrund, jede Menge Weiß, ein bisschen schwarzer Urin dort und Orange für unsere Knöpfe. Die Schriften, Poppins wird die Hauptwahl plus ein ausgefallenes Skript für den Haupttitel sein. Um das vorherige Element einzuschließen, wählen Sie bitte alle Textebenen aus. Dies geschieht, indem Sie Shift gedrückt halten. Verwenden Sie das Feld im Eigenschaftenbedienfeld, und geben Sie Poppins ein. Sie müssen nicht das Ganze schreiben, weil XD Ihnen Vorschläge geben wird, während Sie tippen. Halten Sie es regelmäßig 12 Pixel, was irgendwie klein ist, weiß ich. Und wenn dieses Modell Sie sind, 13 wird auch funktionieren. Als nächstes wähle ich alles aus und ich werde sie nochmals zentrieren. Und ich mache jede mögliche Punktunion nur für den Fall, dass ich hier etwas tun muss. Nichts Wichtiges, nur dafür zu sorgen, dass alles auf Punkt ist. Ok? Wenn alles fertig ist, wählen Sie bitte alle Ebenen aus und verwenden Sie Control G, um sie zu gruppieren. Also das ist Control G. Wechseln Sie zurück zum Ebenenbedienfeld, um diesen Ordner zu sehen. Nur für den Fall, dass du keine Hotkeys magst. Ich möchte mit der rechten Maustaste klicken und die Gruppierung aufheben So sollte Ihr Ebenenbedienfeld aussehen. So organisieren Sie diese Layer in einem Ordner. Wählen Sie alle aus, dann mit der rechten Maustaste aus dieser Liste, und wählen Sie Gruppe. Und das ist das. Bitte beachten Sie, dass die Auswahlmethode jetzt anders ist, da Sie eine Gruppe erstellen . Wenn Sie also eine dieser Textebenen auswählen möchten, können Sie sie einfach anklicken. Nein, das wird nicht funktionieren, weil Sie den Ordner auswählen. Was Sie also tun müssen, ist das, was ich Ihnen zu Beginn des Kurses gezeigt habe. Sie müssen den Klick steuern. Und jetzt haben Sie diese Ebene ausgewählt. Also wieder, wenn etwas gruppiert ist und Sie das auswählen möchten, ist mein Rat, dass Sie klicken. Und wenn Sie steuern, klicken Sie auf das Symbol zum Beispiel, und Sie wählen nur einen kleinen Teil davon. Zum Beispiel können Sie auf dem Instagram-Symbol sehen, dass ich nur den zentralen Teil davon oder einen kleinen Teil davon ausgewählt habe , drücken Sie einfach Escape. Und jetzt kannst du den ganzen Dang bewegen. Solange du dich an drei Dinge erinnerst, wirst du großartig sein. Also Nummer 1, Steuerelement ziehen, um auszuwählen. Nummer 2, war geflohen, um eine Ebene zu gehen. Und wir verwenden Control Z, wenn Sie einen Fehler machen. Und jetzt ist die obere Leiste eingerichtet und wir können mit dem Kopf dort fortfahren, was der Bereich ist, der das Logo, das Hauptmenü und so weiter hält . Wir sehen uns in einer Sekunde. 17. Gestalte die Struktur für die Kopfzeile: Lassen Sie uns an der Kopfzeile arbeiten. Beginnen Sie mit einem beliebigen Rechteck und machen Sie sich keine Sorgen um die Größe, da wir das Eigenschaftenfenster verwenden. Jetzt für die Breite. Wir wissen, dass es 1920 sein sollte, weil die Leinwände mit jetzt, könnten Sie versuchen, 1200? Sicher. Aber 99 Prozent der Zeit, die nicht so gut aussehen wird. Breiter ist in der Regel besser im Webdesign. Für die Höhe wissen wir, dass die obere Leiste 40 Pixel hoch ist. Kopfzeilen sind in der Regel zwischen 50 und 150 Pixel hoch, je nachdem, wie viele Informationen Sie einschließen möchten. Hier haben wir nicht viel, also können wir uns an einen niedrigeren Wert halten. Ich schlage vor, AD doppelt so groß wie die obere Leiste. Durch die Verdoppelung wird es ein bisschen schöner aussehen. Okay, bitte bringen Sie es neben die Kopfzeile und zentrieren Sie es horizontal. Wenn Sie dies noch nicht getan haben, deaktivieren Sie den Strich und beginnen wir mit dem Hinzufügen der Elemente. Sie haben das Logo beigefügt, es ist übrigens in einem PNG-Format, so dass Sie es ziehen können. Und wenn das passiert, es bitte nicht über das weiße Rechteck fallen. Wenn du das tust, wird das passieren, und das ist offensichtlich nicht okay. Ziehen Sie es also an eine andere Stelle auf der Leinwand. Alternativ haben Sie auch den Vektor, die Datei, die Sie mit Control O öffnen müssen Das sieht etwas besser aus. Es wäre schöner, knackiger, weniger unscharf. Aber offensichtlich wird es ein bisschen mehr Arbeit erfordern. Also, wenn das zu kompliziert ist, verwenden Sie einfach die PNG, wenn Sie die Größe im Leerlauf ändern, um die Umschalttaste zu halten oder besser noch, hatte das Schloss-Symbol aus dem Eigenschaftenfenster. In Bezug auf die Größe ist kleiner in der Regel besser. Die meisten Anfänger verwenden riesige Größen, weil sie denken, dass das Design verbessern wird, dass es besser aussehen wird, aber das tut tatsächlich das Gegenteil. Auch hier ist kleiner besser als Webdesign, weil es eleganter aussieht als raffiniert. Hier sollte eine Breite von etwa 150 Pixeln in Ordnung sein. Und die Guides werden nun anfangen, diesen Wert zu zeigen. Wir müssen die Linie natürlich lassen. Und wir müssen vertikal zentriert, mit direktem Winkel. Wir werden das die ganze Zeit machen. Versuchen Sie also bitte Ihr Bestes, um sich an diese Werkzeuge zu gewöhnen. Sie sind absolut unverzichtbar. Okay, als nächstes müssen wir etwas Handarbeit machen. Ich werde das Hauptmenü kopieren, aber bitte beachten Sie, dass, wenn Sie sie in XD hinzufügen, Sie sie möglicherweise in einer vertikalen Liste von Arten erhalten. Das ist kein Problem. Verwenden Sie einfach die Rücktaste, löschen Sie Tasten, um sie schnell auszurichten. Mein Rat ist, dass Sie sich an eine einzelne Textebene 0 halten. Wenn Sie Google Translate verwenden, beheben Sie bitte alle Probleme. Zum Beispiel, anstatt zu Hause als Hauptmenüpunkt, Google Translate hat mir das Zuhause gegeben. Also bitte stellen Sie sicher, dass Sie auf diese Art von Fehlern achten, auch wenn Englisch nicht Ihre erste Sprache ist, überprüfen Sie andere Websites und Sie werden in Ordnung sein, denn wieder, das Haus macht keinen Sinn. Jetzt ist das große Ding hier, zu versuchen und so schnell wie möglich zu arbeiten. im Laufe der Zeit Je mehr du arbeitest, desto schneller wirst du . Ok, richtig. Sie sollten mit einer Textebene wie dieser enden, aber der Abstand zwischen den Elementen ist nicht in Ordnung. Also, hier ist, was ich vorschlage, dass Sie tun. Vergrößern Sie, falls erforderlich, und doppelklicken Sie, um die Textebene zu bearbeiten. Zwischen den ersten beiden Gegenständen drücken Sie mehrmals die Leertaste. Du musst nicht zählen, denn hier ist, was als Nächstes passieren wird. Wählen Sie den leeren Bereich aus, den Sie gerade eingefügt haben, und kopieren Sie ihn mit Control C. Bewegen Sie nun zur nächsten Lücke und fügen Sie ihn mit Control V Wiederholen Sie den Vorgang, bis Sie fertig sind. So richte ich gerne meine Hauptmenüs in Adobe XD ein, die Sie nie wirklich wissen, wie viele Leerzeichen Sie verlassen müssen bis Sie Ihren ersten Versuch hier sehen. Nun, ich bin nicht wirklich glücklich damit, also denke ich, dass ich zwei weitere Räume für jede Lücke hinzufügen werde. Dieses Mal werde ich zählen, weil ich nicht wieder einfügen möchte, nur zwei Tabs für jedes Paar, und wir werden gut gehen. Nun, bevor wir eine Pause machen, Hier ist ein letzter Trick. Nehmen wir an, Sie wollen die Anzahl der leeren Leerzeichen zählen, oder? Nur um zu überprüfen, beginnen Sie, indem Sie in den Bearbeitungsmodus gehen. Sehen Sie den Cursor. Okay, es ist direkt hier neben dem E. Halten Sie nun die Umschalttaste gedrückt und tippen Sie auf die rechte Pfeiltaste und zählen Sie jede DAP. Es ist 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. Also, das sind 10 leere Räume. Das ist es, was ich denke, in diesem Fall gut aussieht. Drücken Sie Escape, wenn Sie dies noch nicht getan haben, oder klicken Sie auf eine andere Stelle, um den Bearbeitungsmodus zu verlassen. Okay, zwei weitere Artikel hier, loggen Sie sich ein und registrieren Sie sich. Diese sollten auf der rechten Seite in zwei separaten Textebenen platziert werden. Das liegt daran, dass wir sie anders behandeln sollten. Mehr dazu in einer Sekunde. Okay, das schließt diese Vorlesung ein. Wir haben noch ein paar Dinge zu handhaben, aber zumindest haben wir unsere Elemente an Ort und Stelle. Bleiben Sie dran. 18. Einen Stil für die Kopfzeile einsetzen: Hallo, hallo. Lassen Sie uns anfangen, unser Design zu stylen, aber lassen Sie mich Ihnen eine schnelle Sache zeigen. Sagen Sie, das Menü ist nicht über dem weißen Rechteck, wie wir es hier haben. Sagen Sie, dass es viel tiefer ist, oder? Wissen Sie, Sie möchten den Befehl Ausrichtung verwenden, um alles zu zentrieren. Aber hier ist, was passieren wird. Das Rechteck wird sich ebenfalls bewegen. Daran musst du dich gewöhnen. Das Rechteck bewegt sich und es gibt keinen Weg, das zu umgehen. Was Sie tun müssen, ist es jetzt wieder an Ort und Stelle zu bringen. Und wenn Sie sicherstellen möchten, dass Sie es nicht versehentlich zu den Seiten bewegen, halten Sie einfach die Umschalttaste gedrückt. Lassen Sie mich Ihnen das nochmal zeigen. Speichern. Wir möchten den registrierten Artikel mehr nach rechts verschieben. Ok. Wenn wir nicht aufpassen, könnten wir es nach oben oder unten bewegen und das ist offensichtlich nicht okay. Wir könnten potenziell hineinzoomen und sehr genau darauf achten. Aber hier ist, was ich vorschlage. Halten Sie die Umschalttaste gedrückt. Beachten Sie, wie es sich nur horizontal bewegt. Und so können Sie schnell arbeiten, aber mit Präzision. Okay, zurück zu ihm. In Bezug auf das Styling verwenden die meisten Modewebsites alle Kappen für das Hauptmenü. Ich schlage vor, wir machen das Gleiche. Wählen Sie also alle drei Textebenen aus und nutzen Sie diese Option hier. Und da gehst du. Als nächstes wollen wir etwas Gewicht zu nass, damit es uns ins Auge fällt. Regular ist nicht wirklich okay, also hier ist mein Rat. Lass es uns mutig machen. Nun, das sieht viel besser aus, aber es ist ein bisschen zu klein für meine Tage. Jetzt ist das objektiv, aber hier ist, was ich vorschlage. Erhöhen wir die Größe auf 13 Pixel. Wenn Sie Ihre eigene Version machen, stellen Sie bitte sicher, dass Sie die Größe entsprechend ändern, wie die Schriftart aussieht. Sie sollten eine andere Schriftart wählen. Und das ist, weil in einigen Fällen, 13 Pixel, es kann wirklich klein sein. In anderen Fällen sind sie Dean kann super groß sein, vor allem, wenn Sie alle Caps aktivieren. Sie müssen also wirklich sicherstellen, dass die Größe für diese bestimmte Schriftart geeignet ist. Als nächstes greifen Sie das Rechteck-Werkzeug und zeichnen Sie eine zufällige Form über der Registerebene aus. Sie können sich das Ebenenbedienfeld ansehen, und Sie werden sehen dass sich das Rechteck wahrscheinlich oben im Bedienfeld befindet. Nun, das bedeutet, dass es den Text abdecken wird. Wir könnten es so runterziehen. Aber lassen Sie mich die Kontrolle Z rückgängig machen, um Ihnen zu zeigen, wie ich tatsächlich arbeite. Ich halte die Strg-Taste gedrückt und benutze die eckigen Klammertasten auf meiner Tastatur. Der linke verschiebt die Ebene nach unten. Genau so. Wie Sie sehen können, geht es weiter nach unten. Und die rechte eckige Klammertaste des Steuerelements bewegt es nach oben. Nun, ich weiß, dass Sie vielleicht keine Hotkeys lieben, aber die meiste Zeit haben wir das Asset-Panel auf der linken Seite. Und zu diesem Zeitpunkt erlaubt Adobe XD nicht, beide gleichzeitig zu haben. Ich weiß, es ist nicht toll, aber vielleicht werden wir in Zukunft beide Panels gleichzeitig bekommen. Ok. Zurück zur Registerkarte „Assets“. Ich klicke auf die orangefarbene Farbe und stelle sicher, dass sich die Form unterhalb des Textes befindet. Okay, wir müssen den Rahmen deaktivieren und danach machen Sie bitte die Textebene breit. Deshalb mag ich die Gewohnheit in meinem Asset-Panel. Es ist eigentlich sehr nützlich mit nicht gehen, um eine quadratische Kanten haben. Wir wollen das feminine Design. Also lassen Sie uns dies für die Breite und Höhe mit einem AD von 40, 180 tun. Wir haben also ein bisschen leeren Platz auf beiden Seiten. Und genau das sollten Sie in jedem Fall tun. Und 40, weil die Last deine Aufmerksamkeit erregt, so wie sie ist. Wir müssen es nicht zu groß machen. Nun, als nächstes, runden Sie die Ecken ab, indem Sie dieses Feld im Eigenschaftenfenster, rechts, 20. Und das wird es schön und abgerundet machen. Okay, bitte wählen Sie den Text zusammen mit den Schafen und den USA, die Ausrichtungsbefehle. Wenn Sie bereit sind, bewegen Sie es bitte auf die rechte Seite. Auch hier sind die Ausrichtungsbefehle unglaublich nützlich, also machen Sie sich bitte eine Gewohnheit, sie zu benutzen. Okay, wenn Sie es auf die rechte Seite bewegen, sollten Sie spüren, dass es in der Führung einrastet. Bitte lassen Sie nicht ein oder zwei leere Pixel. Das wäre eine echte Schande. Wählen Sie schließlich alle Elemente aus der Kopfzeile aus und verwenden Sie den mittleren Befehl ausrichten. Ok, tolles Wort. Bisher. Im Laufe der Zeit werden Sie immer mehr, um diese Techniken zu verwenden. Positionieren Sie beispielsweise die Login-Textebene neu, indem Sie die Umschalttaste auf 30 Pixel von der Registerschaltfläche entfernt halten . Das sind also 30 Pixel. An diesem Ort hatte Zyban die schöne Ikone, die die Bedeutung des Elements zeigte. Jetzt pausiere ich die Aufnahme und fand eine auf flachem icon.com. Hier ist es. Wie immer, tun Sie Dinge, wenn Sie die Größe ändern, deaktivieren Sie diesen Schalter, und klicken Sie dann auf die Sperre. In Bezug auf die Größe, die Symbole von oben, wir sind 26 Pixel. Also lassen Sie uns den gleichen Wert hier verwenden. Nun, die Höhe ist nicht perfekt, aber das ist völlig in Ordnung. Wenn wir 30 Pixel zwischen diesen beiden benötigen, dann Pixel zwischen dem Symbol und der Textebene. Warum zehn Pixel? Weil wir zeigen müssen, dass sie zusammen gehen. Dies ist eine ziemlich subtile Sache, aber es ist wichtig. Ok? Jetzt für den Abstand zwischen dem Hauptmenü und dem Login, 30 mal 2 ist 60. Also lasst uns damit gehen. keine Angst, auf die Pfeiltasten auf Ihrer Tastatur zu tippen, wenn Sie den aktuellen Wert sehen, vor allem, wenn Sie zusammenführen möchten, vereinen Sie sie um 12 Pixel. Und damit machen wir eine kurze Pause. 19. Aufmerksamkeit auf Details in der Kopfzeile: Willkommen zurück zu unserem Design. Sie könnten denken, dass das alles sortiert ist, aber ich möchte zwei Dinge ansprechen, die ziemlich subtil und dennoch wichtig sind. Zuallererst, der Hintergrundton von Rosa, es ist schön, oder? Aber bietet es genug Kontrast? Sonst gesagt, zeichnen sich diese weißen Rechtecke aus? Ich glaube, das ist nicht der Fall. Also müssen wir etwas tun. In der Karriere eines jeden Designers haben Sie dieses Problem bestimmt. Und im Grunde haben Sie drei Möglichkeiten. Nummer eins, Sie können einen dunkleren Farbton von Rosa wählen. Das Problem dabei ist, dass es sich nicht mehr um eine weiche Hintergrundfarbe handelt. Es fängt an, Ihre Aufmerksamkeit zu lenken und das ist nicht richtig. Es nennt sich aus einem Grund Hintergrund. Wenn Sie sich das vorhandene Design ansehen, sehen Sie einen Grauton, der ein bisschen zu stark ist und deshalb die Designfelder kalt sind. Also, das ist Option Nummer 1, erhöhen Sie den Kontrast, indem Sie die Farbe ändern. Die zweite Wahl besteht darin, den Schlagschatten hinzuzufügen. Dies wird über diese Stelle im Eigenschaftenfenster aktiviert. Wenn Sie den Schatten hinzufügen, stellen Sie bitte sicher, dass er wirklich weich ist. Sie können die Deckkraft anpassen, indem Sie hier klicken. Versuchen Sie einen niedrigen Wert, wie 10 Prozent, aber deaktivieren Sie die Auswahl, damit Sie wirklich sehen können, wie es aussieht. Jetzt ist die Frage: Ist es schön? Die Sache ist, wenn wir hier einen Schatten verwenden, müssen sie überall auf jedem einzelnen weißen Rechteck verwenden. Deswegen verbringen wir so viel Zeit damit. Es ist keine einzige Entscheidung für den einzelnen Artikel. Eigentlich wird es den Stil für das gesamte Design festlegen. Also denken Sie wirklich darüber nach. Endlich, hier ist die dritte und letzte Wahl. Brechen Sie die ab. In diesem Fall nehme ich gerne die Hintergrundfarbe an und suche dann nach dem etwas dunkleren Farbton. Wenn man bedenkt, wollen wir das schöne, elegante Design. Die erste Option, ein dunklerer Hintergrund. Es ist im Grunde aus dem Fenster. können wir nicht tun. Es ist also zwischen Nummer 2, einem Schatten, welcher Zipper verwendet wird, und Nummer drei, ein Strich. Ich werde mit der letzten Option gehen. Und nach der, viel Feinabstimmung, landete ich mit dem folgenden Farbcode. Es muss wirklich weich sein. Es ist F5, einfach aber, dB. Es ist subtil, aber Sie können immer noch sehen, ist da. Fügen Sie sie mit diesem Plussymbol zum Bedienfeld „Elemente“ hinzu. Nun, wir hätten den Grauton benutzen können. Aber warum nicht bleiben in dieser rosa Region ist mehr im Einklang mit den Farben, die wir bereits verwenden. Okay, das war der erste Punkt auf meiner Liste in Bezug auf die Liebe zum Detail. Es war ein wichtiges Thema, weil es uns eine Richtung geben wird, einen Stil, dem wir für den Rest des Projekts folgen können. Das zweite, was ich besprechen möchte, ist etwa das Gleiche. Wir müssen über das Hauptmenü sprechen. Und es heißt, wie Sie wahrscheinlich wissen, zeigen Ihnen die meisten Menüs, wo Sie sind. In diesem Fall sind wir auf der Homepage, aber weil das Menü ganz schwarz ist, ist es nicht offensichtlich. Einige Websites verwenden eine ausgewaschene Farbe, wie ein hellgrau, um zu zeigen, dass Sie da sind. Und während ich in diesem Fall ein großer Fan davon bin, denke ich, ich werde mit Orange gehen. Dies hat große Auswirkungen, da die nächste Frage lautet, wenn Sie den Mauszeiger über den Menüpunkt bewegen, welche Farbe wird es haben? Wieder Orange, vielleicht eine andere Farbe. Das ist also etwas, was wir uns entscheiden müssen. Wir müssen das jetzt nicht tun, aber es ist etwas, das wir in diesem Moment im Auge behalten müssen. Lassen Sie mich ein Rechteck unter dem Home-Item hinzufügen , das weiter sagt, dass wir hier sind. Ich denke, 90 Pixel sind breit genug, so dass es nicht in den nächsten Menüpunkt geht. Höhe, drei Pixel, ich denke, das ist völlig in Ordnung. Bitte beachten Sie, dass für Linien das Höhenfeld nicht verwendet wird. Stattdessen benutzen wir diesen hier ein bisschen tiefer. Und das liegt daran, dass es so ausgerichtet ist, dass es keine Füllung hat. Wenn Sie also im Bedienfeld „Assets“ auf Orange klicken, wird nichts passieren. Das ist absichtlich. Das ist richtig. Stattdessen müssen Sie mit der rechten Maustaste klicken und dann Rahmenfarbe anwenden wählen. Nun, da ist die Frage, wie schicken wir das Rot mit nach Hause? Wenn man bedenkt, dass dies eine einzelne Textebene ist, die wirklich breit ist. Nun, hier ist die einfachste Arbeit. Zoomen Sie ganz nah und fügen Sie das Rechteck hinzu, das so breit ist wie dieses Wort. Das ist offensichtlich zentriert. Nun greifen Sie das Linien-Werkzeug und verwenden Sie den Befehl Ausrichtung. Es besteht eine gute Chance, dass sie sich beide bewegen, aber es gibt ein anderes Problem, es einfach neu zu positionieren, und das ist das. Ok, tolles Zeug. Wenn Sie fertig sind, löschen Sie einfach das Rechteck und ich bin glücklich, bevor wir diese Lektion beenden, ich möchte Ihnen einen Fehler zeigen. Es könnte im nächsten Adobe XD-Update behoben werden, aber ich denke, Sie sollten darüber Bescheid wissen und dass es nicht Ihre Schuld ist, Sie machen nichts falsch. Wählen wir zum Beispiel das letzte Wort aus diesem Ebenen-Blog aus. Sagen wir, wir wollen es orange machen, okay, kein Problem, wir klicken hier und damit das richtig. Jetzt sieh mal, was passiert. Egal, ob Sie irgendwo anders klicken oder wenn Sie die Escape-Taste drücken, passiert nichts. Sie können nicht einmal vergrößern oder verkleinern. Es ist, als würde das Programm einfrieren. Die einzige Möglichkeit, es zu beheben, besteht darin, eine andere Welt auszuwählen, indem Sie hier klicken. Jetzt ist alles wieder normal. Es ist ein seltsamer Fehler, aber ich wollte, dass du weißt, dass es nicht deine Schuld ist, falls dir das passiert. Und damit machen wir eine kurze Pause. 20. Ein tolles hero aufbauen: Hallo und willkommen zurück. Der Heldenbereich ist der Teil des Designs, der Ihre Aufmerksamkeit erregen soll und Sie auf der Website halten soll. Es sollte einfach, aber auffällig und einprägsam sein. Wie Sie das Refugium verwalten. Ja, wir machen das Projekt gerne zum Leuchten, oder es wird flach fallen. Lassen Sie mich anfangen, den Inhalt von der alten Website zu kopieren. Die Überschrift übersetzt sich locker in etwas, als wäre es keine Wüste. Es ist das perfekte Frühstück, obwohl wir ständig ändern. Also sollten Sie das im Hinterkopf behalten. Die Beschreibung sollte auf drei Linien platziert werden. Nun, während ich alles zentriert habe und ein paar Änderungen hier und da vornehme, ist der Text hier so wichtig. Der Haupttitel wird in dieser Schrift gezeigt werden, EDS Hauptmarkt, das war sein Name. Bitte seien Sie großzügig mit der Größe. Ich denke an 50 Pixel oder so. Wenn Sie diese genaue Schrift nicht finden können, suchen Sie bitte nach einer Alternative. Nun, die Idee hinter diesem Titel ist, dass das Produkt wie eine Wüste aussieht, aber das ist eigentlich ein Mahlzeitenersatz. Du sollst ein 300-Gramm-Glas essen und das war's, sonst nichts. Das ist also der Schlüssel, denn als Wüste ist das teuer und es ist zu viel Produkt, 300 Gramm, oder? Aber als Hauptmahlzeit macht dies sowohl in Bezug auf die Verpackung seines Gewichts als auch in Bezug auf den Preis Sinn . Was die Beschreibung betrifft, sagt Ihnen dies ein bisschen mehr über das Geschäft. Kein Zucker, keine handgefertigten Produkte aus Kunststoff, schnelle Lieferung und so weiter. Diese werden USP genannt, Alleinstellungsmerkmale. Usb. Es ist, was uns von anderen Unternehmen unterscheidet. Verwenden Sie keine Texte wie diese. Du würdest Design wird nicht so schön aussehen. Nun, was die meisten Anfänger tun, ist, dass sie Lorem Ipsum verwenden , der auch als Dummy Text mit gefälschtem Text oder lateinischen Texten bekannt ist. Wenn du das tust, der Klient, wird er offensichtlich nicht so aufgeregt sein, wenn du ihm deine Arbeit zeigst. Es ist wahr, dass es eigentlich ziemlich schwierig ist, diese Art von Text zu finden. diesem Grund stellen Unternehmen Texter ein. Kopieren bedeutet einfach Text-Autoren. Die schreiben den Text. Also kopieren Sie Autoren, bitte verwechseln Sie Texter nicht mit dem Urheberrecht, was etwas ganz anderes ist. Aber zurück auf den Punkt, es ist immer besser, echten Text in Ihrem Heldenbereich zu haben, echte Kopie. Wenn der Kunde nichts hat, was Sie verwenden können, nehmen Sie bitte etwas von einem ihrer Hauptkonkurrenten, geben Sie es einfach. Natürlich müssen Sie dem Kunden mitteilen, dass Sie diesen Text von einer anderen Website genommen haben und dass er sich etwas Originelles einfallen muss. Aber es ist sehr wichtig, dass Sie Lorem Ipsum nicht verwenden, vier wichtige Teile Ihres Designs. Stellen Sie sich die Nike-Website vor, aber anstatt es einfach zu tun, sagt es, Lorem ipsum dolor hat offensichtlich nicht die gleiche Wirkung, oder? Ok. Nun für die Entfernungen, lassen Sie 25 Pixel zwischen dem Titel und dem Kopf dort. Und dann Pixel zwischen diesen beiden Textebenen. Oh, das hätte ich fast vergessen. Bitte wählen Sie alle Ebenen aus der Kopfzeile aus und gruppieren Sie sie mit der Steuerung G. Sie können das Ebenenfenster aktivieren, um zu überprüfen, ob alles in Ordnung ist. Ab sofort sollten Sie zwei Ordner und zwei Textebenen aus dem Hero-Bereich haben. Übrigens, lass mich dir noch etwas sagen. Ich möchte hier mehr leeren Raum verlassen, nicht nur 25, aber Sie müssen immer über das Ziel der Seite denken war das Ziel. Hier möchte die Website ihre Produkte verkaufen. Deshalb ist es wichtig, dass wir die Produkte so weit wie möglich in so hoch wie möglich gezeigt haben . Das bedeutet also, dass wir diesen Teil nicht mit anderen Dingen wie einem Video oder mehreren Illustrationstexten ausdehnen können. Die meisten Besucher werden die Produkte ohne Scrollen sehen wollen. Das ist es, was das Geschäft auch will. Hoffentlich fällt dir eines dieser Produkte ins Auge und du wirst darauf klicken. Ein Foto des tatsächlichen Produkts ist viel besser als jede Textebene, egal wie Sie es stylen. Deshalb müssen wir alles so kompakt wie möglich halten. Und damit können wir zu den Kategorien übergehen. Bleiben Sie dran. 21. Das Menü neu bearbeiten: Willkommen zurück zu unserem Projekt. Das Menü der alten Kategorien war nichts Besonderes. Es war männlich mit dieser dicken Linie und nicht so aufregend aus visueller Sicht. Du könntest es verpassen, wenn du nicht so viel Fürsorge für alle wärst. Also müssen wir etwas interessanteres und auffälligeres tun. Beginnen wir mit dem Kopieren und Einfügen der Elemente und Entfernen der Zahl neben jeder Kategorie. Weil ich sowohl der Kunde als auch der Designer bin. Ich bin okay, das zu tun. Im Allgemeinen sollten Sie diese Dinge nicht entfernen, ohne die Erlaubnis des Clients oder eine andere Möglichkeit zu haben, es zu betrachten. Sie können sie entfernen, aber wenn Sie schlechte Rückmeldungen darüber erhalten, seien Sie bitte nicht verärgert. Ok. Nehmen Sie sich Zeit damit und stellen Sie sicher, dass Sie genügend Leerraum zwischen jedem Platz setzen. Während ich das tue, müssen wir sicherstellen, dass wir verstehen, wie man es stylt. Nun, sollten wir die All-Caps Behandlung als Bourbon verwenden, das Hauptmenü? Machen wir es gleich groß, kleiner oder größer? Um eine Antwort zu bekommen, müssen wir zuerst etwas anderes fragen, was wichtiger ist. Das Hauptmenü oder dieses Kategoriemenü. Sie könnten geneigt sein, das Hauptmenü zu sagen, Methanol. Deswegen heißt es Main, oder? Aber eigentlich ziehen die Kategorien mehr Kollegen dem einfachen Grund an, dass sie die gezeigten Produkte kontrollieren. Denk darüber nach. Was will das Unternehmen? Die gleiche Frage immer und immer wieder, richtig? Wollt es den Besuchern schicken, um den Blog oder die Kontaktseite zu sehen? Wie wäre es mit der Liste der Partnershops oder der Presse, die das Unternehmen erhalten hat? Nein, natürlich nicht. Das mag interessant sein, aber das Geschäft will tatsächlich Verkäufe direkt an den Verbraucher. Das ist das Geschäftsmodell. Wie können Sie einen Besucher dazu bringen, etwas zu kaufen? Nun, zuerst musst du ihm ein Produkt zeigen. Das ist, wo die Kategorien ins Spiel kommen. Eine andere Sache zu beachten ist, dass das Kategoriemenü keine Aktualisierung benötigt. Wenn Sie also Kategorien ändern, ist es wirklich bestanden. Wenn Sie das Produktmenü von oben verwenden, dauert dies mehr Zeit, da es sich um ein Dropdown-Menü handelt und insgesamt langsamer ist. Kurz gesagt, was bedeutet das? Das Hauptmenü ist in allen Großbuchstaben. Sie sind Dean, fett wird die Kategorien in allen Großbuchstaben zeigen, 16, fett. Ich weiß, ich hätte zwei Minuten sparen können und Ihnen den Wert 16 sagen können. Aber warum wir es tun, ist unglaublich wichtig. Wir treffen keine Entscheidungen, die nur darauf basieren, wie es aussieht, oder? Was auch immer besser aussieht, wir müssen darüber nachdenken und wirklich sicherstellen, dass wir dem Unternehmen dabei helfen, seine Ziele zu erreichen. Als nächstes möchte ich es noch mehr hervorheben, indem ich ein Rechteck verwende. Diese fügen dem Canvas eine beliebige Größe hinzu und stellen Sie sicher, dass Sie es unter der Textebene platzieren. Denken Sie daran, Control Square Bracket Taste, um eine Ebene nach oben oder unten im Ebenenfenster zu verschieben. Okay, für die Größe, unter Berücksichtigung der Breite der Textebene, Lassen Sie uns mit 550 mal 50. Dies sind nur die Ausgangspunkte, also denken Sie nicht zu viel davon durch das Asset-Panel. Bitte tragen Sie den rosa Rand auf und runden Sie ihn dann ab, indem Sie dort einen hohen Wert setzen. Übrigens ist der Maximalwert 25, und das liegt daran, dass die Höhe 50, 25 oben, 25 unten ist. Also 50 insgesamt. Aber für den Fall, dass Sie die 100 hier setzen, wird das Gleiche sein. Also keine Sorgen darüber. Es versteht sich von selbst, dass Sie beide Elemente auf der Leinwand senden sollten, aber auch den Text innerhalb der Form zentriert haben. Wenn du mich gefragt hast, was als Anfänger das Wichtigste ist, denke, es ist Geschwindigkeit. Solange du schnell bist, bist du auf dem richtigen Weg. Das bedeutet, dass Sie sich in Adobe XD wohl fühlen müssen. Aber weil es nur ein paar Techniken zu meistern gibt, bin ich zuversichtlich, dass Sie beim Üben schneller und schneller werden. Okay, nun, als nächstes auf meiner Liste, Lassen Sie uns zeigen, welche Kategorie derzeit aktiv ist und das ist Hafer. Markieren Sie es, und verwenden Sie das Bedienfeld „Assets“. Stellen Sie sicher, dass Sie sich an den Fehler erinnern, von dem ich Ihnen erzählt habe. Ok. Wenn das erledigt ist, fügen wir die Zeile am Ende des Wortes hinzu. Es hängt wirklich davon ab, was Sie oben getan haben. Ich denke, wir haben die Linie gemacht, die 90 Pixel breit war. Ich denke, das ist ein bisschen viel, um ehrlich zu sein. Lassen Sie uns AD tun, aber wir behalten die drei Pixel Höhe. Was ich tun werde, ist, dass ich die oben auch schrumpfen werde, nur so innerhalb der klaren, wieder, Konsistenz wichtig für mich. Ich werde das beschleunigen, da es nichts Besonderes daran gibt. Ich werde ein Rechteck verwenden, um es zu zentrieren. Und das wird sein, dass wir potenziell die gleiche Menge an Leerräumen vorher im Hauptmenü nutzen können. Aber ich denke, das ist einer dieser Orte, an denen ich es nur annähern kann. Was ich gerne tun möchte, ist sicherzustellen, dass der Text zentriert ist und die Menge an Leerraum anpassen. Da der Text zentriert ist, bedeutet dies, dass die Ausrichtung nicht weggeworfen wird. Jetzt, okay? Ich habe tatsächlich eine kleine Sache vergessen. Anstelle von Säften weniger Limonade setzen, weil ich denke, das ist angemessener. Las, ich denke, es sollte Hafer statt alt sein, aber lassen Sie mich nochmals überprüfen und wir werden sehen, was wir im nächsten Video tun können. Diese kleinen Details oder die meist für die Unternehmer als Web-Designer, sollten Sie nicht wirklich tun, diese Änderungen, es sei denn, Sie sind angewiesen, dies zu tun. Ja, das wird ein echtes Projekt, es wird umgesetzt werden. Ich ziehe es vor, dass wir den echten Begriff verwenden. Es gibt noch ein letztes Detail. Ich möchte zwischen jedem Menüelement eine vertikale Trennlinie hinzufügen. Verwenden Sie das Linienwerkzeug noch einmal und halten Sie es unter 20 Pixel. Machen Sie es zur gleichen Sache, Farbe, und verwenden Sie ein Rechteck, um es richtig zu zentrieren. Du fragst vielleicht, warum wir es tun? Es ist nicht zwingend. Versteh mich nicht falsch. Aber es hilft, mehr Struktur in das Menü zu bringen. Oder das Publikum ist nicht so jung. Wir müssen also sicherstellen, dass alles so klar wie möglich ist. Okay, mit diesem kleinen Detail wird das Kategorieelement eher wie ein Menü aussehen. Okay, lassen Sie uns einen zusätzlichen Blick nehmen und wenn Sie glücklich sind, ausgewählt alle und Gruppenbett. Ich habe die beiden Textebenen nicht von oben gruppiert , weil es uns wirklich in keiner Weise hilft. Ich bin wirklich glücklich mit unseren Fortschritten und ich bin sehr aufgeregt, Ihre eigene Version dieses Menüs zu sehen. Denken Sie wirklich darüber nach, was etwas anderes macht. Suchen Sie nach Inspiration und zeigen Sie mir, was Sie 0 haben, bevor wir enden, ich denke, wir haben vergessen, den Link aus der Beschreibung zu stylen. Ja, wir haben es total durcheinander gebracht. Bitte machen Sie es orange, um zu zeigen, dass es ein Link ist, und machen Sie es fett, so dass es auffällt. Aber nie mit der Größe spielen, das wäre ein großer Ausführungsfehler in meinem Buch. Sie können nur mit der Farbe und dem Gewicht spielen, sonst nichts. Und genau so haben wir ein Design, das modern und zugleich feminin ist und sich auffällt. Graues Zeug. 22. So findest du alle Produktdetails in einem Raster: Hallo und willkommen zurück. Als nächstes werden wir das Raster der Produkte entwerfen. Aber zuerst lassen Sie mich diesen Rechtschreibfehler korrigieren. Ich denke, ODS ist eine viel bessere Beschreibung. Und wenn wir über Beschreibungen sprechen, denken wir sollten die Größe dieses hier leicht erhöhen von 13 Pixel auf 14 Pixel. Nur eine kleine Sache, aber ich denke, es macht Sinn. Wenn dies der Fall ist, erhöhen wir den Abstand noch einmal auf 25 Pixel. So ist es oben und unten das Gleiche. Nun, vorwärts, ist dies der schwierigste Teil dieser Neugestaltung, der Produktgrad. Ich meine, das ist der wesentliche Teil, weil hier die Verkäufe gemacht werden. Wenn es uns nicht gelingt, alles klar zu arrangieren, wird das das Geschäft schaden. Denken Sie daran, dass der Umsatz 40 Tsd € bei 1,40 Tsd € pro Monat. Das sind etwa 50.000 Dollar. Mit einer großartigen Neugestaltung können wir diese Zahl um einiges erhöhen, aber wir können auch den Umsatz senken. Der Druck ist also immens. Fangen wir mit etwas Mathematik an. Wir halten das vorhandene Lesen mit drei Spalten zu diesen. Nichts Gold so besonders, nichts zu exotisches, oder? Wir wollen das verrückte Redesign nicht. Wenn wir drei Spalten haben, bedeutet das, dass wir zwei Lücken haben, richtig? Wie groß sollten diese Lücken sein? B, 20 oder 30 Pixel ist, was ich empfehle. Das verwende ich in den meisten meiner Projekte. In diesem Fall gehen wir mit 30. Jetzt. Es d mal 2 ist 60. Das bedeutet, wir haben 1200 Pixel, die aktive Fläche minus 60, und das ist 1140 geteilt durch drei Spalten, das sind 380 pro Spalte. Also im Grunde ist das die Breite eines Produkts. Okay, fügen Sie ein Rechteck hinzu und lassen Sie uns das Eigenschaftenfenster verwenden, um es anzupassen. Also die Breite, wieder, 380. Und für die Höhe gehen wir mit einem Eins-zu-Eins-Verhältnis. Also 380. Möglicherweise passen wir die Höhe später an, je nachdem, wie das Design aussehen wird. Aber vorerst sollte das in Ordnung sein. Bitte wenden Sie die Tafel, die auf die rosa. Nun ist die Frage, behalten wir die quadratischen Kanten? Und das ist, weil wir gesehen haben, dass das ziemlich beliebt auf Passionswebsites ist. Aber in diesem Fall schlage ich vor, wir runden sie ab. Nun, fünf Pixel sind nicht genug für die Nacht, in der sie von dieser Größe dann funktionieren könnten, aber es ist immer noch zu subtil für meinen Geschmack. Sie können noch kaum sehen. 15 scheint der Weg zu sein. Das Problem mit einem höheren Wert ist, ich denke, wird seltsam aussehen. Und mehr als das wird wegessen in den eigentlichen Inhalt. Platzieren Sie diese 25 Pixel von den Kategorien entfernt und listen Sie Sternkopie ein, indem Sie den gesamten tatsächlichen Inhalt einfügen. Ich werde die Texte von der alten Website verwenden. Also bitte bleiben Sie bei mir, während ich alles einfüge. Wie ich am Anfang sagte, 40.000€ pro Monat, das sind etwa 50.000$. Nun, im großen Schema der Dinge, das ist nicht eine ganze Menge Geld. Das ist kein riesiges Geschäft, ob du es glaubst oder nicht. Ich kenne viele Unternehmen, die viel mehr als das tun. Aber Sie fragen sich vielleicht, warum das relevant ist? Weil Sie den Wert Ihrer Neugestaltung verstehen müssen. Sagen Sie, wir werden für das gesamte Projekt, was auch immer zweitausend Dollar berechnen, richtig? Stopp und mobile Versionen, okay, plus Vorbereitung alles für die Codierung, vielleicht sogar ein interaktiver Prototyp. Der Code für dieses Redesign wird wirklich billig sein , weil es hauptsächlich CSS bisher funktioniert. Die Codierung wird also nichts Besonderes sein. Aber sagen wir einfach, es ist ein weiteres 2000, oder? Obwohl ich weiß, dass der Preis wahrscheinlich etwa $200 bis vielleicht 250 sein wird. Aber lassen Sie es uns einfach halten. Alles in allem 4.000$ insgesamt für die Neugestaltung. Dies mag für einige Leute teuer erscheinen, aber denken Sie über Folgendes nach. Angenommen, wir erhöhen den monatlichen Umsatz um 10 Prozent, oder? Von $50.000 bis $55.000. Also, das sind zusätzliche $5.000 pro Monat. In einem Monat bekommt das Unternehmen sein Geld zurück plus einen Gewinn. In einem Jahr, das sind zusätzliche $60.000 Umsatz. Also für $1000 Redesign ist im Grunde nichts. Es ist ein sehr kleiner Preis zu zahlen. Und wieder kenne ich einige Unternehmen, die 200 Tausend pro Monat tun. Aber hier ist die Sache. Selbst wenn du den Umsatz nicht um 10 Prozent steigerst, machst du vielleicht 5%, oder? Im Falle dieses Geschäfts, das sind immer noch eine zusätzliche $30.000 pro Monat. Aber wieder, vielleicht ist dein Design nur etwas besser als das alte. Okay, 2,5% Verbesserung des Umsatzes. Das ist immer noch $15.000.1, 515 k. Dies ist die Macht, die Sie als Designer haben. Und sie haben tatsächlich einen Freund, der eine Website für das Unternehmen umgestaltet, das einen Jahresumsatz von über 100 Millionen Jahren hat. Das sind also mehr als 8 Millionen Euro pro Monat, etwa 10 Millionen Dollar pro Monat. Zwar ist es wahr, dass die meisten dieser Einnahmen kommen aus den tatsächlichen physischen Geschäften und es ist nicht exklusiv. Online-Verkäufe sind immer noch eine unglaubliche Chance. Das ist also, was Sie beachten müssen, wenn Sie Ihre Arbeit preisen. Wie viel Wert können Sie auf Basis des aktuellen Umsatzes bringen? Okay, jetzt lassen Sie uns einige davon nach unten bewegen und fügen wir ein zweites Rechteck hinzu, das unser Foto hält. Hier ist, was ich will. Wählen Sie das Hauptrechteck und verwenden Sie die Steuerung des D wie in Duplikat. Es sieht so aus, als wäre nichts passiert, ändert aber die Farbe in jedes zufällige Grau. Wenn Sie das getan haben, deaktivieren Sie den Rahmen und lassen Sie uns seine Höhe anpassen. Dies ist ein Punkt, an dem Sie die Fotos des Unternehmens berücksichtigen müssen. Sind sie groß und dann sind sie kurz und breit? Darauf basiert, müssen Sie diese Form anpassen. In diesem Fall bin ich sowohl der Besitzer als auch der Designer, so dass ich tun kann, was sie wollen. 250 sollte für die Höhe in Ordnung sein. Nun, der 15 Eckenradius ist völlig dein Cabo Top, aber nicht unten. Das wäre ein großer Fehler. Bitte klicken Sie hier, um die untere Hälfte zu bearbeiten. Wenn Sie auf die letzten beiden Felder klicken, wissen Sie, ob Sie an der richtigen Stelle sind, weil dieses Teil leuchtet. Dies ist also die Koordinate, die wiederkehrend unten rechts und diese unten links angepasst wurden . Okay, tolles Zeug. Wir haben jetzt das Skelett und jetzt beginnt die Reise. Nehmen wir uns einen Moment Zeit und wir werden in nur einer Sekunde weitermachen. 23. Hier findest du das beste Layout für die Raster der Produkte: Hallo und willkommen zurück. Bevor wir am Raster der Produkte arbeiten, hoffe ich, dass Sie verstehen, wie wichtig es ist. Wir reden von Tausenden und Zehntausenden von Dollar. Mit diesem Druck auf uns müssen wir sicherstellen, dass wir das absolut beste Raster an Produkten schaffen, das wir können. Aber wie können wir sicher sein, dass wir unser Bestes getan haben? Nun, hier ist mein Rat. Hier ist der beste Weg, um ein tolles Raster von Produkten zu erstellen, wird viele Optionen erstellen, genannt sie, wie Sie sie Varianziterationen, Optionen nennen möchten, was auch immer das Konzept ist, was wichtig ist. Hier ist das Ding. Zeigen wir diesen Titel unter dem Foto oder darüber? Haben wir eine Lektüre geschickt oder lassen wir die Linie, die Banken? Verwenden wir zwei Schaltflächen für In den Einkaufswagen oder sehen Sie Details oder nur Text? Es gibt viele Fragen wie diese und Sie können keine Antwort haben , es sei denn, Sie entwerfen alle Ihre Ideen. So gelingt es Ihnen, das bestmögliche Layout zu erhalten. Sie erstellen alle Versionen, die Sie können. Wenn nach dem anderen, dann entscheiden Sie, dass Sie die Zeichenfläche duplizieren und Sie versuchen eine andere Idee und eine andere und eine andere. Und das liegt daran, dass es eine Sache ist, sich das vorzustellen. Und es ist ein weiteres CDA-Design Seite an Seite mit einer anderen Option. So können Sie sicher sein, dass Sie Ihr absolutes Bestes getan haben. In meinem Kopf würde ich gerne Symbole für das Gewicht Kalorien im Preis hinzufügen, aber diese Basis sieht irgendwie eng aus. Okay, wir könnten die Karte erhöhen, aber das wird die zweite Reihe nach unten schieben. Wird das in Ordnung sein? Also keine Ahnung, es sei denn, wir sehen es. Wir könnten den Fototeil kleiner machen. Aber wieder, werden die Produkte schön aussehen, wenn wir das tun? Also ist es wirklich wichtig, nicht faul darüber zu sein, auch wenn Sie mit der ersten Version zufrieden sind, denken Sie daran, ist nur eine Option. Und wenn der Klient Sie eine andere Idee sehen will, ist es am besten, ihm zu sagen, Hey, weißt du was, ich habe schon versucht, dass hier das Design ist. Ich glaube nicht, dass es funktioniert. Aber wenn Sie sich nicht genug Mühe machen und Sie eine Version erstellen, und das war's. Du gibst ihm nicht dein Bestes. Also mein Rat ist, dass du immer einen tollen Job machst, auch wenn das Geld ziemlich niedrig ist. Es gibt nur einen Weg, sich zu verbessern, und das ist, schneller zu werden und aus Ihren Fehlern zu lernen. Indem Sie Pastor werden, entwerfen Sie zehn Raster statt zwei oder drei. Indem Sie 10 entwerfen, sehen Sie, was funktioniert und was nicht. Also, das nächste Mal werden Sie eine ähnliche Situation haben. Sie werden nicht nur diese Erfahrung haben, sondern auch etwas Schnelligkeit haben. Und damit, lasst uns beginnen, ein paar Optionen zu treffen. Ich werde Ihnen wahrscheinlich nur zwei oder drei zeigen, aber bitte tun Sie Ihr Bestes, um einige Ihrer eigenen zu finden. Verwenden Sie Inspiration. Nimm deine Fantasie nicht an. Schauen Sie sich um und sehen Sie, was andere große Websites tun, und wenden Sie es hier an. Versuchen Sie jedoch, nicht zu viele Elemente zu entfernen, wenn Sie nur über ein Titelunternehmen verfügen. Sicher, es ist ziemlich einfach. Aber wenn es so viele Informationen gibt , dann wird es schwierig. Okay, lasst uns an die Arbeit gehen. 24. Gestalte die erste Version der Produktkarte: Hallo und willkommen zurück. Für die erste Version der Produktkarte, Lassen Sie uns dies tun. Der erste Schritt besteht darin, alle diese Elemente auszuwählen und sie zu gruppieren, Kontrolle G. Das ist nicht obligatorisch, aber ich ziehe es vor, das zu tun. Lassen Sie uns nun hier oben rechts im Eigenschaftenfenster fokussieren und klicken Sie auf Raster wiederholen. Sie werden feststellen, dass eine gepunktete grüne Linie plus diese beiden Griffe sind. Schnappen Sie sich die auf der rechten Seite und erweitert. Wir wollen die Artikel insgesamt, aber Sie werden feststellen, dass der letzte nicht die rechte Seite berührt. Nun das Problem, das erwartet wird, bewegen Sie Ihre Maus zwischen die Lücke und Sie erhalten diese rosa Linie. Klicken, ziehen und verschieben Sie es nach rechts, um den Platz 230 zu vergrößern. Vergrößern Sie, wenn nötig, nur um sicherzustellen, dass Sie 30 bekommen, denn genau das haben wir berechnet. Denken Sie daran, dass wir 30 mal 2 ist 60, 1200 minus 60 ist 1140 geteilt durch 3, das ist Mehrwertsteuer. Ok? Mach dasselbe vertikal und du musst die Leinwandgröße vergrößern. Aber das ist leicht gemacht, indem Sie das Artboard auswählen und den unteren mittleren Griff nach unten ziehen. In Ordnung, ein Wiederholungsraster als nützlich, weil wir unsere Inhalte per Drag & Drop ablegen können und es wird alle sechs Karten füllen. Ich habe die Akten vorbereitet und Sie haben sie auch angehängt. Schnappen Sie sich die 64 diese und ziehen Sie sie über die graue Karte. Es ist wichtig, dass du über der Karte wirst und dass du dieses blaue Highlight siehst. Wiederholen Sie das gleiche Verfahren für die Titel, den Preis usw. Dies ist einer der größten Vorteile gegenüber Photoshop, indem verschiedene Produkte mit unterschiedlichen Titeln angezeigt werden, dass Design sich real anfühlt und es gibt eine gute Chance, dass der Kunde es mehr mögen könnte als ein Design, in dem das gleiche Produkt sechsmal gezeigt. Es gibt keine Diskussion, das ist viel besser. Übrigens, die Textdateien haben nichts Besonderes in sich. Nur ein Titel pro Zeile, sonst nichts. Okay, das ist also die Macht des Wiederholungsrasters. Oh, tut mir leid, ich habe vergessen, das Gewicht für jedes Produkt hinzuzufügen. Nun ist das Problem, ziehen Sie eine Kopie des Preises, indem Sie die Alt-Taste gedrückt halten. Das Ändern des Inhalts ist nicht erforderlich, da wir eine andere Textdatei per Drag & Drop ablegen. Sie können sie jedoch manuell ändern, damit Sie nicht verwirrt werden. Aber hier ist noch etwas. Lassen Sie uns den Titel etwas nach unten verschieben. Und wie Sie sehen können, tun sie alle dasselbe. Deshalb ist es am besten, mit aktiviertem Wiederholungsraster zu entwerfen. Es ist eine Sache, ein Produkt zu sehen, es ist ein anderes, um sechs verschiedene zu sehen. Okay, für die erste Version, lasst uns das versuchen, etwas ziemlich Grundlegendes. Zentriert den Titel und zeigen Sie es in Poppins fett 18 Pixel. Bitte stellen Sie sicher, dass Sie den Titel zusammen mit dem weißen Rechteck auswählen, und verwenden Sie dann den Befehl Ausrichtung. Lesen. Die Dinge sind hier ziemlich beschäftigt, aber wir werden es klären. Ich denke, wir legen den Preis links und die beiden Aktionen daneben. Also etwas in dieser Richtung. Grundsätzlich steht der Titel allein in einer Zeile. Dann die Gewichtung Kalorien auf beiden Seiten in der zweiten Zeile. Und schließlich die letzte in drei Preisdetails unterteilt. Und schließlich Karre. Nun, in Bezug auf die Wichtigkeit, dieser Titel ist König, zusammen mit In den Warenkorb und Details anzeigen. Das Gewicht und die Calvi ist nicht so sehr minimale Bedeutung. Also lassen Sie uns sie in Poppins 13 zeigen, normal, was im Grunde Körpertext ist. Es ist nur ein bisschen kleiner als das, was wir in der Halo-Idee für die Beschreibung verwendet haben. Dort haben wir das auf 14 erhöht. Okay, gutes Zeug. Verschiebt sie 20 Pixel vom Rand der Karte. Offensichtlich beide Seiten. Dieser leere Raum hier wird als Polsterung bezeichnet. Und es ist unglaublich wichtig, denn wenn man nicht genug Atemraum lässt, wird sich das gesamte Design abfühlen. Es wird sich beschäftigt und überladen fühlen. Lassen Sie uns nun die beiden Aufrufe zur Aktion behandeln. Ich schlage vor, dass wir eine Belastung hinzufügen, die die Unterseite der Karte für die Größe berührt. Ich denke 40 Pixel für die Höhe. Und in Bezug auf die Breite, denke ich, 1 Drittel, Sie sollten auch in Ordnung sein über die Farbe. Wir müssen darüber nachdenken, was wichtiger ist. Details anzeigen oder in den Warenkorb legen. Ich denke, die zweite, weil wir sicherstellen wollen, dass der Benutzer einen Kauf so schnell wie möglich tätigen kann. Also lasst uns es orange machen und offensichtlich die Grenze deaktivieren. Und noch eine Sache, die wir nicht lassen AT quadriert, also klicken Sie bitte hier und ändern Sie den unteren rechten Eckenradius die 15. Auf diese Weise wird es interessant sein, aber es passt auch auf die Karte für die Textebene. Gehen Sie mit Poppins, 13, halb fett, reinweiß. Okay, bitte zentrieren Sie sich sowohl horizontal als auch vertikal. Sie konnten Zeit damit. Beeilen Sie sich nicht wieder, Sie sollten an Ihrer zweiten Betrachtung mitarbeiten. Nun, das Problem ist mit der zweiten Taste. Machen wir es schwarz waren eine andere Farbe. Mangel kann jedoch ein bisschen zu maskulin sein. Es ist direkt neben Orange. So kann es interessant aussehen. Nun, es gibt nur einen Weg, es herauszufinden, also machen wir es. Während ich damit umgehen möchte, möchte ich Ihnen sagen, warum ich zögere, eine andere Farbe in diesem Design einzuführen. Nehmen wir an, wir werden nach dem schönen Blauton suchen. Nun, das muss im gesamten Design auftauchen. Und ich bin mir nicht sicher, ob das die richtige Entscheidung ist. Ich würde es vorziehen, Orange als die einzigen Action-Farben zu haben, so dass es wirklich auffällt. Okay, ändern Sie den Preis in Poppins 18 fett und stellen Sie sicher, dass er mit den Textebenen innerhalb der Belastungen zentriert ist. Sie sollten auch daran denken, 20 Pixel auf der linken Seite zu lassen , um gute Fortschritte zu machen. Aber um dir die Wahrheit zu sagen, ich bin nicht wirklich so aufgeregt über diese erste Version, aber keine Sorge. Es ist nur R das erste Mal. Wichtig ist die Tatsache, dass wir alle Elemente angelegt haben und wir die Dinge leicht ändern können. Oh, überprüfe den Titel. Sie sollten zehn Pixel von dem Foto lassen. Wir sind gerade fertig, aber vergessen Sie bitte nicht die Bewertung. Das ist ein wichtiger Punkt für den Besucher. Basierend auf der Bewertung kann er einen Kauf mit mehr Kompetenz tätigen. Hier ist, was ich vorschlage, ein weißes Rechteck, das wirklich abgerundet ist. Sagen Sie 130 Pixel, kein Strich, denn alle Fotos sind ziemlich bunt. Stellen Sie sicher, dass die Reihenfolge im Ebenenbedienfeld korrekt ist, andernfalls wird sie nicht richtig angezeigt. Der Text darin muss wirklich klein sein. Also Poppins 12 halb fett ist meine Wahl. Bold könnte auch funktionieren, aber das liegt ganz an dir. Und vergessen wir nicht den Stern. Ich werde ein flaches Symbol dafür verwenden, aber ich werde die Aufnahme anhalten, weil nichts Besonderes los ist. Suchen Sie einfach nach dem netten Stern. Und hier ist meins. Ich ziehe es hinein und ändere die Größe nach oben. Danke 16 Pixel sollte in Ordnung sein. Die Idee ist, dass dies nur ein kleines Detail ist. Wenn wir wollten, dass es auffallen, würden wir wahrscheinlich fünf Sterne verwenden. Aber ich denke, das würde einen großen Teil des Fotos vertuschen und das ist nicht ideal. Ok. Für den Farbcode. Gehen wir mit FDI, DD 07. Es ist ein weiterer Farbcode von meiner Marke, also weiß ich es auswendig. Nun, hier ist die letzte Sache, auf die Sie genau achten müssen. Natürlich zentriert der Stern und der Text Medulla Linie. Einfaches Zeug. Als nächstes lassen Sie fünf Pixel zwischen den beiden. Wieder, ganz einfach. Aber hier ist die Sache. Wir wollen jetzt, dies zentriert innerhalb des Rechtecks. Wählen Sie beide Elemente mit der Umschalttaste aus und gruppieren Sie sie. Sehen Sie, wie sich die Markierung geändert hat Lassen Sie mich zu Control Z rückgängig machen. Also sind beide ausgewählt und jetzt gruppiere ich sie. Ok, großartig. Als nächstes wähle ich auch das weiße Rechteck mit der Umschalttaste aus, so dass ich zwei Dinge ausgewählt habe. Sie können das Ebenenbedienfeld aktivieren, um zu sehen, was los ist. Also die Gruppe mit dem Stern und der Textebene, Das ist eine Sache. Und hier ist das Rechteck. Großartig. Verwenden Sie nun die Ausrichtungswerkzeuge. Und das ist dann, herzlichen Glückwunsch. Mein Rat ist, dass Sie diese beiden auch gruppieren, weil wir dieses Element 20 Pixel von oben und 20 Pixel von der Kante platzieren möchten . Und damit sind wir mit der ersten Version fertig, benennen Sie die Gruppe um, und wir können anfangen, über die nächste nachzudenken. Wir sehen uns in einer Minute. 25. Die zweite Version der Produktkarte: Hey, wir haben unsere erste Version gemacht, oder? Aber ich bin nicht allzu glücklich damit. Und ich denke, Sie fühlen sich genauso. Die schwarzen Frauen sehen keine Rasse aus. Bevor wir also mit dem Rest des Designs nach unten gehen, wählen wir diese Zeichenfläche aus und drücken Sie Control D, um eine Kopie zu erstellen. Kontrolle D wie in doppeltem Auszug. Ich denke, wir können es besser machen. Okay, Eines der Dinge, die ich testen möchte, ist, dass ich den Titel links ausrichten, Steuern, klicken Sie darauf und lassen Sie uns seine Ausrichtung nach links ausrichten. Bitte stellen Sie sicher, dass wir 20 Pixel vom Rand entfernt haben. Sie können die Alt-Taste gedrückt halten und die Maus dorthin bewegen , und Sie erhalten die Messung. Ein weiterer Vorschlag ist, dass wir diese Textebene eingrenzen, weil ich denke, dass wir das Gewicht des Produkts über die Kalorien bewegen. Grundsätzlich ist die Idee, den Titel auf zwei Zeilen und auf der rechten Seite, das Gewicht und die Kalorien zu haben . Tun Sie Ihr Bestes, um diese zu vergrößern und auszurichten. Bitte nehmen Sie sich Zeit damit. Du musst Geduld mit ihnen haben. Und wenn du fertig bist, denke ich, wir können alle Textebenen etwas nach unten verschieben , weil wir hier etwas mehr Atemraum haben. Ich denke, das wird besser aussehen. Nun, fragen Sie vielleicht, was ist, wenn die Titel extra lang sind? Was passiert dann? Nun, am einfachsten ist es, den Titel abzuschneiden. Dies ist ziemlich einfach von einem codierenden Standpunkt aus zu tun , und es ändert nicht das Aussehen des Produkts. Also benutze einfach Punkt, Punkt, Punkt am Ende. - Jetzt. Sicher, wir könnten den Coder bitten, die Schriftgröße so anzupassen, dass der gesamte Titel passt. Aber ich fand, dass das nicht so schön aussieht. Also im Allgemeinen ist Punkt, Punkt, Punkt, Punkt eine gute Möglichkeit, darüber zu gehen. Ok? Das ist schon ein bisschen besser, aber wir müssen die Last speziell Details betrachten behandeln , weil das die ist, die ich nicht mag. Hier ist die Situation. Dies ist nicht die Hauptaktion. Also schlage ich vor, dass wir sein Rechteck entfernen und den Text orange machen. Auf diese Weise werden die Menschen eher geneigt sein, auf In den Warenkorb zu klicken. Die Frage ist, sollten wir diese Textebene mit der Karte zentrieren? Also, was verteilen wir das mit dem Preis und dem Rechteck? Nun, in diesem Fall denke ich, dass die zweite Option mehr Sinn macht. Aber es gibt noch eine Sache, die man beachten muss. Ich möchte sagen, konsistent in meinen Entwürfen. Es ist eine der Möglichkeiten, um sicherzustellen, dass es besser aussieht. Loggen Sie sich ein und erstellen Sie ein Konto sind alle in allen Großbuchstaben. Jetzt sind die Kategorien gleich. Also denke ich, wir machen das Gleiche hier. Aber wie immer, probieren Sie es aus und sehen Sie, wie es aussieht. Das einzige große Problem ist die Tatsache, dass der Preis ziemlich nah an der Unterseite der Karte liegt und wir können ihn nicht erhöhen, ohne eine Fehlausrichtung zu verursachen. Mit diesen drei Lagen. Sie haben die imaginäre gerade horizontale Linie, die durch die Mitte dieser Ebenen geht. Wenn Sie einen von ihnen bewegen, entweder nach oben oder unten, ist das ein großer Fehler. Am meisten Wochenende kann es sein, die Größe der Schaltfläche „In den Einkaufswagen“ leicht zu erhöhen. Es sind jetzt 40, vielleicht 44, aber das war's. Wir können das nicht zu sehr verlängern, weil es einfach seltsam aussehen wird. Aber hier ist eine Idee, die funktionieren muss. Lassen Sie uns runter zur oberen linken Ecke. Wählen Sie im Eigenschaftenbedienfeld das erste Feld aus, und fügen Sie 15 Pixel ein. Nun, das ist kein sehr gebräuchliches Styling. Ich denke, es sieht interessant aus und es ist nicht schwer zu programmieren. Ich denke immer auch über diesen Teil nach. Indem Sie die Kosten niedrig halten, machen Sie den Kunden glücklicher und komfortabler. Okay, das ist die zweite Version der Homepage. Das Gitter ist viel besser. Ich bin viel glücklicher damit im Vergleich zum ersten. Es gibt keine Frage, aber ich denke, wir können es noch einmal geben, andere Version, eine andere Iteration. Dieses Mal würde ich gerne ein Symbol sehen, anstatt in den Warenkorb zu legen. Das sollte uns einen saubereren Blick geben. Aber es gibt nur einen Weg, um es herauszufinden. Also lasst uns innehalten und wir sehen uns in einem Augenblick. 26. Die dritte Version der Produktkarte: Hallo, hallo. Mal sehen, was wir diesmal tun können. Ich denke, wir können ein Symbol anstelle einer Textebene ausprobieren, die in den Warenkorb legen steht. Dies ist eine Variation der alten Version der Website, bei der es einen ähnlichen Ansatz gab. Und das liegt daran, dass man manchmal kein völlig neues Design braucht, ganz anders. Nur eine geringfügige Einstellung. Okay, probieren wir es aus. Wählen Sie die Zeichenfläche aus und erstellen Sie offensichtlich eine Kopie. Nun, der Führer In den Warenkorb Texte in Feuer up Wohnung icon.com für ein schönes Symbol zu suchen. In der alten Version war das ein Einkaufswagenwagen. Ich denke, wir benutzen diesmal einen Korb um einen Handheld-Korb. Ich werde dich nicht warten lassen, also bearbeite ich die Aufnahme. Hills würde ich wählen? Ich werde es kleiner machen, 26 mal 26, um präzise und weiß zu sein. Erinnern Sie sich noch einmal an diese beiden Dinge. Deaktiviert die Responsive Funktion und hatte das Schloss-Symbol, das Plus im Inneren, das wirklich sendet die richtige Nachricht hinzufügen in den Warenkorb. Dies sollte für die meisten Menschen, einschließlich der Zielgruppe dieser Website, ziemlich intuitiv sein. Je jünger die Menge ist, desto mehr können Sie sich über diese Art von Dingen sicher sein. Das Problem bei diesem Entwurf ist, dass die Belastung viel zu groß ist. Sicher könnten wir versuchen, den Text auch zu behalten, ohne etwas, das viel zu viel in meinem Buch ist, sollte dieser Bereich nicht um Aufmerksamkeit mit dem Foto konkurrieren. Aber weil es so breit ist und ein Symbol hat , zieht es sofort Ihr Auge. Also hier ist, was ich vorschlage. Wählen Sie die Form aus und rammte sie aus, machen Sie sie zu einem Kreis, 50 mal 50 Pixel. Dies ist ein sehr gebräuchliches Designelement, wenn Sie Erfahrung mit mobilen Apps haben. So Android oder iOS-Apps, Es ist ein klassischer Look, leicht zu verstehen. Aber wieder, das ist in der mobilen App. Wird es diesem Publikum gefallen? Wir können herausfinden, um Google Analytics zu tun, aber das ist darum. Wie auch immer, lassen Sie uns mit unserer Arbeit fortfahren. Wir haben diesen Knopf, aber wir können ihn nicht hier lassen, zumal der Eckenradius nicht übereinstimmt. Ich sage, wir legen es hier auf den Rand. Wie üblich, 20 Pixel von der rechten Seite. Mit ihm ist ziemlich groß Größe 50 mal 50. Und die Tatsache, dass es orange ist, denke ich, es sollte genug Aufmerksamkeit auf sich ziehen. Okay, die Sternebewertung von oben macht das Auto etwas zu schwer. Auf der rechten Seite ist hier zu viel los. Also, um es auszugleichen, bewegen Sie es auf der linken Seite, spiegeln Sie die Karte Taste. Übrigens, manchmal ist es wirklich schwer, die Messung zu sehen , die im Zweifelsfall in rosa erscheint. Sicher, Sie können wirklich vergrößern, aber Sie können das auch tun. Lassen Sie das Element die Kante berühren. Halten Sie die Umschalttaste gedrückt und tippen Sie auf die rechte Pfeiltaste, um Dimes. Das wird Ihnen 20 Pixel geben. Denken Sie also daran, dass ein Tippen ein Pixel ist, aber wenn Sie auch die Umschalttaste gedrückt halten, ist ein Tippen 10 Pixel. Zurück zu ihm, das Weiß auf Weiß funktioniert nicht gut, also lassen Sie uns eine Grenze aktivieren. Es gibt etwas zu sagen, zu riskieren bekommen, als es so zu verlassen, wie es war. Aber ich bleibe lieber auf der sicheren Seite. Ok. Wir machen gute Fortschritte, aber der untere Teil, es ist ein Chaos, gibt, was ich denke. Die Details der sekundären Aktionsansicht sollten sich am rechten Rand befinden. Der Preis sollte auf der linken Seite bleiben, denn das scheint natürlich. Wir lesen von links nach rechts, neben dem Preis sollten wir das Gewicht des Produkts zeigen. Weil ich nochmal denke, das scheint fair zu sein. Du musst wissen, was du kaufst. Und daneben die Anzahl der Kalorien. Nun, das erfordert ziemlich viel Bearbeitung, aber ich werde schnell ins Nasse gehen, damit du nicht auf mich warten musst. Bitte beachten Sie, dass in einem Wiederholungsraster hinzugefügt , wenn Sie die Position, Größe oder Farbe eines Objekts alle Karten aktualisiert werden, wenn Sie die Position, Größe oder Farbe eines Objektshinzugefügthaben. Aber wenn Sie den Inhalt darin ändern, der eigentliche Text, der sich nur auf diese bestimmte Karte auswirkt. Das ist also etwas, an das man sich erinnern kann. Wie auch immer, wir sind fast da. Alles, was übrig ist, ist ein bisschen das Anpassen des Abstands 0. Und für das ausgewogenere Aussehen, ich denke, wir können den Titel auf beide Arten auf der Karte zentrieren, aber auch als Textebene. Fühlen Sie sich frei, um es auch ein wenig nach unten zu bewegen. Nun, hier ist die Sache. Dies ist nur eine andere Version des Rasters. Wir können immer weiter anpassen oder neue Ideen einfallen. Wichtig ist, dass Sie mit 80 bis 90 Prozent Liebe zum Detail arbeiten. Willst du Geschwindigkeit? Ja. Aber Sie möchten auch überprüfen, ob dies lebensfähig ist oder nicht. Das bedeutet, dass Sie die Kanten richtig einrichten müssen. Sie müssen die Dinge in der Linie messen, alles, aber nicht 100% genau richtig? Auf der anderen Seite, wenn Sie schlampig sind und Sie nichts davon tun, schauen Sie sich das Design an und Sie werden denken, Hmm, etwas fühlt sich nicht an. Das könnte Ihr Mangel an Liebe zum Detail sein. Auch hier ist die Idee, wenn Sie die Variante entwerfen, geben Sie ihr einen fairen Schuss, indem Sie sie ziemlich korrekt ausführen. Okay, sagen wir einfach, dass wir fertig sind. Ich werde das Spielsymbol von der oberen rechten Seite des Bildschirms drücken , so dass wir schnell durch die Entwürfe fahren können. Ich werde meine Tastatur benutzen, das wird Tasten dafür. Okay, der erste ist in Ordnung. Aber offensichtlich ist der schwarze Knopf irgendwie hässlich, kein anderer Weg um ihn herum. Das nächste Design mit dieser ausgefallenen Belastung, Es ist interessant, einfach zu bedienen, und es scheint nicht überfüllt in irgendeiner Weise. Der letzte ist moderner, modernerer. Aber ich denke, es ist riskant. Manche Leute verstehen diese Schaltfläche „In den Einkaufswagen“ möglicherweise nicht. Tust du und ich? Es ist offensichtlich, sicher. Wie konntest du es nicht sehen, oder? Aber erinnere dich an die Zielgruppe. Nehmen Sie nicht an, dass die Leute es schaffen. Sie müssen es so einfach wie möglich machen. So kann auch meine Oma ohne Kopfschmerzen zurechtkommen. Vor diesem Hintergrund scheint das zweite Design die beste Option als Designer zu sein, ich bevorzuge die dritte, vielleicht 60 Prozent gegenüber den 40 Prozent. Die zweite Zeile ist in der Nähe. Aber dennoch werden wir mit dem zweiten Design fortfahren. Und damit ist es Zeit, weiterzumachen. Ich freue mich auf Ihre eigene Version. Das ist der wichtigste Teil, also bin ich wirklich neugierig. 27. So gestaltest du einen sauberen und modernen FAQ-Bereich: Hallo und willkommen zurück. Der nächste Abschnitt sollte ziemlich gerade für das Wort sein. Wir suchen nach einem FAQ-Bereich, der sauber und modern ist. Häufig gestellte Fragen zu FAQ. Beginnen wir mit einem Titel, aber denken Sie daran, an der zweiten Zeichenfläche zu arbeiten. Sie können es zur Seite verschieben, nur für den Fall, dass Sie das Projekt besser organisieren möchten. Okay, der Titel, er sollte zentriert sein und wir wollen diese schicke Schrift nicht. Es gibt keinen Grund dafür. Es wäre zu viel. Also Poppins Bot wird 26 sein, sollte gut sein. Jetzt gibt es eine Menge Kopiereinfügungen, aber fangen wir mit dem ersten an. Für die Formatierung. Gehen wir mit Poppins, halb fett, 16 Pixel. Das ist klein genug, so dass es nicht mit dem Titel um die Aufmerksamkeit konkurriert. Aber groß genug, dass es auffällt. Wir halten es in schwarz, aber bitte links ausrichten. Nun, okay, für den Textkörper möchte ich regelmäßig verwenden. Das ist ein sehr großer Standard, wie die Größe 14 Pixel sein sollte. Ok? Bitte stellen Sie sicher, dass die Textebene breit genug ist. Ich würde sagen, etwa 500 Pixel oder so. Und das liegt daran, dass wir den Zwei-Säulen-Ansatz mit einer anständigen Lücke in der Mitte wollen. Wenn man bedenkt, dass wir es mit einem aktiven Bereich von 1200 zu tun haben. Das ist, woher die 500 Pixel kommen. Die meisten FAQ-Abschnitte verfügen über einen Controller. Das ist eine Last, die verwendet wird, um die Antwort zu erweitern oder zu kollabieren. In unserem Fall sollte die erste Frage bereits geöffnet sein, daher benötigen wir das Minussymbol. Sie können flat icon.com verwenden und nach dem Minussymbol suchen, das sich innerhalb des Kreises befindet. Oder natürlich könntest du es selbst machen, denn es ist so ein einfacher Job. Aus welchem Grund auch immer, ich liebte dieses Zifferblatt in Social-Media-Symbolen, aber auch in anderen Icons. Kreise sind im Moment stilvoll. Okay, die Form sollte 26 mal 26 sein. So ziemlich klein. Wenn Sie ein Symbol nicht schnell genug finden können, könnten Sie Ihr eigenes tun, genau wie ich gerade erwähnt habe. Zum Beispiel kann das Minus eine einfache Linie sein, zwei Pixel dick, dann 12 Pixel oder so. Was das Web betrifft, ist wichtig, wie man alles zusammenfasst. Erstens, die beiden Formen für ein Element, also das ist eine Gruppe. Als nächstes muss das Symbol mit dem Titel ausgerichtet werden, und das ist eine andere Gruppe. Schließlich sollte die Beschreibung etwa 10 Pixel vom Titel entfernt platziert werden. Apropos Titel, ich glaube, wir haben diesen Raum vergessen. Wir wollen überall von 30 bis 50 Pixel. Und etwa das gleiche zwischen der ersten Frage und dem Titel. Solange Sie nicht mit diesen Werten übertreiben, sollten Sie ein schönes Design haben. Ich werde die Dinge beschleunigen. Achten Sie einfach auf den Abstand zwischen den Fragen. Dies ist einer der Gründe, warum eine Gruppe, der Titel mit dem Symbol. Unnötig zu sagen, wir brauchen das Plus-Symbol anstelle eines Minus für die anderen. Da ich im Hintergrund arbeite, Betrachten wir andere Ansätze, Variationen jetzt. Könnten wir alle ungeöffneten Fragen orange machen, entweder den Titel oder das Symbol oder vielleicht beides. Nun, ja, das könnte funktionieren, aber das wäre eine Menge Orange, richtig? Lassen Sie uns eine andere Idee erforschen. Könnten wir eine Karte für jede Frage, für jeden Titel verwenden? Nun, ja, aber nochmal, wir brauchen eine für jede einzelne Frage, nicht für die Spalte selbst. Und in dieser Situation würden wir mehr Platz zwischen jedem Gegenstand brauchen. Ich bin nicht ausschließen bekommen, ich sage nicht nein, aber ich glaube nicht, dass es eine Menge an den Tisch bringt. Außerdem ist es noch viel mehr Arbeit. Und der Blick wird nichts sein, über mehr als das zu schreien. Es gibt etwas über die Bedeutung dieses Bereichs zu sagen. Niedrige Priorität, richtig? Aus diesem Grund ist es am besten, es ohne Hintergrund zu zeigen. Übrigens, falls Sie das Kunstboard vergrößern möchten, gehen Sie auf mindestens 2000 Pixel, was sich noch auf der kleinen Seite befindet. Heutzutage bevorzuge ich kürzere Seiten, einfach weil Geschwindigkeit ein so wichtiger Faktor ist, sowohl in Bezug auf den Umsatz, aber auch für die SEO, Suchmaschinenoptimierung. Deshalb möchte ich nicht viele Illustrationen und Icons und meine Entwürfe hinzufügen. Sicher, meine Entwürfe werden nicht so schön sein wie die, die du auf Dribble findest. Aber auf der anderen Seite, nur sehr wenige Designs, die Sie auf diesen Arten von Websites sehen, werden jemals codiert. Und wenn es jemals codiert wird, ist das Budget mindestens $20.000. Okay, hier ist unser Design und ich bin wirklich glücklich damit. Wir hätten in der zweiten Spalte noch ein paar Fragen hinzufügen können, aber ich glaube nicht, dass das der richtige Ansatz wäre. Ich weiß, dass Sie es ausgleichen wollen, aber was, wenn Sie die erste schließen, die erste Frage als das, was wir für die Fragen auf der linken Seite und sechs auf der rechten Seite haben würden. Nicht cool. Also wieder, ich bin sehr zufrieden damit, da es schön, sauber und modern ist. 28. Erstelle ein Newsletter-Anmeldeformular: Hallo und willkommen zurück zu diesem Vortrag, wo wir ein Newsletter-Anmeldeformular erstellen. Dies wird normalerweise direkt über der Fußzeile platziert, oder manchmal ist es innerhalb der Fußzeile. Wir wollen diese sauberen, femininen Designs. Lassen Sie uns also mit einem abgerundeten Rechteck beginnen. Ich habe während unserer Pause verschiedene Einstellungen ausprobiert und ich fand, dass die folgenden Werte am besten funktionieren. 780 von 80. Okay, bitte zentrieren Sie es auf der Leinwand und erhöhen Sie den Eckenradius auf den Maximalwert. Wenn das erledigt ist, wenden wir die rosa Grenze an. Grundsätzlich steht dies im Einklang mit dem Kategoriemenü von oben. Das meinte ich, als ich sagte, dass wir in unserem Design konsequent bleiben sollten. Wenn wir entschieden haben, dass der maximale Eckenradius der richtige Weg ist, dann halten Sie ihn absolut überall. Jetzt, okay? Nun ist es wahr, dass der Autoknopf nicht dem Anzug folgt, aber das ist, wo Erfahrung ins Spiel kommt. Manchmal müssen Sie die Regeln für das bessere Design biegen. Ich weiß, es ist ein bisschen kompliziert, aber wenn Sie mehr und mehr Erfahrung sammeln, erfahren Sie über diese Ausnahmen, Bezug auf den Abstand, was die Pixel oder so gut sein sollten. Ich liebe die Tatsache, dass Adobe XD Ihnen hilft, Ihre Abstände anzupassen, graue Sachen für den Text, Lassen Sie uns etwas schreiben wie unsere Geschichte herausfinden. Poppins Bold 16 Pixel in allen Großbuchstaben. Wieder, wann immer das möglich ist, verwenden Sie bitte nicht Lorem Ipsum ist kein toller Blick. Platzieren Sie es irgendwo auf der linken Seite, rechts darunter. Gehen wir mit einem kleinen Unternehmen mit großen Träumen. Es ist unwahrscheinlich, dass dies der endgültige Text sein wird, aber es ist ein anständiger Anfang. Zeigt das und Poppins für Dean regelmäßig. Ich schlage auch vor, dass Sie diese beiden Ebenen gruppieren, weil es nützlich sein wird, wenn wir die Ausrichtungswerkzeuge verwenden. Okay, im Moment möchte ich sie zentrieren, um diesen Raum zu bekämpfen. Idealerweise würde ich gerne die letzten Tags hier haben , damit ich mit mehr Präzision arbeiten kann. Aber als Webdesigner sollten Sie wissen, dass diese Dinge Zeit brauchen, um eine großartige Kopie zu finden. Erwarten Sie also nicht, dass Ihr Kunde sie in dieser Phase des Designs hat. Okay, zurück zu nass. Bitte stellen Sie sicher, dass Sie oben und unten den gleichen Platz für das Feld haben , in dem Sie Ihre E-Mail-Adresse eingeben. Gehen wir mit zwei AD um 40. Jetzt habe ich persönlich viele verschiedene Stile im Laufe der Jahre ausprobiert, was ich vorschlage. Runden Sie die Ecken in erster Linie denn das Feld muss dem Hintergrund entsprechen, deaktivieren Sie den Strich und öffnen Sie die Farbauswahl. Ich kenne einen Hex-Code auswendig, weil ich das oft auf weißen Hintergründen benutzt habe. Und das ist F3, F3, F3. Dies ist ein Hellgrau, das in unserem Fall gut funktioniert. In der Tat bin ich damit zufrieden. Denken Sie daran, keinen Schlaganfall, keine andere Dekoration. Okay, drinnen wird es unsere Hand hinzufügen. Daher sind die meist in einem sehr ausgewaschenen Grau dargestellt. Aber ich glaube nicht, dass das hier möglich ist, also halten wir es schwarz. Geben Sie Ihre E-Mail-Adresse ein. Poppins, reguläre 12 Pixel. Wir müssen alles arrangieren. Aber zuerst brauchen wir den Call-to-Action-Button. Bitte kopieren Sie den Register-Button aus der Kopfzeile. diesem Grund wollte ich, dass das Feld 40 Pixel hoch ist. Der Hintergrund ist ziemlich viel größer. Aber für das bessere Glück, werden Sie Last sollte immer mit dem Feld übereinstimmen, vor allem in diesem horizontalen Layout. Also bedenken Sie das. Sie können diese Information in jedem Projekt verwenden. Da die Last die Hälfte der Höhe beträgt, bedeutet dies, dass wir 20 Pixel auf drei Seiten haben, unten und rechts. Ok, tolles Zeug. Auch hier ist die linke Seite, wo wir unseren Text haben, nicht so präzise, aber es ist für den Moment in Ordnung. Nun, während ich alles erledige, lassen Sie mich Ihnen ein bisschen mehr über dieses Formular erzählen. Könnten wir etwas Weiblicheres machen? Ja, vielleicht. Aber die meisten Designgalerien, die schöne Formen zeigen , sind in der Regel größer und brauchen ziemlich viel Codierung. Was wir hier entworfen haben, das sind buchstäblich Minuten. Denken Sie daran, dass ich in diesem Fall sowohl ein Designer als auch der Geschäftseigentümer bin. Ich kümmere mich darum, wie viel Geld das mich kosten wird. Aber wenn Sie mich mit einem schickeren Newsletter für sie beeindrucken wollen, gehen Sie bitte voran und werden kreativ. Okay, wenn alles aufgeknöpft ist, hier ist das Design. Bitte denken Sie daran, alles zusammen zu gruppieren. Dieses Formular, aber auch die FAQ oben. Ich glaube, ich habe vergessen, das in der vorherigen Vorlesung zu erwähnen. Und damit machen wir eine kurze Pause. 29. Wie du ein schönes Fußfedern gestaltest,: Hallo und willkommen zurück. Lassen Sie uns eine schöne Fußzeile entwerfen. Das wird Zeit und Geduld brauchen. Also, bitte hetzen Sie es nicht. Beginnen Sie mit dem Rechteck 1920. Das ist etwa, oh, sagen wir, 4000 Pixel hoch. Bitte zentrieren Sie es auf der Leinwand und deaktivieren Sie wie gewohnt den Rahmen. Hier gibt es eine große Entscheidung. Sollten wir es weiß machen, was leichter für das Auge und weiblicher sein wird? Oder gehen wir für das Schwarz, das ein bisschen kälter, aber gehobener, luxuriöser scheint. Hat die Entscheidung, wie bei einem Raster von Produkten, wird alle Ideen ausführen. Und wir werden sehen, was ist, wenn wir sie tatsächlich auf der Leinwand sehen. Okay, fangen Sie mit den Titeln für jeden Abschnitt an. Für den Moment gehen wir mit der weißen Version. Poppins 16, halb fett in allen Kappen. Ich weiß, dass wir diese Behandlung für das Hauptmenü verwenden, aber die Idee hier ist, den Titel von den eigentlichen Menüpunkten zu trennen. Bitte links richten Sie die erste mit der linken Führung und lassen Sie etwa 50 Pixel von oben, geben oder nehmen. Natürlich sollte der mittlere auf der Leinwand zentriert sein. Und der letzte, nun, wir werden das sehen. Für jetzt. Lassen Sie uns kopieren fügen Sie die Textebenen jetzt. Okay, jetzt, diese sollten in Poppins 13 gezeigt werden, halb fett und orange. Und das ist, weil das alles Links sind. Für mich ist die Verwendung aller Kappen in großen Mengen aus dem Fenster. Obwohl das Hauptmenü in allen Großbuchstaben angezeigt wird, werde ich hier in der Fußzeile nicht alle Großbuchstaben verwenden. Es wäre einfach viel zu viel. Nun gate, lassen Sie etwa 20 leere Pixel zwischen ihnen und dem Titel. Aber das Wichtigste hier in der Fußzeile ist die Zeilenhöhe. Bitte erhöhen Sie es bis zu 30 Pixel, vielleicht sogar noch mehr. Und hier ist die Sache, von der die meisten Designer nicht zu wissen schienen. Als Unternehmer müssen Sie bestimmte Links veröffentlichen, wie Datenschutzrichtlinien Geschäftsbedingungen und viele andere Dinge, die gesetzlich vorgeschrieben sind. Jedes Land ist ihr Freund und ihr kennt vielleicht nicht alle Gesetze. Aber was wichtig ist, ist, dass Sie dem Kunden einen Platz für die geben, all diese Informationen mit einigen Designern tun, ist sie eine Mini-Fußzeile erstellen. Die Zeichenlinie, sie fügen den Copyright-Hinweis hinzu, und das ist, dass aus funktionaler Sicht, das ist nicht cool. Weniger von dem, was ich weiß, die meisten SEO-Agenturen wollten diese Längen. Nun, egal, was Sie darüber empfinden, ich denke an Essen, dass sie mindestens drei Spalten haben sollten und es mindestens 250 Pixel hoch sein sollte. Okay, für die mittlere Säule, mal sehen, was ist. Ich möchte hinzufügen, eine Präsentation für die Influencer und eine weitere für die Unternehmer, eine PDF-Präsentation. Nun, das sollten Knöpfe sein. Beginnen wir also mit einem einfachen Rechteck. 300 mal 50 sollten eine gute Größe sein, ein bisschen größer als unsere regulären Calls to Action. Aber das liegt daran, dass ich ein großes Label will. Deaktivieren Sie zuerst die Grenze und runden Sie die Ecken ab und machen Sie sie offensichtlich orange. Es hat das Herausragende. Ich hoffe, Sie haben sich an das Assets-Panel gewöhnt. Wenn Sie aus Photoshop kommen, weiß ich, dass es ein bisschen schwierig ist, das Ebenenfenster nicht immer sichtbar zu haben. Aber nach einer Weile gewöhnt man sich daran. Okay, hier ist das Label für die Influencer, die Overs fördern. Das ist übrigens ausgesprochen. Diese muss zentriert und oben an den Stützen von der linken Seite ausgerichtet werden. Okay, und hier ist ein kleines Detail. Hinter dieser Schaltfläche befindet sich ein Dropbox-Link. Und da es sich um eine PDF handelt, die auf Dropbox gehostet wird, kann ich ganz einfach anpassen, ohne den Link ändern zu müssen. Ich weiß, es klingt wie eine kleine Sache, aber angesichts der Plattform, auf der diese Website gebaut wird, macht diese Arbeit viel Sinn. Okay, duplizieren Sie die Last. Und lasst uns über den Stil nachdenken. Eine knifflige Situation hier, ein schwarzer Knopf ist keine tolle Idee. haben wir in der Produktliste gesehen. Die Marke, die einen blauen Farbton hat, aber es ist nicht schön. Für den Moment riskiere ich, indem ich eine neue Farbe auf eigene Faust finde. Wenn man bedenkt, desto weiter, sollte dies mit den meisten Kunden in Ordnung sein. Oh, übrigens, lassen Sie 20 Pixel zwischen den beiden Lasten. Wir haben hier jede Menge Platz, also gibt es keinen Grund, sie zusammenzufassen. Okay, gehen wir weiter für die Kontaktinformationen, die ich für meinen Notizblock vorbereitet habe. Diese Kolumne muss in Poppins, ihrem ordentlichen Dekan, gezeigt werden. Dies sind einfache Texte, also keine Notwendigkeit, dass es größer oder fett oder eine andere Farbe sein muss. Ich denke, das ist einer der größten Fehler, die Anfänger oft machen. Die Übergröße ihrer Textebenen. Alles ist riesig, muss elegant und raffiniert sein. Das x, das über 16 Pixel ist, sieht normalerweise nicht gut aus. Und hier ist noch etwas. Während ich im Hintergrund arbeite. Sehen Sie, wie schön und ausgewogen das aussieht. Wir hätten platzieren können, wir arbeiten zusammen auf der rechten Seite. Aber dann hätten wir etwas von diesem Gleichgewicht verloren. Denken Sie daran, wir haben die volle Kontrolle. Also lasst uns so handeln. Für den Text auf der rechten Seite, Poppins 13, halb fett und orange. Dies muss genau die Linie sein, damit es zu unserem Führer passt. Übrigens, haben Sie bemerkt, wie sehr diese Guides uns geholfen haben? Ohne sie wäre unser Leben so viel schwieriger gewesen. Die Fußzeile ist ein guter Ort, um etwas Kreativität hinzuzufügen. Stellen Sie einfach sicher, dass es etwas ist, das nicht viel Zeit in Bezug auf die Entwicklungskosten in Anspruch nehmen wird. Die Dinge laufen großartig. Aber ich möchte etwas hinzufügen, das ich geteilt habe, das über den aktiven Bereich geht. Das ist etwas, was ich in den letzten Jahren gemacht habe und ich denke, es funktioniert großartig in fast jeder Situation. Die Linie sollte dann ein Pixel sein. Und in diesem Fall denke ich, wir werden den Ping benutzen , den wir absolut überall benutzt haben. Nun, okay, für die Entfernung, stellen Sie sicher, dass Sie den gleichen Betrag wie oben verwenden. Also, wenn Sie für die 50 Pixel dort gegangen sind, 50 wird auch hier arbeiten. Ok, Cool. Jetzt endlich, auf beiden Seiten werde ich ein bisschen Text hinzufügen. Der Copyright-Hinweis, wer machte das Design und so weiter. Dies ist nicht obligatorisch, aber es ist ein weiterer Ort für Längen. Und wir zeigen diese und Poppins 12 Pixel regulär. Also werden diese nicht Ihre Aufmerksamkeit erregen. Und nach dem Tod ist die Homepage fertig. Natürlich müssen wir alles gruppieren und den überschüssigen Raum von unten trimmen. Dies sind alle Details, die sich summieren, also bitte hetzen Sie es nicht. Ich weiß, du hast es eilig, fertig zu werden und zur mobilen Version zu wechseln, aber nehmen wir uns Zeit damit. Bevor wir enden, bemerkte ich, dass einige Leute über die Qualität von PNGs beschwert haben, die aus Adobe XD kommen , was sie handhaben Standdesigns exportiert als PDFs aussehen schärfer, viel besser als PNGs. Auch hier besteht eine sehr gute Chance, dass Sie dieses Problem nicht haben werden. Aber sein Bestes wissen Sie darüber, Adobe XD wird sehr oft aktualisiert und das kommt mit sowohl positiven als auch negativen. Okay, lassen Sie uns die nächste Vorlesung beenden. 30. Letzte Variation und Gedanken über die Homepage: Hallo und herzlich willkommen zur letzten Lektion über die Homepage. Ich erstelle eine Kopie davon und ändere schnell das Farbschema für das weitere von weiß zu schwarz. Nun, nun, ich habe damit gehandhabt. Lassen Sie mich Ihnen meinen Eindruck vom Gesamtdesign erzählen. Ich denke, es ist weiblicher als das alte Design. Keine Frage darüber. Das tocar-Tasten scheint eine bessere Wahl im Vergleich zu einem Symbol zu sein. Die alte Funktion der Nikon, obwohl, um fair zu sein, Ich kenne meine Analytik sehr gut. Meine Umrechnungsrate lag in den letzten drei Monaten bei vier bis 5%. Nun, das findest du vielleicht seltsam. Wenn die Konversionsrate so hoch ist, der Branchendurchschnitt bei 2%. Übrigens. Warum riskieren Sie es mit einem Redesign? Nun, ich möchte es ausprobieren. Ich möchte sehen, ob ich höher gehen kann, aber auch meine Produkte besser präsentieren kann. Und wenn Sie die Kosten berücksichtigen, wird dies sehr wahrscheinlich wahrscheinlich $200 in Bezug auf die Codierung verursachen. Und das ist eine sehr kleine Menge, weil ich keine großen Änderungen eingeführt habe. Alles, was wir entworfen haben, kann mit reinem CSS-Code gemacht werden. Deshalb sind die Kosten so niedrig, und deshalb ist das im Grunde kostenlos. Wenn es besser als fantastisch funktioniert, wenn es nicht der Fall ist, kann ich leicht zurückkehren. Außerdem werde ich keine große Entwicklungsfirma benutzen. Stattdessen verwende ich einen Freiberufler, um die Kosten niedrig zu halten. Wir haben bereits eine großartige Beziehung, also ist es ein Win-Win-Win. Okay, nachdem alles gesagt und erledigt ist, hier ist die schwarze Fußzeile. Jetzt spielte das Design, verwenden Sie die Wiedergabe-Option von oben rechts und gehen Sie hin und her. Das ist wirklich knifflig. Ich bin mir nicht sicher, welcher der Bessere ist. Aber ich bin John nur ein bisschen mehr auf die leichte Version. Vielleicht sind es 55 gegen 45. Es ist also wirklich, wirklich nah zwischen ihnen. Ich bin mir ziemlich unsicher. Wie auch immer, wenn Sie verkleinern und das gesamte Design sehen, können wir sehen, dass die schwarze Fußzeile mit der schwarzen oberen Leiste verbunden ist. Die meisten Modeunternehmen verwenden auch diesen Stil, schwarze obere Leiste und schwarze Fußzeile. Aber es ist vielleicht ein bisschen zu hart für die meisten Frauen und für das, was ich hier zu tun versuche. Wenn man bedenkt, dass AT denke, ich werde mit einer weißen Version bleiben. - Ja. Ok. Lassen Sie uns mit der weißen Version gehen. Ich bin wirklich neugierig, was Sie schaffen werden, aber ich möchte einen Moment Zeit nehmen und Sie daran erinnern, bitte verlassen Sie sich nicht auf Ihre Phantasie. Sie haben die Gestaltungsprinzipien noch nicht durchgemacht. Also bitte versuchen Sie nicht, etwas aus dieser Welt zu erschaffen. Suchen Sie nach tollen Ideen und setzen Sie sie um. Aber bitte nutze deine Fantasie nicht. Okay, wir sehen uns nach der Pause. Wir haben die Produktseite, den Griff und dann die mobile Version für beide Seiten. Vielen Dank. 31. Analysen, wie wir die Produktseite verbessern können.: Hey, hier ist Chris, willkommen zurück zu unserem Projekt. In dieser Neugestaltung besteht unser Hauptzweck darin, das Ganze femininer und gehobener zu machen. Und ich freue mich sehr, das zu sagen. Vielen Dank haben wir es geschafft, genau das mit diesem Homepage-Design zu tun. Nun stellt sich die Frage, wie können wir die Produktseite verbessern? Nun, für die Desktop-Version, ich denke, wir werden nicht viel tun. Und das liegt daran, dass die Schriftänderung wahrscheinlich die größte Bearbeitung sein wird. Die Struktur ist in Ordnung. Aber sonst gesagt, ich sehe keinen Weg, um es zu verbessern. Ich habe es gerade vor ein paar Monaten gelesen. Abgesehen davon, denke ich, dass wir ein bisschen Arbeit an der Spitze tun können wo diese Social-Media-Icons nicht so viel helfen. Mehr als das, ich denke, der größte Unterschied wird auf der mobilen Version dieser Seite gemacht werden. Und das liegt daran, dass 90% des Besuchs der Website von Mobiltelefonen stammt. Dort gibt es viel zu tun, aber wir müssen uns zuerst um die Desktop-Version kümmern. Ohne sie können wir die responsive Version erstellen. In Bezug auf den Rest des Projekts. Kontaktieren Sie uns Seite, die Kasse Seite. Die sind großartig, wie sie sind. Ich würde nicht riskieren, irgendetwas zu ändern, weil sie gut funktionieren, wie sie sind. Gesegnet, um ehrlich zu sein, habe ich einige Änderungen am Checkout-Prozess vor kurzem vorgenommen, so dass es wenig, was ich tun kann, um es noch besser zu machen. Ich sammle immer noch neue Informationen von Google Analytics, um Tracking-Software. Aber nochmal, der Punkt ist, dass wir diese Seiten nicht entwerfen werden. Besser gesagt, wir werden sie nicht neu gestalten. Mit dem. Verstanden. Lassen Sie uns eine Kopie der Homepage erstellen, die mit der weißen Fußzeile, und löschen Sie bitte alle Inhalte in der Mitte. Also im Grunde werden wir mit einem oberen und unteren Teil dieses Designs verlassen werden. Wir sollten auch das Hauptmenü ändern. Wir sind nicht mehr auf der Homepage. Stattdessen gehen wir zu den Produkten über. Machen Sie diesen Menüpunkt orange, und positionieren Sie die Linie darunter neu. Okay, die Produktseite ist wichtig in dem Sinne, dass sie viele Informationen enthält, wie wir sie strukturieren, ist der Schlüssel. Hier werden die Verkäufe getätigt oder verloren. Wir müssen uns darüber im Klaren sein, was wir präsentieren müssen, in welcher Weise und in welcher Reihenfolge. Es gibt eine Menge zu entpacken, aber bitte haben Sie Geduld und warten die mobile Version, wo wir in jede Menge Details bekommen. Lasst uns jetzt Schritt für Schritt machen. Wir machen eine Pause und dann fahren wir mit der Desktop-Version fort, die in nur wenigen Minuten erledigt werden sollte, wahrscheinlich vier oder fünf Videos höchstens. Lasst uns da reingehen. 32. Das Layout für den oberen Teil der Produktseite: Hallo und willkommen zurück. Listen richten alles ein, indem ein Rechteck mit einer Breite von 1200 Pixeln hinzugefügt wird. Was die Höhe angeht, lasst uns vorerst mit 300 gehen. Die nächsten Schritte sind der Klassiker. Sie sollten zu 100% in Ihrem Gedächtnis sein. Zentrieren Sie es zuerst und in erster Linie aktiviert dann die Rahmenfarbe , die für den Eckenradius denken, das ist 15 Pixel. Schließlich habe ich für diese Position darüber nachgedacht, 10 Pixel zu verwenden, um es so kompakt wie möglich zu halten, aber ich denke, das wird überfüllt aussehen. Also 20 Tage. Die Galerie, die derzeit auf der linken Seite ist, denke ich, das sind die klassischen Positionen, also werde ich sie nicht ändern. Ich werde es so behalten, wie es ist. Was ich ändern möchte, ist der leere Raum um das herum. Ich glaube nicht wirklich, dass das nötig ist. Also lasst uns das machen. Lassen Sie uns dieses Rechteck duplizieren und die Größe ändern. Ändert die Farbe natürlich jedes zufällige Grau. Und lasst uns über die Größe nachdenken. Er endet mit Ihrer Erfahrung muss ins Spiel kommen. Denken Sie darüber nach, was wir auf der Homepage gemacht haben und halten Sie sich, wenn möglich, an diesem Seitenverhältnis. Und das liegt daran, dass Sie das kurze und breite Foto nicht auf einer Seite wollen. Und dann platzieren Sie eine auf der zweiten Seite, direkt auf der Produktdetailseite. Das würde nicht viel Sinn ergeben. Nun, wenn wir einen Blick auf unser Gitter werfen, Ich werde Foto war 380 Pixel breit und 250 groß. Fangen wir damit an. Und je nachdem, wie unsere Inhalte passen, wird es vergrößern, oder vielleicht machen es 300 oder was auch immer benötigt wird. Okay, das sind also 250. Vergessen wir nicht die abgerundeten Koordinaten. Offensichtlich sollte die rechte Seite abgesetzt werden. Also nehmen Sie sich einen Moment Zeit und kümmern Sie sich darum. Ich habe einige Designs gesehen, bei denen dieser Teil gerade übersprungen wird und das ist ein klarer Ausführungsfehler. Bitte tun Sie das nicht. Das sollte also 15, 0, 0 sein. Übrigens experimentiere ich ständig mit meinem markierten Design. Seien Sie also nicht überrascht, wenn die Live-Website ein völlig anderes Label-Design hat. Okay, graues Zeug. Gehen wir zum Titel. Kopieren Sie das einfügen und lassen Sie uns über die Größe nachdenken. Die FAQ auf der Homepage wurde in Poppins gezeigt 26 bot würde. Ich schlage vor, dass wir das Gleiche hier benutzen? Das ist unser H1. Bitte beachten Sie übrigens, dass wir diesen Stil hier im Asset-Panel hinzufügen und ihn dann auf die gleiche Weise anwenden können, wie wir die Farben von oben angewendet haben. Für größere Projekte würde ich wahrscheinlich Komponenten verwenden, was meine Schaltflächen, die Kopfzeile und so weiter. Das liegt daran, dass, wenn ich etwas aktualisieren möchte, Komponenten mir erlauben würden, alles auf einmal zu bearbeiten. Obwohl diese Funktionen mir geholfen haben, schneller zu arbeiten als Ecken zu schneiden, würde ich es lieber langsamer machen und Ihnen Schritt für Schritt alles zeigen, die altmodische Methode. Ich möchte nur, dass du weißt, dass XD viele Partytricks hat, viele Möglichkeiten, deine Arbeit schneller zu machen. Bitte sehen Sie sich meine XD-Masse der Klasse an, wenn Sie daran interessiert sind. Zurück zu nassen Blättern, Blätter, 50 Pixel zwischen dem Titel und dem Foto, und wahrscheinlich 50 von den oberen zwei. Nun, das ist ziemlich viel, aber wir werden die Brotkrumen als nächstes hinzufügen. Breadcrumbs sind sowohl in Bezug auf SEO nützlich, aber sie helfen auch, den Benutzer zu führen. Dies zeigt, wo Sie sich auf der Website befinden. Es ist etwas ziemlich Altes, aber es wird heutzutage immer noch benutzt. Poppins regelmäßig 11 Pixel. Aber die ersten beiden Elemente sollten Links sein. Das bedeutet, dass sie halb fett und orange sein sollten. Übrigens, auf der Homepage für die Hauptbeschreibung, haben wir fett oder halb Schüssel für den Link verwendet? Ich bin mir nicht sicher, aber wenn man bedenkt, hier halb fett zu verwenden und das ist, was wir für die weitere Tat getan haben. Ich denke, wir sollten es aktualisieren, denn wieder ist die Konsistenz sehr wichtig. Alles klar, alles gut. Lassen Sie uns fortfahren, indem Sie die Abstände hier anpassen, 20 oben und zwischen ihnen. Nun, ich bin mir nicht wirklich sicher. Lassen Sie uns mit nur ein paar Pixeln gehen, weil wir viele Dinge hinzuzufügen haben. Lassen Sie uns die Bewertung aus dem Product Red holen und bringen Sie sie hierher. Bitte denken Sie daran, dass wir alles gruppiert haben, damit wir schwarz kontrollieren müssen. Und dann müssen wir vielleicht die Escape-Taste ein paar Ebenen drücken , weil wir offensichtlich eine Gruppe in der Gruppe haben. Also noch einmal, nehmen Sie sich Zeit damit und verwenden Sie, wenn möglich, das Ebenenbedienfeld. Okay, wenn Sie mit der Positionierung fertig sind, wird es das rosa Brett anwenden müssen, dass. Nun ist die Frage: Sollen wir es so lassen, wie es ein Stern ist? Was dehnen wir das aus? Und ich sage, wir vergrößern es, weil das nicht die Konsistenz bricht. Es ist das gleiche Design in einer etwas anderen Form, das auf seine Umgebung basiert. Nun, das dauert ein bisschen hin und her, aber es gibt nichts Besonderes. Denken Sie daran, den gleichen Abstand zwischen den Sternen zu halten und natürlich vertikal zentriert. Und weißt du was? Wenn Sie fertig sind, fügen Sie bitte diese gelbe Farbe zum Bedienfeld „Assets“ hinzu, wenn Sie dies noch nicht getan haben, dies könnte später nützlich sein. Die Frage ist, Könnten wir dieses Element irgendwo anders platzieren? Nun, ich würde gerne sehen, wie du es probierst. Lassen Sie mich Ihnen sagen, dass Sie es nicht rechts neben dem Titel platzieren sollten, weil einige Titel offensichtlich länger und einige kürzer sind. Was Sie tun könnten, ist, Sie könnten versuchen, es rechts von den Semmelbröseln zu platzieren. Aber ich bin mir nicht sicher, ob das zu gut funktionieren würde. Über dem Foto AT denken, das ist ein hartes Nein. Also, um es zusammenzufassen, ich habe jetzt keine bessere Idee, also werde ich es so lassen, wie es ist. Okay, machen wir eine kurze Pause und wir werden in einem Moment weitermachen. 33. So organisierst du viele Informationen auf der Seite des Produkts: Willkommen zurück zu unserem Projekt. Wir haben hier ein paar Elemente, aber es gibt noch viel mehr hinzuzufügen. Hier ist die Sache auf der bestehenden Website. Es gibt hier ein Snippet, das immer dasselbe sagt. Ohne Zuckerzusatz, keine Kunststoffverpackung. Das funktioniert richtig? Weil ich der Klient bin. Ich weiß, was der Grund dahinter ist. Die Idee ist, dass Menschen im Live-Chat immer wieder dieselben Fragen gestellt haben. Liefern wir in CDA? Okay, was ist mit NCBI? Und die Antwort dort war immer die gleiche. Wir liefern das ganze Land. Als Nächstes. Enthält es Kuhmilch? Nein, es ist alles monumental, weil wir diese Fragen immer wieder bekommen haben. Ich habe sie hier hinzugefügt. Aber ich denke, es gibt einen besseren Weg, diese Art von Informationen zu zeigen. Verwenden wir ein Häkchen. Ich habe bereits eine von flat icon.com. Alles, was wir tun müssen, ist die Größe auf 16 Pixel zu ändern oder zu denken und es schwarz zu machen. Links, richten Sie es mit allen anderen Elementen aus, und ich werde es aufschlüsseln. Bitte beachten Sie zuerst, wie wichtig es ist, dass wir alles richtig ausrichten. Es ist, als hätten wir vertikale Linien, die durch das gesamte Design verlaufen. Das ist eigentlich eine echte Bank und es nennt sich das Netz. Ich benutze kein Raster und ich kann nicht sagen, dass ich es mehr empfohlen habe, weil , wissen Sie, für Anfänger, es nimmt Sie den Fokus weg von der tatsächlichen Design für die fortgeschrittenen Benutzer. Nun, Sie haben bereits diese Linien, diese vertikalen Linien im Kopf, während Sie arbeiten. Okay, zurück zu ihm für den Text, Lasst uns sowohl die reguläre verwenden. Und ich schlage vor, Sie gruppieren diese beiden, damit wir sie leicht verteilen können. Wenn Sie Gruppen erstellen, ist es viel einfacher, sie zu verteilen. Ich wollte zunächst nur drei Artikel, aber weil dieser Bereich so breit ist, werde ich mit Sex gehen. In Ordnung, zurück zur Farbe der Häkchen. Wir könnten grün verwenden, weil sie in der Regel sehen, wie sie ein grünes Häkchen schreiben. Grün impliziert, dass alles gut ist, alles okay? Und du könntest versucht sein, Grün zu benutzen und etwas zu sagen wie, hey, Chris, du weißt schon, Grün ist frisch. Es geht um die Natur, ist in diesem gesunden Essen, alles darüber, dass gesunde Ernährung gleich grün ist? Ja, du würdest recht haben. Aber die Prinzipien hinter unserem Design, unserem Wesentlichen, haben wir Grün woanders? Nein. Passt es zum aktuellen Farbschema? Nein. Sollen wir das Farbschema modifizieren, um es fit zu machen? Nun? Nein, nicht wirklich. Ich meine, wir können dieses Orange nicht wirklich ändern, da es die Marken bedeuten gefärbt, noch können wir all das Schwarz ändern, das wir benutzt haben. Okay, dann könntest du sagen, lass es uns orange machen. Die Ruhe wird auf diese Weise schöner aussehen. Nun, ja, vielleicht wird es schöner aussehen. Aber gibt es hier eine Aktion? Nein, du kannst sie nicht abholen. Aber mehr als das, das Größte ist, dass dies hier einen „In den Einkaufswagen“ -Button haben wird, richtig? Ratet mal, welche Farbe das sein wird? Orange, natürlich, mit über den Mengenregler. Yap, wahrscheinlich auch Orange. Aus diesem Grund wollen wir keine Konkurrenz. Wir haben ein Foto auf der linken Seite, das automatisch scrollen wird und es wird eine Menge Farbe hier geben. Las, wir haben Semmelbrösel und die Sterne. Das ist der Grund, warum wir es einfach halten wollen. Zurück zum Design. Es ist ziemlich klar, dass diese Höhe nicht funktionieren wird. Erhöhen wir es auf 280. Wählen Sie beide Formen aus, und fügen Sie diesen neuen Wert ein. Wir wachsen es Stück für Stück, so dass wir das Seitenverhältnis des Fotos nicht zu sehr ändern. Okay, nun kopieren wir die Last aus der Kopfzeile und platzieren sie in der Nähe der unteren rechten Kante, um konsistent zu bleiben. Ich werde die exakt gleiche Größe behalten , um fair zu sein. Es wäre keine große Sache, wenn wir die andere Größe Taste verwenden. Ich meine, sogar SSID dort , der kleinere Knopf für den Header und der viel größere für den Call to Action aus dem Heldenbereich. Okay, hier ist ein netter Trick. Angenommen, Sie möchten diese sechs Häkchen anpassen, aber es ist schwierig, sie auszuwählen. Auch wenn wir sie in Gruppen haben. Sie können auf das weiße Rechteck auf dem Basisrechteck klicken und Control L verwenden. Mit dem L steht für das Schloss. Jetzt können Sie sie auswählen und verschieben. Einfaches Zeug. Dies ist schwer, kann viele Dinge bewegen, ohne Ihr Layout zu zerstören. Wenn Sie fertig sind, verwenden Sie Control L noch einmal, oder klicken Sie auf dieses Symbol, um es zu entsperren. Grays Tod. Zeit für eine kurze Pause und dann beenden wir das. 34. Wie du kleine Details hinzufügst, die einen Unterschied machen: Hallo, hallo. Ich möchte sicherstellen, dass wir uns Zeit mit dieser Neugestaltung nehmen und dass wir einen tollen Job machen. Ich suchte nach einem Symbol für die Galerie, um dem Benutzer zu zeigen, dass er es vergrößern,reinweiß machen und die Größe auf 16 x 16 Pixel ändern kann reinweiß machen . Ich bin mir nicht sicher, ob das für alle Fotos sichtbar genug sein wird, aber ich werde es riskieren. Ich bin kein großer Fan, Grenzen hinzuzufügen oder sogar Schatten auf diese Arten von Elementen zu werfen. Weil ich die Kontrolle über alle Fotos habe. Ich werde sicherstellen, dass ich immer einen dunklen Hintergrund für die Position, die 20 Pixel von der Kante entfernt ist, völlig in Ordnung. Also, das ist, was die richtige Seite, ein kleines Detail, aber es wird sowohl dem Benutzer als auch dem Entwickler helfen, wenn er zur Arbeit kommt. Für die andere Seite möchte ich die Zeilendaten, die zeigen, wie viele Fotos verfügbar sind. Verwenden Sie das Ellipsen-Werkzeug, damit acht mal acht Pixel gut genug sein sollten. Der erste sollte orange gemacht werden, um anzuzeigen, dass dies die aktuelle Position ist. Während die anderen, vielleicht drei oder vier, weiß sein können. Okay, gutes Zeug. Wenn Sie damit fertig sind, gruppieren Sie sie bitte zusammen und platzieren Sie diese Gruppe 20 Pixel vom linken und unteren Rand. Klassisches Zeug. Hier ist die Sache. Wir hätten nicht hinzufügen können, den aktiven Zustand für das Hauptmenü. All diese kleinen Details summieren sich, und ich ermutige Sie, die zusätzliche Meile zu gehen. Dies ist 5% mehr Aufwand für das 20 Prozent bessere Design wert. Ihre Kunden möchten das Design mehr. Der Entwickler wird Sie mehr zu schätzen wissen. Und Sie wissen was, auch wenn das nicht passiert, ist dies immer noch ein Eintrag für Ihr Portfolio. Man muss also wirklich die Dinge in die Perspektive bringen. Okay, wir sind fertig mit diesem Teil. Lassen Sie uns mit der Menge umgehen. Wir verwenden die gleichen Plus- und Minus-Symbole von der Homepage aus dem FAQ-Bereich. Kopiere sie und lass uns sehen, was wir mit ihnen machen können. Ich verwende Steuerverschiebungs-Klick, da das zweite Element in einer Gruppe ist, also allein ausgeliefert würde die Spur nicht ausführen. Ok. Nehmen Sie sich Zeit damit und wählen Sie sie aus. Und deshalb habe ich zu Beginn des Kurses gesagt, dass Sie es zweimal ansehen sollten. Einmal zu verstehen, was los ist, und ein zweites Mal, um mitzuarbeiten, weil die Basis ziemlich hoch ist. Okay, bitte machen Sie beide orange und lassen Sie uns die Größe auf 32 x 32 Pixel ändern. Jetzt können Sie nach diesen Änderungen fragen. Warum nicht konsequent bleiben, oder? Mit der Änderung sowohl der Farbe als auch der Größe? Nun, obwohl diese gleich aussehen, erfüllen sie eine ganz andere Funktion. Um die Wahrheit zu sagen, hätten wir die FAQ-Symbole durch Pfeile ersetzt. Das wäre also keine Frage darüber. Aber das ist der Grund, warum wir einen anderen Stil anwenden. Diese haben eine völlig andere Funktion im Vergleich zum FAQ-Abschnitt. Da es also etwas anderes ist, wenden wir deshalb einen anderen Stil an. Nur für den Fall, dass der Hintergrund Probleme für Sie verursacht. Bitte denken Sie daran, dass Sie es zwischen diesen beiden Elementen sperren können. Ich schlage vor, Sie lassen, was die Pexels auch für den Text zwischen ihnen. Nun, ich denke, Poppins 26 regelmäßig. Ich würde fett verwenden, weil es ein bisschen besser sein mag, aber ich denke, das ist ein bisschen zu klobig, um ehrlich zu sein. Sogar der Titel scheint ein bisschen zu dick. Ich denke darüber nach, es in halb fett zu ändern, aber wir könnten später damit experimentieren. Bitte gruppieren Sie diese drei, wenn Sie fertig sind. Für den Preis, lassen Sie es uns hinzufügen. In meinem Land, Rumänien, Es ist eine gemeinsame Sache, um das Gewicht des Produkts direkt neben den Kosten zu sehen. Wir verwenden den Euro ziemlich viel, aber wir haben immer noch unsere eigene Währung. Okay, für die Formatierung von 22 Pixeln, halb fett für den ersten Teil. Dann 14 Pixel regelmäßig für das tatsächliche Gewicht. Hier werden die Dinge interessant. Wir haben hier viel Leerraum. Wir müssen natürlich sicherstellen, dass sich alle diese Artikel auf derselben Linie befinden. Aber hier ist, was ich vorschlage, und es ist eine ziemlich große Änderung, nachdem Sie das Produkt in den Warenkorb gelegt haben. Lassen Sie uns hier eine Last haben, die Sie zur Kasse Seite führt. Lassen Sie mich das handhaben, indem Sie eine Kopie dieser Schaltfläche erstellen. Diese Idee kam einfach zu mir und mit der Hinrichtung gut, weil es ist, wie Sie denken sollten. Das sollte funktionieren. Wenn Sie eine Idee haben, sehen Sie einfach, wie es aussieht. Nun, ich denke, wir werden das gleiche Blau benutzen wie in den Fuß dort. Warum ist das eine große Sache? Dieser Knopf? Nun, in der vorhandenen Jungfrau wird das Warenkorb-Symbol nur in der Kopfzeile angezeigt. Wir haben es tatsächlich nicht einmal hier aufgenommen, weil ich denke, es erscheint nur auf der alten Website, wenn Sie das Produkt in Ihren Warenkorb legen. Jetzt wird sicherlich in der mobilen Version enthalten, obwohl. Wie auch immer, wenn ich zu dieser Last zurückgehe, anstatt ein weiteres Rechteck unter dem Header hinzuzufügen, denke ich, dass diese Lösung ein bisschen besser ist. Dieser blaue Knopf hier. Ich habe es auch auf mehreren Websites gesehen. Also denke ich, es ist eine anständige Idee. Alles in allem schlage ich das für die Produktdetailseite vor. Nun, der obere Teil, es gibt noch mehr zu tun, aber das war der wichtigste Teil. Die Bereiche unter unseren Wegen Jahr und es ist nur eine Frage der, der Styling einige Schriftarten. Was meinst du? Bist du damit zufrieden? Nochmals, ich sterbe, um zu sehen, was du dir einfällt. 35. So bearbeitest du große Textmengen: Willkommen zurück zu unserem Projekt. Der obere Teil ist fertig und ich bin ziemlich zufrieden damit. Lassen Sie uns nach unten gehen und wir werden die beiden Spalten erstellen. Hier ist die Mathematik, 1200 Pixel mit einem Abstand von 20 Pixeln. Also, das ist 1180. Ich denke 330 für die Sidebar und den Rest für die Hauptsäule. Und das sind 850. Okay, hol das Rechteck-Werkzeug und lass uns an die Arbeit gehen. So 850 von, sagen wir tausend, tausend Pixel für die Höhe h sollte genug sein. Bitte links richten Sie das mit der Führung aus und runden Sie die Ecken auf 15 Pixel ab. Übrigens, die Maßeinheit wird hier in Adobe XD nicht angezeigt , da alles in Pixel ist. Adobe XD ist nur für digitale Produkte geeignet. In Photoshop können Sie Ihre Designs natürlich drucken sodass Sie mehr Maßeinheiten zur Auswahl haben. Okay, bitte wenden Sie den rosa Strich an und lassen Sie uns den Titel über diese Arbeit einrichten. Okay, lassen Sie mich über die Hierarchie sprechen, die ultrakurze Version. Der Haupttitel ist in Poppins 26 Ball gezeigt, nicht wahr? Ist der sekundäre Titel so wichtig, offensichtlich ist es nicht. Dann können wir nicht die gleiche Größe verwenden, die wir brauchen die kleinere. Aber wie klein Holz 24 und arbeiten? Nein, weil es für die durchschnittliche Person zu ähnlich wäre. Die Titel könnten zwischen 2006 und 2004 gleich aussehen. Es ist im Grunde das Gleiche. Deshalb werden wir mit 22 gehen, weil es deutlich anders ist, es ist deutlich kleiner. Und das ist die Hierarchie auf den Punkt gebracht. Platzieren Sie 30 Pixel vom oberen und linken Rand, während sie DNR 20 sind. Was wir für die Lücke verwenden, weil wir hier viel Platz haben und es wäre eine Schande, das Design nicht luftig zu machen. Okay für den Körpertext, das ist offensichtlich super wichtig. Basierend auf dem ersten Absatz und weniger überprüfen Sie die Formatierung. Ich schlage vor, 14 Pixel wie wir zuvor verwendet haben, regelmäßig und für die Zeilenhöhe, 23, lassen Sie etwa 10 Pixel zwischen dem Text und dem Titel. Das sollte genug sein. Ich habe hier auch ein Video, das gezeigt werden muss. Also habe ich den Screenshot vorbereitet, den Sie hineinziehen können. Denken Sie daran, es ist keine gute Idee, Videos veröffentlicht Mall zu machen. Das Layout scheint nicht so gut zu funktionieren, wenn Sie diesen Abschnitt in ein paar Teile teilen. Zum Beispiel das Video auf der linken Seite und der Text auf der rechten Seite. Sie könnten die Videowege möglicherweise kleiner machen, und das funktioniert vielleicht besser, aber ich bevorzuge dieses Layout mit voller Breite. Ich denke, es sieht besser aus. Okay, lassen Sie uns das beschleunigen, weil wir noch einiges mehr haben. Der Griff. Für den Rest der Textkörper müssen wir sicherstellen, dass wir den Link und einen anderen Titel enthalten. Wenn Sie mit HTML vertraut sind, gilt der Haupttitel von oben als H1. Der 22 Pixel-Titel ist H2, und wir brauchen auch ein H3. Ich schlage vor, Poppins 18 halb fett. Die Idee ist, dass Sie diese Wichtigkeit verstehen, nur indem Sie sie betrachten. Es sollte keine Verwirrung bezüglich des Wichtigeren geben. Okay, übrigens, Sie sollten die Basis erhöhen, sie 1 Tausend Pixel auf etwa 1300 oder so Rechteck. Stellen Sie einfach sicher, dass Sie eine Lücke von 20 Pixeln von der Fußzeile verlassen. Möglicherweise müssen Sie auch unser Board anpassen, aber nehmen Sie sich Zeit damit. Es ist nichts Kompliziertes. Solange Sie sich wohl mit Steuer-Scrollen und drücken Sie die Leertaste, um zu schwenken, sollten Sie in Ordnung sein. Unnötig zu sagen, benutzen Sie bitte jederzeit beide Hände. Das ist offensichtlich kritisch. Ok. Und damit machen wir eine kurze Pause und wir werden in einem Moment weitermachen. Vielen Dank. 36. Die Seitenleiste erstellen: Hey da, Willkommen zurück. Holen wir uns das Rechteck-Werkzeug und machen Sie sich an die Sidebar. Wir haben zuvor gesagt, dass die Breite dieses Elements 330 sein muss. Die Höhe, gut, etwa 500 Pixel zu beginnen, sollte gut sein, abgerundet und den Rahmen anwenden. Wie immer wollte ich einen speziellen Vortrag über die Sidebar, weil es einige Leute verwirren kann. Beginnen Sie mit einem Titel, der Zutaten sagt. Dies sollte in Poppins, 13, halb fett alle Kappen gesetzt werden. Das wird auf H4 sein. Sie sagten, 20 Pixel von der Kante. Und da beginnen sich die Dinge im Vergleich zur linken Spalte zu ändern. Bewegen Sie sich auf die tatsächlichen Zutaten, Poppins 13, regelmäßig mit der Strichhöhe von 21. Aber auf der linken Seite verwenden wir 14 Pixel mit einer Zeilenhöhe von 23. Also, warum werden wir Styling anders? Zerbrechen wir nicht die Konsistenz? Sollen wir unser Styling beibehalten? Sie haben Recht. Wir sollten unser Styling beibehalten, zum Beispiel, in Bezug auf, wie ein Link gezeigt wird. Oder wenn wir eine All-Caps Behandlung auf einen Knopf anwenden, sollten wir sie überall anwenden. Aber hier ist noch etwas los. Auch hier geht es um Hierarchie oder Wichtigkeit. Hier ist, was los ist. Die meisten Menschen werden ihre Meinung bilden, ob der Käufer von diesem Element an der Spitze nicken. Ein paar könnten hier auf der linken Seite schauen und nur eine Handvoll Leute werden in die Seitenleiste schauen. Ich weiß, dass Sie dieser Aussage vielleicht nicht zustimmen, aber es ist völlig in Ordnung. Sie können einer jener Menschen sein, die in erster Linie auf die Ernährungstabelle schaut. Sicher. Ich verstehe es. Das sind keine Ausnahmen. Aber die meisten Leute scannen die Seite und es ist sehr wahrscheinlich, dass Dale sich so verhalten, wie ich es beschrieben habe. Da dies eine geringe Priorität hat, müssen wir das den Web-Design-Entscheidungen zeigen. diesem Grund ist der Text kleiner. Deshalb gibt es keine größere Polsterung wie auf der anderen Seite. Aber die Breite selbst, nur 330 Pixel, sollte Ihnen sagen, dass Ihr Platz begrenzt ist und dass Sie mit Ihrem Padding nicht übertreiben sollten. Ich werde weiter arbeiten. Aber hier ist eine Sache, die Sie wirklich bewusst sein sollten. In der tatsächlichen Tabelle. Sie müssen die Linienhöhe um eine Menge erhöhen. Wenn der Text 13 Pixel regulär ist, gehen Sie mit mindestens 30 für die Zeilenhöhe. Auf der anderen Seite, wenn Sie darüber nachdenken, 40 oder sogar mehr als das zu verwenden, benötigen Sie möglicherweise die Teilung dort für jede einzelne Zeile. Wenn Sie das moderne Design wünschen, sollten Sie die Linien auf ein Minimum beschränken. Also keine Trennwände. Ich mag es, zwei Zeilen für den Kopf der Tabelle hinzuzufügen, aber das ist darum. Wenn Sie beginnen, Linien für jede Zeile B an der durchgezogenen oder der gepunkteten Linie aufzunehmen, wird der Versuchsplan überladen. Weniger Dekoration ist der Weg, um auf den heutigen Websites zu gehen. In der Vergangenheit, irgendwo im Jahr 2010 alt. Also liebten wir es, alle möglichen Details hinzuzufügen. Vor allem Belastungen hatten so viele Hochglanzeffekte, 3D-Effekte, Schatten und Abschrägungen und allerlei Dinge. Das macht dich aber nicht zu einem Designer. Du solltest keine Angst davor haben, es einfach zu halten. Einige Dinge, die wir am besten in dieser einfachsten Form sind. Stellen Sie sich diesen Tisch als ein weißes T-Shirt vor. Halten Sie es schön und sauber. Die eine, eine schöne Jacke, paar Stifte, die gut zu dir passt, und dann wirst du ein tolles Outfit haben. Aber was Anfänger dazu neigen, ist, dass sie wollen, dass jedes einzelne Element ausgeblendet wird. Aber wenn jedes einzelne Element viele Details hat, wird Ihr Outfit chaotisch aussehen, wird es sein, zu schreien. Aus diesem Grund übertreiben Sie bitte nicht mit den anderen Paketen. Okay, das ist eine seltsame Ernährungstabelle. Eine Idee für die Darlehensvariante ist es, die Anzahl der Kalorien in einer Weise größer Schrift zu zeigen, vielleicht zusammen mit den Kohlenhydraten, Eiweiß und Fetten. Das ist eine Möglichkeit, es zu tun. Sie könnten auch eine Schaltfläche haben, die die Tabelle pro 100 Gramm oder die für das gesamte Glas ändert . Das mag auch interessant sein, aber ich überlasse Ihnen das, weil ich mit einem responsiven Design was für ein Wort bewegen möchte. Danke, dass du bis zu diesem Punkt bei mir geblieben bist. Wir sehen uns in einem Augenblick. 37. Der erste Schlüssel, um ein tolles Webdesigner zu bekommen: Willkommen im ersten Teil dessen, was einen Webdesigner großartig macht. Und das ist Pixel-perfekte Ausführung. Als kurze Erinnerung ist dies die Grundlage eines jeden UI-Designers und Sie sollten nicht weitergehen, es sei denn, Sie sind kompetent als diese Abteilung. Lassen Sie mich Ihnen schnell zeigen, was es ist, damit Sie wissen, was Sie von diesem Kurs erwarten können. Hier ist, was ich Ausführungsfehler nenne. Richtiger Kontrast zu einem Textformat, das übergroße Komponenten enthält, Elemente, die keinen unangemessenen Abstand für die Schriftauswahl entsprechen, mangelnde Konsistenz, Rechtschreibfehler oder Tippfehler, untergeordnete Farbschemata, unsachgemäße Fotos, nicht standardmäßige Layouts Mangel an Symmetrie und Balance, plus ein paar andere. Nun, ich weiß, das sind die vielen, die sie wieder, aber wir werden viele Beispiele haben, die alles klar machen werden. Gerade jetzt, Es ist äußerst wichtig, dass Sie verstehen, dass diese wichtig sind. Du musst diese beiden anderen Säulen ignorieren. Wir werden nicht darüber reden, schöne Designs zu kreieren und Phil wird sie richtig ausführen können. Präzision ist der Schlüssel und all diese Fehler können vermieden werden, indem man sie einfach erkennen kann. Wird auch ein paar Übungen hier und da haben. Aber der Schlüssel zum Mitnehmen hier ist, dass Sie mentale Notizen machen und erkennen, dass dies die schwerwiegenden Fehler sind. Indem Sie sie einfach erkennen können, verbessern Sie Ihre Projekte drastisch. Das Ziel dieses Abschnitts ist es, Sie in dieser Denkweise zu bekommen , wo Sie kleine Fehler mit Leichtigkeit erkennen können, seine Ausbildung Glutamin für bestimmte Dinge zu suchen. Also lasst uns an die Arbeit gehen. 38. Beste Einstellungen für ein a: Hallo und willkommen zu diesem Vortrag, wo wir darüber sprechen, was ich die besten Einstellungen für das Web-Design-Projekt halte. Denken Sie nun daran, dass nichts in Stein geschrieben ist. Dies ist ein Leitfaden, der auf meiner Erfahrung basiert. Also bitte bedenken Sie das. Und nie gefragt nach den Messungen wie, Chris war die beste Größe für das Hauptmenü. Was ist mit der Überschrift? Die existieren nicht. Aber hier ist, was Sie wissen müssen. Für die minimale Höhe 1200 Pixel eine gute Faustregel. Die maximale Höhe, würde ich sagen nicht mehr als 8 Tausend Pixel, weil Sie selten wollen, dass Menschen so viel scrollen. Für die Gesamtbreite schlage ich vor, dass Sie 1920 verwenden, sonst nichts. Was den aktiven Bereich anbelangt, halte ich 1200 Pixel für die überwiegende Mehrheit der Projekte bei weitem die beste Wahl. Nun, das sind Liebe und Zahlen, aber lassen Sie mich erklären. Also hier ist ein weiteres Brett, das 1920 mal 1080 ist. Diese Größe nennt man Full HD und ist die beliebteste Desktop-Auflösung der Welt. Dies bedeutet, dass, wenn Sie daran arbeiten und Sie das Design auf 100% Zoomstufe betrachten, Sie bekommen, um das Projekt zu sehen, um Ihre Besucheraugen zu machen. Das ist unglaublich wichtig. Sie müssen Ihr Design als Endbenutzer analysieren. Du willst es nicht auf seiner besten Seite sehen. Deshalb bin ich kein Fan, stundenlang so zu zoomen und zu gestalten. Ich denke, du hast gesehen, dass ich, wenn ich arbeite, ständig Control 1 verwende , um wieder auf 100% Zoomstufe zu kommen. Warum mache ich das so oft? Denn so werden die Besucher Ihr Projekt zu 100% sehen. Niemand zoomt hinein und checkt alle Details aus, die Sie aufgenommen haben. Wenn sie bei 100% nicht sichtbar sind, dann ist es ein Fehler. Tatsache ist, dass Sie keine Websites für ihre Lead-Scharfschützen entwerfen. Also bedenken Sie das. Okay, Jetzt können Sie Full HD Wireless sehen. Die beliebtesten, ist weit davon entfernt, die Mehrheit zu sein. Es gibt hier andere Bildschirmgrößen, vor allem aufgrund der Laptop-Nutzung. So Einkommen, dass derm aktiven Bereich, dieser Bereich zwischen diesen beiden vertikalen Linien wird der aktive Bereich genannt. Dies ist der Ort, an dem wir alle unsere Inhalte setzen. Lassen Sie mich erklären, warum der Fall für einen Screenshot der Pay-Freunde Website. Wie Sie sehen können, geht nichts, was wichtig ist, über diese Führer. Der gesamte Inhalt ist hier in diesem speziellen Raum. Und wieder, das liegt an diesen anderen Bildschirmgrößen. Zum Beispiel 1366 von 768, eine sehr beliebte Auflösung für Laptops. Da die Breite viel niedriger ist, die Seiten abgeschnitten, aber das ist kein Problem seit dem kritischen Teil dieses Jahres, dieser Teil des Bildes kann versteckt werden, ohne etwas Wichtiges zu verlieren. Es ist kein Inhalt, der obligatorisch ist, ist nicht etwas wirklich Wichtiges. Es ist tot für dekorative Zwecke, und das war's. diesem Grund ist das Auslegen von Inhalten in 1200 Pixeln eine gute Wahl. Bildschirm mit 1366 zeigt Ihnen den gesamten Inhalt, während Sie immer noch ein wenig Platz auf beiden Seiten. Nun, Sie kennen wahrscheinlich all das Zeug aus dem ersten Teil des Kurses. Aber lassen Sie mich noch einige andere Fragen beantworten. Können Sie andere Werte verwenden, die höher als 1200 Pixel für die aktive bei yeah, Nein, nicht wirklich. Ich empfehle es nicht. Jetzt. Sicher. Sie können einige Websites finden, die 1400 verwenden, 1600 würde sogar mehr, aber das sind die Ausnahmen, wenige und weit dazwischen. Könntest du niedriger als 1200 gehen? Sicher. Natürlich, elfhundert, hundert, zehnhundert. Das sind alles anständige Entscheidungen. 960 war sehr beliebt Grid-System in 2010 oder so, aber es ist wirklich veraltet jetzt. Das Hauptproblem besteht darin, ein Nanodraht-Design zu haben, es sieht nicht so beeindruckend aus, ist nicht so gut aussehend. Die Sache ist, obwohl wir außerhalb dieser Führer nichts Wichtiges haben, irgendetwas Wesentliches. Das insgesamt breitere Aussehen ist angenehmer für das Auge. Und Kunden sind in der Regel die mehr als beeindruckt von einer breiteren die Vorschau. Aber wieder, nicht mehr als 1920. Lassen Sie uns nun die andere Seite in Bezug auf ein Web-Design-Projekt untersuchen. Er dachte, die häufigsten Komponenten einer Website. Nummer eins, die Kopfzeile, dies ist der obere Teil der Website, der in der Regel das Logo, das Hauptmenü und die wenigen Schaltflächen für die Benutzerregistrierung, vielleicht einen Warenkorb oder ähnliche Aktionen enthält das Hauptmenü und die wenigen Schaltflächen für die Benutzerregistrierung, . In der Kopfzeile. Möglicherweise finden Sie auch eine Telefonnummer, eine Adresse oder soziale Media-Symbole, die jedoch in der Regel oben in der oberen Leiste platziert werden. Die zweite Komponente ist die obere Leiste hier, dass Sie möglicherweise die Telefonnummer und Adresse Social-Media-Symbole und solche Sachen finden . Dies ist in der Regel sehr kurz und es ist nicht wirklich so sehr auffällig. Die nächste Komponente, Nummer 3, ist der Heldenbereich. Dies wird in der Regel als der wichtigste Teil einer Website betrachtet, daher der Name Hello Ed. Ja, es ist der Superman, wenn du so willst. Hier finden Sie die Überschrift, die Unterüberschrift oder die Beschreibung. Eine oder mehrere Belastungen der Form. Manchmal ist ein Video vielleicht als Hintergrund, aber in der Regel ein großes Foto, das die gesamte Breite einnimmt. Jetzt ist das Ziel des Heldenbereichs, die Aufmerksamkeit des Benutzers zu erregen und ihn zu machen. Aber für das menschliche Handeln, sei es durch etwas, registrieren Sie die füllen Sie das Formular oder irgendetwas von dieser Natur. Als nächstes, unmittelbar darunter, haben wir einen Sub-Header mit dem Gin. Dieser Begriff ist nicht so beliebt wie die anderen, aber es beschreibt die Position des Elements innerhalb der Website SOB er obwohl. Unter dem Heldenbereich setzt diese Komponente typischerweise die Idee aus dem Heldenbereich fort und erweitert sie, es gibt mehr Details darüber. Nun, die nächste große Komponente ist der eigentliche Inhalt, wo Sie erwarten können, viele Dinge wie Testimonials, FAQs, Galerien, Formulare, Log-Auszüge, verschiedene Dinge aller Art zu finden FAQs, Galerien, Formulare, Log-Auszüge, . Also im Grunde nennen wir diesen Teil des Content-Bereichs. Also im Grunde alles, was ich gerade beschrieben habe, können Sie es unter diesem Dach platzieren, den Inhalt. Und schließlich am Ende der Website, können Sie erwarten, den Fuß dort zu finden. Sie können das in einem Minutenformat finden, wie Sie es hier sehen, dem ich kein großer Fan bin. Ich empfehle diese Art von Format nicht. Es ist sauber, minimale Dekoration und ziemlich kurz. Aber die meisten Menschen bevorzugen mittlere bis große. Dies liegt daran, dass die meisten Unternehmen einen Platz für die verschiedenen Längen wie Datenschutzrichtlinie, rechtliche Informationen, Unternehmensinformationen und so weiter benötigen . Abschließend sind die Komponenten einer Website der Kopf der oberen Leiste, der Heldenbereich, der Subito-Bereich, obwohl dies wiederum ein bisschen optional ist, ein Inhaltsbereich, der viele Foren aufnehmen kann, und schließlich eine Fußzeile. Und damit haben wir diesen Vortrag abgeschlossen. Wir sehen uns in einem Augenblick. 39. Case Non-standard: Willkommen zu diesem Vortrag, wo wir über einige Entwürfe sprechen werden, die ich auf diesem Platz von meiner Studentengemeinschaft erhalten habe. Alle folgenden Beispiele haben eine Ausführung falsch üblich. Die Designer haben kein Standardlayout verwendet. Mal sehen, was was ist. Diese Spielzeug-Roboter-Website zeigt uns ein sehr peinliches Layout, das kreativ sein soll. Es gibt keine Kopfzeile, d. h. den oberen Bereich, der das Logo und das Hauptmenü enthält. Nun, eigentlich gibt es kein Hauptmenü, von dem man sprechen kann. Wir können sehen, dass dies ein Geschäft ist, aber es gibt keine Einkaufskartenkomponente, noch sehen wir eine Login- oder Register-Taste nach unten. Es gibt kein Photon und um genauer zu sein, keine Links über das Unternehmen, den Versandprozess, rechtliche Bedingungen und so weiter. Dies ist ein Design, das nicht dem Standardlayout folgt , weil der kreative Gedanke, dass sie kreativ war. Tatsächlich handelt es sich hierbei um einen eindeutigen Ausführungsfehler, da die Standardstruktur einer Website nicht verwendet wurde. Gehen wir zum Viertel-Poker. Hier sind nicht wirklich verkleinert. Nein, hier hat der Designer die falsche Leinwandgröße verwendet. Ich öffne das bis zu Alt Control C. Und wir können sehen die Gesamtbreite des Projekts beträgt 800 Pixel. Das ist falsch. In der vorherigen Vorlesung haben wir uns für zwei Auswahlmöglichkeiten für die Gesamtbreite entschieden. Ich habe 1600 gemacht. Was, 1920? Das ist für das ganze Denken. Das ist, was der aktive Bereich, auf dem wir uns niedergelassen haben, 1200 Pixel. Hier ist der Wert viel, viel niedriger. Der Designer wusste nicht, dass er dieses große Problem hatte. Wahrscheinlich, weil er sagte, seine Zoomstufe auf etwa 200 Prozent zeigte auf dieser Ebene, die Dinge sehen viel vernünftiger aus. Sie denken, das ist ziemlich anständig, aber Ihr Design muss großartig aussehen, diese 100% Zoomstufe, denn so werden Ihre Benutzer es sehen. Hier ist ein anderes Design mit dem Inhaltsbereich macht keinen Sinn. Das ist völlig nicht Standard. Und wenn Sie Ihren Kopf darüber kratzen und Sie können nicht sagen, warum der Fall Hier ist eine sehr einfache Frage, die im Zweifelsfall alles klären wird, fragen Sie sich einfach folgendes. Habe ich dieses Design auf einer großen Mainstream-Website gesehen? Nun, seien Sie sich bewusst, Inhalte auf diese Weise anzuordnen, links, rechts, links ist ziemlich beliebt. Sie werden sehen, dass an vielen Orten, aber nicht, wenn Sie diese Boxen erstellen und all diesen leeren Raum neben ihnen lassen , macht das Sinn? Also wieder, fragen Sie sich einfach, ob Sie etwas sehr Ähnliches auf einer großen, bekannten Website gesehen haben , Tänzer, sie sollten immer sein, ja. Das heißt nicht, dass du stehlst oder kopierst. Das ist klug. Gehen wir zu einem anderen über den Header. Nun, das sieht nicht so toll aus. Haben Sie etwas Ähnliches auf einer beliebten Website gesehen? Ja, sehr viel. Aber das ist hier kein Problem. Du könntest die Waffe springen und auf die Breite zeigen. In der Tat ist dies eine andere Website, aber 1200 Gesamtbreite ist immer noch etwas vernünftig. den aktiven Bereich betrifft, ist das etwa einhundert, zehnhundert Pixel, diese Werte sind dann, was ich empfehle, aber wir werden immer noch in einem anständigen Bereich. Das eigentliche Problem ist mit der Größe. Schau dir die Größe dieses Kerls an. Es ist ein Monster. Wenn Sie eine schnelle Überprüfung machen, werden Sie sehen, dass wir es mit fast 85, 100 Pixel zu tun haben. Das ist viel zu viel für meinen Geschmack. Viele kimmicky Verkaufsseiten greifen auf diesen Ansatz zurück. Eine Meile lange einzelne Seite, die voll von Inhalten ist. Einige Kunden bevorzugen sie sogar, ihre Ernährung zu verkaufen, baut Nahrungsergänzungsmittel oder wo immer es dummes Produkt ist, das sie fördern wollen. Aber die meisten Menschen hassen sehr lange Websites. Daher ist dies ein Ausführungsfehler. Lassen Sie uns nur einen Blick hier in der Sub-Header mit Region werfen. Dieser Bereich ist was, 600 Pixel hoch. Und wofür, es ist nicht so gut für drei Symbole und ein bisschen Texte verwendet , 600 Pixel. Wieder, das ist Hände nach unten und Ausführungsfehler. Gehen Sie zu einem anderen hier, das Sie vielleicht nicht mögen. Es ist dunkles Aussehen und all diese Fotos. Aber der eigentliche Schuldige ist das nicht standardmäßige Layout. Auch wenn alles andere perfekt mit diesem seltsamen Layout ausgeführt wurde, ist das Design kompromittiert. Die Menschen erwarten gewisse Dinge an bestimmten Orten. In diesem Fall sollte sich das Hauptmenü oben rechts auf dem Bildschirm befinden. Das ist also das größte Problem mit diesem speziellen Design. Endlich habe ich noch einen für dich, der ein bisschen umstrittener ist. Hier das Design und hat die Komponenten, die ich zuvor als Standard ausgelegt. Der Kopf des Heilers Wadia verschwindet obwohl Bereich und begnügt die Fußzeile sie was nicht. Aber die Art und Weise, wie alles aufgebaut ist, ist verwirrend und schwer zu folgen. Während dies für die bestimmte Art von Person beeindruckend sein kann, ist dieses Design aufgrund all dieser Formen in Fotos, die den schlammigen, geschäftigen Look zu kompliziert . Sie werden nie wirklich mit etwas Gewinnen teilen und ob ein anderer Teil beginnt. Auch um kreativ zu sein, wurde das Standardlayout in meinem Buch nicht befolgt. Dies ist ein Ausführungsfehler und als solche würde diese Website das Essen von 10 bekommen, soweit es mich betrifft. Insgesamt sind dies die wenigen Beispiele dafür, was man mit den ersten Schritten vermeiden sollte. Also bitte bleiben Sie dran. 40. Übung: Gestalte ein Standard-Layout: Willkommen zu dieser Übung, wo ich die Herausforderung für Sie auslegen möchte. Hier ist die Aufgabe. Ich möchte, dass Sie ein Standard-Website-Layout erstellen, indem Sie zwei Dinge, Rechtecke und Textebenen verwenden. Wenn Sie mit dem Begriff vertraut sind, möchte ich, dass Sie ein Drahtmodell erstellen. Ich will nicht, dass etwas zufällig gemacht wird. Stattdessen möchte ich, dass Sie PayPal, seine Website als Bezugspunkt verwenden . Sie haben auch einen Screenshot an den Kurs angehängt, nur für den Fall, dass sie die Live-Version aktualisiert haben. Hier ist, wonach ich suche. Voller Anfang, ich möchte, dass Sie ein neues Projekt erstellen, das in der Größe angemessen ist, sowohl in Bezug auf Höhe und Breite. Als nächstes möchte ich, dass Sie den aktiven Bereich definieren. Schließlich, das Wichtigste, würde ich gerne sehen, wie Sie mit der Dimensionierung Ihrer Elemente umgehen. Zum Beispiel sollte das Rechteck, das den Kopf des Rindfleisches definiert 100 Pixel oder die 150 Pixel hoch. Wie wär's mit dem Logo? Wird das sein, dass die Pixel auf 130 Pixel? Deshalb möchte ich, dass du diese Übung machst. Es wird viele Fragen aufwerfen, die Ihnen sicherlich in Ihrer Web-Design-Reise helfen werden, oder? Bitte gehen Sie zur Arbeit und laden Sie Ihr Design als PNG oder JPEG im Kommentarbereich hoch. Zeigen Sie mir, dass Sie sich dem Gericht verschrieben haben und dass Sie wirklich lernen wollen. Selbst wenn Sie nicht denken, dass dies schwer oder sehr nützlich ist, tun Sie es bitte für mich. Vielen Dank und ich freue mich darauf. 41. So gestaltest du deine Webelemente: Willkommen zu diesem Vortrag, wo ich über die korrekte Dimensionierung Ihrer Website-Elemente sprechen möchte . Nehmen wir an, Sie arbeiten an einer Überschrift für den Halo-Bereich. Also ein bisschen Texte, die ziemlich groß sein sollen. Einige meiner Schüler haben mich gefragt, welche Größe sie verwenden sollten. Es scheint eine anständige Frage zu sein, oder? Danach würden Sie erwarten, dass eine Art Leitfaden in Bezug auf die richtige Größe der Dinge ist. Sei es eine Schlagzeile, eine Last vor dem Helliwell Yen, so weiter. Um zu veranschaulichen, warum diese Frage keinen Sinn ergibt. Hier sind unsere zwei Textebenen mit demselben Inhalt, die die gleiche genaue Schriftgröße für die Pixel haben. Ja, diese sind die gleiche Größe, aber verschiedene Schriftarten nehmen aus verschiedenen Gründen einen anderen Raum ein, das ist normal. Als solche, die vage Frage, Chris, welche Schriftgröße sollte ich für ihre Überschrift verwenden? Das ergibt keinen Sinn. Wenn Sie diese Schrift verwenden, würde ich sagen, ungefähr 100 Pixel. Wenn Sie dieses andere verwenden, würde ich vielleicht 40 Pixel empfehlen. Es hängt alles von einer Last von Faktoren ab. Dies war meine lange gezogene Art zu sagen, dass es keinen definitiven Größenleitfaden gibt. Aber nach mehr als 10 Jahren in diesem Bereich habe ich es geschafft, einige Tricks aufzubringen, die dir helfen. Erstens ist Google Fonts in Bezug auf die Topographie großartig, weil es Ihnen ermöglicht, eine große Anzahl von Schriftarten auf einen Blick zu sehen. Da der Größencontroller so offensichtlich ist, können Sie sehen, wie verschiedene Schriftarten ihre jeweiligen Boxen besetzten. Zum Beispiel ist Montserrat deutlich ausgestreckt. Also, wenn Sie Platz begrenzt ist, dies möglicherweise keine gute Wahl. Auf der anderen Seite, der Waldo kondensiert ist deutlich kompakter fallen, als er ging. Sein Name impliziert es. Beim Thema Schriftarten ist dies eine weitere fantastische Quelle, die für den Creative Cloud-Abonnenten verfügbar ist. Adobe-Schriftarten. Auch hier ist dies nur dann kostenlos, wenn Sie eine monatliche Gebühr für den Photoshop bezahlen, zum Beispiel das Fotopaket. Hier auf dieser Seite des Bildschirms finden Sie eine interessante Aufschlüsselung. Dies kann auch nützlich sein, wenn Sie ein wenig unsicher über Ihre Größe sind. Aber lassen Sie uns die großen Waffen, die narrensichere Art der Dimensionierung und Elemente richtig herausbringen , egal was sie sind. Das ist ein Vergleich Ihres Designs mit Mainstream-Websites. Nichts Phantastisches, aber deshalb ist das eine so zuverlässige Technik. Hier ist, wie Sie es tun sollten. Der erste Schritt besteht darin, eine Art von Browsererweiterung zu installieren , mit der Sie den Screenshot schnell erstellen können. Firefox hat einen eingebauten. Also alles, was ich tun muss, ist auf dieses Symbol klicken und wählen, machen Sie einen Screenshot. War toll, ist, dass ich die Wahl zwischen der Erfassung der sichtbaren Teil gegeben. Also, ohne nur das zu scrollen, was hier gesehen wird oder die gesamte Seite zu bekommen, gibt es eine ähnliche Erweiterung für Chrome. Ich bin sicher, dass Sie die installierte verwalten. Es ist ziemlich einfach. Ok. Besuchen Sie also jede anständige Website, die ziemlich bekannt ist, und machen Sie einen Screenshot. Ich benutze die PayPal-Seite noch einmal. Der Screenshot wird auf meinem Desktop gespeichert, was mein bevorzugter Standort ist, denn sobald ich mit dem Projekt fertig bin, kann ich schnell alles löschen, richtig? Dies ist etwas, das auf diesem Zitat von einem meiner Schüler eingereicht wurde. Diese Schaltfläche Szenen, groß, bauchig, vergleichen Sie es zu zahlen Kumpels Website. Ziehen Sie den Screenshot nach innen. Und das ist, wenn Sie eine richtig platzieren, indem die Ausrichtungswerkzeuge Lisa verwenden, nur seine Deckkraft. Wir wollen beide Entwürfe gleichzeitig sehen, die 50% liefen. Sie sollten in der Lage sein, beide Projekte zu sehen. Beachten Sie den humongous Unterschied. Für den Fall, dass dies nicht klar ist. Die Overdub-Aufnahme, die Dateien sind an die Akkorde angehängt, so dass Sie es selbst tun können. Spielen Sie mit verschiedenen Kapazitätsstufen herum. Und ich schlage dringend vor, dass Sie eines der Designs verschieben, bis sich die Schaltflächen überlappen. Das wird es klar machen, wie Tag, wenn Sie die Größe ist aus oder nicht, ungefähr ist es etwa 630 von 120, geben oder nehmen. Auch hier ist die Idee, eine grobe Schätzung zu bekommen. Sie müssen wirklich nicht genau damit sein, weil Sie nach der Nummer des Ballparks suchen , nachdem Sie diese Zahlen im Auge haben, 630 mal 120 messen die Fülle. Schockierend, das sind 330 mal 50. Dieser rote Knopf ist also ungefähr doppelt so groß. Das muss ein paar Alarme in den Kopf bringen, dann 20 Prozent größer ist in Ordnung. Ok. Nehmen wir an, 30 Prozent größer, aber doppelt so groß. Das ist lächerlich. Und diese Technik kann absolut überall für sie vor uns angewendet werden, um Photonen, von Schaltflächen über Icons bis hin zu Textebenen jeglicher Art. Bitte probieren Sie es selbst aus und sehen Sie, wie Sie es schaffen. Aber sich daran zu erinnern ist unerlässlich. Sie haben eine schnelle Möglichkeit, einen Screenshot aus Ihrem Browser zu speichern. Lassen Sie mich wissen, wie Sie im Kommentarbereich zu diesem Akkord tun. Viel Spaß damit. 42. Meine Formel für den perfekten Text: Willkommen zu diesem Vortrag, wo ich meine Formel für die perfekten Textebenen teilen möchte, speziell für die Absätze oder das, was ich gerne Body Text nenne. Genau hier haben wir den obersten Teil einer Website. Wir können sehen, dass diese Wand des Textes unangenehm zu betrachten ist. Ist buchstäblich ein Textblock, der scheint, aber auch unnahbar. Du würdest so etwas nicht lesen wollen, auch wenn es sehr wichtige Informationen enthielt. Heels meine 12 Punsch, die jede Textebene niedrigere Note machen wird. Nummer eins, die Zeilenhöhe macht den vertikalen Abstand zwischen jeder Textzeile. Dies ist absolut kritisch, aber es ist einer der häufigsten Fehler im Webdesign. Wir können es hier sehen. Dies wird offiziell als Kreditvergabe bezeichnet, aber ich bevorzuge die Zeilenhöhe, weil es das CSS-Theorem gibt und es beschreibender ist. Okay, im Moment ist es auf Automatik eingestellt, was bedeutet, dass es schrecklich aussieht. Was Sie tun möchten, ist in einen bestimmten Wert zu setzen, und das ist die Größe der Schriftart, mal 1,5. Das war's. Das ist der erste Teil der Formel für den perfekten Textkörper. Zeilenhöhe entspricht der Schriftgröße mal 1,5. In unserem Fall ist das 20 mal 1,5. Also 30. Lasst uns das hineinlegen. Beachten Sie den Unterschied, den es macht. Indem jeder Rolle mehr Atemraum gibt, wird der Text viel schöner. Nun, gehen wir zum zweiten Teil der Formel über und formatieren sie. Jetzt sagt Ihnen der Satz vielleicht nicht viel, aber hier ist, was es bedeutet. A, zerlegen Sie es in Absätze. Überprüfen Sie seine Länge, c, überprüfen Sie seine Ausrichtung. Der erste Teil ist sehr unkompliziert. Sie sollten nie mehr als drei bis vier Textzeilen für jeden Absatz haben. Finden Sie den natürlichen Bruchpunkt. zum Beispiel hier, und drücken Sie die Eingabetaste, bis Sie eine Lücke erhalten. Das ist es, wonach Sie suchen. Plötzlich sieht das so viel besser aus. Bitte beachten Sie, dass der Wechsel zu einer neuen Zeile nicht ausreicht. Das hier ist also ein Fehler in meinem Buch. Nein, was du eigentlich willst, ist eine leere Zeile wie diese, richtig? In Bezug auf die Punkte B und C, die Länge und die Ausrichtung. Hier ist, worauf Sie achten müssen. Die Länge bedeutet, dass Sie einen Bruchpunkt festlegen sollten, wenn die Linie mindestens 40 Prozent der Breite der gesamten Textebene beträgt. Das klingt kompliziert, aber lassen Sie mich Ihnen zeigen, wie einfach es ist. Ich lösche diese Lücke, und ich werde das tun. Sehen Sie sich diesen vollen Halt hier an. Ich setze meinen Bruchpunkt gleich dort ein. Jetzt ist das ein Ausführungsfehler. Dieses Wort rechtfertigt nicht eine ganze Zeile. Es sieht nicht gut aus, und es ist keine optimale Nutzung des Raumes. Was Sie tun müssen, ist sicherzustellen, dass der Bruchpunkt irgendwo von diesem Ort nach vorne nach rechts ist. Leider habe ich keine logische Erklärung. So sieht es einfach besser aus. Immer noch auf Punkt B, überprüfen Sie seine Länge. Sie sollten unsere Absätze niemals extrem breit machen. In unserem Fall ist dies die 1200 Pixel-Vorlage. Ihr Körper nimmt sollte nie die gesamte Breite verbringen. Das ist hässlich und schwer zu lesen. Es scheint mit viel eher geneigt, Texte zu lesen, die eine bestimmte Breite haben, also um diese Größe herum. Die Schlussfolgerung besteht also darin, immer einen mäßig breiten PECS-Schichtpunkt C, die Ausrichtung, zu haben. In den meisten Situationen ist der Zeilentext der beste Weg, um zu gehen. Einige Anfänger Designer neigen dazu, Textmitte der Zeile zu verwenden , weil sie das Gefühl haben, dass es besser aussieht. Aber glaub mir, es gibt nur sehr wenige Fälle, in denen das Sinn macht. Man könnte sagen, das ist einer von ihnen. Aber in realen Projekten ist die rechte Seite des Designs leicht links. Selbst wenn das der Fall wäre, wenn Sie anfangen, Mitte des Zeilentextes zu verwenden, müssen Sie konsistent sagen und es im gesamten Projekt verwenden. Und das ist ein Schmerz und es ist überhaupt nicht ideal. Also lassen Sie den Zeilentext es ist. Lassen Sie uns einen kurzen Rückblick machen. Um Absatztexte besser aussehen zu lassen. Sie müssen 1 nummerieren und die Zeilenhöhe festlegen, indem Sie die Schriftgröße mit 1.5 multiplizieren. Also 16 Pixel, das erfordert 24. Die Pixel für die Zeilenhöhe, 18 wäre 27, aber ich bevorzuge den Rest auf 28, 20 Pixel, die die Zeilenhöhe und so weiter. Und dann Nummer, um es in mehrere Absätze aufzuteilen. Überprüfen Sie, ob die letzte Zeile anständig lang ist. Stellen Sie sicher, dass die gesamte Textebene dort nicht zu breit ist und die Aufstellung verlassen hat. Bevor wir gehen, zumindest wissen, dass die Bedeutung der Zeilenhöhe nicht unterschätzt werden kann. Die meisten Clients verwenden den Begriff überladen mit beschäftigt, wenn sie Textebenen sehen, die automatisch überlassen werden. Auf der anderen Seite ist es auch nicht schön, etwas wie T2x anzuschauen. Motivation ist hier der Schlüssel. Du willst genau richtig, nicht zu eng, nicht zu locker. Wenn es eine Sache gibt, die Ihren Mangel an Erfahrung verschafft, dann wird es, eines dieser Extreme. Körpertexte müssen einfach und elegant sein. Lassen Sie es atmen und es wird Ihnen enorm helfen. Genau als kurze Randnotiz verwende ich diese Vorlage als Beispiel. Aber im Allgemeinen befindet sich der Körpertext unter der Subito-Legion. Das war eher eine Bräune, deshalb habe ich sie benutzt. Ich würde nie zwei Absätze Text in den mittleren Bereich setzen, und ich würde so etwas nie empfehlen. Aber wieder, das war bequemer. Okay, das war's vorerst. Lasst uns weitermachen. 43. Case Textebenen: Hey, da, Lassen Sie uns durch einige Beispiele von Texten gehen, Ebenen verschiedener Art, damit Sie besser verstehen können, was funktioniert. Beginnen wir mit diesem düsteren, dunklen Design. Obwohl es viel zu sagen gibt über verschiedene Entscheidungen, denen ich nicht zustimme. Ich möchte mich auf die Rubrik „Über uns“ konzentrieren. Hier. Das ist fast perfekt ausgeführt. Der Titel ist groß und imposant, ohne zu überwältigen. Der Textkörper ist in der Größe mit angemessen, aber er ist auch in mehrere Absätze gehackt. Sicher, dass wir sehen können, gibt es einige streunende Worte hier und da. Diese hätten korrigiert werden sollen. Aber deshalb habe ich gesagt, das ist einfach perfekt. Noch insgesamt ist dies ein Body-Text, der gut ausgeführt wurde. Aber gehen wir zu einem anderen. Hier. Die Größe ist das Problem. Es ist nicht nur zu eng, sondern auch zu groß. Die Sache ist, wenn du das hier abschneiden würdest, dann hätte ich kein Problem damit. Diese Textzeilen würden als kurze Beschreibung für jeden Dienst betrachtet. Aber wie es durch Hinzufügen eines zweiten Absatzes steht, wird das gesamte Gleichgewicht abgeworfen. Es ist unangenehm, live allein lesen zu sehen. Das ist also ein Fehler in meinem Buch. Jetzt der große. Aber wenn Sie auf die Zehn zielen, wird diese Art von Sache die 0,5 abziehen. Lassen Sie uns ein weiteres Beispiel durch dieses Design sehen. Ich hoffe, Sie können sehen, warum ich so hart daran war, für jeden Absatz eine leere Zeile zu hinterlassen. Dieser ganze Teil fühlt sich blockig und unraffiniert an. Sie können die Schriftgröße und Zeilenhöhe Hotspot auf dem Titel sehen ist auch toll. Ich mag den Aufruf zum Handeln zu, der in einer anderen Farbe und fett gesetzt ist. Aber dieser Text muss in mehrere Absätze unterteilt werden, mindestens drei, was mich betrifft. Gehen wir zu einem anderen Beispiel. Übrigens, all dies sind aus dem Zwietracht Chat mit Studenten verschiedener Erfahrungsebenen genommen . Okay, hier möchte ich mich auf den Blog-Bereich konzentrieren. Während Großbuchstaben für die kurzen Titel wie diese Überschrift zum Beispiel in Ordnung ist, ist das, was Sie unten sehen, ein eindeutiger Fehler. Sowohl der Artikeltitel als auch die Beschreibung haben diese Transformation in Großbuchstaben angewendet. Dies macht es schwer zu lesen und Ihr erster Instinkt ist es, es zu vermeiden. Deshalb sagen so viele Kunden so etwas wie, ich weiß nicht, das Design fühlt sich einfach nicht richtig an. Sie können diese kleinen Probleme nicht artikulieren. Aber glauben Sie mir, es sind solche Dinge, die sich zusammenfügen und dieses Gefühl ausmachen. Also für die Debatte, ist es in Ordnung, alle Caps für kurze Titel zu verwenden. Zum Beispiel, eine sehr beliebte Website, Web-Designer depot.com verwendet diese Textbehandlung für einige Artikel. Beachten Sie hier das Schlüsselwort. Einige Artikel. Wie Sie sehen können, ist das ziemlich kurz. Es gibt nur ein paar Worte, so dass Sie es leicht verstehen können. Auch hier, wo wir drei Zeilen von Texten ähnlich dem Blog haben, sind die Dinge akzeptabel, weil dies ein Datum ist. Also die eigentliche Sache, die Sie lesen werden, ist beliebte Design-News der Woche, kurz und süß. Beachten Sie diese anderen, beide haben eine unregelmäßige Formatierung. Also mein Rat, halte es einfach. Versuchen Sie nicht, mit Ihren Textebenen zu kreativ zu sein, da in den meisten Fällen wahrscheinlich Dinge ohne positives Ergebnis komplizieren. Im Gegenteil, Sie können mehr schaden als nützen. So einfach ist immer am besten. Umzug auf eine Anwaltskanzlei Website-Design. Hier können wir sehen, dass dieser Text anständig breit ist und in Absätze aufgeteilt ist. Die Zeilenhöhe, während sie nicht genau das 1,5-fache der Schriftgröße zu sein scheint. Es ist immer noch ziemlich anständig. Übrigens ist 1.5 ein Bezugspunkt. Je nach Schriftarteigenschaften können Sie bis zu 1.3 verwenden. Aber wenn man auf dieses Design zurückgeht, ist das Problem hier mit seiner Größe. Das ist viel zu groß für den Sub-Header mit dem Gin. Dies basiert, die nicht gut verwendet wird. Körpertexte sollten in der Regel etwa 16 bis 22 Pixel betragen. Hier. Ich bin mir ziemlich sicher, dass dies wieder fast 30, wahrscheinlich 26 oder 28 wahrscheinlich 26 oder 28ist, abhängig von der verwendeten Schriftart. Aber Tatsache ist, dass es viel zu groß ist. Ich habe Ihnen in einer vorherigen Vorlesung gezeigt, wie Sie Elemente richtig dimensionieren können. Besuchen Sie die Mainstream-Website, machen Sie einen Screenshot und überlappen Sie ihn mit Ihrem Design. Wenn du das Element 50 Prozent größer oder so etwas bist, hast du es versaut. Wenn du jemals auf diesem Zitat warst, dann hast du mich mit jemandem reden sehen. Sie haben wahrscheinlich gehört, dass ich ihre Zeilenhöhe kritisieren deswegen, einige Designer neigen dazu, zu kompensieren. Zum Beispiel ist dieses Design hier, was wir tun, völlig ausgeblasen. Die Textfelder locker, ausgestreckt. Und weil wir diesen anderen Weg hier haben, der eine gute Menge an Zeilenhöhe hat. Das macht es nur noch schlimmer. Ja, hast du das richtig gehört? Da ein Element gut sortiert ist und ein anderes nicht, sieht das gesamte Design schlimmer aus. Ich hätte es vorgezogen, dass dieser Teil ausgedehnt wird, obwohl offensichtlich die ideale Situation wäre ein Ein-Punkt-Fünf-Multiplayer-Einsatz gewesen. Aber wenn Sie Ihre Augen hier halten, ist dieser aktive Bereich 1200 Pixel breit, da der Text die gesamte Breite überspannt. Dies ist ein Ausführungsfehler. Dieser Block scheint ausgeglichen zu sein, weil er nur Linien sein muss und die letzte Zeile fast so breit ist wie die anderen beiden. Dennoch ist dies nicht ideal für die meisten Projekte, für die meisten Kunden. Wenn Sie zu viel Text haben, muss der Client ihn überdenken und abschneiden. Mit diesen Beispielen im Hinterkopf hoffe ich, dass Sie besser als meine vorherigen Richtlinien sind. Es gibt noch viel mehr zu sagen, also hören Sie bitte nicht auf, zuzusehen. Der gesamte Kurs ist eine massive Studie, die sich allmählich entfaltet. Wenn du vor dem Ende stehst, erhältst du nicht das vollständige Bild. Oder noch schlimmer, Sie können es verdrehen. Also lasst uns weitermachen. 44. Farbkontrast: Willkommen zu diesem Vortrag, wo ich über Farbe sprechen möchte, insbesondere Farbkontrast, Fersen Idee. Wir haben diese vertraute Vorlage, die dieser Vorlesung beigefügt ist. Der Hintergrund ist momentan schwarz. Und deshalb können wir alles perfekt sehen, den weißen Text, aber auch den grünen Knopf. Dies ist ein maximaler Kontrast. Das ist, was Sie in allen Fällen wollen. Aber das bedeutet nicht, dass Sie Weiß auf Schwarz oder Schwarz auf Weiß verwenden müssen. Das wäre natürlich viel zu begrenzt. Stattdessen müssen Sie verstehen, was Kontrast ist. Die Definition ist kristallklar. Kontrast ist der Zustand, in dem es auffallend anders ist. Etwas anderes. So auffallend anders, wenn wir es weiß machen, sinkt der Kontrast auf 0. Für diese Textebenen ist die Schaltfläche immer noch erstklassig. Wir können es deutlich sehen, aber wie wär's mit dem Header? Ist das angemessen? Die Antwort ist ein Resonanz Nein, das ist nicht in Ordnung. In meinem Buch, und darüber möchte ich reden. Wenn es darum geht, Farben zu wählen, müssen Sie immer nach dem maximalen Kontrast streben. Dieser Teil, während Sie es ziemlich gut lesen können, ist es nicht ästhetisch ansprechend zu betrachten, weil es nirgends in der Nähe ist, in der Nähe von maximalem Kontrast. Wie wäre es, wenn ich diesen Hintergrund sehr hellgrau mache? Ist das in Ordnung? Siehst du, die meisten Designer sind die seltsamen. Dies ist nicht ausreichend, aber sie erkennen nicht, dass Kontrast ein oder zwei Einstellungen haben sollte, maximal oder sehr nahe am Maximum. Weil sie nicht in diesen Begriffen denken. Ich habe unzählige Designs mit dieser Art von Farbkontrast gesehen. Dies ist ein sehr klarer Ausführungsfehler, weil das Prinzip des Kontrastes, so auffallend anders, nicht angewendet wird. Ja, Sie können den Text lesen. Ja. Einige Teile haben maximalen Kontrast, aber nicht das Ganze. Als solches ist dies ein Misserfolg. Dies geschieht besonders bei Schaltflächen. Beachten Sie diesen schönen Grünton, den ich benutze. Kunden wollen in der Regel helle Lasten, die auffällig sind. diesem Grund neigen unerfahrene Designer dazu, Folgendes zu tun. Sie gehen den ganzen Weg hier im Neongebiet, wo die Last schrecklich aussieht. Der weiße Text geht in dieser hellen Tastenbasis verloren. Und dann wächst das Problem in den Politiker durch Hinzufügen von Strichen oder die hohlen Ball Drop Schatten. Lassen Sie mich Ihnen zeigen, was ich damit meine. Dies ist ziemlich üblich, glauben Sie es oder nicht, der Designer, der Filz etwas war aus, die Elemente sind verständlich genug. Und dann griff er auf alle möglichen komplizierten Lösungen zurück, anstatt Dinge zu vereinfachen. Diese Striche und Schatten kleben Kleber. Hättest du MacGyver? Aber modernes Webdesign erfordert eine feine Note. Ihr Ziel ist es, eine schöne Website zu erstellen, nicht um ein Design mit Tonnen von Effekten zu verschönern. In gewissem Sinne ist es wie ein Hemd. Die meisten Kunden wollen das einfache weiße Hemd, knackig und gemacht, um nichts schreien darüber zu messen, aber es sieht gut aus. Wenn Sie diese Farben und Effekte schlagen, machen Sie es in ein käsiges gefälschtes hawaiianisches Hemd und lenken klar davon. Das ist nicht das, was die Leute wollen. Ok? Ich bin sicher, Sie haben das Problem verstanden. Was ist die Lösung? Nun, es ist eigentlich einfacher, als du denkst, US. Gesättigte Farben aus diesem Teil des Farbwählers. Schauen Sie sich einfach das Design an. Geht das zu maximalem Kontrast? Dann bist du gut zu gehen. War toll, da, sobald Sie Ihren Platz in der Farbauswahl identifiziert haben, können Sie diesen Bereich nach oben und unten bewegen und Sie werden immer noch fantastische Ergebnisse erhalten. Dann gibt dies nur ändert den Farbton. Die Helligkeit und Sättigung bleiben gleich. Das bedeutet, dass Sie mit verschiedenen Farbschemata experimentieren können , ohne Ihre Kontraststufe zu vermasseln. Das ist das, wonach Sie suchen. Dies ist, was ich in Bezug auf Farbkontrast empfehlen. Halten Sie sich an diesen speziellen Bereich und Sie werden gut zu gehen sein. Lasst uns weitermachen. 45. study: Farben – Teil 1: Hallo, hallo. Lassen Sie uns über Farbschemata im modernen Webdesign sprechen, indem wir einige Beispiele analysieren. Lassen Sie uns die Dinge mit einem Neon-Design beginnen, das Ihr Gesicht schmilzt. Das ist total übertrieben und du brauchst dafür keine Erklärung. Noch lässt sich öffnen Sie den Farbwähler und sehen mit diesem Farbcode uns. Wie erwartet. Wir sind ganz oben rechts. Extrem gesättigt, sicher, aber auch unglaublich hell. Sie können sehen, dass wir bei 99 Prozent sind. Die Sache ist, ich bin ein großer Fan dieser Art von Farben. Dies sind ein Grundnahrungsmittel von Web-Design, aber nur, wenn sie in kleinen Dosen verwendet werden und offensichtlich nicht so hell. Zum Beispiel könnte eine Call-to-Action-Schaltfläche diesen bestimmten Hex-Code oder etwas um diesen Bereich rocken . Aber wieder, kein riesiges festes Rechteck. Was Textebenen betrifft, na ja, das ist offensichtlich außer Frage. Typischerweise sollten die meisten Textebenen entweder reinweiß sein, wenn sie auf einem farbigen Hintergrund mit einem sehr dunklen Grauton sitzen. Ich würde nie entweder 00 verwenden, das ist 100% schwarz. Stattdessen bevorzuge ich alles aus dieser Region. Ich neige dazu, 33, 3 in den meisten Fällen zu verwenden , weil es das Gleichgewicht des Lesbaren trifft, während es nicht hart oder scharf ist. Hat das Problem mit reinem Schwarz, nebenbei bemerkt, sieht es völlig unraffiniert aus, vor allem in großen Mengen, IE Textebenen. Insgesamt ist dies eine Warnung. Sollte helle gesättigte Farben verwenden, aber nicht für große Elemente. Und wenn Sie diese Route gehen, gehen Sie unten auf diese Seite der Farbauswahl, das wird viel besser sein. Jetzt gehen wir zur Kehrseite der Münze. Der erste, blau wie ein Weg, dieser ist langweilig wie die Hölle. Ich liebe den Farbwähler, weil er uns die Geschichte erzählt. Sieh mal, ob wir völlig abseits der Basis sind. Aber lassen Sie mich das anders sagen. Wenn Sie diese Arten von Farben verwenden, sabotieren Sie sich mit dieser fade, ausgewaschen, deprimierende Farbe als Hintergrund, auch wenn der Rest des Designs auf Punkt ist, würden Sie nicht mehr als eine Sechs aus von 10 in meinem Buch. Jede Farbe hat eine damit verbundene Stimmung, eine gewisse Atmosphäre mit Atmosphäre. Ich kann mir nicht vorstellen, welche Art von Firma oder Kunde mit so etwas zufrieden wäre. Das zerstört im Alleingang Ihre Arbeit. Hier ist, warum jede andere Farbe nicht gut funktioniert. Sieh dir diese Orange an. Ich bin persönlich ein großer Fan davon und benutze es in vielen Projekten. Aber gekoppelt mit diesen anderen Farben macht wirklich keinen Sinn. Lassen Sie uns über Kontrast sprechen, um das Hauptmenü mit dem About Element oder dieser Überschrift zu überprüfen . Warum wir wieder, während wir sie lesen können, ist dies sehr weit entfernt von maximalem Kontrast. Sie könnten fragen, ob es in Ordnung ist, reines Weiß zu verwenden. Und die Antwort ist kein bestimmter Farbcode. Einfach UN einpacken. Schau, wenn ich versuche, weiß zu benutzen, geht es verloren. Dies ist kein guter Kontrast. Aber das Problem ist, wenn wir für den sehr dunklen Farbcode gehen, auch das macht nicht den Trick. Ich möchte Ihnen ein weiteres Beispiel geben, wie Farbe Ihre Arbeit drastisch beeinflussen kann. Gelb ist sehr limitierend. Es ist selten, weißen Text auf einem durchsichtigen gelben Rechteck zu sehen. Und das liegt daran, dass es nur eine Handvoll Schattierungen gibt, die tatsächlich funktionieren. Aus diesem Grund bevorzugen die meisten Unternehmen schwarzen Text. Also ein umgekehrter Kontrast, den ich generell nicht empfehlen kann. Und die wenigen Unternehmen, die Gelb in das Branding verwenden , haben sehr markante Farbcodes, die leicht zu erkennen sind. Also stehlen Sie entweder direkt nach oben einen Farbcode von DHL oder dem Hertz. Was versuchen Sie und Augapfel es und Sie werden sicherlich am Ende mit einer fragwürdigen Menge an Kontrast. Das Takeaway ist, dass bestimmte Farbcodes fast unmöglich zu arbeiten sind. Wenn Sie meinen Rat nicht befolgen und sich an diesen Teil des Farbwählers halten. Es spielt keine Rolle, ob Sie alles korrekt ausführen. Dein Design wird immer noch saugen. Ich möchte den ersten Teil mit etwas beenden, das Designer seit Anbeginn der Zeit geplagt hat. Nun, zumindest der Anfang des Webdesigns. Bitte tun Sie es nicht. Ich wiederhole, stützen Sie Ihr Farbschema nicht auf das Logo des Kunden. Dies ist ein sehr klares Beispiel für ein hässliches, veraltetes Logo, das nicht als Bezugspunkt verwendet werden sollte. Wenn Ihr Kunde Farben in seinem Branding aus den 1980er Jahren hat, tun Sie sich bitte einen Gefallen und kommen Sie mit einem Farbschema, das frisch und modern ist. Logos können ausgeblendet werden, sie können diese Optionen überarbeitet werden. Aber wenn Sie ein schreckliches Design erstellen, nur weil es mit dem Logo übereinstimmt, dann sind Sie den falschen Weg gegangen. Also werde ich das nochmal sagen. Basieren Sie Ihr Farbschema nicht auf dem Logo des Kunden. Wenn Sie mir ein Design mit diesem Fehler schicken und versucht, es zu rechtfertigen, Ich denke, ich werde wahrscheinlich meine Schuhe oder so. Ok. Das ist das Ende von Teil eins. Gib mir eine Sekunde und dann machen wir weiter. 46. study: Farben – Teil 2: Willkommen zurück. Wir beginnen stark mit diesem schönen Beispiel. Dies ist die Art von Kontrast, den ich freue mich in einem modernen Website-Design. Dies ist ein Foto, das einen Farbüberlagerungseffekt hat. Wahrscheinlich hat sich etwa 70 bis 80 Prozent angesiedelt, weil die Deckkraft so hoch ist, der Text durchscheint. Es ist leicht zu lesen, aber es ist auch ästhetisch ansprechend, was absolut das ist, was wir wollen. Der Body-Text ist auch schön. Es hat die richtige Schriftgröße und Zeilenhöhe. Ich würde es gerne in drei Zeilen sehen, was bedeutet, dass die Textebene breiter sein sollte, aber es ist immer noch ein gutes Beispiel. Nach unten zu bewegen, bedeutet das, was maximaler Kontrast für mich bedeutet. Da die Farben so intensiv sind, sieht der weiße Text fabelhaft aus. Ich liebe es total. Jetzt gibt es hier und da einige Ausführungsfehler. Die Social-Media-Symbole sollten im gleichen Stil gesetzt werden. Die Titel hier sollten ein sehr hellgrau sein und so weiter. Aber insgesamt ist dies ein starkes Design, das leicht in weniger als zehn Minuten verbessert werden kann. Aber jetzt lasst uns die Seiten wechseln. Hier ist ein Design, das meinen Richtlinien dafür nicht folgt. Sie sollten niemals die zugrundeliegenden Texte in einem modernen Website-Design. Das sieht sehr veraltet aus. Vielleicht doch ein starkes Wort. Ich könnte mir ein paar Fälle vorstellen, in denen das angemessen wäre. Aber wenn ich Ratschläge gebe, ip Foto reden zu 90 Prozent meines Publikums. Also, kurz gesagt, keine Unterstreichungen jeglicher Art. Als Nächstes fügen Sie den Schlagschatten niemals einer Textebene hinzu, die sich innerhalb der Last befindet. Sieht furchtbar aus. Sie können die gleiche Behandlung hier sehen. Wir haben gerade über Gelb gesprochen und wie es sehr schwierig ist, es zu verwenden, ohne buchstäblich einen Hex-Code von DHL oder einer anderen Jan-Firma zu kopieren. Hier der Designer, der Wald selbst in eine schlechte Situation mit diesem Farbton von Gelb. Niemand hat nach diesem Farbschema gefragt. Wahrscheinlich sah er das Logo und ließ sich davon inspirieren. Ich wette, du hast gutes Geld. Niemand hat nach diesem speziellen Farbschema gefragt. Wahrscheinlich sah er das Logo und bekam Inspire davon, was eine Todsünde ist. Soweit es mich betrifft. nach unten gehen, können wir sehen , dass ein weiterer schwerwiegender Ausführungsfehler sehr weit vom maximalen Kontrast entfernt wird. Mit diesem hellgrau ist es unmöglich zu arbeiten. Du kannst nicht rein weiß gehen. Du kannst nicht dunkelgrau werden. was du tust, wird wackelig aussehen. In diesem Fall hatte der Designer keine feine Note. Das hat also sicher nicht geholfen. Diese Schlagschatten und Striche sind schrecklich. Es ist eine Situation, in der man von schlecht zu schlimmer geht. Jede Designentscheidung, die falsch ist, wird verschärft. Eine andere Sache, die ich diese Basisrechtecke nenne, sie wirken wie eine Grundlage für Ihren Inhalt. Für die einfarbige Farbe zu gehen, ist nie eine gute Idee. Und entlasten oder wir benutzen das Wort nie. Aber wieder, ich fühle mich sehr stark über diese Dinge. In 90 Prozent der Fälle sollte das Basisrechteck entweder weiß oder sehr, sehr leicht sein. Und wenn ich Licht sage, rede ich über so etwas. Selbst ich konnte diese besondere Farbe nicht zur Arbeit machen. Es ist nur eine schlechte Position, um damit zu beginnen. Das Kontrastproblem setzt sich mit dieser Form und diesen Texten fort. Das ist das Klebeband und Kleber, über das ich vor ein paar Vorträgen gesprochen habe. Anstatt all dieses Chaos zu beseitigen, wählte das Design von, um es mit Stöcken und Sekundenkleber zu fixieren. Das Ergebnis fühlt sich billig und veraltet an. Ich würde gerne zum nächsten Entwurf übergehen, weil Fehler nicht immer so offensichtlich sind. Zum Beispiel, erhalten Sie Ihre Gutscheine ist ein Problem in meinem Buch, ein Ausführungsfehler, kein Zweifel darüber. Das gesamte Design sollte feminin, leicht, unfreundlich sein. Schwarzer Text hat keinen Platz über die schwarzen sagt und dann gepunktete Linie. Wenn Sie diese Art von Effekt verwenden möchten, machen Sie das Rechteck ein bisschen breiter, damit Sie diese zusätzlichen Bits nicht auf der Seite sehen. Gehen Sie runter. Die Preise haben auch keinen guten Kontrast. Schwarz auf Lila ist schrecklich. Wenn du eine Regel willst, dann ist es das. Verwenden Sie immer reines Weiß auf farbigen Hintergründen. Nicht gelb, nicht neongrün, Deal oder jede andere helle Farbe. Reines Weiß ist immer am besten für die Knöpfe, Etiketten, Bänder oder andere ähnliche Design-Elemente. Und während wir hier sind, beachte den blauen Strich um diese Rechtecke herum. Das liegt daran, dass der Hintergrund dunkel genug ist. Wenn der Designer das Farb-Overlay verwendet hätte, hätte er dieses Problem nicht gehabt. Wie Sie sehen können, erzeugt ein Problem fünf andere. Gehen wir zu einem klassischen Fehler, den ich hasse. Werfen Sie einen Blick auf diese Belastung und Schlagzeile, falls der Kontrast nirgends in der Nähe des Maximums liegt. Aber können Sie herausfinden, warum der Designer diese besonderen Schattierungen von Grün und Rot gewählt hat? Irgendwelche Ideen? Oh, das Logo der Gerichte , hören Sie, dieser Grünton ist schrecklich. Es ist eine schlechte Wahl. Putin ist einfach. Sie können sich die Farbauswahl ansehen und Sie sehen einen Sättigungsgrad, der unter 70 Prozent oder dem anderen liegt. Die Art und Weise Sport, es ist zu weit nach links. Mein Rat ist, dass Sie sich von dem inspirieren lassen, was die größten Unternehmen der Welt tun. Ich sage nicht, dass Sie die Farbcodes kopieren sollten, aber Sie werden nicht sehen, dass viele erfolgreiche Unternehmen dieses hässliche Grün in die visuelle Identität verwenden. Es funktioniert einfach nicht. Als nächstes leidet der Kontrast an allen Fronten, der Kopf sollte rein weiß sein. Gleiches gilt für die Hauptmenüs Rechteck, diese Schaltfläche hätte gefüllt sein müssen. Ganz zu schweigen davon, dass es viel zu klein für die Hauptaktion im Heldenbereich ist. Den Drahtabschnitt hinunter zu bewegen, lesen Sie auf Schwarz ist absolut schrecklich. Deshalb habe ich gesagt, weiß ist der einzige Weg zu gehen. Hier ist es wieder in diesem Forum, schrecklich. Und dann verkaufen Sie an Web-Design nur aufgrund dieses einen Prinzips, das nicht befolgt wurde. Ich werde nicht länger darauf eingehen. Die Kurven, die ich fühle, dass ich mich aufregen und ich will positiv bleiben. Ich liebe Webdesign wirklich, tun, es zu lehren. Und ich denke, dass die meisten dieser Probleme leicht vermieden werden können. Sicher, es gibt zusammen mit dem festen, aber diese einzige Sache hätte den großen Unterschied machen können. Okay, schließlich ist dieses letzte Design ein Fall, in dem das farbige Overlay einfach nicht stark genug ist. Wir begannen mit diesem Design, dass Gott nur Kontrast weiß und lila hatte. Es war auffällig, unvergesslich, schön mit hier. Das ist nicht der Fall. Der Heldenbereich ist diese sorgen dafür, dass sie besser gewesen sein können. Aber schauen Sie sich hier an. Vor allem Neongrün auf Rosa. Es ist nicht gerade ideal. Deshalb habe ich gesagt, dass Sie wegen dieser Situationen nur Weiß auf jedem farbigen Hintergrund verwenden sollten . Wie für das Overlay, Es ist einfach, es ist nicht stark genug. Dies hätte ein gutes Design sein können, aber leider einige Möglichkeiten in Bezug auf die Farbe es wirklich heruntergenommen. Insgesamt. Das ist meine Einstellung zu Farben. Weißt du, sie können dein Design machen oder brechen. Mein Rat ist klug zu sein und sich nicht einzuspielen. Verwenden Sie das Logo nicht als Bezugspunkt und stellen Sie sicher, dass Sie immer den maximalen Kontrast wählen. Aber wenn ich Max sage, geh bitte nicht auf die Neonwurzel. Das ist auch schrecklich. Und verwenden Sie niemals andere Textfarben außer Weiß, wenn es darum geht, den Hintergrund zu färben. Das ist also mein Rat. Viel Glück. 47. So wählst du Elemente im hero aus: Willkommen zu diesem Vortrag, in dem ich über die richtige Ausrichtung der Dinge in Photoshop sprechen möchte. Dies kommt auf ein zu wissen, was getan werden muss und zu wissen, wie es zu tun. Dieser Vortrag über den ersten Teil. In diesem Design. Wir können sehen, dass die Ausrichtungswerkzeuge nicht verwendet wurden. Wie kann ich das sagen? Nun, weil dies kein Layer-Projekt ist, ist das Monkey-Werkzeug mein bester Freund. Nun, im Heldenbereich, können wir sehen, dass es einen großen Unterschied zwischen diesem Teil hier und diesem Teil hier gibt. Das ist also ein totes Werbegeschenk. Dies ist eine schlechte Ausrichtung und es ist ein klarer Ausführungsfehler. Auf dem Weg nach oben, gibt es einen Mangel an Balance und Symmetrie aufgrund der Social Media Icons. Aber selbst wenn wir sie ignorieren, ist das Logo nicht mit diesem Rechteck ausgerichtet. Es ist tatsächlich nach unten versetzt. Gehen wir zu einem anderen Fall. Hier sollten diese wenigen Elemente als ein einzelnes Element betrachtet werden. Als solches muss dies vertikal in der Halo-Idee zentriert sein, also in diesem Rechteck. Weil das nicht passiert ist. Wir bekommen diese große Lücke, die alles abwirft. Persönlich kann ich das Gefühl haben, dass etwas nicht stimmt, auch wenn ich das Design von der anderen Seite aus sehe. Das ist es, was dir nicht auszurichten tut. Es erzeugt ein Bauchgefühl, dass etwas nicht stimmt. Und wie ich bereits sagte, Kunden wissen nicht wirklich, wie sie diese Dinge artikulieren können. Sie wissen nicht, wie sie dir sagen sollen, was los ist. Sie haben einfach nicht das Training, um auf diese Fehler hinzuweisen, aber sie wissen, dass etwas nicht korrekt ausgeführt wird. Okay, nach unten, Hier ist ein weiterer Fall, wo wir sehen eine ziemlich erhebliche Lücke nicht an der Spitze der Galerie gespiegelt. Das ist eine Schande, denn dieser Teil hätte etwas Besonderes sein können. Wie es steht, lassen diese kleinen Unvollkommenheiten es rauh an den Rändern erscheinen. Das Größte ist, dass dies ungefähr fünf Sekunden dauert, um zu korrigieren, ist wirklich so einfach. Oh, und nur ein paar Pixel nach unten können wir einen weiteren Fall sehen, in dem diese Elemente nach oben versetzt sind. Du musst nicht zwanghaft sein, um diese Dinge erkennen zu können. Nicht, dass Sie ein Problem für die eine Sache haben, alles richtig aufgereiht. Es ist nur eines dieser grundlegenden Dinge, auf denen jede große Website gebaut wird. Lassen Sie uns unsere Hände mit B schmutzig machen und wissen, wie man Dinge ausrichtet. Und wenn wir die Techniken durchlaufen, zeige ich Ihnen einige andere Fälle. Hier ist eine vertraute Vorlage. Das erste, was wir tun müssen, ist das absolute Wesentliche. Wir müssen die Control Shift Click-Technik verwenden, um diese Ebenen mehrfach auszuwählen und die linke imaginäre vertikale Linie zu etablieren. Dies ist die Ausrichtung der Dinge, wenn eine, und wir haben über die Einrichtung des aktiven Bereichs vor gesprochen. Als nächstes erfordert jede Schaltfläche, dass Sie beide Ebenen auswählen und eine Linie horizontale und vertikale Mitte verwenden. Auch hier ist das sehr einfach. Hier wird es knifflig. Wir haben verstanden, dass diese drei Elemente ein einzelnes Element bilden und das im Halo-Bereich vertikal zentriert sein muss. Die Nähe ist riesig. Die Menge an Platz, die Sie zwischen den Gegenständen verlassen, ist unglaublich wichtig. Überschrift hat hier oben eine kleine Lücke und hier eine logische. Dann bedeutet dies, dass diese Überschrift eher ein Teil der Kopfzeile ist als der Heldenbereich. Und das ist nicht richtig. Es scheint nicht mit diesen verwandt zu sein, sind die beiden ja, es sitzt auf diesem Rechteck, das wir den Heldenbereich nennen. Aber weil es so weit weg ist, ist es entweder ein unabhängiges Element oder es ist Teil der Kopfzeile. Keiner davon ist korrekt. Nun, das Gleiche, wenn wir die beiden nahe beieinander bewegen, aber wir drücken den Knopf nach unten. Auch hier handelt es sich nicht mehr um eine Einheit. Stattdessen haben wir zu diesem Element hier aus zwei Textebenen gemacht und diese hier, wieder, das ist alles wegen der Nähe. Um es einfach zu halten, müssen Gegenstände, die zusammenpassen, nahe beieinander stehen. Das bedeutet nicht, dass Sie Dinge drängen müssen, aber Sie müssen sich der Abstand und seine Bedeutung bewusst sein. Hier erfahren Sie, wie Sie das in Adobe XD tun. Halten Sie die Alt-Taste gedrückt, und sehen Sie die Entfernung für die Überschrift und die Belastung. So einfach, nichts Größeres. Aber für Textebenen, die einen Begrenzungsrahmen haben, müssen Sie sicherstellen, dass kein überschüssiger Speicherplatz vorhanden ist. Wie Sie sehen können, gibt uns dies die falsche Messung. Und Sie haben zwei Möglichkeiten, es zu beheben. Entweder der Schrumpfen, der Begrenzungsrahmen wie so , der wahrscheinlich nicht perfekt sein wird, aber immer noch ist es ein anständiger Versuch. Oder über das Eigenschaftenbedienfeld können Sie es auf alle Ohio ändern. Das ist dieses Symbol hier. Jetzt können Sie sicherstellen, dass diese Lücken identisch sind. Das wird mir wirklich helfen, wird ein Design so viel besser machen. Jetzt spielt der Wert keine Rolle. Sie können 20, 40, 60 Pixel verwenden, was auch immer. Aber bitte stellen Sie sicher, dass es gleich ist. Und sagen Sie, dass Sie 14 zwischen, na ja, dann die Lücke hier oben und unten, das muss viel größer als 40 sein. Hier ist der beste Weg, um darüber zu gehen. Sie wählen diese drei Elemente wie folgt aus. Überprüfen Sie das Ebenenbedienfeld, um sicherzustellen, dass. Dann gruppieren Sie sie mit Control G. Jetzt ist hier das Wichtigste. Dieser Kopf dort ist halbtransparent. Das eigentliche Rechteck geht ganz nach oben. Wenn Sie also diese neue Gruppe und den Haupthintergrund auswählen und sie ausrichten, dann ist es offensichtlich nicht korrekt. Sie können das leicht erkennen. Sehen Sie, wie viel Leerraum wir unten gegen oben haben. Es ist am Tag klar, dass das jetzt richtig ist. Stattdessen müssen Sie das tun. Sie wählen nur den Kleber aus, der diese drei Elemente enthält. Und Sie halten alle, und Sie messen den Abstand von der Gruppe bis zum unteren Rand des Rechtecks. Und jetzt von der Gruppe zum Rechteck, von der Kopfzeile. Und jetzt können Sie die Pfeiltasten verwenden, um die Gruppe nach oben oder unten zu schieben. Sie können auch die Verschiebung hier verwenden, natürlich, das P, der Prozess hat es gemessen, bis es vertikal zentriert ist. Dies ist die richtige Art, Ihre Zeit damit zu arbeiten und sicherzustellen, dass Sie verstehen, wie wichtig das ist. Und bevor wir fertig sind, möchte ich etwas betonen, das unglaublich wichtig ist. Ich habe diesen Fehler gesehen, als 1000 Mal. Wenn Sie im Hintergrund eine besetzte Vorwärtsbewegung haben, sollten Sie diese Gruppe nicht basierend auf diesem Bild verschieben. mir egal, ob es eine Skyline der Stadt wie Catherine Wilson wenn Sie das nicht bewegen, damit der Benutzer das Bild sehen kann. Wenn der Inhalt mit diesem Bild nicht funktioniert, ändern Sie das Bild. Sie brechen nicht die Ausrichtungsregel, nur weil Sie dieses Foto mögen. 48. 3 Regeln für rules: Willkommen zu diesem Vortrag, wo wir über die Verwendung von Symbolen im Webdesign sprechen. Das erste, was Sie wissen sollten, ist, dass Symbole in allen Formen und Größen kommen. Hier haben wir zwei Ton gefüllte Symbole am unteren Rand des Designs. Im weiteren haben wir monochromatische Feld-Icons für die Social Media. Gerade über diesem Teil in der Newsletter, die wir sehen, diese schöne bunte Ikone. Und irgendwo in der Mitte des Designs, haben wir diese komplizierten Ikonen, die auch als die Illustrationen betrachtet werden würden. Tatsache ist, dass sie in allen Formen, Farben und Größen kommen. Wie Sie wahrscheinlich bereits wissen, lassen Sie icon.com ist der Ort, wenn es um Symbole geht. Sie haben unübertroffene Qualität, aber sie haben auch eine riesige Bibliothek. Der Nachteil ist, dass Sie dafür bezahlen müssen. Aber darüber möchte ich nicht reden. Stattdessen möchte ich, dass Sie sich die Zeit nehmen und lernen, wie Sie diese Filter verwenden. Nehmen wir an, Sie suchen nach dem Sternsymbol, geben Sie das ein und sehen Sie, was Sie bekommen. Zunächst erhalten Sie alle Arten von Stilen, aber dann müssen Sie diesen Farbfilter verwenden und Ihre Ergebnisse weiter verfeinern. Es ist wichtig, dass Sie sich die Zeit nehmen, um zu stöbern und einfach das flache Symbol zu erkunden. Wenn Sie zum Beispiel auf ein Symbol klicken, müssen Sie nach unten scrollen und das gesamte Paket sehen. Das hier. Zum Beispiel haben wir in diesem Fall 380 Symbole insgesamt. Dies ist von entscheidender Bedeutung, da die Regel Nummer eins in Bezug auf Symbole darin besteht, dass sie übereinstimmen müssen. Es ist ein großer Ausführungsfehler, Symbole für sie verschiedene Sätze zu mischen und zuzuordnen. Lassen Sie mich Ihnen zeigen, was ich meine. Beachten Sie diese drei in diesem Bereich. Der erste ist glänzend und 3D. Nun, das sind, die beiden sind einfach und zweidimensional. Und nur ein bisschen oben, werden Sie einen noch größeren Unterschied finden. Dieser Truck und die Box sind auf Cloud icon.com als gefüllte Symbole gekennzeichnet. Nun, diese anderen sind linear, was bedeutet, dass die Basis auf Strichen, verschiedene Orte unterschiedliche Beschriftungen haben können. Aber da Flaggen-Symbol ist so ein Mainstream-Player in der modernen Web-Design-Welt, wird ihr Namenssystem verwenden. Gehen Sie zurück zu Regel Nummer eins, mischen Sie niemals Symbole aus verschiedenen Sets und passen Sie sie an. Der Truck gegen den Kurzfall ist Tag und Nacht. Sicher. Aber beachte die Ikonen von Handwerk und Wohn im Vergleich zu all den anderen wie Klavier oder schwere Maschinen. Auch wenn sie beide lineare Symbole sind, die in einem anderen Stil. Diese haben ein viel dickeres Aussehen. Selbst wenn die gefüllten nicht die Stimmung wären, wäre es immer noch keine gut aussehende Reihe von Symbolen. Aber lassen Sie uns zu einem guten Beispiel übergehen. Diese linearen Symbole der wunderschönen oben auf dieser orangefarbenen unregelmäßigen Form. Dies ist die Art von Sache, die Sie anstreben sollten. Und wenn wir bis zum Header scrollen, wird eine Reihe von vier Social Media-Symbolen sehen, die auch klein auf dem gefüllten, dass im gleichen Stil sind . Sie haben eine geeignete Größe. Das ist das, wonach Sie suchen. Als Nebenbemerkung ist Instagram ein bisschen anders als die anderen drei, aber das ist wirklich unvermeidlich. Zurück zu Regel Nummer 1. Ich bestehe darauf, da es das Wichtigste ist. Auf Klappe Icon können Sie natürlich einem Icon Packs suchen. Das macht dein Leben so viel einfacher. Zum Beispiel kann ich für meine Online-Kurse nach etwas wie Lernen suchen. Dies wird mir wahrscheinlich eine Reihe von Symbolen geben, die zu meinem Projekt passen. Und weil ich die Anzahl der Symbole in jedem Rücken sehen kann, macht das die Dinge viel schneller, weniger. Beachten Sie, wie viele Stile Sie wählen können. Auch hier ist es im Wesentlichen von komplexen oder linearen Icon-Packs gefüllt. Aber sie haben so viele Nuancen. Zum Beispiel, ich liebe diese eine ist die richtige Dicke dy Nachteile der komplizierten und gut gemacht. Es ist zum Beispiel Meilen vor diesem hier. Du fragst Chris, wenn ich sie brauche, und ich finde das Rudel, das nur acht davon hat. Nun, tatsächlich tut die häufigste Situation. Sie müssen einfach Ihr Bestes tun und zwei andere Symbole finden , die in einem ähnlichen Stil gemacht werden. Für die monochromatischen Symbole ist dies ein bisschen einfacher, besonders wenn wir über gefüllte Ruinen sprechen. Aber um das kurz zu halten, gibt es keinen einfachen Ausweg. Sie werden eine wütende Menge Zeit damit verbringen, nach dem perfekten Rücken mit einem passenden Symbol für die bestehende Packung zu suchen . Genau so ist es. Die zweite Regel: Verwenden Sie immer SVGs in Adobe XD PNGs. Der Grund ist einfach. Svg steht für Scalable Vector Graphic. Skalierbar bedeutet, dass Sie seine Größe ändern können und es bleibt scharf und gestochen scharf. Dies ist die beste Situation, sowohl für uns als Designer, aber auch für Entwickler. Wenn Sie nun die Größe von SVG-Symbol-Fersen ändern, die Sie tun müssen , deaktivieren Sie zuerst die Responsive Größenänderung Funktion. Das ist hier auf dieser Seite. Großartig. Zweitens, klicken Sie auf das Schloss-Symbol. Jetzt können Sie die Größe ändern, indem Sie einen beliebigen Wert in diesem Feld oder in diesem Feld eingeben. Falls Sie das nicht wollen, halten Sie einfach die Umschalttaste gedrückt, während Sie die Größe ändern. Aber ich schlage dringend vor, dass Sie die erste Option verwenden. Also wieder, Sie haben die Responsive Größe deaktiviert und Sie klicken auf das Schloss-Symbol. Schließlich Regel Nummer 3, Größe jedes Symbol entsprechend. Das hängt nicht mit dem Tipp zusammen, den ich dir gerade gegeben habe. Denken Sie stattdessen an Symbole, die in allen Formen und Größen vorkommen. Hier ist ein Beispiel. Der erste ist fast quadriert. Es ist eigentlich zu 56 von 2, 56 nach dem Eigenschaften-Panel, das ist ideal, aber aus der gleichen Packung. Wie Sie sehen können, sind die Dinge auch da drauf. Aber wenn wir uns auf dieses konzentrieren, bedeutet dies, dass wir es auf 90 mal 91 schrumpfen können, unabhängig von dem Wert ohne Probleme. Der nächste ist allerdings 190 mal 2 56. Was jetzt? Das ist eine Regel 3. Während das Kettensymbol gedrückt wird, bedeutet, dass das Seitenverhältnis nur geändert wird, je höher der Wert. In unserem Fall ist das die Höhe. Ich setze 90 Pixel ein. Und sobald ich feststelle, ändert sich die Breite automatisch 67 Pixel, aber es ist uns wirklich egal. Wir haben ignoriert, je niedriger der Wert. Dasselbe mit diesem letzten Symbol. Das ist ziemlich breit und kurz. Auch hier werden wir nur bearbeiten, je größer der Wert ist. Dies ist der richtige Weg, um die Größe von Symbolen zu ändern. Sie müssen sich vorstellen, sie innerhalb des Quadrats von 90 mal 90 Pixel zu platzieren. Nur ein Wert wird seine Kanten berühren, entweder die Breite oder die Höhe. Jede andere Art der Größenänderung ist in meinem Buch nicht ideal. Und das sind meine drei Regeln in Bezug auf Icons im Webdesign. Nicht mischen und übereinstimmen, verwenden Sie das richtige Format, verwenden Sie die entsprechende Schrumpftechnik, und dann haben Sie offensichtlich das vierte gegeben. Danke. 49. Case Visuelles Gleichgewicht: Willkommen zu diesem Vortrag, wo wir über etwas seltsames, visuelles Gleichgewicht sprechen werden. Jedes Design muss genau richtig sein, wenn man es ansieht und es sollte ein gutes Gefühl wecken. Ich schrieb einen weiteren Vortrag zu diesem Thema namens Symmetrie, richtige Abstände und Leerzeichen. Das ist immer noch sehr gültig, aber ich möchte Ihnen einige Beispiele zeigen. Also hier ist eine Kopfzeile, die in meinem Buch ausgewogen ist. Wir haben Social-Media-Symbole auf der linken Seite, ein Logo in der Mitte und die Telefonnummer auf der rechten Seite. Darunter haben wir ein Hauptmenü, das zentriert ausgerichtet ist. Nun, ich glaube nicht, dass das 10 von 10 ist. Das ist die Art der Balance, nach der ich suche. Auf der anderen Seite, werfen Sie einen Blick auf diesen oberen Teil hier. Für mich sieht dieses Design so aus, als ob es sich nach rechts lehnt. Ich nehme es als schwerer auf dieser Seite, sowohl wegen dieser Gegenstände hier, sondern auch wegen dieses Mädchens. Die Linke fühlt sich leer an. Es fühlt sich an, als ob ich meine Erfahrung nicht wirklich auf bestimmte Gestaltungsprinzipien stützen kann. Ich bin mir ziemlich sicher, dass das gut dokumentiert ist. Stattdessen kann ich Ihnen sagen, dass mein Bauchgefühl mir sagt, dass dies nach rechts gelehnt ist, als wäre es der Turm von Pisa. Und mein größter Grip ist, dass dieses Problem so einfach zu korrigieren ist. Platzieren Sie einfach einen anderen Artikel auf der linken Seite. Wir werden das in zwei Elemente aufteilen. Es ist so einfach wie das. So erreichen Sie das Gleichgewicht. Werfen wir einen Blick auf die Fußzeile, wo wiederum die visuelle Balance der Schlüssel ist. Hier haben wir diesen leeren Raum auf der linken Seite. Das stört mich wirklich. Sie als Designer haben die volle Kontrolle. Sie hätten weitere Informationen zu dieser Spalte hinzufügen können, oder Sie hätten diese Navigation in zwei Teile aufteilen können. Lassen Sie uns auf ein anderes Design umdrehen, wo das wieder nicht gerade wunderbar ist, aber es ist ausgewogen. Für Spalten, gut verteilt, gleiche Menge an Elementen in jedem. Dies ist insgesamt besser als mein Buch, oder anders gesagt, weniger schlecht als das andere Design. Wir haben dieses Projekt bereits gesehen. Die Social-Media-Symbole erstellen eine neue Zeile. Das ist, was 95 Prozent leer ist. Diese winzigen Symbole haben diesen ganzen Raum nicht verdient. Stattdessen könnte das Suchfeld vollständig entfernt worden sein, oder wenn es obligatorisch war, könnte es erweitert worden sein, wenn der Benutzer darauf klickt. Mit diesem zusätzlichen Raum hätte der Designer sie in der gleichen Reihe wie das Hauptmenü platzieren können. Wenn Sie mich fragen, würde ich wahrscheinlich monochromatische Symbole verwenden, alle die gleiche Form, wahrscheinlich Kreise, und sie nicht hier zwischen dem Logo und dem Hauptmenü platzieren. Und so würde ich mit einer einzigen Reihe ein visuelles Gleichgewicht erzielen. nur ein wenig nach unten bewegen, bekommen wir einen weiteren Fall einer schweren Säule in einer sehr leichten. Das ist nicht OCD, das bin nicht ich, die Dinge verhältnismäßig hochsprengen. Wenn der Kunde Ihnen Inhalte gibt, müssen Sie Ihre Magie arbeiten und sich etwas einfallen lassen, das sowohl funktionell als auch ästhetisch ansprechend ist. Es ist so einfach, hinter Ausreden wie aber Wappen zu verstecken, Das ist der ganze Inhalt, den ich erhalten habe. Sicher. Aber es war deine Entscheidung, es so zu stylen. Es gibt viele Optionen. Es geht nur darum, genug über Ihre Arbeit zu tragen und zu wissen, dass Gleichgewicht der Schlüssel ist. Das bedeutet nicht, dass alles vollkommen symmetrisch sein muss. Zum Beispiel sind diese vier Spalten in meinem Buch in Ordnung. Sicher, das letzte Wort hätte erhoben werden können, aber alles in allem, obwohl es eine klare Neigung gibt, sieht das anständig aus und mein Buch, wir lesen von links nach rechts und wir haben gewisse Erwartungen darüber, wie die Dinge sollen angelegt werden. Auch hier ist dies ein anständiger Versuch, ist nicht so schlimm. Ich bin eigentlich eher gestört durch die Tatsache, dass diese Textebenen nicht oben ausgerichtet sind. Nun, ja. Diese drei sind offensichtlich identisch. Nun, dieser andere bricht weg. Dennoch ist der Gesamteffekt viel akzeptabler als das, was wir gerade im oberen Teil des Designs gesehen haben. Ok, weitermachen. Hier ist ein weiterer Fall, der mir völlig das Herz bricht , weil ich völlig mit dem Designer dachte , der Kunde hat dieses unbequeme Logo, das ein Schmerz ist zu arbeiten. Es ist viel zu groß. Wenn Sie es verkleinern, wird es nicht lesbar sein. Aus Angst, dass der Kunde nicht glücklich sein wird, ein winziges Logo zu haben. Der Designer entschied sich, die Kopfzeile zu überdimensionieren. Sobald diese Entscheidung getroffen wurde, begannen Fehler aller Art zu überschwemmen. Die Sache ist, selbst wenn Sie hier verschiedene Dinge hinzugefügt haben, wie ein sekundäres Menü oder Social-Media-Icons, wäre dies immer noch ein Fehler in meinem Buch gewesen, wobei das Balancing beiseite gelassen wurde. Das liegt daran, dass ein intelligenter Designer harte Entscheidungen treffen und Stellung nehmen muss. In diesem Fall hätte ich das Symbol fallen gelassen und ich hätte den Titel behalten oder umgekehrt. Ich hätte das Symbol behalten können. So oder so, der Header müsste nicht mehr so groß sein. Jetzt verstehe ich, dass du einfach nicht mit dem Branding von Leuten herumspielen kannst , um dir das Leben zu erleichtern. Sie können das Coca-Cola-Logo auf zwei Linien aufteilen , nur weil es besser zu Ihrem Design passt. Aber die Sache ist, nicht alle Ihre Kunden sind Firmenriesen, die einen Style Guide haben oder sie sind tief eingebettetes Branding, das um jeden Preis gepflegt werden muss. Tatsächlich akzeptieren die meisten Kunden verschiedene Bearbeitungen, solange das Endergebnis wesentlich besser ist. Aber das ist ein Thema für einen anderen Tag. Um diese Vorlesung zusammenzufassen, balancieren Sie Ihr Design wann immer möglich aus. Verwenden Sie Ihre Elemente mit Bedacht und schaffen Sie einen ausgewogenen Look durch Symmetrie. Sehen Sie sich bitte die Vorlesung an. Ich erwähnte, dass der Anfang, Es ist mit Marks Stimme. Mark ist ein Sprecher, den ich in der Vergangenheit benutzt habe. Sei also nicht schockiert, wenn du meinen rumänischen Akzent nicht auch sickern hörst. Vielen Dank. 50. Gedanken über den ersten Schlüssel des Webdesigns: Hey, da, ich hoffe, du hast durch diese Vorträge viel gelernt. Ich finde, Webdesign ist eine Methode der Patienten und Präzision. Die Kraftstofffehler, desto besser ist das Design. Die Leute haben dieses Missverständnis, dass Sie kreativ sein müssen , um großartige Websites zu erstellen. Die Wahrheit ist, du musst einem Rezept folgen und jeder Kuchen, den du backen wirst, wird mindestens die Hälfte des Synthesizers sein. Wenn Sie die Dinge sorgfältig messen und alle Schritte befolgen, gehen die Dinge schief, wenn Sie denken, dass Sie es besser wissen. Und wenn du immer weniger Fehler machst, wird deine Qualität steigen. Bestimmte Techniken werden zur Gewohnheit und Sie werden schneller und schneller sein. Mit Schnelligkeit und Erfahrung gewinnen Sie Freiheit und können anfangen zu experimentieren. Du solltest immer laufen lernen, bevor sie versucht haben, etwas zu laufen. Dies ist das häufigste Problem bei Anfängern. Sie sind so besorgt darüber, welche Schriftarten sie verwenden sollten , oder das Web, von dem sie ihre Inspiration erhalten, welche Symbole sie verwenden sollten und was nicht. Wenn in der Tat, sollten sie auf die Verwendung der richtigen Zeilenhöhe für die Textebenen konzentrieren wird eine gute Menge an Kontrast, aber konsistent in den Designs, genug Leseraum, Erreichen von Symmetrie, Ungleichgewicht , und so weiter. Also hoffe ich, dass diese Hinrichtungsfehler jetzt sehr klar in deinem Kopf sind und du wirst in der Lage sein, sie von einer Meile entfernt zu erkennen , um es besser zu machen. Bitte tun Sie dies, nehmen Sie an der Discord Chat und überprüfen Sie den Kanal genannt die Ansicht meiner Arbeit. Hier gibt es viele Leute, die ihre Designs posten, um Feedback zu erhalten. Bitte klingeln Sie ein und lassen Sie sie wissen, wo sie schief gelaufen sind. Sie müssen kein Experte sein, um die meisten Fehler zu erkennen, selbst wenn dies Ihre ersten Web-Design-Kurse sind, bitte beteiligen Sie sich. Indem du dein Auge trainierst, um diese Ausführungsfehler zu erkennen, wirst du viel besser werden. Es geht darum, konstruktives Feedback zu geben. Und je mehr Sie es tun, desto mehr wird sich Ihr Verstand an diese neue Denkweise anpassen. Und damit hoffe ich, dass ich in Ihrer Arbeit keine Hinrichtungsfehler sehen werde. Vielen Dank und lassen Sie uns weitermachen. 51. Der zweite Schlüssel, um ein tolles Webdesigner zu bekommen: Hallo und willkommen auf der zweiten Säule des Webdesigns, die die Bedürfnisse des Kunden verstehen. Bevor wir weitermachen, hoffe ich, Sie haben meine Vorträge über die perfekte Ausführung von Pixeln gesehen. Und wie funktioniert die Grundlage eines ernsthaften Web-Designer? Wenn Sie Ihre Hausaufgaben noch nicht erledigt haben, schauen Sie sich diese Videos an, bevor Sie fortfahren. Hier ist die Idee. Sobald Sie die Ausführungsfehler beseitigt haben, ist es Zeit für Sie, das Design durch ein anderes Objektiv zu betrachten, speziell für die Augen Ihres Kunden. Für mich ist das etwas, das meine Fähigkeiten als Designer völlig verändert hat. Sobald ich mich in die Schuhe des Klienten gesteckt habe, ist es, als hätte ich die Offenbarung. Mein gesamter Entscheidungsprozess wurde zum Besseren verändert, einfach weil ich verstanden habe, dass jedes Element einen Grund haben muss, da zu sein. Sie werden entweder die Hilfe des Kunden oder Sie haben einfach nur Spaß in Photoshop. Es ist so einfach wie das. In den folgenden Vorträgen werde ich alles erzählen, was ich in den vielen, vielen Jahren als Designer, aber auch als Unternehmer gelernt habe vielen Jahren als Designer, . Indem ich in beiden Lagern bin, habe ich das Gefühl, wertvolle Einblicke zu gewinnen, und ich möchte sie mit euch teilen, damit ihr in eurem Handwerk besser werden könnt. Nun, die erste Säule des Webdesigns ist sehr praktisch und praktisch. Was du hören wirst, ist meine eigene Erfahrung. Dies wird vor allem Fallstudien in Geschichten sein. Bitte seien Sie auf weniger praktische Arbeit vorbereitet. Insgesamt ist der folgende Teil subjektiv, und Sie können einigen meiner Punkte nicht zustimmen. Das ist völlig in Ordnung. weiß nur, dass alles, was ich sage, von einem guten Ort kommt und dass ich versuche, Ihnen zu helfen, ein besserer Webdesigner zu werden. Wenn Sie eine andere Meinung zu einem bestimmten Thema haben, ist das völlig in Ordnung. Also, wenn das gesagt wird, lasst uns darauf hineingehen. 52. Was ist die Stelle?: Das erste, was Sie sich fragen müssen, wenn Sie ein neues Projekt starten, ist, was ist das Ziel des Unternehmens? Das liegt daran, dass eine Website ein Werkzeug ist, es ist ein Mittel zum Zweck. Um meinen Punkt zu verdeutlichen, hier ist ein Design auf Discord eingereicht. Wenn wir schnell auf die Breite gehen, können wir sehen, dass das ziemlich okay ist. Es ist nicht toll, aber es ist auch nicht so schlimm. Auf der anderen Seite, werfen Sie einen Blick auf diese andere. Lassen Sie alle Design-Elemente beiseite wie Schriftarten, Farben, Abstände, Fotos und vieles mehr. Warum sind diese Meilen voneinander entfernt? Nun, das hat einen Zweck. Die Website richtet sich an eine bestimmte Sache, um dieses Bett Zuschlag zu verkaufen. Zu diesem Zweck haben wir eine sehr klare Schlagzeile. Einige USBs oder die Alleinstellungsmerkmale, eine schöne Schaltfläche, sondern auch diese Grafiken, die zusätzliche Informationen über dieses Geschäft bieten. Wir als Besucher verstehen, was wir tun müssen. Wir können diese Ergänzung für alle Haustiere kaufen, und wir sollten das aus diesen Gründen tun. Wechseln wir zurück zum ursprünglichen Design. Hier. Nehmen wir an, mit Geschäftsinhabern, ich habe tatsächlich ein paar von meinen eigenen. Nun, was ist der Sinn dieser Website? Was soll ich tun? Es steht „Erste Schritte“, aber was bedeutet das? Lassen Sie uns lesen, wir bringen Ihr Geschäft auf die nächste Ebene und dann einige generische Lorem Ipsum. Ich bin sehr verwirrt. Welche Dienstleistungen verkaufen sie? Ist dies Marketing, Personal, Social Media Management. Das ist unglaublich vage darin könnte buchstäblich alles sein. Das ist das Problem. Aus diesem Grund wird diese Art von Design, die alle Design-Entscheidungen beiseite lassen, vom Kunden nicht gut angenommen werden. Dies ist ein klassischer Anfängerfehler. Der Designer konzentriert sich so sehr auf Ästhetik, dass er den Punkt aus den Augen verliert. Eine Website muss chirurgische Präzision haben. Jeder Geschäftseigentümer benötigt ein Scharfschützengewehr, wird sehr spezifische Kunden schlagen. Würden die Leute nicht erkennen, ist, dass der Schrotflintenansatz keine gute Idee ist. Sie wollen sich nicht über alle möglichen Gruppen von Menschen verbreiten. Wissen Sie, dass Sie auf Ihre Zielgruppe abstimmen möchten. diesem Thema gibt es viel zu sagen, aber ich möchte das noch einmal sagen. Unternehmen benötigen Websites mit einer sehr klaren Botschaft und einer gut definierten Zielgruppe. Das ist für die Menschen mit Haustieren. Das hier ist für jeden, was bedeutet, dass niemand. Werfen wir einen Blick auf ein anderes Beispiel. Hier. Wir gehen davon aus, dass dies eine Art von Anwaltskanzlei ist, aber wir haben keine Ahnung, welche Art von Dienstleistungen sie erbringen. Es gibt Scheidungsanwälte zitieren, dass Verteidigungsanwälte in. Oh, so viele andere. Selbst wenn ich da drin bin und juristische Hilfe brauche, wäre ich nicht in der Lage, sie zu wählen, weil ich keine Ahnung habe, worum es bei ihnen geht. Aber schauen wir uns das an. Das perfekte Bettlaken, das gerade für Sie gemacht wurde. Das ist klar, wie Tag, wir wissen, was sie verkaufen. Die Schlagzeile ist auf dem Punkt. Das Foto bekommt den Punkt über diese Verkaufsargumente hat mir geholfen, meine Meinung zu bilden. Und die Aktion ist zweifach. Entweder kaufen Sie es, was mehr erfahren. Das ist perfekt. Das Design ist vielleicht nicht atemberaubend, aber dieser Designer versteht, was das Geschäft will. Verkäufe. Werfen wir einen Blick auf ein anderes Beispiel. Wir bieten qualitativ hochwertige Web-Design und Entwicklung. Fantastisch. Aber sehen Sie, das ist schön zu sehen, und das ist, was diese off Anfänger. Sie könnten denken, diese schöne Illustration ist, warum diese Art von Design bekommt vier oder fünf beginnt auf 99 Designs. Aber das ist nicht der Fall, ist die Tatsache, dass der Designer den Punkt des Geschäfts verstanden. Und so eine Dienstleistung zu verkaufen, die sie anbieten. Welcher Service? Webdesign und -entwicklung. Aber gehen Sie auf eine andere Website zu Social Planet, können Sie herausfinden, was der Sinn dieses Designs ist? Menschen und Organisationen in den optimalen Gesundheitszustand bringen. Aber wieder, ist dies ein medizinischer Dienst, ein Ort, Yoga zentriert, eine Turnhalle der Art. Deshalb ist dies von Anfang an zum Scheitern verurteilt alles andere beiseite lassen wie Schriftarten, Farben, Schema, Abstand in was auch immer. Das spielt keine Rolle. Ohne die Bedürfnisse des Kunden zu verstehen, haben Sie keine Ahnung, was Sie bauen sollen. Machen wir eine kurze Pause und dann machen wir weiter. 53. Der Benutzer im Vergleich zu den Geschäftsbesitzer: Es gibt zwei Seiten, um die Geschichte zu haben. Es ist der Unternehmer, der ein Unternehmen und den Besucher führen will, was der Benutzer, der einen Kauf von Arten zu machen sucht. Um dieses Problem vollständig zu verstehen, lassen Sie uns die beiden Seiten erkunden. Zuerst wird ein normaler Benutzer sein. Also Kunde, sagen wir, ich suche eine Web-Design-Agentur für das neue Business Venture. Ich werde diesen Begriff eintragen und ich werde die Top-Suchergebnisse öffnen, meistens von der ersten Seite, natürlich. Dann, nachdem ich 45 geöffnet habe, werde ich sie schnell durchgehen, damit ich die Dinge eingrenzen kann. Vielleicht möchte ich eine Agentur aus meiner Stadt mit jemandem, der auch SEO oder die Facebook-Werbekampagnen macht. Vielleicht jemand, der sich auf E-Commerce-Websites spezialisiert mit einem Unternehmen, das Live-Chat bietet, damit sie schnell meine Fragen beantworten können. Ich habe auch ein begrenztes Budget von rund $1500. Ich würde gerne einige Preise sehen, wenn möglich, aber auch einige andere Designs, die sie gemacht haben. Das hier ist sehr dunkel und trostlos. Es ist kein guter Eindruck, also schließe ich ihn einfach. Dieser andere ist auch ziemlich dunkel, düster und zu einfach für meinen Geschmack. Das ist raus. Das hier ist auffällig zu sehen. Ich behalte das hier. Diese andere. Nun, es ist zu orange und ich mag keine Orange, also nein, das hier ist irgendwie langweilig, aber ich will eine schöne Website. Das hebt sich hervor. Wenn ihre Website langweilig ist, wie können sie dann etwas Großartiges für mich erschaffen? Also ist es raus. Dieser sieht aus, als wäre er 2005 gemacht worden, viel zu veraltet für meine Tage. Und das Sprechen aktualisiert. Sie einen Blick auf das hier. Absolut schrecklich. Sie sagen, sie sind seit 2008 im Geschäft. Nun, es zeigt sich in genau so in der Methode der Sekunden nach oben vollständig überprüft einige Unternehmen meiner Liste. Sie haben mich als Klient verloren. Sie haben meine $1500 verloren. Aber was wäre, wenn ich ein Budget von 50, 10.000 Dollar hätte? Kannst du dir den Schmerz vorstellen? Und warum habe ich einige von ihnen ausgeschlossen? Aus dummen Gründen, natürlich, zum Beispiel, mag ich nicht orange, aber auch für die ernsten, wie das Design sah veraltet aus. Meine Patienten als Klient sind nicht vorhanden. Mein Kind schreit im Hintergrund, ich komme zu spät zur Arbeit. Etwas brennt auf dem Herd, und ich habe 0 Zeit, um diese wichtige Entscheidung zu treffen. Mein Bauchgefühl treibt mich meinen Instinkt an. Ich habe einige Ideen darüber, was ich brauche und ich suche nach diesen Antworten. Wenn du mir keine Telefonnummer zeigst, bin ich raus. Kein Live-Chat, keine Liste der Dienste aus, und so weiter. Sie könnten annehmen, dass ich als Kunde unglaublich hart bin, aber das ist die Persönlichkeit eines typischen Kunden. Es gibt so viele Websites, die dasselbe angeboten haben, dass ich keine Patienten habe. Das ist die Welt, in der wir leben. Und das gilt für alles. Ob Sie einen Toaster kaufen möchten, ein Haus höher, die Anwaltskanzlei, ein Klempner, würde einen Zahnarzt wählen. Die Welt des Verbrauchers ist unglaublich riesig. Ich habe eine endlose Menge an Möglichkeiten. Wenn ich dein Logo, dein Farbschema oder was auch immer nicht mag , bist du in zwei Sekunden raus. Kunden können als Victoria Secret Supermodels angesehen werden und Geschäftseigentümer gleichermaßen Jungs haben sich ihnen auf der Party nähern. Supermodels haben keine Patienten, weil sie wissen, dass es eine Linie um den Block herum gibt, die stirbt, um mit ihnen zu reden. Ihre Website gibt mir nicht, was ich will, in zwei Sekunden flach, ich bin für immer raus. Ich würde sagen, das ist vielleicht weniger als 10 Prozent Chance, dass ich zurück bin. Wieder. Das mag lächerlich klingen. Vielleicht magst du meine Metapher nicht, aber ich glaube, so funktioniert es. Lasst uns die Seiten wechseln. Wir sind der Geschäftsinhaber einer dieser Websites. Wir haben die Rechnungen bezahlt, wir haben versucht, das Geschäft auszubauen. Wir tun unser Bestes, um qualitativ hochwertige Dienstleistungen anzubieten. Wir haben nicht genug Leute in unseren Teams, während die Website nicht so toll aussieht, die bestehenden Mitarbeiter drängen hart, frühere Projekte abzuschließen, so dass sie keine Zeit für die Neugestaltung mit dem Versuch haben , die Drüsen zu gefallen, die wir haben erhalten bisher. Und nachdem das erledigt ist, können wir vielleicht einen Umbau machen. Wir wollen wahrscheinlich mehr Geschäfte. Also verwenden wir Anzeigen, Google-Anzeigen, Facebook-Anzeigen, Sie machen Betten. Jeder Klick wird uns Geld kosten, ernstes Geld, weil es so viel Konkurrenz für jeden potenziellen Kunden gibt, wir könnten so hoch wie $50 zahlen. Ja. Hast du das richtig gehört? Für den Besucher, der auf unsere Website kommt und in 1,5 Sekunden verlässt, können wir ein Bündel ausgeben. Aus diesem Grund müssen wir sehr vorsichtig mit anderem Geld, aber auch mit unserem Aussehen sein. Wir wollen diejenigen Menschen ansprechen, die tatsächlich an Web-Design-Services interessiert sind. Wenn wir Menschen anziehen, die nach anderen Dingen wie SEO oder Facebook-Anzeigen suchen, und wir ihnen nicht anbieten, Geld aus dem Fenster zu werfen. Also, das ist B ist, dass wir Menschen dazu bringen müssen, hier zu bleiben. Bounce Rate ist ein Begriff, der verwendet wird, um zu beschreiben wie viele Personen eine Website beim erneuten Besuch sofort verlassen. Wenn wir eine hohe Absprungrate haben, sagen wir 80 bis 90 Prozent, bedeutet das, Geld zu verschwenden. Buchstäblich bedeutet dies, dass von zehn Personen, die auf unsere Website kommen, acht oder neun verlassen, ohne einmal zu scrollen. Und diese 10 Leute werden bezahlt, ob es ein Dollar ist, was $200 immer noch Geld vor der Tür ist. Was können wir als Geschäftsinhaber tun, um sicherzustellen, dass die Leute hier bleiben? Zuerst müssen wir die richtige Zielgruppe ansprechen. Wenn unser Add Dot Leute bekommt, die Rasenmäher suchen , und wir präsentieren sie mit anderen Web-Design-Dienstleistungen. Offensichtlich gehen sie, Das ist klar wie Tag. Aber die zweite Sache ist, dass wir einen großen ersten Eindruck machen müssen. Erinnern Sie sich an diese Website als Kunde, wir haben sie sofort ausgecheckt. Uns gefiel es nicht. Also wir, als Unternehmer, brauchen wir eine wunderschöne Silhouette noch, die mit großartigen zeigt, was wir tun. Unsere Webdesign-Dienstleistungen sind erstklassig. Wir haben fantastische Preise und eine tolle Turnaround. Aber natürlich, wenn die andere Agentur das sagt, so müssen wir unseren eigenen Twist finden und unsere Website unvergesslich machen. Ich könnte weitermachen, aber das ist die Qual eines Geschäftsinhabers. Deshalb sagte ich, du brauchst das Scharfschützengewehr. Wenn Sie Anzeigen verwenden, um Besucher auf Ihre Website zu gewinnen, benötigen Sie Präzision. Sie wollen keine großen Stücke von Menschen, die nach Rasenmähern, Spots, Ergebnissen oder Senkungen suchen , das kostet Sie Eimer Geld ohne die neuen Ergebnisse. Und dann für die wichtigsten Nutzer, die sich für Web-Design-Services interessieren, müssen wir einen fabelhaften ersten Eindruck machen. Und das ist der Konflikt zwischen dem Benutzer und dem Geschäftseigentümer. Der Besucher ist eine Art von Pre-Madonna, ein Supermodel, das eine scheinbar unendliche Anzahl von Möglichkeiten hat. Und auf der anderen Seite muss der Unternehmer in Sekundenschnelle einen unglaublichen ersten Eindruck machen, sonst verdient er kein Geld. In diesem Sinne, werfen Sie einen weiteren Blick auf diese Website. Würde das den Unternehmer glücklich machen? Wird es ihm helfen, seine Ziele zu erreichen? Nein, natürlich nicht. Und deshalb müssen Sie als Designer die Bedürfnisse des Kunden verstehen. 54. Analysen im Webdesign: Ich bin an einem Ort in meinem Leben, wo ich erstaunt bin, wie ein Unternehmer mich zu einem besseren Webdesigner macht. Hier ist der Grund, warum in der Wirtschaft, vor allem in E-Commerce Analytics, alles ist. Ich spreche nicht von Google Analytics, obwohl das ein großer Teil davon ist. Es geht darum, Dinge zu messen und Entscheidungen basierend auf Statistiken zu treffen. Der Schlüssel, ich sage es nochmal. Gestaltungsentscheidungen müssen auf der Grundlage von Statistiken getroffen werden. Dies ist aus zwei Perspektiven wichtig. Nummer eins, es lehrt Sie, wie Sie besser für die Forming-Websites zu entwerfen. In sie hilft Ihnen, die Bedürfnisse des Kunden zu verstehen. Lass uns über die zweite reden. Hier ist, was öfter passiert als nicht. Du vervollständigst das Projekt, du hast das Design geliefert, es wird implementiert. Aber dann, wenn es live ist, fragt der Kunde nach den Änderungen. Warum ist das so? Vielleicht hat er das Design vor ein paar Wochen genehmigt. Was hat ihn dazu gebracht, seine Meinung zu ändern? Und Analytik? Er sah bestimmte Statistiken, die ihm sagten, dass es ein Problem mit Ihrem Design gibt, ist nicht, dass er in schlechter Laune aufwachte oder dass seine Frau das Farbschema nicht mochte? Nun, sicher. Man könnte denken, Kerze ein paar Fälle wie das, es ist wahr. Aber die meiste Zeit sah der Geschäftsinhaber Metrik, die auf das Problem hinwies. Die Sache ist in Photoshop oder Adobe XD, alles kann gut aussehen. Vielleicht bist du glücklich. Der Kunde und sein Team können glücklich sein. Aber der Endbenutzer wird das letzte Mitspracherecht haben. Eine Website muss aufführen, nicht um Aussehen und einen Eindruck zu machen. Eine Website ist ein Werkzeug, das zwischen bestimmten Parametern funktionieren muss. Sie geben Ihr Bestes, aber es ist nur eine gebildete Vermutung, ob Ihr Design funktionieren wird oder nicht. Ob es zu verkaufen oder zu konvertieren. Und das werde ich noch einmal sagen. Wenn Sie eine Website entwerfen, machen Sie eine gebildete Vermutung, eine Wette, wenn Sie so wollen, darüber, wie es funktioniert. Manchmal verstehst du es falsch, oder in den meisten Fällen gibt es Raum für Verbesserungen. Somit ist die Idee einfach. Der Client möchte Änderungen, nachdem das Projekt abgeschlossen ist da bestimmte Statistiken darauf hinweisen, dass eine Änderung, eine Bearbeitung erforderlich ist. Gehen wir zum ersten Teil über, wie Analytics Ihnen dabei helfen, eine bessere Website zu entwerfen. Das wird die Dinge sofort klären. Hier ist ein Beispiel. Ich habe eine Werbeagentur eingestellt, um einige Facebook-Anzeigen für mein Unternehmen zu schalten. Sie richteten eine Kampagne ein, bei der das Ziel war, Menschen dazu zu bringen, das Produkt in ihren Warenkorb zu legen. Einfach genug, oder? Darauf aufbauend könnten wir verschiedene Entscheidungen treffen. Will tatsächlich etwa $80 ausgegeben wurden. Die Ergebnisse waren schockierend. 367 fügt in den Warenkorb nur eine Konvertierung. Dies ist katastrophal und es zeigt, dass das aktuelle Kartendesign unterpar ist. Ich habe tatsächlich das Problem untersucht und die Versandkosten waren nicht klar, weil die Leute ihren Wagen verlassen. Also habe ich Verkäufe verloren. Basierend auf dieser Beobachtung habe ich eine Neugestaltung vorgenommen und die Dinge wurden verbessert. Gehen wir zu einem anderen Beispiel. Ich habe eine Traffic-Anzeigenkampagne über dieselbe Agentur durchgeführt und meine Absprungrate war unglaublich hoch. Manchmal ist es die Spitze, dass 85 Prozent. Kurz gesagt, das bedeutete, dass acht von 10 Personen ihre Website verlassen haben, ohne etwas zu tun. Nicht so sehr wie ein Klick. Mehr als das, es bedeutet, dass ich acht Leute auf meine Website gebracht habe für nichts, aber zu einem erheblichen Preis. Ich habe für sie bezahlt. So wurden etwa 70 bis 80 Prozent meines Budgets aus dem Fenster geworfen. Buchstäblich verschwendet. All das, weil die Homepage nicht sofort zeigte, was ich nach dem Redesign verkaufte. Das beinhaltete eine bessere Überschrift, Unterüberschrift und das Zusammendrücken von gut mehr Inhalten, die sich zum Besseren änderten. Ich sage nicht, dass der Titel Sie von 0 auf 100 nehmen kann, aber jede leichte Verbesserung wird sehr geschätzt im Geschäft, ob das 50 Prozent oder die 50 Prozent. Eine andere, ich arbeitete Tag für Tag an der Desktop-Version meiner Website nach einem Chat mit jemandem mit mehr Erfahrung im E-Commerce, Ich sah schließlich auf den Traffic Panne. Mehr als 90 Prozent meiner Besucher kamen von Mobilgeräten. Das bedeutete, dass meine Bemühungen etwas vergeblich waren. Ich habe nicht an der mobilen Version gearbeitet, nur auf dem Desktop. Es war ein großer Fehler. Insgesamt. Es war nicht umsonst, weil der Umsatz gespalten 72 Prozent mobile und 27 Prozent Desktop. Das sagt mir also, dass Desktop-Besucher einen überdurchschnittlichen Umsatz erzielen, obwohl sie nur 9% des Traffics ausmachen. Das ist Analytik. Und es spielt wirklich keine Rolle, welches Tool Sie verwenden oder der Client. Es ist Facebook-Anzeigen, Google-Anzeigen waren hart jar, Opt-in-Monster oder was auch immer. Die Idee ist, dass alles, was Sie entwerfen, getestet werden muss. Es erzeugt bestimmte Zahlen und basierend auf ihnen, machen Sie Änderungen. Es ist ein nie endender Prozess. Für uns als Webdesigner müssen wir sicherstellen, dass wir verstehen, dass dies in der heutigen Wirtschaft notwendig ist. Mein Rat ist, dass Sie einen festen Preis für das Projekt berechnen dann einen Stundensatz für alle kleinen Änderungen und Bearbeitungen einrichten , die unweigerlich kommen werden. Eine Website ist keine statische Sache. Wie ein Hartholzboden, den Sie installieren, den Sie jeden Tag verwenden. Selbst wenn es teuer ist. Es ist ein Werkzeug, das ständig kalibriert werden muss, um seine beste Leistung zu erzielen. Geschäftseigentümer durch die dramatisch, einige sind extrem gebildet, hat keine Ahnung. Aber Sie als seriöser Webdesigner müssen die Macht der Analytik verstehen und dass Ihre Designentscheidungen durch Statistiken unterstützt werden müssen. Wenn Sie die am besten aussehende Website entwerfen, ist alles umsonst. Wenn die Leute keine Einkäufe tätigen. Und in diesem Zusammenhang hat jedes Unternehmen bestimmte KPIs, wichtige Leistungsindikatoren. Für die Summe ist es die Zeit, die vor Ort verbracht wird, die Anzahl der neu erstellten Konten, die Zahlen über die Bestellungen, die Anzahl der verkauften Produkte, die Vielfalt der verkauften Produkte, der Gesamtbetrag des Dollars die Anzahl der besuchten Seiten in so weiter. Jedes Unternehmen ist anders für Sie, das bedeutet nur eins. Mehr Arbeit in einem guten Weg, um besser in diesem Analytics-Spiel zu werden. Fragen Sie den Kunden nach Erkenntnissen. Bitten Sie ihn, die Statistiken mit Ihnen zu teilen. Und Sie werden schockiert sein zu sehen, wie, nachdem Sie zum Beispiel die Größe einer Belastung in einem Gelehrten geändert haben, wie das allein den Umsatz um 20 Prozent steigern kann. Denk darüber nach. Das ist es, was ein moderner Webdesigner tut. Und nach einer Weile sammelst du all diese Erfahrungen. Und wenn es um Ihr nächstes Projekt geht, wissen Sie bereits, dass Sie CTA Button sagen sollte In den Warenkorb statt jetzt. Und das ist am besten, um es 260 Pixel breit zu haben. Aber nicht mehr als das. Das ist, was Sie an den Tisch bringen sollten. Erfahrungen aus der Vergangenheit basierend auf Analysen, basierend auf Erkenntnissen. Aber denken Sie daran, es ist nur eine gebildete Vermutung ist das Beste, was Sie haben. Analytics, mein Freund, das ist der Schlüssel zum Webdesign. 55. Vorlagen und Website-Erstellung – Vorlagen – Webdesigner?: Willkommen zu diesem Vortrag, wo ich über den möglichen Tod des Web-Designers sprechen möchte. Hier ist das Szenario. Manche Leute spekulieren müßig oder machen sich Sorgen, dass du und ich veraltet sind. Dass Web-Designer sind die Rasse dazu bestimmt, durch Vorlagen und Website-Builder zu sterben. Ich werde dich nicht hängen lassen. Ich bin nicht einverstanden. Und nicht in der Art und Weise, wie Benzinautos Hersteller nicht an Elektroautos glauben. Oder wie manche Menschen noch den Klimawandel sehen, ist nicht real. Ich weiß, dass ich beide Seiten auf diesem Spiel spiele. Hier ist, wie ich weiß, dass unsere Dienstleistungen noch für mindestens zehn weitere Jahre mindestens benötigt werden , WP Bakery Page Builder. Haben Sie von diesem Login gehört? Wie wäre es mit dem Element oder dem Schieberegler, der Evolution? Wenn diese nicht klingeln eine Glocke, Ich bin sicher, dass Sie das Thema Wald gehört haben, die unglaublich beliebt für die WordPress-Vorlagen gespeichert ist. Ich bin selbst ein großer Fan und ich habe mehrere Themen wie die Sieben gekauft. Das Wertversprechen ist immens für neununddreißig Dollar von so erhalten Sie eine auf Gott die Menge der Funktionen. Ich werde sie nicht präsentieren können, weil wir den ganzen Tag hier sein werden. Aber beachten Sie, das ist ein unglaublicher Preis und ich bin nicht mit ihnen verbunden, noch habe ich etwas von dieser Promotion zu gewinnen. Nun, dieses Ding, wie fast alle Top-Bestseller, gibt Ihnen einen Page Builder , der angeblich sehr einfach zu bedienen ist. Es ist keine Codierung involviert. Sie nehmen einfach ein Element aus einer Liste, ziehen es an Ort und Stelle, und fügen Sie dann Ihren Inhalt hinzu. Sie einen Blick auf diese Website. Dies ist für meinen rumänischen Photoshop-Kurs, und diese ganze Sache basiert auf WordPress-Themes und Plug-Ins. Ich bin mir nicht sicher, wie du es denkst, aber ich bin ziemlich glücklich damit. Es hat meine Ziele verwendet, es funktioniert leicht gut. Und am Ende des Tages, das ist, was Metalle für mich als Geschäftsinhaber, das ist das Frontend, das die Öffentlichkeit sieht. Werfen wir nun einen Blick auf das Backend. Siehe diese Spalte mit einzelnen Bildeinträgen. Das ist dieses Ding hier. Der Inhalt ist offensichtlich dieser hier. Nachdem wir ein bisschen nach unten scrollen, bekommen wir einen CTA-Block, einen Call-to-Action-Block, wo ich den Schüler schiebe, die Gerichte zu kaufen. Das ist diese Gruppe hier. Etwas niedriger als das. Wir haben eine Galerie und auf und weiter geht es, lassen Sie mich den ganzen Weg nach unten gehen und klicken Sie auf dieses Plus-Symbol. Das ist der wirklich erstaunliche Teil. Hier ist, wie viele Elemente Sie einschließen können. Praktisch alles, was man sich vorstellen kann. Von Schiebereglern über Videoplayer bis hin zu Google Maps, Tabs , Listen und so weiter. Wir können Ewigkeit allein auf diesem Teil verbringen. Und nachdem Sie einen ausgewählt haben, können Sie den Titel festlegen, ihn beliebig anpassen sein Design ändern. Und wenn Sie wechseln, um ein anderes Modul zu sagen, haben Sie andere Einstellungen und Funktionen. Und alles, was Sie hier sehen, kann mit diesen neu positioniert werden. sie einfach so herumbewegt, wie du willst. Und Sie können auch bearbeiten, wie die Zeile aufgeteilt wird. Sehen Sie sich alle diese Optionen an. Diese ermöglichen es Ihnen, praktisch alles zu gestalten, was Sie möchten. All das wofür, 40 Dollar. Weniger Unterstützung, wenn auch von den Entwicklern begrenzt, ein Zugang zu einem Forum gefüllt mit Antworten auf die Fragen. All dies scheint, als ob es keinen Sinn macht, einen Designer, einen Entwickler zu mieten und was dann 2100 Mal mehr zu bezahlen. Es scheint unlogisch zu sein. Warum habe ich dann keine Angst vor dem Sterben? Dies ist eindeutig ein würdiger Gegner. Keine Frage darüber. Nun, die Antwort ist einfach. Ich habe es benutzt. Eigentlich habe ich diesen Website-Builder ziemlich viel benutzt. Und ich habe auch einige der beliebtesten Themen auf Teamwäldern gekauft. Ich habe auch die vorgefertigten Websites ausprobiert, die Ein-Klick-Vorlagen, bei denen alles, was Sie tun müssen, ist, den Dummy-Inhalt auszutauschen, was EINE Tatsache ist, ist, dass es harte Arbeit ist. Deshalb weiß ich, dass wir keinen Job mehr haben werden. Hör zu, ich bin Designerin, aber ich bin auch Unternehmer. Und ich bin jetzt schon seit 78 Jahren einer. In meinem Android Design Studio hatte ich ein Team von über 20 Personen. Ich musste täglich laufen. Jetzt habe ich ein gesundes Food-Startup , das die Art und Weise ändern will, wie Menschen das Büro führen. In der Vergangenheit hatte ich ein paar Bäckereien, aber auch einige E-Commerce-Stores, einige Websites ähnlich wie Groupon. Weißt du während meiner Karriere, was mir am meisten gefehlt hat? Es war Geld. Es war an der Zeit. Zeit ist es, was mich umbringt. Zeit ist es, was mir nicht erlaubt, mehr Inhalte, mehr Qualitäten für dich zu produzieren . Zeit ist es, was mich bescheiden hält. Ich habe fantastische Geschäftsideen versteckt, disruptive, die mich möglicherweise zu einem Bündel machen können, aber ich habe keine Zeit, sie richtig auszuführen. Als Unternehmer jongliere ich ständig mehrere Aufgaben. Und wenn Sie sich nicht wohl fühlen unter Druck ist wie Sie ertrinken, ist der Stress immense Verantwortung. Ich bin nicht auf der Suche, um Geld zu sparen, ich bin auf der Suche nach wachsen, erweitern, neue Leute einstellen, die Dinge beschleunigen können. Ich will nicht alles selbst machen. In einigen Fällen bin ich gezwungen, dies zu tun, aber ich würde lieber das Controlling aufgeben, frei sein, andere Dinge zu tun. Fazit ist, ob ich ein völlig neues Geschäft aufbaue oder ein leite, ich habe keine Zeit, all diese mühsame Arbeit zu erledigen. Und meine Freunde, die auch Unternehmer sind, dass das gleiche. Ich bin kein Einzelfall. Ich weiß, dass mit dem Page Builder, dies mühsam, weil ich es getan habe. Ich verbrachte eine Tonne Zeit mit diesem Baumeister und ähnlichen, nur weil ich ein wollte, das Ergebnis perfekt sein, genau wie ich es mir vorgestellt habe. Und B, ich wollte nicht lernen, wie man kodiert, noch wollte ich einen Coder einstellen, weil ich sie ausgiebig benutzt habe. Ich weiß, dass die überwiegende Mehrheit der Geschäftsinhaber sie nicht anfassen wird. Sie könnten sie kaufen. Sie könnten herausfinden, wie man einen Hosting-Plan kaufen, eine Datenbank installiert WordPress einrichten, das Team installiert und vielleicht einfach nur eine vorgefertigte Vorlage installieren. Aber sie werden weder die Patienten noch die Fähigkeiten haben, um mit all diesen Dingen zu fummeln. Absolut. Jede einzelne Sache, die Sie hier sehen, wurde optimiert , bearbeitet und mindestens zehnmal angepasst. Die schiere Anzahl der Einstellungen liegt außerhalb der Diagramme. Soll ich sie Mauerwerk Gitter oder eine Standard-Ruine? Zeigen Sie alle Bilder an. Würde Paginierung mit etwa faul Laden verwenden. Aber was ist das faule Laden übrigens, wie viele Gitter pro Reihe beeinflussen meine Ladegeschwindigkeit? Wie wär's mit einer Lücke? Versuchen wir es fünf, dann zehn, dann 25 war besser. Ich mache Bilder optimiert. Was ist mit einer Bildergalerie? Wie wäre es mit den Tim Galerie Bilder, was Thema Galerie Beitrag war der Unterschied? Nun, so habe ich Abend für Abend verloren. Wie meine Augen blutrot wurden. Und weißt du was? Am Ende, Ich noch höher der Entwickler ein Coder. Ja, ich hatte immer noch nicht genug Flexibilität, dass Entwickler immer noch alle möglichen Bearbeitungen vornehmen mussten, CSS, JavaScript, Login bei jedem PHP und Menge andere Sachen, die ich nicht ins Frontend gehen werde. Dieser Videoplayer ist individuell angepasst. Diese beiden Tasten oder benutzerdefinierte, das CQI-Menü an der Unterseite wird von ihm als auch getan. Und so weiter. Die Vergleichstabelle wurde von mir unter anderem im Fotoshop entworfen. Die lange gezogene Schlussfolgerung ist also, dass diese Gebäude großartig sind. Sie sind mächtig, aber sie erfordern eine Menge Zeit und anständige Fähigkeiten. Und außerdem gibt es einen zweiten Grund, warum wir nicht als Webdesigner absterben werden. Und das ist H&M. Ich habe das Glück, maßgeschneiderte Hemden zu kaufen, die für meinen Körpertyp gemacht werden. Ich gehe rein und bekomme Hemden, Jacken und Anzüge. Ob Sie es glauben oder nicht, ich bin ziemlich schick im wirklichen Leben, also warum Sie mich immer in einem Hemd in den Einführungsvideos sehen. Das ist mein Stil. Jetzt zahle ich 50 bis 100 Mal mehr als das, was ich bei H&M zahle. Weil ich Qualität will. Einmal etwas, das auf meine Bedürfnisse zugeschnitten ist. Sie können sicher denken, dass ich ein Snob bin, aber so sind die meisten Leute mit ihren Geschäften. Ein Geschäft ist dein Baby. Du liebst es von ganzem Herzen, du baust es und du willst es auf eine bestimmte Art und Weise erledigen, auf deine Art und Weise. Die Tatsache, dass H&M existieren und sie erschwingliche Kleidung anbieten, die ziemlich anständig ist , beeinflusst mich nicht und es wirkt sich nicht auf dich aus. Es gibt einen Markt für alle. Haben unsere Geschäftseigentümer, die kein Problem haben Hunderte von Stunden mit einem Page Builder zu fummeln. Aber diese Leute waren dennoch Zielpublikum. Wir haben kein Geschäft verloren. Deshalb sterben wir nicht ab. Seitenbauer sind zeitintensiv und die meisten Geschäftsinhaber haben nicht diesen Luxus und Schrägstrich, oder sie verfügen nicht über die technischen Fähigkeiten, die benötigt werden, um es abzuziehen. Zweitens werden die billigsten Optionen immer da sein. Wir bieten den Premium-Service und als solche sind wir nicht von $10 Shirts betroffen. Wenn wir 300 Dollar verkaufen, sind die meine Meinung. 56. Case 4 Versionen derselben Website: Hey da, willkommen zu diesem Vortrag, wo ich möchte, dass wir für die Versionen der gleichen Website analysieren. Diese sind alle aus 99 Designs entnommen. Die Plattform, die Geschäftsinhaber und Designer verbindet, machen Wettbewerbe. Grundsätzlich ein Kunde, sowohl der Brief, der seine Anforderungen und den Geldpreis enthält. Und dann kommen Designer aus der ganzen Welt an Arbeit und erstellen Einträge basierend auf den Bedürfnissen des Kunden. Nur der Gewinner erhält den vollen Geldbetrag. Obwohl die Designer gehen und D übergeben, es ist eine Hardcore-Umgebung, in der man hart arbeiten muss, aber man muss schlau sein. Im Wesentlichen ist, dass das beste Design nicht gewinnt. Stattdessen die Drüse Pixel Favorit. Das ist eine große Auszeichnung. Das werde ich nochmal sagen. Der Kunde wählt nicht den besten Eintrag aus Sicht des Designs. Stattdessen wählt er diejenige, die zu seiner Vision passt. Indem sie diesen Punkt nicht verstehen, verschwenden viele Designer ihre Zeit und Energie auf 99 Designs. Ich habe gute GIS-Einträge abgelehnt, nur weil der Designer die Kurzbeschreibung nicht gut genug gelesen hat. Nun, der Eintrag wurde wunderschön ausgeführt. Es war nicht das, was der Kunde durch diese vier Entwürfe für sein Geschäft wollte. Ich hoffe, ich kann Sie in die richtige Richtung lenken. Ich habe nicht die kurze, aber wie Sie im Begriff sind zu sehen, braucht es nicht. Ich denke, ich kann die Drüsenbedürfnisse rückentwickeln , indem ich die Entwürfe und die Art, wie er sie erzielte, analysiere. Übrigens, dank Dean Conway, einem meiner Schüler in diesem Akkord, der mir diese Entwürfe gegeben hat, richtig? Dies wurde als Gewinner gewählt. Der hier hat vier Sterne. Diese 13. Endlich zwei von fünf Sternen. Das ist also das Schlimmste. Auf den ersten Blick können Sie zustimmen, dass dieser besser aussieht, aber ist das wirklich der Grund, warum der Kunde es gewählt hat? Ich denke, es ist ein Teil davon, aber es gibt andere Faktoren im Spiel. Das erste, was ich merke, ist, dass diese beiden Einträge, die schlecht bewertet wurden und auf Fotos von Menschen basieren, dieser hat insbesondere viele Bilder. Ich habe insgesamt zehn gezählt. Und der einzige Teil der Website, der nicht auf Personen angewiesen ist, ist der Bereich „Dienste“. einen Schritt von seiner Zwei-Sterne-Bewertung zurücknehme, würde ich wahrscheinlich sieben oder eine Acht dieses Designers geben. Schließlich ist es ziemlich gut ausgeführt. Ich mag die Tatsache, dass die Bilder keine generischen Stockfotos sind , die Sie jedes einzelne Design gesehen haben. Die Symbole sind ziemlich detailliert und sie sehen in Ordnung. Sicher, nicht fantastisch, aber es gibt mehr als Abstieg. Diese Person ist schön aus seinem Abschnitt geschnitten und das zeigt Liebe zum Detail. Das Unternehmen ist eine Buchhaltungsgesellschaft für kleine Unternehmen. Daher ist eine menschliche Berührung typischerweise eine gute Passform. Sie wollen bodenständig erscheinen. Sie wollen Unternehmer ansprechen, die gerade erst angefangen haben. Und indem es viele Fotos zeigt, macht es sie zugänglicher. So wie Sie sehen können, wenn aus dem Kontext genommen, dies ist eine gut aussehende Website, die eine gute Bewertung für mich bekommt, aber es bekommt nur zwei Sterne, entschieden man hat drei Sterne. Etwas der gleiche Ansatz, aber dieses Mal ist es ein bisschen raffinierter. Es hat mehr abgefackelt, mehr Präsenz, um diesen Abschnitt hier zu tun. Aber auch zum Sub-Header mit Region, wo wir die gleiche Behandlung mit der Person sehen , die außerhalb der Grenzen dieses Elements geht. Immer noch nur zwei Neustarts. Der Vorfeld konzentrierte sich auf Illustrationen allein, keine Leute, von denen man sprechen sollte. Als Nebenanmerkung, obwohl dies eine hohe Punktzahl für die Fünf-Sterne-bekam, dieses Design und endete immer noch mit $0. Das ist also im Grunde wertlos. Schließlich ist der Gewinner eine Mischung aus benutzerdefinierten Grafiken und Fotos. Wir haben diese schöne isometrische Grafik und den Heldenbereich. Aber dann bekommen wir eine menschliche Note zu diesem Foto. Als nächstes einige erstaunliche Symbole, die wahrscheinlich aus vorgepackten Punkt com genommen werden, wie der Heldenbereich, übrigens. Aber dann ist das mit diesem Foto ausgeglichen. Schließlich, eine weitere schlanke Bereich zu diesem Tablet-und Preis-Tabelle. Also insgesamt, was ist das Mitnehmen? Der Kunde hatte die bestimmte Vision vor Augen, wo Technologie Menschen trifft. Wenn das Unternehmen eine Person war, Er wollte nicht ein 55-jähriger Buchhalter sein, konzentrierte sich auf die alte Art und Weise, Dinge zu tun. So empfand er diese beiden Entwürfe als Standard. Sie taten, sie repräsentierten die alte Art, Dinge zu tun, und sie waren sehr ähnlich zu Schulden bestehenden Website. Es ist wahrscheinlich, dass seine Konkurrenten einen ähnlichen Look schaukelten. Stattdessen wollte der Kunde, glaube ich, moderner sein, High-Tech, nicht so sehr, dass er ein 20-jähriger mit Phase sein wollte , die in seiner Nase zollt und klingelt. Aber die 30-jährige, die ODE mit, dass Beiträge versteckt unter seinem Button up Shirt mit dem neuesten Ultrabook an seiner Seite und seinem Lieblings-Coffee-Shop. Das ist es, was der Gewinner repräsentiert. Es gibt eine gewisse Stimmung. Ja. Und Buchhalter, um diese beiden Fotos zu machen. Aber 2020 Buchhalter mit leistungsstarker, innovativer Software, mit Dashboards und schlanken Schnittstellen, optimierten Prozessen, die neue Art der Geschäftstätigkeit. Aber nochmals, beachten Sie, dass der Zweitplatzierte sich zu sehr auf High-Tech konzentriert. Das fühlt sich kalt an. Tun Sie all das Blau ist über den USA und die Schattierungen sind viel zu düster. Es ist nicht genug, selbst wenn es mit diesem leuchtend orange kombiniert wird, sieht Design Corporate ernst aus, aber in einer Weise, in der es trainiert wird, jung und hip zu sein. Es gibt ein Jahr des Zusammenstoßes. Auf der einen Seite haben Sie diese Linien, Kreise und benutzerdefinierte Grafiken. Auf der anderen Seite haben Sie Textwände, unangenehme Blautöne und generisch aussehende benutzerdefinierte Grafiken. Es ist ein Kampf, der Lärm, Reibung verursacht. Es ist ein Design, das nicht die gleiche Sprache mit dem Wind zu tun ist verwirrt. Er weiß nicht, was er sagen will. Es ist wie ein Business-Blazer mit Flip-Flops in Shorts. Aus konstruktiver Sicht ist diese falsche Dateneingabe schlechter als diese beiden anderen. Aber der Kunde sah Einblicke in das, was er mochte. Er sah den Blazer, er sah die Boardshorts, er sah das Potenzial. Deshalb hat das vier Sterne. Objektiv ist diese Textwand ein klarer Ausführungsfehler. Die Schriftgröße ist viel zu klein und die Zeilenhöhe ist abgründig, zumindest ist in Absätze unterteilt, aber es ist immer noch ein wesentlicher Fehler. Was den Heldenbereich betrifft, ist die Überschrift völliger Unsinn. Dies ist die geringste Menge an Arbeit, die Sie abziehen könnten. Ich bin mir nicht sicher, ob er schlimmer hätte machen können. Das ist genau das, worüber mein Zitat steht. Aber lassen Sie uns nicht abgelenkt werden. Dieser Teil ist nicht gut ausgeführt. Die Learn more Buttons scheinen von einem anderen Ort gestohlen worden zu sein. Sie scheinen von geringer Qualität und pixelig zu sein. Normalerweise passiert das, wenn Sie das Marquee-Werkzeug auf einem anderen verwenden , um etwas zu stehlen? Ich bin mir nicht sicher, ob das der Fall ist, aber auf jeden Fall sieht es etwas seltsam aus. Dieser Teil hier, dieser zu feminin, und es ergibt keinen Sinn. Was sollen diese eiförmigen Elemente für mich tun? Es gibt keinen Aufruf zum Handeln. Die Räume schlecht genutzt, es macht keinen Sinn. diese Tabellen betrifft, sind diese ebenso schrecklich. Diese sollten weiße Rechtecke gewesen sein. All dieses Blau verdunkelt die Stimmung dramatisch. Selbst für ein Buchhaltungsgeschäft ist es viel zu ernst. All dies in viel mehr, aber es hat Ford Stars gehen, um die Gewinner-Design. Diese Illustration hat sicherlich einen Einfluss gemacht. Aber beachten Sie den Aufruf zum Handeln, wenn hier und ein anderer hier. Perfekte Punktzahl dafür. Beachten Sie, die große Menge an negativem Raum. Dies hilft, gute, offene Stimmung zu übertragen. Der erste Eindruck ist fantastisch. Es ist auf Augenhöhe mit dem letzten Eintrag, der übrigens das Symbol in die Laptopabdeckung integriert hat. Das ist eine nette Note. Beachten Sie auch, dass der Heldenbereich anständig groß ist. Dieser ist viel zu groß, ohne irgendeinem Zweck zu dienen. Die mutigen Worte machen nicht viel Sinn, also ist das ein bisschen ablenkend. Ich mag auch nicht, dass hier ein Bindestrich verwendet wird. Aber wenn man das beiseite lässt, könnte man argumentieren, dass dieses vierte Design genauso wirkungsvoll ist wie das erste. Aber weil der Kunde als Schneide dargestellt werden wollte, klickte dieser mit ihm. Für den sekundären Aufruf zur Actionschicht ist das Video gut integriert, aber hier hört die gute Nachricht auf. Das Copywriting ist bescheiden. Online. Werben Dienstleistungen, Buchhaltung, Buchhaltung mit einem N großen Dipol, sie schreiben den Heldenbereich. Als nächstes bemerken wir, wie wir hier geschrieben haben. Das ist ein weiterer Fehler. Diese Elemente sind auch nicht linksbündig ausgerichtet. Wenn wir ziehen eine Führung wird sehen, dass der Designer nicht den linken Ausrichtungsbefehl verwendet hat. Dieser Bereich hier macht auch keinen Sinn. Wir haben zwei Untertitel und nicht lebenswichtig, die auf zwei Zeilen platziert ist. Das ist aktivierter Ausführungsfehler, soweit es mich betrifft, nicht einmal an der Wand des Textes anzufangen. Plus die mehr Über uns Taste ist extrem seltsam in einer solchen Position platziert, in einer solchen Art und Weise. Ich bezweifle, dass es so umgesetzt werden wird. Was passiert, wenn die Breite des Bildschirms deutlich größer sein wird? Nun, ich könnte weitermachen, aber mit dem Takeaway begann ich diesen Vortrag mit 99 Designs. Das beste Design gewinnt nicht immer. Stattdessen wählt der Kunde diejenige aus, die seinen Bedürfnissen entspricht. Und dieser Eintrag zeigt Ihnen, dass Sie mit einer Menge Fehler davonkommen können. Wenn Sie die richtigen Boxen auswählen. In diesem Kurs konzentrieren wir uns darauf, die Dinge richtig zu machen? Kein seriöser Klient wird all diese Probleme akzeptieren, besonders wenn wir über Tausende von Dollar sprechen. Aber 99 Designs ist eine andere Art von Tier, bei dem Sie einen anderen Ansatz haben müssen. Deshalb muss ich Web-Design-Kurse. Dieser konzentriert sich auf die Schaffung schöner, effektiver Websites. Das, dass man konzentriert sich auf den Sieg. Wie Sie gerade gesehen haben, sind dies zwei verschiedene Ziele. Schließlich möchte ich, dass Sie sich auf den Designer konzentrieren, der diesen Zwei-Sterne-Eintrag erstellt hat. Wie fühlt er sich wohl, nachdem er dieses gewinnende Design gesehen hat? Offensichtlich ist er verärgert. Aber es gibt zwei Möglichkeiten, es zu tun. Sie können denken, 99 Designs ist eine schreckliche Plattform, wird einen Idioten Kunden und Schrägstrich tun oder dass der Design-Wettbewerb war ein Scherz. Oder Sie können aus Ihren Fehlern lernen und in Zukunft einen anderen Ansatz verfolgen. Wenn das zum Beispiel zwei Sterne hat, hätte ich sofort einen illustrationsbasierten Eintrag erstellt. Wenn Dad Neustarts bekommen hätte, hätte ich verstanden, dass ich wärmer werde. Es geht um die kurze und das Feedback der Kunden. Wenn er nichts schreibt, siehst du wenigstens von seinem Kern aus, worin er steckt. Dieser Designer konnte nicht abholen, was der Kunde wollte. Eine moderne Website mit High-Tech-Elementen. Und auf diese Notiz, danke dieser Tablette, helfen Sie diesem Designer, wenn dieser Wettbewerb, Ich bin ziemlich sicher, dass dieses Tablet enthält einen zufälligen Screenshot. Sie können von Dribble oder was auch immer. Und ich bezweifle sehr, dass dies vom Kunden zur Verfügung gestellt wurde oder sie können von seiner bestehenden Website. Ich denke, sie haben nicht einmal diese Software, aber ich glaubte fest, dass dies dazu beigetragen hat, den Deal zu versiegeln. Und damit haben wir diesen Vortrag abgeschlossen. Ich hoffe, das hat Ihnen geholfen zu verstehen, warum die Gestaltung großartiger Websites nicht ausreicht und warum es wichtig ist, dass Sie verstehen, was der Kunde will. Viel Glück. 57. E-commerce: Willkommen in dieser Fallstudie, in der wir über die Bedürfnisse des Kunden sprechen werden. Dies ist eine E-Commerce-Website, die physische Produkte verkauft, insbesondere Limonade, Haferflocken, Schlüssel, einen Pudding, und so weiter. Wie Sie wahrscheinlich bereits wissen, ist dies mein eigenes Geschäft in Bukarest, Rumänien. Ich werde alles aufschlüsseln, damit du verstehen kannst, was die Argumentation dahinter ist. Denken Sie daran, ich werde sowohl als Webdesigner, als auch als Unternehmer sprechen. Also lasst uns anfangen. Die Nummer eins, was ich von dieser Website will, ist, Umsatz zu generieren. Das liegt daran, dass dies eine E-Commerce-Website ist. Sie können diese Produkte von der Website kaufen und sie in weniger als zwei Stunden an Ihre Haustür liefern lassen. Dies ist keine Präsentationswebsite, die Ihnen den Standort einiger physischer Speicher anzeigt. Das ist eine wichtige Sache, die ein bestimmtes Layout diktiert. Okay, Verkauf, um sie zu bekommen, müssen wir die Produkte zeigen. Das ist der erste Schritt. Das liegt an dieser Stelle fast 30. Also muss eine Entscheidung getroffen werden. Wie sollten diese angelegt werden? Was Sie hier sehen, ist ein dreispaltiger Ansatz mit Registerkarten. Aber warum nicht vier oder fünf Säulen breit? Nicht alle auf der Homepage auflisten. Nun, die Produkte sind auffällig, del auffällig. Sie haben verschiedene Farben und einfach einen Blick auf sie zeigt eine schöne Abwechslung. Weil die Produkte das visuelle sind. Sie brauchen eine gesunde Menge an Platz. Die Fotos müssen groß sein. Wenn man bedenkt, dass es sich um die wenigsten sechs Produkte pro Kategorie handelt, ist das das Maximum. Ein Raster aus drei Spalten und zwei Reihen ist ideal. Eigentlich habe ich das vierspaltige Layout bei 1 ausprobiert, aber ich mochte es nicht. Das ist für die Fälle, in denen ich acht Produkte haben würde. Aber wieder, das Maximum ist jetzt sieben und wird jetzt wirklich benötigt. Die Tabs sind auch eine gute Idee, weil sie im Mittelpunkt stehen. Dann unmittelbar nach der Unterüberschrift, Es ist unwahrscheinlich, dass jemand sie vermissen wird. Insgesamt ist das erste, was in einer E-Commerce-Website sortiert werden muss , die Vielfalt der Produkte auf effektive Weise zu zeigen. Die Produkte selbst, wir sind viel auf diese Entscheidung und die Zahlen. Wenn diese hässlicher waren, einfacher, hätten wir eine andere Art von Layout verwenden können, vielleicht eine Liste mit einem kleinen Avatar für die, jedes Produkt. Wenn der Laden Tausende von Produkten hatte, ist eines der beliebtesten Layouts dieses. Wir sehen eine Liste von Gegenständen, die mit einigen ziemlich schönen Icons verbunden sind. Beachten Sie, dass nicht übrigens gefüllt, sondern linear, was eine intelligente Wahl ist, weil es den Entwurfsbereich macht. Wie auch immer, wenn man auf die Struktur zurückgeht, sagt niemand, dass diese Produkte hässlich oder unattraktiv sind. Aber weil es so viele von ihnen gibt, wird eine textbasierte Liste benötigt. Zurück zu unserem Design. Die Überschrift und die Unterüberschrift sind ein Muss. Die Registerkarten werden verwendet, um schnell durch den Produktkatalog zu navigieren. Lassen Sie uns über das Produkt in diesem Angebot sprechen. Wenn sich Menschen umsehen, ist unser Ziel als Webdesigner, ihnen genügend Informationen zu geben , damit sie einen Kauf tätigen können. Nicht zu wenig, denn dann erscheint die Website nicht glaubwürdig und einfach zu bedienen. Nicht zu viele Informationen, weil es den Benutzer überwältigen kann. Somit geht das Layout wie folgt. Was ist absolut obligatorisch? Das ist die Frage, die dir im Kopf stehen sollte. Welche Elemente sind in einer Auflistung essentiell? Offensichtlich ist das Foto, da dies auf den Appetit der Menschen spielen wird, weil dies Lebensmittelgeschäft ist. Als nächstes wird der Titel des Produkts, damit Sie herausfinden können, was es ist. Bewegen Sie sich entlang. Wir brauchen eine Art sozialer Beweise, eine Art Glaubwürdigkeit zu etablieren. Das ist die Aussicht. In diesem Fall sehen wir eine prozentuale Abstimmung und die Anzahl der Stimmen. Okay, das ist in Ordnung. Als nächstes wird der Preis und die Menge. Schließlich zwei Aufrufe zum Handeln. Insgesamt gibt es nur eine Sache, die extra in dieser Auflistung ist, die Anzahl der Kalorien, die enthalten ist, weil es Teil der Werte der Marke ist. Transparenz und fundierte Entscheidungen. Im Geschäft geht es nicht nur um Diäten und kalorienarm geht es darum, kluge Entscheidungen zu treffen und zu essen, oder? Also diese eine kleine Zeile macht tatsächlich viel in Bezug auf das Packen einer Nachricht in nur wenigen Zeichen. Ob die Nachricht effektiv zugestellt wird oder nicht. Das ist bis zu dem Rest der Inhalte, die im nächsten Jahr oder die FAQs unten. Aber insgesamt ist dies notwendig und es ist eine nette Note. Die Schlussfolgerung ist also, dass es kein Fett gibt, es gibt nichts Extra in dieser Auflistung. Wir hätten eine kurze Beschreibung hinzufügen können, aber das hätte das Angebot übersichtlicher und größer gemacht. Jeder Artikel ist schon ziemlich groß, also ist das nicht in Frage. Wir könnten die Zutaten für die einzelnen Geschmacksrichtungen zeigen, aber der Titel sagt Ihnen bereits die Highlights. Insgesamt ist das genau dort, wo es sein muss. Sie sehen das Produkt, Sie lesen darüber, Sie sehen, wie wahrscheinlich es von anderen Menschen ist, ist Preis, wie viel Menge Sie gehen, um zu bekommen. Das ist also genug, um weiterzumachen. Lassen Sie uns über diese Knöpfe sprechen. Warum zwei? Nun, das Warenkorb-Symbol ist ein Mittel, um schnell Produkte in Ihren Warenkorb zu legen, ohne sich hin und her zu bewegen. Dies würde Reibung erzeugen. Hier ist der Fluss ohne ihn. Wählen Sie ein Produkt, warten Sie, bis die Seite geladen ist. Dann zu Ihrer Karte hinzugefügt. Gehen Sie dann zurück zur Startseite, Sie zu einem bestimmten Tab, klicken Sie auf ein Produkt fügen Sie es Ihrem Warenkorb hinzu. Wenn man bedenkt, dass die Mindestbestellung für Jobs ist, ist das ein Ärger, das ist Reibung. Daher ist dies eine sehr kluge Wahl. Dieser kleine Knopf macht tatsächlich viel Sinn. Es stimmt, dass das Symbol nächste Woche ein Plus-Symbol haben sollte. Aber wir werden darüber sprechen, was an einem anderen Punkt in den Gerichten verbessert werden kann. Die orangefarbene Schaltfläche ist ein Aufruf zur Aktion, der „Details anzeigen“ besagt. Der Knopf ist ziemlich groß und es ist gefärbt Hammond, wenn spezifische Idee in den Kopf. Wenn es orange ist, können Sie darauf klicken. Wenn man über das Layout spricht, könnte man davon ausgehen, dass die blaue Schaltfläche in den Warenkorb größer sein sollte. Aber das ist zu aggressiv. Wir möchten, dass Menschen Einkäufe tätigen, aber wir sollten nicht davon ausgehen, dass die meisten Besucher diesen Button verwenden. Dies dient tatsächlich zur Bestimmung von Kunden, die die Produkte bereits kennen. Tatsache ist, dass die meisten Menschen wahrscheinlich mehr über die Produkte sehen wollen , bevor Sie einen Kauf tätigen. Unternehmen, während sie lieben wiederkehrende Kunden, sie müssen zuerst bekommen es die neuen Benutzer. Als solche, diese 80, 20 geteilte Ansicht Details Schrägstrich in den Warenkorb. Machen Sie Sinn. Lassen Sie uns eine kurze Pause machen und wir werden unsere Analyse fortsetzen. 58. E-commerce: Willkommen zurück. Lassen Sie uns auf ein Produkt klicken, damit wir sehen können, was was ist. Hier drückt der Benutzer Interesse an einem Produkt aus, so dass wir ihm zusätzliche Informationen erhalten mussten. Die Nummer eins für mich ist die Produktgalerie. Dies muss automatisch gedreht werden, um das Auge des Benutzers zu erregen. Es muss groß genug sein, damit es einen Einfluss hat. Also sollte dies das erste, was Setup sein. Als nächstes, offensichtlich ein großer Titel, der soziale Beweis und das Snippet von Informationen. Die Sache ist, manche wollen den kurzen Roman nicht lesen. Es ist Essen, es ist ein Dessert. Sicher, Sie möchten vielleicht mehr darüber wissen, aber drei Textzeilen sollten für einen bedeutenden Teil des Publikums ausreichen. Dann kommt Orange als Action-Farbe ins Spiel. Die Homepage hat gezeigt, dass Sie, wenn es orange ist, darauf klicken können. Nun, hier haben wir die Quantität Controller und fügen Sie den Warenkorb Button. Diese befinden sich am oberen Rand des Layouts, sodass Sie sie nicht verpassen können. Wenn wir uns auf die weißen Rechtecke konzentrieren, aus denen die Seite besteht, können wir sehen, dass es drei verschiedene gibt. Das ist kein Zufall. Dies ist die unterschwellige Übertragung der Idee, dass es verschiedene Bereiche mit unterschiedlichem Grad an Bedeutung. Dies ist volle Breite und es enthält orange, super-wichtig. Diese andere ziemlich breit mit einigen Registerkarten, mittlere Bedeutung. Schließlich gibt es eine schmale Säule, minimale Bedeutung. Etwas basierend auf dem Z-Muster, das besagt, dass der Benutzer die Seite nach den Interessenpunkten scannt, und er nimmt sie nicht wirklich von oben nach unten. Hier ist ein interessanter Artikel darüber. Die Idee ist, dass Sie schnell auf wichtige Teile des Designs schauen und die Art und Weise, wie sich Ihre Augen bewegen, macht den Buchstaben Z. Einige sagen, der Endpunkt sollte ein Call-to-Action-Knopf sein. Nun, wenn wir die Köpfe sicher in Betracht ziehen. Die Lieferungen, Logo, Login, registrierte Informationen über das Produkt durch die Galerie und Text. Endlich, dass zum Warenkorb Button. Aber wenn Sie das Z-Muster auf diese drei Spalten anwenden, wäre der letzte Punkt dieser schmale Informationsbereich , der überhaupt nicht wichtig ist. Deshalb habe ich gesagt, dass dies locker auf dem Z-Muster basiert. Lassen Sie uns über diese Registerkarten sprechen, um die erste enthält zusätzliche Informationen über ein Produkt für diejenigen, die wirklich tief in sie eintauchen wollen. Die zweite Registerkarte enthält alle ernährungsphysiologischen Informationen, die eine wichtige Komponente ist, die die Kelvin-Informationen von der Homepage widerspiegelt. Schließlich sind die Ansichten für einige soziale Beweis, das Layout ist bis etwa 75, 25 Prozent wegen der vollen Breite Block wäre peinlich. Wir hätten die Ernährungsinformationen auf der Seite unter den Ansichten darunter hinzufügen können, es ist wahr, aber wieder, das Tab-System misst die Homepage. Trotzdem ist es immer noch eine gute Alternative, um ein anderes Mal im Auge zu behalten. Auf dem Weg nach oben, die Semmelbrösel, gibt es die vollständigen SEO-Zwecke? Und das ist, was die Social-Media-Symbole, diese werden verwendet, um dieses Produkt auf Facebook, Twitter oder per E-Mail zu teilen . Diese Art von Aktionsbereich ist ziemlich datiert. Man würde denken, nicht viele Leute würden es benutzen, aber die Produkte ziehen ein älteres Publikum an, meist Frauen im Alter von 35 bis 45 Jahren. Daher scheinen diese Freigabebuttons angesichts der Zielgruppe nicht so lächerlich zu sein. Darüber hinaus balancieren sie aus Sicht des Designs diesen Bereich aus, der sonst 20 sein würde. Auch hier geht es darum, die Bedürfnisse des Kunden zu verstehen. die Zielgruppe sind diese Schaltflächen erforderlich. Die Zielgruppe würde diese Schaltflächen tatsächlich verwenden. Als nächstes, wenn Sie das Produkt zu Ihrer Karte hinzufügen, erhalten wir eine Benachrichtigung am unteren Rand des Bildschirms, die hauptsächlich für die mobilen Benutzer ist. Und ich habe eine ziemlich harte Entscheidung getroffen, diesen gelben Balken direkt unter den Heldenbereich aufzunehmen . So, um die aktuelle Karte anzuzeigen. Hier ist die Schaufel. Wenn ich es nicht hinzugefügt hätte, hätten wir ein Pop-up benötigt, das den Benutzer gefragt hätte , ob er weiter einkaufen möchte Gehen Sie zur Kasse. Dies würde die Benutzererfahrung fragmentieren. Es würde es in kleinere Stücke zerlegen. Denken Sie daran, dass es mindestens vier bis fünf Jobs sind. Ich weiß tatsächlich, dass die meisten Audits mindestens 10 Produkte enthalten. Diese Art von Pop-up wäre also ein bisschen frustrierend. Meine Herangehensweise ist ziemlich sicher. Der Warenkorb befindet sich noch oben rechts, nicht neben dem Hauptmenü, aber immer noch in einem Bereich, in dem der Benutzer erwartet, ihn zu finden. So erreichen, ist dies ein guter Kompromiss. Das ist es in Bezug auf diese Seite, lassen Sie uns zur Kasse gehen. 59. E-commerce: Willkommen wieder hier. Lassen Sie uns über den Checkout-Prozess sprechen. Wenn Sie nicht angemeldet sind, sollten Sie trotzdem die Produkte sehen können, die Sie Ihrem Einkaufswagen hinzugefügt haben. Hier ist die Bestellübersicht genau hier. Auf der linken Seite haben wir ein paar Worte über den Lieferprozess und einen großen Login-Schrägstrich registrieren die Schaltfläche. Das ist übrigens ein komplettes Redesign. Die alte Version funktionierte nach meinen Analysen nicht gut. Dies ist also die neue und verbesserte Version. Ich warte immer noch darauf, dass diese Aufgabe hereinkommt, aber nach ein paar Tagen scheint es, dass dies ein bisschen mehr Umsatz bringt. Beachten Sie hier etwas Wichtiges. Die Schaltfläche „Bestellung aufgeben“ wird angezeigt, ist aber nicht aktiv. Daher ist diese graue Farbe. Ich möchte diese Schaltfläche zeigen, damit der Benutzer weiß, wo er sich befindet. Ich zeige auch eine Nachricht darin, die besagt, Bitte füllen Sie alle Ihre Informationen aus. Eine andere Sache, die nicht angezeigt wird, sind die Versandkosten. Offensichtlich gibt es keine Lieferadresse, so dass Informationen nicht angezeigt werden sollten. Lassen Sie uns das Paik-Konto registrieren und wir werden sehen, was Wort ist. Zuerst traf ich die Entscheidung, zu nummerieren. Das sind die Schritte. Ich möchte, dass sie zu jeder Zeit gezeigt werden. Führen Sie den Benutzer durch den Prozess, indem Sie diese beiden anderen Teile inaktiv machen. Wir sehen, dass die Kontaktinformationen fehlen, d. h. der Name und die Telefonnummer. Wir haben hier einen großen Button, der Ihnen hilft, diese Informationen auszufüllen. Der wichtige Teil ist die Adresse, da die Versandkosten auf Basis Ihrer Stadt berechnet werden. Auch hier haben wir eine Schaltfläche, die einen Dialog öffnet , mit dem Sie eine Adresse hinzufügen können, ist nicht ideal, dass es einen Zwischenschritt gibt. Aber wieder, sie werden immer noch arbeiten, um auf der Website durchgeführt werden. Ich werde diese Informationen schnell mit zufälligen Dingen füllen, damit Sie sehen können, was was ist. Grundsätzlich, nachdem Sie Ihre Daten hinzugefügt haben, entsperren Sie Schritt 23. Die Versandmethode basiert auf Ihrer Stadt im ersten Schritt. Und wenn Ihr Daumen das Kapital Buch Festnahme, dann müssen Sie zu Liefermethoden, superschnelle Lieferung oder die Standard-ein. Diese haben unterschiedliche Preise basierend auf Ihrer Auswahl, die bestellt einige der Änderungen ist extrem wichtig. Die Zusammenfassung bleibt sichtbar, da hier die Gesamtkosten angezeigt werden. Daher sollte dieses Layout mit zwei Spalten dem Benutzer zusätzliche Transparenz bieten. Zuvor waren diese alle übereinander gestapelt, was bedeutete, dass der Benutzer ständig nach oben und unten scrollen musste. Das ist zusätzliche Reibung, die dazu führt, dass Menschen aufgeben. Also das ist wieder, die Bedürfnisse des Kunden zu verstehen. In Bezug auf die sehr schnelle Lieferung, das Unternehmen gibt dem Benutzer die Möglichkeit zu planen, dass bestellt, um zu einer bestimmten Stunde für diesen Kalender ankommen benötigt wurde. Dies zeigt Ihnen die verfügbaren Liefertermine für diesen grünen Kreis. Sobald Sie den Tag ausgewählt haben, erhalten Sie auch eine Dropdown-Liste, in der Sie eine Stunde auswählen können. Dieser Kalender ist auch ein Lebensretter, wenn es um Feiertage und verschiedene Fälle geht , in denen das Wetter es uns nicht erlaubt, Lieferungen zu machen, oder? Für den Fall, dass der Benutzer seine Stadt ändert, die liefern, die Methoden sind unterschiedlich. Sie erhalten nur eine Option und die Kosten sind auch viel höher. Auch hier ist dies auf der rechten Seite zu sehen. Der Preis steigt bis zu 30, was ein kritisches bisschen an Informationen ist. Dies war ein Schmerzpunkt in der Vergangenheit, da die höchsten Kosten standardmäßig angezeigt wurden. Selbst wenn Sie sich für eine superschnelle Lieferung qualifiziert haben, was viel billiger ist, zeigte das alte Design standardmäßig die höchsten Kosten. Das war ein Codierungsfehler, aber es hat immer noch viele Leute verärgert. Daher, warum dieses Redesign gemacht werden musste. Wie Sie sehen können, geht es bei der ganzen Sache darum, glücklich zu machen. Guiding kam mit einer feinen Note in Richtung des Endziels. Wenn diese anderen hier auf der Platzbestellung ständig angezeigt werden, um die Situation zu minimieren. Wenn er auf die Schaltfläche klickt und dann auf einen Pfeil, der angezeigt wird , garantiert eine Art von negativem Feedback. Bei der lauten. Wenn Sie eine Bestellung aufgeben, erwarten Sie eine Bestätigungsseite, eine Erfolgsmeldung jeglicher Art. Wenn Sie mit einem hinzugefügten ein Stirnrunzeln erfüllt werden, wird unweigerlich auf Ihrem Gesicht erscheinen. Wenn man bedenkt, dass Sie eine Mindestbestellmenge erfüllen müssen, wählen Sie eine Zahlungsmethode und so weiter. Dies würde bedeuten, dass ein Benutzer dreimal auf klicken und einen Fehler erhalten müsste. Das wäre eine frustrierende Erfahrung. Indem Sie einfach alle Änderungen sofort anzeigen, kann dies seine Erfahrung verbessern. Offensichtlich ist das Schlüsselwort hier vielleicht ein Glücksspiel. Er kann aufgeben, wenn er das ganze Rot sieht. Aber es ist etwas, worauf ich wette. Ich denke, das ist ein besserer Ansatz. Gehen wir jetzt zu dem Fall, in dem alle Bedingungen erfüllt sind. Die Schaltfläche wird orange, und jetzt können Sie eine Bestellung aufgeben. Diese Änderung des Knopfes von tollem Orange ist überaus wichtig. Mein Buch, ein Klick ist gerade im Kopf des Benutzers passiert. Er weiß jetzt, dass er frei ist, das Wort zu setzen, wann immer er sich danach fühlt. Es ist ein wichtiges Feedback, das dem Benutzer hilft, die Kontrolle zu behalten. Und er wird eher eine Bestellung aufgeben, indem er dieses visuelle Signal bekommt. Dies ist der Checkout-Prozess auf den Punkt gebracht, es geht darum, die Dinge so einfach wie möglich zu machen. Klarheit ist hier das Schlüsselwort. Erwarten Sie nicht, dass die Leute etwas tun, um einem Ansatz von oben nach unten zu folgen, alles zu lesen. Angenommen, der Benutzer hat praktisch keine Erfahrung im Online-Shopping. So einfach musst du diesen ganzen Prozess machen. Sogar das Feld Bestelldetails wird nun standardmäßig angezeigt. Zuvor mussten Sie auf eine Schaltfläche klicken und das hat das Popup mit diesem Feld aufgefordert. Der Plan ist, die Anzahl der unnötigen Klicks zu reduzieren, da dies mehr Umsatz bedeutet. Das meine ich damit, die Bedürfnisse des Kunden zu verstehen. Das ist E-Commerce. Auf dieser Seite geht es darum, Verkäufe zu machen. Ihre Aufgabe ist es nicht, schöne Lasten hinzuzufügen. Fichte es mit Illustrationen, auffälligen Farben, Schemata und so weiter. Nun, in erster Linie, müssen Sie sicherstellen, dass das Gesamterlebnis mühelos ist. Dass selbst eine 80-jährige Oma leicht auf die Breite gehen kann. Oder die Design-Entscheidungen müssen zu diesem Zweck getroffen werden, zum Verkauf. Sehen Sie sich beispielsweise dieses Optionsfeld an. Der aktive ist orange, der inaktive ist grau. Sehen Sie sich die Schaltfläche „Inaktive Bestellung aufgeben“ an, oder wie kann eine kleinere Textebene unterhalb der Lieferoptionen angezeigt werden? Dies ist wichtig, weil es dem Benutzer hilft , sich auf das zu konzentrieren, was kritisch ist und was schön zu wissen ist. Beachten Sie die einzelnen Rechtecke oder wie die Überschriften alle die All-Cap-Behandlung angewendet haben. Sehen Sie, wie sich das Grau aus diesem Feld von der Hintergrundfarbe unterscheidet. All diese Dinge sind winzige Details, die dem Benutzer helfen, einen Kauf zu tätigen. Sie beginnen mit dem Ziel des Website-Verkaufs und dann arbeiten Sie Ihren Weg zurück. Deshalb gibt es wenig bis gar keine Dekoration, vor allem auf der Homepage oder auf der Produktdetailseite. Die Fotos sind die live, die hell und bunt. Der Rest des Designs muss gedämpft werden. Es wird also kein Rufwettbewerb zwischen diesen Elementen werden. Die Schnittstelle sollte die Produkte glänzen lassen. Es sollte nicht um die Aufmerksamkeit konkurrieren. Als Suche gibt es keine verrückten Illustrationen oder alle Arten von Designdetails überall bestreut. Ich würde sie gerne hinzufügen, ja. Aber das ist erst, nachdem ich mich um die Grundlagen gekümmert habe. Das ist die Denkweise, die du übernehmen musst. Es geht um die Bedürfnisse des Kunden, die Unternehmen benötigen. Umsatz machen. Sie als Designer werden angeheuert, um ihnen zu helfen, das zu erreichen. Sie verwenden den Styleguide für die Marke. Sie drücken Ihre Kreativität aus. Aber es geht nicht darum, eine beeindruckende Website zu machen, geht es nicht darum, ein zentrales Stück zu haben Portfolio hinzuzufügen, ist darüber, wie gut die Website wird für sie setzen, sobald es live ist. Und wenn Analysen zeigen, dass es Raum für Verbesserungen gibt, müssen Sie sich die Zeit nehmen, um Änderungen vorzunehmen. Danke fürs Einstimmen. 60. Warum sind Websites nicht beachtliche Websites perfekt?: Hey, da, ich denke, einige meiner Schüler könnten einige Unvollkommenheiten auf meinen eigenen Websites sehen und denken, hmm, wenn verrückt, so ein guter Webdesigner, Warum sind seine Websites nicht zehn von zehn? Das ist eine legitime Frage. Aber es gilt nicht, nur meine Projekte. Mal sehen, was Websites zusammenbrechen lässt. Hier ist die Warenkorbseite. Wenn Sie nicht registriert sind. Beachten Sie, wie das Photon gerade herumschwebt. Klare Schnittfehler. Wenn Sie das Produkt besuchen, sehen Sie die vertikalen Linien. Machen Sie keinen Sinn. Das Logo ist Offset war die linke dito für den Inhalt von der ersten Registerkarte. Es ist nicht mit dem Logo ausgerichtet. Denken Sie an das Logo. Diese schmale Säule zeigt eine gigantische, was Sinn macht. Als nächstes haben wir hier eine andere Linienhöhe gegenüber hier. Die Lücke zwischen dem Wagen und dem Basisrechteck ist viel zu groß und die Probleme stapeln sich weiter. Warum passieren diese Dinger? Warum sind die Dinge links und rechts kaputt? Das Design, das ich Ihnen versichern kann, war pixelperfekt. Würden Sie erwarten, dass ich dieses Logo in Photoshop versetze oder eine andere Zeilenhöhe für zwei verschiedene Bereiche derselben Seite verwende? Natürlich nicht. Ich weiß es zu schätzen, dass Sie mir übrigens den Vorteil des Zweifels geben. Also, wenn meine PSD war pixel-perfekt, warum ist die Live-Version mit allen möglichen Problemen gefüllt, einfache Prioritäten. Mit anderen Worten, die Codierungsfirma hat keine tolle Arbeit geleistet. Und ich, als Designer und Geschäftsinhaber, entschied mich, diese Probleme zu ignorieren. Und ich habe das getan, weil das andere die dringenderen Themen Prioritäten wäre. Zum Beispiel haben Menschen ihre Karten wegen der Versandkosten aufgegeben. Wie ich bereits sagte, zeigte die Website die höchsten Kosten standardmäßig nur, wenn die Verwendung von hinzugefügt seine reale Adresse wurde der Preis aktualisiert. Aber bis dahin gaben 90% der Nutzer bereits auf. Das bedeutete Umsatzeinbußen. Das bedeutete Geld aus dem Fenster. Und Vergleich, diese vertikalen Linien blass im Vergleich. Niemand kümmert sich, ob der Raum zu groß ist und so weiter. Diese haben keine höhere Priorität, weil die Leute diese Befehle wegen ihnen nicht aufgeben. Das ist überall auf der Welt gleich. Dies ist nicht spezifisch für meine Website oder für die Codons, die ich angeheuert habe. Firmen links und rechts entscheiden sich dafür, bestimmte kleine Probleme zu ignorieren , weil es mehr oder Genangelegenheiten gibt. Wir haben ein Sprichwort in Rumänien, das in etwa bedeutet, dass das Haus in Brand ist. Die alte Dame kämmt ihr die Haare. Grundsätzlich, wenn das Unternehmen Geld verliert weil die Stadt Drop-down-funktioniert nicht richtig, und die Leute können ihre Bestellungen aufgeben. Niemand kümmert sich um die Zeilenhöhe. Einstellen. Es scheint lächerlich, wenn eine Bestellung aufgrund eines Fehlers unmöglich ist. Und das ist der Schlüssel hier. ganze Zeit taucht Bugs auf. Zum Beispiel habe ich mich entschieden, die Schriftfamilie in eine Serifenschrift zu ändern. diesem Grund war die Größe für dieses Snippet nicht mehr lebensfähig. Es war viel zu klein und es hatte eine schlechte Lesbarkeit. Der Coder passte die Größe an, aber dann war die Zeilenhöhe nicht richtig. Er korrigierte es basierend auf meinen Anweisungen, aber er wandte nicht den gleichen Wert auf jede andere Textebene an. Wie Sie sehen können, führt eine kleine Änderung zu einer Kaskade von Bearbeitungen. Und wie ich bereits sagte, eine Website ist ein lebendiges Ding, ein Werkzeug, das ständig kalibriert werden muss, um gut funktionieren zu können. Bearbeitungen sind unvermeidlich. Aber mit diesen Bearbeitungen kommen Fehler und Funktionsprobleme. Und ich Kind Sie nicht ändern die Farbe eines Knopfes machen brechen die Intel Website, das CSS kann nicht mehr richtig geladen werden. Das Layout kann drastisch geändert werden. Warenkorb funktioniert möglicherweise nicht. All dies wegen einer Farbänderung. Ja. Ich weiß, es klingt lächerlich. Aber diejenigen, die wissen, können es bestätigen. Mehrere Zweige, mehrere Personen, die an demselben Projekt arbeiten, nicht mit dem Staging-Server oder Sandbox-Modus, benennen Sie es. Es gibt viele Gründe, warum das von Zeit zu Zeit passiert. Es ist beschämend, dass es so ist, aber es passiert. Codierungsunternehmen geben ihr Bestes, aber sie priorisieren ihre Arbeit immer. Sehen Sie, zunächst ist sich jeder einig, dass die Funktionalität gelöst werden muss. Wenn Sie nicht physisch auf eine Last klicken können, um eine Bestellung aufzugeben, ist alles umsonst. Es gibt keine Diskussion darüber, was zuerst behoben werden muss. Aber dann können wir über die schwebende Fußzeile oder das übergroße Logo sprechen. Codierungsunternehmen hassen diese Art von Arbeit, weil es kein Geld darin und schlagen ihre Codons bevorzugen komplexe Projekte, die einen A12Z-Ansatz erfordern. Was sie bisher in Bezug auf Themen auf meiner Website aufgelistet, dauert ein paar Stunden ihrer Zeit, so wenig bis gar kein Geld für sie. Kodierungen hassen diese Art von Arbeit, weil sie das Gefühl haben, dass es unter ihnen ist. Ich spekuliere natürlich, es gibt andere Gründe, aber das ist abgesehen von dem Punkt. Aus diesen Gründen habe ich den Freiberufler angeheuert, um mir zu helfen, Sie auf dem Designer zu finden, einfach weil diese große Codierungsfirma alle Backend der Datenbank gemacht hat, all die Funktionalität mit der Ladung mich um 40 bis 50$ pro Stunde. Der Freiberufler bittet nur um den Bruchteil dieser Summe. Aber das wirft auch Probleme auf, weil sie die Hälfte zusammenarbeiten müssen , um den Quellcode auf GitHub zu pflegen. Sie müssen ihre Bearbeitungen beschriften und sie müssen sicherstellen, wenn sie die Änderungen festschreiben , dass sie die Website aus irgendeinem Grund nicht brechen. Es ist ein straffer Balanceakt. Unterricht ist keine Raketenwissenschaft, aber schlechte Kommunikation, verschiedene Stile, verschiedene Codierungsstile, verschiedene Zeitzonen und eine Reihe anderer Gründe führen zu Problemen. Es ist ein heikles Problem, weil die Programmierfirma den Freelancer nicht mag. Und der Freelancer will mehr Arbeit auf der Website nach seiner eigenen Erfahrung, Vision, ganz zu schweigen von seinem Bankkonto. Ich könnte weitermachen, aber lassen Sie es mich zusammenfassen. In ein paar Worten. Websites sind mit verschiedenen Designfehlern gefüllt weil Code-Unternehmen sich nicht um Pixel perfekte Designs kümmern, dann Programmierer nicht mögen diese Art von Arbeit ist nicht lukrativ für sie aus finanzieller Sicht. Und wenn Sie die seltsame Programmierfirma finden, die Kinder über diese Designprobleme, kosten sie einen Arm und ein Bein. Und der Kunde wird sich darüber nicht freuen. Und selbst wenn alles bei 1 perfekt ist, sagen wir, nachdem die Codierfirma die Projekte beendet und die sprichwörtlichen Schlüssel an den Kunden übergeben hat, sind Änderungen unvermeidlich. Wir haben darüber gesprochen, dass ein paar Vorträge vor, ist nicht, dass der Kunde seine Meinung nach dem Zufallsprinzip ändert, ist aufgrund von Analysen. Und wie ich schon sagte, Bearbeitungen bringen Bugs auf sich. Bugs müssen basierend auf der Wichtigkeit priorisiert werden. Kleine Designdetails bleiben immer zur Seite und der Zyklus geht weiter und weiter. Und deshalb sind die meisten Websites nicht pixelgenau, auch meine. 61. Landingpage: Hallo da und willkommen. Beginnen wir ein neues Kapitel, indem wir die Bedürfnisse des Kunden analysieren. Um verschiedene Objektive zu machen. Wir wissen, dass die meisten Unternehmen wollen, dass ihre Websites funktionieren, und deshalb müssen wir über Landing Pages sprechen. Wie Sie gerade sehen werden, sind dies ein völlig anderes Tier. Und Sie müssen verstehen, dass, wenn Sie Ihre Kunden glücklich machen wollen, Landing Pages haben ein bestimmtes Ziel, das mehrere Formen annehmen kann, aber die beiden beliebtesten erfassen die Informationen des Benutzers, in den meisten Fällen seine E-Mail Adresse. Dies wird oft als Lead-Generierung bezeichnet, oder der andere Zweig konzentriert sich darauf, den Kunden dazu zu bringen, einen Kauf zu tätigen. Nun, um die Unterschiede zwischen einer Standard-Website und der Zielseite besser zu verstehen , wir einen Blick auf Uber, das Transportunternehmen, das sich im Laufe der Jahre dramatisch entwickelt hat. Wenn wir dort, die Haupt-Website, sehen wir eine Menge Dinge. Geld verdienen als Fahrer, schreiben ein neues Brett, als Kunde, geben Essen an Ihre Tür geliefert, plus eine Reihe von anderen Dingen. Wir können die weltweite Präsenz oder ihr Engagement für Sicherheit erkunden. Wir haben verschiedene Dinge zu erforschen, um mehr über sie zu erfahren, ihre neuesten Nachrichten zu lesen und vieles mehr. Dies ist eine klassische Website. Basierend auf Ihren Interessen als Benutzer können Sie eine Allee auswählen und diese erkunden. Das Unternehmen muss all diese Informationen präsentieren weil es nicht weiß, was wir als Besucher suchen. Somit hat der Standardansatz ein allgemeines Layout mit mehreren Interessenpunkten. Sicher. Wir können sehen, dass die Anmeldung zum Fahren vorwärts gegen alle anderen Dinge geschoben wird. Aber du würdest es nicht das einzige Ziel dieser Seite nennen, richtig? Einkommen die Zielseite. Beachten Sie den Unterschied. Werden Sie ein Fahrer ist jetzt der Star der Seite. Jedes einzelne Element, jede einzelne Textebene, jede Schaltfläche geht darum, dass Sie ein Treiber werden. Nichts anderes, kein Lärm, nichts, was Sie von dem einzigen Ziel der Seite ablenken kann. In der Regel werden Landing Pages in Kombination mit einer Anzeigenkampagne verwendet. Möglicherweise sehen Sie Banner im Internet über das Fahren für Uber. Und wenn du darauf klickst, wirst du hierher gebracht. Die Idee ist, dass Sie, indem Sie auf eine Anzeige klicken, die Sie für sie werben, Ihr Interesse an diesem Ziel zum Ausdruck bringen. Das jetzt diese Dinge drastisch runter. Die Website weiß jetzt, mit welcher Art von Benutzer es zu tun hat. Eine solche Person auf eine allgemeine Website zu bringen, ist nicht ideal, weil sie durch all diese anderen Dinge verwirrt oder abgelenkt werden kann. Somit ist eine Landing Page in Ordnung. Denken Sie daran, dass das Unternehmen und der Webdesigner im Umgang mit einem Benutzer ein Erlebnis schaffen müssen. Wie als ausländische 80-jährige Großmutter, sollten Sie nichts davon ausgehen. Sie sollten nicht denken, oh, na ja, selbst auf der allgemeinen Website, es ist immer noch ziemlich einfach, die Anmeldung als Treiber der Last zu finden. Das ist kein produktiver Weg, sich dem modernen Webdesign zu nähern. Wie ich schon sagte, Sie müssen davon ausgehen, dass der Benutzer ein Supermodel ist und die Website ein Kerl ist, der auf sie trifft. Sie müssen einen fabelhaften Eindruck in zwei Sekunden flach machen. Wenn der erste Eindruck nicht richtig ist, dann ist das alles. Du hast diese Chance verloren. Du hast den Klienten verloren. Ist es wirklich so schwarz oder weiß? Eine Website im Leerlauf konvertiert, oder es nicht, natürlich, die lat Grad der Leistung. Aber Ihre Denkweise sollte auf diesem Ansatz beruhen. man auf die Zielseite zurückgeht, ist das Hauptziel, dass die Benutzer sich als Fahrer anmelden, in kleinere Bits aufgeteilt. Anschließend hat jeder Bereich das Ziel, den Benutzer in Richtung einer Entscheidung zu bewegen diese speziell für sie auszufüllen. Zu diesem Zweck gibt es eine Menge Dinge, die wir beobachten können. Beachten Sie zunächst, dass hier nicht viel Text vorhanden ist. Wir haben ein Drei-Spalten-Layout und jeder Abschnitt möchte bestimmte Punkte prägnant ansprechen. Diese werden USP genannt, Alleinstellungsmerkmale. Grundsätzlich wollen Benutzer den sehr kurzen Überblick, setzen Sie Ihren eigenen Zeitplan, verdienen Geld mit Ihren Fristen, und so weiter. Unternehmen verlassen sich auf diese Punkte, um Ergebnisse zu erzielen, denn die Wahrheit ist, niemand liest tatsächlich alles auf der Seite. Stattdessen müssen wir als Designer mehrere Abschnitte erstellen, die sich mit mehreren potenziellen Problemen oder Schmerzpunkten befassen. In diesem Teil ist die Nachricht verlockend, Geld verdienen, wenn Sie wollen. Das ist ein großer Haken. Diese drei Schlagzeilen fahren zu Hause. Das sind alles Dinge, die ich will. Der Wunsch wird gebildet. Ich schwinge mit diesen Dingen, die ich wollte, aber ich weiß nicht, was als Benutzer als nächstes kommt, ich bin gerade einstecken. Nun, hier ist der nächste Abschnitt „Erste Schritte“ , der perfekt für eine verstärkte Person ist, jemanden, der durch einen vorübergehenden Schub gefeuert wird. Das sagt mir genau, was ich tun muss. Und weißt du nicht, es sind nur drei einfache Schritte. Gehen Sie weiter. Hier ist noch eine da. Ja, speziell für meine Region, Rumänien. Dadurch fühle ich mich sicher im Schuh dieser Mahlzeit, habe ständige Unterstützung. Es beruhigt mich, dass ich in guten Händen bin, wunderschön gemacht. Dann haben wir einen Abschnitt über die dedizierte App, die für den Treiber entwickelt wurde. Dies festigt die Idee, dass die Dinge sehr einfach zu bedienen sind. Schließlich ein dringend benötigter FAQ-Abschnitt und der große Aufruf zum Handeln. Übrigens, im Allgemeinen sprechen wir über den CTA oder Aufruf zum Handeln und nicht eine Belastung, weil diese Aktion in verschiedenen Formen annehmen kann. Es kann ein Rufnummernfeld sein, ein Formular, das Schicht wie dieses annimmt, ein Symbol oder natürlich eine Belastung. Daher bevorzugen Webdesigner, den Begriff CTA aus diesem Grund zu verwenden. Insgesamt können wir die Differenz zwischen einer Landingpage und der Standard-Website anhand der Ziele zusammenfassen. Eine Landing Page hat ein einziges Ziel, und deshalb wird der gesamte Inhalt darauf aufgebaut, sie zu erfüllen. Eine Standardwebsite hat in der Regel einen breiteren Ansatz mit mehreren Abschnitten, die in verschiedene Richtungen zeigen. Zum Beispiel möchte ich auf meiner Haferflocken Website vielleicht Haferflocken verkaufen, sicher. Aber ich möchte auch meinen Blog, meinen Newsletter, ich Social Media, meine Kette von physischen Geschäften, die Einstellung Abschnitt der Website und so weiter zu fördern meinen Newsletter, ich Social Media, meine Kette von physischen Geschäften, . All diese Dinge, könnte ich tatsächlich mehr Verkäufe machen. Es ist also ein bisschen wie ein Kurvenball, ein indirekter Verkaufsansatz. Insgesamt ist eine Standard-Website ein Muss, weil sie viele Bedürfnisse erfüllt. Aber wenn Sie sich 100% auf eine bestimmte Sache konzentrieren möchten, dann verwenden Sie eine Zielseite. In diesem Abschnitt werde ich Ihnen viele Beispiele zeigen. Wir werden mehrere Fallstudien durchlaufen und Sie werden sehen, was es wert ist. Für jetzt. Machen wir eine kurze Pause. 62. Fallstudien: die Kundenbedürfnisse: Willkommen zurück. Ich möchte weiter erklären, was ich unter den Bedürfnissen des Kunden meine. Eine andere Möglichkeit, es zu betrachten, ist, über die Designs vibe nachzudenken, welche Botschaft es als Ganzes sendet. Wir beginnen mit Mr. Porter, einem der bekanntesten Luxusgeschäfte der Welt. Typisch für die High-End-Marken, sehen wir eine Fülle von weißen und minimalen Dekorationen. Starke Dosen von Schwarz hier und sie sind alle Kappen Behandlung ist auch ziemlich beliebt und ist in der Regel mit einer interessanten Serifenschrift gekoppelt. Das Design sieht zeitlos aus und diese Arten von Websites machen nicht viel überarbeitet im Laufe der Jahre. Wenn wir in eine Kategorie ziehen, sagen wir Kleidung, bekommen wir das Gleiche, minimale Dekoration. All das ist kein Zufall. Luxusmarken sind so konstruiert, wo Sie dann 20 Mal so viel für die gleiche Qualität bezahlen. Sie tun dies, indem sie bestimmte Gefühle mit ihrer Marke verknüpfen. Also hier ist die Schaufel. Die Leute, die $8 Tausend Lederjacken kaufen, sind an bestimmte Dinge gewöhnt. Die Wohnungen sind in der Regel modern, gefüllt mit weißem Marmor, hohen Decken und weitläufigen offenen Räumen. Ich bin ein großer Fan der Show namens Million Dollar Listing New York. Und ich habe jede ihrer 98 Episoden seit 2012 gesehen. Luxus bedeutet kein Unordnung, viel Weiß, viel Licht. Wenn es ein dekoratives Stück gibt, sagen wir ein Gemälde, ist es eines, das wirklich auffällt. Ich bin leidenschaftlich über Uhren, um die meisten Stücke rund zehn bis 20.000$ sind wirklich die einfache. Luxus kann in einem Bordstein zusammengefasst werden. Billige, zu niedrige End-Uhren sind in der Regel kompliziert und chaotisch. Je mehr Sie nach oben gehen, desto raffinierter ist das Aussehen und die 70 bis 100 K Komplexität kommt wieder in. Jetzt erzähle ich dir all diese Dinge. So können Sie darüber nachdenken, für wen diese Website ist. Es ist nicht für 99 Prozent der Öffentlichkeit, ist für diejenigen, die jedes Mal vier bis fünf Ziffern verbringen, wenn sie einkaufen. Wenn Sie also eine Website für dieses Publikum entwerfen, müssen Sie wissen, was sie schätzen wovon sie jeden Tag umgeben sind. So können Sie diese Dinge nachahmen und in Ihre Arbeit integrieren. Deshalb bekommen wir so viel Weiß und viel negativer Raum, was bedeutet, dass Raum, der nicht genutzt wird. So sehen die Abteilungen aus. Beachten Sie die kleine Überschrift und Unterüberschrift. Das liegt daran, dass die meisten Luxusmarken sehr kleine Etiketten haben. Sie schreien selten, wenn sie Lauren sagen. Und wenn Sie ein Stück sehen, das das Logo in einer großzügigen Größe aufweist, ist es in der Regel ein billiger Artikel. Indem Sie all diese Recherchen durchführen, können Sie auf diese Weise 10.000 Dollar und mehr für die einzelne Website berechnen. Auch wenn Sie nicht ein Viertel davon berechnen, müssen Sie sich immer noch bemühen, um den Kunden glücklich zu machen. Also lasst es uns ändern. Sie einen kurzen Blick auf diese Website. Für wen ist das da? Ist es für die gleiche Öffentlichkeit wie Mr. Porter? Offensichtlich nicht. Dies richtet sich eindeutig an Kinder und sehr junge Menschen. Was wissen sie zu schätzen? Helle Farben, große kühne Schlagzeilen von Dekorationen, große Knöpfe, die mit allen möglichen Effekten ein wenig geblendet sind. Jede einzelne Komponente hier richtet sich an Kinder und es ist sehr gut ausgeführt. Aber, ähm, ich muss das betonen. Dies ist nicht umso besser die Website als Mr. Porter. Dies ist, was Anfänger nicht merken, dass Sie Äpfel mit Sofas vergleichen. Diese sind nicht im selben Ballpark. Es gibt keinen Vergleich zu machen, weil die Bedürfnisse der Kunden sehr unterschiedlich sind. Sollten Sie von der Detailgenauigkeit in dieser Kinder-Website beeindruckt sein. Aber nochmal, das heißt nicht, dass es besser ist. Auf der Analyse wird Ihnen sagen, welches Design für diesen bestimmten Client besser funktioniert. Weiter zum nächsten Entwurf. Sicher, Dies ist aus der gleichen Nische, es, die das gleiche Publikum mehr oder weniger bekommt. Als solche können Sie diese beiden vergleichen. Sie können es aufteilen und jede Schaltfläche, jede Illustration und so weiter analysieren . Dies ist eine wichtige Notiz, also werde ich es nochmal sagen. Während wir offensichtlich auf all diese schönen Details in Illustrationen hingezogen sind, ist das Schlimmste, was wir tun können, diesen Ansatz in Mr. Portal-Projekt zu bringen . Dies wird Sie sicherlich in eine Menge Ärger bringen. Deshalb hörst du mich oft sagen, dass selbst fantastische Designs von Kunden abgelehnt werden. Normalerweise passiert das, wenn Sie sich nicht auf ihre Bedürfnisse konzentrieren. Stattdessen denken Sie an Ihr Portfolio. Sie konzentrieren sich auf das Experimentieren neuer Techniken, neue Looks. Das ist das Problem. Werfen wir einen Blick auf eine andere Website. Dieses Mal ist es etwas auf Russisch, aber auf eine Weise, die besser ist, weil wir uns auf diese Stimmung konzentrieren können. Grün ist eine sehr solide Wahl, weil es sich um Lebensmittel handelt. Sieht frisch aus. Mehr als das. Es ist gesundes Essen. Kunden erwarten diese Stimmung und sie resonieren damit. Sie werden mehr davon angezogen werden. Beachten Sie, dass sich der Rest des Versuchsplans um Weiß und Grau dreht. Dies sendet eine Nachricht, dass dies ein bisschen High-End ist. Auch hier bin ich tatsächlich ein Kunde von gesunden Nahrungsdrüsen, und diese sind ziemlich teuer. Als solche muss die Website zeigen, dass diese linearen Symbole, dieses winzige Hauptmenü, diese schönen Bilder von ein paar Zeilen Text begleitet. Diese sind alle rund um die Zielgruppe aufgebaut. Der Besitzer dieser Website möchte offensichtlich eine bestimmte Gruppe von Menschen anziehen. Sie als Designer müssen wissen, was Veganer, Vegetarier, Basketballradianten mögen, und diese Dinge in Ihr Design einbauen. Auch hier geht es nicht um Sie, um die Bedürfnisse Ihrer Kunden. Das letzte Beispiel ist eine App, aber es ist tatsächlich ein Dashboard-Design. Beachten Sie, wie schlank und sauber es ist. Das ist alles in Ordnung und gut. Aber der Schlüssel hier ist, etwas für den intensiven Gebrauch zu entwerfen. Sie als Designer müssen erkennen, dass die wahrscheinlichste KPI Key Performance Indicator ist wahrscheinlich die Zeit in der App verbracht. Andernfalls wird der Client dieser App mehr Geld verdienen, wenn Benutzer mehr Zeit damit verbringen. Wie kannst du das machen? Nun, wir werden eine Menge Dinge. Wir sprechen aus reiner Sicht des Designs. Es muss leicht für die Augen sein. Sie müssen die Belastung der Augen reduzieren, indem Sie schöne weiche Farben wählen. Farbspritzer müssen sorgfältig und in Maßen eingefügt werden. Dafür ist dies eine Lernlücke, was bedeutet, dass die Situation unvermeidlich sein wird , indem sie in einem Gefühl der Ruhe durch das Farbschema, negativen Raum und eine Reihe anderer Dinge backen . Du würdest dem Geschäft helfen, erfolgreich zu sein. Es ist eine Sache, Rebellen zu besuchen und zu erkennen, dass das Design schlank und sauber sein muss. Es ist eine andere Sache zu wissen, warum das der Fall ist. Das wird dich als Designer auffallen lassen. Dies wird Sie dazu bringen, Ihre Kunden Wertschätzung zu gewinnen indem Sie die zusätzliche Meile gehen und sich auf die Bedürfnisse des Kunden konzentrieren. Viel Glück damit. 63. Lead in Landingpages: Willkommen zurück. Ich wollte Ihnen eine schöne Landing Page zeigen, damit Sie besser verstehen können, was Zyban.com einen schönen ersten Eindruck macht. Es ist sauber, professionell, aber wunderschön in seiner Einfachheit. Wir haben viel davon zu lernen, sowohl vom Design als auch als Landing Page. Konzentrieren Sie sich in erster Linie auf die Schlagzeile. Dies ist der wichtigste USP, der Alleinstellungsmerkmal. Das ist es, was die Website oder den Service besonders macht. Das ist es, was sie auszeichnet. Ein besserer Weg, um Ihr kreatives Geschäft auszubauen. Für mich als Content-Creator bringt mich das zum Laufen, es fängt meine Aufmerksamkeit auf. Dies ist von größter Bedeutung für grundlegende Schritte, die in jeder Zielseite ein Muss ist. Durch die Auswahl einer wunderschönen Serifenschrift in einem interessanten Braunton gezeigt, die Designer-Manager, um die Kopie hervorzuheben. Und wenn dies in Bereichen gezeigt wurde, wäre der Einfluss offensichtlich minimal gewesen. Also gibt es das erste Takeaway. Großartiger Textstil entspricht wunderschön einem effektiven USP. Diese fantastische Schlagzeile. Wenn dieses Wort zu sagen, dass wir anders sind als besser, wäre das schrecklich gewesen. Oder wenn dies Zyban für Ihr Unternehmen oder sogar kreatives Geschäft sagen würde, wäre das nicht ideal, es würde flach fallen. Stattdessen hat der bessere Weg, um Ihr Unternehmen zu wachsen, eine Menge Bedeutung dahinter. Es impliziert, dass dies ein intelligenterer Ansatz ist. Es hallt bei mir als Geschäftsinhaber, dass diese Jungs eine bessere Lösung haben könnten, dass das, was ich bereits als die Kraft eines gut geschriebenen Exemplars in Kombination mit einem erfahrenen Designer benutze , der weiß, wie man es präsentieren kann. Denn wieder, das ist nicht schwarz, es ist nicht Liebe grau. Es ist ein schöner Braunton. Insgesamt ist die Idee, dass Sie nie die Hauptüberschrift in Ihrem Design überspringen sollten. Wenn Sie Lorem ipsum oder so etwas wie den besten Service verwenden möchten, wird Ihr Design viel leiden. Wenn der Kunde Ihnen keine großartigen Inhalte zur Verfügung stellt, die Sie entsprechend stylen können, machen Sie einige Recherchen und kommen Sie mit etwas auf eigene Faust. Nun, ich weiß, dass das etwas außerhalb des DOD-Bereichs ist, als Webdesigner. Und ich sagte, dass die Millionen Mal in diesem Kurs. Aber Sie können sich von verschiedenen Orten inspirieren lassen und etwas als Platzhalter verwenden. Dann hatte dein Mandant, du hattest eine witzige Schlagzeile, die tatsächlich von einem anderen Ort genommen wird. Und dass er selbst etwas einfallen muss. Aber wiederhole ich nicht, verpassen Sie diese Gelegenheit nicht. Verwenden Sie Lorem Ipsum nicht. Immer noch auf der Designseite. Beachten Sie, dass die Überschrift größer ist als die Unterüberschrift, aber nicht demütig ist. Das ist gut proportioniert. Das ist es, was du willst. Supersizing, würde es keinen Sinn ergeben. Sicher sieht es vielleicht nicht so schlimm aus. Aber der Zwei-Line-Ansatz ist angenehmer für das Auge. Sie zum Aspekt der Zielseite zurückkehren, beachten Sie die Anmeldung. Dies wird Lead-Generierung genannt. Und ich möchte erklären, warum viele Landing Pages für diesen Ansatz sind. Sie würden denken, Verkauf wäre das Hauptaugenmerk der Landingpages. Aber hier ist, was los ist. Vor langer Zeit, Unternehmen herausgefunden, dass, wenn der Benutzer verbringt ein wenig Zeit mit ihrem Service, Er ist wahrscheinlich süchtig. Durch Analytik. Viele Unternehmen haben einen Wendepunkt gefunden. Ich habe tatsächlich viel über das Thema gelesen, aber um das kurz zu halten, werde ich einige zufällige Beispiele herauswerfen. Aber nein, das ist sehr gut dokumentiert und ich werde einige Buchtitel zur Verfügung stellen , falls Sie wirklich tief in sie eintauchen wollen. Hier sind ein paar Beispiele. Wenn ein neuer Facebook-Nutzer acht Freunde zu seinem Netzwerk hinzufügt, wird er ein aktiver Benutzer werden. Das war wirklich am Anfang. Also heutzutage ist es wirklich nicht so viel anzuwenden. Aber das war ein kritischer Wendepunkt auf Spotify. Wenn du 10 Songs magst, wirst du höchstwahrscheinlich Premium-Mitglied auf Netflix werden. Wenn Sie eine kostenlose Testversion starten, sind Sie sehr wahrscheinlich, dass Sie diesen kostenpflichtigen Dienst weiterhin nutzen. Die Argumentation hinter all diesen Beispielen ist etwas komplex, wenn man wirklich tief in sie eintaucht. Aber es gibt ein paar logische Gründe, die leicht zu bekommen sind, wenn Sie sich für die Testversion anmelden. Jede Studie zu sprechen, Sie in der Regel in Ihrer Kreditkarte. Das ist hier nicht der Fall, aber in den meisten Situationen ist das erforderlich. Nach 30 Tagen vergessen Sie es, Sie werden aufgeladen. Und dann gibt es zwei Möglichkeiten. A, Sie wissen nicht, dass Sie in Rechnung gestellt werden, weil Sie es völlig vergessen haben und Sie haben kein Benachrichtigungssystem an Ort und Stelle mit Ihrer Bank. Das passiert mehr, als wir denken würden. Sogar ich habe für das Festnetz für etwa zwei Jahre bezahlt, bevor ich endlich tief in meine Rechnung gegraben und ich erkannte den Fehler. Das ist also die erste Möglichkeit. Sie vergessen einfach die monatlichen Zahlungen. Und b, die zweite Option, verwenden Sie tatsächlich den Dienst und Sie sehen seinen Wert. Dies ist der Grund, warum viele Ausleihseiten Sie nicht dazu bewegen, einen Kauf zu tätigen. Wenn mir diese Metapher erlaubt wird. Es ist ein bisschen wie Verabredungen. Während Sie vielleicht von Anfang an Sex mit dieser Person haben wollen, alles aggressiv auszugehen und das zu schreien, wird Ihnen keine großartigen Ergebnisse geben. Stattdessen gehen Sie raus, trinken Sie einen Drink, lernen Sie Punktpunkt-Bunsen kennen. Und dieser Ansatz ist viel wahrscheinlicher, Ihnen zu geben, was Sie wollen. Siehst du, das Endziel ist das gleiche, aber der Ansatz macht einen großen Unterschied. Aufgeben Ihrer E-Mail-Adresse scheint keine große Entscheidung zu sein. Es besteht kein Risiko, einen Drink mit jemandem an einem öffentlichen Ort zu bekommen. Das Gleiche. Es fühlt sich sicher an, wenn es dir nicht gefällt, steh einfach auf und gehe. Aber nachdem die Testversion gestartet wurde und Sie tatsächlich den Service erkundet haben, können Sie feststellen, dass dies genau das ist, wonach Sie gesucht haben, oder zumindest die Tatsache, dass der Service Ihnen einen gewissen Wert bietet, obwohl es kein perfektes Match. Insgesamt ist es der Grund, warum Landing Pages Sie nicht immer dazu bewegen, einen Kauf zu tätigen. Sie bevorzugen den weniger bedrohlichen Ansatz. Sie bevorzugen das etwas längere Spiel weil sie wissen, dass sie mehr Chancen haben, auf diese Weise erfolgreich zu sein. Eine noch einfachere Art, die Lead-Generierung zu betrachten, ist dies. Machen Sie den ersten Schritt, bringen Sie die Leute durch die Tür. Machen Sie sie einen Blick auf Ihre Speisekarte, lassen Sie sie Ihre Produkte schmecken. Jede Interaktion ist ein Gewinn. Jede Art von Engagement ist ein Erfolg. Zurück zur Designseite. Beachten Sie die Schaltfläche Erste Schritte, keine Abschrägung und Prägung, keine inneren Schatten, Schlagschatten, wissen Muster, Überlagerung, kein Farbverlauf, kein 3D-Look nichts. Das ist modernes Webdesign. All diese Details werden nicht benötigt. Die Gesamtwirkung dieses Ansatzes ist größer. Die Illustration bleibt zu glänzen, und dieser Farbtupfer ist genau das, was benötigt wird, um das Auge des Benutzers zu zeichnen. Es gibt absolut keine Chance, dass Sie diesen Knopf nicht sehen. Es ist so konzipiert, dass es unmöglich ist, es zu verpassen. die folgenden Bereiche von der Landing Page entlang bewegen, können Sie sich entscheiden. Die gehämmert in der Idee, dass der Service bietet Wert. Beachten Sie, wie mehr Umsatz schön unterstrichen ist, graue Sachen. Es gibt aber nicht viele Texte. Es ist alles kurz und süß. Dies ist, so dass Sie bequem durch sie abblättern. Wenn wir nach unten scrollen, bemerken Sie, wie der Kopf dieses behoben. Dies ist eine gängige Technik, der die Landingpage nicht mit vielen Aufrufen zur Aktion gefüllt werden kann. Stattdessen bleibt die Schaltfläche „Erste Schritte“ jederzeit sichtbar. Insgesamt ist dies eine schöne Landing Page, die alle Inhalte in eine einzige Richtung zeigt, so dass Sie Ihre E-Mail-Adresse eingeben, um die kostenlose Testversion zu starten. Eine Landing Page ist die perfekte Ergänzung, da sie Klarheit bietet. Wenn Sie sich die oberen Verkaufskanäle ansehen, werden Sie andere Dienste sehen, jeweils eine eigene eigene Seite haben. Dies eliminiert jegliches Geräusch. All diese anderen Dinge wären zu einer einzigen Standardwebseite zusammengefasst worden. Es wäre überladen, überfüllt gewesen , und die Konversionsrate wäre gesunken. Und das ist eine Tatsache, gut dokumentierte Tatsache. Insgesamt. Das ist exhibit.com, eine tolle Landingpage. Übrigens, es liegt in der Natur der Landingpages, sich ständig zu ändern. Wenn Sie diese Website besuchen und es ist nicht mehr die gleiche wie in diesem Video gezeigt. Sei nicht überrascht. Landing Pages ständig verändert es Aussehen, basierend auf Analysen und Schrägstrich oder die Werbekampagnen, die zusammen mit ihnen gehen. Machen wir eine kurze Pause und wir werden in einem Moment weitermachen. 64. Warum Landingpages einen schlechten Ruf haben: Hey, ich denke, es ist wichtig, dass ich den Elefanten im Zimmer anspreche. Landing Pages haben einen schlechten Ruf, vor allem bei Webdesignern. Das liegt daran, dass die folgenden Designs, die ich Ihnen zeigen werde, das sind, worüber die meisten Leute denken, wenn Sie hier Landing Page erwähnen, dieses für ein Webinar. Es gibt kein Logo, das ziemlich seltsam ist, und keine Navigation, was üblich ist. Eine riesige riesige Schlagzeile und das Foto dieses Gentleman unmittelbar darunter, wir haben den CTA. Das Design scheint unraffiniert mit diesen großen, überwältigenden Schlagzeilen und kräftigen Farben. sich etwas nach unten bewegen, ist dieses Formular genau das, was Sie neigen, Sie auf Landing Pages zu sehen. Torbelastung, schwarzer Text, viele Häkchen und eine auffällige Form. Das Design ist mit fett formatierten Ansprüchen gefüllt und Sie können 500 Pixel scrollen, ohne einen weiteren Aufruf zur Aktion zu sehen. Lassen Sie uns ein anderes Design dieses Mal für die Gewichtsverlust Ergänzung sehen. Beachten Sie das Fehlen einer traditionellen Struktur. Es gibt keinen Header oder den Heldenbereich. Stattdessen sieht das Design wie ein Flyer aus. Cta ist sehr sichtbar. Dieses Formular darf man nicht entgehen lassen. Dann Dad Sache ist überfüllt, extrem beschäftigt und wieder, unraffiniert. Beachten Sie das Produktfoto, es ist leer. Das ist aus einem Grund und wir werden es in einer Minute anfassen. Typisch für Landing Pages, erhalten wir eine Menge von Abzeichen, Geld-zurück-Garantie wie im Fernsehen gesehen und so weiter. Wieder, kühne Behauptungen wie neueste Durchbruch verbrennt Fett, alle natürlichen und so weiter. Der Körpertext ist riesig, rund, doppelt so groß wie eine Standard-Website. Alles ist überladen und zusammengebündelt, aber das Design ist extrem lang. Dies ist wiederum typisch für Landing Pages. Dies ist der Standard, bei dem eine reguläre Website mit etwa sechs bis 8 Tausend Pixeln stoppt. Landingpages können 20000 Pixel lang sein. Ja, ich weiß, das ist lächerlich, aber das ist das Spiel. CDs, attraktive Frauen, wieder, ein Grundnahrungsmittel von Landingpages. Wechseln wir zu einem anderen Design. Dies sind alle Entwürfe von 99 designs.com und diese sind sehr neu. Das sind Daumen 2020. Dies ist eine Ergänzung, die Ihr Verdauungssystem helfen wird. Entschuldigen Sie die geringe Qualität, aber 99 Designs beschränken die Größe eines Designs. Deshalb laden einige Designer diese kleinere Version dieser Arbeit hoch. Deshalb können wir nicht alle schönen Details sehen. Hier haben wir eine Menge von Texten, helle Häkchen, und die sehr lange Seite Lager für diese Ärzte sind ein Muss. Preiszurrung ist auch ziemlich häufig in Landing Pages. Ich würde sagen, etwa 70 Prozent von ihnen hatten eine Art von massiven Rabatten. Dieses Design funktioniert auf die gleiche Weise wie Zoovögel Landing Page. Es zeigt das Produkt. Dann stellt es die Krankheit dar. Wie Sie tatsächlich darunter leiden können und wie es am besten ist, es so schnell wie möglich zu behandeln. Die Gefahren dieser Krankheit ist ein wichtiger Anreiz. In Uber diesen Fall wollten wir mehr Geld und einen flexiblen Zeitplan. Das war der Haken. Das ist Schatz, das ist ein Vergnügen. Eine von zwei Möglichkeiten zu verkaufen. Hier sehen wir Schmerzen Schrägschlag Angst. Die zweite Art des Verkaufs. Von dem, was ich gelesen habe, scheint es gut motiviert durch zwei Dinge, wie ich sagte, eine, Freude und Vermeidung von Schmerzen. Uber Banken offensichtlich auf Vergnügen und die Landingpage. Nahrungsergänzungsmittel gehen in der Regel für die Vermeidung von Schmerzen und das wird durch Angst Sie getan. Die vier Gefahren der Divertikulitis. Nachdem das Problem dargestellt ist, wird uns die äußerst tolerant eine Lösung gezeigt. Dann soll es genau wie ein Uber diesen Fall funktioniert. Wir werden gehypt. Wir sind bereit, Maßnahmen zu ergreifen, aber wir sind uns nicht sicher, was als nächstes kommt. Dasselbe hier. Wir haben Angst, die Krankheit zu vermeiden. Was kommt als Nächstes? Nun, hier ist die Lösung und hier ist, wie man sie kauft. Es funktioniert in vier einfachen Schritten. Nun, um Ihren Geist zu erleichtern, werden die Zutaten präsentiert. Niemand liest diesen Abschnitt, aber es ist beruhigend zu beachten, dass die Wissenschaft präsentiert. Hier ist die Schlagzeile, alle natürlichen und Nebenwirkungen kostenlos. Das ist alles, was zählt. Und wenn man weiter unten geht, sind Erfolgsgeschichten ein Muss. Ich würde sagen, mindestens 80 Prozent der Landing Pages verfügen über großzügige Testimonial Abschnitt. Springen am Ende. Wir können Schmerzen vermeiden, indem wir einen schnellen Kauf tätigen. Hier ist es fast immer der Fall, dass Sie, wenn Sie mehr kaufen, ein viel besseres Angebot bekommen. So etwas wie Sie zahlen 20 bis 30 Prozent mehr und Sie erhalten 100% mehr Produkt. Wieder, das ist typisch. Jetzt zeige ich Ihnen weiterhin einige andere Landing Pages im Hintergrund. Aber hier ist, warum sie so einen schlechten Ruf haben. Ich spreche nicht über diese, insbesondere erinnern Sie und sprechen über Landing Pages im Allgemeinen, neigen sie dazu, gimmicky Produkte zu fördern. Ob es sich um Gewichtsverlust, Art von Sexgerät, eine Rechnung, die Ihren Sexualtrieb und die Kühnende erhöht, wächst oder erweitert einen Teil Ihres Körpers, pflegende Waren verkauft, Kristalle in was auch immer. Die meisten dieser Produkte haben ein Fragezeichen neben ihnen. Für einige Leute sind diese Produkte Betrug direkt aus. Jetzt kann ich sagen, ob diese mutigen Behauptungen wahr sind oder nicht. Aber nein, das ist der Grund, warum Landingpages einen schlechten Ruf haben. Für jede schöne Landing Page für ein Nickerchen, ihre Firma oder ernsthafte Geschäfte. Es gibt mindestens zehn andere Landing Pages für einige New Age Behandlung, Rechnungen, Kräuter, Kristalle, und was nicht für den Mord, auch wenn die Landing Pages Förderung einer Sitzung von Arten. Es ist in der Regel für das Pyramidenschema der flachen Erde Konvention. Ätherische Öle oder Multi-Level-Marketing. Durch schiere Zahlen überwiegen diese weit die seriösen und gut gestalteten Landingpages. Das ist also der erste Grund und es macht Sinn. Der zweite Grund ist mehr in unserer Liga, die meisten Landing Pages schien, als wären sie im Jahr 2005 entworfen worden. Sie sehen bestenfalls bescheiden aus. Nun, es gibt Ausnahmen, ich würde sagen, etwa 60 bis 70 Prozent der Zielseiten, die Gimmicky Produkte fördern, sehen schrecklich, absolut schrecklich, überfüllt, schreien, aggressiv aus. Das sind die Schlüsselwörter. Vielleicht möchten Sie Ihre Ärmel hochkrempeln und einen besseren Job mit Ihrem nächsten Kunden machen. Aber Sie werden überrascht sein. Das ist der Look, den Kunden wollen. Deshalb habe ich diese Diskussion in die zweite Säule des Webdesigns aufgenommen und die Bedürfnisse des Kunden verstanden. Sehen Sie, dass diese Produkte eine sehr klare Zielgruppe haben. Ich will wirklich niemanden beleidigen. Ein Dankeschön. Beachten Sie, dass dies ein bestimmter Teil der Öffentlichkeit ist, der nicht so gut informierte, leichtgläubige, naive Menschen vielleicht über ein bestimmtes Alter mit weniger als ideales kritisches Denken hinausgeht. In Anbetracht dieses Publikums scheinen sie mit großen kühnen Behauptungen, mit riesigen Schlagzeilen, vielen Aufrufen zum Handeln, vielen Texten und all den anderen Dingen, die ich vor ein paar Sekunden erwähnt habe, zu schwingen mit riesigen Schlagzeilen, vielen Aufrufen zum Handeln, . Deshalb wollen unsere Kunden diese Designs, weil die Zielgruppe wirklich mit ihnen in Resonanz kommt. Darüber hinaus gibt es eine Kunst auf diesen Landing Pages so viel, dass das Produkt keine Rolle spielt. Das werde ich nochmal sagen. Diese Landing Pages funktionieren so gut, dass das Produkt keine Rolle spielt. Es ist alles Mathematik. Ich bin sicher, Sie haben von etwas gehört, dem Verkaufstrichter. Ich werde nicht auf Details eingehen, weil es außerhalb des Geltungsbereichs dieses Kurses liegen würde. Aber wissen Sie, dass erfahrene Menschen in diesem Bereich eine bestimmte Summe Geld in Facebook-Anzeigen. Eine bestimmte Art von Benutzer kommt in diese Zielseite, und offensichtlich von einer Gruppe von Menschen kauft ein bestimmter Prozentsatz das Produkt, was auch immer es ist. Die Quintessenz ist schwarz, solange Sie es richtig machen. Wie Sie sehen können, dichte, klare Schritte, es ist eine sehr solide Blaupause, die die Zielseite folgen muss. Am Ende verrechnet der Conversion-Rate die Werbekosten. Und in der Regel, wenn gut gemacht, macht der Besitzer der Website ein Bündel. Offensichtlich ist es immer noch schwierig, als es noch eine Fähigkeit erfordert. Aber diese Hektik funktioniert wirklich, und deshalb ist das Gewichtsverlust Produkt leer gelassen. Es kann alles sein, es kann jede Zutat sein. Die Marke spielt keine Rolle, die Effektivität spielt keine Rolle. Es geht darum, wie gut die Landing Pages gebaut und das Design ist nicht etwas, das Sie und ich werden zu schätzen wissen. Das liegt daran, dass wir nicht die Zielgruppe sind. Das Rückgrat der Zielseite ist auf diesen klaren Schritten vom Trichter aus aufgebaut. Und das ist alles, was zählt. Mit anständigem Urheberrecht können Sie schnell reich werden. Und das ist seit vielen Jahren der Fall. Selbst in der heutigen digitalen Welt, in der jeder Zugang zu unbegrenzten Informationen hat, Landingpages dieser Art immer noch gut. Auch hier, um ganz klar zu sein, sage ich nicht, dass alle Landingpages auf Betrügereien basieren. Weit davon entfernt. Einfach anzusprechen, warum sie einen schlechten Ruf haben. Um zusammenzufassen, ist der Hauptgrund, warum Landing Pages unschmackhaft sind , dass sie dazu neigen, kimmicky Produkte zu fördern. Und der zweite Grund ist, dass sie ziemlich schlecht aussehen. Und als solche können wir nicht wirklich als Designer wachsen, um sie zu tun. Die helle Seite ist, dass diese Kunden als gut zu bezahlen, vor allem Kunden, die frühere Erfahrung in diesem Bereich haben. Sie können erwarten, dass eine einzelne Landing Page Ihre Runde $2500 bringen. Es liegt an Ihnen, ob Sie sich auf diesen Bereich spezialisieren möchten oder nicht. Es ist eine Fähigkeit und es ist wirklich schwer verdient. Aber jetzt haben Sie alle Informationen, um eine Entscheidung zu treffen. 65. Digitale Produktlandschaft: Willkommen zu diesem Vortrag, wo ich eine Zielseite für digitale Produkte aufschlüsseln möchte. Dies ist meine eigene E-Learning-Plattform, die ich für meinen rumänischen Photoshop-Kurs entwickelt habe. Dies ist eine gute Möglichkeit, die Bedürfnisse des Kunden zu verstehen, weil ich der Kunde bin. Es ist so einfach, auf dem falschen Fuß anzufangen. Deshalb müssen wir über die Bedürfnisse des Kunden sprechen. Das Wesentliche dabei ist, dass, während auf verschiedenen E-Learning-Plattformen auf der ganzen Welt, in Rumänien, niemand weiß, wer ich bin. Das bedeutet, dass der Kursinhalt weniger wichtig ist. Ich stelle mich richtig vor. Aus diesem Grund ist ein Videoplayer inorder. Nicht nur, dass dieser Sender große Menge an Informationen in einer effektiven Weise, aber die Menschen bekommen, um mein Gesicht zu sehen. Das ist unerlässlich, um Vertrauen zu schaffen. Es gibt die Argumentation hinter dem Spieler. Die Überschrift und die Unterüberschrift sind ebenfalls ein Muss. Während meine Copywriting-Fähigkeiten sind nicht erstaunlich, was Sie hier sehen werden, ist eine Google übersetzte Version. Also bitte bedenken Sie das. Die ursprüngliche Website ist offensichtlich auf Rumänisch, weil dies für das rumänische Publikum ist. Als nächstes haben wir einen weiteren kritischen Teil in Bezug auf die Bedürfnisse des Kunden. Als Content-Creator, wenn Sie Google meinen Namen, werden Sie sicherlich finden, mein Gericht sagt auf verschiedenen anderen Plattformen, einige von ihnen sind stark diskontiert. Dies stellt eine ernsthafte Herausforderung dar. Wie kann ich meine Akkorde für jeden Preis verkaufen, sagen wir 299, wenn es auf einer anderen Plattform für 2999 gefunden wird. Die Lösung ist dieser Call-to-Action-Bereich. Wir haben individuelle Buttons, eine für den Standard-Englischkurs und eine andere für den Premium-Rumänischkurs. Ich bin sehr stolz auf diese Lösung. Zuvor habe ich viel Geld für Werbung ausgegeben, aber kleine Signale werden in den Raum kommen. Nachdem ich alle Analysen überprüft hatte, fand ich heraus, dass die Leute auf Google nach meinem Namen gesucht haben. Sie fanden meine Profile auf verschiedenen anderen Designplattformen, und sie bleiben dort. Grundsätzlich statt die Anrufe von meiner Plattform zu kaufen, wo ich das ganze Geld bekomme, kauften die Leute es von einem anderen Ort, normalerweise mit einem großen Rabatt. Nun, diese Lasten allein würden nicht ausreichen. Schließlich ist der Preisunterschied beträchtlich. Ich bitte um so etwas wie fünfmal so viel Geld für die rumänische Version des Kurses. Ich frage übrigens um $80 für die Gerichte, nur damit Sie eine Nummer des Ballparks haben. Wie kann ich das nun auf effektive Weise rechtfertigen? Denn immer noch ist der Preisunterschied signifikant. Nun, ich habe diesen Teil hier hinzugefügt, der besagt, was ist der Unterschied? Wenn Sie darauf klicken, gehen Sie nach unten zu dieser Vergleichstabelle, die ich von Grund auf neu entworfen habe. Hier sehen Sie, was ist was auf eine sehr klare Art und Weise. Darüber hinaus haben Sie ein paar Textzeilen. Erläutern Sie weiter, warum es viel besser ist, diese Version des Kurses zu kaufen. Im Grunde, kurz gesagt, haben Sie direkten Zugriff auf mich, während auf anderen Plattformen, das ist nicht der Fall. Das sind natürlich auch andere Vorteile, aber das ist außer dem Sinn dieser Vorlesung. Um zusammenzufassen, ist die Nummer eins, mich vorzustellen, nicht den Kurs. Die zweite Sache ist, sicherzustellen, dass die Leute den Wert von dieser Plattform im Vergleich zu allen anderen verstehen . Nun, was den ersten Teil der Vorstellung betrifft, sind Abzeichen eine großartige Möglichkeit, viele Informationen auf ästhetisch ansprechende Weise zu vermitteln . Dies sind alle Symbole von lab icon.com. Ich habe ein Abonnement tot und ich benutze es die ganze Zeit. Aus diesem Abschnitt auf einen Blick erfahren Sie, dass ich ein zertifizierter Photoshop-Experte und -Dozent bin. Ich bin eine meistverkaufte Lehrerin mit über 180 Tausend Schülern aus der ganzen Welt. Ich habe über $50.000 bis vier Laden und so weiter. Dies ist eine clevere Design-Wahl. Diese Abzeichen haben mir enorm geholfen. Der Inhalt auf der linken Seite, na ja, es ist ziemlich viel. Sie ist in mehrere Absätze unterteilt. Diese Aufzählungspunkte sagen dem Benutzer, was er zu diesem Kurs lernen wird. Es ist eine lange Liste, um zu implizieren, dass es eine Menge Inhalt gibt. Nach dem alles, was ich mit einem klaren Aufruf zum Handeln, der sagt, starten Sie den Kurs, nicht jetzt, nicht einen Kauf machen. Der beste Weg, Calls to Action zu gestalten, ist , einen Blick auf die größten Akteure auf dem Markt zu werfen. Wieder, die Bedürfnisse des Kunden zu verstehen. Verwenden Sie ihren Ansatz, verwendet die großen Spieler Ansatz. Niemand besitzt diese Dinge wie Einstieg, also gibt es kein Problem, sie zu Ihren eigenen Designs hinzuzufügen. Beachten Sie den Sekundärkurs, die englische Version wird hier nicht angezeigt. Ich bevorzuge die rumänische Version, die von dieser Plattform. Grundsätzlich, wenn Sie auf diese andere klicken, werden Sie zu einer anderen Plattform weitergeleitet. Ich will nicht, dass das passiert, aber wenn meine Besucher unweigerlich auf einer anderen Seite landen, sollte ich zumindest derjenige sein, der sie an den weltweiten Empfehlungslink sendet. Das ist der Denkprozess hinter diesen Knöpfen. Als nächstes etwas offensichtlicheres. Ich habe einen Galeriebereich für diejenigen, die visuelle Menschen sind. Dies wird sehr benötigt, weil es all diesen Text von oben versetzt. Grundsätzlich möchten Sie für jeden, für diejenigen, die ein Video sehen wollen, für diejenigen, die es vorziehen, zu lesen. Und schließlich diejenigen, die es vorziehen, durch den Inhalt zu überspringen und zu stoppen, was auch immer sie ins Auge fällt, visuelle Menschen, richtig? Der nächste Bereich basiert auf der Zementierung der Notwendigkeit für diesen Kurs. Ich markiere bestimmte Schlüsselwörter, da dies eine übliche Landingpage-Technik ist. Dinge wie deinen eigenen Rhythmus, gut bezahlt. Sie können Ihre Projekte unbegrenzten Zugriff wählen, jede Photoshop-Version, kein Talent oder Kreativität erforderlich, und so weiter. Diese sind etwas in der gleichen Region I Zoo Vögel Honig Ansatz mit flexiblen Zeitplan und verdienen mehr Geld. Ich werde es sein, ich bin nicht so prägnant wie sie sind, vor allem weil ich diese Markenbekanntheit nicht habe. Aus diesem Grund muss ich härter arbeiten. Nach der Vergleichstabelle habe ich ein bisschen mehr Inhalte, die die Werbeagentur für mich geschrieben hat. Ehrlich gesagt, ich bin mir nicht sicher, aber ich habe es in einem anderen Aufruf zum Handeln ziemlich Standard gehalten. Und dann ein Abschnitt über einige Premium-Ressourcen , die als Bonus für diejenigen verschenkt werden, die sich anmelden. Dies ist ein Anreiz, den Kurs zu kaufen. Es ist keine große Sache, aber es hilft. Ein weiterer wichtiger Teil ist das Diplom, das Zertifikat, das Sie am Ende des Kurses erhalten. Manche Leute, das ist ein Muss. Daher, warum es enthalten ist. Am Ende habe ich eine soziale Gruppe von einigen meiner Studenten. Testimonials sind in den meisten Landing Pages riesig, und dieses hier ist nicht anders. Schließlich einige andere wichtige Statistiken zu den y cons vorgestellt, ein FAQ-Abschnitt, der Blog-Abschnitt, falls Sie mehr über mich lesen möchten. Und der nickte Aufruf zum Handeln. Dies ist meine Zielseite durch einen Drag & Drop Builder namens Seite Bäckerei erstellt, die in einem Team, das ich von Teamwald gekauft, ein WordPress-Theme enthalten war. Dies wurde stark von einem erfahrenen Programmierer bearbeitet und ich war so glücklich mit seiner Arbeit, dass ich seinen Namen und Link hier einfügte. Es hat viel Zeit gedauert. Das war eine große Anstrengung meinerseits. Und selbst mit sich selbst sind das immer noch verschiedene Dinge, die meinem Standard entsprechen. Zum Beispiel diese vertikalen Linien mit einem Pixel. Aber das WordPress-Team hatte bestimmte Einschränkungen, die schwer zu überwinden waren. Wie auch immer, am Ende ist der Takeaway, dass der Kursinhalt den zweiten Platz nimmt. Das Ziel der Seiten, das Vertrauen der Benutzer zu gewinnen. Ich habe dieses Video oben oder die Abzeichen aus dem Subheader-Abschnitt gemacht. Als nächstes, um zu verhindern, dass meine Benutzer meine Angebote von einer anderen Plattform kaufen, die Kannibalisierung genannt wird. Übrigens habe ich zwei Aufrufe zur Aktion und die Vergleichstabelle aufgenommen. Ich habe zwischen TextContent und Bildern gewechselt. Ich habe bestimmte Schlüsselwörter mit der Honig-Methode hervorgehoben. Ich gab einen Anreiz, den Kurs zu kaufen und einige soziale Beweise zu präsentieren. Diese Landing Page hat ziemlich gut funktioniert und durch ständige Verfeinerung, ich bin sicher, dass es besser wird. Apropos Verbesserung. Das ist ein weiterer wichtiger Teil der Landingpages. Lassen Sie uns in einer Sekunde darüber reden. 66. A/B Tester, die Landingpages ausprobieren: Willkommen zu einem wichtigen Vortrag. Destin, du bist ein paar Mal die Arbeit sauer und ich sage es nochmal. Eine Website muss sich ständig weiterentwickeln. Du hattest nie mit deiner Arbeit fertig. Und ich spreche sowohl als Geschäftsinhaber als auch als Webdesigner. Um wirklich zu verstehen, wovon ich spreche, werden wir eine Website benutzen, die gute UI.org genannt wird. Ich habe keine Zugehörigkeit war übrigens mit ihnen, tatsächlich hat ein Student von mir diesen Link auf meinem Discord Server gepostet, wo Sie übrigens mehr als willkommen sind, beitreten. Lassen Sie uns also über das Testen sprechen. Möglicherweise haben Sie von AB-Tests gehört. Nun, hier ist es in einer sehr einfachen Situation. Netflix möchte mehr Leute dazu bringen, sich für die Testversion anzumelden. Macht Sinn, das zu erreichen. Sie haben verschiedene Dinge ausprobiert, aber in diesem speziellen Fall benutzten sie eine Last als Aufruf zum Handeln und seien ein E-Mail-basiertes Formular. Der Rest des Designs ist identisch, bis auf diese kleine kleine Änderung. Sie können am Ende des Entwurfs sehen, um die PV der Prüfung hinzuzufügen, speziell von Dezember bis Februar. Es scheint, dass die Form eine bessere Wahl ist. Nun, das mag nicht wie eine große Sache erscheinen, aber das ist ein riesiger Fund mit schwerwiegenden Auswirkungen. Wenn Netflix sah, bekommt dies bessere Ergebnisse. Es besteht eine gute Chance, die auch für unsere Websites gelten kann. Wenn das mehr Leute dazu bringt, den Prozess zu starten, bedeutet das, dass es gut für das Geschäft ist. Es bedeutet, dass die Besitzer der Website, dass wir glücklicher sein werden, sogar eine 23-prozentige Verbesserung ist signifikant. Aber stellen Sie sich vor, wenn der Anstieg bei 10 Prozent liegt, all das von einer sehr einfachen Änderung, sind die Kosten für die Änderung minimal. Das Entwicklungsteam kann diesen Wechsel ganz einfach in kürzester Zeit vornehmen. Das ist es, was Unternehmen lieben. Verbesserungen, die billig und einfach zu implementieren sind, dass sie ihr Ergebnis verbessern, Geld, das ist alles, was zählt. Dies ist der Hauptgrund für AB-Tests. Dies allein kann Netflix ein paar zusätzliche Millionen Dollar pro Jahr bringen. Und wieder, Sie können daraus lernen und die Leistung der Websites Ihrer Kunden verbessern. Aber lassen Sie uns ein bisschen zurück. Sie als Webdesigner sollten sie nicht persönlich AB-Tests durchführen, es sei denn, es ist Ihr eigenes Geschäft. Ein AB-Test ist eine ernste Sache, und die meisten Unternehmen haben engagierte Inhouse-Teams, die sich rund um die Uhr auf dieses Zeug konzentrieren. Das liegt daran, dass es nicht so einfach ist, wie ein Paar Socken zu wechseln. Es gibt strenge Regeln und Rigger. Du brauchst bestimmte Fähigkeiten und Kenntnisse. Sie müssen Ihre Bemühungen mit dem Entwicklungsteam abstimmen, das die Änderungen umsetzen muss. Sie müssen mit den Marketingabteilungen sprechen, damit sie ihre Anzeigen anpassen können. Sie benötigen eine Steuerungsversion, einen ausreichend großen Stichprobenumfang und eine Menge anderer Dinge. Es ist ein riesiges Geschlecht, wohin lässt uns das? Nun, es ist eigentlich ganz einfach. Wir sollten den großen Jungs folgen. Was sie tun, sollten wir nachahmen. Das hört sich nach einer schattigen Sache an. In einer idealen Welt hätte jedes Unternehmen ein engagiertes Team. Das würde AB-Tests rund um die Uhr durchführen. Tatsache ist, dass das extrem teuer ist, sowohl in Bezug auf das Personal, aber auch für den Service selbst. Bereitstellung mehrerer Versionen derselben Website erfolgt in der Regel über einen Drittanbieterdienst. Die sind sehr teuer. Sie haben Google Optimize, das ist kostenlos. Aber insgesamt steht der Punkt, es ist nicht machbar. Also, was Sie tun, ist, dass Sie nach Mustern suchen. Wenn Sie mehrere Beispiele sehen, in denen das Formular die Anzahl der Konvertierungen erhöht, implementieren Sie dies auf jeden Fall in Ihre eigenen Designs. Problem ist, dass diese Art von Informationen geheim gehalten wird. Die Argumentation ist einfach. Diese können ein Online-Geschäft drastisch verändern. diesem Grund werden Sie wahrscheinlich nicht viele Fallstudien kostenlos finden. Selbst gute UI-Gebühren, ernstes Geld für die gesamte Wissensdatenbank. Das Takeaway ist, dass, wenn Sie etwas sehen, das immer wieder getestet wird, den Gewinner in all Ihren Designs verwenden. Zum Beispiel scheint die Preistabelle in den meisten Situationen ein sehr klarer Gewinner zu sein. Das ist die Art von Sache, von der ich sicherlich eine mentale Notiz machen werde, und ich werde mich von diesem anderen fernhalten. Also wieder, dies ist eine sehr einfache Sache, die einen großen Unterschied machen kann oder einen Blick auf diese Strich-Buttons werfen kann. Es scheint, dass gefüllte normalerweise besser funktionieren. Sie einen Blick auf das Mitnehmen. Wir wissen, dass diese Geschichte von Knöpfen als Netto-Negativ basiert auf diesem Evidenzgrundmuster. Also, wenn Buchung lief dieses Experiment ist keine Überraschung, dass es schließlich abgelehnt wurde. Eine vorhersehbare Replikation. Mit diesen Informationen können Sie die Websites für Ihre Kunden besser gestalten. Diese Dinge sind offensichtlich nicht in Stein geschrieben. Aber wenn mehrere Tests ein klares Ergebnis zeigen, dann sind die Chancen, dass das am besten war. Um es klar zu sein. Diese Ressource ist nicht üblich. Das ist wie markantes Gold. Von anderen Fehlern zu lernen ist riesig. Ich kann Ihnen sagen, dass nach der Implementierung einiger dieser Dinge auf meiner eigenen Website Overs, Ich habe diese deutliche Verbesserung im Umsatz. Die Sache ist, dass ich keine AB-Tests durchführen konnte, weil ich nicht die Ressourcen für sie hatte. Genau das, was ich am Anfang gesagt habe. Aber ich änderte einfach das Design und sie sahen sich die Anzahl der Verkäufe an und sie stiegen. Das ist die Sache. Es ist einfach und billig, die Designs zu implementieren. Es ist schwer, tatsächlich die Informationen aus AB-Tests zu bekommen , ist schwierig und teuer, tatsächlich die AB-Tests auszuführen. Aber die Implementierung selbst, es ist einfach von einer Strich-basierten Taste zu einer gefüllten Taste. Das ist in ein paar Sekunden erledigt. Nun, wieder nach oben zu gehen, nun, das ist nicht genau 100% wissenschaftlich oder genau. Indem Sie sich Tag für Tag bestimmte Zahlen ansehen, erfahren Sie, wann etwas vor sich geht. Es ist sehr wahrscheinlich, dass Ihre Kunden das Gleiche tun werden. Sie werden nicht in der Lage sein, mehrere Versionen dieser Website gleichzeitig zu bedienen. Aber sie ändern wahrscheinlich das Design und überprüfen die Daten jeden Tag. Basierend auf den empirischen Tests können Sie die Leistung der Website ohne komplizierte Systeme oder teure Softwareentwicklungsteams verbessern . Abschließend erstellen wir als Designer manchmal eine Website basierend auf dem, was gut aussieht, basierend auf dem Styleguide des Unternehmens oder den Bedürfnissen des Kunden. Aber Analytics bleibt König und Statistiken sollten überaus herrschen. diesem Grund sollte sich eine Website ständig weiterentwickeln und Sie oder der Kunde sollten sich nie in ein bestimmtes Design verlieben, wenn möglich, testen Sie die Hölle, basierend auf Beweisen, die auf guten UI oder anderen Orten gefunden wurden. Viel Glück damit. 67. Case Landing: Hey, da. In diesem Clip werde ich über die Ausleihseite von mir und anschließend meine Ziele als Unternehmer sprechen. Dies wird Ihnen helfen, einen besseren Einblick in den Geist eines Kunden oder eines Unternehmers zu erhalten. Sie werden sehen, wie jedes einzelne Detail auf der Seite nur aus einem Grund vorhanden ist. Und das ist die Umsatzsteigerung. Das ist wichtig, denn jeden Tag sehe ich Designer, die sich gut konzentrieren, die Designseite, aber sie konnten nicht erkennen, dass sie die Bedürfnisse des Kunden nicht erfüllen. Sie werfen nur Sachen herum. Ich möchte auch auf den Unterschied zwischen einer Website und der Zielseite hinweisen. Während Sie auf einer normalen Website haben Sie eine Reihe von Dingen, die Sie tun können. Landingpage wird mit nur einem bestimmten Zweck erstellt. In diesem Fall, dass Verkauf gewarnt werden, dies ist ein ziemlich langes Video über die Web-Design-Nische. Wenn Sie nicht interessiert sind, überspringen Sie es einfach. Lassen Sie uns zu ihm kommen und Sie werden sehen, was ist, was bringt den Ball den Punkt des Projekts. Dies ist eine Zielseite für den Photoshop-Kurs. Das Hauptziel ist es, Verkäufe für dieses digitale Produkt zu erhalten. Das ist ziemlich offensichtlich. Was nicht so offensichtlich ist, ist die Tatsache, dass dies eine schwierige Aufgabe ist weil es unzählige YouTube-Videos gibt, die völlig kostenlos sind, B, die billiger sind , sagt das Gericht da draußen, siehe der Preis scheint hoch zu einigen Menschen. Wie würden Sie sich einem solchen Projekt nähern? Ich denke, dass unsere beiden Hauptwege, wenn konzentrieren sich auf meine Expertise als Lehrer oder konzentrieren Sie sich auf die Bedürfnisse des Schülers. In Richtung Punkt Nummer eins würden Sie denken, dass, wenn ich zeige, dass ich ein von Adobe zertifizierter Dozent und Photoshop-Experte mit über 24 Tausend Bewertungen und 200 Tausend Studenten bin, das würde Glaubwürdigkeit etablieren. Das würde die Leute dazu bringen, mir zu vertrauen, und daher könnten sie eher den Kurs kaufen. Ich habe diesen Weg jedoch nicht gewählt. Und hier ist der Grund. Bounce Rate ist diese Metrik, die Zahl, die uns zeigt, wie viele Personen sofort eine Website verlassen, wenn sie sie betreten. Ein Industriestandard, und die meisten Menschen in der Know ständig überwacht. Menschen verlassen eine Website aus mehreren Gründen sofort. Aber einer der größten ist eine Diskrepanz zwischen den Erwartungen der Besucher und dem Inhalt, der gezeigt wird. Wenn Sie auf der Suche nach dem Photoshop-Kurs und Sie sehen ein großes Bild von einem zufälligen Kerl , der über seine Expertise rühmt, hat Zahlen, die nicht auf Ihre Bedürfnisse sprechen. Stattdessen besteht eine gute Chance, dass es Sie tatsächlich verärgert. In der Landingpage Nische, müssen Sie sicherstellen, dass Sie Laser konzentrieren sich auf die Besucher, will Gewicht verlieren, um besser schlafen, mehr Geld verdienen, um ein Datum zu bekommen, und so weiter. Das Know-how kommt zu einem späteren Zeitpunkt im Verkaufsgespräch ins Spiel. Welche Methoden in erster Linie, ist es, die Aufmerksamkeit des Besuchers zu erregen und ihn interessiert zu halten. Das werde ich nochmal sagen. Am wichtigsten ist es, die Aufmerksamkeit des Besuchers zu erregen und ihn zu interessieren. Wenn Sie es schaffen, ihn zu engagieren steigen die Chancen auf einen Verkauf. Okay, mit dem gesagt wird, schau dir diesen Header an. Es ist nach jedermanns Maßstäben winzig. Und das liegt daran, dass der Fokus der Besucher hier sein sollte und dieser zentrale Bereich, das Navigationsmenü, ist so minimal wie es nach Hause kommt über mich Kontakt, die für mich obligatorisch sind. Eine solche Seite dann registriert und wieder einloggen, sehr benötigt einen ein Pixel großen Teiler. Und das ist die Kopfzeile. Keine Bilder, keine Abschrägung, kein innerer Schatten, nichts so sauber wie es wird. So wird der Besucher hierher gezogen. Hier muss Ihr Copywriting auf dem Punkt sein. Copywriting ist in einer Landingpage von wesentlicher Bedeutung. Es steht, ein Designer zu werden. Es ist nicht lernen Photoshop, die funktionieren kann, aber die Ziele der Menschen sind und so formuliert. Du willst keine neue Matratze bekommen. Du willst besser schlafen, damit wir uns besser fühlen können. Du willst gut ausgeruht sein. Als nächstes ist der Begriff Glasmasse da zu sagen Dies ist ein Premium-Programm. Schließlich, von Anfänger-Shows ist dies das einzige Trainingsprogramm, das Sie jemals brauchen werden. Es ist alles umfassend. Jedes einzelne Wort hier macht Sinn. Das ist eine tolle Schlagzeile. Es gibt kein Fett. Du kannst nichts wegschneiden. Nein. Könnten Sie es auf produktive Weise viel hinzufügen? Kurz, kraftvoll, effektiv. Das ist also ein Grund, warum Sie Lorem Ipsum niemals auf Landingpages verwenden sollten. Diese Überschrift allein braucht viel Zeit zum Basteln. Aber gehen wir zur Unterüberschrift über. Es sagt, gelernt Photoshop, Web-Design, mobile App-Design, Grafik-Design und so vieles mehr. Dies deutet darauf hin, dass es eine Menge Inhalt gibt, aber dies sind auch Schlagwörter, Schlüsselwörter. Wenn Sie zum Beispiel Webdesign suchen, versichert Ihnen diese Linie hier, dass Sie an der richtigen Stelle sind. Dadurch wird die Absprungrate minimiert. Es geht weiter. Adi wurde von einem von Adobe zertifizierten Photoshop-Dozenten unterrichtet. Dies ist ein USP, ein Alleinstellungsmerkmal. Die Kurslänge und die Anmeldeinformationen der Dozenten sind beide solide Argumente zugunsten des Kurses. Also wieder, alles, was Sie hier sehen, die darauf abzielt, die Absprungrate zu minimieren, die Sie auf die wichtigsten Leute interessiert. Letzte Zeile, unbegrenzten Zugang, um in Ihrem eigenen Tempo zu lernen. Das ist wieder einmal mächtig, unbegrenzter Zugriff. Du musst also nicht ins Internet gehen. Es sagt Ihnen auch, dass der Kurs keine einmalige Streaming-Sache ist. Dann beruhigt es Sie, indem Sie sagen, dass Sie in Ihrem eigenen Tempo lernen können. Das liegt daran, dass es eine bedeutende Gruppe von Menschen in jedem Bereich gibt, die eingeschüchtert wird, wenn man etwas Neues lernt. Es spielt keine Rolle, ob es zu tanzen, Gitarre zu spielen oder ein neues Programm zu lernen, sie haben kein Vertrauen in ihre Fähigkeit, schnell Informationen aufzunehmen. Daher ist dieser Satz, in Ihrem eigenen Tempo lernen, sehr mächtig. All das, und wir haben nur was durchgemacht, 5% dieses Designs. Okay, in Bewegung, Kursfunktionen sind etwas, das mit der Plattform, die ich verwende, kam. Es war also nicht meine erste Wahl. Ich musste es hier aus technischen Gründen verwenden. Es könnte hilfreich sein für diejenigen, die in Zahlen über eine 100 Vorträge an zwei Stunden interessiert sind , alle Schwierigkeitsgrade enthalten und so weiter. Aber es ist nicht die beste Gegend in diesem Design. Als nächstes kommt das Video. Die Vorschau ist ein bisschen von geringer Qualität aufgrund verschiedener Plugins, die mir geholfen haben, die Seitengeschwindigkeit zu erhöhen, was ein kritischer Faktor beim Verkauf von Dingen online ist. Je Faszinierte Lasten desto besser. Aber das Thumbnail ist auffällig. Es verfügt über kräftige Farben und es hat diese Botschaft hier. Lernen Sie von einem zertifizierten Instruktor. Auf dem Weg nach unten haben wir eine Reihe von Schlagzeilen gelernt, 51 Kurs zu erstellen, Geld zu verdienen, Vertrauen zu gewinnen, einzigartige Inhalte. All dies sind die gut gestalteten Schlagzeilen, die verschiedenen Individuen sprechen sollen. Lernen Sie, für Ihren Job zu schaffen, für Ihr Unternehmen, für Sie, liegt auf der Karte der persönlichen Entwicklung. Es ist etwas für diejenigen, die ihr Leben erhöhen wollen, die den Wandel wollen, die vielleicht wachsen wollen. Aber ich schiebe diese Karte nicht zu sehr, weil ich den Mond oder den lebensverändernden Photoshop-Kurs nicht versprechen möchte . Aggressiv zu verkaufen ist immer kontraproduktiv. Stattdessen benutze ich diesen Abschnitt, um mich selbst zu trennen, YouTube-Videos, billigere Kurse, sogar meine eigenen tatsächlich. Und der scheinbar hohe Preis, progressive Schwierigkeit wird zuerst gezeigt, weil wieder, Menschen Mangel an Vertrauen und Vertrauen in sich selbst. Sie fürchten, dass sie kämpfen könnten. Das ist also das erste, was ich ansprechen muss. Ein weiterer Teil davon ist die Tatsache, dass, wenn Sie ein YouTube-Video sehen, es außerhalb des Kontexts ist, oder natürlich macht viel mehr Sinn. Sie erhalten von a bis Z auf einem YouTube-Video, Sie wissen nicht, was als nächstes kommt. Instant gehalten über Live-Chat ist einer der Gründe, warum der Kurs als solcher Preis ist. Und das ist wieder ein weiterer Grund, warum es viel besser ist als billigere, weil Sie Zugang zu einem qualifizierten Fachmann bekommen. Antworten sofort. Unbegrenzter Zugriff und die schiere Menge an Stunden sagen Ihnen, dass dies das einzige ist, was Sie jemals brauchen werden. Learn by doing sagt Ihnen, dass Sie sich die Dinge nicht auswendig lernen müssen. Die Leute hassen Schulen aus einem Grund. Lernen zu Aktivitäten scheint mehr Spaß und Spaß. Und wir haben noch zwei weitere hier, aber gehen wir weiter. Der nächste Abschnitt ist wieder ein großes Argument für den Kauf dieses Kurses. Zunächst einmal ist es ein umfassender Kurs von 0 bis Held, fünf Kurse in einem. Dann bekommst du dieses Video hier, das dir alles zeigt, was du erschaffen wirst. Dies ist eine bessere Nutzung von Speicherplatz, anstatt 100 Miniaturansichten anzuzeigen, die viel zu klein sind, es wird auch helfen, die Website schneller zu laden. Als nächstes haben Sie eine Checkliste und jeder wird bestimmt etwas finden, das interessiert ist. Schließlich einige wichtige Statistiken für logische analytische Denker, die keine Entscheidungen mit ihren Gefühlen treffen. Apropos, hier ist die Art, wie die Seite endet. Für weniger als $5 pro Stunde für die besten Photoshop-Schulungen mit sofortiger Durchführung über Live-Chat von einem zertifizierten Adobe-Dozenten. Dies bedeutet, dass scheinbar hohen Preis in etwas, das mehr zurelatable ist, nur $5 pro Stunde. Das ist ein Stahl. Zurück nach oben. Dieser Bereich wird verwendet, um den Benutzer zur Aktion auffordern. Sie möchten den gesamten Prozess so einfach wie möglich gestalten. Zwingen Sie ihn nicht, Backup zu scrollen, streut die Call-to-Action-Schaltfläche an wichtigen Stellen. Die nächste Sache ist, soziale Beweise ist eine große Sache. Die Leute müssen sehen, dass dieser Kurs funktioniert. Deshalb habe ich diesen Text schweren Bereich eingeschlossen. Die Menschen werden offensichtlich entmutigt werden. Lesen Sie es, aber das ist nicht der Punkt. Die Überschrift, die Unterüberschrift und alle Sterne sind das, was zählt. Wir leben in einer Welt, in der Menschen die Schlagzeile einer Nachrichtengeschichte auf Facebook oder was auch immer lesen und sie verbreiten, obwohl sie den Artikel nicht wirklich gelesen haben, haben wir nicht genug Zeit. Die einfache Tatsache, dass wir eine Mauer des Beweises sehen, genügt uns. Auch wenn dies als Fehler erscheinen mag, dass es zu textschwer ist, macht es Sinn. Weiter, wir haben einen anderen Bereich von USBs, Alleinstellungsmerkmale. Diese Punkte helfen Ihnen zu rechtfertigen, Sie kaufen den Kurs im Vergleich zum Ansehen von zufälligen YouTube-Videos von verschiedenen Leuten kauften einen billigen Kurs, wenn Sie keine echte Hilfe bekommen. Als nächstes sind diese Abzeichen für diejenigen, die es lieben, schnell eine Seite zu scannen. All diese sind sehr gebraucht, und ich denke, wenn ich völlige Freiheit hätte, würde ich sie wahrscheinlich an den Anfang der Seite anstelle all dieser Todesfälle platzieren. Zum Beispiel ist der sofortige Zugriff für diejenigen, die das Warten hassen. Dies ist ein wichtiger Anreiz, es zu kaufen und begann. Wie Sie sehen können, muss die Landingpage mit vielen Menschen mit völlig unterschiedlichen Verhaltensweisen sprechen . Manche Leute wollen so niedrig nehmen, manche Leute wollten jetzt, manche haben Angst, dass sie nicht kreativ genug sind, oder vielleicht werden sie nicht in der Lage sein, mitzuarbeiten, und so weiter. Sie haben all diese Leute beruhigt. Schließlich wird ein FAQ-Abschnitt dringend benötigt, aber fünf bis sechs Fragen sollten das Maximum sein. Mehr als das und es beginnt sich überwältigend zu fühlen. Jetzt lasst uns wieder aufsteigen. Beachten Sie die Einfachheit der Seite. Wir haben eine fantastisch aussehende Schrift in ein paar Gewichten auf einem reinweißen Hintergrund. Wir haben eine sehr leicht auf dem Auge blau für ein paar Abschnitte. Aber überall sonst, wo du hinsiehst, ist das Ganze makellos. Farbe wird verwendet, um Aufmerksamkeit zu erregen, entweder um einen Besucher dazu zu bringen, auf das YouTube-Video zu klicken oder den Kurs zu kaufen. Das war's. Und mit dieser Einfachheit diese Ikonen wirklich zum Leben erweckt. Ich habe sehr lange damit verbracht, diejenigen zu finden, die übereinstimmten, aber sie glänzen wirklich mit all diesen Leerzeichen um sie herum. Das gesamte Design setzt auf Symmetrie, ein Gefühl von Leere und großer Typografie. Ich kann nicht sagen, dass ich perfekt in sie verliebt bin, aber ich denke, es erfüllt meine Ziele als Geschäftsinhaber. Als Nebenanmerkung verschiebt sich der Fokus im Bereich „Über mich“ auf meine Expertise, aber auch auf meine Lebensgeschichte. Wenn du mich kennenlernen willst, hier ist der richtige Ort dafür. Es ist eine ziemlich lange Lektüre, aber ich hatte nicht die Zeit, ein YouTube-Video zu erstellen, um es oben auf der Seite zu platzieren. einen letzten Blick auf das Design nehme, ist meine Frage an Sie, wie würden Sie eine solche Seite erstellen, wenn ein Kunde mit diesem Brief zu Ihnen kam , um Photoshop-Kurse für dreifache Ziffern zu verkaufen, wie würden Sie diese Landung entwerfen Seite? Wie gesagt, Sie hätten sich auf die Erfahrung des Dozenten an der Spitze oder die Projekte konzentrieren können, die im Kurs enthalten sind. Sie hätten den Lehrplan anzeigen können, aber alle diese Auswahlmöglichkeiten erhalten ihre suboptimalen. Sehen Sie sich beispielsweise das Inhaltsverzeichnis an. Es ist ginormös. Das hätte viel Druckraum gegessen. Und wenn Sie nur den kleinen Teil davon einbeziehen, könnten die Leute denken, dass es nicht viel Inhalt im Kurs gibt. Aber ich muss erwähnen, dass ich über eine Sache nicht glücklich bin. Es ist die Tatsache, dass es nicht sehr offensichtlich ist, dass Sie Live-Chat für die sofortige Hilfe erhalten. Das ist einer der größten Verkaufsargumente und ich bin mir nicht sicher, ob dieses Design das genug zeigt. Einfach in Echtzeit mit einem Experten sprechen zu können, ist immens wertvoll. Die Frage ist also, wie würden Sie eine Zielseite für diese Art von Projekt erstellen? Zeigen Sie mir Ihr Design im Kommentarbereich oder auf diesem Akkord. Viel Spaß damit. 68. Abschließende Gedanken über die Kundenbedürfnisse: Hey, da. Am Ende der zweiten Säule des Webdesigns möchte ich einen schnellen Überblick geben. Die Nummer eins, die Sie sich merken sollten, ist, dass Sie eine Website erstellen , die auf den Bedürfnissen Ihres Kunden basiert, ist nicht für Sie. Es geht nicht darum, was du magst, was du denkst, dass der Klient am besten nutzt. Manchmal benötigen Sie eine Landing Page anstelle einer normalen Website. Manchmal könnten Sie gezwungen sein, ein hässliches für ein gimmicky Produkt zu erstellen. Manchmal bist du aus deiner Komfortzone raus. Es liegt an Ihnen, Ihre Maßstäbe zu setzen und zu entscheiden, was Sie tun möchten. Sie sind frei, Projekte abzulehnen, wird nicht eine bestimmte Linie überschreiten. Nehmen Sie zum Beispiel diesen Logo-Designer. Er ist spezialisiert auf einen bestimmten Look. Er macht es sehr gut. Manchmal geht er ein bisschen außerhalb dieser Vintage-Atmosphäre, aber die meisten von ihnen folgen dem gleichen Stil. kannst du auch tun. Wenn Sie nur daran interessiert sind, schöne Landingpages zu entwerfen, wie diese von der Landung nach vorne, Sie Sicher, Gehen Sie voran. Das ist, was ich am Webdesign liebe. Sie können sich auf technische Landingpages spezialisieren und das war's. Sonst nichts. Oder Sie können versuchen, vielseitig zu sein, vom Zahnarzt über Blogs, Anwaltskanzleien, über E-Commerce bis hin zu Landingpages und so weiter. Entweder hören Sie, was der Kunde will, was ich zumindest am Anfang für die ersten 340 Jahre empfehle. Oder konzentrieren Sie sich auf einen einzigen Stil und seien Sie im Voraus darüber. Es ist nichts falsch. Und als der Go-to Kerl für Deck-Landing Pages oder was auch immer Nische Sie wählen, kann es schwieriger sein, loszulegen. Lassen Sie uns Spezialisierung hat seinen Vorteil. Zurück zu den Bedürfnissen des Klienten. Wenn ich ein Design eines meiner Schüler überprüfe, konzentriere ich mich zunächst immer auf die erste Säule des Webdesigns. Ich schaue mir die Ausführung an und inspiziere das Design auf Fehler. Wenn es keine Probleme mit der Dimensionierung von Abstandselementen, Kontrast, dem Layout der Zeilenhöhe usw. gibt. Die Website ist sehr wahrscheinlich ein Sechs von zehn mindestens. Dann gehe ich zu anderen feineren Dingen wie Schriftauswahl, Farbschema, negativer Raum, benutzerdefinierte Grafiken usw. und wenn diese richtig gemacht werden, kann das Projekt eine Punktzahl von acht oder 8,5 erhalten. Was Anfänger nicht erkennen, ist, dass nur der Kunde Ihnen eine neun oder eine 10 geben kann , weil er die Spitze der Pyramide ist. Eine andere Sache, die Sie vielleicht nicht wissen, ist, dass jedes dieser Designs eine sehr niedrige Bewertung erhalten kann. Jedes dieser wunderschönen Designs, ob es sich um eine Landingpage oder eine Standard-Website handelt, kann von einem Kunden abgelehnt werden. Es spielt keine Rolle, ob es sich um ein freiberufliches Projekt oder um das 1:1 Direktprojekt handelt. Nur weil es gut aussehend und gut ausgeführt ist, bedeutet das nicht, dass der Kunde glücklich sein wird. Ich werde das noch einmal sagen, nur weil es gut aussehend und gut ausgeführt ist, bedeutet das nicht, dass der Kunde glücklich sein wird, wenn dieses Beispiel in der Vergangenheit und ich werde es wieder verwenden. Wenn Sie eine Website für das Fitnessstudio entwerfen, müssen Sie wissen, was der Kunde will. Ist es ein Bodybuilding, hardcore Gm, ein CrossFit-Fitness-Studio und Vital-Funktionen. Jim, sagen wir Boxen oder MMA, ein frauenfreundliches Fitnessstudio mit Yoga-Kursen und dann optimistischer Stimmung. Sie können Ihren Herzzweifel entwerfen, aber nur eine dieser Optionen ist die richtige für Ihren Kunden. Er ist der Einzige, der dich leiten kann. Also, wenn Sie mir ein wunderschönes Design zeigen, werde ich wahrscheinlich sagen, es ist schön, aber das bedeutet nicht, dass der Kunde es lieben wird. Du musst sicherstellen, dass du seine Vision verstehst. Du musst ihm geben, was er will. Stellen Sie sich vor, Sie sind der Koch in einem Restaurant und Sie lieben Knoblauch, Pommes frites. Nun, das könnte dein Lieblingsessen sein. Sie können es bis zu all Ihren Kunden bedienen. Sie müssen diese Aufträge annehmen und selbst wenn Sie nicht damit einverstanden sind, müssen Sie liefern. Stellen Sie also sicher, dass Sie trennen, was gut aussieht und was der Kunde will. Versteh mich nicht falsch. Ich sage nicht, dass du mich oder niemanden um Feedback bitten solltest. Ich sage, dass unsere Meinungen nach dem bestimmten Punkt keine Rolle spielen. Wenn Sie als Sieben oder Acht entworfen sind, ist die einzige Person, die Sie hören sollten, der Kunde. Er ist der Einzige, der danach zählt, Mark. Ich bin alles für Kreativität und schöne Websites, aber es ist alles umsonst. Wenn Sie nicht liefern können, was der Kunde will. Und damit haben wir die zweite Säule des Webdesigns abgeschlossen. Ich hoffe, Sie wissen jetzt, was Sie tun müssen. Und das ist, um die Ohren in diesem Bereich weit offen zu halten. Es spielt keine Rolle, wie toll Ihre Designs sind, wenn sie nicht im Einklang mit den Wünschen des Unternehmens sind, auf Ihren Kunden hören und genau darauf achten. Das ist der Schlüssel. Vielen Dank. 69. Der dritte Schlüssel, um ein tolles Webdesigner zu bekommen: Willkommen auf der dritten Säule des Webdesigns. Liebe zum Detail. Wir werden mehrere Fallstudien durchlaufen und ich werde sie aufschlüsseln, damit Sie besser verstehen können, worum es in diesem Abschnitt geht. Das Problem ist, dass die Liebe zum Detail nuanciert ist. Es ist subtil für das ungeübte Auge, es ist unsichtbar. Sie als einfaches Beispiel DenkenSie als einfaches Beispielüber die Farbe Ihrer Textebenen nach. Du könntest reines Schwarz gebrauchen, 000, 000, nicht wahr? Was man auch für etwas tun könnte, was etwas weicher und leichter für das Auge ist. Noch mehr als das, Sie könnten für einen Farbcode gehen, der ein bisschen bekannter zu nass hat, sagen wir vielleicht mit ein wenig Braun darin. Für mich ist dies eine wichtige Designentscheidung. Die meisten Leute, das scheint irrelevant. Es sieht gleich aus, ist es wert, dass einige sagen können. Aber große Entwürfe von großen, wegen all dieser kleinen Dinge, die summieren. Und das ist der Schlüssel hier. Es ist nicht eine einzige Sache. Sagen Sie, die Farbe Ihrer Schriftarten zu ändern, das wird Ihr Design radikal verbessern. Nein, Es ist dann 2050 kleine Dinge, die sich anhäufen und zusammen werden sie unglaublich mächtig auf das Gespräch über die zweistellige Umsatzsteigerung. Einzeln wirken sie ohne den Rest von ihnen trivial. All die Dinge, über die ich reden werde, scheinen Zeitverschwendung zu sein. Es ist wie die Zutaten eines Kuchens. Wer zum Teufel wird auf die Blume aufgeregt? Oder reiner Zucker, ist, wenn Sie sie zusammen mischen App, dass ein gut sortiertes Rezept in bestimmten Anteilen. Das ist, wenn man etwas Großartiges bekommt. Zurück zum Webdesign. Wenn Sie auf die Liebe zum Detail verlassen, wird die ganze Website zu schälen raffiniert und geknöpft, wird schön von Anfang bis Ende fließen. Und das ist das Ziel dieses Abschnitts. Aber lassen Sie uns ein wenig zurück, weil wir ohne UX nicht über Liebe zum Detail sprechen können. Sie werden feststellen, dass der große Teil dieses Abschnitts über UX sein wird, aber es ist alles praktisch. Hören Sie, ich werde das gesamte UI-UX-Denken in der nächsten Vorlesung erklären. Aber ich möchte meine eigenen Gedanken zu diesem Thema teilen. Wie Sie wollte ich mehr über UX erfahren, weil es allgemein bekannt war , dass es einer der Schlüssel zu einer erfolgreichen Karriere im Webdesign ist. Ich fing an, Kurse zu beobachten und war schockiert über die Komplexität. Hören Sie, UX ist nicht etwas, das Sie an einem Tag lernen. Es ist eine eigene Bestie, die Respekt verdient. Verzehren Sie Bücher, Kurse und Seminare, die wirklich tief in dieses Zeug eingehen. Sie können Dinge wie Usability-Tests finden. Sie werden Risikobewertungen, Low- und High-Fidelity-Designs, Fokusgruppen, Persona-Informationsarchitektur dann viel, viel mehr riskieren. Diese werden deinen Kopf drehen lassen. Ein UX-Designer zu sein, ist manchmal etwas anderes als ein Webdesigner. Jetzt, ist das alles nötig? In gewisser Weise? Ja, auf jeden Fall. Man kann die Jahre des Lernens nicht wirklich in ein paar Vorlesungen komprimieren. Am Ende des Tages ist dies ein separates Feld, aber ich kann Ihnen einen Crashkurs mit den Informationen zur Verfügung stellen , die Sie brauchen, um so aufzustehen und zu laufen, wie ich denke, das ist meine Spezialität, um alle möglichen Tricks zu finden, Tipps und Techniken, die gute, solide Ergebnisse erzielen, ohne Jahre damit verbringen zu müssen, dieses Feld zu meistern. Okay, es wird dir keine perfekten 10 von 10 bekommen. Aber Sie können immer noch ernsthaft verbessern, die Sie entwerfen. Das ist also mein Ziel in diesem Abschnitt, ein Crashkurs in UX und Liebe zum Detail. Lassen Sie uns an die Arbeit gehen, indem wir mit den Grundlagen beginnen. 70. Was ist UX?: Lassen Sie uns über die Grundlagen sprechen und wie ich sie sehe. Ui steht für die Benutzeroberfläche. Ui ist eine Last entworfen und Photoshop. Ux steht für User Experience. So funktioniert die Schaltfläche und wie der Benutzer sie verwenden soll, um ein Ziel zu erreichen. Nun, gute UX bedeutet einfach eine gute Benutzererfahrung. Im wirklichen Leben ist das gebräuchlichste Beispiel die Ketchup-Flasche. Die Glasversion von Heinz liebte fantastisch. Es war großartig, UI, visuell umwerfend. Den Ketchup rauskriegen. Paine, im Grunde hast du entweder keinen Ketchup oder den ganzen Ketchup. Das ist eine schreckliche Erfahrung. Mehr als das, die große UI konnte die schlechte UX nicht kompensieren. Ansonsten gesagt, es spielt keine Rolle, wie genial das Flaschendesign eine bakterielle Funktion I0 war, immer Ketchup aus ihm wurde nicht erfüllt. Zurück zum Webdesign bedeutet dies, dass Sie ein Kick-ass Projekt in Photoshop nur entwerfen können , um zu sehen, dass die Benutzer damit kämpfen. Stellen Sie sich eine Schaltfläche vor, die keinen Hover oder einen gedrückten Zustand hat, klicken Sie darauf und nichts passiert. Sie klicken mehrmals aus der Illustration. Und nach 1015 Sekunden, schließlich auf eine andere Seite gebracht. Das ist schrecklich. Ux, das ist eine schlechte Erfahrung. Es spielt keine Rolle, wie schön die Last ist oder die Intel Website für diese Angelegenheit, denn der Benutzer ist einfach sauer. Hör zu, im wirklichen Leben können wir an High Heels denken. Werden Sportgötter, diese führen Fantastisch? Hat die Definition von großen UI, wunderschön, atemberaubend zu betrachten. Jeder schätzt sein Glück. Aber der Spaziergang und die High Heels den ganzen Tag, von dem, was ich verstehe, ist es ein großer Schmerz. Es ist ein riesiges Unbehagen. Diese SportsCar unglaublich harte Federung, die Ihre Zähne jedes Mal herausschlägt, wenn Sie eine kleine Beule auf der Straße treffen. Kein Speicher zu sprechen, Gas, Guzzler, hohe Wartung, und so weiter. Und diese beiden Fälle können wir Kompromisse eingehen. Wir akzeptieren all die schlechten Dinge, die mit ihnen verbunden sind , aus verschiedenen Gründen, auf die ich nicht hineinkommen werde. Aber als Webdesigner müssen wir nicht dazu bringen, dass unsere Nutzer beim Surfen keine Schwierigkeiten ertragen. Man muss sich daran erinnern, dass die Benutzer Supermodels sind und die Aufmerksamkeitsspanne und die Patienten extrem begrenzt sind. Denken Sie nicht, dass sie eine schlechte Benutzererfahrung akzeptieren nur weil sie das Produkt oder die Dienstleistung von Ihrer Website wollen. Wissen Sie, es gibt 100 andere Websites, die dasselbe angeboten werden. Nun, um es einfach zu halten, denken Sie so darüber nach. Es gibt keine Kompromisse im Webdesign. Sie denken entweder über die Benutzererfahrung nach und verbessern sie ständig, oder Sie vernachlässigen das. Und Sie erstellen Designs, die nur für das Posting online auf Dribbble oder Behance für Likes gedacht sind. Es ist ziemlich üblich, wunderschöne Designs auf diesen Plattformen zu sehen , die es nie aus Photoshop, Adobe XD oder einem anderen Programm schaffen. Warum ist das so? Weil sie nicht realistisch sind. Sie sind völlig fiktiv, wie das Leben vieler Influencer und Prominente. Wenn Sie ein Kiefer-Design sehen, würde ich wetten, es gibt eine 90-prozentige Chance, dass sie nicht in eine echte funktionierende Website implementiert werden. Das hat, weil es 100% UI, 0% UX ist. Und in der Off-Chance, dass es tut, es einfach nicht dasselbe aussehen. In gewisser Weise. Es ist wie diese futuristischen Konzepte, die Sie auf Auto-Shows sehen. Wenn Mercedes Nachrichten machen will, schaffen sie das Beste über das Top-Konzept, das sie sich vorstellen können, mit drehbaren Stühlen und LEDs in den Rädern und so weiter. Aber wenn das eigentliche Auto auf die Straße kommt, sieht es aus wie eine etwas verbesserte C-Klasse. Gehen Sie zurück zu Web-Design, diese wunderschönen Designs werden heruntergefahren, weil nicht alle anderen Unternehmen haben die 50 bis 100 K Budget durch den gesamten Prozess von einem schwindlig gehen? Ja, 50 bis 100.000 Dollar für eine Website. Dinge werden unglaublich teuer, wenn Sie ein Design-Team, ein UX-Teams, Codewords, Texter und Projektmanager einstellen ein UX-Teams, Codewords, . Dies ist ein weiterer Grund, warum ich es vorgezogen habe, Sie auf einen Crashkurs in Bezug auf UX zu nehmen, meisten Ihrer Kunden würden Ihnen wahrscheinlich ein paar 100 oder ein paar tausend Dollar zahlen. Du brauchst immer noch anständige UX-Fähigkeiten. Und das habe ich vor, dir beizubringen. Bis hin zu Vermögenskonzepten für reale Projekte. Um zusammenzufassen, UI ist darüber, wie die Website aussieht, ihre Ästhetik. Ux geht es darum, wie die Website funktioniert, wie die Besucher sie nutzen, um ein Ziel zu erreichen. Ich werde Ihnen nicht alles beibringen, aber ich werde Ihnen sehr solide Wege zeigen, um Ihre Website-Designs zu verbessern. Lassen Sie uns unsere Diskussion in der nächsten Vorlesung fortsetzen. 71. Das beste Beispiel für gute UX und Liebe zum Detail: Hey, da. In der nächsten Vorlesung möchte ich Ihnen verschiedene Beispiele von meiner eigenen Website oder schlechter Punkt Zeile zeigen . Der Grund, warum ich mich darauf konzentriere, ist, weil ich Zugriff auf seine Analysen habe. Das Takeaway ist, dass ich nach der Implementierung einer Liste von etwa 25 Bearbeitungen meine monatlichen Verkäufe verdoppeln konnte. Ja, das hast du gehört, oder? Verdoppelt von 5000 auf 10000 Dollar pro Monat. Nun, es gibt einige, ist nicht so beeindruckend für das ziemlich neue Startup, das nur Geschwindigkeit fängt. Ich bin sehr zufrieden mit unserer Flugbahn. Außerdem wollte ich, dass du weißt, dass das nicht zwischen 100 und 200 Dollar ist oder so etwas lächerlich ist. Okay, Hier ist die alte Version der Website in Chrome, die auf meinem eigenen Computer installiert ist. Daher, warum die URL localhost sagt. Und hier ist der aktuelle, der Live-in Firefox. Fangen wir mit der größten Veränderung an. Das beste Beispiel für gute UX, die ich mir vorstellen kann, sagen Sie, dass Sie zwei Pfannkuchen kaufen wollen, zwei Aromen von Haferflocken, wenn Limonade und wenn Q0 setzen eine typische Reihenfolge. Es scheint einfach genug zu sein, oder? Die Pfannkuchen sind hier und ich, Chris, unfruchtbar, wir sind klug genug, um dieses Symbol hinzuzufügen, durch das Sie das Produkt direkt auf Ihre Karte hinzufügen können. Sie müssen also nicht jedes Produkt eingeben und auf In den Warenkorb klicken, dann gehen Sie zurück und wiederholen Sie den Vorgang für das andere Produkt. Klug, richtig? Also habe ich zwei Pfannkuchen in meinem Wagen. Übrigens, die Geschwindigkeit ist unglaublich schnell, weil, wie ich schon sagte, dies ist eine lokale Kopie der Website. Nun fügen wir die Knotenmahlzeit hinzu. Beachten Sie, was gerade passiert ist. Wir wurden gerade zurück auf die Pfannkuchen-Tab gebracht. Wir müssen noch einmal auf Haferflocken klicken, um den Einkauf fortzusetzen. Da geht es wieder. Vielleicht ist es ein Fehler, der mit dieser Kategorie zusammenhängt. Lasst uns Tasche beseitigen, Boom, Pfannkuchen. Und schließlich ein Teppichboden. Oh, willst du die Bandauftritte? Dies ist ein schreckliches Einkaufserlebnis. Das ist schlimm. Ux Point Blank Lassen Sie mich Ihnen die aktualisierte Version zeigen, die das beste Beispiel für eine gute UX ist. Zumindest die beste Verbesserung, Boom, Boom, Boom, Boom. Und Boom. In der aktualisierten Version springt diese Registerkarte nicht mehr. Eigentlich wird die Seite überhaupt nicht aktualisiert. Wenn wir zur alten Version zurückkehren, schauen Sie sich sie an. Stechen Sie, was das Aktualisieren-Icon am oberen Rand des Browsers. Beachten Sie die Arbeitsversion aktualisieren. Das war eigentlich ziemlich langsam, was noch verärgerter war. Aber in der aktualisierten Version ist dies nicht mehr der Fall. Darüber hinaus erhalten wir eine Nachricht, die unten auf der Seite erscheint , die besagt, dass das Produkt dem Warenkorb hinzugefügt wurde. Das Symbol enthält auch ein Plus darin, so dass es überträgt, was diese Schaltfläche tut. Aber all diese feinen Details können darüber gesprochen werden, dass der latente Punkt, eindeutig ist dies eine bessere Benutzererfahrung, Hände nach unten. Aber worüber ich eigentlich in diesem Vortrag sprechen wollte , war, wie ich mit dieser schrecklichen Version gelandet bin. Ich ein Photoshop und strukturelle spezialisiert auf Web-Design. Nun, machen wir es Schritt für Schritt. Zuerst habe ich keine Website codiert. Ich benutze die große Programmierfirma aus Rumänien, sehr respektiert mit einem großen Team von Codes. Natürlich habe ich ein schönes Design in Photoshop erstellt, Pixel perfekt, und ich habe auch einen interaktiven Prototyp in Adobe XD gemacht. Ich war ein Traumkunde für sie. Das Problem ist, dass ich nicht erwähnt habe, dass die Seite nicht aktualisiert werden sollte , nachdem der Artikel dem Warenkorb hinzugefügt wurde. Ich konnte nicht sagen, dass die Photoshop, nicht meine interaktiven Prototypen. Um die Wahrheit zu sagen, habe ich nicht einmal daran gedacht. Warum sollte ich das tun? Ich konzentrierte mich auf die Design-Seite, die Benutzeroberfläche, aber auch auf Dinge wie den Checkout-Prozess, Vereinfachung des Registrierungsprozesses, so dass es dem Benutzer einfacher ist, seine Adresse hinzuzufügen, die Schaltfläche In den Einkaufswagen auf der Homepage. Dies sind alle UX-bezogenen Aufgaben. Es ist also nicht so, als ob es mir egal war oder dass ich unwissend war. Nein. Stattdessen passierte die Programmierer, die wir nicht richtig verwaltet werden, noch kümmerten sie sich genug um das Ergebnis. Sie hatten nicht die Liebe zum Detail dafür. Ihre Aufgabe war es, mein Design umzusetzen, es funktionieren zu lassen. Können Sie das Produkt in Ihren Warenkorb legen? - Ja. Fall geschlossen. In gewisser Weise ist es so, als würde man einem Computer die Aufgabe geben, alle Krankheiten auf der Erde zu beenden. Die KI tötet die ganze Menschheit. Hat es die Aufgabe erfolgreich abgeschlossen? Ja, Es hat es nur auf unerwartete Weise mit schwerwiegenden Auswirkungen Lektion, es ist leicht, die Programmierer Schuld. Das ist wirklich gute Jungs, und ich will niemanden beleidigen. Aber in dieser Situation liegt es an ihnen. Das Problem ist, es ist umstritten. Am Ende der Vorlesung würde ich gerne Ihre Eingabe zwei kennen, aber lassen Sie uns weitermachen. Als nächstes bat ich sie geschickt, eine Option in meinem Admin-Panel zu erstellen , über die ich auswählen konnte, welche Registerkarte standardmäßig aktiv sein würde. Die Argumentation ist solide. Ich möchte vielleicht meine Pfannkuchen diese Woche fördern, aber in der nächsten Woche, das könnte der Schlüssel sein, setzen die eine danach, meine Limonade und so weiter. Grundsätzlich wollte ich steuern, was der Benutzer für mein Admin-Panel sieht. Nun, die Standard-Registerkarte ist auf Pfannkuchen eingestellt. Nachdem der Benutzer zu einer neuen Registerkarte wechselt und über die Schaltfläche „In den Einkaufswagen hinzufügen“ verfügt, wird die Standardregisterkarte in Aktion gesetzt. Offensichtlich, als ich sie nach diesem Controller frage, habe ich nicht angenommen, dass das passieren würde. Es ist verblüffend. Ist es meine Schuld? Wieder, es ist höchst umstritten. Die meisten von euch würden nein sagen. Und weißt du, am Ende des Tages habe ich mein Bestes gegeben. Ich habe das Design in Photoshop erstellt, Pixel perfekt. Ich habe einen interaktiven Prototyp erstellt, den neunundneunzig Prozent der Kunden nicht tun. Ich helfe ihnen bei der Übergabe. Ich habe dabei geholfen, die Prüfung zu machen. Ich habe dieses Ergebnis einfach nicht erwartet, weil es unvernünftig ist anzunehmen, dass ich als Kunde oder als Designer weiß, was die beste Vorgehensweise in Bezug auf Registerkarten auf der Homepage ist und wie dieser Prozess des Hinzufügens eines Artikels zum Warenkorb funktionieren sollte. Das ist eine Codiertechnik und sie sollten darüber Bescheid wissen. Erst als ein Freiberufler ins Bild kam, fand ich heraus, dass die große Firma JavaScript für dort verwendet haben sollte , um den indischen Warenkorb zu nutzen. Ich werde mein Bestes tun, um auszusprechen, dass sein Name gesunken ist. Es hat einen tollen Job gemacht. Er folgte meinen Anweisungen und mit seiner Hilfe gelang es mir, meine Verkäufe zu verdoppeln. Natürlich gibt es keine Aktualisierung In den Einkaufswagen. Deng war nur ein Teil der Gleichung, aber es war eine der größten Verbesserungen. Jetzt fragen Sie vielleicht, warum hat die Codierungsfirma es nicht repariert? Nun, sie berechnen so etwas wie $50 pro Stunde mit dem Freiberufler. Die Gebühren weniger als die Hälfte des Betrags. Ich werfe Zufallszahlen aus, nebenbei bemerkt, das sind keine tatsächlichen Preise pro Stunde. Aber die Tatsache, dass es kein klarer Cut-Bug war, ein Fehler seinerseits in Bezug auf die Funktionalität. Es ist ein bisschen knifflig, als die Codierungsfirma, um mehr Arbeit zu tun, den Code meinem Projekt vier Stunden zuzuweisen, aber nicht in gewisser Weise zu berechnen. In diesem Fall ist es, als würde man nicht im Restaurant begrüßt. Stattdessen werden Sie Point-blank gefragt. Reservierung ist gängige Höflichkeit, jemanden zu begrüßen, wenn sie an die Tür kommen. Aber wenn sie es nicht tun, ist das ein Grund genug, um sich zu beschweren? Auch hier hat die Kodierungsfirma technisch ihre Arbeit erledigt. Sie haben die Website implementiert. Es war nicht das, was ich erwartet habe. Aber ist es ihre Schuld, dass ich bestimmte Standards habe? Wo endet es? was, 00:00 Uhr, bitte ich um zu viel? Und an welchem Punkt kümmern sie sich nicht um das Ergebnis? Am Ende des Tages ist dies das beste Beispiel für Liebe zum Detail und schlechte UX, die ich mir vorstellen kann. Ich freue mich auf Ihre Meinung idealerweise zum Zwietracht Chat. Danke. 72. Verbessere den Checkout-Prozess mit dem double: Willkommen zurück zu unserem Projekt. So verbessere ich den Checkout-Prozess und verdoppelte meine monatlichen Verkäufe. in der alten Version Wenn Siein der alten Versionauf das Warenkorb-Symbol geklickt haben, werden Sie hierher geschickt. Denken Sie daran, dass wir nicht eingeloggt sind. Die obere linke Seite zeigte Ihnen den Inhalt Ihrer Karte. Auf der rechten Seite hatten Sie einen ziemlich umfangreichen Infobereich über das Unternehmen, Dinge wie das, was wir an unsere Zutaten glauben und so weiter. Und schließlich, unten links, zwei Dinge, die Lieferinformationen und eine Schaltfläche, die besagt, bitte einloggen oder registrieren. Nun, das war nicht schrecklich. Es war auch nicht so toll. Werfen wir einen kurzen Blick auf die aktualisierte Version. Die kurze Notiz über die Liefermethode ist hier und der Aufruf zur Aktion ist klar, wie Tag, Sie müssen nicht scrollen oder bewegen Sie Ihren Blick ist genau da. Es ist das Wichtigste auf der Seite. Was den Inhalt des Warenkorbs betrifft, wurde dieser in der Spalte auf der rechten Seite verschoben. Du wirst in einer Minute sehen, warum das der Fall ist. Die Schaltfläche, auf der normalerweise „Bestellung aufgeben“ steht, wird jederzeit angezeigt, aber im Moment ist sie grau und nicht anklickbar, da wir nicht angemeldet sind. Der Text sagt etwas in der Linie von, bitte füllen Sie alle Ihre Informationen. Unterschiede zwischen diesen beiden sind minimal, aber ziemlich wichtig. Die Info-Spalte war eine Quelle der Ablenkung. Wenn der Benutzer eine Bestellung aufgeben möchte, müssen Sie dies so kurz wie möglich machen, die Kasse zu einem Kinderspiel kurz und süß machen. Was das Layout selbst betrifft, ist die Registrierung oder Anmeldung die wichtigste Aktion auf der Seite. Das Anheben dieser Taste ist das Richtige. Das ist, dass, wenn Sie sich anmelden, das ist, wo die größten Änderungen aufgetreten sind. In der alten Version hatten Sie Folgendes. Alle Ihre Produkte sind hier aufgereiht. Grundsätzlich enthält eine Bestellung mindestens 34 Produkte. Sonst gesagt, dieser Bereich ist oft ziemlich umfangreich. Dies schiebt den gesamten Inhalt hier nach unten. Die Schaltfläche Order platzieren, die rote nukleare Launch Last, die alles geschieht, ist nirgends zu sehen. Das ist der ganze Weg hier unten. Sie daran, dass ich bei 2560 von 1440 aufnehmen, was bedeutet, dass ich mehr von der Website im Vergleich zu einem Standard-Benutzer-Add-on 1920 von 1080 sehen kann. Full HD ist überhaupt die Norm. Aber auch ich kann es nicht sehen, weil dieser Knopf nicht offensichtlich ist. Dies schafft eine Menge Verwirrung. Um der Flamme Kraftstoff hinzuzufügen. Die meisten Benutzer wussten nicht, was sie tun mussten. Vielleicht scheint es dir offensichtlich. Wenn Sie einen Ansatz von oben nach unten machen, können Sie sehen, dass hier ein Nether ist. Hier steht Kontaktinformationen. Bitte fügen Sie Ihre Daten hinzu. Darunter. Da steht die Lieferadresse. Bitte fügen Sie Ihre Daten hinzu. Am nächsten Liefertag wählen Sie bitte den Tag geliefert haben und so weiter. Nun, wieder, das scheint nicht so schlimm zu sein. Aber wenn Sie den Kurs bis jetzt folgen, haben Sie vielleicht daran erinnert, dass ich so etwas wie 300 Anzeigen in den Warenkorb mit einer einzigen erfolgreichen Kasse hatte . Offensichtlich war das ein Problem. Hier ist, wie ich die Kasse verbessern. Zuerst habe ich drei verschiedene Bereiche geschaffen. Diese haben ihre eigenen weißen Rechtecke sowie eine Zahl, die diese Reihenfolge bestimmt. Wenn das nicht klar genug war, beschränkte entweder den Zugriff auf Abschnitte auf den Eintrag. Deshalb ist alles ausgewaschen. Sie können auf nichts klicken, da wir Ihre Informationen nicht haben. Muss sich der Benutzer auf diesen Bereich konzentrieren? Hier gibt es zwei große orangefarbene Knöpfe, die auffallen. Sie sagen „Info hinzufügen“. Auf der linken Seite sehen Sie ein paar rot markierte Dinge, Ihren Namen, Ihre Telefonnummer und Adresse. Das soll dir zeigen, dass die Dinger fehlen. Klicken Sie auf die erste Schaltfläche, Pop-up erscheint, geben Sie Ihren Namen und Ihre Telefonnummer ein. Und darum geht es. Jetzt können Sie Ihre Reise fortsetzen. Ich habe die Entscheidung getroffen, die Farbe der Tasten in Blau zu ändern. Dieser Text ist auch anders. Jetzt heißt es ändern, um dem Benutzer zu sagen, dass es alles gut ist. Adresse am nächsten Tag. Denn wieder gab es nichts anderes, auf das er klicken konnte. Dieser Schritt für Schritt nähert sich, fast narrensicher. Als Nebenanmerkung basierend auf der ausgewählten Region, berechnet mein System basierend auf der ausgewählten Region, Stadt und Adresse automatisch die Versandkosten. Während ich mehrere Versandoptionen basierend auf der Adresse des Kunden habe, sind nur einige verfügbar. Um zu verstehen, warum das bahnbrechend ist, müssen wir uns die alte Version ansehen. Hier. Als neu registrierter Benutzer zeigt Ihnen das System die maximalen Lieferkosten an. Offensichtlich war das nicht ideal. Aus irgendeinem Grund zeigte sich die Seite standardmäßig oder Kosten , die dreimal so hoch sind als die reguläre. Stellen Sie sich $30 statt $10 vor. Das ist ein großer Unterschied. Dieses Ding allein ließ viele Leute ihre Bestellung aufgeben. Nun, versichert, wenn Sie die Schritte durchlaufen haben, zuerst geben Sie Ihren Namen und Ihre Telefonnummer ein, dann fügen Sie Ihre Adresse hinzu, die übrigens einen zusätzlichen Klick für den absolut keinen guten Grund erfordert. Dann yap, nach all dem, würden Sie einen genauen Preis bekommen. Der Preis würde sich ändern. Aber die Benutzer sind die Supermodels. Sie haben keine Zeit, Dinge herauszufinden. Sie wollen nicht denken oder füllen Sie Formulare in der Hoffnung, dass vielleicht der Preis wird sich ändern, wird niedriger werden. Aber gehen wir zurück zur aktualisierten Version. Nachdem ich meine Adresse gesagt habe, wird die Website aktualisieren und mir zeigen, was wir die beiden anderen Abschnitte deutlich sehen können, beide sind jetzt aktiv, weil die Reihenfolge Ihrer Aktionen jetzt nicht wirklich Materie. In Abschnitt 3 wählen Sie die Art und Weise, wie Sie entweder bar bezahlen möchten , gegen Aufpreis, oder auf eine Kreditkarte. Diese Symbole, obwohl sie vielleicht nicht so aussehen, sie sind fantastisch. Sie bauen Vertrauen auf. Sie zeigten den Namen einer sehr beliebten Kreditkarte, die in Rumänien betrieben wird. In der alten Version war das nicht der Fall. Sie können Artikel zu diesem Thema finden, aber kurz gesagt, diese Symbole zu zeigen, ist unglaublich wichtig. In der alten Version, Sie werden Optionen tatsächlich hinter der Dropdown-Liste versteckt. Der Benutzer musste also etwas mehr arbeiten, um zu diesen Informationen zu gelangen. Während ein Klick nicht als harte Arbeit betrachtet werden kann, ist es immer noch eine Unannehmlichkeit, genau wie die neue Adresse erscheint, wo Sie auf die Schaltfläche klicken mussten , bevor Sie das Formular tatsächlich gesehen haben. Setzen Sie diese Straßensperren nicht. Eigentlich bist du als Designer und ich bin sicher, dass du sie nicht entwerfen wirst, aber du musst die Codierungsfirma in Schach halten. Die Benutzer schätzen die zusätzliche Reibung nicht. Auf diesem Weg fortsetzen. Das war ein Ort im alten Design, wo man ein paar Notizen hinterlassen konnte. In der alten Version mussten Sie hier klicken und das hat das Pop-up aufgefordert. In der neuen Version wird das Feld bereits angezeigt. Es ist nicht obligatorisch, aber Sie wissen, Sie können es bei Bedarf verwenden. Die Hand ist auch nützlich. Es sagt etwas in der Linie von allem, was über die Bestellung zu beachten ist. Schließlich sind alle anderen unter dem Ort dieser Last. Dies sagt Ihnen, wenn Sie keine Zahlungsmethode verwendet haben oder wenn die Mindestbestellmenge nicht erfüllt wurde, indem Sie sie auf der rechten Seite gruppieren, erfährt der Benutzer, dass dies der Ort ist, den er überprüfen muss. Ein alternativer Ansatz besteht darin, die Fehler in Zeile anzuzeigen, also neben diesem Bereich. Wenn die Zahlung nicht ausgewählt ist, können wir es direkt hier anzeigen. Aber ich habe absichtlich alles hier platziert weil der Benutzer weiß, dass dies der Start-Button ist. Hier steht die Bestellung aufgeben. Wenn die graue Farbe Ihnen nicht sagt, dass etwas nicht stimmt, sollte diese Meldung den Willen bezüglich der rechten Spalte geben. Das ist immer im Blick. Der Gesamtbetrag kann sich je nach Auswahl ändern. Es gibt eine Lieferoption, die zehn kostet, lag, eine andere, die 15 ist. Aber auch ein drittes, das 30 ist. Übrigens, ist die Währung hier in Rumänien. Dass es einen Zuschlag gibt, falls Sie Bargeld bezahlen wollen. Indem Sie hier alles zeigen, können Sie Ihre Gesamtzahl jederzeit deutlich sehen. Transparenz, Vertrauen, das sind wichtig, Sie wissen jederzeit, was passiert. Und wenn Sie Ihre Mengen ändern, wieder, die Summe ist genau hier. In der alten Version war das nicht der Fall. Sie mussten ständig nach oben scrollen und die Gesamtsumme jedes Mal überprüfen, wenn Sie etwas gewählt haben, sei es die Zahlungsmethode des Liefertermins, oder Sie haben Ihre Menge angepasst. Das war verdammt frustrierend. Das ist UX. Dies ist der Prozess, durch den Sie über Ihre Benutzererfahrung nachdenken und Sie verbessern es. Ich wusste, dass aufgrund dieser Facebook-Werbekampagne etwas nicht stimmt, aber auch für Live-Chat und die Telefonanrufe, die ich erhalten habe. Die Leute haben gekämpft. Nun, es war leicht, sie zu entlassen, weil sie nicht das Gehirn hatten, um den Computer richtig zu bedienen oder eine Webseite zu lesen. Ich habe mich demütigt, er schaute sich ihr Feedback an und ich versuchte, mein Design zu verbessern. Es ist wichtig, dass du zuhörst. Es gab kein Ego. Ich habe es an der Tür gelassen. Wichtig ist, dass ich im Checkout-Prozess Punktpunkte gefunden habe und versucht habe, sie zu beheben. Bisher haben sich meine Verkäufe verdoppelt. Und trotzdem gibt es noch mehr Raum für Verbesserungen. Aber das ist eine Geschichte für ein anderes Mal. 73. Verbessere die mobile Version auf die double: Willkommen zu einem anderen Teil meiner Liste der Aedes, durch die ich meine Verkäufe verdoppeln konnte. Diesmal konzentrieren wir uns auf die mobile Version der Homepage. Während ich eine Android-App habe, besucht ein großer Teil meines Publikums meine Website, um dort zu tun, die Telefone, erstaunliche 85% der Besucher verwenden ein mobiles Gerät. Die meisten von ihnen kommen von Facebook- und Instagram-Anzeigen, vor allem weil es billiger ist. Aber das ist eine andere Geschichte. Um die Website und den mobilen Modus zu sehen, oder Sie tun müssen, öffnen Sie die Konsole des Browsers. Sie können dies tun, indem Sie F2 L auf Ihrer Tastatur drücken. Oder Sie können mit der rechten Maustaste klicken im neuen Fenster auf Inspect drücken. Suchen Sie nach diesem Symbol. Wie in den vorherigen Videos, Firefox zeigt die neue Version, Chrome, die alte. Hier ist, wie die Website vor ein paar Wochen aussah, als Sie nichts in Ihrem Warenkorb hatten, Sie kaum einen halben Pfannkuchen gesehen haben. Nicht ideal mit irgendwelchen Mitteln. Dieser Text, die Tasse, eine gute 40% des Bildschirms Immobilien. Das war furchtbar. Und wenn der Benutzer den Bildlauf stoppt, würde er nur die Standard-Registerkarte sehen, in diesem Fall die Pfannkuchen-Kategorie. Offensichtlich konnten Sie Backups scrollen und Kategorien ändern, aber der gesamte Ansatz war schwierig. Schön, alle meine Produkte zu sehen, die Sie ernsthaft durchstöbern mussten. Wir reden von Minuten der Erkundung. Aber wie wir mittlerweile wissen, haben die Benutzer diese Art von Patienten nicht. Außerdem ist in diesem Design alles viel zu ausgestreckt. Während jedes Element mit erfordert eine anständige Menge an Atemraum, das ist viel zu viel bekommen, um ein einzelnes Produkt zu sehen und was ein drittes, das ist jetzt großartig. Das ist also das alte Design. Jetzt schauen wir uns das neue an. Das ist viel mehr wie es. Nun, wir haben immer noch eine ziemlich große Menge an Text. Sie erhalten fast vier Produkte zu sehen. Ich werde in dieser zweiten Reihe sein, die vollständig sichtbar ist. Sie bekommen immer noch einen großen Teil dieser Bilder zu sehen , was ausreicht, um Ihre Aufmerksamkeit zu erregen. Dies ist viel mehr wie es mit einem einzigen Scroll, Sie erhalten, um den Inhalt einer Kategorie zu sehen. Und weil die Schriftrolle so kurz ist, haben Sie kein Problem, diese Dropdown-Liste zu finden. Wenn ich ehrlich bin, hätte ich die feste Kategorie Dropdown bevorzugt. Aber vielleicht wird es Version 3 geben. Wir werden sehen, nun, ich werfe ständig das Wort wichtig aus. Ich glaube wirklich, dass das ein Spielwechsler war. Die erfahrenen Benutzer drastisch wenden sich zum Besseren. Ganz zu schweigen davon, dass es in Kombination mit dieser JavaScript-Funktion zum Warenkorb viel einfacher ist, Ihre Karte aufzufüllen. Sprechen wir darüber, Werfen wir einen Blick auf die alte Website. Wenn der gelbe Balken sichtbar wird, sehen Sie kein Produkt mehr. Nur ein bisschen von diesem grauen Kreis. So wurde das Design codiert. Technisch gesehen, ja, es ist ansprechbar. Aber haben die Programmierer gute Arbeit geleistet? Weit davon entfernt. In der aktualisierten Version entschied ich mich, den gelben Balken zusammen zu zerlegen. Das liegt daran, dass die Kopfzeile fixiert ist und das Warenkorb-Symbol neben dem Hamburger-Menü platziert werden sollte. Das macht viel sinnvoller. Betrachtet man es aus der Ferne. All diese Veränderungen scheinen so grundlegend zu sein. Es ist gesunder Menschenverstand. Aber das passiert während des Codierungsprozesses. diesem Grund benötigen die meisten Projekte einen Manager, jemanden mit Erfahrung, der das Team der Programmierer betreuen kann. Und auf der anderen Seite, jemand, der das Design-Team anweisen kann, bestimmte Lücken zu füllen. Am Ende des Tages wirst du wahrscheinlich ganz alleine arbeiten. Und es ist unwahrscheinlich, dass Sie sich mit einem Projektmanager beschäftigen, wenn Sie an Projekten arbeiten, die ein Budget von sagen, unter 3000 Dollar. Der beste Rat, den ich Ihnen geben kann, ist, viel zu studieren und Ihr UX-Spiel zu erhöhen. Denken Sie daran, dieses schöne Design ist nichts wert, wenn Besucher kämpfen, es zu benutzen. Und während Sie immer Ihr Bestes tun, muss der Kunde die Website starten und mit bestimmten Analysen und Änderungen zurückkommen . Obwohl ich froh bin, dass sich meine Verkäufe verdoppelt haben, denke ich immer noch, dass es Raum für Verbesserungen gibt. Können meine nächsten Änderungen es noch verschlimmern? Kurz, das kann passieren. Übereifrig zu sein ist eine Sache 100%. Aber wenn du Angst vor Tests hast, wirst du nie Fortschritte machen. Mit dem gesagt, ich hoffe, dass Sie Kunden eine bessere Codierungsfirma haben werden. Lassen Sie uns als nächstes in der folgenden Vorlesung über die Liebe zum Detail sprechen. 74. 7 tweaks mit den Details: Willkommen zurück auf dem Kurs. Ich möchte mit verschiedenen Dingen gehen, die ich auf meiner Website verbessert habe und das sind alles kleine Details. Das meine ich mit Liebe zum Detail. Erstens, die offensichtlichste Sache, das Symbol in den Warenkorb. Während der alte sah sperrig, es traf mich, dass einige Leute annehmen könnten, dass du darauf klickst und du wirst auf den Warenkorb Bildschirm gebracht werden. Schließlich passiert das, wenn Sie hier klicken. Also dachte ich, das muss aufgeräumt werden. Und sie liebten diese kleinen Verbesserungen weil sie buchstäblich Minuten brauchen, um zu implementieren, aber die Gesamterfahrung bei der Nutzung der Website steigt. Also, das ist Nummer eins. Nummer zwei, ich entschied mich, diese Immobilie voll auszuschöpfen. Während der Kreis schön aussieht, ist es keine effiziente Nutzung des Raumes. Anfangs war ich wirklich stolz auf meine minimalistische Website und diese Kreise haben ein bisschen etwas anderes hinzugefügt. Ich könnte für sie den ganzen Tag argumentieren, aber die neue Version zeigt eine viel verbesserte Browser-Erfahrung. Sie erhalten, um mehr von den Produkten zu sehen. Und mit diesem Anstieg der Bildschirm Immobilien, Ich beschloss, verschiedene Grafiken hinzuzufügen. Insgesamt ist dies eine Netzliste und das sind USP-Alleinstellungsmerkmale. Sie sagen Dinge wie kein Zucker, kein gekochtes ODS, belgische Schokolade und so weiter. Also eine kleine Design-Wahl, die einen großen Unterschied machte. Weiter, Nummer drei, ein bisschen umstritten. Ich habe meine Schriftart geändert. Anstelle von neuem Nieto. Ich entschied mich für die Knotenplatte namens Zillow Slab. Die Argumentation dahinter ist einfach. Serif-Schriftarten neigen dazu, auf Mobiltelefonen besser aussehen. Grundsätzlich wegen dieser erheblichen Statistik verwenden 85 meiner Besucher Mobiltelefone. Ich beschloss, ihre Leseerfahrung auf die Westserifen-Schrift zu verbessern. Im Grunde all diese kleinen Details, die zu einer Serifenschrift hinzugefügt werden , machen das Wort leichter zu erkennen, unverwechselbarer. Wie Sie wahrscheinlich wissen, lesen wir das Wort Brief für Brief nicht. Wir scannen es und basierend auf seiner Form haben wir herausgefunden, was es ist. Nun, wieder, das ist nicht 100% sicher, ist keine harte Wissenschaft, aber es gibt ernsthafte Gründe zu glauben, dass Serifenschriftarten sind leichter zu lesen. So ist die Veränderung. Nummer vier, ich habe das Tab-System aus dem Inneren des Produkts verworfen. Hier ist die Schaufel. Ein riesiger E-Commerce-Store hier in Rumänien verwendet diese Registerkarten. Aber die Art und Weise, wie sie funktionieren, ist, dass Sie auf sie klicken und Sie scrollen Sie nach unten zu einem bestimmten Abschnitt. Aus technischen Gründen konnte ich diesen Scroll nicht auf meiner Website bekommen. Also landete ich mit regulären Tabs. Das Problem ist, dass ich immer wieder die gleichen Fragen über die Versandkosten, wie das Produkt gelagert werden sollte, welche Temperatur, Ablaufdatum, Nährstoffinformationen, und so weiter die Arbeit. Diese wurden alle in separaten Registerkarten angezeigt. Mein erster Denkprozess bestand darin, die Menge an Informationen zu begrenzen , damit der Benutzer nicht überfordert wird. Nun, das hat nicht so gut geklappt. In der aktualisierten Version entferne ich jedoch die rechte Spalte, die allgemeine Informationen über das Unternehmen enthält. Und ich habe den Ernährungstabelle hierher verschoben. Darüber hinaus habe ich die Bewertungen unter der allgemeinen Beschreibung hinzugefügt. Um also ein paar Schriftrollen zu machen, könnten Sie leicht zu ihnen kommen. Nummer fünf, ich entschied mich, eine spezifische Bewertung für jedes Produkt hervorzuheben. In den meisten Fällen geben die Menschen einen Daumen nach oben oder einen Daumen nach unten. Sie schreiben vielleicht ein paar Worte, aber das war's. diesem Grund sind die meisten Bewertungen unterwältigend, dass nicht wirklich hilfreich. Und sozialer Beweis ist eine riesige Sache. Deshalb habe ich meine Entwickler gebeten, zwei Textfelder für jedes Produkt hinzuzufügen. Ich könnte dann die besten Bewertungen für das Produkt suchen und sie auf eine andere Weise zeigen. Nun, das ist noch im Gange. Ich bin auf der Suche nach den Einflüssen mit Gewicht sehr gut bekannt, die das Angebot für jedes Produkt bieten können. Nummer 7, eine kleine, aber wieder, riesig. Ich habe die Live-Chat-Frage geändert, bevor sie so etwas wie „Ich bin hier“ sagten. Jetzt steht: Haben Sie eine Frage? Obwohl es nicht nach viel klingen mag, gelang es, die Anzahl der Gespräche zu erhöhen. Und mehr Gespräche bedeuten in der Regel mehr Umsatz. Und das änderte den Anruf. Aber zwei Sekunden, übrigens, der Dienst, den ich benutze, heißt Chandra. Ich habe viel Zeit damit verbracht, den richtigen für mein Geschäft zu finden, nicht denke, dass dieser hier ziemlich okay ist. Insgesamt sind dies einige der kleinen Dinge, die ich getan habe, um mein Design zu verbessern. Individuell. Sie scheinen nicht wichtig zu sein. Aber wenn Sie sie alle zusammen hinzufügen, erhalten Sie ein besseres Einkaufserlebnis. Und am Ende des Tages, das ist es, was zählt. Die meisten. 75. Die Seite auf dem mobilen Produkt verbessern: Willkommen zurück zu einem weiteren Vortrag darüber, wie ich meine Website verbessert habe. Die mobile Version der Homepage war wichtig, um die Anzahl der Bounces zu reduzieren, also die Menschen, die die Website gesehen haben und sofort verlassen. Der nächste Schritt ist, eine großartige Produktseite zu haben. So können diejenigen, die die geringfügigen Interessen gezeigt haben, die Informationen erhalten, die sie benötigen, um eine Entscheidung zu treffen. In der alten Version fiel alles los. Sie einen Blick auf diesen leeren Raum an der Spitze. Es macht keinen Sinn. Oder dieser unsichtbare Ring, der den Galeriebereich umgibt. Der Abstand war überall und noch mehr als das, bestimmte Dinge wurden nach vorne und in die Mitte gebracht, obwohl sie keinen Sinn ergeben. Zum Beispiel, diese Breadcrumbs in der Desktop-Version, sicher, sie sind in Ordnung, aber hier smack in der Mitte der Seite, völlig nutzlos. Was die Social-Media-Symbole betrifft, so senden sie Sie nicht zu unseren Profilen. Stattdessen werden sie verwendet, um diese Seite mit Ihren Freunden zu teilen. Auch hier, na ja, das kann in der Desktop-Version nicht schaden. Hier. Es ist in der Art, wie der Titel, es ist abgeschnitten. Du weißt also nicht wirklich, was es wert ist. Bewegen Sie sich nach unten die Mengenauswahl ist Subbar, Lassen Sie uns es so sagen. Und diese drei Tabs, naja, da zahlen die USA. Sogar für mich ist es wirklich verwirrend. Nun, ehrlich gesagt, das ist ein Board-Design. Sie brauchen keine zehn Jahre Erfahrung in UX, um herauszufinden, dass dies nicht ideal ist. Wahrheit ist, dass Sie sich auf die großen Dinge konzentrieren und dann arbeiten Sie Ihren Weg nach unten. Nachdem die Website gestartet wurde, wusste ich, dass sie nicht perfekt war. Also habe ich eine Summe Geld für diese kleinen Dinge beiseite gelegt, die sortiert werden mussten. Ich war nicht überrascht von der Tatsache, dass es Probleme gab. Ich wurde von der Anzahl der Probleme erwischt, die ich entdeckt habe. Ach, Und als Sie das Produkt hinzugefügt haben, echter Cop, wenn Sie blinzelten, wussten Sie nicht, was passiert ist. Die Seite wird aktualisiert und das war's. Es gibt keinen Hinweis, ob diese Schaltfläche funktioniert und wie Sie vorgehen sollen. Also insgesamt, eine Menge Probleme, die ich wirklich nicht erwartet hatte. Die Anzahl von ihnen war absolut ginormös und wird zur neuen Jungfrau. In erster Linie habe ich den Raum effektiv besetzt. Das Galiläa ist viel größer, als wenn man nicht das Gefühl hat, dass es eng ist. Die Produktbewertungen sind kleiner, aber immer noch sehr sichtbar. Außerdem erhalten Sie jede Menge Informationen, ohne scrollen zu müssen. Und in den meisten Fällen sehen Sie tatsächlich die Schaltfläche „In den Einkaufswagen“, ohne dass Sie 1-Bit scrollen müssen. Ich habe kürzlich dieses Tag im Titel hinzugefügt, und das tut, obwohl die Dinge deaktiviert sind. Aber in den meisten Situationen ist die Schaltfläche sichtbar. Wenn du nach unten ziehst, wirst du mit einer sehr hohen Seite getroffen. Das ist wahr. Aber es ist einfach zu bedienen. Nun, es ist nicht perfekt. Ich denke immer noch, dass es Meilen vor der ursprünglichen Version ist. Und das ist, wo die Serifenschrift wirklich glänzt. Ich verbrachte eine lange Zeit mit der Zeilenhöhe , so dass die Textfelder luftig und leicht zu lesen. Ich glaube, ich habe einen guten Job gemacht. Und am Ende des Tages bin ich froh, dass ich es geschafft habe. Während ich es ein bisschen größer gemacht haben könnte, habe ich das Gefühl, die meisten Leute gehen durch und sie werden nach wichtigen Dingen wie Ablaufdatum, Bewertungen oder Ernährungsinformationen suchen . Sie wieder nach oben gehen, ist der Mengenregler alles in einer Zeile. Ich musste diese Informationen über die Portionsgröße verkleinern, aber alles fließt gut. Und wenn Sie auf die Schaltfläche klicken, erhalten Sie etwas, das als Toast bezeichnet wird. Ein kurzer Hinweis, der Ihnen sagt, alles ist in Ordnung. Ich hätte eine Art von Bekanntmachung bevorzugt , die Ihre Aufmerksamkeit auf den Kopf von zwei richtet. Aber es sind alles Babyschritte. Insgesamt ist der Vergleich dieser beiden Entwürfe Tag und Nacht. Sie könnten nicht anders sein. Die Art und Weise, wie ich all diese Bearbeitungen durchführte, bestand darin ständig mit dem Programmierer zu sprechen und Screen-Sharing-Sitzungen durchzuführen. Ich denke, das ist ein Thema an sich. Also lasst uns das in der nächsten Vorlesung aufschlüsseln. 76. 1-1-Sitzung mit einem Coder.: Willkommen zu diesem Vortrag, wo ich über den Prozess der Verbesserung einer Website sprechen möchte. In den letzten paar Videos hast du gesehen, wie ich meine Website und danach mein Geschäft völlig verändert habe. Wie passiert das? Nun, zuerst müssen wir die Art der Arbeit trennen, die erledigt wird. Stellen Sie sich vor, Sie möchten das Haus renovieren. Es gibt kosmetische Sachen wie das Ändern der Farbe der Wände, Hinzufügen neuer Möbel und das Verschieben von Dingen. Und dann gibt es strukturelle Arbeiten wie das Entfernen einer Wand, um einen offenen Raum zu schaffen. Es ist das Gleiche bei Webseiten. Zum Beispiel ist die mobile Version der Produktseite viel kompakter. Das geschieht durch CSS. Es optimiert Pads, Ränder, Schriftgrößen und verschiedene andere Dinge. Sein vorhandener Code, den Sie anpassen, wo ein paar Zeilen, die Sie hinzufügen. Aber insgesamt ist das rein kosmetisch. Unter dem gleichen Dach können wir die neue Serifenschrift, die hervorgehobene Textbehandlung, das Symbol zum Warenkorb hinzufügen und so weiter hinzufügen. Auf der anderen Seite fügen Sie zwei Textzeilen für jedes Produkt hinzu, das strukturell ist. Das erfordert eine andere Art von Ansatz. Nun, es scheint lächerlich li einfach zwei Textfelder pro Produkt hinzuzufügen. Dies wird tatsächlich am besten von der Firma gemacht, die die Website erstellt hat. Der Freiberufler zögerte, ihn einzuspringen und zu ändern , da die Datenbank in einer bestimmten Weise strukturiert ist. Als Hinweis wird der gesamte Website-Code in einer universellen Sprache mit Kommentaren in Englisch geschrieben. Trotzdem ist es, als ob jemand anderes die Dusche benutzt. Sicher haben Sie eine Dusche die neuere Heimat, aber Sie haben es gewählt, Sie wissen, wie Sie es in jemand anderen Dusche verwenden, obwohl die Prinzipien sind die gleichen. Sie können überrascht sein von dieser oder jene Schwierigkeit ist nicht wirklich die Frage hier. Es geht mehr darum, schalten zu müssen. Idealerweise erledigen Sie die strukturelle Arbeit. Das Team packt seine Koffer und geht raus. Dann kommt das Kosmetikteam ins Spiel. Das ist die ideale Situation. Aber das erfordert einen guten Überblick über den gesamten Prozess. Und die Chancen sind, dass Sie nicht die Erfahrung dafür haben werden. Keine Sorge. Solange Sie auf die Illustration vorbereitet sind, wird es Ihnen gut gehen. Ehrlich gesagt, das ist der beste Rat, den ich dir geben kann. Die ganze Zeit passieren schlimme Dinge. Wie Sie reagieren, ist das Einzige, was unter Ihrer Kontrolle steht. Zurück zum Web-Design, Ich stellte sank es, der indische Freiberufler, um mir mit all den losen Enden zu helfen, die ich entdeckt. Wir sprachen über Skype und er richtete einen lokalen Server ein. Dies wird manchmal als Staging- oder Sandbox-Modus bezeichnet. Unabhängig vom Namen, die Idee ist mit der Arbeit an einer Kopie. Wenn etwas schief geht, die Website für die zahlenden Kunden nicht heruntergefahren sein. Zum Team-Viewer oder zu einem beliebigen Schreibtisch. Er hat ständig Änderungen von meinem Computer vorgenommen. Es war ein sehr zeitaufwändiger Prozess. Ich würde das Inspect-Tool verwenden und ich würde selbst etwas CSS schreiben , damit ich näher an das komme, was ich will. Ich würde meinen Bildschirm teilen und ihm zeigen, was ich mit größerer Zeilenhöhe meinte. Als mein CSS Wissen zu begrenzt war, habe ich einen schnellen Screenshot erstellt und das Bild in Photoshop bearbeitet. Ziegel für Ziegel, Aufgabe für Aufgabe. Wir haben gearbeitet, bis wir fertig waren. Nach etwa 30 Bearbeitungen schieben wir den Code auf die Live-Version der Website. Die großen Codierungsfirmen überwachten den Push. Das ist, obwohl wir nur an kosmetischen Sachen gearbeitet haben. Aus welchem Grund auch immer, die Dinge brechen die ganze Zeit ohne ersichtlichen Grund zusammen. Deshalb ist es am besten, eine Art von Aufsicht zu haben. Nachdem meine Änderungen am Leben waren, die Codierungsfirma ihre Arbeit speziell als Beispiel getan, sie haben diese hervorgehobene Rezension eingefügt. Hinweis: Ich habe sie nicht nach einem System gefragt, für das ich eine bestehende Rezension auswählen und auszeichnen würde . Beachten Sie, dass das teurer, komplizierter wäre. Stattdessen habe ich nach zwei Textfeldern pro Produkt gefragt, die, wenn sie leer gelassen werden, nicht angezeigt werden. Ich habe das getan, weil ich dachte, dass neue Produkte keine Bewertungen haben würden und ich keinen MD-Abschnitt wollte. Ich habe aus meinen vergangenen Fehlern gelernt und ich erwarte, dass das Schlimmste. Als Randnotiz wurden diese Felder in das Back-End eingefügt , da diese Produktseiten nicht statisch sind. Andernfalls, wenn ich 20 Produkte habe, werden Sie nicht 20 Dateien auf dem Server finden. Eine für jedes Produkt, das ich eingeben und etwas hinzufügen würde. Speziell diese Felder, nein, stattdessen werden diese Seiten aus dem Backend generiert. Wir werden jetzt der Codierseite der Dinge nahe kommen. Und ich will nichts erklären, ich begreife mich nicht ganz. Tatsache ist, ich wollte, dass es richtig gemacht wird. Der Indianer sank es könnte etwas als eine vorübergehende Lösung getan haben, aber ich wollte Best Practices verwenden und eine solide Grundlage haben. Deshalb musste ich die große Holdinggesellschaft nutzen. Nachdem sie ihre Rolle beendet hatten, kam der Freiberufler wieder ins Spiel in Screen-Sharing. Wir haben diese beiden Textebenen nach Herzenslust gestylt. Denken Sie daran, dass dieser gesamte Prozess etwa vier bis fünf Wochen dauerte, zumeist, weil jeder beteiligte Teil beschäftigt war. Ich bin eigentlich der Direktor des Unternehmens, also habe ich eine Menge Dinge zu tun, um das Geschäft tatsächlich zu führen, Interviews zu halten, Leute zu engagieren, sie zu bezahlen, Verfahren zu sitzen, Qualitätskontrolle, und so weiter. Die Firma Vicodin hatte Projekte im Wert von vier als fünf Ziffern. Warum sollten sie einen ihrer Programmierer abstellen, um auf mein winziges Projekt für das mickrige Paar von $100 zu springen . Was den Freiberufler betrifft, springt er von Natur zu Projekt, aber offensichtlich bevorzugt er größere, die besser bezahlen. Kurz gesagt, das ist keine ideale Situation für niemanden. Aber solange Sie wissen, was Sie wollen und Sie die Liste im Voraus vorbereiten. Die Anrufe über Mikrofon und Bildschirmfreigabe sollten kurz und süß sein. Insgesamt haben wir in den letzten Wochen wohl etwa 30 Stunden damit verbracht, miteinander zu arbeiten und zu sprechen. Ich hoffe, all diese Informationen waren hilfreich und jetzt haben Sie eine bessere Vorstellung davon, was hinter den Kulissen vor sich geht. Wenn Sie Fragen haben, bin ich immer auf diesem Kurs, also lassen Sie es mich wissen. 77. Was kommt als Nächstes?: Herzlichen Glückwunsch, du hast es geschafft, bis zum Ende zu kommen. Ich hoffe, dieser Kurs war das, was Sie erwartet haben und noch mehr. Der nächste Schritt ist, Ihre Lernreise fortzusetzen und so viel wie möglich zu üben. Auf der anderen Seite, ein großartiger Designer zu werden, geht es auch um die Zahlen. Sie können nicht erwarten zu arbeiten und jetzt es, aber wir können großartig darin sein. Sie müssen die Zeit setzen und es spielt keine Rolle, an welchem Projekt Sie arbeiten möchten. Stellen Sie einfach sicher, dass Sie weiter arbeiten. Vielen Dank und wir sehen uns im nächsten Kurs.