À faire et à ne pas faire pour une bonne conception Web

Lorsqu'il est suivi, ce guide s'avérera être une ressource de conception Web très précieuse, surtout si vous envisagez d'utiliser logiciel de développement de site web à l'avenir. Des inexpérimentés aux expérimentés, ce guide a quelque chose pour tout le monde.

Le processus d’une bonne conception Web Juste pour nous assurer que nous sommes tous sur la même longueur d’onde, commençons par la définition de base du « conception Web ». Selon Wikipédia, la conception Web est :

« un processus de conceptualisation, de planification, de modélisation et d'exécution de diffusion de médias électroniques via Internet sous la forme d'un langage de balisage adapté à l'interprétation par un navigateur Web et à l'affichage sous forme d'interface utilisateur graphique » .

Le processus de conception de sites Web peut être comparé au processus de rédaction d’un document de recherche. Au cours de la phase de conceptualisation/planification, des organigrammes (le plan) sont créés pour illustrer la structure de navigation de votre site Web. Au cours de la phase de modélisation, des wireframes statiques sont créés (le brouillon) qui illustrent la disposition squelettique de chaque section de votre site Web. Une fois les wireframes créés, les graphiques, les couleurs et le texte sont utilisés pour créer la conception de vos pages Web en fonction de la disposition des wireframes. Au cours de la phase d'exécution, votre conception est convertie dans un format pris en charge par les navigateurs Web, le texte et le contenu sont ajoutés et enfin, votre site Web est publié en direct sur Internet pour que le monde entier puisse le voir (version finale).

Les trois étapes du processus de conception sont d’égale importance. De nombreux concepteurs de sites Web sautent une étape afin de gagner du temps ou parce qu'ils ne pensent pas que cela soit nécessaire. Cependant, les trois étapes sont nécessaires si votre objectif est de créer un site Web au design réussi et respectable. Même si les trois étapes sont utilisées, les concepteurs de sites Web peuvent commettre de nombreuses erreurs qui conduiront à des sites Web de mauvaise qualité et non conviviaux. Il est temps de vider le placard des mauvaises pratiques de conception de sites Web et de le réapprovisionner avec les bonnes.

Étape 1 : Conceptualisation et planification
Cette étape est sautée plus souvent que les deux autres étapes. La plupart des rédacteurs n'aiment pas créer des plans pour des articles de recherche, et la plupart des concepteurs de sites Web n'aiment pas non plus créer des organigrammes. Ne soyez pas paresseux. Si vous faites des efforts et planifiez votre site Web, vous constaterez que le processus de conception Web se déroulera sans problème avec moins d'erreurs commises en cours de route.

Vous aurez besoin de quelques éléments pour conceptualiser et planifier efficacement votre site Web :

• un cerveau
• un stylo et du papier
• (facultatif) logiciel d'organigramme
• une idée générale des différentes sections de votre site internet

Pour commencer, prenez votre stylo et votre papier ou lancez votre logiciel d'organigramme préféré. Nous utilisons OmniGraffle Professiona pour Mac OS X qui coûte 150 $ par licence mais qui en vaut la peine si vous créez régulièrement des sites Web. Si vous utilisez un PC, SmartDraw est un excellent logiciel d'organigramme GRATUIT que vous pouvez utiliser. Cependant, un stylo et du papier fonctionnent très bien.

Il existe de nombreuses méthodes pour créer des organigrammes. Nous allons vous montrer la manière la plus basique de le faire pour des raisons de temps et de longueur de cet article. Si vous souhaitez en savoir plus sur les organigrammes, recherchez des organigrammes sur Google ou Yahoo.

Consultez l'organigramme que nous avons créé lors de la conceptualisation des sites chromatiques. (1) En haut de l'organigramme, nous indiquons le nom de notre site Web. (2) Ensuite, nous incluons chaque section principale de notre site Web : Accueil, À propos et Services. Ces sections constituent la navigation principale de votre site Web. Le nom de chaque section dépend entièrement du contenu de votre site Web. Essayez d'utiliser le moins de sections possible afin que vos visiteurs ne soient pas submergés lorsqu'ils naviguent sur votre site Web.

(3) Ensuite, ajoutez toutes les pages secondaires (sous-sections) qui seront répertoriées sur chacune des pages principales. Pour Accueil, nous avons inclus la conception Web professionnelle, le développement Web et l'optimisation des moteurs de recherche. La navigation secondaire doit être plus descriptive que la navigation principale. Plus la hiérarchie de navigation de vos sites Web est profonde, plus chaque étiquette doit être descriptive.

Le Dos

• Moins est plus; maintenir le nombre de sections primaires au minimum. Nous utilisons 6 sections sur notre site Web, ce qui est largement suffisant
• Que vous utilisiez un stylo et du papier ou un logiciel d'organigramme, gardez les choses aussi propres et organisées que possible. Même si vous (et toute personne travaillant avec vous) êtes les seuls à utiliser l'organigramme, il doit néanmoins avoir un sens. Vos sections principales doivent utiliser des termes plus larges, tandis que les termes secondaires et tertiaires doivent être plus descriptifs.

