Núria Saban de Llos& a Eina

Nos visita Núria Saban programadora de Llos&

El 28 de mayo nos visitó Núria Saban, ex-alumna de Eina, “Web developer, Frontendpadawan, html, css, js”. Así es como se define en su web. Nos explicó cuáles habían sido sus pasos hasta lograr el que había soñado: ser miembro de Llos&. Al acabar la carrera, se inició en un estudio de arquitectura durante cinco años, trabajando como maquetadora. Después, estuvo dos años por su cuenta con diversos clientes, como la Fundación Mies van der Rohe. Cansada del pluriempleo, decidió lanzarse hacia la programación y el mundo web, que era lo que más le gustaba. Así entró a Llos&.

Su intervención empieza con los problemas que surgen con los diseñadores gráficos. Nos hace una lista de cuáles son los aspectos básicos que un diseñador debería detallar en su trabajo para que en programación pudieran empezar bien sin que después haya muchos cambios. Para el desarrollo de un sitio web, el formato en que llega un proyecto al programador es muy importante.

Nos muestra las ventajas que tiene el programa Sketch para su trabajo. También nos comenta que los diseñadores tampoco piensan en las diferentes medidas de pantalla de cada dispositivo (los media queries, las alturas y anchuras de pantalla, muy diferentes en cada dispositivo). “Si sabes qué aplicaciones pueden tener los media queries y jugar con ellos, te marcas una web muy más guay”, nos dice la Núria. Nos cuenta también que diseña segun el criterio mobile first, es decir, que el diseño se basa en la versión para móvil. A partir de este, va añadiendo media queries segun vaya creciendo la anchura de la pantalla.

Nos explica que la accesibilidad es muy importante, no solo para aquellos que la necesitan, sinó para todo el mundo: navegar por la web sería mucho más cómodo para todos. A raíz de esto, nos habla de tipografía y advierte que en un sitio web no puede utilizarse tipografía de menos de 16 px. Y, si la hay, debe ser para cosas muy secundarias. También nos comenta otra cosa que los diseñadores nunca tienen en cuenta: que hay muchas unidades de medida en web para definir el tamaño de la tipografía. Como ems, rems, píxeles, y punto view-port (% de la pantalla). Este último permite que la tipografía crezca a la vez que la pantalla de una manera mucho más fluida y que el diseño sea mucho más fino.

Repasa errores que tenemos que evitar cuando diseñamos un web. Habla del contraste, de cuando los enlaces no se distinguen, nos da herramientas para comprobar si nuestro web pasa el test de contraste, como por ejemplo: https://colorable.jxnblk.com. Nos dice que el outline focus, aunque no nos guste el resultado, es muy importante no eliminarlo: la navegación con tabulador o con lectores de pantalla debe estar siempre disponible. Si no, será un problema navegar para personas que necesitan estos sistemas. En esta página se explica su importancia: http://www.outlinenone.com/

Terminando, habla de los colores en la web. Nos recomienda una página: https://www.colorhexa.com. También comenta las interacciones y su sentido: cuando un botón está activado, desactivado, que pasa con el hover, y se queja de que muchas de estas cosas el diseñador nunca las define.

Nos hemos quedado, pues, con unas cuantas lecciones para aprender y tener en cuenta para llevar a cabo un diseño web y cuales son las necesidades que tiene un programador.

SEO (Seraching Engine Optimization)

Hoy, acabamos la asignatura de SEO (Search Engine Optimization) con Rubén Alcaraz.

En esta asignatura, hemos aprendido cómo mejorar el posicionamiento de una página web en las páginas de resultados de los motores de búsqueda, la importancia que tiene hacer un buen SEO, donde se pueden aplicar estas técnicas, como funcionan los motores de búsqueda, cuál es su estructura y arquitectura para entender y mejorar nuestro posicionamiento web, las diferentes estrategias que podemos utilizar y entender cómo los usuarios nos buscan para poder elegir bien las palabras clave por las que queremos competir.

Para poner en práctica todos los conocimientos teóricos hemos intentado posicionar una imagen en Google desde la página web que creamos para la asignatura Diseño para gestores de contenidos.

