WordPress web stranice: 14 sjajnih primjera

Ove nevjerojatne WordPress web stranice prikazuju najbolje od ovog popularnog CMS-a. Kada je prvi put pokrenut 2003. godine, WordPress se smatrao osnovnim alatom za bloganje za amatere. Vrlo brzo je uzeo maha, postajući punopravni CMS koji sada pokreće milijune web lokacija širom svijeta. A kreativni profesionalci od tada pomiču granice CMS-a kako bi stvorili složene i lijepe WordPress web stranice.

Kako bismo vam točno pokazali što ovaj nevjerojatni CMS može učiniti, odabrali smo neke od najboljih web stranica WordPress. Ako vas ovaj članak nadahne da izradite vlastitu web stranicu WordPress, ovo Vodiči za Wordpress pomoći će vam da započnete ili ako želite stvoriti izvanredan portfelj, pogledajte naš vodič za najbolje Teme portfelja WordPressa .



01. Rafal Bojar

WordPress web stranice: Rafal Bojar



Ovaj portfelj fotografija koristi WordPress uz Vue.js(Slika zaslužna: Rafal Bojar)

Dizajner Zhenya Rynzhuk koristi WordPress kao CMS bez glave, sa Vue.js za prednji kraj, za stvaranje ovog zanimljivog web mjesta s portfeljem fotografija za Rafal Bojar . Sadrži početnu stranicu koja prikazuje preglede odabranih priča, glatku mrežu koja prikazuje sve Bojarove radove i 'bitnu' stranicu koja objašnjava filozofiju i pristup fotografa.

'Cilj je bio pružiti posjetiteljima jedinstveno iskustvo i predstaviti Rafalova nevjerojatna djela', kaže Rynzhuk. Par je razgovarao o nekoliko različitih pozadinskih opcija, ali odlučio se za WordPress kako bi web stranicom bilo lako upravljati i redovito se ažurirati novim projektima.



Zajedno s WordPressom i Vue.jsom, web mjesto koristi S3 segment za pohranu podataka koji se isporučuju putem Cloudfront-a kako bi se osiguralo brzo vrijeme učitavanja. Rynzhuk se također poslužio Temelj i Hendrik-Jan de Harder's Pogled na kostur , kao i GSAP za animacije.

02. Adel Vakula

WordPress web stranice: Adel Vakula

Web stranica ovog modela obiluje šarmantnim kampirajućim humorom(Slika zaslužna: Adel Vakula)

Adel Vakula međunarodno je poznati model iz Ukrajine, a ovo promotivno mjesto za nju stiže od sunarodnjaka Yabloko ideje studio , koji su ga ne samo dizajnirali i kodirali već su stvorili sav ilustracijski rad. Rezultat je prekrasno prepoznatljiva vizualna gozba, koja obuhvaća brojne slikarske vinjete u kojima se nalazi naša glamurozna heroina.



Od početnog krajolika oblaka bombona koji doslovno puhne suptilnim animacijama, Vakula zvijezde na sanjarskim portretima dizajniranim da demonstriraju karizmatičnu osobnost. Ona hirovito gleda na parišku noć na vrhu gargule koja se duplirala kao YouTube gumb za reprodukciju, nakon što je s perona ulovila vlak podzemne željeznice u New Yorku u kompletu s mačkom. Posjeti Veneciji i Ibizi pružaju podjednako ekscentrične pozadine za Instagram i veze s e-poštom, gdje čak i pečati koji pijuckaju koktele potiču na slijed. To je jezik za obraze, ali napravljen s takvim šarmom i tehnikom da se ne možete ne zaljubiti. Čak i pokazivač miša ide u obliku srca.

Izgrađen na WordPress CMS-u, istaknuti element korisničkog sučelja zabavan je odjeljak u kojem možete povući i ispustiti odjeću na virtualnu Vakulu kako biste pregledali stvarne snimke modeliranja. Kako dolaze posjetnice za moguće kastinge, ova ima nezaboravniju poza od većine.

kako dodati fontove u after effects mac -

Autor: Mark Billen

03. Srednje dijete

WordPress web stranice: Sendvič trgovina Middle Child

Middle Child je izgrađen na potpuno prilagođenoj WordPress temi - kliknite sliku da biste istražili web mjesto

Nagrađivana sendvič sa sjedištem u Philadelphiji Srednje dijete je trebala web stranicu koja odgovara njegovoj neobičnoj, nepretencioznoj atmosferi. Studio za dizajn i tehnologiju s punom uslugom Samosvjestan izašao na kraj s izazovom, stvorivši web stranicu temeljenu na potpuno po mjeri WordPress tema koristeći Drvna građa i ACF - kombinacija koju studijski partner Mike Wagz naziva 'izmjenjivačem igara za ozbiljne programere WordPress tema'.

Self Aware također je koristio najnovije web tehnologije kako bi pružio optimalno iskustvo: izgled je stvoren pomoću CSS mreža i a Uslužni radnik predmemorira statička sredstva, uključujući CSS i JavaScript datoteke, kako bi ubrzao početno vrijeme učitavanja.

'Srednje dijete izbacuje atmosferu iz svakog kutka', dodaje Wagz. 'Toplo dočekuje kupce iz svih društvenih slojeva s pravom količinom zabave, kiča i neobičnosti. Mislim da je ovaj dizajn uspješan jer smo uspjeli uhvatiti taj duh i prevesti ga na web. '

Da biste pronašli svoj savršeni alat, pogledajte ove stranice graditelji web stranica . Uz to, u nastavku pogledajte najbolje cijene.

Današnje najbolje ponude za izradu web stranica Wix Domena Wix Connect £ 3 / mj Pogled HostGator Namjenski hosting za HostGator 119 američkih dolara / mj Pogled Kvadratni prostor Osobno 10 funti / mj Pogled Svakodnevno provjeravamo preko 130 milijuna proizvoda po najboljim cijenama

04. Morska berba

WordPress web stranice: Sea Harvest web stranica na iPadu

ED je koristio izgled u novinskom stilu na svojoj web stranici temeljenoj na WordPressu za Sea Harvest

Kada tržište morskih plodova sa sjedištem u Canberri Morska berba trebao novi identitet marke i pametnu digitalnu prisutnost kako bi se podudarao, obratio se australskoj agenciji za web i brendiranje ED . Web stranica WordPress nudi upečatljiv izgled u novinskom stilu s puno neobičnih dodira za istraživanje.

'Kad razmišljamo o morskim plodovima, mnogi od nas se vrate u sjećanje na jelo ribe i čipsa na plaži s prijateljima i obitelji', kaže dizajner Cam Tidy. 'Često bi ti zglobovi za poneti zamotali hranu u novine, pa je bilo prirodno istražiti to kao vizualnu ideju.'

Ipak, repliciranje statičnog izgleda ispisa na webu nije bilo bez izazova. Tim je koristio CSS Flexbox za premještanje sadržaja uz istovremeno zadržavanje dosljednih razmaka, bez obzira na veličinu zaslona. Gotovo svako mjerenje temelji se na prilagodljivoj skali koja koristi REM jedinice, što olakšava održavanje kontrole nad proporcijama vrste i slike dok se preglednik skalira.

najbolji laptop za adobe creative suite

Omiljena značajka programera Bryn Shanahan je činjenica da korisnici mogu 'crtati' na web mjestu, uključujući putem interaktivno traženje riječi . 'To smo postigli pokrivanjem web mjesta elementom HTML5 Canvas, koji je zatim korišten za crtanje korisničkih crteža', objašnjava.

ED koristi WordPress za mnoge svoje web stranice, smatrajući ga jednostavnim za upotrebu i intuitivnim za klijente. '[WordPress ima] jednostavan razvoj pozadine, što omogućuje više vremena za fokusiranje na prednji kraj kako bi dizajn oživio ', dodaje programer Adam Forcucci. 'Mogućnost da učinite to bez glave, koristeći WP Rest API , omogućuje nam upotrebu okvira kao što je React, koji postaje srž našeg budućeg razvoja na platformi. '

05. Maksim Škret

WordPress web stranice: Maxim Shkret

'Panda koja se topi' može se vrtjeti lijevo i desno(Slika zaslužna: Maxim Shkret)

Sa sjedištem u Sankt Peterburgu, Rusija, Maksim Škret slobodni je digitalni umjetnik. Njegova impresivna web stranica WordPress oženi portfelj za tržište e-trgovine, pokrećući novu inicijativu za prikupljanje sredstava.

Stranica se otvara u seriji od četiri 3D modela ili digitalnih skulptura koje se mogu vući i okretati za 360 stupnjeva. Svinja, Pustinjska lisica, Jednorožni dvostruki jednorog i Panda koja se topi mogu se vrtjeti lijevo-desno kako bi se postigao omiljeni kut. Klikom na gumb ‘Kupi ovaj snimak’ posjetitelji mogu kupiti digitalnu sliku različitih dimenzija po raznim cijenama. Prihodi će se objediniti u pretvaranje svakog digitalnog modela u stvarne fizičke skulpture pomoću 3D tiska petosovinskog CNC postupka obrade. To je sjajna ideja za pozivanje suradnika i pokazuje kako se pristup crowdfundinga može povezati s tipično pasivnim iskustvom.

Zasluge za izradu web mjesta uključuju njujorški Studio za dizajn Sochnik, ali glatki napori korisničkog sučelja nikada ne zasjenjuju Shkretov talent. To uključuje jednostavan galerijski dio mirnih slika skulptura koje se talasaju i talasaju kroz vodeni filtar. To je suptilan efekt, ali pojačava osjećaj teksture koju Shkret namjerava dati svakom komadu.

06. KOBU

WordPress web stranice: KOBU kreativna agencija

Web stranica za KOBU otvara se valovitom početnom stranicom u obliku lavaste lampe

Web stranice s portfeljem, što iznenađuje, i dalje pružaju neka od najplodnijih osnova za kreativno izražavanje i nadahnuće. Ova internetska posjetnica portugalske agencije KOBU slijedi taj etos s ukusnim, suzdržanim WordPress web mjestom koje i dalje puše od karaktera. Nazvavši se 'laboratorijom marke' koji se ne boji eksperimentiranja, tehnički rad ovdje demonstrira maštu nad kompleksnošću.

Tijekom niza elemenata dobivamo podsjetnik kako se CSS i SVG mogu kombinirati za maksimalni karakter sučelja. Apsolutno pozicioniranje koristi se za prekrivanje šarmantnih žičanih motiva, razbijanje linija između podebljanih blokova u pozadini i povezivanje odjeljaka. Petljasta HTML5 video ploča dobiva jedinstveni vrckavi rub koristeći SVG oblik kao masku pozicioniranu gore, prije nego što slike studija slučaja prepolove svoj radijus obruba da bi postale kružne. Web stranica uredno koristi biblioteku vrtuljaka slick.js za 'kasiranje' tima KOBU-a s uredskim konjem kroz sredinu glavne stranice.

Zenit je, međutim, vjerojatno bit koji vidimo prvo, otvarajući se na valovitom zaglavlju u obliku lavaste lampe proizvedeno manipuliranjem SVG stazama. Koristeći dodatak anime.js, polivalentni JavaScript animacijski mehanizam, privlačan je trik za uspostavljanje palete boja, ako ništa drugo.

Autor: Mark Billen

07. obrazac

WordPress web stranice: početna stranica bez formatiranja

Početna stranica noformat-a ima neposredan utjecaj

oblik je studio za strateški dizajn sa sjedištem u New Yorku. Početna stranica sadrži animirani dizajn očne jabučice koji prati pokazivač posjetitelja oko zaslona, ​​dok prekriveni tekst kruži kroz sve stvari koje noformat može stvoriti. Da bi stvorio očnu jabučicu, tim je prvo istražio dizajn After Effects CC prije korištenja three.js za izradu interaktivne verzije, objašnjava Ian Brewer, osnivač i kreativni direktor tvrtke Noformat.

'Koristili smo vertex i fragment sjenčiće za optimizaciju za GPU prikaz i natjerali ga da pulsira i bljesne logotip noformat iznutra,' nastavlja Brewer. 'Zatim smo primijenili efekte naknadne obrade kako bismo mu dali organskiji i manje 3D izgled zamućivanjem rubova i dodavanjem cvjetova u vrhunce.'

Ostatak web stranice opravdava utjecaj te prve stranice, s glatkim prijelazima na pomicanju i suptilnim paralaksnim efektima koji pokazuju tehnološke vještine bez utjecaja na upotrebljivost.

'Odabrali smo WordPress za našu web stranicu zbog brzine pokretanja i fleksibilnosti', objašnjava Brewer. 'Tijekom godina izgradili smo vlastite knjižnice i sustave za uređivanje temeljene na modulima koji nam omogućuju stvaranje ili uređivanje web mjesta brže od bilo kojeg drugog CMS rješenja.'

08. Ženska i žestoka

Nizozemski studio za dizajn dizajna Čudesna zemlja je isporučio e-trgovinu sa sass za Ženska i žestoka . Shema boja na licu WordPress-a u vašem ukusu, ukusna u sukobu, donosi poruku marke internetskog modnog trgovca s početka. Animirane 'naljepnice' - vrtložne lizalice, zvekirne strelice, lizanje usana - stvaraju bezobrazan osjećaj i trebale bi odjeknuti u Snapchat / Instagram generaciji kojoj je ovaj raspon usmjeren.

09. Puree Maison

Web stranica Mash House WordPress

najbolji indeks od 404 stranice ikad
Animirani škrabotine oživljavaju ovo WordPress web mjesto

Pire krompir je kreativni i strateški studio sa sjedištem u Parizu. Njegova se web stranica WordPress ističe uglavnom zahvaljujući sunčanim žutim animiranim škrabotinama koje se pojavljuju kad lebdi, ubrizgavaju osobnost u dosadne izjave o brendu i oživljavaju prijelaze. Oni također pomažu posjetiteljima da se snađu i potiču ih na istraživanje i interakciju sa stranicom.

10. Mi zapravo jesmo

WordPress web stranice: Mi to zapravo jesmo

Web stranica We Virtual Are izvrsno koristi video od 360 stupnjeva za prodaju svojih usluga

Kada se vaše poslovanje zasniva na tome da očarate ljude koji koriste virtualnu stvarnost kako bi ispričali emotivne priče, trebate web mjesto koje privlači ljude u vaš posao. I butični VR studio Mi to zapravo jesmo je uspio to, a zatim i neki. Njegovo mjesto, sagradio Herdl na WordPressu koristi mnoštvo vrhunskih tehnika, uključujući WebGL i video od 360 stupnjeva, dajući vam neodoljiv okus svojih imerzivnih usluga. Pogledajte njegove VR test vožnje za Audi, zajedno s neočekivanim gostima slavnih.

11. Asaro

WordPress web stranice: Asaro

Asarovo web mjesto dovoljno je prilagodljivo da izgleda lijepo na svim veličinama zaslona

Asaro pruža jedinstvena avanturistička iskustva i zabavna putovanja za goste superjahti širom svijeta. Kao dio šireg korporativnog rebranda, ovu je glatku web stranicu dizajnirala i razvila agencija sa sjedištem u Bristolu Zeleni kameleon .

Izgrađeni na prilagođenom WordPress okviru kako bi klijentu olakšali kontinuirano uređivanje sadržaja, posjetitelji se kreću na putovanje otkrića prepuno šarma. Suptilni efekti pomicanja uredno su povezani s interaktivnom isprekidanom linijom, crtajući navigacijski napredak na način na koji kapetan jahte može označavati karte. Prilagođeni CGI renderi korišteni su kao grafički uređaj za predstavljanje Asaro Ekskluzivne ponude usluga, u svjetlu oskudice fotografske imovine zbog privatne prirode događaja.

