Verbesser Deinen UX-Design-Workflow: Skizziere ein Interface für Deine Mobilapp | Dima Steiteyeh | Skillshare
Drawer
Suchen

Playback-Geschwindigkeit


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

Verbesser Deinen UX-Design-Workflow: Skizziere ein Interface für Deine Mobilapp

teacher avatar Dima Steiteyeh, UX Designer/Front-end Developer

Schau dir diesen Kurs und Tausende anderer Kurse an

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

Schau dir diesen Kurs und Tausende anderer Kurse an

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

Einheiten dieses Kurses

    • 1.

      Einführung

      1:21

    • 2.

      Warum wir Skizze

      1:53

    • 3.

      Grundformen skizzieren

      4:44

    • 4.

      UI-Elemente skizzieren

      10:31

    • 5.

      Interaktionen skizzieren

      10:00

    • 6.

      Vielen Dank

      0:48

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

Von der Community generiert

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

344

Teilnehmer:innen

--

Projekt

Über diesen Kurs

Wenn du eine Anwendungsidee hast und es deinen Teams oder Kunden oder sogar deinen Freunden erklären kannst, werden alle ein anderes Bild in ihrer Fantasie deiner Idee haben.

Skizze

Einige of würden sich denken, dass der Skizze stark sein würde, weil sie sich „nicht zeichnen können“, aber das Ding: man muss nicht ein Künstler:in sein, um deine Ideen skizzieren zu können!

In diesem Kurs lernst du, wie du deinen UX verbessern kannst, indem du eine Benutzeroberfläche für deine mobile Anwendung skizzieren kannst.
Dieser Kurs ist ideal für Anfänger in UX geeignet, die eine grobe Idee oder bestimmte Anforderungen für ihre Anwendung haben.
Vorkenntnisse oder Kenntnisse für diesen Kurs

Triff deine:n Kursleiter:in

Teacher Profile Image

Dima Steiteyeh

UX Designer/Front-end Developer

Kursleiter:in

I am a UX/UI designer and Front-end developer.

I enjoy combining the art of design with logic to create functional and responsive layouts.

Vollständiges Profil ansehen

Level: Beginner

Kursbewertung

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

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

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

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

Lerne von überall aus

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

Transkripte

