Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Disenadores desarrolladores y viceversa

260 views

Published on

"Modern Web Event" es un evento gratuito y sin ánimo de lucro organizado por la UOC (Universitat Oberta de Catalunya). La primera edición se celebró en 2015 y a lo largo de estas tres ediciones (Barcelona 2015, Bilbao 2016, Sevilla 2017) profesionales de diferentes ramas del sector IT han compartido sus conocimientos.

El encuentro se dirije a todos aquellos que quieran aprender sobre las nuevas tecnologías web de la mano de profesionales apasionados por compartir conocimiento en comunidad.

La edición de 2017 se celebró el día 6 de junio en Sevilla. Me invitaron a participar en esta edición y lo hice encantado con mi charla "Diseñadores, desarrolladores y viceversa", en la que pretendía romper el viejo mito de que diseñadores y desarrolladores no se entienden. Hablé de vuenas prácticas, metodología y flujo de trabajo.

Published in: Design
  • Be the first to comment

Disenadores desarrolladores y viceversa

  1. 1. Diseñadores, desarrolladores y viceversa
  2. 2. Abel Sutilo Diseñador de Producto Digital ¡Hola!
  3. 3. Quiero ser mejor diseñador Mercado y contexto actual Diseñadores, desarrolladores y viceversa Qué se espera de mí Qué me gustaría ser Habilidades y marca personal
  4. 4. Mercado y contexto actual
  5. 5. “Producto Digital” Multiples contextos Diseñadores, desarrolladores y viceversa Multiples formatos Desktop, Tablet, Mobile WebApp, Ecommerce, Red Social, etc…
  6. 6. Diseño como servicio externo Diferentes tipos de organización Diseñadores, desarrolladores y viceversa La misma necesidad
  7. 7. Habilidades y marca personal
  8. 8. El especialista que sabe de todo Diseñadores, desarrolladores y viceversa UX UI Front
  9. 9. Diseñadores, desarrolladores y viceversa
  10. 10. Qué he aprendido de los desarrolladores para ser mejor diseñador
  11. 11. 1 Lee toda la documentación desde el primer minuto
  12. 12. Hecho: Diseñadores, desarrolladores y viceversa A los diseñadores no les gusta leer Sólo compran libros con dibujos
  13. 13. 2 Pregunta todo el tiempo antes, durante y después
  14. 14. FAQs Diseñadores, desarrolladores y viceversa ¿Puedo usar la herramienta que quiera para diseñar? Ojo con trabajar con Sketch si el maquetador no tiene mac Ojo a las premisas tecnológicas que afectan a los visuales ¿Existe alguna preferencia en framework CSS?
  15. 15. 3 Atomiza y encapsula Control y mínimo esfuerzo
  16. 16. Diseñadores, desarrolladores y viceversa Diseño UI orientado a objetos We’re not design pages, we’re designing systems of components —Stephen Hay http://bradfrost.com/blog/post/atomic-web-design
  17. 17. Diseñadores, desarrolladores y viceversa
  18. 18. 4 Documenta todo lo que haces ¡Piensa en el futuro, McFly!
  19. 19. Documentación del diseño Diseñadores, desarrolladores y viceversa Estructura de carpetas Siempre la misma nomenclatura Comprensible para cualquiera Sólo lo necesario Nombra todas las capas Planifica acceso a terceros Cuídate de las dependencias del software Estructura del documento http://photoshopetiquette.com
  20. 20. Ejemplo de estrutura Diseñadores, desarrolladores y viceversa Nombre del cliente Proyectos Recursos Nombre del proyecto 1 Nombre del proyecto 2 UX UI Logo, Tipografía, Imágenes, etc… Documentación UX Tecnología, User Journey, etc… Diagrama de flujo Wireframe UI Screenshots Versions
  21. 21. 5 Procura ser honesto Diseño medible
  22. 22. Diseño objetivo y honesto Diseñadores, desarrolladores y viceversa No te enamores de tu versión Diseño orientado a objetivos ¡sin dark patterns, ojo! No hay que tener respuesta para todo sin resultados previos Permítete dudar https://darkpatterns.org
  23. 23. 6 No complazcas por temor Te van a pagar (o no) igualmente
  24. 24. 7 “Flípate” Se notará en tu trabajo
  25. 25. 8 Las herramientas no te definen Requiem por Freehand, Fireworks, etc
  26. 26. Herramientas de diseño Diseñadores, desarrolladores y viceversa https://www.cooper.com/prototyping-tools
  27. 27. 9 HTML y CSS es obligatorio Sin excusas
  28. 28. HTML y CSS Diseñadores, desarrolladores y viceversa Presentación Montaje de screenshots a tamaño real Guía de estilos y manual de identidad Identidad del producto
  29. 29. 10 Allana el camino Y convierte al desarrollador en tu aliado
  30. 30. Facilita la comunicación con tu trabajo Diseñadores, desarrolladores y viceversa Modelo del cliente Utiliza un lenguaje no técnico Lenguaje técnico y solución abstracta Solución del desarrollador Traducción visual del modelo abstracto
  31. 31. Extra Siempre positivo Profesional antes que hater
  32. 32. ¡Gracias! http://abelsutilo.com Abel Sutilo @abelsutilo

×