![\"7](\"https:\/\/wenet.pl\/blog\/wp-content\/uploads\/2018\/04\/Fotolia_81657610_Subscription_Monthly_M-1200x817.jpg\")
<\/p>\n<\/p>\n
Jak Ci\u0119 widz\u0105, tak Ci\u0119 pisz\u0105<\/em><\/strong> \u2013 \u00a0strona firmowa to wizyt\u00f3wka marki. Poczucie estetyki i spos\u00f3b prezentacji to kwestia gustu, a o gustach si\u0119 nie dyskutuje. Stron\u0119 internetow\u0105 nale\u017cy projektowa\u0107 dla u\u017cytkownika, a nie dla siebie. Dobr\u0105 praktyk\u0105 jest wizualne od\u015bwie\u017canie internetowej wizyt\u00f3wki przynajmniej raz na 2-3 lata, dostosowuj\u0105c j\u0105 do aktualnych wymog\u00f3w UX (do\u015bwiadcze\u0144 u\u017cytkownika) oraz jako\u015bciowych wymaga\u0144 Google. Tak zarz\u0105dzane strony zyskuj\u0105 pozycje w wyszukiwarkach.<\/strong><\/p>\n Strona WWW ma nie tylko informowa\u0107, ale tak\u017ce sprzedawa\u0107. Ka\u017cde mikrozdarzenie mo\u017ce doprowadzi\u0107 do konwersji, czyli zrealizowania celu. Oczywi\u015bcie licz\u0105 si\u0119 te najbardziej po\u017c\u0105dane akcje, czyli np. wys\u0142anie formularza kontaktowego<\/a> lub pro\u015bba o po\u0142\u0105czenie telefoniczne, komunikacja live-chat, zakup produktu lub us\u0142ugi.<\/p>\n Regularna praca nad designem i funkcjonalno\u015bci\u0105 strony internetowej<\/strong> powinna sta\u0107 si\u0119 takim standardem, jakim dla oceny kondycji danego serwisu dla robot\u00f3w wyszukiwarek jest audyt strony WWW<\/a>. Poprawnie zaprojektowana architektura informacji (AI- uk\u0142ad strony) wp\u0142ywaj\u0105ca na u\u017cyteczno\u015b\u0107 serwisu (UX) jest r\u00f3wnie wa\u017cna, jak aktualne wytyczne SEO, strategia linkowania oraz indeksacji WWW. Warto, aby ca\u0142y proces optymalizacji<\/a> wizualnej oraz technicznej przebiega\u0142 pod nadzorem specjalisty dbaj\u0105cego o zwi\u0119kszanie widoczno\u015bci strony w Internecie. Efektem ko\u0144cowym tego procesu powinna by\u0107 strona umacniaj\u0105ca swoje pozycje w rankingu wyszukiwarki, pozyskuj\u0105ca warto\u015bciowy ruch organiczny, oraz bardziej anga\u017cuj\u0105ca odwiedzaj\u0105cego j\u0105 u\u017cytkownika.<\/p>\n Warto zada\u0107 sobie poni\u017csze pytania, aby przekona\u0107 si\u0119, czy na mojej stronie Klient znajdzie to, czego potrzebuje? Innymi s\u0142owy \u2013 czy jest ona dla niego przyjazna, intuicyjna i anga\u017cuj\u0105ca.<\/p>\n C\u00f3\u017c otrzymali\u015bmy? Nic wi\u0119cej ni\u017c klasyczn\u0105 regu\u0142\u0119 AIDA \u00a0(attract, interest, desire, action) <\/em>+ S, jak satysfakcja, co obrazuje zadowolonego konsumenta polecaj\u0105cego firm\u0119 innym potencjalnym nabywcom (lajki, komentarze, rekomendacje).<\/p>\n Im ni\u017cszy wsp\u00f3\u0142czynnik odrzuce\u0144, im d\u0142u\u017cszy czas przebywania na\u00a0stronie, im wi\u0119ksza liczba odwiedzonych podstron, im wi\u0119cej wype\u0142nionych koszyk\u00f3w, a ni\u017cszy wsp\u00f3\u0142czynnik ich porzuce\u0144 oraz\u00a0im wi\u0119cej pozyskanych lead\u00f3w, tym bardziej mo\u017cna powiedzie\u0107, \u017ce\u00a0\u2013 tak, strona jest funkcjonalna. Je\u015bli uzyskamy niezadowalaj\u0105ce odpowiedzi, to pora na dzia\u0142anie w obszarze architektury & designu.<\/p>\n Dobrze zoptymalizowana strona internetowa jest jak widoczny billboard przy ruchliwej trasie<\/em>. Kieruj\u0105c si\u0119 wyczuciem i znajomo\u015bci\u0105 specyfiki bran\u017cy, warto dopasowa\u0107 jej wygl\u0105d do tre\u015bci, wizerunku firmy oraz potrzeb naszego u\u017cytkownika.<\/p>\n Mobile first<\/em> to ju\u017c standard w nowoczesnym projektowaniu stron WWW. Oznacza nic innego, jak rozpocz\u0119cie procesu projektowania od mobilnej wersji strony, a nast\u0119pnie dodawanie kolejnych element\u00f3w mo\u017cliwych do wy\u015bwietlenia na urz\u0105dzeniach o wi\u0119kszej rozdzielczo\u015bci \u2013 tabletach, laptopach, komputerach PC. Strona, niezale\u017cnie od tego, na jakich urz\u0105dzeniach jest przegl\u0105dana, musi by\u0107 przejrzysta, intuicyjna, prosta w obs\u0142udze oraz szybko si\u0119 \u0142adowa\u0107. Prawid\u0142owo zaprojektowana strona responsywna<\/strong> to obecnie kluczowa kwestia dla ka\u017cdej marki chc\u0105cej wysoko zaistnie\u0107 w wyszukiwarkach, zw\u0142aszcza, \u017ce Mobile-First Index<\/strong> jest ju\u017c faktem. Ten trend idzie w parze z projektowaniem zorientowanym na content (tre\u015b\u0107).<\/p>\n Strona responsywna to nie tylko taka, kt\u00f3ra automatycznie dopasowuje si\u0119 do rozdzielczo\u015bci danego urz\u0105dzenia mobilnego. Responsywno\u015b\u0107 mo\u017ce by\u0107 oceniana w kontek\u015bcie dopasowania jej wygl\u0105du do wieku u\u017cytkownika. Inne potrzeby ma pokolenie millenials\u2019\u00f3w, inne osoby starsze.\u00a0 Automatycznie dopasowywana czcionka<\/a> podczas przewijania strony lub przesuwania jej poszczeg\u00f3lnych element\u00f3w, a tak\u017ce kolorystyka dobrana pod wiod\u0105c\u0105 grup\u0119 docelow\u0105 (np. pastele dla senior\u00f3w, mocne barwy dla m\u0142odzie\u017cy) to kluczowe elementy tej techniki.<\/p>\n W centrum projektowania zorientowanego na content jest u\u017cytkownik \u2013 jego do\u015bwiadczenia oraz emocje zwi\u0105zane z korzystaniem z danej strony (UX <\/em>\u2013 User Experience).<\/em> Wnioski p\u0142yn\u0105ce z analizy zachowa\u0144 i preferencji u\u017cytkownik\u00f3w s\u0105 podstaw\u0105 do technicznego zaprojektowania interfejsu (UI <\/em>\u2013 User Interface).<\/em>Interfejs dla u\u017cytkownika ma by\u0107 praktyczny, prosty i skupia\u0107 jego uwag\u0119 na tre\u015bci.<\/p>\n Oszcz\u0119dno\u015b\u0107 formy nad tre\u015bci\u0105 \u2013 tak w skr\u00f3cie mo\u017cna okre\u015bli\u0107 ten trend. Ten cel pomaga osi\u0105gn\u0105\u0107 zar\u00f3wno projektowanie p\u0142askie tzw. flat design<\/em>, jak i jego wy\u017csza forma tzw. material design<\/em>. Projektowanie p\u0142askie eliminuje zb\u0119dne rozpraszaj\u0105ce u\u017cytkownika ozdobniki \u00a0\u2013 gradienty, odblaski, lustrzane odbicia, koncentruj\u0105c si\u0119 na prostych kszta\u0142tach oraz prostej topografii. Material design charakteryzuje si\u0119 tr\u00f3jwymiarow\u0105 p\u0142aszczyzn\u0105 i opiera si\u0119 na trzech podstawowych g\u0142\u0119boko\u015bciach uzyskiwanych poprzez umiej\u0119tn\u0105 gr\u0119 tonacjami koloru i cienia. Mo\u017cna w\u00f3wczas dokona\u0107 pewnej hierarchizacji element\u00f3w na stronie, wyr\u00f3\u017cniaj\u0105c jedne nad drugimi. W wyniku tych zabieg\u00f3w otrzymuje si\u0119 prosty, a\u00a0r\u00f3wnocze\u015bnie czytelny i\u00a0\u0142atwo dostosowywalny do\u00a0r\u00f3\u017cnych p\u0142aszczyzn styl graficzny.<\/p>\n Umiej\u0119tne po\u0142\u0105czenie \u017cywych, ale nie jaskrawych, dobrze dobranych kolor\u00f3w, wykorzystanie prostych i intuicyjnych ikon oraz wyeksponowanie tre\u015bci to wiod\u0105ce elementy techniki projektowania zorientowanego na content. Grafiki tylko dope\u0142niaj\u0105 tre\u015b\u0107, wspieraj\u0105c sfer\u0119 emocjonaln\u0105. Przy projektowaniu strony cz\u0119sto wykorzystywane s\u0105 technologie html5\/css3 oraz efekty typu parallax<\/em>, kt\u00f3re pozwalaj\u0105 uzyska\u0107 pewne z\u0142udzenie tr\u00f3jwymiarowo\u015bci poprzez przesuwanie fragment\u00f3w strony z r\u00f3\u017cn\u0105 pr\u0119dko\u015bci\u0105. W wyniku zastosowania powy\u017cszych technik otrzymujemy przejrzysty, czytelny, ale niepozbawiony ciekawych wizualnie efekt\u00f3w projekt.<\/p>\n Konsekwencj\u0105 my\u015blenia \u201epo pierwsze u\u017cyteczno\u015b\u0107, potem estetyka\u201d b\u0119dzie, jak wieszcz\u0105 eksperci, ca\u0142kowita \u015bmier\u0107 \u201ehamburger menu\u201d. Wskazuj\u0105 oni, \u017ce taka, wykorzystywana na pot\u0119g\u0119 przy responsywnych stronach nawigacja, nie jest intuicyjna dla u\u017cytkownik\u00f3w. Prekursor hamburgera \u2013 Facebook, ju\u017c dawno zrezygnowa\u0142 z takiej \u201e3-kreskowej\u201d nawigacji na rzecz dolnego tab bar (belki z najwa\u017cniejszymi celami strony), co pozytywnie wp\u0142yn\u0119\u0142o na wzrost zaanga\u017cowania u\u017cytkownik\u00f3w.<\/p>\n Typografia w r\u0119kach kreatywnego designera mo\u017ce pozytywnie uderzy\u0107 w odbiorc\u0119 przekazu wizualnego. Umiej\u0119tne wykorzystanie liter i ich nietypowy spos\u00f3b prezentacji (kr\u00f3j, wielko\u015b\u0107, wzajemna relacja) mo\u017ce zaowocowa\u0107 niezwyk\u0142\u0105 kompozycj\u0105 niemo\u017cliw\u0105 do uzyskania przy pomocy tradycyjnej grafiki. Cz\u0119stym zabiegiem jest wykorzystanie asymetrii, zw\u0142aszcza na stronach prezentuj\u0105cych du\u017ce ilo\u015bci tekst\u00f3w. Takie niesymetryczne uk\u0142ady sprawiaj\u0105, \u017ce design strony jest czytelny, unikalny i wyr\u00f3\u017cniaj\u0105cy si\u0119 na tle konkurencyjnych stron z tej samej tematyki.<\/p>\n \u017bywe kolory, nasycone barwy i bogatsze odcienie mog\u0105 okaza\u0107 si\u0119 trafione zw\u0142aszcza w przypadku tych marek, kt\u00f3re chc\u0105 przyci\u0105gn\u0105\u0107 uwag\u0119 potencjalnych konsument\u00f3w<\/em>, zw\u0142aszcza z m\u0142odszego pokolenia<\/strong>. Mocne i wyraziste tony mog\u0105 stanowi\u0107 doskona\u0142e t\u0142o do ekspozycji wa\u017cnych tre\u015bci \u2013 nag\u0142\u00f3wk\u00f3w, hase\u0142, blok\u00f3w tekstowych. Odchodzi si\u0119 wi\u0119c od przywi\u0105zania danej marki do korporacyjnych kolor\u00f3w na rzecz zapewnienia po\u017c\u0105danego wygl\u0105du poprawiaj\u0105cego widoczno\u015b\u0107 na stronie.<\/p>\n Oczywi\u015bcie, jak ka\u017cde eksperymenty, te techniki wymagaj\u0105 wywa\u017cenia, aby w rezultacie osi\u0105gn\u0105\u0107 atrakcyjno\u015b\u0107 i prostot\u0119 przekazu, w kt\u00f3rym w naturalny spos\u00f3b odnajdzie si\u0119 u\u017cytkownik.<\/p>\n Du\u017ce i wypo\u015brodkowane zdj\u0119cia, kolorystycznie wsp\u00f3\u0142graj\u0105ce ze sob\u0105 to g\u0142\u00f3wni bohaterowie strony zaprojektowanej w oparciu o najnowsze trendy. Zdj\u0119cia powinny by\u0107 odpowiednio dobrane, aby ich animacja stanowi\u0142a jeden p\u0142ynny i sp\u00f3jny wizualnie przekaz. Je\u015bli wiod\u0105c\u0105 kolorystyk\u0105 jest kolor niebieski \u2013 to wszystkie zdj\u0119cia prezentowane w formie slajdera<\/a> utrzymajmy w podobnej tonacji. Dzi\u0119ki temu prostemu zabiegowi otrzymamy p\u0142ynno\u015b\u0107 i przyjemno\u015b\u0107 w odbiorze.<\/p>\n Animacje<\/a> to skuteczny spos\u00f3b na wzrost zaanga\u017cowania u\u017cytkownika i nawi\u0105zania z nim interakcji. Ciekawym trendem jest wprowadzanie element\u00f3w ruchomego t\u0142a, kt\u00f3re w kilka sekund przyci\u0105gnie uwag\u0119 u\u017cytkownika.<\/p>\n Hitem roku 2018 b\u0119d\u0105 ruchome zdj\u0119cia (cinemagraphs), <\/em>w kt\u00f3rych wyst\u0119puje powtarzaj\u0105cy si\u0119 ruch. To nic innego jak najwy\u017cszej jako\u015bci grafiki w formacie GIF, \u00a0tworz\u0105ce iluzj\u0119 ogl\u0105dania filmu wideo. Zazwyczaj s\u0105 one przygotowane w oparciu o wykonan\u0105 seri\u0119 zdj\u0119\u0107 lub nagranie wideo.<\/p>\n Wraz z rozwojem technologii (HTML5, SVG, CSS3, JavaScript) strony mog\u0105 zyska\u0107 wi\u0119cej efekt\u00f3w wizualnych, kt\u00f3re zast\u0105pi\u0105 dominacj\u0119 statycznych obraz\u00f3w. Ka\u017cda akcja (animacja) sprzyja interakcji.<\/p>\n Zaanga\u017cowanie u\u017cytkownika, pobudzenie go do wi\u0119kszej aktywno\u015bci, sprowokowanie do po\u017c\u0105danego dzia\u0142ania to cel nadrz\u0119dny projektowania opartego na konwersacji. Ta interaktywno\u015b\u0107 musi by\u0107 szybka i intuicyjna. Opiera\u0107 si\u0119 mo\u017ce na mini-interakcjach zach\u0119caj\u0105cych u\u017cytkownik\u00f3w do komentowania, udost\u0119pniania post\u00f3w, dawania \u201e\u0142apki w g\u00f3r\u0119\u201d, poprzez komunikacj\u0119 z wirtualnym doradc\u0105 (Chatbot), na g\u0142osowych interfejsach sko\u0144czywszy.<\/p>\n Chatboty to programy komputerowe udaj\u0105ce realnego doradc\u0119, prowadz\u0105ce u\u017cytkownika poprzez specjalnie zaprogramowan\u0105 map\u0119 zachowa\u0144 zach\u0119caj\u0105c\u0105 do dialogu. Szczeg\u00f3lnie przydatne s\u0105 przy masowej obs\u0142udze klient\u00f3w. Dzi\u0119ki nim u\u017cytkownik w ka\u017cdej sytuacji, o ka\u017cdej porze mo\u017ce zadawa\u0107 pytania na komunikatorze, a odpowiedzi udziela mu sztuczna inteligencja<\/strong> (AI).<\/p>\n Wykorzystanie komunikator\u00f3w do automatyzacji e-zakup\u00f3w jest podstaw\u0105 tzw. conversational commerce. <\/em>Sprowadza si\u0119 to do komunikacji osoby odwiedzaj\u0105cej stron\u0119 sklepu internetowego z wirtualnym sprzedawc\u0105. Zastosowanie tego narz\u0119dzia w e-commerce umo\u017cliwia wytworzenie osobistej wi\u0119zi pomi\u0119dzy kupuj\u0105cym a sprzedaj\u0105cym, sprzyjaj\u0105cej szybkiemu rozwi\u0105zywaniu problem\u00f3w na ka\u017cdym etapie \u015bcie\u017cki zakupowej. To tak\u017ce doskona\u0142e narz\u0119dzie dla e-sklep\u00f3w przy planowaniu strategii cross & up-selling.<\/em><\/p>\n Rok 2018 wed\u0142ug ekspert\u00f3w b\u0119dzie rokiem interfejs\u00f3w g\u0142osowych (VUI \u2013 Voice User Interface<\/em>), czyli narz\u0119dzi, kt\u00f3re wykonaj\u0105 wypowiedziane przez u\u017cytkownika zadanie lub podpowiedz\u0105, co powinien w kolejnym kroku zrobi\u0107. Korzy\u015b\u0107 dla u\u017cytkownika jest ewidentna \u2013 zamiast samemu klika\u0107 w kolejne zak\u0142adki, wystarczy powiedzie\u0107, co si\u0119 chce znale\u017a\u0107. Robot wykona wszystkie czynno\u015bci i poda trafn\u0105 odpowied\u017a. Tyle teorii \u2013 a w praktyce wiele dost\u0119pnych na rynku interfejs\u00f3w g\u0142osowych (np. Alexa, Siri, Google Assistant) ma niedoci\u0105gni\u0119cia i nie do ko\u0144ca trafnie odgaduje faktyczne intencje u\u017cytkownika lub kontekst jego zapytania.<\/p>\n \u00a0<\/strong><\/p>\n Pami\u0119tajmy, \u017ce trendy tylko wskazuj\u0105 kierunek. Natomiast ka\u017cdy projekt jest inny, rz\u0105dzi si\u0119 swoimi realiami, wi\u0119c \u015blepe pod\u0105\u017canie za trendami oraz robienie projektu pod sw\u00f3j gust niekoniecznie mo\u017ce przynie\u015b\u0107 zamierzony skutek. W centrum naszego projektowania powinien zawsze sta\u0107 nasz u\u017cytkownik \u2013 finalny odbiorca, jego potrzeby, oczekiwania, przyzwyczajenia. To on musi szybko i prosto odnale\u017a\u0107 si\u0119 na naszej stronie oraz wykona\u0107 po\u017c\u0105dane przez nas akcje.\u00a0 W\u00f3wczas pojawi\u0105 si\u0119 obop\u00f3lne korzy\u015bci. <\/strong><\/p>\n \u00a0<\/em><\/p>\n \u0179r\u00f3d\u0142o: <\/em>Mediarun<\/em><\/a>, <\/em>Appchance<\/em><\/a><\/p>\n
Jakie trendy nadaj\u0105 ton projektowaniu nowoczesnego wizerunku strony? <\/strong><\/h2>\n
1. Mobile first, czyli bran\u017cowy kanon<\/strong><\/h3>\n
![\"7](\"https:\/\/wenet.pl\/blog\/wp-content\/uploads\/2018\/04\/Fotolia_120166782_Subscription_Monthly_M-1200x873.jpg\")
<\/p>\n2. Age-responsive design, czyli projektowanie uwzgl\u0119dniaj\u0105ce wiek u\u017cytkownika<\/strong><\/h3>\n
3. Projektowanie zorientowane na content, czyli liczy si\u0119 przede wszystkim UX<\/strong><\/h3>\n
4. Typografia, asymetria, nasycone barwy, czyli strona inna ni\u017c wszystkie<\/strong><\/h3>\n
5. Du\u017ce zdj\u0119cia, czyli g\u0142\u00f3wni bohaterowie akcji<\/strong><\/h3>\n
6. Animacje i ruchome zdj\u0119cia, czyli gra na emocjach<\/strong><\/h3>\n
7. Mini-interakcja, wirtualny doradca, g\u0142osowy interfejs, czyli projektowanie oparte na konwersacji <\/strong><\/h3>\n
![\"Nowe](\"https:\/\/hubspot-no-cache-eu1-prod.s3.amazonaws.com\/cta\/default\/25646044\/8265bd58-ea47-4c6a-9f25-dd290dd6f8c8.png\")
<\/a><\/span>