rmaquetacion sitio web de "cafetereia humitas lojas"
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> <strong>de</strong> la “Cafetería<br />
<strong>humitas</strong> Express” <strong>de</strong>stinadas a la creación <strong>de</strong> contenido<br />
<strong>web</strong> tomando como referencia ejemplos <strong>de</strong> <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 <strong>de</strong> la “Cafetería Humitas Express” consta <strong>de</strong> 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 sli<strong>de</strong>rs 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 <strong>de</strong> los siguientes elementos: humas,choclo<br />
big + mayonesa y tortillas, cada uno con su respectiva <strong>de</strong>scripció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 <strong>de</strong> las humas, las instalaciones <strong>de</strong>l local que en éste<br />
caso son amplias y confortables , y los servicios <strong>de</strong> internet que dispone<br />
el local, es <strong>de</strong>cir la red “wifi” <strong>de</strong> 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 <strong>de</strong>l local y una<br />
breve <strong>de</strong>scripción <strong>de</strong> la misión y visión <strong>de</strong> 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 <strong>de</strong>l local, una sección acerca <strong>de</strong> la<br />
dirección, teléfono,correo electrónico y <strong>de</strong>más re<strong>de</strong>s sociales <strong>de</strong> “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 <strong>de</strong>l <strong>sitio</strong> <strong>web</strong>, en ésta sección contendrá los elementos<br />
tales como: “todos los <strong>de</strong>rechos reservados”, en este caso se refiere al <strong>sitio</strong><br />
<strong>web</strong> <strong>de</strong>l negocio y las re<strong>de</strong>s 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 <strong>de</strong>bemos <strong>de</strong><br />
crear y organizar las carpetas, todo esto se lo hace en el panel capas <strong>de</strong><br />
photoshop, el ór<strong>de</strong>n <strong>de</strong> las carpetas <strong>de</strong>be quedar <strong>de</strong> la siguiente<br />
manera:<br />
Encabezado<br />
contenido y<br />
pie <strong>de</strong> página.<br />
LOGO<br />
Logotipo <strong>de</strong> la “Cafetería<br />
Humitas Express”<br />
tipografía arial color <strong>de</strong><br />
relleno blanco, fondo<br />
<strong>de</strong>l logo color café<br />
Formas abstractas que<br />
<strong>de</strong>stacan <strong>de</strong>l negocio.<br />
Tipografía <strong>de</strong>l menú<br />
navegación GOCA<br />
LOGOTYP, 19 pt; color<br />
<strong>de</strong> 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 <strong>de</strong>l <strong>sitio</strong>, aquí se insertó la la tipografía <strong>de</strong>l slogan<br />
que es “century regular” 86 pt ; la tipografía mediana <strong>de</strong> 66 pt y la más<br />
pequeña <strong>de</strong> 42 pt. El olor <strong>de</strong> relleno es blanco, contiene un sli<strong>de</strong>rs <strong>de</strong><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 <strong>de</strong>l negocio , la<br />
tipografía <strong>de</strong> la palabra “productos ” es Bodoni MT regular, 50pt, color<br />
<strong>de</strong> relleno negro ; los títlos <strong>de</strong> cada uno <strong>de</strong> los platos es book antiqua<br />
regular 53 pt color <strong>de</strong> relleno blanco, la tipografía <strong>de</strong> la ( <strong>de</strong>scripción <strong>de</strong><br />
cada uno <strong>de</strong> los platos ) es sansation regular 13pt color <strong>de</strong> relleno<br />
blanco, el color <strong>de</strong> fondo <strong>de</strong> 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 <strong>de</strong> relleno blanco, así mismo en ésta sección se insertó en<br />
la parte <strong>de</strong> “servicios a domicilio ”tres rectángulos <strong>de</strong> color blanco y uno<br />
más pequeño, la tipografía <strong>de</strong> la palabra “servicios a domicilio” es sansation<br />
25 pt , con color <strong>de</strong> relleno amarillo y las tipografías que se<br />
encuentran <strong>de</strong>ntro <strong>de</strong> sus rectángulos es la “sansatión 16 pt” su color <strong>de</strong><br />
relleno es negro; el rectángulo o botón <strong>de</strong> enviar es <strong>de</strong> color rojo, se<br />
insertó una imágen <strong>de</strong>l negocio y pictogramas <strong>de</strong> “wifi”. la tipografía <strong>de</strong><br />
la palabra instalaciones y servicios <strong>de</strong> internet es la sansation regular<br />
20 pt; el fondo <strong>de</strong> é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 <strong>de</strong> relleno amarillo ,así mismo se insertó la imágen <strong>de</strong> la<br />
entrada <strong>de</strong>l local; en la palabra misión y visión se insertó la tipografía<br />
“sansation 40 pt”color <strong>de</strong> relleno naranja y en la <strong>de</strong>scripción correspondiente<br />
a cada uno <strong>de</strong> ellos se aplicó igualmente “la sansation 13 pt” <strong>de</strong><br />
relleno blanco, el color <strong>de</strong> fondo <strong>de</strong> é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 <strong>de</strong> geolocalización <strong>de</strong>l negocio; la palabra<br />
“contacto ”igualmente tiene la tipografía <strong>de</strong> Bodoni MT, 50 pt cuyo color <strong>de</strong><br />
relleno es azul, también se insertó 4 pictogramas <strong>de</strong> color blanco tales como: uno<br />
<strong>de</strong> dirección, uno <strong>de</strong> teléfono ,uno <strong>de</strong> correo y la última <strong>de</strong> facebook cada una con 2<br />
tipografía la más gran<strong>de</strong> es la “sansation regular 30 pt” color <strong>de</strong> relleno azul y la<br />
más pequeña “book antiqua regular 20 pt” cuyo color <strong>de</strong> relleno es azul a<strong>de</strong>más se<br />
insertó un rectángulo <strong>de</strong> color blanco para la palabra “sugerencias y comentarios”<br />
en la que se aplicó una fuente <strong>de</strong>nominada “book antiqua regular” , 20 pt con<br />
color <strong>de</strong> relleno negro en la palabra mencionada anteriormente y un rectángulo<br />
pequeño para el botón enviar (color <strong>de</strong>l rectángulo, naranja), tipografía sasation<br />
regular 30pt <strong>de</strong> color <strong>de</strong> relleno blanco y finalmente el color <strong>de</strong> fondo <strong>de</strong> é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 <strong>de</strong> pagina se insertó los pictogramas <strong>de</strong> las re<strong>de</strong>s sociales tales como<br />
facebook, instagram y twitter los mismos que son <strong>de</strong> color naranja , la tipografía<br />
<strong>de</strong> las palabras “todos los <strong>de</strong>rechos reservados ”es bodoni MT 14 pt y el fondo <strong>de</strong><br />
ésta sección es <strong>de</strong> 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, vi<strong>de</strong>o y texto en la página <strong>de</strong> 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” don<strong>de</strong> ya establecimos las medidas <strong>de</strong>l documento para<br />
tablet (700 ancho x 1700 <strong>de</strong> largo) y establecimos <strong>de</strong> manera muy<br />
<strong>de</strong>tallada or<strong>de</strong>nando 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 <strong>de</strong>l logo <strong>de</strong>l <strong>sitio</strong>.<br />
3.4. Elegimos la tipografía para títulos subtítulos y<br />
párrafos <strong>de</strong>l <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 />
abc<strong>de</strong>fghijklmnñopqrstuvwxyz<br />
ABCDEFGHILKLMNÑOPQRSTUVWXYZ<br />
0123456789<br />
Subtitulos :<br />
bodony<br />
abc<strong>de</strong>fghijklmnñopqrstuvwxyz<br />
ABCDEFGHILKLMNÑOPQRSTUVWXYZ<br />
0123456789<br />
PARRAFOS<br />
book antigua<br />
abc<strong>de</strong>fghijklmnñ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 />
proce<strong>de</strong>mos a reducir el peso <strong>de</strong> las fotografías <strong>de</strong>l <strong>sitio</strong>.<br />
Para que nuestro <strong>sitio</strong> no sea tan pesado y se abre <strong>de</strong><br />
6. Se inició a realizar la maqueta -<br />
ción <strong>de</strong>l <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 <strong>de</strong> cómo va a ir en el móvil, es <strong>de</strong>cir <strong>de</strong> como iría su estructura general <strong>de</strong> la página.<br />
Para ello, <strong>de</strong>beremos contar previamente con un boceto, que pue<strong>de</strong> ser una imagen psd o jpg, o simplemente<br />
un pequeño dibujo a lápiz <strong>de</strong> 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 <strong>de</strong> edición <strong>de</strong> imágenes.<br />
Es posible que cada diseñador tenga una forma diferente <strong>de</strong> llevar a<strong>de</strong>lante cada tarea, pero creo que la<br />
forma más sencilla <strong>de</strong> compren<strong>de</strong>r la forma <strong>de</strong> realizar una estructura <strong>de</strong> página <strong>web</strong> es hacerla <strong>de</strong> la mejor<br />
manera con cada procedimiento y aplicando todo lo aprendido. En primer lugar, <strong>de</strong>terminaremos los parámetros<br />
básicos que regirán todos los elementos <strong>de</strong> la página, para luego hacer la división <strong>de</strong> la página en<br />
gran<strong>de</strong>s segmentos tradicionales (hea<strong>de</strong>r, cuerpo, pie <strong>de</strong> página, etc.), antes <strong>de</strong> comenzar a darle forma a<br />
cada una <strong>de</strong> ellas<br />
Empezamos x el inicio en don<strong>de</strong> 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 <strong>de</strong> las parte <strong>de</strong> la página en el boceto ya seleccionado.<br />
Para crear nuestro wireframe o página móvil lo primero que <strong>de</strong>bemos hacer es entrar en la<br />
aplicación <strong>de</strong> Adobe Photoshop e incluir las dimensiones que queremos que tenga nuestra<br />
página tendrá una anchura <strong>de</strong> en altura 4479 por un ancho <strong>de</strong> 480píxeles. No obstante, el<br />
el que queremos reproducir nuestra página. No cabe ninguna duda <strong>de</strong> 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 <strong>de</strong>.<br />
El objetivo <strong>de</strong> 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 <strong>de</strong>l usuario.<br />
El inicio quedaría <strong>de</strong> 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 <strong>de</strong> 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 <strong>de</strong>l prototi -<br />
po así como también la maquetación <strong>de</strong>l <strong>sitio</strong><br />
<strong>web</strong> “<strong>humitas</strong> 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.vi<strong>de</strong>o2brain.com/mx/tutorial/empezan -<br />
do-por-el-prototipo-<strong>de</strong>-nuestra-maqueta-<strong>web</strong><br />
1<br />
CAFETERÍA “HUMITAS EXPRESS”