estos increíbles sitios web de 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 blogs para aficionados. Muy rápidamente despegó, convirtiéndose en un CMS completo que ahora alimenta a millones de sitios en todo el mundo. Y los profesionales creativos han estado empujando los límites del CMS para crear sitios web complejos y hermosos de WordPress desde entonces.
para mostrarte exactamente lo que este increíble CMS puede hacer, hemos seleccionado algunos de los mejores sitios web de WordPress., Si este artículo lo inspira a construir su propio sitio web de WordPress, estos tutoriales de WordPress lo ayudarán a comenzar, o si desea construir una cartera de aspecto impresionante, consulte nuestra guía de los mejores temas de cartera de WordPress.
- Los mejores servicios de alojamiento web en 2019
Rafal Bojar
La diseñadora Zhenya Rynzhuk utilizó WordPress como CMS semi-sin cabeza, con Vue.,js para el front end, para crear este atractivo sitio de portafolio fotográfico para Rafal Bojar. Cuenta con una página de inicio que muestra vistas previas de historias seleccionadas, una cuadrícula elegante 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 proporcionar a los visitantes una experiencia única y mostrar las increíbles obras de Rafal», dice Rynzhuk. El par discutió algunas opciones de backend diferentes, pero se decidió por WordPress para que el sitio fuera fácil de administrar y se actualizara regularmente con nuevos proyectos.
junto con WordPress y Vue.,js, el sitio utiliza un bucket S3 para almacenar datos, que se entrega a través de Cloudfront para garantizar tiempos de carga rápidos. Rynzhuk también hizo uso de Bedrock y el esqueleto Vue de Hendrik-Jan De Harder, así como GSAP para las animaciones.,
Adel Vakula
Adel Vakula es una modelo ucraniana de fama internacional, y este sitio promocional para ella llega de sus compatriotas Yabloko ideas Studio, quienes no solo lo diseñaron y codificaron sino que crearon 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 el primer paisaje Nuboso de algodón de azúcar que literalmente burbujea con sutiles animaciones, Vakula protagoniza retratos de ensueño diseñados para demostrar una personalidad carismática. Ella caprichosamente pasa por alto la noche parisina encima 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 completa con gato callejero. Las visitas a Venecia e Ibiza proporcionan fondos igualmente excéntricos a los enlaces de Instagram y correo electrónico, donde incluso los sellos que beben cócteles animan a los seguidores., Es 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 sobre WordPress CMS, un elemento de interfaz de usuario destacado es una sección divertida donde puedes arrastrar y soltar atuendos en una Vakula virtual para ver instantáneas de modelado reales. Como tarjetas de visita para posibles castings, esta pose es más memorable que la mayoría.,
Autor: Mark Billen
Middle Child
Premio-middle child, una tienda de sándwiches con sede en Filadelfia, necesitaba un sitio web que coincidiera con su ambiente peculiar y sin pretensiones., El estudio de diseño y tecnología de servicio completo Self Aware aceptó el desafío, creando un sitio basado en un tema de WordPress completamente a medida utilizando Timber y ACF, una combinación que el socio del estudio Mike Wagz llama «un cambio de juego para desarrolladores de temas de WordPress serios».
Self aware también hizo uso de las últimas tecnologías web para ofrecer una experiencia óptima: el diseño se creó utilizando CSS Grid, y un trabajador de servicio almacena en caché activos estáticos, incluidos archivos CSS y JavaScript, para acelerar los tiempos de carga iniciales.,
«El Niño Del Medio rezuma atmósfera desde cada rincón y grieta», agrega Wagz. «Da una cálida bienvenida a clientes de todos los ámbitos de la vida con la cantidad justa de diversión, kitsch y peculiaridad. Creo que este diseño es exitoso porque pudimos capturar este espíritu y traducirlo a la web.,»
sea Harvest
Cuando Sea Harvest, el mercado de mariscos basado en Canberra, necesitaba una nueva identidad de marca y la presencia digital inteligente para igualar, recurrió a la agencia Australiana de web y branding ed. El Sitio Web de WordPress tiene un diseño llamativo estilo periódico con muchos toques peculiares para explorar.,
«Cuando pensamos en mariscos, muchos de nosotros somos llevados de vuelta a un recuerdo de comer pescado y papas fritas en la playa con amigos y familiares», dice la diseñadora Cam Tidy. «A menudo, estas juntas para llevar envolvían su comida en el periódico, por lo que se sentía natural explorar eso como una idea visual.»
replicar un diseño de impresión estático en la web no estuvo exento de desafíos, sin embargo. El equipo utilizó CSS Flexbox para reposicionar el contenido manteniendo un espaciado constante, independientemente del tamaño de la pantalla., Casi todas las mediciones se basan en una escala sensible que utiliza 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 interactiva de palabras. «Logramos esto cubriendo el sitio con un elemento Canvas HTML5, que luego se usó para dibujar los dibujos del usuario», explica.
ED utiliza WordPress para muchos de sus proyectos de sitios web, encontrándolo fácil de usar e intuitivo para los clientes., «fácil desarrollo de back-end, que permite más tiempo para centrarse en front-end para dar vida al diseño», añade el desarrollador Adam Forcucci. «La capacidad de hacerlo sin cabeza, utilizando la API REST de WP, nos permite usar marcos como React, que se está convirtiendo en el núcleo de nuestro futuro desarrollo en la plataforma.»
Maxim Shkret
con sede en San Petersburgo, Rusia, Maxim shkret es un artista digital independiente., Su impresionante Sitio Web de WordPress combina portfolio con ecommerce marketplace, 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. El cerdo, El Zorro del Desierto, El Unicornio de doble naturaleza y el Panda derretido se pueden girar a izquierda y derecha para lograr un ángulo preferido. Al hacer clic en el botón’ Comprar esta foto’, los visitantes pueden comprar una imagen digital en varias dimensiones por varios precios., Los ingresos se agruparán de nuevo en la transformación de cada modelo digital en esculturas físicas reales utilizando un proceso de mecanizado CNC de cinco ejes de impresión 3D. Es una buena idea para invitar a colaboradores y muestra cómo un enfoque de crowdfunding se puede asociar 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 esfuerzos de la interfaz de usuario nunca eclipsan el talento de Shkret. Esto incluye una sección de Galería simple de fotos de esculturas fijas que ondulan y ondulan a través de un filtro acuoso., Es un efecto sutil, pero aumenta la sensación de textura que Shkret pretende dar a cada pieza.
KOBU
terreno fértil para la expresión creativa y la inspiración. Esta tarjeta de visita en línea para la agencia portuguesa KOBU sigue ese espíritu con un sitio web de WordPress de buen gusto y contenido que aún burbujea de carácter., Llamándose a sí mismo un «laboratorio de marca» que no tiene miedo a la experimentación, el trabajo Técnico aquí demuestra la imaginación sobre la complejidad.
sobre una serie de elementos, obtenemos un recordatorio de cómo CSS y SVG se pueden combinar para obtener el máximo carácter frontend. El posicionamiento absoluto se utiliza para superponer encantadores motivos de estructura de alambre, rompiendo las líneas entre bloques de colores de fondo en negrita y uniendo secciones entre sí. Un panel de video HTML5 en bucle obtiene un borde ondulado único usando una forma SVG como una máscara colocada arriba, antes de que las imágenes de casos de estudio tengan su radio de borde reducido a la mitad para que sean circulares., El sitio hace un uso limpio de la mancha.JS Carrusel biblioteca para ‘trotar’ el equipo de KOBU, con caballo de oficina, a través de la mitad de la página principal.
El cenit, sin embargo, es probablemente el bit que vemos primero, abriéndose en un encabezado ondulado estilo lámpara de lava producido manipulando caminos SVG. Utilizando el anime.JS plugin, un motor de animación JavaScript polivalente, es un truco llamativo para establecer la paleta de colores, si nada más.,
Autor: Marcos Billen
noformat
noformat estratégico, estudio de diseño con sede en Nueva York. La página de inicio presenta un diseño de globo ocular animado que sigue el cursor del visitante alrededor de la pantalla, mientras que el texto superpuesto recorre todas las cosas que noformat puede crear. Para crear el globo ocular, el equipo primero exploró el diseño en After Effects CC, antes de usar tres.,JS para construir una versión interactiva, explica Ian Brewer, fundador y director creativo de noformat.
» utilizamos sombreadores de vértices y fragmentos para optimizar el renderizado de la GPU e hicimos que pulsara y destellara el logotipo de noformat en el interior», continúa Brewer. «Luego aplicamos efectos de posprocesamiento para darle un aspecto más orgánico y menos 3D al difuminar los bordes y agregar floración a los reflejos.»
el resto del sitio está a la altura del impacto de esa primera página, con elegantes transiciones de desplazamiento y sutiles efectos de paralaje que muestran habilidades tecnológicas sin afectar la usabilidad.,
«elegimos WordPress para nuestro sitio por la velocidad de lanzamiento y la 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.»
Femme y Fierce
el estudio de diseño de Dutch experience Wonderland ha entregado ecommerce con sass para Femme y Fierce. El esquema de color clash-tastic del Sitio Web de WordPress ofrece el mensaje de marca del minorista de moda en línea desde el principio., Las ‘pegatinas’ animadas – piruletas giratorias, flechas punzantes, labios lamentes-crean una sensación descarada y deben resonar con la generación de Snapchat/Instagram a la que se dirige esta gama.
Puree Maison
Purée Maison es un estudio creativo y estratégico con sede en París. Su sitio web de WordPress se destaca principalmente gracias a los garabatos animados amarillos soleados que aparecen en hover, inyectan personalidad en declaraciones de marca aburridas y animan transiciones., También ayudan al visitante a encontrar su camino y lo animan a explorar e interactuar con el sitio.
virtualmente somos
Cuando su negocio se trata de cautivar a las personas que usan realidad para contar historias emotivas, necesitas un sitio que atraiga a la gente a tu trabajo. Y boutique VR studio we Virtually Are ha logrado eso y algo más., Su sitio, construido por Herdl en WordPress, utiliza muchas técnicas de vanguardia que incluyen WebGL y video de 360 grados para darle un sabor irresistible de sus servicios inmersivos. Echa un vistazo a sus pruebas de realidad virtual para Audi, con invitados famosos inesperados.
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 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 se llevan en un viaje de descubrimiento lleno de encanto. Los sutiles efectos de desplazamiento están vinculados cuidadosamente a una línea de puntos interactiva, que traza el progreso de la navegación de la manera en que un capitán de yate podría marcar las cartas., Los renderizados CGI personalizados se han utilizado como un dispositivo gráfico para representar las ofertas de servicios exclusivos de Asaro, a la luz de la escasez de activos 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 fotográfico y sentimos que se relacionaba muy bien con el tema náutico subyacente del proyecto.,»
lo suficientemente sensible como para no solo verse 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 los barcos a merced de la conectividad web marina, Los tiempos de carga son más astillados que agitados en computadoras de escritorio, tabletas y dispositivos móviles.,
Autor: Mark Billen
Design Museum Denmark
construido por la agencia de diseño y Branding Stupid Studios, con sede en Copenhague, el sitio del Museo del diseño de Dinamarca no solo muestra los archivos, colecciones e investigaciones del museo, sino que también lo presenta en un estilo moderno., Desde la animación SVG de apertura del logotipo del museo, hasta el llamativo desplazamiento de paralaje y los cambios de paleta que mejoran 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.
Katy Perry
la princesa pop Katy Perry utiliza nada menos que WordPress para alojar su sitio web oficial., Centrándose-comprensiblemente-en imágenes y señales de redes sociales, el sitio utiliza tomas de portafolio de alta especificación del artista para hacer una declaración audaz. Desplácese hacia abajo para ver las fechas de la gira, merchandising y más, o utilice los iconos para descubrir más.
es un sitio de corte limpio pero vanguardista que logra mezclar la imagen personal de bubblegum pop distintiva del artista con una funcionalidad de estilo mag fácil de usar y brillante. Atrás quedaron los días de sitios de bandas llenas de demasiada animación y música que no puedes parar., El sitio web de Perry demuestra que puedes tener mucha personalidad usando solo un simple fondo blanco y enlaces fácilmente navegables, dando a los fans la opción de Escuchar, ver y aprender fácilmente y a su conveniencia.
El Tanque de tinta
comenzando en 1989 como Collins Inkjet, una operación 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 has pensado en la tinta (más allá de maldecir cuando se agota 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 de WordPress llamativo que saca todas las paradas para traerle noticias de vanguardia de la industria de la tinta y mostrar algunas de las formas creativas en que las empresas y los artistas están utilizando la tinta., Lo más destacado, en lo que a nosotros respecta, es su sección de Historia de la impresión: un magnífico Localizador único de paralaje repleto de animación y efectos, que lo lleva desde tabletas de arcilla hasta la impresión de alta velocidad de una sola pasada de hoy, y mirando hacia el futuro a algunas de las posibilidades futuras de impresión.,
- 14 maneras fáciles de hacer que su sitio web sea más accesible
- impresionantes sitios web de desplazamiento de paralaje para explorar
- 404 páginas