SlideShare una empresa de Scribd logo
1 de 14
Trabalho para a disciplina  de AI  Realizado por:  Samuel Ferreira nº 15 Teotónio Leiras nº 16
O que é Webdesign? Webdesign é uma vertente do Design dirigida para a realização de um ambiente gráfico para um Site na Web. Existe um leque enorme de programas usados pelos webdesigners. Para construção do código, existe o Dreamweaver, na parte visual, os editores gráficos vetoriais CorelDraw ou  Illustrator, de bitmap temos o Photoshop ou  o Fireworks. Para animações e recursos dinâmicos, o Flash é geralmente utilizado.
A imagem do site é um elemento fundamental para causar logo uma chamada de atenção por parte do público. Aspectos importante a ter em conta antes de apresentarmos a imagem do nosso site: Tema do site O publico Alvo Combinação de cores Tamanho de cada banner, botão, outros elementos graficos… Se vamos fazer um site Animado ou Estático A Imagem
A imagem deve ser adequada ao tema do site, por exemplo se temos um site sobre culinária concerteza não vamos realizar, ou pedir para que alguém realize um template com aspecto gótico ou metálico… Deve também ser adequada ao publico destinado se camadas mais jovens ou mais adultas; Não devemos ainda de nos esquecer que a combinação de cores é muito importante… o nosso site não pode ser uma “caixa de guaches”; Devemos também atender aos tamanhos dos banners, botões ou outros elementos gráficos de forma a criarmos um trabalho organizado… O dinamismo do site também tem grande influência sobre o utilizador devemos fazer um design de forma a que seja fácil de ‘utilizar’.
Colocar o nome e o logótipo em todas as páginas e fazer no logo um  link  para a página inicial (excepto na própria página inicial onde o logotipo não deve jamais ter um  link  para a própria página).  Disponibilizar uma opção de pesquisa se o site tiver mais de 100 páginas.   Escrever  cabeçalhos e títulos simples e directos que expliquem claramente qual o conteúdo da página e que faça sentido quando é lido fora do contexto desta, através de uma busca.   Estruturar a página para facilitar a pesquisa e ajudar os utilizadores a ignorar blocos ‘maçadores’ que a página pode conter.  Algumas ‘regras’
Em vez de colocar tudo sobre um produto ou um assunto numa única e infinita página, deve-se utilizar hipertexto para estruturar o espaço disponível na página inicial que disponibiliza uma visualização e várias páginas secundárias que focalizam-se no seu tema específico. O objectivo é permitir aos utilizadores evitar desperdiçar tempo nos sub-temas que não lhes interessam.   Usar fotografias do tema, mas evitar páginas cheias dessas mesmas fotografias. Deve-se então ter uma pequena fotografia de cada assunto numa página individual e fazer um link dessa fotografia para uma ou mais fotografias de maior dimensão que mostre mais detalhes adequados às necessidades dos utilizadores. Esta situação varia de acordo com o tipo de tema do site. Alguns temas podem necessitar de fotografias com zoom ou rotativas.
Utilizar uma imagem reduzida e relevante quando se preparam pequenas fotografias e imagens: em vez de simplesmente redimensionar a imagem original para uma pequena e ilegível fotografia, deve-se fazer um zoom dos detalhes mais relevantes e utilizar uma solução combinada de corte e redimensionamento.   Utilizar link's com títulos para permitir ao utilizador, visualizar antecipadamente para onde se encaminhará cada link antes de clicar.    
A Cor: A cor é um elemento fundamental no Webdesign, pois é dos elementos que mais caracteriza o ‘estilo’ do site. A cor deve sempre ser subordinada consoante o tema do site… por exemplo se temos um site sobre natureza usar tons de verde. A cor deve ser combinada em tons que condigam ente si. Como por exemplo:
Quando estamos a realizar um template, temos sempre que ter em conta o publico alvo do nosso trabalho, de forma a realizar um trabalho adequado á idade, estatuto social, etc… Publico Alvo Alguns exemplos do publico alvo: Site para um politico: utilizar tema associado ao mesmo, tendo em conta o publico que o visitará será maioritariamente adulto… Site para um desportista: utilizar tema associado ao mesmo, tendo em conta que o será visitado por gente interessada em desporto… como jovens e outros desportistas. Site para uma modelo: utilizar tema associado ao mesmo, tendo em conta que será visitado maioritariamente por interessados em moda.
WEB 2.0: Cada vez mais vemos sites com aposta em novas tecnologias, cada vez mais dinamicos, rápidos e user-friendly. A Web 2.0 representa a segunda geração de serviços que a Internet tem para dispor aos utilizadores. A tecnologia mais usada na Web 2.0 é a programação web em Ajax, oriunda do javascript que é usado em sites como Gmail, Netvibe, etc...  Vou falar de três dos principais sites Web 2.0, o Gmail, o famoso Digg e o YouTube.  Dinamismo do Site
Gmail, um serviço powered by google... O Gmail veio revolucionar a Internet no que toca a caixas de correio electrónico. Com uma interface rápida e fácil de usar, o Gmail é um serviço de caixa de correio electrónico inicialmente com cerca de 2 GB de espaço que de momento tem cerca de mais 1GB , que permite ao utilizador uma rápida gestão de e-mails. Pode enviar e-mails, verificar e-mails, eliminar e-mails sem ter de esperar que uma nova página carregue. Com o uso da tecnologia Ajax, o Gmail permite fazer todas estas acções apenas com um simples load de página. Este serviço é hoje a escolha da maior parte dos internautas por todo o mundo, que apesar de já ter bastante tempo, ainda continua na versão beta.
YouTube... o poder da Web 2.0 Quem de nós nunca viu um video do YouTube? Practicamente todos os internautas viram... O YouTube foi o site que mais revolucionou a internet no que fala à multimidia. É possível hoje, graças ao YouTube, ter acesso a uma vasta e quase infinita base de dados de vídeos, enviados pelos utilizadores.  Este site foi recentemente comprado pelo Google, no entanto trabalha como serviço de conta própria. Este site bateu o recorde dos recordes no que toca ao site com maior investimento no mundo.
Digg... o social bookmarking... Trata-se apenas de um dos maiores social bookmarking que a Internet conheceu. A pratica de troca de links na web virou moda e o Digg veio revolucionar a forma como podemos partilhar os links. O digg permite aos utilizadores enviarem links com artigos e submeterem-nos a votos, sendo assim possível partilhar as noticias mais recentes do mundo.
 

Más contenido relacionado

La actualidad más candente

Trabalho marketing digital escrito
Trabalho marketing digital escritoTrabalho marketing digital escrito
Trabalho marketing digital escrito682000
 
web 2.0 - A Internet VIVA!
web 2.0 - A Internet VIVA!web 2.0 - A Internet VIVA!
web 2.0 - A Internet VIVA!nrtejacarei
 
Wordpress SEO - Muito além de plugins
Wordpress SEO - Muito além de pluginsWordpress SEO - Muito além de plugins
Wordpress SEO - Muito além de pluginsFabio Ricotta
 
Trabalho Tópicos Especias PUC - Coreu 2011
Trabalho Tópicos Especias PUC - Coreu 2011Trabalho Tópicos Especias PUC - Coreu 2011
Trabalho Tópicos Especias PUC - Coreu 2011Lucas Quintão
 
SEO - Colocando um site em primeiro lugar no Google
SEO - Colocando um site em primeiro lugar no GoogleSEO - Colocando um site em primeiro lugar no Google
SEO - Colocando um site em primeiro lugar no GoogleRafael Lima
 
Aprenda a fazer um blog!
Aprenda a fazer um blog!Aprenda a fazer um blog!
Aprenda a fazer um blog!educomuspblog
 
Ferramentas para trabalho colaborativo
Ferramentas para trabalho colaborativoFerramentas para trabalho colaborativo
Ferramentas para trabalho colaborativoPaula Lopes
 
Gestão de Conteúdos com Aplicações Baseadas na Web
Gestão de Conteúdos com Aplicações Baseadas na WebGestão de Conteúdos com Aplicações Baseadas na Web
Gestão de Conteúdos com Aplicações Baseadas na WebCatarina Amorim
 
