SlideShare una empresa de Scribd logo
1 de 80
Tendencias de estilo en el Diseño
Web:
Un acercamiento a través del tiempo.
Por: M.D. Víctor Luis Juárez Estrada Especialista en Diseño
Interactivo
El origen: 1991
¿Quién comenzó todo ésto?
Tim Berners-Lee
Creador de la WorldWideWeb
Fundador de la W3C
El origen: 1991
Fuente: http://www.w3.org/People/Berners-Lee/Longer.html
Computador NeXT
Apple Inc.
El origen: 1991
Fuente: http://www.w3.org/People/Berners-Lee/Longer.html
La primer página Web del Mundo
El origen: 1991
Fuente: http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
1993
¡Vengan, vengan!
(Encontré algo que les va a gustar)
Se difunde la WWW.
1993
Fuente: http://www94.web.cern.ch/WWW94/Welcome.html
1993
El primer navegador.
Fuente: http://home.mcom.com/home/welcome.html
1994-1995
Ésto no va a durar mucho… No sirve para nada.
1994-1995
Yahoo!
1994
1995
1996
1998
2000
2002
2003
2005
2006
2013
1994-1995
¡Está bueno!
Quiero aprender a hacer páginas web.
1994-1995
La primer guía para Webmasters.
Fuente: http://www.netside.net/boba/webmasters.html
1994-1995
Tu Universidad on-line (Hungría).
Fuente: http://epa.oszk.hu/00000/00019/00059/
1994-1995
Diseño Web “avanzado”.
Fuente: http://www.3riversstadium.com/index2.html
1996-1997
¡Hola!
¿Hay alguien más ahí?
1996-1997
Antes…
Fuente: http://www.google.com/about/company/history/
1996-1997
Después…
Fuente: http://www.google.com/about/company/history/
1996-1997
Google!
Fuente: http://www.google.com/about/company/history/
1996-1997
Los grandes mitos on-line.
Fuente: http://www.princeton.edu/~accion/chupa.html
1996-1997
Explotando Photoshop al máximo.
Fuente: http://www.cchaven.com/
1996-1997
Explorando la composición.
Fuente: http://www2.warnerbros.com/spacejam/movie/jam.htm
1996-1997
El auge de los GIF’s animados.
Fuente: http://www.snowcrest.net/kitty/hpages/index.html
1998-1999
Los pioneros
Aquellos que sólo los conocen en su casa y en un Cyber-Café.
1998-1999
Composición y Jerarquía.
Fuente: http://deniro.jvlnet.com/
1998-1999
El PEOR navegador de la Historia.
Fuente: http://toastytech.com/evil/index.html
1998-1999
Los efectos producidos por
computadora comunican la
vanguardia de todo tipo de
tecnología.
La usabilidad y
experiencia del usuario
eran temas aún
impensables.
Fuente: http://www.mipg.upenn.edu/~Vnews/
1998-1999
El uso del color.
Fuente: http://www.randomhouse.com/features/iamjackiechan/
1998-1999
El abuso en los elementos animados y
ausencia de composición y jerarquía.
Fuente: http://members.iinet.net.au/~rayis/pets.htm
1998-1999
RESUMEN:
Al ser un campo emergente y en
constante cambio, los Sitios en Internet
eran creados por especialistas en áreas afines
a la Informática Administrativa o
Ingeniería en Sistemas.
El aprendizaje de los lenguajes de
programación ha sido siempre un campo
áspero para los profesionales del Diseño.
¿Qué hacían entonces los diseñadores?
Dominaban el mundo editorial impreso.
2000-2009
Está divertido…
Hagámoslo útil.
2000-2009
Estética y composición más cuidados.
Fuente: http://1997-2001.state.gov/
2000-2009
Primeros intentos por mejorar la usabilidad y
lectura de los contenidos.
Fuente: http://www.dogmark.net/indexint.html
2000-2009
La creación de encabezados y secciones
defindas ya es un “logro”.
Fuente: http://espn.go.com/wpb/wnba/statistics/index.html
2000-2009
El mismo Portal en la actualidad (2013).
Fuente: http://sports.espn.go.com/sports/womenbb/index
2000-2009
“INTERNET matará a las bibliotecas del mundo.”
Arquitectura de la información
+
Estética
+
Usabilidad
+
HTML+CSS+FLASH
(2005)
Composición en Plataforma Flash.
Composición en Plataforma Flash.
Composición en Plataforma Flash.
2000-2009
Me cuesta trabajo leer en Internet…
Usabilidad
+
Experiencia del Usuario
(2009)
2010-2012
Diseño sobre tendencias de estilo
(Objetivo: Impulsar la industria del Diseño Web)
o
Quiero un efectito padre…
Fuente: http://uxdesign.smashingmagazine.com/2012/03/15/symptoms-of-epidemic-web-design-trends/
Puntadas.
Bordes Zig-Zag.
Cintas con horquilla.
Texturas.
Tipografía para Internet.
Ilustración / Grabados del Siglo XIX
Tonos pastel.
Composiciones tipográficas en bloque.
Logotipos circulares / Lettering.
Skewomorphic / Texturas del mundo real.
2012-…
Diseño Plano (Flat UI Design)
El aburrimiento sobre las texturas y la falsa realidad virtual.
¿Quien dijo que el mundo NO era plano?
Fuente: http://fltdsgn.com/
Fuente: http://fltdsgn.com/
Actualidad…
Cualquier estilo
demandado por la forma del dispositivo que lo contenga.
Realización de Sitios Web que respondan a los medios de
comunicación (Diseño Web Responsivo).
El contenido sobresale del diseño.
La UX resalta el contenido y funcionamiento de cualquier
plataforma en la web.
…
FUENTE: http://www.nngroup.com/articles/computer-screens-getting-bigger/
Estandarización de Resoluciones…
FUENTE: http://corporateskills.co.uk/?p=627
RESUMEN
“La red tiene aproximadamente un millón de millones de
páginas. El cerebro humano tiene alrededor de 100,000 millones
de neuronas”,
escribe Kevin Kelly en su libro de 2010, Lo que quiere la
tecnología (What Technology Wants).
FUENTE: http://mexico.cnn.com/tecnologia/2011/09/13/hay-mas-paginas-de-internet-que-neuronas-en-el-cerebro-
humano
RESUMEN
Puedes envejecer tratando de unificar el Diseño Web.
Para una mayor referencia de los contenidos, consulta y haz click en:
Archivo Histórico de Sitios en Internet (1993-2010)
Los mejores 50 Sitios del 2009
Los mejores 50 Sitios del 2010
Los mejores Sitios en Flash de todo el tiempo
CSS Design Awards
Flash Websites Awards
Smashig Magazine (Revista especializada en Diseño Web)
Descarga:
Libros complementarios: http://leucorama.mx/descargas/libros.zip
Esta presentación: http://leucorama.mx/descargas/estilo-web.pptx
+REFERENCIAS
Tendencias de estilo en el Diseño
Web:
Un acercamiento a través del tiempo.
<victor>
Diseñador Web
</victor>
<email>
vicusdg@gmail.com
</email>
<facebook>
Víctor Juárez
</facebook>
<twitter>
@looposmx
</twitter>
Para una mayor referencia de los contenidos, consulta: http://www.404pagefound.com/

Más contenido relacionado

Similar a Tendencias de estilo en el diseño web (1991 actualidad)

La Web 2 0 Hoy y en el Futuro Jaime Creixems
La Web 2 0  Hoy y en el Futuro   Jaime CreixemsLa Web 2 0  Hoy y en el Futuro   Jaime Creixems
La Web 2 0 Hoy y en el Futuro Jaime CreixemsJaime Creixems
 
rural pasquilla Ied tecnologia
rural pasquilla Ied tecnologiarural pasquilla Ied tecnologia
rural pasquilla Ied tecnologiajaviertecteos
 
Trabajo informatica
Trabajo informaticaTrabajo informatica
Trabajo informaticalisbey1992
 
Trabajo informatica
Trabajo informaticaTrabajo informatica
Trabajo informaticalisbey1992
 
Presentacion de diseño web
Presentacion de diseño webPresentacion de diseño web
Presentacion de diseño webAramg2016
 
Barr
BarrBarr
Barrjany
 
Introducción Modelos de Negocio de Éxito en Internet (edic. Vigo)
Introducción Modelos de Negocio de Éxito en Internet (edic. Vigo)Introducción Modelos de Negocio de Éxito en Internet (edic. Vigo)
Introducción Modelos de Negocio de Éxito en Internet (edic. Vigo)Iván Fociños
 
Elearning y nativos digitales
Elearning y nativos digitalesElearning y nativos digitales
Elearning y nativos digitalesOscar Talavera
 
Historia del Internet y la Web
Historia del Internet y la WebHistoria del Internet y la Web
Historia del Internet y la WebDyer-Eve
 
Recopilacion aso
Recopilacion asoRecopilacion aso
Recopilacion asoEzmee XD
 
