{"id":263552,"date":"2024-03-10T06:48:00","date_gmt":"2024-03-10T03:48:00","guid":{"rendered":"https:\/\/inform.click\/cuando-y-como-usar-el-minimalismo-en-el-diseno-de-sitios-web\/"},"modified":"2024-03-10T06:48:00","modified_gmt":"2024-03-10T03:48:00","slug":"cuando-y-como-usar-el-minimalismo-en-el-diseno-de-sitios-web","status":"publish","type":"post","link":"https:\/\/inform.click\/es\/cuando-y-como-usar-el-minimalismo-en-el-diseno-de-sitios-web\/","title":{"rendered":"Cu\u00e1ndo y c\u00f3mo usar el minimalismo en el dise\u00f1o de sitios web"},"content":{"rendered":"<p>\n  Primero eliminemos un concepto err\u00f3neo sobre el minimalismo. El hecho de que haya menos para ver no significa que sea m\u00e1s f\u00e1cil. De hecho, es todo lo contrario. Cuanto menos tenga, m\u00e1s tiempo tendr\u00e1 que gastar para asegurarse de que cada elemento que tiene est\u00e9 justo en el dinero.\n<\/p>\n<p>\n  Despu\u00e9s de todo, si tiene una interfaz abarrotada, si algo est\u00e1 alineado ligeramente a la izquierda del centro, o una fuente que no es \u00f3ptima para lo que est\u00e1 usando, probablemente ni siquiera se notar\u00e1 entre los otros detalles.\n<\/p>\n<p>\n  Sin embargo, eso no ser\u00e1 cierto si est\u00e1 utilizando un dise\u00f1o web minimalista, ya que no hay nada detr\u00e1s de su error o mala elecci\u00f3n para esconderse. Se destacar\u00e1n con detalles deslumbrantes, como un letrero de ne\u00f3n en una casa japonesa. Lo que eso significa es que si solo est\u00e1s tratando de armar una p\u00e1gina, el minimalismo no es el camino a seguir. El minimalismo es para los perfeccionistas, el obsesivo-compulsivo, el tipo de dise\u00f1ador web centrado en el l\u00e1ser, que se queda despierto hasta las tres de la ma\u00f1ana para obtener ese t\u00edtulo justo. Si ese no eres t\u00fa, entonces no es para ti.\n<\/p>\n<p>\n  Si es as\u00ed, sigue leyendo, \u00a1sigue leyendo! Por la madriguera del conejo vamos.\n<\/p>\n<h4>\n  Espacio negativo<br \/>\n<\/h4>\n<p>\n  Comencemos por ver qu\u00e9 es lo que m\u00e1s tendr\u00e1 un sitio web minimalista: espacio negativo, aunque es posible que lo conozcas como &#8216;el fondo'. Excepto, por supuesto, que en el dise\u00f1o minimalista no est\u00e1 &#8216;atr\u00e1s' en absoluto. En cambio, est\u00e1 al frente y al centro, donde juega un papel vital, ya que manipula el flujo visual del usuario.\n<\/p>\n<p>\n  El poder del espacio negativo es que cuanto m\u00e1s tengas, m\u00e1s aparecer\u00e1 cualquier otra cosa que tengas en la p\u00e1gina. Esta es la raz\u00f3n por la que los dise\u00f1adores industriales suelen utilizar dise\u00f1os minimalistas. De esa manera, sus productos, en lugar de desvanecerse en todo lo dem\u00e1s, obtendr\u00e1n la atenci\u00f3n que est\u00e1n buscando. Y como eso es lo que est\u00e1n tratando de vender o al menos exhibir, hace que este enfoque sea muy atractivo para ellos y para cualquier otra persona que tenga objetos est\u00e1ticos para mostrar, como dise\u00f1adores de interiores y fot\u00f3grafos.\n<\/p>\n<p>\n  El espacio negativo puede ser una herramienta poderosa para crear un oasis de calma, as\u00ed como para que los usuarios no se sientan abrumados. Esta es la raz\u00f3n por la que los spas y centros de bienestar a menudo eligen este tipo de dise\u00f1o.\n<\/p>\n<p>\n  Tenga en cuenta que el espacio negativo no significa que no haya nada all\u00ed. Obviamente, el espacio debe llenarse con algo y, aunque el blanco es una opci\u00f3n obvia, est\u00e1 lejos de ser la \u00fanica. Adem\u00e1s, los diferentes colores tienen efectos completamente diferentes en los usuarios, as\u00ed que aseg\u00farese de dedicar algo de tiempo a la investigaci\u00f3n. Una cosa que me gustar\u00eda se\u00f1alar es que no eliges un color demasiado saturado. Este es un error b\u00e1sico que cometen muchos dise\u00f1adores primerizos. El problema es que puede ser bastante doloroso para los usuarios, lo que hace que una de las grandes ventajas del minimalismo sea nula y sin efecto.\n<\/p>\n<h4>\n  Fotos<br \/>\n<\/h4>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-266271-63825873036e1.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-266271-63825873036e1.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Si solo un color es demasiado bueno, existe, por supuesto, la opci\u00f3n de optar por una foto de alg\u00fan tipo. Por supuesto, si elige una imagen, aseg\u00farese de que se adhiera al esp\u00edritu minimalista que busca. La imagen no debe estar demasiado recargada.\n<\/p>\n<p>\n  Lo digo de dos maneras.\n<\/p>\n<ol>\n<li>Obviamente, aseg\u00farese de que la foto no est\u00e9 demasiado abarrotada de objetos o personas, ya que esto anular\u00e1 todo el prop\u00f3sito de su dise\u00f1o minimalista.\n  <\/li>\n<li>Sin embargo, eso no es suficiente, ya que la implicaci\u00f3n de un movimiento r\u00e1pido o peligro es igualmente capaz de atraer la atenci\u00f3n hacia la imagen y alejarla del elemento principal que est\u00e1 tratando de mostrar. De hecho, incluso mostrar una emoci\u00f3n negativa puede distraer a las personas de lo que realmente quiere que se concentren.\n  <\/li>\n<\/ol>\n<p>\n  Por eso, al navegar por webs minimalistas, ver\u00e1s muchas fotos con fondos muy neutros y est\u00e1ticos. Aqu\u00ed hay algunos <a href=\"http:\/\/photography.tutsplus.com\/articles\/less-is-more-50-examples-of-minimalist-photography--photo-3914\" target=\"_blank\" rel=\"noopener\">grandes ejemplos<\/a>.\n<\/p>\n<h4>\n  Tipograf\u00eda<br \/>\n<\/h4>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-266271-63825875bcdc7.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-266271-63825875bcdc7.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Puede eliminar muchas cosas de su p\u00e1gina minimalista, como una barra de men\u00fa, botones de redes sociales y anuncios, pero una cosa de la que no puede prescindir son las palabras. Eventualmente, vas a necesitar un poco. Pero, \u00bfc\u00f3mo los presentas? Debes considerar con mucho cuidado qu\u00e9 fuente decides usar (y si decides hacer la tuya propia), especialmente teniendo en cuenta que diferentes fuentes evocar\u00e1n diferentes emociones y diferentes estados de \u00e1nimo.\n<\/p>\n<p>\n  Por ejemplo, las fuentes serif (aquellas en las que los bits ondulados sobresalen por debajo y por encima de la l\u00ednea) se leen con m\u00e1s fluidez que las fuentes sans serif y, por lo tanto, se consideran m\u00e1s f\u00e1ciles de comprender. Del mismo modo, como las instrucciones est\u00e1n escritas en fuentes m\u00e1s claras y legibles (como Ariel, por ejemplo) se consideran m\u00e1s comprensibles que las que est\u00e1n escritas en opciones de fuente m\u00e1s confusas y ocupadas, lo que significa que esas instrucciones se consideran m\u00e1s f\u00e1ciles de llevar a cabo.\n<\/p>\n<p>\n  Pero, por supuesto, la legibilidad no es lo \u00fanico que debe tenerse en cuenta, tambi\u00e9n debe pensar en las emociones que provocan las fuentes. S\u00ed, as\u00ed es, las diferentes fuentes afectan a las personas de manera diferente, con tipos de fuentes como Times New Roman m\u00e1s a menudo asociados con emociones como \u00abgracioso\u00bb y \u00abenojado\u00bb que Ariel.\n<\/p>\n<p>\n  \u00a1Te advert\u00ed que el minimalismo no era para los d\u00e9biles de coraz\u00f3n!\n<\/p>\n<p>\n  Otra cosa a considerar es qu\u00e9 tipo de fuente usas y d\u00f3nde, ya que obviamente no tienes que usar la misma fuente en todo momento. Y como no hay nada m\u00e1s que distraiga a tu audiencia, si usas diferentes estilos de fuente y tipograf\u00edas, ser\u00e1 mucho m\u00e1s probable que tu usuario los note.\n<\/p>\n<p>\n  Por lo tanto, esta puede ser una estrategia muy efectiva para lograr que su audiencia preste atenci\u00f3n a \u00e1reas espec\u00edficas. Por ejemplo, considere escribir el texto que desea que los usuarios lean primero en estilos en negrita, con trazos gruesos, mientras que las partes que se supone que deben notarse m\u00e1s tarde est\u00e1n escritas en fuentes m\u00e1s neutras. El ojo del usuario se ver\u00e1 inmediatamente atra\u00eddo por el texto en negrita, mientras que el otro texto se consumir\u00e1 m\u00e1s tarde.\n<\/p>\n<h4>\n  Contraste y Posicionamiento<br \/>\n<\/h4>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-266271-63825875bcdc7.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-266271-63825875bcdc7.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Una de las herramientas m\u00e1s poderosas disponibles para un dise\u00f1ador web minimalista es el contraste. Si desea utilizar el contraste para obtener su mejor efecto, tendr\u00e1 que optar por fondos de colores claros, siendo el blanco la opci\u00f3n predominante, ya que permite obtener el mejor efecto. Esta es la raz\u00f3n por la que las p\u00e1ginas minimalistas suelen usar negro sobre fondos blancos, ya que estas l\u00edneas marcadas son inmensamente atractivas visualmente. Aqu\u00ed hay un <a href=\"http:\/\/www.jorgerieraflores.com\/\" target=\"_blank\" rel=\"noopener\">buen ejemplo<\/a>. Adem\u00e1s, la m\u00e1s m\u00ednima pizca de color, como un toque de amarillo, puede ser muy eficaz. Solo piensa en el abrigo de la ni\u00f1a en la Lista de Schindler.\n<\/p>\n<p>\n  Un dise\u00f1ador puede crear un contrato con muchas cosas diferentes, incluido el color, la forma, la ubicaci\u00f3n, la escala y el tama\u00f1o. Si se usa correctamente, puede ser incre\u00edblemente \u00fatil para llevar a su usuario a aquellas partes a las que debe prestar atenci\u00f3n primero (al igual que expliqu\u00e9 en t\u00e9rminos de tipograf\u00eda anteriormente, cuando discut\u00ed textos en negrita versus m\u00e1s neutrales). No es f\u00e1cil, sin embargo, y para usarlo de la mejor manera es necesario tener una comprensi\u00f3n b\u00e1sica de c\u00f3mo los usuarios consumen las p\u00e1ginas de Internet.\n<\/p>\n<p>\n  Los estudios del movimiento de los ojos nos han dado una gran idea de d\u00f3nde miran primero las personas, generalmente comenzando en la parte superior izquierda y luego, dependiendo de si hay mucho texto o no, escaneando la p\u00e1gina en una &#8216;F' o un patr\u00f3n &#8216;Z' respectivamente.\n<\/p>\n<p>\n  Como su p\u00e1gina minimalista no tendr\u00e1 mucho texto, querr\u00e1 organizar los aspectos m\u00e1s importantes de su p\u00e1gina en un patr\u00f3n de tipo Z, con las cosas que sus usuarios deber\u00edan notar primero (usted es sus opciones de men\u00fa) generalmente tomando una posici\u00f3n m\u00e1s hacia la parte superior izquierda de su p\u00e1gina, mientras que las cosas que deber\u00edan notarse m\u00e1s tarde (por ejemplo, sus reclamos de derechos de autor) bajan m\u00e1s y m\u00e1s a la derecha. De esta forma, har\u00e1s que el consumo de tu p\u00e1gina sea m\u00e1s fluido y natural.\n<\/p>\n<h4>\n  El bot\u00f3n de hamburguesa y otros dise\u00f1os<br \/>\n<\/h4>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-266271-63825875bcdc7.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-266271-63825875bcdc7.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Lo \u00fanico que es importante recordar con el dise\u00f1o minimalista es que el hecho de que no haya mucho que ver por p\u00e1gina no significa que no haya mucho contenido en general; la mayor\u00eda de las veces toda esa informaci\u00f3n est\u00e1 escondida en submen\u00fas y p\u00e1ginas secundarias. Una forma popular (aunque controvertida) de hacerlo es a trav\u00e9s de lo que se conoce como &#8216;el bot\u00f3n de hamburguesa', o las tres l\u00edneas que ahora ves por todos lados, como en cromo en la parte superior derecha, as\u00ed como en el iPhone. Y s\u00ed, si has bebido un par de copas parece una hamburguesa (no me invent\u00e9 el nombre).\n<\/p>\n<p>\n  Personalmente, no soy un gran fan porque esto va en contra de mis instintos minimalistas. \u00bfDe qu\u00e9 sirve crear una p\u00e1gina ordenada si luego va a crear un men\u00fa desordenado para navegar por el resto de su sitio web? Para m\u00ed, una estrategia mucho mejor es subdividir su bot\u00f3n de hamburguesa en varias opciones de men\u00fa que son obvias y f\u00e1ciles de entender y atraer\u00e1n a sus lectores, pero en \u00faltima instancia depende de usted.\n<\/p>\n<p>\n  Un factor importante a tener en cuenta cuando est\u00e1s pensando en crear varios elementos de men\u00fa o usar un bot\u00f3n es la edad de tu audiencia. Cuanto mayores sean, menos familiarizados estar\u00e1n con este dise\u00f1o y, por lo tanto, es m\u00e1s probable que no encuentren sus submen\u00fas, lo que puede hacer que su p\u00e1gina sea in\u00fatil. Entonces, \u00bfsu p\u00e1gina est\u00e1 dirigida principalmente a los millennials? Adelante, \u00fasalo. \u00bfEst\u00e1 sirviendo a los jubilados? Probablemente sea prudente pensar de nuevo.\n<\/p>\n<h4>\n  Estilo visual<br \/>\n<\/h4>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-266271-63825875bcdc7.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-266271-63825875bcdc7.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Y luego est\u00e1 c\u00f3mo se supone que debe dise\u00f1arse su p\u00e1gina. Cuando decide elegir un estilo minimalista, debe elegir un estilo de dise\u00f1o y luego apegarse a \u00e9l. Esto se debe a que su audiencia inmediatamente comenzar\u00e1 a hacer suposiciones inconscientes acerca de c\u00f3mo encaja su p\u00e1gina web y si luego viola estas suposiciones, sus usuarios sentir\u00e1n que su p\u00e1gina est\u00e1 &#8216;desordenada' y &#8216;desorganizada'. Esa es una sentencia de muerte para el minimalismo (y la mayor\u00eda de las otras p\u00e1ginas tambi\u00e9n, la verdad sea dicha).\n<\/p>\n<p>\n  Por esta raz\u00f3n, debe seleccionar una cuadr\u00edcula, que b\u00e1sicamente significa las columnas en las que ha dividido su p\u00e1gina, y ce\u00f1irse a ella. \u00bfCu\u00e1ntas columnas quieres? \u00bfC\u00f3mo estar\u00e1n espaciados? \u00bfCu\u00e1nto espacio negativo quedar\u00e1 entre ellos? Todas estas son preguntas importantes que debe responder incluso antes de comenzar a dise\u00f1ar la p\u00e1gina.\n<\/p>\n<p>\n  La idea aqu\u00ed no es que las im\u00e1genes no puedan exceder los l\u00edmites de estas l\u00edneas de cuadr\u00edcula. A menudo, las im\u00e1genes se extender\u00e1n por toda la p\u00e1gina. En este caso, el texto sobre la imagen que se presenta a continuaci\u00f3n se ordenar\u00eda en las columnas que seleccion\u00f3. Del mismo modo, si tiene varias im\u00e1genes en su p\u00e1gina, deben seguir la cuadr\u00edcula que ha creado para que su p\u00e1gina en general se vea limpia y profesional.\n<\/p>\n<h5>\n  \u00bfVale la pena ir al minimalismo?<br \/>\n<\/h5>\n<p>\n  Honestamente, eso depende de lo que est\u00e9 tratando de hacer (y, por supuesto, del tema de su p\u00e1gina). Si est\u00e1 tratando de reducir su trabajo, entonces, como ya se dijo, el minimalismo no es para usted. Si, por otro lado, este tipo de dise\u00f1o le atrae instintivamente y se ajusta al tipo de producto que est\u00e1 impulsando, entonces es el camino a seguir.\n<\/p>\n<p>\n  La cuesti\u00f3n es que el minimalismo requiere un conjunto de habilidades diferente al del dise\u00f1o est\u00e1ndar, en el sentido de que no puede simplemente usar piezas comunes y corrientes y unirlas para crear una p\u00e1gina. Si intenta hacer eso, terminar\u00e1 con algo que no es visualmente atractivo o que no es tan informativo. Lo peor, en otras palabras, de ambos mundos.\n<\/p>\n<p>\n  En cambio, tendr\u00e1 que pasar un tiempo aprendiendo c\u00f3mo subvertir sus instintos b\u00e1sicos que ha aprendido de los dise\u00f1os de p\u00e1gina anteriores que ha hecho. Entonces tendr\u00e1s que sentarte y descubrir qu\u00e9 es esencial para tu p\u00e1gina.\n<\/p>\n<p>\n  Y tendr\u00e1s que familiarizarte con el contrato, los tipos de fuente y las fotos como nunca antes. Es casi como si estuvieras aprendiendo un nuevo lenguaje de dise\u00f1o. Eso puede ser dif\u00edcil.\n<\/p>\n<p>\n  Sin embargo, lo que pasa con aprender un nuevo idioma es que te hace darte cuenta de cosas sobre tu idioma original que nunca antes hab\u00edas notado. Y esto es igualmente cierto con el aprendizaje del dise\u00f1o web minimalista. El mismo hecho de tratar de aprender a dise\u00f1ar de esta manera te har\u00e1 darte cuenta de cosas sobre el dise\u00f1o que nunca antes sab\u00edas.\n<\/p>\n<p>\n  Y eso bien podr\u00eda hacer que todo el sudor y el trabajo duro valgan la pena.\n<\/p>\n<p>\n  Olvidando por el momento que las p\u00e1ginas minimalistas son simplemente hermosas, por supuesto.\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  Fuente de grabaci\u00f3n: instantshift.com\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Primero eliminemos un concepto err\u00f3neo sobre el minimalismo. El hecho de que haya menos para ver no significa que sea m\u00e1s f\u00e1cil. De hecho, es todo lo contrario. Cuanto menos tenga, m\u00e1s tiempo tendr\u00e1 que gastar para asegurarse de que cada elemento que tiene est\u00e9 justo en el dinero. Despu\u00e9s de todo, si tiene una interfaz abarrotada, si algo est\u00e1 alineado ligeramente a la izquierda del centro, o una fuente que no es \u00f3ptima para lo que est\u00e1 usando, probablemente ni siquiera se notar\u00e1 entre los otros detalles. Eso no ser\u00e1 cierto si est\u00e1s usando una web minimalista&#8230;<\/p>\n","protected":false},"author":1,"featured_media":149268,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[398,359,229,60],"tags":[],"class_list":["post-263552","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno","category-entretenimiento","category-libros-de-texto","category-web-y-wordpress"],"_links":{"self":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/posts\/263552","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/comments?post=263552"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/posts\/263552\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/media\/149268"}],"wp:attachment":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/media?parent=263552"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/categories?post=263552"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/tags?post=263552"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}