Ceci est un sujet de meilleure pratique.
Je l'ai vu comme une méthode préférée pour certains développeurs Web. Au lieu de faire la mise en page CSS à partir de zéro, ils démarrent d'abord une maquette Photoshop, puis décodent en CSS.
Que pensez-vous de cette approche?
meilleur à tous,
8 Réponses :
C'est rapide. C'est pourquoi j'utilise toujours cette méthode. Vous ne voulez pas passer le temps à construire un navigateur croiseur CSS jusqu'à ce que vous soyez réellement défini sur une mise en page.
Méthodologie agile suggérerait quelque chose facilement modifié en consultation avec le client. Dave Thomas dans Développement Web agile avec rails < / em> suggère de griffonner sur du papier. Mais tout doit être meilleur que de vous éclairer directement à la main CSS à moins que vous sachiez vraiment ce que vous voulez.
Je pensais à dire " gribouillis pourrait ne pas le couper pour une présentation formelle " mais la femme géniale tellement me frappe dans les commentaires ...
Le gribouillage du papier est bien pour le brainstorming, mais un client veut généralement voir quelque chose d'un peu plus poli.
Ouais ... Le 'Net est plein d'anecdotes sur la manière dont les plus grandes conceptions Web ont été effectuées sur le dos des serviettes dans une cuillère grasse.
Si vous êtes productif de cette façon, pourquoi pas? Tout le monde ne parvient pas à envisager parfaitement leur site Web car ils tapent dans une bande de crochets d'angle.
Plus sérieusement, c'est votre travail, alors il est donc de votre responsabilité de le faire d'une manière qui vous permet de le faire efficacement.
Maquettes sont super, mais je ne sais pas si Photoshop est la toute première chose que vous voudriez essayer à cet effet - au début, lorsque vous essayez simplement d'obtenir une mise en page logique pour les différents Pages du site (Avant de le raffiner en termes de look & C), un tableau blanc avec des marqueurs d'effacement à sec et des notes post-it offre pour des réarrangements de maquette très rapides et répétés pour le brainstorming précoce. Une fois un accord raisonnable sur un (ou très peu) arrangements possibles d'informations, alors des outils plus précis entrez dans la lecture.
BTW, n'oubliez pas de photographier le tableau blanc avant de le changer (tout téléphone portable décent fera, vous n'essayez pas de haute qualité ici ;-) À tout moment il y a des idées ou des suggestions que vous voudrez peut-être revoir ou réfléchir à l'avenir!
Ahh, l'ancienne version de 3,2 mégapixels de Git.
J'aime le papier graphique. Donne des carrés et des rectangles parfaits! +1 pour la version analogique.
Lorsque le prototypage, il est important de choisir la bonne fidélité. Cet article de Boxesandarrows fournit une belle introduction aux différentes options et à leurs utilisations.
J'aime particulièrement cette ligne par Bill Buxton que l'article cite:
Il n'y a pas de fidélité élevée ou faible, seule la fidélité appropriée.
dans Ce Techtalk de l'équipe de conception Facebook , ils mentionnent Comment ils utilisent Photoshop dans leur processus de conception (IIRC c'est quelque part à mi-chemin, mais je ne peux pas sembler transmettre à travers la vidéo).
La plupart des artistes webdesign graphiques fonctionnent de cette manière.
De nombreux programmeurs trouvent simplement une perte de temps.
Il a des avantages et des inconvénients.
Avantages:
De nombreux artistes graphiques grok Photoshop / Illustrator plus qu'ils ne le font dreamweaver.
obtient client un aperçu du produit final qui fonctionne partout : mac, pc, firefox, par exemple, safari, peu importe. Envoi d'un aperçu html dans les premières étapes de la production avec les développeurs utilisant Firefox et le client en utilisant MSIE attise toujours des problèmes.
Plus alternatives de conception peuvent être préparés passer moins de temps sur chacun. Cela pourrait être un avantage dramatique tout en traitant avec des nuages de cadres ténébreuses sans décideurs désignés sur le côté client. D'autres seront mockups passent la main à la main jusqu'à ce qu'un consensus général est atteint sur une conception ou l'autre.
Inconvénients:
"coupe" la conception graphique en HTML devient un travail supplémentaire et il est clair pas qui va payer pour ce temps supplémentaire.
Il favorise graphique centrée et rigide, la conception des flux de travail . Les clients sont d'accord préemptive sur un aperçu donné et c'est ce qu'ils obtiennent par contrat. Tous les moyens de modification graphique de l'argent, au lieu comportement et la programmation ne sont généralement pas bien défini, ou pire, mal défini par le mockup.
La recherche de pixel parfait adhérence multi-navigateur du mockup peut vous rendre fou. Si vous êtes d'accord sur une conception rigide donnée avec le client, qui pourrait devenir un problème urgent de poursuivre.
chaussures Dirty tricks CSS dans dans votre conception. L'utilisation d'un mockup HTML, le client aurait approuvé une conception tirée par le code avec moins de tricks en place.
Quoi qu'il en soit, je ne suggère photoshop pour un mockup, mais Inkscape . (Ou illustrateur, si vous adorez adobe en brûlant des tas d'argent dans les cercles magiques à minuit)
Une étape gribouillage est bon aussi, tout en discutant du contrat en direct avec le client.
Je préfère un crayon et du papier pour feutres, et je webcam idées de shoot pour l'archivage et la transmission de courrier électronique. Quand il vient à griffonner, tout le monde ne ce qui se sent plus naturel .
Ne pas faire tout et sur des exemples compter du site exemples et captures d'écran pour référence graphique est toujours une option.
Et ne pensez pas être sur le côté intelligent, griffonner MSIE html entraîné. A partir de HTML non standard et la conversion à la norme est plus pénible que de le faire dans l'autre sens.
Il y a une plus prise: de nombreux clients du site Web ont tendance à avoir un Mac et utiliser Safari . committents Web ont tendance à avoir un goût plus prononcé pour les graphiques que la moyenne, donc la chance de tomber sur Mac maniaques est plus élevé dans ce secteur que dans d'autres.
Je suis d'accord avec cet article, sauvegardez un point. L'inkscape n'est tout simplement pas un substitut d'illustrateur. Cela me fait mal qu'il n'y a pas d'alternative décente open source à l'illustrateur.
Je suis d'accord illustrateur fait plus que de l'inkscape. Perspectives et couleurs PANTONE ™, de dire les deux premières différences qui se viennent à l'esprit. Mais pour le prototypage Web, il a probablement tous les outils nécessaires.
Personnellement, et à chaque entreprise WebDev, j'ai travaillé à la fois, je me suis toujours moqué de Photoshop en premier. Sauter directement dans CSS et Markup est plus d'une approche ascendante et a du sens à beaucoup de programmeurs, mais dans le développement Web, vous devez garder à l'esprit qu'il existe une esthétique à considérer et à suivre une direction créative à suivre. Il ne suffit pas que votre produit soit fonctionnel, il a besoin de la saisie d'un réalisateur créatif / graphique créatif professionnel afin de rendre le produit agréable à regarder et à utiliser.
Dans mon expérience, le problème a toujours été lus avec une inflexibilité des membres de l'équipe. Les graphistes des graphistes qui sont axés sur l'esthétique et refusent de compromettre leur intégrité de conception; qui entraîne parfois des dispositions impossibles ou extrêmement difficiles et non sémantiques. Les développeurs qui refusent catégoriquement de compromettre l'intégrité de leur code là où il existe une solution réalisable - ce qui pourrait être un peu moins élégant. La clé est d'avoir une équipe créative qui connaît intimement CSS et ce qui est et n'est pas possible et une équipe d'ingénierie qui apprécient l'importance de la conception et de l'esthétique.
Dans ma vie indépendante (avoir eu l'avantage de travailler dans les deux camps), je trouve qu'il est beaucoup plus facile de se maquiller dans Photoshop d'abord parce que je sais ce que je peux et que je ne peux pas faire. Et des maquettes Photoshop sont beaucoup plus faciles à modifier sur les commentaires des clients que CSS et MarchUp. De plus, si vous pouvez montrer à votre client une maquette, ils se sentent plus en sécurité parce qu'ils savent que leur argent se déroule dans un projet bien planifié avec une direction de définement.
J'espère que cela vous aide!
Je suis un programmeur Web qui connaît HTML et CSS assez bien. Je peux utiliser un programme graphique pour sa fonctionnalité de base, mais la désingtion d'un site Web graphique complet n'est pas ma chose.
Je laisse un graphiste Utiliser son programme graphique Hers ou Hers pour créer une belle mise en page, et que Code le site Web à la main dans HTML et CSS.
Cela fonctionne pour moi et donne à mes clients un design qu'ils aiment (car un concepteur graphique fera toujours une conception beaucoup plus belle que la plupart des programmeurs Web).