Skip to main content

Guía Wireframe - Sitio Estático

Page 1

Click para ir a la página

GUÍA PARA CONSTRUCCIÓN DE WIREFRAME ESTÁTICO


HEADERS HEADER 1 • Full pantalla. • Contenido Título, texto e iconos. • Fondo Imagen o video. • Efecto Parallax. • Formulario de contacto básico.

HEADER 2 • Full pantalla. • Contenido Título, texto e iconos. • Fondo Imagen o video. • Efecto Parallax. • Formulario de contacto básico.

HEADER 3 • Full pantalla. • Contenido Título, texto. • Fondo Imagen o video. • Efecto Parallax. • Formulario para subscripción.


HEADER 4 • Full pantalla. • Contenido título, texto y video. • Fondo Imagen o video. • Efecto Parallax. • Campo para subscripción.

HEADER 5 • Full pantalla. • Contenido título, texto y botones opcionales. • Efecto Parallax. • Fondo Imagen, color o video.

HEADER 6 • Full pantalla. • Contenido título, texto y botón opcionales. • Fondo color, imagen o video. • Efecto Parallax. • Iconos

HEADER 7 • Full pantalla. • Contenido título, texto, imagen de producto y botón opcionales. • Fondo color, imagen o video. • Efecto Parallax.




HEADER 8 • Full pantalla. • Contenido título, texto, viñetas, imagen de persona y botón opcionales. • Fondo color, imagen difuminada. • Efecto Parallax.

HEADER 9 • Full pantalla. • Contenido título, texto y botón opcionales. • Fondo color, imagen o video (con superpocisión). • Efecto Parallax. • Formulario para subscripción con fondo de color.

HEADER 10 • Full pantalla. • Contenido título, texto y botones opcionales. • Fondo color, imagen o video (con superpocisión). • Efecto Parallax.

HEADER 11 • Full pantalla. • Contenido título, subtítulo, texto y botón opcionales. • Fondo color, imagen o video. • Efecto Parallax.


HEADER 12 • Full pantalla. • Contenido título, texto y botones opcionales. • Fondo color, imagen o video (con superpocisión). • Botón para reproducir video a full pantalla. • Efecto Parallax.

HEADER 13 • Full pantalla. • Contenido Título, texto e iconos. • Fondo color. • Efecto Parallax. • Formulario de contacto básico.

HEADER 14 • Full pantalla. • Contenido título, texto y video. • Fondo color. • Efecto Parallax. • Campo para subscripción.

HEADER 15 • Full pantalla. • Contenido Título, texto. • Fondo color. • Efecto Parallax. • Formulario para subscripción.




GALERÍAS GALERÍA 1 • Full panatalla • Autoplay • Contenido título, texto y botones opcionales. • Incluye bullets y botones de navegación.

GALERÍA 2 • Banner. • Autoplay • Contenido título, texto y botones opcionales. • Incluye bullets y botones de navegación.

GALERÍA 3 • Mosaico Fullpage. • Espacio entre fotos opcional. • Viñetas inferiores para cambiar de imagenes. • Preview al hacer click obre las imagenes

GALERÍA 4

• Mosaico con margen. • Espacio entre fotos opcional. • Viñetas inferiores para cambiar de imagenes. • Preview al hacer click obre las imagenes


GALERÍA 5 • Mosaico Fullpage. • Espacio entre fotos opcional. • Viñetas inferiores para cambiar de imagenes. • Preview al hacer click obre las imagenes • Opción de texto al pie de foto. • Etiquetas para filtrar categorías.

PREVIEW PREVIEW • Vista de imagen abierta en galería. • Incluye bullets y botones de navegación.


CARACTERÍSTICAS CARACT. 1 • 4 columnas. • Contenido por bloque título, texto y botones opcionales. • Fondo blanco, de color o con imagen. • Efecto flip en imagenes e información.

CARACT. 2 • 3 columnas. • Imagen staff • Contenido nombre, puesto, texto y redes sociales opcionales. • Fondo blanco, color, imagen y video.

