SlideShare a Scribd company logo
1 of 21
Download to read offline
TENDENCIAS DE DISEÑO WEB
2016
Lo “OUT”
Sitios construidos en flash

Skewmorfismo: Sombras, degradados, texturas

Versiones móviles en lugar de un solo diseño
responsivo
Skewmorfismo
Conocido también como "Realism"
Del griego skeuos (herramienta) y
morphe (forma)

Mantiene detalles del diseño del
objeto original con el objetivo de
hacerlo más familiar para el usuario
SKEWMORFISMO
LO “OUT”
VERSIONES MÓVILES
LO “OUT”
WEB DESIGN TRENDS 2015 - 2016
FLAT DESIGN, CARD DESIGN, RESPONSIVE, TIPOGRAFÍA, SCROLLS...
Lo “IN”
Elementos de navegación
One page

Endless scrolling 

Parallax Animaciones en scroll

Web responsive y atención a mobile

Card design
Lo “IN”
Elementos de diseño
Flat design

Paletas limitadas de color

Tipografía experimental y de gran tamaño

Big backgrounds (imágenes, animaciones o
videos)
Flat design
• Yuxtaposición con Skewmorfismo
FLAT VS. REALISM
HTTP://WWW.FLATVSREALISM.COM
Flat design
Características
• Sombras largas, contrastantes y cortantes
• Paleta de color limitada con tonos brillantes y
contrastantes
• Tipografía sencilla
• "Ghost button"
• Minimalismo
TIPOGRAFÍA EXPERIMENTAL Y DE GRAN TAMAÑO
TIPOGRAFÍA EXPERIMENTAL Y DE GRAN TAMAÑO
BIG BACKGROUNDS / BIG BACKGROUND VIDEO
BIG BACKGROUNDS / BIG BACKGROUND VIDEO
BIG BACKGROUNDS / BIG BACKGROUND VIDEO
HTTP://WWW.DADAABSTORIES.ORG
BIG BACKGROUNDS / BIG BACKGROUND VIDEO
HTTP://WWW.BARRELNY.COM/RECAP/2012/
BIG BACKGROUNDS / BIG BACKGROUND VIDEO
CARD DESIGN
Acerca de las tendencias
• Un último consejo...
• No sigas las tendencias sólo porque son "cool" y
tod s debamos seguirlas. Las tendencias
representan técnicas populares por una razón
pero hay que asegurarse que representen lo
mejor para nuestros usuarios.
Busca siempre inspiración
Siteinspire

www.siteinspire.com

Design Shack

designshack.net

Webcreme

www.webcreme.com

AWWWARDS

www.awwwards.com

Flat Design en AWWWARDS

http://www.awwwards.com/websites/flat-design/

One Page Love

https://onepagelove.com

More Related Content

Similar to Tendencias de diseño web 2015 - 2016

Manual de Identidad Visual: Desadaptados
Manual de Identidad Visual: DesadaptadosManual de Identidad Visual: Desadaptados
Manual de Identidad Visual: Desadaptadosjoaquinmansilla2
 
Blogs, Redes Sociales y el Diseño actual SMCMX
Blogs, Redes Sociales y el Diseño actual SMCMXBlogs, Redes Sociales y el Diseño actual SMCMX
Blogs, Redes Sociales y el Diseño actual SMCMXAdan Avelar
 
Historia y evolución del diseño de interfaces visuales
Historia y evolución del diseño de interfaces visualesHistoria y evolución del diseño de interfaces visuales
Historia y evolución del diseño de interfaces visualesAdriana Tienda
 
Day 2: ¿Cómo personalizar mi Campus Virtual?
Day 2: ¿Cómo personalizar mi Campus Virtual?Day 2: ¿Cómo personalizar mi Campus Virtual?
Day 2: ¿Cómo personalizar mi Campus Virtual?Chamilo Association
 
Front end basics - Responsive Web Design
Front end basics - Responsive Web DesignFront end basics - Responsive Web Design
Front end basics - Responsive Web DesignNadal Soler
 
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & InterfacesTaller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & InterfacesJorge Barahona Ch.
 
