Design Review: a cerimônia que otimiza o trabalho de designers ágeis

Descubra como designers do Bridge compartilham conhecimentos trabalhando dentro de equipes ágeis

Conteúdo produzido por Aline Effting Guedes, André Luiz Gomes, Bruna Sudoski, Júlia Pedrosa, Marina Soares e Ysadora Plegge

A metodologia ágil possui diversas vantagens tanto para os designers quanto para os outros membros das equipes de desenvolvimento! Além de poder trabalhar em contato com diversos profissionais com diferentes conhecimentos, é possível comparar o próprio trabalho com o de outras equipes da mesma organização e melhorar os resultados.

Para isso, aqui no Bridge temos a cerimônia de Design Review, uma reunião semanal para encontro entre nós, designers do Bridge em equipes ágeis.

Quer descobrir mais sobre o que fazem os designers e como as reuniões auxiliam na nossa rotina de trabalho? Então continua com a gente.

• Como trabalham os designers no Bridge?
• As diferenças da metodologia ágil
• Cerimônia de Design Review

Como trabalham os designers no Bridge?

O dia a dia dos designers UX/UI no Bridge é dinâmico e cercado de atividades multidisciplinares. Atuamos no desenvolvimento e na evolução contínua dos nossos produtos, participando ativamente da concepção e execução por meio de práticas como:

• Pesquisa com usuários;
• Análise e levantamento de requisitos;
• Prototipação e testes de interface;
• Acompanhamento do desenvolvimento do produto.

Isso é possível porque utilizamos metodologias ágeis! Nossa rotina de trabalho se dá com profissionais de desenvolvimento e análise acompanhando todo o processo, incluindo ideação, entrega e manutenção.

As diferenças da metodologia ágil

Diferentemente de outros tipos de metodologias, aqui no Bridge os designers não trabalham em uma mesma equipe! Na verdade, cada time é composto por profissionais com diferentes formações e responsabilidades.

Por exemplo, o time X, que é responsável pelo desenvolvimento do produto Y, é composto por desenvolvedores web, um designer, analistas de QA e por aí vai. Nesse modelo, cada designer está inserido em uma ou duas equipes distintas, sem trabalhar diretamente com outros designers. 

Por conta dessa distância organizacional, cada designer tem uma posição de responsabilidade dentro das equipes. Por isso entendemos a importância de um momento de revisão do que está sendo feito por todos os designers do Laboratório.

Sabe quando você olha tanto para um problema que não consegue ter novas ideias e encontrar soluções? Foi para resolver situações assim que surgiu a cerimônia de Design Review, nosso momento dedicado à troca de conhecimentos e experiências entre designers!

Com inspiração nas cerimônias características das metodologias ágeis, como dailys e sprints, sentimos a necessidade de um momento dedicado ao design, onde aconteceria a avaliação das interfaces e produtos pela perspectiva e conhecimento dos profissionais da área.Assim, garantimos o bom funcionamento dos produtos, consistência visual e o padrão de qualidade Bridge. 

Cerimônia de Design Review

Nessa reunião, que tem duração aproximada de uma hora e meia, cada profissional traz suas dúvidas que surgiram durante a semana e atualizações de suas tarefas e outros assuntos relacionados ao Design. Essas podem ser das mais diversas! 

• Como aplicar e adaptar os elementos das interfaces, como cores, fontes, espaçamentos, botões, etc.;
• Auxílio para selecionar qual a melhor solução para um problema entre as alternativas;
• Como adaptar as soluções conforme mudanças nos requisitos ou outros impedimentos técnicos;
• Troca de experiências sobre entrevistas com usuários;
• Compartilhamento de dinâmicas e ferramentas utilizadas com as equipes ágeis.

Contamos com o conhecimento dos colegas para nos ajudar a esclarecer dúvidas, ter novas ideias e soluções para aqueles problemas. A sabedoria da equipe é bastante variada, contemplando a parte mobile, web, pesquisa, design systems, entre outros. 

Tudo isso nos permite ter uma visão mais completa dos problemas e chegar a decisões mais certeiras. A opinião de todos é importante e a troca de conhecimento é fundamental, especialmente para quem chegou recentemente no Laboratório. Por ainda estarem na curva de aprendizado, a Design Review permite aos novos bridgers  uma orientação direta com outros profissionais com mais experiência.

Além de ser um espaço para atualizações do laboratório e dos projetos, a reunião é o momento perfeito para compartilhar experiências como conteúdos de cursos, projetos desenvolvidos em sala de aula, tutoriais ou novas práticas, descobertas técnicas e teóricas. 

Tudo isso, em conjunto com os outros pontos já mencionados, promove momentos de reflexão para o desenvolvimento de nossos produtos e também uma constante evolução profissional dos nossos designers!

Mais do que isso, também é um lugar para o fortalecimento de laços.  Parte de se tornar um bom profissional é se relacionar bem com as outras pessoas e ter uma boa comunicação. A reunião cria esse ambiente de aproximação e motivação, onde os designers se incentivam a realizar novas atividades, aprender outras habilidades e sair um pouco da zona de conforto.

A Design Review é super útil para a evolução dos nossos times! E você, já sabia como podem se organizar os profissionais de diferentes equipes em uma metodologia ágil?

Dá uma olhada nos nossos outros artigos sobre Design e metodologia ágil aqui no Portal Bridge. 

• Confira “A Transformação Bridge de Cascata para Ágil“
• Leia “B_thinking: o modelo de processo de UX do Bridge, agora para todos!“

