{"id":599,"date":"2015-03-25T13:33:15","date_gmt":"2015-03-25T12:33:15","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/?page_id=599"},"modified":"2015-03-25T13:33:40","modified_gmt":"2015-03-25T12:33:40","slug":"treballar-amb-ui-kits","status":"publish","type":"page","link":"https:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/prototipatge\/treballar-amb-ui-kits\/","title":{"rendered":"Trabajar con UI kits"},"content":{"rendered":"<p><\/p>\n<h2>\u00bfQu\u00e9 es un UI kit?<\/h2>\n<p>Un UI kit (del ingl\u00e9s <em>user interface kit<\/em>) es un archivo que incluye varios <strong>elementos ya predise\u00f1ados<\/strong> (como por ejemplo: botones, iconos, tablas, formularios, <em>sliders<\/em>, etc.) para ayudarnos en el desarrollo de nuestras interfaces de usuario. Se pueden editar f\u00e1cilmente (los elementos en un UI kit suelen estar hechos con capas), de manera que podemos personalizarlos o <strong>adaptarlos a nuestras necesidades<\/strong> (cambiar tama\u00f1o, color, etc.).<\/p>\n<p>El <strong>formato habitual<\/strong> de los UI kits es PSD, un tipo de archivo que puede editarse con el programa Adobe Photoshop. Tambi\u00e9n podemos encontrarlos en formato Illustrator, HTML5 y CSS3.<\/p>\n<h2>\u00bfPara qu\u00e9 sirve un UI kit?<\/h2>\n<p>Muchas veces, el uso de un UI kit nos ayuda a mejorar nuestros dise\u00f1os o explorar nuevos caminos, ya que al descargarnos un UI kit entero podemos descubrir elementos o soluciones a problemas de dise\u00f1o en los que ni siquiera hab\u00edamos pensado.<\/p>\n<p>Para quienes no saben dise\u00f1ar, adem\u00e1s, los UI kits son un magn\u00edfico recurso para hacer sus prototipos m\u00e1s atractivos, o simplemente dotarlos de mayor realismo.<\/p>\n<p>Pero, sobre todo, un UI kit sirve para <strong>ahorrar tiempo y dinero<\/strong>, ya que supone un magn\u00edfico punto de partida sobre el que empezar a trabajar nuestra interfaz, sin necesidad de dise\u00f1ar desde cero todos los elementos y detalles. <\/p>\n<blockquote><p>Cuando estamos en la fase de prototipado, los UI kits resultan muy \u00fatiles para \u201cvestir\u201d r\u00e1pidamente nuestro trabajo y ayudar a nuestros clientes a tener una idea m\u00e1s clara de c\u00f3mo ser\u00e1 el producto final. <\/p><\/blockquote>\n<h2>\u00bfD\u00f3nde encontrar UI kits?<\/h2>\n<p>Las p\u00e1ginas web especializadas en dise\u00f1o suelen publicar regularmente enlaces a UI kits gratuitos para su descarga. Basta con una sencilla b\u00fasqueda en internet (por ejemplo: <a href=\"https:\/\/www.google.com\/search?q=free+psd+ui+kit\" target=\"_blank\">free psd ui kit<\/a>) para tener acceso a estos recursos. <\/p>\n<p>Especialmente c\u00e9lebres en la red son los PSD de <a href=\"http:\/\/www.teehanlax.com\" target=\"_blank\">teehan+lax<\/a> con la interfaz gr\u00e1fica de iOS 7 (GUI kit) para <a href=\"http:\/\/www.teehanlax.com\/tools\/iphone\/\" target=\"_blank\">iPhone<\/a> y <a href=\"http:\/\/www.teehanlax.com\/tools\/ipad\/\" target=\"_blank\">iPad<\/a>, lo que nos permite crear prototipos r\u00e1pidamente en este sistema operativo.  <\/p>\n<p><strong>Enlaces relacionados:<\/strong><br \/>\n&#8211; <a href=\"http:\/\/designmodo.com\/ui-kit-use\/\" target=\"_blank\">What is UI kit and why you should use it<\/a><br \/>\n&#8211; <a href=\"http:\/\/365psd.com\/\" target=\"_blank\">365psd, download a free PSD every day<\/a><br \/>\n&#8211; <a href=\"http:\/\/freebiesbug.com\/\" target=\"_blank\">Freebiesbug, latest PSDs and other resources for designers<\/a><br \/>\n&#8211; <a href=\"https:\/\/dribbble.com\/search?q=psd+ui+kit\" target=\"_blank\"><em>UI kits<\/em> en dribbble<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>\u00bfQu\u00e9 es un UI kit? Un UI kit (del ingl\u00e9s user interface kit) es un archivo que incluye varios elementos ya predise\u00f1ados (como por ejemplo: botones, iconos, tablas, formularios, sliders, etc.) para ayudarnos en el desarrollo de nuestras interfaces de usuario. Se pueden editar f\u00e1cilmente (los elementos en un UI kit suelen estar hechos con &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/prototipatge\/treballar-amb-ui-kits\/\" class=\"more-link\">Seguir leyendo<span class=\"screen-reader-text\"> \u00abTrabajar con UI kits\u00bb<\/span><\/a><\/p>\n","protected":false},"author":65,"featured_media":0,"parent":8,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"plantilla-pagina.php","meta":{"footnotes":""},"tags":[],"class_list":["post-599","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/pages\/599","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/comments?post=599"}],"version-history":[{"count":2,"href":"https:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/pages\/599\/revisions"}],"predecessor-version":[{"id":601,"href":"https:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/pages\/599\/revisions\/601"}],"up":[{"embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/pages\/8"}],"wp:attachment":[{"href":"https:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/media?parent=599"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/tags?post=599"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}