Evidencias web

2013 | June v.1 – UVM - Module G4 Virtual Image

TU9

• Caso de estudio local – Sección Amarilla

© Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

1

2013 | June v.1 – UVM - Module G4 Virtual Image

Video promocional 2013 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

2

TU9

• Sección Amarilla, sus inicios • Anuncios en Directorios, S.A. de C.V. tiene sus orígenes en 1882, cuando se creó la Compañía Telefónica Mexicana, en sociedad con la Western Electric Telephone Company.

• Nueve años después, en noviembre de 1891, apareció la Lista No. 1 de suscriptores de la Compañía Telefónica Mexicana, a la que en 1897 se le agregó la primera sección clasificada de anunciantes, que pronto conformaría al primer directorio.

• Dicho directorio fue el primero de la búsqueda referenciada en México y, además, es el antecedente de lo que hoy en día es Sección Amarilla.

•

En 1946, al inicio de la Revolución Industrial en México, se fusionó la Compañía Telefónica y Telegráfica Mexicana con Ericsson, para crear una nueva empresa: Teléfonos de México, S.A. (TELMEX), que comenzó operaciones el día 1 de enero de 1948.

•

La sección amarilla surge históricamente como un medio de comunicación que vincula al anunciante con el consumidor.

© Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

3

• Sección Amarilla en los años 90 • Con la creación de Telmex, Sección Amarilla se convirtió en una organización subsidiaria de esta nueva compañía y se constituyó como la empresa líder en directorios telefónicos encargada de su comercialización, edición, publicación y distribución, en todo el país.

• En 1991, Grupo Carso adquirió a Telmex, brindando un rumbo modernizador a Sección Amarilla que dio inicio con fuertes inversiones destinadas a la adquisición de software diseñado exclusivamente para la producción de directorios, así como a la capacitación del personal a cargo de su operación y mantenimiento.

•

A partir 1994 Sección Amarilla ha ido incorporando una infinidad de cambios, siempre pensando en el beneficio de los consumidores, como los índices y clasificaciones en el idioma inglés, una guía médica, la sección blanca de teléfonos residenciales, cupones de descuentos.

© Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

4

• Sección Amarilla a partir del 2000 • En 2008, Sección Amarilla formó parte de Grupo Telmex Internacional.

• Todos estos cambios se tradujeron en mejoras sustanciales en la estructura y los sistemas de trabajo de Sección Amarilla, que actualmente cuenta con la mejor tecnología de búsqueda en todos sus productos.

•

En sus inicios apenas era un libro de consulta, que con el paso del tiempo se convirtió en un medio de referencia que actualmente responde a las demandas de consumidores a través de distintas plataformas impresas, digitales y móviles.

• Desde el 2010, Sección Amarilla forma parte del Grupo América Móvil Internacional

© Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

5

2013 | June v.1 – UVM - Module G4 Virtual Image

Imagen Gráfica hasta el año 2012 • La imagen gráfica de la Sección Amarilla se mantuvo por muchos años.

• La empresa fue representada por un libro abierto, haciendo referencia al directorio, en color amarillo, dando a entender de manera gráfica su producto.

• El uso de tipografía siempre fue condensada y Sanserif; su rasgo característico fue el mismo gráfico del libro aplicado en la letra “o” creando de esta manera el emblema básico de la empresa. © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

6

• Sección Amarilla y la tecnología • En el año 2000, con el inicio del nuevo siglo, Sección Amarilla incursionó en el mundo digital, al lanzar su portal de internet: www.seccionamarilla.com, proporcionando a los usuarios una nueva opción de consulta y dirección de compras en la web.

• Los años 2005, 2007, 2010 y 2011 vieron nacer a los nuevos productos de Sección amarilla: 25800, Sección Amarilla Mobile, Menumanía y Decompras.com.

•

En el 2012, se incorporó un nuevo servicio de tracking lines para llamadas sin costo, Códigos QR, entre otras novedades.

•

Considerando el avance tecnológico, Sección Amarilla se ha preocupado en mantener vigente tanto su sitio web como sus aplicaciones móviles.

© Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

7

• Desarrollo Web • Desde el año 2000 en el que se presentó el sitio web www.seccionamarilla.com, se han lanzado una serie de plataformas de actualización que resuelven problemáticas presentadas por la arquitectura digital de la versión anterior.

