Diseño de una página web

Inst ituto T ec no lóg ic o Sup eri or “Da n iel Á lva re z Bu rn e o”

Letty Becerra

Dayanara Valle

Diseño de una PÁGINA WEB

OBJETIVO PlaniďŹ ca y prepara prototipos y maquetas web destinadas a la creaciĂłn de contenido web mediante ejemplos de sitios web ya existentes.

Web y Multimedia

4-11 BRIEF

12

TipografĂ­a y color

15

Wireframing

13-14 Mapa de sitio web

15-23 Wireframing

24

ConclusiĂłn

BRIEF

¿QUÉ ES UN

BRIEF?

U

Herramienta que sirve para conocer e identificar diferentes aspectos relacionados con la empresa-cliente.

n brief es un documento usado por agencias y creativos para poder llevar a cabo un proyecto requerido por un cliente. Lo podemos resumir como el informe estratégico inicial en el que son plasmados todos los aspectos técnicos y acciones a abordar.

¿Qué debe incluir el briefing?

Objetivo debe responder a la pregunta ‘¿para qué?

4

Target

Descripción Describir a la perfección el proyecto, con TODOS los aspectos técnicos que implica.

debe responder a la pregunta ‘¿para quién?

Palabras clave

Timing

A nivel usuario: Enfoque 100% de marca a nivel de comunicación.

A nivel SEO: Enfoque 100% posicionamiento de marca en Internet.

Enfocar este apartado por fases, para simplificar su previsión y minimizar posibles errores.

BRIEF

Nuestro FRIEF

Nombre de la empresa: Tío Sam Pizzeria Dirección: Segundo cueva celi y Prl. 24 de mayo Ciudad/País: Loja/Ecuador Nombre de la persona de contacto: Dayanara Estefania Valle Paguay Cargo de la persona de contacto: Propietario/Gerente Teléfonos de contacto: 2584052 0967657270 Trabajo: Chef E-mail de contacto: estefania.10valle11@g-

5

BRIEF

1a. ¿A qué categoría de negocio pertenece la empresa?

Restaurant (pizzeria) 1b- ¿Cuáles son las particularidades de esta categoría?

Es una cocina creativa, no sólo ya por los ingredientes, sino las salsas que bañan los platos de una forma que el el paladar está a gusto.

1c- ¿Quiénes son los líderes del sector?

Artesanal Marisquería

1d- ¿Qué los hace diferentes?

A difencia de la competencia del sector (Artesanal y Marisqueria). La pizza satisface lo necesario, se lo toma como un comida entredía

6

BRIEF

2a- Describa cuál es el problema de la empresa/producto

Negocio con 3 meses de apertura y sin una imagen quien respalde su crecimiento

2b- ¿Cuáles son las virtudes?

El lugar es acogedor con una sensación hogareña y en cuanto a 'ingredientes' frescos y elaboración artesanal.

2c- ¿Cuál es el diferencial frente a otras marcas/productos?

La mayoría de los ingredientes son de preparación casera sin ningún tipo de masa es adquirida de un supermercado.

7

BRIEF

3a- ¿Cuando fue creada? Escriba una breve historia de la misma

La pizzería se fomentó hace tres meses, cuyo ideal es emprender en familia ya que cada integrante respalda conocimiento de preparación de la misma, desde la figura paterna tuvo gran influencia ya que ella era reconocida en el entorno de amistades por preparar pizzas caseras así como hijos/as se decido 3b- ¿Cuenta con una imagen de marca desarrollada?

NO 3c- ¿Qué se busca transmitir con el nombre y el logo que la representa?

En un lugar confiable, acogedor y familiar 3d- ¿Cuentan con un manual de marca? (tipografías, colores, etc.)

NO

8

BRIEF

4a- ¿Hacen publicidad?

NO 4b- ¿En qué medios?

NO Este aspecto puede llegar condicionar a 4c-a¿Tienen asignado un presupuesto los usuarios y provocar un impacto visua anual para publicidad? ¿De qué rango? diferente según el color escogido, influyendo incluso en el tiempo que una persona permanece dentro de nuestro sitio.

25 dólares mensuales

4d- ¿Qué mensaje buscan transmitir a través de la web?

Hacerles caer en cuenta a los clientes que es un lugar que tienen que ir a probar su comida por lo deliciosa que se ve 4e- ¿Cuál es el target? (sexo, edad, NSE, perfil, etc.)…..?

