sitio web

stalinmanu

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”

More magazines by this user
Similar magazines