O Laboratório Bridge atua no Centro Tecnológico da Universidade Federal de Santa Catarina (CTC/UFSC), com equipes formadas por bolsistas graduandos, pós-graduandos e profissionais contratados. É orientado por professores do CTC e do Centro de Ciências da Saúde (CCS/UFSC).

Desde 2013, desenvolvemos sistemas e aplicativos para gerenciamento da saúde pública em parceria com o Ministério da Saúde e a Agência Nacional de Vigilância Sanitária (ANVISA).

O post Design Review: a cerimônia que otimiza o trabalho de designers ágeis apareceu primeiro em Laboratório Bridge.

Como desenvolvemos a nova paleta de cores do Bridge?

Entenda os principais conceitos que nos levaram à decisão das novas cores

Conteúdo produzido por Isabela Mosquini e Marina Soares.

Desde que o Bridge é Bridge, o azul nos representa! Mas você já reparou que temos cores complementares que ajudam a construir nossas postagens, peças gráficas e materiais?

Além da paleta primária composta pelo azul, preto e branco, temos a nossa paleta secundária. Porém, a que era utilizada já não representava mais os nossos valores. Por isso, decidimos passar por um processo de transformação na nossa identidade visual.

No case de hoje, conheça a nossa nova paleta de cores e entenda como foi desenvolvida. A Isabela Mosquini ajuda a explicar tim-tim por tim-tim sobre cada estudo e método utilizado para a tomada de decisão. Dá uma olhada no que você confere no artigo de hoje:

• A paleta de cores principal – e quais os significados por trás dela
• Por que decidimos mudar a paleta de cores secundária?
• Quais estudos e referências usamos nessa construção
• Quais emoções as cores transmitem e como relacionar aos valores da organização?
• Como consideramos a acessibilidade das cores
• A nova paleta de cores do Bridge!

A paleta de cores principal – e quais os significados por trás dela

Todas as cores possuem o poder de transmitir valores e causar sensações e sentimentos nas pessoas que as observam. Como dissemos no nosso artigo sobre 3 passos para sua marca ter uma identidade visual forte, as cores auxiliam na identificação e reconhecimento das marcas, pois geram uma memória visual no público.

Ou seja, quando você vê a combinação do vermelho e do amarelo, provavelmente pensará em cadeias de fast-food: McDonald’s e Burger King são exemplos.

Mas, além da parte prática, as cores também se comunicam diretamente com o psicológico das pessoas. Por isso é tão importante dar atenção à decisão delas.

Aqui no Bridge, a nossa paleta de cores principais nos ajuda a construir peças de design de forma simplificada. O azul, nossa cor mais predominante, foi escolhido por representar a educação, jovialidade, confiança e criatividade. Por sermos um Laboratório da Universidade Federal de Santa Catarina, esses valores são essenciais para representar a nossa cultura!

Dá uma olhada na antiga paleta:

Ilustração: Isabela Mosquini

Embora nossa paleta principal continuasse transmitindo os valores que nos guiam, as cores de apoio já não faziam mais sentido – tanto para a construção visual quanto para o significado que transmitiam. No dia a dia, notamos que o amarelo já não nos representava como organização, além da dificuldade em construir peças harmônicas. Essa foi a principal motivação para a mudança!

Por isso, decidimos mudar somente as cores de apoio! Nossa paleta principal continuará a mesma. 

Mas, peraí! Por que o amarelo não nos representa? 

O amarelo é uma cor de grande destaque e, juntamente ao nosso azul bridger, pode causar um desconforto aos olhos por ser uma combinação muito vibrante. Outro ponto é que o amarelo não costuma ser associado a nenhum dos pilares do Bridge, possuindo maior relação com áreas da alimentação. E, por fim, apesar do amarelo poder representar luz e otimismo, ele também pode passar uma sensação contraditória, de atenção, perigo e até mesmo instabilidade.

Por que decidimos mudar a paleta de cores secundária?

Na prática, acabamos usando somente as seguintes quatro cores nos nossos designs, o que limita nossas possibilidades de criação. Apesar de funcionarem bem juntas, podem tornar as peças maçantes.

Ilustração: Isabela Mosquini

Então a decisão não foi somente por conta do amarelo, mas sim da falta de outras alternativas que fizessem maior sentido! 

Com o tempo, notamos que ainda faltavam algumas áreas a serem representadas na nossa paleta além da educação. A designer Isabela pensou sobre os principais pilares do Bridge, que são educação, tecnologia e saúde, e chegou a conclusão de que precisávamos agregar todos na paleta.

Quais estudos e referências usamos nessa construção

Para desenvolver a paleta, pensamos nos estudos sobre o significado das cores, principalmente no livro “A Psicologia das Cores”, da autora Eva Heller. Esse é um livro famoso entre os designers e que trata individualmente sobre cada cor, buscando entender o que cada uma delas significa para diversas culturas, o que desperta no nosso organismo, nossas tomadas de decisão, sentimentos e muito mais. No livro, a autora se baseia em diversas áreas do conhecimento para gerar um conteúdo aprofundado.

Fonte: Cutedrop

Outros livros serviram de base para o estudo, como “Psicodinâmica das Cores em Comunicação”, do Modesto Farina, e “A Interação da Cor”, de Josef Albert. Também foram utilizados como referência alguns sites como o Coolors, Adobe Color e até mesmo páginas do Instagram como a @awsmcolors, que comentamos no artigo sobre identidade visual.

E, por uma perspectiva do Marketing, em que as cores são analisadas com base em dados, margens de venda, pesquisa de opinião e outras métricas menos subjetivas, também estudamos alguns guias! No geral, pelo marketing nenhuma cor remete a algo negativo, mas possuem diferentes impactos.

