16 nevjerojatnih primjera HTML-a

Stranica 1 od 2: Stranica 1

Neke od ovih web stranica koriste najnovije tehnologije za pomicanje granica onoga što je moguće na webu; drugi koriste tradicionalne principe dizajna za izgradnju lijepih, korisnih stranica. Bez obzira koristite li jednostavni HTML ili zaranjate u WebGL i 3D CSS, ovdje ćete pronaći nešto što će vas nadahnuti.

Također imamo sjajan izbor inspirativnih primjeri CSS-a za vas da istražite.



01. Appy Fizz

Ovaj dizajn kombinira super ravne i 3D efektne elemente



Ovaj dizajn kombinira super ravne i 3D efektne elemente

Appy Fizz je pjenušavo piće koje sebe opisuje kao 'šampanjac od voćnih napitaka'. Nova web stranica Appy Fizz dio je opsežnijeg projekta rebrandinga dizajnerske tvrtke sa sjedištem u New Yorku Sagmeister & Walsh . Kao što tvorci objašnjavaju u svojoj studiji slučaja, identitet 'vizualizira gazirane mjehuriće kroz dinamični grafički jezik 3D sfera i krugova'.

kako postati dizajner logotipa

Dizajn je zanimljiva kombinacija super ravnih i impliciranih trodimenzionalnih elemenata. Kružni jezik ispisan podebljanom crvenom, bijelom i crnom podsjeća me na rad Yayoi Kusame, svjetski poznatog umjetnika povezanog s pop artom, minimalizmom i točkicama.



Umjetnost i njezin prostor u komercijalnim industrijama tema je s kojom se Sagmeister & Walsh igraju tijekom svog rada, a zanimljivo je vidjeti kako se ova kombinacija prevodi na web. Ovdje postoji mnogo animacija i interaktivnih elemenata platna koji govore istim vizualnim jezikom - simulacija karbonizacije čak prati korisnikova miša dok se premješta preko web stranice.

02. Napravio nekolicina

Ova je konferencijska stranica prepuna skrivenih iznenađenja

Ova je konferencijska stranica prepuna skrivenih iznenađenja

Made by Few je godišnja web konferencija čiji je domaćin Nekoliko , agencija za dizajn i razvoj u Arkansasu. Sally Nixon Detaljne, svijetle ilustracije nalaze se u opisima jarbola i zvučnika, a potreban je trenutak da shvatite da se u gomili ponavlja, jer je tako suptilno.



Dok istražujete stranicu, ima još iznenađenja. 'U tvrtki Few volimo ugodne nesreće i potičemo istraživanje', kaže Arlton Lowry, suosnivač tvrtke Few i organizator konferencije. Pridržavajući se svoje filozofije istraživanja, skriveni dragulji raštrkani su po cijeloj stranici (nećemo ih sve dati, ali pokušajte pogoditi Konami kod!).

Ovi zabavni elementi web mjestu daju puno osobnosti koju Arlton pripisuje izravno kulturi agencije. 'Vjerujemo da kad ljudima pružite otvoreno i zabavno okruženje, ne može se reći što će od toga biti.'

03. Allbirds

Snažna fotografija proizvoda daje utjecaj ovoj web lokaciji

kako stvoriti izgled časopisa u
Snažna fotografija proizvoda daje utjecaj ovoj web lokaciji

Allbirds je marka sportske cipele iz zemlje s 29.221.344 ovaca. Počelo je kada je suosnivač Tim Brown uočio nevjerojatne kvalitete merino vune i zapitao se zašto se nikada prije nije koristila u obući.

Web stranica koja je izrađena pomoću Shopify kombinira fotografije životnog stila s ilustracijama. Rezultat je divno iskustvo koje ne govori samo priču o Allbirdsima, već vam daje i osjećaj za sam proizvod.

'Dizajniran je da prikaže nevjerojatnu pažnju prema detaljima i razmišljanjima koja stoje iza našeg dizajna proizvoda', objašnjava Brown u obrazloženju web stranice. 'Uložili smo velika sredstva u fotografiju - i kiwi fotografa sa sjedištem u New Yorku Henryja Hargreavesa - kako bismo oživjeli stranicu i artikulirali svoju misiju izrade boljih cipela na bolji način.'

