Slide 1

Slide 1 text

Mosqueteros Goio Telletxea & Ana Malagon PRESENTADO POR: #mosqueteros #bilbostack @lapersonnalite

Slide 2

Slide 2 text

¡En guardia! Preguntas.

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Cosas que ocurren...

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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?

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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.

Slide 14

Slide 14 text

Qué aprendimos al acercarnos

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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)

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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.

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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.

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

¿Cómo mejorar como mosqueteros?

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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.

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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.

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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.

Slide 40

Slide 40 text

Es una batalla difícil

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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.

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Todos para uno y uno para todos.

Slide 47

Slide 47 text

• "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

Slide 48

Slide 48 text

¡Desenvainad! / Visit us: www.lapersonnalite.com / Write us: [email protected] / Tweet us: @lapersonnalite Goio Telletxea & Ana Malagon PRESENTADO POR: HEMOS LLEGADO AL FINAL. :)

Slide 49

Slide 49 text

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