Para hacer esta práctica hemos utilizado un plugin de WordPress llamado Yoast, que nos ha ayudado a guiarnos para poder posicionar nuestra imagen en Google. Hemos aprendido la importancia que tiene el SEO-on page, y hacer una buena optimización de nuestra página, y el SEO-off page para aumentar la autoridad de nuestra página a través de enlaces internos y externos.

Como práctica final hemos tenido que auditar una página web, analizando su contenido, la densidad de palabras clave, como es su arquitectura de la información, sus aspectos técnicos y de rendimiento. De esta forma hemos podido analizar y detectar los errores y puntos de mejora de la página web en cuestión.

Análisis y Gestión de Publicaciones Digitales

Ya hemos acabado la asignatura de Análisis y Gestión de Publicaciones Digitales impartida por el profesor Diego Fernández. En ella hemos realizado una infografía que nos ha permitido aprender sobre arquitectura de la información encargada del estudio, análisis, organización, disposición y estructuración de la información. También hemos podido trabajar el diseño de la información, en la cual hemos tenido que representar
de una forma gráfica la información y estructurarla eficiente y efectivamente para que pudiese ser muy visual y entenderse rápidamente.

Los resultados han sido muy diversos. Se han trabajado inforgrafías relacionados con el auge del cybercrimen o la piratería, una comparativa de las vendas en los medios online en el black friday, sobre las fake news, el uso de las apps para buscar pareja, hasta se han preguntado si el print está muriendo.

Diseño centrado en el usuario

En esta asignatura impartida por el profesor Enric Mor, hemos aprendido a tener una visión global de todos los aspectos que intervienen en el diseño centrado en el usuario (DCU). Este se puede concebir como «la disciplina de la interacción persona-ordenador (IPO), la usabilidad y la experiencia de usuario».A través de diferentes actividades tanto teóricas como prácticas hemos ido descubriendo qué procesos son claves en el DCU. Hemos puesto énfasis en el valor de conocer a los usuarios a quienes irá destinado nuestro producto, las etapas y técnicas que lo configuran, al saber aplicar el DCU en la definición de nuestros proyectos, como hacer un análisis correcto de aquello que queremos diseñar, y por último como implementar y evaluar productos digitales interactivos. En nuestro caso, el rediseño de una página web.

The Ideal Wallet

Esta actividad fue la carta de presentación de la asignatura. A través de un ejercicio práctico de design thinking por parejas, diseñamos una cartera a medida a partir de un pequeño briefing que le hacíamos a nuestra compañera. De este modo hacíamos valer la importancia de conocer al usuario a quién va destinado nuestro producto. Por lo tanto poder diseñar a medida y buscar soluciones reales en los problemas planteados del usuario.

Lost & Found

En esta actividad realizada por grupos, aprendimos a utilizar diagramas de flujo para el diseño de una app. El objetivo de esta práctica era trabajar de manera colectiva el recorrido más lógico que permitiera reportar, buscar o encontrar una mascota perdida.

Spaghetti Marshmallow Challange

Esta fue la última actividad práctica que realizamos en la asignatura. Su finalidad era trabajar el design thinking para practicar el prototipatge en colectivo pudiendo testear aquello que construíamos a través de prueba y error de manera colectiva. El objetivo de esta actividad era crear una estructura que se aguantara con 20 espaguetis crudos y 1 metro de cinta, 1 metro de cordel y 1 Marshmellow en la punta. Todo un reto!

portfolio-gaizka

Diseño para gestores de contenidos CMS

A lo largo de la asignatura de Diseño para gestores de contenidos CMS con Daniel Julià hemos aprendido sobre maquetación web mediante HTML y CSS además de PHP para trabajar con Wordpress. Finalmente, hemos puesto en práctica tales conocimientos diseñando y programando nuestros propios portfolis.

A continuación, una compilación:

 

Gemma Fontanals

Daniel Iglesias

 

Emily Eldridge

Gaizka Pagonabarraga

Andrea Rueda

Laura Magallón

Carolina Orozco

programacio-portada

Introducción a la programación

A lo largo de la asignatura Introducción a la programación, impartida por Jordi y Oriol Collell, hemos aprendido tanto nociones básicas como otras más complejas del propio medio que nos han permitido formar y desarrollarnos en la programación web.

Estos son algunos de los trabajos finales, protagonizados por diferentes animaciones SVG creadas con HTML, CSS y Javascript a partir de librerías como Green Sock, utilizando en la mayoría de los casos TweenMax.

after-effects

Video digital y animación

A lo largo de las sesiones de Video digital y animación hemos aprendido y trabajado con Diego Fernández las técnicas y recursos de creación audiovisual destinada a redes: desde características básicas del vídeo y propiamente de las animaciones digitales 2D, introducción al 3D, así como también al tratamiento de audio a partir de la edición con After Effects.

Estos son algunos de los proyectos finales de la asignatura:

King workshop

Gabriela Lazbal y el Concept Art

El pasado martes 15 de Mayo tuvimos la visita de Gabriela Lazbal en la asignatura de Proyectos Rich Media. Lazbal trabaja en King, empresa líder en el sector del entretenimiento interactivo para dispositivos móviles, conocida mundialmente por su juego estrella Candy Crush. Después de unos seis años al equipo, actualmente su rol es el de Senior Artist y Lead Artist del equipo de arte del videojuego Bubble Witch 3

Lazbal nació y se formó en Argentina pero hace ya unos 20 años que vive en la península, habiendo trabajado hasta el momento en Madrid, Zaragoza y Barcelona. De entrada, nos explica que su recorrido se caracteriza por ser bastante multidisciplinar, guiada siempre por su vena artística.

Desde los trece años tenía claro que quería estudiar la carrera de Bellas Artes. No obstante, a raíz de su espíritu curioso, por el camino ha seguido cursando otras disciplinas, como por ejemplo, producción y realización de cine y televisión a la vez que animación analógica y de 3D. Además, antes de entrar a King y paralelamente a sus estudios, había dedicado una buena parte de su trayectoria profesional a la docencia y a trabajar de manera independiente como autónoma.

King workshop

Durante la sesión, Lazbal nos explica con detalle el proceso de elaboración de videojuegos. En el caso de la empresa sueca, sigue una metodología de trabajo basada en el modelo SCRUM, el cual evita jerarquías potenciando la proactividad y la coordinación entre sus miembros. Destaca sobre todo el éxito de los proyectos porque se construyen a partir de una base comunicativa muy necesaria.

«Lo más positivo que tiene SCRUM es la retrospectiva. En esta sesión se comenta qué ha ido bien o mal tanto a nivel profesional como personal. Va bien para evitar arrastrar problemas o malentendidos acumulados y se establecen relaciones de confianza mediante la conversación.»

Nos cuenta que el brainstorming de la primera fase lo organizan perfiles muy variados como es el caso de artistas, diseñadores/se de mecánicas de juego, productores/se, data scientists y, en fase más avanzada de prototipación o implementación, también se unen developers y personas del área de testing. Aún así, no se encuentran sólo para hacer la inicial lluvia de ideas, se van reuniendo constantemente para compartir todas las decicions, poniendo en común tanto la ideación como el análisis y los resultados de los tests durante la evolución del producto.

«Juntarse y discutir las ideas hace que una de simple vaya enriqueciéndose. Por eso el trabajo en equipo es tan importante.»

A grandes rasgos, Lazbal define el proceso de progresivo y nos introduce el concepto de sprints, es decir, consta de toda una serie de tareas estipuladas y pautadas anteriormente que se tienen que llevar a cabo de manera conjunta dentro de una duración prevista para poder testear el producto lo antes posible. Tanto la fase creativa como de producción crecen de la mano pero sí que es verdad que la parte de conceptualización es un trabajo previo al de desarrollo de la aplicación final. Por este motivo, Lazbal asegura que se tienen que pulir mucho los dibujos, pasando por muchas fases, para alcanzar un diseño definitivo que pueda ser aplicado al detalle cuando se cree en 3D.

