list 4 séquences
assignment Niveau : Introductif
chat_bubble_outline Langue : Français
card_giftcard 36 points
- /5
Avis de la communauté
0 avis

Les infos clés

credit_card Formation gratuite
verified_user Certification gratuite
timer 60 heures de cours

En résumé

Ce MOOC permet d’aborder via l'utilisation de Photoshop, le responsive design du point de vue du webdesigner !

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 !

Pré-requis : il est conseillé d’avoir déjà des notions sur le fonctionnement de Photoshop et le langage HTML pour suivre ce cours.

more_horiz Lire plus
more_horiz Lire moins
dns

Le programme

Partie 1 - Intégrez la notion de responsive design à vos projets

  • 1. Introduction au responsive design
  • 2. Les enjeux du responsive design
  • 3. Pensez "responsive design" !
  • 4. Structurez votre site avec des wireframes
  • 5. Créez vos wireframes avec Balsamiq
  • Quiz

Partie 2 - Maquettez la version "aperçu mobile" de votre site

  • 1. Utilisez Photoshop pour le responsive design
  • 2. Les outils de création de formes vectorielles
  • 3. La grille fluide
  • 4. 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

  • 1. Profitez de l’espace
  • 2. Repensez l’ergonomie
  • 3. Adaptez vos éléments graphiques
  • 4. 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

  • 1. Introduction à Bootstrap
  • 2. Exportez vos éléments graphiques depuis Photoshop
  • 3. Intégrez vos éléments graphiques dans Bootstrap
  • Quiz
  • Activité : Créez un prototype responsive fonctionnel de votre portfolio

Certificat de réussite

 

record_voice_over

Les intervenants

Virak Mey

Virak Mey est responsable pédagogique du bachelor webdesign et communication graphique au sein de l’ICAN (Institut de Création et Animation Numérique) où il enseigne aussi le design numérique. Issu d’une formation en art appliqué et multimédia, Virak a travaillé en tant que directeur artistique web au sein d’agences parisiennes comme Publicis et Tbwa/Paris. Sa passion du design numérique l’a également amené à développer un véritable goût pour la transmission de son savoir dans ce domaine. En plus de son travail de pédagogue, Virak est également consultant en direction de création au sein de l’agence Creative Slashers.

store

Le concepteur

L'ICAN (institut de création et animation numériques) est une école supérieure qui forme des infographistes associant des compétences techniques de réalisateur à la créativité du concepteur.

INSTITUT d’études supérieures spécialisé dans le domaine de l’image et du numérique, l’école forme à trois spécialités complémentaires de l’Infographie : le Game Design, l’Animation Numérique et Web et Création Graphique.

assistant

La plateforme

OpenClassrooms (anciennement le Site du Zéro ou SdZ), est un site web qui propose des cours autour de l'informatique, des sciences et de l'entrepreneuriat.

Les cours en ligne peuvent être réalisés aussi bien par l'équipe du site, des professeurs d'universités ou de grandes écoles partenaires que par ses membres.

Aujourd'hui, les cours sont disponibles dans plusieurs format : MOOC (Massive Open Online Course), texte web, e-book, livre et en vidéo. L'entreprise délivre des certifications pour certains cours, dont une reconnue par l'état, en partenariat avec IESA multimédia.

Vous êtes le concepteur de ce MOOC ?
Quelle note donnez-vous à cette ressource ?
Contenu
0/5
Plateforme
0/5
Animation
0/5