Disseny d'interfícies multimèdia - PAC 3

2016

Diseño gráfico multiplataforma y guía de estilo: anuncit.com PAC3 NURIA ESPINOZA

Disseny gràfic multiplataforma i guia d'estil PAC 3 – Núria Espinoza

VERSIÓN ESCRITORIO

MODIFICACIONES RESPECTO A LA VERSIÓN ANTERIOR Versión 1.0 (PAC2):

Esta es la versión actual:

1

Disseny gràfic multiplataforma i guia d'estil PAC 3 – Núria Espinoza Se han realizado los siguientes cambios: -

-

Eliminar toda la tipografía en itálica y sustituirla por su versión normal para mejorar la legibilidad.

Revisión del cuadro de categorías para mejorar los márgenes y los espacios entre pictogramas.

Se ha modificado significativamente tanto header como footer para darle una personalidad propia a la página, distinta a lo propuesto en el primer mockup.

Los espacios se han aumentado para dejar respirar a los elementos. La retícula ha cambiado también, partimos de un contenedor de 1000px adaptable a diversas plataformas a diferencia de la versión 1.0 que estaba pensada sobre todo para una resolución de 1366x768 Se han añadido más apartados en el header y se ha optado por un login estilo pop-up.

DETALLE DE LOS SUBMENÚS Versión 1.0

Versión 2.0

2

Disseny gràfic multiplataforma i guia d'estil PAC 3 – Núria Espinoza Login 1.0:

Login 2.0:

PÁGINAS DE SEGUNDO NIVEL Basándonos en el mapa web propuesto, se han desarrollado 3 páginas: -

Categoría “Hogar” , “Mapa” que en esta versión se llamaría “Cerca de ti”, Página de artículo.

3

Disseny gràfic multiplataforma i guia d'estil PAC 3 – Núria Espinoza

CATEGORÍA “HOGAR”

4

Disseny gràfic multiplataforma i guia d'estil PAC 3 – Núria Espinoza

PÁGINA DE ARTÍCULO

CERCA DE TI

5

Disseny gràfic multiplataforma i guia d'estil PAC 3 – Núria Espinoza

VERSIÓN MÓVIL

Al igual que en la versión escritorio, se han realizado algunas modificaciones respecto a la versión 1.0 Versión 1.0 y versión 2.0

Modificaciones: -

El botón “PUBLICA” desaparece para dar paso al pictograma del lápiz, utilizado por muchas aplicaciones para indicar “Añadir” o “Nuevo”.

Se añade una lupa para dar acceso a un buscador en todo momento.

El cuadro central con categorías ha mejorado, ampliando los espacios entre pictogramas.

Se ha reducido texto.

El acceso al mapa se reduce a “Cerca de ti”, que aprovecha la geolocalización del móvil. La opción para buscar provincia se puede abrir mediante el buscador “lupa” en todo momento.

6

Disseny gràfic multiplataforma i guia d'estil PAC 3 – Núria Espinoza

DESPLEGABLES: COMPARATIVAS Cambios entre las versiones 1.0 y 2.0 del menú desplegable principal (menú “sándwich”)

La única diferencia es la modificación del estilo, de itálica a normal para mejorar legibilidad.

7

Disseny gràfic multiplataforma i guia d'estil PAC 3 – Núria Espinoza

PÁGINAS DE SEGUNDO NIVEL MÓVIL

Se han desarrollado las mismas páginas que en la versión escritorio: -

Categoría “Hogar” , “Mapa” En versión móvil se accede a través del botón “Cerca de ti” de la home o bien a través del buscador.

Página de artículo.

CATEGORÍA “HOGAR”

8

Disseny gràfic multiplataforma i guia d'estil PAC 3 – Núria Espinoza

PÁGINA DE ARTÍCULO

9

Disseny gràfic multiplataforma i guia d'estil PAC 3 – Núria Espinoza

CERCA DE TI El mapa “Cerca de ti” de la versión escritorio aprovecha en su versión móvil la geolocalización, proporcionando la opción de mostrar los anuncios cercanos al usuario. También se puede acceder al buscador de provincias a través del buscador disponible en casi todas las pantallas (pictograma lupa)

10

Disseny gràfic multiplataforma i guia d'estil PAC 3 – Núria Espinoza

MANUAL DE IDENTIDAD VISUAL El manual de identidad visual utiliza diversas referencias que se señalarán en la bibliografía.

11

Disseny gràfic multiplataforma i guia d'estil PAC 3 – Núria Espinoza

12

Disseny gràfic multiplataforma i guia d'estil PAC 3 – Núria Espinoza

13

Disseny gràfic multiplataforma i guia d'estil PAC 3 – Núria Espinoza

14

Disseny gràfic multiplataforma i guia d'estil PAC 3 – Núria Espinoza

BIBLIOGRAFÍA Y RECURSOS

• • •

• •

Photoshop CC 2015 Mapa de Barcelona: Google Maps [maps.google.com] [Fecha de consulta: 28/4/2016] Referencias y herramientas para Manual de Identidad Visual: o Médicos Sin Fronteras (2015) Manual de Identidad Visual [https://identidadvisual.msf.es/] [Fecha de consulta: 28/4/2016] o Smashing Magazine. Designing Style Guidelines For Brands And Websites [https://www.smashingmagazine.com/2010/07/designing-style-guidelines-for-brands-andwebsites/] [Fecha de consulta: 28/4/2016] o RGB.TO [http://rgb.to/] [Fecha de consulta: 30/4/2016] Fuente: Médicos Sin Fronteras (2015) Manual de Identidad Visual [https://identidadvisual.msf.es/] [Fecha de consulta: 28/4/2016] Retícula: Elliot Jay Stocks (2012) A better Photoshop grid for responsive web design [http://www.elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/] [Fecha de consulta: 26/4/2016]

IMÁGENES

• • • •

Íconos creados por Freepik [http://www.freepik.es/] en Flaticon.com [http://www.flaticon.com/free] [Fecha de consulta: 27/03/2016] Mapa de España: d-maps.com [http://d-maps.com/carte.php?num_car=18039&lang=es] [Fecha de consulta: 27/03/2016] Logo: anuncit.com [http://anuncit.com/] [Fecha de consulta: 27/04/2016] Fotografías de objetos para la “Categoría hogar”: o anuncit.com [http://anuncit.com/] [Fecha de consulta: 27/04/2016] o decoestilo.com. Guía para identificar antigüedades para decorar la casa [http://www.decoestilo.com/articulo/guia-para-identificar-antiguedades-para-decorar-lacasa/][Fecha de consulta: 27/04/2016] o maderaymuebles.es. AQ INTERIORES Complementos y Decoración para el Hogar [http://www.maderaymuebles.es/detail/AQ-INTERIORES-Complementos-y-Decoracion-parael-Hogar-link-1831.html] [Fecha de consulta: 27/04/2016] o hogardecorado.com. Ropa de cama en colores frescos para invierno [http://www.hogardecorado.com/ropa-de-cama-en-colores-frescos-para-invierno/] [Fecha de consulta: 27/04/2016] o tejidosaraceli.com Ropa de hogar en Valladolid [http://www.tejidosaraceli.com/ropa-dehogar-en-valladolid_76554.html ] [Fecha de consulta: 27/04/2016] o revistalabarra.com Vajilla HC [http://revistalabarra.com/guia/classified/Vajilla-HC-923.html] [Fecha de consulta: 27/04/2016]

15