sitio web
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
WEB Y MULTIMEDIA<br />
CAFETERÍA<br />
HUMITAS EXPRESS<br />
INGENIERA: María Cristina Carrillo<br />
CARRERA: IV CICLO DISEÑO GRÁFICO<br />
INTEGRANTES<br />
Stalyn González<br />
Gabriel León<br />
Moises Guamán
C<br />
A<br />
F<br />
E<br />
T<br />
E<br />
R<br />
Í<br />
H<br />
U<br />
M<br />
I<br />
T<br />
A<br />
S<br />
E<br />
X<br />
P<br />
R<br />
E<br />
S<br />
S<br />
Instituto Tecnológico Superior<br />
Daniel Álvarez Burneo<br />
TEMA:<br />
DISEÑO DE PROTOTIPO<br />
Y MAQUETA WEB EN PHOTOSHOP<br />
OBJETIVO:<br />
Crear prototipos y maquetas <strong>web</strong> de la “Cafetería<br />
humitas Express” destinadas a la creación de contenido<br />
<strong>web</strong> tomando como referencia ejemplos de <strong>sitio</strong>s<br />
<strong>web</strong> ya existentes.<br />
A
PROTOTIPO PARA ESCRITORIO<br />
PROTOTIPO WEB<br />
PARA ESCRITORIO<br />
“CAFETERÍA HUMITAS EXPRESS”<br />
EL SIGUIENTE PROTOTIPO WEB PARA ESCRITORIO ESTÁ REALIZADO EN EL PRO-<br />
GRAMA DE WIREFRAMES BASÁNDOSE EN EL SISTEMA DE REJILLAS, CADA ELE-<br />
MENTO ESTÁ CONSTRUIDO A PARTIR DE CUADRADOS Y RECTÁNGULOS Y CON<br />
TIPOGRAFÍA ARIAL EN CADA UNO DE LOS ELEMENTOS A DESCRIBIR.<br />
LA ESTRUCTURA DE PÁGINA<br />
ENCABEZADO<br />
El encabezado de la “Cafetería Humitas Express” consta de las<br />
siguientes elementos.<br />
EL MENÚ DE NAVEGACIÓN DE “CAFETERÍA HUMITAS EXPRESS”<br />
LOGO<br />
CONTENIDO INICIO<br />
El menú inicio está conformado por los siguientes elementos tales<br />
como, el sliders así como también el tagline.<br />
SLIDERS<br />
TAGLINE<br />
1<br />
CAFETERÍA “HUMITAS EXPRESS”
PROTOTIPO PARA ESCRITORIO<br />
PRODUCTOS<br />
El menú productos consta de los siguientes elementos: humas,choclo<br />
big + mayonesa y tortillas, cada uno con su respectiva descripción.<br />
IMÁGEN<br />
HUMAS<br />
IMÁGEN<br />
TORTILLAS +<br />
CAFÉ<br />
IMÁGEN<br />
CHOCLO BIG +<br />
MAYONESA<br />
SERVICIOS<br />
El menú servicios está conformado por 3 apartadoss principale: servicio<br />
a domicilio de las humas, las instalaciones del local que en éste<br />
caso son amplias y confortables , y los servicios de internet que dispone<br />
el local, es decir la red “wifi” de acceso gratuito y disponible para<br />
todos los clientes.<br />
FORMULARIO<br />
DE SERVICIO A<br />
DOMICILIO<br />
ORDEN DE<br />
DIRECCIÓN<br />
TU CIUDAD<br />
IMÁGEN<br />
SERVICIOS DE<br />
WIFI<br />
BOTÓN ENVIAR<br />
IMÁGEN<br />
INSTALACIONES<br />
DEL LOCAL<br />
2<br />
CAFETERÍA “HUMITAS EXPRESS”
PROTOTIPO PARA ESCRITORIO<br />
NOSOTROS<br />
En ésta sección va ha estar conformada por la imagen del local y una<br />
breve descripción de la misión y visión de la “Cafetería Humitas<br />
Express”.<br />
IMÁGEN DEL<br />
LOCAL<br />
APARTADO DE<br />
MISIÓN Y VISIÓN<br />
CONTACTOS<br />
En el apartado contacto va ha estar estructurado por los siguientes<br />
elementos, un mapa con sistema GPS del local, una sección acerca de la<br />
dirección, teléfono,correo electrónico y demás redes sociales de “la<br />
Cafetería Humitas Express”, y por último un formulario en el que se<br />
llenarán las gerencias y comentarios realcionados con los productos y<br />
servicios que ofrece el mismo.<br />
IMÁGEN DEL<br />
MAPA GPS DEL<br />
LOCAL<br />
BOTÓN ENVIAR<br />
FORMULARIO DE<br />
SUGERENCIAS Y<br />
COMENTARIOS<br />
INFORMACIÓN DE<br />
CONTACTO DEL<br />
NEGOCIO<br />
3<br />
CAFETERÍA “HUMITAS EXPRESS”
PROTOTIPO PARA ESCRITORIO<br />
PIE DE PÁGINA<br />
Es la parte final del <strong>sitio</strong> <strong>web</strong>, en ésta sección contendrá los elementos<br />
tales como: “todos los derechos reservados”, en este caso se refiere al <strong>sitio</strong><br />
<strong>web</strong> del negocio y las redes sociales (facebook, instagram y twitter)<br />
TODOS LOS DERE-<br />
CHOS RESERVA-<br />
DOS<br />
REDES SOCIALES<br />
SISTEMA DE<br />
REJILLAS<br />
RECTÁNGULOS<br />
CUADRADOS<br />
4<br />
CAFETERÍA “HUMITAS EXPRESS”
MAQUETACIÓN WEB EN PHOTOSHOP<br />
MAQUETACIÓN WEB<br />
MAQUETACIÓN WEB<br />
EN PHOTOSHOP<br />
PARA ESCRITORIO<br />
“CAFETERÍA HUMITAS<br />
EXPRESS”<br />
LA ESTRUCTURA<br />
DE PÁGINA WEB<br />
ENCABEZADO<br />
CONTENIDO<br />
PIE DE PAGINA<br />
5<br />
CAFETERÍA “HUMITAS EXPRESS”
MAQUETACIÓN WEB EN PHOTOSHOP<br />
ENCABEZADO<br />
Para hacer la maquetación en photoshop primeramente debemos de<br />
crear y organizar las carpetas, todo esto se lo hace en el panel capas de<br />
photoshop, el órden de las carpetas debe quedar de la siguiente<br />
manera:<br />
Encabezado<br />
contenido y<br />
pie de página.<br />
LOGO<br />
Logotipo de la “Cafetería<br />
Humitas Express”<br />
tipografía arial color de<br />
relleno blanco, fondo<br />
del logo color café<br />
Formas abstractas que<br />
destacan del negocio.<br />
Tipografía del menú<br />
navegación GOCA<br />
LOGOTYP, 19 pt; color<br />
de relleno café.<br />
6<br />
CAFETERÍA “HUMITAS EXPRESS”
MAQUETACIÓN WEB EN PHOTOSHOP<br />
CONTENIDO<br />
DENTRO DE LA CARPETA CONTENIDO SE ENCUENTRAN LAS SIGUIENTES<br />
SUBCARPETAS TALES COMO: INICIO, PRODUCTOS, SERVICIOS, NOSO-<br />
TROS Y CONTACTO LAS MISMAS QUE SERVIRÁN PARA ALMACENAR LOS<br />
ARCHIVOS EN SUS RESPECTIVAS SECCIONES.<br />
MENÚ INICIO<br />
Es la página principal del <strong>sitio</strong>, aquí se insertó la la tipografía del slogan<br />
que es “century regular” 86 pt ; la tipografía mediana de 66 pt y la más<br />
pequeña de 42 pt. El olor de relleno es blanco, contiene un sliders de<br />
humas y café.<br />
7<br />
CAFETERÍA “HUMITAS EXPRESS”
MAQUETACIÓN WEB EN PHOTOSHOP<br />
MENÚ PRODUCTOS<br />
En el menú productos se insertó las fotografías reales del negocio , la<br />
tipografía de la palabra “productos ” es Bodoni MT regular, 50pt, color<br />
de relleno negro ; los títlos de cada uno de los platos es book antiqua<br />
regular 53 pt color de relleno blanco, la tipografía de la ( descripción de<br />
cada uno de los platos ) es sansation regular 13pt color de relleno<br />
blanco, el color de fondo de esta sección es naranja.<br />
8<br />
CAFETERÍA “HUMITAS EXPRESS”
MAQUETACIÓN WEB EN PHOTOSHOP<br />
MENÚ SERVICIOS<br />
la tipografía que se insertó en la palabra “servicios” es bodoni MT regular<br />
50 pt , color de relleno blanco, así mismo en ésta sección se insertó en<br />
la parte de “servicios a domicilio ”tres rectángulos de color blanco y uno<br />
más pequeño, la tipografía de la palabra “servicios a domicilio” es sansation<br />
25 pt , con color de relleno amarillo y las tipografías que se<br />
encuentran dentro de sus rectángulos es la “sansatión 16 pt” su color de<br />
relleno es negro; el rectángulo o botón de enviar es de color rojo, se<br />
insertó una imágen del negocio y pictogramas de “wifi”. la tipografía de<br />
la palabra instalaciones y servicios de internet es la sansation regular<br />
20 pt; el fondo de ésta sección es violeta pálido.<br />
9<br />
CAFETERÍA “HUMITAS EXPRESS”
MAQUETACIÓN WEB EN PHOTOSHOP<br />
MENÚ NOSOTROS<br />
la tipografía que se insertó en la palabra “nosotros” es bodoni MT regular<br />
50 pt , color de relleno amarillo ,así mismo se insertó la imágen de la<br />
entrada del local; en la palabra misión y visión se insertó la tipografía<br />
“sansation 40 pt”color de relleno naranja y en la descripción correspondiente<br />
a cada uno de ellos se aplicó igualmente “la sansation 13 pt” de<br />
relleno blanco, el color de fondo de ésta sección es violeta pálido.<br />
10<br />
CAFETERÍA “HUMITAS EXPRESS”
MAQUETACIÓN WEB EN PHOTOSHOP<br />
MENÚ CONTACTO<br />
En la sección contacto se insertó la imagen de geolocalización del negocio; la palabra<br />
“contacto ”igualmente tiene la tipografía de Bodoni MT, 50 pt cuyo color de<br />
relleno es azul, también se insertó 4 pictogramas de color blanco tales como: uno<br />
de dirección, uno de teléfono ,uno de correo y la última de facebook cada una con 2<br />
tipografía la más grande es la “sansation regular 30 pt” color de relleno azul y la<br />
más pequeña “book antiqua regular 20 pt” cuyo color de relleno es azul además se<br />
insertó un rectángulo de color blanco para la palabra “sugerencias y comentarios”<br />
en la que se aplicó una fuente denominada “book antiqua regular” , 20 pt con<br />
color de relleno negro en la palabra mencionada anteriormente y un rectángulo<br />
pequeño para el botón enviar (color del rectángulo, naranja), tipografía sasation<br />
regular 30pt de color de relleno blanco y finalmente el color de fondo de ésta sección<br />
es blanco azulado.<br />
11<br />
CAFETERÍA “HUMITAS EXPRESS”
MAQUETACIÓN WEB EN PHOTOSHOP<br />
PIE DE PÁGINA<br />
En el pie de pagina se insertó los pictogramas de las redes sociales tales como<br />
facebook, instagram y twitter los mismos que son de color naranja , la tipografía<br />
de las palabras “todos los derechos reservados ”es bodoni MT 14 pt y el fondo de<br />
ésta sección es de color violeta pálido.<br />
12<br />
CAFETERÍA “HUMITAS EXPRESS”
MAQUETACIÓN WEB EN PHOTOSHOP<br />
MAQUETACIÓN WEB<br />
PARA ESCRITORIO EN<br />
PHOTOSHOP<br />
13<br />
CAFETERÍA “HUMITAS EXPRESS”
DISEÑO WEB PARA TABLET<br />
Diseño Web para Tablet<br />
1. Realizamos nuestro boceto a mano, como queda -<br />
rían las imágenes, video y texto en la página de nuestro<br />
<strong>sitio</strong> <strong>web</strong> que estamos creando.<br />
.2. Se realizó los bocetos ya en digital en un <strong>sitio</strong> en línea “wire<br />
frame” donde ya establecimos las medidas del documento para<br />
tablet (700 ancho x 1700 de largo) y establecimos de manera muy<br />
detallada ordenando los elementos que contendrá el <strong>sitio</strong> <strong>web</strong>.<br />
14<br />
CAFETERÍA “HUMITAS EXPRESS”
DISEÑO WEB PARA TABLET<br />
Diseño Web para Tablet<br />
3. Creamos del logo del <strong>sitio</strong>.<br />
3.4. Elegimos la tipografía para títulos subtítulos y<br />
párrafos del <strong>sitio</strong> <strong>web</strong>. Así como el color que contendrá<br />
nuestro <strong>sitio</strong> <strong>web</strong>.<br />
Tipografía<br />
Goca logotype. Century Regular<br />
abcdefghijklmnñopqrstuvwxyz<br />
ABCDEFGHILKLMNÑOPQRSTUVWXYZ<br />
0123456789<br />
Subtitulos :<br />
bodony<br />
abcdefghijklmnñopqrstuvwxyz<br />
ABCDEFGHILKLMNÑOPQRSTUVWXYZ<br />
0123456789<br />
PARRAFOS<br />
book antigua<br />
abcdefghijklmnñopqrstuvwxyz<br />
ABCDEFGHILKLMNÑOPQRSTUVWXYZ<br />
0123456789<br />
Color<br />
d88d42 48424a c3c337 c23339<br />
R-216 C-0% R-72 C-77% R-195 C-30% R-194<br />
G-141 M-56% G-66 M-78% G-195 M-13% G-51<br />
B-66 Y-84% B-74 Y-60% B-55 Y-96% B-57<br />
K-0%<br />
K-25%<br />
K-0%<br />
C-0%<br />
M-95%<br />
Y-78%<br />
K-0%<br />
15<br />
CAFETERÍA “HUMITAS EXPRESS”
DISEÑO WEB PARA TABLET<br />
Diseño Web para Tablet<br />
5. Seleccionamos las imágenes que utilizaremos en<br />
nuestro <strong>sitio</strong>. Una vez ya con las fotos seleccionadas<br />
procedemos a reducir el peso de las fotografías del <strong>sitio</strong>.<br />
Para que nuestro <strong>sitio</strong> no sea tan pesado y se abre de<br />
6. Se inició a realizar la maqueta -<br />
ción del <strong>sitio</strong> <strong>web</strong> en photoshop aquí<br />
ya el <strong>sitio</strong> <strong>web</strong> queda tal y como se<br />
vería nuestra página <strong>web</strong> ya cuando le<br />
16<br />
CAFETERÍA “HUMITAS EXPRESS”
DISEÑO WEB PARA MOVIL<br />
MAQUETACIÓN DE UNA PÁGINA WEB EN UN MOVIL<br />
boceto de cómo va a ir en el móvil, es decir de como iría su estructura general de la página.<br />
Para ello, deberemos contar previamente con un boceto, que puede ser una imagen psd o jpg, o simplemente<br />
un pequeño dibujo a lápiz de cómo queremos que se vea la <strong>web</strong> una vez terminada. Lo más práctico<br />
es contar con una imagen psd o jpg que podremos realizar con cualquier programa de edición de imágenes.<br />
Es posible que cada diseñador tenga una forma diferente de llevar adelante cada tarea, pero creo que la<br />
forma más sencilla de comprender la forma de realizar una estructura de página <strong>web</strong> es hacerla de la mejor<br />
manera con cada procedimiento y aplicando todo lo aprendido. En primer lugar, determinaremos los parámetros<br />
básicos que regirán todos los elementos de la página, para luego hacer la división de la página en<br />
grandes segmentos tradicionales (header, cuerpo, pie de página, etc.), antes de comenzar a darle forma a<br />
cada una de ellas<br />
Empezamos x el inicio en donde llevara el logo y en menú hamburguesa que en este caso tiene k ir en el<br />
móvil quedando así el boceto.<br />
17<br />
CAFETERÍA “HUMITAS EXPRESS”
DISEÑO WEB PARA MOVIL<br />
De esta forma quedarían cada una de las parte de la página en el boceto ya seleccionado.<br />
Para crear nuestro wireframe o página móvil lo primero que debemos hacer es entrar en la<br />
aplicación de Adobe Photoshop e incluir las dimensiones que queremos que tenga nuestra<br />
página tendrá una anchura de en altura 4479 por un ancho de 480píxeles. No obstante, el<br />
el que queremos reproducir nuestra página. No cabe ninguna duda de que para que un<br />
dispositivos que hay en el mercado. Sin embargo, en este caso vamos a trabajar para crear<br />
un prototipo que vamos a reproducir en un móvil de.<br />
El objetivo de esta pequeña práctica, es convertir un diseño creado en Photoshop, en un<br />
diseño <strong>web</strong> usable e interactivo que responda a los movimientos del usuario.<br />
El inicio quedaría de la siguiente forma<br />
Mostrando las capas bien organizadas.<br />
18<br />
CAFETERÍA “HUMITAS EXPRESS”
DISEÑO WEB PARA MOVIL<br />
Dándonos un resultado de la siguiente manera.<br />
19<br />
CAFETERÍA “HUMITAS EXPRESS”
DISEÑO WEB PARA MÓVIL<br />
CONCLUSIÓN:<br />
se pudo ejecutar la creación tanto del prototi -<br />
po así como también la maquetación del <strong>sitio</strong><br />
<strong>web</strong> “humitas expresss”.<br />
BIBLIOGRAFÍA:<br />
-https://cristhyca.wordpress.com/2017/05/22/clase-10-co -<br />
mo-crear-prototipo-y-maqueta-en-photoshop/<br />
-https://hipertextual.com/2017/03/crear-los-mejores-prototi -<br />
pos-paginas-apps-moviles<br />
-https://www.video2brain.com/mx/tutorial/empezan -<br />
do-por-el-prototipo-de-nuestra-maqueta-<strong>web</strong><br />
1<br />
CAFETERÍA “HUMITAS EXPRESS”