• A la fecha se han presentado alrededor de 13 diseños distintos de la plataforma, en los cuales no están incluidos los diseños para meses especiales como Septiembre o Diciembre.

•

En el 2000 se lanza oficialmente el sitio web en una plataforma confusa para el usuario y carente de arquitectura digital.

•

Durante el 2005 y 2006, se presentaron dos páginas distintas por año respondiendo a algunos defectos en la interacción.

•

En el 2007 fue la primera vez que se presento una organización gráfica correspondiente a la imagen corporativa de la empresa

•

En el 2008 se presenta el primer logotipo para la página dándole un carácter especifico al sitio.

© Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

8

2013 | June v.1 – UVM - Module G4 Virtual Image

TU9

• Análisis del sitio web año 2000

© Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

9

Primera interfaz de pågina de internet / Home - 2000 Š Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

10

La información se presenta sin una estructura clara, es lineal y sin links de regreso por lo que es cansada y poco funcional la búsqueda de datos específicos.

El menú principal no muestra ningún acceso a información de los anunciantes, por lo que no funciona como directorio digital

A través del color amarillo se trató de mantener una relación directa con el medio impreso.

Primera interfaz de página de internet / Home - 2000 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

11

La lista de datos se extiende por varias páginas y se presenta como tabla.

El menú principal es funcional al no desplazarse con el movimiento general de la página, permitiendo regresar al inicio presionando el botón “home”

No existen botones de control, ni barras de desplazamiento.

Primera interfaz de página de internet / Home - 2000 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

12

El menú comercial de la sección se repite dos veces, lo que causa confusión en la navegación.

La lista de datos se extiende por varias páginas sin organización de datos e imagenes.

No existen botones para avance y retroceso de la sección ni a la página anterior.

Primera interfaz de página de internet / Sección: Productos - 2000 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

13

2013 | June v.1 – UVM - Module G4 Virtual Image

TU9

• Análisis del sitio web año 2001 - 2004

© Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

14

Pågina de internet / Home - 2001 Š Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

15

El menú principal es confuso por el uso de gráficos abstractos sin texto

Se utiliza el color azul en la arquitectura de la página para dar mayor contraste y resaltar la importancia de la marca.

La página se vuelve funcional como directorio digital al incorporar un motor de búsqueda

Adiciona ficha de contacto por registro

Página de internet / Home - 2001 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

16

Se le da una imagen corporativa distinta al logo comercial de la marca

Presentan anuncios publicitarios por primera vez en el sitio.

Aunque la arquitectura se diagrama en tres bloques, la página no se adapta al tamaño de pantalla

Se presentan más opciones y submenús dentro de la barra principal de navegación, como zonas de contexto

Página de internet / Home - 2001 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

17

Los datos se presentan a modo de lista de servicios

Se presenta una barra para banners publicitarios

El menú no es funcional al desaparecer con el desplazamiento de la página durante la navegación

Submenú con opciones adicionales de navegación

Página de internet / Home - 2001 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

18

Se agrega la paginación para darle la opción al visitante de regresar y facilitar la navegación.

Página de internet / Sección: Productos- 2001 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

19

2013 | June v.1 – UVM - Module G4 Virtual Image

TU9

• Análisis del sitio web año 2005 versión 1

© Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

20

Pågina de internet / Home - 2005 v1 Š Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

21

El menú principal es confuso por el uso de gráficos abstractos y fotográficos sin texto

El motor de búsqueda se contextualiza para facilitar la ubicación

Se manejan cuatro menús principales lo que llega a confundir al visitante

Página de internet / Home - 2005 v1 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

22

Se le da una imagen corporativa distinta al logo comercial de la marca

Presentan anuncios publicitarios estilo banner

La página no se adapta al tamaño de pantalla, pero ya se presenta en una sola pieza sin necesidad de utilizar scroll page

Se agrega un nuevo banner publicitario superior

Página de internet / Home - 2005 v1 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

23

El menú principal presenta quiebre de información accesando a algunas de las secciones del sitio La página tiene submenús para elegir la opción más conveniente para el usuario

Texto informativo general sobre la sección

Información se jerarquiza a manera de tabla comparativa a tres columnas para facilitar la comprensión del usuario

Página de internet / Sección: Productos – 2005 v1 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

24

Instrucciones adicionales a las listas de búsqueda presentadas, como múltiples opciones de contacto

