Tendencias en diseño web

Cada año van cambiando, en mayor o menor medida,  las tendencias en  diseño web de la misma manera que cambia en la mayoría de productos que compramos, para de esta manera conseguir hacerlos más atractivos visualmente, en el caso de las páginas web, o por razones también de usabilidad con la mejora de la navegación y la presentación de los contenidos.

Como tendencia actual, ya llevamos algún tiempo viendo los llamados diseños planos – o flat para los más entendidos- donde se priorizan los espacios en blanco que dan más sensación de libertad (y relajan más la vista del lector) al no encontrarnos sitios web totalmente recargados, tal y como se diseñaba años atrás.

En este tipo de diseño hay una propensión a priorizar los conceptos importantes con títulos de un tamaño generoso –aquí depende en gran medida del estilo del diseñador web- y un texto con un carácter también algo más grande de lo habitual: Conseguimos así centrar la atención del usuario en estos conceptos para que se haga una idea clara de que trata nuestro sitio web en, relativamente, poco tiempo – y es que el usuario cada vez está menos dispuesto a invertir tiempo en un sitio que no le atrape de entrada-.

¿Qué elementos marcan las tendencias actuales?

La tipografía

La elección de la tipografía -vista como tendencia creativa- ayudará mucho en el concepto de imagen que queramos transmitir, ya sea con letras gruesas, finas, minimalistas o efecto trazo. Cualquiera puede ser una buena elección, lo importante es que congenie perfectamente con el resto de los elementos.

Tipografía -Diseño de draft.co.jp

 

Tipografía -Diseño de draft.co.jp

Las imágenes

Podemos introducir en el diseño grandes fotografías, a modo de slider – o pase de diapositivas- que refuercen el mensaje que queremos comunicar ayudando así a la retención del lector en nuestra página web.

Estas imágenes pueden ser conceptos muy claros sobre nuestra temática siguiendo una línea determinada o incluso podemos jugar a probar con alternativas que llamen la atención del usuario: lo que si recomendamos siempre es que sea cual sea nuestra estrategia a la hora de elegir imágenes, éstas sean de mucha calidad, tal y como comentamos en nuestra página dedicada a los diseños de portadas web.

Por cierto, procura no coger cualquier imagen que veas en internet: No solo la tendrán insertadas en su blog otras 50 webs aparte de la tuya sino que además Google verá que no eres original, que no tienes tus propias imágenes. También puedes recurrir a bancos de imágenes, algunos gratuitos y otros de pago: estos últimos te darán algo más de exclusividad.

Nosotros pensamos que lo mejor es que uno mismo se lo trabaje un poco y si dispones, por ejemplo, de un programa como Photoshop, puedes montar imágenes muy atractivas que impacten o sino, simplemente tómalas tú mismo con tu cámara si sabes hacerlo con un resultado “casi” profesional. Aunque pensamos que  la mejor opción es contratar un fotógrafo: Dispondrás de imágenes de máxima calidad y totalmente exclusivas. Tu público te lo agradecerá y Google también.

Un ejemplo: www.aticwebbcn.com/demo/bufete-abogados/

Ejemplo slider imagenes

 

Videos

EL video puede servirnos también a modo muy ilustrativo para explicar en un tiempo reducido el concepto que queremos transmitir, si es posible en 10 o 15 segundos (recordemos que el usuario tiene poca paciencia). Aquí tienes unos buenos ejemplos:

Desde luego nosotros tenemos una predilección por la inserción de videos en la cabecera de las páginas, simplemente por lo descrito en el párrafo anterior.

Video web palazzinacreativa.it

 

Ejemplo de video web palazzinacreativa.it/

Video www.aticwebbcn.com/demo/restaurante-especialidad/

 

Video de ejemplo aticwebbcn.com

 

Ilustraciones

Llevan tiempo de moda y de actualidad entre los diseños en determinados sectores y desde luego tiene su público. Aquí ha de primar la originalidad, que los vectores utilizados sean diseños de calidad y como no, si es posible, de diseño propio, para no repetirse con otras páginas.

Os ponemos este ejemplo ya que nos ha parecido realmente divertido y bien trabajado:

 

Ilustraciones web forbetter.coffe

 

Ilustraciones de calidad

Efecto Parallax

También destacable es el efecto Parallax que consiste en colocar una imagen que queda fija mientras vamos haciendo scroll hacia abajo con el ratón de nuestro Pc y acostumbra a llevar superpuesto un texto destacado.

