Disseny de la interfície

En la creació de pàgines web, a diferència del disseny gràfic lligat al mitjà imprès (món editorial o publicitat), intervenen una sèrie de circumstàncies que la fan especialment singular. Bàsicament cal destacar dues característiques d’aquest mitjà:

• Canal de transmissió (Internet). El canal estableix límits tecnològics, principalment relacionats amb les velocitats de transmissió de la informació (temps de descàrrega/visualització de la informació).
• Audiència global i heterogènia. El missatge és potencialment rebut a escala universal, de manera que qualsevol ciutadà del món pot visualitzar les pàgines web arreu del món amb qualsevol tipus de dispositiu.

Les eines que fan servir els visitants de les pàgines web també presenten una sèrie de característiques a tenir en compte:

• Els navegadors permeten visualitzar inicialment una part del disseny, deixant una part d’àrees visibles únicament en el desplaçament vertical cap avall quan fem servir les barres de desplaçament (scroll up, scroll down). És important que la informació més important es localitzi sempre en l’espai inicialment visible en pantalla.
• L’espai inicialment visible, a diferència dels llibres o les revistes, no té unes mides fixes, és variable i depèn de factors com ara:
  • La resolució del dispositiu amb què l’usuari visualitza la pàgina web. Cada cop hi ha resolucions més diverses i les resolucions de dispositius mòbils apareixen entre les més utilitzades. Vegeu que a la figura, la segona resolució més utilitzada és 360×640, típica de dispositius mòbils.

Font: Statcounter Global Stats

• La configuració del navegador de l’usuari (navegador usat, extensions instal·lades, barres d’eines, icones…). Vegeu a la figura els navegadors més utiltzats.

Font: Statcounter Global Stats

Cal proporcionar als usuaris dels llocs web una experiència de navegació satisfactòria. Aquesta satisfacció ve definida per un accés ràpid als continguts i una bona experiència visual que fidelitzi els usuaris. Aconseguir o no els objectius d’un portal depèn en gran manera d’aquesta satisfacció i fidelització. És fonamental un disseny adequat que faciliti l’intercanvi d’informació amb l’usuari. Per tant, cal treballar sobre la usabilitat i l’accessibilitat per garantir l’assoliment d’aquests objectius.

La usabilitat és la forma de dissenyar un producte o servei per aconseguir que la interacció dels usuaris sigui senzilla, efectiva, eficaç i satisfactòria en un context d’ús específic.

L’accessibilitat, per altra banda, fa referència al grau de dificultat que presenta qualsevol objecte que pretén ser utilitzat per un públic objectiu, independentment de les seves capacitats tècniques, cognitives o físiques.

El disseny web ve molt determinat pel context de l’usuari; en el nostre cas, pel visitant de la nostra pàgina web.

Una primera part del procés de disseny respon a les característiques del disseny centrat en l’usuari (DCU), una metodologia centrada en les persones que han de fer servir el producte o servei. Com a norma general, el DCU consta de les següents fases:

1. Anàlisi de requeriments
2. Especificació: disseny de continguts i estructura de la informació
3. Desenvolupament del disseny visual mitjançant prototipatge i proves:
   • Prototipatge:
     • De baixa fidelitat: esbossos
     • De fidelitat mitjana: wireframes (esquemes)
     • D’alta fidelitat: el prototip de mitjana fidelitat s’integra amb la proposta gràfica (logos, tipografies, colors).
   • Proves i avaluació. A través de tests d’usuaris, opinions de clients, directius de l’empresa i altres s’obté la informació necessària per saber si el disseny web compleix els requisits. Aquest procés és cíclic: a la fase de proves i avaluació es poden detectar requeriments no previstos inicialment, continguts nous, modificacions a l’estructura de la informació, aspectes gràfics a millorar. Tota aquesta retroalimentació servirà per refinar el disseny i elaborar una nova proposta. Amb el prototip acceptat per usuaris, clients i directius, comencen les fases de la implementació de qualsevol aplicació web.
4. Codificació i maquetació web. A partir dels prototips d’alta fidelitat, es confecciona una versió operativa de la pàgina web.
5. Redacció de continguts. Els responsables de continguts han d’introduir tota la informació d’acord amb els estàndards dels motors de cerca.
6. Test final. El resultat final és avaluat per un equip de treball heterogeni.
   • Se sotmet la infraestructura tecnològica a les proves d’estrès adients en funció del volum d’usuaris estimat.
   • Es realitzen les proves finals per avaluar l’accessibilitat i usabilitat final del web.
   • Promoció del portal i estratègia SEO. Amb la web ja operativa i publicada, aquesta és la primera de les dues darreres fases, de posada en marxa del lloc web. Tan bon punt el lloc web està publicat, s’ha d’iniciar el procés d’optimització per als motors de cerca més populars.
   • Manteniment i actualització. L’última fase del cicle de vida del disseny d’un lloc web es destina al manteniment. Cal tenir el contingut actualitzat segons els requisits de la pàgina: no és el mateix una pàgina de notícies d’actualitat que una pàgina de presència corporativa, amb molta menys freqüència d’actualització. Mitjançant eines com Google Analytics, es pot fer el seguiment de l’estat de salut del lloc web, veure les estadístiques de visitants, identificar el seu comportament i detectar errors d’usabilitat o problemes d’accessibilitat.

