sitio web

WEB Y MULTIMEDIA
CAFETERÍA
HUMITAS EXPRESS
INGENIERA: María Cristina Carrillo
CARRERA: IV CICLO DISEÑO GRÁFICO
INTEGRANTES
Stalyn González
Gabriel León
Moises Guamán

C
A
F
E
T
E
R
Í
H
U
M
I
T
A
S
E
X
P
R
E
S
S
Instituto Tecnológico Superior
Daniel Álvarez Burneo
TEMA:
DISEÑO DE PROTOTIPO
Y MAQUETA WEB EN PHOTOSHOP
OBJETIVO:
Crear prototipos y maquetas web de la “Cafetería
humitas Express” destinadas a la creación de contenido
web tomando como referencia ejemplos de sitios
web ya existentes.
A

PROTOTIPO PARA ESCRITORIO
PROTOTIPO WEB
PARA ESCRITORIO
“CAFETERÍA HUMITAS EXPRESS”
EL SIGUIENTE PROTOTIPO WEB PARA ESCRITORIO ESTÁ REALIZADO EN EL PRO-
GRAMA DE WIREFRAMES BASÁNDOSE EN EL SISTEMA DE REJILLAS, CADA ELE-
MENTO ESTÁ CONSTRUIDO A PARTIR DE CUADRADOS Y RECTÁNGULOS Y CON
TIPOGRAFÍA ARIAL EN CADA UNO DE LOS ELEMENTOS A DESCRIBIR.
LA ESTRUCTURA DE PÁGINA
ENCABEZADO
El encabezado de la “Cafetería Humitas Express” consta de las
siguientes elementos.
EL MENÚ DE NAVEGACIÓN DE “CAFETERÍA HUMITAS EXPRESS”
LOGO
CONTENIDO INICIO
El menú inicio está conformado por los siguientes elementos tales
como, el sliders así como también el tagline.
SLIDERS
TAGLINE
1
CAFETERÍA “HUMITAS EXPRESS”

PROTOTIPO PARA ESCRITORIO
PRODUCTOS
El menú productos consta de los siguientes elementos: humas,choclo
big + mayonesa y tortillas, cada uno con su respectiva descripción.
IMÁGEN
HUMAS
IMÁGEN
TORTILLAS +
CAFÉ
IMÁGEN
CHOCLO BIG +
MAYONESA
SERVICIOS
El menú servicios está conformado por 3 apartadoss principale: servicio
a domicilio de las humas, las instalaciones del local que en éste
caso son amplias y confortables , y los servicios de internet que dispone
el local, es decir la red “wifi” de acceso gratuito y disponible para
todos los clientes.
FORMULARIO
DE SERVICIO A
DOMICILIO
ORDEN DE
DIRECCIÓN
TU CIUDAD
IMÁGEN
SERVICIOS DE
WIFI
BOTÓN ENVIAR
IMÁGEN
INSTALACIONES
DEL LOCAL
2
CAFETERÍA “HUMITAS EXPRESS”

PROTOTIPO PARA ESCRITORIO
NOSOTROS
En ésta sección va ha estar conformada por la imagen del local y una
breve descripción de la misión y visión de la “Cafetería Humitas
Express”.
IMÁGEN DEL
LOCAL
APARTADO DE
MISIÓN Y VISIÓN
CONTACTOS
En el apartado contacto va ha estar estructurado por los siguientes
elementos, un mapa con sistema GPS del local, una sección acerca de la
dirección, teléfono,correo electrónico y demás redes sociales de “la
Cafetería Humitas Express”, y por último un formulario en el que se
llenarán las gerencias y comentarios realcionados con los productos y
servicios que ofrece el mismo.
IMÁGEN DEL
MAPA GPS DEL
LOCAL
BOTÓN ENVIAR
FORMULARIO DE
SUGERENCIAS Y
COMENTARIOS
INFORMACIÓN DE
CONTACTO DEL
NEGOCIO
3
CAFETERÍA “HUMITAS EXPRESS”

