PURE Arch – Homepage du site internet d’un cabinet d’architecte

Nouvelle édition du T2Oshare et cette fois-ci on a choisi l’architecture, autant dire que j’ai pu laisser parler ma créativité !

Bien évidemment nous reprenons une entreprise fictive, un cabinet d’architecte que j’ai appelé PURE Arch basé ici à Nantes.

Comme pour la maquette précédente et pour toutes autres maquettes d’ailleurs je suis passée par plusieurs étapes que je ne déraillerai pas ici ce n’est pas le but de cet article : 

  1. Appropriation du sujet et veille concurrentielle & graphique : un cabinet d’archi bien stylé et en vogue sur la région nantaise, j’analyse ce qui se fait en terme de web design sur ce type d’activité et ce n’est pas l’originalité qui manque.

     

  2. Réalisation d’un moodboard qui posera mon approche créa, inspirations et sources.

     

  3. Enfin la maquette graphique (car on est là pour ça) !

Donc pour la maquette je passe d’abord par un wireframe, ce croquis à main levé (bien-sûr) que je ne publierai pas ici car on est plutôt sur un gribouillis qui m’aide néanmoins a hiérarchiser et a organiser les éléments de ma future homepage.

Je garde en tête mon fameux triangle d’or : esthétisme, navigation et UX.
J’ai regardé dans ma boule de cristal et me suis inspirée de certaines tendances !

L’objectif n°1 de n’importe quelle interface est de proposer à l’utilisateur un accès direct aux informations qu’il recherche, pour cela je mise sur la simplicité et le minimalisme ! Pas des synonymes de monotonie ou de vieillot, bien au contraire, LESS IS MORE ! 

Une règle phare : ne pas surcharger l’écran de l’internaute pour ne pas le faire fuir et (diminuer le taux de rebond par la même occasion).

Je ne suis pas une grande adepte des mises en page encastrées et je préfère utiliser de la pleine largeur pour aérer et donner davantage de légèreté à mon design.

Côté typo 

Pour valoriser cette simplicité, j’ai opté pour des polices géantes et grasses afin de mettre en avant des messages forts (citations, mots clés..). 

Je trouve cohérent de distinguer clairement les titres du reste du contenu texte en donnant davantage de visibilité à mes titres soit par la taille, le niveau de graisse ou la police.

Pour PURE Arch j’ai utilisé des polices grasses pour les titres et plus light pour le contenu mais je n’ai pas fais de différence de typographie. J’ai choisi la police Montserrat ; que la majorité d’entre vous connaît certainement, une police sans serif qui favorise la lisibilité et la lecture de l’internaute. J’ai nuancé cette typo en Extrabold pour les H1, les H2 et du Montserrat Medium, voir du SemiBold pour le reste du contenu.

Côté quantité, on est sur du très très light, j’épure au maximum en intégrant que les éléments importants (cette pratique est tout de même à prendre avec des pincettes car la bonne pratique tend à dire qu’il faut un ratio de minimum 10% de contenu texte sur une page), bon ça va on est large !

Des visuels de toute beauté 

L’image est à l’honneur ! J’ai utilisé des photos engageantes (le thème s’y prête assez bien a vrai dire …), colorées et uniques qui donnent envie aux visiteurs de passer derrière l’écran et de plonger dans un univers arty et moderne, des valeurs qui façonnent l’ADN de l’agence PURE Arch (on est toujours sur du fictif mais je trouvais que ça sonnait bien ^^).
Je choisi mes images avec attention, en variant les réalisations intérieures des réalisations extérieures, la plupart sont utilisées en background des différentes sections de ma page.

Pour mettre en avant l’activité du cabinet déco & réno, j’ai créé une sorte de « pochoir » à l’effet coups de pinceau de couleur blanche que j’ai intégré au premier plan en superposition des photos.
Cet effet ajoute de l’asymétrie, limite le côté figé et surtout rythme le tout, comme si on avait peint les photographies (malin) !
Mais au delà de ça, ce pochoir floute les limites de « sections » et de catégories pour donner du mouvement.

Le Broken Layout 

La tendance destructurée se rapproche sensiblement du « Broken Layout » !
Je vous explique le webdesign a longtemps été guidé par les grilles qui permettent d’aligner le contenu et plus simplement de donner de la symétrie à votre rendu. Très pratique, seulement en 2019 on veut que ça bouge, le broken layout consiste donc à utiliser l’inverse de cette grille. On superpose, on mixe textes et images, on mélange le tout comme dans un blender et PAF ça fait des designs so 2019 bien cool !

Pour PURE Arch le broken est ma ligne directrice ! Mes textes, icônes, blocs, images se croisent, s’entrecroisent, un rendu proche de l’effet « magazine ».

 

Ma roue colorimétrique 

« Y a de la joie ! Bonjour Bonjour les hirondelles, y a de la joie ! […] »

Des couleurs vives, fortes et saturées : ici j’ai opté pour du beige rosé, du blush, du poudré, du bleu céleste.

roue_colorimetrique_maquette_architecte

 

 

Des nuances vibrantes qui attirent l’attention du visiteur et permettent de sortir un peu du conventionnel.
De nombreux sites vous permettrons aujourd’hui de trouver des idées d’association de couleurs pour éviter les faux pas, pour ma part j’utilise Adobe Color (une bonne base).

Du scroll, du scroll, du scroll 

J’ai construis la homepage de PURE Arch en scrolling page, une pratique qu’on ne présente plus qui affiche la page web et son contenu en scrollant, cette techno permet aux webdesigners dans une optique webmarketing de s’assurer que le visiteur ne manque rien, pas un argument clé, pas un contenu, pas un CTA.

PURE Arch c’est 

Une colorimétrie pointue : des couleurs nuancées allant du fluo vif au pastel doux, des photographies sélectionnées avec attention, une asymétrie calculée (les chevilles commencent à gonfler la).
Ce cocktail bien dosé interpellera vos visiteurs et ne les laissera pas indifférents.

Vous l’aurez compris, je me suis éclatée sur cette maquette ! Jetez un petit coup d’oeil juste en dessous de cet article 😉

Création de sites internet à Nantes Agence T2Oplus

Abonnez-vous aux IZI-NEWS !

 

Faites partie de notre IZI-Base et retrouvez les actus et nouveautés de la galaxie webmarketing !

Bienvenue dans la IZI-Base ! :)

Pin It on Pinterest

Share This