Categorías
Diseño web

6 tendencias de diseño web que dominarán en 2015

La industria del diseño web va evolucionando y con ello modos y formas de cómo se ven las páginas en internet. En el 2014 se van notando cambios y consolidando otros que marcarán lo que será este nuevo año. Aquí explicaremos cuáles serán estas tendencias para el 2015 que se avecina.

Una de ellas y que no se manifiesta en un trabajo gráfico es la disminución progresiva de la necesidad de saber programar para diseñar una página web. Ya hay muchas alternativas para introducir contenido en plantillas o simplemente diseñarlo todo sin tocar una línea de código.

Pero vamos a lo más visual:

1. Diseña responsivo o vete a tu casa

responsive

El responsive design llegó para quedarse, ya no es una opción diseñar de otra manera. O la página se adapta a todas las pantallas o simplemente ese diseño no sirve. Responsive es la nueva norma del diseño web, lo quieras o no.

Con la llegada de los smart watches, los diseños responsivos tendrán que responder a estos nuevos retos.

La web de Andersson Wise maneja bien los bloques que luego se adaptan en pantallas más pequeñas.
La web de Andersson Wise maneja bien los bloques que luego se adaptan en pantallas más pequeñas.

2. Flat design

flatdesign

Cada vez más vemos diseños planos y esta influencia se debe también a los dispositivos móviles y la necesidad de adaptarse a sus capacidades de velocidad de procesamiento.

Los grandes como Microsoft, Google o Apple apuntan hacia esa dirección. El consenso general es que el flat design es una técnica muy favorable para el diseño web: Menos tiempo en degradados o texturas y más en dar soluciones óptimas a problemas de interfase de usuario. Todo va en beneficio del contenido, para que se aprecie sin distracciones.

La web del resumen de 2014 de Google está llena de elementos planos, con ligeros cambios en la tonalidad del color.
La web del resumen de 2014 de Google está llena de elementos planos, con ligeros cambios en la tonalidad del color.

3. Grandes imágenes y videos de fondo

background

El uso de imágenes grandes y videos como background seguirá creciendo en 2015. Esto también es fruto de tener mayores capacidades de banda ancha así como una adecuada optimización de las mismas imágenes.

A esto se añade el efecto “flotante” que tendrá el contenido principal sin comprometer la usabilidad.

Spotify aprovecha el video como fondo en su web-resumen de 2014
Spotify aprovecha el video como fondo en su web-resumen de 2014

4. Enfoque en la tipografía

tipografia

Como parte de la necesidad de enfocarse en el contenido, la tipografía en el diseño web tendrá un papel crucial. Y es que los usuarios están leyendo cada vez textos más largos en internet.
Hay tres aspectos que afectan la lectura en la web: Tamaño de la letra, ancho de la columna y espacio entre las líneas. Y de esto se tomará cada vez más conciencia.

Titulares grandes y generosos, texto legible y de buen contraste. Todo esto usa Seven Rooms en su web.
Titulares grandes y generosos, texto legible y de buen contraste. Todo esto usa Seven Rooms en su web.

5. Scroll sobre clic

scroll

Cualquiera que sepa un poco de analítica se dará cuenta de que la mayoría de los visitantes de su web no pasan del homepage. Es por ello que se está aprovechando este espacio en el diseño web para poner toda la información relevante allí.

En muchas páginas, solo se está diseñando el home. Con ello también los tiempos de carga se reducen considerablemente.

Asimismo, existen técnicas de animación que juegan con el scroll y cada vez salen más ayudas visuales que favorecen que la información siga fluyendo.

Apple juega con efectos de scroll para detallar las bondades de su Mac Retina 5K.
Apple juega con efectos de scroll para detallar las bondades de su Mac Retina 5K.

6. Microinteracciones

microinteracciones

Las viejas ventanas pop-ups están de vuelta ante la necesidad de obtener resultados con una página web, ya sea en forma de retener a los lectores o favorecer un contenido frente a otro.

A pesar de ello, esta tendencia tratará de interrumpir al usuario lo menos posible. Habrá técnicas más sofisticadas que otras, pero el objetivo aquí es que la interacción esté más integrada a la experiencia del usuario.

Conclusión

Este 2015 seguirá apareciendo con novedades. Aquí solo hemos puesto las tendencias más consolidadas, pero mencionamos algunas otras que seguramente veremos, como los ghost buttons, infográficos adaptados a la web, storytelling interactivo y el card design.

A fin de cuentas, son los diseñadores los que promueven los cambios en los estándares del mismo diseño. Ellos son los responsables de transformar las ideas en tendencias, y las tendencias en estándares.

Déjanos en los comentarios qué tendencias piensas que seguirán o se pueden añadir a esta lista.

Categorías
Diseño web

Guía para principiantes de Html5 y Css3

html5-css3

Honkiat ha publicado una guía para principiantes en Html5 y Css3. Este formato tiene ya dos años y ya no se puede concebir el diseño de una página web sin usar Html5 y Css3 por default.

La guía contiene:

  • Cambios entre Html4 y Html5
  • Estructura simple de Html5
  • Definición de las áreas de la página
  • Uso creativo de Css3
  • Conociendo la sintaxis de Css3
  • Poniendo todo junto
  • Recursos adicionales
  • Ejemplos y templates

Enlace: Beginner’s Guide To: Building HTML5/CSS3 Webpages

Categorías
Comunicación

Publicidad de mal gusto ¿pero efectiva?

