Apostila 1 — Curso Web Design Básico

aspecto importante é compreender a diferença entre desenvolvimento front-end e back-end. O front-end representa tudo aquilo que o visitante vê e com o que interage diretamente: menus, imagens, botões, formulários e textos. Já o back-end corresponde à parte interna do sistema, responsável pelo processamento das informações, comunicação com bancos de dados e funcionamento das regras do site. Embora essas áreas trabalhem juntas, possuem funções distintas dentro de um projeto web.

Entre as principais tecnologias utilizadas no desenvolvimento de páginas estão o HTML, o CSS e o JavaScript. O HTML organiza e estrutura o conteúdo da página; o CSS é responsável pela aparência visual, como cores, fontes e posicionamento dos elementos; enquanto o JavaScript adiciona interatividade, permitindo criar menus dinâmicos, animações e diversas funcionalidades que tornam a navegação mais agradável. Essas três tecnologias formam a base do desenvolvimento moderno para a web.

Além dos conhecimentos técnicos, o web designer precisa desenvolver habilidades relacionadas à comunicação visual e ao comportamento dos usuários. Um site pode possuir belas imagens e efeitos sofisticados, mas, se for difícil de navegar ou demorado para carregar, provavelmente afastará visitantes. Por isso, princípios como simplicidade, organização, acessibilidade e responsividade fazem parte das boas práticas da profissão. Criar páginas que funcionem adequadamente em computadores, tablets e smartphones tornou-se uma necessidade, já que grande parte dos acessos ocorre por dispositivos móveis.

O mercado de Web Design continua em constante evolução. Empresas, instituições públicas, organizações sem fins lucrativos e profissionais autônomos necessitam de presença digital para divulgar produtos, serviços e informações. Isso amplia as oportunidades para quem deseja atuar na área, seja desenvolvendo sites institucionais, lojas virtuais, blogs, portfólios ou páginas para campanhas específicas. Entretanto, independentemente da especialização escolhida, dominar os fundamentos é essencial para construir projetos consistentes e acompanhar a evolução das tecnologias.

Ao iniciar os estudos em Web Design, é natural encontrar diversos termos técnicos e novas ferramentas. No entanto, o aprendizado ocorre de maneira gradual. Com dedicação e prática, o estudante passa a compreender como cada tecnologia contribui para o funcionamento de um site e desenvolve as competências necessárias para criar páginas organizadas,

acessíveis e visualmente agradáveis. Assim, mais do que aprender códigos, o futuro profissional aprende a construir experiências digitais capazes de conectar pessoas, informações e negócios.

Referências bibliográficas

MDN Web Docs. HTML: Linguagem de Marcação de Hipertexto. Mozilla Foundation. Disponível em português.

MDN Web Docs. Introdução ao HTML – Aprendendo Desenvolvimento Web. Mozilla Foundation. Disponível em português.

World Wide Web Consortium Brasil (W3C Brasil). Web Design & Aplicações.

SILVA, Maurício Samy. HTML5: A Linguagem de Marcação que Revolucionou a Web. Novatec Editora.

SILVA, Maurício Samy. CSS3: Desenvolva Aplicações Web Profissionais com Uso dos Poderosos Recursos de Estilização. Novatec Editora.

Aula 2 – Planejamento de um Site

Antes de escrever a primeira linha de código ou escolher as cores de um projeto, existe uma etapa que faz toda a diferença no resultado final: o planejamento. Muitos sites apresentam problemas de navegação, organização e comunicação não por falta de conhecimento técnico, mas porque foram construídos sem uma preparação adequada. Planejar um site significa definir objetivos, entender quem será o público, organizar as informações e estabelecer uma estrutura lógica antes de iniciar o desenvolvimento. Essa etapa reduz retrabalho, facilita a execução do projeto e contribui para uma experiência mais agradável ao usuário.

O primeiro passo do planejamento consiste em definir o objetivo do site. Toda página na internet precisa ter uma finalidade clara. Algumas empresas desejam divulgar seus serviços, enquanto outras pretendem vender produtos, compartilhar conteúdos, divulgar um portfólio ou oferecer canais de atendimento. Quando o objetivo está bem definido, torna-se mais fácil decidir quais informações devem aparecer em destaque e quais funcionalidades serão realmente necessárias.

Conhecer o público-alvo é outro aspecto essencial. Um site voltado para estudantes apresenta características diferentes de um portal corporativo ou de uma loja virtual. A linguagem utilizada, o tamanho das fontes, as imagens, a organização das páginas e até mesmo as cores podem variar conforme o perfil dos usuários. Por isso, o web designer deve procurar compreender quem utilizará o site, quais são suas necessidades e quais informações são mais importantes durante a navegação.

Depois de definir os objetivos e o público, inicia-se a organização das informações. Essa etapa é conhecida como arquitetura da informação. Seu

propósito é distribuir os conteúdos de forma lógica, facilitando que o visitante encontre rapidamente aquilo que procura. Em vez de reunir todas as informações em uma única página, elas são organizadas em categorias e seções bem definidas, estabelecendo uma navegação simples e intuitiva. Uma boa arquitetura evita excesso de informações, reduz a confusão e melhora significativamente a experiência do usuário.

Uma ferramenta bastante utilizada durante o planejamento é o wireframe. Trata-se de um esboço da página, elaborado antes da criação do design definitivo. O wireframe funciona como uma planta baixa de um site, indicando onde ficarão elementos como logotipo, menu, banners, textos, imagens, formulários e botões. Nesse momento, a preocupação não é com cores ou detalhes visuais, mas sim com a disposição dos elementos e o fluxo de navegação. Essa prática permite identificar melhorias ainda nas fases iniciais do projeto, quando as alterações são mais simples e menos custosas.

Outro fator importante é estabelecer uma hierarquia visual eficiente. Nem todas as informações possuem o mesmo grau de importância. Títulos principais, chamadas para ação, menus e informações essenciais devem receber maior destaque para orientar naturalmente o olhar do visitante. O uso adequado de espaços em branco, diferentes tamanhos de fonte, contraste de cores e organização dos elementos contribui para tornar a leitura mais confortável e a navegação mais intuitiva.

Durante o planejamento também são definidas as diretrizes visuais do projeto. A escolha das cores deve considerar não apenas aspectos estéticos, mas também a identidade da marca, a legibilidade e o contraste entre os elementos. Da mesma forma, a seleção das fontes precisa favorecer a leitura em diferentes tamanhos de tela. Um design equilibrado transmite profissionalismo e fortalece a credibilidade do site perante seus visitantes.

Além da aparência, um bom planejamento considera desde o início aspectos relacionados à acessibilidade. Isso significa desenvolver páginas que possam ser utilizadas pelo maior número possível de pessoas, incluindo usuários com diferentes necessidades. Organizar corretamente os conteúdos, utilizar títulos claros, estruturar bem a navegação e manter uma linguagem objetiva são práticas que beneficiam todos os visitantes e facilitam futuras adaptações para recursos de acessibilidade.

Planejar um site não elimina totalmente a necessidade de ajustes durante o desenvolvimento, mas reduz

significativamente erros e retrabalho. Um projeto bem estruturado permite que designers, desenvolvedores e clientes compartilhem a mesma visão sobre o resultado esperado, tornando todo o processo mais organizado, eficiente e econômico. Em Web Design, dedicar tempo ao planejamento significa investir na qualidade do produto final e na satisfação de quem irá utilizá-lo.

Referências bibliográficas

FERREIRA, Sueli Mara Soares Pinto; REIS, Guilhermo. A prática de Arquitetura da Informação de Websites no Brasil. Ciência da Informação.

SILVA, Maurício Samy. HTML5: A Linguagem de Marcação que Revolucionou a Web. Novatec Editora.

SILVA, Maurício Samy. CSS3: Desenvolva Aplicações Web Profissionais. Novatec Editora.

W3C Brasil. Cartilha de Acessibilidade na Web – Fascículo IV: Tornando o Conteúdo Web Acessível.

W3C Brasil. Web Design & Aplicações.

Aula 3 – Introdução ao HTML

Toda página da internet começa com uma estrutura básica que organiza e apresenta informações ao usuário. Essa estrutura é construída com HTML, sigla para HyperText Markup Language (Linguagem de Marcação de Hipertexto). Diferentemente das linguagens de programação, o HTML não executa cálculos ou toma decisões. Sua principal função é estruturar o conteúdo de uma página, indicando ao navegador o que é um título, um parágrafo, uma imagem, uma lista ou um link. É por meio dessa organização que os navegadores conseguem exibir corretamente as informações para quem acessa um site.

