{"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\/tendencies\/flat-design-disseny-pla\/","title":{"rendered":"Flat design (disseny pla)"},"content":{"rendered":"<p>Amb l&#8217;aparici\u00f3 el setembre de 2013 d&#8217;iOS 7, el que fins llavors era una tend\u00e8ncia m\u00e9s en disseny -ja utilitzada per exemple per Microsoft en el sistema operatiu Windows Phone-, va assolir la categoria de moda. Parlem del disseny pla (en angl\u00e8s, <em>flat design<\/em>), un moviment est\u00e8tic que ha aconseguit deixar tocat de mort un dels paradigmes en el disseny d&#8217;interf\u00edcies: l&#8217;esqueuomorfisme.<\/p>\n<p>El disseny pla fa refer\u00e8ncia a un estil en el disseny d&#8217;interf\u00edcies que elimina tots els elements estil\u00edstics que donen la sensaci\u00f3 de tridimensionalitat i se centra en un \u00fas minimalista d&#8217;elements senzills, tipografies i colors plans. Els primers exemples de disseny pla els podem trobar en les d\u00e8cades dels quaranta i cinquanta del segle passat a <a href=\"http:\/\/www.designishistory.com\/home\/swiss\/\">Su\u00efssa<\/a> i <a href=\"http:\/\/en.wikipedia.org\/wiki\/bauhaus\" target=\"_blank\">Alemanya<\/a>. (Font: <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=\"Disseny pla en la nova interf\u00edcie 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 disseny pla es caracteritza pel seg\u00fcent:<\/p>\n<ul>\n<li>Abs\u00e8ncia de textures, ombres, gradients, bisells o qualsevol altre element que provoqui sensaci\u00f3 de profunditat.<\/li>\n<li>Disseny minimalista, en qu\u00e8 els elements \u201crespiren\u201d i no s&#8217;amunteguen els uns damunt dels altres.<\/li>\n<li>\u00das de formes geom\u00e8triques simples (quadrats, rectangles, cercles, etc.) per a estructurar la informaci\u00f3 o dissenyar elements de la interf\u00edcie (botons, icones, etc.).<\/li>\n<li>\u00das destacat de la tipografia: en abs\u00e8ncia d&#8217;elements decoratius, la tipografia adopta un paper protagonista en el disseny pla, amb prefer\u00e8ncia per fam\u00edlies sense serifa (de pal sec), usades en diferents mides i variants.<\/li>\n<li>\u00das de colors uniformes, vibrants. La paleta de colors s&#8217;amplia, per\u00f2 en el seu format m\u00e9s pur (colors <a href=\"http:\/\/es.wikipedia.org\/wiki\/colores_primarios\" target=\"_blank\">primaris<\/a> i <a href=\"http:\/\/es.wikipedia.org\/wiki\/color_secundario\" target=\"_blank\">secundaris<\/a>).<\/li>\n<\/ul>\n<p>Al marge de modes o tend\u00e8ncies est\u00e8tiques, un dels motius pels quals el disseny pla s&#8217;ha popularitzat \u00e9s la seva <strong>m\u00e0xima compatibilitat amb el disseny adaptatiu<\/strong>. Despullat d&#8217;elements decoratius, el disseny pla permet millorar els temps de c\u00e0rrega del web, i reescalar f\u00e0cilment els elements en pantalla.<\/p>\n<p>Tot i aix\u00ed, el disseny pla planteja certs <strong>problemes d&#8217;usabilitat<\/strong>, ja que, per exemple, elimina les pistes visuals que permeten a l&#8217;usuari identificar r\u00e0pidament les zones on es pot fer clic en un web. Per aquest motiu, molts dissenyadors estan optant per un cam\u00ed intermedi, aix\u00f2 \u00e9s \u201cgaireb\u00e9-pla\u201d, en el qual es pren el millor dels dos mons.<\/p>\n<p><strong>M\u00e9s informaci\u00f3 i enlla\u00e7os relacionats:<\/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>Eines i 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>. Inclou una generosa llista d&#8217;UI kits gratu\u00efts i de pagament, com tamb\u00e9 jocs d&#8217;icones i altres recursos \u201cplans\u201d per als nostres dissenys web i el m\u00f2bil.<\/li>\n<li><a href=\"http:\/\/flatdsgn.com\/\" target=\"_blank\">Flatdsgn.com<\/a>. Exemples de disseny pla i recursos gratu\u00efts per als nostres projectes.<\/li>\n<li><a href=\"http:\/\/flatinspire.com\" target=\"_blank\">Flat inspiri<\/a>. \u00c0mplia galeria de projectes de disseny pla, organitzats per categories. \u00datil per a trobar inspiraci\u00f3.<\/li>\n<li><a href=\"http:\/\/www.pinterest.com\/warmarc\/flat-ui-design\/\" target=\"_blank\">Flat UI Design<\/a>. Mur en Pinterest amb exemples d&#8217;aplicacions m\u00f2bils i p\u00e0gines web creades segons criteris de disseny pla.<\/li>\n<li><a href=\"http:\/\/flatuicolors.com\/\" target=\"_blank\">Flat UI colors<\/a>. Elegant paleta de colors plans per a usar en els nostres dissenys.<\/li>\n<\/ul>\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Amb l&#8217;aparici\u00f3 el setembre de 2013 d&#8217;iOS 7, el que fins llavors era una tend\u00e8ncia m\u00e9s en disseny -ja utilitzada per exemple per Microsoft en el sistema operatiu Windows Phone-, va assolir la categoria de moda. Parlem del disseny pla (en angl\u00e8s, flat design), un moviment est\u00e8tic que ha aconseguit deixar tocat de mort un &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/tendencies\/flat-design-disseny-pla\/\" class=\"more-link\">Continua llegint <span class=\"screen-reader-text\">\u00abFlat design (disseny pla)\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\/wp-json\/wp\/v2\/pages\/315","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/comments?post=315"}],"version-history":[{"count":3,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/pages\/315\/revisions"}],"predecessor-version":[{"id":332,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/pages\/315\/revisions\/332"}],"up":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/pages\/653"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/media?parent=315"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/tags?post=315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}