Les Donts
Créer un organigramme est assez simple ; cependant, quelques erreurs peuvent facilement être commises :

• N'utilisez pas de termes très descriptifs dans votre navigation principale, à moins que l'ensemble de votre site Web ne se concentre sur un sujet précis. N'essayez pas de regrouper plusieurs sujets sur la même page. Créez une section générale pour ces sujets et à partir de cette section, créez des sous-sections. Cela rendra les pages Web de sous-section (descriptives) plus susceptibles d'avoir un meilleur classement dans les moteurs de recherche (Google, Yahoo, MSN, Ask). Une fois que vous avez créé un organigramme concis et descriptif, vous êtes prêt à passer à la deuxième étape. du processus de conception Web :

Étape 2 : Modélisation
Lors de la phase de modélisation, des maquettes statiques « filaires » sont créées. Chaque maquette illustre un squelette simple de la mise en page de chacune des pages Web qui seront incluses dans votre site Web. Cette étape est importante car elle nous donne une idée de l'endroit où les différents éléments seront placés dans notre conception. Certains de ces éléments sont :

• logo
• menu de navigation
• contenu
• photos, vidéos

Pour créer ces maquettes, vous pouvez utiliser un stylo et du papier ou votre logiciel de maquette préféré. Dans le passé, nous utilisions Photoshop, mais dernièrement, nous utilisons OmniGraffle Professional. OmniGraffle n'est pas aussi gourmand en ressources que Photoshop et il nous permet d'assembler nos maquettes filaires beaucoup plus rapidement.

De plus, assurez-vous d'avoir à proximité le ou les organigrammes que vous avez créés, car vous devrez les référencer de temps en temps pour vous assurer que vous simulez toutes les pages qui apparaîtront sur votre site Web.

Voici notre exemple de ce à quoi devrait ressembler une maquette filaire. Comme vous pouvez le constater, aucune couleur ni graphique n’est inclus. C’est exactement à cela que devrait ressembler une maquette filaire : une présentation squelettique de votre conception. Le but est de pouvoir avoir une idée générale de l'endroit où sera placé chacun des éléments de la page web.

Nous commençons généralement par le coin supérieur gauche et descendons vers le bas. Il n’y a pas d’apparence spécifique à laquelle un wireframe devrait ressembler. Utilise ton imagination. Cependant, assurez-vous que lors de la création de vos wireframes, vous n'oubliez pas d'inclure les éléments les plus importants d'un site Web (logo, menu de navigation, placement du contenu, placement des images/vidéos).

Si certaines de vos pages utilisent la même mise en page, il n'est pas nécessaire de simuler toutes ces pages (même si vous le pouvez certainement). Assurez-vous simplement de créer une maquette de toute mise en page unique de votre site Web. Vous vous remercierez plus tard.

Les choses à faire

• maquetter toutes les pages uniques
• inclure des éléments importants (logo, navigation, placement de contenu, placement d'images/vidéos) - commencer par le haut et descendre - référencer votre organigramme créé à l'étape 1 pour ne pas oublier de créer une maquette de pages - enregistrer, enregistrer, enregistrer - comme pour tout ce qui se passe sur l'ordinateur, enregistrez votre ou vos maquettes toutes les 10 minutes environ
• concentrez-vous sur des mises en page claires et conviviales -étiquetez vos éléments afin de ne pas oublier ce qu'ils sont lorsque vous les référencez à l'étape 3, exécution -utilisez d'autres sites Web comme source d'inspiration ; il n'y a rien de mal à prendre des éléments d'autres sites et à les personnaliser (voir « à ne pas faire »)

Le Dont

• n'incluez pas de graphiques ou de couleurs (c'est pour la prochaine étape) - ne rendez pas vos maquettes trop « chargées » ; concentrez-vous sur des mises en page propres, bien organisées et conviviales – ne sautez pas cette étape ; c'est tout aussi important que le premier et le dernier : si vous prenez des éléments d'autres sites Web, assurez-vous de ne pas plagier ; il y a une différence entre s'inspirer d'un autre site Web pour créer certains éléments de votre design et arracher de manière flagrante leur mise en page et leurs couleurs

Étape 3 : exécution
Dans la troisième et dernière étape, l'exécution, la planification des étapes 1 et 2 est combinée pour aider à la création d'un site Web interactif en direct.
La troisième étape est de loin la plus longue puisque vous allez 1) créer les graphiques 2) créer le contenu et enfin 3) convertir les conceptions Web à partir d'images en code que les navigateurs Web utilisent pour présenter votre site Web au monde.

Au moment où vous atteignez la troisième étape, vous devriez avoir une idée claire de :

• comment vos visiteurs se déplaceront d'un endroit à un autre (étape 1, organigramme) - comment vos pages Web seront présentées (étape 2, maquettes filaires)

Si vous n'avez pas une idée claire de ces deux choses, revenez aux première et deuxième étapes et continuez à les développer. Vous constaterez que la troisième étape est la plus simple lorsque vous avez élaboré un plan de bataille clair et concis pour la conception de votre site Web.

