Ces sites WordPress étonnants présentent le meilleur de ce CMS populaire. Lors de son lancement en 2003, WordPress était considéré comme un outil de blogging de base pour les amateurs. Très rapidement, il a décollé, devenant un CMS à part entière qui alimente désormais des millions de sites à travers le monde. Et les professionnels de la création ont repoussé les limites du CMS pour créer des sites Web WordPress complexes et magnifiques depuis.
Pour vous montrer exactement ce que cet incroyable CMS peut faire, nous avons sélectionné certains des meilleurs sites WordPress., Si cet article vous inspire à construire votre propre site WordPress, ces tutoriels WordPress vous aideront à démarrer, ou si vous voulez construire un portefeuille impressionnant, consultez notre guide des meilleurs thèmes de portefeuille WordPress.
- Les meilleurs services d’hébergement web en 2019
Rafal Bojar
Le concepteur Zhenya Rynzhuk a utilisé WordPress comme un CMS semi-sans tête, avec Vue.,js pour le front end, pour créer ce site de portfolio de photographie engageant pour Rafal Bojar. Il dispose d’une page d’accueil qui affiche des aperçus d’histoires sélectionnées, une grille lisse pour présenter tout le travail de Bojar, et une page « essence » expliquant la philosophie et l’approche du photographe.
« L’objectif était de fournir aux visiteurs une expérience unique et de mettre en valeur les œuvres étonnantes de Rafal », explique Rynzhuk. La paire a discuté de quelques options de backend différentes, mais a décidé de WordPress afin que le site soit facile à gérer et à mettre à jour régulièrement avec de nouveaux projets.
Aux côtés de WordPress et Vue.,js, le site utilise un compartiment S3 pour stocker les données, qui sont livrées via Cloudfront pour assurer des temps de chargement rapides. Rynzhuk a également utilisé Bedrock et Vue skeleton de Hendrik-Jan de Harder, ainsi que GSAP pour les animations.,
Adel Vakula
Adel Vakula est un modèle de renommée internationale de l’Ukraine, et ce site promotionnel pour elle arrive de compatriotes Yabloko ideas studio, qui non seulement conçu et codé, mais a créé tout le travail d’illustration. Le résultat est un festin visuel magnifiquement distinctif, couvrant un certain nombre de vignettes picturales mettant en vedette notre héroïne glamour.,
À partir du paysage nuageux d’ouverture de barbe à papa qui bouillonne littéralement avec des animations subtiles, Vakula joue dans des portraits de rêve conçus pour démontrer une personnalité charismatique. Elle surplombe de façon fantaisiste la nuit parisienne au sommet d « une gargouille doublant comme un bouton de lecture YouTube, après avoir attrapé une rame de métro de New York à partir d » une plate-forme complète avec chat busking. Les visites à Venise et Ibiza fournissent des décors tout aussi excentriques aux liens Instagram et Email, où même les phoques sirotant un cocktail encouragent un suivi., C’est un truc de langue dans la joue, mais fait avec un tel charme et une telle technique que vous ne pouvez pas vous empêcher de tomber amoureux. Même le pointeur de la souris va tout en forme de coeur.
Construit sur WordPress CMS, un élément d’interface utilisateur hors concours est une section amusante où vous pouvez faire glisser et déposer des tenues sur un Vakula virtuel pour afficher de vrais clichés de modélisation. Comme les cartes de visite pour les castings possibles vont, celui-ci frappe une pose plus mémorable que la plupart.,
Auteur: Mark Billen
Middle Child
Primé, sandwich shop basée à Philadelphie Middle Child avait besoin d’un site Web qui correspondait à son ambiance originale et sans prétention., Conception et technologie à service complet studio Self Aware a relevé le défi, créant un site basé sur un thème WordPress entièrement sur mesure en utilisant Timber et ACF – une combinaison que le partenaire de studio Mike Wagz appelle « un changeur de jeu pour les développeurs de thèmes WordPress sérieux ».
Self Aware a également utilisé les dernières technologies web afin d’offrir une expérience optimale: la mise en page a été créée à l’aide de la grille CSS, et un Service Worker met en cache des actifs statiques, y compris les fichiers CSS et JavaScript, afin d’accélérer les temps de chargement initiaux.,
« Middle Child suinte l’atmosphère de tous les coins et recoins », ajoute Wagz. « Il accueille chaleureusement les clients de tous les horizons avec juste la bonne quantité de plaisir, kitsch, et bizarrerie. Je pense que cette conception est réussie parce que nous avons pu capturer cet esprit et le traduire sur le web., »
Sea Harvest
Lorsque le marché de fruits de mer de Canberra Sea Harvest avait besoin identité et présence numérique intelligente pour correspondre, il s’est tourné vers l’agence web et de marque australienne ED. Le site WordPress arbore une mise en page frappante de style journal avec beaucoup de touches originales à explorer.,
« Quand nous pensons aux fruits de mer, beaucoup d’entre nous sont ramenés à un souvenir de manger du fish and chips sur la plage avec des amis et de la famille », explique le designer Cam Tidy. « Souvent, ces joints à emporter enveloppaient votre nourriture dans du journal, il était donc naturel d’explorer cela comme une idée visuelle. »
Reproduire une mise en page statique et imprimée sur le Web n’était pas sans défis, cependant. L’équipe a utilisé CSS Flexbox pour repositionner le contenu tout en maintenant un espacement constant, quelle que soit la taille de l’écran., Presque toutes les mesures sont basées sur une échelle réactive utilisant des unités REM, ce qui facilite le contrôle du type et des proportions d’image à mesure que le navigateur évolue.
La caractéristique préférée du développeur Bryn Shanahan est le fait que les utilisateurs peuvent « dessiner » sur le site, y compris via une recherche de mots interactive. « Nous y sommes parvenus en recouvrant le site d’un élément Canvas HTML5, qui a ensuite été utilisé pour dessiner les dessins de l’utilisateur », explique-t-il.
ED utilise WordPress pour beaucoup de ses projets de site Web, le trouvant convivial et intuitif pour les clients., « développement back-end facile, ce qui laisse plus de temps pour se concentrer sur le front-end pour donner vie au design », ajoute le développeur Adam Forcucci. « La possibilité de le rendre sans tête, en utilisant l’API WP Rest, nous permet d’utiliser des frameworks tels que React, qui devient le cœur de notre développement futur sur la plate-forme. »
Maxim Shkret
Basé à Saint-Pétersbourg, en Russie, Maxim Shkret est un artiste numérique indépendant., Son impressionnant site WordPress marie portfolio à ecommerce marketplace, lançant une nouvelle initiative de collecte de fonds.
Le site s’ouvre sur une série de quatre modèles 3D, ou sculptures numériques pouvant être glissées et pivotées à 360 degrés. Le cochon, le Renard du Désert, la Licorne Double nature et le Panda fondant peuvent être filés à gauche et à droite pour obtenir un angle privilégié. En cliquant sur le bouton « Acheter cette photo », les visiteurs peuvent acheter une image numérique de différentes dimensions pour différents prix., Le produit sera reversé dans la transformation de chaque modèle numérique en véritables sculptures physiques à l’aide d’un processus d’usinage CNC à cinq axes d’impression 3D. C’est une bonne idée pour inviter des contributeurs et montre comment une approche de crowdfunding peut être attachée à une expérience typiquement passive.
Les crédits de production du site incluent le studio de design Sochnik de New York, mais les efforts d’interface utilisateur lisses n’éclipsent jamais le talent de Shkret. Cela comprend une section de galerie simple de photos de sculptures immobiles qui ondulent et ondulent à travers un filtre aqueux., C’est un effet subtil, mais renforce le sens de la texture que Shkret a l’intention de donner à chaque pièce.
KOBU
Les sites de portfolio, sans surprise, continuent de fournir certains des sites les plus fertiles du web terrain d’expression créative et d’inspiration. Cette carte de visite en ligne pour l’agence portugaise KOBU suit cette philosophie avec un site WordPress de bon goût et sobre qui bouillonne toujours de caractère., Se qualifiant de « laboratoire de marque » qui n’a pas peur de l’expérimentation, le travail technique fait ici preuve d’imagination au-dessus de la complexité.
Sur une série d’éléments, nous obtenons un rappel de la façon dont CSS et SVG peuvent être combinés pour un caractère frontend maximum. Le positionnement absolu est utilisé pour superposer de charmants motifs filaires, brisant les lignes entre les blocs de couleur de fond gras et reliant les sections entre elles. Un panneau vidéo HTML5 en boucle obtient un bord ondulé unique en utilisant une forme SVG comme masque positionné au-dessus, avant que les images d’étude de cas aient leur rayon de bordure réduit de moitié pour devenir circulaires., Le site fait un usage soigné de la nappe.js carousel library pour « trotter » l’équipe KOBU, avec office horse, au milieu de la page principale.
Le zenith, cependant, est probablement le bit que nous voyons en premier, s’ouvrant sur un en-tête ondulé de style lampe à lave produit en manipulant des chemins SVG. Utilisation de l’anime.js plugin, un moteur d’animation JavaScript polyvalent, c’est une astuce accrocheuse pour établir une palette de couleurs, si rien d’autre.,
Auteur: Mark Billen
noformat
noformat stratégique le studio de design basée à New York. La page d’accueil présente un design de globe oculaire animé qui suit le curseur du visiteur autour de l’écran, tandis que le texte superposé parcourt toutes les choses que noformat peut créer. Pour créer le globe oculaire, l’équipe a d’abord exploré le design dans After Effects CC, avant d’en utiliser trois.,js pour construire une version interactive, explique Ian Brewer, fondateur et directeur créatif de noformat.
« Nous avons utilisé des vertex et des fragments shaders pour optimiser le rendu GPU et l’avons fait vibrer et flasher le logo noformat à l’intérieur », poursuit Brewer. « Nous avons ensuite appliqué des effets de post-traitement pour lui donner un aspect plus organique et moins 3D en floutant les bords et en ajoutant de la floraison aux reflets. »
Le reste du site est à la hauteur de l’impact de cette première page, avec des transitions lisses sur le défilement et des effets de parallaxe subtils montrant des compétences techniques sans impact sur la convivialité.,
« Nous avons choisi WordPress pour notre site pour la rapidité de lancement et la flexibilité », explique Brewer. « Au fil des ans, nous avons construit nos propres bibliothèques et systèmes d’édition basés sur des modules qui nous permettent de créer ou de modifier un site plus rapidement que toute autre solution CMS. »
Femme et Fierce
Le studio de design néerlandais Wonderland a livré du commerce électronique avec sass pour Femme et Fierce. La palette de couleurs clash-tastic du site Web WordPress offre le message de marque du détaillant de mode en ligne depuis le large., Des « stickers » animés – sucettes tournoyantes, flèches lancinantes, lèvres léchées-créent une sensation effrontée et devraient résonner avec la génération Snapchat/Instagram à laquelle cette gamme est destinée.
Purée Maison
Purée Maison est un studio créatif et stratégique basé à Paris. Son site WordPress se démarque principalement grâce aux gribouillis animés jaunes ensoleillés qui apparaissent en vol stationnaire, injectent de la personnalité dans les déclarations de marque ennuyeuses et animent les transitions., Ils aident également le visiteur à trouver son chemin et l’encouragent à explorer et à interagir avec le site.
Nous sommes Virtuellement
Lorsque votre entreprise consiste à captiver les réalité virtuelle pour raconter des histoires émotives, vous avez besoin d’un site qui attire les gens dans votre travail. Et boutique VR studio Nous sommes pratiquement a géré cela et puis certains., Son site, construit par Herdl sur WordPress, utilise de nombreuses techniques de pointe, dont le WebGL et la vidéo à 360 degrés pour vous donner un avant-goût irrésistible de ses services immersifs. Découvrez ses essais VR pour Audi, avec des invités célèbres inattendus.
Asaro
Asaro est un fournisseur d’expériences d’aventure uniques et de voyages divertissants pour les invités de superyacht à travers le monde., Dans le cadre d’un changement de marque plus large, ce site Web élégant a été conçu et développé par l’agence Green Chameleon, basée à Bristol.
Construit sur un cadre WordPress personnalisé pour garder l’édition de contenu en cours facile pour le client, les visiteurs sont emmenés dans un voyage de découverte rempli de charme. Des effets de défilement subtils sont parfaitement liés à une ligne pointillée interactive, traçant la progression de la navigation de la manière dont un capitaine de yacht pourrait marquer les cartes., Les rendus CGI personnalisés ont été utilisés comme dispositif graphique pour représenter les offres de services exclusives d’Asaro, à la lumière de la rareté des actifs photographiques en raison de la nature privée des événements.
« La direction artistique a été inspirée par un mélange de photographie de goutte d’eau et de conception d’affiches théâtrales”, explique le directeur créatif Tom Anderson. « Nous avons aimé l’esthétique du style de photographie et nous avons senti qu’il était bien lié au thème nautique sous-jacent du projet., »
Suffisamment réactif pour non seulement avoir l’air magnifiquement cohérent sur les petits écrans, la vitesse d’accès était également une motivation pour rationaliser les performances. Avec les habitants des bateaux à la merci de la connectivité Web marine, les temps de chargement sont plus déchiquetés que saccadés sur les ordinateurs de bureau, les tablettes et les mobiles.,
Auteur: Mark Billen
Design Museum Denmark
Construit par Stupid Studios, agence de design et de branding basée à Copenhague, le site du Musée du design du Danemark présente non seulement les archives, les collections et les recherches du musée, mais le présente également dans un style moderne., De son animation SVG d’ouverture du logo du musée, en passant par le défilement de parallaxe accrocheur et les échanges de palettes améliorant l’humeur pendant que vous faites défiler le contenu, c’est la présence en ligne parfaite pour une destination de design essentielle.
Katy Perry
la princesse de la Pop Katy Perry utilise rien d’autre que WordPress pour héberger son site officiel., En se concentrant-naturellement-sur les visuels et les indices des médias sociaux, le site utilise des photos de portfolio de haute spécification de l’artiste pour faire une déclaration audacieuse. Faites défiler vers le bas pour voir les dates de tournée, merch et plus, ou utilisez les icônes pour en savoir plus.
C’est un site à la fois épuré et nerveux qui parvient à mélanger l’image personnelle distinctive de bubblegum pop de l’artiste avec une fonctionnalité de style mag conviviale et brillante. Fini le temps des sites de groupes occupés bourrés d’animation et de musique que vous ne pouvez pas arrêter., Le site Web de Perry prouve que vous pouvez emballer beaucoup de personnalité en utilisant juste un simple fond blanc et des liens facilement navigables, donnant aux fans la possibilité d’écouter, regarder et apprendre facilement et à leur convenance.
Le réservoir d’encre
À partir de 1989 comme Collins Inkjet, une opération d’un seul homme fournissant de l’encre pour l’imprimante à jet d’encre continue de Kodak, Kao Collins est aujourd’hui l’un des principaux fournisseurs mondiaux., Et si vous n’avez jamais vraiment pensé à l’encre (au-delà de maudire lorsque votre imprimante est épuisée), le site de Kao Collins, The Ink Tank, est sur le point de changer cela.
Construit par DBS Interactive, Le réservoir d’encre est un site WordPress accrocheur qui tire tous les arrêts pour vous apporter des nouvelles de pointe de l’industrie de l’encre et de présenter certaines des façons créatives entreprises et artistes utilisent actuellement l’encre., Le point culminant, en ce qui nous concerne, est sa section Histoire de l’impression: un magnifique téléavertisseur parallaxe rempli d’animation et d’effets, vous emmenant tout le chemin des tablettes d’argile à l’impression en un seul passage à grande vitesse d’aujourd’hui, et regardant vers l’avenir certaines des possibilités futures de l’impression.,
- 14 des moyens faciles de faire votre site web plus accessible
- Superbe parallaxe défilement des sites web pour explorer
- Les meilleures pages 404