Mobiles App-Design von Grund auf mit Sketch 3 – Teil 2 (Grundlagen des UI-Designs)

1. Willkommen zu Teil 2: Willkommen zurück. Nur eine kurze Erinnerung. Das ist natürlich Teil zwei eines dreiteiligen Teils . Stellen Sie also sicher, dass Sie an einer teilgenommen haben, bevor Sie in die Party eintauchen. Ok. In diesem Teil wird eine erste Version aus entwerfen. Unsere APP wird sich auf Effizienz konzentrieren, um so schnell wie möglich einen Prototyp aus unserem Design zu haben. Das Ziel hier ist es, die Dinge so zu sehen, wie wir sie uns vorstellen. Während das Schreiben der Geschichten macht Sinn für Sie auf die Menschen, die Sie zeigen dies zuerst entworfen um Wenn Sie nicht bemerkt haben, dass die Schüler Kämpfe für den Kurs in Teil eins. Stellen Sie sicher, dass Sie es tun. Jetzt hier in der Klasse vorhersagen Abschnitt. Wie gesagt, du musst es nur einmal tun. Es gibt alles, was du für die drei Teile des Kurses hier brauchst, jetzt lebe ich hier mit meinem guten Freund. Ein erstaunlicher Designer-Bereich für die nächsten Lektionen macht Spaß 2. iOS Richtlinien für iOS: in diesem Video werden wir über IOS-Richtlinien sprechen. Jedes neue Betriebssystem bringt eine Reihe von verschiedenen Elementen, die Apple Sie wirklich ermutigen, in Ihr Design zu integrieren. Sie können alte offizielle Richtlinien an dieser Adresse Elemente finden ist, dass iPhone-Nutzer bereits daran gewöhnt sind , mit ihnen zu interagieren, da sie sie bereits in jeder Apple-App als Apple-Standard finden , Sie und Ihr Entwickler werden Derrick Lee finden Sie sie in X Code, der Software, die verwendet wird, um IOS APS zu entwickeln, ohne Elemente exportieren zu müssen. Es ist auch toll, weil Sie viele Skizzendateien finden, die von großen Designer mit all diesen Elementen erstellt wurden, um eine Vorschau geöffnet zu bekommen. Der Dateiname IOS acht. Sie mögen es in diesem Unterrichtsordner. Diese Datei wird von einem großen kanadischen Design-Unternehmen namens T Home fehlt, die seitdem von Facebook erworben wurde gemacht . Es bietet Ihnen perfekt Design-Elemente, die in Ihrem Design verwendet werden können. Diese Dateien sind so gute Möglichkeit, zu lernen, wie die Dinge gebaut werden, also nehmen Sie sich ein paar Sekunden Zeit, um mit diesen Elementen zu spielen. Um sich auf die gleichen Wörter zu beziehen, müssen Sie sich an diss lexikalische oben auf jedem Bildschirm gewöhnen, Sie haben die Statusleiste. der Statusleiste werden Echtzeitinformationen über Ihre Konnektivität, die Zeit oder die Höhe des Tibet Baumes angezeigt. Der Text kann leicht schwarz oder weiß sein, aber nicht in der gewünschten Farbe. Der Hintergrund könnte an dieser transparenten Stelle gesetzt werden, so dass er die Farbe Ihrer Navigationsleiste hat. Es ist immer 44 Pixel hoch und gestreckt, abhängig vom Verstand des Bildschirms. Für eine sehr immersive App, wie ein Spiel, könnten Sie wählen, um die Bühnen Draht zu verstecken. Aber hüte dich. Wenn Ihre APP eine Internetverbindung verwendet, erraten die Leute möglicherweise nicht, dass sie ihre Verbindung lieben. Wenn sie ihren Status nicht sehen, balken Sie mich nur bis zur Statusleiste. Es gibt eine Navigationsleiste oder eine Naff-Leiste. Die Nussleiste zeigt in der Regel eine Aktion im Zusammenhang mit den Jahren des Fließens an. Sehr oft sehen Sie eine Zurück-Taste auf der linken Seite und das nächste oder Wertdatum auf der rechten Seite. Die Naff Bar könnte mit dem 10 Gutschein gefärbt werden Menschen oft wählen, um die Farbe von ihrem Brent zu setzen . Der Staat ist Krieg und genug Takt zusammen sind 100 bis neue acht Pixel hoch. Wir empfehlen Ihnen, sich an diese Figur zu erinnern, die ich auch war. Verwenden Sie es ziemlich oft während des Kurses am unteren Rand des Bildschirms, können Sie die Tab-Leiste verwenden können Sie zwischen verschiedenen Abschnitten Ihrer App, die nicht miteinander verwandt sind, wie es ist wirklich nah an Ihrem Daumen. Die obere Leiste enthält in der Regel die Aktion Ihrer App. Wie geöffnet die Kamera Zugriff geöffnet Sie Ihren Home-Feed geöffnet oder Booker Uber Top Schnäppchen enthält bis zu fünf Tabs, und es ist 99 PC hoch. Es ist völlig anpassbar, wenn nötig. Es ist ein gemeinsames Teilemuster, das wirklich effizient ist, aber wie fast alles andere ist es nicht obligatorisch. In Iowa Sketchen finden Sie viele andere Elemente, für die ich Zapfen stehen. Eigentlich haben Sie wahrscheinlich Ihre APP wie neue Freigabeinformationen. Apple News Tender ist es, jede Ikone Umriss zu haben. Aber natürlich, und das werden wir später sehen. Sie können anpassen, dass es sich um eine Schalttaste handelt. Es ist wie eine echte süße für un Genug verwendet, zum Beispiel, ist das perfekte Werkzeug, um Benachrichtigungen in den angeblichen Listen zu wechseln. Listen sind Weg, um Inhalte hier zu organisieren, müssen Sie zum Beispiel der Liste. Dieses Element wird als Segment und Steuerung bezeichnet. Es kann zwei oder drei Abschnitte bei dieser Einstellung enthalten. Sie werden es verwenden, wenn Sie es einfacher brauchen, eine Auswahl zwischen zwei Optionen zu treffen, die zusammen ausgewählt werden können . Zum Beispiel, wenn Sie fragen, ähm , ob ihr Kind ein Junge oder ein Mädchen als Filter ist , werden Sie es oben auf dem Bildschirm verwenden, um auf demselben Bildschirm zwei oder drei Listen von verschiedene Artikel. Zum Beispiel wird es oben in der Liste der Benachrichtigungen verwendet. Diese Schnittstelle ist Golden Action Ship. Es ist eine Möglichkeit, eine andere Lösung für eine Aktion vorzuschlagen. Zum Beispiel in der Mail-App. Wenn Sie eine E-Mail beantworten möchten, müssen Sie wählen, ob Sie antworten, alle beantworten oder weiterleiten möchten. Die Suchleiste kann oben in der Liste oder direkt in der Navigationsleiste angezeigt werden. Abhängig von Ihrem Anwendungsfall müssen Sie die beste Option auswählen. Ah, US-Tastaturen sind Standards und haben immer den gleichen Hass in Iowa. Sie können eine bestimmte Farbe als aktive Farbe festlegen, die Farbe, die angezeigt wird, wenn die Unterseite standardmäßig umsetzbar ist. Es ist ein bestimmtes elektrisches Blau, aber Sie könnten rosa in der Musik-App oder gelb in der Notizen-App sehen. Zum Beispiel. Sie können Ihre Markenfarbe auswählen, wenn Sie tiefer in die IOS-Richtlinien eingehen möchten. Wir empfehlen Ihnen, einen Designer namens Manto on Medium zu täuschen. Hier ist der Link. Wenn Sie Ihre eigene App erstellen, wählen Sie zunächst die verschiedenen Elemente aus, die Sie benötigen, um sie zu entwerfen. Vielleicht musst du irgendwann etwas kreativ sein, aber du kannst wirklich einen Weg finden, fast alles zu tun, was du brauchst. Es waren die Standardelemente. Nun, da Sie das älteste neue lexikalische in der nächsten Lektion kennen, werden wir diese Elemente verwenden, um eine erste Version von Instagram nach Onley IRS-Richtlinien zu entwerfen . 3. Walkthrough Skizze 3: so willkommen zu diesem Teil des Kurses. Wir werden damit beginnen, die eigentliche Schnittstelle zu entwerfen. Lassen Sie uns also ein neues Dokument öffnen, skizzieren und erstellen. Keine Panik, wenn ich nicht ins Detail komme, anstatt Ihnen zu zeigen, wie alles im Moment funktioniert , ich zeige Ihnen die Werkzeuge, die Sie brauchen und wie Sie sie verwenden, wie wir entworfen haben. Doch das ist nur ein allgemeiner Überblick. Die Skizze ist in vier Teile in der Mitte unterteilt. Sie haben eine unbegrenzte Zeichnungsfläche auf der Oberseite. Sie haben eine Symbolleiste war eine Hauptfunktion. Sie müssen Formen zeichnen und erstellen. So zum Beispiel können wir zum Beispielein Rechteck zeichnen. Klicken Sie auf Einfügen Form den Rechteck, klicken und ziehen Sie, um ein Rechteck in der gewünschten Größe zu zeichnen. Jetzt ist es auch die Schaffung neuartiger Einfügeform oval. Wir könnten auch Präsident oder O auf Ihrer Tastatur. Als Abkürzung. Sie können Drohnen Roman oder perfekte Kreis erleichtern, indem Sie Shift halten, während Sie ziehen. diesen beiden Symbolen können Sie Objekte gruppieren und UN-Gruppen gruppieren, die Sie vergrößern und verkleinern . Ältere Symbole sollen transformiert werden. Ein Editor-Shape wird sie später im Kurs verwenden. Dysfunktion genannt Muro ist eine der besten Sache Skizze. Es ermöglicht Ihnen, ein Design in Echtzeit auf Ihrem Gerät anzuzeigen, aber wir haben ein engagiertes Hören dafür. Auf der rechten Seite finden Sie ältere Sittings, um Ihre Form zu bearbeiten. Hier sind die Koordinaten von Ihrem Objekt dort wirklich nützlich, wenn Sie Pixel perfektes Design machen möchten . Dies ist eine Dimension von Ihrem Objekt. Das Schließfach in der Mitte ermöglicht es Ihnen, den Anteil Ihrer Form zu behalten, während Sie die Größe ändern . Wir können die Deckkraft einstellen und, natürlich, die Farben können Sie separat die Farbe aus dem Rahmen und die Feldfarbe. Wie Sie erraten können. Es gibt auch einen Abschnitt gewidmet Farben in diesem Kurs alte erstaunliche verfolgen Bitte skizzieren. Drei. Unten sind die Schatten. Damals ist es ein bisschen altmodisch, aber es gibt noch etwas Gutes zu tun. Haben wir Shadows gezeichnet? Sie haben vielleicht bemerkt, dass jede Form, die wir mit Energie getrieben haben, einen Lügner auf der linken Seite erzeugt . In der Skizze ist jede Form eine Ebene. Sie können sie in der Ebenenliste verschieben, um sie in den Hintergrund oder in den Vordergrund . Wenn ich zum Beispieldas Rechteck oben in der Ebenenliste lege,befindet es sich oben im Kreis in der Leinwand, um eine Ebene auszublenden. zum Beispiel Wenn ich zum Beispieldas Rechteck oben in der Ebenenliste lege, Klicken Sie auf das Symbol, das neben seinem Namen erscheint, und wenn Sie eine Ebene einfrieren möchten, klicken Sie mit der rechten Maustaste auf den latenten Namen und wählen Sie Glück aus. Ich weiß, es ist eine Menge Informationen für den ersten Spaziergang durch, aber Sie werden sehen, dass die am Ende des Kurses, werden Sie wissen, wofür jedes Symbol stehen. Sofort. Nehmen Sie sich ein paar Minuten Zeit, um mit den verschiedenen Funktionen zu spielen, und wenn Sie denken, dass Sie bereit sind, gehen Sie zum nächsten Video, wo wir beginnen, die erste Version der APP zu entwerfen. 4. LEGO spielen: , um zu sehen einfach, ineffizient. In dieser Lektion werden wir Abneigung von Instagram mit Onley-Standardelementen entwerfen. Standarddesign ist der erste Schritt vor dem Hybrid-Design und kundenspezifischem Design. Standard entwickelt folgt IRAS-Richtlinien mit Onley, iose Elemente, Ikonographie und Benutzeroberfläche. Dies ist, was Apple in älteren APs verwenden, aber das ist auch, was andere Unternehmen mögen. Was ist los? Zum Beispiel Hybrid-Designkombinationen? Sind Sie Westler mit benutzerdefinierten Elementen wie Flows? Anrufende Symbole? Viele erfolgreiche up wie Twitter, Facebook, Pinterest oder Instagram verwenden Hybrid-Design. Schließlich gibt es auch ein Beispiel für kundenspezifisches Design mit Nachrichtengesten, innovative UX und völlig personalisiert. Sie I Snapchat Zunder oder Facebook-Papier sind ein gutes Beispiel für kundenspezifisches Design. Wir empfehlen Ihnen, mit dem Entwurf zu beginnen wurde es gedreht, weil es der beste Weg, um effizient zu sein . Wenn es einfach zu entwerfen ist, es einfach zu entwickeln und Sie werden schnell in der Lage sein, Ihr Produkt mit echten Anwendern zu testen . Wenn die Leute anfangen, Ihr, was Sie bauen, mit Standards zu lieben, werden Sie die ganze Zeit haben. Sie müssen Ihr Design mit ihrem Feedback verbessern. Also für jetzt, wir werden nur Lego spielen und alles, was Sie wissen müssen, ist, wie Sie kopieren und einfügen öffnen Sie die Datei Lane Instagram I West Under Kit in diesem Unterrichtsordner Hier sind alle Elemente, die verwendet wurden , um unsere App zu bauen Jetzt großartig. Ein neues Dokument war gemeinsames Ende oder wenn ich wusste, nennen Sie es Instagram A U. S Standards. Wir beginnen mit der Gestaltung des ersten Bildschirms Für das wird eine seltsame Platine mit genau Ich erwähnte oft iPhone sechs Bildschirm Klick einfügen off Board auf der rechten Seite zu erstellen , können Sie feststellen, dass Skizze automatisch schlägt unsere Board-Größen. Sie könnten X-Bildschirm von iPhone, sechs iPad, Desktop-Computer und alle Arten von Symbolen sitzen sechs iPad, . Für diese Lektion wählen wir iPhone sechs Portrait namens Art Board Home-Bildschirm aus, indem Sie auf den Namen in der Ebenenliste klicken. Sie können auch eine Verknüpfung verwenden. Kommentar sind, um einen Layer umzubenennen. Jetzt lasst uns Lego spielen und setzen Elemente sind ihre genaue Position. Wir beginnen mit der Navigationsleiste, gehen Sie zu der anderen Datei und kopieren Sie die gesamte Navigationsleistengruppen-Switch-Datei und basierte sie. Legen Sie es auf die Oberseite Ihres Außenbords. Sehen Sie, wie Skizze Ihnen hilft, an Ort und Stelle. Netter Tee, sagt uns die rote Linie Dissenter. Der Block ist gut zentriert, und die auf den Seiten zeigen an, dass beide Seiten des Blocks das Alter des Außenbords berühren . Wenn sich das Element, das Sie auswählen möchten, in einer Gruppe befindet, müssen Sie es möglicherweise mehrmals schnell erreichen, um es zu erreichen. Klicken Sie auf den Zurück-Button in der Messerleiste, bis Sie nur den Zurück-Button auswählen. Sie können den Kommentar auch halten, während Sie über die Gruppe in der Arbeitsfläche, um die gewünschten Elemente direkt auszuwählen . Es gibt auch eine Möglichkeit, dies zu tun, besteht darin, das Element innerhalb der Gruppe direkt in der Layer-Liste auszuwählen . Löschen Sie die Back-Level und den Pfeil, wie wir es nicht für den Bildschirm benötigen, benennen Sie den Titel des naff Bar Instagram um und lassen Sie uns die richtige Ebene direkt nennen. Gehen Sie nun zurück zu der anderen Datei mit der älteren Ressource ist diese fünf Erzählungen entsprechen fünf verschiedenen Flows. Deshalb wähle Instagram die Registerkarte zu verwenden. Sind war fünf Wasserhähne als ihr Navigationssystem. Jede Geschichte wird eine eigene Registerkarte haben könnte die gesamte Registerkarte sein. Unsere Gruppe spielt die obere Leiste am unteren Bildschirmrand. Dieses Mal werden wir die Pfeile verwenden, um die Position des Elements anzupassen. Wenn Sie eine schmale auf Ihrer Tastatur drücken, wird Ihr Objekt ein Pixel in der Dauer der arabischen Brüste bewegen. Wenn Sie dabei die Umschalttaste gedrückt halten, wird es 10 Pixel um Dell Pixel verschoben. Wählen Sie die erste Story aus. Dies wird der erste Schritt sein, den ich aufnehmen möchte, schöne Bilder teilen, kopieren Sie es und fügen Sie es in Ihre Datei ein. Es wird unsere Erinnerung sein. Die Fähigkeit, schöne Bilder zu machen, ist unser Hauptmerkmal, so dass es in der Mitte der rechten Kamera im Symbol in der Mitte der Tep Bar platziert werden würde. Mach dasselbe mit der zweiten Erzählung. Ich möchte meine Freunde Bilder sehen. Dies wird unsere eigenen Füße direkt zu Hause unter dem ersten Tab auf der linken Seite sein. Ich möchte die Bildstunden anderer Leute sehen, dritte Erzählung, und es wird unser Tab „Erkunden“ sein, richtig. Erkunden Sie auf der zweiten Registerkarte, die Sie jetzt zu weniger Erzählungen bringen können. Ich will etwas über Menschen wissen. Aktivität auf der APP ist unsere erzwungene übliche Geschichte und wird unsere vier Schritt Schließlich sein, wie wir wollen auch Zugriff auf das, was die Leute sehen von mir rechten Profil unter der letzten Haltestelle auf die Rechte haben . Das war's. Wir haben die ganze Navigation. Jetzt bringen wir den Inhalt mit. Es gibt eine sehr einfache Regel, die Sie beachten sollten, wenn Sie Ihre Bildschirme erstellen. Der Inhalt ist König. Was soll ich damit meine? Fast überall weiß ein Mumbai AB nicht. Ein weiteres Werkzeug für den Umgang mit Inhalten hinter dem Begriff Inhalt. Es gibt eine Vielzahl von Singen und Formaten. Es können Nachrichtennachrichten und Formationen in Form von Texten, Fotos, Grafiken, Darstellungen oder sogar Karten sein. Die am häufigsten wiederkehrende Aktion ist das Erstellen, Beraten, Teilen und Verwalten von Inhalten. Es kann interessant sein, sich nach jeder Ihrer Bildschirmuhr zu fragen, die versucht, mit Ihren Inhalten zu tun . In unserem Fall Inhalte Bilder, je nachdem, was der Benutzer tun soll. Wir wollen von Bildern in der gleichen Weise angezeigt werden, werden sie groß sein, wenn der Benutzer sie Rat und kleiner, wenn er sie teilt. Wenn wir den Home-Feed erstellen, lassen Sie uns den Inhalt so groß wie möglich machen. Zeichnet eine quadratische Kante zu Kante. Denk daran, Mist zu halten. Warum ziehen, um es quadratische Plätze auf Null in X in 148 N zu halten. Y. Jetzt, als sekundärer Inhalt, spielt ein Profilbild des Benutzers, der das Bild gepostet. Wechseln Sie zu Form einfügen. Böse spielt die Maus in der oberen linken Ecke des Platzes. Du ruderst jetzt gerade. Klicken und ziehen Sie, bis Sie den unteren Rand der Navigationsleiste erreicht haben. Denken Sie daran, die Verschiebung zu halten, um die Proportionen Jetzt sollten Sie einen Roman haben, dass er sich direkt zwischen der Navigationsleiste, dem Foto und dem Rand des Bildschirms befindet. Wir werden den gleichen Rand um die Ovale und diese drei Elemente spielen. Um dies zu tun, werden wir die Größe des Ovals in der Mitte ändern. Wählen Sie das Oval, klicken Sie auf einen Griff in einer Ecke drücken Sie die Umschalttaste und aus, bis Sie sehen, dass der Rand 15 Pixel ist , um zu überprüfen. Wenn wir unsere Arbeit gut gemacht haben, können Sie das Oval auswählen und drücken, wenn Sie über oder die anderen Elemente mit der Maus. Es zeigt Ihnen den Abstand zwischen den beiden Objekten. Hier haben wir 15 auf der linken Seite, 15 auf der Oberseite und 15 unter unten. Es scheint, dass in dieser Lektion nicht so schlecht waren. Wir so, wie man Lego mit Elementen spielt. Wie man sie spielt und Adressränder zwischen ihnen spielt. In der nächsten Lektion wird etwas Text in diese und denken Sie daran, Inhalt ist König. 5. Textgrundlagen: in dieser Lektion werden wir Text in unser Mock Up einfügen. Es könnte eine der einfachsten Lektion sein. Wie Sie bereits wissen, konzentriert sich der erste Teil des Kurses darauf, effizient zu sein, also nehmen wir uns die Zeit. Tritt über Typografie und Karen später in diesem Kurs. Aber denken Sie daran, ein paar Dinge. Verwenden Sie nicht mehr als zwei oder drei Telefone in Ihrem Design, wenn Sie nicht wissen, was Sie finanzieren sollen. Zur Auswahl Big Helvetica und 11 Pixel ist die minimale Höhe, die Sie online von Geräten verwenden können. Nun gehen wir zurück zu unserem Design, wie wir es verlassen, wir haben bereits einen Platzhalter für Bilder platziert so gut jetzt spielt die Textblöcke gehen in Text einfügen . Nächstes Mal drücken wir einfach die kurze get tea zog einen Textblock unter der naff bar. Es muss nicht extrem präzise sein. In diesem Text zeigt Block jedoch den Namen des Benutzers an, der das Bild gepostet hat. Nehmen wir an, für diese Übung, dass unser Benutzer Michael Jordan auf der rechten Seite heißt, können Sie die Vorderseite von Ihrem Text setzen. Habt ihr nicht immer klar und leicht zu lesen? Es ist nicht sehr originell, aber es wird perfekt für uns die Größe in Helvetica 16 einstellen. Aber in diesem Fall möchten wir auch, dass der Name unseres Benutzers anklickbar ist, um sein Profil zu entdecken. Es ist eine gängige Regel im mobilen Design, mittlere oder fett Telefone zu verwenden, wenn Sie möchten, dass die Texte anklickbar sind. Daher wählen wir Medium in der besten. Du hättest es unterstrichen, aber es sieht heute ein bisschen altmodisch aus. Lassen Sie uns das Gleiche unter dem Bild machen. Presti, um einen Textblock ziehen Sie ein unterhalb des Bildes in der 1. 1 wird die Anzahl der Flüge setzen . Also lassen Sie uns sagen, dass wir 1234 Likes erhalten haben. Und lassen Sie uns einen weiteren Textblock für die Kommentare zeichnen. Nehmen wir an, Dunk Hashtag n b A. Der Kommentar enthält Wörter, die nicht anklickbar sind, also verlassen wir die Front als normal. Okay, jetzt lasst uns herausfinden, welches Telefon Instagram für sein Logo verwendet. Wir könnten Google fragen, welches Telefon Instagram für dieses Logo verwenden soll und unseren Einsatz haben, aber Sie werden nicht immer die Antworten haben, also lasst uns sehen, wie man das Telefon verarbeitet. Warteschlangen im neuen Logo sind maßgeschneidert, so dass wir die vorherige Lego Go on Google verwenden, um das Instagram-Logo in einem Bild zu finden, speichern Sie es auf Ihrem Desktop, wenn nötig. Beschneiden Sie das Bild, um nur den Text beizubehalten. Jetzt geh zu was anders und lade deinen Sieger hoch. Was anders wird Sie bitten, den Buchstaben zu tippen, den es Brust nicht erkannt hat Weiter und hier gehen wir . Instagram Verwenden Sie ein Telefon namens Billabong. Suchen Sie jetzt nach Billabong, Front auf Google. Halleluja! Es ist kostenlos. Sie könnten es herunterladen, aber es ist bereits ein neuer Ordner dafür. Hören Sie, gehen Sie zum Ordner und doppelklicken Sie auf die Billabong-Datei. Ihr Mac öffnet Nickerchen benanntes Telefonbuch, Klicken Sie auf Installieren Sie die Gefilmt, und hier geht's. Wenn Sie benutzerdefinierte Telefone verwenden, müssen Sie sie dem Entwickler geben, und wir empfehlen Ihnen, Freon-Webtelefone im Ordner zu verwenden. Wir haben auch ein paar coole kostenlose Telefone fallen lassen, die Sie jetzt verwenden könnten, da wir das gläubige Telefon hinzugefügt haben . Wir können den Titel der naff Bar mit dem Logo von Instagram ändern, doppelklicken Sie auf genug Balkengruppe, bis Sie den Titel bearbeiten können, dann tendiert das Telefon von Helvetica Billabong sagte die Größe 35. Natürlich ist es nicht das genaue Logo von Instagram, aber es wird definitiv für unseren Prototyp funktionieren. Das ist es entfernt. Cup ist immer noch ein bisschen rau, aber es beginnt, wie eine echte App aussehen. Wir bringen ein bisschen Farbe in der nächsten Lektion. 6. Farbgrundlagen: in diesem Teil des Kurses wird über Farben in einer sehr praktischen Weise genommen, wird mehr Details über Farbtheorie geben, wie man Farben, Harmonie und vieles mehr im zweiten Teil des Kurses auf dieser Ebene wird nur eine verwenden Farbe ausgewählt Hintergrund nach der Navigationsleiste auf der rechten Seite, können Sie sehen, dass es Feld war weiß. Klicken Sie hier auf die Farbvorschau. Sie können sehen, dass wir auf der flachen Farb-Tab sind. Wir bleiben hier für den Moment. Groß die Farbe, die Sie wollen. Wenn Sie jemals davon träumen, instagrammen Orange zu sehen, ist dies Ihr Moment der Herrlichkeit. Wenn Sie Ihren Körper in Farbe setzen, sollten Sie Ihre Statusleiste auf Weiß umstellen. Diese Operation wird eine gute Zusammenfassung für das, was wir bisher gelernt haben. Wählen Sie die Statusleiste mit weißen Texten in den USA Sie mögen es co bezahlen und es in der Art Board. Legen Sie es in den richtigen Ordner Naff Bar. Maskieren Sie den schwarzen, indem Sie auf den II-Kontext klicken, um seinen Namen zu markieren. Wenn du willst. Senator perfekt verwendet die Stunde oder setzen Sie es auf 00 als unsere schwarzen Hintergrund hilft haben ihre Statusleiste wird es halten und sagte, es ist Farbe als total transparent. Wählen Sie den Hintergrund Ihres Satzes seine Bar und sagte die Deckkraft bei Null. Ehrfürchtig. Was ist nun, wenn Sie möchten, dass Ihr Instagram eine vollständige Replik des Originals ist? Sketch enthält eine erstaunliche Farbauswahl, mit der Sie ein Zelt nehmen können, wo Sie möchten, auf Ihrem Bildschirm. Evan. Wenn es nicht in der APP ist, ist es eine Funktion, die Ihnen Zeit sparen kann, da Sie ein Bild nicht mehr ziehen müssen, um seine Farbe zu skizzieren . Öffnen Sie den Ordner dieser Lektion. Sie haben einen Screenshot der Instagram Real App. Öffnen Sie es war Vorschau. Dann gehen Sie zurück zur Skizze. Setzen Sie diesen Screenshot Seite zu Seite Einsätze aufholen durch Wieder Größe der beiden Fenster. Klicken Sie auf den Hintergrund der Navigationsleiste, klicken Sie dann auf die Farbe und wählen Sie dann die Farbauswahl aus. Klicken Sie nun in der Screenshot-Naff-Leiste, wo immer Sie wollen. Hier geht's. Du verwendest nicht das offizielle Instagram-Blau in deiner App. Wie Sie sich vorstellen können, werden wir diese Farbe viele Male verwenden, also speichern wir sie, indem Sie auf das Plus klicken, um sie in unserer Squatch-Bibliothek hinzuzufügen. Setzen Sie nun alle Techniker, die anwendbar sind, in dieses Blau, wie den Namen unseres Benutzers, die Zahl aus Likes und den Hashtag in unserem Equipment. Nehmen wir uns auch ein paar Sekunden Zeit, um zu überprüfen, was wir bisher getan haben. Sagen wir, diese lustige Größe bei 16 drehte sich einen Titel in Weiß und das direkte Label, auch. Das war's. Wir wussten, wie man im Grunde mit Farben umgeht. Wenn Sie ein persönliches Projekt haben, wählen Sie einen Anruf aus und speichern Sie ihn in Ihren Switches. In der nächsten Lektion lernen wir, wie man Objekte perfekt ausrichtet, indem man einen neuen Bildschirm erstellt. 7. Ausrichtung und Raster: in dieser Lektion erfahren Sie, wie Sie die Ausrichtungswerkzeuge verwenden. Sie sind wirklich hilfsbereit und wirklich einfach zu bedienen. Jetzt, da wir uns getrennt haben, wird der Startbildschirm auf den Expo-Bildschirm schauen. Wählen Sie den Startbildschirm außen aus. Sie können direkt auf den Arbol Namen im Cannabis klicken Selected Copiapo Board kam , sehen, und basierend es kam. V Benennen Sie es durch Drücken der gemeinsamen Namen es. Explore Bildschirm, klicken Sie auf die Messerleiste, um es umzubenennen Typ, erkunden und sagte das Telefon zurück in einem Leviticus 17 Medium. Der Bildschirm ermöglicht es uns, die vielen Fotos auf einmal zu bro. Also, anstatt ein Bild in der Mitte wird von Thumbnails vereinbart angezeigt, hat es alles, was wir nicht brauchen eine solche Stapel und Platzhalter. Jetzt werden wir vereinbart machen, die Männchen zog ein Quadrat und ändern Sie es auf 125 Pixel von 125 Pixel. Denken Sie daran, dass Sie, wenn Sie Proportionen beibehalten möchten, drücken Sie die Umschalttaste, da der Skizzenvorgabestil für Formen ein hellgrau im Hintergrund für den Rahmen ist . In dieser Lektion werden viele Quadrate ohne Rahmen gezeichnet. Lassen Sie uns also sehen, wie wir den Standardstil bearbeiten können. Wählen Sie diese Abfrage nur wahr und überprüfen Sie die Bücher Border Jetzt klicken Sie auf Bearbeiten und sagte Stil als Standard. Jetzt ältere Form Will dro wird keine Grenzen haben. Wir werden den Platz konkurrieren und ihn stützen. Sie können einfacher kopieren Einfügen mit kommen und sehen und kommen. Neid oder Dürre zog das Element Pressen heraus. Kopieren Sie drei Quadrate, wo immer Sie wollen. Im Außenbord spielt der linke Rand von einem Quadrat am linken Rand vom Kunstbrett und der rechte Rand von einem anderen Platz am rechten Rand von Thea Porter. Jetzt werden wir die Ausrichtungen nutzen und die Magie passieren lassen. Wählen Sie die drei Quadrate aus und richten Sie sie oben aus, indem Sie diese Taste drücken. Sehen Sie, alle Elemente sind jetzt ausgerichtet. Nun halten Sie die Straße Platz ausgewählt und klicken Sie auf die erste Schaltfläche im Auge Lineman Werkzeuge in anderen, um die Elemente horizontal zu verteilen. Er ist Knopf und Fähigkeit, genau den gleichen Raum zwischen verschiedenen Elementen zu setzen. Jetzt können wir die erste Zeile unten duplizieren und unser Raster erstellen. Großartig. Jetzt, da wir wissen, wie man das Ausrichtungswerkzeug benutzt, werden wir einen anderen Weg sehen, dasselbe zu tun, und wir werden damit beginnen, alles zu löschen, was wir gerade getan haben. Behalten Sie einfach das erste Quadrat in der linken Ecke. Wir werden das Gitterwerkzeug verwenden, klicken Sie auf Orange und machen Raster, sagte Rosenkranz. Vier war ein ein-Pixel-Rand und die Spalten mit drei mit einem Picks am Rand. Klicken Sie auf Megret. Wählen Sie alle Rechtecke aus, die Sie im linken Bereich erstellt haben, und richten Sie sie visuell mit dem Foto der anderen Kunsttafel aus. Lassen Sie uns die Arbeit richtig beenden, wählen Sie jetzt alle Terminal in der Ebenenliste und gruppieren Sie sie indem Sie auf diesen Psycho namens der Gruppe Grid Dragon. Legen Sie diese Gruppe unterhalb der Navigationsregisterkarte sind in der Verzögerungsliste. Wechseln Sie zurück zu Instagram. IOS stellte sich heraus, Kinderdatei Um die Suchleiste Coupet zu bringen und es in Ihr ungerade Board zu stützen. Platzieren Sie ihn von Kante an Kante unter der Navigationsleiste. Tun Sie das Gleiche für das Segment und die Steuerung. Ersetzen Sie die linke Labelle durch Fotos. Dies wird die Anzeige zufälliger Fotos erschöpfen. Ich kann Breaux und das Recht ersetzen, das ich von Leuten gebaut habe. Dadurch werden empfohlene Personen angezeigt, denen ich folgen kann. Das war's. Nun, jetzt wissen Sie, wie Sie Objekte ausrichten, objektieren und duplizieren, um bestimmte Regeln zu leben. Diese beiden sind so nützlich, dass wir sie im Kurs viel benutzen werden, also haben Sie keine Angst. Wenn Sie Probleme mit der Verwendung haben, gewöhnen Sie sich schnell an sie. Nun, da unser Mock Up fast wie ein Nickerchen aussieht, lassen Sie uns ein paar Bilder hineinbringen, um zu sehen, wie es aussehen wird, als würden wir dies im nächsten Video sehen . 8. Bilder einfügen: Hallo wieder in diesem Teil des Kurses, werden wir Ihnen zeigen, wie Sie Bilder in Skizze einfügen können, und sie werden Ihnen beide zeigen und Ihnen sagen, warum Sie das eine oder andere wählen sollten. Die erste ist die Verwendung einer Maske. Wir werden das für den Home-Bildschirm tun. Ein Foto mit dem Namen Picture Home Indus Listens-Ordner geöffnet. Ziehen Sie das Bild einfach direkt in Ihre Datei, ändern Sie es und platzieren Sie es auf dem Platzhalter auf Ihrem Bildschirm. Nun sagen, wie rühmen den Platzhalter, Beenden Sie das Bild und klicken Sie auf die Maske entsteint. Lassen Sie uns dies wieder tun war ein Profilbild unseres Benutzers Drag & Drop das Michael Jordan Profilbild in Ihrer Skizze fiel. Platzieren Sie es über dem Profilbild, Platzhalter und Maske. Hier geht's. Was bei dieser Methode großartig ist, ist die Fähigkeit, den Teil des Bildes zu schlagen, den Sie zeigen möchten . Der Nachteil ist, dass Sie zwei Ebenen für ein Bild haben und kompliziert einreichen. Also lassen Sie uns eine andere Möglichkeit sehen, ein Bild gut zum Expo Schrei hinzuzufügen, Wählen Sie das erste Quadrat klicken Sie auf die Registerkarte Farbe und gehen Sie zu der Kraft Zeit namens Muster Quicken. Wählen Sie Bild und wählen Sie Wählen Sie eine Kachel ist, wenn Sie ein Muster haben , aber in diesem Fall möchten wir Bild, um das Quadrat fühlen. Wählen Sie also Feld aus. Tun Sie es wieder für ältere Quadrate mit sprechen zu Big Three vor und so weiter. Und wenn Sie Ihre eigenen Bilder verwenden möchten, gehen Sie weiter. Wie Sie sehen können, ist diese Mitte wirklich fest einfach. Es funktioniert auch großartig mit coolen Plug Ins werden später darüber sprechen. Der Nachteil ist, dass es weniger präzise ist. Das war's. Wir haben so zwei Möglichkeiten, Bilder in Ihr Design einzufügen. Wir werden die Maskenoption verwenden, wenn wir wirklich präzise sein wollen, um unser Bild zu platzieren und Option fühlen . Wenn wir nur über Form wollen, um ein Bild im Hintergrund zu haben. Im nächsten Video fügen wir Aktionen in unsere App ein, indem wir Schaltflächen entwerfen. 9. Design für Design: hi wieder in dieser Lektion wird Schaltflächen für alle Benutzer entwerfen, um mit dem Inhalt zu interagieren. Gehen wir für eine Sekunde zu unseren Geschichten zurück. Wir arbeiten derzeit an den Benutzerfüßen als Kevin. Ich möchte meine Freunde Bilder sehen und ihnen Feedback geben, damit sie wissen, dass ich ihnen Validierung gebe . Bisher haben wir die Verwendung Drang erlaubt. Er ist Freunde Bilder. Jetzt wollen wir ihm erlauben zu beginnen und, wie zwei Bilder, die ich ruhe unter nicht wirklich enthalten Tasten Apple bevorzugen, wenn Sie Textebene oi Kegel verwenden . Ich brauche noch nicht unser angepasstes Icon. Wir verwenden einen indirekten Winkel auf Textebene, um eine Schaltfläche zu erstellen, um den Aufruf zur Aktion zu machen. Stärkere Call to Action oder C T. A. Ist die Fähigkeit eurer entworfen, Menschen zu ermutigen, hier Verbindung herzustellen. Um auf die Schaltfläche zu klicken, gehen wir zurück zu unserem Home-Bildschirm und lassen Sie uns ein wenig aufräumen. Wählen Sie ein Profilbild und einen Benutzernamen und gruppieren Sie sie mit dem Namen eines Ordners Benutzername den Hauptbildanhalt , wählen Sie die Nummer aus Likes und kommentieren Sie und gruppieren Sie sie gleich. Diese Inhaberbeschreibung zog seine Gruppe ein paar Pixel darunter. Wenn Sie darauf klicken, wird nur ein Element anstelle der gesamten Gruppe ausgewählt, und aktivieren Sie das Kontrollkästchen Klicks durch. Wenn Sie auf der rechten Seite auswählen, platzieren Sie die Navigationsregisterkarte über Beschreibungsgruppe in der Ebenenliste. Nun lasst uns großartig unsere umsetzbaren Elemente. Gut, Rechteck einfügen nächstes Mal werden wir Brot. Eine Verknüpfung ist Zeichnen Sie ein Rechteck von 30 Pixel hoch und 90 Pixel weiß. Platzieren Sie es auf 15 Pixel vom Bildschirmrand entfernt. Sie können dies leicht tun, indem Sie 15 in X eingeben und denken Sie daran, dass Sie überprüfen können, indem Sie Ihr Element mit dem Mauszeiger zeigen. Warum das Unterdrücken, um es noch mehr aussehen zu lassen, dass die Verbindung Will Button ein registriertes Rechteck geben wird . Corners sagte. Die Reg ist um vier Uhr. Vielleicht haben Sie an diesem Tag bemerkt, dass es Training ist, Knöpfe wie Peelings aussehen zu lassen. Spotify verwendet diese Menge, zum Beispiel, um das zu tun, nur sagte die gemeinsame registriert das Maximum und Ihr Rechteck wird attraktiv. Wenn Sie über 40 gehen müssen, können Sie den gewünschten Wert eingeben. Für jetzt geben wir mir, dass für Lassen Sie uns das erste Rechteck duplizieren, klicken und ziehen Sie gedrückt halten und spielt ein neues Rechteck neben der 1. 1 Schließlich klicken und ziehen Sie und platzieren Sie ein letztes Rechteck am rechten Rand des Bildschirms, um es zu platzieren Pixel vom rechten Randtyp minus 15 in die Exposition. Jetzt werden wir die Ebenen einfügen, die die Funktion jeder Schaltfläche eingefügt Textblock beschreibt und sagte die Front in Helvetica Unregular 16 sagte, die Farbe war ein dunkelgrau. Platzieren Sie den Textblock über die erste Schaltfläche und geben Sie wie nur Textblock wits es mit der Schaltfläche übereinstimmen und sagte der Text in den Textblock zentriert werden. Kopieren Sie den Textblock über die andere Schaltfläche und geben Sie ein. Kommentar. Unsere dritte Schaltfläche wird sein, um auf die Optionen zuzugreifen, wie zum Beispiel den Inhalt zu melden oder den Link des Bildes zu kopieren. Es ist nicht so wichtig wie die anderen, die es anders gestalten. Copia Textblock darüber und geben Sie mehr jetzt nicht markiert das Feld Farbe Böcke und überprüfen Sie den Ball. Die Mäuse. Dies wird den City-Effekt wieder von unserem Button locken. Siehe ta steht für einen Aufruf zum Handeln. Zum Beispiel, zwischen diesem, dieser und dieser Schaltfläche, der eine bessere Konvertierung auf der 1. 1 haben könnte Es gibt eine Menge Artikel darüber, wie man die Konvertierung wieder erhöht. Diggin es, wenn Sie zuerst wollen oder Informationen gruppieren jede Textebene mit dem Rechteck dahinter . Benannt den Ordner mit dem Namen der Aktion, so dass wir haben, wie Kommentar und mehr. die Schaltfläche „Mehr“ wird ein Action-Cheat mit verschiedenen Optionen angezeigt. Mit der Befehlsschaltfläche wird diese Königin nach links verschoben und die Tastatur angezeigt. Wie für den gleichartigen Knopf. Sobald Sie es berührt haben, wird es nur in Rot wählen Sie den Hintergrund der Like-Taste und schauen Sie ein schönes Rot drehen Sie die Vorderseite in Weiß auf dem gleichen Bildschirm. Wir haben jetzt die gleiche Taste in ST. Anderer Status. Aktiv, inaktiv und sekundär. Trennen wir die drei Elemente von den folgenden Informationen. Indem Sie eine Linie zeichnen, könnten Sie denken, dass die einfachste Gewicht zog eine Linie wird es sein, auf Einfügen online klicken, aber eigentlich ist es nicht. Das Löwenwerkzeug ist nicht wirklich toll in der Skizze. Es ist ziemlich schwer zu setzen und nicht sehr intuitiv. Deshalb verwenden wir ein Werkzeug, das wir gut kennen. Jetzt. Direkter Winkel zeichnen Rechteck setzen Sie es mit einem 345 und es ist acht auf eins. Pixel sagte, dass die Farbe ein hellgrau war, da es eine wirklich diskrete Information sein muss, sagte die Position bei 583 in Warum, und legen Sie es in der Mitte. Sie können zum Beispiel die großen Bilder verwenden und beide in der Mitte ausrichten. Das war's. Lassen Sie uns ein bisschen lexikalisch sehen, bevor Sie abschließen, wenn Sie im Limit wie eine Schaltfläche aus einigen Inhalten, wie ein Foto haben Inhalten, . Sie ist durch einen Rahmen begrenzt, der sichtbar sein kann oder nicht. Der Abstand zwischen dem Rand und dem, was sich im Inneren befindet , zum Beispiel zwischen dem Rand aus einem besseren und dem Text der Schaltfläche. Es nennt sich das Streicheln. Schließlich der Abstand zwischen dem Element und dem, was um es herum ist, zum Beispiel der Rand des Bildschirms. Es ist Gold, der Rand. In Ordnung. Wir haben bereits eine Menge Sachen im Lexus gelernt und werden in der Übung sein, die Sie all diese Dinge nutzen, die wir bisher durchgemacht haben. Bereit. Gehen Sie 10. Zeit für die Praxis – Camera: Das ist es. Nächte. Zeit, alleine zu arbeiten. Wir haben bereits einige Funktionen durchgemacht, wie das Zeichnen von Formen, wie das Zeichnen von Formen Platzieren von Texten, das Importieren von Bildern und das Einfügen von nativen Iose-Elementen. Es ist Zeit für dich, zu üben. Das Gold ist, um die Bildschirme der Kamera fließt zu bauen. Aber bevor er damit beginnen konnte, lassen Sie mich mit Ihnen über ein paar gute Praktiken sprechen. Zuerst werden wir die Außenbordwände neu anordnen. Die Hauptnavigation unserer App basiert auf fünf Schritten, in diesem Fall ist eine praktische, die unsere Boards und Ihre Leinwand anordnen ist zu groß. Fünf Rose, eine pro Tippen, also verlassen wir den Startbildschirm hier und spielt die Explosion direkt unten. Sie können den Namen der Registerkarten auf der linken Seite schreiben, so dass, wenn Sie Ihre fünf anderen Personen teilen , um zu verstehen, wie die APP funktioniert, sobald sie die Datei öffnen. Also, das ist Typ Hause und sagte die Größe groß genug, so dass Sie es sehen können, wenn Sie wirklich verkleinert . Kopieren Sie und fügen Sie unten ein und geben Sie erkunden ein. Endlich das Gleiche für die Kamera tun. Erinnerst du dich an die User Story, die wir in dir definieren Ausnahme. Nun, wir werden sie jetzt verwenden, um zu definieren, was in jedem der Kamera-Bildschirme entwerfen müssen öffnen Sie die Instagram i Western Das Kind, das ich in Teilen schöne Bilder nehmen möchte, war die Geschichte für die Kamera tippen Kobe und basted unter der Kamera -Ebene. Sehen wir uns nun an, wie wir dies durch verschiedene Schritte erreichen können. Erstellen, nicht an Bord. Drücken Sie einen Einsatz iPhone sechs. Der erste Schritt, um sein Ziel zu erreichen, wird es sein, ein Foto zu machen. So umbenannt sind sowohl Kamera als auch unten. Ich kann ein Bild machen, wie diese Bildschirme miteinander verbunden sind, können Sie eine schmale zwischen den Bildschirmen platzieren, um schmale klicken Sie auf, fügen Sie einen Pfeil nach rechts Richtung. Beziehen Sie sich darauf. Ich Wert datiert das Foto und klicken Sie auf die nächsten Kopien der Border Side. Der zweite Schritt besteht darin, das Foto schön aussehen zu lassen, also bringen wir Filter, die umbenannt wurden, an Bord. Filter auf dem Bildschirm waren direkt unten. Ich kann streichen, um den Filter zu wählen. Wenn ich auf einen Filter klicke, wird das Bild geändert. Sind kalt ingley Nun, da das Foto sieht gut aus, lassen Sie uns einige Details in Kirsche geben. Mit der Welt, wie die Aktion ist die gleiche, können Sie den ersten Pfeil erstellen basieren, behaupten Außenborder und benennen Sie es teilen und schreiben Sie die Geschichte unten. Ich kann eine Beschreibung hinzufügen, um mein Foto zu machen. Ich kann die Netzwerke auswählen, auf denen ich es jetzt teilen möchte. Schreiben Sie auf, was in der letzten Aktion passiert ist. Mein Bild wird in meinem Follower-Feed und in Netzwerken geteilt. Ich habe die Kamera für Enden ausgewählt, und ich bin wieder in meinen Heimfüßen für ihre Königin Ihrer App. Versuchen Sie, sich auf ein oder zwei Aktionen zu konzentrieren, so dass Sie einen Dunk verwenden. Es ist zuletzt. Das war's. Weißt du, ich muss das leere Gefühl haben. Unsere Bretter. Sie müssen nicht unbedingt Instagram replizieren. Unsere User Story kann verschiedene Antworten in Bezug auf Sie haben. I In diesem Unterrichtsordner finden Sie alle Elemente, die Sie benötigen, und die fertige Datei. Versuchen Sie, Ihr Bestes auf eigene Faust zu tun. Und wenn Sie auf, wie Sie etwas tun, wie schauen Sie sich das nächste Video, wir zeigen Ihnen, wie Sie die gesamte Übung zu beenden. Viel Glück 11. Exercise – Camera: Willkommen zurück. Wir zeigen Ihnen, wie wir die Übung abgeschlossen haben. Wir haben Instagram nicht genau repliziert, sondern nur Antwort auf die User Story unter jedem sollte Ports gegeben . Sie könnten natürlich Ihr eigenes Design erstellen, wenn Sie das tun, wurde ein wenig beschleunigt. Also lassen Sie uns Bürger Musik deejay jeden Tag verbringe ich meine Zeit in der Nähe zu finden kann verstehen ja, Jeden Tag verbringe ich meine Zeit Gefühl Weg ich nehmen Kann er zu einer anderen Dimension Mama durch die Sie schlürfen die Art und Weise bekommen Wahrheiten in diesem Fluss geworfen Nur Bits Solargeschäft gehen Geschäftskreditstädte ins Gefängnis gehen, gehen in die Kirche Great. Und nur Gott kann mich richten. Ja, weißt du, wie kein hässlicher Blick. So verdammt gut am meisten, ja, ich weiß. Ich plädiere auf die fünfte, wenn du Teoh Motion brauchst, um zu sehen, wie ich mich in einigen Sitzgelegenheiten nähere. Es weiß, dass es hoffnungsvoll ist. Das widerspricht Justin. Nur Emotionen. - Ich will noch einen Clip in der Mitte mit einer Nachricht an die Chefs spielen, diese neuen Ausstatter auf der Blutkabine zu verpassen . Zeig mir die Marke, die Marke guten Stand. Größte Kopie Brötchen wie legal über nur über ein Stück der ich stimme gut nur trinken mein Weinfenster zu bekommen . Aber ich liebe es nicht, mich so etwas wie Hühnchen zu nehmen. Ok, sogar nein. 12. Vorschau auf deinem Gerät mit Sketch: Hey, ich hoffe, du hattest eine gute Zeit, um Kamera-Schwimmer zu entwerfen. Jetzt werden wir die Datei mit älteren Bildschirmen öffnen, die bereits entworfen wurden. Öffnen Sie die Datei instagram. Ich habe in dieser Lektion immer korrigiert. Ordner zwei, Bruder. Diese Akte. Wir werden eine der besten Funktionen in der Skizze verwenden. Es heißt Sketch Miro. Es war eigentlich einer der Gründe, warum ich süß machen von Photoshopped Skizze Skizze zu skizzieren . Miro können Sie eine Vorschau des Designs in Echtzeit direkt auf Ihrem Gerät anzeigen. Möglichkeit, ein Design auf dem Gerät, für das Sie entwerfen, in einer Vorschau anzuzeigen, ist unerlässlich. Nur so können Sie sicher sein, dass das, was Sie tun, wirklich Sinn macht, und es ermöglicht Ihnen, potenzielle Ströme zu erkennen. Zuerst müssen Sie in den APP-Store auf Ihrem iPhone gehen oder ich wette und suchen Sie nach der Skizze Mahlzeit up. Es kostet Sie $5 Aber wenn Sie diese Menge an Geld nicht ausgeben wollen, keine Sorge, wir geben Ihnen ein paar Alternativen. Sie sind frei, aber ein bisschen weniger praktisch, weil nicht in Skizze gebaut. Sobald Sie die Küche heruntergeladen haben, Sie auf Ihrem iPhone. Stellen Sie sicher, dass Ihr Computer und iPhone mit dem gleichen WiFi-Netzwerk verbunden sind, gehen Sie jetzt zurück zu Ihrer Skizze, Fell und geöffnet. Skizzieren Sie das Essen auf Ihrem Gerät. Sie sollten ein Rot sehen, das neben dem mittleren Symbol angezeigt wird. Klicken Sie darauf und wählen Sie Ihr Gerät aus. Wenn alles gut funktioniert hat, sollten Sie jetzt sehen, dass die Außenbordwände auf Ihren Rat erscheinen. Jetzt kannst du es auch, Bruder. Sie sind beide, indem Sie auf Ihrem Gerät wischen oder den spezifischen Arbol auswählen, den Sie in Ihrer Skizze anzeigen möchten . Fünf. Es ist der beste Weg, um die Größe Ihrer Telefone einzustellen oder zu sehen, wie die Farbe wirklich auf dem realen Bildschirm aussieht . Alle Änderungen, die Sie vornehmen, werden in Echtzeit aktualisiert. Natürlich, wo Sie in Sie kommen, um Fang Mahlzeit zu verwenden. Aber wenn Sie nicht drayd sind oder wenn Sie nicht wollen, um $5 die beste Alternative zu skizzieren Mayo heißt Jakobsmuschel Review. Sie können kostenlos auf Ihrem Mac direkt über diesen Link herunterladen. Die Android und IOS bis unsere kostenlose als auch. Es funktioniert nicht so gut wie Catch me gut, weil es Ihr Design nicht in Echtzeit zeigen wird. Sie müssen PNG abgelegt exportieren und sie dann im Maßstab A öffnen, um sie auf Ihrem Telefon sehen zu können . Viel Spaß beim Spielen mit dieser App in der nächsten Lektion wird näher kommen, um dies zum Leben zu erwecken . 13. Zeichenflächen exportieren: in den Übungslektionen. Wir haben eine App mit einem US ausgeschriebenen Zitronen entworfen. Es ist nicht perfekt, aber es ist funktional, und das ist es, was am wichtigsten ist. Eigentlich ist es mehr als genug, um mit dem Programmieren zu beginnen. Also lasst uns auf die Welt versuchen, angefangen mit einem Entwickler bis hin zu Entwicklern, der Kerl, der die App codiert, verwandelt Ihr Design von einem Prototyp zu einer App, die Leute in Jacquizz bekommen, er ist Ihr Partner in Crime Coding ist nicht etwas, was wir in diesem Kurs . Es ist eine ganz andere Reihe von Fähigkeiten. jedoch Es istjedochvon entscheidender Bedeutung, dass Sie einen niedrigen Entwickler haben, um Ihr Design zu verstehen, und das ist, woran wir in dieser Lektion arbeiten. Wenn Sie ein Entwickler sind, werden die Dinge einfacher für Sie, wenn Sie keine Ratschläge über die effektive Zusammenarbeit mit dem Entwickler sind. Was zählt jetzt ist, dass er die Kernzukunft Ihres Produktes geliebt hat? Also nicht für angegeben bekommen Wenn in der funktionierenden App und Icahn ein Pixel eingestellt und erwartet wird, sind dies ästhetische Details, die später behoben werden können. Denken Sie auch daran, dass die Entwickler Ingenieure sind, und sie schätzen wirklich genau Kommunikation in den Grenzen. Wenn Sie möchten, dass Ihre Beziehung ein friedliches Paar sein sollte immer daran denken, dass in diesem Teil des Kurses. Wir haben die App nur mit IOS entworfenen Elementen entworfen. All diese Elemente sind nativ. In X-Code enthalten ist eine Entwicklungssoftware, die verwendet wird, um Iowa abs zu entwickeln. Das bedeutet, dass Sie die verschiedenen Elemente, die Ihr Designer vom Entwickler erstellt hat, nicht exportieren müssen . Wir müssen nur sehen, wie Sie die Elemente positionieren, um Ihr Design in X neu zu erstellen. gut, ihm zu zeigen, dass wir Onley nique Exporte auf verschiedene Bildschirme sind. Also mal sehen, wie man Außenbordwände vor dem Export in unser Board exportiert, müssen Sie es exportierbar machen. Wählen Sie Ihre sind langweilig, indem Sie in seinen Namen in Ihrer Leinwand oder direkt in der Ebenenliste klicken und dann auf die untere rechte Ecke klicken ,um es ausnutzbar zu machen. , Eine Vorschau wird sofort angezeigt. Sie können Ihre ehemaligen zwischen verschiedenen Bilddateien wählen, weil auch wählen, um die Auflösung seines Bildschirms zu multiplizieren . Aber wir werden darüber reden. Wann wird Elemente exportieren setzen Sie es auf ein X und PNG. Jetzt können Sie die Vorschau direkt per Drag & Drop auf Ihren Desktop ziehen, um sie zu exportieren. Wählen Sie eine andere Außenbordkommentare, zum Beispiel, machen Sie es exportierbar und exportieren Sie es. Legen Sie älteren Bildschirm in einen Ordner, der Exportbildschirme benennt. Gehen Sie nun zurück zur Skizze und wählen Sie alle Außenbordwände mit Ausnahme des Startbildschirms und des gemeinsamen Bildschirms aus. Wählen Sie die 1. 1 aus, indem Sie auf den Namen in der Layer-Liste klicken und dann auf. Warum halten Kommentar Um die anderen beiden Auswahl hinzuzufügen, Machen Sie sie Oh, exportierbar Jetzt auf dem Home-Bildschirm unter gemeinsamen Bildschirm zu Ihrer Auswahl, überprüfen Sie die Hintergrundfarbe Dollar und halten Sie die Farbe in weiß. Dies schließt den weißen Hintergrund in jedem Bildschirm ein, so dass sie nicht transparent aussehen . Jetzt, da alle unsere Boards exportierbar sind, können Sie entscheiden, sie alle diese zu exportieren. Sie dazu auf das KlickenSie dazu auf dasExport-Symbol in der oberen rechten Ecke Ihrer Skizze. Dadurch werden alle Elemente angezeigt, die in Ihre Dateien exportiert werden können. Wählen Sie diejenigen aus, die Sie exportieren möchten, und klicken Sie auf Exportieren. Wählen Sie den Ordner Exportieren Screenshots, die wir gerade erstellt haben. Dadurch werden die Bildschirme automatisch in ihrer neuesten Version aktualisiert. Jetzt können Sie diesen Ordner mit einem Entwickler teilen und mit dem Programmieren beginnen, während Europa entwickelt wird . Sie haben Zeit, das Symbol zu erstellen, und das werden wir in der nächsten Lektion tun. 14. App Icon-Design v1: Hey, lasst uns Leiter unserer App gerade entwickelt wird, ist die perfekte Gelegenheit, um das Symbol der Noch das Symbol für Ihre App im APP Store und auf dem Home-Bildschirm Ihrer Kunden füllen zu entwerfen Symbol der Noch das Symbol für Ihre App im APP Store und auf dem Home-Bildschirm . Es ist wichtig, dass es mit der Identität Europas und dem IOS-Stil übereinstimmt, so dass es unter allen anderen Symbolen nicht seltsam aussieht. Sie möchten etwas kreieren, das es einfach ist. Das war klar für die Benutzer, die Ihre App darstellen und sich auf dem Startbildschirm abheben . Werfen wir einen Blick auf das IOS-Symbol. Sie sind ziemlich unkompliziert. Gmail App Icon ist ein Umschlag. Der Musik-Player. Ein paar Notizen Das Finden eines grafischen Elements, das Ihre App darstellt, ist eine gute Möglichkeit diese in Ihrem coolen und effektiven Symbol zu finden. Wenn Sie effizient sein wollen, das einfachste, was zu tun ist, eine Nikon nach Facebook-Beispiel zu entwerfen, die erste später des Namens Ihrer App mit der rechten Vorderseite mit Ihrer Hauptfarbe als Hintergrund, und deshalb werden wir in diesem Unterrichtsordner. Sie werden ein Feuer Line-Up Symbol, Gier, Vorlage finden. Es wird uns helfen, eine Nikon zu entwerfen, die anschwellen Proportionen. Also lasst uns gehen. Die an Bord für Symbole ist ein Quadrat von 1000 und 24 Pixel von 1000 und 24. Pixel zeichnen nun ein Quadrat, um dieses Board auszufüllen und in der spezifischen Instagram Louis gefunden früher getönt . Wenn es nicht in Ihren Mustern erscheint, ist Dakota 125688 Mach dir keine Sorgen um die Brühe Ecken im Moment. Wir werden uns später damit beschäftigen. Nun, da wir haben, wird der Hintergrund einfach den ersten später aus unserer oben in die richtigen Telefone setzen. Legen Sie Decks, Blocktyp. Die spätere ich in der Hauptstadt sagte die Farbe in weiß und die Größe bei 900. Legen Sie es in der Mitte von Ihrem Außenborder, sagte die Eier bei 300 ein Y bei 40. Das könnte genug sein, aber lasst uns ein bisschen zuhauen. Unsere Ikone war zu ihren Stärken. Flache Cheetos duplizieren Ihre Text-Ebene war gekommen und sehen und kommen Neid in der weißen Position Typ plus 30. Dies wird bei 30 Pixel in der Position aus unserer Textebene, und wir machen es nach unten gehen 30 Pixel sagte. Die Transparenz dieser Schicht bei 50%. Wir müssen jetzt Phantasie Symbol, klicken Sie mit der rechten Maustaste auf den anderen geborenen Namen und exportiert. Sie können dieses Symbol zu Ihrer Agin-Einreichung hinzufügen. Apple braucht eine unglaubliche Menge an Kämpfen mit unterschiedlicher Größe. Glücklicherweise haben die Leute bereits eine Datei erstellt, so dass wir alle auf einmal generieren können, und wir werden das später sehen. Wenn Sie möchten, war eine Version Ihres Symbols um die Ecke, um es auf Ihrer Website zu setzen. Eine Visitenkarte oder war Pullover oder ein Pullover, den Sie so verfolgen können? Gehen Sie zurück zu Ihrem Icons Käfig Datei und kopieren Sie die Outboard entfalten Official Greed Ordner. In den Loyalisten sehen Sie eine Ebene mit dem Namen Symbol Kante ausgewählt und direkt über Ihrem blauen Hintergrund platziert. Wählen Sie die Feldfarbe mit unserem Blau aus und deaktivieren Sie das Kontrollkästchen des Rahmens. Verstecken Sie hässlich, um Hintergrundschichten und alle anderen Männer darunter zu booten. Exportieren Sie Ihre an Bord und los geht's. Sie können Ihren ersten Kopf von Stickern bestellen. Dies ist das Ende des ersten Teils des Kurses. Wir haben die alten Grundlagen durchgemacht, und wir sind jetzt bereit, eine App im APP Store zu haben und beginnen zu sehen, was Ihre damit macht . Herzlichen Glückwunsch im zweiten Teil wird von studiert bewegen, entworfen, um kundenspezifisches Design und erstellen Sie eine App, die wirklich gut aussieht. Wir werden tiefer in Skizzenelemente eintauchen und Sie in einen Skizzenmaster verwandeln. Wir werden über zwei Tage Trends sprechen und wie man bleibt. Bleiben Sie auf dem Laufenden. Ich werde Ihnen Best Practices beibringen, effizient zu sein und erstaunliche Plugins zu verwenden, die von der Sketch-Community entwickelt wurden . Wir sehen uns auf der anderen Seite. 15. Teil 2 Projekt: In Ordnung. Herzlichen Glückwunsch zum Abschluss des zweiten Teils des Kurses. Ich hoffe, du hattest Spaß mit hier draußen und dass du es genossen hast, dich zu skizzieren. Wenn Sie haben, zögern Sie nicht, uns Bescheid zu geben und uns eine Bewertung zu hinterlassen. Ihr Projekt in diesem Teil der Klasse besteht darin, ein einfaches Symbol für Ihre App zu entwerfen, um die Bildschirme Ihres Schlüssel-Feature-Flow mit IOS-Standardelementen so weit wie möglich zu gestalten. Die Idee ist, so schnell wie möglich für den ersten Entwurf zu kommen, um zu sehen, ob er funktioniert. Laden Sie also zwei oder drei Bildschirme Ihres Schlüssel-Feature-Flow auf das hoch, was wir die V nennen. Die Version einer Ihrer App, die ich im dritten und letzten Teil dieses Kurses könnte, wird tiefer in Skizze erweiterte Funktionalitäten Design, Best Practices und viele andere spannende Dinge eintauchen tiefer in Skizze erweiterte Funktionalitäten Design, , um mit einem benutzerdefinierten Design für unsere App zu kommen. So sehen wir uns in Teil drei