Costa Brava Singular by EU ERAM

redisseny i desenvolupament d’una web i la seva marca

ALUMNE: FERRAN CASTELLÓ MARTÍ TUTOR: JORDI MÁRQUEZ PUIG DATA: JULIOL 2019 TREBALL FINAL DE GRAU GRAU EN AUDIOVISUAL I MULTIMÈDIA

Primer de tot vull donar les gràcies a les persones que han permès que aquest treball sigui una realitat: A la família; als amics; als que m'han ajudat i aconsellat i en especial agraïment, al professor Jordi Caralt i al tutor Jordi Márquez

ÍNDEX

Abstract

Paraules clau

Justificació del treball

Objectius

Metodologia

1. IDEA I ELECCIÓ DEL TEMA

1.1. Introducció

1.2. Les interfícies gràfiques d’usuari

1.2.1. ELS SEUS INICIS

1.2.2. DURANT LA DÈCADA DELS ANYS 60

1.2.3. DURANT LA DÈCADA DELS ANYS 70

1.2.4. DURANT LA DÈCADA DELS ANYS 80

1.2.5. DURANT LA DÈCADA DELS ANYS 90

1.2.6. A PARTIR DEL 2000 I ELS NOUS DISPOSITIUS

1.2.7. LES INTERFÍCIES WEB

1.3. El disseny UX

1.3.1. EL “DEBRIEF”

1.3.2. LES PERSONES

1.3.3. LA USABILITAT

1.3.4. L’ACCESSIBILITAT

1.3.5. L’ANÀLISI DE LA COMPETÈNCIA, EL BENCHMARKING

1.4. L’arquitectura de la informació

1.5. La construcció de la web

1.5.1. ORDENACIÓ DE TARGETES

1.5.2. EL DIAGRAMA DE FLUX DE LA INTERACCIÓ DE L’USUARI

1.5.3. EL MAPA WEB O SITEMAP 33 1.5.4. ELS “SKETCHS” I ELS “WIREFRAMES”

1.5.5. EL TEST D’USABILITAT

34 5

1.5.6. LES ANALÍTIQUES FINALS

1.6. El disseny d’interfície, l’UI

1.6.1. LA TEORIA DE LA GESTALT

1.6.2. ELS ELEMENTS DEL DISSENY

1.6.3. LES TIPOLOGIES DE RETÍCULES

1.6.4. LES ANIMACIONS

1.6.5. TIPOLOGIES DE DISTRIBUCIONS WEB

2. DESENVOLUPAMENT

2.1. Establiment dels objectius que orienten l’operativitat del treball 46 2.2. Desenvolupament

2.2.1. EL DEBRIEF

2.2.2. LA MARCA

2.2.3. LES PERSONES

2.2.4. ELS USUARIS I LA USABILITAT

2.2.5. ELS USUARIS I L’ACCESSIBILITAT

2.2.6. ANÀLISI DE LA COMPETÈNCIA. EL BENCHMARKING

2.2.7. L’ARQUITECTURA DE LA INFORMACIÓ

2.2.8. DIAGRAMA DE FLUX I MAPA DE NAVEGACIÓ

2.2.9. WIREFRAMES

2.2.10. EL DISSENY D’INTERFÍCIE

2.2.11. LES ANIMACIONS DE LA INTERFÍCIE

2.2.12. ELS LLENGUATGES DE PROGRAMACIÓ

2.2.13. PERMISOS

2.2.14. DIFUSIÓ

2.2.15. EQUIP

2.2.16. MOCKUPS

2.2.17. VÍDEO DE PROMOCIÓ

2.2.18. PRESSUPOST

99 6

3. AVALUACIÓ, MILLORA I PROSPECTIVA

100

3.1. Conclusions i valoració dels objectius

101

3.2. Avaluació del procés de creativitat

102

3.2.1. FACTOR DE FLUÏDESA

102

3.2.2. FACTOR DE FLEXIBILITAT

102

3.2.3. FACTOR D’ELABORACIÓ

102

3.2.4. FACTOR D’INNOVACIÓ

103

3.3. Autoavaluació i millora

103

3.4. Prospectiva i disseminació del projecte

104

4. BIBLIOGRAFIA

106

4.1. Llibres

107

4.2. Articles

107

4.3. Pàgines web

108

4.4. Conferències

110

5. ANNEXOS

112

5.1. Proves d’imagotips

113

5.2. Benchmarking

113

5.3. Test d'usabilitat

120

5.4. Dissenys d'interfície

130

ÍNDEX DE TAULES I FIGURES

Índex de figures Figura 1. Exemple de com mostrar una persona. Lee, G.; 2018

Figura 2. Mostra de les varietats d’ús del mòbil. Hoober, S.; 2013

Figura 3. Mostra de la disposició dels dits en l’ús d’una sola mà. Hoober, S.; 2013

Figura 4. Mostra de l’ús del mòbil amb subjecció d’ambdues mans. Hoober, S.; 2013 28 Figura 5. Mostra de l’ús del mòbil segons la seva orientació. Hoober, S.; 2013

Figura 6. Paleta cromàtica del projecte

Figura 7. Mostra tipogràfica del projecte

Figura 8. Representació de les quatre zones geogràfiques de la Costa Brava

Figura 9. Justificació de l’ús del semicercle com a representació de les cales

Figura 10. Logotip en positiu i negatiu

Figura 11. Logotip en els colors corporatius

Figura 12. Mostra de les variants d’imagotips del projecte

Figura 13. Mostra de les variants dels isotips

Figura 14. Comportament dels imagotips en negatiu sobre el fons de color

Figura 15. Imagotips monocromàtics sobre fons negre

Figura 16. Imagotips monocromàtics sobre fons blanc

Figura 17. Imagotips cromàtics sobre fons negre

Figura 18. Isotips monocromàtics sobre fons blanc

Figura 19. Isotips monocromàtics sobre fons negre

Figura 20. Altres icones del projecte

Figura 21. Mapes de Palafrugell (esquerra) i Palamós (dreta) amb les icones

Figura 22. Fotografia del port de Roses (esquerra) i les Basses d’en Coll a Pals (dreta) amb l’aplicació duotó dels colors corporatius

Figura 23. Mostra de dos possibles usuaris de la pàgina web

Figura 24. Plantilla del qüestionari del test d’usabilitat

Figura 25. Captura de pantalla de la cerca en línia dels Arxius de Catalunya

Figura 26. Captura de pantalla de la cerca del diari El Periódico

Figura 27. Selector de les entrades de la llibreria Hannenorak

Figura 28. Vista d’una de les entrades de la llibreria Hannenorak

Figura 29. Captura de pantalla de Shadowman Van

Figura 30. Mostres dels canvis de colors de fons segons l’apartat

Figura 31. Menú de selecció d’ítems amb imatges monocromàtiques

Figura 32. Ordenació de les targetes

66 9

Figura 33. Diagrama de flux del comportament de l’usuari

Figura 34. Arbre de navegació de la pàgina web

Figura 35. Wireframe de la portada de la web

Figura 36. Wireframe del selector dels pobles

Figura 37. Wireframe de la vista dels pobles

Figura 38. Wireframe del selector de les entrades

Figura 39. Wireframe de la vista d’una de les entrades

Figura 40. Wireframe del selector dels camins de ronda

Figura 41. Wireframe de l’entrada dels camins de ronda

Figura 42. Wireframe del menú de la cerca

Figura 43. Versió mòbil de la portada

Figura 44. Versió escriptori de la portada

Figura 45. Selector dels pobles

Figura 46. Plantilla dels pobles

Figura 47. Selector de les entrades

Figura 48. Plantilla dels programes de televisió

Figura 49. Plantilla de les revistes

Figura 50. Plantilla dels llibres

Figura 51. Mostra de les plantilles en la versió mòbil

Figura 52. Selector dels camins de ronda

Figura 53. Plantilla dels camins de ronda

Figura 54. Menú de cerca del projecte

Figura 55. Menú del projecte

Figura 56. Plantilla de les publicacions dels programes de televisió

Figura 57. Plantilla de les publicacions de les revistes

Figura 58. Plantilla de les publicacions dels llibres

Figura 59. Plantilla de les publicacions dels camins de ronda

Figura 60. Plantilla de publicacions sobre fotografies de la costa

Figura 61. Plantilla de les publicacions amb l’imagotip

Figura 62. Mockup de la visualització a Instagram

Figura 63. Mockup del perfil d’Instagram

Figura 64. Històries dels llibres

Figura 65. Mostra de les altres tipologies d’històries

Figura 66. Plantilla de correu electrònic per a centres educatius

96 10

Figura 67. Mockup del selector de les entrades

Figura 68. Mockup de la plantilla de programes de pobles

Figura 69. Mockup de la portada

Figura 70. Mockup de diferents pàgines en les versions mòbils

Figura 71. Fotograma del vídeo de promoció

Figura 72. Proves d’identitat gràfica

113

Figura 73. Referència de la llibreria Pantoute

114

Figura 74. Referència de la Kitchen of Uber Eats

115

Figura 75. Referència d'À Gauche de la Lune

115

Figura 76. Referència de GA Group

116

Figura 77. Referència de Grasshopper Restaurants

116

Figura 78. Referència de Teatr Lalka

117

Figura 79. Referència de Zhee-Shee

117

Figura 80. Referència d'Air France

118

Figura 81. Referència de The Divide

119

Figura 82. Referència de Tasteatlas

119

Figura 83. Selector dels pobles a la versió mòbil

130

Figura 84. Plantilla dels pobles a la versió mòbil

130

Figura 85. Selector dels camins a la versió mòbil

130

Índex de taules Taula 1. Pressupost

Abstract CATALÀ Partint de l’anàlisi dels conceptes de l’experiència de l’usuari (UX) i la interfície d’usuari (UI) com també d’usabilitat, accessibilitat i l’arquitectura de la informació, es redissenya una pàgina web ja existent actualitzant-la a l’estètica actual per a tal de fer-la més atractiva i adaptar-la als nous dispositius de visualització. S’empra la pàgina web ‘Costa Brava Singular’ de Josep Castelló com a punt de partida per a redissenyar-la, reformulant l’arquitectura de la informació i desenvolupant la programació del disseny d’interfície creat. D’altra banda, també es crea una identitat gràfica i un concepte de la marca d’aquest projecte, fins llavors inexistent.

ESPAÑOL Partiendo del análisis de los conceptos de la experiencia del usuario (UX) y la interfaz de usuario (UI), así como de usabilidad, accesibilidad y la arquitectura de la información, se rediseña una página web ya existente actualizándola a la estética actual para el fin de hacerla más atractiva y adaptándola a los nuevos dispositivos de visualización. Se emplea la página web ‘Costa Brava Singular’ de Josep Castelló como punto de partida para rediseñarla, reformulando la arquitectura de la información y desarrollando la programación del diseño de interfaz creado. Por otra parte, también se crea una identidad gráfica y un concepto de la marca de este proyecto, hasta entonces inexistente.

ENGLISH Based on the analysis of the concepts of user experience (UX) and user interface (UI), as well as usability, accessibility and information architecture, an already existing web page is redesigned by updating it to the current aesthetics in order to make it more attractive and adapt it to the new devices to visualize it. The ‘Costa Brava Singular’ website of Josep Castelló is used as a starting point for redesigning it, reformulating the information architecture and developing the interface design created. On the other hand, it also creates a graphic identity and a concept of the brand of this project, until then nonexistent. 12

Paraules clau CATALÀ: interfície, experiència, usabilitat, accessibilitat, disseny, marca, informació, usuari, Costa Brava ESPAÑOL: interfaz, experiencia, usabilidad, accesibilidad, diseño, marca, información, usuario, Costa Brava ENGLISH: interface, experience, usability, accessibility, design, brand, information, user, Costa Brava

Justificació del treball El projecte va ser escollit tenint en compte una necessitat existent, ja que la pàgina web ‘Costa Brava Singular’ requeria una reformulació de la seva interfície, de la seva arquitectura de la informació i adaptar-la als nous dispositius des d’on es podia visualitzar. Era una pàgina web amb molt potencial, per tant, un bon punt de partida per a desenvolupar-lo com a treball final de grau. És un projecte que ha permès assolir les competències relacionades amb la programació web, però també en el disseny gràfic, ja que va ser necessari desenvolupar tota una interfície, però també, una identitat gràfica de la marca i el seu concepte creatiu. Com que es tracta d’un projecte real, aquesta web té uns objectius educatius per a tal de facilitar als estudiants la recerca sobre la temàtica de la Costa Brava en els treballs d’institut i universitaris.

Objectius GENERALS 1. Cercar les definicions dels conceptes UX i UI aplicats a una pàgina web i aplicar-ho en el redisseny de la pàgina web. 2. Oferir el contingut d’una forma més actual i atractiva de la pàgina web Costa Brava Singular. 3. Dissenyar una interfície per a tal d’oferir una experiència d’usuari agradable. 4. Desenvolupar la identitat gràfica de ‘Costa Brava Singular’.

ESPECÍFICS 1. Millorar l’arquitectura de la informació del contingut de la plataforma.

Metodologia Primer de tot es va fer una recerca sobre conceptes bàsics com experiència d’usuari, interfície d’usuari, usabilitat, accessibilitat, benchmarking o arquitectura de la informació, entre d’altres. L’anàlisi teòrica permet posteriorment començar a posar-ho en pràctica i redissenyar la pàgina web Costa Brava Singular. Un cop finalitzada la recerca documental, es va partir del debrief del client per a conèixer quines eren les principals necessitats de millora del projecte. Mitjançant aquest, es plantegen els principals punts d’actuació del projecte que són, per una banda, l’àmbit del disseny i per l’altre, la programació de la web. Pel que fa al disseny, primer de tot es va desenvolupar el de la marca i el concepte creatiu per a tal de potenciar-la i seguidament, es dissenyaren les diferents pantalles. Per a això, es va distribuir el contingut en diferents seccions segons l’arquitectura de la informació i posteriorment, es van dissenyar els wireframes i la proposta de cada una de les pàgines. Per acabar, es va acabar programant la web emprant Angular.JS i els llenguatges de programació HTML, CSS i JavaScript. El disseny va ser adaptat a la visió d’escriptori, tauleta i mòbil. Un cop programat, es feren testos d’usabilitat i proves d’error. Finalment, es treballaren maneres per a tal de promocionar la xarxa en un futur i també, es tingué en compte les necessitats de producció i de cessió de drets d’autor.

1. IDEA I ELECCIÃ&#x201C; DEL TEMA

1.1. Introducció El punt de partida de la investigació va ser la necessitat de conèixer els processos de disseny d’una pàgina web per tal de redissenyar-ne i actualitzar-ne una de ja existent. El marc teòric parteix d’un breu repàs de l’evolució de les interfícies gràfiques d’usuari (GUI) i com es van anar afegint opcions a mesura que anava millorant la tecnologia i es descobrien les necessitats dels usuaris. La definició del concepte d’User Experience i la seva descripció permeten exposar quines són les fases de construcció d’una pàgina web. Partint d’un debrief, coneixent els usuaris i la competència es desenvolupen els sketchs, els diagrames de flux i el mapa web. A part, es fa un repàs als conceptes d’usabilitat i accessibilitat, per tal de remarcar la necessitat de conèixer als futurs usuaris i la importància de l’empatia, no només amb els usuaris, sinó també amb un mateix i amb l’equip que fa possible la construcció del projecte. Per acabar, ja dins l’espai d’User Interface, es descriuen els elements més importants del disseny gràfic com el color, la tipografia, les retícules o les imatges, entre d’altres. També s’esmenten les varietats d’animacions que es poden integrar en una pàgina web i quins són els significats que aporten i finalment, com les Teories de la Gestalt, es poden introduir en un disseny d’interfície.

1.2. Les interfícies gràfiques d’usuari Avui dia la majoria de persones del món desenvolupat utilitza ordinadors i altres dispositius que permeten interactuar amb una interfície gràfica d’usuari i assolir uns objectius determinats. Aquests poden ser controlats mitjançant un ratolí, de forma tàctil o un altre dispositiu i iniciant programes prement les icones i les finestres que apareixen a les pantalles. Això no obstant, aquestes interfícies gràfiques d’usuari han anat canviant al llarg de la història (Reimer, 2005).

1.2.1. ELS SEUS INICIS A principis de la dècada dels anys 30 del segle XX, Vannevar Bush (1890-1974), un enginyer i investigador nord-americà, va idear un dispositiu que havia de permetre emmagatzemar dades i funcionar amb un conjunt de palanques i un teclat. La informació s’havia de projectar en una pantalla translúcida. Va batejar la idea amb el nom de Memex, però mai s’arribaria a construir perquè la tecnologia del moment no ho permetia (Reimer, 2005). La proposta de Bush va ser la pionera en introduir el concepte de l’hipertext, és a dir, les relacions entre informacions (Malisiewicz i Efros, 2009). A partir de la Segona Guerra Mundial es va començar a dissenyar màquines programables per a tal de poder calcular les taules de tir de l’artilleria i desxifrar els codis secrets dels enemics.

1.2.2. DURANT LA DÈCADA DELS ANYS 60 Douglas Engelbart (1925-2013), un enginyer i inventor nord-americà, va recuperar l’assaig de Bush i va començar a treballar per fer-la realitat. Aconseguí un lloc de treball a l’Institut de Recerca de Stanford i rebé patents per a la miniaturització dels components informàtics. El 1962 es presentà la idea de computadores que funcionaven mitjançant targetes perforades i les accions demanades es podrien consultar hores o dies més tard. Posteriorment, també es presentà un programari que funcionava mitjançant un terminal basat en text a temps real. Ell i el seu equip van treballar amb aquestes propostes i tecnologies i les presentaren en una demostració pública l’any 1968 (Reimer, 2005). Desenvolupà el sistema NLS (oN-Line System) que usava la tecnologia de gràfics vectorials per tal de mostrar textos i línies sòlids. Estava format per una pantalla, dos teclats -un d’estàndard i un altre de cinc tecles- i una capsa rectangular que era un ratolí, tot i que en aquell moment encara no se l’anomenava així. La invenció d’aquest va permetre més endavant desenvolupar els punters controlats per ratolí. 18

1.2.3. DURANT LA DÈCADA DELS ANYS 70 Després d’aquesta mostra, l’any 1968 es creà el Xerox PARC, un espai per tal de desenvolupar projectes interessants, i acabaren inventant la base de molts dels ordinadors actuals i també inventaren la impressora làser. L’any 1972 es desenvolupà l’Alto computer, un dispositiu suficientment petit com perquè el públic pogués desenvolupar les seves necessitats d’una forma còmoda i amb un preu de sortida de 32 mil dòlars. Els gràfics es mostraven en una resolució de 606 x 808 i en blanc i negre. La informació apareixia en forma de llistes i no amb les “finestres” actuals, més endavant es desenvolupà el processador gràfic Bravo que permetia l’ús de diferents tipografies i mides de text. Per primer cop es va implementar el cursor del ratolí (Wadlow, 1981). Durant els anys 70, es va continuar treballant per a fer més fàcil l’ús dels dispositius i es desenvolupà SmallTalk, un llenguatge de programació que tenia com a objectiu que tothom el pogués entendre. La interfície d’usuari estava formada per una gràfica moderna amb un fons gris i unes finestres que destacaven a sobre amb diferents àrees de títols, es podien moure per la pantalla, s’empraven icones i els menús emergents. La jove empresa de Steve Jobs i Steve Wozniak (1976) va apostar pels riscos i molts enginyers del Xerox PARC van treballar-hi. La interfície de la generació Lisa funcionava mitjançant icones que representaven un document o una aplicació; es desenvolupà la primera barra de menú desplegable; es van plantejar les opcions de fer dreceres de tecles per als comandaments de menú més usats, la creació de la paperera per eliminar fitxers, l’opció de poder arrossegar-los i seleccionar-los o l’acció de poder executar un programa determinat en fer doble clic als documents. Es facilità la jerarquia dels fitxers mitjançant estructures de directoris jeràrquiques.

1.2.4. DURANT LA DÈCADA DELS ANYS 80 Durant la dècada dels anys 80, altres empreses també treballaren amb interfícies gràfiques, com VisiCorp, que desenvolupà el primer full de càlcul anomenat VisiOn, però no va triomfar pel seu elevat preu (1 459 dòlars pel programari) i requisits de maquinari elevats. Tampoc emprava icones, sinó textos ni la fletxa del cursor del ratolí en diagonal, sinó la vertical com als inicis (Reimer, 2005).

Bill Gates presentà Windows 1.0 el 1985 i tingué com a novetat l’ús del color, les barres de desplaçament, widgets de control de finestres i menú i com a Lisa i Macintosh, cada aplicació tenia la seva pròpia barra de menú. En aquell moment es van usar les finestres enrajolades, és a dir, no se superposaven com ho feia Apple, no obstant això, Bill Gates preferí el segon model i per això s’implementà a les futures versions d’aquest sistema. Altres empreses van introduir noves opcions com la Commodore’s Amiga computer que aconseguí moure les finestres cap amunt i avall i la possibilitat de treballar amb una finestra sense haver-la de tenir al capdavant. Acorn va ser un sistema presentat el 1987 que va introduir les barres de desplaçament i el menú inferior de les pantalles amb accessos directes per posar en marxa les eines i els programes comuns. Les pantalles ja contenien 16 colors. El 1988, l’ordinador NeXT de Steve Jobs permetia moure els menús de control de cada un dels programes a la zona de la pantalla que es desitgés.

