Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mosqueteros

La Personnalité
January 25, 2014

 Mosqueteros

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

La Personnalité

January 25, 2014
Tweet

More Decks by La Personnalité

Other Decks in Design

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