{"id":12513,"date":"2021-09-04T04:35:36","date_gmt":"2021-09-04T04:35:36","guid":{"rendered":"https:\/\/www.xst.mx\/site\/?p=12513"},"modified":"2021-09-04T04:48:35","modified_gmt":"2021-09-04T04:48:35","slug":"que-es-ui","status":"publish","type":"post","link":"https:\/\/www.xst.mx\/site\/diseno\/que-es-ui\/","title":{"rendered":"\u00bfQu\u00e9 es UI?"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

Qu\u00e9 es el Dise\u00f1o de Interfaces (UI)<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

El Dise\u00f1o de Interfaz o\u00a0User Interface<\/em>\u00a0(UI), se refiere a todo aquello con lo que los usuarios interact\u00faan directamente (la capa externa de un producto o servicio digital). Es lo que ve y toca en una p\u00e1gina web, una aplicaci\u00f3n o un dispositivo cualquiera. Cabe destacar que, UI es la parte visible de la interface, mientras que UX es la parte oculta, conceptos que muchas veces prestan a confusi\u00f3n.<\/p>

El dise\u00f1o de interfaz se ocupa de los colores; las tipograf\u00edas; los iconos; los formularios y botones; las animaciones y los sonidos de las notificaciones, por ejemplo, de las redes sociales. Un buen dise\u00f1o de interface debe ser funcional m\u00e1s all\u00e1 de lo est\u00e9tico<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

De qu\u00e9 se ocupa UI<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

obre todas las cosas, entiende el proceso de\u00a0Dise\u00f1o Centrado en el Usuario<\/em>\u00a0(DCU). Este proceso debe ser adaptable a cualquier dispositivo. La UI se ocupa de la construcci\u00f3n y validaci\u00f3n de prototipos. Ayuda tambi\u00e9n a la creaci\u00f3n de\u00a0wireframes<\/em>\u00a0(esqueletos de las pantallas) y estructuras dise\u00f1adas a mano o digitalmente. Dos de las metodolog\u00edas de dise\u00f1o m\u00e1s utilizadas son\u00a0Design Thinking y Design Sprint<\/em>.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

Herramientas de Dise\u00f1o<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

Figma<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Figma ayuda a la colaboraci\u00f3n en tiempo real y permite, entre otras cosas, hacer correcciones en l\u00ednea con los integrantes del equipo de dise\u00f1o. Cuenta con una versi\u00f3n gratuita y otra paga. Ofrece almacenamiento ilimitado en la nube, est\u00e1 disponible para todos los sistemas operativos y posibilita trabajar con o sin conexi\u00f3n a la red.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

Sketch<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Permite trabajar 100% en vectorial, con una precisi\u00f3n a nivel de p\u00edxeles y de forma no destructiva (puede hacer cambios sin modificar el archivo original). Sus funciones ayudan a la creaci\u00f3n de logos, elementos de identidad de una marca y generaci\u00f3n de gr\u00e1ficos.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

Adobe XD\n<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Adobe XD ayuda a elaborar dise\u00f1os de alta fidelidad aplicable a cualquier pantalla. Permite agregar animaciones, crear prototipos interactivos y realizar pruebas en diferentes dispositivos.<\/p>

Esta herramienta puede compartir, entregar dise\u00f1os, realizar comentarios e iterar a gran velocidad. Ayuda a generar capas en profundidad, voltear planos, mostrar proyectos en 3D y crear r\u00e1pidamente un sentido de realidad. Tiene gran equilibrio entre est\u00e9tica y funcionalidad.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

Qu\u00e9 es el Dise\u00f1o de Interfaces (UI) El Dise\u00f1o de Interfaz o\u00a0User Interface\u00a0(UI), se refiere a todo aquello con lo que los usuarios interact\u00faan directamente (la capa externa de un producto o servicio digital). Es lo que ve y toca en una p\u00e1gina web, una aplicaci\u00f3n o un dispositivo cualquiera….<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"categories":[18,3],"tags":[],"class_list":["post-12513","post","type-post","status-publish","format-standard","hentry","category-desarrollo","category-diseno"],"_links":{"self":[{"href":"https:\/\/www.xst.mx\/site\/wp-json\/wp\/v2\/posts\/12513","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.xst.mx\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.xst.mx\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.xst.mx\/site\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.xst.mx\/site\/wp-json\/wp\/v2\/comments?post=12513"}],"version-history":[{"count":3,"href":"https:\/\/www.xst.mx\/site\/wp-json\/wp\/v2\/posts\/12513\/revisions"}],"predecessor-version":[{"id":12517,"href":"https:\/\/www.xst.mx\/site\/wp-json\/wp\/v2\/posts\/12513\/revisions\/12517"}],"wp:attachment":[{"href":"https:\/\/www.xst.mx\/site\/wp-json\/wp\/v2\/media?parent=12513"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.xst.mx\/site\/wp-json\/wp\/v2\/categories?post=12513"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.xst.mx\/site\/wp-json\/wp\/v2\/tags?post=12513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}