—O mnie
Od pluginów w Javie
do całych produktów.
Nazywam się Bartosz Szymański. Studiuję informatykę, projektuję i programuję strony, aplikacje webowe i dedykowane systemy. Poniżej — skąd się wziąłem i dlaczego pracuję tak, jak pracuję.
Historia
Nie chcę tylko napisać funkcji. Chcę wiedzieć, po co istnieje i jak powinna działać jako część całości — od ekranu po serwer.
01Design × development
Projekt i kod
w jednym kierunku.
Najwięcej problemów w projektach webowych powstaje na styku: makieta nie przewiduje stanów, a kod gubi intencję projektu. Pracuję po obu stronach tej granicy, więc decyzje nie giną w przekazaniu między osobami.
Soczewka obok pokazuje to dosłownie: pod powierzchnią interfejsu zawsze jest struktura — komponenty, logika i dane. Projektuję widok, wiedząc, jak będzie zbudowany, i buduję go tak, żeby zachował jakość projektu: na telefonie, przy błędzie formularza i przy dłuższej treści.
Jeden produkt, siedem warstw.
Przewiń, żeby rozłożyć aplikację na części. Każdą z tych warstw mogę zaprojektować i zbudować — albo dołączyć tam, gdzie Twój zespół potrzebuje wsparcia.
- 01
Struktura
Mapa stron, priorytety treści i ścieżki użytkownika. Zanim powstanie pierwszy ekran, wiadomo, co jest najważniejsze i dokąd ma prowadzić każdy widok.
makieta struktury - 02
Interfejs
Układ, hierarchia i typografia. Projektuję widoki tak, żeby użytkownik od razu wiedział, gdzie jest i co może zrobić dalej — na telefonie tak samo jak na monitorze.
projekt widoków - 03
Komponenty
Przyciski, pola, karty i tabele jako jeden system. Spójność wynika z reguł zapisanych w kodzie, a nie z ręcznego kopiowania ekranów.
biblioteka komponentów - 04
Interakcje
Ładowanie, błędy, puste widoki i ruch. To, co dzieje się między kliknięciami, decyduje o tym, czy produkt wydaje się solidny.
stany i zachowania - 05
Logika
Reguły, statusy, uprawnienia i walidacja po stronie serwera. Zaplecze robi dokładnie to, czego wymaga proces — bez obejść.
reguły biznesowe - 06
Dane
Model danych w SQL, integracje z pocztą, kalendarzem czy zewnętrznym API. Informacja trafia tam, gdzie jest potrzebna, i nie trzeba jej przepisywać ręcznie.
baza i integracje - 07
Infrastruktura
Serwer, domena, certyfikat SSL i wdrożenie. Produkt ma działać pod docelowym adresem także wtedy, gdy kampania przyniesie więcej ruchu niż zwykle.
serwer i wdrożenie
04Od makiety do produktu
Decyzje, które widać
dopiero w całości.
Dobry interfejs nie powstaje od razu w kolorze. Przewijając, zobaczysz, jak jeden ekran przechodzi przez kolejne decyzje projektowe — i dlaczego każda z nich ma znaczenie.
01Struktura
Najpierw ustalamy, co jest na ekranie i w jakiej kolejności.
Makieta nie ma kolorów ani ozdobników — celowo. Rozmawiamy o tym, czy użytkownik od razu znajdzie najbliższą rezerwację i czy wie, jak dodać nową. Zmiana na tym etapie kosztuje kilka minut, w kodzie — kilka dni.
02Odstępy i rytm
Przestrzeń grupuje informacje, zanim ktokolwiek przeczyta słowo.
Te same elementy z przemyślanymi odstępami układają się w czytelne bloki: nagłówek, podsumowanie, lista. Ciasny układ mieści więcej, ale męczy; zbyt luźny wymaga przewijania. Szukam miary dopasowanej do tego, jak często ktoś korzysta z ekranu.
03Hierarchia
Jedna główna akcja. Reszta jest cicha.
Gdy wszystkie przyciski wyglądają tak samo, każdy konkuruje o uwagę. Wyraźne wyróżnienie „Nowej rezerwacji” i stonowane akcje dodatkowe sprawiają, że użytkownik nie zastanawia się, co zrobić dalej.
04Gotowy interfejs
Typografia, kontrast i stany — na telefonie i komputerze.
Dopiero teraz dochodzi pełna warstwa wizualna. Struktura się nie zmienia, dlatego wcześniejsze decyzje oszczędzają poprawek w kodzie. Ten sam system komponentów obsługuje później jasny i ciemny motyw bez przepisywania widoków.
05Komponenty
Detale, które
składają się w całość.
Frontend to system powtarzalnych części. Kiedy każda z nich jest dopracowana, kolejne widoki powstają szybciej i wyglądają spójnie.
- Stany, nie tylko wygląd
- Każdy przycisk i pole ma spoczynek, najechanie, naciśnięcie, ładowanie, błąd i sukces. Projektuję je razem, a nie dopisuję po fakcie.
- Walidacja, która pomaga
- Komunikat mówi, co poprawić — „brakuje domeny, np. @firma.pl” — zamiast samego „błędny adres”. Formularz nie krzyczy, zanim skończysz pisać.
- Dostępność od początku
- Widoczny fokus, obsługa klawiatury i czytników ekranu, kontrast sprawdzony w obu motywach. To część jakości, a nie dodatek.
02Jak to wpływa na projekty
Cztery nawyki,
które przynoszę do pracy.
- 01
Najpierw proces, potem ekran
Zanim narysuję pierwszy widok, chcę zrozumieć, jak praca wygląda dziś: kto co robi, gdzie gubią się informacje i co frustruje ludzi najbardziej. Interfejs ma uporządkować ten proces, a nie ozdobić bałagan.
- 02
Myślenie systemowe
Pluginy do Minecrafta nauczyły mnie, że każda funkcja wpływa na inne: stan gry, uprawnienia, dane graczy. W aplikacjach webowych jest tak samo — dlatego od początku pytam, co się stanie, gdy dane będą niepełne, użytkownik się pomyli albo usługa zewnętrzna nie odpowie.
- 03
Projekt z myślą o wdrożeniu
Ponieważ sam piszę kod, nie projektuję rzeczy, których nie da się sensownie zbudować. Każdy komponent ma stany, zasady responsywności i miejsce w systemie — to skraca drogę od projektu do działającej wersji.
- 04
Sprawdzone w przeglądarce
Projekt jest skończony dopiero wtedy, gdy działa na prawdziwym telefonie, z prawdziwą treścią i przy słabszym internecie. Testuję formularze, błędy i obsługę klawiaturą, a nie tylko scenariusz idealny.
03Narzędzia
Technologie,
których używam na co dzień.
Dobieram narzędzia do problemu, a nie odwrotnie. Tam, gdzie wystarczy lekki kod, nie dokładam frameworka.
- HTML / CSS
- Semantyczna struktura, responsywne układy, animacje interfejsu.
- JavaScript
- Interakcje, formularze, logika po stronie przeglądarki — także te laboratoria.
- PHP
- Logika aplikacji, panele i CRM (NaprawProjektor), ta strona.
- SQL
- Modele danych, relacje i zapytania w systemach z zapleczem.
- Java
- Początki: pluginy do serwerów Minecraft.
- Linux / Git
- Wdrożenia na VPS, konfiguracja serwera, historia zmian.
04Poza kodem
Dlaczego
kosmos?
Astronomia to moje prywatne zainteresowanie i stąd motywy na tej stronie: czarna dziura, soczewka grawitacyjna, fale. Ale to także dobra metafora pracy nad produktem — z chaosu wymagań i pomysłów trzeba wydobyć strukturę, a wszystko w dobrym interfejsie powinno naturalnie ciążyć ku temu, co najważniejsze.
→Następny krok
Masz projekt, który
wymaga uporządkowania?
Napisz kilka zdań o celu i obecnej sytuacji. Odpowiem osobiście — zwykle z pytaniami, które pomagają ustalić sensowny zakres pierwszej wersji.
Masz pomysł, stronę do przebudowy albo proces, który wymaga własnego narzędzia? Nie potrzebuję gotowej specyfikacji — wystarczy kilka zdań o tym, co chcesz osiągnąć.
- 01
Piszesz. Jeden krótki formularz — wystarczy kilka zdań.
- 02
Odpowiadam osobiście. Zwykle z pytaniami, które pomagają doprecyzować zakres.
- 03
Ustalamy kierunek. Krótka rozmowa, a potem propozycja zakresu i wycena.