ADOLESCENTES 10 - 16 años JOVENES 17 - 30 años Adultos 31 -50 años La tipografía4frefleja personalidad de una web, poren ¿Yaladesarrollaron acciones ello, es fundamental el tamaño la internet?cuidar ¿Cuál fue el fuente, resultado? combinación de colores, la alineación y justificación para tener claro lo que se desea transmitir a los NO usuarios.

9

BRIEF

5a- ¿Tienen un presupuesto definido para internet? ¿Cuál es?

5f- ¿Cada cuanto se actualiza?

1000 $

NO

5b- ¿Cuál es el objetivo de su página web?

5g- En caso de no tener una página, ¿Cuál es el motivo?

Brindar información de ubicación, contactos y los platos que se prepara con el precio 5c- ¿Tienen actualmente presencia online?

NO 5d- ¿Con qué resultado?

Aquellos que ya forman una parte de la clientela se pueden informar constantemente y mejorara la calidad de información, esto ayuda a ganar reconcomiendo a nivel local, significando un incremento 5h- ¿Hay una fecha de entrega/dead line para el desarrollo?

5 meses

NO 5e- ¿Cuándo se desarrolló el sitio?

NO

Muli

10

BRIEF

5i- ¿Podría mencionar algunos sitios que considere como referentes de calidad a tener en cuenta? Nacional o internacional

Nombre PIZZERÍA EL HORNERO

http://www.pizzeriaelhornero.com.ec/ Nombre: PIZZAS SUPREMA

https://www.pizzahut.com.ec/pizza/ ¿Por qué?

La página muestra imágenes interactivas

¿Por qué?

Es una de las páginas que más me gusta su esquema está bien formado con gran creatividad y es muy intuitiva al momento de buscar

Nombre LA PIZZERÍA

Nombre: FORNO DI FANGOt

https://www.fornodifango.com/ ¿Por qué?

Fondo de la página simple y agrad-

http://lapizzeriaweb.com/ La calidad de información contenida en la página El aspecto visual da una sensación de confianza La disposición de los elementos están claros Muli

11

Tipografía y color

La Pizzeria

TÍO SAM

12

#C54123 #BB9978 #3E9B50 #C9CBD5

La tipografía es un aspecto imprescindible que el diseñador web no debe pasar por alto. La letra es un elemento clave y, según como se presente, pude cambiar su significado, ya que cada tipo de letra, forma o color representa un estilo y lenguaje diferente.

La tipografía refleja la personalidad de una web, por ello, es fundamental cuidar el tamaño fuente, la combinación de colores, la alineación y justificación para tener claro lo que se desea transmitir a los usuarios.

Tipografía

COLORES

Este aspecto puede llegar a condicionar a los usuarios y provocar un impacto visual diferente según el color escogido, influyendo incluso en el tiempo que una persona permanece dentro de nuestro sitio.

Si hemos conseguido captar l atención del consumidor, éste puede tener una percepción de nuestra empresa muy positiva y sentirse a gusto navegando por la página..

Encabezado

Montserrat ABC abc 123

Título

Libre baskerville ABC abc 123

Parrafos

Muli ABC abc 123

Mapa de sitio web

¿Qué es un Mapa de sitio?

Un Sitemap o mapa del sitio Web, es un listado de URL’s que contiene todas las páginas de una Web que quieres que sean indexadas. Es decir, una especie de índice de una web, que por lo general, es diseñado para hacer accesible una web a los robots de búsqueda.

¿Para qué sirve?

Gracias al Sitemap podemos dar información a los motores de búsqueda sobre la jerarquía de nuestra Web, sobre las actualizaciones que hayamos realizado, las páginas que queremos que los buscadores indexen, y por último, sobre la prioridad que los buscadores deben asignar a cada página.

MAPA DE SITIO web #C9CBD5

13

Mapa de sitio web

Mapa de sitio web

INICIO La pizzeria Misión Visión Ensaladas Pollo, milanesa, carne Entradas, pastas Sanduches Bebidas Postres

NOSOTROS

MENÚ PIZZAS

Pizzas Hawaiana Mexicano Queso Champiñon Vegetariana

#C9CBD5

CONTACTOS

GALERÍA

NUESTRO MAPA DE SITIO web 14

Wireframing

Wireframing En la fase de wireframing ya se ha definido una estructura general, y se entrega una maqueta de mĂĄs fidelidad. Suele servir para validar y confirmar aspectos que ya se han hablado previamente, por lo que no deberĂ­a ser necesario realizar grandes cambios aquĂ­.

#C9CBD5

15

Wireframing

MONITOR

16

Wireframing

