deze geweldige WordPress websites laten het beste van deze populaire CMS zien. Toen het voor het eerst gelanceerd in 2003, WordPress werd beschouwd als een eenvoudige blogging tool voor amateurs. Al snel ging het van start en werd het een volwaardig CMS dat nu miljoenen sites over de hele wereld aanstuurt. En creatieve professionals zijn het duwen van de CMS ‘ grenzen om complexe en mooie WordPress websites sindsdien te creëren.
om u precies te laten zien wat dit ongelooflijke CMS kan doen, hebben we een aantal van de beste WordPress websites rond., Als dit artikel inspireert u om uw eigen WordPress website te bouwen, zullen deze WordPress tutorials u helpen om te beginnen, of als u wilt een geweldig uitziende portfolio te bouwen, Bekijk onze gids voor de beste WordPress portfolio thema ‘ s.
de beste webhosting diensten in 2019
Rafal Bojar
deze fotografie portfolio gebruikt WordPress naast Vue.js (Image credit: Rafal Bojar)
ontwerper Zhenya Rynzhuk gebruikte WordPress als een semi-headless CMS, met Vue.,js voor de front-end, om deze boeiende fotografie portfolio site voor Rafal Bojar te creëren. Het beschikt over een homepage die previews van geselecteerde verhalen weergeeft, een glad raster om al Bojar ’s werk te presenteren, en een’ essence ‘ pagina waarin de filosofie en aanpak van de fotograaf wordt uitgelegd.
“Het doel was om bezoekers te voorzien van de unieke ervaring en de presentatie van Rafal’ s verbazingwekkende werken,” zegt Rynzhuk. Het paar besproken een paar verschillende backend opties, maar besloten op WordPress, zodat de site gemakkelijk te beheren en regelmatig te updaten met nieuwe projecten zou zijn.
naast WordPress en Vue.,js, de site maakt gebruik van een S3 emmer om gegevens op te slaan, die wordt geleverd via Cloudfront om snelle laadtijden te garanderen. Rynzhuk maakte ook gebruik van Bedrock en Hendrik-Jan de Harders HOG skelet, evenals GSAP voor de animaties.,
Adel Vakula
Dit model is de site vol met mooie, campy humor (Image credit: Adel Vakula)
Adel Vakula is een internationaal bekende model uit de Oekraïne, en deze promotie site voor haar in de gedaante van landgenoten Yabloko ideeën studio, die niet alleen ontworpen en gecodeerd, maar de illustratie werk. Het resultaat is een prachtig onderscheidend visueel feest, verspreid over een aantal schilderachtige vignetten met onze glamoureuze heldin., vanaf de opening cotton candy cloudscape die letterlijk bruist van subtiele animaties, sterren Vakula in dromerige portretten ontworpen om een charismatische persoonlijkheid te demonstreren. Ze kijkt grillig uit over de Parijse nacht bovenop een waterspuwer die verdubbelt als een YouTube-afspeelknop, nadat ze een New Yorkse metro vanaf een perron met busking cat heeft gepakt. Bezoeken aan Venetië en Ibiza bieden even excentrieke achtergronden voor Instagram en e-mail links, waar zelfs cocktail nippen zeehonden een follow., Het is tong in Wang spul, maar gedaan met zo ‘ n charme en techniek dat je niet kunt helpen, maar verliefd worden. Zelfs de muisaanwijzer gaat helemaal hartvormig.
gebouwd op WordPress CMS, een opvallende UI element is een leuke sectie waar u kunt slepen en neerzetten outfits op een virtuele Vakula om echte modellering snaps te bekijken. Als visitekaartjes voor mogelijke gietstukken gaan, deze slaat een meer memorabele pose dan de meeste.,
auteur: Mark Billen
middelste kind
middelste kind is gebouwd op een volledig op maat gemaakt WordPress thema – klik op de afbeelding om de site te verkennen
prijswinnend, Philadelphia-based sandwich shop middle child had een website nodig die paste bij zijn eigenzinnige, pretentieloze vibe., Full-service design en technologie studio zelfbewust steeg naar de uitdaging, het creëren van een site op basis van een volledig op maat WordPress thema met behulp van hout en ACF – een combinatie die studio partner Mike Wagz noemt “een game-changer voor serieuze WordPress thema ontwikkelaars”.
Self Aware maakte ook gebruik van de nieuwste webtechnologieën om een optimale ervaring te bieden: de lay-out werd gemaakt met behulp van CSS-raster, en een servicemedewerker caches statische activa, waaronder CSS en JavaScript-bestanden om de eerste laadtijden te versnellen.,
“middelste kind straalt sfeer uit elk hoekje en gaatje,” voegt Wagz toe. “Het verwelkomt klanten uit alle lagen van de bevolking met precies de juiste hoeveelheid plezier, kitsch, en eigenzinnigheid. Ik denk dat dit ontwerp succesvol is omdat we in staat waren om deze geest vast te leggen en te vertalen naar het web.,”
Sea Harvest
ED gebruikte een lay-out in krantenstijl op zijn WordPress-gebaseerde website voor Sea Harvest
toen de op Canberra gebaseerde seafood market Sea Harvest een nieuwe merkidentiteit en slimme digitale aanwezigheid nodig had om match, het draaide zich om Australische web en branding agentschap ed. De WordPress website sport een opvallende krant-stijl lay-out met veel eigenzinnige accenten te verkennen.,
” als we aan zeevruchten denken, worden velen van ons teruggevoerd naar een herinnering aan het eten van Fish and chips op het strand met vrienden en familie,” zegt designer Cam Tidy. “Vaak deze afhaalrestaurants zou wikkelen uw voedsel in de krant, dus het voelde natuurlijk om te verkennen dat als een visueel idee.”
het repliceren van een statische, afdruklay-out op het web was echter niet zonder uitdagingen. Het team gebruikte CSS Flexbox om content te herpositioneren met behoud van consistente spatiëring, ongeacht de schermgrootte., Bijna elke meting is gebaseerd op een responsieve schaal met behulp van REM-eenheden, waardoor het gemakkelijker is om de controle over het type en de afbeeldingsverhoudingen te behouden naarmate de browser schaalt.
Ontwikkelaar Bryn Shanahan ‘ s favoriete functie is het feit dat gebruikers kunnen ‘tekenen’ op de site, inclusief via een interactief woordzoekprogramma. “Dat hebben we bereikt door de site te bedekken met een HTML5 Canvas element, dat vervolgens werd gebruikt om de tekeningen van de gebruiker op te tekenen,” legt hij uit.
ED gebruikt WordPress voor veel van haar websiteprojecten en vindt het gebruiksvriendelijk en intuïtief voor klanten., “eenvoudige back-end ontwikkeling, waardoor meer tijd om zich te concentreren op front-end om het ontwerp tot leven te brengen,” voegt Ontwikkelaar Adam Forcucci. “De mogelijkheid om het headless te maken, met behulp van de wp Rest API, stelt ons in staat om frameworks zoals React te gebruiken, die de kern wordt van onze toekomstige ontwikkeling op het platform.”
Maxim Shkret
‘smeltende Panda’ kan links en rechts worden gesponnen (beeld: Maxim Shkret)
gebaseerd uit Sint-Petersburg, Rusland, Maxim shkret is een freelance digitale kunstenaar., Zijn indrukwekkende WordPress website trouwt portfolio om e-commerce marktplaats, de lancering van een nieuwe fondsenwerving initiatief.
de site opent op een reeks van vier 3D-modellen, of digitale sculpturen die 360 graden kunnen worden gesleept en geroteerd. Varken, woestijnvos, Dubbelmoedige Eenhoorn en smeltende Panda kunnen links en rechts worden gesponnen om een voorkeurshoek te bereiken. Door op de knop ‘Koop dit shot’ te klikken, kunnen bezoekers een digitaal beeld kopen tegen verschillende afmetingen voor verschillende prijzen., De opbrengst zal worden gebundeld in het transformeren van elk digitaal model in echte fysieke sculpturen met behulp van een 3D-printing vijf-assig CNC-bewerkingsproces. Het is een leuk idee voor het uitnodigen van medewerkers en laat zien hoe een crowdfunding aanpak kan worden gekoppeld aan een typisch passieve ervaring.
Site productie credits omvatten New Yorks Sochnik Design Studio, maar de gelikte UI inspanningen nooit overschaduwen shkret ‘ s talent. Dit omvat een eenvoudige galerij sectie van stilstaande sculptuur opnamen die rimpelen en zwaaien door een waterige filter., Het is een subtiel effect, maar verhoogt het gevoel van textuur Shkret wil elk stuk te geven.
KOBU
de website voor KOBU opent met een golvende lavalamp-stijl homepage
Portfolio sites, zoals te verwachten, blijven enkele van de meest vruchtbare websites van het web bieden grond voor creatieve expressie en inspiratie. Deze online visitekaartje voor Portugese agentschap KOBU volgt dat ethos met een smaakvolle, ingetogen WordPress website die nog steeds bubbels met karakter., Zichzelf een ‘merklaboratorium’ noemen dat niet bang is voor experimenteren, het technische werk toont hier verbeelding boven complexiteit.
Over een reeks elementen krijgen we een herinnering hoe CSS en SVG gecombineerd kunnen worden voor een maximaal frontend karakter. Absolute positionering wordt gebruikt om charmante wireframe-motieven te overlayen, de lijnen tussen bolde achtergrondkleurblokken te breken en secties aan elkaar te koppelen. Een lus HTML5 videopaneel krijgt een unieke wiggly rand met behulp van een SVG-vorm als een masker geplaatst boven, voordat case study beelden hebben hun randradius gehalveerd om rond te gaan., De site maakt netjes gebruik van de slick.js carrousel bibliotheek ‘draf’ het Kobu team, met office horse, door het midden van de hoofdpagina.
het zenit is waarschijnlijk het eerste deel dat we zien, openend op een golvende lavalamp-stijl header geproduceerd door het manipuleren van SVG paden. Gebruik maken van de anime.js plugin, een polyvalente JavaScript animatie-engine, het is een opvallende truc voor het vaststellen van kleurenpalet, als er niets anders.,
auteur: Mark Billen
noformat
noformat ’s homepage has plenty of immediate impact
noformat is een strategische ontwerpstudio gevestigd in New York. De homepage is voorzien van een geanimeerde eyeball ontwerp dat de cursor van de bezoeker rond het scherm volgt, terwijl overlay tekst cycli door alle dingen noformat kan maken. Om de oogbol te creëren, onderzocht het team eerst het ontwerp in After Effects CC, alvorens drie te gebruiken.,js om een interactieve versie te bouwen, legt Ian Brewer, oprichter en creatief directeur van noformat, uit.
” We gebruikten vertex en fragment shaders om te optimaliseren voor GPU rendering en lieten het pulseren en het noformat logo binnenin flitsen, ” vervolgt Brewer. “Vervolgens hebben we post-processing effecten toegepast om het een meer organische en minder 3D-look te geven door de randen te vervagen en bloei toe te voegen aan de highlights.”
de rest van de site voldoet aan de impact van die eerste pagina, met gladde on-scroll overgangen en subtiele parallax effecten pronken met technische vaardigheden zonder invloed op de bruikbaarheid.,
“We kozen WordPress voor onze site voor snelheid om te starten, en flexibiliteit,” legt Brewer uit. “In de loop der jaren hebben we onze eigen bibliotheken en op modules gebaseerde bewerkingssystemen gebouwd waarmee we een site sneller kunnen maken of bewerken dan welke andere CMS-oplossing dan ook.”
Femme en Fierce
Dutch experience design studio Wonderland heeft e-commerce geleverd met sass voor Femme en Fierce. De WordPress website ‘ s in-your-face, clash-tastic kleurenschema levert de online fashion retailer merk boodschap van de off., Geanimeerde ‘stickers’ – twirling lolly ‘ s, jabben pijlen, likken lippen-creëren een brutale gevoel en moet resoneren met de Snapchat/Instagram generatie waarop dit bereik is gericht.
Puree Maison
geanimeerde scribbles brengen deze WordPress website tot leven
Purée Maison is een creatieve en strategische studio gevestigd in Parijs. De WordPress website onderscheidt zich vooral dankzij de zonnige gele geanimeerde krabbels die verschijnen op hover, injecteren persoonlijkheid in saaie merkverklaringen en verlevendigen overgangen., Ze helpen de bezoeker ook zijn weg te vinden, en moedigen hen aan om de site te verkennen en te communiceren.
we Virtual Are
we Virtual Are ‘ s site maakt veel gebruik van 360-graden video om zijn diensten te verkopen
wanneer uw bedrijf draait om het boeiend maken van mensen die virtual reality gebruiken om emotionele verhalen te vertellen, je hebt een site nodig die mensen in je werk trekt. En boutique VR studio we virtueel zijn is erin geslaagd dat en nog wat., De site, gebouwd door Herdl op WordPress, maakt gebruik van tal van cutting-edge technieken, waaronder WebGL en 360-graden video om u een onweerstaanbare smaak van de meeslepende diensten. Bekijk de VR-proefritten voor Audi, compleet met onverwachte gasten van beroemdheden.
Asaro
Asaro ‘ s site is responsief genoeg om er mooi uit te zien op alle schermformaten
Asaro is een aanbieder van unieke avontuurlijke ervaringen en leuke reizen voor superjachtgasten over de hele wereld., Als onderdeel van een bredere corporate rebrand, deze slick website is ontworpen en ontwikkeld door Bristol-gebaseerde agentschap Green Chameleon.
gebouwd op een aangepast WordPress framework om het bewerken van content eenvoudig te houden voor de klant, worden bezoekers meegenomen op een ontdekkingsreis vol charme. Subtiele scroll effecten zijn netjes gekoppeld aan een interactieve stippellijn, plotten navigatie vooruitgang in de manier waarop een jacht kapitein kaarten zou kunnen markeren., Aangepaste CGI-renders zijn gebruikt als een grafisch apparaat voor het weergeven van het exclusieve serviceaanbod van Asaro, in het licht van een schaarste aan fotografische activa als gevolg van het privé-karakter van de evenementen. “the art direction was inspired by a mix of water drop photography and theatral poster design,” legt creative director Tom Anderson uit. “We hielden van de esthetiek van de fotografie-stijl en vonden dat het mooi aansluit bij het onderliggende nautische thema van het project.,”
responsief genoeg om er niet alleen prachtig consistent uit te zien op kleinere schermen, toegangssnelheid was ook een motivatie voor het stroomlijnen van prestaties. Met bootbewoners overgeleverd aan de genade van maritieme webconnectiviteit, zijn laadtijden meer chiller dan schokkerig op desktop, tablet en mobiel.,
Auteur: Mark Billen
Design Museum Denemarken
Slim gebruik van parallax scrolling en responsieve beelden maken het deense Design Museum site, een must-see
Gebouwd door Kopenhagen-based design en branding agency Dom Studio ‘ s, de site voor de deense Design Museum niet alleen vitrines van het museum archieven, collecties en onderzoek, maar ook presenteert het in een klap up-to-date stijl., Vanaf de opening SVG animatie van het logo van het museum, tot het opvallende parallax scrollen en sfeerversterkende palet swaps terwijl je door de inhoud scrolt, het is de perfecte online aanwezigheid voor een essentiële design bestemming.
zelfs grote beroemdheden maken gebruik van de tools van WordPress
Pop princess Katy Perry gebruikt niemand minder dan WordPress om haar officiële website te hosten., De site richt zich – begrijpelijkerwijs – op visuals en social media signalen en maakt gebruik van foto ‘ s van de artiest met een hoog spec-portfolio om een gewaagd statement te maken. Scroll naar beneden om tourdata, merch en meer te zien, of gebruik de pictogrammen om meer te ontdekken.
het is een strakke maar edgy site die erin slaagt om de kenmerkende bubblegum pop persoonlijke afbeelding van de artiest te mengen met een gebruiksvriendelijke, glossy mag-stijl functionaliteit. Voorbij zijn de dagen van drukke band sites vol met te veel animatie en muziek die je niet kunt stoppen., Perry ‘ s website bewijst dat je kunt inpakken in overvloed van persoonlijkheid met behulp van slechts een eenvoudige witte achtergrond en gemakkelijk bevaarbare links, waardoor fans de mogelijkheid om te luisteren, kijken en leren gemakkelijk en op hun gemak.
The Ink Tank
Kao Collins’ site is ontworpen om u na te laten denken over inkt
beginnend in 1989 als Collins Inkjet, een eenmansoperatie die inkt levert voor Kodak ’s continuous inkjetprinter, vandaag Kao Collins is een van’ s werelds toonaangevende leveranciers., En als je nog nooit echt hebt nagedacht over inkt (meer dan vloeken als je printer opraakt), Kao Collins’ site, de inkt Tank, staat op het punt om dat te veranderen.
gebouwd door DBS Interactive, De Ink Tank is een opvallende WordPress site die trekt alles uit om u cutting-edge nieuws uit de inktindustrie en showcase enkele van de creatieve manieren waarop bedrijven en kunstenaars momenteel inkt gebruiken., Het hoogtepunt, wat ons betreft, is de sectie Geschiedenis van het afdrukken: een prachtige parallax single-pager boordevol animatie en effecten, die u helemaal van kleitabletten naar de huidige high-speed single pass afdrukken, en vooruit te kijken naar een aantal van de toekomstige mogelijkheden van het afdrukken.,
(Image credit: Future)
14 eenvoudige manieren om uw website toegankelijker te maken