Diseña tus aplicaciones multiplataforma
Diseña tus aplicaciones multiplataformaDiseña tus aplicaciones multiplataforma
Diseña tus aplicaciones multiplataformaPlain Concepts
 
Adobe flash garcia
Adobe flash garciaAdobe flash garcia
Adobe flash garciaflor garcia
 
10 Ejemplos para potenciar tu Marca
10 Ejemplos para potenciar tu Marca10 Ejemplos para potenciar tu Marca
10 Ejemplos para potenciar tu MarcaAdolfo Morales
 
Rediseño para el sitio web Canaima GNU/Linux
Rediseño para el sitio web Canaima GNU/LinuxRediseño para el sitio web Canaima GNU/Linux
Rediseño para el sitio web Canaima GNU/LinuxMaximiliano Vilchez
 
Tendencias en Diseño Web
Tendencias en Diseño WebTendencias en Diseño Web
Tendencias en Diseño WebAbel Alvarez
 
Principios de usabilidad y creación de contenido para móviles
Principios de usabilidad y creación de contenido para móvilesPrincipios de usabilidad y creación de contenido para móviles
Principios de usabilidad y creación de contenido para móvilesIván Alarcón
 
älife 02- Revista de marketing y publicidad
älife 02- Revista de marketing y publicidadälife 02- Revista de marketing y publicidad
älife 02- Revista de marketing y publicidadäbranding
 

Similar to Tendencias de diseño web 2015 - 2016 (20)

Manual de Identidad Visual: Desadaptados
Manual de Identidad Visual: DesadaptadosManual de Identidad Visual: Desadaptados
Manual de Identidad Visual: Desadaptados
 
SharePoint Saturday Lima - Como me veo!
SharePoint Saturday Lima -  Como me veo!SharePoint Saturday Lima -  Como me veo!
SharePoint Saturday Lima - Como me veo!
 
Blogs, Redes Sociales y el Diseño actual SMCMX
Blogs, Redes Sociales y el Diseño actual SMCMXBlogs, Redes Sociales y el Diseño actual SMCMX
Blogs, Redes Sociales y el Diseño actual SMCMX
 
Historia y evolución del diseño de interfaces visuales
Historia y evolución del diseño de interfaces visualesHistoria y evolución del diseño de interfaces visuales
Historia y evolución del diseño de interfaces visuales
 
Day 2: ¿Cómo personalizar mi Campus Virtual?
Day 2: ¿Cómo personalizar mi Campus Virtual?Day 2: ¿Cómo personalizar mi Campus Virtual?
Day 2: ¿Cómo personalizar mi Campus Virtual?
 
Terminologis
TerminologisTerminologis
Terminologis
 
Front end basics - Responsive Web Design
Front end basics - Responsive Web DesignFront end basics - Responsive Web Design
Front end basics - Responsive Web Design
 
Que es un diseño web
Que es un diseño webQue es un diseño web
Que es un diseño web
 
Que es un diseño web
Que es un diseño webQue es un diseño web
Que es un diseño web
 
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & InterfacesTaller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
Taller de Diseño UX & Usabilidad Sesión Nº2, Diseño de Interacción & Interfaces
 
3 dslideshare
3 dslideshare3 dslideshare
3 dslideshare
 
Diseña tus aplicaciones multiplataforma
Diseña tus aplicaciones multiplataformaDiseña tus aplicaciones multiplataforma
Diseña tus aplicaciones multiplataforma
 
Adobe flash
Adobe flash Adobe flash
Adobe flash
 
Adobe flash garcia
Adobe flash garciaAdobe flash garcia
Adobe flash garcia
 
10 Ejemplos para potenciar tu Marca
10 Ejemplos para potenciar tu Marca10 Ejemplos para potenciar tu Marca
10 Ejemplos para potenciar tu Marca
 
Rediseño para el sitio web Canaima GNU/Linux
Rediseño para el sitio web Canaima GNU/LinuxRediseño para el sitio web Canaima GNU/Linux
Rediseño para el sitio web Canaima GNU/Linux
 
Tendencias en Diseño Web
Tendencias en Diseño WebTendencias en Diseño Web
Tendencias en Diseño Web
 
