 Se me oye bien, buenos días, como ha dicho Alejandro, yo soy Irana Eirati, primero de todo muchísimas gracias a los organizadores, a los asistentes, digamos fino que es sin asistentes y en un momento tiene sentido. Gracias que me han dado esta oportunidad es mi primera vez así que si me veis un poco nerviosa me traigo nada, bueno como decía yo soy Irana Eirati soy diseñadora gráfica, me dedico exclusivamente desde el año 2005 a diseño de páginas web he trabajado hasta el 2015 de forma de cuanta ajena, por política de la empresa donde trabajaba exclusivamente trabajaba por disungla y las áreas que trabajamos eran centros de negocios los clásicos co-workings y también el sector hotelero. A partir del 2015 decidí dirigir mi carrera profesional por una autónoma y fundamos con IMAGRAW que genera gráfica el estudio Lustres. Curiosamente desde el año pasado solo nos ha tocado trabajar con Centro de Cultura que también es muy interesante. Bueno, aquí estoy para hablar del diseño. Lo que quería hacer un comento a Alejandro, no voy a criticar ningún tipo de imagen no voy a decir que páginas web está bien diseñado o cual está mal diseñado sino voy a enfocar esta charla al proceso del diseño, al diseño como una metodología una forma de pensar. Bueno si pensamos en la palabra diseño, esta palabra en sí significa un boceto o un esquema que plasma una idea. Otra definición que tenemos es simplemente la apariencia visual de un objeto o un contenido pero también a nivel público siempre que utilizamos la palabra diseño la gente piensa en un objeto con un aspecto un poco más fundado, más refinado. Según desde la época de los años 20 con la creación de escuela Bauhaus dieron otra adopción a la palabra diseño que no se dedicaba solo al aspecto estético de los aspectos o contenidos de la diseña sino también consideraban su funcionalidad. De forma que dieron esta definición que el diseño es una solución que resuelve un problema de una forma eficaz o deficiente o también hubo otra definición que decía que el diseño es el vehículo de comunicación. Por ejemplo, si tenemos un aparato electrodoméstico mucho antes del aspecto de los botones o lo que sea nos ayuda a interactuar con esta máquina. Si pensamos en diseño web que es nuestra disciplina lo que nosotros tomamos de ello en diseño web según las definiciones generales que hay por ahí es la actividad de planificación y creación de sitio surf. Esta actividad consiste en generar una estructura, mirar su usabilidad, accesibilidad, la funcionalidad de esta estructura y por supuesto la parencia visual. Y con todo esto vamos a generar un objetivo y este objetivo es que se templa con los objetivos de esta página. Las páginas normalmente tienen objetivos que vengan de un producto o dar una información o generar fidelidad. Bueno, vamos a hacer un repaso por la historia del diseño web. El diseño web es una disciplina que tiene apenas tres dejadas de vida ha tenido una evolución continua muy intensa ha empezado por el año 89 que lo llaman época oscura de la web porque eran páginas prácticamente negras con los píxeles de coloris verdes áfrica. Luego aparecen los navegadores y ya nos suenan las estructuras un poco más familiares que permitían las imágenes. Luego tenemos la estructura de las tablas que se añade a la estructura HTML ya nos suenan las estructuras como cuerpos de páginas, cabeceras, y llegamos a la época dorada de Flash. En esta época tenemos tonos de fratidades y originales de los diseñadores. También, al mismo tiempo, el CSS tiene su evolución de manera que llegamos a dedicar la parte del aspecto de la web CSS y el contenido HTML. Esta evolución sigue. Durante todo este tiempo también aparecen web 2, aparece Wordpress, Dynamics 2003, redes sociales. Hasta aquí llegamos al año más o menos 2007 y aparecen móviles con posibilidad de navegación. En este momento ya marcamos un antes y después. Surge la idea que cuando empezamos a navegar por los móviles aparece el tema de velocidad de la carga. Ya sabemos que una web tan pesada que tenemos es imposible que se cargue rápido el móvil. Además, sabemos que el usuario no tiene paciencia. Surge un poco de debate al principio de tener el mismo contenido en la web o tener una versión de la web específica para el móvil. La demanda de navegar por móvil sigue aumentando. Damos cuenta que te deseo optimizar el contenido cada vez más para que se da bien en el móvil y esta demanda dará también la solución. En este momento aparecen el sistema de diseños por retículas de un sistema y lo que hace convierte el contenido algo más fluido para que vaya adaptando a distintos dispositivos. Y esta evolución lo tenemos hasta aquí vamos a la época de los diseños responsivos que adaptan a cualquier tipo de dispositivo. En este momento los especializadores y desarrolladores la verdad es que respiran porque ya ven que hace falta tener varias bases para distintos dispositivos. La misma web que se ve en todos. Los clientes también se quedan bastante contentos porque saben que a su web está el móvil que cada vez se está navegando más por los móviles. Con la idea de... Bueno, a base de esto surge que el diseño cada vez se va simplificando más. Tenemos unas estructuras cada vez más establecidas. Esta evolución sigue y llegamos a flatizar y llegamos hasta hoy en día. Entonces, ¿ahora en qué punto estamos? Estamos en el punto que la necesidad de optimizar las páginas, optimizar todo el contenido. La situación que ha amartado el móvil nos ha traído a una época que teníamos una serie de páginas muy estándares. Hasta tan punto que además como ha surgido que hemos dado mucho uso a las plantillas hemos llegado a un momento que las páginas entre sí se parecen muchísimo. A veces hemos oído por ahí que dicen que el diseño web ya no existe simplemente rellena de una plantilla. Es que todas las páginas prácticas no son iguales. Tú ves 10 páginas y no te requieran un recuerdo visual de cuál hay que meter. Entonces los diseñadores, los profesionales paramos y nos preguntamos ¿realmente hemos matado el diseño con todo este proceso y ya... ¿Qué ha pasado? ¿Quién es el que ha matado el diseño? Me alegro un montón que no se ha levantado ninguna mano. Oye si piensas que el diseño consiste de acoger una plantilla, sustituir la información y lanzarla a ver sí, por supuesto que hemos matado el diseño. Pero, ha surgido una cosa muy interesante que es que la plantilla es una plantilla que tiene un poco de agua, pero ha surgido una cosa muy interesante en nuestra profesión. ¿Y ha sido qué? Nos hemos dado cuenta que antes los diseñadores diseñábamos. Cada uno quería lustir con su diseño. El cliente también quería tener un ave porque tenía que tener un ave. Pero nos damos cuenta que en realidad el protagonista es el usuario. Entonces dijimos bueno, los diseñadores vamos a quitar el lego y empezamos en el usuario. Entonces, vamos a ver que todas estas webs están tantalizadas, están estilizadas y que se parecen entre sí en las las zonas web enfocadas concentradas en el usuario. De la importancia del usuario, no voy a hablar, vamos a obtener una charla fantástica sobre la experiencia del usuario, pero ya sabemos que a partir de toda esta época las webs no tienen que ser simplemente bonitas, tienen que ser funcionales y bonitas. Aquí hay una frase que a mí me encanta que dice la gente ignora el diseño que ignora a la gente. Y yo pienso que con esto ya hemos dicho todo. Bueno, con todo esto volvemos a decir entonces ¿en qué consiste el diseño de las webs? Dijimos que ya no estamos pensando simplemente en la estética de las páginas. Los diseñadores webs en esta época en vez de mirar a los diseñadores gráficos giraron un poco la mirada hacia los diseñadores industriales que por lo que comentamos al principio desde las disciplinas de la escuela bajos consideraban el diseño como una solución con una manera de comunicación entonces aplicaron las mismas normas al tema de páginas. Entonces pensaron que si el diseño es una solución, es una manera de pensar, es una metodología tiene que tener un proceso y este proceso como cualquier proceso tiene una serie de pasos que tú si vas siguiendo estrictamente todos estos casos te puedas asegurar que vas a tener un diseño correcto. La primera fase empieza por formular preguntas formular preguntas del cliente para obtener información para definir el objetivo del proyecto porque una vez que tenemos una propuesta de la web muchas veces nos entra inspiración, nos entra ganas de ponernos a trabajar pero es justo el momento que no tenemos que ponernos delante de un operador tenemos que empezar a averiguar para qué se va a hacer esta página web cuál es su público objetivo para ello hay que tener unas comunicaciones bastante estrictas por el cliente y hacerle miles de preguntas cuál es tu público cuál es tu objetivo si tienes una identidad corporativa que quieres conseguir qué diferente tienes con tu competencia todas estas preguntas que te faciliten una serie de informaciones útiles para que lo puedas aplicar tu trabajo. Una vez que pasamos de esta fase, empezamos a planificar la fase planificarla a ver en general y en la planificación bueno, esta fase es tan importante como el resto del proceso para nada, tenemos que decir bueno, empiezo a trabajar y sobre la marca, no planificamos toda la estructura planificamos la manera de la actuación planificamos todos los comportamientos que el cliente o el usuario posiblemente va a tener en la página todas las interacciones vamos a mirar en qué escenario vamos a situar al usuario y a dónde le queremos llevar una vez que tenemos toda esta planificación presentamos esta planificación al cliente necesitamos su aportación su apropiación y de ahí ya podemos pasar a diseño pero pasar el diseño tampoco es todavía el momento de ponernos a trabajar primer de todo lo más conveniente es generar una guía de diseño una guía de diseño es lo más parecido a manual de libertad corporativa pero es algo mucho más complejo una guía de diseño empieza al principio la definición de una guía de diseño es un documento que sirve por ejemplo si en el trabajo están trabajando diseñadores y desarrolladores sirve para que todo el mundo tenga una idea única de todos los elementos que construye una pagina por ejemplo si el diseñador diseña un botón tiene que definir perfectamente la forma de botón, los colores, las interactiones para que los desarrolladores no tengan que inventar nada bueno para empezar a generar el diseño primero tenemos que estudiar la marca en el caso que el cliente ya tenga una identidad corporativa por ejemplo esta marca tiene por qué tiene este aspecto por qué tiene este nombre una vez que conocemos la identidad de la marca vemos todas las variaciones que puede adoptar la identidad las reglas que hay que respetar y los colores que puede adoptar las cosas que se puede hacer con esta marca o no después de eso pasamos a la paleta de los colores probablemente dentro de identidad corporativa ya existe una paleta de colores pelo en la de igual estamos permitidos a añadir o quitar algún color entonces tenemos que definir perfectamente esta paleta de colores con el código de color normalmente intentamos no pasar de tres colores y si es necesario tener colores secundarios tienen que estar bien definidos además hay que definir bien la escala de los turistas y si existe la continuación llegamos a la voz o el tono de la página es muy importante una vez que sea una audiencia que tenga la ver y según el público objetivo tiene que tener un tono definido aquí tenemos el ejemplo de Melchim que por ejemplo dice que el lenguaje de todo el sitio tiene que ser divertido pero no tonto tiene que ser informal pero no descuidado tiene que ser experto pero no dominante esto es un ejemplo según cada tipo de público tenemos que utilizar un lenguaje y este tono de voz nos indica que tipo de letra podemos que tipo de grafía podemos utilizar por ejemplo a un despacho de abogados misterios clásicos igual no viene bien a utilizar un tipo de letra de fantasía y definimos la familia de la fuente todas las variaciones que puede tener jerarquía de los títulos los haches todo esto una vez que tenemos la tipografía pasamos a la fase de la imagen la importancia de la imagen no hace falta que hable la selección de la imagen preferiblemente tiene que ser personalizado posible del cliente pero también tiene que ser imagenes que transmitan un sentido, una emoción por ejemplo que transmitan el tema de la salud transmitan confianza cualquier cosa que se acuerda a nuestro objetivo de la página después de las imágenes pasamos a la iconografía de la página ya sabemos que los iconos también te dan tanta importancia como las imágenes porque además supongo que tiene una antigua más el texto y son un elemento muy poderoso a continuación definimos todos los elementos que sirven para que el usuario interactue con la página por ejemplo los botones, los formularios tab todos esos que podemos definir y también detallamos si cojemos el caso de los botones este botón normal con estará el mouse overcomo, al hacer click que forma coge y todas las variaciones que puedes tener este botón a continuación por último en la guía de diseño llega el tema de espaciado es el último pero no me hace importante de hecho yo podría decir que es tan importante que incluso merece una charla individual el tema de espaciado no hay que mirar el espacio blanco o si tiene un color definido como algo, un espacio simplemente para rellenar, es totalmente activo en nuestros elementos el espacio blanco lo que hace es facilitar o mejorar la legibilidad de todo el contenido enfoca el atención hacia donde realmente queremos llevar el usuario y también da jerarquía al contenido una vez que tenemos todo el guía de diseño preparado ya podemos pasar a generar el esquema los conceptos las propuestas de lisa aquí no voy a parar mucho ya sabemos que normalmente empezamos por el móvil y vamos a empezar por la pantalla más pequeña con los elementos justos necesarios de manera que tú no puedas, ni a ti un elemento más ni quitar un elemento más lo que es necesario y de ahí vamos hacia las pantallas más grandes preparamos las propuestas del diseño y lo presentamos al día una vez que el diseño está activado pasamos al contenido como le decía Juanca el contenido es el rey hasta ahora todo lo que hemos hecho si no pensamos en contenido toda ha sido cura de polación no sirve para nada, entonces todo el diseño tiene que pensar en contenido digamos que el contenido también está aprobado y ya pasamos al desarrollo aquí ya es un poco coser y cantar, ponerse delante de software que quieras y ya trabaja y ahí vamos a la fase de pruebas pruebas pruebas cogemos la aprobación del cliente y lanzamos el proyecto el caso es que una vez que lo lanzamos ¿que es a todo el proyecto? no, efectivamente porque el proceso de una vez no es un proyecto con un inicio, con un desarrollo y un fin en el momento que lo lanzamos ya sabéis todos que es el momento que el usuario final está en contacto con la web interactuar y ahí tenemos que averiguar si todo lo que habíamos pensado todo lo que habíamos planificado se está consiguiendo un trabajo un poco circular volver a revisar y corregir bueno todo esto ha sido el proceso de diseño, entonces si has cumplido con todo este proceso te puedo te puedo prometer que vas a conseguir un buen diseño aquí nos estamos hablando de ni estilos, ni las modas ni tendencias de diseño con una base sólida un diseño correcto y bueno, lo que hace primero de todo está enfocado al usuario luego es de diseño, si ha cumplido todos estos pasos tiene una calidad que no se puede negarlo como hemos planificado mucho, hemos colocado elementos, hemos quitado, hemos pensado, hemos llegado a un diseño es suficientemente simple para entenderlo para todo el mundo hemos generado una solución a largo plazo que no se afecta esta solución a través de las modas de las tendencias, es muy difícil que al año siguiente este trabajo se quede obscenente luego si realmente para, si piensas antes de empezar el proyecto probablemente deshija las soluciones mucho más creativas que simplemente ponen para trabajo y también ya sabes que un diseño bueno es un diseño responsable realmente ético entonces y lo que hace, lo que consigue un diseño correcto es que al principio de todo genera una buena impresión de la misma manera que cualquier persona, bueno si vos ve una frase famosa que no tienes una segunda oportunidad para generar una primera impresión cuando a veces pasa lo mismo, lo que pasa es que aquí tienes apenas tres segundos entonces, si has seguido todo el proceso y probablemente consigues esta primera impresión y una vez que consigues la primera impresión tienes mucho más suerte de generar una impresión duradera ¿qué quieres decir qué? el usuario se queda en la ver, navega y hasta llega a donde tú quieres que ya y si una vez ya utiliza esta vez tienes mucho más posibilidad y me lice con tu página un diseño correcto muchas veces para una ambiente que da confianza da aspecto de profesionalidad, seriedad y también es un diseño reconocible a través de todo el guía de estilo que hemos generado, al final hemos creado un entorno que se reconoce bueno y además anima a tomar las decisiones y también lo que crea es el común es que el usuario se identifica con el entorno que se cuente bueno, en generar un buen diseño lo hace más que convertir bueno, esto es un poco todo para lo que decimos, me habían dicho que hablo un poco de la inspiración para inspirarnos bueno, inspirarnos es decir, sabemos que en nuestra disciplina lo único constante es el cambio constantemente tenemos que formarnos entonces necesitamos recluir una serie de fuentes, aquí hoy afortunadamente estamos en la compañía de unos profesionales que tienen unos blogs magníficos material muy valioso, pero también hay unos cuantos que no sé si lo conocéis y lo voy nombrando muy rápido tenemos la página de Smashing magazine que dicen que es una biblia de los diseñadores la verdad es que cada dos días tienen un artículo nuevo los tutoriales son muy fantásticos tienen el guaje muy ameno la página a bordo es un clásico lo que pasa es que más que la página donde premian a las webs nos interesa el blog que viene que también habla una vez a la semana de un caso real que la verdad es que merece la pena sacar 20 minutos y estudiar este caso está la página de lista, aparte de la misma empresa de los libros, que aparte son los libros muy delgados, con una edición fantástica un lenguaje muy muy muy ameno estaría bien tener la colección aquí tenemos muchos artículos que la verdad es que un día que no tenías ganas de trabajar, es uno de estos y ya te fuiste bueno, luego tenemos Red Design Leapot curiosamente tienen un diseño muy caótico, pero material super interesante y aquí hay una página super curiosa que se llaman principios de los diseñadores y aquí es un open source que van publicando por ejemplo 7 principios de un frontend 7 principios de diseño etico otra página, más First Red Designer y Design Shack sobre todo algo que más inspira, más ganas de trabajar esta futura eventos de este estilo muy bien, muchas gracias