Strona inwestycji deweloperskiej: od projektu graficznego do statycznego frontendu

1. Materiały

Projektantka dostarczyla plansze SVG kazdej sekcji strony oraz wizualizacje 3D osiedla w wysokiej rozdzielczosci.

2. Ekstrakcja

Obrazy osadzone w SVG zostaly wyodrebnione programowo i skonwertowane do WebP z odpowiednimi parametrami jakości.

3. Frontend

Strona powstala jako czysty HTML + CSS z grida, flexboxa i dekoracyjnych elementów CSS odwzorowujacych detale projektu.

4. Responsywnosc

Zaprojektowalismy uklady dla trzech breakpointow, dostosowujac siatki, nawigacje i elementy interaktywne do roznych urzadzen.

Strona inwestycji to narzędzie sprzedazowe, które laczy wizualizacje architektoniczne, informacje o lokalizacji, specyfikacje techniczne i dane kontaktowe w jednym miejscu. W przypadku Wierzchucina chodzilo o prezentacje kameralnego osiedla szesciu domow jednorodzinnych nad Morzem Baltyckim.

Klient potrzebowal strony statycznej, która mozna wgrac na dowolny hosting przez FTP bez konfiguracji serwera, bazy danych ani środowiska uruchomieniowego.

Materiały zrodlowe obejmowaly 11 plansz SVG, każda odpowiadajaca jednej sekcji strony, oraz kilkadziesiat wizualizacji 3D w formatach PNG i JPG. Plansze SVG zawieraly osadzone obrazy w formacie base64, które trzeba bylo wyodrebnic programowo.

Kazdy obraz zostal skonwertowany do formatu WebP z parametrami jakości dostosowanymi do typu grafiki. Renderingi 3D otrzymaly wyzsza jakosc niż schematy techniczne, a rzuty mieszkan zostaly przeskalowane z oryginalnych 3742x3003 pikseli do rozsadnych rozmiarow webowych.

Projekt graficzny zaweral specyficzne elementy dekoracyjne, na których klientowi szczegolnie zalezalo. Kropkowane i kreskowane ramki wokol zdjec zostaly odwzorowane za pomoca pseudo-elementów CSS z odpowiednimi wartosciami inset i border-radius.

Kolowe callout-y na mapie potencjalu ogrodow, asymetryczne obramowania na zdjeciu widoku ulicy, okragla mapa lokalizacji z kropkowana ramka, to wszystko zostalo zbudowane w czystym CSS bez grafik tla ani dodatkowego JavaScriptu.

Projekt graficzny pokrywal wylacznie widok desktopowy. Responsywnosc wymagala zaprojektowania oddzielnych ukladow dla trzech glownych breakpointow. Na tabletach gridy przejscia z wielokolumnowych na jednokolumnowe, na telefonach kolowe callout-y ogrodow zostaly ukryte, a nawigacja zamienila się w menu hamburgerowe.

Kazda sekcja zachowuje proporcje oryginalu na duzych ekranach (16-17 cali), a na mniejszych adaptuje się bez utraty czytelnosci ani waznych elementów treści.

Calosc działa jako dwa pliki, index.html i styles.css, plus folder z assetami. Nie ma frameworka, bundlera, JavaScriptu ani backendu. Strona laduje szybko, jest latwa w utrzymaniu i moze byc hostowana na dowolnym serwerze z obsluga plikow statycznych.

Takie podejście sprawdza się szczegolnie dobrze w projektach deweloperskich, gdzie strona ma zyc przez czas trwania sprzedaży inwestycji i nie wymaga ciaglych aktualizacji treści.