Accueil > Blog > Webdesign > Je veux faire mon design

Avant de développer un site web ou une application, il est nécessaire de passer par la phase de maquettage. Notre équipe peut se charger directement de réaliser vos maquettes, ou encore de développer directement à partir des fichiers que vous nous aurez fourni.

Mais, parce que nous avons une équipe de divas (développeurs), j'ai quelques pistes à vous donner afin d'éviter d'entendre grmmgrlgrml jusqu'à chez vous.

 

1. Taille de vos maquettes

Au commencement de tout projet, il y a la création d'un fichier Photoshop.

Idéalement, la largeur de vos maquettes doit faire 1900px : un integrateur peut facilement s'occuper du responsive quand vous prévoyez vos maquettes sur grand écran (adaptation de votre design sur tous les supports, laptop, tablettes, mobiles, minitel...). Dans le cas contraire, il est plus compliqué d'imaginer ce qui prendra la place sur grand écran si vous faites vos maquettes pour une taille d'écran laptop (même si c'est faisable).

Si vous souhaitez faire du mobile first (on dit oui !!), il est également possible de faire directement les maquettes version mobile.

N'oubliez pas de régler la résolution sur 72 pixels/pouce, et de travailler en RVB (au risque de devoir tout refaire... :D)

 

2. Utiliser une grille Bootstrap

Mais qu'est ce que c'est donc ? En résumé, c'est un outil utile aux développeurs pour la réalisation des sites. C'est une sorte de bibliothèque (ou un kit) remplie de feuilles de style, d'éléments, qui permettent d'aller plus vite à l'intégration. Concernant le design, c'est surtout la grille qui nous intéresse.

12 colonnes, qui permettent à votre site web d'être responsive plus facilement. Au lieu de réduire les éléments en responsive, ils se placent les uns en dessous des autres (magique).

En design, ce qui vous intéresse, ça va être d'utiliser cette grille (c'est pas compliqué, promis).

Vous avez créé votre document Photoshop. En allant dans Affichage/Nouvelle disposition des repères, vous allez pouvoir faire apparaître la grille dans laquelle vous devrez placer vos éléments.

Vous n'avez plus qu'à choisir la taille de vos colonnes et de vos gouttières (si vous n'avez aucune idée, vous pouvez choisir 12 colonnes de 77px avec des gouttières à 20px, colonnes centrales). 

3. Ne pas pixelliser les éléments

Personnellement, j'ai eu des profs qui m'ont répété des milliards de fois de ne jamais pixelliser mes éléments. Alors aujourd'hui je vais les remplacer :

Ne pixellisez jamais vos éléments.

Il faut toujours que vous soyez en mesure de revenir en arrière sur vos modifications, ou les agrandir, les rétrécir, sans les dégrader.

 

4. Rendre disponible vos objets dynamiques/images

Photoshop a un outil plutôt pratique pour vous, mais pas pour les autres. Quand on fait du maquettage, il faut penser à ceux qui vont récupérer vos psds.

La bibliothèque Photoshop vous permet d'importer une fois vos éléments et de les glisser directement dans vos projets. Sauf que celà ne permet pas à celui qui va récupérer votre psd d'avoir les sources de vos objets dynamiques... Et lorsqu'il va ouvrir votre fichier, il aura un message lui indiquant que des liens sont manquants (une minute de silence pour tous ces fichiers qui n'ont jamais retrouvé leur source). 

Pour cela, désactivez la case "Ajouter à ma bibliothèque" lorsque vous importez une image ou un icône.

 

5. Ranger vos calques

Bon, j'avoue j'ai l'impression de vous demander de ranger votre chambre, mais un fichier Photoshop c'est un peu la même idée.

Si vous voulez qu'un inconnu puisse retrouver votre journal intime, il faut lui indiquer le chemin... heu...

L'idée c'est de ranger vos calques dans des dossiers, découpés par "partie" de page. Vous pouvez créer un dossier pour le header, le footer, le slider (tout plein de mots en er). Pour que l'intégrateur qui va ouvrir votre fichier puisse boire son café sans s'étrangler (merci de préserver notre équipe, on les aime au fond).

 

6. Utiliser des plans de travail

Ça, c'est pour votre bien. Depuis la version 2017, Adobe a enfin intégré la possibilité de travailler sur plusieurs pages dans le même psd, grâce aux plans de travail. En utilisant bien vos objets dynamiques, vous allez pouvoir gagner un temps fou avec vos header et footer (en créant un objet dynamique pour chacun, vous n'aurez plus qu'à le modifier une seule fois pour que ça s'impacte partout... :D).

 

7. Mettre des messages d'amour

Si vous aimez les intégrateurs, dites leur dans vos psds. <3