Tendencias Diseño Web 2020, Modo Oscuro «Dark Mode» y Minimalismo

Tendencias Diseño Web 2020, Modo Oscuro «Dark Mode» y Minimalismo

Las tendencias de diseño web están en constante evolución. Las posibilidades técnicas ya no son un obstáculo, lo que invita a experimentar más y encontrar nuevas tendencias. Existen también tendencias que continuarán y que tomarán mayor peso como es el minimalismo y otras que se sumarán a la corriente popular como es el modo oscuro o «dark mode».

MODO OSCURO O DARK MODE

En 2018 tras un estudio, Google reconoce que el modo oscuro aumenta en un porcentaje muy alto el rendimiento de sus baterías, los colores predominantes que muestre nuestra pantalla influyen claramente en el consumo. En concreto, los colores azulados consumen más que los colores rojizos. Esta diferencia se acentúa más en el caso del blanco y el negro, el blanco es un color más brillante, consume mucho más que el negro, que es todo lo contrario.
Este estudio arrojó también que no en todos los móviles se producía el mismo ahorro, mucho más visible en los pixels y menor en los iPhone. En todo caso hablar de ahorro de batería ya es motivo suficiente como para que todas las apps más relevantes sacasen su modo nocturno y que todos corriésemos a instalar actualizaciones para disfrutar de la novedad.
Además al ahorro de batería se le suma el uso habitual de dispositivos de noche, en habitaciones poco o nada iluminadas en las que los blancos llega a hacer daño y el modo oscuro se convierte en un beneficio para la usabilidad.

Los diseños web en modo oscuro no solo se ven ultramodernos, sino que además impactan y son agradables a la vista. Los colores, fotos y elementos de diseño destacan más, usando colores oscuros.

Así pues, esto casi seguro de que una de las principales tendencias de 2020 será el diseño oscuro, centrado seguramente en el diseño de la interfaz de usuario, ofreciendo a los usuarios una opción para habilitar el tema oscuro.

 

DISEÑO MINIMALISTA

El minimalismo, a menudo se subestima o se malinterpreta, no se trata de reducir el diseño a su forma más aburrida, ni tampoco significa usar un fondo blanco, el minimalismo consiste en la simplicidad y énfasis del contenido. Se trata de llegar al usuario con el mínimo peso posible, pero con el suficiente para darle lo que está buscando, a veces será más y otras menos. Nuestro objetivo es darle la mejor experiencia utilizando la menor cantidad de recursos, esa es la esencia del minimalismo.

Evidentemente no es lo mismo diseñar la portada de un periódico digital que una landing para el lanzamiento de un producto, cada caso nos obligará a recurrir a un número diferente de recursos mínimos.

Uno de los beneficios del minimalismo es que crea un diseño elegante y muy atractivo para el usuario. La distracción disminuye y la conversión aumenta.

Los diseños web minimalistas utilizan los elementos de diseños indispensables y lo distribuyen sobre un fondo neutro (espacio negativo) que haga resaltar eso elementos. Debemos crear un equilibrio agradable pero además transmitir el mensaje. La web de Google ya fue hace años un perfecto ejemplo de este minimalismo. En este caso en particular, un espacio blanco que ocupa la mayor parte de la pantalla, hace resaltar lo verdaderamente importante, la caja del buscador. No necesita más, pero tampoco menos. Fijaos como además separa las demás enlaces externos a la búsqueda en los márgenes de la pantalla y en un tamaño de fuente pequeño y con poco peso.

El pantallazo que veis sobre este texto pertenece a boundarysupply.com y hace exactamente lo mismo, tiene los elementos indispensables para su misión, y el mensaje es claro, y si os fijáis el diseñador ha desplazado a la izquierda el texto, de ese modo compensa el peso que provoca la chica (hacia la derecha) sobre fondo casi negro, el resultado es perfecto. Los enlaces salen de la escena principal colocándose en los márgenes de la pantalla, sin demasiado peso pero siendo perfectamente visibles para el usuario.