1.2.5. DURANT LA DÈCADA DELS ANYS 90 Windows va esdevenir una de les interfícies gràfiques d’usuari més venudes durant els anys 90, especialment després de la sortida a la venda del Windows 95. Aquest sistema va aportar la novetat del menú d’inici des d’on es podien executar tots els programes i la barra de tasques on es podien canviar els programes en execució (Solomon i Custer, 1997). Apple va introduir les animacions dels programes que sortien des del “Dock” en minimitzar-se i maximitzar-se (Reimer, 2005).

1.2.6. A PARTIR DEL 2000 I ELS NOUS DISPOSITIUS Actualment les interfícies han buscat les tendències d’introducció d’efectes com el 3D, l’escalat o el zoom, les transformacions a les pantalles, canvis de navegació als menús mòbil, entre d’altres; la integració d’elements gràfics com les ombres o les transparències; o bé, la presència de noves maneres per tal de controlar les interfícies com tauletes gràfiques o de forma tàctil amb els dispositius mòbils. Aquests efectes s’han aconseguit mitjançant l’evolució tècnica dels dispositius que permeten accelerar-los i mostrar-los ràpidament per tal de no afectar l’experiència de l’usuari. L’evolució tècnica de les pantalles ha permès fer dispositius de mides reduïdes, però amb una bona resolució d’aquestes.

1.2.7. LES INTERFÍCIES WEB Pel que fa a les interfícies de les pàgines web, també hi ha hagut una evolució des de les primeres fins a les actuals, tant en l'àmbit gràfic com en l'àmbit funcional. Des dels últims anys s’ha tingut en compte factors com l’arquitectura de la informació, la interfície d’usuari, els colors, la tipografia, els contrastos, les fotografies, els colors…; però alhora permetent la usabilitat, l’ergonomia, els hàbits d’ús, la lògica de la navegació, entre altres factors (BrandNetlzen, 2015). Les primeres pàgines web, les webs 1.0, estaven formades per molts textos, pocs colors i pocs gràfics amb dissenys lineals. L’objectiu d’aquestes era només informar i no entretenir els usuaris. Eren webs lineals que no permetien la interacció de l’usuari, només les llegien. Amb l’aparició de les webs 2.0, els usuaris van passar a tenir un nou comportament a les pàgines web, deixen de ser només simple espectador i consumidor a poder interactuar i crear els nous continguts i serveis. Es busquen les seves valoracions, opinions, correccions, discussions… És a partir d’aquest moment quan webs com YouTube, Viquipèdia o Google tenen rellevància perquè sense la participació activa dels usuaris no existirien (Nafría, 2007). Tot i que ens trobem en la web 2.0, comencen a aparèixer experts que apunten l’ús de la web 3.0, basant-se que la importància no recau tant en la participació dels usuaris sinó en el volum de dades entre aplicacions i les tecnologies API per relacionar les dades amb el seu conjunt (Codina, 2009). La definició de web 4.0 està en desenvolupament però planteja la possibilitat de crear interfícies potents mitjançant la simbiosi entre les màquines i els humans. Això no obstant, cal remarcar que de moment encara no hi ha una definició exacta sobre aquesta (Aghaei, Ali, Khosravi, 2012). L’evolució de les tecnologies amb el pas dels anys ha ajudat a canviar l’estètica de les pàgines web, per exemple, l’HTML 2.0 del 1995 va permetre introduir botons o quadres de text. El 1997 es van introduir les taules, les imatges, les capçaleres i maneres d’alineació dels objectes. L’HTML 4.0 va permetre els fulls d’estils que ajudaven a canviar l’estètica de les pàgines web de forma més fàcil. L’HTML 5.0, sorgit l’any 2008, va permetre l’ús de noves etiquetes. Pel que fa al llenguatge de programació, el Cascading Style Sheet (CSS) ha ajudat la modificació gràfica de les pàgines web de forma fàcil amb la integració de les necessitats dels dissenyadors. Un altre factor que ha ajudat en l’estètica de les webs ha estat Google Fonts que conté unes 500 tipografies que poden ser integrades a les pàgines web de forma ràpida i fàcil sense tenir en compte les ja instal·lades prèviament al sistema de l’ordinador. Per tant, s’assegura que aquestes poden ser visualitzades en qualsevol dispositiu. 21

La millora de la rapidesa de les connexions a Internet ha afavorit la integració d’elements gràfics a les plataformes web i per tant, millorar l’experiència de l’usuari. Un bon treball gràfic permet involucrar als usuaris i augmentar el trànsit de visites; permet aconseguir la lleialtat dels consumidors i lluitar contra la competència mitjançant gràfics atractius i continguts rellevants. Finalment, cal fer un esment als dissenys adaptatius, ja que l’aparició de nous dispositius i noves resolucions han propiciat a construir webs que s’adaptin a aquestes, a part de les noves maneres per a interactuar amb les plataformes, com els dispositius tàctils. Suposa més despesa en programació i disseny, però assegura una bona experiència a tots els usuaris independentment des d’on es consulta la plataforma.

1.3. El disseny UX Per tal de descriure com es dissenya i programa una pàgina web, cal remarcar que l’experiència d’usuari (UX) fa referència “a les emocions i actituds d’una persona sobre l’ús d’un determinat producte, sistema o servei. Inclou els aspectes pràctics, experimentals, afectius, significatius i valuosos de la interacció usuari-ordinador i la propietat del producte. A més, inclou les percepcions d’un aspecte del sistema com la utilitat, la facilitat d’ús i l’eficiència” (Smith, 2017).

1.3.1. EL “DEBRIEF” Per a desenvolupar un projecte cal disposar de la informació necessària per poder assolir les principals metes. S’ha de conèixer quins són els objectius empresarials i els recursos disponibles; quines són les expectatives del client; s’ha de dissenyar els punts de recerca d’informació i valorar si serà necessària la presència de participants en algunes proves; s’han d’analitzar les dades aconseguides i pactar quines seran les comunicacions que es duran a terme amb el client per tal d’assegurar-se que s’estan complint les seves expectatives (Hirschtritt, 2018).

1.3.2. LES PERSONES Al desenvolupar una interfície web cal desenvolupar un perfil de cada un dels usuaris que la usaran, és útil pensar quin nom poden tenir, fer una biografia curta, saber quina pot ser la seva edat, els seus ingressos, el perfil professional, entre d’altres (Lopuck, 2012). També pot ajudar saber quines són les seves motivacions i frustracions o què han aconseguit al llarg de la seva vida (Bhela, 2018). Coneixent-los es pot treballar des d’un inici per assolir la seva satisfacció (Bosivart i Caron, 2006).

Figura 1. Exemple de com mostrar una persona. Lee, G.; 2018 23

La tècnica més usada per conèixer els usuaris són els grups focals, el que es coneix en anglès com a focus group, i que permet saber realment les necessitats dels usuaris, els seus gustos, les interaccions entre les opinions dels altres, les facilitats a l’hora d’escollir els noms dels diferents apartats, com es comporten amb la competència, entre d’altres (Krug, 2000). Per tal de desenvolupar-los es realitzen entrevistes a un grup ampli de la demografia, especialment en el context habitual de la persona entrevistada, com a casa seva o al seu lloc de feina. Idealment a partir de les 30 entrevistes es comença a definir clarament quin és el públic objectiu del producte. A partir d’aquestes entrevistes, s’agrupen els usuaris per similituds i s’inicia una nova ronda d’investigació. Seguidament, es recluten entre cinc i set persones per a cada un dels perfils de persones d’interès per copsar els seus patrons de comportament. Aquesta ronda té com a objectiu entendre millor com afecten les seves actituds, comportaments i motivacions en l’ús del producte (O’Connor, 2011).

1.3.2.1. L’EMPATIA Per tal de conèixer els usuaris és necessària l’empatia, un dels principis de tot dissenyador d’interfície. Primer de tot cal ser conscient de quins són els propis punts forts i febles com a dissenyador i saber si un és millor a l’hora de dissenyar o bé, en ajudar als companys a prendre millors decisions i saber resoldre els problemes. Una bona coneixença pròpia permet ser més objectiu i entendre a la resta, t’ajuda a executar millor el propi rol, comunicar els arguments i saber què pots aportar als projectes (Solca, 2019). A l’hora de treballar amb l’equip, s’ha de disposar d’empatia amb els companys per tal que entenguin el disseny i satisfer les necessitats del conjunt, sovint més important que el disseny creat en si. Cal definir quines seran les entregues que es farà amb ells, les sessions de control i ideació i definir quines seran les eines que els seran més útils per ser més productius (Solca, 2019). Finalment, s’ha d’aplicar l’empatia amb els usuaris per entendre’ls, saber què necessiten i quin és el valor de la informació que s’obtingui. No és només necessari escoltar a l’usuari, sinó de tenir un objectiu clar a investigar, saber quina serà la metodologia que s’utilitzarà i després saber com s’aplicarà a la recerca. La gent podrà mostrar què li agrada i què no, però també hi ha un context que suposa entendre què s’insinua o què s’està amagant i que aporta més informació (Solca, 2019).

Les metodologies d’investigació són molt variades depenent si es vol conèixer o validar alguna cosa que ja es va fer o tenir més informació per a millorar-la. Mentre es fa l’anàlisi és necessari que també es tinguin presents els altres problemes de l’equip de disseny per extreure més informació. Seguidament, s’han d’omplir fitxes per deixar registre d’allò descobert dels usuaris (Solca, 2019). Les metodologies (Farrel, 2017) per analitzar les necessitats dels usuaris són diverses com les de descobriment, basant-se en estudis, entrevistes i reunions. Té com a objectiu descobrir allò que no es coneix i comprendre les necessitats de l’usuari. També ajuda a esbrinar si el projecte té sentit fer-lo i es validen i descarten supòsits. A la fase d’exploració es fan anàlisis, revisions del disseny, anàlisi de tasques i prototips. Són mètodes que permeten comprendre els possibles problemes del disseny i com abordar correctament les necessitats de l’usuari per tal d’oferir-los les millors opcions i estalviar-los temps. Es pot analitzar la competència, fer targetes per agrupar la informació i prototips en format paper o interactius. Els mètodes de prova comproven el disseny, ajuden a validar-lo i asseguren que tot funciona correctament. Es fan proves d’usabilitat qualitatives amb persones soles o en grup; es demana que les persones expliquin la seva experiència al llarg del temps; es parla amb els usuaris o bé, se supervisen les queixes a través de les xarxes socials; en cas de disposar de fòrum, es poden fer preguntes i redissenyar la plataforma a partir dels comentaris dels usuaris. Per acabar, el mètode d’escolta és el que ajuda a comprendre els problemes existents i a buscar noves possibles problemàtiques. Es pot consultar als registres de cerca quines són les principals preguntes consultades; pot ajudar la facilitació d’enviament de comentaris, informes d’errors i preguntes; els dubtes poden recollir-se en un espai de Preguntes Freqüents o bé, fent xerrades amb les explicacions dels dubtes. Cada una de les tècniques té un objectiu diferent i per tant, s’ha d’especificar quines són les voluntats de cada una de les investigacions per usar-ne la més adient.

1.3.3. LA USABILITAT Per a tal de satisfer les necessitats dels usuaris i garantir-los una bona experiència, cal definir què és la usabilitat i citar les principals recomanacions dels experts per construir una bona interfície gràfica. La usabilitat, segons la norma ISO 9241 (1998), és “el rang en el qual un producte pot ser usat per un grup d’usuaris específics per arribar a unes certes metes definides amb efectivitat, eficiència i satisfacció en un context d’ús específic”. Per tant, es pot entendre com el conjunt de normes que permeten a les persones usar la plataforma de forma fàcil, intuïtiva i ràpida. No obstant això, també hi ha altres definicions d’aquest concepte centrat especialment en el disseny d’interfície. “La usabilitat realment significa estar segur de què quelcom funciona bé, que una persona amb habilitats mitjanes i, fins i tot, per sota la mitjana, pugui realitzar una cosa (ja sigui un lloc web, un jet de combat, o una porta rotatòria) per a la seva intencionalitat sense acabar enormement frustrat” (Krug, 2000). Aquests principis poden ser aplicats en qualsevol plataforma que pretén la interacció de l’usuari, per tant, és important ser conscient de les capacitats i limitacions motores i cognitives de la gent; les característiques especials i úniques de la població objectiu de l’aplicació; les propietats de l’ambient físic, tècnic i corporatiu dels usuaris i finalment, les característiques i requeriments de les tasques dels usuaris referents al web o aplicació (Delgado, 2018). La usabilitat centrada a les pàgines web té cinc atributs bàsics (Nielsen, 1993): És necessari que per a l’usuari sigui fàcil d’aprendre i recordar el funcionament de la plataforma, eficient, que evita al màxim les taxes d’error per part dels usuaris i aporta satisfacció després del seu ús. Els usuaris han de sentir que tenen el control de l’aplicació, que la plataforma realça les seves habilitat i l'experiència i garantir la privacitat de la seva informació (Cato, 2001). Pel que fa al disseny, cal procurar que el portal web aporti rapidesa, sigui fiable, senzill i directe; la senzillesa ajuda als usuaris a sentir-se còmodes i entendre el seu funcionament, fet que aquest ha de ser el més precís possible per aportar confiança (Nielsen, 1999). Altrament, referent al contingut, l’usuari és qui mana, de manera que cal oferir-los allò que els és realment necessari. S’aconsella fer una breu introducció amb els continguts que es trobaran per a tal de motivar-los i continuïn investigant-la. 26

Pel que fa a la redacció dels continguts, la llargada d’aquests ha de ser d’un 25% del que s’escriuria en un format en paper, ja que en pantalla es llegeix menys. Quant als enllaços, aquests han de ser els necessaris i s’ha de garantir que funcionen, ja que a Internet hi ha molta competència i no es poden perdre visitants (Nielsen, 1999).

1.3.3.1. EXEMPLE DE LA USABILITAT EN EL MÒBIL Com a exemple de la necessitat de tenir en compte els diferents dispositius de consulta d’una pàgina web, es disposa de l’exemple de les diferents maneres d’ús d’un telèfon mòbil i com aquests usos pot influir en el disseny de la interfície. Els dispositius d’escriptori la majoria de vegades són usats assegut a la taula, però els mòbils poden ser emprats de peu, caminant, en un autobús o en qualsevol altre indret. Originalment els que disposaven només de teclat eren usats d’una manera diferent que els actuals, que són tàctils i és necessari poder veure tota la pantalla i poder-la tocar tota (Hoober, 2013). El 49% de les persones agafa el mòbil amb només una mà; un 36%, aguantant-lo amb una i usant-lo amb l’altra (mètode cradling) i el 15%, l’usa amb les dues. Aquestes formes influeixen en les zones que abasten amb els dits i per tant, repercuteixen en el disseny de les interfícies.

Figura 2. Mostra de les varietats d’ús del mòbil. Hoober, S.; 2013

Referent els que usen el mòbil amb una mà, de vegades se subjecta d’una manera diferent tenint en compte la zona de la pantalla que es vol abastar. Tot i que la població esquerrana és aproximadament d’un 10%, 1 de cada 3 persones usa el mòbil amb l’esquerra. Aquest canvi en el percentatge és perquè sovint es fa servir l’altra mà per fer tasques més importants com agafar una bossa, obrir les portes, entre d’altres. 27

Figura 3. Mostra de la disposició dels dits en l’ús d’una sola mà. Hoober, S.; 2013

La gent que subjecta el mòbil amb les dues mans, és a dir, que empra el mètode cradling, pot tocar el mòbil amb el dit polze (72%) i amb l’índex (28%), fet que aquest segon tipus és el que permet arribar a la major part de la pantalla.

Figura 4. Mostra de l’ús del mòbil amb subjecció d’ambdues mans. Hoober, S.; 2013

Per acabar, relatiu als usuaris dels mòbils amb les dues mans, 9 de cada 10 l’usen de forma vertical i només el 10% en format paisatgístic, és a dir, amb una orientació horitzontal. Amb l’orientació vertical és més fàcil l’ús de les zones inferiors de la pantalla, i en l’horitzontal, les laterals i zones centrals.

Figura 5. Mostra de l’ús del mòbil segons la seva orientació. Hoober, S.; 2013

En definitiva, a l’hora de dissenyar s’ha de tenir present que en qualsevol moment els dits poden tapar zones de a pantalla, que poden estar en diferents contextos i realitzant altres activitats. 28

1.3.4. L’ACCESSIBILITAT Tanmateix, l’usabilitat és necessària per satisfer una bona experiència de l’usuari, però cal tenir en compte que l’usuari pot disposar d’unes dificultats tècniques, psíquiques o físiques. L’accessibilitat es pot definir com la possibilitat que un producte o servei web pugui ser accedit i usat pel major nombre de persones possible, sense diferenciar les limitacions pròpies de l’individu o de les derivades del context d’ús (Hassan i Martín, 2003). Ara bé, les limitacions en aquest cas també poden fer referència a problemes d’idioma, coneixements o experiència. Aquesta sovint “no només implica la necessitat de facilitar l’accés, sinó també la de facilitar l’ús. La distinció entre usabilitat -facilitat d’ús- i accessibilitat, no és només difícil, sinó moltes vegades innecessari” (Henry, 2003), o bé, “el disseny és accessible quan és usable per a més persones en situacions o contextos d’ús” (Henry, 2002) per tal de “possibilitar tots els usuaris, de forma eficient i satisfactòria, la realització i consecució de tasques” (Henry, 2002). És necessari conèixer a quin públic es dirigeix la plataforma que s’està dissenyant, ja que es calcula que a Europa un 10% de la població pateix algun dels problemes que s’esmentaran tot seguit. Primer de tot, cal citar el conjunt de persones amb problemes de visió, referent a aquella gent que no són cecs, que només tenen algun grau de dificultat de visió. En aquest cas, caldrà procurar les mides dels objectes i evitar algunes tipografies, especialment la variant cursiva. La gent amb ceguesa de colors no pot distingir alguns tons, cosa que, caldrà evitar els menús que es diferencien només per colors. Per a la gent cega, que empra lectors del contingut textual, les imatges o els gràfics els suposen un problema per a la seva experiència (Paciello, 2000). Pels problemes auditius caldrà tenir en compte que hi ha gent amb problemes lleus i que en cas de contingut en què l’àudio té importància, cal poder regular-ne el volum o l’ús de subtítols, especialment pels usuaris amb sordesa absoluta (Paciello, 2000). Referent a la gent amb problemes de parla, tant amb dificultats com amb la pèrdua de parla absoluta, pot ser un problema si al producte desenvolupat les ordres de veu són bàsiques, en aquest cas, també caldrà valorar l’opció de poder usar-la de forma escrita (Paciello, 2000).

En el cas dels usuaris amb problemes motors s’ha de tenir present que hi ha diferents graus d’afectació. En aquest cas, cal dissenyar la web partint que podrà ser usada amb un ratolí, trackpad, amb una tauleta gràfica, amb un dispositiu tàctil, infrarojos o amb un punter a la boca o al cap, per tant, l’usuari ha de poder escollir les opcions de forma fàcil (Paciello, 2000). Finalment, per a les persones amb problemes cognitius i/o neurològics sol ser més difícil crear interfícies que les puguin usar fàcilment. Per exemple, per a persones amb dislèxia cal oferir la informació de forma clara i curta, per tal de no confondre-les amb les dades. O bé, per a persones amb predisposició a atacs epilèptics, cal evitar animacions amb flaixos (Paciello, 2000). No obstant, l’accessibilitat també pot veure’s afectada per situacions que no suposin la necessitat d’un problema per part de l’individu, una dificultat d’accessibilitat pot aparèixer per no entendre l’idioma en què està escrita la plataforma, per un mal disseny adaptatiu pel dispositiu des d’on s’accedeix o bé, per un problema de connexió a la xarxa, entre d’altres.

1.3.5. L’ANÀLISI DE LA COMPETÈNCIA, EL BENCHMARKING Conèixer els usuaris és essencial per a desenvolupar una bona plataforma i satisfer les seves necessitats, però saber com es comporta la competència és essencial per a tal de diferenciar-se i solucionar errades. La tècnica del Benchmarking ajuda a dur a terme aquesta anàlisi (Misic i Johnson, 1999). Així mateix ajuda a saber quin és el contingut que ofereixen i quines funcionalitats no han considerat, ja que els usuaris tenen una expectativa superior que a la de només aconseguir informació, de manera que si no ho aconsegueixen, poden anar a la competència (Withrow, 2006). Entendre com es comporten els competidors i què ofereixen als clients per tal de diferenciar-se d’aquests és necessari per buscar el factor diferencial. Pel que fa al contingut web pot ajudar a saber quin és el contingut i les funcionalitats que no han considerat (Withrow, 2006). Per a dur a terme una anàlisi de la web és útil, primer de tot, decidir quines seran les pàgines que s’analitzaran. No cal que siguin de la competència, sinó que han de disposar d’algun punt en comú. Pot ajudar buscar-les segons la missió i la visió de cada una d’aquestes. Un cop s’han escollit les pàgines web, cal escollir alguns ítems a analitzar que poden ser, per exemple, el temps de càrrega de la web, la facilitat de navegació dels menús, l’última data d’actualització o altres relacionats amb la temàtica de la web que s’està creant. Finalment, s’han d’analitzar els ítems establerts prèviament i elaborar taules comparatives de cada un dels portals estudiats. Finalment, es fan unes conclusions resumint els punts forts i febles a tenir en compte per a la futura creació de la web (Misic i Johnson, 1999).

