2019. aasta parimad veebisaitide kujundused

Tehke see Adobe Stocki abil> Avastage tasuta mallid

WordPressi veebisaidid ja meie valik on parim minimalistlikud saidikujundused .

01. Phil Coffman

Blogi on määratud käsikirjafondiga

Coffman on oma blogi ümber kujundanud, et see sarnaneks pigem traditsioonilise ajakirjaga

Kui meil oleks iga nael iga kord, kui oleme kuulnud veebidisainerit ütlemas: 'Mul on vaja oma blogi ümber kujundada,' oleksime miljonärid. Nii et müts maha Phil Coffman , Texases Austinis elav disainer, tegelikult nii. Kuid boonusena on ta teinud ka sellega suurepäraselt leidlikku ja originaalset tööd.

Kombineerides käekirja ja ajalehtede väljalõike stiilis tüüpi, maalähedase taustaga, mis sarnaneb vananeva, füüsilise paberiga, on see üks parimaid ajaveebi kujundusi, mida oleme aastaid näinud. Ja see on osaliselt tunnistus Coffmani tehtud töö mahust.

'See disain järgib paljusid varasemaid ebaõnnestunud katseid,' tunnistab ta. “Enda jaoks disainimine on tõenäoliselt minu kõige vähem lemmik asi. kui ma võitlen massiliselt otsustamatuse ja ebareaalsete ootuste pärast, mida ma endale esitan. Lõpuks võitis see kontseptsioon, sest tahtsin sukelduda tagasi tekstuuridesse, käsitsi joonistatud elementidesse ja üldisesse kunstisuunda, mis on pigem isiklik ajakiri kui poleeritud väljaanne. '

Blogi postitus seatud Neue Haas Groteski ja Milleri fontidega

'Kui sain teada, et Neue Haas Grotesk oli Adobe'ilt saadaval, tuli Miller kiiresti järele, kuna need kaks fonti paarisid omavahel tõeliselt hästi,' ütleb Coffman

Kontseptsiooni elluviimine hõlmas ka mõningaid tehnilisi probleeme, lisab ta. 'Postituse pealkirjade ja mustade joonte tekstuuriga efekti nägemiseks oli vaja natuke katseid ja eksitusi,' selgitab Coffman. 'Ma teadsin, et CSS-il on võimalus teksti kasutada lõikemaskina, kuid ma ei olnud kulutanud palju aega selle süvendamiseks, kuidas seda õigesti tõmmata.'

Kui ta oli CSS-i deklaratsioonide õige kombinatsiooni rakendamise etapid läbi töötanud, seisis ta silmitsi väljakutse hankida ja ette valmistada õige tekstuuride segu. 'See eeldas tekstuuride leidmist sobiva kulumise ja isikupärasusega, tekitamata probleeme teksti loetavusega,' märgib ta.

Kujutiste lukustamine oli Coffmanile ka 'lõbus väljakutse'. 'Ma jõudsin CSS Gridi kasutamiseni, et luua märgistuse skelett, askeldades ruudustiku malliga, et anda mulle piisavalt paindlikkust joonise ja joonise pealkirja paigutamisel, säilitades samal ajal sama külgede suhe mobiilipaigutusest töölauale.'

Blogipostitus segades professori ja Milleri fonte

Coffman valis käekirja fontiks professori. 'See on loetav, kuid ka suurepäraste ligatuuridega ja tundub, et selle oleks võinud sinise pastakaga ajakirjas kirjutada,' selgitab ta.

Tüpograafia jaoks asus ta pealkirjade ja väiksemate sans-serif-elementide jaoks Neue Haas Groteski juurde, põhiteksti Miller ja käsitsi kirjutatud stsenaariumi professor.

'Selle kontseptsiooni võti on käsitsi kirjutatud fondi ning sans- ja serif-fontide vastastikune mõju,' selgitab ta. 'Ma tundsin, et käsitsi kirjutatud fondi toimimiseks vajasin sirgjoonelisemat või tuttavamat sorti ja serifi, mitte selliseid, millel oleks palju omaette isiksust.'

02. Boole'i ​​mäng

Boole

See lõbus mäng õpetab, kuidas kasutada boolean toiminguid Adobe Illustratoris ja muudes vektoritööriistades