A la figura podeu veure el cicle de vida del disseny web:

Relacionats amb el concepte d’interfície, hi ha una sèrie de perfils professionals que es poden classificar de maneres diverses.

• Pel tipus de tasques: des de l’anàlisi de requeriments i la interlocució amb el client per a detectar necessitats fins al disseny visual, passant per l’estructura de continguts o el disseny de la interacció amb l’usuari, entre d’altres.
• Per formació: normalment es configuren equips heterogenis amb professionals vinguts de sectors com la psicologia, les ciències socials, el periodisme, la comunicació audiovisual, les enginyeries…

La incorporació d’uns perfils professionals o altres a un projecte depèn de factors com la complexitat del projecte, l’àmbit de difusió (mundial, regional, local), el sector de mercat (joves, dones) i el tipus de lloc web (comerç electrònic, periodístic, pàgina de presència corporativa, intranet).

Quan es parla de disseny s’acostuma a pensar principalment en l’aparença visual del lloc web, però primer cal focalitzar el disseny sobre com funciona el lloc web. Abans d’escollir color i tipografies, és important identificar els objectius del lloc web: com es farà servir i com hi interaccionaran els usuaris. Els professionals en disseny d’interacció (IxD), disseny d’interfície d’usuari (UI) i disseny d’experiència d’usuari (UX) s’ocupen de tot això. Aquestes disciplines estan relacionades amb una disciplina més general que s’anomena interacció persona-ordinador (IPO).

L’objectiu del professional en disseny d’interacció és fer el lloc web tan fàcil, eficient i agradable com sigui possible. Molt relacionat amb el disseny d’interacció, hi ha el disseny d’interfície d’usuari, els dissenyadors d’interfície d’usuari estan més centrats en l’organització funcional de la pàgina i en les eines específiques per navegar pel contingut o realitzar tasques, com els botons, els enllaços o els menús de navegació.

Un perfil professional de recent aparició en l’àmbit del disseny web és el de dissenyador d’experiència d’usuari. El dissenyador UX adopta una perspectiva més holística, intenta aconseguir una experiència global del lloc web positiva. El disseny UX busca comprendre els usuaris i les seves necessitats mitjançant l’observació i les entrevistes.

Aquesta experiència global es veu influenciada pel disseny visual, la interfície d’usuari, la qualitat i el missatge del contingut, i fins i tot pel rendiment global del lloc web (temps de càrrega, temps de resposta). L’experiència d’usuari ha d’anar en consonància amb la imatge de marca i els objectius de negoci de l’organització perquè tingui èxit.

Com que la web és un mitjà visual, les pàgines web requereixen un disseny i una presentació. Els dissenyadors gràfics s’encarreguen de crear l’aparença del lloc web: logos, gràfics, tipografies, colors, patrons de distribució, etc. Asseguren que el lloc web doni una bona primera impressió i tingui una imatge coherent amb la marca i el missatge de l’organització a la qual representa.

Aquests dissenyadors acostumen a generar guies d’estil, així com esbossos del lloc web amb eines d’edició gràfica com Adobe Photoshop, Adobe Fireworks o GIMP, entre d’altres. Han de tenir un bon coneixement de tecnologies web, com HTML i CSS, per generar dissenys viables i han de saber com crear i editar imatges optimitzades per a Internet.

Una part important del procés de disseny web implica la implementació i depuració de documents HTML, CSS i scripts que conformen el lloc web. L’equip que s’encarrega de la confecció de tots aquests fitxers és el departament de producció o de desenvolupament.

Els desenvolupadors web no dissenyen l’aparença o l’estructura del lloc web, però han de tenir una bona comunicació amb els dissenyadors per tal d’entendre els objectius del lloc web de forma que puguin desenvolupar solucions tècniques per assolir aquests objectius.

Entre les diferents tasques que han de fer els desenvolupadors hi ha:

• Maquetació HTML. És el procés de creació de documents HTML que formen part del lloc web. Requereix un bon coneixement del llenguatge HTML per tal de fer servir les etiquetes HTML més adients per al contingut i la funcionalitat de cada pàgina. És important també conèixer les peculiaritats de cada navegador i cada plataforma (Windows, Apple, Mòbil) de cara a aconseguir una correcta visualització del disseny del lloc web.
• Aplicació d’estils CSS al disseny web. L’aparença dels diferents elements d’una pàgina es defineix per regles d’estil definides en documents CSS (Cascading Style Sheets). Hi ha una diferència entre el l’aparença, determinada per les regles CSS, i el contingut, definit pels elements HTML.
• Programació i scripting. El web s’ha convertit en una plataforma d’aplicacions diverses, amb un ampli ventall de tecnologies disponibles. La programació no havia estat mai tan important com ara. Llenguatges com Javascript permeten controlar la validació i el comportament de diversos elements de formularis HTML, per exemple. Amb aquestes tecnologies s’afegeixen comportaments i funcionalitats als elements de la pàgina web. Se solen referenciar com a tecnologies de front-end, i els especialistes són els front-end developers. També hi ha altres llenguatges de programació eeb, com PHP, Ruby, Python, ASP.Net, que s’executen al servidor i processen les dades abans d’enviar-les al navegador de l’usuari. Són les tecnologies de back-end, i els professionals que hi treballen es diuen back-end developers. Sovint els programadors amb més experiència tenen un perfil molt complet que domina ambdues facetes, en aquest cas són full stack developers.

