Schnelle Design-Tipps für alle

1. Einführung: Hey, was ist los, alle? Ich bin Designer und Unternehmer und entwarf seit fünf oder zehn Jahren. Ich habe mit allen möglichen Unternehmen gearbeitet, angefangen von kleinen lokalen Unternehmen bis hin zu Multi-Milliarden-Dollar-Unternehmen. In diesem Kurs werde ich einige schnelle Design-Tipps, die ich im Laufe der Jahre gelernt habe, zu teilen . Hoffentlich können Sie sie auf Ihre eigenen Designs anwenden. Also lasst uns hineingehen. 2. Wähle deine Persönlichkeit aus: Wenn es darum geht, etwas zu entwerfen, was auch immer Sie vielleicht haben ein Training, die Persönlichkeit, die Sie Ihrer Website geben möchten oder was auch immer Sie arbeiten App, Website, was auch immer. Also wollte ich mir zwei Websites ansehen, die sehr unterschiedliche Persönlichkeiten haben und sehr unterschiedliche Persönlichkeiten haben. Also diese Website-Ankunft, können Sie sehen, es ist sehr Art von smart auf Korpora, sehr modern. Sie können sehen, alle Tasten sind sehr quadratisch. Sie können die Schriftarten auch sehr quadratisch, sehr minimalistische Farbpalette als auch sehen , nur Schwarze, Weißen grasen. Und ja, sehr cleveres und anspruchsvolles Design und Persönlichkeit. Denis geben, auch mit den Schriftarten, mit Großbuchstaben Schriftarten wie diese, wo der Abstand zwischen den Buchstaben als auch, nur ein sehr modern aussehender Ansatz. Wenn wir jedoch Hunk betrachten, die eine Messaging-App ist, können Sie sehr, sehr unterschiedlich sehen. Es verwendet viel hellere Farben. Es hat abgerundete Ecken, sehr, sehr abgerundete Ecken. Selbst die Schriftart selbst, die sie verwenden, hat abgerundete Ecken am Ende, der Knopf ist sehr abgerundet. Sie können diese kleinen eigenartigen Animationen sehen. Es gibt viele verschiedene Farben, die los sind. Die Symbole, du weißt schon, hüpfen herum, bewegen sich herum. Ein ganz anderer Look und viel freundlicher zu lösen Look. Sieht ziemlich gut aus. Diese Website und die Ankunftswebsite sehen beide fantastisch aus. Sie haben nur sehr, sehr unterschiedliche Persönlichkeiten. Also, wenn Sie etwas entwerfen herausgefunden, was Ihre Persönlichkeit ist, was die Persönlichkeiten, die Sie versuchen, über diese Marke zu bekommen, für diese Website, und gehen von dort. Es ist gut, andere Beispiele zu betrachten, ist gut, andere Websites zu betrachten und zu sehen, was sie tun wenn es darum geht, auf ihre Persönlichkeit zu liefern. Also als ein kurzes Beispiel, ich werde zwei verschiedene sah eine Website nicht vollständige Websites verspotten, sondern nur um Ihnen eine Vorstellung davon zu geben, wie es ist, Persönlichkeit zu einer Website hinzuzufügen. Also fügen wir einen Rahmen in FISMA hinzu. Lassen Sie uns diese 1200 Breite tatsächlich machen, machen wir es ein bisschen breiter. Können wir es breiter machen und passen? Ja, das können wir. Ok. Großartig. Also ja, ich denke, ich mache eine Banking-Website. Also, jetzt hat sie die Bank hier oben gestellt. Und wir werden für eine minimalistische Pi-Farbpalette für jetzt gehen. Und lassen Sie uns auch einige Überschriften setzen. Also Login, melden Sie sich an. Ich werde nur sehr schnell von Alice sein. Fügen wir ein Rechteck hinzu. Navbar. Zum Beispiel. Bringen wir das runter. Oh, wir wollen das alles holen und sie ausrichten. Bringen Sie diese über T und wenn es um die Schriftart geht, was wir tun werden, ist, dass wir in verwenden, weil ich denke, in ein ziemlich gutes, intelligentes, anspruchsvolles Telefon. Er hat auch sehr scharfe Kanten. Lassen Sie uns das Logo ein bisschen größer machen. Ich denke, dass Schriftarten fett als auch helfen können, ihm ein kantigeres Aussehen zu geben. Wir machen das auch weiß. Lassen Sie uns gehen und spritzen und wieder, Bild in unser Design aufzunehmen. Also lasst uns dieses Bild reinbringen. Lass es uns natürlich hineinpassen und unter alles bringen. Und dann wollen wir es eigentlich im Rahmenbereich. Was wir tun werden, ist, dass wir auch ein Ja hinzufügen, wir werden eine Füllung oben darauf hinzufügen. Machen Sie eine Volumenkörperfüllung. Und gehorcht der Deckkraft nach unten. Vielleicht werden zwei um 70% auch diese dunkle Farbe machen. Hat es um ihre Augen gelegt, machen diese weiß. Lasst uns das ein bisschen größer machen. T 14, ich denke, es ist gut. Und der Abstand zwischen ihnen verbeugte sich halb die Farben auf ihnen. Und was ich eigentlich tun werde, ist, dass ich diesen Header entfernen werde. Und ich denke eigentlich gut aussehen, ohne den Header besser aussehen. Und diese wieder, um sich dort umzudrehen. Und dann fügen wir jetzt ein Exemplar hinzu, weil es schwarz ist. Aber wir werden es etwas größer machen. Wie sagen wir, ein zusätzlicher Platz dort. Bringen Sie es in die Mitte. Lassen Sie uns auch etwas Text darunter hinzufügen. Lasst uns diese wie „Tor“ machen. Und wir werden das natürlich viel kleiner machen. Vielleicht 16 Bit D viel gestern haben wir Alex besser. Vielleicht kriegen wir dieses Farb-T-Shirt. Wir fügen eine Schaltfläche hinzu. Der Knopf, der goldene Kragen. Jetzt hatten wir wie sagen, nun eigentlich denke ich, es wird sein müssen, lassen Sie es ein bisschen dunkler in der Farbe machen. Das Ding sieht ziemlich gut aus. Um es halb verbeugt zu machen. Es ist auch, dass der Knopf ein bisschen größer wird. Also änderte ich die Farbe des Knopfes, weil ich denke, dass Blau tatsächlich ein bisschen besser aussieht. Aber ja, da sind wir. Wir haben gerade eine sehr schnelle Art von Banking-Website-Header erstellt. Und ich habe ein sehr einfaches Bild gewählt. Corporate Image verwenden sehr moderne Schriftarten mit scharfen Kanten, Tasten ohne Art von Radius auf ihnen überhaupt. Und so wie es sieht einfach sehr korporativ und sehr geschäftlich aus, sehr Bankwesen, als würden wir ihm einen Namen „Bank“ geben. Und was wir tun werden, ist, dass wir noch einen machen. Und dieser hier sagen wir, ist mehr Mode verwandt, weil es sehr, sehr anders aussehen wird. Also lassen Sie uns den Namen nur Mode geben. Sehr einfach. Also für diesen hier werden wir eine Schriftart namens „Made mirage“ verwenden, großer Favorit von mir. Und wir ändern alle Schriftarten. Ich sollten wir t Schriftarten verwenden gemacht mirage und wir werden termini verwenden, weil wir für mehr von einem Mode-Look gehen. Wir verwenden für dieses eine ganze Reihe verschiedener Mittel. So beenden wieder ist eine meiner Lieblings-Schriftarten. Ich denke, es sieht fantastisch aus. Machen Sie alle Großbuchstaben Suite. Und vielleicht machen wir das wie ein Blog. Kontakt. Cu wird auch das Bein ein wenig größer machen und es ist ein bisschen kleiner. Sie sind wie die Seite. Was wir tun werden, ist, dass wir das Hintergrundbild entfernen und dann zu gehen und spritzen. Und wir werden nach einem modebezogenen Bild suchen. Also werden wir dieses Bild hier verwenden. Wir werden diesen Text entfernen, wo wir auch die Schaltfläche gemacht haben. Wenn wir alles haben, wird dieses Bild hier verwenden. Machen Sie es offensichtlich viel kleiner als das. Vielleicht schaffen wir es hier so groß. Bringen Sie das auch ein bisschen mehr herunter, bringen Sie den Rahmen ein wenig nach unten. Wir würden 1400 Feuchtbereich draußen halten. Und wir werden so etwas wie nur einen großen Titel in unsere Lieblingsschriftart setzen. Machen Sie es weiß. Und wir werden es auch riesig machen. So etwas wie das. Es macht es weniger, stellen Sie sicher, dass alles auch zentriert ist. Und wir sind, was wir auch tun werden, werden dieses Bild tatsächlich beschneiden. Machen Sie also ein Rechteck von hier nach hier und erhalten Sie das Bild. Und wir benutzen Moschee. Und wieder, ich denke, das ist besser. Wir könnten diesen Titel sogar noch größer machen. Ja, machen wir noch größer. Und wir machen es etwas dünn bei T, Navy. Und was wir tun werden, ist, dass wir unten einen Text hinzufügen. Ich, vielleicht nur ein Dummy-Text. Wie sagen, ich denke, das könnte ein bisschen zu viel Dummy-Text sein. Zeig mir etwas davon. Und machen Sie es auch ein bisschen kleiner. Es kann ein Datum hinzufügen. Und wir machen dieses Datum zu einem Begriff und einer Schriftart. Lassen Sie uns die Zeilenhöhe bei diesem t. und dann können wir eine Schaltfläche hinzufügen um zu sagen, lesen Sie mehr. Wieder. Machen wir das zu unserer anderen Schrift. Und ja, da sind wir. Wir haben nur eine sehr schnelle Art von Mode-Blogs oder Dinge, die ich eingerichtet habe. Und es sieht offensichtlich ganz anders unsere Corporate Banking Website, die wir früher gemacht haben. Und das ist nur eine wirklich schnelle und einfache Möglichkeit, etwas Persönlichkeit auf einer Website hinzuzufügen. Finden Sie heraus, die Persönlichkeit, die Sie verwenden können. Verschiedene Schriftarten sind verschiedene Schaltflächen-Shapes. Was auch immer es auch sein mag, schauen Sie sich Inspiration an und wenden Sie Ihre eigene Persönlichkeit auf eigene Websites an. 3. Benutze Graue: Wenn Sie zum ersten Mal mit dem Design beginnen, ist es eigentlich sehr einfach, nur Schwarzen und Grau- und Weißweinen zu verwenden , wenn es um Ihr Design geht. Aber was ich gerne tun ist, ist anders als t geweidet, die einen Hauch von Farbe in ihnen haben. Ob es ein bläulicher Hinweis, ein grüner Hinweis oder gelblicher Hinweis zu ihnen sein. Oder vielleicht sogar wie ein roter Hinweis, um ihm einen wärmeren Look zu geben. Und in einem Hauch von Farbe zu Ihren Grauen kann wirklich leben und oberen Design und verwandeln die Art und Weise, wie es aussieht. Also werde ich Ihnen schnell zeigen, wie es ist, einfach etwas normale Anmut zu machen und dann ein paar Grautöne mit einigen Farben hier hinzuzufügen. Und Sigma wird eine schnelle Farbpalette machen. Geben Sie Schaltflächen oben um die Ecke. Ich liebe meine Knöpfe mit abgerundeten Ecken. Und wir sehen uns, wenn wir mit Schwarz anfangen. Wird eine schwarze Farbe machen. Graue Farbe. Hat irgendwo noch einen grauen grauen. Stellen wir sicher, dass das die ACGME mich umbringen wird. Hier haben wir also eine Reihe von Schwarzen, Grauen und Weißen. Sieht gut aus. Sie können dies in Ihrem Design verwenden. Und ich habe manchmal komplett schwarze und komplett graue Farben in meinem Design verwendet. Daran ist nichts falsch. Wenn Ihre Website jedoch eine Akzentfarbe hat, zum Beispiel blau, sehe ich nicht, warum Sie etwas Blau zu Ihrer Gnade hinzufügen können. Also machen wir das. Also haben wir diese IVR gemacht und wir werden das ansprechen, aber wir werden es hier in blau bringen. Und was wir tun werden, ist, dass wir es hier rüber bringen, irgendwo hier. Nun, es ist sehr, sehr subtil. Und dann, wenn Sie beginnen, auf Ihrem Bildschirm zu sehen, aber Sie können sehen, das ist sehr viel ein Tonhöhe schwarz, aber das ist eher eine Art bluey in Schlüssel schwarz in einer Weise. Und was wir tun werden, ist, dass wir verschiedene Schattierungen von diesem Grau machen. Wenn wir also den Farbbereich durchlaufen, können wir einfach den Farbwähler verwenden. Und wir würden gerne tun, ist, dass ich in dieser Art von Winkel gehen würde, könnte man sagen. So. Nicht nur wie gerade nach oben, ich mag es, in einem Winkel zu gehen, sagen Sie so im Grunde. Aber gehen wir zurück zu dem, was du tust. Gehen Sie vielleicht hier herum. Ja, ich finde, das sieht ziemlich nett aus. Hier, glaube ich. - Ja. Eigentlich machen wir es etwas dunkler und da. Und dann da, welche Farbe sein Schreibtisch, Wüste B. Also machen wir es um ein B, denke ich. Da drüben. - Ja. Was ist das? Das ist ein D. Also bringen Sie Ihre Einstellung D da herum. Und dann endlich B1, letzte Farbe. Jetzt sind wir es. Wie Sie sehen können, gibt es einen Hauch von Blau in diesen Grauen. Und ich denke, es fügt nur ein bisschen mehr Farbe und Charakteristik zu jedem Design, an dem Sie arbeiten, hinzu. Und das ist eine wirklich schnelle Möglichkeit, eine Farbpalette von Grauen mit einem Hauch von Farbe in ihnen zu machen. Also hier habe ich schnell verspottet eine App nur mit Schwarzen, Grauen und Weißen, und sieht sofort in Ordnung. Aber es fehlt Persönlichkeit. Ich sage das, weil es mich nach dem Glück lachen lässt , würde ich so gestalten, dass es sowieso aussieht. Und, aber, aber trotzdem, wir wollten etwas Farbe zu dieser App hinzufügen. Also werden wir unsere Gnade ändern und ihnen ein bisschen Farbe geben. Also werden wir zuerst mit dem Hintergrund beginnen. Also lassen Sie uns ein Blau wählen, das wir mögen. Bringen Sie es rüber. Und wir können schon sehen, dass es eine kleine Veränderung zwischen diesem und jenem gibt. Lasst uns unser Hamburger-Symbol ändern. Lässt sich hörbar Pat Boden wählen. Und lasst uns das ansprechen. Vielleicht zwei da. Ja, ich mag es dort. Ich denke. Machen Sie dasselbe mit unserem Benachrichtigungsglocken-Icon. Und wir gehen einfach langsam durch und ändern die Farbe unserer Weide zu ein bisschen mehr blau. Lass es uns ein bisschen leichter machen. Eigentlich. Da gehst du. Whoops. Das ist die falsche Farbe. Sie können also schon sehen, dass das einen großen Unterschied macht. Sie können bereits sehen, dass es ziemlich viel Farbe in der eigentlichen App selbst gibt. Also lasst uns weitermachen. Ändern Sie es so. Ja, ja. Und dann fügen wir auch eine Farbe zu unserer Schaltfläche hinzu, da unsere Schaltfläche momentan nur grau ist. Sagen wir, geben wir ihm einen Farbbereich. Das sieht ziemlich gut aus. Wir geben unseren Karten auch etwas Farbe. Vielleicht hat sich hier sogar ein bisschen verändert. Ein Typ. Änderte den Fortschrittsbalken , ist gut, dass ein bisschen Farbe wie so. Wir sehen wieder ziemlich gut aus, wir kommen dorthin, wir kommen dorthin. Sehr, sehr schnell dorthin zu kommen. Lassen Sie uns ein wenig hineinzoomen, damit wir diese Farben auch ändern können. Also, wenn es um so etwas geht, dieser Knopf, viele Leute, was sie normalerweise tun, ist, dass sie es Y machen, und dann geben sie ihm wahrscheinlich eine Kapazität von 50 zum Beispiel. Aber ich denke, das ist ein Fehler, den viele Leute machen. Und, und ich denke, es sieht richtig aus. Das Beste, was ich fand, dass Sie tun sollten , ist, dass Sie tatsächlich dem Knopf eine Farbe geben , die eher eine Art hellere blaue oder hellere Farbe ist wie so. Ich denke nur, das sieht viel besser aus, als nur ein Weiß zu verwenden und es dann zu ändern, um ihm eine gewisse Kapazität zu geben würde es für diese tun, um tatsächlich haben wir den Hintergrund irgendwie wie unter bringen diese Umdrehung dort. Ja, ich denke, das wird funktionieren. Und wieder, mit diesem Text hier, die, Ich denke, die meisten Leute würden es weiß machen und dann eine Deckkraft geben. Aber das wollen wir nicht tun. Wir wollen ihm einen bläulichen Farbton geben, aber von einer blauen Farbe, um es so. Und dann können wir das Gleiche für die anderen tun. Weißt du was, ich werde dieses kopieren und einfügen , nur um es mir ein bisschen einfacher zu machen. Und da sind wir. Sie können sehen, dass wir eine tolle App genommen haben, sehr dunkelgraue App, und wir haben es ziemlich viel Farbe gegeben und es sieht viel anders aus. Es gibt dem Apple etwas mehr Persönlichkeit, gibt ihm ein bisschen mehr Farbe, und macht es einfach so aussehen, als wäre eine Art von Branding dahinter. Also, ja, es ist toll, Grautöne zu verwenden. Sie können keine Schwarzen und Grautöne verwenden, wenn das der Look ist, den Sie suchen. Aber wenn Ihre Marke eine Akzentfarbe hat wie eine blaue Farbe wie hier, dann denke ich, es ist immer eine gute Idee, ein wenig Blau zu Ihrer Anmut, Ihren Schwarzen und Weißen hinzuzufügen . 4. Buchstaben-Abstand: Etwas, was ich gerne mache, wenn es um meine Entwürfe geht, ist, dass ich den Buchstabenabstand je nach Text und Kontext vergrößern oder verkleinern möchte . So zum Beispiel, hier haben wir ein Bild, wir haben eine Kategorie, wir haben einen Titel, und wir haben einen Text. Jemand schreibt. Und ich werde gehen und tun, ist, dass ich all das kopieren werde, damit ich Ihnen ein Vorher und Nachher zeigen kann. Also kopieren wir es dort drüben. - Ja. Und dann, was wir tun werden, ist, dass wir das ganz Großbuchstaben machen. Und dann erhöhen wir den Buchstabenabstand um 50%. Nun, das ist ein bisschen zu viel. Lass uns 10% machen. Da sind wir. Ich finde, das sieht ziemlich gut aus. Und ich denke, das funktioniert wirklich gut, wenn es um kleine Textstücke wie diesen, innere Lichtetiketten und solche Dinge geht. Großbuchstaben mit einigen Abständen zu haben, sieht einfach viel besser aus als das, was Sie hier sehen. Aber dann, wenn es um Titel geht, was ich eigentlich gerne mache, ist, dass ich den Buchstabenabstand verkleinern möchte. Lassen Sie uns es also auf minus 5% reduzieren, so etwas. Und da sind wir. Es macht es Buchstaben viel näher beieinander und es sieht eher wie eine Überschrift aus. Und Sie können den Unterschied wirklich sehen. Entscheiden Sie, wo kein Bleiabstand vorhanden ist und auf dieser Seite erhöhter Laserabstand und ein verminderter Buchstabenabstand vorhanden ist. 5. Text: So viel gestaltete Programme. Und normalerweise, wenn Sie eine Website oder eine Code-Website entwickeln und Text einfügen, kann der Text etwas zu kompakt, zu nah beieinander aussehen. Es macht es viel schwieriger, den Text zu lesen, als es sein sollte. Und eine sehr einfach zu, die viele Leute, die ich denke, verpassen. Es ist nur, um Ihre Zeilenhöhe zu erhöhen. Also, wenn wir gehen, um die Zeilenhöhe zu erhöhen, wo sie gerade hier, ist es derzeit auf 17 als Standard. Aber wenn wir es zum Beispiel auf 22 erhöhen , können wir sofort sehen, dass es einfach so viel einfacher zu lesen ist. Es gibt viel mehr Abstand zwischen jeder Zeile. Unsere Augen finden es viel einfacher, jede Zeile als auch zu lesen. Und es hilft nur viel, wenn es um Lesbarkeit geht. Nun, das Einzige dabei ist, dass du nicht die gleiche Linie hoch haben willst. Wenn Sie einen Titel haben, sagen Sie zum Beispiel, wenn ich, oder sogar nur eine größere Schriftart im Allgemeinen. Also, wenn ich dieses ein ziemlich viel größer mache, weil es irgendwie 14 haben. Und dann setzen wir die Zeilenhöhe auch. So wie das hier. Es ist immer noch ziemlich lesbar, selbst mit einer größeren Schrift. Wenn Sie jedoch die Zeilenhöhe für größere Schriftarten erhöhen, möchten Sie sie nicht so stark erhöhen, wie Sie es mit einem Absatz tun würden. So ist es derzeit bei 29 als Standard, es sei denn, erhöhen Sie es einfach auf 32. Und ja, Sie können sofort sehen, dass es einfach so viel einfacher zu lesen ist. Was ich tun werde, ist, diese ein bisschen kleiner zu machen , nur um Ihnen die verschiedenen nebeneinander zu zeigen, wie viel der Unterschied Molkereien. Wenn wir also Tage kopieren und einfügen, bringen Sie sie hierher. Und dann setzen wir Auto als Zeilenhöhe. Wir können sehen, dass diese Seite hier mit Zeilenhöhe erhöht ist. Und diese Seite hier ist nur eine Zeilenhöhe und ändern Sie sie. Und es ist einfach so viel einfacher, die Seite zu lesen, die die Zeilenhöhe erhöht hat. So haben Sie sehr schnellen, einfachen Tipp für jeden, der Website macht, für jeden, der mit jeder Art von großen Textkörper zu tun hat. 6. Absatzbreite: Entwerfen einer Website, oder vielleicht entwerfen Sie einen Blog oder so etwas. Wir haben Textverlust. Es ist ziemlich einfach, große Bilder und große Textkörper zu haben. Allerdings verwechseln ich Garcia Läppchen Macher auf einem Strecken den Text den ganzen Weg über die Website, den ganzen Weg über, nur um es scheint, als ob es das Bild passt. Aber das ist völlig falsch und nicht immer sollten Sie Dinge tun , weil es das Lesen des Textes ziemlich schwierig macht. Deine Augen müssen wirklich hin und her gehen, um jeden einzelnen Satz zu lesen. Und es ist eigentlich ziemlich anstrengend und ziemlich ärgerlich für den Leser. Eine sehr einfache Sache ist also nur, die Breite Ihres Textes zu verringern. Und eine gute Faustregel ist, es zwischen 40 und 80 Zeichen pro Zeile zu halten. Jetzt ist offensichtlich nicht wirklich so einfach, jedes einzelne Zeichen zu zählen, die Sie in jeder Zeile haben. Aber während Sie es immer tun, während Sie lösen, mit dem Design herumlaufen, als frech, mit der Breite des Textes herumlaufen, erhalten Sie eine gute Vorstellung davon, was einfacher zu lesen ist und was mit der Schrift funktioniert, die Sie verwenden. Also ja, ein weiterer sehr kurzer Tipp, um nur Ihren Text leichter zu lesen. 7. Mache deine Formulare besser: Also, wenn es um Formulare geht, sehe ich Log-Websites haben Formulare, die so aussehen, wo Sie alle diese Eingabefelder haben und sie scheinen gewichtig zu sein. Und es gibt keine Trennung. Nur eine Menge Eingabefelder. Und es ist nicht sehr benutzerfreundlich, scheint einfach nicht sehr ordentlich und ordentlich zu sein. Und etwas, das Sie ausfüllen möchten. Jetzt ist es wirklich einfach, dies zu beheben und es ist wirklich einfach, jeden Teil des Formulars zu trennen und es einfach für den Benutzer, der das Formular ausfüllt, verdaulicher zu machen. Also, was wir tun werden, ist, dass wir das über kopieren und wir beginnen zuerst oben im Formular. Also fangen wir an, Dinge zu trennen. Fügen wir hier eine Grenze hinzu. Machen Sie es t Pixel. Geben Sie ihm ein sehr hellgrau. Eigentlich können wir es nur ein Pixel machen. Und wir werden all diese Formulare nach unten verschieben. Also machen wir unsere Form von Bit, etwas größer wie Sinus. Also schieben wir alles ein bisschen nach unten. Da sind wir. Nur um uns etwas Platz zu geben. Was wir tun werden, ist, dass wir die Eingabefelder trennen. Also haben wir die Eingabefelder auf der rechten Seite und dann auf der linken Seite und haben eine Beschreibung dieses Abschnitts. So zum Beispiel, hier können wir es Benutzer-Info Titel, zum Beispiel. Machen Sie es Halbknochen wie Nähen. Und dann können wir eine Beschreibung für diesen Abschnitt erstellen, was meiner Meinung nach sehr hilfreich sein kann, besonders für Leute, die sich anmelden. Man kann hier auch helfen, ist die Arbeit in einem Grid-System. So können wir sehen, dass das Eingabefeld selbst 880 breit ist. Und wir können das in drei aufteilen und dann 20 Pixel Panning zwischen jedem setzen. Das gibt uns also eine Spalte von 280. So können wir diese 280 zum Beispiel machen, so. Und dann bringen wir das hier auf, geben 20 Pixel Polsterung. Verschieben Sie es also um 20 Pixel, 12, und machen Sie dann unser Eingabefeld auf 80. Wie sagen wir jedoch, wenn es um das eigentliche InputField geht, nicht das Gefühl, dass Sie bei der 280 bleiben müssen. Was ich gerne mache, ist, dass ich das Eingabefeld entwerfe, während die Breite des Eingabefeldes, abhängig davon, wie lange die Eingabe meiner Meinung nach sein wird. Zum Beispiel, mit einer Straßenadresse, die stark variieren kann, kann es sehr lang oder sehr kurz sein. Sie müssen also über die Länge des Eingabefeldes nachdenken und was Sie dort erwarten. Also Vor- und Nachname, normalerweise sind sie nicht lange verrückt, also können wir die hier heraufbringen. Und wir können die 280 machen. Und ich denke, es wird zu viel von einem Problem geben. Also gehen wir hin. Wir haben unseren ersten Abschnitt und wir können bereits sehen, dass ist ein massiver Unterschied im Vergleich zu dem, was wir hier sehen, wird im nächsten Abschnitt, die die Adresse Abschnitt angehen . Also in diesem Abschnitt nennen wir es Rechnungsadresse. Denn offensichtlich ist dies ein weiches Zahlungsanmeldeformular. Also nennen Sie es Rechnungsadresse, so. Wir werden das überschreiben. Und wie gesagt, ich habe nicht das Gefühl, dass Sie das Eingabefeld auf 80 setzen müssen. Und mit einer eindeutigen Straßenadresse kann es so sehr variieren. Also denke ich, es ist eigentlich eine gute Idee, dies als ein voller Breite Imputfeld zu haben. Ich denke, das Stadtfeld könnte tatsächlich als 2-SAT mit dem gleichen mit dem State und County Feld bleiben , kann es einfach zu 80 hier schnell, so. Dasselbe mit dem Länderfeld und dann dasselbe mit der Postleitzahl. Und dann haben wir unseren letzten Abschnitt, der die Karteninformationen ist. Also lasst uns das hier rüber kopieren. Und wir können so etwas wie nur setzen, um den Benutzer zu beruhigen. Gerade jetzt etwas heraus zu machen , wird die Zeilenhöhe davon erhöhen. Bringen Sie den Namen des Karteninhabers. Ja, ich denke, eigentlich wäre es eine gute Idee, diese Art von Länge Kartennummer zu machen , ich denke, könnte tatsächlich 2-SAT sein. Und was wir tun werden, ist, dass wir die Kartennummer auf ihrer eigenen Linie behalten. Weil ich denke, dass das viel sinnvoller ist. So drin zu haben. So bringen wir den Register-Button da rauf. Und dann machen wir auch unsere Form kompakt. Und da gehen wir. Wir können schon sehen, dass es einen massiven Unterschied gibt, verglichen mit dem, was wir hier haben. Wir haben tatsächlich all diese Felder genommen, Eingabefeld, und es gemacht, das Formular selbst kompakter gemacht und es auch viel lesbarer für den Benutzer gemacht. Sie können sehen, was sie ausfüllen müssen. Sie können klare Trennungen zwischen jedem Teil des Formulars sehen macht es einfach viel verdaulicher für den Benutzer. Und das ist eine sehr schnelle und einfache Möglichkeit, Ihre Formulare viel einfacher zu lesen. 8. Radio: Wenn Sie also ein Formular entwerfen, haben Sie manchmal Optionsfelder wie diese und sie funktionieren, sie sahen gut aus, aber ich denke, wir können hier einen viel besseren Job machen und diese Optionsfelder besser aussehen lassen. Also kopieren wir das alles vorbei bringen es so runter. Wir werden die Radien entfernen. Und dann, was wir tun, ist, dass wir in ein Rechteck setzen, wie sagen wir, vielleicht geben Sie ihm einige abgerundete Ecken. Machen Sie es weiß. Gib ihm einen Schlagschatten. Bringen Sie das hier runter. Was ich tun werde, ist eigentlich, um es einfacher zu machen, ich ziehe einfach all dies in einen Ordner, trenne dies in eine neue Textebene. Und dann machen wir das noch etwas größer. Vielleicht 18, machen wir es 1618, vielleicht ein bisschen zu groß. Wir werden halb verbeugt. Und wie hoch ist die Preisgestaltung? Ziemlich viel größer, um es rüber zu bringen. Und dann unten hier können wir einen Dummy-Text einfügen. Großes T, groß. Löschen Sie tatsächlich eine Zeile. Und ich denke, das sieht schon viel besser aus. Also kopieren wir es auch für die anderen. Also machen wir das zu einer Gruppe. Und dann können wir vielleicht auch ein Design für dieses ausgewählte machen. Sagen wir, wir könnten die Farbe ändern. Um ziemlich wahrscheinlich zu sein. Vielleicht. Wir fügen ihm einen Streik hinzu. Und B wird ihren Streik machen, um wieder zu benennen. Eigentlich machen wir es auch heller. Ich denke, wir sollten definitiv beißender sein. Vielleicht so. Vielleicht Anti Farbe ein bisschen heller für jeden Kerl. Und jetzt sind wir, Es ist so einfach wie das. Sie können sehen, dass wir Ihre Standard-Radiobuttons genommen haben und sie einfach viel besser aussehen und eine Beschreibung. Und machte es einfach einfacher, sie zu lesen und fügte ihnen ein ziemlich schönes Design-Flair hinzu. 9. Colors: Ein häufiger Fehler, den ich sehe, wenn Leute Benutzeroberflächen entwerfen ist, wenn sie die Symbole in der gleichen Farbe wie ihre Textschriftart machen. Hier können wir sehen, dass wir das Symbol haben, wir haben den Text, aber es sieht einfach nicht richtig aus. Und das Symbol scheint, als wären sie ein bisschen für Sie gewartet. Ich fühle mich, als würden sie etwas zu viel Aufmerksamkeit vom Text selbst nehmen und sie einfach nicht richtig gewichtet. Ein guter Weg und eine sehr einfache Möglichkeit, dies zu beheben, besteht darin, es zu kopieren und einzufügen. Zirkus zeigt Ihnen den Unterschied. Wir machen das Symbol buchstäblich einfach zu einer helleren Farbe als der Text selbst. Es könnte also etwas da sein. - Ja. Ich finde, das sieht ziemlich gut aus. Und dann machen wir es für jeden von ihnen. Also, jetzt, da wir getan haben, wenn jedes der Symbole, können Sie einen massiven Unterschied zwischen dieser Seite sehen und hier entscheiden. Es scheint nur ein bisschen neutraler, ein bisschen gleicher, wenn es um die Farben und die Gewichte geht, obwohl der Text selbst tatsächlich eine dunkle Farbe ist als die Symbole selbst. Also, das ist nur ein kurzer Tipp auf Herstellung oder Armaturenbrett. Symbole und Beschriftungen sehen etwas gleicher aus. 10. Vergrößere Symbole: Also, wenn Sie Symbole in einem Ihrer Designs setzen, der Regel die Symbole, die Sie in ungerade von einem amerikanischen Designer signiert , der bereits ihre Symbole auf eine bestimmte Breite und Höhe entworfen hat. So viele Ikonen von Diakon unterschiedlicher Größe. Aber zum Beispiel sind diese Symbole derzeit bei 64 x 64, aber die ursprüngliche Größe dieser Symbole, oder tatsächlich 32 mal 32. Also habe ich sie hier so vergrößert, dass sie irgendwie auf die Karte passen und mehr aussehen, als würden sie mehr Platz in Anspruch nehmen. Aber das ist eigentlich ein Fehler. Das solltest du nicht tun. Und es ist etwas, das ich viele Junior-Designer tun sehe. Wenn Sie größere Symbole haben möchten. Normalerweise sollten die Symbole mehr Details haben, da sie größer und größer werden. Wenn Sie ein kleineres Symbol vergrößern, vergrößern Sie einfach etwas, das bereits entworfen wurde, um auf einem sehr kleinen Raum zu sein und zu vergrößern, das einfach nicht richtig aussieht. Es fließt nicht wirklich mit dem Design. Und eindeutig wurde die Ikone selbst nicht so gestaltet, dass sie vergrößert werden kann. Also, was wir tun werden, ist, dass wir das nehmen und wir werden diese Symbole auf ihre ursprüngliche Größe ändern. Aber wir wollen auch immer noch, dass sie den Platz Anspruch nehmen, eine, eine gute Menge an Platz auf der Karte selbst. Und es gibt eine wirklich schnelle und einfache Möglichkeit, das zu tun. Also kopieren wir das hier runter. Zum Beispiel, wird das Symbol seine ursprüngliche Größe von 32. Und dann werden wir tatsächlich einen Kreis hinter dem Symbol hinzufügen. Also lass es uns 80 mal 80 machen. Wie sagen wir, ich schwinge es hinter die Ikone. Zentrieren wir es. Und dann zentrieren wir das Symbol darin. Befehle auch. Wir machen den Ikhwan Fäule. Und dann machen wir das in die blaue Farbe, die wir hatten. Eigentlich machen wir es noch ein bisschen mehr. Ich denke, dass ich ein bisschen zu groß sein könnte. Lass es uns 70 mal 70 machen. Das Gebiet. Und wir können bereits sehen, dass das einen massiven Unterschied gemacht hat, weil dieses Symbol 32 von 32, nicht 64 mal 64. Also lasst es uns auch mit den anderen machen. Und da sind wir. Es ist ein kleiner Unterschied, aber ich denke, es macht eine große Veränderung, eine große Auswirkungen des Designs. Denn die meisten Symbole sind nicht wirklich so konzipiert, dass sie kleiner oder vergrößert werden. Sie sind so konzipiert, dass sie die Größe haben, die sie entworfen wurden, und das ist der Sinn von ihnen. Und eine gute Möglichkeit, sie mehr Platz in Anspruch zu nehmen , ist, Formen hinter ihnen hinzuzufügen, wie ich es hier getan habe, muss kein Kreis sein. Sie können es zu einem Quadrat machen, Sie können es zu einem Diamanten machen, ein Sechseck, egal welche Form Sie mögen, wo die Form zu Ihrer Marke passt. Und er hatte nur einen schnellen Weg, um Ihre Symbole in Ihren Designs besser zu machen. 11. Beherrsche den dunklen Modus genau: So übernehmen wir den Modus, der so beliebt ist, wie er ist. Die meisten Leute, was sie tun, ist, dass sie ihre leichte Version der App entwerfen oder sehen, wie Sie hier sehen können. Und dann werden sie einfach ihr Design umkehren. Und es sieht in Ordnung aus. Es ist definitiv funktional. Es sieht nicht richtig aus. Wieder sieht es einfach nicht richtig aus, wenn man es invertiert hat. Und der Grund dafür ist, wenn Sie eine Lichtschnittstelle entwerfen, was Sie normalerweise tun, ist, dass Sie die dunkleren Farben im Hintergrund haben und dann hatte er die helleren Farben im Vordergrund. Das ist es, was Tiefe schafft. Das lässt es so aussehen, als würden die Dinge aus dem Design fallen. Und wenn Sie das mit einem umgekehrten Designer und umgekehrtem Licht tun, sind die tatsächlichen Hintergründe leichter als die Aktionen, die vor Ihnen sind. Also lasst uns das korrigieren. Also werden wir das hier überschreiben. Und dann müssen wir nur noch ein paar Verbesserungen vornehmen und sind wirklich nicht so viele. So werden wir mit dem Hintergrund beginnen wird, dass deutlich dunkler. Und da denke ich, sieht ziemlich gut aus. Wird dies auch darpa machen und muss dunkler sein als die eigentlichen Tasten selbst. Wie sagen Sie, Sie wissen, was bereits, Ich denke, das sieht deutlich besser aus. Und Sie können sehen, was wir getan haben, ist, dass wir die dunkleren Farben im Hintergrund gemacht haben , wo sie sein sollten. Und wir haben die helleren Farben im Vordergrund gemacht, wo sie sein sollten. Und es macht einfach die Dunkelheit könnte viel besser aussehen und einfach viel angenehmer für das Auge, als die tatsächlichen Farben selbst invertiert zu haben.