Básicos de Diseño

4/29
Recursos

Dos conceptos básicos que debes tener en cuenta para el diseño de interfaces son la retícula y la tipografía.

La retícula (grid) en el diseño de interfaces

La retícula es la herramienta que sirve como guía dentro del área donde se realiza el diseño como tal. Consiste en una serie de líneas que dibujan una rejilla uniforme, sobre la que se pueden definir columnas y filas, siendo las primeras de una importancia particular.

Con ellas, la alineación de los elementos gráficos se puede hacer de forma precisa y profesional, dando consistencia. Dependiendo del gusto y las necesidades del diseñador, esta se puede personalizar para un uso cómodo.

972.png

Lo ideal para poder hacer diseño responsivo o adaptable es usar:

  • Doce columnas para el diseño en pantallas grandes o de laptops
  • Ocho columnas para dispositivos como tablets
  • Cuatro columnas para móviles
    Esta es la recomendación, aunque, por supuesto, está sujeto a criterio del diseñador y de los requerimientos del producto.

La tipografía en el diseño de interfaces

La tipografía es el área que refiere a la composición de los elementos para texto. Las familias de fuentes (font families) son las categorías que existen para clasificar las diferentes variaciones dentro de los estilos de texto. Se conforman por:

  • Serif: su estilo incluye remates o apéndices al final de los trazos del carácter. Dan un aspecto más formal y una personalidad más clásica.
  • Sans-serif: los caracteres de esta familia no poseen remates al final de los trazos. Esto brinda una apariencia más moderna y minimalista.
  • Monospace: se caracteriza por caracteres con un ancho equitativo, ocupando todas ellas el mismo espacio de forma horizontal. Se usan mucho para código.
  • Scripts: tienen un estilo de escritura natural, como manuscrita. Tiene un aspecto ornamentado y más artístico, aunque no es recomendable para textos largos y pequeños, pues hace difícil su lectura.
Tipografias.png

Sugerencias adicionales en el uso de fuentes

Se sugiere un uso moderado de las fuentes, de forma que, en un proyecto, se incluyan de dos a tres variantes cuando mucho. No hay que olvidar que estas son las que le dan al estilo y personalidad del producto, por lo que abusar de muchas es perder consistencia.

Además, otras consideraciones importantes son:

  • El tamaño de letra para su fácil lectura
  • El espacio que ocupen entre ellas mismas
  • el espacio entre líneas de texto (interlineado).

Se recomienda que por cada pixel para el tamaño de fuente se agregue un veinte por ciento en su interlineado. Por ejemplo, si el tamaño de fuente es de 10 px, el interlineado debería ser de 12 px.

Así como estos, hay más aspectos que no se deben menospreciar, como el contraste. El color puede convertirse en un enemigo para la legibilidad si no se aplica adecuadamente.

Contribución creada con aportes de: Luis Enrique Herrera.

Aportes 118

Preguntas 11

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Columna + Margen + Medianil = Retícula
Dispositivos:

  • Web = 12 Columnas
  • Tablet = 8 Columnas (IOS: 768px | Android: 600dps)
  • Móviles = 4 Columnas

Tipografía:

  • Usar pocas tipografías (Max 3)
  • Sean legibles (Evitar tipografías pequeñas)
  • Ancho de columna correcto (66 caracteres por linea
  • Interlineado (1 + 20%= 10pts / 12pts)
  • Buen contraste

La maestra habla super rapido y cada palabra que dice es super importante y de valor. Tenía todos los videos en velocidad de 1.25x y con ella lo tengo a .85x 😛

Les dejo mis apuntes:
Las columnas son las alineaciones donde van los contenidos. Existen márgenes que es el espacio entre la columna y el resto de la página y los medianiles que nos ayudan a organizar las colunas.
Tamaños de columnas:
Web 12 columnas
Tablet 8 columnas IOS (768px) Android (600DP)
Dispositivos 4 columnas

TIPOGRAFÍAS
Serif: personalidad sobria. Ejemplo: Times New Roman
Sanserif: Más geométricas y modernas. Ejemplo: Helvetica
Monospace: Todos los caracteres tienen el mismo ancho. Se usan en editores de texto o código. Ej. Courier new
Scripts: Imitan la escritura a mano.

Recomendaciones:
1.Usa máximo 3 tipografías.
2.Asegúrate que las tipografías son legibles
3.66 caracteres por línea es lo adecuado.
4.Para saber el tamaño adecuado del interlineado usa la fórmula 1+20% . Ejemplo: Si tienes una tipografía de tamaño 10 puntos el interlineado ideal sería de 12.
5. Es importante saber contrastar.

Las medidas estandar para hacer un diseño responsive son:

Pantalla computador: 1440px
Pantalla computador media: 1200px
Pantalla computador standar : 1024px
Pantalla computador pequeño: 992px
Tablet: 768px
Celular Landscape (Horizontal): 480px
Celular Portrait mediano: 375px
Celular Portrait pequeño (Vertical): 320px

Esas son las medidas que utilizamos bastante al hacer una página web que sea responsive, pueden utilizar como guia para los que no saben aun:

Primero en cualquier página web le dan click derecho y luego donde dice inspeccionar (Ctr + Shift + i):

Luego damos click donde estan los cuadro de la imagen (justamente donde esta mi puntero de mouse):

Y listo, tenemos las medidas estandar en los cuadraditos donde estan mi puntero:



Espero les ayude un poco a manejarse con medidas.

Un último tip es activar los media query para obsevar los cambios que hara el diseño de la página y poder tener algun diseño adicional (esto es opcional pero nunca esta de más saberlo):

La Retícula: Es un herramienta utilizada en diseño gráfico para hacer composiciones sobre todo en diseño editorial.

Con el auge del Internet paso de ser ser usada para crear revistas y periódicos a ser utilizada para crear paginas y contenido web.
Dentro del diseño de interfaces la retícula tienes varias partes:

  • La columna: Alineaciones verticales donde podemos acomodar nuestro contenido

  • El margen: es el espacio que existe entre el borde de la pagina o el formato y el contenido principal

  • Medianil: separaciones entre las columnas que nos ayudan a ordenar mejor nuestro elemento.

Importancia de la Retícula:

  • Nos ayuda estructura en el diseño.

  • Nos permite alinear de manera ordenada nuestros elementos…

  • Nos ayuda a tener claridad y consistencia.

  • Podemos trabajar en diferentes dispositivos.

En los aportes de la clase, hay dos recursos buenísimos que deberíamos empezar a usar.

  1. Font Pair: Te da un conjunto de fuentes que funcionan bien juntas, para que no tengas que pasar tanto tiempo eligiendo
  2. Coloreable: Página que te permite revisar el contraste del color de un texto con el fondo de acuerdo a las normas WCAG
    (AAA: Muy buen contraste - AA: Contraste aceptable - Y de ahí mal contraste)

NOTAS:
RETICULA: se utiliza para hacer composiciones
Compuesta:
Columna— contenido
Margen— espacio entre borde de pág. y el contenido
Medianil— separación entre columnas
Importancia:
estructura | diseño |orden |claridad | trabajar en =/ dispositivos

En web— retícula de 12 columnas
Tablet— retícula de 8 (ipad oandroid)
IOS 768 pixeles | ANDROID 600 dps

NOTITA:
*dp es: pixel de densidad independiente = cantidad de pixeles que hay en un área determinada.
*pixel : un punto en la pantalla| NO es una U de medida establecida.
Importante; dispositivo con > densidad tiene >calidad de imagen

Dispositivos móvil: recomendable 4 columnas. Especialmente en diseño responsivo.

TIPOGRAFÍA:
=/ variantes dentro de una misma FUENTE
Estilos de familias tipográficas:
SERIF—> remates o patitas al final de carácter (seriedad) Ejem: time new roman
SANS-SERIF—> geométricas, dinámicas (moderno)
MONOSPACE—> caracteres mismo ancho
Usadas- en editores de texto o código
SCRIPTS—> simulan escritura a mano

Recomendación : USO TIPOGRAFÍAS:
*usa pocas tipografías Max 3
*legibles
*ancho columna correcto—> 66 caracteres x línea
*interlineado [1 + el 20%] = Sí tipografía es 10 puntos el interlineado debe ser de 12
*buen contraste: color de texto se visualice bien con el color de fondo

Tipos de retículas:

Web: 12 columnas
Tablet: 8 columnas (IOS 768px) (Android 600 dp)
Mobile: 4 columnas

Aún si no se tienen todos los conceptos básicos de diseño al comienzo, si procuramos alinear correctamente y jerarquizar los elementos, podemos lograr un diseño mas profesional y “estéticamente agradable”.

Muy interesante el tema, sería bueno que dejaran las imágenes que utilizan durante la explicación en los archivos descargables, para facilitar los apuntes.

¡Hola compañeros! les comparto un artículo que encontré sobre retículas, especialmente en UI, por si quieren profundizar un poco más en el tema.
https://www.uifrommars.com/mejora-tu-diseno-ui-utilizando-reticulas/

Comparto mis apuntes, seguimos aprendiendo!!
la formula, es aporte de uno de los compañeros.

No me termina de atrapar la maestra tal vez es por que aún son los temas básicos me siento como cuando leen la presentación en la escuela

¿Cuál es la diferencia entre "px", "dip", "dp" y "sp"?

Sacado de https://stackoverflow.com/questions/2025282/what-is-the-difference-between-px-dip-dp-and-sp

px

Píxeles - corresponde a los píxeles reales de la pantalla.

in

Inches(Pulgadas= - se basa en el tamaño físico de la pantalla.
1 Pulgada = 2,54 centímetros

mm

Milímetros - basado en el tamaño físico de la pantalla.

pt

Puntos - 1/72 de pulgada basado en el tamaño físico de la pantalla.

dp o dip

Density-independent Pixels(Píxeles independientes de la densidad) - una unidad abstracta que se basa en la densidad física de la pantalla. Estas unidades son relativas a una pantalla de 160 ppp, por lo que un dp es un píxel en una pantalla de 160 ppp. La relación de dp a píxel cambiará con la densidad de la pantalla, pero no necesariamente en proporción directa. Nota: El compilador(de Android) acepta tanto “dip” como “dp”, aunque “dp” es más coherente con “sp”.

sp

Scaleable Pixels(Píxeles escalables) O píxeles independientes de la escala - es como la unidad dp, pero también se escala según la preferencia de tamaño de la fuente del usuario. Se recomienda usar esta unidad cuando se especifique el tamaño de las fuentes, para que se ajusten tanto a la densidad de la pantalla como a la preferencia del usuario. Tenga en cuenta que la documentación de Android es inconsistente en cuanto a lo que significa sp, un documento dice “píxeles independientes de la escala”, el otro dice “píxeles escalables”.

No es recomendable utilizar negro absoluto sobre blanco, ni contrastes demasiado altos porque causan fatiga visual, sobretodo si se trata de textos. (Esto se ha mencionado en otros cursos)

Recomendaciones de Diseño de Interfaces:

  • Utiliza pocas tipografías (máximo tres).

  • Asegúrate que la tipografía sea legible en distintos tamaños.

  • Lo ideal es tener 66 caracteres por línea (párrafo).

  • Cuidar el interlineado. Usa la fórmula 1 + 20% (tipografía a 10 pts., el interlineado ideal será de 12 pts.)

  • Cuida el contraste tipografía y fondo (colores).

  • Para interfaces web, lo ideal es usar retícula de 12 columnas. Y para Tablet una de 8 columnas. Para iOS el ancho es 768 px y para Android 600 dps.

  • En dispositivos móviles se maneja por lo regular una retícula de 4 columnas (es flexible para el responsive design).

Hola amigos, dentro del examen a final de este curso hay una pregunta que tiene que ver con los colores y el significado de algunos términos. Les recomiendo repasar eso ya que en este curso no lo tocan. ❤️

Retícula es la estructura 2D utilizada para organizar el contenido de forma fácil, nos ayuda a tener claridad y consistencia.

Tipo de columna correcto:
-66 carácteres por columna máximo.
-Interlineado 1 + 20%

bien

👍🙂

ANcho de columna correcta = 66 caracteres por línea (lo ideal)

Jejeje, lindo, pero claro, no se por qué los jóvenes de estos tiempos tienden a hablar rápido, pero robóticamente, sin entonaciones. Se entiende, pero se oye rarísimo.

  • Columna alineaciones verticales, margen, medianiles
  • Retícula estructura en el diseño
    • Web 12 Columnas
    • Tables 8 columnas
    • Móviles 4 columnas
  • Fuentes
    • Serif tienen remate al final. Seria
    • Sans-serif mas geométricas
    • monospace: todos los caracteres tienen el mismo espacio.
    • scripts. Emitan el trazo de la mano
  • Recomendaciones en diseño
    • Usar pocas tipografías
    • Asegurar de que sea legible en distintos formatos
    • Ancho de columna correcto 66 carácter por línea
    • 1 + 20% de interlineado
    • Buen contraste

Mis apuntes

https://material.io/design/introduction#principles es un manual muy completo de todo esto

Recuerden que una retícula no es un jaula, más bien es una guía, una vez que aprendes a usarla puedes romper las reglas a tu favor. Sólo no olvidar la heurísticas que los usuarios tienen al interactuar con las plataformas y dispositivos, las leyes de usabilidad, etc.

Retículas.

Las retículas son una herramienta que se usa para hacer composiciones, sobre todo en editorial, diseño gráfico y también diseño UX.

Dentro del diseño de interfaces las retículas tienen varias partes. La principal es la columna, que son alineaciones verticales donde podemos acomodar nuestro contenido. El margen que es el espacio que existe al borde de la página o alrededores y el contenido. Los medianiles son separaciones entre las columnas.

¿Por qué es importante utilizar una retícula?

  • Porque nos ayuda a tener estructura en el diseño y nos permite alinear de manera ordenada nuestros elementos.
  • Nos ayuda a tener claridad y consistencia.
  • Nos ayuda a poder trabajar en diferentes dispositivos.

<aside>
📌 Para web lo ideal es utilizar una retícula de 12 columnas, es muy versatil y puede ser adaptada fácilmente.
Para Tablet es ideal utilizar una de 8 columnas.
En celulares lo ideal es utilizar una de 4 columnas.

</aside>

Tipografias.

Las tipografías tienen diferentes variantes (delgado, mediano, grueso, etc.) entre cada familia de fuentes. Adicionalmente las fuentes se pueden clasificar en los siguientes estilos:

  • Serif: se caracteriza por tener tipografías con remates en sus finales y que se usan para contextos de mucha formalidad.
  1. Sans Serif: se caracterizan por no tener remates, ser más geométricas y modernas. Son las más usadas ya que cumplen muy bien su función de comunicar modernidad y seriedad.
  2. Monospace: todos los caracteres tienen el mismo ancho. Son comunes para editores de texto o código.
  3. Scripts: imitan la escritura a mano. Pueden llegar a ser difíciles de leer.

Recomendaciones:

  • Usar pocas tipografías (maximo 3)
  • Asegurarnos que sean legibles en todos los tamaños (evitar pequeños tamaños)
  • Usar un ancho de columna correcto (ideal: 66 caracteres porlíneaa) también cuidar el interlineado (1.2 es el mejor).
  • Tener un buen contraste (color de texto versus color de fondo).

1.- Usar pocas tipografías máximo tres, ya que no queremos saturar nuestro diseño
con una gran variedad de tipografías que solamente van a confundir a nuestro usuario.

2.- Asegurarnos que sean legibles en todos los tamaños. Sobre todo, hay que evitar usar tamaños muy pequeños de tipografía a la hora de diseñar interfaces, ya que nuestro diseño tiene que ser accesible para todo tipo de usuarios

3.- Seleccionar un ancho de columna correcto. Lo ideal es tener 66 caracteres por línea

4.- Cuidar el interlineado, que es el espacio entre cada una de las líneas de un párrafo. si tienes una tipografía en un tamaño de diez puntos, el interlineado ideal sería
de doce.

5.- Tener un buen contraste, ya que esto nos da accesibilidad. El contraste básicamente es que nuestro color de texto sea diferente y que contraste bien con nuestro color de fondo.

En este vídeo aprendí que que tenemos diferentes tipos de tipografías como lo son:

Las Sans Serif = Son aquellas que suelen ser geométricas.
Las Serif = son aquellas que tienen al final del trazo un remate.
Las MonoSpace= Todos los caracteres tiene el mismo ancho.
Las Scripts = Imitan las escritura a mano.(Tienes que saber donde colocarlas y cuales usar, por que hay unas que no son casi legibles)

Tenemos que aprender a manejar espacios y los tamaños de Letra

Uso del color: Un buen contraste disminuye la fatiga visual y ayuda al usuario a dividir los elementos en una pantalla.
El uso de contraste alto, direcciona la atención de los usuarios hacia elementos específicos en una pantalla y es una opción acertada para indicar qué contenido es importante o cuáles son elementos claves.

Para indicar que un botón debe ser seleccionado, el contraste ayuda a indicar que este llama a la acción.

Si se utilizan dos colores con un bajo contraste, se dificulta la lectura y más aún cuando se leen en pantallas al aire libre.

Por esto, se deben utilizar colores que aseguren una proporción de contraste adecuada entre los diferentes elementos.

He leído un poco acerca del tema de UX/designer y encontré unos consejos para todos aquellos que venimos de la industria de la tecnología

Dato Curioso:
Acerca del interlineado en texto asiático
La posición básica para el interlineado puede definirse en la configuración Posición básica del interlineado en el menú del panel Párrafo. Con el valor predeterminado (Cuadro largo Superior/Derecho), el interlineado se mide desde la parte superior del cuadro largo a la parte superior del cuadro largo de la línea siguiente. Al seleccionar la línea y aumentar el valor de interlineado utilizando el ajuste Cuadro largo Superior/Derecho, el espacio entre la línea seleccionada y la siguiente línea aumentará, ya que el interlineado de la dirección se mide desde la línea actual a la línea siguiente. El resto de configuraciones de Posición básica del interlineado miden el interlineado desde la línea actual a la línea anterior, por lo que si se modifica el valor del interlineado con estas configuraciones aumentará line aki encima de la línea actual.

Fórmula para definir interlineado: 1+20%. Ejemplo: para un tamaño de tipografía:10pts, el interlineado ideal es:12.

Todo diseñador debe trabajar con no más de tres tipografías incluido sus pesos, de hecho hay periódicos que solo usan una única tipografía (generalmente con serifas)

Lo primero que uno tiene que hacer cuando se enfrenta a la elección de las tipografías para una página web es establecer claramente la jerarquía, ya sea mediante color, tamaño, negritas, etc. Básicamente hacemos esto, porque si tenemos una buena jerarquía, el usuario navegará con mucha más facilidad a lo largo de nuestra web.

La retìcula, tipografìa y color son algunos pilares importantes a considerar a la hora de desarrollar el proyecto deseado de la mejor forma.

Excelente

Recomendaciones de tipografía

  • Usar pocas tipografías, máximo 3
  • Asegurar legibilidad en todos tamaños
  • Usar un espacio de columna e interlineado adecuado
  • Tener buen contraste

Retícula para diseño de interfaz:

Margen: Está alrededor de las columnas.
Columnas: Donde se acomodarán los elementos.
Medianil: Espacio que hay entre cada columna

Hola! Estos son mis ejemplos de los principios de Gestalt y leyes de UX, aplicados a la interfaz de platzi.

Las medidas estandar para hacer un diseño responsive son:

Pantalla computador: 1440px
Pantalla computador media: 1200px
Pantalla computador standar : 1024px
Pantalla computador pequeño: 992px
Tablet: 768px (IOS 768px | Android 600dps)

Lo de el 1 más el 20 % no me queda muy claro, por ejemplo si tengo un tipo de 10px no seria 13 ? osea 10 +1+20%(2)=13

Explicación de reticula.

Empieza explicación de tipografía.

Creo que uno de los errores más frecuentes es con las tipografías y el contraste. Debemos tener presente siempre que el usuario no debería esforzarse demasiado por entender lo que dice en un párrafo o texto en la web

para quien le interese, recomiendo leer este articulo que encontré en la web sobre las variaciones que existen dentro de una misma fuente tipográfica https://hadasmiticas.wordpress.com/2012/03/11/variantes-tipograficas/

Cómo se define qué tipografía va en qué lugar? Ejemplo: Todos los títulos y subtítulos con una, párrafos con otra. O títulos con una sola y el resto con otra.

Se nota que habla todo directo al grano, sin rodeos (Es directa)

Retícula: Márgenes + columnas + medianil

Lo ideal para las webs es utilizar una retícula de 12 columnas. Para tablet es ideal 8 columnas. Para dispositivos móviles son 4 columnas.

Estilos de familias tipográficas:
Las Serif tienen remates al final de los trazos del carácter
Las san serif son más simétricas sin remates
Las monospace todos los caracteres tienen el mismo ancho
Las scripts imitan la escritura a mano

Recomendaciones de tipografía:

  • Utilizar pocas tipografías
  • Asegurarse de que sean legibles en todos los tamaños
  • Cuidar el interlineado
  • Lograr un buen contraste

Reticula, nos ayuda tener una estructura en el diseño

Retículas recomendadas para web.

Los 4 minutos más enriquecidos de información hasta ahora 🤘

INTERLINEADO, fórmula 1+20%

ANCHO DE COLUMNA, núm. de carácteres 66 por línea

  • Usar máximo 3 tipografías
  • Que sean legibles en todo tamaño
  • Seleccionar un ancho de columnas correcto deben haber 66 caracteres por línea.
  • El interlineado (1+20%) Si mi tipografía es de 10 pptos el interlineado seria de 12

Resumen de Recomendaciones del uso de tipografías: máximo 3 tipografías, tamaños legibles, interlineado de n+20%, buen contraste de texto

Conceptos Básicos de Diseño
Retícula. Es una herramienta utilizada en Diseño Gráfico para hacer composiciones, sobre todo en diseño editorial. En el desarrollo de Internet pasó de ser usada para crear revistas y periódicos a ser utilizada para crear páginas de contenido web. Dentro del diseño de interfaces la retícula tiene varias partes.

La principal es la columna, que son alineaciones verticales donde podemos acomodar nuestro contenido. Después tenemos el margen que es el espacio que existe entre el borde de la página o el formato y el contenido principal.

Finalmente tenemos los medianiles, que son separaciones entre las columnas que nos ayudan a ordenar mejor nuestro elemento. Una retícula nos ayuda a tener estructura en el diseño y nos permite alinear de manera ordenada nuestros elementos. Nos ayuda a tener claridad y consistencia y poder trabajar en diferentes dispositivos.

Hablando de dispositivos para web, lo ideal es utilizar retícula de doce columnas, ya que es muy versátil y puede ser adaptada fácilmente para cualquier tipo de composición. Cuando trabajamos en tablet, lo ideal es usar una de ocho.

Esto quiere decir si estás trabajando en una aplicación que va a ser para Ipad o para Android hay que usar ocho columnas. Hay que recordar que para IOS el ancho es setecientos ochenta y ocho pixeles y para Android seiscientos pixeles.

En dispositivos móviles tenemos muchos tamaños de pantalla diferente, pero podemos comenzar con una retícula de cuatro columnas que nos ayudará a ser muy versátiles y flexibles, sobre todo cuando estemos haciendo diseños responsible ahora.

Tipografía. Hay diferentes variantes dentro de una misma fuente. Por ejemplo, en el caso de Roboto tenemos Light, Médium, Bolt e Itálicas. Esto nos permite también tener variaciones dentro de nuestro contenido. Hay diferentes estilos de familias tipográficas, Las primeras son las serif, son caracteres que tienen remates o patitas al final de cada uno de los caracteres y nos dan una personalidad un poco más sobria o seria.

Un ejemplo sería Times New Roman. La segunda son las Sans-Serif no tienen remates y suelen ser más geométricas. Esto nos da una personalidad más moderna. Un ejemplo de Sanserif podría ser Helvetica. Seguimos con la tercera que son las monospace o monoespaciadas.

Estas se caracterizan porque todos los caracteres tienen el mismo ancho. Normalmente en una tipografía Serif o San-Serif el carácter de la I es mucho más angosto que el de la M. En el caso de las Monospace todas ocupan el mismo espacio, son muy comúnmente usadas en editores de texto o de código.

Y un ejemplo podría ser Kurierno. Seguimos con la cuarta que son las Scripts. Estas imitan el trazo de la escritura a mano, sean cursivas o un trazo un poco más informal. Hay que tener cuidado ya que pueden llegar a ser un poco ilegibles.

Recomendaciones al seleccionar tipografías en nuestro diseño. La primera es usar pocas tipografías, máximo tres, no queremos saturar nuestro diseño con muchas tipografías que solo va a confundir a nuestro usuario.

La segunda es asegurarnos que sean legibles en todos los tamaños. Sobre todo, hay que evitar usar tamaños muy pequeños en la tipografía a la hora de diseñar interfaces. Ya que nuestro diseño tiene que ser accesible para todo tipo de usuarios.

Otra cosa de la que hay que ocuparnos es seleccionar un ancho de columna correcto. Lo ideal es tener sesenta y seis caracteres por línea. También hay que cuidar el interlineado, que es el espacio entre cada una de las líneas de un párrafo. Hay una forma que puedes utilizar y es uno más el veinte porciento, Esto quiere decir qué por ejemplo, si tienes una tipografía en un tamaño de diez puntos, el interlineado ideal sería de 12.

Para finalizar, hay que tener un buen contraste, esto nos da accesibilidad en nuestro diseño. El contraste básicamente es que nuestro color de texto sea diferente y que contraste bien con nuestro color de fondo. Si tenemos un color muy parecido no se va a poder leer.

Debo buscar más tipografías ya que siempre uso Poppins 😦

gracias

Interesante los apuntes y de como configurar la parte del diseño.

Me gustó mucho que al hablar de tipografía, mostrara las diferencias en el texto de las diapositivas. Me quedó super claro cada tipo 😃

Retícula:

La retícula es una herramienta utilizada en diseño gráfico para crear composiciones sobre todo en diseño editorial, con el auge de internet pasó de ser usada para crear revistas y periódicos a ser usada para crear páginas y contenido web

Dentro del diseño de interfaces la retícula tiene varias partes, la principal es la columna , que son alineaciones verticales donde podemos acomodar nuestro contenido.después tenemos el margen que es el espacio que hay entre el borde de la página o el formato y el contenido principal, y después tenemos los medianiles, que son separaciones entre las columnas que nos ayuda a separar mejor nuestro elemento.

¿Por qué es importante usar una retícula?

En primer lugar, porque nos ayuda a tener una estructura en el diseño y nos permite alinear de manera ordenada nuestros elementos

Luego nos ayuda a tener claridad y consistencia y a poder trabajar en diferentes dispositivos

Que reticula utilizar según el dispositivo.

web: Se recomienda utilizar una retícula de 12 columnas
Tablet : se recomienda utilizar una retícula de 8 columnas
Móvil: si bien hay variedad de resoluciones se recomienda comenzar con 4

¡Desempolvando conceptos de la U!

Contraste: da accesibilidad al diseño.

Excelente información !

Buenas tardes en px como se utilizaría la regla 1 +20% con un tamaño de 15px?

Retícula. La columna, margen, medianiles
Tipografía. Serif, sans-serif, monospace, scripts

Genial ^^

Siempre tener en cuenta que nuestro diseño tenga claridad y consistencia.

columna e interlineado

Bastante destacable el contraste como dicen a veces menos es mas

Retícula
Herramienta utilizada en el diseño para hacer composiciones.
Partes de la retícula:

  • Columnas: alineaciones verticales para acomodar contenido
  • Margen: espacio existente entre el borde la página y el contenido principal
  • Medianiles: separación ente columnas

Aun no entiendo del todo lo del 1 más el 20%, es decir que si tengo una tipo de 14 el interlineado quedaría de 16?

Cual es su tipografía preferida para un sitio responsivo compañeros?

La retícula: herramienta utilizada en diseño gráfico para hacer composiciones ejemplo: paso de revistas y periódicos a paginas y contenidos web.(margenes, columnas y medianiles) para web se usan 12 columnas; en tablet se usan 8, en mobiles 4 columnas
Tipografia hay difeentes familias tipográficas: serif y san serif, monospace,Scripts. es importante usar máximo 3 tipografias para evitar confusion, legibles, seleccionar anchos de columnas correctos 66 caraters por linea, interlineado 12 mm
Color. Es importante tener un buen contraste entre color de texto y color de fondo para que se pueda leer.

El curso de introducción al diseño me parece que se complementa perfecto con esta clase

Ancho de columna e interlineado correcto

una pregunta porque los monospace tienen el mismo ancho

Tipografias…
-Serif=tiene remates en sus letras como las Times New Roman
-San Serif=mas geometrica y moderna
-Monospace=caracteres tienen el mismo espacio, editores de tecto o codigo
-Scripts=Decorativas imitando el trazado a mano

¿Como hacer un interlineado?

Tratemos de usar pocas tipografías un máximo de 3 para no saturar nuestro diseño y que nuestro usuario no se confunda. Nuestro diseño tiene que ser accesible a cualquier tipo de usuarios así que evitemos usar tipografías muy pequeñas (mínimo 12px). No usemos más de 66 caracteres por linea usemos adecuadamente el espacio de la columna. Una recomendación de interlineado es 1 + 20% (Si estás usando una tipografía de 10pts el interlineado ideal sería de 12pts)

<h3>Recomendaciones al usar una tipografía</h3>
  • Usa pocas tipografías, máximo tres para no saturar el diseño.
  • Asegúrate de que sea legible en distintos tamaños. Que sean accesible a todo tipo de usuario.
  • Usa un espacio de columna e interlineado adecuado. Tener 16 caracteres por línea. también hay que cuidar el interlineado. Formula para usar: 1 + 20 %. Si nuestro tamaño del texto tiene 10 el interlineado es de 12.
  • Un buen contraste. Nos da accesibilidad en nuestro diseño.

Tipo de tipografías que existen son:
• Serif: Tienen remates o patitas decorativas, generalmente usadas en productos físicos
• Sans-Serif o palo seco: No tiene remates y es geométrico, usadas en vistas digitales
• Monospace: Son espaciadas y todas las letras tienen el mismo tamaño
• Script: Son las decorativas pero poco legibles.

Super! Solo quiero expresar la formula de una manera diferente. Si creen que estoy mal, por favor corríjanme.

(Tamaño de la fuente seleccionada + El 20% del tamaño de la fuente) = Tamaño del interlineado.

Ejemplo: ( 10pts + 2pts ) = a 12pts

RETICULA

  1. Columna: alineaciones verticales (almacenan contenido)
  2. Margen: Borde de la página o formato al rededor del contenido.
  3. Medianil: separación entre columna

WEB

  • Retícula de 12 columnas

TABLET
-Retícula de 8 columnas
-IOS: Ancho de 778 px
-ANDROID: 600dp

MÓVIL
-Retícula de 4 columnas

TIPOGRAFÍA

  1. Existen diferentes variaciones dentro de una tipografía.

FAMILIAS
a. Serif: Tiene remates al final del carácter( aspecto sobrio)
b. Sans-Serif: más geométricas
c. Monospace: Todos los caracteres tienen el mismo ancho
d. Scripts: Imitan la escriura a mano