Mon approche pour un design et une expérience utilisateur agréable

Les étapes indispensables pour créer bon design et une expérience utilisateur impeccable pour votre site web

Lorsqu'on conçoit un site web, un design original combiné à une expérience utilisateur optimale ne rend pas seulement le site agréable, mais incite également les visiteurs à revenir.

Prenons l'exemple de certains sites de recettes de cuisine français que je ne nommerai pas, car ils ne méritent pas de publicité. Bien qu'assez populaires, ces sites sont saturés de publicités et de contenus sponsorisés sans lien avec le sujet. Résultat : dès que l’on arrive sur le site, il est difficile de trouver la recette qui, pourtant, avait un titre accrocheur. L'expérience utilisateur est désastreuse, et le design, bon ou mauvais, n'y change rien.

Avec des millions de sites disponibles sur Internet, il est indispensable de se démarquer en offrant quelque chose de nouveau et de distinctif. Trouver des idées originales permet de proposer des concepts uniques, des fonctionnalités innovantes ou un design créatif qui rendent votre site web mémorable.

Ces idées originales peuvent grandement améliorer l'expérience utilisateur sur votre site. En intégrant des fonctionnalités interactives, une navigation intuitive, des visuels attractifs ou un contenu engageant, vous offrez une expérience agréable et mémorable, ce qui incite vos visiteurs à revenir.

Définir l'expérience utilisateur (UX) dès le départ et la compléter par un design agréable sont des étapes incontournables avant d'installer votre CMS favori ou d'écrire la première ligne de code.

Pour trouver des idées originales, je puise dans diverses sources d'inspiration : des sites web primés, des galeries de design, des blogs spécialisés, des tendances actuelles en matière de conception, ou encore des magazines de design. Je fais également des recherches de sites concurrents pour identifier ce qui fonctionne bien dans mon secteur d'activité et chercher des moyens de surpasser ces exemples.

Pour trouver de l'inspiration, j’aime visiter Awwwards.com, qui met en valeur des sites innovants, créatifs et esthétiquement remarquables. Ce site évalue le design, l’expérience utilisateur, l’interactivité et la technologie. C’est une source d'inspiration que je consulte régulièrement lors de la création d’un nouveau projet.

Ma recherche pour création du site internet chezgrand.com

Prenons l’exemple de chezgrand.com, c’est le site de notre famille. Je l’ai mis de côté pour l’instant, mais un jour, j'espère avoir le temps de le remettre en route. Ce site, dans sa version idéale, donnera des idées de recettes cuisinées avec des produits de notre jardin, notre pratique au jardin et ce que nous faisons à la maison. Mais, en attendant, je vais l’utiliser comme exemple pour illustrer ma manière de faire mes recherches de moodboard et m’inspirer pour l'UX et l'UI (interface utilisateur).

J'aimerais que le design du site web chezgrand.com soit à la fois frais et invitant, avec des éléments visuels qui mettent en avant la nature et la convivialité. La palette de couleur sera composée de tons terreux, de verts doux et de quelques touches de couleur vives afin d'ajouter de la vivacité.

En gardant ceci à l’esprit, je vais commencer mes recherches et voir ce qui peut m’inspirer. Ça n’est pas impossible que je m’égare dans mes recherches et tombe sur quelque chose de complètement différent de mes premières idées.

Voici quelques idées que j’ai trouvées sur Awwwards :

Ce site web présente le rapport d’activité 2002 de l’agence Driftime. L’agence Driftime l'un des studios fondateurs du mouvement Design Declares, encourageant les designers, les studios, et autres à agir face à la crise climatique et écologique.

Ce que j’ai aimé sur ce site web est la palette de couleur, spécialement la section avec le bleu/beige et les verts. Les titres fixes (sticky) dans la partie gauche de la page sur la version écran du site web et les lignes verticales donnent un aspect très élégant.

https://wayoflifenow.com/circular-economy/

Way of Life est une plateforme multimédia qui propose du contenu créatif inspirant à travers des histoires sous divers formats tels que des films, des articles, des séries de photos et des podcasts. L'objectif de ce contenu est de mettre en lumière la durabilité, les personnes et la planète. Le site a pour mission d'inspirer et de susciter l'espoir pour l'avenir en diffusant des connaissances scientifiques, des initiatives durables et des histoires à couper le souffle. Way of Life croit fermement qu'il est nécessaire de travailler ensemble pour changer le monde.

Ce qui m'a particulièrement attiré sur ce site, c'est l'utilisation de la typo Futura PT pour les titres et de Gilda Display pour les textes. De plus, la palette de couleurs est très agréable, notamment le choix du vert pour les titres. Sur la version desktop, le contenu des articles est centré, tandis que les images sont décalées. Cette mise en page très aérée met en valeur les images tout en rendant le texte facile à lire grâce à une largeur de contenu optimale (620px).

https://www.landbrukskvartalet.no/om-prosjektet

Comme pour les autres projets, ce qui m’a interpelé, ce sont les belles photos et la palette de couleurs, le vert encore une fois. Les grands titres et la typo me plaisent également. Par contre sur ce site, la police avec empattement a été utilisée pour les titres, alors que sur le précédent site une police sans empattement a été utilisée. Je trouve aussi très sympa la liste qui se trouve au milieu de la page avec les chiffres en grand. Ce style de mise en page pourrait très bien s’adapter pour les ingrédients et le temps de cuisson, etc.

https://tezebazar.az/en

Celui-ci est différent, le design est hors du commun, on s’y perd même un peu.

Le Təzə Bazar, ou Nouveau Bazar, occupe une place spéciale à Bakou, la capitale de l'Azerbaïdjan. Ce marché, riche d'une longue histoire, préserve les traditions nationales tout en se tournant résolument vers l'avenir. Aujourd'hui, il est en pleine reconstruction, prêt à entamer un nouveau chapitre de l'histoire des bazars de Bakou et de la ville elle-même.

Ce qui a attiré mon attention en visitant ce site, c’est justement son côté non conventionnel, ça m’a donné envie de cliquer pour voir ce qu’il en était. Une fois qu’on commence à naviguer et à lire le contenu, on comprend mieux comment ce site est structuré, le design est original avec ses vignettes ovales mixées avec d’autres formes, ça n’est pas habituel, mais ça marche, c’est original et c’est ce que je vais en retenir.

https://skikkeligdiggmat.no/oppskrifter/kylling/kremet-tagliatelle-med-kylling

Skikkelig Digg Mat est un site web culinaire norvégien proposant des recettes élaborées par Spoon Agency en collaboration avec ses clients. En tant qu'agence stratégique créative, Skikkelig Digg Mat est animée par la connaissance approfondie du domaine et un talent éditorial affirmé, sans oublier une grande passion pour la bonne nourriture, ou comme ils l'appellent, la "skikkelig digg mat".

J’ai retenu ce site parce que j’ai bien aimé les petites animations de grignotage sur les vignettes des recettes et les formes arrondies en arrière-plan des produits.

Voici pour mon tour d’horizon des sites qui m’ont inspiré pour la réalisation du blog chezgrand.com. Je vais piocher des idées dans ces sites pour réaliser mon design. Je ne vais pas passer plus de temps sur la recherche de sites, par contre je vais maintenant essayer de trouver quelques idées qui sortent de l’ordinaire et qui seraient applicables à mon site sans demander un développement trop conséquent.

Le contenu est roi

Bill Gates en 1996 a déclaré « Content is King » dans un article qu'il a écrit pour Microsoft. C’était une prédiction perspicace, car la création et la diffusion de contenu de qualité sont des leviers essentiels pour attirer de nouveaux clients.

Qu’est-ce que nos visiteurs aimeraient trouver en parcourant chezgrand.com ? Cette question reste aussi importante que de créer le contenu, parce que si notre contenu n’est pas accessible facilement, nous allons perdre nos visiteurs.

Voici une liste d’idée à considérer pour la réalisation future des wireframes.

• la dernière recette qu’il a consultée pour la retrouver facilement
• le dernier article du blog
• ce qui se passe au jardin en ce moment
• un champ de recherche parce qu’il veut rechercher une recette
• une recette inspirante de saison / la dernière recette
• le plan des recettes de la semaine
• un thème qui correspond à la saison (été, glaces, noel, biscuits, Italie, pâtes)
• pouvoir s’inscrire à la newsletter hebdomadaire
• possibilité d’imprimer avec une belle mise en page, parce que sur certains sites, ça craint… (bouton imprimante)
• possibilité d’enregistrer ses recettes favorites (bouton +)

Qu’est-ce qu’il ne veut pas voir ?

• des tonnes de pub qui polluent le contenu
• un popup qui surgit à peine arrivé sur le site

N'oubliez pas que l'originalité ne signifie pas nécessairement tout réinventer. Parfois, il s'agit simplement de combiner des éléments existants de manière nouvelle et créative. L'important est de trouver des idées qui correspondent à votre vision et à votre public cible, tout en offrant une expérience unique et pertinente sur votre site web.

Cette base servira à la création du nouveau site de notre famille. Cette étape est indispensable afin d’avancer sur la partie UX et UI. Cela semble être énormément de travail est en fait un énorme gain de temps pour la suite du projet.