Consejos sencillos de diseño web para obtener buenos resultados

Hay infinitas formas de diseñar un sitio web. Con eso en mente, también hay infinitas formas de estropearlo. Hay dos métodos principales para evitar caer en la segunda categoría: aprender los fundamentos del diseño y aplicarlos en consecuencia. También necesita tener suficiente experiencia para haber aprendido qué funciona bien y qué no.

Todos los diseñadores toman diferentes caminos de aprendizaje y, a menudo, se encuentran en diferentes etapas de su viaje. Si está leyendo esto, con suerte, también está tratando de mejorar aún más su trabajo y producir mejores diseños.

Desafortunadamente, no hay forma de encajar todo el conocimiento necesario en 1500 palabras. En su lugar, solo nos enfocaremos en algunos consejos para que reconsidere cómo puede abordar los elementos UX / UI. Idealmente, esta forma de pensar también se puede aplicar a otras áreas de su trabajo de diseño.

Comience con una buena comprensión del producto / sitio

Es extremadamente difícil diseñar cuando no comprendes completamente el contenido / sitio web. Ahora, no tienes que estudiar medicina para crear un sitio web médico, ese no es el objetivo. Sin embargo, debe saber cómo accedería un usuario a la información que pudiera necesitar.

Si desea diseñar una aplicación de creación musical, primero debe tomar algunas existentes, jugar con ellas para familiarizarse con ellas, leer sobre la teoría detrás de ellas y cómo funcionan ciertos elementos.

Idealmente, deberías trabajar con tu cliente, quien también debería estar muy metido en el proyecto y querer ayudarte a implementar una mejor UX para sus usuarios.

Sin embargo, si no tiene una comprensión fundamental de lo que trata el sitio y qué problema resuelve, podría paralizar la experiencia del usuario o forzarse a seguir las soluciones existentes y simplemente volver a aplicarlas (lo que a veces funciona).

Para los sitios web, debe tener el mapa del sitio frente a usted para trabajar en la navegación adecuada y tomar decisiones sobre qué elementos serían adecuados para ciertas páginas de destino. Si haces un diseño de “fábrica de chocolate”, podrías presentar visualmente el proceso de elaboración o hacer un volcado de información. Todo depende de los objetivos del sitio.

Toda esta información es algo que necesita de antemano para tener una mayor tasa de éxito. Teniendo en cuenta lo complicado que es esto, podría sucederle a usted si es un diseñador autónomo principiante, por lo que es mejor hacer muchas preguntas desde el principio. Si trabaja en equipo, no olvide consultar con los miembros de su equipo sobre contenido, UX, propósito y más.

Consejos y trucos específicos de diseño:

Ahora, veamos algunos consejos específicos de UI / UX que puede utilizar en su próximo diseño:

1 - ¡Contraste!

Es muy fácil estropear el contraste en un sitio. Una forma rápida de identificar a un diseñador con menos experiencia sería comprobar el contraste general. Vea este ejemplo:

Fuente

¿Ves lo claro que es el texto en todas partes? Los botones verdes con texto blanco, ¿el texto gris claro ?. Vamos a compararlo con una interfaz de usuario más contrastante:

Fuente

Una gran parte de la fuente es negra (o casi negra) y la información menos importante es un poco más gris. El verde es más oscuro, lo que ahora permite texto blanco en la parte superior.

El consejo aquí es: cuando trabaje con texto, comience con Negro sobre blanco o blanco sobre negro. A medida que agregue más elementos y necesite separarlos con jerarquía visual, intente primero en negrita o cambiando el tamaño de fuente. Solo después de eso, si no funciona, vaya con los cambios de color, pero idealmente no más de un 30-40% de diferencia (generalmente la opacidad se establece en 70%).

2 - Espacio en blanco consistente

Otro error común sería tener un espaciado inconsistente alrededor de los elementos. De hecho, es tan común que la mayoría de los diseñadores continúan luchando con esto después de años de trabajo y es bastante comprensible: movemos las cajas con el mouse. Es fácil deslizarse un poco y moverlo uno o dos píxeles hacia un lado. O es posible que aún no haya entrenado su ojo lo suficientemente bien como para detectar esa diferencia directamente.

En el siguiente ejemplo, observe cómo los diferentes componentes tienen diferentes espacios en blanco a su alrededor. Algunos están abarrotados, otros están muy espaciados. No parece muy coherente visualmente.

Por el contrario, aquí hay un ejemplo con una cantidad más o menos similar de contenido / tipo de componentes pero con un aspecto más consistente:

Fuente

