Creación de Wireframe para “Te envió”

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
Introduccion
En el siguiente informe les presentare paso a paso de Wireframes usando el softwere PENCIL para la empresa “Te
envio”
Pencil es una herramienta digital para la creacion de animacion 2d, mapa de bits y graficos vectoriales

2
Partiremos abriendo 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”.

Colocare el nombre del trabajo “Wireframe de Te Envio” y las medidas “1200px x 2635px” lo siguiente fue seleccionar el
boton “Update” para seguir con nuestro trabajo.

3
Para poder agregar formas y textos nos dirigimos al costado del software y seleccionamos “Shapes” de hay se desplegará
las herramientas que podamos usar, para poder usarlas tenemos que arrastrarla y soltarla en la plantilla.

Arrastraremos un rectángulo de 1200px x 300px seleccionaremos el color de relleno blanco y el margen de color
negro(con todos los rectángulos que usemos tendrán el mismo relleno y contorno) también le agregaremos un texto
“Header (encabezado)”.

Para continuar agregare otro rectángulo de 1200px x 400px y haremos lo mismo que el anterior (relleno y contorno)
también le agregaremos un texto “Slider de imágenes (Carrusel de imágenes)”.

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

Para seguir pondremos tres triángulos de 400px x 550 al cual en cada uno pondremos otro rectángulo de tamaño 380px
x 350px (en esto irán fotos de las sucursales de la empresa) luego de esto le agregaremos una línea y pondremos el
titulo (en este caso será la ubicación de las sucursales) debajo de la línea ira unas breves referencias de la ubicaciones y
descripciones de estas.

El siguiente paso es agregar otro rectángulo de tamaño de 1200px x 320px en el cual agregaremos otros dos rectángulos
uno de 200px x 300px (Banner animado) y otro de 800px x300(Video), en la parte izquierda agregaremos h1 “título
video” y debajo de este pondré “texto descriptivo del video de 6 a 9 líneas”

5
El siguiente paso es hacer dos triángulos uno de 400px x 600px que es para poner el formulario de contacto de los
clientes y el siguiente que es del tamaño 800px x 600px que es para el Google maps (en el cual saldrán las ubicaciones
de las sucursales en las diferentes partes del país)

Luego agregare otro rectángulo de tamaño 1200px x 150px en el cual ira “Banner animado” para la penúltima parte de
la pagina

Ya para terminar la pagina agregaremos otro triangulo de tamaño 1200px x 300px en el cual ira el footer de la página

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

6
 Wireframe Te Envió