16 neverjetnih primerov HTML

Stran 1 od 2: Stran 1

Nekatera od teh spletnih mest uporabljajo najnovejše tehnologije, da premaknejo meje tega, kar je mogoče na spletu; drugi uporabljajo tradicionalna oblikovalska načela za gradnjo čudovitih, uporabnih strani. Ne glede na to, ali uporabljate preprost HTML ali se potapljate v WebGL in 3D CSS, boste tukaj našli nekaj, kar vas bo navdihnilo.

Imamo tudi čudovit izbor inspirativnih primeri CSS za vas, da raziščete.

01. Appy Fizz

Ta zasnova meša super ploščate in 3D-efektne elemente



Ta zasnova meša super ploščate in 3D-efektne elemente

Appy Fizz je peneča pijača, ki se opisuje kot 'šampanjec iz sadnih pijač'. Novo spletno mesto Appy Fizz je bilo del obsežnejšega projekta preoblikovanja blagovne znamke s sedežem v New Yorku Sagmeister & Walsh . Kot pojasnjujejo ustvarjalci v svoji študiji primera, identiteta 'vizualizira gazirane mehurčke skozi dinamičen grafični jezik 3D sfer in krogov.'

Zasnova je zanimiva mešanica super ravnih in implicitnih tridimenzionalnih elementov. Krožni jezik, napisan v krepki rdeči, beli in črni barvi, me spominja na dela Yayoija Kusame, svetovno znanega umetnika, povezanega s pop artom, minimalizmom in pikami.

Umetnost in njen prostor v komercialnih panogah je tema, s katero se Sagmeister & Walsh igrata skozi svoje delo in zanimivo je videti, kako se ta kombinacija prevaja v splet. Tu je veliko animacij in interaktivnih elementov platna, ki govorijo isti vizualni jezik - simulacija karbonizacije celo sledi uporabnikovi miški, ko se premika po spletnem mestu.

02. Naredili le redki

Ta konferenčna stran je polna skritih presenečenj

Ta konferenčna stran je polna skritih presenečenj

Made by Few je letna spletna konferenca, ki jo gosti Nekaj , oblikovalska in razvojna agencija v Arkansasu. Sally Nixon Podrobne, svetle ilustracije so prikazane v opisu jarbola in zvočnikov. Potreben je trenutek, da se zavemo, da se množica ponavlja, ker je tako subtilna.

Ko raziskujete spletno mesto, je še več presenečenj. 'V družbi Few imamo radi prijetne nesreče in spodbujamo raziskovanje,' pravi Arlton Lowry, soustanovitelj podjetja Few in organizator konferenc. V bližini svoje filozofije raziskovanja so po celotnem spletnem mestu razpršeni skriti dragulji (ne bomo jih dali vsem, ampak poskusite doseči Konamijevo kodo!).

Ti zabavni elementi dajejo spletnemu mestu veliko osebnosti, ki jih Arlton pripisuje neposredno agencijski kulturi. 'Verjamemo, da ko ljudem zagotovite odprto in zabavno okolje, ni mogoče vedeti, kaj bo s tem.'

najboljša power bank za iphone 5s

03. Vse ptice

Močna fotografija izdelkov daje vpliv tej strani

Močna fotografija izdelkov daje vpliv tej strani

Allbirds je znamka športnih čevljev iz dežele 29.221.344 ovac. Začelo se je, ko je soustanovitelj Tim Brown opazil neverjetne lastnosti volne Merino in se vprašal, zakaj je še nikoli niso uporabljali v obutvi.

Spletno mesto, ki je bilo zgrajeno z uporabo Shopify, združuje fotografije življenjskega sloga z ilustracijami. Rezultat je čudovita izkušnja, ki ne samo pripoveduje zgodbo o Allbirds, temveč tudi občutek za sam izdelek.

kako narisati človeka, ki stoji

'Zasnovan je tako, da prikaže neverjetno pozornost do podrobnosti in razmišljanja, ki sta v ozadju našega izdelka,' pojasnjuje Brown v obrazložitvi spletnega mesta. 'Veliko smo vlagali v fotografijo - in fotograf kivija s sedežem v New Yorku Henry Hargreaves -, da bi spletno mesto zaživeli in artikulirali svoje poslanstvo, da na boljši način izdelujemo boljše čevlje.'

