Zaprojektuj nowoczesną stronę - Piotr Baczyński, Esencja Studio
-
Upload
konferencja-sektor-30-technologie-w-organizacjach-pozarzadowych -
Category
Technology
-
view
183 -
download
0
description
Transcript of Zaprojektuj nowoczesną stronę - Piotr Baczyński, Esencja Studio
![Page 1: Zaprojektuj nowoczesną stronę - Piotr Baczyński, Esencja Studio](https://reader036.fdocuments.net/reader036/viewer/2022062405/55637cf0d8b42a3b708b52e6/html5/thumbnails/1.jpg)
Zaprojektuj nowoczesną stronę
Piotr BaczyńskiEsencja Studio21 maja 2013, Warszawa
![Page 2: Zaprojektuj nowoczesną stronę - Piotr Baczyński, Esencja Studio](https://reader036.fdocuments.net/reader036/viewer/2022062405/55637cf0d8b42a3b708b52e6/html5/thumbnails/2.jpg)
Jak powstaje strona internetowaw powszechnej opinii?
Informatyk
• programuje• wstawia treści• wkleja obrazki
![Page 3: Zaprojektuj nowoczesną stronę - Piotr Baczyński, Esencja Studio](https://reader036.fdocuments.net/reader036/viewer/2022062405/55637cf0d8b42a3b708b52e6/html5/thumbnails/3.jpg)
Jak powstaje strona internetowaw powszechnej opinii?
![Page 4: Zaprojektuj nowoczesną stronę - Piotr Baczyński, Esencja Studio](https://reader036.fdocuments.net/reader036/viewer/2022062405/55637cf0d8b42a3b708b52e6/html5/thumbnails/4.jpg)
Jak powstaje NOWOCZESNAstrona internetowa?
Zespół
• Analiza rynku• UX/UI• Identyfikacja wizualna• Copywriting• Programowanie• Content managing
![Page 5: Zaprojektuj nowoczesną stronę - Piotr Baczyński, Esencja Studio](https://reader036.fdocuments.net/reader036/viewer/2022062405/55637cf0d8b42a3b708b52e6/html5/thumbnails/5.jpg)
Jak powstaje NOWOCZESNAstrona internetowa?
![Page 6: Zaprojektuj nowoczesną stronę - Piotr Baczyński, Esencja Studio](https://reader036.fdocuments.net/reader036/viewer/2022062405/55637cf0d8b42a3b708b52e6/html5/thumbnails/6.jpg)
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?
![Page 7: Zaprojektuj nowoczesną stronę - Piotr Baczyński, Esencja Studio](https://reader036.fdocuments.net/reader036/viewer/2022062405/55637cf0d8b42a3b708b52e6/html5/thumbnails/7.jpg)
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
![Page 8: Zaprojektuj nowoczesną stronę - Piotr Baczyński, Esencja Studio](https://reader036.fdocuments.net/reader036/viewer/2022062405/55637cf0d8b42a3b708b52e6/html5/thumbnails/8.jpg)
Nowoczesny trend one-page – po co tyle zachodu?
Efektowny
Czytelny merytoryczny przekaz
Przejrzysty układ
Intuicyjna nawigacja
Wersja mobilna jest łatwiejsza do stworzenia
![Page 9: Zaprojektuj nowoczesną stronę - Piotr Baczyński, Esencja Studio](https://reader036.fdocuments.net/reader036/viewer/2022062405/55637cf0d8b42a3b708b52e6/html5/thumbnails/9.jpg)
Nowoczesny trend one-page – przykłady
http://www.jaquet-droz.com/the-bird-repeater/en/
![Page 10: Zaprojektuj nowoczesną stronę - Piotr Baczyński, Esencja Studio](https://reader036.fdocuments.net/reader036/viewer/2022062405/55637cf0d8b42a3b708b52e6/html5/thumbnails/10.jpg)
Nowoczesny trend one-page – przykłady
http://aquatilis.tv/
![Page 11: Zaprojektuj nowoczesną stronę - Piotr Baczyński, Esencja Studio](https://reader036.fdocuments.net/reader036/viewer/2022062405/55637cf0d8b42a3b708b52e6/html5/thumbnails/11.jpg)
Nowoczesny trend one-page – przykłady
http://neomam.com/interactive/13reasons/
![Page 12: Zaprojektuj nowoczesną stronę - Piotr Baczyński, Esencja Studio](https://reader036.fdocuments.net/reader036/viewer/2022062405/55637cf0d8b42a3b708b52e6/html5/thumbnails/12.jpg)
Nowoczesny trend one-page – przykłady
http://ifthesuitfits.brothers.se/en
![Page 13: Zaprojektuj nowoczesną stronę - Piotr Baczyński, Esencja Studio](https://reader036.fdocuments.net/reader036/viewer/2022062405/55637cf0d8b42a3b708b52e6/html5/thumbnails/13.jpg)
Nowoczesny trend one-page – przykłady
http://www.samsungnote.cl/
![Page 14: Zaprojektuj nowoczesną stronę - Piotr Baczyński, Esencja Studio](https://reader036.fdocuments.net/reader036/viewer/2022062405/55637cf0d8b42a3b708b52e6/html5/thumbnails/14.jpg)
Czy one-page jest zawszedobrym wyborem?
Sklepy internetowe
Serwisy społecznościowe
Portale
Serwisy z zaawansowanym SEO
![Page 15: Zaprojektuj nowoczesną stronę - Piotr Baczyński, Esencja Studio](https://reader036.fdocuments.net/reader036/viewer/2022062405/55637cf0d8b42a3b708b52e6/html5/thumbnails/15.jpg)
One-page: gdzie szukać inspiracji?
Polecamy agregatory:
OnePageLove.com
AWWWARDS.com
OnePageMania.com
![Page 16: Zaprojektuj nowoczesną stronę - Piotr Baczyński, Esencja Studio](https://reader036.fdocuments.net/reader036/viewer/2022062405/55637cf0d8b42a3b708b52e6/html5/thumbnails/16.jpg)
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.
![Page 17: Zaprojektuj nowoczesną stronę - Piotr Baczyński, Esencja Studio](https://reader036.fdocuments.net/reader036/viewer/2022062405/55637cf0d8b42a3b708b52e6/html5/thumbnails/17.jpg)
Paralaksa – jak to działa?
http://matthew.wagerfield.com/parallax/
![Page 18: Zaprojektuj nowoczesną stronę - Piotr Baczyński, Esencja Studio](https://reader036.fdocuments.net/reader036/viewer/2022062405/55637cf0d8b42a3b708b52e6/html5/thumbnails/18.jpg)
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/
![Page 19: Zaprojektuj nowoczesną stronę - Piotr Baczyński, Esencja Studio](https://reader036.fdocuments.net/reader036/viewer/2022062405/55637cf0d8b42a3b708b52e6/html5/thumbnails/19.jpg)
Paralaksa – miny i pułapki
Nadmierne wykorzystanie może poskutkować:
Chaosem informacyjnymNiepożądanym odwróceniem uwagiPrzeciążeniem wagi strony
![Page 20: Zaprojektuj nowoczesną stronę - Piotr Baczyński, Esencja Studio](https://reader036.fdocuments.net/reader036/viewer/2022062405/55637cf0d8b42a3b708b52e6/html5/thumbnails/20.jpg)
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
![Page 21: Zaprojektuj nowoczesną stronę - Piotr Baczyński, Esencja Studio](https://reader036.fdocuments.net/reader036/viewer/2022062405/55637cf0d8b42a3b708b52e6/html5/thumbnails/21.jpg)
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/
![Page 22: Zaprojektuj nowoczesną stronę - Piotr Baczyński, Esencja Studio](https://reader036.fdocuments.net/reader036/viewer/2022062405/55637cf0d8b42a3b708b52e6/html5/thumbnails/22.jpg)
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