La boite à outils du webdesign
Posté le 5 mai 2012 dans Infographie, Ressources, Webdesign par Identitools.
Je fais face à un constat affligeant, mon blog s’appelle Identitools et depuis quelques temps je n’ai plus présenté un seul outil, enfin presque.
Pour me faire pardonner, voilà une « petite » sélection piochée au fil du web, certains liens prenant la poussière dans les tiroirs depuis un bon bout de temps déjà. Je ne chercherai pas à être exhaustif mais à présenter uniquement le meilleur. Bien sûr vous pouvez rajouter des liens dans les commentaires et en profiter pour ajouter cet article dans vos favoris 😉
Intégration, HTML, CSS :
- CSS Vocabulary : pour clarifier les termes utilisées en CSS.
- Typography quick tips : une mise au point sur la typographie (certains passages ne sont valable que pour l’anglais).
- 100 free HTML email templates : le titre parle de lui même, si vous avez déjà souffert des contraintes de l’intégration mail vous apprécierez cette ressource.
- Google Fonts : pour intégrer en quelques clics des polices non standard sur vos sites.
- Font Squirrel : un catalogue plus vaste que Google Fonts avec en prime la possibilité d’uploader ses propres fontes personnalisées.
- The Guide To CSS Animations : pour maitriser les animations keyframes en css3.
- Beautiful web type combinations : des exemples associations de fontes web.
- Bazardez photoshop : un article sur le design directement dans le navigateur.
- Ultimate jQuery List : pour faire sa sélections de plugins jQuery.
- Cross-Browser Debugging CSS : pour explorer les joies des préfixes navigateurs et d’internet explorer…
- Animate Mixin for Compass/SASS : une bibliothèque d’animations CSS3.
- Sass – Syntactically Awesome Stylesheets : un préprocesseur CSS pour des projets robustes et rapides à réaliser.
- Compass : une énorme bibliothèque pour SASS.
- Scout App : pour ceux qui désirent utiliser une interface graphique pour Sass/Compass.
- Zen-coding : pour coder plus vite et plus propre ! Un plugin disponible pour de nombreux IDE.
- Sublime Text : très certainement le digne sucesseur de Notepad++, non libre par contre.
- Codrops : des tutoriels pour CSS3 & jQuery, une véritable perle !
- CSSDeck : une galerie pour inspirer vos prochains projets CSS3.
- CSS-Tricks : le site bien connu des astuces CSS.
- Grafikart : un site de tutoriels vidéo francophone.
- Pure CSS3 Content Slider : un slider magnifique en CSS3
- Megaptery : le site de qualité d’un partenaire sur le développement web.
- Cross-browser validator : une version « gratuite » mais utile bien que limité.
- La qualité d’une intégration : le titre parle de lui-même.
- CSS3 Selector Level 3 : une référence facile et rapide à parcourir.
- Let’s Talk about Semantics : un article très intéressant sur la sémantique en HTML5.
- La conception dans le navigateur, serai-elle un frein pour le processus de création ?
- IE7nomore : des démos CSS2/CSS3 l’important ici est de voir les possibilités offertes par CSS2 bien souvent ignorées à cause de la suprématie d’internet explorer pendant tant d’années.
- Alsacreations : un site francophone bien connu sur les standards du web.
- Openweb.eu.org : une autre star du même genre.
- Golden Ratio Calculator : pour baser vos designs sur le nombre d’or.
- HTML5 Snippets : des snippets HTML5/CSS3.
- Astuces CSS : les astuces CSS de BBX.
- Stop Arial 11px ! Un billet d’humeur intéressant à lire.
- HTML5 Boilerplate : pour travailler avec une base propre. Indispensable !
- UwAmp : un serveur Apache/PHP/MySQL de qualité.
- PrimerCSS : créer une feuille de style CSS de base à partir de votre code HTML.
- HAML : un projet dans la même veine que SASS, à essayer !
- Ultimate CSS Gratient Generator : un sympathique générateur de dégradés CSS3 compatibles cross-browser, pas si utile que ça si l’on utilise déjà Sass.
- Accessibility Tools & Wizards : des outils centrés sur l’accessibilité, intéressant.
- RainTPL : un moteur de template à tester pour vos projets.
- Incosolata : la police idéale pour votre IDE.
- Pompage.net : des traductions libres d’articles anglais sur l’intégration.
- /r/css : le reddit consacré au CSS.
WordPress :
- WordPress Codex : la documentation de référence à consulter en priorité !
- WP-Snippets : une vaste collection de snippets pour votre WordPress.
- Geekeries : un site consacré à WordPress & ses plugins.
- WordPress Channel : encore un site de qualité sur WordPress.
- GeekPress : et encore un !
- Weepi : et un autre.
- Créer un thème de A à Z : l’excellent tutoriel de BBX, avec en prime un fichier d’exercice.
- Rémy Perona : un blog intéressant spécialisé WordPress.
- The Loop : par le même auteur.
- /r/Wordpress/ : l’indispensable subreddit WordPress.
Photoshop, design & ressources graphiques :
- 365psd : un .psd de qualité par jour, excellent pour s’inspirer.
- Launched Pixels : une autre collection de fichiers photoshop.
- Mastering Photoshop : un article de Smashing Magazine sur les différentes techniques de rendu sous photoshop.
- Fonts In Use : un site présentant l’utilisation de certaines polices dans des travaux artistiques.
- Note & Point : de l’inspiration pour vos présentations.
- FPO : « for print only », une galerie pour vous inspirer dans vos créations print.
- The Anatomy of a Perfect Landing Page : une infographie pour vos pages d’accueil.
- 100 Principles for Designing Logos and Building Brands : une ressource plus qu’utile pour vos chartes graphiques.
- Design Is History : le design à travers l’histoire.
- Dark Patterns : un wiki mettant à jour des techniques de design prévues pour jouer sur la psychologie de l’internaute.
- Noun Project : une collection de magnifiques icônes sous licence creative commons, une merveille.
- Robot Regime : l’éthique & le design.
- Designmoo : le plein de .psd, textures, icones…
- Forrst : pour votre inspiration graphique.
- Design Kindle : des ressources photoshop.
- Pixeden : encore des ressources.
- Premium Pixels : et encore…
- 5 Simple Tricks To Bring Light & Shadow into your Designs : sur les effets de lumière dans les maquettes de site web.
- An explanation of Photoshop Blending Modes : un guide rapide sur les modes de fusion photoshop.
- Subtle Patterns : des textures répétables de qualité.
- Find the Perfect Colors for Your Website : une liste d’outils & ressources pour choisir vos couleurs.
Articles divers :
- Should I Work for Free : une infographie amusante, le titre parle de lui-même.
- Ebook list : une énorme liste d’ebook libres sur le thème de la programmation.
- Débuter avec Git : d’autres ressources existent sur ce thème mais celle-là trainait dans les tiroirs alors…
- Clients From Hell : des anecdotes façon « vie de merde » sur les relations client/prestataire dans le domaine de la créa web.
- Web Agency FAIL : même chose qu’au dessus mais en français.
- L’effet diligence : sur l’acceptation des nouvelles technologies par le grand public.
- Simplicity Isn’t Simple : sur le concept de « simplicité ». Vaut pour beaucoup de domaines.
- Good. Cheap, fast. Considering Website Construction : sur le rapport qualité/prix/temps d’un site web.
- Photoshop Troll : je vous laisse découvrir ^^
- Entretien d’embauche : les limites du test de pré-sélection.
- La typographie comme outil de design (David Rault) : une conférence de qualité !
- La macrotypographie de la page Web (Anne-Sophie Fradier) : sa suite, toujours aussi bon.
- 8 Things Designers Should Teach Their Clients : sur l’intérêt d’éduquer ses clients.
- Grille tarifaire 2009, 2010, 2011 et 2012 pour les graphistes, infographistes et webdesigners freelance recherchant un ordre de prix pour un site web, flyer, brochure, catalogue, logo, carte de visite, affiche ou autre prestation graphique. (joli l’accumulation de mots clefs ^^’)
- Pourquoi les développeurs travaillent ils la nuit ? La réponse est dans l’article
- Why working at home is both awesome and horrible : le comic sur le télétravail de the Oatmeal.
- How a Web Design Goes Straight to Hell : la même chose sur les relations prestataire/client.
- 8 Websites You Need to Stop building : encore du Oatmeal sur cette fois les « tendances » web.
C’est tout ?
Oui, par moment il m’arrive de dormir et même de manger donc je vais m’arrêter là du moins pour l’instant, je rappelle encore une fois que vous pouvez contribuer à agrandir cette liste via les commentaires (je ferai des mises à jour régulièrement, après tout cette liste me sert aussi) ainsi que de partager cet article via les boutons ci-dessous, m’envoyer des poneys, demander la création d’une fête en mon honneur dans le calendrier…
[photo]
10 réponses à “La boite à outils du webdesign”
Bah mon p’tit père 😮
Je sens que je vais en profiter ! Ma modeste contribution
1) pour générer automatiquement
– positionnement
http://www.spritebox.net/
– balises
http://blog.idleman.fr/?p=921
– couleurs/ombres/styles/boutons
http://www.cssbuttongenerator.com/
http://gradients.glrzad.com/
http://css3generator.com/
2) Les nouvelles techniques pour p0wn le javascript
– propriétés
http://lehollandaisvolant.net/tuto/css3/
– « tutos » et exemples particuliers
http://lehollandaisvolant.net/tuto/css.php
http://www.siteduzero.com/tutoriel-3-383100-tp-diaporama-original-en-css.html
– des tas de designs en moins d’un kio
http://css1k.com/#stripes
3) Du HTML 5
– un kit, le boilerplate
http://www.joffrey-quillet.fr/html5-boilerplate/
– des attributs
http://www.alsacreations.com/tuto/lire/1392-formulaire-html5-placeholder-required-pattern.html
– et ça
http://www.catswhocode.com/blog/7-new-techniques-every-web-developer-should-know
– contenteditable, une balise de ouf’ – avec un peu d’adaptation, on pourrait coder directement dans le navigateur (et bien plus facilement) – à voir
http://lehollandaisvolant.net/index.php?2012/01/11/17/56/43-astuce-html5-contenteditable
Ah enfin quelqu’un qui se décide à contribuer
Je ferai une mise à jour dès qu’assez de monde aura ajouté son grain de sel histoire de tout faire en une fois, merci.
Sans oublier une bonne dose de bon sens. Une chose qu’on a trop tendance à oublier en webdesign c’est l’information qu’on souhaite montrer aux internautes :
Je ne suis pas forcément fan du texte blanc surligné en rouge/orangé, mais c’est un choix que je respecte. Par contre, je n’ai pas lu l’article en entier car:
– l’image de fond capture trop le regard
– le texte en gris est quasiment illisible sur mon écran
–
Avant de parler de sprites, javascript, polices de caractères, ne pas oublier qu’il est préconisé d’utiliser du texte très foncé sur fond clair.
Dès ce soir j’essaie de faire le plus difficile : trier dans mes ressources celles que tu as déjà citées.
@PM : Je ne vois pas le problème avec l’image de fond, à moins d’avoir des troubles de l’attention c’est juste une texture qui se répète, pour ma part je trouve le contenu mis en valeur, un peu comme une feuille de papier sur un bureau. Par contre je ne peux pas en dire autant des blogs comportant une tonne de publicités.
Quand au choix de la couleur du texte c’est du #7a7a7a, ce choix à été fait afin de créer un contraste entre les titres et le contenu sans utiliser d’artifices, en restant sobre.
Je pourrais pourquoi pas passer le texte en #666 ou quelque chose du genre, le contraste est moins visible mais ce sera peut-être mieux ainsi.
Le « texte très foncé sur fond clair » n’est pas toujours une bonne idée, pour différentier deux éléments en typographie j’ai le choix entre :
– Un contraste de graisse (gras, ou non)
– Un contraste de couleur
– Un contraste de taille
– Un contraste de forme (police)
– Un contraste de luminosité. (j’ai donc choisi celui-ci)
Je prends note de ta remarque et j’effectuerai peut-être quelques changements dans ce sens, mais il ne faut oublier non plus que connaitre les règles en webdesign c’est bien, savoir les briser c’est mieux.
Merci de ton retour.
@PostBlue : J’en ai déjà mis de côté une petite vingtaine pour la future mise à jour, tu va souffrir je pense 😉
Morceau choisi : http://screenqueri.es/
Je viens de me rappeler que c’est une compilation de liens du shaarli de Sebsauvage, en fait ; je n’y suis pas pour grand chose, sinon de les avoir regroupés –‘
Quant au design de ton site, ce qui me gêne davantage, c’est la barre horizontale en haut : avec les nouveaux types d’écrans (plus larges que haut), on perd beaucoup de place, ça devient vraiment gênant. La faute en priorité aux fabricants, on est bien d’accord, mais c’est une contrainte physique à laquelle il faut s’adapter.
Alors qu’il y a toute une portion libre sur la gauche, qui n’attend que ton CSS 😉
Je note.
Dès que j’ai un peu de temps je m’en occupe, en attendant j’ai cette petite liste qui attends bien au chaud : http://img192.imageshack.us/img192/2285/todo070512.jpg
[…] identitools.fr – Today, 9:43 PM […]
[…] pas au tutoriel sur l’animation de la trollface en css3 ni à une nouvelle édition de la boite à outils du webdesign mais plutôt une liste de jeux qui ont un véritable don : celui de vous rendre complètement con […]
[…] identitools.fr – Today, 8:28 AM […]