Transcription
1. Introduction au cours: Qu' est-ce qui se passe, tout le monde ? Il est juste dans Black Bear Creative. Je suis le concepteur principal Ah, et propriétaire et opérateur de BlackBerry Creative. Et aujourd'hui, j'ai une autre classe que je voudrais partager avec vous et ça s'appelle le
processus de conception . Donc, ces cours pour vous enseigner le cadre que nous utilisons lorsque nous prototypage différents sommets de systèmes
logiciels pour les sites Web et APS. Alors avant que j'aille plus loin, qu'est-ce que tu es ? J' ai conçu votre I design signifie la conception de l'interface utilisateur. Donc l'interface utilisateur, ou vous je suis l'espace façon dont les humains et les ordinateurs interagissent pour que vous je puisse également inclure des appareils
physiques réels tels que les ordinateurs, les appareils
mobiles tableau du
gardien, l'écran, la souris. Mais il peut également se référer à des systèmes logiciels ah, sites Web et des cartes qui aident à utiliser, former, tâche ou effectuer des actions. Donc, dans ce cours, je vais discuter plus de la lettre Ah, donc plus sur les sites de systèmes logiciels dans APS. Ce cours est plus pour le designer freelance qui est nouveau dans le design numérique. Concevoir des sites Web qui conçoivent des interfaces sur et est une sorte de pointe. Ajoutez votre design à leur boîte à outils de conception ou vous voulez simplement améliorer ou avoir une sorte de base hors. Quel type de processus utiliser lors de la réalisation Vous êtes des projets. Qu' est-ce que tu vas apprendre dans ce cours ? Fondamentalement, dans cette classe, je veux vous apprendre comment les projets finaux. Problèmes dans les objectifs. Comment planifier et esquisser le processus utilisateur ? Quoi ? Notre fil encadre quelques conseils de gain de temps lors de prototypes interactifs créatifs que nous avons appris au cours des trois dernières années d'utilisation de ce cadre, le processus de rétroaction et la façon de préparer le projet pour le développement. Si vous ne me connaissez pas et que vous n'avez pas vu aucun de mes cours auparavant sur le propriétaire opérateur de Black Creative, c'est un studio de beauté ik maison basé dans la belle Australie. Donc, je suis dans l'industrie du design depuis toujours une demi-décennie et étant en cours d'exécution noir, prêt à
cuire, plein et presque d'années peur. Maintenant, euh, nous avons utilisé ce framework pour ces facilités gratuites, et nous avons travaillé avec des clients un si étrange parce que les banques, les startups
innovantes, les systèmes logiciels
compliqués et même locaux sites Web d'entreprise. Il est donc très polyvalent et peut être utilisé sur n'importe quel haut de l'application ou quelle que soit la complexité. Ce que je t'enseigne n'est pas nouveau. Il est basé sur, vous savez, un sprint de design typique, qui est utilisé dans l'industrie. Mais cette version est une rationalisation très réduite. Um, cadre
facile à comprendre que tout le monde peut comprendre que tout le monde peut utiliser dans sa pratique de conception quotidienne. Donc, en faisant cette classe, vous devriez avoir une meilleure compréhension de la façon de compléter un projet You I design avoir une
sorte de cadre lorsque vous prenez un sommet de projets logiciels. Donc ce cours n'est pas vraiment pour l'avance. Vous êtes des designers. Je vais toucher sur beaucoup de choses fondamentales de base sur vous sont conçus. Cette classe est plus pour quelqu'un qui est nouveau dans l'industrie. N' a jamais travaillé sur un,
euh, euh, vous je conçois un projet avant ou une sorte d'être dans le côté de l'impression de l'industrie du design et je
veux en quelque sorte ajouter cela à l'arsenal de compétences. Donc c'est pour toi. Je suis fortement recommandé que vous ayez appris ce cadre afin que vous puissiez continuer et fournir un
service supplémentaire sur DA toutes les autres choses que vous faites. Donc cette salle de classe, n'importe quelle bande à 60 minutes, je vais faire de mon mieux pour passer à travers et condenser beaucoup d'informations en une seule clé. Points à emporter dit que ce n'est pas une classe de tutoriel de conception. Donc, si vous n'avez jamais utilisé de logiciel de conception auparavant, je vous recommande fortement de faire d'autres classes qui vous
enseignent les fondamentaux de base utilisent les outils car cette classe ne va pas passer par ce que je vais supposer que vous avez utilisé, vous savez, les logiciels Adobe. Ça va être vraiment concentré sur l'utilisation d'Adobe Eckstine,
parce que c'est ce que j'utilise,
et c'est ce que je sais. Ça va être vraiment concentré sur l'utilisation d'Adobe Eckstine, parce que c'est ce que j'utilise, Mais c'est plus sur le cadre que nous utilisons pour le projet plutôt que pour les outils complexes ou le comment deux et des choses comme ça. Donc juste très esprit si vous cherchez plus d'un tutoriel basé sur la façon d'utiliser les outils, alors peut-être essayer de travers. Mais si vous voulez apprendre les fondations, les fondamentaux vont pour un U. Je conçois projet que cette classe est pour vous. Donc si vous êtes intéressé, regardez la première classe. Donc aussi, vous pouvez télécharger notre mémoire créatif gratuit, qui est fondamentalement un modèle Dieu. Donc, quand vous allez à la première réunion avec les clients, c'est sur la dernière face à face et que vous essayez de rassembler toutes ces informations, euh, pour le projet. Cela vous aidera essentiellement à poser les bonnes questions et à organiser cette information. Il est donc facile pour vous de comprendre et de regarder en arrière lorsque vous allez pour votre projet. Donc j'espère que cela suscite un certain intérêt pour vous. Si oui, quelle est la première classe et je verrai là ?
2. Cours 1 - Définir: Très bien, donc bienvenue en première classe, tout le monde. Ce coût est la façon dont vous définissez les projets, les problèmes et les objectifs. Donc, nous avons vu n'importe quel type de projets logiciels où racines, un site Web, application ou toute sorte de système logiciel compliqué. Il y a certaines choses que vous devez savoir avant de pouvoir commencer et prendre des décisions de conception. Vous devez communiquer avec vos clients et obtenir le plus d'informations
possible sur le projet . Vous devez donc comprendre comment ce logiciel va résoudre un problème ou un défi pour l'utilisateur final. Alors quand j'ai dit que l'utilisateur final, je parle pas du quien dont je parle qui étaient les dernières personnes à utiliser ce logiciel ? Cela ne signifie pas nécessairement que le client est plutôt le client ou la personne à qui il
essaie de vendre le produit. Donc, évidemment, vous êtes silencieux veut construire ce logiciel pour une raison et la plupart de Tommy parce qu'ils ont un vous savez, un problème dans leur entreprise ou ils ont un défi qu'ils veulent en quelque sorte de réaliser , ce soit qui deviennent plus d'utilisateurs, sensibilisent davantage le cerveau ou vendent un produit ou un programme particulier que vous savez qu'ils ont leurs propres problèmes que vous devez identifier afin que vous sachiez ce que vous essayez de résoudre. Donc, à partir de là, vous pouvez et discuter que vous savez comment livrer avec succès une victoire à la fois pour l'
entreprise et l'utilisateur final, parce que dans une journée, vous devez garder le vous êtes tout à fait heureux résoudre leurs problèmes, mais la plupart du temps, vous ne pouvez pas résoudre leur sauf si vous résolvez les problèmes de l'utilisateur final . Si vous avez créé une application que le calme pourrait aimer, mais que l'utilisateur final pourrait trouver trop difficile à utiliser, dit
Unfiable. Alors ça va créer plus de problèmes pour votre client, et vice versa. Donc tu as besoin de Teoh. Évidemment, identifiez les problèmes pour les deux parties, et cela fera également en sorte que vos solutions de conception basées sur l'idée fausse commune est avec vous sont conçus que c'est purement se concentrer sur les visuels sur les regards sur l'esthétique que est une partie du cadre de conception Vous êtes. Le meilleur que vous concevez est toujours basé sur des solutions, donc il est toujours axé sur la façon dont nous allons résoudre ce problème pour l'utilisateur, comment nous allons résoudre ce problème pour le client en utilisant un spread particulier. L' utilisation d'un type particulier de conception lorsque vous prenez des décisions de conception est purement basée sur la résolution d'un problème plutôt que sur ce que vous ressentez. C' est une bonne couleur. Bonne mise en page. C' est plus pour ce qui est le mieux pour l'utilisateur. Quel est le meilleur pour résoudre les problèmes des projets. Donc, lorsque vous voulez définir les objectifs de votre client, vous devez savoir pourquoi êtes-vous à jour dans cette application logicielle et ce site Web ? Qu' est-ce que vous voulez en faire ? Quels sont les objectifs de votre projet ou les pierres de mer ? Et cela est particulièrement utile lorsque vous essayez de créer la portée du
projet global . Vous savez, comprendre quels sont les objectifs spécifiques que votre client veut atteindre. Laz, vous pouvez facilement définir le montant que vous allez facturer quand les choses devraient être terminées . Cela aussi, L A. Pour organiser le calendrier pour le projet aussi. Qui utilisera le logiciel réel site Web d'Apple. Nous devons savoir qui nous construisons. Ce logiciel pour un zit reflétera dans notre prise de décision de conception et aussi une astuce pratique. Vous pouvez également utiliser notre vous je design bref formulaire. Vous pouvez télécharger à la fin de la classe pour vous donner un meilleur cadre et pour poser ces questions et les structurer pour votre mémoire. Ok, donc nous devons définir les points de douleur et les objectifs des utilisateurs finaux. Donc, pour ce faire, nous devons savoir ce qu'il faut utiliser son histoire de fond. Et quand je veux dire à propos de l'arrière-plan, l'histoire est à peu près une façon dont est l'utilisateur dans leur état de vie actuel, vous savez ? Ils sont mariés ? Ils ont des enfants ? Où travaillent ils ? Ah, qu'est-ce qu'ils aspiraient à être ? Toute information susceptible d'affecter les décisions d'achat de la façon dont ils utilisent le logiciel. Donc nous allons utiliser ces informations de fond pour peindre une image de cette personne pour
le rendre plus réaliste pour être plus une personne que cette entité
fictive imaginaire . Nous voulons orteil, rassemblez tout pour que nous puissions facilement imaginer cette personne dans notre tête dans votre imagination . Alors, où partirent-ils et comment vivent-ils ? Alors où ils vivent dans le monde ? Vivent-ils dans une région aisée ? Vivent-ils dans une région socialement défavorisée ? Qui sont les voisins qui sont les gens qui interagissent avec nous. Et comment ces facteurs ont-ils eu un effet sur leur processus décisionnel ? Un. Les choses les plus importantes que vous devez savoir, c'est ce que vous avez besoin des utilisateurs ? Donc, l'utilisation de ce backer et de l'information vous aidera à identifier l'or réel votre utilisateur veut atteindre et, évidemment, comment cela va résoudre leurs problèmes sous-jacents. Donc, si vous utilisez un veut acheter un produit, nous pouvons utiliser les informations de base pour comprendre pourquoi ils veulent acheter ce produit . Qu' est-ce que c'est ? C' est l'usage prévu. Comment aimeraient-ils acheter le produit ? Quelles sont les choses qui les empêchent d'acheter ce produit et ainsi de suite ? Et puis une fois que nous avons découvert les besoins de l'utilisateur, nous devons comprendre comment nous pouvons dépasser ces besoins. C' est donc une chose de permettre à votre utilisateur d'accomplir une tâche avec un logiciel senior, mais il y a une autre chose à aller au-delà et à améliorer toute l'expérience. Donc, nous devons également comprendre ce que top de logiciels similaires sites web absolus qu'ils utilisent afin que nous
puissions les utiliser comme référence. C' est donc un excellent moyen pour nous de comparer les différents logiciels en usage absolu. Déterminez ce qui fonctionne le mieux avec ces exemples et déterminez ce qui ne fonctionne pas de ces exemples et incluez cela dans notre propre conception de logiciel. Utilisez donc ces objectifs et points douloureux comme votre étoile du Nord. Chaque fois que vous prenez une décision de conception supérieure, assurez-vous qu'elle est purement basée sur ce qui est le mieux pour l'utilisateur. Cela vous aide également si vous avez une expérience en technologie ou en génie logiciel impliqué dans le projet, car il peut vous aider à identifier le moyen le plus pratique de développer la solution proposée. C' est super important. Si vous êtes quelqu'un comme moi qui n'a pas de code ou qui n'a pas d'
expérience en ingénierie
logicielle , c'est génial d'avoir quelqu'un avec cette expérience pour superviser votre plan et vous faire
savoir s'il existe un moyen plus simple de accomplir cela ou s'il y a des limitations techniques qui doivent être prises en compte lors de la recherche d'une solution. Donc, une fois que vous avez toutes les informations, il est temps de les rassembler dans une sorte de document. Nous avons laissé la majorité du tribunal de bref document Vous pouvez utiliser notre
modèle fourni que vous êtes conçu pour vous apporter toutes les informations dans un document cohérent, facile à comprendre, donc cela vous permettra de regarder en arrière et de vous référer à le haut des utilisations pour lesquelles vous concevez. Il vous permet également de trouver des déchets est simplifié l'utilisation du processus et de trouver toutes
les limitations techniques , hors plates-formes et logiciels intégrés. Et il peut également être utilisé pour garder à la fois vous et votre client sur la même page. Et c'est très important. Comme vous allez le long du projet. Il est facile pour les deux parties de penser à de nouvelles idées, de penser à de nouvelles choses, y
entendre. Mais alors vous ne voulez pas entrer dans le problème de fluage hors portée où votre client commence à proposer de plus en plus de solutions différentes que vous savez que vous n'étiez pas
d'accord dans ce début, et ensuite vous finissez par faire plus de travail, puis vous avez accepté au début du projet. Donc, il est super important de garder tout le monde sur la bonne voie pour garder tout le monde sur la même page et quelque chose à laquelle vous pouvez vous référer afin de ne pas finir avec une caisse grattée et faire plus de travail que vous ne devriez le faire
3. Cours 2 - Plan et ébauche: Bon, donc dans ce cours, on va parler de plan et de croquis. Donc avant de passer à n'importe quel programme de design, nous avons besoin de Teoh. Avoir une bonne compréhension hors tenue. Ce logiciel va fonctionner. Quels sont les processus impliqués ? Comment l'utilisateur circule du point A au point B. Eso Ce dont vous aurez besoin pendant cette phase, c'est un bon vieux stylo et du papier. Peu importe qui a enseigné. Ça n'a pas d'importance. Quel type de stylo ne veut pas dire que c'était une récupération. Ou vous pouvez utiliser un tableau blanc, ce qui est très pratique, surtout quand vous travaillez avec plus d'une personne, peut obtenir l'opinion de tout le monde à bord, hum, et avoir plus d'une sorte de groupe discussion ou quelque chose pour enregistrer votre travail. Donc, où il y a poster son ou à la fin de chaque sorte de session de tableau blanc, vous prenez une photo et vous avez cela à l'automne. Et vous pouvez utiliser cette photo comme référence lorsque vous avez conçu les cadres métalliques et en passant par les processus ultérieurs. Donc, la partie la plus importante quand vous faites cela est de tracer le voyage et quand qui voyage ? Je parle des utilisateurs parcourent le voyage des utilisations finales, alors commencez par cartographier le parcours des utilisateurs finaux aller pour l'ensemble du processus du début à fin. Donc, à partir du moment où ils prêtent sur l'ordre de page depuis le moment où ils regardent dans l'application jusqu'à l'étape finale, où ils terminent leur utilisation un objectif. Alors continuez à étendre à couvrir tous ces objectifs à partir de l'étape 1. Ainsi, chaque action que vous avez identifiée au début fait un flux utilisateur de trou jusqu'à ce que vous
terminiez chaque tâche séparée. Donc, à partir de lui, vous devriez être en mesure d'identifier tous les obstacles ou problèmes possibles que l'utilisateur peut rencontrer au cours de chaque processus. C' est donc une excellente façon de voir tout hoquet le long du chemin ou prétendument
augmenter la ferveur pour éviter d'éventuels problèmes qu'ils pourraient rencontrer. C' est une bonne façon de vous mettre à la place de l'utilisateur et utiliser l'empathie pour créer un
processus,des processus, études faciles et transparentes pour l'ensemble du système logiciel. Donc, pour vous donner un exemple, ce dont je parle, vous avez l'image en haut, ce que nous avons fait pour une sorte de système d'administration pour vous donner un exemple
simple et simple d'un flux utilisateur. Jetons un coup d'oeil à Instagram, donc je vais me connecter à Instagram. Donc, à partir d'ici, cela peut même s'étendre davantage. Si je peux être oublié mon mot de passe ou que je veux me connecter via Facebook ou Google, quelle que soit l'option qui peut étendre la ferveur. Mais en supposant que je me connecte d'abord, je vais sauter sur mon fil d'actualités, où je peux faire défiler et chercher tous les différents emplacements. Mais alors, partir de là à une photo ou hors de la vidéo, une fois que j'ai téléchargé ma photo, je peux ajouter les descriptions Adama, Hashtags et du tout d'un autre type d'information. Ensuite, une fois que j'ai fait cela, je peux revoir mes messages. Assurez-vous que j'ai tout orthographié correctement. Assurez-vous que je suis content de la photo. Donc, si je veux juste l'annuler et peut-être ne pas recadrer la photo comme je l'aime, il juste pour qu'ils m'aient demandé de revenir en arrière et juste à nouveau téléchargé, ou peut-être apporter quelques modifications à la description. Mais une fois que je suis heureux il y a et le poster donc c'est fondamentalement un flux utilisateur très simplifié juste pour vous
donner une idée de ce dont je parle, donc cela sera aussi L. A. Pour déterminer la portée du projet. Donc, quand vous évaluez un projet, il est très difficile de comprendre combien de temps cela va vous prendre. Si vous n'avez pas fait ce genre de planification ou d'esquisse face parce que vous ne savez pas combien d'écrans cela implique, vous ne savez pas combien d'actions sont impliquées pour terminer ces processus utilisateur. J' aime donc utiliser ce visage de planification et d'esquisse pour m'aider à définir un projet et comprendre qu'Helen va me prendre et combien de travail est nécessaire pour terminer ce projet. Une fois que nous avons fait la planification et que nous comprenons comment le flux utilisateur fonctionne,
nous pouvons commencer à esquisser les écrans, ce qui devrait inclure les mises en page, les boutons et la navigation. Ça n'a pas besoin d'être parfait. Tu n'as pas besoin d'être bizarre pour faire ça. C' est très rude. C' est très brouillon, et en faisant cela, vous pouvez trouver le meilleur moyen de créer la fonctionnalité de navigation. Donc, ce que je veux dire par cela est qu'il vous permet de trouver la meilleure façon de créer votre navigation ou votre barre de navigation, quelle que soit votre utilisation va naviguer pour chaque écran. Vous allez également vous aider à voir comment l'ensemble du processus viendra à nous donner écran par écran. Donc, si vous voulez obtenir les meilleurs résultats, impliquez plus d'une personne. Je vois que les idées d'autres personnes vous aideront à élargir votre réflexion et à trouver de meilleures solutions plus rapidement. C' est pourquoi chaque fois que je fais ces types de projets sont obtenir mon concepteur junior ou même demander à un ami si je n'ai personne disponible. Si vous travaillez avec plus d'une personne, certainement utilisé cette stratégie. Il vous aide à créer les processus beaucoup plus rapidement, et vous pouvez également choisir des problèmes avec les processus de l'autre, et vous pouvez simplement obtenir des solutions beaucoup plus rapidement.
4. Cours 3 - Wireframes: lorsque nous concevons des cadres métalliques ont été conçus, la structure hors de la mise en page, et il y a quelques exemples que nous avons fait dans le passé. Donc cadre de fil est fondamentalement l'épine dorsale ou ce squelette de tout processus logiciel de sorte qu'il va calmer trop rapidement. Cartographier une maquette de faible fidélité, et ce que signifie ces basses fidélité est fondamentalement un design d'os nus super basique. Ne vous inquiétez donc pas des images, des polices, des couleurs ou tout autre design. Les éléments à ce stade utilisent des boîtes et des formes pour représenter la mise en page. Ainsi, avec ces boîtes, ils peuvent être utilisés comme porte-pièces pour créer la structure à partir de la conception. Monsieur, de lui,
il est crucial que vous obteniez des commentaires des utilisateurs et des clients, et cela vous aidera à apporter des changements qui feront en sorte que vous atteignez vos
objectifs utilisateur . Astuce donc utile se concentre sur la création des fonctions de base du logiciel. Ainsi, par
exemple, la navigation principale. Alors, comment pouvez-vous utiliser un mouvement entre les points du processus ? Donc utilisé des lignes et des textes fictifs texte réservé pour représenter les sections de contenu, sorte que vous n'avez pas besoin de l'enfer et votre client pour le contenu en termes de copyright et d'autres choses. À ce stade, Nous n'avons pas besoin de nous soucier de la typographie. On veut juste savoir, OK, un message va se diriger. Il va être lui. Nous n'avons pas vraiment besoin de savoir ce qui va dire. Tu sais quel genre de choses ? Alors gardez les choses simples. Vous pouvez toutes ces lignes ou texte de l'espace réservé et n'oubliez pas de considérer la sauce de l'écran. Ceci est très important, vous devez
donc savoir si ce sera sur une tablette, un iPad mobile ou un bureau ou une combinaison en 2020. Toutes vos conceptions doivent être réactives, vous devez
donc considérer comment la mise en page fonctionnera sur plusieurs tailles d'écran différentes. Donc, la couche hors du contenu doit évidemment convenir au divorce. Donc j'ai des conseils pour vous faire gagner du temps. Alors que le logiciel de conception s'améliore au fil du temps, nous aimons profiter de tout ce que nous pouvons pour gagner du temps lors de la mise en place de ces cadres et prototypes
interactifs, alors créez des composants. Donc, je fais référence à plus de db x t pour les sections qui sont répétées pour la conception D. Donc ce que nous ferons après ça, c'est aller pour une chute X, et je vais vous montrer ce que je veux dire par composants en sorte d'enfer, je les crée et comment j'ai mis en place une chute. Les composants communs sont donc les menus de navigation. Pied est des témoignages, des
boutons,des boutons, menus d'action
quarts dans les sections de fonctionnalités. Donc, s'il est utilisé plus d'une fois pour le processus, puis créé en tant que composant. Donc, une autre chose importante à faire lorsque vous configurez votre pour toujours créer l'écran H, en utilisant la navigation principale et en ajoutant vos liens interactifs avant de commencer à concevoir la mise en page. Donc, une fois que vous aurez créé tous les écrans et pages, ils vont utiliser ce projet. Corrigez donc votre navigation principale. Ajoutez les liens qui iront à chaque page individuelle, puis créez cela en tant que composant , puis copiez et collez cela sur chaque écran ou chaque page, et chacun sera déjà lié. Donc, cela vous évitera d'avoir à ajouter chaque lien individuel. Teoh chaque os sur chaque navigation sur chaque écran, donc c'est super important. Cela vous fera gagner une tonne de temps. Fondamentalement, vous créez un composant avant les liens, et vous copiez et collez cela sur tous les différents écrans du processus. Et pourquoi on fait ça ? cela permet de gagner du temps que nous mettons à jour pour la conception s'applique automatiquement au décrochage ou aux
composants enfants . Donc, tous ces composants individuels qui ont été copiés et collés tous, nous avons changé automatiquement à la fois. Vous changez juste celui du maître et vous les changeriez tous. Et c'est très, très utile. Un qui travaille sur beaucoup d'écrans. Donc, certains projets peuvent être cinq à l'écran de certains projets, peut-être 50. Et quand vous travaillez sur ce 50, vous ne voulez pas changer 50 écrans à chaque fois. Vous savez, le client veut apporter des modifications sur une chose particulière dans la navigation, créer un composant, le composant maître, et cela va tous les changer à la fois. Tellement plus facile de gérer tous les liens interactifs de cette façon. Donc, comme je l'ai dit précédemment, ces classes dans un tutoriel sur la façon d'utiliser Adobe X'd ou comment utiliser l'un de ces
programmes haut de gamme . C' est plus sur le framework lui-même, mais hors de ce que je choisis des techniques de gain de temps qui peuvent également être appliquées quel type de programmation en utilisant, mais plus spécifiquement pour adobe X teak, que j'utilise tout le temps. Ce ne sont que quelques conseils cruciaux qui permettent d'économiser autant de temps et inutile lorsque vous construisez des types kurta très compliqués dans des cadres métalliques interactifs. Ainsi, par
exemple, pour cet exemple, il
s'agit d'un site Web. On va ouvrir ça et appeler ça à la maison. C' est la page d'accueil, et je vais juste Teoh, créer les pages sur les services de question de besoin appeler celui-ci construit. Vous ferez ce seul contact. Ok, donc on a des pages dont on a besoin pour ce site. Donc, le premier composant crucial que j'ai besoin de créer est le menu de navigation. Le menu de navigation sera utilisé sur l'ensemble du site. Et donc pour un assaut comme celui-ci n'est pas trop mauvais pour en créer un et le copier et le coller sur les autres pages. Et puis si j'ai besoin de le changer, changez chaque 11 par un. Mais vous avez sauvé son site Web était de 100 pages, 20 pages parce que grue, un projet qui avait plus de 20 pages. Je ne veux pas aller pour et changer des parties individuelles de la navigation une par une pour chaque 20 pages. Donc, ce que je veux faire est de créer une autre page. Lui et moi allons appeler ça des composants. Épelez bien. Donc, cette page. Il ne fait pas partie du chemin ou l'utilisateur flotte hors de ce site Web. Cette page va purement avoir tous les composants principaux que je vais utiliser pour chaque page. Et maintenant je vais en quelque sorte les contrôler tous à partir de quelqu'un qui crée la navigation. Alors faites un petit livre de navigation. Il n'aura pas l'air moins, mais juste pour te montrer ce que je veux dire, on aura une bière. Il va donc créer des liens jamais. Neil, appelle ça une fois et je vais appuyer sur « Répéter », Salut », qui est en haut à droite. Et je pense que j'ai seulement besoin de liens complets pour augmenter le genre de caresser entre eux. Et une fois que je suis fait un groupe de l'ONU ce lien et nommé incorrectement services rebond contact. Et c'est mon bar jamais. Donc, ça va aller de l'autre côté. Et comme je l'ai dit, je ne veux pas changer constamment de toi depuis longtemps. Donc, ce que je veux faire est d'aller au prototype et je peux même faire glisser ceci sur la page. Je voulais aller ou cliquer sur ce petit tout. Il est pourri. Choisissez la destination et je vais aller aux services. Même chose avec les combats. Marchandises qui ont forgé. Pensez à baiser Cliquez sur. Je pourrais le traîner sur le chemin. Alors je veux y aller. Mais dans ce cas, ça ferait du bien de tomber en contact rapide. Donc maintenant, si je vais au petit bouton de lecture ici, le bouton d'aperçu, il ira à ces pages. Je ne peux pas y aller de toute façon, car il n'y a pas de navigation sur les autres pages. Donc, c'est là que le logo va être et veulent aussi que d'aller à la maison à chaque fois. Donc, à partir d'ici, je veux réellement créer ceci en tant que composant. Je ne suis pas sûr de ce qu'ils ont appelé dans d'autres programmes à propos d'un X'd. Ils ont appelé les composants. Quelqu' un survolera donc en un clic et faites glisser tout, sélectionnez tout. Pouvez-vous avoir un clic droit en allant Faire un composant ou un contrôle ? K, ou je peux aller ici aux objets et faire un composant. Vous savez, c'est un composant parce qu'il a un petit diamant sur le dessus E. Donc c'est le composant principal et ce que je peux aussi faire si je vais à cette petite boxe en
bas à gauche,
je peux le bas à gauche, voir ici sauvé. Donc, quand un double clic sur cela et Kolobnev Bach. Donc je sais ce que c'est. C' est donc notre premier composant. Et si vous l'obtenez, vous pouvez dire que tout est agréable à l'ancien lié vers le haut. Donc, ce que je ferais est de le copier et de le coller sur toutes ces pages. Il a ainsi ou parfaitement rythmé dans la position des droits. Et maintenant, les liens sont toujours connectés. Tout est lié. Vous avez remarqué que quelle que soit la page principale, elle est allumée. Les liens ne seront évidemment pas disponibles car il est déjà sur la page. Mais si je rentre à la maison et qu'ils se rappellent, je suis en prototype en ce moment. Donc si j'y vais et que je fais ça la page d'accueil, la petite maison comme là-bas, j'ai un aperçu que tu veux ? Bien sûr, importe quoi Parce qu'il n'y a rien de différent sur chaque page pour vous montrer qui a travaillé retour à conception mettre salut maintenant afin que vous puissiez réellement les voir changer de services sur le contact. Il va pour chaque page différente, donc vos services cliquent sur le logo me ramènera chez moi. Donc l'autre raison pour laquelle nous faisons cela est si je voulais dire des changements. Logo sur elle pour changer la couleur de cette, Vous pouvez voir que je viens de changer le composant maître et il a changé ou les autres composants qui sont liés à elle. Je n'ai pas eu à changer chaque individu. Je le change de lui et il changerait à ce que je vous ai dit juste besoin de se rappeler que vous devez changer le composant maître. Et le composant maître a un peu grec au diamant vert dans le coin supérieur gauche. Vous voyez avec ces autres composants enfants qu'ils ont un diamant blanc. Donc, si vous changez l'un de ceux-ci, ça ne changera pas les autres. Donc si je change ça, tu ne changeras que l'individu. Vous n'avez pas été changé tous les autres, parce que seul un composant enfant va revenir en arrière. Donc, juste très esprit que vous avez toujours besoin de changer le composant maître. C' est pourquoi j'aime mettre tous les composants maîtres sur un seul écran, car je sais qu'ils sont le composant maître. Ok, Donc dès le jour, je vais créer un pied en haut parce que le pied n'est pas seulement sur chaque page, juste comme sur la navigation. Il est toujours là. Fils de faire cool petit pied hors de faire. Donc mon Lego Parikh une tante là-bas. Pour l'instant, je vais juste mettre quelques fausses lignes qui vont représenter le texte. Donc c'est mon pied sont donc je peux même créer ce groupe il copier-coller sur chaque page. Mais si le client m'a demandé que changer quoi que ce soit sur le pied doivent donc changer de chaque individu un ou les supprimer ou changer sur un et une copie coller à nouveau, ce qui est peut être ennuyeux quand vous avez 20 écrans. Donc, ils sont comme nous l'avons fait avec la navigation. On va tirer comme tout et ensuite je vais faire un clic droit, faire un composant. Et puis nous avons fait un autre composant, et vous pouvez voir ici dans votre onglet assets, qui est un peu de boxe là, vous voyez un assets et vous avez un composant à n'importe quel bon NFL qui ont été précédemment créés. Alors j'appelle ça un pied en haut. Donc maintenant on va nabob et un pied, je vais, Teoh, juste pour ces fins, juste pour le but de ce tutoriel va faire ce logo lié à la page d'accueil. Donc maintenant, je peux copier coller sur chaque page, Avons-nous donc d'autres choses que vous pouvez créer dans les composants, témoignage, sections fonctionnalités appelées à sections d'action, choses qui est répétée pour le site. Vous pouvez même faire des boutons aussi bien. Qu' est-ce que je vais faire sur un bouton créatif ? Gros bouton. Ok, donc c'est mon bouton. Je vais choisir un pet. Donc quand j'appelle ce bateau 40, c'est mon premier bouton. Je vais créer un autre bouton comme un bouton secondaire. Ça va être génial. Je vais faire 1/3 bouton. Donc, il ya tellement de choses que vous pouvez faire pour montrer comment le prototype fonctionnerait en termes de quelle couleur est les liens ressemblera si cela pressé ou juste un communiqué au développeur à quoi il ressemblera lorsque vous interagissez avec ce site Web. Donc maintenant, la même chose que nous l'avons fait, il le voulait, créer de la facilité dans les composants, faire le composant, bien
sûr, mais un composant de marque. Mais à j'ai parlé cette pièce et faire composant peut se plaindre sans bouton. Donc maintenant, chaque fois que j'utilise ces boutons, je les copierai et les collez partout où ils ont besoin d'aller. Et puis si j'ai besoin de changer la couleur des boutons pour tout le côté. J' ai changé le maître sur l'écran des composants, et il change les autres. Non, je ne fais que des couleurs. Si je change le coffre avant, je change de vaisseau de combat audacieux. Le reste changera également. C' est le jalonnement, disons à quel point c'est utile si vous avez porté un A. Donc, quand vous créez un cadre métallique interactif, je vous connais le gros squelette osseux de celui-ci. Obtenez l'approbation. Ensuite, vous pouvez toujours avoir besoin de faire est essentiellement ajouter vos stalles à la page des composants, et l'ensemble du site sera conçu dans le stand que vous voulez sans avoir à aller pour chaque partie individuelle, quelques conseils plus de gain de temps Créer se bloque au sein de chaque section d'actif. Par exemple, les sous-titres d'en-tête et le cimetière de texte corporel étaient des documents où vous pouvez créer vos propres stands de personnages. Tu peux le faire. Nous avons vu Adobe X'd. Donc, une fois que les amis du fil ont approuvé. Il est tellement plus facile de changer les paramètres de paragraphe de téléphone sur le décrochage particulier, ce qui va changer Donald les écrans où vous avez appliqué ce décrochage si salé similaire, similaire à la façon dont les composants fonctionnent. Quand créez-vous un maître ? Le décrocher. Vous changerez toutes les stalles qui ont été appliquées pour l'ensemble du design. Donc, si vous avez choisi ce front particulier pour une copie de corps pour l'ensemble du site et que le client veut changer le plaisir au lieu d'avoir à aller à l'écran H et changer l'avant individuellement, vous changez le décrochage et il serait les changer ou vous a automatiquement sauvé une tonne de temps. Comme je l'ai dit, il change automatiquement le sélectionné de sorte que tout le design fait gagner du temps avec le client décide de changer de stalles au cours de la phase ultérieure de la conception. Il est également plus facile de communiquer avec le développeur du logiciel une fois que vous avez envoyé les ressources. Il est juste plus facile pour un développeur de logiciels de voir les différents sommets des stands et de
s'assurer de les suivre quand ils sont en train de se développer. Vous connaissez votre site Web ou votre application. La dernière chose importante à vous montrer est comment utiliser des stalls de caractères si similaires I d. Lorsque vous utilisez les composants, lorsque vous utilisez des stalls de caractères corrects, vous contrôlez l'utilisation des polices. Il est similaire à si vous l'utilisiez, Toby dans le design ou même Microsoft Word, vous créez vos stands et appliquera à tous les livres de texte liés prendra section pour notre ensemble. Donc, par
exemple, je vais faire frapper un. Et je veux rencontrer cette petite marque génial 30 point depuis frapper libre à leurs titres
et dire,Je et dire, voulais créer une copie corporelle euh,
Teoh, Teoh, créer quelqu'un Copie Regula et ne ferait pas que 16 points Non à un un peu plus petit. Augmentation de la ligne Hot 20 pleine. Et ça va être ma copie corporelle. Donc, c'est à peu près comme ça que je veux retarder le texte sur le site et je ne veux pas passer par et changer l'avant pour chaque partie. Donc, ce que
je fais, je vais cliquer sur le texte que je veux enregistrer comme un stand. Donc, si c'est le cas, il dirige un si grand pour les stands de personnage dans ma barre latérale d'actif. Eh bien, mes composants sont cliquez sur ce bouton plus et puis il va l'enregistrer. Sauvegarder les détails Par défaut l'espacement de la taille de la police Donc je peux même changer le nom ce
décrochage à ce que je veux. C' est ce qu'on appelle la même chose que nous avons frappé aussi. Appelez ça aussi manger. Non. La même chose avec celui-là est libre et la même chose avec ma copie corporelle. Alors maintenant je peux voler tout le site. Donc, si je vais aux autres pages et dire que je veux faire cette rubrique alors allez vite sur la rubrique que je veux changer. Je vais choisir le rapide sur le texte que je veux changer, puis cliquez sur le décrochage et vous le changerez automatiquement à C'est toujours si savoir seulement que. Alors disons que le calme veut changer. Qu' est-ce que je voulais faire en frappant un ? Il est bon de frapper un mal gauche rapide ou contrôle Cliquez sur le personnage décrocher un allumé rapide et nous pouvons les changer tous de lui donc faire 60. Oh, rendre la frontière sombre et je vais faire un rose large et maintenant tous mes titres
changent aussi et la même chose arrivera quand j'éditerai frapper deux en frappant gratuitement dans la copie corporelle que je puisse ou la changer du panneau des actifs ? Non, seulement que je peux faire. Je peux même enregistrer les couleurs deux actifs, donc vous trouvez n'importe quel objet que je sélectionne, quelles que soient les couleurs. Si je clique sur le bouton plus, vous les ajouterez dans la valeur de couleur et la couleur hexadécimale aux actifs de couleur afin que les développeurs puissent utiliser le code hexadécimal exact lorsqu'ils développent le site Web. J' espère que vous trouverez ces cassettes utiles quand vous commencez. Comme je l'ai dit,
si tu veux apprendre Mawr,
regarde YouTube. Comme je l'ai dit, si tu veux apprendre Mawr, Il y a des milliers de didacticiels différents sur l'utilisation d'Adobe XT A dans l'un des autres programmes que j'ai mentionnés dans cette classe. Mais j'espère que cela vous donne une idée de la façon de vraiment utiliser le prototype, Um, et comment créer des fondations folles correctement au début pour vous faire gagner beaucoup plus de temps pour le processus.
5. Cours 4 - Prototype: Une fois que vous avez fait votre cadre métallique, vous avez montré au client que vous passez par le genre d'étape de révision Major changements que le client approuve heureux de procéder,
Ensuite, vous êtes sur le chemin du prototypage. Nous nous inquiétons donc du cadrage Vous n'avez pas nécessairement besoin d'avoir un logiciel de conception, mais lorsque vous prototypez, vous avez besoin d'une sorte de logiciel de conception. Donc, les options logicielles L A pour ajouter des liens interactifs. J' ai utilisé Adobe X'd, Um, c'est ce que off seulement soulager utilisé. Mais il y a d'autres que vous pouvez utiliser Sketch Zeppelin et cela beaucoup d'autres là-bas, que même je lierais comme référence si vous cherchez, il y a d'autres façons de montrer le cas que vous êtes conçu. Il y a si peu d'options qui ne sont pas l. A sont des liens interactifs, vous savez, qui sont, vous savez, Adobe Illustrator pour la boutique et dans la conception arrière où le logiciel de topping pro n'existait pas. Nous utilisons principalement la boutique photo, donc ces cours plus axés sur la partie interactive de votre design. Par tous les moyens, vous pouvez toujours utiliser photo shopped pour concevoir ces projets haut de gamme, mais vous êtes limité à montrer l'enfer client. Il sera effectivement utilisé. Vous ne pourrez pas enregistrer de commentaires. Vous manquez beaucoup de fonctionnalités importantes que ces nouveaux types de vous que j'ai conçu des programmes
spécifiques peuvent vous donner. Donc, comme je l'ai dit, il peut toujours utiliser ces autres exemples. Mais pour B'more, compétitivité au sein de cette industrie est fortement recommandée. Ils ont utilisé Mawr en quelque sorte. Vous êtes conçu des programmes ciblés tels que Adobe XT, un Sketch Zeppelin et que cela continue. Donc, fondamentalement ,
dans cette phase, vous allez commencer à créer un design plus haute fidélité. Tellement haute fidélité. Donc, nous voulons orteil essentiellement obtenir le conçu pour ressembler à la vraie chose. Donc, sans code, sans l'implication hors facilité du moteur logiciel, nous voulons créer quelque chose qui fonctionne à peu près comme la vraie chose. Maintenant, nous avons les éléments de conception de départ, couleurs du
logo, les polices
et les images, et nous pouvons commencer à expérimenter avec le tour de la voix et le langage que nous allons utiliser , hum, avec le boutons et actions en justice. Donc on va apporter à cette chose plus de vie aux orteils. Nous allons même commencer à ajouter une copie d'écriture eso. Si votre client est prêt à ce stade, il est préférable de commencer à ajouter la copie réelle. Ah, au lieu de l'espace réservé que nous avons mis dans la face du cadre métallique. Alors rappelez-vous, nous allons utiliser ce prototype si nous utilisons la solution finale. Il n'a pas besoin d'être parfait à 100%. Nous voulons juste faire en sorte que nous montrons clairement comment utiliser le logiciel et comment l'utilisateur va utiliser le logiciel pour compléter l'entonnoir. Um, utilise un but. Construisez-le autant que nous pouvons le voir lorsque nous le testons au sein de l'utilisateur. Vous savez, nous limitons les chances qu'ils soient confus juste parce que vous savez que certains liens ne fonctionnent pas. Nous voulons rendre cette expérience aussi facile, et c'est la même chose possible. Donc, pour ce faire, vous savez, vous devez parfois le construire autant que vous pouvez le voir. Limitez cette confusion lorsque vous utilisez sur les utilisateurs re aloft. N' oubliez pas d'inclure toutes les fonctions de base qui permettent à l'utilisateur d'atteindre ses objectifs. Et aussi, une astuce utile est toujours référence aux objectifs de l'utilisateur final et les objectifs de votre client. Obtenez les commentaires d'un ingénieur logiciel pour voir s'il peut y avoir une meilleure façon, plus pratique, de mettre en œuvre votre solution proposée dans une perspective de développement . Si nous travaillons avec une société d'ingénierie logicielle, nous leur enverrons aussi des conceptions pour retrouver leur foi telle qu'elle est, celles qui sont de
la beauté dans le logiciel réel. Nous voulons obtenir leur importation, comme ils le sauront du point de vue de l'ingénierie logicielle. Quel est le moyen le plus simple de créer ? La solution le jour pourrait nous donner des commentaires en termes de look, vous savez, faire de cette façon peut ne pas être la volonté de nous prendre beaucoup trop de temps. Beaucoup trop de ressources l'est. Donc, si nous le faisons de cette façon, nous pouvons économiser la moitié du temps, nous pouvons toujours obtenir le même résultat. Et puis nous devrons peut-être changer cela dans le design d'El New. Je dois réfléchir Vous savez que les commentaires et garder tout le monde heureux et réellement créer une solution qui est faisable et peut réellement fonctionner dans le monde réel.
6. Cours 5 - Retour: Ok, Dites des commentaires. Commentaires Est Super important. Sophie Beck est cruciale. Obtenez autant de commentaires que possible de vraies personnes. Ah, habitué à des commentaires pour répondre à ces questions gratuites. Alors le prototype résoud-t-il leurs problèmes et atteindre-t-il leurs objectifs ? Et ont-ils un intérêt pour le produit logiciel ? Donc celle-là est importante. Donc, ce que nous trouvons dans beaucoup de ces projets haut de gamme, c'est que nos clients les utilisent. Ces prototypes comme preuve de concept. Donc ils vont sortir, utiliser ces concepts parfaits, montrer aux gens et dire que le produit est utile, n'importe quelle utilisation pour le logiciel, euh, vous savez, sur le marché et avoir une sorte d'idée de Ok, devrions -nous investir plus d'argent et commencer à construire tout cela ? Peut-être que nous pouvons obtenir un investissement que Teoh crée pour développer ce projet. Pour être conscient de cela et pourquoi vous avez conçu ce prototype dans la plupart du temps, c'est une preuve de concept pour le client et comment il peut être amélioré. Donc, en gros, quand vous montrez aux gens votre prototype, vous pouvez voir comment ils l'utilisent. Vous pouvez voir les mauvaises choses qu'ils font, vous pouvez voir comment ils pourraient utiliser un processus totalement différent à faire en action que vous aviez initialement prévu pour eux de le faire. Il est très utile de voir les utilisations perspective, et vous pouvez faire des ajustements pour les rendre plus faciles pour eux à évidemment complètement des objectifs utilisateur . Je pense que la plus grande idée fausse est que vous savez, vous pourriez penser que c'est le plus facile attendu pour faire cette action, mais son unité a cédé à quelqu'un d'autre. Ils trouveront 10 autres façons de le faire, et parfois c'est peut-être chaud. Ils pourraient le faire de la façon la plus difficile. Mais c'est là que vous devez être conscient. Prenez les commentaires à bord et créez une solution qui fonctionne pour tout le monde. Ainsi, un autre logiciel de conception de Teepees utile qui mesure I permet aux clients d'épingler ces commentaires à des sections spécifiques sur la conception. Alors essayez d'utiliser ces outils dans ces fonctionnalités autant que possible détenus obtenir commentaires des
clients un jeu d'enfant. Donc, je sais par expérience avec Adobe X'd le devoir. Alors quoi ? Je le ferais. Je vais envoyer le lien vers la pièce pour obtenir des commentaires. N' ouvrez pas le lien et ensuite ils vont chercher le prototype et épingler leur foi à deux sections particulières du site et vous savez que je vais passer par là. Regardez la broche, faites les modifications vers le haut que le lien dans la note marquée une comme résolue. Il est juste l'Asie pour, Mais si vous sur le client, il est beaucoup plus rapide de travailler avec des commentaires sur DWhite, ne pas utiliser tous ces outils autant que possible et rendre votre vie plus facile. Alors, qu'est-ce que tu fais ? Nous commentaires Donc, nous recevons un feedback, puis évidemment nous faisons le changement. Nous testons, et ce processus ira en arrière et en avant, évidemment jusqu'à ce que nous testons et que le client soit heureux. Et une fois que les clients sont heureux, c'est approuvé. Donc c'est une sorte de boucle de rétroaction. Nous avons vu ces premiers projets, Donc fondamentalement obtenir les commentaires que vous apportez des changements, vous testez obtenir les commentaires, puis vous devrez peut-être faire un autre changement. Tester la rétroaction, puis l'objectif entier. Il l'a approuvé sur la ligne et avec le client super heureux
7. Cours 6 - Préparation des ressources: nous devons organiser toutes les images ou les icônes dans toutes les polices et dans adobe x T. Je vais vous montrer comment faire cela et avoir le genre de paquet et sorte de vous montrer ce que je fais. Nous allons donc préparer les spécifications de développement pour l'ingénieur logiciel. La chose cool que je sais. Si elle w 60, vous pouvez réellement exporter les spécifications de développement. Andi montre essentiellement. Fondamentalement, ça va montrer le logiciel Ngeny ou le rembourrage ou les tailles de toutes les boîtes, images, sections du site. Um, tu sais, c'est pour qu'ils puissent l'obtenir parfait pixel. Et je vais vous montrer un exemple dans un mort de 60 ans. Alors n'oubliez pas d'inclure vos stands de personnage, et cela assurera la cohérence avec le top pro et la vraie chose. Donc, vous êtes votre aller au cours de cette étape est chose d'organisateur d'orteil aussi proprement que et de manière aussi cohérente est possible. Donc, quand vous le donnez à l'ingénieur logiciel, il faut une sorte de seconde estimation ou faire leurs propres hypothèses plus préparées. Plus vous êtes organisé, il est facile pour l'ingénieur logiciel de le prendre et de commencer à construire et à commencer coder et à le faire ressembler à la même chose. Ah, problème
commun que vous trouvez ces projets portuaires est du concept à la
réalité réelle . Donc, la première chose qui vient à utiliser votre compréhension du code de santé fonctionne. Le 2e 1 est la capacité des ingénieurs logiciels Eh bien, donc si vous faites un design fou, c'est 100 types différents de couches, et c'est une forme organique un peu différente et tout ce genre de choses, et vous donner à un développeur junior. Il y a des chances que ça ne ressemblera pas à ce que tu veux
ressembler, ressembler, donc tu dois enterrer l'esprit. Et à qui tu le donnes ? Qui va réellement développer votre travail ? Donc votre but est de le faire. Cette transition est aussi facile que possible. Un, parce que vous êtes tout à fait je serai heureux de parce que votre conception va l'amener khweis à ce qu'il devrait être. Parce qu'il n'y a rien de pire quand vous le donnez à un développeur et que vous voyez la vie réelle recherchée et qu'il ne semble pas que vous le vouliez. Ça a l'air terrible, et il n'y a rien que tu puisses faire. N' oubliez donc pas d'inclure des notes que le développeur peut avoir besoin de connaître, par
exemple, comme les interactions animées, alors survolez les états ou les animations de cour que vous voulez produire pour le design que vous êtes. Nous devons montrer à quoi cela ressemblera ou laisser une note au développeur pour s'
assurer qu'il n'oublie pas d'ajouter een. Parce que si vous le laissez comme statique, le développeur penserait juste que vous voulez esthétique. Donc soyez très précis. N' oubliez pas d'ajouter ces notes dans l'ingénieur logiciel n'est pas un lecteur d'esprit, vous devez
donc vous assurer d'ajouter ces notes et de les rendre aussi clairs que possible. Ce que vous ressemblez et ce que vous voulez dans Donc, dans cette partie de la classe va vous montrer
comment préparer vos actifs pour votre site Web ou pointent vers le haut du logiciel votre conception pour le développement. Il y a donc plusieurs façons de le faire. C' est ainsi que nous le faisons et ce qui a fonctionné avec nous dans le passé, donc essentiellement va créer un dossier où tous mes actifs vont aller pour que je puisse le
zipper , rendre agréable et soigné avant de l'envoyer par le développeur. Donc sur cette photo, je vais créer un autre dossier. Je n'appelle pas ça navigation. Donc sur cette photo, je vais seulement ajouter les actifs utilisés dans la navigation. Donc la navigation principale et la nourriture sont si ouvertes, X'd. C' est un projet que nous avons fait dans le passé et hors de là serait un excellent exemple à utiliser pour vous
montrer comment nous allons préparer ce design. Donc, si dans cette navigation principale nous avons besoin du logo, nous avons besoin d'icônes. Nous avons besoin de tout ce que le développeur ne peut pas créer avec le code Sélectionnez le logo, faites un clic droit exporter sélectionné. Et je veux ça comme une exportation PNG automne pour le web. Si je l'étais, si j'allais faire une application IOS ou une application Android, c'est comme cette option. Mais c'est un site web, et ça va me donner à l'actif comme la taille d'origine et aussi doubler sa taille pour
que je puisse le rendre plus élevé. EDS. Donc, une fois que cela est fait lors de l'exportation, puis si je retourne à mon dossier de navigation, je peux voir les deux chutes. Il est donc la sauce originale et la source doublée. Donc on retourne dans X D. et on a besoin de ces icônes. Il est donc l'icône CART et l'icône de recherche pour que je puisse les glisser sur le pot latéral. Il fait un clic droit sur l'exportation sélectionné. Et au lieu d'une douleur J, je les veux comme s V g faux. Juste pour que nous puissions avoir un peu plus haute résolution et un peu plus réactif. Um, en termes de défaut top pour que tu puisses choisir ce que tu veux. Vous rivalisez P et G pdf et J porcs seront. Mais on va aller spg et les exporter. Et si vous retournez ici, peut les voir sur la photo. Tout l'est. Je n'ai pas besoin d'eux double de la taille parce qu'il y a V G tombe. Ils ne perdent pas la résolution maintenant. J' ai besoin de récupérer les biens du pied. Sont si la même chose qu'il va, ce logo exploser. Il possédait comme un réseau de douleur G. J' ai besoin d'appeler ça autre chose. Changer le nom et nous avons également besoin des icônes de médias sociaux qui étaient riches et subtiles. Spg affecter les chutes et également besoin de cette icône e-mail ici. Donc, dans une sélection de tous ces exportations rapides droite sélectionnés et dans un SPG sélectionné et Exporter. Donc maintenant j'ai tout le nécessaire pour créer cette navigation principale et la nourriture off. Et c'est bien. Retournez dans X'd. Nous n'avons donc pas besoin d'images statiques de texte. Nous n'avons pas besoin d'exporter tout ça. C' est cela peut tout être créé pour le développement de l'acte Face. Nous avons juste besoin de ces éléments que le développeur béton code libre. Donc un des gars retourne ici, je vais créer un autre dossier. Je vais appeler cette page d'accueil dans tous nos actifs de page d'accueil vont aller ici. Retourne à 60 ans. On a donc aiguillé les images. Donc cette image de héros, il a une mosquée comme une mosquée rayonnante là-bas. Donc si j'éteins ça, vous verrez que vous voyez la grande messe là-bas. Je ne veux pas sélectionner le gris et la mosquée comme un atout parce que cela peut être créé pour le développement. Je veux la photo en dessous, cependant. Donc, si je clique sur le calque en dessous, qui est la photo, je peux exporter cette exportation en tant que ah PG Web. Assurez-vous que je l'enregistre dans la page d'accueil pliée. Maintenant, je pouvais entendre une seule exportation. J' ai maintenant les chutes prêtes dans le dossier de la page d'accueil. Maintenant, je vais parcourir toute la page et m'assurer que j'ai tout ce que le développement
va avoir besoin une fois que j'ai le plus mis en évidence aller à mon panneau latéral. Lui et les exportations sélectionnés. Je les voulais. Le Web de PNG est bon ici ? Doit doubler rapidement dans cette fonctionnalité d'image car il s'agit d'un objet composant. Je dois faire un peu plus de travail en cliquant sur les exportations de photos réelles. Sélectionnés P et G. Rappelez-vous, je n'ai pas besoin de l'élément carré. Le backer et l'élément n'ont pas besoin de texter et je n'ai pas besoin du bouton. Ah, aussi des
éléments qui seront créés par le développement. J' ai besoin de communiquer quelle police de caractères ? Tout à utiliser, comment configurer la topographie, quelles couleurs utiliser et tout ce genre de choses. Mais je vais vous montrer comment faire après maintenant quand le gars libérer la même chose avec ces exportations sélectionnées et nous avons des grilles répétées comme cet exemple, je dois cliquer sur chaque individu pour obtenir chaque photo individuelle Cool que gratuit. On a besoin de cette photo. Lui et nous avons besoin de ces photos individuelles. Donc, si cette cupidité répétée. Si je ne vous permettez moi de sélectionner une des photos. Donc, si je sélectionne l'exporter, euh semble avoir déjà cela dans ce dossier. Euh, Anita est en fait cliquer sur chaque photo individuelle, exportez-les super pour faire ça. Celui-ci ici et ça devrait être tous les atouts pour la page d'accueil. Alors retourne à la maison, sors. Donc, je retourne au dossier de la page d'accueil et à tous mes actifs. Oh, il pour le développeur. Et ce que vous faites est de répéter ce processus. Craquez chaque dossier pour chaque page. Hum, donc je créerais la page à propos de toutes les pages qu'on a ici. Il a donc créé des programmes, des études de cas d'
équipe, des conseils et des astuces. Les contacts sont crédibles ces dossiers et font le même processus. Donc, une fois que vous avez fait cela, tout est agréable et soigné, Irving dans tout facile à son bon endroit, vous pouvez aller partager. Et si tu veux, tu peux. Si vous avez déjà créé un lien, vous pouvez enregistrer au-dessus de ce lien, ou vous pouvez créer le sien. Vous pouvez créer un lien totalement nouveau et son au lieu de la révision de la conception, ce qui vous permet seulement d'obtenir des commentaires Pour le prototype, vous pouvez sélectionner le développement, ce qui créera à la fois l'option d'ajouter des notes et affiche les spécifications Dev à la développeur. Um, vous avez la possibilité d'ajouter des actifs téléchargeables si vous avez un gros projet, parfois est peut bourrer. Donc, euh, c'est si vous voulez des temps de chargement plus rapides. Ce n'est pas vraiment nécessaire. Si vous avez fait ce que nous venons de faire et organisé tous les types de fichiers dans les bons dossiers, vous allez l'envoyer séparément. Hum, c'est des petits projets reconnaissants. Je veux enlever cela, et nous pouvons juste laisser tout le monde le voir avec le lien et vouloir créer un lien. Ok, Donc une fois qu'il a créé le lien ou copier-coller ou vous pouvez cliquer sur ce lien aussi bien et le gars que vous voyez le prototype, qui est un zoo normal. Nous pouvons y ajouter vos notes. Mais le plus important maintenant, si je clique sur ce petit côté droit ici, il dit voir les spécifications. Je peux voir plus d'informations. Je peux voir que les spécifications de développement nécessaires à la conception de ce site Web. Ainsi, comme vous pouvez le voir, vous pouvez voir les couleurs utilisées dans ce design particulier, tout
est enregistré là. Donc, tout ce qu'ils ont besoin de faire est de copier et de coller. Et vous savez, c'est beaucoup plus facile pour eux de comprendre et de voir comment construire ce genre. Il dit Vous pouvez voir pour cliquer sur certains objets, vous pouvez voir les propriétés CSS de la mer. Grady dans les options est whoa avec des tailles. Comment créer les boutons ? Ce qui a vu comme ils doivent être,
Vous savez, Vous savez, les propriétés de mise en page dans juste les trucs dont les développeurs ont besoin. Je ne vais pas faire comme si je savais ce que ça veut dire parce que je ne suis pas développeur. Je viens de le concevoir et je le prépare pour que les développeurs fassent leur truc. Ils peuvent voir que vous savez quel est le contenu dont ils ont besoin pour copier et coller. Quel plaisir ils ont besoin d'utiliser quelle taille il doit être une minute alliée. Ça doit l'être. Donc c'est comme ça que tout fonctionne. Donc, vous envoyez ceci au développeur utilisé. Alors tu y vas, on se sent dossier. Ce dossier est appelé tutoriel, mais vous venez de compresser ce créer un plus beau dossier tombe pour elle et envoyer pour e-mail, dropbox ou tout ce qu'ils ont tout ce dont ils ont besoin. C' est comme je l'ai dit, il y a d'autres façons de le faire. Il y a beaucoup plus de moyens plus rapides aussi, mais c'est ce qui fonctionne. Nous nous attachons ce que nous utilisons couramment dans votre processus, alors j'espère que cela aide, et c'est tout. Alors sortez et commencez à télécharger votre bref modèle et commencez à travailler sur de nouveaux
projets blancs . Si vous avez des questions, faites-le nous savoir. En effet, section de
discussion ou e-mail. J' ai dit info à un ours noir créatif point com point au. Ah, j'espère que vous avez trouvé ça utile. J' espère que vous avez appris quelques choses cool. J' espère que tu apprendras beaucoup. Veuillez nous faire part de vos commentaires. Nous voulons nous assurer que ces classes sont à l'avenir sont encore meilleures qu'avant. Mais on ne peut pas faire ça si on ne sait pas ce que vous pensez. Alors laissez-nous savoir va vraiment l'apprécier aussi. Si vous pensez que c'est utile, partagez-le avec vos amis. Partagez-le avec des gens qui, selon vous, ont besoin de connaître ces choses et nous vous verrons dans la prochaine vidéo
Justin Marchant, Owner/founder Black Bear Creative
