Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

10 Consejos para Mejorar el Diseño en Desarrolladores

by
Length:ShortLanguages:

Spanish (Español) translation by Jorge Montoya (you can also view the original English article)

He aquí una situación que puede ser familiar para usted: usted es un desarrollador y usted construye un prototipo para demostrar algo. Funciona tal como debería, pero las miradas de horror en las caras de sus usuarios le dicen que algo está mal - su demostración parece una basura.

Revisemos a algunas pautas sencillas y consejos para ayudar a que sus demostraciones se vean tan bien como deberían.

Relájese

Usted puede haber oído lo siguiente:

"Un buen diseño, cuando se hace bien, se vuelve invisible. Es sólo cuando se hace mal que lo notamos. "- Jared Spool

Esto es relevante para todos los diseñadores, pero es especialmente pertinente para usted, como desarrollador. Está construyendo una demostración; algo que sólo tiene la intención de demostrar algo. Sus usuarios deben ser absorbidos en cualquier tarea que usted está poniendo delante de ellos, no reaccionar al "diseño".

Consejo # 1: Al tratar de hacer una declaración de estilo, hay una alta probabilidad de que realmente se esté alejando más de entregar una buena demostración. Manténgalo simple. Concéntrese en hacer que funcione.

Si algo "no se ve bien", elimine cualquier detalle visual que haya agregado (como sombras en las cajas, bordes, efectos) y vuelva a la tabla de dibujo.

Ahora que tenemos esa palabra irónica de advertencia fuera del camino, ¡vamos a concentrarnos en algunos consejos más prácticos!

Evite una paleta desordenada

Nada es más instantáneamente ofensivo para los ojos que las opciones de color pobres. De hecho, las decisiones de color se deben abordar bien en el proceso de diseño de la interfaz de usuario, pero siempre es tentador hacer opciones de color audaces desde el principio.

no clearly not
No, seguramente no es lo que buscamos

Si usted estuviera maquetando una interfaz de usuario, empezaría tan simplemente como sea posible; con formas rudimentarias, líneas y monocromo. Una vez que el diseño y las relaciones se hayan resuelto, usted añadiría más detalles, avanzando hacia una mayor fidelidad hasta que finalmente empiece deliberadamente a explorar el color. Así que aquí algunos consejos:

Consejo #2: Considere utilizar monocromo en sus propias demostraciones. Aténgase a tonos de gris (cincuenta?) Hasta que esté listo para usar el color para ayudar a aclarar las cosas.

Incluso si no hacemos nada más, esto es una mejora

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

Consejo #4: Lo mismo es cierto en blanco y negro. Al evitar los extremos, ateniéndose solo a variaciones de negro y a variaciones de blanco, será menos probable que le dé a sus usuarios ojos cansados.

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

"Las sombras no son negro"

Las lecciones de Ian de la escuela de arte reflejan las mías - Recuerdo a mi maestro desafiandome a encontrar un punto negro en Una Tarde de Domingo en la Isla de La Grande Jatte de Georges Seurat. 

detail from a sunday afternoon on the island of la grande jatte
Revelación: no encontrará uno solo

Consejo #5: Al agregar colores a su diseño monocromo, hágalo uno a la vez. Cada color que agregue es una invitación para la distracción del usuario. Hablamos brevemente acerca de evitar una alta saturación, pero no hay nada que decir acerca de que no se puede usar una gama de saturaciones de un tono. Eso le dará la variedad y la profundidad que necesita, sin riesgo.


No Sobrecomplique la Tipografía

Si estamos hablando de demostraciones y prototipos realmente no hay necesidad de ir más allá del uso de fuentes del sistema (véase el consejo # 1). Aún así, considere lo siguiente:

Consejo #6: Está en buenas manos con sans-serif ("sin" serifas). Las tipografías Serif son aquellas que tienen los detalles donde terminan los trazos (hay algo de lenguaje técnico ahí para usted).

These are serifs

Las serifas pueden ser útiles para agregar personalidad a un diseño, y a menudo pueden hacer que el cuerpo de un texto sea más fácil de leer. Pero no se utilizan tradicionalmente en el diseño de interfaz de usuario, especialmente en tamaños más pequeños, ya que la mayor parte del tiempo muestran pesos de trazo variados.

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

Roboto Noto
Roboto & Noto

Google hace uso de la "humanista" Droid Sans en sus interfaces de Android, y más recientemente Roboto y Noto.  Apple utiliza 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í? Todas son sin serifas.

Consejo # 7: Evite la ambigüedad. Combinaciones de caracteres como O0, aeo, 8B, Il1, 5S, 2Z, 6b y 9g son a veces difíciles de distinguir, dependiendo de la fuente elegida. Pruébelos; si usted se esfuerza para poder distinguirlos entonces usted es sabio en elegir una tipografía diferente.

Fira Sans from Firefox OS is pretty darn clear
Fira Sans (de Firefox OS) es increíblemente clara

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 interfaz de usuario está atiborrada, rápidamente hará que los usuarios se sientan incómodos y reducirá su capacidad de procesar las tareas de manera eficaz.

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

cramped ui
Ayyy - El título está aplastado arriba contra el borde superior de la página
added space
Espacio añadido para las celdas de la tabla y alrededor de toda la composición

Consejo #8: Cuando se trata de espacio para respirar, "más" es casi siempre mejor. Añada relleno y márgenes, incremente la altura de línea, extienda todo.

Consejo #9: Haga que su espaciamiento sea consistente. Utilice una unidad estándar como su base, añadiendo espacio en incrementos de (por ejemplo) 10px. La consistencia es la clave para crear ritmo y armonía.

consistent grid
Tipografía sin serifas, monocromático con un color acentuado, suficiente espacio, espaciado consistente.

Haga Su Vida más Fácil

No hay vergüenza en ello; dejar que frameworks como Bootstrap y Foundation hagan el trabajo duro por usted. A menudo son criticados por hacer que los sitios web de producción se vean genéricos y poco imaginativos, pero para los prototipos son absolutamente perfectos, listos para ser utilizados.

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

Consejo #10: Párese sobre los hombros de otros. Tome las plantillas Bootstrap, las plantillas Foundation o Material Design Lite existentes o Skeleton, o CSS puro, o UIKit, o ¡cualquiera de los millones de frameworks CSS que prefiera! No tenga miedo de añadir sus estilos propios encima, manteniendo en mente los puntos que hemos discutido hasta ahora.

From ZURBs building blocks
Desde los Bloques de Construcción de ZURB

Estos frameworks son muy completos. Asegúrese de usar todas las piezas que necesita; es probable que se encuentre con problemas si escoge sólo algunos elementos.

Conclusión

Esto no pretendía ser un artículo de fundamentos de diseño, pero en su lugar tiene como objetivo ayudar a suavizar cualquier problema que esté teniendo con sus diseños de prototipo. Si usted es un desarrollador - tal vez grabando un curso o presentando un producto a los clientes o a su equipo, y realmente quieres que sus demostraciones hagan su trabajo, estos consejos le llevarán al camino correcto. Déjeme saber en los comentarios si usted tiene alguna pregunta específica. ¡Buena suerte!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.