1.4. L’arquitectura de la informació Un cop es coneix al client, els objectius de la web i s’ha fet una anàlisi de la competència, és necessari organitzar la informació que inclourà la plataforma web que s’està construint. L’arquitectura de la informació és la tècnica que s’encarrega d’organitzar, recuperar i presentar tota la informació mitjançant uns dissenys intuïtius per a l’usuari. És una disciplina que va iniciar-se durant els anys 90 en el moment en què augmentà el volum d’informació a les xarxes. No obstant això, s’han acceptat altres descripcions d’aquesta disciplina. L’Institut per a l’Arquitectura de la Informació la defineix com “El disseny estructural d’ambients d’informació compartits”, “l’art i la ciència d’organització i retolació de llocs web, intranets, comunitats en línia, i programari per promoure la usabilitat i facilitat de trobar informació” i com “una comunitat emergent de practicants enfocats a portar el principi del disseny i l’arquitectura al paisatge digital” (Instituto para la Arquitectura de la Información, 2008). L’arquitectura de la informació és “un gran mapa de requeriments d’informació d’una organització. És una representació independent de les principals categories de la informació, del personal, l’organització i la tecnologia dins d’una empresa” (Dickson i Wetherbe, 1985). No obstant això, si ens centrem en la construcció de portals web, la defineixen com l’art o la ciència que permet la “combinació de la informació etiquetatge i els esquemes de navegació dins d’un sistema de navegació” que ajuda als usuaris a trobar la informació desitjada (Rosenfeld i Morville, 1998). Per tant, l’objectiu és fer que el volum d’informació que es pot trobar a la xarxa estigui mostrat de tal manera que l’usuari pugui consultar-lo amb la màxima facilitat sense haver-li de requerir molta energia. Si l’usuari disposa de problemes per comprendre’n el funcionament, suposarà que no s’ha fet un estudi exhaustiu de com són ni les necessitats que tenen (Wodtke, 2003). Les pàgines han de ser clares i permetent que tots els elements estiguin ordenats segons la prioritat d’importància i repetint estructures bàsiques, com poden ser els menús de navegació o les capçaleres (Delgado, 2018).

1.5. La construcció de la web Un cop es coneixen les necessitats de l’empresa, dels usuaris, com es comporta la competència i com s’ha d’organitzar la informació, és necessari començar a treballar els diagrames de flux per preveure quin serà el comportament dels usuaris, desenvolupar un mapa web amb els continguts de la plataforma, dibuixar sketchs de les diferents pantalles per tal de preveure quina pot ser la possible distribució, fer testos d’usabilitat i un cop està en marxa la web, fer les analítiques finals.

1.5.1. ORDENACIÓ DE TARGETES Per tal d’ordenar el contingut, dissenyar, jerarquitzar i crear unes categories es recomana fer la tècnica de l’ordenació de targetes o card sorting. Ajuda a entendre les expectatives de l’usuari a comprendre el seu model mental, és ràpid i econòmic, ajuda a crear una arquitectura de la informació destacant allò important i facilita el disseny dels diagrames de flux de la interacció de l’usuari i els mapes web (Fernández, 2017).

1.5.2. EL DIAGRAMA DE FLUX DE LA INTERACCIÓ DE L’USUARI El diagrama de flux de la interacció de l’usuari és un resum dels passos que duran a terme els usuaris amb el producte o servei final per tal d’assolir uns objectius concrets. Aquests només tenen en compte la plataforma, és a dir, no tenen en compte els factors externs d’aquesta i en com aquells poden influir en la navegació de l’usuari (Komninos, 2019).

1.5.3. EL MAPA WEB O "SITEMAP" El mapa web és una tècnica que representa de forma jeràrquica l’estructura d’un lloc web. D’aquesta manera permet anticipar a l’usuari de quin és el contingut que es poden trobar, el conjunt de pàgines i les altres funcions que s’ofereixen (Komninos, 2019).

1.5.4. ELS “SKETCHS” I ELS “WIREFRAMES” Per a tal de fer una distribució de la interfície, els sketchs mostren l’estructura de cada una de les pàgines de forma senzilla i sense disseny gràfic. L’objectiu és representar la navegació global, l’estructura el contingut i les interaccions de l’usuari (Lopuck, 2012). Els sketchs estan fets a mà i han de ser força fidels a la distribució que vol ser representada, en canvi, els wireframes, estan fets mitjançant programes informàtics. Usualment no disposa de cap tipografia, color ni cap altra aplicació gràfica. Aquests constitueixen un prototipatge i poden ser testejats amb usuaris per tal que mostrin quins són els possibles errors a solucionar abans de començar a dissenyar i programar el projecte. Els prototips poden ser en paper o digitals, aquests darrers permeten una interacció més fidel per part de l’usuari i per tant, són més fidels en com usaran la plataforma (Lopuck, 2012). Un pas més enllà dels wireframes són els que s’anomenen “pixel-perfect prototypes” perquè ja comencen a tenir elements gràfics més avançats i treballats, com per exemple, tenen en compte les mides de les pantalles. Aquests solen ser imatges estàtiques, però poden animar-se mitjançant programes informàtics com PowerPoint o similars, per tal de mostrar quines possibilitats d’animacions s’utilitzaran, o bé, per captar el flux de l’usuari a l’hora de provar-lo, sense haver de fer proves ja programades (Komninos, 2019).

1.5.5. EL TEST D’USABILITAT Des que es comença a programar la web, s’ha d’anar fent proves d’usabilitat amb usuaris per tal de validar la proposta de disseny d’interfície i resoldre les problemàtiques que vagin sorgint. Si els usuaris solucionen els errors presents, permet fer que el portal funcioni millor. Com més persones ho proven, més errors es perceben i opinions es coneixen, per aquest motiu es recomana fer proves des d’un inici perquè és més fàcil corregir-ho abans de posar en marxa la plataforma que quan ja funciona. Les opinions no aproven o refuten la proposta d’interfície, sinó que permeten prendre millors decisions. Cada cop que es fa un redisseny, cal fer una prova d’usabilitat (Krug, 2000). Per molts dissenyadors això es considera inútil perquè hi ha funcionalitats que seran canviades perquè ja es coneixen els errors, no obstant això, de vegades poden aparèixer sorpreses. A més, tampoc és necessari que les proves es facin amb una web ja programada, sinó que també es poden emprar els wireframes i preguntar si els usuaris saben trobar les funcionalitats marcades (Krug, 2001).

És més important destinar recursos per fer proves que buscar una mostra representativa de la població dels futurs clients potencials; ja que tothom pot opinar sobre la plataforma. Molt probablement el públic serà més divers del que un es pot imaginar i d’altra banda, també es pot donar per suposat que la població tindrà uns coneixements previs sobre la web i que no sigui així. Es recomana usar tres persones que faran els proves i que aquests trobaran els errors majors. Preferiblement han de ser tres perquè és més fàcil que trobar-ne més i fer diverses rondes a mesura que va programant-se la plataforma. Pels que fan les anàlisis a les conclusions dels participants els és més fàcil si hi ha pocs participants i també, com més participants, més recursos monetaris i temporals són necessaris (Krug, 2001). A l’hora de començar les proves s’ha d’oferir un context i unes ordres a resoldre per part dels participants. Com que l’experiència de l’usuari és el més important, cal fer proves del funcionament de les pàgines web en construcció. Les proves poden ser automatitzades, és a dir, es tracta d’un sistema d’avaluació que permet identificar elements com vincles que ja no funcionen, males alineacions dels textos, bon funcionament dels formularis web, entre d’altres. Les proves amb usuaris finals són una de les tècniques més funcionals perquè permet tenir en compte les conductes impredictibles de les persones que usaran la plataforma. El testeig amb usuaris experts ajuda a contribuir a l’hora de detectar errors i exposar la seva opinió de l’experiència. Aquestes proves es basen a provar totes les pàgines del portal i simular totes les accions que en faran els usuaris, anotar els elements a corregir i proposar alternatives per a solucionar-ho (Delgado, 2018). Els tests es poden classificar en dues categories. Els tests quantitatius tenen com a objectiu demostrar quelcom i necessiten ser rigorosos per ser fiables. Això obliga aconseguir les dades curosament i sovint no es permet la interacció amb els altres participants per evitar influències entre aquests. En canvi, els tests qualitatius no volen demostrar res, sinó que tenen com a objectiu millorar allò que s’està construint (Krug, 2001).

1.5.6. LES ANALÍTIQUES FINALS Un cop es publica una pàgina web s’ha de continuar treballant per tal de demostrar possibles errors d’usabilitat, mitjançant les analítiques reals dels fluxos dels usuaris i copsar si hi ha pàgines menys visualitzades que d’altres, ja que potser hi podria haver un problema als menús de navegació, per exemple. Per aquest motiu, es realitzen informes amb les dades, explicacions de les conclusions arribades després de ser analitzades i possibles recomanacions a tenir en compte. En cas de fer canvis del disseny per a solucionar-los, cal fer un seguiment posteriorment per comprovar si allò s’ha resolt o no (Komninos, 2019). 35

1.6. El disseny d’interfície, l’UI El disseny d’interfície d’usuari (UI) és “el procés de construir interfícies en el programari o en els dispositius informatitzats amb un enfocament en aspecte o estil. Els dissenyadors tenen com a objectiu la creació de dissenys que els usuaris puguin trobar agradables. El disseny d’interfície sol referir-se a les interfícies d’usuari gràfiques, però també pot incloure les interfícies controlades per veu” (Interaction Design Foundation, s.d.). Les interfícies d’usuari són les que permeten la interacció entre els usuaris amb les màquines, per tant són les que tenen en compte com es comportaran els usuaris i això obliga tenir-los al cap i estudiar-ne els comportaments. La Teoria de la Gestalt és un corrent de pensament sorgit a Alemanya que estudia la percepció sensorial de la ment, per aquest fet s’esmentaran recursos a tenir en compte a l’hora de dissenyar les interfícies d’usuari.

1.6.1. LA TEORIA DE LA GESTALT El moviment de la Gestalt a néixer a Alemanya sota l’autoria dels investigadors Werheimer, Koffka i Köler, durant les primeres dècades del segle XX. Aquests autors consideraven la percepció com el procés fonamental de l’activitat mental i com les activitats psicològiques com l’aprenentatge, la memòria, el pensament, entre d’altres, depenent del funcionament del procés d’organització perceptiu (Oviedo, 2004). Centrant-nos al disseny gràfic, es desenvolupà una anàlisi de les lleis de la percepció com la de pregnància, la proximitat, la de tancament, la de similitud, la de continuïtat o la de contrast entre figura i fons, entre d’altres. En el disseny gràfic s’usen aquestes lleis i seguidament, es farà una descripció de com es poden integrar a les interfícies web. El principi de similitud parteix de la semblança d’elements per mida, forma, color, textura o orientació i la unió que formen entre aquests. El color pot permetre separar i unir els elements que són semblants i els diferents, per exemple, en el cas d’un calendari, es pot tenir tot d’un mateix color de fons, però assenyalar algun dia amb un altre color per cridar l’atenció d’una manera ràpida. També pot servir per separar ítems per categories adjudicant un color diferenciat per a cada una d’aquestes i ràpidament ser visualitzada com a diferent. A part del color, també es pot aconseguir aquest efecte mitjançant les diferents mides dels elements, fet que els que es troben de la mateixa mida s’interpretaran que tenen la mateixa importància i mitjançant les diferents mides es pot crear una jerarquia.

Per acabar, el principi de similitud també es pot exposar l’opció de la forma que permet representar elements de la vida real mitjançant formes i aquests aportar un significat a l’usuari (Yalanska, s.d.). El principi de proximitat es basa en l’agrupació dels elements que se situen prop a l’espai en comparació amb els més llunyans. Per al dissenyador aquest principi és útil a l’hora d’entendre com el cervell humà agrupa i classifica la informació a l’hora de construir una pàgina web. Els estudis demostren que aquest principi és més important que el de similitud. L’usuari la majoria de vegades no llegeix el contingut de la pàgina web, però suposa que els paràgrafs de text corresponen a l’apartat del títol o subtítol més proper. D’aquesta manera, permet crear unions d’informacions i la facilitat a l’usuari d’analitzar-los. No obstant això, també permet agrupar el contingut i separar-lo dels menús, capçaleres o peus de pàgina gràcies a l’aire que hi ha al voltant (Yalanska, s.d.).

1.6.2. ELS ELEMENTS DEL DISSENY Tal com ja s’ha comentat a l’apartat anterior, a l’hora de fer el disseny web cal tenir en compte diversos aspectes com la importància del color, del contrast, el contingut textual, les imatges i els vídeos i el text. El color permet aconseguir un disseny funcional i divers, ja que és el que permet transferir unes emocions determinades, uns objectius, la naturalesa de la web i un estat d’ànim, tenint en compte les voluntats i necessitats de la plataforma que es dissenya. No obstant això, s’ha de procurar per la usabilitat, la utilitat, l’harmonia i permetre una bona llegibilitat dels textos. Altres consells principals són remarcar elements determinats per a cridar l’atenció, buscar una interacció intuïtiva i crear un estil clar i harmònic (Yalanska, s.d.). El contrast ajuda a aconseguir una jerarquia visual a la pàgina permetent una anàlisi ràpida de l’usuari a la plataforma per cercar allò que li interessa, separant allò important del contingut secundari. El contrast es pot aconseguir mitjançant el color, la mida, la forma o la direcció dels elements. A l’hora de fer els elements amb contrast cal tenir en compte les diferents resolucions, tipus de pantalla i les problemàtiques de visió que poden tenir els usuaris. S’ha de procurar una bona llegibilitat de la informació, com també una bona accessibilitat, és a dir, que les habilitats físiques de cada usuari no condicionin l’experiència que es tingui amb la plataforma. Un dissenyador ha de pensar amb els usuaris de diferents edats, necessitats especials i discapacitats.

Per provar si el contrast s’ha fet correctament, es poden seguir unes pautes com comprovar la claredat, és a dir, si la pàgina es mira de forma borrosa, s’ha de poder intuir els elements de major importància. Finalment, el dissenyador ha de tenir en compte quin és l’ús habitual de la plataforma, en un ordinador o en un mòbil, en un interior o a l’exterior amb llum natural… , a partir d’aquests coneixements s’ha de ser conscient que algunes situacions com aquestes poden afectar la correcta visualització de la pàgina web (Yalanska, s.d.). La tipografia és un dels elements clau en el disseny gràfic i ha d’expressar el missatge que es vol transmetre amb la plataforma web. Per a escollir-la cal entendre la marca i l’audiència, el públic objectiu, com es vol diferenciar de la competència… Però també com es llegirà i quin serà el contingut. Cal provar la tipografia en el context i fer proves sobre la seva solvència o no, ja que una tipografia pot ser vàlida per textos curts, però per llargs, no. Aquesta ha d’expressar les jerarquies essencials per tal de permetre que l’usuari ho llegeixi en l’ordre correcte, diferenciïn els títols amb el cos o amb els botons, per exemple. D’aquestes cal valorar si es disposa de les mides òptiques, és a dir, versions diferents pensades per si han de situar-se en el cos de textos o bé, per títols i també la disponibilitat de diferents pesos. Quelcom a tenir en compte és el suport en idiomes i que continguin els caràcters especials per no tenir limitacions en fer traduccions de la pàgina web (Hitt, 2016). Pel que fa al contingut visual, les imatges són un dels elements més essencials d’una pàgina web, ja que sovint l’usuari usa una pàgina web segons aquestes. Aquestes es converteixen en punts de connexió entre l’usuari i la informació que hi ha. Les imatges poden ser diverses com les fotografies, les il·lustracions, imatges que permeten captar l’atenció i poden ser interactives, les icones i els elements d’identitat visual. Els vídeos poden ajudar a augmentar la consciència de marca i assolir els objectius de màrqueting. Per aquest motiu, poden aparèixer vídeos d’introducció per donar una primera visió de l’empresa i del portal; en cas de venda de productes, es poden presentar els productes o per transmetre confiança o bé, fer vídeos divertits i educatius per viralitzarlos (Yalanska, s.d.). Un altre element essencial en una pàgina web és el contingut textual, fet que sovint sigui útil que un corrector o un redactor supervisi allò que hi apareixerà. Els textos han d’informar, comunicar, oferir una interacció, millorar la navegació, implicar emocions, apel·lar els sentiments i crear un estil i un to de veu del web. El dissenyador ha de saber situar aquest contingut textual en els punts que l’usuari es mirarà i elegir una tipografia i un fons que remarqui allò important (Yalanska, s.d.).

1.6.3. LES TIPOLOGIES DE RETÍCULES Els continguts esmentats anteriorment es poden disposar de diferents maneres seguint la varietat de retícules disponibles. És necessari presentar el contingut de la millor manera per tal de fer-lo el més visible possible i partir de la premissa que les retícules més habituals, són les més còmodes pels usuaris (Babich, 2017). El model d’una columna individual es caracteritza en presentar tota la informació en una sola columna vertical. Es tracta d’una modalitat molt freqüent a les pàgines web i sol ser una de les més senzilles per a la seva navegació. El consell que es dona en aquests casos és l’ús de menús fixos a la part superior de la finestra. La pantalla dividida és una opció útil per mostrar dues informacions de la mateixa importància i que l’usuari n’hagi d’escollir una. Per exemple, en una botiga de roba es pot ocupar una meitat per a la roba de dona i l’altra, per la de l’home. En aquest cas es recomana no abusar de l’ús de la pantalla dividida i pot ser útil integrar-hi alguna animació. Les retícules asimètriques ajuden a crear tensió i dinamisme i separar alguns apartats. Ajuda a l’usuari analitzar la web d’una forma ràpida i detectar-hi els diferents apartats. L’asimetria es pot assolir mitjançant canvis d’amplada, d’escala o de color. Es pot utilitzar quan es busca fer dissenys interessants i inesperats. Cal tenir en compte que tot el contingut s’ha de poder mostrar en un disseny asimètric i el color i el contrast ajuden a fixar el focus en alguns elements en concret. Les webs que estan disposades en graelles formades per columnes són útils per a assolir un disseny totalment adaptable a la mida de la pantalla. En aquest cas, si es contenen imatges cal saber com es visualitzen en pantalles petites i deixar espai en blanc perquè l’usuari es centri en allò important. Les webs que parteixen de l’estil de revista, segueixen els sistemes de quadrícula propis dels diaris o les revistes. El disseny es construeix mitjançant graelles que ofereixen molta flexibilitat per situar el contingut. És necessari crear jerarquies i posar èmfasi amb les imatges i els titulars. El disseny en caixes té com a base situar tot el contingut en caixes de diferents mides i que se situen una al costat de l’altra. Cada una d’aquestes s’ha de connectar amb les altres per explicar una història, per exemple, una caixa gran pot mostrar un producte i les petites, més informació sobre aquest.

Les webs amb base lateral fixa, tenen com a base un disseny en una navegació horitzontal amb un menú de navegació lateral. Aquesta opció es recomana en webs amb una quantitat limitada d’opcions de navegació. Les webs amb una imatge destacada tenen com a objectiu crear una connexió emocional amb la fotografia. Pot servir per vendre un producte i mostrar-lo directament al possible comprador. Cal assegurar-se que el gràfic és prou bo per destacar-lo i la tipografia ha d’acompanyar-la correctament. Les webs amb disposició de F són les que s’analitzen seguint la forma d’aquesta lletra. És recomanable en webs que hi ha molta informació i l’usuari ha de buscar allò que li interessa més de forma ràpida. És recomanable ajudar-lo amb indicacions visuals, com negretes o paraules clau. Les webs amb forma de Z, són les que es llegeixen seguint aquesta lletra, és a dir, la forma d’escaneig habitual natural a la cultura occidental. Sovint en aquests casos els elements estan disposats fent ziga-zaga. La darrera opció de maquetació és usar una gran foto o un vídeo com a fons de la pàgina perquè aquesta expressa molt més que un text. En cas que hi hagi algun element tipogràfic, sempre ha de poder ser llegible.

1.6.4. LES ANIMACIONS Les animacions UI permeten fer l’experiència d’usuari més atractiva, però han d’oferir sempre una bona usabilitat. Aquestes es poden classificar de quatre maneres, segons l’expectativa, és a dir, com els usuaris perceben què és un objecte i que experimenten; segons la continuïtat, fa referència a la coherència de l’experiència de l’usuari i com evoluciona el flux de l’usuari per la plataforma; segons la narrativa, que és la progressió lineal dels esdeveniments en l’experiència de l’usuari en un marc temporal i/o espacial i finalment, segons la relació, que fa referència a les representacions espacials, temporals i jeràrquiques entre els objectes que guien la comprensió i la presa de decisions de l’usuari (Willenskomer, 2017). Tot seguit es farà un repàs als principis sobre l’animació: - Easing. La velocitat de les animacions pot provocar sensació de lentitud o bé, si és massa ràpid, pot trencar l’esperança de l’usuari i distreure’l. - Offset & Delay. Encara que hi hagi objectes que físicament siguin iguals, els retards i entre animacions permeten separar-los entre ells i provocar que l’usuari els visualitzi de forma diferent. 40

- Parenting. És el principi que fa referència a unir mitjançant animacions diferents elements en què, en interactuar amb un, es provoca canvis d’escala, opacitat, posició, forma, rotació, color… , a un altre. - Transformació. És el principi referent al canvi de forma d’un objecte en passar quelcom. Per exemple, pot ser quan una barra de progrés que indica la càrrega d’un fitxer es converteix en un botó d’enviar. - Canvi de valor. Són els objectes que canvien el seu aspecte o tenen alguna animació quan el seu valor canvia, com per exemple, una barra de progrés que indica la puntuació d’un videojoc o els ingressos bancaris. - Masking. Es basa a canviar la naturalesa d’un objecte segons l’estat d’aquest i que permet continuar la narrativa d’aquell. Per exemple, una caràtula d’una fotografia es converteix en un disc que gira quan es reprodueix la cançó. - Overlay. És la tècnica que permet crear capes 3D en una superfície plana per aportar la sensació que hi ha elements que queden per sobre dels altres i animar-los de dreta a esquerra o de dalt a baix. - Clonació. És la creació de nous objectes a partir d’objectes ja existents que es converteixen per tal de comunicar una narrativa. Per exemple, un botó es converteix en quatre de diferents en ser premut amb noves opcions del menú. - Obscuration. És el fet de situar elements per sobre d’uns altres amb un efecte de transparència o desenfocament per tal que l’usuari percebi la jerarquia dels elements. - Parallax. Descriu diferents objectes d’una mateixa interfície que es mouen a diferents ritmes per tal que l’usuari es pugui centrar en allò que és realment important i es mantingui la integritat del disseny. - Dimensionalitat. Defineix l’efecte que permet fer una entrada i una sortida espacial d’algun dels elements de la interfície, com per exemple un menú. Per l’usuari hi ha un element present a la interfície que no es mostra si no se li demana. - Dolly i zoom. És un efecte que parteix del cinema i es basa en augmentar o disminuir la mida d’un objecte, o bé, simular una càmera que es mou dins una profunditat on hi ha tots els objectes de la interfície.

1.6.5. TIPOLOGIES DE DISTRIBUCIONS WEB Les pàgines web poden tenir diferents maneres de distribució dels seus continguts. Per exemple, el disseny de pàgina estàtica o també anomenat "fix" o "d’amplada fia" que té una mida de pàgina predeterminada i no canvia segons l’amplada del navegador. Aquesta va ser la manera en com moltes pàgines web es van construir fins al 2010, però amb l’augment de l’ús dels dispositius mòbils va provocar que problemes d’usabilitat. En aquest cas, si el contingut és més ample que la finestra del navegador, apareix les barres de scroll lateral (Pettit, 2015). 41

El disseny de pàgines líquides o també anomenades “fluid”, són web que utilitzen percentatges en comptes de píxels per situar-ne els elements. Això significa que empra mesures relatives que s’adapten automàticament a l’amplada de les finestres. Com a aspecte positiu, no requereix dissenyar diferents versions de la pàgina segons el dispositiu perquè sempre es situa en els mateixos percentatges, no obstant això, en pantalles molt grans o molt petites, pot suposar desajustos i altres inconvenients en la col·locació dels objectes (Pettit, 2015). Les pàgines adaptatives utilitzen unitats fixes com els píxels, però mitjançant el llenguatge CSS, es pot canviar el valor dels atributs dels diferents elements de la pàgina. En realitat s’ha dissenyat diverses versions de la pàgina i que es mostra una o l’altra depenent de l’amplada de la finestra del navegador. En comparació amb el disseny fluid, aquesta permet una experiència d’usuari més positiva perquè permet ajustar millor els elements depenent de cada mida (PopArt Studio, 2018). Les pàgines responsive utilitzen tant les unitats relatives com els media queries, combinant les idees d’un disseny líquid i un disseny adaptatiu. Un dels factors diferencials és que permet situar els elements dins de contenidors que es situen en zones diferents segons la mida de la finestra i per tant, una mateixa pàgina pot semblar totalment diferent en un monitor gran o una pantalla petita. Des dels inicis de la web primer s’havia pensat en la versió escriptori i després s’havia adaptat al mòbil, però actualment s’ha de fer a l’inversa, ja que cada cop més la versió més vista és la mòbil. La metodologia responsive és la més usada actualment (Harb, Kapellari, Luong i Spot, 2011).

2. DESENVOLUPAMENT

DESEMBRE

GENER

FEBRER

*Es comença a realitzar el projecte durant el mes de desembre perquè es va canviar el tema del treball final de grau.

Reﬂexió i redacció de conclusions

PERSPECTIVA I MILLORA

Redacció de la memòria

Proves i correcció d’errors

Programació HTML, CSS i JS

Manteniment del gestor

Creació gestor de continguts

Llibre d’estil

Disseny de la interfície

Disseny de la identitat gràﬁca

Concepte creatiu marca

PLANIFICACIÓ I REALITZACIÓ

Redacció de la fase documental

Recerca de les fonts

RECERCA DOCUMENTAL

Diagrama de Gantt MARÇ

ABRIL

MAIG

Recerca documental

JUNY

Disseny gràﬁc

JULIOL

Desenvolupament i programació

AGOST

Reﬂexions i conclusions

SETEMBRE

2.1. Establiment dels objectius que orienten l’operativitat del treball Partint del procés de recerca de la creació d’una plataforma web analitzat a l’apartat anterior, es va procedir al disseny de la nova versió de la plataforma ja existent 'Costa Brava Singular', a la reformulació de la seva marca, la seva identitat gràfica i a la programació d’aquesta. Es va treballar un debrief per a tal de conèixer quines eren les necessitats del client; s’analitzaren les persones a qui anava dirigit per a saber què buscaven i els problemes a resoldre i com es treballaren els conceptes de la usabilitat i l’accessibilitat per a garantirne una bona experiència d’usuari. Posteriorment, es passà a l’elaboració de l’arquitectura de la informació de la pàgina web, ja que a la versió inicial la informació només estava filtrada segons la tipologia de font, però no segons població, per exemple, ni tampoc disposava d’un cercador. Per a aquest motiu, s’empraran les tècniques d’ordenació de targetes, els diagrames de flux o bé, els mapes webs. Finalment, pel que fa al disseny web, s’elaboren esquetxos i wireframes per a decidir com s’ha d’organitzar la informació i finalment, es dugué a terme la proposta de disseny gràfic mitjançant un programari d’imatge vectorial. Paral·lelament a l’elaboració d’aquestes tècniques, es treballà el disseny de la marca, ja que va caldre construir una nova identitat gràfica amb un concepte creatiu al darrere. Es treballà la paleta cromàtica, el treball tipogràfic i la creació d’una iconografia pròpia per a poder ser un factor diferencial respecte la competència de la xarxa. Per acabar, es programà la web. Aquesta fase va constar de dos blocs a tenir en compte. D’una banda, es programà la interfície visible per als usuaris, però per altra, es va emprar un gestor de continguts ja existent -WordPress- per a introduir la informació en una base de dades. D’aquesta manera, també es facilita la feina de crear noves publicacions al portal i mantenir-lo actualitzat.

2.2. Desenvolupament 2.2.1. EL DEBRIEF Els objectius de l’encàrrec eren l’actualització del disseny d’interfície de la pàgina web ‘Costa Brava Singular’, ja que fou dissenyada i programada l’any 2006. Des de llavors s’havien realitzat actualitzacions, però sempre havia mantingut la mateixa estructura. Aquest fet suposava que la web no fos molt atractiva i per tant, no tingués gaires visualitzacions. La manera en com estava programada no permetia un bon posicionament als cercadors d’Internet, i per tant, calia actualitzar-ne els llenguatges de programació. D’altra banda, no s’havia tingut en compte les versions responsive dels diferents dispositius. La web contenia un gran contingut d’informació que no estava classificada d’una forma usable, és a dir, estava disposada en llargues llistes que s’havien de consultar mitjançant scroll. Calia buscar una forma per a ordenar-les segons categories i facilitar la navegació dels usuaris. D’altra banda, referent a la marca de ‘Costa Brava Singular’, aquesta no havia estat treballada, només era el nom de la pàgina que apareixia a la capçalera i per tant, es considerà necessari remarcar la singularitat d’aquesta zona geogràfica. D’altra banda, una empresa immobiliària amb un nom similar -‘Casas de lujo en la Costa Brava - Singular’- sempre apareixia en primera opció als cercadors.

2.2.2. LA MARCA Fins llavors la pàgina web no tenia una marca identificable; ‘Costa Brava Singular’ era només el nom emprat al domini i que apareixia a la capçalera. Tanmateix, es va considerar essencial treballar la marca i diferenciar-se de la competència, ja que existeix una pàgina anomenada ‘Casas de lujo en la Costa Brava - Singular’ que conté un nom similar i que es dedica a la venda i lloguer de cases de luxe en aquella zona i que apareix sempre en primera opció als cercadors. El punt de partida de la gènesi creativa va ser la paraula ‘singular’, calia cercar què és allò que fa que la Costa Brava sigui singular. Seguidament, es treballaren els principals elements que eren diferenciadors com el blau turquesa del mar, els pins que acompanyen els visitants pels camins de ronda, les roques que provoquen la geografia abrupta i finalment, el cel sovint sense núvols per l’efecte de la tramuntana.

2.2.2.1. PALETA CROMÀTICA Aquests quatre elements van ajudar a treballar la paleta cromàtica. Per a aconseguir-la es van buscar fotografies de diferents indrets de la zona i s’analitzaren els colors dels elements esmentats anteriorment. S’escollí el turquesa de la mar, el verd dels pins, el groc de les roques i la sorra i el blau del cel mediterrani net de núvols. Aquests colors han estat escollits per a la simbologia que suposen, però també permeten aportar un contrast unit del color blanc i del negre. Tal com s’explicarà més endavant, a la interfície els quatre colors desenvolupen un paper molt important, ja que són els que permeten separar les categories dels diferents continguts de la plataforma mitjançant el contrast que es provoquen entre ells. Aquests colors, juntament amb el blanc i el negre, permeten oferir un contrast entre el fons i els continguts de cada una de les publicacions per a tal que els usuaris puguin seleccionar ràpidament què és important d’allò que no ho és.

Turquesa RGB: 51 / 204 / 153 CMYK: 80 / 0 / 42 / 0 HEXADECIMAL: #33CC99

Groc cadmi RGB: 255 / 204 / 102 CMYK: 2 / 19 / 56 / 0 HEXADECIMAL: #FFCC66

Verd verones RGB: 102 / 204 / 102 CMYK: 60 / 0 / 66 / 0 HEXADECIMAL: #66CC66

Blau de cobalt RGB: 51 / 204 / 153 CMYK: 81 / 15 / 1 / 0 HEXADECIMAL: #3399CC

Negre RGB: 51 / 50 / 51 CMYK: 69 / 60 / 56 / 66 HEXADECIMAL: #333333

Blanc RGB: 251 / 250 / 251 CMYK: 2 / 1 / 2 / 0 HEXADECIMAL: #FAFAFA Figura 6. Paleta cromàtica del projecte 48

2.2.2.2. TIPOGRAFIA Pel que fa a la tipografia, es va fer una recerca àmplia de tipografies. El criteri de selecció va partir de dues premisses: d’una banda havia de ser una que aportés modernitat, frescor, actualitat…; ja que es volia fer una actualització d’una pàgina web ja existent i mostrar un punt i a part del que s’havia estat fent fins llavors. Per altra, havia de tenir un toc singular, ja que es tractava de la paraula clau treballada. Per a aquest motiu, s’acabà escollint la tipografia Circe. Aquesta va ser provada en diferents contextos i s’arribà a la conclusió que podia ser llegida amb facilitat. A més, disposa d’una àmplia família de pesos variats que permeten crear una jerarquia d’importància entre els continguts i funcionen tant com a text com a títols. D’altra banda, també disposa de caràcters especials, d’aquesta manera s’eviten problemes d’incompatibilitats amb altres idiomes. CIRCE REGULAR

ABCDEFGHIJKLMNOPQR TUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 {}()[]/!”·$%&=+-* CIRCE ITALIC

ABCDEFGHIJKLMNOPQR TUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 {}()[]/!”·$%&=+-*

CIRCE EXTRA BOLD

ABCDEFGHIJKLMNOPQR TUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 {}()[]/!”·$%&=+-* CIRCE BOLD

ABCDEFGHIJKLMNOPQR TUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 {}()[]/!”·$%&=+-* Figura 7. Mostra tipogràfica del projecte

2.2.2.3. CONSTRUCCIÓ DE LA IDENTITAT VISUAL Partint de la tipografia comentada anteriorment, la paleta cromàtica i els conceptes, es va començar a desenvolupar les quatre variants dels imagotips. El nombre quatre va ser essencial a l’hora de treballar el concepte creatiu perquè, no només són els quatre elements diferencials (aigua marina, pins, roques i cel), sinó que la Costa Brava també es divideix en quatre zones segons les seves característiques geològiques: el Cap de Creus amb les roques erosionades per l’efecte de la tramuntana; la Costa del Montgrí, amb penya-segats i de constitució calcària; la Costa Brava granítica (de Begur fins a Blanes) amb pins i alzines sureres fins arran d’aigua i finalment, les zones planeres intercalades entre les altres zones (golf de Roses, la platja de Pals, la badia de Palamós i Sant Antoni i Platja d’Aro).

Alt Empordà

Cap de Creus

Zones planeres

Golf de Roses Platja de Pals Badia de Palamós i Sant Antoni Badia de Platja d’Aro

Costa del Montgrí

Costa granítica

De Begur a Blanes

Zones planeres

Figura 8. Representació de les quatre zones geogràfiques de la Costa Brava

Les icones que ho representen també estan formades per quatre elements, ja siguin línies o semicercles. Els semicercles van ser escollits perquè són la forma de les cales, quelcom molt característic de la Costa Brava.

Figura 9. Justificació de l’ús del semicercle com a representació de les cales

Tot seguit es mostraran els resultats dels imagotips, isotips i logotips del projecte aplicats en les quatre variants esmentades amb anterioritat i aplicant-hi els quatre colors. Primer de tot, es començarà mostrant el logotip, l’aplicació tipogràfica en caixa baixa de ‘Costa Brava Singular’ en la variant Extra Bold. La minúscula permet aportar una homogeneïtat entre els diferents caràcters del contingut textual.

Figura 10. Logotip en positiu i negatiu

Preferiblement sempre s’usarà la versió en positiu i negatiu del logotip (negre i blanc), tot i que també pot incorporar-se en les versions amb els altres colors corporatius.

Figura 11. Logotip en els colors corporatius 51

Seguidament, es mostren les diferents variants d’imagotips del projecte indicant què signifiquen cadascun. Tots contenen el logotip amb la representació d’un dels quatre ‘elements singulars de la Costa Brava’ representats per quatre figures, ja siguin línies o semicercles.

aigua marina

cel i tramuntana

pins i camins de ronda

roques

Figura 12. Mostra de les variants d’imagotips del projecte

Els isotips són només el contingut gràfic que representen els quatre elements.

Figura 13. Mostra de les variants dels isotips

Figura 14. Comportament dels imagotips en negatiu sobre el fons de color

Figura 15. Imagotips monocromàtics sobre fons negre

Figura 16. Imagotips monocromàtics sobre fons blanc

Figura 17. Imagotips cromàtics sobre fons negre

Figura 18. Isotips monocromàtics sobre fons blanc

Figura 19. Isotips monocromàtics sobre fons negre 53

Pel que fa a aquesta iconografia, també es van treballar altres simbologies per a representar altres conceptes de la costa com els gavians, les illes o els fars, i així, també dissenyar els mapes de cada una de les localitats que apareixen a la plataforma.

gavines

illa

far

vaixell Figura 20. Altres icones del projecte

Figura 21. Mapes de Palafrugell (esquerra) i Palamós (dreta) amb les icones

2.2.2.4. LES IMATGES Al projecte apareixeran imatges, ja sigui de Josep Castelló -l’autor de la pàgina original- o bé, portades de les publicacions o fotogrames dels audiovisuals. Aquest fet provocava orígens molt variats d’aquestes fonts i com a conseqüència, una diversitat formal molt àmplia. Per a aquest motiu, totes van estar tractades amb la tècnica monotó d’un dels colors corporatius que depenien de la pàgina on es trobaven o bé, de la categoria que en formaven part. D’aquesta manera, es van homogeneïtzar una mica i per altra, també, segons el color, se’ls aportava un significat que ajudava a l’experiència de l’usuari.

Quelcom també a fer esment és la varietat de mides i formats d’aquestes, unes podran ser verticals, d’altres horitzontals o bé quadrades. Per a aquest motiu, mitjançant estils CSS s’haurà d’acabar d’ajustar per a tenir la disposició que es busca seguint la proposta gràfica que es treballarà i que en posteriors apartats s’esmentarà.

Figura 22. Fotografia del port de Roses (esquerra) i les Basses d’en Coll a Pals (dreta) amb l’aplicació duotó dels colors corporatius

2.2.3. LES PERSONES Com que els usuaris són molt importants, es va estudiar quins havien de ser-ne els potencials espectadors. Es va partir de la idea dels estudiants, dels aficionats de la Costa Brava o bé, dels periodistes que els interessés disposar d’un fons bibliogràfic a la xarxa. Finalment, s’escollí l’opció dels estudiants, ja que la web va ser creada l’any 2006 per a facilitar els estudiants en els seus treballs acadèmics. Principalment va dirigida a joves estudiants sense diferència de gènere. Especialment a estudiants de batxillerat o universitaris que han de fer un treball sobre la Costa Brava i necessiten informació sobre les publicacions que s’han fet o programes de televisió que s’hi han enregistrat. El domini en les noves tecnologies ha de ser mitjà, ja que la navegació serà una mica més complexa que l’actualitat, però tampoc ho és molt. La interfície ha de conduir a l’usuari durant la recerca. Les principals frustracions poden ser la manca de temps a les vides i les quantitats de treballs que poden dur a terme de forma simultània als seus centres escolars i per tant, necessiten aconseguir la informació d’interès ràpidament.

Segurament que la pàgina web la consultaran amb l’ordinador, ja que és l’instrument sovint més usat quan es fa recerca, però també cal tenir present que les generacions més joves cada cop utilitzen més els telèfons mòbils i les tauletes, o sigui que cal tenir-ho present a l’hora de desenvolupar la plataforma1.

Adrià

Laura

MOTIVACIONS Passejar, jugar a videojocs i gaudir dels amics

MOTIVACIONS Sortir amb els amics, cinema i fotograﬁa

FRUSTRACIONS Està estudiant batxillerat i ha de dur a terme el Treball de Recerca de la costa de Palafrugell i no té gaire temps per a dur-lo a terme. Necessita aconseguir la informació ràpidament.

FRUSTRACIONS Està fent un treball d’investigació sobre la Costa Brava, però viu a una certa distància i necessita trobar moltes fonts bibliogràﬁques per a trobar la informació.

BIOGRAFIA Ha estat estudiant a l’escola del seu poble i actualment està cursant el batxillerat. De moment encara no sap què estudiarà a la universitat.

BIOGRAFIA Actualment està estudiant un grau universitari i necessita conèixer la informació sobre la costa.

Edat: 22 anys Estudis: Universitat Comarca: Osona

Edat: 17 anys Estudis: Batxillerat Comarca: Baix Empordà

PERSONALITAT És una persona introvertida, racional i que la utilitza per arribar a les seves metes. NECESSITATS Conèixer les publicacions de Palafrugell per a visualitzar-los o llegir-los.

PERSONALITAT És una persona extrovertida, sensible, perfeccionista que està atenta als petits detalls. NECESSITATS Conèixer les principals publicacions de la Costa Brava per a consultar-les.

Figura 23. Mostra de dos possibles usuaris de la pàgina web

La primera fotografia és propietat de l’Adrià Castelló i la segona, de la Laura Domènech

