Vous vous demandez comment concevoir un site web entièrement responsive, visible sur tous les écrans ? Je vous propose justement à travers ce cours d’aborder le responsive design du point de vue du webdesigner !
Nous verrons ensemble les grands principes du responsive design, et surtout comment les appliquer en créant 2 maquettes sous Photoshop d’une même page web : une version écran mobile et une version écran d’ordinateur. Nous utiliserons ensuite Bootstrap afin d’avoir un premier aperçu codé et fonctionnel de votre site responsive !
Les participants peuvent évaluer ce cours et partager leur avis en cliquant ici
* MOOC Francophone est un annuaire. Nous n’organisons aucun cours, le lien « Inscription » vous redirige vers la page web des organisateurs.
Intervenants
Virak Mey
Responsable pédagogique du bachelor webdesign et communication graphique à l’ICAN et consultant en direction de création à Creative SlashersDurée
4 semaines
Vous pouvez suivre le cours quand vous le souhaitez. Votre planning de cours est personnalisé en fonction de la date à laquelle vous choisissez de démarrer le cours.
Si vous débutez le cours, le lundi à 18 heures, vous aurez jusqu’au lundi de la semaine suivante à 17h59 pour rendre les exercices demandés et passer ainsi à la semaine de cours suivante.
Cette formation est ouverte toute l’année.
Prérequis
il est conseillé d’avoir déjà des notions sur le fonctionnement de Photoshop et le langage HTML pour suivre ce cours. Si vous avez besoin de vous rafraîchir la mémoire, n’hésitez pas à consulter les autres cours « Débuter sur Adobe Photoshop ! » de Yannick Piault et « Apprenez à créer votre site web avec HTML5 et CSS3 » de Mathieu Nebra.
Charge de travail
1 à 2 heures / semaine
Coût
Gratuit
Certification
Vous devez compléter tous les exercices du cours et obtenir une note finale d’au moins 70% pour obtenir votre certification !
Un compte premium OpenClassrooms (20€ / mois) est nécessaire pour valider votre certification.
Vous pouvez faire reconnaître ce titre contre un crédit ECTS (European Credits Transfer System) auprès de l’ICAN.
Déroulement
De nouveaux cours seront publiées chaque semaine, et vous devrez effectuer des exercices pour montrer que vous avez bien assimilé les dernières notions. Ce cours est principalement sous forme textuelle. Seules quelques vidéos viennent illustrer les points les plus techniques du cours, pour montrer la manipulation de certains outils logiciels.
Si vous rencontrez des difficultés, pas de panique ! Vous pouvez à tout moment obtenir de l’aide sur les forums.
Programme
Partie 1 – Intégrez la notion de responsive design à vos projets
– Introduction au responsive design
– Les enjeux du responsive design
– Pensez « responsive design » !
– Structurez votre site avec des wireframes
– Créez vos wireframes avec Balsamiq
– QuizPartie 2 – Maquettez la version « aperçu mobile » de votre site
– Utilisez Photoshop pour le responsive design
– Les outils de création de formes vectorielles
– La grille fluide
– Le design d’éléments d’interfaces
– Quiz
– Activité : Concevez la maquette « aperçu mobile » de votre portfolioPartie 3 – Maquettez la version « aperçu desktop » de votre site
– Profitez de l’espace
– Repensez l’ergonomie
– Adaptez vos éléments graphiques
– Enrichissez votre version « aperçu desktop »
– Quiz
– Activité : Concevez la maquette « aperçu desktop » de votre portfolioPartie 4 – Intégrez votre maquette avec Bootstrap
– Introduction à Bootstrap
– Exportez vos éléments graphiques depuis Photoshop
– Intégrez vos éléments graphiques dans Bootstrap
– Quiz
– Activité : Créez un prototype responsive fonctionnel de votre portfolioPlateforme
OpenClassrooms
Une technologie issue du projet Open Source CLAIRE (Community Learning through Adaptive and Interactive multichannel Resources for Education) développé conjointement par OpenClassrooms (ex : Simple IT / Site du zéro), le laboratoire LIRIS (équipe Silex), et INRIA Grenoble (équipe WAM)
Merci pour votre contribution. Votre avis est en attente de modération avant publication. Après validation, vos données seront anonymisées.
Taux de satisfaction
Votre perception du cours doit rester constructive. La critique est possible mais elle doit rester courtoise. Nous encourageons un débat sain et constructif entre concepteurs de MOOC et apprenants. Les avis sont modérés avant publication et les données sont anonymisées après contrôle. Le taux de satisfaction et la pondération par critères restent accessibles à tous. Les commentaires anonymisés sont disponibles pour les concepteurs de MOOC qui en font la demande. Pour évaluer ce cours, cliquez sur le lien bleu - Je participe ! -
