Identidad, interfaz y usuario

1. DISEO PARA LA COMUNICACION DIGITAL + Lorena Hevia P. / Ingeniero en Diseo de Productos

2. 1000 UNAIMAGENVALE MAS QUE PALABRAS + IDENTIDAD VISUAL Y MARCA Lorena Hevia P./ Ingeniero en Diseo de Productos + 3. 1 IMAGEN VALE MAS QUE 1000 PALABRAS + imagen estrategiacomunicacional IDENTIDAD VISUAL Y MARCA Lorena Hevia P./ Ingeniero en Diseo de Productos 4. IDENTIDAD VISUAL Y MARCA

Lorena Hevia P./ Ingeniero en Diseo de Productos IDENTIDAD Y MARCA Identidad, percepcin y estrategia Empresa, entorno y enfoque Logotipo, isotipo y eslogan INTERFAZ Y USUARIO Qu es Actores involucrados Contexto Usuario y Usabilidad Principios Guias para Diseo de Interfaz TENDENCIAS WEB Qu ofrece hoy WWW Tendencias graficas 5. IDENTIDAD Y MARCA + Lorena Hevia P. / Ingeniero en Diseo de Productos 6. ? CMO DISEAMOS + UNA MARCA ? IDENTIDAD VISUAL Y MARCA Lorena Hevia P./ Ingeniero en Diseo de Productos DISEO DE IDENTIDAD Y MARCA 7. Conjunto derasgos propiosde un individuo o de una colectividad que loscaracterizan frente a los dems ANTES DE DISEAR HAY QUE TENER CLARO + IDENTIDAD Recibirpor uno de lossentidoslas imgenes, impresiones o sensaciones externas Comprender oconoceralgo PERCEPCION IDENTIDAD VISUAL Y MARCA Lorena Hevia P./ Ingeniero en Diseo de Productos i d p c quines somosqu ofrecemos e s ESTRATEGIA 8. Nombre (nombre, apellido, suedonimo) Imagen (apariencia y razgos fisicos, colores, olor, marcas usadas, moda) Red Social (amistades, religion, politica) PERSONA:IDENTIDAD Y PERCEPCION + IDENTIDAD VISUAL Y MARCA Lorena Hevia P./ Ingeniero en Diseo de Productos 9. Nombre (rubro, al cliente, dueos) Imagen ( estilo grafico) Red Social (mercado) PRODUCTO:IDENTIDAD Y PERCEPCION + IDENTIDAD VISUAL Y MARCA Lorena Hevia P./ Ingeniero en Diseo de Productos 10. MARCO CONCEPTUAL + IDENTIDAD VISUAL Y MARCA Lorena Hevia P./ Ingeniero en Diseo de Productos MISION VISION VALORES e m EMPRESA MERCADO SEGMENTO NICHO e n ENTORNO CLIENTE USUARIO e f ENFOQUE 11. METODOLOGIADISEO DISEO DE IDENTIDAD Y MARCA + UNA DE IMAGENDE MARCACAL QUEREMOS QUE SEA NUESTRA IDENTIDAD EN EL MERCADO? CMO QUEREMOS SER PERCIBIDOS POR NUESTROS CLIENTES Y USUARIOS? CUL SER NUESTRA ESTRATEGIA COMUNICACIONAL? IDENTIDAD VISUAL Y MARCA Lorena Hevia P./ Ingeniero en Diseo de Productos 12. ELEMENTOS GRAFICOS DE UNA+ IMAGENDE MARCA

LOGOTIPO

nombre: texto

(IM) tipografia

ISOTIPO

(IM) imagen + color + forma

ANALISIS CONCEPTUAL Y

DE TENDENCIAS

EMPRESA(mision, vision y valores)

ENTORNO(mercado: segmento y nicho)

ENFOQUE(cliente y usuario)

IDENTIDAD VISUAL Y MARCA Lorena Hevia P./ Ingeniero en Diseo de Productos DISEO DE IDENTIDAD Y MARCA

ESLOGAN

Texto descriptivo: grito de guerra

emocional, racional, sensorial

ANALISIS CONCEPTUAL

Y DE TENDENCIAS

mbito de RESPONSABILIDAD SOCIAL

Mantener y hacer disponible la memoria histrico poltica legislativa de Chile, con soporte tecnolgico actualizado.Gestionar y mantener colecciones bibliogrficas e informacin en distintos soportes y hacer disponibles los recursos de informacin.Promover un estilo deliderazgoen gestin pblica ymodernizacindel estado, constituyndose en s misma comomodelo de servicio .Generar unespacio de aprendizajepara que los parlamentarios y sus equipos de trabajo puedan desenvolverse satisfactoriamente en la sociedad de la informacin.

mbito PARLAMENTARIO Facilitar elvnculoentre el parlamentario y la sociedad.Crear las condiciones necesarias para que los parlamentarios puedan interpretar y reinterpretar los temas en los que actan.Contribuir a latransparenciadel proceso legislativo en conjunto con el Senado y la Cmara de Diputados.Ser un instrumento para facilitar la labor fiscalizadora de la Cmara de Diputados.

mbito PBLICO Colaborar en el conocimiento y la comprensin de la legislacin y de su proceso de gestacin.Crear espacios deinteraccin social , para que los actores del debate nacional puedan fortalecer y reinventar suidentidady la del pas. La viabilidad de la Visin y la Misin exige dar prioridad al desarrollo de las capacidades humanas internas de la Biblioteca, como asimismo, hacer de sus agentes activos buscadores y usuarios de nuevas Tecnologas de Informacin. .

DESTACAR

CONCEPTOS

CLAVES

en base a los principios de la empresa

EJEMPLO: MISION EMPRESA IDENTIDAD VISUAL Y MARCA Lorena Hevia P./ Ingeniero en Diseo de Productos DISEO DE IDENTIDAD Y MARCA 14. +

ANALISIS CONCEPTUAL

Y DE TENDENCIAS

RECONOCER

ESTILO GRAFICO

DEL MERCADO

AL CUAL NOS

DIRIGIMOS

Tipografia

Colores

Imagenes

EJEMPLO: ANALISIS DE REFERENTES MERCADO TELEFONIA MOVIL IDENTIDAD VISUAL Y MARCA Lorena Hevia P./ Ingeniero en Diseo de Productos DISEO DE IDENTIDAD Y MARCA 15. +

ANALISIS CONCEPTUAL

Y DE TENDENCIAS

RECONOCER

QUIEN PAGA POR EL SERVICIO Y QUIEN USA EL PRODUCTO

EJEMPLO: CLIENTE / USUARIO IDENTIDAD VISUAL Y MARCA Lorena Hevia P./ Ingeniero en Diseo de Productos DISEO DE IDENTIDAD Y MARCA 16. EJEMPLO: BUSQUEDA DE TIPOGRAFIAS +

LOGOTIPO

nombre: texto

(IM) tipografia

BUSCAR TIPOGRAFIA

ACORDE AL PUNTO 00

GUIANDOSE SEGN EL ESTILO Y TENDENCIA DEL MERCADO

IDENTIDAD VISUAL Y MARCA Lorena Hevia P./ Ingeniero en Diseo de Productos DISEO DE IDENTIDAD Y MARCA WWW.DAFONT.COM 17. +

ISOTIPO

(IM) imagen + color + forma

EJEMPLO: BUSQUEDA DE IMAGENES

BUSCAR IMGENES

CON LA INTENCION DE UNIVERSALIZAR

CONCEPTOS A

GRAFICAR

CONCEPTOS: MISION , VISION Y VALORES

www.istockphoto.com

www.gettyimages.com

IDENTIDAD VISUAL Y MARCA Lorena Hevia P./ Ingeniero en Diseo de Productos DISEO DE IDENTIDAD Y MARCA 18. +

EJEMPLO: BUSQUEDA DE IMAGENES

BREVE FRASE MARKETERA

QUE DESCRIBA LA FUNCION DE LA EMPRESA O PRODUCTO

Lema Publicitario: frase memorable

CANTIDAD DE PALABRAS: MAX. 6

Cero calorias

La pasta de Mam

IDENTIDAD VISUAL Y MARCA Lorena Hevia P./ Ingeniero en Diseo de Productos DISEO DE IDENTIDAD Y MARCA

ESLOGAN

Texto descriptivo: grito de guerra

emocional, racional, sensorial

EJEMPLO: PROPUESTA DE IMAGEN DE MARCA

MANOS A

IDENTIDAD VISUAL Y MARCA Lorena Hevia P./ Ingeniero en Diseo de Productos

LA OBRA

HACER PRUEBASDE DISEO

CONVINACIONES

TESTEAR

DISEO DE IDENTIDAD Y MARCA 20. +

EJEMPLO: BRANDING CORPORATIVO IDENTIDAD VISUAL Y MARCA Lorena Hevia P./ Ingeniero en Diseo de Productos IMAGENDE MARCAAPLICACIONES DE DISEO DE IDENTIDAD Y MARCA WEB PAPELERIA ROPA STAND LAPICES FLYER AUTO LIENZOS 21. INTERFAZ Y USUARIO + Lorena Hevia P. / Ingeniero en Diseo de Productos 22. ? CMO DISEAMOS + UNA INTERFAZ ? Lorena Hevia P./ Ingeniero en Diseo de Productos DISEO DE IDENTIDAD Y MARCA INTERFAZ Y USUARIO 23. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos QU ES UNA INTERFAZ ? QU ES ? INTERFAZ ? 24. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos QU ES UNA INTERFAZ ? Al usar un producto suele haberalgoentreunomismo y elobjetodeinteraccin .Este algo nosinforma qu acciones son posibles , elestadoactual del objeto ycambiosproducidos.Este algo es ellimitenos permiteactuar con o sobre el sistema. QU ES ? INTERFAZ ? 25. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos QU ES UNA INTERFAZ ? Punto dondehombre y productosse ponen encontacto , paratransmitirse mutuamente informacin(rdenes y sensaciones). Pone en evidenciala funcionalidad del productoa travs de la cual el usuario podrrealizar su tarea trabajo .QU ES ? INTERFAZ ? 26. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos QU ES UNA INTERFAZ ? QU ES ? INTERFAZ ? ACTORES CONTEXTO USUARIO Y USABILIDAD PRINCIPIOS GUIAS DE DISEO 27. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos PROTAGONISTAS DE UNA INTERFAZ acopla, integra y conectalas tres unidadesusuario, tarea y producto. diagrama bsico de interaccinprotagonistas de una interfazusuario / tarea / producto ACTORES USUARIO PRODUCTO TAREA INTERFAZ 28. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos PROTAGONISTAS DE UNA INTERFAZ USUARIO PRODUCTO TAREA INTERFAZ acopla, integra y conectalas tres unidadesusuario, tarea y producto. 29. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos CONTEXTO DE UNA INTERFAZ Lainteraccin usuario y productosucede en uncontextodeterminado el cualcondiciona usuario y tareas . CONTEXTO CONTEXTO DE INTERACCIN CONTEXTO SOCIO-CULTURAL USUARIO TAREA PRODUCTO INTERFAZ 30. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos CONTEXTO DE UNA INTERFAZ ADNcontextual producto 31. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos CONTEXTO DE UNA INTERFAZ ADNcontextual producto 32. METODOLOGIADISEO DISEO DE IDENTIDAD Y MARCA + UNA DE INTERFAZIDENTIDAD VISUAL Y MARCA Lorena Hevia P./ Ingeniero en Diseo de Productos USUARIO Y USABILIDAD 33. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos USABILIDAD DE UNA INTERFAZ USUARIO Usuarios buscanproductos fciles de usar. Una experiencia de uso sencilla y agradable. Una interfaz mal diseada es un factor que frena el uso de las funcionalidades del producto = usuario insatisfechoMNIMO EXTENSO CONOCE IGNORANTE DOMINIO EXPERIENCIACOMPUTACIONAL NOVATO EXPERTO EXPERIENCIACON SISTEMA 34. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos USABILIDAD DE UNA INTERFAZ USABILIDAD Desarrollo de SoftwareFcil utilizacinRealizacin de la tarea de modo casi intuitivo1.FcilAprendizage 2.Eficiencia y Productividad 3.Fcil de Recordar 4.Minimizacin de Errores 5.Satisfaccin del Usuario 35. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos USABILIDAD DE UNA INTERFAZ USABILIDAD Desarrollo de Software1. Fcil AprendizajeProductosfciles de aprender a usar , de manera que el usuario pueda rpidamente empezar arealizar sus tareas. 36. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos USABILIDAD DE UNA INTERFAZ USABILIDAD Desarrollo de Software2. Eficiencia y Productividad Una vez aprendido a usar el producto, es posiblealcanzar un nivelalto de productividad con l. 37. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos USABILIDAD DE UNA INTERFAZ USABILIDAD Desarrollo de Software3. Fcil de Recordar Despus de unperodo de no uso,volver a usar el productodebera ser posible, porque esfcil recordar su uso. 38. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos USABILIDAD DE UNA INTERFAZ USABILIDAD Desarrollo de Software4. Mininizacin de Errores El producto debera permitir unbajo coeficiente de errores , y si estos se cometieran debe haberposibilidad de deshacerlos. 39. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos USABILIDAD DE UNA INTERFAZ USABILIDAD Desarrollo de Software5. Satisfaccin del Usuario el producto debera seragradable de usar de maneratal quelos usuarios se sientansatisfechos = identificados con el producto 40. METODOLOGIADISEO DISEO DE IDENTIDAD Y MARCA + UNA DE INTERFAZIDENTIDAD VISUAL Y MARCA Lorena Hevia P./ Ingeniero en Diseo de Productos PRINCIPIOS 41. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos PRINCIPIOS PARA EL DISEO DE INTERFAZ PRINCIPIO 1/ JERARQUIZACION DE LA INFORMACIONLa informacin debera aparecer en un orden natural y lgico destacando lo mas relevante 42. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos PRINCIPIOS PARA EL DISEO DE INTERFAZ PRINCIPIO 2/ DILOGOS SIMPLES Y NATURALES Cadaunidad extrade informacin es una cosa ms que hay que aprender y unaposible cosa ms que el usuario no va a comprender para un usuario bsico del sistema. 43. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos PRINCIPIOS PARA EL DISEO DE INTERFAZ PRINCIPIO 3/LOS DILOGOS NO DEBEN CONTENERINFORMACION IRRELEVANTEusuarios suelen hacer unrpido barridode ojossaltndose mensajesaburridos introductorios ybuscando los trminos resaltados e importantes 44. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos PRINCIPIOS PARA EL DISEO DE INTERFAZ PRINCIPIO 4/ CONTROLAR LA CANTIDAD DE TEXTO a los usuarios no les gusta leer en pantalla , de hecho leer desde una pantalla de computador se reduce la velocidad de lectura, respecto a la del papel, en un 25 por ciento. 45. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos PRINCIPIOS PARA EL DISEO DE INTERFAZ PRINCIPIO 5/ HABLAR EL LENGUAJE DEL USUARIO Losdilogosdeberan ser expresados claramente enpalabras, frases y conceptos familiares al usuario , ms que en trminos orientados por el sistema. 46. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos PRINCIPIOS PARA EL DISEO DE INTERFAZ PRINCIPIO 6/MINIMIZAR LA CARGA MEMORIA Elusuario no debera tener que recordar informacin desde una pantalla a otra , las instrucciones de uso del sistema deberan ser visibles o capaces de desplegarse fcilmente. 47. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos PRINCIPIOS PARA EL DISEO DE INTERFAZ PRINCIPIO 7/ CONSISTENCIA Losusuarios nodeberan tener quepreguntarsesi es que diferentespalabras , situaciones o acciones significan lo mismo. Potenciar elementos de nica y comn lectura. 48. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos PRINCIPIOS PARA EL DISEO DE INTERFAZ PRINCIPIO 8/ RETROALIMENTACION El sistema debera siempremantener a los usuarios informados sobre qu est sucediendo , a travs de retroalimentacin adecuada en tiempos razonables 49. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos PRINCIPIOS PARA EL DISEO DE INTERFAZ PRINCIPIO 9/ LA SALIDA DE EMERGENCIA Los usuarios usualmente escogenfuncionesdel sistema porerrory necesitan tener unasalida de emergencia claramentemarcada, para poder dejar el estado indeseado sin tener que pasar por un dilogo extendido. 50. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos PRINCIPIOS PARA EL DISEO DE INTERFAZ PRINCIPIO 10/ PERMITIR ATAJOS Los aceleradores, ignorados por los novatos, puedenacelerar la interaccin del usuario experto con el sistema .CTRL C + = COPIAR CTRL V + = PEGAR 51. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos PRINCIPIOS PARA EL DISEO DE INTERFAZ PRINCIPIO 11/ PREVENIR ERRORES An mejor que los mensajes de error, es undiseo que previene que los problemas sucedan. 52. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos PRINCIPIOS PARA EL DISEO DE INTERFAZ PRINCIPIO 12/AYUDA Y DOCUMENTACION Aunque elideal es que el sistema se puede usar sin documentacin , ser aveces necesario proveer ayuday documentacin, tal tipo de informacin debera ser fcil de buscar y navegar,siendo focalizada en el usuario y sus tareas 53. METODOLOGIADISEO DISEO DE IDENTIDAD Y MARCA + UNA DE INTERFAZIDENTIDAD VISUAL Y MARCA Lorena Hevia P./ Ingeniero en Diseo de Productos GUIAS BASICAS DE DISEO 54. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos PRINCIPIOS PARA EL DISEO DE INTERFAZ GUIAS PARAEL COLOR 1) Elegircombinaciones armoniosasde colores. 55. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos PRINCIPIOS PARA EL DISEO DE INTERFAZ GUIAS PARAEL COLOR 2) Usarcontrastes altos de color entre letra y fondo (alejamiento y acercamiento) para destacar informacin, y bajos contrastes para ocultar informacin. Fondo avanza CONTRASTE Fondo retrocede CONTRASTE 56. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos PRINCIPIOS PARA EL DISEO DE INTERFAZ GUIAS PARAEL COLOR 3) Limitar el nmero decolores a 4 APP 57. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos PRINCIPIOS PARA EL DISEO DE INTERFAZ GUIAS PARALA TIPOGRAFIA 1) Para textos usarfuentes habituales y legibles para el usuario. a b c d e f g h i j k l m n o p q r s t u vw x y zA B C D E F G H I J K L M N O P R S T UW X Y Z0 1 2 3 4 5 6 7 8 9 ARIAL a b c d e f g h i j k l m n o p q r s t u vw x y zA B C D E F G H I J K L M N O P R S T UW X Y Z0 1 2 3 4 5 6 7 8 9 VERDANA a b c d e f g h i j k l m n o p q r s t u vw x y zA B C D E F G H I J K L M N O P R S T UW X Y Z0 1 2 3 4 5 6 7 8 9 CENTURY GOTHIC 58. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos PRINCIPIOS PARA EL DISEO DE INTERFAZ GUIAS PARALA TIPOGRAFIA 2)Combinar 2 a 3 tipos de fuentescomo mximo respondiendo, cada una de estas, a una funcin determinada.. 59. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos PRINCIPIOS PARA EL DISEO DE INTERFAZ GUIAS PARALA TIPOGRAFIA 3) Para presentacin detextos usar maysculas y minsculas( ritmo). El uso exclusivo de mayscula puede ser utilizado para destacar alguna palabra o funcin especifica (el uso nico de mayscula puede entorpecer la lectura / recomendable para ttulos no para textos extensos). . 60. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos PRINCIPIOS PARA EL DISEO DE INTERFAZ GUIAS PARALA TIPOGRAFIA 4) Para presentacin detexto en pantallautilizar un tamao entre8 a 12 puntos . El tamao puede ser utilizado como herramienta de jerarquizacin de la informacin ( ttulos). Utilizar tipografias legibles (ni muy gruesas ni muy delgadas) . 61. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos PRINCIPIOS PARA EL DISEO DE INTERFAZ GUIAS PARALA TIPOGRAFIA 5) Evitarlneas /columnas demasiado cortas y / anchas (entre 10 y 12 palabras).En caso que exista demasiada informacin escrita elinterlineado deber aumentar .Se recomienda el uso de columnas uniformes informacin (justificado). . 62. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos PRINCIPIOS PARA EL DISEO DE INTERFAZ GUIAS PARALA TIPOGRAFIA 6) Lapigmentacin y tonalidadde la fuente responde a lajerarquizacion de la informacin .Altos contrastes destacan la informaciny mejoran la calidad de lectura mientras quebajos contrastes disimulany entorpecen la presentacin de la informacin. . 63. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos PRINCIPIOS PARA EL DISEO DE INTERFAZ GUIAS PARALA COMPOSICIN 1) Definir unamalla nica-retcula- sobre la cual sedispondrla informacin y elementos grficos estableciendo un orden, uniformidad y coherenciasobre ejes horizontales y verticales ( invisibles al ojo). Se determinan reas a utilizar y reas vacas.. 64. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos PRINCIPIOS PARA EL DISEO DE INTERFAZ GUIAS PARALA COMPOSICIN 2) Definirun orden de lectura para la informacinpresentada consecuente con la utilizacin de opciones de informacin( de izquierda derecha, de arriba abajo). . LINEAS DE RECORRIDO VISUAL 65. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos PRINCIPIOS PARA EL DISEO DE INTERFAZ GUIAS PARALA COMPOSICIN 2) Definirun orden de lectura para la informacinpresentada consecuente con la utilizacin de opciones de informacin( de izquierda derecha, de arriba abajo). . 66. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos PRINCIPIOS PARA EL DISEO DE INTERFAZ GUIAS PARALA COMPOSICIN 3) Disponer los elementos ycontrarrestar pesos visuales por medio de la ubicacin y elementos asignados de modo simtrico o asimtrico. . 67. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos PRINCIPIOS PARA EL DISEO DE INTERFAZ GUIAS PARALA COMPOSICIN 4) Evitar eldesequilibrio visual : elementos no colaboran con la jerarquizacinDnde quiero situar la atencin del usuario? Evitar espacios innecesariosque confunden al usuario . 68. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos PRINCIPIOS PARA EL DISEO DE INTERFAZ GUIAS PARA USO DEICONOGRAFIAY VOLUMENES 1) Para permitir una mejorasociatividad entre el objeto , la representacin del objeto y la necesidad del usuario, se pueden utilizargeometras bsicas, en funcin de lo que el usuario reconoce. . 69. + INTERFAZ Y USUARIO Lorena Hevia P./ Ingeniero en Diseo de Productos PRINCIPIOS PARA EL DISEO DE INTERFAZ GUIAS PARA USO DEICONOGRAFIA Y VOLUMENES 2) Todaforma debe responder a una funcin . ( las formastridimensionales destacan por sobre las planas , las formas curvas son mas calidas y flexibles, las rectas son fras y rgidas). . 70. TENDENCIA WWW + Lorena Hevia P. / Ingeniero en Diseo de Productos 71. ? CALES SON LAS TENDENCIAS + GRAFICAS EN WWW ? Lorena Hevia P./ Ingeniero en Diseo de Productos DISEO DE IDENTIDAD Y MARCA TENDENCIAS WEB 72. ? ? EVOLUCION WWW SEGMENTO CONTENIDO ? SEMANTICA WEB 3.0 NICHO CONTENIDO PERSONALIZADO CUSTOMIZADO INFORMACION ESPECIFICAY PERSONALIZADA SOCIAL WEB 2.0 SEGMENTACION CONTENIDO COLABORATIVO INFORMACION COLABORATIVA ARTICULADA A TRAVES DE REDES SOCIALES INTERNET WEB 1.0 TODO PUBLICO CONTENIDO ESTANDAR INFORMACION GENERAL+ TENDENCIA WEB HACIA DONDE VA TENDENCIAS WEB Lorena Hevia P./ Ingeniero en Diseo de Productos 73. REDES SOCIALES + COMUNIDADES BLOGGING Y FOROS VIDEOS + IMAGENES + MUSICA QUE OFRECE HOY BUSCADORESDE INFORMACION INFORMACION + CONOCIMIENTO NEGOCIOS + TRANSACCIONES + PUBLICIDAD DIVERSION + JUEGOS ? ? ? + TENDENCIA WEB TENDENCIAS WEB Lorena Hevia P./ Ingeniero en Diseo de Productos 74. CONTENIDOS DE IMAGEN CONTENIDOS DINAMICOS CONTENIDOS COLABORATIVOS CONTENIDOS DE TEXTO CONTENIDOS DE VIDEO CONTENIDOS DE AUDIO CONVERGENCIA DE MEDIOS + TENDENCIA WEB +CONTENIDO +CONTENIDO +CONTENIDO +CONTENIDO +CONTENIDO +CONTENIDO +CONTENIDO +CONTENIDO +CONTENIDO +CONTENIDO +CONTENIDO +CONTENIDO +CONTENIDO CONTENIDOS ON DEMANDEN BASE A UN ABANICO DE INFORMACION AUTOGESTION DE CONTENIDOS TENDENCIAS WEB Lorena Hevia P./ Ingeniero en Diseo de Productos 75. + TENDENCIA WEB TENDENCIAS WEB Lorena Hevia P./ Ingeniero en Diseo de Productos 76. INFORMACION + PUENTE DIFUSION DE SERVICIOS BCN + TENDENCIA WEB TENDENCIAS WEB Lorena Hevia P./ Ingeniero en Diseo de Productos 77. WEB TIPO_ FUNCIONAL OBJ_ ADMINISTRACION DE INFORMACION MAYOR USO DE CONTENIDO ESCRITO WEB TIPO_ VITRINA OBJ_ DIFUSION DE PRODUCTOS Y SERVICIOS MAYOR USO DE CONTENIDO GRAFICO + TENDENCIA WEB TENDENCIAS WEB Lorena Hevia P./ Ingeniero en Diseo de Productos 78.

WEB TIPO_ FUNCIONAL

COMO COMUNICA?

ADMINISTRA INFORMACION, GENERALMENTE ESCRITA, EN BASE A SECCIONES DE CONTENIDO VARIADO APOYADO POR

FOTOGRAFIA E INFOGRAFIAS

PROPORCION DE CONTENIDOS

20% CONTENIDO GRAFICO

80% CONTENIDO ESCRITO

+ TENDENCIA WEB TENDENCIAS WEB Lorena Hevia P./ Ingeniero en Diseo de Productos 79. WEB TIPO_ VITRINA COMO COMUNICA? ACORDE AL CONTEXTO CORPORATIVO DE LA MARCA QUE SE PROMUEVE, DIFUNDE Y ADMINSTRA INFORMACION GRAFICA / CONCEPTUAL +FRASES SUGERENTES (MARKETERAS) INVITAN A CONOCER EL PRODUCTO / SERVICIO PROPORCION DE CONTENIDOS 90% CONTENIDO GRAFICO 10% CONTENIDO ESCRITO+ TENDENCIA WEB TENDENCIAS WEB Lorena Hevia P./ Ingeniero en Diseo de Productos 80. METODOLOGIADISEO DISEO DE IDENTIDAD Y MARCA + UNA DE WWWIDENTIDAD VISUAL Y MARCA Lorena Hevia P./ Ingeniero en Diseo de Productos TENDENCIAS 81. WEB_ VITRINA CABECERA CONTENIDO TEXTO IMAGENES VIDEOS AUDIO BUSCADOR Y TAGS FONDOCOLOR ANCHO Y LARGO DE PAGINA PIE DE PAGINA WEB_ FUNCIONAL CABECERA CONTENIDO TEXTO IMAGENES VIDEOS AUDIO BUSCADOR Y TAGS FONDOCOLOR ANCHO Y LARGO DE PAGINA PIE DE PAGINA + ELEMENTOS EN UNAWEB ANCHO LARGO TENDENCIAS WEB Lorena Hevia P./ Ingeniero en Diseo de Productos 82. CABECERA SITUACION: SE PRIORIZA ESPACIO EN PANTALLA TENDENCIA: REDUCCION ALTURA CABECERA GRAFICA SIMPLE, LIMPIA Y PLANA Lorena Hevia P./ Ingeniero en Diseo de Productos + CABECERA 83. CABECERA SITUACION: SE PRIORIZA COMUNICACION GRAFICA /VISUAL TENDENCIA: AUMENTO ALTURA CABECERA MAYOR FEXIBILIDAD GRAFICA (integracin fondo)MENOR RIGIDEZ CORPORATIVA Lorena Hevia P./ Ingeniero en Diseo de Productos MISSION CUSTOMERSORGANIZATIONINFRASTRUCTUREPRODUCTS AND SERVICESSTAFFDEVELOPMENTWHERE WE ARE+ CABECERA 84. PIE DE PAGINA SITUACION : UTILIZACION ESPACIO INFERIOR DE PANTALLA PARA BUSQUEDA ESPECIFICA DE INFORMACION TENDENCIA:INCORPORACION DE SUBMENU ESPECIFICO DE CONTENIDOS Lorena Hevia P./ Ingeniero en Diseo de Productos MISSION CUSTOMERSORGANIZATIONINFRASTRUCTUREPRODUCTS AND SERVICESSTAFFDEVELOPMENTWHERE WE ARE+ PIE DE PAGINA 85. PIE DE PAGINA SITUACION:UTILIZACION GRAFICA DE ESPACIO INFERIOR DE PANTALLA TENDENCIA:CONTINUACION GRAFICA INTEGRA CONTENIDOS SUPERIORES CON INFERIORES Lorena Hevia P./ Ingeniero en Diseo de Productos MISSION CUSTOMERSORGANIZATIONINFRASTRUCTUREPRODUCTS AND SERVICESSTAFFDEVELOPMENTWHERE WE ARE+ PIE DE PAGINA 86. COLOR Y FONDO SITUACION:SE PRIORIZA CONTENIDO ESCRITO DISMINUYENDO CONTRASTES CROMATICOS Y SIMPLIFICANDO LA GRAFICA DE FONDOS DE PANTALLA PARA EVITAR RUIDO VISUAL TENDENCIA:USO PLANO DE COLORES (SIN TEXTURA, ILUSTRACIONES, DIBUJOS) USO DE MISMA GAMA DE COLORES(PASTELES Y GRISES) APLICACION DE DIFERENCIAS CROMATICAS PARA SEGMENTACION / DIFERENCIACION DE CONTENIDOS Lorena Hevia P./ Ingeniero en Diseo de Productos MISSION CUSTOMERSORGANIZATIONINFRASTRUCTUREPRODUCTS AND SERVICESSTAFFDEVELOPMENTWHERE WE ARE+ FONDO Y COLOR 87. COLOR Y FONDO SITUACION:IMPORTANCIA POR LA COMUNICACION GRAFICA DEL CONTENIDO (FOTOGRAFIA, ILUSTRACIONES, DIBUJOS) PRIORIZA PRESENTACION VISUAL DE MARCA, PRODUCTO Y SERVICIO TENDENCIA:USO DE FONDOS MAS HUMANIZADOS CON MAYOR JUEGO GRAFICO INTEGRACION DE FONDO CON CONTENIDOS GRAFICOS MAYOR INTERVENCION Y LIBERTAD EN USO DE COLORES ( TEXTURA, ILUSTRACIONES, DIBUJOS) ACORDE A LA TEMATICA DEL CONTENIDO, USO CORPORATIVO Y/O ESTACION Lorena Hevia P./ Ingeniero en Diseo de Productos MISSION CUSTOMERSORGANIZATIONINFRASTRUCTUREPRODUCTS AND SERVICESSTAFFDEVELOPMENTWHERE WE ARE+ FONDO Y COLOR 88. ANCHO Y LARGO SITUACION:MAXIMA OPTIMIZACION VERTICAL Y USO HORIZONTAL DE ESPACIO ENPANTALLA TENDENCIA:LECTURA VERTICAL TIPO BLOGGING DE LARGO INDEFINIDO USO ELASTICO DE ANCHO DE PANTALLA OPTIMIZADO PARA 1024 PX Lorena Hevia P./ Ingeniero en Diseo de Productos MISSION CUSTOMERSORGANIZATIONINFRASTRUCTUREPRODUCTS AND SERVICESSTAFFDEVELOPMENTWHERE WE ARE+ ANCHO Y LARGO 89. BUSCADOR SITUACION:MAYOR IMPORTANCIA ACCION DE BUSQUEDA DE INFORMACION TENDENCIA:SEGMENTACION DE CONTENIDOS PARA BUSQUEDA GENERAL Y AVANZADA UBICACION PRIORITARIA EN PANTALLA (AL FRENTE DE MARCA) INTRODUCCIONANALISIS BCN EN WWWTENDENCIASAPROXIMACION Lorena Hevia P./ Ingeniero en Diseo de Productos MISSION CUSTOMERSORGANIZATIONINFRASTRUCTUREPRODUCTS AND SERVICESSTAFFDEVELOPMENTWHERE WE ARE+ BUSCADOR 90. BUSCADOR SITUACION:MAYOR IMPORTANCIA ACCION DE BUSQUEDA DE INFORMACION TENDENCIA:BUSQUEDA INSTANTANEA CON RESULTADOS SUGERIDOS Lorena Hevia P./ Ingeniero en Diseo de Productos MISSION CUSTOMERSORGANIZATIONINFRASTRUCTUREPRODUCTS AND SERVICESSTAFFDEVELOPMENTWHERE WE ARE+ BUSCADOR 91. ETIQUETAS SITUACION:MAYOR IMPORTANCIA ACCION DE BUSQUEDA TENDENCIA:APLICACION DE ETIQUETAS DE CONTENIDO PARA DIFERENCIAR POPULARIDAD / IMPORTANCIA TEMATICA Lorena Hevia P./ Ingeniero en Diseo de Productos MISSION CUSTOMERSORGANIZATIONINFRASTRUCTUREPRODUCTS AND SERVICESSTAFFDEVELOPMENTWHERE WE ARE+ ETIQUETAS DE CONTENIDO 92. CONTENIDO_fotografia SITUACION:FOTOGRAFIAS COMO COMPLEMENTO Y APOYO DE TEXTO TENDENCIA:USO DE FOTOGRAFIAS CON SIGNIFICATIDO COMUNICACIONAL EXPLICITO, MAS HUMANAS Y COTIDIANAS Lorena Hevia P./ Ingeniero en Diseo de Productos MISSION CUSTOMERSORGANIZATIONINFRASTRUCTUREPRODUCTS AND SERVICESSTAFFDEVELOPMENTWHERE WE ARE+ CONTENIDO / FOTO 93. CONTENIDO_fotografia SITUACION:COMUNICACION GRAFICA / VISUAL DE MARCA, PRODUCTOS Y SERVICIOS TENDENCIA:USO DE FOTOGRAFIAS DE SIGNIFICADO CONCEPTUAL USO DE FOTOGRAFIAS MAS COTIDIANASEXPLOSION DE DETALLES Lorena Hevia P./ Ingeniero en Diseo de Productos MISSION CUSTOMERSORGANIZATIONINFRASTRUCTUREPRODUCTS AND SERVICESSTAFFDEVELOPMENTWHERE WE ARE+ CONTENIDO / FOTO 94. CONTENIDO_fotografia SITUACION:SE INCREMENTA EL USO DE FOTOGRAFIAS COMO COMPEMENTO Y APOYO DEL TEXTO (LA NOTICIA ES LA FOTOGRAFIA) TENDENCIA:USO DE GALERIAS FOTOGRAFICAS DINAMICAS Y CUSTOMIZABLES Lorena Hevia P./ Ingeniero en Diseo de Productos MISSION CUSTOMERSORGANIZATIONINFRASTRUCTUREPRODUCTS AND SERVICESSTAFFDEVELOPMENTWHERE WE ARE+ CONTENIDO / FOTO 95. CONTENIDO_video SITUACION:SE INCREMENTA EL USO DE VIDEOS COMO COMPEMENTO Y APOYO DEL TEXTO (EL VIDEO ES LA NOTICIA) TENDENCIA:USO DE GALERIAS DE VIDEO DINAMICAS Y CUSTOMIZABLES Lorena Hevia P./ Ingeniero en Diseo de Productos MISSION CUSTOMERSORGANIZATIONINFRASTRUCTUREPRODUCTS AND SERVICESSTAFFDEVELOPMENTWHERE WE ARE+ CONTENIDO / VIDEO 96. CONTENIDO_video SITUACION:USO DE VIDEOS / ANIMACIONES COMO CONTENIDO PRINCIPAL QUE ENTREGA DINAMISMO A LA GRAFICA Y PRESENTACION DE LA MARCA, PRODUCTO Y SERVICIO TENDENCIA:USO DE VIDEOS / ANIMACIONES COMO HERRAMIENTA PRINCIPAL DE COMUNICACION QUE SE INTEGRA AL CONTEXTO GRAFICO Lorena Hevia P./ Ingeniero en Diseo de Productos MISSION CUSTOMERSORGANIZATIONINFRASTRUCTUREPRODUCTS AND SERVICESSTAFFDEVELOPMENTWHERE WE ARE+ CONTENIDO / VIDEO 97. CONTENIDO_icono SITUACION:OBSOLETO USO DE ICONOGRAFIA TIPO WEB 2.0 ABUNDANTE EN RELIEVES Y REFLEJOS TENDENCIA:USO DE ICONOGRAFIADE GRAFICA PLANA REDUCCION USO DE ICONOGRAFIA Lorena Hevia P./ Ingeniero en Diseo de Productos MISSION CUSTOMERSORGANIZATIONINFRASTRUCTUREPRODUCTS AND SERVICESSTAFFDEVELOPMENTWHERE WE ARE+ CONTENIDO / ICONOGRAFIA 98. CONTENIDO_icono SITUACION:INTERFACES MAS HUMANAS PERMITEN INTERACTUAR CON ICONOS PARA NAVEGACION DE CONTENIDO OBSOLETO USO DE ICONOGRAFIA TIPO WEB 2.0 ABUNDANTE EN RELIEVES Y REFLEJOS TENDENCIA:ICONOGRAFIA DE GRAFICA MAS HUMANA ICONOGRAFIA INTERACTIVA Lorena Hevia P./ Ingeniero en Diseo de Productos MISSION CUSTOMERSORGANIZATIONINFRASTRUCTUREPRODUCTS AND SERVICESSTAFFDEVELOPMENTWHERE WE ARE+ CONTENIDO / ICONOGRAFIA 99. CONTENIDO_cajas info SITUACION:EXCESO DE INFORMACION LLAMA A SEGMENTAR CONTENIDOS TENDENCIA:USO DE CAJAS ESTATICASSIEMPRE VISIBLES PARA CONTENIDOS PRIORITARIOSY DESPLEGABLES + DESCARTABLES PARA CONTENIDOS MENOS PRIORITARIOS DE VISIBILIDAD MODIFICABLE USO DE CAJAS CUSTOMIZABLES / INTERACTIVAS QUE PERMITEN A USUARIO AUTOGESTIONAR SUS CONTENIDOS Lorena Hevia P./ Ingeniero en Diseo de Productos MISSION CUSTOMERSORGANIZATIONINFRASTRUCTUREPRODUCTS AND SERVICESSTAFFDEVELOPMENTWHERE WE ARE+ CONTENIDO / CAJAS DE INFO 100. CONTENIDO_cajas info SITUACION:EXCESO DE INFORMACION LLAMA A SEGMENTAR CONTENIDOS TENDENCIA:USO DE CAJAS ESTATICAS, DESPLEGABLES Y DESCARTABLES DINAMICAS Lorena Hevia P./ Ingeniero en Diseo de Productos MISSION CUSTOMERSORGANIZATIONINFRASTRUCTUREPRODUCTS AND SERVICESSTAFFDEVELOPMENTWHERE WE ARE+ CONTENIDO / CAJAS DE INFO 101. TEXTO_ contenido linkeable SITUACION:OPTIMIZACION DE LA ADMINISTRACION DE INFORMACION POR PARTE DEL USUARIO PARA CONTROLAR CANTIDAD DE TEXTO EN PANTALLA TENDENCIA:TEXTOS LINKEABLES (LEER MAS) BREVE EXTENSION DE TEXTO RESUMIDO EN TITULO + SUBTITULO SUGERENTE Y LINKEABLE APOYADO POR MEDIOS GARFICOS Y AUDIOVISUALES Lorena Hevia P./ Ingeniero en Diseo de Productos MISSION CUSTOMERSORGANIZATIONINFRASTRUCTUREPRODUCTS AND SERVICESSTAFFDEVELOPMENTWHERE WE ARE+ TEXTO / LINKEABLE 102. TEXTO_ contenido linkeable SITUACION:OPTIMIZACION DE LA ADMINISTRACION DE INFORMACION POR PARTE DEL USUARIO PARA CONTROLAR CANTIDAD DE TEXTO EN PANTALLA TENDENCIA:TEXTOS LINKEABLES (LEER MAS) BREVE EXTENSION DE TEXTO RESUMIDO EN TITULO + SUBTITULO SUGERENTE Y LINKEABLE APOYADO POR MEDIOS GARFICOS Y AUDIOVISUALES Lorena Hevia P./ Ingeniero en Diseo de Productos MISSION CUSTOMERSORGANIZATIONINFRASTRUCTUREPRODUCTS AND SERVICESSTAFFDEVELOPMENTWHERE WE ARE+ TEXTO / LINKEABLE 103. TEXTO SITUACION:COMUNICACION GRAFICA / VISUAL DE CONTENIDOS PRIORIZA EL USO DE IMAGEN POR SOBRE EL TEXTO TENDENCIA:USO DE TEXTOS SOLO PARA ESPECIFICAR INFORMACION RELEVANTE Lorena Hevia P./ Ingeniero en Diseo de Productos MISSION CUSTOMERSORGANIZATIONINFRASTRUCTUREPRODUCTS AND SERVICESSTAFFDEVELOPMENTWHERE WE ARE+ TEXTO 104. Lorena Hevia P./ Ingeniero en Diseo de Productos CATEGORIAS Y MENU SITUACION:EXCESO DE CONTENIDOS E INFORMACION TENDENCIA:DESDE UNA PAGINA PRINCIPAL MUY GRAFICA SE DELEGA A LOS CONTENIDOS INTERNOS A TRAVES DE MENUS SIMPLIFICADOSQUE SEDESPLIEGAN EN TODA LA PANTALLA MISSION CUSTOMERSORGANIZATIONINFRASTRUCTUREPRODUCTS AND SERVICESSTAFFDEVELOPMENTWHERE WE ARE+ NAVEGACION 105. Lorena Hevia P./ Ingeniero en Diseo de Productos CATEGORIAS Y MENU SITUACION:EXCESO DE CONTENIDOS E INFORMACION TENDENCIA:DESDE UNA PAGINA PRINCIPAL MUY GRAFICA SE DELEGA A LOS CONTENIDOS INTERNOS A TRAVES DE MENUS SIMPLIFICADOSQUE SEDESPLIEGAN EN TODA LA PANTALLA MISSION CUSTOMERSORGANIZATIONINFRASTRUCTUREPRODUCTS AND SERVICESSTAFFDEVELOPMENTWHERE WE ARE+ NAVEGACION 106. Lorena Hevia P./ Ingeniero en Diseo de Productos CATEGORIAS Y MENU SITUACION:EXCESO DE CONTENIDOS E INFORMACION TENDENCIA:DESDE UNA PAGINA PRINCIPAL MUY GRAFICA SE DELEGA A LOS CONTENIDOS INTERNOS A TRAVES DE MENUS SIMPLIFICADOSQUE SEDESPLIEGAN EN TODA LA PANTALLA MISSION CUSTOMERSORGANIZATIONINFRASTRUCTUREPRODUCTS AND SERVICESSTAFFDEVELOPMENTWHERE WE ARE+ NAVEGACION 107. CATEGORIAS Y MENU SITUACION:EXCESO DE CONTENIDOS E INFORMACION TENDENCIA:DESDE UNA PAGINA PRINCIPAL MUY GRAFICA SE DELEGA A LOS CONTENIDOS INTERNOS A TRAVES DE MENUS SIMPLIFICADOSQUE SEDESPLIEGAN EN TODA LA PANTALLA Lorena Hevia P./ Ingeniero en Diseo de Productos MISSION CUSTOMERSORGANIZATIONINFRASTRUCTUREPRODUCTS AND SERVICESSTAFFDEVELOPMENTWHERE WE ARE+ NAVEGACION 108. Lorena Hevia P./ Ingeniero en Diseo de Productos MISSION CUSTOMERSORGANIZATIONINFRASTRUCTUREPRODUCTS AND SERVICESSTAFFDEVELOPMENTWHERE WE ARE+ BUEN EJEMPLO

Identidad, interfaz y usuario

Documents

Transcript of Identidad, interfaz y usuario