Manual de criação de assets
Product Design
Construção do layout
Aplique o componente Thumbnail como slot de imagem no layout.
Caso necessite de um novo tamanho, requisite (inserir aqui link das regras de requisição) um update para o componente Thumbnail
Em casos de o slot de imagem ser um outro componente além do Thumbnail, como os componentes de cards por exemplo, mantenha a definição de que o componente deve utilizar das proporções escolhidas;
16:9
4:3
1:1
3:4
9:16
Verifique no drive do Visual Design (Asus Webstorage) se há algum asset que você possa reutilizar no seu projeto.
Casos precise, peça ajuda ao Visual para identificar quais possibilidades temos.
Definindo o asset
Em caso de não haver assets prontos que encaixam ao projeto, crie uma demanda para o Visual Design;
A demanda deverá ser passada por uma issue no repositório do Visual Design no GitHub;
O nome da issue deve ser ”Assets - <Nome da issue no Design de Produto>”
Especifique se a demanda tem uma data de entrega e qual o nível de prioridade;
Especifique quais proporções serão necessárias para produzir;
Se o projeto conter uma Issue de Roadmap, após o processo final de Handoff, especifique nessa issue que a demanda foi feita e coloque o link da Issue do Visual.
Defina/planeje no mínimo o que o asset deve conter.
Crie um briefing explicando o que você está planejando para aquele projeto/layout e especifique o que você espera conter no asset;
No mínimo forneça uma breve descrição do contexto em que a imagem será aplicada.
Aplicando o asset
Aplique no slot de imagem o asset no formato png, independente se é Imagem ou Ilustração;
Utilize sempre a proporção do asset sendo a mesma do componente.
Para aplicar a imagem no componente, copie a imagem de onde estiver, selecione a layer “Image slot” e cole com Ctrl + V;
Caso a imagem já esteja no Figma, selecione a layer de imagem na área de “Fill” do Figma, copie e cole na layer “Image slot” do componente.
Aplique o componente toolkit Name, com o nome do assets e link, para indicar ao Dev onde ele pode achar esse asset.
Visual Design
Recebendo a demanda
Repasse a demanda do GitHub para o Team Group do Asana;
Detalhe o máximo possível pelo o que foi passado (briefing, proporções, data de entrega, prioridade, link para issue).
Produção do asset
Utilize keylines como guia para a construção do asset;
Utilize as dimensões definidas para cada proporção ao produzir o asset requisitado;
Proporções de produção
ProportionImageIllustration16:9
2.072 x 1.166 px
320 x 180 px
4:3
2.072 x 1.554 px
320 x 240 px
1:1
2.072 x 2.072 px
320 x 320 px
3:4
1.280 x 1.706 px
320 x 426 px
9:16
1.280 x 2.276 px
320 x 568 px
Mantenha o designer, que solicitou o asset, atualizado;
Utilize a estrutura definida para a nomenclatura dos assets;
<type_img/ill><description><proportion><export dsk/mob><test A/B>
Sempre utilize a nomenclatura em inglês!
<type_img/ill> Se o asset é de uma imagem ou ilustração;
<description> Descrever o que contém na imagem da forma mais agnóstica o possível;
Não utilize o título do layout para nomear o asset;
Dentro das categorias, representadas pelo <>, utilize camelCase.
<proportion> Qual proporção é aquela imagem (Utilize hífen em vez de dois pontos);
<export dsk/mob> Qual versão de export é aquela imagem;
Somente para casos de Imagem
<test A/B> Somente para casos de teste A/B que será especificado pela demanda;
Ps.: Caso o teste A/B tenha sido concluído, exclua a outra opção de teste e renomeie o asset tirando o <test A/B>.
Utilize as dimensões definidas para exportar os assets;
image - Proporções de export
16:9
2.072 x 1.166 px
1.280 x 720 px
4:3
2.072 x 1.554 px
1.280 x 960 px
1:1
2.072 x 2.072 px
1.280 x 1.280 px
3:4
1.016 x 1.354 px
1.280 x 1.706 px
9:16
1.016 x 1.806 px
1.280 x 2.276 px
illustration - Proporções de export
16:9
320 x 180 px
320 x 180 px
4:3
320 x 240 px
320 x 240 px
1:1
320 x 320 px
320 x 320 px
3:4
320 x 426 px
320 x 426 px
9:16
320 x 568 px
320 x 568 px
Utilize a estrutura definida para a documentação dos assets;
Pasta nível 1 <image/illustration>;
Pasta nível 2 <Tema Brand/Language>;
Pasta nível 3 <Proportion>;
A pasta <Proportion> será a pasta final que deverá conter os assets exportados, filtrados pelas pastas, e com as nomenclaturas corretas.
Para gerar o link de compartilhamento:
Selecione o asset no Asus Webstorage;
Clique no ícone de "Partilhar” no canto superior direito (Formato de corrente);
Em "Definição de ligação” selecione a opção "Partilha pública";
Garanta que o link está com a opção de "Visualizar e baixar” selecionado;
Copie o link pelo botão "Copiar”;
Finalize a demanda colocando os links na demanda do GitHub, fechando a issue.
Na Issue, descreva os nomes de todos assets;
Marque o designer que fez o requerimento;
Histórico de Atualizações
N/A
11/11/1111
N/A
N/A
N/A
Atualizado