All projects
PrototypeArchived

Pencil mockups

A first design pass in a mockup editor, dropped in favour of HTML prototypes that can actually be tested.

Updated
Role
Design
Status
Archived

Roadmap

Design work started in a mockup editor. It left quickly.

A mockup cannot be navigated by keyboard, does not reveal insufficient contrast, and says nothing about what happens when a string turns out twice as long as expected. HTML prototypes replaced mockups because they answer those questions while there is still time.

Archived rather than deleted: the decision is more useful than the files.

Technologies

  • Pencil

Milestones

2 / 2
  1. Done —Key screens mocked up
  2. Done —Dropped: HTML prototypes can be tested, mockups cannot

Other projects

PrototypeRoadmap

Assisted writing pipeline

Write an article in French, derive the English version and the metadata from it, without a model publishing anything on its own.

  • MDX
  • TypeScript
  • Claude
PrototypeIn testing

Orbit

An orbiting expertise graph, animated and keyboard-navigable, that stays legible on a phone.

  • SVG
  • CSS
  • TypeScript
ProductIn testing

Yorro.dev

The studio's own site: showcase, journal and tutorials, built as a demonstration of the architecture it sells.

  • Astro
  • TypeScript
  • Tailwind CSS
  • Cloudflare Pages
  • +1

Act

Dark themePin the site's appearancesetTheme({theme:"dark"})
Light themePin the site's appearancesetTheme({theme:"light"})
System themeFollow the system preference againsetTheme({theme:"system"})
Switch the site to FrenchFrançaissetLocale({locale:"fr"})
Labs — ProductFilter Labs by typefilterLabs({type:"Produit"})
Labs — PrototypeFilter Labs by typefilterLabs({type:"Prototype"})
Labs — ResearchFilter Labs by typefilterLabs({type:"Recherche"})
Labs — Reset filtersClear every Labs filterfilterLabs({reset:true})
Journal — EngineeringFilter the Journal by categoryfilterJournal({category:"Ingénierie"})
Journal — SecurityFilter the Journal by categoryfilterJournal({category:"Sécurité"})
Journal — Agent-NativeFilter the Journal by categoryfilterJournal({category:"Agent-Native"})
Journal — StudioFilter the Journal by categoryfilterJournal({category:"Studio"})
Journal — Reset filtersClear every Journal filterfilterJournal({reset:true})
Tutorials — BeginnerFilter tutorials by levelfilterTutorials({level:"Débutant"})
Tutorials — IntermediateFilter tutorials by levelfilterTutorials({level:"Intermédiaire"})
Tutorials — AdvancedFilter tutorials by levelfilterTutorials({level:"Avancé"})
Tutorials — Reset filtersClear every tutorials filterfilterTutorials({reset:true})

Services

DiscoveryFrame the product before the first line of code, so the budget builds instead of correcting.openService({service:"discovery"})
Product designAn interface that holds together, carried by a design system your developers can keep alive without us.openService({service:"design"})
Web developmentA fast web application that holds up over time, with the tests and delivery chain to match.openService({service:"web"})
Mobile developmentAn iOS and Android app from a single codebase, published on both stores.openService({service:"mobile"})
Infrastructure & securityInfrastructure described as code, and Zero Trust access that does not rest on a text message.openService({service:"infrastructure"})
Maintenance & evolutionA product kept current, watched and fixed, with someone who answers when it breaks.openService({service:"maintenance"})
Agent-Native Architecture AdvisoryMake an existing product agent-operable without rewriting it — and without opening more than it should.openService({service:"agent-native"})

Go to

YorroProduct engineering studio in Abidjan and Paris. We design, we build, we ship.navigate({page:"home"})
ServicesBuild a product end to end, or advise a team on its agent-native architecture.navigate({page:"services"})
LabsWhat the studio has built: products, prototypes and research, with where each one actually stands.navigate({page:"labs"})
TutorialsStep-by-step guides drawn from real projects, grouped into tracks by topic.navigate({page:"tutorials"})
JournalThe studio's notes and positions.navigate({page:"journal"})
ContactDescribe your project; you get a framing back, not a boilerplate quote.navigate({page:"contact"})
AboutWho runs the studio, how it works, and what it turns down.navigate({page:"about"})
↑↓ move↵ runesc closeOne Actions layer