Vegeu a l’esquema de la figura les tecnologies client i servidor més habituals:

Els redactors de continguts són un altre perfil professional indispensable de cara a l’èxit d’une projecte web. Els bons continguts poden ajudar els dissenyadors a crear interfícies d’usuari més efectives. No s’han de subestimar els recursos dedicats a la creació i el manteniment de continguts d’un lloc web. Als actuals equips de desenvolupament de llocs web sempre hi ha dos especialistes relacionats amb els continguts: l’estratega de continguts (Content Strategist) i l’arquitecte d’informació (Information Architect(IA)).

Dins de la disciplina SEO (Search Engine Optimization en anglès) trobem la figura de l’analista SEO. Les seves accions en l’àmbit de continguts poden incloure:

• Investigació de paraules clau i generació de noves propostes
• Anàlisi del lloc web i de pàgines de l’organització a les xarxes socials, per a possibles millores
• Monitorització del trànsit del lloc web i resultats de cerca i desenvolupament d’estratègies de posicionament
• Generació de idees de contingut a l’equip
• Actualització de continguts obsolets
• Optimització de pàgines per a la correcta visualització en els diferents dispositius: ordinador, tauleta, mòbil
• Desenvolupament d’estratègies d’enllaços interns i externs
• Gestió de campanyes de pagament als motors de recerca

El disseny es pot entendre com un intent d’establir una connexió amb la sensibilitat dels usuaris i amb la seva necessitat de relacionar-se amb les coses. Aquesta sensibilitat està influenciada per factors socioculturals (edat, zona geogràfica, ètnies, gènere). Per exemple, al Japó el color blanc significa la mort, mentre que a Occident aquest color acostuma a estar associat a conceptes com la puresa o la vida.

Els element de disseny inclouen colors, textures, tipografies, iconografia i imatges adients. Addicionalment, es poden aplicar mecanismes de transformació de tots aquests elements, com efectes d’escala, profunditat, animació i variació. Totes aquestes transformacions fan que el disseny sigui únic.

Cal tenir en compte que totes les formes de disseny presenten dues àreas d’influència principals: les tendències actuals (modes) i les tecnologies disponibles per crear el disseny. El disseny gràfic ha estat molt influenciat per la tecnologia disponible, des de les pintures rupestres, passant per les inscripcions tallades a columnes, els manuscrits i la impremta Guttenberg, fins a la reproducció fotogràfica i l’era de la informàtica moderna amb l’edició digital.

Al món del disseny web, l’ordinador, el sistema operatiu, el maquinari, el programari de navegació, el llenguatge de marcatge… fan que els dissenys siguin cada cop més sofisticats. Tenen una influència cabdal sobre les tendències de disseny. Malgrat tot, un bon disseny web s’ha de basar a la comprensió fonamental de l’estructura jeràrquica que conforma una organització dels continguts del lloc web, combinat amb els diferentes elements d’estil que li donen al disseny la seva singularitat.

Per sobre de qualsevol altre element, el color té la capacitat de guiar, dirigir i persuadir l’usuari. A part de les seves qualitats instructives, el color te influència emocional sobre l’usuari i cada color té associades idees i significats, que poden variar segons l’entorn sociocultural de l’usuari.

Un dels models més comuns per definir el color és l’HSL (de l’anglès Hue, Saturation, Lightness), que es refereix a la tonalitat o matís, la saturació i la luminància. Aquest model defineix el color en termes de les seves propietats (vegeu la seva representació a la figura).

Font: Wikimedia Commons. Usuari Maulucioni, basat en un treball de SharkD

La tonalitat d’un color és el color pròpiament dit. Els valors d’una tonalitat s’especifiquen mitjançant la seva posició dins del cercle cromàtic (vegeu la figura). Per norma, un vermell primari se situa a l’angle 0, el verd primari se situa a l’angle 120 i el blau primari se situa a l’angle 240, tornant al vermell primari a l’origen del cercle a 360 graus.

Font: Wikimedia Commons. Nevit Dilmen (talk)

La saturació d’un color dona una idea del grau de puresa d’un color, entenent la puresa com el nivell de concentració de gris que conté aquest color. Com més quantitat de gris, menor puresa o saturació. Hi ha colors “purs” quan la seva saturació sigui màxima (menor quantitat de gris present). Vegeu a la figura un exemple de les diferents graduacions de saturació del color vermell.

La luminància o claredat d’un color es pot entendre com la quantitat de llum del color. Quan augmentem aquesta luminància, ens apropem al color blanc, i si la disminuïm, la quantitat de llum tendeix al negre. El rang de valors daquest canal s’acostuma a refererir en forma de percentatge: 0% luminància mínima (negre) i 100% luminància màxima (blanc).

El disseny web està basat en els colors de la llum (síntesi aditiva dels colors primaris vermell, blau i verd, RGB) el seu rang de color és més gran que el del disseny imprès, que fa servir una paleta reflectiva (model substractiu, amb colors primaris cian, magenta, groc i negre, CMYK).