Según otro informe de Google, los usuarios de un sitio web tardan 17 milisegundos en formar su opinión. Cuanto más simples son las imágenes, más atraen al usuario. Estas imágenes deben ser llamativas, originales y de alta calidad. Estas imágenes son efectivas utilizándolas como elemento principal o como espacio negativo.

Con menos texto en la página, las imágenes grandes se colocan en primer plano y representan el foco principal de la composición. Veréis que en ocasiones el espacio negativo es un video, pero siempre muy sutil, para que siga cumpliendo su misión de hacer resaltar a la imagen o texto que está en primer plano.

En fin, veremos a ver qué nos depara el futuro, ojalá nos sorprenda gratamente 😉

Tendencias del diseño web, by Apple…

Imagen tomada de appleweblog.com

Imagen tomada de appleweblog.com

Nadie en este mundillo es ajeno a la tremenda influencia de Apple en el diseño web.

Estoy seguro que aparición del iOS7 en el mercado, volverá a dar un cambio de aires al diseño web.

Es cierto que podemos ver una clara inspiración en el diseño más plano de Windows o Google, pero eso si, con el toque especial que siempre Apple da a sus diseños. El responsable, Jonathan Ive.

El cambio ha sido radical, pasando del skeuomorphism (que representa el arte de imitar la realidad) a un diseño totalmente minimalista, es decir, de Steve Jobs a Jonathan Ive.

(más…)

Tendencias Web. Responsive Design.

La última tendencia de diseño web es el Responsive Design o «Diseño Adaptativo». Con la ayuda del HTML5 y CSS3, ahora podemos adaptar los diseños de páginas web en función del tamaño de pantalla del usuario. La característica fundamenteal de este tipo de diseño web, es que se adapta perfectamente a cualquier resolución, basta con ir cambiando el tamaño de la ventana del navegador, para ver cómo se van recolocando los módulos que forman la web.

Gracias a esta técnica no tenemos que hacer distintas web o utilizar distintas CSS para hacer un diseño para web, smartphone o tableta. El mismo diseño se verá correctamente en cualquiera de los distintos dispositivos y lo más importante, se reducirán los costes de creación y mantenimiento.

La idea de implementar esta técnica viene de lejos, del año 2008, recomendado por W3C  en «Mobile Web Best Practices» bajo el subtítulo «One Web«.

Hoy en día la disparidad tan grande que hay en tamaños de pantalla (sobremesas, portátiles, smartphones, tablets…), ha provocado que finalmente los diseñadores web nos planteemos esta práctica como indispensable en todos nuestros diseños. (más…)

Tendencias Diseño Web para 2012. SCROLL PARALLAX

Tendencias Diseño Web para 2012. SCROLL PARALLAX

Scroll Parallax

Scroll Parallax

En este blog de diseño web, hemos visto como a lo largo de los años las tendencias del diseño web siguen sorprendiéndonos y alcanzando niveles que hace años eran difíciles de imaginar.

En esta última década hemos sido partícipes como diseñadores, de una constante evolución. Desde las web más básicas, que simplemente parecían un documento word metido en una pantalla, pasando por aquellas horrorosas webs, en las que todo parpadeaba y en las que era necesario llenar la web de botones con el mensaje «pulse aquí», para posteriormente pasar a una época en lo que todo parecía que iba a ser flash y acto seguido abandonar la idea al darnos cuenta de que lo que verdaderamente era importante, era el SEO y la USABILIDAD.

En todo este tiempo, hemos vivido muchas mejoras en las conexiones de los usuarios, lo cual se ha visto obviamente reflejado en los diseños. Esto nos permitió empezar a utilizar grandes imágenes y backgrounds, a no estar tan pendientes del peso de la página. Nuevos dispositivos desde los que visualizar las webs, como los smartphones, iPhones, iPads,… Y en los últimos años, la implantación de una tecnología que ha dado un vuelco al diseño web y que como diseñadores nos ha permitido abrir la imaginación para poder realizar diseños con los que nunca antes nos habríamos atrevido, todo gracias a la implantación del jQuery.

