Cómo se adapta WordPress a los diferentes estilos de maquetación

Ejemplos destacados de diseño web basado en WordPress

El diseño de una web basada en WordPress no tiene por qué tener un estilo especial ni verse limitado en ningún sentido por el sistema que está detrás. Puede ser un blog, una web personal o profesional para una pequeña o gran empresa, un sitio de comercio electrónico… Casi cualquier perfil puede encajar con este gestor de contenidos.

Tal vez el uso más frecuente de WordPress siga siendo el de blog. Cuando vió la luz hace algo más de 10 años (en 2003), básicamente era una herramienta creada para administrar blogs, pero poco a poco el sistema ha ido madurando e incorporando funciones de CMS (Content Management System) que han hecho posible disfrutar de la flexibilidad que hoy en día tenemos a la hora de montar una web. Gracias a estas adaptaciones, hoy en día WordPress está detrás de más de 60 millones de sitios web en todo el mundo.

Para demostrar que no tiene por qué limitar la creatividad del diseñador web, vamos a ver algunos ejemplos de páginas creadas con WordPress.

Ejemplos de diseños a pantalla completa

En este caso, no hace falta irse muy lejos para encontrar ejemplos de este tipo de diseños. En ocasiones, el cliente tiene fotos de calidad que quiere destacar y es él mismo quien sugiere la posibilidad de crear una web que utilice toda la pantalla del navegador como marco.

Restaurante italiano Il Giardino, Pollença (Mallorca)

Restaurante italiano Il Giardino

Hotel Cala Sant Vicenç, Pollença (Mallorca)

Hotel Cala Sant Vicenç

Paco Mobles, Pollença (Mallorca)

Tienda de muebles Paco

Maria Rotger, actriz

Maria Rotger, actriz

Luxury Group Mallorca

Luxury Group Mallorca

Otros ejemplos reales de diseños a pantalla completa basados en WordPress:

Grind Spaces, espacios de trabajo y colaboración en New York

Grind Spaces

Modern Green Home, estudio de arquitectura y construcción

Modern Green Home

Pierrick Calvez Studio, Boutique Design Studio

Pierrick Calvez Studio

Aparte de estas muestras creadas a medida, hoy en día existen multitud de plantillas premium (de pago), e incluso gratuitas, que demuestran las posibilidades de WordPress para trabajar con diseños a pantalla completa. Además, existen bastantes herramientas, como plugins para jQuery (Supersized, Backstretch, Vegas, etc.), que facilitan considerablemente la tarea de desarrollar este tipo de webs.

WordPress como blog o revista online

Estos son solo algunos de los ejemplos de blogs y revistas en Internet más conocidos que utilizan WordPress para publicar sus contenidos en la red:

The Mozilla Blog

The Mozilla Blog

Harvard Gazette

Harvard Gazette

TED Blog

TED Blog

TechCrunch

TechCrunch

Hollywood Life

Hollywood Life

Webs de grandes marcas y empresas

The New York Times, CNN, Ebay, Sony, Mashable y muchas otras empresas utilizan la tecnología ofrecida por WordPress como base para sus redes de blogs o páginas web:

The Rolling Stones

The Rolling Stones

Reuters blogs

Reuters blogs

CNN Blogs

CNN blogs

University of Florida

University of Florida

Webs de museos, fundaciones y galerías de arte hechas con WordPress

Por curiosidad, para comprender cómo ha evolucionado y se ha integrado WordPress en Internet, he intentado buscar algún sector que no esté directamente relacionado con la tecnología, los blogs o el diseño web, como por ejemplo el mundo del arte. Si bien es verdad que las webs de los museos y galerías más importantes del mundo no están hechas con WordPress, poco a poco se empieza a ver una tendencia hacia webs que sean más fáciles e intuitivas de gestionar.

Museo Dionís Bennàssar, Pollença (Mallorca)

Museo Dionís Bennàssar, Pollença, Mallorca

