Super Formateur HTML & CSS bientôt dans la place ?

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Super Formateur HTML & CSS bientôt dans la place ?

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
logo formateur html5 & css3

Logo Formateur en deux couleurs sur fond blanc.

Déclinaison avec un fond plus dynamique pour rendre le logo moins statique
logo-formation-html-css-version-2

Logo Formateur en deux couleurs sur fond gris «pêchu».

 

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.

Exemple zoning page d'accueil

Exemple de placement du logo Formateur.

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

Changement de couleur en restant dans la charte du logo HTML5

Affinage du dégradé radial et ajout d’un fond gris

Allez, un petit avant-dernier pour la route

Suppression du fond gris

Et un petit dernier pour la route pour finir ;-)

Exemple zoning page accueil logo bleu

En bref

N’hésitez pas à donner votre avis tant sur le fond que sur la forme pour faire avancer le «schmilblick». Merci o/

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



19 commentaires pour “Super Formateur HTML & CSS bientôt dans la place ?”

  1. e_d dit :

    les contres formes me font penser à un jonglé de couteau et de hachoirs : D très dynamique dans tous les cas. I like!

  2. HTeuMeuLeu dit :

    Ca m’a beaucoup fait pensé (beaucoup beaucoup) au logo de Smashing Magazine…

  3. megzp dit :

    ça ressemble vraiment beaucoup à Smashing Mag quand même non?

  4. Papa Sentu. dit :

    J’aime bien ce logo, ça donne une image spéciale à la formation ;) Et je serai bien intéressé par cette formation justement

  5. DuaelFr dit :

    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 :)

  6. Eric Le Bihan dit :

    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 ?

    • br1o dit :

      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 ^__^

  7. Eroan dit :

    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.

  8. Chris dit :

    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 !

  9. Oupper dit :

    Je trouve juste le terme « super » trop prétencieux

  10. 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 ! ;-)

  11. br1o dit :

    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 ;)

    • Anonyme dit :

      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 ?

  12. Alain Wick dit :

    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 »)….

  13. Shao69 dit :

    Même avis que beaucoup, j’aime bien mais cela me rappelle smashing magazine

  14. walter wizman dit :

    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



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site