16 upeaa HTML-esimerkkiä

Sivu 1/2: Sivu 1

Jotkut näistä sivustoista käyttävät uusinta tekniikkaa ylittääkseen mahdollisuuden verkossa; toiset käyttävät perinteisiä suunnitteluperiaatteita kauniiden, käyttökelpoisten sivustojen rakentamiseen. Käytätpä yksinkertaista HTML-koodia tai sukellat WebGL: ään ja 3D CSS: ään, löydät täältä jotain inspiroivaksi.

Meillä on myös loistava valikoima inspiroivia esimerkkejä CSS: stä voit tutkia.



01. Appy Fizz

Tämä muotoilu sekoittaa erittäin tasaisia ​​ja 3D-efektielementtejä



Tämä muotoilu sekoittaa erittäin tasaisia ​​ja 3D-efektielementtejä

Appy Fizz on kuohuviini, joka kuvaa itseään '' hedelmäjuomien samppanjana ''. Uusi Appy Fizz -verkkosivusto oli osa NYC-pohjaisen suunnitteluyrityksen laajempaa uudelleenbrändiprojektia Sagmeister & Walsh . Kuten tekijät selittävät tapaustutkimuksessaan, identiteetti 'visualisoi hiilihapotetut kuplat 3D-pallojen ja ympyröiden dynaamisen graafisen kielen kautta'.

Suunnittelu on mielenkiintoinen sekoitus erittäin tasaisia ​​ja implisiittisiä kolmiulotteisia elementtejä. Lihavoituna punaisella, valkoisella ja mustalla kirjoitettu pyöreä kieli muistuttaa minua Yayoi Kusaman, maailmankuulun taiteilijan, joka liittyy pop-taiteeseen, minimalismiin ja pilkkuihin, työstä.



Taide ja sen tila kaupallisilla aloilla on teema, jonka Sagmeister & Walsh pelaavat koko työnsä ajan, ja on mielenkiintoista nähdä, miten tämä yhdistelmä kääntyy verkkoon. Täällä on monia animaatioita ja interaktiivisia kangaselementtejä, jotka puhuvat samaa visuaalista kieltä - hiilihapotussimulaatio seuraa jopa käyttäjän hiirtä, kun sitä siirretään verkkosivuston yli.

kuinka tulla kirjan kuvittajaksi

02. Muutaman tekemä

Tämä konferenssisivusto on täynnä piilotettuja yllätyksiä

Tämä konferenssisivusto on täynnä piilotettuja yllätyksiä

Made by Few on vuosittainen verkkokonferenssi, jonka isännöi Harvat , suunnittelu- ja kehitysvirasto Arkansasissa. Sally Nixon Yksityiskohtaiset, kirkkaat kuvat ovat maston otsikossa ja kaiuttimien kuvauksissa, ja hetken tajuaa, että väkijoukossa on toistoa, koska se on niin hienovaraista.



Kun tutustut sivustoon, yllätyksiä on enemmän. 'Fewissä rakastamme miellyttäviä onnettomuuksia ja kannustamme tutkimaan', kertoo Fewin perustaja Arlton Lowry ja konferenssijärjestäjä. Sivuston läheisyydessä on piilotettuja helmiä, jotka ovat hajallaan etsintäfilosofiaan (emme anna niitä kaikkia, mutta yritä lyödä Konami-koodia!).

Nämä hauskat elementit antavat sivustolle paljon persoonallisuutta, jonka Arlton pitää suoraan agentuurikulttuurista. 'Uskomme, että kun tarjoat ihmisille avoimen ja hauskan ympäristön, ei voida kertoa, mitä siitä tulee.'

03. Allbirds

Vahva tuotekuvaus antaa tälle sivustolle vaikutuksen

Vahva tuotekuvaus antaa tälle sivustolle vaikutuksen

Allbirds on urheilukenkämerkki 292221344 lampaasta. Se alkoi, kun perustaja Tim Brown havaitsi merinovillan hämmästyttävät ominaisuudet ja ihmetteli, miksi sitä ei ole koskaan käytetty jalkineissa aiemmin.

Shopifyn avulla rakennettu verkkosivusto sekoittaa elämäntapavalokuvia kuvituksiin. Tuloksena on ihastuttava kokemus, joka ei vain kerro tarinaa Allbirdien takana, vaan antaa myös tuntuman itse tuotteesta.

'Se on suunniteltu esittelemään tuotesuunnittelumme takana olevan uskomattoman huomion yksityiskohtiin ja ajatuksiin', selittää Brown sivuston perusteluista. 'Panostimme paljon valokuvaan - ja NYC-pohjaiseen kiivivalokuvaajaan Henry Hargreavesiin - saadaksemme sivuston eloon ja ilmaisemaan tehtävämme tehdä parempia kenkiä paremmin.'

