Comment faire vous maquette d'un site web?
Le flux de travail typique commence dans Photoshop, puis passe au format HTML et CSS pour reproduire au mieux le format PSD d'origine. Cependant, la conception Web a de plus en plus tendance à abandonner l’étape de Photoshop en faveur de la création de la composition initiale directement dans le navigateur avec votre éditeur préféré. Je suis sûr que vous avez raison de dire que cette approche limiterait votre conception, mais vous pouvez faire beaucoup plus dans le navigateur que vous ne le pensez. Cet article vous fournira les outils et astuces dont vous avez besoin pour créer des maquettes brillantes et fonctionnelles en tant que première étape du processus de conception.
L'argument
Meagan Fisher de 24ways.org fait un argument convaincant pour la conception dans le navigateur. Bien que je ne partage pas son dédain pour Photoshop (j'aime Photoshop plus que tout autre logiciel de la planète), je suis d'accord avec certains de ses autres points. Selon Fisher, une image statique ne donne pas vraiment la sensation d'un site Web, contrairement à une page en direct, et la conception dans le navigateur vous oblige à vous concentrer sur l'organisation du contenu avant la conception, ce qui permet de garantir une meilleure accessibilité et une hiérarchie appropriée des informations.
Nous utiliserons l'article de Fisher comme tremplin pour nos conseils sur la manière de devenir un professionnel pour la création de fantastiques maquettes dans le navigateur qui sont presque prêtes à fonctionner lorsque (et si) le client vous donne le feu vert.
Astuce 1: Démarrer Basic & Utiliser une grille
Comme je l'ai indiqué ci-dessus, ajouter et organiser tout le contenu sans style vous permet de créer un design qui correspond à votre contenu plutôt que l'inverse. L'utilisation d'un framework basé sur une grille peut réduire radicalement le temps de développement et vous aider à vous assurer que votre mise en page est solide.
Ressources:
Pour plus d'informations sur la conception Web basée sur une grille, consultez notre article sur les frameworks CSS.
Astuce 2: Obtenez un bon éditeur
Si vous codez des sites à la main, un éditeur Web professionnel est la pierre angulaire de votre flux de travail. Personnellement, j'utilise (et aime absolument) l'Espresso de MacRabbit. Il contient toutes les petites fonctionnalités que je veux, telles que les extraits et la saisie automatique, ainsi que les grandes fonctionnalités dont j'ai besoin, comme pouvoir voir les modifications en direct apportées à un aperçu du navigateur lorsque je tape du code. Vous devriez magasiner et trouver l'application qui répond le mieux à vos besoins. Voici une liste rapide d'éditeurs pour vous aider à démarrer:
- Aptana: Mac, Windows Linux (de loin mon option gratuite préférée)
- Komodo IDE: Mac, Windows, Linux
- NetBeans: Mac, Windows, Linux
- Coda: Mac (une alternative intéressante à l'espresso)
- Text Wrangler & BBEdit: Mac
Astuce 3: Placer une ombre sur un élément
Photoshop n'est plus le seul moyen d'obtenir une ombre décente sur le Web. La plupart des navigateurs principaux (mais pas tous) prennent désormais en charge CSS3. Cette prise en charge présente plusieurs nouvelles fonctionnalités pour la création de conceptions avancées. Une des fonctionnalités les plus utiles est boîte ombre, qui vous permet d'ajouter des ombres à certains éléments en utilisant uniquement CSS. Le format de box-shadow est box-shadow: 5 pixels 5 pixels 20 pixels # 000000. Ces valeurs vous permettent de régler la largeur et la longueur de l'ombre, ainsi que son rayon et sa couleur de flou.
Ressources:
Consultez l'article de CSS.flepstudio sur l'effet Box-Shadow pour en savoir plus sur l'utilisation de cette fonctionnalité.
Astuce 4: Shadowing Text
Si vous souhaitez placer une ombre sur du texte, utilisez la commande ombre de texte fonctionner comme démontré sur ce tutoriel Kremalicious. Le format pour ombre de texte est texte-shadow: 1px 1px 1px # 000. Les deux premières valeurs déterminent le décalage de l'ombre (x et y respectivement), la troisième valeur détermine le rayon de flou et la valeur finale vous permet de modifier la couleur de l'ombre.
Cette fonction peut être appliquée pour créer plus que des ombres. Le tutoriel ci-dessus va vous montrer comment utiliser ombre de texte pour créer un effet de typographie, un effet de rayonnement et même un effet de texte enflammé.
Astuce 5: Coins arrondis
Les coins arrondis sont une autre caractéristique qui a finalement été adoptée dans les CSS modernes. Vous pouvez obtenir des angles arrondis CSS dans Safari et Firefox en utilisant le rayon de la frontière une fonction. Il suffit de définir le -moz-border-radius et / ou -webkit-border-radius à une valeur donnée en pixels pour ajuster la rondeur de la frontière sur un article donné.
Ressources:
Pour plus de tutoriels sur les angles arrondis, consultez la synthèse de CSS Juice sur les 25 techniques de coins arrondis avec CSS.
Astuce 6: Construire une palette de couleurs
Photoshop offre un moyen agréable de visualiser et d’expérimenter différentes couleurs, mais il existe également une pléthore de ressources de jeux de couleurs gratuites sur le Web. À mon avis, le meilleur d'entre eux est Adobe Kuler. Kuler fournit non seulement la meilleure interface pour la création de superbes combinaisons de couleurs à la volée, il vous donne également accès à une vaste bibliothèque de combinaisons de couleurs prédéfinies et consultables. Voulez-vous donner à votre site Web un look d'automne? Il suffit de taper? Automne? et vous avez le choix entre plus de 2 600 régimes. Grâce à Kuler, il est très facile de créer un jeu de couleurs incroyable que vous pouvez insérer directement dans votre code CSS (ce qui le rend simple à modifier et à expérimenter à la volée).
Ressources:
Pour en savoir plus sur les outils de couleur, consultez notre article sur 25 outils impressionnants pour choisir un schéma de couleur pour un site Web.
Astuce 7: dégradés de texte
Si vous êtes malin, vous pouvez réellement appliquer un dégradé au texte en direct dans le navigateur. Quel étrange vaudou est-ce que vous demandez? Naviguez vers WebDesignerWall pour consulter son tutoriel sur le sujet. Essentiellement, vous placez une étendue autour du texte auquel vous souhaitez appliquer le dégradé, puis définissez l'arrière-plan de cette étendue sur un fichier PNG répété du dégradé. Bien sûr, pour faire le PNG, vous devrez utiliser un éditeur d’image (oui, vous saviez que vous deviez avoir recours au bon vieux Photoshop de temps en temps).
Astuce 8: Utiliser RGBA pour filtrer les couleurs
CSS3 implémente une nouvelle fonctionnalité appelée RGBA (? A? Qui signifie alpha). Utilisation de la? A? valeur, vous pouvez définir l'opacité d'un remplissage. Cette fonctionnalité pratique vous permet non seulement de créer facilement des jeux de couleurs utilisant une seule couleur avec différentes valeurs alpha, mais vous permet également de créer des éléments transparents qui révèlent l'illustration derrière eux, ce qui revient à réduire l'opacité d'un calque dans Photoshop.
Ressources:
Consultez l'article de Oncemade sur La bonne façon de déclarer les couleurs RGBA.
Astuce 9: Connaissez vos polices Web
Ne tombez pas dans le piège d'utiliser les deux mêmes polices sur chaque site que vous concevez. Changez les choses en tirant parti de la gamme complète de polices Web sécurisées. Typetester est un excellent outil pour faire exactement cela. Il vous permet de prévisualiser des blocs de texte dans différentes polices et paramètres (taille, alignement, suivi, etc.) directement dans votre navigateur. La meilleure partie est que lorsque vous trouvez les paramètres que vous aimez, Typetester exporte le CSS pour vous.
Astuce 10: Obtenez des polices encore meilleures
La création de texte sous forme d'image dans Photoshop vous donne la liberté d'utiliser la police de votre choix sans vous soucier de la compatibilité. Malheureusement, cette méthode a pour résultat que le texte ne peut être sélectionné ou recherché. Cependant, il n’est pas si difficile de résoudre ce problème. De nos jours, il existe plusieurs solutions pour installer des polices personnalisées avec du texte sélectionnable en direct sur votre site à l’aide de la commande @ font-face.
Ressources:
Obtenez des polices incroyables sur votre site en quelques minutes avec notre didacticiel pas à pas de TypeKit.
Astuce 11: Stock Art est votre ami
C'est souvent le cas, en particulier avec les maquettes initiales, qu'il vous faut un bouton, une icône ou un autre graphique rapide que vous ne voulez pas nécessairement créer à partir de rien. Les sites d'arts graphiques tels que GraphicRiver regorgent d'éléments Web prêts à être insérés dans un site, la plupart ne nécessitant aucune modification de Photoshop! Même si vous pouvez facilement construire les objets vous-même en une heure, il est très séduisant de laisser tomber un dollar sur une œuvre d'art de grande qualité et de l'avoir prête à l'emploi en 2-3 minutes.
Astuce 12: Utiliser les outils de test du navigateur
Je sais que beaucoup d’entre vous sont tout simplement impatients d’écrire un commentaire cinglant sur le fait que plusieurs des techniques ci-dessus (ombres, coins arrondis, etc.) ne fonctionnent que dans certains navigateurs et sont donc inutilisables. C'est précisément pourquoi je cherche toujours à présenter les deux côtés d'un argument. Les personnes en faveur du développement dans le navigateur présentent ces techniques comme des preuves que vous pouvez accomplir beaucoup en dehors de Photoshop mais sont peut-être un peu trop impatientes pour écarter le fait que plusieurs navigateurs recevront une expérience radicalement différente en raison du manque de support.
Le fait est que, peu importe la façon dont vous développez un site Web, vous devez toujours savoir exactement comment les principaux navigateurs rendent votre site. Vous pouvez ensuite décider en connaissance de cause quels navigateurs sont acceptables, le cas échéant. Pour accomplir cet exploit, consultez Adobe Browserlab. Cet utilitaire incroyablement utile vous permet de prévisualiser un site sur plusieurs navigateurs et systèmes d’exploitation en temps réel. Le seul inconvénient est que vous réaliserez peut-être à quel point vos sites sont dégradés dans certains navigateurs, ce qui entraîne inévitablement des heures de malédiction et de grincements de tête.
Conclusion
Bien, qu'en pensez-vous? Êtes-vous prêt à passer et commencer à créer des compositions armées uniquement avec un éditeur de texte et un navigateur? Ou êtes-vous comme moi, confiant qu'un coroner devra extraire une boîte du logiciel Photoshop de vos doigts froids et morts avant de le laisser partir? De toute évidence, il n'y a pas d'absolu ici. Peu de designers professionnels créent des maquettes sans aucune aide d'un éditeur d'image. La question devient alors, dans le brouillon initial, où pensez-vous qu'il est préférable de passer la plus grande partie de votre temps? Nous aimerions savoir. N'hésitez pas à utiliser les commentaires pour prendre position et défendre votre position jusqu'à la mort. Quant à moi, cette conclusion semble devenir de plus en plus macabre, alors je ferais mieux de m'arrêter ici.