Page 1 sur 1

Questions sur vos maquettes web (en 2019)

Posté : mar. 15 oct. 2019 10:37
par spip93
Bonjour à tous et à toutes,

Je viens de reprendre mon boulot de webdesigner après 10-15 ans. Entre temps, beaucoup de choses ont changé. Du coup, j'avais quelques questions pour me remettre dans le bain.
(Je vais essayer de faire court :-P ) Quand vous faites des maquettes web, quelle est la largeur (en px) de vos maquettes :
- Pour un ordi
- Pour un smartphone
Je pose la question, parce que autant il y a 10 ans la résolution d'écran la plus courante était 1024 x 768 (voir ici), autant, aujourd'hui, avec les smartphones, ça a beaucoup changé et c'est plutôt 1366 x 768 (voir ici) pour un ordi et 360x640 pour les smartphones.

Est-ce que vous utilisez un système de grille (960 grid par exemple) ? Ou est-ce que c'est "has been" en 2019-2020 ? Juste pour ordi ou aussi pour smartphone ?
Est-ce que vous passez par un framework CSS ? Si oui, lequel ? Twitter Bootstrap ? Foundation ..? Pourquoi (ce framework plutôt qu'un autre) ?
(Question subsidiaire) Quel IDE utilisez-vous ? Perso, avant j'utilisais PHPDesigner, mais depuis quelques temps, j'ai changé pour Visual Studio Code. Qu'en pensez-vous ?

Je vous remercie par avance pour vos réponses.
Bonne journée ;-)

Re: Questions sur vos maquettes web (en 2019)

Posté : mar. 15 oct. 2019 11:54
par Yamo
En général je designe les pages en deux largeurs : desktop (entre 1200px et 1600px selon les projets) et mobile (360px). Pour certains projets, on me demande de faire des versions intermédiaires.

Il est toujours important d'utiliser des grilles oui. Ça facilite grandement le travail d'intégration, surtout si des frameworks sont utilisées, et ça permet de bien mieux gérer le responsive.

Tu peux te créer ton propre modèle de grille, mais plus ça va plus je bosse avec XD, qui fait ça très bien. Quitte à te remettre au webdesign, ce pourrait être l'occasion de commencer à t'intéresser aux nouveaux outils qui ont été récemment créés et font ça mieux que Photoshop. XD donc par exemple, ou Sketch si tu es sur Mac.

Re: Questions sur vos maquettes web (en 2019)

Posté : mar. 15 oct. 2019 12:14
par Fremo
Trop fort le coup du "XD" ! XD

Re: Questions sur vos maquettes web (en 2019)

Posté : mar. 15 oct. 2019 15:27
par Yamo
Ah oui merde... Du coup j'ai désactivé les émoticônes.

Re: Questions sur vos maquettes web (en 2019)

Posté : ven. 22 nov. 2019 16:04
par Kami-Saki
Bonjour,
pour ma part je maquette pour desktop en 1280x700 avec des marges de 40px de chaque côté, donc sur une grille de 12 colonnes de 100px.
Les résolutions plus petites en largeur (1024px et la grille de 960px qui va avec) je les inclus dans les versions "mobiles", en effet certains écrans 1024 sont encore des écrans desktop mais là plus part des appareils utilisés dans cette largeur sont des tablettes.

Pour mobile ça dépend des projets, je n'ai pas encore trouvé le format idéal.
J'utilise parfois le 360x640 car c'est le plus utilisé mais en ce moment j'essaie de m'imposer le format 320x568, car c'est une résolution encore très présente (8% des smartphone en France, en octobre 2019).

Re: Questions sur vos maquettes web (en 2019)

Posté : ven. 22 nov. 2019 19:40
par Ziell
Je maquette toujours en 320px pour le mobile, sinon ça passe à la trappe les kilotonnes d'utilisateurs d'iPhone 4 / 4S / 5 / 5S / SE encore en circulation. Bien intégré derrière, un site qui rend bien sur ce format contraignant s'étendra correctement sur les résolutions intermédiaires 321-800px, tandis qu'un site conçu en 360px ou 375px de largeur avec déjà des concessions réalisées sur la largeur, sans penser aux formats encore plus petits, risque d'être inutilisable (ou de paraître cassé) sur 320px.

Pour le desktop, je maquette en 1280px, 1376px ou 1440px selon les projets, avec un layout valable pour toutes les résolutions ≥1200px, et valide moyennant quelques petites aadaptations entre 1024px et 1200px.

Pour les résolutions intermédiaires (800-1024px), je spécifie cela en dur pour les développeurs du projet, ou maquette des variantes "responsive" des composants principaux type header. Il m'arrive parfois de maquetter une page-clé en 1024px pour donner le ton en matière de rendu attendu sur les résolutions intermédiaires (généralement plus proche des maquettes desktop que des maquettes mobiles au-dessus de 960px, et inversement en-dessous).

Mon objectif principal en terme de livraison : laisser le minimum de marge de manœuvre aux développeurs quand il s'agit d'imaginer / de deviner ce qu'on n'a pas représenté, ce n'est pas leur boulot. En revanche côté design on ne peut pas tout représenter non plus, donc une bonne discussion au moment de la passation et une ligne ouverte tout le long du projet permet de s'assurer que l'intention est respectée, et alignée avec la faisabilité technique proposée par les développeurs, ce qui permet aussi de fonctionner de concert par hypothèses, en bonne intelligence.

Re: Questions sur vos maquettes web (en 2019)

Posté : ven. 10 janv. 2020 16:38
par harsene
Hello,

J'espère que tu passes une bonne journée.

Comme outils, tu dois absolument tester Sketch, c'est la nouvelle référence pour le webdesign.

Re: Questions sur vos maquettes web (en 2019)

Posté : sam. 11 janv. 2020 11:23
par Yamo
tu dois absolument tester Sketch, c'est la nouvelle référence pour le webdesign.
Je dirais plutôt que c'est une référence, car son déploiement mac-only l'empêche (et l'empêchera toujours) de prendre définitivement le pas sur l'ensemble de la concurrence.

Et comme le monstre Adobe a enfin pris la chose au sérieux et travaille à réduire l'écart pour de bon (XD devient de plus en plus performant, en plus d'être cross-platform, intégré à la suite Adobe et gratuit...), la position de Sketch ne me semble pas forcément assurée indéfiniment.

Re: Questions sur vos maquettes web (en 2019)

Posté : sam. 11 janv. 2020 11:43
par Talib
Bon alors, laissez moi rajouter mon petit grain de sel :D .

Figma est ce qu'il y a de mieux pour moi en ce moment. Surtout pour partager ces maquettes avec les devs de (alors que sur sketch tu es obligé de passer par Invision) et encore plus pour faire des tests ou des prototypes. Quant au match Sketch/XD, franchement "XD" n'a plus rien à envier à Sketch depuis longtemps.