Catégories
Plugin et site web

Montrez-leur vos atouts – Conseils pour remettre des conceptions aux développeurs

Vous avez travaillé sur votre dernier projet de conception et le client a donné son feu vert à vos concepts numériques créés avec amour. Il est maintenant temps de donner vie à ces conceptions, et vous avez un développeur en file d'attente pour cela.

Donc, votre part est terminée, non? Pas assez. Vous allez vouloir vous assurer que votre développeur a la meilleure longueur d'avance possible pour créer le site comme vous l'avez imaginé.

Vous trouverez ci-dessous quelques conseils pour faciliter ce processus de transfert.

Communiquez pour le rendre grand

Parlez

Planifier une réunion en face-à-face avec votre développeur pour discuter des spécificités et des ambitions de votre projet vous aidera à aligner vos attentes et à clarifier l'intention derrière vos concepts. Il est fort probable qu’ils poseront même des questions et demanderont des ressources auxquelles vous n’avez même pas encore pensé!

Ce n'est pas seulement une chose unique, votre développeur va avoir des questions ou des exigences qui se poseront au fur et à mesure de l'avancement du projet. Décider d'un canal de communication pour permettre une discussion facile vous aidera énormément.

Annoter vos concepts

Les développeurs peuvent apparaître comme des magiciens dans la façon dont ils donnent vie à vos sites Web, mais ils ne sont pas clairvoyants! L'annotation de vos concepts où des fonctionnalités avancées sont requises réduit l'ambiguïté et rend plus probable que votre idée cool et originale va arriver en production. S'il s'agit d'une fonctionnalité particulièrement inhabituelle, vous souhaiterez peut-être trouver un exemple de site Web ou de sandbox de code qui fait quelque chose de similaire.

image6 "width =" 1856 "height =" 918 "srcset =" https://danjer.doudouke.org/wp-content/uploads/2020/07/Montrez-leur-vos-atouts-Conseils-pour-remettre-des-conceptions-aux.jpg 1856w, https: //www.webdesignerdepot. com / cdn-origin / uploads / 2020/06 / image6-1-300x148.jpg 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image6-1-768x380.jpg 768w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image6-1-1024x506.jpg 1024w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image6 -1-1684x833.jpg 1684w "tailles =" (largeur max: 1856px) 100vw, 1856px "/></div>
<p><em>Un exemple de l'outil de commentaire de Figma utilisé pour prendre des notes de développeur.</em></p>
<p>Figma et Sketch ont tous deux une fonctionnalité de commentaire afin de rendre les annotations un peu plus faciles, permettant également à plusieurs parties de commenter. S'il s'agit de fichiers PDF, un outil d'annotation est également disponible via Adobe Acrobat.</p>
<div class=image3 "width =" 1856 "height =" 928 "srcset =" https://danjer.doudouke.org/wp-content/uploads/2020/07/Montrez-leur-vos-atouts-Conseils-pour-remettre-des-conceptions-aux.png 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / image3-300x150.png 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image3-768x384.png 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/image3-1024x512.png 1024w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image3-1684x842.png 1684w "tailles = "(largeur max: 1856px) 100vw, 1856px" /></div>
<p class=

Spécifiez les bases

La base du développement frontal moderne tourne autour de la pensée SECHE. Certains pourraient faire valoir que la réflexion sur le code peut être assez aride, mais nous ne parlons pas de cela – dans ce cas, DRY signifie Don't Don't Repeat Yourself. La plupart des développeurs s'attaqueront à un projet en commençant par définir des variables: quelles couleurs, tailles de police, colonnes de grille… tout ce qui peut être réutilisé! Un bon design cohérent suit ce même principe – bien que ce soit une habitude qui peut être difficile à prendre au début.

Astuce: il est toujours plus facile de définir des variables si cette mentalité est abordée vers le début du projet!

Couleurs

Créez un guide de style qui spécifie les couleurs que vous avez utilisées dans vos créations. Pensez à leurs applications logiques pour aider à indiquer comment elles pourraient fonctionner en tant que variable – par exemple, quelles couleurs avez-vous utilisées pour le texte des paragraphes, les hyperliens et les arrière-plans? Avez-vous pensé aux couleurs pour transmettre les messages d'état, tels que les succès, les avertissements et les erreurs?

Polices de caractères

Quelles polices avez-vous utilisées pour votre projet? Existe-t-il un ensemble cohérent de tailles de police que vous avez utilisées? Si vous ne l'avez pas déjà fait, envisagez peut-être une échelle de type basée sur un rapport – j'aime utiliser ModularScale pour vous aider.

Éléments HTML de base

Pensez au style général de ces balises html de base:

  • Paragraphes
  • Rubriques
  • Listes de puces
      et listes numérotées

      1. Texte souligné , et

    Boutons

    Et les boutons et les liens? Que doivent-ils faire lorsqu'ils survolent, se concentrent (à l'aide de la touche de tabulation d'un clavier) ou sont désactivés?

    Champs de formulaires et entrées

    À quoi devraient ressembler les champs de formulaire? Y a-t-il une vérification de validation qui devrait avoir lieu lorsqu'un formulaire est soumis? Qu'en est-il des cases à cocher et des boutons radio?

    Il est peu probable que vous puissiez couvrir absolument toutes les éventualités. Permettez à votre développeur de faire preuve de bon sens pour combler les lacunes et d'être à sa disposition s'il a des questions. Comme l’a dit John Maxwell et l’autocollant mural du bureau à domicile de votre tante, le travail d’équipe fait que le rêve fonctionne.

    image2 "width =" 1856 "height =" 928 "srcset =" https://danjer.doudouke.org/wp-content/uploads/2020/07/1593603845_269_Montrez-leur-vos-atouts-Conseils-pour-remettre-des-conceptions-aux.png 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / image2-300x150.png 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image2-768x384.png 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/image2-1024x512.png 1024w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image2-1684x842.png 1684w "tailles = "(largeur max: 1856px) 100vw, 1856px" /></div>
