TÉLÉCHARGEZ LES FICHES D'EXERCICES ICI

Projet de cours 01 – Page d'accueil et page de conception sur Wireframe

Passez en revue le brief et le personnage pour le client : Maynooth Furniture.
1. Dossiers d'exercices > Projets de cours 1 > Brief - Maynooth Furniture.pdf
2. Dossiers d'exercices > Projets de cours 1 > Persona - Maynooth Furniture.pdf
Page d'accueil
1. En utilisant les compétences que nous avons acquises jusqu'à présent, redimensionner la page d'accueil à l'aide de la fonction de page d'accueil répertoriée dans le brief :
  1. Logo
  2. Nav
    1. Salon
    2. Chambre à coucher
    3. Cuisine et salle à manger
  3. Panier d'achat
  4. Coordonnées
  5. Boîte de recherche
  6. Curseur de héros
  7. vii.Nouveau en magasin
  8. viii.Idées d'inspiration
  9. Offres de liquidation
  10. Pied de page
Nous joindre
1. Créez un deuxième plan de travail intitulé ‘Nous joindre’.
2. Soit en utilisant des exemples du modèle XD « fils », soit en créant votre propre version. Créez un formulaire simple.
3. Regardez d'autres sites pour obtenir des exemples.
Créer du JPG de travaux terminés.
1. File > Exporter tous les tableaux de travail > Jpeg
Partagez votre travail dans l'un ou l'autre de ces éléments :
1. Section Assignments de ce site web
2. Ajouter aux commentaires de la page.
3. Médias sociaux et tag Dan
  1. Instagram : @bringyourownlaptop
  2. Twitter : @danlovesadobe
  3. Groupe Facebook ici.
4. Toutes les â˜º ci-dessus

Projet de cours 02 – Prototype

Associez votre page d'accueil à vos tableaux de travail.
Votre page peut être une page ou une popup modale.
Prenez une capture d'écran de votre prototype.
1. Assurez-vous d'être en mode Prototype.
2. Édition > Tout sélectionner
3. Prendre une capture d'écran
  1. Mac
    1. CMD + Maj + 4
    2. Faites ensuite glisser une boîte autour de vos plans de travail.
    3. Votre capture d'écran apparaîtra sur le bureau.
  2. PC
    1. Clé de logo Windows + PrtScn
    2. OU Clé de logo Windows + Ctrl + PrtScn
      1. OU Clé de logo Windows + Fn + PrtScn
    3. Votre capture d'écran apparaîtra dans un dossier appelé « Captures d'écran » à l'intérieur de votre dossier « Photos » par défaut.
Partagez votre travail dans l'un ou l'autre de ces éléments :
1. Section Assignments de ce site web
2. Ajouter aux commentaires de la page.
3. Médias sociaux et tag Dan
  1. Instagram : @bringyourownlaptop
  2. Twitter : @danlovesadobe
  3. Groupe Facebook ici.
4. Toutes les â˜º ci-dessus

Projet de cours 03 – Symboles et grilles de répétition

Effacer votre panneau d'objets de tout élément non intentionnel.
Faites de votre navigation et de votre pied de page un symbole nommé dans votre panneau d'éléments
Créer un nouveau plan de travail intitulé « Page de catégorie – Salon ».
Utiliser vos compétences actuelles en matière de wireframing, notamment la grille de répétition pour créer une page qui répertorie tous les produits qui apparaissent dans cette catégorie.
1. Listez les choses dont vous estimez avoir besoin pour être sur cette page. S'il y a des cartes, qu'est-ce qui devrait figurer dans les cartes. A-t-elle besoin d'une navigation gauche comme la maquette instructorHQ ? N'oubliez pas de garder Katherine à l'esprit !
2. Regardez les sites Web de commerce électronique existants pour trouver des idées sur la façon dont une page de catégorie peut fonctionner.

Par exemple : www.ikea.com, www.dfs.co.uk, www.habitat.co.uk, www.amazon.com, www.ebay.com.

