Diseño para pantallas e interactividad

Page 1

INTERNET

1990 INTERNET

medios digitales

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


INTERNET

1990 Sir Tim Berners-Lee (CERN)

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


INTERNET

1990 Sir Tim Berners-Lee (CERN) 1993 InterNIC, distribuciテウn de dominios

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


INTERNET

1990 Sir Tim Berners-Lee (CERN) 1993 InterNIC, distribución de dominios 1994 ‘Spam’ Canter and Siegel abogados

TALLER DISEÑO GRÁFICO VI DUOC UC

AGOSTO2009


INTERNET

1990 Sir Tim Berners-Lee (CERN) 1993 InterNIC, distribución de dominios 1994 ‘Spam’ Canter and Siegel abogados 1995 Netscape, primer navegador comercial

TALLER DISEÑO GRÁFICO VI DUOC UC

AGOSTO2009


INTERNET

1990 Sir Tim Berners-Lee (CERN) 1993 InterNIC, distribución de dominios 1994 ‘Spam’ Canter and Siegel abogados 1995 Netscape, primer navegador comercial 1995 / marzo Yahoo!

TALLER DISEÑO GRÁFICO VI DUOC UC

AGOSTO2009


INTERNET

1995 / marzo Yahoo!

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


INTERNET

1995 / marzo Yahoo! Dos estudiantes de ingeniería de la Universidad de Stanford, Jerry Yang y David Filo, dedican muchas horas a la creación de listas de sus sitios preferidos. Los dividen en categorías y subcategorías. Cais sin querer, idean el buscador más exitoso de los primeros tiempos de Internet: Yahoo! TALLER DISEÑO GRÁFICO VI DUOC UC

AGOSTO2009


INTERNET

1990 Sir Tim Berners-Lee (CERN) 1993 InterNIC, distribución de dominios 1994 ‘Spam’ Canter and Siegel abogados 1995 Netscape, primer navegador comercial 1995 / marzo Yahoo! 1995 / julio Amazon vende su primer libro

TALLER DISEÑO GRÁFICO VI DUOC UC

AGOSTO2009


INTERNET

1990 Sir Tim Berners-Lee (CERN) 1993 InterNIC, distribución de dominios 1994 ‘Spam’ Canter and Siegel abogados 1995 Netscape, primer navegador comercial 1995 / marzo Yahoo! 1995 / julio Amazon vende su primer libro 1995 / agosto Primer Internet Explorer

TALLER DISEÑO GRÁFICO VI DUOC UC

AGOSTO2009


INTERNET

1990 Sir Tim Berners-Lee (CERN) 1993 InterNIC, distribución de dominios 1994 ‘Spam’ Canter and Siegel abogados 1995 Netscape, primer navegador comercial 1995 / marzo Yahoo! 1995 / julio Amazon vende su primer libro 1995 / agosto Primer Internet Explorer 1995 / septiembre Nace Ebay TALLER DISEÑO GRÁFICO VI DUOC UC

AGOSTO2009


INTERNET

1995 / septiembre Nace Ebay TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


INTERNET

En San José, California, Pierre Omidyar funda eBay con la intención de completar una colección de caramelos. Advierte que puede utilizar el sitio para que otras personas ofrezcan lo que ya no usan. Un puntero láser inservible es el primer artículo vendido. Su precio fue de U$14,83.

1995 / septiembre Nace Ebay TALLER DISEÑO GRÁFICO VI DUOC UC

AGOSTO2009


INTERNET

1990 Sir Tim Berners-Lee (CERN) 1993 InterNIC, distribución de dominios 1994 ‘Spam’ Canter and Siegel abogados 1995 Netscape, primer navegador comercial 1995 / marzo Yahoo! 1995 / julio Amazon vende su primer libro 1995 / agosto Primer Internet Explorer 1995 / septiembre Nace Ebay 1995 / diciembre Se lanza Altavista TALLER DISEÑO GRÁFICO VI DUOC UC

AGOSTO2009


INTERNET

1996 / julio Nace Hotmail

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


INTERNET

1996 / julio Nace Hotmail 1997 / abril Un millテウn de sitios!

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


INTERNET

1996 / julio Nace Hotmail 1997 / abril Un millテウn de sitios! 1997 / octubre Internet Explorer v/s Netcape

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


INTERNET

1996 / julio Nace Hotmail 1997 / abril Un millテウn de sitios! 1997 / octubre Internet Explorer v/s Netcape 1997 / diciembre Primer blog

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


INTERNET

1997 / diciembre Primer blog

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


INTERNET

1997 / diciembre Primer blog En su sitio llamado Robot Wisdom, John Barrer decide agrupar y publicar diariamente las cosas más interesantes que encuentra en la red. Aunque ya existían cosas parecidas, Barrer es el primero en denominarlo weblog ("log" significa "diario"). Otros lo abreviarán "blog". Un blog es un sitio web periódicamente actualizado, que recopila cronológicamente textos o artículos de uno o varios autores, apareciendo primero el más reciente. TALLER DISEÑO GRÁFICO VI DUOC UC

AGOSTO2009


INTERNET

1996 / julio Nace Hotmail 1997 / abril Un millテウn de sitios! 1997 / octubre Internet Explorer v/s Netcape 1997 / diciembre Primer blog 1998 / septiembre Google

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


INTERNET

1998 / septiembre Google

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


INTERNET

1998 / septiembre Google Larry Page y Sergey Brin fundan Google Inc., la empresa creadora del mayor motor de búsqueda de Internet, en funciones desde apenas un par de años antes. El nombre proveniente del término matemático Googol (un 1 seguido de 100 ceros), simboliza la inmensidad de datos que se pueden encontrar en la red. TALLER DISEÑO GRÁFICO VI DUOC UC

AGOSTO2009


INTERNET

1996 / julio Nace Hotmail 1997 / abril Un millテウn de sitios! 1997 / octubre Internet Explorer v/s Netcape 1997 / diciembre Primer blog 1998 / septiembre Google 1999 / febrero First Internet Bank of Indiana

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


INTERNET

1996 / julio Nace Hotmail 1997 / abril Un millテウn de sitios! 1997 / octubre Internet Explorer v/s Netcape 1997 / diciembre Primer blog 1998 / septiembre Google 1999 / febrero First Internet Bank of Indiana 1999 / junio Napster

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


INTERNET

1999 / junio Napster

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


INTERNET

Shawn Fanning, un estudiante recién ingresado en una universidad de Boston, envía a 30 amigos un programa creado por él mismo para compartir archivos musicales. En poco días, diez mil jóvenes lo han bajado. El programa fue objeto de enormes controversias y juicios en relación con los derechos de autor y de las productoras discográficas. El nombre del programa? Napster.

1999 / junio Napster

TALLER DISEÑO GRÁFICO VI DUOC UC

AGOSTO2009


INTERNET

1996 / julio Nace Hotmail 1997 / abril Un millテウn de sitios! 1997 / octubre Internet Explorer v/s Netcape 1997 / diciembre Primer blog 1998 / septiembre Google 1999 / febrero First Internet Bank of Indiana 1999 / junio Napster 1999 / julio Messenger TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


INTERNET

1999 / julio Messenger TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


INTERNET

El programa de mensajería instantánea diseñado por Microsoft para sus sistemas Windows, comienza su extensa carrera. Tres meses después está a punto de ser reciclado por su escaso éxito. Sin embargo, una inesperada avalancha de usuarios lo vuelve a popularizar, desplazando a su famoso predecesor, el ICQ.

1999 / julio Messenger TALLER DISEÑO GRÁFICO VI DUOC UC

AGOSTO2009


INTERNET

1996 / julio Nace Hotmail 1997 / abril Un millテウn de sitios! 1997 / octubre Internet Explorer v/s Netcape 1997 / diciembre Primer blog 1998 / septiembre Google 1999 / febrero First Internet Bank of Indiana 1999 / junio Napster 1999 / julio Messenger 1999 / agosto Se lanza Blogger TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


INTERNET

2000 Apocalipsis? Y2K

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


INTERNET

2000 Apocalipsis? Y2K 2000 / septiembre 20.000.000 de sitios

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


INTERNET

2000 Apocalipsis? Y2K 2000 / septiembre 20.000.000 de sitios 2001 Wikipedia

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


INTERNET

2001 Wikipedia

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


INTERNET

2001 Wikipedia Jimbo Wales, com la ayuda de Larry Sanger, inician el proyecto Wikipedia: una enciclopedia libre y políglota basada en la colaboración. Toda persona con acceso a internet puede modificar la gran mayoría de los artículos. Llegará a convertirse en la enciclopedia más gigantesca de la historia. Para mediados de 2008 supera los diez millones de artículos en más de 250 idiomas. La palabra Wikipedia combina wiki (que significa "rápido" para los hawaianos) con paideia, educación en griego. TALLER DISEÑO GRÁFICO VI DUOC UC

AGOSTO2009


INTERNET

2000 Apocalipsis? Y2K 2000 / septiembre 20.000.000 de sitios 2001 Wikipedia 2004 Facebook

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


INTERNET

2004 Facebook

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


INTERNET

2004 Facebook Pensando en sus compañeros de Harvard, el estudiante Mark Zuckerberg crea un sitio web de redes sociales. El nombre alude al folleto que reciben los recién ingresados, con fotos de sus compañeros para ayudar a identificarlos. Muy pronto rebasa el marco universitario. En el 2008 cuenta con cerca de 100 millones de usuarios activos.

TALLER DISEÑO GRÁFICO VI DUOC UC

AGOSTO2009


INTERNET

2000 Apocalipsis? Y2K 2000 / septiembre 20.000.000 de sitios 2001 Wikipedia 2004 Facebook 2004 / febrero Flickr

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


INTERNET

2000 Apocalipsis? Y2K 2000 / septiembre 20.000.000 de sitios 2001 Wikipedia 2004 Facebook 2004 / febrero Flickr 2004 / marzo Gmail, con 1Gb de capacidad

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


INTERNET

2000 Apocalipsis? Y2K 2000 / septiembre 20.000.000 de sitios 2001 Wikipedia 2004 Facebook 2004 / febrero Flickr 2004 / marzo Gmail, con 1Gb de capacidad 2004 / abril La web se hace social, 2.0

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


INTERNET

2000 Apocalipsis? Y2K 2000 / septiembre 20.000.000 de sitios 2001 Wikipedia 2004 Facebook 2004 / febrero Flickr 2004 / marzo Gmail, con 1Gb de capacidad 2004 / abril La web se hace social, 2.0 2004 / noviembre Mozilla Firefox TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


INTERNET

2000 Apocalipsis? Y2K 2000 / septiembre 20.000.000 de sitios 2001 Wikipedia 2004 Facebook 2004 / febrero Flickr 2004 / marzo Gmail, con 1Gb de capacidad 2004 / abril La web se hace social, 2.0 2004 / noviembre Mozilla Firefox 2005 / febrero YouTube TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


INTERNET

2005 / febrero YouTube TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


INTERNET

Chad Hurley, Steve Chen y Jawed Karim fundan unsitio web que permite a los usuarios compartir videos digitales. La facilidad para alojar videos personales de hasta 10 minutos de duración lo hacen extremadamente popular y a veces polémico. Mil seiscientos cincuenta millones de dólares convierten a YouTube en propiedad de Google en octubre de 2006. Un mes más tarde es considerado "El invento del Año" por la revista Time.

2005 / febrero YouTube TALLER DISEÑO GRÁFICO VI DUOC UC

AGOSTO2009


INTERNET

1998 INTERNET en Chile

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


INTERNET

Internet VIDA DIGITAL

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


INTERNET

Internet EXPERIENCIA DE USUARIO

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


DISEÑO CENTRADO EN EL USUARIO

Internet

DISEÑO CENTRADO EN EL USUARIO usabilidad · interfaz · interacción

TALLER DISEÑO GRÁFICO VI DUOC UC

AGOSTO2009


USABILIDAD

usabilidad

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


USABILIDAD

usabilidad

TALLER DISEÑO GRÁFICO VI DUOC UC

Del inglés usability, es una medida empírica y relativa acerca de lo fácil, rápido y agradable que es utilizar un determinado producto o servicio.

AGOSTO2009


USABILIDAD

usabilidad

TALLER DISEテ前 GRテ:ICO VI DUOC UC

Diseテアar es organizar elementos de modo que cumplan una necesidad particular de la mejor manera forma posible. (Charles Eames)

AGOSTO2009


USABILIDAD

QUÉ ES? usabilidad

TALLER DISEÑO GRÁFICO VI DUOC UC

AGOSTO2009


USABILIDAD

Medir

QUÉ ES? usabilidad

TALLER DISEÑO GRÁFICO VI DUOC UC

AGOSTO2009


USABILIDAD

Medir Estudiar

QUÉ ES? usabilidad

TALLER DISEÑO GRÁFICO VI DUOC UC

AGOSTO2009


USABILIDAD

QUÉ ES? usabilidad

TALLER DISEÑO GRÁFICO VI DUOC UC

Medir Estudiar Analizar

AGOSTO2009


USABILIDAD

QUÉ ES? usabilidad

TALLER DISEÑO GRÁFICO VI DUOC UC

Medir Estudiar Analizar Conocer

AGOSTO2009


USABILIDAD

QUÉ ES? usabilidad

TALLER DISEÑO GRÁFICO VI DUOC UC

Medir Estudiar Analizar Conocer Modificar

AGOSTO2009


USABILIDAD

usabilidad

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


USABILIDAD

Entiende a la organización y al usuario

FUNCIÓN usabilidad

Logra el equilibrio necesario Anticipa la forma de pensamiento del usuario Sienta las bases de la aplicación final

TALLER DISEÑO GRÁFICO VI DUOC UC

AGOSTO2009


USABILIDAD

3 PRINCIPIOS lenguaje visual

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


USABILIDAD

ORGANIZAR

estructura clara y consistente

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


USABILIDAD

ECONOMIZAR

lo mテ。ximo con la menor cantidad de elementos

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


USABILIDAD

COMUNICAR

presentaciテウn a la capacidad del usuario

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


USABILIDAD

EFICACIA

el usuario logra lo que quiere

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


USABILIDAD

EFICACIA

el usuario logra lo que quiere

EFICIENCIA

lo logra rテ。pidamente

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


USABILIDAD

EFICACIA

el usuario logra lo que quiere

EFICIENCIA

lo logra rápidamente

TALLER DISEÑO GRÁFICO VI DUOC UC

SATISFACCIÓN al visitar el sitio

AGOSTO2009


USABILIDAD

USABILIDAD empテュrica

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


USABILIDAD

USABILIDAD empテュrica

TALLER DISEテ前 GRテ:ICO VI DUOC UC

porque no se basa en opiniones o sensaciones sino en pruebas (del inglテゥs tests) de usabilidad, realizadas en laboratorio u observadas mediante trabajo de campo.

AGOSTO2009


USABILIDAD

USABILIDAD relativa

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


USABILIDAD

USABILIDAD relativa

TALLER DISEÑO GRÁFICO VI DUOC UC

porque el resultado no es ni bueno ni malo, sino que depende de las metas planteadas (ej .por lo menos el 80% de los usuarios de un determinado grupo o tipo definido deben poder instalar con éxito el en N minutos sin más ayuda que la guía rápida) o de una comparación con otros sistemas similares.

AGOSTO2009


USABILIDAD

USABILIDAD

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


USABILIDAD

USABILIDAD = DISEテ前

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


USABILIDAD

PRINCIPIOS UNIVERSALES del diseテアo

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


USABILIDAD

LEY DE HICKS

El tiempo necesario para tomar una decisiテウn es directamente proporcional al nテコmero de opciones disponibles. Dilema entre flexibilidad y usabilidad

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


USABILIDAD

Dilema entre flexibilidad y usabilidad

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


USABILIDAD

PREVENCIÓN DE ERRORES

Un sistema debe de incorporar formas físicas de limitar las acciones para impedir el error humano.

TALLER DISEÑO GRÁFICO VI DUOC UC

AGOSTO2009


USABILIDAD

VISIBILIDAD DEL SISTEMA Un sistema debe de ofrecer siempre informaciテウn acerca de su estado.

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


USABILIDAD

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


USABILIDAD

EFECTO INTERFERENCIA

El cerebro humano tiene dificultades al procesar simultテ。neamente estテュmulos opuestos.

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


USABILIDAD

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


USABILIDAD

USABILIDAD 3 aspectos

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


USABILIDAD

El tipo o tipos especテュficos de usuarios

USABILIDAD 3 aspectos

TALLER DISEテ前 GRテ:ICO VI DUOC UC

AGOSTO2009


USABILIDAD

El tipo o tipos específicos de usuarios

USABILIDAD 3 aspectos

TALLER DISEÑO GRÁFICO VI DUOC UC

La tarea o tareas que efectúan objeto de observación.

AGOSTO2009


USABILIDAD

El tipo o tipos específicos de usuarios

USABILIDAD 3 aspectos

La tarea o tareas que efectúan objeto de observación. El contexto en el que se da la interacción.

TALLER DISEÑO GRÁFICO VI DUOC UC

AGOSTO2009


DISEテ前 WEB

NO OLVIDAR!

conceptos de diseテアo

TALLER DISEテ前 GRテ:ICO VI DUOC UC

OCTUBRE2009


DISEテ前 WEB

DEFINICIテ哲 DE GRILLA www.designbygrid.com

TALLER DISEテ前 GRテ:ICO VI DUOC UC

OCTUBRE2009


DISEテ前 WEB

TALLER DISEテ前 GRテ:ICO VI DUOC UC

OCTUBRE2009


DISEテ前 WEB

PALETA CROMテゝICA www.colourlovers.com www.colorhunter.com

TALLER DISEテ前 GRテ:ICO VI DUOC UC

OCTUBRE2009


DISEテ前 WEB

TALLER DISEテ前 GRテ:ICO VI DUOC UC

OCTUBRE2009


DISEテ前 WEB

TIPOGRAFテ喉

www.ilovetypography.com www.typetester.org

TALLER DISEテ前 GRテ:ICO VI DUOC UC

OCTUBRE2009


DISEテ前 WEB

TALLER DISEテ前 GRテ:ICO VI DUOC UC

OCTUBRE2009


DISEテ前 WEB

REBOBINEMOS

programa instruccional asignatura

TALLER DISEテ前 GRテ:ICO VI DUOC UC

OCTUBRE2009


DISEテ前 WEB

Desarrollar un Proyecto Interactivo con Herramientas Digitales

TALLER DISEテ前 GRテ:ICO VI DUOC UC

OCTUBRE2009


DISEÑO WEB

- Propone una solución de diseño considerando los requerimientos del mercado. - Crea proyectos en la web con herramientas digitales de internet. - Planifica las etapas y recursos destinados a un proyecto multimedia en internet. - Reúne recursos y herramientas digitales en función de un proyecto multimedia. - Propone conceptos, herramientas y recursos en un proyecto multimedia. - Determina las herramientas digitales según los soportes de salida de un proyecto.

TALLER DISEÑO GRÁFICO VI DUOC UC

OCTUBRE2009


DISEテ前 WEB

Determina las herramientas digitales segテコn los soportes de salida de un proyecto

TALLER DISEテ前 GRテ:ICO VI DUOC UC

OCTUBRE2009


DISEテ前 WEB

WORDPRESS

www.wordpress.org

TALLER DISEテ前 GRテ:ICO VI DUOC UC

OCTUBRE2009


DISEÑO WEB

- Basado en entradas ordenadas por fecha, entre otras muchas posibilidades además de páginas estáticas. - La estructura y diseño visual del sitio depende del sistema de plantillas (themes). - La filosofía de Wordpress apuesta decididamente por las recomendaciones del W3C pero depende siempre del theme a usar. "Classic", por ejemplo es un theme que viene "de serie" y que es válido como (X)HTML Transicional y CSS. - Separa el contenido y el diseño en XHTML y CSS, aunque, como se ha dicho, depende del "theme" que se esté usando. - La gestión y ejecución corre a cargo del sistema de administración con los plugins y los widgets que usan los themes. TALLER DISEÑO GRÁFICO VI DUOC UC

OCTUBRE2009


DISEテ前 WEB

TALLER DISEテ前 GRテ:ICO VI DUOC UC

OCTUBRE2009


DISEテ前 WEB

JUEVES 22

desde las 15:00 hrs.

TALLER DISEテ前 GRテ:ICO VI DUOC UC

OCTUBRE2009