Share
Aujourd'hui, j'ai un festin pour tous les amateurs de réseau! Khoi Vinh (l'une des principales autorités sur les systèmes de grille typographiques dans la conception web) et Peachpit ont accepté de nous laisser publier un extrait du nouveau livre de Khoi sur la conception de grille: Ordering Disorder: Principes de la grille pour la conception Web. Dans cet extrait, il décrira les principes que chaque concepteur devrait garder à l'esprit lors de la conception d'un site Web sur une grille..
La grille est depuis longtemps un outil précieux pour créer de l'ordre hors du chaos pour les concepteurs de tous types - des urbanistes aux architectes en passant par les compositeurs et les graphistes. Ces dernières années, les concepteurs de sites Web ont eux aussi découvert la puissance remarquable que peut offrir la conception en réseau pour créer des expériences utilisateur intuitives, immersives et esthétiques..
Ordering Disorder offre une vision définitive des grilles et du Web. Il fournit à la fois les grandes idées et les techniques classiques du design basé sur une grille. Les lecteurs ne manqueront pas de comprendre parfaitement la puissance des réseaux, ainsi que les outils de conception nécessaires à leur mise en œuvre sur le World Wide Web..
Ce qui suit est un extrait, mais comme vous le lirez, le livre entier est écrit de manière à pouvoir être repris dans n’importe quel chapitre et avoir toujours un sens? donc cela devrait être un endroit parfait pour vous de sauter dans.
Nous avons également un code promotionnel spécial de 35% de réduction pour nos lecteurs qui souhaitent se procurer l'intégralité du livre (à la fin du message).!
Le reste de ce livre est axé sur la création d’une grille, y compris un aperçu des étapes à suivre pour trouver une solution opérationnelle. Avant de commencer, cependant, il est utile de définir les principes que chaque concepteur devrait garder à l’esprit.
Une grille doit être centrée sur la résolution de problèmes puis l’esthétique.. Une grille peut apporter une amélioration esthétique si séduisante à tout design qu'il est tentant de se concentrer sur sa beauté plutôt que sur son utilité. De nombreux concepteurs se préoccupent de la beauté de la grille et du contenu ou de la fonctionnalité nécessaires pour l'insérer, même s'ils sont mal à l'aise ou mal adaptés. Mais les grilles les plus performantes sont construites au service de problèmes bien définis. Qu'il s'agisse de problèmes de communication, d'organisation ou de transaction, une grille tire sa beauté de sa capacité à résoudre ces problèmes..
Une grille est une composante de l'expérience utilisateur. Une grille n'est pas un outil pour imposer un contrôle complet sur l'expérience d'un utilisateur d'un site Web. Une grille est plutôt un cadre dans lequel l'utilisateur peut contrôler ses propres expériences. Les concepteurs ne doivent pas forcer chaque élément et interaction à se produire au sein de la grille, ni permettre à l'expérience utilisateur d'être informée et imprévisible. Il incombe au concepteur de prendre certaines décisions pour l'utilisateur - pas chaque décision, mais suffisamment pour que l'utilisateur puisse atteindre ses objectifs sans entrave. La grille est un outil pour ce travail.
Plus la grille est simple, plus elle est efficace. Les principes décrits dans ce livre peuvent être utilisés pour créer des grilles composées de seize, vingt, voire plus, en toute combinaison de colonnes de largeur uniforme ou irrégulière. Cependant, le fait est que le concepteur doit toujours s'efforcer de créer la grille la plus simple possible. Comme nous le verrons, la précision mathématique est un élément clé d’une bonne conception de la grille, mais son utilité est tout aussi importante. Les formules que vous utilisez pour calculer les unités et les colonnes combinées doivent être assez simples, même assez simples à faire dans votre tête ou à expliquer rapidement à un collègue. Plus un système de grille est simple à utiliser et à expliquer aux autres, plus les utilisateurs bénéficieront de ce système de grille.
Voici donc les principales étapes de la conception d’une solution de réseau:
N'oubliez pas que, même si notre pensée doit être rigoureuse, notre processus ne doit pas l'être. Bien que l’ordre dans lequel j’ai présenté ces étapes m’ait été utile, il se peut que cela ne fonctionne pas nécessairement pour tous.
designer. Toutes les étapes ne doivent pas nécessairement être suivies dans le même ordre, pendant un laps de temps déterminé, d’une manière spécifique ou même du tout. Par exemple, l'étape 3, conception préparatoire, consiste en un ensemble de trois activités différentes
ces tâches sont souvent effectuées simultanément, le concepteur alternant le crayon et le papier, les logiciels et les calculs au dos de l'enveloppe si nécessaire. Ce qui compte, ce n’est pas la répétition par cœur de ces étapes, mais le suivant
les principes d'une bonne conception de la grille tout au long.
Néanmoins, cela vaut la peine de prendre un peu de temps avant de discuter de deux étapes critiques de ce processus. Le premier est la recherche, et le second est le croquis.
Nous jugeons d’abord que le design est vraiment bon, non par sa beauté, son caractère innovant ou son efficacité, mais plutôt par sa capacité à répondre à son problème initial. Les solutions retenues exigent que le concepteur comprenne le problème qui lui est présenté et les contraintes dans lesquelles elle travaille. Le concepteur doit demander et comprendre la réponse à des questions telles que: qui est le public cible, quel est le contexte, quand la solution sera-t-elle trouvée, comment la solution sera-t-elle utilisée - et même pourquoi la solution est-elle nécessaire??
Il peut être difficile de répondre à ces questions, et les réponses elles-mêmes sont souvent peu claires ou difficiles à analyser. Un concepteur doit être persévérant dans sa demande, dans la recherche de réponses correctes et exactes, ainsi que dans un examen approfondi et une compréhension de ces réponses..
Parce qu'une grille peut nous donner une telle avance dans la création de solutions, il peut être tentant de renoncer à cette étape du processus. Une fois qu'un concepteur maîtrise les bases des grilles, il devient beaucoup plus facile de démarrer le processus mécanique de construction d'unités et de colonnes que de faire le dur travail de poser et de répondre à ces questions..
Mais presque tous les problèmes de conception exigent une période d’étude approfondie avant de commencer à chercher une solution. Sans un sens clair du défi à relever, tout travail de conception, y compris le développement du réseau, est effectué en vain. C’est une utilisation du temps beaucoup plus productive pour effectuer des recherches au début d’un projet que pour passer directement à la conception..
Les conceptions basées sur une grille ne sont pas différentes. Plus le problème est complètement étudié, meilleur sera le réseau. Des grilles bien documentées optimisent les options créatives offertes au concepteur. Ils anticipent et évitent également les pièges des grilles prématurément construites: unités et colonnes mal structurées, bonnes pour certains aspects du problème mais insuffisantes pour d’autres, grilles qui ne tiennent pas compte de contraintes qui pourraient ne pas être évidentes au départ, grilles qui s'avèrent tellement impraticables qu'ils doivent être reconstruits à des moments inappropriés, et des grilles inutilisables pour les collaborateurs.
Quel type de contraintes le concepteur doit-il rechercher? Ils se divisent en trois catégories principales:
Bien entendu, les concepteurs vont déplorer le désagrément des contraintes ou peut-être l'épineux des contraintes particulières auxquelles ils doivent faire face. Si seulement ces contraintes étaient levées, si seulement le problème était légèrement différent, alors la solution serait beaucoup plus facile à trouver ou plus élégante par nature.
Cependant, ces contraintes ont un côté positif: elles peuvent, à certains égards, rendre le problème plus difficile, mais elles peuvent également faciliter la conception. Les solutions globales telles que les grilles peuvent souvent tirer avantage d’une structure reposant sur une ou deux contraintes non négociables, exigences immuables qu’il est difficile de modifier au cours du processus de conception. Pour commencer, ils peuvent directement influer sur les proportions d'une grille, la taille même des unités, des colonnes et des régions que le concepteur construit. Ces types de contraintes peuvent sembler limiter les options disponibles pour un concepteur et ont très souvent pour effet d'accroître l'inventivité du concepteur. Plus un problème de conception est ouvert et moins les contraintes sont restrictives, moins un concepteur est susceptible de faire les sauts de logique perspicaces qui caractérisent un grand design. Des contraintes non négociables peuvent aider un concepteur à le faire. Qu'il s'agisse de verrouiller une dimension particulière, un impératif technologique, une unité publicitaire ou tout autre facteur qu'un concepteur doit contourner plutôt que de le modifier à sa convenance, le fait de posséder une seule exigence immobilière peut être extrêmement utile.
Après avoir passé tant de paragraphes à expliquer l’importance d’une recherche approfondie sur un problème, je peux formuler ce point suivant de manière plus succincte: l’esquisse sur papier est un outil essentiel pour la résolution complète des problèmes de conception, et en particulier pour le développement de grilles. Le simple fait de dessiner rapidement et vaguement des combinaisons spéculatives de colonnes et d'agencements potentiels permet de gagner beaucoup de temps et conduit souvent à des solutions de grille beaucoup plus créatives et fertiles que de simplement passer à la conception ou même au codage d'une grille..
Je ne saurais trop insister sur le pouvoir et l'utilité d'utiliser du papier et du crayon à l'ancienne pour résoudre des problèmes, pour réfléchir à des solutions potentielles et pour explorer des idées prometteuses ou même moins prometteuses qui peuvent s'avérer trop coûteuses ou trop longues à tester autrement. En fait, l’aspect le plus important du croquis n’est pas tant de faire des marques sur du papier que de pouvoir passer rapidement en revue de nombreuses idées, à un coût réduit. N'oubliez pas que vous ne vous attendez pas à ce que les esquisses soient plus que de simples esquisses. Les croquis n'ont pas besoin d'être jolis.
Comme mentionné précédemment, il est également important de garder à l'esprit que l'esquisse ne doit pas nécessairement être une phase distincte de la construction d'une grille qui commence et se termine à des points spécifiques. Les esquisses peuvent survenir à n'importe quelle phase du projet, à plusieurs niveaux d'achèvement, bien qu'il soit évidemment plus utile d'esquisser plus tôt, de manière à ce que plus d'idées et de possibilités puissent être traitées très rapidement. Garder un crayon et un bloc de papier à portée de main en tout temps sera une valeur inestimable.
Le vocabulaire qui décrit les différentes composantes d’une grille peut sembler simple, mais il peut aussi être étonnamment peu spécifique. Par exemple: la notion de colonne semble assez simple, mais sur une page basée sur une grille de huit colonnes, un concepteur peut créer une mise en page avec seulement deux colonnes de texte, rendant le sens de ce terme imprécis. Même les ouvrages sur la conception basée sur une grille ne sont pas toujours d'accord sur la terminologie, certains termes utilisés (par exemple, régions, champs) étant absents des autres. Pour les besoins de ce livre, il est donc important d’établir une terminologie commune afin d’aller plus loin dans des discussions plus pratiques sur les grilles..
Le bloc de construction de toute grille, une unité est la plus petite division verticale de la page (c'est-à-dire que les unités sont mesurées en largeur), sur laquelle les colonnes sont construites. Les unités sont généralement trop étroites pour contenir la plupart du contenu textuel.
Les colonnes sont des groupes d'unités, combinées pour créer des zones exploitables pour la présentation du contenu. La plupart des colonnes de texte, par exemple, exigent que deux unités ou plus soient exploitables. Un système de grille de, par exemple, seize unités peut être combiné en deux colonnes de huit unités chacune, ou quatre colonnes de quatre unités chacune, etc..
Les régions sont des regroupements de colonnes similaires qui font partie de la page. Par exemple, dans une grille à quatre colonnes, les trois premières colonnes à partir de la gauche peuvent constituer une seule région pour l'affichage d'un type de contenu, et la colonne restante peut former une autre région..
Les champs sont des divisions horizontales de la page (c’est-à-dire que les champs sont mesurés en hauteur) qui aident un concepteur à cadrer visuellement le positionnement des éléments sur l’axe des Y. Les champs peuvent être calculés de nombreuses manières, mais l’utilisation du nombre d’or est l’une des méthodes les plus efficaces..
Dans la typographie traditionnelle, la ligne de base est la ligne invisible sur laquelle reposent les lettres, par exemple, le bord inférieur d'une majuscule E repose sur la ligne de base, tandis que le descendant d'une lettre p minuscule est inférieur à la ligne de base. La grille de lignes de base est formée par une répétition uniforme, de haut en bas, de lignes de base espacées les unes des autres en fonction de l'interligne ou des interlignes du texte..
Il est notoirement facile de confondre ces concepts (une unité peut être considérée comme une division horizontale ou verticale d’une page, en fonction du point de vue de son auteur). Ce livre fait donc référence à la grille en colonnes (divisions de la page en largeur ) et la grille de base et les régions (divisions de la page en hauteur).
Les gouttières sont les espaces vides entre les unités et les colonnes. Lorsque les unités sont combinées en colonnes, elles intègrent les gouttières entre elles, mais pas l'espace à gauche de l'unité la plus à gauche ni l'espace à droite de l'unité la plus à droite..
Les marges sont l'espace en dehors d'une unité ou d'une colonne. Le rembourrage est l'espace dans une unité ou une colonne. Les marges sont généralement utilisées pour créer des gouttières, tandis que le remplissage est généralement utilisé pour créer un petit encart visible dans un bloc de texte dans une colonne..
Un élément est un composant unique d'une mise en page. Les exemples incluent un titre, un bloc de texte, une photo ou un bouton.
Les modules sont des groupes d'éléments combinés pour former des blocs distincts de contenu ou de fonctionnalités. Un formulaire d'inscription, par exemple, est un module composé de plusieurs éléments constitutifs tels qu'une étiquette, un champ de formulaire, un bouton, etc..
Cela a été un seul chapitre du livre? si vous voulez lire le reste du livre, vous pouvez l’acheter sur peachpit.com. La bonne nouvelle est que nous avons un code promotionnel spécial pour nos lecteurs. Obtenir 35% sur le prix en entrant le code "KHOI"pendant le processus de paiement sur peachpit.com. Oh, et la livraison aux États-Unis est gratuite!
Accentsconagua