Overview

Laertis Dedes provides consulting services for restaurants and hotels developing a Greek or Mediterranean cuisine offering.

We created his website in Greek and English, combining a distinctive visual character with clearly organised information. The aim was to present his experience and help prospective clients assess whether a collaboration would suit their project before getting in touch.

Services: Website designInformation architectureNext.js and TypeScript developmentInteraction design and developmentSelective image preloading and reveal coordinationProject enquiry form and automated emailsGreek and English versionsTechnical SEO
Approach: Content shaped around prospective clients’ needsExpressive typography and restrained compositionsA consistent approach to motionNavigation coordinated with image loading
Highlights: Consistent presentation across desktop, tablet and mobileClear information for assessing a potential collaborationCustom navigation experienceStructured enquiry collection

Objective

Designing for the right audience

We organised the presentation around the criteria restaurant and hotel owners and managers use to assess a consultant: specialisation, service scope, relevant experience and cost.

We gave these details a clear place in the content, including starting fees and the factors affecting the final quote. The aim was to support self-selection, helping prospective clients understand whether the offer matched their needs and budget.

Design

Typography and composition

Large headings give the website its character and establish a clear distinction from the body text. We adjusted their scale for each language to maintain a consistent hierarchy and visual balance between the Greek and English versions.

Asymmetric compositions give images more space while keeping text at a comfortable reading width. Generous spacing and fine lines organise the content without unnecessary decoration.

In the approach section, we combined this layout with cards that stack as visitors scroll. Each card presents one area of expertise, dividing the extensive content into distinct, readable sections.

The Approach section of the consulting page on laertisdedes.com: an aubergine panel reading "Inside the kitchen, not from a distance" beside the five areas of work, from culinary direction to pre-opening and launch support

Structure

Information architecture

We organised professional experience, services and collaboration options separately, helping visitors find the information they need to assess a potential engagement.

For Meraki Greek Taverna in Dubai, we developed a case study connecting the scope of the collaboration with the changes made and the outcome. Photographs accompany the relevant sections, supporting the presentation of the project.

We linked this example to Laertis’s corresponding services and provided clear routes to contact. Prospective clients can explore the consultant’s previous experience and then enquire about a collaboration of their own.

The Meraki case study page on laertisdedes.com, opening with a night-time photograph of the restaurant's dining room and the Burj Al Arab in the distance, under the title "Meraki Greek Taverna"

Interaction

Custom interactions

We developed a WebGL shader transition for the sequence of food photographs. Distortion is limited to the transition itself, leaving each image clear and still while it is displayed.

Page-title and selected text reveals, a brief blur effect on links and smooth scrolling create a consistent character across the interactions. On mobile, the menu opens across the full screen with an animation that reverses when it closes.

We coordinated entrance animations with content visibility. Effects are disabled when visitors have enabled reduced motion on their device.

The mobile navigation of laertisdedes.com: Consulting, Dubai Project, About and Contact in a serif typeface on an aubergine field, numbered 01 to 04, with a photograph of a dish and the contact email below

Engineering

Image loading and navigation

We developed a mechanism that selectively prepares the destination page’s main photograph when a visitor shows intent to follow a link. The image is loaded and decoded before the new page is revealed.

While it is being prepared, the current page or the open mobile menu remains visible. Preparation is limited to the image for that destination, avoiding bulk loading of the photography. A timeout and failure handling prevent an image problem from blocking navigation.

Enquiries

Project enquiry form

We designed the form to collect the information needed for an initial assessment: the business, its requirements and the project timeline.

The implementation includes input validation, delivery of the responses to Laertis and an automatic confirmation to the visitor in their own language.

Performance: 94
Accessibility: 100
Best Practices: 100
SEO: 100

Performance

Image delivery, font loading and visual stability were addressed during development. Images are served at appropriate sizes for each screen, fonts are hosted locally and space is reserved for visual elements before they load.

The implementation recorded the following scores and measurements in Google PageSpeed Insights.

Measured with Google PageSpeed Insights. Values may vary between tests.

Performance metrics

First Contentful Paint: 0.9 s
Largest Contentful Paint: 3.2 s
Total Blocking Time: 60 ms
Cumulative Layout Shift: 0
Speed Index: 1.7 s

SEO in two languages

We implemented technical SEO for both languages, with separate URLs and metadata and explicit references connecting equivalent pages.

The implementation includes:

Localised page URLs
Page titles and descriptions for each language
Canonical URLs and reciprocal hreflang references
Open Graph metadata
A sitemap covering both language versions
Structured data and semantic HTML
A clear heading hierarchy
Internal links between related content
Core Web Vitals as part of the technical implementation

Colour palette

Porcelain provides the website’s base, while Aubergine is used for text, lines and selected surfaces. The limited palette maintains visual consistency and allows the photography to introduce colour variation.

Porcelain: #E7E8E2
Aubergine: #32232D

Technical foundation

The website was developed with Next.js and TypeScript, using CSS Modules for styling and next-intl to manage languages and localised URLs. Motion is powered by GSAP, smooth scrolling by Lenis and image transitions by WebGL.

The structure supports additional content and projects within the existing design system.

Related services

Laertis is originally from Kavala and is based in the United Kingdom. Find out more about website design and development in Kavala by Workflows.

We don't chase projects.

We build relationships.

15' call