Acerca de esta recopilación La portada de una página web es en la mayoría de los casos la sección más importante. En esta recopilación he seleccionado 10 portadas webs, que por un motivo u otro, me han parecido muy buenas, cada una de ellas debido a una característica concreta. La idea es que os sirvan [...]

Autor:

Cofundador y Jefe de proyecto de Erasmusu.com. Desarrollador de juegos, diseñador gráfico y viajero. Si te gustan esos temas sígueme en twitter.

Acerca de esta recopilación

La portada de una página web es en la mayoría de los casos la sección más importante. En esta recopilación he seleccionado 10 portadas webs, que por un motivo u otro, me han parecido muy buenas, cada una de ellas debido a una característica concreta. La idea es que os sirvan de inspiración para vuestros propios proyectos.

Pero antes de poder diseñar una buena portada, hay que entender qué hace que una portada sea mala. Una mala portada es aquella cuyo índice de rebote es muy alto, es decir, aquella en la que la mayoría de los usuarios que la ven la abandonan sin navegar por el resto de la web.

Una mala portada es por tanto aquella que no transmite nada al visitante, aquella en la que se pierde y no encuentra la información que busca. Una mala portada será la mayoría de las veces visualmente poco atractiva. Una mala portada es también aquella cuya estructura caótica impide al usuario centrarse en los elementos más importantes.

Para mí, las 10 características más importantes para diseñar una Portada Web rompedora son:

1. El Eslogan: Squared Eye

Squared Ey

Make waves” define muy bien lo que quiere transmitir Squared Eye en su portada. El eslogán es un elemento vital para toda campaña de marketing y puede tener cabida en la portada de la web para realzar la idea principal que se quiere transmitir.

2. Diseño Interesante: Carol Rivello

carolrivello

Este es un ejemplo de portada que destila buen diseño a raudales. Podrá gustar más o menos, pero un toque original siempre será apreciado por los visitantes aunque sea a nivel subliminal.

3. Gancho: Wake Somebody Up

wakesomebodyup

El “gancho” es aquel elemento, ya sea el logo, una imagen, etc… que da un toque de humor a la portada. El gallo de “Wake Somebody Up” es un buen ejemplo.

4. Estructura: Foxtie

foxtie

La estructura de la portada es primordial a la hora de permitir al usuario orientarse y ver de un vistazo el servicio o producto que ofrece la web. En el caso de Foxtie vemos de una forma clara y concisa los 4 servicios que ofrecen, acompañados cada uno de un icono visual, y por encima de ello una serie de explicaciones visuales que bien pueden ser trabajos realizados o cualquier otra idea que se quiera transmitir.

5. No te cortes en hacer scroll: Studio 7 Designs

studio 7 designs

Existe cierta tendencia a intentar evitar el scroll en las portadas, por lo que muchas de ellas tienden a miniaturizarse. Personalmente me parece un error. Si es necesario explicar más elementos de la web, siempre que la estructura sea buena, no te cortes en ampliarla verticalmente. Otro buen ejemplo de esto lo tenemos en las portada de 37signals o Erasmusu.

6. Si tienes un servicio muy concreto, ponlo en grande: Foundation Six

foundationsix

El producto o servicio debe estar presente en la portada. Si por ejemplo ofreces diseño web… ponlo bien grande, ¡que se enteren todos!

7. Utiliza colores, fondos y tamaños distintos según la importancia del texto: Enviramedia

enviramedia

Y para ello las combinaciones son infinitas. Usualmente los tonos cercanos a los colores cálidos como el rojo destacarán más que los tonos frios como los azules o verdes. Pero todo depende de los elementos, tamaños y fondos que utilices.

8. Contenido dinámico: Veerle Duoh

veerle duoh

Uno de los grandes aciertos que tuvimos con Erasmusu fue migrar la portada original de tipo estático a una portada con contenido dinámico proveniente de los usuarios. La indexación en Google se disparó, y en gran parte debido al nuevo motor de indexado de Google: Caffeine. Una portada cuyos contenidos cambien, aunque sea mediante las últimas entradas en el blog como en Veerle Duoh, será una portada ya no solo más atractiva para los usuarios, sino también para los motores de búsqueda.

9. Se conciso: Puzzle Tree Music

puzzletreemusic

Se conciso, sobre todo si tienes servicios muy distintos unos de otros. Explícalos de manera resumida y acompáñalos de iconos visuales. Y como ya hemos comentado cuando hablamos de la estructura, colócalos en un sitio visible. Los 3 iconos + descripción de la parte superior de Puzzle Tree Music resumen bien esta idea.

10. Se original: Sofasurfer

sofasurfer

Incluso para anunciar un cambio de página o de marca, se puede ser original… y si no me crees mira la rompedora portada de Sofasurfer en la que comunica su cambio de página.

Reflexión final

Espero que esta colección os haya inspirado y realmente os sirva para diseñar portadas rompedoras. Si no estas de acuerdo con alguna de las 10 características o si se te ocurre alguna más puedes dejar un comentario.

See you in another life!

¿Necesitas desarrollar un proyecto web o para móviles? ¡Estamos disponibles!

Visitar Cokidoo

Cokidoo, los creadores de Ontuts, desarrollamos proyectos tecnológicos centrados en redes sociales y aplicaciones web, aplicaciones móviles y consultoría web y bases de datos.

Somos jóvenes, inquietos, versátiles, apasionados por la innovación y enfocados en las nuevas tecnologías. Con Ontuts tratamos de compartir nuestro conocimiento adquirido en los distintos proyectos, ayudando a la comunidad y mostrando nuestra capacidad tecnológica.

Si necesitas un presupuesto sin compromiso, estamos disponibles, no dudes en contactar con nosotros.

Comentarios en esta publicación (10 comentarios)

¿Te ha gustado esta publicación? ¡Puedes compartir tu opinión con todos nosotros! Simplemente pincha aquí mismo.

CP

Gran recopilación. Muy interesante el articulo, estaria genial ver más cosas de este tipo.

CP

Gracias ya habia visto la anterior recopilación, tambien muy buena.

Que buena articulo Javier, muy buenas ideas y observaciones las que has hecho en el, pero creo que haría falta, algo así como “crea un deseo al visitante” es decir en una buena pagina web la idea es que quien nos visita, luego de escanear la pagina realice una accion, ya sea descargar un software o inscribirse para un trial, ese tipo de cosas. o “call to action”
En fin me gusta tu blog, muy buen contenido

¡Gracias Luis! Pues sí, hacer que el visitante haga justo lo que tu querías que hiciera es lo más importante de todo, ya sea registrarse, comprar el producto lo que sea.

¡Ese punto habría que meterlo!

Son excelentes vuestros tutoriales y vuestros consejos (los de Ontuts no sólo los tuyos Javier).

Sólo añadiría a los consejos y a la selección un enlace a la página de webcreme.com que es estupenda, con muchas páginas de portadas finas y elegantes:
http://www.webcreme.com

Gracias por compartir vuestro entusiasmo y trabajo

si,, muy bueno.. que buena pagina de verdad…

reyna rosibel rivera

estoy preucucada pues no se casi nada de las computadoras y tengo que elaborar pagina web y no se es para mi clase de programacion y la verdad ya no se que hacer espero que me responda antes del domigo ayudame por favor.

martin

bueno muy interesante en verdad