Dla kogo i po co powstała strona
Restauracja z domowymi obiadami w Warszawie, bez strony internetowej, logo i hasła. Goście to rodziny z dziećmi, studenci, seniorzy i turyści.
Dla kogo
Lokalna restauracja serwująca tradycyjne, świeżo gotowane obiady w przystępnych cenach. Stoliki rezerwuje się telefonicznie, jedzenie można też zamówić z dowozem.
Problem
Brak miejsca w sieci, w którym gość sprawdzi aktualne menu, ceny i godziny otwarcia. Karta zmienia się sezonowo, więc statyczna strona szybko byłaby nieaktualna.
Cel
Zachęcić do przyjścia do lokalu i ułatwić rezerwację stolika, a właścicielowi dać panel, w którym sam zmienia teksty, zdjęcia, cennik, godziny, promocje i aktualności.
Logo, kolory i typografia
Minimalistyczny znak ze sztućcami i talerzem oraz hasło „Smakuje jak w domu.” – krótkie i łatwe do zapamiętania. Kolory strony wynikają wprost z logo.
Kolory
- Granat#1F2A44
- Bursztyn#9A5B00
- Akcent#E8A84C
- Krem#FFF3DC
- Tło#FFFCF7
Krój pisma
PoppinsNagłówki 600–700, tekst 400–500. Jeden krój w logo, na stronie i w panelu.Smakuje jak w domu.
Najważniejsze funkcje
Jedna długa strona w układzie pełnoekranowym: od pierwszego ekranu przez menu i ceny po dojazd. Wszystkie treści są dostępne po polsku, angielsku, niemiecku i ukraińsku.
Co jeszcze jest na stronie
- O nas, galeria z filtrami i powiększaniem zdjęć
- Aktualności, najczęstsze pytania (FAQ)
- Kontakt z mapą i przyciskiem „Zadzwoń”
- Parking i dojazd komunikacją, metody płatności, dostępność
- Miejsce na opinie gości oraz nagrody – wypełnia je właściciel prawdziwymi danymi
- Formularz zapisu do newslettera i miejsce na statystyki odwiedzin (do podłączenia przy wdrożeniu)
Co właściciel zmienia sam
Panel jest wbudowany w stronę i w całości po polsku. Każda zmiana zapisuje się automatycznie i od razu widać ją na stronie. W tej wersji demonstracyjnej dane zapisują się w przeglądarce osoby edytującej.
Menu i ceny
Dania, kategorie, gramatury, alergeny, oznaczenia i ceny. Kolejność zmienia się strzałkami, pozycję można ukryć bez usuwania.
Teksty i zdjęcia
Nagłówek, „O nas”, galeria, FAQ, dane kontaktowe i informacje praktyczne. Każdą sekcję strony można włączyć lub wyłączyć.
Bezpieczeństwo danych
Zmiana hasła, kopia zapasowa do pliku, import kopii i przywracanie treści początkowych z podwójnym potwierdzeniem.
Wygodnie jedną ręką
Na telefonie sekcje układają się jedna pod drugą, a na dole ekranu zawsze jest pasek: Zadzwoń, Menu i ceny, Jak dojechać. Strona i panel działają przy szerokości 390 px bez przewijania w bok.
Prosto, szybko i dostępnie
Cała strona wraz z panelem to jeden plik HTML – bez frameworków i bez serwera. Można ją wgrać na darmowy hosting statyczny, np. Cloudflare Pages.
- Dostępność: projekt według WCAG 2.1 AA – obsługa klawiaturą, widoczny fokus, opisy zdjęć, okna dialogowe z poprawnymi rolami, wyłączanie animacji przy „ogranicz ruch”.
- Szybkość: jeden plik, brak zewnętrznych skryptów, zdjęcia ładowane dopiero wtedy, gdy są potrzebne; zdjęcia z panelu są automatycznie zmniejszane.
- Bezpieczeństwo: brak bazy danych i serwera do zaatakowania. Uczciwie: w wersji demonstracyjnej login i dane panelu są po stronie przeglądarki – przy wdrożeniu dla klienta panel wymaga prawdziwego logowania i zapisu na serwerze.
- Sprawdzone w przeglądarce: logowanie, zmiana hasła, dodawanie i planowanie promocji, kolejność, ukrywanie, godziny, dni specjalne, wyłączanie sekcji i trwałość zmian po odświeżeniu.
Chcesz taką stronę dla swojej firmy?
Napisz, czym się zajmujesz – przygotuję propozycję strony z panelem, którą będziesz aktualizować samodzielnie.
Projekt demonstracyjny. Firma i dane są fikcyjne – menu, ceny, adres i godziny zostały przygotowane na potrzeby prezentacji. Zrzuty pokazują ilustracje zastępcze w miejscach zdjęć dań.
Autor: Grzegorz · Strony AI Wrocław