Blog

Jak przygotować layout dla kodera?

Joanna
Autor: Joanna, Graphic Designer, UX Designer

Wspólnie z naszym teamem zebraliśmy wytyczne pozwalające przygotować projekt stron i aplikacji webowych na potrzeby zakodowania ich z założeniem RWD. Skupiliśmy się głównie na przygotowaniu projektów w programach Adobe Photoshop i Adobe XD, nie zapominając o istnieniu innych, takich jak Figma, Sketch czy Zeplin.

Web design i web development to dwa uzupełniające się obszary, nad którymi pracują osobne zespoły. Przygotowaliśmy artykuł, który może pomóc w komunikacji między tymi dwoma światami.

Pliki PSD / XD / Sketch

Jeśli projektujemy w Photoshopie powinniśmy dostarczyć pliki psd, osobne dla każdej z podstron. Trzeba zadbać o to, by nie było w nich zbędnych warstw, czy plików linkujących do zewnętrznych bibliotek. Struktura warstw w pliku powinna być przejrzysta i opisana, żeby uniknąć nieporozumień i ułatwić pracę programiście.

Kolejność warstw w projekcie

Natomiast projekt przygotowany w XD powinien być podesłany jako link dostępny z funkcją Handoff Design Specs. Dzięki temu programista z poziomu przeglądarki może odczytać parametry elementów do zakodowania, czy pobrać assety. Aby to umożliwić wybierz: Share for development > Include Assets for Download. Pamiętaj, aby przed eksportem rozgrupować elementy, które nie stanowią jakiejś całości (np. nie są ikonką zbudowaną z kilku kształtów).

W przypadku projektów tworzonych m.in. w Sketchu (ale i w dwóch wyżej opisanych programach) warto skorzystać z pluginu Zeplin. Usprawnia komunikację pomiędzy designerem i programistą i umożliwia eksport assetów.

Wersje RWD

Najlepiej jeśli proces projektowania odbywa się w oparciu o zasadę Mobile First – co pozwala na zachowanie spójności dla wersji mobile i desktop. Warto przygotować widoki dla rozmiarów: 320 px, 768 px, 1280 px oraz 1920 px, pamiętając by poszczególne projekty dla breakpointów stanowiły logiczną całość.

Fonty

Projektant powinien dostarczyć listę użytych fontów i ich wielkości (h1/h2/itp). Rozmiary tekstu w całym projekcie w każdym widoku (mobile, tablet, desktop) powinny być konsekwentnie stosowane.

Hierarchia nagłówków


W przypadku mniej standardowych fontów konieczne jest dostarczenie paczki z fontem. Jednak zachęcamy do korzystania z Google Fonts. Biblioteka daje szeroki wybór fontów oraz możliwość uprzedniego sprawdzenia wyglądu oraz dostępności polskich znaków. Znajdujące się tam fonty posiadają licencję open source, dlatego też mogą być używane zarówno w celach prywatnych jak i komercyjnych. Jeżeli korzystamy z fontów Adobe trzeba zakupić jednorazową licencję na każdy krój (regular, italic, bold itd) lub używając Adobe Fonts konieczne jest posiadanie subskrypcji Creative Cloud z projektem z którego będą pobierane pliki.

Odstępy/odległości

Zachowaj jednolite odstępy między elementami (padding, margin). Oba te elementy, jak i również wszystkie wysokości (i jeśli to możliwe też szerokości) elementów powinny być skorelowane z wysokością linii tekstu (np. 1.5 * wysokość linii).

Kolory

Aby zachować spójność projektu warto dostarczyć programiście paletę barwną z listą wykorzystanych na stronie kolorów.

Paleta kolorów

Na takiej liście powinny się znaleźć także podglądy aktywnego stanu dla klikalnych elementów, na przykładzie buttonów:

Komponenty wizualne interfejsu dla różnych stanów (normalny, podświetlony, wciśnięty) przycisku, inputa, checkboxa, dropdowna

Ikony

Projektując stronę często tworzymy ikony lub wektorowe ilustracje. Jeżeli decydujemy się na projekt w Photoshopie pamiętajmy by nie było w nim elementów linkujących do zewnętrznej biblioteki (np. Illustratora), które nie są dostępne wprost z projektu. W takim przypadku najlepiej gdyby elementy wektorowe w plikach były kształtami z Photoshopa lub były dostarczone w osobnym katalogu .zip jako pliki svg. Pojedynczy plik svg powinien być czysty i zawierać tylko tę właściwą wektorową ikonę.

Grafiki rastrowe/zdjęcia

