Avant de se lancer dans la création d’un site, il est important de s’assurer qu’on a en notre possession tous les éléments qui permettront de se simplifier la vie : wireframes, bibliothèques de polices, d’icônes, outils de génération de couleurs, de dégradés, d’effets CSS3 etc. J’ai réuni ci-dessous un grand nombre de ressources webdesign que j’utilise de manière régulière, en espérant que cela puisse également vous aider.
Wireframes
Le wireframe, de son petit nom français "maquette en fil de fer", est le procédé qui consiste à créer un schéma d’un site ou d’une page Internet, en définissant ses différentes zones et composants.
Moqups
Moqups est un outil de création de wireframes en ligne, construit en HTML5. C’est celui-ci que j’ai utilisé pour créer la première ébauche de mon site. Une fois que l’on s’est enregistré, il permet de créer et sauver ses wireframes directement en ligne.
Iplotz
Iplotz permet de créer des wireframes cliquables et navigables. Il existe en version gratuite ou payante.
Pencil Project
Pencil Project est un plugin pour Firefox. Il permet de créer des wireframes, mais également des diagrammes, des interfaces, etc. Il permet ensuite d’exporter ses maquettes au format HTML, Word, Open Office, Pdf…
Balsamiq
Balsamiq est un autre outil très complet de création de maquettes et wireframes, qui propose par exemple 75 composants d’interface et 187 icônes. Il existe une version gratuite et une version payante (79\$ pour une licence une personne).
En savoir plus sur les wireframes…
Typographie
Le choix de la typographie est très important lors de la création d’un site. Il est un élément-clé de la direction artistique générale que l’on souhaite adopter, et ne doit donc surtout pas être négligé. De plus, grâce à la propriété @font-face, réhabilitée par le CSS3, il est très facile d’intégrer des polices plus ou moins "exotiques" sous forme de contenu texte.
Google fonts
Google Web Fonts est le service de fontes web gratuit de Google; il offre un large choix de fontes et son utilisation est de plus assez simple : il suffit de rajouter une ligne de code dans votre HTML et d’appeler la police dans votre CSS et le tour est joué.
Typekit
Typekit est le service de fontes en ligne d’Adobe. Il propose un très large choix de polices de qualité. Il existe une version gratuite ainsi que différentes versions payantes (à partir de 24.99\$).
Fonts.com
Fonts.com est un incontournable : il est possible de trouver à peu près tous les types de fontes en téléchargement (payant).
Font Squirrel
Font Squirrel : encore un incontournable, ce site propose non seulement un très large choix de polices mais aussi un outil de génération de @font-face, qui permet de télécharger un kit complet à intégrer facilement sur son site.
Website Planet
Website Planet propose plus de 70 polices gratuites pour les designers, ainsi que quelques polices à éviter à tout prix.
D’autres exemples de sites : MyFonts, Font Fabric, 1001 Free Fonts…
Couleurs
Comment choisir les couleurs pour son site ? Il existe là aussi de nombreux outils qui proposent différentes combinaisons de couleurs pour vous faciliter la vie.
Kuler
Adobe Kuler offre de nombreuses possibilités de combinaisons de couleurs.
Color Scheme
Color Scheme Designer est un outil de génération de couleurs en ligne, permettant de marier jusqu’à 4 familles de couleurs ensemble.
Colour Lovers
Colour Lovers propose une grande variété de palettes de couleurs, plus ou moins sur le même mode de fonctionnement que Kuler.
Sphere
Sphere fonctionne sur le même principe que Color Scheme Designer. Il permet de sélectionner jusqu’à 6 couleurs proches pour les combiner ensemble.
Motifs
Bien utilisés, les motifs rajoutent un vrai plus au design global de votre site. Bien entendu, il faut éviter d’en abuser ou de les mélanger à tort et à travers…
Subtle Patterns
Subtle Patterns est mon site de référence en termes de motifs. Les textures proposées sont peu agressives, et ajouteront une touche élégante à votre design, tout en subtilité.
Ava 7
Ava 7 Patterns propose des motifs sympathiques, souvent assez colorés. Le site permet par ailleurs de les trier par couleurs et par formes (lignes horizontales, verticales, diagonales etc.).
Squidfingers
Squidfingers.com est une autre alternative, qui propose 158 motifs plutôt variés et originaux.
Colour Lovers
Colour Lovers propose en plus de sa palette de couleurs de nombreux motifs de tout genre.
Icônes
Les icônes sont une composante importante de votre site, elles permettent de schématiser et/ou de mettre en exergue certains de ses éléments de façon claire. Voici une liste de sites qui proposent un choix quasiment illimité d’icônes :
Icônes.pro
Icones.pro est un site français sur lequel sont référencées plus de 200 000 icônes différentes, une véritable référence en la matière !
Icon finder
Icon Finder propose également plus de 200 000 icônes en téléchargement.
Find icons
Find Icons : un autre moteur de recherche, avec 150 000 icônes disponibles.
Icon Dock
Icon Dock, contrairement aux sites ci-dessus, est payant. Le choix est large, et les icônes sont d’excellente qualité.
Ressources supplémentaires
- Box Shadows : générateurs de box-shadows CSS en ligne
- Ultimate CSS gradient editor : générateur de dégradés CSS en ligne
- CSS3 buttons : différents exemples de boutons en CSS3
- Bg maker : créez vous-même votre background pixel par pixel.
- The Photoshop etiquette : 40 règles à respecter pour améliorer la clarté de vos fichiers PSD.
- Listicons : une liste de puces et icônes sous forme de fonte web.
- Raphaël Icon set : icônes disponibles en tant que fonte web.
- Juicebox : pour créer facilement des galeries d’images sur différents supports.
- Patternry : une bibliothèque de ressources front-end open-source (pagination, barres de progression, formulaires de contact…).
Pour plus d’informations, je vous invite à consulter le Kit du parfait Webdesigner publié par le Blog du Webdesign, un guide très complet qui inclut beaucoup de liens et ressources utiles.