Créer un nouveau plan de travail appelé « Page de produit »
1. En utilisant vos compétences actuelles en matière de wireframing, créez une page qui affiche des détails sur le produit final.
2. Comme ci-dessus, répertoriez toutes les choses qui vous semblent devoir être sur cette page pour aider Katherine à effectuer un achat.
Prototyper toutes les pages.
1. Associez-les tous dans une maquette de travail.
Prenez une capture d'écran et partagez-la en utilisant les options énumérées précédemment.
1. Après avoir partagé votre travail, veuillez regarder les versions d'autres personnes et offrir des encouragements et des critiques conceptives.

Projet de cours 04 – Commentaires sur Wireframe

Créer un prototype public.
1. Donnez-lui un nom : Maynooth Prototype V1.0
Partagez le lien avec quelqu'un de votre entourage et demandez-lui de laisser un commentaire.
Enregistrez-vous en faisant une démonstration de base.
Partagez votre lien et votre vidéo dans l'une ou l'autre des trois catégories suivantes :
1. Section Assignments de ce site web
2. Ajouter aux commentaires de la page.
3. Médias sociaux et tag Dan
  1. Instagram : @bringyourownlaptop
  2. Twitter : @danlovesadobe
  3. Groupe Facebook ici.
4. Toutes les â˜º ci-dessus
N'oubliez pas de commenter la maquette de quelqu'un d'autre pour comprendre ce que c'est d'être le client. Quelqu'un fera de même pour vous afin que vous puissiez voir ce que signifie le fait de recevoir des commentaires.

Projet de cours 05 – Moodboard

En gardant à l'esprit les meubles Maynooth, créez un moodboard pour des idées de style, de police, de couleurs et de mise en page.
Ajoutez le tableau d'ambiance à votre plan de travail ou à niiice.io.
Prenez une capture d'écran de votre moodboard.
Partagez votre moodboard dans l'un ou l'autre de ces éléments :
1. Section Assignments de ce site web
2. Ajouter aux commentaires de la page.
3. Médias sociaux et tag Dan
  1. Instagram : @bringyourownlaptop
  2. Twitter : @danlovesadobe
  3. Groupe Facebook ici.
4. Toutes les â˜º ci-dessus

Projet de cours 06 – Couleurs

Option 1 : Utiliser les couleurs existantes.
1. Importer le logo Maynooth.
  1. Files d'exercices > Projet de cours 1 > Logos > Logo-Maynooth-Option1.svg
2. Ajoutez les couleurs du logo dans votre panneau Asets.
3. Ajoutez les couleurs du logo dans votre panneau Nuanciers.
4. Réorganiser les deux jeux de couleurs.
Option 2 : Utiliser vos propres couleurs.
1. Choisissez vos propres couleurs et mettez à jour le logo.
2. Importer le logo Maynooth.
  1. Files d'exercices > Projet de cours 1 > Logos > Logo-Maynooth-Option1.svg
3. Dégrouper le logo.
4. Mettez à jour avec vos propres couleurs.
Partager
1. Ne partagez votre travail pour le moment que si vous avez choisi vos propres couleurs.
2. Capturer votre nouveau logo coloré et partager :
  1. Section Assignments de ce site web
  2. Ajouter aux commentaires de la page.
  3. Médias sociaux et tag Dan
    1. Instagram : @bringyourownlaptop
    2. Twitter : @danlovesadobe
    3. Groupe Facebook ici.
  4. Toutes les â˜º ci-dessus

Projet de cours 07 – Texte et boutons

Créer votre pile de texte.
1. Rubrique 1, Rubrique 2, etc.
Ajouter à vos styles de personnages.
Créer votre texte de héros (titre 1 et texte du corps).
1. Votre site étant un site de commerce électronique, vous trouverez que l'espace héros est davantage axé sur les promotions et les promotions et moins sur le développement de marques afin de disposer d'une image de héros saisonnière.
  1. Par exemple Printemps, Noël, Black Friday, etc.
2. Regardez les sites de meubles existants pour vous inspirer.
Créer un button dans la section Héros
1. Ce qui correspond à la promotion que vous avez décidé d'utiliser.
  1. Par exemple, démarrer les achats, acheter maintenant, plus de détails.

