Tvoříme digitální svět a bojujeme za lepší grafiku a web!

Experimentální webdesign 2016+

Experimentální webdesign a webové trendy 2016/17

Každý rok sebou přináší inovace v internetové tvorbě, zejména na poli webdesignu a konkrétně v možnostech webové animace. Podívejme se na několik zajímavých experimentů, které se mohou snadno stát standardem.

Filmová slideshow

boligreisen.no

Nabízí skutečnou podívanou ve formě hraného filmu s 3D postprodukcí. Film je rozdělený na jednotlivé slidy, jež postupně odkrývají scénář webu. Odvážný a nejspíše finančně náročný projekt zaujme nejen nápadem, ale i provedením. Jeho potenciál vidíme zejména v posílení brandu.

boligreisen

Video + HTML 5 / JS Animace

thewebsitebaba.com

Nálož kreativity vytvořená kombinací smyčkových videí, HTML 5 + Canvas animace. Cílem je omámit uživatele řadou nečekaných nápadů, kdy na sebe jednotlivé scrollovací slidy navazují a tvoří vizuální příběh. Pěkně se na to dívá, ale není to nic pro pomalé internety☺

thewebsitebaba

Slideshow s pevným prvkem

flyjetedge.com

Letecká společnost Jet Edge svoji homepage postavila na fullscreenové slideshow doplněné o pevný prvek, v tomto případě křídlo letadla, který zůstává neměnný, zatímco na pozadí se mění destinace. Povšimněte si také jemné animace proudění větru u křídla a pomalého pohybu pozadí, to vytváří celkově realističtější atmosféru, která je přitom vytvořena pouze ze statických obrázků.

flyjetedge

E-shop vychytávky

bellroy.com

Vybrané produkty jsou doplněny o úvodní sekvenční animaci čili animaci vytvořenou ze snímků, jež originálním způsobem představují využití produktu.

bellroy

klamert.cz

Pomocí průhlednosti pozadí jednotlivých produktů se v detailu místo klasické produktové fotografie generuje vždy imagová fotografie. Není to ten pravý typ imagové fotky, ale celkový pohled na produkt tento dojem vytváří, aniž by bylo nutné velký obrázek připravovat a stahovat pro každý výrobek. Umožňuje to také rychlé přepínání obrázku při změně konfigurace pera.

klameret

Smyčková animace

kovast.cz

Animace vytvořená ze statických snímků, doplněná i o animované části, a sestříhaná do navazující krátké smyčky. Délka smyčky má obvykle jen pár vteřin (5 - 15 s), ale díky plynulému napojení vytváří nekonečné video.

kovast 

jirkaspol.cz

4 weby se 4 různými smyčkovými animacemi.

jirkaspol

Vektorová animace

species-in-pieces.com

Programované vektorové animace postavené na HTML 5, Canvasu a JavaScriptu.

species-in-pieces

Animace pomocí spritu

nema.cz

Animace je vytvořena ve VFX (vizuální efekty) softwaru. Vyexportují se jednotlivé snímky a následně spojí ve filmový pás. Na webu se poté animace přehraje pomocí HTML 5 jako série obrázků z jednoho načteného průhledného png.

nema

afla.cz

Stejná metoda. Vhodná zejména pokud potřebujeme provést sérii velmi krátkých animací, ale zároveň chceme celkový běh animace delší. Datově úspornější.

afla

Detailní webdesign a automatická změna jazyka

alcasys.cz

Čím dál častěji se tvoří webdesign méně graficky komplikovaný, bez barevných přechodů, bevelů a podobných vizuálních doplňků, bez účelu. Trendem je navrhnout nejen šablonu webu ale i design pro konkrétní obsah a strukturu každé podstránky. Zde se místo standardního nalití obsahu do připravené šablony, připraví design pro jednotlivé textové bloky, které se doplňují o vizuální poutače pozornosti.

alcasys 

Často se můžete setkat i s automatickým přepnutím jazyka webu do jeho domorodého.

solaris.media

Mrkněte také na web SOLARISU. Např. v kontaktu je použit Street view, které využívá 360° fotografii ve spolupráci s gyroskopem v mobilním telefonu jako interaktivní virtuální prohlídku. Přitom tato funkce je u google map standardní a může ji využít každý.

solaris

Samozřejmě i web digitalni.media je jedním malým experimentem

Zpátky na začátek stránky