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