Wed
WedWed
Wed
 
Principios de usabilidad y creación de contenido para móviles
Principios de usabilidad y creación de contenido para móvilesPrincipios de usabilidad y creación de contenido para móviles
Principios de usabilidad y creación de contenido para móviles
 
älife 02- Revista de marketing y publicidad
älife 02- Revista de marketing y publicidadälife 02- Revista de marketing y publicidad
älife 02- Revista de marketing y publicidad
 

More from Adriana Tienda

Uso de imágenes en diseño web
Uso de imágenes en diseño webUso de imágenes en diseño web
Uso de imágenes en diseño webAdriana Tienda
 
Historia y evolución del diseño web
Historia y evolución del diseño webHistoria y evolución del diseño web
Historia y evolución del diseño webAdriana Tienda
 
Arquitectura de la información
Arquitectura de la informaciónArquitectura de la información
Arquitectura de la informaciónAdriana Tienda
 
Introducción a HTML y CSS
Introducción a HTML y CSSIntroducción a HTML y CSS
Introducción a HTML y CSSAdriana Tienda
 
Equipos de trabajo // Front end - Back end
Equipos de trabajo // Front end - Back endEquipos de trabajo // Front end - Back end
Equipos de trabajo // Front end - Back endAdriana Tienda
 
Introducción a Experiencia de usuario y Usabilidad
Introducción a Experiencia de usuario y UsabilidadIntroducción a Experiencia de usuario y Usabilidad
Introducción a Experiencia de usuario y UsabilidadAdriana Tienda
 

More from Adriana Tienda (14)

Brief digital
Brief digitalBrief digital
Brief digital
 
Uso de imágenes en diseño web
Uso de imágenes en diseño webUso de imágenes en diseño web
Uso de imágenes en diseño web
 
Historia y evolución del diseño web
Historia y evolución del diseño webHistoria y evolución del diseño web
Historia y evolución del diseño web
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Maquetación web
Maquetación webMaquetación web
Maquetación web
 
Wireframing
WireframingWireframing
Wireframing
 
Arquitectura de la información
Arquitectura de la informaciónArquitectura de la información
Arquitectura de la información
 
Color en diseño web
Color en diseño webColor en diseño web
Color en diseño web
 
Hospedaje web
Hospedaje webHospedaje web
Hospedaje web
 
Nombre de dominio
Nombre de dominioNombre de dominio
Nombre de dominio
 
Maquetación web
Maquetación webMaquetación web
Maquetación web
 
Introducción a HTML y CSS
Introducción a HTML y CSSIntroducción a HTML y CSS
Introducción a HTML y CSS
 
Equipos de trabajo // Front end - Back end
Equipos de trabajo // Front end - Back endEquipos de trabajo // Front end - Back end
Equipos de trabajo // Front end - Back end
 
Introducción a Experiencia de usuario y Usabilidad
Introducción a Experiencia de usuario y UsabilidadIntroducción a Experiencia de usuario y Usabilidad
Introducción a Experiencia de usuario y Usabilidad
 

Recently uploaded

Sesión 02 Buenas practicas de manufactura.pptx
Sesión 02 Buenas practicas de manufactura.pptxSesión 02 Buenas practicas de manufactura.pptx
Sesión 02 Buenas practicas de manufactura.pptxMarcosAlvarezSalinas
 
La arquitectura griega y su legado en la historia
La arquitectura griega y su legado en la historiaLa arquitectura griega y su legado en la historia
La arquitectura griega y su legado en la historiaCamilaIsabelaRodrigu
 
Diagramas de flujo metalurgico en mineria.pptx
Diagramas de flujo metalurgico en mineria.pptxDiagramas de flujo metalurgico en mineria.pptx
Diagramas de flujo metalurgico en mineria.pptxHarryArmandoLazaroBa
 
Gabriela Marcano historia de la arquitectura 2 renacimiento
Gabriela Marcano historia de la arquitectura 2 renacimientoGabriela Marcano historia de la arquitectura 2 renacimiento
Gabriela Marcano historia de la arquitectura 2 renacimientoGabrielaMarcano12
 
