[vc_row][vc_column][vc_separator color=”custom” accent_color=”rgba(0,0,0,0.01)”][vc_single_image image=”3307″ img_size=”full” alignment=”center” full_width=”yes”][/vc_column][/vc_row][vc_row type=”color” bg_color=”#e8e8e8″ vertical_align=”yes” column_gap=”no” padding_top=”540″ margin_top=”0″ margin_bottom=”0″ min_height=”220″][vc_column width=”1/2″][vc_empty_space height=”30px”][vc_column_text css=”.vc_custom_1447939645516{margin-bottom: -10px !important;}”]

Les bonnes pratiques d?un projet Web r?ussi

[/vc_column_text][vc_column_text css=”.vc_custom_1447939782180{margin-right: 5% !important;}”]Avant de commencer un projet sur Racontr, il convient de se poser plusieurs questions essentielles et de prendre en compte quelques ?tapes en amont pour ?tre serein une fois dans le logiciel.

En effet, Racontr n?est pas un logiciel de cr?ation ? proprement parler, mais un outil de montage web. Nous vous conseillons?vivement de commencer par prendre un crayon et un papier et de r?fl?chir ? ce que vous voulez cr?er comme exp?rience interactive.

Cherchez votre th?me, d?finissez un objectif, un format, dessinez votre site, son type de navigation, sa structure. C?est d?j? un tr?s bon d?but.

Bien entendu, vous pouvez produire une maquette du site avec?Photoshop ou directement dans l??diteur avant de vous y lancer pour de bon.

Voici un r?capitulatif des choses ? savoir et des bonnes pratiques ? adopter pour r?ussir votre projet.[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_empty_space height=”90px”][vc_column_text css=”.vc_custom_1447939719432{margin-left: 5% !important;}”]

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width=”5/6″][vc_single_image image=”123″ img_size=”full” alignment=”center”][vc_empty_space height=”10px”][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text]

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text]Il est important de conna?tre le profil moyen de vos visiteurs (crit?res du type ?ge/sexe/cat?gorie professionnelle?).

Selon le publique cibl?, vous pourrez adapter la taille du site, les contenus, la compatibilit? avec les navigateurs, etc?

Vous pouvez tr?s facilement obtenir ces informations de plusieurs mani?res : avec Google Analytics (vous pourrez d?ailleurs l?int?grer dans votre projet Racontr), avec MixPanel, en analysant les communaut?s de vos r?seaux sociaux ou celles de niches similaires (avec des outils comme Social Bro par exemple).

Il convient ensuite de vous poser plusieurs questions :

• Le site doit-il ?tre traduit en plusieurs langues ? Si oui, je devrais donc penser ? deux versions ou plus de mon projet
• Sur quel support dois-je le diffuser ? (tablette, pc, smartphone) Les crit?res changent selon le support (nous verrons cela plus en d?tail par la suite).
• Adaptez votre site ou votre projet ? votre cible !?
  Par exemple, si je m?adresse ? des seniors, qui n?ont pas forc?ment une tr?s bonne connaissance du web, je devrai adapter mon site en fonction de leurs usages (en facilitant l?acc?s aux informations, en utilisant?des pictogrammes tr?s claires et compr?hensibles, des infos-bulle etc?).
  De le m?me fa?on, imaginons que?vous r?alisiez un projet destin? ? des photographes : vous pouvez surement vous permettre d?avoir une taille de visualisation des photographies plus importante que si vous le destiniez ? un public plus large.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”3311″ img_size=”full” onclick=”link_image” css=”.vc_custom_1447939885422{margin-right: 5% !important;}”][vc_column_text]Google Analytics est un puissant outil d?analyse de donn?es. Il vous permettra de tout savoir (ou presque) sur le profil de vos internautes.[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height=”50px”][vc_separator color=”custom” accent_color=”#e8e8e8″][vc_empty_space height=”30px”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text]

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text]Concevoir un site, c?est d?abord penser ??utilisateur?? et non ??concepteur??.

De la conception du syst?me de navigation, au choix des couleurs et des polices de caract?re, de l?organisation des contenus au design 😕rien ne doit ?tre laiss? au hasard.

• ?valuez les besoins et les objectifs : quels sont les objectifs que mon futur projet doit atteindre ?

• Prenez le temps d?enqu?ter un peu pour votre?conception. Faites une recherche sur le web, des diff?rents sites, web doc, publicit?s interactives ou infographies qui existent, cela vous donnera quelques id?es. De m?me n?h?sitez pas ? vous faire des ?planches tendances? des Web Design ? la mode (Pinterest est tr?s pratique pour ?a).

• Restez simple (surtout pour votre premier projet) : ? Faites le court, faites le petit mais faites le bien ! ?. Soyez cr?atif et innovant. Tout doit avoir du sens !

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”3314″ img_size=”full” onclick=”link_image” css=”.vc_custom_1447940045741{margin-right: 5% !important;}”][vc_column_text]Une feuille, un caf? et beaucoup de calme : les cl?s d?un sc?nario r?ussi.[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/2″][vc_single_image image=”3317″ img_size=”full” onclick=”link_image” css=”.vc_custom_1447940071997{margin-right: 5% !important;}”][vc_column_text]Un exemple de storyboard r?alis? par Malrauxvideo[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_column_text]

• Lecture Transversale et narration interactive : pensez aux niveaux de lecture, utilisez l?interactivit? !?Mettez en avant l?information g?n?rale, primaire et donnez la possibilit??au lecteur d?aller voir l?information compl?te plus en profondeur (avec une pastille interactive, un ??lire la suite?? par exemple).

• L?internaute dois pouvoir parcourir votre projet?rapidement et s?il le souhaite, aller chercher plus d?informations ? ne l?obligez donc pas?? tout lire mais donnez-lui le choix dans la lecture de votre site. Le temps que passe un lecteur sur le web est tr?s court, il change de page au bout de 40 seconde seulement ! Pensez donc ? bien chapitrer vos vid?os et les informations de votre site web.

• Pensez ??utilisateur??, adressez-vous au lecteur : mettez-vous dans la peau de votre utilisateur pour comprendre ses besoins.

• Soyez?direct pour ne pas ennuyer le lecteur. Vous pouvez utiliser un langage , des mots percutants, un lexique original pour capter l?attention de votre audimat.

• Collectez les informations n?cessaires pour votre projet :
  ? d?finir le contenu structurel?: la navigation du projet, le nombre de page, les liens dans le sc?nario?.
  ? identifiez les m?dias qui seront utilis?s (vid?os, textes, images et sons) pour se faire une id?e de la structure du projet

• Cr?ez un Story Board : vous pourrez alors avoir une vue compl?te sur les animations et les liens ?entre les m?dias de votre projet

• Enfin, pensez aussi aux r?seaux sociaux : comment allez-vous diffuser votre projet ? Les r?seaux sociaux permettent de se construire une audience cibl?e. Si vous faites le choix d?h?berger votre projet Racontr sur votre site, vous devrez optimiser votre URL, choisir les r?seaux sociaux pertinents, pr?parer votre audience (par exemple, avec un peu de publicit? sur Facebook).

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height=”50px”][vc_separator color=”custom” accent_color=”#e8e8e8″][vc_empty_space height=”10px”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_separator color=”custom” accent_color=”#009cad”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”2/3″][vc_column_text]

[/vc_column_text][vc_column_text]En moins de 10 secondes, votre site web doit justifier sa pr?sence aux yeux de l?internaute. S?il n?est pas capable de l?utiliser dans les premi?res secondes et de trouver ce qu?il cherche, il changera de site.

• Cherchez le format le plus adapt? ? votre sujet. Par exemple, un long format est judicieux si vous avez beaucoup de contenus, un format plus web documentaire s?il y a beaucoup de vid?os?. Vous pouvez d?couvrir de nombreux formatsici.

• Attisez la curiosit? / cr?ez l??motion,?choisissez?de belles?images et illustrations.?Pour cela, privil?giez la simplicit? : une page trop charg?e ne donne pas envie de rentrer dans le doc ni m?me de le lire.

• Faites en sorte que vos textes soient lisibles.?Par exemple, des textes dans des petites?colonnes, l?gers et a?r?s sont plus faciles ? lire qu?un texte?qui prend toute la largeur de votre site. ?Assurez-vous ? l?aide de vos maquettes?(en faisant des tests sur diff?rents navigateurs) que la taille de vos typographies?n?est pas trop petite ou trop grosse.

• Utilisez?une ou deux?typographies?au maximum,?vous gagnerez en clart? et en lisibilit? !

• Bien entendu, choisissez de belles typographies,?vous pouvez utiliser les Google Fonts (qui sont gratuites et que nous avons d?j? mis en place?dans l??diteur de Racontr) ou faire votre march? sur dafont.fr par exemple.??vitez?les polices fantaisie illisibles, vous gagnerez en confort de lecture.

• Structurez vos textes 😕?cr?ez des niveaux de lecture avec des grand textes, et des grandes bandes de couleurs par exemple.?

• Votre navigation doit ?tre simple et?compr?hensible?imm?diatement. R?f?rez-vous aux standards?visibles partout sur le web. Un site ergonomique est celui qui?conduit le visiteur le plus simplement et le plus rapidement vers l?information recherch?e.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/3″][vc_single_image image=”3320″ img_size=”full” css=”.vc_custom_1447940275106{margin-right: 5% !important;}”][vc_column_text]Comme une peinture, donnez une touche graphique in?dite ? votre projet en?choisissant?les bons pinceaux?![/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]Voici l?utilisation communes des couleurs sur le web :

• Marron ? chaleur, confort
• Noir ? puissance, sophistiqu?
• Gris ? sobri?t?, stabilit?
• Bleu ? confiance, sagesse
• Rouge ? ?nergie, passion
• Violet ? r?ve, d?licatesse
• Pourpre ? luxe, sagesse
• Orange ? cr?ativit?, communication
• Vert ? naturel, espoir
• Blanc ? puret?, ?l?gance
• Jaune ? bonheur, convivialit?

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text]

• Respectez le code couleur. Vous pouvez facilement cr?er de?l??motion avec?les couleurs.

• Ne pas surcharger ses pages : a?rez vos compositions en ?vitant de mettre des tonnes d?animations (des clignotements partout, des apparitions d?objets sans raison, des sons mp3 en boucle? un peu comme les sites Internet de 1998 ;-)). Cela fait fuir le lecteur et brouille le contenu et le message informatif de votre site.

• Un principe de navigation identique tout au long de votre site pour ne pas perturber le lecteur

• Tablettes, Smartphones ou PC ??Vous devez choisir un design, une ergonomie qui soit adapt? au support (quitte?? faire plusieurs sites pour?chaque support). Il faut bien choisir en amont le support car?il n?y a pas les m?mes contraintes entre une tablette un smartphone ou un PC :

? Le poids des vid?os et des images sur tablette : des m?dias trop lourds vont mettre du temps ? charger

? Les roll-over (actions de survol)?n?existent pas sur smartphones et tablettes

? La largeur maximum des images sur tablette : une image plus grande que la dimension de votre tablette ne s?affichera pas

? Le lancement automatique des vid?os est impossible sur tablette (il s?agit d?une norme constructeur)

? Le design du site doit ?tre adapt? aux tablettes?( le doigt de l?utilisateur est beaucoup?plus gros que le curseur de la souris ), il faut donc ?viter les petits boutons pour des projets destin?s aux tablettes.

? La lisibilit? du texte sur tablettes et PC. Entre une tablette, un smartphone et un PC, il peut y avoir de grosses diff?rences dans la gestion et l?affichage des?typographies. Il faut s?assurer que votre texte s?affiche bien et qu?il est?toujours lisible, quel que soit le support.[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text]

[/vc_column_text][vc_column_text]

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”3323″ img_size=”full” css=”.vc_custom_1447940654426{margin-right: 5% !important;}”][vc_column_text]Comme une peinture, donnez une touche graphique in?dite ? votre projet en?choisissant?les bons pinceaux?![/vc_column_text][vc_separator][vc_single_image image=”3326″ img_size=”full” alignment=”center”][vc_column_text]

[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width=”1/6″][vc_empty_space height=”50px”][vc_widget_sidebar sidebar_id=”sidebar-9″][/vc_column][/vc_row]