No Color Emotion Guide, um guia que analisa as cores utilizadas nas grandes corporações, podemos observar que cada cor representa uma emoção positiva e, seja em produtos ou propagandas, grandes marcas as utilizam com finalidades diferentes.

Quais emoções queremos transmitir e quais cores ajudam nessa missão?

Antes da decisão da paleta de cores, é super importante entender quais valores desejamos passar com ela. Nós já sabíamos dos nossos valores pelas nossas frases culturais. No processo de entendimento dos nossos valores, a Isabela fez uma relação de cada frase com uma cor, ou seja, quais cores poderiam entrar na paleta. Olha só!

Ilustração: Isabela Mosquini

O roxo foi escolhido pois representa a união dos opostos, a cor dos originais e inconformistas! Na Antiguidade, era a cor dos que governavam, a cor do poder. O roxo é a mais singular das cores, está relacionada à vaidade, sensualidade e espiritualidade, a cor de tornar possível o impossível. 

Já o amarelo é a cor do otimismo. Ele é a cor da iluminação, do entendimento.

O azul, nosso queridinho, é a cor que foi mais vezes citada como a cor da simpatia, da harmonia, da amizade e da confiança. Mas também representa a inteligência, a ciência e a concentração.

Por outro lado, o laranja é a cor da versatilidade. Cor da diversão, da sociabilidade e do lúdico. O laranja possui um significado único que outras cores não conseguem igualar: a transformação.

E, por último, o verde é a cor da natureza, que mais tem variações e cada uma delas pode ter significados diferentes. No geral, o verde representa a saúde, o crescimento, o frescor, a renovação. 

Veja como algumas empresas utilizam as cores para representar seus maiores nichos:

Ilustração: Isabela Mosquini

Como consideramos a acessibilidade das cores 

Para pensar na nova paleta, também consideramos a acessibilidade. Para isso, o Bold, nosso Design System, foi um ótimo guia para ajudar nas tomadas de decisões. Com ele como uma base, tivemos o cuidado na escolha de cores que geram contrastes que permitem uma boa legibilidade e leiturabilidade, e que podem ser variadas caso essa leitura seja comprometida em alguma aplicação. 

A nova paleta de cores do Bridge!

Por fim, a Isabela Mosquini contou com a ajuda do time de designers do Laboratório Bridge para decidir quais cores seriam escolhidas para a nossa nova paleta de cores secundárias!

Com algumas alternativas feitas, discussões e testes, chegamos à nossa mais nova paleta, que representa nossos valores educacionais, tecnológicos e do nosso maior foco: melhorar a gestão da saúde pública brasileira! 

Apresentamos a nova paleta de cores do Bridge!

Ilustração: Isabela Mosquini

• O azul é nosso queridinho, faz parte da paleta de cores principal
• O roxo está em tendência, principalmente na área de tecnologia, além de se relacionar com os conceitos do Bridge
• O verde, além da associação muito próxima com a saúde, é uma cor que costuma agradar a ampla maioria das pessoas

E aí, curtiu nossas escolhas?

Aproveitamos para agradecer a bridger Isabela Mosquini por toda a dedicação no desenvolvimento da paleta de cores, além da ajuda de todos os designers que ajudaram na decisão. É a nova carinha do Bridge dando as caras.

E, se você curtiu esse artigo, confira nossas outras produções:

• B_thinking: o modelo de processo de UX do Bridge, agora para todos! 
• 3 vezes em que o Bridge inovou a gestão da saúde pública brasileira 
• 5 tarefas da gestão de pessoas que você provavelmente não conhecia 

O Laboratório Bridge atua no Centro Tecnológico da Universidade Federal de Santa Catarina (CTC/UFSC), com equipes formadas por bolsistas graduandos, pós-graduandos e profissionais contratados. É orientado por professores do CTC e do Centro de Ciências da Saúde (CCS/UFSC).

Desde 2013, desenvolvemos sistemas e aplicativos para gerenciamento da saúde pública em parceria com o Ministério da Saúde e a Agência Nacional de Vigilância Sanitária (ANVISA).

O post Como desenvolvemos a nova paleta de cores do Bridge? apareceu primeiro em Laboratório Bridge.

B_thinking: o modelo de processo de UX do Bridge, agora para todos!

Veja como o b_thinking foi desenvolvido e confira os princípios, etapas, métodos e ferramentas do modelo, disponíveis no site.

Conteúdo produzido por Gabriel Norde, Lais Eing, Ianka Cristina e Thaisa Lacerda.

No Bridge, Compartilhar dá + XP! E é por isso que resolvemos espalhar o conhecimento bridger para o mundo. O b_thinking, nosso modelo de processo de UX próprio, já possui site e pode ser acessado por qualquer pessoa!

Se você se interessa por Produto, Design, UX, UI, metodologias ágeis e ferramentas de melhoria de processo, dê uma olhada no b_thinking, que temos certeza que você vai gostar. 

No artigo “B_thinking: Por que decidimos construir um modelo de processo de UX próprio?” contamos o que é o b_thinking, como ele começou a ser criado e para que serve. Além disso, exploramos diversos motivos pelos quais o nosso modelo de processo de UX foi pensado especialmente para o desenvolvimento dos produtos do laboratório Bridge. 

Um deles é manter a nossa forma de trabalho mais transparente para as equipes, novos membros e para os clientes (e por que não futuros clientes? ). 

A construção do b_thinking ocorreu em várias etapas, envolvendo bridgers de diversas equipes e com diferentes formações. A diversidade desses papéis enriqueceu a discussão sobre as práticas e rotinas do laboratório e contribuiu com a construção de diversas orientações.

