Resumen:
Para crear un diseño visualmente atractivo, alinee la tipografía y los elementos con la cuadrícula, establezca una jerarquía visual clara, use el color estratégicamente y sea consistente en la aplicación de varios elementos de diseño.
En este tercer artículo Excelente serie de análisis de diseñoexplico los principios del diseño visual que contribuyen a crear diseños hermosos utilizando ejemplos de la vida real. La apariencia de algo sí afecta la percepción de su funcionalidad.
Principios visuales: uso y alineación de cuadrículas
red Ayuda a los diseñadores a crear diseños coherentes que permitan a los usuarios finales navegar fácilmente por la interfaz. Una buena cuadrícula se adapta a una variedad de tamaños y orientaciones de pantalla, lo que garantiza la coherencia entre plataformas. La cuadrícula consta de columnas. canal entre ellos. Si bien no existe un tamaño de canal ideal, los diferentes tamaños de canal sirven para diferentes propósitos.
Ejemplo: base de rejilla de 3 columnas con canalones finos
Esta página proviene de Mansión Flamenco Utilice una cuadrícula de 3 columnas con canal fino.
Las imágenes y el contenido de los productos están alineados con columnas para brindar a los usuarios finales una experiencia de compra predecible y organizada. El canal delgado proporciona suficiente espacio para diferenciar los productos y funciona bien porque las imágenes de los productos son muy aireadas.
Ejemplo: base de rejilla de 4 columnas con canalones anchos
Esta página proviene de Atajos de Figma Utilice una cuadrícula de 4 columnas con ranuras anchas. El texto y otros elementos pueden abarcar varias columnas, lo que hace que aparezcan como una columna ancha. Es común que el contenido se extienda hacia el medianil cuando abarca varias columnas.
El texto principal está alineado con las dos columnas del medio, mientras que el texto adicional (como las leyendas) está anclado en las columnas izquierda y derecha (en la imagen siguiente, la columna izquierda se ha recortado porque no contiene ninguna leyenda). La separación adecuada entre la leyenda derecha y el texto del cuerpo central ayuda a crear un diseño legible.
Asegúrese de utilizar una cuadrícula en su diseño para mantener una alineación consistente entre diferentes páginas y elementos.
Principios de visión: uso de sistemas de impresión
formato es un componente clave de cada diseño. No sólo mejora la legibilidad de una página web (y por tanto su usabilidad), sino que también hace que el diseño parezca más pulido. Analicemos algunos ejemplos.
Ejemplo: jerarquía creada mediante tipografía
Este ejemplo proviene de red de semillasuna empresa de probióticos. excepto esta frase Tecnología Viacapeste diseño utiliza una familia de fuentes (Versalitas, Versalitas Medianas, Regular) y el blanco como color de todo el texto. La fuente es limpia y fácil de leer, lo que permite a los usuarios centrarse en el contenido en lugar de en la tipografía.
El diseño logra una jerarquía de texto a pesar de utilizar solo un color de texto y una familia de fuentes, con diferencias visuales mínimas entre los pesos normales y medios. Esto se logra a través del tamaño.
- este más grande tamaño(La mayoría de los probióticos son indigeribles.) llama más la atención y, por tanto, es el elemento que tus ojos leen primero.
- este medio El tamaño, que indica importancia media, es texto. Mejora la digestión saludable en 4,6 veces.
- este pequeñísimo El tamaño del texto rompe el diseño de la cápsula y es menos importante para los usuarios leerlo.
Según la experiencia, Limite su diseño a 3 tamaños de fuente Se establecerá una jerarquía sólida sin abrumar al diseño ni al usuario.
Ejemplo: diseño de lectura
Al igual que en nuestro ejemplo anterior, hay tres estilos de texto presentes en el diseño de Figma Shortcut. Establecen una jerarquía visual clara:
- Un estilo más grande y atrevido para las presentaciones de artículos.
- Estilo medio para el cuerpo del texto: copiar texto
- Estilos menores para títulos y leyendas.
Sin embargo, lo más importante en este ejemplo es que el sistema de tipos está diseñado y utilizado teniendo en cuenta la lectura. líneas de texto más cortas correcto dirigir (es decir, la distancia entre las líneas de base de dos líneas de texto consecutivas) facilita la lectura porque el ojo puede pasar rápidamente de una línea de texto a la siguiente sin saltarse una línea accidentalmente.
Considere aumentar ligeramente el interlineado predeterminado Si tiene mucho texto (varios párrafos o más), una pared de texto puede resultar abrumadora.
Principios visuales: paleta de colores estratégica
Además de cuadrículas y tipografía, color Es una de las herramientas de diseño más importantes. El color puede marcar el tono de una marca e influir en su percepción, atrayendo la atención de los usuarios, influyendo en sus emociones y aumentando su usabilidad. Usar el color estratégicamente puede ser un desafío. Veamos algunos ejemplos para explicar en detalle cómo usar el color.
Ejemplo: paleta monocromática
La paleta de colores de Seed.com se limita al verde y al blanco. Esta paleta monocromática (es decir, un solo tono o tono y tono de color) crea una experiencia agradable y sofisticada al tiempo que enfatiza el contenido. Las paletas monocromáticas son las más fáciles de usar y crear, y son las más adecuadas para diseñadores visuales novatos. (La capacidad de seleccionar y combinar colores estratégicamente es una habilidad compleja que a menudo es subestimada por quienes no son diseñadores).
El tono verde es sutil y refinado, ni demasiado brillante ni sobresaturado. Al elegir un tono para su diseño, use colores neón (como el amarillo resaltador) con precaución, ya que pueden distraer a los usuarios y afectar el efecto general de su diseño.
Ejemplo: colores reservados para fotografías de productos
En el caso de Flamingo Estate, la paleta de colores también es Monocromático, basándose principalmente en El color de fondo de la página y los tonos blanco y crema del texto de algún botón (p. ej. Añadir a la cesta). Los verdes delicados también se utilizan en la paleta de colores, pero se reservan principalmente para fondos de texto o tipografía.
Dado que este diseño se basa únicamente en dos colores principales: blanco y verde, las fotografías del producto pueden ocupar un lugar central sin abrumar al usuario.
En sus propios diseños, limitar la paleta de colores a solo dos colores creará equilibrio y mejorará la jerarquía visual. Sólo deberías probar armonías de color más complejas si tienes una amplia experiencia en colores.
Principios de visión: imágenes útiles
usar imagen El diseño visual juega un papel vital para atraer a los usuarios y transmitir la imagen de marca. Veamos algunos ejemplos.
Ejemplo: imágenes intencionales
Las imágenes se utilizan intencionalmente en Seed.com.
Las imágenes de la columna de la derecha añaden información valiosa sobre los productos que se venden. La imagen es sencilla y no hay desorden visual que distraiga la atención del producto. La imagen de fondo crea un patrón interesante que recuerda a observar células bajo un microscopio. Para evitar que el fondo distraiga demasiado la lectura, vidrioso El elemento se coloca entre el texto y el fondo de la imagen.
Las imágenes crean sutilmente la impresión de que los diseñadores de Seed.com definitivamente querían lograr esto: que los productos de la empresa estén respaldados por investigaciones científicas.
Ejemplo: imágenes directas y equilibradas
En las fotografías de productos de Flamingo Estate, el producto real está en el centro de la foto. Sin desorden visual adicional que pueda distraer. La imagen resultante es equilibrada y directa. Las fotos del producto están centradas dentro de las columnas de la cuadrícula, lo que mejora aún más la sensación de equilibrio y simetría.
Al pasar el mouse, la imagen cambia y muestra información adicional sobre el producto (en este caso, la inclusión de tomates da pistas sobre los ingredientes y la fragancia del jabón). este añadir a la cesta Los botones también están alineados centralmente, lo que contribuye aún más al equilibrio del diseño.
No es casualidad que un diseño luzca bien
Tome decisiones informadas en su diseño basándose en sólidos principios de diseño visual. Alinee la tipografía y otros elementos con la cuadrícula, establezca una jerarquía visual clara, use el color estratégicamente y sea consistente en la aplicación de varios elementos de diseño. Estos principios básicos sentarán las bases para diseños hermosos y utilizables.
