Conceitos sobre Design na web, o que é um web designer, criação de paginas web

1. Aula 1 – Layout
Conceitos
Prof. Sergio Luiz da Silveira
E-mail: Prof.s3rgio@gmail.com

2. Aula 1 – Layout
Visão Geral do Design e da Web
Designer Gráfico é o profissional que
mais se aproxima da realidade do Web
Designer.
O Designer Gráfico deve conhecer a
textura e cor dos papeis, assim como os
processos de impressão.

3. Aula 1 – Layout
Visão Geral do Design e da Web
O Web Designer, por sua vez, precisa
conhecer bem o computador e raciocinar do
ponto de vista de produção.
Na busca pela harmonia visual, o
designer precisa compatibilizar os recursos
técnicos com as necessidades visuais e de
comunicação que determinam todo o processo
de criação.

4. Aula 1 – Layout
Visão Geral do Design e da Web
Por isso a WEB é considerada uma mídia
interativa, pois o usuário participa também da
criação do site.

5. Aula 1 – Layout
O que é o Web Designer?
Para definir o que faz um web designer, é
necessário explicar o que é design.
Design significa projeto/desenho, mas o
seu verdadeiro sentido é arte aplicada.

6. Aula 1 – Layout
O que é o Web Designer?
Para ser um bom designer, é necessário
ter algumas qualificações:
 Capacidade de observação;
 Conhecimento de alinhamento;
 Conhecimento de proporção;
 Conhecimento de contraste;

7. Aula 1 – Layout
O que é o Web Designer?
 Conhecimento de legibilidade;
 Conhecimento de usabilidade;
 Noção de unidade;
 Conhecimento de impacto;
 Conhecimento de harmonia entre elementos.

8. Aula 1 – Layout
O que é o Web Designer?
Qualquer pessoa pode trabalhar como
designer, pois não existe uma formação
especifica para a profissão.
Ser um designer é justamente fugir do
padrão.

9. Aula 1 – Layout
O que é o Web Designer?
Os verdadeiros web designers
pesquisam, estudam, fazem e refazem layouts
pesquisas sobre o público-alvo, concorrentes,
mercado.
Para ser um bom designer é preciso
aprender a manusear as ferramentas, mas
também saber o que fazer e como fazer.

10. Aula 1 – Layout
Como desenvolver um design eficiente?
Quando um cliente contrata um
profissional para desenvolver um site, ele
deseja ver resultados e não apenas algo bonito
e que se movimente.
Afinal, para o cliente o site também é um
investimento. A criação do site é apenas uma
das etapas do desenvolvimento, veja as outras:

11. Aula 1 – Layout
Como desenvolver um design eficiente?
 Briefing (informações) com o cliente;
 Pesquisa de mercado e analise da
concorrência;
 Brainstorm (chuva de idéias);
 Definição do conceito e funcionalidades;
 Criação;
 Produção;
 Webmarketing – marketing e divulgação.

12. Aula 1 – Layout
Briefing com o cliente
Briefing significa “instruções”. É o ponto
de partida para o sucesso de um projeto: um
resumo claro e objetivo com todas as
informações necessárias para orientar a
construção do site.
O Briefing pode ser adquirida com o
cliente através de reuniões ou prontas.

13. Aula 1 – Layout
Briefing com o cliente
Algumas informações a serem recolhidas:
1. O que a empresa faz?
2. Quais seus produtos?
3. O que a levou a desenvolver um site?

14. Aula 1 – Layout
Pesquisa de mercado e análise da
concorrência
1. Quais são os principais concorrentes do
site?
2. O que os concorrentes fazem na internet?
3. Para quem estamos falando?

15. Aula 1 – Layout
Pesquisa de mercado e análise da
concorrência
Pesquisas são extremamente
importantes, pois orientam o cliente e o web
designer sobre o que está acontecendo e
possibilitam desenvolver um projeto bastante
aperfeiçoado.

16. Aula 1 – Layout
Pesquisa de mercado e análise da
concorrência
A Pesquisa de Mercado identifica o perfil
do publico alvo (quem se pretende atingir) e
esclarece os diferenciais competitivos entre
sites concorrentes.
Os métodos para coleta de dados variam
de acordo com a disponibilidade financeira da
empresa. Caso a pesquisa de mercado seja
inviável há outras alternativas:

17. Aula 1 – Layout
Pesquisa de mercado e análise da
concorrência
 Visitar os sites concorrentes e observar suas
características;
 Estudar as estatísticas disponibilizadas por
alguns sites de hospedagem;

18. Aula 1 – Layout
Pesquisa de mercado e análise da
concorrência
Estes serviços revelam informações
importantes como:
 O numero de visitas e paginas acessadas;
 Os dias e horários das visitas;
 Quem são os visitantes;
 Como chegaram até o site;
 Os navegadores utilizados.

19. Aula 1 – Layout
Brainstorm ou “Chuva de ideias”
A partir do BRIEFING e DAS
PESQUISAS, o web designer analisa as
informações e utiliza o brainstorm para gerar
estratégias.
Brainstorm é uma técnica que estimula a
criatividade e a busca de soluções.

20. Aula 1 – Layout
Brainstorm ou “Chuva de ideias”
A sua principal características é a
ausência de critica e julgamento.
A técnica consiste em expor um problema
e sugerir soluções, sem compromisso, ou seja
sem pensar em como fazer.
As sugestões devem ser escritas e,
depois de um tempo, repensadas e filtradas.

21. Aula 1 – Layout
Definição do conceito e funcionalidades
Com o resultado do brainstorm, define-
se as principais características do site,
formando uma unidade com todas as peças
(sites, banners, menus pop-up etc.), bem como
a sua funcionalidade e o modo de interação do
usuário com o site.