Malgrat tenir una paleta més àmplia, predir el color exacte que un usuari veu és difícil degut a les variacions entre monitors, adaptadors gràfics, controladors o drivers, monitors i sistemes operatius. En canvi, al disseny imprès tenim control sobre el mitjà de visualització (el paper, per exemple) i podem replicar amb precisió el color desitjat.

En el disseny d’interfícies web, el color ajuda a establir associacions entre elements que d’altra forma no es podrien connectar. El contrast de colors també ajuda a orientar l’usuari i reforçar una distribució d’elements d’una pàgina.

Una pàgina web ha de tenir definida en el seu disseny una gamma de colors. La paleta proporciona identitat visual mitjançant matisos i tonalitats. La paleta permet decidir si el disseny serà elegant, seriós, alegre, sobri.

És important que abans d’escollir els colors de la paleta tinguem present la classificació dels colors segons el cercle cromàtic.

La figura representa el cercle cromàtic RGB:

Font: Wikimedia Commons. László Németh, CC0

• Disseny monocromàtic. Una estratègia per construir la paleta pot ser escollir una composició monocromàtica com la de la figura a partir d’un color del cercle cromàtic i obtenir les seves tonalitats afegint-hi blanc o negre. Aquest disseny fa servir diferents tonalitats púrpures.

Font: Dribbble. Eric E. Anderson

• Disseny amb colors veïns. Una altra opció es basa a seleccionar colors veïns del cercle cromàtic, que proporcionen harmonia i estabilitat. Els colors veïns són aquells situats en un rang de 90 graus dins del cercle cromàtic. Vegeu un exemple d’aquest tipus de disseny a la figura. El disseny fa servir ombres de púrpura, blau i rosa.

Font: Dropbox and Collins: Dropbox rebrand

• Disseny amb colors complementaris. Si, per contra, es busca destacar el contrast entre diferents elements del disseny, es poden escollir colors complementaris dins del cercle cromàtic. Els colors complementaris són aquells situats en posicions oposades dins del cercle cromàtic (vegeu la figura). El blau brillant i el taronja són complementaris.

Font: Wework.com

• La temperatura dels colors permet diferenciar els colors càlids i els freds.

A internet trobareu molta informació relacionada amb la teoria de color, podeu trobar una interessant guia de referència ràpida (“Quick Reference Sheet”) a bit.ly/3krcnrR, a la figura presenta una previsualització d’aquesta guia de referència ràpida dels conceptes de teoria del color:

Font: Paper Leaf. https://paper-leaf.com/insights/color-theory-quick-reference-poster/

A la xarxa hi ha moltes eines que ajuden a generar paletes de color, seleccionant tonalitat o colors idonis.

• Color Picker: htmlcolorcodes.com
• Adobe Color: color.adobe.com
• Cohesive Colors: javier.xyz/cohesive-colors
• ColorHexa: www.colorhexa.com/ed1c16

Afegir textures a un disseny web proporciona a l’usuari la sensació d’experiència tàctil i l’ajuda a connectar amb el contingut de la pàgina. Els tipus de textures poden anar des de botons llisos i brillants, habituals a la web 2.0, fins a fons de pàgina, a vegades toscos. Les textures donen personalitat i profunditat al disseny.

Les textures web són un mètode de disseny web amb l’objectiu de simular la sensació física del tacte amb una altra, la vista. En presentar un fons de pantalla 3D per als elements de la pàgina, s’indueix una sensació hàptica a través del mitjà visual de les pantalles dels ordinadors.

Tot plegat té un efecte interessant en el cervell: evoca emocions que associem al món real. Podem pensar en la sensació de trepitjar la gespa una tarda d’estiu, i les textures web intenten replicar aquesta sensació vital al món digital.

A l’hora de treballar amb textures, hi ha dos factors que ens ajuden a classificar-les: el realisme i la prominència.

Vegeu a la figura un exemple de textura web subtil. Són molt habituals i proporcionen una forma d’interacció visual sense distracció.

La figura presenta una altra textura, més abstracta i cridanera. Les cantonades esmolades destaquen més que els gradients suaus. El disseny poligonal, per altra banda, pot establir una associació amb el món digital, apropiat per a l’encapçalament d’una web d’una start-up tecnològica.

Font: Pngtree.com

Es poden fer servir tot tipus de figures, segons l’efecte buscat. Per exemple, les textures isobàriques (vegeu la figura), que proporcionen molt dinamisme al disseny.

Font: TheGem. https://codex-themes.com/thegem/starting_page/themes.php?page=agency-creative-dark

En l’exemple de textura subtil (vegeu la figura) veureu que té una aparença similar al paper. Quan un usuari navegui pel lloc web, potser no la veurà de forma conscient. Aquest tipus de textures es fan servir molt sovint perquè serveixen per suggerir emocions sense que els usuaris se n’adonin.

Vegeu un exemple d’ús de la textura de paper a la a la figura:

Font: Thekettle.net

Per últim, la figura presenta una textura realista i amb molta prominència. Queda patent que som davant d’un bloc de ciment. Aquests dissenys atrevits i realistes envien un missatge clar a l’usuari i tenen un gran potencial per interactuar amb els elements bidimensionals que els acompanyen.

Sovint al món del disseny web s’utilitzen indistintament les paraules textura o patró. En qualsevol cas, un patró no és exactament el mateix que una textura.

