Je travaille encore sur mon projet de plan de cours pour une formation destinée à celles et ceux qui souhaitent se spécialiser dans l’intégration HTML & CSS dans le respect des standards du web, des bonnes pratiques, des maquettes et des performances. Pour donner corps à ce projet et me sortir un peu la tête du guidon de tâches moins (ré)créatives, je me suis lancé dans la création d’une identité graphique pour cette activité de formateur. A commencer par le logo et un semblant de mise en contexte sous forme de page d’accueil.
Logo + déclinaison
Après avoir donné mon opinion sur la nouvelle identité visuelle des technologies HTML5 du W3C — et avec un peu plus de recul — je me suis dit qu’il y avait de bonnes idées à prendre à condition de rester dans un esprit potache et ludique (en enlevant le côté trop militaire, donc).
Je pense être resté en phase avec la modernité de HTML5 avec ce logo que je destine à un projet de formation HTML5 et CSS3. Le nom de domaine devrait inclure le terme «formateur».
Projet de logo pour une activité de formateur en création de site web orienté html5 et css3
Déclinaison avec un fond plus dynamique pour rendre le logo moins statique
Couleur & typographie
- Akzidenz-Grotesk pour la lettre S avec un gros soupçon de déformation,
- Gotham pour le terme FORMATEUR en jouant sur les approches de paires,
- Code couleur prélevé avec soin sur le logo HTML5 du W3C.
Logo sur page d’accueil
Pour finir, voici un exemple de mise en scène du logo sous forme de page d’accueil pour un site web ayant pour objectif de présenter des plans de cours.
Logo Formateur Reloaded
Suite aux remarques concernant la ressemblance avec Smashing Magazine, j’ai modifié le code couleur. Je ne suis pas fan du bleu en général, mais j’aimerais tant que faire se peut garder le code couleur de la charte graphique HTML5.
Dégradé radial pour donner du volume et attirer l’attention sur les contreformes plutôt que sur le «S». Agrandissement du logo HTML5
Affinage du dégradé radial et ajout d’un fond gris
Suppression du fond gris
En bref
N’hésitez pas à donner votre avis tant sur le fond que sur la forme pour faire avancer le «schmilblick». Merci o/
les contres formes me font penser à un jonglé de couteau et de hachoirs : D très dynamique dans tous les cas. I like!
Ca m’a beaucoup fait pensé (beaucoup beaucoup) au logo de Smashing Magazine…
ça ressemble vraiment beaucoup à Smashing Mag quand même non?
non…
Mais ça n’engage que moi hein…
J’aime bien ce logo, ça donne une image spéciale à la formation 😉
Et je serai bien intéressé par cette formation justement
J’aime beaucoup le « S » par contre je trouve qu’il tranche trop avec l’aspect monolithique du « formateur ».
Dans tout les cas ta démarche autour de cette formation me plaît bien et le premier jet de programme semble prometteur ! Je suivrai ça de près 🙂
Hello, hormis que le logo est le logo de Smashing Magazine plus ou moins modifié et à mon avis pas utilisable car prêtant trop à confusion, j’ai du mal à comprendre la démarche. Est-ce que c’est une proposition de formation à mettre en place avec un organisme, que tu veux mettre en place toi même avec des formateurs ou juste une idée élaborée que tu partages avec tes lecteurs ?
En gros, la démarche est plus ou moins évoquée dans l’article http://css4design.com/formation-integrateur-html5-css3
Pour la mise en oeuvre, je suis ouvert à pas mal de concepts : du coaching en entreprise, formation à la semaine ou au moins en centre de formation, en inter-entreprise, consulting, etc. En attendant, je mets en place doucement un plan de formation en ciblant les personnes qui ont déjà un peu d’expérience en création de site ou qui sortent de formation de type full Dreamweaver et qui veulent aller plus loin dans le web.
Pour le logo, ma foi, comme je le dis dans un commentaire (plus bas ou plus haut selon les préférences de chacun) je me sens assez à l’aise vu qu’il ne date pas d’hier. Après, si vraiment ça pose des problèmes existentiels à la majorité (ou à Smashing Mag), j’aviserai : j’en ai encore un peu sous la santiag’ pour faire autre chose, même si ça fait longtemps que je suis attaché à mon « S » de Superman ^__^
Excellente idée, je suis certain qu’une telle formation contribuerait à généraliser les bonnes pratiques du développement « respectueux des standards ».
Comme le disent d’autres commentateurs, reste à vois sous quelle forme cette formation s’organiserait. Tout reste à définir et un tel projet risque de prendre énormément de temps.
Bonjour, je commence à suivre votre blog depuis quelques jours. Il est très intéressant, je vous remercie pour son contenu.
Je vous donne mon humble avis, en espérant que cela puisse vous être utile : Ne connaissant pas les raisons pour lesquelles vous avez choisi « S + formateur » je ne peux juger du fond. Pour ce qui est de la forme, je trouve que la typo ainsi que les logo collent tout à fait… à l’univers du bricolage et de l’outillage. Sincèrement, j’ai tout de suite vu la marque Karcher par exemple coller à votre typo. Je ne sais pas quel style vous souhaitez donner à cette identité visuelle, mais à mon sens vous perdez, avec ce logo, la dimension créative et libre qu’offre la création de sites web. En me plaçant en tant que candidat à la formation, je ne peux m’empêcher de ressentir une forme de rigueur, rigidité.
My two cents, bon courage à vous !
Je trouve juste le terme « super » trop prétencieux
Trop prétentieux… Par rapport à quoi, exactement ?
Moi aussi je trouve que le logo fait 100% Smashing Magazine, et je dois bien avouer que je ne comprends pas trop la signification du « S », C’est pour « Super » ?
Sinon, concernant le fond, je serais curieux d’en savoir un peu plus sur cette formation, ça m’intéresse ! En tout cas, ça peut être un beau projet ! 😉
Arf, si je dis que je n’ai pas du tout pensé à Smashing Magazine, personne ne va me croire et pourtant c’est vrai ^^ Bon, en même temps, SM fait partie de mes références culturelles, donc, le rapprochement ne me choque pas.
Au départ, mon idée était plutôt de jouer sur le côté Superman du S en clin d’oeil avec le côté Super Héros de la nouvelle identité graphique de HTML5 commandité par le W3C dont j’ai repris le code couleur.
Après, j’imagine que toute trituration de la lettre S en contreforme (surtout avec des couleurs rouge-orange) finira fatalement par ressembler à Smashing Mag pour ceux qui connaissent le site.
(Heureusement que je ne suis pas parti sur la lettre C en contreforme avec du bleu et du rouge ^__^v)
PS : Pour la petite histoire, j’ai réalisé la partie du logo avec la lettre « S » il y a plusieurs années pour un pote qui avait monté une entreprise qui s’appelait S-VIDEO (du nom de la prise) et qui ne l’a pas utilisé, d’où le recyclage. Bien avant de connaitre Smashing Mag en tout cas. Autant dire que je me sens grave à l’aise dans mes basquettes 😉
La ressemblance avec le logo du célèbre magazine est en effet assez évidente. Si tu tiens absolument à conserver le S et à le mettre en rapport avec l’identité graphique du W3C, pourquoi ne pas utiliser alors leur écusson de base ou une forme approchante (ça ressemblera par ailleurs plus à l’identité de Superman, soit dit en passant), quitte à supprimer le logo du W3C à côté de formateur ?
le centrage du logo sur la page d’accueil est excellent, par contre je suis un plus réticent quant au design du logo (trop « Smashing Mag »)….
Même avis que beaucoup, j’aime bien mais cela me rappelle smashing magazine
Bonsoir…
J’ai du mal à me sortir de l’icone SKYPE de mon iphone avec la version bleue ! Et j’ai aussi du mal à comprendre le blason pour HTML 5 qui n’amène pas grand chose dans la compréhension de ce langage ou même en termes de communication !
Le contenu de ton blog est toujours aussi….. utile et perfect pour des gens comme moi !
🙂
tkx
arf, c’est balot… Et dire que j’avais tout pompé sur http://fr.wikipedia.org/wiki/Fichier:S-Bahn_Austria.svg ^__^v