En aquesta assignatura s'estudia el Disseny Interfícies multimèdia, basades en el Disseny Centrat en l'Usuari. A través d'un cas real al llarg del quadrimestre es desenvolupa un projecte de Disseny sobre un cas real per a portal de compravenda (http://anuncit.com/). Les Pac's que anem entregant al llarg del curs són wireframes tant de la versió d'escriptori com per a dispositius mòbils a través del feedback amb professor anem avançant en el projecte i corregint tot allò que aquest ens indica.

1. Marcos Baldoví Martínez
Disseny d'Inter cies Multimèdia

2. index
Paleta de colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . pag. 03
Tipografía . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . pag. 03
Retícula . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . pag. 04
Retícula Home . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . pag. 05
Retícula Productos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . pag. 06
Retícula Anuncio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . pag. 07
Retícula Contactar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . pag. 08
Disseny Home . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . pag. 09
Disseny Productos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . pag. 10
Disseny Anuncio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . pag. 11
Disseny Contactar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . pag. 12

3. PALETA DE COLORS
# 338FCB
# 575A5B R=087 G=090 B=091
# 61B8E2 R=097 G=184 B=226
R=051 G=143 B=188
TÍPOGRAFIA
abcdefghijklmnñopqrstuvwxyz
ABCDEFGHIJKLMNÑOPQRSTUV
WXYZ
1234567890|@#~ ¬?=¿^´
abcdefghijklmnñopqrstuvwxyz
ABCDEFGHIJKLMNÑOPQRSTUV
WXYZ
1234567890|@#~ ¬?=¿^´
Tamany Escritori
Montserrat
H1 = 18 pt.
H2 = 14 pt.
H3 = 12 pt.
H4 = 11 pt.
Tamany Resposive
H1 = 11 pt.
H2 = 10 pt.
H3 = 9 pt.
H4 = 7 pt.
3

4. La
La retícula és una eina de disseny que ens ajuda a compondre amb una lògica en l'estructura i
que ens permet tenir una cosistencía en el disseny. La funció principal és la de posicionar els
elements en la pagina.
El tipus de retícula escollida és bastan exible la qual s'acobla a diferents grandàries de
dispositius, a més és un format bastant genèric ja que és una de les més comunes i és la de 12
columnes.
Els elements que conformen el disseny de la pàgina els hem creat sobre la base del nombre
de columnes com es veu en les imatges, oferint una visualització dels bastant elements
homogènia.
LA RETÍCULA
Retícula Base Escritori Retícula Base Responsive
4

5. Retícula Home Escritori Retícula Home Responsive
5

6. Retícula Productos Escritori
Retícula Productos Responsive
6

7. Retícula Anuncio Responsive
Retícula Anuncio Escritori
7

8. Retícula Contactar Responsive
Retícula Contactar Escritori
8

9. ¿Que estas buscando?
Selecciona una categoría para empezar
inmobiliaria motor trabajo formación telefonía
electrónica hogar
ocio
deportes otros
DESCUBRE LA MANERA MÁS FACIL DE COMPRAR Y VENDER
1 - registrate 3 - inserta tu anuncio2 - elige una categoria
indice
categorias
Sobre Nosotros | Contacto | Ayuda | Blog | Accede a tu cuenta
telefonía
BUSCAR
Ayuda - Contacto - Sobre nosotros - Blog - Site Map
Selecciona una categoría para empezar
anuncia
BUSCAR
¿Que estas buscando?
Mira en tu ciudad
inmobiliaria motor trabajo
formación telefonía electrónica
hogar
ocio
deportes otros
MENÚ
Accede a tu cuenta
Búsqueda
Ayuda
@ Contacto
Sobre Nosotros
Blog
- Aviso legal
- Política de cookies
- Política de privacidad
:hover
9