PROTOTIPO PARA ESCRITORIO
PIE DE PÁGINA
Es la parte final del sitio web, en ésta sección contendrá los elementos
tales como: “todos los derechos reservados”, en este caso se refiere al sitio
web del negocio y las redes sociales (facebook, instagram y twitter)
TODOS LOS DERE-
CHOS RESERVA-
DOS
REDES SOCIALES
SISTEMA DE
REJILLAS
RECTÁNGULOS
CUADRADOS
4
CAFETERÍA “HUMITAS EXPRESS”

MAQUETACIÓN WEB EN PHOTOSHOP
MAQUETACIÓN WEB
MAQUETACIÓN WEB
EN PHOTOSHOP
PARA ESCRITORIO
“CAFETERÍA HUMITAS
EXPRESS”
LA ESTRUCTURA
DE PÁGINA WEB
ENCABEZADO
CONTENIDO
PIE DE PAGINA
5
CAFETERÍA “HUMITAS EXPRESS”

MAQUETACIÓN WEB EN PHOTOSHOP
ENCABEZADO
Para hacer la maquetación en photoshop primeramente debemos de
crear y organizar las carpetas, todo esto se lo hace en el panel capas de
photoshop, el órden de las carpetas debe quedar de la siguiente
manera:
Encabezado
contenido y
pie de página.
LOGO
Logotipo de la “Cafetería
Humitas Express”
tipografía arial color de
relleno blanco, fondo
del logo color café
Formas abstractas que
destacan del negocio.
Tipografía del menú
navegación GOCA
LOGOTYP, 19 pt; color
de relleno café.
6
CAFETERÍA “HUMITAS EXPRESS”

MAQUETACIÓN WEB EN PHOTOSHOP
CONTENIDO
DENTRO DE LA CARPETA CONTENIDO SE ENCUENTRAN LAS SIGUIENTES
SUBCARPETAS TALES COMO: INICIO, PRODUCTOS, SERVICIOS, NOSO-
TROS Y CONTACTO LAS MISMAS QUE SERVIRÁN PARA ALMACENAR LOS
ARCHIVOS EN SUS RESPECTIVAS SECCIONES.
MENÚ INICIO
Es la página principal del sitio, aquí se insertó la la tipografía del slogan
que es “century regular” 86 pt ; la tipografía mediana de 66 pt y la más
pequeña de 42 pt. El olor de relleno es blanco, contiene un sliders de
humas y café.
7
CAFETERÍA “HUMITAS EXPRESS”

MAQUETACIÓN WEB EN PHOTOSHOP
MENÚ PRODUCTOS
En el menú productos se insertó las fotografías reales del negocio , la
tipografía de la palabra “productos ” es Bodoni MT regular, 50pt, color
de relleno negro ; los títlos de cada uno de los platos es book antiqua
regular 53 pt color de relleno blanco, la tipografía de la ( descripción de
cada uno de los platos ) es sansation regular 13pt color de relleno
blanco, el color de fondo de esta sección es naranja.
8
CAFETERÍA “HUMITAS EXPRESS”

MAQUETACIÓN WEB EN PHOTOSHOP
MENÚ SERVICIOS
la tipografía que se insertó en la palabra “servicios” es bodoni MT regular
50 pt , color de relleno blanco, así mismo en ésta sección se insertó en
la parte de “servicios a domicilio ”tres rectángulos de color blanco y uno
más pequeño, la tipografía de la palabra “servicios a domicilio” es sansation
25 pt , con color de relleno amarillo y las tipografías que se
encuentran dentro de sus rectángulos es la “sansatión 16 pt” su color de
relleno es negro; el rectángulo o botón de enviar es de color rojo, se
insertó una imágen del negocio y pictogramas de “wifi”. la tipografía de
la palabra instalaciones y servicios de internet es la sansation regular
20 pt; el fondo de ésta sección es violeta pálido.
9
CAFETERÍA “HUMITAS EXPRESS”

MAQUETACIÓN WEB EN PHOTOSHOP
MENÚ NOSOTROS
la tipografía que se insertó en la palabra “nosotros” es bodoni MT regular
50 pt , color de relleno amarillo ,así mismo se insertó la imágen de la
entrada del local; en la palabra misión y visión se insertó la tipografía
“sansation 40 pt”color de relleno naranja y en la descripción correspondiente
a cada uno de ellos se aplicó igualmente “la sansation 13 pt” de
relleno blanco, el color de fondo de ésta sección es violeta pálido.
10
CAFETERÍA “HUMITAS EXPRESS”

MAQUETACIÓN WEB EN PHOTOSHOP
MENÚ CONTACTO
En la sección contacto se insertó la imagen de geolocalización del negocio; la palabra
“contacto ”igualmente tiene la tipografía de Bodoni MT, 50 pt cuyo color de
relleno es azul, también se insertó 4 pictogramas de color blanco tales como: uno
de dirección, uno de teléfono ,uno de correo y la última de facebook cada una con 2
tipografía la más grande es la “sansation regular 30 pt” color de relleno azul y la
más pequeña “book antiqua regular 20 pt” cuyo color de relleno es azul además se
insertó un rectángulo de color blanco para la palabra “sugerencias y comentarios”
en la que se aplicó una fuente denominada “book antiqua regular” , 20 pt con
color de relleno negro en la palabra mencionada anteriormente y un rectángulo
pequeño para el botón enviar (color del rectángulo, naranja), tipografía sasation
regular 30pt de color de relleno blanco y finalmente el color de fondo de ésta sección
es blanco azulado.
11
CAFETERÍA “HUMITAS EXPRESS”

MAQUETACIÓN WEB EN PHOTOSHOP
PIE DE PÁGINA
En el pie de pagina se insertó los pictogramas de las redes sociales tales como
facebook, instagram y twitter los mismos que son de color naranja , la tipografía
de las palabras “todos los derechos reservados ”es bodoni MT 14 pt y el fondo de
ésta sección es de color violeta pálido.
12
CAFETERÍA “HUMITAS EXPRESS”

MAQUETACIÓN WEB EN PHOTOSHOP
MAQUETACIÓN WEB
PARA ESCRITORIO EN
PHOTOSHOP
13
CAFETERÍA “HUMITAS EXPRESS”

DISEÑO WEB PARA TABLET
Diseño Web para Tablet
1. Realizamos nuestro boceto a mano, como queda -
rían las imágenes, video y texto en la página de nuestro
sitio web que estamos creando.
.2. Se realizó los bocetos ya en digital en un sitio en línea “wire
frame” donde ya establecimos las medidas del documento para
tablet (700 ancho x 1700 de largo) y establecimos de manera muy
detallada ordenando los elementos que contendrá el sitio web.
14
CAFETERÍA “HUMITAS EXPRESS”

DISEÑO WEB PARA TABLET
Diseño Web para Tablet
3. Creamos del logo del sitio.
3.4. Elegimos la tipografía para títulos subtítulos y
párrafos del sitio web. Así como el color que contendrá
nuestro sitio web.
Tipografía
Goca logotype. Century Regular
abcdefghijklmnñopqrstuvwxyz
ABCDEFGHILKLMNÑOPQRSTUVWXYZ
0123456789
Subtitulos :
bodony
abcdefghijklmnñopqrstuvwxyz
ABCDEFGHILKLMNÑOPQRSTUVWXYZ
0123456789
PARRAFOS
book antigua
abcdefghijklmnñopqrstuvwxyz
ABCDEFGHILKLMNÑOPQRSTUVWXYZ
0123456789
Color
d88d42 48424a c3c337 c23339
R-216 C-0% R-72 C-77% R-195 C-30% R-194
G-141 M-56% G-66 M-78% G-195 M-13% G-51
B-66 Y-84% B-74 Y-60% B-55 Y-96% B-57
K-0%
K-25%
K-0%
C-0%
M-95%
Y-78%
K-0%
15
CAFETERÍA “HUMITAS EXPRESS”

