Realizacje

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

Strona prawdziwej firmy i jedenaście projektów koncepcyjnych — cztery na WordPressie, siedem pisanych ręcznie. W 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

Tu nic nie jest wymyślone

Tę stronę zrobiłem dla własnego studia fotograficznego. Firma istnieje naprawdę, razem z ofertą, którą pokazuje.

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ę ↗

Na WordPressie

Cztery strony, które edytujesz w panelu

Klasyczny WordPress z motywem pisanym od zera — bez Elementora i innych kreatorów, bez płatnych wtyczek. Właściciel zmienia w panelu to, co w jego branży zmienia się najczęściej: ceny usług, kartę dań, produkty albo film w nagłówku. Wszystkie cztery stoją na zwykłym polskim hostingu i mają w Lighthouse na telefonie 99–100 punktów. Firmy są wymyślone, kod i pomiary — prawdziwe.

KLAR na WordPressie — jasne hero z hasłem „Co wymaga uwagi?” i żółtym samochodem z punktami do klikania

KLAR na WordPressie — ta sama strona, druga technologia

Warszawa
Detailing
Usługi w panelu
Dwujęzyczna PL/EN

Żeby porównać obie metody uczciwie, zbudowałem KLAR-a drugi raz — ten sam projekt i te same teksty, tym razem na WordPressie. Każda z pięciu usług jest wpisem w panelu z nazwą, zakresem, czasem i ceną, a jedna zmiana pojawia się od razu na aucie, w cenniku i w koszyku wyceny.

Zmierzone tego samego dnia na żywo: obie wersje mają w Lighthouse na telefonie komplet 100 punktów, a największy element strony pojawia się po 1,3–1,5 sekundy. Różnica nie leży w szybkości, tylko w tym, kto zmienia ceny.

Demo koncepcyjne — wymyślona firma, prawdziwy kod. Wersja pisana ręcznie jest niżej.

Otwórz stronę ↗

Kredens — kremowe hero z hasłem „Polska kuchnia bez pośpiechu”, przyciskami rezerwacji i karty oraz lunchem dnia z cenami

Kredens — bistro na Nadodrzu

Wrocław
Gastronomia
Karta w panelu
Dwujęzyczna PL/EN

Strony restauracji starzeją się najszybciej: zmiana ceny często wymaga telefonu do wykonawcy, więc karta w internecie przestaje się zgadzać z tą na stole. Tu 22 pozycje w sześciu kategoriach są wpisami w panelu — z ceną, alergenami i oznaczeniami diet — a lunch dnia sam pokazuje się na stronie głównej.

Rezerwacja stolika jest wbudowana w motyw, bez wtyczki: nie przyjmuje rezerwacji na poniedziałek, pilnuje krótszych godzin w niedzielę i odpowiada w języku, w którym gość pisał. Karta celowo nie ma zdjęć potraw — układ jest typograficzny, bo małe lokale rzadko mają dobre zdjęcia.

Demo koncepcyjne — wymyślone bistro, prawdziwy kod. Komplet 100 punktów w Lighthouse, po polsku i po angielsku.

Otwórz stronę ↗

Plumpkin — jasne hero z hasłem „Bears with names, not model numbers” i obrazem pluszowych misiów na ławce

Plumpkin — sklep z pluszowymi misiami

Bristol
WooCommerce
Sklep
Po angielsku

Celowo zwyczajny sklep — taki, jaki zna każdy kupujący — ale bez kreatora i bez płatnych dodatków. Jedyną wtyczką jest darmowy WooCommerce, a strony produktów nie ładują jego arkuszy stylów ani jQuery.

Każdy miś może dostać imię na metce — do 12 liter, za darmo — i to imię przechodzi przez koszyk aż do zamówienia; pakowanie na prezent kosztuje 3 funty. Obie funkcje to kilkadziesiąt linii kodu w motywie, a nie osobne wtyczki.

Demo koncepcyjne — wymyślony sklep, obrazy misiów wygenerowane przez AI. Koszyk i kasa działają do potwierdzenia zamówienia, bez płatności kartą.

Otwórz stronę ↗

Nocturne — ciemne hero z kadrem filmu przedstawiającym domowy magazyn energii i hasłem „Store the sun. Spend it at night.”

Nocturne — magazyny energii do domu

Berlin
Energia
Wideo w nagłówku
Po angielsku

Film w nagłówku może oznaczać kilka megabajtów pobieranych na każdym telefonie. Tu pętla wyrenderowana w Blenderze waży 65 KB w formacie WebM, ładuje się tylko na ekranach od 768 pikseli, a właściciel podmienia ją w panelu WordPressa — bez wtyczki.

Niżej zamiast stosu sekcji jest jedna scena, która zmienia się przy przewijaniu: słońce przechodzi w księżyc, a magazyn się ładuje i rozładowuje. Kalkulator zamienia wielkość domu, panele, auto i pompę ciepła na cenę i liczbę modułów, a wynik trafia do formularza.

Demo koncepcyjne — wymyślona firma, prawdziwy kod. Komplet 100 punktów w Lighthouse, na telefonie i na komputerze z filmem.

Otwórz stronę ↗

Pisane ręcznie

Siedem branż, siedem osobnych światów

Najłatwiej poznać wykonawcę po tym, czy jego projekty różnią się czymś więcej niż kolorem. Te są pisane ręcznie w HTML, CSS i JavaScripcie — bez panelu i bez niczego do aktualizowania — i każdy ma inną typografię, paletę i układ sekcji, a KLAR 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. Ta sama strona na WordPressie jest wyżej.

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ę ↗

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