Desde hace poco tiempo estoy estudiando una Maestría en Online Reputation & Community Management y uno de los primeros trabajos que nos han dejado es hacer un plan de marketing digital a una ficticia… funeraria. Como para cambiar de chip y tratar de resaltar un servicio que tiene muy poco o nada de glamour.

Al día siguiente una compañera publica –en nuestra página de Facebook que creamos– el siguiente video, con la advertencia: Un ejemplo claro de lo que NO debemos hacer!!

Después de ver tremendo bodrio, que ningún publicista con formación de medio pelo se atrevería a hacer, vi las estadísticas del video: Un millón y medio de visitas en un canal y 800 mil en otro. Además está en los primeros resultados de búsqueda de YouTube con el keyword: Funeraria. ¡Este video es un puto viral! ¿Cómo puede ser posible? Aquí la explicación:

Diferenciación

En un mundo conectado lo que abunda es la información y la variedad. No podemos captar todos los mensajes, no somos la NSA, por lo tanto para llegar al público lo que hacen los publicistas es buscar la diferenciación. Pero como todos buscan diferenciarse, esto se ha convertido en una carrera de ratas. Llamar la atención cada vez es más complicado.

La tira cómica de xkcd pone los puntos sobre las íes en este ejercicio de branding.
La tira cómica de xkcd pone los puntos sobre las íes en este ejercicio de branding.

Ser diferente requiere llegar a extremos y generar contrastes, emplear el humor y tener un poco de suerte. De esto se trata, justamente, la naturaleza de los virales.

No solo en la publicidad

El mal gusto está en todas partes, no solo en la publicidad. Sino basta con ver el video de Rebecca Black (53 millones de visitas) o el mismo Gangnam Style (todos los records de visitas).

¡Hasta Hitler reacciona! (4 millones)

No solo online

La publicidad de mal gusto ha existido siempre. En los infomerciales y en las tandas de horas con poco rating en la TV tradicional siempre han habido espacio para este tipo de avisos. Quienes saben aprovechar lo grotesco terminan teniendo buenos resultados. Recuerdo esta publicidad de un Instituto de Computación en mi país. Un éxito offline.

Mas ejemplos

Hay un par de publicistas que la están haciendo con estos comerciales. Son los YouTubers Rhett y Link. Aquí algunos ejemplos:

Un quiropráctico le saca conejos a dulces señoritas. (5 millones de visitas)

Un taxidermista. (14 millones de visitas)

Un cantante-mecánico turco (supongo) anunciando su taller de reparación de transmisiones (3 millones y medio de visitas)

Y todo esto con un costo de producción de bajo a muy bajo.

Conclusiones

Lo que hay que analizar son los resultados reales en ventas después de estos éxitos mediáticos en el mundo virtual, como toda publicidad. ¿La funeraria vendió más cajones? ¿El Quiropráctico consiguió más pacientes? Sólo allí se podría decir que se tuvo éxito a costa de nuestra curiosidad y afán de olisquear lo novedoso, lo llamativo; y muchas veces, lo escandaloso.

¿Y ustedes qué piensan?

Categorías
Comunicación

Crear marcas fluídas

Si quieres a tu marca, déjala libre, nos recomienda Smashing Magazine y nos pone ejemplos de marcas que ya no se limitan a un solo tipo de logotipos unidireccional y aburrido. ¿Se acuerdan de los Googles Doodles? Bienvenidos a la era de las marcas fluidas.

Algunos ejemplos:

Lo que cambia en el logo de DC se refiere al disfraz de los personajes de dichos cómics.
Lo que cambia en el logo de DC se refiere al disfraz de los personajes de dichos cómics.
La fluidez de Oreo gira más que en la marca, en el símbolo del producto mismo, la clásica galleta.
La fluidez de Oreo gira más que en la marca, en el símbolo del producto mismo, la clásica galleta.
Variaciones del logo de la Ciudad de Melbourne.
Variaciones del logo de la Ciudad de Melbourne.
En Aol lo importante es el fondo, manteniendo la misma tipografía del logo.
En Aol lo importante es el fondo, manteniendo la misma tipografía del logo.

Esta aproximación a una marca más libre de ataduras de manuales de marca no quiere decir que se diluya la importancia de la identidad de la misma. Escribir un buen manual de marca permite establecer la visión de las expresiones que se quieren tener con ella. Sin embargo, el proceso de diseño trata más de generar variantes que establecer patrones pre-establecidos. Las guías de estilo deben dejar a los diseñadores experimentar y añadir elementos que refuercen la coherencia interna de la marca y le añadan impacto y poder.

Asimismo, está claro que la identidad de marca ya no es un camino unidireccional, sino que tiene que interactuar con las audiencias online y offline.

Enlace: If You Love Your Brand, Set It Free

Categorías
Diseño web

29 sitios web con diseño responsivo

El diseño responsivo (responsive web design) ya es una realidad y las grandes empresas lo están usando como solución para el rediseño de sus sitios web.

The Next Web ha hecho una recopilación con 29 diseños sitios web que usan esta tendencia. Pongo los más resaltantes a continuación.

1. BBC

BBC responsive web

2. Disney

Disney web

3. Harvard University

Harvard responsive web

4. Time

Time responsive web

5. Starbucks

Starbucks web

6. Sony

Sony responsive web

7. Microsoft

mshp-design-devices

Mientras que aquí en mi Universidad hemos también lanzado la versión beta de nuestro sitio de noticias totalmente responsivo.

Udep Hoy

Udep Hoy