Ayuda Registrarse

Rio de Janeiro: diez ejemplos perfectos con esta plantilla

Una de nuestras plantillas favoritas es la de Rio, no sólo por el nombre de hereda de esa maravillosa ciudad, sino por su estructura y su estilo. Hay muchas razones por las que esta plantilla puede gustarte. 

  • Destaca las imágenes: si tienes imágenes de calidad, puedes utilizarlas como fondo de tu página web. 
  • Navegación simple y centrada: el menú de la plantilla Rio no tiene nada que ocultar. La navegación muestra todas las subpáginas y tiene un menú desplegable. Es por eso que puede ser de gran utilidad si no se tiene una navegación excesivamente larga. 
  • Mucho espacio para cada subpágina: el segundo área de contenido se encuentra situado en el pie de la página, es por eso que nada se interpone en el espacio de las imágenes. El área de contenido es amplio y diáfano para trabajar con columnas o a espacio completo. 
  • Área de logotipo flexible: como podrás observar en los ejemplos de a continuación, las páginas web disponen de un encabezado amplio que permite destacar el logotipo, el eslogan o incluso ambos elementos. Algunas páginas, prefieren dejar este espacio en blanco. 

Consejos para brillar con la plantilla Rio

La plantilla de Rio es verdaderamente impresionante, pero hay que conocer algunos de los trucos de esta plantilla para que el resultado sea perfecto. Hemos seleccionado 10 de las mejores páginas de Jimdo para mostrar esta plantilla. ¿Qué es lo que tienen en común? Te lo mostramos a continuación: 

  • Gran calidad en las imágenes: Rio de Janeiro está hecha para disponer de un imagen propia como fondo a tamaño completo. Otras plantillas también utilizan imágenes como fondo completo, pero sólo muestran una parte de la imagen o esta está parcialmente cubierta por otra capa. Es por esta razón que recomendamos que el fondo de la imagen sea de al menos 2000 píxeles de ancho. Si no estás de todo seguro del tamaño de tu imagen, puedes ver cómo optimizar las imágenes o buscar en un banco de imágenes gratuito
  • Diapositiva de fondo: en lugar de mostrar una sola imagen, puedes mostrar más de una imagen y añadir un efecto de diapositiva. Puedes controlar el tipo de transición, aunque nuestra favorita es la de desvanecer. 
  • Gama cromática consistente: uno de los elementos que hace que estas páginas tengan una diseño increíble es que tienen consistencia en el color. Seleccionan un color es específico con que el marcar la acentuación y lo utilizan para iconos, enlaces, botones o líneas horizontales. El resultado es un resultado bastante armónico que realmente destaca si las imágenes son en blanco y negro. Si quieres, puedes ver aquí una guía sobre el color web.
  • Navegación simple y en una línea: la plantilla de Rio de Janeiro se ve mejor cuando la navegación es simple, concisa y con los puntos principales a tener en cuenta. Si necesitas tener muchos menús desplegables, subpáginas o si tu navegación está dispuesta en dos líneas, entonces puedes mirar otros ejemplos como la plantilla Barcelona
  • Uso de las columnas para el cuerpo de la página: dado que Rio dispone de un gran espacio para el contenido se recomienda distribuir el contenido en columnas en lugar de tener una línea continua que ocupe todo el ancho de la web. Las líneas de más de 60 caracteres pueden ser difíciles de leer. 

Ejemplos reales de páginas web Jimdo que usan la plantilla Rio de Janeiro

1. Studio 23 

El estudio de diseño de Interiores Studio 23 utiliza esta plantilla y hace un uso inteligente de las imágenes de fondo, que se desvanecen en diapositiva. Destaca que cada fotografía complementa el color azul claro que han seleccionado para el menú de navegación, los títulos y los iconos. Otro de los puntos que destaca de esta página es el logotipo, el cual es blanco y se diferencia perfectamente con cada imagen de fondo. También utilizan una gama cromática consistente y dos tipos de letras fáciles de leer como son "Text Me One" y "Exo 2". 

2. Unger Music

La primera imagen de esta página web es un fondo plano en color naranja con un logotipo que destaca en el centro. Instantes después, la imagen desvanece en una galería de fotos en blanco y negro de músicos. El color naranja de la marca se repite en elementos decorativos como las líneas de división, los enlaces o los títulos. Otro de los puntos que destacan en esta página es el uso de columnas para hacer el texto más legible. También el fondo en blanco y el contenido perfectamente organizado hacen que la página tenga ese look tan profesional. 

3. Elbe Werk

El restaurante ElbWerk, situado en el famoso barrio de Sankt Pauli en Hamburgo, utiliza la plantilla Rio para destacar lo mejor de él. Destaca que todas las imágenes disponen de una iluminación en color lila que dan un toque peculiar a esta página. El logotipo en el centro y la navegación en blanco dan un respiro a las imágenes. Destaca además el uso de las imágenes redondas para mostrar los diferentes bloques de contenido. 

4. Ella Don Photography

En esta página web, la fotógrafa Ella Don introduce su portfolio y crea un gran impacto con ella. El fondo con diapositivas hace que la visita se sumerja de lleno en el trabajo de esta autora: desde fotografía de moda hasta de eventos deportivos. En este ejemplo, la navegación es completamente transparente pero funciona perfectamente porque el color del enlace se diferencia notablemente. 

5. Antonio Brown

El jugador de fútbol americano Antonio Brown también utiliza esta plantilla a modo de carta de presentación. Es un ejemplo muy válido a seguir si se quiere hacer un curriculum online. La navegación está complemente oculta y toda la información aparece en la primera página. ¿Puede esto funcionar sin dar la sensación de confusión? Lo que hace es minimizar el texto y maximiza el uso del color amarillo de la marca para hacer que todos los elementos se diferencien perfectamente y mantengan la consistencia. 

