Design é tudo sobre detalhes

Como Zeplin domina os detalhes durante a entrega

uxplanet.org Blocked Desbloquear Seguir Seguindo 8 de janeiro

“Os detalhes não são os detalhes. Eles fazem o design. ”Charles Eames

Quando se trata de design de produto, os detalhes desempenham um papel fundamental no sucesso do produto. As equipes de produtos passam incontáveis horas polindo detalhes e aperfeiçoando seu design. Mas os detalhes pagam um papel vital não apenas nos produtos que criamos, mas também nas ferramentas que usamos para desenvolver produtos. Nós raramente pensamos sobre como uma ferramenta em particular nos faz sentir .

Vamos usar os produtos que usamos para preparar ativos de design para desenvolvedores como exemplo. Muitos aplicativos tendem a ser secos e não têm personalidade. Mas a ferramenta que analisaremos neste artigo é completamente diferente. De alguma forma, conseguiu tornar agradável o processo monótono de coordenar feedback. Neste artigo, veremos o que faz a Zeplin se destacar de outras ferramentas para a entrega de projetos e como exatamente isso ajuda a equipe a aproveitar ao máximo essa atividade.

Conheça o Zeplin

Zeplin é uma plataforma de colaboração. A ferramenta ajuda a criar uma ponte entre designers e desenvolvedores, criando um espaço compartilhado no qual as duas equipes possam trabalhar de maneira eficaz.

Uma equipe exporta o design para o Zeplin, a ferramenta analisa o design e o apresenta de forma a permitir que os membros da equipe vejam todos os recursos necessários, como imagens, ícones, tipos de letra, dimensões de camadas etc.

Primeira impressão

Quando você chega na homepage do Zeplin, uma das primeiras coisas que você percebe é a frase " É tudo sobre os detalhes " emparelhado com um grande botão azul de chamada para ação. A equipe de Zeplin não usa essa sentença para parecer legal; Na verdade, segue essa abordagem no produto que cria. Quando você passa o mouse sobre o botão, você notará que os atributos do botão se tornam visíveis. Ele comunica o que o produto faz em uma ação simples e define as expectativas iniciais do que a interação com um produto será.

Outro aspecto que você definitivamente notará é o quão fofa é a interface Zeplin. Desde o primeiro olhar, o handoff de design é um negócio sério que não tem lugar para elementos informais. É isso mesmo, o handoff de design é uma parte significativa do processo de design, mas não significa que deva ser chato. A entrega do design deve ser uma experiência divertida e envolvente. Divertir-se ao criar algo é extremamente importante porque o humor positivo leva a um resultado positivo.

Muitas coisas na interface de Zeplin podem desencadear emoções positivas. Cores, ilustrações, cópia de texto – todos trabalham juntos para criar uma atmosfera verdadeiramente única.

Mesmo as pequenas coisas, como uma ilustração em uma página de redefinição de senha, farão você sorrir.

E esses pequenos detalhes desempenham um papel crucial na criação do clima certo para colaboração. A Zeplin ajuda a criar um ambiente onde você pode entrar em contato com seus sentimentos. A interface cria emoções quentes e confusas para que você não resista à tentação de sorrir.

7 Zeplin Small Design Detalhes

1. Pedido de exportação consistente do Sketch

É uma situação bastante comum para muitas ferramentas de design quando as pranchetas do Sketch são exportadas para a ferramenta fora de ordem, com base no tamanho delas ou em quantas imagens elas continham. Mas esse não é o caso de Zeplin.

Os designers podem escolher a ordem na qual as pranchetas são exportadas para a Zeplin. Você pode escolher com qual opção de classificação você quer ir:

  • Lista de camadas: As pranchetas serão exportadas com base em sua ordem na lista de camadas no Sketch, no painel esquerdo
  • Posição: as pranchetas serão exportadas com base em sua posição

2. Projetos, tags e seções ajudarão você a organizar seus trabalhos

As equipes de projeto produzem muitos artefatos diariamente. Sem organização adequada, é relativamente fácil perder um ativo essencial em uma pilha de pastas. Zeplin sabe disso e tenta ajudá-lo nessa atividade, oferecendo um conjunto de ferramentas que simplificam o processo:

  • Projetos
  • Marcação Use tags para filtrar suas telas.
  • Seções. As seções atuam como divisores visuais.

É possível usar seções junto com tags. Você pode usar Seções para agrupar telas por recursos e usar tags para distinguir elementos comuns que você usa como Pop-ups, Diálogos, etc. Você também pode usar tags para comunicar o status das telas ou atribuir telas a determinados usuários.

As seções fornecem melhor separação visual e funcionam de forma brilhante com tags.

3. Transferir propriedade do projeto

O design é um esporte de equipe. É por isso que uma das primeiras coisas que você precisa fazer ao iniciar um novo projeto é compartilhar todas as informações necessárias com os membros da equipe.

A Zeplin convida você a adicionar membros da equipe ao seu projeto dizendo “ Vamos lá, é um aplicativo de colaboração, convide os membros da sua equipe! "

Assim que você adicionar seu colega ao projeto, ele receberá uma notificação por e-mail com um link direto para o projeto.

Uma possibilidade de gerenciar a propriedade do projeto é um dos recursos pequenos, mas muito úteis, que a Zeplin oferece – você pode transferir a propriedade para qualquer membro de sua equipe.

Você pode alternar para outro projeto, mas ainda acompanhar o processo de design e deixar comentários.

Quando você não está envolvido no processo de design, mas ainda quer animar seus colegas.

4. Integre com o Slack e o Trello

Lembre-se do momento em que você teve que enviar um e-mail manualmente para cada pessoa da sua equipe para informá-los de que o design foi atualizado? Para não mencionar anexar manualmente o design ao e-mail ou adicioná-lo ao Dropbox / Google Drive? Graças a Zeplin, Slack e Trello, esses dias já se foram. Com a integração Slack e Trello, os membros da equipe são notificados automaticamente do seu trabalho. Não é mais necessário receber e-mails de desenvolvedores perguntando onde estão os recursos x, y, z. Isso economiza muito tempo.

A integração com folga permite que o aplicativo publique notificações automáticas no seu canal Sack. Cada vez que alguém da sua equipe atualiza um projeto, a Zeplin envia uma mensagem em um canal do Slack com um link para o projeto. Todos em sua equipe saberão que o design está atualizado.

Uma coisa legal sobre a integração com o Zeplin e o Trello é a possibilidade de abrir a tela anexada diretamente do cartão Trello. Este é um desses detalhes que podem economizar muito tempo com a navegação.

Quando você clica na imagem – você vai diretamente para a tela.

5. Use extensões construídas pela comunidade

A comunidade de design é uma das coisas que torna a Zeplin diferente de muitas outras ferramentas disponíveis no mercado. O Zeplin é usado por mais de 1,5 milhão de pessoas de todo o mundo. Muitas pessoas que usam o Zeplin se preocupam com essa ferramenta e quando enfrentam um problema e não encontram uma solução simples, elas o criam. Foi assim que Zeplin conseguiu uma coleção de extensões.

Extensões são módulos que permitem ampliar as capacidades do Zeplin. As extensões são de código aberto, para que você possa escolher aquela que se adapta ao seu fluxo de trabalho ou criar a sua própria. Por exemplo, é possível gerar snippets de código CSS ou React Native por meio de extensões.

6. Use Fluxos para clicar nas telas

O que torna as ferramentas modernas de prototipagem excelentes é que elas facilitam muito a experiência com design. Qualquer pessoa que interaja com um protótipo pode clicar no design para entender como ele funciona.

Tradicionalmente, a especificação do produto era um documento estático. Mas Zeplin decidiu mudar isso e lançou um recurso chamado Flows. Quando você exporta suas pranchetas do Sketch com links para o Zeplin, esses links também podem ser clicados no Zeplin, sem nenhuma configuração adicional. Selecionar uma camada abaixo de um ponto de acesso informará o usuário sobre isso.

O que é ainda mais importante é que você pode manter pressionada a tecla Shift e todos os pontos de acesso serão revelados para que você possa clicar neles para navegar entre as telas.

Links de fluxo podem ser revelados pressionando a tecla Shift

7. Acompanhar versões

O desenho a seguir resume perfeitamente o sentimento que seus colegas têm quando não têm informações sobre as últimas atualizações no design.

Cada segundo artigo sobre colaboração de desenvolvimento de design enfatiza a importância de manter designers e desenvolvedores na mesma página em relação a qualquer mudança no design. Mas, infelizmente, as situações que você vê acima acontecem com muita frequência.

O Zeplin impede que sua equipe tenha tais situações. Ele controla as alterações para todas as telas individuais apresentadas em um projeto. O painel “Versões” contém todas as versões das pranchetas exportadas para o Zeplin; Você pode ver o histórico de cada tela clicando no botão de ampulheta no canto inferior esquerdo.

Conclusão

Zeplin se concentra nos pontos problemáticos que designers e desenvolvedores experimentam quando trabalham juntos. Ele atende a dois tipos muito diferentes de usuários com funcionalidades diferentes, mas equilibra essas necessidades de maneira excelente e ajuda as equipes a interagir rapidamente. E o que é especialmente bom é que torna um processo de colaboração divertido e agradável.