Michał Antoni Budzik - portrait photo
MindBorn - logo
Cześć i czołem, tu

Michał Antoni Budzik: MindBorn, Web Developer i grafik komputerowy.

Mam ponad 15 lat doświadczenia w tworzeniu stron internetowych i projektowaniu grafiki zarówno jako freelancer, współpracownik, jak i na etacie, także w roli team leadera w dużym koncernie mediowym. Moje priorytety w pracy zawodowej to skuteczne rozwiązywanie problemów i szukanie optymalnych rozwiązań w kodzie i designie.

Wśród moich umiejętności technicznych są HTML5, CSS3, SASS i LESS, JavaScript, React, jQuery, PHP, MySQL, WordPress + WooCommerce + WPML + ACF, Docker, Git, SEO, UI/UX Design, Adobe Photoshop, Illustrator, After Effects, InDesign, XD and Figma.

Doświadczenie

Kilka przykładów osiągnięć zawodowych:
  • Przygotowałem dla globalnych marek ponad 2000 docenianych projektów graficznych, które obejrzało ponad 300 mln użytkowników.
  • Zaprojektowałem i wdrożyłem szablony landing page, które pozwoliły podwoić efektywność pracy zespołu graficznego i web developmentu.
  • Znacząco usprawniłem pracę działu sprzedaży i marketingu realizując wewnętrzne, firmowe portfolio pozwalające filtrować według kilkunastu przydatnych kryteriów projekty graficzne z okresu kilku lat.
  • Opracowałem uniwersalną, interaktywną kreację reklamową w technologii RWD umożliwiającą skondensowanie wszystkich funkcjonalności typowego landing page w formacie pełnoekranowego popupu.

Ukończone projekty: strony internetowe, e-commerce, logo, plakaty i inne prace do druku

Włąściwie przerobiłem wszystko. Gdybym tylko zechciał przez te wszystkie lata na bieżąco dbać nieco bardziej o dokumentację swoich dokonań...
Poniżej znajdziesz jeden szczegółowo opisany case study niedawnego projektu e-commerce
i całkiem pokaźną galerię moich innych prac. Mam nadzieję, że przypadną Ci do gustu.

Time: Q3 2023

Tasks:

  • projekt logo
  • projekt strony internetowej
  • projekt mailingów
  • projekt opakowań
  • kodowanie front end
  • kodowanie back end

Design Stack: Adobe Photoshop & Illustrator

Główny Tech Stack: Wordpress, WooCommerce, ACF

Mockup image by Aleksandr Samochёrnyi on Freepik

Omówienie projektu

Hemply Smile to działająca głównie w Szwecji firma produkująca i sprzedająca wysokiej jakości produkty CBD. Moim zadaniem było zaprojektowanie od podstaw całej identyfikacji wizualnej marki i stworzenie od a do z jej strony internetowej wraz ze sklepem e-commerce. Nie było to łatwe zadanie, gdyż rynki skandynawskie znane są z trudności zdobycia zaufania klientów, szczególnie w przypadku zupełnie nowej firmy w segmencie związanym ze zdrowiem.

A więc do dzieła!

Mockup image by Aleksandr Samochёrnyi on Freepik

Pierwsze wyzwanie: Logo

W całym projekcie klientowi zależało na uzyskaniu profesjonalnego wyglądu, który jednocześnie nie byłby zbyt sztywny. Główni konkurenci postawili na chłodną, medyczną, niemal szpitalną estetykę. Ja uznałem, że skuteczniejsze może być pozycjonowanie się raczej na przyjaciela niż lekarza, szczególnie że grupą docelową są tzw. młodzi dorośli. Chciałem, żeby to logo było odważne i fajne, ale jednocześnie wciąż budzące zaufanie, nieco zabawne, ale bez przeady i z całą pewnością nie po prostu śmieszne.

Liść konopi wydał mi się dobrym motywem przewodnim, zwłaszcza że zwykle jest używany w kontekście CBD tylko jako uproszczona ikona. Dostrzegłem tu szansę na stworzenie naprawdę wyrazistego projektu. Początkowo miałem trochę problemów z kształtem liścia, który wymuszał, by logo było zdecydowanie zbyt wysokie. To zależnie od zastosowania mogłoby okazać się sporym utrudnieniem. Na szczęście okazało się, że po przycięciu od góry i lewej strony wziąż jest bardzo czytelne, więc zdecydowałem się pójść właśnie tą drogą.

