2015-en-fotografias-microsite

¿Cómo crear un microsite con Genially? ¡Nunca ha sido tan fácil!

¡Hola Geniallymaníacos! en esta ocasión os vamos a explicar cómo crear un microsite genial de una forma fácil y sencilla.

Antes de nada vamos a definir qué es un microsite y para qué sirve. Un microsite se refiere al diseño de un espacio web que puede ser una página individual o conjunto de páginas que funcionan como suplemento de una web primaria.

También podemos considerar como microsite una presentación que, en lugar de ser unidireccional, cuenta con un menú inicial desde el que navegar por el documento visitando sólo los apartados que se quieran visitar.

Una vez aclarado esto, pongámonos manos a la obra.

1. Lo primero que deberemos hacer es organizar nuestro microsite. Con ayuda de bocetos u otra herramienta, crearemos un esquema general indicando cuál va a ser la página principal y qué contenido va a llevar. Además indicaremos la relación entre las páginas que van a estar enlazadas con la principal o con otras secundarias o terciarias. Ejemplo:

microsite2. Teniendo nuestro esquema claro, el siguiente paso será hacer una maquetación más detallada sobre nuestro microsite. El nivel de detalle dependerá de las herramientas de las que dispongamos. Aunque esto no es limitante a la hora de buscar recursos para nuestro trabajo. En esta ocasión hemos elegido nuestro boceto para la plantilla de Microsite (esta plantilla la puedes encontrar en la categoría “Infografías” de Genially). Vamos a crear un microsite muy visual, con algunas de las fotografías más geniales de 2015, de modo que la página de inicio y sus “botones” van a constituirse con trozos de la página de destino.

fotografias 20153. Ahora podremos crear nuestro microsite en Genially. Para ello partiremos de una página principal en blanco y luego crearemos las sucesivas.

Lo primero que debemos hacer es tener en cuenta las dimensiones de nuestro lienzo. En este caso, para que salga una maquetación perfecta hemos elegido unas dimensiones de 1600×900 píxeles. Para el resto de elementos vamos a elegir una altura de 100px para el rótulo y ocho imágenes de 400×400 píxeles. De esta forma conseguimos una colocación fácil de todos nuestros objetos.

El siguiente paso es cargar nuestras imágenes para editarlas en Genially haciendo uso de la herramienta “Recortar”. Con ayuda de las dimensiones, podemos crear un área de recorte al tamaño deseado.

Una vez realizado el recorte, con la ayuda del Modo Diseñador, podemos ajustar las dimensiones con los ajustes manuales de píxeles si lo deseamos. También podremos colocar las imágenes en su lugar manualmente o con ayuda de las guías imantadas.

screenshot-www genial ly 2016-05-18 17-14-10    screenshot-www genial ly 2016-05-18 17-14-50

Por tanto el resultado para la página principal será:

2015 en fotografías

Para el resto de páginas, cargaremos la imagen como fondo y añadiremos un pin o recurso propio al que dotaremos de interactividad de etiqueta y en su interior introduciremos la información necesaria.
interactividad genially

Una vez terminadas todas nuestras páginas secundarias, deberemos tener en cuenta añadir los enlaces entre páginas correctamente. Recuerda que esto se hace a partir de la selección de un elemento y eligiendo “Ir a página” del panel de interactividad, tan solo tendremos que seleccionar la página deseada.

Otro factor importante es el de añadir un botón de “home” o “página principal”, para poder volver al inicio y movernos a las diferentes secciones de nuestro microsite. Por supuesto no podemos olvidar agregar contenido externo para enriquecer nuestro microsite.

Por último, para hacer que nuestro genially sea un microsite real, deberemos de ir a la pestaña “Ajustes” y desactivar la paginación. Con ello conseguiremos un resultado tan genial como este:

Consejos:

Otros detalles que pueden servir para hacer más llamativo tu microsite, además de añadir algunos efectos de entrada, es cambiar la trama de fondo (desde la pestaña Ajustes) y añadir algún efecto “al pasar el ratón” sobre las imágenes de la página principal, como por ejemplo en este caso que se ha elegido el efecto de “ocultar” para mostrar debajo el nombre del autor.

En este caso hemos realizado un microsite en el que los botones son imágenes que hemos recortado, pero podemos darle esa función a pines, textos u otro elemento que nos haga referencia a la sección a la que queremos acceder.

Si te ha resultado útil este tutorial compártelo y ayuda a los demás a ser tan geniales como tú.

Carlos López
Carlos López
User Experience Manager & Diseñador Gráfico. Amante de la música y de los buenos momentos. Enjoy everyday!


Artículos relacionados