Vegeu alguns exemples de patrons (vegeu la figura).

A la pàgina web de la figura s’aconsegueix un interessant efecte amb un patró molt simple:

Font: Friendlyprojects.com

La la figura és un altre exemple de combinació d’un patró simple amb una paleta de colors senzilla:

Font: Koox.co.uk

Vegeu alguns exemples de textures web (vegeu la figura):

A la pàgina web de la figura el fabricant ha construït una textura a partir del seu propi producte:

Font: Getgreenmustache.com

La tipografia és l’art i la tècnica que permet crear i organitzar els tipus de lletra d’un mitjà de publicació (en el nostre cas, una pàgina web). No es tracta tan sols de dissenyar la composició de les lletres i els símbols i la seva organització, també és molt important de cara a allò que es vol comunicar, la identitat visual, la imatge de marca, la usabilitat i l’accessibilitat de la pàgina web.

La tipografia transporta el missatge que volem transmetre, i pot millorar o anul·lar aquest missatge.

Els objectius principals d’una bona tipografia són la seva llegibilitat i comprensibilitat (legibility i readability, en anglès).

En la llegibilitat influeixen aspectes relacionats amb la visibilitat i la qualitat del tipus de lletra, com la mida de la font, l’espai entre línies, l’espai entre lletres, l’alçada de la línia de text i d’altres. A la pàgina web de la figura s’aconsegueix una clara llegibiliat fent servir una família tipogràfica senzilla amb una mida gran i molt espai entre línies.

Font: Eidosshanghai.com

Les variacions en el pes i l’amplada poden influir en la llegibilitat (vegeu la figura).

https://www.w3.org/TR/css-fonts-3

L’elecció del tipus de lletra, les característiques com la composició del text, l’ús del color i el gruix de la tipografia poden variar la comprensibilitat del contingut.

Per exemple, a la pàgina web de la figura el missatge és clar.

Font: Readymag.com/features

Vegeu com afavorir la comprensibilitat jugant amb el contrast (figura).

Font: Martinrueg.com

Les lletres són el conjunt de grafies (símbols escrits) que fa servir un llenguatge. La tipografia permet especificar famílies tipogràfiques que poden refinar i modificar aquests símbols bàsics. Normalment aquestes famílies s’anomenen tipus de lletra.

La figura mostra exemples amb i sense serif:

Font: https://www.w3.org/TR/css-fonts-3

De forma genèrica, les tipografies es poden classificar segons diverses característiques:

• Serif / Sans serif. Aquesta classificació és per la forma del tipus de lletra, amb o sense decoració (també anomenada de pal sec). Vegeu-ne exemples a la figura i figura. La figura detalla la decoració en vermell.

Font: www.wikilengua.org/index.php/Fuente_(tipograf%C3%ADa)

Font: www.wikilengua.org/index.php/Fuente_(tipograf%C3%ADa)

Font: www.wikilengua.org/index.php/Fuente_(tipograf%C3%ADa)

• Monoespaiades / Proporcionals. Les tipografies monoespaiades són d’ample fix, és a dir, cada caràcter té la mateixa amplada. Els caràcters de les tipografies proporcionals, per altra banda, presenten diferents amplades segons el caràcter. Així, la lletra m acostuma a ser la més ampla i la I (en majúscula), la més estreta. A la figura podreu apreciar la diferència entre aquestes tipografies.

Font: Saucy - Own work, CC0, https://commons.wikimedia.org/w/index.php?curid=99590773

Els dissenyadors també acostumen a agrupar les famílies tipogràfiques que presenten aparençes similars, ja que acostumen a tenir la mateixa funcionalitat visual. Una de les darreres tendències és agrupar-les en cinc grups principals en el que s’anomena sistema GHOTMS (vegeu la figura).

Font: www.smashingmagazine.com/2010/12/what-font-should-i-use-five-principles-for-choosing-and-using-typefaces/#more-72938

• Geometric: són tipografies basades en formes geomètriques estrictes. Exemples: Helvetica, Univers, Futura, Avant Garde, Franklin Gothic, Gotham. En teniu un exemple a la figura.

Font: https://www.smashingmagazine.com/2010/12/what-font-should-i-use-five-principles-for-choosing-and-using-typefaces/#more-72938

• Humanist: són tipografies sense serif derivades de la cal·ligrafia. Exemples: Verdana, Gill Sans, Frutiger, Myriad. Vegeu la figura.

Font: https://www.smashingmagazine.com/2010/12/what-font-should-i-use-five-principles-for-choosing-and-using-typefaces/#more-72938

• Old Style: són els tipus de lletra derivats de les tipografies primigènies als inicis de la impremta. Acostumen a tenir poca diferència entre la versió fina i la negreta. Presenten un estil clàssic i tradicional. Exemples: Garamond, Jenson, Palatino. A la figura podeu veure l’aspecte d’aquestes tipografies.

Smashingmagazine.com

• Transitional: són tipografies originals de mitjans del segle XVIII, amb figures més geomètriques i esmolades. Un exemple és la Times New Roman (la que es mostra per defecte en una pàgina web) o la Baskerville. Vegeu la figura.

Smashingmagazine.com

