Sketch : UX Design – Prototypage

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.

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

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.

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

télécharger la brochure