disseny d interfícies...

10
Disseny d’interfícies multimèdia PAC 2. Conceptualització i primera proposta d’interfície gràfica Pere Amengual Gomila - Abril 2015

Upload: others

Post on 15-Sep-2020

4 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Disseny d interfícies multimèdiagraumultimedia.com/wp-content/uploads/AmengualGomilaPere...PAC2_DIM_escriptori.png PAC2_DIM_mòbil_complet.png PAC2_DIM_mòbil_plegat.png “A la

Disseny d’interfícies multimèdia PAC 2. Conceptualització i primera proposta

d’interfície gràfica

Pere Amengual Gomila - Abril 2015

Page 2: Disseny d interfícies multimèdiagraumultimedia.com/wp-content/uploads/AmengualGomilaPere...PAC2_DIM_escriptori.png PAC2_DIM_mòbil_complet.png PAC2_DIM_mòbil_plegat.png “A la

2

Disseny d’interfícies multimèdia - PAC 2

Conceptualització i primera proposta d’interfície gràfica

Índex

Enunciat .................................................... 3

Fitxes de persones .................................. 4

Wall concept ............................................. 7

Proposta gràfica ...................................... 8

Referències i bibliografia ..................... 10

Page 3: Disseny d interfícies multimèdiagraumultimedia.com/wp-content/uploads/AmengualGomilaPere...PAC2_DIM_escriptori.png PAC2_DIM_mòbil_complet.png PAC2_DIM_mòbil_plegat.png “A la

3

Disseny d’interfícies multimèdia - PAC 2

Conceptualització i primera proposta d’interfície gràfica

Fitxes de persones amb l’objectiu de saber quines característiques tindrà el públic objectiu del seu web a partir dels trets que es pu-guin deduir que tindran els principals usuaris.

Pàgines 4, 5 i 6

Wall Concept bàsic de 25 imatges amb el to visual del projecte amb l’objectiu d’establir un marc de referencia visual per definir la gama cromàtica i els referents gràfics.

Pàgina 7

Proposta gràfica de les planes d’inici del web en versió escriptori i en versió smartphone (tenint en compte que es tracta d’un web responsive amb continuïtat gràfica)

Pàgines 8 i 9 i fitxers png adjunts:

PAC2_DIM_escriptori.png

PAC2_DIM_mòbil_complet.png

PAC2_DIM_mòbil_plegat.png

Page 4: Disseny d interfícies multimèdiagraumultimedia.com/wp-content/uploads/AmengualGomilaPere...PAC2_DIM_escriptori.png PAC2_DIM_mòbil_complet.png PAC2_DIM_mòbil_plegat.png “A la

“A la meva feina necessitem proveïdors �ables”Aina Fortuny Gual

Aina té 46 anys i ha vist com al llarg de la seva vida les tecnologies de la informació esdevenien de cada vegada eines més imprescindibles. Valora la utilitat pràctica que reporten, ja que encara recorda quan el seu pare portava els llibres de comtpabilitat a ma. Un complex sistema informàtic li permet realitzar comandes, controlar estòcs, comunicar-se amb els seus treballadors i, darrerament, ha incorporat un equip de vídeovigilància que permet controlar el que passa en totes les tendes

Persona focal

Aina és empresària i les seves vuit tendes de perfumeria i cosmètica necessiten d’un control administra-tiu que no es podria portar sense l’ús de les tecnologies informàtiques. Valora sobre tot que el proveïdor es pugui fer càrrec de la instal·lació i del manteniment, ja que no disposa de personal especí�c per aquesta tasca.

Residència: AndorraLloc de treball: propietària d’una cadena de perfumeriesNivell d’ingressos anuals: ± 220.000€Edat: 46 anysEstat civil: separada, amb tres �lls gransEducació: Diplomada en EmpresarialsNivell de despesa anual en TIC: ± 4000€Relació: usuari freqüentNivel de �delitat: molt alt% ús sobre el total: 10%% despesa sobre el total: 55%

Ordinador

Xarxes

Dispositius mòbils

Emmagatzament

Impressores

10

10

7

7

10

Per�l d’ùs tecnològic- consell i assessorament tècnic

- tractament personalitzat

- manteniment integral

- preus raonables

- línia directa de suport

Expectatives

4

Disseny d’interfícies multimèdia - PAC 2

Conceptualització i primera proposta d’interfície gràfica

Page 5: Disseny d interfícies multimèdiagraumultimedia.com/wp-content/uploads/AmengualGomilaPere...PAC2_DIM_escriptori.png PAC2_DIM_mòbil_complet.png PAC2_DIM_mòbil_plegat.png “A la

5

Disseny d’interfícies multimèdia - PAC 2

Conceptualització i primera proposta d’interfície gràfica

“Sé el que vull i puc dedicar molt temps a trobar-ho”Joan Rajadell Miranda

Joan té 23 anys i va acabar els seus estudis de Comunicació l’any passat. Sempre ha estat un usuari d’aquells que es diuen “empoderats” ja que coneix perfectament com fer servir les noves tecnologies. Sovint, els seus familiars i amics li demanen consell. Segueix les fonts de notícies relacionades amb la tecnologia i està considerant estudiar alguna cosa relacionada amb les TIC.

Persona secundària

Joan és un apassionat de les noves tecnologies i disfruta de trobar gangues a Internet. Li agrada el disseny modern però no es deixa enlluernar per les marques de prestigi que només ofereixen la mateixa funcionalitat que les altres, afegint-hi un suplement en el preu. Valora per sobre de tot la funcionalitat, i després cerca el millor preu.

Residència: CastellóLloc de treball: administratiu a una empresa de distribució alimentàriaNivell d’ingressos anuals: ± 20.000€Edat: 24 anysEstat civil: solter, sense �llsEducació: Ensenyament SecundariNivell de despesa anual en TIC: ± 200€Relació: usuari ocasional, sempre consulta abans de alguna compraNivel de �delitat: baix% ús sobre el total: 45-55%% despesa sobre el total: 15%

Ordinador

Xarxes

Dispositius mòbils

Emmagatzament

Impressores

10

7

9

10

7

Per�l d’ùs tecnològic- informació detallada dels productes

- rapidesa en el pagament

- valoracions usuaris sobre els productes

- facilitat en el procés de devolució

- línia directa de suport

Expectatives

Page 6: Disseny d interfícies multimèdiagraumultimedia.com/wp-content/uploads/AmengualGomilaPere...PAC2_DIM_escriptori.png PAC2_DIM_mòbil_complet.png PAC2_DIM_mòbil_plegat.png “A la

“Comprar online em resulta ràpid i efectiu ”

En Marc és un directiu amb poc temps i el comerç online li permet accedir a una gran varietat de productes sense haver de perdre temps visitant una tenda o rebent un comercial. Examina, compara i tria el que necessita quan la feina li permet un respir; de fet, tot plegat ho troba força relaxant.

Persona focal

L’empresa on treballa en Marc sempre havia adquirit tot l’equipament informàtic a una petita empresa local, però una vegada necessitava equipament per conferències i va conéixer ticstore. A vegades no sap exactament qué és el que necessita, per aquest motiu li agrada mirar el catàleg online i pensant quins dispositius pot integrar dins el seu hotel per donar millor serveis als seus clients.

Residència: MenorcaLloc de treball: director d’hotelNivell d’ingressos anuals: ± 50.000€Edat: 29 anysEstat civil: casat, sense �llsEducació: Graduat en TurismeNivell de despesa anual en TIC: ± 1200€Relació: usuari freqüentNivel de �delitat: mig% ús sobre el total: 20%% despesa sobre el total: 35%

Marc Calafell Berraondo Marc Calafell Berraondo

Ordinador

Xarxes

Dispositius mòbils

Emmagatzament

Impressores

9

7

9

7

9

Per�l d’ùs tecnològic- catàleg ample

- temps d’entrega curt

- despeses d’enviament reduïdes

- facilitat de navegació

- procés de checkout ràpid

Expectatives

6

Disseny d’interfícies multimèdia - PAC 2

Conceptualització i primera proposta d’interfície gràfica

Page 7: Disseny d interfícies multimèdiagraumultimedia.com/wp-content/uploads/AmengualGomilaPere...PAC2_DIM_escriptori.png PAC2_DIM_mòbil_complet.png PAC2_DIM_mòbil_plegat.png “A la

7

Disseny d’interfícies multimèdia - PAC 2

Conceptualització i primera proposta d’interfície gràfica

Page 8: Disseny d interfícies multimèdiagraumultimedia.com/wp-content/uploads/AmengualGomilaPere...PAC2_DIM_escriptori.png PAC2_DIM_mòbil_complet.png PAC2_DIM_mòbil_plegat.png “A la

8

Disseny d’interfícies multimèdia - PAC 2

Conceptualització i primera proposta d’interfície gràfica

Page 9: Disseny d interfícies multimèdiagraumultimedia.com/wp-content/uploads/AmengualGomilaPere...PAC2_DIM_escriptori.png PAC2_DIM_mòbil_complet.png PAC2_DIM_mòbil_plegat.png “A la

9

Disseny d’interfícies multimèdia - PAC 2

Conceptualització i primera proposta d’interfície gràfica

Page 10: Disseny d interfícies multimèdiagraumultimedia.com/wp-content/uploads/AmengualGomilaPere...PAC2_DIM_escriptori.png PAC2_DIM_mòbil_complet.png PAC2_DIM_mòbil_plegat.png “A la

10

Disseny d’interfícies multimèdia - PAC 2

Conceptualització i primera proposta d’interfície gràfica

Referències bibliogràfiques i en línia

http://www.grihotools.udl.cat/mpiua/perfil-de-usuario-tecnica-personas/

http://www.nngroup.com/articles/persona/?utm_source=Alertbox&utm_campaign=c6e-d16bd70-Personas_02_17_2015&utm_medium=email&utm_term=0_7f29a2b335-c6e-d16bd70-24121257

http://cjny.com/classweb/process/Sample-persona.pdf

Steve Krug. New Riders. Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition

Susan Weinschenk.Peachpit. 100 Things Every Designer Needs to Know About People (Voi-ces That Matter)

Imatges

portada: prekesh.com https://www.pinterest.com/pin/14425661282788834/

persona 1: http://en.wikipedia.org/wiki/Second_Lady_of_the_United_States

persona 2: http://commons.wikimedia.org/wiki/File:Young_man_exhibiting_a_serious_ex-pression.jpg

persona 3: http://commons.wikimedia.org/wiki/File:Portrait-as-an-artist-as-a-young-man.jpg

wallconcept: https://www.pinterest.com/pereamengual/wall-concept-tic-store/

articles i logo interfície gràfica: www.ticstore.es

icona 1: http://uxrepo.com/icon/cart-by-windows

icona 2: http://uxrepo.com/icon/help-circled-by-font-awesome

icona 3: http://uxrepo.com/static/icon-sets/elusive/png32/512/000000/search-cir-cled-512-000000.png

icona 4: http://uxrepo.com/icon/star-empty-by-mfg-labs