Voici le UI-kit reprenant les caractéristiques graphiques de ce projet. Ci-dessous se trouvent l'explication de toutes ces caractéristiques.
Typographie
- Sniglet : police "display" utilisée pour les titres.
- Sniglet et Nunito : bold, mettant les titres en évidence.
- Questrial : regular, montrant que le texte est simple, sans éléments importants.
- Couleur (titres) : #009fa1, les teintes bleutées étant généralement les préférées des gens (ou du moins, des plus populaires).
- Couleur (texte) : noir en light mode, blanc en dark mode, contrastant avec le fond.
- Interligne : 180%, supérieur au minimum de 140% (utilisé en imprimerie).
Autres couleurs
- Fond : blanc (light mode) ou noir (dark mode) pour avoir un constraste maximum avec les éléments.
- Eléments contrastés : orange, couleur chaude contrastant avec la couleur froide qu'est le bleu.
- Liens visités : violet, à l'instar des liens visités habituels.
Images
- Logo : le site s'appellant "Hello World", le logo est un monde ("World"), la Terre, reprenant les deux couleurs de mise en valeur du site en plus de mon nom.
- Avatar : l'éléphant est l'animal me représentant.
Liens
- Header/footer : mis en avant par le contraste.
- Cadre : montre clairement quelle page est visitée actuellement.
Dark Mode
- Lune et soleil: représentent le dark mode ou light mode.
-
Boutons
- Fond : couleur représentative du réseau social.
- Pictos : fond blanc contrastant avec le fond des boutons.
Header/Footer
- Fond : étoilé, renvoyant au "World" de Hello Word (le monde étant composé d'étoiles).