# Czego najbardziej nie lubi\u0105 projektanci stron internetowych? Prawdopodobnie kodowanie. I by\u0107 mo\u017ce na drugim miejscu jest prototypowanie dla wszystkich urz\u0105dze\u0144. A wszystko, co mo\u017ce u\u0142atwi\u0107 tego rodzaju rzeczy, pozwala projektantowi po\u015bwi\u0119ci\u0107 wi\u0119cej czasu na kreatywne aspekty swojej pracy. Maj\u0105c to na uwadze, istnieje wiele \u015bwietnych nowych aplikacji, kt\u00f3re ka\u017cdy projektant powinien zbada\u0107 jako potencjalne dodatki do swojego zestawu narz\u0119dzi! ##### [FRONTYFIKOWA\u0106](https:\/\/frontify.com\/) Co za wspania\u0142a strona do tworzenia w\u0142asnych przewodnik\u00f3w po stylach i przechowywania ich w chmurze do wykorzystania w przysz\u0142o\u015bci i do udost\u0119pniania. Dost\u0119pne s\u0105 szablony przewodnik\u00f3w stylistycznych dla logo i obraz\u00f3w, palet kolor\u00f3w, typografii, ikon oraz w\u0142asnego tekstu i multimedi\u00f3w. Innym du\u017cym plusem jest to, \u017ce nie musisz r\u0119cznie tworzy\u0107 w\u0142asnych przewodnik\u00f3w po stylach PDF \u2013 przechowujesz je na Frontify i mo\u017cesz je konwertowa\u0107 na pliki PDF w celu pobrania, wydrukowania i udost\u0119pnienia. Wersjonowanie utrzymuje wszystkie starsze wersje w tle, aby mo\u017cna je by\u0142o pobra\u0107 w dowolnym momencie. Mo\u017cesz zacz\u0105\u0107 od ich szablon\u00f3w lub wyszuka\u0107 przyk\u0142ady ksi\u0119gi znaku, aby dostosowa\u0107 w\u0142asne. Wszystkie funkcje s\u0105 dost\u0119pne przez API. Oto przyk\u0142ad tego, co mo\u017cesz zrobi\u0107 z samym logo, korzystaj\u0105c z w\u0142asnego logo Frontify:  To jest podstawowe logo. Frontify zdecydowa\u0142, \u017ce \u201ekrople” s\u0105 tutaj kluczowe, ale mog\u0105 zrobi\u0107 wiele innych rzeczy, zachowuj\u0105c sp\u00f3jno\u015b\u0107 logo. Oto zmiany kolor\u00f3w:  A oto przyk\u0142ad wariacji podstawowego logo:  To tylko jeden przyk\u0142ad szablon\u00f3w projekt\u00f3w i kolor\u00f3w, kt\u00f3rych mo\u017cna u\u017cy\u0107 do tworzenia unikalnych wskaz\u00f3wek stylistycznych, a wszystkie komponenty s\u0105 wymienne. ##### [KOMPOZYTOR WIZUALNY](http:\/\/vcpreview.com\/) Ta aplikacja istnieje ju\u017c od jakiego\u015b czasu i by\u0107 mo\u017ce ju\u017c o niej wiesz, ale trudno by\u0142oby znale\u017a\u0107 inn\u0105 z pakietem opcji projektowania. Zasadniczo wyeliminowa\u0142o \u017cmudne zadania planowania i kodowania. Mo\u017cesz mie\u0107 uk\u0142ady projekt\u00f3w w kilka minut, dodaj\u0105c elementy jednym klikni\u0119ciem. Cena 25 dolar\u00f3w jest tego warta. Guziki do wszystkiego; wiele opcji animacji, opcje natychmiastowego udost\u0119pniania i tak dalej. Ponad 40 element\u00f3w tre\u015bci w tym dziecku! To naprawd\u0119 uniwersalne narz\u0119dzie! Je\u015bli nie masz pewno\u015bci co do wszystkich jej funkcji i sposobu korzystania z tej aplikacji, zapoznaj si\u0119 z samouczkami wideo [tutaj](https:\/\/wpbakery.atlassian.net\/wiki\/display\/VC\/Introduction) .  Istniej\u0105 \u015bwietne funkcje, kt\u00f3re pozwalaj\u0105 bardzo szybko projektowa\u0107 strony i modyfikowa\u0107 prawie ka\u017cdy element. Na przyk\u0142ad istnieje kilka wst\u0119pnie zdefiniowanych element\u00f3w siatki, kt\u00f3re mo\u017cna modyfikowa\u0107, lub opcja zaprojektowania w\u0142asnej siatki. Je\u015bli Visual Composer ma wad\u0119, to pozostawia du\u017co ma\u0142ego kodu po dezaktywacji, kt\u00f3ry nale\u017cy usun\u0105\u0107 przed rozpocz\u0119ciem nowego motywu. Oto przyk\u0142ad projektu utworzonego za pomoc\u0105 programu Visual Composer.  ##### [POSZUKIWANIE PROJEKT\u00d3W](https:\/\/itunes.apple.com\/us\/app\/design-hunt\/id968588816)  Kiedy twoja inspiracja w\u0142a\u015bnie utkn\u0119\u0142a w martwym punkcie, prawdopodobnie szukasz jej, szukaj\u0105c nowych stron internetowych, kt\u00f3re mog\u0105 da\u0107 ci \u015bwietne pomys\u0142y. Mo\u017ce to by\u0107 troch\u0119 czasoch\u0142onne zadanie, wi\u0119c dlaczego nie skorzysta\u0107 z du\u017co wygodniejszej metody? Design Hunt to swego rodzaju \u201ebiuro informacyjne\u201d, ale codziennie zmienia ca\u0142y sw\u00f3j repertuar. Rysuje wspania\u0142e nowe projekty znalezione na Pinterest, Dribble, Designer News, DesignInspiraton i nie tylko i publikuje je dla projektant\u00f3w, kt\u00f3rzy szukaj\u0105 nowych inspiracji i pomys\u0142\u00f3w. Teraz mo\u017cesz codziennie i\u015b\u0107 w jedno miejsce i znale\u017a\u0107 zupe\u0142nie now\u0105 kolekcj\u0119. ##### [TOOKAPIC](https:\/\/tookapic.com\/)  Stosunkowo nowicjusz w bran\u017cy zdj\u0119\u0107 stockowych, Tookapic ma obecnie ponad 11 000 zdj\u0119\u0107 stockowych, wi\u0119kszo\u015b\u0107 za darmo, reszta za niewielk\u0105 cen\u0119. To naprawd\u0119 mo\u017ce ci si\u0119 spodoba\u0107 bardziej ni\u017c \u017ar\u00f3d\u0142o zdj\u0119\u0107 stockowych, z kt\u00f3rego teraz korzystasz \u2013 fenomenalny kolor i wyrazisto\u015b\u0107 oraz naprawd\u0119 wyj\u0105tkowe zdj\u0119cia. Wejd\u017a na ich stron\u0119 i sprawd\u017a, co maj\u0105. Mo\u017cesz by\u0107 zaskoczony! ##### [MARVELAPP](https:\/\/marvelapp.com\/) To bezp\u0142atne narz\u0119dzie do prototypowania umo\u017cliwia szkicowanie i tworzenie makiet z telefonu kom\u00f3rkowego lub dowolnego innego urz\u0105dzenia i natychmiastowe obejrzenie prototypu. Stamt\u0105d mo\u017cesz ponownie rozmie\u015bci\u0107, zmodyfikowa\u0107, doda\u0107 kolor, tekst, zmieni\u0107 formularze i zrobi\u0107 praktycznie wszystko, z natychmiastow\u0105 kompatybilno\u015bci\u0105 z dowolnym urz\u0105dzeniem. Po nadaniu nazwy projektowi od razu przechodzisz do g\u0142\u00f3wnego interfejsu i zaczynasz. Po zako\u0144czeniu mo\u017cesz wy\u015bwietli\u0107 podgl\u0105d ca\u0142ego projektu i wchodzi\u0107 z nim w interakcje, aby upewni\u0107 si\u0119, \u017ce wszystko dzia\u0142a dobrze.  Aby dowiedzie\u0107 si\u0119 wi\u0119cej o tym fenomenalnym narz\u0119dziu, odwied\u017a stron\u0119 internetow\u0105 i obejrzyj demo \u2013 b\u0119dziesz zachwycony \u0142atwo\u015bci\u0105 obs\u0142ugi. Jedn\u0105 z najlepszych funkcji jest mo\u017cliwo\u015b\u0107 upuszczenia obrazu z dowolnego miejsca (nawet z Dropbox i szkicu) i dowolnego typu obrazu. Mo\u017cesz tak\u017ce doda\u0107 zesp\u00f3\u0142, je\u015bli jest to projekt oparty na wsp\u00f3\u0142pracy. Najwi\u0119ksz\u0105 wad\u0105 Marvela s\u0105 ograniczenia w darmowej wersji, wi\u0119c na pewno b\u0119dziesz musia\u0142 dokona\u0107 aktualizacji. Mimo wszystko jest to bardzo \u0142atwe w u\u017cyciu \u2013 pod ka\u017cdym wzgl\u0119dem tak dobre jak Justinmind. ##### [ANIMOWANE CSS](https:\/\/daneden.github.io\/animate.css\/) Je\u015bli tworzysz du\u017co animacji, na pewno b\u0119dziesz chcia\u0142 to narz\u0119dzie. Naprawd\u0119 fajne funkcje bez konieczno\u015bci pisania kodu. Dost\u0119pna jest gotowa do u\u017cycia biblioteka efekt\u00f3w animacji \u2013 w rzeczywisto\u015bci ponad 50 \u2013 i mo\u017cna j\u0105 \u0142atwo dostosowa\u0107 pod k\u0105tem liczby p\u0119tli i czasu trwania. Animacja dodaje \u015bwietnego zaanga\u017cowania i rozrywki, o ile nie przesadzasz! Je\u015bli jednak szukasz naprawd\u0119 kompletnego zestawu funkcji i opcji, sam CSS nie wystarczy. Chocia\u017c z pewno\u015bci\u0105 debata na temat CSS i JavaScript trwa, zdecydowanie istniej\u0105 sposoby, w jakie mo\u017cna ich razem u\u017cywa\u0107. Na przyk\u0142ad masz zaprojektowan\u0105 \u015bwietn\u0105 animacj\u0119 CSS, ale chcesz, aby przesuwa\u0142a si\u0119 od lewej strony, gdy u\u017cytkownik dotrze do okre\u015blonego punktu podczas przewijania w d\u00f3\u0142. B\u0119dziesz musia\u0142 doda\u0107 JS, aby to zrobi\u0107. Zrozumienie, \u017ce CSS ma swoje ograniczenia i mo\u017ce zosta\u0107 ulepszony przez JS, to po prostu m\u0105dre korzystanie z dost\u0119pnych narz\u0119dzi.  Niemniej jednak program Animate CSS jest naprawd\u0119 \u0142atwy w obs\u0142udze. Pobierasz go, do\u0142\u0105czasz CSS oraz jQuery i wszelkie inne komponenty, kt\u00f3re chcesz i zaczynasz animowa\u0107. Na YouTube znajdziesz \u015bwietne samouczki, kt\u00f3re pomog\u0105 Ci zacz\u0105\u0107. ##### [COOLORY](https:\/\/coolors.co\/) Je\u015bli zdarzy ci si\u0119 by\u0107 \u015blepym na kolory lub po prostu masz problem ze schematem kolor\u00f3w, to narz\u0119dzie opracuje dla ciebie ca\u0142y schemat kolor\u00f3w lub utworzy go, je\u015bli wiesz, od czego chcesz zacz\u0105\u0107. Kiedy zauwa\u017cysz kolor, kt\u00f3ry Ci si\u0119 podoba, zablokuj go, a nast\u0119pnie klikaj dalej \u2014 otrzymasz kompletny schemat z dowoln\u0105 liczb\u0105 kolor\u00f3w. Jest to szczeg\u00f3lnie przydatne, je\u015bli chcesz u\u017cy\u0107 gradient\u00f3w kolor\u00f3w. W tym narz\u0119dziu nie ma nic szczeg\u00f3lnie kontrowersyjnego \u2013 projektanci, kt\u00f3rzy go u\u017cywaj\u0105, uwielbiaj\u0105 je; ci, kt\u00f3rzy jeszcze nie pr\u00f3bowali. Jedyny minus? To ju\u017c nie jest darmowe i musisz mie\u0107 konto iTunes, aby pobra\u0107.  Automatyczny generator schemat\u00f3w kolor\u00f3w dla os\u00f3b z problemami kolorystycznymi ##### [OKR\u0104G.SVG](http:\/\/sarasoueidan.com\/tools\/circulus\/) To nie jest kompleksowe narz\u0119dzie z mn\u00f3stwem opcji, szablon\u00f3w i tym podobnych, ale oto wyj\u0105tkowy spos\u00f3b na zaprojektowanie menu lub kilku na dowolnej liczbie stron! Wszystko, co musisz zrobi\u0107, to wprowadzi\u0107 specyfik\u0119 tego, co chcesz w swoim menu. Nast\u0119pnie otrzymasz szczeg\u00f3\u0142owe instrukcje, jak go zbudowa\u0107 i osadzi\u0107 na okre\u015blonej stronie.  Co\u015b, co pozwoli lepiej zaanga\u017cowa\u0107 odwiedzaj\u0105cych Circular SVG jest prawdopodobnie lepszy od CSS do tworzenia tego rodzaju element\u00f3w. Po pobraniu masz 3 opcje: Mo\u017cesz narysowa\u0107 swoje sektory w edytorze graficznym, takim jak Sketch, a nast\u0119pnie wyeksportowa\u0107 je jako SVG, doda\u0107 interakcj\u0119 i osadzi\u0107 je; mo\u017cesz narysowa\u0107 swoje sektory za pomoc\u0105 kodu; lub mo\u017cesz u\u017cy\u0107 generatora Circulus bezpo\u015brednio w aplikacji. CSS pozwala tworzy\u0107 nawigacj\u0119 okr\u0119\u017cn\u0105, ale jest kilka b\u0142\u0119d\u00f3w w przegl\u0105darce i jest to po prostu du\u017co pracy. Musisz zacz\u0105\u0107 od prostok\u0105ta, rozbi\u0107 go, a nast\u0119pnie pochyli\u0107 i obr\u00f3ci\u0107 te sekcje. A je\u015bli u\u017cywasz wi\u0119cej ni\u017c tylko ikon w swoich sektorach, staje si\u0119 to trudniejsze. Za pomoc\u0105 SVG mo\u017cesz narysowa\u0107 dowolny kszta\u0142t, u\u017cywaj\u0105c okre\u015blonych linii i polece\u0144 \u0142uku do \u017c\u0105danych \u201eklin\u00f3w ciasta\u201d \u2014 oto przyk\u0142ad:  Po narysowaniu ka\u017cdego z klin\u00f3w i osadzeniu ikony i\/lub tre\u015bci po prostu do nich do\u0142\u0105czasz. ##### [METAFLOPA](http:\/\/www.metaflop.com\/) Masz do\u015b\u0107 tych samych starych czcionek i styl\u00f3w liter? Stw\u00f3rz w\u0142asny \u2014 nie wymaga kodowania \u2014 wystarczy klikn\u0105\u0107 i przeci\u0105gn\u0105\u0107. Zmiana na unikalne czcionki i style tekstu mo\u017ce zach\u0119ci\u0107 odwiedzaj\u0105cych do faktycznego przeczytania tre\u015bci! Ta aplikacja jest tak fajna, \u017ce \u200b\u200btrudno b\u0119dzie ci nie gra\u0107 z ni\u0105 godzinami. I ju\u017c nigdy nie powiesz, \u017ce typografia jest najmniej seksown\u0105 cz\u0119\u015bci\u0105 projektowania stron internetowych. To takie proste. Dostosowujesz czcionki z serii slajd\u00f3w, kt\u00f3re maj\u0105 r\u00f3\u017cne cechy \u2013 wysoko\u015b\u0107, przys\u0142on\u0119 i kontrast. Dostosowujesz si\u0119, a\u017c uzyskasz to, co lubisz, a nast\u0119pnie pobierasz jako pakiet czcionek internetowych (bezp\u0142atny). Dost\u0119pna jest r\u00f3wnie\u017c biblioteka gotowych czcionek do wyboru. Graj dalej \u2014 przekonasz si\u0119, dlaczego projektanci czcionek mog\u0105 by\u0107 \u201ewymieraj\u0105cym gatunkiem\u201d.  Przyci\u0105gnij uwag\u0119 dzi\u0119ki unikalnym czcionkom i stylom ##### [FONTFLAME](http:\/\/fontflame.com\/)  To naprawd\u0119 \u201enowe dziecko w bloku\u201d. Fontflame pr\u00f3buje uwolni\u0107 projektant\u00f3w od jeszcze jednego ci\u0119\u017caru \u2014 znajdowania par czcionek, kt\u00f3re naprawd\u0119 dzia\u0142aj\u0105. W tej chwili ma 10 opublikowanych par na swojej stronie, ale codziennie dodaje. Przyk\u0142ady parowania przy u\u017cyciu bezp\u0142atnej biblioteki czcionek Google obejmuj\u0105 \u201eLobster-Asap\u201d i \u201eRoboto-Open Sans\u201d. Wkr\u00f3tce zostan\u0105 dodane dodatkowe biblioteki. Miej oko na t\u0119 stron\u0119 \u2013 wkr\u00f3tce b\u0119dzie mia\u0142a wiele do zaoferowania w parowaniu. ##### [PODCAST FREELANCERA](https:\/\/itunes.apple.com\/us\/podcast\/the-freelancer\/id1037145052?mt=2)  Nie aplikacja ani narz\u0119dzie \u2014 to cotygodniowy podcast dla projektant\u00f3w i programist\u00f3w, kt\u00f3rego nie mo\u017cesz przegapi\u0107. Prowadzony przez Paula Jarvisa, b\u0119dziesz mie\u0107 dost\u0119p do nowych trend\u00f3w, aplikacji i narz\u0119dzi oraz wielu naprawd\u0119 praktycznych porad. ##### [IN-WIZJA](http:\/\/www.invisionapp.com\/) Oto \u015bwietne narz\u0119dzie do prototypowania, kt\u00f3re ma kilka funkcji, kt\u00f3rych nie ma w innych. Jak wszyscy inni, tworzysz makiet\u0119 dla dowolnego lub wszystkich urz\u0105dze\u0144 \u2013 wybierasz te, kt\u00f3re chcesz. Po utworzeniu prototypu mo\u017cesz wy\u015bwietli\u0107 jego podgl\u0105d na wszystkich urz\u0105dzeniach, a nast\u0119pnie wys\u0142a\u0107 go klientom lub cz\u0142onkom zespo\u0142u do sprawdzenia. Mog\u0105 bezpo\u015brednio komentowa\u0107 sam projekt, co jest ogromnym plusem. Dwie inne fajne funkcje In-Vision to tryb historii, kt\u00f3ry pozwala zobaczy\u0107 wszystkie wcze\u015bniejsze wersje projektu, oraz 3 projekty demonstracyjne, nad kt\u00f3rymi projektanci mog\u0105 pracowa\u0107, dop\u00f3ki nie zaznajomi\u0105 si\u0119 ze wszystkimi funkcjami.  Por\u00f3wnuj\u0105c In-Vision z aplikacj\u0105 Marvel, istotne r\u00f3\u017cnice s\u0105 prawdopodobnie nast\u0119puj\u0105ce: 1. InVision ma wi\u0119cej funkcji ni\u017c Marvel, ale to r\u00f3wnie\u017c czyni go bardziej z\u0142o\u017conym. Na przyk\u0142ad ma wi\u0119cej funkcji wsp\u00f3\u0142pracy na \u017cywo, narz\u0119dzie do zrzut\u00f3w ekranu z adnotacjami i \u015bwietne elementy historii. 2. Marvel ma aplikacj\u0119 na iOS i obecnie pracuje nad aplikacjami na Androida i iPada \u2013 InVision ich nie ma. 3. InVision jest prawdopodobnie lepszy dla wi\u0119kszego zespo\u0142u, Marvel lepszy dla pojedynczych lub ma\u0142ych zespo\u0142\u00f3w. Komentarze u\u017cytkownik\u00f3w obu tych aplikacji rzuci\u0142yby wi\u0119cej \u015bwiat\u0142a na to, kt\u00f3ra z nich jest najlepsza do jakich cel\u00f3w. Prawdopodobnie masz jakie\u015b ulubione aplikacje, o kt\u00f3rych inni projektanci chcieliby us\u0142ysze\u0107. Opowiedz nam, czym one s\u0105 i jak daj\u0105 ci wi\u0119cej czasu na bycie artyst\u0105.<\/p>\n","protected":false},"excerpt":{"rendered":"
Czego najbardziej nie lubi\u0105 projektanci stron internetowych? Prawdopodobnie kodowanie. I by\u0107 mo\u017ce na drugim miejscu jest prototypowanie dla wszystkich urz\u0105dze\u0144. A wszystko, co mo\u017ce u\u0142atwi\u0107 tego rodzaju rzeczy, pozwala projektantowi po\u015bwi\u0119ci\u0107 wi\u0119cej czasu na kreatywne aspekty swojej pracy. Maj\u0105c to na uwadze, istnieje wiele \u015bwietnych nowych aplikacji, kt\u00f3re ka\u017cdy projektant powinien zbada\u0107 jako potencjalne dodatki do swojego zestawu narz\u0119dzi! FRONTIFY C\u00f3\u017c za wspania\u0142a strona do tworzenia w\u0142asnych przewodnik\u00f3w po stylach i przechowywania ich w chmurze do wykorzystania w przysz\u0142o\u015bci i do udost\u0119pniania. Istniej\u0105 szablony przewodnik\u00f3w stylistycznych dla logo\u2026<\/p>\n","protected":false},"author":1,"featured_media":147533,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[123,201,604,58,149,656],"tags":[],"class_list":["post-258352","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-narzedzia-internetowe","category-projektowanie-stron","category-technologia-i-nie-tylko","category-web-i-wordpress","category-web-porady-i-wskazowki","category-witryny-internetowe"],"_links":{"self":[{"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/posts\/258352","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/comments?post=258352"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/posts\/258352\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/media\/147533"}],"wp:attachment":[{"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/media?parent=258352"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/categories?post=258352"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/pl\/wp-json\/wp\/v2\/tags?post=258352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}