Metodą prób i błędów szybko doszedłem do wniosku, że nie jestem w stanie skutecznie rozdzielić dużego, mocnego kształtu liścia i kropli oleju od nazwy marki i muszę je jakoś sensownie połączyć w spójną całość. Pomocna okazała się negatywna przestrzeń. Na dość wczesnym etapie zdecydowałem się użyć fontu Slackey, ponieważ idealnie pasował mi do klimatu całego projektu. Sporo musiałem się nagimnastykować z przesuwaniem, zmianami rozmiaru liter i ich odstępów, ale w końcu udało mi się osiągnąć stan, w którym z typografii byłem rzeczywiście zadowolony.

To, czego wciąż brakowało, to jakiś finalny akcent. Po drodze odrzuciłem kilka głupkowatych pomysłów i ostatecznie dodałem do kropli oleju dyskretną linię uśmiechu. Ładnie koresponduje ona z nazwą marki a jednoczesnie przełamuje nieco kształt samej kropli, nadając jej odpowiedniego charakteru. W tym momencie byłem wreszcie gotów, by pokazać skończony projekt klientowi, dla lepszego efektu w formie makiety strony internetowej na smartfonie.

Mockup image by Aleksandr Samochёrnyi on Freepik
Mockup image by Aleksandr Samochёrnyi on Freepik
Mieliśmy pewne wymagania, ale tak naprawdę nie byliśmy pewni, czego dokładnie chcemy i czego powinniśmy się spodziewać. Kiedy zobaczyliśmy twój projekt, powiedzieliśmy sobie: wow, to jest to! Próbowaliśmy to wcześniej jakoś ubrać w słowa, a ty przedstawiłeś to po prostu idealnie.

Następny krok: opakowania

Po wykonaniu logo nadszedł czas, by zająć się opakowaniami. Muszę przyznać, że to dla mnie dość niecodzienne zlecenie, ale zakres prac zapowiadał się raczej standardowo. Miałem zaprojektować naklejki na buteleczki z olejem CBD i pojemniki na kapsułki. Produkty różniły się ilością i rodzajem kannabinoidów oraz zastosowaniem. Po krótkim namyśle zdecydowałem się rozróżnić je kolorystycznie. Dlatego już na tym etapie musiałem zdecydować, jakiej palety barw będę używał we wszystkich dalszych pracach nad tym projektem. Stanęło na dwóch głównych kolorach użytych już w logo i sześciu odcieniach uzupełniających.

Zmieszczenie obszernych tekstów na często naprawdę małych etykietach okazało się sporym wyzwaniem. Całe szczęście font Fira Sans, na którego zastosowaniu zależało mi w tym projekcie, ma bardzo ładny wariant skondensowany. Po licznych przesunięciach i zmianach rozmiaru udało mi się zmieścić też kilka minimalistycznych ikon reprezentujących różne sekcje tekstu. Zdecydowałem się również podzielić długie nazwy produktów na części w odrębnych liniach wyróżnione kolorem i rozmiarem. To wizualne sekwencjonowanie tytułów zostanie później szeroko wdrożone na stronie internetowej.

Nie uczestniczyłem osobiście w procesie druku, jako że całe zlecenie było wykonywane nie tylko zdalnie ale też ponad granicami krajów. Zostały wydrukowane trzy małe partie testowe uwzględniające niezbędne korekty kolorów CMYK, drobne zmiany i poprawienie kilku literówek. Poszło to bardzo sprawnie, niebawem klient był usatysfakcjonowany rezultatami a ja mogłem już w pełni skupić się na projekcie strony internetowej.

Mockup image by Aleksandr Samochёrnyi on Freepik
Mockup image by Aleksandr Samochёrnyi on Freepik

Zadanie główne: strona internetowa

Wobec sprawnego zaakceptowania logo i projektów opakowań bez żadnych poważniejszych poprawek, byłem dość pewny swojego wyczucia preferencji klienta. Dlatego zdecydowałem się pominąć etap prototypowania i tym razem od razu przeszedłęm do projektu graficznego. Na szczęście zostały mi oszczędzone niedogodności związane z zaślepkami typu "lorem ipsum" i zdecydowana większość treści na stronę była dla mnie od razu dostępna. Pozwoliło to z wyprzedzeniem zaplanować podział zawartości kolejnych podstron na kilka powtarzalnych, logicznych sekcji, co znacznie ułatwiło mi życie później, gdy zabierałem się za kodowanie. Na tym etapie musiałem stworzyć kilka podstawowych wzorców wizualnych - nagłówki, podnagłówki, przyciski, bloki tekstów i obrazków, czy zestawy ikon, później wykorzysywane wielokrotnie na kolejnych ekranach witryny.

