Prototypage pour le Web II : visuels pour l'UX et l'image de marque

1. Bande-annonce: Je suis Erika Heins. Je suis concepteur web et développeur web. Je travaille depuis plus de 10 ans sur le terrain à New York. Dans ce cours, nous allons parler de la conception visuelle Web et comment planifier votre direction visuelle, comment l'intégrer dans les choix de couleurs, les choix typographiques, choix d' images, puis comment adapter ce processus pour la conception Web réactive. Ainsi, en créant des collages d'éléments ou des mises en page Frankenstein, puis en allant dans des mises en page réactives spécifiques que vous allez effectuer avec différents utilisateurs et continuer à itérer. À la fin de cela, vous aurez votre tableau d'inspiration et à partir de cela vous aurez créé un collage d'éléments ou une mise en page Frankenstein pour servir de guide pour le reste de vos mises et vous aurez également des mises en page réactives complètes qui vous pourriez remettre à un développeur, ou vous pourriez les amener à la classe suivante et construire vous-même un site Web. Cette classe est Magnifique Web Design : Branding, UI et Visual Prototypes. 2. Introduction: Bonjour, et bienvenue à Magnifique Web Design. Dans cette classe, vous allez faire l'image de marque, conception de l'interface utilisateur et les prototypes visuels d'un site web réactif. Vous pouvez ensuite le remettre à un programmeur ou continuer avec la classe suivante pour le construire vous-même. Vous devez déjà disposer d'un sitemap et d'esquisses ou de trames filaires. Si ce n'est pas le cas, vous pouvez faire la première classe de cette série pour vous aider à planifier ce site. Je vais commencer par cette citation de Scott Adams sur la créativité qui vous permet de faire des erreurs et que le design est de savoir lesquels garder. Donc, ce sera un thème de nous voulons faire beaucoup d'exploration et ensuite avoir beaucoup à choisir comme nous éditons, polir et affiner. Donc, les outils que nous allons utiliser dans cette classe sont Illustrator et Photoshop pour faire des maquettes. Vous pouvez également utiliser Sketch que j'essaie maintenant et j'aime beaucoup, mais c'est peut-être un sujet pour une future classe. Tweette-moi si tu veux en savoir plus. Alors, commençons. Ok, alors allez-y et mettez-vous en place. Téléchargez Sketch si vous ne l'avez pas. Vous pouvez utiliser Illustrator ou InDesign ou une autre application de conception de votre choix, mais je vais recommander Sketch en raison de la facilité avec laquelle il se convertit en développement web et les outils qu'il possède. Donc, obtenez aussi un compte Google Drive si vous en avez besoin, puis allez-y et obtenez un compte icebergs.com pendant que vous y êtes. C' est vraiment utile pour faire des moodboards et des choses. 3. Direction visuelle: D' accord. La première chose dont nous avons besoin pour notre design visuel Web est un sens de l'orientation. Nous voulons réfléchir à ce qui convient à nos utilisateurs particuliers. Alors, comment allons-nous faire ça ? Il est tentant de regarder les tendances les différentes façons dont l' illustration, l'architecture, la couleur, ont reflété la culture de l'époque et la technologie de l'époque à travers l'art nouveau, leur art déco, à travers le Bauhaus, et maintenant nous le voyons même avec le web design. Les gens copient toujours Apple en tant que leader dans le bon design, en particulier dans les logiciels et le matériel. Mais si nous regardons en arrière, nous voyons que nous ne pouvons pas imaginer copier cela maintenant, mais cela reflète simplement l'esprit du temps. Par exemple, quand Apple a commencé à faire cette surface réfléchie en miroir sous l'iPhone, vous avez commencé à voir que sous chaque produit unique qui a été présenté sur le web, et même chose avec leurs barres de navigation, les étaient des styles communs que vous avez commencé à voir tous ces tutoriels photoshop sur la façon de recréer cela. Puis les grilles sont finalement devenus possibles sur le web et beaucoup de perspicacité a été copié une tonne pour les gens qui essayaient d'explorer comment utiliser une grille, et maintenant le design plat est les dernières tendances. Donc, LayerVaults était l'une des exécutions les plus claires de ce style, et ils ont donc eu des kits d'interface utilisateur copiant leur site entier. Beaucoup de gens essaient juste de faire ce qui semble actuel, et ce qui semble frais et moderne. Donc, il est utile à un point parce que évidemment une tendance à servir l'appétit culturel actuel. Si vous menez cette tendance, vous montrez votre goût, vous montrez que vous êtes moderne, que vous comprenez un peu ce qui est actuel et cool dans la culture d'aujourd'hui, et si vous suivez cette tendance, vous êtes un peu en essayant de se camoufler sur cette image de marque comme celle d'Apple. Vous essayez de dire que vous êtes aussi sophistiqué ou que vous aviez un design aussi bon que les pommes. Donc, vous essayez de gagner une partie de la même réputation. Mais bien sûr, ils sont un peu boiteux aussi parce que lorsque vous suivez les tendances, cela rend votre travail moins distinctif, il date aussi à une période donnée, et émousse aussi parce que vous commencez à copier d' autres sources visuelles au lieu d' essayer vraiment de trouver un nouveau langage visuel de votre propre. Donc, vous voulez partir d'un sens de votre propre marque, quelles sont ses valeurs, quelles sont ses personnalités, et donc la classe précédente de cette série a passé par quelques questions détaillées qui vous aideront à articuler cela, des choses comme une carte de personnalité ou vos méthodes d'engagement que vous pourriez utiliser. Vous avez donc besoin d'une certaine idée de ce qu' est votre marque et de ce que vous êtes avant de passer au design visuel. Puis une fois que vous êtes là, la première étape pour moi est toujours un tableau d'inspiration où je commence à essayer de trouver où je commence à essayer de mettre mes documents dans un format numérique. Donc j'ai besoin de capturer des couleurs, je dois capturer des photos, je dois commencer à voir toutes ces choses ensemble pour pouvoir commencer à visualiser ce que mon site Web va prendre forme. Donc, Dropmark est un excellent outil pour cela. Voici une collection que je faisais pour le site de protestation, et voici une autre récente de plus d'une marque de style de vie, et vous pouvez voir que certains d'entre eux je suis juste en train de saisir pour la couleur et certains d'entre eux sont que je suis saisir pour exemples de photographie. Ainsi, par exemple, nous voulons que les livres qui se vendaient soient blancs et que nous voulons les montrer sur un fond silhouette. Cela permet à mon client de visualiser à quoi il va ressembler. Mais d'autres choses, je ne montre pas toujours des tableaux d'humeur ou des tableaux d'inspiration aux clients car on ne sait pas pourquoi vous avez choisi chaque image. Donc, par exemple, cette robe sur la droite, je choisis parce que j'ai la couleur bleue que je veux utiliser. Mais si je montrais ce tableau d'humeur à une cliente, elle pourrait penser que nous allons montrer la photographie de mode sur le site ? Ils ne comprennent pas toujours. Donc, vraiment votre conseil d'inspiration devrait être juste pour vous afin que vous ayez des couleurs, que vous avez des polices de caractères, vous commencez à avoir une idée de la famille dans laquelle votre site va tomber. Alors commencez là, j'aime Icebergs parce que encore une fois il vous permet de mettre en évidence certaines photos comme des favoris et il vous permet de les regrouper, et vous voulez collecter un tas de photos que vous pourriez utiliser, essayez d'en obtenir de vraies. Donc, si vous savez que vous avez un tas de photos d'utilisateurs qui vont aller sur votre site, allez-y et mettez-les dans vos tableaux d'inspiration, afin qu'ils commencent à faire partie du mix. Si vous ne le faites pas, alors allez-y et cherchez sujet similaire tourné de la manière que vous prévoyez de les tirer. Vous voulez commencer à collecter des couleurs. Donc, tout comme vous naviguez sur le web, vos blogs préférés, vos sites préférés, il suffit de chercher la couleur et saisir toutes les images qui ont l'air bien sur le web. Design d'impression, design d'intérieur, design web, tous ont des façons distinctes dans lesquelles vous utilisez la couleur. Donc, vous voulez essayer de trouver des actifs qui sont déjà dans un format numérique, afin que vous sachiez que ces couleurs vont bien rendre encore à l'écran. Ensuite, vous voulez également commencer à collecter une typographie qui parle dans des tons similaires à votre voix de marque. Ainsi, vous pouvez chercher la typographie dans la rue, vous pouvez regarder la signalisation, vous pouvez regarder l'emballage. Commencez simplement à visualiser ce qui va refléter, encore une fois, votre personnalité racine et les valeurs de votre marque. 4. Couleur expressive: OK, en passant à la couleur. J' aime vraiment commencer Visual Design en décidant ma couleur. Cette marque est-elle claire ou foncée ? Lumineux ou doux ? Parce que les couleurs que vous choisissez créent une forte impression non verbale. Pensez donc à la célébrité que vous pourriez choisir de représenter votre marque. Sont-ils silencieux ou bruyants ? Sont-ils frais face ou altérés ? Dans les lignes directrices de votre marque, vous voulez une description de votre palette de couleurs générale, qu'il s'agisse de pastels, de couleurs vives, de neutres ou autre. Donc, au fur et à mesure que nous entrons dans les détails, nous devons comprendre notre médium. Donc, la chose qui me souffle encore après des années et des années dans le domaine est juste RVB contre CMJN, couleur additive versus soustractive. Que sur l'écran, rouge bleu et vert ensemble faire blanc. C' est la lumière qui brille en fait hors de l'écran et dans vos yeux, ce n'est pas la lumière qui brille sur le papier et qui est absorbée par l'encre. Donc, je pense à la conception web comme une opportunité d'utiliser beaucoup de couleurs plus vives que vous n'avez pas autrement. CMJN ne peut pas faire ces bleus et verts d'Internet lumineux que vous pouvez faire en RVB. C' est comme les couleurs libres, vous devez payer beaucoup d'argent et les frais Pantone sont dans les encres pour obtenir ces couleurs particulières dans l'impression. Donc, je pense à ce design beaucoup comme les artistes travaillant dans la lumière. C' est comme Dan Flavin faisant des sculptures avec de la lumière, James Turrell, ce sont quelques-unes des références pour la façon dont je pense du web design. Une bonne idée est de garder une roue de couleur près de vous lorsque vous essayez de choisir des couleurs afin qu'il joigne votre mémoire, sorte que vous n'êtes pas seulement comme le bleu, le rouge, les couleurs que vous pouvez nommer, mais que vous voyez réellement toutes ces bizarre entre les couleurs qui n'ont pas de noms. Donc, il y a toutes sortes de formats différents pour les roues de couleur, vous pouvez simplement chercher sur Internet et voir lequel vous parle, et encore une fois chercher un qui est RVB qui est fait dans un support sur lequel je vais travailler. Et regardez-en un pendant un certain temps et voyez quelles couleurs semblent représenter votre marque. J' aime choisir une couleur comme couleur de base. Alors, voyez à quelle couleur vos yeux ne cessent de revenir. La couleur est une chose du cerveau droit, c'est visuel, ce n'est pas verbal, mais j'aime toujours aller à gauche et considérer son symbolisme aussi. Donc, vous pourriez penser à toutes les choses que vous avez jamais vues qui étaient bleues. Comment ils vous font sentir ? C' est le symbolisme agrégé d'une couleur. Et évidemment, il y a des différences culturelles avec la couleur, donc vous devez comprendre cela et faire des recherches sur votre public. Donc, passons juste en revue quelques-unes des principales familles et leurs connotations pour autant que nous les connaissons dans l'Ouest par ordre de popularité. Ces étapes sont toutes de Stephen Sidelingers manuel couleur. Les diagrammes proviennent du site Web de couleur parlant graphiquement et d'une étude de couleur Kissmetrics. Donc, le bleu est la couleur la plus appréciée des adultes, mais c'est seulement le numéro cinq avec les enfants, ce qui est drôle. C' est cool, c'est calme, c'est sûr, c'est classique. Vous aurez rarement, sinon jamais, un client rejette en bleu. Il est assez lisible sur blanc ou comme type inversé. Le rouge est le prochain plus populaire, il est chaud, il est vibrant, il est fort, il est accrocheur, il est idéal pour les appels à l'action ou comme couleur d'accentuation. Vous obtiendrez toujours le plus grand nombre de clics sur les gros boutons rouges. Il est également censé séduire les papilles comme les fruits rouges sucrés, ce qui explique pourquoi beaucoup de marques de bonbons sont rouges. Il est lisible sur le blanc, il n'est pas si lisible sur le noir. Le vert est le numéro trois avec des adultes, mais il n'en est que six avec des enfants. Il y a une grande différence entre les verts jaunes et les marins bleus, mais en général, on pourrait dire que c'est naturel et vivant et qu'il est assez lisible. Le violet est le numéro quatre dans l'ensemble, mais c'est la seule couleur qui a une forte différence pour les hommes et les femmes. Dans une étude, 23 pour cent des femmes ont dit que le violet était leur couleur préférée, mais zéro pour cent des hommes. Il est souvent utilisé pour transmettre la spiritualité, la royauté ou la relaxation comme la lavande. Le jaune est le numéro six avec les adultes, c'est gai, excitant et attirant l'attention. D' après mon expérience, c'est très polarisant. Soit les gens aiment le jaune, soit ils le détestent. Si je veux utiliser le jaune pour une marque, j'ai toujours demandé au client d'abord, comment vous sentez-vous du jaune ? Il est super lisible avec du noir, c'est pourquoi il est utilisé dans les panneaux d'avertissement. Sarcelle est notre dernière couleur, qui est incluse comme un rappel pour regarder les couleurs entre les deux, est pratique pour le web, vous pouvez la pousser vers le bleu ou le vert et l'assortir à presque n'importe quoi. C' est apaisant, c'est clair et affable. Encore une fois, voici l'étude du violet était la seule couleur avec un écart majeur entre les hommes et les femmes. Donc, c'est quelque chose à considérer si vous avez été dirigé de ne pas rendre la marque trop féminine, mais ils vous disent d'utiliser le violet comme couleur de leur marque, vous pourriez avoir un peu de déconnexion là-bas. Orange est un autre, il est numéro cinq avec des adultes et numéro quatre avec des enfants, il est considéré comme flamboyant, chaud et lumineux mais dans une étude de 2011, c'était la couleur la moins préférée de 22 pour cent des hommes et 33 pour cent des femmes. Et c'est aussi la couleur vue le plus souvent est bon marché ou peu coûteuse, ce qui pourrait avoir quelque chose à voir avec elle. Mais il semble entrer et démodé parce que c'est une couleur contrastante au bleu. Donc, il est utilisé par les marques qui veulent être considérées comme une alternative. Il y a certaines banques qui utilisent l'orange parce que toutes les banques utilisent le bleu. Donc, c'est quelque chose à considérer, mais remarquez simplement si c'est bon pour vous en ce moment de l'histoire. La couleur est également un moyen d'apporter de l'émotion à vos mises en page. Donc, voici un graphique amusant de la façon dont différentes entreprises choisissent la couleur pour transmettre différents sentiments. Prenez-le avec un grain de sel, mais il y a une raison pour laquelle tant de banques utilisent le bleu, et cela ajoute de l'émotion à vos dessins ou ce qui pourrait être la raison pour laquelle certaines personnes en ont peur. Il y a aussi quelques études qui disent que les femmes nomment beaucoup plus de variations de couleur que les hommes. Donc, si vous choisissez beaucoup de neutres, vous pourriez avoir différentes personnes dans votre audience les ramasser ou non. Encore une fois, j'aime choisir une couleur comme base. Donc, je pense que c'est comme le sentiment principal que j'essaie de transmettre avec mon image de marque. Donc, disons que je choisis ce bleu populaire. Tu peux t'arrêter là. Si vous avez juste une couleur avec le noir et le blanc, cela vous donne beaucoup de choses à travailler avec. Voici le guide de voix et de tonalité Mailchimps et vous pouvez voir qu'ils font beaucoup avec une seule couleur. Ils sont en fait si vous descendez le navigation gauche de ce site, ils utilisent une couleur différente pour chaque section. Donc, cela crée un peu plus de vivacité avec cet arc-en-ciel de couleurs mais pour chaque mise en page, ils vont bien avec un seul. Donc, à partir de votre couleur de base, si vous voulez aller plus loin dans l'ordre de complexité voici quelques options, vous pouvez ajouter des teintes et des nuances, vous pouvez ajouter des couleurs analogues, vous pouvez ajouter des couleurs contrastées, ou vous pourriez même essayer des couleurs discordantes. Donc, les teintes et les nuances, 0-255 est un très bon outil où il vous montre ici quelques codes hexadécimaux pour les teintes et les nuances de la même couleur. Et cela est utile parce qu'une couleur qui est bonne pour un bouton n'est pas la même teinte que celle qui va être bonne pour une couleur d'arrière-plan ou pour la couleur de bordure. Donc, vous avez souvent besoin en particulier dans une conception d'application par rapport à la conception de site, vous avez souvent besoin de plus de couleurs que vous le pensez et vous avez besoin de beaucoup de teintes et de nuances de la même couleur. Il y a aussi des outils qui suggèrent des couleurs analogues, des couleurs contrastées, combinaisons que vous ne trouverez pas nécessairement par vous-même et que vous ne choisiriez pas. C' est une sorte de rouge brique et comme un bleu paon tealish, comme vous ne penseriez pas à ces couleurs hors main, mais quand vous changez dans les bons outils de quelqu'un qui vous aidera à les trouver. Ian Storm Taylor a un bon article intitulé « Never Use Black » sur la façon dont vous pouvez utiliser ces teintes et nuances pour renforcer votre marque, mais l'application Facebook est toutes les nuances de bleu Facebook au lieu de noir ou gris moyen. Ils utilisent juste une autre saturation. Encore une fois, même si c'est le cas, vous avez généralement besoin de plus de couleurs que vous ne le pensez. Conception de l'application, vous avez des faits saillants , vous avez des alertes, vous avez des erreurs, même dans les thèmes de texte sublimes il y a encore beaucoup de couleur qui se passe même si vous pensez d'abord votre première impression est que c'est juste une application grise. Slack est un très bel exemple de couleur aussi qu'ils utilisent cette prune nuances de prune pour leur nav latéral avec des accents de cette couleur saumon et bleu sarcelle légère. Donc, vous ne remarquez pas vraiment après que vous l'utilisez pendant un certain temps, il se sent juste comme la lumière du soir ou quelque chose, mais il crée vraiment une ambiance vraiment unique pour cette application. Voici un autre beau site de Urban Ministries of Durham, utilise également la couleur pour ajouter beaucoup d'émotion et de beauté à des objets bon marché très quotidiens. Voici un site touristique à Bruges. Donc, vous verrez qu'ils utilisent des couleurs vives sursaturées pour transmettre le plaisir que vous allez avoir pendant vos vacances et combien cet endroit est actif, combien il y a à faire. Ainsi, la couleur est utilisée pour renforcer le sentiment ou l'importance du site. Encore une fois, les gros boutons rouges sont toujours un appel clair à l'action et en voici un avec une utilisation audacieuse du jaune comme fond qui vous donne un tout, c'est un sentiment très différent de juste un fond blanc uni. XOXO est une conférence pour les designers et autres créateurs et leur site initial était aussi fou dégradé violet ou bleu qui transmis l'idée que c'est un endroit pour les gens créatifs. La couleur augmente souvent les clics. Ainsi, les gens qui font des bannières publicitaires vous diront ceci que plus vous les faites, plus ils obtiendront de clics. Donc, vous pouvez reprendre cela avec un grain de sel mais ajouter de la couleur à votre design augmente souvent les clics. La dernière mise en garde est que, bien sûr, les couleurs ne sont pas les mêmes sur toutes les plates-formes, vous voudrez les tester sur Mac et PC. Sur PC, vos couleurs ont tendance à être un peu plus saturées, un peu plus sombres. Mac ont tendance à être un peu plus large, peut être un peu lavé. Donc, soyez prudent si vous utilisez des couleurs vraiment claires sur un Mac et aussi être vraiment particulièrement avec les oranges et les bruns. Je n'oublierai jamais un site que j'ai conçu pour un camion à café et je suis fièrement allé le montrer à quelqu'un sur un PC et ça avait l'air horrible. Donc, toujours tu veux être prudent avec tout ce qui est dans la famille jaune et verte. Donc, juste pour référence, nous allons commencer à faire ce fichier d'actifs. Donc, dans Illustrator, il est agréable d'avoir un gros fichier avec toutes les pièces courantes que vous allez utiliser pour la conception de votre site. Donc, voici Teehan et Lax ont publié beaucoup de modèles et kits Photoshop et voici un exemple dans un long billet de blog qu'ils ont écrit décrivant le processus de conception pour le moyen, ce qui vaut bien la peine d'être lu. Voici un exemple de leur fichier d'actifs d'interface utilisateur qu'ils ont créé. Ainsi, lorsque vous commencez à choisir vos couleurs, collez-les dans votre fichier d'actifs Illustrator et commencez à voir comment elles s'intègrent. Alors, lancez un nouveau fichier dans Sketch, vous souhaitez utiliser le modèle de conception Web afin qu'il dispose des différents tableaux d'art pour chacun de vos points d'arrêt réactifs et que vous allez créer une palette de couleurs dans le page des symboles. Vous verrez deux pages dans le document par défaut, il y en a une où vous allez créer vos mises en page réelles , puis une seconde qui contient tous les symboles. Si vous le faites dans Illustrator, vous pouvez créer un fichier de ressources distinct ou simplement un tableau graphique d'actifs ou de symboles dans votre fichier. Vous pouvez également utiliser certains outils Web comme Kuler ou ColorLovers pour rechercher et configurer des palettes si vous le souhaitez. 5. Typographie expressive: Ensuite, nous allons travailler sur la typographie qui exprime la personnalité du site. Alors, comment choisissons-nous les polices de caractères ? Il y a des polices de caractères qui sont tout simplement inappropriées. typographie pratique en a un bel exemple. Un script de fantaisie serait inapproprié si vous roulez 80 miles à l'heure, et de même, il y a quelque chose qui ne sera pas lisible à l'écran. La lisibilité signifie que vous pouvez réellement distinguer la forme de chaque lettre. Donc, lorsque vous regardez vos mises en page dans Illustrator ou un autre programme vectoriel, elles sont toutes parfaites, mais lorsque vous les rendez sous forme de bitmap à 72 ppp, vous commencez à voir où l'anti-aliasing essayant d'ombrager cette grille de pixels ne fait pas vraiment la forme de lettre justice. On ne travaille pas dans la pierre, on ne sculpte pas des lettres avec un ciseau. On les peint sur du papier. Nous devons comprendre notre médium. On ne sculpte pas des lettres en pierre avec un ciseau ou on les peint sur du papier avec un pinceau. Nous obtenons des grilles de pixels avec du code. Certains visages sont horribles sur une grille de 72 ppp. anti-crénelage tente de rendre la rondeur ou les traits qui sont plus fins qu'un pixel, mais cela ne fait pas la justice réelle de la forme de lettre. Les qualités qui rendent Garamond ou Bodoni spécial sont perdues à basse résolution. Une police Web lisible a tendance à avoir des formes droites, une grande hauteur x, des compteurs ouverts et un poids de ligne uniforme. Ceci est le plus important pour les étiquettes de corps de texte et d'autres petits éléments, une taille plus grande que vous avez plus de flexibilité. écrans haute résolution modifient toutes ces règles, mais ils ne sont pas encore universels, donc nous devons toujours reconnaître 72 ppp. La grille de pixels est également la raison pour laquelle vous voyez si peu d'italiques sur le Web. La ligne diagonale ne semble tout simplement pas très bonne à 72 ppp. Lucy de Grant n'offre même pas d'italique du tout. italiques serif ont été conçues comme des visages complémentaires avec beaucoup de caractère distinct. italiques sans empattement sont essentiellement des versions inclinées. Donc, en général, ils ne donnent pas assez d'importance. Lorsque vous définissez vos polices de caractères et que vous choisissez des polices adaptées à votre marque, pensez simplement à la même topographie que vous auriez pu apprendre en impression ou en graphisme. Si vous souhaitez qu'une ligne de texte soit lisée comme ligne de division ou que les majuscules se distinguent comme formes géométriques, vous pouvez utiliser toutes les majuscules. Si vous voulez qu'il soit plus lisible dans les petites tailles ou pour quelqu'un avec la vue qui n'est pas si bonne, les ascendants et les descendants en minuscules donnent une silhouette plus distincte qui est plus lisible. Bien sûr, vous pouvez choisir des polices ou des polices pour des raisons pratiques qu'une police condensée vous permet d'adapter beaucoup plus de mots dans le même espace. Les titres peuvent être un peu plus aventureux parce que vous travaillez avec eux à des tailles plus grandes. Chuck Walton a une très belle série d'articles où il joue avec le titre. Différentes conceptions des titres pour chaque article. Jason Santa Maria explore également la conception éditoriale unique pour chaque article sur son site, et y compris la série de grammes de bonbons voici une de Jesse Arrington où elle écrit le titre en bonbons. Donc, rappelez-vous que la typographie peut également avoir lieu en dehors de l'ordinateur. Si vous êtes à la recherche de type pour refléter une certaine période ou un certain sentiment, vous pouvez regarder le projet côté Jason appelé Typedia, où il s'agit d'une encyclopédie entière et vous pouvez trier les polices par designer, par période historique, par et vraiment avoir une idée d'un niveau beaucoup plus profond d'informations sur une police de caractères. Nous avons de la chance maintenant parce que nous pouvons maintenant héberger ces polices de caractères sur le Web. Avant dans l'ancien temps du Web, nous devions exporter chaque titre de fantaisie comme une image et le télécharger sur le serveur avec le reste de nos fichiers, mais maintenant il y a beaucoup d'entreprises qui ont compris avec les exigences techniques et les exigences en matière de licence pour le faire pour nous. Vous pouvez regarder la typographie du nuage qui a des polices Web qui ont l'air bien même jusqu'à neuf pixels italiques. Vous pouvez regarder Typekit qui a mis en place beaucoup de grandes listes pour des alternatives aux visages de type commun ou certains des favoris de la foule. Vous pouvez regarder MyFonts où vous pouvez parcourir une énorme bibliothèque de polices Web que vous pouvez héberger sur votre propre serveur, puis Google Fonts est un moyen rapide et facile d'utiliser beaucoup de polices open source et de les inclure sur votre avec une seule ligne de code. Bien sûr, il y a des problèmes inter-plateformes avec le type 2. Donc, sur la gauche est notre version PC de la même police qui est sur la droite et vous pouvez voir qu'ils ne ressemblent presque même pas. Donc, avec chaque police de caractères que vous choisissez, vous avez vraiment besoin de le tester sur un navigateur Mac et sur différentes versions d'Internet Explorer et sur Firefox, les anciennes versions de Firefox, mais Dieu merci Typekit nous permet de tester tous tout cela en un seul endroit. C' est donc un autre endroit idéal pour commencer à choisir des polices de caractères Web pour cette raison. Vous aussi lorsque vous écrivez votre CSS ou que vous le spécifiez pour votre programmeur, vous voulez spécifier quelques repli. Donc, avant que votre police Web ne se charge ou au cas où elle ne se charge pas, qu'utiliseriez-vous à la place. Donc, ce sont des piles de polices, donc je pourrais dire utiliser Franklin Gothic medium mais si ce n'est pas disponible utilisé Franklin Gothic, bla bla bla, repli à Verdana ou autre chose. Vous voulez bien sûr choisir des polices qui reflètent la personnalité de votre marque et les caractéristiques les plus importantes. Pensez donc à la personnalité d'une police de caractères. Voici un excellent site appelé Thank a Type Designer à propos de ce que les concepteurs de marque venaient d'utiliser par défaut les polices système et de voir à quel point ces logos seraient différents. Seraient-ils vraiment le même attrait universel et durable s'ils étaient simplement mis dans des polices standard de stock ? Alors, faites quelques recherches et réfléchissez vraiment à la façon dont vous pouvez transmettre les valeurs de votre marque. Voici un site qui fait de la Chine vintage et donc ils utilisent titres peints à la main pour transmettre le charme artisanal de leur poterie. BK Swiss ou BX Swiss utilise Helvetica pour véhiculer la neutralité et le modernisme. Use All Five utilise avant garde, sans empattement pour montrer leur modernité et l' utiliser avec transparence pour transmettre un sentiment de mystère. Essence utilise didot pour regarder à la mode et classique. La santé des Oscars utilise un serif de dalle pour paraître humain mais encore plus averti du Web. I'm Not There, le film a utilisé la typographie grunge qui est à chaque fois que vous êtes découper ou de détester le genre pour relayer le thème des films de la dissolution. Ensuite, la dernière chose est qu'une fois que vous avez choisi certaines polices de caractères et que vous travaillez avec les mises en page réelles, il y a des préoccupations pour la lisibilité, c' est-à-dire la rapidité ou la facilité de lecture du texte. Donc, en général, il y a une certaine longueur de ligne qui est considérée comme lisible et certaines personnes disent qu'elle est comprise entre 45 et 75 caractères. Certaines personnes disent que vous pouvez aller jusqu'à 90 et les vitesses de lecture ne diminuent pas , mais rien de plus long que cela et il est considéré comme cause de fatigue pour l'œil d'avoir à voyager jusqu'au début de la ligne suivante pour trouver par où commencer. Donc, ce que vous pouvez faire, c'est une astuce de Trent Walten à nouveau, c'est de déposer un caractère de marqueur après 45 caractères, puis d'en déposer un autre après 75 ou 90, puis aussi longtemps que votre ligne se casse entre ces deux marqueurs, vous savez que c'est une bonne longueur pour votre paragraphe. Ensuite, si vous faites des colonnes plus étroites, vous savez que vous pouvez resserrer le début, mais une colonne plus large va avoir besoin d'un peu plus de plomb parce que l'œil doit avoir un peu plus d'espace pour le faire revenir au début de la ligne longue suivante. Si vous assommez le type, vous pourriez avoir besoin d'un poids plus léger que sur votre texte normal sur un fond blanc qui est le contraire de l'impression parce que encore une fois, le blanc est clair qui brille dans vos yeux, ce qui est en train de manger dans le type sombre où est comme si vous imprimiez cette mise en page, le noir serait de l'encre, qui saignerait dans le type knock-out. Donc, c'est l'inverse. Vous voulez vous assurer qu'il y a un contraste adéquat pour éviter la fatigue oculaire. Il y a des outils dans la palette des développeurs qui vous aideront à tester cela une fois que vous avez un prototype HTML, mais essayez simplement d'utiliser votre jugement lorsque vous faites des maquettes que gens ne vont pas être difficiles à lire. Une dernière chose est que le soulignement est une efficacité de l'âge de la machine à écrire. Cela réduit la lisibilité parce que vous perdez. Si vous plissez les yeux, vous pouvez voir que vous ne pouvez pas voir les descendants dans ce paragraphe de texte aussi lorsqu'il est souligné. Ainsi, les soulignements étaient seulement autour pour les machines à écrire et vous pouvez utiliser la couleur, vous pouvez utiliser l'audace. Il existe d'autres façons d'indiquer les longueurs et de toujours avoir votre site être très utilisable. Même le groupe de recherche de Jacob Nielsen, qui est le principal cabinet de recherche sur la convivialité, a retiré les soulignements de leur longueur. Donc, tout comme Google l'a fait récemment. Donc, si quelqu'un essaie de vous dire que vous devez souligner vos liens, vous pouvez leur donner le groupe Nielsen Norman comme réfutation. Ok, donc, maintenant nous allons mettre en place notre système de type afin de rechercher et de choisir quelques polices de caractères qui pourraient servir à votre marque, puis aller dans votre page de symboles ou votre fichier d'actifs et tester quelques échantillons. Voyez comment ces polices fonctionnent sous forme de titres, de paragraphes et de légendes. Vous pourriez avoir besoin de plus d'un pour servir des objectifs différents. Essayez-les également sur les onglets de boutons et les éléments interactifs. Vous pouvez également essayer Typecast ou Typekit pour voir à quoi ces visages vont vraiment ressembler dans le navigateur. 6. Des images puissantes: La dernière pièce majeure de notre design visuel est l'imagerie. Les photographies bien choisies peuvent porter un dessin. Les images racontent votre histoire à travers les langues avec rapidité et émotion. Ces photographies de Rosie Holtom de personnes sans-abri comme elles veulent être vues complètement changé l'histoire dans la façon dont vous percevez la communauté des sans-abri. Mais avant de vous lancer dans la recherche d'images, assurez-vous d'avoir rassemblé vos pensées. Revenez aux directives de votre marque et prenez quelques notes sur le type d'images que votre marque pourrait capturer. Serait-ce des milieux atmosphériques ou des portraits personnels ? Délicieuses natures mortes ou illustrations charmantes ? Souhaitez-vous montrer des modes de vie ambitieux ou peut-être des cartes ? Et heureusement vous, le web est enfin à la bande passante où ces images se chargeront en millisecondes et non en minutes. Http signifie protocole de transfert hypertexte qui était tout ce qu'il pouvait gérer dans les premiers jours, mais nous voyons maintenant de plus en plus de sites raconter leurs histoires à travers des images et même des vidéos d'arrière-plan comme celle-ci. Si vous n'avez pas le budget de temps ou l'accès à la photographie personnalisée, il y a des ressources en ligne qui peuvent beaucoup aider. Mais n'excluez pas la possibilité d'embaucher un photographe et de prendre des clichés professionnels et personnalisés, ils vous serviront bien pendant de nombreuses années. Dans le fichier de ressources cependant, j'ai répertorié certains de mes endroits préférés pour la photographie open source et réutilisable. Vous pouvez également utiliser google images pour rechercher et filtrer les images sur l'un de ces sites open source en plaçant le site deux-points, puis url en face de vos termes de recherche. Les photographes mettent beaucoup de travail dans leurs images. Encore une fois, assurez-vous d'avoir les droits appropriés pour les images que vous choisissez. Mais bien sûr, vous allez devoir faire face à de mauvaises images. Si vous organisez un événement, ils n'ont peut-être que des photos de l'année dernière, vous pourriez avoir un coup de tête bizarre et quelqu'un refuse d'en prendre un nouveau. Donc tu vas devoir t'occuper de ça. Le numéro un est le recadrer. Essayez de trouver les meilleures parties de la photo et concentrez-vous sur cela. Vous pouvez également brouiller le tout et l'utiliser comme photo d'arrière-plan et mettre du texte sur le dessus. Vous pouvez également trouver des filtres photoshop particuliers ou styles de coloriage qui pourraient rendre toutes les images de votre site avoir une sensation de cohésion, ou vous pouvez passer du temps et le retoucher. Assurez-vous d'établir un budget pour cela, car c' est la plus longue de l'une de ces options. L' autre moitié de l'imagerie est l'iconographie. Regardez les symboles définis pour un excellent exemple de la facilité avec laquelle cela peut être utilisé pour travailler dans vos conceptions. Un simple ensemble de sémantique, donc si vous avez tapé le mot « amour », il se convertit en cœur, mais un lecteur d'écran va toujours voir le mot amour et être capable de le lire aux aveugles. Il existe également des services comme iComoon où vous pouvez créer votre propre police d'icônes, si vous créez un ensemble personnalisé de symboles pour un site. Il y a aussi Iconic qui a un nouvel ensemble d'icônes conçues avec la lisibilité à l'esprit, et nous avons maintenant la possibilité d'utiliser svg. Donc, à partir d'illustrator, si vous concevez vos propres illustrations, vous pouvez réellement les enregistrer en tant que fichiers vectoriels et servir ces vecteurs sur le web afin que vous n'ayez pas autant à vous soucier des résolutions bitmap. Et tout comme la typographie, les icônes ont aussi des problèmes de lisibilité. Assurez-vous donc que vos icônes sont bien rendus exactement à la taille que ce que vous prévoyez de les utiliser. Alors, allez trouver les images que vous allez utiliser sur votre site. Vous pouvez rechercher ou photographier votre photographie et encore une fois j'ai fourni un tas de ressources pour trouver photos stock ou des photos open source dans la liste des ressources pour cette classe, et puis vous allez de l'avant et retoucher ou recadrer ou filtrez-les comme vous le souhaitez pour votre site, afin que vos maquettes aient un aspect réaliste. Allez-y et recherchez ou concevez vos icônes, pour trouver les icônes que vous souhaitez utiliser, la police d'icônes que vous pouvez utiliser et placer tout cela dans la page de votre symbole ou votre tableau d'art des actifs afin que vous puissiez commencer à voir comment tout regarde ensemble. 7. Conception réactive: Très bien, nous avons fini nos actifs visuels et nous sommes prêts à aller de l'avant avec le design. Mais maintenez là avant de sauter directement dans les mises en page parce que la conception web réactive change beaucoup de choses. Notre lecture de fond, si vous n'avez pas déjà parcouru ces livres, est Responsive Web Design d'Ethan Marcotte et Mobile First de Luke Wroblewski. Alors, qu'est-ce que ce web responsive ? Eh bien, en gros, quand nous avons commencé à avoir un million d'appareils différents à concevoir, nous avons commencé à réaliser que les choses qui semblaient bien dans nos mises en page de bureau ne se traduisaient pas nécessairement bien en mobile. Ainsi, un beau site Web de bureau quadrillé nécessitait un zoom, un défilement et un clic pour accéder à la page suivante. Ainsi, la conception web réactive remodelant notre mise en page pour s'adapter au conteneur pourrait rendre les choses à un seul clic. Donc, nous avons commencé à réfléchir davantage aux grilles et plus mise en page de réaménagement et à la façon dont elles seraient appropriées pour chaque appareil, mais nous avons également dû faire face à une multiplicité de nouveaux matériels et de nouveaux appareils chaque mois. Ainsi, les processus de conception ont changé à la suite de cela. Je suis passé à ce que j'appelle les mises en page Frankenstein qui sont des combinaisons de toutes les pièces principales de la page. D' autres personnes ont parlé de collages d'éléments, qui sont une idée similaire et tout vient du fait qu'un site est tellement plus complexe que nos choses précédentes. Une affiche pour laquelle vous n'auriez pas besoin d'un guide de style. C' est une chose. Tu as totalement le contrôle. Vous l'envoyez à l'imprimante et c'est fait. Un livre, tu devais commencer à penser aux systèmes. Vous vouliez qu'un titre sur une page soit le même style qu'un titre sur une autre page, mais les sites sont infiniment plus complexes. Le contenu peut être une promo sur une page , puis l'article complet sur une autre page, puis archivé dans une autre section. Nous avons besoin de systèmes pour tous ces styles et objectifs différents et appareils maintenant. Donc, nous avons dû commencer à penser à la conception modulaire que nous avons pu nous concentrer sur les pièces tout en réalisant qu'elles allaient aller dans plusieurs mises en page différentes. Certaines personnes sont venues avec des tuiles de style en réponse à cela. Donc, ils sont un peu plus spécifiques qu'une planche d'humeur. Une planche d'humeur a tendance à obtenir des gens approuvés disent « Oui, j'aime ça, faisons un tableau d'ambiance B », mais quand vous reveniez avec la mise en page réelle du site, ils diraient « Ce n'est pas ce que je m'attendais ». Donc, une tuile de style était un peu plus spécifique où vous auriez un titre réel, vous auriez des couleurs et des images réelles, des boutons et des éléments d'interface utilisateur sur la page, mais ce n'était pas tout à fait une mise en page complète. Il s'agit donc d'une étape utile, mais encore une fois, je pense qu'ils manquent un peu de spécificité qui aide les clients et nous, en tant que concepteurs, à comprendre quelle est notre vision. Donc, Dan Mall écrit sur les collages d'éléments et comment il a commencé à les faire, je pense que sur Reading est fondamental. Donc, voici un exemple de la façon dont il les a fait sur la refonte du Entertainment Weekly qui est toutes les pièces principales. Avant même de connaître les mises en page ou les exigences de page, vous savez que vous allez avoir une image d'une célébrité et que vous allez avoir un titre. Ainsi, vous pouvez concevoir cette section et les couleurs dans lesquelles elle peut apparaître. Vous pouvez commencer à prendre certaines décisions que les magazines apparaîtront silhouette sur un fond aux couleurs vives ou à quoi ressembleraient vos boutons, quoi ressembleraient vos principaux widgets de partage, à quelles icônes vous allez utiliser. Donc, ce sont toutes les pièces ensemble et comme vous pouvez le voir, cela vous donne une bonne idée de la personnalité du site avant même que nous ne passions dans les mises en page. Voici un qu'il a fait pour TechCrunch que vous pouvez voir sur la gauche est la version complète. C'est très long. Il est vraiment en train d'entrer dans les détails sur beaucoup de différentes parties du site et sur la droite est de près ; les widgets de partage, les tags, les titres, les morceaux les plus importants du site. Ainsi, les collages d'éléments ne sont pas des planches d'inspiration. Les carreaux de style ne sont pas des planches d'inspiration. Vous ne voulez pas faire une capture d'écran d'autres choses et coller dans votre mise en page parce que cela donne à la fois au client et à vous une perception erronée de la distance dans le processus que vous êtes réellement. Vous voulez les faire comme vos premières ébauches des pièces de la conception. Donc, c'est un tableau d'inspiration où j'ai recueilli quelques couleurs que j'aime, une inspiration typographique, quelques exemples d'utilisateurs, juste quelques styles de photos , mais ensuite un collage d'éléments en sera tiré. Donc, j'ai commencé à transformer cela en vraies polices que je pourrais utiliser, vrais choix de couleurs montrant comment je pourrais recadrer les photos, quels styles de police je pourrais utiliser et il n'y a pas de mise en page. Vous pouvez voir que ceux-ci sont simplement collés sur la page. Le client pourrait dire : « C'est un peu flottant. » Ils pourraient voir que c'est une lumière, ils pourraient le considérer comme une mise en page, mais c'est vraiment juste vous commencez à concevoir les différentes ressources de l'interface utilisateur. Donc, voici un autre exemple d'où je me suis déplacé d'une tuile de style qui était utile et j'ai fait trois d'entre eux et ils aident le client à avoir une idée de la famille de couleurs qu'ils préféraient et j'ai aussi fait des compositions pour correspondre à chacune des tuiles de style et puis à partir de cette rétroaction, ils ont choisi une tuile de style et bien sûr une composition différente et donc, je collage que dans l'itération suivante était une mise en page Frankenstein. Donc, je l'appelle Frankenstein juste parce que c'est comme trois pages toutes en une et dans ce cas, c'était en fait la page d'accueil plus un formulaire d'inscription, plus le profil utilisateur et le tableau de bord du marchand tout en un. Donc, j'ai pu continuer à réviser et à polir ce design , puis l'utiliser comme référence pour toutes les pages suivantes sur tout le site. Donc, le client a compris que c'était à quoi ressemblaient toutes les pièces de son site Web et j' avais un bon cadre de référence pour m'assurer que chaque page suivante correspondait à cette page initiale de Frankenstein. Mais rappelez-vous le but de ceux-ci ; pourquoi les faisons-nous ? Vous essayez d'obtenir des commentaires. Donc, ce sont tous différents concepteurs qui composent différents types de livrables qui servent le projet particulier et leur permettent d'obtenir les retours dont ils ont besoin à ce moment. Donc, une tuile de style est appropriée si vous voulez juste savoir si elles aiment vos couleurs ou non. Une mise en page Frankenstein est plus appropriée si vous voulez vraiment obtenir des commentaires sur la conception sans avoir à concevoir un site Web entier. Si vous travaillez dans une agence de publicité oui, vous allez travailler avec de gros clients et ils vont vouloir voir des concepts entièrement finis pour- vous pourriez faire trois conceptions de sites Web distincts et deux d'entre eux seront jetés. Mais les clients et les concepteurs de plus petite taille n'ont pas le temps pour cela. Donc, ce sont toutes des tentatives pour obtenir les commentaires dont vous avez besoin sans avoir à faire autant de travail gaspillé. Ensuite, c'est aussi bon parce que vous commencez à rédiger ces éléments vraiment importants. Donc, ils finiront avec six, huit et dix tours de révision par rapport à votre standard ; une maquette et deux tours de révisions auxquelles beaucoup de contrats de conception sont habitués. Ok, donc maintenant nous allons concevoir notre mise en page Frankenstein. Vous allez créer une mash up de vos pages les plus importantes, de sorte que vous commencez à traiter tous les éléments. Ainsi, dans Sketch ou Illustrator, vous pouvez commencer avec votre tableau d'art de bureau si vous voulez vous amuser avec la mise en page la plus complexe ou vous pouvez faire votre tableau d'art mobile si vous voulez avoir le plus de contraintes. Alors, faites une maquette de vos éléments les plus importants pour votre site : boutons, menus, onglets, titres, paragraphes, légendes, tout ce qui vous donnera la meilleure idée de la façon dont toutes ces pièces vont se dérouler ensemble. 8. Des modèles solides: D' accord. Vous avez fini votre mise en page de Frankenstein et vous avez reçu des commentaires. Maintenant, nous sommes prêts à maniveller les mises en page individuelles. Alors, pensez au but de chaque page. Que veux-tu que le visiteur fasse ? Comment allez-vous les convaincre de le faire ? Les cadres métalliques ou les contours du contenu devraient donner une idée générale de la hiérarchie de l'information, mais c'est au concepteur visuel de rendre les priorités de chaque écran très claires. Pensez aux premières impressions, quelqu'un va avoir avec chaque écran, puis pensez à ce qui prend en charge le contenu vous allez ajouter ou concevoir pour suivre cela. Ensuite, l'appel principal à l'action, la chose la plus importante dans beaucoup de cas. Tout est une question d'attention, où vos yeux vont d'abord, puis second, puis troisième. Il existe des études de suivi oculaire qui peuvent vous aider à comprendre où les gens regardent. Donc, ici, le prix fait un bon travail d'attirer l' attention et aussi le visage de la femme sur la gauche. On dirait que le titre est en train d'agir. Mais si vous voulez que ces offres d'ordinateur portable en vedette pour attirer l'attention, ils ne se démarquent pas. Voici un exemple de contact visuel, et c'est l'utilisation, et c'est important sur la page. Les gens cherchent toujours le visage sur la page d'abord. Donc, vous pouvez voir ici, ils zooment sur le bébé. Ensuite, ils regardent le titre, le texte de soutien, la photo du produit, puis sur le logo. Vous pouvez également tracer les yeux d'une manière linéaire. Donc, voici où un utilisateur a regardé le premier, deuxième, le troisième, a passé un certain temps, et a traversé. Alors, pensez aux yeux comme dessinant un chemin sur l'écran. Est-ce un beau chemin clair ou est-ce un peu schizophrène ? S' ils lisent, le chemin des yeux a tendance à suivre dans la disposition F. Donc, ils vont de gauche à droite en ligne par ligne en bas de la page comme si vous lisiez un livre. Donc, c'est le modèle pour la lecture et l'écrémage. Il existe différentes techniques que vous pouvez utiliser pour guider le visiteur autour de la page. contact oculaire est le principal. Vous allez d'abord sur le visage de la fille, puis descendez à travers le centre ou disposez ci-dessous. Le contraste est un autre majeur. Vous ne pouvez pas vous empêcher, mais regardez cet orange vif sur le fond noir , puis aussi le champ de courriel blanc sur le fond orange. Couleur en particulier, rouge, saisissant l'attention et regarder ces petits points de rouge comment ils conduisent votre œil autour de la page, les pièces les plus importantes. Ensuite, un espace suffisant pour donner à l'œil quelque part pour se reposer entre tous ces appels à l'action et tous ces points focaux. Tu attires quelqu'un avec un point focal fort. Dans ce cas, c'est une vidéo animée, le mur qu'il pend dans l'espace et tourne. Vous utilisez également l'alignement. Voici une mise en page super minimale, mais vous obtenez toujours un sentiment de votre oeil veut voyager le long du nerf supérieur ou vers le bas les appels d'article en raison de la façon dont ils sont alignés dans une grille stricte. Vous pouvez également utiliser l'outil d'échelle. Donc, énorme est de lancer avec un énorme H et de conduire votre oeil à partir de là à tout le contenu secondaire. Parce que le design crée l'intérêt, mais il essaie aussi de maintenir l'intérêt du visiteur ou de le diriger vers un autre endroit, puis de recréer l'intérêt une fois qu'ils commencent à s'ennuyer un peu. Donnez n'importe quelle disposition le test de squint. C' est quelque chose que vous faites à l'école d'art et c'est quelque chose qui tient dans le design web. Même lorsque vous plissez les yeux, vous pouvez toujours avoir une idée de ce qui est l'appel principal de l'action sur la page. Donc, en regardant quelques exemples de mise en page différente, vous pouvez voir que la première impression du site Web de l'application papier est de vous faire savoir, oui, c'est une application iPhone, mais ils font aussi des choses avec l'imagerie. Donc, ils montrent un journal en arrière-plan pour vous donner une idée de ce qu'est cette application. C' est comme un journal. Ils montrent vos cafés du matin, donc vous pouvez imaginer que ça fait partie de votre routine matinale. Ensuite, il y a du contenu secondaire. C' est une phrase expliquant les avantages de cette application, puis quelques appels à l'action, très clair et facile à trouver. Cela rend le site utilise leurs premières impressions de la créativité. Vous voyez beaucoup de dessins d'enfants ici et une typographie créative. Il tourne dans l'espace, puis le texte de support suit évidemment vers le bas dans la disposition centrale, et l'appel à l'action plus bas sur l'écran. L' application Peek est un calendrier et donc encore une fois, notre première impression est que nous comprenons qu'il s'agit d'une application iPhone, nous voyons que l'interface utilisateur semble créative et unique, et puis nous voyons quelques contenus de soutien ici est une vidéo où nous cliquons sur le bouton de lecture évident pour voir la vidéo, et notre action d'appel est de l'obtenir une fois que nous sommes convaincus. Même si vous n'utilisez pas d'imagerie, vous pouvez dessiner l'œil avec seulement la typographie. Donc, voici un gros titre est de transmettre la distinction de cette agence. Ensuite, il y a du contenu de soutien sur tous les détails, leurs domaines d'expertise, puis quelques petits appels à l'action parce qu'ils dépeignent toujours une marque plus formelle. Vous guiderez également l'œil à travers la structure sous-jacente de la page. Plus particulièrement la grille. Ainsi, il existe des grilles courantes telles que le 960, qui se présente dans un format 12 colonnes ou 16 colonnes, qui sont faciles à utiliser tant dans les phases de conception visuelle que dans les phases de développement. Mais il y a aussi beaucoup d'outils maintenant où vous pouvez concevoir une grille personnalisée en fonction de votre contenu en particulier. Gridpak est un. Il y a aussi un Gridset. Ainsi, vous pouvez vraiment concevoir le contenu à partir de l'extérieur et ne pas simplement insérer votre contenu dans les boîtes de quelqu'un d'autre. Assurez-vous de comprendre comment les grilles sont destinées à être utilisées. Une chose qu'il m'a fallu, je n'ai pas appris à l'école, c'est que vous tamponnez généralement votre contenu à l'intérieur de la colonne de la grille, sorte que si vous coloriez cet arrière-plan, vous allez toujours avoir des marges adéquates entre le texte et la couleur arrière-plan. Donc, le PDF de Khoi Vinh et Mark Boulton, c'est un peu vieux, mais c'est toujours une excellente explication de pourquoi les grilles sont bonnes et comment les utiliser comme vous faites du design web. Warby Parker est une marque qui a un beau design en utilisant la grille et encore une fois, c'est une grille créative. Donc, c'est un calendrier. Donc, vous vous attendez à ce qu'il s'agisse d'une grille de sept colonnes reflétant les jours de la semaine. Mais au lieu de cela, la section du calendrier est huit colonnes et il y a une neuvième colonne de à gauche pour le mois. Donc, c'est une grille à neuf colonnes, ce qui lui donne définitivement une saveur unique. Ils l'utilisent pour structurer un grand nombre d'images, de contenus et de graphiques d'une manière qui reste organisée et unique. Même si vous ne dessinez pas toutes les lignes de grille, le type flottant peut toujours avoir un sens de l'ordre et des alignements. Ici, la grille permet de remplir plus tard le contenu dynamique et de maintenir une mise en page plus dynamique, sorte qu'il y a des choses plus grandes qui attirent l'attention et des choses plus petites à regarder plus tard. Encore une fois, les choses flottantes ont toujours une grille sous-jacente. Donc, ce titre Check my pipes n'est pas aligné avec le logo, mais il est aligné sur la grille sous-jacente. Donc, vous pouvez ne pas voir toutes les lignes de grille, mais les sites Web qui sont construits avec des grilles ont un sens de la structure sous-jacente. Encore une fois, Khoi Vinh est l'un des principaux promoteurs et maîtres de cette technique. Ainsi, son site, imité depuis des années, fut l'un des premiers à montrer une belle utilisation d'une grille et d'une typographie suisses. Il l'a récemment redessiné, mais il reste quelqu'un à suivre, si cet outil vous intéresse. Il a fait tout un exemple de refonte du site Yahoo il y a quelques années montrant que même une page d'accueil chaotique et surchargée peut être rendue plus organisée avec l'utilisation d'une grille sous-jacente. Ainsi, les grilles créent non seulement ce sens du contrôle de l'ordre, mais elles facilitent également la tâche une fois que vous transférez les choses à un développeur. Si chacune des pages que vous concevez est une mise en page unique, il faudra beaucoup plus de travail pour construire et maintenir ces pages. Donc, quand vous avez ce système, il va rendre les choses beaucoup plus facile sur la route et surtout avec un design réactif quand vous devez commencer à comprendre comment ces choses vont circuler dans différents appareils. La seule mise en garde est qu'ils peuvent créer des mises en page ennuyeuses si vous les utilisez mal. Si vous remplissez simplement les choses dans la même grille à 3 colonnes, vous ne bénéficiez pas vraiment de tous les avantages de la grille. Cela devrait rendre votre design plus simple, mais cela devrait aussi inspirer quelques mises en page uniques en vous inspirant de placer les choses dans un espace blanc où elles pourraient ou placer des choses dans des espaces que vous n'avez peut-être pas pensé auparavant. Ensuite, nous devons aussi nous rappeler que nous concevons des mises en page réactives. Alors, commençons par mobile. Parce que c'est celui qui est le plus récent, mais aussi de plus en plus important. Donc, les projections des utilisateurs sont que le mobile est sur le point de devancer notre conception de bureau. Je dois esquisser ça. Ainsi, la conception pour mobile et pour d'autres appareils en plus d'un ordinateur de bureau, nous fait penser à l'espace et aux mises en page d'une manière différente. Donc, sur un bureau, le centre de l'écran est l'endroit où les gens regardent principalement ou peut-être le bord gauche de l'écran alors qu'ils suivent le NAV gauche vers le bas de la page. Mais sur un téléphone, il est plus facile de glisser pour toucher la partie inférieure gauche de l'écran si vous tenez le téléphone dans votre main droite. Donc, c'est peut-être là que vous mettez les appels principaux à l'action. Si vous tenez une tablette debout, ce sont les côtés de l'écran où il est plus facile de toucher. Ainsi, le placement des choses sur la page est affecté par l'appareil. Lisez certainement les livres de Global Moxie sur ce sujet. Il travaille, parle et partage toutes ses réflexions à ce sujet depuis des années. L' autre chose à réaliser est que les conceptions mobiles ne sont pas un petit curseur, une petite flèche, mais un gros doigt essayant de frapper ces boutons. Ainsi, lorsque vous commencez à concevoir des mises en page mobiles, vous ne pouvez pas croire la taille des boutons. Apple recommande au moins 44 pixels ou 88 sur un écran de rétine comme la taille, mais voici un gars qui teste et montre que la zone jaune était là où son doigt était encore plus grand que le recommandé. Donc, vous n'avez pas à faire les icônes elles-mêmes si grandes, mais la zone cliquable ou la zone tapissable doit être capable de traiter avec le doigt réel de quelqu'un. Donc, voici encore un exemple de se rendre compte que ce périphérique d'entrée va effectivement couvrir la chose que la personne essaie de toucher. Donc, vous avez vu beaucoup de changements lorsque le mobile a commencé à devenir répandu dans la conception. Donc, vous avez vu des applications. Vous avez vu les boutons devenir plus grands et plus faciles à glisser. Vous avez vu des boutons qui étaient pleine largeur de l'écran que nous avons obtenu de plus en plus raffiné et que nous avons compris ce qui a fait un bon design sur mobile. Dans des applications comme le corps humain par Tinybop captent vraiment ce sens de l'exploration et du geste. Ce pincement et le zoom sont beaucoup plus naturels. Que les boutons, comme Josh Clark dit, les boutons sont piratés. Qu' il s'agit simplement d'un appareil que nous avons utilisé pour représenter le cliquabilité, mais il est beaucoup plus naturel de saisir des choses ou de balayer choses ou d'effacer des choses de votre bureau comme vous le faites sur un vrai bureau. Donc, il y a un tout nouveau vocabulaire que les gens apprennent. Voici le guide gestuel de Luke Lebrewski et ceci n'en est qu'un morceau. Il y a tellement de gestes que vous pouvez utiliser sur une application native. Il élargit évidemment le potentiel interactif de votre site ou de votre application, mais vous devez ensuite compter sur vos utilisateurs pour les apprendre et ensuite vous devez également compter sur vos développeurs pour exécuter ce qui est possible sur un site web responsive. Donc, un site web réactif sur mobile, a certainement besoin de permettre les doigts et l'utilisation de gestes et de balayages, mais vous devez également être informé de ce qui est possible uniquement dans les applications natives et ce qui est possible dans un site responsive. Rappelez-vous, pas d'états de vol stationnaire sur mobile. C' était un outil utile pendant de nombreuses années dans le design web, mais pas plus. Parce que, bien sûr, vous pouvez appuyer, puis révéler le menu, puis ils tapent à nouveau pour aller quelque part, mais vous n'avez pas le sentiment que quelqu'un au hasard sur votre contenu et découvre quelque chose de caché. Parce qu'ils doivent taper pour voir tout contenu caché. Google a fait cette énorme étude de recherche appelée Le monde multi-écran. Donc, vous voulez considérer le contexte de chacun de ces périphériques. Donc, vous pouvez prendre votre téléphone parce que vous n'avez qu'une seconde et que vous ne voulez pas avoir à connecter à votre ordinateur ou vous ne voulez pas avoir à traverser la pièce et à récupérer votre ordinateur. Tu essaies peut-être de faire une certaine chose. Vous avez saisi votre téléphone parce que vous vouliez prendre une photo , puis vous voulez l'envoyer à un ami ou ensuite vous voulez le télécharger sur votre compte. Vous pouvez prendre votre téléphone parce que vous n'avez pas accès à votre ordinateur ou que vous êtes dans la rue , dans une voiture ou chez un ami et vous pouvez simplement le faire parce que vous essayez de vous détendre. Vous ne voulez pas ouvrir l'ordinateur qui représente le travail et votre e-mail, vous voulez simplement rester dans un état d'esprit plus social. Donc, pensez aux caractéristiques de chacun de ces appareils. Que les téléphones ont tendance à être plus un à un et c'est plus personnel. Les tablettes ont tendance à être peut-être là où vous naviguez, lisez des magazines, regardez des recettes, puis les ordinateurs portables ou les ordinateurs de bureau peuvent être plus au sujet du travail pour les gens. Ensuite, vous pouvez démarrer quelque chose sur votre téléphone et l'utiliser comme périphérique de collecte, mais terminer la tâche sur votre bureau et ce serait votre appareil d'organisation. Donc, voici quelques exemples de la façon dont mes mises en page commencent à ressembler. J' ai commencé avec mobile et j'ai présenté mon contenu pour le site de yogas. Vous pouvez voir que c'est surtout une seule colonne et j'en ai fait un couple. J' ai eu un peu où il y a deux colonnes et nous avons décidé de faire de l'image entière la zone cliquable. Donc, les gens pouvaient simplement taper avec leurs pouces très facilement. C' est une disposition très grillée, donc maintenant il est facile de recharger sur le bureau. Je savais que je voulais que l'image principale, l'image d'introduction soit plus grande et ensuite je voulais que la retraite du Pérou soit très mise en évidence. Ainsi, vous pouvez voir que la hiérarchie est conservée entre les mises en page. Ensuite, je peux visualiser comment la mise en page de ma tablette peut fonctionner. Voici mes trois tableaux d'art en illustrateur, mais je pourrais retourner et remplir ceci et essayer de décider, est-ce que je vais toujours garder les quatre images ensemble sur la deuxième rangée ou est-ce que je vais essayer de les diviser en rangées séparées ? Donc, faites autant que vous avez besoin. Encore une fois, cela dépend de qui vous allez les remettre. Voici un exemple où je viens de faire le bureau et le mobile côte à côte. Ainsi, le bureau est sur la gauche et les mobiles sur la droite. Voici la page d'accueil et la page à propos de ce grand site. C' est une mise en page plus complexe. Donc, j'ai eu un peu plus à essayer de comprendre ce qu'il faut faire avec tout ce contenu différent allant de 4 carousels jusqu'à des carousels simples ce genre de chose. Donc, cela m'a aidé avec la fonctionnalité pour le marquer avant de commencer à le coder. Il a également eu des gens sur la même page sur ce qu'ils allaient voir sur chaque appareil. Dans la section Ressources du site, il y a un modèle illustrateur réactif que quelqu'un d'autre a créé. C' est utile si vous le souhaitez ou vous pouvez simplement créer vos tableaux d'art pour répondre à vos propres besoins. Donc, à partir de votre mise en page Frankenstein, vous allez aller page par page et à partir de vos fils, concevoir ces mises en page. Donc, encore une fois, le filaire devrait vous montrer comment les autres membres de l'équipe ou peut-être vous avez vous-même vu les hiérarchies de la page, mais pensez que vous voulez vous assurer que les mises en page visuelles sont aussi bonnes qu'elles le peuvent. Donc, en général, il y a un réarrangement qui se produit lorsque vous passez des filaires à la conception visuelle. Alors, commencez avec vos écrans mobiles d'abord. Parce que les mises en page mobiles ont tendance à être une seule colonne. Vous pouvez parfois ajuster deux ou même trois colonnes, mais c'est rare. Donc, cela vous oblige à prioriser votre contenu de manière linéaire, ce qui est d'abord sur la page, puis deuxième, troisième, puis quatrième. Donc, je voudrais commencer avec mobile, puis j'aime aller jusqu'à la mise en page du bureau et essayer l'autre extrême. Comment vais-je profiter de cet énorme écran ? Qu' est-ce que je vais faire ici ? Encore une fois, il ne s'agit pas seulement de la forme de la toile, il s'agit du contexte. Que vais-je faire si quelqu'un est au travail et visite mon site ? Qu' est-ce que je vais faire s'ils sont sur leur téléphone et qu'ils visitent mon site ? Ensuite, vous allez répéter avec toutes vos pages principales. Je fais juste ces deux premiers pour les sites principaux. Je suis souvent en train de continuer et de faire le développement aussi. Donc, je vais faire les points d'arrêt du milieu dans le code, mais si vous remettez ces pages à un développeur, vous devrez aller de l'avant et faire tous vos balises de tablette ou tout autre point d'arrêt que vous décidez de. Encore une fois, vous pouvez faire autant de points d'arrêt que vous le souhaitez. Ils ne sont pas particuliers à un appareil comme l'iPad ou le Nexus, peu importe. Vous voulez réfléchir au moment où votre contenu commence à tomber. Lorsque vous mettez à l'échelle la vidéo commence à prendre tout l'écran et ne pas afficher aucune de la deuxième ligne de contenu et donc, c'est quand vous avez eu un point d'arrêt et de réviser votre mise en page. Donc, travaillez sur vos mises en page. Vous pouvez faire tous les mobiles d'abord si vous voulez ou simplement faire un écran. L' écran le plus important mobile et de bureau et obtenir des commentaires et voir comment il se passe. 9. Test d'utilisabilité: D' accord. Maintenant, il est temps de faire quelques tests de convivialité de nos sites Web. Lorsque nous entrons dans nos mises en page, dans nos mises en page réactives, cela peut être tentant ou quand nous entrons dans nos mises en page, cela a tendance à nous pousser à nouveau dans la pensée 2D. Que nous sommes inquiets d'organiser ce contenu dans l'espace. Mais nous devons nous rappeler que le web design est un média en évolution que nous travaillons dans quatre dimensions qu'il est interactif que les choses se produisent. Donc, nous voulons revenir en arrière et réfléchir l'interactivité du site et juger nos mises en page dans cette perspective. Alors, quelles sont les mesures de base ? Quels sont les éléments de base qui rendent un site web utilisable ? Voici ces 10 heuristiques de convivialité de Jacob Nielsen, qui est l'autorité principale dans ce domaine, que nous pouvons examiner pour juger nos mises en page. Donc, numéro un que vous voulez vous assurer que l'état de votre système est clair. Alors, écrans de confirmation. Si quelqu'un clique sur Envoyer, il souhaite savoir que sa commande a été reçue et qu'il va recevoir l'article ou qu'il ne l'a pas fait. Si votre page est en cours de chargement, vous pouvez indiquer à quelqu'un ce qui est en train de charger afin qu' il comprenne pourquoi cela prend si longtemps et qu'il ne pense pas que ce soit son navigateur ou son Wi-Fi. Donc, assurez-vous que comme il y a des indicateurs d'état du système si vous en avez besoin. Le numéro deux, c'est qu'il correspond à leur modèle mental. Donc, cela revient à nouveau à l'étiquetage que vous utilisez dans votre architecture. Espérons que votre phase de planification a éclairci certaines choses, mais votre conception visuelle doit également le renforcer. Ainsi, Instapaper utilise une boîte de réception ou une archive. Vous économisez ou téléchargez ? Quelle est la métaphore ? Quelles sont les icônes ? Assurez-vous que tout cela correspond à leur modèle de ce qu'ils attendent. Le numéro trois est que les utilisateurs ont le contrôle. Donc, cela pourrait signifier que vous leur donnez un peu d' apport dans la conception de est-il assez brillant pour eux ? La taille de la police est-elle assez grande pour eux ? Certaines applications offrent le mode nuit, s'il s'agit de la lecture et de la navigation. Qu' ils peuvent se rendre aux parties sur le site où ils veulent se rendre. Lorsque vous commencez à tracer l'expérience utilisateur, vous pouvez avoir tendance à le tracer comme un film, comme si vous écriviez écran par écran ce qu'ils vont ressentir. Oui, vous faites cela pour vos histoires d'utilisateurs, mais vous devez également réaliser que les gens vont se brancher vers d'autres histoires et changer de chemin tout le temps. Donc, une bonne navigation les aide à faire cela et laissez-les s'amuser et faire ce qu'ils veulent faire sur le site. Le quatrième est une sorte de peeve de mon animal de compagnie qui est les icônes étant cohérentes et sont-elles cohérentes d'un point de vue de la convivialité comme, sont des illustrations ou des boutons ? Donc, ici vous pouvez voir que sur les onglets les icônes sont utilisées ici comme boutons et sur les onglets. Ils ne sont pas utilisés comme illustrations. Donc c'est quelque chose où je peux savoir par, je peux skimmer cette page et je peux connaître les icônes que je peux cliquer sur celles qui sont quelque chose de fonctionnel. numéro cinq est que vous essayez de les aider à prévenir les erreurs et c'est là que le design visuel joue un grand rôle. Ainsi, par exemple, l'action principale, le bouton principal est généralement plus grand, plus audacieux, mais l'action secondaire peut ne pas avoir à ressembler à un bouton du tout. En fait, s'il s'agit d'un indu ou d'une annulation, vous ne voudrez peut-être pas que ce soit quelque chose qui soit trop facile à frapper. Vous le voyez aussi avec des choses comme dans la planification de la sélection d'une couleur pour un chemisier que si je peux changer l'image pour refléter cette couleur, cela diminue la probabilité que quelqu'un va commander la mauvaise couleur par erreur. Donc, ce quelque chose que vous pouvez simuler dans vos conceptions ou vous pouvez écrire une note au développeur pour changer la photo lorsque l'utilisateur clique sur cette nuance de couleur. La prochaine chose est également que vous ne voulez pas l'utilisateur ait à faire trop de travail surtout, s'il est sur un téléphone et qu'il tape avec ses pouces. Donc, si vous le pouvez, s'ils tapent dans un champ de recherche, pourquoi ne pas faire une liste déroulante automatique qui les aide à sélectionner dans une liste d'options et qui ne les oblige pas taper les 50 caractères de la description. Encore une fois, vous voulez passer en revue et revoir chacune de vos histoires d'utilisateurs et vous assurer qu'elles sont aussi efficaces que possible. Donc, cela peut être à la fois vous réduire le nombre total de clics qu'il faut pour obtenir de A à Z, que vous ne les faites pas naviguer à travers 10 écrans pour s'inscrire et créer un compte afin d'acheter un produit sur votre site ou cela peut signifier que vous réduisez le temps de chargement de la page. Donc, beaucoup de paniers comme cette canopée du site, ils vont faire comme une couche de sorte que toute la page n'a pas à recharger afin que vous puissiez obtenir plus d'informations sur le produit, mais vous faites juste une couche rapide qui est chargé à travers Ajax. Vous pouvez également reconnaître que certaines personnes aiment naviguer à l'aide de leurs claviers. Ainsi, les flèches gauche et droite peuvent être activées pour paginer à travers un carrousel ou un diaporama ou d'autres boutons. Vous devrez peut-être les enseigner à vos utilisateurs, mais il s'agit de faciliter leur tâche et de rendre ces flux aussi efficaces que possible. Aussi, essayez d'aider vos utilisateurs juste à se concentrer sur une chose à la fois. Donc, si je suis ici à essayer de décider laquelle de ces plates-formes je veux la norme de la coutume, vous pouvez supprimer tout le reste sur la page parce que j'essaie vraiment juste d'analyser et de prendre cette décision en fonction des fonctionnalités et du les coûts et toutes ces autres choses. Donc, j'ai beaucoup d'espace blanc ici. J' ai une table claire qui m'aide à comprendre les différentes options et tout le reste a été supprimé ce qui est très utile pour moi en tant qu'utilisateur. Ensuite, enfin, votre alerte devrait être claire. Donc, rien n'est plus frustrant que, « Désolé erreur système », et vous n'avez aucune idée de comment le réparer. Donc, ce sont quelques exemples d'alertes utiles qui indiquent exactement combien de caractères sont requis dans le mot de passe, lesquels des champs de formulaire sont requis. C' est ce qui est souvent oublié dans les maquettes de conception statique, mais si vous concevez une expérience Web, il y a tellement d'états pour chaque page. Donc, revenez en arrière et essayez de modifier et de réfléchir à chacune de ces interactions et comment vous pouvez les rendre plus claires. La dernière, c'est qu'obtenir de l'aide devrait être facile. Donc, les gens sont confus. Non, vous ne pouvez pas faire la coupure, un petit trombone vous indiquant comment utiliser Microsoft Word et vous ne voudriez pas le faire. Mais vous voulez faciliter l'aide lorsque les gens le recherchent. Mettez-le dans un endroit standard comme le nav supérieur ou dans le pied de page, puis réalisez également que les gens ont des manières différentes dans lesquelles ils veulent recevoir de l'aide. Certaines personnes adorent les vidéos. Certaines personnes veulent juste décrocher le téléphone. Certaines personnes veulent écrire un e-mail ou un chat. Donc, c'est bien si les entreprises peuvent offrir toutes ces options. Encore une fois, votre conception visuelle refléterait ce que les gens aiment dans chacune de ces options. Donc, si je suis quelqu'un qui veut juste parler à une vraie personne, ces photos de visages d'utilisateurs vont me donner impression que je reçois de l'aide plus que quelqu'un qui veut juste regarder une vidéo où une capture d'écran d' un tutoriel d'aide ou un examen de produit serait un plus attrayant pour eux. Une fois de plus, passez en revue vos mises en page et jugez l'interactivité de chacun. C' est notre cliquable par un style cohérent ou par l'endroit où ils sont placés sur la page. Ainsi, par exemple, les liens doivent être bleus et soulignés avec un mantra pendant une longue période. Je ne suis pas d'accord sur le fait qu'ils doivent être soulignés parce que cela réduit vraiment la lisibilité, mais une couleur cohérente est un bon indice pour l'interactivité. Encore une fois, les icônes sont une chose particulière que je devrais savoir en tant qu'utilisateur si c'est juste une illustration qui est assis à côté d'un contenu ou si c'est un bouton que je dois cliquer pour obtenir du contenu supplémentaire. groupe Nielsen Norman est l'un d'entre eux. L' entreprise de recherche sur l'expérience utilisateur fondée sur des données probantes Donc, ils ont toutes sortes d'études et de mesures si vous voulez plus de données pour soutenir l'un de vos arguments. La dernière chose à propos de la convivialité est que les modèles sont quelque chose que vous voulez considérer. Cette conception intuitive signifie souvent familier que vous utilisez le placement standard pour certaines des fonctions de base. Si vous cherchez la barre de recherche, vous cherchez probablement dans l'en-tête de la page lorsque les gens la mettent dans la barre latérale, c'est un peu plus difficile à trouver. La même chose avec la connexion. Alors, regardez ces modèles standard et considérez si vous avez besoin d' innover et de casser le moule sur ceux-ci ou si c'est quelque chose où vous voulez suivre ce qui est considéré comme une bonne pratique. Mais de même, vous voulez vous assurer que vous ne copiez pas simplement d'autres sites Web. Certains clients ont du mal à visualiser les choses et ils vous diront donc « Faites-le comme ça ». Ils voudront juste que vous copiiez directement une certaine mise en page et vous devez repousser quand il est approprié de leur dire que de regarder plus d'un exemple d' un modèle afin de prouver que c'est la meilleure façon de le faire et que c'est une tendance générale. Mais vraiment comme tout, vous essayez de rendre le contenu de vos mises en page vers l'extérieur et vous essayez de les faire aussi interagir vers l'extérieur. Alors, pensez à vos propres cycles particuliers et utilisez-les pour déterminer quels modèles sont appropriés. Parce que nous travaillons tous avec le même vocabulaire des éléments HTML, le même alphabet de base des éléments HTML, mais nous pouvons les combiner d'un million de façons différentes et donc vous voulez toujours augmenter votre vocabulaire en voyant ce est là et voit ce qui est possible avec les nouvelles technologies et les nouvelles idées. Par conséquent, il existe d'excellentes ressources pour vous aider à visualiser et voir comment et comment ces modèles peuvent fonctionner. Brad Frost est super généreux à partager son travail. Il a créé toute cette bibliothèque de modèles réactifs. Donc, si vous essayez juste de visualiser comment votre mise en page pourrait se régénérer, voici quelques prototypes réalisables que vous pouvez regarder et voir lequel semble approprié car il est difficile de concevoir pour un support en évolution lorsque vous utilisez et il existe différents outils de conception qui essaient de répliquer cela, mais à la fin de la journée, il est agréable d'utiliser ce que vous connaissez et d'obtenir le code dès que possible. C' est ma stratégie pour ça. Donc, les modèles réactifs sont une grande ressource. Pattern tap est un autre endroit où vous pouvez trier par ce type de chose que vous essayez de créer et voir quel type d'idées existe. Les états survolants sont aussi cool où il y a beaucoup de nouvelles et intéressantes conceptions d'interaction et puis il y a une bibliothèque d'interaction utilisateur, où vous pouvez voir des exemples animés de la façon dont vous pouvez adoucir ces transitions, les rendre plus dynamique, tout ce que vous voulez faire pour vous aider à visualiser. Donc, exportez toutes vos maquettes en PNG. Vous voulez les trier afin d'avoir chaque point d'arrêt dans un dossier. Ainsi, toutes vos mises en page mobiles seront dans un dossier, toutes vos mises en page de bureau seront dans un autre dossier, et cetera. Ensuite, pour faire quelques tests de convivialité, vous pouvez les télécharger pour imaginer l'application et il est assez clair, ou assez intuitif d'utiliser l'application. Vous allez passer par et télécharger chaque dossier de PNG, puis vous pouvez créer des hotspots et les rendre cliquables, puis vous pouvez faire quelques tests utilisateur. Donc, soit s'asseoir à côté de quelqu'un et les regarder tirer vers le haut ce dossier dans l'application sur votre téléphone et les regarder essayer de naviguer ou vous pouvez partager l'écran, faire comme un Google Hangout et leur donner quelques scénarios, leur demander de faire le plus actions importantes sur votre site et de les regarder comme ils essaient de le faire. C' est très éclairant et il vous donne une perspective totalement différente sur votre design. Alors, essayez-le. Vous pouvez également poster vos liens vers le formulaire Partage de compétences et obtenir des commentaires uns des autres, faire quelques itérations sur votre site Web et voir comment cela se passe. 10. Nettoyage et documentation: Dernière leçon, Nettoyage et documentation. Je veux juste souligner ce processus d' itération parce que c'est une chose si importante dans la conception web. Un design web n'est jamais terminé. C' est comme un enfant. Il continue de croître et a besoin de nouveaux vêtements, les changements de culture et les changements technologiques. Donc, vous êtes toujours en mesure de continuer à améliorer un site Web. C' est l'une des grandes choses du web design. Ce n'est pas comme un livre où vous l'envoyez à la presse , puis il est parti et vous devrez faire une autre édition. Mais un site Web est toujours là et vous pouvez toujours modifier les fichiers et peaufiner vos designs et les améliorer. Donc, continuellement tester et itérer et améliorer vos conceptions. C' est quelque chose que nous ne réalisons pas à propos de beaucoup d'applications populaires. Donc, iOS sept, quand il est sorti était comme un design énorme, mais vous pouvez voir chacun de ces panneaux montre trois versions des écrans et comment ils ont continué à affiner le langage. Il était plein avec les boutons de barre, puis ils sont devenus plus petits avec des coins arrondis, puis ils sont devenus cercles ou certains des messages secondaires plus petits sont devenus de minuscules icônes. Donc même Apple, l'un des leaders du design, a beaucoup plus de design itératif que nous ne pourrions le réaliser. Voici un exemple de chacune des mises à niveau iOS et combien de temps elles ont passé en bêta. Ce qui est intéressant pour moi, c'est juste la quantité totale de versions qu'ils font que toutes les deux semaines, en gros, ils sortent de nouvelles versions du logiciel. Donc, ne pensez pas à votre site Web comme une fête de lancement géante, mais pensez à chacune de ces petites itérations que vous publiez comme un petit test et vous obtenez un peu de commentaires et c'est un tremplin le long du chemin. Retour à Jakob Nielsen, il parle de chacune de ces itérations. Au début, vous supprimez simplement ces bogues d'interaction et vous augmentez la facilité d'utilisation. C' est la valeur principale au début, mais au fil du temps, quand il commence à être vraiment poli, alors vous commencez à être en mesure vraiment reconceptualiser l'interface lorsque vous allez dans d'autres itérations et obtenir une autre bosse dans la facilité d'utilisation que vous commencez à être vraiment prêt à jeter peut-être quelques-unes de vos fonctionnalités préférées et vraiment repenser les choses. Donc, vous voulez échouer plus vite. Dépêchez-vous de comprendre ce qui ne fonctionne pas quand vous itérez. Donc, vous évitez également le travail inutile en faisant cela. Vous réduisez également vos risques parce que vous faites des morceaux plus petits. Vous ne travaillez pas sur un projet pendant un an seulement pour découvrir que personne ne le voulait vraiment. Donc, vous découvrez vos meilleures fonctionnalités et ce sur quoi vous voulez vous concentrer. Donc, concentrez-vous sur les détails aussi avec chaque itération que vous obtenez pour mettre plus en plus de polissage et rendre vos designs plus beaux et meilleurs. Donc, si vous parlez de design plat, vous pourriez penser que c'est une façon de le faire, mais si vous commencez vraiment à vous concentrer sur les petits détails, vous remarquerez beaucoup de particularités dans la façon dont vous mettez en œuvre ce vous pourriez envisager un design plat. Donc, peut-être qu'il y a des bordures inférieures sur certains éléments ou ses coins de trois pixels par rapport aux coins de cinq pixels. Vous ne remarquez pas ces choses lorsque vous êtes juste un consommateur et un utilisateur de sites Web. Mais une fois que vous commencez à être un créateur et un critique, vous commencez à vraiment zoomer sur les détails. Est-ce que les boutons de Facebook ont une ombre portée ou non ? Ont-ils une frontière ou pas ? Ce sont les types de choses que vous commencez à vraiment affiner à travers des niveaux de vernis regardant l'échelle et en regardant le contraste au fil du temps. Il y a aussi une grande phase d'édition qui va dans les itérations. Donc, j'adore cette citation d'Ellen Lupton : « Le design est autant un acte d'espacement qu'un acte de marquage. » Donc, il s'agit de ce que vous pouvez supprimer et ce que vous ne pouvez pas mettre sur l'écran. Donc, Mark Boulton a un excellent article sur les espaces blancs où il parle comme regarder cette mise en page sur la gauche et les concepteurs novices ont tendance à tout mettre dans des boîtes. Tout doit être ancré. Nous avons remarqué que, comme lorsque nous enlevons certaines de ces boîtes, nous tombons dans cette photo plus facilement et nous sommes en mesure d'utiliser typographie un peu plus créative pour exprimer certaines idées. Les espaces de base sont bien. Ce paragraphe à gauche est plus une histoire sur ce qui est important dans ce contenu, à travers un peu d'espace blanc, un peu d'accent, le design commence à être plus communicatif. L' autre chose à propos des conceptions Web est encore une fois que nous concevons des systèmes, pas des affiches, pas des mises en page verrouillées. Donc, espérons-le, vous avez compris vos lignes directrices de marque en première classe, mais vous voulez aussi polir vos actifs visuels en une ligne directrice utilisable. Donc, la valeur de cet actif a commencé, retournez-y et essayez de le rendre utilisable pour d'autres personnes et pas seulement pour vous-même. Voici donc un exemple du livre de la marque de Jamie Oliver et bien sûr, il parle de sa personnalité et de ses valeurs. Ce sont les choses qui sont la raison pour laquelle vous choisissez ces couleurs particulières ou des photographies particulières. Mais vous allez aussi entrer dans les détails de la taille de vos marges, vos manchettes ou de vos couleurs. Donc, essayez de spécifier ce que vous avez compris dans cette phase de conception afin que quelqu'un d'autre puisse le récupérer et que la personnalité ne change pas complètement, mais que vous puissiez avoir une certaine cohérence entre les projets. Donc, pensez à cela comme un système, que ce ne sont pas des éléments de type fragmentaire que vous avez placés autour de la page, mais c'est un système de titres et un système de texte connexe. Vous pouvez penser aux ventes typographiques. Tim Brown a écrit sur les ratios modulaires, mais nous pouvons avoir tendance à commencer à concevoir avec seulement les tailles de police par défaut des palettes dans notre outil logiciel. Donc, 72 ou 60, 48, 36. Mais il n'y a aucune raison que vous ayez à faire ça. Vous pouvez regarder le rapport d'or, vous pouvez regarder toutes sortes de rapports mathématiques et géométriques pour exemples de la façon dont vos tailles de type peuvent se rapporter les uns aux autres. Alors, revenez en arrière et regardez vos gros titres et assurez-vous qu'ils sont tous cohérents , puis regardez vos relations entre vos éléments et voyez si elles sont harmonieuses. Donc, la dernière étape de notre processus de conception est de documenter les choses afin que l'exécution puisse être aussi proche que possible de notre vision. Donc, c'est de plus en plus facile de le faire. Il y a des choses comme projet parfait pour Photoshop qui vous permet d'exporter le CSS directement à partir d'un PSD. La même chose avec les esquisses que vous pouvez sélectionner n'importe quel élément et obtenir les attributs CSS de base pour cette couleur d'arrière-plan ou cette taille de police afin que vous n'ayez pas à passer par une pipette de choses tout vous-même. Donc, passez en revue et assurez-vous que vos symboles ou votre page d'actifs a tous les éléments principaux dont vous avez besoin. Si vous avez tout conçu sauf dans h3, allez-y et ajoutez un échantillon h3 avoir un système cohésif et ensuite vous allez écrire les spécifications si vous en avez besoin mais si vous voulez continuer sur une fin, développer le site dont vous auriez besoin pour le faire. Vous seriez plus préoccupé par l'exportation de CSS. Vous voulez généralement avoir des conversations avec le développeur au début. Alors, parlez à votre développeur, désolée, faites la dernière phrase, s'il vous plaît. Vous allez écrire des spécifications si elles sont nécessaires. Parlez à un développeur et voyez ce qu'il veut. Parfois, ils veulent juste que vous leur donniez des PSD ou leur donniez un fichier source. Donc, soit parlez-leur de Sketch et comment ça marche, soit voyez s'ils veulent que vous fassiez tout le tranchage et nous en parlerons aussi en troisième classe. 11. Explorez le design sur Skillshare: façon.