Cours 9 - Semaine 5

AVANT LE COURS

  • Design du site web terminé à 100%

Pendant le cours

  • Évaluation. de votre portfolio par les pairs

  • Travailler sur Intégration du site web

  • Site web fonctionnel à 25%


https://docs.google.com/document/d/1Ol6oTkS6Bkjxad4lv5ZCvutfmZA9puT3PJ5kkSrA5qY/edit?usp=sharing


Cours 8 - Semaine 4 (50% du cours fait, yeah!!!)

AVANT LE COURS

  • Remise de votre carte d’affaires finale fait dans Illustrator ou Photoshop

  • Imprimer votre carte d’affaires finale en couleur (recto et verso) fait dans Illustrator ou Photoshop

  • Confirmation du nom de domaine / URL fonctionnel

  • Confirmation de l’hébergeur (Externe ou Cégep) / Hébergement fonctionnel - page d’accueil

  • Votre carte d’affaires RECTO et VERSO en version PDF

ThéoriE + LABORATOIRE

Correction de votre carte d’affaires +Intégration du Portfolio

  1. Rencontre individuelle pour le suivi de votre portfolio

  2. Modifier s’il y a lieu votre carte d’affaires RECTO et VERSO

  3. Poursuivre l’intégration de votre portfolio (design, programmation, etc.)

  4. Proposition de coûts pour vos cartes : 100 cartes, livraison, 19 points, soft touch recto et verso pour 20,00$ + taxes : 23,00$

Template obligatoire pour l’impression de votre carte chez l’imprimeur. NE PAS METTRE VISIBLE LE CALQUE «BLEED» Télécharger le .AI





Cours 7 - Semaine 4

ThéoriE + LABORATOIRE

Carte d’affaires + Correction de vos interfaces de votre Portfolio + Texte À propos

AVANT LE COURS

  • Remise des 2 versions différentes de vos cartes d’affaires fait dans Illustrator ou Photoshop

  • Imprimer en couleur des 2 versions différentes de vos cartes d’affaires (recto et verso)

ThéoriE + LABORATOIRE

Carte d’affaires + Correction de vos interfaces de Portfolio

  1. Correction par le professeur de votre texte «À propos»

  2. Choisir votre carte d’affaires finale RECTO et VERSO dans vos 2 propositions

  3. Imprimer votre meilleur proposition en couleur RECTO et VERSO

  4. Modifier votre carte d’affaires suite aux commentaires

  5. Rencontre individuelle pour le suivi de votre portfolio : correction du texte «À propos»

  6. Achat du nom de domaine pour le début du prochain laboratoire cours 8

  7. Planifier l’hébergement de votre portfolio à l’externe ou utiliser le serveur du Cégep pour le début du prochain laboratoire cours 8

  8. Mettre une page en ligne sur l’hébergeur «Site en construction»

  9. Poursuivre l’intégration de votre portfolio (programmation, etc.)

  10. Interfaces graphique du site web fait 75%

AU PROCHAIN COURS

  • Travailler sur vos interfaces du portfolio

  • Valider que le nom de domaine est fonctionnel / URL fonctionnel

  • Valider que l’hébergeur (Externe ou Cégep) / Hébergement fonctionnel - page d’accueil «en construction»

  • Votre carte d’affaires RECTO et VERSO imprimé en couleur pour planifier une deuxième correction fait par vos pairs

GRILLE DE CORRECTION POUR LE PROFESSEUR


Cours 6 - Semaine 3

ThéoriE + LABORATOIRE

Carte d’affaires

  1. Produire 3 esquisses papiers de vos cartes d’affaires RECTO et VERSO avant de travailler dans Illustrator

  2. Réaliser 2 versions différentes de vos cartes d’affaires fait dans Illustrator ou Photoshop

  3. Format 2" x 3.5" + 1/8" de bleed tout le tour = 2.25" x 3.75" PAS BESOIN des marque de coupes.

  4. Dans Pinterest, créer 1 tableau : 10 x Carte d’affaires

  5. Présentation des tailles, des finis et les épaisseurs de papier (16 pts à 32 pts)

  6. Charte Pantone

  7. Échéancier : La remise aura lieu au cours 9

