{"id":315,"date":"2014-07-29T15:38:15","date_gmt":"2014-07-29T14:38:15","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/?page_id=315"},"modified":"2015-04-07T12:43:58","modified_gmt":"2015-04-07T11:43:58","slug":"flat-design-disseny-pla","status":"publish","type":"page","link":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/tendencies\/flat-design-disseny-pla\/","title":{"rendered":"Flat design (dise\u00f1o plano)"},"content":{"rendered":"<p>Con la aparici\u00f3n en septiembre de 2013 de iOS7, lo que hasta entonces era una tendencia m\u00e1s en dise\u00f1o \u2013ya utilizada por ejemplo por Microsoft en el sistema operativo Windows Phone\u2013 alcanz\u00f3 la categor\u00eda de moda. Hablamos del dise\u00f1o plano (en ingl\u00e9s,<em> flat design<\/em>), un movimiento est\u00e9tico que ha conseguido dejar tocado de muerte uno de los paradigmas en el dise\u00f1o de interfaces: el skeumorfismo. <\/p>\n<p>El dise\u00f1o plano hace referencia a un estilo en el dise\u00f1o de interfaces que elimina todos los elementos estil\u00edsticos que dan la sensaci\u00f3n de tridimensionalidad y se centra en un uso minimalista de elementos sencillos, tipograf\u00edas y colores planos. Los primeros ejemplos de dise\u00f1o plano los podemos encontrar en las d\u00e9cadas de los cuarenta y cincuenta del siglo pasado en <a href=\"http:\/\/www.designishistory.com\/home\/swiss\/\" target=\"_blank\">Suiza<\/a> y <a href=\"http:\/\/en.wikipedia.org\/wiki\/Bauhaus\" target=\"_blank\">Alemania<\/a>. (Fuente: <a href=\"http:\/\/en.wikipedia.org\/wiki\/Flat_UI_Design\" target=\"_blank\">Wikipedia<\/a>).  <\/p>\n<figure id=\"attachment_316\" aria-describedby=\"caption-attachment-316\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/07\/metro_design.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/07\/metro_design-300x168.jpg\" alt=\"Dise\u00f1o plano en la nueva interfaz de Windows (font: Microsoft.com)\" width=\"300\" height=\"168\" class=\"size-medium wp-image-316\" srcset=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/07\/metro_design-300x168.jpg 300w, http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2014\/07\/metro_design.jpg 741w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-316\" class=\"wp-caption-text\">Disseny pla en la nova interf\u00edcie de Windows (font: Microsoft.com)<\/figcaption><\/figure>\n<p>El dise\u00f1o plano se caracteriza por:<\/p>\n<ul>\n<li>Ausencia de texturas, sombras, gradientes, biseles o cualquier otro elemento que provoque sensaci\u00f3n de profundidad. <\/li>\n<li>Dise\u00f1o minimalista, donde los elementos \u201crespiran\u201d y no se amontonan uno encima del otro. <\/li>\n<li>Uso de formas geom\u00e9tricas simples (cuadrados, rect\u00e1ngulos, c\u00edrculos, etc.) para estructurar la informaci\u00f3n o dise\u00f1ar elementos de la interfaz (botones, iconos, etc.). <\/li>\n<li>Uso destacado de la tipograf\u00eda: en ausencia de elementos decorativos, la tipograf\u00eda adopta un papel protagonista en el dise\u00f1o plano, con preferencia por familias sin serifa (de palo seco), usadas en diferentes tama\u00f1os y variantes.<\/li>\n<li>Uso de colores uniformes, vibrantes. La paleta de colores se ampl\u00eda, pero en su formato m\u00e1s puro: colores <a href=\"http:\/\/es.wikipedia.org\/wiki\/Colores_primarios\" target=\"_blank\">primarios<\/a> y <a href=\"http:\/\/es.wikipedia.org\/wiki\/Color_secundario\" target=\"_blank\">secundarios<\/a>. <\/li>\n<\/ul>\n<p>Al margen de modas o tendencias est\u00e9ticas, uno de los motivos por los que el dise\u00f1o plano se ha popularizado es por su <strong>m\u00e1xima compatibilidad con el dise\u00f1o adaptativo<\/strong>. Despojado de elementos decorativos, el dise\u00f1o plano permite mejorar los tiempos de carga de la web y reescalar f\u00e1cilmente los elementos en pantalla. <\/p>\n<p>Aun as\u00ed, el dise\u00f1o plano plantea ciertos <strong>problemas de usabilidad<\/strong>, ya que por ejemplo elimina las pistas visuales que permiten al usuario identificar r\u00e1pidamente las zonas donde se puede hacer clic en una web. Por este motivo, muchos dise\u00f1adores est\u00e1n optando por un camino intermedio, esto es, \u201ccasi-plano\u201d, en el que se toma lo mejor de los dos mundos. <\/p>\n<p><strong>M\u00e1s informaci\u00f3n y enlaces relacionados:<\/strong><br \/>\n&#8211; <a href=\"http:\/\/thenextweb.com\/dd\/2014\/03\/19\/history-flat-design-efficiency-minimalism-made-digital-world-flat\/4\/\" target=\"_blank\">The history of flat design: how efficiency and minimalism turned the digital world flat<\/a><br \/>\n&#8211; <a href=\"http:\/\/designmodo.com\/flat-design-principles\/\" target=\"_blank\">Principles of flat design<\/a><br \/>\n&#8211; <a href=\"http:\/\/www.awwwards.com\/flat-design-an-in-depth-look.html\" target=\"_blank\">Flat design: an in-depth look<\/a><\/p>\n<h1>Herramientas y recursos<\/h1>\n<ul>\n<li><a href=\"http:\/\/www.webdesignerdepot.com\/2013\/09\/the-ultimate-guide-to-flat-design\/\" target=\"_blank\">The ultimate guide to flat design<\/a>. Incluye una generosa lista de UI kits gratuitos y de pago, as\u00ed como juegos de iconos y otros recursos planos para nuestros dise\u00f1os web y m\u00f3vil.   <\/li>\n<li><a href=\"http:\/\/flatdsgn.com\/\" target=\"_blank\">Flatdsgn.com<\/a>. Ejemplos de dise\u00f1o plano y recursos gratuitos (UI kits para nuestros proyectos).<\/li>\n<li><a href=\"http:\/\/flatinspire.com\" target=\"_blank\">Flat inspire<\/a>. Amplia galer\u00eda de proyectos de dise\u00f1o plano, organizados por categor\u00edas. \u00datil para encontrar inspiraci\u00f3n.<\/li>\n<li><a href=\"http:\/\/www.pinterest.com\/warmarc\/flat-ui-design\/\" target=\"_blank\">Flat UI Design<\/a>. Muro en Pinterest con ejemplos de aplicaciones m\u00f3viles y p\u00e1ginas web creadas seg\u00fan criterios de dise\u00f1o plano.<\/li>\n<li><a href=\"http:\/\/flatuicolors.com\/\" target=\"_blank\">Flat UI colors<\/a>. Elegante paleta de colores planos para usar en nuestros dise\u00f1os.<\/li>\n<\/ul>\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Con la aparici\u00f3n en septiembre de 2013 de iOS7, lo que hasta entonces era una tendencia m\u00e1s en dise\u00f1o \u2013ya utilizada por ejemplo por Microsoft en el sistema operativo Windows Phone\u2013 alcanz\u00f3 la categor\u00eda de moda. Hablamos del dise\u00f1o plano (en ingl\u00e9s, flat design), un movimiento est\u00e9tico que ha conseguido dejar tocado de muerte uno &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/tendencies\/flat-design-disseny-pla\/\" class=\"more-link\">Seguir leyendo<span class=\"screen-reader-text\"> \u00abFlat design (dise\u00f1o plano)\u00bb<\/span><\/a><\/p>\n","protected":false},"author":65,"featured_media":0,"parent":653,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"plantilla-pagina.php","meta":{"footnotes":""},"tags":[],"class_list":["post-315","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/pages\/315","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/comments?post=315"}],"version-history":[{"count":3,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/pages\/315\/revisions"}],"predecessor-version":[{"id":332,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/pages\/315\/revisions\/332"}],"up":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/pages\/653"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/media?parent=315"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/tags?post=315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}