Ma Titine

On vous a déjà dit qu’on envisageait (et certains nous l’avaient d’ailleurs suggéré) d’ouvrir maTiTine aux motos et autres trotinettes à moteurs. Alors on y travaille et, en avant première, je suis en mesure de vous dévoiler les avatars de motos que j’ai réalisé avec mes petits doigts boudinés et mon mulot magique. Bon, je ne vous cache pas qu’il y a encore un peu de travail avant de rendre maTiTine entièrement moto-compatible mais ça va venir!

PS: pour le premier avatar, je me suis inspiré d’une, voire même 2, motos célèbres, à vous de deviner lesquelles!

J’avais promis de vous dévoiler le design, voici donc l’historique de cette quête ô combien longue et difficile que fut la recherche du design parfait, celui qui fait rêver les hommes, tomber les filles, rire les enfants et danser les grands-mères! Accrochez-vous on repart quelques moins en arrière.

Voici donc le tout premier design, volontairement vieillot par rapport à la production actuelle. Justement, jugé beaucoup trop décalé par mes compères!

Puis le second basé sur l’idée d’utiliser des panneaux de signalisation mais qui ne s’accordait pas bien avec le nouveau logo.

Enfin, voilà le design quasi définitif (en attendant la prochaine version) …

… d’abord la page d’accueil …

… ensuite l’espace utilisateur:

Interdiction de critiquer, on a déjà eu bien trop de mal à se mettre d’accord!

Maintenant que le design général du site est à peu près figé, ils nous faut nous attaquer au design des formulaires. C’est un point que certains auraient sans doute tendance à négliger, pourtant si on veut faire un site agréable et facile à utiliser, c’est l’élément à peaufiner avec soin.

Une fois de plus, voilà 3 liens qui vont nous aider à bien déblayer le terrain:

• La “bible des formulaires en ligne” découverte grâce à Fred Cavazza et qui regorge de “Best practices” comme disent nos amis anglo-saxons
• La sélection de l’incontournable Smashing Magazine concernant les formulaires qui présente l’état de l’art dans le domaine
• Enfin pour ceux qui en redemandent, cette sélection de 101 ressources utiles pour créer des formulaires sur internet

Qu’on se le dise, on n’est pas là seulement pour raconter notre vie, on est aussi là pour partager les bons tuyaux qu’on découvre au fur et à mesure de l’avancement du projet. Donc si j’mais vous cherchez une police, plutôt que de décrocher votre téléphone et d’appeler le 15, un seul site: Urban Fonts. Quelques 8000 polices gratuites qui ont l’énorme avantage d’êtres classées par genre: manuscrites, arrondies, modernes, futuristes, …. Si vous ne trouvez pas votre bonheur là-dedans, moi je sais plus quoi faire! Allez, banzaï!

Suites de mes aventures de néophyte du design. Après quelques errances, il est temps de passer aux choses sérieuses pour sortir un design qui, à défaut de révolutionner le monde Internet, ne fera pas trop tâche dans le paysage webistique mondial!

Toujours armé du fidèle Inkscape, me voilà donc en quête d’inspiration:

• un petit tour sur l’excellentissime Smashing Magazine et notament sur sa sélection des “60 designs élégants et attirants visuellement” qui m’a bien tapé dans l’oeil
• puis un arrêt rapide sur le tutorial “Comment pondre un design Web 2.0″ du non moins génial Web design from scratch
• enfin un coup d’oeil rapide mais profond sur la liste des “85 ressources-qui-tuent-que-chaque-designer-devrait-connaître”

Armé de ses 3 liens, j’ai de quoi faire. Le résultat de mes intenses cogitations au prochain numéro!

Voilà quelques mois que le projet est lancé et un petit bilan peut-être éfféctué :

- Les fonctionnalités de bases sont là, pas encore toute développées mais on y travaille. Plein d’idées se bousculent dans nos têtes, on les mets de coté pour l’instant mais c’est pas ce qui manque.

- Le logo est fini comme évoqué juste en dessous, le design est bien avancé, je suis en train de convertir en css/html ce que Raf m’a donné en image. C’est plutôt dans les tons de couleurs chaudes, mais je vous en dit pas plus.

- Pour le dev à proprement parlé, Kef est en ce moment même en vacances donc un peu en stand by pour le moment. Le temps que je finisse le design et je continuerai de mon coté. C’est un gros chantier mais on va y arriver, en esperant sortir une version le plus vite possible.

Les objectifs fixés sont : sortir une version beta pour nous, aux alentours de début septembre, puis passé en beta privée début octobre si tout se passe bien. D’ici là Kef va continuer developper en grosse partie, Raf va s’occuper des aspects de com’ et moi même continuer à developper et integrer tout ça dans le design.

Stay tuned