Debemos tener claro que todos estos elementos son muy interesantes si se combinan adecuadamente y en su justa medida ya que de lo contrario podríamos llegar a encontrarnos con páginas web que literalmente “marean” por el exceso de efectos parallax principalmente, entre otros.

Como ejemplo hemos escogido este de uzik.com:

Ejemplo efecto parallax - Web uzik.com

Diseño de una sola página:

En este caso nos encontramos que todo el contenido se encuentra en la pagina de inicio: Tan solo hay que ir haciendo scroll (yendo hacia abajo) con la ruedecita del ratón para poder navegar por las distintas secciones. Si no tienes mucho contenido o simplemente presentas un producto, es suficiente. Tampoco hay mucho más.

Ejemplo web  www.seedlipdrinks.com

Ejemplo web de una sola pagina

Scroll infinito:

Habitual es también encontrar páginas con un scroll infinito -quizás una tendencia minoritaria- que es un caso parecido al anterior pero presentando una gran cantidad de información, que no tienen por qué ir distribuidas en secciones: Parece que no se termine nunca la página.

Tiene sus partidarios y sus detractores. Es bueno en algunos casos si por ejemplo estás contando una historia, también lo es para visualizaciones desde dispositivos móviles al no necesitar saltar de una página a otra.

Un ejemplo práctico sería tu muro de Facebook o de Twitter.

Pero si consideras que tienes que añadir secciones separadas como un portfolio de trabajos realizados o si te agobia ver demasiada información en una misma página, este no es tu diseño.

Ejemplo web http://departementcreatif.com/

Ejemplo de web con scroll infinito

A partir de aquí podemos mencionar algunos otros efectos que se han ido incorporando a los diseños que no por menores tienen poca importancia: Con ellos conseguimos mejorar la calidad global de la presentación web:

Efecto Hover

Otros efectos que cada vez se usa más en el diseño web son elementos como el Hover que es la acción que se realiza cuando pasas el puntero del ratón por encima de, por ejemplo, una imagen y aparece sobre la misma un título y un texto con un fondo de color que hace destacar las letras (no se ve demasiado bien el texto si lo ponemos encima de una imagen directamente a no ser que sea un carácter negrita o una tipografía muy gruesa).

Efecto de entrada en los textos:

Podemos introducir este efecto que consiste en la entrada ya sea lateral, desde la izquierda o derecha, superior o inferior así como aparecer desde el centro.

Es una manera elegante y divertida de dar vida a los párrafos para que la lectura sea más entretenida (en esta web puedes ver unos cuantos ejemplos, solo hace falta que navegues un poco…)

También podemos hacer lo mismo con las imágenes, que tengan un efecto de entrada puede resultar muy interesante aparte del detalle de calidad que ofrecemos: Mira un ejemplo en esta página con diversas imágenes que hacen la entrada con diferentes efectos.

Galerías de imágenes:

Presentarlas en formato galería tradicional, el llamado estilo Grid, que quiere decir que los elementos están tal cual como una “parrilla” dispuestos en cuadricula y con unos márgenes entre imágenes a determinar, según el gusto del diseñador.

O podemos presentarlas al estilo Masonry que consiste en colocar las diferentes imágenes que forman la galería con distintos tamaños pero no siempre dentro de la cuadricula. El efecto es muy interesante y diferente a lo establecido habitualmente por lo que conseguiremos llamar la atención del lector.

Diseño responsive

Como no, todo esto debe visualizarse perfectamente en todo tipo de dispositivos ( escritorio, portátil, tablet y móvil) , lo que llamamos diseño responsive o adaptado y es que cada vez más los navegantes utilizan más dispositivos para conectarse a internet.

Visualización página web en diferentes dispositivos

Y finalmente, todo este cóctel de elementos debe estar mezclado con el Seo ya que éste forma parte fundamental de la mezcla, pero no te preocupes, de este tema ya nos encargamos nosotros si haces tu página con nuestra empresa de diseño web.

¿Y cuáles serán las nuevas tendencias?

Todavía no lo sabemos, pero pensamos que las nuevas tendencias en el diseño de sitios web corporativos o de cualquier otro tipo en un futuro próximo continuará en una línea muy parecida a la actual, con diseños planos. Quizás con una propensión a utilizar todavía más las ilustraciones y el uso del video por su facilidad a la hora de comunicar con los lectores.

Iremos viendo y publicando en cuanto tengamos más novedades al respecto de las últimas tendencias.

¿Tienes claro ya que tipo de diseño quieres para tu página web?

Artículos relacionados:

Dejar un comentario

Este sitio usa Akismet para reducir el spam. Conoce cómo se procesan los datos de tus comentarios.

Comparte
Síguenos