{"id":173074,"date":"2017-04-13T09:58:50","date_gmt":"2017-04-13T07:58:50","guid":{"rendered":"https:\/\/mediarun.com\/pl\/?p=173074"},"modified":"2018-05-24T07:41:38","modified_gmt":"2018-05-24T05:41:38","slug":"trendy-w-projektowaniu-stron-na-2017-rok","status":"publish","type":"post","link":"https:\/\/mediarun.com\/pl\/trendy\/inspiracje\/trendy-w-projektowaniu-stron-na-2017-rok.html","title":{"rendered":"Najnowsze trendy w projektowaniu stron na 2017 rok"},"content":{"rendered":"

Od kilku lat, coraz wi\u0119ksz\u0105 wag\u0119 przyk\u0142ada si\u0119 do projektowania stron internetowych. To oczywiste, \u017ce to wizyt\u00f3wka naszej firmy. Przedstawiamy najciekawsze, naszym\u00a0zdaniem trendy na nadchodz\u0105cy rok.<\/strong><\/h3>\n

Ludzie s\u0105 istotami, kt\u00f3re bardzo zwracaj\u0105 uwag\u0119 na to co widz\u0105. A slogan „jak Ci\u0119 widz\u0105 – tak Ci\u0119 pisz\u0105”, dotyczy te\u017c stron internetowych i ich designu. Dlatego na nast\u0119pny rok zapowiedziano par\u0119 zmian. Film i obraz b\u0119dzie dominuj\u0105c\u0105 tendencja\u00a0i nie chodzi tutaj tylko o sam content marketing. Zawarto\u015b\u0107 video jest ju\u017c bardzo silnie obecna na blogach i co raz \u015bmielej wkracza na portale spo\u0142eczno\u015bciowe. Jednak trzeba uwa\u017ca\u0107 – \u00a0mo\u017cna \u0142atwo wpa\u015b\u0107\u00a0w pu\u0142apk\u0119 dost\u0119pnych narz\u0119dzi. Wszystko trzeba zrobi\u0107 tak, \u017ceby nie by\u0142o przesytu formy nad tre\u015bci\u0105. Wybrali\u015bmy par\u0119 gor\u0105cych trend\u00f3w, kt\u00f3re wkraczaj\u0105 do web designu i powoli staj\u0105 si\u0119 standardami na stronach, kt\u00f3re chc\u0105 by\u0107 odbierane jako profesjonalne i nowoczesne.<\/p>\n

1. P\u0142aski design<\/strong><\/h2>\n

\"flatdesign\"<\/p>\n

Co raz wi\u0119ksz\u0105 uwag\u0119 przyci\u0105ga tzw. flat design (projektowanie p\u0142askie<\/em>). Zaadoptowa\u0142 je Google i teraz szturmem zdobywa kolejne witryny.\u00a0Jednym z jego od\u0142am\u00f3w jest „material design<\/em>„. Charakteryzuje si\u0119 tr\u00f3jwymiarowo\u015bci\u0105 poprzez zastosowanie r\u00f3\u017cnych odcieni koloru i cieni. \u00a0W\u00a0tym designie\u00a0wyr\u00f3\u017cnia si\u0119 trzy podstawowe g\u0142\u0119boko\u015bci, kt\u00f3re mo\u017cna stosowa\u0107 do\u00a0wyr\u00f3\u017cniania jednych element\u00f3w nad drugimi.<\/p>\n

2. Age-responsive design<\/strong><\/h2>\n

W poprzednich rano stawiano na to, \u017ceby strony by\u0142y dostosowane do wi\u0119kszo\u015bci urz\u0105dze\u0144 i by\u0142y responsywne. W 2017 roku stawia\u0107 si\u0119 b\u0119dzie na dostosowanie designu stron i ich uk\u0142adu do wieku u\u017cytkownika. Tutaj potrzeba zrozumienia jakie s\u0105 wa\u017cne czynniki dla os\u00f3b starszych, a jakie powinno si\u0119 wzi\u0105\u0107 pod uwag\u0119 przy projektowaniu np. kana\u0142u telewizji dla dzieci. Jednym z takich element\u00f3w ma by\u0107 automatycznie dopasowywana czcionka podczas przewijania i przesuwania poszczeg\u00f3lnych element\u00f3w strony. Kolory natomiast maj\u0105 by\u0107 bardziej jaskrawe na stronach przeznaczonych dla m\u0142odzie\u017cy, a stonowane i pastelowe dla os\u00f3b dojrza\u0142ych.<\/p>\n

Storytelling<\/strong><\/h4>\n

\"mediarun-storytelling\"<\/p>\n

Du\u017cym plusem nowych stron jest zastosowanie „narracji wizualnej”. Tzw. storytelling ma skupi\u0107 u\u017cytkownika na eksplorowaniu strony i dowiadywaniu si\u0119 wszystkiego czego chce o danej rzeczy. G\u0142\u00f3wne zastosowanie „opowiada\u0144” ma przydatno\u015b\u0107 przy prezentowaniu nowego produktu b\u0105d\u017a wydarzenia. \u015awietnym przyk\u0142adem takiej witryny\u00a0jest strona po\u015bwi\u0119cona hybrydowemu modelowi<\/a> samochodu marki Hyundai lub portal National Geographic<\/a>\u00a0o rodzinie Kennedych.<\/p>\n

3. Mini-interakcje<\/strong><\/h2>\n

\"mediarun-minisharing\"<\/p>\n

Du\u017cy nacisk po\u0142o\u017cny b\u0119dzie te\u017c na „mini-interkacje”, kt\u00f3re b\u0119d\u0105 zach\u0119ca\u0142y u\u017cytkownika do wi\u0119kszej aktywno\u015bci, jak share’owania\u00a0post\u00f3w czy dodania „\u0142apki w g\u00f3r\u0119” do danej rzeczy lub szybkiego skomentowania z poziomu nawet nie otwartego artyku\u0142u, a samego tytu\u0142u.<\/p>\n

4. User Offboarding<\/strong><\/h2>\n

\"zrzut-ekranu-2016-10-19-o-12-20-09\"<\/p>\n

\u201eDobry produkt jest jak kinowe arcydzie\u0142o\u201d – tym has\u0142em ma kierowa\u0107 si\u0119 nowa metoda przyci\u0105gania go\u015bci na swoje strony. Ma to by\u0107 element strony, kt\u00f3ry u\u017cytkownik ujrzy i nie b\u0119dzie m\u00f3g\u0142 od niego oderwa\u0107 uwagi. B\u0119dzie tak bardzo w niego si\u0119 zag\u0142\u0119bia\u0142, \u017ce odwiedzi ca\u0142\u0105 witryn\u0119. Od pocz\u0105tku do ko\u0144ca i \u201eobejrzy j\u0105 jak dobry \u00a0film\u201d. Jednym z takich przyk\u0142ad\u00f3w jest m. in. witryna Canva<\/a>, kt\u00f3ra jest tak skonstruowana, \u017ce nie pozwala u\u017cytkownikowi przesta\u0107 tworzy\u0107 strony, a kr\u00f3tkie filmiki pokazuj\u0105ce na zasadzie – \u201ezr\u00f3b -> poka\u017c -> powiedz<\/em>\u201d powoduj\u0105 u u\u017cytkownika ch\u0119\u0107 poznania szczeg\u00f3\u0142\u00f3w.<\/p>\n

5. Typografia<\/strong><\/h2>\n

\"mediarun-dropbox\"<\/p>\n

Co raz wi\u0119ksz\u0105 wag\u0119 przywi\u0105zujemy nie tylko do tego co jest napisane,\u00a0ale te\u017c jak to wygl\u0105da. Czy czyta to si\u0119 nam wygodnie, intuicyjnie i jest zrozumia\u0142e dla nas. W graficznym przedstawianiu tre\u015bci, du\u017cy nacisk b\u0119dziemy k\u0142adli na odpowiedni dob\u00f3r czcionek oraz to w jakim miejscu znajd\u0105 si\u0119 dane s\u0142owa czy nawet poszczeg\u00f3lne\u00a0litery. Odchodzimy od nadmiaru informacji, a chcemy mie\u0107 przedstawione tylko to co najwa\u017cniejsze. Przejrzystym po\u0142\u0105czeniem nowym trend\u00f3w jest na pewno nowa strona domowa hostingu plik\u00f3w Dropbox<\/a>.<\/p>\n

6. Du\u017ce i wy\u015brodkowane zdj\u0119cia<\/strong><\/h2>\n

W przysz\u0142ym roku, trendem b\u0119d\u0105 du\u017ce zdj\u0119cia prezentuj\u0105ce przedmiot strony. Zdj\u0119cia maj\u0105 by\u0107 tak dobrane, \u017ceby wsp\u00f3\u0142gra\u0142y z kolorystyk\u0105 strony i animacjami, a ich przewijanie by\u0142o p\u0142ynne.<\/p>\n

„Hero image”<\/strong><\/h4>\n

\"mediarun-heroimage\"<\/p>\n

B\u0119dzie to pierwsza, g\u0142\u00f3wna grafika (b\u0105d\u017a slider) \u00a0jak\u0105 zobaczysz na stronie. Ma by\u0107 odno\u015bnikiem do pozosta\u0142ych cz\u0119\u015bci serwisu. Wiele firm wprowadza to ju\u017c teraz do swoich layout\u00f3w.<\/p>\n

7. Ruchome „kinowe” zdj\u0119cia<\/strong><\/h2>\n

Po GIF-ach, kt\u00f3re w tym roku opanowa\u0142y serwisy czas na ich podrasowanie. Hitem i numerem jeden b\u0119d\u0105 ruchome obrazki, kt\u00f3re wygl\u0105daj\u0105 jak kadr z filmu.\u00a0Czym si\u0119 r\u00f3\u017cni\u0107 b\u0119dzie taki obrazek od popularnych animacji? G\u0142\u00f3wnie jako\u015bci\u0105 techniczn\u0105. Zdj\u0119cia u\u017cyte do tworzenia subtelnych ruch\u00f3w,\u00a0nie mog\u0105 by\u0107 ma\u0142e, a do ich wykonania b\u0119dzie potrzebny dobry program graficzny.<\/p>\n

\"pandora-web-cinemagraph\"<\/p>\n

8. Parallax Scrolling<\/strong><\/h2>\n

W budowaniu witryny jednym z istotnych element\u00f3w jest szybko\u015b\u0107 dzia\u0142ania ca\u0142ej witryny. W przysz\u0142ym roku skupimy si\u0119 na budowaniu witryny na tyle szybkiej, \u017ceby mog\u0142a sobie radzi\u0107 z tzw. efektem paralaksy przy przewijaniu strony. Na czym polega? Na jednoczesnym przesuwaniu ca\u0142ej strony i t\u0142a przy jednoczesnym pozostawaniu tekstu na swoim miejscu. Daje to mo\u017cliwo\u015b\u0107 wi\u0119kszego przyci\u0105gni\u0119cia uwagi u\u017cytkownika, kt\u00f3ry odwiedza nasz\u0105 witryn\u0119. Taki efekt mo\u017cemy zobaczy\u0107 na tej<\/a> stronie.<\/p>\n

 <\/p>\n

Przeczytaj te\u017c:<\/strong><\/p>\n