De bedste webstedsdesign i 2019 indtil videre

Gør det med Adobe Stock> Oplev gratis skabeloner

Da så meget af internetets kommercielle aktivitet er skiftet fra websteder til sociale medier, handler innovativt webdesign mindre om at vise sig og mere om stille at levere gode brugeroplevelser. Og dette findes oftere i mindre projekter, online eksperimenter og steder, der er bygget til sjov end i glat og poleret virksomhedsarbejde.



I dette indlæg ser vi på seks websteder, som alle er lanceret i år, og som muligvis er gået under din radar, men som ikke desto mindre viser nogle inspirerede og innovative tilgange til webdesign. Derudover hører vi fra deres skabere om, hvordan de blev sammensat, og hvad de har lært som et resultat.



Se mere på vores favorit for mere webinspiration WordPress-websteder og vores valg af det bedste minimalistiske webstedsdesign .

01. Phil Coffman

Blog indstillet med skrifttype



Coffman har redesignet sin blog til at ligne mere på en traditionel journal

Hvis vi havde et pund for hver gang, vi har hørt en webdesigner sige 'Jeg har virkelig brug for at komme rundt med at redesigne min blog', ville vi være millionærer. Så hatte til Phil Coffman , en designer, der bor i Austin, Texas, for faktisk dong så. Men en bonus, han har også gjort et spektakulært opfindsomt og originalt stykke arbejde med det.

Ved at kombinere håndskrift og avisudskæringstype med en jordisk baggrund, der ligner aldrende, fysisk papir, er dette et af de bedste blogdesign, vi har set i år. Og det er delvist et bevis på den mængde arbejde, Coffman lagde i det.

hvordan man rydder lag i Photoshop

”Dette design følger mange tidligere mislykkede forsøg,” indrømmer han. ”At designe for mig selv er muligvis min mindst yndlings ting at gøre. når jeg kæmper massivt af ubeslutsomhed og urealistiske forventninger, som jeg stiller til mig selv. I sidste ende vandt dette koncept, fordi jeg ønskede at dykke tilbage i teksturer, håndtegnede elementer og en samlet kunstretning, der mere er en personlig journal end en poleret publikation. ”



Blogindlæg i skrifttyperne Neue Haas Grotesk og Miller

'Når jeg først fik at vide, at Neue Haas Grotesk var tilgængelig fra Adobe, kom Miller hurtigt efter, da de to skrifttyper passer rigtig godt sammen,' siger Coffman.

At sætte konceptet i handling medførte også nogle tekniske udfordringer, tilføjer han. ”Det krævede lidt prøving og fejl for at få den strukturerede effekt til at se ud som jeg ville have på posttitlerne og de sorte linjer,” forklarer Coffman. 'Jeg vidste, at CSS havde evnen til at bruge tekst som en klipmaske, men jeg havde ikke brugt meget tid på at grave i, hvordan man korrekt kunne trække den af.'

Når han først havde arbejdet igennem trinnene med at anvende den korrekte kombination af CSS-erklæringer, stod han over for udfordringen med at indkøbe og forberede den rigtige blanding af teksturer. ”Dette krævede at finde teksturer med den rigtige mængde slid og personlighed uden at skabe problemer med tekstens læsbarhed,” bemærker han.

Billedlåsning var også en 'sjov udfordring' for Coffman. 'Jeg landede ved at bruge CSS Grid til at etablere skelettet til markeringen og fik mig i gitterskabelonen for at give mig tilstrækkelig fleksibilitet med at placere figuren og billedteksten, mens jeg opretholdte det samme billedformat fra mobillayoutet til skrivebordet.' '

Blogindlæg i blanding af professor- og Miller-skrifttyper

Coffman valgte professor som håndskrifttype. 'Det er læseligt, men har også gode ligaturer og ser ud til at det kunne være skrevet med en blå pen i en journal', forklarer han.

Til typografien slog han sig ned på Neue Haas Grotesk for titlerne og mindre sans-serif-elementer, Miller for brødteksten og professor for det håndskrevne manuskript.

