Tendencias diseño web 2014

tendencias diseño web 2014

Estamos a 1 de Enero de 2014 y toca hacer de vidente. Estas serán para mi las 8 tendencias principales en diseño web que dominarán este 2014 que justo hoy empieza. Muchas ya empezaron a aparecer en 2013 pero se harán especialmente dominantes en 2014:

1) RESPONSIVE: Algo por todos conocido: páginas con layout responsivo para adaptarse a la multitud de tamaños y resoluciones de pantalla. En consecuencia irremediable, adiós a las versiones mobile de los sitios web.

Ejemplo: http://worldwildlife.org/

2) INFINITE SCROLLING: Popularizado inicialmente por Facebook y seguido por Pinterest o Tumblr, el contenido se va cargando a medida que bajas la página, y no llegas a paginar nunca.

Ejemplo: http://eurekasoft.com/

3) SINGLE PAGE WEBSITES: En parte relacionado con la tendencia anterior, en 2014 se verán más y más sitios web donde no se navega, sinó que está todo reunido en una página. Un sitio web entero en una sóla página. Una evolución de esta tendencia es abrir enlaces no en una página nueva, sinó en una capa por encima. La gente no quiere abandonar nada, quiere echar vistazos y leer sin que visualmente se pierda lo anterior.

Ejemplo: http://www.lexusls.asia/

4) FIXED HEADER: La vuelta de un clásico, antiguamente realizado con frames dentro de un , y ahora con CSS. No se pierde nunca el menú de navegación, por mucho que bajes queda fijo arriba.

Ejemplo: http://www.fhoke.com/

5) LARGE PHOTO BACKGROUNDS: Las conexiones rápidas actuales permiten cargar casi inmediatamente enormes y espectaculares imágenes de fondo. Dado que tienen un impacto visual muy importante, están predestinadas a ser más omnipresentes. La evolución de esto son los vídeos a todo el ancho y en el fondo, que ya empiezan a verse.

Ejemplo: http://taasky.com/

6) READ LESS, WATCH MORE: Hace tiempo que el vídeo se incursionó en los sitios web como un complemento muy útil, pero poco a poco ya no es complemento sinó que sustituye casi por completo el texto. Ponle a un usuario un párrafo de 400 palabras y un vídeo de 20 segundos y el 80% le dará al play antes que leer. Como epítome de esta tendencia encontramos sitios web donde la home es un vídeo (VIDEO AS HOME).

Ejemplo: http://y.co/

7) NAVEGACIÓN ESTILO METRO: Menús gigantescos, enormes, con navegación al estilo cajas de Windows 8. Cuadros de contenido uno tras otro, con efecto hover, siguiendo el estilo de Windows 8.

Ejemplo: http://theme.crumina.net/index.php?theme=onetouch

8) FLAT DESIGN: Diseño plano con pocas sombras, nada de biseles, brillos y resplandores, siguiendo el estilo de iOS 7.

Ejemplo: http://digital-minded.ca/

Acentos catalán en HTML

Para saber cómo reproducir los acentos (tildes, en realidad) del catalán en HTML, hay algunas páginas en Internet con las entidades HTML que representan los acentos del catalán, pero algunas tienen algún pequeño error (como dejarse algún punto y coma) y otras no dejan ser copiadas con un doble click, con lo cuál seleccionar para copiar en tu documento se hace lento y engorroso.

Como me hacía falta a mi, ésta es una lista definitiva de acentos en catalán en HTML:

Acentos catalán HTML
Símbolo Entidad acento HTML Símbolo Entidad acento HTML
À À à à
È È è è
É É é é
Í Í í í
Ï Ï ï ï
Ò Ò ò ò
Ó Ó ó ó
Ú Ú ú ú
Ü Ü ü ü
Ç Ç ç ç
· ·

Aparte de los acentos en catalán en HTML, la lista también da el código HTML para algunos símbolos comunes de la grafia catalana, como la la L geminada (como en col·lapsar) o la cé trencada (como en avenç).

Las capas del diseño web

Desmenuzar el proceso de diseñar en varias capas es una manera muy útil de asegurarnos de que el diseño que produzcamos será completo e integral. El proceso del diseño se divide en capas. Hay diseñadores que dividen en capas su trabajo de un modo diferente, pero para mi ésta es la opción con la que me encuentro más cómodo:

  • Arquitectura de Información – Empieza decidiendo o planificando qué información está disponible, y dónde, cuando y bajo qué condiciones.
  • Comportamientos de interfaz – A veces se requieren o son aconsejables comportamientos de interfaz específicos. Estos comportamientos suelen afectar el diseño tanto desde el punto de vista funcional como desde el visual.
  • Jerarquía visual del contenido – Suele ser beneficioso para aportar pistas sobre lo que es más importante del sitio web, qué es lo siguiente en importancia, y así con el resto de elementos.
  • Layout – La parrilla visual fundamental en la que se alojan los elementos mencionados anteriormente.
  • Estilo – El look&feel del sitio web debe soportar y dar un aspecto a todo lo anterior y relacionar todos los elementos anteriores de una manera limpia y armónica

Cada capa es importante y, cuando se trabaja bien, contribuye a la totalidad del diseño. Olvida una de las capas y el diseño se resentirá y no alcanzará su potencial. En general, los diseños que ignoran alguna de estas capas son, simplemente, diseños pobres.