CARACT. 3 • 3 columnas. • Imagen staff • Contenido nombre, puesto, texto sin redes sociales. • Fondo color obscuro.


CARACT. 4 • Imagen centrada producto. • Contenido Títulos, textos e iconos opcionales. • Fondo color, imagen o video.

CARACT. 5 • 4 columnas. • Iconos. • Color editable over en iconos. • Contenido título y texto. • Fondo color, imagen o video.

CARACT. 6 • 3 columnas. • Iconos. • Contenido título y texto. • Fondo color, imagen o video.

CARACT. 7 • 3 columnas. • Iconos. • Color editable over en iconos. • Contenido título y texto. • Fondo color, imagen o video.




C CARACT. 8 • 3 columnas. • Iconos. • Contenido título y texto. • Fondo color, imagen o video.

CARACT. 9 • Hasta 5 columnas de logotipos. • Título principal. • Fondo color, imagen o video. • Efecto over a color en logotipos.

CARACT. 10 • Hasta 5 columnas de logotipos. • Fondo color, imagen o video. • Efecto over a color en logotipos.

CARACT. 11 • Hasta 8 barras de progreso. • Título principal. • Fondo color, imagen o video.


CONTADORES CONTADORES 1

CONTADORES 2

CONTADORES 3

Los contadores permiten cuantificar características importantes de su negocio con una animación numérica acompañada de un ícono y texto en la parte inferior. El colo de los iconos puede ser personalizado, así como el fondo de color, o fondo de imágen. El título superior es opcional.


MEDIOS MEDIA 1

MEDIA 2

Los medios permiten resaltar una imagen o video en particular dentro del diseño del sitio web. Esta puede utilizar 1/2 pantalla para ir acompañada de una descripción que incluya título, texto y botón (Media 01 - 02). O también se puede utilizar la imagen o video a pantalla completa (Media 03-04)


MEDIA 3

MEDIA 4


CONTENIDOS PESTAÑAS 1

LINEA VERTICAL

Los bloques para contenido permiten organizar y distribuir la información de diversas formas, entre ellas; pestañas, linea de tiempo, acordeon, columnas etc.


PESTAÑAS 2

LINEA HORIZONTAL 1

LINEA HORIZONTAL 2

BLOQUE 1




BLOQUE 2

BLOQUE 3

ACORDEON 1

ACORDEON 2

BLOQUE 4


TEXTOS EN COLUMNA


TESTIMONIOS TESTIMONIOS 1 • Icono • Texto - Texto de autor. • Fondo color o imagen.

TESTIMONIOS 2 • • • •

Título principal. Texto - autor. Imágenes. Fondo color, imagen o video. • Incluye bullets de navegación.

TESTIMONIOS 3 • • • •

Icono Texto - Texto de autor. Fondo color. Imagen.


TABLAS TABLAS 1 • De 3 o 4 columnas. • Precio destacado opcional. • Botón con enlace opcional. • Caracteristicas ilimitadas. • Fondo blanco. • Título principal. • Contenido textos. • Fondo de color, imagen o video.

TABLAS 2 • De 3 o 4 columnas. • Precio destacado en circular. • Botón con enlace opcional. • Caracteristicas ilimitadas. • Fondo oscuro para resaltar. • Listado de características. • Fondo de color, imagen o video.


CONTACTO FORMULARIO 1 • Formulario para envío de correo. • Campos; Nombre, email, teléfono y mensaje.

FORMULARIO 2 • Formulario para Suscripción a base de correos. • Enlace a mailchimp.

FORMULARIO 3 • Formulario para Suscripción a base de correos. • Campos; Nombre, email y teléfono.

FORMULARIO 4 • Formulario para Suscripción a base de correos. • Enlace a mailchimp.


MAPA 1 • Mapa interactivo. • 1 ubicación. • Contenido Título y texto. • Formulario para envío de correo. • Campos; Nombre, email, asunto y teléfono.

MAPA 2 • Mapa interactivo. • 1 ubicación.


Turn static files into dynamic content formats.

Create a flipbook
Guía Wireframe - Sitio Estático by Andiseño Estudio - Issuu