10 dicas de SEO para Wordpress
10 dicas de SEO para Wordpress10 dicas de SEO para Wordpress
10 dicas de SEO para WordpressRodrigo Simoni
 
Html - capitulo 04
Html - capitulo 04Html - capitulo 04
Html - capitulo 04Alvaro Gomes
 

La actualidad más candente (16)

Portais E Websites
Portais E WebsitesPortais E Websites
Portais E Websites
 
Trabalho marketing digital escrito
Trabalho marketing digital escritoTrabalho marketing digital escrito
Trabalho marketing digital escrito
 
web 2.0 - A Internet VIVA!
web 2.0 - A Internet VIVA!web 2.0 - A Internet VIVA!
web 2.0 - A Internet VIVA!
 
SEO para WordPress
SEO para WordPressSEO para WordPress
SEO para WordPress
 
Wordpress SEO - Muito além de plugins
Wordpress SEO - Muito além de pluginsWordpress SEO - Muito além de plugins
Wordpress SEO - Muito além de plugins
 
Sessão3
Sessão3Sessão3
Sessão3
 
Trabalho Tópicos Especias PUC - Coreu 2011
Trabalho Tópicos Especias PUC - Coreu 2011Trabalho Tópicos Especias PUC - Coreu 2011
Trabalho Tópicos Especias PUC - Coreu 2011
 
SEO - Colocando um site em primeiro lugar no Google
SEO - Colocando um site em primeiro lugar no GoogleSEO - Colocando um site em primeiro lugar no Google
SEO - Colocando um site em primeiro lugar no Google
 
Blog 2
Blog 2Blog 2
Blog 2
 
Aprenda a fazer um blog!
Aprenda a fazer um blog!Aprenda a fazer um blog!
Aprenda a fazer um blog!
 
Ferramentas para trabalho colaborativo
Ferramentas para trabalho colaborativoFerramentas para trabalho colaborativo
Ferramentas para trabalho colaborativo
 
Web 2 0
Web 2 0Web 2 0
Web 2 0
 
Wordpress para iniciantes
Wordpress para iniciantesWordpress para iniciantes
Wordpress para iniciantes
 
Gestão de Conteúdos com Aplicações Baseadas na Web
Gestão de Conteúdos com Aplicações Baseadas na WebGestão de Conteúdos com Aplicações Baseadas na Web
Gestão de Conteúdos com Aplicações Baseadas na Web
 
10 dicas de SEO para Wordpress
10 dicas de SEO para Wordpress10 dicas de SEO para Wordpress
10 dicas de SEO para Wordpress
 
Html - capitulo 04
Html - capitulo 04Html - capitulo 04
Html - capitulo 04
 

Similar a Webdesign e elementos gráficos

Projetos Web - Estratégia de projeto
Projetos Web - Estratégia de projetoProjetos Web - Estratégia de projeto
Projetos Web - Estratégia de projetoOdair Cavichioli
 
Aula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdfAula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdfssuser595b1e1
 
Webnode - Revisado 26/10/13
Webnode - Revisado 26/10/13Webnode - Revisado 26/10/13
Webnode - Revisado 26/10/13tecampinasoeste
 
Desenvolvimento Web Parte I
Desenvolvimento Web Parte IDesenvolvimento Web Parte I
Desenvolvimento Web Parte Iigorpimentel
 
Introdução ao web design
Introdução ao web designIntrodução ao web design
Introdução ao web designCarla Suelen
 
Utilização CMS - WordPress | Criação de um site de um restaurante
Utilização CMS - WordPress | Criação de um site de um restauranteUtilização CMS - WordPress | Criação de um site de um restaurante
Utilização CMS - WordPress | Criação de um site de um restauranteDiogoAlfama
 
Criar um Site 2 Métodos 9 Passos Fáceis e Várias Dicas Incríveis GUIA COM...
Criar um Site 2 Métodos 9 Passos Fáceis e Várias Dicas Incríveis GUIA COM...Criar um Site 2 Métodos 9 Passos Fáceis e Várias Dicas Incríveis GUIA COM...
Criar um Site 2 Métodos 9 Passos Fáceis e Várias Dicas Incríveis GUIA COM...Anderson Ferro
 
