Comment dois-je préparer la conception d'une page Web pour un développeur Web?
Quelles techniques, logiciels ou pratiques utilisez-vous pour préparer une description d'une page Web en vue de son développement ultérieur? Je fais quelques recherches (avec un peu de chance) sur la manière de créer une description pour les développeurs Web - ce qui devrait être inclus sur la page Web (largeur des entrées, taille des polices, placement des images, etc.). Actuellement, j'utilise une combinaison de documents Excel et Word. Dans les cas complexes, cela est inefficace.
D'autres suggestions?
En tant que développeur travaillant en étroite collaboration avec les designers, voici ce que j'aime voir:
Images Photoshop des différents styles de conception. En général, les sites ont deux ou trois principaux styles de conception (souvent une page de couverture et tout le reste, parfois une troisième pour les formulaires, les blogs ou autre). . Je voudrais un pour chaque style. De préférence, avec les calques optimisés (c’est-à-dire, si vous avez 15 calques qui composent une image d’un iPod, fusionnez-les en un, je ne veux pas traiter cent fois de la "copie3 de la couche 1 de la barre de support"). L'image en couches me permettra de découper les graphiques. C'est également agréable si les dégradés sont sur des calques distincts de la couleur de base, afin que je puisse obtenir avec précision les couleurs de base, car j'utilise généralement CSS pour les couleurs dans la mesure du possible. (Remarque: si vous proposez des largeurs, des emplacements, des tailles et des couleurs exactes et que vous n'avez pas d'image de conception complète, vous prenez du retard dans votre devoir de diligence.)
Une image .jpg de chacun des styles. En tant que développeur utilisant une technologie open source, j'utilise Linux comme environnement principal, ce qui rend l'exécution de Photoshop fragmentaire. Gimp et d'autres outils peuvent ouvrir des fichiers Photoshop, mais parfois, les choses ne se traduisent pas. Un .jpg de votre conception aide à combler les écarts. Bien que vous n’ayez pas nécessairement besoin de le faire si vous savez que votre développeur dispose de la même version de Photoshop que vous, cela est également utile s’ils disposent d’une version plus ancienne, qui n’aurait peut-être pas toutes les mêmes fonctionnalités (après tout, nous ne vivons pas dans Photoshop comme vous le faites).
Si vous avez un arrière-plan texturé qui peut être mosaïqué, , une version plus petite, pouvant être mosaïque, de ladite texture. Internet est une bête lente, en particulier pour les images. Si vous voulez de l'asphalte, du bois, du papier ou autre chose comme arrière-plan, donnez-moi une image ne dépassant pas environ 100 x 100 pixels et des carreaux de manière transparente. Idéalement, le plus petit sera le mieux, mais certains points, en particulier sur les arrière-plans pleine page, entraînent à nouveau des problèmes. Un gigantesque géant, d’une image de 10000x10000 pixels, va prendre un temps fou à charger, gaspille de la bande passante et donne à votre site une apparence horrible pendant le chargement.
Si vous êtes du genre à remarquer la différence entre # ac432b et # ad442c, alors note, quelque part, les valeurs hexadécimales de couleurs souhaitées. Celles-ci peuvent figurer dans un document Word ou sur un calque supplémentaire dans l'image Photoshop, selon ce que votre développeur préfère.
Si vous êtes un maniaque de la perfection en pixels, alors quelques mesures , tout au moins pour la largeur du contenu principal. Si votre image Photoshop a une échelle de 100%, il devrait être assez facile de récupérer le reste, mais il peut être difficile de déterminer à partir de l'image si vous souhaitez que la page soit de largeur fixe à 1000 pixels ou d'une mise en page plus large. , surtout si vous et votre développeur n'avez pas travaillé ensemble auparavant.
Notes sur les réactions des éléments interactifs. Le texte d'un élément de menu doit-il changer de couleur au passage de la souris? En quelle couleur devrait-il changer et devrait-il disparaître? Cet élément déclenchera-t-il un menu déroulant? Quels articles seront en dessous? (Les éléments de menu peuvent provenir ou non de votre part, mais vous devez en être conscient pour que la conception soit créée correctement. J'ai trop de conceptions ne prenant pas en compte les sous-menus et ayant l'air bizarre à cause de cela.) menu fondu entrant/sortant? Répondre à ces questions dès le départ vous fera gagner du temps.
Compréhension de base du Web en tant que support. La conception Web est remplie de graphistes ayant migré vers la conception Web. Il est extrêmement important (à mon avis, du moins) que vous compreniez que la conception Web n'est pas une conception imprimée. Cela signifie que votre conception sera légèrement différente selon les navigateurs et les plates-formes. À moins que vous ne disposiez des fonds nécessaires pour consacrer deux à trois fois plus de temps au développement (notamment si vous devez prendre en charge des navigateurs classiques, tels que en tant que IE6), je recommande fortement de ne pas avoir besoin que chaque navigateur, sur chaque plate-forme, ait exactement le même aspect que votre conception. Cela risquerait probablement non seulement d'étouffer votre développeur, mais également votre propre conception (qui, j'en suis sûr, comportera des dégradés, des ombres de texte ou de zone et d'autres éléments brillants), et pour quoi? Vous pouvez donc avoir la satisfaction de savoir qu’il est absolument identique dans tous les navigateurs connus de l’homme? Le grand public ne sait même presque pas ce qu'est un navigateur Web is, sans parler du fait qu'il en existe plus d'un. Ils ne sauront pas que vos boîtes devraient en réalité avoir une ombre portée, car elles ne la verront jamais si elles ne fonctionnent que quelle que soit la version de IE que leur ordinateur fonctionne, et ce n'est pas grave.. J'ai deux phrases pour vous: "dégradation gracieuse" et "amélioration progressive". Apprends-les, comprends-les, embrasse-les, aime-les. Vos développeurs vous remercieront.
Shauna le couvrit bien. En outre...
On me donne un fichier PSD Photoshop avec toutes les couches nommées et dans les groupes appropriés, par exemple. en-tête, pied de page. Pour les sous-pages ou les contenus contextuels du site, le concepteur trie les différentes dispositions en groupes de calques. Donc, fondamentalement, tout est dans le même fichier. Ils me donnent également un dossier contenant les fichiers PNG de chaque mise en page avec le nom correspondant au nom de la couche de composition dans le fichier PSD - pour une référence rapide, car les groupes de couches peuvent vraiment ralentir Photoshop. Si vous avez des polices, collez-les également dans le dossier au cas où je ne les aurais pas - uniquement si vous avez une police spéciale.
* Edit: Demandez au développeur comment il le voudrait.
CETTE REPONSE IS POUR LE NON-DEVELOPPEUR, alors prenez ceci en compte avant de vous opposer à moi. La plupart des utilisateurs de ce site Web sont plus avancés que le service technique, bien que désireux de publier cette réponse pour les quelques utilisateurs qui pourraient trouver cela utile, en raison de leur sérieux défi technologique. JFYI.
Pour nos Drupal sites Web: Nous avons actuellement un processus en 3 étapes uniquement, car c’est ce que nous avons constaté qui fonctionne "pour nous!". Je ne suggère pas à personne de suivre cela non plus, je voulais juste partager ce qui fonctionne pour nous.
Pour commencer, je suis l’un des concepteurs, même si, encore une fois, je ne suis pas agile avec le développement, donc je crée tout dans un simple document MS Word, avec des images et tout. J'utilise souvent l'option "Draw Box". Ensuite, cela est transmis à notre principal gestionnaire/développeur Web, qui implémentera les modifications "ou" si une programmation intensive est nécessaire, effectuera un Adobe Photo Shop avec les tranches HTML et le transmettra à un utilisateur heavy Drupal Theming et Creative pour nous.
Pour WordPress Sites Web: WordPress Les blogs sont beaucoup moins compliqués, la courbe d'apprentissage est moins raide, donc tout ce qui est créé est fait "en direct", pour ainsi dire. Si cela semble bon, cliquez sur publier, si j'ai besoin de conseils, je passe un coup de téléphone, mais je n'ai jamais eu besoin de beaucoup d'intercession de la part d'un développeur lourd. Cela dit, notre bannière et notre logo ont été créés en MS Word, puis le fabricant du logo les a pris à partir de là.
Ceci est encore une fois, uniquement pour ceux qui sont dans mon bateau, désespérément développeur handicapé!
Utiliser un système de grille, comme 960.gs .
Dans ce lien les 960 modèles pour Photoshop, Illustrator, Inkscape, ...
Pourquoi? À partir de 960.gs
Neuf à soixante
Tous les moniteurs modernes prennent en charge une résolution d'au moins 1024 × 768 pixels. 960 est divisible par 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 et 480. Cela en fait un numéro de base extrêmement flexible.