• Modern: són tipografies també de mitjans del segle XVIII. No s’han de confondre amb el modernisme de mitjans del segle XX. Presenten molt contrast entre els traços fins i els gruixuts. Bodoni i Didot són exemples d’aquests tipus de lletra (vegeu la figura).

Smashingmagazine.com

• Slab Serif: són tipografies amb traços simples i amb relativament poc contrast entre el gruix i el prim (vegeu la figura), però amb uns remats de decoració molts sòlids i rectangulars. Alguns exmeples són Courier, Rockwell o Clarendon.

Smashingmagazine.com

Als inicis de la web els dissenyadors estaven limitats a les tipografies que l’usuari tenia instal·lades localment al seu ordinador, ja que les tecnologies no permetien la visualització de textos amb tipografies externes. Per això que les pàgines web estaven limitades a un conjunt limitat de tipus de lletra.

Exemple de codi CSS d’una font web segura i HTML que el fa servir:

<!DOCTYPE html> 
<html>
<style>
	   body {
		 font-family: Arial, sans-serif;
	   }
</style>
</head>
<body>
 
		<h1>Lorem ipsum dolor sit amet</h1>
 
		<p>Lorem ipsum dolor sit amet.</p>
		<p>0 1 2 3 4 5 6 7 8 9</p>
 
</body>
</html>

A mida que les tecnologies van anar evolucionant, va aparèixer el concepte de tipografia web.

Google té un dels repositoris de fonts web més populars, Google Fonts (vegeu la figura).

Font: https://fonts.google.com

A la figura hi ha un exemple d’ús d’una web font ubicada al propi servidor, ja que la ruta a la ubicació del fitxer woff és local.

Amb l’us de tipografies web, els dissenyadors de pàgines web poden controlar completament la visualització dels textos de les seves pàgines.

Una icona és la represenatació gràfica d’un signe o símbol que ajuda en la interpretació d’un missatge dins d’un procés comunicatiu. Una icona ha de representar de forma immediata, amb la mínima expressió, el significat de l’element d’interfície que porta associat.

Per fer un disseny web centrat en l’experiència d’usuari, cal fixar-se que les icones siguin:

• Simples. No han de ser ambigües, han de representar un concepte únic. S’han d’evitar possibles interpretacions diferents segons la persona, la cultura, l’idioma….
• Fàcils d’interpretar. S’han de poder reconèixer a primera vista, han de ser universalment reconegudes. Si no, obliguem l’usuari a aprendre el seu significat i dificultem la seva interpretació.
• Usables Han de contribuir a la usabilitat del lloc web. És important tenir en compte la mida, la col·locació, el significat.
• Coherents. No es tracta de reinventar la roda, hi ha icones molt habituals per a determinades funcionalitats. Si per imprimir algun element és habitual l’icona de la impressora, fem-lo servir. Per a les xarxes socials també és convenient fer servir les icones habituals. No cal fer dissenys específics, ja que l’usuari està acostumat a uns determinats dissenys (vegeu la figura).

• Amb estil i estètica. Les icones han d’estar integrades dins de l’estil general del disseny de la pàgina web. Aspectes com la paleta de colors, les mides o altres han d’estar en consonància amb la resta del disseny de la pàgina. Un exemple de paleta d’icones amb disseny i colors molts definits és el de la figura.

• Atenció a la diversitat. És important fer servir icones que puguin ser interpretables pel màxim nombre de persones, ja que és important no excloure potencials clients o visitants. Així, s’aconsegueix millorar l’accessibilitat i l’experiència d’usuari.

La composició visual d’un lloc web és la forma com es disposen els diversos elements que conformen la interfície d’usuari. Els objectius principals que ha d’asolir un bon disseny són la simplicitat i la coherència. La simplicitat d’una interfície web és un factor determinant a l’hora d’aconseguir que els usuaris tinguin una experiència satisfactòria mentre que la coherència entre els diferents elements de navegació també facilita la navegació de l’usuari pels continguts de la pàgina web.

Es pot establir una sèrie de principis bàsics de disseny que tenen importància a l’hora d’aconseguir una composició visual adequada:

• Equilibri dels diferents elements de la interfície. En aquest sentit, va bé establir cuadrícules per calcular l’espai que ocupen els diferents elements i com està repartit l’espai disponible. Depèn del disseny, pot interessar un equilibri:
  • Simètric, on els elements tenen pesos equivalents (vegeu la figura).
  • Asimètric, quan determinats elements tenen més pes visual.
  • Radial, per enfocar tot el disseny al voltant d’un punt central en comptes d’una línia.

Font: https://spyrestudios.com/howto-use-balanced-symmetry-in-web-design/

• Contrast. És important també per ressaltar determinats elements, sense modificar l’espai que ocupen. Pot ser interessant per destacar elements com la informació de contacte. Es pot aconseguir contrast jugant amb el tipus de lletra, la mida, el color de la font, els espais en blanc al voltant dels elements, els colors de fons. La figura és un bon exemple de joc de contrastos.

Font: https://priorbm.wixsite.com/mysite

