Arnaud Cramer

Webdesign · Direction artistique · PrototypesWeb design · Art direction · Prototypes

Des sites qui ont
une matière. Websites with
a texture.

Je dessine et je code des pages sur mesure : pages produit, sites de marque, interfaces. Du rendu 3D jusqu'à la mise en ligne. I design and hand-code bespoke pages: product pages, brand sites, interfaces. From the 3D render to the live deploy.

Six projetsSix projects ↓

IndexIndex

  1. 01GETAConcept chaussure, page produitShoe concept, product page
  2. 02Shell:CorpusSac imprimé en 3D, page produit3D-printed bag, product page
  3. 03The WallLogiciel, page de vente, jeu webSoftware, sales page, web game
  4. 04ShinkuiSite de marque bilingue, NiceBilingual brand site, Nice
  5. 05Ceni GülnihalPortfolio d'illustratriceIllustrator portfolio
  6. 06MyelinApplication web, mémoire localeWeb app, local-first memory

01

GETA

Une sandale imprimée en TPU, mise en scène comme un spécimen.A TPU-printed sandal, staged like a specimen.

RôleRole
Concept, 3D, rendu, pageConcept, 3D, render, page
OutilsTools
Blender, HTML/CSS/JS
LienLink
versenlabs.com ↗

Page produit en « monde sombre assumé » : l'objet est éclairé dans le noir, la typographie reste en retrait, et le film tourne en boucle comme une vitrine. Révélations au défilement, visionneuse avec zoom et déplacement, plateau tournant vidéo. A product page in a committed dark world: the object is lit in the black, type steps back, and the film loops like a shop window. Scroll reveals, a zoom-and-pan lightbox, a video turntable.

GETA, vue de trois quarts
GETA, détail de semelle
v1 · plateau tournantturntable
Page GETA en ligne
La page en ligneThe live page

02

Shell:Corpus

Une coque en TPU givré, un sac messager d'une seule pièce.A frosted TPU shell, a one-piece messenger bag.

RôleRole
Objet, rendus, pageObject, renders, page
OutilsTools
Blender, IA image, HTML/CSS
LienLink
versenlabs.com ↗

Du prototype imprimé à la page : études de matière, de transparence et de sangle, puis une mise en scène en forêt humide pour donner au plastique une présence presque organique. From printed prototype to page: studies of material, translucency and strap, then a wet-forest staging that gives the plastic an almost organic presence.

Shell:Corpus suspendu
Étude de transparence
Étude TPU givré
Étude de matières
Shell:Corpus, gros plan sur les sangles
Page Shell:Corpus en ligne
La page en ligneThe live page

03

The Wall

Un bloqueur de sites qu'on traverse en tenant son regard. Trois pages, une seule voix.A site blocker you get through by holding your gaze. Three pages, one voice.

RôleRole
Produit, page de vente, jeuProduct, sales page, game
OutilsTools
HTML/CSS/JS, webcam, Netlify
LiensLinks
wall ↗ · void ↗

Une identité « dossier de laboratoire » : papier ligné, tampons, mentions caviardées. Elle porte la page de vente, le journal de conception et un jeu web qui suit le regard par la webcam. Chaque page a son thème clair et sombre. A lab-dossier identity: ruled paper, stamps, redactions. It carries the sales page, the design log and a web game that tracks your gaze through the webcam. Every page has a light and a dark theme.

Page de vente The Wall
Page de venteSales page
Journal VL-001
Journal de conceptionDesign log
Jeu The Void
Le jeu, dans le navigateurThe game, in the browser
The Wall sur mobile
The Void sur mobile

04

Shinkui

Infusions japonaises, cueillies et composées près de Nice.Japanese-style infusions, foraged and blended near Nice.

RôleRole
Marque, textes, siteBrand, copy, site
OutilsTools
HTML/CSS/JS, Cloudflare
LienLink
shinkui.com ↗

Écran partagé, photo d'un côté, silence de l'autre. Un site FR/EN qui prend son temps, à l'image du produit : grandes images de la côte, sceau dessiné à la main, typographie sobre. A split screen, photo on one side, silence on the other. A FR/EN site that takes its time, like the product: large coastal images, a hand-drawn seal, quiet type.

Accueil Shinkui
Shinkui sur mobile
Feuilles séchées
Yomogi

05

Ceni Gülnihal

Le site d'une illustratrice et graphiste : le travail d'abord, le site ensuite.An illustrator and graphic designer's site: the work first, the site second.

RôleRole
Conception et développement du siteSite design and build
VisuelsArtwork
© Ceni Gülnihal
LienLink
cenigln.net ↗

Une grille qui laisse chaque pièce à sa taille réelle, sans recadrage, sur fond blanc. Deux boutons, rien d'autre : quand le travail est aussi fort, l'interface doit se faire oublier. A grid that keeps every piece at its true proportions, uncropped, on white. Two buttons and nothing else: when the work is this strong, the interface should disappear.

Accueil cenigln.net
Illustrations et graphisme : Ceni Gülnihal. Site : Arnaud Cramer.Illustration and graphic design: Ceni Gülnihal. Site: Arnaud Cramer.

06

Myelin

Une mémoire personnelle locale : on capture, elle range, relie et retrouve.A local-first personal memory: you capture, it files, links and retrieves.

RôleRole
Conception, interface, développementDesign, interface, build
OutilsTools
Python, Flask, SQLite, LLM, JS
LienLink
journallog ↗

Extension navigateur, appli téléphone et interface web. Chaque capture devient une fiche : un modèle écrit titre, tags et résumé, puis la fiche est indexée pour la recherche. Le travail d'interface a porté sur une question : comment montrer 1 800 fiches sans noyer la personne ? Browser extension, phone app and web interface. Each capture becomes a card: a model writes title, tags and summary, then the card is indexed for search. The interface work came down to one question: how do you show 1,800 cards without drowning the person?

Myelin, page Fonctionnement
Une carte vivante du système : six étapes, de l'entrée à la sortie. Chaque chiffre est lu dans les données en direct.A live map of the system: six stages, from way in to way out. Every number is read from the running data.
Myelin, carte sémantique
1 671 fiches projetées par sens, regroupées en régions nommées automatiquement.1,671 cards placed by meaning, grouped into automatically named regions.
Myelin, fil Ailleurs
« Ailleurs » : des recommandations venues du web, chacune justifiée par une capture.“Elsewhere”: recommendations from the web, each one explained by a capture.
Myelin, concepts
Les concepts communs servent de ponts entre des domaines éloignés.Shared concepts act as bridges between distant domains.

À proposAbout

Je m'appelle Arnaud Cramer. Je viens de la donnée et des opérations, et je fabrique des sites comme des objets : le fond, la matière, puis le détail. I'm Arnaud Cramer. I come from data and operations, and I build websites like objects: substance, material, then detail.

DesignDesign
Maquettes, systèmes typographiques, thèmes clair/sombre, responsiveMockups, type systems, light/dark themes, responsive
Code
HTML, CSS, JavaScript, Python, Flask, SQLite
ImageImage
Blender, rendu produit, vidéo, génération d'images par IABlender, product rendering, video, AI image generation
Mise en ligneShipping
Cloudflare Pages, Netlify, noms de domainedomains
LanguesLanguages
Français, anglaisFrench, English