Share
On pense souvent que concevoir dans le navigateur est une approche moderne de la conception Web. En fait, avant l’avènement d’outils tels que Photoshop, il n’y avait guère d’autre choix. Ce n'est que depuis quelques années, depuis le début du responsive design, que les concepteurs sont revenus à leurs racines et ont commencé à concevoir dans le navigateur..
Je ne dis pas que chaque site Web devrait commencer à fonctionner dans le navigateur, mais comme les sites Web doivent maintenant être plus adaptables que jamais, il semble plus logique de choisir cette voie. La conception dans Photoshop (ou une application similaire) peut avoir des avantages, que je regarderai plus tard, mais elle peut aussi avoir ses inconvénients. Jetons un coup d'oeil à certaines de ces.
Une question que les concepteurs d'interface utilisateur au travail me posent souvent est la suivante: "Quelle est la largeur maximale que le design doit avoir?". La réponse que je donnais toujours à cette question était "Créez le design à environ 960px". De nos jours, chaque fois que cela m'est demandé, je leur dis qu'il n'y a pas de largeur fixe et qu'ils devraient imaginer que le dessin doit fonctionner à n'importe quelle largeur..
La réactivité étant si demandée, il est important que, lors de la conception des sites Web, cela soit pris en compte dès le début, et non seulement comme solution ajoutée. Lorsque les téléphones intelligents sont apparus pour la première fois, de nombreux concepteurs ont créé une conception de largeur fixe dans Photoshop pour le bureau, puis une autre pour les téléphones intelligents (généralement autour de la largeur de 960px pour le bureau et de 320px pour le mobile). Cette approche a peut-être fonctionné pendant un certain temps, mais elle n’est plus plausible en raison de la vaste gamme de largeurs de périphériques permettant d’accéder au Web. La seule façon d’avoir une idée réelle du fonctionnement, de l’apparence et du fonctionnement des sites Web réactifs consiste à les concevoir dans le navigateur..
La cohérence sera grande aussi. J'espère penser en termes de pièces réutilisables pour garder les choses simples et cohérentes - Chris Coyier sur la refonte de CSS-tricks
S'il est vrai que les visiteurs (dans la plupart des cas) ne visitent pas un site Web pour sa conception, mais le visitent plutôt pour son contenu, en concevant dans le navigateur, nous sommes en mesure de nous concentrer sur le contenu d'un site Web et de concevoir le design autour de ce contenu..
Lors de la conception dans Photoshop, la conception est souvent considérée en premier et le contenu en second. Dans certains cas, le contenu n'est même pas pris en compte. Combien de fois avez-vous créé un design dans Photoshop et avez-vous rempli le contenu avec une charge de Lorem Ipsum? Nous l'avons tous fait, mais il semble étrange d'adopter une approche lorsque le contenu devrait être l'une des principales préoccupations. La conception dans le navigateur permet cela.
Lorsque vous optez pour cette approche, avant de passer directement à l'éditeur de code que vous préférez, il est important de bien connaître les éléments et composants de votre site Web. Ce faisant, vous pourrez créer des composants réutilisables en utilisant les mêmes balises HTML et CSS. Toutes les modifications que vous apportez peuvent facilement être modifiées en modifiant simplement quelques lignes de code..
L'une des principales raisons pour lesquelles vous souhaitez concevoir dans le navigateur est la possibilité de voir à quoi ressemble une conception réactive en temps réel. Avant de vous lancer dans cette opération, il peut être judicieux de définir des points d'arrêt prédéfinis pour les requêtes de média, puis tout ce qui se trouve entre ces points doit être fluide..
Pensez à la mise en page de votre site et adaptez la meilleure solution à ses besoins. Par exemple, si vous avez un système de grille photo 4x4, planifiez à quel point d'arrêt la grille 4x4 ne sera plus éligible pour des résolutions plus petites et remplacez la grille par un système plus approprié, tel qu'un système de grille 2x8..
Ok, vous pensez peut-être que Photoshop a pris pas mal de peine dans cet article, mais Photoshop a encore le temps de briller même lorsqu'il est conçu dans le navigateur. Il arrive parfois que CSS ne coupe pas le style et que, pour des éléments plus décoratifs, il soit nécessaire de revenir à Photoshop. Vous devez utiliser Photoshop avec votre éditeur de code..
Les sites Web tels que celui ci-dessus seraient difficiles à concevoir dans le navigateur, car ils affichent un style très illustré. La conception dans le navigateur ne serait pas la meilleure approche pour des sites comme celui-ci..
Il n’est pas rare de nos jours que les concepteurs d’interface utilisateur présentent le concept d’un site Web plutôt que leur représentation réelle. Ces tableaux d'ambiance peuvent inclure des éléments tels que
En faisant cela, le design est toujours bien considéré, mais n'est pas aussi restrictif qu'un design de maquette traditionnel de Photoshop.
Si vous n'avez pas encore essayé de concevoir dans le navigateur et que vous souhaitez rester coincé, voici quelques outils utiles qui vous aideront à choisir cette approche..
Il existe de nombreux IDE disponibles, mais en voici un en ligne, ce qui amène la conception dans le navigateur à un tout autre niveau. L'utilisation d'un IDE basé sur le cloud présente l'avantage de pouvoir facilement partager des fichiers avec des collègues ou d'autres personnes travaillant sur un projet..
Les tuiles de styles peuvent être décrites comme
un livrable de conception composé de polices, couleurs et éléments d'interface qui communiquent l'essence d'une marque visuelle pour le Web.
Ils vous permettent de créer une identité de marque pour un site Web, ce qui peut lui donner du style sans être trop restrictive quant à l'apparence finale du design. Si vous ne les avez pas utilisés auparavant, vous pouvez trouver une excellente introduction ici.
Live Reload actualise automatiquement la page du navigateur dès que vous enregistrez un fichier HTML / CSS / javascript ou tout autre fichier. Cela peut vous faire gagner du temps et vous évite d'avoir à appuyer constamment sur le bouton d'actualisation F5..
La fonte de caractères est idéale pour concevoir une typographie dans le navigateur. Il vous permet de taper rapidement le style dans le navigateur et de vérifier la lisibilité et le rendu pendant le travail..
Au moment d'écrire ces lignes, Adobe dispose d'un petit outil en cours de développement qui semble prometteur. Il s'appelle 'Edge Reflow' et vous permet de concevoir simultanément toutes les tailles d'écran sans sacrifier la qualité ou la capacité. Il est conçu comme un outil vraiment utile pour la conception de sites Web réactifs car, contrairement à Photoshop, il n’utilise pas de canevas à largeur fixe. Il n'y a aucune nouvelle quant au moment de sa sortie, mais vous pouvez vous inscrire pour être averti de sa sortie..
Malheureusement, la conception dans le navigateur peut avoir un effet secondaire négatif. En tant que concepteurs et développeurs Web, nous recherchons en permanence des moyens d’accélérer notre processus de conception de sites Web. Lors de la conception dans le navigateur, nous pouvons être tellement absorbés par la fonctionnalité que nous pouvons nous assurer que cela fonctionne à chaque résolution, de telle sorte que nous puissions parfois oublier de donner à la conception l'amour et l'attention qu'elle mérite. Nous allons prendre des raccourcis et essayer de rendre la vie facile pour nous-mêmes, ce qui peut contribuer à la négligence.
Ne vous contentez pas de vous asseoir et de prendre la «solution de facilité». Il m'est souvent arrivé de recevoir un fichier pour un dessin, en y jetant un regard et en pensant «beurk, on ne peut pas en créer beaucoup en CSS, ça va être un site lourd en images, juste pour la mise en page». Nous savons tous que les images causent un gonflement et essayons donc de les utiliser le moins possible. Parfois, cependant, cela peut être inévitable, par exemple lorsque vous travaillez sur un contenu de marque fortement conçu. C'est la même chose avec beaucoup de disciplines. vous devez faire un compromis raisonnable entre forme et fonction. Trop de forme et trop peu de fonctions se traduiront par un site Web médiocre et inversement.
Il n’a jamais été aussi important de pouvoir concevoir des sites Web fluides et réactifs, qui s’adaptent à diverses résolutions. La nécessité de ces exigences rend des outils tels que Photoshop moins utiles que ceux utilisés auparavant pour la conception Web..
La réactivité de la conception étant là pour rester, nous pouvons commencer à constater des changements dans la conception esthétique des sites Web. De nouveaux outils et solutions à certains problèmes d’aujourd’hui seront apportés. Bien sûr, si un site Web est davantage axé sur la création de marque et la conception, Photoshop sera toujours votre principal outil. certains sites sont davantage axés sur la conception que sur le contenu.
.
Accentsconagua