Aprenda a criar sites responsivos otimizados para mecanismos de buscas.

O curso de Web Design 120h 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.
É formado pelos módulos de Layout Web, User Interface & Experience, Search Engine Optimization e Web Front End.
CURSO

Web Design

O curso de Web Design 120h 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.

GRADE

A estrutura do curso é formada por quatro módulos.

Sim, você também pode cursar cada módulo individualmente.

Carga horária total: 120h

40px

Layout Web 30h

O módulo de Layout Web 30h aborda os princípios do web design e desenvolvimento criativo para a elaboração de layouts e templates responsivos para sites ou blogs, levando em consideração diferentes resoluções de telas e dispositivos diversos.

[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.

40px

User Interface & Experience 30h

O módulo de User Experience & Interface 30h apresenta os componentes da experiência do usuário, arquitetura da informação, design universal, testes de usabilidade e desenvolvimento de projeto web de user interface e user experience.

[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.

40px

Web Front End 45h

O módulo de Web Front End 45h trata do desenvolvimento front end através das linguagens CSS, HTML, JavaScript e JQuery, passando por conceitos do Design Responsivo e aplicação de frameworks como o Bootstrap.

[AULA 1] INTRODUÇÃO AO HTML
Apresentação dos Objetivos e Estrutura da Disciplina; Objetivos Desenvolvimento Front End: Acessibilidade, Usabilidade e Performance; Dinâmica HTML; Cronograma de Desenvolvimento de um Site; Controle de Versão; Sintaxe Documentos HTML; Tags; Organização de Títulos e Subtítulos; Formatação de Texto; Cores em Objetos. Oficina: Hello World.

[AULA 2] INTRODUÇÃO AO CSS
Sintaxe CSS; Cascade; Seletores e Flutuação; Formatação de Texto; Estilização; Estilização com Classes; Imagens de Fundo; CSS Reset; Display; Positions: Static, Relative, Fixed e Absolut; Integração HTML e CSS.

[AULA 3] CSS BOTÕES
Button Tags; Button Sizes; Active State; Disabled State; Hover Buttons; Botões com Texto; Icon Buttons; Opções Avançadas de Animação para Botões.

[AULA 4] 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; Responsive Images; Image Shapes; Rounded; Circle; Img Thumbnail.

[AULA 5] OFICINA
Exercício em CSS e Html.

[AULA 6] JAVASCRIPT
Definição de Comportamento do Site; Definição de Varíáveis; Diferenciação Strings; Integers e Floats; Aplicação de Condicionais; Descrever Argumentos Relacionados com Funções; Valores e Funções; JavaScript Frameworks; DOM Script (Document Object Model).

[AULA 7] JQUERY
Árvores JQuery Manipulação de DOM; Aplicação de Funções através de JQuery Docs; Integração JavaScript e JQuery. Oficina: Menu Carrossel.

[AULA 8] DESIGN RESPONSIVO
Colunas CSS; Print Classes; Test Classes.

[AULA 9] AMBIENTE DE DESENVOLVIMENTO: LESS & SASS 
Less; Ruby; Node; SASS; Sublime Test; Máquinas Virtuais. Oficina: Construção Layout Responsivo.

[AULA 10] BOOTSTRAP 
Desenvolvimento Front End a partir de um Framework; Classes Dinâmicas; Css Columns.

[AULA 11] DESENVOLVIMENTO DE PROJETO
Desenvolvimento do Projeto 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 e 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.

40px

Search Engine Optimization 15h

O módulo de Search Engine Optimization 15h apresenta uma visão geral dos mecanismos de busca, ferramentas para webmaster, estratégias e otimizações para posicionamento em sites de busca de acordo com o perfil do público-alvo.

[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.

40px

Pré requisitos

Para cursar Web Design é recomendado que você tenha conhecimento em um software gráfico como Photoshop ou Illustrator, para auxiliar no desenvolvimento de layouts.

40px

Habilidades

Criação de sites responsivos considerando a experiência do usuário, com desenvolvimento front end (HTML, CSS, JavaScript e JQuery) e otimização para mecanismos de busca (SEO).

40px

Oportunidades

Após a conclusão do curso, você poderá atuar como freelancer, em agências de comunicação digital, estúdios de web design, empresas de diferentes segmentos, entre outros.

PROFESSORES

Conheça o time de professores do curso.

Cada módulo pode ser ministrado por um ou mais professores.

AULAS

Oficinas com planejamento de layout e criação de sites responsivos.

Desenvolvimento de projetos de user interface e user experience aplicado através de exercícios práticos em sala de aula com oficinas de criação de layouts e templates responsivos para sites e blogs.

Material de Apoio

O conteúdo das aulas e materiais complementares são compartilhados no drive.

G Suite for Education

Uma conta Google for Education com e-mail e espaço ilimitado no drive.

Certificado

Com frequência mínima de 75% e desempenho acima de 70 pontos em cada módulo, você recebe o certificado do curso com a autenticidade 4ED.

GALERIA

@4EDcc

#WD120 #CursoWebDesign #4EDcc #ApaixonadosPorDesign

INVESTIMENTO

Parcele em até 12x no cartão ou economize 10% à vista.

12x R$ 315,00

Cartões de crédito Visa, MasterCard, Elo, Diners, American Express, JCB e Aura.

8x R$ 472,50

Cheque* ou boleto* parcelado. Acréscimo de R$ 10,00 por parcela no boleto. Saiba mais

R$ 3.402,00

Boleto à vista com 10% de desconto. Data de vencimento para um dia após a inscrição.

Curtiu nosso curso de Web Design?

Veja as datas e escolha sua turma ou registre seu interesse para mais informações.

INTERESSE

Gostei, quero saber mais.

Registre seu interesse no curso para enviarmos mais informações e tirar todas as suas dúvidas.