10. Inicio > vehiculos > Resultados de la Busqueda
Sobre Nosotros | Contacto | Ayuda | Indice de categorias | Blog | Accede a tu cuenta
Data de Publicació
TITOL DEL ANUNCI
Població
12.000
Data de Publicació
TITOL DEL ANUNCI
Població
12.000
Data de Publicació
TITOL DEL ANUNCI
Població
12.000
pública tu anunicio
Precio
OPCIONES DE FILTRADO
Precio
Mínimo Máximo
Modelo
Combustible
Puertas
Marca
Data de Publicació
TITOL DEL ANUNCI
Població
12.000
Data de Publicació
TITOL DEL ANUNCI
Població
12.000
Data de Publicació
TITOL DEL ANUNCI
Població
12.000
Data de Publicació
TITOL DEL ANUNCI
Població
12.000
Data de Publicació
TITOL DEL ANUNCI
Població
12.000
Data de Publicació
TITOL DEL ANUNCI
Població
12.000
Provincia
SELECCIONAR CATEGORIA
Vehiculos
Coches
Motos
Autocaravanas
Recambios
Coches Eléctricos
Motos Eléctricas
Camiones
Todas las categorias +
Ordenar por:
mostrar Peugeot Vehiculos Castellò
BUSCAR
Ayuda - Contacto - Sobre nosotros - Blog - Site Map
Aviso Legal - Polítia de cookies - Politica de Privacidad
Inicio > Vehículos > Resultados de la Búsqueda
MENÚ
Accede a tu cuenta
Búsqueda
Ayuda
@ Contacto
Sobre Nosotros
Blog
Indice de categorias
OPCIONES DE FILTRADO
Precio
Modelo
Combustible
Puertas
Aceptar y volver al listado
Marca
Mínimo Máximo
OPCIONES DE FILTRADO
Data de Publicació
TITOL DEL ANUNCI
12.000
Població
Ordenar por:
Precio
- Aviso legal
- Política de cookies
- Política de privacidad
anuncia
Data de Publicació
TITOL DEL ANUNCI
12.000
Població
10

11. Inicio > Castellón > Vinaròs > Inmobiliaria > Alquiler > Apartamento
Sobre Nosotros | Contacto | Ayuda | Indice de categorias | Blog | Accede a tu cuenta
pública tu anunicio
Busco En todas Categorias Todas Provincias
Sig. AnuncioVolver a la lista
Nombre*
E-mail*
Teléfono*
Mensaje*
Acepto las condiciones de uso
Enviar
HACER OFERTA
Tienes que estar registrado
Enviar ahora
Joan
858 545 595
nombre@dominio
Contacta
Descripción
Apartamento en primera linea de mar con preciosas vistas al mar y a la ciudad, ascensor, conserje, 3
habitaciones, 1 baño reformado, cocina independiente reformada, salón con acceso a terraza, muy
buena distribución, lavadero, nca en perfecto estado.
Características
- Cocina independiente
- Amueblado
- Piscina comunitaria
- Lavadora
- Balcón
Piso en Paseo Maritimo / Casco Urbano, Vinaròs
Ubicación
in +
Ayuda - Contacto - Sobre nosotros - Blog - Site Map
Aviso Legal - Polítia de cookies - Politica de Privacidad
anuncia
Inicio > Castellón >Vinaròs>Inmo>Alquiler>Apartamentos
anuncia
MARAVILLOSO APARTAMENTO
AL LADO DE LA PLAYA
Ref:456658875
Piso en Paseo Maritimo / Casco Urbano, Vinaròs
Volver a la lista Sig. Anuncio
80 m² - 420 /mes
También a la venta
Descripción
Apartamento en primera linea de mar con
preciosas vistas al mar y a la ciudad, ascensor,
conserje, 3 habitaciones, 1 baño reformado, cocina
independiente reformada, salón con acceso a
terraza, muy buena distribución, lavadero, nca
en perfecto estado.
Características
- Cocina independiente
- Amueblado
- Piscina comunitaria
- Lavadora
- Balcón
Ubicación
Compartelo
Contacta Añadir a favoritos
Hacer oferta
Reportar Anuncio
- Aviso legal
- Política de cookies
- Política de privacidad
MENÚ
Accede a tu cuenta
Búsqueda
Ayuda
@ Contacto
Sobre Nosotros
Blog
Indice de categorias
11

12. Inicio > Ayuda > Contactar
Sobre Nosotros | Contacto | Ayuda | Indice de categorias | Blog | Accede a tu cuenta
pública tu anunicio
Busco En todas Categorias Todas Provincias
¿En que podemos ayudarle?
Tema
Consulta general
Nombre*
E-mail*
Teléfono*
Mensaje*
Acepto las condiciones de uso
Enviar
Introduce tú télefono si
pre eres que te llamenmos:
Llamadme
Horario de llamadas: de xxx a xxxxxxxxxxxxxxxxxxxxx
¿Tienes algún problema,
has visto nuestra
sección de ayuda?
Ayuda - Contacto - Sobre nosotros - Blog - Site Map
Aviso Legal - Polítia de cookies - Politica de Privacidad
MENÚ
Accede a tu cuenta
Búsqueda
Ayuda
@ Contacto
Sobre Nosotros
Blog
anuncia
Inicio > Ayuda Contacto
anuncia
¿En que podemos ayudarle?
¿Tienes algún problema,
has visto nuestra
sección de ayuda?
Tema
Consulta general
Nombre*
E-mail*
Teléfono*
Mensaje*
Acepto las condiciones de uso
Enviar
Introduce tú télefono si
pre eres que te llamenmos:
Llamadme
Horario de llamadas: de xxx a xxxxxxxxxxxxxxxxxxxxx
- Aviso legal
- Política de cookies
- Política de privacidad
12