16 nuostabių HTML pavyzdžių

Puslapis 1 iš 2: Puslapis 1

Kai kurios iš šių svetainių naudoja naujausias technologijas, kad peržengtų tai, kas įmanoma internete; kiti naudojasi tradiciniais projektavimo principais kurdami gražias, tinkamas naudoti svetaines. Nesvarbu, ar naudojate paprastą HTML, ar neriate į „WebGL“ ir „3D CSS“, čia rasite ką nors įkvėpti.

Mes taip pat turime puikų pasirinkimą įkvepiančių CSS pavyzdžių kad galėtum tyrinėti.

01. „Appy Fizz“

Šis dizainas sujungia ypač plokščius ir 3D efekto elementus



Šis dizainas sujungia ypač plokščius ir 3D efekto elementus

„Appy Fizz“ yra putojantis gėrimas, apibūdinantis save kaip „vaisių gėrimų šampaną“. Naujoji „Appy Fizz“ svetainė buvo platesnio Niujorko valstijos dizaino firmos prekės ženklo keitimo projekto dalis Sagmeister & Walsh . Kaip kūrėjai paaiškina savo atvejo tyrime, tapatybė „vizualizuoja gazuotus burbulus per dinamišką 3D sferų ir apskritimų grafinę kalbą“.

Dizainas yra įdomus itin plokščių ir numanomų trimačių elementų derinys. Apskrito kalba, parašyta paryškinta raudona, balta ir juoda spalva, man primena visame pasaulyje žinomo menininko Yayoi Kusama kūryba, susijusi su popmenu, minimalizmu ir taškeliais.

Menas ir jo erdvė komercinėse industrijose yra ta tema, kuria Sagmeisteris ir Walshas žaidžia visą savo darbą, ir įdomu pamatyti, kaip šis derinys verčiamas į internetą. Čia yra daugybė animacijų ir interaktyvių drobės elementų, kalbančių ta pačia vaizdine kalba - karbonizacijos modeliavimas netgi seka vartotojo pelę, kai jis yra judinamas svetainėje.

02. Pagaminta nedaug

Šioje konferencijų svetainėje gausu paslėptų staigmenų

Šioje konferencijų svetainėje gausu paslėptų staigmenų

„Made by Few“ yra kasmetinė internetinė konferencija, kurią rengia Nedaug , dizaino ir plėtros agentūra Arkanzase. Sally Nixon Detalios, ryškios iliustracijos pateikiamos stiebo antraštėje ir garsiakalbių aprašymuose, ir reikia akimirkos, kol supranti, kad minioje pasikartoja, nes tai taip subtilu.

geriausias iphone 5s maitinimo bankas

Kai tyrinėjate svetainę, yra ir daugiau netikėtumų. „„ Few “mes mėgstame malonias avarijas ir skatiname tyrinėti“, - sako „Few“ įkūrėjas ir konferencijų organizatorius Arltonas Lowry. Laikydamiesi savo tyrimo filosofijos, visoje svetainėje yra paslėptų brangakmenių (mes jų neatiduosime, bet pabandykite patekti į Konami kodą!).

Šie įdomūs elementai suteikia svetainei daug asmenybės, kurią Arltonas priskiria tiesiogiai agentūros kultūrai. 'Mes tikime, kad kai žmonėms suteiksite atvirą ir linksmą aplinką, negalima pasakyti, kas iš to išeis'.

03. Visi paukščiai

Stiprus gaminių fotografavimas suteikia šiai svetainei įtakos

Stiprus gaminių fotografavimas suteikia šiai svetainei įtakos

„Allbirds“ yra sportinių batų prekės ženklas iš 29 221 344 avių. Jis prasidėjo, kai vienas iš įkūrėjų Timas Brownas stebėjo nuostabias merino vilnos savybes ir stebėjosi, kodėl ji niekada anksčiau nebuvo naudojama avalynėje.

Svetainėje, sukurtoje naudojant „Shopify“, gyvenimo būdo fotografija maišoma su iliustracijomis. Rezultatas yra maloni patirtis, kuri pasakoja ne tik apie „Allbirds“ istoriją, bet ir pajusti patį produktą.

„Jis skirtas parodyti neįtikėtiną dėmesį mūsų gaminio dizainui ir detalėms“, - aiškina Brownas, motyvuodamas šią svetainę. 'Mes daug investavome į fotografiją ir Niujorko valstijoje gyvenantį kivio fotografą Henry Hargreavesą, norėdami atgaivinti svetainę ir aiškiai išdėstyti savo misiją gaminti geresnius batus.'

