Conception de sites Web dans un navigateur (halètement!) [Fermé]

Question

Je suis intéressé par l'opinion des gens sur le pour et le contre, ou carrément "enfer non". lors de la conception de sites Web dans le navigateur et de l’abandon de Photoshop, Fireworks, etc.

Je suis en train de concevoir un nouveau lancement de mon site Web et de l'essayer dans le navigateur. Je ne regarde pas en arrière.

Par exemple (j'utilise une grille de 960 pixels avec 12 colonnes):

<div id="news_section" class="floatleft columntwo spanfourcolumns">
   …content
</div>

<div id="recent_work" class="floatleft columnfour spansevencolumns">
   …content
</div>

Non seulement la conception est redevenue amusante, mais l’utilisation de grilles, le rythme vertical, même le nombre d’or, n’ont jamais été aussi faciles. Sans oublier, cela annule complètement l'écart entre la conception et le codage statique.

Qu'en penses-tu?

Answer 1

Voulez-vous dire que vous créez d'abord des structures filaires de pages dans le navigateur (par HTML / CSS), puis que vous appliquez un dessin? C’est ce que je fais (et 37Signals suit cette pensée . aussi).

À mon avis, il est bon que les développeurs fassent des structures filaires statiques sans toucher à Photoshop, car le site est immédiatement utilisable et le temps gagné ne lui fait pas perdre du temps.

De plus, les programmeurs n’ont généralement pas tendance à concevoir. J'aime laisser cela à ceux qui connaissent chaque commande du PS sous le soleil:)

J'utilise également le framework CSS YUI pour créer rapidement des modèles.

Answer 2

Bien, travailler avec le navigateur n’est pas la pire des choses dans le monde, mais il existe quelques "enfer non":

1) NE PAS concevoir votre application à l'aide d'Internet Explorer. Utilisez Chrome ou FireFox. Le comportement non conforme d'IE peut vous faire croire que votre code CSS est valide alors qu'il ne l'est vraiment pas. Votre principal cas d'utilisation d'IE consiste à tester votre site dans IE.

2) Ne nommez pas vos classes pour leur apparence, comme dans votre exemple.

Answer 3

Ne pas !!

Si iDesign Steve apprend à concevoir directement dans le navigateur,

1. L’innovation va en souffrir: Steve se moque des limitations de CSS / HTML / whatnot. Il est libre de publier le site le plus impressionnant que l'humanité n'ait pas encore vu. Il est du devoir du programmeur Joe de repousser les limites du CSS / HTML et de casser le feu qui a approuvé le déploiement dans le temps, et de le voir déchiré par un navigateur stupide, qui possède une bonne part de marché juste avant la date limite. En face, écrire en CSS donne l'impression d'écrire du code assembleur. Même accomplir les tâches les plus élémentaires (configuration multi-colonnes fluide?) Est ridiculement difficile et vous rend haut pendant un certain temps.
2. Le facteur de fraîcheur de Steve diminuera: pas un seul développeur que je sache n'utilise un outil WYSIWYG pour générer du HTML / CSS ou considère que cela est acceptable. Quand tout ce dont vous avez besoin est un éditeur de texte, vous n’avez pas l’air aussi cool. Lorsqu'un client jette un coup d'œil au moniteur de Steve et voit un tas de texte au lieu de plusieurs fenêtres, une centaine de petites icônes amusantes et un brouillon coloré à moitié terminé, il peut aussi penser que "mon petit-fils de 7 ans peut taper des choses ... ".
3. Joe a toujours plus de contraintes que Steve: le site doit être accessible, la mise en page doit être suffisamment fluide pour permettre toutes sortes de sorties, jouer agréablement avec javascript ... Si CSS / HTML sera réécrit de toute façon, il n'y a pas de quoi lutter .

Soyez un bon coéquipier et lancez Photoshop maintenant. Joe a besoin de son travail pour payer ses factures.

Answer 4

Eh bien, pour quelqu'un qui a un niveau d'incompétence de conception, il s'agit d'un croquis au tableau blanc, puis directement en HTML et CSS.

Pourtant, mes sites Web ont une apparence affreuse ...

Answer 5

Au cours des derniers sites que j'ai réalisés, j'ai adopté les deux approches. Chaque fois, la page conçue directement en HTML / CSS a demandé beaucoup moins de travail, mais a été un site Web beaucoup moins attrayant. Si vous souhaitez créer une page attrayante, lancez-vous dans Photoshop, sinon vous utiliserez trop souvent des raccourcis dans votre CSS. Une idée peut être créée plus rapidement et est beaucoup plus flexible dans Photoshop, ce qui vous amène à expérimenter vos idées et vous propose un site visuellement meilleur.

Answer 6

Je ne conçois jamais de sites Web dans Photoshop; Je passe directement des esquisses physiques à HTML et CSS. Je le trouve plus rapidement et vous ne finissez pas par jeter quelque chose sur lequel vous travaillez depuis des heures (le fichier Photoshop).

Answer 7

J'ai choisi de rester avec des structures filaires et de concevoir du papier directement dans le navigateur. Bien sûr, c’est pour ça que je travaille, et cela m’a fait de moi un designer beaucoup plus créatif.

Bien que j'aime utiliser mes propres bibliothèques CSS, consultez Plan directeur Google . Consultez cet article du designer Web, Mark Boulton.

Answer 8

enfer non!

• vous refaites l'erreur "tables for all" en utilisant simplement des classes au lieu de tables.
• vous mélangez la présentation (où dois-je placer ceci) avec le contenu. vos classes ne disent pas ce que c'est, elles disent où mettre.
• votre dessin est de taille fixe. il ne s'écoulera pas avec le dimensionnement des fenêtres, de sorte qu'il faudrait soit un défilement horizontal, soit un grand espace blanc à droite.

mais je ne comprends pas pourquoi quelqu'un mentionne PhotoShop. c'est presque le dernier outil de conception de sites Web, peut-être qu'Illustrator est le seul encore moins approprié pour cela.

Answer 9

J’ai constaté que, bien qu’une esquisse physique puisse vous aider à choisir le bon tracé pour un dessin, vous pouvez créer des mises en page bien plus esthétiques dans Adobe Illustrator (il est beaucoup plus facile de déplacer des éléments que Photoshop). Une fois votre conception terminée, utilisez Photoshop pour la découper.

Answer 10

Un avis à prendre en compte est celui de la conception de votre projet. Si vous concevez un site pour un client, il peut être utile de créer des maquettes rapides dans photoshop afin qu’ils en connaissent la mise en page et qu’ils puissent valider votre conception. Une fois que le client a accepté un design, vous créez un fil de fer qui s'adapte aux éléments de votre maquette et vous pouvez ensuite épisser des éléments qui nécessitent des images réelles directement de votre maquette.

Lorsque vous suivez cette méthode, vous devez prendre en compte tous les éléments de conception disponibles que vous pouvez utiliser pour implémenter votre maquette et vous assurer de les associer de manière sémantique et bien conçue, et non pas simplement pour faire le travail. .

Answer 11

Compass, spécialement blueprint / sémantique, aide beaucoup lorsque vous concevez dans le navigateur. J'aime également conserver la mise en page et les styles sur différents fichiers afin de pouvoir disposer plus facilement de styles que je n'aime pas tout en conservant la structure filaire au même endroit. Je vous recommanderais également d’utiliser des palettes de couleurs et de composer à l’échelle des polices. Ces deux méthodes sont utiles et plus faciles à utiliser avec les variables SASS.