AccueilRéalisations
Réalisations
Des sites conçus et développés de bout en bout. Pour chacun : le contexte, ce qu'il fallait résoudre, le travail effectué, les choix techniques et le résultat.
- Projets présentés3
- PérimètreDesign + développement
- Mise en lignePar mes soins
NA'Build
Le contexte
NA'Build est une entreprise de construction, de rénovation et de design intérieur présidée par Nabil Hakmi. Elle intervient sur des appartements, des bureaux et des commerces, en solutions clés en main, et assure aussi le suivi de chantier.
L'objectif
Montrer le niveau de finition des chantiers et rassurer avant un premier rendez-vous. Le site devait donner envie de demander un devis, sans passer par un long argumentaire.
Mon rôle
Direction artistique, visuel 3D de la bannière, maquettes de toutes les pages, intégration et mise en ligne. Les textes et les photos de chantier ont été fournis par le client, retravaillés ensuite pour l'écran.
Le travail effectué
- Direction artistique : fond anthracite, accent doré, titres en capitales grasses sur deux tons
- Bannière en 3D : mise en scène d'un bâtiment contemporain de nuit, modélisée et éclairée dans Spline
- Maquettes de toutes les pages sous Figma, en version ordinateur et mobile
- Offre résumée en trois cartes illustrées : appartements, bureaux, boutiques
- Page de présentation construite autour du dirigeant et des trois valeurs de l'entreprise
- Section « Dans les coulisses de nos réalisations » : les photos des chantiers terminés
- Formulaire de demande de devis, posé sur un visuel de chantier en pleine largeur
Choix techniques
- Nom de l'entreprise en surimpression translucide sur le rendu 3D, pour lier le titre et l'image
- Chiffres clés posés sur des cartes en verre dépoli, seule façon de rester lisible sur une photo
- Navigation en pastilles, avec la page en cours toujours identifiable
- Bouton « Obtenir un devis » répété en haut, au milieu et en bas de chaque page
- Photos de chantier recadrées et compressées, chargées seulement à l'approche de l'écran
- Sur téléphone : navigation repliée en une seule pastille, sections empilées, formulaire en pleine largeur
Le résultat
Une vitrine au niveau des chantiers qu'elle présente : une bannière qui marque, une offre lisible en un coup d'œil, et une demande de devis atteignable depuis n'importe quel écran en un seul geste.
Outils utilisés
Figma
Spline
Dreamweaver- Wix Studio
Nouchi Fanga
Le contexte
Nouchi Fanga est une marque ivoirienne de cocktails alcoolisés en canette, née à Abidjan. Deux saveurs, Gingembre et Afro Mix, en 250 ml à 18 % vol, habillées par l'artiste Aboudia. La vente se fait uniquement par pack de 24.
L'objectif
Faire exister la marque en ligne avec l'énergie de ses canettes, et permettre de commander aussi bien depuis la Côte d'Ivoire que depuis l'Europe. Une seule page devait tenir le rôle de vitrine et de boutique.
Mon rôle
Direction artistique, maquettes, mise en scène des canettes en 3D, intégration, panier et parcours de commande. L'habillage des canettes vient de l'artiste, tout le reste a été dessiné pour l'écran.
Le travail effectué
- Identité tirée des canettes : typographie grasse arrondie, noir profond, rouge et jaune en accents
- Bannière construite autour d'une canette en 3D qui suit le défilement
- Une fiche par saveur : description, mots-clés, degré, contenance et prix au pack
- Section « Histoire » avec un lexique nouchi — fanga, mogo, enjaillé, djassa, gaou
- Porte d'âge à l'entrée : « Tu as 18 ans ou plus ? », avec le message de modération
- Configurateur de pack : on choisit une saveur, l'autre, ou on mélange les deux
- FAQ « Les questions qui reviennent » : mode de vente, provenance, commande, conservation
- Panier en tiroir latéral, du choix des packs jusqu'au récapitulatif de commande
Choix techniques
- Double devise euro et franc CFA, avec un sélecteur qui recalcule tout le panier
- Vente par pack uniquement : les quantités s'expriment en packs de 24, jamais en canettes
- Mentions légales sur l'alcool et réserve aux plus de 18 ans, du pied de page jusqu'à la commande
- Animation des canettes désactivée si le système demande un mouvement réduit
- Paiement en ligne pas encore branché : la commande part par formulaire, le client rappelle ensuite
- Le site tutoie son visiteur, du contrôle d'âge à la FAQ — le ton de la marque, pas celui d'une boutique
- Prix, textes et descriptions réunis dans un seul fichier, modifiables sans toucher au reste
Le résultat
Une vitrine et une boutique en une seule page, qui s'adresse aux deux marchés de la marque sans se dédoubler : mêmes produits, même parcours, la devise change et le reste suit.
Outils utilisés
- Figma
- Dreamweaver
La version mobile
DARNA
Le contexte
DARNA est une conciergerie de location courte durée au Maroc. Elle gère des appartements, des riads et des villas à Marrakech, Casablanca et Tanger pour le compte de leurs propriétaires : mise en ligne des annonces, accueil des voyageurs, ménage et entretien.
L'objectif
Décider un propriétaire à confier son bien. Il veut savoir trois choses : combien ça rapporte, combien ça coûte, et qui s'occupe de quoi. Le site doit répondre aux trois sans l'obliger à lire toute la page.
Mon rôle
Direction artistique, illustrations, maquettes et intégration. Le site est en construction : les textes et les visuels en place sont provisoires, générés en attendant le brief et les contenus du client.
Le travail effectué
- Direction artistique : brun profond, crème et cuivre, titres en serif éditorial, texte courant en sans
- Illustrations dessinées pour la marque plutôt que des photos de banque d'images : mur de cartes en bannière, vignettes des biens
- Bannière : le nom en grand, et la ville qui change au fil de celles où la conciergerie intervient
- La méthode expliquée en quatre temps — estimation, préparation, mise en ligne, exploitation
- Simulateur de revenus : ville, type de bien et nombre de chambres donnent un revenu net estimé
- Page Tarifs sans forfait caché : une commission sur les nuits réellement louées, et rien d'autre
- Catalogue des biens : note, ville et étiquettes — piscine, terrasse, vue mer, nombre de lits
- Formulaire d'estimation suivi d'un bloc « Ce qui se passe ensuite », avec les délais annoncés
Choix techniques
- Trois langues — français, anglais et arabe — avec le sélecteur dans la barre de navigation
- Version arabe en écriture de droite à gauche : navigation, fil d'Ariane, grilles et alignements inversés, pas seulement le texte traduit
- Montants en dirhams, et mention que l'estimation reste indicative tant qu'il n'y a pas eu de visite
- Simulateur calculé dans le navigateur : le chiffre s'affiche tout de suite, sans envoyer de formulaire
- Sur téléphone, une barre d'actions fixe en bas de l'écran : appeler, WhatsApp, estimation — WhatsApp d'abord, c'est par là que passent les échanges au Maroc
- Illustrations dessinées sous Illustrator, déclinées en vignettes pour chaque type de bien
Où en est le projet
La structure, la mise en page et les trois langues sont en place. Les textes et les images servent de marque-page en attendant les informations du client : photos des biens, chiffres réels et grille tarifaire viendront les remplacer sans toucher à la mise en page.
Outils utilisés
- Figma
Illustrator- Dreamweaver
La version mobile
Le reste
du travail.
Les outils que j'utilise au quotidien, la façon dont je mène un projet du cadrage à la mise en ligne, et ce que je contrôle avant de publier.