Uma das nossas maiores preocupações foi estruturar um modelo de processo de UX que estivesse alinhado com a nossa cultura organizacional e com o processo de desenvolvimento das equipes. Para isso, construímos o b_thinking de forma iterativa, realizando constantes entregas de MVP, avaliando e fazendo melhorias conforme necessário. Dá uma olhada:

Missão 1: levar a dinâmica do Bridge para a planilha

#1 –  Na primeira versão foram definidas as etapas, atividades e saídas do processo. Nessa fase, o conteúdo foi apresentado em uma planilha, com o intuito de favorecer a troca de conhecimento entre os bridgers e construir uma base comum de terminologia no laboratório. 

Nessa primeira versão, nosso modelo representava o esforço de diversos times para entender as etapas envolvidas na construção de diferentes produtos. As etapas estavam estruturadas em uma planilha, incorporando a ideia de uma sequência de passos que podiam ser seguidos para atingir um objetivo final. Neste momento, não havia  uma representação visual que facilitasse a compreensão das atividades dos processos de descoberta e de entrega.

De forma complementar, compilamos os princípios que traduzem a cultura do laboratório Bridge, das metodologias ágeis e do Lean UX. Estes princípios incluem conceitos que vão desde a ideia trabalhar com equipes multifuncionais, mas pequenas, até testar as hipóteses e soluções antes de escalá-las.

Os aprendizados e experiências de diversos bridgers estavam finalmente organizados em um único local.  Entendendo que as organizações são dinâmicas e vivas, a cada ciclo novos aprendizados continuaram sendo registrados (e continuarão, pois a melhoria é contínua!). Dessa forma foi possível construir uma base comum de informações facilitando a troca de conhecimento.

Missão 2: bora orientar a galera

#2 – A segunda versão teve como objetivo fornecer mais orientações sobre o nosso processo de trabalho. Para cada etapa, nós descrevemos um objetivo, sugestões de métodos/ferramentas que podem ser utilizados para realizá-la, templates/guias e uma seção com referências, para que os bridgers pudessem rapidamente acessar conteúdos mais detalhados.

Nesta versão, o material foi organizado em formato de slides e ganhou uma representação visual do processo.

Missão 3: transparência e produtividade!

#3 – Um dos objetivos do b_thinking é atender à necessidade de tornar o processo de desenvolvimento de produtos do Bridge mais transparente e acessível para todos os stakeholders dos nossos projetos.

Além disso, no Bridge, nós valorizamos o compartilhamento de ideias, afinal Compartilhar Dá +XP! Por isso, na sua terceira versão, nós publicamos todo o conteúdo do b_thinking em um site!

Com o conteúdo público, garantimos mais transparência sobre os nossos processos com toda a comunidade de desenvolvimento de produto, disponibilizando um conteúdo que é fruto de muita pesquisa e iterações para quem quiser acessar. Se você é estudante, profissional da área ou um entusiasta de UX, não deixe de conferir o site e nos contar o que achou!

Por meio do site  também aumentamos ainda mais a transparência com os nossos clientes e outros stakeholders do projeto. Ter o nosso processo de UX e as ferramentas que utilizamos apresentadas de forma clara e acessível, facilita os alinhamentos e garante que todos os envolvidos tenham clareza sobre o porquê e como cada uma das atividades estão sendo realizadas.

Ah, vale lembrar que o b_thinking foi construído por e para os bridgers, ou seja, os métodos refletem a nossa forma de trabalho. Mas, é claro, ele pode se aplicar a outros locais e projetos, ou até mesmo servir de inspiração para a sua adaptação de modelo de processo de UX.

Portanto, não é uma metodologia fechada. Pode usar como for melhor para o seu processo, de forma flexível. O b_thinking serve para orientar, não engessar!

Lá no site do b_thinking você pode conferir informações valiosas para a implementação desse modelo de processo de UX. 

Lá, você pode conferir sobre:

Princípios: Para desenvolver produtos incríveis, não basta apenas aplicar diferentes métodos em uma ordem específica, é importante incorporar princípios do Lean UX para poder extrair o maior valor possível do processo.

Etapas: O b_thinking possui etapas, que durante o desenvolvimento do produto, nos orientam a entender o problema e a identificar as soluções que mais agregam valor para os nossos clientes e usuários.

Métodos e ferramentas: Para nos ajudar a construir os entregáveis de cada etapa, o b_thinking descreve diversos métodos e ferramentas com suas respectivas instruções de uso.

Templates e guias: E para facilitar a execução das etapas, o b_thinking tem templates e guias de algumas ferramentas. Estes materiais são adaptados para os bridgers, mas você pode utilizá-los como ponto de partida.

Ficou interessado? Então vem conferir o material completo no nosso site do b_thinking e depois nos conte o que você achou!

O Laboratório Bridge atua no Centro Tecnológico da Universidade Federal de Santa Catarina (CTC/UFSC), com equipes formadas por bolsistas graduandos, pós-graduandos e profissionais contratados. É orientado por professores do CTC e do Centro de Ciências da Saúde (CCS/UFSC).

Desde 2013, desenvolvemos sistemas e aplicativos para gerenciamento da saúde pública em parceria com o Ministério da Saúde e a Agência Nacional de Vigilância Sanitária (ANVISA).

O post B_thinking: o modelo de processo de UX do Bridge, agora para todos! apareceu primeiro em Laboratório Bridge.

3 passos para sua marca ter uma identidade visual forte

Nós vamos te provar que a identidade visual é essencial para a popularidade de uma marca! Aprenda como desenvolver e manter a sua.

Conteúdo produzido pelos designers Isabela Mosquini e Rodolpho Malvestiti.

Você já visitou o perfil de uma loja no Instagram e notou que tinha vários seguidores, se esforçava em postar frequentemente, mas passava um ar de desorganização?

Talvez você não tenha entendido o motivo dessa percepção negativa, mas vamos te explicar: pode ter a ver com a falta de identidade visual da marca.

Hoje em dia é essencial entender qual é a “cara” da sua marca, organização ou perfil que deseja que cresça. 

Por isso, hoje trouxemos os designers Isabela Mosquini e Rodolpho Malvestiti para darem dicas valiosas sobre como manter a identidade visual nas redes sociais. 

Mas… O que é identidade visual?

Falando de uma forma um pouco poética, a identidade visual é a alma da marca. Ela comunica os valores, missão, ideais e objetivos da sua marca, por meio de elementos gráficos pré-determinados.

Todos os elementos que são divulgados referentes a sua marca fazem parte da construção de uma identidade visual, desde a criação de uma logo até uma postagem nas redes sociais. Por isso, é importante que ela esteja de acordo com o que você quer transmitir. 

Uma identidade visual bem estruturada ajuda no processo de consolidação e garantia de um bom posicionamento frente ao público alvo. Além disso, ela ajuda na diferenciação de uma marca para a outra, tornando a sua marca única. 

Nas redes sociais, dar atenção aos elementos da identidade visual e garantir uma unidade/padronização entre os elementos gráficos pode fazer toda a diferença! 

Mesmo com um conceito fácil, colocar esse ideal em prática pode ser uma tarefa complicada. Se você deseja obter um resultado criativo e demonstrar dinamicidade, além de estar atualizado às tendências, é importante que as suas redes sociais estejam alinhadas a conceitos do design, já que o mesmo tem um enorme poder de comunicação.

Mas como alcançar bons resultados utilizando a identidade visual de uma marca nas redes sociais? 

3 elementos fundamentais para ter uma identidade visual forte

Para o desenvolvimento de uma identidade visual completa, que seja clara e compreensível, inumeráveis conceitos são necessários, mas calma! Você pode fazer um bom trabalho com ideias básicas e mais simples de pôr em prática.

#1 – Tenha a sua própria paleta de cores

Definir uma paleta de cores é um dos passos essenciais para ter uma identidade visual coesa e padronizada.

Quantas vezes você já olhou para alguma propaganda relacionada a alimentação que utilizava as cores vermelho e amarelo e associou ao McDonald’s? Ou, quem sabe, viu uma postagem com um fundo azul-claro e lembrou do Laboratório Bridge?

Pois é, ter uma paleta forte auxilia no reconhecimento da marca, pois gera uma memória visual no público. Se você não entende muito do assunto, uma opção é procurar paletas feitas por designers e que estejam disponíveis para uso público. Assim, você utilizará cores que tenham os contrastes necessários e mais combinem com a sua marca. Mas, atenção, fuja do óbvio! É importante que as cores demonstrem o que a sua marca tem de melhor.

#DicaDoBridger: O Instagram @awsmcolor publica paletas de cores das mais diversas, para todos os gostos e tipos. Que tal dar uma olhada e ver se de lá não sai a sua inspiração?

#2 – Escolha famílias tipográficas que representam sua marca

Outro elemento de extrema importância é a tipografia, ou seja, os tipos de letras que a sua marca vai utilizar. Assim como a paleta de cores, um bom trabalho tipográfico auxilia no reconhecimento da marca. 

Para a escolha da família tipográfica ideal é necessário considerar a legibilidade da mesma, a capacidade de distinção e a mensagem que ela transmite. 

Por exemplo, letras com serifa (esses pequenos “pés” das letras, que estão representados na imagem), demonstram ideias mais sérias e/ou tradicionais. Se você deseja criar uma identidade visual para um consultório de advogados, provavelmente essa opção pode ser interessante.

#3 – Utilize elementos gráficos que se adequem à sua marca

Eles podem variar entre imagens, ícones, colagens, emojis e diversas outras figuras. Na criação de um universo visual para uma marca é importante estabelecer elementos gráficos que dão suporte e transmitem os conceitos desejados.

Aqui no Bridge, como buscamos uma comunicação mais divertida e pessoal, gostamos de utilizar emojis e stickers para exemplificar alguns elementos textuais e dar mais leveza ao conteúdo.

Além disso, utilizamos em quase todas as peças de comunicação texturas de papel, post-its e fitas, tudo para dar um ar mais aconchegante, como se fosse um bloco de anotações de todos que contribuíram no conteúdo. 

Tudo isso reflete em um dos nossos valores:  “Compartilhar Dá + XP”. Ou seja, nossas postagens são feitas com a contribuição de diversos bridgers, buscando passar informação para todos que acompanham o Bridge, compartilhando a experiência que temos aqui dentro.

E aí, já tá pronto pra tornar a sua marca única? Se você curtiu o conteúdo, nos siga nas nossas redes sociais! Lá nós estamos sempre produzindo conteúdos com base na nossa identidade visual, vale a pena conferir e se inspirar.

Instagram | LinkedIn

O Laboratório Bridge atua no Centro Tecnológico da Universidade Federal de Santa Catarina (CTC/UFSC), com equipes formadas por bolsistas graduandos, pós-graduandos e profissionais contratados. É orientado por professores do CTC e do Centro de Ciências da Saúde (CCS/UFSC).

Desde 2013, desenvolvemos sistemas e aplicativos para gerenciamento da saúde pública em parceria com o Ministério da Saúde e a Agência Nacional de Vigilância Sanitária (ANVISA).