The Toledo Museum of Art, Toledo, Ohio (USA)

The Toledo Museum of Art, Toledo, Ohio (EEUU)

The American Museum in Britain, UK

The American Museum in Britain, UK

National Academy Museum, New York (USA)

National Academy Museum, New York (EEUU)

WordPress y los diseños no convencionales

Estos diseños poco frecuentes muestran cómo es posible crear una web con un aspecto muy diferente y creativo en la cara visible para el público, mientras se administra la web a través de un panel de control fácil de manejar.

Eyes & Ears, agencia creativa en Chicago (USA)

Eyes & Ears

Design The Planet, estudio de diseño web en New Orleans (USA)

Design The Planet

Eastworks Leather Company, diseño y fabricación manual de carteras de piel y accesorios

Eastworks Leather Company

G’nosh, gourmet dips

G'nosh gourmet dips

All-N-1, salón de belleza en Atlanta, Georgia (USA)

All-N-1 House of Beauty

Sextantio Albergo Diffuso, Italia

Sextantio, Italia

Conclusión

Como hemos visto, a nivel de diseño WordPress es flexible y perfectamente capaz de integrarse con cualquier idea o estilo que queramos darle. Probablemente parte de su popularidad haya sido gracias a esta versatilidad y posibilidad de transformación a través de temas o estilos (themes).

De todas formas, esto no quiere decir ni mucho menos que WordPress sea siempre la mejor solución. En muchos casos, dependiendo de las características del proyecto, habría que valorar por ejemplo si la web realmente necesita un gestor de contenidos. En muchos casos (como cuando una web no se va a actualizar a menudo) puede ser mucho mejor montar una web estática (utilizando solamente HTML, CSS y Javascript) o semidinámica (con PHP, ASP…), sin necesidad de utilizar bases de datos.

Las limitaciones que pueda tener a nivel de funcionalidad, no existen cuando valoramos el tema del diseño, ya que éste va completamente aparte y sólo depende de nuestra creatividad y conocimientos de maquetación web.

Otros sistemas como ExpressionEngine, Drupal, Joomla, o algún CMS simple y ligero como picoCMS, LightCMS o Anchor CMS, pueden ser soluciones muy válidas a tener en cuenta según el proyecto que tengamos entre manos.

