Apostila - Webdesign

Prévia do material em texto

WEBDESIGN
PROF. ME. VAGNER BASQUEROTO MARTINS
Reitor:
Prof. Me. Ricardo Benedito de 
Oliveira
Pró-Reitoria Acadêmica:
Maria Albertina Ferreira do 
Nascimento
Diretoria EAD:
Prof.a Dra. Gisele Caroline 
Novakowski
PRODUÇÃO DE MATERIAIS
Diagramação:
Alan Michel Bariani
Thiago Bruno Peraro
Revisão Textual:
Fernando Sachetti Bomfim
Marta Yumi Ando
Simone Barbosa
Produção Audiovisual:
Adriano Vieira Marques
Márcio Alexandre Júnior Lara
Osmar da Conceição Calisto
Gestão de Produção: 
Cristiane Alves
© Direitos reservados à UNINGÁ - Reprodução Proibida. - Rodovia PR 317 (Av. Morangueira), n° 6114
 Prezado (a) Acadêmico (a), bem-vindo 
(a) à UNINGÁ – Centro Universitário Ingá.
 Primeiramente, deixo uma frase de Só-
crates para reflexão: “a vida sem desafios não 
vale a pena ser vivida.”
 Cada um de nós tem uma grande res-
ponsabilidade sobre as escolhas que fazemos, 
e essas nos guiarão por toda a vida acadêmica 
e profissional, refletindo diretamente em nossa 
vida pessoal e em nossas relações com a socie-
dade. Hoje em dia, essa sociedade é exigente 
e busca por tecnologia, informação e conheci-
mento advindos de profissionais que possuam 
novas habilidades para liderança e sobrevivên-
cia no mercado de trabalho.
 De fato, a tecnologia e a comunicação 
têm nos aproximado cada vez mais de pessoas, 
diminuindo distâncias, rompendo fronteiras e 
nos proporcionando momentos inesquecíveis. 
Assim, a UNINGÁ se dispõe, através do Ensino 
a Distância, a proporcionar um ensino de quali-
dade, capaz de formar cidadãos integrantes de 
uma sociedade justa, preparados para o mer-
cado de trabalho, como planejadores e líderes 
atuantes.
 Que esta nova caminhada lhes traga 
muita experiência, conhecimento e sucesso. 
Prof. Me. Ricardo Benedito de Oliveira
REITOR
33WWW.UNINGA.BR
UNIDADE
01
SUMÁRIO DA UNIDADE
INTRODUÇÃO .............................................................................................................................................................4
1. CONCEITOS DE WEBDESIGN ...............................................................................................................................5
2. GESTALT PARA O DESIGN ................................................................................................................................... 10
2.1 A TIPOGRAFIA NO WEBDESIGN ....................................................................................................................... 14
3. INTERNET E CONSUMO ...................................................................................................................................... 16
4. POSICIONAMENTO DE MARCA .......................................................................................................................... 19
CONSIDERAÇÕES FINAIS ........................................................................................................................................20
CONCEITOS GERAIS PARA PROJETOS WEB
PROF. ME. VAGNER BASQUEROTO MARTINS
ENSINO A DISTÂNCIA
DISCIPLINA:
WEBDESIGN
4WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
INTRODUÇÃO
A internet é, como podemos chamar, um espaço onde na atualidade existe praticamente 
todo o tipo de informação acessível, dos mais diversos assuntos, e que pode facilitar a vida das 
pessoas na busca por produtos, serviços, informações, conhecimento e entretenimento.
 Dessa forma, desde sua criação na década de 1990 até os dias atuais, ocorreu uma série 
de mudanças que passam por questões tecnológicas e até mesmo a forma como as pessoas se 
comportam, pois a sua utilização nos afeta de forma profunda, tendo em vista que, no cotidiano, 
boa parte das tarefas das pessoas passa pela internet.
Atualmente, compramos, nos divertimos, estudamos, aprendemos, nos comunicamos 
pela internet, e boa parte desse movimento, dessa “circulação” de pessoas, acontece em ambientes 
como sites, sejam de empresas, indivíduos ou instituições, nos quais as informações acerca de 
determinado assunto estão distribuídas de forma estruturada para que ocorra a interação das 
pessoas com tais dados.
Assim, quando navegamos na web, passamos por uma in� nidade de informações 
dispostas de inúmeras maneiras, com os mais variados propósitos e é justamente nesse aspecto 
que o Webdesign é importante, no sentido de contribuir para que essas informações sejam 
dispostas de maneira mais agradável, intuitiva e e� caz para as pessoas.
Portanto, pro� ssionais do Design podem se encaixar de forma contundente no 
desenvolvimento de sites para empresas, pessoas e instituições, contribuindo para que estejam na 
internet bem posicionadas, garantindo sua relevância no alcance às pessoas que fazem parte de 
seu público-alvo.
Todavia, criar um site requer uma série de conhecimentos importantes para que os 
projetos possam estar em sintonia com os recursos contemporâneos e, assim, conseguir estabelecer 
contato efetivo com as pessoas, pois devido ao número gigantesco de sites, o mais comum é não 
fazer diferença alguma à maioria dos projetos que estão funcionando. Assim, é determinante que 
os pro� ssionais, ao desenvolverem sites, estejam atentos aos conceitos básicos de Design, além 
daqueles de programação, inerentes ao funcionamento deles.
Conhecimentos básicos de composição visual, utilização de tipogra� as, linguagens de 
programação como HTML e CSS, hospedagem, domínios, terminações, redes sociais e � uxo de 
tráfego de usuários, assim como gestão de conteúdos e atualizações, fazem parte do repertório 
essencial de pro� ssionais que irão desenvolver projetos web de sites e até mesmo de aplicativos, 
que nada mais são que variações de sites.
Sendo assim, o conteúdo que será apresentado na sequência visa a capacitá-lo para o 
desenvolvimento de projetos web de sites de forma essencial e objetiva.
5WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
1. CONCEITOS DE WEBDESIGN
O Webdesign é uma área do conhecimento, especi� camente do Design, que contribui 
para que a informação seja acessível ao maior número de pessoas possível, de forma visual e 
estruturada, a � m de alcançar rapidamente aquelas pessoas que podem se interessar pelas 
informações e conteúdo que determinada empresa, pessoa ou instituição queira compartilhar, 
comercializar ou produzir (BEAIRD; GEORGE, 2016).
Figura 1 - Webdesign. Fonte: Freepik (2018).
Assim, entender os conceitos do Webdesign é fundamental para pro� ssionais que 
queiram atuar no setor, assim como pessoas que estejam empreendendo, de forma a conseguir 
dialogar com aqueles que irão desenvolver seus projetos na web, garantindo que possam falar a 
mesma língua, uma vez que ao entender de determinado assunto, mesmo que de forma básica, a 
conversa e encaminhamentos de projetos são facilitados.
Portanto, podemos entender que a essência do Webdesign está na junção entre 
funcionalidade e beleza estética de forma harmoniosa, objetivando garantir que essa fusão seja 
interessante às pessoas, sendo útil e prática sempre que possível, uma vez que as pessoas querem 
perder cada vez menos tempo em sites nos quais não conseguem encontrar as informações que 
desejam (BEAIRD; GEORGE, 2016).
Webdesign é uma das áreas do Design, na qual profi ssionais podem atuar 
e desenvolver projetos, que serão utilizados por empresas, instituições e 
profi ssionais de outras áreas, trazendo diversas possibilidades de atuação. É 
possível atuar desde projetos que serão produzidos de forma física até aqueles 
que permanecerão no meio digital.
6WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
Dessa forma, é fundamental que as pessoas sejam colocadas como centro dos projetos, 
ou seja, na criação e desenvolvimento dos sites que forem projetados, uma vez que serão elas 
a utilizá-los. Isso poderá garantir que os projetos estejam mais adequados ao que as pessoas 
procuram e, dessa forma, podem fazer mais sucesso e ser mais efetivos em seus objetivos.
Figura 2 - Pessoa navegando.Fonte: Freepik (2017).
Pensando nisso, é possível fazer uma analogia entre pro� ssionais de Design e Programação, 
pois enquanto o primeiro tipo mantém seu foco na experiência das pessoas e na linguagem que elas 
utilizam ao se expressarem, o segundo tipo de pro� ssionais está mais estabelecido na linguagem 
de programação, ou seja, no funcionamento de algum tipo de comando, sem necessariamente 
levar em conta as pessoas que irão utilizar tal recurso.
Por isso, são mestres em linguagens não humanas, totalmente analíticas e cheias de 
detalhes, muitas vezes não compreendidas pelas pessoas, o que pode tornar a experiência de 
navegar em determinados sites algo penoso e fadado ao esquecimento, provocando rejeição por 
não ter proporcionado o tipo de interação desejada.
Portanto, podemos a� rmar que o webdesigner pode ser considerado o pro� ssional que 
estabelece a ligação entre a linguagem de programação e algo visual e funcional, que é entendido 
pelas pessoas de forma geral e que pode ser considerado até mesmo intuitivo e que contribui para 
que as pessoas encontrem aquilo que procuram.
Figura 3 - Pro� ssional de Web. Fonte: Freepik (2019).
7WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
É justamente a transformação de códigos binários, que é a essência de qualquer 
programação, em elementos visuais e funcionais aos meros mortais, às pessoas que utilizam 
a web para os � ns comuns de entretenimento, aquisição de produtos, de conhecimento e até 
mesmo relacionamentos, ou seja, o aspecto humano para os projetos web.
Na atualidade, os sites são algo essencial para qualquer empresa, instituição e pro� ssional 
que queira divulgar e comercializar seus produtos e serviços, mesmo que seja meramente 
institucional, daqueles tipos que somente apresentam as informações básicas acerca dos negócios 
ou instituições; assim, estar na internet sem informações fáceis de serem encontradas é algo 
inimaginável (KRUG, 2014).
Figura 4 - Empresas na Web. Fonte: Freepik (2018).
Além disso, é muito comum hoje encontrar recursos que possibilitam que as pessoas 
tenham experiências cada vez mais personalizadas e imersivas, com possibilidades que vão desde 
temas especí� cos, personalizações, interações com outras pessoas, interações com o produto ou 
serviço, uso dos mais variados recursos, como imagens, vídeos, animações tridimensionais etc.
Isso tudo faz com que a forma com a qual interagimos com os sites esteja também em 
constante mudança, o que acompanha os avanços tecnológicos que ocorrem com cada vez mais 
rapidez, e que vai desde a velocidade da conexão disponível até ferramentas de desenvolvimento 
web, que facilitam e permitem mais variedades e possibilidades aos projetos.
Assim, um dos pontos mais importantes do webdesign é a interação das pessoas com 
as informações na web. Dessa forma, o uso correto de tais recursos disponíveis pode contribuir 
para que os projetos sejam bem-sucedidos na internet, tendo em vista que, em nosso dia a dia, 
a utilizamos para diversas funções. Pro� ssionais de webdesign precisam, portanto, dominar a 
utilização dos recursos no sentido de potencializar as possibilidades de satisfação das pessoas ao 
acessarem nossos projetos web (KRUG, 2014).
Um outro aspecto importante de ser ressaltado com relação ao webdesign é o fato de 
essa área do conhecimento caminhar lado a lado com o marketing, tendo em vista que um site é 
parte integrante do conjunto de ferramentas que apresenta e constrói a relação entre um negócio, 
instituição e pro� ssional com as pessoas que podem vir a consumir e interagir com seus produtos 
e serviços, demonstrando sua importância no processo de comunicação com o mercado.
Podemos entender que essa relação entre Design e Marketing acontece quando os aspectos 
visuais se incorporam aos comunicacionais e formam, assim, um conjunto de ações que podem 
estabelecer uma série de conexões importantes entre os atores envolvidos nessa relação de troca 
na qual todos nós participamos de alguma forma (MORAIS, 2018).
8WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
Figura 5 - Webdesign como ferramenta de Marketing. Fonte: Freepik (2016).
Então, outro aspecto pode ser evidenciado e deve ser citado aqui: o fato de que o 
pro� ssional de webdesign pode ser considerado uma espécie de pro� ssional híbrido, que recebe 
formação multidisciplinar, que versa por caminhos artísticos e técnicos, sendo responsável por 
essa mescla que dá forma aos projetos web de sites, traduzindo códigos em formas visuais e 
estruturas organizadas que ajudam as pessoas a chegar nas informações que estejam procurando.
Ainda pensando nesse aspecto, em que existe a utilização de elementos e conhecimentos 
multidisciplinares, no webdesign, é preciso estabelecer conexões com o estudo das cores e a 
psicologia embutida nessa utilização, conhecimentos de semiótica, quanto ao uso de formas e 
estruturas para transmitir mensagens aos usuários, transformando isso tudo em um conjunto de 
elementos funcionais técnica e esteticamente.
Quanto aos conhecimentos técnicos, podemos destacar que é necessário que tenha 
domínio sobre os so� wares que serão utilizados no desenvolvimento dos projetos web, como o 
pacote Adobe, com Photoshop, Illustrator, Indesign ou CorelDraw, e conheça, ao menos de forma 
básica, as principais linguagens de programação, como HTML e CSS, para que possa estabelecer 
bom diálogo em projetos que envolvam equipes multidisciplinares, o que é comum no mercado.
Figura 6 - Extensões de arquivos de Webdesign. Fonte: Freepik (2015).
9WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
Isso é importante para momentos em que sejam necessárias mudanças em alguma parte 
do código-fonte dos projetos web, ou mesmo alterações de partes grá� cas, que depois receberão 
seus códigos na estrutura por trás daquilo que as pessoas veem na tela de seus aparelhos no dia 
a dia.
Então pode ser interessante, para as pessoas que queiram se aprofundar nos conhecimentos 
necessários para projetos mais complexos de web, conhecer também códigos de programação 
como PHP, Javascript e ASP, além de so� wares de edição de vídeo. Mas isso não as impedirá de 
atuar na área, como poderemos ver mais adiante no conteúdo.
Além disso, o que será o maior diferencial, seja em projetos web, grá� cos ou de produtos, 
é a criatividade e habilidade em transformar ideias em projetos reais e utilizáveis pelos usuários de 
forma e� caz e satisfatória, de maneira a alcançar os objetivos estabelecidos no desenvolvimento 
e, se possível, superar aquilo que puder, no sentido de agregar valor à experiência dos usuários.
Nesse aspecto, o processo criativo acontece de formas e caminhos diferentes para 
cada pessoa. Mesmo que existam maneiras pré-estabelecidas para que esse processo ocorra, 
é importante tentar identi� car quais são os caminhos que mais se adequam ao seu estilo de 
trabalho e organização pessoal. Isso pode envolver desde levar um caderno de anotações contigo, 
até utilizar uma agenda eletrônica no celular, utilizar mapas conceituais, brainstorm de ideias e 
uma série de técnicas conhecidas ou não, que podem ser descobertas.
Dessa forma, podemos entender que o webdesign e os pro� ssionais que atuam nessa 
área são relevantes para o mercado, ainda mais na atualidade, em que, cada vez mais, existem 
negócios que já nascem somente na web, sem existirem de maneira física, assim como ocorre 
uma migração cada vez maior de negócios ditos mais tradicionais, para terem uma parte de suas 
operações via web, objetivando alcançar mais pessoas, as quais estão cada vez mais conectadas e 
realizando suas diversas ações de forma virtual (ZENONE, 2017).
Assim, podemos veri� car que é uma área de atuação que demanda pro� ssionais ágeis 
e criativos, sendo necessário um processo constante de atualização e aprimoramento, mas com 
conhecimentos entre básicos e intermediários, já é possível realizar projetos interessantes de 
webdesign.
Essa atuação podevariar desde um trabalho solo, como pro� ssional autônomo, ou como 
é conhecido no mercado, freelancer, com a possibilidade de ter seu próprio CNPJ (Cadastro 
Nacional da Pessoa Jurídica) em forma de MEI (Microempreendedor Individual), e outras 
formas legais. Além disso, pode ingressar em agências de Design, Marketing, Publicidade, 
Indústrias, e empresas dos mais diversos ramos de atividades, sendo responsável pelos projetos 
web, ou fazendo parte de uma equipe responsável pela imagem das empresas, assim como pela 
comunicação em seus diversos canais com o público em geral.
É importante ressaltar que cada uma dessas formas de trabalho possui um tipo de rotina 
distinta, além da dinâmica, e isso deve ser levado em consideração ao se optar pelo caminho 
escolhido, sendo prudente formular algum tipo de plano, com detalhes e formas de como 
determinada meta poderá ser alcançada.
Portanto, dentre os conceitos gerais do webdesign, é possível entender que existe uma 
série de aspectos que precisam ser levados em consideração, assim como em outras pro� ssões, 
mas cada uma com suas especi� cidades, que precisam ser atendidas para que possam, assim, 
contribuir para o sucesso.
10WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
2. GESTALT PARA O DESIGN
Como o webdesign é uma das áreas do Design, não podemos deixar de abordar os 
princípios da Gestalt, devido à sua importância para o processo de comunicação. Assim, toda 
vez que se tem contato visual com algum objeto e isso é bom, ou seja, positivo, dentro de suas 
referências, é bem possível que ali tenha sido aplicado algum princípio da Gestalt. Isso acontece, 
pelo fato de esses princípios fazerem parte de nós, ou seja, na forma como entendemos visualmente 
aquilo que está ao nosso redor (OLIVEIRA, 2016).
Compreender tais princípios é importante, para que possam ser aplicados em nossos 
projetos e, dessa forma, conseguirmos alcançar resultados mais expressivos naquilo que 
desenvolvemos, objetivando sempre a satisfação dos usuários e a e� cácia da mensagem proposta. 
Dessa forma, é importante que você entenda esses conceitos e como aplicá-los em seus projetos 
(OLIVEIRA, 2016).
Além disso, com conhecimento dos princípios da Gestalt, temos uma maior amplitude 
em termos de repertório e formas de ações quanto ao desenvolvimento dos projetos, podendo 
utilizar essas técnicas para produzir mensagens especí� cas e personalizadas, de acordo com o 
público que se queira atingir.
Gestalt é um movimento vindo da psicologia que busca atuar na teoria da forma, sendo 
utilizada pelo Design para trazer signi� cados às formas, e é usado, mesmo que de maneira 
inconsciente, por pro� ssionais da área, assim como de outras áreas da comunicação. Ela é 
importante, pois contribui para que as pessoas entendam a mensagem e as assimile de maneira 
mais e� ciente (MARCO; SOUZA; COSCI, 2018).
Seu signi� cado tem origem germânica, que traz sua função explicitamente, ou seja, para 
que serve. Assim, Gestalt signi� ca, em português, forma ou � gura, e teve sua adoção por essa 
linha de estudos da psicologia para signi� car formas e � guras, ou um conjunto delas.
Você consegue perceber como o Design é uma área do conhecimento que reúne 
uma série de assuntos para trazer subsídios aos projetos desenvolvidos? Isso 
acontece, pois como são desenvolvidos projetos que trazem consigo signifi cados, 
é necessário que sejam incorporados conhecimentos da comunicação e 
linguagem, como os da Gestalt e Semiótica, os quais fornecem conceitos e 
informações importantes para fundamentar criações realizadas no Design, e, 
consequentemente, na vertente do Webdesign.
A Gestalt é interessante para o Design e a área do Webdesign, pois tem sua origem 
na psicologia, o que faz todo o sentido para as áreas de comunicação, pois como 
trabalha com os signifi cados, contribui para que os projetos façam mais sentido 
para as pessoas, pois aproveita o contexto e repertório das pessoas nas diversas 
faces do cotidiano, potencializando as mensagens de forma efetiva.
11WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
Assim, podemos entender a Gestalt como um conjunto de entidades de diversos tipos, 
que quando juntas, formam um determinado conceito, um padrão, ou ainda algum tipo de 
con� guração uni� cada, que pode variar em diversos sentidos. Ela nos ajuda a entender as partes 
e o todo, assim como ocorre essa relação em que percebemos partes com destaque, ou o todo 
sendo o principal.
Podemos a� rmar ainda que, segundo a Gestalt, nossa mente preenche as informações 
daquilo que vemos, ou quando lemos algo, nossa vivência remete a uma imagem, uma � gura, 
com suas formas, nos ajudando a decifrar o código gerado nessa interação, ou completa um 
caminho, linhas e preenchimentos.
Então, podemos entender que nosso cérebro sempre busca conexão com um determinado 
aspecto para chegar às soluções mais fáceis possíveis, ou seja, estratégias mais e� cientes, para gastar 
menos energia e tempo, e isso pode acontecer, por exemplo, com a formação de agrupamentos 
por partes semelhantes e que contribua para um entendimento ou resultado (MARCO; SOUZA; 
COSCI, 2018).
Assim, da mesma forma que tais conceitos e forma de o cérebro pensar servem para 
realizar os agrupamentos, também é válido para a separação, ou afastamento, ou mesmo isolar 
algo, que pode ser proposital para chamar a atenção para um determinado ponto a depender 
daquilo que desejamos transmitir em determinado projeto. Assim, dentre os principais conceitos 
da Gestalt, podemos destacar os seguintes: Semelhança, Proximidade, Continuidade, Pregnância, 
Fechamento e Unidade.
A lei da semelhança é baseada no agrupamento de objetos similares, de forma a estabelecer 
algum tipo de associação, como em um conjunto de círculos e quadrados, em que se intercala 
cada uma dessas formas para estabelecer alguma sequência, ou conjunto, e que será interpretado 
pelas pessoas possivelmente pela sequência de formas, não pela forma de arranjo por linhas e 
verticais ou horizontais, por exemplo, mas sim por colunas de quadrados e círculos (GOMES 
FILHO, 2006).
Este artigo é interessante, pois trata de uma forma mais detalhada da origem da 
Gestalt, de modo a contribuir com o conhecimento desse importante aspecto do 
Design para os profi ssionais que irão atuar na área de comunicação. E mesmo 
sendo um pouco mais antigo, ainda assim, traz informações relevantes para os 
dias atuais.
BEHRENS, R. R. Art, Design and Gestalt Theory. Leonardo The MIT 
Press, [s. l.], v. 31, n. 4, p. 299-303, ago. 1998. Disponível em: <https://
muse.jhu.edu/article/607797/>. Acesso em: 4 jun. 2020.
12WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
Figura 7 - Semelhança. Fonte: O autor.
Na lei de proximidade, o que podemos entender e ver é que objetos que estejam próximos 
possuem a tendência de se agruparem, formando uma unidade, e isso � cará mais claro quanto 
menor for o espaço entre os elementos. É possível notar que os quatro grupos são mais evidentes 
que o total de círculos (GOMES FILHO, 2006).
Figura 8 - Proximidade. Fonte: O autor.
A lei de continuidade se estabelece pela conexão de pontos por linhas curvas ou retas, 
que, de forma geral, podem indicar caminhos; dessa forma, em linhas pontilhadas, temos a 
capacidade de ver a complementação com linhas imaginárias contínuas (GOMES FILHO, 2013).
Figura 9 - Continuidade. Fonte: O autor.
13WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
Conhecida como lei da Pregnância, institui que os objetos sejam vistos de forma mais 
simples, sendo conhecida também como lei da simplicidade, justamente por ter como premissa 
que formas sejam interpretadas da maneira mais simples possível (MARCO; SOUZA; COSCI, 
2018).
Figura 10 - Pregnância. Fonte: O autor.
Na lei do fechamento, o cérebro agrupa os elementos, mesmo que incompletos, para 
formar uma � gura, ou seja, para completá-lo em nossa mente, a � m de possibilitar que possamosver e entender o objeto completo, mesmo que ele não exista de fato (GOMES FILHO, 2013).
Figura 11 - Fechamento. Fonte: O autor.
Já a lei da uni� cação pode ser entendida como a junção entre a parte da � gura que 
vemos e o vazio, formando, ou preenchendo a forma para completar a mensagem que deve ser 
entendida, se apropriando do vazio para conseguir construir a forma, podendo ser até mesmo 
possível enxergar as linhas divisórias da � gura (GOMES FILHO, 2006).
Figura 12 - Uni� cação. Fonte: O autor.
Desse modo, podemos entender que as leis da Gestalt podem ser utilizadas, sempre que 
possível de forma consciente, para agregar mais qualidade técnica aos projetos, trazer soluções 
simples e inovadoras às mais diversas situações.
14WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
2.1 A Tipografia no Webdesign
Outro aspecto essencial no webdesign está na escolha da tipogra� a, ou como conhecemos, 
as fontes que serão utilizadas em projetos web, pois dentre todo o conteúdo na internet, a maior 
concentração é textual; sendo assim, é importante conseguir estabelecer uma boa relação na 
escolha das fontes que farão parte dos projetos desenvolvidos (FONSECA, 2008).
Figura 13 - Tipogra� as. Fonte: Freepik (2019).
A tipogra� a exerce impacto direto na experiência das pessoas na utilização dos sites e na 
interação com as informações, tendo em vista que precisamos ler as informações e assimilar o 
conteúdo. Mas é comum sentirmos desconforto ao acessarmos alguns sites, e corriqueiramente o 
problema está no conjunto de fontes escolhidas, e isso envolve a sua forma, tamanho e distribuição 
no espaço, uma vez que esse último aspecto varia de forma contundente por causa dos diversos 
aparelhos por meio dos quais acessamos os sites (CLAIR; BUSIC-SNYDER, 2009).
Uma ótima fonte de conhecimento e subsídios acerca do Design, 
este documentário, dividido em cinco episódios, é bem completo e 
pode contribuir em diversos aspectos para a formação, passando 
por diferentes tipos de objetos e projetos de Design, assim como 
conceitos e utilizações. Para assistir, é possível encontrar os 
capítulos no Youtube com o título: BBC - The Genius of Design 1 of 
5 (legendado), sendo necessário ativar as legendas, tendo em vista que são em 
inglês. Disponível em: <https://www.youtube.com/watch?v=1ofW8yT6aoM>.
15WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
As fontes utilizadas na web precisam ser claras em termos de leitura e formas, contribuindo 
para o entendimento e � uidez do conteúdo, e não atrapalhar o acesso às informações. Devem 
fazer parte do conjunto de elementos que irá compor o projeto do site de maneira a trazer mais 
qualidade ao projeto.
Assim, podemos entender que existem aspectos importantes relacionados às fontes, que 
devem ser levados em consideração e, em hipótese alguma, descartados, salvo casos em que isso 
seja intencional, ensinando algo como forma de exemplo. Tais aspectos são os estilos e usos, pesos, 
cores, responsividade, intensidade e recursos existentes, os quais serão expostos na sequência.
Dentre os estilos e usos, na tipogra� a, podemos entender que existem opções para todas 
as preferências e objetivos dos projetos e é necessário realizar uma escolha criteriosa, seguindo 
padrões e tendências em projetos mais objetivos e mesmo comerciais, até os mais personalizados, 
onde pode ser utilizado um conjunto mais diferenciado e exclusivo. 
Sendo assim, conforme acontece em projetos grá� cos físicos, existem dois grandes grupos 
de fontes que são amplamente utilizadas: com serifa e sem serifa. As fontes com serifa são aquelas 
que possuem traços horizontais em sua base e que servem como uma espécie de linha imaginária 
e ajuda na leitura de textos longos, como livros e revistas. Já as sem serifa, ou como também são 
conhecidas, retas, não possuem essa base, terminando na haste e geralmente são utilizadas em 
textos mais curtos, títulos e chamadas de reportagens (GARFIELD, 2012).
Figura 14 - Com serifa e sem serifa. Fonte: O autor.
Porém, quando entramos no campo da web, as fontes retas são mais amplamente 
utilizadas, mesmo que isso esteja mudando ao longo do tempo, justamente pensando em projetos 
exclusivos, ou aqueles que queiram se diferenciar do convencional praticado no mercado. Assim, 
já é possível ver sites que utilizam fontes serifadas se tornarem mais comuns.
Outro aspecto relevante quanto ao uso das fontes está na relação de peso e cores utilizadas, 
pois isso pode facilitar, ou atrapalhar, o reconhecimento das formas das letras e a consequente 
leitura, se forem empregados de forma ruim. Isso acontece, pois nos conceitos de Design, é 
importante trabalhar com hierarquia de tamanhos e pesos. Isso é importante para favorecer o 
caminho que usuários irão percorrer ao navegar nos sites, tendo em vista, por exemplo, que títulos 
usualmente chamam mais a atenção com tamanhos maiores; sendo assim, se esses elementos são 
os mais importantes, os demais devem ser menores, com menos peso na composição e assim 
sucessivamente, para guiar a leitura. Isso também vale no uso de cores e contrastes, que deve ser 
realizado para bene� ciar de forma mais clara possível a leitura, salvo em casos especí� cos em que 
se deseje uma mistura.
Dessa forma, é possível entender os principais pontos relacionados às tipogra� as na web, 
assim como os demais pontos abordados até o momento.
16WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
3. INTERNET E CONSUMO
As relações de consumo na história humana passam por mudanças constantemente, 
devido a uma série de fatores que contribuem para que essa relação se estabeleça. Isso passa 
por alterações na forma de se atribuir valor aos produtos e serviços, ciclos econômicos, 
posicionamentos políticos, guerras, interesses econômicos e um quão número de outras razões 
que poderiam ser elencadas, mas dentre os principais motivos de as relações mudarem, podemos 
destacar os provenientes dos avanços tecnológicos (SOLOMON, 2016).
Figura 15 - Compras on-line. Fonte: Freepik (2017).
Tais aspectos nos in� uenciam de maneira integral na atualidade, estando presentes 
em praticamente todas as tomadas de decisão de compra, por mais simples e barato que seja o 
produto ou serviço adquirido. Isso acontece pela penetração que pode ser vista pelos smartphones 
e aplicativos que auxiliam a humanidade nos mais variados afazeres.
Assim, quando pensamos em algo para comprar, em diversos momentos, veri� camos 
algo sobre esse determinado bem de desejo na internet, buscamos detalhes, opiniões de outras 
pessoas que já utilizaram, e isso faz parte da jornada que as pessoas percorrem ao pesquisar 
produtos e serviços na internet (MERLO; CERIBELI, 2014).
Dessa forma, podemos veri� car alguns dados, a partir de uma pesquisa realizada em 
conjunto pelo Serviço de Proteção ao Crédito (SPC) e Confederação Nacional dos Dirigentes 
Lojistas (CNDL) em 2018, que aponta uma gama interessante de como ocorre o consumo na 
internet, essa relação das pessoas com o consumo e como isso ocorre na internet (CNDL; SPC 
BRASIL, 2018).
A jornada de compra dos consumidores on-line em geral possui um caminho pelo qual 
as pessoas percorrem com fases nas quais 74% utilizam o smartphone em pelo menos uma delas, 
como pesquisa de preço, marca, localização, comparações, opinião das pessoas, � nalização de 
compra e assim por diante. Além disso, 93% dos consumidores conectados na internet preferem 
utilizar os sites como canal de compra, ultrapassando as lojas físicas, shoppings, aplicativos, 
catálogos, dentre outros.
17WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
Em termos de gastos médios, os brasileiros � cam na faixa dos R$ 300,00, e itens de 
vestuário e artigos para a casa lideram os itens comprados, como mostra a pesquisa. Isso re� ete 
uma tendência de compras com valores mais altos estarem sendo realizadas de forma física ainda, 
mas que já mostram sinais de mudança, com empresas realizandovendas de imóveis, carros e 
outros itens com valores elevados de forma virtual (CNDL; SPC BRASIL, 2018).
Já quando pensamos em níveis de satisfação, podemos veri� car que 85% � caram satisfeitos 
com as experiências de compras realizadas pela internet, com especial atenção ao item frete grátis, 
que mais importou na decisão de compra, o que tem se tornado uma tendência amplamente 
utilizada pelas empresas, ou com a retirada em lojas físicas da mesma rede, funcionando como 
minicentros de distribuição.
Outro aspecto expressivo na pesquisa é o fato de que 95% dos participantes realizam 
pesquisas de preços antes de tomar algum tipo de decisão de compra. O que antes acontecia de 
loja em loja andando por centros comerciais, ou lojas de rua, acontece hoje na web, com a ajuda 
de smartphones, tablets e outros aparelhos conectados à rede. Entre os itens mais pesquisados, 
estão eletrodomésticos e smartphones.
O que contribui de maneira signi� cativa com a preferência da internet para a realização 
de pesquisas de preço é o fato de poder analisar e realizar comparativos com dados técnicos, 
que, em muitos casos, são detalhes que vendedores não dominam totalmente, até mesmo pela 
variedade de opções existentes e lançamentos que chegam às lojas, enquanto nos sites, é possível, 
em alguns casos, realizar comparações entre diversos modelos de produtos da mesma categoria.
Na Figura 16, é possível ver um comparativo entre as preferências dos consumidores nas 
compras pela internet com vantagens e desvantagens.
Figura 16 - Vantagens e desvantagens de comprar pela internet. Fonte: CNDL e SPC Brasil (2018, p. 11).
18WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
Outro aspecto que faz diferença na opinião dos consumidores é a forma como são 
atendidos nos processos de compra on-line, seja por meio dos chats, redes sociais ou aplicativos 
de conversa como WhatsApp ou Telegram. Isso os faz se sentirem como se estivessem sendo 
atendidos pessoalmente, como num atendimento físico, o que transmite mais con� ança e 
satisfação com o processo de compra. Tal fato é apontado por 80% como algo importante.
Mas nem tudo são � ores na relação entre consumidores e empresas na internet, pois como 
aponta o estudo, 64% das pessoas já desistiram da compra pela internet no momento de realizar o 
pagamento do produto ou serviço, e os motivos são variados: 54% desistiram por causa de taxas 
ou fretes cobrados; 39% dizem ter encontrado diferenças entre preço anunciado e praticado; para 
36% o prazo de entrega foi o limitante; 36% por suspeitarem ser algum tipo de fraude, dentre 
outros itens que podem ser vistos (Figura 17).
Figura 17 - Fatores que in� uenciam na desistência de uma compra pela internet. Fonte: CNDL e SPC Brasil (2018, 
p. 18).
19WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
Sendo assim, a partir desses dados, podemos veri� car a importância de empresas, 
instituições e pessoas estarem na internet, no sentido de terem uma possibilidade massivamente 
maior de alcançar pessoas de lugares que um estabelecimento físico local não tem. Podem assim 
também estabelecer formas de crescimento exponenciais, mas com cuidados que veremos a 
seguir.
4. POSICIONAMENTO DE MARCA
Que as empresas, instituições e pro� ssionais devem estar na internet, provavelmente, 
é um consenso, tendo em vista que, cada vez mais, procuramos e interagimos com pessoas e 
marcas na internet nos mais diversos tipos de relação e objetivos. Dessa forma, esse é um aspecto 
importante de se entender como acontece em termos de de� nição e seus efeitos, que passam 
do virtual para o físico em intensidades diferentes do que se via antes do advento da internet e 
desenvolvimento do digital com os aparelhos móveis e conexões mais rápidas (MORAIS, 2018).
Sendo assim, podemos a� rmar que o posicionamento de marca é a forma como desejamos 
e planejamos a representação de como queremos que a marca seja percebida, ou seja, como 
queremos que seja entendida. O que nos leva ao objetivo primordial, que é fazer com que essa 
intenção e planejamento sejam efetivos no entendimento das pessoas sobre a marca (MERLO; 
CERIBELI, 2014).
Além disso, quanto ao posicionamento da marca, é importante que alguns pontos sejam 
levantados de maneira a contribuir como formas de de� nição daquilo que é importante para o 
processo de posicionamento. Portanto, entender a quem produtos e serviços se destinam, o que 
podem resolver para as pessoas e quais diferenciais a marca possui são essenciais para conseguir 
estabelecer um posicionamento efetivo.
Figura 18 - Público-alvo. Fonte: Freepik (2017).
Dessa forma, quando pensamos a quem se destinam os produtos e serviços da marca, 
precisamos entender o per� l ideal de pessoas, e utilizar suas características e preferências para a 
produção e desenvolvimento de ações e projetos grá� cos que estejam alinhados aos pensamentos 
elencados por meio de pesquisas.
20WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
O mesmo acontece quando pensamos e de� nimos que tipo de problema nossa marca 
soluciona para as pessoas, pois dessa forma é possível atrair, de forma mais efetiva, aqueles 
que procuram as soluções que oferecemos. E � nalmente, que tipo de diferenciais a marca pode 
oferecer às pessoas, ou seja, quais são os valores vistos pelas pessoas na marca, sejam eles visíveis 
ou não, como material utilizado, preço, tecnologia embarcada, ou status, tendência, modismo e 
assim por diante. Ter clareza desses aspectos pode potencializar as relações das pessoas com a 
marca e até mesmo garantir sucesso ante concorrentes do mercado (SOLOMON, 2016).
Sendo assim, é importante conhecer o contexto social, cultural e econômico no qual 
queremos que a marca esteja posicionada, para que a comunicação seja realizada de forma efetiva 
e satisfatória para as pessoas que irão recebê-la e interagir com ela.
CONSIDERAÇÕES FINAIS
Com os assuntos abordados nesta unidade, foi possível entender os conceitos básicos de 
Design, voltados para a área especí� ca do Webdesign, passando por conceitos gerais de internet 
e demandas relacionadas aos pro� ssionais dessa área, assim como habilidades esperadas. Vimos 
conceitos como Gestalt, que auxiliam no entendimento de mensagens, assim como na formulação 
delas.
Foi possível ver a importância da tipogra� a na construção de sites e no design de forma 
geral, além das relações de consumo e utilização da internet pelas pessoas na atualidade, o que 
contribui para fortalecer a relevância do pro� ssional de Webdesign na comunicação das empresas, 
pessoas e instituições.
E, � nalmente, abordamos o posicionamento das marcas, ou seja, dos mesmos atores 
citados anteriormente, pois se pararmos para analisar o contexto, na atualidade, somos uma 
espécie de marca, pois tudo o que fazemos e expomos transmite mensagens para aqueles que nos 
observam.
2121WWW.UNINGA.BR
UNIDADE
02
SUMÁRIO DA UNIDADE
INTRODUÇÃO ............................................................................................................................................................22
1. CONCEITOS DE HTML ..........................................................................................................................................23
2. CONCEITOS DE CSS .............................................................................................................................................27
3. RESPONSIVIDADE ................................................................................................................................................30
4. SISTEMAS DE GESTÃO DE CONTEÚDOS ...........................................................................................................35
CONSIDERAÇÕES FINAIS ........................................................................................................................................40
LINGUAGENS E SISTEMAS PARA 
WEB CONTEMPORÂNEA
PROF. ME. VAGNER BASQUEROTO MARTINSENSINO A DISTÂNCIA
DISCIPLINA:
WEBDESIGN
22WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
INTRODUÇÃO
Para entendermos de forma satisfatória como ocorre o desenvolvimento web, é importante 
que possamos conhecer as principais ferramentas utilizadas nessa área do Design, que consistem 
na utilização em boa medida de linguagens de programação, ou seja, de códigos que irão ser 
traduzidos pelos navegadores para as telas dos equipamentos que utilizamos.
Assim, entender o funcionamento de linguagens como HTML e CSS, as quais são as mais 
utilizadas na construção de sites e essenciais para projetos web, farão diferença em sua atuação 
no mercado.
Da mesma forma, é importante conhecer e compreender o que é a responsividade, 
assim como para que serve e como acontece no nosso cotidiano, além dos sistemas de gestão de 
conteúdos, que se constituem em ferramentas essenciais para aquelas pessoas que querem ganhar 
agilidade.
Dessa forma, esta unidade irá tratar de uma série de assuntos importantes para o 
desenvolvimento web.
23WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
1. CONCEITOS DE HTML
Mesmo não conhecendo os códigos utilizados no HTML (HyperText Markup Language, 
que signi� ca Linguagem de Marcação de Hipertexto), você possivelmente já deve ter ouvido 
falar sobre ele, e utiliza sua estrutura em boa parte do seu dia a dia, pois sua estrutura de códigos 
contribui para a formação e construção de sites e aplicações web. Dessa forma, na atualidade, é 
praticamente impossível as pessoas não terem contato com o HTML (Figura 1).
Figura 1 - HTML. Fonte: Freepik (2020).
Com HTML, é possível realizar a criação de seções, parágrafos, cabeçalhos e links 
que são utilizados nas páginas que acessamos diariamente dos mais diversos aparelhos, desde 
computadores desktop, notebooks, tablets e smartphones, gerando uma série de possibilidades 
de interação e comunicação entre as pessoas e entidades (TERUEL, 2014).
Fazendo uma analogia, podemos comparar o HTML ao Microso� Word (Figura 2), no 
qual é possível formatar e organizar textos e estruturas visuais com imagens e ilustrações, mas que 
não permite realizar funcionalidades dinâmicas, somente estáticas, o que con� gura a necessidade 
de complementos para tornar sites e aplicações web completas.
Figura 2 - Microso� Word. Fonte: O autor.
24WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
No HTML, trabalhamos com códigos e tags, que são estruturas de linguagem de 
marcação que contêm instruções com início e � m, de modo que os navegadores consigam 
entender e executar uma determinada função, sendo especi� cados diversos comandos que serão 
interpretados pelos navegadores, os quais serão entendidos pelos usuários de forma visual, seja 
por textos, imagens, grá� cos ou elementos visuais, e não em forma de códigos (Figura 3).
Figura 3 - Site da Red Bull com códigos aparentes. Fonte: O autor.
Assim como outras tecnologias tão comuns aos indivíduos na atualidade, o HTML surgiu 
a partir de uma situação existente para um grupo especí� co que queria resolver como poderiam 
se comunicar sobre pesquisas que estavam desenvolvendo. Dessa forma, Tim Berners-Lee, um 
físico britânico, criou um sistema de hipertexto (textos que possuem links para outros textos) 
para a internet, que resolveria seu problema. Isso ocorreu em 1991 com a utilização de 18 tags, 
ou seja, comandos, e desde então, vem sofrendo modi� cações e atualizações, o que gira em torno 
de 140 tags diferentes, sendo que alguns já não são reconhecidos pelos navegadores, tendo sido 
substituídos por outras formas de codi� cação (TERUEL, 2014).
Assim, junto com a popularização da internet, o HTML foi sendo desenvolvido ao longo 
dos anos, tendo sido lançadas novas versões desde a primeira em 1991 com o HTML. Depois 
vieram: HTML 2.0 (1995), HTML 3.2 (1997), HTML 4.01 (1999), XHTML (2000), HTML 5 
(2014), HTML 5.1 (2016 e 2017) e HTML 5.2 (2017).
Os arquivos de HTML são visualizados em navegadores, os quais utilizamos em 
equipamentos eletrônicos como notebooks, desktops, tablets e smartphones, independentemente 
do sistema operacional. E suas extensões são .html e .htm. Dessa forma, com a utilização 
dessas extensões, em navegadores como o Chrome, Safari ou Mozilla Firefox, é feita a leitura e 
renderização, ou seja, a transformação dos códigos em informações que estamos acostumados a 
entender (HAROLD, 2010).
25WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
Figura 4 - Navegador. Fonte: Freepik (2018).
Os sites mais comuns, ou simples, utilizam o HTML em suas diversas páginas, as quais 
podem ser utilizadas de diferentes formas e com objetivos distintos, como páginas de entrada, 
para explicar os objetivos da empresa, missão e valores, ou simplesmente apresentar alguma outra 
informação relevante de forma prática e objetiva, sem qualquer tipo de efeito ou movimento. 
Além disso, o que todos eles possuem em comum está na junção de uma combinação de tags, que 
são considerados como blocos que formam cada página por completo.
Essa construção surge com as tags de forma hierarquizada, para que as informações 
sejam compreendidas de forma correta pelos usuários e os devidos pesos (importância) estejam 
corretos. Como acontece em um trabalho no Word, onde colocamos o título maior, com destaque, 
os parágrafos, recuos especí� cos, cabeçalhos, rodapés e qualquer outro tipo de conjunto de 
informações.
Assim como um parágrafo começa com uma letra maiúscula e termina com um ponto 
� nal, as tags do HTML iniciam com uma de abertura <tag> e outra de fechamento </tag>. 
Isso acontece justamente para organizar os elementos das páginas e tornar a codi� cação, ou 
renderização, correta e estruturada (HAROLD, 2010).
Na sequência, temos um exemplo da forma como elementos de HTML podem ser 
elencados estruturalmente:
<div>
<h1>Cabeçalho principal</h1>
<h2>Subtítulo de impacto</h2>
<p>Parágrafo um</p>
<img src=”/” alt=”Image”>
<p>Parágrafo dois com <a href=”https://example.com”>hyperlink</a></p>
</div>
26WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
O primeiro elemento é denominado como uma divisão, utilizado para marcar as seções 
com maiores conteúdos (<div></div>);
No exemplo, também é possível veri� car o cabeçalho, com a tag (<h1></h1>), o subtítulo 
(<h2></h2>), assim como dois parágrafos de textos que utilizam as tags (<p></p>) e uma 
imagem, com a tag (<img>);
Para o segundo parágrafo, possui uma tag distinta (<a></a>), que indica um link e utiliza 
um atributo href que contém a URL de destino.
Já na tag da imagem, é possível veri� car que ela possui dois atributos: src, que apresenta 
o caminho da imagem, e alt, para a descrição dela.
Ainda em termos estruturais, o HTML possui dois tipos de tags que podem ser 
consideradas como principais: os elementos de bloco e elementos em linha, os quais podem ser 
assim descritos:
• Elementos de bloco são tags que se utilizam de todo o espaço antes de começar uma nova 
linha, podendo ser vistos em cabeçalhos e parágrafos, pois formam blocos.
• Elementos em linha são mais econômicos quanto ao espaço, pois se restringem ao 
necessário, sendo utilizados para formatar elementos como links.
Dessa forma, existem tags que todo documento de HTML possui, tais como: <html>, 
<head> e <body> como elementos de bloco. A tag <html></html> seria o elemento que abre e 
fecha todas as tags. A tag <head></head> possui informações como o título, e a tag <body></
body> abrange todos os elementos que são visualizados em uma página.
Além desses, existe uma série de tags utilizadas no HTML, que vão desde a abertura e o 
fechamento de parágrafo, até negrito, itálico, indicação de imagens, links etc.
O importante é conhecer, ao menos de forma básica, os principais códigos ou tags, pois 
com a utilização de sistemas, é possível desenvolver projetos pro� ssionais, mas que eventualmente 
podem apresentar algum tipo de erro, ou necessidade de customizaçãoque seja requerida. E é 
justamente nesse momento que conhecer as tags pode ajudar a resolver essa situação.
Assim, podemos chegar à conclusão de que o HTML é um conjunto de códigos que 
auxiliam na estruturação de sites (Figura 5), algo como um esqueleto, que dá fundamento para 
o que um site poderá se tornar, com o auxílio de outras linguagens complementares, que trazem 
contribuições de movimento, estática e banco de dados, por exemplo, tornando um projeto 
completo e robusto (MILETTO; BERTAGNOLLI, 2014).
Figura 5 - Estrutura de site. Fonte: Freepik (2018).
27WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
O HTML é mantido pelo W3C (World Wide Web), um consórcio de tecnologia que 
articula seu desenvolvimento e o mantém ativo nos navegadores por meio de protocolos 
uni� cadores de linguagem e códigos.
2. CONCEITOS DE CSS
Mais uma sigla? Isso mesmo. Mas não se preocupe! O CSS é uma das linguagens mais 
utilizadas no Webdesign e seu signi� cado é Cascading Style Sheet (em tradução livre, Folhas de 
Estilo em Cascata), e surgiu em 1994, tendo sido criado por Hakon Lie, que tinha como objetivo 
facilitar a criação de sites, uma vez que era necessária uma série de códigos para criar estruturas 
simples, como uma tabela, por exemplo.
Dessa forma, o CSS surgiu para que fosse possível trabalhar com aspectos visuais de 
maneira mais fácil (Figura 6), com a utilização de estilos, parecido com o que fazemos em 
programas de formatação de texto, quando usamos estilos para títulos, parágrafos, tabelas e 
demais itens do arquivo que estivermos desenvolvendo (MILETTO; BERTAGNOLLI, 2014).
O W3C é responsável por uma série de padronizações para a WEB, sendo uma 
organização importante e que pode servir de fonte constante de consulta no que 
diz respeito às linguagens de programação, padronizações e demais aspectos 
relacionados ao bom funcionamento da internet em termos de linguagens.
Para acessar seu conteúdo, é possível verifi car seu site em <https://
www.w3c.br/Home/WebHome/>, onde existe uma variedade de 
informações, mas que em grande parte está em inglês, tendo em 
vista que esse é o idioma ofi cial das linguagens de programação.
Uma vez que o CSS trabalha com os estilos dos objetos, defi nindo como serão 
exibidos no site, temos que ter em mente o conceito de acessibilidade bem 
claro, de forma a garantir que os mais variados tipos de pessoas terão acesso 
às informações do site, como, por exemplo, pessoas com algum tipo de restrição 
visual severa, ou de movimentos dos membros superiores.
28WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
Figura 6 - Estrutura de site. Fonte: Freepik (2019).
Assim, podemos entender que o CSS funciona como uma espécie de editor de estilo para 
o site, enquanto o HTML fornece a estrutura da qual o site precisa. E por isso, existe uma relação 
tão intensa entre as linguagens, pois é fundamental que os sites tenham um bom visual e acesso 
fácil às informações, por meio de uma estrutura sólida e coesa.
Mesmo o CSS não sendo tecnicamente necessário para a criação de sites, ele acabou se 
tornando algo essencial no desenvolvimento de sites, tendo em vista o próprio crescimento da 
internet de forma geral e, consequentemente, das exigências das pessoas com relação ao visual dos 
sites. E isso é fácil de notar, pois quando vemos um site com poucos recursos, ou, por exemplo, 
com fundo branco e textos em preto ou azul, todo estático, com fontes antigas, meio quadradas, 
provavelmente esse site não utiliza CSS, ou ele não foi carregado corretamente. Isso pode ser 
visto no exemplo (Figura 7) de um site antigo, do início da internet (MILETTO; BERTAGNOLLI, 
2014).
Figura 7 - Site do UOL. Fonte: Web Archive (1996).
O que acontecia antes da criação do CSS é que qualquer estilização (customização) no site 
tinha que ser feita separadamente nas marcações do HTML, como plano de fundo, cores do texto, 
do fundo, alinhamentos, e qualquer tipo de informação “diferente”. Já com o CSS, é possível criar 
uma série de estilizações e, assim, utilizá-las em arquivos distintos, tornando o desenvolvimento 
mais ágil e pro� ssional, diminuindo a possibilidade de erros, caso esqueça alguma formatação 
numa parte especí� ca do código.
29WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
Então, podemos entender que, com o CSS, não é preciso informar todas as vezes 
as formatações de um elemento, toda vez que ele aparecer; com os estilos do CSS, isso já � ca 
formatado para o arquivo todo, sempre que esse determinado elemento aparecer, tornando o 
código, de forma geral, mais limpo e seguro de erros (MILETTO; BERTAGNOLLI, 2014).
Além disso, com a possibilidade de se ter vários estilos numa mesma página, como 
acontece ao se utilizar o CSS, é possível gerar uma grande quantidade de personalizações, 
tornando as páginas mais atrativas e de acordo com os objetivos dos projetos. Dentro dos aspectos 
mercadológicos, isso já é uma necessidade imposta pelos usuários às marcas, ou seja, ser cada vez 
mais customizado e em sintonia com suas preferências (Figura 8).
Figura 8 - Diferentes preferências. Fonte: Freepik (2018).
A vantagem do uso do CSS no desenvolvimento de sites em conjunto com o HTML é 
sua característica de leveza, diferente do JavaScript ou de outras linguagens mais complexas e 
pesadas. Com o CSS é possível criar uma experiência aos usuários de forma rica e satisfatória, 
assim como para os desenvolvedores.
Ainda é possível destacar que, com o CSS, é possível desenvolver animações, assim como 
o efeito de parallax e jogos, o que evidencia o potencial dessa linguagem leve e prática, que é 
constante no desenvolvimento de sites contemporâneos e projetos web dos mais diversos.
A sintaxe do CSS é simples e, como a maioria das linguagens, é baseada no idioma inglês, 
por meio da utilização de um conjunto de regras ou normas que regem seu funcionamento. 
Tendo em vista então que o HTML foi projetado para marcações de página, o CSS contribui para 
atribuir estilos a essas marcações.
Sendo assim, o CSS trabalha com declarações em sintaxes simples, que irão funcionar 
como seletores para modi� carem blocos de declaração, como parágrafos, títulos, imagens, 
fundo e demais elementos existentes na página. Assim, ao selecionar um elemento, é necessário 
informar, por meio dessa sintaxe do CSS, o que deseja que aconteça com ele.
É claro que existem regras e a forma correta de realizar tais ações, uma vez que isso visa 
a garantir a ordem e a correta utilização dos comandos e daquilo que irá acontecer sempre da 
mesma forma. Dessa maneira, o seletor aponta para o elemento do HTML que será modi� cado, 
o qual irá receber a ação de um bloco de declaração, que pode ter uma ou mais ordens para o 
elemento, que são separadas por ponto e vírgula (MILETTO; BERTAGNOLLI, 2014).
Todas as declarações do CSS trazem um nome de propriedade e um valor, os quais são 
separados por dois pontos, além de terminar com um ponto e vírgula e ser cercado por chaves. 
Sendo assim, se quisermos estabelecer um determinado estilo aos parágrafos que utilizam a tag 
<p>, poderíamos fazer uma declaração como no exemplo a seguir:
30WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
<style>
p {
color: blue;
text-weight: bold;
}
<style>
Ou ainda, se quiséssemos centralizar e determinar o tamanho e cor diferente, � caria 
assim:
<style>
p {
 text-align: center;
 font-size: 16px;
 color: pink;
}
</style>
Dessa forma, os exemplos apresentados servem para demonstrar como os conceitos do 
CSS funcionam na construção de um site, sendo que, como veremos adiante no conteúdo, na 
atualidade é possível construir projetos inteiros sem ao menos programar uma linha sequer. Mas 
ainda assim, é importante conhecer ao menos os conceitos que estão envolvidos nesse tipo de 
projeto, para poder entender, caso ocorra algum tipo de problema, ou para estabelecer algum 
tipo de diálogo com desenvolvedores programadores.
Portanto, nos próximostrechos do conteúdo, poderemos veri� car formas de como 
desenvolver sites sem ter conhecimentos profundos de programação, mas ainda assim conseguir 
construir projetos pro� ssionais e vencedores.
3. RESPONSIVIDADE
A responsividade é um conceito no Webdesign, relativo à possibilidade de acesso 
pelas pessoas, aos sites em diferentes aparelhos, e suas várias dimensões de telas, de maneira a 
possibilitar que seja possível visualizar todas as informações de maneira correta e satisfatória. 
Assim, podemos de� nir também como um combinado de técnicas aplicadas ao layout dos sites 
para que eles se adaptem aos muitos tamanhos dos dispositivos utilizados pelas pessoas (Figura 
9).
31WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
Figura 9 - Responsividade. Fonte: Freepik (2019).
Essa adaptação deve funcionar para as telas dos computadores, notebooks, tablets 
e smartphones, além dos diferentes tipos de navegadores usados pelas pessoas, levando 
em consideração os sistemas operacionais existentes. Isso é possível de se alcançar, com a 
utilização do HTML e CSS, cuidando da estrutura textual e visual, respectivamente (MILETTO; 
BERTAGNOLLI, 2014).
O objetivo primordial da responsividade é fazer com que o site esteja acessível em termos 
de funcionalidades para o maior número de pessoas possível, melhorando tráfego e relevância na 
internet, podendo converter acessos em negócios ou notoriedade na web. Além disso, é preciso 
ter em mente que a responsividade deve vir acompanhada de uma boa estrutura de conteúdo e 
informações, pois isso faz parte do pacote de interação, ou seja, da experiência do usuário (Figura 
10).
Figura 10 - Boa estrutura de informações. Fonte: Freepik (2018).
Podemos dizer que o design responsivo é relativamente recente, tendo seu início em 
2010. Assim como os aparelhos móveis como conhecemos, é um dos aspectos que vem sendo 
desenvolvido, com os avanços da web, conexão, aparelhos e das próprias linguagens utilizadas no 
desenvolvimento de sites.
32WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
Justamente são esses avanços que ajudaram no desenvolvimento dos sites e da 
responsividade necessária para que os projetos web tenham relevância, uma vez que é importante 
para as empresas e desenvolvedores que os usuários consigam ter acesso fácil a todas as 
informações do site (SILVA, 2018).
Dessa forma, alguns termos são importantes para esse entendimento e caminham junto 
com a responsividade; no caso, podemos destacar a experiência do usuário (User Experience) e 
interface do usuário (User Interface), que contribuem para que o processo de navegação, busca 
e interação com as informações, de um modo geral, sejam realizadas de forma satisfatória pelas 
pessoas na internet (Figura 11).
Figura 11 - UX e UI. Fonte: Freepik (2018).
Este artigo é interessante, pois trata das semelhanças e diferenças entre o UX 
(User Experience) e o UI (User Interface) sob uma perspectiva dos profi ssionais 
que desenvolvem tais técnicas e projetos, o que possibilita o entendimento de 
como podem surgir oportunidades se conhecermos bem a área na qual desejamos 
atuar.
DUPRE, H. Atenção: UX e UI design não são a mesma coisa, 
mas caminham juntos. UX Collective. 24 dez. 2019. Disponível 
em: <https://brasil.uxdesign.cc/ux-e-ui-n%C3%A3o-s%C3%A3o-
a-mesma-coisa-mas-trabalham-juntos-936af57097dc>. Acesso 
em: 17 jun. 2020.
33WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
Assim, podemos também entender o design responsivo de sites e aplicações web, a partir 
de alguns aspectos importantes, como a adaptação do layout das páginas com a resolução da 
tela onde se está visualizando as informações; o redimensionamento automático conforme o 
tamanho da tela dos diversos tipos e especi� cações de aparelhos, de modo a não sobrecarregar 
o processamento dos aparelhos, especialmente dos celulares e tablets; a simpli� cação dos 
elementos como menus e aberturas quando visitados a partir de aparelhos móveis; ocultar partes 
desnecessárias em dispositivos com tela reduzida; adaptação de botões e links para telas com 
touch e geolocalização e mudança de orientação (horizontal e vertical) (Figura 12).
Figura 12 - Posições e formas de segurar o smartphone. Fonte: Freepik (2019).
Todos os aspectos apontados são facilmente justi� cados pela quantidade massiva de 
aparelhos móveis sendo utilizados pelas pessoas no dia a dia, como celulares e tablets, ou mesmo 
os notebooks, que necessitam de sites que sejam processados de forma ágil e rápida, além de ter 
sua estrutura organizada para que as pessoas encontrem as informações rapidamente, ou seja, de 
forma intuitiva, que o caminho seja fácil e rápido para usuários iniciantes e experientes, o que 
não é uma tarefa sempre fácil (SILVA, 2018).
Podemos destacar também mais alguns elementos importantes que contribuem com 
projetos responsivos e, dessa forma, são pontos importantes de se levar em consideração quanto 
ao desenvolvimento dos projetos web de sites, pensando nos usuários e toda a experiência 
que desejamos que as pessoas tenham, no sentido de que retornem e divulguem os sites que 
desenvolvermos.
Dentre os elementos que quero destacar para você, o primeiro é que um site responsivo 
contribui para a melhora de resultados em buscadores, ou seja, melhora o posicionamento em 
motores de busca do site, que é um dos principais métodos para otimizar resultados de acesso 
e relevância na internet para sites. Assim, o SEO (Search Engine Optimization), ou motor de 
otimização de pesquisa, em tradução livre, é um dos principais atributos para que essa otimização 
ocorra (ZEMEL, 2015).
34WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
Outro ponto importante é o de que projetos de sites responsivos precisam de apenas 
uma versão do site, que irá contemplar os diversos dispositivos nos quais ele pode ser acessado e 
visualizado, dispensando a necessidade de se criar uma série de modelos para diferentes tamanhos 
e resoluções de telas, o que, em alguns casos, poderia inviabilizar um projeto, economizando 
tempo, dinheiro, equipe e prevenindo possíveis erros entre versões.
Consequentemente, ter apenas uma versão do site auxilia no gerenciamento do projeto, 
tendo em vista que a mesma versão será usada nos diversos tipos de aparelhos, sendo ajustado 
para funcionar com a mesma e� ciência e estrutura. Havendo a necessidade de se fazer algum tipo 
de atualização, que ela ocorra automaticamente em toda a estrutura e que essas alterações sejam 
acatadas para todos os tipos de aparelhos (ZEMEL, 2015).
Ainda podemos mencionar um outro elemento que é facilmente percebido em grandes 
marcas, a consciência de marca, que é quando as pessoas reconhecem uma unidade visual e 
estrutural na forma como determinada marca se comunica visualmente com as pessoas. A 
responsividade auxilia justamente nesse processo, tornando o site adaptável aos diversos 
tamanhos e resoluções, de forma a manter uma unidade visual da marca para as pessoas, o que 
contribui para que essa consciência de marca seja fortalecida.
Portanto, com todas as características e elementos mencionados, podemos entender 
que a responsividade é um dos fatores mais importantes nos projetos web na atualidade, o 
que possibilitará que usuários possam acessar o conteúdo proposto de praticamente qualquer 
aparelho eletrônico, como computadores, notebooks, tablets e smartphones, e ainda, smartwatches
(celulares/relógios de pulso), assim como em diferentes navegadores.
Ainda falando da responsividade, traçando uma conexão com a UX e UI mencionadas 
anteriormente, é importante entender alguns princípios básicos inerentes ao design de sites na 
perspectiva da atualidade e diversidade de aparelhos móveis. Dessa forma, iremos trazer alguns 
desses princípios, importantes para o design de sites responsivos (ZEMEL, 2015).
Assim, podemos começar com o � uxo, que pode ser de� nido quando as informações 
se adaptam ao formato das telas,em situações em que elas diminuem e o conteúdo preenche os 
espaços de forma mais verticalizada e as informações restantes são acondicionadas para baixo no 
sentido vertical, sendo preciso rolar para acessar o restante do conteúdo.
Um outro princípio é o uso de unidades relativas, que proporcionam ajustes em 
termos de porcentagem aos elementos do site, independentemente do tamanho da tela onde 
está sendo exibido, contribuindo para que as pessoas consigam manter a mesma experiência 
independentemente do aparelho utilizado, reforçando a consciência de marca. Dessa forma, em 
vez de estabelecermos que um determinado objeto ocupará 400px de largura, de� nimos que ele 
ocupará 50% do total da largura, e assim com os demais objetos.
Já os pontos de interrupção são interessantes, pois determinam onde é o limite para que 
informações estejam numa mesma linha, funcionando como uma espécie de quebra de página, 
como ocorre em so� wares de formatação de texto. Assim, por exemplo, se em um formato 
de tela é possível mostrar três colunas numa mesma linha, e em um outro, ocorrer o ajuste 
automaticamente, vale ressaltar que isso deve ser feito com cuidado, para que o conteúdo não 
� que desorganizado.
No desenvolvimento dos sites, é interessante que o conteúdo ocupe toda a largura de telas 
menores, como as dos smartphones, tablets e até mesmo dos notebooks. Mas imagine ocupando 
a largura total de uma televisão de tela grande, tendo em vista que na atualidade temos as smart
tvs. Por isso, um princípio interessante de se utilizar é o de valores mínimos e máximos, fazendo 
com que, por exemplo, a largura de 100% com valores máximos de 1000 pixels signi� que que esse 
determinado objeto irá ocupar a largura da tela até o limite máximo de 1000 pixels.
35WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
Na atualidade, existem negócios que nascem somente digitais e, em alguns casos, por 
in� uência das redes sociais e uso massivo dos smartphones, é possível que se pense em iniciar um 
projeto web pelo layout para mobiles, em vez de desktops. Mas, na prática, não existe uma regra 
de� nida, tendo em vista que, quando o projeto é responsivo, é possível fazer as con� gurações 
necessárias para que o layout se ajuste aos diversos tamanhos e resoluções possíveis (Figura 13).
Figura 13 - Formatos diversos para iniciar um projeto. Fonte: Freepik (2020).
Outro princípio importante de se ter em mente é quanto ao uso das fontes, ou tipogra� as, 
pois isso pode trazer algum tipo de in� uência visual e até mesmo estrutural ao projeto. Assim, 
pode ser uma decisão usar as fontes do sistema, ou fontes da web, cuja diferença está em que as do 
sistema são carregadas automaticamente, pois já fazem parte do sistema operacional do aparelho 
que estiver sendo usado, enquanto as fontes web usam a conexão para carregar, e quanto mais 
tipos forem usados, mais demorado isso pode ser (SILVA, 2018).
Já com relação aos ícones do projeto web que estiver desenvolvendo, caso sejam repletos 
de detalhes e efeitos, o ideal é a utilização de arquivos do tipo bitmap; caso contrário, o uso de 
arquivos vetoriais pode ser mais adequado, tendo em vista os mesmos conceitos utilizados para 
projetos grá� cos com objetivos de impressão, em que os arquivos bitmap são mais pesados para 
o processamento, devido à sua necessidade de resolução, e os vetores mais leves, por basicamente 
serem desenhos com a utilização de pontos e linhas. De qualquer forma, pensando nos projetos 
web, a recomendação é a de que, para imagens bitmap, se opte pelo uso de imagens jpg, png ou 
gif e, para imagens vetoriais, a melhor opção é a extensão svg (ZEMEL, 2015).
Dessa forma, é possível perceber como os conceitos, aspectos e princípios de responsividade 
devem fazer parte dos projetos web que estiver desenvolvendo, de forma a contribuir para 
melhores resultados.
4. SISTEMAS DE GESTÃO DE CONTEÚDOS
Os sistemas de gerenciamento de conteúdos ou CMS (Content Management System, em 
inglês) são plataformas onde é possível criar, gerenciar ou modi� car projetos web e seus conteúdos 
de forma direta no navegador, sem a necessidade de ter conhecimentos em programação. Ainda 
com esse tipo de conhecimento, é possível realizar customizações além das disponíveis e para 
casos especí� cos, o que não ocorre com tanta frequência e, na maioria dos casos, é possível 
atender com soluções já existentes (JENNER, 2019).
36WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
Em geral, os CMS contam com interfaces grá� cas que contribuem para que o gerenciamento 
e modi� cações dos projetos sejam feitos de maneira ágil e intuitiva, possibilitando que você crie, 
edite e realize uma série de alterações com a utilização de conteúdos diversos, como imagens, 
vídeos, textos, de modo a construir os layouts e estruturas dos sites (Figura 14). Entre os mais 
conhecidos no nosso contexto, podemos destacar o Wordpress, Joomla, Magento, Drupal e Wix 
(JENNER, 2019).
Figura 14 - CMS (Content Management System, em inglês). Fonte: Freepik (2019).
Os CMS servem para contribuir para uma maior democratização no desenvolvimento 
de sites, tornando possível essa tarefa para pessoas que não saibam programar, ou que ainda 
estejam aprendendo. Fazem com que toda a estrutura de códigos seja montada de forma grá� ca 
pelos usuários, além de possibilitar e facilitar uma série de funções e tarefas por meio de suas 
ferramentas e menus de opções, que contam com possibilidades gratuitas e pagas e vão de acordo 
com as necessidades de cada projeto (JENNER, 2019).
Portanto, toda a estrutura necessária para que um site funcione corretamente e permita 
a interação e uma boa experiência aos usuários é realizada de forma automatizada pelo sistema. 
Assim, não é necessário que o desenvolvedor domine os códigos de HTML para a estruturação do 
site, do CSS, para trazer uma boa aparência, nem tampouco de PHP, JavaScript, Python, dentre 
outras relacionadas aos bancos de dados (Figura 15).
Figura 15 - Diversas linguagens de programação. Fonte: Freepik (2020).
37WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
Os sistemas se encarregam da execução de tais atributos, tornando possível ao 
webdesigner se dedicar de forma integral ao conteúdo, estrutura e qualidade visual para que, 
assim, a experiência dos usuários seja a melhor possível, tornando as tarefas e responsabilidades 
compartilhadas e possibilitando maior agilidade e e� ciência no desenvolvimento de projetos web.
De maneira geral, os CMS funcionam com a utilização de editores de conteúdo, para a 
criação das páginas, posts (notícias ou reportagens), lojas virtuais e demais conteúdos, em que 
é possível realizar a customização por meio de menus com funções pré-de� nidas e nos quais 
podem ser adicionadas novas possibilidades à medida que novos projetos são desenvolvidos, 
entre opções gratuitas e pagas.
No geral, os CMS trabalham com a possibilidade de adicionar uma série de funcionalidades, 
como temas, plugins e extensões, os quais irão in� uenciar a forma estética, estrutural e funcional 
dos sites e servem para cada tipo de objetivo. Portanto, os CMS trazem consigo as funções básicas 
para a criação de páginas, posts e inclusão de imagens e textos, e à medida que for necessária a 
inclusão de funções mais elaboradas, é quando se faz necessária a utilização dos temas, plugins e 
extensões, para que os projetos ganhem consistência naquilo a que se propõem.
Entre os CMS mais populares, podemos destacar o Wordpress, Joomla, Magento, Drupal 
e Wix, que em termos gerais, possuem basicamente o mesmo tipo de estrutura, funcionando 
de forma que seja possível realizar a criação de projetos de sites, sem a necessidade de ter 
conhecimentos de programação, além de conter alguns aspectos interessantes para determinadas 
áreas nas quais você esteja desenvolvendo algum tipo de conteúdo (JENNER, 2019).
Dentre os mais utilizados, o Wordpress (Figura 16) é o que mais aparece nos projetos 
atualmente,com algo em torno de 30% dos sites ativos na web (BUILT WITH, 2020), o que 
demonstra sua força, que vem justamente da imensa possibilidade de temas e plugins para 
utilização e criação de sites para os mais diversos segmentos, como lojas, portfólios, instituições, 
pro� ssionais liberais etc. Conta ainda com ferramentas gratuitas e pagas, o que gera uma 
possibilidade interessante em termos de desenvolvimento e mesmo de suporte (JENNER, 2019).
Figura 16 - Site do Wordpress. Fonte: Wordpress (2020).
Já o Joomla (Figura 17) é um misto entre o Wordpress e o Drupal, no sentido de ser 
fácil de se trabalhar, contando com boa estrutura de suporte, formada por uma comunidade de 
desenvolvedores que auxiliam em dúvidas, além de possuir uma série de módulos para a criação 
de sites de comércio virtual (JENNER, 2019).
38WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
Figura 17 - Site do Joomla. Fonte: Joomla (2020).
No Magento (Figura 18), é possível criar e desenvolver plataformas de e-commerce e é 
utilizado por empresas como Samsung, Nike, Ford, dentre outras, justamente pela possibilidade 
de se criar lojas on-line com funções complexas, além de avançadas funcionalidades como banco 
de dados, trajetória de compras de produtos, entregas, controle de estoque e outras aplicações.
Figura 18 - Site do Magento. Fonte: Magento (2020).
O Drupal (Figura 19) é um CMS mais utilizado no meio corporativo, devido à necessidade 
especí� ca relacionada à segurança das informações e tempo de resposta das ações. Dessa forma, 
é possível entender essa necessidade por causa das empresas que o utilizam, como NASA, Tesla, 
Sony Music e Nokia (JENNER, 2019).
Figura 19 - Site do Drupal. Fonte: Drupal (2020).
39WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
E para � nalizar, o Wix (Figura 20) pode ser considerado um híbrido entre CMS e serviço 
de hospedagem e registro de domínio, gerando possibilidades próximas ao que os sistemas já 
citados oferecem, com a vantagem de poder realizar a hospedagem e registro do domínio no 
mesmo local, o que pode ser ruim, dependendo do ponto de vista, mas ainda assim, é uma opção 
existente no mercado (JENNER, 2019).
Figura 20 - Site do Wix. Fonte: Wix (2020).
Dessa forma, foi possível veri� car uma série de opções que podem ser utilizadas no 
desenvolvimento de nossos projetos, cada uma com algumas particularidades que precisam 
ser veri� cadas, mas que, de maneira geral, atendem bem a necessidade de criação de sites 
e� cientemente.
A indicação para esta unidade é uma palestra do TED Talks 
intitulada: O que realmente é a internet?, de Andrew Blum, a qual 
trata das conexões sob uma perspectiva mais fi losófi ca e nos 
ajuda a entender que o desenvolvimento de um site pode trazer 
uma série de signifi cados para todas as pessoas envolvidas 
e nos serve como fonte de conhecimento e refl exão. O vídeo 
tem duração aproximada de 12 min, pode ser acessado de 
forma gratuita e está disponível em: <https://www.ted.com/talks/andrew_blum_
discover_the_physical_side_of_the_internet?language=pt-br#t-700002>.
40WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
CONSIDERAÇÕES FINAIS
Nesta unidade, foi possível conhecer e entender os principais aspectos que norteiam os 
assuntos relacionados aos conceitos de HTML, CSS, responsividade e CMS (Sistema de Gestão 
de Conteúdos), os quais irão servir para todo o desenvolvimento de projetos web de sites.
Assim, tais conceitos devem ser utilizados e, se for necessário, aprofundados à medida 
que você tiver mais demandas especí� cas de projetos web, como, por exemplo, das linguagens 
HTML e CSS.
Da mesma forma, é imprescindível que você tenha os conceitos de responsividade bem 
claros em sua mente, assim como em seus projetos, para que eles garantam uma boa experiência 
aos usuários que acessarem esses sites, como também para quem contratar para desenvolvê-los.
Em um outro aspecto, conhecer e saber como funcionam os CMS disponíveis no mercado 
ajuda a escolher aqueles que melhor servirão aos projetos que forem desenvolvidos, possibilitando 
melhores resultados.
4141WWW.UNINGA.BR
UNIDADE
03
SUMÁRIO DA UNIDADE
INTRODUÇÃO ............................................................................................................................................................42
1. DOMÍNIO E REGISTRO WEB ...............................................................................................................................43
2. HOSPEDAGEM ......................................................................................................................................................49
3. TIPOS DE SITES....................................................................................................................................................52
4. RECURSOS PARA PROJETOS WEB ....................................................................................................................57
CONSIDERAÇÕES FINAIS ........................................................................................................................................61
SUBSÍDIOS PARA PROJETOS WEB
PROF. ME. VAGNER BASQUEROTO MARTINS
ENSINO A DISTÂNCIA
DISCIPLINA:
WEBDESIGN
42WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 3
EDUCAÇÃO A DISTÂNCIA
INTRODUÇÃO
Nesta unidade, iremos tratar de subsídios essenciais para todo o desenvolvimento de 
projetos web, com foco nos sites, na medida em que tais elementos podem fazer a diferença para 
que os projetos sejam profi ssionais, trazendo mais resultados aos contratantes, assim como para 
os usuários.
Tais possibilidades vão desde a interação e experiência dos usuários, até a efetivação de 
negócios por parte das empresas que utilizam sites mais contemporâneos e dotados de recursos 
mais elaborados e profi ssionais. 
Dessa forma, utilizar-se de recursos adicionais é um dos caminhos mais explorados por 
profi ssionais da área, que acaba sendo uma das características mais evidentes do Design de 
modo geral, que é a interdisciplinaridade nessa área do conhecimento.
43WWW.UNINGA.BR
W
EB
DE
SI
GN
| U
NI
DA
DE
 3
EDUCAÇÃO A DISTÂNCIA
1. DOMÍNIO E REGISTRO WEB
Quando as pessoas pensavam no nome de uma empresa, usualmente levavam em conta 
algo que pudesse remeter para a área de atuação dela, ou uma lembrança relacionada ao nome 
dos proprietários, ou sobre algum tipo de objetivo e mesmo uma palavra que indique o que a 
empresa faz.
E isso é feito até hoje, e não é um problema, pois é um conceito testado e comprovadamente 
vencedor ao longo da história, mas que sofre uma interferência importante vinda de quanto 
determinada marca é exposta ao público em geral, da qualidade de seus produtos ou serviços, 
assim como com relação à experiência que as pessoas têm com essa marca.
Assim, é fácil perceber que uma boa escolha de nome é importante, pois isso irá trazer 
uma série de impactos que podem se tornar um problema em algum ponto da caminhada da 
empresa, podendo até mesmo ser um limitante de seu crescimento, gerando algum tipo de 
problema, como a necessidade de troca de nome depois de algum tempo de existência (BEAIRD; 
GEORGE, 2016).
Mas a� nal de contas, o que isso tem a ver com a criação e o registro de domínios na 
internet? A resposta pode ser simplesmente: tudo! Tendo em vista que, para que possamos ter um 
site operando na internet, é necessário que ele tenha um domínio e que esse nome seja registrado.
Esse nome, ou como é denominado tecnicamente, o domínio, deve existir e ser registrado, 
pois irá servir como a identidade da empresa, instituição ou pro� ssional, na internet. É por esse 
nome que as pessoas irão procurar esse determinado negócio (HAROLD, 2010).
Dessa forma, sem isso, a criação do site pode � car inviável, pois o nome, além de ser uma 
obrigação técnica, traz consigo uma série de signi� cados para as pessoas, que dizem respeito ao 
ramo de atividade, potencial, seriedade, solidez e con� ança