{"id":3829,"date":"2021-10-01T10:41:49","date_gmt":"2021-10-01T08:41:49","guid":{"rendered":"https:\/\/www.sortlist.es\/blog\/?p=3829"},"modified":"2021-10-04T10:48:18","modified_gmt":"2021-10-04T08:48:18","slug":"flat-design","status":"publish","type":"post","link":"https:\/\/www-es.sortlist-test.com\/blog\/flat-design\/","title":{"rendered":"Todo sobre el flat design con cinco ejemplos concretos"},"content":{"rendered":"\n<p>Cada vez m\u00e1s presente en las interfaces web y <a href=\"https:\/\/www.sortlist.es\/blog\/diseno-de-app\/\" target=\"_blank\" rel=\"noreferrer noopener\">m\u00f3viles<\/a>, el flat design es un estilo de dise\u00f1o gr\u00e1fico muy puro. Hoy en d\u00eda, se encuentra cada vez m\u00e1s en las interfaces de usuario (UI) y en el dise\u00f1o web desarrollado por las empresas.<\/p>\n\n\n\n<p>En este art\u00edculo explicamos con m\u00e1s detalle qu\u00e9 es el flat design, de d\u00f3nde viene esta tendencia y damos varios ejemplos concretos.<\/p>\n\n\n\n<p>Antes de entrar en materia, podemos aconsejarle sobre las mejores agencias de dise\u00f1o gr\u00e1fico.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfQu\u00e9 es el flat design?<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Definici\u00f3n<\/h3>\n\n\n\n<p>El flat design es un estilo de dise\u00f1o gr\u00e1fico caracterizado por su minimalismo. Se basa en una est\u00e9tica y un estilo sobrios, con formas sencillas, tipograf\u00eda moderna y una composici\u00f3n con elementos legibles.<\/p>\n\n\n\n<p>El flat design se caracteriza, pues, por la depuraci\u00f3n visual. Esto se hace eliminando todos los elementos superficiales de las interfaces. Las sombras, los reflejos, los efectos diversos (humo, brillo, part\u00edculas, etc.), los detalles y la verosimilitud se van por la ventana.<\/p>\n\n\n\n<p>El objetivo de este estilo es, por tanto, tener el menor n\u00famero posible de elementos.<\/p>\n\n\n\n<p>El propio t\u00e9rmino de \u00abflat\u00bb design hace referencia a esta ausencia de volumen: se basa \u00fanicamente en im\u00e1genes 2D.<\/p>\n\n\n\n<p>Este estilo gr\u00e1fico, utilizado por un n\u00famero creciente de sitios web, es una evoluci\u00f3n de las tendencias art\u00edsticas surgidas en el siglo XX. En particular, el <a href=\"https:\/\/elpais.com\/cultura\/2019\/04\/12\/actualidad\/1555023242_858556.html\" target=\"_blank\" rel=\"noreferrer noopener\">movimiento de la Bauhaus<\/a>, que apareci\u00f3 en Suiza hacia 1920.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.sortlist.fr\/blog\/wp-content\/uploads\/sites\/3\/2021\/04\/flat-design-bauhaus.jpeg\" alt=\"flat design bauhaus\" class=\"wp-image-5346\" width=\"400\" height=\"400\"\/><\/figure>\n\n\n\n<p>La Bauhaus ya se caracterizaba por :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>su minimalismo,<\/li><li>sus colores,<\/li><li>sus fuertes contrastes,<\/li><li>su optimizaci\u00f3n del uso del espacio<\/li><li>y su uso de s\u00edmbolos simplificados en lugar de im\u00e1genes realistas.<\/li><\/ul>\n\n\n\n<p>Este estilo de dise\u00f1o ha evolucionado y ahora es utilizado por muchos dise\u00f1adores y artistas gr\u00e1ficos para crear :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Interfaces de usuario <\/li><li>Blog<\/li><li>P\u00e1ginas web<\/li><li>Sitios web<\/li><li>Etc.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Las caracter\u00edsticas del flat design<\/h3>\n\n\n\n<p>Sabemos qu\u00e9 es el flat design, pero \u00bfc\u00f3mo podemos estar seguros de reconocerlo?<\/p>\n\n\n\n<p>Hay varios elementos que no enga\u00f1an:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Efectos de transparencia en los diferentes elementos gr\u00e1ficos,<\/li><li>Formas y geometr\u00edas inspiradas en el movimiento Bauhaus,<\/li><li>No hay relieve ni profundidad en el dise\u00f1o,<\/li><li>Colores bien definidos,<\/li><li>Muy poca analog\u00eda con los objetos del mundo real representados por el flat design.<\/li><\/ul>\n\n\n\n<p>Estos 5 elementos deber\u00edan ayudarte a reconocer el flat design con seguridad.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">El flat design, heredero del skeuomorfismo<\/h3>\n\n\n\n<p>El flat design se asocia a menudo con una <a href=\"https:\/\/www.sortlist.es\/blog\/paleta-de-colores\/\" target=\"_blank\" rel=\"noreferrer noopener\">paleta de colores<\/a> brillantes y s\u00f3lidos. Los patrones y los gradientes son raros.<\/p>\n\n\n\n<p>El flat design se compara a menudo con su hom\u00f3logo de los a\u00f1os 2000, el skeuomorfismo. Este \u00faltimo se basa en representaciones gr\u00e1ficas intuitivas. La idea de esta tendencia es asimilar la funci\u00f3n de algo en un visual apropiado para la imaginaci\u00f3n com\u00fan.<\/p>\n\n\n\n<p>El flat design se distingue por su sencillez. Mientras que el skeuomorfismo crea una asociaci\u00f3n entre la funcionalidad y un visual conocido (que sirve de punto de referencia y tranquiliza al consumidor), el flat design se centra en la eficacia de su visual.<\/p>\n\n\n\n<p>El flat design juega con las asociaciones preestablecidas en la mente colectiva a trav\u00e9s del skeuomorfismo. Su objetivo es simplificar esta informaci\u00f3n visual para mantener su esencia.<\/p>\n\n\n\n<p>Una muy buena manera de ver la diferencia con el flat design es comparar iOS 6 y iOS 7. De hecho, fue con el lanzamiento de iOS 7 cuando el flat design empez\u00f3 a despuntar.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.sortlist.fr\/blog\/wp-content\/uploads\/sites\/3\/2021\/04\/ios-6-vs-ios-7.jpeg\" alt=\"ios 6 vs ios 7\" class=\"wp-image-5348\" width=\"487\" height=\"423\"\/><\/figure>\n\n\n\n<p>A la izquierda, iOS 6. A la derecha, iOS 7.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Dise\u00f1o material y el semi-flat design: primos del flat design<\/h3>\n\n\n\n<p>La popularidad del flat design ha dado lugar a tendencias gr\u00e1ficas alternativas. Los dos m\u00e1s populares son el dise\u00f1o material y el semi-flat design. A menudo se confunden con el flat design.<\/p>\n\n\n\n<p>El dise\u00f1o de materiales es una tendencia que busca un compromiso entre el flat design y el skeuomorfismo.<\/p>\n\n\n\n<p>El dise\u00f1o material es una forma de dise\u00f1o web que se caracteriza por una est\u00e9tica intermedia. Lo ideal es que se beneficie de la legibilidad del flat design y de la intuitividad del skeuomorfismo.<\/p>\n\n\n\n<p>Esta tendencia naci\u00f3 de las protestas contra el flat design, que se consideraba demasiado simplista y poco representativo.<\/p>\n\n\n\n<p>El semi-flat design es una variante del flat design que utiliza el 3D minimalista para destacar ciertos elementos, como una llamada a la acci\u00f3n. Algunos lo ven como una especie de flat design optimizado, a costa de la pureza de la imagen.<\/p>\n\n\n\n<p>El semi-flat conserva el aspecto de alto contraste y colorido del flat design, con sus formas sencillas.<\/p>\n\n\n\n<p>Sin embargo, la incorporaci\u00f3n del 3D permite crear im\u00e1genes m\u00e1s complejas.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.sortlist.fr\/blog\/wp-content\/uploads\/sites\/3\/2021\/04\/semi-flat-design.png\" alt=\"semi flat design\" class=\"wp-image-5350\"\/><\/figure>\n\n\n\n<p>Ejemplo de semi-flat design<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">La aplicaci\u00f3n del flat design<\/h3>\n\n\n\n<p>En t\u00e9rminos generales, el flat design se utiliza com\u00fanmente en las interfaces web y m\u00f3viles, ya que se asocia fuertemente con una est\u00e9tica moderna.<\/p>\n\n\n\n<p>En los \u00faltimos a\u00f1os, la tendencia del flat design se ha normalizado incluso: se ha convertido en una norma est\u00e9tica, ya sea para sitios web o incluso para un blog.<\/p>\n\n\n\n<p>Las marcas tambi\u00e9n lo utilizan mucho en sus logotipos. En los \u00faltimos diez a\u00f1os, las marcas han tendido a simplificar y racionalizar sus logotipos. Este es el caso, por ejemplo, de la moda.<\/p>\n\n\n\n<p>Ayuda a modernizar la imagen de una empresa o un producto digital.<\/p>\n\n\n\n<p>En este sentido, el flat design contribuye a la comunicaci\u00f3n visual de las empresas que lo utilizan.&nbsp;Le aconsejamos que trabaje con un dise\u00f1ador gr\u00e1fico si desea hacer lo mismo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfPor qu\u00e9 utilizar el flat design?<\/h2>\n\n\n\n<p>Hay varias razones para utilizar el flat design en su <a href=\"https:\/\/www.sortlist.es\/blog\/carta-grafica\/\" target=\"_blank\" rel=\"noreferrer noopener\">carta gr\u00e1fica<\/a>.<\/p>\n\n\n\n<p>En nuestra opini\u00f3n, estas son las dos principales tendencias a tener en cuenta:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>El flat design es m\u00e1s agradable a la vista y m\u00e1s moderno,<\/li><li>Simplifica una interfaz de usuario y, por tanto, simplifica la experiencia del usuario.<\/li><\/ul>\n\n\n\n<p>M\u00e1s all\u00e1 de eso, el flat design tambi\u00e9n acompa\u00f1a a una cierta madurez digital que se est\u00e1 imponiendo. El skeuomorfismo, del que ya hablamos en el art\u00edculo, ha permitido a los usuarios familiarizarse con las nuevas herramientas digitales.<\/p>\n\n\n\n<p>Hoy en d\u00eda, hemos alcanzado una etapa de madurez digital en la que podemos utilizar dise\u00f1os m\u00e1s limpios sin comprometer una buena experiencia de usuario.<\/p>\n\n\n\n<p>Por ello, te recomendamos que utilices el flat design para simplificar tu <a href=\"https:\/\/www.sortlist.es\/blog\/diseno-de-la-interfaz-de-usuario\/\" target=\"_blank\" rel=\"noreferrer noopener\">UI<\/a>, mejorar tu <a href=\"https:\/\/www.sortlist.es\/blog\/que-es-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">UX<\/a> y adoptar un dise\u00f1o acorde con los tiempos. Un dise\u00f1ador gr\u00e1fico o una <a href=\"https:\/\/www.sortlist.es\/diseno-grafico\/espana-es\" target=\"_blank\" rel=\"noreferrer noopener\">agencia de dise\u00f1o gr\u00e1fico <\/a>pueden ayudarle con esto.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">6 buenos ejemplos de flat design<\/h2>\n\n\n\n<p>La gesti\u00f3n de la <a href=\"https:\/\/www.sortlist.es\/blog\/identidad-visual\/\" target=\"_blank\" rel=\"noreferrer noopener\">identidad visual<\/a> de su empresa requiere inspiraci\u00f3n.<\/p>\n\n\n\n<p>En el resto de este art\u00edculo damos 6 ejemplos de flat design. Tambi\u00e9n puedes leer nuestra gu\u00eda completa sobre dise\u00f1o gr\u00e1fico para obtener m\u00e1s informaci\u00f3n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">El logotipo de Google<\/h3>\n\n\n\n<p>Desde que se dise\u00f1\u00f3 su primer logotipo en 1997, Google ha seguido perfeccion\u00e1ndolo. A lo largo de los a\u00f1os, la estructura principal sigue siendo la misma: las 6 letras del nombre del motor de b\u00fasqueda de Google, escritas en color. Desde 1999, cada letra mantiene el mismo color.<\/p>\n\n\n\n<p>Sin embargo, con la tendencia del flat design, todos los elementos superfluos van desapareciendo. En primer lugar, el signo de exclamaci\u00f3n desapareci\u00f3 en el a\u00f1o 2000. Las sombras desaparecen en 2010. Los vol\u00famenes desaparecen en 2013.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.sortlist.fr\/blog\/wp-content\/uploads\/sites\/3\/2021\/04\/evolution-logo-google.jpg\" alt=\"logo google\" class=\"wp-image-4630\" width=\"477\" height=\"358\"\/><\/figure>\n\n\n\n<p>En 2015, con su logotipo actual, Google opta por una simplificaci\u00f3n de su tipograf\u00eda: la \u00abo\u00bb se convierte en un c\u00edrculo perfecto, la \u00abl\u00bb es ahora una simple barra vertical, etc.<\/p>\n\n\n\n<p>La evoluci\u00f3n del logotipo de Google muestra una voluntad de depuraci\u00f3n cada vez m\u00e1s evidente.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">El logo de Twitter<\/h3>\n\n\n\n<p>El ejemplo de Twitter es interesante, ya que su logotipo se hizo m\u00e1s complejo antes de volver a limpiarse con la tendencia del flat design.<\/p>\n\n\n\n<p>El logotipo original de Twitter, creado en 1998, ya presentaba un p\u00e1jaro azul. Se reconoce por su forma, ya que no tiene sombras, vol\u00famenes ni detalles que perfilen las plumas o el pico. S\u00f3lo un punto blanco representa el ojo.<\/p>\n\n\n\n<p>El logotipo se vuelve m\u00e1s complejo en 2007, con la aparici\u00f3n de alas y un color diferente en el vientre del ave. En 2009, el logotipo parece un personaje de dibujos animados. Las patas son de otro color, el pico es de otro color, el ojo se rellena con una pupila con reflejo y se a\u00f1aden detalles (como la presencia de una ceja). Es la expresi\u00f3n del skeuomorfismo: el logotipo se parece cada vez m\u00e1s a un p\u00e1jaro real.<\/p>\n\n\n\n<p>A partir de 2010, la empresa da un paso atr\u00e1s, adoptando un logotipo extremadamente limpio de un a\u00f1o a otro. Ahora es s\u00f3lo una silueta de p\u00e1jaro rellena del mismo color azul. Twitter sigue utilizando un logotipo basado en este modelo.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.sortlist.fr\/blog\/wp-content\/uploads\/sites\/3\/2021\/04\/the-1st-logo-4.jpg\" alt=\"logo twitter\" class=\"wp-image-4631\" width=\"437\" height=\"291\"\/><\/figure>\n\n\n\n<p>El logotipo de Twitter realmente muestra una divisi\u00f3n en la moda y la est\u00e9tica. El a\u00f1o 2010 es un a\u00f1o crucial, en el que vemos el fin del skeuomorfismo y la transici\u00f3n al flat design.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Logotipo de la aplicaci\u00f3n Mail de Apple<\/h3>\n\n\n\n<p>El logotipo de la aplicaci\u00f3n Apple Mail es un ejemplo perfecto de la transici\u00f3n al flat design.<\/p>\n\n\n\n<p>El antiguo logotipo de la aplicaci\u00f3n Apple Mail representaba un sobre para tranquilizar a los usuarios. Con esta t\u00e9cnica se pretend\u00eda indicar la funci\u00f3n de la aplicaci\u00f3n (el intercambio y almacenamiento de correos electr\u00f3nicos) mediante la representaci\u00f3n de un objeto universalmente conocido que se utiliza para una funci\u00f3n similar.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.sortlist.es\/blog\/wp-content\/uploads\/sites\/6\/2021\/10\/sans-titre.png\" alt=\"evoluci\u00f3n logo mail apple\" width=\"335\" height=\"180\"\/><\/figure>\n\n\n\n<p>De este modo, la funcionalidad del logotipo se asocia inmediatamente a un intercambio de cartas virtual.<\/p>\n\n\n\n<p>De esta forma, hace que el acercamiento a la aplicaci\u00f3n sea intuitivo para los novatos en tecnolog\u00eda. Un cielo claro rodea el sobre y llena el marco del logotipo.<\/p>\n\n\n\n<p>En la actualidad, el logotipo se ha adaptado a la tendencia del flat design. El ojo y el cerebro humanos siguen reconociendo un sobre en el logotipo de la aplicaci\u00f3n Mail de Apple, aunque en s\u00ed mismo es ahora s\u00f3lo un rect\u00e1ngulo con tres l\u00edneas del mismo color que el fondo. El fondo se ha vuelto uniformemente azul, recordando el cielo original.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Modern UI, la interfaz de usuario de Windows<\/h3>\n\n\n\n<p>En 2012, Microsoft adopt\u00f3 una nueva est\u00e9tica para la interfaz de usuario de su nuevo sistema operativo: Windows 8. Esta interfaz, denominada \u00abModern UI\u00bb o \u00abMetro\u00bb, representa la quintaesencia de las tendencias de flat design.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.sortlist.es\/blog\/wp-content\/uploads\/sites\/6\/2021\/10\/windows-8-free-download-32-bit-64-bit-iso-1.png\" alt=\"\" class=\"wp-image-3841\" width=\"565\" height=\"317\" srcset=\"https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/10\/windows-8-free-download-32-bit-64-bit-iso-1.png 1366w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/10\/windows-8-free-download-32-bit-64-bit-iso-1-768x432.png 768w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/10\/windows-8-free-download-32-bit-64-bit-iso-1-50x28.png 50w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/10\/windows-8-free-download-32-bit-64-bit-iso-1-288x162.png 288w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/10\/windows-8-free-download-32-bit-64-bit-iso-1-576x324.png 576w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/10\/windows-8-free-download-32-bit-64-bit-iso-1-339x191.png 339w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/10\/windows-8-free-download-32-bit-64-bit-iso-1-678x381.png 678w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/10\/windows-8-free-download-32-bit-64-bit-iso-1-373x210.png 373w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/10\/windows-8-free-download-32-bit-64-bit-iso-1-746x419.png 746w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/10\/windows-8-free-download-32-bit-64-bit-iso-1-691x388.png 691w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/10\/windows-8-free-download-32-bit-64-bit-iso-1-973x547.png 973w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/10\/windows-8-free-download-32-bit-64-bit-iso-1-1048x589.png 1048w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/10\/windows-8-free-download-32-bit-64-bit-iso-1-478x269.png 478w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/10\/windows-8-free-download-32-bit-64-bit-iso-1-956x537.png 956w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/10\/windows-8-free-download-32-bit-64-bit-iso-1-516x290.png 516w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/10\/windows-8-free-download-32-bit-64-bit-iso-1-1032x580.png 1032w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/10\/windows-8-free-download-32-bit-64-bit-iso-1-680x382.png 680w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/10\/windows-8-free-download-32-bit-64-bit-iso-1-1360x765.png 1360w\" sizes=\"auto, (max-width: 565px) 100vw, 565px\" \/><\/figure>\n\n\n\n<p>La Modern UI presenta una interfaz limpia, compuesta por cuadrados y rect\u00e1ngulos anidados entre s\u00ed. Cada uno tiene un color brillante, diferente al de sus vecinos. Todo parece perfectamente ordenado.<\/p>\n\n\n\n<p>Esta interfaz es un excelente ejemplo de flat design, ya que proporciona una verdadera modernizaci\u00f3n de la est\u00e9tica. Tambi\u00e9n tiene un lado pr\u00e1ctico, ya que la compartimentaci\u00f3n de las aplicaciones optimiza la ergonom\u00eda de la interfaz.<\/p>\n\n\n\n<p>Adem\u00e1s, la interfaz puede mostrar muchas aplicaciones sin perder al usuario. Los iconos de cada una de estas aplicaciones utilizan un flat design. As\u00ed, la propia Modern UI tiene un flat design, pero presenta aplicaciones que tambi\u00e9n tienen un flat design, lo que ayuda a reforzar esta sensaci\u00f3n de pureza.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Dots, un sitio web que refleja sus juegos<\/h3>\n\n\n\n<p>Dots es una empresa estadounidense de juegos para m\u00f3viles. Para sus juegos, Dots utiliza el flat design como medio principal para la direcci\u00f3n art\u00edstica. Cabe destacar que el flat design es muy apropiado para las interfaces m\u00f3viles, que se han beneficiado plenamente de su desarrollo.<\/p>\n\n\n\n<p>El sitio web de Dots refleja la imagen de sus juegos: despejado, contrastado, claro y sobrio, es muy legible.<\/p>\n\n\n\n<p>El sitio tambi\u00e9n limita sus recursos de acuerdo con los c\u00f3digos del flat design: no hay animaci\u00f3n, ni detalles superfluos, todo es muy sencillo.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.sortlist.fr\/blog\/wp-content\/uploads\/sites\/3\/2021\/04\/capture-decran-2021-04-16-a-19.36.53.png\" alt=\"Dots p\u00e1gina web\" class=\"wp-image-4633\" width=\"640\" height=\"295\"\/><\/figure>\n\n\n\n<p>Sobre todo, contribuye a la coherencia de la identidad visual global de la empresa. La empresa aplica el flat design en todas partes: en sus productos, en la est\u00e9tica de su p\u00e1gina web y en el dise\u00f1o de su logotipo.<\/p>\n\n\n\n<p>Esto le permite construir una fuerte identidad visual, que refuerza el apego de sus jugadores, la capacidad de la marca para captar su atenci\u00f3n y le ayuda a ser m\u00e1s f\u00e1cilmente reconocible.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">El logotipo de Instagram<\/h3>\n\n\n\n<p>Finalmente, el \u00faltimo nombre y ejemplo que podemos citar es el logotipo de Instagram.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.sortlist.es\/blog\/wp-content\/uploads\/sites\/6\/2021\/10\/sans-titre-1.png\" alt=\"evoluci\u00f3n du logo instagram\" class=\"wp-image-3840\" width=\"455\" height=\"113\" srcset=\"https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/10\/sans-titre-1.png 945w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/10\/sans-titre-1-768x193.png 768w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/10\/sans-titre-1-50x13.png 50w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/10\/sans-titre-1-288x72.png 288w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/10\/sans-titre-1-576x144.png 576w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/10\/sans-titre-1-339x85.png 339w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/10\/sans-titre-1-678x170.png 678w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/10\/sans-titre-1-373x94.png 373w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/10\/sans-titre-1-746x187.png 746w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/10\/sans-titre-1-691x173.png 691w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/10\/sans-titre-1-478x120.png 478w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/10\/sans-titre-1-516x129.png 516w, https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/10\/sans-titre-1-680x171.png 680w\" sizes=\"auto, (max-width: 455px) 100vw, 455px\" \/><\/figure>\n\n\n\n<p>Como puedes ver, fue en 2016 cuando Instagram hizo un cambio de logotipo para acercarse mucho m\u00e1s al flat design. Al final, los tres logotipos anteriores utilizados entre 2010 y 2016 estaban mucho m\u00e1s cerca del skeuomorfismo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfC\u00f3mo hacer una interfaz de usuario exitosa utilizando el flat design?<\/h2>\n\n\n\n<p>Ahora que hemos visto varios ejemplos, \u00bfcu\u00e1les son las reglas para utilizar bien el flat design?<\/p>\n\n\n\n<p>En nuestra opini\u00f3n, hay varias buenas pr\u00e1cticas a seguir:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Aseg\u00farese de que hay coherencia entre la identidad de su marca y el dise\u00f1o que aplica.<\/li><li>Seleccione una paleta de colores que sea relevante para usted, su marca y su p\u00fablico.<\/li><li>Encuentre la manera de destacar los elementos m\u00e1s importantes para la lectura de su interfaz.<\/li><li>Elija un n\u00famero limitado de iconos para no perder al usuario.<\/li><\/ul>\n\n\n\n<p>Adem\u00e1s, un elemento importante es preguntarse si el flat design es realmente relevante para usted. De hecho, un error ser\u00eda decidir utilizar el flat design porque es la norma hoy en d\u00eda, sin preguntarse si es realmente relevante para su marca.<\/p>\n\n\n\n<p>Para tener \u00e9xito, no elija el flat design porque es la norma. El\u00edjalo porque tiene sentido para su marca, su nombre, su sitio web y sus clientes. De hecho, el flat design no se aplica a todas las marcas o sectores.<\/p>\n\n\n\n<p>As\u00ed que t\u00f3mese el tiempo necesario para hacerse preguntas sobre su marca, su sector y sus clientes antes de invertir en la creaci\u00f3n de su dise\u00f1o.<\/p>\n\n\n\n<p>Por \u00faltimo, podemos aconsejarle que trabaje con un dise\u00f1ador gr\u00e1fico y una agencia de dise\u00f1o gr\u00e1fico. Ellos podr\u00e1n ayudarle en todos estos pasos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">En conclusi\u00f3n<\/h2>\n\n\n\n<p>En esta p\u00e1gina hemos visto qu\u00e9 es el flat design, cu\u00e1l es su estilo, c\u00f3mo utilizarlo y hemos presentado 6 ejemplos concretos de su uso.<\/p>\n\n\n\n<p>Dicho esto, si quieres saber m\u00e1s sobre el dise\u00f1o gr\u00e1fico, puedes leer nuestra <a href=\"https:\/\/www.sortlist.es\/diseno-grafico\" target=\"_blank\" rel=\"noreferrer noopener\">gu\u00eda completa sobre el dise\u00f1o gr\u00e1fico<\/a> y el trabajo con una agencia.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cada vez m\u00e1s presente en las interfaces web y m\u00f3viles, el flat design es un estilo de dise\u00f1o gr\u00e1fico muy puro. Hoy en d\u00eda, se encuentra cada vez m\u00e1s en las interfaces de usuario (UI) y en el dise\u00f1o web desarrollado por las empresas. En este art\u00edculo explicamos con m\u00e1s detalle qu\u00e9 es el flat [&hellip;]<\/p>\n","protected":false},"author":17,"featured_media":3830,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[74,1,39,50],"class_list":["post-3829","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-grafico","category-default","category-creative-design","category-diseno-web"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Todo sobre el flat design con cinco ejemplos concretos<\/title>\n<meta name=\"description\" content=\"En este art\u00edculo, explicamos qu\u00e9 es el flat design y damos 5 ejemplos para inspirarte en tus creaciones para que sean exitosas e inspiradoras\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Todo sobre el flat design con cinco ejemplos concretos\" \/>\n<meta property=\"og:description\" content=\"En este art\u00edculo, explicamos qu\u00e9 es el flat design y damos 5 ejemplos para inspirarte en tus creaciones para que sean exitosas e inspiradoras\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-es.sortlist-test.com\/blog\/flat-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Sortlist Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-01T08:41:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-10-04T08:48:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/09\/portada-del-articulo-1-17.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1748\" \/>\n\t<meta property=\"og:image:height\" content=\"1240\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Tancr\u00e8de d&#039;Aspremont Lynden\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tancr\u00e8de d&#039;Aspremont Lynden\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www-es.sortlist-test.com\/blog\/flat-design\/\",\"url\":\"https:\/\/www-es.sortlist-test.com\/blog\/flat-design\/\",\"name\":\"Todo sobre el flat design con cinco ejemplos concretos\",\"isPartOf\":{\"@id\":\"https:\/\/www-es.sortlist-test.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www-es.sortlist-test.com\/blog\/flat-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www-es.sortlist-test.com\/blog\/flat-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/09\/portada-del-articulo-1-17.png\",\"datePublished\":\"2021-10-01T08:41:49+00:00\",\"dateModified\":\"2021-10-04T08:48:18+00:00\",\"author\":{\"@id\":\"https:\/\/www-es.sortlist-test.com\/blog\/#\/schema\/person\/4fcda7fb451a474950b4b5162765184d\"},\"description\":\"En este art\u00edculo, explicamos qu\u00e9 es el flat design y damos 5 ejemplos para inspirarte en tus creaciones para que sean exitosas e inspiradoras\",\"breadcrumb\":{\"@id\":\"https:\/\/www-es.sortlist-test.com\/blog\/flat-design\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www-es.sortlist-test.com\/blog\/flat-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www-es.sortlist-test.com\/blog\/flat-design\/#primaryimage\",\"url\":\"https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/09\/portada-del-articulo-1-17.png\",\"contentUrl\":\"https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/09\/portada-del-articulo-1-17.png\",\"width\":1748,\"height\":1240,\"caption\":\"flat design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www-es.sortlist-test.com\/blog\/flat-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www-es.sortlist-test.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Todo sobre el flat design con cinco ejemplos concretos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www-es.sortlist-test.com\/blog\/#website\",\"url\":\"https:\/\/www-es.sortlist-test.com\/blog\/\",\"name\":\"Sortlist Blog\",\"description\":\"Nuestras Gu\u00edas de Marketing\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www-es.sortlist-test.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www-es.sortlist-test.com\/blog\/#\/schema\/person\/4fcda7fb451a474950b4b5162765184d\",\"name\":\"Tancr\u00e8de d'Aspremont Lynden\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www-es.sortlist-test.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/blog.production.sortlist.cloud\/wp-content\/uploads\/2021\/07\/avatar_user_17_1625133425-96x96.png\",\"contentUrl\":\"https:\/\/blog.production.sortlist.cloud\/wp-content\/uploads\/2021\/07\/avatar_user_17_1625133425-96x96.png\",\"caption\":\"Tancr\u00e8de d'Aspremont Lynden\"},\"description\":\"Content Manager chez Sortlist. Son travail lui donne l'ocasion de combiner ses deux passions : la cr\u00e9ation de contenu et le marketing. Lorsqu'il n'\u00e9crit pas d'articles pour notre blog, il anime le podcast \\\"Beyond Marketing\\\".\",\"url\":\"https:\/\/www-es.sortlist-test.com\/blog\/author\/tancrede\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Todo sobre el flat design con cinco ejemplos concretos","description":"En este art\u00edculo, explicamos qu\u00e9 es el flat design y damos 5 ejemplos para inspirarte en tus creaciones para que sean exitosas e inspiradoras","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Todo sobre el flat design con cinco ejemplos concretos","og_description":"En este art\u00edculo, explicamos qu\u00e9 es el flat design y damos 5 ejemplos para inspirarte en tus creaciones para que sean exitosas e inspiradoras","og_url":"https:\/\/www-es.sortlist-test.com\/blog\/flat-design\/","og_site_name":"Sortlist Blog","article_published_time":"2021-10-01T08:41:49+00:00","article_modified_time":"2021-10-04T08:48:18+00:00","og_image":[{"width":1748,"height":1240,"url":"https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/09\/portada-del-articulo-1-17.png","type":"image\/png"}],"author":"Tancr\u00e8de d'Aspremont Lynden","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Tancr\u00e8de d'Aspremont Lynden","Tiempo de lectura":"12 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www-es.sortlist-test.com\/blog\/flat-design\/","url":"https:\/\/www-es.sortlist-test.com\/blog\/flat-design\/","name":"Todo sobre el flat design con cinco ejemplos concretos","isPartOf":{"@id":"https:\/\/www-es.sortlist-test.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-es.sortlist-test.com\/blog\/flat-design\/#primaryimage"},"image":{"@id":"https:\/\/www-es.sortlist-test.com\/blog\/flat-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/09\/portada-del-articulo-1-17.png","datePublished":"2021-10-01T08:41:49+00:00","dateModified":"2021-10-04T08:48:18+00:00","author":{"@id":"https:\/\/www-es.sortlist-test.com\/blog\/#\/schema\/person\/4fcda7fb451a474950b4b5162765184d"},"description":"En este art\u00edculo, explicamos qu\u00e9 es el flat design y damos 5 ejemplos para inspirarte en tus creaciones para que sean exitosas e inspiradoras","breadcrumb":{"@id":"https:\/\/www-es.sortlist-test.com\/blog\/flat-design\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-es.sortlist-test.com\/blog\/flat-design\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www-es.sortlist-test.com\/blog\/flat-design\/#primaryimage","url":"https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/09\/portada-del-articulo-1-17.png","contentUrl":"https:\/\/www-es.sortlist-test.com\/blog\/wp-content\/uploads\/sites\/6\/2021\/09\/portada-del-articulo-1-17.png","width":1748,"height":1240,"caption":"flat design"},{"@type":"BreadcrumbList","@id":"https:\/\/www-es.sortlist-test.com\/blog\/flat-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www-es.sortlist-test.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Todo sobre el flat design con cinco ejemplos concretos"}]},{"@type":"WebSite","@id":"https:\/\/www-es.sortlist-test.com\/blog\/#website","url":"https:\/\/www-es.sortlist-test.com\/blog\/","name":"Sortlist Blog","description":"Nuestras Gu\u00edas de Marketing","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-es.sortlist-test.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www-es.sortlist-test.com\/blog\/#\/schema\/person\/4fcda7fb451a474950b4b5162765184d","name":"Tancr\u00e8de d'Aspremont Lynden","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www-es.sortlist-test.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/blog.production.sortlist.cloud\/wp-content\/uploads\/2021\/07\/avatar_user_17_1625133425-96x96.png","contentUrl":"https:\/\/blog.production.sortlist.cloud\/wp-content\/uploads\/2021\/07\/avatar_user_17_1625133425-96x96.png","caption":"Tancr\u00e8de d'Aspremont Lynden"},"description":"Content Manager chez Sortlist. Son travail lui donne l'ocasion de combiner ses deux passions : la cr\u00e9ation de contenu et le marketing. Lorsqu'il n'\u00e9crit pas d'articles pour notre blog, il anime le podcast \"Beyond Marketing\".","url":"https:\/\/www-es.sortlist-test.com\/blog\/author\/tancrede\/"}]}},"_links":{"self":[{"href":"https:\/\/www-es.sortlist-test.com\/blog\/wp-json\/wp\/v2\/posts\/3829","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-es.sortlist-test.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-es.sortlist-test.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-es.sortlist-test.com\/blog\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/www-es.sortlist-test.com\/blog\/wp-json\/wp\/v2\/comments?post=3829"}],"version-history":[{"count":0,"href":"https:\/\/www-es.sortlist-test.com\/blog\/wp-json\/wp\/v2\/posts\/3829\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-es.sortlist-test.com\/blog\/wp-json\/wp\/v2\/media\/3830"}],"wp:attachment":[{"href":"https:\/\/www-es.sortlist-test.com\/blog\/wp-json\/wp\/v2\/media?parent=3829"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-es.sortlist-test.com\/blog\/wp-json\/wp\/v2\/categories?post=3829"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}