Hay varias formas de lograrlo, pero la mayoría de las veces no funciona solo con medir. A menudo es una "sensación" cuando lo miras. ¿Parece equilibrado? Si tiene cajas, siempre puede medir algo como 30px desde los lados, 30px debajo del título, 15px debajo del subtítulo, etc. ¡Y es un buen enfoque! Pero con elementos visuales más grandes como los títulos o las imágenes, es posible que desee aumentarlo un poco para compensar el elemento más pesado.

3 - Color

Otro componente fundamental de un buen diseño. Los colores deben funcionar bien juntos. Una forma fácil de acercarse a los sitios web es ceñirse a un solo color primario y mantener el resto monocromático.

El siguiente ejemplo sigue las tres sugerencias hasta ahora: buen contraste, equilibrio y uso del color:

Fuente

Una forma fácil de comenzar con los colores es seguir algunos esquemas de colores bien recibidos de sitios como https://colorhunt.co/ o inspirarse en Dribbble para combinaciones. Trabajar con la rueda de colores es útil para descubrir las combinaciones, pero a menudo se necesita un toque adicional de los diseñadores para definir las mejores combinaciones. Las ruedas de color a menudo no producen los colores perfectos para aplicar en un diseño.

Ejemplo de la rueda de colores de Adobe:

Fuente

Un bonito color verde en el medio pero un poco difícil de usar los resultados en el lado izquierdo / derecho.

4 - Cíñete a un estilo en todo el sitio

Crear la sensación de un sitio web es uno de los principales trabajos del diseñador. Aunque la idea de "bonito" es muy difícil de definir, especialmente porque las personas a menudo tienen una visión diferente de lo que es bonito y lo que no lo es. . En lugar de preocuparse por esto, concéntrese en la coherencia y manténgase en el estilo.

Qué significa eso? Bueno, diseñemos un botón. Establecemos el tamaño de fuente, la fuente, el color, el fondo, el espaciado, etc. Y obtenemos algo como esto:

Ahora, si vamos a agregar una imagen y un título, podemos lograr algo como esto, tal vez:

Ver las esquinas. Todas las esquinas perfectas de 90 grados, sin redondeo. Ahora, eso significa que nuestro diseño seguirá principalmente esquinas afiladas. Y se ve más consistente si la imagen también tiene estas esquinas perfectas. Al igual que si agregamos entradas, todas también tendrían estas esquinas más nítidas. Agreguemos un elemento más:

Hemos agregado una cuadrícula de cuadros en las esquinas superior derecha e inferior izquierda. Estos podrían haber sido círculos, pero para mantener el aspecto nítido, los hemos configurado en cuadrados. Se debe mantener el mismo pensamiento en todo el sitio. Si comienza a cambiar elementos, es posible que comience a perder la sensación, lo que a su vez resultaría en un diseño inconsistente y debilitaría la marca.

Aquí está el mismo diseño de arriba pero con apariencia redondeada:

Es lo mismo, pero se siente muy diferente ahora.

5 - Diseño con componentes

Los componentes existen en todas las herramientas de diseño modernas como Figma y Adobe XD. Están ahí por una muy buena razón: los desarrolladores implementan sitios de manera que puedan reutilizarse tanto como sea posible.

Si crea un elemento como el de arriba, simplemente quiere "copiarlo y pegarlo" en otra página y simplemente funcionará. No es necesario volver a codificarlo con ligeras diferencias. Como diseñador, lo ideal es que desee reutilizar sus componentes de manera similar.

Si crea una página de inicio con 3 publicaciones seguidas, tal vez pueda reutilizar la misma publicación de la página de inicio. Esto le ahorra tiempo, ahorra tiempo al desarrollador y mantiene el diseño consistente para los usuarios.

Fuente

Imagina que estás haciendo un encabezado de sección. Si necesita tener 8 secciones con un encabezado, ¿lo diseñaría cada vez o copiaría y pegaría el anterior? Idealmente, desea reutilizarlo. Pero, ¿qué pasa si tienes que cambiarlo de centrado a alineado a la izquierda? ¿Quizás cambiar un poco el tamaño, quizás el color? El consejo de esto es intentar y NO hacer eso. Trate de mantenerlo como el original. Si realmente necesita diferentes vistas (además de alineadas a la izquierda / centrada / derecha), intente hacer una sola variación. No cinco o diez de ellos.

Ejemplo de DevriX

En resumen:

Para lograr buenos resultados, necesita una sólida comprensión de los fundamentos del diseño como el color, el contraste, el espacio en blanco, el equilibrio, la jerarquía visual, el orden y más. Cuando diseñas con eso en mente y te enfocas en la usabilidad, la consistencia y el estilo, e incluso si no es un "¡GUAU!" diseño, será sólido en todos los frentes y funcionará bien, lo que a menudo produce mejores resultados para una marca a largo plazo.