Página de internet / Sección: Productos – 2005 v1 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

25

2013 | June v.1 – UVM - Module G4 Virtual Image

TU9

• Análisis del sitio web año 2005 versión 2

© Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

26

Pågina de internet / Home - 2005 v2 Š Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

27

Se le da una imagen corporativa distinta al logo comercial de la marca

Al menú principal se agregan más motores de búsqueda

La página no se adapta al tamaño de pantalla,

Página de internet / Home - 2005 v2 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

28

La página tiene inconsistencia en la imagen, ya que se actualizó el “home page”, pero el diseño de las siguientes secciones sigue siendo el mismo. Se resuelven problemas de quiebre de información en los menús

Página de internet / Sección: Productos – 2005 v2 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

29

2013 | June v.1 – UVM - Module G4 Virtual Image

TU9

• Análisis del sitio web año 2006 - 2007

© Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

30

Página de internet / Home – 2006 v2 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

31

La arquitectura esta estructurada por zonas delimitadas por plecas de color

Banners rectangulares publicitarios

La página se adapta al tamaño de pantalla centrando el diseño al ser cargado, se presenta en una sola pieza sin necesidad de utilizar scroll page

Uso de tres menús con botones textuales

Página de internet / Home – 2006 v2 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

32

Se le da una imagen corporativa distinta, en este caso se “viste” al logo dependiendo el mes

Al menú principal de búsqueda se le agregan las opciones para búsqueda por país considerando que la empresa se volvió internacional

Se utilizan menús desplegando listas para limpiar el diseño y hacerlo menos confuso para el visitante

Página de internet / Home - 2006 v2 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

33

En la estructura de la búsqueda de información se utiliza una matriz con texto e imágenes

La sección se transforma dramáticamente, se presenta un menú principal a base de fotografías dinámicas las cuales al pasar el cursor por encima desaparecen y despliegan opciones de navegación por área.

Página de internet / Home – 2006 v2 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

34

Menús desplegables a forma de listados, eficientando la navegación

Uso de espacios tensionados que evitan la despropoción

Página de internet / Sección: Servicios- 2006 v2 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

35

2013 | June v.1 – UVM - Module G4 Virtual Image

TU9

• Análisis del sitio web año 2008

© Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

36

Página de internet / Home – 2008 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

37

La imágen corporativa se renueva utilizando tipografía san serif y manteniendo el ícono del libro en un círculo

Uso de dos menús con botones textuales

La página se adapta al tamaño de pantalla centrando el diseño, regresa el uso de scroll para presentar más información en “home”

Página de internet / Home – 2008 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

38

El diseño visual de la interfaz tiene un orden de tres zonas: Menú principal, herramientas de búsqueda y zona de contacto

Algunas secciones de la página, incluyendo el buscador en “home” presentan inconsistencias dependiendo del navegador, por lo que el diseño se quiebra y la información no se presenta de manera adecuada y funcional

Página de internet / Home – 2008 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

39

Al abrir la página en otro navegador se regularizan los textos del buscador

Página de internet / Home – 2008 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

40

El menú principal de la sección se presenta a manera de listado pero agregando íconos, lo que complica la lectura considerando que el texto queda por encima del gráfico y dificulta la lectura

Uso de fotografías de grán tamaño para llamar la atención del visitante y dar a entender facilmente en que sección se encuentran

Página de internet / Sección: Estados – 2008 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

41

2013 | June v.1 – UVM - Module G4 Virtual Image

TU9

• Análisis del sitio web año 2010

© Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

42

Página de internet / Home – 2010 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

43

Regresa el acceso a otros países dentro del menú base, los botones son las banderas y se aplican en la barra principal

Se agregan pestañas a los menús principales para mejorar la experiencia del usuario

Página de internet / Home – 2010 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

44

Las redes sociales cobran importancia como medio de apoyo al sitio y se agregan los botones para su acceso rápido

Se incluye un menú de servicios y descargables Se agrega el botón de comentarios, como enlace permanente de contacto que no se desplaza en la navegación

Página de internet / Home – 2010 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

45

Debido a que se ampliaron las opciones de búsqueda y la cantidad de información en el sitio, se agrega la sección de “Ayuda” enfocada principalmente a la navegación en las distintas versiones disponibles del sitio, presentan instrucciones claras y la información se presenta a manera de listado

