Debemos tener en cuenta que los tama\u00f1os de las letras no funcionan igual en papel que en digital. Tenemos que hacer pruebas continuamente para chequear que los textos de nuestro dise\u00f1o sean legibles en cualquier dispositivo. Generalmente, los programas de dise\u00f1o digital tipo Sketch cuentan con una biblioteca de textos para tama\u00f1os est\u00e1ndar seg\u00fan su categor\u00eda: titulares, \u00edndices, super\u00edndices, textos generales, etc.<\/p>\n
\n
\n
La longitud ideal para la legibilidad de la copia del cuerpo es de 40 a 60 caracteres por l\u00ednea.<\/p>\n<\/div>\n
9.5.2.4. Im\u00e1genes<\/h4>\n
Las im\u00e1genes incluidas en nuestro dise\u00f1o deben estar en formato RGB, al igual que los colores, ya que la visualizaci\u00f3n de nuestro dise\u00f1o final se realizar\u00e1 en una pantalla. Hablamos de que, para poder imprimir las im\u00e1genes, era imprescindible una resoluci\u00f3n de 300 dppi<\/em>. Pues bien, en digital, bastar\u00e1 con que las im\u00e1genes cuenten con 72 dppi<\/em>. Hay dos razones, principalmente: para que se vea bien en pantalla, es suficiente con esa resoluci\u00f3n; y los dise\u00f1os en digital deben pesar lo m\u00ednimo, para que tanto los tiempos de carga como de descarga no sean un lastre.<\/p>\n9.5.2.5. Composici\u00f3n y jerarqu\u00eda visual<\/h4>\n
En cuanto a la composici\u00f3n, cuando dise\u00f1amos para visualizar en soporte digital, debemos trascender la \u00abp\u00e1gina\u00bb como tal y entender que el espacio sobre el que se dise\u00f1a no es ya un espacio delimitado por unos m\u00e1rgenes. Para esto, tenemos que introducir los t\u00e9rminos\u00a0click<\/em>\u00a0y\u00a0scroll<\/em>. Los\u00a0clicks<\/em>\u00a0son el motor que mueve nuestro dise\u00f1o: vamos de un lugar a otro, nos movemos por los distintos elementos a trav\u00e9s de\u00a0clicks<\/em>. El\u00a0scroll<\/em>\u00a0hace referencia a la verticalidad de los dise\u00f1os: el dise\u00f1o va m\u00e1s all\u00e1 de lo que cabe en la pantalla y a trav\u00e9s del\u00a0scroll<\/em>\u00a0nos vamos desplazando hacia abajo. Tambi\u00e9n existen dise\u00f1os en los que el contenido se desplaza de manera horizontal, aunque estos dise\u00f1os suelen ser infrecuentes en plataformas web y no t\u00e1ctiles.<\/p>\nAunque la creatividad est\u00e1 a la orden del d\u00eda y los l\u00edmites solo los impone la maestr\u00eda del dise\u00f1ador, los programas de dise\u00f1o suelen tener varias plantillas de composici\u00f3n con m\u00f3dulos en los distintos entornos de dise\u00f1o, de modo que la coherencia entre plataformas y tama\u00f1os de pantalla sea f\u00e1cil de controlar con el uso de elementos y espacios uniformes.<\/p>\n
Al igual que en un dise\u00f1o convencional habl\u00e1bamos de la importancia de la ret\u00edcula, en un dise\u00f1o digital suelen alinearse todos los elementos a una cuadr\u00edcula de 8dp, mientras que los elementos m\u00e1s peque\u00f1os como iconos o textos de apoyo suelen ir alineados a una cuadr\u00edcula de 4dp.<\/p>\n
Los dise\u00f1os suelen organizarse en la pantalla en columnas. Para configurar estas columnas, los programas de dise\u00f1o permiten utilizar porcentajes en vez de valores fijos. Esto debe ser as\u00ed porque lo que se pretende es que el contenido se adapte de manera flexible a cualquier tama\u00f1o de pantalla. As\u00ed mismo, tambi\u00e9n se acomodar\u00e1n autom\u00e1ticamente, dependiendo de la pantalla en la que se est\u00e9 visualizando el dise\u00f1o (o su orientaci\u00f3n vertical u horizontal), los espacios entre columnas.<\/p>\n
Los m\u00e1rgenes ser\u00e1n el espacio que queda entre el contenido y los bordes izquierdo y derecho de la pantalla. Los anchos de margen se definen como valores fijos en cada rango. Para adaptarse mejor a la pantalla, el ancho del margen puede cambiar. Los m\u00e1rgenes m\u00e1s amplios son m\u00e1s apropiados para pantallas m\u00e1s grandes, ya que crean m\u00e1s espacios en blanco alrededor del per\u00edmetro del contenido.<\/p>\n
Hay que tener en cuenta que los diferentes elementos y espacios que configuran nuestro dise\u00f1o puede que se vean ligeramente distintos en cada dispositivo.<\/div>\n
9.5.2.6. Usabilidad y navegaci\u00f3n<\/h4>\n
La navegaci\u00f3n permite a los usuarios moverse a trav\u00e9s de un dise\u00f1o o aplicaci\u00f3n. Navegar es el t\u00e9rmino que utilizamos para referirnos al acto de movernos entre las diferentes pantallas de una aplicaci\u00f3n, para poder completar las distintas tareas que se nos muestran.<\/p>\n
La navegaci\u00f3n a trav\u00e9s del documento podr\u00e1 realizarse en tres sentidos:<\/p>\n
\n- La navegaci\u00f3n lateral se refiere a moverse entre pantallas en el mismo nivel de jerarqu\u00eda. El componente de navegaci\u00f3n principal de una aplicaci\u00f3n debe proporcionar acceso a todos los destinos en el nivel superior de su jerarqu\u00eda.<\/li>\n
- La navegaci\u00f3n hacia adelante se refiere a moverse entre pantallas en niveles consecutivos de jerarqu\u00eda, pasos en un flujo o en una aplicaci\u00f3n. La navegaci\u00f3n hacia adelante integra el comportamiento de la navegaci\u00f3n en contenedores (como tarjetas, listas o im\u00e1genes), botones, enlaces o mediante b\u00fasquedas.<\/li>\n
- La navegaci\u00f3n inversa se refiere a moverse hacia atr\u00e1s, a trav\u00e9s de pantallas, cronol\u00f3gicamente (dentro de una aplicaci\u00f3n o a trav\u00e9s de distintas aplicaciones) o jer\u00e1rquicamente (dentro de una aplicaci\u00f3n). Las convenciones de la plataforma determinan el comportamiento exacto de la navegaci\u00f3n inversa dentro de una aplicaci\u00f3n.<\/li>\n<\/ul>\n
Las transiciones en la navegaci\u00f3n utilizan el movimiento para guiar a los usuarios entre dos pantallas. Su funci\u00f3n es ayudar a los usuarios a orientarse, dejando clara la jerarqu\u00eda de su aplicaci\u00f3n, utilizando ese movimiento para indicar c\u00f3mo se relacionan los elementos entre ellos.<\/p>\n
9.5.2.7. Opciones de interacci\u00f3n con el usuario<\/h4>\n<\/div>\n
El dise\u00f1o tiene que ser f\u00e1cilmente accesible e intuitivo, de modo que permita a todos los usuarios de todas las capacidades navegar sin problemas por toda su interfaz, cumpliendo con \u00e9xito sus objetivos. Se puede ayudar a los usuarios a navegar a trav\u00e9s de la aplicaci\u00f3n, dise\u00f1ando elementos claros con llamadas que dirijan las acciones.<\/p>\n
El usuario no puede sentirse perdido y debe intuir con naturalidad qu\u00e9 es lo que va a suceder si pulsa un bot\u00f3n o si desliza el dedo en una galer\u00eda. Para ello, el dise\u00f1ador debe tener claro que tiene que usar elementos claramente visibles, con suficiente contraste y tama\u00f1o para que sean entendibles. La importancia ser\u00e1 la que marque la jerarqu\u00eda entre los distintos elementos (como en todo dise\u00f1o), de modo que la informaci\u00f3n clave debe ser interpretada de un solo vistazo. Para ello, en la pantalla, se tienen que colocar los distintos elementos, de acuerdo con su nivel relativo de importancia.<\/p>\n
\n
Sit\u00faa acciones importantes en la parte superior o inferior de la pantalla, de manera claramente diferenciada.<\/p>\n<\/div>\n
El dise\u00f1o debe estar organizado de modo que lo m\u00e1s importante est\u00e9 en la parte superior y vaya fluyendo hacia la parte inferior de la pantalla. Se debe pasar de lo m\u00e1s importante a lo menos importante y los elementos del dise\u00f1o tienen que ayudar a ir determinando los distintos puntos de enfoque.<\/p>","protected":false},"excerpt":{"rendered":"
9.5. Dise\u00f1o digital 9.5.2. Elementos del dise\u00f1o digital No podemos saber hacia d\u00f3nde se encamina el dise\u00f1o, pero somos conscientes de que la velocidad del cambio de los \u00faltimos a\u00f1os nos obliga a reciclarnos y a aprender continuamente. El dise\u00f1o editorial en papel era algo est\u00e1tico, con un tama\u00f1o definido f\u00edsicamente sobre el que trabajar […]<\/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\/wp-json\/wp\/v2\/pages\/1021"}],"collection":[{"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/wp-json\/wp\/v2\/comments?post=1021"}],"version-history":[{"count":24,"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/wp-json\/wp\/v2\/pages\/1021\/revisions"}],"predecessor-version":[{"id":1201,"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/wp-json\/wp\/v2\/pages\/1021\/revisions\/1201"}],"wp:attachment":[{"href":"http:\/\/disseny.recursos.uoc.edu\/recursos\/dis-marca\/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\")