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

> strona internetowa > ciekawe strony-internetowe

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.

5 fajnych stron www,
które zwyciężają w konkursach kreatywności

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.

Buduj wrażenie marki, której warto zaufać

Opracujcie pro­fe­sjo­nal­ne logo i umieść­cie je na stro­nie. Logo jest
bar­dzo waż­ną czę­ścią mar­ki, upew­nij­cie się więc, że jest widocz­ne na stro­nie. Użyjcie gra­fi­ki o wyso­kiej roz­dziel­czo­ści, któ­ra powin­na zna­leźć się w lewym gór­nym rogu każ­dej pod­stro­ny.

Dobrze jest też w logo umie­ścić link do stro­ny głów­nej. Pomaga to odwie­dza­ją­cym w nawi­ga­cji na każ­dej faj­nej stro­nie inter­ne­to­wej.

Nawigacja powinna być intuicyjna.

"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".

Pozbądź się zbędnych elementów

"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.


Akapity muszą być krótkie


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.

Kolorystyka może uratować, lub zniszczyć projekt każdej strony

Rozważnie korzy­staj­cie z kolo­rów. Użycie „sto­no­wa­nej pale­ty kolo­ry­stycz­nej pomo­że stwo­rzyć ele­ganc­ki, czy­sty i nowo­cze­sny design stro­ny.” Jest rów­nież zwo­len­ni­kiem mądre­go uży­cia kolo­rów. Odrobina kolo­ru na stro­nie – dla pod­kre­śle­nia nagłów­ków lub klu­czo­wych gra­fik – poma­ga odwie­dza­ją­cym odna­leźć naj­waż­niej­sze tre­ści. Ważne jest też, by użyć pale­ty, któ­ra dopeł­nia wasze logo i pasu­je do innych mate­ria­łów mar­ke­tin­go­wych.

Dowiedz się wię­cej na temat zna­cze­nia kolo­rów w rekla­mie.

Fotografie muszą być wiarygodne

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ą.”

Każda strona jest stroną lądowania. (Landing Page)

Zaprojektujcie każ­dą stro­nę jako stro­nę doce­lo­wą. Większość cie­ka­wych stron WWW jest zapro­jek­to­wa­na w spo­sób, któ­ry zakła­da, że użyt­kow­nik wcho­dzi przez stro­nę głów­ną i dalej prze­glą­da stro­nę.

W rze­czy­wi­sto­ści jed­nak, więk­szość wizyt zaczy­na się na cie­ka­wej
stro­nie, któ­ra nie jest stro­ną głów­ną. Musicie więc zapro­jek­to­wać
stro­nę tak, żeby odwie­dza­ją­cy zna­lazł klu­czo­we infor­ma­cje, nie­waż­ne przez jaką pod­stro­nę wej­dzie.

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

Użyjcie respon­syw­ne­go desi­gnu, któ­ry auto­ma­tycz­nie dosto­so­wu­je się do spo­so­bu prze­glą­da­nia faj­nej stro­ny www. „Responsywny design spra­wia, że stro­na dosto­su­je się do roz­mia­rów prze­glą­dar­ki. Jest to lep­sze roz­wią­za­nie niż osob­na stro­na na każ­de urzą­dze­nie.” Co prze­kła­da się na lep­sze wra­że­nia odwie­dza­ją­cych, jak twier­dzi Jayme Pretzloff, dyrek­tor mar­ke­tin­gu sie­cio­we­go w Wixon Jewelers. A lep­sze wra­że­nia odwie­dza­ją­cych prze­kła­da­ją się na dłuż­szy czas spę­dzo­ny na stro­nie i wyż­sze współ­czyn­ni­ki kon­wer­sji.

Nie inwe­stuj w tech­no­lo­gię, któ­re umar­ły. Zapomnij o Flashu. „Po czę­ści dzię­ki dys­pu­cie mię­dzy Adobe i Apple, dni Flasha jako stan­dar­du stron inter­ne­to­wych dobie­ga­ją koń­ca, po co więc go wybie­rać, sko­ro w alter­na­ty­wie są roz­wią­za­nia bar­dziej przy­ja­zne użyt­kow­ni­kom i sie­ci? Użyjcie HTML5. „HTML5 zysku­je w sie­ci coraz więk­sze popar­cie, wypo­sa­żo­ny jest w tekst dużo lep­szy dla prze­glą­da­rek inter­ne­to­wych i funk­cjo­nu­je na wie­lu popu­lar­nych sys­te­mach ope­ra­cyj­nych urzą­dzeń mobil­nych bez koniecz­no­ści pobie­ra­nia wtycz­ki. Czego nie moż­na powie­dzieć o fla­shu.”