Fajne strony www. Wzory i przykłady. Ciekawe strony internetowe, które warto znać.

Co roku poja­wia­ją się nowe tren­dy w pro­jek­to­wa­niu stron www spo­wo­do­wa­ne postę­pem tech­no­lo­gicz­nym. Fajne stro­ny www, nie są dziś tym samym czym były wczo­raj. Poprzez wpro­wa­dze­nie CSS3 i HTML5 pro­jek­to­wa­nie bar­dzo się zmie­ni­ło, a dzię­ki jQuery i róż­nym narzę­dziom do mini­ma­li­za­cji, stro­ny sta­ły się nie­wia­ry­god­nie szyb­kie, wziąw­szy pod uwa­gę obsłu­gi­wa­ną przez nie ilość kodu.

W arty­ku­łach na temat faj­nych stron inter­ne­to­wych czę­sto nad­uży­wa­ne jest sło­wo nowo­cze­sność, jed­nak nowo­cze­sność sprzed kli­ku mie­się­cy nie jest już taka nowo­cze­sna. W tym roku jej przed­sta­wi­cie­la­mi są ład­ne pro­ejk­ty respon­syw­ne, któ­re dopa­so­wu­ją się płyn­nie do urzą­dze­nia na któ­rym są wyświe­tla­ne. Duże tła stwo­rzo­ne z foto­gra­fii, prze­zro­czy­stość CSS, pła­skie pro­jek­ty stron (flat design) albo mini­ma­li­stycz­ne prze­wi­ja­nie w nie­skoń­czo­ność, pro­jek­to­wa­nie na pełen ekran (ful­l­scre­en typo­gra­phy), ani­ma­cje CSS3 i kil­ka innych.

Nie ma jed­nej odpo­wie­dzi, na pyta­nie jak zapro­jek­to­wać faj­ną stro­nę inter­ne­to­wą. Najskuteczniejsze ser­wi­sy powsta­ją dzię­ki infor­ma­cją zwrot­nym z tego jak użyt­kow­ni­cy reagu­ją na nasze hipo­te­zy. Tylko przy­glą­da­nie się dzia­ła­niu użyt­kow­ni­ków w prak­ty­ce pozwa­la, nie­ustan­nie ulep­szać pro­jekt i sta­wać się lide­rem w bran­ży.

“Każda decy­zja odno­śnie pro­jek­tu stro­ny
to tyl­ko hipo­te­za. Jedynie testy na doce­lo­wych
użyt­kow­ni­kach dają wła­ści­we odpo­wie­dzi”

Układ każ­dej faj­nej stro­ny WWW, kolo­ry na stro­nie, czcion­ka i gra­fi­ki (lub ich brak) sta­no­wią o róż­ni­cy mię­dzy suk­ce­sem (niski wskaź­nik odrzu­ceń i wyjść, wyso­ka kon­wer­sja) a poraż­ką (wyso­ki wskaź­nik odrzu­ceń, niska war­tość sprze­da­ży). Oto 10 pro­stych wska­zó­wek jak popra­wić design waszej stro­ny inter­ne­to­wej.

"Standardowo, głów­ne opcje nawi­ga­cji umiesz­czo­ne są w pozio­mym pasku [menu] na górze stro­ny". Drugorzędne opcje powin­ny zna­leźć się pod głów­nym paskiem nawi­ga­cji lub po lewej stro­nie w for­mie tzw. paska bocz­ne­go. Dlaczego intu­icyj­na nawi­ga­cja jest tak waż­na? "Jeżeli użyt­kow­nik nie będzie mógł cze­goś zna­leźć to pra­wie pew­ne, że raczej wyj­dzie ze stro­ny, niż posta­ra się zna­leźć, co gdzie jest." Więc zamiast umiesz­czać na górze stro­ny lin­ki do mniej waż­nych stron i infor­ma­cji, któ­re odwo­dzą od akcji, lub głów­nych tre­ści, powin­ny się one zna­leźć "na dole stro­ny w stop­ce".

"Bardzo łatwo w dzi­siej­szych cza­sach zostać zbom­bar­do­wa­nym obra­za­mi, do tego stop­nia, że prze­sta­je­my prze­twa­rzać infor­ma­cje, gdy mamy do dys­po­zy­cji zbyt dużo opcji."

Aby zatrzy­mać odwie­dza­ją­cych na cie­ka­wej stro­nie inter­ne­to­wej „upew­nij­cie się, że na stro­nie nie ma rywa­li­zu­ją­cych ze sobą ele­men­tów “call to action” i wizu­al­ne­go nie­ła­du, któ­ry odwra­ca uwa­gę odwie­dza­ją­cych od naj­waż­niej­szej czę­ści stro­ny.” Aby jesz­cze bar­dziej obni­żyć poziom zaśmie­ce­nia „roz­waż­cie obni­że­nie licz­by opcji i lin­ków w nagłów­ku i stop­ce stro­ny. Dzięki temu przy­cią­gnie­cie uwa­gę do tych tre­ści, na któ­rych zale­ży wam naj­bar­dziej.

Na więk­szo­ści stron aka­pit to nie wię­cej niż 4 do 6 lini­jek tek­stu. Dłuższe, rzad­ko są czy­ta­ne. Dajcie odwie­dza­ją­cym tro­chę prze­strze­ni. „Pomiędzy aka­pi­ta­mi powin­no być wystar­cza­ją­co dużo wol­ne­go miej­sca. Dzięki temu oglą­da­ją­cy stro­nę lepiej przy­swoi wszyst­kie tre­ści, jakie ofe­ru­je fir­ma.

Odpowiedni układ stro­ny i puste miej­sce spra­wią, że odwie­dza­ją­cy sku­pią uwa­gę na tre­ściach i zapew­nią wła­ści­wy prze­pływ użyt­kow­ni­ków. W sie­ci i na urzą­dze­niach mobil­nych ist­nie­je dużo bodź­ców wizu­al­nych, co spra­wia, że mniej to tak napraw­dę wię­cej.

Nauczyliśmy się wyczu­wać fałsz na odle­głość. Modele zamiast praw­dzi­wych pra­cow­ni­ków, niko­go dziś nie zmy­lą. Zainwestujcie w dobre, pro­fe­sjo­nal­ne zdję­cia. Odwiedzający są w sta­nie roz­po­znać ama­torsz­czy­znę w kil­ka sekund. Odniosą wte­dy to samo wra­że­nie co do waszej stro­ny. Twoja fir­ma to nie ama­torsz­czy­zna. Pokaż to odwie­dza­ją­cym stro­nę inwe­stu­jąc w pro­fe­sjo­nal­ne foto­gra­fie, jeśli kie­ru­jesz swo­ją ofer­tę do dzie­ci, pole­ca­my usłu­gi stu­dia foto­gra­fii dzie­cię­cej Akuku. To są rekla­mo­we zdję­cia dzie­ci, któ­re napraw­dę robią wra­że­nie! Dobre zdję­cia „przy­cią­ga­ją wzrok i doda­ją tek­sto­wi emo­cji."

„Fotografie złej jako­ści lub takie, któ­re nie mają nic wspól­ne­go z waszym prze­ka­zem są z dru­giej stro­ny gor­sze niż brak jakich­kol­wiek obra­zów.

Bonusowa wska­zów­ka: „jeże­li chce­cie przy­cią­gnąć uwa­gę do kon­kret­ne­go przy­ci­sku lub tre­ści, załącz zdję­cie patrzą­cej na nie oso­by. Ludzkie twa­rze w natu­ral­ny spo­sób przy­cią­ga­ją naszą uwa­gę – a kie­dy widzi­my, że twarz na coś spo­glą­da, nasze oczy też tam podą­ża­ją.”

RWD = Responsive Web design = Strona responsywna.
To klienci decydują jakim urządzeniem patrzą na Twój biznes.