Contactez-nous !

Le « Making of » de notre nouveau site…

20 février 2014

« On est tsellement content ! » (avec l’accent de Céline Dion…)

Pour ne rien vous cacher, nous sommes très fiers de notre nouveau site. Si ! Si !… Ce n’est pas que l’ancien nous déplaisait, mais au bout de 3 ans de bons et loyaux services, il faut dire ce qui est : on attendait la nouvelle version avec impatience ! C’est donc chose faite. Voici la nouvelle version d’officeformation.com. Version 6, s’il vous plaît ! Nouveau design, nouvelles fonctionnalités (vitres avant électriques, ABS, auto-radio, et tout et tout !), le tout, monté sur un nouveau châssis : WordPress. Exit Dreamweaver, place aux CMS (Content Management System), plus souples, plus pratiques, plus ouverts.

Ce nouveau site nous permet ainsi d’afficher davantage notre « personnalité », notre différence avec les autres centres de formation, qui nous sommes, et comment nous aimons travailler. Nous espérons qu’il saura vous séduire et vous permettre de trouver facilement l’information souhaitée. Si vous avez connu l’ancien site, dîtes-nous comment vous trouvez cette nouvelle version. Plus agréable, plus complet, plus joli… ou pas ? En tout cas, que vous soyez « nouveau venu » ou « déjà venu », n’hésitez pas à nous laisser vos commentaires ! 🙂

Si vous aussi, vous voulez être « tsellement content »…

Si vous aussi, vous êtes tenté par la création d’un site (ou plus simplement, par son relooking, comme nous l’avons fait), vous serez peut-être curieux de connaître les étapes-clés, la méthode de travail que nous avons suivie. Nous n’avons pas la prétention de dire que c’est une méthode universelle (genre « les 10 étapes incontournables de la création d’un site » !…), mais cela peut vous donner des pistes et vous aider dans votre démarche.

Etape 1 : Se faire plaisir.

Rien de grand ne se fait sans enthousiasme. Alors, dans cette première étape, faites-vous plaisir. Créez, rêvez, imaginez ! Vous avez certainement navigué sur de très beaux sites, rencontré de jolis effets, visualisé de belles animations. Inspirez-vous en ! Faites des copies d’écran. Constituez-vous un « pêle-mêle d’inspiration ». Prenez aussi un crayon et du papier (il n’y a pas que le numérique dans la vie !), et jetez-y vos premiers croquis. Dessinez les ébauches de votre futur site. Surtout, lâchez-vous dans cette étape ! Laissez parler votre créativité ! Il faut que votre projet vous inspire, vous anime… sinon, il aura toutes les chances de vous lasser avant même d’exister, ou pire, d’ennuyer vos futurs visiteurs !…

 

Pele-Mele

Etape 2 : Se poser les questions qui fâchent… pour faire le tri.

OK, maintenant que vous vous êtes bien lâché, il est important de faire le tri. Vous avez plein d’idées. Tant mieux. Mais ça part un peu dans tous les sens, c’est normal. Il va falloir faire le tri, car il faut bien l’admettre, vous ne pourrez pas tout faire. Vraisemblablement, par manque d’argent, manque de temps ou manque de technique. Voire les 3 à la fois (… si c’est le cas, vous êtes « un peu mal » quand même ! Si vous n’avez ni le temps, ni l’argent, ni la technique… pourquoi pas faire des crêpes au Nutella cet après-midi ?) Bref, délaissons ce cas de figure le plus défavorable, et imaginons que vous ayez quand même un minimum de temps, d’argent et de technique.

Parmi toutes les pistes que vous avez envisagées, faites le tri en vous posant ces quelques questions « qui fâchent » :

A qui est destiné votre site ? Quel est votre public ?

Comment trouvez-vous les sites de vos concurrents ? (franchement, ils sont vilains, non ?!) OK, mais dans le lot, lesquels vous semblent relativement bien faits ? Pourquoi ?

Qu’attendent vos visiteurs en venant sur votre site ? Que recherchent-ils essentiellement ? du divertissement ? de l’inspiration ? de l’information ? si tel est le cas, quel type d’information recherchent-ils en priorité ? quelle(s) informations secondaires découle(nt) de celle-ci ? Creusez ces points. Car ils sont fondamentaux. Ce sont eux qui vous permettront de hiérarchiser votre information et de structurer votre site.Avez-vous les compétences pour réaliser votre site tout seul ? Sinon, deux solutions s’offrent à vous : soit vous faites appel à une compétence externe (agence web, webmaster indépendant, le fils-du-voisin-qui-travaille-dans-l’informatique, un étudiant payé au black… non, mauvais conseil. On n’a rien dit !) Soit, vous vous décidez à acquérir les compétences nécessaires (formation ? Vous avez dit formation ?… Vous avez besoin d’un très bon organisme de formation ?)

A titre d’exemple, l’information prioritaire que nous avons définie pour notre site est : « Pouvoir trouver la formation que je recherche, et tout savoir dessus. » De là, en découlent des questions secondaires : « Quel est donc ce centre de formation ? Comment travaillent-ils ?… », et puis logiquement : « Combien va coûter ma formation et Comment puis-je la financer ? » Etc.
Et si vous regardez bien, l’ossature de notre site est structurée autour de 3 éléments principaux : « Trouver sa formation » / « Découvrir notre centre » / « Financer sa formation » (CQFD)

En répondant à ces quelques questions, vous allez déjà pouvoir, d’une part, considérablement restreindre le « champ des possibles », en éliminant certaines pistes trop difficiles à réaliser, compte tenu de vos moyens actuels. Et d’autre part, avoir une idée déjà plus précise de l’articulation de votre site.

Etape 3 : Développez. Hiérarchisez. Simplifiez.

L’important maintenant, c’est de savoir précisément comment organiser l’information de votre site. Là, chacun fait comme il veut, mais nous, nous conseillons de ressortir nos bons vieux « papiers-crayons »…

Repartez de votre ossature centrale (ex : « Trouver sa formation » / « Découvrir notre centre » / « Financer sa formation »), et développez-la. Posez-vous toutes les questions que vos visiteurs pourraient se poser. Et apportez-y une réponse. Puis, organisez toutes ces réponses de la manière la plus claire et logique qu’il soit. Vous devriez ainsi commencer à voir se dessiner le « squelette » de votre site. Telle page traitera de tel(s) sujet(s) qui devra être reliée à telle autre page. Et ainsi de suite.

Hiérarchisez et simplifiez l’information. Sur chaque page, quelle est l’information principale qui doit ressortir ? Comment peut-on bien la mettre en avant ?… L’idée est de trouver des idées de mise en page qui fassent ressortir « instantanément » les informations fortes pour chacune de vos pages. Vous allez ainsi les structurer. Tout comme vous aviez structuré votre site, vous allez maintenant structurer chacune de vos pages. Pour cela, faites des croquis simples pour positionner tel type d’information (image, texte, slider,…) à tel endroit de vos différentes pages. Vous allez créer ainsi une sorte de « story board » de votre site.

Croquis-1

Croquis-2Etape 4 : Maquettez, dé-maquettez, et re-maquettez !

Vous aimez Photoshop et Illustrator ? Tant mieux ! Car vous allez en avoir besoin ! Il est en effet temps de mettre en page votre « story board ».

Prenez vos croquis de page et retranscrivez-les à l’écran : Alors, on avait dit que l’en-tête venait là… Puis, on met une grande image centrale, ici… Puis, vient le texte d’introduction… Mais, c’est nul ! C’est trop laid ! Et en plus, ça rentre pas dans la page !!!…

Un conseil : ne vous embêtez pas à rédiger pour l’instant vos textes. Écrivez juste quelques gros titres, et certaines accroches. Puis remplissez le reste avec du « faux texte » (Lorem ipsum).

A cette étape, vos premières recherches (votre « pêle-mêle d’inspiration », vous vous souvenez ?) vont considérablement vous aider. Vous allez essayer différents « tons », différentes « ambiances », jusqu’à trouver le « style » graphique qui vous convienne.

Jouez avec les couleurs, les polices, les éléments graphiques. Pensez aussi aux photos et illustrations. Ils contribueront grandement à donner de l’éclat à vos pages.

A moins d’être un « pro » de la maquette, plusieurs tentatives seront souvent nécessaires pour arriver à « LA » bonne maquette. Alors, patience et courage !…

 

Maquettes-2

 

Etape 5 : Bonjour, M. Le Développeur !

Vous avez vos maquettes ? Et bien, il est temps de les traduire en pages web ! HTML, CSS et autres jQuery vont faire leur entrée en scène ! Là, ça ne s’invente pas. Soit vous savez le faire, soit il faut le confier à quelqu’un de compétent.

Quoi qu’il en soit, attendez-vous à de multiples aller-retours, de multiples « compromis » entre la technique et le design ! On avait dit que ça, on le faisait bouger comme ci, comme ça !… Oui, mais techniquement, ce n’est pas possible ! Alors, on le fait pas bouger, et pis c’est tout !… Ok. (les compromis sont assez simples à trouver, finalement…)

Après moult compromis, vous voilà – enfin ! – avec votre site qui tourne (presque) pour de vrai ! Presque, car vous êtes encore avec du « faux texte », ne l’oubliez pas ! (mis à part quelques latinistes, peu de gens lisent couramment le « Lorem ipsum »…)

Etape 6 : Bonjour, M. Le Rédacteur !

Et bien, là c’est simple… A vos claviers ! Y a plus qu’à ! Ressortez dictionnaires, Bescherelles et rédiger tous vos textes ! Et, n’oubliez pas de les faire relire pour corrections (… sa peu servirre !)

Un conseil : laissez reposer un jour ou deux, et reprenez vos textes une seconde fois. Cela permet souvent de simplifier les choses, de trouver de meilleures tournures.

Important : ne rédigez pas uniquement pour ceux qui liront votre prose… pensez aussi aux moteurs de recherche ! C’est là que doivent être intégrés tous les éléments à prendre en considération pour l’optimisation de vos pages (cf. Techniques de référencement).

Etape 7 : Ohé ! Y a quelqu’un ?…

Votre site est prêt ? Fini, fini ? Tout marche parfaitement ?… Alors, appuyez sur la touche « Envoi » et ouvrez-le au monde entier ! Communiquez par tous les moyens possibles : vous pouvez, certes, appeler votre Maman, Tatie Giselle, Tonton Michel, etc. Mais pensez aussi aux Réseaux Sociaux. Ils seront un excellent porte-voix pour annoncer au monde entier l’existence de votre nouveau site ! Félicitations !

Site-finalise

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

A vous de jouer !