Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo.

Post on 11-Jul-2015

354 views 1 download

Transcript of Tendencias de estilo en el diseño web: Un acercamiento a través el tiempo.

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

El origen: 1991

¿Quién comenzó todo ésto?

Tim Berners-LeeCreador de la WorldWideWeb

Fundador de la W3C

El origen: 1991

Fuente: http://www.w3.org/People/Berners-Lee/Longer.html

Computador NeXTApple 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 pionerosAquellos 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 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/

1998-1999

El uso del color.

Fuente: http://www.randomhouse.com/features/iamjackiechan/

1998-1999

El abuso en los elementos animados yausencia 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 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.

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 ylectura de los contenidos.

Fuente: http://www.dogmark.net/indexint.html

2000-2009

La creación de encabezados y seccionesdefindas 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-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?

Fuente: http://fltdsgn.com/

Fuente: http://fltdsgn.com/

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.

2013…

FUENTE: http://www.nngroup.com/articles/computer-screens-getting-bigger/

2013…

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 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

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>victor@leucorama.mx,vicusdg@gmail.com

</email>

<facebook>Víctor Juárez

</facebook>

<twitter>@vicusdg

</twitter>

Para una mayor referencia de los contenidos, consulta: http://www.404pagefound.com/