sélection

webdesign

Sélection de la semaine

Publié le par benoit

Petite sélection de liens vu sur Internet et ailleurs !

Césure ou coupure

On commence par un peu de typographie avec le mot du jour, césure coupure :

Le mot césure – qui fait certes très savant – est parfois employé à la place de coupure. Ni le Littré ni le dictionnaire de l’Académie (9e édition) ni le TLFi ni le Petit Robert électronique ne mentionnent d’autre acception du terme césure que celle de pause à l’intérieur d’un vers.

http://j.poitou.free.fr/pro/html/typ/coupure.html
Bonus web : Deux caractères html permettent d’empêcher les coupures   pour l’espace insécable et   espace fine insécable (plus d’espaces sur wikipedia).

Adopte un logiciel Adobe

Sans transition, InDesign est parfois utilisé pour faire des maquettes web. Hélas, celui-ci a une gestion du pixel bien étrange. Selon votre écran, en créant une maquette de 320 px de large et en zoomant à 100%, l’image à l’écran ne fera pas forcement 320 px (oui).
Solution (par un script) : http://thatmichael.com/2014/02/how-to-change-indesigns-default-screen-resolution/

indesign pour le web
j’ai remonté mes manches pour remettre ma maquette sous InDesign (à droite)
setup indesign web
réglages des pages

🎁 ✨ kit mobile avec fichiers InDesign cs4 et cc2018, png en 3x (lié dans InDesign) et 1x (pour ceux qui veulent travailler via PhotoShop) + scripts de l’article ci-dessus.

C’est Vrai

J’aime beaucoup le travail de Graphéine et la générosité de leur site. Même si cette article date de 2011, c’est toujours d’actualité :
https://www.grapheine.com/divers/astuces-cv-stage-graphiste
En bonus : http://cvparade.com/ une collection qui mérite d’exister (chacun y verra les choses à faire ou à éviter).

Canon

Un classique.
http://retinart.net/graphic-design/secret-law-of-page-harmony/

100 heures

Un petit binge watching de tuto Photoshop, Illustrator, InDesign ?

Remerciements : Pour une bonne partie des liens à Éric Bediez.

Vu dans l’école

sélection
vu sur Instagram et en vrai ;¬) #soireeintegration #galaxie / ésad amiens

à la demande : navigation avec survols et images

Publié le par benoit

Chaque année, un ou plusieurs étudiants me demandent le code pour une navigation avec survols et apparitions d’images de ce type :

See the Pen Nav + survol by Benoît Wimart (@benoitwimart) on CodePen.

J’ai mis en ligne sur codepen un prototype rapide (sans « class »), car je ne suis pas complètement opposé à ce type de menu, néanmoins plusieurs points négatifs peuvent être observés avec cet exemple :

  1. la mise en page selon le nombre d’éléments ne sera pas toujours simple ;
  2. la dégradation sur écran tactile, à tester soit avec un peu de persévérance avec l’inspecteur de Chrome, soit via votre mobile, tablette… le « touch » fait apparaitre l’image quelques millisecondes avant d’aller sur le lien (il faut trouver une solution) ;
  3. le poids des images (très très léger sur le codepen) pourrait rendre l’effet moins élégant (ex : un ou plusieurs survols ne marchent pas tout de suite).

Il est possible de rendre l’expérience plus fluide en ajoutant une couche de JavaScript, d’Ajax et de « Loading », mais avec un coût plus important et des performances moindres.

maquette et prototype à l’échelle

Publié le par benoit

Avant de commencer à coder un projet, une première étape consiste à faire une maquette avec un logiciel de dessin adapté (Sketch, Adobe XD et leur clone) ou l’outil que vous maitrisez le mieux (Photophop, Illustrator, InDesign et leur clone).
Une fois la maquette finalisée, il est indispensable de faire son export en bitmap. Ce qui donne un certain avantage à travailler avec un logiciel comme Sketch ou Photoshop par rapport à InDesign.
Il est aussi conseillé de commencer par la version mobile et de choisir l’écran adapté à cette déclinaison, par exemple une maquette pour mobile entre 320 et 640 px.
Dans la vidéo ci-dessous, j’ai ciblé un modèle précis, le Nexus 5, j’ai donc créé une image bitmap de 412 pixels de large (mais je garde en tête qu’il existe des smartphones de 320 px).

Si votre image exportée est en résolution « retina », ici 412 × 2 = 824 px de large, l’aperçu sur un écran retina sera plus précis, plus net.

Application

Par étapes :

  1. premièrement, je réalise une image à la bonne taille, avec le bon nombre de pixels (retina ou pas) ;
  2. je la glisse dans Chrome (dans la barre d’url) ;
  3. je passe en mode responsive via l’inspecteur ;
  4. je rafraichis la page (pour les problèmes de zoom) ;
  5. enfin, j’ajuste les options.