https://www.youtube.com/watch?v=QJgmhI3AWwg

INSPIRATION CARTES D’AFFAIRES

Fournisseurs

AU PROCHAIN COURS

  • Remise de 2 versions différentes de vos cartes d’affaires fait dans Illustrator ou Photoshop


Cours 5 - Semaine 3

AVANT LE COURS

  • Terminer les wireframes à 100% hi-fi dans Figma

AU milieu du PROCHAIN COURS

  • Prototype de votre wireframe fonctionnelle dans Figma

  • Critiques par les pairs dans le but d'améliorer votre portfolio au milieu du prochain laboratoire


ThéoriE + LABORATOIRE

AU PROCHAIN COURS

  • Faire les modifications de votre projet suite aux commentaires

    Travailler sur votre dossier préparatoire :

    • 1- Fonctionnalités voulues ( ex: télécharger mon cv)

    • 2- Contenu ( à propos, textes pour les 5 projets et compétences)

    • 3- Moodboard x 1 / Capture d’écran

    • 4- Wireframe (mobile) x 1 / Capture d’écran

    • 5- Wireframe (desktop) x 1 / Capture d’écran

    • 6- Interface avec les éléments graphiques (mobile) x 1 / Capture d’écran

    • 7- Interface avec les éléments graphiques (desktop) x 1 / Capture d’écran

  • À remettre au début du laboratoire 6 au format PDF sur le serveur dans Remise travaux

  • Compte pour 15%

RAPPEL : VOTRE PORTFOLIO EN LIGNE ET FONCTIONNEL POUR LE COURS 10


Cours 4 - Semaine 2

AVANT LE COURS

  • Terminer les wireframes à 50% hi-fi dans Figma

Remise au début du cours

  • Préparer l'URL de votre Portfolio pour ceux qui me l’on pas remis

ThéoriE + LABORATOIRE

AU PROCHAIN COURS

  • Terminer les wireframes à 100% hi-fi dans Figma

AU milieu du PROCHAIN COURS

  • Prototype de votre wireframe fonctionnelle dans Figma

  • Critiques par les pairs dans le but d'améliorer votre portfolio au milieu du prochain laboratoire


Cours 3 - Semaine 2

AVANT LE COURS

  • Choisir votre nom de domaine (.ca ou .com ou .co ou autre)

  • Gabarit pour rédiger

  • Gabarit réalisation

Remise au début du cours

  • 2 x moodboards

  • 1 x wireframe (Figma) - Mobile ou desktop

ThéoriE + LABORATOIRE

  • Théorie : Rédaction PDF

  • Rencontre individuelle (Projets à mettre dans le portfolio + wireframe lo-fi)

  • Nom de domaine

  • Hébergement

  • Wireframe final low-fi fait dans FIGMA

  • Remise du URL de FIGMA de votre wireframe

  • Remise du URL de votre nom de domaine

AU PROCHAIN COURS

  • Travailler sur les maquettes graphiques fait dans FIGMA à 25% mobile et desktop

  • Achat du nom de domaine

  • Achat de l’hébergement

NOM DE DOMAINE / 1011


NOM DE DOMAINE / 1012

NOM DE DOMAINE / 1020

Figma / 1011

  • Alexandre Tourigny

  • Andres Sanabria

  • Anthony Chassé

  • David Cyr-Pinsonnault

  • Eric Charbonneau

  • Johnny Ky

  • Laurianne Benoît

  • Marie-Pier Proulx

  • Michaël Vetrano

  • Michel Amyot

  • Nicolas Berthiaume

  • Nicolas Martel

  • Nicolas Morissette

  • Rémi Perreault

  • Simon Conway

  • Stéphanie Nguyen-Quoc

  • Timothée Kezer

  • William Benjamin Laplante

  • Zheng Zhe Jiang

