PAC3_DIM.pdf

8/13/2019 PAC3_DIM.pdf

http://slidepdf.com/reader/full/pac3dimpdf 1/20

PROTOTIPAT GRÀFIC RESPONSIU

rau

m ultimèdia

disseny d’interfícies multimèdia

Jaume Villarreal Quintana



disseny d’interfícies multimèdia PAC2

Grau en Multimèdia

- 2 -

Prototips

Guia d’estil

Recursos

Imatges

10

18

03



PROTOTIPS


Grau en Multimèdia

- 3 -



prototip - mida completa >


Grau en Multimèdia

- 4 -

inici

https://app.box.com/s/k2tpqivcl2g9eoc9nm4t







Grau en Multimèdia

- 5 -

iniciinici

https://app.box.com/s/429ios9whsibsiwzc68w







Grau en Multimèdia

- 6 -

categoria

https://app.box.com/s/1w1xifdmxrwtyutxoml3







Grau en Multimèdia

- 7 -

categoria

https://app.box.com/s/eil2qu1c5tew3iy7khuf





fitxa de joc



Grau en Multimèdia

- 8 -

https://app.box.com/s/8jjfzpmi7k0521g6o913





fitxa de joc



Grau en Multimèdia

- 9 -

https://app.box.com/s/66tv4pgm29n3lgixr37s





GUIA D’ESTIL


Grau en Multimèdia

- 10 -




Grau en Multimèdia

- 11 -

retícula (escriptori)

Composició 1x1• contenidor de capçalera

• contenidor de navegació principal

• contenidor de navegació secundària

• contenidor de peu de pàgina

Composició 2x1• contenidor de NOVETATS (660px)

• contenidor de VALORATS (660px)

• contenidor de FITXA DE JOC (660px)

• contenidor de CERCA (660px)

• resta de contenidors (340px)

Composició 3x1• resta de contenidors (340px)

1 COLUMNA (1000px)

1 COLUMNA

(660px)

1 COLUMNA (340px)

1 COLUMNA (340px)

1 COLUMNA (340px)

1 COLUMNA (340px)



wireframe - mida completa >


Grau en Multimèdia

- 12 -

retícula (mòbil)

Composició a 3 columnes

S’estableix la resolució d’amplada a 320px. Cadacolumna té un ample de 100px, aplicant la resta depíxels als farcits (padding) dins de cada contenidor.

• cada contenidor aprofta l’ample de la pantalla.

• les columnes ordenen el ux d’elements dins de

cada contenidor.

Composició a 2 columnes

Cada columna té un ample de 150px, aplicant laresta de píxels als farcits (padding) dins de cadacontenidor.

•

cada contenidor aprofta l’ample de la pantalla.• les columnes ordenen el ux d’elements que es

troben fora dels contenidors. Es busca una or-denació simètrica dels elements per oferir unacomposició equilibrada.




Grau en Multimèdia

- 13 -

El projecte es basa en l’ús de dues fonts: Bank Go-thic pels títols i Avenir pel text, una tipografa sensepal que afavoreix la llegibilitat i és clara i elegant enpantalla.

Barra de navegació• Bank Gothic - 20pt (escriptori)

• Bank Gothic - 18pt (mòbil)

Capçaleres dels contenidors• Bank Gothic - 15pt (escriptori)

• Bank Gothic - 18pt (mòbil)

Nom dels jocs• Avenir Next Condensed - 15pt (escriptori)

• Avenir Next Condensed - 15pt (mòbil)

Text• Avenir - 10pt (escriptori)

• Avenir - 10pt (mòbil)

tipografia

BANK GOTHIC

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

Avenir ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

Avenir Next CondensedABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890






Grau en Multimèdia

- 15 -

elements interactius




Grau en Multimèdia

- 16 -





Grau en Multimèdia

- 17 -




Sobre Disseny d’interfícies • ‘¿Qué es una interfaz?: importancia de una buena interfaz’.

<http://albertolacalle.com/hci/interfaz.htm 20 de novembre de 2013> [data de consulta: 10 d’octubrede 2013]

• Carlos A. Scolari, ‘El ideológico retorno de las interfaces transparentes’.<http://hipermediaciones.com/2009/11/23/el-ideologico-retorno-de-las-interfaces-transparentes/>

[data de consulta: 10 de novembre de 2013]

• Wiki de Disseny d’Interfícies [UOC].<http://cv.uoc.edu/app/mediawiki16/wiki/P%C3%A0gina_principal?ajax=true 23> [data de consulta:8 de novembre de 2013]

• Luke Wroblewski, ‘Mobile First’.<http://www.lukew.com/ff/entry.asp?933> [data de consulta: 15 de novembre de 2013]

• Mòdul 1/2/3 de l’assignatura ‘Disseny d’Interfícies Multimèdia’. [UOC]

Sobre responsive design• This is responsive

<http://bradfrost.github.io/this-is-responsive/index.html> [data de consulta: 15 de novembre de 2013]

• Design Process In The Responsive Age<http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/> [data de con-

sulta: 15 de novembre de 2013]

• Diseño Web Responsivo (Responsive Web Design)

<http://xn--diseowebresponsivo-q0b.com.ar/> [data de consulta: 12 de novembre de 2013]


Grau en Multimèdia

- 18 -



• Tona Monjo, ‘Responsive web design’.<http://www.slideshare.net/tonamonjo/responsive-web-design-17713036> [data de consulta: 13 denovembre de 2013]

Sobre dispositius mòbils • iPhone

<http://es.wikipedia.org/wiki/IPhone> [data de consulta: 10 de novembre de 2013]

• Especifcacions iPhone<http://www.apple.com/es/iphone/compare/> [data de consulta: 10 de novembre de 2013]

• Dissenyant per a iOS7 <https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/>[data de consulta: 10 de novembre de 2013]

• Consideracions bàsiques per al disseny i desenvolupament d’aplicacions mòbils <Microsoft Touch Guidance (descàrrega PDF)> [data de consulta: 10 de novembre de 2013]

Sobre les imatges:• Totes les imatges han estat dissenyades i realitzades per l’autor, a excepció de l’isotip de la UOC.


Grau en Multimèdia

- 19 -



No es permet un ús comercial de l’obra original ni de les possibles obres derivades,la distribució de les quals s’ha de fer amb una llicència igual a la que regula l’obra original.


Grau en Multimèdia

- 20 -

Documents

PAC3_DIM.pdf