2.2.4. ELS USUARIS I LA USABILITAT Per a garantir una bona usabilitat, es va buscar que el funcionament de la plataforma fos senzill, per a tal que l’usuari pogués aprendre’l i recordar-lo. D’aquesta manera es podria aconseguir reduir les taxes d’error durant la navegació i així, provocar un augment de la satisfacció d’aquests. Es tracta d’un disseny senzill i directe on bàsicament només hi ha la informació necessària i s’evita tot allò innecessari, d’aquesta manera es redueixen les confusions a l’usuari. Cal ser conscients que es llegeix menys amb les pantalles que en paper, o sigui que només s’ha seleccionat allò important. Com a element negatiu, però que s’ha intentat solucionar al màxim ha estat el temps de càrrega de les pàgines, especialment de la informació de la base de dades i les imatges, però de vegades encara presenta algun problema. Referent a les elevades taxes d’abandonament d’una pàgina web, a la pantalla inicial es va decidir fer una breu introducció explicant tot allò que hi podrà trobar i així l’internauta evita tenir sorpreses. Es va dur a terme una sèrie de proves d’usabilitat amb algunes persones externes al projecte per a tal de validar-lo i anar solucionant alguns dels errors que apareixien. Per a fer aquestes proves, es va construir un qüestionari amb dues parts. La primera era un conjunt de tasques que s’havia de marcar si l’usuari les aconseguia fer o no; la segona, preguntes més obertes per a conèixer la seva opinió. Tot seguit, es podrà veure la mostra d’aquest qüestionari i als annexos2, les respostes de les persones enquestades. Va permetre conèixer que en general la navegació pels diferents apartats és la correcta i es considera que està bé que la divisió de l’arquitectura de la informació, però sí que es milloraria algun aspecte per a poder filtrar encara més les entrades i facilitar la recerca. Els menús han estat valorats, en general, de forma positiva, tot i que en un primer moment han trobat difícil reconèixer que es podria anar a cada una de les pàgines dels pobles mitjançant el menú de l’hamburguesa. Per anar coneguent l’opinió dels usuaris mentre s’anava avançant amb el treball, s’anava mostrant l’evolució del disseny d’interfície a les companyes Èlia Bosch, Clara Camps, Ester Cánovas, Anna Fàbrega i Judith Navarra perquè anessin exposant els punts forts i punts febles. D’altra banda, també es feren tutories amb els professors Jordi Caralt i Jordi Márquez. 2

Als annexos hi les respostes de les testos d'usabilitat. 57

Proves d’usabilitat de la interfície Nom de la persona que fa la prova d’usabilitat: Data: Instruccions de la prova La prova de testeig està formada per dos blocs, primer de tot, s’haurà de seguir unes indicacions i aconseguir els objectius que es preveuen; el segon bloc, es buscarà la vostra opinió per a millorar la interfície del projecte. Primer bloc El primer bloc d’aquesta prova d’usabilitat es basa a intentar dur a terme les següents accions, en cas d’assolir-ho es marcarà amb una creu (X) a la casella de ‘Sí’, en cas contrari, a la de ‘No’. D’aquesta manera, es podrà valorar si els diferents apartats de la plataforma són fàcils de trobar.

Proves d’usabilitat de la interfície Segon bloc El segon bloc són un conjunt de preguntes per a conèixer com ha estat l’experiència amb la plataforma. Es demana respondre, si us plau, amb sinceritat les següents preguntes. 1. El temps de càrrega entre les pàgines ha estat l’òptim?

2. Consideres que la navegació a través de les diferents pàgines és fàcil?

3. Opines que l’opció de filtrar les informacions per mitjà de les localitats és una bona opció, o bé, en preferiries una altra?

4. Consideres que la informació que s’ofereix de cada publicació està mostrada de tal manera que pugui ser trobada ràpidament?

5. Consideres que els diferents apartats són els suficients o n’afegiries algun més?

Altres comentaris:

Moltes gràcies per a les teves respostes. Figura 24. Plantilla del qüestionari del test d’usabilitat 59

2.2.5. ELS USUARIS I L’ACCESSIBILITAT També va ser necessari pensar amb els usuaris per a conèixer quines eren les principals problemàtiques referents a l’accessibilitat. La informació que s’ofereix va ser resumida i detallada per a poder-la distingir ràpidament, ja que cada una de les pantalles només conté la informació important. La voluntat d’oferir una estructura simple repetitiva permet que els usuaris amb algun problema de visió pugui veure com estaran estructurades cada una de les pàgines i oferir facilitats per a consultarles. Els moviments de navegació a la plataforma són els bàsics com prémer botons o fer scroll a les pantalles. La decisió de no incorporar nous moviments va permetre facilitar la navegació als usuaris amb problemes motors. Així, dispositius com tauletes gràfiques o punters subjectats amb la boca o el cap, poden ser emprats per a consultar la plataforma. Pel que fa als problemes auditius, no ha estat una de les principals preocupacions, ja que no s’han emprat sons al portal web. Referent als problemes cognitius i/o neurològics, considero que el fet d’emprar una mateixa estructura, és fàcil navegar-hi. Per acabar, un punt que pot suposar quelcom negatiu és que la pàgina només és en català i per tant, pot suposar alguna dificultat a l’hora d’entendre-la si l’usuari no comprèn l’idioma. Això no obstant, tampoc ho he considerat mai una gran problemàtica, ja que la informació és força de caràcter local, o sigui que qui la cercarà en general serà gent de la zona. Ara bé, si amb el temps es percep que pot ser un punt negatiu, sempre es podrà incorporar la versió en una altra llengua.

2.2.6. ANÀLISI DE LA COMPETÈNCIA. EL BENCHMARKING3 Conèixer com es comporta la competència és útil per diferenciar-se, però també, per poder aprendre dels seus errors. Per a aquest motiu es van analitzar diferents pàgines web segons les seves similituds amb la forma i d’altres, segons el seu contingut. Primer de tot s’analitzaren les pàgines amb una funció similar. Com a pàgines amb una funció similar, es va analitzar la pàgina de Cerca en línia dels Arxius de Catalunya per a conèixer com es fa el filtratge de la informació i en aquest cas, les informacions poden ser consultades mitjançant una cerca simple amb les paraules clau, els anys d’interès i en quins centres s’ha de buscar. 3 Als annexos hi ha l’anàlisi sencera del Benchmarking, en aquest apartat de la memòria només és una breu descripció de les dades més rellevants. 60

En el cas de la cerca avançada, es poden introduir el tipus de document d’interès, les paraules clau, una descripció, l’interval d’anys, dades dels centres com el tipus de font, codis, catàlegs, entre d’altres. Finalment, hi ha la cerca per inventari que també demanen les tipologies de fonts, el contingut de les fonts, segons el contingut, les dates extremes, el centre i el nom i el tipus de les fonts. L’arxiu del Periódico només es classificaven els diaris per dates.

Figura 25. Captura de pantalla de la cerca en línia dels Arxius de Catalunya

Figura 26. Captura de pantalla de la cerca del diari El Periódico

Pel que fa a forma, es van consultar pàgines que disposessin d’informació en una base de dades i que s’hagués de mostrar d’alguna manera, com va ser el cas d’una llibreria quebequesa, la Librairie Hannenorak, que oferia un selector de llibres amb la portada, el títol, l’autor i la categoria del llibre, quelcom interessant per al projecte perquè en aquest cas també s’havia de classificar per categories una informació.

Figura 27. Selector de les entrades de la llibreria Hannenorak

Figura 28. Vista d’una de les entrades de la llibreria Hannenorak

Pel que fa a la pàgina Shadowman Van, una web que mostra les realitats de diferents persones i cultures de països africans, la pàgina web té una estètica neta amb jocs de diferents cossos de tipografies, colors, fotografies i mapes dels països que s’il·lustren. Va ser escollida perquè es mostraven mapes, quelcom que també calia integrar a la plataforma Costa Brava Singular a les pàgines dels pobles.

Figura 29. Captura de pantalla de Shadowman Van 62

La web s**t kingz, un grup musical japonès, va ser escollida perquè es canviava el color del fons segons la pàgina en què es troba l’usuari i per tant, diferenciava els apartats, quelcom que també es va usar per a dissenyar la web d’aquest projecte.

Figura 30. Mostres dels canvis de colors de fons segons l’apartat

Com que es va creure la necessitat d’haver d’utilitzar imatges monotons per a diferenciar les categories i alhora, unificar-les d’alguna manera, ja que tenien estils i orígens diferents, es va analitzar la web d’una agència creativa amb seus als Estats Units, Rússia i a Singapur, la MST Agency.

Figura 31. Menú de selecció d’ítems amb imatges monocromàtiques

Per a seleccionar les webs, en general, es van consultar les que havien estat nominades o premiades a la pàgina web de premis d’aquest sector, l’Awwwards. De manera que, si havien rebut un guardó, suposava que tenien una qualitat estètica o de programació i per tant, podien ser referents útils. Aquestes estaven filtrades segons categories i per tant, va ser senzill poder-les trobar. Es consultaven segons allò que considerava que podria ser més útil per al projecte. A mesura que s’anava treballant-hi, alguns dels referents van deixar de ser aprofitables, així és que es va tornar a analitzar la competència.

2.2.7. L’ARQUITECTURA DE LA INFORMACIÓ Una de les principals problemàtiques que disposava la pàgina web original era l’arquitectura de la informació. La informació se situava tota en una taula segons cada tipologia de font i no disposava de cap menú de cerca per a consultar allò que realment es desitjava. Aquesta informació era introduïda de forma manual en una taula en HTML, creant cada cop de noves cel·les i quan era necessari acompanyar-ho d’una fotografia, aquesta havia de ser vinculada de forma manual mitjançant les etiquetes HTML. Tot seguit, es mostra com estava organitzada la pàgina web original. - Presentació. Oferia la presentació a la portada de la web, tot i que hi havia un botó al menú que permetia consultar-la i semblava que fos un apartat diferent que la portada en si. - La Costa Brava. Apareixia una breu introducció sobre com es divideix la Costa Brava i en quins són els 4 apartats que hi ha: Alt Empordà (Cap de Creus com a símbol), Costa del Montgrí, i la Costa Brava Granítica (de Begur a Blanes). Entremig hi ha zones planeres en llocs puntuals (golf de Roses, platja de Pals, badia de Palamós i Sant Antoni i la badia de 64

Platja d’Aro). Posteriorment, mitjançant una taula, es feia una descripció de cada municipi i el conjunt de platges i cales. Contenia alguna fotografia de baixa resolució per a il·lustrarho. - Ferran Agulló. Biografia de Ferran Agulló, qui batejà la Costa Brava. També es comentava que hi havia diferents teories sobre des d’on es va fer. - Llibres de la Costa Brava. Llista de llibres que tracten la Costa Brava classificats segons segles i ordenats cronològicament. - Revistes de la Costa Brava. Taula amb un recull de les revistes que contenen articles referents a la Costa Brava i les dates. - Programes i reportatges televisius de la Costa Brava. Taula amb un recull dels programes televisius que han parlat sobre la Costa Brava amb el nom del programa, una descripció, les cales i platges enregistrades, la data d’emissió i el canal. - El gran Camí de Ronda de la Costa Brava. Contenia una introducció de la llei de costes i seguidament, una taula amb un recull de les obres realitzades a aquests des de l’any 1994, classificat per any, municipi, descripcions i una imatge il·lustrativa. La nova proposta busca filtrar la informació segons les dades de cada un dels municipis de la Costa Brava. A més, també s’introduí un menú de cerca per tal que l’usuari pogués cercar les paraules clau d’allò que desitgés. La proposta és la següent: - Portada. Portada de la pàgina web que introdueix els objectius de la plataforma, informació del seu autor Josep Castelló, d’on prové el nom de la Costa Brava segons Ferran Agulló i finalment, un apartat de contacte. - Selector de pobles. Es pot seleccionar qualsevol població de la Costa Brava o bé, informació general. - Informació del poble. Es tracta d’una fitxa amb la informació del poble i des d’aquí, es poden consultar les darreres obres realitzades als camins de ronda d’aquella localitat i quines són les publicacions en llibres o revistes que hi apareix o els programes de televisió que s’hi han dut a terme. - Publicacions. Es filtren les publicacions dels llibres i revistes on hi apareix aquell poble i els programes de televisió que hi han estat enregistrats. Allà es poden mostrar totes les fonts o seleccionar quines es volen visualitzar. En prémer en cada un dels ítems, es pot entrar a una fitxa específica amb les dades. L’usuari pot diferenciar la categoria de cada una de les publicacions segons el seu color i una etiqueta que ho indica. - Els camins de ronda. Es tracta d’un selector de les darreres actuacions dutes a terme als camins de ronda de cada una de les localitats. En prémer cada un dels ítems, es pot visualitzar la fitxa amb la informació més específica. - Cerca. Menú per poder cercar la informació que l’usuari desitgi. Els resultats es disposen de la mateixa manera que les publicacions de cada una de les poblacions. 65

2.2.7.1. ORDENACIÓ DE TARGETES Per a l’ordenació de tot aquest contingut van ser útils tècniques com l’ordenació de targetes, que consisteix en crear diferents targetes i omplir-les amb els diferents apartats que ha d’incloure la pàgina web. D’aquesta manera, es poden ordenar segons com es desitgi i considerar quina és la millor manera per a crear l’arquitectura de la informació.

Figura 32. Ordenació de les targetes

Aquesta és la versió final de l’ordenació de les targetes en les quals tenim en primer terme la portada; en segon, els pobles i a dins d’aquests, els programes de televisió, els articles de les revistes, els llibres i les obres als camins de ronda.

2.2.7.2. GESTORS DE CONTINGUTS Per a aconseguir una plataforma amb els apartats mostrats anteriorment es va decidir usar un gestor de continguts ja existent. D’aquesta manera es podria assolir més facilitat a l’hora d’introduir la informació a la pàgina web i recuperar-la per a mostrar-la. Aquesta facilitat tècnica pot afavorir a tenir la informació al dia. Per aquest motiu, l’ús d’un gestor de continguts per a emmagatzemar tota la informació va ser una de les principals tasques de creació de la nova plataforma. Es va emprar la plataforma ja existent WordPress, perquè ofereix la possibilitat de crear publicacions amb una certa rapidesa i facilitat, a més, també ofereix una API que permet recuperar la informació i poder-la mostrar com es desitgi. 66

Tot i això, s’hagueren de crear diferents tipologies de publicacions per separar els pobles de la Costa Brava d’una banda, i per altra, totes les que poden ser cercades pel buscador: llibres, revistes, programes i camins de ronda. A més, a cada una es van crear diferents camps que poden ser omplerts amb les dades de cada una de les publicacions com les dates d’emissió, els noms dels programes o les editorials dels llibres, entre d’altres. Per a fer-ho, s’emprà el plugin Pods que ofereix la possibilitat de crear noves tipologies de continguts amb els camps que un desitgi. D’altra banda, una de les problemàtiques que es tingué va ser entrar totes les dades en aquesta plataforma, per això, es copiaren les taules de la web original en un full de càlcul, s’arreglaren els errors, es distribuïren en les columnes i files necessàries i un cop finalitzat, es desà el document en format CSV, un format que permetia ser importat a l’extensió WP Ultimate CSV Importer que per a cada fila del full de càlcul creava una nova publicació i copiava cada columna al camp corresponent prèviament creat. D’altra banda, també es disposaren d’extensions per a poder fer còpies de seguretat.

2.2.8. DIAGRAMA DE FLUX I MAPA DE NAVEGACIÓ Un cop desenvolupada l’arquitectura de la informació, el diagrama de flux va ajudar a decidir quin seria el comportament dels usuaris. Totes les dades van filtrades per cada un dels municipis, d’aquesta manera, un cop s’accedeix a cada població es poden consultar quines són les publicacions sobre aquesta i quines han estat les darreres actuacions als camins de ronda. Per a tal de facilitar la navegació de l’usuari, a la part inferior hi ha menús que permeten canviar de pantalla, és a dir, de les ‘Publicacions’ als ‘Camins’ o a la inversa. Per a tal de retornar a la vista del poble, es pot prémer als noms dels títols o bé, tornant enrere amb el botó d’aquesta funció. Si no es desitja aquesta opció de navegació perquè es vol cercar quelcom més concret, l’usuari sempre podrà emprar el cercador que se situa al menú superior. També cal fer esment que l’usuari podrà sortir de la web, és a dir, si es pot visualitzar un audiovisual o visitar la pàgina que ven un dels llibres en qüestió, s’activarà un botó per a consultar-ho, però sempre s’obrirà en una nova pestanya per a tal que l’usuari pugui retornar quan ho desitgi a la plataforma i no es redueixi el temps de consulta de la web. Tot seguit s’incorporen el diagrama de flux del comportament de l’usuari i el mapa de navegació de l’estructura del portal.

Diagrama de flux del comportament de l’usuari

INICI

vols conèixer un poble?

sí

SELECCIONAR UN POBLE

sí

vols saber quines publicacions hi ha?

vols saber les obres dels camins de ronda?

sí

PUBLICACIONS D’UN POBLE

SELECCIONAR OBRES

Figura 33. Diagrama de flux

del comportament de l’usuari

Els usuaris si desitgen conèixer un poble, se’ls oferirà les dades rellevants de la localitat i l’opció de poder consultar quines són les publicacions d'allà i les actuacions als camins de ronda. Tot seguit, en el mapa de navegació, es pot veure com des del selector del poble es pot accedir a la fitxa de cada un dels pobles, i a dins de la fitxa, les publicacions d’aquella localitat i les actuacions dels camins. En tot moment es podran usar els menús de cerca i de navegació. MENÚ DE NAVEGACIÓ

PORTADA

MENÚ DE CERCA

SELECTOR POBLE FITXA DEL POBLE PUBLICACIONS LLIBRES

CAMINS DE RONDA CAMINS

REVISTES PROGRAMES TV Figura 34. Arbre de navegació de la pàgina web

En aquest arbre de navegació s’indiquen els colors de cada una de les categories del projecte.

2.2.9. WIREFRAMES Un cop desenvolupats els apartats, els wireframes van servir per a poder començar a estructurar com quedaria disposada de forma visual en cada una de les pantalles, però sense elements de disseny. Així es va poder començar a valorar si la navegació proposada era la correcta, quines eren les millores que es podien fer i si les dades que s’havien de mostrar a la pantalla estaven ben disposades. A mesura que es va anar avançant el projecte, la disposició dels wireframes va anar variant i es va anar millorant segons les correccions que es percebien. La portada inicial és la presentació d’allò que els usuaris poden trobar-se a la web. Es fa una breu introducció sobre el projecte, qui l’ha dut a terme -Josep Castelló-, d’on ve el nom de la Costa Brava segons Ferran Agulló i finalment, un espai per al contacte per a tal que la gent també pugui participar amb la creació de continguts. El selector de poblacions es va preferir disposar les fotografies en format horitzontal per a crear panoràmiques de cada una de les poblacions i canviar en com es mostraven respecte a les altres propostes. Seleccionant cada un dels municipis es pot accedir a la informació d’aquests i a una breu descripció. La descripció de cada una de les poblacions és molt bàsica, conté una fitxa al lateral esquerre i a la dreta, el nom del poble, una descripció i un mapa. Amb els botons inferiors es pot anar a consultar quines són les publicacions d’aquella localitat i les darreres actuacions en els camins de ronda. Sempre es poden seleccionar mitjançant un selector similar al dels pobles. En el cas de les publicacions, com que n’hi ha en molta quantitat, es va decidir afegir-hi un filtre a la part superior dreta. La plantilla de cada una de les publicacions o les dels camins de ronda segueixen una pauta similar, com també la de cada una de les poblacions. A la meitat esquerra hi ha una fitxa amb les dades de cada font -els camps varien segons si és un llibre, una revista, un programa de televisió o un camí de ronda- i a la dreta, el títol i una descripció. Sempre s’indica la categoria de què es tracta.

MENÚ

BOTÓ

Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

JOSEP CASTELLÓ Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

FERRAN AGULLÓ Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

BOTÓ

CONTACTA

Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Figura 35. Wireframe de la portada de la web BOTÓ

MENÚ

NOM POBLE

BOTÓ ENRERE

PUBLICACIONS

CAMINS

Figura 36. Wireframe del selector dels pobles

MENÚ

NOM DEL POBLE

HABITANTS

12340

HABITANTS

12340

HABITANTS

12340

CALES Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.

BOTÓ ENRERE

COMARCA

Figura 37. Wireframe de la vista dels pobles 72

MENÚ

NOM DEL POBLE

BOTÓ FILTRE

TÍTOL

BOTÓ ENRERE

CAMINS

Figura 38. Wireframe del selector de les entrades

MENÚ

NOM DEL PROGRAMA TÍTOL

12340

EDITORIAL

LOREM IPSUM

DADA 3

12340

CATEGORIA Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

LOCALITZACIÓ Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus.

BOTÓ ENRERE

POBLACIONS

Figura 39. Wireframe de la vista d’una de les entrades 73

MENÚ

NOM DEL POBLE Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus.

BOTÓ ENRERE

TÍTOL

PUBLICACIONS

Figura 40. Wireframe del selector dels camins de ronda MENÚ

OBRES CAMINS DE RONDA ANY

2000

DADA 2

LOREM IPSUM

LOCALITZACIÓ

Maecenas sed diam eget risus varius blandit sit amet non magna.

BOTÓ ENRERE

POBLACIONS

Figura 41. Wireframe de l’entrada dels camins de ronda 74

MENĂ&#x161;

Figura 42. Wireframe del menĂş de la cerca

