revista_Moda_shoes (1)

DISEÑO GRÁFICO Y MULTIMEDIA
CREANDO PROTOTIPO Y
MAQUETA WEB EN
PHOTOSHOP
Planifica y prepara prototipos y maquetas web
destinadas a la creación de contenido web
mediante ejemplos desitios web ya existentes.

BRIEF CREATIVO
El brieing creativo es un documento
escrito, no excesivamente
extenso, donde el cliente nos
aporta información sobre su empresa,
los objetivos que persigue, a
qué público le interesaría llegar,
cuál es su competencia, qué mensaje
quiere enviar y cualquier otra
información que pueda ayudarnos
a enfocar el proyecto correctamente.
Se suele rellenar en las primeras
reuniones con el cliente y no se
PROTOTIPO DE UNA
PÁGINA WEB
Un prototipo o mockup es una maqueta o modelo
de un diseño o dispositivo para que nos hagamos
una idea de cómo será el producto inal. Permite
tener una visión más detallada, precisa y global de
los contenidos necesarios y, obviamente, cómo
deseamos que el usuario se mueva en nuestra
página.
GRILLA
Un grid es una cuadrícula para maquetar el contenido
de tu página bajo unas guías básicas. Éstas
darán estabilidad al diseño, alineación y homogeneidad
El brieing creativo es un documento escrito, en el cual nos hemos basado siendo el
principal aporte de información para la realización adecuada de nuestra página web.
REALIZACIÓN DEL PROTOTIPO DE NUESTRA PÁGINA WEB
WIREFRAME
Es una herramienta en linea que
permite trabajar en equipo y
compartir bocetos de apps para
móviles, tabletas y también diseños
web de una forma sencilla y
cómoda, agregando incluso
acciones de clicks que permitan
demostrar el funcionamiento de
los diferentes elementos que
formen parte del diseños de
interface de tu aplicación o
diseño web.
Utilizamos la herramienta Wireframe
para realizar el prototipo visual
en los diferentes dispositivos como
monitor, tablet y móvil.
Medidas par arealizar los prototipos:
Monitor 1200 x 2000 píxeles.
Tablet 750 x 1500 píxeles
Móvil 480 x 1800 píxeles

MAQUETACIÓN DE NUESTRA PÁGINA WEB
La maquetación es la distribución de los elementos en nuestra página. Teniendo en cuenta el
encabezado, contenido y pie de página.
En Photoshop creamos un nuevo documento aplicando
las medidas de 1200 x 2000 píxeles y procedemos
a la creación de la maquetación.
MAQUETACIÓN MONITOR
ENCABEZADO
INICIO
En la parte superior ubicamos el encabezado,
este consta del logo Moda Shoes, su
contenido Inicio, Nosotros, Tienda y Contacto.do,
contenido y pie de página.
En el contenido inicio, ubicamos un pase
de imágenes, y una pequeña descripción
acerca del estilo que cada mujer se diferencia
de las demás.
NOSOTROS
En el contenido nosotros, ubicamos
imágenes en relación
a nuestra página de zapatos
describiendo lo que somos y
el producto que brindamos al
cliente.

TIENDA
En el contenido tienda, abarca imágenes en
relación a nuestra página de zapatos, es decir
modelos de zapatos que se va a vender.
En el contenido tienda Stiletos
mostramos los modelos
de los zapatos que se va a
vender. Describimos las tallas
en dondo el usuario puede
elegir su talla, el precio y el
icono de comprar.
TIENDA STILETOS
TIENDA BOCA DE PEZ
En el contenido tienda Boca de pez mostramos los
modelos de los zapatos que se va a vender. Describimos
las tallas en dondo el usuario puede elegir su
talla, el precio y el icono de comprar.

TIENDA PLATAFORMAS
En el contenido tienda Plataformas
mostramos los modelos
de los zapatos que se va a
vender. Describimos las tallas
en dondo el usuario puede
elegir su talla, el precio y el
icono de comprar.
En el contenido tienda Cuñas mostramos
los modelos de los zapatos
que se va a vender. Describimos las
tallas en dondo el usuario puede
elegir su talla, el precio y el icono de
comprar.
TIENDA CUÑAS
CONTACTO
En el contenido Contacto describimos
como prestamos
nuestro servicio en donde
puede adjuntar datos personales
y describir el mensaje que
nos quiere dar a conocer.
PIE DE PÁGINA
Pie de página contiene las redes sociales
mediante las cuales nos puede contactar
y obtener información en cuanto
concierne al producto.

MAQUETACIÓN TABLET
En Photoshop creamos un nuevo documento aplicando las medidas de 750 x 1500 píxeles y
procedemos a la creación de la maquetación.
En esta maquetacion puede variar la distribución de los elementos pero nunca podrá variar el
contenido de la misma.
ENCABEZADO
INICIO
TIENDA
NOSOTROS

TIENDA CUÑAS
TIENDA STILETOS
TIENDA BOCA DE PEZ
TIENDA PLATAFORMAS

CONTACTO
PIE DE PÁGINA

MAQUETACIÓN MÓVIL
En Photoshop creamos un nuevo documento aplicando las medidas de 480 x 1800 píxeles y
procedemos a la creación de la maquetación.
En esta maquetacion puede variar la distribución de los elementos pero nunca podrá variar el
contenido de la misma.
ENCABEZADO
INICIO
NOSOTROS
TIENDA
TIENDA CUÑAS

TIENDA STILETOS
TIENDA BOCA DE PEZ
TIENDA PLATAFORMAS

CONTACTO
PIE DE PÁGINA

CONCLUSIONES
Para la elaboración previa de nuestra página web se debe realizar un brief creativo
ya que este nos brindará información acerca de lo que va a contener dicha página.
La maquetación nos sirve para la distribución adecuada de cada elemento que va
a contener nuestra página web.

BIBLIOGRAFÍA
Mediaactive. (2014). Aprender Dreamweaver CC con 100 ejercicios prácticos.
Barcelona, España: Editorial MARCOMBO, S.A.