Vuoden 2019 parhaat verkkosivustomallit

Tee se Adobe Stockin avulla> Löydä ilmaisia ​​malleja

Koska niin suuri osa Internetin kaupallisesta toiminnasta on siirtynyt verkkosivustoilta sosiaaliseen mediaan, innovatiivinen verkkosuunnittelu ei ole vain esittelyä ja enemmän hiljaisten hyvien käyttökokemusten tuottamista. Ja tämä löytyy useammin pienemmistä projekteista, verkkokokeiluista ja huvin vuoksi rakennetuista sivustoista kuin liukkaasta ja hiotusta yritystyöstä.



Tässä viestissä tarkastelemme kuutta tänä vuonna käynnistettyä verkkosivustoa, jotka ovat saattaneet mennä tutkasi alle, mutta jotka kuitenkin esittävät innostuneita ja innovatiivisia lähestymistapoja web-suunnitteluun. Lisäksi kuulemme heidän luojiltaan siitä, miten heidät koottiin ja mitä he ovat oppineet seurauksena.



Saat lisää inspiraatiota verkosta katsomalla suosikkiamme WordPress-sivustot ja meidän valinta parhaimmillaan minimalistinen sivustosuunnittelu .

01. Phil Coffman

Blogi asetettu käsinkirjoituskirjasimella



Coffman on suunnitellut bloginsa uudelleen näyttämään enemmän kuin perinteinen päiväkirja

Jos meillä olisi punta joka kerta, kun olemme kuulleet web-suunnittelijan sanovan 'Minun on todella päästävä blogini uudelleensuunnitteluun', olisimme miljonäärejä. Joten hatut pois Phil Coffman , suunnittelija, joka asuu Austinissa, Texasissa, todella dongille. Mutta bonus, hän on myös tehnyt siitä upean kekseliäisen ja omaperäisen työn.

Yhdistämällä käsinkirjoituksen ja sanomalehden leikkaustyylityypin maanläheiseen taustaan, joka muistuttaa ikääntyvää, fyysistä paperia, tämä on yksi parhaista blogimalleista, joita olemme nähneet vuosien varrella. Ja se on osittain osoitus Coffmanin tekemän työn määrästä.

kuinka piirtää hevonen vaiheittain

'Tämä malli seuraa monia aikaisempia epäonnistuneita yrityksiä', hän myöntää. ”Suunnittelu itselleni on mahdollisesti vähiten suosikki asiani. kun taistelen massiivisesti itselleni asettamani päättämättömyyden ja epärealististen odotusten takia. Loppujen lopuksi tämä käsite voitti, koska halusin sukeltaa takaisin tekstuureihin, käsin piirrettyihin elementteihin ja taiteen kokonaissuuntaan, joka on enemmän henkilökohtaista lehteä kuin kiillotettua julkaisua. '



Blogiviesti asetettu Neue Haas Grotesk- ja Miller-kirjasimilla

'Kun sain tietää, että Neue Haas Grotesk oli saatavana Adobelta, Miller tuli nopeasti sen jälkeen, kun kaksi kirjasinta muodostivat parin hyvin', Coffman kertoo.

Konseptin käyttöönottoon liittyi myös joitain teknisiä haasteita, hän lisää. 'Kesti vähän kokeiluja ja virheitä saadaksemme teksturoidun vaikutelman haluamalleni tavalla otsikoihin ja mustiin viivoihin', Coffman selittää. 'Tiesin, että CSS: llä oli kyky käyttää tekstiä leikkausmaskina, mutta en ollut viettänyt paljon aikaa kaivamaan sitä, kuinka se voidaan vetää oikein.'

Kun hän oli käynyt läpi CSS-ilmoitusten oikean yhdistelmän soveltamisen vaiheet, hän kohtasi haasteen hankkia ja valmistaa oikea sekoitus tekstuureja. 'Tämä edellytti tekstuurien löytämistä oikealla kulumisella ja persoonallisuudella aiheuttamatta tekstin luettavuuteen liittyviä ongelmia', hän toteaa.