”Nøglen til dette koncept er samspillet mellem den håndskrevne skrifttype og sans- og serif-skrifttyper,” forklarer han. 'Jeg følte, at for at den håndskrevne skrifttype kunne fungere, havde jeg brug for en sans og serif, som var mere ligetil eller velkendt, snarere end dem, der havde meget egen personlighed.'

02. Det boolske spil

Hjemmeside for boolsk spil

Dette sjove spil lærer dig, hvordan du bruger boolske operationer i Adobe Illustrator og andre vektorværktøjer

Det boolske spil er et sjovt browserspil, der lærer dig, hvordan du bruger boolske operationer i Adobe Illustrator, Sketch, Figma og andre vektorredaktører. Skaberen Mark MacKay forklarer, hvordan det skete.

”Jeg har bygget designspil i nogle år nu, og jeg samler ubevidst ting, som jeg finder udfordrende at konvertere til pædagogiske spil,” siger han. ”Denne idé havde svævet rundt i nogen tid, og så så paper.js have et bibliotek til at udføre dem: matematisk går det langt ud over min evne. Så jeg lavede en hurtig test og så, at det kunne være sjovt. ”

Mens paper.js gør det kraftige løft af vektorarbejdet for webstedet, brugte MacKay også anime.js til animationerne, growler.js til lyden og d3-farve til at styre farveskemaet.

Hjemmeside for boolsk spil

MacKay brugte paper.js, anime.js, growler.js og d3-color til at opbygge webstedet

Den største tekniske udfordring var at få det til at fungere på alle enheder, fra telefoner til desktop, fortsætter han. ”Dette viste sig at være enormt udfordrende, fordi du skal ændre størrelsen på vektorer og ændre layoutet afhængigt af retningen. Hvis jeg havde valgt en fast set størrelse, ville det sandsynligvis have taget mig en måned i stedet for tre for at få projektet ud af døren. ”

Og interessant nok lærte disse tre måneder ham nogle vigtige lektioner om brug af dev-værktøjer.

Hjemmeside for boolsk spil

Den største udfordring var at få spillet til at fungere på alle enheder

”Udviklingsøkosystemet er optimeret til meget forskellige ting end hvad en solo-kreativ designer-udvikler har brug for,” forklarer han. ”Det er som om du havde til opgave at bygge en bro, og det antages bare, at du har kranoperatører, forudbyggede betonkonstruktioner, damprullere osv. Men hvis du simpelthen har brug for folk til at krydse en strøm, vil en simpel håndbygget træstruktur gøre.

”Jeg siger dette, fordi jeg tidligere følte mig utilstrækkelig til ikke at kende React, NPM, test,“ best practices ”osv. Nu forstår jeg, at jeg skal optimere til min egen flow og nydelse. Dev-værktøjer og -praksis har tendens til at være orienteret mod pålidelighed, samarbejde og modularitet, som er meget forskellige begrænsninger. ”

03. Gyllenhaal-eksperimentet

Datavisualisering af stavefejl i Britney

Dette websted bruger Reddit-data til at visualisere, hvor dårlige vi er ved at stave kendte navne

Et af de bedste eksempler på datavisualisering, vi har set i nogen tid, Gyllenhaal-eksperimentet er udtænkt af Russell Goldenberg og Matt Daniels af digital publikation Budding .

”Vi havde set denne historie om Colin Morris 'analyse af selvidentificeret Reddit stavefejl, ”forklarer Goldenberg. 'Og troede, der var mere, der kunne gøres med ideen om at visualisere strømmen af, hvordan folk stavede.'

”Vi finpudset med at bruge berømthedsnavne som Jake Gyllenhaal, da de var ret fremtrædende og ikke noget i din typiske stavebi. Vi vidste også, at vi ønskede at lave noget interaktivt for at se feedback i realtid om stavningsstrømmene, så vi smeltede disse tanker sammen for at skabe en stavemæssig interaktiv visualisering af bi. '

Tekstfelt, der opfordrer dig til at stave

