Sites Web WordPress: 14 exemples impressionnants
Ces incroyables sites Web WordPress présentent le meilleur de ce CMS populaire. Lors de son lancement en 2003, WordPress était considéré comme un outil de blog 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 beaux depuis.
Pour vous montrer exactement ce que cet incroyable CMS peut faire, nous avons sélectionné certains des meilleurs sites Web WordPress. Si cet article vous inspire pour créer votre propre site Web WordPress, ces Tutoriels Wordpress vous aidera à démarrer, ou si vous souhaitez créer un portefeuille impressionnant, consultez notre guide des meilleurs Thèmes de portefeuille WordPress .
01. Rafal Bojar
Designer Zhenya Rynzhuk utilisé WordPress comme un CMS semi-headless, avec Vue.js pour le front-end, pour créer ce site de portfolio de photographies attrayant pour Rafal Bojar . Il comporte 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 présenter les œuvres étonnantes de Rafal», déclare Rynzhuk. La paire a discuté de quelques options de backend différentes, mais a opté pour WordPress afin que le site soit facile à gérer et régulièrement mis à jour avec de nouveaux projets.
Parallèlement à WordPress et Vue.js, le site utilise un compartiment S3 pour stocker les données, qui sont fournies via Cloudfront pour garantir des temps de chargement rapides. Rynzhuk a également utilisé Substrat rocheux et Hendrik-Jan de Harder Vue skeleton , ainsi que GSAP pour les animations.
02. Adel Vakula
Adel Vakula est une mannequin ukrainienne de renommée internationale, et ce site promotionnel pour elle provient de compatriotes Studio d'idées Yabloko , qui non seulement l'a conçu et codé, mais a également 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.
Depuis le Cloudscape de barbe à papa d'ouverture qui bouillonne littéralement avec des animations subtiles, Vakula stars dans des portraits de rêve conçus pour démontrer une personnalité charismatique. Elle surplombe de manière fantasque la nuit parisienne au sommet d'une gargouille faisant office de bouton de lecture YouTube, après avoir attrapé un train du métro de New York depuis une plate-forme avec un chat de la rue. Les visites à Venise et à Ibiza offrent des arrière-plans tout aussi excentriques vers Instagram et des liens de courrier électronique, où même les phoques sirotant des cocktails encouragent un suivi. C'est un truc ironique 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 a la forme d'un cœur.
Construit sur WordPress CMS, un élément d'interface utilisateur remarquable est une section amusante où vous pouvez faire glisser et déposer des tenues sur un Vakula virtuel pour afficher de véritables clichés de modélisation. En tant que cartes de visite pour les castings possibles, celui-ci prend une pose plus mémorable que la plupart des autres.
Auteur: Mark Billen
03. Enfant du milieu
Sandwicherie primée basée à Philadelphie Enfant du milieu avait besoin d'un site Web qui corresponde à son ambiance décalée et sans prétention. Studio de conception et de technologie à service complet Conscience de soi a relevé le défi en créant un site basé sur un Thème WordPress utilisant Charpente 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 Grille CSS , et un Travailleur de service met en cache les actifs statiques, y compris les fichiers CSS et JavaScript, afin d'accélérer les temps de chargement initiaux.
«Middle Child respire l'atmosphère de tous les coins et recoins», ajoute Wagz. `` Il accueille chaleureusement les clients de tous les horizons avec juste ce qu'il faut de plaisir, de kitsch et de bizarrerie. Je pense que cette conception est réussie parce que nous avons pu capturer cet esprit et le traduire sur le Web.
Pour trouver votre outil parfait, consultez ces top constructeurs de sites Web . De plus, voyez ci-dessous pour les meilleurs prix.
04. Sea Harvest
Quand le marché des fruits de mer de Canberra Récolte en mer avait besoin d'une nouvelle identité de marque et d'une présence numérique intelligente pour correspondre, il s'est tourné vers l'agence australienne Web et de marque ED . Le site Web WordPress arbore une mise en page frappante de style journal avec de nombreuses touches originales à explorer.
«Quand nous pensons aux fruits de mer, nous sommes nombreux à nous rappeler de manger du poisson-frites sur la plage avec des amis et de la famille», déclare le designer Cam Tidy. «Souvent, ces plats à emporter emballaient votre nourriture dans du papier journal, il semblait donc naturel d'explorer cela comme une idée visuelle.
La réplication d'une mise en page statique et imprimée sur le Web n'a cependant pas été sans défis. 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 se met à l'échelle.
La fonctionnalité préférée du développeur Bryn Shanahan est le fait que les utilisateurs peuvent `` dessiner '' sur le site, y compris via un recherche de mots interactive . «Nous y sommes parvenus en recouvrant le site d'un élément HTML5 Canvas, qui a ensuite été utilisé pour dessiner les dessins de l'utilisateur», explique-t-il.
ED utilise WordPress pour un grand nombre de ses projets de sites Web, le trouvant convivial et intuitif pour les clients. «[WordPress a] un développement back-end facile, ce qui laisse plus de temps pour se concentrer sur le front-end pour donner vie à la conception», ajoute le développeur Adam Forcucci. 'La capacité à faites-le 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 futur développement sur la plateforme.
05. Maxim Shkret
Basée à Saint-Pétersbourg, en Russie, Maxim Shkret est un artiste numérique indépendant. Son impressionnant site Web WordPress associe portefeuille au marché du commerce électronique, 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 qui peuvent être traînées et pivotées à 360 degrés. Le cochon, le renard du désert, la licorne à double nature et le panda fondant peuvent être tournés à gauche et à droite pour obtenir un angle préféré. En cliquant sur le bouton 'Acheter cette photo', les visiteurs peuvent acheter une image numérique de différentes dimensions à différents prix. Les bénéfices seront réinvestis dans la transformation de chaque modèle numérique en véritables sculptures physiques à l'aide d'un processus d'usinage CNC à cinq axes par impression 3D. C'est une bonne idée pour inviter des contributeurs et montre comment une approche de financement participatif peut être associée à une expérience généralement passive.
Les crédits de production du site incluent le Sochnik Design Studio de New York, mais les efforts judicieux de l'interface utilisateur n'éclipsent jamais le talent de Shkret. Cela comprend une simple section Galerie de photos de sculptures fixes qui ondulent et ondulent à travers un filtre aqueux. C'est un effet subtil, mais qui renforce la sensation de texture que Shkret entend donner à chaque pièce.
06. KOBU
Les sites de portfolio, sans surprise, continuent de fournir un des terrains les plus fertiles du Web pour l’expression et l’inspiration créatives. Cette carte de visite en ligne pour l'agence portugaise KOBU suit cette philosophie avec un site Web WordPress de bon goût et sobre qui bouillonne toujours de caractère. Se qualifiant lui-même de «laboratoire de marque» qui n'a pas peur de l'expérimentation, le travail technique démontre ici l'imagination sur 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 maximal du frontend. Le positionnement absolu est utilisé pour superposer de charmants motifs filaires, brisant les lignes entre les blocs de couleur d'arrière-plan audacieux 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 ne voient leur rayon de bordure divisé par deux pour devenir circulaire. Le site utilise la bibliothèque du carrousel slick.js pour «trotter» l’équipe KOBU, avec un cheval de bureau, au milieu de la page principale.
Le zénith, cependant, est probablement le bit que nous voyons en premier, s'ouvrant sur un en-tête ondulant de style lampe à lave produit en manipulant les chemins SVG. En utilisant le plugin anime.js, un moteur d'animation JavaScript polyvalent, c'est une astuce accrocheuse pour établir une palette de couleurs, si rien d'autre.
Auteur: Mark Billen
07. forme
forme est un studio de design stratégique basé à New York. La page d'accueil présente un design de globe oculaire animé qui suit le curseur du visiteur sur l'écran, tandis que le texte superposé parcourt tout ce que noformat peut créer. Pour créer le globe oculaire, l'équipe a d'abord exploré le design en After Effects CC , avant d'utiliser three.js pour créer 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 du GPU et l'avons fait vibrer et faire clignoter 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 fleur aux reflets.
Le reste du site est à la hauteur de l'impact de cette première page, avec des transitions de défilement lisses et des effets de parallaxe subtils montrant des compétences technologiques sans affecter la convivialité.
«Nous avons choisi WordPress pour notre site pour sa rapidité de lancement et sa 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 d'éditer un site plus rapidement que toute autre solution CMS.
08. Femme et Fierce
Studio de design d'expérience néerlandaise pays des merveilles a livré du commerce électronique avec sass pour Femme et féroce . La palette de couleurs contrastées et contrastées du site Web WordPress transmet le message de marque du détaillant de mode en ligne dès le départ. Des `` autocollants '' animés - sucettes tournoyantes, flèches piquantes, léchage de lèvres - créent une sensation effrontée et devraient résonner avec la génération Snapchat / Instagram à laquelle cette gamme est destinée.
09. Puree Maison
Purée Maison est un studio créatif et stratégique basé à Paris. Son site Web WordPress se distingue principalement par les gribouillis animés jaunes ensoleillés qui apparaissent en survol, injectent de la personnalité dans des déclarations de marque ennuyeuses et animent les transitions. Ils aident également le visiteur à s'orienter, et les encouragent à explorer et à interagir avec le site.
10. Nous sommes pratiquement
Lorsque votre entreprise consiste à captiver les gens en utilisant la réalité virtuelle pour raconter des histoires émotionnelles, vous avez besoin d'un site qui attire les gens dans votre travail. Et boutique VR studio Nous sommes pratiquement a réussi cela et plus encore. Son site, construit par Troupeau sur WordPress, utilise de nombreuses techniques de pointe, notamment 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 de VR pour Audi, avec des invités célèbres inattendus.
11. Asaro
Asaro est un fournisseur d'expériences d'aventure uniques et de voyages divertissants pour les clients de superyachts du monde entier. Dans le cadre d'un changement de nom d'entreprise plus large, ce site Web élégant a été conçu et développé par une agence basée à Bristol. Caméléon vert .
Construit sur un cadre WordPress personnalisé pour faciliter l'édition continue du contenu pour le client, les visiteurs sont emmenés dans un voyage de découverte plein de charme. Les effets de défilement subtils sont parfaitement liés à une ligne pointillée interactive, traçant la progression de la navigation de la même manière qu'un capitaine de yacht pourrait marquer les cartes. Les rendus CGI personnalisés ont été utilisés comme dispositif graphique pour représenter Asaro Les offres de services exclusives de, compte tenu de la rareté des actifs photographiques en raison du caractère privé des événements.
«La direction artistique a été inspirée par un mélange de photographie de gouttes d'eau et de conception d'affiches théâtrales», explique le directeur créatif Tom Anderson. «Nous avons adoré l'esthétique du style de photographie et avons estimé qu'il était parfaitement lié au thème nautique sous-jacent du projet.»
Suffisamment réactif pour non seulement avoir une belle cohérence 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
12. Design Museum Denmark
Construit par une agence de design et de branding basée à Copenhague Studios stupides , le site du Danemark Musée du design non seulement présente les archives, les collections et les recherches du musée, mais il le présente également dans un style très actuel. De son animation SVG d'ouverture du logo du musée, à accrocheur défilement de parallaxe et des changements de palette améliorant l'humeur lorsque vous faites défiler le contenu, c'est la présence en ligne parfaite pour une destination de conception essentielle.
13. Katy Perry
La princesse de la pop Katy Perry n'utilise nul autre que WordPress pour héberger son site officiel. En se concentrant - naturellement - sur les visuels et les signaux 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, les produits et plus encore, ou utilisez les icônes pour en savoir plus.
C'est un site net mais avant-gardiste qui parvient à mélanger l'image personnelle de bubblegum pop distinctive de l'artiste avec une fonctionnalité de style mag brillant et conviviale. Il est révolu le temps des sites de groupes occupés avec trop d'animation et de musique que vous ne pouvez pas arrêter. Site Web de Perry prouve que vous pouvez emballer dans beaucoup de personnalité en utilisant juste un simple fond blanc et des liens facilement navigables, donnant aux fans la possibilité d'écouter, de regarder et d'apprendre facilement et à leur convenance.
14. Le réservoir d'encre
Créée en 1989 sous le nom de Collins Inkjet, une entreprise individuelle fournissant de l'encre pour l'imprimante à jet d'encre continu 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 à court), le site de Kao Collins, The Ink Tank, est sur le point de changer cela.
Construit par DBS interactif , Le réservoir d'encre est un site WordPress accrocheur qui met tout en œuvre pour vous apporter des nouvelles de pointe de l'industrie de l'encre et présenter certaines des façons créatives dont les entreprises et les artistes utilisent actuellement l'encre. Le point culminant, en ce qui nous concerne, est sa section Histoire de l'impression: une magnifique page unique de parallaxe remplie d'animations et d'effets, vous emmenant des tablettes d'argile à l'impression en un seul passage à grande vitesse d'aujourd'hui, et en regardant vers l'avenir. à certaines des futures possibilités d'impression.
Lire la suite:
