Viernes 5 Agosto 2022. LA clase inicias con la explicación sobre lo que veremos estas semanas.
User interface webapp
El Diseño de Interfaz o User Interface (UI), se refiere a todo aquello con lo que los usuarios interactúan directamente (la capa externa de un producto o servicio digital). Es lo que ve y toca en una página web, una aplicación o un dispositivo cualquiera.21-07-2021
Roles en el Diseño de Interfaces
Diseñador UI
El Diseñador de Interfaces o User Interface en inglés, se ocupa de crear la parte visual de la interfaz de un producto o servicio, con el fin de brindar una navegación intuitiva y no solo estética. Debe tener en cuenta la usabilidad y simplificar al máximo su diseño.
El Diseñador UI es el encargado de atraer usuarios y mantenerlos navegando. Este rol trabaja en conjunto con el Desarrollador Frontend para detectar posibles problemas y soluciones durante el proceso de navegación. Otra de sus funciones es la generación de guías de interacción y estilo.
Motion Designer
Es el encargado de la creación de las interacciones entre los usuarios y los productos o servicios digitales. Se ocupa de la narración de historias visuales a través de animaciones de gran impacto. Su tarea es animar imágenes y mensajes estáticos.
El diseño de movimiento ayuda a brindar una experiencia de mejor calidad para la marca, y genera interfaces sencillas y agradables de navegación. A su vez, el uso de microinteracciones logra de forma instantánea relaciones entre los elementos de una interfaz con los usuarios.
Desarrollador Frontend
El Desarrollador Frontend o Front End Developer en inglés, es el encargado de traducir los diseños a un lenguaje de programación y convertirlos en código HTML, JavaScript (JS) y / o CSS.
Se ocupa de generar la parte visual y la estructura de la web para facilitar la navegación del usuario. Determina los componentes externos de las páginas y establece
un tiempo mínimo de carga de las mismas. Sus diseños deben ser adaptables a múltiples navegadores.
Elementos de User Interface
Guidelines
Son pautas, normas o lineamientos generales para el diseño de interfaces que permiten la coherencia visual entre la interfaz y la plataforma en la cual se desarrollará. Son las guías de diseño de los sistemas operativos. Existen dos categorías:
Google Material Design: pertenece al Sistema Operativo Android de Google_. Se destaca por el uso de diferentes profundidades y superficies. Los bordes y las sombras son características inconfundibles de este diseño
Human Interface Guidelines: forma parte del Sistema Operativo iOS Design de _Apple. Se caracteriza por la claridad, profundidad y minimalismo de sus pantallas. Maneja el Content first, el cual prioriza el contenido.
Cabe destacar que cada sistema operativo tiene sus reglas, formas de navegación y conceptos visuales propios.
Iconos
El icono es otro elemento a tener en cuenta durante el proceso de diseño. Se debe visualizar en diferentes tamaños, no ser complejo y mantener el mismo estilo y color siempre.
Moodboard
Es un tablero visual con elementos estéticos para el diseño y concepto de una interface. Es utilizado en diferentes disciplinas de diseño, Una vez creado el Moodboard se pueden generan los UI Kits.
UI Kits
UI Kits o User Interface Kit, es un archivo o documento que incluye diversos elementos. Por ejemplo: botones e iconos, tablas y formularios o sliders, entre otros. Los UI Kits permiten una coherencia visual entre las pantallas y ayudan a definir la morfología de sus componentes. Tiene en cuenta los siguientes puntos:
Sistema de color: generación de 3 colores (primario, secundario y acento)
Sistemas de iconos: definición de iconos con sus estados (activo/inactivo)
Tipografía: elección de la familia, variable tipográfica y jerarquías principales (título, bajada, citas, párrafos y botones)
Componentes: definición de elementos (topBar y buttonBar, formularios, tarjetas y controles) y sus estados (activo e inactivo)
Botones: elección de botones según el sistema operativo (botón principal, botón secundario y botón terciario) y sus estados (activo, inactivo y presionado)
https://openwebinars.net/blog/que-es-ui-o-user-interface/
Design system
Un sistema de Diseño es un conjunto de patrones interconectados y prácticas compartidas coherentemente organizadas. Los sistemas de diseño ayudan en el diseño de productos digitales y en el desarrollo de productos como aplicaciones o sitios web. Son elementos que se repiten, componentes reutilizables.
Un Design System o sistema de diseño es una librería donde guardas una colección de componentes reutilizables incluyendo su código para crear un producto rápidamente. Está guiada por prácticas claras y preestablecidas, además de la esencia del producto, su filosofía, su porqué. Es el ADN de nuestro producto y ayuda a que todo el equipo vaya en la misma dirección. No es estático, sino dinámico, y crece a medida que lo hace el producto.
UI Kit.
Librerías prediseñadas para interfaces.
Los Kits de Interfaz de Usuario son un archivo en el que se recogen elementos prediseñados como botones, iconos o formularios para facilitar el desarrollo de las interfaces de usuario. Son elementos que se pueden editar y personalizar fácilmente para adaptarlos a cada proyecto. Es decir, es únicamente en la parte visual del diseño.
Los UI Kits sirven para ahorrar tiempo y dinero, ya que no se parte desde cero cuando se empieza a diseñar, sino que se dispone de un punto de partida. Además nos puede ayudar a descubrir nuevos elementos que podemos utilizar en nuestros diseños. También nos puede servir incluso para visualizar soluciones que no nos habíamos planteado en un principio.
En definitiva, la mayor diferencia entre los UI Kits y los sistemas de diseño es que los primeros simplemente son plantillas para facilitar el trabajo, lo que se puede volver en tu contra si no las personalizas adecuadamente al proyecto en el que estás trabajando. Por el contrario, los sistemas de diseño están específicamente adaptados al proyecto y se crea una guía de estilo que puede utilizar todo el equipo, no solo los diseñadores.
Es decir, los sistemas de diseño son transversales y afectan a todos los aspectos del producto, desde el contenido hasta lo puramente visual.
Atomic Design
Es la creación de mi propia librería
La metodología “Atomic Design”, o diseño atómico en castellano, es un sistema de trabajo que se basa en la creación de elementos modulares sencillos para crear estructuras de información mucho más complejas, una teoría que creó el diseñador digital Brad Frost.
Cada vez tenemos que diseñar para más tamaños de pantallas y para distintos dispositivos (piensa en móviles, pero también tabletas, UI para televisión, juegos, gafas de VR y AR, etc.) y necesitamos procesos que eviten errores y faciliten el desarrollo.
Atomic Design está justo en la intersección entre diseño y desarrollo. Los diseñadores utilizamos guías de estilos y moodboards y los desarrolladores, frameworks como Bootstrap o Foundation.
Atomic Design viene a unir ambas disciplinas bajo un concepto: diseñar por componentes.
En figma construimos desde los átomos para llegar a la pagina. Estos elementos se actualizan automáticamente.
https://www.uifrommars.com/atomic-design-ventajas/
Esta libreria o kit se comparte para que tanto la web como la app queden con pixel perfect.
Investigar aplicaciones nativas. ?????
Las aplicaciones nativas son aquellas que se crean específicamente para un sistema operativo móvil y que se desarrollan en el lenguaje específico (nativo) de este sistema.
Se llaman aplicaciones nativas debido a que se desarrollan para el sistema operativo nativo de cada dispositivo. Este tipo de aplicaciones móviles son aquellas que nos descargamos en las tiendas de apps como pueden ser Play Store (Android) y App Store (iOS).
Como actividad final se nos pide realizar una lista en fig jam de los elementos que componen tu interfaz.