Zdjęcia lub grafiki rastrowe również powinny być przesłane w osobnym katalogu z opisem. Unikaj przypadkowych nazw plików, nie używaj polskich znaków i znaków specjalnych, stosuj zwięzłe opisy, korzystaj z pauz. I tak odpowiednia nazwa pliku ze zdjęciem powinna brzmieć fotografia-wawel.jpg, a nie uoiałflklal.jpg. Warto pamiętać by dostarczyć pliki w wysokiej rozdzielczości, najlepiej by przed wysłaniem zostały przepuszczone przez program optymalizujący. Jeżeli korzystamy z Maca możemy skorzystać z darmowego narzędzia, jakim jest ImageOptim dostępny pod linkiem: www.imageoptim.com/pl. Na stronie www.pngquant.org znajdziecie wersję dla Windows’a czy wtyczkę Photoshopa. Tradycyjne zdjęcia zapisuj w formacie jpg, natomiast ilustracje, infografiki w formacie png.

Animacje/interakcje

Jeśli mamy osobny plik z hoverami/interakcjami to dobrze jest zaznaczyć gdzie, który element występuje. Mamy wymyślony lub wybrany efekt hovera? Żeby uzyskać jak najbardziej zbliżoną animację warto szczegółowo opisać wszelkie animacje interakcji i ruchomych elementów. Można również podesłać link do przykładu. W przypadku bardziej skomplikowanych animacji – przydatne dla programisty byłoby rozpisanie całego toku animacji, np. animacja trwa 2 sekundy, zaczyna się ruchem jednego elementu a w 0.3 sekundzie dochodzi ruch drugiego elementu.

Dodatkowe elementy layoutu

Oprócz projektów podstron, które znajdą się na pasku menu projektowanej przez Was strony warto pamiętać o kilku ważnych elementach do zaprojektowania.

Przykładowa strona tekstowa

Zdarza się, że nie zostaje przewidziana w projekcie jako jedna z głównych stron, jednak jest istotna ze względu na elementy w niej występujące, które w przyszłości mogą zostać wykorzystane w edycji tekstu w CMS. Właściwie przygotowana strona tekstowa powinna się składać z tekstu uwzględniającego w treści: nagłówki, widok cytatu, listy numerycznej, listy wypunktowanej, wygląd linku czy podpisu do zdjęcia.

Podstrona błędu 404

Jest potrzebna, choć lepiej, by użytkownik jej nigdy nie zobaczył 😉. Jednak są momenty, na które nie mamy wpływu i np. przez źle wpisany adres url oczom użytkownika ukazuje się strona błędu. Warto zadbać, by wizualnie była spójna z resztą podstron.

Pasek cookies

Czyli pasek z komunikatem o ciasteczkach widoczny na stronach serwisu.

Komunikaty i walidacja

Dotyczy to przede wszystkim formularzy i wyszukiwarek. Warto przygotować treść i styl komunikatów o błędach/sukcesach w formularzu oraz widoki aktywnego pola.

Dodatkowe informacje dla koderów

Jeżeli zależy nam na tym, by konkretne elementy strony miały sztywne wymiary (np. zadaną wysokość) warto to podkreślić przekazując informacje programiście. Precyzyjny opis lub link do przykładu z innej strony przyda się również w przypadku, kiedy nie wszystko jest możliwe do pokazania w pliku graficznym.

Favicon

Aby zaprogramowana strona odróżniała się wśród innych zakładek na pasku przeglądarki warto przygotować favicon. Można to zrobić za pomocą narzędzia online: www.realfavicongenerator.net, gdzie po uploadzie grafiki w formacie .png / .jpg / .svg generuje się nam paczka z ikonami i kodem HTML, którą należy dołączyć do materiałów dla programisty.

Mamy nadzieję, że wiedza zawarta w tym artykule będzie dla Ciebie pomocna, a jeśli miałbyś jakieś uwagi, to zapraszamy do komentowania na naszym Facebookowym fanpage’u :)

Podobał Ci się ten artykuł? Udostępnij go!

Masz pomysł? Odezwiemy się do Ciebie.

Chętnie porozmawiamy o Twoim projekcie.


    Dbamy o ochronę Twoich danych. Regulamin i polityka prywatności.

    Skontaktuj się z nami

    Marcin Stawowiak

    Marcin Stawowiak

    Co-founder, Executive Manager

    Szukasz doświadczonego zespołu programistycznego?
    Porozmawiajmy o konkretach.

      Wypełnij poniższy formularz




      • max. 2500 znaków


      Smultron Software Lab


      ul. Sławkowska 12
      31-014 Kraków

      +48 791 991 797
      hello@smultron.pl

      NIP: 6762482785