Tako Brown kot Rdeče rogovje ekipa govori o svoji izredni predanosti uporabniškemu tipu spletnega mesta in o tem, kako so se nagibali k podrobnostim, ki so tako pogosto spregledane. Odsek o pogostih pogostih vprašanjih je oživljen z animiranimi GIF-ji, ilustracija pa je uporabljena na celotnem spletnem mestu kot nepričakovan motiv pripovedovanja zgodb.

04. Karim Rashid

Primeri HTML: Karim Rashid

Novo najdišče Karima Rashida se kamnira

Oblikovalec Karim Rashid je tako ploden, kot ga slavijo. Z več kot 3000 modeli, ki so v proizvodnji in delujejo v 20 stalnih zbirkah po vsem svetu, morda ni presenetljivo, da se je njegovo spletno mesto v zadnjih 10 letih umirilo. Dokler ni naročil Anton & Irene , to je.

S svojo blagovno znamko, ki zajema privlačne interakcije, čustveno tipografijo in resnično agnostične postavitve naprav, je duo ponudil spletno mesto, ki vabi na intenzivno raziskovanje. Kar je bilo seveda bistvo: 'Naš glavni cilj je bil predstaviti množico izdelkov in projektov na vizualno vabljiv način,' pravi par na svojem blogu.

Mnoštvo izdelkov je predstavljalo tudi izziv. Kako v odzivnem okolju dostaviti več kot 5000 slik različnih oblik in velikosti? Rešitev: preoblikovanje običajnih postavitev in lo-fi pristop k strukturiranju, da dobimo natančno, prilagodljivo mrežo v kombinaciji s krepko (a nevsiljivo) tipografijo.

Morda najbolj impresivna stvar novega Rashidovega spletnega mesta so neopazni prehodi med vidnimi polji. 'Vse zaslone vedno načrtujemo hkrati ... V trenutku, ko imamo idejo za komponento ali postavitev, jo preizkusimo na vseh zaslonih in preverimo, ali je to smiselno.'

05. Histografija

Primeri HTML: histografija

Interaktivna časovnica od Velikega poka do danes

Histografija - izraelski oblikovalec in razvijalec Ubij Stauberja zadnji letni projekt na Akademiji za umetnost in oblikovanje Bezalel - je interaktivni časovni načrt, ki traja najmanj 14 milijard let, od Velikega poka do danes. Dobesedno se razteza na celotno zgodovino znanega vesolja in je neizmerna, interaktivna infografija, ki izziva naše predsodke o tem, kako sporočiti zapletene teme.

Časovnica Histografije zajema teme, ki segajo od literature in glasbe do atentatov, izumov in religije, da raziščemo dogodke iz naše bogate preteklosti, ki jih vsak dinamično potegne iz Wikipedije in je na zaslonu predstavljen kot majhna črna pika. Obstajata dva načina: vodoravni pogled od leve proti desni, ki uporabniku omogoča, da v določenem časovnem obdobju pride domov; ali spiralni časovni stroj, ki predstavlja kuriran seznam ključnih dogodkov.

Stauber pravi, da ga je ideja o prikazovanju zgodovine, ki se skozi čas razvija, vedno navduševala: „Časovnice so najbolj priljubljen način vizualizacije zgodovine, vendar sem jih vseeno čutil zelo omejene. Že na začetku tega projekta sem vedel, da želim ustvariti časovnico, ki ni omejena na leto, desetletje ali obdobje. Želel sem časovnico, ki bi lahko vsebovala vso zgodovino. '

06. Na mreži

Primeri HTML: V mreži

Mednarodni vodnik po soseski, ki so ga oblikovali oblikovalci

Čeprav je preselitev pisarne za marsikoga lahko tudi velik vir navdiha. Kdaj Hyperakt preseljeni v Gowanus v Brooklynu, je navdušenje ekipe nad odkrivanjem skritih zakladov njihove nove okolice pripeljalo do inkarnacije On the Grid: mednarodnega vodnika po soseščini, ki so ga oblikovali kuratorji.

