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

Pensando en patrones para diseñar y desarrollar interfaces

Pensando en patrones para diseñar y desarrollar interfaces

Valeria Garcia

June 12, 2018
Tweet

Other Decks in Design

Transcript

  1. HOLA, Mi nombre es Valeria García. Soy Diseñadora UX, amante

    del CSS y los sistemas de diseño. En mi tiempo libre me gusta patinar y dibujar. @painpony_skates @painpony @_painpony
  2. •“No se pudo cargar la página” 
 •“Edita el marcador”

    / “Bookmark this page” 
 •“Quiero una página web” Más ejemplos
  3. La metáfora de página viene desde el inicio de la

    web, cuando Tim Berners Lee creó la World Wide Web, para que él y sus compañeros lograran compartir documentos académicos.
  4. Pero la realidad es que la web no es como

    un libro y esta metáfora afecta cómo creamos y abordamos proyectos.
  5. Átomos “La partícula más pequeña en que un elemento puede

    ser dividido sin perder sus propiedades químicas”.
  6. Son los elementos más básicos de un diseño, como un:

    label, input, button. También puede incluir elementos abstractos como color, tipografía y animaciones. Átomos
  7. Son una combinación de átomos. Las átomos por sí solos

    en muchos casos no son útiles, pero combinados generan funcionalidades. Moléculas
  8. Son un conjunto de moléculas, que crean una sección distintiva

    y compleja de la interfaz. Un header, footer, card, table, article… Organismos
  9. Las plantillas son un grupo de organismos que forman la

    estructura de contenido de una página. Es en esta etapa que se debe empezar a explorar el layout. Plantillas
  10. Las páginas son instancias específicas de una plantilla que muestra

    una versión final de la interfaz con contenido real. Páginas
  11. Pensar en términos de vocabulario de diseño, una colección de

    verbos, sustantivos y adjetivos, que permiten a diseñadores e ingenieros expresar su intención de crear un producto.
  12. Pero de nada sirve tener gran vocabulario si no existen

    reglas que gobiernen el cómo se pueden utilizar y unir estas palabras. Es por eso que todo lenguaje de diseño debe tener gramática.
  13. Compone: Formulario, Header, Log in.. Un botón es un componente

    básico que representa un concepto familiar para el usuario. Compuesto de: Fondo, border, texto, espaciado, cursor…
  14. “La composición musical es el proceso de hacer o formar

    una pieza musical combinando las partes o elementos de la música.” Art of composing -The Definitive Guide to Becoming a Composer
  15. Todo compositor busca que sus piezas expresen un sentimiento o

    evoque una imagen. Para lograr esto, debe seleccionar los elementos musicales indicados.
  16. Color Linea Forma Estructura Tamaño Textura Espacio Ritmo Dinámica Melodía

    Armonía Color del tono Textura Forma Elementos de la música Elementos del diseño gráfico
  17. Las 3 metáforas tienen el mismo objetivo: construir a partir

    de una cantidad limitada de elementos y patrones.
  18. Escoge la metáfora que sea más clara para ti y

    tu equipo. Lo importante es lograr el objetivo de dejar de pensar en página y comenzar a pensar en patrones.
  19. Identificar cuáles elementos transversales en la solución y establecer unas

    reglas de diseño, con el objetivo de limitar el alcance. Limitar
  20. Para asegurar el uso consistente de un patrón, se debe

    documentar y responder las siguientes preguntas: ¿Qué es?, ¿Para qué se usan?, ¿Cuándo se usan?, ¿Dónde ya se están usando?, ¿Cuáles son sus variaciones? Documentar
  21. Programas de diseño como XD, Sketch y Figma tienen la

    opción de convertir un elemento en un símbolo. Los símbolos son objetos vinculados que se pueden reutilizar en todas las mesas de trabajo de un documento. Como están vinculados, un cambio en uno de los símbolos se replica en los demás. Diseñar con símbolos
  22. Un UI kit es un archivo donde se encuentran todos

    los elementos de una interfaz, éste se utiliza para facilitar el uso de los patrones y agilizar la creación de nuevas interfaces. Crear UI Kits
  23. Establecer unos lineamientos y convenciones de código va a permitir

    que la solución sea más fácil de mantener y trabajar. Se pueden tener lineamientos para: La arquitectura, convenciones de nombres, formatos y sintaxis, comentarios, principios de desarrollo… Crear Lineamientos
  24. “Debe parecer como si una sola persona escribiera todo el

    código” Lonely Planet’s Rizzo - Development Principles
  25. Tal como en diseño se usan los “símbolos”, en en

    la implementación se debe reutilizar la mayor cantidad de patrones, utilizando Handlebars, Mustache, Web components. Reutilizar
  26. En un lugar, tener todos los patrones y componentes con

    el código necesario para utilizarlos, las variaciones que puede tener y documentación relevante. Centralizar los patrones
  27. • Crear una experiencia consistente 
 • Reducir errores de

    diseño y código 
 • Capacitar a miembros nuevos 
 • Pensar en los usuarios
 Beneficios
  28. Para más información • Website Style Guide Resources • UXPin

    Design Systems Webinars • Front-end Style Guides by Anna Debenham • Atomic Design by Brad Frost • A Design System Grammar by Daniel Eden