Seja bem-vindo ao Selecta Class! Nessa introdução, além de conhecer um pouco mais sobre o Solto e a ideia do projeto, você vai descobrir o que será desenvolvido durante a sua jornada. E aí, tá pronto? Então vambora!

1.1 Sobre este Curso

Se você ainda não está familiarizado com o termo, UX é uma sigla para User Experience, que foi cunhado lá em 1990 por Don Norman, um cientista cognitivo que trabalhava na Apple. Experiencia do Usuário é tudo que envolve sua percepção em relação a tudo com que interage, que vai desde produtos, serviços, eventos, etc.

1.2 O que é UX?

1.3 O que é o Figma?

1. Introdução

Conheça os principais elementos como a linha, o tamanho, a forma, a textura e o equilíbrio, que são as bases de criação de todos os meios visuais, ou seja, são os fundamentos do design.

2.1 Princípios de Composição e Design

Nesse vídeo nós vamos te explicar de forma descomplicada o que é Gestalt, quais são os seus princípios e fundamentos e ainda exemplificar o uso dessa doutrina no dia a dia do design. Gestalt é uma palavra de origem alemã que pode ser traduzida aproximadamente como, “Forma Total” ou “Forma Global”.Segundo essa teoria que tb é conhecida como a psicologia da forma, o que acontece no cérebro é diferente do que é captado pelos olhos, ou seja, o que se entende é diferente do que se vê, pois o ser humano não percebe as partes isoladamente, mas o todo formado pelas partes.  A Gestalt é uma doutrina que defende que, para se compreender as partes, é preciso, antes, compreender o todo.

2.2 Gestalt

2. Fundamentos de Design

Não conhece o Figma? A ferramenta é focada em criação de design de interface de aplicativos e sites, mas também é uma ótima alternativa para criadores de conteúdo que querem fugir um pouco do Canva e produzir seus próprios posts para redes sociais de forma rápida e fácil.

3.1 Como criar uma conta no Figma

Tutorial Completo  de Figma para Iniciantes + Dicas Bônus.

3.2 Composição Básica

A utilização de Grids no Web Design serve para arquitetar e dispor os elementos textuais e gráficos de maneira organizada e coerente  dentro do espaço, ou resolução disponível, para a criação da interface gráfica do site. O Design Responsivo trata-se de um conjunto de técnicas para adaptar a interface de um site as diferentes resoluções que o usuário pode acessar, sem precisar definir diversas e diferentes versões do site para cada resolução. O Chief of Design é um Canal instrucional de Design para você aprender de graça sobre Design Gráfico, Identidade visual, UX/UI DESIGN, web design e outros temas relacionados a Design e Tecnologia.

3.3 Grids

3.4 Tipografia

Neste vídeo vamos ver como organizar nossa paleta de cor para um projeto e/ou um Design System no Figma, usando como inspiração o modelo de organização do Material Design do Google. Também vamos ver a criação de estilos (styles) no Figma e como organizar sua estrutura.

3.5 Paleta de cores

Botões são um dos principais componentes de um Design System. Eles permitem que os usuários executem ações na aplicação como "Comprar" ou "Salvar". Nesse tutorial, aprenda como criar um botão do zero no Figma, além de 3 variações (Contained, Outlined e Text) e a propriedade ícone.

3.6 Botões

MÁSCARAS permitem que você oculte parte das suas camadas e revele outras. Um uso muito popular delas são nos famosos avatares redondos de qualquer rede social. Nesse vídeo você vai aprender a criar máscaras nos mais diversos elementos do Figma e até fazer animações utilizando suas máscaras.

3.7 Máscaras

Entenda de fato como aplicar estilos dentro do figma, para agilizar o seu processo. Facilite a aplicação de cores, Grids, Tipografias e tudo que você pode estilizar dentro do seu projeto. Dessa forma o seu arquivo do figma se conecta com o Style Guide e você consegue de forma muito mais rápida melhorar e criar novas telas para o seu projeto.

3.8 Guia de estilo visual

3. Elementos Visuais

Neste vídeo vamos desmistificar o Auto Layout no Figma! Tudo o que você precisa saber para começar a usar essa poderosa ferramenta e criar componentes mais avançados e resposivos!

4.1 Auto Layout

Neste vídeo, ensinamos de maneira prática como criar 4 tipos diferentes de interações no Figma, são elas:
              - Interação de toque e navegação (levar de uma tela para outra)
              - Interação slider horizontal
              - Interação de scroll para um elemento na mesma tela
              - Interação de abrir modal inferior, com transição suave

4.2 Interações

4.3 Wireframe

Nesse vídeo mostramos algumas técnicas que utilizo pra ideação de projetos pessoais, inspirações visuais, definição de requisitos, escolha de ferramentas e divulgação do trabalho.

4.4 Projeto

4. Projeto

Nesta aula você vai conhecer 5 #plugins para o #Figma que você precisa conhecer. 
              1. Stark
              2. Visual Eyes
              3.Feather Icons
              4. Unsplash
              5. Rename It

5.1 Plugins

Nesta aula vamos ensinar a como criar um carrossel de imagens interativo no Figma! Mostraremos 2 formas de fazer, uma mais simples usando as ferramentas automaticas do próprio Figma, e outra mais complexa usando outros elementos de prototipação avançado.

UX

Aula