King workshop

A lo largo de la ponencia se trataron otros aspectos en relación el diseño. Por un lado, se habló sobre el tratamiento tipográfico y el perfil UX/UI, importantes también a la hora de definir el estilo del mundo del juego y satisfacer las expectativas de los jugadores y jugadoras. Por el otro, Lazbal nos dio consejos sobre cómo afrontar el mundo laboral. A través de anécdotas, nos comentaba cómo prepararse una entrevista de trabajo, tipos de portfolio y la importancia de mantener una actitud proactiva pero a la vez receptiva siempre, abierta al feedback que tanto nos beneficia.

Sketching

Diseño Centrado en el Usuario

A lo largo de la asignatura de Análisis y Gestión de Publicaciones Digitales con Enric Mor, descubrimos el DCU (Diseño Centrado en el Usuario) y las etapas técnicas que configuran su proceso iterativo. Es importante saber aplicarlo para cualquier producto interactivo ya que enriquece la usabilidad y accesibilidad de la experiencia del usuario.

Aprendimos sobre UX/UI llevando a cabo el rediseño de la página web de un cliente real. Para realizarlo, completamos todas las fases del proyecto empezando por su definición de la mano de la investigación, siguiendo con el planteamiento de la arquitectura de la información y sketching, el diseño de wireframes junto con el prototipo y la evaluación. También, combinamos el contenido teórico dado con actividades dinámicas elaboradas en clase.

The Wallet Project

La primera actividad fue una introducción al Design Thinking con el desarrollo por parejas de un briefing a medida. En una hora, comprendimos lo imprescindible que es aproximarse a la persona destinataria del producto o servicio, en ese caso un monedero, para conocer sus necesidades. Para conseguirlo, teníamos que entrevistarnos mutuamente, dejando a un lado nuestras preferencias como diseñadores y proponiendo soluciones reales que pudiesen satisfacer cada caso.

User Journey

El diseño de toda plataforma online o aplicación debe contemplar los escenarios o user journeys de los usuarios analizando previamente el tipo de actividad, sus contextos de uso y las emociones experimentadas para detectar dichos fallos que entendemos como oportunidades de mejora. En esta ocasión, definimos perfiles y recorridos de personas que utilizarían una app para escuchar música.

MDG EINA CDU 2018

Pet Lost & Found

En esta actividad utilizamos diagramas de flujo para diseñar la navegación de una app cuya funcionalidad consistía en un sistema de búsqueda y encuentro de mascotas perdidas.

Spaghetti Marshmallow Challange

Hacia el final de la asignatura, realizamos esta actividad que consistía en, por grupos de 3-4 personas y en 18 minutos, construir una estructura que se sostuviera por sí sola con los siguientes elementos:

  • 20 espaguetis crudos
  • 1 metro de celo
  • 1 metro de cordel
  • 1 nube de golosina
  • 1 tijeras

Y algo más, en lo más alto debía ubicarse la nube de golosina. La iniciativa, viene planteada desde Harvard por Tom Wujec, quien nos llevó a la reflexión final sobre el éxito o fracaso de trabajar en equipo, especialmente entre estudiantes de diseño.

Desde el principio hablamos de diseño iterativo, una metodología cíclica de cambios y mejoras siempre en base a pruebas de iteración realizadas más recientemente. Se hacen prototipos, tests y análisis de un producto o servicio de forma continuada para alcanzar cada vez una versión más perfeccionada.

Infographic

Análisis y Gestión de Publicaciones Digitales

En la asignatura de Análisis y Gestión de Publicaciones Digitales hemos elaborado infografías de temáticas en relación a Internet y las tecnologías. En la última sesión con Diego Fernández, las presentamos en el aula con la intención de compartir y comentarlas conjuntamente.

El resultado expuesto fue muy diverso tanto a nivel formal como de contenido, el cual era muy amplio: trataba desde la existencia de las cookies, el mundo de los emojis, el éxito de las citas online, la música en streaming, el uso y abuso de los smartphones o Instagram y el curioso caso del #foodporn.