„WordPress“ svetainės: 14 nuostabių pavyzdžių

Šios nuostabios „WordPress“ svetainės demonstruoja geriausias šio populiaraus TVS galimybes. Kai ji pirmą kartą buvo paleista 2003 m., „WordPress“ buvo laikoma pagrindine mėgėjų dienoraščių rašymo priemone. Labai greitai jis pakilo ir tapo visaverte TVS, kuri dabar valdo milijonus svetainių visame pasaulyje. Kūrybingi profesionalai nuo to laiko siekia CMS ribų, kad sukurtų sudėtingas ir gražias „WordPress“ svetaines.

Norėdami tiksliai parodyti, ką gali padaryti šis neįtikėtinas TVS, mes pasirinkome keletą geriausių „WordPress“ svetainių. Jei šis straipsnis jus įkvepia kurti savo „WordPress“ svetainę, tai „WordPress“ mokymo programos padės jums pradėti, arba jei norite sukurti nuostabiai atrodantį portfelį, peržiūrėkite geriausių mūsų vadovą „WordPress“ portfelio temos .

01. Rafalas Bojaras



Šiame fotografijos portfelyje kartu su „Vue.js“ naudojama „WordPress“(Vaizdo kreditas: Rafal Bojar)

Dizaineris Zhenya Rynzhuk naudojo „WordPress“ kaip CMS pusiau be galvos, su Vue.js iš anksto, sukurti šią įtraukiančią fotografijos portfelio svetainę Rafalas Bojaras . Jame yra pagrindinis puslapis, kuriame rodomos pasirinktų istorijų peržiūros, aptakus tinklelis, rodantis visus Bojaro darbus, ir „esencijos“ puslapis, kuriame paaiškinama fotografo filosofija ir požiūris.

„Tikslas buvo suteikti lankytojams unikalią patirtį ir pademonstruoti nuostabius Rafalo darbus“, - sako Rynzhukas. Pora aptarė keletą skirtingų „backend“ variantų, tačiau nusprendė dėl „WordPress“, kad svetainę būtų lengva valdyti ir reguliariai atnaujinti naujais projektais.

Kartu su „WordPress“ ir „Vue.js“ svetainė naudoja S3 segmentą duomenims saugoti, kurie pristatomi per „Cloudfront“, kad būtų užtikrintas greitas įkelties laikas. Rynzhukas taip pat pasinaudojo Pagrindinė uoliena ir Hendrik-Jan de Harder Skeleto vaizdas , taip pat GSAP animacijoms.

02. Adelis Vakula

Šio modelio svetainė apstu žavingo, nestabilaus humoro(Vaizdo kreditas: Adel Vakula)

Adel Vakula yra tarptautiniu mastu garsus modelis iš Ukrainos, ir ši reklaminė svetainė jai atkeliauja iš kitų tautiečių „Yabloko“ idėjų studija , kuris ne tik suprojektavo ir užkodavo, bet ir sukūrė visus iliustravimo darbus. Rezultatas yra nuostabus išskirtinis vaizdinis puotas, apimantis daugybę tapybinių vinječių su mūsų spalvinga heroje.

Iš atidaryto cukraus vatos debesėlio, kuris tiesiog burbuliuoja subtiliomis animacijomis, Vakula žvaigždės svajinguose portretuose, skirtuose parodyti charizmatišką asmenybę. Įkvėpusi ji nepastebi Paryžiaus nakties ties gargaru, kuris dvigubai prilygsta „YouTube“ grojimo mygtukui, pagavusi Niujorko metro traukinį nuo platformos, kurioje yra katės. Apsilankymai Venecijoje ir Ibizoje suteikia vienodai ekscentriškas „Instagram“ ir el. Pašto nuorodų fonas, kur net kokteilius gurkšnojantys ruoniai skatina sekti. Tai liežuvis skruostuose, bet daromas tokiu žavesiu ir technika, kad negalite nesimylėti. Net pelės žymeklis eina visos širdies formos.

„WordPress CMS“ sukurtas išskirtinis vartotojo sąsajos elementas yra įdomus skyrius, kuriame galite vilkti ir mesti drabužius ant virtualios „Vakula“, kad galėtumėte peržiūrėti tikrus modeliavimo momentus. Vykdant korteles galimoms atrankoms, ši yra labiau įsimenama poza nei dauguma.

kaip padaryti skaidrų foną klipų studijos dažuose

Autorius: Markas Billenas

03. Vidurinis vaikas

„Middle Child“ sukurtas pagal visiškai užsakytą „WordPress“ temą - spustelėkite vaizdą, kad galėtumėte naršyti svetainėje

Apdovanojimų pelniusi sumuštinių parduotuvė Filadelfijoje Vidurinis vaikas reikėjo savo keistą, nepretenzingą atmosferą atitinkančios svetainės. Visų paslaugų dizaino ir technologijų studija Suvokia save susidūrė su iššūkiu, sukurdamas svetainę, pagrįstą visiškai užsakymu „WordPress“ tema naudojant Mediena ir ACF - derinys, kurį studijos partneris Mike'as Wagzas vadina „rimtų„ WordPress “temų kūrėjų žaidimų keitikliu“.

„Self Aware“ taip pat pasinaudojo naujausiomis interneto technologijomis, kad pasiūlytų optimalią patirtį: maketas buvo sukurtas naudojant CSS tinklelis ir a Aptarnavimo darbuotojas talpina statinius išteklius, įskaitant CSS ir „JavaScript“ failus, kad pagreitintų pradinį įkėlimo laiką.

„Vidurinis vaikas skleidžia atmosferą iš kiekvieno kampelio“, - priduria Wagzas. „Tai nuoširdžiai priima klientus iš visų gyvenimo sričių su tinkamu kiekiu linksmybių, kičo ir linksmybių. Manau, kad šis dizainas yra sėkmingas, nes mes sugebėjome užfiksuoti šią dvasią ir išversti ją į internetą “.

Norėdami rasti geriausią įrankį, patikrinkite šiuos viršuje svetainių kūrėjai . Be to, žemiau rasite geriausias kainas.

Šiandien geriausi internetinių svetainių kūrėjų pasiūlymai Wix „Wix Connect“ domenas 3 svarai / mėn Vaizdas „HostGator“ „HostGator“ skirtas hostingas 119 JAV dolerių / mėn Vaizdas Squarespace Asmeninis 10 svarų / mėn Vaizdas Mes kasdien tikriname daugiau nei 130 milijonų produktų už geriausias kainas

04. Jūros derlius

ED naudojo laikraščio stiliaus maketą savo „Sea Harvest“ svetainėje, esančioje „WordPress“

Kai Kanberoje įsikūrusi jūros gėrybių rinka Jūros derlius reikėjo naujos prekės ženklo tapatybės ir išmanaus skaitmeninio buvimo, kad jis atitiktų, jis kreipėsi į Australijos interneto ir prekės ženklų agentūrą ED . „WordPress“ svetainėje pateikiamas įspūdingas laikraščio stiliaus išdėstymas, kuriame galima apžiūrėti daugybę neįprastų įspūdžių.

„Kai galvojame apie jūros gėrybes, daugelis iš mūsų prisimenami žuvies ir traškučių valgymo paplūdimyje kartu su draugais ir šeima“, - sako dizaineris Camas Tidy. 'Dažnai šie išsinešimo sąnariai suvyniojo jūsų maistą į laikraštį, todėl atrodė natūralu tai ištirti kaip vizualią idėją.'

Statiško spausdinto maketo atkartojimas žiniatinklyje vis dėlto nebuvo be iššūkių. Komanda naudojo CSS „Flexbox“, kad pakeistų turinį, išlaikydama pastovų atstumą, nepaisant ekrano dydžio. Beveik kiekvienas matavimas yra pagrįstas reaguojančia skale, naudojant REM vienetus, todėl naršyklės masteliais lengviau išlaikyti tipo ir vaizdo proporcijų kontrolę.

kaip patekti į grafinį dizainą be patirties

Kūrėjo Bryno Shanahano mėgstamiausia savybė yra tai, kad vartotojai gali „piešti“ svetainėje, taip pat ir per interaktyvus žodžių ieškojimas . „Mes tai pasiekėme padengdami svetainę HTML5„ Canvas “elementu, kuris tada buvo naudojamas vartotojo piešiniams piešti“, - aiškina jis.

ED naudoja „WordPress“ daugeliui savo svetainių projektų, todėl ji yra patogi ir intuityvi klientams. „[„ WordPress “turi] lengvą programinės įrangos kūrimą, kuris suteikia daugiau laiko sutelkti dėmesį į„ front end “, kad dizainas taptų gyvesnis“, - priduria kūrėjas Adamas Forcucci. 'Gebėjimas padarykite tai be galvos, naudodami WP Rest API , leidžia mums naudoti tokias sistemas kaip „React“, kuri tampa būsimos mūsų platformos plėtros šerdimi. “

05. Maksimas Škretas

„Tirpstančią pandą“ galima sukti į kairę ir į dešinę(Vaizdo kreditas: Maxim Shkret)

Įsikūręs iš Sankt Peterburgo, Rusijos, Maksimas Škretas yra laisvai samdomas skaitmeninis menininkas. Jo įspūdinga „WordPress“ svetainė sutraukia portfelį į el. Prekybos rinką, pradėdama naują lėšų rinkimo iniciatyvą.

Svetainė atidaryta iš keturių 3D modelių arba skaitmeninių skulptūrų, kurias galima vilkti ir pasukti 360 laipsnių kampu. Kiaulę, dykumos lapę, dvipusį vienaragį ir tirpstančią pandą galima sukti į kairę ir į dešinę, kad būtų pasiektas palankus kampas. Spustelėję mygtuką „Pirkti šį kadrą“, lankytojai gali įsigyti įvairių matmenų skaitmeninį vaizdą už įvairias kainas. Pajamos bus sugrupuotos transformuojant kiekvieną skaitmeninį modelį į tikras fizines skulptūras, naudojant 3D spausdinimo penkių ašių CNC apdirbimo procesą. Tai puiki idėja pakviesti bendradarbius ir parodo, kaip sutelktinio finansavimo metodą galima susieti su paprastai pasyvia patirtimi.

Svetainės kūrimo kreditai apima Niujorko „Sochnik“ dizaino studiją, tačiau menkos vartotojo sąsajos pastangos niekada neužgožia Shkreto talento. Tai apima paprastą „Gallery“ skiltį, kurioje pateikiami nejudančių skulptūrų kadrai, kurie banguoja ir banguoja per vandeningą filtrą. Tai subtilus efektas, tačiau sustiprina tekstūros pojūtį, kurį Shkret ketina suteikti kiekvienam kūriniui.

06. KOBU

KOBU svetainė atidaroma su banguotu lavos lempos stiliaus puslapiu

Nenuostabu, kad portfelio svetainės ir toliau teikia derlingiausią interneto dirvą kūrybinei išraiškai ir įkvėpimui. Ši internetinė Portugalijos agentūros telefono kortelė KOBU seka tą etosą su skoningu, santūriu „WordPress“ tinklalapiu, kuris vis dar burbuliuoja charakteriu. Vadindamas save „prekės ženklo laboratorija“, nebijančia eksperimentų, čia atliktas techninis darbas parodo vaizduotę, o ne sudėtingumą.

Per daugybę elementų mes primename, kaip CSS ir SVG galima sujungti, kad būtų maksimalus frontendo simbolis. Absoliutus padėties nustatymas naudojamas žaviems vielinių rėmų motyvams perdengti, nutraukiant linijas tarp drąsių fono spalvų blokų ir sujungiant sekcijas. Sujungtas HTML5 vaizdo skydelis gauna unikalų banguotą kraštą, naudodamas SVG formą kaip aukščiau išdėstytą kaukę, prieš atvejo tyrimo vaizdų kraštinės spindulys sumažėja perpus, kad būtų apskritas. Svetainėje tvarkingai naudojama „slick.js“ karuselės biblioteka, kad per pagrindinio puslapio vidurį „trauktų“ KOBU komanda su biuro arkliu.

Vis dėlto zenitas tikriausiai yra tas, kurį mes matome pirmiausia, atsiveriantį ant banguojančios lavos lempos stiliaus antraštės, pagamintos manipuliuojant SVG keliais. Naudojant anime.js įskiepį, daugiavalentį „JavaScript“ animacijos variklį, tai yra akį traukiantis triukas nustatant spalvų paletę, jei ne kas kita.

Autorius: Markas Billenas

07. forma

„noformat“ tinklapis turi daug tiesioginio poveikio