Skaberne ønsker at lave noget interaktivt, der viste feedback i realtid om staveflow

Parret var afhængig af JavaScript og primært D3.js-biblioteket til det meste af visualiseringen samt brug af Firebase til lagring af brugerresultater.

'Den langt største udfordring var gengivelse af flowdiagrammer,' siger Goldenberg. 'Selvom det teknisk set er et sankey-diagram, var vi nødt til at lave en masse brugerdefinerede ting for at få stierne til at gengives ordentligt og ikke overlappe hinanden.'

Datavisualisering af stavefejl ved Matthew McConaughey

Der var mange brugerstrømme at overveje, fra forskellige måder at besvare et spørgsmål på, til at håndtere forskellige tilstande

Under opførelsen af ​​stedet var den største overraskelse at lære, hvor mange forskellige måder folk stavede navne på. ”Der var for eksempel over 800 måder, hvorpå folk forsøgte at stave Matthew Mcconaughey.

'Ud fra et udviklingsmæssigt synspunkt var der mange brugerstrømme at overveje, fra alle mulige variationer til, hvordan de kunne besvare et spørgsmål, til håndtering af forskellige tilstande (f.eks. Vendte de tilbage til webstedet, når de allerede har svaret?). At kende alle mulige stater på forhånd var afgørende for, at udviklingen og designet gik glat. ”

04. JSConf 2019

JSConf 2019-hjemmeside

Dette konferenceside fokuserer på det grundlæggende og gør det glimrende

Det er en reel hovedpine for webkonference arrangører. Du ønsker ikke at bruge hele din tid på at arbejde på dit websted, når du kan fokusere dine kræfter på at planlægge dit arrangement og gøre det til det bedste, du kan være. Men hold et simpelt cookie cutter-sted, og folk vil undre sig over, hvor meget du ved om det emne, din konference diskuterer.

På en eller anden måde synes arrangørerne af JSConf EU at have kvadreret den cirkel. Fordi ikke kun er deres konference universelt rost og beundret, men deres hjemmeside, der er bygget på den statiske site generator wintersmith, er også ret fantastisk. Ikke fordi det er fyldt med smarte tricks - det er det ikke - men fordi det fokuserer på det grundlæggende og leverer på enhver front, lige fra brugervenlighed til relevansen af ​​dets indhold.

Foto af JSConf 2019-deltagere

Malte Ubi har lagt alt i at gøre dette til '' den hurtigste konferenceside i verden ''

Plus det er hurtigt - superhurtigt. Som Malte ubl forklarer i dette blogindlæg : 'Jeg har brugt en helt urimelig tid på at gøre det til det hurtigste konferenceside i verden.' (Han er ikke sikker på, om det lykkes, men indtil videre har ingen ugyldiggjort hans krav).

Det hjælper, at Ubi er skaberen af ​​AMP, et webkomponentbibliotek til oprettelse af pålideligt hurtige websteder. Han har brugt jSConf-webstedet som sin legeplads til at afprøve nye teknikker; og de ser bestemt ud til at have fungeret; webstedet fungerer smukt på alle enheder, vi har prøvet det.

Du kan gå dybt ned i de smarte måder, som Ubi har opnået dette, fra optimering af fontydelse til eliminering af død kode, her .

05. Designtitler

Startside for designtitler

Dette sjove sted parodierede nonsens jobtitler med ubesværet præcision

Hvem siger, at webdesign ikke kan være sjovt? Ikke Xtian Miller og Boris Crowther , der har skabt denne sjove jobtitelgenerator, Designtitler , som parodierer nogle af de mere blide monikere, som nogle webdesignere ser ud til at gå under i disse dage.

Designmæssigt er det ikke et komplekst sted: det gør en ting og gør det meget godt, og der er frygtelig meget at sige for det.

”Det startede virkelig som en indvendig vittighed,” forklarer Miller. ”På godt og ondt har titler inden for den kreative industri udviklet en mercurial natur, der forårsager inkonsekvens i deres definition, når de løbende udvikler sig.

Startside for designtitler

Webstedet blev bygget på et fundament af statisk HTML, CSS, JS, Gulp og Sass

”Som et resultat er mange designere blevet kreative med deres titler for at lyde mere relevante eller for at undgå at blive duerhulede. De officielle titler klipper det ikke, så de kommer med pseudo-titler til deres porteføljer og sociale bios. Hjemmesidens virkelige mål var at skabe en visuel og sjov måde at få denne mangeårige vittighed ud af vores system. ”

Webstedet blev bygget med statisk HTML, CSS og JS, med Gulp til automatisering af udviklingsworkflow og Sass til CSS-forbehandling. Generatorfunktionen og algoritmen blev lavet helt fra bunden i Vanilla JavaScript.

Den største tekniske udfordring var at få algoritmen til shuffle-funktionen lige, tilføjer Miller. ”Vi var nødt til løbende at tilpasse det til et punkt, hvor det ikke var for gentaget, og du havde lige så god en chance for at få en helt normal titel som du gjorde en absurd. Jo mere du bruger det, jo mere latterligt (eller seriøst) bliver det. Det ser måske simpelt ud, men det krævede en masse test for at finjustere algoritmen. ”

Startside for designtitler

Den største tekniske udfordring var at få algoritmen til shuffle-funktionen helt rigtigt

Ser du ud, duoen, vi blev inspireret af den internationale typografiske stil, men mere specifikt Vignellis NYC-undergrundsdesignsystem til layout og typografi.

”Når du går helt ind på den stil, er du noget opmærksom på den indflydelse, autoritet og objektivitet, der ligger bag den, som vi følte var ironisk for hele dette koncept,” siger Miller.

”Vi ønskede, at titlen skulle være så ubehageligt stor som muligt - hvilket passer til visningsporten - for at understrege dens betydning og brugte moderne farveparring for stød og variation. Farve randomiseringen var en simpel løsning til at fjerne monotonien ved at blande, og det passer godt sammen med, hvordan hver titel bærer sin egen persona. ”

06. Kaptajn Marvel

Captain Marvel hjemmeside

Vi har aldrig indset, hvor meget vi savnede neonfarver og osteagtige skrifttyper

Den seneste Marvel-film, Kaptajn Marvel , finder sted i 1990'erne, og så genskaber dette sjove reklameside perfekt udseendet og følelsen af, hvordan internettet så ud i det årti.

Yngre mennesker kan blive chokeret over, hvor grundlæggende og klodset det ser ud, men de i en bestemt alder får et nostalgisk skyn med at se neonskrifttyperne, osteagtige animationer, dårlige fotoafgrøder, gæstebog og hit counter, som alle plejede at være del og pakke af tidligt webstedsdesign.

Der er endda et autentisk 'Spot the Skrull'-spil, der beder dig om at beslutte, om nogen er et menneske eller i hemmelighed en formskiftende udlænding i forklædning. Ja børn, dette var hvad banebrydende filmfremme i slutningen af ​​det 20. århundrede handlede om.

Vi elsker det der

Vi elsker, at der er en tæller og gæstebog!

Naturligvis under emhætten er webstedet ikke helt autentisk. Mens Marvels direktør for softwareteknik Lori Lombert spøgte, at 'Vi byggede dette i FrontPage og var vært for det Angelfire', er det faktisk blevet konstrueret ved hjælp af moderne CSS og JavaScript, så en 1995-browser som Netscape Navigator ville ikke have vidst, hvad de skulle gøre med det. For ikke at nævne, at dens 10 MB størrelse ville have taget for evigt at downloade ved opkald via et skrigende AOL-modem.

Når det er sagt, for enhver, der husker spændingen ved at se deres første download af webside i 1990'erne, er dette en rigtig god fornøjelse. Parodi er noget, der kan se let ud, men det er faktisk utrolig svært at få det rigtigt. Så for Lombert og hendes team til absolut at sømme de små detaljer på denne måde er en stor præstation og minder os i disse dage om sjældeløst digitalt værktøj om, at internettet stadig kan være et sjovt og anarkisk sted.

Læs mere: