La Piccola Gelateria
La Piccola Gelateria is a self-initiated concept for an imaginary artisan gelateria on the Amalfi Coast. I designed and built it to explore a more expressive hospitality website, combining cream paper, navy typography and illustrated ceramic details with a menu that is easy to browse.
View the concept site (opens in a new tab)- My role
- Design, Development, SEO
- Focus
- Concept build, Angular, Interactive menu, Hospitality
- Built with
- Angular with standalone components, signals and SCSS, prerendered to static HTML and hosted on GitHub Pages.
The thinking behind the search work
The concept separates the questions a visitor might have: which flavours to try, what goes into them and how to visit. The search work gives those topics their own pages, with readable content in the initial HTML.
Give each topic a home
The flavour menu, ingredients, story and visit information have separate pages. The journal adds space for longer articles without crowding the main navigation.
Make an interactive site readable
Angular pages are prerendered to HTML, with individual titles, descriptions and canonical addresses. The menu adds filter controls while keeping the flavours accessible as page content.
Support the visual design
The brand images are served as WebP files, with descriptive alt text and self-hosted fonts. Social sharing tags give each page a title, description and preview image when its link is shared.
What I built
- A complete visual direction inspired by the Amalfi Coast: lemon illustrations, blue and yellow ceramic borders, expressive serif type and a sunlit terrace hero.
- An interactive gelato menu with flavour categories, dietary information and an "on the counter today" filter. The selected filters are reflected in the URL, so a particular view can be shared.
- Dedicated pages for the story, ingredients and visiting, plus a journal with individual article pages.
- A responsive layout that rearranges the image-led hero and navigation for smaller screens.
- A click-to-load map, so the external map only loads when a visitor asks to see it.
How SEO was handled
- Prerendered HTML for the site pages, so the content is available without waiting for the Angular app to run.
- Individual page titles, descriptions and canonical URLs, with Open Graph and Twitter sharing tags.
- Breadcrumb and article structured data on the relevant pages, alongside a local business schema example for the fictional gelateria.
- Descriptive image alt text, locally served WebP brand images and self-hosted fonts.
This is a concept project for a fictional gelateria. Business details are placeholders. The brand artwork and hero imagery were created with AI image generation; additional photography is credited on the site. There is no online ordering.