Social media conjugar razoes
Social media conjugar razoesSocial media conjugar razoes
Social media conjugar razoesIsabel Lima
 
Recados e artigos
Recados e artigosRecados e artigos
Recados e artigosapaltorodes
 
Aprenda a ser um webmaster
Aprenda a ser um webmasterAprenda a ser um webmaster
Aprenda a ser um webmasterJeferson Souza
 

Similar a Webdesign e elementos gráficos (20)

Projeto Website SambAdm
Projeto Website SambAdmProjeto Website SambAdm
Projeto Website SambAdm
 
Regras e conceitos na criação de páginas Web
Regras e conceitos na criação de páginas WebRegras e conceitos na criação de páginas Web
Regras e conceitos na criação de páginas Web
 
Projetos Web - Estratégia de projeto
Projetos Web - Estratégia de projetoProjetos Web - Estratégia de projeto
Projetos Web - Estratégia de projeto
 
Aula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdfAula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdf
 
Webnode - Revisado 26/10/13
Webnode - Revisado 26/10/13Webnode - Revisado 26/10/13
Webnode - Revisado 26/10/13
 
Desenvolvimento Web Parte I
Desenvolvimento Web Parte IDesenvolvimento Web Parte I
Desenvolvimento Web Parte I
 
O que e web 20
O que e web 20O que e web 20
O que e web 20
 
Introdução ao web design
Introdução ao web designIntrodução ao web design
Introdução ao web design
 
Utilização CMS - WordPress | Criação de um site de um restaurante
Utilização CMS - WordPress | Criação de um site de um restauranteUtilização CMS - WordPress | Criação de um site de um restaurante
Utilização CMS - WordPress | Criação de um site de um restaurante
 
Responsive wordpress
Responsive wordpressResponsive wordpress
Responsive wordpress
 
O que é Web Designer?
O que é Web Designer?O que é Web Designer?
O que é Web Designer?
 
Criar um Site 2 Métodos 9 Passos Fáceis e Várias Dicas Incríveis GUIA COM...
Criar um Site 2 Métodos 9 Passos Fáceis e Várias Dicas Incríveis GUIA COM...Criar um Site 2 Métodos 9 Passos Fáceis e Várias Dicas Incríveis GUIA COM...
Criar um Site 2 Métodos 9 Passos Fáceis e Várias Dicas Incríveis GUIA COM...
 
Social media conjugar razoes
Social media conjugar razoesSocial media conjugar razoes
Social media conjugar razoes
 
Ai ad-tp2-g1
Ai ad-tp2-g1Ai ad-tp2-g1
Ai ad-tp2-g1
 
Recados e artigos
Recados e artigosRecados e artigos
Recados e artigos
 
Satellite - Web 2.0
Satellite - Web 2.0Satellite - Web 2.0
Satellite - Web 2.0
 
Plataformas online
Plataformas onlinePlataformas online
Plataformas online
 
Blogger 31 de agosto de 2011
Blogger 31 de agosto de 2011Blogger 31 de agosto de 2011
Blogger 31 de agosto de 2011
 
Aprenda a ser um webmaster
Aprenda a ser um webmasterAprenda a ser um webmaster
Aprenda a ser um webmaster
 
Ap iii
Ap iiiAp iii
Ap iii
 

Más de sam_the_mc

No more Heroes
No more HeroesNo more Heroes
No more Heroessam_the_mc
 
Sonic and the Secret Rings
Sonic and the Secret RingsSonic and the Secret Rings
Sonic and the Secret Ringssam_the_mc
 
Mercury Meldown Revolution Wii
Mercury Meldown Revolution WiiMercury Meldown Revolution Wii
Mercury Meldown Revolution Wiisam_the_mc
 
Super Mario Galaxies
Super Mario GalaxiesSuper Mario Galaxies
Super Mario Galaxiessam_the_mc
 
Call of Duty 3
Call of Duty 3Call of Duty 3
Call of Duty 3sam_the_mc
 
