Candy Flowers - Strona internetowa dla pracowni bukietów ze słodyczy

Wyzwanie

Candy Flowers tworzy ręcznie robione bukiety z ulubionych słodyczy i trwałych róż. To produkt, który łatwo pomylić z kwiaciarnią albo zwykłym koszem słodyczy, więc strona musiała od pierwszego ekranu jasno powiedzieć, czym jest, i od razu pokazać efekt. Do tego klient szuka prezentu zwykle na konkretną okazję, często na ostatnią chwilę i z telefonu. Potrzebna była strona szybka, czytelna na małym ekranie i prowadząca prosto do kontaktu.

Projekt graficzny: słodko, ale z klasą

Paleta

Kolory wzięliśmy prosto z bukietów: od bardzo jasnego, pudrowego różu na tłach sekcji, przez delikatne róże, po głęboką malinę jako kolor przycisków i wyróżnień. Akcentem jest stonowane złoto, nawiązujące do złotych papierków czekoladek i wstążek. Główny róż sprawdziliśmy pod kątem kontrastu: na białym tle osiąga 5,6:1, więc spełnia wymagania dostępności (WCAG AA). Tekst nie jest czarny, tylko ciepły, bardzo ciemny brąz z nutą śliwki, który lepiej współgra z różami.

Typografia

Nagłówki składamy krojem Playfair Display, eleganckim szeryfem z wyraźnym kontrastem kresek, a najważniejsze słowa wyróżniamy kursywą, np. „Kwiaty, które nie więdną”. Treść to Inter, nowoczesny i bardzo czytelny bezszeryfowiec. Oba kroje są hostowane razem ze stroną, więc nie ma żadnych zapytań do zewnętrznych serwerów, a najważniejsze pliki fontów wczytują się z wyprzedzeniem.

Kształty i głębia

Na stronie nie ma ostrych kątów: zaokrąglenia mają trzy stopnie (małe, średnie i duże), a przyciski są w pełni zaokrąglone jak cukierki. Cienie nie są szare. Mają lekko różowy odcień, przez co karty i zdjęcia wyglądają, jakby unosiły się nad różowym papierem, a nie nad brudną kartką.

Hero

Główne zdjęcie bukietu stoi w łuku z zaokrągloną górą, jak w witrynie kwiaciarni. Obok drugie zdjęcie, w tle miękka, rozmyta plama różu, a na zdjęciu plakietka „Nie więdnie, a do tego smakuje”. Nagłówek gra słowami: „Kwiaty, które nie więdną. Słodycze, które cieszą.” Pod przyciskami trzy krótkie zapewnienia: bukiet robiony na zamówienie, wybór kolorów i słodyczy, fabrycznie pakowane słodycze.

Rytm sekcji

Sekcje na przemian mają białe i pudrowe tło, więc strona ma wyraźny rytm nawet przy szybkim przewijaniu. Treść pojawia się łagodnie przy przewijaniu, a dla osób, które w ustawieniach systemu wyłączyły animacje, wszystko jest widoczne od razu. Kontakt zamyka stronę nasyconym, malinowym blokiem z delikatnymi koncentrycznymi kręgami w tle, jedynym tak mocnym kolorem na stronie.

Sekcje, które prowadzą od ciekawości do zamówienia

• Dlaczego słodki bukiet? Cztery korzyści w kartach z ikonami: nie więdnie, cieszy podwójnie, jest dopasowany do osoby i ręcznie robiony.
• Galeria realizacji z kilkunastoma bukietami i filtrami: dla niej, dla niego, oprawy na butelkę i kolorowe. Kliknięcie otwiera podgląd, w którym zdjęcie stoi obok opisu bukietu, a karty po zmianie filtra pojawiają się z krótką animacją.
• Okazje: urodziny, imieniny, ślub i wesele, rocznica, Dzień Matki i Babci, podziękowanie, jubileusz i „bez okazji”. Każdy znajdzie swój powód.
• Trzy kroki do prezentu: napisz lub zadzwoń, dobierzemy szczegóły, odbierz gotowy prezent. Kroki mają numery w kołach z różową obwódką.
• Opinie klientów i 8 najczęstszych pytań w rozwijanej liście: o trwałość, cenę, termin zamówienia, odbiór i alergie.
• Kontakt z telefonem, e-mailem i profilami w mediach społecznościowych.

Szczegóły, które robią różnicę

• Nagłówek przyklejony do góry ekranu z rozmyciem tła pod spodem. Przy przewijaniu dostaje delikatny cień, a pozycje menu mają podkreślenie, które rozciąga się po najechaniu kursorem.
• Menu mobilne obsługiwane także klawiaturą.
• Zdjęcia w lekkim formacie WebP, ładowane dopiero wtedy, gdy są potrzebne. Zdjęcie w hero wczytuje się z najwyższym priorytetem.
• Analityka szanująca prywatność, która mierzy kliknięcia w przyciski zamówienia i to, które bukiety w galerii użytkownicy faktycznie oglądają. Właścicielka wie dzięki temu, co się podoba, bez banerów z ciasteczkami śledzącymi.

SEO: słodki bukiet widoczny w Mielcu i okolicach

• Tytuł i opis strony pod frazy lokalne, np. „bukiety ze słodyczy Mielec” i „alternatywa dla kwiatów”.
• Dane strukturalne kwiaciarni z adresem, współrzędnymi i listą miejscowości z okolicy, do których trafiają bukiety.
• Znaczniki lokalizacji i dopracowany podgląd do udostępniania w mediach społecznościowych (obraz, tytuł i opis).
• Treści, które odpowiadają na pytania klientów: sekcja okazji i FAQ zawierają naturalnie frazy, które ludzie wpisują w Google, szukając prezentu.
• Lekka strona bez zbędnych skryptów, co pomaga w szybkości wczytywania na telefonie.

Efekt

Candy Flowers ma stronę, która w kilka sekund tłumaczy, czym jest bukiet ze słodyczy, pokazuje kilkanaście realizacji i prowadzi prosto do zamówienia. Wygląda przy tym tak jak same bukiety: słodko, ale z klasą.