Zaprojektuj nowoczesną stronę

Piotr BaczyńskiEsencja Studio21 maja 2013, Warszawa

Jak powstaje strona internetowaw powszechnej opinii?

Informatyk

• programuje• wstawia treści• wkleja obrazki

Jak powstaje strona internetowaw powszechnej opinii?

Jak powstaje NOWOCZESNAstrona internetowa?

Zespół

• Analiza rynku• UX/UI• Identyfikacja wizualna• Copywriting• Programowanie• Content managing

Jak powstaje NOWOCZESNAstrona internetowa?

Pytania które powinnismy sobie zadać zanim zaczniemy tworzyć nową stronę

• Czemu ma służyć projektowana strona?• Do kogo jest skierowana?• Skąd przyjdą odwiedzający?• Które zawarte w niej informacje są kluczowe, a

które uzupełniające?• Czy odwiedzający stronę powinien wykonać

jakąś akcję?• Czy na stronie będą pojawiać aktualizacje?

Nowoczesny trend one-page –jak działa?

W teorii one-page to rodzaj www wykorzystujący tylko jedną stronę HTML

W praktyce to coś więcej…

... prezentacja ciągła: „telling a story”

... konkretność: najistotniejsze, esencjonalne informacje

... jednolitość: usługa / firma / produkt

Nowoczesny trend one-page – po co tyle zachodu?

Efektowny

Czytelny merytoryczny przekaz

Przejrzysty układ

Intuicyjna nawigacja

Wersja mobilna jest łatwiejsza do stworzenia

Nowoczesny trend one-page – przykłady

http://www.jaquet-droz.com/the-bird-repeater/en/

Nowoczesny trend one-page – przykłady

http://aquatilis.tv/

Nowoczesny trend one-page – przykłady

http://neomam.com/interactive/13reasons/

Nowoczesny trend one-page – przykłady

http://ifthesuitfits.brothers.se/en

Nowoczesny trend one-page – przykłady

http://www.samsungnote.cl/

Czy one-page jest zawszedobrym wyborem?

Sklepy internetowe

Serwisy społecznościowe

Portale

Serwisy z zaawansowanym SEO

One-page: gdzie szukać inspiracji?

Polecamy agregatory:

OnePageLove.com

AWWWARDS.com

OnePageMania.com

Paralaksa – modny efekt wizualny

Parallax Scrolling (pol. przewijanie równoległe) to ciekawa technika nadająca stronie głębi, wywołując wrażenie paralaksy podczas przewijania dowolnego obrazu i ruchu różnych obiektów.

Paralaksa – jak to działa?

http://matthew.wagerfield.com/parallax/

Paralaksa w praktyceWertykalnahttp://www.broken-twill.com/

Story-linehttp://www.dangersoffracking.com/

Time-linehttp://www.expresssolicitors.com/assets/nhs-payout-timeline.html

Horyzontalnahttp://1procent.zaginieni.pl/

Kreatywne wykorzystaniehttp://unfold.no/

Paralaksa – miny i pułapki

Nadmierne wykorzystanie może poskutkować:

Chaosem informacyjnymNiepożądanym odwróceniem uwagiPrzeciążeniem wagi strony

O 5 najistotniejszych trendach w webdesignie

• Responsive Web Design: dostępność i mobilność, otwarty układ

• OnePage: „Telling a story” i prostota przekazu• Kompozycja: kolory, czcionki, duże zdjęcia• Interaktywne efekty wizualne: paralaksa,

animacja, video• Infografika

HTML 5 - co można uzyskać tylko przy jego wykorzystaniu

• Animacje do stron WWW, np.: http://brightmedia.pl/

• Gry komputerowehttp://chrome.angrybirds.com/http://wolf3d.atw.hu/

• Interaktywne animacje 3D, np.:http://helloracer.com/webgl/

• http://neomam.com/interactive/13reasons/

Dlaczego HTML 5 to przyszłość sieci?

• Działa na dowolnym urządzeniu z aktualnymi przeglądarkami internetowymi

• Nie wymaga dodatkowych pluginów• Zastępuje technologię Flash• Można pisać w nim aplikacje mobilne bez

względu na natywne środowisko• Jest uniwersalnym odtwarzaczem video i audio• Składnia języka oferuje większe możliwości

Dziękuję za uwagę!

Piotr Baczyński+48 511 314 777pb@esencja-studio.pl