Categories
← back homeHere you'll find frontend templates for different categories, or verticals, or business niches. Each has a unique style and relationship to their particular category, as well as a unique typographic perspective, and technological exploration.
If you'd like this system adapted to your business, don't hesitate to reach out.
email me →
santiago.benjamin@gmail.com
-
Crystal Discs Cylindrical Nutrient Delivery System
- description → A concept site for a fictional packaged-food product aimed at adventurous consumers. Because the product’s form and language are intentionally unfamiliar, the page balances bold science-fiction presentation with clear explanations of what the product is and how it works.
- design && type →The product needed to feel futuristic and desirable without becoming illegible or purely novelty-driven. Large photography, Jaro display type, Manrope text, a unified border system, and animated marquees create a bold product identity while maintaining a clear hierarchy for explanatory content.
- technology →A scroll-triggered exploded view separates the product into layers as visitors move through the page, turning its unfamiliar construction into a readable visual explanation. The interaction supports product storytelling without requiring visitors to decode a dense technical diagram.
- goal → Help visitors understand the product’s unfamiliar format, see what makes it distinctive, and become curious enough to try it
- status →Live concept prototype
- proof →
- Live responsive prototype
- Custom scroll-triggered exploded-view sequence
- Animated marquee system
- Responsive typography and image layouts
- audience →Adventurous food consumers drawn to novel products and science-fiction-inspired branding
- project type → Concept prototype, frontend development and interaction design
-
Main Street Barbershop
- description → A concept site for an independent neighborhood barbershop, designed for prospective customers deciding where to book. It communicates the shop’s personality while keeping practical information about its services and atmosphere easy to understand.
- design && type →Prospective customers need the shop to feel distinctive and established without seeming formal or unwelcoming. A faded red, blue, and off-white palette references the familiar barber pole. Oil Can and Ultra give headings a recognizable shop voice, while Work Sans keeps service information clear and easy to scan.
- technology →To carry the shop’s identity into the interface rather than using it only as decoration, I built a reusable JavaScript ribbon component for section headings and adapted it into the desktop scrollspy navigation. This helps visitors remain oriented while reinforcing a consistent visual system throughout the page.
- goal → Help visitors quickly understand the shop's personality and services, build trust, and move toward booking or visiting.
- status →Live concept prototype
- proof →
- Live responsive prototype
- Custom reusable JavaScript text-ribbon component
- Desktop scrollspy navigation
- Responsive desktop and mobile layouts
- audience →Prospective customers comparing independent neighborhood barbershops
- project type → Concept prototype, frontend development and interaction design
-
Grabbit! Arcade
- description → A concept site for a claw-machine and gacha arcade, designed to give prospective visitors a playful preview of the experience. Interactive physics and game-like typography communicate the arcade’s energy while the site provides practical information about its locations and games.
- design && type →The visual system needed to appeal to families and arcade enthusiasts without feeling like a generic children’s venue. Bitcount—a variable, modular typeface with a circular display weight—echoes the balls, capsules, and mechanical forms found throughout the arcade. Its variable design also supports animated headings.
- technology →A lightweight client-side physics system drives the animated headings, ball-pit sections, and claw-machine interaction. Offscreen sections are hidden and individual interactive areas are retracted when they leave the viewport so that every simulation does not run continuously.
- goal → Help prospective visitors understand the locations and games while letting them experience the arcade’s playful energy before visiting
- status →Live concept prototype
- proof →
- Live responsive prototype
- Lightweight client-side physics system
- Interactive claw-machine and ball-pit sections
- Animated variable typography using Bitcount
- Viewport-based lifecycle controls for offscreen sections
- audience →Families with young children, claw-machine players, and gacha enthusiasts
- project type → Concept prototype, frontend development, interaction design, and dynamic typography