1. Einführung: wenn Sie eine Anwendungsidee oder eine Funktion haben, um zu versuchen, es zu erklären, Ihr Team für Kunden oder sogar Ihre Freunde. Jeder wird ein anderes Bild in seiner Phantasie von Ihrer Idee haben, und manchmal kann dies zu Missverständnissen führen, und es kostet einige Zeit und Mühe zu liefern Die Idee, die Sie im Sinn haben Skizzieren ist ein grundlegender Bestandteil des X Designer-Prozess und Herr Practice. Für Designer gibt es Skizzen, die Sie vorschlagen können, erforscht und Ihre Ideen in den frühen Phasen des Designprozesses zu kommunizieren . Mein Name ist Dimas Data und um, ein UX-Designer und anders und Entwicklung, und ich werde Sie durch diese Klasse führen, von der Skizzierung grundlegender Formen bis hin zu Skizzieren Interaktionen und Navigation. Du darfst nicht zeichnen. Das ist in Ordnung. Du musst kein Künstler sein. Imex fängt für gute Ideen. Am Ende dieser Klasse können Sie Benutzeroberflächen für Ihre Anwendung skizzieren Für die Klasse des Projekts skizzieren Sie eine einfache Benutzeroberfläche für eine mobile Anwendung in Nachrichten, um eine Lebensmittelzustellung zu skizzieren. für Ihre Lieblings-Restaurants. Weitere Informationen über das Projekt finden Sie im Projektbereich 2. Warum wir Skizze: Warum also eine Skizze machen? Werfen wir einen Blick auf dieses Beispiel. Dies sind einige Skizzen, die ich für meinen Port-Wert der Website gemacht habe, und wie Sie es sehen können, nur Bildschirm enthält eine bestimmte Komponenten oder Ideen. Also im Grunde verwende ich die Skizze, um Ideen zu generieren, bevor ich mit Design- und Entwicklungsschritten begonnen habe, können Sie aufschreiben, die Features sind die Komponenten jeder Skizze beim Wurf so viele Ideen, wie Sie wollen. Also hier habe ich Ideen generiert. Ich traf verschiedene Skizzen für jede Seite, um das beste Design unter ihnen auszuwählen und es anzuwenden. Sie können die Skizzen für Brainstorming-Sitzungen mit Ihrem Team verwenden, um Ideen zu generieren vorgeschlagen und Ideen mit Ihren Kunden zu kommunizieren. Lassen Sie uns nun über die Werkzeuge sprechen, die Sie in dieser Klasse benötigen. Grundsätzlich brauchen wir einen Stift. Ich sollte für ein Ticket sein. Linien sind dieser Zwillingspilot? Wie können Sie einen Bleistift verwenden? Wir werden auch Mikrofone verwenden. Wenden Sie etwas Farbe für Knöpfe an oder haben Sie Ihre Aufmerksamkeit auf bestimmte Elemente getan. Die zweite Sache, wir mit mir, das ein paar Papiere. Manchmal skizziere ich in meinem unbestrittenen Skizzenbuch, aber in dieser Klasse werde ich verwenden, um ein vier Papier zu planen, das Sie das gepunktete Papier verwenden können, das ich im Klassenmaterialabschnitt zur Verfügung gestellt habe . Ich habe auch einige Vorlagen enthalten. Sie können sie herausbringen und sie zum Skizzieren verwenden. Sie sind sehr nützlich, und wir sparen Ihre Zeit und helfen Pedro Aktien genauer. Wir werden einige Haftnotizen in für Interaktionen in der kommenden Brille verwenden. 3. Grundformen skizzieren: Beginnen wir damit, die grundlegenden Formen zu skizzieren, aus denen jedes Design besteht. Ich werde mich aufwärmen, indem ich gerade Linien mache. Lassen Sie uns eine Skizze, die Ränder oder die Konstruktionslinien von einem Kugelschirm. Wie Sie sehen können, schmeiße ich Rückgänge, und sie müssen nicht perfekt sein. Ihren Arm und Ihren Stift in Erwägung, nicht mit den verfügbaren Orestes, sondern mit der Schulter zu bewegen . Dies ermöglicht es Ihnen, nicht mehr und geradlinige Linien zu tun. Wenn Sie Schwierigkeiten bei einer geraden Linie in alle Richtungen haben, schützen Sie das Papier, um leicht eine Linie in die Richtung zu zeichnen, die Sie am besten für Sie finden. Sie müssen bedenken, dass Skizzen schnell und einfach sein sollten, da wir alles tun Ideen oder Konzepte. Lasst uns ein paar Kreise werfen. Kreise zu zeichnen ist schwieriger. Ich empfahl, den Kreis zwei- oder dreimal in die Luft zu werfen, bevor ich ihn auf das Papier warf. Üben, üben und üben Sie diese Linien und Kreise werfen. Wenn Sie ein Element wie eine Schaltfläche anklickbar machen möchten, können Sie es etwas Schatten geben, um es hervorzuheben. Lassen Sie uns einen Knopf werfen, der senden bleibt und ihm den Schatten geben, den Sie eine große Farbe anstelle von Schwarz verwenden können . Wie Sie sehen können, hebt es hervor und sieht ein anklickbar aus. Lassen Sie uns einen anderen Knopf werfen, und es wird sagen, unterbreitet, Geben Sie ihm den Schatten und Hit Ego. Es hebt sich hervor und erklärbar. Schraffur ist eine weitere Technik, die verwendet wird, um Abkühlungseffekte zu erzeugen, indem eng angeordnete Linien Nehmen wir ein Beispiel, das ich beiseite ziehen werde, was bedeutet, dass Overlays oben aus dem Menü. Ich würde einige Gegenstände innerhalb der Seite Geld hinzufügen. Lassen Sie uns eine gerade Linie zeichnen, die seine Flasche in das Seitenmenü und dann begann werfen eine schnelle Antwort die agonalen Linien nebeneinander, um den Auswurf Effekt zu erzeugen. Also, wie Sie sehen können, ist das Schraffieren eine einfache Technik, die dazu beiträgt, Elemente hervorzuheben. 4. UI-Elemente skizzieren: in dieser Lektion werde ich Ihnen zeigen, wie Sie I Elemente wie Texte, Bilder, fremde Steuerelemente und einige von den häufig verwendeten Icons skizzieren Bilder, . Also lasst uns damit beginnen, sie auf meinen Bildschirm zu werfen. Skizzieren behoben ist ziemlich einfach, nur dass es einige gibt, die verinnerlicht sind, um einen Text darzustellen. Sie können den echten Text in Ihnen verwenden. Warum, wenn Sie die Aufmerksamkeit darauf lenken müssen, oder nur ein wenig horizontale Linien Wenn Sie keinen bestimmten Text haben, manchmal werden wir zu Gefängnistexte als Wellenlinie oder seine genau wie diese. nun Wenn Sienuneine Überschrift in Richtung eines Titels skizzieren möchten, können Sie dies tun, indem Sie den richtigen Winkel zeichnen und ihn mit einer Zickzacklinie füllen. Oder Sie können einfach einen Marker verwenden, um das Rechteck auszufüllen. Nein, lassen Sie uns Bilder skizzieren. Ich würde nur ein Rechteck zeichnen, und dann würde ich zu den agonalen Linien werfen, die durch das Rechteck laufen. Lassen Sie uns ein paar weitere Bilder skizzieren, manchmal Bilder skizzieren, und dieser Weg könnte langweilig sein, so dass Sie einfache Varianten von Objekten werfen können. Zum Beispiel würde ich Bilder darstellen, indem ich Berge und den Sand auf die Oberseite wirft. Formulare werden verwendet, um Informationen von den Benutzern zu sammeln. Wir verwenden sie und die Registrierungsseiten aktualisieren ihren Einfluss und so weiter. Ich werde sie auf dem Bildschirm zeichnen. Und bevor ich mit dem Skizzieren begann, würde ich nur den Titel der Seite hinzufügen, so dass ich sie, wenn ich eine Reihe anderer Skizzen habe, leicht finden kann. Sie können ein wenig Platz zu anderen Titel auf anderen Notizen lassen, wie das Datum, Also werde ich mit dem Zeichnen eines Kreises beginnen. Dies würde bedeuten, dass der Benutzer darauf klicken kann, um sein Profilbild zu aktualisieren. Dann würde ich ein Rechteck zeichnen. Dies würde ein Eingabefeld darstellen, das der Benutzer fühlen kann. Ich gebe ihm einen Platzhalter, der seinen Namen sagt. Nicht ist das, im Gegensatz zu Knöpfen, haben wir ihm keinen Schatten gegeben. Eingabefelder können verwendet werden, um Informationen wie Name für Nummer und Passwort zu füllen. Jetzt werde ich ein weiteres Rechteck für den Benutzer zeichnen. Es ist wie die Gegend aus einer Reihe von Bereichen. Also, was wir tun werden, ist, auf Auto so zu ziehen. Dieser Brief zeigt an, dass dies ein Dropdown-Menü ist, das mehrere Elemente zur Auswahl hat Lassen Sie uns ein anderes Feld werfen, verteidigen Sie die Benutzeradresse. Die Adresse kann Building Number Street Name andere Informationen enthalten, die ein Steuerelement ein bisschen größer als Eingabefeld erforderlich , die ein Textbereich ist. Jetzt werde ich Ihnen zeigen, wie Sie andere Länder skizzieren, wie Kontrollkästchen, Optionsfelder und Schaltflächen. Kontrollkästchen sind einfach. Nur eine dramatische Tengan auf der kleinen Zecke innen. So wie das. Kontrollkästchen argumentiert, dass mehrere Elemente nicht zu zeichnen ein Optionsfeld zog einen Kreis, dann ein weiterer kleiner Kreis in ihm. Optionsfelder argumentiert, dass nur ein Element angezeigt wird. Nun, wenn Sie die Option ein- und ausschalten möchten, können Sie Tasten wechseln, zum Beispiel, hat große Benachrichtigungen ein- oder ausgeschaltet. Wir präsentieren es so auf ovaler Form auf dem Kreis. Im Inneren können Sie es wie dieses Rechteck und ein anderes kleines Rechteck im Inneren darstellen. Du kannst drauf schreiben. Ich gebe ihm etwas Farbe. Ich werde noch einen zeichnen, um den Bürostaaten zu zeigen. Jetzt lass uns unten. Das ist ein Safe und gibt ihm etwas Farbe. Und der Schatten. Jetzt haben wir eine Seite auf Tod Benutzerdetails. Jetzt werde ich Ihnen zeigen, wie Sie einige von den häufig verwendeten Icons skizzieren. Symbole sind einfach. Die Darstellungen von realen Lebensobjekten. Ich werde damit beginnen, das Suchfeld zu tun. Hier ist also das Suchsymbol. Es ist nur ein Kreis auf der kurzen Linie. Das ist es, was sie tun. Ein weiterer, ein Kreis. Und dann würde ich gern. Es ist ziemlich einfach. Das nächste Icon, das wir zeichnen werden, ist der User Wiker, also bin ich nur um einen Kreis zu werfen. In der Innenseite. Es wird einen kleineren Kreis, der den Hinweis darstellen, dann nahm Linien einen Körper darstellen. Gehen wir dorthin mit noch ein paar Mal Grube und der Körper. Jetzt lass uns auf die Straße gehen. Das Standortsymbol. Werfen Sie einfach eine Ballonform auf einen kleinen Kreis hinein. Genau so. Sie nicht nicht WerfenSie nicht das Symbol, das zum Öffnen des Seitenmenüs verwendet wird. Dieses Symbol in der Schule heißt es Humber Good Menu, weil es wie Hamburger darauf aussieht. Kämpfe einfach zu drei parallelen horizontalen Linien. Schließlich werden wir wieder als nächstes nach oben und unten Symbole wie diese wachsen. So wie Sie alles im Jahr, das ich Skizzen sehen kann, einschließlich Symbole, ist nur eine Kombination aus Linien und Kreisen 5. Interaktionen skizzieren: Manchmal möchten Sie Interaktionselemente wie QuickInfos, Modelle, Seitenmenüs oder andere Elemente verwenden Modelle, , aber Sie möchten nicht den gesamten Bildschirm neu zeichnen. Dafür werden wir Haftnotizen oder kleine Papiere und Stifte verwenden. Wenn Sie es auf einer Pinnwand anheften möchten. Ja, ich werde verschiedene Farben und Größen verwenden, um verschiedene Arten von Elementen darzustellen. Lasst uns eine Skizze Mahlzeit bestellen Pitch. Ich werde den Titel hier schreiben. Das erste, was wir haben werden, ist ein Bild von der Mahlzeit auf, dann sein Name. Es muss zum Beispiel gut sein . Dann haben wir ein Dropdown-Menü für den Benutzer, um die Soße auszuwählen. Sie wollen dem Arbeiter gegenüber handeln. Ich werde diese Haftnotiz verwenden, um die möglichen Quelloptionen zu schreiben. Zum Beispiel, nicht Sauce Tomate, unsere spezielle Soße. nun an, Dies zeigtnun an,dass, wenn der Benutzer auf die Dropdown-Schaltfläche klickt, diese Optionen angezeigt werden. Wenn Sie also erklären möchten, was durch Klicken auf bestimmte Elemente ausgelöst wird, können Sie diese Methode verwenden. Das nächste, was wir in diesem Bildschirm haben, ist ein Textbereich, um Notizen hinzuzufügen, undeine Information. Ich kann OK, also wenn der Benutzer überhaupt darauf klickt, werden sie angezeigt. Ich werde es benutzen. Dies ist kleiner, klebrig, bemerkt Andre. Informationen werden angezeigt, zum Beispiel nicht, weil dies würde der Benutzer zu wissen, welche Nase in den Textbereich eingeben. Jetzt haben wir einen Button, um dieses Meeting zu bestellen. Ich werde ihm die Farbe und den Schatten geben. Wenn Sie auf diese Schaltfläche klicken, wird eine Nachricht entweder eine sexistische Nachricht angezeigt. Ich habe eine Fehlermeldung darauf erhalten wird als ein modernes oder ein Pop-up auf dem Bildschirm für die Erfolgsmeldung angezeigt. Ich war wirklich diese grünen Haftnotizen. Es würde einen Titel, einen Text und die Schaltfläche enthalten , um die Bestellrücksendungen anzuzeigen. Also, im Falle von Sexisten, dies muss, wie Sie jetzt für die Nachricht angezeigt werden. Ich werde diese Karanja Haftnotizen verwenden. Es ist mit Contain a Titan, etwas Text und über Interview-Details über diesen Bereich. Diese Methode ist also hilfreich bei der Generierung von Ideen und Brainstorming-Sitzungen oder wenn Sie Logik und Verhalten für die Entwickler in Ihrem Team erklären möchten. Nein, ich werde dir zeigen, wie du Taten erklären kannst. Dann, warum sie es verwenden, wie ein Klicken Schieben, Vergrößern und Verkleinern. Nehmen wir ein Beispiel. Dies ist der Wachfisch, und es enthält die Elemente, die der Benutzer auf der Schaltfläche bestellen möchte, die etwas Text hat. Er hat ihn eingecheckt. Die Karte enthält ein Bild und den Text, und wenn der Benutzer das Element nach links schiebt, wird eine Schaltfläche angezeigt. Lasst uns ein Symbol machen. Hat er die Ikone bewegt? Wenn der Benutzer darauf klickt, wird der Gegenstand vom Gericht entfernt. Jetzt würde ich eine Hand und ein Auto werfen, um die Gleitrichtung zu zeigen, also wenn sie es benutzen, ist es Lügen. Der Artikel auf der linken Seite. Die Schaltfläche „Entfernen“ wird angezeigt. Gehen wir weiter und machen eine andere Hand. Dies stellt eine lange Presse dar. Jetzt wirf es mal hoch. Und dieses Mal werde ich das Zoomen in Aktion wieder demonstrieren. Ich würde aus der Hand, dann zwei andere zeigte und kontrastierende Richtungen wie diese. Dies erklärt das Zoomen in Aktion auf der Karte. Wenn Sie es werfen Dosen herausfordernd finden, können Sie verfolgen oder kopieren Handbild. Oder Sie können Anmerkungen schreiben, um Verhalten oder Gesten zu erklären. Das letzte, was ich Ihnen in dieser Lektion zeigen werde, ist, wie Sie Navigationen skizzieren. Nehmen wir ein Beispiel, das ist dies eine Restaurant-Menü-Seite darauf ist. Enthält bedeutet, dass jeder Mittelwert in diesem Menü ein Bild hat, einen Namen auf seinem Preis. Wenn ich auf eine Mahlzeit klicke, würde ich auf eine andere Seite geleitet werden, die viele Details wie Bild, Name, Beschreibung, vielleicht eine Reihe von anderen Bildern dieses bedeuten Onda Button, um es zu bestellen. Also, um die Navigation zu zeigen, werde ich auf Auto zeichnen und ihm den Schatten geben. Nicht nur, dass dieses Foto nicht der Teil der U I ist. Es ist nur ein Indikator, um die Navigation anzuzeigen. 6. Vielen Dank: Danke, Jungs, und ich hoffe, Sie haben diese Klasse genossen. Wenn Sie Fragen oder Gedanken haben, lassen Sie es mich bitte in der Rezension Abschnitt über wissen. Denken Sie daran, dass das Skizzieren darum geht, Ideen herauszuholen. Es ist der schnellste Weg, um zu erforschen und mit anderen zu teilen und Feedback zu erhalten. Ich würde gerne sehen, wie Ihre Idee zu Skizzen beginnt. Wenn Sie Hilfe beim Erstellen Ihres Projekts benötigen, können Sie sich die vorherigen Videos ansehen und Notizen machen, und daher können Sie die beigefügten Druckofendokumente für ein wenig mehr Hilfe verwenden. Machen Sie Fotos von Ihrem Prozess und teilen Sie ihn in Ihrem Projekt, um andere zu inspirieren und Feedback zu erhalten .