O post 3 passos para sua marca ter uma identidade visual forte apareceu primeiro em Laboratório Bridge.

Vamos construir uma paleta de cores acessível?

Entenda como fazer uma paleta de cores incrível (e como fizemos isso no Bold, nosso design system próprio)

Escrito por Laís Eing, designer no Laboratório Bridge.

Sabe aquela sensação de alívio, quando você sabe que tem algo errado e finalmente descobre o que é? Foi assim quando percebemos por que nossas paletas de cores precisavam mudar.

Apesar de possuirmos uma identidade visual que representa o Bridge muito bem, sentimos que faltavam algumas coisas para essa identidade ficar completa.

3 passos para sua marca ter uma identidade visual forte

No desenvolvimento do Bold, nosso design system, pesquisamos e incluímos requisitos de acessibilidade AA, nível intermediário da WCAG – Web Content Accessibility Guidelines, ou Diretrizes de Acessibilidade para o Conteúdo Web.

Foi quando sentimos a inconsistência e falta de acessibilidade de nossas cores. Então, nos aprofundamos nas pesquisas e buscamos a melhor forma de construir uma paleta de cores acessível para o nosso design system.

Hoje, o Bold possui mais de 6 mil usuários, com quase 13 mil sessões realizadas. E é a partir da construção dele que formulamos essas dicas pra você.

Não importa se você está refazendo sua paleta de cores ou criando uma do zero, esse conteúdo vai te ajudar a fazer isso com acessibilidade

#1 Tenha bases teóricas para seu desenvolvimento

Ninguém precisa nascer sabendo fazer tudo — ainda mais no design, uma área onde as mudanças e melhorias são a constante. Por isso, não tenha medo de buscar bases teóricas para o seu trabalho!

Na concepção das paletas de cores do Bold, os artigos que mais utilizamos foram esses dois:

• Re-approaching Color, por Kevyn Arnott
• Designing Systematic Colors, por Jeeyoung Jung

Com a ajuda desses conteúdos e a definição dos nossos objetivos (algo muito importante pra você ter em mente!), concordamos que as paletas de cores deveriam ser consistentes, acessíveis, e pudessem ser utilizadas de modo inverso, no famoso dark mode.

Tendo um conhecimento maior sobre o assunto, você não fica só torcendo para estar acertando na paleta: você terá informação suficiente pra saber que está arrasando!

Alguns links extras que também podem te ajudar:

• Curso Web Accessibility, fornecido pelo Google
• Inclusive components, um blog dedicado exclusivamente ao assunto

#2 Garanta o contraste ideal entre as cores

No desenvolvimento do Bold, utilizamos cores para representar status de elementos interativos, alertas, e enfatizar conteúdo visual e de texto. Ou seja, não escolhemos nossas cores só pelo valor estético. Elas também são utilizadas para informar.

E para que uma paleta de cores seja informativa para todos os usuários (portanto, acessível), ela precisa estar no contraste correto. Afinal, você não quer que as pessoas deixem de clicar nos seus itens por não conseguir enxergá-los, certo?

No Bold, cada paleta de cor foi dividida em 10 níveis para que pudéssemos ter uma gama de cores variada, que vai de pouca a muita luminosidade.

Começamos escolhendo a cor primária no nível 40, considerando um contraste maior que 4.5:1. Depois, mantendo a tonalidade (com pequenas variações, se necessário, para aprimorar o visual), criamos as cores com mais e menos luminosidade

Se você decidir manter esse padrão, os níveis de 10 à 40 alcançam um contraste mínimo de 4.5:1 em fundo branco. Já os níveis de 70 à 100 têm o mesmo contraste mínimo em background escuro.

#DicaExtra: Use o Mad Science Colors para visualizar os contrastes

Proporção de contraste com fundo branco na ferramenta Mad Science Colors

Com isso, conseguimos garantir que os nossos componentes tivessem contraste suficiente, utilizando qualquer cor primária.

Diferentes cores primárias mantém o mesmo contraste

#3 Não use a cor como único elemento de informação

Pode parecer uma contradição com o item anterior, mas não é.

Mesmo garantindo a proporção de contraste ideal das cores, as cores não podem ser sua única fonte de informação. Considere ícones, elementos textuais e ênfases visuais para informar o usuário

Todos esses elementos juntos devem passar sua informação de maneira clara e acessível. Se quiser saber mais sobre como consideramos essas interações no Bold, acesse este artigo.

#4 Tenha referências para seu trabalho

Se você sabe o que quer transmitir com suas cores e como fazer isso de forma acessível, já é meio caminho andado. Mas as vezes, o bloqueio criativo simplesmente vem, e você já nem lembra daquelas aulas de círculo cromático dos tempos longínquos da faculdade!

Pra ajudar nessas situações, disponibilizamos nove paletas de cores no Bold, que é open source (ou seja, gratuito)! Você pode acessá-los e utilizar junto aos componentes, ou em qualquer projeto pessoal.

Se preferir, você também pode usar nossa paleta de cores como base e testar alterações. É só acessar este link pra ver essas lindezas.

Temos um orgulho danado delas

[BÔNUS] Evite retrabalho no Dark Mode

Quando pensamos em incluir a versão “dark UI” em nossos projetos, queríamos simplificar a inversão e evitar a criação de novas paletas para cada cor. Se você fizer isso, padroniza suas paletas e evita um retrabalho grande.

A forma mais fácil que encontramos foi simplesmente inverter a paleta de cores. Testamos o funcionamento das paletas até chegar em um resultado satisfatório, onde podemos transformar qualquer produto que utiliza o Bold de light para dark.

Você pode ver como isso funciona na prática e se inspirar no site do Bold!

Criar uma paleta de cores acessível para um design system open source foi uma jornada desafiadora, repleta de testes e muitas, muitas mudanças. Mas o resultado compensou, e esperamos que as dicas que resultaram desse processo também tenham te ajudado.

Testou as paletas do Bold e tem dúvidas ou feedbacks? Manda pra gente! Aqui no Bridge, Compartilhar Dá + XP.

Pra sintetizar, para construir sua paleta de cores acessível:

1. Tenha bases teóricas para seu desenvolvimento
2. Garanta o contraste ideal entre as cores
3. Não use a cor como único elemento de informação
4. Tenha referências para seu trabalho
5. Evite retrabalho na versão dark mode

O Laboratório Bridge atua no Centro Tecnológico da Universidade Federal de Santa Catarina (CTC/UFSC), com equipes formadas por bolsistas graduandos, pós-graduandos e profissionais contratados. É orientado por professores do CTC e do Centro de Ciências da Saúde (CCS/UFSC).

Desde 2013, desenvolvemos sistemas e aplicativos para gerenciamento da saúde pública em parceria com o Ministério da Saúde e a Agência Nacional de Vigilância Sanitária (ANVISA).

O post Vamos construir uma paleta de cores acessível? apareceu primeiro em Laboratório Bridge.

HACKATHON: como ganhamos o prêmio com o nosso sistema

Enquanto usávamos pela primeira vez o Bold, o design system desenvolvido nele

Esta é a parte final da nossa série sobre a construção do Bold, o design system do Laboratório Bridge. Acesse o primeiro, o segundo e o terceiro conteúdo.

Conteúdo produzido por Leticia Marques, designer da Equipe Mobile!

Quando me inscrevi para participar do Hackathon que ia acontecer no Bridge, fiquei nervosa. Atuo na parte de Design Mobile do Laboratório, e por isso não acesso muito o Bold. E era uma exigência do Bridge_Hack que o projeto fosse feito com o nosso design system.

Conhecia ele pelas reuniões de equipe que realizamos semanalmente, e algumas vezes utilizei o Bold para fazer pequenos experimentos nas sextas da inovação. Mas era isso.

Como fazer em 10 horas de trabalho um projeto com um DS que não conheço profundamente?

Minha equipe do Hackathon foi formada por meus amigos & devs do mobile, que também nunca haviam acessado o Bold. Ia ser um desafio bem grande para todos nós. Mesmo assim, fomos para o Hackathon com um objetivo em mente: mostrar que era possível ganhar mesmo com (quase) nenhum conhecimento de desenvolvimento para web com o Bold.

Spoiler: ganhamos.

7 passos para construir um design system

O Hackathon

Aqui no Bridge temos uma cultura de sextas-feiras dedicadas à inovação e desenvolvimento. Podemos estudar algo para desenvolvimento pessoal ou que dê frutos para o Laboratório e nossos produtos.

Compartilhamos conhecimentos em palestras e dinâmicas sobre assuntos ligados à tecnologias e informação, fazemos gincanas, desenvolvemos projetos novos… O nosso #Sextou é o #CompartilharDaMaisXP!

A Gestão divulgou que teríamos uma sexta-feira de Hackathon para web, usando o Bold. Achei que o pessoal da equipe do Mobile ia ser resistente em participar, mas eles adoraram a ideia de competir com o pessoal que trabalha com isso todos os dias.

Fizemos uma dinâmica para escolher o nome da equipe, e o que ganhou foi _Italic. Irônico, não? _Italic e Bold_. Nesse momento já estávamos beeeeem ansiosos. Qual vai ser o tema? Vamos ter que desenvolver para os produtos ou algo completamente novo? Tem que chegar às 8h da manhã!

Um dia antes, descobrimos que 2 membros da equipe não sabiam disso e iam chegar no horário normal deles, às 14h. Imagina o desastre se isso tivesse acontecido! Mas chega a tão esperada sexta-feira, e começamos os preparativos.

E aí recebemos o tema:

“O meu_bridge foi criado para registro de horas e controle de férias. Mas imagine, e se ele pudesse ser mais do que isso? Qual funcionalidade deixaria ele top plus disparado?”

Contextualizando: Temos um sistema interno chamado meu_bridge (desenvolvido por bridgers, inclusive!) para registro de horários de trabalho e de férias. Ele facilita a nossa vida e, principalmente, a vida do pessoal que trabalha no administrativo.

Meu_bridge: a ferramenta que gerencia o fluxo de trabalho no Bridge

O nosso dever seria criar um módulo novo para o sistema que fosse útil para os colaboradores e que suprisse uma necessidade da gestão, do administrativo ou dos colaboradores em geral. A avaliação das propostas das equipes seria dada por:

• Caso quiséssemos implementar a nossa solução, não seria necessário utilizar o codebase do Meu Bridge como ponto de partida
• A proposta teria que ser apresentada em formato de pitch em 5 minutos no fim do dia
• Teríamos que entregar tudo até as 18:30h para a comissão avaliadora

Como já comentei, temos o #CompartilharDá+XP nas sextas-feiras. Hoje, ele é organizado através de planilhas que são configuradas pela Gestão. O fluxo é:

1. Comunicamos alguém na Gestão que queremos dar uma palestra
2. Informamos tema, descrição, data de preferência e duração
3. A Gestão organiza isso na planilha e joga no canal de comunicados do Slack
4. Os colaboradores se inscrevem para participar
5. Se todas as vagas forem preenchidas, existe uma lista de espera caso alguém desista

Quando recebemos o tema do desafio, pensamos nas necessidades que os Bridgers tem hoje. Fizemos uma lista no nosso quadro branco e demos prioridade de mais importante > menos importante e mais fácil de desenvolver > mais difícil de desenvolver.

Felizmente, a nossa ideia de implementar um módulo para gerir as inscrições e demandas do Compartilhar Dá Mais XP ficou em primeiro nas duas categorias. E era agora que o bicho ia pegar.

5 dicas para construir uma paleta de cores acessível

Organizando nossa estrutura

Depois que decidimos o nosso módulo, os devs começaram a organizar a estrutura do servidor e tiveram que esperar que alguma tela estivesse pronta para começarem a desenvolver.

Criamos nosso projeto _Italic no Zeplin. Estava vazio. Que pressão! O trabalho deles dependia do meu para começar. Eu precisava fazer tudo o mais rápido possível.

Montei alguns wireframes junto com o pessoal da equipe para definirmos o melhor fluxo, e comecei a prototipar. Como tinha alguns privilégios por ser da equipe do Design (perdão equipes que não tiveram designer), peguei uma tela pronta do sistema do Meu Bridge para fazer as alterações da maneira mais perfeita possível, em cima da grid.

Comecei a explorar o arquivo da biblioteca do Bold para saber qual componente usaria nas situações específicas do fluxo, e percebi que esse processo foi mais fácil do que eu pensei.

Quando eu estava ali, com a biblioteca do Bold aberta e organizando o que eu iria precisar, o nervosismo foi substituído por uma grande onda de adrenalina.

O trabalho estava fluindo tão rápido e naturalmente! Aí, eu percebi que foi exatamente para isso que o Bold foi projetado, para facilitar o nosso trabalho e tornar tudo mais rápido. Quando me dei conta, já tinha feito mais da metade das telas do fluxo.

Módulo desenvolvido 

Depois que comecei as telas estavam prontas, o nosso módulo começou a nascer. Tínhamos um tester a postos para encontrar alguns bugs e, claro, a designer para conferir se estava tudo nos trinks e de acordo com as specs.

Agora era a hora de organizar a apresentação e treinar o pitch!

No fim, os devs conseguiram implementar todas as funcionalidades que havíamos pensado Nosso módulo estava prontinho para ser apresentado e estávamos confiantes que iríamos ficar em primeiro lugar! Claro, estávamos nervosos porque as outras equipes tinham colaboradores muito bons, mas mesmo assim acreditávamos na vitória.

A nossa apresentação era a última. Enquanto acompanhamos a live das apresentações, cada equipe que mostrava a sua solução era um aperto no coração. Todas eram muito boas!

Por fim chegou a nossa apresentação. Quando terminamos, a comissão avaliadora não teve nenhuma dúvida. Aí congelamos: ou isso era muito bom e com certeza iríamos ganhar, ou ficou tão ruim que eles tinham certeza que ficaríamos em último.

Nosso fluxo ficou assim:

• A aba de inscrições (tela inicial) do módulo seria onde as inscrições de palestras estariam listadas para os colaboradores. Essas palestras já teriam passado pela curadoria da gestão e já teriam data e palestrante. Caso as vagas tivessem se esgotado, o colaborador poderia entrar na lista de espera e seria notificado por e-mail caso abrisse uma vaga.

• A aba de propostas de palestras do módulo seria o lugar onde o colaborador poderia submeter temas em que gostaria de palestrar ou temas que gostaria de ouvir sobre, onde deixaria o apresentador em aberto dizendo que quer apenas assistir. Isso ajudaria nos cenários “meu deus queria falar sobre isso mas será que alguém vai querer ouvir?” e “Nossa queria muito ouvir sobre isso mas ninguém fala! A gestão poderia chamar alguém para apresentar, né?”. Nessa aba também haveria a votação de interesse nas propostas, que futuramente virariam palestras oficializadas pelo perfil da gestão.

• O perfil da gestão (na aba de propostas de palestras) seria responsável por transformar as propostas em palestras de acordo com a quantidade de interesse nos temas. Nesse fluxo, a gestão que iria escolher a data e a duração, mantendo comunicação com o palestrante. Caso a proposta fosse transformada em palestra, o colaborador responsável receberia um e-mail o avisando.

• A aba de palestras anteriores, por fim, mostraria o histórico de palestras já realizadas, dando a oportunidade de assistir a gravação do vídeo delas.

Todos os títulos das palestras são dados curiosos e gostos peculiares dos membros da equipe. Gente estranha, né?

Resultado 

No fim das contas, o silêncio da comissão foi um bom sinal!

Depois desse Hackathon, podemos dizer com certeza que o Bold é, realmente, acessível para todos, tanto na parte de design quanto na implementação. Foram 10 horas de muito aprendizado e muito energético (e só alguns surtos com a _Italic).

Com o nosso prêmio, levamos a equipe do Mobile para comer hambúrguer na faixa. E de quebra, temos uma nova decoração na nossa sala

O Laboratório Bridge atua no Centro Tecnológico da Universidade Federal de Santa Catarina (CTC/UFSC), com equipes formadas por bolsistas graduandos, pós-graduandos e profissionais contratados. É orientado por professores do CTC e do Centro de Ciências da Saúde (CCS/UFSC).

Desde 2013, desenvolvemos sistemas e aplicativos para gerenciamento da saúde pública em parceria com o Ministério da Saúde e a Agência Nacional de Vigilância Sanitária (ANVISA).

O post HACKATHON: como ganhamos o prêmio com o nosso sistema apareceu primeiro em Laboratório Bridge.