6. Bob Casneuf

La página web del arquitecto Bob Casneuf comienza con un logotipo muy creativo y destacado en el centro de la página. Es muy interesante ver cómo utiliza el mismo tono de amarillo que en el ejemplo anterior para conseguir el mismo efecto: la diferenciación de elementos. El color no sólo aporta consistencia, sino que destaca elementos como los títulos. Este es otro ejemplo de cómo se puede utilizar el elemento de las columnas para fragmentar el texto. También el uso del favicon y de las líneas divisorias con un detalle de una hoja hacen que la página tenga el acabado perfecto. Su página web refleja todo lo que se debe de tener en cuenta de un arquitecto, un buen punto de atención y el detalle de los pequeños elementos. 

 

7. Wedding Visuals

Aunque esta página pueda parecer simple, dispone de todos los elementos que se necesita en un portfolio: galerías, testimonios, premios, una sección acerca del autor y una forma simple y rápida de estar en contacto. El resultado es bastante minimalista, con un toque moderno y una buena elección de tipografía (Advent Pro). 

8. U.G. Irajpanah

Esta página resulta tan única que puede que no reconozcas a simple vista que se trata de la plantilla de Rio. En este ejemplo, el diseñador gráfico U.G. Irajpanah ha utilizado una imagen monocromática que destaca en el fondo de la página. Esta primera impresión logra que la visita quiera saber más acerca de el diseñador. En una página web corriente, podrías encontrar el texto del header situado en el centro; en este caso, el autor de esta página ha preferido situarlo a un lado, acentuando el efecto minimalista de la página web. El uso de la tipografía Courier New completa este look. 

9. Bauernkate Klein Thurow

Imágenes increíbles, consistencia cromática y una buena elección de la tipografía... ¿tienes la sensación de estar ante una tendencia web? La página web de esta casa rural de Alemania te invita a tener una cómoda estancia. Destaca el uso de las columnas, el texto y la imágenes para describir las diferentes ofertas que tienen - mucho mejor que un bloque pesado de texto. La combinación de tipos de letra que es Doppio One, Diplomata SC y IM Fell Double Pica.

10. Alina Atzler Photography

Este ejemplo viene de la mano de nuestra Product Manage Alina Atzler, quien en su tiempo libre se dedica a la fotografía de bodas y eventos. Una de las cosas que más nos gustan de la página de Alina es el modo cuidadoso con el que ella ha escogido sus fotografías de fondo: el logo siempre se sitúa en el centro y las imágenes o el foco de la imagen se sitúa a uno de los lados. Es un truco muy aconsejable, ya que las imágenes nunca distraen de la marca. Ella mantiene un fondo blanco y un tipo de letra oscuro que permite que los textos se lean con facilidad y deja que las imágenes hablen por sí solas.

Y estos son todos nuestros ejemplos por hoy. ¿Utilizas tú también la plantilla de Rio?¿O quieres decirnos cuál es tu página web favorita? Déjanos un comentario para que podamos saber qué te ha parecido este blog.

Elena Benavente

Communic-Action


Comentarios: 8 (Discusión cerrada)
  • #1

    carlos (martes, 12 enero 2016 00:06)

    excelentes ejemplos de esta plantilla, un saludo

  • #2

    Diseño web (martes, 12 enero 2016 14:52)

    Excelente que hagan posts con ejemplos de uso. Eso facilita la visualización de las posibilidades de cada tema.

  • #3

    antonio (jueves, 14 enero 2016 12:15)

    una cosa que no entiendo es el cambio de los fondos, ahora con el sistema nuevo todo es peor, antes teníamos mas posibilidades a la hora de editar los fondos de nuestra web, dar un pasa o dos hacia a tras no me parece bien, esto no le pega a jimdo.

  • #4

    Eusebio (viernes, 15 enero 2016 15:50)

    Hola Elena, buen inicio de año... estoy proyectando una página nueva relacionada con negocios internacionales y comercio exterior. Cual plantilla me recomendaría.. saludos.

  • #5

    diseño web (domingo, 17 enero 2016 23:45)

    Que tema recomendarían para una librería, con venta online, y si tiene la posibilidad de tener un espacio para el seo, algo prioritario, gracias de antemano!!

  • #6

    Varelamoure Photography (martes, 26 enero 2016 13:52)

    Muy buenos ejemplos. Hay páginas muy elegantes. Me gusta.
    Yo, personalmente, estoy consiguiendo un efecto parecido con la plantilla "Rome". En este caso, el menú, en vez de estar en medio de la imagen, está en la parte superior de la página.
    Echadle un vistazo ;) www.varelamoure.com

  • #7

    REFORCAT | José Manuel (martes, 02 febrero 2016 15:00)

    Hola a todos, la verdad es que estos ejemplos prácticos ayudan a mejorar nuestra página web, pero sí que coincido con algunos comentarios en lo penosas que se ven algunas imágenes de fondo en otros dispositivos que no sean el ordenador.

    Quizás estén cambiando los hábitos de los navegantes, pero si entro en una web y no sé dónde tengo que ir o me dificulta la navegación entonces me marcharé, esto se traduce en no conversiones, es decir dinero que perdemos.

    Estamos encantados de leer una propuesta sobre la plantilla Cairo (creo que es la que tenemos actualmente).

    Saludos a todos desde Barcelona :)

  • #8

    PAVITECNIK | Manuel Ángel (martes, 02 febrero 2016 15:07)

    Buenas a todos, coincido con otros comentarios en que las imágenes de fondo nos causan problemillas a la hora de mostrar nuestra web en otros dispositivos.

    Saludos desde Barcelona, también :)