Introdução
- Introdução ao Curso
Adobe XD - Prototipação de Interfaces
- O que é o Adobe Xd
- Onde obter o Adobe XD Gratuíto
- Download dos arquivos necessários para nossas aulas
- Tela Inicial do Adobe XD
- Criando o Projeto no Adobe XD
- Configurações do Prototipo
- Manipulando objetos
- Manipulando Textos
- Alinhamento
- Verificando alinhamentos e posicionamento do elmento
- Repeat Grid
- Manipulando Formas e Agrupamentos de objetos
- Opções de camadas e criando símbols
- Criando Botões
- Criando sombras para os botões
- Enviando objetos para trás
- Favoritando cores e criando uma paleta de cores no prototipo
- Efeito com texto de fundo em transparencia
- Adicionando informações no prototipo
- Campo para enviar email
- Adicionando uma nova tela
- Prototype - Vinculando telas
- Efeitos de transições entre as telas do prototipo
- Conclusão da sessão dedicada ao Adobe XD
Flexbox - Desenvolvendo Layout Responsivos
- Introdução ao Flexbox
- Criando a estrutura
- Display flex
- Flex Direction
- Flex Wrap
- Justify Content
- Align-items
- Flex Grow
- Flex Shrink
- Ordenando elementos com o Flexbox
- Dicas Flexbox
- Conclusão da sessão dedicada ao Flexbox
Grid Layout - Desenvolvendo Layout Responsivos
- Introdução a Grid Layout
- Criando a estrutura
- Grid Template e Grid Areas
- Grid Row e Column
- Posicionando elementos com start e end orientado em linhas e colunas
- Espaçamento entre linhas e colunas
- Align Self
- Justify Self
- Place Self
- Dica para criar layouts baseado em Grid
- Conclusão da sessão dedicada a layout responsivo com Grid
Desenvolvimento do Template
- Introdução ao desenvolvimento do template
- ITCSS
- Criando a estrutura do projeto com ITCSS
- Cabeçalho - Parte 1
- Cabeçalho - Parte 2
- Trabalhando com o Zeplin
- Defindo o reset
- Vinculando as camadas
- Definição do template com grid
- Logo e menu de navegação
- Botões
- Finalizacao do cabecalho
- Posicionando a imagem do fone
- Estilização do texto
- Posicionamento do conteúdo
- Caixa de Mensagem
- Posicionando os shapes no background
- Footer
- Deixando o Frontend responsivo - Parte 1
- Deixando o Frontend responsivo - Parte 2
- Deixando o Frontend responsivo - Parte 3
- Deixando o Frontend responsivo - Parte 4
- Deixando o Frontend responsivo - Parte 5
- Deixando o Frontend responsivo - Parte 6
- Deixando o Frontend responsivo - Parte 7
- Deixando o Frontend responsivo - Parte 8 (conclusão)
Concepção do Front-End
- O Front-End que vamos desenvolver do zero
- Arquivos do Projeto
- Introdução a Concepção de Front-End
- Wireframe do Front-End - PARTE 1/3
- Wireframe do Front-End - PARTE 2/3
- Wireframe do Front-End - PARTE 3/3
- Paleta de Cores
- Tipografia do Front-End
- Mockup do Front-End - PARTE 1/5
- Mockup do Front-End - PARTE 2/5
- Mockup do Front-End - PARTE 3/5
- Mockup do Front-End - PARTE 4/5
- Mockup do Front-End - PARTE 5/5
Desenvolvimento do Front-End
- Criação da Estrutura do Projeto
- Configuração do Bootstrap em nosso projeto Front-End
- Font Awesome e Google Fonts - configurando em nosso projeto
- Estrutura do cabeçalho de redes sociais do Front-End
- Criação do Arquivo Principal SASS
- Estilização do cabeçalho de redes sociais do Front-End
