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^^)

Dossier #1 – Le travail en amont d’un projet web (2)

Première partie du mini-guide « se lancer dans un projet web », cet article vise à sensibiliser sur l’intérêt de la réflexion qui doit se faire avant de se lancer dans la création d’un site internet…

1. Trouver une niche pas trop concurrentielle.

La première chose à faire avant de se lancer dans tout projet, c’est de commencer par se trouver une « niche », ou plus simplement un domaine dans lequel la concurrence n’est pas trop forte. Vous pouvez toujours risquer de vous frotter à des géants comme jeuxvideos.com ou gamekult si vous créez un site de news pour jeux vidéos, mais si le budget ne suit pas, autant abandonner tout de suite.

Si vous désirez tout de même vous attaquer à ce marché, infiltrez le en ciblant par exemple un jeu en particulier dans les premiers temps, puis étendez-votre champ d’action au fur et à mesure … Partez d’un site « spécialisé », qui aura beaucoup plus de chance de percer rapidement, puis abordez d’autres sujets, tout en les développant un maximum, jusqu’à, pourquoi pas, devenir un site « généraliste ». A savoir que cette méthode peut prendre énormemment de temps …

Assurez-vous également que le thème exploité ait une audience sur internet : ne vous lancez pas dans un site ayant pour thème la tribu des Gaucata, vous risqueriez d’y laisser des plumes !

Pour trouver des niches sur le web, vous pouvez utiliser des outils tels que ceux fournis par Google ( je pense notamment à Adwords et Adsense, qui, bien utilisés vous permettent entre autres de savoir le volume de recherche sur des requêtes/mots clés précis, souvent révélateurs du dynamisme des thèmes abordés sur le net)

Quelques liens pour trouver des « niches » :

le  » Guide des niches web » (en anglais)
Un blog qui aborde souvent la question des niches adsense (à ne pas négliger, certains s’en servent pour leurs MFA, vous pouvez vous en inspirer pour une activité … Je pense notamment à l’article sur « comment détecter une niche en moins de 10 minutes« , en utilisant adwords)
Trouver les bons mots clés est également une méthode permettant non seulement de voir si la concurrence est rude, mais également de vous fournir une arme efficace pour le travail sur le référencement du site (voir plus loin)
Un article assez généraliste sur comment trouver sa niche

2. Développer un « business plan » : comme dans le lancement d’une entreprise, difficile d’y échapper si on veut bâtir un projet solide. Quelques pistes pour le développer :

Comment élaborer son business plan
Aide à la rédaction du business plan
60 questions à se poser pour la réalisation d’un BP

(je reviendrai plus en détail sur ce point dans un futur article, tant il y a de choses à dire !)

3. Choisir un bon nom de domaine.

Mais qu’est-ce qu’un « bon » nom de domaine ? Sans avoir la prétention de savoir exactement comment le trouver, voici néanmoins quelques conseils à appliquer pour le trouver :

– Il doit être court, unique et ‘tendance’ (cf ce vieil article sur les ndd tendances, qui est à mon sens encore d’actualité^^).
– Doit être également en rapport avec votre domaine d’activité.
– Facile à mémoriser, facile à prononcer.

Essayez de trouver le bon compromis entre pertinence du nom de domaine et facilité d’appréhension par l’utilisateur; en effet, même si l’intitulé du nom de domaine ne fait pas tout le référencement, c’est toujours bon de pouvoir placer un bon mot clé  (tapez par exemple « référencement » dans google, vous verrez que la majeur partie des sites qui ressortent ont ce mot dans leur nom de domaine… ça doit y être pour quelquechose ).

Quelques liens sur l’art de trouver un bon nom de domaine :

Comment choisir un bon nom de domaine ? (en anglais)
Choisir un nom de domaine efficace
Comment trouver un ndd efficace ?

Le site de l’AFNIC pour savoir si un le nom de domaine recherché est libre

4. Choisir un hébergement qui tient la route ! (dit-il en étant mutualisé chez 1and1… ^^)

Il existe 3 types d’hébergements : le personnel, le mutualisé et le dédié. On peut retirer d’office le premier, sauf si on est prêt à dépenser suffisamment d’argent dans une machine performante qui va bouffer de l’électricité à longueur de journée.

L’hébergement mutualisé est la solution « bateau », pour tous les sites à faible ou moyenne audience. Cette solution convient très bien aux sites qui n’ont pas d’ambition « à grande échelle » ; en revanche, si vous voulez jouer dans la cour des grands et que vous comptez faire du 100 000 visites/jour, optez pour un serveur dédié ; l’offre est certes plus chère (on peut compter une offre de démarrage à 35€/mois), mais vous en aurez pour votre argent. Concrètement, un serveur dédié est un ordinateur complet « dédié » à votre site (et les performances qui vont avec), alors qu’un mutualisé ne vous offre qu’un espace restreint sur un disque dur …

Pour aller plus loin dans l’hébergement des sites :

Dossier sur les 3 types d’hébergement existants
L’hébergement web, article de wikipédia
Un guide des hébergeurs
Un topic très complet ouvert depuis 2002 jusqu’à aujourd’hui (hallucinant !) ou les membre du forum de developpez.net comparent les différentes solutions d’hébergement (consultez les dernières pages du sujet pour plus d’actualité !)

En surplus, liste d’hébergeurs gratuits (peu recommandés pour une activité pro, mais pour tester…)

Voilà, je referme ainsi cette partie sur les premiers travaux à effectuer lorsque l’on se lance dans la création d’un projet web… Next step : la réflexion sur le design du site.

Dossier#1 – Se lancer dans un projet web : le « mini-guide » (1)

La conduite d’un projet web est pour pas mal de monde encore assez obscure ; on imagine qu’un site, c’est facile à réaliser (et c’est de plus en plus vrai), ça demande certes quelques compétences mais le neveu ou le fiston qui passe ses journées sur l’ ordi est capable de faire quelque chose qui tient la route même si c’est pas forcement beau. Bref, pas besoin de se prendre la tête, on lui fait confiance (Et puis, les internautes sont stupides, si on leur met des grosses images ils vont cliquer, c’est sûr).

Hélas, on se rend très vite compte que, lancer un site, ben c’est pas si simple que ça. Il y a quelques règles à respecter si on veut espérer obtenir un certain « succès ».

Je vous propose donc une sorte de « mini-guide » sur les bonnes pratiques de la gestion d’un projet web pour ceux qui débutent, dont le plan s’inspire beaucoup de cet excellent article de Chromaticsites, en l’illustrant de plusieurs cas concrets et en fournissant à chaque fois des liens vers des outils ou d’autres articles qui compléteront chaque partie de ce dossier.

Aux « experts » (ou à ceux qui s’y connaissent sans revendiquer ce titre) qui parcourront l’article de me rectifier si je fais fausse route à un moment donné !

Au sommaire des articles à paraître :
1. Le travail en amont : recherche, veille et élaboration d’un plan
2. Travailler le design et la mise en page du site
3. Rendre le site « User-friendly » et accessible
4. Travailler les contenus du site
5. Optimiser le site en respectant les standards
6. Se faire connaître : webmarketing et SEO

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 …