Dragon Ball Z: Budokai Tenkaichi 2
Dragon Ball Z: Budokai Tenkaichi 2Dragon Ball Z: Budokai Tenkaichi 2
Dragon Ball Z: Budokai Tenkaichi 2sam_the_mc
 
Rayman Ravin Rabbids
Rayman Ravin RabbidsRayman Ravin Rabbids
Rayman Ravin Rabbidssam_the_mc
 

Más de sam_the_mc (12)

No more Heroes
No more HeroesNo more Heroes
No more Heroes
 
Sonic and the Secret Rings
Sonic and the Secret RingsSonic and the Secret Rings
Sonic and the Secret Rings
 
Mercury Meldown Revolution Wii
Mercury Meldown Revolution WiiMercury Meldown Revolution Wii
Mercury Meldown Revolution Wii
 
Wii Play
Wii PlayWii Play
Wii Play
 
Pokemon
PokemonPokemon
Pokemon
 
WebTuga
WebTugaWebTuga
WebTuga
 
Zelda
ZeldaZelda
Zelda
 
Super Mario Galaxies
Super Mario GalaxiesSuper Mario Galaxies
Super Mario Galaxies
 
Call of Duty 3
Call of Duty 3Call of Duty 3
Call of Duty 3
 
Red Steell
Red SteellRed Steell
Red Steell
 
Dragon Ball Z: Budokai Tenkaichi 2
Dragon Ball Z: Budokai Tenkaichi 2Dragon Ball Z: Budokai Tenkaichi 2
Dragon Ball Z: Budokai Tenkaichi 2
 
Rayman Ravin Rabbids
Rayman Ravin RabbidsRayman Ravin Rabbids
Rayman Ravin Rabbids
 

Webdesign e elementos gráficos

  • 1. Trabalho para a disciplina de AI Realizado por: Samuel Ferreira nº 15 Teotónio Leiras nº 16
  • 2. O que é Webdesign? Webdesign é uma vertente do Design dirigida para a realização de um ambiente gráfico para um Site na Web. Existe um leque enorme de programas usados pelos webdesigners. Para construção do código, existe o Dreamweaver, na parte visual, os editores gráficos vetoriais CorelDraw ou Illustrator, de bitmap temos o Photoshop ou o Fireworks. Para animações e recursos dinâmicos, o Flash é geralmente utilizado.
  • 3. A imagem do site é um elemento fundamental para causar logo uma chamada de atenção por parte do público. Aspectos importante a ter em conta antes de apresentarmos a imagem do nosso site: Tema do site O publico Alvo Combinação de cores Tamanho de cada banner, botão, outros elementos graficos… Se vamos fazer um site Animado ou Estático A Imagem
  • 4. A imagem deve ser adequada ao tema do site, por exemplo se temos um site sobre culinária concerteza não vamos realizar, ou pedir para que alguém realize um template com aspecto gótico ou metálico… Deve também ser adequada ao publico destinado se camadas mais jovens ou mais adultas; Não devemos ainda de nos esquecer que a combinação de cores é muito importante… o nosso site não pode ser uma “caixa de guaches”; Devemos também atender aos tamanhos dos banners, botões ou outros elementos gráficos de forma a criarmos um trabalho organizado… O dinamismo do site também tem grande influência sobre o utilizador devemos fazer um design de forma a que seja fácil de ‘utilizar’.
  • 5. Colocar o nome e o logótipo em todas as páginas e fazer no logo um link para a página inicial (excepto na própria página inicial onde o logotipo não deve jamais ter um link para a própria página).  Disponibilizar uma opção de pesquisa se o site tiver mais de 100 páginas.   Escrever cabeçalhos e títulos simples e directos que expliquem claramente qual o conteúdo da página e que faça sentido quando é lido fora do contexto desta, através de uma busca.   Estruturar a página para facilitar a pesquisa e ajudar os utilizadores a ignorar blocos ‘maçadores’ que a página pode conter.  Algumas ‘regras’
  • 6. Em vez de colocar tudo sobre um produto ou um assunto numa única e infinita página, deve-se utilizar hipertexto para estruturar o espaço disponível na página inicial que disponibiliza uma visualização e várias páginas secundárias que focalizam-se no seu tema específico. O objectivo é permitir aos utilizadores evitar desperdiçar tempo nos sub-temas que não lhes interessam.   Usar fotografias do tema, mas evitar páginas cheias dessas mesmas fotografias. Deve-se então ter uma pequena fotografia de cada assunto numa página individual e fazer um link dessa fotografia para uma ou mais fotografias de maior dimensão que mostre mais detalhes adequados às necessidades dos utilizadores. Esta situação varia de acordo com o tipo de tema do site. Alguns temas podem necessitar de fotografias com zoom ou rotativas.
  • 7. Utilizar uma imagem reduzida e relevante quando se preparam pequenas fotografias e imagens: em vez de simplesmente redimensionar a imagem original para uma pequena e ilegível fotografia, deve-se fazer um zoom dos detalhes mais relevantes e utilizar uma solução combinada de corte e redimensionamento.   Utilizar link's com títulos para permitir ao utilizador, visualizar antecipadamente para onde se encaminhará cada link antes de clicar.    
  • 8. A Cor: A cor é um elemento fundamental no Webdesign, pois é dos elementos que mais caracteriza o ‘estilo’ do site. A cor deve sempre ser subordinada consoante o tema do site… por exemplo se temos um site sobre natureza usar tons de verde. A cor deve ser combinada em tons que condigam ente si. Como por exemplo:
  • 9. Quando estamos a realizar um template, temos sempre que ter em conta o publico alvo do nosso trabalho, de forma a realizar um trabalho adequado á idade, estatuto social, etc… Publico Alvo Alguns exemplos do publico alvo: Site para um politico: utilizar tema associado ao mesmo, tendo em conta o publico que o visitará será maioritariamente adulto… Site para um desportista: utilizar tema associado ao mesmo, tendo em conta que o será visitado por gente interessada em desporto… como jovens e outros desportistas. Site para uma modelo: utilizar tema associado ao mesmo, tendo em conta que será visitado maioritariamente por interessados em moda.
  • 10. WEB 2.0: Cada vez mais vemos sites com aposta em novas tecnologias, cada vez mais dinamicos, rápidos e user-friendly. A Web 2.0 representa a segunda geração de serviços que a Internet tem para dispor aos utilizadores. A tecnologia mais usada na Web 2.0 é a programação web em Ajax, oriunda do javascript que é usado em sites como Gmail, Netvibe, etc... Vou falar de três dos principais sites Web 2.0, o Gmail, o famoso Digg e o YouTube. Dinamismo do Site
  • 11. Gmail, um serviço powered by google... O Gmail veio revolucionar a Internet no que toca a caixas de correio electrónico. Com uma interface rápida e fácil de usar, o Gmail é um serviço de caixa de correio electrónico inicialmente com cerca de 2 GB de espaço que de momento tem cerca de mais 1GB , que permite ao utilizador uma rápida gestão de e-mails. Pode enviar e-mails, verificar e-mails, eliminar e-mails sem ter de esperar que uma nova página carregue. Com o uso da tecnologia Ajax, o Gmail permite fazer todas estas acções apenas com um simples load de página. Este serviço é hoje a escolha da maior parte dos internautas por todo o mundo, que apesar de já ter bastante tempo, ainda continua na versão beta.
  • 12. YouTube... o poder da Web 2.0 Quem de nós nunca viu um video do YouTube? Practicamente todos os internautas viram... O YouTube foi o site que mais revolucionou a internet no que fala à multimidia. É possível hoje, graças ao YouTube, ter acesso a uma vasta e quase infinita base de dados de vídeos, enviados pelos utilizadores. Este site foi recentemente comprado pelo Google, no entanto trabalha como serviço de conta própria. Este site bateu o recorde dos recordes no que toca ao site com maior investimento no mundo.
  • 13. Digg... o social bookmarking... Trata-se apenas de um dos maiores social bookmarking que a Internet conheceu. A pratica de troca de links na web virou moda e o Digg veio revolucionar a forma como podemos partilhar os links. O digg permite aos utilizadores enviarem links com artigos e submeterem-nos a votos, sendo assim possível partilhar as noticias mais recentes do mundo.
  • 14.