i

Please enable JavaScript to view this site.

Documentación 8.7

A continuación se describen algunas buenas prácticas que deben considerarse en el modelado de páginas, orientadas a los bloques de información, márgenes, breakpoints, imágenes, fuentes, botones, espacios de relleno y acoplamiento entre otras.

Bloques de información en elementos superiores

   

En la Interfaz de usuario agrupar y generar bloques de información dentro de secciones para un mayor control de los elementos que componen cada sección y así facilitar los ajustes necesarios para cada breakpoint.

 

 

MP-BP-Imagen1

     

 

Lo mismo aplica a los bloques de información dentro de los contenedores.

 

 

MP-BP-Imagen2

Asignar ancho al contenedor

           

Asignar un ancho específico a un contenedor permite trabajar con más facilidad los elementos que este contiene.

En este ejemplo el contenedor tiene un ancho específico y todos los elementos que contiene tienen su ancho al 100%. Esto facilita ajustar la visualización de los elementos en los breakpoints restantes.

 

 

MP-BP-Imagen3

 

Márgenes consistentes    

     

Trabajar con márgenes consistentes entre secciones o grupos de información, genera orden visual y la separación necesaria del contenido.

 

 

MP-BP-Imagen4

 

 

De la misma manera, dentro de las secciones y contenedores, tanto los márgenes como los espacios de relleno deben ser consistentes.

 

Se debe mantener la igualdad de márgenes en elementos similares cuando se repiten en el modelado y no están dentro de un repetidor.

 

Por ejemplo, para modelar tarjetas exactamente iguales un buen consejo es ajustar la primera tarjeta y al lograr el diseño deseado, copiar y pegar para finalmente editar cada una en particular.

 

 

MP-BP-Imagen5

 

 

Controlar los breakpoints paulatinamente por sección  

 

Al modelar, a medida que va creciendo el contenido es recomendable ir trabajando los breakpoints en forma gradual, esto facilita controlar la correcta posición de los elementos y ajustar los breakpoints mientras se va avanzando con el modelado.

 

 

MP-BP-Imagen22

 

   

Imágenes: tamaños y resoluciones

 

Al modelar un elemento imagen, el tamaño en el que se va a utilizar en la página debe ser igual al original o inferior.

 

Por ejemplo, si el tamaño de una imagen modelada es pequeño y es usada como fondo de una sección en un equipo de escritorio, no se verá nítida y el resultado no será el esperado.

 

Lo ideal es que las imágenes tengan formato jpg o png y utilicen una resolución de 72dpi, para optimizar el peso de la página.

 

Para los íconos lo mejor es el formato svg porque no pierde definición, para las fotos lo mejor es jpg porque los archivos son más livianos y si se quiere usar transparencia se recomienda el uso de png.

 

Las imágenes deben estar optimizadas para su uso en la web, los formatos más comunes son JPG, PNG, GIF y su resolución debe ser 72 dpi.

 

El formato JPG es ideal para fotografías, PNG para imágenes con transparencias, GIF para animaciones breves. En cambio para íconos o logos se recomienda el uso de SVG ya que pueden ser escalados sin pérdida de definición.

 

Existen nuevos formatos de imágen como WebP y AVIF que ofrecen mayor compresión e imágenes de calidad con archivos más livianos. Si bien la mayoría de los navegadores los admiten, es recomendable verificar la compatibilidad antes de su uso.

 

 

MP-BP-Imagen6

Fuentes

         

Al modelar un elemento texto, el mismo debe poder leerse con claridad. Para ello, es recomendable no usar tamaños inferiores a los recomendados tanto para una interfaz web (para cuerpo de texto 16/18 px) como para una móvil (para cuerpo de texto 14/16 px).

 

Los bloques de texto deben ser cortos y concisos ya que los párrafos largos son difíciles de leer en pantalla. Si son muy anchos dificultan la lectura.

 

El Interlineado debe ser adecuado, la proporción recomendada es un 20% mayor que el tamaño de la letra.

 

MP-BP-Imagen7

Contraste

   

Debemos asegurarnos siempre un buen contraste entre el texto y el fondo para asegurar la legibilidad.

 

 

MP-BP-Imagen8

Botones

   

No se deben agregar demasiados botones por grupos de información y se debe diferenciar cuál corresponde al llamado a la acción principal.

 

Tratar de generar la menor cantidad de pasos y clics en la interacción con el usuario.

 

MP-BP-Imagen9

Nombres e identificadores de los elementos

 

Los identificadores y nombres de los elementos de una página deben ser descriptivos, permitiendo realizar consultas fácilmente al utilizar el menú de capas y en el modelado de reglas embebidas. También puede resultar útil al modelar el comportamiento mediante el uso de scripting.

 

Los nombres e identificadores de los elementos de una página deben ser descriptivos. Los nombres se utilizan para referenciar los elementos dentro del modelado mientras que los identificadores se utilizan cuando se hace referencia a los campos en Deyel SDK para JavaScript. Cuando se utiliza la facilidad de capas, se pueden buscar los elementos tanto por el nombre como por el identificador.

 

 

MP-BP-Imagen10

Estructura simple

   

Evitar el anidamiento excesivo de los elementos de una página.

Por ejemplo, si se agregan contenedores innecesarios, se dificulta el modelado. Si un contenedor ocupa el mismo tamaño que la sección, contenedor o ítem que lo contiene, entonces el mismo se puede quitar.

 

 

MP-BP-Imagen11

Espacio de relleno

 

Alinear elementos dentro de un contenedor utilizando el “espacio de relleno”, en lugar de hacerlo manualmente. Además permite controlar más fácilmente los espacios.

 

Por ejemplo, utilizar:

 

 

MP-BP-Imagen12

Acoplamiento

 

Acoplar los elementos hacia el lado que debe quedar fijo cuando el mismo cambia de tamaño.

 

 

MP-BP-Imagen13

 

 

También pueden ser de utilidad los íconos de alineamiento, para acoplar hacia una una posición específica y quitar el margen automáticamente si es necesario.

 

 

MP-BP-Imagen14

Elementos en una misma fila

 

Cuando se modelan dos o más elementos orientados horizontalmente se recomienda usar un elemento “Diseño” de tipo fila para contenerlos. Esto permite que la página sea responsive y no se solapen dichos elementos.

 

 

MP-BP-Imagen15

 

Elementos en una misma columna

 

Cuando se modelan dos o más elementos orientados verticalmente se recomienda usar un elemento “Diseño” de tipo columna para contenerlos.

 

Si existen items dentro del diseño que son de tamaño variable, se debe indicar que el alto del item sea “automático”. Esto asegura que no se solapen entre sí.

MP-BP-Imagen16

Tamaño mínimo

   

Se deben modelar las propiedades “Alto Mínimo” y “Ancho Mínimo” de un elemento para evitar que su contenido se desborde o se muestre de manera no deseada si se reduce el tamaño de la ventana del navegador. Esto mejora la experiencia de usuario y garantiza que el diseño de la página se mantenga legible y funcional en diferentes tamaños de ventana del navegador.

 

 

MP-BP-Imagen17
Envianos tu comentario
Compartir en X Compartir en Linkedin Enviar por Email Imprimir