Patrizia Aryton
Odzież damska premium
Kodowanie z Figmy: strona albo sklep z projektu Twojego grafika
Masz gotowy projekt od grafika albo agencji, z którą pracujesz, i szukasz kogoś, kto go zakoduje. Koduję go na WordPressie, WooCommerce, PrestaShopie albo od zera, razem z tym, czego plik nie pokazuje: powiązaniami treści, formularzami, zamówieniem i szybkością.
Czego nie widać w pliku z Figmy
Projekt pokazuje, jak strona wygląda. O tym, czy działa, decyduje warstwa, której grafik nie rysuje, a którą ktoś musi zaprojektować przy kodowaniu.
Treść wklejona na sztywno
Grafik rysuje kartę maszyny, ofertę pracy i listę partnerów jako zwykłe ekrany. Zakodowane jako zwykłe podstrony nie są ze sobą powiązane, a każda nowa pozycja oznacza telefon do programisty.
Okno z formularzem bez scenariusza
W Figmie okno z formularzem to prostokąt z polami i przyciskiem. Plik nie mówi, dokąd trafia zgłoszenie, jaki mail dostaje klient, co się dzieje przy błędnym polu i jak odsiać spam.
Zamówienie, którego platforma nie zna
Projekt zakłada kartę produktu, kroki zamówienia albo konto klienta inaczej, niż podaje PrestaShop czy WooCommerce. Wykonawca, który tego nie rozpozna przed startem, oddaje przybliżenie projektu albo przepisuje sklep w trakcie.
Ładny projekt, wolna strona
Zdjęcia w pełnej rozdzielczości, kilka krojów pisma i animacje w każdej sekcji wyglądają dobrze w pliku. Na telefonie składają się na stronę, która ładuje się kilka sekund. Nagłówki dobrane wyłącznie pod wygląd psują wyszukiwarce hierarchię strony.
Co robię z Twoim projektem
Siedem rzeczy, które rozstrzygam między plikiem z Figmy a stroną, na którą wchodzą klienci.
01 / 07
Przegląd projektu przed wyceną
Zanim podam cenę, przechodzę przez plik ekran po ekranie. Szukam miejsc, których projekt nie rozstrzyga: zachowania na szerokościach pośrednich, stanów po najechaniu i kliknięciu, list pustych i bardzo długich.
Druga część przeglądu dotyczy tego, czego nie widać: które ekrany są osobnym typem treści, co robi każdy formularz, jak przebiega zamówienie. Pytania dostajesz na piśmie razem z wyceną.
szerokości pośrednie i stany elementów
typy treści ukryte w projekcie jako zwykłe ekrany
działanie każdego formularza i okna
pytania na piśmie razem z wyceną
02 / 07
Typy treści i powiązania między nimi
Karta produktu, realizacja, oferta pracy czy wpis partnera to w panelu osobne typy treści z własnymi polami. Powiązania między nimi, na przykład produkty przypisane do realizacji, ustawiam raz, a strona układa je sama.
Serwis Comeco zakodowałem z projektu przygotowanego w Figmie przez agencję. Maszyny, rekrutacja, aktualności i partnerzy są w nim osobnymi typami treści, a od początku kodowania do uruchomienia strony minął niecały miesiąc.
osobny typ treści na każdy rodzaj wpisu
pola w panelu ułożone jak w projekcie
powiązania ustawiane raz, bez ręcznego przepisywania
każdy typ treści uzupełnia ktoś inny w firmie
03 / 07
Formularz, który robi to, co ma robić
Okno z formularzem zapytania, zapis na termin, wycena z załącznikiem. Przed kodowaniem ustalam z Tobą, dokąd trafia każde zgłoszenie, jakie potwierdzenie dostaje klient i co widzi, gdy pomyli się w polu.
Formularz sprawdzam wysyłką z żywej strony, bo dopiero wtedy wiadomo, czy wiadomość dochodzi i nie ląduje w spamie.
adresat zgłoszenia ustalony przed kodowaniem
potwierdzenie dla klienta i komunikaty przy błędach
ochrona przed spamem
próbna wysyłka z żywej strony
04 / 07
Karta produktu, koszyk i zamówienie z projektu
Projekt sklepu rzadko zgadza się z tym, co PrestaShop czy WooCommerce podają w standardzie. W sklepie Patrizia Aryton, zakodowanym z Figmy od działu marki, najwięcej pracy wymagały karta produktu, proces zamówienia i konto klienta.
W sklepie Drzwi Portal karta modelu prowadzi przez wybór koloru, wymiaru, strony otwierania i okuć, a z konfiguratora wychodzi konkretny towar w koszyku. Drzwi z montażem mają osobną ścieżkę zamówienia, z inną ceną i przebiegiem.
karta produktu i konto klienta według projektu
kroki zamówienia inne niż w standardzie platformy
konfigurator spięty z katalogiem i koszykiem
pełne zamówienie przetestowane przed oddaniem
05 / 07
WordPress, WooCommerce, PrestaShop albo kod od zera
Platformę dobieram do projektu i do tego, kto będzie potem zmieniał treść. Strona firmowa z kilkoma typami treści zwykle staje na WordPressie, sklep z dużym katalogiem na PrestaShopie, sklep przy istniejącej stronie na WooCommerce.
Strona, której treść rzadko się zmienia, może obyć się bez systemu zarządzania treścią. Kod pisany od zera nie ma wtyczek do aktualizacji i nie ładuje niczego, czego strona nie używa.
Porównanie WordPressa, kreatora i kodu pisanego od zera →WordPress dla stron z treścią zmienianą co tydzień
WooCommerce przy sklepie obok strony firmowej
PrestaShop przy dużym katalogu i sprzedaży za granicę
kod od zera, gdy liczy się szybkość i niski koszt utrzymania
06 / 07
Szybkość i SEO ustawione w kodzie
Wydajność mierzę w PageSpeed Insights na stronie, którą oddaję. Zdjęcia z projektu idą w lżejszych formatach z podanymi wymiarami, fonty wczytują się bez skoku tekstu, a animacje nie zasłaniają treści przy wejściu.
Hierarchię nagłówków układam według treści, a wygląd każdego z nich biorę z projektu. Do tego tytuły, opisy, dane strukturalne i mapa strony.
pomiar PageSpeed na oddawanej stronie
obrazy w lżejszych formatach z wymiarami
jeden h1 i hierarchia nagłówków według treści
tytuły, opisy, dane strukturalne i mapa strony
07 / 07
Praca z Twoim grafikiem
Pytania do projektu idą do Ciebie albo prosto do grafika, jeśli tak wolisz. Gdy element projektu zderza się z tym, jak działa platforma, pokazuję to przed kodowaniem i proponuję rozwiązanie. Decyzja należy do Ciebie i Twojego grafika.
Jeśli prowadzisz agencję i szukasz podwykonawcy do projektów swoich klientów, zasady współpracy opisuję na osobnej stronie.
Współpraca z agencjami →pytania do Ciebie albo prosto do grafika
rozbieżności z platformą pokazane przed kodowaniem
decyzja o wyglądzie zostaje po Twojej stronie
Co dostajesz poza wyglądem
Wygląd zostaje taki, jak go zaprojektowano. Dochodzi do niego to, co sprawia, że strona działa na co dzień.
Treść, którą uzupełniają Twoi ludzie
W serwisie Comeco maszyny, ogłoszenia o pracę, aktualności i partnerzy są osobnymi typami treści. Każdy uzupełnia ktoś inny w zakładzie, bez kontaktu ze mną.
Konfigurator, z którego wychodzi konkretny towar
W sklepie Drzwi Portal wybory klienta zamieniają się w pozycję w koszyku z właściwą ceną i wariantem. Skonfigurowane drzwi można poprawić już w koszyku, bez przechodzenia przez wybory od nowa.
Zamówienie wierne projektowi
W sklepie Patrizia Aryton karta produktu, zamówienie i konto klienta odbiegają od standardu PrestaShopa. Sporne miejsca przeszedłem z grafikiem marki i zostaliśmy przy wersji, która trzyma zamysł projektu i daje się utrzymać.
Lżejsza strona przy tym samym wyglądzie
W sklepie Drzwi Portal pliki wtyczki konfiguratora, około 200 kB, ładują się tylko na karcie produktu, w koszyku i przy zamówieniu. Grafiki motywu po przejściu na WebP zeszły z 1,3 MB do 160 kB.
Typy treści, zamówienie i konfigurator w praktyce
Sklep Patrizia Aryton zakodowałem z Figmy od działu marki, serwis Comeco z Figmy od agencji. W sklepie Drzwi Portal najwięcej pracy kosztowało połączenie konfiguratora z katalogiem sklepu.
Ile kosztuje kodowanie z projektu
Cenę liczę od tego, co dzieje się pod projektem: ile jest typów treści, co robią formularze, jak przebiega zamówienie. Sama liczba ekranów w pliku mówi o cenie niewiele.
Strona firmowa
Firma z kilkoma usługami i projektem strony od swojego grafika.
od 5000 złnetto za realizację
Projekt zakodowany na WordPressie albo od zera, z osobną podstroną na każdą usługę i panelem do zmiany treści. Formularz kontaktowy ma ustalonego adresata i potwierdzenie dla klienta.
- kodowanie wszystkich ekranów z projektu
- stany pośrednie dopowiedziane przed startem
- panel do samodzielnej edycji treści
- formularz z adresatem i potwierdzeniem
- pomiar wydajności przy oddaniu
Serwis z powiązaną treścią
Firma z produktami, realizacjami, ofertami pracy albo strefą klienta.
od 8000 złnetto za realizację
Kilka typów treści powiązanych ze sobą, okna z formularzami wykonującymi konkretne działania, logowanie albo druga wersja językowa. W serwisie Comeco maszyny, ogłoszenia o pracę, aktualności i partnerzy są osobnymi typami treści, a każdy z nich uzupełnia ktoś inny w zakładzie.
- osobne typy treści z polami z projektu
- powiązania między typami treści
- formularze i okna z ustalonym działaniem
- druga wersja językowa albo strefa logowania
- integracja z systemem, którego używasz
Sklep z projektu
Firma sprzedająca na WooCommerce albo PrestaShopie, z własną kartą produktu, zamówieniem albo konfiguratorem.
od 15 000 złnetto za realizację
Motyw sklepu zakodowany z projektu, razem z widokami, których platforma nie podaje w standardzie: kartą produktu, krokami zamówienia, kontem klienta. Przy konfiguratorze dochodzi połączenie wyborów klienta z konkretnym towarem w koszyku.
- motyw sklepu zakodowany z projektu
- karta produktu, zamówienie i konto według projektu
- konfigurator spięty z katalogiem i koszykiem
- płatności i firmy kurierskie
- pełne zamówienie przetestowane przed oddaniem
Ceny netto, od których zaczyna się wycena, bez projektu graficznego, bo ten masz już od swojego grafika. Ostateczna kwota zależy od liczby typów treści, formularzy i kroków zamówienia, które trzeba zakodować. Konfigurator i część integracji stoją na płatnych modułach, których licencja jest osobną pozycją po Twojej stronie, zwykle 500–1500 zł jednorazowo. Mówię o tym przy wycenie, zanim cokolwiek podpiszesz. Prace poza ustalonym zakresem rozliczam po 200 zł netto za godzinę.
Pokaż projekt, dostaniesz wycenę
Zostaw namiary i link do Figmy. Dopisz platformę, jeśli jest już wybrana, i termin. Przejrzę plik przed rozmową, więc zaczniemy od pytań do konkretnych ekranów.
Odpowiadam w ciągu dnia roboczego. Wycena nic nie kosztuje i do niczego nie zobowiązuje.
Zanim napiszesz
Odpowiedzi na pytania, które słyszę najczęściej przy pierwszej rozmowie. Jeśli Twojego tu nie ma, napisz — odpowiadam tym samym językiem.
Wystarczy link do pliku z dostępem do podglądu, razem z ekranami na telefon, jeśli projekt je ma. Do tego kilka zdań o tym, co strona ma robić: dokąd trafiają zgłoszenia, co klient może zamówić i kto będzie zmieniał treść.
Stany pośrednie dopowiadam sam i pokazuję je przed kodowaniem: co się zwija, co się chowa, a co zmienia kolejność. Jeśli wolisz, żeby rozstrzygnął je Twój grafik, dostaje ode mnie listę takich miejsc na piśmie.
Tak, odstępy, kroje i kolory biorę z pliku. Gdy element projektu zderza się z tym, jak działa platforma, pokazuję to przed kodowaniem i proponuję wersję, która zachowuje zamysł. Tak było w sklepie Patrizia Aryton, gdzie sporne miejsca przeszedłem z grafikiem marki.
Ja, na podstawie reszty projektu: kolorów, krojów i elementów, które już są w pliku. Widoki spoza projektu wypisuję w wycenie osobno, więc wiesz, co dopowiadam sam, a co może jeszcze narysować Twój grafik.
Projekt w Figmie nie zależy od platformy, więc wybór zapada po pytaniach o treść i sprzedaż. Strona z kilkoma typami treści zwykle staje na WordPressie, sklep z dużym katalogiem na PrestaShopie, a strona, która rzadko się zmienia, może być kodem pisanym od zera.
Serwis Comeco powstał w niecały miesiąc od początku kodowania do uruchomienia, przy projekcie dostarczonym w Figmie i rozpisanej strukturze treści. Najdłużej zwykle trwa ustalanie, co ma się na stronie znaleźć, dlatego termin podaję po przeglądzie pliku.
Zobacz też
Strony internetowe — Ełk i zdalnie w całej Polsce
Projektuję i koduję strony firmowe od 2008 roku. Bez kupionego szablonu, w którym trzeba mieścić swoją treść, i bez osobnej wtyczki na każdą funkcję.
Sklepy internetowe — wdrożenie, migracja, rozwój
Stawiam sklepy i rozwijam te, które już sprzedają. Od wyboru platformy, przez integracje płatności i wysyłki, po wydajność przy kilku tysiącach produktów.
Projektowanie graficzne stron, sklepów i identyfikacji
Projektuję to, co potem sam koduję. Dzięki temu projekt nie zawiera rozwiązań, które ładnie wyglądają w pliku graficznym i rozjeżdżają się w przeglądarce.
Koduję projekty agencji pod ich marką
Dostajesz gotowy projekt z Figmy albo makietę od klienta, ja koduję WordPressa albo PrestaShopa. Bez kontaktu z Twoim klientem, bez mojego nazwiska w stopce, stała cena, zanim wyślesz ofertę.