Histoire d'un site #1 - La page d'accueil

Histoire d'un site #1 - La page d'accueil

S'il y a bien une chose qu'il serait dommage de ne pas avoir en tant que développeur web, c'est bien un site internet. Son propre site. Certains n'y voient pas d'intérêt, mais il permet entre autres de proposer une démonstration technique de son savoir faire. Il peut permettre également de s'y exprimer, via un blog, par exemple. Cet article est le premier d'une série et va parler plus en détail de la conception et de la réalisation de la page d'accueil de ce site.

Cela faisait plusieurs années que des ébauches de design et de code se succédaient, mais il a fallu que je me lance un jour. Ce jour a été le 5 mars 2013, où j'ai tout simplement commencé avec le fameux duo papier / crayon. Et voilà ce que j'ai tiré de quelques minutes de réflexion et d'imagination.

L'ébauche de la page d'accueil, sur papier, car c'est là que tout commence

Ça n'était qu'une ébauche mais c'était le début de 6 mois de développement en discontinu (j'ai travaillé sur d'autre projets en parallèle, ce qui m'a pas mal ralenti). Chaque page a ainsi fait l'objet d'une réflexion plus ou moins intense allant de quelques minutes à quelques heures.

Au niveau de l'expérience utilisateur, je voulais quelque chose de fluide : une navigation sans rechargement. C'est beaucoup plus "classe" et agréable à l’œil et pour le moral.

Si vous êtes prêt à lire cette longue épopée, vous pouvez y aller. Prévoyez un verre d'eau et un cachet d'aspirine, ça risque de faire mal.

La page d'accueil : le ton du site

S'il y a bien une page à soigner, c'est la page d'accueil. C'est celle qui donne, tout de suite, le ton du site, la première impression. Je n'aime pas la tendance actuelle qui veut tout faire de façon simpliste où pas grand monde se casse la tête, sans même parler des personnes qui utilisent des outils tel que le Bootstrap (le premier qui me dit que c'est beau, qu'il aille chez un ophtalmologiste). À mon sens, un site se doit de nous ressembler, de retranscrire ce que l'on est. J'avais besoin de montrer ce que je fais (mes travaux) et ce que j'écris sur mon blog à la fois. Pour ça, plusieurs solutions : on peut faire en sorte que la page d'accueil soit la page 1 du blog... pas très sexy ; on peut également tout de suite être sur le portfolio, mais c'est un peu la même chose. J'ai préféré avoir une vraie page d'accueil qui montre en résumé ce que l'on peut trouver sur le site, sans qu'il ait 50 liens.

Réalisation graphique

Lorsque j'ai dessiné la page, je n'ai pas du tout réfléchis à la façon de coder cette chose tordue. Ensuite, je l'ai designé plus proprement via notre ami Photoshop ce qui m'a amené à une maquette visuelle de ma page d'accueil. Sur le papier j'avais les formes, mais pas les couleurs et les textures. Etant un développeur, et comme beaucoup d'autres, je développe sur fond sombre, car c'est beaucoup plus reposant pour les yeux. Comme je voulais conserver une cohérence entre le blog (là où il y a le plus à lire) et le reste du site, j'ai donc opté pour un fond gris foncé. Et pour le qu'il ne soit pas tout plat, j'ai tout simplement répété mon logo en le dupliquant plein de fois de façon à avoir une image "répétable" sans que le motif ne soit trop lourd.

La tête, qui est une caricature de la mienne, a été réalisée sur calque par une amie actuellement en école d'art, puis vectorisée par mes soins de façon à pouvoir la redimensionner et la mettre où je le souhaite (notamment dans le menu, là-haut, à côté de "Accueil"). Elle a nécessité pas loin de 3h de travail.

Réalisation technique

Vouloir voir ce que ça allait donner réellement dans un navigateur, j'ai intégré ma maquette. Je souhaitais, dès le départ avoir un site léger à charger, j'ai donc tenté d'en faire un maximum en CSS (langage de description pour mettre en forme une page web). Ainsi, pour la page d'accueil, en dehors des images illustrant mes travaux et les articles du blog, je n'ai utilisé que 3 images : celle de ma tête, le fond de la page et mon logo au milieu. Absolument tout le reste est codé.

Vouloir coder tout ça m'a imposé de ne pas supporter, dès le départ, les navigateurs anciens (Internet Explorer 6, 7 et 8). L'avantage est que la page est plus légère. Néanmoins, je voulais quelque chose de dynamique. J'ai fais quelques essais non concluants en intégrant des animations en fond, mais c'était bien trop lourd pour le navigateur qui a fait planté l'ordi de certains de mes amis testeurs (que je remercie au passage s'ils lisent cet article).

Du fait que je ne m'imposais plus le support des navigateurs anciens, je pouvais me permettre d'utiliser des techniques récentes qui permettent par exemple, la rotation des éléments ou encore l'animation de ceux ci. C'est d'ailleurs en CSS qu'est réalisée l'animation de chargement qui prend la forme du logo. J'ai voulu expérimenter les animations CSS et j'ai été séduit par la fluidité et le rendu de cette petite animation, elle est donc restée là. Il ne restait plus qu'à l'afficher / masquer en JavaScript et le tour était joué.

Le premier jet de la page d'accueil, animations des articles / portfolio comprises, était complètement réalisé en CSS avec les animations. Le soucis que j'ai rencontré est que ça n'est pas contrôlable. Dès que j'ai dû passer à la navigation entre les pages, je ne pouvais pas arrêter les animations sans passer par des artifices qui alourdissaient le système. Je suis donc par la suite revenu à des animations en JavaScript de mes éléments.

Me voilà donc arrivé à deux semaines de développement, avec une page d'accueil qui me plait, animée, légère et, a priori, fonctionnelle.

Rendez-vous demain pour le prochain article de cette série qui sera au sujet du blog.

Votre gravatar
Gravatar de Rose Rose
Never would have thunk I would find this so inenbpdisasle.
Répondre