2.2.10. EL DISSENY D’INTERFÍCIE4 El disseny va constar de dos blocs d’actuació principals: la creació de la identitat visual gràfica amb un treball de la marca de ‘Costa Brava Singular’ i el disseny de la interfície web. Partint dels wireframes es començà a dissenyar gràficament les diferents pantalles. Des d’un inici es va tenir clar que aquesta havia de ser clara i senzilla per a tal d’afavorir una bona comprensió de les dades que s’hi mostraven i també, havia de ser quelcom molt visual. Com ja s’ha exposat amb anterioritat, el número 4 va ser essencial a l’hora de plantejar tots els elements gràfics i també, per a ordenar cromàticament la informació segons les diferents categories del contingut. La divisió cromàtica és la següent:

Turquesa Tot allò referent al poble (informació de la localitat i els camins de ronda)

Blau Llibres

Verd Revistes

Groc Programes de televisió

Mitjançant aquesta separació, l’usuari pot conèixer en tot moment en quin apartat es situa i de quina categoria és la informació que consulta. L’imagotip de la capçalera també va variant segons l’apartat en què ens trobem. Referent al contingut textual, aquest canvia depenent de la pàgina on l’usuari es troba i del contingut de cada publicació, per a això, en molts casos el disseny es va treballar en el format scroll que s’adapta a la llargada dels textos dels diferents apartats. Les pàgines segueixen una distribució responsive, és a dir, el contingut es va adaptant depenent de l’amplada del dispositiu en què es visualitza. També cal fer esment que hi ha una amplada màxima que en superar-la augmenten els marges laterals per a tal de poder garantir una bona visualització de la web en les diferents plataformes. 4

Als annexos hi ha imatges d'algunes variants del disseny de la interfície 76

2.2.10.1. JUSTIFICACIÓ DELS APARTATS: HOME Es tracta d’una presentació a l’usuari de què es trobarà a la pàgina web. Conté també la biografia de Josep Castelló, el creador de la plataforma; la de Ferran Agulló que justifica d’on apareix el concepte de Costa Brava i finalment, un apartat de contacte per a tal que tothom pugui enviar correccions o participi en la creació del contingut. Està formada mitjançant un scroll vertical. Cada apartat conté una imatge de fons diferent que ajuda a separar-los. Aquesta és un monotó amb algun dels colors treballats a la interfície per a tal que l’usuari es comenci a habituar als colors que trobarà durant tota l’experiència amb la plataforma i també en les imatges monotó que s’aniran emprant. Les fotografies que apareixen són de Josep Castelló, l’autor de la pàgina web. A nivell de retícula s’ha usat el format d’una gran foto que ocupa tot el fons de la pàgina perquè expressa molt més que diversos textos. En aquest cas, conté text a sobre, però sí que el fet d’usar imatges monotó com a fons permet introduir l’espectador a la temàtica de la web i al codi cromàtic que es trobarà si continua amb la seva experiència. Cada apartat es situa formant una columna vertical, és a dir, fent scroll es pot visualitzar cada un dels apartats.

Figura 43. Versió mòbil de la portada 77

costa brava singular

“Costa Brava Singular” és una pàgina web que té la voluntat de poder servir com a eina de consulta als estudiants i també de satisfer la curiositat de tots els possibles visitants o amants de la Costa Brava.

En estreta col·laboració amb diverses entitats que reivindiquen l’obertura dels camins de ronda i la correcta aplicació de la Llei de Costes (Associació d’Amics de la Unesco o Salvem el Crit) ha participat també en diversos programes de televisió, com per exemple Catalunya Avui, Els matins d'Estiu, Gran Angular o Thalassa. L’any 2005 també en relació amb el tema, publicà dins el Nou Palafrugell una guia per resseguir els diferents itineraris del camí de ronda. Per tal motiu, en la carta de presentació, podeu observar el perﬁl d’un rapinyaire colossal que sempre vigila des de la seva talaia: és l’Ocellot. Aquesta emblemàtica roca, dissortadament, ha esdevingut tot un símbol de la lluita per a la defensa del paisatge de la Costa Brava. Resulta que des de fa uns quants anys “no pot volar” perquè ha quedat encerclada per dos xalets que, de forma totalment impune, van tallar el camí de ronda.

INICIA LA CONSULTA

Josep Castelló “Caste”

(Palafrugell, 1965), porta molts anys recorrent la costa gironina -tant en barca com a peu-, i s’ha dedicat a fotograﬁar-la de dalt a baix, i a recopilar tota mena d’informació d’arxius i biblioteques.

costa brava singular

“Era dalt d'un espadat feréstec, que baixa al mar, en terratrèmol de roques, per atzavares verdes i fonolls d'or. En son cim unes ruïnes d'un antic convent li donen to llegendari; a llevant, una esplèndida decoració de caps i roques, puntes i freus, penyalars i cales, fins a les fantàstiques muntanyes de Tossa, esborrallades de boscúries, corprenen l'entusiasta admirador de la nostra Costa; a garbí la plàcida corba de les platges de Blanes i s'Abanell, fins a la punta de la Tordera, separades per un illot rocós que un istme ha ajuntat a la terra, reposa la mirada i l'enteniment, eixelebrats per l'espectacle de la costa brava; per la banda de terra, en grandiós amfiteatre, les serres de Pineda, Orsavinyà, Palafolls, el Montnegre, i més enllà el Montseny, prenen tots els colors de l'arc de sant Martí: són verdes, violades, blaves, grogues, i després van esvaint-se; esvaint-se, en l'ombra de la nit, com si es fonguessin.”

La Veu de Catalunya (3375) - 12 de setembre 1908 (edició de mitjanit) LLEGEIX

Ferran Agulló Vidal (1863-1933), advocat, escriptor, poeta i polític del partit de la Lliga Regionalista de Catalunya, fou qui per primera vegada anomenà com a Costa Brava el tram costaner comprès “des de la Tordera al Cap de Creus, i seguint el Port de la Selva ﬁns a Banyuls”.

Contacta Has vist algun programa de televisió, article de revista o llibre que es parli de la Costa Brava. Ens pots fer arribar la informació a través del següent formulari. Nom

Correu electrònic

Descripció

ENVIA

Figura 44. Versió escriptori de la portada

2.2.10.2. JUSTIFICACIÓ DELS APARTATS: SELECTOR DELS POBLES Al començar l’experiència amb la plataforma, aquesta és la primera pàgina que es pot veure. És on s’ha de seleccionar la població que es vol consultar per a tal de conèixer una mica d’informació sobre aquest, quines són les publicacions que hi ha i les actuacions en els camins de ronda. Els botons de cada població són panoràmiques amb una fotografia formada per un monotó turquesa, ja que aquest color és el que sempre indica les informacions dels pobles com també el logotip de les onades. Les fotografies que apareixen són de Josep Castelló, l’autor de la pàgina web. La retícula emprada ha sigut les graelles de dues columnes on s’hi van situant els diferents municipis i es navega mitjançant un scroll vertical. En el cas de la versió mòbil, cada botó dels municipis es disposa en una sola columna.

costa brava singular

2016

Portbou

Llançà

Colera

El Port de la Selva

Figura 45. Selector dels

TORNA ENRERE

pobles

2.2.10.3. JUSTIFICACIÓ DELS APARTATS: PÀGINA DE LA POBLACIÓ Un cop seleccionada alguna de les poblacions s’entra en una fitxa sobre la informació d’aquesta com el nombre d’habitants, el gentilici, la superfície, les cales, la comarca en què es troba, una breu descripció de la seva geografia i un mapa. El mapa va ser creat seguint l’estètica del projecte i quan cal assenyalar algun accident geogràfic com illes o la presència d’un far, aquests són indicats mitjançant una iconografia dissenyada seguint les pautes de construir-les mitjançant els quatre elements -línies o semicercles. És una pàgina que parteix d’una retícula de pantalla dividida on al lateral esquerre hi ha una taula amb les dades més essencials de la població i al dret, el títol, una breu descripció i el mapa de la localitat.

costa brava singular

Palafrugell

SUPERFÍCIE

26,9 KM²

HABITANTS (2018)

22 860

GENTILICI

PALAFRUGELLENC/A

Litoral escarpat, amb penya-segats, cales i coves. A Llafranc hi ha un petit port esportiu. Destaca el cap de Sant Sebastià.

CALES

CALA MARQUESA, PLATJA D’EN GOTES, PLATJA GRAN, AIGUA DOLÇA, TAMARIU, ES PORTIÓ, CALA PEDROSA, EL CAU O CALA GENS, LLAFRANC, ELS CANYISSOS, SOTA CAN JULIBERT, EL CANADELL, PORT DE MALESPINA, PORT BO, PORT D’EN CALAU

Figura 46. Plantilla dels pobles

TORNA ENRERE

CERCA

CAMINS DE RONDA

2.2.10.4. JUSTIFICACIÓ DELS APARTATS: SELECTOR DE LES ENTRADES El selector de les entrades està format per 4 columnes on es mostren en una quadrícula les diverses entrades d’aquella localitat. De cada una s’indica el títol, l’autor o el canal d’emissió, l’any d’aquestes i la seva categoria. Si es disposa d’una imatge destacada, aquesta apareix com a fons i en format monotó del color de la categoria. Des d’aquesta també es pot accedir, mitjançant un botó, al selector dels camins de ronda o tornar enrere cap a la pàgina de la població. Les imatges que apareixen són portades dels llibres, o bé, fotogrames de l’audiovisual. La retícula emprada ha sigut les graelles de quatre columnes on s’hi van situant les diferents publicacions i es navega mitjançant un scroll vertical. En el cas de la versió mòbil, cada botó se situa formant columnes de dos. costa brava singular

costa brava singular

Palafrugell

AUDIOVISUALS

AUDIOVISUAL

LLIBRE

Las ruinas de mi convento

Arqueologia d’un naufragi CANAL 33 · 09/01/2019

Les barraques de pescadors

PATXOT, Fernando · 1851

LLIBRE

REVISTA

LLIBRES

AUDIOVISUAL

Palafrugell AUDIOVISUALS

Arqueologia d’un naufragi CANAL 33 · 09/01/2019

ARGO · 01/06/2009

REVISTA

REVISTES

AUDIOVISUAL

REVISTES LLIBRES

LLIBRE

AUDIOVISUAL

L’arquitectura. Conèixer Palafrugell

GIL TORT, Rosa M., MARINÉ DURÁN, Josep · 2010

TORNA ENRERE

“Geometría en el bosque”

ARQUITECTURA Y DISEÑO · 01/06/1989

Havaneres Grup Peix Fregit TV3 · 09/01/2007

L’arquitectura. Conèixer Palafrugell

Arqueologia d’un naufragi

GIL TORT, Rosa M., MARINÉ DURÁN, Josep · 2010

CANAL 33 · 09/01/2019

CAMINS DE RONDA

LLIBRE

L’arquitectura. Conèixer Palafrugell GIL TORT, Rosa M., MARINÉ DURÁN, Josep · 1851

AUDIOVISUAL

Arqueologia d’un naufragi CANAL 33 · 09/01/2019

LLIBRE

L’arquitectura. Conèixer Palafrugell GIL TORT, Rosa M., MARINÉ DURÁN, Josep · 1851

Figura 47. Selector de les entrades

LLIBRE

Las ruinas de mi convento

PATXOT, Fernando · 1851 REVISTA

“Geometría en el bosque” ARQUITECTURA Y DISEÑO · 1851

LLIBRE

Las ruinas de mi convento

PATXOT, Fernando · 1851 REVISTA

“Geometría en el bosque” ARQUITECTURA Y DISEÑO · 1851

C 80

2.2.10.5. JUSTIFICACIÓ DELS APARTATS: PÀGINA D’ENTRADES Al seleccionar qualsevol publicació, es redirigeix cap a la seva fitxa depenent de cada una de les categories. Els camps varien segons la categoria, com també el color de fons i el logotip de la capçalera que ajuda a distingir de què es tracta. Igualment, també apareix un indicador de la categoria. A la part inferior hi ha el nom de les poblacions de cada una de les entrades i un botó per a retornar a la pàgina anterior. És una pàgina que parteix d’una retícula de pantalla dividida on al lateral esquerre hi ha una taula amb les dades més essencials de la publicació i al dret, el títol, una breu descripció i la localitat.

Figura 48. Plantilla dels programes de televisió

Figura 49. Plantilla de les revistes

Figura 50. Plantilla dels llibres

costa brava singular

costa brava singular REVISTA

“Les barraques de pescadors”

Las ruinas de mi convento COSTA BRAVA

SANT FELIU DE GUÍXOLS

REVISTA

LLIBRE

ARGO

SUBTÍTOL

REVISTA DEL PATRIMONI I LA CULTURA MARÍTIMA DATA DE PUBLICACIÓ

09/01/2019

NÚMERO D’EDICIÓ

AUTOR

PATXOT, Fernando

EDITORIAL

IMP. LUÍS TASSO

ANY DE PUBLICACIÓ

1851

LLOC DE PUBLICACIÓ

BARCELONA

PORTADA

Donec id elit non mi porta gravida at eget metus. Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor piscing elit. VISUALITZA-HO

Figura 51. Mostra de les plantilles en la versió mòbil

2.2.10.6. JUSTIFICACIÓ DELS APARTATS: SELECTOR DE CAMINS El selector dels camins de ronda mostra les principals actuacions dutes a terme en aquests indrets en els darrers anys a cada municipi. Hi apareix què s’està fent i l’any d’actuació. Des d’aquest també es pot accedir a les entrades de cada població. Les fotografies que apareixen són de Josep Castelló, l’autor de la pàgina web, que va anar fent durant el seu moment i que formen part del seu arxiu. Es tracta d’una pàgina que disposa de dues tipologies de retícules. D’una banda hi ha una base lateral fixa que conté informació sobre aquell apartat, però a la segona meitat de la pàgina hi ha una graella de dues columnes que conté les publicacions de la categoria de ‘camins’.

costa brava singular

Palafrugell

Tot seguit pots consultar les darreres actuacions dels camins de ronda en aquest municipi.

Nova escalinata d’accés a la cala Gran d’Aigua Xelida

Senyalització i desbrossament del tram Cala Marquesa- sa Roncadora

2016

2015

TORNA ENRERE

CERCA

2016

2015

Figura 52. Selector dels camins de ronda

2.2.10.7. JUSTIFICACIÓ DELS APARTATS: PÀGINA DE CAMINS Es tracta de la fitxa de cada una de les obres que s’han dut a terme als camins de ronda. Es tracta d’una plantilla similar a la de les entrades. Al lateral esquerre hi ha les dades més importants i a la dreta, el títol i una breu descripció. A la part inferior s’indica el nom del poble. És una pàgina que parteix d’una retícula de pantalla dividida on al lateral esquerre hi ha una taula amb les dades més essencials de l’actuació dels camins i al dret, el títol, una breu descripció i la localitat.

costa brava singular

ANY

costa brava singular 2006

LOCALITZACIONS

CALA GRAN D’AIGUA XELIDA

Nova escalinata d’accés a la cala Gran d’Aigua Xelida Sector corresponent a la urbanització d’Aigua Xelida que connecta amb el carrer de l’Avi Xaixu. Aquesta nova escalinata (amb barana inclosa i enllumenat a nivell del terra) ha substituït l’antic corriol relliscós de sauló o gresa que hi menava.

CAMINS DE RONDA

Nova escalinata d’accés a la cala Gran d’Aigua Xelida PALAFRUGELL

2006

ANY LOCALITZACIONS

CALA GRAN D’AIGUA XELIDA TORNA ENRERE

PALAFRUGELL

Sector corresponent a la urbanització d’Aigua Xelida que connecta amb el carrer de l’Avi Xaixu. Aquesta nova escalinata (amb barana inclosa i enllumenat a nivell del terra) ha substituït l’antic corriol relliscós de sauló o gresa que hi menava.

Figura 53. Plantilla dels camins de ronda

2.2.10.8. JUSTIFICACIÓ DELS APARTATS: MENÚ DE CERCA 2016

2004

És una pàgina amb un input per a escriure-hi què és el que es vol cercar i seguidament apareix una pàgina similar al selector de les entrades amb els resultats de la consulta duta terme.

Figura 54. Menú de cerca del projecte 84

2.2.10.9. JUSTIFICACIÓ DELS APARTATS: MENÚ DE L’HAMBURGUESA És un menú que incorpora un botó que permet accedir a la pàgina de cada una de les localitats. És útil perquè permet una navegació més ràpida sense haver d’anar al selector dels pobles.

costa brava singular PORTBOU

COLERA

EL PORT DE LA SELVA ROSES

LLANÇÀ CADAQUÉS

CASTELLÓ D’EMPÚRIES

SANT PERE PESCADOR

L’ESCALA

TORROELLA DE MONTGRÍ I L’ESTARTIT PALS

BEGUR

MONT-RAS

PALAFRUGELL

PALAMÓS

CALONGE I SANT ANTONI CASTELL-PLATJA D’ARO I S’AGARÓ SANT FELIU DE GUÍXOLS SANTA CRISTINA D’ARO LLORET DE MAR

TOSSA DE MAR

BLANES

Figura 55. Menú del projecte

2.2.10.10. JUSTIFICACIÓ DELS APARTATS: LA CAPÇALERA La web sempre disposa d’una capçalera fixa que va canviant de color i de logotip depenent de l’apartat en què se situa l’usuari.

2.2.11. LES ANIMACIONS DE LA INTERFÍCIE La web disposa de diverses animacions. - Botons al fer hover. Quan es fa hover pels diferents botons aquests canvien els seus estils per a tal d’indicar a l’usuari que ha passat per a sobre i facilitar-li la navegació. Aquesta opció només és funcional quan es consulti la web des d’un ordinador d’escriptori, ja que als mòbils i les tauletes aquesta opció no és operativa. - Transició entre pàgines. Les animacions de transicions permeten aportar una entrada i/o sortida a les diferents pantalles quan hi ha un canvi entre elles. D’aquesta manera permet crear a l’usuari una narrativa i la sensació d’entrar cada cop més en un tema, és a dir, si cada cop que es consulta quelcom més específic es fa una transició cap a la dreta, i quan siguin temes menys específics, a l’esquerre, ajuda a indicar a l’usuari de quin grau d’especificitat és allò que està consultant. - Botons del menú. Els botons del menú canvien segons si estan actius o no. L’hamburguesa es converteix en una creu quan el menú està actiu, el mateix passa amb la lupa, que també esdevé una creu quan s’està fent una cerca. En cas de prémer cada una de les creus, permet tancar el seu menú i retornar a la pàgina que s’estava consultant.

2.2.12. ELS LLENGUATGES DE PROGRAMACIÓ A l’apartat de l’arquitectura de la informació s’ha fet esment de què els continguts de la plataforma estaven emmagatzemats en un gestor de continguts extern que permetia al client poder introduir els diferents continguts per a poder-los mostrar a la plataforma. Paral·lelament a això, s’ha emprat els llenguatges HTML, CSS i JavaScript amb una base d’Angular.Js, un entorn de treball de codi lliure de l’empresa Google que permet recuperar la informació de l’API i mostrar-la a les vistes creades prèviament. D’aquesta manera, es poden crear les vistes de cada una de les categories, recuperar la informació de la base de dades i mostrar-la a l’usuari fàcilment. En conclusió, aquesta manera de treballar la plataforma ha estat la més adient perquè sí que hi ha hagut feina en programar les diferents vistes de la web i com s’havia de recuperar les dades des del WordPress, però un cop operativa, aquesta ja no necessita ser modificada perquè totes les actualitzacions es poden fer des del gestor de continguts, fet que suposa molta més comoditat i facilitat. Fins ara, la web original per a ser actualitzada era necessari modificar el codi HTML directament per a crear les noves cel·les i incorporar-hi tota la informació i vincular-hi les imatges. Com a punts negatius, no obstant això, el fet de crear les vistes ha suposat haver de preveure diferents llargades dels textos i procurar que sempre es puguin anar adaptant a la base ja programada. 86

2.2.12.1. GITHUB Per a tal de poder realitzar un seguiment de les tasques dutes a terme amb la programació, es va crear un repositori de GitHub on s’anava actualitzant amb els avenços que s’anaven duent a terme. D’altra banda, també servia com a còpia de seguretat de la programació del projecte.

2.2.13. PERMISOS Per a poder desenvolupar la pàgina web es va demanar que Josep Castelló signés un document per tal de disposar del permís per a utilitzar el material bibliogràfic de la seva plataforma i les imatges cedides per a ell. D’aquesta manera, aquesta documentació permet garantir l’ús de la seva propietat intel·lectual per a la creació del Treball Final de Grau.

2.2.14. DIFUSIÓ Fins ara s’ha fet una proposta de disseny d’una web i programació, però també s’ha preparat una proposta de difusió mitjançant les xarxes socials. De moment no ha començat perquè fa falta el vistiplau del client, no obstant això, s’han planejat quines serien les principals línies d’actuació. La principal xarxa social que s’usaria seria Instagram perquè és la més usada en el públic jove, tot i que també es podrien fer publicacions a Facebook i a Twitter. D’altra banda, amb Instagram es podrien penjar històries que poden ser vistes pels seguidors i després animar-los a entrar al perfil per a tenir més informació de la publicació.

