3
En los últimos años, hemos visto un rápido cambio en el diseño de software y aplicación de interfaz, de 3-D y skeuomorphic a plana y mínima. Aunque esta tendencia se ha convertido casi en todas partes, vamos a tomar un momento para considerar cómo hemos llegado hasta aquí y qué influencia que está teniendo en el diseño de interfaces en su conjunto. Además, voy a compartir algunos consejos y consideraciones sobre el diseño de interfaces planas.
Como cultura conectada constantemente, tratamos con un flujo incesante de información, algunos de ellos importantes y relevantes, la mayor parte no. Constantemente estamos evaluando, filtrando y, por supuesto, creando contenido, todo se vuelve bastante agotador. Además, gran parte de nuestro consumo de contenidos se ha trasladado a los dispositivos con pantallas pequeñas, lo que agrava la sensación de sobrecarga. Convertirse abrumado es demasiado fácil, y una reducción de desorden en una interfaz de usuario (UI) puede crear un pequeño zen visual.
¿QUE PASÓ? Así que, ¿cómo fue que les llegó a todos los diseñadores un amor a todas las cosas de textura, biselado y vuelta ensombrecido a un deseo de colores planos y tipografía simple? Hay muchos factores que han alimentado esta transición, pero aquí están algunos que se destacan.
5
En una tendencia similar, una gran cantidad de aplicaciones y servicios Web perturbadores están ofreciendo herramientas muy concretas con conjuntos de características muy limitadas. Mientras que los desarrolladores de software tradicionales tienden a
cargar sus productos con un exceso de características para justificar las etiquetas de alto precio, este cambio hacia la micro-aplicaciones enfocadas favorece la simplicidad frente conjunto de características. Aplicaciones más simples significan las interfaces más simples.
En una tendencia similar, una gran cantidad de aplicaciones y servicios Web perturbadores están ofreciendo herramientas muy concretas con conjuntos de características muy limitadas. Mientras que los desarrolladores de software tradicionales tienden a cargar sus productos con un exceso de características para justificar las etiquetas de alto precio, este cambio hacia la micro-aplicaciones enfocadas favorece la simplicidad frente conjunto de características. Aplicaciones más simples significan las interfaces más simples.
7
ALFABETIZACIÓN
TECNOLÓGICA Como smartphone y tablet adopción ha penetrado rápidamente todos los datos demográficos de los usuarios, la preocupación por la obviedad de los controles ha reducido. Considerando que una vez temíamos que los usuarios podrían perder un botón si no sobresalen de la pantalla, ahora estamos dispuestos a explorar las interacciones sutiles. Windows 8 y Chrome para Android, incluso soporte para comandos táctiles que comienzan fuera de la pantalla, sin ningún indicador
INFLUENCIA DE la tecnología
La mayoría del software estará limitada por la plataforma en que se ejecuta. Dimensiones de la pantalla y densidad de píxeles son los factores de confinamiento de hardware. Una interfaz de mínima demanda una paleta de diseño muy limitado, lo que significa que cada elemento tiene que cantar. Escala tipográficas y el peso del texto determinará en gran medida tanto la estética y la facilidad de uso de un diseño plano. Si sus dispositivos de destino no pueden manejar ese nivel de matiz, estás de suerte. El tamaño de pantalla y densidad de píxeles continúan aumentando en los dispositivos móviles, tipo delgado y más pequeño puede ser presentado con una mejor claridad. Por supuesto, el apoyo a @ font-face también ha aumentado el atractivo de diseños tipográficos centrado mínimos.
diseño sostenible Con la proliferación de dispositivos conectados de varias dimensiones, interfaces de usuario se han tenido que ser más fluido, y el movimiento de diseño de respuesta ha respondido. Si bien el diseño de respuesta no requiere una estética particular, se podría argumentar que sin duda IU planas prestan para que sea más fácil que muchos otros estilos. La otra ventaja de diseño mínimo es la reducción en el peso de página y el tiempo de carga.
9
cuadrícula La rejilla tiene un papel crucial en la que gran parte de diseño de la interfaz, y no es una excepción. Como se intenta establecer el orden y hacer un uso muy intuitivo a través de un proyecto con un conjunto restringido de elementos visuales, la red está ahí para ayudar.
∞ ∞ ∞
La rejilla establece más orden visual. Lo utilizan para definir el contenido y los grupos funcionales. No siempre se necesita una línea o una caja para agrupar un conjunto de objetos. Alineación fácil y espaciamiento pueden ayudar al usuario a comprender la estructura de una interfaz. Trate de dividir la red con elementos de especial importancia para atraer realmente la atención del usuario. Sin falso engaño 3-D, los principios básicos de diseño como la escala y la colocación se convierten en los mejores elementos que permitan establecer la jeExperimente con una rejilla más densa de lo que están acostumbrados a trabajar con. Cuando se reduce drásticamente la paleta visual, es posible que el diseño es compatible con una estructura más compleja, sin sentir sucio. A ver qué información adicional se puede transmitir a través de la colocación solamente.
11
color Obviamente, el color es siempre un componente clave del diseño visual. Con interfaces mínimos, es aún más crítica.
Terminar con un arco iris abrumadora es demasiado fácil. Esta es su oportunidad para estirar realmente; y con tan pocos elementos para trabajar, puede sentirse bien acerca de la ampliación de la gama de colores.
∞
Al ajustar la paleta, probar sus tonalidades seleccionadas en un amplio espectro de valor para asegurarse de que se comportan en las versiones más ligeras y más oscuras.
∞
Usted probablemente querrá experimentar con tono sobre tono y tipo rígido. Experimente con su gama de colores desde el principio para asegurarse de que tiene suficiente rango para ambos elementos sutiles y de alto contraste.
∞
12
13
El texto asume un papel fundamental en este tipo de diseño, por lo que la elección de una tipografía adecuada es de gran importancia. Predominan las tipografías Sans Serif, con un elegante uso de tamaños y formatos para la jerarquización de contenidos. Sé directo y utiliza claras llamadas a la acción. El mensaje suele ir reforzado con códigos de color para dar jerarquía o importancia a la información.
15
interacción
En una interfaz de usuario plana, lo que indica que un elemento es interactivo puede ser complicado. Aquí hay algunos métodos que confiar. El contraste es la clave. Si la mayoría de la disposición es blanco, entonces se podría dar elementos interactivos algo de color. Si es impulsada principalmente en texto el diseño,entonces usted podría utilizar simples iconografía. Si los titulares son grandes y todo en minúsculas, usted podría hacer enlaces pequeño y todo en mayúsculas. Usted consigue la idea. Colocación convencional también ayuda. Si utiliza una delgada galón para una flecha hacia atrás, colóquelo en la esquina superior izquierda, donde los usuarios esperan encontrar el botón Atrás. Al superponer más características en la página, haciendo de cada elemento interactivo parezca un botón no tendría sentido. La interfaz debe ser lo más intuitivo posible . Pero en los casos en que la interacción es particularmente complejo o inesperado, que sea fácil de recuperar de los errores. Desplegables, ventanas modales, mosca-outs y otros elementos en capas pueden ser molestos para implementar en un diseño plano. Aproveche agudo contraste, fronteras o tintado para separar visualmente los niveles de interacción.
Alexandro Yair Cano Nieto Contacto: 55 4384 1344 alexandro.canono@udlap.mx
AlexCanoDesign