{"id":506,"date":"2020-10-01T12:17:48","date_gmt":"2020-10-01T12:17:48","guid":{"rendered":"https:\/\/smultron.software\/jak-przygotowac-layout-dla-kodera\/"},"modified":"2024-07-08T09:29:44","modified_gmt":"2024-07-08T09:29:44","slug":"jak-przygotowac-layout-dla-kodera","status":"publish","type":"post","link":"https:\/\/smultron.software\/pl\/blog\/jak-przygotowac-layout-dla-kodera","title":{"rendered":"Jak przygotowa\u0107 layout dla kodera?"},"content":{"rendered":"\n

Wsp\u00f3lnie z naszym teamem zebrali\u015bmy wytyczne pozwalaj\u0105ce przygotowa\u0107 projekt stron i aplikacji webowych na potrzeby zakodowania ich z za\u0142o\u017ceniem RWD. Skupili\u015bmy si\u0119 g\u0142\u00f3wnie na przygotowaniu projekt\u00f3w w programach Adobe Photoshop i Adobe XD, nie zapominaj\u0105c o istnieniu innych, takich jak Figma, Sketch czy Zeplin.<\/p>\n\n\n\n

Web design i web development to dwa uzupe\u0142niaj\u0105ce si\u0119 obszary, nad kt\u00f3rymi pracuj\u0105 osobne zespo\u0142y. Przygotowali\u015bmy artyku\u0142, kt\u00f3ry mo\u017ce pom\u00f3c w komunikacji mi\u0119dzy tymi dwoma \u015bwiatami.<\/p>\n\n\n\n

Pliki PSD \/ XD \/ Sketch<\/h2>\n\n\n\n

Je\u015bli projektujemy w Photoshopie<\/strong> powinni\u015bmy dostarczy\u0107 pliki psd, osobne dla ka\u017cdej z podstron. Trzeba zadba\u0107 o to, by nie by\u0142o w nich zb\u0119dnych warstw, czy plik\u00f3w linkuj\u0105cych do zewn\u0119trznych bibliotek. Struktura warstw w pliku powinna by\u0107 przejrzysta i opisana, \u017ceby unikn\u0105\u0107 nieporozumie\u0144 i u\u0142atwi\u0107 prac\u0119 programi\u015bcie.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Natomiast projekt przygotowany w XD powinien by\u0107 podes\u0142any jako link dost\u0119pny z funkcj\u0105 Handoff Design Specs. Dzi\u0119ki temu programista z poziomu przegl\u0105darki mo\u017ce odczyta\u0107 parametry element\u00f3w do zakodowania, czy pobra\u0107 assety. Aby to umo\u017cliwi\u0107 wybierz: Share for development > Include Assets for Download. Pami\u0119taj, aby przed eksportem rozgrupowa\u0107 elementy, kt\u00f3re nie stanowi\u0105 jakiej\u015b ca\u0142o\u015bci (np. nie s\u0105 ikonk\u0105 zbudowan\u0105 z kilku kszta\u0142t\u00f3w).<\/p>\n\n\n\n

W przypadku projekt\u00f3w tworzonych m.in. w Sketchu (ale i w dw\u00f3ch wy\u017cej opisanych programach) warto skorzysta\u0107 z pluginu Zeplin. Usprawnia komunikacj\u0119 pomi\u0119dzy designerem i programist\u0105 i umo\u017cliwia eksport asset\u00f3w.<\/p>\n\n\n\n

Wersje RWD<\/h2>\n\n\n\n

Najlepiej je\u015bli proces projektowania odbywa si\u0119 w oparciu o zasad\u0119 Mobile First<\/strong> \u2013 co pozwala na zachowanie sp\u00f3jno\u015bci dla wersji mobile i desktop. Warto przygotowa\u0107 widoki dla rozmiar\u00f3w: 320 px, 768 px, 1280 px oraz 1920 px<\/strong>, pami\u0119taj\u0105c by poszczeg\u00f3lne projekty dla breakpoint\u00f3w stanowi\u0142y logiczn\u0105 ca\u0142o\u015b\u0107.<\/p>\n\n\n\n

Fonty<\/h2>\n\n\n\n

Projektant powinien dostarczy\u0107 list\u0119 u\u017cytych font\u00f3w i ich wielko\u015bci (h1\/h2\/itp). Rozmiary tekstu w ca\u0142ym projekcie w ka\u017cdym widoku (mobile, tablet, desktop) powinny by\u0107 konsekwentnie stosowane.<\/p>\n\n\n

\n
\"Hierarchia<\/figure>\n<\/div>\n\n\n


W przypadku mniej standardowych font\u00f3w konieczne jest dostarczenie paczki z fontem. Jednak zach\u0119camy do korzystania z Google Fonts<\/strong>. Biblioteka daje szeroki wyb\u00f3r font\u00f3w oraz mo\u017cliwo\u015b\u0107 uprzedniego sprawdzenia wygl\u0105du oraz dost\u0119pno\u015bci polskich znak\u00f3w. Znajduj\u0105ce si\u0119 tam fonty posiadaj\u0105 licencj\u0119 open source, dlatego te\u017c mog\u0105 by\u0107 u\u017cywane zar\u00f3wno w celach prywatnych jak i komercyjnych. Je\u017celi korzystamy z font\u00f3w Adobe<\/strong> trzeba zakupi\u0107 jednorazow\u0105 licencj\u0119 na ka\u017cdy kr\u00f3j (regular, italic, bold itd) lub u\u017cywaj\u0105c Adobe Fonts konieczne jest posiadanie subskrypcji Creative Cloud<\/strong> z projektem z kt\u00f3rego b\u0119d\u0105 pobierane pliki.<\/p>\n\n\n\n

Odst\u0119py\/odleg\u0142o\u015bci<\/h2>\n\n\n\n

Zachowaj jednolite odst\u0119py<\/strong> mi\u0119dzy elementami (padding, margin). Oba te elementy, jak i r\u00f3wnie\u017c wszystkie wysoko\u015bci (i je\u015bli to mo\u017cliwe te\u017c szeroko\u015bci) element\u00f3w powinny by\u0107 skorelowane z wysoko\u015bci\u0105 linii tekstu (np. 1.5 * wysoko\u015b\u0107 linii).<\/p>\n\n\n\n

\n\t
\n\t\t
\n\t\t\tSzukasz do\u015bwiadczonego zespo\u0142u programistycznego? Porozmawiajmy o konkretach.\t\t<\/div>\n\t\t
\n\t\t\t\n
\n\t
\n\t\t\t\t\t\n\t\t\t<\/div>\n\t
\n\t\t
\n\t\t\t\n\t\t\t\thello@smultron.pl\t\t\t<\/a>\n\t\t<\/div>\n\t\t
\n\t\t\t\n\t\t\t\t+48 791 991 797\t\t\t<\/a>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n\n\n

Kolory<\/h2>\n\n\n\n

Aby zachowa\u0107 sp\u00f3jno\u015b\u0107 projektu warto dostarczy\u0107 programi\u015bcie palet\u0119 barwn\u0105 z list\u0105 wykorzystanych na stronie kolor\u00f3w.<\/p>\n\n\n

\n
\"Paleta<\/figure>\n<\/div>\n\n\n

Na takiej li\u015bcie powinny si\u0119 znale\u017a\u0107 tak\u017ce podgl\u0105dy aktywnego stanu dla klikalnych element\u00f3w, na przyk\u0142adzie button\u00f3w:<\/p>\n\n\n

\n
\"Komponenty<\/figure>\n<\/div>\n\n\n

Ikony<\/h2>\n\n\n\n

Projektuj\u0105c stron\u0119 cz\u0119sto tworzymy ikony lub wektorowe ilustracje. Je\u017celi decydujemy si\u0119 na projekt w Photoshopie pami\u0119tajmy by nie by\u0142o w nim element\u00f3w linkuj\u0105cych do zewn\u0119trznej biblioteki<\/strong> (np. Illustratora), kt\u00f3re nie s\u0105 dost\u0119pne wprost z projektu. W takim przypadku najlepiej gdyby elementy wektorowe w plikach by\u0142y kszta\u0142tami z Photoshopa lub by\u0142y dostarczone w osobnym katalogu .zip jako pliki svg<\/strong>. Pojedynczy plik svg powinien by\u0107 czysty i zawiera\u0107 tylko t\u0119 w\u0142a\u015bciw\u0105 wektorow\u0105 ikon\u0119.<\/p>\n\n\n\n

Grafiki rastrowe\/zdj\u0119cia<\/h2>\n\n\n\n

Zdj\u0119cia lub grafiki rastrowe r\u00f3wnie\u017c powinny by\u0107 przes\u0142ane w osobnym katalogu z opisem. Unikaj przypadkowych nazw plik\u00f3w, nie u\u017cywaj polskich znak\u00f3w i znak\u00f3w specjalnych, stosuj zwi\u0119z\u0142e opisy, korzystaj z pauz. I tak odpowiednia nazwa pliku ze zdj\u0119ciem powinna brzmie\u0107 fotografia-wawel.jpg<\/strong>, a nie uoia\u0142flklal.jpg. Warto pami\u0119ta\u0107 by dostarczy\u0107 pliki w wysokiej rozdzielczo\u015bci, najlepiej by przed wys\u0142aniem zosta\u0142y przepuszczone przez program optymalizuj\u0105cy. Je\u017celi korzystamy z Maca mo\u017cemy skorzysta\u0107 z darmowego narz\u0119dzia, jakim jest ImageOptim dost\u0119pny pod linkiem: www.imageoptim.com\/pl<\/a>. Na stronie www.pngquant.org<\/a> znajdziecie wersj\u0119 dla Windows\u2019a czy wtyczk\u0119 Photoshopa. Tradycyjne zdj\u0119cia zapisuj w formacie jpg<\/strong>, natomiast ilustracje, infografiki w formacie png<\/strong>.<\/p>\n\n\n\n

Animacje\/interakcje<\/h2>\n\n\n\n

Je\u015bli mamy osobny plik z hoverami\/interakcjami to dobrze jest zaznaczy\u0107 gdzie, kt\u00f3ry element wyst\u0119puje. Mamy wymy\u015blony lub wybrany efekt hovera? \u017beby uzyska\u0107 jak najbardziej zbli\u017con\u0105 animacj\u0119 warto szczeg\u00f3\u0142owo opisa\u0107 wszelkie animacje interakcji i ruchomych element\u00f3w. Mo\u017cna r\u00f3wnie\u017c podes\u0142a\u0107 link do przyk\u0142adu. W przypadku bardziej skomplikowanych animacji \u2013 przydatne dla programisty by\u0142oby rozpisanie ca\u0142ego toku animacji, np. animacja trwa 2 sekundy, zaczyna si\u0119 ruchem jednego elementu a w 0.3 sekundzie dochodzi ruch drugiego elementu.<\/p>\n\n\n\n

Dodatkowe elementy layoutu<\/h2>\n\n\n\n

Opr\u00f3cz projekt\u00f3w podstron, kt\u00f3re znajd\u0105 si\u0119 na pasku menu projektowanej przez Was strony warto pami\u0119ta\u0107 o kilku wa\u017cnych elementach do zaprojektowania.<\/p>\n\n\n\n

Przyk\u0142adowa strona tekstowa<\/strong><\/strong><\/strong><\/p>\n\n\n\n

Zdarza si\u0119, \u017ce nie zostaje przewidziana w projekcie jako jedna z g\u0142\u00f3wnych stron, jednak jest istotna ze wzgl\u0119du na elementy w niej wyst\u0119puj\u0105ce, kt\u00f3re w przysz\u0142o\u015bci mog\u0105 zosta\u0107 wykorzystane w edycji tekstu w CMS. W\u0142a\u015bciwie przygotowana strona tekstowa powinna si\u0119 sk\u0142ada\u0107 z tekstu uwzgl\u0119dniaj\u0105cego w tre\u015bci: nag\u0142\u00f3wki, widok cytatu, listy numerycznej, listy wypunktowanej, wygl\u0105d linku czy podpisu do zdj\u0119cia.<\/p>\n\n\n\n

Podstrona b\u0142\u0119du 404<\/strong><\/strong><\/strong><\/p>\n\n\n\n

Jest potrzebna, cho\u0107 lepiej, by u\u017cytkownik jej nigdy nie zobaczy\u0142 ?. Jednak s\u0105 momenty, na kt\u00f3re nie mamy wp\u0142ywu i np. przez \u017ale wpisany adres url oczom u\u017cytkownika ukazuje si\u0119 strona b\u0142\u0119du. Warto zadba\u0107, by wizualnie by\u0142a sp\u00f3jna z reszt\u0105 podstron.<\/p>\n\n\n\n

Pasek cookies<\/strong><\/strong><\/strong><\/strong><\/p>\n\n\n\n

Czyli pasek z komunikatem o ciasteczkach widoczny na stronach serwisu.<\/p>\n\n\n\n

Komunikaty i walidacja<\/strong><\/strong><\/strong><\/p>\n\n\n\n

Dotyczy to przede wszystkim formularzy i wyszukiwarek. Warto przygotowa\u0107 tre\u015b\u0107 i styl komunikat\u00f3w o b\u0142\u0119dach\/sukcesach w formularzu oraz widoki aktywnego pola.<\/p>\n\n\n\n

Dodatkowe informacje dla koder\u00f3w<\/h2>\n\n\n\n

Je\u017celi zale\u017cy nam na tym, by konkretne elementy strony mia\u0142y sztywne wymiary (np. zadan\u0105 wysoko\u015b\u0107) warto to podkre\u015bli\u0107 przekazuj\u0105c informacje programi\u015bcie. Precyzyjny opis<\/strong> lub link do przyk\u0142adu<\/strong> z innej strony przyda si\u0119 r\u00f3wnie\u017c w przypadku, kiedy nie wszystko jest mo\u017cliwe do pokazania w pliku graficznym.<\/p>\n\n\n\n

Favicon<\/h2>\n\n\n\n

Aby zaprogramowana strona odr\u00f3\u017cnia\u0142a si\u0119 w\u015br\u00f3d innych zak\u0142adek na pasku przegl\u0105darki warto przygotowa\u0107 favicon<\/strong>. Mo\u017cna to zrobi\u0107 za pomoc\u0105 narz\u0119dzia online: www.realfavicongenerator.net<\/a>, gdzie po uploadzie grafiki w formacie .png \/ .jpg \/ .svg generuje si\u0119 nam paczka z ikonami i kodem HTML, kt\u00f3r\u0105 nale\u017cy do\u0142\u0105czy\u0107 do materia\u0142\u00f3w dla programisty.<\/p>\n\n\n\n

Mamy nadziej\u0119, \u017ce wiedza zawarta w tym artykule b\u0119dzie dla Ciebie pomocna, a je\u015bli mia\u0142by\u015b jakie\u015b uwagi, to zapraszamy do komentowania na naszym Facebookowym fanpage\u2019u<\/a> \ud83d\ude42<\/p>\n\n\n\n

<\/p>\n

\n\t
\n\t\tSkontaktuj si\u0119 z nami\t<\/div>\n\t
\n\t\t\n
\n\t
\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t
Marcin Stawowiak<\/div>\n\t\t\t\t
\n\t\t\t\t\tCo-founder, Executive Manager\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n\t
\n\t\t
\n\t\t\tSzukasz do\u015bwiadczonego zespo\u0142u programistycznego?
Porozmawiajmy o konkretach.\t\t<\/div>\n\t\t
\n\t\t\thello@smultron.pl<\/a>\n\t\t\t+48 791 991 797<\/a>\n\t\t<\/div>\n\t<\/div>\n\t
\n\t\t
\n\t\t\tSmultron Web Development\t\t<\/div>\n\t\t
\n\t\t\tul. S\u0142awkowska 12\t\t\t\n\t\t\t31-014 Krak\u00f3w\t\t<\/div>\n\t\t
\n\t\t\tNIP: 6762482785\t\t<\/div>\n\t<\/div>\n<\/div>\n\t\t\n
\n\t\n
\n

<\/p>

    <\/ul><\/div>\n
    \n
    \n<\/fieldset>\n
    \n
    \n
    \n\t\t\tWype\u0142nij poni\u017cszy formularz\n <\/div>\n
    \n
    \n