• Èmfasi de determinats elements, principalment aquells que permeten assolir alguns objectius en concret. S’acostumen a anomenar crides a l’acció (en anglès, Call to Action) o CTA. Aquestes crides poden ser frases curtes de l’estil “Reserveu”, “Compreu ara”, “Subscriviu-vos!” o similars que portin els usuaris a seccions de la pàgina web on fer alguna cosa en concret. L’èmfasi, en aquests casos, s’ha de posar en el missatge en comptes d’en elements com una imatge de fons, per exemple. Es fan servir canvis de fonts i colors per aconseguir que aquests CTA destaquin. També ajuda l’espai en blanc al voltant del botó CTA per aconseguir que sigui fàcilment localitzable, sobretot si la pàgina té molt contingut. També pot ajudar assignar-los una posició fixa, de manera que quan l’usuari faci scroll el CTA sigui sempre visible al mateix lloc. A la figura podeu veure els CTA de la web de Dropbox.

Font: https://www.dropbox.com

• Jerarquia visual que estableixi diversos nivells d’importància entre els elements de la interfície. Les seccions de la pàgina web han de tenir en compte la manera com la mirada de l’usuari rastreja la pàgina per tal que vegi primer allò més important. Hi ha molts estudis que conclouen que els usuaris acostumen a navegar per les pàgines web des de la part superior esquerra, i després van desplaçant-se cap a la dreta i avall, formant una F o una Z imaginàries. És desitjable optimitzar el disseny de manera que la informació important vagi a la part superior esquerra i la informació menys important, a partir de la meitat inferior de la pàgina, que és la part que els usuaris acostumen a escanejar ràpidament. La figura mostra com els mapes de calor demostren el patró F, i a la figura podeu veure l’ordre de visualització d’aquest patró.

Font: NNGroup.com

Font: Langara

• Moviment. És un efecte visual que pot ajudar a atraure l’atenció sobre un element en concret si es fa servir amb subtilesa. Tot i això si s’abusa d’elements mòbils es pot crear molt soroll visual. Per exemple, per atraure l’atenció de l’usuari sobre una fletxa que permeti accedir a un contingut que estigui més avall, és interessant que aquesta fletxa tingui algun tipus d’efecte de moviment, com de rebot.
• Repetició de certs elements de disseny per crear un ritme visual a la pàgina web. Alternar entre dos tipus de lletra, fer servir els mateixos colors en diferents seccions de la pàgina, alternar entre una sèrie concreta de colors de fons en llistats d’articles, etc. Totes aquestes tècniques fan que l’usuari recordi la identitat visual del lloc web i que identifiqui més ràpidament alguns continguts. En general, fan una interfície d’usuari més consistent. Vegeu un bon exemple d’ús d’elements repetitius a la figura.

Font: Obermayer

• Harmonia. És un principi a tenir en compte en el disseny dels diferents elements d’interfície d’usuari. Els elements de la pàgina web han de compartir un llenguatge visual, format per una paleta de colors similars tant de fons com principals, unes tipografies, uns formats de pàragrafs de text, els espais al voltant dels botons,etc. El logotip del menú, una galeria d’imatges o un mapa de localització són exemples d’elements d’interfície que han d’estar en harmonia (vegeu la figura).

Font: http://pogon.co/

Per a cada fase del disseny web hi ha eines adients que poden facilitar les tasques i generar els documents necessaris. Vegeu a la taula un resum de les eines disponibles.

Cal estudiar en detall els editors de codi i les eines per a desenvolupadors que incorporen els navegadors web.

Per tal de desenvolupar un lloc web és útil fer servir un editor d’HTML. Aquest tipus de programari ofereix facilitats per a l’edició de documents HTML, i, a més a més, també pot proporcionar funcionalitats avançades per gestionar el codi i administrar el lloc web.

Existeixen diverses opcions per a l’edició del codi d’un lloc web: editors de text, editors en línia, bé entorns de desenvolupament integrats (IDE). No obstant això, les funcionalitats més importants adequades per al desenvolupament web són:

• Creació de documents nous d’una manera ràpida i còmoda
• Gestió de plantilles de diversos documents
• Sintaxi acolorida per a una millor llegibilitat dels documents
• Validació del codi
• Accés ràpid al codi amb l’ajuda de marcadors
• Configuració del sagnat i de l’estil del codi
• Autocompleció del codi amb tancament automàtic d’etiquetes
• Inserció d’etiquetes i atributs mitjançant auxiliars
• Gestió de fragments de codi reusable (en anglès, snippets)
• Gestió de projectes
• Connectors addicionals (ofereixen més funcionalitats al gestor)

Posteriorment, per a la visualització de la pàgina web desenvolupada s’utilitza el navegador web que, alhora, incorpora una sèrie d’eines per als desenvolupadors que ajuden en la depuració del codi de la pàgina. Avui dia hi ha una gran quantitat d’editors d’HTML, amb característiques comunes, que permeten el desenvolupament d’un lloc web. Alguns dels editors d’HTML amb els quals es pot treballar actualment són Brackets, Sublime Text, Atom, etc.

Algunes de les característiques més rellevant d’aquests editors d’HTML són les següents:

Visual Studio Code. Malgrat ser un producte de Microsoft, és programari de codi obert. Quant a funcionalitat s’apropa a un entorn de desenvolupament integrat. Té moltes extensions disponibles que afegeixen compatibilitat amb els llenguatges de programació més populars, com PHP o Python. També permet el control de versions amb connectivitat amb els principals repositoris i proveïdors de SCM (Source Control Management) com Git. Descarregueu-lo a: code.visualstudio.com.

