Si tiene un conocimiento básico de HTML y CSS y desea crear interfaces de usuario atractivas en el navegador, ¡no busque más! En este artículo, mejorará sus habilidades de diseño de interfaz de usuario aprendiendo sobre los siguientes siete fundamentos:
- espacio en blanco
- alineación
- contraste
- escala
- tipografía
- color
- jerarquía visual
Este artículo se basa en un curso gratuito de Scrimba creado por el brillante Gary Simon, también conocido como DesignCourse. El curso ofrece un conjunto de tutoriales interactivos que puede tomar a su propio ritmo e incluso rehacer para integrar realmente su aprendizaje.
Lanzamiento del curso: ¿Aprende los conceptos básicos del diseño de la interfaz de usuario?
Creemos que todos los desarrolladores front-end deberían tener habilidades básicas de diseño de UI. ¿Entonces en esto? Por supuesto, @designcoursecom te lo enseña. Todo sin utilizar herramientas de diseño, solo HTML y CSS.
RTs apreciados? // t.co/mT9fDjShUd # 100daysofcode
- Scrimba (@scrimba) 28 de enero de 2020Entonces, si este artículo lo deja con ganas de más, asegúrese de consultar el curso. ¡Ahora saltemos a eso!
Espacio en blanco
El primer diseño fundamental que veremos es el espacio en blanco , también conocido como espacio negativo. Como sugiere el nombre, es el espacio entre los elementos de la página.
Los elementos que están comprimidos en una página sin espacios en blanco no solo se ven poco atractivos sino que también son difíciles de navegar y de leer.
Podemos ajustar el espacio en blanco de varias formas, incluido el relleno, el margen y la altura de la línea. Vea la imagen de antes y después para ver qué diferencia puede hacer el espacio en blanco efectivo.
Alineación
El siguiente es la alineación . Este es el proceso de asegurar que cada elemento esté colocado correctamente en relación con otros elementos, por ejemplo, asegurándose de que las columnas estén alineadas en la página.
Como puede ver en las siguientes imágenes, la primera página con elementos en numerosas columnas diferentes (alineación débil) es mucho menos atractiva y legible que la segunda, que tiene una alineación fuerte.
Contraste
También es importante tener en cuenta el contraste al crear una página o una aplicación. El contraste es la diferencia entre los colores que aparecen uno al lado del otro en la página.
Como puede ver en este ejemplo, las páginas con poco contraste son difíciles de leer y los elementos no se destacan.
Las páginas con buen contraste, como la siguiente, no solo se ven mucho mejor, sino que son más fáciles de usar y accesibles.
Para ayudarlo a obtener el contraste perfecto, las WCAG (Pautas de accesibilidad al contenido web) sugieren una relación de contraste mínima (AA) de al menos 4.5: 1, o 3: 1 para texto grande, o una relación de contraste mejorada (AAA) de 7 : 1 o 4.5: 1 para texto grande. Hay una variedad de complementos o sitios web para verificar esto.
Escala
La escala también es una parte esencial de la interfaz de usuario, así que considere cuidadosamente el tamaño de cada elemento. Por ejemplo, los elementos deben ser lo suficientemente grandes en relación con la página (para que no haya grandes espacios). Además, los elementos de mayor importancia, como los titulares, deben ser más grandes que los de menor importancia.
Eche un vistazo a las imágenes de antes y después a continuación y observe cuánto mejor se ve la página cuando se escala correctamente.
Tipografía
La tipografía también tiene un gran impacto en la interfaz de usuario. Hay muchas formas de ajustar esto, incluidas las opciones de fuente, el tamaño de fuente, la alineación, el espaciado entre letras, la altura de la línea, los estilos de fuente, el color y el contraste.
Como regla general, no use más de 2 familias de fuentes en una sola página y asegúrese de que los diferentes aspectos funcionen juntos para establecer el orden de importancia. Esto se conoce como jerarquía visual , que cubriremos con más detalle a continuación.
Si sigue estos consejos, su página se verá tan bien como esto:
Y no confuso e ilegible, así:
Color
El diseño de la interfaz de usuario fundamental que primero da forma a la experiencia de un usuario es el color . La psicología del color significa que cada color produce un significado para ciertas personas; por ejemplo, el rojo puede significar peligro, mientras que el blanco puede evocar limpieza y serenidad.
Sin embargo, tenga cuidado con el color. Los significados varían según las culturas, así que siempre investigue y tenga en cuenta a su público objetivo al seleccionar los colores.
También es importante recordar que demasiados colores pueden crear una mala interfaz de usuario y los colores que elija utilizar deben complementarse entre sí. Como regla general, no puede equivocarse si usa variaciones más claras o más oscuras del mismo tono una al lado de la otra. ¡Solo mire cuánto más agradable a la vista se compara la segunda imagen a continuación con la primera!
Jerarquía visual
El último elemento de nuestra lista de Fundamentos de diseño es la jerarquía visual . Algunos elementos de una interfaz de usuario son más importantes que otros. La jerarquía visual nos permite establecer esta importancia.
Esto se puede hacer con posición, contraste, color, escala, estilo o una combinación de los anteriores, como se muestra en la segunda imagen a continuación, que tiene una jerarquía visual mucho mejor que la primera.
Envolver
En este artículo hemos cubierto los siete fundamentos principales del diseño: espacio en blanco, color, contraste, escala, alineación, tipografía y jerarquía visual. Todos son igualmente importantes para la interfaz de usuario: si falta uno de estos elementos, toda la experiencia del usuario se verá afectada. Así que asegúrese de considerarlos todos al crear sus diseños de interfaz de usuario.
El curso de Fundamentos del diseño de la interfaz de usuario
Si desea profundizar más en estos temas, consulte el curso gratuito Fundamentos de diseño de interfaz de usuario en Scrimba. En él, aprenderá sobre los fundamentos con mucho mayor detalle.
Buena suerte y feliz codificación :)