{"id":6212,"date":"2018-03-16T16:52:29","date_gmt":"2018-03-16T16:52:29","guid":{"rendered":"https:\/\/www.conectasoftware.com\/?p=6212"},"modified":"2024-02-02T18:18:23","modified_gmt":"2024-02-02T18:18:23","slug":"la-importancia-la-bauhaus-diseno-web","status":"publish","type":"post","link":"https:\/\/www.conectasoftware.com\/magazine\/la-importancia-la-bauhaus-diseno-web\/","title":{"rendered":"La importancia de la Bauhaus en Dise\u00f1o Web"},"content":{"rendered":"\n<p>En 2019 se celebra el centenario de la Bauhaus. Su influencia en el dise\u00f1o web es innegable y es una fuente de inspiraci\u00f3n y de ense\u00f1anza en el dise\u00f1o moderno. El dise\u00f1o gr\u00e1fico tiene mucho que agradecer a la Bauhaus.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Tendencia o influencia<\/h2>\n\n\n\n<p>Cada a\u00f1o, entre diciembre y enero se predicen las tendencias en dise\u00f1o. Al mismo tiempo, hay cosas que no cambian. Si tenemos la usabilidad como foco, los principios de la Bauhaus forman la base de nuestro dise\u00f1o.<br><\/p>\n\n\n\n<p>La Bauhaus es una de las escuelas de arquitectura y dise\u00f1o m\u00e1s representativas del Siglo XX.\u00a0 Sent\u00f3 las bases y los patrones del dise\u00f1o gr\u00e1fico<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">&nbsp;<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">Usabilidad y funcionalidad<\/h3>\n\n\n\n<p>Un buen dise\u00f1o web es atractivo a la vez que funcional.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Menos es m\u00e1s<br>La forma sigue a la funci\u00f3n<br>Simplicidad de formas y colores<\/p>\n<\/blockquote>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/www.conectasoftware.com\/magazine\/wp-content\/uploads\/2018\/03\/edificio-escuela-bauhaus-1024x768.jpg\" alt=\"edificio escuela bauhaus alemania arquitectura arte\" class=\"wp-image-6218\"\/><\/figure><\/div>\n\n\n<p>La Bauhaus es una de las escuelas de arquitectura y dise\u00f1o m\u00e1s representativas del Siglo XX.&nbsp; Sent\u00f3 las bases y los patrones del dise\u00f1o gr\u00e1fico<br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">#1 La Forma sigue a la Funci\u00f3n<\/h3>\n\n\n\n<p>En lo que concierne al dise\u00f1o web y la estrategia de contenido, podemos a\u00f1adir, citando a Jeffrey Zeldman, que \u201cel dise\u00f1o sigue al contenido\u201d.<br>Los adornos no necesarios se eliminan y el dise\u00f1o sigue l\u00edneas y elementos geom\u00e9tricos.<br>El dise\u00f1o y el arte no son meros ornamentos. El dise\u00f1o industrial de los objetos que usamos a diario, m\u00e1s que grandes obras, son peque\u00f1os, cotidianos, \u00fatiles y funcionales.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">#2 La tipograf\u00eda<\/h3>\n\n\n\n<p>Herbert Bayer se encarg\u00f3 del dise\u00f1o de un Font sin adornos. El enfoque en una comunicaci\u00f3n visual, Font Sans Serif, textos en horizontal, vertical y diagonal son algunas aportaciones claves. El texto se escribe en may\u00fasculas o min\u00fasculas, pero no en combinaciones de ellas, como si fueran un texto tradicional.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Nombres destacados de la escuela Bauhaus<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Paul Klee<\/strong>, uno de los pintores m\u00e1s importantes de la primera mitad del Siglo XX<\/li>\n\n\n\n<li><strong>Vasili Kandinsky<\/strong>, pintor ruso, la importancia de los elementos geom\u00e9tricos y como el posicionamiento de color cambia el significado<\/li>\n\n\n\n<li><strong>Walter Gropius<\/strong>, el fundador en 1919<\/li>\n\n\n\n<li><strong>Ludwig Mies van der Rohe<\/strong>, fue el \u00faltimo director de la escuela<\/li>\n\n\n\n<li><strong>Marianne Brandt<\/strong>, dise\u00f1adora industrial, la lampara Kandem es solo uno de sus numerosos dise\u00f1os que hoy forman parte de la vida cotidiana<\/li>\n\n\n\n<li><strong>Laszlo Moholy-Nagy<\/strong>, pintor y fot\u00f3grafo, coeditor de las revistas de la escuela Bauhaus, quiz\u00e1s el m\u00e1s multidisciplinar, integrando tipograf\u00eda e imagen para una nueva literatura visual<\/li>\n\n\n\n<li><strong>Lilly Reich<\/strong>, dise\u00f1adora y arquitecta, profesora, interiores y telas<\/li>\n\n\n\n<li><strong>Annie Alberts<\/strong>, artista textil, revolucion\u00f3 los tejidos<\/li>\n\n\n\n<li><strong>Herbert Bayer<\/strong>, tipograf\u00eda sans serif, el Universal Typeface<\/li>\n\n\n\n<li><strong>Johannes Itten<\/strong>, public\u00f3 El Arte del Color, una rueda de 12 colores y sus efectos psicol\u00f3gicos<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"536\" src=\"https:\/\/www.conectasoftware.com\/magazine\/wp-content\/uploads\/2018\/03\/lampara-kandem-escuela-bauhaus-minimalismo--1024x536.jpg\" alt=\"lampara kandem escuela bauhaus minimalismo\" class=\"wp-image-6220\"\/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">&nbsp;<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">Los a\u00f1os 1919-1933, entre Weimar, Dessau y Berlin<\/h3>\n\n\n\n<p>La historia de la propia escuela Bauhaus es corta, ya que vivi\u00f3 entre las dos guerras mundiales.<br>La escuela Bauhaus se funda en 1919 a mano de Walter Gropius en Weimar, Alemania. En 1925 se mudan a la ciudad de Dessau. Reubican durante el \u00faltimo a\u00f1o a Berlin, antes de verse obligados a cerrar en 1933, bajo la presi\u00f3n del r\u00e9gimen Nazi.<br>La escuela animaba la multidisciplinariedad, as\u00ed se encontraban en la misma escuela departamentos de<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>dise\u00f1o industrial<\/li>\n\n\n\n<li>bellas artes<\/li>\n\n\n\n<li>fotograf\u00eda<\/li>\n\n\n\n<li>dise\u00f1o textil<\/li>\n\n\n\n<li>tipograf\u00eda<\/li>\n\n\n\n<li>dise\u00f1o gr\u00e1fico<\/li>\n\n\n\n<li>arquitectura<\/li>\n<\/ul>\n\n\n\n<p>Dise\u00f1os asequibles, funcionales y bonitos compon\u00edan la misi\u00f3n de la escuela, rompiendo con la est\u00e9tica victoriana, de objetos con muchos adornos y altos costes de fabricaci\u00f3n.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Arquitectos, escultores, pintores, &#8230; debemos regresar al trabajo manual &#8230; Establezcamos, por lo tanto, una nueva cofrad\u00eda de artesanos, libres de esa arrogancia que divide a las clases sociales y que busca erigir una barrera infranqueable entre los artesanos y los artistas<br>Walter Gropius<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Qu\u00e9 tiene que ver la Bauhaus con el dise\u00f1o web<\/h2>\n\n\n\n<p>Aparte de su importancia general en el dise\u00f1o gr\u00e1fico como lo conocemos, tambi\u00e9n se puede observar en las caracter\u00edsticas y necesidades del dise\u00f1o web.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Dise\u00f1o responsive y UX<\/h3>\n\n\n\n<p>En cuesti\u00f3n de 25 a\u00f1os hemos pasado de p\u00e1ginas web est\u00e1ticas dise\u00f1adas para sobremesas a los <a href=\"https:\/\/www.conectasoftware.com\/magazine\/diseno-web\/adaptacion-dispositivos-moviles-los-disenos-responsive\">dise\u00f1os responsive<\/a>, interactivos y \u201cmobile-first\u201d<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/www.conectasoftware.com\/magazine\/diseno-web\/25-anos-de-diseno-web-tendencias-y-soluciones\">25 a\u00f1os de dise\u00f1o web<\/a><\/p>\n\n\n\n<p>El n\u00famero de usuarios que navegan a las p\u00e1ginas web desde m\u00f3viles no para de aumentar. Como consecuencia, las p\u00e1ginas que no se adaptan, pierden visitas.<br>Adem\u00e1s, interactuamos no solo por medio de las p\u00e1ginas web sino tambi\u00e9n por los diversos canales de comunicaci\u00f3n, email, video y redes sociales.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">&nbsp;<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">&nbsp;<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">#Back to the basics<\/h3>\n\n\n\n<p><em>\u00bfComo trabajar con un dise\u00f1o multicanal y multidispositivo?<\/em><br><em>Volviendo a la escuela<\/em><\/p>\n\n\n\n<p><strong>A la escuela Bauhaus<\/strong>. Volver a aprender y aplicar las reglas, volver a los b\u00e1sicos, adaptar y reinterpretar el dise\u00f1o para responder a las nuevas posibilidades y las exigencias que conlleva.<br>Una p\u00e1gina web puede ser bonita, muy bonita incluso.<br>\u00bfPero es navegable?<br>\u00bfOfrece al usuario lo que esta busca?<br>\u00bfEs posible filtrar los productos, encontrar las ofertas y abrir un chat para resolver preguntas r\u00e1pidas?<\/p>\n\n\n\n<p>La forma debe seguir a la funci\u00f3n, el dise\u00f1o al contenido. Todo ello tiene la experiencia del usuario en el foco central.<br>As\u00ed influyen las ense\u00f1anzas de la Bauhaus en el dise\u00f1o web moderno.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">#1 CSS \u2013 La forma debe seguir a la funci\u00f3n<\/h3>\n\n\n\n<p>Pasamos de las p\u00e1ginas web est\u00e1ticas al CSS, ligero y responsive.<br>\u00bfQu\u00e9 es CSS? El&nbsp;Cascade Style Sheet&nbsp;(hojas de estilo en cascada) es un lenguaje de dise\u00f1o gr\u00e1fico, que define la apariencia de un documento escrito en un lenguaje de marcado, como es el caso del HTML.<br>As\u00ed se puede separar la estructura del contenido del documento de la forma de presentaci\u00f3n. Esto, a su vez, conlleva una mayor flexibilidad para adaptar el contenido a diferentes medios y tama\u00f1os de visualizaci\u00f3n, como puede ser el tama\u00f1o de pantalla o una reproducci\u00f3n por voz.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">#2 La geometr\u00eda \u2013 El dise\u00f1o plano<\/h3>\n\n\n\n<p>La belleza de las formas geom\u00e9tricas puras se ve reflejada en los <em>Flat Designs<\/em>, que se adaptan especialmente bien a los diferentes dispositivos.<br>Las formas geom\u00e9tricas minimalistas prescinden de adornos innecesarios y distractores, por lo que son f\u00e1cilmente reconocibles. Esto, a su vez, mejora la experiencia de los usuarios.<br>\u00bfQu\u00e9 no encontramos en un dise\u00f1o plano? Degradados, sombras, texturas, biseles, \u2026<br>El redise\u00f1o de Microsoft a partir de Windows 8 es t\u00edpico del dise\u00f1o plano.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">#3 La relaci\u00f3n entre color y forma \u2013 el Bot\u00f3n de Enviar<\/h3>\n\n\n\n<p>El pintor Wassily Kandinsky, uno de los profesores m\u00e1s conocidos de la escuela Bauhaus, demostr\u00f3 la relaci\u00f3n entre el color y la forma. Propon\u00eda que ciertas formas y colores se complementan y refuerzan el mensaje a transmitir.<\/p>\n\n\n\n<p><em>Determinados colores son realzados por determinadas formas y mitigados por otras. Un tri\u00e1ngulo pintado de amarillo, un c\u00edrculo de azul, un cuadrado de verde, otro tri\u00e1ngulo de verde, un c\u00edrculo de amarillo, un cuadrado de azul, etc., todos son entes totalmente diferentes y que act\u00faan de manera completamente diferente. <\/em><\/p>\n\n\n\n<p class=\"has-text-align-right\"><em>Vasili Kandinsky<\/em><\/p>\n\n\n\n<p>El bot\u00f3n verde y alargado al final de un formulario online, con la palabra \u201cEnviar\u201d es un ejemplo de la ense\u00f1anza de Kandinsky.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">#4 Paletas de colores limitadas<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/instagram.com\/conectasoftware\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"713\" src=\"https:\/\/www.conectasoftware.com\/magazine\/wp-content\/uploads\/2018\/03\/teoria-de-colores-adobe-color-cc.jpg\" alt=\"teoria de colores adobe color cc conecta software instagram\" class=\"wp-image-6215\"\/><\/a><\/figure><\/div>\n\n\n<p>La rueda de 12 colores de Johannes Itten explicaba como mezclar matices y sombras. Adem\u00e1s, Itten estudiaba el efecto psicol\u00f3gico que tienen los colores.<br><\/p>\n\n\n\n<p>Los colores son fuerzas, energ\u00edas radiantes que nos afectan de manera positiva o negativa, nos percatemos o no.<\/p>\n\n\n\n<p><br><a href=\"https:\/\/color.adobe.com\/es\/\" target=\"_blank\" rel=\"noopener noreferrer\">Adobe Color CC<\/a> es una aplicaci\u00f3n que ayuda a dar armon\u00eda de color a nuestros dise\u00f1os. A partir de un color inicial, nos propone colores complementarios, an\u00e1logos, monocrom\u00e1ticos, compuestos, en triada y tonos del mismo color.<br>As\u00ed podemos asegurarnos de combinar correctamente los colores para un efecto armonioso.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">#5 Sans Serif y Universal Font \u2013 La tipograf\u00eda<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"780\" src=\"https:\/\/www.conectasoftware.com\/magazine\/wp-content\/uploads\/2018\/03\/bauhaus-dessau-cartel-font-tipografia.jpg\" alt=\"bauhaus dessau cartel font tipografia\" class=\"wp-image-6219\"\/><\/figure><\/div>\n\n\n<p>Fiel a la eliminaci\u00f3n de adornos y elementos innecesarios, la importancia de la tipograf\u00eda en la comunicaci\u00f3n visual. Del Universal Typeface de Herbert Bayer al <a href=\"https:\/\/www.fonts.com\/font\/linotype\/futura\" target=\"_blank\" rel=\"noopener noreferrer\">Futura<\/a> de Paul Renner, las letras dejan atr\u00e1s la estilizaci\u00f3n y los ornamentos.<br><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tipograf\u00eda Sans Serif<\/li>\n\n\n\n<li>Contenido dise\u00f1ado sobre jerarqu\u00eda<\/li>\n\n\n\n<li>Uso intencional de espacio en blanco<\/li>\n\n\n\n<li>Equilibrio asim\u00e9trico de elementos<\/li>\n<\/ul>\n\n\n\n<p>Microsoft incluye en su Creators Update 2017, un nuevo Font, \u201c<a href=\"https:\/\/blogs.windows.com\/windowsexperience\/2017\/08\/23\/announcing-windows-10-insider-preview-build-16273-pc\/#W7H08j3PFOOUMclw.97\" target=\"_blank\" rel=\"noopener noreferrer\">Bahnschrift<\/a>\u201d, una digitalizaci\u00f3n del <a href=\"https:\/\/www.linotype.com\/1245388\/din-1451-family.html\" target=\"_blank\" rel=\"noopener noreferrer\">DIN 1451<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">#6 De la Typofoto a la infograf\u00eda<\/h3>\n\n\n\n<p>La s\u00edntesis de tipograf\u00eda y fotograf\u00eda es una propuesta del pintor h\u00fangaro Laszlo Moholy-Nagy.<br>Hoy en d\u00eda lo conocemos como dise\u00f1o gr\u00e1fico y se expresa a la perfecci\u00f3n en forma de infograf\u00edas.<br>La infograf\u00eda es una herramienta de comunicaci\u00f3n que es especialmente popular en las redes sociales y los sitios web. Es una representaci\u00f3n visual, que une diversos tipos de gr\u00e1ficos, pictogramas y textos para representar relaciones entre conceptos y resumir los puntos principales de ideas complejas.<br>Cuando navegamos por la red, es principalmente para buscar informaci\u00f3n y no para leer largos p\u00e1rrafos de texto.<br>Por eso, la infograf\u00eda es una herramienta muy atractiva que ha sido adoptada en las estrategias de marketing de contenidos.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">#7 La multidisciplinariedad<\/h3>\n\n\n\n<p>La escuela Bauhaus reun\u00eda a arquitectos, pintores, fot\u00f3grafos y dise\u00f1adores textiles. Las colaboraciones entre estos diferentes campos eran fundamentales para las ideas innovadoras que aportar\u00eda la Bauhaus al futuro del dise\u00f1o.<br>Los dise\u00f1adores de hoy destacan por su versatilidad, por encontrar inspiraci\u00f3n en diversas fuentes y por colaborar con otros profesionales. As\u00ed, hay una comunicaci\u00f3n continua entre dise\u00f1adoras y escritores, siempre con la experiencia del usuario en el foco central.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"774\" src=\"https:\/\/www.conectasoftware.com\/magazine\/wp-content\/uploads\/2018\/03\/window-546719_1280-copia-1024x774.jpg\" alt=\"ventana bauhaus arquitectura minimalista\" class=\"wp-image-6221\"\/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\">&nbsp;<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\">Ejemplos de la influencia de la Bauhaus en el dise\u00f1o actual<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Ikea<\/h3>\n\n\n\n<p>Funcionalidad, est\u00e9tica y producci\u00f3n industrial para unos muebles asequibles.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Apple<\/h3>\n\n\n\n<p>Referente en el dise\u00f1o actual. Si deciden incluir un elemento nuevo en un m\u00f3vil, como el Notch en el IPhone X, sabemos que otras marcas no tardaran en copiarlo. Funcional y elegante.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Lamy<\/h3>\n\n\n\n<p>Mobiliario, tecnolog\u00eda, pero tambi\u00e9n plumas estilogr\u00e1ficas. <a href=\"https:\/\/www.lamy.com\/content\/the_company\/brand\/design\/index_eng.html\" target=\"_blank\" rel=\"noopener noreferrer\">Lamy<\/a> es una marca alemana, l\u00edder a nivel mundial de reconocido prestigio. Sus productos son fieles a la funcionalidad, durabilidad y atractivo visual. Los dise\u00f1os de las plumas no han cambiado mucho desde su fundaci\u00f3n en 1930, pero siguen marcando tendencia.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En 2019 se celebra el centenario de la Bauhaus. Su influencia en el dise\u00f1o web es innegable y es una fuente de inspiraci\u00f3n y de ense\u00f1anza en el dise\u00f1o moderno. El dise\u00f1o gr\u00e1fico tiene mucho que agradecer a la Bauhaus. Tendencia o influencia Cada a\u00f1o, entre diciembre y enero se predicen las tendencias en dise\u00f1o. [&hellip;]<\/p>\n","protected":false},"author":318,"featured_media":6213,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[23],"tags":[],"class_list":{"0":"post-6212","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-diseno-web"},"_links":{"self":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts\/6212","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/users\/318"}],"replies":[{"embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/comments?post=6212"}],"version-history":[{"count":3,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts\/6212\/revisions"}],"predecessor-version":[{"id":40035,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts\/6212\/revisions\/40035"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/media\/6213"}],"wp:attachment":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/media?parent=6212"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/categories?post=6212"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/tags?post=6212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}