La boîte à outils du dev front débutant

Published by Cédric on October 25, 2014


Suite à la vidéo - The Rocket Landing - voici un listing de plus d'une vingtaine d'outils et ressources (frameworks, extensions, banques d'images, bibliothèques de polices...) faciles à prendre en main afin d'optimiser le design de vos récentes créations.

Frameworks Bootstrap et Zurb

Frameworks

Si vous souhaitez tester une idée rapidement, alors les frameworks CSS sont un véritable pain bénit avec lesquels vous construirez l'intégralité de votre landing page en utilisant simplement le markup HTML. Bootstrap est de loin le plus connu, mais n'hésitez pas à jeter un oeil du côté de Zurb Foundation. Quelques fonctionnalités ainsi que la patte graphique diffèrent, mais si vous avez déjà testé l'un ou l'autre vous devriez retrouver vos marques aisément. À l'occasion Webplate est également une option intéressante à considérer (attention, quelques connaissances en Sass sont demandées.)

Images & icônes

Il peut être fastidieux de chercher, explorer et fouiller dans les tréfonds du web pour trouver des photos libres de droits. Bien heureusement, The Stocks et All the Free Stocks agrègent à eux deux plus de 50 banques d'images et sites de photographes généreux pour votre plus grand plaisir.

Indispensables, les icônes font sens rapidement auprès des utilisateurs et sont souvent plébiscités par les web designers et marketeurs. The Noun Project et Font Awesome vous offrent un choix conséquent pour débuter.

Couleur

Les goûts et les couleurs se chinent ici et là sur le web en utilisant l'excellente extension Color Zilla. Elles peuvent également se créer en jouant avec Adobe Color CC et Coolors. Ces deux outils élargiront votre kaléidoscope personnel en générant des tons parfaitement assortis afin de ménager la rétine de vos utilisateurs. À utiliser sans modération !

Choisissez vos couleurs avec soin

Font

Pour de nombreuses personnes, la typographie est un art. Celle-ci répond en effet à de nombreuses règles très spécifiques qu'il est relativement complexe d'appliquer. Toutefois, vous trouverez sur l'Interactive Guide to Blog Typography un condensé de recommandations simples à mettre en oeuvre. Pour ce qui est du choix, l'extension Fontface Ninja vous permettra depuis votre navigateur de répertorier le nom des fonts de vos sites préférés. De leur côté, Google Font, Font Squirel et Dafont regorgent de trésors typographiques à essayer via des snippets à insérer dans votre code.

Les services indispensables

De plus en plus de CTO utilisent et recommandent des services simples et légers d'utilisation. C'est le cas du live-chat Olark dont nous vous avions parlé la semaine dernière. Disqus s'occupe de la gestion de votre système de commentaires moyennant un copier/coller dans votre code HTML. Il en va de même pour Brace Form, Form Keep et Wufoo qui prendront en charge votre formulaire de contact sans avoir à installer de base de données ou à coder la moindre requête AJAX. Plutôt sympathique non ?

Simplifiez-vous la vie !

En bonus

Afin de se tenir informé des dernières tendances en Web Design, il fait toujours bon de visiter Smashing Magazine de temps à autre. Il en va de même pour Google Material Design. Si vous cherchez des annuaires de ressources pour des besoins spécifiques ou une procrastination de qualité Oozled, Panda et Agile Designers combleront vos attentes.

Pour les plus avancés d'entre vous, Good UI vous offre un ensemble de best practices et d'idées testées et approuvées pour rendre votre site web irrésistible.

Vous vous en doutez, cette liste est loin d'être exhaustive. N'hésitez surtout pas à partager et faire découvrir à la communauté d'autres ressources en laissant un commentaire ci-dessous !