Exercice de refonte du site de Michel et Augustin

Client : Travaux personnels

Rôle : Webdesign

Année : 2016

Mission

Michel et Augustin est une entreprise française de produits alimentaires. Ils proposent différents produits allant du yaourt à boire aux cookies en passant par des jus de fruits. La marque a une image d'entreprise artisanale à l'ambiance bon enfant. Leurs emballages sont reconnus pour leurs personages crayonnés et leurs petites doses d'humour.

J'ai voulu tenter une refonte graphique de leur site internet car j'ai remarqué qu'il n'est pas adapté aux différents supports mobile.

Ma démarche a été de faire une refonte graphique sans toucher au contenu du site tout en respectant la charte graphique du site actuel. 

J'ai opté pour une structure fluide avec un contenu qui s'adapte à tout type de tailles d'écrans. Certains éléments ont été déplacé et / ou mis plus en valeur car selon moi ils étaient trop en retrait voire peu visible sur le site actuel.

Afin de respecter l'image de l'entreprise, j'ai opté pour une présentation des produits avec un fond comprenant des éléments crayonnés de même pour les icônes présents sur la page. Dans la même idée j'ai choisi une police d'écriture manuscrite pour les titres ainsi que les boutons du menu. Pour le contenu j'ai plutôt opté pour une police simple sans empattement pour ne pas gêner et alourdir la lisibilité du texte.

Cette refonte a été un bon entrainement. C'était intéressant de travailler sur le site d'une marque si particulière.

Toutes les photos utilisées appartiennent à l'entreprise Michel et Augustin.

MA_FontAngleMA_FontAngle

Polices d'écritures utilisées

Cinnamon Cake

CinnamonCakeFontCinnamonCakeFont
[unex_ce_button id="content_7aub4joxf" button_text_color="#ffffff" button_font="semibold" button_font_size="20px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#e6007e" button_padding="15px 60px 15px 60px" button_border_width="4px" button_border_color="#ffffff" button_border_radius="0px" button_text_hover_color="#e6007e" button_text_spacing_hover="2px" button_bg_hover_color="#ffffff" button_border_hover_color="#ffffff" button_link="http://brittneymurphydesign.com/downloads/cinnamon-cake/" button_link_type="url" button_link_target="_blank" has_container="1" in_column=""]Télécharger la police[/ce_button]

Raleway

RalewayFontRalewayFont
[unex_ce_button id="content_12db5c6v0" button_text_color="#ffffff" button_font="semibold" button_font_size="20px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#e6007e" button_padding="15px 60px 15px 60px" button_border_width="4px" button_border_color="#ffffff" button_border_radius="0px" button_text_hover_color="#e6007e" button_text_spacing_hover="2px" button_bg_hover_color="#ffffff" button_border_hover_color="#ffffff" button_link="https://www.google.com/fonts/specimen/Raleway" button_link_type="url" button_link_target="_blank" has_container="1" in_column=""]Télécharger la police[/ce_button]
angle2_MAangle2_MA

Mockups de la refonte

mockupsmockups
angle3_MAangle3_MA

Version Bureau

MichelEtAugustinMichelEtAugustin
angle2_MAangle2_MA

Version Mobile

Mobile_MichelEtAugustinMobile_MichelEtAugustin