FICHAS PARA LA PRIMERA SEMANA SALOME.doc
FICHAS PARA LA PRIMERA SEMANA SALOME.docFICHAS PARA LA PRIMERA SEMANA SALOME.doc
FICHAS PARA LA PRIMERA SEMANA SALOME.docMerlyBrisetTorneroLu
 
Portafolio de Diseño Gráfico por Giorgio B Huizinga
Portafolio de Diseño Gráfico por Giorgio B HuizingaPortafolio de Diseño Gráfico por Giorgio B Huizinga
Portafolio de Diseño Gráfico por Giorgio B Huizingagbhuizinga2000
 
Manual de Normas APA 7ma edición (1).pdf
Manual de Normas APA 7ma edición (1).pdfManual de Normas APA 7ma edición (1).pdf
Manual de Normas APA 7ma edición (1).pdfsteevensnodamartel
 
Triptico de Sistemas anticaídas Arnes.pdf
Triptico de Sistemas anticaídas Arnes.pdfTriptico de Sistemas anticaídas Arnes.pdf
Triptico de Sistemas anticaídas Arnes.pdfMariaGabrielaSandova2
 
Dia mundial de la salud (1).pdf triptico
Dia mundial de la salud (1).pdf tripticoDia mundial de la salud (1).pdf triptico
Dia mundial de la salud (1).pdf tripticoThaisAymeeTacucheBen
 
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdf
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdfLAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdf
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdfBrbara57940
 
Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptx
Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptxDanielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptx
Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptxaurorialfonzo6
 
Medición IRI Diseño de Pavimentos Maestria en Vias Terrestres
Medición IRI Diseño de Pavimentos Maestria en Vias TerrestresMedición IRI Diseño de Pavimentos Maestria en Vias Terrestres
Medición IRI Diseño de Pavimentos Maestria en Vias TerrestresKengYoshiIngaOchoa1
 
Que es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdf
Que es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdfQue es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdf
Que es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdfandrea Varela
 
MARIA ZABALA HISTORIA DE LA ARQUITECTURA II, ARQUITECTURA RENACENTISTA.pdf
MARIA ZABALA HISTORIA DE LA ARQUITECTURA II, ARQUITECTURA RENACENTISTA.pdfMARIA ZABALA HISTORIA DE LA ARQUITECTURA II, ARQUITECTURA RENACENTISTA.pdf
MARIA ZABALA HISTORIA DE LA ARQUITECTURA II, ARQUITECTURA RENACENTISTA.pdfitssmalexa
 
Diseño y análisis de vigas doblemente reforzada
Diseño y análisis de vigas doblemente reforzadaDiseño y análisis de vigas doblemente reforzada
Diseño y análisis de vigas doblemente reforzadaJosAntonioFloresQuis
 
MANUFACTURA AERONAUTICA 2024 presentacion
MANUFACTURA AERONAUTICA 2024 presentacionMANUFACTURA AERONAUTICA 2024 presentacion
MANUFACTURA AERONAUTICA 2024 presentacionssuser1ed434
 
Croquis de Hospital general (Ficticio) con señalizaciones de seguridad
Croquis de Hospital general (Ficticio) con señalizaciones de seguridadCroquis de Hospital general (Ficticio) con señalizaciones de seguridad
Croquis de Hospital general (Ficticio) con señalizaciones de seguridadratc070603hmcmrha7
 
El cómic es algo serio: investigación sobre la realidad latinoamericana de la...
El cómic es algo serio: investigación sobre la realidad latinoamericana de la...El cómic es algo serio: investigación sobre la realidad latinoamericana de la...
El cómic es algo serio: investigación sobre la realidad latinoamericana de la...mariaclaramb
 
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)lemg25102006
 
arquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2darquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2dheribertaferrer
 

Recently uploaded (20)

Sesión 02 Buenas practicas de manufactura.pptx
Sesión 02 Buenas practicas de manufactura.pptxSesión 02 Buenas practicas de manufactura.pptx
Sesión 02 Buenas practicas de manufactura.pptx
 
