10 punteros de diseño correctivo para desarrolladores

Aquí hay una situación que puede resultarte familiar: eres un desarrollador y construyes un prototipo para demostrar algo. Funciona de la manera en que lo intentas, pero la expresión de horror en las caras de tus usuarios te dice que algo está mal: tu demo parece una mierda.

Veamos algunas pautas y consejos simples para que sus demos se vean tan bien como deberían..

Relajarse

Es posible que hayas escuchado lo siguiente: 

“El buen diseño, cuando se hace bien, se vuelve invisible. Es solo cuando está mal hecho que lo notamos ". - Jared Spool

Esto es relevante para todos los diseñadores, pero es especialmente pertinente para usted, como desarrollador. Estás construyendo una demo; algo que tiene la única intención de demostrar algo. Sus usuarios deben estar absortos en cualquier tarea que esté presentando ante ellos, no reaccionar ante el "diseño"..

Puntero # 1: Al tratar de hacer una declaración estilística, existe una gran posibilidad de que, en realidad, se esté alejando más de la entrega de una buena demostración. Mantenlo simple. Se adhieren a hacerlo funcionar.

Si algo "no se ve bien", elimine los detalles visuales que haya agregado (como sombras de cuadros, bordes, efectos) y vuelva al tablero de dibujo.

Ahora que hemos dejado de lado esa palabra de advertencia condescendiente, concentrémonos en algunos consejos más prácticos!

Evitar una paleta sucia

Nada es más ofensivo para los ojos que las malas elecciones de color. De hecho, las decisiones de color deben abordarse bien en el proceso de diseño de la interfaz de usuario, pero siempre es tentador tomar decisiones de color audaces desde el principio..

No, claramente no es lo que estamos buscando

Si fueras un entramado de una interfaz de usuario, comenzarías de la manera más simple posible; Con formas rudimentarias, líneas y monocromo. Una vez que el diseño y las relaciones se establecieron, agregaría más detalles, avanzando hacia una mayor fidelidad hasta que finalmente comience a propósito explorando el color Entonces, algunos punteros:

Puntero # 2: Considera ir monocromo en tus propias demostraciones. Se adhiere a los tonos de gris (¿cincuenta?) Hasta que esté listo para usar el color para ayudar a aclarar las cosas.

Incluso si lo hacemos nada si no, esta es una mejora

Puntero # 3: Como regla general, evite los colores totalmente saturados (es decir, los colores con toda su fuerza, sin tinte blanco agregado). Particularmente cuando se ven en una pantalla iluminada, pueden ser incómodos de mirar cuando se combinan entre sí.

Puntero # 4: Lo mismo ocurre con el blanco y negro. Al evitar los extremos, apegándose a los colores blanquecinos y blanquecinos, es menos probable que los usuarios se sientan cansados..

Vaya aún más lejos y agregue un toque de color a sus negros y grises. Como dijo Ian Storm Taylor en 2012:

"Las sombras no son negras"

Las lecciones de Ian de la escuela de arte son mías. Recuerdo que mi maestra me desafió a encontrar un punto negro en A Sunday Afternoon de Georges Seurat en la isla de La Grande Jatte.

Spoiler: no encontrarás uno

Puntero # 5: Cuando agregue colores a su diseño monocromo, hágalo de uno en uno. Cada color que agregues es una invitación a la distracción del usuario. Hablamos brevemente sobre cómo evitar la saturación alta, pero no hay nada que diga que no se puede usar un rango de saturaciones de un tono. Eso le dará la variedad y la profundidad que necesita, sin riesgo.

No complicar demasiado la tipografía

Si hablamos de demostraciones y prototipos, realmente no hay necesidad de ir más allá del uso de fuentes del sistema (ver Puntero n. ° 1). Aún así, considere lo siguiente:

Puntero # 6: Estás en buenas manos con sans-serif ("sin" serif). Los tipos de letra serif son aquellos que tienen los detalles donde terminan los trazos (hay alguna jerga para usted).

Los serifs pueden ser útiles para agregar personalidad a un diseño, y a menudo pueden hacer que un cuerpo de texto sea más fácil de leer. Pero no se utilizan tradicionalmente en el diseño de la interfaz de usuario, especialmente en tamaños más pequeños, ya que la mayoría de las veces muestran distintos pesos de trazo.

Nota: a medida que aumentan las resoluciones de pantalla, mejora la claridad y este argumento tiene menos peso.

Roboto y Noto

Google utiliza el "humanista" Droid Sans en sus interfaces de Android y, más recientemente, Roboto y Noto. Apple usa San Francisco para su gama de sistemas operativos, y antes de eso Neue Helvetica. Firefox OS utiliza Fira Sans. Observe el tema común aquí? Todo sans serif.

Puntero # 7: Evita la ambigüedad. Las combinaciones de caracteres como O0, aeo, 8B, Il1, 5S, 2Z, 6b y 9g son a veces difíciles de distinguir, dependiendo del tipo elegido. Pruébalos Si luchas por distinguirlos, entonces deberías elegir un tipo de letra diferente..

Fira Sans (de Firefox OS) es bastante claro

Espacio para respirar

El espacio en blanco (espacio funcional) sirve al diseñador visual de muchas maneras. Ayuda a crear una sensación de equilibrio, llama la atención sobre los aspectos necesarios del diseño, reduce la carga cognitiva para el usuario (podría continuar). Si su IU está restringida, rápidamente los usuarios se sentirán incómodos y reducirá su capacidad para procesar tareas de manera efectiva.

Cuando se trata de una gran cantidad de información, es tentador incluir la mayor cantidad de información posible, pero ¿cuál de estos dos ejemplos le resulta más fácil a la vista??

Auch-ese título está aplastado contra la parte superior de la páginaSe agregó espacio para las celdas de la mesa y alrededor de todo.

Puntero # 8: En lo que se refiere al espacio para respirar, "más" es casi siempre mejor. Agregue relleno, agregue márgenes, aumente las alturas de línea, distribuya todo.

Puntero # 9: Haz que tu espacio sea consistente. Use una unidad estándar como su base, agregando espacio en incrementos de (por ejemplo) 10px. La consistencia es la clave para crear ritmo y armonía..

Tipo Sans-serif, monocromo con un acento de color, mucho espacio, espaciado constante

Haz tu vida más fácil

No hay vergüenza en ello; Deja que los frameworks como Bootstrap y Foundation hagan el trabajo duro por ti. A menudo se les critica por hacer que los sitios web de producción parezcan genéricos y carentes de imaginación, pero para los prototipos son absolutamente perfectos, de inmediato.. 

Todas las decisiones que hemos discutido hasta ahora ya se han tomado para usted: tipografía, colores, espaciado, consistencia y para detalles desordenados como formas que no pueden fallar..

Puntero # 10: Párese sobre los hombros de los demás. ¡Tome las plantillas existentes de Bootstrap, las plantillas de Foundation, o Material Design Lite, Skeleton, Pure CSS, UIKit, o cualquiera de los millones de marcos CSS que desee! No tenga miedo de agregar sus propios estilos en la parte superior, teniendo en cuenta todos los puntos que hemos discutido hasta ahora.

De los bloques de construcción de ZURB

Estos marcos son todos muy completos. Asegúrate de usar todas las piezas que necesites; es probable que tengas problemas si eliges algunos elementos.

Conclusión

Este no fue un artículo de fundamentos de diseño, sino que apunta a ayudarlo a solucionar cualquier problema que tenga con los diseños de sus prototipos. Si usted es un desarrollador, tal vez esté grabando un curso o presentando un producto a los clientes o a su equipo, y realmente desea que sus demostraciones hagan su trabajo, estos consejos le ayudarán a seguir el camino correcto. Déjame saber en los comentarios si tienes alguna pregunta específica. Buena suerte!