UX Design Grundlagen - Erstellen eines reaktionsschnellen Prototyps in Axure RP | Sofia Michili | Skillshare
Drawer
Suchen

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

UX Design Grundlagen - Erstellen eines reaktionsschnellen Prototyps in Axure RP

teacher avatar Sofia Michili, UX l Product Management | Service Design

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

    • 1.

      Was ist Prototyping?

      0:52

    • 2.

      Axure RP installieren

      2:35

    • 3.

      Erste Schritte mit Axure RP

      14:26

    • 4.

      Mobiles prototype

      22:26

    • 5.

      Tablet

      7:44

    • 6.

      Desktop

      10:39

    • 7.

      Veröffentlichen und Teilen deines Prototyps

      6:02

    • 8.

      Kursprojekt

      0:45

    • 9.

      Nächste Schritte

      0:14

  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Jedes Niveau

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

150

Teilnehmer:innen

--

Projekte

Über diesen Kurs

Hast du schon immer deine Ideen visuell kommunizieren wollt, aber denkst du, dass du gute drawing haben musst? Hast du dich doch einmal erklärt, aber stattdessen etwas anderes entwickelt zu bekommen?

Indem du lernst, wie du interaktive Prototypen erstellen kannst (auch als Mockups oder Drahtrahmen bekannt) kannst du deine Gestaltungsideen schnell und visuell kommunizieren, und zwar zu niedrigen Kosten und zu niedrigem Aufwand. Du brauchst kein Designer zu sein, um einen Prototyp zu erstellen, du musst nur wissen, wie du es machen kannst. In diesem Kurs bringe ich dir bei, wie du in weniger als einer Stunde einen interaktiven und reaktionsschnellen Prototypen erstellen kannst, damit du lernen kannst, dass du dir Prototypen schnell und einfach erstellen kannst. Das Werkzeug, das wir verwenden sind Axure RP.

Dieser Kurs erfordert KEINE vorherigen Erfahrungen und kann von allen gefolgt werden. Erkunde die Kraft von Prototypen als eine Methode der Kommunikation deiner Ideen und du wirst sehen, wie hilfreich es ist, in deiner Arbeit voranzukommen und schnelles Feedback zu bekommen.

Extra Ressourcen

Axure zu adaptiven Ansichten für responsives Design https://www.axure.com/support/reference/adaptive-views

Andere gute Prototyping-Tools

https://www.invisionapp.com/

https://www.sketchapp.com/

Themen in Bezug auf diesen Kurs

  • Interaktionsdesign
  • Prototyping
  • Sich anpassendes Design
  • Wireframes
  • Benutzererfahrung
  • Benutzeroberflächendesign

Triff deine:n Kursleiter:in

Teacher Profile Image

Sofia Michili

UX l Product Management | Service Design

Kursleiter:in

My vision is to improve people's lives through technology and my passion is to create digital experiences that customers love. I'm currently developing my own tech product, aiming to bring more transparency in the use of personal data apps and websites have on users. 


With more that 7 years of experience in tech companies creating tech products, I have gained expertise in UX, CX, Product Management and Agile. I am certified UX professional by the Nielsen Norman Group UX, and have obtained the Interaction Design Certification from UC California, at Coursera. Currently, I am improving the usability and conversion rates of the Proximus webshop using data, UX, CX and agile techniques, which has already lead to a significant increase in the online sales of mobile su... Vollständiges Profil ansehen

Skills dieses Kurses

Design UX/UI-Design Prototyping
Level: Beginner

