Les bases du design UX - Créer un prototype sensible dans Axure RP | Sofia Michili | Skillshare

Vitesse de lecture


1.0x


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

Les bases du design UX - Créer un prototype sensible dans Axure RP

teacher avatar Sofia Michili, UX l Product Management | Service Design

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.

      Qu'est-ce que le prototypage ?

      0:52

    • 2.

      Installation de Axure RP

      2:35

    • 3.

      Commencez avec Axure RP

      14:26

    • 4.

      Conception de prototypes mobiles

      22:26

    • 5.

      Conception de prototypes de tablettes

      7:44

    • 6.

      Conception de prototypes de bureau

      10:39

    • 7.

      Publier et partager votre prototype

      6:02

    • 8.

      Projet de cours

      0:45

    • 9.

      Les prochaines étapes

      0:14

  • --
  • 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.

151

apprenants

--

À propos de ce cours

Avez-vous toujours voulu communiquer vos idées visuellement mais pensez-vous que vous avez besoin de bonnes compétences en dessin ? Avez-vous vous vous trouvé vous vous êtes exposé à une chose mais vous avez fait quelque chose d'autre développé à la place ?

En apprenant à créer des prototypes interactifs (également appelés mockups ou frames filaires) , vous pouvez communiquer vos idées de conception rapidement et visuellement, à faible coût et à faible coût. Vous n'avez pas besoin d'être un concepteur pour créer un prototype, vous avez juste besoin de savoir comment le faire. Dans ce cours, je vous apprendrai à créer un prototype interactif et réactif en moins d'une heure pour que vous puissiez apprendre à vous créer des prototypes rapidement et facilement. L'outil que nous utiliserons est Axure RP.

Ce cours ne nécessite pas d'expérience préalable et peut être suivi par tout le monde. Explorez la puissance des prototypes comme méthode de communication de vos idées et vous verrez à quel point c'est utile pour faire progresser votre travail et obtenir des commentaires rapides.

Ressources supplémentaires

Documentation d'Axure sur les vues adaptatives pour la conception sensible https://www.axure.com/support/reference/adaptive-views

Autres bons outils de prototypage

https://www.invisionapp.com/

https://www.sketchapp.com/

Sujets liés à ce cours

  • Design d'interaction
  • Prototypage
  • Conception réactive
  • Wireframes
  • Expérience utilisateur
  • Conception d'interface

Rencontrez votre enseignant·e

Teacher Profile Image

Sofia Michili

UX l Product Management | Service Design

Enseignant·e

My vision is to improve people's lives through technology and my passion is to create digital experiences that customers love. I'm currently developing my own tech product, aiming to bring more transparency in the use of personal data apps and websites have on users. 


With more that 7 years of experience in tech companies creating tech products, I have gained expertise in UX, CX, Product Management and Agile. I am certified UX professional by the Nielsen Norman Group UX, and have obtained the Interaction Design Certification from UC California, at Coursera. Currently, I am improving the usability and conversion rates of the Proximus webshop using data, UX, CX and agile techniques, which has already lead to a significant increase in the online sales of mobile su... Voir le profil complet

Compétences associées