Figma / 1012

  • Anabelle Langelier

  • Bruno Guérin

  • Émile Paré-Allinger

  • Gabriel Brazeau

  • Gabriel Robidoux

  • Gabrielle Martin

  • Guillaume Beausoleil

  • Ivan Zlatev

  • Léa Kelly

  • Marianne Duchesneau

  • Marie-Charlotte Coutaud

  • Mélody Bédard-Martin

  • Sebastian Macias

  • Nadia Brière

  • Pascal Perrault

  • Samuel Desrosiers

  • Sébastien St-Cyr

  • William Bonneterre

Figma / 1020

  • Adam Tremblay

  • Alexandre Louis Hébert

  • Anthony Lopez-Gagnon

  • Arielle Duchesneau

  • Gabriel Mercier

  • Hugo Babin

  • Jacob Garneau

  • Jérémy Molaison

  • Martin Gélinas

  • Mélina Pelletier

  • Michael Contant-Holowatyj

  • Nicolas Bourg

  • Philippe Gosselin

  • Tatiana Titov

  • Vincent Barriault

  • William Tremblay


Cours 2 - Semaine 1

ThéoriE

  • Étapes de réalisation et contenu du portfolio

  • Rédaction de contenu

  • Théorie : Contenu PDF

  • Gabarit pour rédiger objectifs PDF

  • Gabarit réalisation PDF

  • Choisir son URL et hébergement

Laboratoire

  • Répertorier vos projets pour les intégrer dans votre site web

  • Rencontres individuelles

  • Rédaction de contenu (objectifs et 5 réalisations)

  • 2 x moodboards

  • 1 x wireframe (Figma) - Mobile ou desktop

  • Après fait le wireframe et débuter les maquettes préliminaires fait à 20% qui sera présenter au professeur lors de rencontre préliminaire au prochain laboratoire. Il s’agit d’un début. Je m’attends pas à la perfection. Donc, vous pouvez commencer à faire des tests de typographie, couleurs, etc. Débutez à explorer le UI.

  • Sections à développer , il s’agit de suggestion:

    • Accueil

    • Projets

    • Compétences

    • À propos

    • Contact

    • CV


ÉCHÉANCIER

  • Cours 3 : Début du cours 3

    • 1 x Wireframe fait dans FIGMA - Fait dans un # «frame » nommé : wireframe - Mobile ou desktop

    • 2 x Moodboard

    • 5 x fiches fait à partir du gabarit réalisation PDF

    • 1 x gabarit pour rédiger PDF

  • À venir:

    • Débuter les interfaces dans FIGMA

  • Utiliser FIGMA MIRROR pour voir votre projet sur le mobile. Télécharger l’application sur l’App Store ou Google PLAY STORE

Références


Aide mémoire pour le prof


Exemples de projet d’étudiants réalisés l’an passé…


Exemples de porfolios inspirants


Devoir

  • Moodboard (Figma)t : thème, couleur, icône, éléments graphiques et typographie.

  • Gabarit pour rédiger PDF

  • Gabarit réalisation PDF

  • Wireframes lo-fi fait dans Figma.


Prochain cours

  • Critiques par les pairs dans le but d'améliorer votre portfolio


OUTIL POUR VÉRIFIER LA DISPONIBILITÉ DU NOM DE DOMAINE SUR FUNIO


Hébergement + Nom de domaine

Option 1 - Hébergement sur le serveur du collège

  • Gratuit

  • Espace Web 3 GB

  • Bande passante ilimitée

  • Base de données MySQL 1

  • Durée début septembre 2019

  • Serveur : dectim.ca

  • Exemple: tgaudette.dectim.ca

  • Pour le support contacter Bernard Imbert


