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.

Should web designers do their own HTML/CSS?

After reading this post I wanted to post a comment, but as I began writing it sort of grew into a post by itself, so here is my response:

I think web designers should know how to build with (X)HTML/CSS but no more than an architect knows how to build with formworks and concrete. Designers think websites while coders build those websites just like architects think buildings while masons construct those buildings.

In circumstances, it is an advantage to know little of the tech details because that innocence allows for greater revolutionary thinking. Many designers who also code themselves restrict unconsciously their designs to what they can code – or to that which won’t mean a hard work to get it coded. I speak for my own experience.

At the same time, I think that knowing to code does not make a designer, just like knowing how to use concrete or formworks does not make you an architect. There are coders out there who call themselves “web designers”, but have no clue about design, about web principles, about proportion, space, hierarchy, order, balance, contrast, usability, consistency and all which makes great design great.

So while it is true that a designer who does not know HTML/CSS cannot call himself a web designer, the contrary is also true: a person who knows HTML/CSS cannot call himself a web designer if he has no formation whatsoever in design. And, by the way, print design formation helps much because much of the best principles and practices in design are universal and apply to both the offline and online spheres.

By the way, where is Flash in this debate? Or a Flash web designer is not a web designer?