David Torondel / Portfolio | Blog
19795
paged,page-template,page-template-blog-large-image-whole-post,page-template-blog-large-image-whole-post-php,page,page-id-19795,paged-5,page-paged-5,ajax_updown,page_not_loaded,,vertical_menu_enabled,wpb-js-composer js-comp-ver-4.2.3,vc_responsive

Compagnons de cordée – logo et site internet

« Compagnons de cordée » : le terme évoque la montagne, l’alpinisme, l’entraide… mais en l’occurence il s’agit d’une société d’accompagnement dans domaine du recrutement online. J’ai été contacté il y a quelques mois par Laurent Joseph, une sorte d’énergumène très bavard, qui était dans la phase de création de cette société. Il avait le nom, « Compagnons de cordée », et m’a demandé de concevoir le logo. Sachant qu’il a pour principe de travailler « autrement », le nom étant proche de ses valeurs et de sa façon de travailler. Par exemple pour logo nous avons travaillé à plusieurs, un DA, Pierre, donnant des directives « symboliques », et Anne Cécile une autre graphiste faisant aussi des propositions. Le tout absolument pas sur le mode « mise en concurrence », mais au contraire dans l’objectif d’une saine émulation. C’est ce qui m’a plu dans ce travail, tout se fait dans un but réellement constructif. Laurent Joseph n’est pas un client « ordinaire », il a des valeurs et un fonctionnement qui font que la relation devient enrichissante pour tout le monde, son but est d’aller plus loin qu’une simple relation « client/fournisseur ». Il veut toujours aller plus loin, faire le mieux possible. Il y a parfois des clients qui sont « trop exigeants », dans le sens ou ils essayent d’avoir plus que ce qui était prévu au départ, qui cherchent juste le profit. Ce qui n’est pas du tout son cas, au contraire. Il s’agit juste d’une volonté de bien faire, pour que ce soit enrichissant pour tout le monde. Ce qui va tout à fait dans le sens de ma façon de travailler, si je me suis installé en indépendant, c’était justement pour travailler « autrement ».

Le brief initial était de concevoir un logo reprenant la symbolique de 2 mousquetons, symboliques du lien, du travail d’équipe, de la solidarité… Design épuré, plus suggestif que réaliste.

Ci dessous les premières pistes que j’ai réalisées :

Logo Compagnons de cordée - premiers essais

Les polices utilisées : A – Qlassik / B – Libel / C – Cocon

Anne-Cécile avait elle proposé une piste plus figurative, représentant 3 alpinistes. J’ai donc par la suite retravaillé sur cette piste, mais de manière plus figurative, en essayant d’épurer de plus en plus, ce qui a donné ces deux autres essais :

Les polices utilisées : D – Med regular / E – Rotis semi serif

La proposition E étant celle que nous avons décidé de retenir sur la forme, mais pour laquelle j’ai retravaillé les couleurs, ce qui a donné cette version finale (la police finale retenue est du Fertigo) :

Compagnons de cordée - logo final

La suite a été  de mettre en place un site internet, la solution retenue a été d’utiliser le moteur WordPress et de personnaliser un thème existant, le résultat est en ligne officiellement depuis aujourd’hui !

Cliquez sur l’image ci-dessous pour y accéder :

Site compagnons de cordée

Read More

SiteW – charte graphique du site internet

J’ai été contacté il y a quelques mois par les dirigeants du site internet www.sitew.com. Il s’agit d’un site internet proposant un outil de création de site internet, selon des templates existant, tout est automatisé. Ils m’ont demandé si je pouvais travailler à une refonte de leur site internet. Pour être franc j’étais d’abord réticent, il existe plusieurs sites proposant ce genre de services, c’est souvent assez mal foutu, et dans l’absolu ces sites sont potentiellement concurrents de mon activité, puisqu’ils permettent de créer un site internet en se passant des services d’un graphistes… 🙂
spacer
Mais j’ai quand même été voir comment fonctionnait le site, ça m’a paru largement mieux fait que d’autres services similaires, pas mal d’options qui montrent que les personnes derrière tout ça connaissent le web… Deuxième étape, comme toujours je fait quelques recherches via notre ami Google… Hé oui, cela peut vous paraitre un peu parano, mais en général quand il s’agit d’un premier contact, je fait une rapide recherche sur les noms des dirigeants, etc. Ca ne prend que quelques minutes, et si ça peut éviter des impayés, c’est toujours ça. Et donc là je suis tombé sur un court métrage en animation stop-motion fait par Fabien Versange, la personne qui m’avait contacté. Ce petit clip est d’ailleurs visible ici.
spacer
Une personne qui peut passer des heures avec ses amis à photographier un bonhomme en pâte à modeler et des Playmobils ne peut pas être foncièrement mauvais ! 🙂
spacer
J’ai donc accepté l’offre ! Le site existant ressemblait à ça :
siteW ancienne version
spacer
Le brief était, en résumé, de faire « simple, ludique et moderne ».
Il fallait au passage revoir le logo, j’ai donc essayé de garder le principe du puzzle, mais en le modernisant, ce qui a donné ceci :
logo v1
spacer
Manque de pot, quelques semaines après la mise en ligne du site revu, le client s’est aperçu que le logo ressemblait beaucoup trop à celui d’Office 2000 !
office2000
spacer
Je ne me souvenais pas de ce logo, n’ayant pas eu cette version d’Office, mais j’avais du le voir forcément, et il est ressorti sans que je m’en aperçoive… J’ai donc retravaillé le logo, parce que bon, vous je sais pas, mais moi l’idée d’un procès face à Microsoft©™ ben ça m’enchante qu’à moitié… 😕
spacer
Ce qui a donné cette v2 du logo :
logov2
spacer
Et le site final, avec la nouvelle charte, est donc visible ici :
new_site
spacer
Cliquez sur l’image pour aller visiter le site !
Les visuels du petit personnage en 3D viennent de la photothèque iStock La police utilisée pour le logo et certains titres est du Qlassik.

spacer
Je ne regrette absolument pas d’avoir accepté cette misson, déjà il n’y a finalement pas de concurrence, la cible de ce site n’étant pas la même que la mienne. Ce genre de service est parfait pour les personnes ayant besoin d’un « petit » site qu’ils devront mettre à jour eux-même, qui n’ont aucune connaissance en informatique, mais ont quand même besoin d’un site sérieux. Ils proposent des formules gratuites et d’autres payantes, mais dans tous les cas à bas prix.
spacer
Qui plus est, il est toujours agréable quand on est indépendant de travailler dans de « bonnes conditions », ce qui a été largement le cas ici. Budget réduit, mais client qui ne cherche absolument pas à abuser, ouverts aux échanges, qui propose de lui même un accompte et paye dès réception de la facture, c’est assez rare pour le noter ! 🙂

Read More

Clonks – l’économiseur d’écran, premiers essais

J’ai enfin pu avancer un peu sur mon projet « clonks »… Ayant un planning surchargé en ce moment, je ne peux avancer qu’au compte-goutte, désolé. En clair, j’arrive difficilement à trouver 1 ou 2 heures par semaine pour y travailler, ce qui explique la lenteur de l’avancée du projet ! Mais merci aux quelques personnes m’ayant demandé des nouvelles, ça me motive pour avancer ! 🙂
spacer
Bref, je n’avait pour l’instant travaillé que sur l’animation du premier robot, Blew… J’ai pu lui faire un tapis roulant, et l’ampoule associé.
Voici ce que ça donne :
economiseur
Un zoom sur la partie « mécanique » du tapis roulant et l’ampoule :
zoom
Pour rappel, le principe de l’économiseur d’écran que j’ai prévu est le suivant : 3 robots, Raid Grin et Blew font avancer des tapis roulant qui alimentent chacun une ampoule à sa couleur. Chaque robot marche pendant un temps aléatoire (random Flash sur le nombre de boucle de marche), puis s’arrête pendant un temps lui aussi aléatoire. Quand un robot s’arrête, son ampoule s’éteint, donc la luminosité de l’écran diminue. Donc comme tout est aléatoire pour chaque robot, il peut arriver que les 3 robots soient en marche, auquel cas la luminosité est maximum, et il peut aussi arriver que les 3 robots soient arrêtés, auquel cas la luminosité est au plus bas.
spacer
Rien de bien compliqué techniquement… par contre j’ai donc commencé l’intégration de l’ensemble dans Flash, et première déconvenue : avec juste un robot, l’animation est déjà trèèèèès gourmande en ressources processeurs… Chez moi presque 90% du processeur est sollicité. Donc avec 3 robots, ca devrait être totalement saturé, perdre en fluidité, etc. Un économiseur d’écran ruineur de processeur, c’est pas top…
Vous pouvez tester par vous même, c’est visible ici :
Economiseur V1
Pour la gestion du plein écran, je me suis basé sur ce tutorial : http://www.flashxpress.net/ressources-flash/site-en-flash-a-100/ que je trouve très didactique, et un fichier d’exemple est disponible.
spacer
Pour l’instant j’ai mis des points rouge et vert à la place des robots manquants. En haut à gauche sont visibles les variables de boucles de marche et d’arrêt, c’est juste provisoire, pour vérifier le fonctionnement. Mais donc avant de continuer et de travailler sur les 2 autres robots, il faut optimiser tout ça ! J’ai donc demander conseil autour de moi, que ce soit sur la mailinglist Flash-fr, le réseau PAO dont je fais partie, etc.
Les principales pistes d’optimisation qu’on ma conseillé : passer en bitmap la plupart des éléments vectoriels, vu que ces derniers sont assez complexes et comportent beaucoup de vecteurs, parfois un gros bitmap est préférable. Gérer aussi la luminosité de l’écran par l’ActionScript plutôt que par des interpolation.
Cet essai est visible ici :
Economiseur V2
Mais sauf erreur, c’est en effet un peu plus fluide, mais quand même aussi gourmand en ressources processeurs…
spacer
Du coup j’ai essayé en enlevant certains calques, pour essayer d’isoler les éléments d’animations qui prenaient trop de ressources, et il semble que ce soit les rayures du tapis roulant… En les enlevant, ca semble mieux :
Economiseur V3
spacer
Dernier essai en remetant les éléments en vectoriels, mais donc sans les rayures :
Economiseur V4
spacer
Je vais encore faire quelques essais avant de trancher…
spacer
Dernier point sur lequel il faut que je me penche : quel logiciel utiliser pour transformer l’animation Flash en économiseur d’écran… Après quelques recherches, il semble qu’il ne soit pas évident de trouver un logiciel pas cher et qui permette de générer des économiseur d’écran à la fois pour Mac et Windows… J’ai posé la question aux créateurs du célèbre économiseur Anooki, si vous ne le connaissez pas, je ne peux que vous conseiller de l’essayer, il est vraiment très très chouette ! Et donc, en plus ces créateurs, l’agence Inook sont apparement très sympas, vu qu’ils m’ont répondu dans l’heure en me donnant des informations précises sur le logiciel utilisés, les avantages et inconvénients, etc. Encore merci à eux !
Ils utilisent donc le logiciel Screentime. Inconvénient, pour générer un économiseur pour les 2 plateformes, il est necessaire d’acheter les 2 versions, donc 400$… Ca commence à faire cher pour un économiseur que je ne compte pas vendre… 🙂
Si jamais vous avez d’autres pistes, n’hésitez pas !
Et à bientôt pour la suite…

Read More

Links of the week (3)

Voici 4 liens vers des sites de « collègues » graphiste et/ou illustrateurs indépendants. Parmi ceux-ci certains me font la gentillesse de commenter parfois sur mon blog, mais n’y voyez aucun copinage, je ne connais personnellement aucun des 4, au mieux nous nous sommes croisés sur « café salé« . Donc si j’ai choisi de parler d’eux c’est uniquement parce que je trouve leur travail remarquable, c’est dit !

 

ephfx
Portfolio de Philippe Mignotte, graphiste/illustrateur indépendant de talent. Un site sobre et fonctionnel, très efficace. Passez du temps sur le portfolio, tous les travaux sont d’une grande qualité. Ca sent l’amour du travail bien fait et la rigueur !

 

stpo
Portfolio de Christophe Andrieu, graphiste/illustrateur/développeur… Il est rare de voir des personnes ayant un aussi bon niveau dans autant de discipline ! Surtout dans des domaines aussi « éloignés » que l’illustration et le développement, personnellement je n’en connais que 2 ou 3, donc chapeau bas !

 

manioc
Portfolio de Bastien Baudenon, graphiste/illustrateur. Là aussi, un vrai régal, on sent la « patte » du graphiste qui est dans une vraie recherche. Rien de « facile », de la création, et de la belle !

 

reuno
Portfolio de Renaud Forestié, illustrateur dont j’adore le style. Très joli travail des couleurs, des matières…

 

 

Pour finir, vous trouverez ci-dessous quelques liens vers des sites qui m’ont fait l’honneur de sélectionner ce blog dans leurs liens… Il s’agit en général d’articles sur les blogs graphiques, si j’en parle ici ça n’est pas pour frimer mais bien pour les remercier, et aussi parce que dans les articles en question il y a de très bonnes chose à voir !

 

vandelay

 

templatelite

 

smashing

 

numerik

 

mugnai

 

leemunroe

 

designerhelp

 

desdevmag

 

blogsessive

 

Read More

La marche du Blew

Après pas mal de difficulté, voici le premier robot, Blew, en train de marcher…
J’ai vraiment peiné pour le mouvement de la marche, je m’aperçois qu’il est vraiment difficile d’avoir un mouvement « naturel ». J’ai du modifier un peu le robot de base, pour éviter des effets de perspective que je n’arrivais pas à gérer. Je ne suis pas complètement satisfait du résultat, mais je laisse comme ça pour l’instant je verrais plus tard si j’arrive à mieux !

[edit 22 février : j’ai modifié le mouvement des bras, ça me semble déjà mieux comme ça…]

Get Adobe Flash player

La première étape a été de préparer le fichier dans Illustrator, en placant sur des calques séparés chaque éléments qui serait animés dans Flash. Donc dissocier les bras, tronc, main, etc. Dans l’image ci-dessous, les formes noires et roses correspondent aux masques prévus dans Flash. Vu que je n’aime pas du tout les outils vectoriels de Flash, j’essaye au maximum de prévoir tous les objects nécessaires en amont, dans Illustrator.

Ensuite, export en swf, en demandant à dispatcher les calques AI en images :

Et enfin, import du SWF dans Flash, j’ai redispatché les images sur des calques, puis animation de l’ensemble… Sur l’image ci-dessous, les filets et points rouges et gris visibles derrière sont des repères que j’ai fait pour me guider…

Read More

Blew Clonks

J’ai le plaisir de vous présenter le premier né de la famille Clonk : Blew !
Blew Clonk, donc.

 

 

Et ci dessous, un patchwork d’images montrant les différentes étapes de réalisation.

 

 

Voilà, prochaine étape : le faire marcher !
Puis, s’occuper de ses 2 frères, Raid et Griîin.
Puis faire de tout ça un économiseur d’écran…

 

Read More

Clonks – Nouveau projet perso

Les mauvaises langues vont dire qu’avant d’entamer un nouveau projet perso, je devrais peut-être finir les précédents qui sont au point mort, comme « Albert », par exemple…

 

Je me justifierais donc en expliquant que pour « Albert » je me sens encore un peu juste en terme de technique d’animation, j’attends de voir ce que donnera la nouvelle version de Flash avec ses fonctions avancées en animation.

 

Donc pour revenir à « The mysterious Clonks », voici le « pitch » : Les clonks sont de petits robots qui, sans que vous vous en doutiez, font tourner le monde qui nous entoure. Un monde parallèle et invisible, sans qui nous ne serions rien. Votre cafetière, votre machine à laver, votre ordinateur, votre baladeur MP3, tout fonctionne grâce à de petits clonks. Si si, je vous assure. L’ordinateur sur lequel je tape ce texte, lui-même, ne tournerai pas sans eux. Peut-être même sommes-nous habités par des clonks, mais nous ne le savons pas. Et oui, toi, moi et elle, et tous ceux qui sont seuls, et… non, ça c’est autre chose.

 

Bref, ça c’est le principe de base, qui est en fait le prétexte à une série d’animations Flash, économiseurs d’écrans, etc. sous la forme d’illustrations isométriques.

 

J’ai tout d’abord travaillé un logo, donc voici les essais :

 

Je suis parti sur la piste 7, et fait une petite animation du logo, visible ici :
Logo animé

 

Première application concrète prévue, un économiseur d’écran, basé sur un robot faisant tourner un tapis roulant, et la luminosité de l’écran variera en fonction de la vitesse de marche du robot. Les recherches de robots :

 

Je vais partir sur le 6, en le faisant alterner marche sur les mains, marche sur les pieds, et marche à quatre pattes comme le robot 8. Voilà, vous savez tout, prochaine étape mise en couleur, avant le début de l’animation.

 

A suivre, donc !
Tous vos avis et remarques sont les bienvenues !

Read More

CyberDodo.com

Il y a des projets qui sont plus ou moins intéressants, quand on est indépendant… On peut être amené à travailler sur des projets auxquels on ne croit pas tout à fait, dont on ne vois pas l’utilité… ou simplement qui nous laissent indifférent. ET, il y a des projets ou c’est tout le contraire ! 🙂

 

 

CyberDodo en est un parfait exemple ! CyberDodo est un personnage de dessin animé, depuis 7 ans j’accompagne modestement Manuel martin et sa femme Alice dans leur projet, faire de ce personnage de dessin animé un ambassadeur de la défense de l’environnement et des droits des enfants. Cela a pris la forme d’une multitude de supports, papier, animés, et en ligne. Et depuis plusieurs mois se monte petit à petit un beau projet, un site dédié aux deux causes susnommées !

 

 

Et la mise en ligne est prévu ce 20 novembre, journée des droits de l’enfant ! Donc à l’heure ou je mettrais en ligne cette note, le site voguera donc enfin de ses propres ailes !

 

 

Donc vous l’aurez compris, je vous encourage tous vivement à aller visiter ce site, en parler autour de vous, participer, le faire vivre ! Certes, comme tout nouveau-né il y aura sûrement quelques bugs subsistants, des imperfections, mais ça prouve qu’il est vivant, qu’il a été fait avec le coeur, et que ça vaut le coup de l’épauler !

 

 

l’url : CyberDodo.com, ou cliquez sur l’image ci dessous !

 

 

CyberDodo
Et le texte « officiel », parce qu’on est pas là que pour rigoler !
« Jeudi 20 novembre 2008, avec le soutien de S.A.S. le Prince Albert II de Monaco et en partenariat avec le Haut Commissariat aux Droits de l’Homme et le Comité des Droits de l’Enfant des Nations Unies, www.CyberDodo.com plateforme ludoéducative familiale multilingue gratuite sera mise en ligne afin de rendre accessible à tous la Convention Internationale des Droits de l’Enfant ainsi que les principaux défis environnementaux, elle est disponible en Français, Anglais, Arabe et Espagnol.

Offrant un important contenu multimédia (10 heures de dessins animés, jeux, dossiers, etc..), elle a été développée par Alice et Manuel M. Martin. »

Read More

Moi aussi j’suis 2.0 ! Mais juste un peu…

