Realizacje

Projekty, na których widać różnicę

Jedna strona, która na co dzień pracuje dla prawdziwej firmy, i osiem projektów koncepcyjnych. W tych koncepcyjnych firmy i opinie są wymyślone, a treści napisałem sam — kod, wygląd i wyniki pomiarów są za to jak najbardziej prawdziwe. Zaznaczam to wprost, bo pokazywanie wymyślonych realizacji jako płatnych zleceń byłoby oszustwem.

Prawdziwa firma

Strona, która realnie przynosi zlecenia

Zanim zacząłem robić strony dla innych, zrobiłem ją dla studia fotograficznego B-Art M Studio. Działa od lat, ma prawdziwych klientów i prawdziwe zapytania — jedyna pozycja tutaj, która nie jest pokazem możliwości.

Strona główna B-Art M Studio — pełnoekranowe zdjęcie o zachodzie słońca z szeryfowym nagłówkiem

B-Art M Studio — fotografia eventowa i portretowa

Warszawa i Mazowsze
Fotografia
Dwujęzyczna PL/EN
Blog
Cennik

Strona studia fotograficznego jest zbudowana wokół zdjęć, więc wszystko inne musiało zejść im z drogi: pełnoekranowe hero, szeryfowy krój i galeria z podziałem na kategorie.

Poza stroną wizytówką jest tu cennik, dziennik z poradnikami dla klientów i formularz rezerwacji terminu. Całość w dwóch językach, z przełącznikiem i osobnymi adresami dla każdej wersji.

Dla jasności: B-Art M Studio to moja druga działalność, więc byłem tu jednocześnie klientem i wykonawcą. Piszę o tym, żeby nikt nie policzył tego jako cudzego zlecenia.

Otwórz stronę ↗

Projekty koncepcyjne

Osiem branż, osiem osobnych światów

Najłatwiej poznać wykonawcę po tym, czy jego projekty różnią się czymś więcej niż kolorem. Te mają inną typografię, inną paletę, inny układ sekcji, a w przypadku KLAR-a inny sposób poruszania się po stronie. Firmy są wymyślone — chodziło o pokazanie warsztatu, nie o udawanie zleceń.

Strona główna KLAR — jasne hero z żółtym samochodem i punktami do klikania

KLAR — studio detailingu

Warszawa
Detailing
Koszyk wyceny
Dwujęzyczna PL/EN

Detailing sprzedaje się konkretem: co dokładnie zostanie zrobione i ile to kosztuje. Zamiast listy pakietów zbudowałem tu samochód, który jest nawigacją — klikasz w lakier, wnętrze, felgi albo reflektory i dostajesz zakres, czas i cenę tej jednej rzeczy.

Wybrane usługi zbierają się w koszyku wyceny na dole ekranu i lecą razem z formularzem. Klient nie musi opisywać słowami, czego chce — po prostu to klika.

PageSpeed: komplet 100 punktów, w obu wersjach językowych.

Otwórz stronę ↗

Strona główna Lumière — ciemne hero ze zdjęciem deseru i szeryfowym nagłówkiem

Lumière — pracownia deserów

Amsterdam
Gastronomia
4 podstrony
Formularz zamówień

Cukiernia z rozbudowanym menu i zamówieniami na torty okolicznościowe. Klimat paryskiej pracowni zbudowany krojem szeryfowym, czekoladowymi brązami i złotym akcentem.

Sekcje: pełnoekranowe hero ze zdjęciem, pasek statystyk, karty kategorii, galeria, opinie, FAQ i formularz zamówienia z wyborem terminu odbioru.

PageSpeed mobile: 99–100 punktów w kategoriach wydajność, dostępność, dobre praktyki i SEO.

Otwórz stronę ↗

Strona główna Velour — jasne hero z portretem w kształcie łuku

Velour — salon beauty

Londyn
Uroda
4 podstrony
Pełny cennik

Salon fryzjersko-kosmetyczny z cennikiem podzielonym na kategorie, prezentacją zespołu i rezerwacją wizyt. Jasna, ciepła paleta i miękki grotesk zamiast szeryfów.

Ten projekt świadomie zbudowałem odwrotnie niż Lumière: jasne hero z portretem w kształcie łuku, usługi jako wiersze zamiast kart, galeria mozaikowa i karuzela opinii.

PageSpeed: komplet 100 punktów na wszystkich czterech podstronach.

Otwórz stronę ↗

Strona główna Rift — ciemne hero z hasłem o kupowaniu kawy smakiem i kreatorem smaku po prawej

Rift Coffee Roasters — palarnia kawy

Rotterdam
Kawa
Sklep
Po angielsku

Sklepy z kawą układają towar według kraju pochodzenia, choć nikt nie kupuje kawy dlatego, że jest z Kolumbii. Rift sprzedaje smakiem: trzy suwaki — kwasowość, ciało i wypał — a półka przestawia się w locie i pokazuje, ile pozycji pasuje do ustawienia.

Każda kawa jest oceniona na tych samych trzech osiach, a osobna sekcja tłumaczy, co te oceny naprawdę znaczą. Dla kogoś, kto nie wie, od czego zacząć, jest kreator smaku w trzech pytaniach.

Demo koncepcyjne — wymyślona firma, prawdziwy kod.

Otwórz stronę ↗

Strona główna Malwa — kremowe hero z hasłem o kupowaniu całych stylizacji i zdjęciami ubrań

MALWA — pracownia odzieżowa

Łódź
Odzież
Sklep
Dwujęzyczna PL/EN

Sklepy z ubraniami układają towar w kategorie: spodnie, bluzki, okrycia. Tylko że nikt nie kupuje spodni — kupuje się to, w czym się wyjdzie. Malwa sprzedaje zestawami: cztery gotowe komplety, a każdą sztukę podmieniasz jednym kliknięciem na inną z tej samej półki. Suma i rabat przeliczają się od razu.

Rozmiar rozwiązany bez tabeli: podajesz trzy wymiary raz, zostają w Twojej przeglądarce i nigdzie nie są wysyłane, a przy każdej sztuce widzisz, czy dana rzecz leci luźno, czy wąsko.

Demo koncepcyjne — wymyślona marka, prawdziwy kod.

Otwórz stronę ↗

Strona główna Nightshift — ciemne hero z hasłem o awarii o trzeciej w nocy i panelem dyżuru

Nightshift — monitoring i reagowanie na awarie

Kraków
B2B
Oś czasu
Po angielsku

Firmy od monitoringu sprzedają wykresy. Nightshift sprzedaje różnicę: suwak przesuwa oś czasu minuta po minucie od wygaśnięcia certyfikatu i pokazuje obok siebie, co dzieje się bez nikogo na dyżurze, a co z dyżurnym inżynierem.

Obok jest pole na Twój przychód na godzinę, więc awaria od razu przelicza się na pieniądze. Ceny są opublikowane wprost, w trzech rozmiarach, bez „zapytaj o wycenę”.

Demo koncepcyjne — wymyślona firma, liczby napisane na potrzeby demo.

Otwórz stronę ↗

Strona główna Estúdio Tinta — ciemne hero ze zdjęciem tatuowanego przedramienia i przyciskiem rezerwacji

Estúdio Tinta — studio tatuażu

Lizbona
Tatuaż
Rezerwacje
Po angielsku

Umówienie tatuażu to zwykle cztery maile w tę i we w tę. Tinta zaczyna od pytania, ile czasu potrzebujesz — konsultacja, mały wzór, pół dnia albo cały dzień — i terminarz pokazuje wyłącznie te okna, które taką pracę realnie pomieszczą.

Trzech artystów ma własne stawki, dni pracy i czas oczekiwania, więc wybór osoby przestawia dostępne terminy. Depozyt i zasady odwołania są napisane wprost, zanim ktokolwiek wyśle formularz.

Demo koncepcyjne — wymyślone studio, prawdziwy kod.

Otwórz stronę ↗

Strona główna H&A Renovations — ciemne hero z suwakiem przed i po remoncie

H&A Renovations — firma remontowa

Holandia
Budownictwo
Kalkulator
WhatsApp

Ekipa remontowa — branża, w której klient chce zobaczyć efekt i szybko dostać wycenę. Stąd interaktywny suwak przed i po, kalkulator orientacyjnego kosztu oraz kontakt przez WhatsApp.

Ciemna, kontrastowa paleta z pomarańczowym akcentem i mocny, kondensowany krój — wizualny język, do którego ta branża jest przyzwyczajona.

Otwórz stronę ↗

Materiały

Zdjęcia i wideo na stronę

Strona jest tak dobra jak materiał, który na niej wisi. Zdjęcia wnętrza, zespołu i efektu pracy mogę zrobić przy okazji projektu — jako dodatek do pakietu, dla klientów, do których dojadę. To nie jest osobna oferta fotograficzna, tylko brakujący element strony.

Wnętrze baru — ceglana ściana z różowym neonem, czerwone kanapy i wysokie stołki przy stolikach — Przestrzeń — kadr, który pokazuje, gdzie klient wyląduje

Bar z podświetloną półką pełną butelek, granatową boazerią i rzędem stołków — Detal — to, z czego lokal jest znany

Wejście do lokalu od ulicy — granatowa elewacja, markiza i stoliki na zewnątrz — Wejście — po tym kadrze klient rozpozna miejsce z ulicy

Trzy typy kadru, których potrzebuje strona usługowa: przestrzeń, detal i wejście. Zdjęcia powyżej są z moich wcześniejszych realizacji — pokazuję je, żeby było widać poziom, a nie żeby udawać, że powstały pod tę stronę.

Piętnaście sekund z realizacji KLAR — strona w ruchu, na komputerze i na telefonie. Materiał jest składany w kodzie, nie w montażowni, więc kolejną wersję albo cięcie pionowe na social media da się zrobić w kilkanaście minut.

Chcesz stronę o takim poziomie wykonania?

Napisz do mnie