22. Aula 1 – Layout
Criação
O processo de criação é o momento de
dar forma ao que foi idealizado. Esta etapa
exige do web designer conhecimentos práticos
e teóricos para a criação do layout do site, ou
seja, do aspecto visual.
É importante ressaltar que não existe um
padrão estético.

23. Aula 1 – Layout
Criação
O que é belo para um, pode não ser para
outro.
Por isso, ao criar um site devem ser
seguidos princípios básicos relativos à estética
e à arquitetura das informações, para atrair a
atenção da maioria dos visitantes.

24. Aula 1 – Layout
Produção
Para iniciar a produção do conteúdo o
layout do site deve ser aprovado pelo cliente.
O layout é o aspecto visual das paginas e
deve apresentar:

25. Aula 1 – Layout
Produção
1. Como serão as paginas;
2. A barra de navegação;
3. O que acontecerá ao clicar em certos
lugares;
4. Qual será a tipologia utilizada e etc.
Nessa etapa é importante oferecer
mais de uma opção de escolha para o
cliente.

26. Aula 1 – Layout
Produção
Com base no layout aprovado, inicia-
se a Produção de Conteúdo. Nessa etapa
ocorrerá:
1. A produção das paginas do site e seus
textos;
2. A definição das imagens, animações, lijnks
etc;
3. A revisão, correção de tudo;
4. Publicação do site.

27. Aula 1 – Layout
Webmarketing – Marketing e Divulgação
É o uso de recursos, ações e estratégias
de Marketing, visando à divulgação do site.
Esta etapa é importante para conquistar
visitantes (clientes) rapidamente.
Há diversas opções de divulgação de um
site, mas a maioria exige um investimento
financeiro. Veja algumas das opções de
webmarketing.

28. Aula 1 – Layout
Opções de Webmarketing
a) Cadastramento em sistemas de buscas;
b) E-mail de marketing;
c) Banners;
d) Janela pop-up;
e) Publicidade multimídia;

29. Aula 1 – Layout
Opções de Webmarketing
a) Cadastramento em sistemas de buscas:
As ferramentas de buscas estão entre as
paginas mais acessadas.
O sistema funciona como um grande
banco de dados com milhões de paginas
cadastradas e divididas em categorias.

30. Aula 1 – Layout
Opções de Webmarketing
a) Cadastramento em sistemas de buscas:
A maioria dos sistemas de buscas, ao
fornecer a lista de resultados exibe o primeiro
paragrafo de cada pagina.
Por isso, o primeiro paragrafo do site
deve conter as informações mais importantes

31. Aula 1 – Layout
Opções de Webmarketing
a) Cadastramento em sistemas de buscas:
Atualmente existe uma grande variedade
de sistemas de buscas, porém os mais
famosos são:

32. Aula 1 – Layout
Opções de Webmarketing

33. Aula 1 – Layout
Opções de Webmarketing
Resumindo
Atualmente, o Google é reconhecido como a ferramenta de busca
mais abrangente da internet, seu algoritmo revolucionou a rede e é o
primeiro a experimentar os conceitos da Web Semântica.
No entanto, isto não quer dizer que ele é a melhor opção para
todos os casos, um novo serviço pode ser especializado ao tema que você
tem em mente e retornar exatamente o que você procura.
A ideia é variar suas fontes, mesmo que seja apenas para
comprovar que determinado serviço não presta!
Leia mais em: http://www.tecmundo.com.br/web/2018-o-google-
nao-e-o-unico-conheca-outros-buscadores.htm#ixzz2zS4tlqLW

34. Aula 1 – Layout
Opções de Webmarketing
b) E-mail de marketing:
Consiste em uma campanha, na qual
mensagens publicitarias são enviadas por meio
de e-mails.
Costuma obter resultados imediatos, pois
é um tipo de divulgação totalmente
direcionados para um publico alvo que solicitou
ser informado de determinados assuntos.

35. Aula 1 – Layout
Opções de Webmarketing
c) Banners:
É o principal meio de divulgação de um
website. Em português, BANNER significa
FAIXA e atualmente se refere a um anuncio
colocado em paginas da web com animações e
um link para a pagina do anunciante.
Existem diversos tamanhos de banners.
Os principais são:

36. Aula 1 – Layout
Opções de Webmarketing
c) Banners:
 Estático;
 Animado;
 Interativo;
 Banners expansíveis.

37. Aula 1 – Layout
Opções de Webmarketing
c) Banners:
As dimensões dos banners são
padronizadas:
 Full Banner  468 x 60 pixels
 Half Banner  234 x 60 pixels

38. Aula 1 – Layout
Opções de Webmarketing
c) Banners:
 Botão Quadrado  125 x 125 pixels
 Botão 1  120 x 90 pixels
 Botão 2  120 x 60 pixels
 Minibotão  88 x 31 pixels

39. Aula 1 – Layout
Opções de Webmarketing
d) Janela pop-up:
Janela flutuante que é aberta quando
entramos em uma pagina da web.
Comum em campanhas curtas, este tipo
de divulgação costuma ser um incomodo para a
maioria dos visitantes, por isso possui a
desvantagem de ser o maior alvo de programas
que barram anúncios (anti-popups).

40. Aula 1 – Layout
Opções de Webmarketing
e) Publicidade multimídia:
Esta publicidade utiliza som e vídeo e
interage com o conteúdo da pagina à qual está
vinculada.

41. Aula 1 – Layout
REFERENCIAS:
 O profissional de Web Designer/ Costa,
Jaques Grinberg, 2ª Edição – São Paulo: Ed
Tecnologia de ensino em Computação, 2007
 Imagens Google , 20/04/2014 as 15:00;
 Editoração Professor Sergio Luiz da Silveira
– Bacharel Sistemas de Informação

42. Aula 1 – Layout
FIM!