Le fameux « web 2.0 » dont tout le monde parle… Chacun y va de sa définition, perspective d’évolution, etc. Il y a quelques années les sites n’étaient que « consultables », c’est à dire qu’on allait sur un site, on regardait, et c’est tout (et c’est déjà pas mal)… Aujourd’hui, beaucoup de sites vont largement plus loin, pour reprendre la définition de wikipedia : « On qualifie de Web 2.0 les interfaces permettant aux internautes d’interagir à la fois avec le contenu des pages mais aussi entre eux. »

Donc quelque part même les forums, qui ne sont pas tellement nouveaux sur le web, étaient déjà du « web 2.0 ». Mais donc, aujourd’hui il est rare de voir un nouveau site qui ne propose pas au moins quelques fonctionnalités 2.0, ne serait-ce que les classiques dépot de commentaires, comme sur les blogs. Et cela évolue vers ce qu’on appelle les « RIA », « Rich Internet Applications », qui sont de véritables applications en ligne. Ces évolutions du web peuvent parfois n’être que des paravents marketing, mais peuvent aussi parfois être de véritables avancées, utiles et intéressantes. J’avais déjà abordé le sujet dans un précédent billet, pour les graphistes c’est un challenge que d’arriver à intégrer ces nouvelles contraintes.

Après se pose la question du « tri » à faire dans tout ça… Beaucoup de ces sites 2.0 n’ont qu’un intérêt limité. Comme je m’intéresse au sujet, je suis l’actualité de ces évolutions, mais finalement n’utilise qu’un très petit nombre d’entre eux. Facebook, Twitter et assimilés manquent cruellement de « fond » à mon goût…

Donc, au final, j’utilise :
Netvibes, qui permet de centraliser tous les flux RSS que je suis, et de les partager avec qui veut.

Deezer, le site de partage de musique, sur laquelle j’ai quelques playlists, ce qui m’a d’ailleurs servi à mettre en place ma « boîte à musique » dont vous trouverez le lien à droite de ce blog. N’hésitez pas à venir vous inscrire sur mon profil, et partager vos playlists !

Concernant les réseaux sociaux, je n’ai un profil que sur Viadeo, et encore je ne l’avais consulté que rarement jusqu’ici, je viens de le mettre à jour, si vous y êtes aussi n’hésitez pas à m’y rejoindre.

Read More

Links of the week (2)

J’ai fait une mise à jour de mon site, avec plusieurs nouvelles références, certaines ont déjà été visibles ici sur le blog. pour les voir, vous pouvez cliquer directement sur les petites vignettes ci-dessous.

Plus en détail, dans la rubrique « Webdesign », 2 nouvelles références :
VERT ET NET : Conception, recherche ergonomique et réalisation de la charte graphique de ce portail sur le développement durable.
BIENTOT LES VACANCES : Charte graphique d’un site de sélection de bons plans vacances. Projet non retenu, donc j’ai changé le nom.

Dans la rubrique « Animation » :
SLS : Une animation pour le site d’une société de transport spécialisé (déjà vue sur le blog).
INTRO VERT ET NET : Un clip d’intro en Flash, réalisé pour le site vertetnet.fr (déjà vue sur le blog).
ANIMATIONS PÉDAGOGIQUES VERT ET NET : 2 animations pédagogiques en Flash, réalisé pour le site vertetnet.fr (déjà vues sur le blog).

Et enfin, dans la rubrique « Jeux Flash » :
QUIZ CEMAGREF : 1 Quiz en Flash, réalisé pour le site du Cemagref.

 

 

En ce qui concerne ma sélection de liens de la semaine, il s’agit de 3 sites d’autres graphistes :

Site d’un graphiste russe, qui fait des montages photos vraiment réussis : intégration d’éléments illustratifs sur des photos, c’est subtil, très bien fait, j’aime beaucoup !

 

 


Site d’un graphiste lyonnais, dont je trouve le travail particulièrement soigné. Polyvalent, bonne utilisation de la 3D, et le site est agréable, en plus.

 

 


Pour finir, le site d’un graphiste grec, dont les visuels sont « dans l’air du temps », tout en ayant une touche personnelle qui plait bien.

 

 

Read More