UI Design
TCS Internal Use
UI Design
Fundamentos del Diseño
Diseñar es un método de resolución de Principios sobre el diseño
problemas. Ya sea un plano, una interfaz de
usuario inteligente, un folleto o una silla, el Estos principios son
diseño puede ayudar a resolver un problema fundamentales al momento de
visual o físico. diseñar e implementar interfaces
efectivas, como los entornos de
Diseñar es un proceso de trabajo que gira GUI tradicionales, la web,
entorno al usuario e impulsa el desarrollo en dispositivos móviles, dispositivos
función de las necesidades específicas de sus portátiles o dispositivos
clientes. inteligentes conectados a
Internet.
No es puramente estético, ni totalmente
analítico o funcional. Al considerar el diseño de Una comprensión básica de los
sus proyectos, debe pensar en cómo todo principios del buen diseño es la
encaja en armonía, siendo esta la forma base para crear una buena
práctica de abordar los problemas para interfaz de usuario.
diseñar.
TCS Internal Use
UI Design
El diseño de interfaz de usuario
El diseño de interfaz de usuario se conoce Elementos de diseño de interfaz de
como el proceso de guiar visualmente a un usuario
usuario a través de la interfaz de un Para lograr un diseño funcional es
producto, sus elementos interactivos y en necesario tener en consideración
todas sus plataformas. siempre como usar los siguientes
elementos:
Esta también transmite la fortaleza y los
activos visuales de una marca a la interfaz Cuadrículas de diseño
de un producto para mejorar la experiencia Iconografía
del usuario.
Teoría del color
Tipografía
TCS Internal Use
UI Design
Cuadrículas de diseño
Es la caja de herramientas de los diseñadores,
siendo uno de los elementos básicos
fundamentales. Si no usamos cuadrículas de diseño:
Las Cuadrículas de diseño ayudan a Tus proyectos nunca tendrán
estructurar su diseño de una manera eficiente armonía visual.
y ordenada. Como todo lo que carece de
estructura o una base sólida, sus
conceptos serán visualmente
inconsistentes.
Los elementos gráficos no
funcionarán armoniosamente
juntos.
TCS Internal Use
UI Design
Iconografía
La iconografía es una forma efectiva de transmitir una idea
en un factor de forma pequeño. Este enfoque se está
volviendo más crítico en los días de la reducción de la
pantalla.
Con el aumento de dispositivos móviles, los íconos juegan un
papel importante en el diseño de la interfaz, ayudan a la
tactilidad, simplificación y ahorro de espacio dada la cada vez
más frecuente navegación en pantallas pequeñas.
Hay seis pautas para tener en cuenta al diseñar iconos. Estas aseguran que
su uso no sea confuso para el usuario
• Etiquete los iconos a menos que haya una restricción de espacio.
• Representar tanto la acción del icono como el objeto.
• Agrupe iconos similares.
• Dele a sus iconos un motivo visual común.
• Evite proporcionar iconos con demasiados detalles.
• Asegúrese de que el orden y la ubicación de los iconos sean consistentes.
TCS Internal Use
UI Design
Teoría del color
El color es uno de los elementos del diseño Matiz:
esenciales de la interfaz de usuario. Debido a su
impacto en el usuario, es importante conocer la
teoría del color e incluso un poco de psicología. El matiz es el más básico de los
términos de color y denota el color
de un objeto.
Los colores cálidos emiten un mensaje ardiente,
Cuando decimos azul, verde o rojo,
mientras que los colores fríos tienen un efecto
estamos hablando de matiz.
calmante.
Los esquemas de color análogos, a menudo
encontrados en la naturaleza, son agradables a
la vista, mientras que los esquemas de color
complementarios tienen una sensación más
enérgica.
TCS Internal Use
UI Design
Teoría del color
Croma: Saturación:
Croma se refiere a la pureza de La saturación señala cómo surge un matiz en
un color. condiciones de iluminación particulares.
Un tono con alto croma no tiene Considere la saturación basada en tonos
negro, blanco o gris. pálidos vs puros o débiles vs fuertes.
Agregar blanco, negro o gris
reduce el croma.
TCS Internal Use
UI Design
Teoría del color
Valor: Tono:
El valor o la claridad se refiere a cuán Los tonos se forman cuando el gris
oscuro o claro es un color. se combina con un matiz y se ven
Los colores más claros tienen valores más suaves o más opacos que los
más altos. matices puros.
Por ejemplo, el anaranjado exhibe un
valor más alto que el púrpura oscuro o
el azul marino. El negro muestra el
menor valor de cualquier tono, y el
blanco el mayor.
TCS Internal Use
UI Design
Teoría del color
Sombra: Tinte:
Se forma cuando el negro se Se crea cuando se agrega blanco a
combina con un matiz haciéndolo un matiz para aligerarlo.
más oscuro. Los tintes muy claros se conocen
Es mejor evitar mezclar sombras con como pasteles. Cuando cualquier
matices ya que esto crea un aspecto matiz puro se mezcla con blanco
demasiado oscuro y pesado. obtenemos un tinte.
Por ejemplo, el rosa es un color y a la
vez un tinte del rojo.
TCS Internal Use
UI Design
Tipografía
La tipografía es el arte del tipo. Las partes principales de la tipografía son las
fuentes, la legibilidad y los tamaños.
TCS Internal Use
UI Design
Tipografía
Partes de un tipo
Altura de Mayúscula es la altura total
de las letras mayúsculas en una
formación de palabras.
El Ascendente se conoce como la
cola hacia arriba en letras como b, d,
h, k, l y t.
Descendente se conoce como la cola
hacia abajo para letras como y, q y g.
Altura X es la altura de la letra y no
tiene descendentes ni ascendentes.
La línea de base se conoce como el
límite en el que se encuentra la parte
más baja de la letra.
Blanco Interno es el espacio en
blanco que se ve dentro de las letras,
como p y o.
TCS Internal Use
UI Design
Tipografía
Partes de un tipo
Interlineado se conoce como el
espacio entre líneas de texto.
– Es una herramienta valiosa para Interletrado o Kerning es el espacio
entregar texto legible. entre los caracteres.
– Un buen interlineado puede
mejorar la apariencia del peor
tipo.
– Un mal interlineado puede
depreciar un trabajo de calidad.
TCS Internal Use
Elements of User Experience
Gracias
TCS Internal Use