O HTML funciona por meio de elementos conhecidos como tags. Essas tags delimitam cada parte do conteúdo e informam qual é a sua finalidade. A maioria delas possui uma abertura e um fechamento, envolvendo o texto ou outro elemento que será exibido. Essa estrutura facilita tanto a interpretação pelo navegador quanto a manutenção do código pelo desenvolvedor. Aprender a utilizar corretamente as tags é um dos primeiros passos para criar páginas organizadas e compatíveis com os padrões da web.

Toda página HTML possui uma estrutura básica composta por elementos essenciais. O documento começa com a declaração do tipo de documento, seguida da tag <html>, que engloba todo o conteúdo. Dentro dela existem duas partes principais: o <head>, que reúne informações sobre a página, como o título exibido na aba do navegador e outros metadados, e o <body>, onde ficam todos os elementos visíveis ao usuário. Essa organização é adotada em praticamente todos os sites desenvolvidos atualmente e serve como base para projetos simples ou

página HTML possui uma estrutura básica composta por elementos essenciais. O documento começa com a declaração do tipo de documento, seguida da tag <html>, que engloba todo o conteúdo. Dentro dela existem duas partes principais: o <head>, que reúne informações sobre a página, como o título exibido na aba do navegador e outros metadados, e o <body>, onde ficam todos os elementos visíveis ao usuário. Essa organização é adotada em praticamente todos os sites desenvolvidos atualmente e serve como base para projetos simples ou complexos.

Entre as primeiras tags que o estudante aprende estão os títulos e os parágrafos. Os títulos organizam o conteúdo em diferentes níveis de importância, facilitando a leitura e a compreensão da página. Já os parágrafos permitem dividir textos em blocos organizados, tornando a leitura mais agradável. Uma boa estrutura de títulos também contribui para que mecanismos de busca e tecnologias assistivas compreendam melhor o conteúdo do site.

Outro recurso muito utilizado são as listas. Elas podem ser ordenadas, quando apresentam uma sequência numérica, ou não ordenadas, quando utilizam marcadores. Esse tipo de estrutura é bastante empregado para apresentar etapas de um processo, características de produtos, menus ou qualquer informação que possa ser organizada em tópicos. Utilizar listas melhora a organização visual e facilita a compreensão do conteúdo pelos visitantes.

Os hiperlinks representam um dos elementos mais importantes da web. São eles que conectam uma página a outra, permitindo que o usuário navegue entre diferentes conteúdos com apenas um clique. Um link pode direcionar para outra página do mesmo site, para um endereço externo, para um arquivo ou até mesmo para uma seção específica da própria página. Essa capacidade de interligar informações é justamente uma das características que tornou a internet um ambiente tão dinâmico e acessível.

As imagens também fazem parte da estrutura básica de praticamente qualquer site. Elas ajudam a ilustrar conteúdos, apresentar produtos, fortalecer a identidade visual e tornar a navegação mais atrativa. No entanto, não basta apenas inserir uma imagem. É importante escolher arquivos com boa qualidade e tamanho adequado para evitar lentidão no carregamento da página. Além disso, recomenda-se utilizar textos alternativos, que descrevem a imagem para pessoas que utilizam leitores de tela, contribuindo para a acessibilidade do site.

Outro aspecto importante para quem está iniciando é

manter o código organizado. Utilizar indentação, nomes claros para arquivos e uma estrutura lógica facilita a leitura e futuras alterações. Um código bem-organizado também reduz a possibilidade de erros e torna o trabalho mais eficiente quando várias pessoas participam do mesmo projeto. Esse hábito, desenvolvido desde as primeiras páginas, acompanha o profissional durante toda a carreira.

É importante compreender que o HTML representa apenas uma das tecnologias utilizadas no desenvolvimento web. Enquanto ele organiza o conteúdo da página, o CSS será responsável pela aparência visual e o JavaScript adicionará recursos de interação e dinamismo. Por isso, dominar os fundamentos do HTML é essencial para compreender as etapas seguintes do aprendizado e desenvolver sites cada vez mais completos.

Ao concluir esta introdução, o estudante já é capaz de entender como uma página web é estruturada e reconhecer os principais elementos utilizados na construção de um site. Com prática constante, será possível criar páginas cada vez mais organizadas, acessíveis e preparadas para receber recursos visuais e interativos nas próximas etapas do curso.

Referências bibliográficas

MOZILLA FOUNDATION. MDN Web Docs: HTML – Linguagem de Marcação de Hipertexto.

MOZILLA FOUNDATION. MDN Web Docs: Introdução ao HTML.

MOZILLA FOUNDATION. MDN Web Docs: HTML Básico.

MOZILLA FOUNDATION. MDN Web Docs: Estrutura de Documentos e Sites.

SILVA, Maurício Samy. HTML5: A Linguagem de Marcação que Revolucionou a Web. Novatec Editora.

SILVA, Maurício Samy. Fundamentos de HTML5 e CSS3. Novatec Editora.

Estudo de Caso – Módulo 1

O início apressado que atrasou todo o projeto

Mariana era proprietária de uma pequena confeitaria artesanal e decidiu criar um site para divulgar seus produtos, receber encomendas e fortalecer a presença da empresa na internet. Como um amigo conhecia um pouco de HTML, ambos decidiram começar imediatamente a construir as páginas, acreditando que o desenvolvimento seria rápido e simples.

Logo nos primeiros dias, o site já possuía diversas páginas, imagens e textos. No entanto, conforme o projeto crescia, começaram a surgir dificuldades. Cada página apresentava um visual diferente, os menus mudavam de posição, algumas informações importantes estavam escondidas e os visitantes tinham dificuldade para encontrar o cardápio, os horários de funcionamento e os canais de contato.

Além disso, o site havia sido desenvolvido pensando apenas em computadores. Quando

clientes acessavam pelo celular, os textos ficavam pequenos, as imagens ultrapassavam a tela e alguns botões eram difíceis de utilizar. Como consequência, muitos desistiam da navegação antes mesmo de concluir uma encomenda.

Ao analisar o projeto, um profissional de Web Design identificou que o maior problema não estava na programação, mas na ausência de planejamento. Antes de desenvolver qualquer página, deveria ter sido definido o objetivo do site, o perfil do público, a organização das informações e um wireframe que servisse como guia para toda a equipe. Também foi constatado que a estrutura HTML precisava seguir uma organização lógica, facilitando futuras alterações e garantindo melhor compatibilidade entre navegadores.

O primeiro passo para corrigir o projeto foi reunir todas as informações realmente importantes para os clientes. Em seguida, foi elaborado um wireframe simples contendo a posição do logotipo, menu, área de produtos, formulário de contato e rodapé. Somente após essa etapa o desenvolvimento foi reorganizado. Também foram definidos um padrão de cores, uma tipografia consistente e uma navegação simples, permitindo que qualquer visitante encontrasse rapidamente o que procurava. As telas para dispositivos móveis passaram a ser consideradas ainda na fase de planejamento, reduzindo retrabalho durante o desenvolvimento.

Após as mudanças, o site tornou-se muito mais organizado e fácil de utilizar. Os clientes passaram a localizar rapidamente os produtos, as informações de contato e os horários de atendimento. O tempo de permanência dos visitantes aumentou e as encomendas realizadas pelo site cresceram de forma significativa.

Erros comuns observados

• Iniciar o desenvolvimento sem definir os objetivos do site.
• Não conhecer as necessidades do público-alvo.
• Ignorar a criação de um wireframe antes da programação.
• Organizar as informações de forma desordenada.
• Desenvolver apenas para computadores, esquecendo dispositivos móveis.
• Criar páginas com layouts diferentes, sem identidade visual.
• Escrever códigos HTML sem organização ou padronização.

Como evitar esses erros

• Definir claramente a finalidade do site antes de iniciar o projeto.
• Identificar quem utilizará a página e quais informações são prioritárias.
• Elaborar um wireframe simples antes da criação do layout definitivo.
• Organizar os conteúdos seguindo uma arquitetura de informação lógica.
• Planejar desde o

• início a adaptação para diferentes tamanhos de tela.
• Manter um padrão visual consistente em todas as páginas.
• Escrever códigos HTML organizados e estruturados para facilitar manutenção e futuras atualizações.

Reflexão

Este caso demonstra que, em Web Design, a qualidade de um site depende muito mais do planejamento do que da velocidade de desenvolvimento. Um projeto bem estruturado reduz erros, evita retrabalho e proporciona uma experiência mais agradável aos usuários. Planejar antes de programar é um investimento que economiza tempo, melhora a organização e aumenta significativamente as chances de sucesso de qualquer projeto digital.

Parte superior do formulário

Parte inferior do formulário