<p class=

    Obtenez votre favic-on

    Les favicons sont largement reconnus comme la petite icône qui apparaît à gauche du titre du site dans la barre d'onglets de votre navigateur. De nos jours, l'application du favicon de votre site est bien plus étendue, apparaissant dans les résultats de recherche Google et les vignettes d'applications. Des options de thème supplémentaires sont également disponibles, telles que la possibilité de personnaliser la couleur de la couleur de la barre de navigateur de Google Chrome Android pour votre site.

    L'utilisation d'un site générateur tel que realfavicongenerator simplifie la prise de décision, vous permettant de télécharger des graphiques spécifiques comme vous le souhaitez, de créer des silhouettes de votre icône pour les tuiles Windows Metro et les épingles Safari macOS, et de tout emballer dans un format facile à utiliser. utiliser des fichiers et du code.

    image7 "width =" 1856 "height =" 928 "srcset =" https://danjer.doudouke.org/wp-content/uploads/2020/07/1593603845_430_Montrez-leur-vos-atouts-Conseils-pour-remettre-des-conceptions-aux.png 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / image7-300x150.png 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image7-768x384.png 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/image7-1024x512.png 1024w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image7-1684x842.png 1684w "tailles = "(largeur max: 1856px) 100vw, 1856px" /></div>
<p class=

    Compressez vos images

    Personne ne veut charger une image de 20 Mo lorsqu'ils sont sur une connexion lente ou un plan de données – il est avantageux de planifier à l'avance et de réduire la taille de vos images afin qu'elles soient prêtes pour la production pour le Web. Si vous craignez que la compression d’image ne nuise à la qualité de votre image, n’ayez crainte – vous pouvez faire un long chemin avec la compression d’image avant que la qualité ne soit sérieusement compromise.

    1. Commencez par réduire la résolution de l'image – pour les travaux par lots, j'utilise le script du processeur d'image d'Adobe Photoshop pour réduire la taille des images pour qu'elles tiennent en 1920 x 1200 pixels
    2. Alternativement, si vous travaillez sur un projet statique – où des images spécifiques ne seront utilisées que dans des endroits spécifiques – vous pouvez utiliser votre logiciel de conception (presque tous les logiciels d'interface utilisateur traditionnels vous permettent de le faire maintenant) pour exporter vos images au format 2x vers prendre en charge les appareils à haute densité de pixels.
    3. Je convertis également mes profils de couleur d'image en SRGB pour assurer la cohérence sur la plupart des types d'affichage modernes (celui-ci est facultatif)
    4. Je prends ensuite mes images nouvellement réduites et les exécute via imageOptim avec une qualité de 80%. En général, je viserais à obtenir mes images sous 300 Ko – s'il y en a encore qui dépassent considérablement cette cible une fois compressées, je les réexécuterais à 70% (je ne recommanderais pas d'aller plus bas, cependant).
    image1 "width =" 1856 "height =" 1064 "srcset =" https://danjer.doudouke.org/wp-content/uploads/2020/07/1593603845_103_Montrez-leur-vos-atouts-Conseils-pour-remettre-des-conceptions-aux.png 1856w, https://www.webdesignerdepot.com/ cdn-origin / uploads / 2020/06 / image1-300x172.png 300w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image1-768x440.png 768w, https: // www. webdesignerdepot.com/cdn-origin/uploads/2020/06/image1-1024x587.png 1024w, https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image1-1684x965.png 1684w "tailles = "(largeur max: 1856px) 100vw, 1856px" /></div>
<p>N'oubliez pas que vous pouvez également le faire pour les PNG! L'activation de PNGCrush dans imageOptim vous permettra de réduire considérablement la taille des fichiers PNG… soyez juste prêt pour que cela prenne un certain temps.</p>
<p class=

    Rendez vos vecteurs SVG faciles à utiliser

    Si votre conception contient des graphiques ou des illustrations que vous avez créés à l'aide d'un logiciel vectoriel, vous pouvez les utiliser sur le Web en tant que fichier SVG. Habituellement, ces fichiers seront beaucoup plus petits que les JPG ou les PNG. Vous pouvez exporter des graphiques dans la plupart (sinon la totalité) des logiciels vectoriels dans ce format.

    En option, vous pouvez utiliser imageOptim ou SVGOMG pour compresser le code SVG sans sacrifier la qualité. Votre développeur peut déjà utiliser un script qui le fait automatiquement lors du traitement du site pour la production, il peut donc être utile de le demander à l'avance.

    Obtenez vos licences en échec

    Si vous utilisez des polices premium, assurez-vous d'avoir acheté une licence de police Web pour pouvoir remettre les fichiers corrects au développeur. Je recommanderais de le faire le plus tôt possible – bien que ce ne soit pas souvent, les versions Web des polices peuvent parfois avoir des cadres de délimitation légèrement différents de leurs homologues de bureau, ce qui complique grandement la tâche des développeurs.

    Si vous avez utilisé des échantillons de photos d'archives (ou si vous êtes devenu fou en levant tout ce que vous pouvez trouver sur Google Images), assurez-vous que tout est casher avant de passer en direct. Assurez-vous d'acheter des photos sous licence et si certaines photos que vous souhaitez utiliser nécessitent une attribution, informez-en le développeur.

    Laisser un commentaire

    Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *