Responsive Webdesign in Adobe Xd

1. Kurs-Einführung: Erstellen von Responsive Design ist ein wesentlicher Bestandteil jeder Designer-Fähigkeiten, vor allem auf dem heutigen Markt, wenn mehr Traffic von mobilen Geräten und Tablets kommt. Adobe Extreme macht diesen Prozess wirklich einfach, da er einige großartige Tools enthält, um den reaktionsschnellen Teil Ihres Designs zu beschleunigen. Und es hat auch große Exportoptionen, was bedeutet, dass es wird, um die Entwickler glücklich zu machen, weil Sie gehen, um Dateien auf Zeit und falsche Dateiformate zu liefern . Cater. Mein Name ist Alex. In diesem Kurs erfahren Sie, was ein Responsive Design ist und warum es darauf ankommt. Wie man mit Spalten und Inhalten entwirft, wie man mit verschiedenen Bibliotheken arbeitet, Wasserbruchpunkte und wie man damit umgeht. Wie man ein Design von Adobe X erstellt, macht es dann reaktionsschnell für verschiedene Größen und wie man diese Dateien richtig an Entwickler und Clients sendet. Dieser Kurs richtet sich an alle, die an Responsive Design in Adobe X deep interessiert sind, und Sie müssen nicht wissen, wie Sie es verwenden, wird X'd sein. Sie werden Erwachsene in diesem Kurs behandeln, also möchten Sie als Designer begehrenswerter sein, Dateien schneller an Kunden und Entwickler liefern, die klicken und rollen, und ich werde Sie im Kurs sehen 2. Was ist ein Responsive Design: Responsive Web-Design ist ein Ansatz für Web-Design, die Webseiten gut auf einer Vielzahl von Geräten und Bildschirmgrößen ergeben macht . Für eine Website funktionieren die Zehe gut auf verschiedenen Geräten. Es muss im Voraus vorbereitet werden. Sir, Job ist ein Designer ist es, alle Ihre Elemente mit diesem Gedanken zu entwerfen, um Konsistenz im Design über mehrere Geräte und Bildschirmgrößen zu erreichen . Designer verwenden Grid-Systeme, um ihnen zu helfen, die Elemente so zu verlegen, dass sie auf verschiedenen Geräten konsistent funktionieren und das gleiche Loken Gefühl erhalten. Da immer mehr Website-Traffic bewegt sich in Richtung mobiler Geräte. Responsive Website-Design ist für jeden Designer unerlässlich, da die meisten Websites, die Sie entwerfen werden, auf verschiedenen Bildschirmen angezeigt werden, von Desktops, Zehe-Laptops, Tablets, Telefonen bis hin zu Smart-Uhren. 3. Spalten und Inhalt: Wenn Sie Responsive Website entwerfen, müssen Sie über unsere Spalten und Inhalte nachdenken . Sie können eine Anzahl von Spalten haben, abhängig von Ihrem Layout oder wenn Sie Komponentenbibliothek wie Bootstrap verwenden . Diese Spalten sollten flüssig sein, was bedeutet, dass, wenn die Gerätegrößen kleiner oder größer werden, sich diese Spalten und die Anzahl der Spalten an die Bildschirmgröße anpassen, auf die die Website geladen wird . Sie haben auch Bodenbeläge Inhalt, und das grundlegende Beispiel ist Text, reagiert, passt sich an die Anzahl der Spalten an, die das Gerät, das die Website lädt, hat. Was typisch ist, ist Inhalt und Spalten passen sich zusammen und für die Elemente , die nicht fließend sind. Einige Schieberegler zum Beispiel die kleineren Versionen von den Elementen, laden zum Beispiel die kleineren Versionen von den Elementen, die der Entwickler im Voraus vorbereitet hat , lassen Sie mich wissen, zeigen Ihnen, wie das in einem Live-Beispiel aussieht. Also hier bin ich auf meiner Website Web Donut, das Netz und ich bin auf der Produktseite und diese Website reagiert, was bedeutet, dass alle diese Spalten und Inhalte gehen toe handeln verantwortungsvoll, wenn Sie die Größe des Browsers ändern. Also lassen Sie mich Ihnen zeigen, was ich meine, Sie können deutlich sehen, dass wir hier einige Spalten haben weil es einen Scroll nach unten gibt. Alle von ihnen sind spät unten, untereinander , und alle von ihnen sind, wie Sie sehen können, genau das gleiche mit. Alle diese Bilder sind also der gleiche Witz. Text ist nach links positioniert, wie Sie sehen können, sowie Preise, und wir haben einige Kategorien direkt hier oben als auch. Angenommen, Text und die Navigation bleibt dort, wo es auf dieser Bildschirmgröße ist. Das ist also die Desktop-Bildschirmgröße für meinen Browser. Und wenn ich hier rechts klicke, toe Laurie nach unten ein wenig und wenn sie wie erweitert, so können Sie sehen, dass alle diese Spalten passen und als eine Bewegung vom Desktop und für mit den ganzen Weg nach unten, zum Beispiel, Tablet Größe irgendwo hier herum, können Sie sehen, dass jetzt Hamburger-Menü zeigt, und diese Spalten werden viel kleiner. Und wenn ich den ganzen Weg runter zu Mobile gehe, zum Beispiel irgendwo hier, kann man das sehen. Jetzt haben wir zwei Spalten und auf dem ganzen Weg nach unten auf kleinsten Geräten, die ich Ihnen hier nicht zeigen kann. Sie müssen diese Website auf Ihr Mobiltelefon laden. Alle diese Spalten werden übereinander stapeln, weil sie verantwortungsvoll handeln . So können Sie genau hier sehen. Wenn ich die Größe nach oben und unten ändere, können Sie sehen, wie sie sich bewegen und gerade Fläche bewegen und neu positionieren, wo sie sein müssen. Also, wie gesagt, auf kleinstem Gerät, alle diese Spalten gehen übereinander gestapelt werden, und Sie können deutlich sehen, wie sie auf verschiedene Bildschirmgrößen reagieren. So wie dies abgeschlossen ist, ist diese Website Bootstrap verwendet, und es hat 12 Spaltenraster. Also im Grunde, Sie werden sehen, dass im Design ein wenig später, wenn wir in diesem Kurs zum Entwurf kommen . Aber im Grunde haben wir eine 12 Spalte spielen, und alle diese Karten nehmen vier Spalten jeder. Dieses Bild hat also vier Spalten. Das hat auch für. Das ist auch Krieg. Das sind insgesamt 12, und das ist der Witz aus diesen Spalten. Wie Sie sehen können, sind deshalb die Navigation und dieses Bild auf der rechten Seite und das Logo und dieses Bild sind auf der linken Seite aufgereiht. also Wenn Siealsokleiner und kleiner werden, diese Spalten und der Inhalt innerhalb dieser Spalten an und passen sich an. Also im Grunde weiß es, dass es eine kleinere Bildschirmgröße lädt. So erzählt es es im Grunde dem Mantel. Okay, jetzt lade mir diese Version, und wenn du den ganzen Weg runtergehst, wird dir zeigen, OK, OK, lade mich Dispersion. Und jetzt, wenn Sie hier klicken, wird Navigation Fuß Fuß Fuß innerhalb dieses Hamburger-Menü erscheinen, weil es weiß, dass es sollte es so angezeigt werden. Sie können sehen, dass sich Text genau hier anpasst, und es sieht im Moment nicht hübsch aus, weil wir manchmal nur eine Textzeile haben und dann müssen wir, und deshalb sieht das so aus wie So vielleicht kann ich auf eine andere Seite gehen. Gehen wir zum Beispiel ein Abonnement, damit wir sehen können, wie das aussieht. Und das ist das perfekte Beispiel, weil wir dieses große Bild oben haben, und wenn ich hier klicken und anfangen zu senken, können Sie deutlich sehen, dass sich dieses Bild ausdehnt und dann in der Größe absenkt, so dass Sie es deutlich lesen können alle Bildschirmgrößen. Und jetzt ist das Menü genau hier. Wie Sie sehen können, passt sich der Text an, und das ist das perfekte Beispiel. Als Ausweg, der flüssige Inhalt Text ist einer von ihnen, denn wenn Sie erweitern, können Sie sehen, dass der Text kleiner wird oder in Witz zunimmt. Wie Sie es sehen können, genau hier. Und wenn Sie den ganzen Weg nach unten auf die kleinste mögliche Größe und mit dem Scrollen beginnen, können Sie sehen, dass sich diese Karten auch anpassen. Also, zum Beispiel, wir haben diese Preise direkt hier, so dass Sie es auf Lee als eine Karte auf mobilen Bildschirmgrößen sehen können . Aber wenn ich es verlängere, können Sie sehen, dass es sich um zwei Karten handelt. Wenn ich also den ganzen Weg hierher gehe, kann man sehen, dass sich der flüssige Witz von diesen Karten ändert, denn wenn ich kleiner und kleiner werde, sieht man diesen Witz ab. Jede dieser Karten wird immer kleiner, wie hier, wie hier zum Beispiel, können Sie sehen, dass die Unterseite wird kleiner als auch. Text all diese verschiedenen Textgrößen, zum Beispiel. Alles wird kleiner und wenn Sie auf die Bildschirmgröße des mobilen Geräts gelangen, können Sie sehen, dass sie übereinander gestapelt sind. Also im Grunde gehen sie von 12 Spalten, in denen der ganze Weg hinunter zu einer oder vier verschiedenen Spalten, vielleicht zwei, vielleicht drei, abhängig davon. Verwenden Sie Bootstrap oder etwas anderes? Oder verwenden Sie benutzerdefinierte namens Richard Developer hat Ihnen gesagt. Wenn Sie für Responsive entwerfen, müssen Sie wissen, welche Bildschirmgrößen Sie unterstützen, damit Sie wissen können, wie viele verschiedene Varianten Sie entwerfen müssen. Aber Sie müssen das mit Ihren Entwicklern sehen, weil jedes einzelne Projekt offensichtlich anders ist . Also, wenn die Entwickler zum Beispiel Bootstrap verwenden , müssen Sie sie immer noch fragen, Werden Sie die kleinere oder nur größere Bildschirmgröße unterstützen? Werden Sie Tablet-Größen, mobile Größen und so eine unterstützen ? Sie müssen also wissen, dass im Voraus, bevor ich beginne, für Responsive zu entwerfen, nur damit Sie wissen können, welche Bildschirmgrößen Sie mit Ihrem Design unterstützen werden und noch eine Sache, müssen Sie diese verschiedenen Bildschirmgrößen in Variationen, weil Entwickler einfach nicht wissen, was an diesen verschiedenen Breakpoints passieren wird, und wir werden später verschiedene Breakpoints erklären . Wir beginnen mit dem Design, aber im Grunde auf all diese verschiedenen Größen. Also im Grunde ist das ein Bruchpunkt. Sie können die Navigation genau hier deutlich sehen. Aber wenn ich es hier nur ein bisschen absenke, kann man das auf der etablierten Größe sehen. All diese Stop-Navigation geht in das Hamburger-Menü rechts hier auf der linken Seite. Entwickler müssen also wissen, welche Bildschirmgrößen Sie mit Ihrem Design unterstützen werden, und Sie müssen dann mit Responsive im Hinterkopf entwerfen. Also müssen Sie ihnen alle diese verschiedenen Änderungen zeigen, verschiedene Bruchpunkte, damit sie wissen, wie der Inhalt aussehen wird, wenn sie anfangen zu codieren und tatsächlich die Website Toby Leben zu erstellen. 4. Mobiler erster Ansatz: vor mobilen ersten Websites, die mobile Geräte unterstützt, wurden in der Regel in zwei Websites unterteilt, eine für Desktops und große Bildschirme und angepasste Version für mobile Bildschirme, die Touch-Steuerung enthalten. Dies war ein schlechter Ansatz, weil es bedeutete, dass Sie ASIO anders ansprechen müssen. Sie mussten M sub domain verwenden, wenn Sie die kleinere Site laden, und da Geräte im Vergleich zu heute viel langsamer waren, bedeutete dies, dass die Ladegeschwindigkeiten viel langsamer waren und die Absprungraten ziemlich hoch waren. Als mobile Geräte vor einem Jahrzehnt anfingen, Methodik für Website-Design namens Mobile erschien zuerst, was darauf hindeutet, dass jedes Mal, wenn Sie eine Website entworfen, sollten Sie von der kleinsten Größe beginnen. Sie werden Ihr Design von ihren für größere Geräte unterstützen und anpassen, da immer mehr Datenverkehr von mobilen Geräten kommt. jedoch Heute haben wirjedochin dieser Zeit und Zeit mehrere verschiedene Touch-Geräte von Telefonen, Tablets und Smartwatches. Meiner Meinung nach spielt dieser Ansatz keine Rolle mehr, denn heute, anders als vor einem Jahrzehnt, haben die meisten Geräte die Unterstützung von Microsoft Surface Studio und Geräte wie Touchscreen berührt Laptops, Tablets, Handys und Smartwatches. Sie müssen mit Touch-Unterstützung für alle Größen zu entwerfen. Wenn Sie also entwerfen, sollten Sie immer im Voraus darüber nachdenken, wie Ihre Elemente aussehen oder keine Bildschirmgrößen von weit Outs, wie Smart-TVs bis hin zu Smartwatches. Sie müssen also so entwerfen, wie Sie möchten, solange Sie im Voraus planen, um das Aussehen und die Funktionalität Ihrer Elemente konsistent zu halten . 5. Verschiedene Bibliotheken: Manchmal müssen Sie beim Entwerfen Bibliotheken verwenden, entweder weil Ihr Client dies wünscht oder ihre Entwickler angefordert haben , dass Sie Bibliotheken verwenden und verschiedene Bibliotheken unterschiedliche Herausforderungen und unterschiedliche Funktionalitäten. Also in diesem Video, Ich werde nur Fuß schnell durch drei von im Grunde die beliebtesten laufen. Also diese Air Bootstrap Foundation und eckig und all diese kommen mit unterschiedlichen Herausforderungen und verschiedenen Grundlagen, die Sie als Designer kennen müssen. Also, im Grunde, müssen Sie nicht wirklich wissen, was von diesen. Sie können einfach mit reaktionsfreudigen im Auge entwerfen, und Sie haben toe Immer voraus planen und denken Sie weiter und sprechen Sie einfach mit Entwicklern, bevor Sie mit der Gestaltung beginnen, so dass Sie Rich Screen-Größen wissen können, die Sie unterstützen müssen. Sie müssen wissen, welche Bildschirmgrößen Sie entwerfen müssen, bevor Sie ihnen das fertige Design schicken . Aber Sie müssen darüber wissen, weil dies im Grunde vorgefertigte Elemente und vorgefertigte Größen sind , und Sie haben alles im Inneren von verschiedenen Böden, Schiebereglern, Bildern, Texten, Paginierung und all diese verschiedenen Elemente vorbereitet, so dass sie in fortgeschrittenem auf Responsive Design arbeiten . Also, was auch immer Sie an einem Projekt arbeiten, bitten Sie einfach Ihre Entwickler, in einer Art Off-Bibliothek zu arbeiten . So, zum Beispiel, Bootstrap oder Foundation. Und wenn dies der Fall ist, gehen Sie einfach auf diese Websites und erfahren Sie mehr über diese bestimmte Komponentenbibliothek im Voraus . Du musst also wissen, wann du entwerfst. Zum Beispiel hat Bootstrap eine bestimmte Spalte mit Größe, und sie haben eine andere Spalte vorbereitet, so dass Sie darüber wissen müssen. Wenn Sie nichts darüber wissen, schauen Sie einfach online nach. Im Grunde können Sie sich also ein YouTube-Video ansehen. Sie können auf diese Websites gehen und zur Dokumentation gehen. Oder Sie können auf die Beispiele Teams klicken und so weiter. Und einfach können Sie mehr über ihn erfahren, weil sie diese Komponentenbibliotheken gerne verwenden weil es ihre Arbeit viel schneller macht. Beispiel ZumBeispiel hat jemand bereits alle diese Informationen und all diesen Code vorbereitet, so dass Entwickler einfach diese Kälte verwenden können, wenn sie mit dem Programmieren beginnen, und ihre Arbeit wird viel schneller sein. Damit Ihre Arbeit viel schneller wird, müssen Sie sichmit all diesen verschiedenen Komponentenbibliotheken vertraut machen, an denen Siean diesem bestimmten Projekt arbeiten, damit Sie im Voraus wissen können, was Sie Damit Ihre Arbeit viel schneller wird, müssen Sie sich mit all diesen verschiedenen Komponentenbibliotheken vertraut machen, an denen Sie an diesem bestimmten Projekt arbeiten, verwenden sollten, welche Bildschirmgrößen Sie sollten vier entwerfen, und Sie sollten immer im Grunde fragen, Ihre Entwickler sind sie gehen, um kleinste Bildschirmgröße zu unterstützen , größte Bildschirmgröße und so eine, damit Sie wissen können, was Sie entworfen werden sollten, Bedeutung für und welche Bildschirmauflösungen und -größen Sie unterstützen sollten. Also haben Sie keine Angst, wenn jemand Sie fragt Können Sie eine Website mit Foundation entwerfen? Denn im Grunde bedeutet alles, was bedeutet, dass Sie verschiedene Verstand von diesen Spalten wissen müssen, wie viele Spalten sie sich darin befinden und welche Elemente unterstützt werden und welche nicht. Und Sie können immer herausfinden, dass im Grunde die Docks auf ihren Websites verwenden, und Sie können sich im Voraus vertraut machen, bevor ich beginne zu entwerfen, so dass Sie keine Probleme haben, wenn Sie entwerfen. Später können Sie immer Ihre Entwickler fragen, und es ist immer eine Empfehlung von meinem Zeh. Fragen Sie Entwickler alles, was Sie nicht verstehen, denn wenn Sie anfangen zu entwerfen und Sie bereits mit Ihrer Zeit investiert haben, zum Beispiel Woche oder Monat in ein Projekt, und dann, wenn Sie diese Dateien Entwickler senden dann lernst du, dass du nichts diöerst, nach einem Plan, dann kann es wirklich hektisch sein, alles, was du getan hast, neu zu gestalten, weil du schon diese Zeit verloren hast, für etwas zu entwerfen, das nicht in erster Linie entworfen werden sollte. Um zusammenzufassen, schauen Sie sich einfach die Dokumentation an und sehen Sie, ob es etwas Bestimmtes über jede dieser Komponentenbibliotheken gibt und ob es einfach in Ihr Design involviert ist und lernen Sie im Grunde, wie weiß die Spalten sind, die Anzahl der Spalten und wie sie sich auf das responsive Design verhalten? 6. Device: Wenn Sie entwerfen, sollten Sie Ihre Entwickler immer nach Geräten, Sport und Breakpoints fragen . Das bedeutet, dass Sie Schlepptau haben. Fragen Sie sie, welche Geräte sie unterstützen werden, damit Sie wissen können, wie viele verschiedene, responsive Designs Sie erstellen werden, damit sie zum Beispiel erstellen können, zum Beispiel erstellen können, und nennen Sie es einen Tag, wenn es etwas ist, das sie wollen. So zum Beispiel wollen sie zum Beispieleine große Größe unterstützen. Und vielleicht Tablet-Größe ist verschuldet, weil das ist, wo die Mehrheit von ihrem Verkehr kommt aus. Aber in der Regel müssen Sie mehr als zwei unterstützen, und hier sind wir in der Dokumentation auf den Bootstraps Websites, und Sie können deutlich sehen, dass extra kleine Geräte Portraitformen weniger als 576 Pixel weiß sind . Und das bedeutet im Grunde, dass, wenn Sie ein Layout erstellen, das weniger als 576 Pixel in Witz ist, wie das Design auf diesen Geräten aussehen wird, so dass Sie wirklich über extra kleine Mobiltelefone oder Smart , Watches, die kleiner als 576 Pixel sind. So können Sie das unterstützen, wenn die Entwickler Sie benötigen, um es zu unterstützen und dann von diesen 576 im Voraus zu trauern . Also noch einmal, ich rede nur über den Bootstrap hier. In diesem speziellen Beispiel sollten Sie immer mit Ihren Entwicklern sprechen und mehr darüber erfahren, welche Komponentenbibliothek sie verwenden werden, falls vorhanden, und Sie können dann weitermachen. Zum Beispiel können Sie sehen, dass kleine Geräte Landschaftsformen 576 und höher sind. Mittelgroße Geräte, was Tabletten und höher bedeutet, gehen von 768 und wit. Und dann bewegen wir uns zu einem großen Gerät, so dass Desktops und, zum Beispiel, größere Laptops sind neun zu einem Extra. Große Geräte sind große Desktops, die von 1200 Pixeln und höher gehen. All dies bedeutet also, dass Sie im Grunde fünf verschiedene Größen aus Ihrem Design erstellen müssen um all diese unterschiedlichen Anforderungen zu erfüllen. Wenn Ihr Client und Ihre Entwickler fordern es Zehe so noch einmal, wenn sie nur unterstützen wollen, zum Beispiel, drei Größen, so dass sie mobile Tablet und große unterstützen wollen. Das ist es, wofür Sie entwerfen müssen. Und im Grunde, wie ich bereits mehrmals in diesem Kurs sagte, müssen Sie mit reaktionsschnell entwerfen, Also jede einzelne Komponente, die Sie entwerfen. Sie müssen im Voraus darüber nachdenken, wie es auf diesen verschiedenen Gerätegrößen aussehen . Egal, ob Sie Bootstrap oder Foundation oder irgendetwas überhaupt verwenden, Sie müssen entwerfen, dass alle Ihre Komponenten auf den Fuß passen und funktionieren wunderschön über all diese verschiedenen Bildschirmgrößen. Deshalb ist die Geräteunterstützung wirklich unerlässlich. Und bevor Sie mit dem Design beginnen, sollten Sie immer Ihre Entwickler und Kunden fragen, welche Geräte Sie unterstützen werden , damit Sie wissen können, wie viele verschiedene Ports Sie innerhalb von Adobe X erstellen werden um diese verschiedenen Entwürfe und Bruchpunkte. 7. Design für Telefone: Ah, viele Designer werden eine weit aus für Desktops entwerfen und dann verschiedene unsere Boards in Adobe X T erstellen . Denn ich wette, iPhone und Android passen das Layout an und nennen es einen Tag. Dieser Ansatz ist falsch, da Sie davon ausgehen, dass alle Benutzer mit nur diesen drei Geräten auf die Website zugreifen . Das ist, wenn die Website bricht, denn wenn jemand von einem anderen Gerät besucht, wird die Website nicht unterstützt und es wird nicht richtig funktionieren. Beide Größen sind spezifisch für mobile APS, da sowohl IOS als auch Android für die Arbeit mit bestimmten Komponenten entwickelt wurden, die von Anfang an für diese Betriebssysteme erstellt wurden. Wenn Sie also Ihre Website in einer Größe laden, die nicht von ihr unterstützt wird, haben Sie Usability-Probleme, Ladeprobleme, Elemente, die nicht richtig angezeigt werden, und mehr, dass wir unsere Bohrungsgrößen für mobile APS verwenden sollten , Onley und für reaktionsschnelle Websites. Sie sollten Breakpoints und Gerätegrößen verwenden, die Sie von Anfang an unterstützen werden 8. Zeitmanagement: vor Adobe X'd, bis es ähnlich ist. Sie müssen jede Größe separat gestalten und die Elemente auf sehr zeitaufwändige Weise anpassen . Aber weil Ecstasy mit der Geschwindigkeit im Hinterkopf erstellt wird, mit seiner Responsive Responsive Resize Funktion können Sie mit seiner Responsive Responsive Resize Funktionziemlich schnell für verschiedene Größen entwerfen. Die Hauptsache, auf die Sie sich konzentrieren sollten, ist, vor einem Design zu denken und im Voraus zu planen, wie Ihre Elemente auf verschiedenen Bildschirmgrößen aussehen werden. Und im nächsten Abschnitt des Kurses werden wir mit dem Design fortfahren. Wir werden die Zion-Briefung lesen, etwas planen und anfangen, unsere Website zu entwerfen und dann an verschiedene Größen angepasst, die der Kunde unterstützen wird, also werde ich Sie dort sehen. 9. Einführung in das Design: in diesem Teil des Kurses werden wir uns mit Design beschäftigen. Und ich werde Ihnen zeigen, wie ich diese Design-Studio-Vorlage erstellt habe, die Sie kostenlos herunterladen und für Ihre persönlichen und kommerziellen Projekte verwenden können. Wir werden es teilen. Wir werden tief in die Frage eintauchen, wie Sie es selbst erstellen können, wenn Sie wollen. Ich werde Ihnen alle Ressourcen geben, die verwendet werden, um es zu erstellen, und dann werden wir ein ansprechendes Design mit dieser genauen Vorlage erstellen. Also lasst uns schnell durchlaufen, was wir hier haben. Wir haben diese einfache Navigation an der Spitze. Dann haben wir ein schönes großes Heldenbild mit zwei Knöpfen. Wir haben ein paar Patenschaften und Agenturen, mit denen diese Agentur in der Vergangenheit zusammengearbeitet hat . Dann haben wir über uns Abschnitt. Dann haben wir hier einen weiteren Abschnitt mit dem Text. Wir haben ein paar Futures. Dann haben wir schöne große Preise mit drei Preisstufen. Dann unten, wir haben einige nette Zeugnisse unten, wir haben einen Aufruf zum Handeln. Wir haben den Blockabschnitt und schließlich haben wir den Schwimmer unten. Also, was wir verwenden werden ist, dass ich Ihnen diese genaue Datei geben werde. Sie werden also alle diese Farben erhalten. Du wirst all diese Charakterstile erhalten und wir haben Open Sense verwendet, was kostenlos ist. Kühlende Vorderseite. Und ich werde Ihnen einen Link geben. In einer pdf-Datei, Sir kann einfach herunterladen und offenen Sinn in diesem und allen zukünftigen Projekten verwenden, wenn Sie wollen , wenn Sie wollen sowie Carla, das ist wieder kostenlos Google Front, die Sie nicht wieder, Donald und Nachrichten in Ihren Projekten. Also, was wir hier oben haben, sind Bootstrap, tolle Größen. Wenn ich also auf einen der Flughäfen klicke, zum Beispiel diesen und auf den Großen klicke, kannst du sehen, dass alle diese Vorlagen großartig im Inneren enthalten sind. Und eine große ist ein bisschen anders, vor allem für diesen Baum am Ende. Und wir werden es in den zukünftigen Videos durchkommen. Aber ich werde schnell erklären, dass einige davon Ports sind. Also werde ich wählen, Bootstrap in diesem Beispiel zu verwenden. Und wie ich in früheren Videos im Gebetsabschnitt aus dem Kurs sagte, können Sie einige andere Responsive Noten verwenden, wenn Sie wollen, oder Sie können Ihre eigenen erstellen. Es liegt an Ihnen, Ihrem Design und vor allem Ihren Entwicklern, denn es hängt alles davon ab, ob sie es mit ihrem Zitat unterstützen werden. Also in diesem Beispiel werden wir Bootstrap verwenden und wir werden fallen Spalte Raster verwenden. Also, wie gesagt, wenn ich hier klicke und zu meinem Layout gehe, können Sie sehen, dass für extra große Desktops, die über 1200 Pixel sind, in denen wir 12 Spalten haben, Erwitt aus 30 bekommen hat, es von 65. Und das sind die Ränder, die sowohl für die linke als auch die rechte Seite verknüpft sind, so dass Sie dort sehen können 1 65 Also in diesem Fall, Spalten sind diese hellblauen Spalten, die Sie hier sehen, und Sie können rechts hier klicken und Sie verurteilen eine niedrigere. Bezahlen Sie hier Stadt, wenn Sie wollen, so können Sie leicht sehen, das Design hinter all diesen Spalten. Sie können, wenn Sie sich entscheiden, ändern Sie die Farbe zu welcher Farbe Sie wollen, wenn das etwas ist, das Sie wollen, aber ich werde wählen, es zu verwenden 25%, nur damit Sie es ein bisschen besser sehen können. Dann haben wir nächste Zehe extra groß, die stoppt, die wieder über 200 Pixel sind, in denen wir eine große Geräte haben, die Desktops bis zu 992 Pixel sind, in denen wir als nächstes mittlere Tabletten haben, die bis zu 7 68 Pixel sind, in denen wir haben kleine Geräte Tablets, die bis zu 576 Pixel in Wit sind. Und schließlich haben wir extra kleine Geräte, die unter 576 Pixel in Witz gebildet sind. Wenn ich also auf dieses klicke, kannst du sehen, dass wir vier Spalten haben, denn noch einmal ist dies ein wirklich kleiner Witz von deinem Bildschirm. Sie werden also die letzten Spalten verwenden, da es keinen Grund für Sie gibt, 12 Spalten auch für diese zu verwenden . Als nächstes haben wir acht Spalten für kleine Geräte und Tablets. Wir haben 12 Spalten für Medium- und Geräte-Tablets, und dann haben wir Telkom für diesen und auch für diesen. Nun, wenn Sie diese großen Websites entwerfen, können Sie sich vorstellen, dass diese Ränder links und rechts, im Bundesstaat leer sind. Aber was passiert, ist nur vorstellen, dass jemand Ihre Website auf einem extra großen Bildschirm ansieht. So zum Beispiel haben Sie zum Beispielalle diese modernen gebogenen Bildschirme, und sie haben diese großen Ränder links und rechts. Also, was passiert dort? Du bist tolle Aufenthalte genau gleich, und es bleibt genau gleich. Wit, und dieser Container ändert sich nicht, aber diese Ränder ändern sich. Sie haben also wirklich zwei Möglichkeiten. Sie können dieses Bild zum Beispiel links und rechts erweitern , so dass Sie diesen dunkelblauen Kragen hier sehen können. Sie können es beliebig nach links und rechts erweitern. Wenn das etwas ist, das du willst. Wenn es sich um ein Bild handelt, kann es die linke und rechte Zehe skaliert werden. Spüren Sie den ganzen Bildschirm. Oder Sie können mit Ihrem Entwickler sehen, um ein schönes Box-Layout zu erstellen, so dass Sie sich vorstellen können , dass dies, wenn ich direkt dort klicke, Sie sehen können, dass es 1440 Pixel weiß ist. Stellen Sie sich vor, dass dies Ihr Container ist, und alles außerhalb, dass 14 40 Pixel nicht in der Box enthalten werden, wird außerhalb der Box enthalten sein, also können Sie sich vorstellen, dass Sie eine Hintergrundfarbe setzen können, zum Beispiel. Sie können das Hintergrundbild, das auf all diesen extrem großen Bildschirmen skaliert wird , setzen. So können Sie sich manchmal vorstellen, vor allem innerhalb der Unternehmen. Die Menschen sehen diese Websites auf großen Fernsehern. Zum Beispiel gibt es Mikrooberflächengeräte, die extrem weiß sind. Zum Beispiel 10.000 Pixel in Wit. Und genau hier, wenn ich mich richtig erinnere. Ja, wir haben 1440 Pixel im Witz, also kannst du dir vorstellen, wie kleine Schulden auf dem Bildschirm aussehen werden. Das ist, warum Boxed Layouts sind gut, weil Website wird nicht verlieren. Qualität wird bis zu dem Punkt skaliert, an dem Entwickler entscheidet, dass die Skalierung aufhören wird . Und dann, nachdem das Box-Layout zu Fuß geht, erweitern Sie mit dem Hintergrund und wird alles enthalten, was in diesem Container genau hier drin ist . Und Ihr Design wird im Grunde gleich bleiben. Aber die Außenseite von dieser Box wird schön skalieren, um den verbleibenden Bildschirm zu fühlen. Also hoffe ich, dass Desk, der einige der Dinge mit dem responsiven Layout und Bootstrap für unseren Fall klärt , und lassen Sie uns jetzt schnell durch unsere Designs laufen. Also werde ich auf einen der Flughäfen klicken und hier klicken, um die Noten zu verbergen. Für den Moment werde ich auch hier klicken, um das Asset-Panel Hit Control Null zu verstecken, um in Position zu rasten , und ich gehe toe zoomen ein wenig näher. Sie haben also extra große Desktops gesehen, bevor zu Beginn dieses Videos sehen können, Siezu Beginn dieses Videos sehen können,wie es aussieht. Und jetzt, wenn ich alle meine Leertaste und navigieren Sie hier, können Sie sehen, wie es aussieht wie eine nächste Gesetz Garage Geräte. Diese Illustration wird also proportional skaliert. Und wenn Sie sehen, oder mittlere Tabletten und den ganzen Weg nach unten auf kleine Bildschirme wird ein bisschen anders aussehen , als es jetzt ist. Das liegt daran, dass ich diesen Text bis hier spüren wollte. Wie Sie sehen können, sehen diese Abschnitte mit den vorherigen Kunden und über uns hier genau gleich aus, sowie auf extra großen hier. Aber sie beginnen, sich für mittlere Geräte, Tablets und kleine Tablets zu ändern , und vor allem für extra kleine dort. Ich benutzte Illustration, um an der Spitze zu kommen und Text an der Unterseite zu kommen und im Grunde, wie Sie sehen können, wie wir nach unten gehen. Diese Abschnitte werden sich ändern. Also haben wir vier hintereinander hier. Es gibt ein bisschen näher hier, aber sie reagieren auf rece ice Ein bisschen besser hier, weil sie zu in der Straße sind, nur weil aus dem Raumproblem und auf Ihrer mobilen Größe, wie Sie dort sehen können, eine oben sich gegenseitig absetzen. Nun, wenn wir mit der Preisgestaltung zurückziehen, geht ST Ng für das So können Sie auf diesen Desktops Größen dort drei in Reihe sehen. Aber genau hier auf Tabletten auf großen Tabletten Es gibt zwei in einer Reihe mit einem unten auf kleinen Tabletten in gibt es drei einschreiben wie diese. Wie Sie sehen können, wird dieser Container so skaliert, dass er in den verbleibenden Raum passt. Und schließlich, für die extra kleinen Größen und Formen, können Sie sehen, dass sie übereinander stapeln. Nun, das ist für dich auf den Punkt gebracht, und wir werden ein bisschen eingraben, und ich werde dieses Design nicht von Grund auf neu erstellen, aber ich werde jeden Abschnitt im nächsten Video durchgehen, und ich werde Ihnen sagen, wie ich es erschaffen habe. Aber lassen Sie uns schnell durchlaufen, nur damit Sie einige Unterschiede sehen können. Wie Sie hier für die Testimonials sehen können. Wir haben drei hier. Wir haben zwei hier. Wir haben auch eins. Als was? Diese beiden für den Block, den wir in diesem Abschnitt haben. Also 33 hier. Wir müssen Pfosten blockieren. Hier hören wir eins. Und hier haben wir auch einen. Und Sie können sehen, dass das Bild im Vergleich zu diesen vorherigen gut skaliert. Schließlich ist der Ordner auf allen von ihnen genau gleich, mit Ausnahme der mobilen Größe. Weil wir diesen Text übereinander stapeln müssen und weil sie nach unten scrollen , ist es wirklich egal, ob Sie einen übereinander setzen. Aber ich entschied mich für Rose zu verwenden, weil es für den Benutzer viel einfacher ist, auf eines dieser Menüelemente zu klicken , weil sie so gestapelt sind. Das ist also, was wir im nächsten Video angehen werden. Und ich werde Ihnen zeigen, wie Sie dieses Design auch kreieren können. Wenn Sie wollen, werde ich Ihnen zeigen, wie Sie einige dieser Vermögenswerte nutzen können. Und dann, wenn wir dieses Design erstellen möchte Ihnen zeigen, wie Sie es erstellen können. Dann werden wir einige dieser ansprechenden drei Größen in Angriff nehmen. Und ich werde Ihnen zeigen, wie Sie diese Website Design Zehe reduzieren können. Sieh genau so aus. Also sehe ich dich im nächsten Video. 10. Page: In Ordnung. Also, um loszulegen, ich werde einfach hier klicken, um eine 1920 mit 10 zu erstellen. 80 am Startbildschirm. Und was ich tun werde, ist einfach in meine ursprüngliche Datei zu springen und ich werde zuerst das Raster kopieren . Ich werde es hier anheften. Dann werde ich es einfach tun, weil ich es meine. Wir haben nur das Originaldokument erstellt. Dann Bill Odette. Ich werde mein Website-Design auf der extra großen Größe verwenden und ich werde ein wenig näher zoomen und so etwas positionieren. Dann werde ich das tun, was es ausgewählt hat. Ich kann einfach auf meine Farben klicken. Wie Sie sehen können, zeigt es all diese verschiedenen Farben, aber ich will es nicht. Wir können Farbe für Farbe gehen, und ich werde zeigen, wie Sie das tun können. Außerdem können Sie Zeichenstile verwenden. Wie Sie sehen können, haben wir alle diese verschiedenen Charaktere Stile hier. So können Sie das tun, wenn Sie wollen, oder Sie können diese Dinge einfach halten. Aber ich mag dies zu tun, weil es all diese verschiedenen Charaktere Stile in verschiedenen Farben zeigt , so dass Sie einfach auf ihn zugreifen können. Es geht nicht auf die Zehe. Bestellen Sie sie nach Größe, was ziemlich ärgerlich ist. Also, was Sie tun können, ist einfach jede Bestellung, einige von ihnen. Und ich werde das einfache Klicken und Ziehen machen, und ich werde das Video pausieren, bis ich all das gemacht habe. Und jetzt, da ich das getan habe, möchte ich meine Farben auswählen, damit Sie die Kontrolle oder den Befehl drücken können. Klicken Sie auf eine dieser und Sie können auf Ihre Farbe klicken. Dann kann ich dasselbe für diesen Boden tun. Vielleicht ein Zoom ein bisschen näher, nur damit du sehen kannst, was ich tue. Ich kann dasselbe für den Knopf tun. Ich kann dasselbe für diesen Hintergrund tun. Ich kann dasselbe für den Dis-Text tun. Mal sehen. Ich kann das gleiche für den Text darunter tun, und lassen Sie uns einen unter Farbe wählen. Also sind es Juden, etwas leichteres. Also mal sehen, welche von ihnen ist es? Alle von ihnen sind 70 70. Mal sehen, vielleicht ist es das hier. Nicht suchen, wirklich eine neue Form wie diese erstellen. Ich gehe Zehe entfernen Sie die Grenze und für die Farbe verwendet so etwas wie acht F acht F acht f Lassen Sie uns ein Moderator oder zurück und dann werde ich hier klicken, um diese Farbe auszuwählen. Nun, da dies meine Hauptfarbe ist, werde ich einfach klicken und ziehen Sie es oben und einfach bestellen Sie sie aus den Dockers, um uns Farbe zu erfreuen. Nun haben wir auch diese Akzentfarbe hier, die aus irgendeinem Grund nicht aufgenommen wurde. Wie Sie sehen können, ist das unsere Farbe hier in der Abbildung genau hier auf den T-Shirts. Das ist also so eine rote Farbe. Also, diese Farbe wieder werde ich hier klicken ist F f 6584 und wollen hier klicken und positionieren Sie es gemacht alot diese beiden. Jetzt, da wir unsere Farben und unsere Charakterstile haben, werde ich einfach dieses Panel für jetzt verstecken und ich werde Ihnen zeigen, wie ich dieses Website-Design erstellt habe . Also werde ich hier klicken und auf Insight klicken. Wie Sie auf der Navigation sehen können, haben wir Logo, das ist nur zwei Texte und im Grunde hat dies gemacht Jetzt eine schnell bekannt, bevor ich ein Eins bin. Wenn Sie lernen möchten, wie man Designs für Websites von Grund auf neu erstellt, habe ich einen speziellen Kurs darüber, in dem wir über Design durchlaufen. Kurz über die Erforschung Ihrer Konkurrenz darüber, wie Sie clever in der Positionierung sein können, wie Sie mit Ihren Kunden sprechen können, wie Sie das Design nicht verstehen können. Kurz, wie Sie sich an die Frist halten und wie Sie von der Idee gehen können. Ziehen Sie Drahtrahmen zu vollwertigem Design, und dann können Sie dieses Design für Entwickler exportieren. Aber da es sich bei diesem Kurs um Responsive Größenänderung handelt , mache ich es deshalb so. Und ich werde Sie nicht zu viel darüber langweilen, wie Sie ein Website-Design von Grund auf neu erstellen können . Wenn Sie nicht wissen, wie das geht, können Sie einfach in diesen Kurs springen, und Sie können alles über Website-Design von Grund auf lernen. Wie sie sagten, ist dies nur für responsive Website-Design. Alles, es ist mehr, wie ich sagte, Hier ist das Logo hier sind auf den Menüpunkten, so dass Sie sehen können, ich bestellte sie von links nach rechts von oben nach unten. So wie so. Dann haben wir Demo-Button. Wie Sie sehen können, erhalten Sie eine Demo nbt und für den Boden. Jetzt bewegen wir „Gehören“. Wir haben hier einen Text, der dieser Text ist, genau hier haben wir die H und H zwei. Wir haben Demokraten und unten haben wir mehr darüber erfahren. Dann haben wir Helden Illustration und Formen. Lassen Sie mich schnell Hill Held Illustration abdecken. Also, um diese Illustration zu bekommen, ging ich einfach zu Plug ins. Und wenn Sie dieses Bloggen nicht haben, können Sie einfach hier klicken und es finden jeden Stall es, aber es heißt andro. Und in Andhra, können Sie einfach klicken und Sie haben alle diese erstaunlichen kostenlosen Illustrationen, die Sie verwenden können, um Ihre persönlichen als auch kommerziellen Projekte und innen, dass Sie einfach eingeben können , was Sie wollen. Also denke ich, ich habe Design verwendet und es wird all diese verschiedenen Design-Demonstrationen durchsuchen . Wie Sie sehen können, hat es diese erstaunlichen Illustrationen, die wirklich sollten Sie überprüfen, und Sie können sie in Ihren Projekten kostenlos verwenden . Natürlich. Danke, Toa. Diese Person hier, die erstaunlich genug war, um all diese Illustrationen zu teilen. Also im Grunde, wenn Sie Ihr Design finden, kondensieren Sie. Wählen Sie einfach es aus, zum Beispiel, das dieses verwendet hat. Klicken Sie darauf und Sie können einfach fertig werden und Sie können irgendwo außerhalb Hit Control V kommen, und es wird in Ihrem Design jetzt einen Hauptnachteil über in diesen Illustrationen basieren . Wie Sie sehen können, kommen sie als Gruppe. Wenn Sie diese Gruppe öffnen, wird jedoch kein einzelner Layer benannt. Das ist also ein großer Nachteil, denn wenn du etwas finden willst, musst du wirklich durchklicken und sehen, was es ist. Wenn Sie etwas wirklich schnell ändern möchten, können Sie das nicht tun, weil Sie auf mehrere Ebenen klicken und dann ihre Farben ändern müssen. In unserem Fall können Sie einfach die Befehlstaste halten, und Sie können hier klicken, um in diese Ebene zu springen. Aber dann musst du deine Shift-Taste gedrückt halten, um hier rein zu springen. Dann hier, dann hier, und wenn Sie diese ändern wollen, können Sie direkt hier springen und dann die Zehe ändern, die eine Farbe haben, die Sie wollen. Das ist also ein bisschen ein Nachteil, aber sobald Sie schon bekommen, können Sie dankbar sein. Es sind nur erstaunliche Illustrationen und sie sind kostenlos. Sie können sie wie gesagt in persönlichen und kommerziellen Projekten verwenden. Also lasst uns durch unsere Illustrationen springen. Alles, was ich hier getan hatte, Ja, wenn ich es öffnen, Ich teilte den Charakter sowie die Haupt-Illustration Punkt. Also, wie Sie sehen können, hier ist unsere Illustration und hier ist unsere Person. Das sind also all die Dinge, die ich getan habe, weil ich sie später für alle unsere anderen Illustrationen ändern möchte . Und es ist viel für alle unsere Größen, und es ist viel einfacher, dies zu tun und auf diese Weise, wenn Sie sie jetzt in verschiedenen Ordnern für die Formen im Hintergrund getrennt haben , alles, was ich getan habe, ist im Grunde eine Form zu erstellen, und wenn ich hier drinnen sprang, habe ich wirklich in der Nähe Zutat verwendet, die auf dieser Seite weiß ist, leer auf der Website. Also, wenn ich darauf klicke, können Sie sehen, dass es bei Null ist oder zahlen Stadt. Es geht von oben nach unten, und ich reduzierte auch Sie zahlen Stadt auf 20% genau hier. Das ist alles, was ich für all diese Formen getan habe. Und schließlich, für diesen großen, benutze ich einfach eine Moschee Zehendecke den Teil von diesem Helden Bild, und diese Moschee wird nach unten skalieren, während wir mit dem Rest von den Größen in den nächsten Videos fortfahren . Aber Sie können sehen, es ist nur der Platz mit koordinierten oder 50. Ich habe genau das gleiche Gefühl für all diese Formen verwendet, oder im Grunde, denn es ist bei 10%. Nur so ist es viel einfacher, Bill hinter diesem Text zu sehen. Also im Grunde, das ist alles, was ich für diesen Abschnitt getan habe. Wenn wir uns darunter bewegen, haben wir all diese unterschiedlichen Logos. Ich benutze sie einfach kostenlos aus dem Internet. Aber Sie werden natürlich Ihre Kunden, Logger direkt hier oder Ihr eigenes Logo einschließen . Wenn Sie unten ein Design wie dieses für Ihre eigene Agentur erstellen, haben wir eine weitere Illustration aus derselben Quelle, also ist es von andro. Wieder einmal können Sie es an Sie sehen können, Ich benutze einfach genau die gleiche Verwaltung Aziz sie anbieten. Aber ich habe gerade diese Hintergrundfarben hier geändert, um die Farben von meinen Knöpfen und einen Text genau hier darunter zu entsprechen , wir haben nur einen Text und wir haben das hier geteilt und es ist schön, dieses Alter mit diesem Absatztext direkt hier. Darunter haben wir diese schönen kleinen Symbole und wir haben alle diese Funktionen unterteilt in Abschnitte Erwartete Teiler Ike will auch. Jetzt ist dieser Abschnitt genau der gleiche wie der Heldenbereich. Alles, was ich getan habe, ist, dass ich gerade die Preise hier angegeben habe. Und wir haben diese großen Böden für einen Paketkauf und alle. Ich habe getan, um es ein wenig von der Homepage von der Heldenabteilung hier zu unterscheiden . Ich habe gerade einige dieser Elemente bestellt um, und ich habe genau das gleiche für diesen Aufruf zur Aktion Abschnitt gebaut für die Zeugnisse, die ich wieder diese freien Logos verwendet habe , und ich habe nur einige zufällige Text und einige zufällige Namen verwendet, und ich verwendet diese beiden Pfeile, so dass Benutzer durch Website nach links navigieren können. Und genau darunter benutze ich dieses Problem mit der Schaltfläche genau die gleiche Einrichtung und schließlich für die Blockposts und Fußzeile werden wir Poster blockieren. Sie können sehen, wir haben drei Block-Posts, und wenn ich es öffnen, können Sie Post 123 und innerhalb jedes Beitrags haben wir Bild. Dann haben wir den Zeitstempel genau hier haben wir im Absatztext. Wir haben Avatar von der Person, die den Text schreibt, und wir haben den Namen der Person. Gleiches für alle drei. Wir haben Taste für alle sehen und wird Sie in den Block Strand nehmen. Wie Sie sehen können, ist es hier verlinkt und endlich haben wir das weitere So wieder ist es Logo. Es sind all diese verschiedenen Menüpunkte. Wir haben Social-Media-Symbole unten, und schließlich dieser Text unten, so dass Sie dieses Design sehen können. Es ist wirklich ganz einfach. Es ist wirklich ziemlich einfach zu erstellen. Und wie gesagt, ich werde dich nicht langweilen und zu viel Zeit für den Diskurs mit ihr verschwenden. Sie können dieses Website-Design erstellen, wenn Sie das noch einmal lernen möchten, haben Sie einen Kurs darüber, wie Sie ein Website-Design von Grund auf neu erstellen können, und in ihm werden Sie in viel mehr Details zu erkunden, wie Sie Websites wie diese und wie Sie sie an Liegen verkaufen können. Grundsätzlich, wenn Sie diese Pitch perfekte Design-Briefung erstellen, die wirklich in Stein geschrieben ist, so dass sowohl Sie als Designer als auch Ihre Kunden werden es zum Tee folgen, weil Sie gehen, um alles im Voraus zu vereinbaren und Sie gehen um die Website sowie ihre Wettbewerbe Website zu recherchieren Wirklich gut, so dass sie es wirklich verstehen können und Sie können leicht folgen, dass Design kurz. Also nochmals, wenn Sie interessiert sind, können Sie es überprüfen. Aber wenn nicht, dann können wir mit diesem Kurs weitermachen. Und im nächsten Video werde ich Ihnen zeigen, wie Sie diese bestimmte Website herunterskalieren können und wir gehen mit jedem Video darüber, wie Sie die Größe auf dieser Website ändern können, damit Sie ein voll reaktionsfähiges Design erhalten können , das Sie teilen können mit Ihren Entwicklern. 11. Wie reaktionsstarke Größe funktioniert: Responsive Design ist im Grunde Website reagiert auf das Gerät, das der Benutzer sieht es auf. Also, wenn Sie auf den Bildschirm des Telefons schauen, Responsive geht Zehe. Passen Sie sich an diese spezielle Form Bildschirm, um genau richtig aussehen, um leicht zugänglich aussehen, so dass Sie leicht alle Informationen durchsuchen können, die diese Website auf dem Bildschirm des mobilen Geräts zu bieten hat . Es versteht sich von selbst, dass es auf all diesen anderen Geräten genau gleich funktioniert. Wenn Sie also auf einen Desktop schauen, gelangen Sie im Grunde auf die Desktop-Version davon. Wenn Sie auf einem Mobiltelefon suchen, Sie erhalten eine Handy-Version davon, und es funktioniert Genau das gleiche auf all diesen anderen Geräten ist ein zeigte Ihnen im ersten Video aus dem Design-Teil aus diesem Kurs, weil es Anpassung verantwortungsvoll gegenüber den Geräten, auf denen Sie Ihre Website anzeigen. Wie übersetzt sich das auf das Gestaltungsteil? Nun, es ist ziemlich einfach in Adobe Exit, weil sie diese nette, reaktionsschnelle Größenänderungsoption haben , so dass Sie diese Option für die Antwortgröße von hier aus aktivieren können, und es wird die Größe dieses gesamten Designs reaktionsschnell ändern, da es denkt, dass es meiner Meinung nach sollte, und nach meiner Erfahrung funktioniert es nie so, wie es sollte. Sie müssen also immer diese Responsive Größenänderung anpassen. Und meiner Meinung nach sollten Sie es immer verwenden. Aber Sie sollten es immer Teil für Teil verwenden, von Ihrem Design, nicht das gesamte Design auf einmal. So, wie es funktioniert. Grundsätzlich, wie Sie sehen können, können Sie diesen Kampf einfach ein- und ausschalten, und Sie können hier auf den Rand Ihres Designs klicken, und Sie können es einfach anpassen. Und Sie können sehen, dass es versucht, alle diese verschiedenen Komponenten zu erarbeiten und wie es auf die Reaktion geht . Schauen Sie sich all diese anderen Größen an. Also, wie Sie sehen können, sind wir bei 3 95, was im Grunde unser mobiles Design an dieser Stelle ist. Aber wie Sie sehen können, sieht keine dieser Komponenten so aus, wie sie sollte. Wenn Sie also Steuerelemente drücken, die zurückkommen, können Sie immer in Abschnitt für Abschnitt springen. Und wenn Sie das tun, können Sie alle diese anderen Einstellungen sehen. Also haben wir hier eine Polsterung. Sie können das Padding für Gruppen aktivieren oder deaktivieren, und im Grunde können Sie wählen, welches Klopfen Sie zwischen all diesen verschiedenen Elementen haben . So unterschiedliche Watte für jede Kante oder gleiche Watte für alle Kanten. So können Sie sehen, dass wir eine rechte Kante Polsterung bei 1 65 haben, was diese Wetten genau hier ist. 1 65 ist hier. Wir haben Top-Edge-Bettwäsche in unteren Rand Wetten und Sie können all diese verschiedenen Maßnahmen verwenden , um sie so einzurichten, wie Sie wollen. Und es geht zu Fuß, wenn du sie aufstellst. Geht verantwortungsvoll die Größe aller dieser Komponenten zu ändern. Aber was es nicht tun kann, ist, die Komponenten nicht übereinander zu stapeln. Wenn Sie sich an das Beispiel erinnern, das ich Ihnen vorhin gezeigt habe, lassen Sie mich es hier ziehen. Und wenn ich es vergrößere, könnten Sie sehen, dass ich responsive Responsive Resize und Responsive Design im Allgemeinen verwende, um zum Beispiel die Steuer oben auf diese Abbildung zu positionieren zum Beispiel . Das kann nicht in Adobeeiern tun. Du musst diese Dinge manuell erledigen. Also im Grunde, responsiv Größe ist da, um Ihnen zusammen mit Ihrem responsive Design Venture zu helfen. Aber im Grunde kann es nichts und alles für dich tun. Du musst ein paar dieser Dinge selbst machen. Außerdem können Sie die Responsive Größe Auto verwenden, so verwenden Sie automatische Wieder Größenbeschränkungen oder Sie können auf das Menü klicken und im Grunde, wie Sie es beheben werden und wie es geht toe aussehen, wenn Sie responsive verwenden, so dass Sie fixieren Witz und fixieren Höhe. Aber Sie können zum Beispiel rechts hier klicken , und jetzt wird es nach oben fixiert und nach links fixiert. Also, wenn ich und zoomen ein wenig klicken Sie auf unseren Port in klicken Sie rechts hier, Sie können sehen, dass es auf der linken Seite fixiert und nach oben fixiert bleibt. Jetzt können Sie das für die Komponenten tun, oder Sie können das für diese verschiedenen Elemente innerhalb Ihres Designs tun. Also, wenn ich hier genau die gleichen Einstellungen verwende, und wenn ich beginne, es neu zu dimensionieren können Sie sehen, dass es die Einschränkungen links hält, rechts oben unten als ihre festen rechts dort. Und es wird Zeh an der Spitze befestigt und nach links fixiert. In diesem Fall können Sie sehen, dass das responsive Design gut funktioniert bis zu einem Punkt, an dem es anfängt zu brechen, und dann müssen Sie in dieser Höhe springen, Art von Weizen, das 9 78 Pixel an dieser Stelle ist, und Sie haben um etwas zu tun. Es wird also jederzeit einwandfrei funktionieren. Also im Grunde, Schreibtisch, wie Responsive Größenänderung funktioniert und im nächsten Video, werden wir anfangen, es neu zu dimensionieren. Also werden wir diese große erstellen, die Sie hier sehen können, und wir werden von extra großen Desktops, zu großen Geräten wechseln . Und ich werde Ihnen zeigen, wie Sie dieses Design Zehenarbeit an großen Geräten anpassen können, die aufhören . 12. Ein reaktiveres Design: Lassen Sie uns nun mit Responsive Design beginnen. Wie im ersten Video gesagt, Stellen Sie sicher, dass Sie mit Ihrem Entwickler darüber sprechen, wie können Sie entwerfen, wenn sie Bootstrap verwenden wenn sie eckig oder etwas anderes verwenden, wenn sie ein benutzerdefiniertes Grid-System verwenden, wenn sie überhaupt kein Grid-System verwenden? Wenn Sie selbst ein großartiges System erstellen müssen, dann sprechen Sie einfach mit Ihrem Entwickler im Voraus, bevor Sie überhaupt mit dem Design beginnen, so dass Sie wissen, wie es geht, um die Anpassung, sobald Sie Ihr Design erstellt haben, und jetzt müssen Sie es anpassen manuell, nicht eine weitere Seite. Hinweis: Wenn Sie mit extra klein beginnen. So beginnen Sie mit der Telefongröße, zum Beispiel, und Sie wollen es anpassen toe extra groß dort stoppt oder eine Zeit, dann funktioniert es genau das gleiche. Also gehst du genau gleich mit den Zeh. Passen Sie alle diese Komponenten und verschiedene Größen an, um diese verschiedenen Bildschirme so viel zu passen. Jetzt fangen wir an. Ich werde hier klicken, Control de drücken, um dieses zu duplizieren. Ich werde es direkt hier positionieren, unter einem großen Gerätedesktop. Ich werde doppelklicken Sie auf den Namen, den er steuern würde, sehen Doppelklick rechts hier Hit Kontrolle der und jetzt werde ich tun, ich werde einfach hier klicken, so dass ich all diese verschiedenen Größen sehen kann. Also im Grunde ist es 10. 24 mit Witz, also werde ich das tun. Zuerst können Sie in diese manuell einsteigen, indem Sie einfach hier klicken und zu 10 gehen. 24. Aber wie Sie sehen können, bricht das Layout ziemlich viel. Also werde ich das nicht tun. Ich werde einfach hier klicken und 10 24 so verwenden. Aber ich werde die Verantwortungsgröße an dieser Stelle ausschalten, weil ich alle diese Komponenten genau die gleiche Größe haben möchte . So wird es Fuß, halten Sie genau die gleiche Größe für alle unsere Charakterstile und sind Illustrationen. Also werde ich einfach die Responsive Größe an diesem Punkt ausschalten. Aber ich werde für einige dieser zusätzlichen Komponenten herunterschalten. Also, wie wir gesagt 10 24% und jetzt können Sie sehen, dass einige von ihnen draußen sind, aber wir werden es zuerst in einem 2. 1. Dinge behandeln, müssen wir diese verschiedenen Parameter anpassen, so wie Sie sehen können, es ist 30 50 47. Also werden wir das Gleiche für hier tun. Also 30 15 und schließlich 47 hier. Und lassen Sie uns noch einmal überprüfen. So hohe Säulen 30 50 47. Sagen Sie, die Spalten 30 50 und 47 sollten hier sein. Wie Sie sehen können,haben wir genau die gleichen Einstellungen wie wir hier oben haben. Wie Sie sehen können, Dies ist eine wirklich hartnäckige bis in Adobe existieren, also müssen Sie es von Zeit zu Zeit anpassen. Nun, lassen Sie mich schnell springen und dieses Design bewegen, damit ich sehen kann, was ich tue. Grundsätzlich, und ich kann Ihnen das in dieser Originaldatei zeigen. Also lass mich reinspringen und ich gehe die Zehe. Erste Dinge passen zuerst meine Navigation an. Also, wie Sie sehen können, haben wir es nach links und nach oben fixiert. Was wir also tun können, ist, dass wir einfach hier klicken und es so anpassen können. Aber ich werde das nicht tun, weil ich nicht mag, was es mit dem Logo macht und was es mit dem Boden macht. Ich möchte genau die gleiche Größe hier haben. Also, was Sie tun können, ist einfach hier klicken, Layout und wir können sehen, dass wir Ränder verlinkt haben oder 47 So können wir hier klicken. Und wir können Watte für linken und rechten Rand von 47 wie so und so verwenden, was wir an diesem Punkt tun können , ist es einfach die Navigation zu verwenden, die sich so bewegt, und ich werde das auch überziehen. Aber wie Sie sehen können, bewegt es sich weiter, so dass ich nicht wirklich mag, was es tut. Also werde ich das manuell machen und einfach den Knopf hierher bewegen. Ich werde einfach auf einen dieser klicken. Halten Sie Shift und bewegen Sie sie rüber zu irgendwo hier herum. Vielleicht, und ich werde Zeh auch reduzieren die Größe des Logos wie Zelle. Positionieren Sie es in der Mitte wie so und da haben wir es. Also, jetzt haben wir unsere Navigation erledigt, und ich werde einfach den Hintergrund nach hier verschieben und dann zu hören, bis es mit dem oberen Rand von unserem Helden trifft und unsere Navigation abgeschlossen ist, so dass Sie sehen können, es sieht genau wie hier, aber wir verwenden nur einige Trickereien, um einige dieser Elemente ein bisschen besser zu positionieren, und jetzt werden wir dasselbe für den Helden tun. Wie Sie sehen können, können Sie klopfen. Sie können die Responsive Größenänderung einschließen. Aber wenn Sie nur die Responsive Größe verwenden, können Sie sehen, wie das funktioniert, so dass Sie klicken und verschieben können und Sie sehen, dass es all diese verschiedenen Elemente wirklich verzerrt . Was ich also wirklich gerne mache, ist einfach rein zu springen und den Text hierher zu bewegen. Bewegen Sie diese beiden Tasten hier, und im Grunde werde ich sie jetzt in der Größe anpassen. Also werde ich auf eine dieser Schaltflächen klicken und einfach hier verschieben. Aber ich kann ansprechende Größenänderung dafür einschließen, so dass ich einfach hierher verschieben konnte. Verwenden Sie diese Schaltfläche und verschieben Sie sie auch hier. Aber wenn Sie nicht mögen, wie sie aussehen und ich wirklich nicht, weil wir immer noch auf Desktop-Größe sind , können Sie einfach die Größe von diesem und Knopf erhöhen. Und vielleicht können wir Polsterung einschließen und was die Größe erhöht hat. Verwenden wir das gleiche Padding, aber aus irgendeinem Grund funktioniert es nicht. Also lasst uns ins Handbuch springen und jetzt ist es hier positioniert. Es wird nicht steigen, weil wir diese Padding Links haben, also werde ich es hier positionieren. Und dann werde ich den Text im Inneren verwenden, ihn in der Mitte von unserem Knopf positionieren, und jetzt werde ich das gleiche dafür tun. Erfahren Sie mehr Schaltflächen. Man kann sehen, dass es von Zeit zu Zeit wirklich stur ist, also muss man wirklich damit arbeiten. Und in diesem Fall, wie gesagt, Ich erstelle einen Knopf Toby drei Spalten Weiß, weil es wirklich schön geschickt, um die Größe. Also werde ich hineinspringen, auf die Person klicken, und ich werde es dort positionieren, wo um hier herum. Nehmen wir an, vielleicht sogar ein bisschen unten, weil ich möchte, dass Benutzer diesen Text sehen. Und dann werde ich auf meine Illustration klicken, und ich werde es hier positionieren, bis es mit der rechten Kante von unserem Gitter trifft. Jetzt werde ich all diese verschiedenen Elemente Lied anpassen gehen Zehe Position dies hier, positionieren Sie dies hier und schließlich werde ich in unsere Maske springen und klicken Sie auf die Maske, und ich werde es einfach hier bringen und hören, o B G einfach bringen Sie es einfach nach hier. Und wie Sie sehen können, haben wir jetzt das Aussehen angepasst und fühlen sich auf Tagen Websites, und ich werde einfach eine weitere Sache tun. Wählen Sie die Text-Demo-Schaltflächen und weitere Buttons und drücken Sie einfach Control G, um sie zu gruppieren. Halten Sie meine Steuerbefehl gedrückt. Klicken Sie auf einen Helden BG, und es gibt einfach hier klicken, um sicherzustellen, dass es in der Mitte vertikal ist. Und es ist in diesem Fall können Sie eine Gruppe bekommen und dann können wir einfach mit einigen dieser anderen Elemente wollen . Für die Logos können wir sie hier positionieren und sie dann einfach verantwortungsvoll anpassen, um sie zu hören. Dann können wir das über uns Illustration bewegen und was ich dafür tun werde. Ich werde verwenden, weil wir 12 Spalten haben. Ich werde sechs für die Illustration in sechs für den Text verwenden. Es gibt also einige Anpassungen, die getan werden müssen. Sie können verantwortungsvoll Größe verwenden, wenn Sie möchten. Also zwei für sechs, es hat Zehenende an diesem Auto, also können Sie das einfach tun. Aber wenn Sie nicht mögen, wie es in einem wirklich nicht aussieht, können Sie die Responsive Größe des Halters Shift-Taste ausschalten und in einer der Ecken einfach die Größe ändern , sogar Leck so. Dann werde ich den Text und den Knopf hier positionieren. Also 246 Spalten und ich werde die Größe von meinem unteren Toby drei erweitern. So, und ich werde einfach klicken und Text in der Mitte positionieren. Und jetzt, was ich tun muss, ist einfach sehr positionieren einige dieser Texte, so dass Sie verantwortungsvoll Größe sehen können . Es ist für den Text aktiviert, so dass Sie dies auch tun können, wenn Sie möchten. Aber es reduziert seine Größe, wie Sie sehen können, und das ist nicht etwas, was wir wollen. Was wir wollen, ist, dass wir dies manuell tun müssen, so dass Sie innerhalb Hit Enter verdoppeln können, so dass Sie es in einer anderen Zeile platzieren können und einfach drei anstelle von zwei Zeilen erstellen. Und dann können Sie einfach den Teiler so 20 Pixel nach unten verschieben, und dann können wir das gleiche für diese Stapel tun. Also werden wir in 20 Pixel positionieren, und dann können wir vielleicht 40 Pixel für dieses ein so verwenden, und dann werde ich einfach an Text ein bisschen mehr anpassen, so dass es zu unserem großen passt. So wird es einfach die Responsive Größe Funktion von diesem Design zeigen. Und schließlich, was ich tun werde, verwenden sie einfach in der Text- und Demo-Schaltfläche. Ich werde es hier positionieren, und ich werde eine Illustration wählen, sie in der Mitte von unserem Text positionieren, jemand unsere eigene Demut. Und dann werde ich sicherstellen, dass wir den gleichen Abstand zwischen unserem Helden haben, unser Logo solide Verwendung 18 dieser Fall. So verschieben Sie 12345678 und schwächen auf das gleiche für diesen Abschnitt. So 80, wie Sie sehen können. Und jetzt lassen Sie mich das schnell in die Mitte bewegen und den gleichen Abstand verwenden. Also 18 dieser Fall, wie so und dann können Sie das gleiche für diesen Abschnitt tun. Stellen Sie einfach sicher, dass es bei 80 ist und jetzt müssen sie tun, ist einfach passen Sie diese Abschnitte an unsere große. So können Sie sehen, dass wir vier verschiedene Elemente haben und wir haben 12 Spalten in unserem großen, so dass jeder von ihnen wird drei Spalten zu nehmen, so dass Sie sie anpassen müssen Also ich kochen auf schnelle Lieferung und gehen, um es hier zu positionieren. Unbegrenzte Revision. Ich werde es hier positionieren und schließlich benutzerdefinierte Lösungen. Ich werde es hier positionieren, weil jede von ihnen drei Spalten nehmen wird, wie Sie sehen können, und es wird tou einen Hahn verantwortungsvoll selbst von Manager. Wir müssen unseren Text anpassen, um im Zweifel ein bisschen so zu sein, und noch ein schneller. Sie haben nie nur eine Textzeile unter fast einem Wort hinterlassen. Stellen Sie sicher, dass sie mindestens zwei Wörter in Ihrer Zeile sind, so dass es schön und sauber aussieht. So kann man sehen, dass dies uns die meiste Zeit in Anspruch nehmen wird. Was hat am Ende gepunktet? Weil dies der langweiligste Teil von diesem ansprechenden Designprozess ist die Anpassung dieses Textes jetzt, wie sie gesagt und gezeigt haben. Sie können dies mit Responsive Größe tun, aber was es tut, ist, dass es die Größe von Ihrem Text reduziert, obwohl das etwas ist, das Sie nicht wollen. Zum Beispiel, für diese besondere seufzt von Ihrem Design. So werden Sie kleiner Text von Zeit zu Zeit zu sehen, oder Sie können genau die gleichen Texas Größen für alle Ihre verschiedenen Website-Größen haben. Aber Sie müssen auf diese Weise tun, wenn das etwas ist, das Sie wollen, damit Sie sie für alle diese Größe verantwortungsvoll anpassen können. So können Sie sehen, dass wir 80 überall haben, so sieht alles schön und sauber aus. So, zum Beispiel, können wir es sogar auf 100 platzieren, weil ich denke, das war die Idee hier. Also, was ich tun werde, ist einfach alles 20 Pixel mehr nach unten zu bewegen. Gehen wir also von Kunden den ganzen Weg runter. Also 20 20. Also, wie diese 20 20 mehr nur, damit wir ein bisschen mehr Leseraum haben. Die Preise. Es ist bei 100, das ist es im Grunde. Also für diesen hier, aber du wirst tun, ist, dass wir reinspringen, sagte Aziz. Mehrmals können Sie responsive Rezitate was verwenden? Das hier, aber ich werde es nicht tun. Es ist viel einfach für mich, einige dieser verschiedenen Elemente einfach neu zu ordnen, also werde ich hineinspringen, das hier und dafür positionieren. Ich werde Responsive Responsive Resize verwenden, so dass jede von ihnen vier Spalten passen wird, so dass Sie direkt hier klicken können. Positionieren Sie es hier. Dann geh zu Pro, mach es auf die gleiche Weise. So 1234, wie Sie sehen können und schließlich für die Elite, werden wir genau das gleiche Ende verwenden, wie Sie sehen können. Es funktioniert gut mit reaktionsschnell, präzise, so dass ein Send mehrere Male verantwortungsvoll Größe wirklich gut mit einigen dieser Elemente funktioniert . Aber für einige von ihnen und in vielen Fällen, meisten von ihnen müssen Sie alles selbst tun, um für alles zu sorgen. Zehe, sehen Sie richtig im Schlepptau aus. Arbeiten Sie später im Zitat richtig. Also für diesen, können Sie ihre einige dieser Elemente neu anordnen und Sie können den Entwicklern zeigen, wie Sie ihn wie ein Zustand aussehen wollen. Entwickeln Sie dieses Design, das wir sie so etwas verwenden lassen. Und gehen wir zum nächsten Abschnitt über, der Zeugnisse ist. Also stellen Sie sicher, dass sie bei 100 sind. So 123456789 Cent, ein 100 Pixel. Und was wir für diesen hier tun werden, ist, dass wir Fuß gehen. Entfernen Sie das Zeugnis Nummer drei. Also werde ich es einfach verstecken. Ich werde Nummer eins und Nummer zwei in der Mitte so positionieren und ich werde diesen Pfeil nach links bewegen, zwei werden wie so aufgereiht werden, dass ich das gleiche für den rechten Pfeil tun werde , weil jetzt sie gehen. Sie werden hineinpassen, sind großartig. Also in den meisten Fällen werden Sie einige dieser Fehler mit Adobe Eggs D sehen, Aber ignorieren Sie sie einfach und arbeiten Sie um sie herum. In den meisten Fällen müssen Sie einige dieser Dinge selbst auswählen, anstatt es Ihnen zu helfen. Aber was kannst du tun? Man muss sich einfach um ihn herum arbeiten. Also lassen Sie mich das hier und für den Knopf positionieren. Lassen Sie mich es separat verschieben, und ich werde es drei Spalten weiß machen, wie wir es mit all diesen anderen Tasten oben getan haben. Stellen Sie sicher, dass es in der Mitte so ist und was ich als nächstes tun werde, um einfach einige dieser Formen neu zu ordnen . Wie auch immer ich will. Also vielleicht eine Position hier. Vielleicht kann ich sogar reduzieren es Größe amerikanische Position. Das hier zu sein. Ich werde in die Moschee springen. Ich werde es hierher bringen. Ich werde es hierher bringen. Und schließlich werde ich diese Preisgestaltung Bijie Toby hier noch einmal verschieben, wenn Sie dieses Design sehen wollen, können Sie es aus Projektdateien herunterladen und Sie können damit so lange wie Sie wollen herumspielen . Und wie gesagt, können Sie es sowohl für persönliche als auch für kommerzielle Produkte verwenden. Es liegt wirklich an dir. Aber ich ermutige Sie, dass, sobald Sie damit begonnen haben, dass Sie Ihre eigenen Designs für dieseserstellen , dass Sie Ihre eigenen Designs für dieses , zum Beispiel, ich werde einfach die Größe des Bildes reduzieren, weil alles gut passen wird hier. Also werde ich drei von ihnen verwenden, und wenn ich tun werde, ist einfach den Text auf diese bestimmte Größe angepasst, so wie Sie Ihr Angebot sehen können , das ist, was ich sagte. Zwei Worte unten. Und schließlich werde ich den Avatar und den Namen anpassen. Stellen Sie sicher, dass es 20 Pixel gibt, können Sie die gleiche Größe sehen und wie diese anderen, und ich kann es hier verschieben. Ich kann das gleiche Selbstbild machen. Stellen Sie sicher, dass es bei vier so ist, und stellen Sie sicher, dass Sie Text bei Bedarf anpassen. Und nur damit Sie es wissen, wird das Leben in Cote passieren, sobald Sie das responsive Design beginnen. Aber das ist nur für Ihre Referenz und die Referenz des Entwicklers darüber, wie Sie dies erstellen werden. Also im Grunde sind wir fast fertig mit dieser Größe, und ich werde einfach doppelklicken in Position dieses innen und ich werde mit einem Text ein wenig mehr spielen . Wie Sie jetzt sehen können, haben wir hier nur einen Text. Aber weil ich sagte, es sieht nicht so hübsch aus, werde ich einfach zu ihnen unten gehen. Ich werde seine Darryl in Position 20 Pixel nach unten anpassen und im Grunde das ist es für den Block. Das einzige, was übrig ist, ist, dass dieser Knopf 40 Pixel nach unten sein wird. Also 1234 Also lasst uns jetzt den Knopf reparieren. Ich werde es zu drei Spalten machen, also im Grunde dasselbe, wie wir es mit all diesen anderen gemacht haben. Also werde ich Text in der Mitte so positionieren. Aber du kannst das tun. Sie können es einfach so positionieren. Und schließlich werde ich es Toby in der Mitte bewegen, so stellen Sie sicher, dass es 40 Stücke wie diese sind. Und was schließlich? Ich werde es tun, einfach die Fußzeile 100 Pixel nach unten bewegen. Es ist also im Grunde die gleiche Entfernung wie bei all diesen anderen. Also im Grunde, Schicht. 123456789 Cent. Und im Grunde sind es 100 Pixel nach unten. Was Sie für die Fußzeile tun können, ist es im Grunde so zu verschieben, und es geht auf eine Verantwortungsgröße. Aber wie Sie sehen können, funktioniert Text wirklich nicht. In diesem Fall müssen wir diese Einschränkungen verwenden. Aber um ein bisschen mehr Zeit zu sparen, was ich eigentlich tun werde, ist dieser manuelle Ansatz. Also im Grunde gehen, um dies zu tun, wählen Sie alles und halten Sie einfach meine Umschalttaste und bewegen Sie sie in der Mitte. Jetzt werde ich einfach auf meine sind Teil hier klicken, und ich werde diese untere Kante von meinem Teil zu erweitern, um hier und es im Grunde ist es für diese Größe aus unserem Design. Also lasst uns schnell noch einmal durchlaufen. Wie Sie sehen können, müssen wir uns anpassen. Diese Abbildung ein wenig, so sieht es ein bisschen anders aus. Und was Sie hier tun können, ist die Größe dieser Tasten reduziert. Toby an zwei Spalten Weiß, weil sie auch hier sind, oder Sie können ihn anpassen. Toby drei kommt weiß, also liegt es wirklich an Ihnen und wie Sie diesen Ansatz verwenden werden. Aber in diesem Fall habe ich drei kommt, weil ich denke, es gibt viel besser lesbar auf dem kleineren Bildschirm. Dann haben wir die Textposition übernommen, alles in der Mitte zu sein. Wir haben diese Spalten angepasst, die Preise angepasst re angepasst diese Preispakete entsprechend . Für die Testimonials hatten wir nicht mehr drei. Jetzt haben wir zwei Testimonials, und für diese Hintergrundformen haben wir sie einfach angepasst und auf der Seite anders positioniert . Für den Blogger verwendet genau das gleiche Layout. Und schließlich, für die Fußzeile, sieht alles genau gleich aus. Das war's also für dieses Video. Und im nächsten Video, werden wir auf mittlere Geräte Tablets zu bewegen und wir gehen Zehe anpassen dies ein wenig mehr, und jetzt werden wir beginnen, diese verschiedenen Änderungen, weil in diesem wir gehen , um Illustrationen über dem Text zu positionieren. So wird ein bisschen anders aussehen als in diesen beiden, die für den Desktop sind, also werde ich Sie dort sehen. 13. Ein reaktiveres Design 2: Alles klar, fangen wir nicht mit Tablets mittlerer Geräte an, und um zuerst loszugehen, werden wir es tun. Einfach duplizieren. Das sind ein Teil. Ich werde hier zur obersten Hit Control C Heat Control springen. Wir hier unten, dann ST Ng ein beschleunigt mit früheren. Wie Sie sehen können, haben wir 12 Spalten Layout. Gleiche, wie wir es hier tun. Aber es sind 30 30 30 Nächte, also müssen wir das auch tun. Aber bevor wir es tun, sind es 7 68 in Witz, also lasst uns das zuerst tun. Also ist es 7 68 Drücken Sie die Eingabetaste, Redner. Also noch einmal, 30 30 39. So drehen Sie sich schon. Und schließlich 30 Nacht. Und wir müssen 30 hier wissen, so gut Sie sehen können. Manchmal ist es wirklich hartnäckig, aber man muss 39 39 auch hier überzeugen. 30. Es stört mich wirklich, dass es das tut, und ich weiß wirklich nicht, warum es es tut, denn, wie Sie hier sehen können, haben wir es. Also 30 30 39. Also, wenn ich es ändere, können Sie sehen, dass es überall 39 sind. Alles ist in Ordnung. Aber wenn ich hier wechsle. Du kannst es sehen. So gut funktioniert es nicht. Ich weiß wirklich nicht, warum es das immer tut. Ich weiß es nicht. Das ist vielleicht kann ich unter Think so machen? Vielleicht kann ich es hier ändern, also fangen wir mit 30. Und jetzt fangen wir mit 39. 39 und wechseln Sie dann auf 30. Genau hier. Also, da gehst du hin. 30 30 39. Also, wie Sie sehen können, ist es wirklich fehlerhaft dieses Tool und es hat wirklich einen Geist von seiner eigenen. Denn wieder einmal, wenn ich hier rechts klicke, öffnen Sie die Ränder. Sie können dort Gleiche hier und 30 überall sehen. Aber wenn ich es hier wechsle, können Sie sehen, wie viel Ärger wir haben? Zeuge. Aber lassen Sie uns nicht daran hindern. Lassen Sie uns schnell zum nächsten übergehen. Da dies also die Tablette ist, werden wir diese Menüpunkte hier nicht sehen. Wir gehen auf die Zehe. Lassen Sie stattdessen ein Menü-Symbol enthalten. Also lassen Sie mich reinspringen. Ich werde diese nie Bijie hier wegbringen. Ich werde diesen Knopf hier bewegen. Mal sehen, und ich werde mich vorerst verstecken. all diese Menüpunkte wie so und hier werde ich Menü-Symbol einschließen und ich werde eine einschließen, die ich in dem Beispiel Originalbeispiel enthalten habe, das ich Ihnen zeige. Also hier ist es. Und lassen Sie mich schnell seine Größe reduzieren, um anzugreifen. Nein, ich werde in meinen Knopf springen und einfach sicherstellen, dass es drei Spalten breit ist, wie so Stellen Sie sicher, dass dies in der Mitte so ist, und lassen Sie es für jetzt verlassen. Ich werde dieses Menü-Symbol direkt hier verschieben, und was wir damit umgehen müssen, ist, dass wir sicherstellen müssen, dass wir ein erweitertes Menü erstellt haben . Das ist es, was wir jetzt erschaffen werden. Also lassen Sie mich das nie BG duplizieren, damit er D. kontrollieren würde und ich werde es unten verschieben. Also werde ich diesen hier tatsächlich so bewegen, bis er sich mit diesem trifft. So stellen Sie sicher, dass ich gehen, um verantwortlich Größe für dieses eine auszuschalten, weil ich es wirklich nicht brauchen, und ich bin nicht sicher, warum. Es ist viel größer. Also 89 in der Höhe, so vielleicht konnten wir es nicht einmal kleiner machen. Sagen wir, 60 und was wir brauchen, ist eine Linie, und diese Linie wird hier durchgehen. Also wird es schön geteilte Grenzen sein, die von meinen Spalten für jetzt wird schön teilen diese nie BG und diese untere Schönheit . Also lassen Sie uns dies zum Beispiel als Dropdown-BG verwenden , und wir werden alle unsere Menüpunkte unten verschieben. Also werde ich sie so auswählen, dass ich nach Hause gehe. Eine Verschiebung kann das einfach unten bewegen, um in der Mitte von unserem abgesenkten um Bijie zu sein. Und was ich tun werde, ist vielleicht kann ich meine Drop-Down BG reduziert die Höhe Zehe eins duplizieren und hier klicken und lassen Sie mich Grenze ausgeschlossen. Lassen Sie mich zum Beispiel diese Farbe verwenden . Ja, wie Sie jetzt sehen können, haben wir diese schöne Trennlinie. Wenn ich also zurücksprang, was ich hier tun kann, bestelle sie einfach. Also werde ich hineinspringen, alle auswählen und sie einfach nach rechts ausrichten. Sagen wir und richtete sie mit unserer Speisekarte wie wollen so und wir gehen eins nach dem anderen . So Dienste iss ersten Features in Kontakt US können Sie sehen, dass wir Ihre Umschalttaste genannt oder entfernen diese für jetzt, weil wieder, Box in a keine b Eier, die vorhanden sind. Wie Sie sehen können, sobald sie getroffen haben, verschieben Sie es, verschieben Sie es, wählen Sie alles aus. Ich weiß wirklich nicht, warum es so weitermacht. Aber selbst wenn ich nur meinen Pfeil benutze, kann man sehen, dass er sie nicht bewegt, obwohl die Geschichte ausgewählt ist. Also diese Box wirklich wackelt mich kein Wortspiel beabsichtigt. Aber was kannst du tun? Es muss einfach mit ihm fortfahren, damit ich einfach diese beiden auswählen und sie nach unten verschieben kann. Ich kann das einfach verstecken. Bewegen Sie das nach unten und es gibt einfach alle diese anderen einschalten. Also, was wir hier haben, ist 1234512345 und Block sollte so nach vorne gehen. Jetzt lassen Sie uns einfach eine Auswahl treffen, und ich werde diese Zeile duplizieren. Also lassen Sie uns dies als Teiler verwenden, , und ich werde es einfach duplizieren und es unten verschieben. Dann werde ich 20 Pixel verwenden, weil das ist, was wir für alles verwendet haben. Grundsätzlich, Also Shift 12 Dann werde ich meine Trennlinie hier verwenden, es iss, ich werde es mit dem unteren Rand meines Textes so ausrichten. Und dann werde ich einen Zahn verschieben, um sicherzustellen, dass es 20 Pixel nach unten ist. Ich werde alle diese auswählen. Stellen Sie sicher, dass sie 20 Stück nach unten wie so sind. Ich werde sie so nach unten bringen. Ich werde meinen Drop Down BG bis hierher verlängern, nur damit du sehen kannst, was ich tue. Ich werde noch einmal Kontrolle D drücken und einfach die Trennlinie 20 Pixel nach oben bewegen. Noch einmal, verwenden Sie die Preise, die ich verwenden könnte, und, uh, wiederholen Sie großartig, um diese Funktion zu tun. Aber ich finde manchmal altmodische Methoden wirklich gut funktionieren, also gehen wir Fuß, gehen weiter und wählen einfach Blogger aus. Sie könnten sehen, dass Adobe X'd jetzt seine Sache macht, weil es mir den 20 Pixel Abstand zwischen all diesen verschiedenen Elementen zeigt , wie Sie hier sehen können. Und schließlich haben wir Kontakt mit uns und dafür werden wir nicht den Teiler verwenden, also verschieben wollen nach unten, und dann werde ich einfach Drop-Down-BG verwenden, um es zu schließen, wie so Verschiebung 12 Und wie Sie sehen können, haben wir unsere Dropdown-Menü bereit zu gehen, wenn Sie denken, diese Trennwände sind zu hart für Ihre Augen, so wie Sie sehen können, können Sie sie deutlich sehen wie So können Sie entweder reduzieren Sie die Deckkraft, so dass Sie sie alle auswählen können . Ich werde sie gruppieren Hit Control G, zum Beispiel, zu einer Gruppe wie Also werde ich das Weiß dort verwenden, richtet sich so aus und Sie können Ihre Pay-Stadt vom gesamten Ordner absenken. Sichere Treffer zum Beispiel 20. Sie können sehen, wie das für 40 aussieht. Ich denke, das ist gut. Und Sie können sogar diese Farbe auswählen, wenn das ist, was Sie wollen, und dann können Sie sie in dieser bestimmten Farbe nennen. Aber lass uns so etwas wie, ich weiß nicht, 80 vielleicht 60. Ja, ich denke, 60 ist vorerst gut. Also, was wir tun werden, ist, dass wir alle diese Menüpunkte verwenden, verschieben sie und nach unten so und ich gehe Fuß, benutze sie Trennlinien und Drop down BG Group sie alle und einfach dieses Drop Down genannt weil ich jetzt verstecken kann und ich kann weiter an meinem Design arbeiten. Also lassen Sie uns wieder einschließen sind wirklich helfen. Und wie Sie sehen können, haben wir 12 Spalte. Gleiche wie hier, aber die Säulen sind etwas schmal. Also, was wir dafür tun können, ist, dass ich meine Illustration einfach nach unten verschieben und meinen Text nach oben verschieben werde. Und ich werde diesen Text ändern, um in der Mitte zu sein, so dass Sie doppelklicken und rechts hier klicken können , um sicherzustellen, dass er in der Mitte ist und ohne diesen Abstand oder irgendetwas zu bewegen , kann ich ihn einfach hier positionieren. Nach Hause eine Umschalttaste. 1234 Und dann werde ich meine Knöpfe anpassen. Also sind sie drei Spalten weiß in diesem Fall. Also werde ich sie hierher bringen. Wie ihr dort in unseren vier Spalten Weiß sehen könnt, gefällt mir das nicht. Also werde ich sicherstellen, dass sie drei Spalten breit sind, wie so werde ich dies in der Mitte bewegen , und ich werde mehr Schaltfläche wie das verwenden, weil Sie sie lassen können für. Aber dann musst du ihn noch einmal anpassen. So haben sie Arbeit an der mobilen Größe zum Beispiel. Also lassen Sie mich sie 40 Pixel bewegen. Also 1234 werde ich sicherstellen, dass sie in einem Zentrum wie so sind. Und schließlich werde ich meine Illustration verschieben. 1234 und 1234 noch einmal, nur um sicherzustellen, dass wir gleichmäßige Abstände haben. Und jetzt werde ich meinen Helden BG so bis zu diesem Punkt erweitern und dann meine Illustration zurückschieben . 1234 Also, um sicherzustellen, dass sie in der Mitte sind, was ich tun werde, ist, um die Illustration nach rechts zu verschieben. So kann ich meine Person nach oben bewegen, und wenn das etwas ist, das du willst, lasst es uns zum Beispiel hier lassen . Und dann kann ich meine Illustration einmal gegen ihre Schicht bewegen. 1234 Nun wird dies unser Unterteil sein. Richten Sie unser Heldenbild aus. Ich werde es zurückschieben und endlich meine Illustration verschieben. 1234 Es spielt also wirklich mit all diesen verschiedenen Elementen herum und passt sie so an, wie Sie es tun würden. Und dann werde ich schnell meine große verstecken, weil ich mit diesen Elementen herumspielen werde . Also werde ich in Formen und unsere Moschee springen, und ich werde meine Moschee bis hierher erweitern, und dann werde ich sie etwas näher bringen. Und dann werde ich einfach diese Formen entfernen, wie ich es zuvor getan habe. Wenn es also ein bisschen schwer ist, sie auszuwählen, dann können Sie Ihren alten Schlüssel halten und Sie können schnell hineinspringen und direkt auswählen. Nehmen wir an, dass dies die Reihenfolge ist, die ich mag, und ich kann es einfach so lassen, und ich kann dann mit dem nächsten Teil meines Designs fortfahren, die Logos sind und für die Logos. Wenn Sie sich erinnern, haben wir eine Responsive Größenänderung. Aber wenn ich nach Hause eine Shift-Taste, lassen Sie mich schnell schalten meine große, so dass ich sehen kann, wie sie in Position schnappen. Wenn ich also die Umschalttaste halte, werden sie gleichmäßig so skaliert. Aber Sie können sie sogar so erweitern, wenn Sie zu einem bestimmten Punkt kommen. Also, wenn das erledigt ist, lassen Sie mich sie bewegen. Also verschieben 12345678 Mal sehen, und dann kann ich mit unserer Illustration fortfahren. Mit unserer Illustration kann ich meine Illustration hier verschieben, und ich werde sie bis zu diesem Punkt skalieren, zum Beispiel, weil ich wirklich schön und groß sein wollte, und ich wollte sie positionieren in der Mitte wie so. Dann werde ich Text und Demo unten rechts hier verschieben, und ich werde alle diese Abschnitte nach unten verstecken, weil es für mich viel einfacher sein wird , daran zu arbeiten. Als Nächstes. Ich rufe meine Shift-Taste an. 12342 Mit 40 Pixeln nach unten, werde ich es ausrichten, die großartig sind. Und schließlich, was ich tun werde, weil es viel einfacher für mich sein wird, responsive Responsive Resize zu verwenden ist, dass ich dies aus dem Punkttext konvertieren werde, genau hier in Bereichstext ist. Also, wenn ich dort klicke und es dann erweitern kann, Toby, genau hier, verurteile ich das Spiel damit. Also, zum Beispiel möchte ich das verschieben. Wie Sie sehen können, passt es sich so an meinen Absatz an, damit ich es so lassen kann, oder ich kann sogar hineinspringen und das ein wenig näher bringen. So, denn wir haben jetzt nur zwei Textzeilen für die Demo-Schaltflächen. Gleiche wie bei vorherigen Buttons. Ich werde es reduzieren, Toby. Drei Spalten weiß, um sicherzustellen, dass wir den gleichen Abstand haben, wie so und für unseren Titel. Sie können sogar konvertieren, dass der Bereichstext, wenn Sie möchten, aber ich werde es so lassen, wie es ist, weil es wirklich nicht so viel darin hat. Also werde ich es so positionieren. Und dann wähle ich meine Trennwand, meinen Absatz aus und stelle sicher, dass sie in 20 Teilen so sind. Stellen Sie sicher, dass der Boden bei 40 wie so ist und stellen Sie sicher, dass dies ausgerichtet ist, um zu erstellen Es ist so, dass es im Grunde ist es für diesen Abschnitt. Und lassen Sie es uns jetzt schnell nach unten bewegen. Stellen Sie sicher, dass wir bei 80 sind. Wie Sie sehen können, sind wir so im Grunde, dass Sie den gleichen Blick behalten, wie wir hier haben. Aber jetzt passen sich Illustration und der Text an den Witz an, dass wir jetzt noch eine Sache über den Text haben . Sie können diesen Text für alle von Punkt X Toe Text konvertieren, aber ich mag es, sie ein wenig später zu konvertieren, nur damit ich sehen kann, wo er konvertiert werden muss und ob er überhaupt konvertiert werden muss. Zum Beispiel für diese Abschnitte wirklich wichtig, ist es für diese Abschnitte wirklich wichtig,dass wir verdeckt kennen, aber zum Beispiel für die Dissektion. Vielleicht ist es nicht so wichtig, aber mal sehen, wenn wir anfangen, es zu entwerfen. Also lassen Sie uns jetzt diesen Abschnitt verwenden, verschieben Sie ihn wie so in die Mitte, stellen Sie sicher, dass dies bei 80 so ist, und, wie , und, Sie in diesem Titel sehen können, passt gut hinein. Aber dieser Text nicht so lassen Sie uns schnell in Sicht springen. Ich werde Zehenbereichstext konvertieren, und ich werde dies einfach ein bisschen nach unten verlängern. Ich werde das hier verschieben, um ins Raster zu rasten und das hier zu schieben, um den größten Brunnen zu schnappen. Aber wie Sie es jetzt sehen können, hat nur die Worte dieses Klienten in dieser einen Zeile. Also was? Ich werde es tun. Bewegen Sie das einfach so nach oben, und dann ist es fertig. Wie Sie sehen können, ist es wirklich einfach. Und jetzt, wenn ich sie aus irgendeinem Grund zu bewegen anfange , wird es sich anpassen, und es wird alle diese Worte nach unten drücken. So arbeiten Sie im Grunde mit Bereichstext. Als nächstes gehen wir zu Funktionen, und ich werde diese Funktionen auswählen und sie nach unten positionieren, um zu hören. Stellen Sie sicher, dass es 80 so sind und was ich tun werde, ist, sie einfach sechs durch sechs zu teilen . Diese beiden werden also jeweils sechs Spalten nehmen. Der Laden ging, um das gleiche zu tun, also werden wir hineinspringen, und ich werde unbegrenzte Revisionen verschieben. Und ich werde benutzerdefinierte Lösungen so unten verschieben, bis sie einrasten und wir werden sechs Spalten für diese eine zählen. So 1234568 Dieser hier. Lassen Sie mich noch einmal nachsehen. 123456 ist es und verwenden Sie benutzerdefinierte Lösungen so gleich hier und stellen Sie sicher, dass sie bei 40 voneinander entfernt sind . Aber bevor wir das tun, lassen Sie uns ihn schnell anpassen, damit Sie alle öffnen können. Und Sie können zum Beispiel zum Beispiel auf diesen einen konvertierten Klick auf diesen klicken. Konvertieren Sie es, tun Sie dasselbe für diesen und tun Sie schließlich dasselbe für diesen. Jetzt kann ich sie einfach erweitern, um zu hören. Ich kann das Gleiche für diesen hier tun. Stellen Sie sicher, dass es um sechs Uhr ist. Stellen Sie sicher, dass dies auch sechs und ein Gleiches für diesen ist. Also werde ich von Anfang an beginnen von der 1. 1 Ich werde es hier verschieben, nur damit ich sehen kann, was passt und was das nicht so mag. Es muss also drei Zeilen sein. Also, wie wir es mit den vorherigen gemacht haben, lassen Sie es uns einfach nach oben bewegen. Dies ist abgeschlossen, und lassen Sie uns dasselbe für diesen tun. Es muss also eine Drei-Allianz sein. Wenn es zum Beispiel drei Zeilen wie diese sein kann, zum Beispiel drei Zeilen wie diese sein kann, ist es wirklich egal, weil Sie sie 40 Pixel vom tiefsten Punkt nach unten schieben werden, was dieser ist. Also ist es ein guter Sprung ins Innere und ungerecht das, damit es nicht mit unserer Ausrichtung verwirrt. Also, jetzt können wir sie an Ort und Stelle bringen, wie so Schicht 1234 und was ich tun werde, ist, das tatsächlich zu bewegen. Stellen Sie sicher, dass es mit Margaret ausgerichtet ist, so dass alle diese ausgerichtet sind, außer diesem, so. Also ist jetzt alles gut zu gehen. Nein, ich muss meine Steuer nur ein wenig anpassen, bis sie in Körnung schnappt und dasselbe für diese tun . Sie werden die Ausrichtungsprobleme von Zeit zu Zeit bemerken, aber Sie müssen einfach mit ihnen arbeiten, weil es keinen anderen Weg gibt. Denken Sie daran, dass Sie an diesem Punkt entwerfen, den Sie nicht entwickeln. Also wird alles im Grunde getestet. Und dieses Testen ist wirklich wichtig, denn wenn Sie dies tun, machen Sie im Grunde die Tests für Entwickler. Sie stellen also sicher, dass die Dinge so funktionieren, wie sie sollten, bevor sie in die Entwicklung gehen , denn es ist wirklich viel einfacher und billiger für Sie, all diese Probleme zu testen. Dann für Entwickler, weil ihre Zeit kostbarer ist als deine. Etwas später, sobald das Projekt losgeht und sobald alles codiert ist, weil sie dann Fehler beheben müssen , müssen sie sicherstellen, dass alles richtig funktioniert, wie es sollte, besonders weil dies ein -Webseite. Es muss auf verschiedenen Browsern arbeiten. Stellen Sie also sicher, dass Sie beim Entwerfen sicher, dass Sie nach all diesen Fehlern suchen, denn es wird viel einfacher für Sie und dann wörtlich für Entwickler, alles zu überprüfen. Lassen Sie uns also schnell zu unseren Preisen übergehen. Ich werde sicherstellen, dass es bei 80 ist, wie es hier ist und für seine kleine schnell alle diese Elemente unten verstecken, so für sie. Ich wähle meinen Text aus, stelle sicher, dass er in der Mitte ist. Wir haben überhaupt keinen Deal damit. Und dafür, was wir tun werden, ist, dass wir Fuß gehen, zwei hintereinander haben, und dann werden wir die nächste unten haben. Also was? Speziell angepasst? Da die verantwortungsvolle Größe aktiviert ist, können Sie sehen, dass es den Abstand zwischen dem linken und rechten Rand behält und alles so hält, wie es sollte. Also für fünf, sollte es um sechs sein, wie so, und das sollte auch bei sechs sein, wie, wie, also stellen Sie sicher, zu berücksichtigen. Ja, sind sie, also sind sie gut zu gehen, und Sie können das in der Mitte positionieren, aber bevor Sie es tun, stellen Sie sicher, dass es auch um sechs ist. Dann positionieren Sie es in der Mitte und dann können Sie dies verlängern. Also lassen Sie uns schnell tun, dass 12341234 Monate Wieder werde ich meinen Hintergrund auswählen und einfach an der Stelle ausrichten. Wird es nicht mögen. Dann bewegen Sie es nach oben. 1234 Und ich werde einfach tot sein. Passen Sie meine Form an. Also werde ich meine Moschee benutzen. Einfach den ganzen Weg hinunter bis hierher ausgedehnt, und dann kann ich diese Form benutzen. Ich kann damit rumspielen, um es zu positionieren. Zum Beispiel. Ich kann das hier benutzen. Positionieren Sie es nach oben, zurück in Position, um hier zu kreisen. Vielleicht kann ich dieses Rechteck hier verschieben. Sagen wir so etwas. Vielleicht könnte ich das etwas nach unten bringen und schließlich kann ich die Preise verschieben. BG invertiert, so dass es ausgerichtet ist und schließlich meine Moschee bewegen, so dass sie auch ausgerichtet ist. Also, das ist im Grunde es, für diesen Abschnitt ist, dass Sie sehen können, einige Abschnitte sind wirklich einfach, und einige Abschnitte können ein bisschen schwierig zu arbeiten, so dass es schnell Preise verbergen, so dass ich mein Zeugnis nach unten verschieben kann. Ich werde es gleich in der Mitte positionieren, also stellen Sie sicher, dass es bei 80 ist, wenn es sich nicht so zeigt, wie es im Moment nicht tut. Shift 12345678 Und für diese, weil wir in diesem Moment eine Tablettengröße haben, werde ich nur ein Zeugnis haben und ich werde meine Pfeile am Rand haben. Also werde ich mein Zeugnis verbergen, dass ich das in der Mitte so positionieren werde, und ich werde einfach meine Pfeile verwenden, wie Sie sehen können. Shift Key funktioniert wieder nicht in einem offensichtlichen, das ich wirklich nicht weiß, warum es diese Fehler zeigt , und ich sah Berichte in der Benutzerstimme auf ihrer Website, wo Sie Ihre Meinung über Software verlassen können und viele Leute haben sich beschwert über dieses Problem. Aber in letzter Zeit wurde nichts getan, also lassen Sie uns schnell auf 80 gehen und was Sie tun können, ist, dies einfach in der Mitte zu positionieren. Aber weil wir diese Moschee nicht hier haben, fand ich, dass es viel einfacher ist, eins nach dem anderen zu tun. Und weil uns der Platz ausgeht, können Sie einfach Ihren Port den ganzen Weg nach unten erweitern, und was ich mit diesem machen werde, ist einfach zu springen, meinen Text in der Mitte so zu bewegen und sicherzustellen, dass meine Flasche drei ist Spalten weiß wie das. Sie können dies auch beschleunigen, wenn Sie möchten. Ich habe das nicht für dieses Projekt getan, aber ich mache es normalerweise. Sie können diese einfach als Komponente erstellen, und Sie können eine Komponente aus einer Schaltfläche einfügen, so dass Sie einfach eine Komponente von hier aus ziehen und ablegen können , damit Sie eine Schaltfläche auswählen können. Lass mich nur sicherstellen, dass es ausgewählt ist. Sie können Kontrolle und Befehl drücken. Kate wird es in eine Komponente verwandeln, und dann können Sie einfach diese Komponente von hier aus auswählen. Drag and Drug Drop es an Ort und Stelle, und dann können Sie sehen, welche Position es von hier. Wenn das etwas ist, das Sie wollen, will ich es für den Moment nicht, weil Sie auch auf Gruppenkomponente treffen und dies mehr BTM nennen können. Ich wollte es nicht tun, weil wir immer noch mit verschiedenen Größen herumspielen. Wie Sie hier gesehen haben, haben wir hier drei Komponenten für Komponenten und da müssen wir zwei Säulen und jemanden komportieren , also habe ich es nicht immer getan, weil wir mit verschiedenen Größen herumspielen. Also, es ist nur das, ich werde diesen Kreis bewegen, um zu hören, zum Beispiel, bewegen Sie dies hier. Ich werde diese Form mit genau hier auswählen. Ich werde sehen, wo meine Moschee sie nach innen bewegen wird, bis sie sich in der Mitte trifft. Vielleicht kann ich das sogar so positionieren, dass es hier ist, und es spielt wirklich mit diesen verschiedenen Elementen herum. Sehen Sie, was funktioniert, was nicht und im Grunde funktioniert es. Nein für den Block. Wir werden nur einem helfen, also bewegt es sich schnell seinen 18. Ich ging hinein zu springen und für das Protokoll können Sie es nicht lassen Lassen Sie uns sehen, wie man aussieht. So seine Position es bei 62456 So können Sie es sogar von hier aus erweitern. Aber wie Sie sehen können, bewegt es diesen Text immer weiter, und das will ich nicht tun. Also mache ich wirklich gerne alles selbst. Ich werde reinspringen und es einfach bewegen. Eine Spalte, um alles andere zu hören bleibt gleich und für den Beitrag zu werden wir den Post Tree Post zwei verstecken . Wir werden dasselbe tun, also springen Sie einfach in die Ausdehnung, dieses Bild, das ist es im Grunde. Sie können mit diesem Text ein wenig mehr herumspielen, aber wie Sie sehen können, vielleicht wird dieser Hinweis passen. Aber ich gehe nur auf die Zehe. Glauben Sie es. Wie es ist, alles, was ich tun werde, ist, einfach zu verschieben, alles zu drei Spalten breit zu sein, um unsere anderen Tasten so zu passen und würde einfach nur in der Mitte zu sein, die Text wie dieser und Schaltfläche sind. Das ist im Grunde, es ist eine letzte Sache, die für uns zu erstellen ist Footer. Und wie gesagt, Sie könnten die Position sehen, wie es aussieht, also stellen Sie sicher, dass es bei 80 so ist und Sie kondensieren einfach links und rechts anpassen und das nach innen bewegen , und das ist es im Grunde. Du bist fertig mit der volleren Onley-Sache, die für uns übrig ist. Jetzt zu tun ist einfach bewegen Sie dies wie, also werde ich es bewegen. Werth so und unsere Medium-Geräte Tablets ist bereit zu gehen. Also, wenn ich schnell durchlaufe, was wir getan haben, ist, dass wir es angepasst haben und , wie Sie sehen können , wie Sie sehen können, das ein wenig bewegen müssen. Und ja, dieser Knopf ist drei Säulen Licht. Wir haben also dieses Menü und ein Dropdown-Menü erstellt. Also, wenn ich es schnell ein- oder ausschalten, können Sie sehen, dass wir jetzt im Dropdown-Menü haben. Sie können diese verschieben, wenn Sie möchten, können Sie sie nach links verschieben. Aber ich fand und Benutzer fanden es, dass, weil Ihr Finger genau hier ist, Also, wenn Sie es tippen, wird es viel einfacher sein, einfach Ihren Finger hier nach unten zu schieben, dann, um es hier zu tippen und dann strecken Sie Ihre Fingerzehe diesen Bereich genau hier . Es ist also viel einfacher. Nicht einfach und viel. Es macht viel sinnvoller, all diese Menüpunkte hier zu haben, denn, wie gesagt, ist dein Daumen genau hier. Tippen Sie auf dieses Symbol, öffnen Sie dieses Dropdown-Menü und greifen Sie einfach auf alle diese Funktionen unten. Was wir 10 gemacht haben, ist einfach jede Bestellung. Einige von diesen Elementen entfernt so die Abbildung unten. Wir haben den Text nach oben verschoben. Wir haben genau hier das Gegenteil gemacht. Wir haben die Größe von diesen Logos reduziert. Dann positionierten wir diese beiden aussehen so so, statt vier in einer Reihe, Jetzt haben wir zwei in einer Reihe und zwei Reihen, im Grunde für die Preisgestaltung gibt es jetzt ein wenig breiter in diese Spalten passen. Und jetzt haben wir zwei und eins unten, und für die Zeugnisse haben wir nur zwei. Stattdessen wollen wir nur statt zwei. Und schließlich, für den Block Post, haben wir zwei statt frei. Also, das ist es im Grunde für diesen. Im nächsten Video werden wir kleine Geräte Tablets entwerfen, so dass es im Grunde das gleiche sein wird. Aber es wird noch kleiner sein als dieser, und ich sehe dich in diesem Video. 14. Ein reaktiveres Design: Lassen Sie uns jetzt mit kleinen Geräten Tabletten fortfahren und ich werde Zehe Hit Control de, um dieses zu duplizieren , und ich werde es hier positionieren. Ich werde hier doppelklicken. Hit Control, schien. wir hier nicht geweint, kontrollieren Sie die und ich werde die Größe überprüfen. Es sind 600. Ich werde hier die gleiche Größe wie so Moderator machen, und schauen wir uns das große hier an. Diesmal sind es acht Spalten, also lasst uns das zuerst ändern. Ich glaube, und 30 37 47. Also lassen Sie uns versuchen, die 30 37 endlich 47 genau hier anzupassen. Also, wie Sie sehen können, bringt es uns immer wieder das gleiche Problem. Aber dieses Mal haben wir es geschafft, es leicht zu beheben. So 30 37 47 8 Spalten 30 37 47. Also, das ist im Grunde Kampf. Wie Sie sehen können, werden Sie manchmal diese Probleme haben, aber manchmal wird es gut funktionieren. Also lassen Sie uns Abschnitt für Abschnitt gehen, und ich werde das nie BG verwenden. Ich werde es gleich hierher bringen. Ich werde meine Demo-Schaltfläche und mein Menü-Symbol auswählen. Ich werde sie hier positionieren und für diesen hier. Lassen Sie es uns nicht in drei Spalten haben. Also lassen Sie mich schnell so angepasst, weil wir unsere Säulen leicht passen wollten. Da wir da einen Tropfen haben,müssen wir ihn auch anpassen. Da wir da einen Tropfen haben, Also alles, was ich hier machen möchte, ist bewegt, um hier runter zu fallen. Stellen Sie sicher, dass alle meine Artikel mit unserem Raster übereinstimmen, damit Sie alle Ihre Artikel auswählen können . Verschieben Sie sie so Und schließlich können Sie Trennlinien verwenden und BG herunterklappen und einfach nach hier verschieben . Als Nächstes werden wir auf der Tohira Sektion bewegen. Aber bevor ich es tue, lassen Sie mich schnell ihre Drop-down-Liste verstecken. Ich gehe zu meinem Heldenbereich. Ich werde meinen Helden BG benutzen und ihn einfach so bewegen. Dann gehe ich in Formen, benutze meine Maske und verschiebe sie einfach in Worten wie so und ich werde mich jetzt auf den Text sowie auf die Illustration konzentrieren . Also für den Text, müssen wir einige Änderungen vornehmen. Also lassen Sie uns zuerst diesen Zehenbereich Text konvertieren und Sie können dies auch in Bereichstext gerichten, wenn Sie wollen, aber ich werde das nicht tun. Ich werde das einfach unten platzieren. Ich ziehe das nach oben und schiebe das endlich so nach unten. Also, wie gesagt, setzen Sie nie ein Wort, so dass Sie mit Ordnung spielen können aus Ihren Worten, so dass Sie so etwas tun können . Also, wenn Sie denken, dass passt besser, als Sie tun können, dass schließlich werde ich einfach diesen Text an meine gegriffen wie So ich werde Zeh gehen, erweitern Sie es ihre eigenen. Und ich werde das wieder eine Zeile bringen, wie so gehen, um von der Verpflichtung nach unten von Websites, Bauchmuskeln zum Branding zu bewegen . Und ich werde das auf die letzte Zeile setzen, weil ich denke, es macht es viel angenehmer für das Auge mit dem hier. Und schließlich, lassen Sie uns mit unseren Knöpfen umgehen. Also werde ich sie hier unten positionieren. 1234 Und wieder werden wir sie zu drei Säulen Licht machen, also werde ich diese auswählen. Stellen Sie sicher, dass es drei so ist, wie dieses, um sicherzustellen, dass es bei drei so gut positionierten Text in der Mitte wie so stellen Sie sicher, dass dies in der Mitte ist. Wenn Sie es nicht finden können, wählen Sie einfach beide aus und klicken Sie hier, dann hier, um sicherzustellen, dass es sich in der Mitte befindet. So wie so. Positionieren Sie diese beiden auch in der Mitte. Und jetzt beschäftigen wir uns mit unserer Illustration. Also werde ich unsere Illustration hier positionieren, stellen Sie sicher, dass die reaktionsfähige Größe deaktiviert ist und stellen Sie einfach sicher, dass die Zehe es ein wenig nach unten skaliert . Also werde ich 40 Pixel hier haben, dann 1234 verschieben und ich werde einfach meine Schönheit auswählen und sie verschieben, bis sie mit unserer Illustration ausgerichtet ist. Nächste Schicht 12 Wie Sie sehen können, funktioniert es manchmal wirklich nicht. Also musst du es im Grunde erzwingen. Aber Sie können es einfach bewegen, während Sie Shift halten und wird Sie 40 Pixel von hier auswählen . Alles, was übrig bleibt, ist, dass wir diese Formen bewegen müssen. Wie Sie sehen können, sehen die wirklich toll aus. Aber wie Sie sehen können, müssen Sie sie die ganze Zeit anpassen, denn um alles zu tun, wie es sollte, müssen Sie sicherstellen, dass sie unterschiedlich groß sind, dass sie richtig positioniert sind. Sie müssen einige von ihnen herunterskalieren. Sie müssen sie anders positionieren. Aber wie Sie sehen können, macht es Spaß, dieses Zeug zu entwerfen. Aber wenn es um Dinge eine Art Neupositionierung geht, haben Sie wirklich eine Menge Arbeit zu tun. Gehen wir nun zu unseren Logos, und ich werde meine Shift-Taste halten und meine Logos ein wenig besser neu positionieren, so stellen Sie sicher, dass sie zum Beispiel bei 80 sind. Also lasst uns das Schleppnetz richtig so positionieren, und ich ging zu einem Haus eine Shift-Taste. 12345678 Ich werde dasselbe für meine Illustration tun. Stellen Sie sicher, dass es bei 80 ist. Aus irgendeinem Grund ist es ein 78, also werde ich es einfach so auf Pixel nach unten verschieben. Also, wenn man es bewegt, wird es 80 zeigen. Also, was ich jetzt tun werde, ist, einfach meine Illustration zu verwenden, es Zehe hier zu positionieren, sicherzustellen, dass es mit unserer großen einfach Anruf Shift ausgerichtet ist. Dann werde ich meinen Text verwenden und ihn positionieren, bis er sich ausrichtet und bis es mit unserem großen auf der linken Seite sowie Shift 1234 und ich werde Fuß gehen. Positionieren Sie einfach meinen Knopf, bis ich damit fertig bin, also muss ich diesen Text etwas nach unten verschieben. Also in der Industrie, lasst es uns so verwenden, dass ich meine Trennwand verwenden werde und einfach, wenn es mir erlaubt, werde ich mich verstecken. Dieser Text zog einfach diese beiden nach unten I. Also dann werde ich meine Trennlinie und Position 20 Pixel wählen und dann das gleiche für den Text tun . Also können wir diese Bücher von Anfang an verschieben. Mal sehen, wie das aussieht, so wie Sie sehen können, Box passt sich gut an unsere große und eine letzte Sache, die wir tun müssen, ist einfach diese Verschiebung zu positionieren . 1234 und ich werde sicherstellen, dass es drei Säulen breit ist. Ich werde meinen Text in der Mitte auf diesem Berg positionieren. Wie Sie sehen können, wird es immer schneller und schneller. Je mehr Sie dies tun, desto mehr gehen Sie, desto mehr Größen erstellen Sie, weil Sie im Grunde dieses Layout legen. 234568 und Sie Inhalte passen dieses Layout schnell an Ihre Bedürfnisse an, also lassen Sie uns nicht schnell bewegen und bewegen Sie sich auch in diesem. Dann werde ich es ausdehnen, und ich bin glücklich mit der Art, wie das aussieht. Also im Grunde, nur das, was hier übrig ist, ist, diesen Titel anzupassen. Also lass es uns runterziehen und mal sehen, wo können wir es brechen? Machen wir es hier, dann bewegen Sie einfach meinen Teiler auf 20. Und dieser Abschnitt ist jetzt für die Futures abgeschlossen. Lasst uns ihn schnell angegriffen haben. Also sie richten sich mit unserem Raster und lassen Sie uns sie verschieben 80 wie so Manchmal werden Sie diese Zeilen bemerken, ohne zum Beispiel, 80 und es wird uns zeigen, Sagen wir 79.8, weil aus diesen Symbole, so dass Sie nicht damit umgehen können, leider, Aber Sie können einfach weitergehen, gehen Sie zu Ihrem nächsten Endpunkt und stoppen Sie es einfach dort. Also, weil, wie gesagt, wir haben jetzt acht Spalten, also 12345678 werden wir vier verwenden. Und für so lassen Sie uns das auf vier bewegen. Hier ist es. Sie sind als Shooting aufgereiht. Diese sind leuchtet, also im Grunde lässt es ihn jetzt anpassen. Alles, was Sie tun müssen, ist, diesen Text einfach auf vier zu verschieben und mal sehen, wo er hier kaputt ist . Tun Sie dasselbe für diesen. Um es einfach auf vier zu verschieben, sehen Sie, was es bricht, und Sie müssen etwas davon anpassen. Lassen Sie uns das anpassen und das wird bei drei zeigen. Also lassen Sie uns jetzt damit umgehen, und wir können zu diesen untersten gehen, also stellen Sie sicher, dass sie bei 40. Wie Sie sehen können, werden wir einige Probleme wegen dieser Symbole haben. 1234 39.8. Das ist das nächste, an das wir es bringen können. Und du kondensierst. Passen Sie diesen Text einfach so an unsere Bücher an, weil der Text, wir werden es so lassen, wie es ist, weil dieser Satz wird bis zum Ende gehen. Und wir haben es auf alle Größen gemacht, wenn Sie es bemerkt haben. Also lasst uns versuchen, das aufzustellen. Es passt. Also wirst du es dort lassen und das hier endlich geschickt haben. Nun, da das abgeschlossen ist, ist alles, was übrig ist, diese 80 Gurken nach unten zu verschieben, so 1234567 Fuß. Nun, da wir auf den kleinen Tablets sind, möchte ich einige Änderungen vornehmen. Also lasst uns zuerst mit dem Text befassen. Ich werde es in der Mitte so positionieren, dass ich das in zwei Zeilen wie diese aufteilen werde . Ich werde meine Trennwand verwenden und meinen Text in 20 nach unten verschoben. Und weil dieser Text kein Bereichstext ist, lassen Sie uns damit umgehen Jetzt werde ich es hier positionieren. Ich werde das hier positionieren. Dann werde ich es ausdehnen und weil ich es nicht sehen kann, werde ich diese Preisinformationen verstecken, und ich werde mich jetzt damit beschäftigen. Also diese Pakete und Ihren Bedürfnissen entsprechen wird, um die Flasche zu gehen. Lassen Sie uns schnell sicherstellen, dass es am Ende ist. Ist es. Und jetzt beschäftigen wir uns mit unseren Preisen. Also, wie sie sagten, weil wir auf einer kleinen Tablet-Größe sind, werde ich sie erweitern, um acht Spalten in Witz passen. Also, wie kann ich das tun? Ich kann einfach alle drei auswählen. Verschieben Sie sie 40 Pixel nach unten, also verschieben Sie 1234 Stellen Sie sicher, dass dies auf der linken Seite ist. Also nochmals 1234 und ich werde einen Profi und Elite nach unten bewegen, also positionieren Sie sie hier, stellen Sie sicher, dass sie so in der Mitte sind und dann einfach nach hier bewegen. Und dann werde ich alle drei auswählen und sie einfach erweitern, um zu hören, wenn es nicht funktioniert, dann musst du es eins nach dem anderen tun. Das Layout ist hier aus irgendeinem Grund kaputt. Also lassen Sie mich überprüfen, was passiert ist. Ich gehe ein paar Mal zurück. Ich bin mir nicht sicher, warum, denn diese beiden sehen so aus, wie sie sollten. Nun, sehen Sie, wir haben diesen Fehler auch hier. Aber um es zu beheben, springen Sie einfach hinein und ich werde alles auswählen, anstatt von unserem Boden. Stellen Sie sicher, dass sie in der Mitte sind und einfach ausgerichtet sie mit der Mitte aus unseren Büchern und schließlich Kauf Paket ging toe in der Mitte zu sein. Und weil unsere Tasten unterschiedlich sind, verwenden wir diesen Boden. So Kontrolle. Siehst du, ich werde gleich hier springen. Löschen Sie Hit Control V und ich werde es einfach hier in der Mitte wie so verschieben Nicht wirklich sicher, warum das passiert ist, aber wie Sie von Zeit zu Zeit sehen können, werden Sie einige dieser Probleme bemerken. Lasst uns schnell nachsehen. Wie Sie hier sehen können, funktioniert es gut. Hier. Es funktioniert gut. Also lasst uns nicht schnell springen. Reparieren Sie es auch hier. Also, was ich tun werde, ist, dass ich alles auswählen werde, stellen Sie sicher, dass es in der Mitte ist, so stellen Sie sicher, dass es so in der Mitte ist. Wenn Sie es nicht erzwingen können, in der Mitte zu sein, können Sie alle Ihre Steuerbefehle auswählen. Klicken Sie hier und klicken Sie dann einfach hier. Dann ging es Zehe perfekt in der Mitte ausrichten. Also für die Schaltflächen, lassen Sie uns diese schnell löschen. Ich werde dieses einfach benutzen, also kontrolliere C Control V. Ich werde es hier positionieren. Dann werde ich sicherstellen, dass es so in der Mitte ist und dann. Sobald Sie das getan haben, lassen Sie uns sie jetzt anpassen, um reagieren zu können. Also lasst uns das auswählen. Wählen Sie diese Option aus, stellen Sie sicher, dass sie sich in Central Positionieren Sie also dort, wählen Sie alle drei aus und lassen Sie uns sie dann erweitern. Wie Sie sehen können, fühlen sie sich gut lesbar stören alle von unseren Tasten. Jede außerhalb des Layouts, können Sie sehen, dass alles passt, wie es sollte sicherstellen, dass sie 40 sind. Also 1234 und eine letzte Sache, die ich überprüfen möchte, ist das. Buttons werden sowieso anders sein, also lassen Sie sie einfach so, weil der Klopfpunkt ohnehin ziemlich gut ist. Also lasst uns jetzt einfach sicherstellen, dass wir genügend Abstand zwischen ihnen haben. Also 1234 und du wirst dich jetzt mit Elite beschäftigen. Auch Verschiebung 1234 endete Grundsätzlich es. Also lassen Sie uns das jetzt schnell erweitern. Ich werde Testimonials, Promo-Block und Fußzeile verstecken , so dass wir etwas Raum Zehenarbeit mit einer gewissen Fußposition haben. Dies unten bis hier, die wie diese Schicht 1234 Ich werde diese wählen. Bringen Sie es zurück, bewegen Sie dies auf 40 wie so und dann werde ich einfach unseren Hintergrund anpassen und einige dieser Elemente anpassen. Also lassen Sie uns in Formen gehen, die zur Moschee gehen und die Moschee übernehmen, um den ganzen Weg nach unten zu gehen wie so und stellen Sie sicher, dass es in der Mitte so ist. Dann können Sie einige dieser Elemente verschieben. Also, was hat diese benutzt? Lassen wir sie da lassen, wo sie sind. Ich werde das hier positionieren. Ich werde das ein bisschen nach unten positionieren. So etwas, zum Beispiel, vielleicht kann ich sogar die Größe davon erhöhen. Und das ist es im Grunde für diesen Abschnitt. Also lassen Sie uns jetzt zu Referenzen, Promo-Block und für sie gehen . Und bevor wir es tun, werde ich auf mein Brett doppelklicken und einfach den ganzen Weg nach unten erweitert. So, zum Beispiel, weil wir nicht brauchen, um die Schulden zu senken. So Testimonials können Sie Shift halten, wählen Sie alles ist einfach bewegen Sie es hier nach oben. Schicht 1234 Und jetzt springen wir hinein und wir können unsere Zeugnisse anpassen. Also werde ich Zehe Position A Bewertung von hier, um in der Mitte zu sein. Stellen Sie sicher, dass dieser Pfeil hier ist und stellen Sie einfach sicher, dass ich diesen Pfeil in zwei hierher bringe . Wenn Sie damit fertig sind, können Sie einfach in Promo springen. Stellen Sie sicher, dass es bei 80 ist, also muss ich alles bewegen, weil ich Testimonials verschoben habe. 40. Also Shift 1234 Dann stellen Sie sicher, dass dies bei 80 ist, und dann, was Sie tun müssen, ist einfach angepasster Text innen, also lassen Sie uns schnell in die Mitte bewegen. Dann passen Sie einfach diesen Text an, aber die Reise unten. Wählen Sie diese Option aus. Stellen Sie sicher, dass es bei 20 ist und passen Sie einfach diesen Text unten an. Lassen Sie uns mit unserem Knopf umgehen, also werde ich ihn positionieren, um hier zu sein. Stellen Sie sicher, dass es drei Anrufe breit sind, so stellen Sie sicher, dass es in der Mitte und für die Pixel nach unten ist. Also Schicht 1234 Und lassen Sie uns jetzt alles so positionieren, stellen Sie sicher, dass alles in der Mitte ist , wie es ist, und stellen Sie sicher, dass es alles ist. Es ist zentriert wie dieser Gruß horizontal und vertikal. Also lasst uns die Preise verschieben. BG. Lassen Sie uns die Formen verschieben. Also werde ich die Größe meines Kreises ein wenig reduzieren. Ich werde die Größe von diesem Rechteck reduzieren. Endlich werde ich das in ein bisschen bewegen. Ich gehe Zeh, meine Moschee ein. Wie Sie sehen können, bewegt sich alles ziemlich schnell, sobald Sie beginnen, diese Elemente zu bekommen. Also, sobald Sie beginnen, bewegen sich nach links, rechts, so acht Pixel gut, um es so auszurichten. Und schließlich, lasst uns einfach alles drinnen. Also werde ich meinen Text hier positionieren. Ich werde auch Block Post entfernen . Ich werde mein Block Post Bild zu erweitern, um zu hören, dass Sie doppelklicken können, und Sie übertragen neu positionieren dieses Bild als nächstes passen. Das wird gleich bleiben, aber das wird sich einiges ändern, denn jetzt haben wir viel mehr Platz zum Arbeiten. Also lassen Sie es uns so halten, dass es Avatar bewegen kann, um einige 20 Pixel zu hören. Und lassen Sie uns mit unserem Knopf umgehen. Also, wie wir gesagt haben, müssen wir es drei Spalten breit machen, so seine Position es hier und hier. Ich werde den Text auswählen und sicherstellen, dass er in der Mitte ist. Stellen Sie sicher, dass es bei 40. Wie Self Man. Stellen Sie sicher, dass es so in der Mitte von unserem Hafen ist. Schließlich, für die weitere Schwächung, tun Sie genau sagen Dinge, um es einfach in der Mitte zu bewegen. Stellen Sie sicher, dass es bei 80 so ist und bringen Sie einfach den Hafen ein bisschen hoch, damit wir es hier fertig machen können . Wenn es tritt, wissen Sie, dass es in der Mitte ist, also werde ich dieses ein wenig näher bringen, und das ist es im Grunde für die kleine Tablet-Größe. Lasst uns schnell durchlaufen, was wir getan haben. Ich werde meine Noten schnell verstecken. Also haben wir diesen Text eingezogen und ich sehe den Abstand hier nicht so, wie er sollte. Also schießen 12 Ich werde im Grunde alles bewegen müssen. So 1234 1234 und 1234 Also werde ich den Helden BJ hier Illustration bewegen und dann nicht alles tun , nicht an allem arbeiten. Also ist es schnell nur bewegen Sie die Moschee ein wenig nach unten, so dass ich werde Ihnen einen kleinen Trick zeigen . Also bin ich so weit gegangen, ist unser Board ein bisschen den ganzen Weg runter? Also, weil wir an dem Helden gearbeitet haben, lassen Sie uns schnell alles außer Held auswählen. Sie können ein wenig nach oben gehen und dann einfach eingestellt 80 stumm so wie diese und Sie können auf der linken Seite rechts hier sehen. Wenn ich mich bewegt, können Sie sehen, wie viele Pixel dazwischen sind. Und wenn Sie das getan haben, doppelklicken Sie einfach hier und bringen Sie Ihren Hafen, bis er sich in der Mitte so trifft . Sie können auch viel näher bedeuten, wenn Sie wollen, den ganzen Weg bis zu einem Pixel, bis es rastet und es ist im Grunde ist es für eine kleine Tablet-Größe. Also noch einmal, lassen Sie uns schnell decken, was wir getan haben. Wir haben unser A-Logo angepasst. Wir haben die Positionen von allem angepasst. Und es ist gut, dass ich das eingeschaltet habe, weil das nicht so ausgerichtet war, wie es sollte. Also, wie gesagt, wir haben alles drin aufgenommen, genauso wie wir es für mittelgroße Geräte Tablets getan haben. Wir haben jetzt diesen Text, der ein wenig tiefer umschließt. Wir haben die Illustration, die wieder etwas kleiner ist. Hier haben wir kleinere Illustration, kleinere Logos. Wir haben den Text, der ein wenig anders umhüllt. Wir haben Destexhe hier, wir haben diese beiden, aber sie erstrecken sich jetzt ein bisschen nach unten. Hier haben wir diesen anderen Look als zuvor, und ich mag nicht, wie das aussieht. Vielleicht kann ich hier irgendwo wüssten. Es ist ein nur so, dass sie nicht im gleichen Raum und für die Preise haben wir jetzt in diesen Boxen, die den ganzen Weg zu ihrem Gefühl den gesamten Raum zu hören, weil es einen Raum , den wir wieder gefüllt. Ich mag nicht, wie das aussieht. Vielleicht kannst du es hierher bringen. Und das ist die Schönheit dieses Prozesses, denn man kann einfach durchlaufen und sehen, was man nicht mag. Und angepasste Zeugnisse haben sich im Grunde nicht so viel geändert. Das hat sich auch nicht so sehr geändert. Wir haben es gerade erweitert, um ein bisschen größer im Text zu sein. Aber für den Block haben wir jetzt nur einen Block Post, und Sie können dies umgekehrt tun. Sie können Heros einschließen, zum Beispiel Liquiditätsberichte. Sie können die Paginierung direkt hier unten einfügen. Sie können einen Beitrag auf einen anderen hinzufügen, wenn Sie möchten. Aber um des Raums willen, denn Blawg ist wirklich nicht so wichtig für diese Website, weil es Designdienstleistungen verkauft . Gehören ist nur eine der Möglichkeiten, wie sie Geld verdienen, aber nicht ihr Hauptweg. Deshalb haben wir es nach unten verschoben und waren nur ein Block Post enthalten. Also, wenn sie alle Blasplakate sehen wollen, die sagte, hier ist die Block-Seite, sie können einfach klicken, sehen Sie alle oder drücken Sie rechts hier, um auf den Block Post Seite zu gehen. Schließlich hat sich für die Fußzeile nichts wirklich geändert. Es ist nur schmaler als vorher. Also, das ist es im Grunde für diese Größe. Und im nächsten und letzten Video werden wir die Telefongröße besprechen, weil es sich ändern wird. Wieder mal. Wir gehen von vier Spalten im Layout bis vier Spalten für das Telefon, und wir gehen Fuß angepasst, um dort zu passen, also sehen wir uns dort. 15. Responsive: schließlich Lassen Sie unsschließlichmit extra kleinen Geräten IE-Handys beginnen. Aber bevor wir es tun, entschied ich, dass an einigen Orten ich drei Anrufe weiße Tasten enthalten möchte. Also, zum Beispiel, genau hier werde ich das nicht tun, weil es zu viel Chaos mit dem Layout aus unserer Navigation geht . Ich werde das auch hier nicht tun, weil wir zwei Knöpfe nebeneinander haben, aber ich werde es hier tun. Also lassen Sie mich schnell anpassen, und Sie können Responsive Größe Zehe verwenden, schließen Sie es so ein. Und jetzt können Sie sehen, dass es ziemlich groß und ziemlich leicht lesbar ist, weil diese auch sind . Schließlich werde ich auch eine hier einschließen, also werde ich es hier erweitern. Ich werde sicherstellen, dass es in der Mitte ist, und schließlich werde ich auch hier einschließen, nur weil wir genug Platz hier haben. Zehe enthalten, um drei Spalten weiß sein. Nun, da wir das getan haben, lassen Sie uns schnell zu extra kleinen Geräten übergehen. Ich werde dieses ein Kind Kontrolle tief auswählen, und für dieses, werden wir dieses Kunstwerk zu machen, um eine ziemlich lange, so dass ich es genauso gut von Anfang an erweitern kann . Also werde ich es den ganzen Weg nach unten verlängern und ich kann in Sichtweite springen und all diese nach unten bewegen . Aber lassen Sie mich Ihnen diese Spalten schnell zeigen. Also, zum Beispiel, hier haben wir vier Spalten. Also lasst uns zuerst die Schulden ändern. Also vier Spalten und in denen ich beschlossen, 375 zu sein, weil es kleiner als 576 Doppelklick ist. Das hier herumsprengen. Also werde ich seinen Namen ändern. Also lasst uns den Witz auf 375 gleichermaßen ändern. Also und schließlich, für die Spalten, mal sehen, was wir hier haben. Also haben wir 30 61 20. Also lasst uns das kopieren. Also haben wir 30 61 endlich haben wir 20 genau hier unten. Also noch einmal, wir werden es anpassen müssen. Also 30 61 20. Schauen wir es uns an. 30 61 20. Es dauert ein wenig Zeit für Eier Matt zu treten, aber sobald es tut, wie Sie sehen können, funktioniert alles, wie es sollte. Also lassen Sie uns jetzt schnell alle diese verschiedenen Elemente anpassen. Also, im Grunde, geht Zeh Arbeit genau das gleiche wie für alle von diesen. Aber für diesen hier werde ich das Logo etwas kleiner machen. Also, zum Beispiel, irgendwo hier werde ich die Schaltfläche und das Menü-Symbol hier verschieben, und ich werde den unteren Teil ein wenig kleiner machen. Also werde ich zum Beispiel, zum Beispiel, machen es zwei Spalten weiß wie so und gehen, um sicherzustellen, dass, zum Beispiel, es ist ein 20 Pixel, also nicht genau in der Mitte, weil Zentrum wird genau hier. Aber ich werde es bewegen. 20 Pixel, zum Beispiel links von unserem Menü-Symbol. Also ist es in R B G genau hier bewegt. Lassen Sie uns unsere Drop-down-Liste einschließen. Ich werde alles nach innen bewegen oder nach rechts fallen. Also im Grunde gehen wir genau das Gleiche zu tun, wie wir es getan haben. Also werden wir alle Menüelemente auswählen, sie hier verschieben, die Trennlinien und den Hintergrund auswählen. Ich werde sie alle Inverts hierher bringen. Alles sieht gut aus. Ich werde es verstecken, und dann lassen Sie uns mit den folgenden Elementen umgehen. Also, dafür werde ich den Helden auswählen. BG. Bewegen Sie es in Worten wie so und ich werde meine Form wählen. Also lasst uns die Moschee benutzen. Ich bringe die Moschee ein bisschen rein, und wir werden uns ein wenig später mit ihnen befassen. vorerst Lassen Sie unsvorerstalle diese Formen ausblenden. Sie lenken nicht ab, und ich werde mit diesen Elementen umgehen oder sie so in der Mitte positionieren. Und was dann? Ich werde es tun. Bewegen Sie einfach den Demo-Button hier und stellen Sie sicher, dass es zwei Spalten weiß ist, denn jetzt haben wir vier. Stellen Sie sicher, dass dies auch zwei Anrufe weiß sind. Wie Sie sehen können, passt alles wirklich gut, und was ich tun werde, ist einfach das auszuwählen. Und schließlich werde ich seine Größe ändern, weil es zu groß für jetzt ist, und ich werde die Größe auch für diese ändern. Wenn wir also zurück zu hier springen, können Sie es einfach auswählen. Und lassen Sie uns etwas wie offene Größe 36 verwenden und wir werden dies auswählen. Das ist Carla, 80. Stellen Sie sicher, dass es weiß ist. Es ist, und ging einfach dann angegriffen diesen Text zu Fuß hier passen, wie Sie sehen können, alles sieht gut aus , aber ich werde dies von Websites abs zu Branding bewegen. Wir haben dich abgedeckt, also ist alles in vier Zeilen statt fünf. Deshalb ist es besonders hilfreich, Vermögenswerte und Charakterstile zu haben , weil es die Dinge schön und glatt aussehen lassen wird. Alles wird so aussehen, wie es sollte. Aber wenn Sie zur mobilen Ansicht wechseln, vor allem hier, muss alles etwas kleiner sein, da das Gerät insgesamt kleiner ist. Sie müssen also über all diese Dinge nachdenken, denn wenn der Benutzer zum Beispiel diesen Text auf diesem Gerät anschaut zum Beispiel , können Sie sehen, wie groß dieser Bildschirm ist im Vergleich zu diesem. Alles wird abgedeckt sein. Also im Grunde alles ihre ging zu sehen, ist der Text ohne die Tasten, ohne Illustration. Das wollen wir nicht. Wir wollen, dass sie alles so sehen, wie es hier ist. Deshalb reduzieren wir in diesem Fall die Größe vom Text. Also lasst uns nicht weitermachen. Ich werde das hier verschieben, also Schicht 12, ich werde das hier verschieben. Also Shift 1234 Stellen Sie sicher, dass wir die Größe dieses Boxzehen hier reduzieren müssen? Ja, und ich gehe die Zehe. Nimm meine Knöpfe. Stellen Sie sicher, dass sie 40 Pixel nach unten sind und stellen Sie sicher, dass alles 40 Stück von oben nach unten ist . Also genau hier. 1234 Und nun lasst uns mit unserer Illustration und für die Illustration herumspielen. Wir werden alles etwas näher bringen, und ich werde zum Beispiel diesen Teil der Illustration ein bisschen so neu positionieren. Und dann werde ich die Größe von der Illustration reduzieren, also werde ich sicherstellen, dass es 40 ist, wie es ist. Also Schicht 1234 Und dann werde ich meinen Helden BG so einbringen. Ich werde die Illustration noch einmal nach oben verschieben, bis sie bei 40 ist und das ist es im Grunde dafür. Lassen Sie uns nicht mit unseren Formen umgehen, weil wir verändert haben, wie alles im Grunde aussieht, also werde ich mich in meinem Kreis bewegen. Ich werde es etwas kleiner machen. Vielleicht können Sie es hier neu positionieren. Ich werde mich mit diesem großen Platz beschäftigen, so werde ich mich mit dem Platz beschäftigen, um es schnell finden zu lassen . Es ist hier unten. Also, jetzt müssen wir unsere Moschee anpassen. Lassen Sie es uns hierher bringen. Und weil wir das getan haben, lassen Sie uns schnell mit diesem Quadrat umgehen, weil es nicht notwendig ist, dass es so groß ist, damit Sie Ihre Shift-Taste halten können. Sie können es dort positionieren, wo Sie wollen. Sie können es sogar drehen. Aber das werde ich nicht tun. Sieht einfach hier positionieren. Machen Sie die Dinge schön und einfach. Positionieren Sie das hier. Vielleicht kann ich dieses Quadrat etwas nach draußen bringen und vielleicht kann ich den Kreis so hineinschieben . Also, wenn ich meine große verstecke, können Sie sehen, wie alles aussieht, wie es sollte. Alles ist dort platziert, wo es hingehen soll, aber jetzt sieht es auf diesem kleinen Bildschirm viel kohärenter aus. Jetzt für diese Logos, ich werde nicht, dass sie vier in einer Reihe sind. Vielmehr werde ich nur zwei hintereinander haben. Also werde ich das Logo drei Logo verwenden, um sicherzustellen, dass sie in der Mitte Local one Logo sind, um sicherzustellen, dass sie in der Mitte als auch, wie so. Und Sie können sogar mit ihnen herumspielen und zum Beispiel dieses Logo positionieren. So lokal, Sie können es in der Mitte von diesem machen, und Sie können zum Beispiel diese beiden kombinieren, um in der Mitte zu sein. Dann können Sie alles auswählen und nur sicherstellen, dass es in der Mitte wie so jetzt für das Ziel ist. Vom Helden nach unten, können Sie 1234 oder vielleicht 80 verwenden. Mal sehen, was am besten aussieht. Also aß sie 12345678 Ich denke, es ist viel zu viel, weil das jetzt nur ein leerer Raum ist, also vielleicht 40. Das sieht viel besser aus. Lassen Sie uns jetzt mit unserer Illustration umgehen. Sie können alles hier links ausrichten, stellen Sie sicher, dass es hier 40 Pixel sind. Sie können die Illustration verwenden und sie einfach nach unten skalieren, bis sie in unser Raster passt. So, dann werden wir sicherstellen, dass alles dort ist, wo es sein soll. Also Schicht 1234 und wir werden uns nicht mit der Höhe dieser Steuer beschäftigen, weil es eine 36. Dieser Text ist, dass 18. Also im Grunde ist alles so, wie dieser Text ist, also werden wir nicht mehr damit spielen. Aber was wir tun werden, ist einfach mit der Grenze von diesen Worten umzugehen. Also im Grunde so werden wir die Branche unten halten, weil es sagte, es sieht viel schöner aus, wenn Sie sie zwei Textzeilen anstelle von nur einer haben. Dann lassen Sie uns diesen Text schnell anpassen. Ich werde es ausdehnen. Wie Sie sehen können, funktioniert jetzt viel besser. Lassen Sie uns mit unserem Knopf und Position bei 40. Lassen Sie uns es nach oben in 34 bewegen und ich werde nicht einfach seine Größe auf zwei Spalten weiß reduzieren, die schön aussehen. Gehen wir nach unten und weiter. Neupositionierung ist in der Mitte zu sein, stellen Sie sicher, dass es 40 ist, also 1234 und wir werden uns jetzt mit diesen beiden Texten befassen. Also für diesen hier werden wir es anpassen. Also holen Sie sich Ihre Projekte. Ich werde das auf dem Weg schnell runterbringen. Es geht nach draußen. Also so, nun, wir müssen hier sein. Kümmere dich ab. Das Design wird hier runtergehen. schließlich Lassen Sie unsschließlichden Teiler und einen Text nach unten 20 Pixel verschieben, so dass ich diesen Text hier verschieben werde . Bewegen Sie es hier rein. Deshalb haben wir es als Bereichstext erstellt, weil es, wie Sie auf diesen kleineren Größen sehen können, wie Sie auf diesen kleineren Größen sehen können,viel einfacher ist, damit zu arbeiten. Dann haben Zehe es Punkttext sein. Jetzt für diese werden sie unsere große Veränderung sein, weil wir im Grunde haben, dass sie eins nach dem anderen sein werden . Also Schicht 1234 Und jetzt werde ich all diese Elemente nach unten verschieben, weil ich nicht will sie mich so stören. Und konzentrieren wir uns jetzt auf diese. Also lassen Sie uns Insider-Funktionen springen und ich werde diese drei zog ihn hierher. Stellen Sie sicher, dass sie so ausgerichtet sind, und ich werde benutzerdefinierte Lösungen nach unten verschieben, weil das unsere letzte ist. Und lassen Sie uns wissen, arbeiten Sie einfach an unserem Text. zunächst Siezunächstsicher, dass sie alle so ausgerichtet sind. Stellen Sie sicher, dass sie mit der linken Kante von unserem Gitter ausrichten, und dann werde ich nach innen springen und Justiztext wie so So ist es jetzt bei drei Textzeilen statt aus für, so dass es viel kompakter für die Benutzer zu lesen, also stellen Sie sicher, dass Sie bei 40. Also 1234 werden wir dasselbe für Dis Text tun. Es ist jetzt in zwei Zeilen, also passen Sie es entsprechend an. Lassen Sie uns mit diesem umgehen. Mal sehen, ob es in Position schnappen wird. Es ist sogar eine ganze Kontrolle, direkt in Ihren Text zu klicken. Du wählst, ging. Wir werden es festhalten, um hier zu sein, wie es in all unseren anderen Beispielen ist. Stellen Sie sicher, dass es bei 40 ist, wenn es nicht will, 1234 Es ging zu sehen 39.8 wieder. Das ist, weil aus unserer Ikone und sind gleich. Wir gingen hier, nur um sicherzustellen, dass es abschneidet, wo es soll . Und dann werden wir zur Preisgestaltung übergehen, also werde ich all diese Elemente wieder nach oben bringen. Deshalb ist es schön, diese Gruppen zu haben, weil sie wirklich hilfreich sind. So Shift 1234 Stellen Sie sicher, dass es bei 40 ist und was Sie jetzt tun werden, ist in unseren Text springen , positionieren Sie es so und erschwingliche Preise. Mal sehen, wir werden alles halten, was ein Zit ist, nur stellen Sie sicher, dass das in der Mitte ist, so ist es so. Diese Box passt nach draußen, aber sobald es in Code kommt, wird es keine Box geben. Es passt also gut hinein, also mach dir keine Sorgen darum. Wir werden das in so ausgedehnt positionieren , ,nicht, bis es so passt, und dann werden wir diese drei zum Hören bewegen und sicherstellen, dass sie bei 40 sind. So 1234 und wir werden alle von ihnen sind Responsive Größe ändern gehen, um seine Magie zu tun. Wie Sie sehen können, sieht alles schön, sauber aus und wie es sollte, hat es die Proportionen nicht verändert. Das einzige, was uns noch übrig bleibt, ist einfach die Preisgestaltung Bijie nach unten zu verlängern. So 1234 und wir werden die Preisgestaltung Schönheit wählen. Stellen Sie sicher, dass es ausgerichtet ist. Bewegen Sie das nach oben, bis es in 40 einrastet. Und dann beschäftigen wir uns mit der Preisgestaltung BG. Wie Sie in diesem Projekt sehen können,nimmt uns dieser Hintergrund mit all diesen Formen die meiste Zeit in Anspruch, damit Sie mit seinen beiden Möglichkeiten umgehen können, wie wir es jetzt sind. Wie Sie in diesem Projekt sehen können, nimmt uns dieser Hintergrund mit all diesen Formen die meiste Zeit in Anspruch, damit Sie mit Oder Sie können es Bild sein, das Sie separat erstellen können. Oder du kannst es einschließen, Toby. Sehr einmal oder Sie können separate Illustrationen erstellen, so dass Sie nicht jedes Mal die Größe ändern müssen . Es liegt wirklich an Ihnen und Ihrem Workflow. jedoch Sie mögenjedochZehenarbeit und wo immer Sie denken, passt am besten mit dem Projekt in der Hand. Es gibt also viele Möglichkeiten, mit diesen Fragen und Strategien umzugehen. Wie auch immer Sie denken, was Sie denken, es passt für das Projekt, das ist, was Sie tun werden. Also sind wir nicht im Grunde mit unserer Moschee fertig. So können wir jetzt weiter unten gehen, also noch einmal, wählen Sie alles und stellen Sie sicher, dass sie bei 40. So etwas wie das hier, werde ich in meine Zeugnisse springen. Ich werde sicherstellen, dass mein linker Pfeil auf meine Noten ausgerichtet ist, meinen rechten Pfeil ebenso wie diesen. Und ich werde mein Zeugnis verwenden, es so ins Zentrum bringen und weil jetzt das entfernt und es kann das nicht mehr enthalten . Was ich eigentlich tun werde, ist, diese Pfeile nach unten zu bewegen, damit ich sie auswählen werde. Umgezogen in 41 234 und ich werde sie positionieren, um in der Mitte und Zehe online mit Körnung zu sein . Also werde ich meinen linken Pfeil auswählen. Positionieren Sie es hier, bewegen Sie meinen rechten Terror. Positionieren Sie es hier. Wie Sie sehen können, gibt es immer noch Raum zwischen den Gitterlinien, so innerhalb der Rinne, so dass Benutzer ihre Schläge verwenden können und Treffpunkt wird schön und einfach Zehe Zugang sein, weil sie immer noch genug Platz auf der linken Seite haben , rechts und in der Mitte zwischen diesen beiden Symbolen. Wenn Sie mit kleineren Geräten arbeiten, zum Beispiel viel kleinere Formen als diese neueren Telefone, können Sie sie sogar noch mehr auseinander verteilen, wenn das etwas ist, das Sie wollen. Aber Sie müssen mit den Entwicklern sprechen, um zu sehen, was sie denken, wenn Sie auf diesen Geräten testen . Unter idealen Bedingungen werden Sie in der Lage sein, Geräte Zehentest sofort zu verwenden. Aber wenn Sie diese Option nicht in diesem Luxus haben, dann können Sie einfach lesen, was er will und was Sie brauchen, damit Sie alles hineinpassen können . Lassen Sie uns jetzt dieses Zeugnis nach unten 40 verschieben und wir können dasselbe für unseren Pfeil tun. So 1234 und wir können diese Pfeile wählen, wählen Sie ihn wie folgt. 1234 Weil wir keine Hintergrundfarbe haben. Stellen wir sicher, dass das bei 40 ist. Also einmal vorher und jetzt werde ich diese und sie auswählen, aber stellen Sie sicher, dass sie auch bei 40 sind. Und lassen Sie uns nicht damit umgehen, also werde ich es schön reinbringen. Ich werde meinen Demo-Button verwenden. Stellen Sie sicher, dass es zwei Anrufe weiß wie so verantwortungsvoll Größe ist. Gestank es und stellen Sie sicher, dass diese beiden so in der Mitte sind? Nein, wir müssen das anpassen. Also lasst uns reinspringen. Kreative Reisen gingen vorbei, und wer von uns wird darunter gehen? Lasst uns den Teiler benutzen. wir sicher, dass es 20 ist. Stellen Sie sicher, dass Button bei 40 ist, also ging ich vor. Positionieren Siedas in der Mitte und Sie wählen Sie alles aus und verschieben Sie es in die Mitte. Wie Sie sehen können, 64 63. Es hat also viel Abstand zwischen, so dass Sie diesen Abschnitt nicht erweitern müssen, wenn Sie nicht möchten. Wenn Sie eine tun, so können Sie es erweitern, um noch mehr Platz zu gewinnen. Aber wenn es nicht notwendig ist, dass ich nicht raten würde, so können Sie den ganzen Weg nach unten verlängern. Obwohl dieser Abschnitt wichtig ist, weil er Call to Action unten enthält, ist es nicht so wichtig, wenn er die Ansicht für den Benutzer blockiert, so dass der Benutzer den ganzen Weg nach unten scrollen und viel Zeit verlieren muss. Sie müssen sofort sagen können, was es ist, damit Sie damit umgehen können, wenn Sie wollen. Also nennen wir diesen Abschnitt fertig. Ich werde in diesen Ordnern so schließen, und es ist jetzt schnell zu Blawg gehen, um hier zu positionieren, stellen Sie sicher, dass es bei 40. Also 1234 und schließlich, lassen Sie uns den Text in der Mitte so fallen. Wir werden unseren Block unten positionieren. Wir werden den Pfosten und den Boden darunter bewegen. Also 1234 werde ich reinspringen, mein Bild anpassen, um genau hier zu passen. Ich werde auf diesen Text klicken und entsprechend angepasst, so. Und schließlich werde ich meinen Avatar zu ungerechten bewegen, so wie Sie sehen, es ist ganz einfach. Sobald du los bist, werde ich sicherstellen, dass mein Knopf die Zehe weiß ist. Das Gleiche wie alle anderen Tasten. Stellen Sie sicher, dass es bei 40 so ist. Und schließlich, lassen Sie uns nicht mit Footer umgehen. Also nochmal, ich gehe die Zehe. Positionieren Sie es in der Mitte, stellen Sie sicher, dass es eine 40. Also 1234 Und wenn ich das tun werde, weil, wie Sie sehen können, wir keinen Platz mehr haben, werde ich diese Gegenstände benutzen. Also Blawg und kontaktieren Sie uns. Ich werde unter vielleicht 20 Pixel bewegen. Oder lasst uns 40 benutzen, weil wir überall 40 benutzt haben. Jetzt gehe ich auf die Zehe. Positionieren Sie das in der Mitte und wählen Sie Preise Futures und Dienstleistungen und bewegen Sie die in Mitte so, wie es ist genau hier. Oder Sie können sie sogar gruppieren und einfach Fußzeile BG auswählen. Stellen Sie sicher, dass sie in der Mitte sind. Sie können sich gruppieren. Diese beiden wollen es für die BG verkaufen. Stellen Sie sicher, dass sie in der Mitte sind, und das ist das schöne Gewicht, das zu tun. Sie können das Logo auswählen. Stellen Sie sicher, dass das in der Mitte ist und ich werde das online ablegen. Dann können Sie alle diese auswählen. Stellen Sie sicher, dass sie in der Mitte sind. Also, wenn alles schön und prägnant ist, können Sie das dann hineinbringen und es nach unten erweitern, weil wir hier viel mehr Platz haben wollen . Also lassen Sie uns das nicht tun, weil wir 1234 Wir haben 40 Pixel zwischen diesem und Logo. Lasst uns dasselbe für all diese anderen tun. Wir haben auch 40 hier, also werde ich diese auswählen, um sie nach unten zu verschieben, bis sie bei 40 sind. Wie Sie sehen können, haben wir überall 40. Verschieben Sie das nach unten, um eine 40 wie so zu sein. Dann wähle ich alles aus. Stellen Sie sicher, dass alles 40. So 1234 und schließlich zog diese nach unten vierziger. Nun, also 1234 werde ich das hineinbringen, bis es mit der Unterkante trifft. Marke rief einfach meine Shift-Taste, bis es Linien. Jetzt ist alles ausgerichtet und sieht richtig aus. Eine gewalttätige Sache ist, das zu erwähnen, weil wir es nicht brauchen, um den ganzen Weg nach unten zu rufen . Aber es ist schön, so dass Sie Ihren Hafen erweitern können, bis er Ihren Anforderungen entspricht , und dann können Sie ihn einfach wieder aufbauen. Also, das ist es im Grunde. Wir haben diese Seite erstellt, um reagieren zu können. Wir begannen mit großen, die als kleine stoppt, die mittlere Talent, kleine Erzähler und dann schließlich, Telefone. Wenn ein Sprung hier, schließen Sie meine große, so dass Sie alles sehen können. Wie Sie sehen können, passt sich das Layout gut an diese verschiedenen Bildschirmgrößen an. Alles funktioniert, wie es sollte. Und jetzt liegt es an Ihnen, diese Asset-Entwickler zu liefern, damit sie diese Website entwickeln können , und sie bestreiten, um zu sehen, ob alles richtig funktioniert. Das werden wir im nächsten Abschnitt des Diskurses tun. Wir werden Größe nach Größe gehen, und wir werden all diese Vermögenswerte extrahieren. Dann werden Sie alle diese Assets an Entwickler senden und Entwickler gehen, um sie zu testen und zu sehen, ob alles richtig funktioniert und wie es sollte, bevor es online geht, um für die Menschen überall auf der Welt zu sehen. Also sehen wir uns im nächsten Abschnitt des Kurses 16. Ordnerstruktur: jetzt, da du fertig bist, deine responsive Designs in X'd zu entwerfen und fertig zu stellen. Jetzt kommt es an der Zeit, Ihre Assets für Entwickler zu exportieren, und als Designer müssen Sie diese Assets exportieren, damit Entwickler verstehen wo alles auf verschiedenen Größen läuft und wo alles so positioniert ist, dass der Export Ihre Assets in X'd. Es ist extrem einfach. Aber bevor wir in verschiedenen Assets für verschiedene Größen exportieren, müssen Sie erkennbare und logische Ordnerstruktur erstellen. Lassen Sie mich Ihnen also schnell zeigen, wie Sie das machen. Hier habe ich eine Studio-Designagentur, die nur ein leerer Ordner ist, und innerhalb dieses leeren Ordners werden wir verschiedene Ordner für verschiedene Größen erstellen. Also, wenn ein Sprung zurück in Eier D und zoomen ein wenig, können Sie doppelklicken Sie hier. Drücken Sie Control C, um den Namen von diesem unserem Port zu kopieren, und Sie können in Ihren Ordner mit der rechten Maustaste springen und Fuller erstellen und einfach den Namen aus diesem Ordner im Inneren basieren . Deshalb werden Entwickler in der Lage sein, schnell zu verstehen, wenn sie diese Eier defile öffnen, die Port sind. Wollen Sie versuchen, zu exportieren und für die unser Hafen diese Vermögenswerte Zehe zugewiesen sind, damit Sie weitermachen und dies für all diese anderen unsere Häfen tun können , damit ich kontrollieren kann, sehen, zurückspringen kann. Ich werde einen neuen Fuller erstellen, und es wird viel einfacher für sie zu verstehen, welche es gibt, weil sie diese mehrere Bilder in verschiedenen Größen haben. Es ist also viel einfacher für sie zu verstehen, ob Sie bereits vorbereitet sind. Alles für sie und Export von X, De Aza sagte, ist extrem einfach und einfach zu tun, und wir werden, dass im nächsten Video zu bekommen. Aber für dieses Video möchte ich Ihnen nur zeigen, wie Sie Ihre Dateistruktur vorbereiten können. Hier ist also unsere grundlegende Dateistruktur, und darin wir all diese verschiedenen Assets platzieren, die Ihnen zeigen werden, wie Sie sie einfach im nächsten Video exportieren können. Und wir werden über verschiedene Dateiformate sprechen und in welchen Dateiformaten Sie exportieren möchten . Welche Dateien, da es äußerst wichtig ist, diese Dateiformate zu verstehen, insbesondere wenn Sie Ihre Assets für Entwickler exportieren. Also werden wir das im nächsten Video abdecken, aber das Ende, dieses Video. Ich möchte Ihnen nur sagen, dass außerhalb all dieser Ordner können Sie diese Haupt-Eier verunreinigen speichern . Wenn Entwickler also mehrere Projekte hat, an denen sie gleichzeitig arbeiten, können sie schnell in diese vollere Öffnung dieser X-Defile springen. Das können sie sehen. Okay, das ist dieses Projekt und sie können einfach dann in jeden dieser verschiedenen Ordner springen , die Sie gerade erstellt haben, und dann die Assets aus diesen Ordnern nehmen. Aber Sie können auch tun, ist eine lesen Sie mich pdf-Datei oder lesen Sie mich Textdatei. Es spielt wirklich keine Rolle, wo Sie einfach auflisten können, wo Sie Ihre Telefone haben, oder Sie können ihnen Telefone direkt senden, noch besser, so dass sie mit den gleichen Telefonen innerhalb des Codes arbeiten können. Auch, wenn es Bilder aus verschiedenen Quellen online aufgenommen hat, zum Beispiel, haben wir auf Splash für diesen speziellen Kurs verwendet. Zum Beispiel, diese drei Bilder Sie können sie direkt auf die Links für diese drei Bilder verweisen, oder Sie können ihnen einfach einen Link auf die auf Splash Website senden, wo sie diese Bilder erhalten und sie in der höchstmöglichen -Auflösung. Deshalb spielt die Ordnerstruktur wirklich eine Rolle, besonders wenn Sie verschiedene Symbole haben, die Sie verwendet haben. Zum Beispiel haben Sie verschiedene Sammlungen aus Symbolen, dann werden Sie sie alle hier platzieren. Wenn Sie mehrere Ressourcen haben, ist, dass Sie alle diese verschiedenen Ordner senden möchten , dann empfehle ich Ihnen wirklich, dass Sie einen separaten Ordner erstellen, zum Beispiel Assets und dann innerhalb dieses Ordners, Platzieren Sie Ihre Bilder, platzieren Sie Ihre Symbole, platzieren Sie verschiedene Illustrationen. Was auch immer Ihr Projekt besteht, dann wird ein wirklich empfohlen, dass Sie diesen Ordner erstellen und alle diese verschiedenen Assets innerhalb dieses Ordners legen , wie sie sagten, für Entwickler viel einfacher sein, verstehen, wohin alles geht, wo sich alles befindet. Und sie werden dich nicht mit mehreren Fragen belästigen. Nachdem Sie das Design für dieses Projekt abgeschlossen haben, wo sich alles befindet, weil Sie alles im fortgeschrittenen vorbereiten und sie alle aus diesen verschiedenen Dateiensenden sie alle aus diesen verschiedenen Dateien 17. Assets exportieren: Ich weiß, dass wir unsere Ordnerstruktur erstellt haben. Es kommt die Zeit, unsere Dateien zu exportieren, und wenn ich ein wenig näher zoomen, klicken Sie auf eines dieser sind Boards und drücken Sie Control E oder Kommando auf einem Mac. Sie können sehen, dass dieser Stil von erscheint jetzt. Hier können Sie das Format auswählen, das Sie aus PNG, SVG, PDF und J Pick wählen können SVG, , und sie unterscheiden sich sehr stark. PNG ist also im Grunde ein Bild ohne Hintergrund. , Zum Beispiel, wenn Sie einige Bilder von Personen ausschneiden, die Objekt sagen oder absetzen und sie in Ihre Entwürfe aufnehmen, ist das, wo P und G nützlich. Next up SPG ist ein Vektordateiformate, und es ist großartig, weil es kalt innen enthält. Und es ist auch sehr nützlich für Entwickler, weil sie diesen Code nehmen können, sie können ihn in ihren eigenen Mantel aufnehmen. Sie können zum Beispiel die Größen von einigen der Icons Illustrationen anpassen , in denen dieses SVG-Dateiformat am meisten verwendet wird, und sie können leicht nicht in Zitat integriert werden. Sie können für jede dieser Einstellungen sehen, es gibt verschiedene Einstellungen, und wir werden das in einer Sekunde abdecken. Weiter oben ist ein PDF, das eine einfache PDF-Datei ist. Und es ist großartig. beispielsweise Wenn SiebeispielsweiseEntwurfsunterlagen exportieren, die Sie innerhalb erstellt haben, ist dies einfach. Oder wenn Sie einige andere Textdokumente mit beispielsweise beispielsweise einigen Bildern haben. Sagen wir mehr Moodboards oder so etwas, und Sie können das als PDF exportieren. Und schließlich haben wir den Jay Peak, der im Grunde nur ein normales Bild ist. Lassen Sie uns nun schnell einige dieser Optionen durchlaufen. Also für P und G, können Sie Design wählen, und es wird Zehe Export. Wie es ist, können Sie auf das Web klicken, wenn Sie sehen können, dass es exportiert ausgewählte Assets als ein X und zwei x, was in der ursprünglichen Größe bedeutet, das ist ein X und zwei X, die Ihre ursprüngliche Website verdoppelt. Außer, dass wir IOS haben. Wie Sie sehen können, exportiert es sie in ein x zwei x und drei x, was großartig ist, wenn Sie zum Beispiel kleinere Telefone und kleinere iPhone-Größe entwerfen zum Beispiel . Nehmen wir an, iPhone acht und Sie wollen toe exportieren. Ich habe 10 11 oder Max oder so etwas gefunden. Das ist, wo diese Größen nützlich sind, und schließlich haben wir Android, das ist wieder anders als alle von diesen, weil es exportiert sie in den Maßnahmen, die M. D P I ist . Und Sie können bei 75% 100 sehen % und geht den ganzen Weg bis zu 400%. Und es hat all diese verschiedenen Abkürzungen Zehenprozentsatz, dass es exportiert wird und all dies bedeutet im Grunde dasselbe wie für Iris, aber es exportiert bei einem x zwei x drei x für Android. Da es viele andere Größen außerhalb des Bildschirms gibt, können Sie alle diese verschiedenen Prozentsätze sehen, so dass Sie sie auswählen können und Sie sehen, es ist entworfen, zum Beispiel bei 100% dieser Android-App, und dann können Sie es in all diesen anderen Größen exportieren. Also im Grunde, das ist es für Dateiformate für die SPG. Ich empfehle Ihnen, nichts zu ändern, es sei denn, Sie sehen mit Ihren Entwicklern, wenn sie etwas von diesen angepasstes wollen , aber normalerweise werden sie das innerhalb außerhalb des Platzes anpassen. Also werden wir SVG verwenden, und wir werden PNG-Design verwenden, weil ich nicht das Web verwenden werde, weil dies ist, wenn Sie kein ansprechendes Design haben, wie wir es hier tun, wird dies im Grunde exportieren, dass in Originalgröße und doppelt die Originalgröße. Daher empfehle ich es nicht, weil wir immer noch alle diese verschiedenen Größen haben, die wir ursprünglich entworfen haben . Also, warum wählen Sie das? Also lassen Sie uns einfach Design verwenden und für den Ordner, ich werde hier klicken, und ich gehe zu Mr. the Agency und beginnen Sie mit der größten Größe und klicken Sie auf Ordner auswählen und ich gehe toe Export es nur für den Ausgang zu erinnern, wo ich exportiert. Und wenn ich in diesen Ordner springe, könnten Sie sehen, dass er in das gesamte Design exportiert wurde. Ich empfehle Ihnen, dies zu tun, denn dann können Entwickler leicht über dieses Bild schauen und sehen, welche Änderungen Sie vorgenommen haben oder einige Positionen, zum Beispiel, ist so etwas. Natürlich werden Sie ihnen die Originaldatei senden, aber das ist nur Zehe aß sie in ihrem Entwicklungsprozess. Als Nächstes beim Exportieren müssen Sie beim Exportierenalle diese verschiedenen Optionen in all diesen verschiedenen Ebenen auswählen. Also werde ich meine Ebenen Panel direkt hier und in meinem Nickerchen auswählen. Ich möchte nur mein Logo und meinen Demo-Button exportieren, aber stattdessen aus Text. Ich werde es verstecken und ich werde Ordner auswählen So Logo und Demo zwischen und ich werde Zehe Hit Control e Saft Bong Hit Exporte folgte, dass er gerade ausgewählt und ich werde toe auch mein Logo auswählen würde er kontrollieren, essen und exportiert ist SVG, weil ich möchte, dass meine Entwickler diese Option haben. Wenn sie später in Kälte einschließen wollen, können sie das auch tun. Ich werde den Text schnell auf meine Demo-Button und eine kurze Nebennotiz zurückbringen, weil ich einen Fehler gemacht habe. Ich habe alle diese Tasten BT genannt und Sie können sie so benennen, also doppelklicken Sie einfach hier. Er würde Seed Hit Control V kontrollieren und das wird Gold Demo Bateer sein. Und dann können Sie einfach diese Ebene auswählen. Er steuerte E und exportierte diese Ebene dann als Schaltfläche. Aber weil ich, wie gesagt, den Fehler gemacht habe. Ich werde alle von ihnen vor Knöpfen verstecken und sie dann zurückbringen, um sie im ursprünglichen Design zu haben Weiter mit dem Export. Ah, Held, ich beginne mit Illustrationen. Ich werde beide auswählen, aber separat ist, dass Sie sehen können, es steuern e und exportieren Sie sie als svg, weil ich wieder einmal möchte, dass mein Entwickler toe Haben Sie diese Option zehe sie so exportieren. Als nächstes haben wir all diese verschiedenen Formen. Ich werde sie auswählen, Hit control, essen und ich werde sie s PNG exportieren, weil sie im Grunde halbtransparente Formen sind und Entwickler in der Lage, sie so aufzunehmen. Als nächstes haben wir Held BG einweichen kontrolliert er exportiert als G, weil wir es nicht als SPG exportieren müssen , weil es nur im Grunde ein farbiger Hintergrund ist. Wenn Sie es als Strahlkraft haben, können Sie mit Ihren Entwicklern sprechen Wenn sie es bevorzugen, senden Sie sie svg, weil sie dann die Grady und ein wenig innerlich CSS anpassen können. Aber wenn sie nicht zulassen wollen, senden Sie sie einfach in G-Datei zu sein. Als Nächstes haben wir Knöpfe. Also noch einmal, ich werde den Text wegen meines früheren Fehlers verstecken. Ich werde Dergarabedian und Morbidität wählen und Kontrolle e Export sie s PNG Hit Export. Und wie Sie sehen können, existiert bereits ein Demo-Bot n. Also, weil das dieser Knopf hier ist, werde ich einfach mehr zwischen Wärmeregler E und Export auswählen. Das sind P und G. Ich werde das alles verbergen. Aber bevor ich es tue, werde ich einfach so zum Text zurückbringen. Klicken Sie einfach auf diesen Augapfel Ich könnte Es wird wieder kommen und als nächstes haben wir alle diese verschiedenen Symbole jetzt, weil dies nicht meine Kunden sind. Ich werde einfach wählen Steuerung e Export sie s PNGs. Nur damit der Entwickler weiß, was sind die Größen von Logos, die sie schließlich einschließen werden. Wenn Sie an einem Design arbeiten, stellen Sie sicher, dass toe immer fragen Sie Ihren Kunden, ob sie ursprüngliche Kunden aus haben, es gibt so, dass Sie sie anstelle dieser Normal Ich war einschließen können. Aber wenn Sie meinen Client in diesem Fall nicht mögen, dann werde ich diese Standard-Ortsansässigen einbeziehen. Und dann können Entwickler ihn später ändern, weil es einfach ein PNG-Bild ist. Also im Grunde ein Bild davon, der transparente Hintergrund. Also werden sie es so einschließen. Die Verwaltung noch einmal auf Kontrolle e. Ich werde das als svg Hit Export exportieren und wir haben Demo VT, in dem wir nicht ändern werden und wir werden es behalten, wie es ist. Aber wenn ich hier nicht mag, bring mein Layout ein, du siehst, dass es in drei Spalten weiß ist, und diese sind an Khans Frau, also kannst du es mit einem anderen Namen exportieren. Demo Bt in drei, zum Beispiel für drei Anruf noch besser. So vielleicht könnte ich dies so einschließen, dass Entwickler wissen, dass es drei Spalten weiß sind. Ich werde den Text Hit Control E Export ausblenden, dass s P und G Ich so bringen in diesem Text zurück. Und jetzt haben wir im Grunde alle Schaltflächen auf dieser Seite mit Ausnahme dieser auf. Ich werde es ein bisschen später einschließen. Nein, lass mich mich schnell verstecken. Tun Sie großartig, weil wir es nicht mehr brauchen. Und jetzt, weil aus all diesen Zeilen werde ich diesen Text auswählen und diesen Teiler wählen, um Divider zu sein . Drei Anrufe, zum Beispiel. Wie so seine Kontrolle e Export, die s p und G Und für diese anderen Teiler, Ich werde sie einfach lassen, wie sie sind. Also nur kleine Trennwand und Sie müssen nicht alle exportieren. Sie können einfach eine Wärmeregler E, S, P und Gexportieren S, P und G und nun gehen wir zu den Symbolen. Ich halte meine Steuerungs- oder Befehlstaste und wähle einfach alle unsere Symbole aus. Heat Control E. Stellen Sie sicher, dass Sie SVG Hit Export wählen, weil ich wieder einmal für sehr wichtig halte. Toby exportiert in höchstmöglicher Qualität, weil man sich das auf wirklich kleinen Bildschirmen vorstellen kann. Diese Zyklen funktionieren wirklich gut, denn, wie Sie bei voller Vergrößerung sehen können, verliert es überhaupt keine Qualität, weil es sich um ein faktorbasiertes Symbol handelt. Außer, lassen Sie uns hiermit fortfahren. Und weil wir all diese Elemente innerhalb unseres Heldenabschnitts haben, werde ich sie nicht exportieren, weil Entwickler manchmal etwas wie J Query verwenden möchten , um all diese Hintergrundformen zu animieren, und es ist wirklich bis zu Sie und den Kunden, wie sie ein Produkt finden möchten, das aussehen sobald es genannt und veröffentlicht wird. Aber in unserem Fall werde ich sie nicht exportieren, weil sie, wie sie sagten, genau die gleichen Formen sind wie diese. Sie haben zwei Optionen, die Sie einfach die beiden auswählen können. Sie können sie mit Steuerelement E gruppieren und dieses gesamte Bild als PNG exportieren, wenn Sie möchten. Und wenn Sie dies nicht tun, können Sie einfach die Exportpreise zelten. BG weil von den Einschränkungen. So weiß der Entwickler, wie weit dieser Text vom Set entfernt ist, zum Beispiel, wie weit diese Boxen von den Chirurgen entfernt sind, damit sie alle diese Maßnahmen kennen. Aber sonst werde ich nicht mehr alle diese verschiedenen Formen exportieren. Weil, wie er sagte, wir haben das bereits in unserem Ordner, so dass er Ito Export Pricing PG exportiert kontrollieren würde. Gefragt, Entschuldigung, PNG. Und ich werde eine von ihnen auswählen, weil sie alle genau den gleichen Hintergrund haben, aber noch besser, weil wir die Namen einbezogen haben. Also Preis drei BG Preis G Preis ein b j sein. Sie können ihn einfach auswählen. Er würde die PNGs exportieren. Und dann, was ich tun werde, ist eine dieser Schaltflächen zu exportieren. Also Kauf-Button, Ich werde meinen Text verstecken, weil, wie Sie sehen können, gibt es einen anderen hier. Ich habe nicht jeden einzelnen Layer wie ein Shooting umbenannt, damit er exportierte s PNG kontrollieren konnte und jetzt im Grunde hat der Entwickler alle diese verschiedenen Schaltflächen. Es ist also mehr, dass ich dasselbe tun werde wie bei früheren Kunden. Weil, wie Sie sehen können, ich habe sie wie ein sollte genannt, so können Sie lokale 567 Ich werde Control E Export treffen, dass Miss Bong noch einmal. Nur damit sie die Position von diesen Logos relativ zu diesem Text kennen. Lassen Sie uns sehen und schließlich exportieren unsere Pfeile mit Kontrolle. E exportieren sie als SVG ist, weil es ein vektorbasierter ist. Ich kann nicht. Ich werde zur Promo gehen. Und für diesen hier werde ich das nicht bearbeiten, Martin. Ich werde es nicht exportieren. Ich werde meine Formen nicht exportieren. Alles, was ich tun möchte, ist einfach mein Problem zu exportieren. BG es steuert Sie Export. Das ist PNG Hit Export. Und jetzt gehen wir zum Block über. Ich wähle meine Bilder und meine Avatare aus. Deshalb habe ich so genannt, damit man sich gegenseitig Bild sehen konnte und so weiter. Hit Control E Export zu verpassen tun und Dichtung Taste. Sie können sie exportieren oder Sie können es nicht leer lassen, weil Sie sehen können. Im Grunde exportieren Sie diese Shapes. Normalerweise exportieren Sie keine Schaltflächen mit Text auf ihm, denn wenn Entwickler etwas in der Zeile ändern möchten , können sie den Text nicht ändern, weil er darin gebacken ist. Es ist im Grunde ein Bild, also werden wir es so lassen, wie es ist. Als nächstes bewegen wir den Zehenfuß oder schließlich, und ich werde kein Logo exportieren, weil ich das bereits getan habe. Ich werde den Export von Social-Media-Symbolen so ausgewählt, wie er so kontrolliert E. Stellen Sie sicher, dass sie bei SPG Export sind. Und schließlich werde ich meinen Fuß wählen. RBG traf die Kontrolle und ging, um das als G. zu exportieren und das ist es im Grunde für diese Größe. Was Sie jetzt tun müssen, ist es einfach weitermachen. Wir erzählten diesen anderen Größen, dass ich so etwas wie 10 oder 12 Minuten brauchte, weil ich die ganze Zeit sprach. Aber wenn Sie es nicht tun und wenn Sie dies mehrmals tun, können Sie wirklich schnell. Und wenn du nach einer gewissen Zeit alles richtig machst, kannst du das in etwa zwei oder drei Minuten erledigen. Du wirst also etwas wie 10 oder 15 Minuten für alle brauchen. Und wenn Sie an wirklich riesigen Projekten arbeiten. wir zum Beispiel an, Nehmenwir zum Beispiel an,Sie machen ein mobiles APP-Design, das,sagen wir, 200 Bildschirme durchlaufen hat sagen wir, . Sie müssen einen Tag für den Export all dieser verschiedenen Dateien widmen. Und schließlich, eine weitere Sache, die ich erwähnen möchte, ist, dass Sie in der Regel einen Styleguide benötigen, und ich habe erklärt, was für eine starke Ideen in meinem Web-Design-Kurs. Wenn Sie also an Schlepptau interessiert sind, tiefer Tauchgang über die Methoden des Designs über Moodboards, Flussdiagramme und so weiter, können Sie diesen Kurs überprüfen. Aber im Grunde ist es eine Art Dokument genau hier oder hier. Wo auch immer Sie es hineinlegen möchten, wird es einfach sein. Wir werden alle Schaltflächen auswählen und verschieben, alle verschiedenen Text, so dass Sie im Grunde direkt hier springen können und wählen Sie einfach alle diese Schaltkreise Farben, wenn Sie Hintergrundschatten verwenden, wenn Sie Illustrationen verwendet. Wenn Sie Zeichenstile verwenden, werden Sie alles hineinlegen. Und schließlich, wenn Sie Komponenten verwenden, wie Sie sehen können, habe ich bereits erstellt sie Schaltfläche als meine Komponente, nur um Ihnen zu zeigen, wie es funktioniert. Aber im Grunde werden Sie alles hineinlegen und Sie werden diese endgültige Datei als Job senden . TXT-Datei. Sie können diese s pdf-Datei exportieren und sie im Grunde an Entwickler geben, damit sie in der Zeile wissen können , was Sie in diesem Projekt verwendet haben. Es ist auch nützlich für Sie später, wenn Sie dieses Projekt sagen, wenn der Kunde zu Ihnen zurückkommt und einige zusätzliche Änderungen wünschen, dann haben Sie einfach dieses Projekt und Sie können wählen, welche Elemente Sie in diesem Styleguide enthalten haben, Sie können sie einfach kopieren und in zukünftige Arbeiten einfügen. Also im Grunde sind Start-Jungs wirklich mächtig. Eine echte Empfehlung, dass Sie sie erstellen. Aber ich habe keine für dieses Projekt erstellt, weil wir im Grunde nur eine Seite haben, und es ist wirklich nicht notwendig, wenn Sie Landingpages erstellen, zum Beispiel für Ihre Kunden, die diese im Grunde ist. Aber es ist wirklich notwendig, wenn Sie ein paar verschiedene Seiten erstellen. Also lassen Sie uns ein wenig näher heranzoomen und Sie können sehen, dass wir fünf Elemente hier haben, sowie eine Demo bekommen. Vielleicht gibt es einen Kontakt uns vielleicht Santa Schulden. In diesen Fällen empfehle ich wirklich, dass Sie einen Styleguide hinzufügen. Schön, Big one, und Sie können einfach hier springen, und Sie können wählen, Sagen wir, 1920. Patane, 80 ist gegangen, um es genau hier zu positionieren. Benennen Sie einfach den Styleguide um, und Sie können ihn dann nach Belieben erweitern und einfach Ihre Elemente kopieren und einfügen. Sie müssen dies nicht für jede Größe Ihres Designs tun. Sie müssen es nur für eine Größe tun, und das hat wirklich empfohlen, dass Sie es für entscheiden, weil es besser sichtbar ist als all diese anderen, weil es in erster Linie größer ist , also das ist es im Grunde. Sie müssen einfach weitergehen und exportieren alle diese verschiedenen Größen für Entwickler, da sie wieder einige Unterschiede in Ihrem Design kennen müssen. Wie Sie sehen können, hier haben wir hieretwas Abstand zwischen unserer Illustration und unserem Text. Wir haben diesen Platz hier nicht. Wenn wir uns bewegen wollen. Dies ist an der Unterseite, so dass sie alle diese unterschiedlichen Ränder und Watte kennen müssen und so weiter. So haben Sie alle Abschlepp-Export von diesen verschiedenen Größen. Sie haben auch eine Share-Option, die genau hier ist. Wenn Sie also mit ihnen teilen, einfach sicher, dass Sie für die Entwicklung teilen. Auf diese Weise werden sie den Typ im digitalen Stil bekommen, den X T erzeugen wird. Und sie können einfach so erwartet und Cassie, die verschiedenen schlechten Dinge und Ränder zwischen all diesen verschiedenen Elementen ausdrücken. Das ist also eine fantastische Option. Inside off zu haben. Es wird im nächsten Video X'd sein. Wir werden darüber reden, die Dateien an Entwickler und Kunden zu senden, also werde ich es sehen. 18. Die Dateien senden: Schließlich ist dies die letzte Etappe unseres Projekts. Wir müssen diese Dateien an unsere Entwickler und unsere Kunden senden. Und dazu haben Sie bereits in früheren Videos gezeigt. Das ist unsere Dateistruktur. Also hier haben wir unsere Ordner und alle unsere Dateien sind drinnen, weil ich vorangegangen und alles exportiert habe. Also störe ich Sie nicht, jede einzelne Schicht aus all unseren Ports auszuwählen. Also im Grunde, was Sie tun müssen, habe ich bereits erklärt, dass im vorherigen Video Sie alle von ihnen auswählen müssen, exportieren Sie sie alle in ihre dedizierten Ordner, so dass Entwickler leicht navigieren können. Auch eine letzte Sache, die Sie entwickeln können liefern an Ihre Entwickler ist Styleguides. Und ich habe nicht Styleguides in den Partituren abgedeckt, weil, wie gesagt, ich habe bereits einen Web-Design-Kurs, wo vor wirklich ausführlich über all diese Details über Drahtrahmen-Stil Kerl, seine Flussdiagramme und so weiter. Also, wenn Sie interessiert sind, können Sie den Kurs überprüfen. Aber für den Diskurs möchte ich einfach keine Styleguides erstellen, weil wir momentan nur eine Seite haben. Wenn wir mehrere Seiten aus Kurs Style Guide ist notwendig, um Ihren Kunden und Entwicklern zu liefern , so dass sie schnell öffnen können, dass nach oben. Drinnen. Off diese Eier verunstalten und einfach kopieren und einfügen Elemente in ihr Zitat oder verwenden Sie sie und kopieren Sie sie, wo immer sie wollen. Auch für die Styleguides müssen Sie diese separaten Komponenten erstellen. So wie Sie sehen können, haben wir nur Demo-Button hier als Komponente für die Buttons. Aber für die Sal-Schnitte müssen Sie alle diese verschiedenen Komponenten für verschiedene Barton-Größen erstellen, damit sie sie später verwenden können. Oder wenn Sie mit dem Kunden einverstanden sind, noch mehr Seiten für dieses Projekt zu erstellen, dann können Sie diese Komponenten einfach verwenden und einfach kopieren und in Ihre Arbeit einfügen. Also das ist es im Grunde für den entworfenen Teil für den responsiven Teil. Und jetzt ist dieser letzte Teil, alles an Entwickler zu liefern. So hier ist unsere original Adobe Eier verunstalten. Also, das ist im Grunde diese Akte. Sie speichern es einfach auf Ihrem Computer, so dass Sie Cendant für Ihre Kunden und Entwickler sehen können . Und endlich haben wir es. Diese Datei, die als Projektressource bezeichnet wird, war nur eine einfache Textdatei, und das habe ich gesagt. Fügen Sie diese Dateien immer ein, damit Sie die Zeit minimieren können, die Sie verbringen, um mit den Entwicklern zu sprechen und Ihre Kunden zu erhalten, nachdem das Projekt abgeschlossen ist. Also, im Grunde beantwortest du alle Fragen für sie, bevor sie sie dir überhaupt stellen. Also hier haben wir einfach Links zu den Google-Schriften und erklären einfach, dass diese luftfreien Telefone und wenn der Klick auf diese Links, können sie auf die Fonds zugreifen, die kostenlos sind, und sie können sie sowohl für den persönlichen als auch kommerziellen Gebrauch verwenden, wenn Sie wollen diese Telefone verwenden , die Sie in Ihren Designs verwendet haben, weil Kunden manchmal ihre Meinung mit sehr weniger Sekunden ändern und sie wollen eine andere Front verwenden. Es Das ist auch in Ordnung, auch in Ordnung, denn dann können sie mit Entwicklern sprechen und Entwickler können alles in der Kälte wirklich leicht ändern . Sie können es innerhalb des CSS anpassen, und sie können einen völlig anderen Fonds enthalten, so dass es die aus der Website ändern wird. Außerdem haben wir Bilder und Sie können ihnen, wie gesagt, wie gesagt,separate Bilder senden. Aber weil wir alle Bilder in allen von diesen verschiedenen Dateigrößen exportiert haben, so dass Sie diese Bilder für Blöcke sehen können , zum Beispiel, und Sie können sie senden, dass. Aber wenn Sie möchten, können Sie ihnen einfach einen Link auf die Website senden. Sehr bekam Bilder von. Aber in den meisten Fällen werden Kunden sowieso ihre eigenen Bilder verwenden, also sind dies nur Platzhalter Bilder, aber Sie müssen ihnen immer noch diese Bilder senden, nur für den Fall, dass sie ein paar dieser Bilder in ihr endgültiges Produkt. , Deshalb senden wir diesen Link,damit sie leicht darauf zugreifen können. Sie können auch Links zu einzelnen Bildern kopieren und einfügen, wenn Sie möchten, und die wirklich empfehlen, dass Sie dies für kleinere Projekte tun. Aber für größere Projekte können Sie Sammlungen erstellen, zum Beispiel auf Splish direkt, und Sie können den Link einfach kopieren und in diese bestimmte Sammlung einfügen. Und sie haben Bilder aus der gesamten Sammlung zur Verfügung, so dass sie sie in der größtmöglichen Größe verwenden können , wo und wie sie wollen. Schließlich haben wir Icons, und in diesem speziellen Projekt verwenden wir materielle Icons, die wiederum Google's auf Icons sind , die sowohl in persönlichen als auch kommerziellen Projekten frei zu verwenden sind. , Wenn Sie kostenpflichtige Symbole verwenden, ist es wirklich wichtig, dass Sie dies dem Kunden hervorheben. Wenn der Kunde für diese Symbole bezahlen möchte, oder wenn Sie Premium-Mittel von Premium-Bildern verwenden, müssen Sie all das im fortgeschrittenen angeben. So kann der Kunde wissen, ob er für so etwas bezahlen will, denn manchmal deckt ihr Budget das nicht ab. Also, sobald Sie all das liefern und Sie müssen dies nicht so liefern, dass Sie in pdf konvertiert werden können . Wenn das etwas ist, das Sie wollen, können Sie schließlich alle von ihnen und unter Windows auswählen. Also gehen Sie einfach mit der rechten Maustaste und gehen Sie einfach zu meinem WinZip und fügen Sie zu Studio-Design-Agentur Zip hinzu. Und ich möchte eine ZIP-Datei für dieses spezielle Projekt erstellen, weil es viel einfacher ist, ZIP-Dateien zu senden, besonders per E-Mail. Sie können sie über slack waren verschiedene Chats senden. Daher ist es wirklich wichtig, dass Sie alle diese Dateien in die geringstmögliche Größe komprimieren können. Wenn ich also dieses Fenster einbringe, weil ich zwei Monitore auf meinem Computer habe, können Sie sehen, dass es nicht so viel Platz gesagt hat, weil dieses Projekt wirklich nicht viel braucht , besonders wenn man bedenkt, dass all diese Designänderungen, die wir haben alle diese verschiedenen Assets nehmen nur etwas wie 2,5 Megabyte, so können Sie sehen, dass alles dauert etwa vier Megabyte. Und deshalb liebe ich Adobe X'd wirklich und all diese anderen Software mögen es. So, zum Beispiel, Feige, MMA und Skizze, aber Skizze nicht so sehr, weil es wirklich nicht komprimiert all das gut, wie Figment und nächste D tun. Zum Beispiel, weil diese kleineren Dateigrößen, so dass Sie die weniger als vier Megabyte in der Größe sehen können, können Sie wirklich einfach das gesamte Projekt an unsere Kunden und Entwickler senden. Sie werden es einfach herunterladen und entpacken es auf ihren Computern und verwenden es so, wie es ist. Daher empfehle ich Ihnen, alle Ihre Projektdateien in einen Zip-Ordner zu packen , weil es für Sie viel einfacher sein wird, das mit Ihren Entwicklern und Kunden zu teilen . Und es wird viel einfacher sein, diesen Dateityp für Sie zu speichern, da Sie ihn möglicherweise für zukünftige Referenzen auf Ihrem Computer behalten möchten . Denn zum Beispiel, lassen Sie uns sagen, dass dieses Projekt morgen gestartet wurde und der Kunde in sechs Monaten neue zusätzliche Seiten wünscht . Du behältst einfach all diese Originaldateien. Also lassen Sie uns sagen, dieses Studio Design-Agentur Projekt auf Ihrem Computer, so dass Sie leicht zurück zu ihm springen und öffnen Sie die Originaldatei und einfach weiter sehr verlassen die vorherige Zeit. ist es wirklich wichtig, dass Sie so viel Platz wie möglich sparen, weil Sie mit den Clients und Entwicklern teilen , und vor allem, wenn Sie diese Dateien langfristig auf Ihrem Computer behalten möchten. Und ich habe wirklich empfohlen, weil ich bis heute noch Kunden zu mir zurückkehre, aber dass ich sie zum Beispielvor fünf Jahren oder sechs Jahren hatte zum Beispiel und wollte, dass ich einige zusätzliche Änderungen an der originelles Design, oder vielleicht ein komplettes Drei-Design. Daher ist es wirklich wichtig, die Originaldateien auf Ihrem Computer zu behalten, vor allem für diese Eier. Defiles, weil, wie Sie sehen können, sie wirklich klein sind und Sie Tausende von verschiedenen Projekten und verschiedenen Dateien auf Ihrem Computer aufbewahren können , und es wird nicht wirklich viel Platz in Anspruch nehmen 19. Vielen Dank: vielen Dank, dass Sie den Kurs beobachtet haben. Ich hoffe wirklich, dass Sie Wert darin gefunden haben. Denken Sie daran, wenn Sie für reaktionsschnelle entwerfen beginnen, stellen Sie sicher, dass die Spitze. Fragen Sie Entwickler immer, was sie verwenden, bevor Sie überhaupt mit dem Entwerfen beginnen. So können Sie im Voraus wissen, welche Techniken Sie verwenden werden, sobald Sie den reaktionsfähigen Teil von Ihrem Design erhalten . einmal ist es wirklich egal, ob Sie Ihre benutzerdefinierten Lösungen erstellen müssen oder ob sie die Lösungen für Sie erstellen oder ob Sie Lösungen wie Bootstrap oder Angler verwenden, die jemand anderes bereits erstellt hat. auch sicher, Stellen Sieauch sicher,dass, wenn Sie Ihre Entwürfe am Ende des Projekts exportieren, um alle Größen für Entwickler zu exportieren, um auf sie auf einmal zugreifen zu können, stellen Sie sicher, dass sie in Ordner als Show Sie im Kurs zu trennen und dass Sie gehen , um dieses zusätzliche Feedback von Entwicklern und Kunden zu eliminieren. Du wirst die Arbeit schneller beenden. Sie werden die Dateien so liefern, wie sie geliefert werden sollten. Und es wird einfach keine Reibung zwischen Ihren Entwicklern und Kunden geben. Nochmals vielen Dank, dass Sie sich den Kurs angesehen haben. Machen Sie jetzt voran und erstellen Sie diese tollen Designs und machen Sie sie reaktionsschnell. Vielen Dank 20. YouTube-Kanal für mehr Inhalte: Hey, Designer Alex hier. Und ich wollte mich nur kurz bedanken. Vielen Dank, dass Sie den Diskurs genommen haben, und ich hoffe wirklich, dass Sie so viel Wert wie möglich daraus haben, wenn Sie mehr Inhalte überprüfen möchten . Ich habe vor kurzem meinen YouTube-Kanal gestartet, wo einige Themen erkundet, die Designer von Freiberuflern die passiven Einkommenstechniken aus Web-Design interessieren könnten , APP-Design. Sie entwerfen UX Design. Also, wenn Sie an einem dieser Themen interessiert sind, gehen Sie zu meinem YouTube-Kanal, verknüpfen Sie es unten in der pdf, und Sie können einfach dort klicken und es wird Sie zu meinem YouTube-Kanal führen. Wenn Ihnen diese Inhalte gefällt, stellen Sie sicher, dass Sie sich abonnieren und folgen, denn ich werde versuchen, wirklich regelmäßig mit diesem YouTube-Kanal zu sein und so viele Inhalte wie möglich hochzuladen . Also danke nochmals für meinen Kurs, und ich hoffe wirklich, Sie auf meinem Kanal Digger zu sehen 21. Meine kostenlose Facebook-Gruppe: Hey, Designer, ich hoffe wirklich, dass dir der Kurs gefallen hat, und du hast so viel Wert wie möglich daraus gemacht. Wenn Sie noch mehr Wert von mir und von der Design-Community erhalten wollen, habe ich eine Facebook-Gruppe gegründet. Wo Sie beitreten können, ist nur eine Facebook-Gruppe für meine Schüler allein, so dass Sie teilnehmen können, indem Sie auf den Link unten Reihenfolge klicken. Nate off course ist ein Facebook-Konto, und es ist eine kostenlose Gruppe beitreten. Die Gruppe wird gebildet, um Ihnen zusätzliches Feedback zu geben, damit Sie Ihre Entwürfe anhängen können , indem Sie diesen Kurs befolgen und Beispiele aus diesem Kurs oder anderen Kursen verwenden . Oder wenn Sie Ihre eigenen Beispiele haben. Off-Design-Arbeiten aus der Vergangenheit aus der Gegenwart. Sie können diese Werke in die Facebook-Gruppe hochladen und dann Feedback erhalten, entweder für mich oder von anderen Designmitgliedern. Ich ermutige Sie auch, wenn Sie eine Stelle zur Verfügung haben, um sie in dieser Gruppe zu teilen, damit jeder von dieser Gruppe profitieren kann. Wieder einmal ist die Gruppe frei. Es ist einfach, sich anzumelden. Klicken Sie einfach auf den Link in der pdf, und ich erwarte wirklich, so viele von Ihnen wie möglich in dieser Gruppe zu sehen, nur um unsere Erfahrungen als Designer zu teilen , und ich werde versuchen, ein zusätzliches Video, einige zusätzliche Tipps und Techniken in diese Facebook-Gruppe. Aber im Moment fangen wir gerade erst an. Wir werden nur seine bilden, und ich ermutige Sie wirklich, beitreten und Ihre beste Arbeit dort zu teilen. Um andere Designer oder Zehe zu inspirieren, bitten Sie um zusätzliches Feedback. Stellen Sie einfach sicher, dass Sie, wenn Sie um Feedback bitten, nach bestimmten Dingen gefragt. Frag nicht einfach. Was hältst du von diesem Design? Weil niemand darauf antworten wird. Oder wenn sie es tun, sind sie auf Lee-Ding. Sie werden dir sagen, ob es schön aussieht oder es nicht schön aussieht. Stellen Sie sicher, dass Sie nach spezifischem Feedback zu Ihren Entwürfen fragen. Zum Beispiel, wie diese Farbkombination. Denkst du, ich sollte eine andere Front benutzen? Glauben Sie, dass diese Bilder entsprechen gut mit der Hintergrundfarbe, zum Beispiel, Dinge wie, So stellen Sie sicher, für spezifische Feedback fragen, wenn Ihre Entwürfe, denn es wird viel einfacher für mich und für andere Designer in dieser Gruppe, um Ihnen zu geben, sind spezifische Rückmeldungen, die Sie viel schneller verbessern können, dann indem Sie nur fragen, was? Alles von diesem Design. Also danke nochmals für meinen Kurs, und ich hoffe wirklich, Sie in Sichtweite von meiner Facebook-Gruppe Digger zu sehen.