Boole'i ​​mäng on lõbus brauserimäng, mis õpetab boolean-toiminguid kasutama Adobe Illustratoris, Sketchis, Figmas ja teistes vektoriredaktorites. Looja Mark MacKay selgitab, kuidas see tekkis.

'Olen juba mitu aastat disainimänge ehitanud ja kogun alateadlikult asju, mida on keeruline muuta harivateks mängudeks,' ütleb ta. 'See idee oli juba mõnda aega hõljunud ja siis nägin, et paper.js-l on nende teostamiseks raamatukogu: matemaatiliselt ületab see minu võimeid. Nii et tegin kiire testi ja nägin, et see võib olla lõbus. ”

Kui paper.js teeb saidi jaoks suurt vektoritööd, siis MacKay kasutas animatsioonide jaoks ka anime.js, heli jaoks growler.js ja värvilahenduse haldamiseks d3-color.

Boole

MacKay kasutas saidi ülesehitamiseks paper.js, anime.js, growler.js ja d3-color

Peamine tehniline väljakutse oli selle toimimine kõigis seadmetes, telefonidest töölauale, jätkab ta. „See osutus tohutult keerukaks, kuna peate vektorite suurust muutma ja paigutust muutma sõltuvalt orientatsioonist. Kui oleksin valinud fikseeritud nähtud suuruse, oleks projekti uksest välja saamiseks kulunud mul ilmselt kolme kuu asemel üks kuu. ”

Ja huvitaval kombel õpetasid need kolm kuud talle olulisi õppetunde arendustööriistade kasutamise kohta.

Boole

Peamine väljakutse oli panna mäng toimima kõigis seadmetes

'Arenguökosüsteem on optimeeritud väga erinevateks asjadeks kui see, mida vajab üksik loov disainer-arendaja,' selgitab ta. 'Justkui oleksite ülesandeks silla ehitamine ja eeldatakse, et teil on kraanaoperaatorid, eelnevalt ehitatud betoonkonstruktsioonid, aururullid ja nii edasi. Kuid kui vajate inimesi lihtsalt oja ületamiseks, sobib lihtne käsitsi ehitatud puitkonstruktsioon.

'Ma ütlen seda seetõttu, et tundsin end varem puudulikuna, kuna ei teadnud Reactit, NPM-i, testimist, parimaid tavasid jne. Nüüd saan aru, et pean optimeerima oma voolu ja naudingu jaoks. Dev-tööriistad ja tavad on tavaliselt orienteeritud usaldusväärsusele, koostööle ja modulaarsusele, mis on väga erinevad piirangud. '

03. Gyllenhaali eksperiment

Britney kirjavigade andmete visualiseerimine

See sait kasutab Redditi andmeid, et visualiseerida, kui halb meil kuulsuste nimede õigekirjaga on

Üks parimaid näiteid andmete visualiseerimisest, mida oleme mõnda aega näinud, Gyllenhaali eksperiment on Russell Goldenbergi ja Matt Danielsi idee digitaalsest väljaandest Puding .

'Olime näinud see lugu Colin Morrise enda tuvastatud Redditi kirjavigade analüüsi kohta, ”selgitab Goldenberg. 'Ja arvas, et idee visualiseerida inimeste õigekirja voogu on veel midagi teha.'

'Me täiendasime selliste kuulsuste nimesid nagu Jake Gyllenhaal, kuna need olid üsna silmapaistvad ja mitte midagi teie tüüpilisest õigekirja mesilast. Teadsime ka, et tahame midagi interaktiivset muuta, et näha õigekirja voogude reaalajas tagasisidet, nii et ühendasime need mõtted kokku, et luua õigekirja mesilase interaktiivne visualiseerimine. '

Õigekirja kutsuv tekstiväli

Loojad soovivad teha midagi interaktiivset, mis näitaks õigekirja tagasisidet õigekirja voogude kohta

Paar tugines enamiku visualiseerimise osas JavaScripti ja peamiselt D3.js teegile, samuti kasutas kasutajate tulemuste salvestamiseks Firebase'i.

'Kõige suurem väljakutse oli vooskeemide renderdamine,' ütleb Goldenberg. 'Ehkki see on tehniliselt sanky diagramm, pidime tegema palju kohandatud asju, et teed renderdada korralikult ja mitte kattuda.'

Matthew McConaughey kirjavigade andmete visualiseerimine

Kaalumiseks oli palju kasutajavooge, alates erinevatest küsimustele vastamise viisidest kuni erinevate olekute käsitlemiseni

Saidi ehitamise käigus oli suurim üllatus teada saada, kui palju erinevaid viise inimesed nimesid kirjutavad. „Seal oli üle 800 viisi, kuidas inimesed üritasid näiteks Matthew Mcconaugheyt loitsida.

„Arenduse seisukohalt oli palju kasutajate voogusid, mida tuleks kaaluda, alates igasugustest variatsioonidest kuni küsimusele vastamiseni, lõpetades erinevate olekutega (nt kas nad naasid saidile juba vastanud?). Kõigi võimalike seisundite ennetähtaegne tundmine oli arenduse ja kujunduse sujuvaks kulgemiseks ülioluline. ”

04. JSConf 2019

JSConf 2019 koduleht

See konverentsisait keskendub põhialustele ja teeb neid suurepäraselt

Veebikonverentside korraldajatele on see tõeline peavalu. Te ei soovi kogu oma aega veeta oma veebisaidil töötades, kui võiksite oma energia suunata oma sündmuse planeerimisele ja selle parimaks muutmisele, mis te olla saate. Kuid pange üles lihtne küpsiste lõikamise sait ja inimesed hakkavad mõtlema, kui palju teate teemal, mida teie konverents arutab.

Kuidagi näivad JSConf EU korraldajad selle ringi ruutu panevat. Sest mitte ainult ei kiideta ja imetleta nende konverentsi, vaid ka nende veebisait, mis on ehitatud staatilise saidigeneraatori talveseppale, on ka päris hämmastav. Mitte sellepärast, et see oleks täis nutikaid trikke - see pole nii -, vaid seetõttu, et see keskendub põhialustele ja pakub igal rindel, alates kasutusmugavusest kuni selle sisu asjakohasuseni.

Foto JSConfi 2019 osalejatest

Malte Ubi on teinud kõik selleks, et muuta see 'maailma kiireimaks konverentsiveebiks'

Lisaks on see kiire - ülikiire. As Malte ubl selgitab sisse see blogipostitus : 'Olen kulutanud täiesti ebamõistlikult palju aega, et muuta see maailma kiireimaks konverentsiveebiks.' (Ta pole kindel, kas see õnnestus, kuid seni pole keegi tema nõuet kehtetuks tunnistanud).

See aitab, et Ubi on AMP looja - veebikomponentide kogu, mis võimaldab usaldusväärselt kiireid veebisaite luua. Uute tehnikate proovimiseks on ta mänguväljakuna kasutanud jSConfi veebisaiti; ja need näivad kindlasti toimivat; sait töötab suurepäraselt igas seadmes, mida oleme proovinud.

Võite põhjalikult sukelduda nutikatesse viisidesse, kuidas Ubi on selle saavutanud, alates fondi jõudluse optimeerimisest kuni surnud koodi eemaldamiseni, siin .

05. Kujunduse pealkirjad

Kujunduse pealkirjade koduleht

See lustakas sait parodeeris jama ametinimetusi vaevatu täpsusega

Kes ütleb, et veebidisain ei saa lõbus olla? Mitte Xtian Miller ja Boris Crowther , kes on loonud selle lõbusa ametinimetuse generaatori, Kujunduse pealkirjad , mis parodeerib mõnda rumalamat monickerit, mida mõned veebidisainerid näivad olevat tänapäeval allutanud.

Kujunduse mõttes pole see keeruline sait: see teeb ühte ja teeb seda väga hästi ning selle kohta võib öelda tohutult palju.

'See algas tegelikult sisemise naljana,' selgitab Miller. 'Heas või halvas mõttes on loomemajanduse tiitlid välja arendanud elavhõbeda olemuse, põhjustades nende pidevas arengus nende määratlustes ebajärjekindlust.

Kujunduse pealkirjade koduleht

Sait ehitati staatilise HTML, CSS, JS, Gulp ja Sass alusele

