Então Brad Frost foi lá e fez.
Desde que começou-se a falar em Responsive Design, mucha gente tem se perguntado (e me perguntado) como fica a documentação ea entrega das telas de determinado producto. Já falamos sobre esto aquí en el blog, y también como Diseñadores y Desenvolvedores têm se aproxima cada vez más para hacer esto acontecer.
“Até alguns anos atrás era mucho común que em um proyecto fossem desenvolvidos wireframes, diseños y depois maquetas clicáveis de una interfaz determinada. En el proceso de trabajo en cascada, cada entrega es validada con el cliente para que se inicie una etapa siguiente. Esta es una forma segura de garantizar que el diseñador visual solo comenzará a trabajar cuando el wireframe haya sido aprobado por el cliente y el pelo restante del tiempo, evitando horas desperdiçadas en refação.
Acontece que no exemplo citado acima, o time acaba desenvolvendo 3 protótipos secuenciales. La estructura alámbrica no es más que un prototipo, una simulación de como una interfaz debe funcionar. El diseño en jpg también es un prototipo, una segunda simulación de la misma interfaz. Y cuando el UX utiliza una herramienta de creación de diseños clicados o wireframes clicados, acaba criando un tercer prototipo de la misma tela”.
daqui
Então Brad Frost foi lá e fez.
E usando una metáfora bastante conhecida da gente: átomos, moléculas, organismos, plantillas y páginas.
Átomos son los elementos mínimos presentes en una página. En ningún ejemplo citado por ele em su blog, piense en los diversos elementos que componen un campo de búsqueda: el campo texto, el botón “buscar”, o la etiqueta que aparece próxima al campo dizendo aos usuários o que eles podem fazer ali.
Las moléculas están en la unión de estos elementos en un patrón de interacción que tiene sentido para la persona que está usando. No exemplo dos átomos acima, quando eles se juntam eles formam o módulo que permite que as pessoas iniciem uma busca no site.
Los organismos son los agrupamientos de estas moléculas en elementos que están al norte de la navegación y la lectura del contenido sin interfaz. No hay otro ejemplo: una búsqueda faz parte del encabezado del sitio, que se replica en todas las plantillas del sitio: seja en la página de inicio, seja en la página de un artículo, en la página de resultados de la búsqueda, en la página de Dúvidas Frecuentes, y por ahí vai. E esses nomes que eu acabei de citar são as páginas propiamente ditas. Esses dois últimos conceitos já devem ser familiares para você, diseñador.
Recomendamos encarecidamente que visites el post donde Brad explica mejor cada uno de estos elementos, en caso de que aún tengas dudas de cómo funcionan.
¿E como fica o entregável?
Partindo do pressuposto mencionado no início do post de que formalizar a entrega de wireframes, después de diseños sin photoshop y después de plantillas en HTML es un flujo de trabajo que se puede tornar redundante y que vai contra un abordaje de métodos ágeis na dirección para cual varios tiempos De diseño está caminando, la idea de Atomic Design es agilizar como dos entregas inicias (wireframes y diseños) y enfocarse a mayor parte del tiempo en la última entrega (las plantillas en HTML).
La diferencia es que usted entrega un repositorio de padrões de interacción usado por ese sitio (o aplicación, o cualquer-que-seja o producto), en formato HTML y como interacciones (que dependen apenas del front-end) ya está funcionando. Fica muito mais fácil para los desarrolladores, cuando chegada a hora de montar como páginas propiamente ditas, entonces brincarem de copiar+pegar desses elementos y de juntarem os blocos de una forma que faça sentido para el producto.
O entregável fica com essa cara aquí: http://patternlab.bradfrostweb.com/
Una especie de guía de estilo (aquele que os times de Design montam na hora de definir la identidad visual de la interfaz), más ahora dinámica.
Ou uma espécie de biblioteca de padrões de interação (aquela que os times de AI/UX montam na hora de garantizar la consistencia del producto), también dinámica.
Repare que todo o raciocínio de responsividade da página já foi pensada em cada um dos átomos, moléculas y organismos, y que cuando se reúnen en páginas y plantillas, es só uma questão de afinar a coregrafia ea sincronicidade do aspecto responsivo dela.
¿Por qué usar este método?
Tentei reúne en una lista las ventajas mencionadas por Brad y también como que eu já tive a oportunidade de vivenciar:
Esse é o jeito o qual nós já estamos pensando no design e implementação desses elementos, mas talvez não de forma consciente e não de forma tão específica. Los miembros do time de design e do time do cliente conseguem Visualizar mejor o sistema de diseño, sem necesariamente necesitar ver todos los diseños salvos en .jpg frente a los elementos. Una combinación de dos documentos (guía de estilo y biblioteca de padrões de interacción), aliada à dinamicidade desses novo jeito de entregar una interfaz é uma ótima forma de centralizar a documentação em um único repository e agilizar as etapas iniciais de wireframing e design visual. Nesse formato, o sistema passa a ter maior escalabilidade. No está escogiendo puntos de interrupción o dispositivos específicos para montar su interfaz, pero sí criando elementos que se comportan adecuadamente a todos (ou quase todos) eles.
Mas como eu chego nesse resultado?
No existe fórmula mágica. El Atomic Design y el Pattern Lab no eliminan el pensamiento del Designer de Interação, pero sí pueden eliminar la necesidad de una plataforma completa de wireframes. Tampoco eliminan la posibilidad o necesidad de Visual Designer de abrir una página en Photoshop para ver como todos esos elementos conversan jerárquicamente. Mas cuando el diseño inicial (o Key Visual, como ese diseño es chamado en algunos tiempos) se aprueba, una replicación de telas fica mucho más rápida.
Específicamente sobre una etapa de UX, el camino es utilizar muchos más bocetos y talleres que incluir os Diseñadores Visuales y Desenvolvedores. Definidas como principales interacciones, el trabajo de UX pasa a ser menos de documentar formalmente todas ellas y más de guiar el trabajo del tiempo restante, como una especie de consultor interno.
[slideshare id=22077743&doc=atomic-design-130528111733-phpapp02]
(Se le puede leer esta publicación por correo electrónico o RSS y una presentación acima não abrir, veja-a no blog)
¿Funciona igual?
Agora vem o relato de quem já utilizou esse método em dos proyectos diferentes y también conseguiu se envolver um pouco em mais dos outros lá dentro de da agencia. La razón por la que Brad Frost aún hace parte del tiempo de R/GA de cierta forma (apesar de não ser mais full-time) facilita bastante el acceso al método y permite que lo usemos antes de que se anuncie oficialmente la semana pasada.
Funciona. E tem todas las ventajas citadas anteriormente.
Existen, sim, algunos requisitos previos para que ele funcione melhor:
Um time de UX, Visual Designer y Desenvolvedor que saiba trabalhar bem em sintonia e confiem bastante um no outro. Finalmente, você não está documentando todo lo que você pensou; Você está deixando esa documentación en rabiscos no papel, pizarras, conversaciones, y no tem como “provar” que aquilo foi ou não discutido. Se existe este tipo de necesidad en su tiempo, talvez não seja o momento de aplicar ese proceso. Un cierto nivel de experiencia de las partes involucradas y conocimiento de cómo funciona la tecnología. Não acho recomendado para diseñadores que todavía tienen dudas sobre como HTML responsivo é implementar, o que não tenham nenhuma noção de código. Un desarrollador que tiene buen sentido na hora de tomar decisiones de diseño sozinho. Claro que los diseñadores están acessíveis na maior parte do tempo para consultoria, mas um desenvolvedor que tenha noções de design consegue agilizar ainda mais o trabalho.Projetos de médio e grande porte. No tiene sentido crear diseños de Pattern Lab para un sitio que solo contengan plantillas.
Abajo el vídeo donde Brad presenta Atomic Design en una conferencia en Düsseldorf, en Alemania.
Dúvidas, sugerencias, críticas — podem usar o espacio aí embaixo dos comentários. Si utilizas un método o algo similar, también podrás hacerlo para contar una experiencia. Vou fazer mais alguns posts a respeito, à medida em que puedo compartir más material con vocês.