Czym jest paralaksa? Czy one-page jest zawsze dobrym wyborem? Co można uzyskać tylko przy wykorzystaniu HTML 5 i dlaczego HTML5 to przyszłość sieci? 5 najistoniejszych trendów w webdesignie.

1. Zaprojektuj nowoczesną stronę
Piotr Baczyński
Esencja Studio
21 maja 2013, Warszawa

2. Jak powstaje strona internetowa
w powszechnej opinii?
Informatyk
• programuje
• wstawia treści
• wkleja obrazki

3. Jak powstaje strona internetowa
w powszechnej opinii?

4. Jak powstaje NOWOCZESNA
strona internetowa?
Zespół
• Analiza rynku
• UX/UI
• Identyfikacja wizualna
• Copywriting
• Programowanie
• Content managing

5. Jak powstaje NOWOCZESNA
strona internetowa?

6. 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?

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

8. Nowoczesny trend one-page – po co
tyle zachodu?
Efektowny
Czytelny merytoryczny przekaz
Przejrzysty układ
Intuicyjna nawigacja
Wersja mobilna jest łatwiejsza do stworzenia

9. Nowoczesny trend one-page – przykłady
http://www.jaquet-droz.com/the-bird-repeater/en/

10. Nowoczesny trend one-page – przykłady
http://aquatilis.tv/

11. Nowoczesny trend one-page – przykłady
http://neomam.com/interactive/13reasons/

12. Nowoczesny trend one-page – przykłady
http://ifthesuitfits.brothers.se/en

13. Nowoczesny trend one-page – przykłady
http://www.samsungnote.cl/

14. Czy one-page jest zawsze
dobrym wyborem?
Sklepy internetowe
Serwisy społecznościowe
Portale
Serwisy z zaawansowanym SEO

15. One-page: gdzie szukać inspiracji?
Polecamy agregatory:
OnePageLove.com
AWWWARDS.com
OnePageMania.com

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

17. Paralaksa – jak to działa?
http://matthew.wagerfield.com/parallax/

18. Paralaksa w praktyce
Wertykalna
http://www.broken-twill.com/
Story-line
http://www.dangersoffracking.com/
Time-line
http://www.expresssolicitors.com/assets/nhs-payout-timeline.html
Horyzontalna
http://1procent.zaginieni.pl/
Kreatywne wykorzystanie
http://unfold.no/

19. Paralaksa – miny i pułapki
Nadmierne wykorzystanie może
poskutkować:
Chaosem informacyjnym
Niepożądanym odwróceniem uwagi
Przeciążeniem wagi strony

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

21. HTML 5 - co można uzyskać tylko przy
jego wykorzystaniu
• Animacje do stron WWW, np.:
http://brightmedia.pl/
• Gry komputerowe
http://chrome.angrybirds.com/
http://wolf3d.atw.hu/
• Interaktywne animacje 3D, np.:
http://helloracer.com/webgl/
• http://neomam.com/interactive/13reasons/

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

23. Dziękuję za uwagę!
Piotr Baczyński
+48 511 314 777
pb@esencja-studio.pl