Kuvan lukitseminen oli myös 'hauska haaste' Coffmanille. 'Pystyin käyttämään CSS Gridiä perustamaan luuranko merkinnälle, hioen ruudukkomallin kanssa, jotta saan riittävän joustavuuden kuvan ja kuvan otsikon sijoittamisessa samalla kun säilytän sama kuvasuhde mobiiliasettelusta työpöydälle.'

Blogiviesti professori- ja Miller-fonttien sekoituksessa

Coffman valitsi professorin käsinkirjoituskirjasimeksi. 'Se on luettavissa, mutta siinä on myös hyvät ligaturaatiot ja näyttää siltä, ​​että se olisi voitu kirjoittaa sinisellä kynällä päiväkirjaan', hän selittää.

Typografiaa varten hän asettui Neue Haas Groteskille otsikoille ja pienemmille sans-serif-elementeille, Miller runkotekstille ja professori käsinkirjoitetulle käsikirjoitukselle.

'Avain tähän käsitteeseen on käsin kirjoitetun kirjasimen sekä sans- ja serif-fonttien välinen vuorovaikutus', hän selittää. 'Minusta tuntui, että käsinkirjoitetun fontin toimimiseksi tarvitsin suoraviivaisemman tai tutumman sanan ja serifin sen sijaan, että niillä olisi paljon omaa persoonallisuutta.'

02. Boolen peli

Boolen pelin kotisivu

Tämä hauska peli opettaa käyttämään loogisia toimintoja Adobe Illustratorissa ja muissa vektorityökaluissa

Boolen peli on hauska selainpeli, joka opettaa käyttämään loogisia toimintoja Adobe Illustratorissa, Sketchissä, Figmassa ja muissa vektorieditorissa. Luoja Mark MacKay selittää miten se syntyi.

'Olen rakentanut suunnittelupelejä jo muutaman vuoden ajan, ja kerään alitajuisesti asioita, jotka ovat mielestäni haastavia muuntaa koulutuspeleiksi', hän sanoo. 'Tämä ajatus oli ollut kelluva jonkin aikaa, ja sitten näin paper.js: llä oli kirjasto suorittamaan ne: matemaattisesti se ylittää kykyni. Joten tein pikatestin ja huomasin, että se voisi olla hauskaa. '

Vaikka paper.js tekee raskaan vektorityön tekemisen sivustolle, MacKay käytti myös anime.js: ää animaatioihin, growler.js: ää ääniin ja d3-väriä värimallin hallintaan.

Boolen pelin kotisivu

MacKay käytti sivuston rakentamiseen paper.js-, anime.js-, growler.js- ja d3-color-tiedostoja

Suurin tekninen haaste oli saada se toimimaan kaikilla laitteilla puhelimista työpöytiin, hän jatkaa. 'Tämä osoittautui äärimmäisen haastavaksi, koska sinun täytyy muuttaa vektorien kokoa ja muuttaa asettelua suunnan mukaan. Jos olisin valinnut kiinteän näkemän koon, minulla olisi todennäköisesti kulunut yksi kuukausi kolmen sijasta, jotta projekti saadaan ulos ovelta. '

Ja mielenkiintoista on, että nämä kolme kuukautta opettivat hänelle tärkeitä oppitunteja kehitystyökalujen käytöstä.

Boolen pelin kotisivu

Suurin haaste oli saada peli toimimaan kaikilla laitteilla

'Kehitysekosysteemi on optimoitu hyvin erilaisiin asioihin kuin mitä yksittäinen luova suunnittelija-kehittäjä tarvitsee', hän selittää. 'Sinulla on kuin sinulla olisi ollut tehtävä rakentaa silta, ja oletetaan vain, että sinulla on nosturioperaattoreita, valmiita betonirakenteita, höyryrullia ja niin edelleen. Mutta jos tarvitset vain ihmisiä virran ylittämiseen, yksinkertainen käsirakenteinen puurakenne toimii.

'Sanon tämän, koska minusta tuntui aiemmin riittämätön siitä, että en tiennyt Reactia, NPM: ää, testausta,' parhaita käytäntöjä 'jne. Nyt ymmärrän, että minun täytyy optimoida oma virtaukseni ja nautintoni. Kehitystyökalut ja -käytännöt suuntautuvat yleensä luotettavuuteen, yhteistyöhön ja modulaarisuuteen, jotka ovat hyvin erilaisia ​​rajoituksia. '

03. Gyllenhaal-koe

Britney-kirjoitusvirheiden visualisointi

Tämä sivusto käyttää Reddit-tietoja havainnollistaakseen, kuinka huonosti tunnemme julkkisten nimiä

Yksi parhaista esimerkkeistä tietojen visualisoinnista, jonka olemme nähneet jonkin aikaa, Gyllenhaal-koe on digitaalisten julkaisujen Russell Goldenbergin ja Matt Danielsin ideoita Vanukas .

'Olimme nähneet Tämä tarina Colin Morrisin analyysistä itse tunnistetusta Redditin kirjoitusvirheestä ”, selittää Goldenberg. 'Ja ajatteli, että ajatusten avulla voidaan visualisoida ihmisten oikeinkirjoituksen kulkua enemmän.'

'Olemme hioutuneet käyttämään julkkisnimiä, kuten Jake Gyllenhaal, koska ne olivat melko merkittäviä eivätkä tyypillisessä oikeinkirjoituksessa. Tiesimme myös, että halusimme tehdä jotain vuorovaikutteista, jotta voimme nähdä reaaliaikaisen palautteen oikeinkirjoituksesta, joten sulautimme nämä ajatukset yhteen luodaksemme mehiläishenkisen interaktiivisen visualisoinnin. ''

Oikeinkirjoitusta kutsuva tekstikenttä

Luojat haluavat tehdä jotain vuorovaikutteista, joka osoitti reaaliaikaista palautetta oikeinkirjoituksesta

Pari luotti JavaScriptiin ja ensisijaisesti D3.js-kirjastoon suurimman osan visualisoinnista sekä Firebasen käytöstä käyttäjien tulosten tallentamiseen.

'Ylivoimaisesti suurin haaste oli vuokaavioiden renderointi', Goldenberg sanoo. 'Vaikka se on teknisesti sanky-kaavio, jouduimme tekemään paljon mukautettuja juttuja saadaksemme polut renderoiduksi oikein eikä päällekkäin.'

Matthew McConaugheyn kirjoitusvirheiden visualisointi

Harkittavia käyttäjävirtoja oli paljon, eri tavoista vastata kysymykseen, eri tilojen käsittelyyn

Sivuston rakentamisen aikana suurin yllätys oli oppia kuinka monella eri tavalla ihmiset kirjoittavat nimiä. ”Oli yli 800 tapaa, joilla ihmiset yrittivät kertoa esimerkiksi Matthew Mcconaugheyä.

'' Kehittämisen näkökulmasta oli harkittava paljon käyttäjävirtoja, kaikenlaisista muunnelmista aina siihen, miten he voisivat vastata kysymykseen, eri tilojen käsittelemiseen (esim. Palasivatko he sivustoon vastaaneet jo?). Kaikkien mahdollisten valtioiden tunteminen etuajassa oli ratkaisevan tärkeää sujuvan kehityksen ja suunnittelun kannalta. '

04. JSConf 2019

JSConf 2019 kotisivu

Tämä konferenssisivusto keskittyy perusteisiin ja tekee ne loistavasti

Se on todellinen päänsärky verkkoneuvottelujen järjestäjille. Et halua viettää koko aikaa työskennellessäsi verkkosivustollasi, kun voisit keskittyä energiaasi tapahtuman suunnitteluun ja tekemään siitä parhaan mahdollisen. Mutta kiinnitä yksinkertainen evästeiden leikkaussivusto, ja ihmiset ihmettelevät, kuinka paljon tiedät aiheesta, josta konferenssisi keskustelee.