Página de internet / Sección: Ayuda – 2010 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

46

En esta sección se cambia el formato general con el propósito de llamar la atención del visitante y que conozca los nuevos productos que se están manejando

Se lanzan al mercado las aplicaciones para Iphone, Blackberry y Nokia.

Página de internet / Sección: Nuevos Productos– 2010 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

47

El único cambio que se presenta en el 2011 es el estilo gráfico de las banderas haciendolas más dinámicas pero dificultando un poco su comprensión

Página de internet / Home – 2011 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

48

2013 | June v.1 – UVM - Module G4 Virtual Image

TU9

• Rediseño de marca, sitio web y apps

© Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

49

• Rediseño general • En el año 2000, Sección Amarilla llegó a internet a través de su portal: www.seccionamarilla.com, que se convirtió en la nueva forma de conectar a los consumidores con miles de negocios de manera inmediata.

• El objetivo de Sección Amarilla es promover el crecimiento de sus clientes y la satisfacción de sus consumidores; sustentándose en la calidad tecnológica, seguridad y confiabilidad de todos sus productos.

• En el 2012, el portal tuvo una actualización de imagen en la que se integraron diferentes herramientas de apoyo para generar resultados de búsqueda más específicos que respondieran en un 100% a las necesidades de los usuarios. © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

50

• Productos digitales • Seccionamarilla.com • Es el directorio digital, en el se pueden encontrar todos los productos y servicios ofrecidos dentro de la versión impresa con posibilidades adicionales como llamadas directas desde internet entre otros.

• Marketing Results • Es un producto de seccionamarilla.com que permite una mayor visibilidad, tráfico y optimización de los negocios en México, a través de los principales buscadores de internet.

• Súper página • Es una página web cuya estructura le permite obtener una mejor indexación en los resultados orgánicos locales en los principales buscadores, generándole relevancia y visibilidad a los anunciantes.

• Debido a su crecimiento y respuesta inmediata a millones de usuarios, el día de hoy seccionamarilla.com es considerado como el líder en directorios en línea en México

© Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

51

• Productos digitales • MaxiClic Sección Amarilla Mobile • Es un producto que muestra los anuncios Desde el 2007, Sección Amarilla ha en los resultados patrocinados de Google, trabajado para que su aplicación esté cuando el usuario busca términos disponible en los sistemas operativos más relacionados con el negocio de los importantes e innovadores clientes.

Menumanía • Papel Web Creado en el año 2010, Menumania es el portal vertical de restaurantes de Sección • Da un tratamiento inteligente a todos los materiales impresos y los convierte en Amarilla un catálogo digital que se publica Decompras.com en seccionamarilla.com y puede ser En 2011, Sección Amarilla adquirió la consultado por todos los usuarios del operación del portal de comercio sitio. electrónico • Conecta Clic • Esta herramienta permite a los usuarios realizar llamadas sin costo a todos los negocios que deseen, directamente desde el portal de seccionamarilla.com. © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

52

2013 | June v.1 – UVM - Module G4 Virtual Image

Nuevo Slogan y publicidad • “Sí funciona, y funciona muy bien” y “Mucho. Más. Rápido.” han sido dos de los slogans que Sección Amarilla ha usado a lo largo de su historia. Su mensaje siempre fue muy claro: Sección Amarilla siempre funciona para encontrar cualquier producto y/ o servicio.

• Durante más de 15 años, el Slogan “Sí funciona, y funciona muy bien” fue la frase con la que en México se identificaba a Sección Amarilla En el año 2010 dicho slogan fue cambiado a: “Aquí lo encuentras”, haciendo referencia a que en todos los productos de Sección Amarilla los usuarios podrían encontrar la © Nuova Accademia Srl | Confidential respuesta ante cualquier necesidad.

& Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

53

• Nueva imagen gráfica • El nuevo ícono es un puntero, y está gráficamente asociado con la geolocalización, movilidad, tecnología, búsqueda local y actualidad. Toda esta nueva imagen de Sección Amarilla se ve reflejada en su publicidad y presencia de marca en diferentes medios de comunicación.

• Posicionándose con una nueva imagen acorde con las nuevas tendencias tecnológicas

© Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

54

La tipografía condensada que se utiliza es la misma del logotipo anterior, dándole continuidad a la marca

Icono respresentado el puntero de geolocalización

