Share
Toutes nos félicitations! Vous avez conçu votre site et vous sentez qu'il est prêt à être envoyé à une équipe de programmation. Vous avez peut-être un développeur en tête, ou vous comparez peut-être les magasins PSD> HTML les plus populaires… vous pouvez même envisager de tout coder vous-même. Quelle que soit la solution choisie, il existe, à mon avis, quelques astuces que chaque concepteur devrait connaître avant de préparer ses conceptions pour les coder dans des sites Web entièrement fonctionnels..
Philo Hermans est un développeur web indépendant basé à Utrecht, aux Pays-Bas. Il a plus de 9 ans d'expérience et collabore souvent avec des designers pour transformer leurs conceptions en sites Web ou applications Web entièrement codés. Philo est également un développeur de plugins à succès sur CodeCanyon et a écrit fréquemment sur Nettuts +. Une fois cette introduction terminée, commençons par les conseils.!
La théorie derrière la création de compositions "pixel perfect" peut être énoncée comme suit: Pour nous, codeurs, que nous voir c'est quoi vous obtenir! La plupart des codeurs n'interpréteront pas vos conceptions pour vous. Si vous remettez une composition avec des marges, des marges, des tailles de police, des couleurs, etc., la plupart des développeurs la coderont exactement comme nous la voyons - y compris les erreurs! Cela peut signifier beaucoup de frustration et de perte de temps (et d'argent) lors des révisions; alors épargnez-vous un mal de tête et envoyez des compositions au pixel près si vous voulez un codage au pixel près.
Avant d'envoyer votre projet à la phase de codage, prenez une heure ou deux pour l'examiner avec un peigne fin..
La solution de flux de travaux ici est simple: avant d’envoyer votre conception à la phase de codage, prenez une heure ou deux pour la réviser à l’aide d’un peigne fin. Vous n'avez pas nécessairement besoin de documenter l'intégralité de votre conception (bien que certains développeurs l'exigent), mais il est essentiel de veiller à ce que les éléments suivants correspondent exactement à vos souhaits:
Cela vaut également la peine de prendre quelques instants pour définir des "règles" dans les fichiers de conception que vous leur remettez. Un moyen simple consiste à utiliser un modèle de grille comme celui fourni par le site Web 960.gs. Les repères du modèle de grille garantissent la précision des largeurs des éléments. Donc, au lieu d'avoir un conteneur de 957px de large, ce sera exactement les 960px souhaités.
Si vous voulez quelque chose qui n’est pas évident, comme un menu de navigation qui doit glisser vers le bas lorsque vous déplacez votre souris vers le haut de l’écran. Assurez-vous de bien le préciser en ajoutant des notes. Vous pouvez le faire de différentes manières (j'ai tout vu, des documents PowerPoint aux impressions avec écriture à la main dessus), mais ma méthode préférée est en fait assez simple: utilisez le Outil de note dans Photoshop (voir image ci-dessous). L'outil note fera automatiquement apparaître les notes lorsqu'un développeur ouvrira le fichier, ce qui facilitera la lecture rapide de l'intention du concepteur..
Si vous n'utilisez pas Photoshop, c'est bon. La plupart des logiciels graphiques que j'ai trouvés (de Fireworks à Illustrator) utilisent une méthode similaire pour ajouter des notes. Si, pour une raison quelconque, ce n'est pas une option, créez simplement vos notes dans un fichier texte que vous incluez avec les fichiers que vous transmettez au développeur..
Plus votre conception est détaillée en termes d'interaction, plus il est facile pour un développeur de la coder. Assurez-vous d'ajouter quelques exemples de ce à quoi ressemblera votre conception lors de son interaction. Chaque conception sera différente, mais les interactions importantes à ne pas oublier comprennent:
La raison derrière cette astuce est la suivante: si vous ne montrez pas à un développeur comment vous vous attendez à une interaction donnée, il est probable qu'il utilisera un design générique sans style, qui pourrait se démarquer comme un pouce endolori. Bien sûr, il y a des codeurs (comme moi!) Qui feront de leur mieux pour deviner ce que vous auriez voulu, pourquoi laisser quelque chose d'aussi important à deviner quand il ne vous faut que quelques minutes pour le concevoir vous-même?
Le temps, c'est de l'argent, donc si vous concevez un site Web avec un joli curseur et que vous savez exactement quel script conviendrait parfaitement, informez-en le développeur avant qu'il ne commence à le coder à partir de zéro! Si vous n'avez pas de script particulier à l'esprit, cela vaut probablement la peine de consacrer quelques minutes à la recherche de son existence. Les scripts personnalisés peuvent coûter beaucoup de temps et d’argent - et il est beaucoup plus facile de créer une conception avec un script particulier à l’esprit que de créer un script personnalisé à partir de rien pour correspondre à votre conception..
Utiliser des scripts prédéfinis n'est pas une mauvaise chose! Cela peut sembler être un conseil destiné à écraser votre créativité, mais réfléchissez-y ainsi: cela peut prendre 20 fois plus de temps pour coder quelque chose à partir de zéro que d’utiliser un morceau de code déjà créé. Les scripts prédéfinis sont généralement faciles à adapter et à redéfinir, et il en existe des milliers et des milliers via une simple recherche sur Google. Envato a même son propre marché pour les scripts premium si vous ne pouvez pas en trouver un gratuit qui fonctionne: CodeCanyon!
Imaginons que vous soyez un designer sur un projet majeur. Vous passez des semaines à travailler sur une conception et obtenez enfin l'approbation de votre client… seulement pour découvrir une semaine plus tard que la conception est presque impossible à coder et qu'elle coûtera 10 fois plus que le budget prévu par le client; Tout cela parce que vous avez conçu l'ensemble du site sans comprendre pour quoi est et n'est pas possible avec une certaine technologie (Flash, HTML, etc.).
Un des conseils les plus importants que je puisse donner est le suivant: il est essentiel que chaque concepteur de sites Web dispose certains connaissances sur la plate-forme pour laquelle ils conçoivent. Cela pourrait être HTML, Flash, PHP ou même un appareil comme un téléphone ou une tablette. Ce que vous apprendrez dépend de vous, mais la compréhension de base du fonctionnement d’une plate-forme vous épargnera beaucoup de chagrin d’argent à long terme. Bien trop souvent, on me donne un design magnifique qui n'est pas pratique (ou abordable) à coder car il n'a pas été conçu pour des raisons pratiques..
Bien trop souvent, on me donne un design magnifique qui n'est pas pratique (ou abordable) à coder car il n'a pas été conçu pour des raisons pratiques..
Je ne suggère pas que vous limitiez votre créativité (à peu près tout peut être codé avec suffisamment de temps et d'énergie); et je ne suggère pas non plus que vous deveniez un gourou du codage (vous me mettriez au chômage!)… Mais même une connaissance de base de la technologie pour laquelle vous concevez contribuera à éclairer vos conceptions avec règles de base qui rendront leur codage plus facile et plus abordable.
Par exemple, si vous avez conçu un site sous forme de page Web statique, il serait logique d’en apprendre un peu plus sur le fonctionnement de HTML et de CSS. Avoir une compréhension élémentaire de la relation entre HTML et CSS suffira à vous permettre de prendre de meilleures décisions lors de la conception. Plus un concepteur est informé de la technologie pour laquelle il / elle conçoit, meilleur sera son aptitude à concevoir!
* Oui, le HTML n'est pas la seule technologie disponible, alors si vous concevez avec Flash ou une autre technologie à l'esprit, concentrez-vous sur vos recherches… vous le comprenez bien, l'architecte doit savoir balancer un marteau, même s'il ne le fait jamais.Il n'est pas nécessaire de fournir un guide de style de 20 pages pour chaque site Web que vous concevez, mais des principes de communication qui pourraient ne pas apparaître dans les compositions peuvent être très importants pour la réussite de tout projet de codage. Si votre conception a des exigences spéciales (c.-à-d. Qu'elle doit respecter certaines normes d'accessibilité ou doit être compatible à 100% avec IE5.1, etc.), assurez-vous d'informer le codeur dès le départ afin que nous puissions en tenir compte à l'avance. . Connaître les principales exigences APRÈS le codage de la conception est une recette pour des révisions coûteuses, qui ne sont pas aussi amusantes ni lucratives pour les codeurs que vous ne pouvez l’imaginer! La plupart d'entre nous préférerions de loin passer à un autre projet passionnant plutôt que de passer des mois à faire des révisions avec un client frustré..
La dernière chose que je mentionnerai est la suivante: si vous suivez ces conseils, non seulement vous constaterez que vos conceptions deviennent plus faciles et plus abordables pour le code, mais vous remarquerez probablement que votre travail s’améliorera en conséquence. Prendre quelques mesures supplémentaires pour vous assurer que vos conceptions ont un sens dans le monde pratique du développement Web peut faire la différence entre un bon site Web et un site Web exceptionnel. J'espère que vous avez apprécié cet article!
Accentsconagua