To BeautyWorld: przykładowa strona salonu kosmetycznego
Przykładowy projekt strony salonu kosmetycznego, zbudowany wokół jednej idei: rozkwitu. Depilacja, masaże i zabiegi na ciało, poradnik dla klientek i wszystkie dane salonu w jednym pliku.
Najważniejsze informacje
- Branża
- Salon kosmetyczny: depilacja, masaże, zabiegi na ciało
- Status
- Wersja demonstracyjna z przykładowymi danymi
- Strony w wersji demonstracyjnej
- 12
- Czcionki
- Bodoni Moda, Jost
- Kolory
-
- Ivory #F5EEE5
- Espresso #2A1E17
- Róż piwonii #9B4660
- Szampańskie złoto #B5976D
Idea
Jedna myśl, która prowadzi przez całą stronę
Piwonia otwiera się powoli, we własnym tempie, w ciepłym porannym świetle. Tak ma wyglądać wizyta w salonie: czas tylko dla Ciebie, bez pośpiechu. Rozkwit prowadzi przez całą stronę, od filmu na pierwszym ekranie po znak marki.
Założenia
- Bez sesji zdjęciowej: grafiki muszą być spójne, estetyczne i oznaczone jako poglądowe.
- Kontakt przez telefon i e-mail, bez formularza.
- Adres, godziny, cennik i inne dane mają być łatwe do zmiany bez znajomości kodu.
Decyzje
Najważniejsze decyzje projektowe
-
Film sterowany przewijaniem
Na komputerze pąk piwonii rozkwita w rytmie przewijania. Na telefonach i u osób, które wyłączyły animacje, w tym miejscu jest zwykłe zdjęcie, a film w ogóle się nie pobiera.
-
Cała strona z jednego pliku
Adres, godziny, cennik, zespół i opinie są w jednym pliku z danymi. Puste pole po prostu znika ze strony, a strony nie da się opublikować, dopóki brakuje ważnych informacji.
-
Moment, w którym odwiedzający działa
Przytrzymaj przycisk, a rysowana piwonia rozkwita i odsłania trzy wartości salonu. Działa myszą, palcem i klawiaturą.
-
Podstrony usług i poradnik
Każda kategoria zabiegów ma podstronę z przebiegiem, zaleceniami i przeciwwskazaniami. Poradnik odpowiada na pytania przed pierwszą wizytą i linkuje do usług.
Zakres prac
- Pomysł na markę i jej wygląd
- Teksty
- Projekt na telefon i komputer
- Własny program, który składa wszystkie podstrony z jednego pliku z danymi salonu
- 13 stron, w tym poradnik z dwoma artykułami
- Przygotowanie pod Google, także pod wyszukiwania z nazwą miasta
- Sprawdzenie wygody, szybkości i działania na różnych telefonach
Z czego zbudowana jest strona
Usługi, które obejmował projekt
Google i szybkość
Co zrobiliśmy dla wyszukiwarek i szybkości
- Własne tytuły i opisy oraz ścieżka nawigacji na podstronach
- Opisy salonu, usług, najczęstszych pytań i artykułów dla Google
- Ceny w opisach dla Google wzięte tylko z cennika salonu
- Spis podstron dla Google i plik z instrukcjami dla wyszukiwarek
- Mapa Google wczytywana dopiero po kliknięciu: strona działa szybciej, a Google nie dostaje danych odwiedzających bez potrzeby
Test Google Lighthouse, strona główna (punkty od 0 do 100)
| Kategoria | Telefon | Komputer |
|---|---|---|
| Szybkość | 99 | 100 |
| Dostępność | 100 | 100 |
| Dobre praktyki | 100 | 100 |
Na telefonie główna treść pojawia się po 2,2 s. Przeskakiwanie elementów podczas ładowania: 0,00 (dobry wynik to do 0,1).
Pomiar własny: Lighthouse 13, 24 października 2026, środkowy wynik z trzech pomiarów wersji demonstracyjnej uruchomionej na naszym komputerze. Test przeprowadza program naśladujący telefon i wolniejsze łącze, a nie prawdziwi odwiedzający. Oceny SEO nie podajemy: wersja demonstracyjna jest celowo ukryta przed Google, a test liczy to jako błąd. To, co zrobiliśmy dla Google, jest wypisane obok.
O wersji demonstracyjnej
Projekt przygotowany do portfolio. W wersji demonstracyjnej adres, telefon, e-mail, godziny i ceny są przykładowe, a zdjęcia i film są poglądowe. Wersja demonstracyjna ma wyłączone indeksowanie.