La arquitectura griega y su legado en la historia
La arquitectura griega y su legado en la historiaLa arquitectura griega y su legado en la historia
La arquitectura griega y su legado en la historia
 
Diagramas de flujo metalurgico en mineria.pptx
Diagramas de flujo metalurgico en mineria.pptxDiagramas de flujo metalurgico en mineria.pptx
Diagramas de flujo metalurgico en mineria.pptx
 
Gabriela Marcano historia de la arquitectura 2 renacimiento
Gabriela Marcano historia de la arquitectura 2 renacimientoGabriela Marcano historia de la arquitectura 2 renacimiento
Gabriela Marcano historia de la arquitectura 2 renacimiento
 
FICHAS PARA LA PRIMERA SEMANA SALOME.doc
FICHAS PARA LA PRIMERA SEMANA SALOME.docFICHAS PARA LA PRIMERA SEMANA SALOME.doc
FICHAS PARA LA PRIMERA SEMANA SALOME.doc
 
Portafolio de Diseño Gráfico por Giorgio B Huizinga
Portafolio de Diseño Gráfico por Giorgio B HuizingaPortafolio de Diseño Gráfico por Giorgio B Huizinga
Portafolio de Diseño Gráfico por Giorgio B Huizinga
 
Manual de Normas APA 7ma edición (1).pdf
Manual de Normas APA 7ma edición (1).pdfManual de Normas APA 7ma edición (1).pdf
Manual de Normas APA 7ma edición (1).pdf
 
Triptico de Sistemas anticaídas Arnes.pdf
Triptico de Sistemas anticaídas Arnes.pdfTriptico de Sistemas anticaídas Arnes.pdf
Triptico de Sistemas anticaídas Arnes.pdf
 
Dia mundial de la salud (1).pdf triptico
Dia mundial de la salud (1).pdf tripticoDia mundial de la salud (1).pdf triptico
Dia mundial de la salud (1).pdf triptico
 
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdf
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdfLAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdf
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdf
 
Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptx
Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptxDanielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptx
Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptx
 
Medición IRI Diseño de Pavimentos Maestria en Vias Terrestres
Medición IRI Diseño de Pavimentos Maestria en Vias TerrestresMedición IRI Diseño de Pavimentos Maestria en Vias Terrestres
Medición IRI Diseño de Pavimentos Maestria en Vias Terrestres
 
Que es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdf
Que es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdfQue es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdf
Que es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdf
 
MARIA ZABALA HISTORIA DE LA ARQUITECTURA II, ARQUITECTURA RENACENTISTA.pdf
MARIA ZABALA HISTORIA DE LA ARQUITECTURA II, ARQUITECTURA RENACENTISTA.pdfMARIA ZABALA HISTORIA DE LA ARQUITECTURA II, ARQUITECTURA RENACENTISTA.pdf
MARIA ZABALA HISTORIA DE LA ARQUITECTURA II, ARQUITECTURA RENACENTISTA.pdf
 
Diseño y análisis de vigas doblemente reforzada
Diseño y análisis de vigas doblemente reforzadaDiseño y análisis de vigas doblemente reforzada
Diseño y análisis de vigas doblemente reforzada
 
MANUFACTURA AERONAUTICA 2024 presentacion
MANUFACTURA AERONAUTICA 2024 presentacionMANUFACTURA AERONAUTICA 2024 presentacion
MANUFACTURA AERONAUTICA 2024 presentacion
 
Croquis de Hospital general (Ficticio) con señalizaciones de seguridad
Croquis de Hospital general (Ficticio) con señalizaciones de seguridadCroquis de Hospital general (Ficticio) con señalizaciones de seguridad
Croquis de Hospital general (Ficticio) con señalizaciones de seguridad
 
El cómic es algo serio: investigación sobre la realidad latinoamericana de la...
El cómic es algo serio: investigación sobre la realidad latinoamericana de la...El cómic es algo serio: investigación sobre la realidad latinoamericana de la...
El cómic es algo serio: investigación sobre la realidad latinoamericana de la...
 
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)
 
arquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2darquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2d
 

Tendencias de diseño web 2015 - 2016