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.
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.
v1 · plateau tournantturntable
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.
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.
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
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 venteSales pageJournal de conceptionDesign logLe jeu, dans le navigateurThe game, in the browser
04
Shinkui
Infusions japonaises, cueillies et composées près de Nice.Japanese-style infusions, foraged and blended near Nice.
É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.
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
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.
Illustrations et graphisme : Ceni Gülnihal. Site : Arnaud Cramer.Illustration and graphic design: Ceni Gülnihal. Site: Arnaud Cramer.
06
Myelin
Une mémoire qui comprend ce qu'on lui confie, puis va chercher la suite.A memory that understands what you give it, then goes looking for what comes next.
Myelin ne se contente pas de garder. Une page web, un PDF, une image, une vidéo ou une note vocale : chaque capture est lue et comprise. Le texte est extrait, la parole transcrite, les images regardées par un modèle de vision, et la fiche reçoit un titre, des concepts et un résumé avant de rejoindre un index sémantique local. Plus tard, elle remonte d'elle-même à côté des fiches qui lui ressemblent. Chaque jour, Myelin relit toute la bibliothèque, tisse des fils entre des captures éloignées et part chercher sur le web ce qui pourrait vous intéresser ensuite. Son classement apprend de l'usage : ce qu'on ouvre, ce qu'on garde, ce qu'on laisse passer.Myelin does more than keep things. A web page, a PDF, an image, a video or a voice note: every capture is read and understood. Text is extracted, speech transcribed, images looked at by a vision model, and the card gets a title, concepts and a summary before joining a local semantic index. Later it resurfaces on its own next to the cards it resembles. Every day Myelin rereads the whole library, draws threads between distant captures and goes out on the web for what might interest you next. Its ranking learns from use: what you open, what you keep, what you let pass.
La vraie page « How it works » de l'application, figée à un instant. Cliquez sur un bloc : ses liens s'allument et un panneau explique ce qu'il fait, de quoi il est fait et ce qu'il alimente. Onglet « Today » pour la journée du système. Les chiffres sont réels, les titres de captures sont retirés.The app's real “How it works” page, frozen at one moment. Click any block: its links light up and a side pane explains what it does, what it is made of and what it feeds. The “Today” tab shows the system's day. The numbers are real; capture titles are left out.
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.« Ailleurs » : ce que Myelin a trouvé sur le web, chaque recommandation justifiée par la capture qui l'a fait naître.“Elsewhere”: what Myelin found on the web, each recommendation explained by the capture that prompted it.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.
