Criação de um style guide para apps
A course by Christian VizcarraSenior Product Designer
A course by Christian Vizcarra, Senior Product Designer
Aprenda a documentar e criar um manual de estilo com Sketch
Um dos elementos fundamentais para o design de aplicativos é o style guide, guia de estilo visual, que serve como referência para todas as equipes que fazem parte da criação de um aplicativo, especialmente os programadores que devem implementar os designs. Neste curso você aprenderá o passo a passo para criar um style guide funcional.
Christian Vizcarra - designer de produto reconhecido por CSS Design awards, Behance e Awwwards - cria produtos digitais há mais de 9 anos e, neste curso te ensinará a documentar, comunicar e exportar todos os componentes para criar um style guide profissional.
O que você aprenderá neste curso online?
20 aulas & 8 downloads
O que faremos no curso?
38 segundos
O que é um guia de estilo?
5 minutos, 18 segundos
Diferenças entre o styleguide e o UI Kit
3 minutos, 35 segundos
Boas práticas para criar um guia de estilo
4 minutos, 50 segundos
Como criar símbolos?
16 minutos, 1 segundo
Layout
9 minutos, 24 segundos
O que está incluído neste curso?
Primeiro, você conhecerá o Christian, sua trajetória profissional, sua experiência como criador de produtos digitais e o objetivo de seu curso: a criação de um style guide para aplicativos móveis.
Em seguida você verá o que é um style guide, qual a sua funcionalidade e por que é tão importante na hora de criar uma experiência digital web ou em uma aplicação. Vocâ saberá ainda o que é um UI Kit, quais as suas características e as diferenças com o guia de estilo que você criará neste curso. Assim, terminará a primeira unidade vendo exemplos de boas práticas para construir o seu manual.
Na seguinte etapa, você aprenderá todos os elementos que compõem um style guide, definindo, documentando e exportando. Começará pelos símbolos, vendo sua importância e o modo para criá-los, continuará com o layout, o grid, os diferentes tipos de espaço e as cores.
Você irá se aprofundar na tipografia, aprendendo sobre as hierarquias, como documentar tamanhos, pesos, estilos e tudo o que é necessário para gerar consistência em seu produto digital.
Saberá como criar ícones e qual deverá ser o processo correto para documentar a iconografia de seu projeto. Além disso, entenderá como registrar os componentes UI: botões, formulários, cards, entre outros.
Por último, aprenderá a aplicar um style guide já criado a um novo produto e a exportar os assets para os programadores.
Recommended software & tools for this course
What is this course's project?
Criará um style guide para um aplicativo móvel.
Projetos de alunos do curso
Who is this online course for?
A designers principiantes, UI/UX juniors e a qualquer pessoa interessada em design que esteja envolvida na criação de um produto digital.
Requirements and materials
Precisará de conhecimentos básicos de web designer, aplicativos e de Sketch - ou outro aplicativo de design de experiências interativas web ou de apps.
Sobre os materiais, precisará de um computador com Sketch (lembre-se que Sketch funciona somente com Apple) ou outros programas de design como Figma, InVision, Adobe XD, entre outros.
Avaliações
- há 1 ano
Excelente curso. Só faltou material de apoio. Poderia ter uma versão com o figma
- há 1 ano
excelente curso , me gusta que el workflow sea en sketch.
- há 2 anos
Excelente curso, me ha gustado y mejor aun muy bien explicado. :D
- há 2 anos
Awesome course!
- há 2 anos
Curso muito bom!!! Abriu meu horizontes para a área e me instigou a querer estudar ainda mais!!
Tão apaixonado por ideias quanto por design de produtos, ele explora diferentes maneiras de aprender novas habilidades e técnicas para evoluir como designer. Daí seu projeto pessoal chamado The Design Project, um desafio de design de 60 dias sem parar. Seu trabalho foi reconhecido pela Awwwards, Behance e CSS Design Awards.
Conteúdo
- U1
Olá!
- Apresentação
- Influências
- O que faremos no curso?
- U2
1. Introdução
- O que é um guia de estilo?
- Diferenças entre o styleguide e o UI Kit
- Boas práticas para criar um guia de estilo
- U3
Elementos no guia de estilo
- Como criar símbolos?
- Layout
- Espaços
- Cores
- Tipografia
- Iconografia
- Componentes da interface do usuário parte 1
- Componentes da interface do usuário parte 2
- Componentes da interface do usuário parte 3
- Componentes da interface do usuário parte 4
- Componentes da interface do usuário parte 5
- U4
Aplicando um guia de estilo
- Aplicando meu guia de estilo
- Exportando ativos para programação
- E se houver mudanças
- PF
Projeto final
- Criação de um style guide para apps
O que esperar de um curso da Domestika
Aprenda no seu ritmo
Aproveite para aprender desde casa, sem um horário fixo e no seu ritmo. É você quem define sua disponibilidade.
Aprenda com os melhores profissionais
Aprenda métodos e técnicas fundamentais com os melhores profissionais do setor criativo.
Conheça os maiores especialistas
Cada professor compartilha seus conhecimentos com entusiasmo e explicações claras, oferecendo uma perspectiva profissional em cada aula.
Certificates
PLUSIf you're a Plus member, get a certificado personalizado signed by your teacher for every course. Share it on your portfolio, social media, or wherever you like.
Sente-se na primeira fila
Com vídeos da melhor qualidade, você não perderá nenhum detalhe! Graças ao acesso ilimitado, você pode assistir às aulas todas as vezes que precisar para aperfeiçoar sua técnica.
Compartilhe conhecimentos e ideias
Pergunte, peça opiniões e ofereça soluções. Compartilhe sua experiência de aprendizagem com outros alunos da comunidade tão criativos como você.
Conecte-se a uma comunidade criativa global
Esta comunidade acolhe milhões de pessoas do mundo todo, curiosas e apaixonadas por descobrir e expressar sua criatividade.
Assista a cursos produzidos de maneira profissional
A Domestika seleciona cuidadosamente seus professores e produz cada curso internamente para garantir uma experiência de aprendizagem online excelente.
Perguntas frequentes
Você vai aprender a criar, documentar e aplicar Guias de Estilo, gerenciar componentes de UI, melhorar a comunicação entre design e desenvolvimento e garantir consistência visual em produtos digitais usando práticas e ferramentas atuais.
O curso é indicado para quem tem conhecimentos básicos em design digital, ideal para quem quer se aprofundar em documentação, criação de Guias de Estilo e colaboração com equipes de desenvolvimento.
Recomenda-se ter conhecimentos básicos em design digital e familiaridade com ferramentas como Sketch ou Figma. Não é preciso ser expert, mas ter interesse em documentação e aprimorar processos colaborativos.
Você vai aprender a documentar especificações, criar Guias de Estilo claros e usar ferramentas colaborativas, reduzindo erros e facilitando a interpretação dos designs pela equipe de desenvolvimento.
Um Guia de Estilo é um manual que define regras e componentes visuais para garantir coerência e eficiência no design e na implementação de produtos digitais.
Você vai aprender a usar ferramentas como Sketch, Figma, Zeppelin, InVision e Abstract para criar, organizar e documentar componentes de interface e Guias de Estilo.
Sim, você vai aprender a criar UI Kits e a entender a diferença para Guias de Estilo: o UI Kit é um conjunto de componentes reutilizáveis, enquanto o Guia de Estilo documenta regras e especificações visuais.