2.2.14.1. PLANTILLES DE LES PUBLICACIONS Les publicacions podran contenir informació com el nom de les dades de les entrades de la pàgina web, els imagotips del projecte o bé, fotografies de la Costa Brava. S’ha emprat un disseny que utilitza la mateixa estructura que el selector de les entrades a la pàgina web, per tant, els usuaris que usin el portal web ja estaran habituats als llenguatges de les publicacions de les xarxes socials. Per a cada categoria de publicació, s’emprarà el color prèviament establert. Si es disposa d’una imatge il·lustrativa, aquesta se situarà de fons amb el format monotó treballat diverses vegades durant el projecte. Seguidament hi ha la mostra per compartir les publicacions sobre els programes de televisió.

AUDIOVISUAL

De ruta per Pals TV3 09/01/2007

AUDIOVISUAL

De ruta pel Cap de Creus TV3 09/01/2007

Figura 56. Plantilla de les publicacions dels programes de televisió 89

REVISTA

Històries de vivències

REVISTA

Històries de vivències

REVISTA DE L’ESCALA 01/09/2019

Figura 57. Plantilla de les publicacions de les revistes

En tots els casos s’indica la categoria, el nom d’aquesta, l’autor o el nom de la revista i la data de publicació o emissió. També apareix la variant del logotip que li pertoca així com el color.

LLIBRE

Sant Feliu des de dins VILA, PERE 2019

LLIBRE

Sant Feliu des de dins VILA, PERE 2019

Figura 58. Plantilla de les publicacions dels llibres

CAMINS DE RONDA

Rehabilitació de l’escala de pas 2019

CAMINS DE RONDA

Rehabilitació de l’escala de pas 2019

Figura 59. Plantilla de les publicacions dels camins de ronda

Desembocadura del Fluvià SANT PERE PESCADOR

Figura 60. Plantilla de publicacions sobre fotografies de la costa

Els logotips es compartiran amb el fons que li pertoca i el l’imagotip centrat.

Figura 61. Plantilla de les publicacions amb l’imagotip

Els noms dels pobles no apareixeran a la imatge perquè sovint n’hi poden haver més d’un i per tant, podrien molestar. Sempre se situaran al comentari de la publicació.

Figura 62. Mockup de la visualització a Instagram

Figura 63. Mockup del perfil dâ&#x20AC;&#x2122;Instagram

A les altres xarxes socials es compartirien les mateixes publicacions i els comentaris seguint el mateix format.

2.2.14.2. HISTÒRIES D’INSTAGRAM Les històries d’Instagram també emprarien la mateixa estructura que les publicacions esmentades amb anterioritat. Es jugaria amb els colors i els imagotips segons les categories.

LLIBRE

Sant Feliu des de dins VILA, PERE 2019

LLIBRE

Sant Feliu des de dins VILA, PERE 2019

Figura 64. Històries dels llibres

AUDIOVISUAL

Rehabilitació de l’escala de pas

De ruta per Pals

TV3 09/01/2007

REVISTA

Històries de vivències

REVISTA DE L’ESCALA 01/09/2019

CAMINS DE RONDA

2019

CAMINS DE RONDA

Rehabilitació de l’escala de pas 2019

REVISTA

Històries de vivències

REVISTA DE L’ESCALA 01/09/2019

El Fluvià SANT PERE PESCADOR

Figura 65. Mostra de les altres tipologies d’històries

2.2.14.3. CORREU ELECTRÒNIC PER A CENTRES EDUCATIUS Per a difondre la pàgina web a escoles, instituts i universitats, s’enviaria correus electrònics per a donar a conèixer la plataforma i que els i les docents puguin recomanar-la als estudiants que la necessitin. Seguidament es mostra una plantilla de correu per a enviar.

Costa Brava Singular és un projecte que té com a objectiu poder oferir ajuda als estudiants a l’hora de poder desenvolupar un treball relacionat sobre la costa que va des de Portbou fins a Blanes. És un projecte nascut l’any 2006 per part de Josep Castelló, un palafrugellenc aficionat a recórrer la Costa Brava de nord a sud i a la inversa i és l’autor de llibres com El perfil de la Costa. Palafrugell, Mont-ras i les Illes Formigues (2003) o Costa Brava Autèntica (2009). Va confeccionar el mapa La costa de l’Empordanet (1998) amb J. Bañeras i J. Plana. Ha entrevistat pescadors, submarinistes, amos de barraques, entesos sobre la costa… Ha visitat arxius per a conèixer encara més sobre aquest litoral. A Costa Brava Singular es pot trobar un recull de quins han estat els llibres, les revistes i els programes de televisió que tracten sobre cada un dels pobles, com també, quines han estat les darreres obres dutes a terme als camins de ronda d’aquestes localitats. Es pot trobar tota la informació a la pàgina web costabravasingular.cat

Figura 66. Plantilla de correu electrònic per a centres educatius

2.2.15. EQUIP El treball va ser programat amb la tutorització del professor Jordi Márquez i en l'àmbit de disseny, amb les tutories de Jordi Caralt. Èlia Bosch, Clara Camps, Ester Cánovas, Anna Fàbrega i Judith Navarra van ajudar-me a valorar les diferents decisions en l'àmbit de de la proposta gràfica gràcies a les converses que vam intercanviar durant els mesos de la producció del treball. Per a fer les proves d’usabilitat es van qüestionar a persones fora de l’ERAM perquè no coneguessin de què anava el projecte ni haguessin vist les proves gràfiques i de programació que s’havien anat treballant. Les persones que van ajudar-me van ser l’Adrià Castelló, la Tamara García, la Montse Martí, la Xènia Poyano i l’Elisenda Ventura. Les fotografies utilitzades van ser les de l'arxiu de Josep Castelló, així com el contingut textual de la plataforma.

2.2.16. MOCKUPS Seguidament hi ha una mostra dels mockups de la pĂ gina en les versions escriptori i mĂ˛bil.

Figura 67. Mockup del selector de les entrades

Figura 68. Mockup de la plantilla de programes de pobles 97

Figura 69. Mockup de la portada

Figura 70. Mockup de diferents pĂ gines en les versions mĂ˛bils 98

2.2.17. VÍDEO DE PROMOCIÓ Per a tal de promoure la pàgina web i ensenyar-ne el seu funcionament es va desenvolupar un vídeo animat mitjançant els programes Adobe After Effects i Final Cut Pro. Es tracta d’un clip de curta durada, però que mostra de què tracta la web i com funciona.

Figura 71. Fotograma del vídeo de promoció

2.2.18. PRESSUPOST Per al càlcul dels costos de creació d’aquest projecte s’han agrupat les tasques que s’han dut a terme, s’ha calculat el temps que es tardaria si es tornés a desenvolupar l’activitat i s’ha multiplicat per un cost de 30 euros/hora. Cal tenir en compte que moltes de les fases van ser dutes a terme per primera vegada en aquest projecte i per tant, un gran nombre d’hores van ser usades per a l’aprenentatge i a la resolució de problemes. TASCA Creació i disseny del branding Desenvolupament de l’arquitectura de la informació Disseny de la interfície Programació de la web Tipografia TOTAL

HORES 40 20 40 100

PREU/ HORA 30 30 30 30

TOTAL 1 200 600 1 200 3 000 400 6 400

Taula 1. Pressupost

Cal remarcar que les fotografies i la informació van ser cedits per part de Josep Castelló i per tant, no va requerir fer-ho, ni que tampoc s'ha tingut en compte s'ha fet un compte de les despeses d'amortització ni del cost del programari. 99

3. AVALUACIÃ&#x201C;, MILLORA I PROSPECTIVA

100

3.1. Conclusions i valoració dels objectius Pel que fa al compliment dels objectius, opino que aquests s’han pogut complir. L’objectiu principal va ser el redisseny d’una pàgina web ja existent per a oferir-li una estètica actualitzada i moderna. A més, no només va ser això, sinó que va caldre refer la imatge de marca, desenvolupant tota una identitat gràfica i aportant-li un concepte creatiu que justifiqués la proposta visual assolida. Va ser necessari desenvolupar una arquitectura de la informació per a refer la distribució de la informació que era existent fins llavors i per tant, posteriorment incorporar-la en un gestor de continguts per a recuperar-la en una web programada seguint el treball gràfic fet prèviament. Per a dur-ho a terme, se cercaren referents de pàgines web per analitzar-les gràficament, però també en com s’organitzava la informació i com es treballava la marca. A més, s’investigà quin era el procés de creació d’una web per a posar-ho en pràctica. A part d’això, es van treballar els conceptes d’usabilitat i accessibilitat, sent conscients de la importància d'haver de pensar amb l’usuari final que emprarà la plataforma que es desenvoluparà. Tanmateix, primer es va fer la recerca del procés de creació -basant-se en l’experiència d’usuari i la interfície d’usuari- d’una pàgina web per a posar-ho en pràctica i considero que es va assolir. Ha estat un projecte que ha permès usar treballar diferents programaris com l’Adobe Illustrator, l’Adobe Photoshop per a desenvolupar la imatge gràfica, l’Adobe AfterEffects i el Final Cut Pro per a crear el vídeo de promoció i un editor de codi per a programar els llenguatges HTML, CSS i JavaScript. Per a la maquetació de la memòria s’ha emprat l’Adobe InDesign.

101

3.2. Avaluació del procés de creativitat 3.2.1. FACTOR DE FLUÏDESA Des d’un inici es tingué clar que la paraula ‘singular’ havia de ser clau per a la creació de tot el projecte. A partir d’aquesta premissa, es començà a buscar quins podien ser aquests elements fins a arribar als del turquesa del mar, les roques, els pins dels camins de ronda i el cel net per l’efecte de la tramuntana que també va permetre justificar-los amb colors. Es van escollir que fossin quatre elements perquè també és com es pot dividir la Costa Brava en l’àmbit geològic, quelcom físic. I per tant, a partir del valor ‘quatre’ es va anar justificant els diferents conceptes. A més, el fet d’usar els semicercles, també permetia vincular gràficament la forma de les cales, quelcom propi de la Costa Brava. Aquest, però, només va ser el treball de la marca, també va caldre dissenyar la proposta de la interfície que va suposar la realització de proves, esquemes… , i les seves reformulacions, ja fos per un mal resultat gràfic, o bé, per les necessitats i possibilitats tècniques. Ha estat un projecte que ha permès posar en pràctica diverses tècniques per assolir el procés de creació d’una web i per tant, a la resolució dels problemes a mesura que anaven apareixent, alguns previsibles i d’altres, no.

3.2.2. FACTOR DE FLEXIBILITAT La justificació del concepte de ‘singularitat’ amb els quatre elements també han permès ajudar en la creació de l’arquitectura de la informació. Els quatre elements també se sumen a les quatre categories del portal: programes de televisió, revistes, llibres i camins de ronda. Per a arribar a aquestes conclusions, va ser essencial llegir i cercar informació sobre aquesta zona geogràfica per a arribar al concepte que servís com a punt de partida per al desenvolupament de tots els continguts.

3.2.3. FACTOR D’ELABORACIÓ El projecte va tenir dos blocs marcats, d’una banda el desenvolupament de la marca amb el concepte, ja esmentat prèviament que s’assolí mitjançant la lectura i les relacions de conceptes i per altra, la de la creació de la web que es van seguir les tècniques analitzades durant la fase teòrica, com el plantejament de la usabilitat, l’accessibilitat, l’arquitectura de la informació, definir els usuaris potencials, la creació de wireframes… I sempre tenint en compte quines serien les necessitats dels usuaris. 102

De moment, tot el material gràfic necessari ja ha estat creat, sí que potser amb el temps aniran apareixent necessitats, però la majoria d'aquestes podran ser resoltes mitjançant la feina duta a terme avui dia. Tot el que de moment s’ha considerat necessari o que ho podrà ser en un futur, s’ha deixat preparat. Evidentment, serà un projecte en evolució i per tant, caldrà l’adaptació constant.

3.2.4. FACTOR D’INNOVACIÓ El portal Costa Brava Singular és l’únic d’aquesta temàtica existent actualment en aquest punt geogràfic, però ara era necessari actualitzar-lo als llenguatges i necessitats actuals. El factor d’innovació ha estat poder relacionar aquest treball de marca per a assolir la identitat visual final i per a desenvolupar una nova proposta d’interfície gràfica on la informació pogués ser mostrada d’una forma més clara i fàcil per a l’usuari, però alhora també més atractiva i sempre buscant la comoditat del mateix usuari.

3.3. Autoavaluació i millora En l’àmbit personal estic satisfet amb l’assoliment dels objectius prèviament establerts, però evidentment encara és un projecte que té moltes portes a obrir. Ara com ara, s’ha fet una proposta per a refer una web existent, però encara no està en funcionament, ja que cal la validació final del client. La web està operativa i a punt de ser penjada, però sí que caldria treballar la comunicació per a donar-la a conèixer, ja sigui mitjançant formes tradicionals com el SEO o les xarxes socials. Per aquest fet, probablement s’hauran de crear nous elements gràfics. Les plantilles per a les xarxes socials o els correus per a enviar als instituts són algunes de les mostres de les primeres línies d’actuació en el moment en què aquesta web es posi operativa. A mesura que es percebin noves necessitats, aquestes hauran de ser resoltes. Quelcom a remarcar és l’opció de poder treballar la imatge gràfica al Seminari de disseny gràfic de Jordi Caralt perquè va permetre avançar el projecte en l’àmbit formal, i amb les tutories amb en Jordi Márquez, es va poder fer tècnicament realitat aquest projecte.

103

3.4. Prospectiva i disseminació del projecte Tal com ja s’ha exposat prèviament, caldrà difondre la pàgina web per a fer-la més coneguda i assolir més visualitzacions. D’altra banda, també s’haurà d’anar actualitzant amb la informació que vagi apareixent, així com anar solucionant errades que puguin detectarse a l’hora de navegar per a tal de facilitar l’experiència de l’usuari i que aquesta sigui la millor possible.

104

105

4. BIBLIOGRAFIA

106

4.1. Llibres Cato, J. User-centered web design. Addison-Wesley: Harlow; 2001 Dickson, G. W; Wetherbe, J. C. The Management of Information System. McGraw-Hill: Nova York; 1985 Krug, S. Don’t make me think! A common sense approach to web usability. New Riders Press: San Francisco, 2000 Krug, S. Rocket surgery made easy. New Riders: Berkeley, 2010 Lopuck, L. Web Design For Dummies. John Wiley & Sons: New York City, 2012 Nafría, I. Web 2.0. El usuario, el nuevo rey de Internet. Gestión 2000: Barcelona, 2007 Nielsen, J. Usability engineering. Morgan Kaufmann: Califòrnia; 1993 Nielsen, J. Designing Web Usability. New Riders: Indianapolis; 1999 Paciello, M. G. Web Accessibility for People with Disabilities. CRC Press: Boca Raton, 2000 Rosenfeld, L.; Morville, P. Information Architecture for the World Wide Web. O’Reilly: Cambridge; 1998 Solomon, D.A.; Custer, H. Inside Windows NT. Microsoft Press: Washington, 1997 Wodtke, Christina. Information Architecture: blueprints for the web. New Rideres: Boston, 2003

4.2. Articles Bosivart, H.; Caron, M. Benchmarking web site functions. Semantic shcolar. Benchmarking: An International Journal, 13, 2006 Hassan, Y.; Martín, F. J. Qué es la Accesibilidad Web. No Solo Usabilidad, 2, 2003. Henry, S. L. Another –ability: Accessibility Primer for Usability Specialists. UPA (Usability Professionals’ Association), 2003. 107

Henry, S. L. Understanding Web Accessibility. En Constructing Accessible Web Sites. Glasshaus, 2002 Misic, M; Johnson, K. Benchmarking: a tool for Web site evaluation and improvement. Internet Research: Electronic Networking Applications and Policy, 1999; 383-392 Oviedo, G. L. La definción del concepto de percepción en psicología con base a la Teoría Gestalt. Revista de Estudios Sociales, 18, 2004; 89-96 Wadlow, T. A. The Xerox Alto Computer. BYTE Magazine, 6 (9), 1981, 58-68

4.3. Pàgines web Babich, N. (2017). 11 Website Layouts That Made Content Shine in 2017. Recuperat el 3 de març de 2019 de https://theblog.adobe.com/11-website-layouts-that-made-contentshine-in-2017/ Bhela, K. (2018). InSight Out Consulting Inc. | UX/UI Case Study. Recuperat el 21 febrer 2019 de https://medium.com/ux-station/ux-ui-case-study-insight-out-consulting-inc219ee4d7ebda BrandNetlzen (2015). Evolution of Web-design: From custom HTML to Responsive Design. Recuperat el 26 de febrer de 2019 de https://medium.com/@brandnetizen/evolution-ofweb-design-from-custom-html-to-responsive-design-c682ac8a9dc9 Delgado, H. (2018). Arquitectura de la información de un sitio y usabilidad web. Recuperat el 7 de gener de 2019 de https://disenowebakus.net/arquitectura-de-la-informacion.php Farrell, S. (2017). UX Research Cheat Sheet. Recuperat el 19 de febrer de 2019 de https:// www.nngroup.com/articles/ux-research-cheat-sheet/ Fernández, L. A. (2017). UX - Card Sorting. Recuperat el 3 de març de 2019 de https://blog. gfi.es/ux-card-sorting/ Harb, E.; Kapellari, P.; Luong, S.; Spot, N. (2011). Responsive Web Design. Recuperat el 26 de febrer de 2019 de https://courses.isds.tugraz.at/iaweb/surveys/ws2011/g3-survey-respweb-design.pdf

108

Hirschtritt, D. (2018). Making New Mistakes Next Time: Running a UX Research Debrief. Recuperat el 26 de febrer de 2019 de https://medium.com/@deirdrebeatrice/makingnew-mistakes-next-time-running-a-ux-research-debrief-db4a1daff3fd Hitt, R (2016). How to Choose the Right Typeface for Your Website. Recuperat el 26 de febrer de 2019 de https://medium.com/expand-the-room/five-considerations-when-choosingtypefaces-for-your-website-cfeb8137d05 Hoober, S. (2013). How do users really hold mobile devices. Recuperat el 15 de febrer de 2019 de https://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobiledevices.php Instituto para la Arquitectura de la Información (2008). Sobre el Instituto para la Arquitectura de la Información. Recuperat el 5 de gener de 2019 de http://archive.iainstitute.org/es/ sobre-nosotros/ Interaction Design Foundation. (sense data). User Interface (UI) Design. Recuperat el 26 de febrer de 2019 de https://www.interaction-design.org/literature/topics/ui-design International Organization for Standardization (1998). ISO 9241-11:1998 (en). Recuperat el 7 de gener de 2019 de https://www.iso.org/obp/ui/#iso:std:iso:9241:-11:ed-1:v1:en Komninos, A. (2019). 7 UX Deliverables: What will I be making as a UX designer?. Recuperat el 21 de febrer de 2019 de https://www.interaction-design.org/literature/article/7-uxdeliverables-what-will-i-be-making-as-a-ux-designer O’Connor, K. (2011). Personas: The Foundation of a Great User Experience. Recuperat el 21 de febrer de 2019 de https://uxmag.com/articles/personas-the-foundation-of-a-greatuser-experience Pettit, N. (2015). Wich Layout? Static, Liquid, Adaptive, or Responsive. Recuperat el 26 de febrer de 2019 de https://blog.teamtreehouse.com/which-page-layout PopArt Studio (2018). Fluid vs. Adaptative vs. Responsive Design. Recuperat el 26 de febrer de 2019 de https://medium.com/@popart.studio/fluid-vs-adaptive-vs-responsivedesign-62de51e036bd Reimer, J. (2005). A History of the GUI. Recuperat el 25 de febrer de 2019 de http://www. cdpa.co.uk/UoP/Found/Downloads/reading6.pdf 109

Smith, A. (2017). What is User Experience? What Makes a Good UX Design?. Recuperat el 26 de febrer de 2019 de https://blog.prototypr.io/what-is-user-experience-what-makesa-good-ux-design-b404bb933bd0 Solca, A. (2019). Diseñando tu carrera como Diseñador de UX. Recuperat el 18 de febrer de 2019 de https://uxplanet.org/diseñando-tu-carrera-como-diseñador-de-ux-f302820bfd4a Willenskomer, I. (2017). Creating Usability with Motion: The UX in Motion Manifesto. Recuperat el 16 de febrer de 2019 de https://medium.com/ux-in-motion/creatingusability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc Withrow, J. (2006). Competitive Analysis: Understanding the Market Context. Recuperat el 21 de febrer de 2019 de http://boxesandarrows.com/competitive-analysis-understandingthe-market-context/ Yalanska, M. (s.d). 3C of Interface Design: Color, Contrst, Content. Recuperat el 30 de gener de 2019 de https://tubikstudio.com/3c-of-interface-design-color-contrast-content/ Yalanska, M. (s.d.). Gestalt Theory for Efficient UX: Principle of Proximity. Recuperat el 27 de gener de 2019 de https://tubikstudio.com/gestalt-theory-for-ux-design-principle-ofproximity/ Yalanska, M (s.d). Gestalt Theory for Efficient UX: Principle of Similarity. Recuperat el 27 de gener de 2019 de https://tubikstudio.com/gestalt-theory-for-efficient-ux-principle-ofsimilarity/

