42
Aula 1 – Layout Conceitos Prof. Sergio Luiz da Silveira E-mail: [email protected]

Aula 01 layout

Embed Size (px)

Citation preview

Page 1: Aula 01   layout

Aula 1 – LayoutConceitos

Prof. Sergio Luiz da Silveira

E-mail: [email protected]

Page 2: Aula 01   layout

Aula 1 – LayoutVisã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.

Page 3: Aula 01   layout

Aula 1 – LayoutVisã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.

Page 4: Aula 01   layout

Aula 1 – LayoutVisã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.

Page 5: Aula 01   layout

Aula 1 – LayoutO 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.

Page 6: Aula 01   layout

Aula 1 – LayoutO 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;

Page 7: Aula 01   layout

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

Page 8: Aula 01   layout

Aula 1 – LayoutO 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.

Page 9: Aula 01   layout

Aula 1 – LayoutO 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.

Page 10: Aula 01   layout

Aula 1 – LayoutComo 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:

Page 11: Aula 01   layout

Aula 1 – LayoutComo 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.

Page 12: Aula 01   layout

Aula 1 – LayoutBriefing 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.

Page 13: Aula 01   layout

Aula 1 – LayoutBriefing 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?

Page 14: Aula 01   layout

Aula 1 – LayoutPesquisa de mercado e análise da concorrência1. Quais são os principais concorrentes do

site?2. O que os concorrentes fazem na internet?3. Para quem estamos falando?

Page 15: Aula 01   layout

Aula 1 – LayoutPesquisa 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.

Page 16: Aula 01   layout

Aula 1 – LayoutPesquisa 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:

Page 17: Aula 01   layout

Aula 1 – LayoutPesquisa 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;

Page 18: Aula 01   layout

Aula 1 – LayoutPesquisa 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.

Page 19: Aula 01   layout

Aula 1 – LayoutBrainstorm 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.

Page 20: Aula 01   layout

Aula 1 – LayoutBrainstorm 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.

Page 21: Aula 01   layout

Aula 1 – LayoutDefiniçã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.

Page 22: Aula 01   layout

Aula 1 – LayoutCriaçã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.

Page 23: Aula 01   layout

Aula 1 – LayoutCriaçã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.

Page 24: Aula 01   layout

Aula 1 – LayoutProduçã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:

Page 25: Aula 01   layout

Aula 1 – LayoutProduçã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.

Page 26: Aula 01   layout

Aula 1 – LayoutProduçã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.

Page 27: Aula 01   layout

Aula 1 – LayoutWebmarketing – 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.

Page 28: Aula 01   layout

Aula 1 – LayoutOpções de Webmarketing

a) Cadastramento em sistemas de buscas;b) E-mail de marketing;c) Banners;d) Janela pop-up;e) Publicidade multimídia;

Page 29: Aula 01   layout

Aula 1 – LayoutOpçõ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.

Page 30: Aula 01   layout

Aula 1 – LayoutOpçõ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

Page 31: Aula 01   layout

Aula 1 – LayoutOpçõ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:

Page 32: Aula 01   layout

Aula 1 – LayoutOpções de Webmarketing

Page 33: Aula 01   layout

Aula 1 – LayoutOpções de WebmarketingResumindo

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

Page 34: Aula 01   layout

Aula 1 – LayoutOpçõ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.

Page 35: Aula 01   layout

Aula 1 – LayoutOpçõ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:

Page 36: Aula 01   layout

Aula 1 – LayoutOpções de Webmarketing

c) Banners: Estático; Animado; Interativo; Banners expansíveis.

Page 37: Aula 01   layout

Aula 1 – LayoutOpçõ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

Page 38: Aula 01   layout

Aula 1 – LayoutOpçõ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

Page 39: Aula 01   layout

Aula 1 – LayoutOpçõ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).

Page 40: Aula 01   layout

Aula 1 – LayoutOpçõ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.

Page 41: Aula 01   layout

Aula 1 – LayoutREFERENCIAS:

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

Page 42: Aula 01   layout

Aula 1 – Layout

FIM!