Ficha 2 Gestión de Sistemas de Laboratorio de Integración 1:

Información Diseño Web

Laboratorio de
Integración 1: Diseño Web
Ficha de seguimiento N°2: Ficha construcción del prototipo web

Indicador de logro N°2

Diseña un prototipo de páginas web de acuerdo con las

buenas
1 prácticas de diseño
Ficha 2 Gestión de Sistemas de Laboratorio de Integración 1:
Información Diseño Web

Contenido
1. Objetivo:............................................................................................................................3
2. Pasos:................................................................................................................................3
3. Instrumentos / herramientas:.........................................................................................3
4. Desarrollo..........................................................................................................................3

2
Ficha 2 Gestión de Sistemas de Laboratorio de Integración 1:
Información Diseño Web

Ficha de seguimiento #2: Ficha

construcción del prototipo Web
En esta ficha encontrarás los pasos para construir/trabajar esta
parte de tu proyecto. Tienes un formato o plantilla para completar
los datos y resultados de la actividad de esta ficha. Tu profesor/a
revisará lo avanzado, y te brindará una retroalimentación.

1. Objetivo:

Ejecuta los pasos para la construcción de un prototipo de un sitio web.

2. Pasos:

 Paso 1: gestión de colores y tipografía.

 Paso 2: identificación de formas y estilos de páginas web.
 Paso 3: diseño de un prototipo web básico con Figma.
 Paso 4: diseño avanzado de prototipos con Figma.

3. Instrumentos / herramientas:

Encuesta de recopilación de información, herramienta Figma.

4. Desarrollo

Para obtener los datos necesarios iniciaremos con una:

 Encuesta de recopilación de información:

a) ¿Qué información considera que debe de aparecer en la página web?

b) ¿Cuenta con logo su empresa?
c) ¿Tiene colores corporativos? Por ejemplo, Roky’s tiene el amarillo y
verde.

3
Ficha 2 Gestión de Sistemas de Laboratorio de Integración 1:
Información Diseño Web

d) ¿Qué tipo de letra y color irá en los títulos, subtítulos, contenido, etc.?
e) ¿Qué áreas irán en la página web?
f) ¿Será una página dinámica o estática? Si es dinámica, ¿qué áreas
tendrán animaciones y/o efectos?
g) ¿Tendrá un carrusel de imágenes? Si es así, ¿cuántas y cuáles
imágenes irán?
h) ¿Qué imágenes y/o videos irán en cada página?
i) ¿Tendrá redes sociales en su página? Si es así, ¿dónde se ubicará?
j) ¿Tendrá Maps de la ubicación de su negocio? ¿dónde irá?
k) ¿Qué campos irán en su formulario de contacto?
l) ¿Tiene un hosting?

 Definición de los elementos del sitio web

o Paleta de colores
 Colores principales
 Colores secundarios
 Colores neutros
 Colores para fondo
 Colores para enlaces
 Colores para botones

o Tipografía
 Títulos
 Subtítulos
 Párrafos
 Enlaces

o Estilos
 Formas
 Botones
 Imagen
 Iconografía

Teniendo definido los elementos del sitio web trasladaremos esa información al
software de prototipado Figma, en el cual se completará la siguiente información.

4
Ficha 2 Gestión de Sistemas de Laboratorio de Integración 1:
Información Diseño Web

 Definiendo los frame en Figma

Para desktop HD

Frame:

Número de columnas:

Ancho de columnas:

Para desktop

Frame:

Número de columnas:

Ancho de columnas:

Para Tablet

Frame:

Número de columnas:

Ancho de columnas:

Para Mobile

Frame:

Número de columnas:

Ancho de columnas:

 Creación de componentes en Figma

a) Header

<<Iconos, logo o texto a mostrar en el encabezado de la página>>

5
Ficha 2 Gestión de Sistemas de Laboratorio de Integración 1:
Información Diseño Web

b) Banner

<<Imagen o conjunto de imágenes resaltantes a mostrar en la página>>

c) Menu de navegación

<<Navegación principal de la página>>

d) Enlaces de navegación

<<Enlaces que direccionan a contenidos dentro o fuera de la página>>

e) Barras o iconos de búsqueda

<<Para encontrar algún contenido de la página>>

f) Card

<<Tarjetas que incluyen imagen, titulo y párrafo para presentar información

de productos o servicios de la página>>

g) Tag

<<Etiquetas para mostrar alguna promoción>>

h) Elementos de formulario

<<De acuerdo a lo que se use en los formularios incorporados>>

o Inputs
o Buttons
o Options
o Otros

i) Footer

<<Contenido a mostrar en el pie de la página>>

 Prototipo en figma

a) Prototipo para desktop HD

6
Ficha 2 Gestión de Sistemas de Laboratorio de Integración 1:
Información Diseño Web

Página # 1: <<nombre de la página>>

Página #2: <<nombre de la página>>

Página #3: <<nombre de la página>>

7
Ficha 2 Gestión de Sistemas de Laboratorio de Integración 1:
Información Diseño Web

Página #4: <<nombre de la página>>

b) Prototipo para desktop

Página # 1: <<nombre de la página>>

Página #2: <<nombre de la página>>

8
Ficha 2 Gestión de Sistemas de Laboratorio de Integración 1:
Información Diseño Web

Página #3: <<nombre de la página>>

Página #4: <<nombre de la página>>

c) Prototipo para Tablet

Página # 1: <<nombre de la página>>

9
Ficha 2 Gestión de Sistemas de Laboratorio de Integración 1:
Información Diseño Web

Página #2: <<nombre de la página>>

Página #3: <<nombre de la página>>

Página #4: <<nombre de la página>>

d) Prototipo para mobile

10
Ficha 2 Gestión de Sistemas de Laboratorio de Integración 1:
Información Diseño Web

Página # 1: <<nombre de la página>>

Página #2: <<nombre de la página>>

Página #3: <<nombre de la página>>

11
Ficha 2 Gestión de Sistemas de Laboratorio de Integración 1:
Información Diseño Web

Página #4: <<nombre de la página>>

12