Dimension des maquettes de sites sur photoshop
Bonjour
J'apprends à concevoir des maquettes de sites sur photoshop. Tout se passe bien, mais il y'a un soucis auquel je fais face: "La dimension en largeur du document photoshop".
En effet, je veux savoir si la dimension du document doit etre pris à une certaine echelle ou doit-etre directement la dimension visé pour mon site web.
Par exemple, si je vise integré un site dont la largeur sera 1200px. Est-ce que mon document photoshop doit aussi faire 1200px ou une dimension plus grande prise proportionnellement à 1200px.
Je me rend compte que je prends la taille exactement la dimension visé pour l'integration de mon site, le document phtoshop parait assez petit, ce qui nuit à la conception de la maquette. Donc j'ai toujours tndance à prendre des dimensions plus grandes.
5 réponses
Alors la tendance est de multiplier par 3, 4 fois plus grand le document de la maquette, en laissant des marges à côté qui représente les parties qui débordent de la partie centrale (Comme le cas du header que tu viens de mentionner).
À l'intégration, on revient sur les dimensions normales.
En partant d'une dimension plus grande comme ça, est-ce que ça n'influe pas la dimension des éléments.
Imaginons que je crée une maquette pour un site 1200px et que pour ça je crée un document 4800px, soit x4. Si je veux créer un boutton dont la largeur sera 100px, dans ma maquette, ne devrait il pas être 4 fois plus grand 400px?
Ne serait-ce pas aussi le cas pour les espaces?
Salut,
J'ai un avis différent de ce qui vient d'être dit. Pour rester sur une base desktop je te dirais de partir sur un 1440px de largeur (je me base sur cette étude là), mais il m'arrive d'avoir encore du 1280px de largeur. Pour m'à part je commence plutôt sur du 1920. Mais en réalité c'est un débat sans fin, car l'important c'est de le penser responsive et au maximum fluide. Parfois il peut arriver de façon volontaire de ne pas avoir tout en fluide.
Pour ce qui est de faire du fois 2, 3 ou 4 c'est plus compliqué que ça, car les erreurs arrivent très vite exemple type, je fais du x3 et je mets un typo qui rend bien visuellement en 29px une fois que je vais faire mon css je vais me retrouver avec du 9,6666px ce qui n'a aucun sens et potentiellement il va y avoir des rendus sur les navigateurs différents (c'est surtout vrai lorsque que tu arrives a des valeurs a 0.5). Autre problème récurrent c'est trop petit lorsque tu es en taille 1/1 genre tu choisit du 24px en X3 tu te retrouves en réalité avec du 8px. En réalité c'est une très mauvaise idée tout comme le fait de travailler sur des écrans full HD ou pire 4K pour faire du web, car le rendu que tu as n'est pas celui de l'utilisateur normal qui va ce retrouver avec des tailles de typo trop petite, etc.
Le cas du x4 ou autre concerte que les éléments graphiques (images et icônes) pour dans le cas de personnes qui ont un très bon débit et de très bons écrans auront accès à des visuels et icône HD. (Même si la grande majorité des icônes peuvent être faite en SVG pour qu'elle soit en vectoriel).
Pour les remarques de anthony,
- premier point le coup de l'imprimante ce n’est pas compliqué, il suffit d’imprimer a la taille du document et pas celui de la feuille, un psd est un bitmap non vectoriel sinon tu utilises sketch.
- Ce genre de problème vient du fait que ça n'a pas été défini en amont de la création, on ne rajoute pas des éléments fonctionnels (icône de partage) à la dernière minute.
- Même problème que le point 1 un export en jpg et bim dans le navigateur et ça sera le rendu def, même dans un écran 4k.
Premièrement, en 2018 on ne design pas sur Photoshop, XD,Sketch,Figma sont bien plus adaptés pour réaliser des webdesign, pour ce qui est de la largeur, personellement je pars sur un 1600/1920 tout dépend de mon conteneur. Il n'y as pas de règle précise pour ce genre de chose.
Et il faut penser responsive, design system et non par page. Comme le fait un développeur :)