forma yra strateginio dizaino studija, įsikūrusi Niujorke. Pagrindiniame puslapyje yra animuotas akies obuolio dizainas, kuris seka lankytojo žymeklį aplink ekraną, o uždengtas teksto ciklas per visus dalykus, kuriuos gali sukurti neformatas. Norėdami sukurti akies obuolį, komanda pirmiausia ištyrė dizainą „After Effects CC“ , prieš naudodamas „three.js“ interaktyviai versijai kurti, paaiškina „noformat“ įkūrėjas ir kūrybos direktorius Ianas Breweris.

'Mes naudojome viršūnių ir fragmentų šešėlius, kad galėtume optimizuoti GPU atvaizdavimą, ir privertėme jį pulsuoti ir mirksėti viduje esančio formato logotipą', - tęsia Breweris. 'Tada mes pritaikėme po apdorojimo efektus, kad suteiktume jai labiau organišką ir mažiau 3D išvaizdą, neryškindami kraštus ir pridedant žiedus prie ryškiausių vietų'.

Likusi svetainė atitinka šio pirmojo puslapio poveikį, nes slidūs perėjimai per slinktį ir subtilūs paralaksiniai efektai demonstruoja techninius įgūdžius, nepaveikdami jų naudojimo.

„Mes pasirinkome„ WordPress “savo svetainei, kad būtų galima paleisti, ir lankstumą“, - aiškina Breweris. 'Per daugelį metų mes sukūrėme savo bibliotekas ir modulis pagrįstas redagavimo sistemas, kurios leidžia mums sukurti ar redaguoti svetainę greičiau nei bet kuris kitas TVS sprendimas.'

kaip priprasti prie piešimo planšetės

08. Moteris ir nuožmi

Olandijos patirties dizaino studija Stebuklų šalis pristatė elektroninę prekybą su „sass“ Moteris ir nuožmi . „WordPress“ svetainėje esanti, susidūrimo taktika atspindinti spalvų schema pateikia internetinio mados mažmenininko prekės ženklo pranešimą. Animuoti „lipdukai“ - sukiojami ledinukai, strėlios rodyklėmis, lūpų laižymas - sukuria įžūlų jausmą ir turėtų atsiliepti „Snapchat“ / „Instagram“ kartai, kuriai skirtas šis asortimentas.

09. Puree Maison

Animuoti užrašai atgaivina šią „WordPress“ svetainę

Bulvių košė yra kūrybinė ir strateginė studija, įsikūrusi Paryžiuje. Jo „WordPress“ svetainė labiausiai išsiskiria saulėtais geltonais animuotais raštais, kurie pasirodo ant pakimšimo, įkvepia asmenybės nuobodžiuose prekės ženklo pareiškimuose ir pagyvina perėjimus. Jie taip pat padeda lankytojui orientuotis ir skatina tyrinėti bei bendrauti su svetaine.

10. Mes praktiškai esame

„Mes beveik esame“ svetainėje, norėdami parduoti savo paslaugas, puikiai naudojate 360 ​​laipsnių vaizdo įrašus

Kai jūsų verslas susijęs su žmonių, naudojančių virtualią realybę emocingoms istorijoms pasakoti, įtraukimu, jums reikia svetainės, įtraukiančios žmones į jūsų darbą. Ir boutique VR studija Mes praktiškai esame pavyko tai ir tada kai kuriems. Jos svetainė, pastatyta Herdl „WordPress“ naudoja daugybę pažangiausių metodų, įskaitant „WebGL“ ir 360 laipsnių vaizdo įrašus, kad suteiktų nenugalimą savo įtraukiančių paslaugų skonį. Peržiūrėkite „Audi“ VR bandomuosius važiavimus kartu su netiktais įžymybių svečiais.

11. Asaro

„Asaro“ svetainė yra pakankamai jautri, kad atrodytų gražiai visų dydžių ekranuose

„Asaro“ siūlo unikalių nuotykių įspūdžių ir linksmų kelionių superychtų svečiams visame pasaulyje. Šią slidžią svetainę sukūrė platesnio verslo ženklo dalis ir sukūrė Bristolio agentūra Žaliasis chameleonas .

Sukurtas pagal pasirinktinę „WordPress“ sistemą, kad klientas galėtų lengvai redaguoti turinį, lankytojai patraukia žavesio kupina atradimų kelione. Subtilūs slinkties efektai yra tinkamai susieti su interaktyvia punktyrine linija, nubrėždami navigacijos pažangą, kaip jachtos kapitonas gali pažymėti diagramas. Pasirinktiniai CGI atvaizdai buvo naudojami kaip grafinis įtaisas vaizdavimui Asaro Išskirtinės paslaugos, atsižvelgiant į fotografijos trūkumą dėl privataus renginių pobūdžio.

„Meno kryptį įkvėpė vandens lašų fotografavimo ir teatro plakato dizaino mišinys“, - aiškina kūrybos direktorius Tomas Andersonas. „Mums patiko fotografavimo stiliaus estetika ir manėme, kad jis puikiai susiejamas su pagrindine projekto jūrine tema.“

Pakankamai reaguojantis, kad ne tik atrodytų gražiai nuosekliai mažesniuose ekranuose, prieigos greitis taip pat buvo motyvacija efektyvinti efektyvumą. Kadangi valčių gyventojai jaučiasi jūrinio interneto ryšio malonėje, įkrovimo laikas yra didesnis nei stalviršio, planšetinio kompiuterio ir mobiliojo ryšio.

Autorius: Markas Billenas

12. Dizaino muziejus Danijoje

Protingai naudojant paralaksinį slinkimą ir reaguojančius vaizdus, ​​Danijos dizaino muziejaus svetainę būtina pamatyti

Pastatyta Kopenhagoje įsikūrusios dizaino ir prekės ženklo agentūros Kvailos studijos , svetainė, skirta Danijai Dizaino muziejus ne tik demonstruoja muziejaus archyvus, kolekcijas ir tyrimus, bet ir pateikia juos moderniu stiliumi. Nuo atidarymo muziejaus logotipo SVG animacijos iki akį traukiančios paralaksinis slinkimas ir nuotaiką gerinanti paletė keičiasi, kai slenkate turinį, tai puikus internetas, esantis pagrindiniam dizaino tikslui.

13. Katy Perry

Net pagrindinės įžymybės naudoja „Wordpress“ teikiamas priemones

Popmuzikos princesė Katy Perry savo oficialiai svetainei laikyti naudoja ne ką kitą, o „WordPress“. Daugiausia dėmesio skiriant vaizdams ir socialinės žiniasklaidos ženklams, svetainė naudojasi aukšto lygio menininko kadrais, kad pareikštų drąsiai. Slinkite žemyn, norėdami pamatyti turo datas, prekes ir kita, arba naudokite piktogramas, kad sužinotumėte daugiau.

Tai švarios, tačiau nervingos svetainės, kurioje pavyksta sujungti menininko asmeninį burbulų pūslinį asmeninį įvaizdį su patogiu, blizgiu mago stiliaus funkcionalumu. Praėjo užimtų grupių svetainių laikai, kuriuose pilna per daug animacijos ir muzikos, kurių negalima sustabdyti. Perry svetainė įrodo, kad galite supakuoti daug asmenybės naudodami paprastą baltą foną ir lengvai valdomas nuorodas, suteikdami gerbėjams galimybę klausytis, žiūrėti ir mokytis lengvai ir patogiu laiku.

14. Rašalo bakas

„Kao Collins“ svetainė sukurta tam, kad galvotumėte apie rašalą

Nuo 1989 m. Kaip „Collins Inkjet“, vieno žmogaus operacija, tiekianti rašalą nuolatiniam „Kodak“ rašaliniam spausdintuvui, šiandien Kao Collinsas yra vienas iš pirmaujančių pasaulio tiekėjų. Ir jei jūs niekada negalvojote apie rašalą (be keiksmų, kai baigsis spausdintuvas), Kao Collinso svetainė „Ink Tank“ ketina tai pakeisti.

Pastatė „DBS Interactive“ , Rašalo bakas yra akį traukianti „WordPress“ svetainė, kuri išnaudoja visas stoteles, kad pateiktų jums pažangiausias rašalo pramonės naujienas ir pademonstruotų keletą kūrybinių būdų, kuriais įmonės ir menininkai šiuo metu naudoja rašalą. Svarbiausias dalykas, kiek mums rūpi, yra skyrius „Spausdinimo istorija“: puikus paralaksinis vieno gaviklio su animacija ir efektais, nukreipiantis jus nuo molio lentelių iki šiandieninio greito vieno leidimo spausdinimo, ir žvilgsnis į priekį kai kurias būsimas spausdinimo galimybes.

kokie yra „Google“ skaidrių matmenys
(Vaizdo kreditas: ateitis)

Skaityti daugiau: