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
   

   View Slide

2. ¡En guardia! Preguntas.
   

   View Slide

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...
   

   View Slide

4. Cosas que ocurren...
   

   View Slide

5. "Ahora me programas esto."
   "Esto del código no es lo mío."
   ...
   "Designers who code"
   Contacto con la realidad factible.
   vs.
   

   View Slide

6. vs.
   "Coders who know design principles"
   Contacto con la realidad factible.
   "Ahora me pones esto bonito."
   "Es que yo de colores no sé."
   ...
   

   View Slide

7. "Nos vale con un Bootstrap o Foundation".
   Ya.
   “Nos vale con un Wordpress”.
   Ya.
   “Nos vale con una plantilla de Wordpress”.
   Ajam.
   

   View Slide

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?
   

   View Slide

9. ¿Por qué aproximarnos
   desde el diseño al
   desarrollo?
   

   View Slide

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...
    

    View Slide

11. Sumarnos a un proceso
    iterativo, progresivo
    y sujeto a cambios.
    OK, SIN MIEDO.
    Inestabilidad, falta de un control 100%.
    

    View Slide

12. Mejora la comunicación.
    Evita confusiones.
    Limita errores.
    Currar codo con codo con
    diferentes enriquece.
    

    View Slide

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.
    

    View Slide

14. Qué aprendimos al
    acercarnos
    

    View Slide

15. El modelo de datos en las
    diferentes fases de nuestro
    trabajo de diseño
    Entidades. Propiedades. Acciones. Estados.
    

    View Slide

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)
    

    View Slide

17. Modularización del diseño
    enfocada a la reutilización.
    (Superadísimo desde hace años en el
    mundo del desarrollo)
    

    View Slide

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.
    

    View Slide

19. Control de versiones
    Las ventajas de usar GitHub o BitBucket
    Clientes GIT: SourceTree / Tower
    vs.
    HTMLJuan-buena_v15.final.backup12.zip
    

    View Slide

20. Estructuras de archivos
    Son parte de nuestro vocabulario ya.
    Layouts, vistas, partials, estáticos, builds,...
    

    View Slide

21. La potencialidad de
    preprocesadores CSS
    (SASS, LESS)
    Conceptos como mixins, extends, includes... funciones,
    loops, etc. y a valorar librerías como Compass.
    

    View Slide

22. Empuñar la terminal.
    Si hay que instalar algo, se instala. ;)
    ¿Dependencias? ¿Tiramos de Bower? ¿De Bundler?
    

    View Slide

23. Empuñar el inspector en el
    navegador.
    El DOM, la consola, los recursos, el timeline, etc.
    It’s a complex world, baby.
    

    View Slide

24. Empuñar otras dagas
    Codekit / Hammer / Mixture / etc. (o Grunt.js)
    para optimizar nuestros CSS, JS, imágenes, etc.
    

    View Slide

25. Comprender conceptos
    builds / code linting / test unitarios / compilar /
    minificar / concatenar / performance /
    deployment
    

    View Slide

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
    

    View Slide

27. "Designers create for humans,
    developers create for
    computers".
    Abandonar esta idea:
    We all create for humans.
    

    View Slide

28. Y seguimos
    dedicándonos a
    DISEÑAR
    (En mayúsculas y en su plena acepción)
    

    View Slide

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.
    

    View Slide

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,...
    

    View Slide

31. ¿Cómo mejorar como
    mosqueteros?
    

    View Slide

32. LA PREGUNTA DE CADA MAÑANA
    ¿Qué aportas que no vaya a poder
    hacerlo una máquina de aquí a nada?
    

    View Slide

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.
    

    View Slide

34. No hablamos de
    “hombres y mujeres orquesta”
    Hablamos de converger con cualquiera
    de las disciplinas del sector.
    

    View Slide

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.
    

    View Slide

36. Desmenuzar el proyecto
    Performance, componentes, transiciones/
    animaciones, mapas, visualizaciones...
    Y contemplar el conjunto.
    CON LA DEBIDA CALMA. TANTOS FRENTES LLEVAN TIEMPO.
    

    View Slide

37. Vestir diferentes sombreros
    Sin fronteras psicológicas
    (ni "tigres y leones")
    

    View Slide

38. Comunicación y testeo son
    fundamentales
    Continuos y compartidos.
    No olvidemos, es ‘diseño en navegador’.
    

    View Slide

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.
    

    View Slide

40. Es una batalla difícil
    

    View Slide

41. Misiones cada vez más
    sofisticadas
    Hay + plataformas y dispositivos.
    Nos exige ser + versátiles.
    Mismo tiempo, + quehaceres.
    Reclama + conocimiento.
    

    View Slide

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.
    

    View Slide

43. Revisar nuestros procesos de trabajo.
    Actualicémoslos.
    Es bueno ir aplicando pequeñas
    revisiones y mejoras continuas.
    Es un mundo cambiante.
    

    View Slide

44. Colaboremos
    estrechamente.
    Eduquémonos mutuamente para que unos
    pocos no tengan que aprenderlo todo.
    

    View Slide

45. by Addy Osmani
    First do it.
    Then do it right.
    Then do it better."
    "
    

    View Slide

46. Todos para uno y uno
    para todos.
    

    View Slide

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
    

    View Slide

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. :)
    

    View Slide

49. • Musketeer icons designed by Simon Child from the Noun Project Creative Commons – Attribution (CC BY 3.0)
    Credits
    

    View Slide