Share
Bienvenue à la huitième leçon de notre série Web Design for Kids intitulée «Bases de la conception».!
Tout au long de cette série, nous nous sommes attachés à donner vie à un design, mais nous n’avons pas encore parlé des décisions qui ont été prises dans ce design. Dans ce tutoriel, nous allons passer en revue certaines des bases concepts de design qui font partie d'un bon site web.
N'oubliez pas de poser des questions dans la section commentaires au bas de cette page.!
Un autre sujet dont nous avons beaucoup parlé jusqu'à présent est le utilisateur (ou visiteur). Toutes les décisions que nous prenons en matière de conception Web et tous les concepts présentés dans ce didacticiel ont tous le même objectif: rendre le site Web aussi facile à utiliser et à comprendre que possible..
Est-ce que cet utilisateur est heureux?Le design consiste à résoudre des problèmes. Si nos utilisateurs ont du mal à utiliser notre site, ils vont simplement quitter. Notre travail consiste à les débarrasser de leurs difficultés, à leur faciliter la lecture et à leur offrir une expérience extrêmement agréable. Nos décisions concernent des éléments tels que le contenu, l'organisation, la mise en page, les espaces vides, les graphiques, les couleurs et la typographie..
Contenu est la partie la plus importante de la conception Web. La beauté de notre site importera peu si nous n'avons pas le contenu que les utilisateurs veulent lire. Une chose que nous pouvons nous demander lorsque nous souhaitons créer un site est "Les gens en ont-ils besoin?" Et, dans l'affirmative, essentiel?”.
Il peut être tentant d'inclure autant de contenu que possible sur un site Web. Nettoyer et réduire le contenu aidera l'utilisateur à obtenir plus d'informations à la fin, car l'essentiel ne sera pas perdu sur la page..
Une fois que notre contenu est prêt, nous devons l'organiser en catégories, ou groupes pertinents, afin que l'utilisateur puisse tout trouver sans problème..
Le meilleur site Web circulera très naturellement et évitera à l'utilisateur de réfléchir trop fort à l'endroit où quelque chose pourrait se trouver..
Le site Web de Tuts + Town n'a pas beaucoup de contenu, nous avons donc pu tout aligner et mettre en valeur nos belles images. Si nous devions avoir plus de texte sur le site, cependant, cette mise en page particulière ne fonctionnerait pas aussi bien.
Pour nous assurer que notre site est facile à naviguer et agréable pour l'utilisateur, nous devons réfléchir à sa regarde et ressent. C’est là que les images, la hiérarchie (en précisant l’importance de tout, par rapport à tout le reste), la typographie et la couleur entrent en jeu..
À ce stade, nous savons tout sur l'utilisation des images sur un site Web. Nous avons inclus quatre images sur notre site Tuts + Town et parcouru les différents types d’images à utiliser sur le Web dans un didacticiel précédent..
Quand et où utiliser ces images et graphiques est également important de penser. Toutes les images incluses sur notre site Tuts + Town avaient un sens à côté du contenu avec lequel elles avaient été placées. Par exemple, notre site Web parle de Tuts + Town. Nous avons donc une image nette au sommet d’un bâtiment important de notre ville. Les trois images qui suivent sont liées aux groupes d’entreprises les plus proches: hôtels, restaurants et commerces en général..
Nous avons utilisé ces images pour donner à l’utilisateur une meilleure idée de la ressentir de la ville, ainsi que ce que le shopping sera comme dans nos beaux bâtiments. Il est important de ne pas attirer l'attention d'un utilisateur avec une image qui n'a rien à voir avec le contenu réel avec lequel elle se trouve..
Les icônes sont de petits graphiques utilisés pour représenter quelque chose.
Une bonne icône est bien comprise et peut faciliter la recherche d'informations importantes sur un site Web..
Voici quelques exemples d'icônes particulièrement utiles:
Savez-vous ce que ces icônes signifient probablement?Il y a tellement de choses que nous pouvons communiquer sans utiliser de texte et utiliser des icônes à la place de texte dans la bonne situation nous donnera un site plus propre et plus facile à utiliser.
La hiérarchie visuelle consiste à choisir ce qui se démarque et à montrer la relation entre les informations. La hiérarchie des parties d’un site Web peut être illustrée à travers un certain nombre de styles différents, tels que: couleur, taille, utilisation de l’espace vide et positionnement. Tous ces choix aideront à dire à l'utilisateur ce qui est super important, ce qui l'est moins, et quelles informations sont liées.
La hiérarchie est non seulement illustrée par la taille de notre texte et de nos images, mais également par leur distance les uns par rapport aux autres. Un contenu similaire doit être regroupé et éloigné du contenu non lié.
Cette image de Tuts + Town sky a été conçue pour que le ballon attire tout d’abord l’attention du spectateur, suivi des nuages. Tout le reste dans les images a été rendu moins clair pour que le ballon et les nuages se détachent davantage.
L'image ci-dessus montre un changement dans ce sur quoi nous nous concentrons en premier. Trouvez-vous que vous voyez les nuages en premier cette fois, puis le ballon?
Il y a beaucoup de choses dans cette image et nous ne savons pas par où commencer. Il n'y a pas de changement de couleur, pas d'organisation, et pas d'espacement pour nous dire ce qui est important, ce qui le rend un peu difficile à suivre.
Les espaces sont l'espace vide d'un site. ce n'est pas avoir être blanc cependant! Ce sont ces endroits où il n'y a pas de texte ni d'images. Il est vraiment important de choisir cet espace vide, car il détermine les parties d’un site qui se démarquent et dans quelle mesure nous pouvons en lire le contenu..
L'image ci-dessus est un exemple de site qui n'utilise pas bien les espaces. Il y a beaucoup de contenu et d'images et pas assez d'espace entre eux pour nous montrer ce qui est le plus important.
Voyons si nous pouvons résoudre ce problème!
Beaucoup mieux. Nous avons jeté du contenu non essentiel et créé un hiérarchie avec beaucoup plus d'espaces et une meilleure organisation, facilitant la lecture.
Les espaces que nous avons utilisés sur notre site Tuts + Town sont en fait jaune clair..
Nous avons de grands espaces vides à droite et à gauche de la page, ainsi qu’entre les images. Cet espace permet de mettre en valeur notre contenu tout en veillant à ce que rien ne soit trop encombré..
Rappelles toi! Il est tout aussi important de penser à ce qui ne pas sur le site en tant que tel, et c’est là que les espaces blancs entrent en jeu.
La typographie et la couleur sont si importantes pour la conception Web qu'elles auront leurs propres tutoriels pour suivre celui-ci. Nous allons donc les aborder rapidement ici..
La typographie est l’art de choisir et d’arranger le type de manière à le rendre aussi attrayant et lisible que possible. Bien que notre site Tuts + Town ne contienne pas beaucoup de texte, nous avons beaucoup réfléchi au choix et à la disposition des polices..
Le choix des couleurs est également une partie très puissante du design. Les couleurs ont sens et peut aider à donner aux utilisateurs certaines impressions sur une marque ou un site. Les couleurs Tuts + Town contribuent à créer une atmosphère amusante et accueillante pour notre ville..
Mais encore une fois, nous en parlerons beaucoup plus bientôt!
Dans ce tutoriel, nous avons abordé certains concepts de conception très importants. Après avoir préparé le contenu, nous devons le présenter à notre utilisateur de la manière la plus simple et la plus ordonnée possible..
Le design consiste à rendre les choses faciles et agréables pour les gens. Nous avons atteint cet objectif avec notre site Web Tuts + Town grâce à la mise en page, aux images, à la couleur et aux espaces..
Ensuite, nous discuterons typographie, l'art de choisir et d'arranger le type; une des parties les plus intéressantes et amusantes du design.
On se voit en ville!
Accentsconagua