DISEÑO WEB PARA TABLET
Diseño Web para Tablet
5. Seleccionamos las imágenes que utilizaremos en
nuestro sitio. Una vez ya con las fotos seleccionadas
procedemos a reducir el peso de las fotografías del sitio.
Para que nuestro sitio no sea tan pesado y se abre de
6. Se inició a realizar la maqueta -
ción del sitio web en photoshop aquí
ya el sitio web queda tal y como se
vería nuestra página web ya cuando le
16
CAFETERÍA “HUMITAS EXPRESS”

DISEÑO WEB PARA MOVIL
MAQUETACIÓN DE UNA PÁGINA WEB EN UN MOVIL
boceto de cómo va a ir en el móvil, es decir de como iría su estructura general de la página.
Para ello, deberemos contar previamente con un boceto, que puede ser una imagen psd o jpg, o simplemente
un pequeño dibujo a lápiz de cómo queremos que se vea la web una vez terminada. Lo más práctico
es contar con una imagen psd o jpg que podremos realizar con cualquier programa de edición de imágenes.
Es posible que cada diseñador tenga una forma diferente de llevar adelante cada tarea, pero creo que la
forma más sencilla de comprender la forma de realizar una estructura de página web es hacerla de la mejor
manera con cada procedimiento y aplicando todo lo aprendido. En primer lugar, determinaremos los parámetros
básicos que regirán todos los elementos de la página, para luego hacer la división de la página en
grandes segmentos tradicionales (header, cuerpo, pie de página, etc.), antes de comenzar a darle forma a
cada una de ellas
Empezamos x el inicio en donde llevara el logo y en menú hamburguesa que en este caso tiene k ir en el
móvil quedando así el boceto.
17
CAFETERÍA “HUMITAS EXPRESS”

DISEÑO WEB PARA MOVIL
De esta forma quedarían cada una de las parte de la página en el boceto ya seleccionado.
Para crear nuestro wireframe o página móvil lo primero que debemos hacer es entrar en la
aplicación de Adobe Photoshop e incluir las dimensiones que queremos que tenga nuestra
página tendrá una anchura de en altura 4479 por un ancho de 480píxeles. No obstante, el
el que queremos reproducir nuestra página. No cabe ninguna duda de que para que un
dispositivos que hay en el mercado. Sin embargo, en este caso vamos a trabajar para crear
un prototipo que vamos a reproducir en un móvil de.
El objetivo de esta pequeña práctica, es convertir un diseño creado en Photoshop, en un
diseño web usable e interactivo que responda a los movimientos del usuario.
El inicio quedaría de la siguiente forma
Mostrando las capas bien organizadas.
18
CAFETERÍA “HUMITAS EXPRESS”

DISEÑO WEB PARA MOVIL
Dándonos un resultado de la siguiente manera.
19
CAFETERÍA “HUMITAS EXPRESS”

DISEÑO WEB PARA MÓVIL
CONCLUSIÓN:
se pudo ejecutar la creación tanto del prototi -
po así como también la maquetación del sitio
web “humitas expresss”.
BIBLIOGRAFÍA:
-https://cristhyca.wordpress.com/2017/05/22/clase-10-co -
mo-crear-prototipo-y-maqueta-en-photoshop/
-https://hipertextual.com/2017/03/crear-los-mejores-prototi -
pos-paginas-apps-moviles
-https://www.video2brain.com/mx/tutorial/empezan -
do-por-el-prototipo-de-nuestra-maqueta-web
1
CAFETERÍA “HUMITAS EXPRESS”