I Brown i Crveni rog tim govori o svojoj krajnjoj predanosti UX-u web stranice i o tome kako su se naslonili na detalje koji se tako često previđaju. Odsjek s uobičajenim često postavljanim pitanjima oživljen je animiranim GIF-ovima, a ilustracija se koristi na cijeloj web lokaciji kao neočekivani motiv pripovijedanja.

04. Karim Rašid

Primjeri HTML-a: Karim Rashid

Novo nalazište Karima Rashida

Dizajner Karim Rashid plodan je koliko je i slavljen. S više od 3000 dizajna u proizvodnji i radom u 20 stalnih kolekcija širom svijeta, možda ne čudi da je njegova vlastita web stranica zauzela mjesto u posljednjih 10 godina. Dok nije naručio Anton & Irene , to je.

Sa svojim zaštitnim znakom koji obuhvaća zanimljive interakcije, emotivnu tipografiju i uistinu agnostički raspored uređaja, dvojac je predstavio web mjesto koje poziva na snažna istraživanja. Što je, naravno, bila poanta: 'Naš je glavni cilj bio predstaviti mnoštvo proizvoda i projekata na vizualno primamljiv način', kažu par na svom blogu.

Mnoštvo proizvoda također je predstavljalo izazov. Kako u odgovornom okruženju isporučiti više od 5000 slika različitih oblika i veličina? Rješenje: preispitivanje konvencionalnih izgleda i lo-fi pristup strukturiranju kako bi se dobila precizna, fleksibilna mreža u kombinaciji s podebljanom (ali nenametljivom) tipografijom.

Možda najupečatljivija stvar na Rashidovom novom mjestu su neprimjetni prijelazi između okvira za prikaz. 'Uvijek dizajniramo sve zaslone istodobno ... Onog trenutka kada imamo ideju za komponentu ili izgled, isprobamo je na svim zaslonima i provjerimo ima li smisla općenito.'

05. Histografija

Primjeri HTML-a: histografija

Interaktivni vremenski slijed od Velikog praska do danas

Histografija - izraelski dizajner i programer Ubiti Staubera Završni projekt na Akademiji za umjetnost i dizajn Bezalel - interaktivni je vremenski slijed koji traje najmanje 14 milijardi godina, od Velikog praska do danas. Doslovno se protežući kroz čitavu povijest poznatog svemira, neizmjerna je, interaktivna infografija koja izaziva naša predodžbe o tome kako komunicirati složenim subjektima.

Pokrivajući teme u rasponu od književnosti i glazbe do atentata, izuma i religije, vremenska crta histografije poziva nas da istražimo događaje iz naše bogate prošlosti, svaki dinamički povučen s Wikipedije i prikazan na ekranu kao mala crna točka. Postoje dva načina: vodoravni prikaz s lijeva na desno koji omogućava korisniku da se useli u određeno vremensko razdoblje; ili vremenski stroj nalik spirali koji predstavlja kurirani popis ključnih događaja.

Stauber kaže da ga je oduvijek fascinirala ideja prikazivanja povijesti koja se odvija tijekom vremena: 'Vremenske su crte najpopularniji način vizualizacije povijesti, ali ipak sam ih osjećao uvijek vrlo ograničene. Od početka ovog projekta znao sam da želim stvoriti vremensku liniju koja nije ograničena na godinu, desetljeće ili razdoblje. Želio sam vremensku traku koja može sadržavati cijelu povijest. '

06. Na Mreži

Primjeri HTML-a: Na mreži

Međunarodni kvartovski vodič, čiji su kreatori dizajneri

Iako je za mnoge stresno, preseljenje ureda također može biti izvrstan izvor inspiracije. Kada Hyperakt preseljeni u Gowanus u Brooklynu, uzbuđenje tima otkrivanjem skrivenog blaga njihovog novog okruženja dovelo je do utjelovljenja filma On the Grid: međunarodnog kvartovskog vodiča, čiji su kreatori dizajneri.

