Kiedy w 1991 r. brytyjski naukowiec z Europejskiego Ośrodka Badań Jądrowych pokazał w Internecie pierwszą stronę internetową zapewne nie spodziewał się, że 20 lat później będzie w stanie ją odtworzyć nawet gimnazjalista. W sumie nie ma się co dziwić. Nie była ona zbyt skomplikowana. Zresztą zobaczcie sami. Pod tym adresem można ją sobie zobaczyć. Jest to swoisty pomnik Internetu. Jak widać o grafice w latach 90-tych nie było w ogóle mowy. Królował tekst. Potem, w miarę postępu technologicznego sprzęt i sama sieć pozwalały na więcej. Ciężko sobie wyobrazić stronę bez kolorów, zdjęć czy efektów graficznych.

W dzisiejszych czasach prostą witrynę może postawić właściwie każdy. Czy to wykorzystując darmowe CMS-y, czy kreatora WWW. Za bardziej skomplikowane projekty powinni oczywiście się wziąć profesjonaliści ale faktem jest iż mnogość dostępnych narzędzi sprawiła że coś co kiedyś stworzył naukowiec dziś może stworzyć każdy kto ma trochę pojęcia w tym temacie.

Jak się dziś robi strony WWW

Przez te wszystkie lata przewinęło się mnóstwo styli i trendów tworzenia stron WWW. Zapewne za kolejne kilkanaście lat pojawią się jeszcze nowsze rozwiązania a obecne projekty będą wzbudzać śmiech jednak tym będziemy martwić się kiedyś. Obecnie króluje prostota i minimalizm, elementy mają być płaskie i lekkie (Flat Design), grafika ma być duża i czytelna a całość poprawnie wyświetlać się na urządzeniach mobilnych (Responsive Web Design).

Efektowny „efekt”

To chyba jeden z moich ulubionych trendów w webdesignie. Efekt Parallax, bo o nim mowa, pozwala przedstawić serwis w całkiem nowym świetle. Pierwsze strony oparte o te rozwiązanie zaczęły pojawiać się już w 2011 r. Pomysł szybko się przyjął i nie trzeba było długo czekać na wysyp tego typu witryn. Screen górze pochodzi z jednej z nich.

Samo słowo paralaksa zostało wzięte z astronomii i oznacza w dużym skrócie przemieszczenie lub różnicę w pozycji obiektu widzianego z różnych kierunków. Zastanawiacie się w jaki sposób znalazło to zastosowanie w webdesignie? Na początek przytoczę słowa Mariusza, czyli osoby która właśnie w oparciu o ów efekt tworzy nową odsłonę naszego serwisu:

Parallax co bardzo ciekawy efekt, który potrafi w znacznym stopniu uatrakcyjnić wygląd naszej strony, dodając jej nieco przestrzeni i "wirtualnej perspektywy". Idąc nieco dalej możemy tworzyć bardziej skomplikowane kompozycje oparte na transparentnych plikach .png przemieszczających się względem siebie w trakcie scrollowania strony. Wszystko zależy od naszej wyobraźni i zaangażowania w projekt no i od umiejętności wykorzystania tego narzędzia.

Najprościej rzecz ujmując, efekt ten pozwala przedstawić wszystkie elementy strony w taki sposób iż będą one się przemieszczać podczas przeglądania kolejnych odsłonach widoku (wszerz lub wzdłuż). W miarę scrollowania strony ukazują się nam coraz to nowe elementy. Od strony technicznej nie jest to jakaś trudna i skomplikowana sprawa. Całość opiera się o HTML5, CSS3 oraz jQuery. W rezultacie naszym oczom objawia się nowoczesna strona z pozornym efektem 3D która zachęci do dłuższego pozostania i co tu dużo mówić podziwiania.

Jest to idealne rozwiązanie jeśli chce się przedstawić jakieś konkretne funkcje, korzyści czy wygląd prezentowanego produktu. Zresztą jak wspomniał nasz ekspert, wszystko zależy od kreatywności i wyobraźni twórcy. Przedstawić można tam dosłownie wszystko. Zobaczcie sami.

[ess_grid settings=’{"entry-skin":"1","layout-sizing":"boxed","grid-layout":"even","spacings":"0","rows-unlimited":"off","columns":"2","rows":"3","grid-animation":"fade","use-spinner":"0"}’ layers=’{"custom-image":{"00":"8937","01":"8936","02":"8935","03":"8934","04":"8933"},"custom-type":{"00":"image","01":"image","02":"image","03":"image","04":"image"},"use-skin":{"00":"-1","01":"-1","02":"-1","03":"-1","04":"-1"},"title":{"00":"Spotify","01":"inTacto","02":"Health","03":"Pi","04":"tinke"}}’][/ess_grid]

Mariusz Korzeniecki

O Autorze