Maquettez votre site responsive avec Photoshop

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

ICAN
OpenClassrooms

* MOOC Francophone est un annuaire. Nous n’organisons aucun cours, le lien « Inscription » vous redirige vers la page web des organisateurs.
  • icon

    Intervenants

    Virak Mey
    Responsable pédagogique du bachelor webdesign et communication graphique à l’ICAN et consultant en direction de création à Creative Slashers

  • icon

    Duré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.

  • icon

    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.

  • icon

    Charge de travail

    1 à 2 heures / semaine

  • icon

    Coût

    Gratuit

  • icon

    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.

  • icon

    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.

  • icon

    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
    – Quiz

    Partie 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 portfolio

    Partie 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 portfolio

    Partie 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 portfolio

  • icon

    Plateforme

    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)

Evaluer ce cours !

Votre avis participe à une dynamique constructive pour les prochains sessions

0 50 100 9
50%
Moyenne sur 9 votes Je participe !
fermer

Merci pour votre contribution. Votre avis est en attente de modération avant publication. Après validation, vos données seront anonymisées.

fermer

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 ! -

  • La durée des modules et le rythme de travail sont conformes à mes attentes.
    66%
  • Les ressources sont utiles et le contenu des modules est pertinent.
    70%
  • Les activités proposées facilitent la compréhension du cours
    62%
  • Les évaluations permettent de mesurer votre progression dans ce cours
    55%
  • Les échanges avec l’équipe pédagogique correspondent à vos besoins
    56%
  • Les interactions entre utilisateurs représentent une véritable valeur ajoutée
    56%
  • L’accès à la plateforme est simple, sa prise en main intuitive et la navigation facile
    70%
X

Recevez chaque semaine les MOOCs à suivre !

Ne ratez aucun nouveau MOOC ! Avec notre newsletter garantie sans SPAM, restez informé pour ne louper aucun cours à venir.

Merci ! Votre demande d'inscription vient d'être prise en compte :)

Pin It on Pinterest

Share This