Kursbewertung

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen auf Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Was sind Prototype?: Willkommen zu Problemen Klopfen Grundlagen. Ich bin Sophia Me. Er hat den Mann wirklich aufgehalten. Es ist Erfahrung in User Experience Design und seine Problemtypen haben eine Medaille an Kommunikation mit Kunden, um Menschen vor der Entwicklung zu bekommen. Was ist der Prototyp? Protect ist eine Simulation, wie Dinge Bruder aussehen wird, und es ist eine häufig verwendete Botschaft. User Experience Design Frau Total Acting Nützlicher Bruder Typ Hilft saubere Entwicklungskosten macht die Kommunikation mit Stakeholdern und Kunden einfacher und hilft, medizinische Ideen und Konzepte zu testen , , um ihre benutzerfreundliche und Verlangen. In diesem letzten werden wir einen Prototyp einer Business-Website in Tablet, Mobile und Desktop erstellen müssen . Es wird nicht benötigt für diese letzte und keine Programmierkenntnisse bis zum Ende dieser Klasse erforderlich und sollte in der Lage sein, Ihre eigenen Prototypen und sicherlich mit Ihren Kollegen und Kunden zu erstellen . Lasst uns loslegen 2. Axure RP installieren: bevor wir mit der Schaffung unserer ersten Frau beginnen können, müssen wir für diese Klasse einen Zusammenbruch haben. Ich werde die eigentliche Therapie als unseren Salter nutzen, um Freunde zu erschaffen. Wir können den Stuhl von ihrer Website herunterladen. Eigentlich ist das mein Lieblings-Prototyping-Tool. Da es viele Funktionen für die Teamarbeit, die Veröffentlichung und für die Erstellung von Dokumentation hat. Das Tool ist sehr einfach zu bedienen, einfach zurück und Drop Funktionen von der linken Seite des Bildschirms Es hat viele verschiedene Zustände, . so zum Beispiel können wir zum Beispieleinen Bildschirm basierend auf verschiedenen Zuständen ändern. Wir können auch Fließdiagramme erstellen, zum Beispiel Bedingungen. Zum Beispiel. Wir können Formulare validieren, die wir können und die Richtungen auf dem Gipfel. Wir können die USA ändern . Sie können auch hier sehen. Wir können den Colton dynamisch machen. Wir können verschiedene Feeder, verschiedene Drop-Down-Listen helfen . Es ist sehr, sehr flexibel. Es ist auch sehr einfach zu teilen. Dies Dateien die 15 Mitglieder, weil Sie mich auf der tatsächlichen Freigabe-Laufwerk online veröffentlichen können. Wenn Sie bekommen, dass Sie ein Link, den Sie betroffen sind, kommen Schutz auch möglich und grundsätzlich Empfehlung sein . Es ist auch gut, weil Sie Benutzerflüsse modellieren können Wie der Benutzer auf der Website navigieren soll . Was sind die nächsten erlaubten Zustände? Wenn die Benutzer auf bestimmten Artikel Website und es war eine mögliche allgemeine Dokumentation Bedeutung, zum Beispiel, können Sie Dokumentation in einer Station mit allen Bildschirmen aus Markups generieren, die Sie gemacht haben und dann einige Erklärung unter haben Debatten darüber, was diese Seite soll, und dies kann ein sehr guter Weg sein. Informieren Sie die Entwickler, wie sie im Grunde Website sein müssen. So ist es besonders nützlich, wenn Sie mit Dingen arbeiten und dann last but not least, Sie können auch HTML-Code generieren, was bedeutet Wenn wir hier diese Seite erstellen, zum Beispiel können wir Marketing-Gates sie generieren und Gold für es. Es ist also eine sehr, sehr kalte Zukunft, wenn Sie Todeswebsites erstellen möchten und ich nicht viel Geld dafür ausgeben möchte. Es ist wirklich großartig für Zusammenarbeit und schnelles Prototyping. Und es ist in der Tat die Notwendigkeit, ST Leader, wie sie sagen. Also lade ich Sie ein, die Testversion herunterzuladen, also gehe ich jetzt runter. Es ist auch, dass ich es installieren werde. Gehen Sie zurück zu Ihnen mit Nicht anfangen 3. Erste Schritte mit Axure RP: Ich bin jetzt in Seoul, Doktor, mein Computer und ich bin bereit, Ihnen zu zeigen, wie Sie Prototypen bekommen können. Mit dem ersten Mal öffnen Sie. Eigentlich, da du dein Computer bist, wirst du diese Arbeit auf meine Sitze bringen. Wenn Sie eine Testversion verwenden, werden wir feststellen, dass Sie 30 Tage verbleiben, damit Sie eine Lizenz oder ein Ende der Lizenz erwerben können Behalten Sie Ihr Problem alles, was Sie in das persönliche Konto schauen können, . aber Sie tun es nicht für diese Demo und Sie können immer noch verwenden, um für 30 Tage ohne Probleme versuchen . Grundsätzlich können Sie hier entweder kannte fünf erstellen oder vorhandene Dateien öffnen. Im Moment haben wir keinen Kampf, Skip, Skip, also würden wir für Sie kämpfen gehen und Sie werden auch dieses interaktive Schritt für Schritt Tutorial bekommen , das Ihnen erklärt, das Ihnen erklärt, wie gibt tatsächlichen missbräuchlichen oder Sie, Wenn du dich entschieden hast, sagst du nicht aus der Nähe. Ich werde auf eine neue Fünf klicken. Also im Grunde, jetzt dieser Herr verschwunden und ich kann Ihnen erklären, wie Sie nach verwenden könnten Also zum Beispiel, oben auf der Seite, die wir hier kaufen müssen, haben wir Aktionen auf dem Kampf halten. Beispiel: Weekend 85. Nehmen Sie an, wie wir unseren Köder wollen, welche Elemente wir sehen wollen, wenn wir damit arbeiten. Wir können welche haben. Wahrscheinlich gesehen wurden eine Sport-Sample in der Online nach Zelle veröffentlicht, wo wir den Link zu einem Herzinfarkt mit verschiedenen Benutzern erhalten. Wir können die HTML-Dateien generieren, aus denen wir Ward Spezifikation generieren können. Dies sind erweiterte Aktionen für diese Demo. Wir brauchen es nicht, aber Sie können es auf jeden Fall nehmen. Wir können auch das Team erstellen. Fünf. Wir können im Grunde ein Teamprojekt erstellen, und wir können mit meinen Kollegen Teamkollegen an demselben Kampf arbeiten, und wir können diese übernehmen. Dies ist auch mehr Gegner Einstellung, die außerhalb des Geltungsbereichs dieses Training. Aber Sie können auch auf Ihr Konto gespeichert suchen. Fünf. Öffnen Sie, wenn ich den Export im Grunde alle Standardeinstellungen von jeder Software auf der linken Seite der beiden bringen , wir haben nicht am wichtigsten in den Abschnittsseiten, die wir bearbeiten, löschen oder duplizieren können . Die Löhne wurden bezahlt. Wenn ich auf ein bestimmtes Element doppelklicken, könnte ich benennen So, zum Beispiel, Ich kann diese Website erscheint nennen. Ehrlich gesagt, kommentiert. Das ist gerettet. Dann kann ich auch bezahlt umbenennen, um Ton. Ich kann Köder löschen, indem ich Ereignis wie Sie löschen oder einfach den Boden drücken. Ich kann auch alle nicht stützen, wenn ich sie gegraben und fallen lassen, oder indem sie dividen Peak nehmen und sie werden sie ausziehen. Das ist das Gleiche für eingerückte Babys. Grundsätzlich haben Sie mit jedem Pflaster so gesprochen, wie Sie die Statue Ihrer Größe erstellen möchten. Es ist auch möglich, eine neue Basis zu erstellen, indem Sie einfach auf dieses Symbol klicken, Sie können entweder den Namen angeben. Sie können nicht so sein, alle suchen zum Beispiel Regulierung von Multi-Boot. Welche Seiten waren spezifische Abschnitt der Website geschwächt Namen, zum Beispiel, thes unsere Produkte und dann können wir mehrere Seiten darunter ziehen. Auf diese Weise können wir das schaffen. Das ist es, was wir wollen, dass Zehe leichter für Sie ist. Und wenn wir mehrere Seiten haben, was wir auch tun können, ist, dass sie die Suchfunktion verwenden. Also für einige Leute hätte hier 100 Seiten. Ich könnte Tageszeitungen machen und Markt finden, basierend durch Tippen. Es durchsucht uns Mädchen. So ist es, wie wir Seiten unterbezahlten Abschnitt überwachen können. Sie werden die Sexualbibliotheken finden. Bibliotheken sind Sammlungselemente. Es gibt viele verschiedene Bibliotheken Wer hat es eigentlich? Stephen war im Grunde, wir haben unsere Formen Goldman-Formen. Es sind Platzhalter für Bilder. Nur kann ich Platzhalter erstellen, Platzhalter durch einen Ort. Bleiben Sie stabil auf der Seite, aber wir können es ersetzen. Wir haben Böden, die so aussehen. Wir haben Überschriften. Wir haben unsere Höhen von Allianz Arbeit dynamische Bomber, die monetarisieren, wenn Sie, die angenommen werden können Geschäft. So, zum Beispiel, Menschen Dies ist so, das ist eine Art. Natürlich können wir im Leben haben. Wir haben Textbereiche. Als Nächstes. Das ist im Grunde das da unten nicht wirklich bietet. Mögen Sie eine von Ausreden? Optionen, zum Beispiel, integriert sich mit einem anderen se Schulen oder anderen Arten von Websites. Sie könnten diese Bibliotheken dominieren wichtig und Sie können Türen verwenden. Und im Grunde welche Themen? Wir hätten die Böden in dieser Zeit. Warte sechs. kannst du tun. Aber das ist fortgeschrittener. Ich brauche Schotten nicht. Aber du bist anders. Du machst es mit James Library. Siehst du, der die Veränderung wieder stört. Das Styling Grundsätzlich sind diese alle mit niederländischen Elementen verwendet, aber Sie könnten Diagramme so engagiert fließen . Letzteres ist nicht nur tun, dass für eine Frau Ring für Websites, so würde ich gerne bei diesem sein. Die letzte ist Bibliothek, was ich nicht Das ist auch Bibliothekslager begonnen. Immer noch bei diesem bietet man mit einigen Eichel's an. Also, zum Beispiel, wenn Sie wollen ein bisschen anspruchsvoller für meinen Freund und Stick Gerechtigkeit Grundformen, lassen Sie uns sehen Ahmadi nach Gebräuche der neuen Kunden Erklärung geboren. Das ist also die Art und Weise, wie Sie das tun können. Hervorragende Berührung Fünf Jahre. Sie hören ihre verschiedenen Formen zu sprechen, um so zu verwenden, wie Sie wollen. Gehen Sie weiter, erwarten Sie unter dem Bibliotheksabschnitt der Meister. Monster, sehr Komponenten generische kann Markt begründet werden. Also im Grunde, durch die Schaffung Master Ihr Element, das jede Website es mir für etwas kann, würde ich gerne einen Platz haben. Es ist eine großartige Website. Der Einheimische kommt immer mit linker Baustelle. Stehen Sie rechts, Austin. Also würde ich sagen, Ihre lokale und im Grunde kann ich Ort überall auswählen, was bedeutet, dass ich kann oder ich Master-Standort suchen kann, dass es an der gleichen Stelle bleibt jedes Mal, wenn ich gebe. Also, wenn ich das tun würde, habe ich jetzt einen Meister. Das ist Meister. Du gehst zu verschiedenen Schicksale und bleibst im staatlichen Ort. Dies ist also eine gute Möglichkeit, einige lokale Partner zu haben. Hatten Sie Essen oder andere Dinge, die die Seite nicht ändern? Wenn Sie die meisten Meister im mittleren Abschnitt erstellen, haben wir unseren Hauptarbeitsplatz. Hier können wir die Seiten sehen, die wir geöffnet haben. Wir können durch sie klicken, um die Ansicht zu ändern, die wir Seiten schließen können. Wir brauchen nicht offen und wie Sie hier sehen können, gibt es einige Zahlen auf der linken Seite und die horizontale oberhalb der Basis. Grundsätzlich zeigen sie Ihnen, wie viele Pixel die Elemente Sie erstellen. Nimm. Das würde bedeuten, dass mein Logo etwa ein bisschen mehr als 150 Pick dauert, da ich genau sehen kann, wie viele Plektren sind. Dies ist, wenn ich auf ein Element klicke. Zum Beispiel, wenn ich auf diesen Boden klicken, kann ich in diesem Abschnitt sehen, aber die Breite dieses 140 Pixel. Die Höhe beträgt 42 Bilder. Dies ist sehr hilfreich, weil, wenn Sie kreativ sind, responsive Websites mobile und Tablet-Nutzung. Sie müssen wissen, was die Bruchknochen waren, zum Beispiel, was ist das maximale Gewicht und Größe, die Sie verwenden können, wenn Sie eine Frau zu machen. Also, um Ihnen dafür zu helfen, können Sie alle diese Führer tun, indem Sie auf Hugh haben Dragon Doping ein Führer gewesen. Dies ist im Grunde eine praktische Linie, die Ihnen helfen wird, zu identifizieren. Was glaubst du? Es ist das gleiche, was Sie tun können, indem Sie auf die Spitze hier klicken, Bates und fallen Sie es bis hier. Dies würde Ihnen helfen, wenn Sie einen Drahtrahmen erstellen, um zu wissen, was der maximale Platz ist und auf diese Weise oder nicht überschreitet es. Zu guter Letzt auf der rechten Seite Ihrer Seite. Wir haben die Styling-Elemente, die Sie hier sehen können. Drei Wannen, Eigenschaften, Notizen und Stil in der Unterkunft. Stopp. Wir können keine Interaktionen, also sind Interaktionen im Grunde jede Aktion, die auf einem bestimmten Auslöser stattfinden wird. Nehmen wir zum Beispiel an, dass Sie jedes Mal, wenn Sie auf das Logo klicken, zur Startseite navigieren möchten. Das würde im Grunde passieren. Sei eine Interaktion. Okay, das ist ein Meister, aber ich werde ein anderes Bild von dieser Demonstration verwenden. Also, wenn Sie darauf klicken, können Sie sagen, auf klicken. Und dann können Sie hier in dieser Liste alle möglichen Aktionen sehen, die Sie programmieren können. Grundsätzlich gibt es ein riesiges Minimum, dass alles möglich ist, also spielen Sie mit ihm herum und sehen Sie, was zu Ihren Bedürfnissen passt. Aber einer der meisten Jugendlichen, die will, ist, einen Link zu öffnen, und wir können Wahrheit in einem aktuellen Fenster in der neuen Badewanne oder in einem Pop-up oder einem Elternfenster für diese Demo öffnen . Ich werde Neues Fenster verwenden und ich werde hier sagen, ich werde nie nach Hause kommen, also kann im Grunde auf eine bestehende Seite in meinem Frauen-Rahmen verlinken. Und dann kann ich auch verweilen, ausdehnen. Jetzt wähle ich das Zuhause und klicke. OK, was wird das tun, wenn ich in der Vorschau auf fünf klicke? Also im Grunde, wenn ich darauf klicken würde, müsste ich nach Hause gehen. Aber so werfen Sie einen Blick hier. Ich bin jetzt auf dieser Seite. Wenn ich auf diese Option klicke, nimmt es mich in einem neuen Tab, wie ich es an die Heimatbasis sagte. Okay, die Startseite ist momentan leer, deshalb sieht sie leer aus. Aber es tut, was es tun soll. Es ging also um die Interaktionen, und Sie können hier in den am wenigsten mehr Ereignissen sehen. Es gibt viele, viele Bedingungen, die Sie verwenden können. Zum Beispiel, wenn Sie auf die Seite klicken oder wenn Sie nach oben oder unten scrollen oder wenn Sie die Münder der Taste geändert haben, die Sie auf der Tastatur drücken. Es gibt viele Veranstaltungen und man kann im Grunde lernen. Das ist das Beste. Du spielst mit ihm in der Notiz herum, hörst auf, unsere Dokumentation zu schwächen. Also, zum Beispiel, wenn ich diesen Kerl dokumentieren möchte, würde ich sagen, Oh, das ist ein Platzhalter für jede Menge, zum Beispiel. Dann, wenn ich dies wieder in der Vorschau sehen würde und ich auf die spezifische Seite gehen würde, dann falten Sie im Grunde. Schauen Sie hier in den Notizen Sie können hier sehen, dass dies ein Platzhalter für den Namen ist. Dies ist also eine Art Dokumentation, die Sie nicht können. Wenn Sie also den Prototyp mehrerer Personen festlegen, dass sie eine Vorstellung davon haben, worum es geht, und dann der Stylingabschnitt des Wochenendes uns wirklich eine Linie nennen, ändern Sie die Formulare, ändern Sie die Richtung des Bilder und alles. Das hängt also wirklich von der Art ab, von der Sie haben. Zum Beispiel werden die Optionen unterschiedlich sein. Zum Beispiel, die Unterseite können wir das Gefühl ändern, dass wir nicht Schatten. Also würden wir auf den Schatten klicken. Wir können diese Küken Bücher überprüfen und dann hätte unser Unterteil einen erweiterten Schatten. Dann scheint es eher etwas klickbares zu sein. Wir können auch sagen, tun, wie sehr wir wollen, dass die Schattenspitze verlängert wird. Wenn ich zum Beispiel diese Zahlen nicht erhöhen würde,um zu beginnen größer wäre,könnte ich sogar den Aufruf des Schattens selbst ändern. zum Beispiel diese Zahlen nicht erhöhen würde, Wenn ich zum Beispiel diese Zahlen nicht erhöhen würde,um zu beginnen größer wäre, Wir können uns keine andere Form leisten. Wir können die Unterseite hier benennen seine von Mick unten Generell gute Praktiken, um Ihre Elemente zu nennen , weil, wie Sie hier in der Umrisse sehen können, die eine Zusammenfassung von allem ist, haben wir genug Köder. In dem Moment, in dem Sie viele Dinge hinzufügen, behalten sie den Standardnamen bei. Wenn Sie also keinen Namen dafür haben, können Sie nicht wissen, worum es geht. Im Grunde, ich meine, es gibt eine gute Vorschau, aber es ist viel einfacher, um diese Dinge zu scrollen, wenn Sie ihm einen repräsentativen Namen geben , so dass wir auch die Grenze um die Bücher hinzufügen können. Also jetzt wurde die Grenze hinzugefügt, oder wir können mehr abgerundetes Rektum haben. Seien Sie, indem Sie zum Beispiel die Koordinator-Radios übernehmen . Wenn ich hier eintreten würde, dann würden wir sehen, dass mein Hintern runder wird. Das ist also ein Weg, den Sie tatsächlich stylen können, obwohl verschiedene Elemente. Das war also eine gewisse Produktion. Was entfliehen eigentlich einem Bluff? Ohne weitere Umschweife? Lassen Sie uns unseren Schreibtisch aufräumen und beginnen, an unserem ersten Prototyp zu arbeiten. 4. Mobiles prototype: in dieser Klasse werden wir zu schaffen und Responsive Website, um eine responsive Website in der Tat zu ermöglichen , müssen wir diese Scheckbücher Adaptive überprüfen. Dies ermöglicht Adoptive in unserem Prototyp verwendet, um die Voreinstellungen für unsere unterschiedliche adaptive Verwendung zu setzen . Wir müssen auf diesem unteren Mann als Adoptivgebrauch klicken und im Grunde hier werden wir in der Lage sein , verschiedene Ansichten, die wir für Tabletten, Website und Handy wollen . Ich bin ein Fan von Mobile zuerst bedeutet, dass wir zuerst für den kleinsten Bildschirm entworfen haben und wir allmählich nach oben zu Tablet und Website bewegen. Sie werden sehen, dass dieses Metall Vorteile hat, wie denken über die schwierigsten und sind Sie am Anfang hilft Ihnen, sich auf die wichtigsten Informationen zu konzentrieren, die Sie in Ihrer Website setzen müssen . Und Sie werden auch in den Rest dieser Klasse dieses Ansatzes sehen im Grunde hilft uns Design schneller, da wir Elemente für die mobile Version wiederverwenden und nur erweitern sie Zehe umfassen das Tablet und die Website. Sie Okay, Also, um zu starten, wählen wir zuerst den Port acht Telefon, das ist im Grunde die Telefonvoreinstellungen. So sehen wir hier, dass der Name Portrait Phone im Zeugenstand auf 320 ist, werden wir eine weitere Ansicht hinzufügen, die die Tablette Kraftstoff sein sollte. Wie Sie hier sehen können, hat tatsächlich die Standardvoreinstellungen für die anderen Bewertungen, so dass wir sie einfach auswählen können. Beachten Sie auch hier. Dieses Feld, das von im Grunde geerbt hat bedeutet, dass, wenn wir die Tablette wenige dies wird zu kopieren, was gibt es auf dem Telefon und Sie werden später sehen, wie viel dies uns helfen wird. Ich werde die letzten paar haben. Welches ist der Desktop Sie. Also wählen wir große Anzeige und im Grunde jetzt bin ich fertig mit meiner adoptiven Verwendung, so dass ich auf OK klicken kann , wenn Sie mehr Optionen für die adaptive Sicherung haben wollen und überprüfen Sie die Zugriffsdokumentation zu diesem Thema, wie Sie eine produktive Nutzung beginnen. So jetzt adaptive Benutzer eingerichtet und Sie können hier sehen, dass wir drei verschiedene Wanne Sport es fallen Porter Tablet und großes Display nicht entschuldigen, dass. Es gibt eine praktische Linie, die im Grunde so ist, dass Sie, wie viel mit Ihnen haben , wissen Sie, gutes Design und Sie können sehen, wie dies für das Tablet und für den Desktop erstreckt, so dass dies wirklich hilfreich sein wird. Wir müssen nicht zeichnen. Ein zusätzlicher Auftrag ist auf der Linie, weil der neueste Design-Trend im Schlepptau liegt. Habe unendliches Scrollen. Also im Grunde brauchen wir kein Maximum zu setzen, da die meisten Websites und Mobil weiterhin scrollen während wir nach unten gehen. Also für diesen Kurs habe ich mich von einer kostenlosen Vorlage inspiriert, die ich in der kostenlosen Beschlagnahmen Templates Website gefunden habe, die diese Vorlage ist. Es ist im Grunde eine Business-Website mit einigen grundlegenden Informationen, aber ich mag das saubere Design. Also im Grunde, wir werden solche von diesem und große eine äquivalente Version in einem Drahtrahmen inspirieren. Sie können sehen, wie dies für Tablet angenommen wird, und wenn ich meinen Browser kleiner mache, können Sie sehen, wie sich dies auf dem Handy verhält. Also im Grunde ist dies eine mobile Ansicht. Ich stütze mich auf diese Vorlage. Ich werde anfangen. Ich werde zuerst mit einer Kopf- und Fußzeile beginnen. Also, dafür werde ich das Logo der Firma eingeben und ich werde eine bescheidene Keimung verwenden . Also Hamburger Manu ist im Grunde diese drei Linien, die ich für die Navigation verwendet habe, um diese ein bisschen größer zu machen . Und weil ich diese Heidekraut überall benutzen möchte, werde ich den Meister aus Liebe erschaffen. Also, um einen Master zu erstellen, werde ich auf diese beiden Elemente klicken und ich werde konvertieren zu Master eingeben. Und ich werde diese Heather nennen und ich werde auch die Option gesperrt Master-Standort auswählen weil ich nicht möchte, dass sich das bewegt. Okay, also ist mein Meister jetzt erschaffen worden. Das nächste, was ich tun möchte, ist ein paar Bilder, um etwas Karussell zu haben. Also, im Grunde werde ich das hier in viel Platzhalter fallen lassen, und ich werde dies zu einem dynamischen Bonnel machen. Okay, also achte hier bei Dynamic Panel auf. Wir können das schaffen, indem wir den dynamischen Parnham für den Deckzehen sagen, und ich werde diese dynamische Scheune und Carcelle nennen. Okay, also was wird das tun? Grundsätzlich kann sich dies aufgrund bestimmter Bedingungen die Ansicht ändern. Das würde also bedeuten, wenn ich zum Beispiel nach links oder rechts wische zum Beispiel . Ich kann es anders sehen, so dass ich hier sagen kann, dass ich die Staaten nennen kann. Das ist ein Vieles, und ich benutze das hier. Okay, das ist nur ein Platzhalter, aber ich kann diese Zustände duplizieren. Das ist der schnellste Weg. Wenn Sie nur Bilder verwenden und sagen wir, wenn ich zwei oder drei Bilder verwenden möchte, kann ich dies in Mustering duplizieren. Okay? Ich möchte die 3. 1 tatsächlich nicht verwenden, also werde ich sie vielleicht einfach löschen. Ich kann auch ändern Die Zustände geben eine andere Priorität durch Wischen sie. Ich werde es behalten. Nein, wie vorher. Und darüber hinaus werde ich keinen Text bluten. Also werde ich sagen, wie sie auf der Website sagen. Wir sind eine minimale Designagentur. Okay, ich will, dass das in zwei Zeilen kommt. Also gehe ich Toe Drachen. Wahrscheinlich in der Nähe. Ich kann in der Mitte online sein, von diesem untersten König. Und im Grunde was? Ich kann es auch tun, wenn ich den Text anpassen möchte. England. Aiken, nimm diesen Text. Ich kann es mit Kontrolle und X schneiden, und ich kann diese innerhalb der viel platzieren, so wenn ich das hier platzieren wird alles in einem von den beiden Zuständen sichtbar sein . Und sagen wir, in der zweiten, das viel, was ich wollen, etwas anderes war der Text. Also füge ich hinzu, Hier sind wir sind ich würde bewegen, ist ein bisschen mehr, wenn ich die Kontrolle und diese Bewegung Stand spricht anders. Wenn ich es einfach nach unten mache, bewegt es sich um ein Pixel, um dies auch zu bewegen. Okay, Bert. Also jetzt haben wir die zwei verschiedenen Bilder. Füge es hinzu. Das nächste, was ich tun möchte, ist Schleppen. Haben Sie weitere Informationen über das Unternehmen. Um das zu tun, werde ich etwas Vertrauen hinzufügen. Schau, weil wir nicht wollen, dass alles ganz weiß ist. Also werde ich diese Bücher verwenden, und diese Box wird im Grunde als Container für etwas Text verwendet werden. Also hier können wir eine andere Überschrift nehmen. Wir sind eine Designagentur in Australien. Dies wiederum stützte mich nur auf das Beispiel. Und hier. Ok, wir können im Moment keinen Text mehr. Das ist nur ein Test bezahlt. Also werde ich nur den Absatz nehmen. Okay, vielleicht ein bisschen mehr Text, und dann werde ich das auf dem besten Weg ausrichten, um den Block zu füttern. Ich kann den Block auch einfach kleiner machen, so dass ich einfach den kleineren machen kann , ,indem ich nur die Größe anpasst. Also auf diese Weise ich auch, Ich wusste nicht, einige Informationen über die Kobani. Okay, das nächste, was wir tun können, ist seltsam zu schleppen. Einige der Dienste, die wir schließlich bieten, damit wir diesen Block erweitern können, im Grunde und nicht einige weitere Abschnitte. Also, wenn ich würde, kann ich einfach kopieren, fügen Sie die Etiketten für schneller. Also kopiere ich nur mit Kontrolle C und Kontrolle. Und ich gehe zu einem anderen Abschnitt hier Dienstleistungen, die wir anbieten, und ich werde hier etwas seltsam. Ein paar andere Etiketten Ich werde in Ordnung, ich würde gerne das gleiche Telefon haben, also gehe ich Zeh. Sehen? OK, das verwendet einen 14 Punkt von diesem A 13. Ich werde die 14 beide benutzen. Ich werde das ein bisschen mehr ausrichten, und ich werde das mehr nach unten bewegen, um etwas sauberen Raum zu haben. Also werde ich jemanden Text hinzufügen. Und ist es getan Optimierung, zum Beispiel? sind also alle Dienstleistungen, die das Unternehmen anbietet, also sind wir mit der Einführung des Unternehmens fertig. Jetzt können wir das nicht. Einige taucht auch auf, um es visueller zu machen. Was wir also tun können, ist, wieder per Drag & Drop zu ziehen. Der Platzhalter 40 viel ist und dann ist nur das Multi viel untereinander. Ich würde gerne für Bilder, was lief Zehe Copy Paste. Dies im Grunde mit Kontrolle C Kontrolle gehen, um ein wenig Leerraum zwischen Spiel zu verlassen sieht das gleiche. Ich bin auch auf dieser Basis. E und ich bin jetzt fast fertig. Wir gehen auch Zeh. Sonstiges Zitat. Also im Grunde, viele Unternehmen zitiert manchmal von Kunden, die von ihnen zufrieden sind und sagt, dass wir eine Business-Website bauen. Wir können es auch tun. Und hier ist, was ein Kontrast können wir die dunklere Farbe verwenden, so dass wir in den Feldbereich gehen können und wir einen dunkleren Grauton wählen können. So etwas zum Beispiel. Und ich werde den Text per Drag & Drop ablegen. Also wieder werde ich MM Label fallen. Vielleicht gehe ich mit den Zeh. Oder vielleicht der Absatztext. Ich mache das kleiner. Ich werde die Größe der es größer von der gebildeten und für einige mehr Wirkung, Ich werde Zehe setzen Sie dies kursiv, gehen ein wenig von dem Text zu bewegen, und ich werde auch die Namen haben, all die Leute, die ich machen werde. Auch die Farbe weiß, die Textfarbe weiß. Ich würde hier gehen und ich werde das Telefon in den weißen Kragen wechseln und ich werde den Namen vom Bär haben einige, die das Zitat gegeben haben. David Brown. Oh, tun Sie Axt Director Torwart, zum Beispiel. Dies muss nicht kursiv sein. Ich werde es einfach adoptieren. Und im Grunde eine andere Sache, die wir tun können, ist, mehrere Anführungszeichen zu haben. Also, um das zu tun, werden wir die Carcelle um Gedanken verwenden, so dass wir einfach auf den Lippen auswählen können, machen Sie dieses bisschen kleiner, schwächen und oben an den Seiten hier, Lassen Sie uns 15 von 15. Das sieht OK aus, so dass wir mehrere einmal haben können, wenn wir das nächste Zitat sehen wollen. Ich werde nur die Grenze entfernen, damit ich das tun kann, indem ich auf dieses Symbol klicke. Der Rand ist vollständig entfernt, und ich werde nur kopieren, fügen Sie dies dreimal ist es. Wir haben drei Anführungszeichen, um dies in der Mitte der Seite zu bewegen, und sagen wir, dass diese das mittlere ist. würde also im Grunde bedeuten, dass dies die aktive ist, und die anderen müssen über verschiedene Farben sein, damit wir unterscheiden können , welche die aktive ist. In dem Zeuge nicht. Also werde ich diese Art von Grau verwenden, das gleiche für die andere. Also wieder, diese Kopie, die kälter perfekt. Ein bisschen mehr zu rezitieren. Und ich denke, das ist ziemlich viel von dem Treffen. Ok, das Gleiche für den anderen. Also Kansas, komm in den Kühler. Perfekt. Ein bisschen mehr zur Seite. Und ich denke, das ist ziemlich viel von den Medien. Okay, das nächste wird das tun. Was? Einige Social-Media-Informationen über das Unternehmen. Wir können also nicht Google Facebook und Twitter Icahn. Also werde ich nach denen in den Symbolen suchen, die ich hier kann. Ich suche nur Drachenseil auf Facebook. Hochtöner Ich werde sie später neu starten. Also keine Sorgen über das LinkedIn-Symbol sowie Wir brauchen, wenn Google aktiviert ist. Plus, hier ist es. Ich denke, dieser hier ist der neueste Einheimische. Ich kann es einfach fallen lassen. Also werden wir die wieder etwas kleiner machen. Ich werde es versuchen. Das ist ein Prozess auf Arabisch. So ziemlich, so müssen Sie mit den Zahlen herumspielen. Das hier scheint nicht so toll zu sein. Genau wie Dragon Dope es, wenn Sie mit der Form und dann die Verbindung Sache als auch zufrieden sind . Lassen Sie uns das Facebook von seiner kleineren machen. Ja, und lassen Sie uns diese bewegen. Aber 12 mehr ausgerichtet und schwächen unsere Diese waren Label oben auf das sagen Social-Media-Präsenz , Social Media durch soziale Präsenz könnte dies ein wenig größer machen. Und wir können diese Symbole auswählen, indem Sie so klicken. Wir können mehrere einmal auswählen, und wir können sie mit Kontrolle und Arnold runter bewegen. Also verlege ich die nur ein bisschen mehr Gesetz. Und ich werde auch Informationen über den Bürostandort hinzufügen. Ich hoffe, dieser Ort ist jetzt, hier ist eine Staubadresse, sagen Regent Street, London. Ich bin mir nicht sicher, ob das die Felsen Gold sind, aber okay. Und dann brauchen wir idealerweise auch den Kontaktbereich, damit sich die Menschen mit uns in Verbindung setzen können. Also, dann wieder, ich werde diese Etiketten kopieren, die ich hier sagen werde, Informationen zu führen, um meine Adresse zu beachten. Ich bin ein Telefon. Das ist nur das Mitnehmen nach Hause. Das wäre im Grunde alles, was wir brauchen. Lass mich nur einen Staub, ein bisschen Abstand. Ich denke, das würde es tun. Und schließlich können wir auch einige Copyright-Informationen hinzufügen. Ich verdiene die Rechte dafür nicht, okay? Es ist einfach und lehrreich. auf jeden Fall etwas würde diese Urheberrechte etwas kleiner machen. Okay, das ist vielleicht zu klein, und ich werde es hier abgeben. Und ich denke, meine mobile Version war weg. Also, jetzt, um eine Vorschau könnte Prototyp, Ich gehe in die Vorschau, Ordnung, wie eine Fünf. Und das öffnet den Browser. Und ich kann hier sehen, wie meine mobile Version der Website aussehen würde. Wenn ich also die meisten scrollen, kann ich hier sehen, dass es mehr Elemente gibt, bevor ich mit dem Tablet beginne. Sie ich werde nur dieses Zitat carcelle mehr Bedeutung machen, so werde ich zurück zu meinem Prototyp gehen und ich werde dies konvertieren, wenn dynamische Panel wie auf alles, was dort enthalten ist, werde ich sagen, wettbewerbsfähige dynamische Panel. Und ich werde diese Zitate nennen. Ich werde diesen Gerichtszehen nennen, weil es die 2. 1 ist und ich werde das zweimal duplizieren , damit ich zwei weitere Staaten bekommen kann und dann Gold Name ist Zitat eins und dann cool im Grunde kein Putt. Drei sollten die 1. 1 sein und dann wird ein Zitat danach kommen. Also für Gericht Drei im Grunde, werden wir doppelt klicken, um nach innen zu gehen. Ich werde den Namen ändern. Ich werde mich hier nur ändern. Die Namen. Ich werde am Tag etwas erfinden. Grundsätzlich ist dies die 3. 1 Also sollten sie die weiße sein. Also werde ich das hier einfach hierher bringen? Nein, der andere, Buck. Also, jetzt habe ich es jetzt für eine kalte. Ich werde dasselbe tun. War nicht 108, also werde ich es einfach tippen. Und das war ein 138 und ich werde mich wieder ändern. Der Name zu Hause. Diese Person wird ein digitaler Monitor sein. Wie zahlen Sie? Das sind also sehr dankbare Kunden. Diese drei und was ich tun werde, ist, dass ich jetzt gehe. Geh zurück ins Haus. Ich möchte damit den Zustand ändern. So ist ein weiteres dynamisches Panel bereit. Wir werden es programmieren, um alle fünf Sekunden zu spielen, ein anderes Zitat. Um das zu tun, gehen wir in die Richtung in den Fall und wir gehen in die Hexen und dann Seitenband des Staates. Wir werden die Anführungszeichen dynamische Panel auswählen und sie würden sagen, wählen Sie Zustand als nächstes . Grundsätzlich wird das dynamische Panel einfach in den nächsten Zustand versetzen und wir werden sie von der letzten zum ersten sehen . Das würde bedeuten, dass es letztlich die nächsten wiederholt. Und dann werden wir sagen, Wiederhole jeden hier. Wir werden dies auf fünf Sekunden ändern und dies wird auch eine Verzögerung von fünf Sekunden auslösen , wenn wir die Website zum ersten Mal geöffnet haben. Also, wenn ich hier OK auswähle und ich dies in der Vorschau gesehen habe, werden Sie sehen, dass, wenn ich in diesen Abschnitt gehe, dies beginnt sich alle fünf Sekunden zu ändern. Sie sehen jetzt, dass es sich geändert hat. Dies ist also eine gute Möglichkeit, sich auf einige interaktive Elemente auf unserer Website zu konzentrieren. Wir könnten perfekt das gleiche mit sehr viel tun ist mit dieser Art von Bildern oder irgendetwas, wie wir wollen. Also, jetzt, die sind mobil. Buis ist fertig. Gehen wir zu einer Tablet-Version der Website 5. Tablet: Jetzt, da wir mit der Erstellung des mobilen Prototyps fertig sind, ist die Erstellung des Tabletts und der Desktop-Version ein Stück Kuchen. Dies liegt daran, dass wir die Adoptivverwendung festgelegt haben. Also im Grunde haben unsere Problemtypen Ehemann Kapital bereits in die verschiedenen Versionen. Wie Sie hier jetzt sehen können, bin ich in der Tablette Sie und das ist schon fertig. Dasselbe gilt für den Desktop. Sie, wie Sie hier sehen können, war dies auch Corporate und wir haben die maximale Brise. Es ist definiert. Also im Grunde das einzige, was wir tun müssen, ist, diese adaptive Nutzung zu erweitern, um unser Ziel Sie zu marschieren . Also im Grunde werde ich nur auf die Kopfzeile klicken. Ich werde sagen, abtrünnige, also würde das bedeuten, dass ich das anfängliche Heidekraut-Design veröffentlichen würde. Auf diese Weise kann ich das bewegen. Ich gehe nur zu Orten auf der linken Seite und im Grunde werde ich ziehen und fallen den Rest der Elemente sowie die Tablette erstellen Sie. Also, was ich tun werde, ist, dass ich in der Auto-Zelle zu tun und ich werde die sehen viel kommen nur Fuß, ziehen Sie es und legen Sie den Text in der Mitte und ich werde genau das gleiche für die zweite tun . Das viel und du wirst das gleiche genau hier sehen. Also, wenn ich jetzt aus der Bindung durch Klicken auf Held nach Hause, Ich sehe bereits, dass dies erweitert wurde. Das nächste, was wir tun wollen, ist, unseren Text zu erweitern. Also werden wir diesen Kerl erweitern und im Grunde eine andere Sache geben könnte. Das ist zu viel. Ich werde annehmen Dies erreichte nicht das Maximum, aber ein wenig Leerraum zu haben. Okay, wieder nach Hause zu gehen und dann einfach den Seufzer von diesem Blockzehe anzunehmen, durch den ganzen Witz zu gehen und was wir auch tun müssen, ist, unsere Elemente nach oben zu bewegen und hier ein wenig weißen Raum zu lassen. Und ich werde einfach nur Listenelemente per Drag & Drop ziehen, indem ich sie alle zusammen auswähle und das Schlimmste auswähle. Ich will damit auch nicht. Nach oben. Machen Sie diesen Block ein wenig kleiner. Perfekt. Lasst uns das etwas besser ausrichten, okay? Und dann im Grunde das einzige Jahr haben wir nur noch ein paar Dinge übrig. Wir müssen Zehe machen, dass dieses Bild ein bisschen größer ist. Also werde ich nur Zeh greifen das so und das wird im Grunde die Größe erweitern. Und ich bin nur, ich habe zwei Möglichkeiten. Entweder kann ich einfach das gleiche Handbuch für die anderen beiden machen, wo ich diese drei löschen werde . Und ich werde das noch 30 Mal kopieren. Ich finde heraus, dass das einfacher ist. Sagte ich erinnere mich an Dimensionen Also werde ich das nur von dieser Kopie machen, die sie einfügt. Ich kann diese beiden sogar zusammen kopieren, faul werden. Auf diese Weise kann ich nicht entscheiden, Pastor zu empfangen. Also habe ich schon 40 Much ist okay. Ich sehe jetzt, dass mein Block von hinter Ehemann er nicht getan hat, was ich tun kann, weil ich mich erinnere , wo es war. Ich werde mit der rechten Maustaste klicken Sie hier und ich werde sagen wählen. Alles gehört und was das tut, ist, alle Elemente unter meiner Zelle auszuwählen. Eine tolle Lage. Ich werde auf die Antwort wie dieses Bild gehen, und ich werde diese einfach mit Kontrolle bewegen und perfekt angehäuft. Also jetzt erschien das wieder, und ich werde nur dieses Zitat ziehen. Ok? Es ist ein dynamisches Gleichgewicht, oder ich kann es ziehen. Das heißt, ich muss hineingehen, und ich muss es auf diese Weise erweitern. Ich würde auch etwas Platz haben wollen, aber ich erinnere mich nicht, wie es aussieht. Also werde ich wieder nach draußen gehen Haarausfall, mein Buba, das kann es zurücksetzen, indem ich die Zehenansicht gehe. Bist du das? Okay, jetzt habe ich mein Ja. Ok. Perfekt. Es sieht wirklich gut aus. Also werde ich einfach wieder in die Tafel gehen. Ich kann diese Dimensionen einfach für die anderen Bilder kopieren. Nun, ziehen Sie einfach den Text und legen Sie ihn ab, um die gesamte Ansicht zu erweitern. Verschieben Sie den Text zwischen mehr Liebe. Da hast du es. Und dann lassen Sie uns dieses Rechteck ein bisschen kleiner machen. Wir brauchen nicht so viel Platz. Und lasst uns genau dasselbe machen. Also werde ich nur mit diesen Dimensionen bis zum zweiten Block fertig werden. Der andere war 743 vom Irrtum. Kein Buch zu uns. Ich nahm es wieder. Also kann ich einfach in jeden Block gehen und der Arzt den Verstand und die Höhe korrigieren, weil ich mich nicht auswendig daran erinnere. Ich gehe einfach in den ersten Staat. Ich glaube, sie sind auf dem Rechteck und dann sehe ich hier die Höhen des Witzes. Perfekt. Das ist also auch jetzt erledigt. Und das letzte, was sind die Kontaktdaten, die ich einfach Drag & Drop Auswirkungen hier. Es gibt nicht so viele Informationen. Zweitens, halte es einfach raus. Aber was ich auch tun kann, ist Zehe haben diese Blöcke für zwei bedeutet, dass ich das bewegen kann, kontaktieren Sie die Kommission nach rechts und erstellen Sie diese Weise Zwei Säulen in der Mitte des Köders. So etwas. Und ich kann die gesellschaftliche Präsenz hierher und alle Rechte, die unterschrieben sind, auf die rechte Seiteverschieben , auf die rechte Seite oder schließlich unter den Bildern stehlen. Aber ich kann es so machen. Auf diese Weise kann ich auch Platz sparen und haben eine anpassungsfähigere Sie. Also lassen Sie uns eine Vorschau darauf und im Grunde sehen wir immer noch, dass die mobile Vision hier ist. Um die Tabla-Ansicht, müssen wir hier klicken und dann adoptive Sie auswählen und wählen Sie die richtige eine Bedeutung Portrait-Tablette. Dies wird im Grunde zeigen uns die Tablette entworfen, so dass wir hier sehen können, dass Design angenommen wurde . Es sieht in der Tat eher wie eine Tablet-Ansicht aus. Also war es ein Mädchen. Wir werden die Änderungen sehen, die wir gemacht haben, und es sieht ziemlich gut aus und ich kann mit den Zitaten verkaufen bewegt sich auch. Im nächsten Video werden wir mit dem gleichen Ansatz fortfahren und den Schreibtisch von Ihnen bauen. 6. Desktop: für das Desktop-Design. Wir arbeiten genau so, wie wir für das Tablet arbeiten. Sie Wir gehen in die Adoptive Sie für die verzweifelten Dimensionen großen Display gehen. Und im Grunde wird er sehen, dass Elemente in der Seite stehlen. Die maximalen Abmessungen wurden jedoch auf 1200 Pixel erhöht. Wir werden auf die gleiche Weise arbeiten und erweitern Sie diese Elemente, um die meisten der Seite in einem Mobiltelefon und Tablet nehmen Sie Wir haben diesen Hamburger, Manu für die Navigation auf dem Desktop. Wir können diesen Hamburger Manu durch eine vollständige Navigation ersetzen, so dass wir keine Links für unsere Benutzer bei der Navigation auf der Website wirklich kennzeichnen können. Daher werden wir diese Navigation löschen. Manu, wir werden echte Etiketten hinzufügen. Ich werde die Arbeit nach Hause benutzen, damit der Benutzer rauchen kann. Wir gehen zurück zu Hause Zöpfe unsere Dienstleistungen. Grundsätzlich passe ich den Inhalt von der Seite mit einem Navigationsmanu an. Dies ist die logischste Sache für den Benutzer navigieren innerhalb des Kontinents. Das nächste wäre unser Portfolio. Wenn Sie sehen, dass dies in Einklang kommt, bedeutet das, dass die böse Hexe nicht groß genug ist. Also nur Truck und hoffe es. Dann haben wir unsere Zeugnisse. Also die Zitate von den Kunden besser rollen unter der Seite herum. Wir werden diese Dinge ein bisschen mehr auf die Website verschieben und sie ein bisschen kleiner machen. So etwas. Und jetzt werde ich den Abstand besser ausrichten. Ich werde auch den Link für die Kontakte haben. Grundsätzlich möchte ich, dass wir dies wie möglich am Ende der Seite sein. Jemand wurde die Abstände weiter bewiesen, so etwas. Und jetzt ist die nächste Sache Zehe, lass das viel Maximum scheinen, mit Okay, lass uns das tun. Wir müssen in die dynamische Familie gehen und im Grunde unsere Guides hier verwenden, um den gesamten Raum auf der Linie zu nutzen. Dies in der Mitte auf die gleiche Weise für den anderen. Was sieht aus. Wenn wir also zurück zu Hause Bates gehen, können wir sehen, dass das jetzt erledigt ist. Okay, das Bild ist ein bisschen klein, also was wir in der Tat auch tun können, in der Tat auch tun können, ist es größer zu machen. Nun, der praktische Raum, da wir den Platz auf der Scheibe oben haben, Plätze waren mehr unten in der hohen Tous Nehmen wir an, wir machen es drei Hobbeln Aus praktischen Gründen werden wir das gleiche für den anderen tun. Also, wenn wir nach Hause gehen, aber wir sollten sehen, dass dieser jetzt tatsächlich größer ist. Ja, Okay, wieder, wir haben das gleiche Problem, dass es Elemente von hinten sind auf unserer Seite zu schwächen kommen nur auf den gleichen Trick uns vor so auswählbar unten. Und dann mit Kontrolle und Pfeil nach unten, können wir diese Dinger nach unten bewegen. Okay, jetzt kann ich mein Vieles wiedersehen. Jetzt müssen Sie diesen Text aktualisieren, um auch das Maximum an Platz zu nehmen. Also werden wir diesen Block per Drag & Drop auf die maximale Seite ziehen und der Text kann auch mehr erweitert werden . In der Tat, was wir tun können, ist, dass wir das so behalten können und wir können die Dienstleistungen, die wir anbieten, genau daneben stellen . Was wir auch tun können, ist die Eingabe, um die Telefone zu verbessern. Also sollten wir die Telefone etwas größer machen, weil der Bildschirmplatz größer ist. Okay, Dieser Text kann auch Ingres in der Größe sein. Also jetzt müssen wir den Abstand zwischen diesen Elementen verbessern Lassen Sie uns sie ein bisschen mehr nach unten bewegen , haben ein wenig Abstand zwischen ihnen. Lassen Sie uns dasselbe für unsere zweite Kolumne tun. Jemand, der wieder zuzunehmen ist. Verformt. Diese anderen Gegenstände sind gut, das ist unsichtbar. Verdrängen zwischen ihnen. Nein, das sollte gut sein. Der Low kann auch Bits kleiner sein. Ok, perfekt. Und jetzt haben wir bereits viel ist, was wir nicht tun werden, ist Schleppen Erhöhung der Symmetrien und setzen tatsächlich auf seine Linie. Also werden wir diese gleich groß machen, und ich werde diese einfach löschen und im Grunde nur einfügen kopieren, wie ich es in der Tablet- und Mobilansicht getan habe. Muchas Sie sind fertig. Ich würde es nochmal kopieren. Also haben wir keine sechs entsteht und dann ist das nächste, was zu tun ist, die Größe der Zitate zu erhöhen , haben den maximalen Witz. Also werde ich wieder in das dynamische Panel gehen, und ich werde diesen gebrauchten Schützen verrückt machen. Ich möchte nur 10 Pixel leben, also wäre dies etwa die richtige Größe. Ich werde das ein bisschen mehr in die Mitte legen und die eine Zeile den ganzen Raum einnehmen lassen. So etwas. Ich werde im Magoo ausfallen. Ich werde diese Dinger bewegen. Und dieser hier, der Name der Person war mitten in der Mitte. Ich mache genau das Gleiche für den zweiten Staat und komme zu dir zurück. Okay, ich bin wieder drin. Die Zitate sind jetzt fertig. Ich beantworte auch nicht einige andere Elemente der Website für optimalen Platz. Ich gehe raus, um diese Mäntel mehr nach oben zu bringen und das Letzte, was ich tun werde, ist, die Kontaktinformationen zu aktualisieren , damit alle in eine Zeile kommen. Also werde ich diese Elemente verschieben. Oh, hier, um auf der gleichen Seite zu sein. Grundsätzlich ist meine Website fertig, also wenn Sie das sehen, sieht es sehr gut aus. Also lassen Sie es uns überprüfen. Ja, also haben wir unsere volle Navigation. Manu, wir haben schon verrückt. Wir haben unsere Beschreibung der Dienstleistungen. Wir haben die Portfoliobeispiele. Wir haben den Kurs, dass sie sich bewegen und wir haben unser Essen. Grundsätzlich ist unsere Website als optionaler Schritt komplett. Sie können diese Website mit benutzerdefinierten Bildern oder Farben oder Telefonen füllen und die Website wird viel realistischer aussehen. Und als real und Ergebnis werde ich diese Website in den drei verschiedenen adaptiven Gebrauch mit einigen Bildern und Telefonen zu bevölkern , und ich werde zu Ihnen zurückkommen, um Ihnen das Ergebnis zu zeigen. 7. Veröffentlichung und Teilen deines Prototypen: haben jetzt an den bunten Bildern zu meinem Prototyp, und ich bin bereit, diese Vorschau. Wie Sie hier sehen können, sieht es wie eine echte Website aus. Ich habe Bilder gestört, also könntest du dies definitiv einem Kunden zeigen, bevor du in hier investierst, damit sie eine echte Website bauen . Wir können auch eine oben ohne Ansicht sehen, so dass Sie diese sieht genau gleich sehen können. Aber es hat die adoptive Sie Tablet und das gleiche gilt für Handy. So können Sie sehen, was für ein großer Unterschied die bunte Sie viel machen. Also im Grunde, Ihre Website ist bereit. Sie können dies einem Kunden in der Vorschau anzeigen und Sie können den Kunden und geben Ihnen alle Anpassungen , die er will. Aber der Aufwand, den Sie dafür ausgeben müssen, dies zu ändern, ist ein Minimum. Und das ist eine großartige Möglichkeit, Produkte von Grund auf neu in ein allerletztes Mal zu entwickeln, ohne zusätzliches Geld ausgeben zu müssen. Und Ressource ist auf Nacharbeit. Eine weitere tolle Sache über Aktionen, die die Bewertungen ist, dass, wenn Sie gesagt, diese Toto, dies wird auf der Größe des Browsers zu ändern. Also im Grunde, wie Sie hier sehen, wurde das jetzt zu den wenigen Tabletten und dann, wenn ich es kleiner mache, wird es die Zehe Botham über Ihnen schrumpfen. Hier ist es. Sie können hier das Handy von Ihnen sehen. Eines der nützlichsten Funktionen, die tatsächlich r p bietet, ist die Veröffentlichung und syrische Fähigkeiten. Grundsätzlich, wenn Sie mit diesem Problem fertig sind passiert, Sie möchten es mit mehreren Personen teilen. Es gibt mehrere Möglichkeiten, wie Sie es tun können, wenn die andere Person auch tatsächlich sein verwendet. Sie können das RPI-Feuer exportieren, indem Sie speichern. Also im Grunde, wenn Sie dies speichern, werden Sie die eigentliche Datei erhalten und es wird eine RB-Datei sein. Dies ist eine Möglichkeit, die anderen Möglichkeiten, es effektiv online zu veröffentlichen. So sehen Sie hier, wenn Sie zu Publix gehen, haben Sie die Option veröffentlicht Korruption teilen. Also, was das im Grunde tut, ist, wenn Sie den schädlichen Anteil niedergeschlagen werden, werde ich Ihnen zeigen, wie man das macht. Sie gehen, um tatsächlich dot-com zu teilen. Also im Grunde ist dies die Linienumgebung aus der tatsächlichen, dass es Ihnen kostenlos für einen Benutzer gibt, um Ihre Websites zu hosten . Ich habe bereits ein Konto, aber fühlen Sie sich frei zu gehen und sich anzumelden, wenn Sie nicht tun Es ist sehr einfach. Also werde ich nachsehen und Sie können hier sehen, dass ich meinen Arbeitsbereich und meine Projekte habe. Also im Grunde, in diesen Dateien, kann ich meine Prototypen hochladen und ich kann sie mit seinem Wort mit anderen teilen. Also, wenn ich die Publishing-Option hier nach einem langen Grün mache Also muss ich hier wieder nachsehen. haben Sie jetzt. Ich habe es gerade im Browser geöffnet, also ist das normal. Also verwenden Sie nur das gleiche Konto, das Sie haben, und dann wird es im Grunde alle Ordner holen, die Sie auf Ihrer Freigabe haben, so dass Sie Namen geben können. Sie können die Konfigurationsaktivität festlegen. Wer besucht die Änderung? Sie können ein Passwort festlegen. Dies ist auch sehr nützlich, wenn Sie nicht möchten, dass jemand darauf zugreifen kann. Und Sie können einen der vorhandenen Inhaber auswählen, die Sie haben. Zum Beispiel, ich. Ich habe nur meinen Projektinhaber, aber ich konnte perfekt einen Ordner für verschiedene Projekte erstellen, die ich arbeite. Also werde ich das hier einfach benutzen. Okay, es hat es ausgewählt. Also, jetzt klicke ich einfach auf Veröffentlichen und das wird auf Mr Dive hochgeladen in es wird mir diesen Link geben, also wird dies der Link sein, den ich teilen kann. Und wenn Sie diese Seitenleiste nicht auf der linken Seite haben möchten, die Sie haben, wird eine generiert. Sie können diese Option ohne Seitenleiste auswählen. Okay, es ist erledigt. Ich werde es bewältigen. Also gehe ich nur auf Basis hier im Browser. Und Sie können hier sehen, dass dies für jedermann zugänglich ist, also kann ich dies mit Kunden oder mit Kollegen sagen . Ich kann es als Lesezeichen markieren. Es ist wirklich einfach, wenn Sie die Datei bereits veröffentlicht haben und Sie wollen nur Anpassungen vornehmen oder Newton wieder veröffentlicht, Sie gehen einfach veröffentlicht Doctor Sir und aktualisieren Sie dann bestehende Projekt. Und dann können Sie aus dieser Liste das Projekt auswählen, an dem Sie arbeiten. Der letzte Weg, den Sie veröffentlichen können, besteht darin, HTML-Dateien zu generieren, so dass dies im Grunde die HTML-Kälte erzeugen würde. Lass uns das machen. Sie müssen den Ordner auswählen, den Sie verwenden möchten, und es gibt einige zusätzliche Optionen, z. B. für welche Browser, die funktionieren sollen. Dann, wenn Sie die Sidebar und dann zusätzliche Optionen wie die adoptive Verwendung haben möchten und dann könnten Sie sogar die Seiten auswählen, die Sie wollen und einige zusätzliche Dinge standardmäßig, alles ausgewählt. Aber gehen Sie voran und anpassen ist die Art, wie Sie wollen. Also, wenn ich das generiere, sitzen Sie hier, dass der Pfad die Datei Sophia Dokumente ist. Oder im Grunde veröffentlicht es das auf meinem Computer. Also im Grunde navigiere ich einfach durch diesen Pfad. Sie betrachten, dass der Ordner für HTML erstellt wurde. Aber hier sind 15 und hier können Sie sehen, dass ich das öffnen kann. Okay, perfekt. Also für meinen Computer kann das öffnen. Also im Grunde kann ich das einfach einem Entwickler geben. Wenn ich mit seinem Design zufrieden bin. Der Entwicklerwettbewerb. Integrieren Sie diese Uploads auf einem Server auf der Website ist wirklich bereit, so dass Sie sehen können, dass es einfacher Code getan ist. Wenn Sie dies mit einer Notiz, aber oder mit einem anderen Entwicklungstool öffnen , sehen Sie hier, dass der gesamte HTML-Code generiert wird. Das ist wirklich, wirklich, wirklich nützlich, denn wenn Sie nur eine einfache Website wie diese wollen, gibt es keinen Grund. Grundsätzlich, Zehenbär Entwicklerzehe machen die Werke von Scotch für Sie, wenn Sie mit seinem selbst entworfen zufrieden sind . Nun, da wir wissen, wie man einen Drahtrahmen herstellt und ihn online veröffentlicht, lassen Sie uns in das Klassenprojekt gehen 8. Kursprojekt: für das Klassenprojekt. Die Herausforderung besteht darin, Ihre eigene Website-Nutzung zu erstellen, tatsächlich sind die Techniken, die wir in dieser Klasse gelernt haben, um eine Website Ihrer Wahl zu erstellen , entweder um eine professionelle Website, einen Web-Shop oder alles andere, was Sie können kommen Sie mit. Sie können es reaktionsschnell machen, wenn Sie möchten, aber es ist nicht notwendig. Vergewissern Sie sich, dass Sie es veröffentlichen und teilen Sie den Link mit uns. Im Abschnitt „Klassenprojekt“ finden Sie den Abschnitt „Klassenprojekt“ unter der Klasse im Abschnitt Ihres Projekts. Hier finden Sie weitere Beschreibungen, und Sie können einige Websites sehen, auf denen Sie sich inspirieren lassen können, um Ihre eigenen zu erstellen. So posten Sie einfach Ihr Projekt auch hier bei uns. Und ich werde auch die tatsächliche abgefeuert von der Website hochladen, die ich erstellt habe, um Ihnen beim Einstieg zu helfen . Viel Glück. 9. Nächste Schritte: vielen Dank, dass Sie Zeit in diese Klasse investiert haben. Jetzt können Sie beginnen, Ihre eigenen Brudertypen zu erstellen und Ihre Kunden und Kollegen zu beeindrucken . Wenn Sie diese Klasse mögen, bitte mögen und teilen und folgen Sie mir, um für neue Klassen benachrichtigt zu werden. Glücklicher Bruder, der tippt.