skia.docs

Usar lenguaje humano

Evitar saturación de colores

Usar 2 paletas de colores (una para tema obscuro y otra para tema claro

Usar siempre alineación horizonal de manera consistente

Usar menu con iconos y etiquetas

Cortar el contenido largo / usar ajustes visuales para resaltar info importante.

Usar el mismo tipo de iconos consistentemente

Usar descripciones claras para que el usuario tome buenas decisiones.

Usar process/progress bar para indicar los pasos de un proceso / forma

Usar tooltips o msgs de validación cerca del control que tiene el error

Manten los botones de acciones (CTA) cerca de la info a la que corresponde

Usa psicología del color. Rojo es malo (cancelar, borrar, regresar), Verde es bueno (guardar, continuar).

Usa pocos tamaños de letra diferente. Manten la consistencia.

Ajusta los campos de las formas en una sola columna

Evitar el color negro puro, usa grises obscuros.

Muestra primero el login mediante herramientas sociales.

Alinea el texto para facilitar la lectura

El checklist se usa si el usuario puede seleccionar multiples opciones, los radio buttons si solo puede seleccionar 1 opción.

Evita usar colores diferentes para los iconos, botones y leyendas durante la navegación. Mejor usa grises.

Evitar usar lineas para separar secciones, usa mejor espacios.

Usa sombreado para mostrar diferentes capas / modals

Usa espacios (padding y margin) para mejorar el diseño

Mantén la consistencia en controles, textos, fonts, colores.

En los textos de búsqueda usa palabras de ejemplo que pueda buscar el usuario.

Usa contraste cuando uses texto sobre imagen, para que resalte el texto.

Usa gradientes con poca diferencia de colores entre el inicio y el final

Usa elementos visuales para mostrar los pasos de un procedimiento.

Resalta los botones con acciones (CTA)

Evita los verbos en los textos/menus cuando sea suficientemente claro el mensaje.

Usa jerarquía visual en los botones con las acciones mas comunes.

Evita usar diferentes fonts

Para app mobiles, usa los botones de acciones en la parte de abajo, porque esta mas cerca de los dedos.

Haz que tus botones se vean

Resalta la información mas conveniente.

Evita textos muy anchos

Provee al usuario las menos opciones posibles.

Pon las opciones mas importantes al inicio y al final del menú

Provee masks para los datos con formato especial (fecha, moneda, teléfonos)

Si solo hay 2 o 3 opciones, usa mejor una option list, en vez de un combobox.

Evita la escritura, usa controles que se adapten mejor a hacer clicks.

Asegúrate de dejar espacios en las orillas de los elementos

Evita la repetición del logo o cualquier información.

Si usas un borde redondo dentro de otro elemento con borde redondo, ajusta los radios para que se vea alineado.

Evita usar scroll dento de un elemento. Usa un botón para mostrar mas info.

En una app mobil usa

Usa iconos planos.

Usa palabras que motiven al usuario a realizar la acción.

Haz grandes las areas

El usuario lee en forma de

Haz que el usuario desee hacer scroll, mostrando un poco de info de la siguiente sección.