• 1. Introduction
    • Les outils du développeur
  • 2. HTML
    • La syntax
      • Balise inline ou block ?
      • Les balises les plus utiles
      • Balises avec attributs
    • Une page html
      • Le nommage en WEB
      • Créer un fichier HTML
      • Structure de base
  • 3. CSS
    • La syntax
      • Les unités
      • Les sélecteurs
    • Une feuille css
      • Créer un document CSS
      • Lier le CSS
    • Positions
    • Flexbox
    • Grid
    • Responsive (Media queries)
  • 4. JS
    • La syntax
      • Les variables
    • Un fichier js
    • Exercices
  • 5. CMS
    • Introduction aux CMS
    • Installation de XAMPP (serveur local)
    • Joomla
      • Architecture
      • Le thème enfant
      • Les modules
      • Les menus
      • Custom fields
      • Language overrides
      • Tips&tricks
    • Wordpress
      • Initiation d'un wordpress
      • Le thème enfant
  • 6. SEO
    • Pourquoi la sémantique ?
  • 7. Mise en ligne
  • 8. UI / UX Design
    • Figma
      • Comprendre l'interface
      • Les pages et les calques
      • Raccourci clavier
    • Introduction
      • Les outils et aides de créations
      • Déroulement type d'un projet
Contact & horaire
  • fr
  • de

Les outils et aides de créations

Logiciels création UI

Logiciels
Points fort Prix
Adobe XD xd-logo Très intuitif surtout si on connait les autres logiciels Adobe + le meilleure pour créer un prototype CHF 61.40 / mois
Depuis avril 2023, il n'est plus possible de prendre adobe XD en tant qu'application unique, il faut donc prendre le pack Creative Cloud All Apps pour y avoir accès.
Sketch sketch-logo Excellent dans l'utilisation des symbols et la création de composents pour modifier son contenu ~CHF 10.00 / mois
Figma figma-logo Excellent outils pour la collaboration en temps réel et c'est une plateforme en ligne, donc vous pouvez y accéder depuis n'importe quel ordinateur sans rien télécharger
Une application est néanmoins disponible pour les designer :)
Plan gratuite ou ~CHF 15.00 / mois

Les logiciels détaillées

Ci-dessous plus de détails sur la force de chacun des logiciels :

Sketch :
  • Interface utilisateur optimisée pour macOS : Sketch est conçu spécifiquement pour les utilisateurs de macOS, ce qui en fait un choix privilégié pour les concepteurs travaillant sur cette plateforme.
  • Performance fluide : L'application est connue pour sa réactivité et sa fluidité, ce qui facilite le travail sur des projets complexes.
  • Écosystème de plugins : Sketch dispose d'une vaste communauté de développeurs de plugins, permettant d'ajouter des fonctionnalités et d'automatiser des tâches.
  • Bibliothèques de symboles : Sketch offre des bibliothèques de symboles et de composants, ce qui facilite la création de designs cohérents et réutilisables.
  • Extensions d'intégration : De nombreuses extensions tierces permettent d'intégrer Sketch à d'autres outils et plateformes.
Figma :
  • Collaboration en temps réel : Figma brille par sa collaboration en temps réel, permettant à plusieurs designers de travailler simultanément sur un même projet, quel que soit l'endroit où ils se trouvent.
  • Plateforme basée sur le web : En étant basé sur le web, Figma offre une flexibilité exceptionnelle pour accéder et travailler sur des projets depuis différents appareils.
  • Compatibilité multiplateforme : Figma fonctionne sur macOS et Windows, facilitant la collaboration entre les membres d'une équipe utilisant différentes plateformes.
  • Prototypage avancé : Figma offre un prototypage puissant avec des fonctionnalités avancées d'interaction et d'animation.
  • Bibliothèques partagées : Les bibliothèques de composants de Figma peuvent être partagées entre plusieurs projets, garantissant une cohérence dans le design.
Adobe XD :
  • Intégration avec Creative Cloud : Adobe XD s'intègre parfaitement avec les autres applications de la suite Adobe Creative Cloud, ce qui facilite le flux de travail pour les concepteurs qui utilisent d'autres outils Adobe.
  • Interaction naturelle : XD offre des outils de prototypage et d'interaction qui sont intuitifs et faciles à utiliser, facilitant la création de prototypes réalistes.
  • Animation cohérente : La fonction "Auto-Animate" d'Adobe XD permet de créer des animations cohérentes et fluides entre les écrans.
  • Plugins et ressources : Adobe XD dispose d'une gamme croissante de plugins tiers et de ressources en ligne pour enrichir le flux de travail.
  • Intégration avec Adobe Fonts : Les polices Adobe Fonts sont facilement accessibles depuis XD, simplifiant la gestion des polices dans les projets.

Aide graphique et inspiration

Ci-dessous, trois plateformes qui vous permettra de partager votre travail, de trouver de l'inspiration, d'explorer des projets, et d'accéder à une variété de ressources numériques pour vos projets créatifs.

  1. Dribbble :
    Dribbble est une plateforme en ligne qui permet aux designers de partager leurs créations sous forme de petits aperçus appelés "shots". Les designers peuvent présenter leurs travaux en cours, leurs projets terminés et leurs concepts. Dribbble est souvent utilisé pour trouver de l'inspiration, partager des idées et échanger avec d'autres concepteurs.

  2. Behance :
    Behance est une plateforme de portfolio en ligne appartenant à Adobe. Elle permet aux créateurs de présenter leurs projets artistiques et de conception, y compris le design graphique, la photographie, l'illustration et le design web.

  3. Envato :
    Envato est une place de marché en ligne qui propose une grande variété de produits numériques, notamment des thèmes de site web, des modèles de conception, des plugins, des vidéos, des musiques, des graphiques et bien d'autres encore. Les concepteurs, les développeurs et les créatifs peuvent vendre leurs créations sur les différents sites d'Envato, tels que ThemeForest, CodeCanyon, GraphicRiver et AudioJungle. Les utilisateurs peuvent acheter et télécharger des ressources pour les intégrer dans leurs projets.

Ressources photos

  1. Pexels :
    Pexels est une plateforme en ligne qui offre une vaste collection de photos et de vidéos libres de droits. Les photographes et vidéastes du monde entier contribuent à cette bibliothèque, permettant aux utilisateurs de télécharger, modifier et utiliser ces médias pour diverses fins, y compris commerciales.

  2. Unsplash :
    Unsplash est également une plateforme de partage de photos et de vidéos libres de droits. Il se distingue par la haute qualité artistique de ses contributions. Tout comme Pexels, les utilisateurs peuvent télécharger et utiliser les médias d'Unsplash gratuitement, avec une grande flexibilité d'utilisation.

  3. Adobe Stock : (payant)
    Adobe Stock est un service payant proposé par Adobe. Il s'agit d'une bibliothèque de ressources visuelles, y compris des photos, des vidéos, des illustrations et des modèles 3D, destinée aux professionnels de la création. Les utilisateurs peuvent acheter des licences pour ces ressources et les intégrer directement dans leurs projets Adobe, ce qui facilite la création et l'édition sans quitter les applications Adobe.

Table of Contents

  • Logiciels création UI
  • Les logiciels détaillées
  • Aide graphique et inspiration
  • Ressources photos