Mosqueteros

Charla que dimos en el Bilbostack sobre la labor conjunta entre diseñadores y desarrolladores

Transcript

1. Mosqueteros Goio Telletxea & Ana Malagon PRESENTADO POR: #mosqueteros #bilbostack @lapersonnalite
2. ¡En guardia! Preguntas.
3. ¿Cuántas personas estamos? ¿Cuántos sois diseñadores? ¿Cuántos diseñadores hay en vuestros proyectos/ empresas? ¿Qué papel juegan estos diseñadores? Ahí van...
4. Cosas que ocurren...
5. "Ahora me programas esto." "Esto del código no es lo mío." ... "Designers who code" Contacto con la realidad factible. vs.
6. vs. "Coders who know design principles" Contacto con la realidad factible. "Ahora me pones esto bonito." "Es que yo de colores no sé." ...
7. "Nos vale con un Bootstrap o Foundation". Ya. “Nos vale con un Wordpress”. Ya. “Nos vale con una plantilla de Wordpress”. Ajam.
8. La industrialización (librerías, plantillas, frameworks) ahorra tiempo y estandariza. Ok. Pero... ¿perdemos conocimiento como contraprestación a la rentabilidad? ¿No empieza a ser todo muy uniforme?
9. ¿Por qué aproximarnos desde el diseño al desarrollo?
10. ‘Paja mental’ de mockup. REDUCIR EL GAP: vs. Forma y función ‘realistas’. EN TIEMPOS DE EJECUCIÓN, POSIBILIDADES,... JUGUETES VISUALES, INTERACCIONES MAL DEFINIDAS, IMG ESTÁTICAS...
11. Sumarnos a un proceso iterativo, progresivo y sujeto a cambios. OK, SIN MIEDO. Inestabilidad, falta de un control 100%.
12. Mejora la comunicación. Evita confusiones. Limita errores. Currar codo con codo con diferentes enriquece.
13. Automatizar las tareas repetitivas en el flujo de trabajo MEJORAR EL PROCESO. EFICIENCIA (Grunt.js, Boilerplates...) para ser efectivo y centrar esfuerzos en diseñar lo específico/ diferente en cada proyecto. ARRANQUE RÁPIDO. Ahorrar tiempo y costes. Ser más competitivos.
14. Qué aprendimos al acercarnos
15. El modelo de datos en las diferentes fases de nuestro trabajo de diseño Entidades. Propiedades. Acciones. Estados.
16. La importancia de nombrar las cosas. Expertos en naming. “There are only two hard things in Computer Science: cache invalidation and naming things.” by Phil Karlton (y en poner motes)
17. Modularización del diseño enfocada a la reutilización. (Superadísimo desde hace años en el mundo del desarrollo)
18. Styleguides Espacio común de trabajo. Estructura y ordena los entregables. Herramienta de comunicación mantenible en el tiempo. Sirve al equipo de trabajo. Sirve al cliente. Starbucks, GEL, etc. Sí, es un framework. Sí, son templates. Sí, es una librería. PERO ES UNA SOLUCIÓN ESPECÍFICA.
19. Control de versiones Las ventajas de usar GitHub o BitBucket Clientes GIT: SourceTree / Tower vs. HTMLJuan-buena_v15.final.backup12.zip
20. Estructuras de archivos Son parte de nuestro vocabulario ya. Layouts, vistas, partials, estáticos, builds,...
21. La potencialidad de preprocesadores CSS (SASS, LESS) Conceptos como mixins, extends, includes... funciones, loops, etc. y a valorar librerías como Compass.
22. Empuñar la terminal. Si hay que instalar algo, se instala. ;) ¿Dependencias? ¿Tiramos de Bower? ¿De Bundler?
23. Empuñar el inspector en el navegador. El DOM, la consola, los recursos, el timeline, etc. It’s a complex world, baby.
24. Empuñar otras dagas Codekit / Hammer / Mixture / etc. (o Grunt.js) para optimizar nuestros CSS, JS, imágenes, etc.
25. Comprender conceptos builds / code linting / test unitarios / compilar / minificar / concatenar / performance / deployment
26. La velocidad y el rendimiento (performance) también son UX "Speed must be treated as an essential design feature" Ref.: www.browserdiet.com by Addy Osmani
27. "Designers create for humans, developers create for computers". Abandonar esta idea: We all create for humans.
28. Y seguimos dedicándonos a DISEÑAR (En mayúsculas y en su plena acepción)
29. Nuestra labor no se ciñe a la de "maquetadores" ni "diseñadores web" a nivel de código. Antes de llegar a la ejecución técnica hay mucho camino. Es sólo una parte técnica importante. Pero solo parte.
30. Interdisciplinares en el propio ámbito del diseño Usabilidad, accesibilidad, experiencia de usuario, diseño de interfaz, de interacción, de servicios, diseño para dispositivos diversos,...
31. ¿Cómo mejorar como mosqueteros?
32. LA PREGUNTA DE CADA MAÑANA ¿Qué aportas que no vaya a poder hacerlo una máquina de aquí a nada?
33. Ser mejor diseñador. De modo que un programador o un framework no ofrezca un diseño mejor que el tuyo. Ser mejor programador. De modo que un diseñador o un framework no permita programar casi como tú. Acercarse y Distanciarse Convivir y mejorar.
34. No hablamos de “hombres y mujeres orquesta” Hablamos de converger con cualquiera de las disciplinas del sector.
35. Participar en la definición de los productos o servicios digitales Una pizarra, papel y lápiz, post-its,... Lo analógico y verbal ayuda a crear equipo en un espacio físico común.
36. Desmenuzar el proyecto Performance, componentes, transiciones/ animaciones, mapas, visualizaciones... Y contemplar el conjunto. CON LA DEBIDA CALMA. TANTOS FRENTES LLEVAN TIEMPO.
37. Vestir diferentes sombreros Sin fronteras psicológicas (ni "tigres y leones")
38. Comunicación y testeo son fundamentales Continuos y compartidos. No olvidemos, es ‘diseño en navegador’.
39. Compartir Mural.ly para moodboards / Sizzlepig para servir imágenes / Typekit para fuentes / Icomoon para iconos / Codepen para snippets / editores online de código / etc.
40. Es una batalla difícil
41. Misiones cada vez más sofisticadas Hay + plataformas y dispositivos. Nos exige ser + versátiles. Mismo tiempo, + quehaceres. Reclama + conocimiento.
42. No es un proceso industrial en cadena. Incorporar diversos perfiles desde el inicio. Aprender a hablar, a tolerar, a ceder, a negociar. Comprender el objetivo común.
43. Revisar nuestros procesos de trabajo. Actualicémoslos. Es bueno ir aplicando pequeñas revisiones y mejoras continuas. Es un mundo cambiante.
44. Colaboremos estrechamente. Eduquémonos mutuamente para que unos pocos no tengan que aprenderlo todo.
45. by Addy Osmani First do it. Then do it right. Then do it better." "
46. Todos para uno y uno para todos.
47. • "Automating Front-end Workflow" https://speakerdeck.com/addyosmani/automating- front-end-workflow • "Tooling For The Modern WebApp Developer" https://speakerdeck.com/addyosmani/ tooling-for-the-modern-webapp-developer • "Rendering Performance Case Studies" https://speakerdeck.com/addyosmani/ velocityconf-rendering-performance-case-studies • "Designers, Developers, And Unicorns, Oh My!" https://medium.com/design-startups/ f2802873e64e • "On Being A Designer And A Developer: Not Quite Unicorn Rare" https://medium.com/ design-startups/614df733946a Algunas referencias
48. ¡Desenvainad! / Visit us: www.lapersonnalite.com / Write us: hq@lapersonnalite.com / Tweet us: @lapersonnalite Goio Telletxea & Ana Malagon PRESENTADO POR: HEMOS LLEGADO AL FINAL. :)
49. • Musketeer icons designed by Simon Child from the Noun Project Creative Commons – Attribution (CC BY 3.0) Credits