Design Design UI/UX Prototypage
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. Qu'est-ce que le prototypage ?: bienvenue aux problèmes de tapage de base. Je suis Sophia Me. Il a vraiment arrêté l'homme. Il est expérimenté dans la conception de l'expérience utilisateur et ses types de problèmes ont une médaille de communication avec les clients pour obtenir les gens avant le développement. Quel est le prototype ? Protect est une simulation de la façon dont les choses ressembleront à frère, et c'est un message couramment utilisé. Expérience utilisateur Design Femme Total Acting Type de frère utile Aide les coûts de développement propre facilite la communication avec les parties prenantes et les clients et aide à tester les idées et concepts médicaux , pour comprendre leur convivialité et le désir. Dans ce dernier cas, nous allons devoir créer un prototype de site web d'entreprise sur tablette, mobile et ordinateur de bureau. Il n'est pas nécessaire pour ce dernier et aucune compétence de codage requise à la fin de cette classe et devrait être capable de créer vos propres prototypes et certainement avec vos collègues et clients. Commençons 2. Installer Axure RP: avant que nous puissions commencer à créer notre première femme à partir de, nous avons besoin d'une panne pour ce cours. Je vais utiliser la vraie thérapie comme notre Salter pour créer des petits amis. Nous pouvons télécharger le tabouret à partir de leur site web. En fait, c'est mon outil de prototypage préféré. Comme il a de nombreuses capacités pour le travail d'équipe, pour la publication et pour la génération de documentation. L' outil est très facile à utiliser juste retour et déposer les fonctionnalités du côté gauche de votre écran Il a beaucoup d'états différents, . donc, par exemple, nous pouvons changer un écran basé sur différents états. Nous pouvons également créer des diagrammes de flux, par exemple, des conditions. Par exemple. Nous pouvons valider les formulaires que nous pouvons et les directions sur le pic. On peut changer les U.S. U.S Vous pouvez voir ici aussi. On peut rendre le Colton dynamique. Nous pouvons aider différents mangeoires, différentes listes déroulantes. C' est très, très flexible. C' est aussi très facile à partager. Cela fichiers les 15 membres car vous pouvez me publier sur le lecteur de partage réel en ligne. Si vous obtenez que vous êtes un lien que vous êtes concerné venir protéger également être possible et fondamentalement recommandation. Il est également bon de parce que vous pouvez modéliser les flux utilisateur Comment l'utilisateur doit naviguer sur le site Web . Quels sont les prochains états autorisés ? Lorsque les utilisateurs sur le site de l'article spécifique et il était un sens de la documentation générale possible , par exemple, vous pouvez générer de la documentation dans un service avec tous les écrans hors balises que vous avez faites , puis quelques les explications sous ont des débats sur ce que cette page est censée faire, et cela peut être un très bon moyen. Informer les développeurs comment ils doivent être essentiellement site Web. Donc, il est particulièrement utile si vous travaillez avec des choses et enfin, mais non des moindres, vous pouvez également générer du code HTML, qui signifie que si nous créons ici cette page, par exemple, nous pouvons générer des portes marketing eux et de l'or pour ça. Donc c'est un avenir très, très froid si vous voulez créer des sites Web de la mort et je ne veux pas dépenser beaucoup d' argent là-dessus. C' est vraiment génial pour la collaboration et le prototypage rapide. Et c'est en effet la nécessité de ST Leader comme ils disent. Donc je vous invite à aller de l'avant et à télécharger l'essai, donc je vais maintenant descendre. C' est aussi bien que je vais l'installer. Revenez vers vous avec Ne commencez pas 3. Débuter avec Axure RP: ont maintenant à Séoul, Docteur, étant mon ordinateur et je suis prêt à commencer à vous montrer comment vous pouvez obtenir des prototypes. Avec la première fois que tu ouvres. En fait, étant votre ordinateur, vous allez faire ce travail sur mes assises. Si vous utilisez un essai, nous verrons qu'il vous reste 30 jours afin que vous puissiez acheter une licence ou mettre fin à la licence Gardez votre problème tout ce que vous pouvez regarder dans le compte personnel, . mais vous ne le faites pas pour cette démo et vous pouvez toujours utiliser pour essayer pendant 30 jours sans aucun problème. Fondamentalement, ici vous pouvez créer soit savait cinq ou vous pouvez ouvrir des fichiers existants. Pour le moment, nous n'avons pas de combat, Skip, donc nous irons pour vous battre et vous allez aussi obtenir ce tutoriel interactif étape par étape , qui vous explique, comment donne réellement abusive ou vous, Si tu décidais, tu dis de ne pas te montrer de près. Je vais cliquer sur un nouveau cinq. Donc fondamentalement, maintenant ce M. Disparu et moi pouvons vous donner des explications sur la façon dont vous pourriez utiliser après Donc, par exemple, en haut de la page, nous devons acheter ici nous avons des actions de maintien sur le combat. Par exemple, Week-end 85. Adoptez comment nous voulons notre appât, quels éléments nous voulons voir quand nous travaillons avec. On peut en avoir. Probablement vu un échantillon de sport ont été publiés dans la cellule après en ligne, où nous conservons le lien vers une crise cardiaque avec différents utilisateurs. Nous pouvons générer les fichiers HTML à partir de ce que nous pouvons générer la spécification de ward. Ce sont des actions plus avancées pour cette démo. On n'en a pas besoin, mais tu peux vraiment le prendre. Nous pouvons également créer l'équipe. Cinq. Nous pouvons créer un projet d'équipe essentiellement, et nous pouvons travailler avec mes collègues coéquipiers sur le même combat, et nous pouvons les adopter. C' est également plus de réglage adversaires, ce qui est hors de portée de cette formation. Mais vous pouvez également être à la recherche de votre compte enregistré. Cinq. Ouvrir si j'apporte exporter fondamentalement tous les paramètres standard de tous les logiciels sur le côté gauche des deux, nous n'avons pas plus important dans les pages de section que nous pouvons éditer, supprimer ou dupliquer. Les salaires ont été payés. Si je double-clique sur un certain élément, je pourrais nommer Donc, par exemple, je peux nommer ce site apparaît. Franchement, commenté. Ceci est sauvé. Ensuite, je peux renommer aussi payé au son. Je peux supprimer l'appât en prenant un événement comme vous supprimez ou simplement en appuyant sur le fond. Je peux aussi tous ne pas se baser si je les ai creusés et les déposer, ou en prenant pic de fracture et ils vont les déplacer. C' est la même chose pour les bébés en retrait. Fondamentalement, vous avez parlé à chaque pavé de la façon dont vous voulez créer la statue de votre taille. Il est également possible de créer une nouvelle base simplement en cliquant sur cette icône, vous pouvez soit donner le nom. Vous ne pouvez pas être comme ça, tous à la recherche, par exemple, de régulation multi boot. Quelles pages étaient section spécifique du site Web affaibli nom, par exemple, les nos produits, puis nous pouvons faire glisser plusieurs pages en dessous. Donc, de cette façon, nous pouvons créer ceci. C' est ce que nous voulons que les orteils soient plus faciles pour vous. Et si nous avons plusieurs pages, ce que nous pouvons aussi faire, c'est qu'ils utilisent la fonction de recherche. Donc, pour certaines personnes auraient 100 pages ici. Je pourrais faire des quotidiens et trouver le marché en tapant. Il nous fouille les filles. Donc, voici comment nous pouvons surveiller les pages sous-payées section. Vous trouverez les bibliothèques sexuelles. Les bibliothèques sont des éléments de collection. Il y a beaucoup de bibliothèques différentes qui l'a réellement ? Stephen était fondamentalement que nous avons nos formes auraient des formes Goldman. C' est des espaces réservés pour les images. C' est juste que je peux créer des espaces réservés, espaces réservés à travers un endroit. Restez stable sur la page mais nous pouvons la remplacer. Nous avons des fonds bien avoir des regards. On a des titres. Nous avons nos hauts de travaux d'alliance bombardiers dynamiques qui monétisent si vous qui pouvez être adopté affaires. Donc, par exemple, les gens C'est que donc c'est une sorte. Bien sûr que nous pouvons avoir dans la vie. Nous avons des zones de texte. Suivant. C' est fondamentalement cela là-bas ne fournit pas réellement. Aimez-vous une des excuses ? Options, par exemple, s'intègre avec une école se différente ou d'autres types de sites Web. Vous pouvez dominer cette bibliothèque importante et vous pouvez utiliser des portes. Et fondamentalement, quels sujets ? Nous aurions le fond en ce temps. Attendez six. Tu peux le faire. Mais c'est plus avancé. Je n'aurai pas besoin d'écossais. Mais vous êtes différent. Tu fais avec James Library. Tu vois, celui qui dérange le changement à nouveau. Le style Fondamentalement, ce sont tous avec des éléments néerlandais utilisés, mais vous pourriez couler des diagrammes si engagés. Ce dernier n'est pas seulement faire cela pour une bague de femme pour les sites Web, donc je voudrais être à ce. Le dernier est la bibliothèque, ce qui est je ne le fais pas C'est aussi commencé des camps de bibliothèque. Toujours à celui-ci offre avec certains Eichel. Donc, par exemple, si vous voulez avoir un peu plus sophistiqué pour mon ami et coller des formes de base de la justice, nous allons voir Ahmadi selon né pour la coutume de l'explication des nouveaux clients. Donc c'est la façon dont vous pouvez le faire. Excellent toucher. Cinq ans. Vous entendez leurs multiples formes pour parler, pour utiliser comme vous le souhaitez. Allez-y, attendez-vous sous la section bibliothèque des maîtres. Monstres, très composants génériques peuvent être raisonnés marché. Donc, fondamentalement, en créant votre élément maître qui peut chaque site me pour quelque chose que je voudrais avoir une place. C' est un super site web. Le local vient toujours avec le chantier de gauche. Reste debout à droite, Austin. Donc, je dirais votre local et fondamentalement je peux sélectionner un endroit où cela signifie que je peux ou je peux regarder l'emplacement principal qu'il reste au même endroit chaque fois que je donne. Donc si je voulais faire ça, j'ai maintenant un maître. C' est maître. Vous allez à des destins différents et de rester à l'endroit de l'état. C' est donc un excellent moyen d'avoir des partenaires locaux. Avez-vous eu de la nourriture ou d'autres choses qui ne changent pas de côté ? Si vous créez le plus de maîtres dans la section du milieu, nous avons notre lieu de travail principal. Ici, nous pouvons voir les pages que nous avons ouvertes. Nous pouvons cliquer à travers eux pour changer la vue que nous pouvons fermer les pages de. Nous n'avons pas besoin d'ouvrir et comme vous pouvez le voir ici, il y a quelques chiffres sur la gauche et le haut de la base horizontale. Fondamentalement, ce que sont les sont, c'est qu'ils vous montrent combien de pixels les éléments que vous créez. Prenez. Cela signifierait que mon logo prend environ un peu plus de 150 Pick, puisque je peux voir exactement combien de picks est. C' est si je clique sur un élément. Par exemple, si je clique sur ce fond, je peux voir dans cette section, mais la largeur de ce 140 pixels. La hauteur est de 42 images. Ceci est très utile parce que lorsque vous êtes créatif, les sites Web réactifs utilisation mobile et tablette. Vous devez savoir quels sont les os de rupture étaient, par exemple, quel est le poids maximum et la taille que vous pouvez utiliser lorsque vous faites une femme. Donc, afin de vous aider pour cela, vous pouvez faire tous ces guides en cliquant sur Hugh ont été Dragon Doping un guide. C' est essentiellement une ligne pratique qui va vous aider à identifier. Qu' est-ce que vous croyez ? C' est la même chose que vous pouvez faire en cliquant sur le haut ici, Bates et en le déposant jusqu'ici. Donc, cela aiderait votre lorsque vous créez un cadre métallique pour savoir quel est l'espace maximum et de cette façon ou ne pas le dépasser. Dernier et non des moindres du côté droit de votre page. Nous avons les éléments de style que vous pouvez voir ici. Trois baignoires, propriétés, notes et style dans la propriété. Arrête. Nous ne pouvons pas interagir, donc fondamentalement, les interactions sont toutes les actions qui se produiront sur la base d'un certain déclencheur. Supposons, par exemple, que chaque fois que vous cliquez sur le logo, vous voulez naviguer vers la page d'accueil. Cela arriverait essentiellement. Sois une interaction. Ok, c'est un maître, mais j'utiliserai une autre image de cette démonstration. Donc, lorsque vous cliquez dessus, vous pouvez le dire sur le clic. Et puis ici dans cette liste, vous pouvez voir toutes les actions possibles que vous pouvez programmer. Fondamentalement, il ya un énorme moins tout est possible, alors jouez avec elle et voyez ce qui correspond à vos besoins. Mais l'un des plus jeunes qui veulent est d'ouvrir un lien, et nous pouvons vérité ouvrir dans une fenêtre actuelle dans la nouvelle baignoire ou dans une fenêtre pop-up ou une fenêtre parent pour cette démo. Je vais utiliser Nouvelle fenêtre et je vais dire ici, je n' arriverai jamais à la maison donc fondamentalement peut lier à une page existante sur le cadre de ma femme. Et puis je peux aussi m'attarder, s'étendant. Maintenant, je vais choisir la maison, et je vais cliquer. OK, alors qu'est-ce que ça va faire si j'ai un aperçu en cliquant sur cinq ? Donc fondamentalement, si je pouvais cliquer dessus, j'aurais besoin d'aller à la maison. Mais jetez un oeil ici. Je suis maintenant sur cette page. Si je clique sur cette option, cela me prend dans un nouvel onglet comme je l'ai dit à la base d'accueil. Ok, la page d'accueil est vide pour le moment, donc c'est pour ça qu'elle a l'air vide. Mais il fait ce qu'il est censé faire. Donc, il s'agissait des interactions, et vous pouvez voir ici dans le moins plus d'événements. Il y a beaucoup, beaucoup de conditions que vous pouvez utiliser. Par exemple, lorsque vous cliquez sur la page ou lorsque vous faites défiler vers le haut ou vers le bas, ou lorsque vous modifiez les bouches de la touche que vous appuyez sur le clavier. Il y a beaucoup d'événements et vous pouvez essentiellement apprendre. C' est le meilleur. Vous jouez avec elle dans la note, arrêtez d'affaiblir notre documentation. Donc, par exemple, si je veux documenter ce type, je dirais, Oh, c'est une place pour beaucoup, par exemple. Ensuite, si je voudrais à nouveau prévisualiser cela et j'irais à la page spécifique, puis fondamentalement plier. Regardez ici dans les notes Vous pouvez voir ici que c'est un espace réservé pour le nommer. C' est donc une sorte de documentation que vous ne pouvez pas. Donc, lorsque vous définissez le prototype de plusieurs personnes qu'ils ont une idée de ce qu'il s' agit , et puis la section de style du week-end sont vraiment nous appeler une ligne, changer les formulaires, changer la direction de la images et tout. Donc, cela dépend vraiment du type dont vous avez. Par exemple, les options seront différentes. Par exemple, le fond nous pouvons changer le sentiment que nous ne pouvons pas ombres. Donc, nous cliquerions sur l'ombre. On peut vérifier les livres de cette fille et ensuite notre fond aurait une ombre étendue. Donc, il semble plus comme quelque chose de cliquable. Nous pouvons également dire, faire combien nous voulons que l'orteil de l'ombre soit étendu. Donc, par exemple, si je ne voulais pas augmenter ces nombres pour commencer serait plus grand, je pourrais même changer l'appel de l'ombre elle-même. Nous ne pouvons pas nous permettre une forme différente vers le bas. Nous pouvons renommer le bas ici de nommé son de Mick fond Généralement bonnes pratiques pour nommer vos éléments parce que, comme vous pouvez le voir ici dans le contour, qui est un résumé de tout, nous avons assez d'appâts. Au moment où vous commencez à ajouter beaucoup de choses, ils conservent le nom par défaut. Donc, si vous n'avez pas de nom pour cela, vous ne pouvez pas savoir de quoi il s'agit. Fondamentalement, je veux dire, ça donne un bon aperçu, mais il est beaucoup plus facile de faire défiler ces choses une fois que vous lui donnez un nom représentatif , donc nous pouvons aussi ajouter la bordure autour des livres. Donc maintenant la frontière a été ajoutée, ou nous pouvons avoir un rectum plus arrondi. Soit en adoptant les radios de coordinateur, par exemple. Si je voulais entrer ici, alors nous verrions que mon fond devient plus rond. Donc, c'est une façon en fait vous pouvez style, bien que différents éléments. C' était donc une certaine production. Qu' est-ce qui échappe réellement à un bluff ? Sans plus tarder ? Nettoyons notre bureau et commençons à travailler sur notre premier prototype. 4. Conception de prototypes mobiles: dans cette classe, nous allons créer et Responsive site Web afin de permettre un site web responsive en réalité, nous devons vérifier ce chéquiers Adaptive. Cela permettra l'adoption utilisée dans notre prototype afin de définir les préréglages pour nos différentes utilisations adaptatives. Nous devons cliquer sur ce bas homme comme utilisation adoptive et fondamentalement ici, nous allons être en mesure de définir différentes vues que nous voulons pour les tablettes, site Web et mobile. Je suis un fan de mobile d'abord, ce qui signifie que nous avons conçu d'abord pour le plus petit écran et nous passons progressivement vers la tablette et le site Web. Vous verrez que ce métal a des avantages que penser à la plus difficile et êtes-vous au début vous aide à vous concentrer sur les informations les plus importantes que vous avez à mettre dans votre site Web. Et vous verrez également dans le reste de cette classe de cette approche essentiellement nous aide à concevoir plus rapidement, car nous plus rapidement, pouvons réutiliser des éléments pour la version mobile et simplement les étendre orteil inclure la tablette et le site Web. Ok, Donc, pour commencer, nous allons d'abord sélectionner le téléphone Port huit, qui est fondamentalement les presets de téléphone. Donc nous voyons ici que le nom est Portrait Phone dans la barre des témoins sur 320 nous allons ajouter une autre vue, qui devrait être le carburant de la tablette. Comme vous pouvez le voir ici, réel a les préréglages standard pour les autres avis, donc nous pouvons simplement les sélectionner. Notez aussi ici. Ce champ qui a hérité de fondamentalement cela signifie que lorsque nous créons la tablette peu cela va copier ce qui est là sur le téléphone et vous allez voir plus tard combien cela va nous aider. J' en aurai les derniers. Quel est le bureau que vous. Donc, nous sélectionnons grand écran et fondamentalement maintenant j'ai fini avec mon utilisation adoptive donc je peux cliquer sur OK, si vous voulez avoir plus d'options pour le fusible adaptatif et consultez la documentation d'accès sur ce sujet sur la façon de commencer une utilisation productive. Donc maintenant adaptatif utilisateur mis en place et vous pouvez voir ici que nous avons trois différentes baignoire sport il tombe porter tablette et grand écran pas excuser cela. Il ya une ligne pratique qui est fondamentalement de sorte que vous combien avec vous avez, vous savez, bon design et vous pouvez voir comment cela s'étend pour la tablette et pour le bureau, donc cela va être vraiment utile. Nous n'avons pas besoin de dessiner. Une commande supplémentaire est en ligne parce que leur dernière tendance de conception est en remorquage. Avoir un défilement infini. Donc, fondamentalement, nous n'avons pas besoin de mettre un maximum d'orteil car la plupart des sites Web et de Mobil continuent à défiler que nous descendons. Donc, pour ces cours, je me suis inspiré d'un modèle gratuit que j'ai trouvé dans le site gratuit saisit Templates, qui est ce modèle. C' est essentiellement un site Web d'entreprise avec des informations de base, mais j'aime le design propre. Donc, fondamentalement, nous allons inspirer telle de cela et grande une version équivalente dans un cadre métallique. Vous pouvez voir comment cela adopte pour la tablette, et si je fais mon navigateur plus petit, vous pouvez voir comment cela se comporte dans le mobile. Donc, fondamentalement, il s'agit d'une vue mobile. Je me base sur ce modèle. Je vais commencer. Je vais d'abord commencer par un en-tête et un pied de page. Donc, pour cela, je vais entrer dans le logo de la société et je vais utiliser un humble germinal. Donc hamburger Manu est fondamentalement ces trois lignes que j'ai utilisées pour la navigation pour rendre celui-ci un peu plus grand. Et parce que je veux utiliser cette bruyère partout, je vais créer le maître de l'amour. Donc, pour créer un maître, je vais cliquer sur ces deux éléments et je vais taper convertir en maître. Et je vais nommer cette Heather et je vais également sélectionner l'option Localiser maître verrouillé parce que je ne veux pas que cela bouge. Ok, donc mon maître a été créé. La prochaine chose que je veux faire est de sortir quelques images pour avoir un carrousel. Donc fondamentalement, je vais laisser ça dans beaucoup d'espace réservé ici, et je vais en faire un Bonnel dynamique. Ok, alors faites attention ici à Dynamic Panel. On peut créer ça en disant Parnham dynamique, et je vais nommer cette grange dynamique et Carcelle. Ok, alors qu'est-ce que ça va faire ? Fondamentalement, cela peut changer de vue en fonction de certaines conditions. Donc, cela signifierait si je balaie, par exemple, vers la gauche ou vers la droite. Je peux le voir différemment, donc je peux dire ici que je peux nommer les États. C' est beaucoup, et j'utilise celui-ci. Ok, c'est juste un détenteur de place, mais je peux dupliquer ces états. C' est le moyen le plus rapide. Si vous utilisez juste des images et disons que si je veux utiliser deux ou trois images, je peux dupliquer cela en rassemblement. D' accord ? Je ne veux pas utiliser le 3ème 1 en fait, alors peut-être que je vais juste le supprimer. Je peux aussi changer Les états donnent une priorité différente en les balayant. Je vais le garder. Non, comme avant. Et en plus de ça, je ne ferais pas de SMS. Donc je vais dire comme ils disent sur le site. Nous sommes une agence de design minimale. Ok, je veux que ça arrive en deux lignes. Alors, je vais Toe Dragon. Probablement autour. Je peux en ligne au milieu, être de ce roi du fond. Et fondamentalement quoi ? Je peux aussi le faire si je veux personnaliser le texte. L' Angleterre. Aiken, prends ce texto. Je peux le couper avec le contrôle et X, et je peux les placer à l'intérieur du beaucoup donc si je place cela ici va tous être visible dans un des deux états. Et disons dans la seconde, le plus que je veux vouloir quelque chose de différent était le texte. Donc, je suis en train d'ajouter, Nous sommes ici je voudrais déplacer est un peu plus si je ne contrôle et jusqu'à ce mouvement stand parle d'autre. Si je fais juste vers le bas, il se déplace d'un pixel pour déplacer cela aussi bien. Ok, Bert. Maintenant, nous avons les deux images différentes. Ajoutez-le. La prochaine chose que je veux faire est de remorquer. Avoir plus d'informations sur l'entreprise. Donc, pour ce faire, je vais ajouter un peu de confiance. Ecoute, parce qu'on ne veut pas que tout soit complètement blanc. Donc, je vais utiliser ces livres, et cette boîte sera essentiellement utilisée comme un conteneur vers un texte. Donc, ici, nous pouvons prendre un autre cap. Nous sommes une agence de design en Australie. Cela encore une fois en me basant sur l'exemple. Et ici. Ok, on ne peut pas faire un texte pour le moment. C' est juste un test payé. Donc je vais juste prendre le paragraphe. Ok, Peut-être un peu plus de texte, et puis je vais aligner ça sur la meilleure façon de nourrir le bloc. Je peux aussi juste rendre le bloc plus petit afin que je puisse juste, comme, faire le plus petit en ajustant juste la taille. Donc de cette façon, je ne savais pas quelques informations sur le Kobani. Ok, la prochaine chose que nous pouvons faire est de remorquer bizarre. Certains des services que nous fournissons éventuellement afin que nous puissions élargir ce bloc, fondamentalement et pas d'autres sections. Donc, si je le voulais, je peux simplement copier les étiquettes pour plus vite. Donc je suis juste copier badigeonner avec contrôle C et contrôle étant. Et je vais dans une section différente ici les services que nous offrons et je vais être bizarre ici. D' autres étiquettes que je vais à Okay, j'aimerais avoir le même téléphone, donc je vais aller orteil. Tu vois ? OK, c'est en utilisant un point 14 de ce A 13. Je vais utiliser les 14 deux. Je vais aligner ça un peu plus, et je vais déplacer ça plus bas pour avoir un peu d'espace propre. Donc, je vais ajouter un texte à quelqu'un. Et est-ce fait l'optimisation, par exemple ? Donc, ce sont toutes les offres de la société de services, Donc, nous avons fini avec l'introduction de la société. Maintenant, nous ne pouvons pas. Certains émergent aussi pour le rendre plus visuel. Donc, ce que nous pouvons faire, c'est glisser et déposer à nouveau. L' espace réservé 40 beaucoup est et puis juste que multi beaucoup est l'un sous l'autre. J' adorerais pour les images ce qui allait orteil copier coller. Cela fondamentalement avec contrôle C va laisser un peu d'espace blanc entre le jeu ressemble le même. Je fonde celui-là aussi. E et moi avons presque fini maintenant. Nous sommes aussi à la pointe. Autre citation. Donc, fondamentalement, nombreuses entreprises citent parfois des clients qui sont satisfaits d'eux et disent que nous construisons un site Web d'entreprise. Nous pouvons le faire aussi. Et voici ce que certains contrastes nous pouvons utiliser la couleur plus foncée afin que nous puissions aller dans la section champ et nous pouvons choisir une nuance plus foncée de gris. Quelque chose comme ça, par exemple. Et je vais faire glisser et déposer le texte. Donc encore une fois, je vais laisser tomber l'étiquette MM. Peut-être que je vais aller aux pieds. Ou peut-être le texte du paragraphe. Je vais le rendre plus petit. Je vais faire la taille de celui-ci plus grand de la forme et pour un peu plus d'impact, je vais mettre ça en italique, aller bouger un peu du texte, et je vais aussi avoir les noms, tous les gens que je vais faire. Aussi la couleur blanche, la couleur du texte blanc. J' irais ici et je vais changer le téléphone pour le col blanc et je vais avoir le nom de l'ours qui a donné la citation. David Brown. Oh, fais-tu le gardien de but directeur de la hache, par exemple. Cela n'a pas besoin d'être en italique. Je vais juste l'adopter. Et fondamentalement une autre chose que nous pouvons faire est d'avoir plusieurs citations. Donc, pour ce faire, nous allons utiliser la Carcelle autour des pensées afin que nous puissions simplement sélectionner sur les lèvres, rendre ce peu plus petit, affaiblir et sur les côtés ici, Commençons 15 par 15. Cela semble OK donc nous pouvons avoir plusieurs fois quand nous voulons voir la citation suivante. Je vais juste supprimer la bordure pour que je puisse le faire en cliquant sur cette icône. La bordure est complètement enlevée, et je vais juste copier coller ce trois fois c'est. Nous avons trois citations qui vont déplacer cela au milieu de la page, et disons que celui-ci est le milieu. Donc, fondamentalement, cela signifierait que c'est l'actif, et les autres doivent être sur différentes couleurs afin que nous puissions distinguer entre lequel est l'actif. Dans quel témoin Not. Donc je vais utiliser ce type de gris, le même pour l'autre. Donc encore une fois, cette copie, le plus froid parfait. Un peu plus à réciter. Et je pense que c'est une grande partie de la réunion. Ok, la même chose pour l'autre. Alors, Kansas, copiez dans la glacière. Parfait. Un peu plus sur le côté. Et je pense que c'est à peu près dans les médias. Ok, la prochaine chose fera ça. Quoi ? Quelques informations sur les réseaux sociaux au sujet de l'entreprise. Donc, nous ne pouvons pas Google Facebook et Twitter Icahn. Donc je vais chercher ceux dans les icônes ici que je peux. Je cherche juste la corde du dragon sur Facebook. Tweeter. Je vais les redémarrer plus tard. Donc, pas de soucis au sujet de cette icône LinkedIn ainsi Nous avons besoin lorsque activé Google. En plus, voilà. Je pense que celui-ci est le dernier local. Je peux juste le laisser tomber. Donc on va les rendre un peu plus petits. Je vais essayer. C' est un procès en arabe. peu près, vous devez jouer avec les chiffres. Celui-ci n'a pas l'air si génial. Tout comme Dragon Dope quand vous êtes satisfait de la forme et puis la chose de lien aussi bien. Faisons le Facebook de son plus petit. Oui, et déplaçons ceux-ci. Mais 12 plus alignés et affaiblir notre Ceux ont été étiquetés en plus de ce dire présence des médias sociaux , les médias sociaux par la présence sociale pourrait rendre cela un peu plus grand. Et nous pouvons sélectionner ces icônes en cliquant comme ceci. Nous pouvons sélectionner plusieurs fois, et nous pouvons les déplacer avec contrôle et vers le bas Arnold. Donc je déplace juste un peu plus de loi. Et je vais aussi ajouter des informations sur l'emplacement du bureau. J' espère que cet endroit maintenant, voici une adresse de poussière maintenant, dit Regent Street, Londres. Je ne sais pas si c'est l'or des falaises, mais d'accord. Et alors nous aurions également besoin de la section contact pour que les gens puissent nous contacter. Donc, encore une fois, je vais copier ces étiquettes que je dirai ici, conduire des informations qui vont à l'esprit mon adresse. Je suis un téléphone. C' est juste le retour à la maison. Ce serait essentiellement tout ce dont nous avons besoin. Laisse-moi juste une poussière, un peu d'espacement. Je pense que ça le ferait. Et éventuellement, Nous pouvons également ajouter des informations sur les droits d'auteur. Je ne mérite pas les droits pour ça, OK ? C' est juste et éducatif. Faire n'importe quel cas quelque chose allait rendre ces droits d'auteur impliquer un peu plus petits. Ok, c'est peut-être trop petit, et je vais me droguer et le déposer ici. Et je pense que ma version mobile avait disparu. Donc maintenant, pour prévisualiser pourrait prototype, je vais à l'aperçu, d' accord, comme un cinq. Et cela ouvrira le navigateur. Et je peux voir ici à quoi ressemblerait ma version mobile du site. Donc, si je continue à défiler le plus, je peux voir ici qu'il y a plus d'éléments avant de commencer avec la tablette. Vous je vais juste faire de cette citation carcelle signifiant plus donc je vais revenir à mon prototype et je vais convertir ce quand panneau dynamique comme sur tout ce qui est inclus là je dirai panneau dynamique compétitif. Et je vais nommer ces citations. Je vais orteil nom cet orteil de la cour parce qu'il est le 2ème 1 Et je vais dupliquer ce fois afin que je puisse obtenir deux autres états et puis nom d'or est citation un et puis cool fondamentalement pas mettre. Trois devraient être le 1er 1 Et puis citer un viendra après. Donc, pour la Cour Trois, nous allons cliquer deux fois pour aller à l'intérieur. Je vais changer de nom. Je vais juste me changer ici. Les noms. Je vais inventer quelque chose Jour après. Fondamentalement, c'est le 3ème 1 Donc ils devraient être les blancs. Donc je vais juste déplacer celui-là ? Non, l'autre, Buck. Maintenant, je l'ai maintenant pour un froid. Je vais faire la même chose. C' était pas 108 alors je vais juste le taper. Et c'était un 138 et je vais changer à nouveau. Le nom de la maison. Cette personne va être un moniteur numérique. Comment pouvez-vous payer ? Ce sont donc des clients très reconnaissants. Ces trois et ce que je vais faire, c'est que j'y vais maintenant. Retourne à la maison. Je veux que cela change l'état. Un autre panneau dynamique est donc prêt. On va le programmer pour jouer toutes les cinq secondes, une citation différente. Pour ce faire, nous allons aller dans les directions dans l'affaire et nous allons aller dans les sorcières puis dans la bande latérale de l'État. Nous allons sélectionner le panneau dynamique des guillemets et ils allaient dire sélectionner l'état suivant . Fondamentalement, cela va juste déplacer le panneau dynamique vers l'état suivant et nous allons la voir de dernière à la première. Cela signifierait qu'il répète les prochaines en fin de compte. Et puis nous dirons : Répétez tout ici. Nous allons changer cela à cinq secondes et cela déclenchera également un délai de cinq secondes lorsque nous avons ouvert le site Web pour la première fois. Donc, si je choisis OK ici et que j'ai prévisionné ceci, vous verrez que si j'entre dans cette section, cela va commencer à changer toutes les cinq secondes. Vous voyez maintenant que ça a changé. C' est donc un excellent moyen de mettre l'accent sur certains éléments interactifs sur notre site Web. Nous pourrions parfaitement faire la même chose avec beaucoup est avec ce genre d'images ou tout ce que nous voulons . Donc maintenant, qui sont mobiles. Buis a fini. Passons à une version tablette du site 5. Conception de prototypes de tablette: Maintenant que nous avons terminé avec la création du prototype mobile, la création de la tablette et de la version de bureau est un morceau de gâteau. C' est parce que nous avons défini l'utilisation adoptive. Donc, fondamentalement, nos types de problèmes ont le capital mari déjà dans les différentes versions. Comme vous pouvez le voir ici maintenant, je suis dans la tablette vous et c'est déjà faire face. La même chose vaut pour le bureau. Vous, comme vous pouvez le voir ici, cela a été aussi corporatif et nous avons la brise maximale. C' est défini. Donc, fondamentalement, la seule chose que nous avons à faire est d'étendre ces utilisations adaptatives à la marche de notre cible Vous. Donc fondamentalement, je vais juste cliquer sur l'en-tête. Je vais dire « échappée », donc ça veut dire que je libérerais le design initial de la bruyère. Donc de cette façon, je peux bouger ça. Je vais juste à des endroits à gauche et fondamentalement je vais faire glisser et déposer le reste des éléments ainsi pour créer la tablette vous. Donc ce que je vais faire, c'est que je vais faire à l'intérieur de la cellule de voiture et je vais adopter la voir beaucoup venir juste aller orteils, glisser et placer le texte au milieu et je vais faire exactement la même chose pour la seconde. La plupart et vous allez voir la même chose exactement ici. Donc, si je sors maintenant de la liaison en cliquant sur la maison de héros, je vois déjà que cela a été élargi. La prochaine chose que nous voulons faire est d'élargir notre texte. Donc nous allons élargir ce type et en gros une autre chose pourrait donner. C' est trop. Je vais adopter Cela n'a pas atteint le maximum, mais d'avoir un peu d'espace blanc. D' accord, rentre à la maison et puis adopter ce qui soupire de cet orteil bloc, passer par l'esprit entier et ce que nous devrons aussi faire est de déplacer nos éléments vers le haut, laissant un peu d'espace entre les deux. Et je vais juste faire glisser et déposer des éléments de liste essentiellement, juste en les sélectionnant tous ensemble et en sélectionnant le pire. Je ne veux pas avec ça aussi. Vers le haut. Rendre ce bloc un peu plus petit. Parfait. Allons aligner ça un peu mieux, d'accord ? Et puis, en gros, la seule année qu'il nous reste quelques choses. Nous avons besoin d'orteils pour que cette image soit un peu plus grande. Donc, je vais juste prendre les orteils comme ça et cela va essentiellement élargir la taille. Et je suis juste que j'ai deux options. Soit je peux juste faire le même manuel pour les deux autres où je vais supprimer ces trois . Et je vais juste copier ça 30 fois de plus. Je découvre que c'est plus facile. Dit que je me souviens des dimensions. Donc je vais juste le faire à partir de cette copie en les collant. Je peux même copier ces deux-là ensemble, devenir paresseux. Donc de cette façon je ne peux pas décider de concevoir Pasteur. Donc, j'ai déjà 40 Beaucoup va bien. Je vois maintenant que mon pâté de maison derrière son mari n'a pas fait ce que je peux faire parce que je me souviens où c'était. Je vais droit Cliquez ici et je dirai sélectionner. Tous appartiennent et ce que cela fait est de sélectionner tous les éléments sous ma cellule. Un excellent emplacement. Je vais répondre aux orteils comme cette image, et je vais juste déplacer ceux avec le contrôle et empilés Parfait. Donc maintenant l'est apparu à nouveau, et je vais juste faire glisser cette citation. D' accord ? C' est un équilibre dynamique, ou je peux le faire glisser. Cela signifie que je dois aller à l'intérieur, et je dois l'étendre de cette façon. Je voudrais aussi avoir un peu d'espace, mais je ne me souviens pas à quoi ça ressemble. Donc, je vais aller à nouveau en dehors de la perte de cheveux, mon buba, qui peut le réinitialiser en allant vue des orteils. C' est toi ? Ok, maintenant j'ai mon oui. D' accord. Parfait. Ça a l'air bien. Donc je vais retourner dans le panneau. Je peux simplement copier ces dimensions pour les autres images. Eh bien, il suffit de faire glisser et déposer le texte pour agrandir la vue entière. Déplacez le texte entre plus d'amour. Là, vous l'avez. Et puis faisons juste ce rectangle un peu plus petit. Nous n'avons pas besoin de beaucoup d'espace. Et faisons exactement la même chose. Donc je vais juste faire face à ces dimensions au deuxième bloc. L' autre était 743 d'erreur. Pas de livre vers nous. J' ai repris. Donc je peux juste aller dans chaque bloc et le médecin corrige l'esprit et la taille parce que je ne m'en souviens pas par coeur. Je vais au premier état. Je pense qu'ils sont sur le rectangle et ensuite je peux voir ici les hauteurs de l'esprit. Parfait. Donc, c'est aussi maintenant fait. Et la dernière chose est les coordonnées que je peux simplement glisser et déposer l'impact ici. Il n'y a pas tellement d'informations. Deuxièmement, gardez ça en dehors de ça. Mais ce que je peux aussi faire est orteil avoir ces blocs pour deux sens que je peux déplacer cela, contacter la commission vers la droite et créer de cette façon Deux colonnes environ au milieu de l'appât. Quelque chose comme ça. Et je peux déplacer la présence sociale ici et tous les droits réservés signés sur le côté droit , ou éventuellement voler sous les images. Mais je peux le faire comme ça. De cette façon, je peux également économiser de l'espace et avoir un plus adaptatif vous. Alors passons un aperçu de ceci et, fondamentalement, nous voyons toujours que la vision mobile est ici. Pour la vue tabla, nous devons cliquer ici, puis sélectionner adoptif vous et sélectionner la bonne tablette portrait sens . Cela va essentiellement nous montrer la tablette conçue pour que nous puissions voir ici que sont la conception a été adoptée. Il ressemble en effet plus à une vue de tablette. Donc c'était une fille. Nous allons voir les changements que nous avons fait et il semble assez bon et je peux vendre avec les devis est également en mouvement. Dans la vidéo suivante, nous allons continuer avec la même approche et construire le bureau de vous. 6. Conception de prototypes de bureau: pour la conception du bureau. Nous allons travailler exactement de la même façon que pour la tablette. Vous Nous allons aller dans le vous adoptif pour les dimensions désespérées grand écran. Et fondamentalement, il verra que sont des éléments volent dans la page. Mais les dimensions maximales ont été augmentées à 1200 pixels. Nous allons travailler de la même manière et étendre ces éléments pour prendre la plupart de la page dans un téléphone mobile et tablette vous Nous avons utilisé ce hamburger, Manu pour la navigation dans le bureau. Nous pouvons remplacer ce hamburger Manu par une navigation complète de sorte que nous ne pouvons pas vraiment étiqueter des liens pour nos utilisateurs dans la navigation sur le site. Par conséquent, nous allons supprimer cette navigation. Manu, on va ajouter de vraies étiquettes. Je vais utiliser les travaux à la maison pour que l'utilisateur puisse fumer. Nous retournons à la maison tresse nos services. Fondamentalement, je fais correspondre le contenu de la page avec une navigation Manu. C' est la chose la plus logique pour l'utilisateur naviguer à l'intérieur du continent. La prochaine chose serait notre portefeuille. Si vous voyez que cela arrive dans la ligne, cela signifie que la méchante sorcière n'est pas assez grande. Donc juste camion et espère que ça. Ensuite, nous avons nos témoignages. Donc, les citations sur les clients mieux rouler autour sous la page. Nous allons déplacer ces choses un peu plus sur le site et les rendre un peu plus petits. Quelque chose comme ça. Et je vais maintenant aligner les orteils mieux l'espacement. Je vais aussi avoir le lien pour les contacts. Fondamentalement, je veux que ce soit nous près de la fin de la page que possible. Quelqu' un a été prouvé l'espacement plus loin, quelque chose comme ça. Et maintenant, la prochaine chose est orteil, faites que cela semble beaucoup maximum avec Ok, faisons ça. Nous devons aller à l'intérieur de la famille dynamique et utiliser nos guides ici pour utiliser tout l' espace sur la ligne. C' est au milieu de la même façon pour l'autre. Ce qui a l'air. Donc, si nous retournons à la maison Bates, nous pouvons voir que c'est maintenant fait. Ok, l'image est un peu petite, donc ce que nous pouvons, en fait, faire aussi, c'est la rendre plus grande. Eh bien, l'espace pratique depuis que nous avons l'espace sur le disque vers le haut, les endroits ont été plus bas Tous Disons que nous faisons trois bricolage Pour des raisons pratiques , nous ferons la même chose pour l'autre. Donc si on rentre à la maison, mais on devrait voir que celui-ci est vraiment plus grand maintenant. Ouais, Okay, encore une fois, nous avons le même problème qu'il ya des éléments de derrière sont venus sur notre page affaiblir juste à la même astuce nous avant si sélectionnable ci-dessous. Et puis avec le contrôle et la flèche vers le bas, nous pouvons déplacer ces choses vers le bas. Ok, donc maintenant je peux voir à nouveau mon bien. Maintenant, vous devez mettre à jour ce texte pour prendre aussi le maximum d'espace. Donc, nous allons glisser et déposer ce bloc sur le côté maximum et le texte peut également être étendu plus. En fait, ce que nous pouvons faire, c'est que nous pouvons garder cela comme ça et que nous pouvons placer les services que nous offrons exactement à côté de lui. Ce que nous pouvons également faire est d'entrer pour améliorer les téléphones. Nous devrions donc rendre les téléphones légèrement plus grands parce que l'espace à l'écran est plus grand. Ok, Ce texte peut aussi être Ingres en taille. Donc maintenant, nous devons améliorer l'espacement entre ces éléments Nous allons les déplacer un peu plus vers le bas, avoir un peu d'espace entre eux. Faisons la même chose pour notre deuxième colonne. Quelqu' un à augmenter à nouveau. Déformé. Ces autres articles sont bien, c'est invisible. Se déplacer entre eux. Non, ça devrait être bien. Le bas peut également être des bits plus petits. Ok, parfait. Et maintenant, nous avons déjà beaucoup est ce que nous ne allons pas faire est de remorquer augmenter les symétries et mettre effectivement sur sa ligne. Donc, nous allons les faire hors taille égale, et je vais juste les supprimer et fondamentalement simplement copier coller, comme je l'ai fait dans la tablette et la vue mobile. Muchas, c'est fini. Je copierais à nouveau. Donc, nous n'avons pas six émerges et puis la prochaine chose à faire est de remorquer augmenter la taille des citations ont l'esprit maximum. Donc, je vais à nouveau aller à l'intérieur du panneau dynamique, et je vais faire ce tireur d'esprit usagé. Je veux seulement vivre 10 pixels, donc ce serait à propos de la taille correcte. Je vais placer ça un peu plus au milieu et faire en sorte que la seule ligne prenne tout l' espace. Quelque chose comme ça. Je vais bizarre dans le Magoo. Je vais bouger ces choses. Et celui-ci, le nom de la personne était juste au milieu. Je ferai exactement la même chose pour le deuxième état et je reviendrai vers vous. Ok, je suis de retour. Les citations sont maintenant faites. Je ne réponds pas non plus à certains autres éléments du site pour un espace optimal. Je vais sortir pour déplacer ce manteau plus haut et la dernière chose que je vais faire est de mettre à jour les coordonnées pour que tous viennent en une seule ligne. Donc je vais déplacer ces éléments. Oh, ici pour être du même côté. Fondamentalement, mon site Web est fait, donc si vous voyez cela, il semble très bon. Alors passons en revue. Ouais, donc nous avons notre navigation complète. Manu, nous avons déjà des dingues. Nous avons notre description des services. Nous avons les exemples de portefeuille. Nous avons le cours de leur déplacement et nous avons notre nourriture. Donc, fondamentalement, notre site Web est complet comme une étape facultative. Vous pouvez remplir ce site Web avec des images personnalisées ou des couleurs ou des téléphones et le site Web aura air beaucoup plus réaliste. Et comme un réel et le résultat, je vais remplir ce site dans les trois différentes utilisations adaptatives avec quelques photos et téléphones, et je vais revenir vers vous pour vous montrer le résultat. 7. Publier et partager votre prototype: ont maintenant aux images colorées à mon prototype, et je suis prêt à en prévisualiser. Comme vous pouvez le voir ici, il ressemble à un vrai site Web. J' ai dérangé les images, donc vous pourriez certainement montrer cela à un client avant d'investir ici pour eux construire un vrai site Web. Nous pouvons également regarder une vue seins nus afin que vous puissiez voir ces regards exactement les mêmes. Mais il a la tablette adoptive vous et la même chose vaut pour le téléphone mobile. Donc, vous pouvez voir quelle grande différence la couleur que vous faites beaucoup. Donc, fondamentalement, votre site Web est prêt. Vous pouvez prévisualiser cela à un client et vous pouvez le client et vous donner toutes les adaptations qu'il veut. Mais l'effort que vous devez dépenser pour changer cela est minime. Et c'est un excellent moyen de vraiment développer des produits à partir de zéro en une toute dernière fois sans avoir à dépenser de l'argent supplémentaire. Et la ressource est en cours de refonte. Une autre grande chose sur les actions que les commentaires est que si vous avez dit ce Toto, cela va redimensionner en fonction de la taille du navigateur. Donc fondamentalement, comme vous le voyez ici, c'est devenu maintenant le comprimé peu et puis si je le fais plus petit, il va orteil rétrécir Botham au-dessus de vous. Ici, c'est. Vous pouvez voir ici le mobile de vous. L' une des fonctionnalités les plus utiles que r p fournit réellement est la publication et les capacités syriennes . Fondamentalement, si vous avez terminé avec ce problème est arrivé, vous voulez le partager avec plusieurs personnes. Il y a plusieurs façons que vous pouvez le faire si l'autre personne utilise également réellement être. Vous pouvez exporter le feu RPI en enregistrant. Donc, fondamentalement, lorsque vous enregistrez ceci, vous allez obtenir le fichier réel et ce sera un fichier RB. C' est l'une des autres façons de le publier efficacement en ligne. Donc, vous voyez ici si vous allez à Publix, vous avez l'option publié part de corruption. Donc, ce que ça fait, c'est que si vous êtes renversé la part nocive, je vais vous montrer comment faire ça. Vous allez réellement partager dot com. Donc, fondamentalement, c'est l'environnement de ligne sur réel qu'il vous donne gratuitement pour un utilisateur d'héberger vos sites Web. J' ai déjà un compte, mais n'hésitez pas à m'inscrire si vous ne le faites pas C'est très facile. Donc je vais regarder dedans et vous pouvez voir ici que j'ai mon espace de travail et mes projets. Donc fondamentalement, dans ces fichiers, je peux télécharger mes prototypes et je peux les partager avec sa parole avec d'autres personnes. Donc, si je fais l'option de publication ici après un long vert, j'ai donc besoin de regarder ici à nouveau. Tu l'as maintenant. Je viens de l'ouvrir dans le navigateur, donc c'est normal. Donc, vous juste que vous utilisez le même compte que vous avez, et puis il va chercher essentiellement tous les dossiers que vous avez sur votre partage afin que vous puissiez donner le nom. Vous pouvez définir l'activité de configuration. Qui visite l'amendement ? Vous pouvez définir un mot de passe. Ceci est également très utile au cas où vous ne voulez pas que quelqu'un puisse y accéder. Et vous pouvez sélectionner l'un des détenteurs existants que vous avez. Par exemple, moi. Je n'ai que mon titulaire de projets, mais je pourrais parfaitement faire un dossier pour différents projets que je travaille. Donc je vais juste utiliser celui-là. Ok, il l'a sélectionné. Donc maintenant je clique juste sur publier et ça va aller orteil uploadé sur Mr Dive dans ça va me donner ce lien, donc ce sera le lien que je peux partager. Et si vous ne voulez pas avoir cette barre latérale sur la gauche que vous avez, une est générée. Vous pouvez sélectionner cette option sans barre latérale. OK, c'est fait. Je vais y faire face. Donc, je vais juste la base de l'orteil ici dans le navigateur. Et vous pouvez voir ici que cela est accessible pour tout le monde Donc je peux dire cela avec des clients ou avec des collègues. Je peux le mettre en signet. C' est vraiment facile si vous avez déjà publié le fichier et que vous voulez juste faire des adaptations ou Newton republié à nouveau, vous allez juste publier Doctor sir publié puis mettre à jour le projet existant. Ensuite, dans cette liste, vous pouvez sélectionner le projet sur lequel vous travaillez. La dernière façon dont vous pouvez publier est de générer des fichiers HTML, donc cela générerait essentiellement le froid HTML. Faisons ça. Vous devez sélectionner le dossier que vous souhaitez utiliser, et il y a quelques options supplémentaires, par exemple, pour quels navigateurs qui devraient fonctionner. Ensuite, si vous voulez avoir la barre latérale, puis des options supplémentaires comme l'utilisation adoptive et alors vous pouvez même sélectionner les pages que vous voulez et quelques choses supplémentaires par défaut, tout sélectionné. Mais allez-y et personnalisez est la façon dont vous voulez. Donc, si je génère ceci, vous êtes assis ici que le chemin est fichier documents Sophia. Ou en gros, il publie ceci dans mon ordinateur. Donc, fondamentalement, je navigue dans ce chemin. Vous considérez que le dossier a été créé pour HTML. Mais voici 15 et vous pouvez voir que je peux ouvrir ça. Ok, parfait. Donc, pour mon ordinateur peut ouvrir cela. Donc fondamentalement, je peux juste donner ça à un développeur. Si je suis satisfait de son design. Le concours des développeurs. Intégrer ce téléchargement sur un serveur sur le site Web est vraiment prêt, sorte que vous pouvez voir que c'est simple code est fait. Si vous ouvrez ceci avec une note, mais avec un autre outil de développement, vous voyez ici que tout le code HTML est généré. C' est vraiment, vraiment, vraiment utile parce que si vous voulez juste un site Web simple comme celui-ci, il n'y a aucune raison. Fondamentalement, orteil développeur ours faire les travaux jusqu'à de Scotch pour vous si vous êtes satisfait de son conçu vous-même. Alors maintenant que nous savons comment faire un cadre métallique et le publier en ligne, passons dans le projet de classe 8. Projet de cours: pour le projet de classe. Le défi est de créer votre propre utilisation de site Web, en fait étant les techniques que nous avons appris dans cette classe pour créer un site Web de votre choix, soit pour bloquer un site Web professionnel, une boutique en ligne ou tout ce que vous pouvez venir avec. Vous pouvez le rendre réactif si vous le souhaitez, mais ce n'est pas nécessaire. Assurez-vous simplement de le publier et de partager le lien avec nous. Dans la section projet de classe, vous pouvez trouver la section projet de classe sous la classe dans la section de votre projet. Ici, vous pouvez trouver plus de descriptions, et vous pouvez voir quelques sites Web où vous pouvez vous inspirer pour créer le vôtre. Il suffit donc de poster votre projet ici avec nous. Et je vais aussi télécharger le réel tiré du site Web que j'ai créé pour vous aider à démarrer. Bonne chance. 9. Les prochaines étapes: merci d'avoir investi du temps dans cette classe. Maintenant, vous pouvez commencer à créer vos propres types de frères et impressionner vos clients et collègues . Si vous aimez cette classe, s'il vous plaît aimer et partager et suivez-moi pour être averti pour les nouvelles classes. Joyeux frère tapant.