Transkripte
1. Kurs-Einführung: Wenn Sie eine Website zu entwerfen, ist
es wichtiger, als es dann umwandelt, um ein trendiges Design zu haben, weil Website dort ist um Service oder ein Produkt zu verkaufen, so müssen Sie mit diesem im Auge zu entwerfen. Zu wissen, wie man eine Seite für eine hohe Konvertierung strukturiert, ist wirklich wichtig, weil es
Sie wertvoller für den Kunden und wünschenswerter als Designer macht . Verwendung von Adobe X'd erstellt gibt Ihnen unbegrenzte Möglichkeiten, da es kostenlos
Cross-Plattform-Faktor basiert, und es hat regelmäßige Updates. Hallo, da. Mein Name ist Alex, und in diesem Kurs werden Sie Geheimnisse des guten Designs lernen. Kurz. Was macht die gute Landing Page aus? So erstellen Sie Landingpages, die konvertieren, wie Sie diese Prinzipien zum Planen,
Zeichnen und Erstellen eines Drahtrahmens anwenden . Ich hatte Bilder, Symbole und Schatten, um das Design zu schaffen, dass Anzeigenbewegungen und Übergänge, um
Prototypen zu erstellen . Teilen Sie die Arbeit mit Ihren Kunden, um Feedback zu erhalten und schließlich, wie Sie Ihre Assets für Entwickler exportieren. Dieser Kurs richtet sich an Menschen mit wenig bis gar keiner Erfahrung im UX-Design, denn im Diskurs lernt man alles, was man wissen muss, um UX-Designer zu werden. Ah,
hoffe, du bist bereit, Adobe X D und die erstaunliche Welt des Ux Designs zu lernen und wir sehen uns in der Klasse
2. Kursübersicht: hier und herzlich willkommen zum Kurs. Mein Name ist Alex, und in diesem Video möchte
ich schnell berichten, was wir in diesem Kurs behandeln werden. Zu Beginn des Kurses werden
wir das Logo von unserem Kunden erhalten und wir werden einige grundlegende Informationen
erhalten, und ich werde ihnen einige wichtige Fragen stellen, die uns helfen werden, zu strukturieren und erstellen Sie das bestmögliche Design für dieses bestimmte Projekt. Also, wie wir das tun werden, werden
wir die Entwurfsbeschreibung verwenden, und Sie werden diese leere Entwurfskurzvorlage erhalten, die Sie verwenden und mit all Ihren zukünftigen Projekten füllen können. Und wir werden unseren Kunden die richtige Frage stellen. Und wenn wir all diese Informationen sammeln, dann gehen wir zu Fuß, inspirieren uns und erstellen ein grundlegendes Moodboard mit den relevanten Bildern mit den relevanten Farben über dieses Projekt. Nachdem wir das getan
haben, werden wir auf Abschleppdraht-Framing Abschnitt zu bewegen, und wir gehen Fuß, erstellen einige grundlegende Drahtrahmen mit einfach Stift und Papier, und wir werden unsere Drahtrahmen mit einer Zielseite strukturieren Techniken, die ich im Diskurs ausführlich
erklärt habe. Wenn wir es also nicht tun, werden wir weitermachen und im Grunde erstellen, was wir hier innerhalb
von Adobe X'd zeichnen , und wir werden diese Elemente an verschiedenen Orten platzieren, indem wir die Logik hinter dem Designbrief und insbesondere hinter diesem Projekt verwenden. Dann gehen wir weiter und auf Bilder im Schatten an verschiedenen Icons und verschiedenen Dingen, die dieses Design Pop machen werden,
die dieses Design attraktiv für die potenziellen Besucher und potenziellen
Kunden machen . dieses Geschäft. Und wenn wir damit fertig sind, wir einen Styleguide erstellen
, der für ihre Entwickler nützlich sein wird, denn darin wird es in der Lage sein,
alle verschiedenen Farben zu sehen . Wir haben all die verschiedenen Fonds, verschiedene Symbole, verschiedene Schaltflächen, Schatten und so weiter, und das wird sehr nützlich für sie später sein,
wenn sie anfangen zu entwickeln und diese Website und machen es Leben. Und nachdem all diese Dinge würden sich auf den Toe Prototyping-Modus bewegen und wir gehen Toe einige verschiedene Animationen und einige verschiedene Übergänge einschließen. Um dieses Design wirklich zum Leben zu erwecken und dem Kunden zu erklären, wie all dies funktionieren wird , denn wenn Sie die Statik an den Client senden, ist
es nicht notwendig, dass sie Ihre Logik und das Denken hinter dieses Design . Es ist wirklich eine nette Ergänzung, wenn Sie eine Art von Animation erstellen können und wenn Sie sie ihnen zeigen können, weil sie auf diese Weise Ihre Logik und alles, was in diesem Projekt
involviert ist, verstehen können,
und sie werden in der Lage sein , um Ihnen dann ein richtiges Feedback zu geben, wenn sie damit zufrieden sind oder nicht, und dann können
Sie einfach innerhalb von Adobe X'd all diese Zehe ändern, aktualisieren und an den Client für eine Revision zurücksenden. Und sie werden in der Lage sein, Ihnen Kommentare zu diesen Revisionen im Grunde in Echtzeit zu geben. Also freuen Sie sich darauf, Sie im Kurs zu sehen. Ich hoffe wirklich, dass Sie etwas Wert daraus bekommen,
und ich kann es kaum erwarten, mit Ihnen all diese Informationen zu teilen, über die ich gerade gesprochen habe. Also sehe ich dich im Kurs
3. Das Briefing: in diesem Video werde
ich es durch die Designbeschreibung gehen. Ich werde erklären, wer der Kunde ist, was sie von diesem Projekt benötigen, und was wir suchen werden, wenn wir anfangen zu entwerfen und mit der Planung zu beginnen. Also, ohne weiteres, lasst uns anfangen. Also auf der linken Seite sehen Sie Design-Briefung, die gefüllte Design-Briefung, die ich interviewt. Klient. Ich stelle alle Fragen und habe diese Designbeschreibung erstellt, während Sie auf der rechten Seite die
leere Vorlage haben , die Sie für alle Ihre zukünftigen Kunden verwenden können. Wenn ich also etwas näher heranzoomen, können
Sie sehen, was diese Designbeschreibung besteht. Also alle diese Elemente, können
Sie es hinzufügen. Sie können auf den Text doppelklicken und Sie können ihn Text hinzufügen. Sie können die Farbe aus diesen Symbolen ändern. Sie können die Abstände ändern, wenn Sie möchten. Sie können ganze Teile aus dieser Entwurfskurzvorlage löschen und schließlich hier unten. Sie können die Zeitleiste sehen und sie löschen, wenn Sie sie nicht benötigen, aber lassen Sie schnell einspringen und zeigen Sie Ihnen unsere Designbeschreibung. Es ist also ein Hedonisten-Boutique-Hotel. Das ist also ein kleines Hotel auf der Insel vor Mykonos, die in Griechenland ist. Und der 12. Oktober ist die Frist für die Projektabwicklung. Und genau hier sehen Sie das Firmenprofil. Sie sind also ein kleines Unternehmen aus Mykonos,
Griechenland, Griechenland, und haben ein kleines Boutique-Hotel auf der Insel. Sie haben sechs Mitarbeiter und wollen expandieren, um in der großen Saison zu neigen. Und sie werden das nicht tun, indem sie vier weitere Leute beschäftigen und auf sechs zurückgehen, wenn die Saison vorbei
ist, was bedeutet, dass in der Hauptsaison, es gibt wirklich viel Arbeit zu tun. Deshalb brauchen sie mehr Menschen. Und das ist wichtig, nur um zu verstehen, wie groß das Unternehmen ist, so dass Sie das im Kopf behalten können , wenn Sie mit dem Design beginnen. Ihr Hauptpotenzial ist eine schöne Aussicht und schönen Garten, die sie perfekt für Hochzeiten und kleinere Partys, aber auch von kleineren Firmendecken und Meetings haben. Sie bereiten ihr eigenes Essen zu, lagern aber Kuchen und Alkohol an externe Partner aus, da sie ihren Wein nicht produzieren, was in Griechenland und in Sanftmut ist, haben viele der kleinen Boutique-Hotels das als U. S. B, das ist ihre wichtigste Verkaufsargument. Sie wollen also, dass Sie dorthin kommen und ihren handgefertigten Wein erleben. Aber diese Firma hat es nicht und sie produzieren keinen eigenen Wein, so dass sie ihn von externen Partnern auslagern. Sie haben einen kleinen Parkplatz, aber wenn sie größere Veranstaltungen veranstalten, mieten
sie den nahe gelegenen Hof von ihrem benachbarten Nachbarn
, der im Grunde nur ein Gras ist, und sie parken dort die Fahrzeuge. Sie wollen in den nächsten Jahren eine weitere Etage hinzufügen, um ihre
Kapazität zu erweitern . So wollen sie das Hotel größer machen, damit sie noch mehr Personen unterbringen und noch mehr Räume im Inneren des Hotelprojekts oder Ihnen
haben können. Also, was brauchen sie von uns? Als Designer brauchen
sie das Website-Design,
beginnend mit der Homepage, um mehr Leads zu gewinnen und sie von der großen Buchung Rex zu vertreiben . Websites mit ihrer eigenen Website, um größere Zahlungen zu sammeln und die Kunden langfristig zu halten weil sie auf den Fuß schauen, jedes Jahr wiederholte Urlaube
anziehen und den Anwaltskunden aufzubauen. Es wird Jahr für Jahr zurückkommen, weil sie nicht die Budgets haben, um es die großen
Marketing-Kampagnen jedes Jahr zu tun , aber sie würden lieber halten, dass die bestehenden Zauberer Jahr für Jahr wieder kommen. Was all das bedeutet, ist, dass sie Buchungsvereinbarungen haben. Dasselbe, wie jedes andere Hotel in der Welt würde Buchungs Back-Websites wie Buchung dot com, Expedia und die anderen Spieler in der Branche. Aber das Problem mit denen ist, dass sie dich gegen deine Konkurrenz stellen. Also wirklich, es gibt viel mehr Chancen, dass Sie einige dieser Leads verpassen werden. Sie werden zu Ihrer Konkurrenz gehen, wenn sie schönere Bilder haben. Wenn sie bessere Angebote haben. Einige dieser Jungs aktualisieren Angebote auf einer täglichen Basis. Wenn Sie also ein kleineres Boutique-Hotel wie diese Jungs betreiben, haben Sie
wahrscheinlich nicht viel Zeit, um Ihre Angebote auf all diesen Websites zu aktualisieren . Manche Websites tun dies automatisch, andere
aber nicht. Sie müssen also sicherstellen, dass Sie eine engagierte Person angestellt haben, um das auf einer täglichen Basis zu tun und mehr Websites, die Sie Ihr Hotel angeboten haben, auf der mehr Arbeit gibt es für sie, und Sie müssen sie monatlich bezahlen, auch außerhalb der Saison, weil Sie Leute gewinnen wollen, die für das nächste Jahr und die nächste Saison buchen, ganze Saison lang und das ganze Jahr über, für diese Angelegenheit. Deshalb wollen sie den Kundenstamm im Grunde behalten,
und sie wollen, dass sie Jahr für Jahr wieder kommen, damit sie keine großen
Marketing-Budgets für Promotions und Social Media Marketing, Kampagnen und Videos ausgeben müssen und so weil sie bereits bestehende Anwaltskundschaft haben, die bereit ist, Jahr für Jahr wieder zu kommen
, zu ihrem Hotel und als nächstes dort zu bleiben. Wir haben Ziele und Ziele. Also, was sie wollen und was sie von diesem Design brauchen. Sie wollen mehr Conversion von ihren bestehenden Kunden. Sie fanden heraus, dass ihre Absprungrate zu hoch ist, weil die Leute nicht über das
Heldenbild scrollen und wollen, dass er nach unten geht und die Seite erkunden. Mehr Hauptziel ist es, Landing Page zu erstellen, die die Besucher engagiert und machen sie scrollen nach unten, um ihre E-Mail zu verlassen, um ein bisschen mehr zu entdecken, was sie in
diesem Hotel zu bieten haben , so dass sie ihnen Werbematerial senden und vermeiden große Buchung von Websites, damit sie wieder Einnahmen sammeln können. Wir versuchen, große Buchungs-Websites zu vermeiden, weil sie mehr Einnahmen von
ihnen selbst halten wollen und diese Affiliate-Affiliate-Provisionen sowie Konkurrenz von
anderen Hotels zu vermeiden . Wer ist ihre Zielgruppe? Also Menschen mittleren Alters auf der Suche nach einer Hochzeit Ort, kleinere Unternehmen auf der Suche nach einer Konferenz Wenn Sie ältere Menschen auf der Suche nach einem ruhigen Hotel um ihren Urlaub zu verbringen, so dass Sie nicht sehen, jüngere Menschen hier, Sie sehen keine Kinder hier. Natürlich sind
Familien willkommen, aber wenn sie ihre eigenen Kinder mitbringen und nicht nur die Kinder auf eigene Faust schicken, denn diese Leute wollen das ruhige Ambiente des Hotels behalten und sie wollen bestehende Kunden glücklich zu halten und ruhig zu bleiben, weil es wirklich bis zu den Kunden zu entspannen und nicht Dies ist keine Art von Partei, wenn Sie so wollen, dass wischen in. Wie Sie das Alter sehen können. Wo ist zwischen 35 und 65 Geschlecht, 40% männlich, 60% weiblich. Das ist, weil, wenn Sie für Hochzeit suchen, wenn Sie, gibt es größere Chancen, dass Frauen für diese Orte suchen, weil in der Regel Frauen
sind diejenigen , die planen die Hochzeit Veranstaltungsorte und Hochzeit Details. Kleinere Unternehmen auf der Suche nach Konferenz, wenn Sie wieder Sie haben engagierte Person auf der
Suche nach diesen Typen aus, wenn Sie verwenden, und sie sind in der Regel weiblich, weil Frauen im Allgemeinen mit diesen Arten von Aufgaben besser
als männlich umgehen . Alle Menschen wieder Weibchen sind da ein bisschen mehr als Männer, weil Weibchen gerne ein bisschen mehr
erkunden und im Voraus sehen und planen, wohin sie mit ihrem Ehemann und
ihrem Familienland gehen wollen . Denn das Hotel ist ziemlich teuer Westeuropa und USA, weil sie diese Zielgruppen ansprechen wollen. Englisch sprechende Länder werden von Kunden bevorzugt, aber wenn nicht alles tun Grundsätzlich Stadt off Bewohner. Diese nur wichtigsten Städte außerhalb der westlichen Länder. So lange kommt die New Yorker Verdoppelung alle langsam ins Spiel, weil sie sahen AH, große Zahl von Nordeuropäern kamen in ihr Hotel vor Jahren und, natürlich, Paris Arbeitsplatz oder Firmenbesitzer oder höhere Verkäufer Job Einzelpersonen. So 60 Kinder, 60 k pro Jahr und mehr Medienkonsum Gewohnheiten, 60% Instagram, 30% YouTube und 10% Facebook. Also verbrachten diese Leute die meiste Zeit auf Instagram, um YouTube-Videos anzuschauen, und sie sind weniger auf Facebook als auf diesen anderen sozialen Netzwerken. Und schließlich haben wir tägliche Gewohnheiten. Die sind also beschäftigt. Einzelpersonen werden dazu beitragen, zu enthüllen orientierten Lebensstil. Also wieder einmal wollen sie nicht, dass die Zehenparty da ist. Sie wollen nicht dorthin gehen, um sich zu betrinken oder Drogen zu nehmen oder so etwas. Sie wollen dorthin gehen, um sich zu entspannen und zu Fuß. Vergiss ihre Jobs. Vergessen Sie ihr Leben, für die Dauer ihres Urlaubs. Als nächstes haben
wir Anforderung entworfen, so dass sie ah Website-Design Rückzug Spalte benötigen. Tolles System. Das ist es, was sie Entwickler von US-Asset-Dimensionen und -Auflösungen benötigen. Für den Anfang brauchen
wir 1920 Pixel, weiß und reaktionsschnell. Toby hat später entworfen, wenn vereinbart, weil wir immer noch nicht mit dem Kunden über das Responsive vereinbart haben. Sie wollen es sehen. Sie wollen sehen, wie es aussieht, weil die Mehrheit dieser Leute von den
mobilen Geräten kommen . Also haben sie das im Sinn. Aber sie wollen das Design sehen, wie es zuerst auf der Website und auf dem Desktop-Computer und danach aussieht. Wenn sie es mögen, wollen
sie es. Sie möchten, dass wir eine responsive für mobile spätere Dateiformate entwerfen. Wir haben Adobe X'd als Projektdatei, und Assets sind auch in SPG exportiert werden. Eine Beschleunigung G für Bilder erfordert Farbpalette. Sie wollen, dass wir Farbpalette erstellen, die wirklich neutral und wirklich sehen und hotel orientiert so wirklich minimal sein wird. Wirklich schöne und saubere Bild-Assets, Toby enthalten. Wir werden freie Bilder verwenden, bis ihr Fotograf die Retusche beendet hat und uns
ihre endgültigen Bilder zur Verfügung stellt . Und schließlich haben
wir Kopien Dokumente zugeordnet, so dass sie eine endgültige Kopie geliefert. Aber Platzhalter sollen stattdessen einbezogen werden. Statt großen Absätzen, die benutzerdefinierte Fleisch sind, wir stattdessen einige warme ipsum-Text einfügen, bis sie die endgültige Kopie geliefert haben. Schleppen Sie uns. Und schließlich haben wir Budget und Zeitplan. So Budget ist in drei Teile aufgeteilt, wie das Projekt selbst. So 2400 für die Erkundung, Planung, Landing Page Design und Vorbereitung. Das ist der erste Teil dieses Projekts. 3600 für die vollständige Website-Design und die Schaffung der reaktionsfähigen 50% im Voraus 50% nach der
Lieferung von Assets . Also denkst du vielleicht, wo ist der dritte Teil? Nun, der dritte Teil wird das Design oder für die Social-Media-Seiten sein, das Design für die mobilen Geräte, wenn möglich, und wenn nötig. Und Sie werden später einige Videos zur Verfügung stellen, weil wir einige grundlegende
Videobearbeitung für sie durchführen werden. Und
das natürlich ist
natürlichnicht in diesem Kurs enthalten. Aber ich möchte es trotzdem erwähnen, denn das ist doch der Teil dieses Projekts. Also hier haben wir es kaputt. Also für den ersten Teil des Projekts, so dass Explosion, Planung, Landing Page Design und Vorbereitung Vorbereitung von Kurs beinhaltet Vorbereitung
auf andere Seiten. Da wir einen Styleguide erstellen werden, werden
wir eine Farbe erstellen. Wir werden einige Fonds und einige Fondskombinationen Größen erstellen. So eine, so dass die Vorbereitung für andere Seiten, die in einer zweiten Phase von diesem Projekt
entworfen werden . Planung ist also fünf Tage. Sehr sucht drei Tage. Publikumsforschung ist drei Tage Design, vier Tage Präsentation, zwei Tage Revisionen, fünf Tage und Lieferung. Die Gesamtlänge dieses Projekts für den ersten Teil beträgt also 22 Tage. Also, was ich damit meine, ist Planung, also werden wir einige grundlegende Planung machen. Also werden wir uns dem Hotelmarkt vorstellen. Wir werden uns der Location vorstellen. Also, wo ist Sanftmut? Wofür ist es berühmt? Wir wollen etwas über die lokale Kultur wissen. Wir wollen über die Eigentümer selbst,
über das Unternehmen wissen . Das ist also unsere Planungsforschung. Also werden wir im Grunde über die Konkurrenz recherchieren. Wir wollen wissen, wer sie sind. Wir wollen wissen, was sie ihre Alleinstellungsangebote nutzen. Also uns Frieden. Wir wollen über ihren Standort wissen. Also wollen wir den Standort für die ganze Insel wissen, was die Menschen dort tun können. Und wir wollen auch die Lage abseits der Konkurrenten wissen, denn wir wollen sehen, wie weit sie von unserem Hotel und unserem Kunden entfernt sind, und wir wollen sehen, was sie bieten. Vielleicht können wir dem Kunden etwas vorschlagen, damit er das
auch in sein Angebot aufnehmen kann . Als Nächstes haben
wir Zuschauerforschung, und Sie können dies auf verschiedene Arten tun. Zum Beispiel können
Sie verschiedene kleinere Unternehmen kontaktieren und sie einfach fragen, ob Sie
hierher kommen möchten . Wenn Sie hierher kommen möchten, was würden Sie gerne sehen? Was würden Sie gerne tun? Was für ein Angebot hätten Sie, damit wir das können? Nein, was diese Leute von dem Angebot wollen. Was diese Leute vom Hotel selbst wollen. Welche Art von Mahlzeiten haben sie? So haben sie
zum Beispiel zum Beispiel kleinere Mahlzeiten. Haben sie größere Mahlzeiten? Essen sie alle zusammen? Mögen sie Buffet-Stil? Oder sehen sie gerne einen Kellner? Es ist die ganze Zeit da. Also diese Art von Dingen. Wenn Sie jemanden kennen, der heiraten wird, können
Sie sie fragen, denn das ist die Zielgruppe für dieses Hotel ist gut und Sie können
sie fragen . Was möchten Sie von diesem Standort aus? Was möchten Sie für Ihre Hochzeit und tun das Publikum Forschung in dem, was wir
genau hier angegeben . Wenn Sie also eine dieser Personen finden und sie kontaktieren können, dann können Sie Ihre Zielgruppe richtig recherchieren. Und Sie können auch wissen, welche Art von Farben diese Leute mögen Welche Art von
Designstile Können Sie so weiter integrieren? Denn es ist alles gut und gut, wenn Sie es sind. Wenn Ihr letztes Projekt zum Beispiel einige Grady INTS und einige schöne Illustrationen und einige moderne Texturen und
so etwas
enthält , ist
das alles. Wir sind wirklich nett. Aber vielleicht sind diese Leute nicht an dieser Art von Stil und dieser Art von Design interessiert. muss man also berücksichtigen, und man muss für dieses besondere Publikum entwerfen. So fühlen sie sich wie zu Hause und sie haben die geringere Bombenrate als die früheren Leute diese Website
besucht haben, denn das ist unser Hauptziel. Als Nächstes haben
wir Design, also werden wir all das in vier Tagen entwerfen. Also, im Grunde werden
wir es auf Papier zeichnen. Wir werden Drahtrahmen erstellen und den Kunden kontaktieren, ihnen ein paar weitere Fragen stellen und dann schließlich ein Design erstellen, das Sie mit unserer Präsentation an den Kunden senden werden. Also werden wir sie präsentieren und zwei Tage mit Präsentationsüberarbeitungen verbracht. Sie werden ungefähr fünf Tage dauern. Manchmal kann dies eines Tages sein, also im Grunde nur eine Religion oder gar keine Religion, und manchmal kann es länger sein, also behalte das in Betracht. Wenn Sie eine enge Frist für Ihr Projekt haben. Und schließlich haben wir die Lieferung. Also dauert im Grunde 1 bis 2 Tage, wenn das Projekt größer ist. Aber weil dieser kleiner ist, kann
es nur etwa
30 Minuten oder eine Stunde dauern, um alles und die Zehe zurück zu exportieren und vorzubereiten und an Ihre Kunden und ihre Entwickler zu senden. Also im Grunde, das ist unser Designbrief. Dieses Video lief ein bisschen länger, aber ich möchte mit Ihnen alles teilen, worüber wir mit dem Kunden gesprochen haben. So können Sie wissen, welche Fragen Sie Ihren Kunden stellen müssen, damit Sie besser verstehen können, was sie brauchen, was sie wollen und
was sie nicht wussten, dass sie brauchen oder wollen. Und das kannst du ihnen alles vorschlagen. Und Ihr Ziel dafür ist es, die höchstmögliche Qualität von der Designspitze
zu liefern, Ihren Kunden glücklich zu machen und sie wiederzukommen zu lassen . , Zum Beispiel, wenn sie
in unserem Fall eine mobile App erstellen möchten oder sie wollen ein paar Poster erstellen oder was auch immer es ist, können
Sie das glücklich halten, und Sie können die zurückkehrende Kunden kommen zurück zu Ihnen für das nächste Projekt, das sie haben könnten, und Sie können auch lernen und verstehen, ihre Zielgruppe und was Sie tun können, um ihnen den größten Wert zu
bringen und sie auf dieser Seite für die längste Zeit in den nächsten paar Videos gehen Toe tun bekämpfen ihre Analyse und im Grunde sehen, was die Konkurrenten aus diesem Hotel haben das Angebot auf ihren Websites, so dass wir besser verstehen können. So, zum Beispiel, Farbpaletten, sie verwenden Bilder dort mit Überschriften. Sie verwenden untere Halsbänder, Platzierungen und so weiter, damit wir uns vertraut machen können, denn bevor wir in den
Designprozess für dieses spezielle Projekt gehen , also werde ich Sie dort sehen.
4. Analisys 1: in diesen Videos. Wir wollen über die Konkurrenz für unser Hotel sprechen. So 1. 1 ist Carbon AKI Hotel in Afghanistan. Aziz, Sie können diese Stoppleiste für die Navigation genau hier sehen. Meiner Meinung nach sollte
es mehr Platz haben. Es sollte mehr Klarheit haben, denn auf diesem dunkelblauen Bild, zum Beispiel, können
Sie sehen, dass sie Buch jetzt haben. Knopf Es ist blau über blau, und es ist nicht leicht reizbar. Auch hier, die Texte über Lee sagen im Herzen, die Stadt zu machen. Aber was ist im Herzen der Sanftmut unten? Was können wir in diesem Hotel tun? Also alle diese Informationen sollten genau hier an der Spitze angezeigt werden, denn wenn Sie keine von diesen Informationen mögen, werden
Sie nur abprallen und verlassen diese Website und erhöhen die Absprungrate. Und das ist es, was wir für unsere Website beseitigen wollen. Außerdem müssen
sie nur Bilder und diese Pfeile sind freundlich mit Art seltsam geformt, und Sie würden nicht wissen, ob es Pfeile gibt, wenn Sie nicht auf sie klicken. Außerdem funktioniert
Weiß auf Weiß nicht so gut,
so dass all diese Dinge berücksichtigt werden müssen. Außerdem haben
sie hier einen Drop auf Unterkunft. Und wie Sie beim Hover sehen können, ändert
es die Farbe in Blau. Also wieder, wir haben Blau auf Blau. Es ist nicht brise leicht lesbar. Sie haben dieses Sprachmenü direkt hier. Aber sie haben nur Englisch in Griechenland. Wir wollen vielleicht eine Zehenposition, die ein bisschen besser im Kunstdesign ist. Also weiter, sie haben Online-Buchung direkt hier, was schön ist, aber meiner Meinung nach sollte
es ein bisschen mehr Informationen hier kombinieren können. So haben Sie nur Zimmer und es auch Zimmer. Ok. Ich will ein Zimmer. Aber welche? Sie haben keine dieser Informationen. Wenn es kalt ist, können
Sie all diese verschiedenen Räume sehen. Aber in welchem Zimmer? A. Meine Buchung. Genau hier. Also, meiner Meinung nach, sollten
sie das hier machen. Auch Erwachsene. 1234 Aber was, wenn ich meine Kinder mitbringen will, kann meine Kinder nicht in dieses Hotel bringen. Und auch, dieses Buch jetzt sieht nicht wirklich so aus wie dieses Buch jetzt und auch dieses Buch jetzt. Daher möchten Sie vielleicht die Hierarchie und die Verwendung derselben Schaltflächen an einigen Stellen und verschiedene
Schaltflächen an anderen Stellen in Betracht ziehen. Also weiter unten wir über uns haben, was ohne Bild ist und warum wählen Sie uns? Also würde ich diese in ihre verschiedenen getrennten Abschnitte setzen, weil es wirklich alles
zusammengefügt ist . Wenn ich in diesem Bereich nur ein wenig nach unten scrolle, haben
Sie ziemlich viel Text. Außerdem ist
dieser Text viel kleiner als dieser Text. Die Abstände sind ein bisschen abseits, so dass Sie diese Basis genau hier sehen können. Das hier und die sind ein bisschen anders. Also wirklich, wir sollten alles, was wir hier für unsere Website sehen, ändern und den Abstand und die Nutzung
von Leerraum ein bisschen besser machen , damit potenzielle Besucher und Kunden ein bisschen besser lesen und
durchscannen können , als es hier ist. Was die Organisation von den Landing Pages für die Elemente der Landing Page betrifft, werden
wir darüber im nächsten Abschnitt namens Landing Page Ein anderes mich sprechen, wo wir ins Detail darüber gehen, was Sie brauchen, um innen aus Ihrer Landing Pages, egal, welche Ihre in. Aber in diesem Abschnitt und in den nächsten paar Videos, wollen
wir nur über die wichtigsten Konkurrenten für unser Hotel sprechen. Was sie tun und welche Fehler sollten wir vermeiden, wenn wir anfangen, unsere Website zu gestalten. Wenn Sie sich ein bisschen nach unten bewegen, können
Sie hier ein Zimmer sehen. Aber nochmals möchten
wir mehr Informationen über diese Räume erfahren und wir haben keine Bilder von Räumen. Also, zum Beispiel, Sie haben Blumen hier. Aber warum? Warum kannst du mir einfach zeigen, wie das Zimmer hier aussieht? Außerdem haben
wir Economy Zimmer. Was ist ein Economy Zimmer? Vielleicht auf Hover statt dieses Bildes. Zoom-Weg. Wir können ein bisschen mehr Informationen über den Raum selbst haben, so dass wir wissen, was der
Economy-Raum ist , weil Sie vielleicht wissen, was es ist. Aber ich, als Besucher, sicherlich nicht. Und ich will meine Zeit nicht verlieren, indem ich einfach in all diese Räume klicke. Wir sollten einige grundlegende Informationen für jeden dieser Zimmer hier auf der Homepage haben damit wir wissen können, ob wir dieses Zimmer wollen oder nicht. Also, wie Sie sehen können, haben
sie hier sieben verschiedene Zimmer. Wenn Sie also Ihre Zeit investieren möchten, um mehr über jeden dieser Räume zu erfahren, müssen
Sie auf sieben verschiedene Seiten gehen, anstatt nur die Mehrheit der
Informationen direkt hier von der Homepage zu lernen . Also vielleicht stattdessen, aus diesem schönen Bild-Zoom-Effekt. Vielleicht, wenn Sie einige Texte direkt hier, unten und zum Beispiel Preisklassen haben. Also dieses Zimmer geht von diesem Preis zu diesem Preis, es kann so viele Menschen unterbringen. Es hat so viele Betten, kein Badezimmer, teilt
sich ein Badezimmer mit einem anderen Zimmer. Ist es leicht zugänglich? Zehenrollstuhl, zum Beispiel. Hat ein paar Kinder keinen Spielbereich oder so etwas. Also all diese Informationen, meiner
Meinung nach, sollten hier auf der Homepage sein, bevor Sie klicken und dann gehen und erkunden können, weil ich nicht so viel Zeit habe. Und wie Sie sehen können, gibt es ziemlich viel außerhalb des Wettbewerbs im Angebot. Wenn ich also nicht mag, was ich wieder sehe, werde
ich gehen und die Absprungrate erhöhen, die wir für unseren Kunden eine niedrigere wollen . Jetzt können Sie sehen, genau hier haben sie live Ah, zu Hause weg von zu Hause Erfahrung, das ist großartig. Aber was hat es mit all diesen Bildern zu tun? es erzählt keine Geschichten, die wir wissen müssen. Es gibt uns keine weiteren Details über dieses Hotel und diese Zimmer. Warum haben Sie das hier hingelegt? Es dient keinem Zweck, abgesehen von vielleicht etwas Inspiration. Aber wenn Sie sich entscheiden, es zur Inspiration zu bringen, warum setzen Sie nicht das Bild Ihres Hotels dahinter, damit wir uns mit Ihrem
Hotel inspirieren können ? Weil wir hier sind, um Ihr Hotel zu buchen. Wenn ich ein paar Zitate lesen möchte, gehe
ich zu Instagram oder Pinterest und suche nach Inspiration. Zitate dort. Ich bin hier, um ein Hotel zu buchen, also gib mir einfach die Hotelbilder. Als nächstes haben
wir einige Bewertungen und Bewertungen sind schöne Dinge zu haben. Aber vielleicht können Sie einige Bilder direkt hier einfügen, um uns wieder in Ihr
Hotel zu integrieren , so dass wir höhere Hotel sehen können. Sieht aus wie nicht nur ein paar zufällige Wörter und Sie können einige Trip Advisor Logo direkt hier sehen . Aber wenn Sie nichts über Trip Advisor wissen, werden
Sie sich fragen, was das ist. Stellen Sie also vielleicht ein Bild hier in den Hintergrund, oder stellen Sie Bild auf der einen Seite und dann eine Rezension auf der anderen Seite, damit wir wissen können, dass dies
für Ihr Hotel ist . Also als nächstes haben wir eine Karte und was gut ist. Aber noch einmal, es hat kein Kontaktformular. Es hat nur Kontaktdaten und Standort. Und wenn ich auf den Standort klicke, wird
es mir den Standort direkt hier zeigen. Aber warum? Wieder mal, warum? Warum hast du es dort hingelegt? Also als nächstes haben
wir abonnieren und das ist gut, aber es ist nicht wirklich prominent. Und vielleicht möchten Sie ah,
unten rechts hier einfügen, um Menschen Anreize zu geben, um Ihren Newsletter zu abonnieren. Und schließlich haben wir hier ein Foto, das nur eine Grundfußzeile ohne weitere Informationen ist. Also, zum Beispiel, wenn ich Sie kontaktieren möchte, wenn ich das vermisse,
also, aber was ist das? Genau hier? Alles, was Sie haben, sind einige Koordinaten und Kartenkoordinaten. Und wenn Sie nicht wissen, was sie sind, wofür sie sind, könnten
Sie diesen Teil einfach überspringen. Jetzt können Sie sehen, ho entworfen es, und es ist wirklich schön, dass sie sich befördert. Aber es bringt nichts Gutes in dieses Hotel. Schließlich haben
wir uns hier unten fallen, die auch schön Zehe haben, aber nicht in dieser Art und Weise. Und Sie möchten vielleicht darüber nachdenken, einige Informationen von Heather zu entfernen und sie auf
das Foto zu setzen , insbesondere Informationen, die für den Header Toby innerhalb der
Navigation nicht wirklich wichtig sind . Das war's also für das erste Hotel. Im nächsten Video gehen
wir zu Fuß, analysieren das zweite Hotel. Dann wollen wir uns umdrehen. Und wenn wir es getan
haben, gehen wir auf die Landing-Page-Anatomie Abschnitt des Kurses. Und ich werde erklären, welche Elemente Sie in Ihre Landing Pages einfügen sollten. Wie sollten Sie Ihre Kopie und so eins strukturieren? Also sehe ich dich im nächsten Video.
5. Analisys: Als nächstes haben
wir ein Hotel, Nicholas, das ist im Grunde, dass sie benutzen. Das ähnliche Layout ist die vorherige Website, aber sie haben hier überhaupt keinen Text. Also, wenn Sie zum ersten Mal auf dieser Website landen, können
Sie vielleicht wollen Sie sich fragen, was das ist. Das ist also ihre dritte Folie, wo sie schreiben Ah Hotel folgte der Sonne in Sanftmut so groß. Aber wir sind auf dieser Folie gelandet, die völlig leer ist und wir wissen nicht, was es ist. Wenn wir also nicht klein sind, wissen
wir einfach nicht, wonach wir suchen. Außerdem haben
sie diese Navigation direkt hier im Dezember-Menü versteckt. Und diese gelbe Farbe zeichnet sich wirklich als wirklich stark aus und greift Ihre Sinne grundsätzlich an. Ich mag es also nicht wirklich. Sie sollten etwas dunkleres verwenden. Vielleicht legen Sie etwas Overlay über das Bild, so dass Sie nicht jedes Mal blind werden, wenn Sie die
E-Mail besuchen . Tut mir leid, die Speisekarte. Ich werde es schließen. Und wie Sie sehen können, verwenden
sie diese Farbe auf ihrer Website. Diese Information hier ist gut, weil sie es genau hier an der Spitze setzen. Aber ich denke, sie sollten es ein bisschen anders und ein bisschen besser organisieren und nicht all diesen
leeren Raum haben und nur für das Buch verwenden. Jetzt Knopf weiter oben, Wir ziehen nach unten und Sie können sehen, sie haben schöne nehmen Design-Hotel in Meekness Insel, Griechenland, das ist großartig. Aber die Organisation von diesen Abschnitten ist nicht wirklich so gut. Also noch einmal, was Sie mir als Besucher anbieten, bieten
Sie mir ein paar exklusive Zimmer an? Bieten Sie mir Wein und Speisen Erfahrung, um mir nur ein Zimmer zu bieten? Oder haben Sie Ihr eigenes Restaurant? Ist das ein Café, das ich hier sehen kann? Oder ist es ein spezielles Restaurant für die Hotelbesucher? Ist das der Innen- oder Außenpool? Was können Sie mir auf einen Blick erklären, damit ich meine Entscheidung treffen,
fördern
und meine Entscheidung besser für mich machen kann ,
fördern ? Auch diese lesen mehr Tasten sind einfach nicht so lesbar. Und Sie können sehen, dass dieser Text wirklich ziemlich klein und nicht so lesbar ist. Es gibt keine Schlagzeilen, also weiß ich nicht, was ich atme und wenn es einfach nach unten scrollen, sind nur diese Bilder zu sehen, und Sie könnten diese wichtige Nachricht überspringen, die sie für Sie haben
könnten. Du weißt es also nicht? Ist das der Hauptraum? Ist das das zweite Zimmer? Okay, du hast Unterkunft und Süßigkeiten. Aber wenn ich es hier ändere, haben
Sie Zimmer und Süßigkeiten. OK, aber diese Bilder sehen wirklich ähnlich aus. Vielleicht sollten Sie vielleicht den gesamten Abschnitt von Ihrer Zielseite widmen. Zwei Zimmer und zwei Suiten und Zehe. Erklären Sie mir ihre Unterschiede. Vielleicht, um ein paar Preise zu setzen, damit ich es wissen kann. Was ist der Unterschied zwischen Zimmern und Suiten? Kann ich meine Kinder dorthin bringen? Gibt es einen rollstuhlgerechten Eingang oder nicht? Erhalte ich meinen eigenen Parkplatz? Keine dieser Informationen gibt es. Und all diese Informationen sind wirklich wichtig, wenn Sie Ihre Entscheidung treffen, weil Sie Ihren Urlaub in diesem Zimmer verbringen werden. Also 10 14 Tage, sieben Tage spielt keine Rolle. Selbst wenn es nur eines Tages wirst du dein Geld und deine Zeit verbringen, in diesem Raum zu leben und du weißt nicht, was es ist, du hast dich auch abschleppen. Dann geht es in jede einzelne Zimmerseite und erkundet es ein bisschen weiter dort. Es ist also nur Zeitverschwendung. Ich möchte alles wissen, was ich kann, was ich auf dieser ersten Seite brauche. Also auf dieser Zielseite, bevor ich meine Zeit und später mein Geld für dieses Hotel widme. Als nächstes, wenn Sie nach unten scrollen, haben
wir ein Gästebuch. Und wieder einmal, ich habe mich wirklich über diese gelbe Farbe geärgert und Sie können alle diese Folien gleich sehen. Dieses Bild gleitet also gleich wie dieses. Testimonials hier. So kann es wirklich nervig Zeh sein. Verstehen Sie, welcher ist, der sich bewegt. Das bewegt sich. So können Sie Ihre Aufmerksamkeit nur nicht auf einen bestimmten Abschnitt von dieser Zielseite zu einem
Zeitpunkt widmen , weil Sie dies vielleicht lesen möchten, aber das bewegt sich weiter. Ihre Sehkraft bewegt sich also von hier nach hier, dann von hier nach hier. Und Sie können sich nicht wirklich auf einen bestimmten Abschnitt von dieser Seite konzentrieren. Und alles bewegt sich einfach weiter. Und Sie können es nicht richtig lesen, weil ich auf meinem Computer bin. Wenn ich meine Maus hier lege, sollte sich
das nicht mehr bewegen. Aber wie Sie sehen können, hier ist mein Mauszeiger und er bewegt sich immer weiter, und ich kann einfach nicht alles lesen, was ich das lesen möchte. Es ist ein bisschen länger, aber es ist mir weggelaufen und ich habe es nicht geschafft, es zu lesen. Also bin ich jetzt ein bisschen nervig. Ich werde nach unten scrollen und Sie können in diesem Abschnitt sehen, sie haben Einrichtungen und Geschmack aus Mittelmeer. Also was ist schön, aber Einrichtungen wofür? Ist das ein Restaurant? Okay, ist es sagt Frühstück am Pool Schwimmbad. Also sollten Sie nicht nur das richtige Restaurant hier statt Einrichtungen. Und vielleicht können Sie hier ein paar Gerichte stellen, Ihre lokale Küche drinnen. Als nächstes haben Sie einen Pool. Aber welche Art von Schwimmbad? Wir sehen nur einen Kerl hier genießen? Aber ich sehe hier kein Schwimmbad. Vielleicht möchte ich hier noch ein paar Bilder auf einen Blick sehen. Ich möchte nicht zu engagierten Bezahlung gehen, nur um zu sehen, wie das Einfache aussieht. Ich möchte es hier auf der Homepage sehen, bevor ich meine Entscheidung treffe. Also lesen Sie das mehr? ist es wirklich überflüssig Meinung nachist es wirklich überflüssig. Hier steht also glänzende Cocktails. Aber warum? Ich kann Cocktails im Restaurant haben, oder? Warum haben Sie einen engagierten leichten dafür. Es ergibt wirklich keinen Sinn für mich. Und als nächstes haben wir Geschmack Geschmack des Mittelmeers. So haben Sie drei Rutschen für das Essen und Trinken, und eine Rutsche ist für den Pool. Warum können Sie das in zwei Abschnitte trennen? Also, zum Beispiel, wir haben ein Restaurant und dann können Sie diese drei Dinge innerhalb von dort erklären und dann haben gewidmet Abschnitt für den Pool. Wenn das Ihr wichtigster Verkaufsargument vor diesem Hotel ist, macht für mich wirklich keinen Sinn. Aber das ist es, was wir auf die Erkundung dieser Videos gehen. Das ist, was wir zu erreichen versuchen,
ist zu verstehen, wie die Konkurrenten ihre
Websitesmachen ,
ist zu verstehen, wie die Konkurrenten ihre
Websites unserer Meinung nach, was sie falsch machen und was wir versuchen können, auf unserer Website für unser Hotel zu verbessern und Erhöhung der Konversionen und die Absprungrate zu reduzieren, weil wir diese Fehler vermieden. Daher möchten wir unsere Besucher durch das gesamte Erlebnis durch die gesamte Landing
Page führen , bis sie ihre Entscheidung treffen, bevor sie von unserer Landing Page verschwinden. Als Nächstes haben
wir Neuigkeiten, also haben wir Neuigkeiten hier. Meiner Meinung nach dieser Abschnitt keinen Platz auf der Zielseite des Hotels. Aber wirklich, es liegt an ihnen Aktivitäten. Warum sind die Aktivitäten hier unten? Wenn ich nach Mykonos komme, möchte
ich wissen, was ich gegen Sanftmut tun kann. Ich möchte nicht den ganzen Weg nach unten auf dieser Seite scrollen, nur um zu sehen, was ich dort tun kann. Es ist wirklich schön und gut, mir dein Restaurant in deiner Umfrage zu zeigen. Aber wenn ich dorthin komme, was kann ich tun? Warum sind Aktivitäten den ganzen Weg hier unten? Warum sind sie nicht an der Spitze. Es ist wirklich jenseits von mir und auch Aktivitäten A. So können Sie sehen, dass dieser Abschnitt diesen Absatz hat
, der nicht wirklich leicht lesbar ist, und der Text ist viel zu klein. Es ist weiß über weiß auf einer Art cremefarbenen Hintergrund. Es ist wirklich nicht wirklich gut lesen. Diese Bilder erklären nicht so viel. Meiner Meinung nach sollte
das ein bisschen mehr Leben in ihnen sein. Aber es liegt an dem Fotografen, der sie mitgenommen hat und bis zu diesen Leuten, die das
Hotel gelesen haben . Mehr Buttons sind nicht wirklich leicht lesbar durch die gesamte Landing Page und eine Abstimmung
darauf . Ein bisschen anders. Melden Sie sich für den Newsletter an. Wie Sie sehen können, ist
es wirklich seltsam. Text ist auf der linken Seite. Diese Box ist genau hier in der Mitte. Und diese Social-Media-Icons sind genau hier. Warum sie da sind. Wir müssen uns nur für Newsletter anmelden. Es sollte sauber sein,
einfach, um die Aufmerksamkeit zu erregen. Warum sind Social Media Symbole genau hier? Sie sollten nicht da sein, weil wir sie hier haben. Und weil dies eine Scroll-Navigation ist. Wenn ich hier scrolle, können
Sie sehen, dass wir sie hier und hier haben. Also, warum? Warum verschwenden Sie diesen Raum, wenn Sie diesen Raum nutzen können. Ah, viel besser, um die Informationen, die wirklich wichtig für diese Website. Als nächstes haben
wir ein paar schöne Bilder hier. Aber wieder erzählen sie uns keine Geschichte. Wir können einen Typen hier am Pool sehen und diese Leute, die sich auf die Sonne legen. Aber wo sind die? Ist das im Hotel? Ist es außerhalb des Hotelgeländes? Wo ist das? Ist es am Pool? Weil es nicht so aussieht. Ist das der Strand? Geben Sie uns also einen Kontext. Erklären Sie uns, weil wir zum ersten Mal hier sind. Wir kennen Ihr Hotel nicht. Wir wissen nicht, ob wir in Ihrem Hotel für unseren Urlaub bleiben wollen. Versuchen Sie also einfach, uns mehr mit mehr Informationen zu überzeugen, was relevant ist. Schleppen Sie uns. Und schließlich haben
wir eine Fußzeile, die eine bessere Fußzeile ist als in diesem ersten Beispiel, das ich Ihnen gezeigt habe. Aber immer noch nicht so toll, weil ihnen hier einige Hauptinformationen fehlen. So zum Beispiel möchte
ich Ihnen
zum Beispielschnell eine E-Mail schicken. Wie kann ich das machen? Gibt es E-Mails, auf die ich klicken kann? Ja, es ist genau hier. Aber wenn ich meine Kunden nicht einrichten lasse, welche Mehrheit der Leute es nicht tun, wissen
sie nicht, wie sie einrichten sollen. Sie können diese Personen nicht per E-Mail senden. Vielleicht willst du Zeh. Schicken Sie ihnen eine Frage über Ok. Ich mag diesen Raum zum Beispiel, und mag diese Aktivitäten, also sollten Sie sie fragen. Wie viel kostet ein Reiten in Mykonos? Wenn ich 10 Tage in deinem Zimmer bleibe, wie kannst du das tun? Sie müssen sie telefonisch anrufen und Sie müssen sie hier abschleppen. Aber Sie müssen diese E-Mail auswählen. Kopieren Sie es ist, Sie können sehen, dass es die ganze Sache wählt. Es ist wirklich nicht so nützlich für Ihre potenziellen Besucher. So müssen Sie Ihre Zielseite besser strukturieren, damit sie die
Informationen, die sie am meisten benötigen, auf den Blick haben können , ohne Ihre Zielseite zu verlassen, ohne durch mehrere Seiten zu
gehen, nur so dass sie Informationen, die sie benötigen. Das war's also. Für dieses zweite Beispiel, im nächsten und letzten Video, werde
ich Ihnen das Schildkrötenbeispiel zeigen, das viel besser ist als diese beiden, aber immer noch viele Informationen fehlen, die meiner
Meinung nach sollte in erster Linie aufgenommen werden, also werde ich Sie dort sehen.
6. Analisys 3: in gestörtem und abschließendem Video. Wir gehen Toe Analysieren Porto Mykonos Hotel und Sie können sehen, dass sie getan haben, ein bisschen anders und ein bisschen besser als diese anderen Hotel-Websites, die ich Ihnen gezeigt. Aber immer noch gibt es eine Menge Dinge falsch mit dieser Website meiner Meinung nach und einige Dinge , die wir vermeiden werden, wenn wir anfangen, unsere Website zu entwerfen und zu planen. Also genau hier oben, innerhalb der Navigation. Wie Sie sehen können, ist alles ziemlich zusammengefügt. Ich mag, wie sie das tun, weil was auch immer sie hier enthalten, diese Navigation
wird Zeh Arbeit. Aber es hat immer noch viel in für viele Informationen, die meiner Meinung nach nicht notwendig sind. Sie haben also eine Galerie hier. Warum Restaurant und Bar? Warum Einrichtungen Okay? Aber warum? Wie dieser Buch-Online-Button ist nicht wirklich prominent in steht genau hier. Und warum hast du dein Logo wie hier? Weil es nur so viele Informationen aus dem Rest der Website frisst. Warum legen Sie es nicht einfach in die Navigation ein, damit Sie diesen Platz freigeben können. Sie haben einen Text, oder? hier im Heldenbild. Aber wie Sie sehen können, ist
es wirklich nicht leicht lesbar. Und es sagt uns auch nicht viel. Vielleicht wollen wir Informationen über Kann ich meine Kinder dorthin bringen? Haben Sie einen Parkplatz? Was ist das für ein Hotel? Wenn ich
zum Beispielmit meiner Familie dorthin gehe,
werde ich mich einfach mit einigen Geschäftsleuten oder anderen Familien vermissen
oder zusammen mit meiner Familie dort sein? zum Beispiel Wenn ich
zum Beispielmit meiner Familie dorthin gehe, werde ich mich einfach mit einigen Geschäftsleuten oder anderen Familien vermissen Also bringen Sie mir einfach alle Informationen, die ich hier auf der Homepage und im Inneren
des Heldenbildes brauche . Und innerhalb dieser ersten Folie, wenn Sie einen Schieberegler haben oder vielleicht ein Video hier einfügen, das Ihrem Hotel zeigt, wer dort wohnt und all diese Informationen. Wie Sie sehen können, tut
keine dieser drei Websites das. Sie haben hier ganz oben keine Videos. Sie haben nur diese statischen Bilder. Wir erzählen einfach keine Geschichte und geben uns keine wichtigen Details, die wir brauchen könnten. Wie Sie sehen können, schreibt
es mir einfach schlecht. Schließen Sie das Ideal. Mein Mick. Ehrliches Stadthotel. Großartig. Aber was ist mit diesen beiden? Ich habe gerade drei von diesem idealen Coniston Hotel gefunden. Warum ist deine besser als diese beiden? Geben Sie mir nur ein paar Informationen. Zeig es mir. Überreden Sie mich, online zu buchen, direkt hier auf Ihrer Website. Wenn Sie nach unten scrollen, gefällt
mir das, weil sie dem Benutzer nur einige weitere Informationen geben. Aber es ist wirklich sagen, scrollen Sie hier nach unten, anstatt nur das Symbol zu setzen. Ich mag das Symbol besser, weil es sauberer ist. Aber eine Forschung hat gezeigt, dass, wenn man nach unten scrollt, die Leute wissen, was sie tun müssen. Wenn Sie ein Designer sind, wissen
Sie sofort, was Sie tun müssen. Aber die Mehrheit der Menschen nicht. Vielleicht klicken einige auf diesen Pfeil hier. Und wenn Sie keinen Link haben, wie sie es tun, klicken die
Leute hier und gehen dann, weil sie nicht wissen, was zu tun ist. Aber zum Glück haben sie eingeschlossen. Wenn ich also auf den Cyberlink hier klicke, wird
es mich zum nächsten Bildschirm bringen. Wie Sie hier sehen können, haben
sie ein bisschen eine Einführung für sich. Aber warum setzen Sie dieses kleine Bild, wenn Sie diese schönen großen Bilder direkt hier haben? Warum haben Sie es hierher gebracht? Warum hast du kein Video aufgenommen? Bezahlen Sie einfach jemanden, um ein schön aussehendes Video zu erstellen. Legen Sie es hier. Machen Sie eine schöne, große, mutige Buchstaben und eine schöne,
große, mutige Überschrift, die mir erklärt, was Sie sind, wer Sie sind. Bist du für mich oder nicht? Und vielleicht enthält einen anderen Aufruf zum Handeln und nicht diesen. Weil, wie Sie sehen können, diese Steuer nicht so gut gegen diese Farbe liest, vielleicht sollten Sie überlegen, diese Farbe vielleicht einige dunklere Schattierungen von dieser Farbe für den Text, vielleicht sogar einige dunklere Texte aus. Zum Beispiel, diese Farbe nur so, dass Ihre Taste ein bisschen schöner oder so dieses Buch online weiß auf der Stahlfarbe nicht so gut stehen. Aber noch einmal werde
ich hier einen anderen Abschnitt stellen, der ein bisschen besser erklärt, wer wir sind, was wir tun und welchen Wert können wir Ihnen als Besucher bringen? Als Nächstes haben
sie zukünftige Unterkünfte. Wie Sie noch einmal sehen können,geben
sie uns keine Informationen über die Zimmer. Wie Sie noch einmal sehen können, Sie müssen auf das Bild klicken, das Sie innerhalb von der Seite Toe gehen müssen, erfahren Sie mehr über jedes Zimmer. Aber sie geben Ihnen keine Informationen direkt hier auf der Homepage über die Zimmer, die sie im Angebot haben, was ich wirklich denke, ist eine verlorene Gelegenheit für all diese Websites. Und wir werden das ändern, als wir später anfingen, unsere Website zu entwerfen. Und wie Sie sehen können, haben
sie nur diese beiden Zimmer. Sie haben also diesen Pfeil hier, der nichts tut, ist, dass Sie sehen können, dass ich
darauf klicke , dass nichts tut. Vielleicht können wir darauf klicken, aber es bringt uns oben. Es schafft Frustration. Wie Sie sehen können, hat
es noch ein Zimmer. Aber wenn ich diesen Pfeil nicht sehen, wie Sie einen Klick darauf sehen können. Aber nichts passiert. Also, warum ist es da? Warum? Warum kreieren Sie nicht einfach. Wenn Sie vier Zimmer haben, warum gefällt Ihnen diese erste Seite nicht? Aber ein bisschen anders, natürlich, und erstellen Sie für eine andere Bilder. Warum benutzen Sie dieses Layout ohne den Saroso? Wenn jemand das von seinem mobilen Gerät aus betrachtet, kann
er dies möglicherweise nicht lesen und sehen. Und sie denken vielleicht, dass Sie nur zwei Zimmer in Ihrem Hotel haben, die sich so auf
Hotel-Highlights bewegen . Warum ist das hier? Warum ist es nicht genau hier oben? Warum? Ich musste nach unten scrollen, nur um diese Highlights auch zu sehen, Was ist das? Ciara? Was ist das? Erfahren Sie mehr über was? Herrliche Aussicht Großartig für behinderte Gäste. Warum ist das nicht alles ganz oben? Familienfreundlich? Kein Bellen freundlich wissen, warum? Warum haben Sie nicht diese unglaublich wichtigen Informationen hier? Was ist, wenn ich mit dem Bus ankomme und ins Stadtzentrum gehe? Wie komme ich zu Ihrem Hotel? Was ist, wenn ich mit dem Auto dorthin komme? Kann ich mein Auto überall lassen? Muss ich für externe Parkplätze bezahlen? Haben Sie Ihren eigenen Parkplatz? Daher sollten alle diese Informationen auf der Startseite enthalten sein, damit die Leute
sofort wissen können . Ok, das ist für mich oder das ist nicht für mich. Ich werde gehen, ohne meine Zeit auf dieser Website zu verschwenden. Aber wie Sie sehen können, sind
keine dieser Informationen auf einer dieser Websites. Und schließlich, wenn ich den ganzen Weg nach unten scrolle, können
Sie Juden für zwei Galerie sehen, also kann ich sie nicht von hier aus überprüfen. Ich muss in die speziellen Seiten für diese Galerien gehen. Also kann einmal Gelegenheit nicht verpassen. Und dieser Pfeil hier, was er tut, wenn ich darauf klicke, es bringt mich nach oben. Großartig. Aber wenn ich auf diesen Pfeil klicke, bringt
es mich nach oben. Also macht es das Gleiche. Warum ist dieser Pfeil hier? Stellen Sie sich
zum Beispiel
vor,jemand möchte hier klicken. zum Beispiel
vor, Aber durch Zufall klicken sie auf diesen Bereich genau hier, so erzeugt nur Frustration. Warum ist es da? Warum all diese unwichtigen Elemente in Ihre Seite aufnehmen? Und genau das werden wir im nächsten Abschnitt des Kurses analysieren und darüber sprechen. Zitat Landing Page, nicht sagen, wo ich hingehe. Zehe zu Fuß durch die gesamte Landing Page-Prozess über die sind die wichtigen Elemente , die Elemente zu vermeiden, welche Elemente enthalten, was ist die perfekte Landing
Page-Struktur und so weiter. Aber um dieses Video zu beenden, wie Sie hier sehen können, bevor sie abonnieren. Aber noch einmal, wirklich eine kleine Box. Warum sollten Sie diese kleine Box hier ohne Knopfbesuch setzen? unserem Schwesterhotel. Großartig. Aber warum ist das so prominent? Genau hier? Sie wollen gehen. Sie wollen, dass ich diese Website verlasse und auf diese Website gehe. Ich möchte nicht, dass ich auf dieser Website buchen. Aber auf dieser Website, so schafft nur Verwirrung. Warum ist es, dass es nicht da sein muss. Sie können direkt hier sehen Sie haben Kontaktinformationen, Telefon und E-Mail, das ist ein bisschen schöner als diese anderen Websites. Aber warum fügen Sie nicht einfach das schöne,
einfache, große Kontaktformular mit einer Karte daneben, damit ich weiß, wie ich Sie kontaktieren kann? Vielleicht möchte ich Sie nach dem Zimmer über den Preis fragen. Also noch einmal, wenn Sie keinen E-Mail-Client mit Ihrem Browser verbunden haben, müssen
Sie alle diese Treffer auswählen, dann gehen Sie zu Ihrem E-Mail-Client und schreiben Sie dann Ihre E-Mail dort. Es ist wirklich nicht so einfach zu tun. Und es braucht wirklich viel Zeit für diese potenziellen Besucher zu tun. Schließlich haben
wir hier an der Fußzeile alle diese Informationen noch einmal, wer die Website Nizza entworfen hat, dass sie ihre Aber warum? Und schließlich all das hier für die Social-Media-Seiten und Sharing und jemanden, aber meiner Meinung nach ist
wirklich nicht so gut gestaltet und sollte ein bisschen schöner und ein bisschen besser in ein bisschen logischer Weise aufzuräumen all diese Navigation und einige andere Elemente aus der Fußzeile direkt hier zu setzen. Also, das ist es für die Wettbewerber Analyse Abschnitt im nächsten Abschnitt des Kurses, A ZAY sagte, Wir werden mit der Landung Peking beginnen, nicht für mich. Und wir werden darüber sprechen, was eine Zielseite ist, warum Umwandlung Angelegenheiten Funktion über Schönheit Landingpage Struktur, was zu entfernen und so werde ich Sie dort sehen.
7. Was ist eine Landing: Landing Page ist in der Regel die erste Seite der Homepage von Ihrer Website,
und es ist die erste Seite, auf der Ihre Besucher landen , so können Sie sich vorstellen, ob sie für Sie auf Google suchen und klicken Sie auf delinking, um die
Homepage zu suchen . Oder die Zielseite ist die erste Seite der Website, die sie besuchen werden und der Zweck der Landing Pages, um in kürzester Zeit zu erklären, worum es auf Ihrer Website geht, was Sie anbieten und wer von Ihrem Angebot profitieren wird, weil Sie Stellen Sie sich vor, dass Mehrheit der Leute, die auf unsere Website kommen, nicht wissen, worum es geht. Ich weiß nicht, was du anbietest. wissen nicht, was Ihr Produkt oder Ihre Dienstleistung ist, also müssen Sie sie auf der Zielseite in kürzester Weise und auf
möglichst prägnanter und klarer Weise erklären , was Sie anbieten, wie sie von Ihrem Service oder Ihrem Produkt, denn wenn sie es nicht bekommen, werden
sie gehen. Der ganze Sinn der Website besteht darin, das zu verkaufen, was Sie anbieten, also entweder ein Produkt oder eine Dienstleistung und die Zielseite ist Ihr Verkäufer, also können Sie sich vorstellen,
dass ein Verkäufer dort draußen geht und entweder das Produkt oder den Service , der Ihre haben in der Regel 3 bis 5 Sekunden, wenn Menschen auf Ihrer Seite landen, bevor sie verlassen. Also müssen sie davon überzeugen, zu bleiben und nach unten zu scrollen. Weil Sie so viele Informationen in Ihrem Header-Bereich und über der Falte stopfen können, weil Mehrheit Ihrer Informationen unten sein wird. Die Informationen, die Sie dort oben stellen, werden in der höchstmöglichen Qualität und der höchstmöglichen Umwandlung in Bezug auf off sein, erklären Ihren potenziellen Interessenten, worum es sich bei Ihnen handelt und was Sie ihnen ihre Tipps und Techniken, die von großen Agenturen entwickelt wurden, die Ihnen helfen können, dies zu erreichen, indem Ihre Zielseite in der richtigen Weise
strukturieren unddie richtigen Elemente
verwenden, die richtigen Elemente
verwenden, was bedeutet, dass Sie Ihre potenziellen, äh, Leads, und Kunden im Heldenbereich. Sobald sie angehängt sind, werden
sie anfangen zu scrollen, und wenn der Scroll nach unten, und wenn der Scroll nach unten,müssen
Sie diese Informationen so strukturieren, dass sie auf einen Blick verstehen was Sie anbieten, weil Seien wir ehrlich, es Zahl liest die Informationen, die Sie zur Verfügung stellen. Sie scannen nur die Website nach den Informationen, die sie benötigen. Sie müssen also diese Informationen so strukturieren, dass sie, wenn sie nach unten scrollen und Ihre Website
scannen, sofort verstehen, worum es geht, was Sie ihnen anbieten und wie sie von dem profitieren werden, was Sie sind ihnen zu bieten. Wir werden alle diese Punkte in diesem Abschnitt des Kurses besprechen. Und im nächsten Video werde
ich Ihnen zeigen, was eine Konvertierung ist und warum es für Ihre Kunden wichtig ist, also werde ich Sie dort sehen.
8. Warum Konversionswert wichtig ist: warum die Umwandlung auf der Website wichtig ist, ist einfach das Angebot an Geld zu drehen , wo es sich um eine Dienstleistung oder ein Produkt handelt. Also, zum Beispiel, wenn Sie Schuhe verkaufen, Umwandlung ist mit, wenn jemand bezahlt Sie Geld für diese Schuhe über Ihre Website, was ist eine gute Umwandlung hängt von Ihrem Produkt oder Service, wie teuer es ist, wie wertvoll es ist und ob es dem richtigen Kunden gezeigt wird. Also, zum Beispiel, wenn Sie etwas verkaufen, das in einer wirklich kleinen Nische ist, können
Sie. Sie können nicht erwarten, dass Ihre Konversion Toby High, weil es einfach nicht genug Leute in dieser Nische gibt, um eine ausreichend große Menge zu verkaufen. Also entweder aus Ihrem Produkt oder Service, um diese Konversionsrate zu erfüllen, die Sie im Auge hatten . Also bedenken Sie das, wenn Sie etwas anfangen. Wenn Sie also
zum Beispiel an einer Website arbeiten, um sich zurückzulehnen, zum Beispiel an einer Website arbeiten, um sich zurückzulehnen, müssen
Sie verstehen, wie groß aus der Nische es ist, in der Kunden versucht, ihren
Service zu verkaufen oder sie sind geparkt. Daher können
Sie wissen, wie groß der Conversion-Rate Sie mit Ihrer Zielseite erreichen können, weil es keinen Sinn hat, endlos zu testen. Wenn die Nische einfach zu klein ist. Gute Konversionsrate hängt wirklich von Ihrer Branche Nische ab, aber Sie wollen nicht nur eine Zelle, sondern profitabel sein und Geld haben, um die Linie zu ersparen. Deshalb sage ich, dass du Schlepptau hast. Erkunden Sie diese Nische,
sehen Sie, wie groß sie ist und sehen Sie Summen, wie viel Möglichkeit Sie haben, innerhalb dieser
Nische zu verkaufen . Und stellen Sie sicher, dass Ihre Suche Google für gute Conversions in Ihrer Branche. Wenn Ihre Kunden sie nicht kennen und versuchen, diese Ziele zu erreichen, indem sie Ihre Zielseite testen, denn in den meisten Fällen konzentrieren sich Kunden nur auf das Produkt, sie konzentrieren sich nicht zu sehr auf die Forschung, glauben es oder nicht. Wenn Sie also anfangen, über die Website zu verkaufen, werden
sie einige magische Dinge von Ihnen erwarten. Aber wenn Sie Ihre Forschung nicht durchführen, wenn Sie ihnen nicht das Potenzial aus der Nische zeigen, in der sie sich befinden, wenn sie die Nische dort nicht richtig
erforscht haben, dann verbringen Sie Ihre Zeit sinnlos mit dem Testen und Iterieren Ihrer Landung Seite, aber nichts zu erreichen, weil es einfach nicht genug Leute gibt, um zu kaufen. Außerdem müssen
Sie diese Nische recherchieren, damit Sie wissen können, wie Sie die
Informationen auf Ihrer Landingpage anvisieren und strukturieren . Und darüber werden wir als Nächstes reden. Funktion über Schönheit, denn es gibt einfach nicht genug Platz
für beispielsweise für beispielsweise Grady INTS oder schön aussehende Bilder in allen Nischen der Welt. Es gibt einfach Platz für diese Dinge in einigen Nischen und nicht genug Platz für andere, und wir werden darüber im nächsten Video sprechen.
9. Funktion über Schönheit: in diesem Video werden
wir über Funktion über Schönheit sprechen und warum es wichtig ist, sich auf die
Funktion außerhalb der Zielseite zu konzentrieren , anstatt wie schön es aussieht. Es ist natürlich
wichtig, sich auf das Design zu konzentrieren und es für die Besucher angenehm zu gestalten, aber es ist viel wichtiger, sich auf die Funktionalität außerhalb der Seite zu konzentrieren. Also werde ich Ihnen einige wirklich bekannte Beispiele in der Online-Welt zeigen. Und ich werde es durch einige von ihnen gehen, nur um Ihnen zu zeigen, was eine gute Landing Page
in einer guten Landing Page-Struktur ist . Also hier sind wir, im ersten Beispiel zu Shopify Pik, und Sie können sofort sehen, was es online mit Shopify verkauft. So wissen Sie, dass Sie in der 1. 2. Sie auf dieser Website landen, was es Ihnen bieten kann, können
Sie das Logo direkt hier sehen. Sie können sehen, was Sie sehen können. Es wird von mehr als 100.000 Unternehmen weltweit vertraut, so dass Sie wissen, dass dieses Geschäft bekannt ist. Wenn Sie gerade davon zum ersten Mal gehört haben und sofort, können
Sie sehen, dass Sie Ihre E-Mail-Adresse eingeben können. Starten Sie die kostenlose Testversion und Sie können hier ohne großen Schrei für sie in ihrem Baum kostenlose Testversion sehen. So zeigen sie Ihnen bereits ihre wichtigsten Vermögenswerte aus ihrem Geschäft. So können Sie kostenlos starten. Du kannst sofort anfangen. 800.000 Menschen machen bereits Geschäfte mit uns. Sie können bei Shopify alles in den ersten Sekunden vor Ihrer Landung auf
dieser Seite verkaufen . Dann können Sie das Bild direkt hier sehen. Also wissen Sie es. OK, also ist dies für Websites sowie für mobile Geräte. Ok, Cool. Ich sehe einige Produkte direkt hier, damit ich sofort weiß, was ich mit
Shopify verkaufen kann . Und genau hier können Sie einige der wichtigsten Funktionen sehen, die sie auf ihrer Website anbieten. Sie können hier sehen, die bereits ihre Servicer verwenden, können sehen, wer sie verwendet und genau hier, Kundenreferenzen und noch einmal, rufen Sie die Aktionstaste. Wir würden eine kostenlose Testversion starten, damit Sie sehen können, dass es keine Grady INTS gibt und keine wilden Hintergründe gibt. Es gibt keine auffälligen Bilder dort. Kein Hintergrundradio wird nur abgespielt. Verlangsamung auf den Kopf. Alles ist extrem einfach. Alles ist extrem unkompliziert. Dies geschieht durch viele Monate außerhalb von Tests und Integrationen und Kundenumfragen und so
weiter . Aber wie Sie sehen können, ist
diese Website nicht besonders schön, aber sie ist funktional und von dort. Der Hauptpunkt von der Zielseite ist es, es funktionelle Zehe zu machen. Damit es für Ihr Unternehmen funktioniert, nicht nur für Ihr Unternehmen, sondern auch für Ihre Kunden, denn wenn sie hier landen, müssen
sie es sofort wissen. Was können sie auf Ihrer Website tun und wie sie ihnen helfen können? Denn das ist vor allem das Wichtigste, wie
es mir als Besucher helfen kann, indem Sie Ihre Website besuchen. Das ist also der Hauptpunkt von der Zielseite. Als nächstes haben wir Airbnb und Sie können sehen, dass es ein bisschen anders ist als Shopify. Aber Sie können hier sehen, der Hauptpunkt von der Website Geld verdienen als Airbnb Host. Also wissen Sie es. Okay, also habe ich ein Zuhause. Ich kann es ausleihen und etwas Geld verdienen, und genau hier haben
Sie sofort eine Frage, und Sie haben eine Antwort und Sie haben zwei große rote Call-to-Action-Buttons mit einigen Preisen, die Sie zum Start locken. Und im Grunde alles, was du hier siehst. Sie waren schon als Besucher davon begeistert, diese Website zu besuchen und ihre
Dienste zu nutzen , denn das ist das Wichtigste. Wie ich es erkläre. Wie gesagt, müssen Sie nicht
mehr lesen, um die Aufmerksamkeit der potenziellen Besucher zu erregen und sie herunterzubringen um mehr zu lesen. Alles ist genau hier. Aber wenn Sie mehr sehen wollen, sind
Sie bereits interessiert. Und du siehst das Bild hier, das die Geschichte erzählt. Also ist alles da, wo es sein muss. Wenn Sie also nach unten scrollen, können
Sie ein bisschen mehr Informationen sehen. Jetzt erklären sie, was ihre Dienste sind. Sie haben die Zeugenaussage hier. Sie können sehen, dass wir Sie abgedeckt haben. Also überreden sie dich, indem sie sagen, dass wir dir den Rücken haben. Wir werden Ihnen bei jedem Schritt des Weges helfen, damit Sie genau hier sehen können, wie Zahlungen geleistet werden . Einfach. Wie können sie dich bezahlen, damit wir hier noch ein Zeugnis haben. Genau hier haben sie ein paar Daten. Wie viele Gastgeber? Es gibt durchschnittliche Aufenthalte und so weiter über Airbnb. Also über sie Wer sind sie? Ihre Fragen beantwortet. Also noch einmal sie beantworten Ihre Fragen alle auf dieser Seite, und Sie können mehr hier erfahren, und Sie haben wieder losgestartete Schaltfläche genau hier. Also ist alles wirklich einfach. einmal gibt es keine verrückten Elemente auf dieser Seite. Es gibt keine Übergänge. Sie sind nicht einmal ein einzelner Schieberegler. Wie Sie sehen können, sind
alle diese Bilder behoben. Wie Sie sehen können, gibt es kein einziges Video. Es gibt nichts auf dieser Seite, aber es ist wirklich Hallo Converting Seite, und es funktioniert Wunder für ihr Geschäft. Deshalb benutzen sie es,
weil es effektiv ist und ich dem nicht genug vertrauen kann. Es ist am wichtigsten, was in Website-Design ist, dass Website effektiv ist, so dass es
besser für Ihre Kunden konvertiert , so dass es bringt ihnen mehr Leads und mehr Kunden für ihr Geschäft. Als nächstes haben
wir in diesem Jahr, so dass wir steuern ist im Grunde ah, Software und ein Tool für video-basierte Unternehmen. So können Sie sich YouTube vorstellen, aber für Unternehmen, und Sie können genau hier sehen, was sie tun. Also haben wir diese Frau mit der Kamera, damit wir es sofort wissen können. Okay, es geht um Video, das du Wortvideo hier sehen kannst. Fangen Sie an. Protokollierung, Videos
ansehen. Also alle diese Coulter-Aktionen sind hier wirklich einfach und einfach, das Menü
direkt hier an der Spitze zu navigieren . Und genau hier kannst du sehen, was sie für dich tun können, damit sie deine Videos hosten können. Das können sie. Sie können neue Videos schnell erstellen und wachsen über ihre Fähigkeiten. So haben sie ausführliche Anleitungen von Marketing direkt hier. Hier können Sie einige Kunden sehen. Also, wer waren sie? Ihre Kunden in der Vergangenheit. Und Sie können hier einige weitere Videos darüber sehen, wie Sie anfangen können und das war's. Es ist wirklich einfach. Es ist wirklich ziemlich einfach in gewisser Weise. Aber alles, was Sie brauchen, um loszulegen, ist genau hier. Alles ist wirklich einfach. Sie können leicht durch alles navigieren, so dass Sie alle Informationen sehen können, die Sie brauchen direkt hier auf der Homepage, ohne die Notwendigkeit zu gehen alle externen Seiten im Moment . Nur damit Sie in der Lage sind, ein bisschen mehr über dieses Geschäft zu erfahren. Als Nächstes haben
wir geweint und Sie können sehen, was sie hier tun. Brechen Sie die kalte Barriere bauen Sie bessere Business-Websites schneller ohne Programmierung, und Sie können sofort loslegen. Sie können ihre Kunden direkt hier sehen. Sie können sehen, wie einige ihrer Websites und einige der Elemente aussehen und genau hier erklären
sie, was Sie in einigen schönen Animationen tun können. Das ist also die Art von Pause weg von der Regel und das sieht wirklich schön aus und da, inklusive ein paar Videos hier. Aber noch einmal, Sie können keine verrückten Zutaten sehen, Jedes Hintergrundvideo verlangsamt Ihre Website alle aggressiven Übergänge und aggressive Animation. Alles ist so einfach. Alles ist so klar, dass Sie diesen Text leicht vor diesen Hintergründen lesen können. Sie können diese Bilder direkt hier sehen. Also in jedem Abschnitt, alles ist gut erklärt, um innerhalb des realen Abschnitts für einen Designer für scheinen
s und E-Commerce für die Interaktion zugeben . Sie können diesen Kerl vom Sonntag sehen, was er mit der Waffe erlebt und wie er
damit zufrieden ist . Sie können hier den Start sehen. Also, wie können Sie diese Website und noch einmal von berühmten Unternehmen starten? Dieser Eventbrite ist wirklich eine große Firma, und dieser Kerl erklärt, wie er damit zufrieden ist. Also haben wir noch einmal was? Warum? Und die potenziellen Vorteile für Sie als neuer Benutzer Von diesem Service. Als Nächstes sind
wir gewachsen. Also noch einmal das Gleiche hier. Sie können sehen, wie es aussieht, was es ist, was es für Sie tun kann und wie Sie davon profitieren können, in einem einfachen Abschnitt, richtig? Schön groß auf dem weißen Hintergrund. So können Sie es leicht sehen. Scannen Sie es. Und genau hier haben sie die Ressource ist und was sie für Sie tun können. Und wieder einmal haben
Sie die bisherigen Kunden gleich hier sowie nett. Großer Einstieg unten. Also wieder haben Sie es hier und Sie haben es hier, damit Sie sehen können, dass es keine zusätzlichen
Informationen gibt . Zum Beispiel, wie kann ich meine Erkältung kompilieren? Wie kann ich meine Bilder exportieren? Wie kann ich das tun? Wie kann und kann das? Alles ist drinnen außerhalb der Website. Aber die wichtigsten Informationen finden Sie hier auf der Homepage, so dass Sie beginnen
und später mehr erfahren können , wenn Sie mehr Informationen benötigen. Und schließlich haben wir Anwendertests, so dass Sie großartige Kundenerlebnisse haben können und sie beginnen mit menschlichem Innern. Dieses Tool ist also für Benutzertests gedacht, und Sie können sehen, dass sie einige wirklich frische,
saubere,
modern aussehende Elemente direkt hier im Hintergrund verwenden saubere, . Hier können Sie einige Coulter-Aktionen sehen. Irgendwelche für Treffer hier, um es zu verstecken. Sie können sehen, die Navigation ist wirklich schön und klar. Sie können diese Drop-Downs sehen. Wie schön früh. Sie sind angelegt. Sie können einige Aufrufe zu Aktionen sehen. Genau hier. Hier wird alles erklärt. Also was? Wir machen ein bisschen mehr darüber, was wir tun, und Sie können uns ausprobieren. Und wir haben drei sogenannte Richtungstasten. Genau hier. Sie können die Demo sehen und Sie können das Video aus dem Dienst sehen. Sie können frühere Kunden sehen, wie es funktioniert. Hier ist das Problem, das Sie als Besucher haben
könnten. Und hier ist die Lösung für Ihr Problem. Und genau hier haben sie all ihre Vorteile. Wenn Sie also eine Lösung für Ihr Problem wünschen, finden Sie hier die Vorteile, die Ihnen helfen, Ihr Problem zu lösen und Ihr Geschäft
noch weiter auszubauen . Wer sind die Partner dieses Geschäfts hier. Wir haben ein paar nette Zeugnisse für dieses Geschäft. Sie können mehr erfahren und mehr haben. Ressource ist und Sie können sehen, dass dieser Boden uns folgt, wie wir nach unten scrollen. Und nochmals haben Sie hier eine Testanfrage. Und Sie können sehen, dieses Foto hat alle relevanten Informationen, die nicht enthalten ist. Einblick in diese Landingpages oder scrollen Sie nach unten. Aber wenn du mehr über diese Details erfahren willst, kannst
du es hier im Vater finden, denn darum geht es Fuller. Ich hoffe, Sie genießen diese Beispiele und ich hoffe, Sie haben bekommen, was ich Ihnen sagen wollte. Design ist wirklich wichtig und wir als Designer
versuchen, unsere Ideen an die Kunden weiterzuleiten. Aber Sie müssen es verstehen, wenn es um eine Website geht, vor allem Landingpages. Konvertierung ist es, was wichtig ist, und erklären Sie die Informationen, die Sie in
kürzester Weise erklären müssen , während es für Ihre Benutzer immer noch einfach und einfach zu navigieren und zu verstehen was Sie zu vermitteln versuchen sie und was Sie versuchen, ihnen zu erklären. Also im nächsten Video werde
ich über einige Landingpage Strukturelemente sprechen, wie Sie Ihre
Landing Pages strukturieren sollten Und was sind die besten Elemente, die Sie verwenden sollten, wenn Sie Ihre Landing Pages
Soße Sie dort strukturieren .
10. Seitenstruktur: in diesem Video werden
wir über die Struktur der Landingpage sprechen und welche Elemente Sie verwenden sollten wenn Sie Ihre Landingpage strukturieren. Also zuerst, Sie können mit der Überschrift beginnen und Schlagzeile ist ihre Zehe. Erklären Sie Ihren Service oder Ihr Angebot. Und der Slogan ist da, um weiter zu erklären, was man nicht in der Überschrift hineinlegen kann. Das ist also, um ihre Aufmerksamkeit zu erregen. Dies ist, um die Aufmerksamkeit hinter Ihrem Produkt oder Ihrer Dienstleistung und Call to Action weiter zu erklären. Gibt es, um den Deal zu schließen? Also, wie Sie im vorherigen Video in den Beispielen, die ich Ihnen gezeigt habe, gesehen haben, setzen die
Leute den Aufruf zum Handeln direkt hier im Navigationsbereich. Aber Sie können es hier zum
Beispiel sagen. Sie können es hier in die Mitte setzen. Es liegt wirklich an Ihnen und dem Layout von Ihrer Seite. Normalerweise gibt es ein Bild, das mit der Überschrift und dem Slogan begleitet wird. Wenn Sie sich an das Airbnb-Beispiel erinnern, das ich Ihnen gezeigt habe , verwenden
sie dasselbe Bild für eine Firma, was sie hier in der Überschrift und im Slogan sagen. Immer mehr Menschen ziehen es vor, ein Video direkt hier zu platzieren, also entweder auf einer Website oder unter oder hinter. Aber das Video ist da, weil es Informationen erklären kann, dass Sie viel
besser erklären müssen und dann einfach ein Bild So kann das Video von einem Produkt oder einer Dienstleistung oder Leute erklären, das Produkt oder Service-Auftrag Kunden erklären, dass zu ihrer potenziellen Kunden. Und deshalb ist Video viel effektiver, weil die Leute mehr Videos ansehen, als nur Bilder darunter zu betrachten. Unsere Hauptvorteile für Sie, für Sie als Besucher zum ersten Mal Besucher von dieser Website. Welche Vorteile können wir Ihnen als Besucher bieten, der Ihr Leben,
Ihr Unternehmen oder was auch immer Sie anbieten kann , um ihnen zu dienen? Als Nächstes? Wir haben soziale Beweise, die es gibt, um zu beweisen, was Sie in den obigen Abschnitten sagen. So müssen Sie beweisen, dass in der Form aus Video Testimonial Video im Grunde aus Ihren früheren Kunden sagen, wie Sie gut Ihr Produkt oder Service ist, oder ein Angebot von Ihrem früheren Kunden, und dies ist hier nur, um die durchzusetzen Absicht hinter der Gewinnung des potenziellen Kunden oder Kunden auf Ihr Produkt oder eine Dienstleistung. Als nächstes müssen
Sie das Problem erklären, das sie haben könnten, und die Lösung, die Sie anbieten, und das Problem, Zum Beispiel, in unserem Fall und in dem Fall aus unserem Kunden, er findet, wo Sie gehen, um in Sanftmut zu bleiben, so dass das Problem ist. Und die Lösung, die wir anbieten, ist unser Boutique-Hotel, denn so und so wird es helfen, Ihr Problem als nächstes zu lösen. Es ist gut, wenn Sie einen weiteren sozialen Beweis haben, nur da drin. Aber wenn du nur eins hier hast, ist
es gut, weil es wirklich an dir liegt. Ihr Nietzsche Layout und die Branche oder Kunde sind in wie vielen sozialen Beweise Sie einschließen werden , weil manchmal zu viele soziale Beweise nicht so gut konvertieren, so müssen Sie mindestens einen einbeziehen. Aber wenn Sie können, ist
es gut, wenn Sie viele mehr einschließen können, denn es kann wirklich helfen, ihre potenzielle Aussicht im Schlepptau umzuwandeln. Kunde Als Nächster. Wenn Sie ihr Problem erklärt haben, erläutern Sie Ihre Lösung. Beweisen Sie, dass Sie das Problem lösen können, das sie haben könnten. Es ist wichtig, dass Sie Ihre Funktionen zeigen, damit welche Funktionen Sie anbieten, die ihr Problem konsultieren und als nächstes die Lösung für ihr
Problem sein , wir haben Schlussargument. Mit diesem schließenden Argument kann
es sich also um eine Anweisung handeln. Es kann ein weiterer Beweis sein. So, zum Beispiel, in unserem Fall, kann
es eine gute Aussicht auf die Strände und schöne Preise jammern,
speisen, erleben so etwas, nur um diesen Verkauf zu schließen und dieses Argument zu schließen, so dass sie holen Sie sich am Ende des Tages. Als Nächstes haben
wir ein Formular, das entweder ein Bestellformular oder ein Kontaktformular ist, so dass die Leute sich leicht mit
Ihnen in Verbindung setzen können . Zum Beispiel in unserem Fall, möchten
wir
in unserem Fall,dass sie über unsere Landingpage buchen. So haben wir ein schönes,
einfaches, einfach zu befolgendes, einfach zu bedienendes Formular. Sie können uns ausfüllen und kontaktieren, damit sie ihren Aufenthalt in unserem Hotel buchen können. Und schließlich haben wir zum Handeln aufgerufen, das entweder innerhalb dieser Form oder auf der Seite sein kann. Gleiche, wie es hier ist. Und der Aufruf zum Handeln besteht darin, sie endlich aus einer potenziellen Perspektive im Schlepptau umzuwandeln. Ein Client, wenn endlich in den vorherigen Videos in der bereits erklärt, die Sie aus den erstaunlichsten Landingpages gibt es den Ordner und der Ordner ist wirklich wichtig, weil alle
Informationen, die Sie nicht brauchen, um direkt hier auf die Landingpage wird innen von dem Vater direkt hier unten gehen. Und wenn sie Informationen benötigen, die sie hier nicht finden können, finden
sie sie genau hier. So können Sie sich vorstellen, vielleicht wollen sie mehr darüber erfahren. Haben Sie einen Safe im Zimmer? Vielleicht haben sie ein paar Wertsachen, wie Gold, Geld oder Laptop oder so etwas, und sie wollen es im Safe lassen. Sie werden diese Informationen nicht direkt hier setzen, weil es nicht allzu relevant ist, Aber Sie können es innerhalb des Fußes, wo Sie erstellen können, zum Beispiel, F A Q Abschnitt, wo Sie alle wichtigen Fragen, die sie hören könnten für sie beantwortet, damit sie direkt dort klicken können und dann mehr über diese Informationen auf dieser speziellen F A Q-Seite erfahren können. Nicht auf dieser Zielseite, denn wieder Landing Pages gibt den Service oder ein Produkt, das Sie anbieten und beantwortet die wichtigsten Fragen. Und für alle anderen Fragen, die sie haben könnten F ein Q Abschnitt ist ihr Kontaktformular. Gibt es Live-Chat sein kann, ist ihre Social-Media-Seiten. Gibt es so viele andere Möglichkeiten, mit Ihnen in Kontakt zu treten und mehr darüber zu erfahren, bevor sie
Ihr Kunde oder Kunde werden ? Im nächsten Video werde
ich Ihnen zeigen, was Sie bei der Gestaltung von Landing Pages für Ihre Kunden beachten können, für eine bessere Optimierung und bessere Konvertierung, also werde ich Sie dort sehen.
11. Was du berücksichtigen sollst: hier nur ein paar Dinge, die Sie beim Erstellen einer Landingpage beachten sollten. So Benutzer strukturiert für Menschen, weil Menschen diejenigen sind, die suchen und
durch Ihre Zielseite lesen . Also werfen Sie nicht einfach einige Elemente auf die Seite weg, damit es schön aussieht. Machen Sie es strukturiert. Also, wenn Leute Ihre Zielseite durchlesen, damit sie verstehen, was Sie anbieten, was Sie versuchen, ihnen zu sagen, was Sie versuchen, ihnen zu zeigen, damit sie gerne auf
Ihre Zielseite schauen . Es geht also nicht nur um schön aussehend. Design ist mehr über die Struktur, so führen Sie sie durch den gesamten Prozess, das gesamte Denken hinter der Landing Page, so dass sie verstehen. Und was am wichtigsten ist, ist besser zu konvertieren, wenn es eine gute Struktur gibt . Also, wo immer Sie den Text haben, machen Sie ihn schön, lesbar, machen Sie ihn sauber vor den Hintergründen. Was auch immer Sie Bilder haben, machen sie Bilder sein. Sie versuchen, eine Geschichte mit nicht nur einigen zufälligen Bildern zu erzählen, wie ein Ihnen am
Anfang dieses Kurses gezeigt ,
so machen Sie die Bilder abheben . Wenn Sie ein Video haben, stellen Sie sicher, dass es die Geschichte aus dem Abschnitt der Zielseite erzählt,
die sie gerade besuchen , nicht nur ein zufälliges Video. Also, zum Beispiel, wenn Sie über Vorteile sprechen, stellen Sie sicher, wenn Sie ein Video haben, dass das Video über die Vorteile, nicht über das Unternehmen, nicht über das Produkt und so weiter. Es ist vorbei, aber speziell für die Vorteile, die Sie versuchen, ihnen zu sagen. So gehen Sie sie durch die gesamte Struktur und machen es so für Menschen, nicht nur werfen einige Elemente A zufällig auf die Seite. Ich denke, Sie müssen prüfen, ist die Ladegeschwindigkeit, weil Web-Browser, vor allem Google, und Liebe Ladegeschwindigkeit. So werden die unnötigsten Elemente, die Sie loswerden können, loswerden, weil das Haltegeschwindigkeiten
verbessern wird . Verwenden Sie auch Webtelefone, da Waffen für Web-Use-Bilder optimiert sind, die optimiert sind. Und das ist der nächste Punkt, den ich Ihnen sagen möchte, ist die Bildoptimierung. Wenn Sie keine großen Bilder verwenden müssen, verwenden Sie sie
nicht, selbst wenn Sie in verwenden, stellen Sie sicher, dass Sie sie im Voraus optimieren, bevor Sie sie in das Design werfen, und dann später oder senden Sie sie an die Entwickler, denn wenn die Bilder optimiert, wird
es die Website schneller laden, und Google und andere Suchmaschinen werden Sie dafür lieben, weil Menschen mit langsameren Internetverbindungen gehen, um die Website viel schneller zu laden, um die Informationen, die sie brauchen viel schneller als wenn Die Bilder sind nicht optimiert und sie warten
einfach darauf, dass sie für immer geladen werden. Und sie werden Ihre Website irgendwann verlassen. Als nächstes haben
wir zu Action-Buttons aufgerufen. Wie wir in diesem und im vorherigen Abschnitt,
Call to action, erklären , sind
Schaltflächen wirklich wichtig. Stellen Sie also sicher, dass Sie sie an den richtigen Stellen platzieren. Und ich werde Ihnen zeigen, dass, als wir angefangen haben, unsere Website zu entwerfen und Sie
zurückgehen können die guten Beispiele zu sehen, die ich Ihnen vorhin gezeigt habe, damit Sie sehen können, dass sie nicht wie 20
verschiedene kalte russische Schlagstöcke haben . Sie haben zwei oder drei, aber positionieren Sie sie Industrie strategische Plätze. Also, wenn die Leute die Website besuchen, wissen
sie, was zu tun ist, und sie wissen, wann und wo sie Maßnahmen ergreifen und schließlich überprüfen Sie die bereitgestellte Ressource ist so am Ende. Abseits des Kurses können
Sie das Video über Links und Ressourcen in diesem Kurs und darin sehen. Ich werde Ihnen ein paar weitere Lesungen über Landing Pages zeigen. Über einige gute Ressource ist, wenn Sie noch mehr lernen können, wenn Sie über die Konvertierung wollen, über verschiedene Elemente, die Sie auf Landingpages über gute Beispiele und so weiter so
weit setzen können . Und das können Sie auch in den Projektdateien und im Fasten für Diskurse herunterladen, so dass Sie es bei Bedarf weiter erkunden können. Im nächsten Abschnitt des Kurses werden
wir mit dem Entwurfsprozess beginnen. Wir werden einige Planung,
Inspiration, Inspiration Stimmungsbretter, Skizzieren und so weiter machen. Also werden wir endlich anfangen, unsere Website zu entwerfen und ich werde es sehen.
12. Planung: Lassen Sie uns nun über die Planung aus unserem Projekt sprechen. Wir werden mit der Navigation beginnen,
dann gehen Sie auf den Heldenbereich. Und wie ich in den vorherigen Videos im vorherigen Abschnitt dieses Kurses erklärt habe, werden
Sie unseren Aufruf zu Aktionstasten entsprechend strukturieren. Vielleicht setzen wir einen in die Navigation ein in der Helden-Sektion, nur damit wir sofort
Action auslösen können . Weiter oben, unten auf der Seite, gehen
wir zu den Hauptmerkmalen, und Sie werden erklären, wie unser Hotel besser ist als der Rest der Hotels in der Umgebung . Was wir ihnen als Nächstes bieten können. Wir werden mit einem Testimonial fortfahren und aus der Sicht eines Kunden erklären,
was er erlebt und hart hat. Sie haben gerne in unserem Hotel übernachtet, und danach geht das Hauptangebot. Also versuchen Sie, sie nach der Aussage zu überzeugen,
um auf das Hauptangebot zu gehen. Als nächstes haben
wir Unterstützung Golfer, die nur da sind, um unser Hauptangebot zu unterstützen, und ich werde erklären, dass, sobald wir anfangen zu entwerfen und sobald wir mit dem Drahtrahmen als nächstes
beginnen wir Aktivitäten haben, die es gibt, nur um Haupt und unterstützendes Angebot so Hauptangebot ist es, sie zu gewinnen. Unterstützende Angebote sind da, um sie zu überzeugen, und wenn Unterstützungsangebote scheitern, gibt es
Aktivitäten. Je mehr unterhaltsame Aktivitäten für unsere Besucher sind, desto größer ist die Chance, dass sie umgebaut werden und in unserem Hotel bleiben. Und danach haben wir Buchungsformular Richards dort offensichtlich, um sie zu buchen, bleiben Sie in unserem Hotel. Und schließlich haben wir Newsletter-Formular, die da ist, wenn sie interessiert sind. Aber dann werden sie nicht jetzt buchen, um ihre E-Mail-Adresse zu fangen, damit wir beginnen können ihnen Werbe-E-Mails zu
senden und sie anziehen, einen Aufenthalt bei uns so zu buchen, weil vielleicht jemand außerhalb der Saison unsere Hotelseite besucht. Vielleicht wollen sie kommen und bleiben in 6 bis 9 Monaten oder so etwas. So ist das Newsletter-Formular nur da, um sie interessiert zu
halten, sie heiß und frisch für unser Hotel, und halten Sie sie daran zu erinnern, über Buchungen und bestimmte Rabatte, zum Beispiel, und so etwas. Schließlich unten haben
wirunteneine Fußzeile, die, wie bereits erläutert, alle notwendigen Informationen enthält, die nicht auf der Zielseite selbst enthalten sind, damit sie auf die Links in der Fußzeile und greifen Sie dort im nächsten Video auf diese Informationen zu. Wir werden zu Inspiration übergehen, und ich werde Ihnen zeigen, wie Sie sich inspirieren können, indem Sie verschiedene Beispiele aus dem
Internet verwenden , zu denen wir gehen, ob es Dosen und vielleicht dribbeln und vielleicht ein paar Bilder anschauen nur damit wir die Idee runterholen? Wie sind Seite aussehen kann, so dass ich Sie dort sehen.
13. INSPIRATION: in diesem Video. Ich möchte Ihnen einige Inspirationsseiten zeigen, die ich sowohl auf Beacons dribbeln als auch
einige Bilder gefunden habe , die helfen, den Zweck zu dienen, inspirieren uns für die Farben und für die Bilder. Weil wir kostenlose Bilder für dieses Projekt verwenden werden. Und später, wenn der Fotograf mit seinen Bildern fertig ist, werden
sie es uns schicken. Und wir werden das in die endgültige Lieferdatei aufnehmen, wenn wir diese
Dateien tatsächlich an den Kunden senden . Aber jetzt lassen Sie uns beginnen und gerade diese zufälligen Vorlagen gefunden und ich möchte Ihnen zeigen, dass diese eine Tripping zu und Reisebüro Vorlage genannt
wird. Aber ich möchte Ihnen zeigen, dass diese Karten wirklich so sind, wie sie da draußen wirklich
einfach angelegt sind . Sie sind wirklich einfach zu scannen, wirklich leicht zu verstehen. Sie können direkt hier bei ihnen zu Ihren Favoriten, wenn Sie wollen, aber ich mag wirklich, wie diese Bewertungen gezeigt werden, wie sie wirklich sauber zu Hause sind, viele Touren, zum Beispiel dort in Australien genau hier. Ich mag diese einmal wirklich, also sind sie wirklich sauber, einfach, leicht zu verstehen. Leicht zu lesen. Sie können wirklich hier im Grunde sehen Sie haben gerade die Flaggen hinzugefügt und es erscheint wirklich auf der Seite genau hier. Sie können sehen, wie sie strukturiert sind, so dass es wirklich leicht zu verstehen ist. Es ist wirklich einfach zu scannen, und sie gehen wirklich gut mit diesen Hintergrundschatten auf weißem Hintergrund, und ich denke, es wird. Es wird wirklich gut in unserem Design aussehen. Als nächstes werde
ich zu diesem Pfeil Fluggesellschaft Flug buchen Sie sind Sie x Vorlage und ich
werde weiter unten nur ein wenig und Sie können direkt hier sehen. Ich mag es wirklich, wie dieser große Text gegen die Bilder geht. Vielleicht, vielleicht ein schönes, subtiles Farb-Overlay direkt hier und mit einigen Symbolen. Es geht wirklich gut damit. Sieh mal, wenn ich den ganzen Weg runterscrolle,
siehst du, wie es aussieht. Also haben wir einige wirklich nette, subtile Animationen, und wie Sie sehen können, ist
es wirklich sauber. Einfach. Sie verwenden einige neutrale Farben, und Text ist wirklich gut lesbar, schön verteilt gleichmäßig auf der Seite platziert. Ich mag es wirklich, wie das aussieht. Und wie Sie aus diesen Animationsvorlagen sehen können, ist
es wirklich einfach zu navigieren. Es ist wirklich einfach, durch zu klicken und, wie Sie sehen können, gibt es
Leerraum in, ah, groß. Als nächstes haben wir diese Buchungscom, ein Redesign-Konzept, und für diese, Ich mag diese Seite wirklich. Wenn Sie
zum Beispielbuchen möchten,können
Sie sehen, wie es aussieht. zum Beispiel Wenn Sie
zum Beispielbuchen möchten, Und es ist wirklich einfach und einfach, und ich mag diese Karten hier wirklich, und wir können vielleicht ähnliche Art von Design für unsere unterstützenden Angebote verwenden. Also, zum Beispiel, was sie in Mykonos tun können, wenn sie in unserem Hotel bleiben, ich mag wirklich, wie sie aussehen, und wir können sie wirklich zeigen und zum Beispiel vor Ort, so dass sie Klicken Sie auf, ob sie auf dem Desktop-Computer suchen oder ihre mobilen Geräte verwenden. So Handy oder Tablet, sie können dann auf diesen Ort klicken und sehen, wo die Lage neben dem Hotel ist, so dass sie wirklich verstehen, wie weit es ist und wie teuer oder billig es ist. Und Sie können zum Beispiel eine Störung sehen . Ich mag wirklich, wie es aussieht, als wäre es wirklich gleichmäßig verteilt, hat alle wichtigen Informationen dort, und Sie können sehen, dass es gut auf dem Handy skaliert als auch. Und schließlich haben wir dribbeln. Also, wenn ich auf diese klicken, zum Beispiel, Ich mag diese frosted letzten aussehen wirklich wie alles sauber ist, leicht verteilt. Ich mag diesen Hintergrundschatten auf diesen Tasten, dass es schön und sauber aussehen wird und sie wirklich auffallen auf der Seite. Wenn ich
zum Beispiel nur ein wenig nach unten scrolle , dies eine, ist
dies eine,die wir gerade angesehen haben, und Sie können die Animation direkt hier sehen. Wie es aussieht, so ist es wirklich sauber Zeh. Finden Sie Ihre Standorte, und sobald Sie es tun, können
Sie sehen, dass es wirklich leicht lesbar ist. Es ist wirklich einfach für den Betrachter, die Informationen zu finden, die er benötigt, und er kann auf die Seite klicken, was er benötigt. Und wenn ich
zum Beispiel auf diesen klicke , können
Sie genau das Gleiche sehen. Es ist wirklich leicht lesbar auf der Seite. Wie Sie sehen können, können
Sie wirklich leicht Haut, was alles ist, und es sieht wirklich schön und sauber aus. Und schließlich möchte
ich Ihnen einige Bilder von einem Spritzer zeigen, weil das Hotel am Meer liegt und Sie einige Inspiration für die Farben
finden können , zum Beispiel in diesen Bildern, so dass Sie deutlich sehen können eine Menge Stahl. Ah, viel weg hat viel Grün in die Bäume geblasen. Vielleicht bringen Sie zum Beispiel leichte Anmut
für den Beton . Und Sie können wirklich sehen ex vor allem hier, weil dies in Griechenland ist, können
Sie diese blauen Farben und diese weißen Farben sehen, zum Beispiel, von diesem Grün. Es passt wirklich gut zu unseren Projekten. Diese Bilder sind also nur für unsere Inspiration da. Wir werden sie in unserem Projekt verwenden, und ich
gebe Ihnen alle Bilder, damit Sie sie verwenden können, wenn Sie anfangen, für sich selbst in
den Übungsdateien zu entwerfen . Und ich werde Ihnen die Übungsdatei-Struktur zeigen, wenn wir einen Teil dieses
Kurses entwerfen . Also, das ist es im Grunde für die Inspiration. Teil ist, Sie können sehen, dass wir nicht speziell jedes Element verwenden, das Sie in diesen Beispielen gesehen haben. Ich wollte Ihnen nur zeigen, wie, wenn Sie diese Elemente vor dem weißen
Hintergrund ausräumen , es wirklich leicht lesbar ist, und Sie können leicht zwischen den Abschnitten navigieren und Sie können deutlich finden, was Sie sind suchen, wann nur ein wenig mehr Informationen in, anstatt nur ein einzelnes Bild mit Text darauf, wie ich Ihnen in der Konkurrenz gezeigt. Beispiel. Videos Im nächsten Video werden
wir einspringen und anfangen, unsere Moodboards zu entwerfen, und wir werden uns für die potenziellen Farben,
mögliche Topographie inspirieren . Und ich werde Ihnen zeigen, wie ihr Logo vorerst aussieht, weil sie sagen, dass sie es in Zukunft ändern werden. Aber im Moment müssen
wir damit umgehen, und ich werde Ihnen zeigen, wie all diese Elemente gehen, wenn Sie Moodboard erstellen, also sehe ich Sie dort.
14. Moodboard: Lassen Sie uns anfangen, unsere Stimmung Board zu entwerfen alle für den Sprung auf die Ressource ist Halter. Das ist, was wir für jetzt haben, aber es wird viel mehr Ressourcen bis zum Ende der Partituren sein. Also werde ich einfach springen und diese Logo-Datei öffnen. Öffne es einfach in Adobe Eggs D und sobald es geöffnet ist, kann
ich es so vergrößern und ich kann schnell hier zum Kunstwelt-Werkzeug springen und vielleicht dieses 1920 um 10 80 erschaffen. Hören Sie nicht ganz tippen Moodboard, weil wir schnell ein Moodboard erstellen wollen. Ich kann das Rechteck-Werkzeug verwenden und zwei Rechtecke zeichnen. Also vielleicht so etwas kann ja sein, und dann verwendet die Wiederholung große Zukunft. Zeichnen Sie einfach, um so zu trauern und zwei mehr als wie so vielleicht kann ich in den
Raum zwischen ihnen vielleicht noch so etwas erhöhen , Oder vielleicht sogar ziehen Sie sie ein bisschen näher, dann traf auf Gruppe große und dann vergrößern alle von ihnen . So, zum Beispiel, wie so vielleicht reduzieren sie, aber deaktivieren Sie die Responsive Größe, so dass sie so skalieren können,
steuern Sie g, um sie so zu
gruppieren, richten Sie sie aus und klicken Sie dann einfach mit der rechten Maustaste und auf Gruppe. Oder Sie können die Steuerung G oder Shift Commander verschieben, wenn Sie auf einem Mac sind und das werden unsere
Bilder sein , und ich werde einfach einige Bilder jetzt einschließen, Sie können dies mit der Wiederholung tun. Tolle Funktion auf, und es ist einfacher, so. Aber ich wirklich ist es wirklich egal für mich, weil ich manchmal gerne Dinge so oder so mache, also kannst du eine Menge all diese Bilder auf einmal einbinden. Sobald Sie Wiederholungsraster erstellt haben, zeichnen Sie
einfach ein. Platzieren Sie diese Bilder innerhalb der Vergewaltigung groß, und es wird bevölkern. Aber manchmal wollen Sie es so machen, denn wenn Sie nur ein Bild zeichnen und sehen
wollen , wie es in einer dieser Boxen aussieht, ist
es neu bevölkert. Ganze. Wiederhole, großartig. Und dann müssen Sie eine 2. 13141 Also ein Also es wirklich ist es wirklich an Ihnen, wie Sie Ihre
Bilder erstellen wollen , aber es ist wirklich keine große Sache. Sie können sie jedoch erstellen. Und wenn Sie denken, dass einige von ihnen nicht richtig positioniert sind , können Sie
zum Beispiel diesen immer doppelklicken und Sie können es skalieren, zum Beispiel ,
wenn Sie wollen, so können Sie es wie Sagen Sie jetzt, lassen Sie uns unsere Farben erstellen. Also werde ich dasselbe tun. Es wiederholt sich großartig. Vielleicht erstellen Sie sechs wie diese. Dann kann ich den Abstand auf irgendwo hier erhöhen, vielleicht auf Gruppenraster. Also, das ist es im Grunde für unsere Farben. Und vielleicht können wir vom dunklen Handgelenk beginnen. mache ich gerne. Vielleicht ist das unser dunklerer Sculler. Vielleicht kann es für unseren Aufruf zu Action-Buttons sein. Vielleicht können wir wählen, dann ein wenig eine hellere Farbe. Oder vielleicht können wir uns das auch aussuchen. Ich mag es, wie es mit zuerst aussieht. Lasst uns Grenzen von allen entfernen, weil ich sie ärgerlich finde. Vielleicht können wir diese blaue Farbe wählen, zum Beispiel. Sieht gut aus. Dann können wir vielleicht diese Betonfarbe so auswählen. Vielleicht können wir das hier benutzen. Und schließlich, für diesen, lassen Sie uns das wählen. Vielleicht können wir sie wechseln, damit das hier sein kann und das könnte unsere konkrete Farbe sein. Also vielleicht,
nein, nein, das ist zu dunkel. Vielleicht irgendwo hier. Ja, ich mag, wie das aussieht. Also im Grunde, so nähern Sie sich Ihren Farben. Diese sind wieder einmal einfach, um sich selbst zu inspirieren und zu sehen, mit welcher Art von Farben Sie arbeiten, ist Sie sehen können, dass wir diese cremefarbene Farbe hier in dieser Starmacht haben. Dieses Weiß ist nicht vollständig weiß, aber es ist auch eine Art Creme. Sie haben all diese braunen Texturen. Wie Sie sehen können, sind
Felsen nicht alle weiß, und der Himmel ist schön in schön und blau genau hier. So können Sie wirklich mit diesen Farben herumspielen und so viel erkunden, wie Sie wollen. Also lasst uns voran gehen und kontrollieren. Sehen Sie mit diesem Logo-Steuerelement. Wir hier aus irgendeinem Grund, es schmeckte nicht und das gesamte Logo, also lassen Sie uns die Kontrolle ausgewählt. G-Steuerung C Sei gleich hier. Also gruppiere ich sie mit Kontrolle G und habe es jetzt mit Kontrolle kaputt gemacht. Wir, wie Sie sehen können, ist
dies ihr Logo. Es ist nichts Besonderes, und sie sagten, sie gehen Fuß. Gestalten Sie es neu, sobald wir unsere Website erstellen. Und nun endlich, lassen Sie uns einen Text einschließen. Also komprimierte ich e Klick irgendwo hier herum, vielleicht können wir dies in Überschrift verwenden Lassen Sie uns scheinen Kontrolle ein Vielleicht kann ich es erhöhen,
zum Beispiel, 48. Es ist also wirklich schön und groß. Vielleicht können wir den offenen Sinn verwenden. Es ist leicht lesbar. Vielleicht können wir extra Bolzen benutzen. Nein, es ist zu dunkel. Kann mutig sein. Ja, so sieht das aus. Und vielleicht können wir so positionieren, wie, so kontrollieren, dass Sie einen Kopierplatz machen können. Es ist vielleicht so etwas wie hier. Vielleicht können Sie 18 oder vielleicht sogar 20. Okay, lassen Sie uns eine reguläre verwenden, und Sie können hier klicken, um es von Punkt X Zehe Bereichstext zu konvertieren, und dann können Sie unseren Bereich ziehen, den Sie einschließen möchten So, zum Beispiel irgendwo hier ist gut, und dann mit ihm ausgewählt, können
Sie auf den Stecker in der Wirbelsäule kommen, und Sie können viele Geschenke und Bloggen verwenden. Wenn Sie es nicht installiert haben, können
Sie einfach hier klicken und direkt hier nach dem langfristigen ipsum suchen. Wenn Sie es finden, können
Sie einfach auf diese installierte Schaltfläche klicken und es wird installiert, und sobald Sie dies tun, können
Sie dann darauf klicken. Klicken Sie auf Fühle,
dass der Platzhaltertext schüttelt auf den Sie klicken möchten Text einfügen, und es wird dieser Platzhaltertext in den ausgewählten
Bereich eingefügt. Wenn Sie denken, dass dies zu groß ist, verurteilen
Sie Experimente damit und sehen, wie verschiedene Größen in diesem Absatztext funktionieren . Aber ich denke, es sieht gut aus, und vielleicht können wir diese Farbe für die Schlagzeilen auswählen. Es ist zu dunkel, aber wir können später damit herumspielen, wenn wir anfangen, unsere Farben zu erkunden und unsere Website zu
gestalten. Aber das ist es im Grunde. Du kannst hier ein paar andere Sachen einbinden. So, zum Beispiel, Bilder aus dem Hotel, tatsächliche Bilder aus dem Hotel, können
Sie sie dort platzieren. Sie können Bilder von den Aktivitäten und so weiter eine Software setzen. Aber das ist nur für uns, damit wir einen Einblick bekommen oder wie alles auf der
Seite funktionieren wird . Vielleicht können wir eine Schaltfläche Volumenkörper tun, die schnell auf das Rechteck-Werkzeug Linie wie folgt. Vielleicht können wir also verwenden, ich weiß nicht, 25 mit 60 alles, was gut aussieht und weil wir fünf oder nein eingeben können, lass uns hier fünf benutzen. Lasst uns die Grenze entfernen. Verwenden wir zum Beispiel diese
Gefühlsfarbe . Vielleicht können wir acht verwenden, nur um ein bisschen mehr um die Tasten steuern D auf diesem
Absatz zu bekommen , Zehenpunkt-Text zu
drehen und dann einfach nach unten zu bewegen. Ich werde schreiben in, zum
Beispiel, lesen Sie mehr. Leg es in die Mitte. So, positionieren Sie es innerhalb unserer Taste, wie so wählen Sie. Die Geschichte kann diese beiden treffen, um es perfekt in der Mitte zu sein. Sehen Sie, was es hier ist. Und für den Lesen mehr Text, können
wir es weiß konvertieren, so klicken Sie einfach hier. Und wenn Sie zoomen, können
Sie deutlich sehen, dass das die Schaltfläche ist. Jede vermutete viel näher. Sie können es deutlich lesen, so dass diese Farbe bereits ziemlich gut funktioniert. Vielleicht können wir uns das auch aussuchen. Sehen Sie, wie das funktioniert. Aber ich mag das ein bisschen besser, also ist es im Grunde für diesen Schritt oder Prozess. Wie gesagt, können
Sie damit eingehend eingehen. Sie können beliebig viele Elemente einschließen. Sie können ein paar Elemente hinzufügen, wie Sie möchten, denn dies ist im Grunde nur für Ihre persönliche Erkundung, so dass Sie sehen können, welche Elemente auf der Seite gut funktionieren. Welche Farben passen nicht gut zu anderen Farben, zum Beispiel können
Sie verschiedene Schriftarten erkunden und herausfinden, welcher Text gut funktioniert. Aber weil dies eine freie Schrift ist, die wir verwendet haben. So ist es offen Sinn, und Sie können es auf Google-Telefonen sowie Adobe Fonts finden und unsere Links sie, so dass Sie sie in einer wirklich pdf-Datei herunterladen
können. In der Ressource ist Video am Ende der Partituren, so dass Sie mehr über diejenigen, die Sie herunterladen können, so viele Telefone ist. Sie wollen
natürlich einen Explorer, natürlich einen Explorer, und Sie können diesen Bildern folgen, wenn Sie einen Explorer mit verschiedenen Schattierungen,
verschiedenen Positionen dieser Bilder wollen . So zum Beispiel können
Sie
zum Beispieleinige von ihnen drehen und so weiter und so weiter. Aber diese Bewegung oder Prozesse nur für Sie, damit Sie besser werden können. Sehen Sie sich an, wie Ihr Projekt aussehen wird, wenn Sie tatsächlich anfangen, es zu entwerfen. Und das wird tatsächlich Ihr Arbeitshemd schneiden. Denn wenn Sie dieses kleine Brett beenden und Sie können einfach hier klicken, drücken Sie die Kontrolle E. Und mit Export uns sein Gleichgewicht gewählt, Sie können hier auswählen. Acht a. PNG pdf für Jay Peak und Sie können es toe exportieren, die Position, die Sie wollen, und dann tatsächlich senden Sie es zu antworten int, so dass sie über
es gehen und sehen können . Okay, ich mag diese Farbe. Ich mag diese Farbe nicht. Das funktioniert. Das funktioniert nicht. Lasst uns ändern. Tagesschlitze beinhalten das. Und gerade in diesem Mood Boarding Prozess können
Sie Ihre Arbeit kurz später verkürzen, wenn es um die Zeit für Revisionen geht. Weil man die Farben zum ersten Mal richtig bekommt. Und dann können Sie die Geschwindigkeit, mit der Sie an diesem Projekt arbeiten, später
wirklich erhöhen , wenn es Zeit für Revisionen kommt. Das war's also für dieses Video. Im nächsten Video beginnen
wir mit dem Skizzieren,
und ich werde Ihnen zeigen, wie Sie einige Ideen skizzieren können, die Sie direkt auf dem Papier haben bevor Sie tatsächlich mit der Arbeit an den Drahtrahmen beginnen. Also sehe ich dich dort
15. Skizzieren: in diesem Video. Ich möchte über Skizzieren sprechen, weil das Fangen im Designprozess wichtig ist, weil es Ihnen die Freiheit gibt, die Sie nutzen können, wenn Sie mit dem Skizzieren auf Papier beginnen, weil Sie das Papier leicht verschrotten,
wegwerfen
können , neu beginnen, einige verschiedene Elemente
einschließen. Probieren Sie ein paar Ideen aus. Sehen Sie, was funktioniert was nicht mit Ihrem Layout funktioniert. Und dann kannst du diese Ideen ausprobieren, die du auf dem Papier im Inneren des b x D hast. Also genau hier zeichne ich einfach von Elementen auf die Seite, und ich werde dir zeigen, was ich ausgedacht habe. Also lassen Sie mich etwas näher heranzoomen. Sie können hier oben sehen. Wir haben nur einfache und einfache, einfach zu bedienende Navigation, und wir werden das Dropdown-Menü direkt hier verwenden, zum Beispiel
für die Angebote oder
für den Raum, so dass sie leicht von hier aus navigieren können. Wir werden sehen, sobald wir mit dem Drahtrahmen beginnen. Als nächstes haben
wir Call to Action unten, was wirklich klar,
schön und groß war , damit sie ihren Zustand von hier aus buchen können. Darunter haben
wir das Heldenbild und den Heldenbereich. Wir haben einen schönen großen Titel Untertitel Aufruf an Action Button und Hero Image und wir werden sehen, wie dieses Heldenbild aussehen wird und wie wir es in
unser Design integrieren werden, sobald wir anfangen zu entwerfen. Aber es ist wirklich wichtig, hier alles zu erklären. Sie müssen also nicht nach anderen Informationen suchen, wenn sie auf einer Homepage landen, weil hier
alles erklärt wird. Darunter haben
wir die wichtigsten Hotelmerkmale. Also vielleicht werden wir den Ort erklären, wo alles Jahre und ich werde
mit dem Client Toe sprechen , holen einige Hauptmerkmale, die wir direkt hier setzen werden. So ist dies nur süchtig sie nach unten zu scrollen und mehr über unser Hotel unten zu erfahren, dass wir Zeugnis von dem vorherigen Kunden haben, der Fuß geht. Sagen Sie allen, wie begeistert sie mit einem Aufenthalt an diesem Ort waren und wir werden
jetzt Buch setzen , rufen Sie den Action Button hier an, damit sie hier buchen können. Darunter haben
wir Angebot gemacht, das sind die Zimmer, im Grunde. Also werden wir die Zimmer aufstellen und einige grundlegende Informationen direkt hier platzieren, und wir werden mehr gelernt haben, damit sie mehr über eine bestimmte Art von
Zimmern erfahren können , wenn sie direkt dort klicken, und es wird sie zur Raumseite bringen später. Aber das ist nur, um ihnen zu zeigen, welche Räume sie sind, damit sie auswählen können, welches Zimmer sie wollen und mehr darüber direkt auf der
Homepage erfahren können. Darunter werden
wir einige weitere Funktionen aus dem Hotel haben. Also werden wir erklären,
zum Beispiel, in ihrem Hof, dass wir die Terroristen erklären werden, ist es, dass sie haben. Wir werden das Restaurant und jemanden erklären, aber das sind unterstützende Funktionen für das Hauptmerkmal und das Hauptangebot, das sind
die Zimmer, denn wenn sie die Zimmer ausgesucht haben, werden sie das bekommen, je nachdem, welchen Raum sie bekommen. Offensichtlich darunter, haben
wir Aktivitäten in der Nähe. Wie Sie sehen können, habe ich das nicht gezeichnet, weil mir der Platz ausgeht. Aber das ist etwas, was ich im Sinn hatte, als ich diese Zeichnung entwarf, als ich auf
dem Papier zeichnete , ist ich werde Hauptangebote sowie eine unterstützende Angebote enthalten. Wenn sie also nicht von den Zimmern verbunden sind, können
sie genau hier sehen, was sie mit jedem der Zimmer bekommen, zum Beispiel. Und das könnte ihre Meinung aus dem Aufenthalt in diesem Hotel unten beeinflussen, dass wir
Aktivitäten in der Nähe haben . Wenn sie also nicht von den Zimmern überzeugt werden, die Angebote unterstützen, haben
sie Aktivitäten in der Nähe, damit sie mehr über diese Aktivitäten erfahren können. Und ich werde einige Elemente in das Design einbeziehen, wie ich Ihnen
zum Beispiel auf den Beacons Beispiele gezeigt habe . Also werden wir sehen, wie weit es vom Hotel entfernt ist. Sie werden in der Lage sein, ihre direkt von ihrem Computer aus zu navigieren, nur um zu sehen, wie weit es ist und die Preisspanne für dieses spezielle Angebot, zum Beispiel. Und wir werden dies als Schieberegler haben und es ging, um in der Lage zu sein, das zu verwenden und nur sehen Aktivitätsnamen einige grundlegende Text, vielleicht was sie tun können und genau hier, schönes großes Bild, das im Grunde ein Schieberegler sein wird , damit sie nach links und rechts gleiten und verschiedene Aktivitäten darunter sehen können. Wir haben das Buchungsformular, das schreiben wird,
zum Beispiel, zum Beispiel, sparen Sie bis zu 40%, wenn Sie bei uns buchen. Als Nächstes haben
wir Unterstützung Text und Anruf zu Action Button, und dieses Kontaktbuchungsformular wird alle relevanten Informationen enthalten, die
sie eingeben, wenn sie ihren Aufenthalt in diesem Hotel buchen möchten. Und schließlich werden wir uns den Newsletter anmelden lassen. Also, wie in den vorherigen Videos erklärt, wenn sie nicht jetzt buchen wollen, So zum Beispiel, es ist das Ende der Saison. Sie sind gerade im Dezember auf dieser Website gelandet. Sie wollen zum Beispiel im Juni in ihren Urlaub gehen , also ist es wirklich viel zu weit für sie zu buchen. Sie werden einfach ihre E-Mail-Adresse hier in der Anmeldung für den Newsletter hinterlassen , und wir werden sie senden. Werbe-E-Mails würden ihnen Geschichten senden, zum Beispiel, nur um sie interessiert zu halten. Ich halte sie süchtig für dieses Hotel, so dass sie buchen können, wenn sie brauchen, um zu buchen und schließlich ganz unten werden wir ein Foto und Ordner wird alle
relevanten Informationen enthalten , die nicht in der Zielseite selbst enthalten sind. Wenn sie also mehr über jede dieser Komponenten erfahren möchten, können
sie dort all diese Informationen finden. Schließlich werden
wir Social-Media-Symbole einschließen. Zum Beispiel werden
wir eine Telefonnummer,
E-Mail-Adresse, den Kontakt aufnehmen, wenn sie
das Buch nicht mit uns für und alle anderen relevanten
Links verwendet haben,
Also, das ist im Grunde es. Für das Zeichnungsteil können
Sie eine bestimmte Art sein, wie Sie möchten oder so grob, wie Sie möchten. Mit diesem Teil teilen
Sie dies normalerweise nicht mit Ihrem Kunden. Dies ist im Grunde nur für sich selbst, so dass Sie eine grundlegende Struktur haben
können, die Sie dann importieren und mit der Arbeit innerhalb von Adobe X'd beginnen können. Es ist also wirklich ein wichtiger Prozess, ein wichtiger Schritt im Designprozess, denn man kann wirklich verschiedene Ideen erkunden und verschiedene Dinge in das Papier legen und einfach wirklich arbeiten, um zu sehen, was funktioniert, was nicht und schließen Sie dann all das innerhalb Ihres Drahtrahmenprozesses ein. Im nächsten Teil des Kurses werden
wir mit Drahtrahmen beginnen, und wir werden diese Skizzen in Schleppen wirklich High-Fidelity-Drahtrahmen und später
in Schleppentwürfen drehen , die wir mit unserem Kunden. Also sehe ich dich dort
16. Dateivorbereitung: in diesem Teil des Kurses beginnen
wir mit der Gestaltung unserer Drahtrahmen, aber bevor wir es tun, müssen
wir unsere Projektdatei ein wenig organisieren. Also werde ich all die verschiedenen Dateien einschließen, die ich Ihnen bereits gezeigt habe und die zukünftigen , die wir während der Partituren erstellen werden, so dass sie sich alle in einer
einzigen Datei befinden , so dass, wenn Sie irgendwann etwas kopieren müssen, Sie müssen etwas zurückschauen, um Referenz zu erhalten. Sie müssen etwas Neues erstellen und es mit etwas vergleichen, das Sie erstellt haben, bevor Sie
alles in einer Datei tun können , da Adobe X'd erstaunlich ist, wenn es darum geht,
große Dateien zu erstellen und sie an Clients zu senden, weil sie wirklich ihre Magie mit Optimierung. Und Sie können wirklich große,
große Dateien mit kleiner Dateigröße an Ihre Kunden senden . also ohne weiteres Sie werden sichalso ohne weiteresan dieses Moodboard erinnern, das ich im vorherigen Teil vom Kurs erstellt habe, und wir haben das Logo, das uns der Kunde geschickt hat. Ich werde das minimieren und in unsere Ressource springen, ist Vater ,
was natürlich Sie
natürlichgenau hier bekommen werden. Wir haben ein Projekt, das ist diese Datei, die ich Ihnen bereits gezeigt habe. Ich bin einfach hier vorangegangen. Sparer und speicherte meinen Computer namens Project, und Sie werden diese Projektdatei am Ende des Kurses erhalten, wenn Sie
die Dateien herunterladen . Aber es wird alles enthalten, was wir während dieses Kurses schaffen. Also werde ich Zehe Design kurz innen einschließen. Also werde ich auf die Entwurfskurzdatei doppelklicken. Es wird geladen, und ich werde einfach diese kopieren, was die Feld-Design-Briefung ist? Denn wenn Sie sich an das Designkurzvideo erinnern, haben
Sie die leere Vorlage, die Sie für Ihre Projekte verwenden können. Und wir haben diese ausgefüllte Vorlage, die wir für dieses Projekt verwenden werden. So Kontrolle. Siehst du, wenn du einfach diese Kunstgeburt auswählst, werde
ich hier reinspringen. Verkleinern Sie ein wenig, drücken Sie Kontrolle V, und es wird Zehe es hier einfügen. Als nächstes werde
ich dasselbe tun, aber mit Drahtrahmen. Also lassen Sie mich das schnell herausziehen, zehen Sie meinen anderen Bildschirm, springen Sie in diese Datei, und ich werde es einfach auf die Seite ziehen und ablegen, damit wir auf
diesen Drahtfreund verweisen können , den wir während der Schöpfung Teil des Diskurses. Als nächstes werden
wir in unseren Häfen erstellen, also werde ich hier klicken. Es sagt, sind arme Larry King traf ein auf Ihrer Tastatur und ich werde einfach nach unten zu scrollen Zehe Web und klicken Sie auf 1920 und es wird Zehe gehören alles im Inneren. Also einfach zu gehen Zehe trennen sie, weil es sieht dies wie auf unserem Hafen. Wenn es nicht der Fall ist, ist
es nur ein einfaches Bild. Also werde ich mich hier positionieren, und ich werde das hier direkt hierher bringen. Ich werde hier doppelklicken. Und ich war Drahtrahmen, denn das wird unser Drahtrahmen sein und wir werden es von Grund auf
entwerfen. Und wenn wir mit dem Drahtrahmen fertig sind, werden
wir diese Elemente in unserem Design verwenden. Aber ich werde Ihnen zeigen, dass, wenn wir später darauf
kommen, einfach auf sie klicken und nach unten strecken und Sie werden diese gepunktete
Linie sehen . Und diese angefangene Linie ist im Grunde die Falte, also wird alles hier über der Falte sein. Alles hier wird unterhalb der Standardeinstellung sein. Und natürlich können
Sie das auf- oder abstellen, wie Sie wollen. Wenn Sie denken, dass die Falte nach oben oder unten sein wird, wenn Sie für mehrere Geräte und so weiter im nächsten Video erstellen, wir anfangen, unsere Drahtrahmen zu entwerfen und wir sehen uns dort.
17. Wireframe 1 erstellen: Richtig. Beginnen wir also mit der Erstellung unseres Drahtrahmens und das erste, was wir tun werden, wenn hier
wieder aufnehmen. Sie können unser Teil auswählen, indem Sie einfach auf seinen Namen klicken. Klicken Sie hier. Es steht „Layout“. Auf den Säulen werden
Sie 12 Spalten haben, aber auf der Rinne, Witz ging Fuß. Geben Sie 40 ein. Drücken Sie die Eingabetaste und Sie können sehen, dass alle diese anderen Täler automatisch angepasst werden, was in Ordnung ist. Also werden wir einfach ein bisschen näher heranzoomen. Und in vielen Fällen, wenn Sie anfangen zu entwerfen, können
Sie die Elemente nicht sehen, weil aus dem Skript, also klicken Sie einfach hier, wo es Layout,
große Spaltenfarbe sagt , klicken Sie darauf und senken Sie einfach die Deckkraft von diesen Linien zu irgendwo hier herum, so dass Sie sie immer noch sehen
können. Aber Sie können sehen, was Sie gerade hier an der Spitze entwerfen, so dass Sie auf Ihren
Port klicken können und Sie können hier im Rechteck klicken, weil wir gehen, um Navigation zu erstellen . Was wir also tun werden, ist das nie biggie so nennen, weil ich immer den Namen
meiner Schichten mag , weil es für Entwickler später einfacher ist, und es ist einfacher für mich, wenn ich etwas später finden muss und ich es ändern muss. Also geben wir ihm eine Höhe von 1 50 und positionieren sie so oben, dass wir die Grenze etwas später entfernen werden. Aber lassen Sie es uns vorerst behalten, damit wir das entwerfen können, was wir brauchen, um das jetzt zu entwerfen . Also es springt direkt hier und wähle ein Logo aus, also klicke darauf, um den Meeressprung genau hier innen aus der nie BG Kontrolle zu kontrollieren und stelle sicher, dass es in der Mappe ist, wie es ist. Stellen Sie sicher, dass Sie hier klicken, um Einschränkungen für die ansprechende Größenänderung zu deaktivieren, denn wenn Sie sie eingeschaltet lassen, wird
es Ihnen einige seltsame geben, wie Sie hier sehen können. Also schalten Sie es einfach aus, wenn Sie es gleichmäßig nach unten skalieren möchten. Wenn Sie also auf eine der Ecken klicken, halten Sie die Verschiebung gedrückt, um ihre Größe auf irgendwo hier zu reduzieren. Stellen Sie sicher, dass Sie es am Raster, das wir gerade erstellt haben, und Sie können beide auswählen, indem Sie die Steuerung gedrückt halten und sie einfach in der Mitte verschieben,
so dass es in der Mitte von diesem Navigationshintergrund gefangen wird, wie Sie hier sehen können . Das ist also unser örtlicher Witz. Jetzt lassen Sie uns einen Text erstellen, und wir müssen mit einem Raum beginnen, so dass Sie einfach hier klicken können, indem Sie Bräutigam tippen und ich
werde eine Farbe so etwas wählen. Vielleicht spielt nur einige grundlegende große wirklich keine Rolle. Aber lasst uns so etwas wie 707070 benutzen. Grundlegend grau, einfach, sauber ändert sich auf 24. Stellen Sie sicher, dass es normal ist, wie es ist, und Sie können das gleiche tun. Angenommen, es so wählen Sie beide aus. Schlag hier in der Mitte und jetzt,
weil ich will, dass dieser Raum Zehensprung unten, damit es einen Drop nach unten haben wird. Aber lassen Sie es uns ein bisschen später erstellen. Lassen Sie uns zuerst diese anderen Elemente in unserer Navigation erstellen, damit sie die Kontrolle treffen können. De zu duplizieren Problem könnte die lange und Tippreservierung verschieben, weil wir wollen, dass die Leute Lage
sein, ihr Zimmer von hier zu reservieren. Wählen Sie beide aus, stellen Sie sicher, dass sie eine Zeile hinterlassen Wenn Sie
also eingeben, werden
sie von links nach rechts verschoben. Wählen Sie diese eine Kontrolle de dupliziert auf diesem einen Typ, der über uns ist
und noch einmal kontrollieren D. kontrollieren D.Und für diesen, wir werden in Kontakt eingeben, weil wir sicherstellen wollen, dass die Leute uns kontaktieren können und dass sie können Sie uns direkt von hier aus kontaktieren. Wenn sie Fragen an uns haben. Als nächstes werde
ich ah, Flag Platzhalter erstellen, weil wir hier eine Flagge platzieren, damit die Leute
Sprachen wählen können , wenn sie es wünschen, weil dies in Griechenland ist. Vielleicht wollen sie sowohl eine griechische Sprache Website als auch Englisch,
vielleicht ein Französisch oder vielleicht Deutsch erstellen ,
je nachdem, woher ihre Kunden kommen und die Widerstandskräfte. Also werde ich es 40 wits 30 geben, so stellen Sie sicher, dass Sie es Flanke nennen und stellen Sie sicher es wie alle anderen
zentrieren. Stellen Sie sicher, dass die Position es direkt hier unten und duplizieren Sie den Kontakt. Lassen Sie uns schnell einige davon bestellen, so dass die Zimmer direkt neben dem Logo liegen sollten. Also direkt darunter in der Ebenen-Panel direkt hier Reservierung sollte als nächstes kommen über uns sollte als nächstes kommen. Der Kontakt ist hier. Flag ist hier, also lassen Sie uns Kontakt duplizieren, um es den ganzen Weg nach hier zu verschieben, weil dies unser
Schaltflächentext sein wird , weil wir hier eine Schaltfläche platzieren werden, also doppelklicken Sie einfach auf die Zehe. Eine Änderung es in Buch jetzt wie so, und stellen Sie sicher, dass dies in ihrer Mitte geht, so ist es zentriert ausgerichtet. Als nächstes,
lassen Sie uns eine Schaltfläche erstellen, und dafür, lassen Sie uns ein Rechteck-Werkzeug wählen, das auf 91 die 75 und direkt hier eingeben 10, weil wir um Ecken erstellen
möchten,
stellen Sie sicher, dass Sie es nach unten bewegen. DoubleClick, BT und BG kurz für unteren Hintergrund und lassen Sie uns es verschieben. Also eine Linie zu den großen rechts hier und wählen Sie beide. Stellen Sie sicher, dass sie zentriert sind wie so Zahnersatz. Buchen Sie jetzt Textschaltfläche BG und positionieren Sie es so, weil es diesen Text in der
Mitte platziert . Nun, was wir tun können, ist es etwas Farbe geben, wenn Sie wollen, also wählen Sie es aus und wir können hier gehen und vielleicht wählen Sie diese Farbe, damit Sie darauf
klicken können so dass ich mag, wie das aussieht, und Sie können die Grenze entfernen, Klicken Sie auf den Text, geben Sie ihm weiße Farbe wie so und jetzt, was Sie tun können, ist springen Sie zurück zu unserem Asset-Panel. Aber es sagt, Farben klicken Sie hier. Es wird Ihnen eine weiße Farbe klicken Sie auf den Text. Es gibt Ihnen, dass Farbe klicken Sie auf diesen Text und es wird Ihnen Farbe aus dem Text, den wir für diesen Text verwendet haben, direkt hier. Also, dass später, wenn Sie die Farben global ändern möchten, Also stellen Sie sich vor, wir werden wirklich lange Landing Page erstellen. Wenn Sie die Farbe von diesem Text global ändern möchten, können
Sie dies tun, indem Sie einfach die Farbe hier ändern, anstatt eins nach dem anderen zu gehen und dann alle einzeln zu
ändern. Also, jetzt, da wir tun können, möchte ich einen Pfeil nach unten hinzufügen, damit die Leute darauf klicken können und es ihnen verschiedene Optionen
geben wird . Also habe ich bereits einen Abwärtspfeil erstellt, um etwas Zeit zu sparen, und Sie werden ihn ein wenig später erhalten. Also, was Sie verleiten, ist einfach positionieren Sie es in der Mitte, springen Sie zurück zum Ebenen-Panel, positionieren Sie es den ganzen Weg nach unten, um zu Flagge, und wir können voran gehen und gruppieren dieses Buch Now Button So control G, um es zu gruppieren und es zu nennen Buch No Bt und, zum Beispiel, und Sie können Ihre Ebenen anders benennen. Ich mache es gerne auf diese Weise, weil die Mehrheit der Entwickler
sowieso Thesen erstellen , also denke ich, dass es einfacher für sie ist. Wenn ich das tue, vergewissern Sie sich, dass es in der Mitte ist. Dann stellen Sie sicher, dass Sie es auswählen, und was wir wollen, ist es, es zu positionieren. Zum Beispiel 70 Pixel nach links. Von diesen Tasten halten Sie Shift und Pfeil nach links. Möchten Sie 1234567 wie so wählen, dann können Sie diese Flag Platzhalter Position 20 Pixel wie so wählen Sie dann diesen Kontakt und richten Sie es perfekt mit diesem Flug, wie so 1234567 und tun Sie das gleiche für den Rest von ihnen, so dass Sie Wählen Sie alle aus und Sie können sehen, wo es 71 ein Pixel auf der rechten Seite ist. Sie können halten, verschieben und auswählen oder entfernen Sie einige von ihnen, so dass Sie sehen können, dass wir zwei von ihnen direkt hier haben. Ich kann Shift klicken Sie auf die Reservierung, und es wird de wählen Sie es Also, was wir für die Zimmer brauchen, ist, dass wir diesen gleichen
Pfeil verwenden,
so control de, um Pfeil verwenden, es zu duplizieren. Und Sie können die Umschalttaste und den linken Pfeil halten und den ganzen Weg nach hier bewegen. Zoomen Sie etwas näher, und Sie können es direkt hier positionieren, bis es rastet, wie Sie es mit Text gesehen haben . Also 1234567 Und wir werden Zimmer aufstellen. 20 Pixel Zehe links davon. Also 12 Und da gehst du. Sie haben Ihre Navigation erstellt. Also, was ich jetzt tun werde, ist, alle diese Schichten auszuwählen, sie ein bisschen besser zu
ordnen. Etwas, das ich nicht getan habe. Alles ist da. Eine letzte Sache ist also, den Rand aus der Navigation zu entfernen. Also lassen Sie uns alle Kinder Kontrolle G. Klicken Sie
nicht direkt hier in den Ordner tippen Sie nie zentrieren. Und da gehst du. Sie haben Ihre Navigation erstellt. Also im nächsten Video, ich werde Zeh, zeigen Sie, wie Sie ein Heldenbild erstellen können und wir gehen weiter von dort nach unten
18. Wireframe 2: Also lassen Sie uns jetzt starten und Schöpfer Held Bild. also noch einmal Wählen Siealso noch einmalein Rechteck aus, ziehen Sie es hierher und lassen Sie es uns geben. Entfernen Sie den Rahmen und lassen Sie uns etwas Farbe geben, so können Sie verwenden, zum Beispiel, E c E C E C E C Moderator, und wir werden diese Farbe für alle unsere Bilder verwenden, so
dass Sie die Körnung entfernen und sehen , wie das auf der Seite aussieht. Und Sie können das Tolle zurückbringen, wenn Sie mit dem Design beginnen möchten. Lassen Sie uns etwas Höhe von 900% geben und der Witz ist 1920 0 Entschuldigung, ich habe es für die gesamte Kunsttafel getan. Wählen Sie also einfach dieses Rechteck aus und geben Sie es 900 für die Höhe. Wie Sie hier sehen können ganze Schicht und bewegen Sie es, bis es trifft, was die nie mag es hier richtig. Positionieren Sie es ein bisschen zurück und wir werden ihm einen Namen von Held BG geben. Und es ist wichtig, Ihre Layer nicht nur für Entwickler, sondern
auch für sich selbst zu benennen , denn später, wenn wir in diesem Prototyp für den Client animieren, brauchen
wir die gleichen Ebenennamen für die Auto-animierte Feature-Zehe funktionieren korrekt. Deshalb ist es wirklich wichtig, Ihre Arbeit zu verkürzen. Und sobald Sie etwas entwerfen,
fangen Sie an, es zu schichten. Beginnen Sie, es zu benennen, so dass es später einfacher für Sie ist, wenn es die Zeit für die Animation kommt, so dass Sie es leicht tun können, wenn Sie Layer-Namen
von Anfang an haben , dann gehen Sie zurück und stellen Sie sich vor, Sie haben, für Beispiel, 200 unsere Ports, und Sie müssen alle Ebenen innerhalb dieser umbenennen 200 unsere Ports. Es ist also wirklich zeitaufwändig, und es ist wirklich wichtig, dass du Louis deine Schichten nennst, während du weitergehst. Ich weiß, dass viele Designer das nicht gerne machen, und sie überspringen diesen Teil. Aber innerhalb von Adobe-Eiern, besonders wenn Sie etwas davon mit Auto-Animate-Funktion animieren möchten, ist
es wirklich wichtig, dies zu tun, weil sonst es einfach nicht funktioniert. Also lasst uns zurück springen, und auch ich habe dieses Symbol für die Platte in der Tastensteuerung erstellt, siehe, denn dies wird unser Held Hintergrundvideo sein. So, zum Beispiel, es beginnt automatisch zu spielen oder die Leute können hier klicken, und es wird in den Vollbildmodus springen und starten Sie das Video für in diesem Hotel
Sonesta spielen . Lassen Sie uns einen Text erstellen und ich kann direkt hier springen, um die nie klicken Sie hier. Kontrolle. Siehst du, damit ich hier treffen kann. Kontrolle. Wir duplizieren diese Ebene. Verschieben Sie es nach unten wie so, und Sie können in ihr Asset-Panel springen und klicken Sie auf Zeichenstile, weil Schulden erste
Charakter-Stil sind und Sie können auch in Buch springen. Jetzt treffen Sie gleich hier. Erstellen Sie diesen zweiten Zeichenstil, da wir einige verschiedene
Zeichenstile in diesem Design verwenden werden. Daher ist es wirklich wichtig, dass Sie sie als Assets gespeichert haben, weil es wirklich einfach ist, dann zurück zu springen, einige Änderungen vorzunehmen, und es wird einige Änderungen weltweit zu schaffen. Also, zum Beispiel, wenn Sie es eine größere Größe geben wollen, wird
es das tun. Oder wenn Sie die Farben ändern möchten, wird
es tun, dass leicht, Also klicken Sie darauf. Vergewissern Sie sich, dass es in der Mitte ist. Doppelklicken Sie hier, Eingabe willkommen zu, und er hat hier versucht, es in der Mitte Position im Sommer zu positionieren und hier Control D. Wir werden in London East Boutique Hotel eingeben, weil das ist der Name von unserem Hotel control de duplizieren Sie diese nach unten und geben Sie Regen. Zum Beispiel, Ihr Zuhause weg von zu Hause, einige zwei Lügen Tod für diese eine. Wir werden es ändern und wir werden es einfach hier ändern, um faire Anzeige zu spielen. Klicken Sie hier. Du wirst es Größe von 70 geben und wir werden es in fett kursiv ändern, nur um etwas Interesse zu hören zu geben, weil ich bereits mit dem Kunden gesprochen habe und sie mögen die Idee, verschiedene Telefone
für die Titel zu haben , wie wir uns für den Text. Das ist, was wir jetzt tun werden, und lassen Sie uns auch eine andere Farbe geben. Also dafür werden
wir 55555% verwenden und wenn ich hier die Zehe klicke, entfernen Sie die große, Sie können sehen, wie das aussieht, so steht es von der Seite nur ein bisschen besser als vorher. Also lassen Sie uns gut sauber zurückbringen Zehenlayout oder ich kann es so lassen, weil alles
im Grunde in der Mitte für diesen Teil ist . Also lassen wir es so, wie es ist, also lasst uns einfach all diesen Text ein bisschen besser ausräumen. Wenn ich also etwas näher heranzoomen, halten Sie meine Umschalttaste gedrückt, bis sie genau hier einrastet. Ich werde meine Shift-Taste noch einmal halten. Unsere Para 1234 machen es 40 Pixel nach oben. Mach das gleiche für diesen einen so, dann verschiebe. 1234 Wie Sie sehen können, ist
es genau das Gleiche. Aber für diesen hier, lassen Sie es uns bei 80 behalten. Also lassen Sie es uns doppelt geben. Wählen Sie alle aus. Aber zuerst, lasst uns sie bestellen. Herzlich willkommen im Top-Boutique-Hotel Herren's. Dieser Text ist an der unteren Schicht, also habe ich geredet. Alle von ihnen steuern G Select Hero BG mit der Steuerungstaste und einfach positioniert sie
so und das wird sie in der Mitte für dieses Heldenbild auf Gruppe alle von
ihnen einrasten . Und es ist einfach, sie alle wieder zusammen zu gruppieren. Steuerung G L Klicken Sie hier. Nennen Sie es Held wie so, und das ist es für unser Heldenbild. Also werde ich Sie im nächsten Video sehen, wenn wir anfangen, über den Abschnitt zu entwerfen
, der direkt hier unter unserem Heldenbild gehen wird, und es wird im Grunde ein bisschen mehr über unser Hotel erklären. Also, wenn sie landen, haben
sie diese einfache, nette Navigation. Sie haben diese schöne, einfache Heather mit dem Video, das sie spielen können. Aber darunter, sie haben mehr über unser Hotel und über uns Informationen. Grundsätzlich, nur einen Blick, damit sie den Norden ein bisschen besser über die Dinge, die nicht in diesem
kurzen Video waren , Also werde ich Sie dort sehen.
19. Wireframe 3: Also, was wir jetzt tun werden, ist wählen Sie dies und ich werde diesen Text sowie
Decks Text Control de verwenden, um es zu duplizieren und einfach klicken und ziehen Sie es außerhalb dieses Ordners . Entfernen Sie es nach unten, halten Sie Shift und down, Pfeil. Oder Sie können das einfach ausblenden und so verschieben. Und was wir wollen, ist, dass wir es hier aufstellen. Halten Sie Shift gedrückt und bewegen Sie sie nach unten. 100 Pixel. Seife. 123456789 10. Und wie Sie sehen können, hat
es 10 100 Pixel nach unten verschoben, weil wir ihm hier etwas Leerraum geben wollen. Und wie Sie sehen können, können
Sie sogar die Heldengröße hier auf die Falte erhöhen. Aber die Falte ist irrelevant,
im Grunde, weil die Leute diese Website auf verschiedenen Geräten betrachten. Also nehmen Sie einfach das iPad, zum Beispiel, ich wette, hat viele verschiedene Variationen. Gleiche wie das iPhone und ganz zu schweigen von unseren Android-Handys. Ganz zu schweigen von einigen verschiedenen Laptops. Also, wenn Sie sehen, wenn Sie diese Website auf Laptop, die einen 13-Zoll-Bildschirm hat, wird
es ein bisschen anders aussehen, als wenn Sie es auf einem 15-Zoll-Bildschirm, 17-Zoll-Bildschirm und so weiter. Bisher passt sich diese Falte wirklich an verschiedene Bildschirmgrößen an, also bedenken Sie das einfach. Also, wenn Sie ihm einen schönen weißen Raum hier geben, wird
es leicht an verschiedene Bildschirmgrößen anpassen. Also lassen Sie uns weitermachen, und ich werde damit beginnen, einen Kreis zu erstellen. Also werde ich hier einen Kreis erstellen. Nennen Sie es einfach Circle One, zum Beispiel, und geben Sie ihm 1 50 mit 1 50 und ich werde meine große zurück bringen Sadullah klicken Sie hier, indem Sie auf das Layout klicken und was ich will, ist, es zu verschieben, vielleicht 80. So 12345678 von der unteren Zeile aus diesem Text oder vielleicht sogar 100. Lassen Sie uns also 100 geben, um den gleichen Abstand von hier nach hier zu haben, sowie von hier nach hier. Also, das ist unser Kreis eins Control D. Wir werden
auch einen Kreis erstellen . Klicken Sie einfach hier, und es wird es in die mittlere Steuerung D und erstellen Kreis Nummer drei und halten Shift
und positionieren Sie es hier so Was wir wollen, ist, es zu positionieren, weil wir 12 Spalten in unserem
Raster haben . Wir wollen jeden Kreis Toby in der Mitte von diesen vier. Dieser erste Kreis wird also in der Mitte dieser vier sein. Zweiter von diesen vier und 3. 1 davon für so weit. Um dies zu tun, wählen Sie
einfach eine Rechteck-Zeichnung auf die vierte. Sie können etwas näher heranzoomen und Sie können sehen, dass es von diesem geht. So landet 1234 auf diesem und Sie können einfach Rechteck-Kreis mit einem Klick hier auswählen , und es wird den Kreis so in der Mitte platzieren, weil Sie das mit Hilfslinien tun können. Aber ich fand das viel einfacher, weil, wie Sie sehen können, es wirklich einfach ist. Wählen Sie Slicker aus. Drei Plätze genau hier. Klicken Sie hier, Lil essen. Und das, was Sie beendet haben. Also fand ich es viel einfacher, Dinge auf diese Weise zu tun, dann einfach voran zu gehen und etwas anderes Guides für diesen Prozess zu erstellen. Weil ein Zay sagte, ich finde, dass das viel einfacher ist als das. Also, jetzt, was wir tun können, ist klicken Sie direkt hier Control Deal. Duplizieren Sie dies auf Positionen wie so 12 vielleicht sogar vier, um es einige schöne Batting Control
de Positionen zu geben , wie so gesteuert dergleichen. Also auf dieser 1. 1 nennen wir es King Size Bett wie so,
und was wir tun können, ist, es in der Mitte so zu positionieren und sicherzustellen, dass es Bolzen ist und stellen Sie sicher, dass es diese dunklere Farbe ist. Also haben wir es nicht wie hier eingestellt, so dass Sie es auswählen können. Klicken Sie hier und es ist diese dunkle Farbe. Klicken Sie darauf, und es wird diese dunklere Farbe anwenden, und Sie können dasselbe für diese tun. Also treffen Sie hier und stellen Sie sicher, dass es Bolzen ist und schließlich klicken Sie darauf und erstellen Sie einen neuen Charakterstil, weil wir diesen Charakterstil nicht zuvor hatten. Doppelklicken Sie hier. Geben Sie Lebensmittel enthalten, wie so stellen Sie sicher, dass es in der Mitte und eine schnelle hier und Eingabe Strand Zugang, weil sie gehen, um direkten Zugang zum Strand von diesem Hotel haben. Also, wie ich sagte, sind nur einige unserer wichtigsten Futures, und May Fincher ist von unserem Hotel entfernt, also können sie im Grunde, wenn sie landen, wenn sie landen,
das Video ansehen und mehr darüber erfahren, wie das Hotel sieht aus, wie das Personal aussieht, Wo befindet es sich? Nur einige der wichtigsten Funktionen und die gehen, um in diesem Hotel zu verkaufen endet einfach klicken Sie auf Buch. Nun, wenn sie damit zufrieden sind
oder wenn nicht, oder wenn nicht, wie die Mehrheit der Menschen nicht sein wird, werden sie einfach nach unten scrollen und mehr über unser Hotel erfahren. Was wir als nächstes tun können, ist hier klicken, zurück zum Ebenenfenster
springen, damit wir sehen können, wo wir tief gesteuert werden, und wir werden es direkt hier und in das gleiche verschieben. So 1234 macht 40. Und was ich jetzt tun möchte, ist auf den Bereichstext zu klicken und es wird den Bereichstext aus diesem
Text erstellen , und was ich möchte, ist, dass Sie es einfach so verschieben können und sicherstellen, dass es der Witz aus diesen drei Spalten ist, und Sie können Verschieben Sie es in die Mitte, wie wir es mit diesem Text getan haben. Stellen Sie sicher, dass es irgendwo hier ist und Sie können zu Plug Ins springen. Klicken Sie auf den Lord of Some gefüllt mit Platzhaltertext, klicken Sie auf Text einfügen ,
und noch einmal, wenn Sie diesen Plug nicht haben, können
Sie hier klicken in der Plusklick rechts hier, geben Sie in London ipsum, und es wird Ihnen zeigen, dass Blufgan einfach auf installieren klicken und Sie das gleiche tun können. Was ich gerade getan habe, geben
wir es. Ich denke, so etwas funktioniert gut. Wie ich schon sagte, es ist in der Mitte. Kontrollieren Sie Andi, um es zu duplizieren, und Sie können hier klicken, um es in der Mitte zu positionieren, kontrolliert die noch einmal und stellen Sie sicher, dass es in der Mitte mit diesen ist. Und schließlich, lasst uns zurück in unser Ebenen-Panel springen. Also lasst uns ein paar davon bestellen. Also zuerst haben wir Kreis wollen direkt unter, äh, Ihr Zuhause weg von zu Hause, so wird es genau hier gehen. , Wie gesagt, das ist
das langweilig, aber es ist wirklich wichtig, diese Schichten zu bestellen, also haben wir Nahrung. Enthalten ist die 2. 1 wie diese und haben Kreis Strand Zugang und Dis Text direkt hier. Und schließlich können Sie sie separat gruppieren, aber ich werde sie einfach so gruppieren, so steuern Sie g, um sie zu gruppieren, indem Sie über uns tippen, weil dies über uns Abschnitt sein wird und später beginnen wir zu entwerfen und wir werden einige verschiedene Icons direkt hier in diesen Kreisen. Aber wie Sie vorerst sehen können, haben
wir die Dinge sehr schön weiterzubewegen. Wie Sie sehen können, haben
wir dieses schöne,
saubere, saubere, konsistente Layout für jetzt. Und später im nächsten Video, werden
wir ein Zeugnis hinzufügen, und ich werde es hier unten platzieren, also werde ich Sie dort sehen.
20. Wireframe 4: Nun, es springt jetzt und erstellt dieses Zeugnis. Also werde ich hier klicken. Und was wir brauchen, ist dieser Text. Also werde ich diesen Hedonist öffnen und diesen anderen Text sowie Control de auswählen, um sie zu duplizieren. Verschieben Sie es hier. Dann bewegen Sie es einfach unten hier und Sie können Shift halten oder einfach verstecken und verschieben Sie es in Position irgendwo hier herum. Und was wir wollen, ist, es irgendwo hier zu positionieren. Nun, als nächstes möchte
ich Teoh dieses Bild wählen. Also steuern Sie es so und positionieren Sie es einfach so. Und dann können Sie es so verschieben, weil ich später eine Hintergrundfarbe erstellen möchte. Wir fangen an zu entwerfen, weil ich will. Dieses System nahm nur Pop, weil ich ihre Aufmerksamkeit behalten möchte. Ich möchte, dass sie das weiter lesen, weil sie sich vielleicht langweilen werden, wenn sie zu diesem
Abschnitt kommen . Aber wenn sie zu diesem Abschnitt kommen, weil es diesen Spritzer der Farbe hat, wird
es ihr Interesse behalten und es wird sie lesen. Und wir werden das Bild hier von der Person haben, die das Zeugnis gesagt hat, also fangen
wir an, das zu entwerfen. So 100, wie Sie sehen können, gibt
es uns den gleichen Abstand wie von hier. Also lasst uns das aufsaugen und positionieren. Vielleicht 12345678 Oder geben Sie ihm einfach 100. Also lassen Sie uns alles konsistent halten. Wählen Sie das aus. Machen Sie es von links. Das wird also
zum Beispiel
Jenny aus London schreiben, zum Beispiel
Jenny aus London schreiben, und was wir
wollen, ist auch hier einen Call-to-Action-Button zu erstellen, denn vielleicht wollen sie von hier aus buchen. Also werden wir diesen Call-to-Action-Button in diesem Design verschieben. Also einfach ausgewählt Steuerung D und Sie können mit, wie, diese genannt Shift to Es ist irgendwo hier herum. Und wenn Sie es sehen, können
Sie es von hier auswählen und einfach hier direkt über Null BG zeichnen, so dass Sie es tatsächlich sehen
können. Und was wir auch wollen, ist, ein Zitat zu erstellen, so kontrollierte die Position so und für dieses, wollen
wir es kursiv halten. Und wir wollen 36 zum Beispiel erstellen, und springen sofort erstellt Charakterstile daraus und ich werde einfach Fuß. Wählen Sie dieses Zitat aus dem Beispiel, das ich bereits erstellt hatte. Wie Sie sehen können, ist
es einfach ein schönes Zitat von dieser Person, die sagt, wie wunderbar es an diesem Ort war . Lassen Sie uns also etwas Abstand geben. 1234 Gleiches wie bei ihm für den Rest unseres Designs. 1234 Und bewegt euch immer so und
lasst uns endlich unser Bild erschaffen. Also werden wir unser Bild wählen, um von links nach rechts zu gehen. Ich habe die Grenze entfernt. Was wir für die Abmessungen wollen 800 Gewicht 500 und Sie können hier klicken. Wir geben ihnen so einen Eckenradius von 10 und von 10, weil das eine Spitze ist, richtig? Das ist ein Oben unten, richtig? Und wie Sie sehen können, , diese Kanten gerade und diese sind um sie herum,weil wir sie gerade halten wollen, weil sie mit dieser linken Kante von unserem Bild ausgekleidet sind. Also, was wir jetzt wollen, ist, das etwas besser zu organisieren, damit wir all diese Kontrolle
Ggruppieren G können
und wir das als Zeugnis verwenden können. Beachy so und das wird unser Zeugnis sein. Also,
so und das wird unser Text sein. Also, was ich tun möchte, ist, sie in der Mitte von hier zu positionieren. Was wir also tun können, ist ein weiteres Rechteck zu erstellen, bis es sich damit auseinandersetzt. Damit auch die untere Kante. Und was ich möchte, ist, mein Bild zu positionieren, also wählen Sie beide aus. Klicken Sie hier. Es wird das Bild in der Mitte von diesem Rechteck platzieren und das gleiche für den Text und
den unteren wie folgt tun . Dann entfernen Sie das Rechteck und los geht's. Jetzt möchte ich sie etwas besser ausrichten. Doppelklicken Sie also auf Ihren Kunstport und klicken Sie hier im Layout-Raster. Also, was ich will, ist, alle von sechs an den linken Rand zu positionieren. Also wieder, wir haben 12 und das wird am linken Rand von sechs sein. Also erste Spalte, 2. 3. 4. 5. und dann 6. Also diese, im Grunde, bis sie am linken Rand davon rasten, werden
wir eine in der Mitte haben, die leer sein wird und dann wird dieses Bild
den Rest aus dem Raum ausfüllen . So wird es aussehen schön,
einfach, sauber, sauber, inkonsistent mit dem Rest von unserem Design. Und ich denke wirklich, es sieht sauber und leicht zu lesen. Also werde ich diese Gruppe und ich werde alle auswählen. Es ist der Erste. Mal sehen, ob wir alles richtig bestellen. Wir haben alle von ihnen Kontrolle G ausgewählt und dieses Zeugnis so genannt, also jetzt, da wir geschaffen
haben, dass wir das, was wir tun können, ist, den Bereich der Räume zu bewegen, weil das der
wichtigste Abschnitt ist und dieser Abschnitt geht im Grunde verkaufen diese Website um die Besucher zu essen. Also im nächsten Video, werden
wir einspringen und einen Bereich für Räume erstellen genau hier, wo wir
verschiedene Räume erkunden und was sie bieten. Wenn Leute tatsächlich zu diesem Abschnitt kommen, wenn sie nach unten scrollen. Also sehe ich dich dort
21. Wireframe 5: das ist kein Sprung in und schaffen Zimmer bieten. Also klicken Sie hier und ich werde diese beiden Patrouille D wählen, um sie zu duplizieren, bewegen Sie sie herum und halten Sie einfach Shift und positionieren Sie sie zurück. Aber wählen Sie beide so aus und stellen Sie sicher, dass sie 100 gleich sind wie alle anderen. Und genau hier werden
wir schreiben, um unsere Zimmer zu erforschen, weil der Tod unser Hauptangebot sein wird. Dumpfes Klicken Sie hier. Komfortable Zimmer für Alexe-Testanwendung, weil, wie sie sagten, Kopie ist wirklich wichtig und dies wird ein bisschen weiter zu erklären, weil sie bereits wissen, dass sie den Urlaub an diesen Ort kommen wollen. Aber wenn Sie viel mehr schreiben und viel mehr erklären, wenn es irgendwie in das
Gehirn ein wenig mehr eingraviert wird , wenn Sie ihnen sagen, was sie wirklich von diesem Ort wollen. Also jetzt werden wir anfangen, unsere Bilder zu erstellen, also verwenden Sie ein Rechteck. Aber bevor wir es tun, wählen Sie
nicht hier aus. Klicken Sie auf. Großartig! Weil wir brauchen sind großartig und wir werden einfach zeichnen ein Rechteck Zehe Gefühl vier von diesen und wir gehen Zeh, Bewegen Sie es hier und nennen Sie es ein Zimmer eins, weil das wird ein Zimmer Ein Bild und 5 24 mit ist in Ordnung und 302 Lassen Sie uns das für die Höhe verwenden. Nun, was wir hier benutzen werden, ist 10 auf 10 percenter, weil wir den oberen
linken und oberen rechten Eckenradius Toby um ihn herum haben , und wir wollen keine Grenze verwenden. Aber wir wollen Farbe verwenden, damit sie diese Farbe verwendet wird und weil wir sie nicht erstellt haben, lassen Sie uns das so auswählen und klicken Sie einfach hier. Zehe Wählen Sie die Farbe aus, die die Farbe für unsere Bilder ist. Und wenn ich hier rechts klicke, können Sie einfach sehen, Sie sehen, so dass es richtig ausgewählt. Das ist geschlossen, weil wir es nicht mehr brauchen. Klicken Sie hier. Und wie gesagt, klicken Sie
einfach auf die Farbe, und es wird den Spritzer der Farbe Zehe bringen, die Objekt, das Sie wollen. Also, wenn ich das Layout ausblenden, können
Sie sehen,
dass es richtig ausgewählt wurde, also noch einmal das Layout einschließen, weil wir es brauchen und diesen Toby 100 verschieben. Und wenn Sie nicht sehen können, so verschieben Sie unten Pfeil. 123456789 10. Also, wieder
einmal, wir haben die gleiche Entfernung von hier nach hier. Gleiche wie in allen diesen anderen Beispielen. Also lassen Sie uns Control d Rufen Sie diesen Raum
auch, auch, und positionieren Sie ihn in der Mitte wie so Kontrolle. De nannte diesen Raum drei Hold Shift und Pfeil nach rechts und Sie können es an Ort und Stelle
so einrasten . Und wie Sie sehen können, gibt
es uns genau den gleichen Abstand von 40 Pixeln zwischen diesen Bildern. Also, wenn ich hier nicht mag, verstecken Sie unser Layout, Sie können sehen, dass wir schöne Abstände zwischen jedem Bild haben, so dass die Leute nicht
versehentlich auf das eine oder auf das andere klicken können . Also, was wir jetzt wollen, ist, einen Text zu erstellen, der so gesteuert D auf dieser einen Position knapp unter Raum Nummer eins wie, also stellen Sie sicher, dass es von links nach rechts geht. Positionieren Sie es so und stellen Sie sicher, dass es zuerst ist. Nützte das ab $36 pro Woche und rufen Sie dieses klassische Zimmer an. Aber stellen Sie sicher, dass es ein reguläres ist und erstellen Sie dann einfach eine andere Zeichenstile, um hier. Also dieser hier ist kursiv, und dieser ist regelmäßig. Also springen Sie hier zurück und stellen Sie sicher, dass es 40 Pixel von hier sind. 1234 Control de wieder repliziert, und Sie können diese verwenden, um 24, aber regelmäßig zu sein. Also dieser und wir gehen Zehe schreiben, ausgehend von $24 pro Nacht. Also wird dieses Zimmer so viel pro Nacht kosten. Also, wie in den Beispielen der Wettbewerbsanalyse erklärt, ist
es wirklich wichtig, dass Sie Wert schaffen und Interesse an Ihrem Design schaffen. Wenn Menschen diese Räume erkunden, können
sie sofort wissen, ob sie es sich leisten können oder nicht. So können sie das von hier aus wissen, denn wenn sie diesen Preis sehen, wenn er aus ihrem Budget ist, werden
sie einfach diese Website verlassen und keine Zeit mehr verbringen. Sie werden nicht darüber verärgert sein, weil sie wissen, dass sie es sich nicht leisten können und dann einfach weitermachen. Aber wenn sie es sich leisten können, dann werden sie weiter lesen. Und all diese Elemente oben dienen, dass wir sie überzeugen. Selbst wenn sie nicht über das Budget verfügen, sind
sie immer noch an all diesen Elementen und all den Informationen interessiert, die sie bereits so sind. Vielleicht wird sich das Geld leihen. Vielleicht werden sie sich, ich weiß nicht, zusammenschließen, und vielleicht werden zwei oder drei von ihnen in den gleichen Raum gehen und einfach die Kosten von
diesem Raum teilen . Also lasst uns ein bisschen nach unten bewegen. Also, was wir wollen, ist, einige Funktionen direkt hier zu erstellen, so dass jedes Zimmer unterschiedliche Funktionen hat, basierend auf dem Budget und basierend auf dem Raum, den Sie ausgewählt haben. So einfach kontrolliert. In der Tat, und ich werde das noch einmal 40 Pixel nach unten verschieben. Das wird also 20 sein, weil es in der Nähe ist. 1234 Das wird 40 sein. Also nennen wir das Betten wie diese Control de. Wir werden es duplizieren, einfach verschieben Sie es einmal oder vielleicht sogar zweimal, und gibt einen schönen Raum und tippen Sie ein. Also werden wir diesem eine andere Farbe geben. Also lasst uns von so etwas wie C fünf c fünf c fünf percenter gehen. Schön. Großartig. Wenn Erwachsene klicken Sie hier in der Höhe, die Spalten können Sie sehen. Es ist schön, eine einfache graue Farbe wie so. Also, wenn ein springender Knoten rechts hier den Zeh klicken, bringen Sie mein Layout zurück. Was ich tun möchte, ist diese zu duplizieren, also kontrolliere die oder du kannst sie einfach so
halten, halten und dupliziere. Halten Sie Shift auf, wie so vielleicht 20 Pixel. Ich denke, es ist gut. Also lassen Sie uns diese Abkürzung noch einmal so verwenden. Dann, so, und was wir wollen, ist sechs verschiedene Funktionen zu haben. Also lasst uns noch einen erstellen. Wenn sie also mehr über diesen Raum erfahren möchten, können
sie einfach hier klicken und mehr erfahren. Also lassen Sie uns das auch schaffen. Also lassen Sie uns diese 40 l klicken Sie hier. Sie können nicht mehr Kontrolle lernen. A. Um den Text auszuwählen, und klicken Sie einfach hier die Zehe. Unterstreichen Sie es, denn das wird unser Link sein. Und lasst uns die Farbe von diesem Link ändern, um sich zu verfärben, damit sie es wissen können. Wenn sie mehr erfahren wollen. Sie können einfach direkt dort klicken, und es wird sie auf die spezielle Seite für dieses klassische Zimmer bringen. Deshalb sage ich immer wieder, dass es wirklich wichtig ist, Interesse zu schaffen und ehrlich zu sein damit man keine Zeit der Menschen verschwendet, damit sie es auf einen Blick wissen können. Wenn sie es sich leisten können, was jedes Zimmer hat, und wenn sie wirklich mehr erfahren wollen, können
sie auf den Knopf Zehe klicken, gehen und mehr erfahren und dann das Zimmer auf dieser bestimmten Seite buchen, die eine dedizierte Seite für diesen bestimmten Raum sein. Aber wenn sie es mögen, und wenn sie mögen, was sie hier sehen, können
sie auf Buch klicken. Jetzt können sie gleich hier gehen. Klicken Sie auf Jetzt buchen, und es wird ein paar mehr von diesen Call-to-Action-Buttons unten angezeigt, als wir
sie entworfen haben . Wählen wir diese aus und lassen Sie uns einige dieser Informationen ändern. Das wird also Strandblick sein und wird richtig sein? Keiner. Also lassen Sie es uns verstecken. Wählen Sie diese verschieben. Also nein, und wie wir es getan haben, gehen
wir genau so rein, also stellen Sie sicher, dass es wie Seife darauf ausgekleidet wird, wird Terrace gesagt und noch einmal
dasselbe tun . 12 und es wird dauern. Weißt du, das wird WiFi sein und dieses malerische Ja, so. Das wird so klimatisiert sein. Verstecken Sie es mehr Dieses Ja, so. Wie gesagt, sind
dies nur Hauptmerkmale. Und wenn sie mehr Funktionen wollen, werden
sie in die jeweilige Seite gehen und sich dann informieren und sehen mehr Bilder für diesen bestimmten Raum und was er zu bieten hat. Und das wird Toe schreiben. Ja. Also, jetzt müssen wir sie gruppieren. Also suchen Sie die Betten, suchen Sie eine, und Sie können sie,
wie so zu den Spitzen von knapp unter dem Startpreis bewegen . Wie dieser Blick auf den Strand. Und keine Bewegung sie wie diese Terrasse und keine bestimmte direkt unter Ihnen und keine Y fünf. Ja, es wird unter der Terrasse gehen. Also genau hier, Klimaanlage wird unter WiFi gehen und ja und Parkplatz Und ja, werden genau hier sein. Und schließlich brauchen
wir das. Erfahren Sie mehr. So bewegen Sie es den ganzen Weg nach unten und Sie können einfach halten, verschieben, klicken Sie rechts hier und wählen. Erfahren Sie auch mehr. Kontrolle G, um sie zu gruppieren. Und vielleicht können wir diese Funktionen so nennen. Und jetzt, was wir tun können, ist wählen Sie all diese Kontrolle De und wir können unsere Shift-Taste gedrückt halten, um sie zu bewegen, Position
zu hören und so zu mögen und alle von ihnen zu bewegen. Also alles, was gerade unter Raum ausgewählt, weil ein Raum zu haben, diese Funktionen das gleiche
tun. Also kontrolliere den Umzug. Alles unter Raum drei, Halten Sie Shift wie so, wie Sie sehen können, schnappt
es in Position und das wird Familienzimmer sein. Also wählen Sie diese Bohne Familienzimmer ab, und es wird ein bisschen teurer sein und es wird $36 pro Nacht und das wird das
teuerste Zimmer sein . Also Grand Lux Zimmer und es wird von $48 pro Nacht wie diese beginnen. Und, natürlich, mit Funktionen sagen, wie bei allen anderen Dingen im Leben, im Grunde, haben
Sie eine Terrasse wird ja für dieses Beispiel in diesem Raum sein, all dies ist Ich werde es schreiben. Ja. Und für diesen letzten haben
wir einen Blick auf den Strand. So wie Sie sehen können Ah, dieser hat nicht so viele Funktionen. Dieser hat mehr, und dieser hat am meisten. Also im Grunde, wenn sich der Preis nach oben bewegt, auch
Futures nach oben. Also, was wir endlich hier eingeben müssen, ist, weil dies zwei Betten haben wird und das wird vier Betten haben, weil es das größte ist, wie so und schließlich, lassen Sie uns einen schönen,
einfachen Hintergrund erstellen . Also lassen Sie uns Rechteck verwenden, um ein Rechteck wie so zu zeichnen und was wir wollen, ist Dimensionen von
20 zu geben . Das ist in Ordnung. Und 6 21 Lasst uns damit gehen. Und was wir wollen, ist, ihm einige um es Adresse zu geben. Also genau hier wird das Zelt hier sein. 10. Die untere Adresse wird also um sie herum sein. Und für diese Bilder werden die
oberen Kanten geerdet werden. Also, was wir das nennen können, ist ein Zimmer ein BG so mehr mit knapp unter einem Raum, das man verfügt und fast Zimmer zwei wie dieses. Also Raum eins, BG und wir können es oben so positionieren, und wir können all diesen Text und mehr auswählen, die vielleicht 20 Pixel nach links. Viel zuerst wählen ältere, so wie diese, und es öffnet dies ohne ersichtlichen Grund. Aber Sie können es so verschieben und nur sicherstellen, dass Sie 20 Pixel von diesem linken Rand entfernt sind. Also 12 mit Ihrer Schicht ausgewählt, und das ist im Grunde ist es, weil, wenn die Leute in diesem Raum wählen, wird ihnen eine schöne
und Schlagschattenhintergrund geben . Also kann ich duplizieren, dass BG Control auf D einen Raum zu B.
J genannt hat. Lassen Sie uns es mit dieser eine Mittelposition machen, die es knapp unter Raum zwei Funktionen und alles so ist. Dann wählen Sie alle diese Funktionen aus diesem Text, halten Sie die Umschalttaste gedrückt, und dann können Sie es,
äh,
Toby so positionieren äh, wie dieses. Verschieben Sie also 12, um 20 Pixel von hier aus zu bewegen. Oder du kannst 40 gehen, wenn du willst. Und lassen Sie uns alle auswählen und ihnen auch 40 geben und dasselbe für diesen tun. Also 1234 Und schließlich wählen Sie diesen Raum, um G kontrolliert zu werden. Tiefer Zitat von drei B, Jim wie so, positionieren Sie es den ganzen Weg und unten knapp unter diesen Futures und positionieren Sie es, bis es sich
hier trifft . Also treffe ich einen kleinen Fehler, aber lassen Sie uns einfach wechseln, damit dies Raum wird, wird ein Raum
drei sein . Wie so und jetzt Endlich, lasst uns alle gruppieren. Also kontrolliere G. Rufe diesen Raum drei auch und nannte schließlich diesen Raum eins, weil es später viel einfacher wird, wenn wir
anfangen, alle diese zu treffen. Also, wenn ich hier nicht mag, verstecken Sie unser Gitter, Sie können sehen, wie das aussieht. So ist alles schön und sauber. Ich mag nicht wirklich, wie das hier aussieht, weil es die Grenze hier
oben gezeigt hat . Ich mache mir keine Sorgen,
denn wenn Sie das Bild einschließen, können
Sie den Schlagschatten direkt unter das Bild legen. Und Sie können das im Grunde wissen und es im Grunde ausblenden, damit es nicht angezeigt wird und Sie es sogar ausblenden und es dann einfach beim Klicken anzeigen können. Also lasst uns das vorerst tun. Also Zimmer BG wählen Sie alle aus. Also dieser nannte Kontrolle alle von ihnen und vereinfachte die Grenze. Und wir werden später die Grenze einschließen,
wenn wir anfangen zu entwerfen und eine letzte Sache Glitzergruppe, alle kontrollieren G und tippen Räume so und das ist es für die Räume. Also im nächsten Abschnitt werden
wir einspringen. Und wenn ich zu meinem Drahtrahmen gehe, können
Sie sehen, dass wir gerade diese Räume geschaffen haben, und das ist unser Hauptangebot, und wir haben Aktivitäten in der Nähe. Aber zwischen diesen, werden
wir einige sekundäre Angebote und sekundäre Funktionen, wo wir gehen zu
erkunden und zu erklären, um den Betrachter, warum das Hotel ist großartig, warum sie es wählen sollten und einige zusätzliche Funktionen. Es hat, wie der Poolgarten und der Parkplatz, so sehen wir uns im nächsten Video.
22. Wireframe 6: lassen Sie uns nicht beginnen und diese zusätzlichen Funktionen entworfen. Aber bevor wir Steuerbefehl s treffen, um unser Projekt zu sagen. Und wie Sie sehen können, haben
wir hier unten keinen Platz mehr. So einfach. Klicken Sie auf Ihren Hafen und Sie können diesen so viel erweitern, wie Sie möchten, damit Sie
zusätzlichen Platz für Design haben können . Also, was wir wollen Toe jetzt sind einige zusätzliche Funktionen. Durch zusätzliche Funktionen, wie Sie sehen können, ist
dies unser Hauptangebot. So können Zimmer und sie diese Räume erkunden. Und darunter wollen wir sie noch ein bisschen mehr überzeugen und ihnen zeigen, wie großartig unser Hotel ist und einige zusätzliche Features darin enthalten. Beginnen wir also mit dem Bild, und es wird genau die gleichen Dimensionen und dieses Bild haben, so dass Sie steuern können, dass De es
herausgezogen, und dann einfach hier im Raum positionieren. Springen Sie in Verhaftungen, Panel klicken Sie rechts hier, weil das die Farbe für unser Bild ist. Und dann, was wir tun können, ist, hier zu gehen, dann halten Sie die Schicht und bewegen Sie sie. 100 Pixel nach unten. So gleiche Flüssigkeit es alles aus. Diese anderen. Also, was wir als Nächstes wollen, ist, es nach unten zu bewegen. Und das wird unser Pool-Image sein, denn das wird unser erstes Feature sein. Springen Sie in die Räume, steuern Sie de, duplizieren Sie diesen Text und ziehen Sie ihn oben, und bewegen Sie ihn dann einfach nach unten. Positionieren Sie auch hier hinein. Ich mag es nicht, die große Layoutposition einzuschließen, beide machen sie eine Linie links. Und das geht genau in privaten Pool, weil einige Leute wirklich Zehenköder in einem
Pool wollen , der im Hotel enthalten ist. Eine Anschwung durch, abgesehen vom Strand. So positionieren Sie es hier. Und wenn Sie sich erinnern, haben
wir genau die gleichen Einstellungen hier gegeben. So wird der Text Fuß Fuß enthält sechs Spalten, eine wird leer und dann Rest wird durch Bild gefüllt werden. Also, wenn Sie hier sehen können, tun
wir genau das Gleiche, im Grunde. Also würde ich etwas näher hineinzoomen. Position ist ein bisschen besser, und ich gehe einfach mit einem Doppelklick auf meine anderen Dateien und kopierten Text, den ich bereits
dafür erstellt habe. Wie Sie hier sehen können. Also, was Sie wollen, ist, diese beiden so zu gruppieren G Typ in Text wie so wählen Sie das Bild und klicken Sie rechts hier, um es in der Mitte zu positionieren. Nun, mit denen, die Hit Control G ausgewählt haben, rief hier öffentlich und tippen Pool, weil das
wird ein Eins sein unsere Funktionen steuern, um den gesamten Ordner zu duplizieren. Ganze Schicht, bewegen Sie es nach unten und bis Sie 100 haben, wie Sie hier sehen können, also ist 100 ausgewählt. Nun, was Sie wollen, ist, diese beiden zu drehen. Das wird also Garten wie so sein und was wir wollen, ist, den Text oben zu bewegen, das Bild unten zu
bewegen und was wir wollen, ist, die Bild-Zehe-Entscheidung zu bewegen und
es so zu drehen und den Text an diesen Rand und Zeh zu bewegen. Machen Sie es zu einer Zeile mit dieser Spalte rechts hier auf der linken Seite. So, wie Sie sehen können, wird
es von links nach rechts und dann schließlich nach links in unserem dritten Abschnitt gehen. Also für dieses eine, was wir wollen, ist schönen Garten genannt, wie Sie sehen können und wie ich es mit dem vorherigen Beispiel getan
habe, Ich werde kopieren und fügen Sie den Text bereits erstellt und mit dem Garten fertig Control D , und dann können Sie es einfach nach unten verschieben. Oder es ist noch schneller, es auf diese Weise zu tun. Also duplizieren Sie einfach diese 1. 1 Stellen Sie sicher, dass seine 100 stellen Sie sicher, dass es den ganzen Weg nach unten ist und nennen Sie diesen einen privaten Parkplatz, weil es für einige Leute wirklich wichtig ist, dass sie
einen privaten Parkplatz haben . Also statt des privaten Pools nannte diesen privaten Parkplatz und dasselbe wie ein tat mit diesen beiden, werde
ich einfach basierten Text bereits dafür erstellt. Und jetzt, wie Sie sehen können, haben
wir diese drei wirklich schönen Abschnitte. Wenn Erwachsene, können
wir das große Layout verstecken. Wie Sie sehen können, wenn sie nach unten gehen, können
sie wirklich erkunden. Von oben ausgehend, haben
sie diese wirklich schöne einfache Navigation. Sie können auf das Heldenbild übergehen, ob sie mehr über Hotel erfahren können. Dann ziehen sie ein wenig nach unten, und sie erkunden ein bisschen mehr zusätzliche Features von diesem Hotel. Sie lesen ein schönes großes Zeugnis mit der Person, die sagt, wie glücklich sie mit dem Hotel sind. Wir können die verschiedenen Zimmer sehen, die sie haben ein Angebot. Also beginnend vom billigsten hier, den
ganzen Weg zum teuersten hier. Wenn Sie nicht überzeugt sind, lassen Sie uns ein wenig nach unten gehen, damit Sie ein bisschen mehr Funktionen entdecken können, die dieses Hotel zu
bieten hat . Und dann,
darunter, werden
wir einen zusätzlichen Abschnitt erstellen, der genau in das geht, was zu tun, wenn in Nicholas. Vielleicht ist es natürlich wichtig, sie davon zu
überzeugen, ein Zimmer zu kaufen und in diesem Hotel zu bleiben. Aber was sie tatsächlich in Mykonos tun können, damit Sie ihnen helfen können, zu erreichen und diese Entscheidung, indem ihnen
einfach verschiedene Aktivitäten zeigen, die sie einmal in Sanftmut tun können. Also werden wir das im nächsten Video entwerfen.
23. Wireframe 7: Also lasst uns nicht entwerfen. Der nächste Abschnitt der Wahrheit wird durch Aktivitäten benannt werden. Und wenn wir hier etwas näher heranzoomen, können
Sie die direkt unter den Räumen und sekundären Angeboten sehen, die wir gerade erstellt haben. Im vorherigen Video können
Sie Aktivitäten in der Nähe sehen, die dazu beitragen wird, sie weiter zu überzeugen, die Zimmer in diesem Hotel zu buchen. Also, wie wir das tun können, ist einfach wählen Sie diesen Text gesteuert tief. Also im Grunde, wie Sie sehen können, mache
ich mit jedem dieser Abschnitte genau dasselbe, weil es genau
die gleichen Elemente wie alle anderen enthält . Also ist es mehr mit ein bisschen nach unten irgendwo hier herum, bis es trifft, und Sie können sogar Shift halten und es nach unten bewegen, bis es bei 100 ist. Also ST wie alle anderen. Das wird also in das schreiben, was in Sanftmut zu tun ist. Und lassen Sie uns einfach zitieren, schlagen Sie diese und basierte es zurück Zehe hier und diese Texas Fuß Fuß genau hier, nur ein paar von nahe gelegenen Aktivitäten, die Sie helfen können, genießen Sanftmut mehr und lassen Sie uns das hier nach unten bewegen und was wir wollen ist, ein Bild zu erstellen, das hier nach unten gehen wird. Also hören Sie schnell auf, schließen Sie unseren großen Rücken. Und wir werden ein Rechteck von hier bis hier erstellen. Wir werden den Rahmen entfernen, ihm eine Farbe für das Bild geben. Also zu sagen, wie wir es getan haben, sind alle anderen Beispiele. Bewegen Sie es 100 so und es wird 600 in der Höhe sein. Also, jetzt schieben Sie es hier. Es wird vorerst ein Bild sein. Und lassen Sie uns diesen Text und Mulet und unten duplizieren. Aus irgendeinem Grund wählt
er ständig die Layer aus. Ich will nicht, dass es Zehe wählen, aber das sind nur einige der Box aus. Es wird X'd sein, aber Sie lernen, wie Sie mit ihnen arbeiten, während Sie sich bewegen. Also für diesen, werde
ich einen Dis-Text erstellen. Ich gehe Zeh, mache es so nach links. Und die erste Attraktion wird Dallas sein, das ist diese fantastische antike Stadt in der Nähe von Nicholas. So 1234 machen es 40 Kontrolle de und zog diesen unteren unten unten unten so. Also habe ich sie einfach umgetauscht. 1234 und wir machen das 1 24 so. Also stellen Sie sicher, dass es bei 40 ist, wie es jetzt ist. Und noch einmal, ich werde einfach den Text kopieren und einfügen, der bereits dafür erstellt wurde. Wie Sie hier sehen können. Also, was wir jetzt brauchen? Weil dies ein Schieberegler sein wird. Wir müssen zwei verschiedene Pfeile erstellen, so dass die Leute nach unten
scrollen und zwischen diesen Attraktionen sehen können , was sie am meisten mögen, und vielleicht ein bisschen mehr davon überzeugt werden, an diesem Ort zu bleiben. Lassen Sie uns also damit beginnen, einen Kreis zu erstellen und etwas näher zu zoomen und ihm vielleicht 92 Wochen zu geben. 92. Drücken
Sie, geben Sie Springen ein, geben Sie ihm die gleiche Farbe. Oder vielleicht können wir ihm diese Farbe geben. Es spielt wirklich keine Rolle. Entfernen Sie die Grenze und stellen Sie sicher, dass sie irgendwo hier ist. Und lasst uns diesem hier vorerst die Position geben. Springen Sie in Sicht und nennen Sie diesen einen Kreis so, und jetzt werden wir brauchen, um das Symbol zu verengen. Es ist bereits eine für mein Beispiel erstellt. Ich gehe Zeh basierend es genau hier, also gehe ich Zehe klicken und fügen Sie es ein und positionieren wir es in der Mitte. Wählen Sie also beide aus. Schlag hier, schlag hier und ich werde es weiß machen. Also komm her, mach es weiß und das wird unser linker Pfeil sein. Also kontrolliere g, um sie zu gruppieren und nenn es einfach links Pfeil wie folgt. Kontrollleitung verpflichtete mehr dieses nach rechts, wie so. Und es wird ein Schriftsteller sein und es öffnen und diesen so nennen... und dann einfach so umdrehen. Ich werde es hier auf die Zehe stellen, Mann. Bewegen Sie diesen, der mich vorher gesehen hat, oder vielleicht sogar 80 so. Ich denke, das sieht gut aus, aber vielleicht können wir es in Position bringen, so dass wir es haben. Ich entdeckte gerade Raum zwischen Sofa, doppelt schnell und verstecke das. Sie können sehen, wie das aussieht, aber ich denke nicht, dass es wirklich eine nette Idee ist, sie diese Schraube zu haben. Also lassen Sie uns einfach die gleiche Farbe wie für unsere Bilder verwenden. Also diese Farbe Yeah, und für die Pfeile. Ja, lassen Sie uns sie jetzt so behalten. Wir werden die Gesamtautos und die Stile ändern. Wenn wir mit dem Entwerfen beginnen, wählen Sie das Textsteuerelement G und dann einfach mit dieser Gruppe ausgewählt. Wählen Sie diese Pfeile und klicken Sie rechts hier, weil das wird, um sicherzustellen, dass alles in der Mitte auf Gruppe
ist dies und wählen Sie einfach alles. Kontrolle G. Und wir werden es nennen, was in Sanftmut zu tun ist, oder Sie können es Aktivitäten nennen oder was auch immer Sie wollen. Lassen Sie uns das tun, weil es schön und einfach mit kurzen Namen sein wird, genauso wie mit all unseren anderen Elementen. Wie Sie sehen können, haben wir das erstellt und jetzt kommen wir zu dem wichtigsten Teil vor, das ist unser Buchungsformular, und das ist, was wir im nächsten Video entwerfen werden, also werde ich Sie dort sehen.
24. Wireframe 8: Jetzt ist es an der Zeit, unser Buchungsformular zu entwerfen. Und wenn wir etwas näher
heranzoomen , können
Sie das Buch sehen. Ihr Aufenthalt bei uns ist genau hier an der Spitze. Wir haben einen Text auf der linken Seite mit einem Call to Action Button. Aber wir werden tatsächlich diesen Aufruf zur Aktionstaste genau hier nach rechts verschieben, weil es nur sinnvoller ist, dass es unterhalb der Form ist. Und das wird unser Buchungsformular sein. Also lassen Sie es uns entwerfen. Ich werde Zehe wählen Sie diesen Hintergrund und Zeh. Geben Sie verschiedene bestimmte Spieler ein. Sie können die Kontrolle halten und klicken, und es wird direkt auf die Zehe klicken, anstatt stumpf schnelle Zehe, öffnen Sie den Ordner und dann doppelt schnell, um die andere Ebene auszuwählen. Also werde ich es den ganzen Weg nach unten so verschieben, werde es auswählen, Shift
halten, um es zu verschieben, und dann wählen Sie es einfach von hier aus und verschieben Sie es 100. Also, wie Sie sehen können, haben
wir genau den gleichen Abstand für alle von ihnen. Nun, was wir tun wollen, ist nicht schnell hier, und wir wollen es einfach nennen Buchung Bijie so, weil wir für verschiedene
Hintergründe wissen wollen , was sie auf der Seite sind. Öffnen Sie also die Aktivitäten,
wählen Sie diese aus, um sie tief zu kontrollieren, bewegen Sie sie und positionieren Sie sie dann einfach nach unten. Also wählen Sie diese beiden und positionieren Sie sie wie so bewegt unter der katholischen Zehe. Fügen Sie die große zurück, denn wir werden es für jetzt brauchen. Linke Linie. Diese linke Linie dies, weil Texas wird auf der linken Seite sein. Und lassen Sie uns alle positionieren, um diese auch zu hören, wann wir das ein wenig nach unten bewegen und hier wird ein Buch schreiben Ihren Zustand bei uns. Und wenn es ein Zustand ist, werde
ich es etwas nach unten verschieben, weil wir das genau das gleiche Layout behalten wollen, wie wir es in allen getan haben. So 51 leer und dann 6 40 Form und nicht mehr Zeit verlieren einfach gehen, um den Text
bereits erstellt kopieren . Und wie Sie sehen können, ist
es Werbung, also sagt es ihnen genau, was der Kunde wollte. Füllen Sie das Formular aus, um Ihren Aufenthalt bei uns zu buchen, und Sie können bis zu 30% Rabatt auf den Preis sparen. Wenn Sie direkt über unsere Website buchen, anstatt Online-Buchungsdienste, denn das ist der wichtigste Punkt, das ist, was sie für uns zu schaffen, ist für sie Schleppen, vermeiden Sie Buchungsdienste und buchen Sie direkt über diese Website. Also lasst uns es 40. So, bis sie sich hier treffen. 1234 nach unten. Und wir wollen auch zwei weitere Kopien erstellen. Also wählen Sie diese hält Shift und dann bewegen Sie es einfach nach unten und rechts hier, gehen Sie zu tippen Rufen Sie uns an und wir gehen Zehe basierend in der Zahl und nur Sekunde so mehr mit 20. Wenn Sie sich erinnern, haben
wir genau das Gleiche mit dem vorherigen Beispiel gemacht. Also werden wir einfach auf der Grundlage der Telefonnummer hier wird blau sein weil es anklickbar sein wird. Wenn sie direkt von hier aus anrufen wollen, oder wenn sie ihr Mobiltelefon Dinging benutzen. Klicken Sie einfach hier, um direkt zu verursachen. Also werden wir Schlüssel duplizieren, um sie auch nach unten 40 zu verschieben, so dass dies E-Mails
wie so sein wird, und lasst uns diesen Zeh rechts positionieren. Also, bis sie 12 treffen und ich gehe voran und kopiere und füge ihre E-Mail-Adresse ein. Dies ist nicht direkt ihre E-Mail. Sie werden es ändern, wenn sie diese Website erstellen und machen es zum Leben, so dass sie eine dedizierte E-Mail für diese Website erstellen können. Also lasst uns schnell diesen Text so bestellen, dass dieser hier sein wird. Dies hier und Sie können alles gruppieren und Control G drücken und es Text so nennen. Und was wir jetzt tun wollen, ist es so in der Mitte zu positionieren, und jetzt wollen wir ein Buchungsformular erstellen, das genau hier nach rechts geht. Also für das Buchungsformular, lassen Sie uns schnell diese Textsteuerung D verwenden, weil wir es an ein paar Orten und
einfach mit Ihnen hier brauchen werden. Erste Dinge zuerst. Lassen Sie uns den Raumtyp erstellen, denn das ist das erste, was wir erstellen müssen. Stellen Sie sicher, dass es um sechs Uhr ist. Also 123456 Stellen Sie also sicher, dass es diese linke Kante von dieser Säule schnappt. Positionieren Sie es hier, kontrollieren Sie de, machen Sie ein Duplikat davon und bewegen Sie es dann einfach nach unten. Und was wir in seinem klassischen schreiben wollen, und was wir auch brauchen, ist ein Feld, wo dieser Text tatsächlich gehen wird. Also lassen Sie uns ein Rechteck erstellen oder Sie können diese Schaltfläche verwenden. Lass uns reinspringen und ihn finden. Hier ist es. Also buchen Sie jetzt Button. Sie können es von dieser Zeugenaussage auch kopieren, um es zu duplizieren und dann einfach den
ganzen Weg nach unten zu bewegen , weil es, ah, viel einfacher, es so zu tun. So positionieren Sie es einfach von hier an Ort und Stelle. Also 1234 dann brauchen wir eigentlich nicht diesen klassischen Raumtext, und das wird unsere Zimmerkategorie sein oder einfach ein Zimmer und in Sicht nennen. Wir werden diese Farbe in diese Farbe ändern, also ist es im Grunde die gleiche Farbe aus diesem Text. Vergewissern Sie sich, dass es die Linie verlassen hat. Positionieren Sie es Zehe linke Kante 1234 und stellen Sie sicher, dass es die Grenze hat. Und für die Feldfarbe, werden
wir weiß verwenden, aber nicht für den Text, sondern für die strandy so weiß wie so, und was wir auch wollen, ist es Eingabe drücken umzubenennen,
geben Sie ein, weil das wird unser Input sein und das werden wir nicht verwenden. Also ich weiß nicht, warum es gewählt wird und das hier. Also lasst es uns schnell dazu ändern. Es hat also genau den gleichen Stil wie wir wollen. So 1234 und wir wollen einen Rahmen für diese Eingabe erstellen. Und eine letzte Sache dehnt das bis in diesen Rand bis hierher, bis es sich trifft. Weil wir es sechs für diesen großen behalten wollen,
und wir werden zwei weitere darunter und eine große unterhalb der Schulden schaffen. So groß wird sechs kleinere werden drei sein. Und schließlich wird
Big One auch sechs sein. Also genau hier werden wir einen Pfeil brauchen, denn das ist der Pfeil, den sie
verwenden werden, um zu zeigen und unten und die Zehe zu öffnen und verschiedene Optionen zu erkunden. Also noch einmal werde
ich auf den Pfeil verwenden, den ich bereits erstellt habe. Positionieren Sie es hier wie so 1234 Und wenn Sie wissen wollen, wie man ein schmales schafft, werde
ich Ihnen das auch zeigen. Ich ging zum Beispiel direkt nach hier . Sie können die mentale verwenden und Sie können klicken, halten Sie Shift, stellen Sie sicher, dass es bei 45 Grad und ganze Verschiebung wieder, wie so Hit Escape. Und für den Rahmen können
Sie zum Beispiel die Größe 25 erhöhen. Sie können hier klicken, und Sie können die gesamte Form drehen, so dass Sie sie irgendwo hier auswählen können. Und Sie können einfach ganze Verschiebung und gedreht. Und da gehst du. Das ist dein Pfeil. Oder wenn Sie nicht möchten, dass es so ist, warum können Sie einfach hier klicken und es hier absenken? Vielleicht können Sie
auch hier die Größe reduzieren , und Sie können auch mit diesen Werten hier herumspielen. So können Sie eine schmale erstellen. Aber ich wollte den Prozess ein wenig beschleunigen und die bereits erstellten einbeziehen. Also lasst uns lokalisieren. Es ist genau hier, und Zimmertyp ging zu Fuß. Lassen Sie es so rein
und stellen Sie sicher, dass es bei 41 ist. Also, wie Sie sehen können, ist
es nicht so. 1234 Jetzt ist es bei 40. Also bringen Sie es zurück Control D und wir gehen Fuß. Bewegen Sie das hier nach unten. So 1234 mehr mit knapp darunter wird dies überprüfen wie so. Und ich werde hier doppelklicken. Geben Sie ein,
checken Sie so ein und wir brauchen keinen Pfeil nach unten. Wir gingen, um es zu löschen und Eingabe wird auf drei sein. So wie das hier. Also, wie gesagt, wird
das sechs Spalten breit sein. Dies wird drei Spalten breit und schließlich genau hier, wo es Buch steht. Jetzt werden wir Schmerzen Monate,
Datum und schließlich Jahr so seufzen und was wir brauchen, ist ein Check-out als auch. Also kontrolliere D und du kannst es so verschieben, bis es mit dem Ende unserer Spalten übereinstimmt. So
positionieren Sie sich nach unten und Sie können eingeben. Schauen Sie sich hier an und Sie können den Namen des Ordners ändern, der ebenfalls ausgecheckt werden soll. Und schließlich wird
diese Information genau die gleichen sein. Und für diesen letzten, steuern Sie die und Sie können es wie bei all diesen anderen verschieben. Positionieren Sie dies nach unten und dies wird Gäste sein und ändern Sie dies in zwei Gäste und ändern dies zu schreiben Gäste wie so, weil wir brauchen, dass sie wählen, wie viele Gäste sie
mit ihnen wollen . Also, zum Beispiel, jemand kommt allein. Jemand kommt zu fünf Leuten. Jemand kommt mit nur ihrem Partner,
Leute, die Kinder haben und so weiter und so weiter. Daher ist es wirklich wichtig, dass sie das auswählen, weil einige Zimmerkategorien nicht so viele Personen und einige Zimmer beherbergen können. So, zum Beispiel, Weise,
Menschen, die
in diesem Hotel arbeiten, können in Kontakt mit Ihnen mit den Informationen, die Sie gehen sie
zu geben, wenn Sie Ihr Buch. Also, wenn Sie jetzt quikbook und es wird Sie auf die spezifische Seite, wo Sie gehen um zu zahlen, wo Sie gehen, um Ihre persönlichen Daten eingeben. Aber das ist nur für sie zu wissen, wie viele Leute mit Ihnen kommen, also brauchen sie nicht, wie viele Betten Sie benötigen könnten, wie viele Bäder und so weiter so weiter, und vor allem, wenn Sie mit mehr Autos kommen, so dass sie wissen, wie viele Parkplätze können sie Sie für Sie und Ihre Besucher verlassen. Also eine gewalttätige Sache, die wir brauchen, ist ein Knopf hier, also wieder, wir werden dasselbe tun. Springen Sie in das Zeugnis, wählen Sie den Boden, kontrollierte die Bewegung gerade außerhalb des Ordners wie so und schließlich nur bewegt diese Taste
den ganzen Weg nach unten Fuß hier und positionieren Sie es nur ein kleiner Gast. Und was wir wollen, ist, ihm auch 40 zu geben, so zu sagen, wie für alle anderen. Aber verschieben Sie es hier Und was ich jetzt tun möchte, ist, alle so kontrollierte G genannt
dieses eine Formular so zu gruppieren und wählen Sie Buchung BG mit dem Treffer in der Mitte, so dass Sie
es in der Mitte so positionieren können und schließlich gruppieren Sie sie zusammen und rufen Sie dieses eine Buchungsformular . Drücken Sie, geben Sie oder zurück. Und das war's. Wenn ich unsere Spalten entferne, können
Sie sehen, wie das aussieht. Also ist es wirklich einfach, wirklich einfach. Das sagt, was es sagen soll, und sie können einfach das Hotel anrufen. Sie können dem Hotel eine E-Mail senden, wenn sie Fragen an dieser Stelle haben, sie können einfach ihre grundlegenden Informationen Hit Book jetzt eingeben, und es wird sie auf die Buchungsseite, die dann eingeben wird. Nehmen Sie sie persönliche Informationen, Kreditkarteninformationen und Solo. Das ist also der nächste Teil, wenn diese Seite mit den Kunden fertig ist. Aber wir entwerfen diese Seite auf Lee, weil das die wichtigste Seite für sie denn später nach unten, als wir andere Seiten entworfen haben, gibt es im Grunde genau den gleichen Stil, viele aus den gleichen Elementen, weil wir Fuß gehen, erstellen Sie ein Designsystem, das sie später verwenden werden, wenn sie anfangen, andere
Seiten zu entwerfen . Und wir werden später mit dem Entwickler in Kontakt bleiben. Also, wenn sie einige Änderungen brauchen, können
wir leicht wieder in unsere Eier das Projekt springen und diese Änderungen vornehmen und ihn leicht an
sie schicken . Wenn Verstöße getroffen wird Kontrolle s. Und im nächsten Video, werden
wir den Draht-Framing-Prozess beenden. Wir werden Abonnieren Newsletter Formular und einen Fuß direkt hier unten erstellen. Also sehe ich dich dort
25. Wireframe erstellen: Nein. Lassen Sie uns unsere durch Framing Prozess beenden und fügen Sie einen Newsletter Anmeldeformular sowie die Fußzeile. Tut mir leid, dass ich hier gesprungen bin Zoomen ein bisschen näher. Sie können sehen, dass wir, äh, hineinziehen. Melden Sie sich für unseren Newsletter Wo das Formular und die Fußzeile Direkt unten, Mann. Wie sie mehrmals in diesem Kurs gesagt haben, alle relevanten Informationen, die nicht entscheidend sind, sollten
alle relevanten Informationen, die nicht entscheidend sind,in der gehen für. Also doppelklicken Sie auf Ihr Kunstbrett erweitert den ganzen Weg nach unten. Was wir also einschließen wollen, ist ein Newsletter. Melden Sie sich hier an, damit ich diese Monate auswählen kann. So ausgewählte Kontrolle tief. Also im Grunde das Gleiche, wie wir es für den Rest von Diskurs getan haben. Einfach Shift genannt. Bewegen Sie es hier und positionieren Sie es dann 100 gleich wie bei allen anderen. Wenn es nicht auf 123456789 10 klicken, um sie 100 Filme den ganzen Weg nach unten zu machen. Und was wir wollen, dass dies zu schreiben ISS melden Sie sich für Newsletter und unter Schulden schnell. Kopieren Sie, was auch immer es so geschrieben hat. So zu hören, so melden Sie sich an und erhalten Neuigkeiten und Updates über unsere Rabatte und Angebote. Und was wir wollen, ist, diese beiden auszuwählen, so dass Sie hineinspringen können, das Formular
treffen, und Sie werden Position, um sich genau hier zu bilden. Da der Text auf ist, ist
die Lebensform auf der rechten Seite, und ich werde einfach auswählen, zum Beispiel, Gäste und schauen, jetzt Taste gesteuert D Ich werde sie zu bewegen schließen all dies zu hören. Und lassen Sie uns diese bücken einfach nach unten bewegen. Und wenn es nicht auftaucht, verstecke
einfach diesen und bewegte ihn so. Und lasst uns das schnell ändern. Das wird also in E-Mail schreiben. Sie können diese Gäste ausblenden und den Pfeil löschen. Ich klicke hier. Es habe ich Bean E-Mail wie so, Oder Sie können Ihre E-Mail noch besser eingeben. So wie dieser Close. Dieses Buch sollte jetzt genau an der gleichen Stelle gehen. Also, was Sie hier tun können, ist der Klick auf die Kunsttafeln, die Ihr Layout zeigen. Sie können den Knopf hier positionieren, und Sie können ihn vielleicht so bewegen, damit Sie diese beiden haben und buchen können. Jetzt gehen wir zu ändern, um so zu abonnieren. Und der Text vom Kurs wird so in abonnieren schreiben, und eine letzte Sache, die ich ändern möchte, ist die Farbe von diesem Knopf. Also, wenn ich in diese Farben springe, können wir
vielleicht diese wählen und sofort unser Vermögen hinzufügen und vielleicht
nach unten gehen . Also lassen Sie uns in Schlepptau unsere Design- und Bestelltage springen. Man ist ein bisschen besser, so dass man sie tasten und einfach hier klicken kann, um sie in
der Mitte zu positionieren , sie zu
gruppieren und einfach die Zehe hier zu bewegen, bis man für Pixel sehen kann. Also genau das gleiche wie die Abstände, so dass Sie Shift halten können, wählen Sie alles Kontrolle G, schöne Kriterien, geben Sie ein, abonnieren Sie wie so. Und schließlich, lasst uns anfangen, unsere Fußzeile direkt darunter zu erstellen. für das Foto Lassen Sie unsfür das Fotoeinen Hintergrund erstellen, und wir werden ein neues Rechteck erstellen, das bis zu den Rändern verlängert wird, bis es
links und rechts trifft . Und für die Höhe, Lichter verwendet 6 80 und für die Farbe, lassen Sie uns diese Farbe gleiche Flüssigkeit es mit dem Rest aus unserem Design und machen Sie sich keine Sorgen darüber. Wir werden es später in der Entwurfsphase ändern, und weil wir wissen, dass dies unsere abgeschnittene Kante ist, also gibt es keinen Inhalt mehr darunter. Sie verhalten sich wie auf Ihrem Brett, Sie können es nach oben bewegen und Sie könnten den ganzen Weg bis nah gelegenen Punkt zoomen Hier ist es und einfach bewegen, bis es mit der unteren Kante von unserem Fuß oder Farbe wie so trifft. Und wir werden diese Fußzeile Bijie nennen, weil es das ist, was es sein wird. Und das erste, was wir brauchen, ist ein Logo. Sie können es kopieren. So Kontrolle. Sehen Sie, Zoom in den ganzen Weg, um Kontrolle zu hören. Wir und Sie können es positionieren, um genau hier zu sein. Positionieren Sie das Logo knapp über die Fußzeile BG. Und jetzt geben wir ein paar Informationen ein. Also werden wir drei Spalten aus dem Text haben, weil, wie Sie sehen können, wir haben 12 verschiedene Spalten. Also, weil wir diese linke Spalte mit einigen Social-Media-Symbolen sowie das
Telefon hier haben , werden wir zweite Farbe mit Zimmern haben, die eins mit Einrichtungen beginnen und schließlich 4. 1 Witz über und einige grundlegende über Funktionen und schließlich darunter, wir werden auch E-Mail-Adresse haben. Also lassen Sie uns zuerst das Telefon und die E-Mail-Adresse kopieren. So steuern, Siehe Springen und engere Kontrolle. Wir positionieren es hier, bewegen es den ganzen Weg nach unten, nur ein wenig länger und du gehst den Fuß. Wählen Sie einfach E-Mail uns Texte der Kontrolle. Sehen Sie, wann wir es positionieren, nur um Kontrolle zu hören. Wir sind also 1234 und wir gehen genau hier rein. Wenn Sie Fragen haben, können
Sie uns das per E-Mail senden und dann werden sie trennen. Also möchte ich mich in diesem bewegen, um vielleicht 20 Pixel mehr zu hören. Diese 12 hier. Schau einfach nach. Wenn du etwas buchstabierst, ist
alles in Ordnung. 1234 Bisher wählt es uns Kontrolle G, um sie zu
gruppieren, positionieren Sie sie in der Mitte, positionieren Sie sie ganz nach unten, klicken Sie mit der rechten Maustaste auf Gruppe. Und das ist im Grunde der untere Text für unsere Website. Jetzt habe ich einige Social-Media-Icons erstellt. Ich werde sie einfach hier aufbauen, und wir spielen mit den Positionen ein bisschen später herum. Aber jetzt, zuerst, lassen Sie uns diese verschiedenen Textspalten erstellen. Also ist es erste Kopie Bezirke Kontrolle de und Position es genau hier ging, um in die Messe zu springen. Es ist gebunden. Klicken Sie hier, weil dies ihre Zimmer so schreiben wird. Und wie gesagt, denn jetzt werden wir drei Textspalten und diese linke Spalte hier haben. Also wird jeder von ihnen den Platz von drei nehmen. Also 123 für alle linken Informationen 123 für die Zimmer. Steuerung auf D so auf drei. Und dieser nächste wird in Einrichtungen schreiben. Und schließlich wird
dieser letzte darüber schreiben. Und 123 wird Zehe hier liegen und jetzt können Sie alle bewegen, bis sie sich
mit dem oberen Rand aus dem Logo treffen . Mein so und schließlich, was wir tun können, ist, diese eine kontrollierte tiefe Position an der Stelle genau hier auszuwählen, und wir werden sicherstellen, dass es links ist. Das ist es. Positionieren Sie es bis hier, und wir werden hier verschiedene Optionen haben. Also geh. 1234 Kontrolle D. Stellen Sie sicher, dass es die Kontrolle D. Es ist das gleiche. Und wir werden hier vier Optionen haben wie so, also wird das Betten sein, damit sie sich über die Betten informieren können,
aber oben, weil es bekannt ist. Manchmal Wasser ist nicht so gut in Griechenland Mini bar, weil vielleicht wollen sie wissen, was
in der Minibar. Und was sind die Preise und behindertengerechten Zugang für Menschen, die so sind? Und dann, was wir tun können, ist, diesen Text ein bisschen besser zu bestellen. Also werde ich das einfach hier positionieren. Dann werde ich in Betten direkt unter Schulden Bad oben schreiben, knapp unter Betten, Minibar knapp unter Badewanne und schließlich behindertengerecht Zugang knapp unter vielen mehr. Und ich werde sie einfach alle gruppieren, um G zu kontrollieren. Und wir können das ändern und einfach diese beiden löschen. Nennen Sie diese Räume Kontrolle de und dann bewegen Sie diese rechts hier Kontrolle de und bewegen Sie die rechte Zehe hier und dann positionieren Sie diese etwas besser. Also das schlimmer. Eins ist Zimmer. Dies ist Einrichtungen, und diese letzte ist über Also lasst uns all dies ändern, so Einrichtungen und Sie können
herumspielen . Sie können
natürlich tun, was Sie wollen. Aber ich fand das einfacher, weil es den gleichen Abstand behält. Wir müssen sie nicht noch einmal alle duplizieren. Also einfach kopierbasiert funktioniert es gut. Also für diesen hier werden
wir in Restaurants wie so unten schreiben, dass wir im
Schwimmbad schreiben werden, wie so direkt unter dem Tod Fitnessraum, weil sie vielleicht ins Fitnessstudio gehen und schließlich parken wollen wo sie den Parkplatz ein bisschen besser kennenlernen können. Also, wenn es gesichert ist, wenn es geschlossen Parkplatz, offene Parkplätze und Dinge wie das. Schließlich wollen
wir über uns schreiben, also wollen sie vielleicht etwas über dieses Hotel,
die Geschichte und so weiter Rückerstattungspolitik wissen , denn es ist wirklich ein wichtiger Teil, damit die Leute wissen können, ob sie eine Rückerstattung bekommen können oder nicht Todespolitik, weil Sie einen Safe in Ihrem Zimmer haben. Aber was passiert, wenn sie etwas aus dem Safe stehlen und so weiter, damit sie
sich inspirieren und dort mehr darüber erfahren können ? Und schließlich, Allgemeine Geschäftsbedingungen, weil es wirklich wichtig ist und auch eine gesetzlich zwingende Zehe enthalten Bedingungen hier als unten. Nun, endlich, lasst uns diese positionieren, also wird das hier unten aufstellen, also entfernen Sie diese Symbole vielleicht hier. Stellen Sie sicher, dass dies hier positioniert ist und die Symbole wieder nummeriert werden, und stellen Sie sicher, dass sie sich in der Mitte befinden. , Wie Sie hier auf der linken Seite sehen können,können Sie den Abstand zwischen der unteren und der oberen
Kante sehen , und Sie können diesen Raum vergrößern oder verringern, wie Sie wollen. Aber ich werde es einfach irgendwo hier überlassen, wie Sie es sehen können. 97 von oben. Und der untere Valentin ich tun möchte, ist, sie zu zentrieren, so dass Sie alles außer
für diesen Text auswählen können , dass die Böden treffen Kontrolle G erstellen Sie ein weiteres Irak-Kribbeln von hier auf den Text hier, wählen Sie. Und beide trafen gleich hier. Und Sie können einfach dieses Rechteck auf Gruppe alles löschen, was Sie vorher wachsen, und dann einfach alles wieder gruppieren und es für sie so nennen. Und da gehst du. Wir haben unsere Fußzeile erstellt und wenn ich hier doppelklicke und das Raster entfernt habe, damit du es
nicht mehr sehen kannst, kannst
du sehen, wie das aussieht. Und wenn ich auf ein schnelles Kriterium zurücksprang, haben wir alles geschaffen, Toby. Kohärent. Alles hat genau die gleichen Abstände zwischen allem, weil Wir alles
auf einem Gitter entworfen haben . Alles ist gleichmäßig verteilt. Alle Elemente haben also gleichmäßige Zwischenräume untereinander. Und wie Sie hier sehen können, verwenden
wir genau die gleichen Textstile in diesem gesamten Design. Alles, was Sie irgendwie kohärent fließt zusammen. Und, am wichtigsten, das Wichtigste von allen. Er ist vor der Welt im Designprozess und im Erstellungsprozess genau nach der kurzen Abkürzung, was der Kunde von uns will. Und da gehst du. Das ist deine Frau, die die Kontrolle hat, um dieses Projekt zu retten. Und im nächsten Teil des Kurses werden
wir ins Design springen. Wir werden anfangen, einige Bilder zu ändern. Verschiedene Farben wurden Fuß umfasst einige verschiedene Symbole, und Sie haben gelernt, um mit einigen Hintergrundschatten zu spielen, so dass ich Sie dort sehen.
26. Bildstruktur: in diesem Teil des Kurses beginnen
wir mit der Gestaltung unseres Drahtrahmens, daher werden wir verschiedene Bilder, verschiedeneSymbole,
verschiedeneSchattierungen und Schlagschatten einschließen Symbole,
verschiedene . Aber bevor wir all das tun, möchte
ich nur schnell durch verschiedene Bilder laufen, die enthalten sind. So werden Sie diese Bilder Ordner erhalten und Sie können es nach oben und innen öffnen. Sie können diese verschiedenen Bilder sehen, die Fuß gingen alle von ihnen sind
richtig benannt , so dass Sie wissen, wohin jedes Bild geht. Und während wir uns auf dem Kurs bewegen, werde
ich sie alle an verschiedenen Orten einbeziehen, damit Sie üben können, diese Bilder zu verwenden . Alle diese Bilder sind von unspool, Esh und Picks von A. Also das bedeutet, dass sie frei sind, sowohl persönlich als auch kommerziell zu verwenden. Und ich werde auch diese Links in der Region einschließen, eine PDF-Datei am Ende dieses Kurses, so dass Sie mit meinem einfachen Klick auf sie zugreifen können, und Sie können alle von ihnen in Ihrem Projekt herunterladen und verwenden. Im nächsten Video werden
wir anfangen, diese Bilder zu entwerfen und einzufügen, also sehe ich dich dort
27. Design erstellen: Beginnen wir jetzt mit dem Design. Und wenn ich etwas näher heranzoomen, klicke
ich direkt hier auf den Flughafen. Name Hit Control de, um den gesamten Port zu duplizieren. Und das hier war Drahtgestell. Und dieser hier wird entworfen werden, genau in der Mitte. Und das erste, was wir tun werden, ist, den Namen von diesem Hintergrund für das
Logo zu ändern . Also werde ich hier direkt springen und hier klicken, damit es sich auf der Seite ein
bisschen besser abhebt . Es entspricht etwas besser mit unseren Knöpfen. Und jetzt werden wir die Fahne hier einbinden. Also werde ich ins Schlepptau der Schicht springen, verbringen alle geschlossen den lokalen Ordner, suchen Sie die Flagge. Hier ist es, Control V, und ich werde die Flagge schlagen. Ich habe bereits gefunden, dass ich es den ganzen Weg runterwerfen werde, kurz vor dem Knopf hier. Löschen Sie den Flag-Platzhalter, und ich werde Ihnen zeigen, wie ich ihn gefunden habe. So können Sie auf Ihre Steckspinale klicken und Sie müssen diesen Stecker in
Sie genannt installieren . Ich Logo. Also noch einmal, Sie können hier rechts klicken Eingabe Sie weißen Logos Test zu sein, um sie So nur ein Wort zu bekommen, und Sie können auf Installieren klicken. Und was dies tun kann, ist, Sie können darauf klicken und Sie können Länderflaggen generieren. Was Sie also tun können, ist, verschiedene Rechtecke wie diese zu erstellen. Zum Beispiel können
Sie Wiederholungsraster drücken und Sie müssen 194 erstellen. So, zum Beispiel, können
Sie erstellen Ich weiß nicht, 10 so. 246 8 10 wie so Und Sie können 20 nach unten erstellen. Also 2345 6789 10 Und mal sehen, ob es das ist. So 10 wie diese. 123456789 10 11 12 13 14 15 16 17 18 1920. Und man kann etwas näher heranzoomen, um sich so zu schließen. Und was Sie tun können, ist zurück auf die Ebene zu springen, verbringen alle Treffer auf Gruppe Great, und was Sie tun müssen, ist 6246 so zu löschen. Du bist also mit 194 übrig. Sie können alle von ihnen auswählen, entfernt die Grenze und warum 194 es ist jenseits von mir, aber das ist, was sie wollen, dass Sie tun So Jump Schauspieler Plug in Spinal Hit Die warum Logos traf Länderflaggen und was tun wird, ist es wird all diese generieren Länderflaggen, und was gut an ihnen ist, wie Sie sehen können, sind
sie ziemlich hohe Qualitäten und nicht wirklich etwas Großes. Aber für das, was wir tun müssen, ist, dass Sie nur einfache,
nette kleine Flagge sehen können . Sie können von hier aus verschiedene Flags generieren, also lassen Sie mich diese schnell löschen. So habe ich es gefunden. Wieder einmal, Sie ich Logos fand es in Ihrem Stecker in speziellen, und Sie können das gleiche Ergebnis haben. Aber Sie können natürlich diese Datei
natürlich
herunterladen und verwenden, wie ich Ihnen hier gezeigt habe. Also wird alles so sein, wie du es gesehen hast. Also lassen Sie uns jetzt unser Bild einschließen. Also werde ich in den Abschlepp-Ordner springen. Also wählen Sie Held BG genau hier, denn das ist, wo wir es platzieren Locator Heldenbild. Hier ist es, und wenn Sie es einfach ziehen und ablegen, werde
ich den Klick drücken und die Größe ein wenig erhöhen und vielleicht
irgendwo hier positionieren , aber ich möchte Anzeige-Taste Toby genau hier. Also, was ich tun kann, ist, das nur ein bisschen nach unten zu bewegen. Also bewegen Sie sich ein bisschen mehr so. Und was ich jetzt tun möchte, ist, das weiß zu machen, damit ich hier klicken und es weiß machen kann. Und ich möchte das gleiche für diesen Play-Button tun. So, wie das. Und das ist unser Heldenbild fertig. So, wie Sie sehen können, sieht
es sauber aus. Sieht nett aus. Es zeigt das Hotel. Es zeigt der Person, die das Hotel genießt und alles, was es zu bieten hat. Also im Grunde, das ist es für diesen Abschnitt. Im nächsten Video werden
wir weitermachen und einige dieser anderen Abschnitte entwerfen, also werde ich es sehen.
28. Design erstellen: jetzt springt und an ihr einige dieser anderen Abschnitte. Also lasst uns über uns hineinziehen. Ich werde diese Kreise auswählen, und ich habe bereits eine Farbe, die ich ausgewählt habe. Ich werde es direkt hier öffnen und die Grenze von all diesen Kreisen entfernen und schließlich hier
klicken, um es in unsere Anrufersuche direkt hier aufzunehmen, so dass wir es
mit einem Klick später ändern können , wenn wir wollen. Also für seine 1. 1 möchte ich ein Symbol einschließen, also werde ich es kopieren und einfügen zehe hier. Ich werde es so in der Mitte von diesem Kreis positionieren, und ich gehe die Zehe. Stellen Sie sicher, dass es mit der unteren Kante dieses Kreises ausgerichtet ist,
also sieht es irgendwie wie ein Sohn aus , und es bringt nur etwas mehr Interesse, als nur einige normale Symbole zu verwenden, die Sie im Internet
gefunden haben und sie nur in der leerer Raum. Also werden wir das Gleiche mit diesem machen. Das ist also für das Essen. Platzieren Sie es wie, also stellen Sie sicher, dass es in der Mitte ist, und wie Sie sehen können, bringt
es bereits viel mehr Aufmerksamkeit auf diesen Kreis, so dass die Leute es nicht so leicht überspringen. Und schließlich, lassen Sie uns diese 3. 1 Also wird es für den Strand sein. Also noch einmal, stellen Sie sicher, dass es hier und in der Mitte ist, und dieser Abschnitt ist im Grunde oder und wie Sie sehen können, bringt
es viel mehr visuelles Interesse als es sonst würde. So können Sie leicht die Aufmerksamkeit auf einige dieser anderen,
äh, äh, Schichten außerhalb Ihrer Aufmerksamkeit lenken. Als Nächstes drauf. Wir werden die Farbe von diesem Testimonial Hintergrund ändern, also habe ich bereits die Farbe ausgewählt. Ich werde es aufstellen. Und wie Sie sehen können, ist
es Nacht eine Art grünliche Farbe. Es funktioniert wirklich gut. Wir gehen auf die Zehe. Fügen Sie es hier hinzu. Es ist also d drei e one e e eins, wenn du neugierig bist. Aber noch einmal können
Sie diese Datei herunterladen und verwenden. Gleiche, wie ich es hier benutze. Also werden wir Zeugnisbild innen einschließen, also ziehen Sie es hier doppelt schnell, und Sie werden Shift halten und dieses Bild ein wenig höher positionieren. So wie so. Das ist also die Person, die dieses Zitat gesagt hat, und wie Sie sehen können, es
ist wirklich attraktiv, ist wirklich auffällig, und es steht wirklich auf der Seite. Deshalb verwenden wir es in diesem Beispiel. Also im nächsten Video, werden
wir in den Raum Bereich springen und wir werden einige Änderungen an
Zwei-Zimmer vornehmen . Und wir werden einige verschiedene Farben hier einschließen, also sehe ich dich dort.
29. Design erstellen: jetzt ist es enthalten Bilder für unser Zimmer. Also springen Sie in den Bereich Räume, öffnen Sie diese Ordner. diese Weise ist es einfacher. Suchen Sie das Classic-Zimmer, damit es dieses ist. Einfach ziehen und positionieren Sie ihn Zehenplatz. Sehen Sie sich das Zimmer Nummer zwei an, das ist das Familienzimmer, das sich hier befindet, und ziehen Sie es an Ort und Stelle. Und noch eine Sache, natürlich. Sie führen wie eine Erhöhung der Größe dieser Bilder, wenn Sie möchten. Also vielleicht positionieren Sie es so, und vielleicht können wir das gleiche für diese 1. 1 So können
Sie noch einmal steuern und direkt in Ihre Auswahl springen, so dass Sie
den Ordner nicht öffnen müssen und dann dasselbe für die paar Male tun wie dies, so dass Sie die Größe davon erhöhen können, vielleicht stützen die Betten mehr in einem Zentrum wie diesem. Ich denke, das sieht gut aus, aber vielleicht können wir sie sogar so positionieren, damit wir das ganze Bett sehen können. Und schließlich können
Sie Tage schließen, Eins und alle. Kitaro Nummer drei. Nur diesen hier. Suchen Sie das Bild in den Ordnern von Grant Deluxe Room Dragon fallen im Inneren. Wie Sie sehen können, ist
es wirklich ziemlich verkleinert und Sie können eine Verschiebung alte und linke Klickspitze halten. Erhöhen Sie es gleichmäßig in alle Richtungen. Und ich mag dieses Licht nicht. Vielleicht können wir uns mit etwas mehr nach oben bewegen, so. Und ich mag, wie das aussieht. Also, was wir jetzt tun können, ist einige dieser anderen Farben zu ändern. Also lassen Sie uns den Text wählen und die dunkelste Farbe auswählen, weil wir nur
ein bisschen so hervorstechen wollten . Und jetzt müssen wir hier ein gewisses Interesse wecken. Wir werden also sowohl grüne als auch rote Farben erstellen. Eine grüne Farbe wird die Farbe für diejenigen sein, die sie wählen können, und die rote Farbe wird für diejenige sein, die nicht im Angebot für das
Zimmer enthalten sind . Beginnen wir also mit einer Schicht, die verbraucht wird, und wir werden in die Zukunft springen, sie
öffnen, und für diese Nummer eins kann
ich einfach eine Farbe wählen. Also sechs b sein vier für eins wird unsere grüne Farbe sein. Ich werde es einfach hier und für diesen Strandblick hinzufügen, wo es nein sagt. Wir können eine rote Farbe hinzufügen, die e 13333 so sein wird und wir gehen Fuß. Fügen Sie es hier so hinzu. Und jetzt können wir einfach voran gehen und alle auswählen. Also nein klicken Sie hier und dann
Ja, ja und ja, klicken Sie rechts hier, springen Sie in schließen Tagen Ordner und tun Sie das gleiche für die anderen beiden. Also, was wir hier haben, sind Betten. Wir müssen, aber wir können es so lassen, wenn du willst. Statt dieser grünen Farbe können
wir es so lassen, wie es so war. Und dann all diese anderen Funktionen Grün und Rot zu sein, ist nur ein bisschen mehr Sinn auf
diese Weise. Sei also wahr. Du weißt, es wird gelesen und für die Terrassen wird
WiFi und all diese anderen Dinge grün sein. Und schließlich werden
alle diese so einbezogen werden. So und Terroristen vom Kurs. Ja, weil es das teuerste Zimmer ist, so werde ich in und schließen alle diese anderen Ordner, so dass sie nicht chaotisch aussehen, und die Zimmer sind im Grunde abgeschlossen. Und später, wenn du zum Schutz kommst, werden wir hier einige Hintergrundschatten einschließen. Aber jetzt möchte ich das einfach schnell beheben, damit Terroristen ja sein sollten, scheinen wir gerade im Design-Beispiel gesehen zu haben, und das ist es im Grunde für die Räume. Also lassen Sie uns hineinspringen und auf verschiedene Bilder direkt hier einschließen. Also für den privaten Pool, können
Sie es genau hier finden. Es ist also dieser eine private Pool, und Sie können natürlich
Erwachsenen klicken und viel näher zoomen, wenn Sie auf dieses Bild wollen. Also vielleicht so etwas, nur um ein bisschen mehr visuelles Interesse als sonst zu schaffen, suchen Sie das Gartenbild in unserem Ordner. Hier ist es Drag & Drop es nach innen. Wieder einmal können
Sie doppelklicken und viel näher zoomen, so dass die Leute es etwas größer lokalisieren können. Und schließlich, was Wir haben Parken gekeimt und dies sollte sagen, private Markierung Bild, und Sie können die gesamte denken und springen in genau hier die schnelle auf diesen Namen und Sie können es umbenennen, um es konsistent zwischen ihnen aussehen. Also sollte dies Gartenbild wie So bei der Auswahl Teer Namen, können
Sie den Garten genau hier so schnell finden und seinen Namen geändert. Wenn Sie also diese Fehler sehen, können
Sie sie leicht beheben. Kopieren Sie einfach Ihre Elemente und fügen Sie sie auf Ihren Namen ein. Und schließlich, was wir hier haben, ist der Parkplatz. Also noch einmal, stumpfes Klicken, um dieses Bild zu vergrößern, um ein wenig mehr visuelles Interesse zu schaffen. So etwas sieht schön aus. Vielleicht können wir später ein paar Hintergrundschatten zu diesem Bild hinzufügen, aber ich tue es wirklich nicht. Ich denke, das wird eine gute Idee sein. Hintergrundschatten für diese. Ja, aber für diese, nein, wirklich. Wie es aussieht schön und sauber auf der Seite direkt hier im nächsten Video, wir werden in springen und entwerfen den Rest von unserem Design, also werde ich es sehen
30. Design erstellen: Lassen Sie uns die Hintergrundfarben von diesen Pfeilen nicht ändern. Also werde ich einfach in dieser Farbe
wählen, verfärben und dann in mein Ebenenfenster springen, beide Pfeile
auswählen und diese Farbe ändern, zum Beispiel. Und wenn du denkst, dass es zu dunkel ist, kannst du
vielleicht herumspielen oder eine neue Farbe kreieren. Aber ich denke, es funktioniert gut mit unserem Design. Und wir werden brauchen, um ein Bild hier einzufügen. Conduct klicken Sie hier, um seinen Namen zu ändern. Es wird also in Dallas sein. Ich m g wähle alles aus. Spring zurück zu hier, Dallas. Ich bin G Also haben Sie Ihre Ebenennamen konsistent Springen Sie in die Ebenen. Gestartet den Bilderordner Drag & Drop in Wie es aussieht, weil es hier ein
visuelles Interesse schafft . Nur um Sie wissen zu lassen, dass dies der alte Ort ist und es eine große Geschichte hat. Und vielleicht später bei den nächsten Videos, können
wir auch einen Hintergrundschatten auf diesen einbinden. Schließlich möchte
ich diese Farbe einfach in dunkle Farbe ändern, nur um sie ein wenig hervorzuheben. Schließlich, was wir hier brauchen, ist, die Farbe zu ändern, so dass wir genau die gleiche
Farbe wie diese haben . Wenn Sie also hineinspringen, können
Sie sehen, dass es die drei e eins e eins ist und wir haben es hier, weil wir es bereits gespeichert haben. So ausgewählt. Klicken Sie hier. Und wie Sie sehen können, geht
es auf die Zehe. Machen Sie dieses Formular auftauchen und heben Sie sich nur ein wenig mehr ab. Wir werden diese Ordner schließen, und schließlich müssen
wir ein paar Dinge innerhalb unserer Fußzeile ändern. Was wir also wollen, ist eine dunklere Hintergrundfarbe für unsere Fußzeile zu erstellen. Was wir also tun können, ist vielleicht in dieser Farbe zu verwenden. Also ist es sechs b 6764 und es ist wirklich dunkel, wie Sie sehen können, aber es wird unsere Artikel Pop viel schöner. Wir werden es hier speichern und es den ganzen Weg nach unten ziehen und was wir zuerst wollen ist dieses auszuwählen. Machen Sie es weiß, weil wir wollen, dass es abheben, und was wir auch wollen, ist wählen Sie diese Symbole und vielleicht verwenden Sie diese Farbe, wählen Sie die Nummer und vielleicht verwendet verfärben, wählen Sie die E-Mail und verwenden Sie die gleiche Farbe. Also, wenn ich hier springe, Indices de drei. Es ist also dieser hier. Wir werden diese Farbe benutzen. Also für diese können
wir vielleicht weiß für die Namen wie diese und für alles andere verwenden, können
wir andere Farben verwenden, aber um die Dinge schneller zu machen, können
Sie alles auswählen. Dann wählen Sie diese Farbe und dann wählen Sie einfach diese Namen oben und ändern Sie sie
Zehenweiß . Sie können
natürlich jede dieser Farben
verwenden, um verschiedene Farbkombinationen zu erstellen, wenn Sie möchten. Aber ich mag wirklich, wie es aussieht, so dass Sie den gesamten Ordner noch einmal auswählen können, diesen
auswählen und vielleicht experimentieren, und Sie können sehen, wie es mit dieser Farbe aussieht. Und vielleicht sieht es gut aus, aber ich möchte wirklich, dass sie abheben auf der Seite sind nur ein bisschen mehr so. Vielleicht können wir Weiß erschaffen. Sieh mal, wie das aussieht. Ja, ich finde, das sieht gut aus. Und nur für die Namen, vielleicht können wir diese Farbe verwenden, trennen Sie sie
einfach ein wenig. Und schließlich, für diesen letzten, können
wir auch Weiß verwenden. Und da gehst du hin. Wir haben unser Design fertiggestellt. Wir haben einige wichtige Änderungen abgeschlossen. Also sind wir fertig, einschließlich unserer Bilder, und im nächsten Video, werden
wir einige andere Dinge tun. Also werde ich Ihnen zeigen, wie Sie verschiedene Hintergrundschatten an einigen Stellen einschließen können, und wir können vielleicht mit einigen Platzierungen herumspielen, und wir werden sehen, was wir während dieses Entwurfsprozesses verpasst haben, damit wir das
beenden können , also sehen wir uns dort.
31. Design erstellen: Lass uns nicht hineinspringen und unser Design beenden. Also werde ich ein wenig näher an hier heranzoomen, wo Zeugnis ich gehe Zehe Doppelklick auf den Knopf oder Sie können es in der Seite finden, und ich werde auf den Schatten klicken rechts hier. Ich werde 10 10 und 20 Pressezentrum eingeben, und ich werde sicherstellen, dass es auf 50% so ist. Also ist es schön groß, oder vielleicht sogar gehen wir mit 30%. Ich denke, das sieht viel besser aus, nur damit wir diesen Knopf ein bisschen
mehr hervorheben können. Und wenn du denkst, dass es zu groß ist, kannst
du hier auf Kurs gehen und 20% und mehr nehmen. Bezahlen Sie City von diesem Schatten und halten Sie an? Lassen Sie uns nur ein bisschen mehr visuelles Interesse vorstellen, und ich ging voran und erstellt dieses Zitat im Fotoshop, weil Telefone arbeiten ein wenig anders hier in Adobe Xdd. Dann tun sie im Fotoshop. Also, obwohl wir Playfair Display vorne direkt hier verwenden, zeigt
es dieses Zitat, zum Beispiel, nur ein wenig anders genau hier in Eier Identitäten in vier Shop Also ging ich voran, erstellt und dann einfach als G exportiert und direkt hier in Adobe X'd gezogen und abgelegt. Vielleicht können wir ein pastöses 20% verwenden und es einfach den ganzen Weg zurück bewegen. Oder vielleicht, ich weiß es nicht. Vielleicht können wir es bei 40% verwenden, nur damit wir ein wenig mehr visuelle Interessen einbeziehen können, so stellen Sie sicher, dass der Boden so läuft. Also geht es über das Zitat im Hintergrund, und ich denke, das sieht gut aus. Also gehen
wir weiter und ändern, wie diese Räume aussehen. Also werden wir einige Hintergrundschatten im Inneren hier und auf diesen Hintergründen einbeziehen. Also gehen wir Zeh, stellen sicher, dass sie auffallen, sobald die Person über sie schwebt. Also suchen wir die Räume, suchen und öffnen Sie alle diese Ordner. Also Zimmer eins BG und was wir hier tun können, ist in den Schatten zu gehen und 55 und vielleicht 20. So wie so. Und wie Sie sehen können, es tut eine ziemlich schön aussehende Schatten zu schaffen, und es macht nur sicherstellen, dass auf der Seite ein bisschen schöner Sie darauf klicken können wieder springen, um hier. Stellen Sie sicher, dass es bei 16% liegt und was wir jetzt tun können, ist richtig. Klicken Sie auf die Ebene. Sie können es hier tun, oder Sie können es hier tun, Rechtsklick Kopieren und dann wählen Sie diese anderen beiden und einfach mit der rechten Maustaste und basierend Aussehen, und es wird genau das gleiche Aussehen auf allen von ihnen basiert. Also lasst uns sie nicht verstecken, weil wir sie im Moment nicht brauchen. Und wir werden sie einfach einmal zeigen, wenn Sie schweben. Also bedeutet es, einfach dieses einschließen. Und wie Sie sehen können, wenn eine Person schwebt, wird
es diesen Hintergrundschatten zeigen, und diese beiden werden ohne ihn bleiben. Und wenn sie diesen überdecken, wird
dieser ausgeschaltet werden und so weiter und so weiter. Also nur so schafft es ein wenig mehr von visuellem Interesse. Also lassen Sie uns nach unten gehen und wir werden einige Änderungen an diesem Bild außerhalb des Standorts vornehmen. Also, was wir jetzt tun können, ist in diesen Schatten einzubeziehen. Also 10 und 20 mögen es, und es wird hier einen schönen Hintergrundschatten schaffen. Sie können mit diesen Pfeilen herumspielen und auch Hintergrundschatten für sie einschließen, wenn Sie möchten. Aber ich denke, sie sehen so schön aus. Jetzt hat es diese Schaltfläche hinzugefügt, und ich werde in diese Schaltfläche springen, die sich hier befindet, Rechtsklick kopieren. Schließen Sie alle diese Ordner, sich wieder im Inneren befinden, klicken Sie mit der
rechten Maustaste und basiertes Aussehen. Also, wie Sie sehen können, es 10 10 20 Sie gehen, um das gleiche für diesen Boden zu tun. Aber wir werden nicht Fuß Fuß Basis das Aussehen, weil dieser Knopf ist eine andere Farbe, so wird es eine andere Sortierung aus einem Layout erstellen. Und dann wollen wir. Wie Sie sehen können, haben wir das erschaffen. Und jetzt können wir das schließen und schließlich möchte
ich hier hineinspringen und nur eines von diesen Beispielen erstellen. So können Sie sich vorstellen, dass, wenn jemand hier klickt, es eine Auswahl treffen wird, und es wird ein bisschen mehr von all diesen anderen abheben. Also lassen Sie uns schnell den Schatten erstellen. Also lassen Sie uns 10 san und 20 gleiche wie wir für all diese anderen verwenden,
also können Sie sich vorstellen, wenn jemand auf dieses klickt und auf das Dropdown-Menü öffnet,
wird es einen Schatten darüber legen. Aber im Moment, lassen Sie uns das einfach von ihm entfernen. Klicken Sie also hier, und wenn Sie wieder einschließen möchten, klicken Sie
einfach hier. Und später werden
wir den Abstieg basierend auf all diesen anderen kopieren. Aber vielleicht können wir das jetzt tun. Also öffnen Sie alle diese anderen Eingaben und klicken Sie einfach mit der rechten Maustaste einfügen Aussehen und dann
gehen Sie einfach durch alle von ihnen und schalten Sie es von hier aus, weil wir es im Moment nicht brauchen, und wir werden es verwenden, wenn wir zur Prototyping-Phase aus. Unsere Projekte werden es endlich ausschalten für dieses, und das wird es für dieses Buchungsformular sein. Sie können sogar sicherstellen, dass Sie eine hellere Autofarbe einschließen, zum Beispiel, wenn Sie noch mehr Aufmerksamkeit auf dieses Feld lenken möchten. Aber ich finde, es sieht gut aus. Und jetzt bewegen wir uns. Willst du zu diesem letzten Abschnitt? Ich werde diese Form Farbe zurück zu Blue Song ändern, werde dies auswählen und sicherstellen, dass es da ist. Es sieht gut aus, OK, und schließlich wählte das Foto BG Control D, um ein Duplikat es zu machen und gerade diese eine
Fußzeile Bild genannt , und ich habe ein weiteres Bild direkt hier innen aus unserem Images Ordner. Es heißt Footer Image, und es sind diese berühmten Windmühlen von Nicholas Conduct. Wir verurteilen die Position so, und was ich jetzt tun möchte, ist einfach, Ihre Pacenti davon zu senken. Also werde ich es auf vielleicht 15% senken. Und wie Sie sehen können, schafft
es ein schönes visuelles Interesse im Hintergrund. So sortieren Sie, ikonische Wahrzeichen von Sanftmut, und es schafft nur ein bisschen mehr Interesse für den Hintergrund als nur eine normale Farbe. Sie sind also her. Wir haben unser Design fertiggestellt. Wir haben alle Etappen durchlaufen. Gehen wir hier und vielleicht können wir den Schatten ausschalten oder ihn einfach verstecken, wie wir es
mit dem Rest von ihnen getan haben . Und Sie können damit herumspielen und vielleicht einige Hintergrundtexturen hier einfügen, wenn Sie möchten, vielleicht fügen Sie diesen Feldern eine schöne alte Texturen hinzu. Also dieses Testimonial Feld, sowie dieses Buchungsformular Feld direkt hier, wenn Sie wollen. Aber ich denke, es funktioniert gut mit diesem Orel Design. Es ist wirklich sauber, einfach,
einfach zu bedienen, einfach zu navigieren. Und eine letzte Sache, die mich grenzt, ist die Farbe dieses Textes. Ich denke, es sieht nur Abschleppflugzeug mit, ah, dieser Farbe genauso wie dieser, weil es die gleiche ist. Wir haben das gerade geschaffen, um in diesem kühn zu sein, um regelmäßig zu sein, also lasst uns voran gehen und das ändern. Also werden wir hier in die Zehe springen und die Farbe unseres Textes ausfindig machen. Es ist also dieses, aber wir werden es nicht überall ändern, es nur an einigen ausgewählten Stellen ändern und die Farbe so belassen, wie es an einigen anderen
Orten war . Also für hier, lassen Sie uns einfach enthalten. So ist es diese Farbe 90 90 90 wie so. Und ich werde ein neues Farbfeld hier im Asset-Panel erstellen, und ich werde reinspringen und einfach diese auswählen, um hier zurück zu springen und hier zu klicken, und ich werde auch dieses ändern. Um dies, wie Sie sehen können, sticht
es jetzt viel besser aus, weil es nicht die gleiche Farbe hat. Es sieht nur ein bisschen anders aus, und vielleicht können wir es auch für diesen hier tun. Also nur, dass wir es ein bisschen mehr differenzieren können und wir werden das so lassen, wie es ist weil es sich von der Seite so abheben muss. So können wir weitergehen und
zum Beispiel auf diese klicken zum Beispiel auf diese klicken und so erstellt. Wir können das hier so lassen, wie es ist. Also, wie dieser Text auch dieser,
dieser auch, wir können diesen Text auswählen und wie Sie sehen können, wenn ich ihn hier ändere, können
Sie deutlich den Unterschied zwischen diesen beiden sehen. Vielleicht können wir sogar voran gehen und diesen so mutig machen, nur damit wir ein bisschen
mehr visuelles Interesse wie das schaffen können . Endlich, lasst uns das Gleiche tun. Also lassen Sie es so, wie es so ist. Und vielleicht können wir diese lassen, wie sie sind, weil wir sie nur ein bisschen mehr hervorheben müssen, damit die Leute
tatsächlich auf dieses Formular klicken und schließlich dieses in dieses neue Auto ändern. Also, da gehst du hin. Wir haben unser Design fertiggestellt. Was uns nun noch übrig bleibt, ist für unsere Prototypen zu planen und zu überdenken. Denn im nächsten Abschnitt aus dem Kurs. Wir werden damit beginnen, Prototypen zu entwerfen, weil wir dieses Design mit
dem Kunden teilen und ihnen mitteilen, was wir bisher getan haben. Und, äh, geben Sie ihnen die Chance, uns das erste Feedback zu geben, damit wir wissen, was wir
gut gemacht haben und was sie wollen, dass wir ändern, damit wir diese Änderungen vornehmen können, bevor wir
weiter mit diesem -Projekt. Das wird also im Grunde unsere erste Revision für dieses Projekt sein. Also werde ich Ihnen im nächsten Abschnitt des Kurses zeigen,
wie Sie anfangen können, Ihre Prototypen zu erstellen, wie ich Ihrem Design etwas mehr Leben bringen kann und wie Sie es Ihren Kunden
und Entwicklern präsentieren können, damit sie vielleicht besser verstehen, wie Sie zu einigen dieser Ideen gekommen sind. Und was ist Ihr Denken und Ihre Logik dahinter?
32. Mit Komponenten arbeiten: in diesem Video. Ich möchte über Komponenten sprechen, weil wir sie nicht in den Entwurfsprozess einbezogen haben, und es gibt einen Grund dafür. Ich wollte Ihnen eine Arbeit ohne Komponenten zeigen, die für die Schaltflächen enthalten sind, zum Beispiel, und diese Formulare. Und wenn ich hier auf meinen Hintern klicke, ist
es Panel. Sie können sehen, dass wir keine Komponenten haben, aber ich werde das jetzt ändern, weil Sie den gesamten Konstruktionsprozess bereits
ohne Komponenten gesehen haben. Sie können
also wählen, ob Sie Ihre Entwürfe ohne Komponenten erstellen möchten oder mit ihnen . Persönlich erstelle
ich gerne Komponenten, und ich fand, dass sie einfacher Weg sind, alles in Adobe X'd zu entwerfen. Aber ich wollte Ihnen, wie gesagt, wie gesagt,
den Weg ohne Komponenten zeigen, denn dies ist die Zielseite und wir werden
sowieso keine große Anzahl von Komponenten haben. Aber ich möchte Ihnen in diesem Video zeigen. Höhere kann schnell Komponenten erstellen und wie Sie sie im gesamten Design verwenden können denn später, wenn Sie unter Seiten entworfen haben, ist
es wirklich wichtig, dass Sie Komponenten haben Lassen Sie uns
also etwas näher auf unsere Entwürfe hineinzoomen, also werde ich Ihnen zeigen, wie Sie sie erstellen können. Klicken Sie also auf Ihre Are Barkley ganz hier, um cred und erste Dinge zuerst einzubeziehen. Wenn ich etwas näher zoomen, können
Sie sehen, dass unsere Schaltfläche mehr als zwei Spalten nimmt, damit wir das ändern können. Wir können eine Schaltfläche erstellen. Es nimmt zwei Spalten oder drei Spalten ein, also lassen Sie uns etwas näher heranzoomen. Und wenn ich darauf klicke, kann
ich gleich hier springen. Meaty NBG und ich können das bewegen, um zwei Spalten zu passen. Wie Sie sehen können, können
Sie den Text auswählen und zentrieren Sie ihn und buchen Sie jetzt Schönheit in und wir werden den
Namen in Neff ändern , wie so und ich könnte Steuerbefehl K treffen. Und wie Sie sehen können, zeigt
es diesen grünen Diamanten, was bedeutet, dass dies die Komponente ist, und darüber hinaus ist
dies die Master-Komponente, von der Sie untergeordnete Komponenten nehmen können, was bedeutet, dass alles, was Sie auf den Master-Komponenten ändern, auch auf den untergeordneten Komponenten aktualisiert wird. Und wenn ich hier springe, um seinen Gürtel zu
massieren, können Sie sehen, dass jetzt haben wir Buch jetzt Tiene naff, so dass wir das wissen können. Okay, das ist ein Boden, der jetzt Buch ist, aber es befindet sich im Inneren des Niemals, weil es diesen zweispaltigen Witz enthalten wird. Also lassen Sie uns jetzt schnell die Änderung unserer Speisekarte machen. Wenn Sie sich daran erinnern, positionieren Sie die 70 Pixel davon. Also lassen Sie uns das noch einmal tun wie so 1234567, so dass wir sogar Abstand in
unserem Design haben können , so dass Sie sehen können, dass dies der kleinere Boden ist. Lass uns weitermachen und ein größeres schaffen. Also, wenn ich hier etwas näher heranzoomen, können
Sie sehen, dass wir den gleichen Knopf haben, den wir dort oben hatten. Aber jetzt sind es 2,5 Spalten, im Grunde, also lassen Sie uns das hier erweitern, und wir werden den Text so positionieren, wie wir es vorher getan haben, also in der Mitte. Und ich werde den Namen ändern, um jetzt Bt in buchen. Aber nennen wir es groß, weil es größer ist und es ist ah, Wit ist jetzt drei Spalten, Also noch einmal, Controller Command K und wenn ich in meinen Hintern springen ist gebunden. Sie können sehen, dass es jetzt erstellt wird. Also haben wir zwei Größen von der gleichen Unterseite. Und diese Schaltfläche enthält diesen Schlagschatten, wenn Sie sich an frühere Videos erinnern und dieses nicht. Das ist also wieder der differenzierende Faktor. Also jetzt, wenn ich diesen Button duplizieren oder ihn nach unten platzieren möchte, weil wenn ich nach unten scrollen und Sie werden sehen, dass wir es hier haben, so dass Sie eines von zwei Dingen tun können, können Sie drinnen springen , das ist das Buchungsformular. Suchen Sie die Unterseite, die sich innerhalb des Formulars befindet. Hier ist es unten. Also, was Sie hier tun können, ist eine Kopie von dieser Unterseite zu machen und das wird Ihr Kind
Kopie sein . So können Sie einfach klicken, wenn es alle gedrückt halten, um unten zu ziehen, oder Sie können einfach klicken Sie hier, um diese Schaltfläche zu löschen. Sie können zurück zum Asset-Panel springen und Sie können eine neue Schaltfläche direkt hier ziehen und ablegen. Was das tun wird, ist, dass es eine Instanz über diese Schaltfläche erstellt. Also, was auch immer Sie ändern, zum Beispiel Farben oder Text oder so etwas, es wird in Echtzeit aktualisiert und zeigt Ihnen auch hier aktualisieren, also lassen Sie es uns verschieben. 40 Pixel. Das Gleiche, wie wir es mit allen anderen gemacht haben. So können Sie Shift halten, bis es Ihnen die Entfernung hier anzeigt. Also, das ist es im Grunde für die Tasten. Und wir hören eine weitere Taste, die innen von unserem Anmeldeformular ist, aber weil es ein bisschen anders ist, also die Farbe ist anders, die Größe ist anders, also lasst uns damit herumspielen, Zunächst einmal, was wir tun können, ist zu lernen, wie groß der Abstand zwischen dieser Schaltfläche und dieser
E-Mail-Eingabe war ? Wenn ich also auf die Schaltfläche klicke, Shift
halten und verschieben, können
Sie sehen, dass wir
zum Beispiel
130 haben , damit ich es hier verschieben kann. Sie können drinnen klicken und Sie können es machen. Zum Beispiel
drei Spalten mit wie, so dass Sie es so positionieren können. Und vielleicht können wir einen Spaltenabstand erstellen, so dass Sie auf das E-Mail-Formular klicken können und Sie es hier
ziehen können , damit Sie sehen können, dass wir einen Rinnenabstand haben, im Grunde nicht die Spalte. Sie können sie gruppieren und zum Beispiel
für Newsletter anmelden
auswählen und einfach hier klicken und es wird sie in der
Mitte platzieren . Aber es hat nicht funktioniert, weil das breiter ist als das. Also, mit außerhalb Ihres Ordners, klicken Sie rechts hier, ziehen Sie es zurück in ihren Ordner, klicken Sie mit der
rechten Maustaste auf Gruppe, und hier geht's. Wissen Sie, was Sie tun können, ist, dass Sie diese Felder erstellen können, wenn Sie als separate Komponenten möchten. Aber was ich eigentlich tun möchte, ist, sie so zu gruppieren, so steuern Sie G und benennen Sie es, zum Beispiel, E-Mail-Formular oder abonnieren Sie ihn noch besser, so und drücken Sie Kontrolle oder Befehl K, weil es eine Komponente basierend auf diesen beiden Elementen. Also im Grundekönnen
Sie, können
Sie, wie Sie mit dieser Schaltfläche gesehen
haben, können Sie es einfach per Drag & Drop auf die Seite ziehen, was Sie wollen, denn auf den meisten Seiten wird
dieses Anmeldeformular trotzdem erscheinen, Es ist also eine gute Möglichkeit, eine Komponente zu erstellen, die diese beiden Elemente im Grunde zu einem Element kombiniert sind. Es liegt also an Ihnen, ob Sie mit Komponenten arbeiten möchten oder nicht. Ich arbeite gerne mit Komponenten, besonders wenn ich verschiedene Bildschirme habe. Grundsätzlich, wenn Sie mit nur einem Bildschirm arbeiten, nur eine Seite, so in unserem Fall Landing Page. Sie brauchen keine Komponenten. Aber wenn der Kunde das später erweitern möchte und alle diese anderen Seiten einschließen möchte, wie in unserem Fall, werden
sie es tun. Also, zum Beispiel, nur vorstellen, wir werden drei verschiedene Zimmerseiten Reservierungsseite über uns Kontakt haben. Vielleicht werden sie auf einige verschiedene Seiten einschließen. So sind sie separate Seite für das Buchungsformular und so weiter. Es wird angeboten. Stellen Sie sich also vor, eine Reihe von verschiedenen Seiten werden darin enthalten sein, daher sind Komponenten wirklich hilfreich. So halten Sie die Konsistenz zwischen Ihren Designs. Im nächsten Video gehen wir Toe, fügen Sie unserem Projekt einen letzten Schliff hinzu. Wir werden Dropdown-Menüs entwerfen, und wir werden entwerfen, wie dieses Formular tatsächlich aussehen wird, wenn sie darauf klicken. Also werden wir einige Optionen für diese und diese gefüllt sowie den Kalender für diese beiden Felder. Also RC, da
33. Entwerfen von Dropdowns: Lassen Sie uns nun den letzten Schliff unseres Designs hinzufügen. Was wir also tun werden, ist, dass wir Drop-Down-Menüs für Räume hier
sowie für Flaggen hier hinzufügen werden. Dann werden wir in den ganzen Weg nach unten springen, und wir werden verschiedene Dropdown-Auswahlmöglichkeiten zu diesem Formular hinzufügen. Also werden wir verschiedene Zimmertypen, Kalender direkt hier und schließlich Gäste direkt hier unten einbeziehen. Und wir werden unser Design beenden. Also lasst uns anfangen. Und ich werde den ganzen Weg nach unten scrollen, klicken Sie auf den Designer-Port und verstecken Sie das Raster, weil wir nicht wollen, dass es uns ablenkt. Im Moment. Ich werde den Knave öffnen. Ich suche die Zimmer. Also hier sind sie, genau hier, und ich werde im Grunde drei Mal duplizieren. So kontrollierte die 123 und bewegen diese drei den ganzen Weg nach unten. Halten Sie also Shift, wählen Sie und bewegte sie nach unten, um hier herumzufahren. Also, wenn sie mit der unteren Kante von R nev BG treffen, so im Grunde dieser weiße Teil und dann
halten Sie meine Umschalttaste und bewegen Sie es nach unten für das Pixel. Also 1234 tun das gleiche für diese beiden. Suchen Sie also die untere Kante hier. 1234 Und schließlich tun Sie das gleiche mit dem 3. 1 Also bewegen Sie es nach unten. 1234 Und diese drei werden im Grunde unsere Zimmer sein. Also, wenn wir ein wenig nach unten springen, können
Sie sehen, dass wir klassische Familie in Grand Deluxe Zimmer haben, also das ist, was wir eintippen werden. Also vielleicht können wir Platz für alle drei Ende tippen Classic lassen. Stellen Sie sicher, dass es von links ist. Also verließ die Linie, wie es ist, dieser wird Familie wie so sein und schließlich wir frohes Grand Deluxe Zimmer wie so haben. Und was wir jetzt brauchen, ist, dass wir einen Navigationshintergrund brauchen. Also werden wir eine mit unserem nie BG erstellen, damit Sie das Gerät steuern können und Sie es
nach oben verschieben können . Also, nur damit Sie sehen können, was Sie tun, können
Sie es dann nach unten bewegen, bis es mit Ihrem nie BG wie So trifft, sobald Sie
diese blaue Linie sehen , bedeutet das, dass sie perfekt ausgerichtet sind. Verschieben Sie es nach unten, bis es mit unserem Text übereinstimmt. Wie so die ganze Schicht 1234 Weil wir den gleichen Abstand nach unten haben wollen, wie wir es mit
unserem Text getan haben . Und was wir für diese linke Kante wollen, ist, mit dem Text auf der linken Seite auszurichten und dann
Shift zu halten . 1234 nach links. Und für diese rechte Kante, lassen Sie es
zum Beispiel mit der Reservierung ausrichten , so dass Sie es so verschieben können. Und schließlich, was wir wollen, ist, unsere Ecken zu runden, so dass Sie hier klicken können. Wir wollen um die untere, linke und untere rechte Ecke, so dass Sie sie hier finden können. Geben Sie 10 und 10 drücken Sie die Eingabetaste oder geben Sie die gleiche Flüssigkeit es mit allen anderen von ihnen zurück. Und los geht's. Wir haben unsere Drop-down-Liste erstellt. Also, jetzt, was Sie wollen, ist, in diesem zu zügeln, so dass es unsere Zimmer Zimmer und fallen b
Gen und wir werden gruppieren alle von ihnen Kontrolle G und nennen dieses Zimmer Drop-down wie so und wir werden es bewegen Nur unten sind nie BG, weil wir darunter erscheinen, und was wir tun wollen, ist Schleppen. Fügen Sie einige Schlagschatten, auch, sind nie so. Klicken Sie darauf, klicken Sie auf Schatten und es wird nur einen leichten Tropfen hinzufügen. Schatten zu ihm und Sie können es 03 und sechs sehen. Das ist es standardmäßig. Und ich denke, es sieht gut aus, weil es nur ein wenig von visuellem Interesse hinzufügen wird, weil dies unten gehen wird. Sobald wir auf die Zimmer geklickt haben, wird
dieser Pfeil nach oben gehen, und wir werden das gleiche für die Flaggen jetzt erstellen. Jetzt zum Flex. Wie in früheren Videos erklärt, habe ich diesen Plug in genannt Sie ich Logos verwendet, so dass Sie darauf klicken und dann einfach
Länderflaggen generieren können. Sie müssen 194 Formen für seine Zehenarbeit haben, weil es 194 Länder anerkennt. So funktioniert es
im Grunde, im Grunde, und manchmal zu sagen, und ich werde es nicht erstellen, ich werde einfach die beiden Flaggen kopieren, die ich aus einer anderen Datei brauchen werde, und ich werde in genau hier und stellen Sie ihnen nach innen. Also irgendwo hier, also haben wir eine griechische Flagge und wir haben eine französische Flagge, also werden wir sie unter der britischen Flagge positionieren, damit wir sie so zentrieren können, indem wir unsere Shift-Taste halten, natürlich Position und alten Weg genau hier. Also 1234 runter. Und diese französische Flagge. Wenn ich hier darauf klicke und es verschiebe, kann
man sehen, dass es 40 Pixel nach unten ist. Also, was wir brauchen, ist, dass wir einen Hintergrund dafür erstellen. Gleiche wie bei unseren Zimmern. So können Sie entweder diesen Hintergrund aus Räumen kopieren oder einen anderen erstellen, und ich werde ihn einfach kopieren. Also Kontrolle D gezogen außerhalb dieser Gruppe Locator Flaggen hier Luft, und ich werde einfach Shift-Position halten. Es ist irgendwo hier. Ich werde es platzieren, bis es mit der französischen Flagge in der unteren Schicht trifft. Wollte 34 aber mit seiner ausgewählten So 1234 wie so werde ich es bewegen, bis es an der
Spitze trifft und reduzieren den Witz auf,
zum Beispiel, sagen
wir 100. Sehen Sie, wie das aussieht. Ja, das sieht gut aus. Positionieren Sie es in der Mitte und ich werde Zehe bleiben diese Flaggen oder Sprachen. Dropdown BG Group. Diese beiden Sprachen, wie so und mussten am Ende so herunterfallen. Auch bewegen sich unten nie Jean, weil es geht Toe im Grunde haben die gleiche Wirkung wie wir wollen. Und das ist es im Grunde für diesen Drop Down. Also im Grunde, wenn die Leute auf Zimmer klicken, wird
es blau. Gleiche wie die untere Farbe. Es wird dieses Dropdown-Menü angezeigt, und die Leute können auf eine dieser Optionen klicken. Dasselbe für die Fahnen. Wenn sie also die Sprache der Website ändern möchten, können
sie hier klicken und dann ihre Sprache auswählen. Also werden wir dies verwenden und für dieses Formular direkt hier unten erstellt. Und um mehr Zeit zu sparen, können
wir einfach die Drop-down-Liste dieses Raums kopieren. Also kontrolliere D. Ich werde es außerhalb dieses Ordners verschieben und dann einfach den ganzen Weg nach unten verschieben, bis es sich in der Nähe unseres Buchungsformulars befindet. Dann werde ich es hineinschieben und was wir wollen, genau hier. Wie Sie sehen können, haben
wir grundsätzlich Grenzen für alle von ihnen, aber wir wollen, dass die Grenzen von allen entfernt werden. So wird es so aussehen wie ich schnell hoch das hier. Also, wenn ich unser Formular öffne und die Gäste öffne, Check-in, Check-out und Zimmer. Wir haben Input. Und für alle haben
wir die Grenze. Also werden wir die Grenze von allen entfernen. So können Sie entweder nacheinander klicken oder mehrere Auswahlmöglichkeiten auswählen und dann einfach den Rahmen so
entfernen. Also, wenn die Gäste zum ersten Mal auf der Seite angekommen sind, wird
es etwa so aussehen. Wenn sie also jetzt auf das Buch klicken und den Raumtyp aktiviert haben, wird
der Eingaberand wie folgt angezeigt, und diese haben noch keinen Rand. Aber dann, wenn sie auf den Kalender klicken, zum Beispiel, direkt hier auf dem Huhn, wird
es ihnen Grenze zeigen. Nun sollte dies Raumtyp Seele zeigen. Es ist eine klassische Raumsteuerung, sehen Sie, wie Sie sehen können, manchmal können Sie diese Pfeile später im Prozess erkennen. So, und jetzt haben wir es repariert. Also kommen wir zurück zu unseren Drop-Downs, und ich werde Ihnen zeigen, wie Sie sie erstellen können. Also zuerst erstellen
wir ein Zimmer Drop-down-Menü. Also hier ist es. Ich werde es innerhalb des Ordners dieses Raumes positionieren, oder Sie können es unten platzieren, wie Sie wollen. Lass uns das trotzdem machen. So seine Position es unten und, wie Sie sehen können, klebt es jetzt, weil es keine abgerundeten Ecken hat, sondern es hat gerade Ecken. Also, was Sie tun können, ist es nach oben zu bewegen. Also halten Sie nur Schicht, bis es mit diesem hier trifft, und ich denke, es sieht gut aus und Sie können diesen Zweifel positionieren, wenn Sie wollen, aber ich werde nicht Fuß gehen. Ich werde nur,
einfach auszudehnen , diesen Rückweg den ganzen Weg bis hierher. Also, bis es sich
im Grunde mit dieser Kante trifft , und Sie können nach innen klicken und sehen, warum Ihre Eingabe so ist, dass es 800 ist. Ich werde es hier dasselbe machen. So 800, wie Sie sehen können, erstreckte
es sich bis zum Rand. Jetzt haben wir unsere Drop-down-Liste für unsere Zimmer. Grundsätzlich sieht
es genauso aus wie die obige, also lassen Sie es uns verstecken. Aber davor werde
ich es kopieren, so kontrollieren die und ich werde das hier nach unten verschieben. So, bis es sich trifft, wie wir es mit dem zuvor so gemacht haben. Und wir werden es verstecken, damit wir sehen können, was sich hier befindet und es Gast ist. Also lassen Sie uns das auch verstecken. Und das wird Gäste sein, die so herunterfallen, und darin waren die Zehe. Im Grunde entfernen Sie einige dieser Elemente, so dass wir sehen können, was wir tun. Wir gehen direkt in ein paar Sachen, die bestimmen werden, welche Gäste in
diesen Raum kommen . Also zuerst,
wir werden Erwachsene wie diese haben,
und wir werden Kinder unten so wir werden Erwachsene wie diese haben, haben, weil wir wollen, dass die Leute eine Auswahl haben wenn sie hinzufügen, wenn sie Kinder mitbringen oder Nein, denn dann werden die Mitarbeiter in diesem Hotel in der Lage sein, OK zu sagen, Sie könnten diese Zimmerkategorie benötigen. Möglicherweise benötigen Sie dieses Zubehör in Ihrem Zimmer. Du brauchst vielleicht so viele Betten, so viele Laken und so weiter, damit jeder weiß, was er zu tun hat. Also werden wir auf die Zimmer Hintergrund klicken, und wir werden es in Gäste Drop-down BG umbenennen. Und noch einmal, all dies ist wichtig, wenn Sie später mit dem Prototyping beginnen, haben Sie Ihre Ebene und
richtig benannt , so dass auch animieren Features und die anderen Features für diese Angelegenheit innerhalb
der Eier d korrekt funktionieren. Und ich werde das genauer erklären, wenn wir zum Prototyping von
Diskursen kommen . Also für jetzt, lassen Sie uns die Größe von diesem Gast Drop Down BG reduzieren. Also halten Sie das einfach und bewegen Sie es nach oben, denn wenn Sie sich erinnern, waren
das 40 Pixel nach unten. So wie das, bis sie sich mit dem Text treffen und Sie diesen Text entfernen können, weil wir ihn nicht mehr
brauchen, was wir hier erstellen werden. Also, wenn die Leute Gäste auswählen, können
Sie sehen, wie das aussieht, und dies sollte unter die Gäste so gehen. Also noch einmal, wenn die Leute wählen Gäste, wird
es zeigen, dass ausgelassen, und sie müssen in der Lage sein, zu wählen, wie viele Erwachsene oder wie viele Kinder kommen mit ihnen. Also lassen Sie uns ihnen diese Optionen geben. Was wir also tun werden, ist die Kontrolle der beiden zu treffen. Finden Sie diese und auf dieser 1. 1 für uns. Lassen Sie uns sie auf diesem ersten formlosen Typ in zwei Mittelpunkt stellen. Und auf dieser 2. 1-Liste, geben Sie Null ein, und wir können sie wie folgt direkt unten positionieren. Du kannst sie so lassen. Es spielt wirklich keine Rolle, und es liegt an dir. Zentrieren Sie sie so, und wir können sie vielleicht irgendwo hier positionieren. Jetzt, was wir brauchen. Diese müssen wir ein Pluszeichen erstellen, damit sie hinzufügen können, wie viele Erwachsene oder wie viele weitere Kinder mit ihnen kommen. Also lassen Sie uns das einen einfachen Weg schaffen, dies zu tun. Es ist einfach, ein Rechteck-Werkzeug zu verwenden. So es können
Sieesmit dieser Farbe ausfüllen. Entfernen Sie die Randsteuerung de und Sie können diesen Abschnitt so drehen. Also haben Sie im Grunde diese beiden Rechtecke und Sie können hier klicken, so dass Sie
sie als eine Einheit hinzufügen können . Aber bevor wir das tun, brauchen
wir ein Minus. Also lassen Sie uns Heat Control D Ruin, um es hier zu bewegen, und wir werden diese beiden so auswählen und einfach hier drücken, was es sagt,
fügen Sie hinzu, weil das sie als separate Form hinzufügen wird, so dass wir vielleicht in Anzeigen eingeben oder entfernen so etwas und Sie können sie so positionieren, dass sie in der Mitte von Ihrem Text sind. Also,
so , und dann können Sie vielleicht einen Abstand machen. Also, Crews, und bewegen Sie es. Vielleicht 40 wie diese 40 mit diesem auch so. Und Sie können alle bewegen, einschließlich der Null. diese Kante und halten Sie dann Verschiebung mehr als 40 Pixel, Zehe die linke und dann duplizieren Sie einfach diese so tief gesteuert und bewegen Sie sie unten bis sie in der Mitte von Ihrem Null sind. Und Sie können Ihre Ebenen dann ein wenig besser organisieren. Also, so. Und da gehst du. Sie haben Ihren Drop erstellt, ihr Menü. Aber das muss hier sein, und Sie können es schließen, auf eine Wartezeit klicken und sehen, wie das aussieht. Nun, wenn Sie denken, dass dieser Abstand ein bisschen abgesetzt ist, können
Sie das ändern, wenn Sie möchten. Also, was Sie tun können, ist einfach zu lokalisieren, wo sie sind. Also Gäste fallen nach unten und Sie können alle von ihnen Position auswählen, bis sie mit
dieser Kante wie folgt ausgerichtet sind . Wie eine ganze Schicht. 1234 Und dann wieder, 1234 Und dann bewegen Sie es einfach, bis es mit dem unteren Rand so trifft. Und dann verschieben Sie alle von ihnen zurück 40 Pixel. Also 1234 Und jetzt hast du einen viel schöneren Abstand zwischen allen. Und jetzt gehen wir voran und springen und machen dasselbe für diesen Stopp eins. Es wird also einfacher, denn wir haben nur Textebenen. Im Grunde. Also bewegen Sie sie nach oben, bis sie sich mit diesem Sport treffen, um zu passen, so. 12341234 Noch einmal und bewegen Sie diesen Hintergrund hier. Dann bringen Sie das zurück. 1234 wie so und jetzt sind sie in der Mitte. Also lassen Sie es uns verstecken. Ich werde auf diese Eingabe klicken, Entfernen Sie die Grenze. Ich werde darauf klicken. Eingabe hat den Rahmen vorerst entfernt. Ich werde sie alle verstecken. Und jetzt werden wir uns auf die Überprüfung und Auschecken von Kalendern konzentrieren
34. Kalender erstellen: Und nun endlich, lassen Sie uns voran und erstellen Sie unseren Kalender. Also, wenn ich ein wenig näher an hier heranzoomen und ich hier auf dem Buchungsformular koche , öffne das Formular, lokalisierte das Huhn, und was du hier tun kannst, ist im Grunde kopieren und einfügen Sie den Hintergrund für diese andere, die Sie erstellt haben, so steuern D. Und Sie können es außerhalb des vollständigen frühen Namens der Überprüfung und beachy wie so ziehen, und Sie können es nach unten verschieben, bis es mit diesem trifft. Und wenn Sie eines dieser anderen ablenken, können
Sie sie einfach verstecken. Also bewegen Sie das hier nach unten und ich werde es vorerst so lassen. Also, was Sie tun werden, ist es ein bisschen nach oben zu bewegen und dann unten zu bewegen, so dass wir genug Platz für unseren Kalender haben. Und wenn du denkst, dass es den ganzen Weg bis hierher reicht, kannst
du das auch tun. So zum Beispiel können
Sie
zum Beispielden Witz hier haben, aber es wird mit diesem Checkout kollidieren. Lasst es uns vorerst so lassen. So springen innerhalb des Check in und Sie können vielleicht diese Werkzeuge duplizieren, steuern d, zog ihn nach draußen und dann einfach unten platzieren, um zu hören, oder Sie können einfach auf sie klicken und dann verschieben Sie sie unten. Manchmal können Sie diese Fehler finden, so wie Sie es sehen können, nein funktioniert. Lassen Sie uns das ein wenig nach unten bewegen, damit wir sehen können, wo die Kante ist. So etwas wie das und ich werde hier die Zehe tippen. September ab 2000 und 19 zum Beispiel. Und ich kann es so in der Mitte positionieren, oder Sie können diese beiden Positionen schnell in der Mitte auswählen, und jetzt können Sie es so positionieren, wie es vorher war. Also, irgendwo hier, und dann können Sie klicken auf 2 September und bis es sich mit der Stelle, Magister Verschiebung 1234, wenn Sie wollen, oder Sie können es haben, auch. Es liegt wirklich an dir, oder du kannst es für diese anderen haben. Also nicht. Lassen Sie uns einen Tag so Sonntag erstellen. Oder Sie können einfach s wie diese haben und Sie können Repeat Great drücken. Also brauchen wir sieben wie so, und was Sie tun können, ist, es hier zu positionieren. Also 12 vielleicht, Und dann einfach den Abstand zu hier erhöhen, zum Beispiel, und jetzt können Sie Montag auf diesem eintippen. Oder Sie können noch besser auf Gruppe dieses Wiederholungsraster. Klicken Sie hier und jetzt können Sie Control G drücken, um sie wieder wie hier zu
gruppieren, positionieren Sie es in der Mitte wie so und jetzt, was wir tun können, ist Eingabe in Tagen Moderator und vielleicht Position. Es sind 20 unten, und vielleicht können wir sogar die Farben ändern. Also lasst uns diese Farbe verwenden, vielleicht, oder etwas dunkleres. Vielleicht können wir sogar Blau benutzen, also liegt es an dir. Aber lassen Sie uns diesen verwenden, zum Beispiel, nur für den Moment, und Sie können hineinspringen und mit der Eingabe beginnen. Das hier ist Dienstag, das ist Mittwoch. Das hier ist Donnerstag. Freitag. Es wird Sonntag und Samstag bleiben. Acht. So wie das. Wenn die Tage fertig sind, können
Sie die Kontrolle D drücken und sich etwas nach unten bewegen. Also, was ist klicken Sie auf dieses und positionieren Sie es nach unten 20 so und wir wollen fünf nach unten, so dass Sie entweder Repeat verwenden
können. Großartig dafür auch. 2345 Wie so Und wir werden diese BG im Grunde bis irgendwo
hier erweitern und dann 1234 mit Ihrer Shift-Taste drücken, damit wir sogar Abstand für alle haben können . So wie so. Und wie Sie sehen können, geht
es den ganzen Weg runter. Grundsätzlich sind die
Zehe unten Zoll. Also, was wir tun können. Das sind unsere Tage, also können wir hier treffen und du kannst so eine große Gruppe treffen, und dann kannst du sie sogar gruppieren, wenn du willst,
aber ich werde sie so lassen, wie sie sind, oder noch besser. Lassen Sie uns das so treffen auf Gruppe auf alle von ihnen, und dann werden wir sie nach Spalte gruppieren, so dass es einfacher für uns sein wird, sie mit diesen Stop will auszurichten. Also lasst uns das machen. Also werde ich auf Sommerkunstseiten klicken, und ich werde auf die erste Lochverschiebung klicken und dann einfach auf Control G unten klicken und vielleicht kann ich sie Nummer eins oder Zeile eins zum Beispiel nennen. Ja, lasst uns Schulden nachrichten und dann dasselbe für all diese anderen tun. Also, Kontrolle, G, ich werde das auch ein wenig nennen und dasselbe für all diese anderen tun. Lassen Sie mich das Video hier schnell pausieren, damit Sie sich nicht langweilen, wenn ich alle
auswähle . Wenn alle ausgewählt sind, können
Sie fortfahren und Ihre Daten hinzufügen. So, zum Beispiel, vielleicht können Sie so etwas wie Tage sehen. Vielleicht wird das 29 sein. Das wird 30 sein. Es wird das erste Sekunde sein, dann es und Sie können natürlich, halten Sie die Kontrolle und klicken Sie direkt innen. Es wird fünfter. Das wird sechster Siebter sein, und lassen Sie mich das Video hier widersetzen, damit ich den Rest von ihnen spüren und dann zu Ihnen zurückkommen kann. Also, jetzt, wo wir alle gefüllt haben, können
wir eine Nummer zwei von hier auswählen und ihm etwas Farbe aus niedrigerer Sichtbarkeit geben. Also können wir damit tun. Zum Beispiel. Nein, das gleiche für diese Nummer eins und das gleiche für 29 30, weil diese aus dem
vorherigen Monat sind , und im Grunde können wir es geben Oktober, Nehmen wir an, weil es 31 Tage und einfach positionieren Sie es in der Mitte wie so, und was wir tun werden, ist jetzt alle von ihnen ein bisschen besser auszurichten. Also lassen Sie uns nur eine verwenden und wählen Sie alle aus. Positionierung wie diese schloss den Ordner, den ich geschrieben habe, um zu mögen, Also werfen Sie drei wie diese Pro Floor, wie so dann fünf. Das ist wirklich mühsam, aber man muss es im Grunde tun. Also manchmal fanden Sie, dass diese Aufgaben wirklich mühsam sind. Aber am Ende des Tages musst du als Designer das wirklich tun. Also eine letzte Sache, die Sie tun können, ist einfach auf Gruppe die Tage. Dann positionieren Sie dies in der Mitte Ihres Tages zu sein. Also halten Sie einfach Shift und bewegen Sie es entlang, bis es in der Mitte von Ihrem Tag ist, im Grunde so so, bis es in der Mitte wie so trifft und dann, wenn Sie fertig, dass Sie bestätigen, rufen Sie
einfach diese Tage. Also dieser hier ist Sonntag so. Das hier ist Montag, Dienstag, Mittwoch, und lassen Sie mich schnell das Video hier wieder pausieren. Und wenn Sie das fertig sind, können
Sie einfach alle diese in ihre dedizierten Ordner ziehen. Das hier ist Samstag. Das hier ist Freitag Donnerstag, also hat sie im Grunde fallen gelassen. Das hier ist also Mittwoch. Also Dienstag, Montag und schließlich Sonntag, wie so und während Ihrer Theke ist beendet. Also jetzt, wenn ich sie alle auswähle und sehen, wo sie genau hier sind, so kann ich sie alle gruppieren, so kontrollieren G. Und was wir brauchen, ist ein Pfeil. Also lassen Sie uns einfach dieses verwenden, zum Beispiel. Also kontrolliere Andi, um es zu duplizieren. Ich werde es nach draußen bringen, um es zu hören, und ich werde es hier in der Nähe positionieren. Dann werde ich Zeh in Sichtweite von unserem Ordner und das wird unser rechter Pfeil
wie dieser sein , und ich werde es drehen und meine Shift-Taste halten. Positionieren Sie es in der Mitte, so machen Sie es 40 von rechts, so. Control d Das wird so ein Pfeil nach links sein? Und Sie können es einfach horizontal drehen und so positionieren, dass es 40 Pixel von diesem linken Rand . Also sie 81234 so, und Oktober wird in der Mitte sein und das ist unser Kalender, wie so Und noch einmal, wenn sie den Check-in auswählen, klicken Sie auf die Eingabe, schließen Sie die Grenze ein. So wird das so aussehen. Also im Grunde wird dieser Kalender fallen und sie werden in der Lage sein, ein beliebiges Datum auszuwählen , das sie wollen. Und wenn sie damit fertig sind, wird das Update genau hier schließen, und dann werden sie auf die Kasse klicken, und sie werden im Grunde dasselbe tun müssen. Also für sie, lassen Sie uns Kalender so wirtschaftlich steuern. Sehen Sie, doppelklicken Sie hier. Control v Amero so, Kontrolle de noch einmal und dies wird unser Check-out Kalender sein. Mein dieser Hit geben Sie ein und Sie können das ganze Ding bewegen, bis es sich mit unserem Checkout
so ausrichtet , bewegt sich unter den Check-out, verstecken Sie es, und ich werde den Check-in-Zähler als auch verstecken. Klicken Sie hier, entfernen Sie die Grenze, weil wir im Moment benötigt werden und es ist unser Formular grundsätzlich ausgefüllt . Also im nächsten Abschnitt des Kurses gehen wir auf den Fuß. Beginnen Sie mit unserem Prototyping. Ich werde Ihnen zeigen, wie Sie einige grundlegende Interaktionen erstellen können, die Ihr
Design wirklich erschaffen und Ihren Kunden dazu bringen, Ihren Denkprozess und Ihre Logik hinter diesem
Design zu verstehen . Wie Sie sehen können, haben
wir manchmal einige mühsame Aufgaben, die wir zu beenden haben und dass wir die
Nummer abschließen müssen , wie Sie diesen Kalender erstellen können, mit einem Plug in, so dass Sie auf die Plug Ins es genannt klicken können Es heißt Kalender und Sie können es direkt hier
suchen, einige Kalender. Und wenn ich auf Show mehr klicken, ist es von Palo ein Geist sein. Aber meiner Meinung nach ist
es wirklich nicht so gut, weil Aber ich habe Ihnen nur gezeigt, dass Sie im Grunde
selbst erstellen müssen , weil es die Telefone nicht auf die Größen aktualisiert, die Sie wollten. Sie können die Größe des Telefons nicht auswählen. Also, wenn ich hier klicken, um Ihnen zu zeigen, können Sie eine Sprache wählen, die Sie einfach Größe verkaufen können. Also im Grunde, wie groß der Kalender ist, was Sie denken, es ist gut, aber es zeigt Ihnen nicht all diese Daten und all diese Details können Sie den Monat, den
Sie wollen überprüfen . Aber wie Sie sehen können, ist
es wirklich nicht alles so anspruchsvoll. Sie können wählen, auf welchem die Woche beginnt und wie das Format aussehen wird, und
klicken Sie einfach auf machen unter. Aber wie gesagt, du kannst damit herumspielen, wenn du willst. Es ist
natürlich kostenlos, natürlich kostenlos, aber sie sagten, es ist wirklich nicht so gut, und Sie müssen all diese wichtigen Änderungen selbst vornehmen. Also im Grunde, das ist es für die Konstruktionsteile. Und im nächsten Teil des Kurses werden wir in den Abschnitt Prototyping springen, und ich werde Ihnen ein wenig mehr darüber erzählen, wie Sie dieses Design wirklichmit einigen grundlegenden Interaktionen und Animationen
zum Lebenerwecken können mit einigen grundlegenden Interaktionen und Animationen
zum Leben und ich werde Ihnen ein wenig mehr darüber erzählen, wie Sie dieses Design wirklichmit einigen grundlegenden Interaktionen und Animationen
zum Lebenerwecken können.
Wir sehen uns dort.
35. Organisation: in diesem Abschnitt des Kurses beginnen
Sie mit dem Prototyping. Und wenn Sie noch nie mit schlechtem Läppen fertig sind, besonders in Adobe X'd. Grundsätzlich müssen
Sie einen Zustand erstellen und dann zu angeben. Wenn Sie sich daran erinnern, was wir zuvor in einem vorherigen Teil gemacht
haben, haben wir
zum Beispieldas Drop-down-Menü
dieses Raums erstellt zum Beispiel und diese Flaggen fallen gelassen. Also im Grunde haben
wir vor und nach dem Zustand der gleichen Flüssigkeit es hier. Dies istbeispielsweise der Vorher-Status für den Raumabschnitt, beispielsweise der Vorher-Status für den Raumabschnitt, und wenn Sie auf diesen Pfeil klicken, öffnet
er den nachher-Status, und nachdem er geöffnet wurde, können
Sie dann auswählen, was Sie tun möchten mit ihm. So zum Beispiel können
Sie
zum Beispielverschiedene Auswahlen wählen, und wir haben Plastikräume und lassen Sie mich schnell überprüfen, was wir haben. Aber wir haben ein klassisches Zimmer, Familienzimmer und Grand Deluxe Zimmer, wie wir es für Wenn Sie sich erinnern, haben
wir den Hintergrund-Schlagschatten genau hier, so dass die Leute es wählen können und es dann
von dort auswählen und dann weitermachen. Wenn sie viel einfacher wollen, klicken Sie auf diesen Text direkt hier unten. Also, das geht es im Grunde um Pro Stepping. Sie müssen verschiedene Zustände erstellen. Also, Adobe X Diacon, wissen Sie, was Sie Ihren Zuschauern zeigen möchten? Also, möchten Sie ihnen dies zeigen
, der im Grunde nicht beschnitten ist, oder möchten Sie ihnen den Abschnitt zeigen, der angeklickt wurde und der
unten geöffnet wurde ? Das ist also, was wir in diesem Teil des Kurses tun werden. Und um loszulegen, müssen
wir unsere Akten ein wenig organisieren. Also, wenn Sie sich erinnern, jedes einzelne dieser Bretter hat einen Namen genau hier an der Spitze . Also, wenn Sie von links nach rechts gehen, haben
wir Logo. Dann haben wir Moodboard Design kurz. Wir haben unsere Drahtrahmenzeichnungen genau hier. Dann haben wir den Drahtrahmen und schließlich haben wir das Design. Was wir also für das Prototyping brauchen, ist, dass wir verschiedene Kopien von diesem Design
mit verschiedenen Zuständen im Inneren erstellen müssen . So werden wir das also machen. Wir werden darauf klicken. Unsere Boardkontrolle tief, und vielleicht können wir diesen einen Prototyp eins nennen oder nur einen oder Curry einmal. Es heißt also, es schütze eins, und dann musst du im Grunde zählen, wie viele von diesen Beispielen willst du zeigen? Also lasst uns zuerst zeigen. Zum Beispiel fallen
Räume herunter, also wird es dieser sein, dann im zweiten Zustand,
oder wir wollen die Flagge Drop-down-Liste anzeigen, damit er das noch einmal kontrollieren würde. Und wir werden das
auch „Protect“ nennen , so. Und wenn Sie zum Beispiel zeigen
möchten, wenn Menschen auf einen dieser klicken, müssen
Sie drei verschiedene Zustände erstellen. Aber lassen Sie uns diesen Entwurf nicht zu sehr bevölkern, und ich werde Ihnen zeigen, wie Sie es dann für diese da unten tun können, weil die Mehrheit der Fraktion tatsächlich dort unten passiert. Also habe ich gerade bemerkt, dass der Boden hier nicht angezeigt wird. Also lasst uns das schnell beheben. Wir haben das Formular auf die Schaltfläche hier klicken, und wir werden das gleiche für diese beiden tun, weil ich vergessen habe, es einzuschließen, wenn wir diese Formularelemente wie so
entwerfen und so. Was Sie wollen, ist, dass wir diesen Staat haben
, der im Grunde der Nordstaat ist, und er ist nicht geöffnet, damit wir ihn mit diesem 1. 1 verbinden können und für jeden von ihnen müssen wir einen zusätzlichen Bildschirm erstellen. Also müssen wir 123 zusätzliche Bildschirme erstellen. Also lasst uns das machen. Und wir können diese nennen. Ja, gehen wir einfach mit den Nummern. Prototyp drei. Machen Sie einfach die Dinge einfach und gut lesbar. So Prototyp für und schließlich Prototyp Fife. Und wenn du etwas verpasst hast, mach dir
keine Sorgen. Sie können immer zurückkommen und einige weitere Duplikate machen und dann zurück springen und diese Änderungen vornehmen. Also, was ich tun möchte, ist, wählen Sie alle von ihnen außer unserem ursprünglichen Design, und bewegen Sie sie einfach eine Berührung nach rechts, so dass wir sie ein wenig besser
von unserem Design und all diesen anderen Elementen trennen können . Und im nächsten Video werden
wir mit unserem Prototyping beginnen, und ich werde Ihnen zeigen, wie Sie einige dieser Elemente verbinden und dann einen
geeigneten Prototyp erstellen können , den Sie dann mit Ihren Kunden teilen können und sie können sie mit diesen Entwicklern teilen , so dass sie die grundlegenden Übergänge sehen können und sie sehen können, was wir denken und
Designprozess dahinter. Also sehe ich dich dort
36. Prototyping 1: Jetzt können Sie sich vorstellen, dass, wenn Sie
zum Beispiel
20 verschiedene Seiten haben zum Beispiel , der Prototyping-Abschnitt möglicherweise zu voll wird. Es ist also immer eine gute Idee, es von Ihrem ursprünglichen Design zu trennen, denn auf diese Weise wird es viel sauberer aussehen, als nur alle zusammen zu
bündeln . Also, was ich eigentlich tun werde, wenn ich den ganzen Weg hinauszoomen, können
Sie sehen, dass ich das Ende von Adobe X'd Leinwand erreicht habe. Also werde ich alles auswählen, und dieses Papier wird sich nicht bewegen. Aber wir werden uns ein wenig später damit beschäftigen, und ich werde sie ganz oben positionieren. So zum Beispiel, wenn wir später zusätzliche Seiten entwerfen, können wir
zum Beispiel,
wenn wir später zusätzliche Seiten entwerfen,
einfach alle diese Prototypen auswählen und dann einfach nach unten verschieben. Und all die Interaktionen, die wir entworfen haben, sind drinnen. Also, was auch immer. Entferne sie auf der Leinwand und sie bleiben immer noch drinnen gehalten werden. Also lassen Sie mich dieses Papier schnell hier bewegen, also ist es von seinem ursprünglichen Standort so innen und stellen Sie sicher, dass es 70. Es ist so, dass es im Grunde ist und eine Sache, die ich vergessen habe. Und das ist es, was ich sage. Das im vorherigen Video, das Sie machen können, ist viele Kopien, wie Sie wollen, ist ich möchte diese
kleine Animation machen , also möchte ich. Wann haben Sie auf diese Pfeile geklickt? Ich möchte, dass sie in der Lage sind, von einem Bild zum anderen und von einer Attraktion
im Grunde zu einer anderen zu wechseln. Also lasst uns noch einen erstellen. Also werde ich einfach auf dieses eine Control D klicken und diesen Prototyp sechs umbenennen. Also, im Grunde, wir weitergehen, wennwir weitergehen,
werden wir anfangen und wir werden in diesen zusätzlichen Animationen erstellen. Lassen Sie uns zuerst von den ersten Dingen beginnen. Wir wollen Räume schaffen, und wir wollen sie nach unten erweitern. Also werde ich auf die Zimmer klicken. Ich werde auf den Abwärtspfeil klicken, und ich werde es vertikal so drehen, und ich möchte es nennen. Halten wir es unten, Arrow so. Und dann werden wir zusätzliche Elemente erstellen, die in unserem
Styleguide im nächsten Abschnitt des Kurses enthalten waren , sowie genau hier in den Komponenten. Also lasst uns gleich hier springen. Also runter Arrow, es ist oben, und was ich tun möchte, ist, dass ich auf dieses Zimmer Steaks klicken möchte, und ich möchte die gleiche blaue Farbe anwenden, wie wir hier sehen, denn wird darauf hinweisen, dass es ausgewählt wurde. Also klicken Sie hier und was wir wollen, ist, hier zurück zu springen und Räume Drop-down zu zeigen . Klicken Sie also einfach direkt dort, und das war's. Was ich jetzt tun möchte, ist, zwei von ihnen zu verbinden, damit Sie sehen können, was es tut. Also springen Sie zurück in den Prototyp-Modus genau hier. Klicken Sie einfach darauf, klicken Sie auf die Zimmer oder auf den Pfeil. Was immer du willst. Ich werde auf den Pfeil klicken. Oder vielleicht können wir auf die Räume klicken, weil dieses Treffziel viel zu klein ist und wir werden sie gruppieren, wenn wir anfangen zu programmieren im Grunde später. Ich meine, sie sind Entwickler wird später angerufen beginnen, und sie werden diese beiden Elemente trotzdem gruppieren, also lasst uns dieses verwenden, weil es viel größer ist zu schlagen. Ziehen Sie einfach und zeichnen Sie es hier, und was Sie wollen ist, dass sie in der Lage sein, tippen, damit sie auf den Text dieses Raumes tippen . Als Nächstes haben
wir die Aktion, also werden wir wählen. Animieren Sie auch, weil, wie ich bereits mehrmals während des Entwurfsprozesses sagte, wenn Sie Ihre Layer denselben Namen haben, sie grundsätzlich gleich arbeiten, wenn Sie später mit der automatischen Animierung beginnen, wenn Sie widerlegen Sie die Tippstufe aus Ihrem Projekt, so im Grunde behalten Sie es, Auto Enemy Ziel wird Prototyp eins Lockerung sein. So, wie das einfach aussehen wird, können Sie auf diese klicken, zum Beispiel können
Sie Grenzen einrasten. Aber
Sie wollen, dass dies aussieht, Lasst uns es behalten. Er ist draußen und dauernd. Lassen Sie uns zum Beispiel 0.46 verwenden. Ich werde hier klicken. Klicken Sie auf die Vorschau und in der großen ist nur ein wenig. Also, wenn ich hier rechts klicke, kannst du sehen, dass der Pfeil gedreht ist, Text ist blau geworden und dieses Drop-down ist von oben nach unten erschienen und lass es uns
umgekehrt machen . Also werde ich auf die Zimmer klicken noch einmal ziehen Zehe hier, und es wird genau die gleichen Stile enthalten, wie wir es vor Jetzt getan haben, wenn ich hier in diesem ersten 1 Klick Vorschau hier lokal geschrien hier klicken. Und wenn ich hier rechts klicke, können
Sie sehen, dass der Pfeil gedreht hat dieses Pop-up hat einen Effekt gezeigt, wie hier wird es dann einfach ausblenden. Also noch einmal, wenn Sie ein bisschen anders erscheinen wollen, können
Sie das auch tun. Und ich werde Ihnen zeigen, wie Sie das ändern können. So, zum Beispiel, Design. Lass es uns so machen und du kannst das im ersten Teil nach oben bewegen. Also in diesem Teil und im zweiten Teil wird
es dann nach unten springen. So können Sie das tun, wenn Sie wollen, und lassen Sie uns schnell zu einem anderen Abschnitt übergehen. Also, wenn die Leute auf diese Flagge klicken, gehen Sie zum Prototyp und ziehen Sie es auf den zweiten Bildschirm und dasselbe wird für diese angezeigt. Und wenn sie auf diese klicken, wird
es das gleiche tun für diese automatische Animation ist aus. Also verwenden wir jetzt genau die gleichen Einstellungen für diesen. Gehen Sie einfach in Sichtweite aus diesem zweiten Staat und Juden, Sprachen fallen nach unten und wir werden das gleiche für diesen Pfeil tun, wie mit ihm für den ersten Pfeil. Also werden wir es umdrehen besonders funktionieren. Und wenn ich das geschlossen habe und zur Vorschauform gehe, klicken Sie hier. Danke, dass Sie spielen. Ich werde nur ein bisschen größer. Also, wenn sie hier klicken und wenn Sie rechts hier klicken, wird
es dieses Drop-down-Menü öffnen. Aber wie Sie sehen können, ist
dieses Drop-Down nicht geöffnet. Wenn ich schließe, bringt
es sie zurück auf meine ursprüngliche Seite. Wenn ich also hier klicke und dann hier klicke, kann
ich baumeln. Klicken Sie hier und klicken Sie hier. Also im Grunde, Sie können mit ihm spielen ein wenig mehr und Sie können wählen, zum Beispiel, verschiedene Sprachen, wenn Sie wollen, um alle ihren Text ändern und spielen mit ihm, so dass Sie besser präsentieren, um Ihre -Client, wenn Sie die Zeit haben. Aber es ist viel einfacher, wenn sie Ihnen das Exemplar zur Verfügung stellen können. Beispiel ZumBeispielist
dies die englische Kopie. Wenn sie Ihnen die originale griechische Kopie zur Verfügung stellen können, wäre
das großartig. Sie können dann einfach alle diese Elemente kopieren und einfügen und sie dazu bringen, Griechisch
anstatt Englisch zu schreiben , damit Sie das dann weiter animieren können. Beispiel ZumBeispiel ist
dies die englische Version, und wenn Sie hier klicken, wird
es dann auf die griechische Version von der Website geändert. Aber wie sie gesagt haben, müssen
Sie Ihren Kunden toe fragen, liefern Sie diese Kopie an Sie, denn wenn Sie Google verwenden, übersetzen Sie natürlich, es wird nicht vorzeigbar und professionell aussehen. Also im nächsten Video, wir gehen weiter und weiter, Hinzufügen sind Übergänge und ich sehe Sie dort.
37. Prototyping 2: Lassen Sie uns jetzt fortfahren und beginnen Sie mit dem Hinzufügen unserer Übergänge. Also im vorherigen Video, haben wir diese hinzugefügt, um Drop-down. Also werden wir ein wenig weiter unten auf einem Set in den vorherigen
Videos zu bewegen . Sie können mehrere Seiten mit dieser genau gleichen Methode hinzufügen und dann einfach diese Schlagschatten hinzufügen. Wenn ich also einfach hier klicke und dann auf einem BG liege und es sichtbar mache, kannst
du sehen, wie das aussieht. Also im Grunde, wenn sie hier klicken, wird
es zeigen, dass dies ausgefallen ist. Und Sie können natürlich das
natürlichIhrem Kunden
zeigen. Aber weil wir im Moment keine zusätzlichen Seiten haben, vor allem diese Zimmer Bages, macht
dieser Effekt wirklich keinen Sinn, weil sie eine Clique mehr lernen und
irgendwo hingehen können , weil wir diese andere Seite noch nicht entworfen haben . Lassen Sie mich das also schnell verbergen und schließen Sie alle diese vorherigen Abschnitte, und was wir eigentlich wollen, ist, diesen zu entwerfen. Also, wie wir das machen werden, ist, naja, deshalb haben wir diese separaten Kopien erstellt. Also in der gerührten Kopie, also beschützen Nummer drei, wir werden es hier finden, also klicken Sie auf die, die ich ein wenig näher zoomen werde, und was ich eigentlich will, ist, ein anderes Bild aufzunehmen. Also werde ich in meinen Bilderordner springen und dieses Lichthaus-Bild finden. Ich werde es drinnen ziehen und ablegen. Sie können den Kurs doppelklicken, Umschalttaste
halten und dann einfach ein wenig nach unten bewegen, so dass es in diesen
Vorschaubereich viel besser passt . Und das nennt man Harmonisten wie Haus. Also werde ich Kontrolle C von der Internetsteuerung treffen. Wir haben es gegründet. Und weil dieser Text für die Dallas ist, müssen
Sie ihn Zehentext umwandeln. Klicken Sie einfach hier. Ich werde in meine Plug Ins springen. Ich werde eine Menge Gips gefüllten Platzhaltertext suchen, Text einfügen, und es wird einige zufällige eine Menge ipsum Text direkt hier einfügen, und das ist im Grunde Ihr zweiter Zustand. Also, wenn die Leute auf die 1. 1 klicken, werden sie hierher kommen, und wenn Sie auf den Zurück-Pfeil klicken, ich meine linken Pfeil, sie werden dorthin zurück gehen, Also lasst uns einfach in unsere 1. 1 Also Prototyp dies ist ein Home-Bildschirm. Also, wenn der Klick auf diesen Pfeil wird es sie direkt hier nehmen, und wir werden mit diesen Einstellungen herumspielen. Also lassen Sie uns für die Lockerung wählen. Was wählen Sie Snap, zum Beispiel, nur um zu sehen, wie das aussieht. Und für die eine zurück, wir werden auf diesen Pfeil klicken und ziehen Sie ihn hier, behalten Sie die gleichen Einstellungen. Dann würde er den Vorschaumodus nur so dass wir sehen können, wie das mit Vergrößern aussieht. Und wenn ich den ganzen Weg nach unten scrolle, können
Sie sehen, wie unsere Website aussehen wird, wie einmal codiert und weil wir alle
diese Abschnitte schön,
klar,
groß gemacht haben diese Abschnitte schön,
klar, klar, . Wenn die Leute
scrollen, nach unten scrollen werden
sie auf einem Abschnitt gehalten und sie gehen zu Fuß. Seien Sie in der Lage, sich Zeit zu nehmen und lesen Sie alle diese Abschnitte schön. Wir haben keine andere Störung und ohne andere Dinge, die von der Seite herausfallen. Im Grunde, wenn sie hierher kommen, können
sie dann auf diesen Pfeil klicken und Sie können sehen, wie die Animation aussieht. Aber ich mag es nicht wirklich. Ich denke, die automatische Animation wird viel besser sein. Also, was Sie tun können, ist einfach auf
diese klicken , weil, wie Sie sehen können, dieser Pfeil geht, schleppen Sie diesen Bildschirm. Also werde ich hier klicken. Ich werde Auto-Animate von hier wählen und dann einfach werde ich einfach auswählen, und ich werde auf dieses klicken und im Grunde in den gleichen Einstellungen wählen. Also ist er draussen. Und jetzt, wenn ich auf Vorschau klicke, mal sehen, wie das aussieht. Also werde ich den ganzen Weg runter gehen. Klicken Sie auf den Pfeil, und wie Sie sehen können, sieht
der Übergang viel sauberer aus, besonders da unten für den Text. Und wie Sie sehen können, sieht
es gut aus. Sie können auch herumspielen und einige zusätzliche Elemente direkt hier hinzufügen. So zum Beispiel können
Sie
zum Beispieldie Moscheen verwenden, um diese beiden Teile zu verstecken. Also der weiße Teil auf der linken Seite, sowie weiße Teil auf der rechten Seite und dann verstecken Bilder dort und dann einfach könnte
eine leichte Show machen und sie so bewegen. Aber es ist schwierig in unserem Beispiel, weil wir diesen Hintergrund-Schlagschatten haben. Sie können auch einige fortgeschrittene Moscheen verwenden, aber ich werde nicht in das gehen, denn dies ist einfach, um den Kunden zu machen, wo, was Sie versucht
haben, zu tun und ihnen einige Optionen zu zeigen. Wenn sie also auf diesen Pfeil klicken, können
sie sehen, okay, ich verstehe es. Es ändert sich von diesem zu jenem und kommt zurück. Die Menschen sind sich also bewusst, was es tut. Also gehen wir jetzt zu diesem Abschnitt und im nächsten Video über, wenn toe einige
zusätzliche Änderungen hinzufügen . Und ich werde dir zeigen, wie es aussehen wird, also sehe ich dich dort.
38. Prototyping: lasst uns nun Feind zu diesen anderen Elementen. Also, wenn Sie sich im vorherigen Video erinnern, haben wir in dieser Folie direkt hier hinzugefügt. So haben wir eine Art Diashow erstellt, so dass Kunden bewusst sind, was wir versuchten, ihre zu erreichen. Also, was wir jetzt tun wollen, ist, diese Drop-Städte von hier unten zu schaffen. Wir haben also im Grunde drei Drop Städte, aber wir müssen auch 1/4 1 Eier erstellen. Also springen Sie in Design eine Grabensteuerung D und doppelklicken Sie hier und nennen Sie diesen einen Prototyp sieben. Und das ist, warum ich mag Adobe X d s o. Viel, weil Sie einfach mit einem Klick auf eine Schaltfläche wechseln von Design Moto Prototyp wieder
verschoben, machen Sie einige zusätzliche Änderungen sie wieder zurück. Es ist wirklich so einfach zu bedienen, also liebe ich es wirklich dafür. Also lassen Sie uns springen Zehe Prototyping-Modus und klicken Sie auf diese 1. 1 Also, was Sie für diesen einen wollen ist, wenn die Leute auf diesen Pfeil klicken, wird
es dann auf den Kopf stellen, und dann wird es dieses Drop-Down-rechts hier angezeigt, Also lassen ist es schnell animieren. Also werden wir diesen Pfeil hier benutzen. Also, wenn ich in ein wenig cool zoomen, so dass Sie Kontrolle toe klik innen halten können. Aber lassen Sie uns das ganze Feld benutzen, weil es so viel einfacher ist. Also werden wir es hierher ziehen, denn, wie Sie hier sehen können, haben
wir unsere kleine hier. Also werden wir Schritt Auto animieren Prototyp für Das ist unser Port ist in 0.4. Also genau die gleichen Einstellungen wie zuvor. Und wir werden anrufen oder Steuertaste klicken Sie auf Insight und ziehen Sie es dann einfach zurück. Und während wir hier sind, können
wir die Animationen auf einmal hinzufügen, damit wir die Kontrolle behalten können. Klicken Sie hier, dann hinzugefügt, um die 2. 1 wie dieses ganze Steuerelement Klicken Sie hier rechts, ziehen Sie es zurück und wir haben zwei weitere. Also die zweite Zehe letzte. Das hier ist also für den Check-out. Sie können die Kontrolle behalten. Klicken Sie nach innen, ziehen Sie es zu diesem, halten Sie das Steuerelement gedrückt, klicken Sie hinein und ziehen Sie es zurück nach Hause und halten Sie die Steuerung gedrückt. Klicken Sie auf die letzte hier gezogene Steuerung und ziehen Sie es den ganzen Weg zurück. Auf diese Weise fügen wir es in die Effektspitze aller unserer Ports. Und nun lasst uns eine Überschrift beginnen und diese Elemente einschließen. Also werde ich in den Entwurfsmodus springen und in diesen springen, denn wie Sie sich erinnern, haben wir die Folie auf diesem einen hinzugefügt. Also werde ich in den Zimmertyp und auf den Import springen. Ich werde die Grenze wieder einschließen, und ich werde Häuser zeigen, die so heruntergefallen sind. Also, das ist es im Grunde. Wir können jetzt auf die 2. 1 übergehen, also 2. 1 ist für den Check-in. Also werde ich die Grenze für den Check-in einschließen, wie so, und ich werde den Check-in-Kalender direkt unten anzeigen. Als Nächstes schließen wir das und verschieben eins, und das wird für die Kasse sein. Also noch einmal, fügen Sie Grenze hier und zeigen Sie Check-out Kalender direkt hier. Nun, bei diesem hier, werden
wir Buch jetzt verstecken, Knopf, oder du kannst es einfach nach unten bewegen, so. Und es wird versteckt bleiben, weil wir diesen Checkout übermäßig aufgenommen haben. Also ist es in der Nähe dieses und schließlich, was wir hier haben, ist diese Zimmerkategorie. Also werde ich die Kontrolle behalten. Ich werde Grenze aus der Eingabe wählen und ich werde den Gästen zeigen Drop-Down-hier . Aber dasselbe, wie wir es vorher getan haben. Einfach dieses Buch Now Button ganz nach unten auf der Rückseite verschoben. Nun, wenn Sie von diesem Schatten verärgert sind, können
Sie einfach den Boden kämpfen, wenn Sie wollen, und dann wieder gezeigt, sobald es ausgewählt. Aber ich denke, es funktioniert gut. Und eine Sache, die ich erwähnen möchte, ist mit diesen Zahlen, damit ich dir zeigen kann, wie du
sie kennenlernen kannst . Und das werde ich jetzt tun. Also, Kontrolle, der Tat, wir sind immer noch im Entwurfsmodus. Also, was Sie hier tun können, ist klicken Sie innen und klicken Sie auf drei, zum Beispiel, wie so Und Sie können dann schließen und Sie können in den Prototyping-Modus springen springen zu diesem ersten 1 Klick auf das Plus und dann einfach ziehen Sie es hier und Sie können verwenden Sie die gleichen Einstellungen und Sie können auf das Minus klicken und ziehen Sie es zurück, und es wird zu erhöhen oder verringern Sie die Zahl von den erwachsenen Gästen. Beginnen wir also von Anfang an. Klicken Sie hier. Ich werde Preview-Modus drücken, um es ein wenig zu vergrößern. Und wenn ich hier klicke, können
Sie sehen, wie es aussieht, wie Sie sehen können, dass die Flagge Pfeil sich umgekehrt dreht
und wir können den ganzen Weg nach unten scrollen. Suchen Sie sind, was Sie in Sanftmut tun können Sie schnell hier. Und wie Sie sehen können, Adobe Ex d. a. Smart, weil es sich die Position von Ihrem Scrollen erinnert. Wenn ich also den ganzen Weg hier und dann hier runter springe, kann
man sehen, dass es meine Seite überhaupt nicht bewegt, weil es weiß, dass ich auf der Bühne von meiner
Seite auf dieser Folie da drüben bin . Also, wie Sie sehen können, sieht
es wirklich schön aus und ich gehe runter und zum Beispiel klicke
zum Beispielauf den Zimmertyp. Wie Sie sehen können, sieht
es gut aus, wenn Sie es schließen, es geht zurück. Und das, was ich vergessen habe, sind die Pfeile. Also lasst uns das reparieren. So finden Sie die 1. 1 Hier ist es, genau hier. Klicken Sie auf diesen Pfeil springen in den Design-Modus und drehen Sie ihn einfach vertikal wie so. Und ich werde das Gleiche für diese Gäste unten tun. Also das ist im Grunde dieser Flip es horizontal, schloss sein Buchungsformular, und ich werde das gleiche für dieses letzte tun. Flip es einfach so auf, und gehen wir zurück zum 1. 1 und schauen wir uns den gesamten Prototyp an. Also werde ich hier weiß klicken, es
vergrößern, und dann lassen Sie uns noch einmal darüber gehen. Wenn ich also auf Zimmer klicke, kannst
du es sehen. ausgewählte Pfeil wird angezeigt, wenn ich auf die Flagge klicke, es hat auch Bereiche ausgewählt, die ebenfalls nach oben kommen. Sie können den ganzen Weg nach unten scrollen, und wir können sehen, wie dieser aussieht. Also, wie Sie sehen können, verändert
es diese Bilder. Wir können nach unten gehen und jetzt zu Hause Typ auswählen. Wie Sie sehen können, ist
der Pfeil nach oben gedreht und wir können darauf klicken und es wird ihn wieder nach unten schließen. Sie können auf das Einchecken klicken. Es zeigt den Kalender, und wie Sie sehen können, hat
die Eingabe den Strich darauf, wie wir wollten. Wenn Sie also klicken, um es auszublenden, wird auch die Höhe im Strich angezeigt. Klicken Sie auf diesen. Es zeigt genau die gleiche Sache und klicken Sie auf die Gäste und wie Sie sehen können,
wird dieser Pfeil zurückgedreht. Also, wenn ich hier rechts klicke, gibt uns diesen seltsamen Effekt mit Buch Now Button. Also, was Sie tun können, um zu beseitigen, dass das Buch jetzt Taste ganz
unten in all diesen sind Ports positioniert ist , und ich werde das tun, weil es wirklich einfach ist, und ich werde zurück springen und zeigen Sie. Aber zuerst. Mal sehen, ob das funktioniert. Also, wenn ich hier klicke, wird
es drei zeigen. Wenn ich hier klicke, geht
es zu Fuß. Springen Sie zurück zu zwei, und Sie können es dann einfach verstecken und es wird verschwinden. Wie Sie sehen können, ist
es wirklich einfach, Prototypen in Adobe X'd zu erstellen, und es wird das zusätzliche Leben für Ihre Designs, die Sie brauchen, geben. Geben Sie dem Kunden zunächst
die Idee ab, wie Ihr Design aussehen wird, sobald er codiert ist. Leider wir immer noch keine animierten GIFs,
Toe Adobe X'd-Dateien hinzufügen . So zum Beispiel eine nette Ergänzung sein, wird
es
zum Beispiel eine nette Ergänzung sein,wenn wir hier eine Art Hintergrundvideo hinzufügen können, denn das wird schließlich ein Hintergrundvideo sein, also könnten wir in Zukunft vielleicht damit herumspielen. Wenn Sie jedoch einige fortgeschrittene Prototypen anzeigen möchten, können
Sie vielleicht zu Adobe Premiere oder Adobe After Effects wechseln und dann Ihre Effekte dort hinzufügen . Aber dann können Clients nicht auf klicken. Ihre Prototypen können Ihnen keine zusätzlichen Kommentare hinterlassen, also können Sie ihnen vielleicht einfach erklären, dass dies ein animiertes GIF oder ein
Hintergrundvideo sein wird , damit Sie mit Ihren Entwicklern sehen können und sie es dort hinzufügen können. Also lasst uns das letzte Ding reparieren. Und das ist dies und Button, so dass ich hier klicken kann, klicken Sie auf das Formular und seinen alten Weg nach unten und dann einfach nach hier verschoben. Schließen Sie alle diese. Schaltfläche „Suchen“. Es ist auf der Rückseite. Klicken Sie hier. Die Formularschaltfläche ist ganz unten. Wir können weitermachen. Klicken Sie hier auf das Forum. Wie Sie sehen können, ist
es an der Spitze, aber wir werden es einfach unten bewegen, und dann werden wir zurück springen und sehen, ob unser Prototyp nur mit diesem Abschnitt
unten funktioniert . Da X während des Diskurses mehrfach erklärt hat, ist die
Positionierung Ihrer Ebenen wirklich wichtig, da Sie auf
diese Weise sicherstellen können, dass diese Animationen tatsächlich richtig funktionieren und Sie nicht etwas haben seltsame Effekte und so seltsame Animationen und dass Sie nicht beabsichtigt sind. also einfach sicher, dass Sie Ihre Elemente in Gruppen so positionieren und benennen, wie Sie es wollen. Er wird Ihnen diesen Vorteil geben, wenn Sie anfangen zu animieren, also werde ich es einfach den ganzen Weg nach unten verschieben und weil es an der gleichen Stelle in allen unseren,
äh, äh, Entwürfen und lassen Sie uns das Gleiche für hier tun, auch wenn es egal ist. Aber wie Sie sehen können, ist
es jetzt genau hier unten. Also lasst uns in Prototyping-Form springen. Klicken Sie hier, dann er in großen es ein wenig zu spielen. Ich werde den ganzen Weg nach unten bewegen und würde nicht direkt hier klicken. Wie Sie sehen können, haben
wir diesen seltsamen Effekt nicht mehr. Und wenn ich hier rechts klicke, wie Sie sehen können, sieht
es gut aus und der Boden bleibt zurück, wie es sollte. Diese Art von einfachen Reparaturen sind also wirklich einfach, wirklich schnell und wirklich einfache Dinge zu tun, so dass Sie dann einfach das Problem lokalisieren und es dann beheben können, während Sie wissen, was es ist. Und deine Entwürfe und die Zehe gehen viel besser aus, als wenn du es im nächsten Abschnitt nicht getan hättest . Abseits des Kurses werde
ich über den Export von Designs sprechen, denn wenn du dein Design fertig hast, es jetzt
flüssig
hast, hast du immer noch den Export, und du musst die Brände für Entwickler vorbereiten, wie sie gesagt haben Sie. Also werden wir uns mit der Ordnerstruktur beschäftigen, die wir uns mit dem Exportieren von Bildern und dem Exportieren von
Assets beschäftigen . Und vielleicht am wichtigsten,
wir werden einen Styleguide erstellen
,den wir werden einen Styleguide erstellen
, wir später in den späteren Phasen des Projekts verwenden werden. Wenn wir einige zusätzliche Seiten hinzufügen und innerhalb dieses Sterns bekam, werden
wir alle Symbole aus den Farben einschließen, den gesamten Text, den wir für dieses Projekt verwenden, weil auf diese Weise es geht, sollte leichter für uns später nach unten die Zeile, wenn wir anfangen, zusätzliche Seiten zu erstellen, um diese Elemente einfach zu kopieren
und einzufügen, und es wird alle Seiten kohärent aussehen und alle Seiten sehen so aus, als ob sie zusammengehören. Also sehe ich dich dort
39. Stil-Leitfaden erstellen: bevor wir unsere Dateien an die Entwickler und endgültige Dateien an unseren Kunden senden, müssen
wir etwas schaffen, das Styleguide und Inside Style Guide genannt wird. Alle Elemente, die Sie während Ihres Entwurfsprozesses verwendet haben, werden einbezogen. So, zum Beispiel, wir gehen toe umfassen verschiedene Fonds und Telefonstile, die wir in verschiedenen Farben verwendet, verschiedene Symbole. Und als wir dann diese endgültige Datei an den Client und seine Entwickler geschickt
haben, werden sie jetzt in der Lage sein, auf all diese Informationen zuzugreifen. Ja, sie können direkt hier im Asset-Panel klicken und sie konnten alles sehen, was hier
enthalten ist . Aber wir gehen auch Zehe sind diese zusätzlichen Gegenstände, weil es viel einfach für
sie , auf zusätzliche Größen zusätzliche Abstände zwischen den Elementen zu sehen und so weiter. Also, was Sie zuerst tun müssen, ist unser Projekt ein wenig besser organisiert, weil dieser Teil auf der linken Seite ein Design ist, und dieser Teil auf der rechten Seite ist ein Prototyp. Also lassen Sie mich schnell alle Prototypen auswählen und einfach nach Hause Shift-Taste und bewegen Sie sie hier . Und wie ich schon sagte, wenn Sie sich an alle erinnern, werden die Interaktionen gehalten und werden, wie wir sie erschaffen haben. Es spielt keine Rolle, ob du die Flughäfen nach unten ziehst , links
oben ,
rechts, sie werden immer noch da sein. So müssen wir jetzt eine neue unsere Ports auf gehen, um hier klicken und klicken Sie auf ein Web 1920 zum Beispiel. Ich werde hier doppelklicken und Styleguide eingeben, denn das ist, wo unser
Styleguide geht, um Einsicht zu geben und ich werde Zehe erweitern es nur ein wenig nach unten. Und da dies keine Seite ist, kann
ich diese einfach gedrückt halten und alles zusammen und innerhalb dieses Styleguides entfernen. Alles aus, die relevanten Informationen werden einbezogen. Aber bevor wir sie einbeziehen, lassen Sie mich schnell Text erstellen. Klicken Sie also auf das Textil, klicken Sie hier und Sie können Design eingeben, steuern Sie A, um alles auszuwählen und vielleicht bei zwei Hunderten oder vielleicht sogar fünf
Hunderten erstellt . So etwas, und Sie können es vielleicht irgendwo in der Mitte positionieren. Sagen wir ja, einige selten hier, und Sie können auch Control de drücken, um diese Position irgendwo hier zu duplizieren und diesen einen Prototyp
nennen, weil auf diese Weise Ihre Kunden und ihre Entwickler in der Lage zu sagen, dass dieser Teil ist das Design. Und dieser Teil ist der Prototyp. Und wie gesagt, weil diese Leinwand wirklich ein großer Raum ist, können
Sie sie positionieren, was immer Sie wollen, abhängig von Ihrem Projekt später. Zum Beispiel,
wenn wir so mehr Seiten hier in der Zukunft hinzufügen,könnte
ich diesen Schutz unten verschieben. Zum Beispiel, wenn wir so mehr Seiten hier in der Zukunft hinzufügen, Aber es liegt wirklich an dem Projekt, und es Anforderungen, also lassen Sie uns schnell den Styleguide erstellen. Also zuerst, was wir brauchen, sind diese Farben. Also werde ich direkt hier in den Asset-Zauber springen, und ich werde erstellen lassen schnell zählt 12 verschiedene Farben. Also werde ich einfach auf T klicken und einen Stern Führer unseren Port Klick t reduzieren diese unten ,
zum Beispiel, 48 wie so und ich kann klicken und tippen Farben. Nein, wir mögen das nicht 48 und positionieren es so, halten Sie Shift. 12345678 zum Beispiel. Dasselbe in diese Richtung. Und ich werde 12 verschiedene Rechtecke erstellen. So etwas wie dieser Hit wiederholen groß und ziehen 12 und wir werden müssen, um
sie ein wenig kleiner zu machen . Also, was Sie tun können, ist auf Gruppenraster und dann ziehen Sie ihn einfach zurück hierher. Oder Sie können die Responsive Größenänderung einfach deaktivieren und dann niedrigere entscheidet sie so. Also stellen Sie sicher, dass Sie 12 haben. Wir brauchen keinen mehr. Also lassen Sie uns schnell dieses letzte Steuerelement D auswählen und es gleich aussehen lassen. Also, wer sind 68 10 12? Und ich werde sie alle so auswählen, und ich werde die Größe wie Seife reduzieren. Also, jetzt, was ich tun muss, ist gehen Sie voran und erstellen Sie sie durch die Farben, so dass ich auf diese
1. klicken Sie auf diese Farbe klicken kann klicken Sie mit der 2. 1 diese Farbe und so weiter und so weiter. Aber lassen Sie mich das Video schnell pausieren und ich gehe Zeh, bestelle diese Farben ein bisschen besser und komm dann zurück. Also, jetzt machen sie ein wenig mehr Sinn, so schnell auf diesem ein, und dann gehen Sie einfach voran und klicken Sie auf alle von ihnen. Und was ich hier getan habe, ist, dass ich vom oberen Blau gegangen bin, das ist unser Hauptblau, und ging den ganzen Weg nach unten. Aber als ich das tat, bestellte
ich sie von dunkler er Zehe hellste Farbe. Also, in jedem Fall, wenn Sie eine dieser Farben benötigen, können
Sie schnell von hier aus zugreifen, sowie über das Assets-Panel selbst. Ich werde alle auswählen und die Grenze entfernen, weil es auf diese Weise nicht viel sauberer
aussieht . Aber ich werde die Grenze für die weiße Farbe behalten, weil wir in der Lage sein müssen, sie zu sehen. Also eine andere Sache, die Sie tun können, ist, dass Sie diesen Text duplizieren und auf eine frühere
Sonderposition springen können , es so. Und wir werden die Größe reduzieren, zum Beispiel, um ich weiß nicht, 24. Sehen Sie, wie das aussieht. Es funktioniert gut, und ich werde die Farbe weiß wählen, und ich werde diesen Hex-Code eingeben, und Sie können es auch von hier aus cop und dann befestigen Sie es hier und stellen Sie sicher, dass es weiße
Farbe ist wie die positionierte in der Mitte, und ich werde genau das Gleiche für all diese anderen Farben tun. Also werde ich das Video pausieren und dann zurückspringen. Das tat es jetzt. Unter Ich kann einfach wählen Sie alle sie Hit Control G Gruppe sie, zog es nach unten und benennen Sie es Farben wie So jetzt müssen wir die verschiedenen Fonds erstellen, Also werde ich Steuerung D treffen und genau in dem gleichen Abstand wie diese machen. Aber wir werden hier verschiedene Telefone einschließen. Also werde ich aufhören, Florenz zu sprechen und stellen Sie sicher, dass es links ausgerichtet ST wie diese 1. 1 und einfach bewegen, bis es hier trifft jetzt für die einmal. können wir ganz einfach tun, indem wir auf alle diese Zeichenstile klicken. Also werde ich Kontrolle D treffen und wir mögen es nicht. Und wie Sie sehen können, fehlt
uns der Charakterstil für unsere Titel. Also werden wir hier zu springen, klicken Sie darauf hinzugefügt, um hier. Also haben wir Spiel für die Anzeige wie diese, sowie spielen für die Anzeige wie diese. Also fangen wir mit dem an, damit wir es Flugpreis so nennen können, und ich werde es so positionieren. Und weil dieser weiß ist, wird er nicht wirklich gut lesen. Aber wir gehen nur in diesem dunklen hier. Also werde ich die Kontrolle bekommen, De Duplicated, machen genau sagen Abstand und gehen von 1 zu 1. Also dieser hier ist regelmäßig, wie Sie hier sehen können. Sie sind also eckig und das Spiel für die Anzeige war fett, kursiv wie folgt. Wir werden diese eine Abwärtsposition so duplizieren, dass
dieser offene Sinn kursiv ist , und wir werden dasselbe tun, und dieser hier ist fett. Habe ich. Joel de dupliziert hier, und das hier ist weiß, also werden wir es nicht einschließen. Aber im Grunde ist es regelmäßig und wir haben es bereits hier. Und das ist regelmäßig, und schließlich werden
wir es noch einmal duplizieren. Wir können diesen einbeziehen, wenn wir wollen, aber wir wollen nicht, und wir sind im Grunde fertig. Also lasst uns das entfernen. Und jetzt, was Sie tun können, ist an der Größe. Wie Sie sehen können, ist
es bei 70, so dass Sie zum Beispiel 70 eingeben können, und für diesen einen Union-Typ in 36 für diesen haben Sie auch 36 eingegeben. Dieser ist 24 und dieser ist auch bei 24 Uhr. Also, was Sie jetzt tun können, ist einfach eine Reihe von Text zu zeichnen oder erstellen und, uh, verschiedene Absätze für all diese verschiedenen Telefongrößen und legen Sie sie unten. Aber ich werde das so verlassen, wie es für jetzt ist, genauso wie bei den Farben, weil wir immer noch nicht mit den Farben fertig sind. So mögen die Kunden vielleicht nicht. Einige dieser Farben, die wir erstellt haben, mögen diese vielen Variationen nicht grau, also werden wir es einfach so lassen, wie es für den Moment ist. Und normalerweise haben wir jemanden wie fünf oder sechs Farben. Mann, wir haben so etwas wie zwei oder drei verschiedene Formfamilien und zwei möglicherweise drei Wege diesen Telefonfamilien entfernt. Also werden wir sie verlassen, wie sie es vorerst sind. Als nächstes brauchen
wir Symbole mit Let's first group, all dies zusammen Also zentral de und gehen, um diese Auferlegung es so zu duplizieren, und wir werden all dieses Steuerelement G. Geben Sie Fronten wie so eingeben Farben gehen, um in Farben gehen, Ordner und Jetzt werden wir Symbole erstellen und wir haben eine Variation oder verschiedene Symbole. Aber ich werde jetzt voran gehen und sie alle auswählen. Also ist es auf dieser einen Kontrolle, siehst du? Klicken Sie hier, steuern Sie V und Sie können darauf klicken und dann ziehen Sie es in der Nähe der Spitze. So wie so. Aber weil dies ein kleineres Symbol ist, werde
ich einspringen und diese größeren auswählen. So schlimm. Essen und Strand. Ich werde die Kontrolle treffen. C traf genau hier. Control V N wird sie an genau der gleichen Stelle positionieren. Ich werde sie hier herumfahren und sie dann einfach viel näher bringen. So etwas wie das ist ein guter Beat. Ich kann es nicht so machen und du hast es geduldet. Stellen Sie sicher, dass sie sich auf der gleichen Entfernung befinden, und Sie können sich dann bewegen und diese
anderen zusätzlichen Symbole einschließen . Also, was wir im Grunde haben, ist dieser Pfeil. Wir werden nur ein bisschen nach unten gehen. Wir haben diesen Pfeil, also kontrollieren. Siehst du, ich werde hier reinspringen. Hit Control V, und ich werde es später etwas besser positionieren. Aber jetzt lassen Sie uns zuerst auch die anderen auswählen. Also im Grunde haben
wir diese Variation von diesen Pfeilen. Wir machen Kopien von ihnen, und das war's im Grunde. Wir haben nur diese Social-Media-Symbole hier in der Fußzeile, also werde ich kopieren. Ich werde all diese Ordner schließen, alles schön und sauber aussehen
lassen, direkt hier
springen und die Kontrolle treffen. Veto hat sie eingebaut. Und schließlich werde
ich eine dieser Farben wählen, um sie so ein bisschen sichtbarer zu machen. Und jetzt lassen Sie uns schnell Variationen für diese verschiedenen Symbole erstellen. Also, wenn ich hier springe, ist
das kein Pfeil nach unten. Wenn ein Treffer-Steuerelement und D und bewegen seine etwas Rock, es bewegt sich bei 70 Pixel, zum Beispiel. Es wird Pfeil nach oben sein, also kippen Sie es einfach hier um. Es wird so hoch sein wie die meisten von ihnen. Ich werde Control de move treffen. Es sind so im Grunde 70 Pixel wie diese und wir werden es horizontal oder vertikal drehen . Oder Sie können es einfach so drehen und es wird ein richtiger Terror wie so sein. Und eine letzte Sache, die wir brauchen, ist ein Pfeil nach links, also werden wir einfach dieses hier bewegen und es wird nach links Pfeil sein oder halten Sie diesen rechten Orton Flip dieses hier so und Namen links und schließlich tun das gleiche für diese Eins. Also 70 wie dieses Es ist Pfeilsteuerung De Flip es wie so stellen Sie sicher, dass es bei 70 wie diese ist. Und das wird wie dieser Pfeil nach rechts sein. Und schließlich haben
wir Social-Media-Icons. Ich werde sie hier unten verschieben. Stellen Sie sicher, dass sie bei 70 sind. So wie das. Ungh. Gruppieren Sie sie. So haben wir Facebook, Twitter, Instagram und YouTube am Ende. Das sind also unsere Ikonen. Gruppe schwächen All dies zusammen traf Kontrolle G nach unten unten Sequenz. Und was wir zuletzt für diesen Styleguide erstellen müssen, ist Schlagschatten zu erstellen. Also müssen wir die Schlagschatten einbeziehen, die wir für diese verschiedenen Elemente erstellt haben. Also, wie wir das tun können, ist einfach ich kann hier klicken. Suchen Sie den Raum ein BG traf Kontrolle C, um es zu kopieren. Ich werde hier reinspringen. Hit Control V und ich gehe in die Zehenposition. Es ist so etwas. Ich gehe mit den Zeh. Geben Sie es. Zum Beispiel 50 wits 50 oder das ist zu klein. Es wird 200 wits 100 verwendet und ich denke, das sieht viel besser aus. Aber lasst uns Quadrate benutzen. Also gehen wir mit fünf Wochen Feuer so etwas, und wir werden diesen Text kopieren. Also drücken Sie Control D Verschieben Sie es so außerhalb des Ordners, dann verschieben Sie es einfach nach unten in die gleiche Entfernung. Und das wird fallen. Schatten sind einfach Schatten wie diese, und ich werde das hier bis hierher bewegen. Und wenn Sie es sehen können, weil es weiß ist, können
Sie dann einfach einige dieser anderen Farben wählen, um es ein wenig
sichtbarer aussehen zu lassen. Aber ich denke, es sieht gut aus. Lassen Sie uns für die für so verwenden, weil wir ein bisschen mehr Platz brauchen. Wärmeregler D Positionieren Sie es irgendwo wie 70, da wir diesen Abstand für die Symbole
oben verwendet haben . Troll D 70 verdiente die Kontrolle D 70 so,
und was wir brauchen, ist, dass wir diesen ersten Schlagschatten für die 1. 1 Also Hit Kopie verwenden. Klicken Sie auf diesen einen Rechtsklick und dann basierend, und wir müssen dies für die Schaltfläche verwenden. Also Rechtsklick kopieren, Rechtsklick Einfügen Aussehen wird sich ändern, aber Sie können diese Farbe verwenden, aber nur halten Sie sie den gleichen Schatten. Wir haben das hier, weil es dieser ist. Und schließlich, lasst uns einige dieser anderen verwenden. Also lassen Sie uns dieses verwenden, zum Beispiel, weil es nur ein wenig anders ist als die Stopp-Taste. Und ich werde hier klicken basierend Aussehen und noch einmal ändern Sie es auf diese Farbe so dass Sie schnell finden können, wenn Sie den richtigen Job gemacht haben. So Zelt und 20 55 20 10 10. 20 Damit wir diesen schnell löschen können. Und das sind 55 20. Also, das ist es im Grunde für unseren Styleguide. Sie können dann alle schließen, damit Sie sehen können, dass wir diesen seltsamen Fehler hier haben. Aber Sie können hier doppelklicken, reduzieren Sie die Größe von Ihrem Styleguide irgendwo hier herum, und da gehen Sie. So können
Sie wieder verschiedene Absätze mit Ihren Telefonen erstellen. Sie können sie in verschiedenen Farben zeigen. Sie können sie auf verschiedene Arten zeigen. Also, zum Beispiel, wenn Sie Playfair Display haben, können
Sie es rechts hier oben und dann auf der linken Seite zeigen Playfair Display regelmäßig auf der rechten Seite zeigen Playfair Display Bolzen unten zeigen, fett, kursiv und so eins. Aber ich zeige gerne die Telefone, die ich normalerweise benutze. Und ich mag es, die Telefone so zu zeigen, weil Entwickler es bekommen und ich werde Ihnen in
einem der nächsten Videos zeigen . Wenn wir teilen sowohl für Kunden als auch für Entwickler. Sie werden alle relevanten Informationen in diesem freigegebenen Link erhalten,
so dass sie in der Lage sein werden, zu sehen, welche verwendet wurden und welche Größe es ist. Im nächsten Video werden
wir das Teilen mit dem Kunden abdecken, und wir sehen uns dort.
40. Teilen mit dem Kunden: Jetzt müssen wir unsere Arbeit mit dem Kunden für die eigentliche Überprüfung teilen, bevor wir ihnen die
endgültigen Dateien senden . Also, wie Sie das tun können, ist, dass Sie in einen Prototyp-Tab springen können. Sie können auf den ersten Bildschirm klicken, und in unserem Fall ist
dies unser erster Bildschirm, denn, wie Sie sehen können, gehen
alle diese Pfeile von ihm und ich kann klicken, dann teilen. Und wie Sie sehen können, können
Sie Zeh einladen. Fügen Sie es hinzu, damit Sie andere Designer Toe einladen können. Bearbeiten Sie diese Datei, während Sie die ursprüngliche Dateifreigabe noch zur Überprüfung beibehalten, die Sie auswählen möchten Sie können diese Datei für Ihre Kunden freigeben. Sie können für die Entwicklung teilen, was im Grunde dasselbe ist, aber mit vielen technischen Details. Und ihre Entwickler können verschiedene Abstände Größen für die Fonds sehen. Verschiedene Farben, Ränder, Bettwäsche und so weiter. alles ist also für sie. Sie können Link verwalten, so dass alle Links, die Sie freigegeben haben, und dies ist wichtig. Wenn Sie auf einem kostenlosen sind, werden
sie Exit-Plan sein, weil Sie nur eine Freigabe für die Überprüfung und eine Freigabe für die
Entwicklung Link haben können, und schließlich können Sie hier klicken, um das Video aufzunehmen. Wenn Sie eine Tour zeigen möchten, können
Kunden, wie Ihr Prototyp und Ihr Design aussehen werden, wie einmal codiert, und Sie können
dann senden Sie ihnen das Video, wenn sie aus irgendeinem Grund nicht auf diesen Prototyp zugreifen können. Aber wie gesagt, wir werden auf teilen klicken, um zu überprüfen und dann können Sie einige weitere Dinge ändern. Also jeder mit Lincoln View oder nur eingeladene Personen kann sehen, ob Sie die 2. 1 auswählen, die Sie haben toe, geben Sie E-Mail-Adressen von den Personen ein. Sie wollen diesen Prototyp sehen. Wenn nicht jemand mit dem Link kann diesen Prototyp anzeigen. Sie können es anders nennen, als wenn Sie wollen Wenn ich
also etwas näher heranzoomen, können
Sie sehen, dass wir ein gutes,
ehrliches Boutique-Hotel haben . Also fangen wir an, das zu sein, weil es viel schöner ist, wenn Sie den Namen von Ihrem
Kundenprojekt direkt hier haben . Denn später werden
Sie in einer Minute sehen, wenn sie das Projekt öffnen, werden
sie in der Lage sein, zu sehen, wie das aussieht und den Namen von diesem Projekt. Als Nächstes. Wir haben Kommentare erlaubt, damit Sie Personen erlauben können,
Ihr Design zu kommentieren Wenn Sie Feedback von Ihrem Kunden erhalten möchten, zeigen Sie Hot-Spot-Hinweise an, die darauf hinweisen, wo sie klicken müssen, damit die Übergänge können passieren. Navigationssteuerelemente anzeigen, denen es sich um Steuerelemente am unteren Bildschirmrand handelt. Einige hier. Und das ist wichtig. Und ich mag es, das zu behalten, weil manchmal Client-Clients verwirrt sind, wo
sie klicken sollen ? Weil sie dabei verloren gehen. Wir haben im Vollbildmodus geöffnet, was ich nicht empfehle, da diese Navigationssteuerelemente
auf diese Weise ausgeblendet werden und Sie später im Vollbild in zweiten Internment-Interaktionen oder so etwas anzeigen können , wenn sie bereits mit den Adobe ecstasies Steuerelementen und sie wissen, wo sie klicken müssen. Und schließlich haben
wir Reisepass benötigen, die im Grunde jeder mit dem Pass öffnen kann. Jeder, der das Kennwort hat, kann nicht geöffnet werden und kann dieses Projekt nicht sehen. also schließlich aktiviert und deaktiviert haben, Wenn Siealso schließlich aktiviert und deaktiviert haben,dass alles den Titel Ihres Projekts enthalten hat, können Sie auf Link
erstellen klicken , und der Lin-Erstellungsprozess wird von verschiedenen Gründen variieren. Der erste Grund ist Ihr Computer, also wenn Sie einen langsamen Computer haben. Es wird auch länger dauern, wie groß das Projekt ist. Also im Moment haben wir nur diesen einen Bildschirm im Grunde mit verschiedenen leichten Abweichungen darauf , so dass es viel schneller sein wird. Aber stellen Sie sich vor, wer zum Beispiel 100 oder 200 Bildschirme hat. Es wird viel schwieriger für sie sein. Generieren Sie diesen Link und wie schnell ist Ihre Internetverbindung Geschwindigkeit. Behalten Sie also all diese Dinge im Hinterkopf, und sobald es 100 erreicht, wird es die Verbindung erzeugen. Und sobald es so ist, werden
Sie so etwas sehen. Wenn Sie also Ihre Änderungen vornehmen, können
Sie genau den gleichen Link verwenden, indem Sie einfach auf Update klicken und ihnen dann den neuen Link senden und dann können Sie für Sie aufgehört haben. Dann können Sie an der Stelle weitermachen, an der Sie das letzte Mal aufgehört haben, da die letzten
Änderungen aktualisiert werden , die gerade in Adobe X'd vorgenommen wurden. Aber für diese 1. 1 können Sie einfach auf diesen Link klicken, und er öffnet ihn in Ihrem ausgewählten Internet-Browser. Es ist Google in meinem Fall, und wie Sie sehen können, haben
wir den Projektnamen direkt hier an der Spitze erklärt und es schafft viel mehr Vertrauen zwischen Ihnen und dem Kunden. Wenn Sie die Aufmerksamkeit auf die kleinen Details wie das zahlen, so können wir nach unten scrollen und Sie können sehen wie es aussieht. Wenn dies der Vollbildmodus war, als all dies von Ihrem Design genommen würde, können
Sie die Navigationssteuerelemente direkt hier unten sehen. Dieses Heim-Icon bringt Sie zurück nach Hause. Und wir haben neun verschiedene Bildschirme in unserem Fall. Also lassen Sie mich wieder an die Spitze gehen und lassen Sie uns einige dieser Animationen testen, die wir gerade in X'd
erstellt haben. Also, wenn ich hier klicke, können
Sie sehen, dass es uns zum Prototyp einen Bildschirm führt
, der der nächste Bildschirm in der Reihenfolge ist, und es zeigt all diese anderen Informationen. Wenn ich hier klicke, wird
es uns zurück zum ursprünglichen Bildschirm bringen. Dies ist der Prototyp, den Sie sehen können, und wir können uns bewegen. Willst du ein bisschen runter, und ich kann dir die anderen Animationen zeigen, die wir erstellt haben. Also für diesen, zum Beispiel, wenn ein Klick hier, wird
es den Prototyp drei ändern. Sie können es genau hier und hier sehen. Wenn ich hier klicke, wird
es uns zurückbringen. Lassen Sie uns einfach schnell entscheiden. Also, wie Sie es sehen können, springen Sie zurück zu hier und es gibt mir eine Art von seltsam wischen wischen, weil es nicht die
Position behält , wenn ich direkt hier springe, während es in Adobe X'd tat. Also werde ich reinspringen und sehen, was es ist. Aber im Grunde kann
man sehen, was es tut. Sie können hier klicken, und es wird Sie brauchen, um zu hören, aber es behält nicht die Position beim Scrollen, und wir müssen das nächste Mal beheben, wenn wir an den Client gesendet. Aber das ist es, im Grunde, und wenn Ihr Kunde möchte, dass Sie Änderungen vornehmen,
denken Sie, es ist einfach auf diese Drehung klicken. Platzieren Sie es irgendwo hier und tippen Sie. Zum Beispiel, ändern Sie diese Farbe in eine dunklere Farbe, vielleicht drücken Sie Senden, und wenn Sie das nächste Mal auf diesen Bildschirm klicken, wird
es Sie zu diesem Kommentar führen. Also, zum Beispiel, wenn ich auf der Bildschirmnummer bin, sagen
wir sechs. Ich sehe einen neuen Kommentar. Ich kann darauf klicken und es wird mich zurück auf den ursprünglichen Bildschirm bringen, und ich kann dann klicken und finden Sie die Kommentare auf Dies ist es. Wenn ich den Mauszeiger darüber schreibe, kann
man sehen, dass sich diese blaue Farbe ändert, wie Sie hier sehen können, damit wir wissen können, dass dies der Kommentar auf diesem bestimmten
Bildschirm ist . Das war's also. Grundsätzlich funktioniert
für die Freigabe und das Teilen genau das gleiche für die Entwickler. Also, wenn Sie zurückklicken und drücken Sie teilen ein weiteres Mal, teilen für die Entwicklung, können
Sie die Einstellungen im Grunde für Web exportieren. Also müssen wir für Websites im Grunde exportieren, und Sie können hier verschiedene Variationen wählen. Also für IOS oder Android, aber wir müssen für Web noch einmal exportieren benötigen Pässe, so dass Sie ein neues Passwort
direkt hier erstellen können . Fügen Sie Assets für Donald ein, und es wird PNGs sowohl ein als auch zwei erstellen, ein schnelles F. Und noch einmal, jeder wird Lincoln View und Onley eingeladene Leute sagen können sehen, also das ist Im Grunde ist es für die Freigabe für die Client-Interaktionen und für die Kommentierung, und ich muss diesen Fehler beheben, aber es basiert im Grunde auf der Scroll-Position,
Also, wenn ich zurück rechts hier, Prototyp, klicken Sie rechts hier und wenn ich den ganzen Weg nach unten gehe und wenn ich hier rechts klicke, wie Sie sehen können, zeigt
es diesen Fehler nicht in Adobe X'd an. Also genau hier. Alles funktioniert einwandfrei. Aber wenn Sie online springen und das dem Client zeigen, zeigt
es diesen Fehler an. Also wirst du diese Kiste von Zeit zu Zeit haben. Aber in diesen Fällen können
Sie einfach Video drücken, teilen und dann aufgezeichnet. Und dann kannst du das Video von deinem Prototyp aufnehmen und ihnen das Video schicken und
ihnen zeigen , wie es läuft. Toe sehen aus wie einmal codiert, weil wir halten Scrollen Position, wenn wir mit dem Prototyping beginnen und das ist es. Behalten Sie also die Bildlaufposition. Aber Sie müssen in verschiedenen Elementen wählen. Also, wenn ich hier klicke, wird
es nicht angezeigt und so weiter. Also vielleicht nehmen Sie das Video in einigen Fällen besser als andere. Weil, wie Sie gesehen haben, wenn ich nicht auf teilen,
teilen Sie zur Überprüfung und wenn ich auf diesen Link klicken und wieder mit sprang und Ihnen zeigen, wie es so
aussieht, wenn ich den ganzen Weg zu hier springe, wo die Sanftmut ist, Wenn ich hier klicke, können
Sie sehen, dass es die Scrollposition behält, so dass es auf genau der gleichen Seite funktioniert. Es funktioniert, aber auf anderen Seiten funktioniert es nicht. Sie haben also Abschlepparbeiten mit diesen Bugs, und wenn Sie sie entdecken, ist
es wirklich eine viel einfachere Möglichkeit, nur das Video aufzunehmen und dann das Video an Ihren
Kunden zu senden, damit sie es überprüfen können, wenn sie mit dem Springen Scrollen verärgert sind Position. Es liegt also wirklich an Ihnen und Ihrem Klienten. Im nächsten Video werde
ich Ihnen die Verpackungsstruktur für Assets exportieren und im Video zeigen. Danach exportieren
wir Assets für Entwickler, und wir sehen uns dort.
41. Verpackungsstruktur: Lassen Sie mich wissen, zeigen Sie Ihnen schnell die Paketstruktur, weil Sie diese Dateien
an unsere Kunden sowie an ihre Entwickler senden müssen , also müssen Sie diese Struktur auf eine logische Weise erstellen, damit jeder Beteiligte sie
verstehen und verwenden kann direkt nachdem Sie die Erstellung abgeschlossen haben. Also habe ich diesen Assets-Ordner erstellt, und wenn ich hineinspringe, haben
Sie den Homepage-Ordner, weil wir derzeit nur Homepage haben, und Sie können sich vorstellen, dass später, als wir alle diese anderen Seiten entworfen haben, Wir werden alle diese anderen Ordner zu einer Firma haben, die so, wenn Sie in die
Homepage springen , können
Sie Icons Ordner sowie Bilder Ordner haben. Jetzt können Sie die ursprünglichen Eier platzieren, hier
verunstalten, oder Sie können separate Dateien erstellen und sie direkt hier ablegen. Aber ich empfehle es nicht, weil Eier gut mit vielen Elementen umgehen, wie Sie bei unserem Design im Schutzprozess gesehen haben. Also im Grunde genau hier im Ordner „Assets“ können
Sie Ihr Originaldokument erstellen und es dort ablegen. Wenn Sie also in die Homepage s