--- tytul: "Jak przygotować projekt graficzny dla developerów?" opis: "Projekt graficzny dla developerów: jak przygotować makiety, wyeksportować grafiki i opisać wersje mobilne. Poznaj zasady dobrej współpracy z deweloperem." adres: https://justidea.agency/pl/artykul/jak-przygotowac-projekt-graficzny-do-kodowania/ serwis: "JustIdea Agency" jezyk: pl zrodlo: automatyczny odpowiednik strony HTML, generowany przy każdym buildzie --- Artykuł # Jak przygotować projekt graficzny dla developerów? Projekt graficzny dla developerów: jak przygotować makiety, wyeksportować grafiki i opisać wersje mobilne. Poznaj zasady dobrej współpracy z deweloperem. [![Dawid Kabała](https://justidea.agency/obrazy/dawidk-73500cf2.webp) Dawid Kabała Team Leader Creative Designer](https://justidea.agency/pl/autor/dawid-kabala/) 28 grudnia 2021 2 min czytania 5 sekcji ![Jak przygotować projekt graficzny dla developerów?](https://justidea.agency/_astro/szablon-8-19-1-64b96e2d.BcNNjFkp.webp) Design Zaufali nam ![LPP](https://justidea.agency/obrazy/lpp-logo-2-b64d3a02.svg) ![House](https://justidea.agency/obrazy/logo-house-c706eeae.svg) ![Toyota](https://justidea.agency/obrazy/toyota-logo-pasek.svg) ![Fame MMA](https://justidea.agency/obrazy/fame-ffb4e0d0.webp) ![Surf Inc.](https://justidea.agency/obrazy/surfinc-logo-pasek.webp) ![LyoFood](https://justidea.agency/obrazy/lyo-cb899d46.webp) ![ExpertSender](https://justidea.agency/obrazy/expert-ca00548d.webp) ![Purinova](https://justidea.agency/obrazy/purinova-217da6ab.webp) ![Mennica Gdańska](https://justidea.agency/obrazy/mennica-98166c12.webp) ![Group IB](https://justidea.agency/obrazy/group-ib-b711171e.webp) ![Smart Kids Planet](https://justidea.agency/obrazy/smart-kids-151311c5.webp) ![SuperSonic](https://justidea.agency/obrazy/supersonic-a35404fe.webp) ![Wierzynek](https://justidea.agency/obrazy/wierzynek-1-d027e7cc.webp) ![RegoBis](https://justidea.agency/obrazy/regobis-a8b446e3.webp) **W tym artykule** 1. 01Generowanie linku 2. 02Eksport grafik 3. 03Stany elementów 4. 04Wersje mobilne 5. 05Nie kombinuj Udostępnij Ostatnim etapem [projektowania stron](https://justidea.agency/pl/uslugi/agencja-kreatywna/projektowanie-stron-i-sklepow-internetowych/) 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**](https://justidea.agency/pl/uslugi/sklepy-internetowe/) 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?** ## 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](https://justidea.agency/_astro/stany-elementow-1024x582-7b1b306d.Hov-0LXn_1QYYz6.webp) 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](https://justidea.agency/pl/uslugi/sklepy-internetowe/). Powyższy wpis powstał w oparciu o proces, według którego działa nasza [agencja interaktywna](https://justidea.agency/pl/) JustIdea. Mama nadzieję, że sprawdzi się także w Twoim przypadku1! ![Dawid Kabała](https://justidea.agency/obrazy/dawidk-73500cf2.webp) Autor tekstu [Dawid Kabała](https://justidea.agency/pl/autor/dawid-kabala/) Team Leader Creative Designer Masz pytanie do tego materiału? Napisz do nas. Chcesz to u siebie ## Zamieńmy tę wiedzę na wynik w Twoim sklepie 30 minut o Twoich liczbach. Rozmowę zaczyna osoba od sprzedaży, a specjalistę od kanału dopraszamy wtedy, gdy schodzimy na szczegóły. Rozmowa jest bezpłatna. Umów rozmowę o Twoich liczbach [Zobacz, jak projektujemy sklepy](https://justidea.agency/pl/uslugi/agencja-kreatywna/projektowanie-stron-i-sklepow-internetowych/) Opinie klientów ## Oceny agencji, która prowadzi ten blog Wystawili je klienci po współpracy z nami, każdą przeczytasz w serwisie, w którym stoi. Dotyczą pracy całej agencji, nie tego jednego artykułu. 4,96 / 5 średnia ważona z 224 opinii w trzech serwisach [Przeczytaj opinie](https://justidea.agency/pl/justidea-opinie/) [![Google](https://justidea.agency/assets/logo-google.svg) 4,97 / 5 156 opinii wystawionych w profilu firmy](https://www.google.com/search?q=JustIdea+Agency+Krak%C3%B3w+opinie)[![Facebook](https://justidea.agency/assets/logo-facebook.svg) 5,0 / 5 33 opinie wystawione na profilu marki](https://www.facebook.com/justidea.agency/reviews)[![Clutch](https://justidea.agency/assets/logo-clutch.svg) 4,9 / 5 35 recenzji B2B, każda weryfikowana rozmową z klientem](https://clutch.co/profile/justidea-agency) Statusy nadane przez platformy: PrestaShop Expert ★★★, Google Premier Partner 2025, Meta Business Partner, Microsoft Advertising Elite Partner 2025. [Wszystkie certyfikaty i nagrody](https://justidea.agency/pl/nasze-osiagniecia/) Kontakt ## Rozmowa o Twoich liczbach: 30 minut Rozmowę prowadzi new business specialist. Gdy przechodzimy do szczegółów konta, dołącza specjalista od danego kanału. Odpowiadamy w jeden dzień roboczy. Szybki przegląd pomiaru i kampaniiTrzy priorytety na najbliższy kwartałPodsumowanie na piśmie, zostaje u Ciebie Przed spotkaniem przeglądamy Twoją stronę, widoczność i to, co widać z zewnątrz w kampaniach. Pytania „czym się zajmujecie” nie będzie. [Nasza ocena: 4,96 na 5, 224 opinii w Google, na Facebooku i Clutchu](https://justidea.agency/pl/justidea-opinie/) Co się stanie po wysłaniu 01 w 1 dzień roboczy ### Odpowiadamy na maila Odpisuje ten sam new business specialist, który poprowadzi rozmowę. Bez formularza kwalifikacyjnego i bez telefonu z nieznanego numeru. 02 w tym tygodniu ### Rozmowa, 30 minut Przechodzimy przez Twoje liczby i pytania. Jeśli w trakcie okaże się, że nie jesteśmy dobrym wyborem, powiemy to od razu.