¿Cómo diseñar una buena homepage?

A la hora de crear una web, es de vital importancia pensar cómo queremos que sea su carta de presentación; o lo que es lo mismo, su homepage, landing page o página de inicio. Debemos ser capaces de diseñar una buena homepage que consiga que los usuarios quieran seguir navegando para así acceder a más contenido de nuestra web.

¿Qué incluir en la homepage?

La página de inicio debe exponer cierta información clave sobre la empresa o blog para que el usuario siga navegando, pero sin llegar ésta a ser excesiva para no provocar el efecto contrario. 

  • Debe incluir un menú principal que incorpore un resumen del servicio que ofreces, de la temática del blog, etc. Conviene una interfaz intuitiva y sencilla, seleccionando aquellos aspectos más importantes y sin demasiado texto.
  • El usuario debe encontrar fácilmente los datos de contacto, ya que de lo contrario se puede cansar y abandonar la página antes de contactar contigo.
  • Tanto en la homepage como en el resto de páginas, debe aparecer el logotipo de la empresa o marca, normalmente en la parte superior a la izquierda o en el centro.
  • Debe haber un footer o pie de página donde colocar toda la información corporativa y legal, así como los enlaces a redes sociales en caso de tenerlos.
  • El contenido no debe ser repetitivo pero sí es adecuado incluir palabras o conceptos que te ayuden con el posicionamiento web.

Es importante crear un diseño atractivo que llame la atención del visitante. En este punto entraría el uso de imágenes de calidad que muestren de forma realista el servicio o producto que ofreces.

Pensando en el smartphone

Algo a tener en cuenta es el incremento del uso del teléfono móvil o tablet para navegar por internet en lugar del ordenador. Es por eso que debemos buscar un diseño para la web que sea responsive, es decir, que se adapte perfectamente a los distintos tipos de dispositivo. Así, en los últimos años se suele priorizar un diseño web pensado en primer lugar para smartphone, y en segundo lugar para ordenador.

smartphone

Pero, ¿cómo se traduce esto al diseño de una página de inicio?

Para empezar, debemos tener en consideración el tipo de navegación que se utiliza en un teléfono: el scroll. Esta técnica de desplazar el dedo implica que el usuario emplea menos tiempo en leer el contenido, atendiendo solo a los elementos más destacados. 

Es por este motivo que muchas empresas optan por un diseño one page donde se concentra toda la información en una única página, prescindiendo cada vez más de amplios menús. En caso de optar por esta alternativa, es fundamental buscar un orden coherente para la información en función de la importancia que le des a cada aspecto. Conviene separar cada elemento dejando cierto espacio entre ellos para que el usuario pueda ver claramente que se trata de distintos bloques.

Otro aspecto relacionado con el diseño pensado para teléfono es el del tamaño de las imágenes. Cada vez se utilizan más fotografías de gran tamaño, para que éstas puedan ser vistas y apreciadas sin problemas desde una pantalla pequeña. 

 

Optimiza tu contenido

En función del producto o servicio que ofrezca tu web, conviene echar un vistazo a algunas recomendaciones: 

  • Servicios o portfolio: conviene incluir un resumen de lo que ofreces, a poder ser acompañado de imágenes u otros soportes gráficos para que sea fácil de visualizar.
  • Tienda online: incluye tu producto en la homepage, destacando los más importantes, ofertas o novedades, y con enlaces a “añadir a la cesta” para que el usuario pueda seguir navegando cómodamente.
  • Blog: se deben mostrar las entradas resumidas, con opciones de “leer más” para que el visitante pueda decidir qué post le interesa leer más.

Finalmente, te recomendamos que vayas actualizando la página web para que transmita novedad, movimiento y dinamismo; así el usuario sabrá que la tiene que volver a visitar.

Te dejamos aquí el enlace para que veas las distintas páginas web en las que hemos trabajado; y otro enlace aquí para que veas ejemplos de one page de distintos diseñadores.

El reto del diseño del proyecto EQO

El encargo del diseño del proyecto EQO, una consultoría internacional centrada en el sector del medio ambiente, ha sido todo un reto para nuestro estudio. Se trata de una compañía que tiene como principales campos de acción el cambio climático, la energía y la economía sostenible.

Branding

En el momento de su creación, EQO busca posicionarse en el mercado a través de una imagen limpia e innovadora, de modo que para el branding decidimos usar colores vivos que transmitan esa frescura deseada. Debido a que la consultoría tiene un importante compromiso con el medio ambiente, optamos por usar un elemento gráfico que recuerde a una hoja de árbol.