Stranica je minimalistička, ali impresivna i bila je dizajniran da bude visoko strukturiran, a opet razigran i dinamičan, baš kao i sadržaj na web mjestu '. Estetika bez gluposti izbjegava tipičnu zamku slike junaka i sjajno koristi vidni prostor čak i na ekstremnim veličinama.

macbook pro 15-inčno kućište osjetljivo na dodir

A tu je i pažnja prema detaljima. Od animiranog logotipa do 100 (i računajući) jedinstvenih gradskih ilustracija i jednostavnih animacija, On Grid očito nije samo još jedan lifestyle blog.

Na svom blogu, Hyperakt objašnjava kako je želio stvoriti 'pouzdan resurs koji bilježi istinsku bit mjesta koja volimo, kroz prekrasne fotografije, iskrene opise i kustos vođen dizajnom.' S više kustosa koji se pridružuju svakog mjeseca, On Grid uskoro može doći u susjedstvo u vašoj blizini.

07. LS Productions

Primjeri HTML-a: LS Productions

Web stranicu LS Productions izradila je edinburška agencija Whitespace

LS Productions nedavno je proširio svoje vidike pronalaženjem velikih lokacija (pod nadzorom Location Scotland) kako bi postao ono što je danas najveća tvrtka za proizvodnju fotografija i usluga u Velikoj Britaniji. Njegovo brendiranje i web stranicu izradila je agencija Edinburgh Bijeli prostor .

Viši dizajner Mike Bryant kaže da je prioritet bio dopustiti radu tvrtke da govori: 'Imaju tako nevjerojatan portfelj, od fotografija do pokreta, da nam je glavni zadatak bio stvoriti strukturu koja nadopunjuje minimalni tip slikom.' Ovaj pristup odmah se očituje na početnoj stranici koja široku ponudu tvrtke obuhvaća prikladnom mješavinom animirane tipografije i video zapisa.

Glavni tehnički izazovi - smanjivanje vremena učitavanja na minimum i upravljanje različitim usjevima za visokokvalitetne slike - prevladani su zamjenom slika veće razlučivosti po potrebi i upotrebom JavaScripta za dinamičko upravljanje visinom i omjerima slika na različitim veličinama zaslona .

Konačni rezultat, kaže Bryant, 'uklonjena je stranica koja koristi modularne ploče, čist tip i minimalnu paletu boja kako bi djelovala kao suptilna kulisa za prekrasan rad'.

08. Gospodar

Primjeri HTML-a: Lordz

Video pomaže uhvatiti srce ove plesne akademije

'Igra je starija od kulture, jer kultura ... uvijek pretpostavlja ljudsko društvo, a životinje nisu čekale da ih čovjek nauči njihovom igranju.' Tako započinje Homo Ludens Johana Huizinge, gdje autor raspravlja o utjecaju igre u društvu.

Element igre je onaj koji Lordz, plesna akademija sa sjedištem u Švicarskoj, shvaća ozbiljno. Za Lordza ples nije samo pokret; to je oblik umjetnosti, razigrano sredstvo kulturnog izražavanja. Zadatak dizajniranja web mjesta za akademiju, Eidenbenz / Zürcher koristio je ovaj etos kako bi vodio svoje umjetničko usmjerenje.

'Željeli smo stvoriti nešto što digitalno iskustvo suočava sa srcem Homo Ludensa', objašnjava umjetnički direktor i partner Daniel Zürcher. 'Razigran način dobivanja uvida u svakodnevnu plesnu praksu; pokret, osjećaji i tako dalje. Da bismo to postigli, koristili smo najnoviju tehnologiju u snimanju, postprodukciji i, naravno, programiranju. '

kako je blender teško naučiti

Rezultat je prilično zapanjujući; jedinstveno prepoznatljivo i nadahnjujuće mjesto koje doista zauzima srce organizacije upotrebom videa - rijetko podvig ovih dana.

Sljedeća stranica: Još 8 zadivljujućih primjera HTML-a

  • 1
  • dva

Trenutna stranica: Stranica 1

Sljedeća stranica Stranica 2