'Selle tulemusena on paljud disainerid oma pealkirjadega loovalt mõjunud, et kõlada asjakohasemalt või vältida tuvi auku. Ametlikud tiitlid seda ei vähenda, nii et nad pakuvad oma portfellide ja sotsiaalse biograafia jaoks pseudo pealkirju. Veebisaidi tegelik eesmärk oli luua visuaalne ja lõbus viis, kuidas see kauaaegne nali meie süsteemist välja tuua. '

Sait ehitati staatilise HTML-i, CSS-i ja JS-i abil, arenduse töövoo automatiseerimiseks Gulp ja CSS eeltöötluseks Sass. Generaatori funktsioon ja algoritm tehti Vanilla JavaScripti abil täiesti nullist.

Suurim tehniline väljakutse oli segamisfunktsiooni algoritmi õige saamine, lisab Miller. 'Pidime seda pidevalt muutma, kuni see ei olnud liiga korduv, ja teil oli sama hea võimalus saada täiesti normaalne tiitel kui absurdselgi. Mida rohkem te seda kasutate, seda naeruväärsemaks (või tõsisemaks) see muutub. See võib tunduda lihtne, kuid algoritmi täpsustamiseks kulus palju katsetusi. '

Kujunduse pealkirjade koduleht

Suurim tehniline väljakutse oli juhusfunktsiooni algoritmi õige saamine

Näib, et duo inspireeris meid rahvusvahelisest tüpograafilisest stiilist, kuid täpsemalt Vignelli NYC metroo kujundussüsteemist paigutuse ja tüpograafia jaoks.

'Kui lähete selle stiili juurde, olete mõnevõrra teadlik selle taga olevast mõjust, autoriteedist ja objektiivsusest, mis oli meie meelest irooniline kogu selle kontseptsiooni jaoks,' ütleb Miller.

„Tahtsime, et pealkiri oleks võimalikult ebameeldivalt suur - vaateaknasse sobiv - rõhutaks selle olulisust, ning kasutasime mõju ja mitmekesisuse tagamiseks tänapäevaseid värvipaare. Värvide juhuslikkus oli lihtne lahendus segamise monotoonsuse eemaldamiseks ja see sobib kuidagi hästi sellega, kuidas iga pealkiri kannab oma isikut. '

06. Kapten Marvel

Kapten Marveli koduleht

Me ei saanud kunagi aru, kui väga igatsesime neoonvärve ja juustu fonte

Uusim Marveli film, Kapten Marvel , toimub 1990ndatel ja nii loob see lustakas reklaamisait suurepäraselt selle kümnendi väljanägemise ja välimuse.

Nooremad inimesed võivad olla šokeeritud, kui elementaarne ja kohmakas see välja näeb, kuid teatud vanuses inimesed saavad nostalgilise kiiruse näha neoonfonte, juustu animatsioone, halbu fotokultuure, külalisteraamatut ja hitt-loendurit, mis kõik varem olid lahutamatu osa. varajase veebisaidi kujunduse.

Seal on isegi autentne mäng 'Spot the Skrull', mis palub teil otsustada, kas keegi on inimene või varjatult kuju muutev tulnukas. Jah, lapsed, see oli 20. sajandi lõpupoole filmide reklaamimine.

Meile meeldib see seal

Meile meeldib, et seal on lett ja külalisteraamat!

Muidugi ei ole sait kapoti all täiesti autentne. Ehkki Marveli tarkvaratehnika direktor Lori Lombert viskas nalja, et 'ehitasime selle FrontPage'i ja hostime seda Angelfire'is', on see tegelikult ehitatud kaasaegse CSS-i ja JavaScripti abil, nii et 1995. aasta brauser nagu Netscape Navigator ei oleks teadnud, mida sellega teha. Rääkimata sellest, et selle 10MB suurust oleks olnud igavesti vaja alla laadida sissehelistusega AOL-i modemiga.

See tähendab, et kõigile, kes mäletavad põnevust oma esimese veebisaidi allalaadimise vaatamisest 1990ndatel, on see tõeline maiuspala. Paroodia on asi, mis võib tunduda lihtne, kuid tegelikult on seda uskumatult raske õigeks saada. Seega on Lomberti ja tema meeskonna jaoks väikeste detailide absoluutne sel viisil naelutamine suurepärane saavutus ja tuletab meile tänapäeval hingetu digitaalse kasulikkuse meelde, et veeb võib siiski olla lõbus ja anarhiline koht.

Loe rohkem: