Nowa odsłona strony hostingu: steampunkowa serwerownia, trzech kocich specjalistów z prawdziwą pracą i panel klienta na własnym motywie i wtyczce zamiast kreatora stron.
Ilustracja wykorzystana na opublikowanej stronieKOTKA.DEV / CASE FILE 02
Format
Strona i panel klienta
Branża
Hosting stron
Język
Ukraiński, angielski
Status
Opublikowana strona
01 / Zadanie projektowe
Pokazać troskę, której nie widać
Gdy hosting działa, nikt go nie widzi: serwery, kopie zapasowe i bezpieczeństwo żyją gdzieś za kulisami. Strona miała uczynić tę troskę widoczną i dać firmie twarz, którą się zapamiętuje, nie zamieniając technicznej usługi w zabawkę. Miała też odejść od kreatora stron, WordPressa z Elementorem, na rozwiązanie w pełni kontrolowane przez zespół.
Główna idea
Twoja strona działa. Koty czuwają
02 / Rozwiązania w interfejsie
Załoga, a nie parada maskotek
Karta postaci — wzorzec dla każdej ilustracji na stronie
A
Każdy kot ma swoje zadanie
Archie dba o serwery i uruchamianie stron, Nox o bezpieczeństwo, monitoring i kopie zapasowe, Mia o wsparcie. Na stronie głównej każda karta usługi mówi, kto za nią odpowiada, więc postacie objaśniają usługi, a nie tylko je zdobią.
Załoga ma spisane zasady: na stronie głównej tylko ta trójka, żadnych kotów dla ozdoby, w każdej scenie ta sama rasa, sierść, strój i wyposażenie. Każda postać pojawia się w swoim kontekście: Archie przy serwerach, Nox przy sejfie i monitorach, Mia we wsparciu, czacie i FAQ.
Fantazja należy do zespołu. Opinie należą do ludzi, bez kocich awatarów i steampunkowych kostiumów: zaufanie nie powinno wyglądać jak bal przebierańców.
Kolory przyszły z makiet i żyją w motywie jako tokeny: ciepłe metale na głębokim granacie, a turkus tylko dla statusów.
Głęboki granat#08141F
Stary mosiądz#B88746
Miedź#A65D37
Bursztyn#F3A83B
Turkusowy status#20B8B0
03 / Detal do wypróbowania
Mniej kotów, więcej sensu
W pierwszym koncepcie strony głównej koty były wszędzie: w każdej karcie usług, w każdym kroku, nawet zamiast twarzy klientów. Wersja końcowa zostawia trzy postacie, daje każdej rolę, a resztę zamienia w czytelne ikony. Porównaj górę obu makiet.
↔
Pierwszy konceptMakieta końcowa
Przesuń suwak lub użyj strzałek na klawiaturze
Makiety z archiwum projektu, a nie zrzuty ekranu działającej strony.
04 / Pod maską
Zbudowane tak, by przetrwać redesign
A
Motyw dla wyglądu, wtyczka dla danych
Kreator stron ustąpił miejsca własnemu motywowi i wtyczce. Klienci, usługi i faktury żyją we wtyczce, więc przetrwają każdy przyszły redesign. Strony panelu są opisane w kodzie, a nie zapisane jako zwykłe strony: nikt ich przypadkiem nie przemianuje ani nie wyrzuci do kosza.
B
Tylko to, co wiemy na pewno
Makieta panelu pokazywała wskaźniki dysku w rodzaju „wykorzystano 75%”. Na razie nie ma źródła takich bieżących liczb, więc prawdziwy panel pokazuje limity pakietu i pozostały opłacony okres. Warstwa danych jest gotowa przejść na bieżące wskaźniki, gdy tylko źródło się pojawi.
C
Żadnych zapytań do cudzych serwerów
Czcionki są lokalne, a strony nie łączą się z serwerami firm trzecich: bez zbędnych opóźnień i bez przekazywania adresów odwiedzających komukolwiek. Ukraiński w katalogu głównym i angielski pod /en/ działają bez wtyczki do tłumaczeń.
05 / Co powstało
Serwerownia, którą można odwiedzić
Od września 2026 roku strona działa po ukraińsku i angielsku: steampunkowy świat z trzema specjalistami, pakiety i panel klienta, w którym spotykają się usługi, domeny, faktury i zgłoszenia do wsparcia. Nad panelem, stronami i tłumaczeniami czuwają setki automatycznych testów.
Wniosek dla projektowania: maskotka to ozdoba, zespół to obietnica. Gdy każda postać odpowiada za coś prawdziwego, fantazja zaczyna budować zaufanie.