Share
Ce sont des moments passionnants pour être un concepteur de sites Web. CSS commence enfin à rattraper les visions des beaux sites Web que nous avons en tête. Nous n’avons plus besoin de hacks et d’images pour créer des interfaces attrayantes! Mais nous ne pouvons pas simplement compter sur les navigateurs pour inaugurer cette nouvelle ère. En tant que créateurs, nous devons faire preuve de souplesse et adapter notre flux de travail pour encourager ces nouvelles meilleures pratiques. Il est temps de repenser notre façon de créer des sites Web.
Ce dont je vais discuter aujourd'hui n'est pas nouveau ni révolutionnaire, mais plutôt une extension de ce que vous soupçonniez peut-être déjà au fond de votre esprit depuis un certain temps déjà. Cet article va servir de contrepoint à beaucoup d'autres articles de ce site Web qui traitent de Photoshop et de Fireworks, mais ils ne sont que les opinions d'un seul concepteur. Vous pouvez donc les prendre ou les laisser..
Si vous êtes un peu comme moi, lorsque vous démarrez un nouveau site Web, vous sortez le carnet de croquis et commencez à gribouiller des idées. Vous ouvrez ensuite Photoshop (ou Fireworks) et définissez le dessin. Le code n'y est même pas pris en compte jusqu'à la dernière étape.
C'est une idée fondamentalement viciée, pour plusieurs raisons. D'une part, un site Web n'est pas une image. Un site Web fini est un site flexible, mobile chose, construit avec HTML ou CSS. Photoshop nous donne (ainsi qu'à nos clients) des attentes irréalistes quant à l'apparence et au comportement d'un site Web. Vous devriez penser à la façon dont la conception se traduira en code tout au long du processus de conception.
Deuxièmement, le concept entier d'un? Fini? la conception d'un site Web est erronée. Construire une maquette de Photoshop et dire ensuite: bien, passons maintenant au code. donne une impression permanente à une conception Web, comme si vous corrigiez une impression avant de l'envoyer. L’un des grands avantages d’Internet est qu’il change en permanence. Estamper une maquette comme terminé dit que ceci est la version finale de la conception qui existera. En tant que concepteurs, nous devrions accepter la nature en constante évolution de notre support et reconnaître qu'un dessin n'est jamais fini..
L'avantage de la conception avec du code est que vous êtes obligé de penser le contenu et les styles comme deux choses différentes. Le contenu dirigera la conception, plutôt que l'inverse.
De toute évidence, vous aurez besoin d'un navigateur. En fait, vous devriez vraiment avoir quelques navigateurs à tester. (À part: je recommande Wine pour tester IE sur Mac). À tout le moins, vous devriez avoir un navigateur Webkit comme Safari ou Chrome, ainsi qu'un navigateur utilisant Gecko comme Firefox. Si vous avez déjà fait du design web, vous aurez sûrement cette zone couverte.
Vous devriez également avoir un éditeur de code décent. De préférence, quelque chose avec une fonctionnalité de mise à jour en direct comme Espresso ou Coda. Personnellement, je suis un grand fan de TextMate, bien qu’il n’ait pas de mode de mise à jour en direct. Encore une fois, en tant que type Web / gal, vous avez probablement déjà un favori, mais je pourrais aussi bien le mentionner pour les nouveaux arrivants..
L’esquisse est sans doute la partie la plus importante du processus de conception. Cela ne devrait pas changer même si vous concevez dans le navigateur.
Vous devriez toujours avoir une idée précise de ce à quoi devrait ressembler le design avant de démarrer sur l'ordinateur. À la fin de la journée, cela reste du design et vous devriez toujours utiliser un carnet de croquis. Je n’entrerai pas dans les détails de cette partie du processus, étant donné que vous, en tant que concepteur, devriez déjà la connaître. Sachez simplement que les mêmes règles s'appliquent. Vous ne voudriez pas ouvrir Photoshop sans savoir à quoi ressemblerait votre site, ce serait fou!
En fait, il n'est pas nécessaire que ce soit un dessin. Faites juste ce qui fonctionne pour vous pour créer le concept. Quoi qu’il en soit, la chose importante à considérer est d’avoir une idée solide dans votre esprit avant de commencer avec l’ordinateur.
La mise en page est sans aucun doute la partie la plus importante de ce processus. Vous pouvez avoir les polices les plus joliment sélectionnées, des couleurs parfaites et de délicieux petits détails, mais sans une mise en page solide, tout le dessin tombera à plat. Heureusement, la création d'une mise en page solide à base flottante avec CSS est l'une des choses les plus faciles que vous puissiez faire en tant que concepteur Web. A List Apart a un excellent article sur le sujet que je recommande vivement pour les détails techniques de la construction d'une mise en page basée sur CSS.
S'il y a une chose que vous devriez déjà savoir avant d'entrer dans votre éditeur de code, c'est la mise en page de votre conception. Si vous avez une disposition spécifique en tête, il est simple de la coder. Cependant, si vous y allez sans un agencement en tête, je pense que vous serez déçu des résultats. La mise en page n'est pas une chose que vous pouvez simplement expérimenter et changer à la volée, c'est une question qui nécessite une attention particulière de la part du concepteur..
Même si tu ne sais pas exactement où chaque élément vivra sur la page, vous devriez au moins avoir une idée générale du placement des éléments principaux, ainsi que des proportions entre ces éléments.
Un des grands avantages de ce nouveau mouvement de? Responsive Web Design? C’est ainsi qu’il encourage les concepteurs à penser en proportions plutôt qu'en pixels. Par exemple, vous pourriez dire que cet élément doit représenter 30% du conteneur principal, par opposition à 200 pixels ou une mesure similaire. Cela est particulièrement utile pour la conception Web dans le navigateur lorsqu'il est nécessaire de structurer une page. Vous pouvez commencer avec un élément de conteneur principal représentant, par exemple, 70% de la fenêtre du navigateur, puis concevoir le reste de la page à l'intérieur de ce conteneur proportionnellement à la largeur de cet élément. Plus besoin de déconner avec des mesures de pixels exactes et cet outil de règle stupide dans Photoshop!
À ce stade, vous devriez tous avoir au moins entendu de @ font-face, même si vous ne l'avez pas encore utilisé dans un projet. Pour tous, je ne sais pas, un de vous qui n'en avez pas entendu parler, voici la version en une phrase. @ font-face est un moyen d'incorporer et d'utiliser tout type de caractère pour une utilisation sur un site Web, même s'il n'est pas installé sur les ordinateurs de vos utilisateurs..
Cette idée simple a apporté une toute nouvelle ère de la typographie Web en quelques années. Des entreprises entières telles que Typekit et Fontdeck ont été créées dans le seul but de proposer de superbes polices de caractères pour votre site Web. Dans le passé, nous étions obligés de recourir à des méthodes de hacky comme Cufon ou à des images ordinaires pour afficher notre type comme nous le souhaitons, mais tout cela est en train de changer. Les fonderies de types ont largement adopté le nouveau format, modifiant leurs licences pour permettre l'intégration, voire autorisant l'hébergement de leurs polices par Typekit..
C’est donc formidable, mais qu’a-t-il à voir avec la conception dans le navigateur? Eh bien, mon bon monsieur, je vais vous dire.
Il est beaucoup plus facile de gérer les polices de caractères lorsqu'elles sont gérées par des règles CSS, et non par Photoshop?
Déchirer dans Photoshop pour changer chaque morceau de texte en une police de caractères sélectionnée devient un peu ridicule après un certain temps. Dans le code, vous pouvez prévisualiser les modifications et tester différents types de caractères, poids et tailles simplement en modifiant quelques lignes de texte. Cela vous permet d'itérer vos conceptions plus rapidement et d'adapter une conception aux demandes du client en quelques touches simples..
Toute cette puissance devient un peu ridicule quand on sait que nous avons maintenant un nombre infini de polices de caractères à utiliser. Tant que les fonderies continueront à faire leur travail et que Typekit continuera à faire les leurs, les concepteurs ne manqueront jamais de police de caractères appropriée.
Je recommande fortement d'utiliser Typekit, car il y a beaucoup plus de polices disponibles qu'avec une licence @ font-face standard. Vous pouvez toujours gérer le code vous-même, mais traiter avec des licences et devoir acheter chaque police individuellement devient assez ridicule. C'est l'option que j'ai choisie pour quelques projets, et bien que ce soit toujours infiniment meilleur que ce que nous avions auparavant, l'expérience n'était pas la meilleure.
Quand il s'agit de choisir des polices, amusez-vous avec elle! Expérimentez, essayez quelque chose de fou. Si vous voulez excuser l'auto-promotion flagrante, je voudrais vous diriger vers un autre article du mien.
Dans un? Traditionnel? processus de conception Web, le concepteur commence souvent par créer une maquette en niveaux de gris de sa conception dans Photoshop, avant d'ajouter les couleurs et les détails nécessaires à sa création. Ce processus fait partie intégrante de la mise en page et de l'aspect général de la conception. Même si vous n'utilisez pas le noir et blanc, la construction de votre conception en ensembles de cases et de formes simples vous permet de voir comment votre conception fonctionnera dans une perspective plus haute. La création d'un dessin à l'aide de simples boîtes est très facilement convertie en notre flux de travail intégré au navigateur. Juste utiliser
Une fois votre mise en page et votre typographie balisées et stylisées correctement, l’introduction de la couleur devient une chose banale avec quelques lignes de code. Cela ne veut pas dire que en choisissant les couleurs sont une technique facile et simple (bien qu'il existe un excellent article pour cela aussi), le fait de colorer les objets sur le plan technique est très simple. Même afficher de beaux dégradés est facile avec CSS3.
Lorsque je code en couleur sur un dessin, j'ai souvent Photoshop ouvert (halète!) Pour choisir les couleurs. Je suis sûr qu'il existe de très bons outils disponibles en ligne qui fournissent un sélecteur de couleur pour générer des codes hexadécimaux et des valeurs RVB, mais pour une raison quelconque, j'utilise toujours Photoshop. C'est par commodité, car d'habitude j'ai déjà ouvert Photoshop, mais j'y reviendrai plus tard..
Comme pour la typographie, les meilleures combinaisons de couleurs proviennent d'expérimentations, alors amusez-vous! Vous pouvez voir ici la puissance d'un processus de conception intégré à un navigateur lorsque vous pouvez modifier les arrière-plans et les couleurs de texte de nombreux éléments de votre page en quelques clics. Avec une maquette Photoshop, modifier les couleurs de plusieurs éléments était une tâche ardue. Il fallait sélectionner avec précision des calques et cliquer sur beaucoup trop de boutons dans une fenêtre.!
Rappelez-vous comment j'ai dit que j'ai généralement Photoshop ouvert lors du codage d'un site Web? Eh bien, il est temps de casser quelque chose, jeune padawan. Très peu de sites peuvent être développés sans utiliser Photoshop. Je veux dire y penser, même si vous utilisez un flux de travail entièrement basé sur un navigateur, il y aura toujours au moins une ou deux images personnalisées quelque part, par exemple, un arrière-plan ou une icône. À moins que vous ne connaissiez un moyen de créer des images sans éditeur de texte tel que Photoshop, vous ou quelqu'un d'autre devrez faire appel à Photoshop ou à un logiciel similaire pour créer ces textures, icônes et autres éléments..
Photoshop n'est pas si mal. Mon principal argument dans ce billet a été que ce n'est pas du tout bon pour la conception de sites Web, mais en tant qu'outil de conception d'icônes, il est en fait génial (si vous ignorez à quel point il se bloque souvent, ce que j'essaie de faire). Dans tous les cas, à un moment de la création d’une conception Web, vous devrez sans doute générer une sorte de graphique personnalisé. Je n'ai aucun problème à utiliser PS pour des tâches simples, telles que la répétition d'un fond, d'une texture ou d'une icône, qui feront finalement partie d'une conception Web plus grande..
De même, Fireworks n'est pas mauvais non plus. En fait, Fireworks propose de nombreuses fonctionnalités exceptionnelles (traitement par lots, outils avancés "save for web", par exemple) qui en font le compagnon idéal du flux de production intégré au navigateur. Vous devez savoir quand l'utiliser..
Nous avons parcouru un long chemin dans cet article, mais avant de terminer, il y a quelques mises en garde concernant ce processus que j'aimerais mentionner..
Client Pushback: Certains clients peuvent ne pas aimer utiliser cette technique. Ils pourraient être prêts à voir une maquette de Photoshop avant de commencer à travailler avec du code. Si tel est le cas, vous devriez les prendre en charge. Vous pouvez toujours utiliser bon nombre des astuces que j'ai données ici, par exemple, essayer différentes polices de caractères avec Typekit ou un autre service @ font-face, ou itérer rapidement un dessin avec des couleurs. La partie importante de ce post est de reconnaître que même si vous créez une maquette avec un éditeur d’image, la conception doit rester ouverte au changement et aux améliorations..
Anciens angles morts du navigateur: Il y a encore beaucoup de choses que vous ne pouvez pas faire dans un navigateur, et beaucoup de choses qui ne sont pas supportées par les navigateurs plus anciens. Si la compatibilité totale avec IE7 est une exigence du client, vous ne devez pas utiliser de dégradés CSS, mais plutôt d'images. Il existe des moyens de fournir des solutions de rechange, mais parfois, un client demande un support complet. Cela dit, vous devez toujours rechercher des moyens de déléguer la responsabilité de la conception à CSS et de réduire l’utilisation excessive des images. Il produit un balisage et des ressources plus propres et plus maintenables.
Être confortable! Ma troisième et la plus importante mise en garde: vous n'êtes peut-être pas à l'aise avec ce flux de travail, et ce n'est pas grave! Comme je l'ai déjà dit, même si vous n'êtes pas prêt ou incapable de suivre complètement ces idées, l'important est que vous reconnaissiez et au moins essayiez de considérer certains concepts, tels que l'itération rapide ou la mise au point en premier..
C'est ce temps encore. Il est temps de conclure et d'évaluer vraiment ce que vous avez appris aujourd'hui, ce qui, espérons-le, n'est pas rien. J'ai couvert beaucoup de choses, et avec un peu de chance, au moins certaines d'entre elles sont restées bloquées dans votre cerveau. Je ne m'attends pas à ce que vous changiez complètement votre flux de travail, je veux simplement que vous considériez qu'il existe une autre façon de faire les choses. Il est parfois difficile de comprendre qu'il existe d'autres méthodes de conception que la façon dont vous faites les choses maintenant, mais en tant que designer, il est important que vous soyez exposé à différentes écoles de pensée..
Je crois fermement que ce processus représente l'avenir de la conception Web et, pour ma part, m'en félicite.!
Accentsconagua