En la parte superior del wireflew encontramos el logotipo de la Pizzeria en los lados los botones Inicio, Nosotros, MenĂş, Pizzas,Galeria, y Contactos.

En el siguiente parametro ubicamos una fotografia de las pizzas que ofrece Tio Sam Pizzeria para asi complementar el prototipo

En el boton Nosotros ubicamos rectangulos , en el primero describimos lo que es la pizzeria poniendo text falso o Lorem Ipsum y un cuadrado en el cual ubicaremos un icono que se asemeje de lo que estamos refiriendonos.

En el segundo y tercer rectangulos describimos la mision y vision de la pizzeria ubicando tambien iconos.

En el boton Menu ubicamos 6 cuadrados en los que ubicarems imagenes de los diferentes platos que ofrece la pizzeria y ubicamos el nombre y el precio de los mismos usando texto falso.

17

Wireframing En el boton Pizzas de igual manera se fue ubicando 6 cuadrados en los cuales ubicaremos imagenes de las pizzas ubicando el nombre y precio de las mismas usando texto falso

En el boton galeria realizamos un rectangulo y tres circulos en el que ubicaremos variedad de fotografias

18

En el boton contactos ubicams los siguitentes parametros Nombre, Telefono, E-mail y conclusiones, en el lado derecho isimos un cuadrado en el que ubicaremos una imagen del local.

Como ultimo punto ubicamos el pie de pรกgina en el que encontramos las redes sociales, un boton con nombre Volver arriba y los telefonos del local y la direcciรณn.

Wireframing Wireframing

MOVIL

19

Wireframing En el prototipo de móvil encontramos en la parte superior el logo de la pizzería y un solo botón que tendrá los diferentes contenidos como lo son Nosotros, Menú, Pizzas, y contactos.

20

En el contenido Nosotros ubicamos descripción de la pizzería, misión y visión , ubicando su icono correspondiente a cada parámetro uno debajo de otro

Wireframing

Asi mismo en el contenido MenĂş y Pizzas, a las imĂĄgenes las ubicamos una debajo con su respectivo texto

21

Wireframing En el contenido galería ubicamos variedad de fotografías ubicando un rectángulo y tres círculos para darle la forma de un slider.

En el contenido contacto ubicamos los parámetros Nombre, teléfono, e-mail y comentario pero quitamos la imagen del local ya que no seria necesaria para este prototipo

Por ultimo tenemos el pie de pagina en el cual encontramos las redes sociales, los teléfonos y la dirección del local y un botón llamado Volver arriba.

22

Wireframing En el contenido galería ubicamos variedad de fotografías ubicando un rectángulo y tres círculos para darle la forma de un slider.

En el contenido contacto ubicamos los parámetros Nombre, teléfono, e-mail y comentario pero quitamos la imagen del local ya que no seria necesaria para este prototipo

Por ultimo tenemos el pie de pagina en el cual encontramos las redes sociales, los teléfonos y la dirección del local y un botón llamado Volver arriba.

22

Conclusión La maquetación web en dispositivos permite reducir el tiempo de desarrollo, evita los contenidos duplicados, y aumenta la vitalidad de los contenidos, permitiendo compartirlos de una forma mucho más rápida y natural.

Se basa en proporcionar a todos los usuarios de una web, los mismos contenidos y una experiencia de usuario lo más similar posible, frente a otras aproxima ciones al desarrollo web móvil como la creación de apps, el cambio de dominio o webs servidas dinámica mente en función del dispositivo. como una de las mejores prácticas hoy en día en diseño web.

Bibligrafía Bonner CH. Brief página web. Recuperado [04 de abril de 2017: 14:00 am] de: https://es.slideshare.net/christian.bonner/brief-paginaswebgeneral?from_action=save Tuero, L. BRIEFING WEB: LO QUE NECESITAS TENER CLARO PARA EL DESARROLLO DE TU WEB. España. Recuperado [ 04 de abril de 2017: 17:00 am] de: https://colorvivo.com/briefing-web-lo-que-necesitas-tener-claro-para-eldesarrollo-de-tu-web/ h t t p : / / w w w . g r a fi s c o p i o . c o m / e l - b r i e f - c r e a t i vo-que-es-y-para-que-sirve/ https://www.vgsystems.es/blog/diseno-web/la-importancia-de-la-tipografia-en-el-diseno-web/ http://www.marketalia.com/la-importancia-del-color-en-el-diseno-web/ https://webdesdecero.com/wireframes-que-son-y-como-crearlos/

23

-