Mastodon

4design
Le design n’est pas seulement l’apparence, c’est aussi la manière de fonctionner — Steve Jobs
Navigation principale
Aller au contenu
  • Graphisme
  • Traductions
  • HTML / CSS
  • Javascript
  • WordPress
  • Montage Vidéo
  • Mizukara
Métiers du 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/

Publié le 30 mars 2011 par Bruno Bichet
Publié dans Métiers du web et tagué CSS3, Edito, Formateur Web, Formation, HTML5, Identité visuelle, logo, Portfolio. Mettez le permalien dans vos favoris.

19 thoughts on “Super Formateur HTML & CSS bientôt dans la place ?”

  1. e_d dit :
    30 mars 2011 à 11 h 52 min

    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 :
    30 mars 2011 à 11 h 59 min

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

  3. megzp dit :
    30 mars 2011 à 12 h 00 min

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

    1. e_d dit :
      30 mars 2011 à 12 h 13 min

      non…
      Mais ça n’engage que moi hein…

  4. Papa Sentu. dit :
    30 mars 2011 à 12 h 23 min

    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 :
    30 mars 2011 à 13 h 05 min

    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 :
    30 mars 2011 à 13 h 24 min

    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 ?

    1. br1o dit :
      30 mars 2011 à 15 h 49 min

      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 :
    30 mars 2011 à 13 h 29 min

    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 :
    30 mars 2011 à 13 h 54 min

    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 :
    30 mars 2011 à 14 h 38 min

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

    1. br1o dit :
      1 avril 2011 à 20 h 47 min

      Trop prétentieux… Par rapport à quoi, exactement ?

  10. Francis Chouquet dit :
    30 mars 2011 à 15 h 11 min

    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 :
    30 mars 2011 à 15 h 25 min

    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 😉

    1. Anonyme dit :
      1 avril 2011 à 20 h 15 min

      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 :
    31 mars 2011 à 7 h 36 min

    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 :
    1 avril 2011 à 7 h 03 min

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

  14. walter wizman dit :
    3 avril 2011 à 17 h 32 min

    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

    1. br1o dit :
      4 avril 2011 à 0 h 00 min

      arf, c’est balot… Et dire que j’avais tout pompé sur http://fr.wikipedia.org/wiki/Fichier:S-Bahn_Austria.svg ^__^v

Les commentaires sont fermés.

Rechercher

Rechercher :

Colophon

© 2023 4design Logo WordPress je thème — Contactez l'administrateur — Avec WordPress ! ♥ Thème : Basics Par Bruno Bichet

piaille.fr | mastodon.xyz