Buenas prácticas para un flat design

La creación de un diseño minimalista aunque parece fácil no lo es tanto, cuantos menos elementos haya, más importantes se vuelven y con esto, más importante es cómo y dónde ubicarlos.

Published in

Blog de Interactius UX

7 min readNov 27, 2014

La creación de un diseño minimalista aunque parece fácil no lo es tanto, cuantos menos elementos haya, más importantes se vuelven y con esto, más importante es cómo y dónde ubicarlos.

Así que primero que todo, debes estar 100% seguro del estilo que necesita tu proyecto, web o app, de si los usuarios lo entenderán y lo aceptarán, y de si se verá bien en los diferentes dispositivos.

Primero me gustaría compartir mi proceso de diseño. Cada uno tiene el suyo y todos son igualmente válidos pero, en la práctica, estas pequeñas cosas son de mucha ayuda.

Proceso de diseño para conseguir una interfaz minimalista:

- Buscar inspiración, encontrar un concepto en que basarte, buscar antiguas corrientes de diseño, de arte, una imagen, un momento… que te llene de ideas frescas.

- Mirar con perspectiva el diseño, cuando ya has movido el mismo objeto mil veces arriba, abajo, arriba, abajo y no lo ves claro, sal a dar una vuelta, que te dé el aire y, si eso no funciona, cambia de proyecto o apaga tu ordenador y al día siguiente te aseguro que lo verás con otros ojos.

- Comparar uno al lado del otro. A menudo mi espacio de trabajo parece caótico porque tiendo a comparar para estar segura: ¿Helvetica o Futura? ¿Rojo o verde? ¿5 píxeles arriba o 10?… La verdad es que no es caótico, simplemente es que viéndolos uno al lado del otro detecto más rápidamente cuál está bien. ¡Comparar ayuda muchísimo!

- Debido a la variedad de dispositivos en los que se podrá ver tu diseño, es importante revisar el tamaño de la grid, la fuente, las imágenes y, en general, de todos los objetos que conviven. Tenerlo en cuenta desde el principio te ahorrará mucho tiempo.

- Y lo más importante, preguntarte continuamente durante tu proceso de trabajo: ¿Esto realmente lo necesito? Hay elementos que en algún momento consideramos muy importantes, pero al deshacernos de ellos resulta que nadie los extraña (realmente no eran tan importantes como creíamos), no es fácil deshacernos de elementos a los que previamente les dedicamos un tiempo de diseño, pero es importante ser imparcial y valorar qué es lo que realmente necesita el diseño del proyecto.

A continuación detallo los elementos más importantes para conseguir un diseño flat.

Grid

La grid es muy importante en el diseño de interfaces porque nos ayuda a establecer un orden, facilita una guía para trabajar, contribuye a generar más orden visual y define grupos de contenidos y funciones.

- No siempre necesitas una línea o una caja para agrupar objetos, simplemente alineando y espaciando podrás ayudar al usuario a entender la estructura de la interface.

- Divide la cuadrícula con elementos muy importantes para llamar la atención del usuario. La correcta escala y colocación se convierten en los mejores elementos para establecer una jerarquía visual.

Color

El color es un componente clave en todo diseño y en el diseño de interfaces minimalistas no es la excepción.

- Utiliza colores brillantes y que contrasten.

- El número de colores a usar en una interfaz flat design suele ser reducido y acostumbra a usarse el mismo tono con diferentes saturaciones con el fin de crear contrastes entre las imágenes, el texto y el fondo.

- Una de las particularidades del flat design es usar el tono sobre tono. Haz pruebas con tu paleta de colores para asegurarte de que tienes colores con suficiente contraste entre ellos para utilizarlos.

color2 — **http://www.behance.net/gallery/Web-site-design/10717621**

Mira flatuicolors.com para tomar ideas.

Tipografía

La tipografía es clave en este tipo de diseño y es importante que encaje con el diseño en general y que sea fácil de leer.

- Una tipografía sans-seriff o de palo seco da una sensación de limpio, puro y moderno.

- Busca una tipografía que contenga muchos estilos (thin, light, medium, regular, bold, black…) seguramente solo usarás dos o tres variantes, pero te será de mucha ayuda tenerlas en caso de que las necesites más adelante.

- Las grandes diferencias en tamaños de texto quedan muy bien y además contribuyen a la jerarquización de contenido. Prueba con un título thin & oversize y un body de tamaño y peso regular.

- Asegúrate de que la tipografía que eliges tiene una excelente legibilidad en cualquier tamaño. Utiliza palabras sencillas, consistentes y directas.

ZERo-typo — **http://www.rezo-zero.com/**

Interacción

Indicar la interacción puede resultar un poco confuso en una interfaz flat design. Aquí van algunos consejos.

- Haz contrastes. Por ejemplo si tu página es muy blanca, añade colores vibrantes a los elementos interactivos, si los titulares son grandes y en minúsculas, puedes hacer los links pequeños y en mayúsculas o, si el diseño es principalmente tipográfico, añade iconos con links.

- Intenta que la colocación de los objetos sea la convencional o lógica. Por ejemplo, una flecha para avanzar al siguiente proyecto debe estar situada al lado derecho de éste o, un buscador, mejor que lo ubiques arriba a la derecha de la página.

- La interfaz debe ser lo más intuitiva posible, fácil de navegar. Utiliza elementos interactivos pero recuerda que el usuario siempre debe poder recuperarse fácilmente en caso de error.

- Separa visualmente los niveles de interacción (menús desplegables, pop ups, tooltips, etc.) con contrastes de color, separaciones o tintado de imágenes.

Iconos y fotografías

El flat design se basa en imágenes simples. El objetivo es ayudar al usuario a entender más rápida y fácilmente ciertas acciones y mensajes. Por lo tanto, necesitas alejarte de ilustraciones complejas e imágenes muy detalladas.

Iconos

Los iconos son un factor clave en el flat design. Hacen que tu diseño luzca más fresco y ayudan a que se entienda rápidamente lo que quieres decir.

Para hacer o escoger los iconos debes poner atención en los siguientes ítems:

- Asegúrate de adaptar el grosor de las líneas de los iconos en todas las escalas.

- Puedes usarlos en outline o fill, pero siempre deben mantenerse claros y sencillos.

- Thin y a un color es un must en este tipo de diseño.

- No tengas miedo de customizarlos un poco, actualmente algunos iconos flat design suelen llevar alguna sombra o degradado. ‘¡Sí! leíste bien, sombras y degradados, pero sin perder la esencia flat ;) Mira algunos ejemplos:

Longshadow

Degradados

Sombra paralela

3D Tercera dimensión

icon-3D — **http://dribbble.com/shots/1028785-Super-Simple-Icons**

Relieves

El escaso uso de las fotografías es un rasgo del flat design. Esto no quiere decir que no podamos utilizar imágenes aunque, eso sí, no cualquier imagen.

- Utiliza fotografías claras, limpias y ordenadas. Si lo que quieres es mostrar tu portfolio, existen mock ups hechos en Photoshop que te permiten editarlo obteniendo resultados muy profesionales.

- Haz tus fotografías monocromáticas, ya sea en blanco y negro o tintadas, le dan un aire retro y moderno a la vez.

- En el background, utiliza fotografías desenfocadas.