Strona inwestycji deweloperskiej: od projektu graficznego do statycznego frontendu
Realizacja strony domywierzchucino.pl pokazuje, jak podejsc do budowy statycznej strony inwestycji deweloperskiej. Projekt graficzny zostal przelozony na czysty HTML i CSS z pelna responsywnością i optymalizacja obrazow WebP.
Przebieg realizacji
Czym jest strona inwestycji deweloperskiej
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.
Statyczna strona inwestycji nie potrzebuje CMS-a ani backendu, żeby dobrze prezentować oferte.
Praca z materialami projektantki
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.
Odwzorowanie detali projektu w CSS
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 wartościami 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.
Responsywność zaprojektowana od zera
Projekt graficzny pokrywal wyłącznie widok desktopowy. Responsywność 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 czytelności ani ważnych elementów treści.
Statyczny frontend bez kompromisow
Calosc działa jako dwa pliki, index.html i styles.css, plus folder z assetami. Nie ma frameworka, bundlera, JavaScriptu ani backendu. Strona ładuje 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 ciągłych aktualizacji treści.