(más…)

Diseño Web Horizontal

Diseño Web Horizontal

Diseño Web Horizontal

Diseño Web Horizontal

Hace ya tiempo que tenía ganas de hablar del diseño web horizontal.

Lejos de las creencias de los llamados «gurús» de la usabilidad, han ido proliferando muchas web relacionadas con el diseño, fotografía, revistas,… En las que en lugar de tener que desplazarse verticalmente por el sitio web, el desplazamiento se hace de modo horizontal.

En este tipo de webs nos encontramos con algún problemilla.  El primero es que lo normal es que nuestro ratón sólo tenga scroll vertical, por lo que tendremos que ir desplazando manualmente el scroll de la barra del navegador, pero vamos a ver algún ejemplo en el que esto se soluciona de un modo perfecto.
El segundo y quizás el más importante, es que debemos de indicar de algún modo al usuario, que se encuentra en una web distinta, que si quiere más contenido tendrá que desplazarse horizontalmente.
Una solución, sería hacer un corte en la página, de modo que se dejase ver que hay más contenido hacia la derecha, por ejemplo, con un contenido cortado por la resolución de pantalla, pero tendríamos que tener presente las distintas resoluciones de pantalla para que esto funcionase. Así que lo normal es encontrarnos con unas flechas dibujadas que nos indican el desplazamiento.

En estos ejemplos podréis ir viendo cómo ha ido evolucionando este tipo de webs, desde el Html con tablas, hasta el uso de CSS.

(más…)

Tendencias del diseño web para 2009

Tendencias del diseño web para 2009

Tendencias web 2009

Tendencias web 2009

El diseño no deja de evolucionar, cada vez vemos cosas más asombrosas, diseños que enriquecen los contenidos y que nos ayudan cada vez más a hacer más usables las webs.
Eso pasó por ejemplo con los nuevos diseños de pies de web, en los que hemos pasado de tener una zona «inhóspita» a ser un lugar con un alto contenido visual en el que el usuario se fija y navega. Esta es una solución que sin duda seguiremos viendo este año.

También hemos podido ver como cada vez son más los diseñadores que utilizan grandes imágenes de fondo. Las conexiones son cada vez más rápidas y esto hace posible poder usar fondos reales en lugar de colores. El uso de png también ha favorecido mucho lograr buenos diseños. Los navegadores actuales los leen sin problema y existen soluciones para solventar los problemas de transparencia que aparecen en los antiguos.

La tipografía grande también seguirá dejando atrás a los pequeños titulares. Las resoluciones de pantalla ahora permiten usar mayores espacios de trabajo en los que las fuentes grandes brillan con luz propia. Inlcuso he comenzado a ver cada vez más, webs que usan sIFR para meter todo tipo de fuentes, con lo que los resultados son geniales. De todos modos habría que estudiar detenidamente el tiempo de carga que supone esto.

Seguimos viendo en todos los diseños las esquinas redondeadas, con o sin sombra, creo que este tipo de cajas seguirán acompañándonos este año, así como las cabeceras que ocupan el 100% de la pantalla (tipo wordpress).
Por supuesto que las redes sociales están influenciando mucho en los diseños, la posibilidad de añadir o de que el usuario añada tus contenidos a estas redes, hace que se le de mucha importancia al espacio que ocupan las entradas a flickr, Twitter,… Desarrollando diseños cada vez más grandes y vistosos.

Las dos columnas tipo blog se imponen. Una principal más ancha con el contenido principal y otra más estrecha a la derecha con un contenido secundario. Aunque he de decir que empiezo a ver sitios con múltiples columnas como es el caso de http://labs.mozilla.com (en este caso el diseñador ha querido dar igual importancia a las 4 noticias, y la mejor manera era meter 4 columnas verticales de iguales dimensiones)
Hace años el diseño de páginas web era al revés. Las webs estaban diseñadas en dos columnas la izquierda más estrecha a menudo con el menú de navegación y luego a su lado la principal más ancha. Cuando se empezó a dar importancia al SEO, se vio que esa distribución nos perjudicaba seriamente, ya que el navegador leía primero todo el contenido de la primera columna, lo que provocaba que los textos y titulares importantes quedaban relegados detrás de cientos de líneas de código.

Así como las fuentes han aumentado de tamaño, lo mismo ocurre con las ilustraciones. Son más grandes, muy coloridas y consiguen llamar mucho la atención del usuario. Los grandes fondos ilustrados conviven con los fondos grunge, collage, blocs de notas, acuarelas,… Estos diseños aunque pudiera parecer lo contrario, han devuelto la importancia del espacio en blanco al diseño web. Todo ahora tiene más «aire», por fin nos hemos dado cuenta de la importancia que tienen los espacios en los diseños para crear un camino a la fácil lectura.

Pero sin duda alguna las herramientas que van a condicionar los nuevos diseños son las bibliotecas de Ajax, JQuery, Mootools,…
Las posibilidades son enormes, ya que simulan todo tipo de efecto y no recargan las páginas. Proporcionan muchas facilidades a la hora de navegar por la página, diseño, velocidad y usabilidad, ¿que más se puede pedir?

Y para acabar, mi profecía…
De todos es sabido la gran influencia que ha ejercido la web de apple en los diseños web. En esta ocasión mi apuesta viene dada por la navegación y gráficos de las webs creadas para móviles iphone, estoy convencido que empezaremos a ver similitudes en muchas páginas dentro de nada, el tiempo lo dirá….

Espero vuestros comentarios y sugerencias.

Mi estilo favorito

Mi estilo favorito

Neil Duerden

Neil Duerden

Esta forma de «decorar» imágenes a base de pinceles, efectos y vectorizados me apasiona. Hace tiempo que tenía ganas de dedicar un post a este Artista, Neil Duerden.

Neil Duerden

Neil Duerden

