Diseño de página web (Mock Up) con Pidoco

Los Mock up son herramientas muy útiles para estructurar una página web antes de programarla. Nos permite introducir elementos en una plantilla de forma fácil y muy visual, para poder organizar una página web antes de programarla. 

Para mostrar un ejemplo, vamos a realizar un Mock up de la página web para la Semana Cultural del Centro Universitario de Mérida. Durante esta semana se organizan actividades, talleres, charlas, cursos, etc. para los estudiantes, profesores y personal administrativo del centro. 

Tras abrir la página web de pidoco (pidoco.com), debemos iniciar sesión con una cuenta de correo y verificar la cuenta pulsando en el correo electrónico que nos enviarán tras introducir nuestros datos.

 

Una vez hemos iniciado sesión, vamos a realizar nuestro primer proyecto. Para ello seleccionamos las proporciones o soporte en el que vamos a trabajar. Elegimos un soporte de página web para ordenador.

Ahora ya podemos empezar a introducir elementos. En la columna de la izquierda tenemos todos los elementos que podemos introducir en la página web, y en el centro, la página sobre la que situaremos todos los elementos. Es importante ser meticuloso con esta plantilla, puesto que después nos va a guiar para crear la futura página web de la Semana Cultural.

Se puede colocar texto e imágenes importadas.

Introducimos el menú, con todas sus opciones desplegables.

Introducimos un calendario donde se mostrarán las actividades organizadas para cada día.

Seguimos introduciendo elementos hasta obtener el resultado final que buscamos para la página web.

Este es el resultado final de plantilla para página web. En la parte superior, se encuentran los organizadores y la cabecera de la página. En el lado izquierdo, una foto del Centro Universitario de Mérida. En la parte central están situadas las entradas del blog, donde se irá informando de las novedades y diferentes actividades relacionadas con la Semana Cultural. En el lado derecho, un buscador de información, un calendario para mostrar las actividades y un vídeo presentación de la Semana Cultural. 

Enlace a la plantilla de la página web: