Share
Le Web a subi de profonds changements ces dernières années et sa conception évolue parallèlement. Photoshop est peut-être encore l'outil de prédilection de nombreux concepteurs Web, mais pour certains, Photoshop n'est plus roi. Dans cet article, Ian Yates, éditeur de Webdesigntuts +, expliquera comment Photoshop était utilisé dans le passé, comment il peut être utilisé à l'avenir et pourquoi..
Techniquement parlant, Photoshop est une application permettant de manipuler des images (pardonnez-moi d’énoncer une évidence), mais il regorge également d’outils permettant de créer des graphiques à partir de rien. La forme, le vecteur, le type, les remplissages et les effets, tous (et plus) se prêtent très bien à la construction de dispositions graphiques.
Il n'y a pas si longtemps, les navigateurs Web étaient incapables de générer eux-mêmes ce type d'effets, mais ils pouvaient parfaitement afficher des images bitmap. Pour explorer la conception graphique dans un navigateur, il était seulement logique d’atteindre Photoshop, de créer vos visuels, de les enregistrer en tant qu’images et de les utiliser dans une page Web..
Dégradés, ombres, motifs, angles; tout est facile à créer avec les outils de Photoshop - pas trop facile à créer avec autre chose.
Construire pour le Web était également relativement complexe (beaucoup moins simplifié qu'aujourd'hui), donc se moquer d'une mise en page dans Photoshop allait toujours être plus facile et plus rapide que de se battre avec Dreamweaver. Pourquoi ne pas concevoir dans une application graphique, obtenir l'approbation du client, puis construit réellement pour le web? Les designers d'aujourd'hui ont grandi avec Photoshop car il offrait le moyen le plus rapide de visualiser un concept de design haute fidélité..
kuhboom.com: les conceptions Web densément texturées vous permettront d'atteindre l'outil de tranche. À l'époque où le Web était un média émergent, il n'existait pas d '"agences Web". La tâche de le concevoir incombait donc aux designers. Ces gars ont fait ce qui était logique; ils ont ensuite utilisé leur expérience en matière de conception d'impression numérique, leurs valeurs, leurs techniques, leurs processus et leurs outils, puis les ont appliqués à ce nouveau monde. Ils ont efficacement porté la conception d'impression à l'écran, de sorte que le flux de travail existait déjà:
Tout ce qui devait être modifié était le résultat final. En tant que tel, Photoshop a été témoin des changements et a poursuivi sa route, devenant ainsi le meilleur ami du graphiste..
Parfois, ils changent (comme le disait Bob Dylan). Le Web est un lieu différent de nos jours et le rôle de Photoshop dans le processus de conception de ce site Web évolue également. Pourquoi?
Une grande partie du problème réside dans les avancées technologiques qui ont entraîné d’énormes changements dans la conception Web au cours des dernières années. Nous avons vu Internet se développer, passant d'une bibliothèque de documents statiques à un pool interactif de services et d'applications. Les fournisseurs de réseau ont étendu leurs doigts dans presque tous les coins du globe. La bande passante et la vitesse ont augmenté pour atteindre un niveau proche de celui de la science-fiction. Les appareils compatibles avec Internet, tels que les smartphones, les tablettes et même les montres, sont fabriqués rapidement et à moindre coût. Tout cela a révolutionné la façon dont nous utilisons le Web - et cela a radicalement changé notre perception de la façon dont nous devrions concevoir pour cela..
Les concepteurs d’impression commencent par les contraintes (dimensions fixes d’une page), puis conçoivent en leur sein. Lors de la conception initiale pour le Web, c’était aussi un point de départ logique; établir une toile fixe et travailler vers l'intérieur. Pour déterminer quelles devraient être ces dimensions fixes, les concepteurs ont dû émettre des hypothèses sur la taille de l'écran de l'utilisateur final. Très tôt sur 800x600px était le plus commun. Plus tard, 1024x800px était la norme. Travailler sur une grille de 960 pixels était logique car il convenait à la plupart des écrans (les écrans les plus grands étaient rares, les propriétaires d’écrans plus petits devraient simplement être mis à niveau ultérieurement) et était divisible par une plage de largeurs de colonne.
Ces hypothèses étaient alors fausses (obligeant un utilisateur à ajuster leur naviguer vers votre design?!) et le sont encore plus de nos jours. Quelle est la taille d'une page Web aujourd'hui?
De Brad Frost, c'est le Web En mai 2010, un gars du nom d'Ethan Marcotte parlait d'une idée brillante qu'il avait conçue. Reprenant les technologies et méthodes existantes, il a proposé une approche "Responsive Web Design" utilisant des présentations fluides (non fixes), des images flexibles (qui grandissent et diminuent avec la présentation) et des requêtes multimédia CSS autres facteurs).
Avec ces idées, le web a changé, de manière irréversible.
Grâce aux concepts d’Ethan, les concepteurs Web se sont rendus compte qu’ils devraient penser du point de vue contenu vers l'extérieur, pas le limites de page vers l'intérieur (bien que cette approche ne soit pas obligatoire). Nous ne savons pas quelle est la taille d'une page Web, nous devons donc concevoir notre contenu pour l'adapter à toutes les frontières. Pensez au contenu Web comme étant liquide. capable d'être versé dans toutes sortes de navires.
C’est là un problème pour Photoshop. Photoshop fonctionne de manière inhérente à des limites fixes. Les formes, les types et les objets de ses mises en page sont fixes, alors que les pages Web ne le sont pas davantage. Produire une maquette à présenter à un client était généralement rapide dans Photoshop, mais comment présenter efficacement une mise en page fluide sous forme d'instantané statique?
Le prochain Web tel que présenté par mediaqueri.es La typographie est un autre bon exemple des concepteurs d’impresseurs qui tentent d’imposer des contraintes aux utilisateurs finaux. Le navigateur de chaque utilisateur leur donne le pouvoir de définir la taille de leur type par défaut; après tout, certaines personnes préfèrent les caractères plus petits, alors que d'autres préfèrent une lecture plus facile avec des caractères plus gros. Par défaut, les navigateurs définissent généralement le type à 16px. Ainsi, sauf indication contraire du concepteur ou modification de la valeur par défaut par l'utilisateur, le corps de la copie sera la taille exacte..
Les concepteurs d’imprimerie ont toutefois bien du mal à renoncer à ce contrôle. "Comment pouvez-vous laisser l'utilisateur définir la taille du type?! Avez-vous une idée de ce que cela va faire pour le reste de la mise en page ?!"
Verrouiller la taille de la police dans une conception Web (par le biais de CSS) contribuera dans une large mesure à empêcher toute imprévisibilité de se produire, mais elle n’est guère conviviale. De nos jours, il est considéré comme la meilleure pratique de dimensionner les éléments de page et la typographie à l’aide de: ems au lieu de pixels; unités de mesure relatives basées sur la taille de police par défaut. Par conséquent, si un navigateur a une taille de police par défaut différente, la conception peut être modifiée en conséquence..
Cette flexibilité souligne à nouveau les limites de la conception de compositions statiques dans Photoshop..
Les navigateurs se développent très rapidement de nos jours et les images ne sont plus nécessaires pour de nombreux effets sur le Web. CSS est capable de produire des dégradés précis, des courbes, des objets inclinés, des ombres, une transparence alpha (la liste s'allonge) et c'est tout aussi bien compte tenu de l'aube des écrans Retina. Les écrans Retina (ou plus précisément: les écrans à haute densité de pixels) ont véritablement joué un rôle déterminant pour les concepteurs Web. Les écrans Retina ont deux fois plus de pixels que les écrans normaux, ce qui leur permet de rendre tout ce qui est extrêmement net. Cependant, tout ce qui est basé sur les pixels est simplement agrandi deux fois plus large, deux fois plus haut, ce qui entraîne une qualité comparativement inférieure..
Pour que les sites Web conservent leur netteté, les concepteurs doivent s’appuyer autant que possible sur ce que le navigateur peut rendre lui-même. En fait, la tendance récente au «design plat» est (en partie) une réaction à cette conception Web purement CSS..
Tout cela prend une énorme part de ce que Photoshop fait (produire des bitmaps) de l'équation.
Kit d'interface utilisateur plate de Designmodo Comme nous l'avons mentionné, le Web s'est véritablement mondialisé grâce à la multiplication des appareils mobiles. Cela nous oblige à réaliser que nous ne pouvons pas connaître les circonstances dans lesquelles notre contenu est consulté. Nous ne savons pas si notre utilisateur final est assis sur le canapé avec un Kindle, parapente avec un iPhone ou traverse le désert de Gobi avec un MacBook Pro. Nous ne savons pas à quel point leur écran est grand, à quoi ressemble leur processeur et, de même, nous ne pouvons pas supposer connaître la rapidité de leur connexion..
Nous commençons à comprendre que la performance est un élément fondamental de la conception Web. Encore une fois, les images jouent un rôle dans cela. Chaque élément individuel (image, script, document, quel qu’il soit) tiré d’un serveur Web coûte cher.
Au lieu de conserver des fichiers tels que des images et des polices dans un dossier appelé «assets», je vais renommer le dossier «passif»..
- Jeremy Keith (@adactio) 18 février 2013
Ils doivent non seulement être optimisés pour être aussi petits que possible, mais également peu comme possible. Les navigateurs sont limités dans la quantité d'actifs qu'ils peuvent simultanément télécharger, souvent à deux à la fois. Si votre page Web contient des centaines d'images individuelles, elles créeront un goulot d'étranglement, ce qui offrira une expérience négative à l'utilisateur final..
Cela peut être aidé en combinant des fichiers image dans des sprites uniques, mais (encore une fois), les écrans de rétine imposent une sorte de plan de sauvegarde..
Au lieu de cela, les effets sont mieux réalisés avec CSS, les icônes peuvent être incorporées via des polices Web, les logos peuvent être implémentés sous forme de graphiques vectoriels évolutifs, ce qui signifie la fin de l'outil de découpe..
À l'époque où le flux de travail du concepteur de site Web était en réalité le même que celui de l'impression avec Internet ajouté, la conception de mises en page dans Photoshop faisait partie intégrante du processus:
De nos jours, avec moins de résultats finaux reposant sur des ressources intégrées à une application graphique, la conception de toute une mise en page dans Photoshop signifie en réalité doubler vos efforts. Construisez-le une fois pour avoir une idée de ce à quoi il ressemblera, puis construisez-le pour de vrai. Ensuite, jetez le PSD car il ne sert à personne.
Adobe résistait au changement ou essayait tout simplement d’être accommodant en introduisant quelques fonctionnalités de conception Web dans CS6. Le panneau de sortie CSS de type CSSHat vous permet de récupérer le code de vos éléments de page créés visuellement. Ils ont également permis de coller une couleur hexadécimale (copiée à partir du navigateur) comprenant un hashtag (#ffffff par exemple) dans le sélecteur de couleur de Photoshop sans générer d'erreur..
Les styles de paragraphe (un peu comme dans InDesign) ont été introduits pour donner un contrôle plus global sur la typographie. Lorem Ipsum est devenu une fonctionnalité standard et vous pouvez désormais choisir les dimensions de périphérique communes en tant que paramètres prédéfinis de document.!
Mais nous sommes dans le déni ici - il y a un grand éléphant bleu debout dans le coin de la pièce.
Ce que nous examinons en réalité ici, ce n’est pas une application qui ne correspond pas à la conception Web, mais un flux de travail qui ne convient plus. En fait, même avant que le Web ne devienne trop fluide, le processus de conception Web de Photoshop, tel que nous l'avons décrit, comportait des défauts fondamentaux. Il existait une tendance à créer des rendus parfaits au pixel près des pages Web avant même que la construction ne puisse commencer. Et puis, à cause de l'obsession de tout obtenir à 100% parfait dans Photoshop, il y aurait un fanatisme similaire pour obtenir des résultats identiques dans tous les navigateurs. Il nous a fallu beaucoup de temps pour comprendre que les pages Web ne doivent pas nécessairement être identiques dans tous les navigateurs.!
Un problème grave lié à la recherche de la perfection dans Photoshop se pose lorsque le client s’implique. Ce flux de travail rend trop facile de s’enliser dans une boucle infinie de clients qui font des suggestions poussant en pixels, perdant inévitablement de vue la vue d’ensemble..
Ce qu'il faut, c'est une approche plus modulaire de la conception Web et Photoshop peut absolument jouer un rôle à cet égard. Considérons d’abord la phase de planification; la collecte d'informations et de contenu, l'esquisse des relations entre les différentes zones du site Web - une partie cruciale de ce processus modulaire, mais qu'il vaut mieux ne pas utiliser Photoshop.
Wireframing va plus loin dans le processus; disposer d'éléments d'interface rudimentaires, établir des relations visuelles, une hiérarchie et une interaction de base. Encore une fois, ce n’est pas une tâche que Photoshop s’acquitte très bien, mais plutôt pour des applications telles que Omnigraffle et Balsamiq, voire Illustrator (et bien d’autres encore).
Photoshop se prête beaucoup mieux à l'esthétique. Il ne peut pas décrire les mises en page de manière fluide, mais il peut explorer les couleurs, les textures, les styles d'éléments individuels, la typographie, l'atmosphère et l'ambiance. Style Tiles est un concept suggéré par Samantha Warren. Ce sont essentiellement des mood boards Photoshop, mais ils mettent en évidence une manière d’isoler et de présenter la phase esthétique au client..
Le prochain module de ce flux de travail est le prototypage; construire des dispositions simples mais fonctionnelles pour le navigateur. Et non, ce n'est pas la tasse de thé de Photoshop non plus. En fait, Adobe travaille activement sur une gamme d'applications alternative pour aider ici. Leurs outils de bord visent à offrir une interface de toile familière, qui génère une sortie fluide pour le navigateur; idéal pour le prototypage rapide, mais reste un travail en cours.
Chacune de ces étapes modulaires prend en compte un aspect du processus de conception, l’isole et implique fortement le client, lui donnant ainsi l’occasion de signer à chaque étape sans affecter les autres..
Notez que ceci est un flux de travail suggéré, rien n’est écrit en pierre en ce qui concerne le design et il est souvent plus complexe que ces étapes générales. Ce qui m'amène à mon point de clôture.
Tout processus de conception est extrêmement personnel et ce qui fonctionne pour quelqu'un d'autre ne fonctionnera pas nécessairement pour vous. De nombreuses personnes ont appelé à la fin de la conception Web dans Photoshop et à la campagne pour un flux de travail basé sur un navigateur. Le fait est que, si Photoshop fonctionne pour vous, utilisez-le! À la fin de la journée, nous sommes des concepteurs - si nous voulons passer des centaines d’heures de travail à régler les pixels et à peaufiner notre gamme de produits Dribbble, permettons-nous de nous en servir.!
Vous souhaitez en savoir plus sur Photoshop et ses relations avec la conception Web? Jetez un coup d'œil aux articles ci-dessous.
Accentsconagua