El cat\u00e0leg en l\u00ednia de Google Fonts ens assegura que les tipografies del nostre disseny seran visualitzades en tots els dispositius.<\/p><\/div>\n
Hem de tenir en compte que les mides de les lletres no funcionen igual en paper que en digital. Hem de fer proves cont\u00ednuament per revisar que els textos del nostre disseny siguin llegibles en qualsevol dispositiu. Generalment, els programes de disseny digital tipus Sketch compten amb una biblioteca de textos per a mides est\u00e0ndard segons la seva categoria: titulars, \u00edndexs, super\u00edndexs, textos generals, etc.<\/p>\n
\n
La longitud ideal per a la llegibilitat de la c\u00f2pia del cos \u00e9s de 40 a 60 car\u00e0cters per l\u00ednia.<\/p>\n<\/div>\n
9.5.2.4. Imatges<\/h4>\n
Les imatges incloses en el nostre disseny han d\u2019estar en format RGB, igual que els colors, ja que la visualitzaci\u00f3 del nostre disseny final es realitzar\u00e0 en una pantalla. Parlem de qu\u00e8, per poder imprimir les imatges, era imprescindible una resoluci\u00f3 de 300 dppi<\/em>. Doncs b\u00e9, en digital, n\u2019hi haur\u00e0 prou amb qu\u00e8 les imatges comptin amb 72 dppi<\/em>. Hi ha dues raons, principalment: per a qu\u00e8 es vegi b\u00e9 en pantalla, n\u2019hi ha prou amb aquesta resoluci\u00f3; i els dissenys en digital han de pesar el m\u00ednim, per a qu\u00e8 tant els temps de c\u00e0rrega com de desc\u00e0rrega no siguin un llast.<\/p>\n9.5.2.5. Composici\u00f3 i jerarquia visual<\/h4>\n
Pel que fa a la composici\u00f3, quan dissenyem per visualitzar en suport digital, hem de transcendir la \u00abp\u00e0gina\u00bb com a tal i entendre que l\u2019espai sobre el qual es dissenya ja no \u00e9s un espai delimitat per uns marges. Per aix\u00f2, hem d\u2019introduir els termes click<\/em> i scroll<\/em>. Els clicks<\/em> s\u00f3n el motor que mou el nostre disseny: anem d\u2019un lloc a un altre, ens movem pels diferents elements a trav\u00e9s de clicks<\/em>. L\u2019scroll<\/em> fa refer\u00e8ncia a la verticalitat dels dissenys: el disseny va m\u00e9s enll\u00e0 del que cap a la pantalla i mitjan\u00e7ant l\u2019scroll<\/em> ens anem despla\u00e7ant cap avall. Tamb\u00e9 hi dissenys en els quals el contingut es despla\u00e7a de manera horitzontal, encara que aquests dissenys solen ser infreq\u00fcents en plataformes web i no t\u00e0ctils.<\/p>\nEncara que la creativitat estigui a l\u2019ordre del dia i els l\u00edmits nom\u00e9s els imposi el mestratge del dissenyador, els programes de disseny solen tenir diverses plantilles de composici\u00f3 amb m\u00f2duls en els diferents entorns de disseny, de manera que la coher\u00e8ncia entre plataformes i mides de pantalla sigui f\u00e0cil de controlar amb l\u2019\u00fas d\u2019elements i espais uniformes.<\/p>\n
Igual que en un disseny convencional parl\u00e0vem de la import\u00e0ncia de la ret\u00edcula, en un disseny digital solen alinear-se tots els elements a una quadr\u00edcula de 8dp, mentre que els elements m\u00e9s petits com icones o textos de suport solen anar alineats a una quadr\u00edcula de 4dp.<\/p>\n
Els dissenys se solen organitzar a la pantalla en columnes. Per configurar aquestes columnes, els programes de disseny permeten utilitzar percentatges en comptes de valors fixos. Aix\u00f2 ha de ser aix\u00ed perqu\u00e8 el que es pret\u00e9n \u00e9s que el contingut s\u2019adapti de manera flexible a qualsevol mida de pantalla. Aix\u00ed mateix, tamb\u00e9 s\u2019ajustaran autom\u00e0ticament, depenent de la pantalla en la qual s\u2019estigui visualitzant el disseny (o la seva orientaci\u00f3 vertical o horitzontal), els espais entre columnes.<\/p>\n
Els marges seran l\u2019espai que queda entre el contingut i les vores esquerra i dreta de la pantalla. Les amplades de marge es defineixen com a valors fixes a cada rang. Per adaptar-se millor a la pantalla, l\u2019amplada del marge pot canviar. Els marges m\u00e9s amplis s\u00f3n m\u00e9s adequats per a pantalles m\u00e9s grans, ja que creen m\u00e9s espais en blanc al voltant del per\u00edmetre del contingut.<\/p>\n
\n
Cal tenir en compte que els diferents elements i espais que configuren el nostre disseny pot ser que es vegin lleugerament diferents a cada dispositiu.<\/p>\n<\/div>\n
9.5.2.6. Usabilitat i navegaci\u00f3<\/h4>\n
La navegaci\u00f3 permet als usuaris moure\u2019s a trav\u00e9s d\u2019un disseny o aplicaci\u00f3. Navegar \u00e9s el terme que utilitzem per referir-nos a l\u2019acte de moure\u2019ns entre les diferents pantalles d\u2019una aplicaci\u00f3, per poder completar les diverses tasques que se\u2019ns mostren.<\/p>\n
La navegaci\u00f3 a trav\u00e9s del document podr\u00e0 realitzar-se en tres sentits:<\/p>\n
\n- La navegaci\u00f3 lateral es refereix a moure\u2019s entre pantalles al mateix nivell de jerarquia. El component de navegaci\u00f3 principal d\u2019una aplicaci\u00f3 ha de proporcionar acc\u00e9s a totes les destinacions en el nivell superior de la seva jerarquia.<\/li>\n
- La navegaci\u00f3 cap endavant es refereix a moure\u2019s entre pantalles en nivells consecutius de jerarquia, passos en un flux o en una aplicaci\u00f3. La navegaci\u00f3 cap endavant integra el comportament de la navegaci\u00f3 en contenidors (com targetes, llistes o imatges), botons, enlla\u00e7os o mitjan\u00e7ant cerques.<\/li>\n
- La navegaci\u00f3 inversa es refereix a moure\u2019s cap enrere, a trav\u00e9s de pantalles, cronol\u00f2gicament (dins d\u2019una aplicaci\u00f3 o a trav\u00e9s de diferents aplicacions) o jer\u00e0rquicament (dins d\u2019una aplicaci\u00f3). Les convencions de la plataforma determinen el comportament exacte de la navegaci\u00f3 inversa dins d\u2019una aplicaci\u00f3.<\/li>\n<\/ul>\n
Les transicions en la navegaci\u00f3 utilitzen el moviment per guiar els usuaris entre dues pantalles. La seva funci\u00f3 \u00e9s ajudar els usuaris a orientar-se, deixant clara la jerarquia de la seva aplicaci\u00f3, utilitzant aquest moviment per indicar com es relacionen els elements entre ells.<\/p>\n
9.5.2.7. Opcions d’interacci\u00f3 amb l’usuari<\/h4>\n
El disseny ha de ser f\u00e0cilment accessible i intu\u00eftiu, de manera que permeti a tots els usuaris de totes les capacitats navegar sense problemes per tota la seva interf\u00edcie, complint amb \u00e8xit els seus objectius. Es pot ajudar els usuaris a navegar a trav\u00e9s de l\u2019aplicaci\u00f3, dissenyant elements clars amb crides que dirigeixin les accions.<\/p>\n
L\u2019usuari no pot sentir-se perdut i ha d\u2019intuir amb naturalitat qu\u00e8 \u00e9s el que passar\u00e0 si prem un bot\u00f3 o si llisca el dit en una galeria. Per a aix\u00f2, el dissenyador ha de tenir clar que ha de fer servir elements clarament visibles, amb prou contrast i mida perqu\u00e8 siguin comprensibles. La import\u00e0ncia ser\u00e0 la que marqui la jerarquia entre els diferents elements (com en qualsevol disseny), de manera que la informaci\u00f3 clau ha de ser interpretada amb un sol cop d\u2019ull. \u00c9s per aquest motiu que, a la pantalla, s\u2019han de col\u00b7locar els diferents elements, d\u2019acord amb el seu nivell relatiu d\u2019import\u00e0ncia.<\/p>\n
\n
Situa accions importants a la part superior o inferior de la pantalla, de manera clarament diferenciada.<\/p>\n<\/div>\n
El disseny ha d\u2019estar organitzat de manera que el m\u00e9s important estigui a la part superior i vagi fluint cap a la part inferior de la pantalla. S\u2019ha de passar del m\u00e9s important al menys important i els elements del disseny han d\u2019ajudar a anar determinant els diferents punts d\u2019enfocament.<\/p>","protected":false},"excerpt":{"rendered":"
9.5. Disseny digital 9.5.2. Elements del disseny digital No podem saber cap a on s\u2019encamina el disseny, per\u00f2 som conscients que la velocitat del canvi dels darrers anys ens obliga a reciclar-nos i a aprendre cont\u00ednuament. El disseny editorial en paper era una cosa est\u00e0tica, amb una mida definida f\u00edsicament sobre la qual treballar i […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/ca\/wp-json\/wp\/v2\/pages\/1021"}],"collection":[{"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/ca\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/ca\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/ca\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/ca\/wp-json\/wp\/v2\/comments?post=1021"}],"version-history":[{"count":24,"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/ca\/wp-json\/wp\/v2\/pages\/1021\/revisions"}],"predecessor-version":[{"id":1201,"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/ca\/wp-json\/wp\/v2\/pages\/1021\/revisions\/1201"}],"wp:attachment":[{"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/ca\/wp-json\/wp\/v2\/media?parent=1021"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/wp-content\/uploads\/sites\/22\/2019\/07\/01-codigo-de-color.jpg\")
![\"\"](\"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/wp-content\/uploads\/sites\/22\/2019\/07\/01-google-fonts-catalogo-1024x702.jpg\")