Nuevo slogan

Logotipo 2013 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

55

2013 | June v.1 – UVM - Module G4 Virtual Image

Spot publicitario 2013 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

56

2013 | June v.1 – UVM - Module G4 Virtual Image

TU9

• Rediseño web, web móvil y app

© Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

57

Pågina de internet / Home - 2013 Š Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

58

Se presenta un diseño novedoso manejando la escala de grises y como color de impacto el amarillo considerando la imagen de la empresa

Se utiliza la presentación de videos para mostrar la nueva campaña publicitaria

Para aumentar el atractivo visual, se incuyen fotografías dentro de la retícula de menus

La publicidad forma parte del diseño al ser integrada a la retícula base

Página de internet / Home - 2013 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

59

Nuevo logotipo

Composición del espacio en una matriz tensionada en tres bloques con mayor interactividad

Menú por ubicación y canales con los productos adicionales

Recomendaciones de búsqueda

Página de internet / Home - 2013 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

60

La arquitectura web está reticulada y diseñada para tener facilidad en una matriz de intercambio de información por sección

Links a las redes sociales de la empresa

Página de internet / Home - 2013 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

El diseño es responsivo, se adapta a cualquier monitor o dispositivo móvil

61

Se utilizan los colores corporativos para reafirmar la identidad gráfica

Ubicación del usuario, esto ayuda a personalizar y perfeccionar su búsqueda y los resultados de negocios.

La barra de búsqueda es visible y de fácil acceso

Página de internet / Barra de navegación- 2013 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

62

Se utiliza el color gris para no sobrecargar el diseño y al mismo tiempo presentar el submenú

Se utiliza el color negro para resaltar el menú principal

Los títulos se presentan en color amarillo manteniendo la imagen corporativa y causando mayor impacto en el visitante

Los títulos se presentan en bold type para mostrar la división de secciones dentro del mismo menú

Página de internet / Menús laterales - 2013 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

63

Sección dónde se muestran las clasificaciones más visitadas Acceso a los demás productos digitales de la empresa

Variedad de canales que dirigen a temas de interés en la localidad como espacios turísticos y de esparcimieto

Ubicación actual, se puede cambiar por parte del usuario

Página de internet / Menús laterales - 2013 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

64

Información legal de la compañía Repetición del menú lateral derecho

Páginas asociadas a la misma compañia

Página de internet / Manú al pié de página - 2013 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

65

Ubicación dentro del sitio

Retícula interior a dos columnas

Paginación para mantener ubicado al visitante y darle la opción de regresar a la página de su elección

Listado de negocios con las información básica

Estilo híbrido de mostrar resultados de la búsqueda

Página de internet / Página de búsqueda - 2013 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

66

Ubicación dentro del sitio

Estilo híbrido de mostrar la información

Menú interno del anuncio

Información del anunciante

Redes sociales del anunciante

Mapa de ubicación interactivo, se pueden trazar rutas y hacer acercamientos

Página de internet / Anuncio – 2013 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

67

Mantiene la misma arquitectura web que el sitio principal

Página de internet / Menumanía – 2013 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

68

Barra de búsqueda del micrositio

Estilo tipo listado de mostrar la información

Página de internet / Menumanía – 2013 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

69

Diseño responsivo para vista en dispositivos móviles

Página de internet / Web Móvil v.iPad Home– 2013 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

70

App iPad / Intro - 2013 Š Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

71

La arquitectura de la app está reticulada y diseñada para tener facilidad en intercambio de información por sección

Botón para menú de búsqueda

Se mantiene la misma imagen y concepto que en el sitio web

App iPad / Menú principal- 2013 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

72

App iPad / Menú principal- 2013 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

73

Se utilizan botones con gráficos abstractos y texto para no crear confusión en el usuario

Baja el nivel de opacidad para resaltar el menú activo

Opciones de visita, mantienen la arquitectura de la aplicación

Página de internet / Manú principal de navegación- 2013 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

74

Se baja la opacidad para no distraer al usuario

Botón de información

Información sobre como buscar dentro de la app

Página de internet / Botón información - 2013 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

75

Redes sociales del anunciante

Banner publicitario

Resultados a manera de listado

Mapa de ubicación interactivo en el que se muestran todos los resultados de la lista.

Página de internet / Resultados de la búsqueda - 2013 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

76