Projet de cours 08 - Dessiner vos propres icônes

En utilisant l'un des outils appris jusqu'à présent dans le cours (outil plume ou booléen), créez :
1. Icône de compte.
2. Icône du panier.
3. Plus une icône de plus de votre choix.
Ajoutez à votre maquette de meubles Maynooth.
Capturer d'écran les icônes de votre maquette et de la partager.
1. Section Assignments de ce site web
2. Ajouter aux commentaires de la page.
3. Médias sociaux et tag Dan
  1. Instagram : @bringyourownlaptop
  2. Twitter : @danlovesadobe
  3. Groupe Facebook ici.
4. Toutes les â˜º ci-dessus

Projet de cours 09 - Maquette complète de Hi Def

C'est une grande idée pour vous ! Nous avons beaucoup appris sur la création d'images et de graphiques. Il est maintenant temps de mettre en pratique les outils pour transformer votre maquette en un design fini. Je souhaite que vous utilisiez tous les outils/techniques énumérés ci-dessous dans votre design de meubles Maynooth. Vous serez meilleur dans certains domaines que dans d'autres. Je veux que vous vous focalisiez sur les choses pour lesquelles vous n'êtes pas doué en â˜º

Compétitionner les vues du site Web sur le bureau pour les pages suivantes. Nous travaillerons sur les versions mobiles/applications plus tard dans le cours. N'oubliez pas que vous créez des designs pour Katherine !
1. Page d'accueil
2. Page de catégorie, p.ex. Salon
3. Page de produit par exemple un canapé 3 places
Assurez-vous d'inclure toutes les fonctionnalités du brief (Dossiers d'exercices > Projet de cours > Brief - Maynooth Furniture.pdf).
1. Note : S'il y a quelque chose dans la liste que vous ne comprenez pas la signification de l'ignorer et passer à autre chose. Vous obtiendrez généralement des éclaircissements de la part du client, mais il est probable que je ne puisse pas vous répondre assez rapidement et que je vous retiendrai.
Utilisez au moins une instance des outils/techniques suivants dans votre conception
1. InDesign
  1. Créez au moins un objet/graphique dans InDesign et intégrez-le dans votre maquette XD.
2. Unsplash
  1. Téléchargez au moins 1 image à utiliser dans votre création depuis Unsplash.
  2. Ajoutez l'image à la bibliothèque CC via Photoshop ou Illustrator ou InDesign et trouvez des images visuellement similaires.
    1. À vous de décider d'utiliser l'image Adobe Stock en filigrane dans votre création, mais assurez-vous de prendre des photos d'écran de vos résultats dans la bibliothèque CC et de les partager avec vos propres devoirs.
3. Photoshop
  1. Ouvrez l'une de vos images Unsplash dans Photoshop.
  2. Ajoutez-le à votre bibliothèque CC.
  3. Ajoutez ensuite ce modèle à votre maquette XD.
  4. Ouvrez ensuite l'élément de la bibliothèque CC (pas l'original)
  5. N'oubliez pas que pour ouvrir l'élément Bibliothèque CC depuis dans XD, vous devez ouvrir la bibliothèque : File > Open CC Libraries et faites un clic droit sur ce dernier et choisissez « Modifier ».
  6. Ajuster l'image dans Photoshop
    1. Par exemple, masquage, niveau/courbes, filtres, échelle sensible au contenu – n'importe quoi.
  7. vii.Sauvegardez et fermez l'image mise à jour et voyez sa mise à jour dans XD… éventuellement.
4. Masquer au moins une image.
5. Ajuster le flou ou l'obscurité d'au moins une image.
  1. Peut-être en tant qu'image d'arrière-plan comme nous l'avons fait pour la page FAQ.
Capturez d'écran les 3 pages de votre maquette et partagez.
1. Section Assignments de ce site web
2. Ajouter aux commentaires de la page.
3. Médias sociaux et tag Dan
  1. Instagram : @bringyourownlaptop
  2. Twitter : @danlovesadobe
  3. Groupe Facebook ici.
4. Toutes les â˜º ci-dessus

Projet de cours 10 - Application mobile/site web

