Case study
Stogiannis Winery
Website design and development for a family winery in Kavala.
Overview
Stogiannis Winery is a family winery in Kavala, with vineyards in Myrtofyto and an identity shaped as much by the place as by the wine itself. The website was designed and built from scratch, in Greek and English, with a structure that presents the winery and the wine collection on their own terms. Editorial design, motion, front-end performance and SEO architecture were developed as one system rather than as separate phases.
- Services
- Art Direction & Brand TranslationUX Architecture & Content HierarchyCustom Next.js Website DevelopmentWine Collection Structure & PresentationMotion Design & Interactive ExperiencesPerformance-Focused Front-End ArchitectureBilingual SEO ArchitectureStructured Data & Semantic Markup
- Approach
- Editorial hierarchy and photography-led layoutsA restrained visual system built on typography and spaceMotion integrated into the storytellingContent architecture for the winery and the winesSEO and performance defined at architecture level
- Highlights
- Editorial presentation built around the winery's photographyA dedicated page for every wine in the collectionBilingual Greek and English architectureMotion and interactive moments inside a fast experience
Challenge
From place and craft to digital structure
The brief was not modernization. It was translation.
The winery already had a clear identity built over years: the land around Kavala, the family history, the production process, the vineyard and a growing collection of labels. None of that was missing. What was missing was a structure that held it together.
The site had to connect place, history, the winery, the production process, the vineyard and the individual wines in an order a visitor could follow without being walked through it.
Solution
An editorial system for photography and text
The layout system is editorial rather than template-driven. Sections change scale deliberately: full-width photography, narrow text columns, large type used as a break in the rhythm. The page reads in measured intervals instead of a uniform stack of blocks.
Photography leads. The vineyard, the landscape and the bottles carry most of the visual weight, and the layouts are built around them, with generous whitespace holding each image at a distance where it can be read.
Typography does the structural work. A clear hierarchy separates narrative from product information, so a visitor always knows whether they are reading about the winery or about a specific wine.
The palette stays close to earth, stone and wood, with no strong contrasts competing with the photography. Under the surface, the site was built on Next.js, with speed and stability treated as design constraints.
Experience
Motion and interaction as part of the narrative
Motion is used to control pace. Transitions between sections, reveal timing on the photography and interactive galleries set the reading rhythm and hold attention on the landscape before the text arrives.
A few moments go further, with selected WebGL experiences placed where the relationship between image, place and content benefits from something more physical than a static frame.
Everywhere else the interface stays still. Motion appears where it adds narrative value and steps back where the content needs priority.
Structure
From the winery to the wine collection
The information architecture follows the same order as the product: place, winery, production, wines.
The collection sits at the end of that path. Every wine has its own page, built on a consistent content structure, so labels can be compared and the collection can grow without the template being redesigned each time.
A visitor moves from the brand story to a specific label without backtracking, and the same structure gives search engines a clear map of how the winery, its production and its individual wines relate to each other.
Result
A digital system for the winery
The finished site works as a system. Photography, typography and motion share one visual language, the content structure holds the winery, the vineyard and the collection, and the front-end architecture keeps all of it fast across the full viewport range, from phones to wide desktop screens.
The Greek and English versions run in parallel throughout the site, each with its own metadata, URLs and content, so neither functions as a simple translation of the other.
The existing structure allows new wines and content to be integrated without requiring the site to be rebuilt around them.
Performance
The site carries high-resolution photography, motion and interactive elements, and the performance budget was set before any of it was built. Image delivery, font loading, layout stability and script cost were handled at the architecture level, so the experience stays fast without giving up the visual weight the brand depends on.
Metrics based on the homepage as tested via Google PageSpeed Insights (mobile).
- Performance
- 91
- Accessibility
- 100
- Best Practices
- 100
- SEO
- 100
Core Web Vitals
- First Contentful Paint
- 1.5 s
- Largest Contentful Paint
- 3.1 s
- Total Blocking Time
- 30 ms
- Cumulative Layout Shift
- 0
- Speed Index
- 4.4 s
SEO as Foundation
SEO was part of the architecture from the first structural decision, shaped around how people actually search for a winery, its wines and the region it comes from.
The implementation covered:
- Semantic HTML structure and heading hierarchy
- Optimized URL structure across both languages
- Bilingual architecture with hreflang and locale-specific content
- Page-specific metadata and Open Graph
- Internal linking between the winery, the wines and the content
- Content structured around real search intent
- Structured data and semantic markup
- Core Web Vitals as part of the front-end architecture
- Local SEO and local relevance for searches around Kavala, where supported by the content
Color Palette
Burgundy from the wine, deep green from the vineyard, warm stone and cream from the landscape around the winery.
The colors stay low in contrast so the photography carries the page. They set the temperature of the editorial layouts and hold them together, rather than decorating them.
Technical Foundation
The site is custom-built with Next.js, on a responsive component architecture shared by both language versions.
Individual wine pages, structured data and the interactive sections are part of that architecture rather than features added on top of it. The same components resolve from small phone screens to wide desktop, which keeps the editorial compositions intact beyond the desktop view.
The architecture is designed so that new wines, sections and content can be integrated later without restructuring the underlying system.
An example of how we approach website development in Kavala, with clean structure and attention to detail.
We don't chase projects.
We build relationships.