Diseño de tarjetas corporativas - EQO
Targetas corporativas

El diseño web

En cuanto a la página web, se realiza un diseño y una posterior maquetación sobre WordPress. Por tal de presentar los distintos servicios que ofrece la consultoría, se hace uso de iconografías y fichas, de manera que la información queda ordenada de forma fácil e intuitiva. Además, se añade un menú interactivo construido con JavaScript y SVG que realiza una animación siguiendo el puntero del ratón.

Diseño web - EQO
Menú interactivo de la página web

Printing

Para terminar, EQO solicita el diseño de una carpeta corporativa que a la vez sirva de presentación para sus clientes. Se tratará de un documento que deberá incluir un contenido extenso, de manera que se busca organizarlo de la forma más visual posible. Para lograr esta fácil lectura y una sensación de simpleza, se opta por usar elementos gráficos como iconos que permitan estructurar toda la información.

A su vez, puesto que se trata de una empresa joven y que quiere transmitir innovación y nuevas ideas dentro de su sector, se sigue en la línea de una identidad corporativa moderna. Esto se consigue gracias al intenso color naranja principal, que contrasta con los demás tonos más sobrios. Finalmente, el bolsillo interior porta-documentos queda perfectamente integrado en la carpeta, resultando prácticamente inapreciable.

Diseño de carpeta corporativa - EQO
Exterior de la carpeta corporativa

 

Diseño de carpeta corporativa - EQO
Interior de la carpeta corporativa

Gutenberg, nuevo editor de WordPress

Con casi 10 años de experiencia a sus espaldas, WordPress es seguramente uno de los sistemas de gestión de contenido (CMS) más conocidos a nivel mundial. Se trata de un software de código abierto que permite crear desde blogs hasta páginas web corporativas más complejas de manera gratuita e intuitiva.

Por si fuera poco, este práctico gestor de contenidos dispone de un gran número de plantillas en su página oficial, de manera que la experiencia de creación es altamente personalizable.

Pero aunque WordPress sea ya de por sí de uso sencillo, su creador Matt Mullenbeg anunció que quiere cambiar el editor por un sistema de bloques, el llamado Gutenberg. De hecho, este sistema ya existe como plugin dentro del propio WordPress, de manera que puede ser usado en su versión beta. Así, hasta su lanzamiento a finales de noviembre podrá utilizarse esta versión, siempre teniendo en cuenta las limitaciones que supone estar en una fase tan temprana de desarrollo.

Pero, ¿qué es Gutenberg?

Gutenberg busca revolucionar WordPress y basarse en un sistema de bloques muy visual y que simplifique la tarea del gestor de contenidos. Así, si probamos este nuevo editor podremos ver algunas diferencias con el editor actual de WordPress. Para empezar, el espacio de escritura de Gutenberg es bastante más amplio, haciendo que el usuario se centre principalmente en escribir sin preocuparse de otras distracciones.

Editor Gutenberg

 

Además, con el sistema de bloques, cuando queramos insertar una imagen, un encabezado o simplemente otro párrafo, nos limitaremos a hacer clic en “Insertar” y seleccionaremos la opción que deseemos en el menú desplegable que aparecerá.

Por otro lado, aunque el modo de edición HTML también está disponible con Gutenberg, éste está algo más escondido que con el editor actual de WordPress. Mientras que ahora la tarea de cambiar entre editor visual y HTML se realiza mediante un simple clic, con Gutenberg hay que seleccionar el bloque que queramos editar y desplegar un pequeño menú.

Las limitaciones

Debido a su temprana etapa de desarrollo, el sistema Gutenberg cuenta aún con ciertas limitaciones que afectan a su correcto funcionamiento. Son muchos los usuarios de WordPress que reportan problemas con el nuevo sistema de bloques, desde atajos de teclado que no funcionan hasta errores en el código HTML.

De momento, desde su cuenta oficial de Twitter, WordPress ya ha anunciado el lanzamiento de la versión 5.0 Beta 5, hecho que ha causado un gran revuelo en las redes sociales. Eso sí, cabe señalar que aunque al lanzar la versión 5.0 el editor predeterminado será Gutenberg, parece que seguirá existiendo la opción de usar el editor clásico para aquellos que tengan problemas de compatibilidad