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
-