Dossier #1 – (3) Le design du site.

Le but de cet article n’est pas de vous donner une méthodologie pour vous apprendre à « designer ». Il s’agit surtout de montrer les éléments importants à ne pas « zapper » pour que votre site soit un minimum efficace.

1. Les éléments basiques d’un site : header, menu, contenu, footer.

La plupart des sites à succès ont en commun une structure assez similaire qui se décline ainsi :
– Le Header : contient généralement le logo, la baseline, ce qui marque l’identité visuelle du site.
– Le Menu : parfois au sein même du header, on peut le retrouver au dessus ou en dessous de ce dernier, verticalement ou horizontalement. Il n’y a pas vraiment de « meilleure place » pour un menu, tout dépend de l’ergonomie générale du site, et de la façon de le mettre en avant.
– Le Corps de la page : le « plat principal » du site; on y retrouve les informations qui font du site ce qu’il est, l’information principale ainsi que les formations qui poussent les gens à revenir !
– Le Footer : contient généralement les informations relatives au copyright, des liens vers les rubriques principales du site, et/ou des liens vers des sites partenaires.

2. Logo et représentation.

Avoir un logo unique et facile à retenir vous permettra d’être plus facilement reconnaissable sur la toile. Si les gens se souviennent de vous en ne voyant ne serait-ce que votre favicon, vous avez tout gagné ! Un exemple : si je vous montre ce logo méthodologie logo , à quoi pensez vous ? 😉

3. Un design attractif.

Pourquoi prendre soin du design de son site ? Comme on dit, « l’habit ne fait pas le moine » … Cependant, sur le net, le dicton est loin d’être vérifié… en effet, les utilisateurs sont sensibles au design d’un site, et  fondent majoritairement leur premier jugement sur la forme, et non le fond. Pire encore, d’un simple coup d’oeil, on jugera votre activité comme « non professionnelle », relevant de l’amateurisme, et ça ne pardonne pas… Prenez donc le temps et/ou dépensez l’argent nécessaire à la création du design de votre site ; faites appel à des professionnels de la communication, spécialisés dans l’ergonomie et le design web.

4. Eviter le trop-plein d’informations

Une des raisons pour lesquelles le site ne pourrait pas marcher peut provenir du fait qu’il y ait trop d’éléments sur une seule page ; ce problème risque de semer la confusion chez vos utilisateurs et leur empêcher d’accéder à l’information principale du site. Le mieux à faire est d’épurer les contenus, et de les organiser soigneusement en « rangeant » le site selon les priorités du contenu ( ne mettez pas vos partenaires plus en avant que vos produits/services !).

Pour bien faire passer l’info, le mieux à faire est de créer une « zone attractive », qui attire l’oeil, et qui permet de délivrer l’information sans avoir à la chercher ; pour être efficace, cette zone doit  respecter certains paramètres :

– Elle prend généralement le plus de place sur la page
– Se distingue souvent par l’utilisation de la couleur, la taille de la police, ou une autre technique de mise en page
– Doit se situer à un endroit qui capte l’ attention du visiteur

5. Utiliser des couleurs harmonisées

Il existe de nombreux outils sur internet pour vous aider à trouver votre palette de couleurs ; quelques liens vers les plus efficaces : Kuler, ColorShemer, Color Sheme Generator, Pourpre, Color Wizard.

6. Faire attention à la taille de vos polices d’écriture

Pour que vos textes soient lisibles, il est recommandé d’utiliser une police d’une taille supérieure à 11px; de nos jours, de plus en plus de sites utilisent une police de 13px ;

7. Une page d’accueil percutante

Le but d’une page d’accueil est de montrer clairement ce que contient le site ; si vous n’arrivez pas à capter l’attention de votre visiteur dès la première page, alors celui-ci risque fort de rebondir et de passer à un autre site web !

Quelques éléments pour une bonne page d’accueil :

– Donner de l’info « efficace » à vos visiteurs (n’y mettre que des élément intéressants)

– Etre synthétique et agréable ( Utiliser des listes à puces, utiliser une mise en pages en colonnes – pas plus de 3, ça risque de faire trop après – faire des paragraphes courts, et de façon générale organiser la page de manière à bien distinguer chaque partie de la page)

– Indiquer à vos visiteurs où aller sur le site (moteur de recherche, navigation accessible, un « plan du site » dans le footer…)

– Gagner la confiance de vos visiteurs ( mettez vos coordonnées en avant – telephone, e-mail, adresse… – , présentez-vous ou présentez votre société, …  )

– Ne faire aucune faute d’orthographe sur toute la page, ne laissez trainer aucun bug relatif au développement, bref, soyez clean de chez clean !

Quelques liens pour illustrer l’article sur le design du site :

Une collection de sites avec des designs qui fonctionnent

Dans le même esprit : beautifully webdesign

De la crème de webdesign

The designed Tree

Un petit générateur de logo web 2.0

Et de façon plus générale, la bible  ultime du webdesigner (attention, nombreux liens inside^^)

Petits tests pour le fun : Lively, le tchat 3d de Google

On a tous plus ou moins entendu parler de Lively : un univers virtuel à la second life mais en moins poussé auquel toutes les personnes bénéficiant d’un compte google peuvent accéder simplement en se loguant avec leurs identifiants habituels.

J’ai testé l’application hier soir, et je dois dire que je trouve ça carrément plus sympa que SL ou IMVU pour deux raisons :

la rapidité de prise en main : une fois qu’on s’est habitué au déplacement en « glissé-déposé » du personnage, et qu’on a compris qu’un simple double clic sur une zone permettait de se téléporter, le reste coule de source : la fabrication de l’avatar, certes encore bien limité malgré les propositions gratuites du « store » externe, est très intuitive, et le style graphique attachant ; le passage d’une room à l’autre est également très facile, il suffit juste de savoir lire ( et merci l’interface épurée de google, toujours aussi efficace !)

Les possibilités offertes par Lively : en tant que simple visiteur, ok c’est pas mal limité aussi ; on se contente de tchatter, de baffer son voisin ou bien encore de danser avec une inconnue. Super, au moins ça a le mérite de nous occuper quelques minutes. Mais là ou je trouve Lively intéressant, c’est dans ce qu’il propose lorsque l’on monte sa propre room : à partir d’un « shell » (une sorte de décors préconstruit), on peut aménager son univers, et, outre poser des meubles ici et là, mettre des liens sur les différents objets, on peut aussi placer une galerie picasa par là, un écran vidéo youtube par ici, et ainsi pouvoir se bâtir un micro-univers autour d’un thème particulier.

Vous allez me dire  » mais qu’est-ce qu’il y a de révolutionnaire là dedans ? Second Life et Imvu font déjà des trucs similaires ! ».

L’interêt est surtout de pouvoir se connecter rapidement à un salon juste avec son identifiant google ( exit les formulaires d’inscription à remplir), l’appli, relativement légère, se lance dans le navigateur et Lively permet même aux créateurs de rooms d’insérer le fruit de leur labeur sur leur propre site internet !

Du coup j’ai décidé de m’en servir pour dynamiser un tantinet le forum que je viens de lancer (http://d00dz.net), histoire de regrouper les membres dans un salon de tchat et pourquoi pas faire des ptites soirées à thème où on pourrait se matter quelques épisodes des contes de la crypte (sisi, sur youtube y’en a !!!)

Certains parlent de Lively comme un outil qui peut être utilisé dans le domaine professionnel, mais l’expérience n’a t-elle pas déjà été tentée avec Second Life par le passé ? Non, Lively est je pense un petit plus à apporter à un site communautaire, à condition de bien savoir s’en servir et d’avoir envie d’animer comme il se doit quelques soirées entre geeks !

La room Lively des d00dz

Tiens, d’ailleurs, pour les quelques membres du forum (et les autres bien sûr, la salle ne sera pas close), je prévois une soirée spéciale Batman pour la sortie du « Dark Knight », avec une rétrospective sur le personnage, des liens vers des sites dédiés au mythe du Joker, avec une bande son reprenant les différentes OST des anciens films, des extraits de comic books et des vidéos choppés par ci par là sur youtube… What else ?!

Pour info, la room est visible ici > La room des D00dz

ou bien encore ici > La room des d00dz en moins beau

à vous de choisir pour faire le tour du proprio ! C’est petit mais je suis déjà en train d’en préparer une plus grande 😉

Confirmation de Woopra…et premières impressions.

Il y a quelques jours, j’abordais la question des statistiques à travers l’utilisation d’outils tels que phpmv2, google analytics, getclicky ou encore woopra… Et bien figurez vous que je viens de recevoir un mail d’autorisation (hier matin) pour utiliser ce dernier… La classe, après un mois d’attente, je peux enfin m’amuser (jusqu’à ce qu’il soit payant, du moins.)

Woopra website

L’interface

Premières impressions : Woopra se lance rapidement, son interface est très agréable et son utilisation super intuitive.

il se divise en trois parties :

– En haut, un résumé général sur les stats (alltime visits, today visits et today page views) à côté d’un encart dans lequel il est possible de visualiser les graphiques journaliers qui comparent entre elles les visites du jour et leurs moyennes journalières (plus exactment, il délivre les comparaisons suivantes : today visits/today pagviews, today visits/average visits, et today pageviews/average pageviews) . Un onglet permet également de visualiser dans cette même partie le nombre de visiteurs parcourant actuellement le site (en live !).

– En bas, un véritable défilé de données à la « bloomberg » : rapport du taux de visites journalières, du temps passé sur le site, du nombre de nouveaux visiteurs, etc…

– La partie centrale quant à elle laisse apparaître un menu latéral comportant les onglets suivants : Dashboard, Live, Search, Analytics et Manage.

Les fonctionnalités « basiques »

  • La rubrique « Dashboard » : ouverte par défaut, elle donne une vue d’ensemble sur le nombre de visites des derniers jours, les pages les plus visitées, les sites référents, les dernières recherches effectuées par les visiteurs, et la répartition géographique de ces derniers.

    Le dashboard de woopra

  • La rubrique « Analytics » : je ne vais pas trop m’étaler sur cette partie, elle intègre grosso modo le même genre de données présentes dans google analytics : infos sur les visiteurs (provenance géographique, taux de rebond, etc…), infos sur les « systems » ( os, navigateurs des visiteurs …), infos sur les pages visitées, infos sur les referents (sites, moteurs de recherche, emails… qui ont conduits sur le site).

    woopra analytics

  • La rubrique « search » : elle permet tout simplement de retrouver rapidement une donnée enregistrée : un visiteur par son id, les visites récentes …

Les petits « plus » qui font de woopra un outil unique

  • La rubrique « Live » : petite merveille, cette rubrique permet de véritablement suivre à la trace les visiteurs qui se trouvent sur le site. A l’instar de Get Clicky, il est possible de mettre des noms sur les visiteurs et de conserver leur historique de navigation (là par exemple je note que le visiteur 36, qui vient des states, est passé deux fois sur le blog depuis hier…). L’intérêt ? A plus grand échelle ( ça marche pas trop pour le peu de visites que je fais ^^) on pourrait presque déterminer le « profil type » du visiteur… Quels articles l’intéressent le plus, si sa situation géographique a un lien avec ses recherches, etc… De quoi en ressortir de véritables « personas » sans avoir à se casser la tête ! (cf « l’ergonomie web » d’Amélie Boucher pour plus de détails).

    woopra live

    Mais cette rubrique contient également un petit « bonus » qui m’éclate vraiment : on peut, en cliquant sur « start a conversation », débuter un chat avec un visiteur ! Lui verra une petite fenêtre s’ouvrir dans le coin inférieur droit de la page, et pourra communiquer en direct avec le webmaster… Peut être que ça risque de le faire flipper au début (on peut même assimiler cette petite fenêtre à une vieille pub de rencontre en javascript…), mais bon, ça reste un gadget… Ou du moins, pour le moment. Qu’est ce qui m’empêche d’orienter le lecteur 34, qui lit depuis 4 minutes l’article sur Cindy Sanders, vers un autre site susceptible de l’interesser ?(un moyen comme un autre d’essayer de fidéliser un lecteur !)

    chat woopra
    woopra chat

  • La rubrique « Manage » : dernière rubrique et là aussi assez étonnante : il est possible de paramétrer des « alertes » pour être averti, là encore en temps réel, de ce qui se passe sur le site, ou bien d’envoyer un message à un visiteur précis lorsqu’il fait quelque chose de particulier… Bon, en pratique j’ai essayé de créer un évènement mais il ne s’est rien passé… Si quelqu’un sait comment ça fonctionne, ça m’interesse !

Woopra, le logiciel ultime de statistiques ?

Pour conclure, je dois avouer que le software m’a vraiment conquit : une ergonomie qui rend addict (j’ai du mal à m’empêcher de cliquer partout :P), des fonctionnalités originales et un système d’analyse assez complet, le pied quoi.
Petit bémol cela dit : comme c’est un logiciel à installer sur le pc, je ne sais pas s’il est compatible avec toutes les plateformes et ça m’étonnerait qu’il soit prévu pour windows mobile ou linux (du moins pour le moment)…
Mais comme tout outil de statistiques, je ne pense pas qu’il soit bon de le laisser récolter seul les données et qu’il n’est vraiment efficace que si ses résulats sont croisés avec ceux d’autres outils, comme phpmyvisits, get clicky ou google analytics

1000 ressources pour un développement web, par Bruno Bichet.

Excellent dossier sur lequel je suis tombé et que je suis en train d’éplucher : ça vient de CSS4DESIGN, c’est signé Bruno Bichet et c’est je pense un incontournable guide pratique du webdesign.
Au menu :

Première partie : La boite à outils du codeur de site web.

1. 22 éditeurs HTML et CSS pour Windows, Mac OS X et Linux

2. Javascript
* 240 plugins jQuery
* 6 Ressources complémentaires pour jQuery
* Autres frameworks Javascript

3. Ressources pour webdesigner
* Webdevelopers Field Guide : 750 liens pour webdesigner
* Extensions Firefox : développement et référencement
* Tester vos pages web dans différents navigateurs
* Monitoring de sites web
* Des milliers d’icônes de qualité
* Tutoriels ou tutoriaux webdesign
* Inspiration, expiration…

2ème partie : WordPress

1. Listes quasi-officielles
2. 17 plugins AdSense pour WordPress
3. 7 Plugins WordPress pour favoriser les commentaires
4. 10 Plugins WordPress pour Twitter
5. Vrac de plugins pour WordPress
6. Des centaines de thèmes pour WordPress

Ressources pour webmasters : les incontournables (graphisme & webdesign, 1)

Ce soir j’ai envie de partager ma trop longue liste de « marques pages » ( « favoris » pour les adeptes de ie ), avec un petit récapitulatif de ce que vous pourrez découvrir en cliquant sur les liens cités.

Voici donc une première série de quelques sites sur lesquels je traîne (il y’ en aura d’autre plus tard, évidemment) pour dénicher des scripts, des brushes, des tutos, bref une autre petite « boîte à outils » pour webmasters comme il en existe beaucoup d’autres sur le net :

Commençons donc par une première liste de sites proposant des ressources graphiques :

www.sxc.hu : un des sites que j’utilise le plus souvent pour trouver une photo; tapez n’importe quoi dans le moteur de recherche (en anglais de préférence), il vous dénichera une photo de très bonne qualité ( donc bien lourde ) et exploitable. Seule condition préalable pour pouvoir télécharger une image : s’inscrire sur le site. Une version « payante » propose plus de photos (et surtout des plus belles), mais généralement on trouve son bonheur sans avoir à débourser le moindre pesetas.

photogen.com : dans le même esprit que sxc.hu, un site qui propose une large gamme de photos gratuites et utilisables à outrance.

www.webchantier.com : qui ne le connait pas ? Ce site propose une foultitude d’images (vectorielles, s’il vous plaît) et la quasi totalité des logos des grandes marques du monde. Pictos, symboles, drapeaux, typos, et même publicités anciennes, vous devriez trouver votre bonheur dans ce beau bordel ( et on ne se moque pas du design du site ! J’suis sûr que ça va revenir à la mode un jour ! ).

fawnt.com et dafont.com : deux pour le prix d’un, et vous avez toutes les typos que vous désirez ! De très grosses ressources pour « écrire beau ».

deviantart.com/brushes , brusheezy et psbrushes : Pas mal de ressources plus ou moins sympathiques pour se procurer des brushes pour photoshop. Faites bien attention sur deviant, le moteur de recherche est pas évident, mais il est super utile… Une recherche par thème et vous trouverez votre bonheur.

Kuler et colorontheweb quant à eux proposent des palettes de couleurs qui s’accordent : Kuler de son côté possède plusieurs palettes préconfigurées et notées par les utilisateurs du site, Colorontheweb relie entre elles les couleurs qui vont le mieux avec celle que vous lui donnez en premier.

Bon, c’est déjà pas mal pour une première série de liens, je vous laisse découvrir (ou redécouvrir) ces sites ô combien utiles pour travailler un site …