Spletno mesto je minimalistično, a vtisljivo in je bilo zasnovan tako, da je zelo strukturiran, a hkrati igriv in dinamičen, tako kot vsebina na spletnem mestu '. Enostavna estetika se izogiba tipičnemu pasti za junaške podobe in odlično izkorišča okvir za prikaz tudi pri ekstremnih velikostih.

kako narisati likovno konceptualno umetnost

In potem je tu še pozornost do podrobnosti. Od animiranega logotipa do 100 (in štetja) edinstvenih mestnih ilustracij in preprostih animacij, On Grid očitno ni le še en blog o življenjskem slogu.

V svojem blogu Hyperakt pojasnjuje, kako je želel ustvariti 'zanesljiv vir, ki zajema resnično bistvo krajev, ki jih imamo radi, z lepo fotografijo, odkritimi opisi in kuratorstvom, ki ga vodi oblikovanje.' Ko se vsak mesec pridruži več kustosov, bo On Grid kmalu prišel v sosesko v vaši bližini.

07. LS Productions

Primeri HTML: LS Productions

Spletno mesto LS Productions je izdelala edinburška agencija Whitespace

Podjetje LS Productions je nedavno razširilo svoja obzorja z iskanjem odličnih lokacij (pod imenom Location Scotland) in postalo tisto, kar je zdaj največje podjetje za proizvodnjo fotografij in storitev gibanja v Združenem kraljestvu. Njegovo blagovno znamko in spletno stran je izdelala agencija Edinburgh Presledek .

Starejši oblikovalec Mike Bryant pravi, da je bila prednostna naloga, da se delo podjetja pogovarja: 'Imajo tako neverjeten portfelj, od fotografij do gibanja, da je bila naša glavna naloga ustvariti strukturo, ki je s sliko dopolnila minimalni tip.' Ta pristop je takoj razviden na domači strani, ki obsežno ponudbo podjetja zajema s primerno mešanico animirane tipografije in videa.

Glavne tehnične izzive - zmanjšanje časa nalaganja in upravljanje različnih posevkov za visokokakovostne posnetke - smo premagali z zamenjavo slik višje ločljivosti, kjer je bilo potrebno, in uporabo JavaScript za dinamično upravljanje višine in razmerja stranic slik pri različnih velikostih zaslona .

Končni rezultat, pravi Bryant, je 'odstranjeno spletno mesto, ki uporablja modularne plošče, čist tip in minimalno barvno paleto, da deluje kot subtilna kulisa za čudovito delo'.

kako narediti spletno pasico v

08. Gospod

Primeri HTML: Lordz

Video pomaga ujeti srce te plesne akademije

'Igra je starejša od kulture, kajti kultura ... vedno predpostavlja človeško družbo in živali niso čakale, da jih človek nauči njihovega igranja.' Tako se začne Homo Ludens Johana Huizinge, kjer avtor razpravlja o vplivu igre v družbi.

Element igre je tisti, ki ga Lordz, plesna akademija s sedežem v Švici, jemlje resno. Za Lordza pri plesu ne gre le za gibanje; gre za umetniško obliko, igrivo sredstvo kulturnega izražanja. Zadolžen za oblikovanje spletnega mesta za akademijo, Eidenbenz / Zürcher uporabil ta etos za vodenje svoje umetniške usmeritve.

'Želeli smo ustvariti nekaj, kar digitalno izkušnjo sooča s samim srcem Homo Ludensa,' pojasnjuje umetniški direktor in partner Daniel Zürcher. 'Igriv način za vpogled v vsakodnevno plesno prakso; gibanje, občutki itd. Da bi to dosegli, smo uporabili najnovejšo tehnologijo pri snemanju, postprodukciji in seveda pri programiranju. '

Rezultat je precej osupljiv; edinstveno prepoznavno in navdihujoče spletno mesto, ki z uporabo videa resnično zajame srce organizacije - dandanes redek podvig.

Naslednja stran: še 8 osupljivih primerov HTML

  • 1.
  • dva

Trenutna stran: Stran 1

Naslednja stran Stran 2