Tendencias de las Web

1. Si te gusta que tu web tenga un estilo actual y destaque sobre las
demás, aquí os dejamos 10 tendencias que, aunque algunas ya las
conoceréis, irán in crescendo en 2015:

2. 
 Las páginas web, como todo, evoluciona con el paso del tiempo.
Vemos como se van adaptando a los cambios sociales y
tecnológicos. Si os paráis a pensarlo, hoy en día, cuando vemos
una página antigua de 800x600px hecha con tablas o con
interminables intros en flash, la primera sensación que dan es
de rechazo. Una web limpia bien montada y ordenada, con fotos
y estilos, invita a seguir navegando e ir descubriendo qué nos
ofrece. Por eso es recomendable actualizar el diseño de nuestra
web cada pocos años, o hacerlo bastante neutro de manera que
nos sirva el mayor tiempo posible. Aunque siempre habrá algo
que se pueda mejorar y las modas irán cambiando
12 tendencias en diseño
web para 2015

3. 
IMÁGENES Y VÍDEOS DE
ANCHO COMPLETO
 Antes teníamos
limitaciones con los
anchos de las páginas que
han ido desapareciendo,
dando paso a un estilo de
imágenes de cabecera de
ancho completo que nos
encanta y nos parece de
un impacto visual
tremendo. Ejemplo:
http://heathlife.co.uk/

4. 
DISEÑO RESPONSIVE O
ADAPTATIVO
 Ya hemos hablado en algún post
anterior sobre el diseño responsive
(http://bit.ly/1twnmze) y lo
importante que es adaptar la web a
los dispositivos móviles en estos
tiempos donde un gran porcentaje de
la navegación se hace ya desde
smartphones y tablets. Por ello
también es importante adaptar el
menú de la web a lo que se llama
menu mobile (las rayitas que
aparecen, normalmente, en la parte
superior izquierda para acceder al
menú). Ejemplo web responsive:
http://www.zara.com/es

5. 
MENÚ FIJO
 Un menú superior
sencillo y que se
mantenga siempre visible,
facilitará la navegación y
hará la web más accesible.
Una tendencia en alza.
Ejemplo:
http://www.ascensionlator
re.com/es/home

6. 
MENOS CLICK Y MÁS
SCROLL
 Hace tiempo, el tener que usar el
scroll para ver entera una página
parecía un pecado mortal. Siempre te
pedían que se viera toda la
información tal cual en la pantalla y,
para ver el resto, navegando por el
menú. Mucha gente sigue pensando
así aún. La tendencia actual rompe
con este sistema ofreciéndonos
páginas interminables en las que
tienes casi toda la información en la
primera pantalla, utilizando el scroll
y, desde ahí puedes acceder a los
puntos más importantes a través de
fotos o iconos. Simplificamos el menú
y la navegación. Un ejemplo de una
original tienda rusa de novias:
http://marytrufel.ru/

7. 
ICONOS EVERYWHERE
Algo que nos encanta, el
protagonismo de los iconos.
Ya sean pictogramas
sencillos u originales dibujos,
nos ayudan a identificar las
categorías visualmente de
una manera rápida y amena.
Por ejemplo:
http://www.bluegg.co.uk/

8. 
PARALLAX
Seguramente las webs más impresionantes que
se pueden ver ahora mismo. Se trata de un
efecto que, al hacer scroll, ves como el fondo se
mueve a diferente velocidad que el contenido,
como en capas. Suelen ser páginas de
navegación sencilla y que le dan importancia a
la fotografía para dar esa sensación de
profundidad. Seguramente habréis visto
muchas con “dos capas”, pero hay trabajos
espectaculares realmente complejos como este:
Atentos a este efecto porque cada vez vais a
verlo más. Nuestro favorito sin duda. Fijaros
en esta divertida partida de Tetris jugada con
el scroll del parallax, que se publicó por el 25
aniversario de la Game Boy:
https://ihatetomatoes.net/happy-25th-birthday-
game-boy/

9. 
BOTONES FANTASMA
 Los botones fantasma o
ghost buttons son formas
planas sin relleno que se
suelen usar para el call to
action (llamada a la acción).
Suelen ser botones simples,
con un trazo tirando a fino,
sin relleno, con textos
simples y algo más grandes
que el resto de botones.
Suelen “camuflarse” sobre
fotografías y en la parte
centras de la pantalla. Un
ejemplo: http://www.iuvo.si/

10. 
ÉNFASIS EN LA
TIPOGRAFÍA
 Cada vez vemos más
diseño tipográfico en las
páginas web, lo cual nos
parece un toque muy
elegante y diferenciador.
Si no, ¿Qué os parece esta
web canina tan divertida?
http://packdog.com/previe
w?hasdog=true

11. 
CARD DESIGN
 Dos estilos de diseño que hay que
empezar a tener muy en cuenta.
El mejor ejemplo de card design
lo tenemos en Pinterest. Coloca
la información en tarjetas,
aparentemente desordenadas,
rompiendo las alineaciones
horizontales y verticales que
resultan más aburridas y más
vistas. Nos evocan los míticos
cromos de cambiar y, a la vez, es
una manera fácil de colocar la
información. Muy válida para el
e-commerce. Un ejemplo que
vemos en dribble
http://bit.ly/1A1grAa.

12. 
FLAT DESIGN
 El flat design o diseño plano
es la alternativa a la
tendencia de las webs que
basan su imagen en grandes
fotografías. Es la vuelta a lo
básico, las formas
geométricas, los iconos y el
dibujo vectorial. Todo en
una presentación, eso sí, con
mucho scroll. Por ejemplo:
http://www.themeskingdom.
com/

13. 
MICROINTERACCIONE
S
 Os habréis dado cuenta que,
cada vez más, os saltan en la
pantalla mensajes para
interaccionar con la página
que estáis viendo, ya sea
suscribiéndote al newsletter,
pulsando algún botón, o
contestando alguna
pregunta. Eso incrementa el
look&feel del usuario, que se
siente parte de la página, no
sólo un espectador como
antaño. Por ejemplo:
http://emptystat.es/

14. 
COOKIES
 El camino hacia la web 3.0 va de la
mano con el creciente “acoso” de las
cookies y los consejos en la publicidad
de las páginas de que compres esto o
veas lo otro porque has estado
navegando por esos lugares. Esta
tendencia, que puede gustar más o
menos, irá en aumento por el avance
de la web semántica y la inteligencia
artificial que tenderán a dirigir la
navegación. Donde más lo notamos
por ahora es en las webs con más
publicidad y las tiendas online.
Podemos ver ejemplos en la
publicidad de Facebook, de Amazon,
etc.