Archistruct — prototyp strony budowlanej

Projekt koncepcyjny — nie realizacja kliencka

Kompletna strona premium bez jednej linijki frameworka

Archistruct to nasz autorski projekt koncepcyjny: sześciostronicowa witryna generalnego wykonawcy robót budowlanych. Zbudowaliśmy ją w czystym HTML, CSS i JavaScripcie, żeby pokazać, jak wygląda strona klasy premium, gdy nie stoi za nią żaden gotowy szablon ani biblioteka.

Uwaga: Archistruct nie jest istniejącą firmą. Wszystkie nazwy, realizacje, certyfikaty, liczby i dane kontaktowe są fikcyjne, a formularz nie wysyła wiadomości. Informuje o tym plakietka przypięta na każdej podstronie.

HTML

CSS

JavaScript

Netlify

Bez frameworków

Zobacz stronę na żywo

Nowoczesny budynek z betonu architektonicznego i szkła — motyw przewodni prototypu strony Archistruct

7 podstron

Sześć podstron ofertowych plus własna strona błędu 404.

0 zależności

Żadnego frameworka, biblioteki ani paczki z npm. Tylko kod.

173 kB

Tyle waży pierwsze wejście razem ze zdjęciem na całą szerokość.

Statyczny hosting

Wdrożenie na Netlify — bez bazy danych i bez kosztów utrzymania.

Punkt wyjścia

Po co budować stronę dla firmy, która nie istnieje

Klient, który dopiero szuka wykonawcy, chce zobaczyć konkret, a nie usłyszeć obietnicę. Projekty koncepcyjne pozwalają nam pokazać poziom wykonania i sposób myślenia o treści bez czekania, aż zgodę na publikację wyda ktoś, kto właśnie kończy inwestycję.

Branżę budowlaną wybraliśmy nieprzypadkowo. To rynek, na którym decyzje idą w setki tysięcy złotych, a strony wykonawców najczęściej wyglądają jak wizytówka sprzed dekady. Chcieliśmy sprawdzić, jak daleko da się przesunąć poprzeczkę bez sięgania po gotowy motyw.

Prototyp ma być dowodem rzemiosła, a nie atrapą, którą ktoś weźmie za prawdziwą firmę.

Trzy rzeczy do rozwiązania

Premium bez zdjęć z budowy

Fikcyjna firma nie ma archiwum fotograficznego. Wrażenie klasy musiały zbudować typografia, siatka i przestrzeń, a nie sto zdjęć z placu.

Wydajność bez frameworka

Wyjściowa makieta ładowała Tailwind z CDN-a, czyli narzędzie deweloperskie kompilujące style w przeglądarce. Trzeba było napisać CSS od zera.

Jednoznaczne oznaczenie makiety

Strona wygląda na prawdziwą, więc musi sama mówić, że nią nie jest — w sposób, którego nie da się przeoczyć ani zamknąć na stałe.

Zakres prac

Co zrobiliśmy

Sześć elementów, które złożyły się na kompletną, gotową do wdrożenia witrynę.

Autorski system designu

Paleta, skala typograficzna, siatka dwunastokolumnowa i konsekwentnie proste kąty. Wszystko opisane zmiennymi CSS, więc zmiana jednej wartości przestawia cały serwis.

Kod bez frameworków

Trzydzieści kilobajtów własnego CSS zamiast biblioteki kompilowanej w przeglądarce. Efekt: brak migotania treści przy wczytywaniu i pełna kontrola nad każdym pikselem.

Treść pisana od nowa

Zamiast marketingowych ogólników wpisaliśmy konkrety: czasy trwania etapów, tolerancje wykonania, zakresy budżetów i warunki gwarancji. Sekcja pytań inwestorów powstała w całości od zera.

Interakcje bez bibliotek

Filtrowanie realizacji, akordeon z pytaniami, menu mobilne i płynne pojawianie się sekcji — siedem kilobajtów własnego JavaScriptu, bez jQuery i bez dodatków.

Dostępność od podstaw

Obsługa klawiaturą, widoczny focus, skip link, poprawne atrybuty ARIA na elementach rozwijanych i respektowanie ustawienia ograniczonego ruchu w systemie.

Wdrożenie i konfiguracja

Publikacja na Netlify wraz z konfiguracją: adresy bez rozszerzenia, długi cache zasobów, nagłówki bezpieczeństwa i blokada indeksowania fikcyjnych treści.

Detal stalowej konstrukcji szkieletowej z fasadą szklaną, wykorzystany w prototypie strony Archistruct

Struktura serwisu

Siedem podstron, każda z własnym zadaniem

Serwis nie kończy się na stronie głównej. Każda podstrona odpowiada na inne pytanie: co potraficie, jak to robicie, komu już to zrobiliście i ile to trwa. Nawet strona błędu 404 została zaprojektowana, a nie zostawiona domyślna.

Strona główna

Realizacje z filtrem

Usługi i technologie

Proces inwestycyjny

O nas i filozofia

Kontakt z formularzem

Strona 404

Dlaczego tak, a nie inaczej

Co takie podejście daje Twojej firmie

Strona, która się nie zacina

Brak frameworka to brak setek kilobajtów, które przeglądarka musi pobrać i przetworzyć, zanim cokolwiek zobaczysz.

Wygląd szyty na miarę

Nie dopasowujemy firmy do gotowego szablonu. Układ powstaje pod treść, którą faktycznie masz do przekazania.

Dostępna dla każdego

Obsługa klawiaturą i czytnikami ekranu wchodzi do projektu na starcie, a nie jako poprawka po audycie.

Tani hosting

Strona statyczna nie potrzebuje bazy danych ani serwera PHP. Utrzymanie potrafi kosztować zero złotych miesięcznie.

Stan na dziś

Efekt

Kompletna witryna zajmuje 558 kB na dysku, a pierwsze wejście to 173 kB razem ze zdjęciem na całą szerokość ekranu. Cała strona ma dokładnie dwa pliki poza treścią: jeden arkusz stylów i jeden skrypt. Nie ma tu nic do aktualizowania, nic do zhakowania i nic, co przestanie działać, gdy jakaś biblioteka wyda nową wersję.

Czysty HTML5

Autorski CSS

Vanilla JS

Zdjęcia WebP