Vegeu a la figura la funcionalitat de terminal integrat de Visual Studio Code:

Font: https://code.visualstudio.com/docs/editor/integrated-terminal

Vegeu a la figura una captura de pantalla de la seva interfície:

Sublime Text. Disposa de moltes comandes de teclat que agilitzen l’accés a les funcions i les característiques que ofereix. Així mateix, també compta amb plugins i complements disponibles per a llenguatges de programació específics. La seva interfície és en pestanyes i mostra una vista en miniatura per visualitzar la part del codi que s’està treballant. Es distribueix com un programari d’avaluació, es troba disponible per a Windows, Linux i Mac OS X, i és compatible amb gitHub. Descarregeu-lo a: www.sublimetext.com.

Vegeu a la figura una captura de pantalla de la seva interfície:

Atom. Proporciona les funcions més importants per al desenvolupament web, està integrat amb eines dels navegador, i també amb gitHub. És de codi obert i està disponible per a Windows, Linux i Mac OS X. Descarregeu-lo a: atom.io.

Vegeu a la figura una captura de pantalla de la seva interfície:

Adobe DW (Dreamweaver). És un programa amb una llarga tradició com a eina de disseny i programació de pàgines web. És un entorn de desenvolupament integrat especialitzat en pàgines web, ideal per a maquetació HTML, creació de CSS, amb integració amb JQuery i Bootstrap. És un entorn de treball completament orientat al disseny web (vegeu la figura).

Font: https://matr1x.cubava.cu/visual-studio-code-vs-dreamweaver-cc/

També es pot optar per desenvolupar el lloc web amb un entorn de desenvolupament integrat (IDE), que normalment ofereix diferents funcions: editor de codi, compilador, depurador, etc. S’allunya del concepte d’editor perquè ofereix una solució completa i especialitzada en certs llenguatges de programació, entre els quals els llenguatges de programació web. Alguns exemples d’IDE que permeten l’elaboració de pàgines web són Netbeans (disponible a netbeans.org), Eclipse (disponible a eclipse.org/downloads) o CodeLite (disponible a codelite.org).

Per accedir a un determinat lloc web cal un determinat programari que hi permeti l’accés. S’anomena navegador web.

Actualment els navegadors més utilitzats són Google Chrome, Mozilla Firefox, Microsoft Edge, Safari i Opera. A la figura podeu veure les diferents quotes de mercat dels principals navegadors.

Font: https://gs.statcounter.com/browser-market-share#monthly-202009-202109-bar

Cal tenir en compte que no tots els navegadors interpreten el codi HTML i CSS de la mateixa manera i presenten variacions en la visualització de la pàgina web que fan que el resultat no sigui el mateix. A més, algunes d’aquestes diferències són tan importants que poden fer que algunes parts de la pàgina no es vegin o no funcionin.

Algunes consideracions per millorar la compatibilitat d’un lloc web amb els diferents navegadors són:

• Validar el codi del lloc web: és molt recomanable validar el codi del conjunt de les pàgines que conformen un lloc web, ja que si no està ben escrit, un navegador pot interpretar el codi de manera diferent i, en conseqüència, el resultat pot no ser l’esperat.
• Inicialitzar els estils CSS: per molt que no es facin servir estils, cada element HTML té uns estils CSS per defecte, i aquests no són exactament iguals en tots els navegadors. Així, si s’inicialitzen aquests valors per defecte, es controla l’aspecte de cada element de manera més efectiva. Es poden obtenir alguns exemples de fulls d’estils per reinicialitzar els estils del navegador a ageek.dev/css-resets.
• Usar tècniques suportades: les darreres versions dels llenguatges HTML i CSS ofereixen moltes tècniques per millorar l’aspecte de les pàgines web, però no totes estan suportades per tots els navegadors.

Les característiques dels navegadors que es tenen en compte a l’hora de comparar-los entre si són:

• Ús dels recursos, memòria RAM i CPU
• Temps d’arrencada, tant en fred com en calent
• Temps de càrrega
• Rendiment JavaScript
• Rendiment gràfic
• Compliment d’estàndards

Actualment hi ha eines com Acid Test que posen a prova els navegadors per saber si compleixen els estàndards web. Podeu trobar més informació a: www.acidtests.org.

Els navegadors més importants ofereixen una sèrie d’eines que faciliten el desenvolupament d’un lloc web. D’aquesta manera, Chrome, Firefox i Edge ofereixen les eines per a desenvolupadors.

Les funcions més importants que ofereixen les eines per a desenvolupadors són:

• Depurar el codi Javascript, amb consola d’execució integrada.
• Inspeccionar el DOM.
• Analitzar el temps d’execució de cada funció per optimitzar-ne el rendiment.

Per accedir-hi, tant en Chrome com a Firefox, es prem la tecla F12. Llavors apareix l’aplicació per inspeccionar el contingut de la pàgina web en una finestra lateral o a sota.

Vegeu a la figura, figura i figura la visualització d’aquestes eines en els navegadors Chrome, Firefox i Edge, respectivament:

Aquestes eines permeten seleccionar qualsevol element HTML o estil CSS i modificar-lo per veure com queda. Cal tenir en compte que els canvis no es guarden al document HTML.