Sekä Brown että Punainen Antler tiimikeskustelu äärimmäisestä omistautumisestaan ​​sivuston UX: lle ja siitä, kuinka he taipuivat yksityiskohtiin, joita niin usein unohdetaan. Arkipäiväinen usein kysytyt kysymykset -osio herätetään eloon animoitujen GIF-kuvien avulla, ja kuvitusta käytetään koko sivustolla odottamattomana tarinankerronta.

04. Karim Rashid

HTML-esimerkkejä: Karim Rashid

Karim Rashidin uusi sivusto rokkaa

Suunnittelija Karim Rashid on yhtä tuottelias kuin häntä juhlitaan. Yli 3000 mallia on tuotettu ja työskentelee 20 pysyvässä kokoelmassa maailmanlaajuisesti, joten ei ole mikään yllätys, että hänen oma verkkosivustonsa oli ollut takapenkillä viimeisten 10 vuoden ajan. Kunnes hän tilasi Anton ja Irene , tuo on.

Tavaramerkkinsä mukaansatempaavalla vuorovaikutuksella, emotionaalisella typografialla ja aidosti laite-agnostisilla ulkoasuilla duo on toimittanut sivuston, joka kutsuu voimakkaasti tutkimaan. Mikä oli tietysti asia: 'Päätavoitteemme oli esitellä lukuisia tuotteita ja projekteja visuaalisesti houkuttelevalla tavalla', pari sanoo blogissaan.

Tämä tuotevalikoima tuotti myös haasteen. Kuinka toimitetaan 5000 plus -muotoista erimuotoista ja -kokoista kuvaa reagoivassa ympäristössä? Ratkaisu: perinteisten asettelujen uudelleen kuvitteleminen ja lo-fi-lähestymistapa strukturointiin, jotta saadaan tarkka, joustava ruudukko yhdistettynä rohkeaan (mutta häiritsemättömään) typografiaan.

Ehkä vaikuttavin asia Rashidin uudessa sivustossa on saumattomat siirtymät näkymien välillä. 'Suunnittelemme kaikki näytöt aina samanaikaisesti ... Tällä hetkellä, kun meillä on idea komponentista tai asettelusta, kokeilemme sitä kaikilla näytöillä ja katsomme, onko sillä järkevää kaikkialla.'

05. Histografia

HTML-esimerkkejä: Histografia

Interaktiivinen aikajana Suuresta Bangista nykypäivään

Histografia - Israelin suunnittelija ja kehittäjä Tapa Stauber Viimeisen vuoden projekti Bezalelin taideakatemiassa - interaktiivinen aikajana, joka ulottuu vähintään 14 miljardiin vuoteen Suuresta Bangista nykypäivään. Kirjaimellisesti ulottuu tunnetun maailmankaikkeuden koko historiaan, ja se on valtava, interaktiivinen infografiikka, joka haastaa ennakkoluulomme monimutkaisten aiheiden kommunikoinnista.

Histografian aikajana kattaa aiheita kirjallisuudesta ja musiikista salamurhiin, keksintöihin ja uskontoon. Kukin historia kutsuu meitä tutkimaan tapahtumia rikkaasta menneisyydestämme, joista jokainen on dynaamisesti vedetty Wikipediasta ja edustettuina näytöllä pienenä mustana pisteenä. On olemassa kaksi tilaa: vaakasuora, vasemmalta oikealle -näkymä, jonka avulla käyttäjä voi palata kotiin tiettynä ajanjaksona; tai kierukkamainen aikakone, joka esittää kuratoidun luettelon tärkeimmistä tapahtumista.

Stauber sanoo, että ajatus historian näyttämisestä on aina ollut kiehtonut: 'Aikajanat ovat suosituin tapa visualisoida historiaa, ja minusta tuntui, että ne olivat aina hyvin rajallisia. Tämän projektin alusta alkaen tiesin, että halusin luoda aikataulun, joka ei rajoitu vuoteen, vuosikymmeneen tai ajanjaksoon. Halusin aikajanan, joka voisi sisältää kaiken historian. '

06. Ruudukossa

HTML-esimerkkejä: Ruudukossa

Suunnittelijoiden kuratoima kansainvälinen naapuruusopas

Vaikka toimiston muuttaminen onkin stressaavaa, se voi olla myös hyvä inspiraation lähde. Kun Hyperakt Muutettu Brooklynissa sijaitsevaan Gowanukseen, joukkueen innostus uuden ympäristön piilotettujen aarteiden löytämisestä johti On the Grid: inkarnaatioon: kansainvälinen naapuruusopas, jonka suunnittelijat ovat kuratoineet.