Comentarios

  1. Esteban

    Seguro que las que son de empresas de pollensa, son hechas por tí. Bonita manera de disfrazar tus trabajos…..

  2. Daniel

    Correcto. ¿Está mal?

    De todas formas, no se intenta “disfrazar” ni ocultar nada. El objetivo de esta entrada es mostrar ejemplos de diseños un poco especiales (propios y ajenos), para demostrar que WordPress no limita el estilo.

  3. Montse

    Buenos días,
    Felicidades por el artículo. Me gustaría saber si la web de Modern Green Home ha utilizado un tema concreto y si es así, cual.

    Muchas gracias,

    Montse

  4. Daniel

    Hola Montse.
    La mayoría de estas webs son diseños a medida, hechos exclusivamente para cada cliente, no temas de WordPress que se puedan comprar.

    Concretamente esta que comentas utiliza un tema llamado “moderngreenhome”, o sea que lo más seguro es que sea un trabajo a medida.

  5. David

    Conozco poco tiempo esta web, pero me está terminando de abrir más mis conocimientos sobre este mundo, y ayudando para proyectos personales. ¡Enhorabuena por el trabajo!

    ¿El diseño utilizado para la web de la actriz María Rotger, es uno propio, o algún theme de wordpress que se ha ido modificando y dejando tal cual está? Me interesaría saber más sobre este diseño en concreto.

    Muchas gracias por tu trabajo, Daniel.

  6. Daniel

    Muchas gracias, David.
    El diseño de la web de Maria Rotger es propio, hecho a medida (no es un theme modificado). Es uno de los que estamos actualizando para que esté disponible para descargar. Pronto publicaré algo al respecto…

  7. David

    Hola Daniel.
    Muchas gracias por la contestación. Estaré atento a esas noticias con el theme y su descarga. Muchas gracias y enhorabuena por la labor realizada.

  8. Excelente recopilación de páginas web, tienen mucho potencial en cuanto al diseño del sitio, la estructura, los colores y la tipografía. Esta claro que esta herramienta es muy buena para el diseño web aunque también tiene mucho que ver en el resultado la creatividad del diseñador web.

  9. gerard

    El restaurante Il Giordino que tema usa?

  10. Daniel

    Hola Gerard. La web que comentas es un diseño propio a medida que hicimos para este restaurante. No es una plantilla comercial.

  11. Fabiana

    Hola. Te felicito por los diseños…. son muy originales me encantan. Te hago una consulta, estos tipos de modelos que realizaste se pueden hacer o modificar en los temas de una página de WordPress gratis? Saludos.

  12. Emmanuel

    Hola Daniel, muy buen post. Tengo una pregunta:
    como hago para crear un diseño propio a medida. WP da esa opción?

  13. Patty

    Muy buenos ejemplos, de verdad que es muy intersante y sirve de base para quienes deseen crear un wodpress. En imaginacolombia.com hay varias herramientas y utilidades para crear excelentes blogs.

  14. Hola Daniel.
    Mi hijo me va a cambiar mi web que esta anticuada y no actualizada… Quiero una web algo parecido a http://www.gnosh.co.uk
    Me encanta… Veremos si conseguimos hacer una web de artista bien bonita… Me gusta informal.
    Gracias

  15. Nicolás Sánchez

    Hola Daniel, muy buen articulo y por supuesto no me parece mal que promociones tu trabajo dentro de él, adelante…
    Me surge una pregunta de wordpress a nivel de arquitectura, como diseñas una página web que a su vez tenga un blog entre sus opciones (como la tuya), usas solo wordpress y generas ambos elementos o combinas wp con otra herramienta para la página web?
    Saludos

  16. Daniel

    Hola Nicolás.
    Se puede utilizar WordPress tanto para webs tipo blog, como para las que el blog sólo es una parte de ella. La manera más sencilla de configurarlo así sería hacer que la portada sea una página específica (en vez de la lista de entradas recientes). Esto se hace desde Ajustes > Lectura > Página frontal muestra > Una página estática.

  17. Borja

    Hola Daniel!
    Entiendo que la web de Paco Mobles no será un theme comprado ¿no? ¡Me encanta!
    Busco un tema que me permita poner los menús en una barra lateral izquierda y que permita que sea vea una imagen a toda pantalla.
    GRACIAS por el post que tras varios años sigue vivo.
    Abrazo
    @borjatube

  18. Daniel

    Hola Borja.
    Muchas gracias. Efectivamente, la web que comentas es un diseño y desarrollo a medida para el cliente, no es un theme comprado y personalizado.

  19. Cristopher

    Interesante articulo ademas de mucha utilidad y concuerdo contigo que a nivel de diseño wordpress es capaz de integrarse con cualquier idea o estilo. Gracias ppor compartir.

    Saludos Cordiales.

  20. Jose María

    Muchas gracias Daniel por este post. Me ayudó mucho a la hora de diseñar mi página web.
    Le dejo mi página web para que la valoren: http://www.alojamientositioweb.com

  21. Asdeideas

    Buen post y gran variedad de ejemplos y diseños! Gracias por la aportación!

Y tú qué opinas?

Las URLs se convertirán en enlaces automáticamente. Tu dirección de email no se publicará ni se utilizará para enviar ningún tipo de información. Los mensajes que no aporten nada al tema que se trata en esta entrada se borrarán. Las imágenes que aparecen al lado de cada autor utilizan el servicio de Gravatar. Recuerda que puedes usar etiquetas HTML como <a href>, <code>, <em> o <strong> en los comentarios.

(necesario)

(opcional)