Diseño Web - Tendencias
Diseño Web - Tendencias
Diseño Web - Tendencias
DISEÑO
GRUPO #2:
KEYDI YOSSARI MENDEZ #10
LOHANY KASSANDRA MARQUEZ #12
STHEPANIE KRISTELL MARTINEZ #21
YANORI MILAGROS FLORES #24
ANGEL GUILLERMO HYDE #28
CARLOS EDUARDO CASTRO #30 COORDINADOOR
JOSE ALEJANDRO ARIAS #43
LUIS ANGEL ALVARADO #49
WALTER ALEJANDRO CRUZ #54
2
TENDENCIAS DEL
AÑO 2015
3
1. Diseño plano
El diseño plano o flat design es una tendencia creciente en este momento. Este diseño deja de
lado el uso de relieves, texturas, sombras o degradados y se centra en el minimalismo. Los
diseñadores han entendido la ventaja de utilizar elementos simples, suaves y limpios en las
pantallas plana
2. Colores pastel
Los colores pastel están de moda en el diseño gráfico. El principal motivo es lo bien que
combinan con el diseño plano (que como ya hemos dicho es otra de las tendencias de 2015).
3. Uso de ilustraciones
Las ilustraciones parecen estar desplazando a las fotografías procedentes de bancos de
imágenes. Con su uso se consigue lanzar un mensaje único de la marca y son
difíciles de duplicar.
4. Tipografía manuscrita
La caligrafía Hand Lettering, que simula la escritura a mano está ganando enteros
rápidamente entre los diseñadores ya que es un estilo atractivo y con un punto de
nostalgia. Estas tipografías ya se empezaron a usar mucho en 2014 y es de esperar
que sigan entre las favoritas.
5
5. Un nuevo tipo de archivo: SVG
SVG significa Gráficos Vectoriales Escalables (por sus siglas en
inglés). SVG es un formato de imagen vectorial basado en XML. La
principal ventaja de este tipo de archivos es que las imágenes no
pierden calidad se impriman al tamaño o a la resolución que se
impriman.
6
7. Lo real gana a lo digital
Parece que en la época de los nativos digitales, la gente está volviendo a apreciar
más lo real por encima de lo artificial. Esto se traduce en la preferencia por los
elementos dibujados a mano frente a los hechos exclusivamente con ordenador.
8. Fondos difuminados
Este año, los fondos difuminados y los fondos desenfocados en capas detrás del
texto han estado en alza en la publicidad y en el diseño, y las búsquedas de
«difuminado» aumentaron un 144%
7
9. Lineal.
La estética global mantiene su tendencia hacia la simplicidad, con iconos delineados y otros
estilos lineales en alza. Las búsquedas de «icono lineal» aumentaron un 921%
10. Hipster.
Estilo asociado a lo vintage, lo alternativo y lo independiente; un look y una interpretación
absolutamente particular, y una sensibilidad variada, inclinada a estilos de vida alternativos,
que se arraiga en el rechazo a las corrientes culturales predominantes.
8
◇ Flat Design
9
TENDENCIAS DEL
AÑO 2016
10
1. Vuelta a las ilustraciones y animaciones
En los últimos años, pasamos de las ingeniosas (aunque a veces pesadas)
animaciones en flash al total protagonismo de las imágenes, cuanto más
grandes mejor. Una foto potente no va a dejar de tener protagonismo,
pero vamos a volver a disfrutar de las ilustraciones, vectores y
animaciones de una manera más moderna y menos pesada para la
navegación.
11
3. Scroll infinito
El scroll seguirá siendo el amo y señor de los diseños durante este
nuevo año, con páginas infinitas, lo que facilitará la aparición de
story tellings, diseños en parallax y páginas corporativas cada vez
más usables e intuitivas.
4. Parallax
Siguiendo en la misma línea que comentábamos, el parallax sigue
en alza, y ofreciendo mucho juego para los diseños, desde el más
sencillo al más original, como éste con banda sonora sobre la
evolución de la marca Porsche
5. Tipografías al poder
El diseño tipográfico vuelve con más fuerza que nunca, tanto en
diseño gráfico como web, lo cual nos encanta. El arte de la
tipografía resurge para hacer juegos de palabras, superponerse en
las imágenes o protagonizar nuestra página principal.
12
6. Minimalismo
Como hemos diseño, menos es más. Queremos menos anuncios, menos banners, todo
más resumido y agradable a la vista. Diseños sencillos y claros que hagan de la
navegación una experiencia cada vez mejor y que no resulten recargados en las
versiones móviles
Ejemplo: Netflix
13
7. Menús hamburguesa
Los llamados “hamburguer menu”, que podemos ver en multitud de webs hoy en día,
sobre todo tiendas online, van a seguir marcando tendencia por su sencillez y mejora de
la tasa de conversión en ciertas páginas. También se asocia con la comodidad y
discreción, que permite centrarse al usuario en otros elementos de la página. Por ese
mismo motivo, debemos de usarlo solamente en las páginas que puedan sacar
rendimiento de él, y no en las que nos interesa que el menú esté siempre visible, donde
optaremos por un menú fijo. Ejemplo: Shein
14
8. Interactuación con la página
Las micro-interacciones seguirán siendo parte importante de
los diseños web, otorgando cada vez más protagonismo al
usuario. La idea de que la web se vaya adaptando a nuestros
gustos sigue creciendo y la tecnología seguirá trabajando en
ello durante los próximos años para mejorar la experiencia
individual del usuario
9. Cookies
¿Y cómo se mejora la experiencia del usuario? Como ya
contábamos en nuestro anterior artículo de tendencias web, en
el camino a la web 3.0 veremos cómo, a través de las cookies,
estadísticas de Google y demás, la navegación cada vez será
más personalizada mostrándonos los anuncios relacionados
con nuestros gustos, nuestras costumbres, localización… Algo
que ya vamos viendo poco a poco y que aumentará debido al
auge de la web semántica y la inteligencia artificial.
15
10. RWD (Responsive Web Design)
Por último, pero no menos importante, el diseño web adaptativo. La
tendencia es que los diseños sean usables independientemente del
dispositivo que usemos para visualizarlos. Es algo tan relevante, que
Google comenzó en 2015 a penalizar en el posicionamiento a las
webs que no utilizaran diseño responsive. Una preferencia que se ha
convertido en obligada y necesaria por el aumento exponencial de la
navegación y compra online a través de dispositivos móviles.
16
TENDENCIAS DEL
AÑO 2017
17
1. Inmersión, el video full-screen
El vídeo puede ser una forma rápida y eficaz de captar la atención del usuario en pocos
segundos. Se dice que la vista es uno de los sentidos más poderosos del ser humano, y
una gran y simple imagen puede ser capaz de resumir el mensaje y tono de voz de una
forma más eficiente. Las imágenes siempre han tenido un papel relevante en el diseño
web, y poco a poco, esta dando paso a su sucesor natural, el vídeo. La principal razón del
aumento de su uso es el dinamismo que aporta, y la capacidad de introducir el
storytelling en nuestra web.
18
3. Degradados y colores vivos
2013 nos trajo el Flat design (Diseño plano) el cuál fue adaptado por los
diseñadores web muy rápidamente. El Flat design es muy práctico y eso a
permitido que perdure hasta hoy. De hecho, se cree que los elementos más
simples consiguen una mejor experiencia de usuario. En 2016 los diseñadores
empezaron a ampliar las posibilidades de este tipo de diseño incorporando
colores vivos y degradados en lugar de los simples y planos colores usados
anteriormente. Incluso Instagram se unió a esta tendencia, no sin levantar la
polémica. Usar los colores vivos es una inyección de energía y dinamismo en
un proyecto fuera de lo común. Ser valiente y experimentar puede marcar la
diferencia.
4. Ilustraciones
Las ilustraciones aportan un aspecto más personal y característico, lo cual
puede ser difícil de conseguir con la fotografía. La ilustración, puede crear una
sensación de acercamiento con el usuario y credibilidad. Este medio puede
llegar a ser muy versátil, muchas marcas han optado por ilustraciones liniales
para conseguir un look sofisticado, sin embargo otras, optan por otro estilo
más cómico para connotar más diversión. Incluso se tipografías. Las usan en
animaciones o combinadas con la fotografía y tipografías. Las ilustraciones
19 tienen un poder de conexión con el usuario, esto es lo que le lleva a
5. Romper las retículas
Cada vez las páginas web se asemejan más unas a otras debido al diseño responsive, un diseño de
rejilla y columnas de forma equilibrada y que permiten una gran experiencia de usuario. Pero
empieza a ser aburrido, y algunas veces restrictivas y rígidas, limitando la creatividad. En un intento
de crear experiencias digitales que rompan con la tradición, muchas web y diseñadores están
experimentando con un tipo de layout que rompa las rejillas.
6. Parallax
El parallax vino para quedarse, y es que el dinamismo que aporta a un sitio web es tal, que sigue
siendo un elemento que aporta un toque diferente al resto de webs. Muchas marcas son las que lo
usan de forma creativa creando sitios web innovadores.
20
07. Más cartas
Cartas de nuevo, su uso no es nuevo, pero se su funcionalidad lo está convirtiendo de nuevo en
tendencia de nuevo influenciado por el diseño para dispositivos móviles. Según Google en 2015,
anunció oficialmente que los móviles habían superado en uso a los dispositivos de sobremesa, un
dato que los diseñadores no pudieron pasar por alto y han ido implementando. Este sistema permite
una buena adaptación tanto para pantallas grandes como pequeñas, consiguiendo una buena
organización y mostrar gran volumen de información al mismo tiempo, permitiendo a los usuarios
un vistazo rápido del contenido disponible. Facebook o Netflix pueden ser un buen ejemplo.
8. Micro-interacciones
Desde una perspectiva de experiencia de usuario, las micro interacciones no son sólo pequeñas
animaciones, son una manera de interactuar con el usuario. Permite a los usuarios saber qué está
pasando, qué ha pasado, y que pasará después si interactúan. El famoso like de Facebook es un
ejemplo claro. Muchos diseñadores son capaces de añadir efectos divertidos en estas interacciones,
entreteniendo al usuario al mismo tiempo que se le informa. Estos efectos permiten hacer el sitio
web más usable, una respuesta más humanizada y dar a conocer al usuario que hacer y qué está
pasando. Puede hacerlo todo más fácil y simple de una forma divertida.
21
9. Tipografía
Gracias al incremento de los proveedores de tipografías digitales gratuitas tales
como Google Fonts o Typekit han sido muchos los diseñadores en aumentar las
posibilidades del uso de la tipografía en diseño web. Esto abre un gran abanico de
posibilidades con los que los diseñadores estamos encantadas de jugar. Permite
aportar más identidad, crear más marca, y un sinfín de posibilidades gráficas.
22
Micro
interacciones
Retículas en la
Web
23
TENDENCIAS DEL
AÑO 2018
24
1. Diseño de pantalla dividida en vertical
Con el objetivo de mostrar la información de forma más clara
y sencilla, las tendencias en Diseño Web 2018 usarán cada
vez más pantallas divididas como inicio de la página. Para así
mostrar de forma elegante, irreverente y concisa la
información con títulos H1 y H2. Esta tendencia va muy de la
mano con la presentación modular.
2. Tipografía Handmade
Lo "handmade" (escrito a mano) y cercano está de moda,
especialmente porque brinda una mejor experiencia al
usuario, quien percibe sitios con tipografías "handmade"
como más cercanos y confiables. Tipografía Handmade
25
3. Imágenes de ancho completo o Hero
Esta tendencia está relacionada con las pantallas
divididas, pues buscan la forma de impactar los
sentidos del usuario. Vamos a ver mucho
imágenes anchas full screen, también llamadas
imágenes Hero, su principal propósito es llamar
la atención de los usuarios.
4. Publicidad nativa
Este punto es muy importante, ya se dejaba ver,
pero ahora es un hecho, la publicidad invasiva
debe desaparecer. Se dará paso a la publicidad
nativa, ésta no deberá ser percibida por tus
usuarios como publicidad, sino como parte de tu
contenido editorial.
5. Colores brillantes y fluorescentes
La tendencia en colores es que todo luzca
espectacular, comenzando por el blanco, el cual es
el color de temporada que te ayudará a darle luz a
tu página web. Tomando en cuenta lo minimalista,
el blanco ayuda a dar la apariencia de gran
espacio, mezclado por supuesto con colores
vibrantes e intensos.
27
7. Optimizar los elementos gráficos
Aunque por supuesto, debes tener en cuenta la optimización
de todos los elementos gráficos que uses, deberías recurrir al
formato SVG.
28
9. Que la web no sea estática
Para agregarle mayor originalidad y dinamismo a tu página web, puedes y deberías
agregar videos en HTML5. Los videos son una gran tendencia que continúa con fuerza
este 2018, por su gran capacidad de conectar a los usuarios con las experiencias que
quieres transmitirles
30
TENDENCIAS DEL
AÑO 2019
31
1. Mobile First
Ah… esos tiempos en los que hablábamos de
Responsive Design. Ahora eso es cosa del pasado, eso
se da por hecho. Una web que no es responsive es
como un coche sin cinturones: una reliquia. La
tendencia ahora es tener una web «Mobile First».
2. Títulos grandes
Esta tendencia de diseño web es de las que más me ha
costado implementar en 2019. El motivo es que soy
una persona algo tímida, y poner unos titulazos nada
más entrar en una web me da algo de corte.
32
3 Tipografías cuidadas.
Esto de las tipografías ha pasado a otro nivel en 2019.
Hemos pasado de ver «Roboto», «Lato» y «Open Sans»
a ver una variedad de tipografías muy interesante. De
hecho, la parte más interesante de esta tendencia de
diseño web yo diría que es que por fin hemos dado el
salto sin miedo a las tipografías con serifas en web.
33
5. Ilustraciones
Cada vez veo más webs con ilustraciones
personalizadas. Esta tendencia está pisando fuerte
por dos motivos:
-Porque aportan personalidad, sobre todo en
empresas de servicios que no tienen producto a
mostrar.
-Porque en formato SVG pesan muchísimo
menos que una imagen en .png o .jpg, y eso ayuda
a la velocidad de carga de la web.
6. Animaciones
Con las ilustraciones personalizadas parece que han
venido también las animaciones. Las posibilidades
son infinitas, ya que gracias al avance de los
navegadores podemos animar cualquier imagen sin
necesidad de crear GIFs. Buena noticia pues un
GIF suele pesar mucho.
34
7. Minimalismo
Hace años que el minimalismo es una tendencia en diseño
web. De hecho, desde lo del Flat design. Esta tendencia
cobra especial importancia si tenemos en cuenta la
cantidad de webs que llegamos a ver en un día. Y
muchas de ellas tienen estilos diferentes. El minimalismo
en 2019 pretende aliviar el dolor de cabeza en términos de
diseño web. Mantener la pantalla limpia, sin demasiadas
florituras, nos permite navegar más tiempo por una web
sin que nos explote la cabeza.
8. El diseño material
(o material design) es una tendencia impulsada sobre todo
por Google, en el que recuperamos algunos elementos
del maximalismo de las décadas de los 90 y 2000.
Entre otras cosas recuperamos los sombreados, los
degradados, animaciones y formas más naturales. Así
devolvemos la profundidad y naturalidad a los elementos
digitales: los acercamos más a una experiencia física.
35
9. Colores vibrantes
La tendencia del punto anterior nos ha
llevado a arriesgar más con los colores. La
mayoría de webs tienen el fondo blanco,
con lo que aplicar colores vibrantes nos
aporta las vitaminas que tanto
necesitan para llamar la atención.
10. Degradados
Degradados o gradientes. La era del brilli
brillo ha vuelto este 2019 gracias a la
explosión de colores y los degradados
tienen mucho que ver. no es fácil de
dominar ya que cualquier combinación de
colores no nos sirve. Tienen que ser colores
que se complementen y que se integren
bien en todas sus tonalidades.
36
TENDENCIAS DEL
AÑO 2020
37
1. Minimalismo: menos es más
Seguro que has escuchado alguna vez que menos
es más, y con razón, ya que a veces intentamos
abarcar en una misma página muchas de las
acciones que debe realizar el usuario, perdiendo el
foco final. Las páginas sencillas y limpias no solo
son más atractivas a la vista, sino que suelen
convertir mejor, ya que es más fácil captar la
atención del usuario cuando estamos ante un
diseño más lineal que en uno lleno de elementos.
38
3. El usuario es el rey (UX)
Debemos de diseñar teniendo en cuenta a los usuarios. Si tenemos un buen contenido para
ellos, tendremos un buen contenido también de cara a Google.
Una experiencia de usuario positiva es esencial y determinará la confianza que sienta con
el sitio web que está visitando en ese momento.
39
5. Tipografías sencillas y llamativas
Las tipografías sencillas siempre son tendencia en diseño, ya que son fácilmente legibles para todo el
mundo. A veces ponemos tipografías caligráficas que pueden ser muy estéticas y darle un toque a la
web, pero como te he dicho unos puntos más arriba, el usuario es el rey y tenemos que hacerle fácil su
navegación.
41
9. Los chatbots están para quedarse
Si tenemos un ecommerce, una página de servicios o vendemos algún curso (entre otros
ejemplos), un chatbot puede ser decisivo en el proceso de compra de un cliente potencial.
El objetivo es resolver las dudas de esta persona y que acabe terminando el proceso de
compra.
42
Imágenes HERO
mejoradas
Tipografías más
sencillas y
mejoradas
43
TENDENCIAS DEL
AÑO 2021
44
1. Colores brillantes e intensos
Empezamos fuerte, por la paleta de colores, uno de los
elementos creativos más importantes de una web y que
es de los primeros que debes establecer.
En lo referente a colores, las tendencias actuales van en
la dirección de tonos brillantes e intensos, que
refuercen el mensaje de forma visual, creando
combinaciones creativas muy potentes.
2 Elementos flotantes
Los elementos flotantes han llegado al diseño web para
quedarse y seguro que ya has empezado a verlos. Se
trata de crear composiciones que fluyan en torno a los
diferentes elementos del sitio (textos, imágenes, etc) o
en múltiples columnas. El resultado es una especie de
efecto en movimiento, pero de forma estática.
45
3 Mezcla de fotografía con gráficos
La combinación de fotografías y gráficos es otra de
las tendencias en diseño web para 2021, ya que, al
combinar los dos tipos de contenido, se consigue un
resultado muy creativo y moderno.
4. Elementos apilados
Los elementos que se apilan unos sobre otros son
una buena idea para maquetar páginas con mucho
contenido, pero en las que no queremos que el
usuario haga un scroll muy largo a la hora de
navegar. Por lo tanto, esta técnica es muy
interesante para concentrar contenido en el mismo
campo de visión de la web.
46
5. Degradados / transparencias
Los degradados son otra de las tendencias que están
en vigor desde hace un tiempo y que seguirán estando
durante 2021.
Combinar varios tonos para crear gamas de colores
modernas y atrevidas es un plus en el diseño web
actual.
6. Interactividad
Las formas de interacción del usuario con los sitios
web también son una de las tendencias en diseño web
que ya llevan un tiempo en vigor.
Se trata de pequeñas acciones que se producen cuando
el usuario realiza una interacción con alguno de los
elementos que forman parte del diseño.
47
7. El énfasis en los datos
Mostrar una gran cantidad de datos es importante en determinados
tipos de negocios o sectores. Si tu web se encuentra en este caso, te
anticipo que hay posibilidad de mostrar estos datos de forma creativa.
Puedes recurrir a elementos como contadores, barras, vectores o
animaciones para mostrar muchos datos de forma creativa.
8. Textos animados
Ya has visto que las animaciones y los elementos interactivos son otra
de las tendencias en diseño web para 2021, también en lo que a textos
se refiere. Los textos animados han llegado para quedarse y el resultado
es
9. Realidad virtual
La realidad aplicada en diseño web permite crear entornos con apariencia real
para transmitirle al usuario la sensación de estar dentro de esa escena.
Para ver ejemplos muy buenos de esta tendencia, te recomiendo visitar la web
de IKEA, donde han creado marcos de realidad en las que el usuario puede
interactuar y comprobar cómo quedaría cualquier estancia de su hogar en
tiempo real
49
Realidad Virtual
Elementos en la Web
Desplazables
Textos animados
50
Gracias!