'Umjetnički smjer nadahnut je mješavinom fotografije kapljica vode i kazališnog dizajna plakata', objašnjava kreativni direktor Tom Anderson. 'Svidjela nam se estetika fotografskog stila i smatrali smo da se lijepo povezuje s osnovnom nautičkom temom projekta.'

Dovoljno reaktivan da ne samo da izgleda lijepo dosljedno na manjim zaslonima, brzina pristupa bila je i motivacija za racionalizaciju performansi. S obzirom na to da su stanovnici brodova u milosti morske mrežne povezanosti, vrijeme učitavanja više je nego prekomjerno na stolnim računalima, tabletima i mobilnim uređajima.

Autor: Mark Billen

12. Muzej dizajna Danska

WordPress web stranice: Danski muzej dizajna

Pametno korištenje paralaksnog pomicanja i responzivnih slika web mjesto Danskog muzeja dizajna mora posjetiti

Izgradila agencija za dizajn i brendiranje sa sjedištem u Kopenhagenu Glupi studiji , mjesto za Danske Muzej dizajna ne samo da prikazuje muzejske arhive, zbirke i istraživanja, već ih i predstavlja u modernom stilu praska. Od otvorene SVG animacije muzejskog logotipa, do privlačnog pogleda pomicanje paralaksa i zamjene paleta za poboljšanje raspoloženja dok se krećete kroz sadržaj, to je savršena prisutnost na mreži za bitno dizajnersko odredište.

13. Katy Perry

WordPress web stranice: Katy Perry

Čak i velike poznate osobe koriste alate Wordpressa

Pop princeza Katy Perry koristi samo WordPress za hostiranje svoje službene web stranice. Fokusirajući se - razumljivo - na vizualne predmete i natuknice na društvenim mrežama, stranica koristi visokokvalitetne fotografije umjetnika iz portfelja kako bi dala hrabru izjavu. Pomaknite se prema dolje da biste vidjeli datume obilaska, robu i još mnogo toga ili upotrijebite ikone da biste otkrili više.

To je čisto izrezano, ali nervozno mjesto koje uspijeva spojiti umjetnikovu prepoznatljivu osobnu sliku žvakaće žvake s korisnom, sjajnom funkcionalnošću u stilu mag. Prošla su vremena užurbanih web stranica prepunih previše animacije i glazbe koju ne možete zaustaviti. Perryjeva web stranica dokazuje da se možete spakirati u puno osobnosti koristeći samo jednostavnu bijelu pozadinu i lako dostupne poveznice, pružajući obožavateljima mogućnost slušanja, gledanja i učenja lako i uz njihovu udobnost.

14. Spremnik za tintu

WordPress web stranice: spremnik za tintu

Web mjesto Kao Collinsa osmišljeno je kako bi vas natjeralo na razmišljanje o tinti

Počevši od 1989. godine kao Collins Inkjet, samostalni pogon za opskrbu tintom za Kodakov kontinuirani inkjet printer, danas je Kao Collins jedan od vodećih svjetskih dobavljača. A ako nikada zapravo niste razmišljali o tinti (osim psovki kad vam ponestane pisača), stranica Kao Collinsa, The Ink Tank, sprema se to promijeniti.

Izgradio DBS interaktivni , Spremnik za tintu privlačno je WordPress mjesto koje donosi sva zaustavljanja kako bi vam donijelo najnovije vijesti iz industrije tinte i prikazalo neke od kreativnih načina na koje tvrtke i umjetnici trenutno koriste tintu. Što se nas tiče, vrhunac je njegov odjeljak Povijest tiska: prekrasan paralaksni jednopager pun animacije i efekata koji vas vodi od glinenih tableta do današnjeg brzog jednokratnog ispisa i gleda prema naprijed na neke buduće mogućnosti tiska.

Generate CSS - konferencija za web dizajnere: 26. rujna, Rich Mix, Shoreditch, London

najbolji laptop za gopro uređivanje video zapisa
(Slika zaslužna za budućnost)

Čitaj više: