So entwirft man eine Website - Teil 1

1. Hallo: Also brauchen wir Christine. Ich muss meine Flatiron-Schulabsolventin nicht weiter gestalten und habe einen Hintergrund in Visual Design, Training, Strategie, Marketing und Werbung. Und ich verließ das Parlament, lehrte mich, wie man kodiert. Alles, was ich sehe Quellen, natürlich, ist so ein noch verknallter Still Shared Code Academy Connick Kopf nach unten mich und viele andere. Wenn Sie mehr über meine Gedanken zum Tech-Design erfahren möchten, können Sie den Link unten sehen, unter dem mein Blog ist. Und wenn Sie mehr über mich und meine Projekte in meiner Arbeit wissen wollen, können Sie meine Website besuchen. Nicht unten zusammen mit Jacob, damit du einen Freitag meines Volkes sehen kannst. Vielen Dank, dass Sie an diesem Kurs teilgenommen haben. Ich hoffe, Sie erfahren mehr. Über welches Entwicklungsdesign. Lasst uns 2. Kurseinführung: Hallo und willkommen, wie man eine Website zu entwerfen. Dies ist meine erste Unterrichtskosten auf sicheren Anteil, Also ich hoffe, ich umfasste Sie die besten Kenntnisse und Fähigkeiten darüber, was Designs mit dem Design aus zwei Mentholen. Im Rahmen dieser Klasse erfahren Sie mehr über den Entwurfsprozess. Hat geholfen, ein Markenprofil zu erstellen. Warum sind Freeman Prototyping-Techniken und welche Seitenlayouts durch ein Responsive Design, die Gesamtsumme mit unserem B X D vorgesehen und Google ziehen? Alle sind freie Teams. Bitte signieren Sie es mit Adobe Creative Cloud Toe-Zugriff. Es wird X'd sein. Wir werden dieses Tool verwenden, um unsere Drahtrahmen und Prototypen zu entwerfen. Wenn Sie daran interessiert sind, zu lernen, wie man und dann wird es Software funktioniert. X wäre eine großartige Einführung. Adobe ist der Hersteller, Floater Shop und andere tolle Probleme. Da Photoshopped und andere APS mit dem Preis kommen, ist X'd völlig kostenlos. Alles, was Sie tun müssen, ist auf diese Schaltfläche klicken Sie hier auf dieser Website. Ich bringe Sie zum Adobe Creative namens Sign of Age. Bitte melden Sie sich für envision bei Los Well an, wir werden dieses Tool verwenden. Far Food Courts. Es ist völlig kostenlos und vorstellen, hat ein Tool für Prototyping, aber für diesen Kurs wird mit dem Deal bleiben. BXC, für Prototyping und Vorstellungen würde für unsere Mood Boards verwendet werden. Es ist wirklich einfach, obwohl bereits ein Konto haben, sobald ich auf diese Schaltfläche klicke und es wird mich auf meine Homepage bringen . Also in der Zwischenzeit, melden Sie sich bitte für Adobe Creative genannt und vorstellen, dass last but not least, Scougall zeichnen. Wenn Sie noch kein Google-Konto haben, bereinigen Sie bitte. Wir werden Google benutzen. Schnelles Zeichnen. Entschuldigen Sie, Google-Zeichnen. Es ist mehr wie es und von hier wird mit unseren Site-Karten-Tools aus Materialien spielen. Wir werden anfangen, Formulare zu verwenden, die ich selbst erstellt habe. Also, wenn Sie bitte die Web-Design-Prozess Formulare herunterladen und ich habe diese Formulare erstellt, um Ihnen zusammen mit diesem Kurs zu helfen, fühlen Sie sich bitte überhaupt, wie wir durch jede Lektion bewegen, um Ihnen zu helfen, Ihre Website zu entwerfen und entwerfen Ressource ist ich erstellt eine Liste der Recherchen von hilfreichen Websites, um Ihnen bei der Auswahl von Mitteln, Bildern, Farben und anderen Design-Tools zu helfen. Wenn Sie es vorziehen, ist es wie Matt, Ihre Website von Hand. Sie können ausdrucken, dass Design Websites Site-Mapping starten eingereicht, die ich hier habe. Es ist eine blinkende Datei und Sie können Ihr Set starten. Mein Ding. Meine Hand. Dies ist die Design-Websites wie nichts fertig Datei Hier ist das finalisierte nicht miking Tool unseres Projekts. Dies, wenn Sie Condell dies wird ein Weg für Sie sein zu verstehen, wie traurig meine Arbeiten, die später diskutieren werden. guter Letzt möchte ich Sie bitten, Zuguter Letzt möchte ich Sie bitten,den hier eingereichten Dopey X T herunterzuladen. Wir müssen die Datei starten, die mit der Arbeit an unseren Klassenprojekten beginnt. Und dann ist dies die letzte Augenarbeit, dass wir gesehen werden, was wir unser Projekt beenden. Sobald Sie also Ihre Werkzeuge und Materialien eingerichtet haben, beginnen wir mit dem Entwurfsprozess. Wir sehen uns im nächsten Video. 3. Designprozess: den Entwurfsprozess. Der Designprozess hat uns geholfen Ein Problem durch verschiedene Stufen von der Oberfläche des Designprozesses kann so aussehen. Wir beginnen damit, ein Problem zu finden. Um das Problem zu lösen. Wir schaffen viele Ideen war der Planaustausch. Wir gestalten diese Ideen, die sie durch Drahtrahmen von Prototypen strukturieren. Dann bringen wir diese Ideen mit. Trotzdem, das Leben macht Koks. Und wie immer testen wir diese Ideen oder Lösungen für das Problem, um Feedback zu erhalten. Was sind entworfene Prozesse? Komplizierter? Es kann tatsächlich so aussehen. Es gibt viele Kooperationen zwischen Designern, Entwicklern und Forschern. Gemeinsam erwecken sie Ideen, die darauf basieren, wie sich Nutzer verhalten, fühlen und denken. Zu den Schlüsselbereichen gehörten die Benutzerforschung, Benutzererfahrung sowie die Benutzerstrategie und -tests. Und eine ganze Menge Designdenken tut es. Ich denke, er hat einen Prozess zur kreativen Problemlösung von Wolf Design Denken und dass sich der Designprozess ständig ändert. Als Antwort auf Feedback, Wir lernen von Benutzern und Prototypen Zehe Hilfe, neu definieren das anfängliche Problem, neue Ideen erstellen oder bestehende ändern. Nun, da Sie eine bessere Vorstellung davon haben, was der Designprozess ist, beginnen wir mit der Planung unseres Projekts. Wir sehen uns im nächsten Video 4. Benutzer: während der Planungsphase werden wir über Projektskizzen, Markenprofile, User Journey, User Journey, Site-Mapping und visuelles Design sprechen. Je mehr der recherchierte Plan ist, desto mehr können wir gewinnen, was wir beachten sollten. Es ist das Wer und warum, was und wie von Benutzerinteraktionen auf unserer Website während der Who und warum Phasen dachten über unsere Benutzer. Wir fragen, wer vielleicht zu Besuch ist. Werden es Fans, potenzielle Mitarbeiter sein ? Potenzielle Kunden? Zahlen oder neugierig? Die Leute fragten auch Warum wurden sie vermisst? Könnte es zielorientiert oder exploratorisch sein? Bedeutung? Sind sie auf der Suche nach Informationen, benötigen spezifische Dienstleistungen, wollen ein potenzieller Arbeitnehmer oder Arbeitgeber sein? Oder interessieren sie sich nur für die Person, das Produkt, Produkt, Firma oder die Marke? Und sie wollen mehr über etwas oder jemanden erfahren. Nun, für Ihre 1. 2 dio, denken Sie über Ihre Benutzer und warum sie Ihre Website besuchen. Sobald Sie feststellen, dass Ihre Benutzer beginnen, skizziert unsere Website, sehen Sie in der Stadt 5. Projektskizzen: in der Westwand. Haben Sie schon mal Ihre Interaktionen genutzt? Wir richten unsere Projektskizzen hier wir die Fragen beantworten, was sind die Partner der Website-Existenz? Was sind die Aktionsziele für unsere Nutzer und welche Prioritäten oder Ziele haben wir? Wo Websites Art der Aktion Ziele gehören Kontakt anmelden wieder, etwas kaufen, Informationen erhalten, Musik hören, Videos ansehen und mehr Aktion geht, um den Zweck Ihrer Benutzer zu interagieren für Ihre Website. Zum Beispiel ist dies ein Künstler, den ich mag. Ihr Name ist Selena Child. Ich liebe ihre Kunstwerke und Bashing Ziel für mich, wenn ich auf ihre Web-Notlage schaue, ist es, mehr für Kunstwerke zu erfahren, die in ihre Galerie gehen mehr über sie als Person und Künstler lernen. Wenn ich mit ihr in Kontakt treten will, ist das mein Aktionsziel. Wie wir auf ihre Kontaktseite gehen, konzipieren wir Ihnen ein niedliches kleines Bild, eine kleine Abonnement-Mailingliste, die ich zu einem persönlichen Kontakt anmelden kann, wissen Sie am meisten, um Repräsentation, zusammen mit einer Liste von sozialen Medien Konten, zu denen sie ein Teil ist. Also, um Alina Kind kontaktieren, kann ich sie direkt registrieren für ihre Abonnement-Mailingliste oder folgen Sie ihr auf einer dieser Social-Media-Plattformen. Also wäre das Ziel für mich als Nutzerfraktion Ziel, Kontakt zu suchen ein Kind und irgendwohin oder für mein Lager. Ein weiteres Beispiel wäre Spotify. Nehmen wir an, als Nutzer möchten wir uns für Spotify registrieren. Also werden wir auf diesen Button klicken, sobald wir die Website besuchen und wir uns mit Facebook oder melden uns mit einer E-Mail, aber Schauspielerin unserer Wahl. Sobald Sie in dieser Information fühlen, schnell, das Kapitelfeld können wir auf registrieren klicken. Also, das ist eine Aktion zu gehen. Ein weiteres Aktionsziel für Spotify Website zwischen Nutzern wäre, wenn der Benutzer bereits Konto war, können sie sich einfach einloggen. Sobald Sie sich also auf der Anmeldeseite befinden, können Sie sich mit Facebook oder der E-Mail-Adresse und dem Passwort anmelden. Du hast ein anderes Action-Ziel geschaffen, das sehr häufig ist, um schockieren zu können. Also, worauf bin ich los? Nehmen wir an, ich suche nach einem bestimmten Artikel, der nach unten scrollt. Ich sehe das Element der Wahl Ich möchte Ihre Bewertung machen. Es ist wie die Menge, die ich zuerst ausweisen möchte. Ich habe den Artikel in den Warenkorb, also lassen Sie uns gehen, um jetzt zu überprüfen. Sobald ich mit dem Check-out fortgefahren bin, werde ich auffordern. Dies ist die Perfektion des Berufs zu berücksichtigen. Dies geschieht, weil ich derzeit kein Konto habe oder ich mich nicht anmelden, um das Aktionsziel, einen Kauf zu tätigen, auszuführen. Das war wenigstens ein weiterer Kommentar. Eigentlich würde es sein, etwas nach oben zu suchen. Wenn wir also zu unseren, ähm, Aktionszielen hier zurückkehren ähm, , können wir sehen, dass alles, was wir online auf uns stoßen, einen Zweck hat. Hier ist ein Beispiel für unser Klassenprojekt. Wenn wir über eine Standortfolie wie diese zuschneiden, bedeutet das, dass ich Sie durch das, was wir gerade gelernt haben, führen und es auf unser Klassenprojekt anwenden werde. Also lasst uns für unsere Klasse beginnen. Das Projekt wird ein Buch aus bauen. Es gibt eine Website, also sind dies ihre Informationen für ihre Projektskizze. Ihr Zweck ist es, ein paar Bücher zu verkaufen. Können Chancen zeigen ihre Arbeit und teilen ihre Expertise schriftlich. Ihre Handlungsziele sind Bücher zu verkaufen, Kontakt für Chancen, direkte Kommunikation und Verbindung über soziale Medien, oder haben verwendet, um eine verfolgte Prioritäten oder Ziele gehören zeigen Bücher zu verkaufen, Anrufe und per E-Mail an die Mutter, um sich zu verbinden oder dem Vater zu folgen. Also, damit Sie Ihren welchen Designprozess verwenden, habe ich eine Antwort Fragen zu Ihrem Projekt zur Verfügung gestellt. Skizzen und Ziele. Notieren Sie alle, die Sie wissen, denken Sie, wird für Sie von Vorteil sein. Also, wenn sie Karriere skizziert, werden wir über Inhalte sprechen. Siyuan nächstes Video. 6. Inhalte: -Inhalt. Ein weiterer Teil der Phase der Benutzerinteraktionen ist der Content Content Content. Stellen Sie die Fragen. Was muss die Website enthalten? Wie werden die Inhalte Kategorien sein und was werden die Hauptkategorien Inhalt sein? Könnte alles sein. Könnte Textbilder, Icons, Videos und vieles mehr sein. Die Inhalte variieren von Website zu Website, aber sie sollten immer relevant für Ihre Aktionsziele sein. Werfen Sie einen Blick auf einige Beispiele. Textinhalte sollten in einem Word-Dokument enthalten sein. Sympathische Docks. Je mehr Kontextinhalte Sie einschließen, desto besser. Wir können herausfinden, was auf unserer Website enthalten sein soll oder sollte. Es hilft Ihnen auch, Ihre Textinhalte in Ihre Hauptkategorien zu organisieren. Also hier sind meine Textinhalte für meine persönliche Website. Wie Sie sehen können, Ich bowled es die Hauptkategorien Homepage in über, und ich habe es auch für die Arbeit. Ich habe viele andere Textinhalte, die ich in meine Hauptkategorien kategorisiert habe. Wie Sie sehen können, je mehr ich schließe, desto mehr kann über meine Website verstehen und was ich kommunizieren möchte. Also der andere Teil des Inhalts, einschließlich Bilder, die wir im Auge behalten müssen, dass viele Bilder draußen in der Welt Urheberrechte haben . Das bedeutet, dass Sie die Erlaubnis bekommen müssen. Glücklicherweise, Websites wie unspool Asche erlauben uns, qualitativ hochwertige Bilder kostenlos politisch zu verwenden. Sehen Sie sich ein Beispiel an. Nehmen wir an, wir möchten uns ein Bild für Hund ansehen, sobald wir unsere Suche eingeben. Wie Sie sehen können, haben wir einige tolle hohe Qualitäten von Hunden. Nehmen wir an, wir wollten sie herunterladen, während wir zwei DUIs Hubbard haben. Klicken Sie auf diesen Pfeil und wir werden ihn haben. Laden Sie es herunter. Vergewissern Sie sich, dass Sie auch dem Künstler gutschreiben. Weitere Informationen zum Inhalt. Wir können einschließen würde Symbole und grafische Elemente sein. Viele Websites verwenden kleine Visuals wie Symbole und Symbole. Verhaftung Links mit flachen Icon einige Elemente und ich Konzert kostenlos getan, um herunterzuladen und zu verwenden. Also lassen Sie uns sagen, wir wollen die Rakete suchen bekam einige tolle Raketenbilder, weil Sie sehen können , einige von ihnen sind kostenlos. Wenn wir auf eine Menge stoßen, bedeutet das, dass es Teil eines Abonnementkontos ist, so dass diese Symbole nicht gekauft werden müssen. Aber sagen wir einfach Vocal mit diesem speziellen, so dass wir auf diese Schaltfläche klicken können. Einmal wollten wir herunterladen. Wir werden einige PNG sehen und wir werden auf die größte Pixelgröße von 120 klicken. Wir werden dies mehr durchgehen, während wir auf unserer Website im Klassenprojekt arbeiten. Wie Sie sehen können, werden unsere Klassenprojektinhalte durch Textnamen Artikel über Kontakt und Bücher enthalten. Bei den Bildern handelt es sich um aktuelle Buchbilder. Selbstporträt Blick, Bilder auf Artikelbilder. Wings wären soziale Medien, Flügel, Sektoren, Twitter, Instagram und Facebook. grafischen Elementen gehören Logo, soziale Medien, iPhones und ein Hauch von Text. Wir werden etwas namens Lauren Gibson und diesen Luftfüllstext benutzen. Also Lauren, es ist eigentlich ist eigentlich Platzhalter-Text. Und was passiert ist, ist das für unsere Website, da wir keinen relevanten Text in unseren Informationen haben, dann werden wir einen Fülltext verwenden. Und wie Sie sehen können, kann ich die Laura Epsom erzeugen. Also, wenn ich sage, ich möchte Absätze eine größere Summe, offensichtlich generieren, weil ich nach unten scrollen, werde ich in der Lage sein, den ganzen Text zu kaffee und kopieren Sie einfügen auf meine Website, so dass wir mehr darüber reden, wie wir anfangen, die Website zu bauen, unsere erste, die auf Inhalt zu tun. Lassen Sie uns Ihre Inhalte mit dem PDF-Formular sammeln und organisieren, das ich für Sie erstellt habe. Bitte füllen Sie das Formular aus und füllen Sie Ihre Hauptkategorien aus. Je mehr Sie Textinformationen einschließen können, desto besser. Nachdem wir Ihre Inhalte gesammelt haben, können wir unser Markenprofil aufbauen. Wir sehen uns im nächsten Video. 7. Markenprofil: -Markenprofil. Ein Markenprofil definiert, wie Ihre Marke aussehen und fühlen soll und definiert. Welche Nachricht möchten Sie sagen? Branding beschrieb, wer wir sind, was wir mögen und wofür wir stehen. Wie ausdrücken diese Eigenschaften ist es, Richtlinien zu brennen. Running baut die visuelle Identität einer Person oder eines Unternehmens durch Sprache, Stil, Persönlichkeit, Bildsprache, Interaktionen und visuelle Sprache auf. Wenn Sie eine Website für sich selbst entwerfen, verwenden Sie Ihre eigene Stimme, während die Gestaltung für einen Kunden bedeutet, dort zu entwerfen. Jungen, die Suche nach einem Stil der Persönlichkeit Mittel waren die Gestaltung Charaktereigenschaften oder etwas Benutzer wollen besitzen, imitieren, umarmen oder selbst identifiziert durch Fotos, Zeichnungen und Symbole und andere -Bilddaten können wir diese Merkmale auf die Art und Weise widerspiegeln, wie Sie mit dem Benutzer interagieren. drückt Ihre Charaktereigenschaften zu gut aus. Deine Interaktion wird Hume Ohren animiert. Werden Sie Fragen stellen, oder werden Sie streng sein? Visuelle Sprache ist der spaßige Teil des Druckens. Wir können Farbpaletten erstellen, Telefone auswählen und grafische Elemente und Symbole finden. Werfen wir einen Blick auf unser Klassenprojekt mit ihrem Markenprofil. Wenn Sie an Ihrem Markenprofil arbeiten, stellen Sie sicher, dass Sie eine Zusammenfassung Ihrer gesamten Marke erstellen können. Zum Beispiel auf unserem Projekt. Unsere Autoren sagten, sie mag es, richtig, also ist das ihre Zusammenfassung. Sie sagte, sie schreibt gerne ihre Schreibstile witzig, und auch ihre Persönlichkeit. Sie ist kreativ, aber sie mag es, eine coole, minimalistische Seite von sich selbst zu zeigen , weniger über die ausgefallenen Details zu sein, und mehr über den Inhalt ist es, was ihr wichtig ist. Das ist also ein wirklich kurzes Beispiel, aber ich hoffe, dass dies den Punkt nach Hause bringt. Sie beim Erstellen Ihres Markenprofils sicher, dass Sie konsumieren, entstehen, wer Sie sind und was Sie gerne an den Tisch bringen möchten. Der Miller Teil des Markenprofils, wo wir über unsere Charakter-Leckereien sprechen, so dass Ihre Charakter-Leckereienwiderspiegeln , so dass Ihre Charakter-Leckereien müssen wir mit einem Satz oder einem Wort kommen, das wirklich zusammenfasst die gesamte Marke für dieses Beispiel sind Autoren und sie ist witzig, also ist ihr Charakter witzig, und wir versuchen herauszufinden, was das für sie bedeuten würde. Moment sagt es, sie ist cool in der Farbe, aber nicht cool Augen in der Popkultur. Cool. Sie ist minimalistisch, sie ist weich, aber sie ist nicht ruhig, und sie ist einfach, aber nicht einfach, so dass sie unsere Charaktereigenschaften widerspiegelt. Wir können tatsächlich Bilder, Farben und Gegenstände finden , die uns inspirieren, damit wir unspool, Asche oder andere visuelle Bilddienste verwenden können , damit wir Gegenstände finden können, die uns helfen, unseren Charakter oder kranke Eigenschaften zu finden . Sagen wir, zum Beispiel, wir suchen nach witzig, für unseren Autor, der sich hinunterwindet. Sie können über dieses Bild kommen, und das ist etwas, was sie richtig Ernährung. Habe ich das gegessen? Das wäre also ein lustiges Bild, das wir für ein Moodboard sammeln können. Also, sobald Sie auf diesen Download-Button klicken, können wir die Bilder in einem Ordner speichern, der helfen wurde unser Moodboard bauen. Also für unser Klassenprojekt habe ich bereits bereitgestellt, dass die Bilder verwendet werden und unter der Ressourcenoberseite. Wir werden sicher sein, dass Sie das herunterladen und in einen Ordner in Ihr Klassenprojekt einfügen. Also, für zu tun, lassen Sie uns eine große Markenzusammenfassung. Denken Sie über Ihre Charaktereigenschaften nach und finden Sie einige Bilder, die Ihnen helfen können, sich inspirieren zu lassen. Sobald Sie Ihre Markenzusammenfassung und Charaktereigenschaften definiert haben, können wir mit unserem visuellen Design beginnen, sehen, wann das nächste Video 8. Moodboards: Wenn Sie also Ihre Marke irgendwo in Charaktereigenschaften definiert haben, können wir anfangen, unser Bram-Profil auf einem Moodboard zusammenzustellen. Das Ziel ist es, Muster, Farben und Ideen zu finden . Wir können einen Umzug für durch Pinterest verwenden oder sich vorstellen. Aber für dieses Klassenprojekt werden wir anfangen, an der Vorstellung zu arbeiten, und ich werde dir zeigen, wie du dein Moodboard kreierst. Lasst uns loslegen. Sobald Sie sich in Ihre Vision einloggen, lassen Sie uns hier auf diesen Button klicken und wir werden anfangen, an Bord ganzen Namen zu erstellen. Es ist Kill Share Projekt. Lassen Sie uns beim Mauerwerk bleiben. Lasst uns loslegen. Also hier haben wir unseren Bericht und das ist unser Abschnitt hier, also fangen wir an, einige Bilder hinzuzufügen, die inspiriert wurden. Erinnerst du dich an dieses Bild hier? Wir haben beschlossen, schließen wir gehen zurück, um Board zu entfernen, und ich habe es bereits in unsere Ordner heruntergeladen . Also, was ich tun werde, ist, dass ich all die Fotos schnappen werde, von denen ich inspiriert wurde. A und ich werde es hier auf das Brett trocknen. Es wird einige Zeit dauern, aber das sind alle Bilder, die in unseren hochgeladenen Bildern enthalten werden. Lassen Sie uns hier einen Titel erstellen, Bilder jede Schriftrolle, ich bin unten. Sie können alle Bilder sehen, die wir mit ein paar hochgeladen haben, die sich noch Zeit nehmen. Also lasst uns wieder hierher kommen und dann erreicht, von dem wir am meisten inspiriert waren. Sie können das verwenden, um uns zu helfen, unsere Farbpalette zu finden, und ich mag dieses spezielle Foto. Gehen wir zurück in unsere Mappe und wir werden das Foto finden. los geht's. Also werden wir anfangen, dieses Foto für unseren nächsten Schritt aus Farben zu verwenden. Also, damit Sie Ihr eigenes Board einrichten, können Sie Pinterest verwenden oder sich vorstellen, aber das Ziel war es, Bilder zu finden und zu sehen, ob Sie Muster und Farben und Ideen finden können , die Sie mit Ihrem in Board einrichten mögen, können wir dann mit der Erstellung unserer Farbpaletten beginnen. Wir sehen uns im nächsten Video 9. Farbe: Auswahl von Farben kann Spaß machen. Farben sind mehr als das, was sie scheinen, und es macht Sie fühlen und denken. Farben können mit vielen Symbolen kommen, und wenn verschiedene Farben gesammelt werden, erstellt es eine Palette. Diese Paletten sind wie Worte, um eine Stimmung oder ein Gefühl zu finden, also werfen wir einen Blick auf einige Beispiele von Farbgeneratoren. Ein Farbpalettengenerator, den ich wirklich mag, ist für Canda. Es ist einer meiner Favoriten, weil ich ein Foto halten kann, das ich mag. Und es kommt alles fünf Millionen Farben, die aus dem Bild bevölkert wurden. Dort können wir einen Text kalten Nummer und einen Namen bekommen, Also dies ist eine Möglichkeit, eine Farbpalette zu erzeugen, die Bild, das Sie inspiriert sind. Ein anderes Farbwerkzeug nennt man Kühler. Hier am Farbgenerator komprimieren Sie Basisbalken und Ergebnisse. Eine Reihe von anderen Farben, die mit Farben kommen, ist ziemlich einfach. Sie können einen Farbbalken Ihrer Wahl ziehen. Sie können es nach Bedarf anpassen. Vielen Dank Sättigung und Helligkeit. Wenn Sie eine bestimmte Farbe mögen, können Sie sie auch sperren lassen, wenn Sie neue andere Farben erzeugen. Wie Sie bemerken. Wir haben auch die Hex-Code-Nummer für die Farbe sowie einen Namen, der in ein wenig nützlich sein wird . Lassen Sie uns mit unserem Projekt vorankommen. Ich gehe zu Silicon Image, von dem ich von unserem Invasion Board inspiriert wurde. Also lasst uns damit anfangen. Ich habe das Bild auf meinem Computer gespeichert. Ich werde das Bild nehmen. Ich werde es schleppen. Was kommt die fünf Hauptfarben. Also lassen Sie uns dies auf unsere Vorstellung A sowie unsere langweilige B X D Datei füllen. Beginnen wir also mit Envision bei Honor Report wird einen neuen Abschnitt erstellen, und hier können wir ein Farbfeld hinzufügen. Ich werde das beiseite schieben. Ich klicke auf diese Schaltfläche, um Einfügen zu kopieren. Wir werden das gleiche Heilmittel machen. Und hier haben wir unsere Farbe. Es ist percenter. Es ist zurück in unser Fort. Das ist das Gleiche für alle anderen Farben. Nun, da wir unsere Farbtafel auf unserem Moodboard eingerichtet haben, lassen Sie uns unsere Dopey X'd Datei aktualisieren, die diese offenen Fertigkeiten teilen durchführen. Du fängst an. Wie Sie sehen können, werden Sie ein leeres Blinzeln haben. Ein System Farben Seite, wo alle Blöcke von Fleisch groß. Lassen Sie uns also unsere Farbpalette aktualisieren. Ein Exemplar. Hier, strecken Sie das wieder rein. Klicken wir auf dieses Feld. Sobald Sie auf dieses Feld klicken, lassen Sie uns auf diese Schaltfläche ein wenig einfügen unseren Code. Nun, da sich die Farbe ändern, die ein Tour-Farbfeld speichern, stellen Sie sicher, dass Sie Ihren Hex-Code-Namen hier aktualisieren. Nennen Sie unsere Farbe hier. Jetzt steht RGB, wie bereits erwähnt, wie bereits erwähnt,für Rot, Grün und Blau. Lassen Sie uns also unseren Mitternachtsblauen RGB-Farbcode finden, der das Internet ermöglicht. Wir gehen zu Farben-Hex-Codes. Lassen Sie uns das wieder ausstrecken und ich kann Ihnen zeigen, wie wir uns eingegrenzt haben, damit wir den Code kaffee einfügen können . Hier steigen sie ins Schlepptau. Hier haben wir unsere Liste mit anderen Farbcodes. RGB Schritt für unsere Koch Farbe ist 9 59 und 74. Wählen Sie und setzen Sie, dass jetzt, dass die Datei speichern Lassen Sie uns durch den Rest für alle anderen Farben . Also hier haben wir unsere Systemfarben alle eingerichtet. Es wurde in unserer Akte gespeichert und auf unserem neuen Gericht gespeichert. Für Ihre auf Ihrem eigenen persönlichen Projekt zu tun, finden Sie Ihre Farbpalette, die Sie in Vision oder Pinterest oder jedem anderen Werkzeug verwenden können, das Sie sehr nützlich für Ihre eigenen Bedürfnisse finden . Lassen Sie uns also vorwärts gehen, um über die Auswahl unserer Mittel zu lernen. Wir sehen uns im nächsten Video 10. Typografie: Sobald Sie Ihre Farben ausgewählt haben, können wir mit der Auswahl von Schriftarten beginnen. Jetzt. Typografie ist eine Studie von Schriftarten, und dahinter steckt eine ganze Wissenschaft. Jetzt. Eine Schrift ist, wie ein Text aussieht, fühlt und liest. Es ist die Kunst des Textes, der von einem Künstler oder Künstler geschaffen wurde, und es ist im Grunde das, was wir sehen, wenn wir Texte lesen. Jetzt. Ah, Spaß ist eine Datei, die eine Schrift enthält, und wir verwenden Schriftarten auf einem Computer steuern den Typ AIDS. Schauen wir uns ein Beispiel an. Der Front-Monsterrock würde auf ihrem Computer installiert werden, und wenn wir uns entscheiden, zu verwenden, wird diese Schriftart Zugriff auf ihre Schriften haben. Und diese Schriften sind leicht, normal, mittel, halb alt, alt, schwarz und ein paar andere. Jetzt können auch eine Art Gebühren kategorisiert werden. Sarahs und Sensortypen. Es gibt andere Kategorien, aber Sarahs und Sand Sarahs sind die beiden am häufigsten. Jetzt Sarahs Air, die kleinen Küken, die aus den Buchstaben ragen, während San Sears, was bedeutet, nein, Sarah hat ein klareres Aussehen, das üblicherweise für Text verwendet wird. Einige Schriftarten werden am besten für gedruckte Artikel verwendet, während andere im Web gut funktionieren. Und wenn Sie sich dieses Beispiel ansehen, können wir etwas sehen, das als enge Paarung bezeichnet wird. Wir haben einen San Serif-Typ und einen bestimmten Typ. Alles, was zählt, ist, dass wir ein Gleichgewicht sehen können und dass Text und der gesamte Inhalt sehr leicht gelesen werden können . Also schauen wir uns einige Beispiele von Vätern können wir Mein Telefon dot com zugreifen My hans dot com hat eine der höchsten professionell Design und Qualität Schriftarten und Schriftarten. Also, wenn wir über diese Website arbeiten, können wir auch ein Preisschild sehen, aber einige dieser Schriftarten. Aber zum Glück haben wir, wie es ist wie Google Farm, die es uns ermöglicht, Geld kostenlos zugreifen , und wir können über ihre Kategorien zugreifen. Und wir können den Satz auch bearbeiten, damit wir testen können, wie die Phrase Will auf unserer Website aussehen könnte . Hören Sie, wir wollen unsere Formulierung in etwas ändern, das wir auf unserer Website können. Also lasst uns das machen. Sie können diesen Satz auf alle Fonds anwenden, und wenn wir scrollen, können wir sehen, wie die Schriftart wird lange auf unsere Phrase aussehen. Dies ist ein großartiges Beispiel dafür, wie wir Gedanken und Schriften bestreiten. Wenn Sie sich entscheiden, eine Menge zu wählen, können Sie einfach auf diese Schaltfläche klicken hier und dann unten. Es kann diese Schaltfläche sagen und wir können in unseren Computer herunterladen, um die verschiedenen Arten Gesichter und Stile zugreifen . Also lasst uns vorher zu unserem Klassenprojekt. Zum Glück, als ich an unserem Projekt arbeitete, entschied ich mich, den Gedanken zu wählen. Ein schnelles Set war schnell. Sohn, wir haben vier Stile. Das heißt, es gibt vier Schriftarten. Wir gehen. Also lassen Sie uns Quick Santo unser Brett anwenden. Lassen Sie uns zu unserer Vorstellung gehen und in einem anderen Abschnitt in ST erneut zu verpflichten. Also, was ich bereits getan habe, ist, dass ich einige Screenshots unserer Schriften aus lokalen Bindungen gemacht habe. Was? Ich werde ihren Kopf hinter ihrem Ordner über Typografie machen, schnappen Sie sich alle Bilder hier und klicken Sie und lassen Sie ein Heilmittel fallen. Die meisten Verbrechen, wie wir nicht anfangen konnten, unsere Schrift auf unsere Dopey x d 5 zu ändern. Nun, ich habe es je getan, ist, dass ich bereits Treibsand hochgeladen habe. Also sagen wir, ich habe diesen bestimmten Gegenstand genommen, den wir sehen, wie er schnell ist. Und gerade jetzt ist es auf das regelmäßige hohe Tempo geschickt. Also, was ich tun werde, wähle ich all diese speziellen Texte Änderungen in Treibsand und das gleiche wird für diese Elemente hier gehen , die vorsummiert. Aber wir haben nur alt. Also lasst uns festhalten, dass es mir so gesagt hat. Haben Sie regelmäßig auf regulär eingestellt und das nächste, was wir tun können, ist unsere Textfarben zu aktualisieren. Also, was ich schon getan habe, ist, dass wir bereits die tollen Farben haben. Also, was wir Dio können, hat drei Hauptfarben aus verschiedenen Schattierungen verändert. Also lassen Sie uns einfach auf, dass klicken Sie auf, dass unbeleuchtete Kopie Stück jetzt zurück zu unseren Formen der Farben wählen . Jetzt können wir alle Texte aktualisieren, und wir wollen gefärbt haben. Sie war die dunkelste Großartige. Lassen Sie uns den Textkörper in etwas leichteres ändern. Also, was hat sich das geklärt? Wir können tatsächlich den Stil mit der rechten Maustaste speichern. Sie können sehen, dass Zeichen Stile Assets. Das bedeutet, dass wir später nicht auf diese Charaktertypen zugreifen können, wenn wir an unserem Prototyp arbeiten , wenn Sie dasselbe für Farben mehr tun. In der Zwischenzeit werde ich gerne für Sie, um Ihren Spaß zu wählen. Wir treffen uns im nächsten Jahr. Wir werden anfangen, über Website-Navigation zu sprechen, Stealin 11. Navigation: nachdem wir unsere Benutzer und ihren Zweck der Interaktion mit unserer Website definiert haben, wollen wir wissen, wie, obwohl auf die Website navigieren und wenn sie in der Website sind Hallo navigieren darin. Navigation kann extern und intern extern aufgeschlüsselt werden. Wir möchten wissen, wie Benutzer Ihre Website finden, wie alte Benutzer auf Ihre Website gelangen. Welche Zugangspunkte, während sie nehmen Arten von Zugangspunkten kann während der E-Mail sein, wo ein Link innerhalb der E-Mail und wenn Sie darauf klicken und nutzen Sie die Website. Eine grundlegende Suche wie Google ist oder jung ein direkter Link, was bedeutet, dass Benutzer die Website häufig besuchen, so dass sie sich an Ihre verbleibenden erinnern. Also alles, was sie tun müssen, ist die Website-Namen in das Suchteil Passwort eingeben, nicht passwortgeschützte Seite bedeutet, dass Sie nur Zugriff auf die Website haben, wenn Sie ein Passwort erstellen , so dass diese wie ein Bankkonto oder ein Social-Media-Konto sein könnte. Eine langsame soziale Medien durch eine Profilsuche oder Freunde Beiträge. Sie können tatsächlich Informationen über die Website oder das Unternehmen oder die Person sehen. Also, wenn Sie durch soziale Medien gehen, gibt es viele Zugriffs-Münzen innerhalb der Post selbst oder der Seite selbst durch bezahlte Werbung. Es ist ein gemeinsamer Zugriffspunkt, an den viele Benutzer weitergeleitet werden. Wenn Sie also eine Anzeige sehen und an diesem bestimmten Artikel oder Informationen interessiert sind, wenn Sie auf klicken, gelangen Sie direkt zu dieser Website. Es gibt etwas Beispiel für einen Zugang. Dies ist meine User Journey, über die später im Kurs gesprochen wird. In Bezug auf die Navigation hängt jedoch davon ab, wie Benutzer auf meine Website gelangen und eine Aufgabe erledigen, davon ab, welche Aktionen ausgeführt werden. Zum Beispiel habe ich einen potenziellen Arbeitgeber neugierig auf mich durch ihre Aktion der Betrachtung meines Lebenslaufs Anschreiben YouTube, Videos eines Projekts. Holen Sie sich ihr Profil, Twitter oder mein Blogger definieren Sie mich direkt über die grundlegende Suche. Wie Google können sie auf meine Website weitergeleitet werden. Es gibt also viele Wege, die Sie auf eine Website zugreifen können, und sobald Sie innerhalb der Website sind, gibt es eine andere Art von Navigation, und das nennt man die interne. Während wir in der Ewigkeit sind, stellen Sie Fragen, wie Benutzer von einer Inhaltskategorie zu einer anderen gelangen. Wie viele sexuellen Missbrauch brauchen, um eine Aufgabe zu erledigen? Cool. Lassen Sie uns also einen Blick auf unser Klassenprojekt jetzt Klassenprojekt werfen. Wenn wir über Navigation sprechen, sprechen wir über die interne Benachrichtigung. So unsere Autoren Website Interne Navigation sind die folgenden. Wir haben Hauptkategorien wie Startseite über Looks, Artikel und Kontaktseiten. Daher haben wir innerhalb jeder mittleren Kategorie die folgenden Elemente, die wir sein werden, einschließlich auf dieser bestimmten Seite. Es ist auf der Startseite. Wir werden eine Titelseite haben, ein Buch Titelbuch, kleinen Blick mit Vorbestellformular und andere Bücher, die auf der über Seite aufgeführt sind, werden Selbstporträt und eine Bio innerhalb der Bücher haben . Seite wird eine Büchergalerie mit dem Titel und seiner Beschreibung, zusammen mit der Länge, um Benutzer zu diesem bestimmten Bücherseite auf Artikel führen wird Liste von Artikeln haben . Der Artikel, Bild, Artikel, Titel und die Artikelbeschreibung und schließlich, in der Kontakt nach Alter wird die Informationen haben, wie Benutzer andere kontaktieren können So werden wir ihre E-Mail, ein Social-Media-Konto und von Short Board. Also für Ihre zu tun Ripper, Ihre externe und interne Navigation, überprüfen Sie Ihre Inhaltskategorien, um Ihre interne Navigation zu bestimmen Nach oben. Als nächstes beginnen wir mit der Diskussion über Site-Mapping. Hier fangen wir an, unsere interne Navigation abzubilden. Sehen Sie im nächsten Video 12. Sitemapping: Website Mint beschreibt eine Navigation von der Homepage zu den verschiedenen Webseiten waren Teil des Inhalts unserer Website. In gewisser Weise ist eine Siteübersicht wie ein Inhaltsfluss. Wie möchten wir, dass Benutzer von einem Teil des Inhalts zu einem anderen gelangen und den Benutzerpfad bei Interaktion mit der gesamten Website zuordnen? In Bezug auf die interne Navigation bedeutet dies, dass wir unsere Inhalte miteinander verbinden. Wir wollen sicherstellen, dass die Verbindung zur internen Navigation sinnvoll ist. So, wie Benutzer für ein Stück Inhalt zu einem anderen bekommen. Wie werden Sie eine Inhaltskategorie in eine andere Kategorie übertragen? Also hier ist ein Beispiel Site-Mapping. Das ist mein kleiner. Meine für meine persönliche Website. Mit Google Dry konnte meine Inhalte und Blöcke abbilden. Unten links sehen Sie eine Legende. Gelb steht für die Lining-Seite auf den verschiedenen Farben unten repräsentiert Tabs, Tab-Inhalte , sekundäre Seiten auf Drittanbieter-Websites. Also hier ist der Zusammenbruch. Wenn ein Benutzer auf meine Homepage zugreift, können diejenigen, die eine Nobel-Unschärfe in der aktuellen Projektgalerie von seinem Benutzer haben, zur Kontaktseite navigieren . Eine Arbeitsseite auf der Blawg jetzt wird das Blut keine separate Webseite sein, aber es wird mit meinem Medium-Protokoll verknüpft sein, das so Ihre Klicks auf diesen Link verwenden würde. Es wird sie direkt in den Block auf Medium bringen. nun Wenn ichnunden Zugriff auf die Arbeitsprojektseite verwende, sehen sie eine Vielzahl von Projekten. Aber diese Projekte werden mit den Registerkarten aufgelistet. Also, wenn ein Benutzer auf eine dieser Registerkarten klickt, ob es Liebe Entwicklungsstrategie entworfen Illustration in der Buchkunst zu trennen Seiten gut für welche Entwicklungsstrategien navigiert werden Ihre Webseite, bedeutet, wenn ihre Heilung über ein bestimmtes Projekt innerhalb dieser Registerkarte. Sobald sie auf diese Informationen klicken oder das Projekt wird dazu gebracht werden. Was die persönliche Seite von dort projiziert, die Warnung oder über dieses Projekt, einschließlich aller externen Links, die jetzt mit ihm verbunden sind, für Design-Illustrationen von Foot Bart, diese einzelnen Projekte werden nicht zur neuen Webseite navigiert. Es wird innerhalb der Registerkarten bleiben, und Sie könnten in der Lage sein, alle anderen externen Links zu sehen, die damit in Zusammenhang stehen. Unten unten wäre meine Fußzeile. Hier sind mehr Social-Media-Symbole, also lassen Sie uns sehen, wie das funktioniert. Navigieren Sie zu meiner persönlichen Website. Dies ist die Homepage. Wie Sie sehen können, haben wir die Arbeitsstecker in Kontakt Hauptkategorien. Es ist auf der Startseite. Wenn wir nach unten scrollen, sehen Sie in über Unscharf und mein aktuelles Projekt. Mal sehen, ob wir auf das erwerbsfähige Alter klicken. Wie Sie hier sehen können, haben wir eine Vielzahl von Registerkarten, auf die wir klicken könnten. Also, wenn wir noch in der Web-Entwicklung Registerkarte, lassen Sie uns sagen, wir betrachten das Projekt t erstellen, wenn Sie auf T Kiste klicken, wurden auf die Haupt-Tee Handelsseite gerichtet . Hier. Wir lernen mehr über dieses Projekt, aber gehen wir zurück. Also entschieden wir uns, auf Illustrationen zu gehen. Nehmen Sie eine Uhr. Hallo. Hier geht's. Wir konnten unser spezielles Projekt sehen. Wie Sie sehen können, kann ich nicht auf jedes Projekt klicken, um uns zu ihrer eigenen persönlichen Seite zu bringen, weil sie ihre eigenen Informationen gewonnen haben wird innerhalb dieser 'll bestimmten Website festgelegt. Aber wir können Bilder durchsuchen, um weitere Informationen zu erhalten. Wenn Sie auf die Kontaktseite gehen, haben wir unten irgendwelche Kontaktinformationen. Hier können Sie den Fußschwimmer sehen , den ich meine Social Media Icons eingeschlossen habe, wie ich erwähnt Wenn wir Block klicken, wird es uns in Richtung meiner blawg auf dem Medium leiten, die einen zweiten Duke of So nehmen würde. Wie Sie sehen können, jede Kleinigkeit wichtig. Die Art und Weise, wie Sie mit Ihren Benutzern interagieren, ist äußerst wichtig. Hier haben wir das Logo, das einmal geklickt hat, könnte Sie zurück auf die Homepage, so dass Sie es so einfach wie möglich für Ihre Benutzer zu machen. Je mehr sie Ihre Website mit Leichtigkeit navigieren können, desto besser werden sie zurückkehren und uns individuell oder ihr Klassenprojekt schätzen. Wir werden anfangen, an der Website-Mapping unserer Autoren Websites zu arbeiten, öffnen Sie bitte Nummer eins gestaltete Website Set Start auf Google ziehen Harold entworfen, wie unsere Website von der Schildkröte in Anwendung zu arbeiten. Das erste, was wir brauchen, um Dio zu löschen Blöcke unserer Hauptkategorien. Also lasst uns das machen. Das war auf einem Block. Sagen Sie Startseite für die Homepage. Lassen Sie uns sicherstellen, dass alles zentriert ist und den Text ein wenig leichter für die Augen zu machen. Lasst uns das ändern. Ich werde den gekämpften nur ein bisschen klein Perfect machen. Also ist es wenigstens ein bisschen Isis hier. Ich werde dies in die Mitte unseres Dokuments mit zu Hause serviert ist eine unserer Hauptkategorien , aber weil es die Hauptseite ist, wird es zu unseren anderen Hauptkategorien geleitet werden. Also lasst uns das ausbauen. Wir haben eine Kopie einfügen. Ich benutze Abkürzungen auf der Tastatur, die, wie auch immer Sie eine Kopie Ihre Elemente einfügen möchten, bitte tun Sie Weise insgesamt andere vier. Can Griechenland. Das ist, was Jesus heraufrastet, so hat dies geändert in über Bücher, Artikel und Kontakt für all diese Elemente. Geben wir ihnen eine Grenze. Es hat es geändert, um Gnade ist das, was leichter für die Augen ist. Verwenden Sie es zu dieser Abdeckung. Das ist eine Linie. Diese Kategorien gut, gleiche Mitte. Wir werden alles zerstören. Gleichmäßig waagerecht Lassen Sie uns es einfach so ausrichten. Jetzt haben wir auch unsere Butter, wo wir unsere Social Media Icons einschließen werden. Also lassen Sie uns die zwei verwenden, die wir zuvor kopieren. Welches Kaffeesicht? Noch einen. Du lügst. Diese Typen waren, sagen wir, Instagram, Twitter und Facebook. Lassen Sie uns diese etwas gleichmäßig verteilen, ziehen Sie die Dinge hier runter. Es ist auch an einigen Grenzen zu diesen Jungs. Hol ihn. Kommt das rein? Los geht's. also als nächstes Lassen Sie unsalso als nächstesherausfinden, wie sich unsere Inhalte verbinden. Also haben wir auf der „Über“ -Seite gesagt, wir werden eine Bio in Selbstporträtbüchern haben. Seite, aber wir würden eine Galerie von Büchern für jedes Buch haben würde auf seine eigene Buchseite geführt werden. Also lasst uns das machen. Das ist eine sekundäre Seite. Also lasst uns das ändern, um zu buchen. Und weil die Galerie es auf eine mehrere Webseiten umgeleitet wird, lassen Sie uns ein Symbol machen, um uns zu benachrichtigen, dass die Bücherseite mit mehreren sekundären Seiten verbunden ist . Also, was wir tun werden, ist kopieren Einfügen, wir haben es herausgefunden. Löschen Sie diese Steuer. Lassen Sie uns unsere Hauptkategorien geben. Es ist weiße Farbe. Wir könnten das Gleiche tun. Ihre Homepage war gelb, also ging es zurück zu den Büchern, alles änderte die Reihenfolge zurück. Verschieben Sie das hier nach oben. Nur ein bisschen macht ein wenig Fleisch. Sie können auch eine andere kopieren einfügen. Ändern Sie die Bestellung erneut. Es ist nach hinten. Sie passen es einfach so an. Also lasst uns diese Elemente gruppieren, und dann lasst uns diesem eine Grenze von DOT zu Punkten geben. Es ist eine sekundäre Seite und gibt ihm die Pfirsichfarbe und testen Sie jetzt auf der Buchseite. Wir erwähnten, dass das Buch einen externen Link zu einer Website haben wird, die es einem Benutzer ermöglicht, ein Buch zu kaufen . Also lasst uns das ausbauen. Das ist Kopiertempo, aber das Element ziehen Sie dies nach unten wird sagen Website, um ein Buch zu kaufen. Und lassen Sie uns eine Farbe zu Grau ändern, weil wir gesagt, externe Links sind großartig, aber lassen Sie uns wieder die Grenze Toe einen festen geändert. Ich werde auch die Schriftgröße ändern, nur um es ein wenig leichter für die Augen zu machen. Dort haben wir einen Abschnitt der was Seite getan. Die Verbindung, die wir mit Artikeln haben, ist, dass die Autorin einen Autotext von Artikeln haben wird, die sie für Freiberufler geschrieben hat. So wird jeder der Blurts in der Lage sein, auf den Hauptartikel auf der anderen Website zu verlinken. Das ist also ein externer Link. Also lasst uns Tempo kopieren. Ein weiterer Artikel hier, nur ein Licht es mag, so dass Sie die roten Linien verwenden können, um Ihnen zu helfen. Wir werden sagen, Queen Artikel Kontakt hatte nur die E-Mail als auch auf, also lasst uns das auch zeichnen . Aber es ist kein guter externer Link, aber es ist immer noch eine Möglichkeit für Kontakt. Also hier haben wir, ist unsere Content-Verbindung für unsere Site-Mapping. Als nächstes müssen wir sicherstellen, dass das, was wir Dio wollen, ist darauf hinweisen, was ein Benutzer navigieren kann. Aber zuerst gruppieren wir bestimmte Dinge zusammen. Wie bereits erwähnt, werden die Hauptkategorien unsere Hauptnavigation für die Website sein, so dass dies normalerweise in der Kopfzeile platziert wird. Also lasst uns ein Symbol machen, also ändern wir uns. Das zu transparent änderte den Rahmen. Sprich mit Gott wird die Reihenfolge in der Rückseite ändern. Wir können die Grafik auf der Rückseite des Dokuments verwenden, um uns zu helfen, Dinge ein wenig sauberer zu mögen und einzuziehen. Sie können das gleiche tun, indem Sie hier sagen, dass dies ein Header ist und dieser ein Klick weg von anderen, welche Seiten ein Benutzer nehmen wird. Lassen Sie uns die Größe ändern. Stellen Sie sicher, dass die Dinge zentriert sind. Also lassen Sie uns sagen, das gleiche für unsere Fußzeile wird Tempo kopieren. Während dieser unten werde ich sagen, dass dies die Fußzeile ist, also lasst uns die Datei nur ein bisschen säubern. Machen Sie die Dinge ein wenig Niedere, reduzieren einige der Größen. Dennoch könnte er das gleiche für unseren Inhalt sein. Hier trocken, diese Jungs leicht Homepage ist ein bisschen in Ordnung Also lasst uns die Verbindung machen. Lasst uns unsere Linie benutzen. Träne wird den Onkel Connector verwenden, so dass die Homepage navigiert werden kann, um zu sein. Alles, was du tun musst, ist, diesen violetten Punkt mit deinem Mund zu berühren. Halten Sie es da unten, drücken Sie die Taste und ziehen Sie sie. Wir können das Gleiche für alle anderen Blöcke machen, aber lassen Sie uns diese Fässer für diese Jungs hier machen. Also, was wir Bücher Galerie führt uns zu einer Buchseite, aber eine Buchseite kann auch zu unserer Buchgalerie zurückkehren, also brauchen wir ein bestimmtes Lied. Also lassen Sie uns ändern und setzen Sie den Pfeil halten Sie Ihre Maus blond und halten Sie die Shift-Taste gedrückt. Sie können einfach nach unten loslassen. Wir machen das gleiche nach oben, wir sagten ein Buch. Holen Sie sich neben einer leichten Zehe, lassen Sie Benutzer durch sie. Aber lasst uns das machen. Und dann machen die Artikel tatsächlich das gleiche für die Hauptartikel. Kontaktwinkel zur E-Mail als auch. Wenn Sie also auf dieser Seite sind, um ein Buch zu kaufen, gibt es eine Referenz, die Sie zurück auf die Startseite führt. Also konntest du nicht mehr über den Autor lesen, wenn du das nicht getan hast. Also lasst uns dort eine Verbindung herstellen. Fass das nicht an. Halten Sie die Ziehtaste gedrückt, um nach oben zu gehen, indem Sie diese Auswahltaste klicken. Wie Sie sehen können, haben wir Diamanten. Was Sie tun können, ist über diesen Diamanten zu schweben. Ziehen Sie es hier so, weil es eine externe Verbindung ist. Lassen Sie uns es ändern, um einen Punkt anzunehmen Wir können das gleiche für den Hauptartikel tun. Machen wir noch einen wie diesen Hund hier oben. Los geht's. Ändern wir den Punkt in Punkt Klicken Sie auf die Auswahltaste, Mauszeiger über den Diamanten. Verschieben Sie es einfach so, dass Sie es auch nach unten ziehen können. Es ist also ein wenig einfacher für die Augen, weil diese Art von Grenzen, die wir verbinden. Also lasst uns das hier rüber bewegen und das wieder raus, nur um es etwas sauberer zu machen. Lassen Sie uns einige Notizen zu diesem speziellen Abschnitt machen. Es sind Kopien Schweine, und wir sagen, wenn das nur einen Klick von den Büchern entfernt ist. Calorie, wer tut das? Ein anderes Exemplar zahlt hier zu sagen, dass dies externe Bücher sind und dort haben Sie die Site-Mapping. So haben wir jetzt unsere Kostenprojekt-Standortzuordnung abgeschlossen. Ich hoffe, das macht Sinn für Sie, und dass Google Draw kann wirklich helfen, unsere Website zu bauen, Mapping durch einfach und intuitiv. Und es ist eine großartige Übung, wenn Sie nur mehr über das Tool erfahren möchten oder einfach nur lernen möchten wie man Diagramme erstellt. Damit Sie Ihre Site-Kartendiagramme erstellen können, sobald das abgeschlossen ist, können wir über Ihre Reisen sprechen. Siehst du das nächste Video? 13. Nutzer-Reise: Benutzer verwenden Ihre Reise ist der Fluss, den er normalerweise durchläuft, wenn er mit einer ganzen Website interagiert . Es dreht sich um ein Aktionsziel. Es hilft uns herauszufinden, was Benutzer tun und in welcher Reihenfolge. Was ist ihr Weg von Punkt A, um mich zu zeigen, um eine Aufgabe oder ein Ziel zu erfüllen. Der schwierige Teil besteht darin, die Anzahl der Schritte zu begrenzen. Verwenden Sie Ihre Takes, um von einem Punkt zum anderen zu gelangen. Klicken Sie auf mehrere Schaltflächen, nur um Informationen zu erhalten, waren in der Lage, etwas zu kaufen, wird einen Benutzer zu ärgern. Sie müssen in einer zielgerichteten Weise zuweisen, so dass der Benutzer eine angenehme Erfahrung hat und auf Ihre Website zurückkehren wird . Einige Benutzerbeitrittswicklungen können einfach oder komplex sein. So wie das. Die Idee User Journey ist es, die emotionale Reaktion eines Benutzers, seine Gedanken und die allgemeine Erfahrung kennenzulernen . Aus diesen Antworten können wir Feedback erhalten, um unsere Ideen zu verbessern oder neue zu erstellen. Aus diesem Beispiel können wir eine Benutzererfahrung aus der Suche nach einem neuen Look für neue sehen, die von der Lage ist, einen Dienst zu finden, der sie bietet, als Sie aussehen und in dem sie eine großartige Erfahrung hat und sie wird dafür befürworten bestimmten Unternehmen. Die Benutzer Gesamterfahrung enthält viele Ebenen auf ist, dass mehrere Schritte? Aber das ist der Sinn der Reise ist es, mehr von Ihren Benutzern kennen zu lernen, weil sie diejenigen sind , die Ihre Website sein wird. Sie als Designer müssen auf ihre Bedürfnisse und ihre Erfahrungen zu entwerfen. Als Nächstes. Wir werden über unser Klassenprojekt sprechen, also werden wir anfangen, unsere Autoren Träume auszubauen. Öffnen Sie Ihre Datei ein Design-Website-Benutzer für mich Startdatei in Global Drop. Lassen Sie uns unsere Aktionsziele für unseren Benutzer ändern. Eigentlich gehen für einen Benutzer wäre es, ein Buch zu kaufen, um Informationen über den Autor oder Buch zu erhalten, in Kontakt zu kommen. Strecken Sie den Block hier aus. Also lassen Sie uns sagen, unser Benutzer, es ist jedes Potenzial. Was ist in dem Wohnwagen? Lassen Sie uns die Frontgröße ändern, nur um die Augen viel einfacher zu machen. Stellen Sie sicher, dass alles im Mittelpunkt steht. Es hat eine Grenze. Machen Sie es einfach für die Augen. Es ist immer noch nur eine Stadt, Ordnung, also ah, in Ordnung, also ah, potenzielle Kunden können auf die Website auf ein paar Arten zugreifen. Also lassen Sie uns kopieren, bezahlen und sagen eine grundlegende Suche Es ist ein wenig zu Google-Suche und das wird verfolgt. Ein bisschen dauernd gestochen. Kopieren Sie Löcher mehr direkt oben einfügen. Ich werde gut sehen. Ich werde die Grenze kalt entfernen. Transparent Sie ändern die Google-Suche in einen gepunkteten Rahmen. Fahren wir das einfach ein bisschen weiter runter, also ist es etwas näher. Also werde ich das für den nächsten Zugangspunkt einfügen kopieren, und das könnte jetzt sein. Nutzen Sie Lachen von hier. Konsole, aber vermischen. Wir können an dieser Stelle mit dem Aufbau des sozialen Netzwerks beginnen. Schmecken, die wir sehen werden. Also, Sean, ziehen wir die Flecken ein wenig, weil wir gesagt haben, Center diesen Block. Deshalb schützt es das Zentrum. Also lasst uns dies ändern, um Twitter zu haben. Ich bleibe jetzt bei Facebook. Der andere könnte Teil vieler anderer Schriftsteller und grober Buchgruppen sein. Also lassen Sie uns sagen, gut liest diese von ihnen. Noch ein. Sagen wir einfach Club nur Mut in Herrick. Noch eine Woche, ähm, YouTube. Vielleicht stieß jemand auf eine YouTube-Seite, wo sie über ihre Bücher spricht. Also denke ich, das letzte Mal sitzen für jetzt. Lassen Sie uns nur ein kurzes Beispiel für alle unsere Access Points machen. X Punkte können sehr komplex sein. Also, ähm, was immer Sie tun müssen, um Ihren Website-Punkt aufzubauen, um Ihre User Journey zu bestimmen, wird Ihnen bei Ihrem Website-Design helfen. Aber für dieses Beispiel dieses Klassenprojekts werden wir es so einfach wie möglich machen. Zentrieren Sie alles hier und bauen wir Ah, Website. Ich werde nur kopieren unsere Elemente einfügen helfen etwas Zeit zu sparen, schieben Sie das hier runter. Religion auf unserer Homepage unserer Website ist, dass sie eine Liste anderer Buchgalerien hat. Aber in der Zwischenzeit werden wir nur die Hauptkategorien anlegen, um die Homepage zu bekommen, die wir über welche Bücher hatten. Wir hatten auch unsere Artikel auf der Kontaktseite. Jetzt haben wir gesagt, die Bücher haben eine Buchgalerie, die zu einer Buchseite führen würde, das gleiche für Artikel, die zu einem erweiterten IT-Webs externen Link geführt werden würde. Jetzt werden die Artikel auch gleich behandelt, wo es einen externen Link zum Hauptartikel hat . Also lasst uns einen zusätzlichen Block bauen. Verwenden Sie den Punkt zu Punkt, ich werde Bücher hier sagen, eine weitere Kopie des Friedens. Ihr Buch. Im Wesentlichen bauen wir unsere Site-Mapping innerhalb der Website auf. Es muss nicht genau sein, aber es ist etwas Einfaches. Es scheint immer noch für Artikel hier medizinische, so dass wir versuchen, ein kleines Beispiel für unsere Website Nickerchen zu bauen . Wir haben erwähnt, dass der Hauptartikel uns wieder auf Harmony Website treffen würde. Das ist also ein weiterer Zugangspunkt. Also lasst uns das passieren. Also ist diese Kopie fügen Sie diese Individuen hier und wir sagen externe Links. Und das könnte Artikel, Seitengeschichte sein. Lass uns das sehen. Oder es kann auch die Buchkaufseite sein. Gehen wir zurück zu unserer internen Seite. Ich werde Artikel und Bücher entfernen. Kristen würde es etwas sauberer machen. Wir werden das wieder nach oben ziehen und was ich hier tun werde. Lassen Sie uns diese einzelnen Blöcke verbinden. Also werde ich ein Y machen und die Punkte hier mit meiner ausgewählten Objektänderung verbinden, um Grenzlinie anzudocken , und wir werden die Kreise verwenden, um zu bezeichnen, dass das Tier verbunden ist, und ich werde das verkleinern, nur um ein wenig sauberer zu bekommen, hat hat die Form unserer Website . Nun, lasst uns das etwas aufräumen. Es war kalt. Das Geschehen, das wir hier haben. Wäre es, einen aber Kontakt zu kaufen, erhalten Informationen in Kontakt. Also fahren wir einfach wieder runter. Ich weiß es nicht. Das ist die Seite. Hilf einfach, hier oben die Dinge zu säubern. Nun, jetzt lasst uns Luft unsere externe und interne Navigation über den Hubble-Anschluss verbinden. Nun, der potenzielle Kunde zu einer grundlegenden Suche. Vielleicht haben wir es lange Newsletter. Soziales Netzwerk, wo sie über externe Links kommen. Lass uns das nur ein bisschen aufräumen. Ich habe Miss Uppers Wall aufgestanden. Wir werden nur das ist ein bisschen mehr. Geben wir diesen Jungs Pfeilmonate. Nein, der Access Point führt uns immer zurück zur Website, also machen wir das. Er ist im Ellenbogenverbinder, externe Links. Wir werden den Teil hierher stellen. Soziales Netzwerk. Gehen Sie einfach, wissen Sie, die gleiche und grundlegende Operation auf die Website. Alles in allem, die Website wird uns immer zu Oops, es ist berührt diese besondere lila get Schritt. Kaufen Sie ein Buch. Also lassen Sie uns alle diese Markierungen auswählen. Geben Sie es ein schmales. Jetzt erwähnten wir den Artikel brauchen, um die externen ings. Also was? Die mit dem Buchkauf-Website. Also ist es großartig. Ich muss eng mit dem Ellenbogen punkten. Nun, es ist egal, und der Artikel wird wieder hier sein, um ausgewählte Antennen zu schwächen. Hier wählen wir die Grenze. Das wird Kerl. Mal sehen, ob ich den Diamanten kriege, den sie haben. Das ist es, was einen Pfeil ausmacht. Es ist wählen Sie eine andere L. Bisher ist dies, wie unsere User Journey könnte wie ein potenzieller Kunde aussehen. Conexes unsere Website durch vier grundlegende Access Points. Grundlegende Suche England-Newsletter. Ein soziales Netzwerk oder verschiedene Fixture Formteile, die mit unserer Website verbinden. Innerhalb der West-Website kann der Benutzer intern auf der Homepage über Seite, Kontakt, Seitenklicks, Seiteund Artikelseite zu den Büchern und Artikeln navigieren Kontakt, Seitenklicks, Seite . Seite kann auf sekundäre welche Seite oder einen externen Link treffen. Alles in allem kann das Aktionsziel nun den potenziellen Kundenkanal abgeschlossen werden, entweder durch ein Buch immer für Major oder kontaktieren Sie die Arthur. So kann Ihre Reise so aussehen. Jetzt sind Sie dran, dass von Ihren Anwenderträumen. Stellen Sie sicher, dass Sie Ihre Inhalte mit Ihrer Charles Navigation verbinden und überlegen Sie, wie Ihre Benutzer auf Ihrer Website navigieren und was Sie möchten. Sobald das abgeschlossen ist, können wir anfangen, über responsive Design zu sprechen. Wir werden im nächsten Video sehen 14. Sich anpassendes Design: Responsive Design von X. Wie unsere Web-Seitenlayouts werden entworfen, weil es so viele Bildschirme auf dem Ball von Ihrem Handy auf Ihrem Computer Desktop. Welche Seitenlayouts müssen eine Umstrukturierung sein und reagiert auf die sich ändernden Bildschirmgrößen. Alles ist in einer sehr sauberen, organisierten und zielgerichteten Angelegenheit ausgelegt . Der Inhalt wird so konzipiert, dass er sich nach außen dehnt, aber nicht auf eine bestimmte Bildschirmgröße eingestellt ist. Warum Creme von Prototypen helfen, dieses Layout zu strukturieren. Also, was? Seiten entworfen durch Stapeln Blöcke der Inhalt einer Webseite wird in den Körper aufgeschlüsselt , wo wir die Kopfzeile, Hauptfußzeile und ein paar andere semantische Blondinen haben . Da wir Kontakt entwerfen müssen, strecken Sie sich aus. Wir können Greg Layouts verwenden. Wir richten CERN-Blöcke an den Webseiten aus. Körnung. Hier sind einige Beispiele dieser Künstler Chris Bannister. Er schuf einen reaktionsfähigen Drahtraum Jif. Ich glaube nicht, dass dies ein großartiges Beispiel sein wird, um Ihnen das Constable Responsive Web zu zeigen. Werfen wir einen Blick, wenn Sie auf den Desktop klicken. Wie Sie sehen können, wachsen die Desktops hier ziemlich weiß auf den Inhalt, der ausgestreckt ist. Die Produktgalerie hat vier Spalten und wenn wir unten schauen. Die Fußzeile hat auch vier Collins, und sie ist als solche ausgerichtet. Also ist es eine Lügen, um sich in ein Raster zu machen, und es macht es für eine saubere Website, die Navigation und den durchschnittlichen Groeller oder einen anderen Teil des Inhalts, der irgendwie aufgespalten ist . Aber wenn wir einen Blick auf die Tablette werfen, können sie das Produkt sehen. Galerie hat gezeigt, dass es drei Spalten dauerte, so dass im Wesentlichen ein Desktop streng aus seinem Grün, um ein Tablet zu werden. So eine Navigation Durchschnitt Mädchen er, immer noch Art von bleibt die gleiche. Aber die Produktgalerie und der Floater ihr Gitter hat Trumpf zu einem Drei-Säulen-Stil, und das ist nicht so schlimm. Aber das liegt daran, einen Geist zu behalten, würde sich von Gerät zu Gerät entfernen. Vor allem gehen wir von einem Desktop-PC auf ein Tablet. Der Inhalt schrumpft. Eine andere Möglichkeit, darüber nachzudenken, ist, dass sich Inhalte nach außen verbreiten können. Das heißt, wenn wir mit einer mobilen Einstellung arbeiten, sollte der Inhalt nur auf dem Bildschirm selbst angewiesen sein, muss flexibel sein. So haben wir bei ihrer Telefoneinstellung festgestellt, dass sich unsere Inhaltsgalerie jetzt auf ein einspaltiges Raster reduziert hat. Und das ist nicht so schlimm, denn mit dem Telefon, wenn wir von oben nach unten scrollen, ist es in einem einspaltigen Abschnitt. Haben Sie die Navigation bemerkt? Es ist in ein Hamburger-Menü getrunken, so dass diese Navigation jetzt über ein Dropdown-Menü aufgerufen werden kann . Wie Sie Ihre Reaktionsfähigkeit entwerfen, liegt ganz bei Ihnen, aber es gibt einige Designmuster, damit wir folgen können. Aber das ist für ein weiteres Video in der Zukunft. Ich möchte nur darauf hinweisen, diese beziehen, informative, responsive Web-Design. Blawg hier, und sie haben großartige Beispiele, wo sie auf realen Websites berühren. Also hier ist Essen. Da mir die Art und Weise gefällt, wie sie gestylt wurden, sind sie reaktionsschnell Design. Wenn Sie also genau hinsehen, ist dies die Desktop-Ansicht. Sie haben ihre Social-Media-Symbole im Flattern und ihre Navigation auf der linken Seite als Sidebar-Menü. Sie haben das Hauptbild hier in der Mitte und ein Vier-Säulen-Raster mit anderen Artikeln . Wenn Sie jedoch zu einer Tablet-Ansicht wechseln, die Navigation von der Seitenleiste nach oben verschoben. Das Hauptbild hat sich in der Mitte auf die Seite verschoben, und die vier Spalten gut hat sich nach außen auf diese Informationen gestreckt hier ist gleich geblieben . Wenn wir zu einem Telefon oder mobilen Layout gingen, haben wir festgestellt, dass die Navigation ohne die Symbole nach oben geschoben wurde. Der Einheimische hat sich in der Mitte zentriert. Die Mitch Gallery ist noch in der Mitte, aber alles andere ist zu einem einstimmigen Gitter geworden. Dies ist also ein Beispiel für responsive Webdesign. Es ist eine großartige Möglichkeit, darüber nachzudenken, wie Sie Ihre Drahtrahmen und Prototypen vor einem Klassenprojekt auslegen möchten. Ich bleibe bei einer Bildschirmgröße von 1024 Pixeln. Wir werden mehr darüber reden, wenn wir in Richtung unserer Leitung kommen. Befreien Sie mich, aber wir sehen uns im nächsten Video. 15. Weiter Teil 2 Nachricht: danke, dass Sie nehmen, wie eine Website Teil Was zu entwerfen? Wir haben viel über den Entwurfsprozess, insbesondere die Planungsphase, gesprochen. Weiter oben, bitte gehen Sie mit Teil 2 fort, um mehr über die Drahtrahmen- und Portal-Typing-Stufen zu erfahren. Warum wird alles, was wir gelernt haben, in unsere Strukturen unserer Webanwendung einfügen? Wir sehen uns dort.