Conception d'appli mobile : des outils simples pour créer rapidement le prototype de votre idée d'appli

1. Bienvenue: Bonjour, je m'appelle Ronnie Peters de 360 Design. Ici Irving, chef de l'attention, et aujourd'hui, nous allons prototyper une application mobile. Ce que je veux faire, c'est développer un prototype avant d'aller à l'étape du codage. Ce qui est important, c'est que cela va me faire gagner beaucoup de temps, et cela va me faire économiser beaucoup d'efforts, et je veux pouvoir l'obtenir sur mon téléphone, ce prototype, et pouvoir le partager avec mes amis et collègues afin que nous puissions examiner l'idée et la preuve de concept. De même, je veux parler des différents outils que nous allons utiliser. Vous pourriez utiliser une myriade d'outils différents. Il y en a beaucoup, des choses comme Sketch, Illustrator, Photoshop. Vous pourriez même écrire et esquisser sur papier si vous le vouliez et faire des prototypes sur papier. Nous allons en fait aller directement à l'écran de l'ordinateur et utiliser une suite d'outils que j'ai sélectionnés. Je suis créatif. J' ai eu la chance d'être impliqué dans certains des premiers sites Web pour les aveugles, et cela m'a fait réfléchir à la conception de l'interface utilisateur et d'aider les gens à interagir beaucoup avec les médias numériques et les communications. Je dirige maintenant une firme de design appelée 360 Design, et nous nous concentrons sur l'expérience utilisateur et l'intersection de la marque. 2. Projet: Chez 360 Design, nous nous concentrons sur la création d'expériences utilisateur qui surprennent et ravissent les problèmes de communication personnelle. Donc, ce que nous allons faire dans cette classe, c'est construire une application mobile, un prototype pour une application mobile pour un client appelé Metrie. Ils développent des portes et des moulures, et nous allons créer une application vraiment excitante pour eux tout autour des portes. Ce que je fais, c'est que je pense à certaines des choses que nous avons faites dans le passé, certaines des expériences utilisateur que nous avons eues qui ont été particulièrement réussies et à réfléchir à la façon dont nous pourrions réellement les appliquer pour créer une expérience très intéressante et engageante et utile pour ce client particulier, et ce problème. Alors, quelle est la grande idée ici ? La seule grande idée ici est que nous voulons être en mesure de faire découvrir et découvrir cette gamme de produits pour ce client et de le faire sur leur appareil mobile. Le groupe cible pour lequel nous travaillons sont les architectes et les architectes intérieur et les personnes qui font des rénovations dans leur maison. Ce que nous voulons faire, c'est utiliser la mobilité et le téléphone mobile comme moyen de permettre aux gens d'explorer les portes et de les montrer dans leur espace. 3. La grande idée: Donc, je pense beaucoup au genre de choses techniquement que je peux faire avec cette application, et toutes les fonctionnalités étonnantes qu'elle a. Des choses comme la nouvelle 3D Touch, l'audio, vidéo, la mobilité et tout ce qui va de pair avec cela. L' autre chose à laquelle je pense vraiment est quelle est la grande idée pour mon application. Pensez à des applications vraiment réussies comme Uber, comme Seamless, comme Yahoo Weather. Ils font une chose et ils font une chose très bien. Donc, quand vous réfléchissez à la planification ou à l'application, nous allons aborder dans quelques minutes, réfléchissez à la grande idée de ce qui quenous allons aborder dans quelques minutes, réfléchissez à la grande idée de ce quiest le grand concept que je veux réellement avoir comme expérience de base dans mon application. Comment vais-je ravir les gens, surprendre les gens, et vraiment développer et construire quelque chose qui est très clair, très concis et fait une chose bien. 4. Le mobile en tant que support: Avant de commencer le processus de création, je veux juste parler un peu des applications et de la grande idée du concept que nous avons. Lorsque nous étions chargés de concevoir une application mobile, ou en fait une série d'applications mobiles pour la série de livres, ce qui nous intéressait vraiment, c'est ce qui compléterait réellement la série de livres, et non pas la répéter. Nous pourrions prendre le contenu d'un livre et vous pouvez simplement le mettre dans une application mobile et créer un tourneur de pages et quelque chose que vous pourriez réellement lire, essentiellement le contenu du livre. Mais ce n'est pas de profiter de ce médium. Donc, ce que je veux vraiment faire est de regarder ce que les applications mobiles sont vraiment bons à faire. Qu' est-ce que la mobilité ? Quelle est l'interaction des gens ? Le fait qu'ils soient n'importe où quand ils utilisent réellement l'un de ces éléments et que pouvons-nous faire pour tirer parti de toute la technologie qui sort d'ici est très différente de ce que vous obtenez réellement dans l'expérience de livre linéaire. L' avantage que nous avons avec un appareil mobile, je peux être n'importe où, il est complètement non-linéaire et il y a tous les outils, audio , caméra, vidéo, tactile, etc. qu'ils n'ont pas dans l'expérience du livre. Alors, comment allons-nous profiter pleinement de tout ça ? Donc, c'est quelques-unes des choses auxquelles je pense réellement avant même de commencer à construire l'application mobile. 5. Fonctionnalité: Donc, je pense à cette application et voici une chambre. Disons, que nous sommes réellement entrés dans et l'application va être tout sur la possibilité de visualiser à quoi ressemble cette pièce avec une gamme différente de produits de porte dedans. Je pense à l'une des applications que nous avons conçu Super, Head Eploder X. Dans cette application, l'une des principales caractéristiques était que vous pourriez réellement prendre des photos de vos amis et les capturer. Alors tu pourrais les mettre dans le jeu. Prenez une photo, utilisez la photo, et puis fondamentalement, je pourrais redimensionner, déplacer cette photo, puis enregistrer cela et ensuite l'utiliser dans le jeu. Donc, je pense à cette technologie et ce que je veux faire est d'utiliser ce concept dans cette application particulière. Donc, ce que je veux être en mesure de faire est d'ouvrir l'application porte. Donc, j'entre dans une pièce et je peux voir cette porte particulière, et ce que je veux être capable de faire est d'apporter les portes de mon client au-dessus de celle-ci, de prendre une photo de cela , de partager avec mes clients, partager avec mes amis, partagez-le avec tous ceux qui participent à ce projet particulier de produits d'intérieur. Ensuite, je veux savoir où je peux acheter ce produit particulier. Donc, c'est la grande idée. Il va être vraiment engageant et maintenant nous allons aller de l'avant et comprendre comment nous allons réellement aller et construire cette application prototype particulière. 6. Outils et étapes: Il existe de nombreux outils différents que vous pouvez utiliser pour prototyper une application. Nous pourrions commencer sur papier, générer des filaires, générer des flux utilisateur, puis prototyper des écrans, nous pourrions les mettre en place et les mettre sur le mur juste commencer créer et visualiser l'application et ce qui se trouve sur le écrans réels. Nous pouvons utiliser des outils en ligne et en ligne nous avons beaucoup de variations et beaucoup d'outils différents qui sont à notre disposition. Je vais utiliser Axure RP et je vais utiliser une application appelée Flinto. Nous allons utiliser Photoshop et nous allons utiliser Illustrator. Vous n'avez pas besoin d'utiliser ces outils, il y a beaucoup d'autres outils là-bas, mais ce qui est vraiment important, c'est le processus que nous allons suivre aujourd'hui pour passer de l'idée au prototype fini. C' est ce qui compte vraiment. 7. Into à Axure: Jetons un coup d'oeil aux outils que nous allons utiliser pour concevoir et prototyper notre idée d'application. Donc, j'ai Flinto qui est l'application dans laquelle nous allons réellement construire le prototype fini. Nous allons pouvoir le partager et nous allons utiliser le courrier pour le partager avec d'autres personnes et l'envoyer sur mon téléphone. Cet Axure RP où nous allons construire des filaires, sitemaps et beaucoup d'éléments que nous allons réellement utiliser dans l'application Prototype. Nous allons également utiliser Illustrator et Photoshop pour nous aider à créer des icônes et différents composants que nous allons utiliser. Nous pouvons également voir cela dans un navigateur. Voici Axure avec la navigation à gauche qui montre différents écrans que j'ai conçus et les fichiers que j'ai ouverts dans Axure. J' ai préparé des choses à l'avance ici, et nous allons passer par là. Le premier est que j'ai fait un écran de présentation. La vue d'ensemble me permet juste de suivre où je suis dans le projet, les étapes que j'ai prises, ce que j'ai fait. Je mets habituellement une date ou une heure après ceux-ci, juste pour que je puisse le voir, et surtout si je partage ce fichier avec d'autres et que je travaille en équipe. Nous pouvons voir des progrès et tenir tout cela à jour. J' ai un diagramme de flux de processus que je vais vous montrer, qui est le processus que nous allons suivre, divers éléments de conception différents que j'ai accumulés, puis certains des différents écrans que nous avons commencé à mettre ensemble, un flux sitemap, puis les écrans que nous allons réellement mettre dans le prototype. Mais commençons par le processus. Donc, nous avons parlé un peu de la grande idée, et du concept, et c'est ce que nous allons commencer dans le processus de découverte. qui cette application est-elle réellement destinée ? Vous pouvez même écrire la personnalité, le type de personne que vous ciblez réellement avec votre application, qui est votre public cible pour cela ? La taille du marché potentiel, quel est le gros problème que vous essayez de résoudre ? Quelle est la grande idée de l'application ? Quelle plate-forme le public utilise-t-il réellement ? Devrait-il aller sur un téléphone Android ? Devrait-on passer sur un iPhone ? Peut-être faire une analyse de la concurrence et voir si quelqu' un d'autre là-bas a effectivement une application comme celle-ci. Ensuite, nous entrons dans la phase de définition. Nous allons examiner certains des détails de ce qui est dans l'application, quel est le contenu réel. Ensuite, nous allons passer à la phase de conception elle-même. La raison pour laquelle j'ai un certain nombre de flèches ici est que nous allons commencer le processus de conception, puis nous allons aller dans un déploiement de prototype. On va tester ça. Et après en les testant, nous allons revenir en arrière et faire un peu de refonte. Donc, vous pouvez voir que ce processus ici peut prendre un certain nombre d'étapes ou d' essais différentes avant d'entrer dans le processus de conception final que nous allons ensuite entrer dans le code, et le déployer, puis une fois que nous avons déployé nous allons le mesurer et l'améliorer. 8. Découverte, définition, conception: Pour cette application en phase de découverte, à qui s'agit-il ? On en a un peu parlé. Notre public cible ici est les architectes, les architectes intérieur et les personnes qui rénovent ou construisent une maison. Nous savons que persona assez bien, nous avons fait beaucoup de travail avec ce client particulier, nous faisons beaucoup de travail sur le Web et beaucoup de branding et de promotions pour eux. Donc, je comprends assez bien ce marché, et à qui cela est ciblé. La taille du marché potentiel, nous pensons qu'il y a assez de gens là-bas, c'est une application viable que nous allons construire. Le problème que nous essayons de résoudre est que nous voulons vraiment engager les gens quand ils sont dans leur espace, ils regardent dans cet espace et disent : « Comment ? À quoi ressemblerait ce produit particulier dans cette pièce ? Donc, c'est le problème que nous essayons de résoudre, et la grande idée est que nous allons pouvoir ouvrir notre caméra au téléphone, et nous allons pouvoir glisser dans ces portes, et choisir beaucoup de portes différentes, nous pourrons alors prendre une photo de cette porte dans mon espace. Ensuite, nous allons pouvoir le partager, si je le partage avec un architecte, si je le partage avec un architecte d'intérieur, si je le partage avec quelqu'un que je veux regarder l'espace de cette pièce, ou tout simplement l'emmener avec moi à un Home Depot ou Lowe's pour pouvoir acheter ce produit particulier. Donc, c'est la grande idée ici, le noyau de l'application que nous allons réellement construire. Je ne suis pas sûr que quelqu'un d'autre a fait quelque chose comme ça, donc je suis assez pressé de concevoir cette application particulière, parce que cela va être tout à fait unique sur le marché pour ce public cible particulier dans ce produit. L' étape suivante est la phase de définition. Donc, définissons cette application particulière. Regardons les caractéristiques et les fonctions particulières que nous voulons avoir ici et quel est le contenu. Encore une fois, je connais très bien ce contenu. Je connais ces produits de porte. Je sais ce que nous avons dans la manière des images, ce que nous avons en termes de copie et de contenu. Je sais également qu'il y a une fonctionnalité de carte que nous avons sur notre site Web où je peux trouver où acheter ce produit particulier. Je vais penser à incorporer toutes ces choses dans cette application particulière, et celles-ci vont être le noyau des expériences. Donc, tout d'abord, il s'agit d'amener nos portes sur la page, les montrer dans mon espace , dans ma chambre, puis il va prendre une photo de ça, puis je veux pouvoir sauvegarder ça, partager ça, trouver où je peux achète ça. C' est vraiment le cœur de l'expérience. Donc, c'est la phase de définition. Maintenant, vous voudrez probablement écrire tout cela, vous voudrez peut-être faire un tableau blanc, vous voudrez peut-être mettre ceci dans une sorte de document, et partager ceci. Donc, vous allez regarder cela en détail, et vous faites quelques itérations différentes de versions de ceci. Mais j'ai réfléchi à celle-ci et c'est là que j'en suis avec la phase de définition en ce moment. Ensuite, nous allons passer à la phase de conception. Donc, c'est là que nous commençons vraiment à entrer dans l'expérience utilisateur et cartographier, filaire sur ce que cette application va être tout au sujet. Donc, nous allons entrer dans certains de ces détails sur les pages, mais parlons juste de ceux-ci très rapidement. Je vais développer ce qu'on appelle un sitemap. Donc, je viens de cartographier toutes les différentes pages qui sont là-bas. Pas trop différent d'un sitemap, je vais faire un diagramme de flux. Donc, je pense à la façon dont quelqu'un va réellement se déplacer à travers cette application. Ensuite, je vais faire un peu de filature. Donc, je vais regarder des pages individuelles, et certains des éléments ou des écrans, et les éléments qui vont réellement être là-bas. Ensuite, nous commencerons à assembler ces différents composants, puis commencerons à construire notre application. Donc, c'est le début de la phase de conception que nous allons examiner maintenant. 9. Plan du site: Jetons un coup d'oeil à un plan du site. Donc, dans le sitemap, ce à quoi j'ai commencé à penser sont tous les différents écrans que je pourrais avoir besoin de concevoir pour ce processus particulier. Encore une fois, j'aurais pu commencer sur papier. J' aurais pu esquisser ça. Je vais tout de suite en action ici pour dessiner ces éléments. Donc ce ne sont que des boîtes individuelles que j'ai dessinées sur l'écran et le diagramme de flux, et puis la belle chose ici est que je peux réellement entrer, et je peux prendre ceci, et je peux effectivement lier cela à une de mes pages. Plus tard, je peux effectivement publier ce sitemap en tant que site web, et je peux demander aux gens de cliquer autour d'elle. Donc, je peux effectivement cliquer sur l'écran de chargement ici, et je peux aller à cette page d'écran de chargement, et je serai en fait capable de voir cela, puis je peux cliquer sur ceci et ensuite aller à une autre. Donc, c'est en fait une façon de construire un prototype rugueux, juste une action avant même que je l'aie sur mon téléphone portable. Alors, à quoi je pense ici ? Je sais qu'il va y avoir un écran de chargement. Que se passe-t-il lorsque vous appuyez sur une icône sur votre bureau, il charge réellement l'application, et pendant que cette application est en cours de chargement, nous pouvons mettre un graphique là-bas avant que vous arriviez réellement à ce que j'appelle l'écran d'accueil. Ensuite, à partir de cet écran d'accueil, je pense à toutes les différentes pages que je pourrais avoir. Donc, collection de portes, où acheter, page de contact, sur la page qui pourrait mener ces portes que je vais mettre sur l'écran de mon appareil photo, menant à une page détaillée de porte que je vais être en mesure de capturer le porte, et puis je vais pouvoir la partager. Donc, c'était un plan du site. C' était une idée que j'avais pour cette application particulière. Ensuite, en voici une autre, qui est une façon légèrement différente d'aborder cela. Je vais passer de l'écran de chargement tout de suite à l'écran de capture. Donc, ici, je commence déjà à penser à différentes expériences utilisateur et différentes façons de passer à travers l'application réelle. Donc, la précédente avec deux étapes avant que j'arrive au cœur de l'expérience, celle-ci entre en jeu et commence immédiatement avec la capture de caméra à laquelle je pense. Je capture une porte dans mon espace et puis je la partage, donc c'est vraiment un processus rapide pour arriver à ce point de partage où je pense vraiment le genre de rencontre des expériences utilisateur et où vous obtiendrez le plus de plaisir et la plus grande sorte d'engagement. Ensuite, nous avons les détails de la porte, que je peux obtenir immédiatement à nouveau hors de la page de la visionneuse, puis je peux aller sur la carte et trouver où je peux acheter ce produit. Je peux contacter la marque, ou en savoir plus sur la marque et l'application, et cetera, et cetera. Donc, c'est juste un moyen alternatif. Donc, je vous encourage vraiment à commencer à regarder différentes façons d'organiser vos pages. C' était l'un d'eux. C'était un autre. Avant même d'approfondir le processus de conception, je pense simplement à l'utilisateur et aux pages auxquelles il va être confronté, au contenu auquel il va être confronté, à l'expérience qu'il va avoir. Encore une fois, vous voudrez peut-être réfléchir à certaines des applications que vous utilisez, comme Uber dont je parlais, comme Yahoo Weather que j'aime. Nous avons travaillé avec Seamless et l'application Seamless, et avons conçu des éléments d'interface utilisateur et d'interface utilisateur pour cela, et ce sont des applications qui se concentrent vraiment sur l'affinement gens pour obtenir ce qu'ils veulent le plus rapidement possible grâce à l'expérience de l'application. Pensez donc vraiment à cela lorsque vous développez et concevez votre sitemap. 10. Flux: Alors que je développe le sitemap, je commence aussi à penser au flux. Donc, c'est l'engagement que les gens vont avoir, voici comment ils vont passer à travers l'expérience de l'application, et ce seront les interactions qu'ils ont. Donc, c'est similaire au sitemap mais je suis moins concerné par les pages, et je suis vraiment préoccupé par les actions et la façon dont je regroupe ces actions. Donc, je sais que je vais avoir une page de bienvenue ici. Je sais que je vais avoir une sorte d'écran d'accueil, donc c'est sur la ligne de version du sitemap que nous avons regardé. Ensuite, je vais donner aux gens le choix qu'ils veulent savoir comment utiliser l'application, veulent-ils aller et commencer à regarder les produits de la porte et à prendre des photos ? Quelle est l'action à partir de là, ou la section suivante ? Ils peuvent accéder à la page de détails du produit. Ils pourraient prendre une photo. Ils pourraient aller à la page d'image, puis ils pourraient partager via ces différents canaux de médias sociaux, ils pourraient choisir des couleurs. Ensuite, ils pourraient trouver où acheter, ou ils pourraient contacter la marque. Donc, je pense à ces flux et comment cela pourrait être arrangé. Mais ça m'a l'air un peu occupé. Donc, en faisant celui-ci, j'ai commencé à vraiment penser à y a-t-il un moyen plus facile de mettre cela ensemble, et c'est ainsi que j'ai trouvé le deuxième concept qui, si vous le voyez ici même juste dans ce diagramme il semble encore plus simple. Donc, j'ai ces deux versions juste pour que vous puissiez voir la différence entre l'une et l'autre. Donc, je pense à l'écran de chargement que nous ne devons pas avoir le choix là-bas, mais alors nous allons vraiment directement au cœur de l'expérience de l'application où je veux que les gens puissent prendre des photos, regarder les produits de la porte, puis commencez à engager, à partager et à faire toutes ces choses ou à approfondir les détails du produit s'ils veulent savoir où acheter, contacter la marque ou en savoir plus sur l'application elle-même. Donc, celui-là, je pense, est un chemin beaucoup plus simple et la façon d'y aller. Juste pour que tu saches, juste pour voir comment j'ai construit certaines de ces choses. Allons juste dans certaines des choses que j'ai faites dans Photoshop ici. Voici quelques-unes des icônes que je viens de mettre ensemble très grossièrement. Encore une fois, c'est un prototype, donc je viens de construire ces icônes pour que nous allons couper ce que nous copions et collons et les mettre directement en action ici afin que vous puissiez commencer à voir certaines des actions auxquelles je pense les gens vont l'avoir. 11. Les éléments du design: Jetons un coup d'oeil à d'autres choses que j'ai faites ici. J' ai créé une page appelée éléments de design, et sur cette page ici, je viens de jeter ensemble toutes les petites pièces, ces icônes que nous avons regardées que j'ai conçues dans Photoshops, quelques boutons que j'ai mis ici. Voici quelques-uns des produits de porte, voici cette pièce que je veux utiliser en arrière-plan, voici quelques couleurs des lignes directrices de la marque, de la marque et certains de leurs logos. Donc, je viens de jeter tous ces éléments sur une page. C' est ce que j'aime particulièrement dans l'action, que je peux avoir ce genre de zones d'attente, et ensuite je peux venir prendre ces éléments, et les utiliser comme je commence à concevoir des écrans et des filaires. 12. Dimension et résolution d'écran: Avant de commencer à filtrer des pages, je veux juste parler un peu de la taille et de la résolution de l'écran. Pour cette application particulière, je vais le concevoir pour iPhone 6 plus, c'est le téléphone que j'ai et j'utilise donc c'est ce que je vais utiliser. Maintenant, au cours de ma phase de découverte, j'ai regardé mon public cible, j'ai découvert ce que la plupart d'entre eux utilisaient en termes d'appareil sur lequel ils vont être et je suis en train de concevoir spécifiquement pour ce public cible et pour cet appareil. Donc, je vais juste choisir l'iPhone et quelques choses ici sur la résolution, maintenant parce que c'est un prototype que je ne m'en fous vraiment pas trop à ce qu'il semble absolument clair et pointu. Il s'agit de faire connaître l'idée et le concept. Ce n'est pas la conception finale. Mais si je regarde les résolutions d'écran, l'iPhone d'origine était de 320 par 480 pixels. L' iPhone 6 est 750 par 1334, et le 6 plus est 1244 par 2208. Maintenant, c'est une taille énorme pour faire des prototypes. Si vous regardez réellement la taille de cet écran particulier, c'est beaucoup trop lourd et encombrant à mon goût. Donc, ce que je vais faire est en fait de concevoir mes filaires à la taille de l'iPhone 6, puis quand je les mets dans mon application de prototypage où je les couds tous ensemble et que je le transforme en une mini application prototype, je suis va les mettre à l'échelle, et je ne me soucie pas vraiment de ça à nouveau. Il va y avoir un peu de flou dans la résolution, mais je n'ai vraiment pas réfléchi à la conception finale. Ce n'est qu'un prototype à ce stade. L' autre chose dont je veux parler est l'orientation de l'écran. Donc, comme vous le savez probablement en utilisant des applications, vous pouvez tourner votre écran horizontal et certaines applications vont se réorienter et mettre à l'échelle tout un écran horizontal, puis vous le tournez verticalement et ils iront dans un position verticale. Encore une fois, c'est un prototype et je veux juste obtenir cette idée et ce concept devant les gens et le tester pour faire fonctionner mes flux et obtenir la conception des écrans correctement et penser aux éléments qui vont être sur l'écran. Et à cause de cela, je décide juste de faire ce prototype dans un format vertical. Donc, j'ai retiré la résolution de l'écran de l'image. Je vais opter pour une taille d'écran et une résolution qui est facile. Je vais pour une orientation qui est juste verticale, et troisièmement, je vais juste aller pour iPhone. D' accord. Donc, je simplifie le monde dans lequel je vais travailler, encore une fois parce que c'est un prototype. 13. Wireframe: Donc, nous avons regardé notre public cible. On sait qu'ils sont sur iPhone. Nous ne ferions que construire un prototype, donc nous allons opter pour une taille qui fonctionne vraiment juste pour nous et encore, parce que l'orientation, nous allons juste aller vers la verticale. Encore une fois, parce que c'est un prototype à ce stade, et je ne suis pas trop préoccupé par ce besoin de travailler à la fois horizontal et vertical. On va juste rester avec une orientation verticale. Alors, voici mon écran de chargement. Je vais appeler l'application qui ouvre les portes pour l'instant. Voici le logo de l'entreprise. Encore une fois, juste mettre ces choses sur une page et puis je pense à l'écran d'accueil où cela irait. Donc, voici mon écran d'accueil et j'ai le choix de choisir la porte. Maintenant, cela sort du sitemap numéro un et c'est là que j'ai mis cet écran supplémentaire là-dedans par rapport à la version 2 où je pensais, pourquoi ne pas aller directement dans l'application elle-même, et donner aux gens l'expérience de la porte que je veux qu'ils aient, et qu'ils s'engagent immédiatement ? Donc, voici quelques-uns des éléments que j'ai réunis que nous avons vus sur la page des éléments de conception. Je prends juste certaines de ces choses, copie, et je les amène dans ces pages. Donc, je peux commencer à utiliser ces éléments dans le cadre de cette conception pour faire ces écrans. Maintenant, l'une des grandes choses que les vrais font est de maîtriser ici. Donc, je peux réellement créer des éléments comme mes chemins de navigation supérieurs, et cela peut être cohérent tout au long, et je peux simplement faire glisser et déposer ces masques sur n'importe quelle page que je conçois, puis ils seront cohérents tout au long. Ensuite, si j'édite le gabarit, il l'éditera sur toutes les différentes pages de cadre de fil. Donc, cela peut être extrêmement gain de temps et avantageux. Donc, c'est là que je pense, j'appelle cela l'écran d'accueil, mais c'est essentiellement là que je commence à utiliser l'application. Ensuite, si je clique sur le lien en haut, je vais à une page de détails. Donc maintenant, cela va être une longue page de défilement. Donc, il y a plus d'informations ici que sur une page. Donc, je vais juste construire ceci comme une grande page longue et plus tard, nous allons comprendre comment faire ce défilement correctement. Donc, ce que je commence à faire est de regarder ce sitemap, et d'utiliser les éléments qui sont sur ce sitemap, couplés avec les choix que les gens font dans le flux pour commencer à penser à ce qui se trouve réellement sur ces écrans et pages. Donc, c'était l'idée originale pour la page d'accueil, pas très excitant et seulement un choix majeur là-bas. Ensuite, cela allait mener à cette page de porte et si vous vous souvenez du plan du site, nous avons des portes. On a où acheter. On a un contact. On a environ. Ensuite, nous avons les détails du produit. Donc, c'est beaucoup de choses à avoir sur mon écran en prenant de l'immobilier tout le temps, mais je ne vais pas nécessairement utiliser. Donc, je voulais juste vous montrer que c'est mon point de départ, et alors pourquoi ne pas prendre ça, et mettre ça à côté de ça, et je vais vous parler de la pensée qui se passe derrière là où je suis en fait veulent finir avec cette page. Donc, c'était l'ancienne page d'accueil, mais maintenant, avec un niveau vers le bas et dans la première itération, mais c'est maintenant que je pense vraiment aller avec ce nouvel écran d'accueil. J' ai pris tous ces boutons bas et je les ai mis à l'intérieur de cette icône de hamburger. Je vais réfléchir plus tard, comment je veux être en mesure d'exposer cette navigation et d'amener les gens à ces autres pages dans l'expérience de l'application ? Mais ce qu'il a fait, c'est qu'il a augmenté mon écran immobilier, qui est si précieux dans une expérience mobile comme celle-ci. Donc, juste vous montrer ces deux idées pour commencer à penser au processus que je suis en train de traverser en filant les pages qui sont sur le site Web. 14. Recap d'Axure: Alors, allons récapituler rapidement où nous en sommes. Mon entreprise sur quelques pages ici donc je suis juste de garder une trace et d' écrire les étapes que j'ai prises et le processus que j'ai traversé. La page de processus qui était, je l'ai mis ici pour vous montrer les étapes et les étapes que je traverse. Donc, que je ne mettrais normalement pas dans l'application. J' ai eu cette page ici où j'ai commencé à mettre toutes mes icônes et éléments de conception, logos des choix de couleurs de l'entreprise basés sur les lignes directrices de la marque, puis cette collection d'éléments que je vais utiliser pour le processus de conception. Donc, je les ai ici. Les tailles de page dont nous avons parlé je garde juste qu'il ya peut-être comme une référence. Nous avons parcouru deux versions différentes de sitemap et nous semblons être davantage penchés vers celui-ci maintenant. C' est le point où je pourrais si je voulais réellement prendre ces deux idées de sitemap et les prototypes, puis les tester les uns contre les autres. Je vais en fait juste construire ce particulier parce que je pense que c'est juste une meilleure solution, mais le fait que j'ai traversé ce processus d'essayer quelques choses différentes pendant le processus de filage était très utile pour moi. Puis, j'ai continué et commencé à construire certains des écrans, donc très simple filaire d'un écran de chargement. L' écran d'accueil d'origine pour la première idée, puis les pages suivantes, puis celle de nouveau, que je vais réellement construire qui est celui-ci, une page détaillée de l'étage. Je suis désolé, page de détail de porte et puis j'ai d'autres pages, comme où acheter la page. Je n'ai pas encore fait la page de contact et certaines des autres pages qui, la page à propos, par exemple, que nous savons que nous voulons avoir dans l'application finale. 15. Relier votre plan de site: J' ai parlé plus tôt de la façon dont nous pouvons réellement construire un prototype HTML en utilisant iShare, sorte que nous pourrions très rapidement assembler ces écrans avant même de continuer à construire une application réelle pour aller sur mon téléphone. Alors, jetons un coup d'oeil à une ou deux des fonctionnalités ici. Dans le plan du site, nous avons là où acheter. Nous allons entrer ici et nous allons le connecter à une page de référence, donc il y a un moyen d'acheter. On va entrer dans les détails. Sélectionnez une page de référence là. Il y a la page des détails de la porte qu'on a. Donc, je n'ai pas encore construit ces autres trames filaires. Mais, ce que cela va me permettre de faire est en fait cliquer de ceci à ces pages spécifiques. 16. Relier et publier en HTML: En attendant, j'ai fait un peu de ménage et j'ai rangé le côté gauche ici pour rendre les choses un peu plus claires pour moi. Je vais revenir sur le plan du site ici et je vais juste m'assurer que ceux-ci sont connectés aux bons endroits. Cet écran particulier ici, qui est actuellement appelé double collection un, je vais en fait re-lier cette page de référence parce que cela va maintenant aller au nouvel endroit parce que c'est le nouveau schéma que je viens avec. Puis détail de la porte, je veux juste m'assurer que cette page de référence va au bon endroit, il est. Ça va à la page des détails de la porte, donc c'est bon. L' écran de chargement, je veux juste m'assurer que cette page de référence est correcte, et c'est. Donc, ce sont les écrans que j'ai réellement conçus, et je serai en mesure de les relier tous ensemble. Je serai également en mesure d'aller dans certains de ces écrans et de les connecter aussi bien. Maintenant, cet écran particulier ici, je vais juste lier ce logo à la page suivante dans la séquence juste pour que je l'ai. Ce n'est pas un lien réel que nous aurions dans l'application elle-même parce que l'écran de chargement va aller à la page d'accueil. Mais je vais le lier à ce qu'on appelle, la collecte de porte. On y va. Donc, si je tape sur ça, vous liez ça aussi. Créez un lien. Cela ira aussi à la page de la collection de porte. Ensuite, quand je suis dans la page de la collection de porte, j'ai connecté ceci à la page des détails de la porte. Je sais que je voulais que ça arrive. Ensuite, nous avons une porte brune que je voulais avoir qui est reliée à cette page. Alors si je vais à la page de la porte marron, on verra que je peux retourner à la porte blanche. Créons un lien qui va à l'écran d'accueil. Donc, je vais juste prendre ceci et je vais dire créer un lien, et puis cela va revenir à la page de collection de porte. Alors, on y va. Donc, chaque fois que je tape dessus, ça reviendra juste à cette page. Donc, cousons toutes ces choses ensemble comme un prototype HTML très rapide. Donc, je vais aller publier, et je vais dire, « Générer des fichiers HTML », « Générer » Comme vous pouvez le voir, je suis maintenant dans un environnement de navigateur Web. Je peux aller ici et je peux cliquer sur cette page de plan de site particulier et je peux voir toutes ces pages différentes. Donc, c'est très utile pour moi juste comme un principe d'organisation, juste pour voir que j'ai toutes ces pages, voir comment elles sont connectées ensemble. Je pense qu'on l'a dit quand on était sur l'écran de chargement. Nous allons pouvoir cliquer sur l'icône qui allait aller ici. Ça allait nous emmener aux bruns, vert. Ensuite, si nous cliquons sur l'icône, il nous ramènera à la maison. Si nous cliquons sur ce bouton, il ira à la page de détails. D' accord. Donc, très, très vite là-bas. Je viens de créer un flux et quelques clics. Donc, c'est une façon de prototyper, mais ce n'est pas sur mon téléphone. C' est sur le site web. Maintenant, je pourrais publier l'URL, je pourrais partager ça. Nous faisons souvent cela pour partager avec les clients ou partager avec les programmeurs après avoir fait peu plus de rangement et un peu plus de travail de conception et terminé certains des autres cadres de fil à ces pages. Mais je veux mettre ça sur mon téléphone. 17. Intro à Flinto: Je vais parler de Flinto. Dans Flinto ici, ce que j'ai commencé à faire est d' assembler tous les différents écrans que j'ai conçus dans Azure. Maintenant, comme je l'avais déjà dit, vous auriez pu le faire dans Illustrator, vous auriez pu le faire sur papier, puis scanner ces et/ou prendre des photos d'eux, et les découper dans Photoshop. Il y a toutes sortes de façons de rassembler tous ces éléments. Je t'ai montré une façon de le faire. C' est la façon dont j'aime travailler actuellement, mais il y a beaucoup de façons différentes d'arriver à ce point. Donc, ce que nous regardons est différents écrans iPhone, et ce que j'ai fait est placé tous les différents éléments là, et ce que je montre sont des états adjacents de l'écran. Donc, voici la page d'accueil ou la page de détails de la porte, et l'écran à côté, je montre où j'ai activé le menu, la navigation hamburger. Vous pouvez voir que j'ai fait quelques changements mineurs. J' ai changé la marque pour mettre l'icône du hamburger dans le coin supérieur gauche. Je l'ai fait pour que je puisse faire glisser ce panneau sur où je peux voir les différents états de navigation. J' ai différents traitements de porte ici que je vais glisser sur le fond. Aussi, là, vous pouvez voir notre page de détails de produit ici. Ceci est en fait toute la page, et nous avons une fonctionnalité de diapositive pour que nous puissions glisser vers le haut et vers le bas, faire défiler cette page, être en mesure de regarder cela. Ensuite, ce que nous avons fait est cousu toutes ces pages ensemble pour que nous puissions activer différentes portes de couleur. Donc, il y avait des choses très spécifiques que je voulais faire, et pourquoi je veux l'intégrer dans cette application est parce qu'ils ont quelques belles transitions ici et je peux personnaliser ces transitions. L' un des plus importants est la façon dont je fais glisser la porte d'avant en arrière, et c'est pourquoi je voulais amener tous ces éléments dans Flinto pour que cela se produise. 18. Transitions: L' une des caractéristiques les plus importantes et centrales de cette application dont nous avons parlé est de savoir comment je veux pouvoir faire glisser ces portes sur la caméra. Donc, je vais activer l'appareil photo automatiquement lorsque l'application s'ouvre, puis je veux pouvoir faire glisser ces produits sur cette vue de caméra que j'ai ouverte dans mon écran. Alors, jetons un coup d'oeil aux transitions là-bas, je vais aller par ici et dire, « Modifier la transition ». C' est l'une des grandes caractéristiques de Flinto, il me permet de montrer, ici nous allons juste le faire au ralenti, l'écran avant qui a une porte blanche au-dessus et ce que je veux être en mesure de faire est de glisser la porte blanche et d'apporter dans une porte en bois, alors regardons ça à nouveau. Donc, à une action très spécifique ici, j'ai dit que je veux que la porte soit à un angle et c'est sur le côté droit, je veux qu'elle glisse et puis je vais la positionner, je le ferais avec mon pouce en tant qu'utilisateur, mais alors il se forme dans une position centrale, il est absolument vertical. Il peut être une pension de zoom fonctionnalités, je pourrais mettre à l'échelle cela et quand il s'agit de développer réellement cette application, je vais parler aux développeurs, je vais écrire des notes avec le prototype pour dire aux développeurs comment cette caractéristique particulière fonctionnerait. Mais celui-ci, est quelque chose que je veux vraiment être en mesure de concevoir sur mesure et en animant montrer aux développeurs exactement comment je veux que cette porte glisse dans. C' est donc une action très spécifique et je suis ravi pouvoir le faire en utilisant un ensemble très simple d'outils. Alors, regardons juste quelques-unes des autres transitions. Nous avons parlé de l'icône du hamburger, donc c'est une autre transition que je voulais vraiment faire spécifiquement. Il s'agit de l'écran avant de cliquer sur l'icône de hamburger, puis si je clique dessus, cette page glisse et la navigation se glisse dans. Regardons ça à nouveau dans ralentir ça. Donc, l'action que j'ai eu ici, c'est avant que je clique sur l'icône de hamburger et puis je clique sur l'icône de hamburger, et vous pouvez voir que la navigation a été en fait réduite et il est glissé dans, il était à 20 degrés angle et puis il est devenu à une position horizontale. Alors, sortons de ça. Donc, ce sont quelques transitions là-bas, nous avons la même chose qui se passe ici, encore une fois en faisant ressortir l'icône de hamburger dans la navigation principale lorsque je suis sur l'entité de carte, cela se produirait bien sûr avec tous ces écrans, mais je ne vais pas passer à travers et animer tout cela pour ceux-ci, ça va me prendre trop de temps et je n'ai pas vraiment besoin faire à nouveau pour cette fonctionnalité prototype. Mais l'une des autres choses que je dois faire et dont nous avions parlé, est de pouvoir changer la couleur de la porte. Donc, cet écran ici sera en fait un lien vers cette page, sorte que vous pouvez voir la ligne rouge surlignée vers le haut. Donc, si je clique sur l'icône brune là, la porte brune apparaîtra. Si je clique sur la couleur rose, la porte de la rose va entrer. Donc, ce ne sont que des transactions très simples et je viens de faire un fondu croisé comme méthode de transition pour cette fonctionnalité particulière. Ensuite, il s'agit de longue page de défilement et nous savons que nous allons devoir faire défiler vers le bas, donc revenons à activer, ici nous allons, vous pouvez voir que c'est la zone de défilement et j'ai mis quelques instructions ici qu'il est un léger rebond à elle et il va faire défiler verticalement vers le haut et vers le bas sur la page. Donc, très rapidement, je suis passé de l'idée de concept en termes de sitemap, filaires, fait quelques flux courts, puis créé les conceptions filaires pour ces écrans particuliers, je les ai tirés ici, je copiés et collés. J' ai commencé à créer des éléments de transition et j'ai les débuts d'un prototype ici. Alors, allons jeter un oeil très rapidement dans leur mode de prévisualisation, quant à la façon dont cela pourrait réellement fonctionner. Donc, voici l'écran d'aperçu, allons juste à l'écran d'accueil là, donc voici et il y a cette action de porte que je voulais, donc ce sera un balayage de pouce sur le téléphone. Donc, vous pouvez voir que je suis dans la porte blanche là-bas et je peux glisser dessus et soulever cette porte en bois, je peux faire glisser la porte en bois et je peux monter cette porte en verre. Donc, j'ai mon action qui semble fonctionner exactement comme je le voulais, regardons cette fonctionnalité de hamburger. Ok alors allez de là à l'endroit où acheter, il est de retour à cette page. 19. Exporter sur votre téléphone: Donc maintenant, que nous sommes arrivés à un point où nous avons un certain nombre d' écrans différents et nous avons essayé différentes transitions, et des effets, et des liens, je veux maintenant l'obtenir sur mon téléphone afin que je puisse commencer à sentir comment cela fonctionne réellement dans un smartphone. Je veux l'envoyer à certains de mes collègues le plus rapidement possible et obtenir leurs commentaires, et apprendre d'eux ce qu'ils voient fonctionner et ce qui ne fonctionne pas, et comment ils aiment l'application et toute l'expérience de l'application. Je vais juste le partager et je vais l'envoyer à moi-même sous forme d'email, je peux l'envoyer à d'autres personnes aussi. Alors, on y va. Je l'appellerai Flinto prototype, et ça arrivera sur mon téléphone. 20. L'appli finie: Voici donc mon e-mail avec le prototype Flinto dedans, et ce que j'ai ici, c'est l'application Flinto que j'ai téléchargée qui charge ensuite le prototype que j'ai intégré et le voici. Donc, c'est mon application avec la fonctionnalité de balayage que j'étais très désireux de voir comment cela fonctionnerait réellement. Donc c'est génial. Ça semble aller bien pour moi. Voici la page de détails du produit avec la fonction de glissement, la page de défilement et de défilement long. Retournons, revenons à cette page, revenons à la page d'accueil ici. Certaines des autres fonctionnalités que nous avons regardé est la fonctionnalité où acheter donc c'est cette page ici. Je n'ai encore rien fait avec la fonction de recherche ou la modification de mon code postal. Donc, ce serait quelques-unes des autres choses que je voudrais examiner maintenant et peut-être que c'est une zone de défilement en dessous avec tous ces endroits différents dessus. Ce serait quelque chose que je voudrais commencer à regarder ou ce qui se passe lorsque j'appuie sur certains de ces marqueurs sur la carte. Retournons à la page d'accueil d'ici. L' autre caractéristique principale que nous examinons était la possibilité d'être en mesure de couleur ou de changer la couleur de la porte que j'ai réellement glissée sur la vue de la caméra. Très bien, donc, vous l'avez. Dans un laps de temps relativement court, nous avons traversé un certain nombre d'étapes différentes, tout d'abord, regardant les fonctionnalités et les fonctions que nous voulons avoir cette application, à qui il est réellement pour, vraiment à la recherche et penser à ce public cible, pensant à la plate-forme sur laquelle nous voulons réellement construire cela, dans ce cas, iPhone iPhone 6 Plus dans ce cas. Ensuite, nous sommes allés au sitemap, flux, processus de filature, puis nous avons pris les wireframes, nous les avons mis dans Flinto et ensuite nous avons créé ces transitions et nous avons créé quelque chose que nous pouvons maintenant partager avec d'autres personnes et puis je peux maintenant expérimenter et vraiment déterminer si cela fonctionne réellement pour moi comme je le veux ? Est-ce que j'aime vraiment cette fonctionnalité de balayage ? Y a-t-il peut-être une meilleure façon de faire cette transition ? Est-ce que je veux avoir un fond blanc derrière ça ? Peut-être pas. Peut-être que ces couleurs pourraient en fait être plus dans l'espace ici à travers ma vue de caméra sur ce fond particulier. Je n'ai pas non plus fait la prochaine fonctionnalité principale qui serait ce qui se passe quand je prends une photo ici, cliquez sur l'appareil photo et puis le partager. Voilà donc quelques-unes des autres choses importantes que je veux pouvoir ajouter à ce prototype et c'est là que nous en sommes jusqu'à présent. 21. Synthèse: Donc, nous avons parcouru différentes étapes et étapes et en utilisant différents outils pour faire prototyper l'idée de concept et sur votre smartphone. Merci beaucoup d'avoir suivi ce cours, et j'ai hâte de voir ce que vous faites, ce que vous produisez et les prototypes que vous venez avec. N' hésitez pas à me contacter et à partager vos concepts et vos prototypes. J' aimerais voir ce que vous faites, et j'ai hâte d'avoir la connexion et j'espère voir votre application dans l'iTunes Store bientôt.