Historia de internet y la web
Historia de internet y la webHistoria de internet y la web
Historia de internet y la webSANTIAGO129
 

Similar a Tendencias de estilo en el diseño web (1991 actualidad) (20)

La Web 2 0 Hoy y en el Futuro Jaime Creixems
La Web 2 0  Hoy y en el Futuro   Jaime CreixemsLa Web 2 0  Hoy y en el Futuro   Jaime Creixems
La Web 2 0 Hoy y en el Futuro Jaime Creixems
 
rural pasquilla Ied tecnologia
rural pasquilla Ied tecnologiarural pasquilla Ied tecnologia
rural pasquilla Ied tecnologia
 
Trabajo informatica
Trabajo informaticaTrabajo informatica
Trabajo informatica
 
Trabajo informatica
Trabajo informaticaTrabajo informatica
Trabajo informatica
 
Presentacion de diseño web
Presentacion de diseño webPresentacion de diseño web
Presentacion de diseño web
 
Browsers war
Browsers warBrowsers war
Browsers war
 
Barr
BarrBarr
Barr
 
Introducción Modelos de Negocio de Éxito en Internet (edic. Vigo)
Introducción Modelos de Negocio de Éxito en Internet (edic. Vigo)Introducción Modelos de Negocio de Éxito en Internet (edic. Vigo)
Introducción Modelos de Negocio de Éxito en Internet (edic. Vigo)
 
Rmodmex pc16
Rmodmex pc16Rmodmex pc16
Rmodmex pc16
 
Rmodmex pc16
Rmodmex pc16Rmodmex pc16
Rmodmex pc16
 
Historia web
Historia webHistoria web
Historia web
 
Elearning y nativos digitales
Elearning y nativos digitalesElearning y nativos digitales
Elearning y nativos digitales
 
Dedicatoria
DedicatoriaDedicatoria
Dedicatoria
 
Historia del internet
Historia del internetHistoria del internet
Historia del internet
 
Historia del Internet y la Web
Historia del Internet y la WebHistoria del Internet y la Web
Historia del Internet y la Web
 
Herramientas telematkas yani 23
Herramientas telematkas yani 23Herramientas telematkas yani 23
Herramientas telematkas yani 23
 
Recopilacion aso
Recopilacion asoRecopilacion aso
Recopilacion aso
 
Internet
InternetInternet
Internet
 
Historia de internet y la web
Historia de internet y la webHistoria de internet y la web
Historia de internet y la web
 
Historia de internet y la web
Historia de internet y la webHistoria de internet y la web
Historia de internet y la web
 

Último

Jesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturaJesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturajesusgrosales12
 
Planificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.docPlanificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.docAhilynBasabe
 
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptxDISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptxNorberto Chacon
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfcucciolosfabrica
 
Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30SantiagoAgudelo47
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroJuan Carlos Fonseca Mata
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialAndreaMlaga1
 
INTERVENCIONES DE CARRETERAS EN LA LIBERTAD
INTERVENCIONES DE CARRETERAS  EN LA LIBERTADINTERVENCIONES DE CARRETERAS  EN LA LIBERTAD
INTERVENCIONES DE CARRETERAS EN LA LIBERTADMaryNavarro1717
 
Topografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civilTopografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civilmeloamerica93
 
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxPLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxLeo Florez
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesespejosflorida
 
cabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadanacabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadanaMarsielMendoza1
 
Torre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificioTorre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificio2021ArqROLDANBERNALD
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfLeonardoDantasRivas
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezPaola575380
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfBrbara57940
 
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILEARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILEhayax3
 
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALPOESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALEvaMaraMorenoLago1
 
GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosCristianGmez22034
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYkarendaza9506
 

Último (20)

Jesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturaJesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitectura
 
Planificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.docPlanificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.doc
 
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptxDISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdf
 
Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de Querétaro
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especial
 
INTERVENCIONES DE CARRETERAS EN LA LIBERTAD
INTERVENCIONES DE CARRETERAS  EN LA LIBERTADINTERVENCIONES DE CARRETERAS  EN LA LIBERTAD
INTERVENCIONES DE CARRETERAS EN LA LIBERTAD
 
Topografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civilTopografía cuadro de construcción ing.civil
Topografía cuadro de construcción ing.civil
 
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxPLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientes
 
cabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadanacabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadana
 
Torre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificioTorre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificio
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdf
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola Perez
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
 
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILEARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
 
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALPOESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
 
GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivos
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
 

Tendencias de estilo en el diseño web (1991 actualidad)