Le client a demandé une version APP de son site de commerce électronique.

Créez des versions mobiles des 3 pages que vous avez créées pour la vue du bureau du site Web .
1. Page d'accueil
2. Page de catégorie, p.ex. Salon
3. Page de produit par exemple un canapé 3 places
Comme il s'agit d'une application, je souhaite que vous créiez une page d'ouverture de session et d'inscription.
Ne vous inquiétez pas du prototypage à ce stade. Nous aborderons le prototypage spécifique pour mobile dans les vidéos à venir.
Capturer la version mobile de votre maquette et de votre partage.
1. Section Assignments de ce site web
2. Ajouter aux commentaires de la page.
3. Médias sociaux et tag Dan
  1. Instagram : @bringyourownlaptop
  2. Twitter : @danlovesadobe
  3. Groupe Facebook ici.
4. Toutes les â˜º ci-dessus

Projet de cours 11 – Micro interactions

Avec votre projet Maynooth Furniture, créez au moins 3 exemples de vos micro-interactions. Vous pouvez utiliser n'importe quelle technique apprise dans le cours jusqu'à présent ou créer la vôtre.
Enregistrez-vous en testant les animations.
Créer une version GIF animée de votre prototype
1. Vous pouvez utiliser Adobe Media Encoder ou https://ezgif.com/video-to-gif
Partagez votre GIF animé :
1. Section Assignments de ce site web
2. Ajouter aux commentaires de la page.
3. Médias sociaux et tag Dan
  1. Instagram : @bringyourownlaptop
  2. Twitter : @danlovesadobe
  3. Groupe Facebook ici.
4. Toutes les â˜º ci-dessus

Projet de cours 12 – Tests utilisateurs

Je veux que tout le monde fasse un test modéré. Cela se fait en personne. Prendre des notes et des changements en fonction de leurs commentaires.
Inscrivez-vous pour un compte d'essai sur usertesting.com et faites tester votre design Maynooth.
Dans cet exercice, je souhaite que vous partagiez votre expérience avec tout le monde plutôt que des captures d'écran ou des prototypes. Dites-nous comment cela s'est passé. Ce que vous avez appris. Indiquez ce que vous comptez faire différemment la prochaine fois Poser des questions.

Projet de cours 13 – Cycles de rugissement

C'est un gros problème. Il peut être aussi grand ou aussi petit que vous le souhaitez. Ce serait un projet parfait pour votre portfolio. Utilisez toutes les compétences que vous avez apprises dans le cours pour créer un site Web et/ou une application mobile pour les cycles de rugissement.

Passez en revue le brief et le personnage pour le client : Roar Bikes.
1. Dossiers d'exercices > Projets de cours 2 > Brief - Roar Bikes.pdf
2. Dossiers d'exercices > Projets de cours 2 > Persona - Roar Bikes.pdf
Logo est disponible dans les fichiers d'exercices > Projet de cours 2 > Logo
Vous devrez créer des wireframes et des prototypes de fidélité Hi Fidelity.
Vous n'avez qu'à vous de choisir les polices, les couleurs et les images.
Faites tester vos prototypes HiFi.
Créer et partager :
1. Appartements
  1. Captures d'écran de vos versions de wireframes et de hifi.
2. Liens publics vers vos exemples Hifi.
3. Maquettes in situ
  1. Exemples d'utilisation de votre travail en place.
  2. Comme les versions que nous avons réalisées avec des objets intelligents dans Photoshop à l'aide des graphiques « Adobe Market > Pour le placement ».
4. Micro-interactions x3
  1. J'aimerais que vous animiez n'importe laquelle de vos micro interactions ou transitions de plans de travail et que vous les partagiez via MP4 ou Gif animé
  2. Points supplémentaires : Exemples After Effects ou Proto Pie.
Partagez votre travail dans l'un ou l'autre de ces éléments :
1. Section Assignments de ce site web
2. Ajouter aux commentaires de la page.
3. Médias sociaux et tag Dan
  1. Instagram : @bringyourownlaptop
  2. Twitter : @danlovesadobe
  3. Groupe Facebook ici.

Toutes les â˜º ci-dessus