Sivusto on minimalistinen mutta vaikuttava, ja se oli suunniteltu hyvin jäsenneltyyn, mutta leikkisään ja dynaamiseen, aivan kuten sivuston sisältö '. Esteetön estetiikka välttää tyypillisen sankarikuvan ansaan ja hyödyntää näkymää hyvin myös äärimmäisissä kooissa.

Ja sitten kiinnitetään huomiota yksityiskohtiin. Animoidusta logosta 100 (ja laskenta) ainutlaatuiseen kaupungin kuvitukseen ja yksinkertaiseen animaatioon - On the Grid ei selvästikään ole vain yksi elämäntapablogi.

Hyperakt selittää blogissaan, kuinka se halusi luoda 'luotettavan resurssin, joka sieppaa rakastamiemme paikkojen todellisen olemuksen kauniilla valokuvilla, suoraviivaisilla kuvauksilla ja muotoiluun perustuvalla kuraatiolla'. Kun joka kuukausi liittyy lisää kuraattoreita, On the Grid saattaa pian tulla lähelläsi olevaan naapurustoon.

07. LS Productions

HTML-esimerkkejä: LS Productions

LS Productions -sivuston tuotti Edinburghin toimisto Whitespace

LS Productions on hiljattain laajentanut näköalojaan hankkimalla upeita sijainteja (Skotlannin moniker-sijainnin alla) tullakseen Yhdistyneen kuningaskunnan suurimmaksi still-kuvien ja liikkuvien palveluiden tuotantoyhtiöksi. Sen tuotemerkin ja verkkosivuston tuotti Edinburghin toimisto Välilyönti .

Vanhempi suunnittelija Mike Bryant sanoo, että etusijalla oli antaa yrityksen työn puhua: 'Heillä on niin uskomaton valikoima, aina valokuvista liikkumiseen, että tärkein tehtävämme oli luoda rakenne, joka täydentää minimaalista tyyppiä kuvalla.' Tämä lähestymistapa näkyy heti kotisivulla, joka sisältää yrityksen laajan tarjonnan sopivalla sekoituksella animoitua typografiaa ja videota.

Tärkeimmät tekniset haasteet - latausaikojen pitäminen minimissä ja erilaisten viljelykasvien hallinta korkealaatuisten kuvien saavuttamiseksi - voitettiin korvaamalla korkeamman resoluution kuvat tarvittaessa ja JavaScriptin avulla hallitsemaan kuvien korkeutta ja kuvasuhteita dynaamisesti erikokoisissa näytöissä .

Lopputulos on Bryantin mukaan '' riisuttu sivusto, joka käyttää modulaarisia paneeleita, puhdasta tyyppiä ja minimaalista väripalettia toimiakseen hienona taustana kauniissa työssä ''.

08. Herra

HTML-esimerkkejä: Lordz

paras pc ajaa Adobe luova pilvi
Video auttaa vangitsemaan tämän tanssiakatemian sydämen

'Leikki on kulttuuria vanhempi, sillä kulttuuri ... edellyttää aina ihmisyhteiskuntaa, eivätkä eläimet ole odottaneet, että ihminen opettaa heille heidän pelaamistaan.' Näin alkaa Johan Huizingan Homo Ludens, jossa kirjoittaja keskustelee leikin vaikutuksista yhteiskuntaan.

Leikkielementti on se, jota Lordz, Sveitsissä sijaitseva tanssiakatemia, ottaa vakavasti. Lordzille tanssi ei ole vain liikettä; se on taidemuoto, leikkisä keino kulttuuriseen ilmaisuun. Tehtävänä oli suunnitella sivusto akatemialle, Eidenbenz / Zürcher käytti tätä eetosta ohjaamaan taiteellista suuntaa.

'Halusimme luoda jotain, joka asettaa digitaalisen kokemuksen Homo Ludensin sydämeen', kertoo taiteellinen johtaja ja yhteistyökumppani Daniel Zürcher. 'Leikkisä tapa saada käsitys tanssin päivittäisestä harjoittelusta; liike, tunteet ja niin edelleen. Tämän saavuttamiseksi käytimme uusinta tekniikkaa kuvauksessa, jälkituotannossa ja tietysti ohjelmoinnissa. '

Tulos on melko upea; ainutlaatuisen tunnistettava ja inspiroiva sivusto, joka todella vangitsee organisaation sydämen videon avulla - harvinainen saavutus näinä päivinä.

Seuraava sivu: 8 muuta upeaa esimerkkiä HTML: stä

  • 1
  • kaksi

Tämänhetkinen sivu: Sivu 1

Seuraava sivu Sivu 2