Tiek Brownas, tiek Raudonasis ragas komanda kalba apie savo ypatingą atsidavimą svetainės UX ir tai, kaip jie rėmėsi detalėmis, kurios taip dažnai nepastebimos. Kasdieniškas DUK skyrius atgaivinamas naudojant animuotus GIF failus, o iliustracija visoje svetainėje naudojama kaip netikėtas pasakojimo motyvas.

04. Karimas Rashidas

HTML pavyzdžiai: Karimas Rashidas

Karimo Rashido naujoji svetainė drebina

Dizaineris Karimas Rashidas yra toks pat vaisingas, kaip ir švenčiamas. Turėdamas daugiau kaip 3000 dizainų ir dirbdamas 20 nuolatinių kolekcijų visame pasaulyje, galbūt nenuostabu, kad jo paties svetainė per pastaruosius 10 metų buvo užimta antroje vietoje. Kol jis pavedė Antonas ir Irena , tai yra.

„Apple ipad mini“ juodas penktadienis 2016 m

Prekinis ženklas, apimantis įtraukiančią sąveiką, emocingą tipografiją ir tikrai agnostinius įrenginius, duetas pristatė svetainę, kviečiančią energingai tyrinėti. Kuris, be abejo, buvo esmė: „Mūsų pagrindinis tikslas buvo vizualiai patraukliai parodyti gausybę produktų ir projektų“, - sako pora savo tinklaraštyje.

Ši gausybė produktų taip pat kėlė iššūkį. Kaip reaguojančioje aplinkoje galima pristatyti 5000 plius įvairių formų ir dydžių vaizdus? Sprendimas: įprasto išdėstymo permąstymas ir „lo-fi“ požiūris į struktūrizavimą, suteikiant tikslią, lanksčią tinklelį ir drąsią (tačiau netrukdomą) tipografiją.

Bene įspūdingiausias dalykas naujojoje „Rashid“ svetainėje yra sklandūs perėjimai tarp peržiūros srities. 'Mes visada projektuojame visus ekranus vienu metu ... Kai turime idėją apie komponentą ar išdėstymą, išbandome jį visuose ekranuose ir patikriname, ar tai prasminga visame pasaulyje.'

05. Histografija

HTML pavyzdžiai: histografija

Interaktyvi laiko juosta nuo Didžiojo sprogimo iki šių dienų

Istografija - Izraelio dizaineris ir kūrėjas Nužudyk Stauberį Paskutinių metų projektas Bezalelio dailės ir dizaino akademijoje - tai interaktyvi laiko juosta, apimanti ne mažiau kaip 14 milijardų metų nuo Didžiojo sprogimo iki šių dienų. Pažodžiui peržengus visą žinomos visatos istoriją, tai yra didžiulė, interaktyvi infografika, kelianti iššūkį mūsų išankstinėms nuostatoms, kaip bendrauti su sudėtingais subjektais.

„Histography“ laiko juosta, apimanti temas, pradedant literatūra ir muzika, baigiant žmogžudystėmis, išradimais ir religija, kviečia mus tyrinėti įvykius iš mūsų turtingos praeities, kiekvieną dinamiškai ištrauktą iš Vikipedijos ir vaizduojantį ekrane kaip mažą juodą taškelį. Yra du režimai: horizontalus vaizdas iš kairės į dešinę, leidžiantis vartotojui grįžti namo tam tikru laikotarpiu; arba į spiralę panaši laiko mašina, pateikianti kuruojamą pagrindinių įvykių sąrašą.

Stauberis sako, kad jį visada žavėjo idėja parodyti istoriją, kuri laikui bėgant atsiskleidžia: „Laiko juostos yra populiariausias istorijos vaizdavimo būdas, tačiau aš jaučiau, kad jos visada yra labai ribotos. Nuo pat šio projekto pradžios žinojau, kad noriu sukurti laiko juostą, kuri neapsiribotų metais, dešimtmečiu ar laikotarpiu. Norėjau laiko juostos, kurioje būtų visa istorija “.

06. Tinklelyje

HTML pavyzdžiai: tinklelyje

Dizainerių kuruojamas tarptautinis kaimynystės vadovas

Nors daugeliui kelia stresą, persikėlimas į biurą taip pat gali būti puikus įkvėpimo šaltinis. Kada „Hyperakt“ persikėlęs į Gowanusą Brukline, komandos jaudulys atradus paslėptus naujosios aplinkos lobius paskatino įsikūnyti į dizainerių kuruotą tarptautinį kaimynių vadovą „On the Grid“.