Es una perfecta combinación de buenas fotografías con espectaculares retoques, y todo ello para las mejores marcas del mundo (Nike, Adobe, Gucci, . Es sin duda un referente para los que nos gusta este tipo de diseños.

Neil Duerden

Neil Duerden

Desde hace ya tiempo, este estilo se ha introducido con mucha fuerza en publicidad, tanto en video como en imprenta, desde luego no deja indiferente a nadie.

La web es http://www.neilduerden.co.uk/ , os recomiendo que os la guardéis entre vuestras favoritas.

1

Neil Duerden

Bueno, ¡Feliz Año «Nueve»! para todos, y particularmente espero que en lo malo no se parezca en nada a este…

Fotos Vintage libres de derechos

Fotos Vintage libres de derechos

Acabo de encontrar una joya, buscando imágenes vintage en Flikr, he encontrado un archivo de más de 3000 fotografías Vintage GRATIS !!!! de la biblioteca del Congreso de los Estados Unidos.

Galeria de más de 3000 fotografias vintage. 1910's-30's-40's

Galería de más de 3000 fotografías vintage. 1910's-30's-40's


Las fotografiás son sencillamente alucinantes, sobre todo para los que estamos totalmente enamorados del vintage y lo retro. Encontraréis dos grandes bloques, 2.900 fotografías de l910’s y 1615 fotografías de 1930’s-40’s

Fotografias Vintage libres de derechos. 1910

Fotografías Vintage libres de derechos. 1910

Podréis encontrar una enorme colección de fotografías de escenas cotidianas,  en casa, en la calle o en las fábricas. Una galería impresionante e indispensable.

Ver galería de fotos Vintage libres de derechos.

Nueva web de Warner Music España

Nueva web de Warner Music España

Nueva web de warnermusic.es

Nueva web de warnermusic.es

Para los que no habéis tenido curiosidad en saber a qué me dedico, os diré que en la actualidad trabajo en medialabs, y este ha sido mi último diseño, la web oficial de Warnermusic España.

La web acaba de subirse este mes, todavía la gente de Warner anda loca rellenando contenidos y subiendo archivos (de ahí el beta que podréis ver en el logo).

Se trata de una web programada en .net y maquetada con CSS.

Diseñar un portal como este es un complejo proceso. Al tratarse de una gran compañía, muchos son los condicionantes marcados,  las secciones y las distintas posibilidades que se le ofrece al usuario, por eso, en lugar de juzgarlo, prefiero que seáis vosotros los que deis vuestra opinión.

Dejad vuestros comentarios en este post.

Gracias a todos.

Tendencias del diseño web – “pies”

Tendencias del diseño web – “pies”

footers o pies de página

footers o pies de página

De acuerdo con todos los principios de diseño web, todo lo que colocamos en la parte inferior tiene poca importancia para el usuario, sin embargo, desde hace bastante tiempo y precisamente para poder aprovechar este espacio y captar la atención del usuario, se están desarrollando sitios web con increíbles pies de página. Vistosos, usables y que no pasan para nada desapercibidos para el usuario.

Normalmente se usa esta zona para poner avisos legales, referencias a otras secciones más o menos relevantes,… En definitiva suelen ser zonas «oscuras» al ojo del usuario.

En este post vamos a ver varios ejemplos de cómo hacer visible esa zona, con atractivos diseños e incluso con buenas ideas para proseguir la navegación.

(más…)

Crea tu GRAFFITI online

Crea tu GRAFFITI online

Diseña tu firma graffitera online

Diseña tu firma graffitera online

El movimiento graffitero nació en NY en los años 60’s. Desde entonces hasta ahora, podemos ver cómo este movimiento «artístico» urbano ha tomado calles, transportes públicos y en definitiva, todo tipo de propiedad privada.
Existen verdaderas obras de arte, dignas de ser expuestas en cualquier museo, pero por desgracia, la gran mayoría de firmas que vemos por la calle, son nefastos intentos de expresión artística, que lo único que consiguen es ensuciar el ya por si «sucio paisaje urbano». A estos últimos, les recomiendo que practiquen su «técnica» con esta aplicación online, seguro que les vendrá muy bien…

(más…)

Tendencias del color web

Tendencias del color web

Tendencias del color web

Las tendencias del color en el diseño web cambian con el resto de las modas, aunque el abanico de diseños que existen en la red es tan amplio, que siempre es difícil establecer una tendencia. Las tendencias se ven más en las estructuras que en las tonalidades, aunque si es verdad que desde hace unos años podemos encontrar mucha más diversidad de colores. Ya en un post anterior pudimos ver cómo según las distintas culturas y según su significado, la elección de color es una decisión muy importante.

Estos son los colores que el estudio de Conecta Publicidad ha elaborado para el verano 2008.

(más…)

Tendencias del diseño web – “web 2.0”

Tendencias del diseño web – “web 2.0”

Tendencias del diseño web
En Tendencias del diseño web, hemos hablado ya del estilo «grunge» y del estilo «retro«, por supuesto que quedaba hablar del más actual, el estilo web 2.0.

La web 2.0 es más una actitud que no una tecnología, es el intentar hacer una web enfocándola al usuario, intentar darle todo lo que puede necesitar de forma fácil y haciendole participar en la medida de lo posible.

La característica fundamental de este estilo es la sencillez, una sencillez, que ha conseguido hacer más usables las páginas web.

(más…)

Tendencias del diseño web – “RETRO”

Tendencias del diseño web – “RETRO”

Tendencias del diseño web

Lo «retro» está de moda, o mejor dicho, nunca dejó de estarlo. Ese aire nostálgico de una época ya pasada que va desde los años 50’s hasta los 80’s ha sido retomada por muchos diseñadores en los que el diseño retro se mezcla con el toque personal. Se trata de un estilo muy limpio, atratctivo y fácil de entender por el usuario, ya que está basado principalmente en una ilustración muy descriptiva. Con estas cualidades, es imposible que pase de moda.

Los carteles ilustrativos de los 50’s, o los revolucionarios diseños de los 60’s, el diseño disco de los 70’s e incluso el pop art de los 80’s son un inmenso abanico de posibilidades que nos pueden inspirar para sacar adelante casi cualquier nuevo proyecto. (más…)

Tendencias del diseño web – «GRUNGE»

Tendencias del diseño web – «GRUNGE»

Tendencias del diseño web - “GRUNGE”

¿QUÉ ES EL DISEÑO GRUNGE?

Lo retro está de moda, y en especial el «GRUNGE«, se está convirtiendo en un estilo de diseño casi indispensable en una web o blog que quiera estar a la última. Una tendencia que está en la calle, en los nuevos diseños de coches, ropa, complementos,… y como no podía ser de otro modo, el diseño gráfico también ha sucumbido a esta moda.

Estos diseños grunge, se muestran a través de fondos sucios, desgarro de imágenes y tipografías, y el dibujo a mano de ilustraciones y textos, que pretenden dar más personalidad a estos diseños.

La 2.0 trajo las esquinas redondeadas y los grandes textos, no significa que este estilo»grunge» los haya dejado de lado, es como si los hubiese acogido pero de un modo más sutil. Estaríamos pues hablando de la evolución del estilo 2.0.

Los elementos grunge no tienen que tener necesariamente un aspecto desordenado, una web o blog con diseño grunge puede tener infinidad de elementos grunge pero dar en general un aspecto cuidado y ordenado. Una prueba la tenemos en la web de Jeremy Zevin en ella podemos ver como combina el aspecto grunge del fondo con el aspecto 2.0 del blog, son dos tendencias de diseño perfectamente compatibles.

A continuación os dejo un bloque de utilidades y consejos para que hagáis vuestros diseños grunge… (más…)

Web 2.0. Nueva tendencia de diseño web.

Web 2.0. Nueva tendencia de diseño web.

Web 2.0. Nueva tendencia de diseño web.

La llegada de las nuevas web 2.0. trajeron una nueva manera de entender el diseño de las web, textos más grandes colores más vivos…. pero lo que hace distinta a una web 2.0. es su contenido, su interactividad con el usuario, no su diseño, sin embargo asistimos a una clonación sin fín de webs debido a una asociación errónea en la que se relaciona éxito con «mantener una apariencia tipo».

Estamos todos de acuerdo con que el cambio ha sido para mejor, más aire en los diseños, más limpieza en los bloques, pero algunas veces casi aséptica, y debido a su popularización falta de personalidad.

Tenemos que aprender de los mejores y tratar de adaptarse a las tendencias de nuestros propios diseños.

¿Cual es la tendencia actual?

La tendencia actual en cuanto a diseño de páginas web se puede describir del siguiente modo:

  • Elementos Retro-
    Desde la vieja cámara Polaroid, radios antiguas, impresiones de época,… todo para conseguir un ambiente acogedor.
  • Paletas de colores cálidos-oscuros-
    El uso de colores oscuros, como marrón oscuro, burdeos y la mostaza en lotes de variaciones y matices en asociación con ese aspecto retro. En contraste con el brillante y de alto contraste de los colores de la tendencia actual.
  • Texturas reales-
    A veces orgánica, la simulación de madera, piedra, paredes manchadas o añadas fondos de escritorio.
  • Grunge Retro Fonts-
    Adiós a la típica fuente de esquinas redondeadas en negrita que utilizamos hoy en día. Demos la bienvenida a las fuentes y tipos grunge llenas de asperezas y detalles.
  • Cajas desiguales-
    Es el efecto desigual de acabado en cajas, marcos o partida. Obtenidos por efectos como rasgados de papel de símbolos de la pintura.
  • Objetos decorativos-
    Tanto ornamentos florales como tribales, se dejan ahora ver de manera tímida pero muy importante en las 2.0.
  • Manchas-
    Esto es de nuevo una característica grunge, pero también de época. Agregando como manchas de pintura creando la ilusión de algo desgastado por el paso del tiempo.
  • Collages en las cabeceras-
    Cabeceras que llegan a ser verdaderas obras maestras en las que el autor o el producto vendido cuentan sus historias.