Abandonnez le stylo et le papier
À l'étape 3, vous devez utiliser Photoshop ou un autre programme de retouche d'image puisque vous utiliserez des couleurs et des graphiques pour créer la mise en page de votre site Web.

Nous commençons généralement par créer la page « d’accueil » (index). Utilisez vos wireframes que vous avez créés à l'étape 2 comme modèle pour chacune des pages que vous créez. Cependant, au lieu d’utiliser des cases pleines, utilisez plutôt des graphiques, des couleurs et du texte. Chaque page doit ressembler exactement à ce que vous souhaitez voir sur Internet, car il s'agit de la dernière étape du processus de conception.

Assurez-vous d'inclure l'arrière-plan de votre navigation (mais n'ajoutez pas réellement le texte à votre image). Lors de la conversion à l'aide de CSS (feuilles de style en cascade), votre navigation doit être sous forme de texte et non d'images. Les images ne sont pas explorables par les moteurs de recherche (les mots-clés utilisés dans votre navigation ne seront pas indexés dans les pages de résultats des moteurs de recherche, ce qui signifie que moins de personnes pourront trouver votre site Web).

Lorsque vous êtes satisfait de vos conceptions et que vous sentez qu'elles sont prêtes à être mises sur Internet, il est temps de séparer les conceptions afin de pouvoir créer une mise en page basée sur CSS. Pour plus d'informations sur la conversion de vos mises en page en CSS ou le balisage de votre site Web en CSS, visitez w3schools.com. Après avoir parcouru Internet, nous n'avons pas pu trouver de didacticiel image-CSS décent – ​​alors attendez-en un de notre part dans les semaines à venir. La conversion de vos conceptions en CSS est extrêmement importante car les dispositions de tableau appartiennent au passé.

Voici un exemple de site Web presque terminé de la mise en page que nous avons simulée à l'étape 2. Celle-ci a été prise directement depuis notre navigateur Web et comme vous pouvez le voir, il y a maintenant un logo, des couleurs, un joli système de navigation, un pied de page, et surtout, une mise en page propre et organisée.
Grâce à la planification en étapes 1 et 2, notre aménagement est bien organisé et facile à utiliser.

Le Dos

• référencez vos modèles créés à l'étape 2 ; bien que vous puissiez vous écarter de votre mise en page originale, vous ne devriez pas avoir besoin de le faire
• faites quelques recherches avant de créer votre design actuel ; obtenez des idées sur d'autres sites et personnalisez-les (sans plagier)
• incluez de la couleur et des graphiques pour créer l'apparence finale de vos pages Web - utilisez CSS (feuilles de style en cascade) pour convertir vos conceptions à partir d'images en balisage compréhensible par les navigateurs Web - référencez votre organigramme à partir de l'étape 1 lors du codage de vos pages avec des hyperliens ; il est préférable d'utiliser un menu déroulant qui inclut tous (ou la majorité) des liens de votre site Web sur chaque page ; cela permettra une navigation plus facile et rendra également vos pages plus faciles à explorer lorsque les robots des moteurs de recherche s'arrêteront ; un excellent endroit pour obtenir des menus déroulants CSS est sur DynamicDrive.com - finalisez votre conception tout en travaillant dans Photoshop ou dans tout autre logiciel d'édition d'images que vous utilisez ; il peut être difficile d'apporter des modifications à votre conception une fois qu'elle est convertie en balisage (code)

Les Donts

• n'incluez pas le texte dans vos menus de navigation lors de la conversion en CSS ; au lieu d'utiliser du texte image, utilisez du texte normal lisible par les robots des moteurs de recherche
• n'utilisez pas de tableaux lors de la conversion ; même si vous devez acheter un livre sur CSS, cela en vaudra la peine ; les tables sont mortes
• ne sautez pas les deux premières étapes juste pour gagner du temps ; votre site Web SERA meilleur si vous commencez dès le début du processus de conception Web (plutôt qu'à la fin)
• n'oubliez pas de compresser vos images lorsqu'elles sont découpées pour CSS ; il n'y a rien de pire qu'un site Web qui se charge lentement à cause de fichiers image volumineux ; Photoshop dispose d'une option « Enregistrer optimisé pour le Web » (CS3 – « Enregistrer pour le Web et les appareils »)

Le processus rend parfait
En suivant un processus de conception Web tel que celui illustré dans cet article, vous augmentez les chances de créer un site Web bien organisé, facilement navigable et très convivial. Soyons réalistes : si les visiteurs se perdent ou deviennent confus en essayant de surfer sur votre site Web, ils pourraient cliquer sur le bouton Précédent et rechercher un site Web plus convivial. Les gens n’aiment pas réfléchir lorsqu’il s’agit de s’orienter sur les sites Web. Ne les faites pas réfléchir. Vous réfléchissez en planifiant votre site Web de l’étape 1 à l’étape 3 et vous constaterez que davantage de personnes apprécieront visiter votre site Web.