Graphisme

Avoir un PSD propre, clair, bien rangé et surtout prêt à être intégré. Un rêve de développeur front-end, plus que réalisable si il travaille avec un bon webdesigner. Pour caresser votre dev’ dans le sens du poil et lui faire gagner du temps, découvrez Specking.

Specking, mesures et spécifications de conception

Grâce au plug-in Specking, vous allez pouvoir préparer au mieux votre PSD pour l’intégration pixel-perfect, en ajoutant facilement et rapidement des annotations sur vos éléments.
En tant qu’intégrateur, vous savez comme il est long et fastidieux de mesurer des marges, des largeurs de blocs et de chercher des propriétés de polices dans un PSD. Les outils additionnels du plug-in peuvent vous faciliter la vie : un fichier bien annoté, vous donnera l’assurance que votre design sera bien intégré selon les spécifications. Concrètement le plug-in se décompose en 3 panneaux :

Les principales fonctions du plug-in :

• Créer des mesures et des spécifications de conception en un seul clic
• Mesurer n’importe quelle taille (largeur / hauteur), les marges et les propriétés typographiques de votre maquette.
• Fonctionne sur n’importe quel fichier PSD et même des fichiers aplatis.
• Générè toutes les spécifications en superpositions sur des calques modifiables et personnalisables.

Mesurer les tailles des blocs (largeur / hauteur) :

Sélectionnez un calque dans votre PSD, cliquez sur le bouton rouge et vous obtiendrez la taille de l’élément. Comme le montre la capture ci-dessous, Specking vous offre la possibilité de choisir l’emplacement des annotations (à gauche, au dessus, au centre…).

Mesurer les distances (margin / padding) :

Spécification typographiques :

Vraiment pratique pour le CSS ! Les données générées sont placées sur un simple calque de texte. Le copier/coller direct dans votre fichier CSS est donc possible.

En pratique, ça donne quoi ?

En y jetant rapidement un œil, le plug-in peut paraître long et fastidieux à utiliser. Il ajoute une étape supplémentaire lors de la finalisation du design. C’est un petit mal nécessaire car au final Specking est simple d’utilisation et représente un gain de temps conséquent pour l’intégration.
Je vous conseille vraiment de tester pour vous faire votre propre impression. Specking est disponible en téléchargement par ici au prix de 19$.

Pourquoi prendre des mesures en 2013 à l’ère du Responsive Design ?

C’est une question légitime que je me pose. En effet, un design fluide ne possède pas de bloc de taille fixée, donc l’annotation devient inutile ! Oui et non, car ici nous parlons de Photoshop, qui ne gère que « des maquettes fixes », ce qui est totalement différent de la création d’un design à l’aide d’outils comme Macaw ou Edge Reflow.