tendencias de estilo en el diseño web: un acercamiento a través el tiempo
TRANSCRIPT
![Page 1: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/1.jpg)
Tendencias de estilo en el Diseño
Web:Un acercamiento a través del tiempo.
Por: L.D.G. Víctor Luis Juárez Estrada Especialista en Diseño
Interactivo
![Page 2: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/2.jpg)
El origen: 1991
¿Quién comenzó todo ésto?
![Page 3: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/3.jpg)
Tim Berners-LeeCreador de la WorldWideWeb
Fundador de la W3C
El origen: 1991
Fuente: http://www.w3.org/People/Berners-Lee/Longer.html
![Page 4: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/4.jpg)
Computador NeXTApple Inc.
El origen: 1991
Fuente: http://www.w3.org/People/Berners-Lee/Longer.html
![Page 5: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/5.jpg)
La primer página Web del Mundo
El origen: 1991
Fuente: http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
![Page 6: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/6.jpg)
1993
¡Vengan, vengan!(Encontré algo que les va a gustar)
![Page 7: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/7.jpg)
Se difunde la WWW.
1993
Fuente: http://www94.web.cern.ch/WWW94/Welcome.html
![Page 8: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/8.jpg)
1993
El primer navegador.
Fuente: http://home.mcom.com/home/welcome.html
![Page 9: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/9.jpg)
1994-1995
Ésto no va a durar mucho… No sirve para nada.
![Page 10: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/10.jpg)
1994-1995
Yahoo!
![Page 11: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/11.jpg)
1994
![Page 12: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/12.jpg)
1995
![Page 13: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/13.jpg)
1996
![Page 14: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/14.jpg)
1998
![Page 15: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/15.jpg)
2000
![Page 16: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/16.jpg)
2002
![Page 17: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/17.jpg)
2003
![Page 18: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/18.jpg)
2005
![Page 19: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/19.jpg)
2006
![Page 20: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/20.jpg)
2013
![Page 21: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/21.jpg)
1994-1995
¡Está bueno!Quiero aprender a hacer páginas web.
![Page 22: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/22.jpg)
1994-1995
La primer guía para Webmasters.
Fuente: http://www.netside.net/boba/webmasters.html
![Page 23: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/23.jpg)
1994-1995
Tu Universidad on-line (Hungría).
Fuente: http://epa.oszk.hu/00000/00019/00059/
![Page 24: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/24.jpg)
1994-1995
Diseño Web “avanzado”.
Fuente: http://www.3riversstadium.com/index2.html
![Page 25: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/25.jpg)
1996-1997
¡Hola!¿Hay alguien más ahí?
![Page 26: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/26.jpg)
1996-1997
Antes…
Fuente: http://www.google.com/about/company/history/
![Page 27: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/27.jpg)
1996-1997
Después…
Fuente: http://www.google.com/about/company/history/
![Page 28: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/28.jpg)
1996-1997
Google!
Fuente: http://www.google.com/about/company/history/
![Page 29: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/29.jpg)
1996-1997
Los grandes mitos on-line.
Fuente: http://www.princeton.edu/~accion/chupa.html
![Page 31: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/31.jpg)
1996-1997
Explorando la composición.
Fuente: http://www2.warnerbros.com/spacejam/movie/jam.htm
![Page 32: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/32.jpg)
1996-1997
El auge de los GIF’s animados.
Fuente: http://www.snowcrest.net/kitty/hpages/index.html
![Page 33: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/33.jpg)
1998-1999
Los pionerosAquellos que sólo los conocen en su casa y en un Cyber-Café.
![Page 35: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/35.jpg)
1998-1999
El PEOR navegador de la Historia.
Fuente: http://toastytech.com/evil/index.html
![Page 36: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/36.jpg)
1998-1999
Los efectos producidos porcomputadora comunican la vanguardia de todo tipo de tecnología.
La usabilidad yexperiencia del usuarioeran temas aúnimpensables.
Fuente: http://www.mipg.upenn.edu/~Vnews/
![Page 37: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/37.jpg)
1998-1999
El uso del color.
Fuente: http://www.randomhouse.com/features/iamjackiechan/
![Page 38: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/38.jpg)
1998-1999
El abuso en los elementos animados yausencia de composición y jerarquía.
Fuente: http://members.iinet.net.au/~rayis/pets.htm
![Page 39: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/39.jpg)
1998-1999
RESUMEN:
Al ser un campo emergente y en constante cambio, los Sitios en Internet eran creados por especialistas en áreas afinesa la Informática Administrativa oIngenierí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.
![Page 40: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/40.jpg)
2000-2009
Está divertido…Hagámoslo útil.
![Page 41: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/41.jpg)
2000-2009
Estética y composición más cuidados.
Fuente: http://1997-2001.state.gov/
![Page 42: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/42.jpg)
2000-2009
Primeros intentos por mejorar la usabilidad ylectura de los contenidos.
Fuente: http://www.dogmark.net/indexint.html
![Page 43: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/43.jpg)
2000-2009
La creación de encabezados y seccionesdefindas ya es un “logro”.
Fuente: http://espn.go.com/wpb/wnba/statistics/index.html
![Page 44: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/44.jpg)
2000-2009
El mismo Portal en la actualidad (2013).
Fuente: http://sports.espn.go.com/sports/womenbb/index
![Page 45: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/45.jpg)
2000-2009
“INTERNET matará a las bibliotecas del mundo.”
Arquitectura de la información+
Estética+
Usabilidad+
HTML+CSS+FLASH(2005)
![Page 46: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/46.jpg)
![Page 47: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/47.jpg)
![Page 48: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/48.jpg)
![Page 49: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/49.jpg)
Composición en Plataforma Flash.
![Page 50: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/50.jpg)
Composición en Plataforma Flash.
![Page 51: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/51.jpg)
Composición en Plataforma Flash.
![Page 52: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/52.jpg)
2000-2009
Me cuesta trabajo leer en Internet…
Usabilidad+
Experiencia del Usuario(2009)
![Page 53: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/53.jpg)
![Page 54: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/54.jpg)
![Page 55: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/55.jpg)
![Page 56: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/56.jpg)
![Page 57: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/57.jpg)
![Page 58: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/58.jpg)
![Page 59: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/59.jpg)
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/
![Page 60: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/60.jpg)
Puntadas.
![Page 61: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/61.jpg)
Bordes Zig-Zag.
![Page 62: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/62.jpg)
Cintas con horquilla.
![Page 63: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/63.jpg)
Texturas.
![Page 64: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/64.jpg)
Tipografía para Internet.
![Page 65: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/65.jpg)
Ilustración / Grabados del Siglo XIX
![Page 66: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/66.jpg)
Tonos pastel.
![Page 67: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/67.jpg)
Composiciones tipográficas en bloque.
![Page 68: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/68.jpg)
Logotipos circulares / Lettering.
![Page 69: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/69.jpg)
Skewomorphic / Texturas del mundo real.
![Page 70: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/70.jpg)
2012-2013…
Diseño Plano (Flat UI Design)El aburrimiento sobre las texturas y la falsa realidad virtual.
¿Quien dijo que el mundo NO era plano?
![Page 73: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/73.jpg)
2013…
Cualquier estilodemandado 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.
![Page 74: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/74.jpg)
2013…
FUENTE: http://www.nngroup.com/articles/computer-screens-getting-bigger/
![Page 76: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/76.jpg)
RESUMEN
“La red tiene aproximadamente un millón de millones de páginas. El cerebro humano tiene alrededor de 100,000 millonesde 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
![Page 77: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/77.jpg)
RESUMEN
Puedes envejecer tratando de unificar el Diseño Web.
![Page 78: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/78.jpg)
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
![Page 79: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/79.jpg)
Tendencias de estilo en el Diseño
Web:Un acercamiento a través del tiempo.
![Page 80: Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo](https://reader031.vdocumento.com/reader031/viewer/2022020110/55a0a2e61a28abec2f8b48a2/html5/thumbnails/80.jpg)
<victor>Diseñador Web
</victor>
<email>[email protected],[email protected]
</email>
<facebook>Víctor Juárez
</facebook>
<twitter>@vicusdg
</twitter>
Para una mayor referencia de los contenidos, consulta: http://www.404pagefound.com/