Aprenda a criar arquivos-modelo para design de interfaces de apps e web com a metodologia Atomic Design e otimize seus projetos
A principal função de um aplicativo é facilitar a vida dos seus usuários, ainda que criar um app possa ser bastante complicado. É por isso que os UI Kits, ou conjuntos de elementos prontos para usar na concepção de interfaces, são um recurso útil para todo designer.
Neste curso, você aprenderá a criar UI Kits para aplicativos e sites no Sketch com o designer Migue, também conhecido como Nodos. Descobrirá também como atualizá-los para reutilização em projetos futuros e como otimizar o seu fluxo de trabalho. Ao final, você será capaz de criar interfaces poderosas e experiências inesquecíveis de um jeito rápido e fácil.
O que você aprenderá neste curso online?
17 aulas & 21 downloads
O que faremos durante o curso
2 minutos, 25 segundos
O que é um UI Kit?
7 minutos, 52 segundos
Padrões de IU e componentes no Sketch
4 minutos, 57 segundos
Design Atômico
11 minutos, 18 segundos
O projeto
10 minutos, 16 segundos
Cores, fonte e grade
20 minutos, 13 segundos
O que está incluído neste curso?
Você começará conhecendo o seu professor, Nodos, que contará um pouco sobre a sua carreira e explicará o projeto que será trabalhado ao longo deste curso.
Em seguida, descobrirá o que é um UI Kit e o que o diferencia de um sistema de design. Aprenderá os padrões de design de interface e verá como organizar os seus arquivos de acordo com a metodologia utilizada pelo professor.
Você revisará o projeto no qual se baseará para criar o seu UI Kit e analisará os componentes a serem criados. Definirá o seu guia de estilo, com atenção especial nas cores, fonte, grids e o conjunto de ícones.
Depois, você partirá para a criação do seu design atômico, primeiro montando os átomos, depois combinando alguns deles para criar as moléculas e, por último, algumas telas com todos estes componentes.
Para concluir, Nodos mostrará como utilizar o seu UI Kit em Sketch como biblioteca e mantê-lo atualizado, adicionando novos componentes conforme necessário.
Recommended software & tools for this course
What is this course's project?
Você criará seu próprio UI Kit a partir de um aplicativo musical.
Who is this online course for?
A designers que queiram entrar no mundo do design de interfaces ou melhorar suas habilidades nesta área, a iniciantes em design de interação e pessoas interessadas em design de aplicativos e de produtos digitais.
Requirements and materials
Para fazer este curso, é necessário ter conhecimentos básicos de Sketch.
Em relação aos materiais, você precisará de um computador com Mojave macOS, ou superior, e ter a última versão do Sketch instalada (é possível baixar a versão teste no site do software). Embora não seja essencial, recomenda-se possuir uma mesa digitalizadora Wacom.
Avaliações
- há 1 ano
El curso es una base para iniciar a trabajar con la metodología Atomic Design.
- há 3 anos
La neta no era lo que esperaba, pensé que el UI Kits te ayudaba a crear el diseño de la aplicación, pero ya lo tenia creado y solo agrupo los componentes, y también no me gusto el estilo en como hablaba, parecía que le faltaba el aire para pronunciar palabras, disculpen mi critica pero así lo percibí
- há 4 anos
Increible curso
- há 4 anos
Muy completo
- há 4 anos
El curso me ha parecido super claro y completo. El profesor da muchos detalles y es super dinamico para todo lo que explica en tan poco tiempo. Super recomendable.
Atualmente, cria padrões e sistemas de design escaláveis. Também é cofundador da SketchMX, uma comunidade para designers, desenvolvedores, UX writers e qualquer pessoa interessada na criação de produtos digitais.
Conteúdo
- U1
Introdução
- Apresentação
- Influências
- O que faremos durante o curso
- U2
Conceitos de esboço e configuração
- O que é um UI Kit?
- Padrões de IU e componentes no Sketch
- Design Atômico
- U3
Estabelecendo as bases de nosso kit de interface do usuário com Sketch
- O projeto
- Cores, fonte e grade
- Cores, fonte e grade 2
- Conjunto de ícones
- U4
Para criar componentes atômicos no Sketch
- Criando componentes: átomos
- Criando componentes: átomos 2
- Criando componentes: moléculas
- Criação de telas com átomos e moléculas
- U5
Bibliotecas no Sketch
- UI Kit como uma biblioteca no Sketch
- Adicione novos componentes ao nosso UI Kit
- Apresente seu kit de interface do usuário
- PF
Projeto final
- Criação de UI Kits com Sketch
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, organizar e documentar sistemas de design visual, UI Kits e componentes reutilizáveis no Sketch, aplicando metodologias como Atomic Design e padrões do Material Design para apps móveis e web.
Este é um curso de nível intermediário, então é recomendável ter conhecimentos básicos em design gráfico digital ou experiência prévia com ferramentas como Sketch ou Figma.
Você precisa de um computador com Sketch instalado (apenas Mac), acesso à internet e conhecimentos básicos de design. É recomendado estar familiarizado com interfaces digitais e noções de usabilidade.
O Atomic Design é aplicado dividindo os componentes em átomos, moléculas e organismos, permitindo criar interfaces modulares, escaláveis e fáceis de manter no Sketch.
Sim, o curso te guia passo a passo para criar, organizar e reutilizar um UI Kit no Sketch, centralizando componentes, estilos e elementos visuais para apps móveis ou web.
Sim, você vai aprender a criar, documentar e gerenciar sistemas de design visual, incluindo guias de estilo, paletas de cores, tipografias e componentes.
Sim, o curso mostra como verificar o contraste entre cor de fundo e texto, aplicando princípios de acessibilidade para melhorar a legibilidade e a experiência do usuário.