Aprenda a criar sites responsivos otimizados para mecanismos de buscas.
O curso de Web Design desenvolve a criação de layouts e projetos para sites responsivos com HTML, CSS e JavaScript, adaptados aos diferentes formatos de tela e dispositivos, levando em conta a experiência de usuário, interfaces e estratégias para a otimização em mecanismos de buscas.
O curso de Web Design é para iniciantes. Contudo, para você aproveitar o curso ao máximo, recomendamos ter noções básicas de composição gráfica.
A grade do curso de Web Design é formada por 4 módulos.
1. Layout Web 30h
[AULA 1] INTRODUÇÃO
Overview: História Web, Web 3.0, Princípios de Rede; Normativas e Padrões: W3C, Dinâmica de Funcionamento: Domínios, Subdomínios, HTTP, HTTPS, Hospedagens; Estudos de Caso: Google, awwwards.com. Oficina: Briefing.
[AULA 2] MERCADO WEB E METODOLOGIA DE PROJETO
Briefing; Metodologia de Projeto; Etapas de Desenvolvimento: da Concepção ao Mockup com Wireframes; Tabelas Indicativas de Orçamentos; Estudo de Caso. Oficina: Levantamento, Referências, Moodboard.
[AULA 3] APLICAÇÕES E TENDÊNCIAS
Layout e Funções; Templates WordPress; Estudos de Caso Nacionais e Internacionais; Resolução do Site; Resolução em Telas; Telas HD e Dispositivos Móveis; Layout Responsivo: Introdução do Design Responsivo; Desktop x Mobile; Novos Modelos. Oficina: Análise Estrutural de Referências.
[AULA 4] COMPOSIÇÃO ALINHAMENTO E GRID
Ordem de Leitura; Grids; A Importância dos Espaços Vazios; Noções de Diagramação: Títulos, Subtítulos, Texto, Espaçamento, Fontes, Peso da Fonte; WebFonts; O que Não Fazer. Oficina: Geração de Alternativas.
[AULA 5] OFICINA: DESENVOLVIMENTO DE PROJETO EM WIREFRAMES
Elementos Comuns do Site: Cabeçalho, Rodapé, Texto, Imagens, Imagem de Fundo, Tabelas, Vídeos, Menus, Anúncios. Oficina: Geração de Alternativas dos Elementos.
[AULA 6] WEB COLOURS
Cores Hexadecimais e RGB; Cores Comumente Utilizadas por Segmento; Composições para Web: Harmonia, Contraste; Legibilidade; Criação de Paletas de Cores. Oficina em Software Gráfico: Criação de Paletas de Cores.
[AULA 7] OFICINA: LAYOUT
Geração de Alternativas em Software Gráfico, Discussão e Seleção.
[AULA 8] OFICINA: LAYOUT E WIREFRAME
Refinamento do Projeto: Wireframe para o Projeto Final.
[AULA 9] OFICINA: LAYOUT RESPONSIVO
Adaptação para Responsividade.
[AULA 10] FINALIZAÇÃO E APRESENTAÇÃO
Finalização dos Projetos, Apresentação e Comentários.
Deseja fazer o módulo Layout Web avulso? Inscreva-se aqui
2. User Interface & Experience 30h
[AULA 1] INTRODUÇÃO EXPERIÊNCIA DO USUÁRIO
Conceitos, Identificação e Compreensão dos Usuários, Componentes da Experiência do Usuário, Aplicação em diversos Segmentos: Produto, Serviço, Sistema, Estudos de Caso, Exercício: Análise Inicial em Sala de Aula de Exemplos;
[AULA 2] OFICINA: PESQUISA
Oficina: Desenvolvimento de Pesquisa
[AULA 3] IDEAÇÃO
Busca por Soluções com Foco no Usuário, Envolvimento de Usuários, Participantes Multidisciplinares, Geração e Teste de Idéias, Criação de Cenários, Observação de Tendências de Comportamento, Mockup e Prototipagem das Soluções Identificando os Pontos Fortes e Fracos, Gargalos, Oficina: Análise da Jornada do Usuário, Diagnóstico de Problemas e Recomendações de Aprimoramento para o Projeto Cliente Modelo;
[AULA 4] INTRODUÇÃO INTERFACE DO USUÁRIO
Oficina: Briefing
Conceitos: User Interface (UI) x User Experience (Ux), Interfaces Físicas e Interfaces Comunicacionais, Estudos de Caso Nacionais e Internacionais, Interatividade, Limitações do Usuáro e Limitações Técnicas/Tecnológicas, Pesquisa em Design de Interface, Oficina: Briefing e Brainstorm de Aplicativo;
[AULA 5] ARQUITETURA DA INFORMAÇÃO
Oficina: Arquitetura da Informação
Conceitos: Contexto, Conteúdo, Usuários, Organização, Busca, Rotulagem, Navegação, Categorização, Hierarquia da Informação, o Layout e a Arquitetura da Informação, Exercício: Organização de Informações do Site para Cliente Modelo;
[AULA 6] USABILIDADE
Boas Práticas para Interfaces Digitais: Clareza, Consistência, Autonomia, Feedback, Tolerância, Guidelines Windows e IOs, Design Responsivo, As Heurísticas de Nielsen, Aplicação das Análises Heurísticas, Exercício: Discussão – diferenças de aplicação entre diferentes dispositivos, Exercício para a próxima aula: Trazer exemplos de Sites mal Sucedidos;
[AULA 7] TESTES DE EXPERIÊNCIA DO USUÁRIO
Métricas, Testes e Ferramentas, Pesquisa, Observação, Grupo de Foco, Entrevistas, Registro de Uso Real, Estudo de Campo, Questionário, Protocolo de Questionamentos, PrEmo, Expressões Faciais, ESD e DRM, Corpus, iScale, UX Curve, Cenário, Exercício: Pesquisa;
[AULA 8] ACESSIBILIDADE E PRINCÍPIOS DESIGN UNIVERSAL E TESTES DE USABILIDADE
Deficiências Visuais, Baixa Visão, Daltonismo, Deficiências Auditivas, Captions, Recursos, Estudo de Caso: Facebook, Design Universal: Uso Equitativo, Flexibilidade no Uso, Simples e Intuitivo, Informação Perceptível, Tolerância ao Erro, Baixo Esforço, Tamanho e Espaço para o uso, Estudos de Caso, Exercício: Apresentar e Analisar em Sala de Aula os Sites Pesquisados pelos Alunos;
[AULA 9] PROTOTIPAGEM E AVALIAÇÃO
Importância e Ferramentas da Prototipagem, Low Fidelity Ptototyping, Oficina: Planejamento da Tarefa, Jornada do Usuário, Desenvolvimento para o Site para Cliente Modelo;
[AULA 10] FINALIZAÇÃO E APRESENTAÇÃO
Finalização da Oficina, Apresentação.
3. Web Front End 45h
[AULA 1] INTRODUÇÃO E AMBIENTE DE DESENVOLVIMENTO
Apresentação dos Objetivos e Estrutura da Disciplina, Objetivos Desenvolvimento Front End: Acessibilidade, Usabilidade e Performance; Node, Visual Studio Code, Controle de Versão.
[AULA 2] INTRODUÇÃO AO HTML
Dinâmica HTML, Cronograma de Desenvolvimento de um Site, Sintaxe Documentos HTML, Tags, Organização de Títulos, Subtítulos, Formatação de texto, Cores em Objetos, Exercício: Hello World.
[AULA 3] INTRODUÇÃO AO CSS
Sintaxe CSS, Cascade, Seletores e Flutuação, Formatação de Texto, Estilização com classes, Imagens de Fundo, CSS Reset, Display, Positions: Static, Relative, Absolute, Integração HTML e CSS.
[AULA 4] CSS BOTÕES
Button tags, Button Sizes, Active State, Disabled State, Hover Buttons, Botões com texto, Icon Buttons, Less, SASS, Opções Avançadas de Animação para Botões.
[AULA 5] CSS, TABELAS, FORMULÁRIOS E IMAGENS
Striped rows, Bordered table, Hover rows, Condensed table, Contextual classes, Responsive tables, Caixas de Seleção, Caixas de Texto, Botões de Seleção, Criar Formulário básico para contato, Image shapes, Rounded, Circle, Img Thumbnail.
[AULA 9] DESIGN RESPONSIVO
Teoria do Design Responsivo, Imagens Flexíveis, CSS Media Queries, Colunas CSS, Print Classes, Test Classes.
[AULA 6] OFICINA
Exercício: Construção Layout Responsivo.
[AULA 7] JAVASCRIPT
Definição de comportamento do Site, Definição de Variáveis (Strings, Numbers, Arrays, Objetos), Aplicação de Condicionais, Descrever Argumentos que se relacionam com Funções, Valores e Funções, Javascript Frameworks, DOM Script (Document Object Model).
[AULA 8] REACT
Introdução (Hello World), JSX, Renderizando Elementos, Componentes, Propriedades, Estado, Ciclo de vida, Eventos, Renderização Condicional e Listas.
[AULA 10] BOOTSTRAP
Desenvolvimento Front End a partir de um framework, Classes dinâmicas, Css columns.
[AULA 11] DESENVOLVIMENTO DE PROJETO
Projeto para o Cliente Modelo e acompanhamento do Professor.
[AULA 12] FORMULÁRIO
Execução de Formulário.
[AULA 13] REVIEWING E REFACTORING, PRÉ-APRESENTAÇÃO
Reviewing e Refactoring, Pré-Apresentação dos Projetos, Comentários.
[AULA 14] REFINAMENTO DO PROJETO
Refinamento do Projeto.
[AULA 15] FINALIZAÇÃO E APRESENTAÇÃO
Finalização, Apresentação do Projeto e Comentários.
4. SEO Search Engine Optimization 15h
[AULA 1] INTRODUÇÃO
Visão Geral dos Mecanismos de Busca: PageRank; Conceitos; Busca Orgânica e Busca Paga; Diretrizes dos Principais Mecanismos de Busca e do World Wide Web Consortium; Critérios de Classificação de um Site; O Valor do Domínio; Benefícios do Uso de Código em HTML e CSS para Seo; Qualidade da Requisição e Tráfego; Tráfego Desejado; Mudanças nos Mecanismos de Busca e Implicações para o SEO; Panda Update; Search Spiders/Bots.
[AULA 2] ESTRATÉGIAS
Estratégias White Hat; Escolha das Palavras-Chave; Títulos e Tags; Arquitetura da Informação e Estrutura do Site; Anúncios Pagos e Links Patrocinados; Modelos de Publicidade Paga; Qualidade dos Conteúdos; Serviços de Diretórios; Otimização para Busca Vertical; Otimização para SEO Local; Links: Link Juice, Deep Linking, Link Building Campaigns, Backlinks; Métricas para Links.
[AULA 3] OTIMIZAÇÃO
On Page Optimization e Off Page Optimization; Páginas de Baixo Valor; NoFollow Tag; Distância de Cliques entre as Páginas e a Home; Site Map; Latent Semantic Analysis; Meta Tags; Otimização de Código; SEO para WordPress; Importância do Texto Âncora; Otimização de Imagens e Vídeos; Alt Attributes; NoScript; Ativos Linkáveis; Soluções para Conteúdo Duplicado, User Reviews; CMSs que Facilitam o SEO.
[AULA 4] MÉTRICAS E RELATÓRIOS, FERRAMENTAS
Estatísticas de Tráfego; Taxa de Conversão; Google Webmasters Tools; Keyword Analytics; Google Keyword; Plano de Ações e Acompanhamento de Palavras-Chave; Ferramentas para Seo: Linkscape, mozRank, mozTrust, Social Media Metrics.
[AULA 5] PROJETO DE SEO
Segmentação; Perfil do Público-Alvo; Objetivos; Escolha e Composição de Palavras Chave; Termos Longos e Curtos; Estratégia de Links.
Deseja fazer o módulo SEO Search Engine Optimization avulso? Inscreva-se aqui
Oficinas com planejamento de layout e criação de sites responsivos.
Durante as aulas do curso de Web Design você vai criar projetos de user interface e user experience.
Além disso, você também vai aprender a criar layouts e templates responsivos para sites e blog. Tudo isso através de exercícios práticos em sala de aula com oficinas de criação.
Depoimentos
Não há avaliações ainda.