La interactividad táctil del mapa permite acercarse, alejarse y trazar rutas de tránsito

Página de internet / Resultados de la búsqueda - 2013 © Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

77

2013 | June v.1 – UVM - Module G4 Virtual Image

TU10

• Ejercicio en clase: una nueva interfaz digital para el caso local

© Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

78

Ejercicio en clase del caso de estudio local

• Para el ejercicio en clase los estudiantes tienen dos opciones: 1. Proyectar algo nuevo (proyecto desde cero sobre un tema elegido) 2. Rediseñar de una interfaz digital existente

• Se trata de un ejercicio de diseño web.

79

© Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

Ejercicio en clase del caso de estudio local

• Proyectando desde cero 1. Dar al alumno el resumen más fácil y entendible posible, especificando claramente los objetivos finales (mínimo 1 objetivo de diseño, 1 objetivo de información, 1 meta retroalimentación) 2. Que realizen ejercicios con la tecnología y el software que conocen. No necesitamos expertos en HTML, CSS, Javascript o demás ... sólo tenemos que comprobar si tienen la idea de un entorno digital y cómo organizar el proyecto.

80

© Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

Ejercicio en clase del caso de estudio local

• Rediseñar un proyecto (reconstrucción de un sitio web existente) 1. Especificar las nuevas metas del rediseño: dejarlos analizar los problemas de este curso, confrontar lo más teóricos con los más prácticos. Ayudarles a formular un resumen correcto.

2. Déjelos ejercitarse con la tecnología y el software que conocen. No necesitamos expertos en HTML, CSS, Javascript o demás...

3. Si el maestro o el personal docente tienen algo de conocimiento en tecnologías de diseño web, trate de involucrar al estudiante más hábil como líder de proyecto para formar un grupo de diseño web real y tratar de construir un nuevo sitio web real (publicarlo online si es posible).

81

© Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

2013 | June v.1 – UVM - Module G4 Virtual Image

TU11

• Revisión y recapitulación

© Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

82

Revisión y recapitulación

•

Coordinación y revisión de proyectos, puesta a punto, verificación del diseño.

•

Producción con las técnicas finales específicadas y determinadas:

• Personas que conocen el lenguaje web (html, CSS y Javascript) • Personas que no conocen (ellos presentarán en la computadora el diseño de página realizado con el software preferido)

83

© Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

2013 | June v.1 – UVM - Module G4 Virtual Image

TU12

• Presentación final/Evaluación

© Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package Certificate in Graphic Design and Art

84

Presentación Final/Evaluación

– Material solicitados: • Un proyecto/reporte breve e ilustrado • Tablas impresas con composición gráfica, interfase, diseño, etc •

Material opcionales (solamente para expertos):

• HTML Real + CSS + Páginas de JavaScript •

Criterios de evaluación:

• Activos del proyecto, arquitectura de © Nuova Accademia Srl | Confidential contenidos, sistema navegación, usabilidad, & Proprietaryde | NABA Affiliate Package 85 Certificate in Graphic Design and Art

Bibliografía

Designing Interac)ons Interac)on Design: Beyond Human-­‐Computer Interac)on Publisher: Mit Pr (2006) Publisher: John Wiley & Sons Inc; 3 edizione (2011) Author: Bill Moggridge Authors: Yvonne Rogers (Autore), Helen Sharp (Autore),

Jennifer Preece (Autore) Designing Media

Publisher: Mit Pr; Har/Dvdr edizione (2010) Designing Web Usability: The Prac)ce of Simplicity di Author: Bill Moggridge Jakob Nielsen (1999)

Publisher: New Riders Pub (1999) Simple and Usable Web, Mobile, and Interac)on Design Author: Jakob Nielsen Publisher: New Rid ers Press 2010

Author: Giles Colborne Digital Color: Acquisi)on, Percep)on, Coding and

Rendering Web Naviga)on Publisher: Wiley Publisher: Stapress (2012) Authors: Chris)ne Fernandez-­‐maloigne, Frederique Author: Ferdinand Maria Quincy Robert-­‐Inacio, Ludovic Macaire

Ordering Disorder: Grid Principles for Interac)on Design Publisher: New Riders Pub; 1 edizione (2010) Author: Khoi Vinh

© Nuova Accademia Srl | Confidential & Proprietary | NABA Affiliate Package 86 Certificate in Graphic Design and Art