Uzgodniliśmy z klientem, że co do zasady będziemy trzymać się standardowego UX platform WooCommerce i Wordpress, więc głównymi ekranami wymagającymi niestandardowych projektów były strona główna, lista produktów z sortowaniem i filtrowaniem, szczegóły produktu i kilka mniej typowych modułów uzupełniających pozostałe podstrony. Zdecydowałem się na projekt RWD o pełnej szerokości ekranu z dużymi zdjęciami w przewżających odcieniach zieleni oraz wspomnianymi wcześniej dużymi nagłówkami podzielonymi na części. Po kilku konsultacjach projekty mobilne i desktopowe zostały jeden po drugim szybko zaakceptowane z jedynie niewielkimi zmianami. Teraz nadszedł czas, żeby zakasać rękawy i zająć się kodem.

Zakres zlecenia wymagał motywu Wordpressa zbudowanego od podstaw pod indywidualne potrzeby klienta. Zbyt wiele zmiennych i elementów charakterystycznych dla tego właśnie projektu, by móc oprzeć się na gotowym szablonie z półki. To oznaczało znacznie więcej pracy z html, css, JavaScript i php, ale ostatecznie było warte każdej poświęconej chwili. Dzięki temu mogłem też wykorzystać potęgę modelu css flexbox, wciąż zbyt rzadko używanego w komercyjnych motywach. Szybko zdałem też sobie sprawę, że standardowe bloki treści Wordpressa ewidentnie tu nie wystarczą ze względu na swoje fabryczne ograniczenia. Nie jestem wielkim fanem kreatorów stron takich jak Elementor czy Divi, więc zdecydowałem się skorzystać z rozszerzenia ACF Pro pozwalającego na ręczne przejęcie pełnej kontroli nad sposobem wyświetlania wszystkich treści. Początkowy wysiłek włożony w zbudowanie przemyślanych modułów, komponentów i sekcji wielokrotnego użytku sprawił, że na dalszych etapach prac było już głównie z górki.

Z technicznego punktu widzenia większość pracy od tego momentu właściwie była dość standardowa. Wyraźnie trudniejszym fragmentem kodu był moduł wyboru produktów promocyjnych „4 w cenie 3”, umożliwiający klientom wybranie czterech produktów i otrzymanie najtańszego z nich za darmo. Okazało się, że spośród wszystkich dostępnych rozszerzeń WooCommerce, czy to darmowych czy płatnych, żadne nie było w stanie umożliwić tej konkretnej funkcjonalności. Wtyczka Product Bundles nieco pomogła, ale nadal sporo pozostawało do życzenia. Klient był bardzo zdeterminowany na skuteczne wdrożenie takiego modułu promocyjnego, więc samodzielnie napisałem niestandardowe szablony dla stron koszyka i podsumowania zamówienia, które całkowicie zmieniły sposób wyświetlanie produktów i logikę zliczania sumy ich cen. Na koniec przygotowałem elegancki interfejs graficzny w postaci sąsiadujących pionowych sliderów, pozwalający użytkownikom interaktywnie wybrać cztery produkty i natychmiast zobaczyć ostateczną, obniżoną cenę zakupu. Następnie pozostało już tylko upewnić się, że proces zamówienia działa jak trzeba, skonfigurować rozszerzenia związane z wysyłką i płatnością oraz trochę podkręcić wizualnie szablony e-maili wysyłanych do użytkowników.

Mockup image by Aleksandr Samochёrnyi on Freepik
Mockup image by Aleksandr Samochёrnyi on Freepik
Mockup image by Aleksandr Samochёrnyi on Freepik

Migracja: hosting i domeny

