{"id":5802,"date":"2019-06-18T14:18:39","date_gmt":"2019-06-18T17:18:39","guid":{"rendered":"https:\/\/blog.umbler.com\/?p=5802"},"modified":"2021-10-20T14:31:09","modified_gmt":"2021-10-20T17:31:09","slug":"como-construir-experiencias-confiaveis-com-um-style-guide-de-interfaces","status":"publish","type":"post","link":"https:\/\/blog.umbler.com\/br\/como-construir-experiencias-confiaveis-com-um-style-guide-de-interfaces\/","title":{"rendered":"Como construir experi\u00eancias confi\u00e1veis com um Style Guide de interfaces"},"content":{"rendered":"\n

\u00c9 fato que uma boa experi\u00eancia do consumidor com seu produto ou servi\u00e7o oferece uma vantagem competitiva no mercado, mas o que tem a ver esta experi\u00eancia com Style Guides? Muitas empresas est\u00e3o investindo seu tempo em processos de design, e investir em sistemas de design n\u00e3o \u00e9 uma hip\u00f3tese n\u00e3o validada. Tem um retorno de cada segundo dedicado.
<\/p>\n\n\n\n

Algumas empresas acham que acelerar o design \u00e9 dobrar o time, ou desenhar r\u00e1pido solu\u00e7\u00f5es para m\u00faltiplos problemas. Mas isto n\u00e3o escala. O desenvolvimento baseado em componentes \u00e9 uma solu\u00e7\u00e3o confi\u00e1vel para que o projeto escale correspondendo a um r\u00e1pido crescimento.
<\/p>\n\n\n\n

Neste artigo vou explicar como a Umbler documenta seus padr\u00f5es de interface e compartilha suas defini\u00e7\u00f5es com especialistas de outras \u00e1reas, conectando v\u00e1rios drivers que guiam nossas tomadas de decis\u00f5es. <\/p>\n\n\n\n

N\u00e3o reinventamos a roda, mas a melhoramos continuamente.<\/strong>
<\/h2>\n\n\n\n

Quando come\u00e7amos a prototipar a plataforma da Umbler, precis\u00e1vamos de um caminho r\u00e1pido para desenvolver. O ponto de partida para o front-end foi buscar uma biblioteca de componentes de UI (user-interface) j\u00e1 existente e opensource. O framework Twitter Bootstrap <\/a>tinha a estrutura e responsividade certa para o projeto. Analisamos o core da biblioteca e a adaptamos \u00e0 nossa demanda, para ent\u00e3o come\u00e7armos a desenhar um Style Guide.
<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Old but gold! recomendo muito a leitura do post escrito por Brad Frost<\/a>, criador da metodologia Atomic Design, que faz uma analogia da interface do usu\u00e1rio em suas formas mais elementares: \u00e1tomos! Estas patterns libraries (os \u00e1tomos) podem criar qualquer estrutura mais complexa, como templates<\/a> (organismos) por exemplo.
<\/p>\n\n\n\n

Esta abordagem at\u00f4mica nos direcionou desde o come\u00e7o, mantendo a unidade e permitindo flexibilidade para diversos caso de uso. <\/p>\n\n\n\n

Estruturamos a base para atender todas aplica\u00e7\u00f5es.<\/strong><\/h2>\n\n\n\n

Visto que a Umbler t\u00eam diferentes sites, organizamos os estilos, vari\u00e1veis e scripts espec\u00edficos em pastas separadas do core do Bootstrap. Dentro de cada pasta tema tem as importa\u00e7\u00f5es das libs do framework global, de acordo com a requisi\u00e7\u00e3o do projeto. Como por exemplo a tipografia que tem diferentes escalas e espa\u00e7os entre a plataforma principal, o site e o blog.
<\/p>\n\n\n\n

A estrutura ficou assim:<\/p>\n\n\n\n

styleguide\/\nthemes\/\n\u251c\u2500\u2500 umbler-platform\/ \n\u2502   \u251c\u2500\u2500 styles\/\n\u2502   \u251c\u2500\u2500 scripts\/\n\u251c\u2500\u2500 umbler-website\/\n\u251c\u2500\u2500 umbler-blog\/<\/code><\/pre>\n\n\n\n
O GruntJS faz toda a m\u00e3o das tarefas, e o Jekyll <\/a>gera os arquivos est\u00e1ticos da documenta\u00e7\u00e3o final. Tudo versionadinho lindamente no BitBucket.<\/p>\n\n\n\n
Mas afinal, o que documentamos?<\/strong><\/h2>\n\n\n\n
Um bom designer n\u00e3o toma decis\u00f5es superficiais movidas pelo achismo. Cada decis\u00e3o \u00e9 l\u00f3gica e fundamentada por princ\u00edpios e nos porqu\u00eas. Documentar esclarece os co-pensamentos por tr\u00e1s de cada escolha definida em grupo, e agiliza o fluxo de decis\u00f5es futuras. Coloca todos na mesma p\u00e1gina, incluindo os n\u00e3o designers.?
<\/p>\n\n\n\n
Usamos o Dropbox Paper<\/a> para registrar alguns processos, conven\u00e7\u00f5es, metodologias e rituais. Ele tem uma integra\u00e7\u00e3o bem legal com o Slack atrav\u00e9s do comando \/paper<\/a>. Contudo, muitas equipes trabalham em v\u00e1rias partes do produto simultaneamente, e para evitar erros como uma linguagem visual fragmentada, criamos uma fonte compartilhada: o Style Guide que apelidamos carinhosamente de UmBootstrap. <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Como podem conferir em design.umbler.com<\/a>, conseguimos digievoluir bastante. Al\u00e9m dos itens fundamentais como tipografia, cores, componentes e grid, temos muito elementos customizados, padr\u00f5es, templates e tokens.
<\/p>\n\n\n\n
\"\"
Atauan. Visual Designer<\/b><\/figcaption><\/figure><\/div>\n\n\n\n
Uma paleta de cores bem definida al\u00e9m de tornar a comunica\u00e7\u00e3o mais eficiente, melhora a experi\u00eancia do usu\u00e1rio no produto. Facilitando tamb\u00e9m a navegabilidade, tornando o onboarding do usu\u00e1rio mais intuitivo. Criando assim composi\u00e7\u00f5es mais atraentes e funcionais.  <\/p><\/blockquote>\n\n\n\n
Criamos componentes personalizados para suprir as novas solu\u00e7\u00f5es desenhadas. Equilibrando perfeitamente funcionalidade com um visual bonitasso! D\u00e1 uma olhada nos flips<\/a> que maneiro. Ali\u00e1s, mantemos o mindset \u201cDon’t repeat yourself\u201d, que visa evitar ambiguidades e repeti\u00e7\u00e3o de c\u00f3digo nas aplica\u00e7\u00f5es.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Consist\u00eancia! Ganhamos mais agilidade e qualidade.<\/strong><\/h2>\n\n\n\n
Consist\u00eancia no \u00e2mbito do design n\u00e3o significa \u201cimutabilidade\u201d, e sim construir uma experi\u00eancia s\u00f3lida. Consist\u00eancia estabelece um relacionamento de confian\u00e7a entre o produto e o cliente. Na Umbler acreditamos que um profundo entendimento dos problemas dos usu\u00e1rios, orientam a dire\u00e7\u00e3o que a experi\u00eancia deve ter. 
<\/p>\n\n\n\n
Nossos componentes e padr\u00f5es servem como blocos de constru\u00e7\u00e3o do front-end nos aplicativos. S\u00e3o muitos os benef\u00edcios para o desenvolvimento do produto, que ganha um c\u00f3digo reutiliz\u00e1vel, um processo escal\u00e1vel, e ainda reduz muitos d\u00e9bitos t\u00e9cnicos. Elementos padronizados usados \u200b\u200bde forma coesa, harm\u00f4nica e repetitiva criam uma aplica\u00e7\u00e3o mais previs\u00edvel e de f\u00e1cil aprendizado. <\/p>\n\n\n\n
O Style Guide cria uma vis\u00e3o hol\u00edstica do design dentro do sistema.<\/p><\/blockquote>\n\n\n\n
Entretanto ele n\u00e3o \u00e9 um limitador de criatividade, pois \u00e9 uma documenta\u00e7\u00e3o org\u00e2nica em constante evolu\u00e7\u00e3o. Novas solu\u00e7\u00f5es podem ser criadas e inseridas no sistema com autonomia e responsabilidade. Hoje a equipe foca em problemas maiores, e analisa de uma forma mais compartilhada a UX. N\u00e3o temos medo de criar e lan\u00e7ar algo errado, ou que a funcionalidade n\u00e3o teve o melhor desempenho, mas sempre buscamos uma forma de impedir que isto ocorra novamente.
<\/p>\n\n\n\n
Todos conhecedores do produto e business s\u00e3o potenciais UX designers e contribuidores para o sistema. \u00c9 preciso ter o equil\u00edbrio perfeito de mentalidades criativas estrat\u00e9gicas de longo prazo, e das mais ousadas que suprem as necessidades de curto prazo. Incentivamos a contribui\u00e7\u00e3o interna com canais abertos dentro do Slack, que tornam as cr\u00edticas, insights e feedbacks de design mais produtivos. <\/p>\n\n\n\n
Usamos o Adobe XD<\/strong> para prototipar algumas solu\u00e7\u00f5es de interface. Temos todos os componentes e estilos replicados como s\u00edmbolos dentro da ferramenta da Adobe como s\u00edmbolos, para facilitar o processo criativo.  <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"
Adriano. Product Designer<\/b><\/figcaption><\/figure><\/div>\n\n\n\n
Um UI Style Guide \u00e9 vital para o controle do estilo, unifica\u00e7\u00e3o visual dos elementos, manuten\u00e7\u00e3o e reutiliza\u00e7\u00e3o de c\u00f3digo, que aumenta muito a velocidade do desenvolvimento. \u00c9 praticamente imposs\u00edvel manter o padr\u00e3o visual de uma marca sem um guia de estilo. Todos os nossos produtos s\u00e3o conectados a ele, o que nos fornece esta centraliza\u00e7\u00e3o dos componentes de design, mantendo toda a equipe extremamente alinhada com a linguagem visual da Umbler.  <\/p><\/blockquote>\n\n\n\n
Estas foram nossas dificuldades e progressos enfrentados at\u00e9 aqui.<\/strong><\/h2>\n\n\n\n
Esta jornada tem o objetivo de escalar o design da Umbler, tornando o onboarding de novos membros muito mais r\u00e1pido, o hand-off para os desenvolvedores mais f\u00e1cil, e a experi\u00eancia coesa e acess\u00edvel a todos. Devemos focar cada vez mais nisso, e naturalmente alimentar um futuro Design System<\/strong>, contendo outros escopos como: marketing, conte\u00fado, motion e ilustra\u00e7\u00f5es. Guiados por princ\u00edpios mais abrangentes alinhados com a vis\u00e3o da marca. 
<\/p>\n\n\n\n
Hoje temos mais maturidade nos processos. Por\u00e9m, o nosso Style Guide design.umbler.com<\/a> n\u00e3o \u00e9 o nosso Design System! E logo teremos novidades (spoilers ?), pois precisamos conquistar mais e mais pessoas para contribuir com o sistema de design do Coala.<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
\u00c9 fato que uma boa experi\u00eancia do consumidor com seu produto ou servi\u00e7o oferece uma vantagem competitiva no mercado, mas o que tem a ver esta experi\u00eancia com Style Guides? Muitas empresas est\u00e3o investindo seu tempo em processos de design, e investir em sistemas de design n\u00e3o \u00e9 uma hip\u00f3tese n\u00e3o validada. Tem um retorno […]<\/p>\n","protected":false},"author":6,"featured_media":5815,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23,7],"tags":[],"class_list":["post-5802","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev","category-inside"],"_links":{"self":[{"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/posts\/5802"}],"collection":[{"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/comments?post=5802"}],"version-history":[{"count":0,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/posts\/5802\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/media\/5815"}],"wp:attachment":[{"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/media?parent=5802"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/categories?post=5802"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/tags?post=5802"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}