Wireframe-Magie: Erstellen von Low- und High-Fidelity-UI-Designs

1. Einführung: Hallo zusammen und willkommen zu unserer heutigen Sitzung. Heute werden wir in die faszinierende Welt der Drahtrahmen eintauchen . Was genau ist ein Drahtrahmen? Es ist ein visueller Leitfaden , der das Grundgerüst unserer Anwendung oder einer Website darstellt . Warum sind die Wireframes sehr wichtig? Ja, das ist sehr wichtig, weil es hilft, die Klarheit und Funktionalität der Bildschirme oder Seiten zu verstehen und Funktionalität der Bildschirme , die entwickelt werden sollen Nun, wem werden wir von diesem Kurs profitieren ? Lass es mich dir sagen An erster Stelle stehen angehende Designer, die eine Karriere im UI-Design beginnen An zweiter Stelle stehen Unternehmer. Leute, die planen, ihre eigenen Start-ups zu gründen und ihre eigene Benutzeroberfläche entwerfen möchten. Als nächstes kommt der Grafiker. Wenn Sie Kunst lieben, erweitert dieser Kurs Ihre Tools um eine neue Fähigkeit und ermöglicht es Ihnen, das neue App-Design zu erkunden. Der letzte ist ein Design-Enthusiast. Wenn Sie Design einfach lieben, dann ist dies die unterhaltsame Art , etwas Neues zu lernen Es ist im Grunde ein sehr vielseitiger Kurs, dem jeder profitieren kann, der sich für Design interessiert. Es gibt zwei Arten von Wireframes Low-Fidelity- und High-Fidelity-Wireframes Und in diesem Kurs werden wir sowohl die Wireframes als auch alles praxisnah lernen sowohl die Wireframes als auch alles praxisnah alles 2. Projektvideo: Bei weiterer Projektarbeit werden Sie insgesamt vier Drahtgitter erstellen. diese Weise können Sie sowohl Wireframing-Techniken mit hoher Genauigkeit als auch Wireframing-Techniken mit geringer Fruchtbarkeit für das Drahtmodell mit niedriger Frit-Fertilität anwenden Wireframing-Techniken mit geringer Fruchtbarkeit für das Drahtmodell mit niedriger Frit-Fertilität Schritt eins: Wählen Sie ein App-Konzept aus, das Sie entwerfen möchten Schritt zwei: Beginnen Sie mit den Low-Fidelity-Drahtgittern. Dies sind die ersten Entwürfe Ihres App-Designs. Schritt drei: Skizzieren Sie das grundlegende Layout. Denken Sie daran, konzentrieren Sie sich auf die Funktionalität und nicht auf die Details. Schritt vier: Entwerfen Sie mindestens zwei Low-Fidelity-Drahtrahmen. An zweiter Stelle stehen High Fili Wire Frames. Für den ersten Schritt müssen Sie eines Ihrer Drahtgitter mit niedriger Endlichkeit auswählen, das in ein High-Fidelity-Drahtmodell umgewandelt werden soll umgewandelt Schritt zwei: Fügen Sie zunächst die Farben oder Texturen hinzu. Dadurch gelangen Ihre Designs zu Schritt drei. Erstellen Sie mindestens zwei Highfinity-Wireframes. Nachdem Sie einen Screenshot sowohl der Low-Fidelity- als auch der High-Fidelity-Wireframes gemacht haben, teilen Sie ihn einfach in Ihrer Projektgalerie 3. Lerne, wie du Low-Fidelity-Wireframe mit praktischen Aktivitäten entwirfst.: Hallo zusammen. Lassen Sie uns also, ohne unsere Zeit zu verschwenden, zuerst mit dem Wireframe beginnen Wählen wir dafür das mobile Board aus . Nun, hier können wir das Telefon finden. Wir können es benutzen, iPhone 12, Pro Max. Jetzt haben wir das. Okay. Ich möchte dir diese Seite zum Signieren von Drahtgittern zeigen. Wir werden es genau hier drüben schaffen. Dazu machen wir zuerst die Rechtecke, ich drücke R. Dies wird das erste Rechteck sein Wir können das duplizieren, indem wir den Befehl D drücken. Ja, das geht auch Wir benötigen wieder ein drittes Rechteck. Drücken Sie erneut Befehl D. Hier geht's los. Kannst du das sehen? Wenn ich nach oben gehe, wird mir nicht die richtige Ausrichtung angezeigt. Sobald ich gewechselt habe, sehe ich, dass ich die Farbe hier drüben markiert sehe, was bedeutet, dass sie bereits richtig zentriert ist als diese Farbe. Jetzt können wir die Ränder hinzufügen. Wir können die Rahmengröße von innen festlegen oder wir können sie auch mittig oder außen festlegen. Aber ich finde, draußen sieht es cool aus. Okay. Wir fahren mit dem nächsten fort. Wieder außerhalb von eins bis 34, wieder der dritte , der ein Logging-Name ist, wieder draußen und 134. Okay. Also ich denke, diese Boxen sind ziemlich groß. Machen wir ihn etwas kleiner, diesen 35065. Okay. 31565. EIN 65. Jetzt können wir die Remember Knee hier drüben schreiben und sie die Box auswählen lassen. Also lass uns das machen. Okay, diese Schrift ist also ziemlich okay. Eins können wir tun. Ich habe es einfach kopiert und hier eingefügt, okay? Okay, und das quadratische Kästchen hier drüben, das ist für mich, die Größe 25, 25. Wir können diese blaue Farbe füllen. Das ist eine ziemlich dunkle Farbe. Wir bekommen ein bisschen Licht. Keine Modelle. Okay, ich denke, 30 sind genug. Okay, dieser ist fertig. Und jetzt werden wir den Rest in der nächsten Vorlesung vertuschen . 4. Lerne, wie du Text- und Eingabefelder in Low-Fidelity-Wireframe-Design mit praktischen Aktivitäten einfügen kannst.: Hallo zusammen. Lassen Sie uns nun die Eingabefelder einfügen. Wir benötigen Eingabefelder für E-Mail, Passwort und Login, da wir diese Rechtecke erstellt haben Lassen Sie uns nun den Text einfügen. Siehst du, du kannst Text machen , da ich die E-Mail an die erste Stelle des Telefons setze. Mach ein bisschen Gras draus und der Fund, okay. Dieser Fonds läuft gut, und natürlich die Größe. Das läuft also ziemlich gut. Wir können es wieder kopieren. Wir können das kopieren, okay. Das geht also gut. Jetzt können wir das kopieren und hier einfügen. Okay. Erstelle jetzt ein Passwort und gehe zur Seite, okay? Wie Sie sehen können, haben wir bereits die Ausrichtungslinien. Okay, es ist richtig. Als Nächstes melden wir uns wieder an. Sie können diesen Befehl einfach duplizieren , wenn er in die Mitte gestellt wird, und das ist Ihr Login. Ich finde, es sollte weniger farbig sein. Okay, also ich würde dir vorschlagen, es heller zu machen. Okay, das fühlt sich gut an, und wenn Sie sich erneut anmelden , wird es etwas leichter. Okay. Ich denke, das sollte dunkel sein. Ja, das sieht ziemlich cool aus. E-Mail ist fertig, Passwort-Login, erinnerst du dich an mich? Und jetzt kommt die Zecke. Um das Häkchen zu machen, müssen wir die beiden Rechtecke nehmen , in denen wir uns befinden. Eines wird so aussehen. Ich habe noch einen gewonnen. Okay. Das ist F 25. Okay. Lass es uns rotieren. Entferne das Wasser und wir können uns auch wieder drehen. Das sieht cool aus, oder? Okay, wenn du willst, können wir das verlängern. 27 werden schauen. Kay, sieh cool aus. Wählen wir das aus und geben der G-Gruppe den Befehl, dass es nicht weiß ist. Hab es. Ist das erledigt? Natürlich müssen wir es kleiner machen. Nein, ich finde, dieser Stick sieht nicht so Siler aus, also sieht er cool aus Äh, das wird also die Farbe Weiß T sein die Farbe . Also, jetzt ist die Anmeldung per E-Mail, Passwort vergessen, erledigt Lassen Sie uns noch einmal mit dem Login fortfahren. Also habe ich Befehl D ausgeführt. Das ist Login, die Größe, für die ich mich entscheide. Ich denke, es sollte größer sein. Das ist erledigt. Okay. Machen wir die Seite der drei Linien 75 mal 12. Lassen Sie uns zwei mal 1,2 duplizieren und die Wathosen entfernen. Setzen wir die Farben ein, setzen wir auf mehr Licht, den Schatten. Ich denke, das ist ziemlich größer. Lass uns 60 mal 50 draus machen. Sehen Sie, in der nächsten Vorlesung werden wir die restlichen Dinge erledigen . Danke. 5. Lerne, wie du weitere Details in High-Fidelity-Wireframe mit praktischen Aktivitäten hinzufügen kannst: Wie wir alle wissen, haben wir es bis hierher geschafft. Auf die gleiche Weise können wir einfach alles kopieren und einfügen. Okay, ich habe vergessen, sie zuerst zu gruppieren. Okay? Sie können auf der linken Seite ein Rechteck sehen, vier kopieren, drei kopieren und ein Rechteck. Wir können einfach den Befehl G gruppieren und ihn dann als Seitenleiste benennen. Okay? Da wir das gemacht haben, wird es sehr einfach sein, es einfach zu kopieren und hier einzufügen. Und wir können ihm einfach eine schöne Farbe geben , die zum Hintergrund passt. Lassen Sie uns natürlich die Farbe auswählen. Gleiche gilt für den zweiten, dasselbe gilt für den dritten. Ähnlich können wir ein Suchsymbol verwenden. Kopiere es einfach hier drüben. Und einfügen. Okay, hier drüben ist Paste, also können wir es einfach verschieben, wir können es weißer machen, natürlich sieht es schöner aus. Und auch die Grenzen wieder vergrößern. Nimm das mehr Weiß. Und die Grenzen, los geht's. Ups, ich wusste nicht, dass wir hier eine Seitenbar haben hier eine Seitenbar haben Sie haben es einfach gelöscht. Passiert, wenn wir etwas kopieren. Als ob wir nicht wissen, dass wir in irgendeinen Teil dieser Skizzenleinwand hineinkommen können . Also das ist in Ordnung. Danach musst du nur noch sehr vorsichtig sein. Also los geht's. Ich denke, das ist jetzt erledigt, also kann ich, und lassen Sie mich überprüfen, ob es richtig ausgerichtet wurde. Okay, also ich denke, das sollte größer sein und ich finde, dass die Größe mehr oder weniger so sein sollte und die Größe sechs ergeben sollte. Okay. Das sieht cool aus. Ich denke, entfernen Sie das, es wird verständlicher sein, je nachdem, wie wir es tun können. Okay, und suche auch. Okay, das ist erledigt. Jetzt schreiben wir den Login in den Text. Wir können eine Sache machen, wir können die Größe vergrößern oder so. Ja, das geht gut. Sogar 45 gehen gut, oder? Ja. Wir können auch die Schriftart ändern. Okay, das sieht netter aus. Also lass uns mit den Füllungen weitermachen. Und wir können auch die schöne Farbe auftragen. Wir können die Größe erhöhen. Ich finde, das sieht ziemlich gut aus. Eins können wir tun. Wir können dieses Rechteck genauso gruppieren wie diesen E-Mail-Eingabebefehl. Wir können es auch als E-Mail benennen. Wir können das gruppieren, gruppieren und wir können es als Passwort benennen. Das war eine E-Mail-Schaltfläche, richtig? Diese Passwort-E-Mail. Und das ist wieder Anmeldung, wir können diese Anmeldeschaltfläche mit zwei Namen gruppieren . In Ordnung, also diese drei sind fertig. Jetzt können wir als Nächstes weitermachen , nämlich „Denk an mich, hast dein Passwort vergessen“. Sie haben noch kein Konto, melden Sie sich an. Gehen wir also zur nächsten Vorlesung. Behandle den Rest in der nächsten Vorlesung. 6. Zeit, unser erstes High-Fidelity-Wireframe-Design zu fertigen: Okay. Wie wir sehen können, ist diese Seite fertig. Ich würde sagen, die Anmeldeseite ist komplett fertig. Okay, eine Sache ist immer noch die Grenze. Lass uns den Rand machen, lass uns die Verlaufsfarbe machen. Das wird schöner aussehen. Ich würde es vorziehen, auf einer Seite hellgrün zu sein. Was denkst du? Sollen wir dann dasselbe nehmen? Passwort. Okay. Ich denke, wir sollten uns für diese andere Farbe entscheiden . Auf dieser Seite wird es grün und auf der anderen Seite rot sein. Okay, Grün und Rot. Versuch es mit einer anderen, ja, ich denke, wir sollten es mit einer anderen Farbe versuchen, anstatt ich werde es mit etwas Hellgelbem versuchen. Okay. Ich glaube, das ist gelb und es wird, und wir können die Grenze nicht sehen. Lass uns die andere Farbe nehmen. Okay, ich finde, das sieht himmelblau aus. Okay, los geht's. Von Sang Button. Jetzt glaube ich, wir sind fast fertig. Alles muss nur überprüft werden, okay, E-Mail protokollieren, Passwort, alles ist erledigt. Wie Sie sehen können, gibt es einige Unterschiede zwischen dem, was ich zuvor gemacht habe, und dem hier. Und das ist absolut in Ordnung. Wenn Sie möchten, dass ich dasselbe noch einmal mache, kopiere ich einfach diesen Text und mache ihn über dem Hintergrund. Jetzt sind wir im Laufe der Zeit, wir haben gesehen, dass dieser Hintergrund breit ist, dieser Text wird schwarz. Aber da wir einen schwarzen Hintergrund haben, habe ich diese weißen und hellen Farben als Text beibehalten. Also was sieht nett aus. Ja, hier ging es nur um High-Fidelity. Und lass uns zur nächsten Vorlesung gehen, in der ich dir die Anmeldeseite beibringen werde. Okay, wir sehen uns in der nächsten Vorlesung. 7. Erfahren Sie, wie Sie mit praktischen Aktivitäten ein weiteres High-Fidelity-Wireframe-Design erstellen: Hallo und willkommen zu meinem Vortrag. In dieser Vorlesung beginnen wir mit der nächsten Seite. Lass mich dir jetzt eine Sache zeigen. Wir beginnen mit der zweiten Seite, der Registrierung. Jetzt müssen Sie verstanden haben, dass dies auch eine sehr einfache Aufgabe ist, die Sie erledigen können. In Ordnung, fangen wir an, dieselbe Registrierungsseite zu erstellen. Gehe wieder zur Zeichenfläche. Wählen Sie iPhone 12, Pro Max. Los geht's. Machen Sie den Hintergrund jetzt einfach schwarz. Zuerst fangen wir mit den Rechtecken an, okay? Dupliziere sie einfach. 123, also mach 300 draus und mach 16 draus. Okay? Wir können diesen Preis duplizieren 1.3 Also los geht's. Okay, wir sind also nicht verpflichtet, all diese Abstände zu überprüfen , wenn wir so vorgehen Wenn wir näher kommen, erfahren wir, wie der richtige Abstand ist. Ebenso zeige ich dir, dass 1 Minute die zweite ist, so wie diese, dann kommt sie und stoppt sie über 58. Okay, jetzt bekommen wir die 58. Die Größe der Rechtecke beträgt 300 mal 16. Fügen wir nun den Text ein. Okay, lassen Sie uns auch diesen Teil abschließen. Lass uns auf D kommen, lass uns 2060 draus machen. Jetzt kommt das in den Mittelpunkt. Wir können das in der hellen Farbe einfärben. Auch hier würde ich gerne dunkelrot wählen und der Rest wäre weiß. Okay, wenn du willst, kannst du auch die Grenzen machen. Ebenso müssen Sie zuerst das Wort erhöhen. Dann habe ich ausgewählt , welcher lineare Gradient ist, den ich am meisten bevorzuge. Die Farbe, die ich auswähle, ist wiederum bläulich. Sollte hell sein, da der Hintergrund schwarz ist Die Farben für die Rechtecke oder Farbverläufe, die wir verwenden , sollten hell sein Gehen wir zur orangefarbenen Seite. Ja, dadurch ergeben sich für das nächste Grün wieder die hellsten, hellsten Seiten Ja, das macht es richtig. Ja, ich habe es geliebt. Geben Sie jetzt den Text ein, der wiederum ein sehr einfacher Teil von T ist , und dann können Sie einfach Tre schreiben. Ordnung. Platziere es in der Mitte. Stellen Sie die Größe 50 her. Okay, behalte 40, glaube ich. Ja, das sieht gut aus. Sie können sogar die Schriftarten ändern. Ich würde ein schwarzes bevorzugen. Ja, das ergibt die dunkle und dicke Version. Lassen Sie uns nun Eingaben wie Name, E-Mail-Passwort und Passwort bestätigen sowie uns erneut anmelden. Ich würde sagen, kopieren Sie das und fügen Sie es hier ein. Okay. Nein, habe ich nicht. In Ordnung. Okay. Also ich würde sagen, du musst duplizieren und du musst das duplizieren und wir können das draufsetzen und es einfach aufschreiben. Melde dich an. Okay. Ich finde, das sieht sehr dick und dunkel aus, cool. Das sieht nett aus. Jetzt können wir wieder den Text ihres richtigen Namens eingeben. Aber auch hier werde ich mich für diesen entscheiden und auch die Größe sollte in Ordnung sein. 30 oder ich schätze 25. Ja, ich finde das in Ordnung. Ja, sein Name, das wird E-Mail sein. Das wird ein Passwort sein. Diese Schicht ist zu richtig ausgerichtet. Okay. Und dann nochmal, Befehl, tut mir leid, befehlen Sie das doppelte Bestätigungskennwort. Jetzt ist das erledigt. Ich denke alles wurde richtig eingestellt, wie der Registrierungsname, das E-Mail-Passwort, das bestätigte Passwort, alle werden ordnungsgemäß verwendet. Jetzt ist das nächste Ding Pfeil. Okay? Also lasst uns den Pfeil nehmen. Dafür brauchen wir mir wieder ein Rechteck. Das andere kann das einfach duplizieren. Okay, los geht's. Entfernen Sie zuerst diese Farbe, machen Sie sie weiß. Ich denke, das ist pink, oder? Okay, das sieht cool aus. Und wieder die Grenzen. Entferne die Grenzen. Okay. Wählen Sie das jetzt auch aus. Es tut uns leid. Wählen Sie das jetzt aus und drehen Sie es einfach. Sieh netter aus. Mach einfach die runden Ecken und auch das macht Spaß. Okay, jetzt finde ich es ziemlich gut. Wählen Sie alle drei aus. Machen Sie einfach den Befehl G-Gruppe und dann den Rechtspfeil. Okay, jetzt ist dieser Pfeil auch fertig. Wenn du willst, kannst du es größer machen. Du kannst auch einfach die Linien oder so um 21 Grad verlängern , dann sieht es gleich aus. Man kann nochmal 20 Grad notieren. Und du kannst auch mehr Ecken und runde Ecken machen und sie einfach richtig einstellen. In Ordnung, ich mache das auch etwas runder. Ja, jetzt geht es gut, los geht's. Okay, jetzt sind wir damit fertig, dieser Pfeil ist fertig, er ist richtig ausgerichtet. Ich finde diese Farbe gut. Sie können die Farbe Ihrer Wahl angeben, aber ich denke nicht, dass sie benötigt wird. Es sieht ziemlich cool aus. Ja, diese Seite ist fertig. 8. Schlussbemerkung: Herzlichen Glückwunsch und ergänze diesen Wire-Frame-Kurs. Jetzt verfügen Sie über die sehr coolen Fähigkeiten sowohl mit Low-Fidelity- als auch mit High-Fidelity-Wireframes Außerdem hast du sowohl mit dem Low-Filly- als auch mit dem High-Filly-Wireframe praktische Übungen gemacht sowohl mit dem Low-Filly- als auch mit dem High-Filly-Wireframe Am wichtigsten ist, dass Sie das nötige Selbstvertrauen gewonnen haben , um die neuen Designherausforderungen zu bewältigen Aber warte, es ist noch nicht vorbei. Fangen Sie einfach an, Ihre UI-Designs zu erkunden und zu üben. Dieser Kurs mag vorbei sein, aber Ihre Designreise hat gerade erst begonnen.