Jotenkin JSConf EU: n järjestäjät näyttävät neliöneen tämän ympyrän. Koska heidän konferenssiaan ei vain ylistetä ja ihailla, vaan heidän verkkosivustonsa, joka on rakennettu staattisen sivuston generaattorin talvisepälle, on myös melko hämmästyttävä. Ei siksi, että se on täynnä fiksuja temppuja - se ei ole -, vaan siksi, että se keskittyy perustekijöihin ja tuottaa jokaisella rintamalla, helppokäyttöisyydestä sisällön relevanssiin.

Kuva JSConf 2019-osallistujista

Malte Ubi on panostanut kaikin tavoin tekemään tästä 'maailman nopeimmasta konferenssisivustosta'

Lisäksi se on nopeaa - erittäin nopeaa. Kuten Malte ubl selittää tämä blogiviesti : 'Olen viettänyt aivan kohtuuttoman paljon aikaa yrittäen tehdä siitä maailman nopeimman konferenssisivuston.' (Hän ei ole varma, onko hän onnistunut, mutta toistaiseksi kukaan ei ole mitätöinyt hänen vaatimustaan).

Se auttaa, että Ubi on AMP: n luoja, verkkokomponenttikirjasto luotettavasti nopeiden verkkosivustojen tekemiseen. Hän on käyttänyt jSConfin verkkosivustoa leikkikenttään kokeillakseen uusia tekniikoita; ja ne näyttävät varmasti toimineen; sivusto toimii kauniisti kaikilla laitteilla, joissa olemme kokeilleet sitä.

Voit sukeltaa syvälle fiksuihin tapoihin, joilla Ubi on saavuttanut tämän, kirjasimen suorituskyvyn optimoinnista kuolleen koodin poistamiseen, tässä .

05. Suunnittelunimikkeet

Suunnittelunimikkeiden kotisivu

Tämä hilpeä sivusto parodioi typeriä työnimikkeitä vaivattomasti tarkasti

Kuka sanoo, että verkkosivujen suunnittelu ei voi olla hauskaa? Ei Xtian Miller ja Boris Crowther , joka on luonut tämän hilpeän työnimikkeen generaattorin, Suunnittelunimikkeet , joka parodioi joitain typerimpiä pahoinpitelyjä, joista jotkut web-suunnittelijat näyttävät kuuluvan nykyään.

Suunnittelun kannalta se ei ole monimutkainen sivusto: se tekee yhden asian ja tekee sen erittäin hyvin, ja siitä on sanottavaa paljon.

'Se alkoi todella sisäisestä vitsistä', Miller selittää. 'Hyvältä tai pahemmalta, luovan teollisuuden nimikkeet ovat kehittäneet elohopean luonteen, mikä on aiheuttanut epäjohdonmukaisuutta niiden määritelmissä, kun ne kehittyvät jatkuvasti.

Suunnittelunimikkeiden kotisivu

Sivusto rakennettiin staattisen HTML: n, CSS: n, JS: n, Gulpin ja Sassin pohjalle

'' Tämän seurauksena monet suunnittelijat ovat saaneet luovia nimensä kanssa kuulostamaan merkityksellisemmältä tai välttämään kyyhkysreikiä. Viralliset tittelit eivät vähennä sitä, joten he keksivät näennäisnimikkeitä salkkujensa ja sosiaalisen mediansa puolesta. Sivuston todellinen tavoite oli luoda visuaalinen, hauska tapa saada tämä pitkäaikainen vitsi pois järjestelmästämme. '

Sivusto rakennettiin staattisella HTML: llä, CSS: llä ja JS: llä, Gulp kehityksen työnkulun automatisointiin ja Sass CSS-esikäsittelyyn. Generaattoritoiminto ja algoritmi tehtiin kokonaan tyhjästä Vanilla JavaScript -ohjelmassa.

Suurin tekninen haaste oli sekoitusfunktion algoritmin saaminen oikein, Miller lisää. 'Meidän täytyi säätää sitä jatkuvasti siihen pisteeseen, jossa se ei ollut liian toistuva, ja sinulla oli yhtä hyvät mahdollisuudet saada täysin normaali otsikko kuin absurdilla. Mitä enemmän käytät sitä, sitä naurettavampaa (tai vakavampaa) se saa. Se voi näyttää yksinkertaiselta, mutta algoritmin hienostaminen vaati paljon testausta. '

Suunnittelunimikkeiden kotisivu

Suurin tekninen haaste oli sekoitusfunktion algoritmin saaminen oikealle

Näyttää siltä, ​​että duo innoitti kansainvälisestä typografisesta tyylistä, mutta tarkemmin sanottuna Vignellin NYC-metrojärjestelmästä ulkoasua ja typografiaa varten.

'Kun jatkat tätä tyyliä, olet jonkin verran tietoinen sen takana olevasta vaikutuksesta, auktoriteetista ja objektiivisuudesta, mikä oli mielestämme ironista koko konseptille', Miller sanoo.

'Halusimme, että otsikko olisi mahdollisimman vastenmielinen - näkymälle sopiva - korostaakseen sen merkitystä ja käytimme moderneja väripareja vaikutuksen ja vaihtelun kannalta. Värien satunnaistaminen oli yksinkertainen ratkaisu sekoittamisen yksitoikkoisuuden poistamiseksi, ja se tavallaan sopii hyvin siihen, miten kukin otsikko kantaa omaa persoonaansa. '

06. Kapteeni Marvel

Kapteeni Marvelin kotisivu

Emme koskaan tajunnut, kuinka paljon kaipasimme neonvärejä ja juustoja

Viimeisin Marvel-elokuva, Kapteeni Marvel , tapahtuu 1990-luvulla, joten tämä hilpeä mainossivusto luo täydellisesti ulkoasun, miltä verkko näytti kyseiseltä vuosikymmeneltä.

Nuoremmat ihmiset voivat olla järkyttyneitä siitä, kuinka yksinkertainen ja kömpelö se näyttää, mutta tietyn ikäiset saavat nostalgisen rynnäkön nähdä neonfontit, juustot animaatiot, huonot valokuvasatokset, vieraskirja ja osumalaskuri, jotka kaikki aiemmin olivat osa ja pakettia varhaisen verkkosivujen suunnittelun.

Siellä on jopa aito Spot the Skrull -peli, joka pyytää sinua päättämään, onko joku ihminen vai salaa muotoa muuttava ulkomaalainen valepuvussa. Kyllä, lapset, tämä oli mitä huipputeknologian edistäminen 1900-luvun lopulla oli.

Rakastamme sitä siellä

Rakastamme, että siellä on tiski ja vieraskirja!

Tietysti hupun alla sivusto ei ole täysin aito. Vaikka Marvelin ohjelmistotekniikan johtaja Lori Lombert vitsaili, että '' Rakensimme tämän FrontPageen ja isännöimme sitä Angelfire '', se on itse asiassa rakennettu käyttäen modernia CSS: ää ja JavaScriptiä, joten vuoden 1995 selain, kuten Netscape Navigator, ei olisi tiennyt mitä tehdä sen kanssa. Puhumattakaan siitä, että sen 10 Mt: n koko olisi ollut ikuisesti ladattavissa puhelinverkkoon ARE-modeemin kautta.

Jokainen, joka muistaa jännityksen ensimmäisen verkkosivun lataamisen katselemisesta 1990-luvulla, on todellinen herkku. Parodia on jotain, joka voi näyttää helpolta, mutta on todella vaikea saada oikeaksi. Joten Lombertille ja hänen tiimilleen naulata pienet yksityiskohdat tällä tavalla on suuri saavutus, ja muistuttaa meitä nykyään sieluttomasta digitaalisesta apuohjelmasta, että verkko voi silti olla hauska ja anarkinen paikka.

Lue lisää: