Creación de Wireframe para “Lo sepulto”

MÓDULO: Taller de herramientas online

SEMANA: Semana 5 del 21 al 28 de junio
Docente: Osvaldo GONZALEZ MONROY
Estudiante: Stephany Malhue López

1
Introducción
En el siguiente informe les presentare paso a paso de Wireframes usando el softwere PENCIL para
la empresa “Lo sepulto”, tambien al final explicare el por que los colores elegidos y tambien les
presentare el producto terminado.
Tambien usamos la app Pexels para desvcargar imágenes

2
Para empezar con el trabajo abrimos el Software pencil luego iremos a la parte superior izquierda y
seleccionaremos New document.

Luego de esto aparecera una pequeña imagen de nuestra plantilla de trabajo en la parte de abajo, le
daremos click con el boton derecho del mouse y se desplegara una ventana emergente y
seleccionaremos “Properties”; Luego de eso Colocare el nombre del trabajo “Wireframe Lo sepulto y
las medidas “1200px x 2500px” lo siguiente fue seleccionar el boton “Update” para seguir con
nuestro trabajo.

Como en el trabajo anterior tenemos que arrastras hacianuestra maqueta los elementos que
deseamos agregar, en este caso agragaremos “Bitmap Image”, luego de esto pinchamos con el
boton izquierdo de nuestro mouse nos apareceran opciones y nos dijiremosa “Action” y luego de este
seleccionaremos “Load Embedded image” lo cual seleccionaremos una imagen de nuestro escritorio
descargada previamentes en https://www.pexels.com/es-es/ y la cual editamos en canva para
agregarles los elementos de contactos y redes y tambien el logo que creamos para la funeraria.

3
A continuación, hicimos el mismo paso para agregar otra imagen tamaño 1200px x 400px que esta
representara nuestro carrusel de imagen “Slider”

Para que el carrusel de imagen estuviera mas completo le agregamos elementos de maquetación, el
cual eran dos triángulos para que parecieran la flecha para deslizar a la siguiente imagen, luego de
tener el elemento fuimos a la parte superior del software y nos dirigimos a la parte de SIZE en el cual
le dimos la medidas que deseábamos tuviera nuestros elementos el cual elegimos 40px x 40px

4
A continuación, agregaremos un título “Nuestros sevicios” para eso usaremos el texto H1

Para seguir insertaremos tres imágenes (como en el trabajo anterior que fueron foto 1…2…) de
medidas 380px x 300px cada una

Luego a cada imagen le agregaremos un título (seleccionado h1) y una descripción (seleccionamos h4 y le desactivamos
el modo negrita)

5
Para la siguiente parte que es la de agregar el video nos dirigimos a Youtube y sacamos una captura
de pantalla.

Luego agregamos “Insert Screensht” para agregar la imagen del video después seleccionamos la
imagen y nos fuimos a la parte “recorte rectangular” en seguida la recortamos para ya tenerla lista en
nuestra maqueta (el tamaño fue de 800px x 300px)

Luego de esto buscamos una imagen para nuestro Banner en la parte derecha del video que de
tamaños fue 200px x 300px, como lo hicimos anteriormente en el trabajo pasado agregamos en la
parte izquierda un rectángulo (230px x 300px) seleccionamos un color sobrio acorde lo pedido para
agregar el encabezado del video (Texto h1) y la descripción del video (texto h4 y desactivamos el
modo negrita)

6
Ya con la parte del video lista proseguimos a poner nuestro gps para que a la gente se le haga más
fácil llegar a nuestra sucursal y al lado agregamos el formulario de contacto en el cual proseguimos a
hacer con los mismos pasos del trabajo anterior.

Luego de terminar ese paso proseguimos a agregar otra imagen para nuestro banner
(tamaño1200px x 200px) y para terminar agregamos un rectángulo de 1200px x 300px de color gris
para nuestro FOOTER, en el cual agregamos enlaces rápidos, nuestro contacto y para que sigan
nuestras redes sociales

Ya para finalizar el trabajo a la parte superior de la izquierda y seleccionaremos Export para guardar
el trabajo.

7
En este trabajo trabajamos con los colores Gris, negro, blanco, café (colores que significan fuerza,
son formales, sofisticados y sobrios, neutrales y demuestran claridad) fueron seleccionados acorde a
lo que necesitaba nuestra empresa y sus clientes.

Wireframe Lo sepulto

8
9