habillage

Conception graphique

cycle-court

Sketch : UX Design – Prototypage

Créer des interfaces et des objets vectoriels pour concevoir des sites Web

Créer des interfaces et des objets vectoriels pour concevoir des sites Web, des applications mobiles, des sites responsives. Simple d’utilisation et efficace pour les exports de vos images.

 

Objectifs

  • Comprendre les principes de l’outil, contexte d’utilisation
  • Créer le design des interfaces d’une application mobile, d’un site internet, gestion du projet
  • Appréhender les bases de l’interface utilisateur sur mobile, le design d’application native et les outils nécessaires pour créer des applications (iOS, Android) ) sur différents supports (iPhone, iPad, mobile, tablette) et différentes résolutions d’écrans
  • Exporter le design facilement
 

Pré-requis

Avoir une bonne maîtrise de son environnement informatique. Connaître le design sur informatique est un plus (Illustrator, Photoshop, InDesign…). Avoir une expérience en conception et / ou en conduite de projet digital.

 

Public concerné

Graphistes, webdesigner ou toute personne devant utiliser Sketch dans le cadre de développement web, chef de projet web, directeur artistique …

 

PROGRAMME

Découvrir l’outil & l’interface

  • Description des fonctionnalités de Sketch : UI, UX, Wireframe, maquette …
  • Rappel sur le dessin vectoriel
  • Explorer l’interface de Sketch, barre d’outils, créer son espace de travail « Artboard »
  • Outils complémentaires

Concevoir une maquette graphique

  • Concevoir des pages et des plans de travail

Les calques et les formes

  • Utilisation des calques, symboles, comportements responsives des symboles, styles, masques, tranches, grilles, repères
  • Ajouter, Sélectionner, positionner, redimensionner, supprimer des calques et grilles
  • Groupes, combinaison de calques, style de calques et masques

Style de calques partagés et Symboles

  • Insérer une forme prédéfinie, ciseaux, outil crayon, rotation, transformation
  • Opérations booléennes
  • Aplatissement
  • Organiser les plans
  • Aligner et distribuer
  • Ajouter, réorganiser et supprimer des pages

Les textes

  • Style de texte : couleur, police, opacité et mélange des calques
  • L’inspecteur du texte
  • Réglages de la typographie et des paragraphes
    Fond, bordure, ombre, flou
  • Styles communs, texte curvilig

Bitmap – les images

  • Import et modification d’un bitmap
  • Réglage des couleurs
  • Copier du code SVG

Les symboles et les styles

  • Créer un symbole
  • Intégration de texte
  • Organiser et dupliquer un symbole
  • Appliquer un symbole
  • Gérer les symboles
  • Définir un style, le fond, les bordures, les ombres
  • Créer un flou, gérer les couleurs, les dégradés
  • Gérer les styles partagés

Mise en situation: réalisation d’une maquette graphique

Exporter les éléments graphiques

  • Exporter des calques, des images, des tranches. les formats fichier, les plans de travail
  • Définir les formats de fichiers, les attributs CSS
  • Les plugins utiles pour faciliter l’exportation des images, icônes de lancement, splashscreen pour toutes les résolutions d’écrans
  • Impression et PDF
  • Partage en local
  • Tests avec Mirror sur iOS

 Plugins & templates

  • Templates, télécharger ou acheter des modèles
  • Plugins et ressources
  • Logiciels complémentaires et compatibles (Flinto, Invision…)

Atelier : réaliser une présentation interactive avec InVision

Financements

Salarié
d'une structure privée
  • Prise en charge par l’entreprise dans le cadre du Fongécif
  • OPCA (Organisme Paritaire Collecteur Agréé)
  • Compte Personnel de Formation (CPF – DIF)
  • Financement Personnel
Chef d'entreprise, professions libérales, indépendants
  • OPCA (Organisme Paritaire Collecteur Agréé)
  • Compte Personnel de Formation (CPF – DIF)
  • Financement Personnel
  • AGEFICE ( Association de Gestion du Financement de la Formation des Chefs d’Entreprise)
  • Crédits d’impôts
Salarié de la fonction publique
  • Compte Personnel de Formation (CPF – DIF)
  • Période de professionnalisation
Salarié d'une structure privée
  • Congé individuel de formation (CIF – CDD)
  • Compte Personnel de Formation (CPF)
  • Aide Individuelle à la Formation (AIF)