{"id":1235,"date":"2020-11-24T16:58:24","date_gmt":"2020-11-24T16:58:24","guid":{"rendered":"https:\/\/topwebpuebla.com\/?p=1235"},"modified":"2026-05-07T17:26:12","modified_gmt":"2026-05-07T17:26:12","slug":"que-es-ui-design","status":"publish","type":"post","link":"https:\/\/topwebpuebla.com\/blog\/que-es-ui-design\/","title":{"rendered":"\u00bfQu\u00e9 es UI Design?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">La &#8220;interfaz de usuario&#8221; <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La interfaz de usuario es una fase en la producci\u00f3n Web para crear el dise\u00f1o gr\u00e1fico y sobre todo los elementos de navegaci\u00f3n en <strong><a href=\"https:\/\/topwebpuebla.com\/diseno-paginas-web\" target=\"_blank\" rel=\"noopener\" title=\"\">p\u00e1ginas web<\/a> optimizadas para buscadores <\/strong>o una aplicaci\u00f3n.\u00a0Consiste en los botones en los que los usuarios hacen clic, el texto que leen, las im\u00e1genes, los controles deslizantes, los campos de entrada de texto y todos los dem\u00e1s elementos con los que interact\u00faa el usuario.\u00a0Esto incluye el dise\u00f1o de la pantalla, las transiciones, las animaciones de la interfaz y todas las micro interacciones.\u00a0Se debe dise\u00f1ar cualquier tipo de elemento visual, interacci\u00f3n o animaci\u00f3n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Este trabajo recae en los dise\u00f1adores de UI.&nbsp;Ellos deciden c\u00f3mo se ver\u00e1 la aplicaci\u00f3n.&nbsp;Tienen que elegir esquemas de color y formas de botones: el ancho de las l\u00edneas y las fuentes utilizadas para el texto.&nbsp;Los dise\u00f1adores de UI crean la apariencia de la interfaz de usuario de una aplicaci\u00f3n.<br><br>Aunque no necesaria mente los dise\u00f1adores de UI son dise\u00f1adores gr\u00e1ficos.&nbsp;El principal objetivo de la UI es la est\u00e9tica.&nbsp;Depende de ellos asegurarse de que la interfaz de la aplicaci\u00f3n sea atractiva, visualmente estimulante y con la tem\u00e1tica adecuada para coincidir con el prop\u00f3sito y \/ o personalidad de la aplicaci\u00f3n.&nbsp;Y necesitan asegurarse de que cada elemento visual se sienta unido, tanto est\u00e9ticamente como en funci\u00f3n.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Tabla de contenidos<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Alternar tabla de contenidos\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/topwebpuebla.com\/blog\/que-es-ui-design\/#La_investigacion_es_clave\" >La investigaci\u00f3n es clave<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/topwebpuebla.com\/blog\/que-es-ui-design\/#%C2%BFCual_es_la_diferencia_al_diseno_tradicional\" >\u00bfCu\u00e1l es la diferencia al dise\u00f1o tradicional?<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\" id=\"e310\"><span class=\"ez-toc-section\" id=\"La_investigacion_es_clave\"><\/span>La investigaci\u00f3n es clave<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"a26a\">La investigaci\u00f3n es vital para los dise\u00f1adores de interfaz UI.&nbsp;Es importante la recopilaci\u00f3n tanta buena informaci\u00f3n como sea posible para ayudarlas a elaborar dise\u00f1os adecuados. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"e949\">Generalmente la investigaci\u00f3n se centra en lo que quieren los usuarios.&nbsp;Qu\u00e9 esperan de las aplicaciones del tipo que se est\u00e1n desarrollando.&nbsp;Esta investigaci\u00f3n es a menudo iterativa e incluye sesiones de usabilidad, donde los usuarios reales interactuar\u00e1n con versiones escaladas de ciertas funciones o dise\u00f1os visuales que se est\u00e1n probando para determinar si los dise\u00f1adores est\u00e1n avanzando por el camino correcto.&nbsp;La retroalimentaci\u00f3n se integra con cada iteraci\u00f3n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"c083\">Este proceso implica generar prototipos de baja fidelidad, como representaciones al\u00e1mbricas de elementos de interfaz para medir la respuesta del usuario estrictamente a la funcionalidad que se est\u00e1 probando.&nbsp;Esto tambi\u00e9n puede implicar prototipos visuales r\u00e1pidos y pruebas A \/ B de diferentes versiones posibles de la apariencia de la interfaz para determinar cu\u00e1l prefieren los usuarios.<br><br>Los principales resultados de una investigaci\u00f3n podr\u00eda indicar que las personas prefieren los \u00edconos contorneados en lugar de las formas en negrita.&nbsp;Esta es una taquigraf\u00eda visual con la que las personas se sienten c\u00f3modas y disfrutan.&nbsp;Los dise\u00f1adores de UI har\u00edan bien en incorporar esa lecci\u00f3n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"a42e\">La est\u00e9tica exacta que eligen depende de ellos, pero las &#8220;reglas&#8221; b\u00e1sicas, o la necesidad de ajustarse a las expectativas del usuario, es algo que los dise\u00f1adores ignoran bajo su propio riesgo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"34d6\">Por no decir que no se deben correr riesgos.&nbsp;Los dise\u00f1adores de UI quieren que sus dise\u00f1os de interfaz se destaquen y sean memorables.&nbsp;Pero esto debe equilibrarse con asegurarse de que las personas reconozcan el prop\u00f3sito de los elementos que est\u00e1 colocando en la pantalla.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%C2%BFCual_es_la_diferencia_al_diseno_tradicional\"><\/span>\u00bfCu\u00e1l es la diferencia al dise\u00f1o tradicional?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">El cambio fundamental al adaptar al proceso de producci\u00f3n Web es la importancia que toma el usuario en los momentos de la creaci\u00f3n de elementos gr\u00e1ficos, ya que generalmente poco o casi nada se tomaba en consideraci\u00f3n saber si le agrada un boton o un icono en la Web al usuario que navega en los contenidos. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>La &#8220;interfaz de usuario&#8221; La interfaz de usuario es una fase en la producci\u00f3n Web para crear el dise\u00f1o gr\u00e1fico y sobre todo los elementos de navegaci\u00f3n en p\u00e1ginas web optimizadas para buscadores o una aplicaci\u00f3n.\u00a0Consiste en los botones en los que los usuarios hacen clic, el texto que leen, las im\u00e1genes, los controles deslizantes, &#8230; <a title=\"\u00bfQu\u00e9 es UI Design?\" class=\"read-more\" href=\"https:\/\/topwebpuebla.com\/blog\/que-es-ui-design\/\" aria-label=\"Leer m\u00e1s sobre \u00bfQu\u00e9 es UI Design?\">Leer m\u00e1s<\/a><\/p>\n","protected":false},"author":1,"featured_media":1236,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[8],"tags":[9,10],"class_list":["post-1235","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","tag-diseno-ui","tag-ui-design"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/topwebpuebla.com\/blog\/wp-json\/wp\/v2\/posts\/1235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/topwebpuebla.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/topwebpuebla.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/topwebpuebla.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/topwebpuebla.com\/blog\/wp-json\/wp\/v2\/comments?post=1235"}],"version-history":[{"count":1,"href":"https:\/\/topwebpuebla.com\/blog\/wp-json\/wp\/v2\/posts\/1235\/revisions"}],"predecessor-version":[{"id":11908,"href":"https:\/\/topwebpuebla.com\/blog\/wp-json\/wp\/v2\/posts\/1235\/revisions\/11908"}],"wp:attachment":[{"href":"https:\/\/topwebpuebla.com\/blog\/wp-json\/wp\/v2\/media?parent=1235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/topwebpuebla.com\/blog\/wp-json\/wp\/v2\/categories?post=1235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/topwebpuebla.com\/blog\/wp-json\/wp\/v2\/tags?post=1235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}