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
HUMITAS EXPRESS
CAFETERÍA
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.
PROTOTIPO PARA ESCRITORIO
PROTOTIPO WEB PARA ESCRITORIO
“CAFETERÍA HUMITAS EXPRESS” EL SIGUIENTE PROTOTIPO WEB PARA ESCRITORIO ESTÁ REALIZADO EN EL PROGRAMA DE WIREFRAMES BASÁNDOSE EN EL SISTEMA DE REJILLAS, CADA ELEMENTO 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 TORTILLAS + CAFÉ
IMÁGEN HUMAS
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
IMÁGEN SERVICIOS DE WIFI
DIRECCIÓN TU CIUDAD
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.
INFORMACIÓN DE CONTACTO DEL NEGOCIO
IMÁGEN DEL MAPA GPS DEL LOCAL BOTÓN ENVIAR FORMULARIO DE SUGERENCIAS Y COMENTARIOS
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)
REDES SOCIALES
TODOS LOS DERECHOS RESERVADOS
SISTEMA DE REJILLAS
RECTÁNGULOS
CUADRADOS
4
CAFETERÍA “HUMITAS EXPRESS”
MAQUETACIÓN WEB EN PHOTOSHOP
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”
Formas abstractas que destacan del negocio.
tipografía arial color de relleno blanco, fondo del logo color café
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, NOSOTROS 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
R-216 C-0% G-141 M-56% B-66 Y-84% K-0%
15
48424a
R-72 G-66 B-74
C-77% M-78% Y-60% K-25%
c3c337
R-195 C-30% G-195 M-13% B-55 Y-96% K-0%
c23339
R-194 C-0% G-51 M-95% B-57 Y-78% K-0%
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://w w w.video2brain.com/mx/tutorial/empezan do-por-el-prototipo-de-nuestra-maqueta-web
1
CAFETERÍA “HUMITAS EXPRESS”