Améliorez votre flux de travail de conception UX : Esquissez une interface pour votre application mobile Sketch | Dima Steiteyeh | Skillshare
Menu
Recherche

Vitesse de lecture


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

Améliorez votre flux de travail de conception UX : Esquissez une interface pour votre application mobile Sketch

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

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Leçons de ce cours

    • 1.

      Introduction

      1:21

    • 2.

      Pourquoi faisons-nous à croquis

      1:53

    • 3.

      Ébaucher des formes de base

      4:44

    • 4.

      Ébaucher des éléments UI

      10:31

    • 5.

      Ébaucher les interactions

      10:00

    • 6.

      Merci

      0:48

  • --
  • Niveau débutant
  • Niveau intermédiaire
  • Niveau avancé
  • Tous niveaux

Généré par la communauté

Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.

345

apprenants

--

projet

À propos de ce cours

Si vous avez une idée d'une application et que vous essayez de l'expliquer à votre équipe ou vos clients, ou même vos amis, tout le monde aura une image différente dans son imagination, et cela peut conduire à une méconnaissance et vous to des temps et l'effort afin de livrer l'idée que vous avez à l'esprit.

L'ébauche est une excellente méthode qui vous aidera à communiquer vos idées et vous montrera la mise en page et la fonctionnalité que votre application ou votre concept.

Certains Certains concepteurs UX pensent que la l'étape, les croquis les étapes qui seront difficiles, mais le sont : vous n'avez pas besoin d'être un artiste pour croquer vos idées.

Dans ce cours, vous apprendrez à améliorer votre flux de travail UX en esquissant une interface utilisateur pour votre application mobile.
Ce cours s'adresse aux débutants de l'UX qui ont une idée approximative ou des exigences spécifiques pour leur application.
Aucune exigence ou une connaissance préalable dans ce cours, n'est simplement l'un du stylo et du papier et commencerons.

Rencontrez votre enseignant·e

Teacher Profile Image

Dima Steiteyeh

UX Designer/Front-end Developer

Enseignant·e

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.

Voir le profil complet

Compétences associées

Design Design UI/UX Design pour mobile
Level: Beginner

Notes attribuées au cours

Les attentes sont-elles satisfaites ?
    Dépassées !
  • 0%
  • Oui
  • 0%
  • En partie
  • 0%
  • Pas vraiment
  • 0%

Pourquoi s'inscrire à Skillshare ?

Suivez des cours Skillshare Original primés

Chaque cours comprend de courtes leçons et des travaux pratiques

Votre abonnement soutient les enseignants Skillshare

Apprenez, où que vous soyez

Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.

Transcription

1. Introduction: lorsque vous avez une idée d'application ou une fonctionnalité sur pour essayer de l'expliquer, votre équipe pour les clients ou même vos amis. Tout le monde aura une image différente dans son imagination hors de votre idée, et parfois cela peut conduire à un malentendu, et cela coûtera du temps et des efforts pour livrer L'idée que vous avez à l'esprit l'esquisse est une partie fondamentale de la X et M. Practice. Pour les concepteurs, il y a des croquis que vous pouvez proposer explorés et communiquer vos idées dans les premières étapes du processus de concepteur. Mon nom est Dimas Data et um, un designer UX et différent et de développement, et je vais vous guider à travers cette classe de l'esquisse de formes de base à des interactions d'esquisse et de la navigation. Tu ne peux pas dessiner. C' est très bien. Tu n'as pas besoin d'être un artiste. Imex attrape de bonnes idées. À la fin de cette classe, vous serez en mesure d'esquisser les interfaces utilisateur pour votre application Pour la classe de projet, vous allez esquisser une interface utilisateur simple pour une application mobile dans des messages pour esquisser une application de livraison de nourriture pour vos restaurants préférés. Vous pouvez en savoir plus sur le projet dans la section projet 2. Pourquoi faisons-nous à croquis: Alors pourquoi faire un croquis ? Jetons un coup d'oeil à cet exemple. Ce sont quelques croquis que j'ai fait pour ma valeur de port du site, et comme vous pouvez le voir, juste écran contient un composants ou des idées spécifiques. Donc, fondamentalement, j'utilise l'esquisse pour générer des idées avant de commencer les étapes de conception et de développement, vous pouvez écrire les fonctionnalités sont les composants de chaque esquisse sur jeter autant d'idées que vous voulez. Donc ici, je générais des idées. J' ai rencontré différents croquis pour chaque page pour choisir le meilleur design parmi eux et l'appliquer. Vous pouvez utiliser les croquis pour des séances de remue-méninges avec votre équipe pour générer des idées sont proposées et communiquer des idées avec vos clients. Parlons maintenant des outils dont vous avez besoin dans cette classe. Fondamentalement, il nous faut un stylo. Je devrais être pour un billet. Les lignes sont ce pilote jumelle ? Comment pouvez-vous utiliser un crayon ? Nous utiliserons également des microphones. Appliquer un peu de couleur pour les boutons ou a fait votre attention sur des éléments spécifiques. La deuxième chose, on est avec moi, c'est quelques papiers. Parfois, je croquis dans mon carnet de croquis incontestable, mais dans cette classe, je vais utiliser pour planer un quatre papier, vous pouvez utiliser le papier pointillé que j'ai fourni dans la section matériel de classe . J' ai également inclus quelques modèles. Vous pouvez les faire sortir et les utiliser pour esquisser. Ils sont très utiles, et nous allons gagner votre temps et aider Pedro partage plus précisément. Nous allons utiliser quelques notes collantes dans pour les interactions dans les lunettes à venir. 3. Ébaucher des formes de base: Commençons par esquisser les formes de base de chaque conception. Je vais me réchauffer en faisant des lignes droites. Nous allons un croquis, les bordures ou les lignes de construction à partir d'un écran à bille. Comme vous pouvez le voir, je rejette des déclins, et ils n'ont pas besoin d'être parfaits. Envisagez de déplacer votre bras et votre stylo avec votre épaule plutôt qu'avec les Orestes disponibles . Cela vous permettra de ne plus faire des lignes plus droites. Si vous avez des difficultés lors d'une ligne droite dans toutes les directions, protégez le papier pour tracer facilement une ligne dans la direction que vous trouverez le mieux pour vous. Vous devez garder à l'esprit que les croquis doivent être rapides et simples, puisque nous faisons tout des idées ou des concepts. Maintenant, jetons quelques cercles. Dessiner des cercles est plus difficile. J' ai recommandé de jeter le cercle deux ou trois fois en l'air avant de le jeter sur le papier. Pratiquez, pratiquez et pratiquez en jetant ces lignes et cercles. Si vous voulez rendre un élément cliquable comme un bouton, vous pouvez lui donner un peu d'ombre pour le faire ressortir. Jetons un bouton qui reste envoyer et lui donner l'ombre que vous pouvez utiliser une grande couleur au lieu du noir. Comme vous pouvez le voir, il se démarque et semble un cliquable. Jetons un autre bouton, et ça va dire soumet, Donnez-lui l'ombre et frappez l'ego. Il se démarque et explicable. hachure est une autre technique utilisée pour créer des effets de refroidissement en dessinant des lignes étroitement espacées . Prenons un exemple que je vais mettre de côté, ce qui signifie que les superpositions sur le dessus du menu. Je voudrais ajouter quelques éléments à l'intérieur de l'argent côté. Dessinons une ligne droite que sa bouteille dans le menu latéral, puis a commencé à jeter une réponse rapide les lignes agonales côte à côte pour créer l'effet de perte. Ainsi, comme vous pouvez le voir, éclosion est une technique simple qui aide à faire l'élément pour se démarquer. 4. Ébaucher des éléments UI: dans cette leçon, je vais vous montrer comment vous esquisser des éléments I tels que des textes, des images, des contrôles étrangers et certains hors des icônes couramment utilisées. Alors commençons par les jeter sur mon écran. Esquisse corrigée est assez simple, juste qu'il y en a qui est internalisé pour représenter un texte. Vous pouvez utiliser le texte réel à l'intérieur de vous. Pourquoi, quand vous avez besoin d'attirer l'attention sur elle, ou juste un peu de lignes horizontales Si vous n'avez pas un texte spécifique, parfois nous à emprisonner des textes comme une ligne ondulée ou son exacte comme ça. Maintenant, si vous voulez esquisser le cap vers un titre, vous pouvez le faire en dessinant l'angle correct et en le remplissant d'une ligne en zigzag. Ou vous pouvez simplement utiliser un marqueur pour remplir le rectangle. Non, nous allons un croquis images. Je dessinais juste un rectangle, puis je jetterais aux lignes agonales qui traversent le rectangle. Nous allons un croquis quelques autres images, parfois esquisser des images, et de cette façon pourrait être ennuyeux de sorte que vous pouvez jeter des variantes simples hors des objets. Par exemple, je représenterais des images en jetant des montagnes et le sable sur le dessus. Les formulaires sont utilisés pour recueillir des informations auprès des utilisateurs. Nous les utilisons et les pages d'inscription mises à jour utilisent leur influence et ainsi de suite. Je vais les dessiner à l'écran. Et avant de commencer à esquisser, j'ajouterais simplement le titre de la page afin que lorsque j'ai un certain nombre d'autres croquis, je puisse facilement le trouver. Vous pouvez laisser un peu d'espace à d'autres titres sur d'autres notes, comme la date, donc je vais commencer par dessiner un cercle. Cela indique que l'utilisateur peut cliquer dessus pour mettre à jour son image de profil. Ensuite, je dessinais un rectangle. Cela représenterait un champ d'entrée que l'utilisateur peut ressentir. Je vais lui donner un espace réservé qui dit son nom. Non, contrairement aux boutons, on ne lui a pas donné une ombre. Les champs de saisie peuvent être utilisés pour remplir des informations telles que le nom du numéro et le mot de passe. Maintenant, je vais dessiner un autre rectangle pour l'utilisateur. C' est comme la région d'un certain nombre de zones. Donc ce qu'on va faire, c'est dessiner sur la voiture comme ça. Cette lettre indiquera qu'il s'agit d'un menu déroulant qui a plusieurs éléments à sélectionner dans Lancer un autre champ, défendre l'adresse de l'utilisateur. L' adresse peut contenir le numéro de bâtiment Nom de rue une autre information qui nécessitait un contrôle un peu plus grand que le champ d'entrée, qui est une zone de texte. Maintenant, je vais vous montrer comment esquisser d'autres pays étrangers, comme des cases à cocher, boutons radio et des boutons de commutation. Les cases à cocher sont simples. Juste un tengan dramatique sur la petite tique à l'intérieur. Comme ça. cocher soutient que l'utilisation de plusieurs éléments pour ne pas dessiner un bouton radio a dessiné un cercle, puis un autre petit cercle à l'intérieur. Radio Buttons fait valoir que montre un seul élément. Maintenant, si vous voulez activer et désactiver l'option, vous pouvez vous changer de boutons, par exemple, fait de grandes notifications sur ou hors. Nous le présentons comme ça sur la forme ovale sur le cercle. A l'intérieur, vous pouvez le représenter comme ce rectangle et un autre petit rectangle à l'intérieur. Vous pouvez écrire dessus. Je vais lui donner un peu de couleur. Je vais en dessiner un autre pour montrer aux états du bureau. Maintenant, passons en bas. C' est un coffre-fort et donnez-lui un peu de couleur. Et l'ombre. Maintenant, nous avons une page sur les détails de l'utilisateur de la mort. Maintenant, je vais vous montrer comment esquisser les icônes couramment utilisées. Les icônes sont simples. Les représentations des objets de la vie réelle. Je vais commencer par faire le champ de recherche. Voici donc l'icône de recherche. C' est juste un cercle sur la ligne courte. C' est ce qu'ils font. Un autre, un cercle. Et puis j'aimerais. C' est assez simple. La prochaine icône que nous allons dessiner est le randonneur utilisateur, donc je suis juste pour lancer un cercle. À l'intérieur. Il y aura un cercle plus petit qui représentent l'indice, puis les lignes décollées représentent un corps. Allons là-bas avec encore quelques fois fosse et le corps. Maintenant, prenons la route. Icône d'emplacement. Il suffit de jeter une forme de ballon à un petit cercle à l'intérieur. Juste comme ça. Ne pas pas jeter l'icône utilisée pour ouvrir le menu latéral. Cette icône à l'école s'appelle Humber Good Menu, parce qu'il ressemble à un hamburger dessus. Il suffit de se battre sur trois lignes horizontales parallèles. Enfin, nous allons repousser les icônes de haut en bas comme ça. Donc, comme vous pouvez voir tout dans l'année, je croquis, y compris les icônes, est juste une combinaison hors lignes et les cercles 5. Ébaucher les interactions: Parfois, vous pouvez utiliser des éléments d'interaction tels que des info-bulles, des modèles, des menus latéraux ou d'autres éléments, mais vous ne voulez pas redessiner l'ensemble de l'écran. Pour cela, nous utiliserons des notes collantes ou de petits papiers et stylos. Si vous voulez l'épingler sur un tableau de broches. Oui, j'utiliserai différentes couleurs et tailles pour représenter différents types d'éléments. Allons un plan de repas de croquis. Je vais écrire le titre ici. La première chose que nous aurons est une image sur le repas, puis son nom. Ça doit être bon, par exemple. Ensuite, nous aurons un menu déroulant pour que l'utilisateur sélectionne la sauce. Ils veulent agir auprès de l'ouvrier. Je vais utiliser cette note collante pour écrire les options de source possibles. Par exemple, pas la sauce tomate, notre sauce spéciale. Maintenant, cela indique que lorsque l'utilisateur clique sur le bouton déroulant, ces options s'affichent. Donc, lorsque vous voulez expliquer ce que le fait de cliquer sur certains éléments va déclencher, vous pouvez utiliser cette méthode. La prochaine chose que nous aurons dans cet écran est une zone de texte pour ajouter des notes, etune information. Je peux Okay, donc quand l'utilisateur clique dessus du tout, ils seront affichés. Je vais utiliser. C' est plus petit, collant, note Andre. Les informations seront affichées, par exemple, non pas parce que cela aurait l'utilisateur de savoir quel nez entrer dans la zone de texte. Maintenant, nous aurons un bouton pour commander cette réunion. Je vais lui donner la couleur et l'ombre. Cliquez sur ce bouton pour afficher un message soit un message sexiste. J' ai reçu un message d'erreur dessus sera affiché comme un moderne ou un pop-up sur l'écran pour le message de succès. J' étais vraiment ce vert collant notes. Il contiendrait un titre, du texte et le bouton pour afficher les retours de commande. Donc, en cas de sexistes, cela doit, comme vous allez être affiché maintenant pour le message. Je vais utiliser cette Karanja notes collantes. C' est avec Contient un Titan, quelques textes et des détails d'entrevue sur ce domaine. Donc, cette méthode sera utile pour générer des idées et des sessions de remue-méninges, ou lorsque vous voulez expliquer la logique et le comportement pour les développeurs de votre équipe. Non, je vais te montrer comment expliquer les actions. Alors pourquoi ils l'utilisent, comme un clic glissant, zoom avant et arrière. Prenons un exemple. C' est le poisson de garde, et il contient les éléments que l'utilisateur veut commander sur le bouton qui a du texte. Il l'a vérifié. La carte contient une image et le texte qu'elle contient, et lorsque l'utilisateur glisse l'élément vers la gauche, un bouton est visible. Faisons une icône. Il a bougé l'icône ? Lorsque l'utilisateur clique dessus, l'élément sera retiré de la cour. Maintenant, je jetterais une main et une auto pour montrer la direction de glissement, donc quand ils l'utilisent, c' est des mensonges. L' élément à gauche. Le bouton Supprimer sera visible. Allons de l'avant et faisons une autre main. Cela représente une longue presse. Maintenant, jetons-les. Et cette fois, je vais montrer le zoom en action à nouveau. Je sortirais de la main puis deux autres pointaient et contrastaient des directions comme ceci. Cela expliquera le zoom en action sur la carte. Si vous trouvez qu'il lancer des canettes difficile, vous pouvez tracer ou copier l'image de la main. Ou vous pouvez écrire des annotations pour expliquer le comportement ou les gestes. La dernière chose que je vais vous montrer dans cette leçon est comment esquisser les navigations. Prenons un exemple qui est ceci est une page de menu de restaurant dessus. Contient signifie que chaque moyenne de ce menu a une image, un nom sur son prix. Lorsque je clique sur un repas, je serais dirigé vers une autre page qui contient de nombreux détails tels que l'image, le nom, la description, peut-être un certain nombre d'autres images de ce bouton moyen Onda pour le commander. Donc, pour montrer la navigation, je vais dessiner sur auto et lui donner l'ombre. Non seulement que cette photo n'est pas la partie de l'U I. C'est juste un indicateur pour montrer la navigation. 6. Merci: Merci les gars, et j'espère que vous avez apprécié ce cours. Si vous avez des questions ou des pensées, s'il vous plaît laissez-moi savoir dans la section d'examen sur. Rappelez-vous que le croquis consiste à faire sortir des idées. C' est le moyen le plus rapide d'explorer et de partager la pensée avec les autres et d'obtenir des commentaires. J' aimerais voir votre idée commencer à faire des croquis. Si vous avez besoin d'aide pour créer votre projet, vous pouvez regarder les vidéos précédentes et prendre des notes, et donc vous pouvez utiliser les documents du four d'impression ci-joint pour un peu plus d'aide. Prenez des photos de votre processus et partagez-le dans votre projet pour inspirer les autres et obtenir des commentaires.