Option 2 - Hébergement SKY NET (Québec)

  • Le code promotionnel DECTIM-19 vous offres 50% de rabais sur tous nos forfaits. Le forfait ici présenté est le débutant.

  • Code promo : DECTIM-19

  • Espace Web 250 MB

  • Bande passante ilimitée

  • Redirecteur courriel illimité

  • Base de données MySQL 1

  • Compte FTP 1

  • Back-Up aux 48h

  • 155.40$/années – un code promos de 50% : 77.70 $

Nom de domaine

  • Engin de recherche : domaine.skynt.ca

  • .com 15.75 $

  • .ca 23.50 $

  • + protection ID 9.95 $

Prix total

  • Pour un forfait débutant, un .com avec le protection ID : 103.40 $

  • Pour un forfait débutant, un .ca avec le protection ID : 111.15 $

  •  *Des extensions TDL personnalisées sont disponibles sur demande.

Liens utiles


Option 3 - Hébergement 514 (Québec)

  • Espace Web ilimitée

  • Bande passante ilimitée

  • Boite courriel 3

  • Base de données MySQL 2

  • Back-Up au 24h, 48h, 7 jours, 1 mois, 2 mois

  • PERSO à 10$/mois @ 50% = 60$/an

  • Voici le formulaire à remplir avec le code promo CEM2019

    http://www.514hebergement.com/commander/?id=1

Nom de domaine

  • .com 11.25$

  • .ca 17.25$

Prix total : Hébergement + Nom de domaine

  • .com 71.25$

  • .ca 77.25$


Option 4 - Hébergement web Canada

Nom de domaine

  • .com 12,99$

  • .ca 9,99$

  • + protection ID 9.95$



Option 6 - Name Cheap (USA)

Nom de domaine

  • .com 15,63$

Prix total : Hébergement + Nom de domaine

  • 27,33$ + 15,63$ = 42,96 $



La protection ID de domaine c'est quoi?

Lorsque vous enregistrez un domaine, votre nom, adresse, adresse électronique et numéro de téléphone sont disponibles pour quiconque veut les voir. La seule façon de prévenir les factures frauduleuses et le pourriel (spam), est d'activer la protection ID. La protection ID cache vos informations. Si vous avez acheté un domaine chez Novahoster la protection ID est offerte en option pour votre domaine. Si vous désirez vérifier si cette protection est activée sur votre compte, branchez-vous sur votre compte.


COURS 1 - SEMAINE 1

/ étape: Analyse et planification

THÉORIE

  • Présentation du professeur

  • Objectifs du cours

  • Présentation du calendrier de travail

  • Communication par Léa

  • Disponibilités et mon bureau E-201

  • Planification du professeur PDF

  • Plan de cours PDF

  • Résumé des objectifs PDF / Pour le professeur

  • Projet sportif


LABORATOIRE

  • Répondre au sondage (Identifier son profil de stagiaire) DOC ou en ligne

  • Objectifs/public cible

  • Adresse courriel professionnelle et nom de domaine

  • Comptes professionnels (Instagram, Pinterest, LinkedIn)

  • Répertorier 5 meilleurs projets ( Objectifs du cours et les différents outils promotionnels à réaliser pendant le cours)

  • Recherche et analyse de portfolios

  • Inspiration: https://creativemarket.com

  • Recherche de 5 portfolios inspirants

  • Votre site web (portfolio) : Arborescence et fonctionnalités requises

À FAIRE

  • Création de votre Pinterest

  • Création de votre Instagram

  • Dans Pinterest, créer 3 tableaux : 10 x Thèmes, 10 x UI (couleurs, boutons, style graphique...) et 10 x UX (expérience utilisateur) touver des «gif» animés

RÉFÉRENCES

PINTEREST / 1011

PINTEREST / 1012

PINTEREST / 1020

Instagram / De la techniques TIM / @timedouard

Instagram / 1011

Instagram / 1012


Instagram / 1020