4.4. Conferències Aghaei, S.; Ali, M.; Khosravi, H. (2012). Evolution of the World Wide Web: From Web 1.0 to Web 4.0. A International Journal fo Web & Semantic Technology (IJWesT). Isfahan: Univesitat d’Isfahan Codina, Ll. (2009). ¿Web 2.0, Web 3.0 o Web Semántica? A El impacto de los sistemas de información de la web. Congreso Internacional de Ciberperiodismo y Web 2.0. Bilbao: Universitat del País Basc Malisiewicz, T.; Efros, A. (2009). Beyond Categories: The Visual Memex Model for Reasoning About Object Relationships. A Advances in Neural Information Processing Systems 22. Pittsburgh: Carnegie Mellon University 110

111

5. ANNEXOS

112

5.1. Proves d’imagotips

Costa Brava Singular

costa brava singular

Tot seguit es mostra quina va ser l’evolució gràfica -en l'àmbit dels imagotips- del projecte fins a arribar al resultat final obtingut. Les proves que hi ha ja són referents a la proposta gràfica actual, però prèviament es van treballar altres idees.

COSTA BRAVA SINGULAR Figura 72. Proves d’identitat gràfica

5.2. Benchmarking Prèviament s'ha mostrat els resultats més interessants del Benchmarking, però es va fer una recerca més exhaustiva. Tot seguit es farà una anàlisi de la competència, d’una banda, s’analitzaran pàgines que poden tenir algunes similituds de forma, i d’altres, segons els continguts. Primer de tot, es buscaran pàgines amb una funció similar a la que es treballarà. Cerca en línia dels Arxius de Catalunya: La Generalitat de Catalunya ofereix un servei de consulta de documents conservats als arxius d'arreu del territori. Aquests poden ser buscats mitjançant una cerca simple només introduint les paraules clau, els anys d’interès i en quins centres s’ha de buscar. En el cas de la cerca avançada s’ha d’introduir el tipus de document d’interès, les paraules clau, una descripció, l’interval d’anys, dades dels centres com el tipus de font, codis, catàlegs, entre d’altres. Finalment, hi ha la cerca per inventari que també demanen les tipologies de fonts, el contingut de les fonts, segons el contingut, les dates extremes, el centre i el nom i el tipus de les fonts. Els resultats d’interès apareixen en llistes que en prement cada un dels ítems es pot consultar més informació. Estan ordenades alfabèticament pel nom del centre on se situen.

113

Hemeroteca del Diari El Periódico: El diari El Periódico ofereix un sistema d’hemeroteca que permet cercar l’arxiu de diaris però només per data i no per categories. En aquest cas, no m’interessa aquesta manera d’usar-ho perquè per a la web seria ideal poder classificar les publicacions i arxius audiovisuals per categories i no només per dates, que també podria ser una opció. Librairie Hannenorak: És la pàgina web d’una llibreria quebequesa amb l’opció de consultar el catàleg de llibres en venda. Aquests apareixen amb la seva portada, el títol, l’autor i la categoria del llibre. En el cas de la pàgina web de la Costa Brava podria aparèixer la portada, el títol i l’autor. En prémer es podria observar tota la resta de la informació de cada una de les publicacions. Librairie Pantoute: És una pàgina web d’una altra llibreria quebequesa que ofereix la compra en línia de llibres. En aquest cas només apareix la portada, l’opció de compra i la categoria en què es troba la publicació.

Figura 73. Referència de la llibreria Pantoute

Tot seguit es farà una anàlisi a les pàgines web que poden tenir alguna similitud de forma. Kitchens of Uber Eats: La web Kitchens of Uber Eats és una web que presenta diferents cuiners i cuineres mitjançant les fotografies del fotògraf Matthew Abbott i una breu biografia. Aquesta web ha estat escollida per la distribució dels continguts. L’estètica és neta i clara amb un elevat treball tipogràfic acompanyat de fotografies per il·lustrar-ho. La pàgina que es dissenyarà podria partir d’una estructura clara amb els diferents continguts i amb fotografies dels diferents pobles de la Costa Brava.

114

Figura 74. Referència de la Kitchen of Uber Eats

Shadowman Van: Es tracta d’una pàgina web que mostra les realitats de diferents persones i cultures de països africans. La pàgina web té una estètica neta amb jocs de diferents cossos de tipografies, colors, fotografies i mapes dels països que s’il·lustren. Aquesta s’ha escollit com a referent pel fet d’usar mapes vectorials il·lustrats dels països representats i en aquest cas, es podria partir d’aquesta estructura representant els diferents municipis de la Costa Brava. À Gauche de la Lune: À Gauche de la Lune és una web francesa que presenta diferents artistes del país mitjançant un treball tipogràfic i fotografies que queden a segon terme. Aquesta ha estat escollida pels efectes de parallax que permet aportar dinamisme al fer scroll i diferents plans i jerarquies dels elements.

Figura 75. Referència d'À Gauche de la Lune

115

GA Group - Luxury Hotel and Residential Interior Design: Es tracta d’un hotel de luxe amb una imatge de la pàgina web molt neta i fina. La tipografia és serif, un estil que probablement no s’emprarà en el projecte, però sí que també disposa d’animacions que permeten anar mostrant els elements de la web a mesura que l’usuari hi va navegant. Podria ser un element a tenir en compte per dissenyar la pàgina web.

Figura 76. Referència de GA Group

Grasshopper Restaurants: Es tracta d’una web de restaurants que manté una estètica similar que les webs analitzades anteriorment. Ús de tipografia amb fotografies. En aquest cas, es dona color als textos amb un color de fons que els remarca, aquests poden ser amb colors plans o bé, degradats.

Figura 77. Referència de Grasshopper Restaurants

116

Teatr Lalka: És la web d’un teatre polonès que mostra les diferents activitats d’una forma atractiva. Hi ha una versió de la web per a infants amb personatges vectorials que es mouen segons la posició del cursor. Aquesta web ha estat escollida pel calendari de les activitats del teatre que estan mostrats en unes taules fàcils de ser llegides, en aquest cas, podria servir per a mostrar algunes informacions de la pàgina web.

Figura 78. Referència de Teatr Lalka

Zhee-Shee: estudi creatiu rus a Moscou: És una pàgina web monocromàtica amb una composició formada bàsicament per tipografia i il·lustracions. Les il·lustracions i els textos mantenen animacions que aporten dinamisme a una pàgina estàtica que a simple vista podria ser estàtica. En aquest cas es podria valorar que, en cas d’usar algun element il·lustratiu, es pogués animar per aportar un toc de modernitat a la plataforma.

Figura 79. Referència de Zhee-Shee

117

s**t kingz: És la pàgina web d’un grup de música japonès que utilitza una estètica gràfica moderna. Ha estat escollida per les animacions que conté la web i el canvi de color del fons de la pantalla en fer hover a cada un dels botons del menú. Segons on es disposa el punter del menú el color canvia i permet situar l’usuari. Tot seguit es farà una anàlisi de pàgines que utilitzen una experiència experimental a l’hora de mostrar la informació. Questions in the sky by Air France: Es tracta d’una web que, mitjançant un avió que recorre un cel, l'usuari va buscant els diferents punts que ofereixen informació relacionada amb la temàtica de l’aviació. Empra un disseny vectorial minimalista per representar el mapa i una gamma cromàtica determinada i els degradats. Un element important a tenir en compte és que també es poden buscar segons categories sense haver de fer el recorregut amb l’avió. Seria un element important a tenir en compte perquè també s’hauria d’oferir la informació d’una manera més ràpida per ser trobada.

Figura 80. Referència d'Air France

The Divide - Womenwill: És una pàgina web que exposa xifres que demostren la desigualtat en molts àmbits de la vida entre homes i dones. Totes les dades apareixen en formes de cercles blaus i roses que semblen adquirir vida i van prenent una forma diferent segons allò que exposen. La navegació és lineal, una part és totalment automàtica, és a dir, els elements van apareixent i desapareixent sense la necessitat de la interacció de l’usuari i en una altra, és necessari fer scroll.

118

Figura 81. Referència de The Divide

Tasteatlas: És una pàgina web que situa en un mapa els diferents plats segons el seu lloc de procedència. En prémer cada un del menjar s’accedeix a una fitxa amb una breu descripció del menjar, la recepta, on es pot comprar, comentaris dels usuaris i menjars similars, entre d’altres. D’altra banda, també es pot fer la cerca mitjançant un buscador a la pàgina inicial que ofereix l’opció de cercar allò que ens interessa d’una forma més ràpida.

Figura 82. Referència de Tasteatlas

MST Agency: Es tracta d’una agència amb seus als Estats Units, Rússia i a Singapur. S’utilitza una estètica basada en uns colors plans de fons, un treball tipogràfic i una imatge que mostra el producte que han treballat. En el cas del disseny d’interfície desenvolupat s’utilitza la base de color i tipografia amb un ús de fotografies monotó.

119

5.3. Test d'usabilitat Proves d’usabilitat de la interfície ! Nom de la persona que fa la prova d’usabilitat: Adrià Castelló Data: 10 de juliol de 2019 Instruccions de la prova La prova de testeig està formada per dos blocs, primer de tot, s’haurà de seguir unes indicacions i aconseguir els objectius que es preveuen; el segon bloc, es buscarà la vostra opinió per a millorar la interfície del projecte. Primer bloc El primer bloc d’aquesta prova d’usabilitat es basa a intentar dur a terme les següents accions, en cas d’assolir-ho es marcarà amb una creu (X) a la casella de ‘Sí’, en cas contrari, a la de ‘No’. D’aquesta manera, es podrà valorar si els diferents apartats de la plataforma són fàcils de trobar.

SÍ

Sap trobar el botó per a començar l’experiència d’usuari des de la portada de la pàgina web

Es selecciona la població Palamós correctament

Es sap trobar en quin apartat s’indica el nombre d’habitants té la localitat

Es sap trobar les publicacions dutes a terme sobre Palamós

Es desselecciona correctament la categoria “Llibre” del selector dels ﬁltres

Es troba correctament el menú que permet anar a la pàgina sobre els camins de ronda

Es prem correctament la primera publicació sobre els camins de ronda

S’activa el menú de l’hamburguesa correctament

Busca correctament la paraula ‘costa’ des del cercador

Les respostes han estat les mateixes tant a la versió escriptori com mòbil.

120

Proves d’usabilitat de la interfície ! Segon bloc El segon bloc són un conjunt de preguntes per a conèixer com ha estat l’experiència amb la plataforma. Es demana respondre, si us plau, amb sinceritat les següents preguntes. 1. El temps de càrrega entre les pàgines ha estat l’òptim? De vegades hi ha alguna pàgina que ha estat una mica més lenta a l’hora de carregar, però en general bé. 2. Consideres que la navegació a través de les diferents pàgines és fàcil? Sí.

3. Opines que l’opció de ﬁltrar les informacions per mitjà de les localitats és una bona opció, o bé, en preferiries una altra? Està bé, però es podria incorporar algun ﬁltratge per dates.

4. Consideres que la informació que s’ofereix de cada publicació està mostrada de tal manera que pugui ser trobada ràpidament? Sí. 5. Consideres que els diferents apartats són els suﬁcients o n’afegiries algun més? No. Altres comentaris: -

Moltes gràcies per a les teves respostes.

121

Proves d’usabilitat de la interfície ! Nom de la persona que fa la prova d’usabilitat: Montserrat Martí Data: 10 de juliol de 2019 Instruccions de la prova La prova de testeig està formada per dos blocs, primer de tot, s’haurà de seguir unes indicacions i aconseguir els objectius que es preveuen; el segon bloc, es buscarà la vostra opinió per a millorar la interfície del projecte. Primer bloc El primer bloc d’aquesta prova d’usabilitat es basa a intentar dur a terme les següents accions, en cas d’assolir-ho es marcarà amb una creu (X) a la casella de ‘Sí’, en cas contrari, a la de ‘No’. D’aquesta manera, es podrà valorar si els diferents apartats de la plataforma són fàcils de trobar.

SÍ

Sap trobar el botó per a començar l’experiència d’usuari des de la portada de la pàgina web

Es selecciona la població Palamós correctament

Es sap trobar en quin apartat s’indica el nombre d’habitants té la localitat

Es sap trobar les publicacions dutes a terme sobre Palamós

Es desselecciona correctament la categoria “Llibre” del selector dels ﬁltres

Es troba correctament el menú que permet anar a la pàgina sobre els camins de ronda

Es prem correctament la primera publicació sobre els camins de ronda

S’activa el menú de l’hamburguesa correctament

Busca correctament la paraula ‘costa’ des del cercador

Les respostes han estat les mateixes tant a la versió escriptori com mòbil.

122

Proves d’usabilitat de la interfície !

Segon bloc El segon bloc són un conjunt de preguntes per a conèixer com ha estat l’experiència amb la plataforma. Es demana respondre, si us plau, amb sinceritat les següents preguntes. 1. El temps de càrrega entre les pàgines ha estat l’òptim? Està bé. 2. Consideres que la navegació a través de les diferents pàgines és fàcil? Sí. 3. Opines que l’opció de ﬁltrar les informacions per mitjà de les localitats és una bona opció, o bé, en preferiries una altra? No. 4. Consideres que la informació que s’ofereix de cada publicació està mostrada de tal manera que pugui ser trobada ràpidament? Sí. 5. Consideres que els diferents apartats són els suﬁcients o n’afegiries algun més? No. Altres comentaris: -

Moltes gràcies per a les teves respostes.

123

Proves d’usabilitat de la interfície ! Nom de la persona que fa la prova d’usabilitat: Elisenda Ventura Data: 16 de juliol de 2019 Instruccions de la prova La prova de testeig està formada per dos blocs, primer de tot, s’haurà de seguir unes indicacions i aconseguir els objectius que es preveuen; el segon bloc, es buscarà la vostra opinió per a millorar la interfície del projecte. Primer bloc El primer bloc d’aquesta prova d’usabilitat es basa a intentar dur a terme les següents accions, en cas d’assolir-ho es marcarà amb una creu (X) a la casella de ‘Sí’, en cas contrari, a la de ‘No’. D’aquesta manera, es podrà valorar si els diferents apartats de la plataforma són fàcils de trobar.

SÍ

Sap trobar el botó per a començar l’experiència d’usuari des de la portada de la pàgina web

Es selecciona la població Palamós correctament

Es sap trobar en quin apartat s’indica el nombre d’habitants té la localitat

Es sap trobar les publicacions dutes a terme sobre Palamós

Es desselecciona correctament la categoria “Llibre” del selector dels ﬁltres

Es troba correctament el menú que permet anar a la pàgina sobre els camins de ronda

Es prem correctament la primera publicació sobre els camins de ronda

S’activa el menú de l’hamburguesa correctament

Busca correctament la paraula ‘costa’ des del cercador

Les respostes han estat les mateixes tant a la versió escriptori com mòbil.

124

Proves d’usabilitat de la interfície !

Segon bloc El segon bloc són un conjunt de preguntes per a conèixer com ha estat l’experiència amb la plataforma. Es demana respondre, si us plau, amb sinceritat les següents preguntes. 1. El temps de càrrega entre les pàgines ha estat l’òptim? Alguna vegada ha anat una mica lenta per carregar les imatges i la informació de la base de dades. 2. Consideres que la navegació a través de les diferents pàgines és fàcil? Sí. 3. Opines que l’opció de ﬁltrar les informacions per mitjà de les localitats és una bona opció, o bé, en preferiries una altra? Sí, ja està bé. 4. Consideres que la informació que s’ofereix de cada publicació està mostrada de tal manera que pugui ser trobada ràpidament? Sí. 5. Consideres que els diferents apartats són els suﬁcients o n’afegiries algun més? No. Altres comentaris: -

Moltes gràcies per a les teves respostes.

125

Proves d’usabilitat de la interfície ! Nom de la persona que fa la prova d’usabilitat: Tamara García Data: 16 de juliol de 2019 Instruccions de la prova La prova de testeig està formada per dos blocs, primer de tot, s’haurà de seguir unes indicacions i aconseguir els objectius que es preveuen; el segon bloc, es buscarà la vostra opinió per a millorar la interfície del projecte. Primer bloc El primer bloc d’aquesta prova d’usabilitat es basa a intentar dur a terme les següents accions, en cas d’assolir-ho es marcarà amb una creu (X) a la casella de ‘Sí’, en cas contrari, a la de ‘No’. D’aquesta manera, es podrà valorar si els diferents apartats de la plataforma són fàcils de trobar.

SÍ

Sap trobar el botó per a començar l’experiència d’usuari des de la portada de la pàgina web

Es selecciona la població Palamós correctament

Es sap trobar en quin apartat s’indica el nombre d’habitants té la localitat

Es sap trobar les publicacions dutes a terme sobre Palamós

Es desselecciona correctament la categoria “Llibre” del selector dels ﬁltres

Es troba correctament el menú que permet anar a la pàgina sobre els camins de ronda

Es prem correctament la primera publicació sobre els camins de ronda

S’activa el menú de l’hamburguesa correctament

Busca correctament la paraula ‘costa’ des del cercador

Les respostes han estat les mateixes tant a la versió escriptori com mòbil.

126

Proves d’usabilitat de la interfície !

Segon bloc El segon bloc són un conjunt de preguntes per a conèixer com ha estat l’experiència amb la plataforma. Es demana respondre, si us plau, amb sinceritat les següents preguntes. 1. El temps de càrrega entre les pàgines ha estat l’òptim? Sí. 2. Consideres que la navegació a través de les diferents pàgines és fàcil? Sí. 3. Opines que l’opció de ﬁltrar les informacions per mitjà de les localitats és una bona opció, o bé, en preferiries una altra? No. 4. Consideres que la informació que s’ofereix de cada publicació està mostrada de tal manera que pugui ser trobada ràpidament? Sí. 5. Consideres que els diferents apartats són els suﬁcients o n’afegiries algun més? No. Altres comentaris: -

Moltes gràcies per a les teves respostes.

127

Proves d’usabilitat de la interfície ! Nom de la persona que fa la prova d’usabilitat: Xènia Poyano Data: 16 de juliol de 2019 Instruccions de la prova La prova de testeig està formada per dos blocs, primer de tot, s’haurà de seguir unes indicacions i aconseguir els objectius que es preveuen; el segon bloc, es buscarà la vostra opinió per a millorar la interfície del projecte. Primer bloc El primer bloc d’aquesta prova d’usabilitat es basa a intentar dur a terme les següents accions, en cas d’assolir-ho es marcarà amb una creu (X) a la casella de ‘Sí’, en cas contrari, a la de ‘No’. D’aquesta manera, es podrà valorar si els diferents apartats de la plataforma són fàcils de trobar.

SÍ

Sap trobar el botó per a començar l’experiència d’usuari des de la portada de la pàgina web

Es selecciona la població Palamós correctament

Es sap trobar en quin apartat s’indica el nombre d’habitants té la localitat

Es sap trobar les publicacions dutes a terme sobre Palamós

Es desselecciona correctament la categoria “Llibre” del selector dels ﬁltres

Es troba correctament el menú que permet anar a la pàgina sobre els camins de ronda

Es prem correctament la primera publicació sobre els camins de ronda

S’activa el menú de l’hamburguesa correctament

Busca correctament la paraula ‘costa’ des del cercador

Les respostes han estat les mateixes tant a la versió escriptori com mòbil.

128

Proves d’usabilitat de la interfície !

Segon bloc El segon bloc són un conjunt de preguntes per a conèixer com ha estat l’experiència amb la plataforma. Es demana respondre, si us plau, amb sinceritat les següents preguntes. 1. El temps de càrrega entre les pàgines ha estat l’òptim? Sí. 2. Consideres que la navegació a través de les diferents pàgines és fàcil? Sí. 3. Opines que l’opció de ﬁltrar les informacions per mitjà de les localitats és una bona opció, o bé, en preferiries una altra? Sí. 4. Consideres que la informació que s’ofereix de cada publicació està mostrada de tal manera que pugui ser trobada ràpidament? Sí. 5. Consideres que els diferents apartats són els suﬁcients o n’afegiries algun més? Podria haver-hi més informació sobre els pobles. Altres comentaris: -

Moltes gràcies per a les teves respostes.

!10

129

5.4. Dissenys d'interfície Tot seguit es mostraran alguns dels dissenys d'interfície no mostrats amb anterioritat.

costa brava singular

Palafrugell

BAIX EMPORDÀ

Portbou

Colera

2016

2004

Litoral escarpat, amb penya-segats, cales i coves. A Llafranc hi ha un petit port esportiu. Destaca el cap de Sant Sebastià. SUPERFÍCIE

26,9 KM²

HABITANTS (2018)

22 860

GENTILICI

PALAFRUGELLENC/A

CALES

Llançà

El Port de la Selva 2016

Tot seguit pots consultar les darreres actuacions dels camins de ronda en aquest municipi.

Nova escalinata d’accés a la cala Gran d’Aigua Xelida

Senyalització i desbrossament del tram Cala Marquesa- sa Roncadora

Nova escalinata d’accés a la cala Gran d’Aigua Xelida

Senyalització i desbrossament del tram Cala Marquesa- sa Roncadora

2016

2004

2016

2004

2016

2004

Figura 83. Selector dels

Figura 85. Selector dels

pobles a la versió mòbil

camins a la versió mòbil

C Figura 84. Plantilla dels

pobles a la versió mòbil

130