Ceux qui ont visité la page d’attente de Ma Titine auront sans doute remarqué le nouveau logo du site. Au terme d’une lutte acharné, c’est donc Raf qui a remporté le concours interne d’une courte tête devant Julien. Voilà donc un petit patchwork des différentes propositions ainsi que l’évolution du logo vainqueur. On est assez content du résultat qui colle assez bien à l’image que le souhaite donner du site. Tout a été réalisé avec Inkscape, décidément une merveille de logiciel pour ce genre de truc. Si vous avez des remarques et des suggestions sur le logo, n’hésitez pas à nous les faire dans les commentaires, on a encore le temps de procéder à quelques ajustements avant le lancement du site!

Comme on a quelques différences de vue sur le design et que chacun a envie d’y mettre sa patte (ce sera quand même la face émergée de l’iceberg!), on a décidé de lancer un petit concours interne. Chacun va donc faire un prototype de design et de logo dans son coin puis on comparera nos copies et on élaborera le design final en gardant le meilleur de chacune des propositions. La date butoir pour la remise des copies, c’est lundi prochain, stresss …..

Alors que Julien travaille actuellement sur le développement du site, Raf et moi même se penchons sur la conception du design. A vrai dire, aucun de nous deux n’est né artiste ou bien nos talents sont encore vraiment cachés. Ainsi, suite à l’article de Raf sur la route à suivre pour la réalisation du design, nous nous sommes mis à nos palettes.

Pour compliquer tout cela, nous ne travaillons pas ensemble dans un même et unique bureau mais bien à distance. Cela est tout à fait possible mais afin d’être efficace, il est nécessaire de partir sur de bonnes bases. Malheureusement, alors que Raf avait déjà un premier jet du design réalisé sur Inkscape, j’ai souhaité lui donner un coup de main. En effet, ce gentil monsieur est encore vieille école donc il a loupé le tournant des effets 2.0 … heureusement que les jeunes sont là pour le rappeler à l’ordre Malheureusement, étant donné que de mon côté j’ai toujours {essayé} utilisé Photoshop, cela pose problème au niveau de la compatibilité des fichiers.

Ainsi, actuellement, nous réalisons chacun une version du design de notre côté, puis le jury prendra une décision. Quand je parle de jury, cela se résume aux 3 membres de l’équipe !

Dans l’éventualité qu’un aimable designer passe sur ce blog, ça serait avec plaisir de discuter

Bon je vais être honnête avec vous, je n’y connais rien en design de site web. Enfin rien, quasi rien: un peu de HTML, quelques notions de CSS, l’expérience de quelques adaptations de thèmes Wordpress ou Joomla, mais à part ça rien. Je ne suis pas dessinateur, encore moins graphiste, je n’ai même jamais réalisé de site web de A à Z. Et pourtant quand il a fallu que quelqu’un se propose pour s’occuper du design du site, un réflexe nerveux consécutif à un trop long assoupissement m’a poussé à lever le doigt! Allez comprendre …

Me voilà donc au pied du mur, sans trop savoir par où démarrer. J’ai beau chercher sur la toile, pas moyen de trouver un vrai tutorial dans le genre “le design Web pour les nuls de chez nuls”. Tout ce que je trouve est trop pointu, trop technique. Je cherche des grandes règles de design, quelle largeur, quelle hauteur, largeur fixe … ou pas, coins ronds ou carrés, quelles couleurs, …Rien de tout ça, tant pis, je me débrouillerai tout seul ….

Première chose, il me faut des sources d’inspiration, des sites qui me plaisent, des exemples. En vrac, j’aime bien les sites colorés, en rondeur, originaux sans être m’as-tu vu, je n’aime pas les sites sombres, trop chargés, trop tous pareils, …

Deuxième chose, il me faut imaginer à quoi ressemblera le site, quelle sera sa mise en page, comment seront placés les différents modules. Pour ça, rien de mieux qu’un crayon et un bout de papier, ça permet de mettre facilement en place des éléments, de gommer, de raturer, de noter des idées à côté. C’est sommaire, spartiate, rustique, mais ça se trimballe partout! Il faut aussi trouver un concept, un discours en accord avec le thème principal du site, sans tomber dans l’illustration ringarde et désuète. Il faut enfin réléchir à l’ergonomie du site, concevoir une interface intuitive et facile à prendre en main.

Troisième chose, il faut maintenant matérialiser ces idées sur ordinateur. Il semble que l’outil le plus adapté pour cela soit un logiciel de dessin vectoriel, comme Adobe Illustrator, plutôt qu’on logiciel de retouche photo genre Photoshop. Compte-tenu du caractère auto-financé du projet, j’ai préféré m’orienter vers un outil gratuit et libre, Inkscape, qui semble jouir d’une petite notoriété dans le milieu des graphistes. Relativement puissant, facile à apprendre et à utiliser, bien documenté, riche en tutoriaux, il répond largement à mes besoins et je ne regrette pas ce choix.

Quatrième et dernière chose à faire, transformer tout ça en HTML et CSS. On n’y est pas encore, mais je m’orienterai sans doute vers ce bon vieux Gimp pour extraire les différentes images du design et vers Nvu qui semble être une bonne alternative libre à Dreamweaver pour la création de sites.

Voilà ma feuille de route tracée, reste plus qu’ à se mettre au travail. La suite au prochain numéro!