Sketch: aprimore sua interface com dark mode

Iniciando o projeto - Apresentação

Se você já sabe utilizar o Sketch, está construindo seu portfólio ou já trabalha na área de UI Design e agora quer aprender um pouco mais sobre processos e técnicas, está no lugar certo.

Boas-vindas ao terceiro e último curso da lindíssima formação de Sketch aqui da Alura.

Meu nome é Mateus Villain, sou instrutor da escola de UX & Design.

#PraCegoVer: sou uma pessoa de pele branca. Cabelo, sobrancelhas, barba e olhos castanhos. Meu cabelo é bem curto, minha barba é bem longa, passa do queixo. Estou usando óculos de armação branca e lentes redondas. Estou usando um moletom rosa que não tem capuz. Na minha frente tem um microfone que está sendo segurado por um pedestal articulado. Atrás de mim tem uma estante com alguns livros e bonecos do Harry Potter que eu, particularmente, gosto bastante.

Nesse curso não abordaremos ferramentas básicas de seleção e de formas que o Sketch possui. Já vimos isso nos cursos anteriores da formação de Sketch

Neste curso focaremos em técnicas, processos e algumas ferramentas mais avançadas que o Sketch possui e que UI Designers aplicam no dia a dia.

• Aprenderemos a compartilhar os componentes de um arquivo para vários outros arquivos que construiremos futuramente dentro do Sketch.
• Entenderemos o que é o dark mode. Seus prós e contras, e como trabalhar com dark mode dentro do nosso projeto.
• Aprenderemos a criar gráficos utilizando as ferramentas de vetor e união de camadas. E depois, criaremos interações dinâmicas nesses gráficos.
• Concluiremos o curso falando sobre interfaces que ficam sobrepostas ao conteúdo.

Espero você no próximo vídeo para contar uma visão geral sobre o conteúdo deste curso. Valeu!

Iniciando o projeto - Visão geral

Antes de começar, vamos comentar o que veremos neste curso.

Na primeira aula, logo depois desse vídeo, iniciaremos nosso projeto e falaremos sobre a construção da biblioteca dentro do Sketch. E, depois, voltaremos naquelas referências que você já viu nos cursos anteriores, mas com uma plataforma um pouco diferente.

Na segunda aula, criaremos a interface base. Como se trata de um produto onde a mesma interface será replicada para diferentes casos, mudando poucos elementos, vamos focar em criar uma interface base com um esquema de cores variado.

Na terceira aula, trabalharemos com gráficos interativos. Como trata-se de dashboards, um lugar que os clientes acessarão para ver informações sobre as pessoas usuárias, é necessário mostrarmos alguns gráficos e vamos torná-los mais interativos para melhorar a experiência.

Na última aula, falaremos sobre alguns elementos flutuantes. Existem diversos tipos de interfaces que aparecem por cima do conteúdo que nós produzimos. É um conteúdo importante e muito usado por UI Designers.

Tudo isso será feito um uma dashboard que será trabalhada com dois esquemas de cores. É um conteúdo sensacional: construiremos a mesma interface tanto em light mode quanto em dark mode.

No próximo vídeo começaremos a falar sobre as bibliotecas e na segunda aula começaremos a produzir o arquivo com a nossa dashboard.

Iniciando o projeto - Criando uma biblioteca

Agora que vamos trabalhar em um novo arquivo totalmente diferente do arquivo que utilizamos nos cursos anteriores, uma coisa importante que temos que fazer é criar uma biblioteca (library, em inglês).

Vamos pegar o guia de estilo que fizemos com os componentes e elementos ao longo dos cursos anteriores, juntaremos todos eles naquele arquivo que já temos. Podemos, inclusive, excluir todas as outras coisas que não sejam do guia de estilos.

Vamos fazer com que esse arquivo seja compartilhável para qualquer outro projeto.

Poderemos usar os componentes do arquivo "up-style-guide-ensinando", por exemplo, em qualquer outro projeto que construirmos dentro do Sketch.

Para criar uma nova biblioteca, basta abrir o Sketch, selecionar o menu "Library" e clicar na opção "New Document".

Mas se você já estiver com o arquivo aberto Sketch, como eu estou aqui.

Neste arquivo que tenho aberto tenho os componentes e estilos bem organizados como fizemos.

Para criar a biblioteca vai lá no menu superior em "File > Add as Library".

Ao clicar em "Add as Library" vai abrir uma janela para configurações de preferências aberta na aba "Libraries".

Ele exibe aqui a biblioteca "Migrated Global Colors", que já vimos rapidamente. O Sketch mostra essas paletas de cores em todos os arquivos que criamos. Como não estamos utilizando essa biblioteca, podemos desmarcá-la.

Logo abaixo está aparecendo o arquivo "up-style-guide-ensinando" que está aberto e acabei de duplicar para te ensinar como criar a biblioteca. Esse arquivo já virá com o checkbox ativado. Vamos deixar ativado.

Ainda nessa lista de bibliotecas, seu Sketch pode exibir esse "Apple iOS UI Design Resources", afinal o Sketch é um software nativo para produtos Mac. Então ele já vai deixar alguma coisa pré-definida da Apple para você começar a trabalhar.

E é só isso que precisamos fazer. Deixaremos o checkbox de "up-style-guide-ensinando" e o de ""up-style-guide" ativados. Agora, posso fechar essa janela e fechar o Sketch.

Agora, abriremos novamente o Sketch. Vamos criar um novo arquivo. Criei uma artboard com fundo branco.

Repare que não tenho nenhum elemento ou componente neste arquivo.

Mas ao clicarmos no ícone de "Symbols", localizado na barra de ferramentas, vai aparecer as opções "up-style-guide" que cadastramos no começo do vídeo e o "up-style-guide".

Todos os meus componentes aparecerão aqui da maneira que fizemos nos cursos anteriores.

Se, por exemplo, colocarmos a forma de um quadrado no artboard e irmos na barra de propriedades em "Style" onde selecionamos os estilos, eles também vão aparecer aqui e posso selecioná-los.

Se precisar fazer alguma alteração, por exemplo, vou pegar um componente botão. Normalmente, para editar esse botão, iria para a página de symbols para editá-lo.

Mas se clicarmos em "Edit in Library" (editar na biblioteca), aqui no painel lateral de estilo. Ele vai abrir aquele arquivo "up-style-guide-ensinando" direto no componente que preciso editar.

Sempre que fizermos alguma alteração no arquivo de biblioteca vai aparecer uma notificação no ícone de sino localizado no canto superior direito da tela. Essa notificação avisa que houve uma modificação na nossa biblioteca. Vai exibir quais foram as atualizações, vai abrir uma janela que mostra o antes e depois do componente.

Posso escolher fazer essa atualização, clicando em "Update Components". Ou posso cancelar e manter como está, clicando em "Cancel".

Vou atualizar. Instantaneamente vai alterar esse botão.

Fácil e simples. Esse é o processo que você precisa fazer agora. Abre seu Sketch, cria uma biblioteca com aquele arquivo que trabalhamos nos cursos anteriores, exclui tudo que não sejam os componentes, mantém os estilos e cria sua biblioteca.

Nos vemos no próximo vídeo, onde faremos referências interativas de dashboard.

Sobre o curso Sketch: aprimore sua interface com dark mode

O curso Sketch: aprimore sua interface com dark mode possui 103 minutos de vídeos, em um total de 33 atividades. Gostou? Conheça nossos outros cursos de UI Design em UX & Design, ou leia nossos artigos de UX & Design.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Iniciando o projeto
• Criando a UI base
• Gráficos interativos
• Elementos flutuantes