{"id":850,"date":"2020-12-06T03:27:45","date_gmt":"2020-12-06T09:27:45","guid":{"rendered":"http:\/\/etcox.com.mx\/blog\/?p=850"},"modified":"2021-02-24T18:19:42","modified_gmt":"2021-02-25T00:19:42","slug":"que-es-el-diseno-ui","status":"publish","type":"post","link":"https:\/\/etcox.com.mx\/blog\/que-es-el-diseno-ui\/","title":{"rendered":"\u00bfQu\u00e9 es el dise\u00f1o UI?"},"content":{"rendered":"\n<p>Por cuestiones ajenas a mi, hace no mucho me quede sin trabajo, por lo que he empezado la b\u00fasqueda de un nuevo trabajo como dise\u00f1ador UI | UX. Por si no lo saben me dedico principalmente a esto, si, para muchos les sorprender\u00e1 porque la gran mayor\u00eda llega aqu\u00ed es por el SEO pero esa es mi funci\u00f3n secundaria, ya que vivir del SEO es depender de una segunda persona (Google) que no importa cuanto pueda estar preparada un d\u00eda puede cambiar las algoritmos y todo lo que sab\u00edamos se va al traste. A diferencia del dise\u00f1o UI y UX que aunque va evolucionando d\u00eda con d\u00eda no esta regido por el capricho de una empresa. Pero me dado cuenta de que muchos no saben que es el UI. As\u00ed que aprovechare esto para hablar un poco de lo que me dedico ya que curiosamente mucha gente no entiende que es esto, ya que en la b\u00fasqueda de empleo veo que piden muchas cosas que no pertenecen a esta \u00e1rea, esperando que esto ayude a entender que es y que no es UI.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-4794112364203077\" data-ad-slot=\"9006506760\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfQu\u00e9 es el UI?<\/h2>\n\n\n\n<p>UI significa User Interface o interfaz de usuario. La interfaz es todo lo que vemos en cualquier software o aplicaci\u00f3n. El dise\u00f1o de UI es eso, dise\u00f1ar la interfaz que va a usar un usuario en un aplicaci\u00f3n o software. Forma parte muy importante del proceso de desarrollo de software y est\u00e1n involucradas varias personas. Explicare cual es el proceso de dise\u00f1o UI en el desarrollo de software para que quede mas claro pondr\u00e9 un de ejemplo creado por mi equipo, por temas de confidencialidad no puedo mostrar todo el sistema solo elementos por separado.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1081\" data-attachment-id=\"852\" data-permalink=\"https:\/\/etcox.com.mx\/blog\/que-es-el-diseno-ui\/dashboard\/\" data-orig-file=\"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Dashboard.png?fit=1920%2C1081&amp;ssl=1\" data-orig-size=\"1920,1081\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Ejemplo de interfaz\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Dashboard.png?fit=300%2C169&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Dashboard.png?fit=1024%2C577&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Dashboard.png?resize=1920%2C1081&#038;ssl=1\" alt=\"Ejemplo de un interfaz de una software\" class=\"wp-image-852\" title=\"Ejemplo de interfaz de usuario\" srcset=\"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Dashboard.png?w=1920&amp;ssl=1 1920w, https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Dashboard.png?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Dashboard.png?resize=1024%2C577&amp;ssl=1 1024w, https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Dashboard.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Dashboard.png?resize=1536%2C865&amp;ssl=1 1536w, https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Dashboard.png?resize=1228%2C691&amp;ssl=1 1228w, https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Dashboard.png?resize=614%2C346&amp;ssl=1 614w, https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Dashboard.png?resize=295%2C166&amp;ssl=1 295w, https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Dashboard.png?resize=590%2C332&amp;ssl=1 590w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\">Imagen 1. Ejemplo de interfaz de usuario.<\/p>\n\n\n\n<p>La composici\u00f3n no es casual, para llegar a este acomodado de elementos es mediante una investigaci\u00f3n de experiencia de usuario (UX), esto no es ocurrencia esta fundamentada en investigaci\u00f3n que puede cualitativa como cuantitativa, no me meter\u00e1 mas ya que entrar\u00eda en el tema de que es dise\u00f1o UX (que explicare mas a detalle en otra entrada), solo hay que saber que la composici\u00f3n fue realizada (y probablemente testeada) basada en una investigaci\u00f3n.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"853\" data-permalink=\"https:\/\/etcox.com.mx\/blog\/que-es-el-diseno-ui\/captura-de-pantalla-2020-12-06-a-las-2-19-23\/\" data-orig-file=\"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Captura-de-Pantalla-2020-12-06-a-las-2.19.23.png?fit=1848%2C1298&amp;ssl=1\" data-orig-size=\"1848,1298\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Ejemplo de diagrama de flujo\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Captura-de-Pantalla-2020-12-06-a-las-2.19.23.png?fit=300%2C211&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Captura-de-Pantalla-2020-12-06-a-las-2.19.23.png?fit=1024%2C719&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Captura-de-Pantalla-2020-12-06-a-las-2.19.23.png?resize=512%2C360&#038;ssl=1\" alt=\"Ejemplo de diagrama de flujo\" class=\"wp-image-853\" width=\"512\" height=\"360\" title=\"Ejemplo de diagrama de flujo\" srcset=\"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Captura-de-Pantalla-2020-12-06-a-las-2.19.23.png?resize=1024%2C719&amp;ssl=1 1024w, https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Captura-de-Pantalla-2020-12-06-a-las-2.19.23.png?resize=300%2C211&amp;ssl=1 300w, https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Captura-de-Pantalla-2020-12-06-a-las-2.19.23.png?resize=768%2C539&amp;ssl=1 768w, https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Captura-de-Pantalla-2020-12-06-a-las-2.19.23.png?resize=1536%2C1079&amp;ssl=1 1536w, https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Captura-de-Pantalla-2020-12-06-a-las-2.19.23.png?w=1848&amp;ssl=1 1848w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Imagen 2. Ejemplo de diagrama de flujo.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"854\" data-permalink=\"https:\/\/etcox.com.mx\/blog\/que-es-el-diseno-ui\/captura-de-pantalla-2020-12-06-a-las-2-18-48\/\" data-orig-file=\"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Captura-de-Pantalla-2020-12-06-a-las-2.18.48.png?fit=908%2C882&amp;ssl=1\" data-orig-size=\"908,882\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Ejemplo de wireframe\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Captura-de-Pantalla-2020-12-06-a-las-2.18.48.png?fit=300%2C291&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Captura-de-Pantalla-2020-12-06-a-las-2.18.48.png?fit=908%2C882&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Captura-de-Pantalla-2020-12-06-a-las-2.18.48.png?resize=454%2C441&#038;ssl=1\" alt=\"Ejemplo de Wireframe\" class=\"wp-image-854\" width=\"454\" height=\"441\" title=\"Ejemplo de Wireframe\" srcset=\"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Captura-de-Pantalla-2020-12-06-a-las-2.18.48.png?w=908&amp;ssl=1 908w, https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Captura-de-Pantalla-2020-12-06-a-las-2.18.48.png?resize=300%2C291&amp;ssl=1 300w, https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Captura-de-Pantalla-2020-12-06-a-las-2.18.48.png?resize=768%2C746&amp;ssl=1 768w\" sizes=\"auto, (max-width: 454px) 100vw, 454px\" \/><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\">Imagen 3. Ejemplo de Wireframe.<\/p>\n\n\n\n<p>Esta investigaci\u00f3n es entregada al UI, esta compuesta por Wireframe que son bocetos (estos pueden ser en papel o mas elaborados depende de como trabaje) en donde se ven donde va a ir cada cosa y como es el flujo del sistema. Cuando me refiero al flujo del sistema, hablo de como va a ir las pantallas y como debe funcionar dependiendo de la interacci\u00f3n. Ya con todos estos elementos el dise\u00f1ador empezara a dise\u00f1ar. Para esto crea una gu\u00eda de UI donde definir\u00e1 todos los elementos del sistema como son colores, tipograf\u00eda, iconograf\u00eda, botones, etc.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1738\" height=\"1108\" data-attachment-id=\"855\" data-permalink=\"https:\/\/etcox.com.mx\/blog\/que-es-el-diseno-ui\/captura-de-pantalla-2020-12-06-a-las-2-55-31\/\" data-orig-file=\"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Captura-de-Pantalla-2020-12-06-a-las-2.55.31.png?fit=1738%2C1108&amp;ssl=1\" data-orig-size=\"1738,1108\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Ejemplo de lineamientos UI\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Captura-de-Pantalla-2020-12-06-a-las-2.55.31.png?fit=300%2C191&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Captura-de-Pantalla-2020-12-06-a-las-2.55.31.png?fit=1024%2C653&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Captura-de-Pantalla-2020-12-06-a-las-2.55.31.png?resize=1738%2C1108&#038;ssl=1\" alt=\"Ejemplo de elementos de UI\" class=\"wp-image-855\" title=\"Ejemplo de elementos de UI\" srcset=\"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Captura-de-Pantalla-2020-12-06-a-las-2.55.31.png?w=1738&amp;ssl=1 1738w, https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Captura-de-Pantalla-2020-12-06-a-las-2.55.31.png?resize=300%2C191&amp;ssl=1 300w, https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Captura-de-Pantalla-2020-12-06-a-las-2.55.31.png?resize=1024%2C653&amp;ssl=1 1024w, https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Captura-de-Pantalla-2020-12-06-a-las-2.55.31.png?resize=768%2C490&amp;ssl=1 768w, https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Captura-de-Pantalla-2020-12-06-a-las-2.55.31.png?resize=1536%2C979&amp;ssl=1 1536w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\">Imagen 4. Ejemplo de elementos de UI.<\/p>\n\n\n\n<p>Teniendo estos elementos ya se empieza a dise\u00f1ar basado en el Wireframe, normalmente a estas alturas ya se defini\u00f3 todo, fue aprobado por el cliente o por lo menos de manera interna, por lo que no deber\u00eda de haber cambios en el flujo del sistema ni la composici\u00f3n (a menos pase algo catastr\u00f3fico). Ya se empieza a dise\u00f1ar la interfaz como deber\u00eda de verse, las im\u00e1genes como los textos suelen ser simulaciones de lo que contendr\u00e1.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"242\" height=\"102\" data-attachment-id=\"856\" data-permalink=\"https:\/\/etcox.com.mx\/blog\/que-es-el-diseno-ui\/captura-de-pantalla-2020-12-06-a-las-2-28-59\/\" data-orig-file=\"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Captura-de-Pantalla-2020-12-06-a-las-2.28.59.png?fit=242%2C102&amp;ssl=1\" data-orig-size=\"242,102\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Programas de dise\u00f1o UI\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Captura-de-Pantalla-2020-12-06-a-las-2.28.59.png?fit=242%2C102&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Captura-de-Pantalla-2020-12-06-a-las-2.28.59.png?fit=242%2C102&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/Captura-de-Pantalla-2020-12-06-a-las-2.28.59.png?resize=242%2C102&#038;ssl=1\" alt=\"Programas de Xd\" class=\"wp-image-856\" title=\"Programas de Xd\"\/><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\">Imagen 5. Programas de Xd.<\/p>\n\n\n\n<p>Esta puede ser dise\u00f1ada en diferentes programas, yo uso Adobe Xd porque es el que estoy mas familiarizado por usar durante toda mi vida laboral la paqueter\u00eda de adobe, pero hay otros programas como Sketch, Invision o Figma, todos tienen sus ventajas y desventajas, yo recomiendo usar el que mejor se adapte a las necesidades de tu equipo (como mi caso fue Xd). Terminado este prototipo se presenta al cliente donde se ven los cambios, este prototipo puede tener o no interacci\u00f3n depende de nueva cuenta como trabaje tu equipo (en algunos proyectos mostramos interacci\u00f3n y en otros no). Terminado esto se entrega a desarrollo donde ya se van a encargar de toda la programaci\u00f3n, aqu\u00ed puede que haya cambios ya que en desarrollo puede que se presenten casos que el dise\u00f1o como se ten\u00eda contemplado no pueda desarrollarse por x o y circunstancia, tambi\u00e9n puede que se necesite mas pantallas por lo que el trabajo del dise\u00f1ador UI no acaba hasta que el proyecto este terminado.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-4794112364203077\" data-ad-slot=\"9006506760\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfQu\u00e9 no es un dise\u00f1ador UI?<\/h3>\n\n\n\n<p>No es un dise\u00f1ador gr\u00e1fico. Un dise\u00f1ador gr\u00e1fico primero se centra en el aspecto gr\u00e1fico sobretodo, todo lo dem\u00e1s pasa a un segundo termino como la experiencia de usuario o como va a interactuar. No es un desarrollador, es muy importante que el UI sepa como funciona al c\u00f3digo ya que le permitir\u00e1 transmitir mejor el mensaje a los desarrolladores, pero el no programa, el encargado es un desarrollador front-end, si estas usando una app y la vez medio extra\u00f1a es porque muy probablemente que la interfaz fue hecha por un desarrollador sin ayuda o conocimientos de UI. No es dise\u00f1ador UX, el dise\u00f1ador UI puede ser el mismo que hizo el UX pero no es regla, hay muchos casos que el dise\u00f1o UX lo hizo alguien que no estudio algo relacionado al dise\u00f1o, si no psicolog\u00eda o algo af\u00edn.<\/p>\n\n\n\n<p>Esto b\u00e1sicamente es lo que el dise\u00f1o UI, espero en unos d\u00edas subir la segunda parte que es el UX, algo que es mas complejo por lo que quise ir a lo sencillo primero.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Por cuestiones ajenas a mi, hace no mucho me quede sin trabajo, por lo que he empezado la b\u00fasqueda de un nuevo trabajo como dise\u00f1ador UI | UX. Por si no lo saben me dedico principalmente a esto, si, para muchos les sorprender\u00e1 porque la gran mayor\u00eda llega aqu\u00ed es por el SEO pero esa [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":860,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[2],"tags":[9,145],"class_list":["post-850","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno","tag-diseno-2","tag-diseno-ui"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>\u00bfQu\u00e9 es el dise\u00f1o UI? - ETC o X - Dise\u00f1o UX | UI<\/title>\n<meta name=\"description\" content=\"UI significa User Interface o interfaz de usuario. La interfaz es todo lo que vemos en cualquier software o aplicaci\u00f3n.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/etcox.com.mx\/blog\/que-es-el-diseno-ui\/\" \/>\n<meta property=\"og:locale\" content=\"es_MX\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u00bfQu\u00e9 es el dise\u00f1o UI? - ETC o X - Dise\u00f1o UX | UI\" \/>\n<meta property=\"og:description\" content=\"UI significa User Interface o interfaz de usuario. La interfaz es todo lo que vemos en cualquier software o aplicaci\u00f3n.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/etcox.com.mx\/blog\/que-es-el-diseno-ui\/\" \/>\n<meta property=\"og:site_name\" content=\"ETC o X - Dise\u00f1o UX | UI\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/emmanuel.telles.5\" \/>\n<meta property=\"article:published_time\" content=\"2020-12-06T09:27:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-02-25T00:19:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/portada.png?fit=1920%2C1080&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Etc o X\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Etc o X\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/etcox.com.mx\/blog\/que-es-el-diseno-ui\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/etcox.com.mx\/blog\/que-es-el-diseno-ui\/\"},\"author\":{\"name\":\"Etc o X\",\"@id\":\"https:\/\/etcox.com.mx\/blog\/#\/schema\/person\/53ce288bb1ef17e3816423c7f0ef5d54\"},\"headline\":\"\u00bfQu\u00e9 es el dise\u00f1o UI?\",\"datePublished\":\"2020-12-06T09:27:45+00:00\",\"dateModified\":\"2021-02-25T00:19:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/etcox.com.mx\/blog\/que-es-el-diseno-ui\/\"},\"wordCount\":969,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/etcox.com.mx\/blog\/que-es-el-diseno-ui\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/portada.png?fit=1920%2C1080&ssl=1\",\"keywords\":[\"dise\u00f1o\",\"Dise\u00f1o UI\"],\"articleSection\":[\"Dise\u00f1o\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/etcox.com.mx\/blog\/que-es-el-diseno-ui\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/etcox.com.mx\/blog\/que-es-el-diseno-ui\/\",\"url\":\"https:\/\/etcox.com.mx\/blog\/que-es-el-diseno-ui\/\",\"name\":\"\u00bfQu\u00e9 es el dise\u00f1o UI? - ETC o X - Dise\u00f1o UX | UI\",\"isPartOf\":{\"@id\":\"https:\/\/etcox.com.mx\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/etcox.com.mx\/blog\/que-es-el-diseno-ui\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/etcox.com.mx\/blog\/que-es-el-diseno-ui\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/portada.png?fit=1920%2C1080&ssl=1\",\"datePublished\":\"2020-12-06T09:27:45+00:00\",\"dateModified\":\"2021-02-25T00:19:42+00:00\",\"author\":{\"@id\":\"https:\/\/etcox.com.mx\/blog\/#\/schema\/person\/53ce288bb1ef17e3816423c7f0ef5d54\"},\"description\":\"UI significa User Interface o interfaz de usuario. La interfaz es todo lo que vemos en cualquier software o aplicaci\u00f3n.\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/etcox.com.mx\/blog\/que-es-el-diseno-ui\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/etcox.com.mx\/blog\/que-es-el-diseno-ui\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/portada.png?fit=1920%2C1080&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/portada.png?fit=1920%2C1080&ssl=1\",\"width\":1920,\"height\":1080,\"caption\":\"Que es dise\u00f1o UI\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/etcox.com.mx\/blog\/#website\",\"url\":\"https:\/\/etcox.com.mx\/blog\/\",\"name\":\"ETC o X - Dise\u00f1o UX | UI\",\"description\":\"Dise\u00f1o, SEO, Cine y otras cosas\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/etcox.com.mx\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/etcox.com.mx\/blog\/#\/schema\/person\/53ce288bb1ef17e3816423c7f0ef5d54\",\"name\":\"Etc o X\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/etcox.com.mx\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/05bb4e433ff00fcb4f14a9c5dfb9c72a0f65334f4c5ea48b47320d62b125efb3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/05bb4e433ff00fcb4f14a9c5dfb9c72a0f65334f4c5ea48b47320d62b125efb3?s=96&d=mm&r=g\",\"caption\":\"Etc o X\"},\"description\":\"Dise\u00f1ador UX | UX, nativo de Culiac\u00e1n radicado en Guadalajara. Orgullosamente egresado del Iteso, especialista en SEO y cosas Geeks.\",\"sameAs\":[\"http:\/\/etcox.com.mx\",\"https:\/\/www.facebook.com\/emmanuel.telles.5\",\"https:\/\/instagram.com\/etcox\/\",\"https:\/\/www.linkedin.com\/in\/emmanuel-telles\/?locale=en_US\",\"https:\/\/x.com\/http:\/\/twitter.com\/etc_o_x\"],\"url\":\"https:\/\/etcox.com.mx\/blog\/author\/etc\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u00bfQu\u00e9 es el dise\u00f1o UI? - ETC o X - Dise\u00f1o UX | UI","description":"UI significa User Interface o interfaz de usuario. La interfaz es todo lo que vemos en cualquier software o aplicaci\u00f3n.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/etcox.com.mx\/blog\/que-es-el-diseno-ui\/","og_locale":"es_MX","og_type":"article","og_title":"\u00bfQu\u00e9 es el dise\u00f1o UI? - ETC o X - Dise\u00f1o UX | UI","og_description":"UI significa User Interface o interfaz de usuario. La interfaz es todo lo que vemos en cualquier software o aplicaci\u00f3n.","og_url":"https:\/\/etcox.com.mx\/blog\/que-es-el-diseno-ui\/","og_site_name":"ETC o X - Dise\u00f1o UX | UI","article_author":"https:\/\/www.facebook.com\/emmanuel.telles.5","article_published_time":"2020-12-06T09:27:45+00:00","article_modified_time":"2021-02-25T00:19:42+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/portada.png?fit=1920%2C1080&ssl=1","type":"image\/png"}],"author":"Etc o X","twitter_misc":{"Escrito por":"Etc o X","Tiempo de lectura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/etcox.com.mx\/blog\/que-es-el-diseno-ui\/#article","isPartOf":{"@id":"https:\/\/etcox.com.mx\/blog\/que-es-el-diseno-ui\/"},"author":{"name":"Etc o X","@id":"https:\/\/etcox.com.mx\/blog\/#\/schema\/person\/53ce288bb1ef17e3816423c7f0ef5d54"},"headline":"\u00bfQu\u00e9 es el dise\u00f1o UI?","datePublished":"2020-12-06T09:27:45+00:00","dateModified":"2021-02-25T00:19:42+00:00","mainEntityOfPage":{"@id":"https:\/\/etcox.com.mx\/blog\/que-es-el-diseno-ui\/"},"wordCount":969,"commentCount":0,"image":{"@id":"https:\/\/etcox.com.mx\/blog\/que-es-el-diseno-ui\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/portada.png?fit=1920%2C1080&ssl=1","keywords":["dise\u00f1o","Dise\u00f1o UI"],"articleSection":["Dise\u00f1o"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/etcox.com.mx\/blog\/que-es-el-diseno-ui\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/etcox.com.mx\/blog\/que-es-el-diseno-ui\/","url":"https:\/\/etcox.com.mx\/blog\/que-es-el-diseno-ui\/","name":"\u00bfQu\u00e9 es el dise\u00f1o UI? - ETC o X - Dise\u00f1o UX | UI","isPartOf":{"@id":"https:\/\/etcox.com.mx\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/etcox.com.mx\/blog\/que-es-el-diseno-ui\/#primaryimage"},"image":{"@id":"https:\/\/etcox.com.mx\/blog\/que-es-el-diseno-ui\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/portada.png?fit=1920%2C1080&ssl=1","datePublished":"2020-12-06T09:27:45+00:00","dateModified":"2021-02-25T00:19:42+00:00","author":{"@id":"https:\/\/etcox.com.mx\/blog\/#\/schema\/person\/53ce288bb1ef17e3816423c7f0ef5d54"},"description":"UI significa User Interface o interfaz de usuario. La interfaz es todo lo que vemos en cualquier software o aplicaci\u00f3n.","inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/etcox.com.mx\/blog\/que-es-el-diseno-ui\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/etcox.com.mx\/blog\/que-es-el-diseno-ui\/#primaryimage","url":"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/portada.png?fit=1920%2C1080&ssl=1","contentUrl":"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/portada.png?fit=1920%2C1080&ssl=1","width":1920,"height":1080,"caption":"Que es dise\u00f1o UI"},{"@type":"WebSite","@id":"https:\/\/etcox.com.mx\/blog\/#website","url":"https:\/\/etcox.com.mx\/blog\/","name":"ETC o X - Dise\u00f1o UX | UI","description":"Dise\u00f1o, SEO, Cine y otras cosas","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/etcox.com.mx\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/etcox.com.mx\/blog\/#\/schema\/person\/53ce288bb1ef17e3816423c7f0ef5d54","name":"Etc o X","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/etcox.com.mx\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/05bb4e433ff00fcb4f14a9c5dfb9c72a0f65334f4c5ea48b47320d62b125efb3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/05bb4e433ff00fcb4f14a9c5dfb9c72a0f65334f4c5ea48b47320d62b125efb3?s=96&d=mm&r=g","caption":"Etc o X"},"description":"Dise\u00f1ador UX | UX, nativo de Culiac\u00e1n radicado en Guadalajara. Orgullosamente egresado del Iteso, especialista en SEO y cosas Geeks.","sameAs":["http:\/\/etcox.com.mx","https:\/\/www.facebook.com\/emmanuel.telles.5","https:\/\/instagram.com\/etcox\/","https:\/\/www.linkedin.com\/in\/emmanuel-telles\/?locale=en_US","https:\/\/x.com\/http:\/\/twitter.com\/etc_o_x"],"url":"https:\/\/etcox.com.mx\/blog\/author\/etc\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/etcox.com.mx\/blog\/wp-content\/uploads\/2020\/12\/portada.png?fit=1920%2C1080&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p6OW6I-dI","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/etcox.com.mx\/blog\/wp-json\/wp\/v2\/posts\/850","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etcox.com.mx\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/etcox.com.mx\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/etcox.com.mx\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/etcox.com.mx\/blog\/wp-json\/wp\/v2\/comments?post=850"}],"version-history":[{"count":0,"href":"https:\/\/etcox.com.mx\/blog\/wp-json\/wp\/v2\/posts\/850\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etcox.com.mx\/blog\/wp-json\/wp\/v2\/media\/860"}],"wp:attachment":[{"href":"https:\/\/etcox.com.mx\/blog\/wp-json\/wp\/v2\/media?parent=850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/etcox.com.mx\/blog\/wp-json\/wp\/v2\/categories?post=850"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/etcox.com.mx\/blog\/wp-json\/wp\/v2\/tags?post=850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}