fbpx Case study Jak czterokrotnie zwiększyliśmy ruch na wizytówce? 🚀
logo white logo unia
Dofinanowanie ze środków Europejskiego Funduszu Rozwoju Regionalnego

Jak przygotować projekt graficzny dla developerów?

Ostatnim etapem projektowania stron i sklepów internetowych jest przygotowanie plików do kodowania. Aby nie utrudniać pracy developerom, a całe wdrożenie przebiegło sprawnie, należy trzymać się kilku zasad. Oto punkty, które pomogą Ci przygotować projekt graficzny strony internetowej dla developerów:

Generowanie linku

Na co dzień korzystam głównie z Adobe XD, aplikacji która umożliwia wygenerowanie linku w wersji dla developerów. Jest to znacznie wygodniejsze rozwiązanie niż przekazywanie pliku, ponieważ gwarantuje, że to developer zobaczy dokładnie ten sam projekt graficzny co my. W przypadku pliku może się zdarzyć, że niepoprawnie załadują się fonty lub ktoś przypadkiem poprzesuwa elementy w projekcie. Poza tym trzeba posiadać samego XD-ka, a w przypadku linku wystarczy dowolna przeglądarka.

Jesteś zainteresowany profesjonalnym projektem graficznym?

wyślij zapytanie agencja marketingowa kraków
Jeżeli tak, to wyślij zapytanie, a jeden z naszych specjalistów porozmawia z tobą i w trakcie krótkiej rozmowy sprawdzi, czy jesteśmy w stanie Ci pomóc.
Wyślij zapytanie

Eksport grafik

Wraz z pojawieniem się aplikacji przeznaczonych stricte do projektowania interfejsów, takich jak Adobe XD, Figma czy Sketch, skończył się problem z cięciem grafik. W przypadku produktu Adobe wystarczy oznaczyć odpowiednie elementy do eksportu, dzięki czemu programista będzie mógł łatwo pobrać wszystkie potrzebne grafiki. W przypadku logo, ikon czy innych grafik wektorowych należy pamiętać o tym, by można je było wyeksportować w formacie .svg.

Stany elementów

Dobrym pomysłem będzie przygotowanie w projekcie osobnego artboardu dla stanów formularzy, przycisków, list rozwijanych itd. To bardzo ułatwi wdrożenie projektu graficznego zgodnie z wytycznymi.
Warto przewidzieć wszystkie możliwe zachowania poszczególnych elementów – w przypadku formularzy pamiętajmy o osobnych wersjach po najechaniu kursorem, po kliknięciu, podczas wpisywania tekstu oraz błędnie wypełnionego pola.

 

projekt graficzny strony internetowej

Wersje mobilne

Nie zapomnij również, że przygotowane muszą być widoki na urządzenia mobilne, które stanowią dzisiaj jedno z podstawowych urządzeń do przeglądania internetu. Widok na szerokości ekranu rzędu 375px jest właściwie niezbędny, w przypadku bardzo skomplikowanych widoków można pomyśleć również o szerokości tabletowej w okolicach 1000px. Zwróć uwagę, by przygotować do eksportu grafiki na wersje mobilne tak, aby na niższych rozdzielczościach nie ładowały się desktopowe wersje grafik.

Nie kombinuj

Pamiętaj, że dobra strona powinna ładować się szybko, a informacje na niej powinny być łatwe do odnalezienia. Zakodować można wszystko, ale zastanów się czy to duże zdjęcie w tle koniecznie powinno znaleźć się w Twoim projekcie graficznym. Podczas pracy miej na uwadze, by nie utrudniać pracy developerom – myśl i przewiduj, które elementy na stronie mogą być trudne do zakodowania, przemyśl czy dany element na pewno ma sens i czy nie można tego zrobić prościej. Znajomość podstaw HTML i CSS zdecydowanie pomoże ci w lepszym zrozumieniu problemów z jakimi muszą się zmagać programiści, którzy otrzymują przekombinowany projekt graficzny strony lub sklepu internetowego. Powyższy wpis powstał w oparciu o proces, według którego działa nasza agencja interaktywna JustIdea. Mama nadzieję, że sprawdzi się także w Twoim przypadku1!

Dawid Kabała

Autor: Dawid Kabała

Team Leader Creative Designer

Spotkajmy się na żywo:

Wszystkie wydarzenia
27.09.2024

Konferencja E-wolucja Rzeszów

19.09.2024

Z buta w ecommerce

13.09.2024

Konferencja E-wolucja Gdańsk

6.06.2024

Dyrektor Ecommerce Roku

29.05.2024

SemKRK

26.04.2024

Konferencja E-wolucja Lublin

22.03.2024

Konferencja E-wolucja Łódź

20.03.2024

ProstoDoKasy Fly Offline

15.03.2024

eMarketing Event

14.03.2024

Ecommerce.pl Event 2.0

08.03.2024

Konferencja E-wolucja Kraków

13-16.11 2023

Web Summit 2023

30-31.10.2023

Madrid Tech Show 2023

27.10.2023

24. Targi eHandlu

17.10.2023

Ecommerce.pl Event 1.0

07.09.2023

PrestaShop Connect

10-19.03 2023

SXSW 2023

18-20.10 2022

Techcrunch 2022

30.05-02.06 2022

Hannover Messe 2022

European Union
Ta strona wykorzystuje pliki Cookies do poprawnego działania. Polityka Cookies