moins d'une minute de lecture

Notions de base

...

Scroll

Notions de base

Branding

Logo, typos, couleurs, charte

Direction artistique

Boards

UX

Personae, scenarii, experience map

UI

Wireframes, mockups (Invision), UI kit, ergonomie, breadcrumb (3 types)

Web

RGB, retina, Photoshop, Sketch

On design en 1280x768, avec un container de 1140px, une grille de 12 colonnes avec des gouttières de 30px. Dans XD, paramétrer la marge sur les côtés à 70=(1280-1140)/2.

On peut utiliser CSS Grid Overlay pour vérifier les calages. https://chrome.google.com/webstore/detail/css-grid-overlay/hajfilceeneohkmcakehndmaeonhlack Avec le preset suivant :

[
  {
    "columns": 2,
    "from": 0,
    "gutters": 7.5,
    "margins": 30,
    "to": 599
  },
  {
    "columns": 12,
    "from": 600,
    "gutters": 15,
    "margins": 15,
    "maxWidth": 1110,
    "to": 7680
  }
]

Astuce photoshop au top du top

Sur une source psd, activer dans Photoshop le mode Fichiers / Générer / Fichiers d’images Cela génère un dossier à côté du psd, et le met au jour sans sauvegarder. En nommant les calques en suivant la convention appropriée, les fichiers sont générés automatiquement :

  • nom-du-fichier.jpg
  • nom-du-fichier.png
  • nom-du-fichier@2x.jpg
  • nom-du-fichier@2x.png
  • nom-du-fichier.jpg8 (qualité 8/10)

https://helpx.adobe.com/fr/photoshop/using/generate-assets-layers.html

Tournage, motion, 3D

Tournage, montage, étalonnage, trucage, compositing (After Effects), 3D (Maya, Lightwave, 3DS, Blender…)

Print

CMJN, BD/HD, Illustrator, Photoshop, Indesign, feuilles de style, da/maquette/exé / traitement de l’image

https://www.designbetter.co/