Mejores ejemplos de webs hechas en WordPress
Estos increíbles sitios web hechos en WordPress muestran lo mejor de este popular CMS. Cuando se lanzó por primera vez en 2003, WordPress fue considerado como una herramienta básica de blogging para los aficionados. Muy rápido despegó, convirtiéndose en un CMS de pleno derecho que ahora maneja millones de sitios en todo el mundo. Y los profesionales creativos han estado empujando los límites de los CMS para crear sitios web de WordPress complejos y hermosos desde entonces.
Para mostrarle exactamente lo que este increíble CMS puede hacer, hemos seleccionado algunos de los mejores sitios web de WordPress. Si este artículo te inspira a construir tu propio sitio web de WordPress.
Estos son los mejores sitios con wordpress:
01. Rafal Bojar
La diseñadora Zhenya Rynzhuk usó WordPress como un CMS sin cabeza, con Vue.js para la parte delantera, para crear este atractivo sitio de portafolio de fotografías para Rafal Bojar . Cuenta con una página de inicio que muestra vistas previas de historias seleccionadas, una cuadrícula resbaladiza para mostrar todo el trabajo de Bojar y una página de ‘esencia’ que explica la filosofía y el enfoque del fotógrafo.
«El objetivo era brindar a los visitantes una experiencia única y mostrar los increíbles trabajos de Rafal», dice Rynzhuk. La pareja discutió algunas opciones de backend diferentes, pero se decidió por WordPress para que el sitio fuera fácil de administrar y actualizar regularmente con nuevos proyectos.
Junto con WordPress y Vue.js, el sitio utiliza un depósito S3 para almacenar datos, que se entrega a través de Cloudfront para garantizar tiempos de carga rápidos. Rynzhuk también hizo uso del esqueleto Vue de Bedrock y Hendrik-Jan de Harder , así como GSAP para las animaciones.
02. Adel Vakula
Adel Vakula es una modelo internacionalmente famosa de Ucrania, y este sitio promocional para ella llega del estudio de ideas de sus compatriotas Yabloko , quien no solo lo diseñó y codificó, sino que creó todo el trabajo de ilustración. El resultado es una fiesta visual magníficamente distintiva, que abarca una serie de viñetas pictóricas con nuestra glamorosa heroína.
Desde la apertura del paisaje de nubes de algodón de azúcar que literalmente burbujea con animaciones sutiles, Vakula protagoniza retratos de ensueño diseñados para demostrar una personalidad carismática. Ella caprichosamente pasa por alto la noche parisina en lo alto de una gárgola que se dobla como un botón de reproducción de YouTube, después de tomar un tren del metro de Nueva York desde una plataforma con un gato callejero. Las visitas a Venecia e Ibiza brindan fondos igualmente excéntricos para Instagram y enlaces de correo electrónico, donde incluso los sellos de cócteles fomentan el seguimiento. Es algo irónico, pero hecho con tanto encanto y técnica que no puedes evitar enamorarte. Incluso el puntero del ratón va todo en forma de corazón.
Construido en WordPress CMS, un elemento destacado de la interfaz de usuario es una sección divertida donde puedes arrastrar y soltar trajes en un Vakula virtual para ver instantáneas de modelado reales. Al igual que las tarjetas de llamadas para los posibles lanzamientos, esta tiene una pose más memorable que la mayoría.
Autor: Mark Billen
03. Medio hijo
La galardonada tienda de sándwiches Middle Child , con sede en Filadelfia, necesitaba un sitio web que combinara con su ambiente peculiar y sin pretensiones. Self Aware, un estudio de diseño y tecnología de servicio completo, se enfrentó al desafío, creando un sitio basado en un tema de WordPress completamente personalizado utilizando Timber y ACF , una combinación que el socio de estudio Mike Wagz llama «un cambio de juego para los desarrolladores de temas de WordPress».
Self Aware también hizo uso de las últimas tecnologías web para ofrecer una experiencia óptima: el diseño fue creado utilizando CSS Grid , y un trabajador de servicio almacena activos estáticos que incluyen archivos CSS y JavaScript para acelerar los tiempos de carga iniciales.
«Middle Child rezuma atmósfera de todos los rincones y grietas», agrega Wagz. «Da una cálida bienvenida a los clientes de todos los ámbitos de la vida con la cantidad justa de diversión, kitsch y peculiaridades. Creo que este diseño es exitoso porque pudimos capturar este espíritu y traducirlo a la web».
04. Sea Harvest
Cuando el mercado de productos del mar basado en Canberra, Sea Harvest,necesitaba una nueva identidad de marca y una presencia digital inteligente que coincidiera, se dirigió a la agencia de marca y web australiana ED . El sitio web de WordPress tiene un diseño llamativo de periódico con muchos toques peculiares para explorar.
«Cuando pensamos en los mariscos, muchos de nosotros volvemos a la memoria de comer pescado y papas fritas en la playa con amigos y familiares», dice la diseñadora Cam Tidy. «A menudo, estas articulaciones para llevar envolverían su comida en un periódico, por lo que fue natural explorar eso como una idea visual».
Sin embargo, la replicación de un diseño de impresión estático en la web no estuvo exenta de desafíos. El equipo utilizó CSS Flexbox para reposicionar el contenido y mantener un espaciado constante, independientemente del tamaño de la pantalla. Casi todas las mediciones se basan en una escala de respuesta mediante unidades REM, lo que facilita el control sobre el tipo y las proporciones de la imagen a medida que el navegador escala.
La característica favorita del desarrollador
Bryn Shanahan es el hecho de que los usuarios pueden «dibujar» en el sitio, incluso a través de una búsqueda de palabras interactiva . «Lo logramos cubriendo el sitio con un elemento HTML5 Canvas, que luego se usó para dibujar los dibujos del usuario», explica.
ED utiliza WordPress para una gran cantidad de proyectos de su sitio web, por lo que es fácil de usar e intuitivo para los clientes. «[WordPress tiene] un fácil desarrollo de back-end, lo que permite más tiempo para concentrarse en el front-end para dar vida al diseño», agrega el desarrollador Adam Forcucci. «La capacidad de hacerlo sin cabeza, usando la API WP Rest , nos permite usar marcos como React, que se está convirtiendo en el núcleo de nuestro futuro desarrollo en la plataforma».
05. Maxim Shkret
Con base en San Petersburgo, Rusia, Maxim Shkret es un artista digital independiente. Su impresionante sitio web de WordPress une la cartera con el mercado de comercio electrónico, lanzando una novedosa iniciativa de recaudación de fondos.
El sitio se abre en una serie de cuatro modelos 3D o esculturas digitales que se pueden arrastrar y girar 360 grados. Pig, Desert Fox, Double-natured Unicorn y Melting Panda se pueden girar a la izquierda y a la derecha para lograr un ángulo favorecido. Al hacer clic en el botón «Comprar esta foto», los visitantes pueden comprar una imagen digital en varias dimensiones a diferentes precios. Los beneficios se unirán de nuevo para transformar cada modelo digital en esculturas físicas reales mediante un proceso de mecanizado CNC de cinco ejes de impresión 3D. Es una buena idea para invitar a colaboradores y muestra cómo se puede adjuntar un enfoque de crowdfunding a una experiencia típicamente pasiva.
Los créditos de producción del sitio incluyen el Estudio de Diseño Sochnik de Nueva York, pero los ingeniosos esfuerzos de la interfaz de usuario nunca eclipsan el talento de Shkret. Esto incluye una sección de la galería simple de tomas de esculturas fijas que ondulan y ondean a través de un filtro acuoso. Es un efecto sutil, pero aumenta la sensación de textura que Shkret intenta darle a cada pieza.
06. KOBU
Los sitios de la cartera, como era de esperar, continúan brindando algunos de los terrenos más fértiles de la web para la expresión creativa y la inspiración. Esta tarjeta de llamadas en línea para la agencia portuguesa KOBU sigue ese espíritu con un sitio web de WordPress refinado y de buen gusto que aún burbujea con carácter. Llamándose a sí mismo un «laboratorio de marca» que no teme a la experimentación, el trabajo técnico aquí demuestra imaginación sobre la complejidad.
A través de una serie de elementos, recibimos un recordatorio de cómo se pueden combinar CSS y SVG para obtener el máximo carácter de frontend. El posicionamiento absoluto se utiliza para superponer encantadores motivos de malla de alambre, rompiendo las líneas entre los bloques de colores de fondo en negrita y vinculando las secciones entre sí. Un panel de video HTML5 en bucle obtiene un borde ondulado único utilizando una forma SVG como una máscara colocada arriba, antes de que las imágenes de estudio de caso tengan su radio de borde reducido a la mitad para circular. El sitio hace un uso ordenado de la biblioteca de carruseles slick.js para «trotar» al equipo de KOBU, con el caballo de la oficina, hasta la mitad de la página principal.
Sin embargo, el cenit es probablemente el bit que vemos primero, abriéndose en un encabezado de estilo de lámpara de lava ondulado producido por la manipulación de rutas SVG. Utilizando el plugin anime.js, un motor de animación polivalente de JavaScript, es un truco llamativo para establecer la paleta de colores, por lo menos.
Autor: Mark Billen
07. noformato
noformat es un estudio de diseño estratégico con sede en Nueva York. La página de inicio presenta un diseño animado de globo ocular que sigue el cursor del visitante alrededor de la pantalla, mientras que el texto superpuesto realiza un ciclo a través de todas las cosas que puede crear noformat. Para crear el globo ocular, el equipo exploró el diseño en After Effects CC antes de usar three.js para crear una versión interactiva, explica Ian Brewer, fundador y director creativo de noformat.
«Utilizamos los sombreadores de vértices y fragmentos para optimizar el procesamiento de GPU y lo hicimos pulsar y mostrar el logotipo de noformato en el interior», continúa Brewer. «Luego aplicamos efectos de posprocesamiento para darle un aspecto más orgánico y menos tridimensional al difuminar los bordes y agregar floración a los aspectos más destacados».
El resto del sitio está a la altura del impacto de esa primera página, con transiciones en desplazamiento resbaladizas y efectos de paralaje sutiles que muestran habilidades técnicas sin afectar la facilidad de uso.
«Elegimos WordPress para nuestro sitio por velocidad de lanzamiento y flexibilidad», explica Brewer. «A lo largo de los años, hemos construido nuestras propias bibliotecas y sistemas de edición basados en módulos que nos permiten crear o editar un sitio más rápido que cualquier otra solución CMS».
08. Femme y Feroz
El estudio holandés de diseño de experiencias Wonderland ha entregado comercio electrónico con sass para Femme y Fierce . El esquema de color clásico y atractivo de la página web de WordPress entrega el mensaje de la marca del minorista de moda en línea desde el principio. ‘Pegatinas’ animadas – piruletas giratorias, flechas punzantes, labios lamiendo – crean una sensación de descaro y deberían resonar en la generación de Snapchat / Instagram a la que se dirige este rango.
09. Puré Maison
Purée Maison es un estudio creativo y estratégico con sede en París. Su sitio web de WordPress destaca principalmente gracias a los soleados garabatos animados de color amarillo que aparecen al pasar el ratón, inyectan personalidad en declaraciones de marca aburridas y animan las transiciones. También ayudan al visitante a orientarse y lo alientan a explorar e interactuar con el sitio.
10. Somos virtualmente
Cuando su negocio se trata de cautivar a las personas que utilizan la realidad virtual para contar historias emotivas, necesita un sitio que atraiga a las personas a su trabajo. Y el estudio de realidad virtual We Virtually Are ha logrado eso y algo más. Su sitio, construido por Herdl en WordPress, utiliza muchas técnicas de vanguardia, como WebGL y video de 360 grados para brindarle un sabor irresistible de sus servicios de inmersión. Echa un vistazo a sus unidades de prueba de VR para Audi, con invitados famosos inesperados.
11. Asaro
Asaro es un proveedor de experiencias de aventura únicas y viajes entretenidos para los huéspedes de superyates de todo el mundo. Como parte de un cambio de marca corporativo más amplio, este ingenioso sitio web fue diseñado y desarrollado por la agencia Green Chameleon, con sede en Bristol .
Construido en un marco de WordPress personalizado para mantener la edición de contenido en curso fácil para el cliente, los visitantes son llevados en un viaje de descubrimiento lleno de encanto. Los efectos de desplazamiento sutiles están vinculados claramente a una línea de puntos interactiva, trazando el progreso de navegación en la forma en que un capitán de yate puede marcar las cartas. Las presentaciones CGI personalizadas se han utilizado como un dispositivo gráfico para representar las ofertas de servicios exclusivos de Asaro , ante la escasez de recursos fotográficos debido a la naturaleza privada de los eventos.
«La dirección de arte se inspiró en una mezcla de fotografía de gotas de agua y diseño de carteles teatrales», explica el director creativo Tom Anderson. «Nos encantó la estética del estilo de la fotografía y sentimos que encajaba perfectamente con el tema náutico subyacente del proyecto».
Lo suficientemente receptivo para no solo lucir bellamente consistente en pantallas más pequeñas, la velocidad de acceso también fue una motivación para optimizar el rendimiento. Con los habitantes de las embarcaciones a la merced de la conectividad web marina, los tiempos de carga son más complejos que en equipos de escritorio, tabletas y dispositivos móviles.
Autor: Mark Billen
12. Museo de Diseño de Dinamarca
Construido por la agencia de diseño y marca Stupid Studios , con sede en Copenhague , el sitio para el Museo de Diseño de Dinamarca no solo muestra los archivos, colecciones e investigaciones del museo, sino que también lo presenta con un estilo actual. Desde la apertura de la animación SVG del logotipo del museo hasta el llamativo paralaje de paralaje y el intercambio de paletas para mejorar el estado de ánimo a medida que se desplaza por el contenido, es la presencia en línea perfecta para un destino de diseño esencial.
13. Katy Perry
La princesa del pop Katy Perry usa WordPress para alojar su sitio web oficial. Enfocándose, de manera comprensible, en señales visuales y de medios sociales, el sitio utiliza tomas de portafolio de altas especificaciones del artista para hacer una declaración audaz. Desplácese hacia abajo para ver fechas de giras, merchandising y más, o use los iconos para descubrir más.
Es un sitio limpio y vanguardista que logra combinar la imagen personal del chicle distintivo del artista con una funcionalidad de estilo mag brillante, fácil de usar. Se acabaron los días de sitios de banda ocupados con demasiada animación y música que no puedes parar. El sitio web de Perry demuestra que puede tener mucha personalidad con un simple fondo blanco y enlaces de fácil navegación, dando a los fanáticos la opción de escuchar, mirar y aprender fácilmente y para su comodidad.
14. El tanque de tinta
Comenzando en 1989 como Collins Inkjet, una operación de un solo hombre que suministra tinta para la impresora de inyección de tinta continua de Kodak, hoy Kao Collins es uno de los proveedores líderes del mundo. Y si realmente nunca ha pensado en la tinta (más allá de maldiciones cuando se acaba la impresora), el sitio de Kao Collins, The Ink Tank, está a punto de cambiar eso.
Construido por DBS Interactive , The Ink Tank es un sitio llamativo de WordPress que hace todo lo posible para ofrecerte noticias de vanguardia de la industria de la tinta y muestra algunas de las formas creativas en que las empresas y los artistas utilizan la tinta actualmente. Lo más destacado, en lo que a nosotros respecta, es su sección Historia de la impresión: un magnífico localizador de paralaje con mucha animación y efectos, que le llevará desde las tabletas de arcilla a la impresión de alta velocidad de una sola pasada de hoy, y mirando hacia el futuro. En algunas de las posibilidades futuras de impresión.
Un comentario
Los comentarios están cerrados.