Strona była już gotowa i nadszedł czas, by przenieść ją z mojego serwera deweloperskiego do lokalizacji docelowej. Klient sam wybrał szwedzkiego dostawcę hostingu współdzielonego i wcześniej kupił potrzebne domeny. Mając wszystkie niezbędne dostępy, przeniosłem pliki strony do nowej lokalizacji FTP, zmigrowałem bazę danych MySQL i skonfigurowałem domenę z certyfikatem SSL. Wprowadziłem też po stronie serwera kilka poprawek związanych z bezpieczeństwem, pamięcią podręczną i optymalizacją grafik. Na koniec zająłem się konfiguracją zabezpieczeń samego Wordpressa, w tym uprawnieniami do katalogów, adresem URL panelu administracyjnego i zapobieganiem spamowi. Wkrótce byliśmy gotowi do startu.

Mockup image by Aleksandr Samochёrnyi on Freepik

Ostatnia misja: kampania mailingowa

Teraz strona internetowa była już w pełni sprawna i dostępna online. Nadszedł więc czas, by doczekała się jakiejś publiczności. Głównym kanałem dotarcia do nowych klientów miał być e-mail marketing. Po odrobinie poszukiwań i przedyskutowaniu ich wyników zdecydowaliśmy się użyć dwóch rozwiązań jednocześnie a dopiero w późniejszym etapie zdecydować, które z nich najlepiej odpowiada potrzebom firmy. Wybór padł na Freshmail i GetResponse. Stworzyłem graficzne szablony e-maili bazujące na wcześniejszych projektach, skonfigurowałem kampanie i wkrótce zaczęliśmy wysyłać. W świat poszła potężna porcja wiadomości. Udało się nawet przeprowadzić przy okazji kilka prostych testów A/B. W sumie wysłaliśmy ~50 tysięcy e-maili. Współczynnik otwarć wyniósł aż 39% (w porównaniu do 20% średniej dla segmentu reklamowego). Wskaźnik przeklików CTR osiągnął 3,55% (w porównaniu do typowych 2%). Całkiem przyzwoicie!

Mockup image by Aleksandr Samochёrnyi on Freepik

Podsumowanie i wnioski

Nie skłamię mówiąc, że większość opisanych prac była raczej przyjemnością niż wysiłkiem. Mimo że napotkałem pewne wyzwania, okazały się one całkiem wciągające i zapewniły mi ciekawe doświadczenie edukacyjne. Udało mi się również wypracować bardzo dobrą i zdrową relację z moim klientem, która później przerodziła się w stałą współpracę. Po czterech miesiącach pracy byliśmy w stanie ukończyć cały proces projektowania i wdrażania nie tylko strony e-commerce, ale także identyfikacji wizualnej, opakowań, mailingu i kilku drobnych formatów do druku. Co więcej - po pierwszych pięciu pełnych miesiącach obecności online mogę z dumą powiedzieć, że

współczynnik konwersji zamówień sklepu wyniósł 7%

w porównaniu do 3,6% średniej dla segmentu zdrowia i urody na całym świecie. Nie jestem ekspertem, jeśli chodzi o marketing, wszystkie te CTR-y, CVR-y i inne wskaźniki, ale wygląda to na spore osiągnięcie i jestem bardzo usatysfakcjonowany, że mogę być dużą częścią tego sukcesu.

Jeśli spodobał Ci się mój opis prac nad tym projektem i chciałbyś, abym Twoim zleceniem zajął się z taką samą uwagą, nie wahaj się i po prostu wyślij mi wiadomość.

Portfolio:

Przewijaj, klikaj, oglądaj i doceniaj!

Players Monitor

Platforma stworzona dla zawodników, skautów, trenerów i klubów piłkarskich. Jej głównym celem jest ułatwienie młodym zawodnikom zaprezentowania swoich umiejętności piłkarskich i otwarcie im drzwi do profesjonalnej kariery.

  • projekt strony internetowej
  • kodowanie front end
  • kodowanie back end

Otwórz galerię »

Image by Sergey Nivens on Adobe Stock

Fundacja Multisport

Misją fundacji jest popularyzacja zdrowia i zwiększanie dostępności aktywnego stylu życia wśród wszystkich grup społecznych.

  • współpraca przy projekcie strony internetowej
  • kodowanie front end
  • kodowanie back end

Otwórz galerię »

Photo received from the client

L'Oréal Czas działa na Twoją korzyść

Strona dla L'Oréal Paris i wiodącego polskiego portalu dla kobiet Wizaz.pl poruszająca tematykę oznak starzenia się skóry twarzy oraz pielęgnacji skóry w każdym wieku.

  • współpraca przy projekcie strony internetowej
  • kodowanie front end
  • kodowanie back end

Otwórz galerię »

Photo received from the client

RudeMaker

Magazyn internetowy z najnowszymi wiadomościami o muzyce i kulturze związanej ze światową scenę ska, rocksteady, reggae i soul.

  • projekt logo
  • projekt strony internetowej
  • kodowanie front end
  • kodowanie back end

Otwórz galerię »

Photo by Michał Antoni Budzik

Nescafé Dziewczyny 3.0

Serial internetowy opowiadający o przygodach trzech przyjaciółek prowadzących rozmowy o związkach, modzie, urodzie i seksie.

  • projekt strony internetowej
  • kodowanie front end
  • kodowanie back end

Otwórz galerię »

Photo received from the client

Herba Thea

Pierwsza w Polsce herbaciarnia z wyłącznie naturalnymi herbatami i zapachami opartymi na aromaterapii.

  • odświeżenie logo
  • projekt strony internetowej
  • projekty plakatów i materiałów do druku
  • kodowanie front end

Otwórz galerię »

Photo by Freepik

Colgate Natural Extracts

Prawdopodobnie najbardziej znana na świecie marka produktów do higieny jamy ustnej, takich jak pasty do zębów, szczoteczki do zębów, płyny do płukania jamy ustnej i nici dentystyczne.

  • projekt landing page

Otwórz galerię »

Image received from the client

Bielenda

Jedna z najbardziej znanych polskich firm produkująca najwyższej jakości kosmetyki naturalne do pielęgnacji twarzy i ciała.

  • projekt landing page

Otwórz galerię »

Image received from the client

Biotherm

Francuska luksusowa marka przyjaznych dla środowiska kosmetyków do pielęgnacji skóry.

  • projekt landing page

Otwórz galerię »

Image received from the client

Remington

Amerykańska marka produkująca maszynki do strzyżenia włosów, golarki elektryczne, depilatory i produkty do pielęgnacji włosów.

  • projekt landing page

Otwórz galerię »

Image received from the client

Nivea

Znana na całym świecie marka produktów kosmetycznych z Niemiec.

  • projekt landing page

Otwórz galerię »

Image received from the client

Eveline Cosmetics

Największy polski producent i eksporter produktów kosmetycznych obecny na 6 kontynentach, w 70 krajach świata.

  • projekt landing page

Otwórz galerię »

Image received from the client

Iwostin

Polska marka wysokiej klasy produktów opartych na kompleksowej dermoprotekcji skóry.

  • projekt landing page

Otwórz galerię »

Image received from the client

Neutrogena

Amerykańska marka specjalistycznych produktów do regeneracji i pielęgnacji skóry i ciała.

  • projekt landing page

Otwórz galerię »

Image received from the client

Wella Wellaflex

Firma specjalizująca się głównie w pielęgnacji, stylizacji i koloryzacji włosów, założona w 1880 roku w Niemczech.

  • projekt landing page

Otwórz galerię »

Image received from the client

L'Oreal Paris

Założona w 1909 roku we Francji największa na świecie firma kosmetyczną działająca na ponad 130 rynkach.

  • projekt landing page

Otwórz galerię »

Image received from the client

Maybelline New York

Amerykańska międzynarodowa firma produkująca kosmetyki, produkty do pielęgnacji skóry, perfumy i środki higieny osobistej, z siedzibą w Nowym Jorku.

  • projekt landing page

Otwórz galerię »

Image received from the client

Zobaczyłeś moje dokonania, poznałeś mój sposób pracy i wiesz, czego możesz ode mnie oczekiwać. Wygląda na to, że jesteś gotowy na ostatni krok. Napisz do mnie, zadzwoń, zaczep mnie na LinkedIn!

To bez znaczenia, czy potrzebujesz projektu plakatu lub logo, prostego landing page czy rozbudowanej witryny e-commerce.

Sprostam temu zadaniu.

Powiedz, czego potrzebujesz, a ja znajdę najlepsze rozwiązanie idealnie dostosowane do Twoich potrzeb.

Zazwyczaj odpowiadam na wszystkie wiadomości tego samego dnia. Jeśli chcesz do mnie zadzwonić, zrób to, proszę, między 10:00 a 20:00.

Możemy się też spotkać osobiście. Mieszkam w Warszawie.

Dzięki za wiadomość!

Odezwę się jak najszybciej.