09 / 09 · Catalogue websiteСайт-каталог
Heller Craft ChocolateHeller Craft Chocolate
A warm catalogue website that presents craft chocolate through its packaging and leads visitors from the brand story to every product.Теплий сайт-каталог, який показує крафтовий шоколад через його упаковку й веде від історії бренду до кожного продукту.
01 — Context01 — Контекст
Heller Craft Chocolate is a bean-to-bar manufacture in Oberursel, Germany — the next chapter of Heller Pralinen, a local confectioner with more than a hundred years of history. They make organic single-origin chocolate, nut spreads and dragées.Heller Craft Chocolate — bean-to-bar мануфактура в Оберурзелі (Німеччина), нова глава Heller Pralinen — місцевого кондитера з понад столітньою історією. Вони виготовляють органічний шоколад single origin, горіхові пасти й драже.
The owner wanted a catalogue rather than an online shop: one place to show the whole range, explain each product and tell the story of the manufacture, with questions coming in by email.Замовниця хотіла саме каталог, а не інтернет-магазин: одне місце, де видно весь асортимент, пояснено кожен продукт і розказано історію мануфактури, а питання приходять на пошту.
02 — Task02 — Завдання
Design and build a German-language catalogue website: present the dragées and nut spreads clearly, give every product its own page with a description and ingredients, and tell the brand story — all in the look of the packaging.Спроєктувати й зібрати німецькомовний сайт-каталог: зрозуміло показати драже й горіхові пасти, дати кожному продукту власну сторінку з описом і складом та розповісти історію бренду — усе в стилістиці упаковки.
03 — My role03 — Моя роль
I designed the home, catalogue, product and about pages and built the site on Squarespace, so the owner can update products and texts herself.Я створила дизайн головної, каталогу, сторінки продукту й сторінки «Про нас» і зібрала сайт на Squarespace, щоб замовниця могла сама оновлювати продукти й тексти.
04 — Design decisions04 — Дизайнерські рішення
StructureСтруктура
Home: the full range in the hero, then two product lines (Dragées and Spreads), the brand values and a link to the story. The catalogue groups products by line; every product page has breadcrumbs, photos, description, ingredients and “You might also like”.Головна: увесь асортимент у першому екрані, далі дві лінійки (драже й пасти), цінності бренду й перехід до історії. Каталог групує продукти за лінійками; кожна сторінка продукту має «хлібні крихти», фото, опис, склад і блок «Вам також може сподобатися».
TypographyТипографіка
A geometric sans for headings and navigation echoes the logo; a typewriter monospace for body text and product notes feels like a printed label.Геометричний гротеск для заголовків і навігації перегукується з логотипом; друкарський моноширинний шрифт для текстів і описів продуктів нагадує надруковану етикетку.
ColourКольори
Caramel, cream and cocoa brown come straight from the packaging and the product photography, so the site and the jars read as one brand.Карамельний, кремовий і какао-коричневий узяті з упаковки й предметної зйомки, тож сайт і банки читаються як один бренд.
Presenting informationПодача інформації
Products sit on a calm cream background with plenty of air, so the packaging patterns do the talking; every card shows the product line and the flavour in two short lines.Продукти стоять на спокійному кремовому тлі з великою кількістю повітря, тож говорять візерунки упаковки; кожна картка показує лінійку й смак у двох коротких рядках.
05 — Result in detail05 — Результат у деталях
Full pagesСторінки повністю
Desktop · 1440 px · scroll insideДесктоп · 1440 px · гортайте всередині
Catalogue and product pageКаталог і сторінка продукту
Mobile versionМобільна версія
390 px390 px
Key scenariosКлючові сценарії
- Browse the range — from the home page to the catalogue in one click.Переглянути асортимент — з головної до каталогу одним кліком.
- Read about a product — description and ingredients on its own page.Дізнатися про продукт — опис і склад на окремій сторінці.
- Find something similar — “You might also like” on every product page.Знайти схоже — блок «Вам також може сподобатися» на кожній сторінці продукту.
- Learn the story — “About us” connects the manufacture to the Heller praline tradition.Дізнатися історію — «Про нас» пов’язує мануфактуру з традицією Heller Pralinen.
- Get in touch — email and address in every footer.Зв’язатися — пошта й адреса в кожному футері.
06 — Summary06 — Підсумок
The manufacture got a catalogue website that looks like its packaging, shows every product with its ingredients and can be updated by the owner without a developer.Мануфактура отримала сайт-каталог, який виглядає як її упаковка, показує кожен продукт зі складом і який замовниця може оновлювати без розробника.
- Catalogue website in German, built on SquarespaceСайт-каталог німецькою, зібраний на Squarespace
- Home, catalogue, product and about page templatesШаблони головної, каталогу, продукту й сторінки «Про нас»
- Product pages with description and ingredientsСторінки продуктів з описом і складом
- Responsive layouts the owner edits herselfАдаптивні сторінки, які замовниця редагує сама
Common WellСпільна криниця
NGO website — structure, UI design and development of a bilingual siteСайт громадської організації — структура, UI-дизайн і розробка двомовного сайту