Svetainė yra minimalistinė, tačiau įspūdinga ir buvo sukurtas taip, kad būtų struktūrizuotas, tačiau žaismingas ir dinamiškas, kaip ir svetainės turinys '. Nesąmoninga estetika vengia tipiškų herojaus vaizdų spąstų ir puikiai naudojasi peržiūros sritimi net esant itin dideliems dydžiams.

Ir tada reikia atkreipti dėmesį į detales. Nuo animacinio logotipo iki 100 (ir skaičiuojančių) unikalių miesto iliustracijų ir paprastų animacijų „On the Grid“ akivaizdžiai nėra tik dar vienas gyvenimo būdo tinklaraštis.

Savo tinklaraštyje „Hyperakt“ paaiškina, kaip norėjo sukurti „patikimą šaltinį, kuris užfiksuotų tikrąją mylimų vietų esmę per gražią fotografiją, atvirus aprašymus ir dizaino valdomą kuraciją“. Kiekvieną mėnesį prisijungus daugiau kuratorių, „Grid“ netrukus gali atvykti į šalia jūsų esantį rajoną.

07. „LS Productions“

„LS Productions“ svetainę sukūrė Edinburgo agentūra „Whitespace“

„LS Productions“ neseniai išplėtė savo akiratį ir įsigijo puikių vietų (pagal „Moniker Location Scotland“) ir tapo didžiausia JK fotografijos ir judesio paslaugų gamybos įmone. Jo prekės ženklą ir svetainę sukūrė Edinburgo agentūra Balta vieta .

slėpti „Facebook“ profilio nuotrauką nuo visuomenės

Vyresnysis dizaineris Mike'as Bryantas sako, kad prioritetas buvo leisti įmonės darbui kalbėti: „Jie turi tokį neįtikėtiną portfelį, pradedant nuo kadrų iki judesio, kad mūsų pagrindinė užduotis buvo sukurti struktūrą, papildančią minimalų tipą vaizdu“. Šis požiūris iš karto matomas pagrindiniame puslapyje, kuris apima platų įmonės pasiūlymą tinkamu animuotos tipografijos ir vaizdo įrašų mišiniu.

Pagrindiniai techniniai iššūkiai - kuo mažesnis įkelties laikas ir skirtingų kultūrų tvarkymas norint gauti aukštos kokybės vaizdus - buvo įveikti, jei reikia, pakeičiant didesnės skiriamosios gebos vaizdus ir naudojant „JavaScript“, kad būtų galima dinamiškai valdyti įvairių dydžių vaizdų aukštį ir formato santykį .

Galutinis rezultatas, sako Bryantas, yra „atimta svetainė, kurioje naudojamos modulinės plokštės, švarus tipas ir minimali spalvų paletė, kuri veikia kaip subtilus gražaus darbo fonas“.

08. Viešpatie

HTML pavyzdžiai: Lordz

Vaizdo įrašas padeda užfiksuoti šios šokių akademijos širdį

„Žaidimas yra senesnis už kultūrą, nes kultūra ... visada suponuoja žmonių visuomenę, o gyvūnai nelaukė, kol žmogus išmokys juos žaisti“. Taip prasideda Johano Huizingos „Homo Ludens“, kur autorius aptaria žaidimo įtaką visuomenei.

Žaidimo elementą rimtai vertina Šveicarijoje įsikūrusi šokių akademija „Lordz“. Lordzui šokis nėra tik judėjimas; tai meno forma, žaisminga kultūros raiškos priemonė. Uždavinys suprojektuoti akademijos vietą, Eidenbenz / Zürcher naudojo šį etosą vadovaudamasis jo meno kryptimi.

„Norėjome sukurti tai, kas susiduria su skaitmenine patirtimi su pačia Homo Ludens širdimi“, - aiškina meno vadovas ir partneris Danielis Zürcheris. „Žaismingas būdas suprasti kasdienę šokio praktiką; judesys, jausmai ir pan. Norėdami tai pasiekti, mes naudojome naujausias technologijas filmuojant, po gamybos ir, žinoma, programuojant. “

Rezultatas yra gana stulbinantis; nepakartojamai atpažįstama ir įkvepianti svetainė, kuri tikrai pritraukia organizacijos širdį naudojant vaizdo įrašą - tai retas šių dienų žygdarbis.

Kitas puslapis: dar 8 nuostabūs HTML pavyzdžiai

  • 1
  • du

Dabartinis puslapis: Puslapis 1

Kitas puslapis 2 puslapis