• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
WDI - Aula 04   layout e composição do site
 

WDI - Aula 04 layout e composição do site

on

  • 1,036 views

 

Statistics

Views

Total Views
1,036
Views on SlideShare
1,036
Embed Views
0

Actions

Likes
0
Downloads
40
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    WDI - Aula 04   layout e composição do site WDI - Aula 04 layout e composição do site Presentation Transcript

    • Layout e Composição doSite Cristiano Pires Martins Agradecimento à Profª. Fabiana Pupin Masson Caravieri
    • • Processo deRelembrando... construção do web site: • Pré-produção (planejamento),organi zação da informações • Layout e Design (esboço do site): cores, texturas, imagens, HTML e CSS. • Escrita: tipografia (escrever para web) • Navegação e Usabilidade. 2
    • É uma oportunidade dePré-Produção troca de informação com o usuário, para que o mesmo faça sua análise do projeto e sua aprovação. É a construção do site no papel,antes de escreveros códigos xhtml e css. 3
    • Design Process• Envolve a descoberta do projeto: • reúne informações sobre quem são os clientes e como conduzem seus negócios; • a partir disso monta-se um design adequado e eficaz. 4
    • Design Process• Comp (componente do processo de design - boneco): • indica a simulação completa de um layout impresso; • criado antes de o layout ter sido enviado para impressão e do processo de programação 5
    • Coletando informaçõesAntes do primeiro encontro como cliente, faça uma busca dossites na internet sobre o setor/segmento da empresa docliente. Marque uma reunião com o cliente, pode ser no trabalho dele, em um bar/ café, ou restaurante para um almoço. 6
    • Coletando informações O alvo da reunião é a comunicação, tente ouvir mais do que falar. Não leve o computador para anotar os dados, mas sim um bom bloco de anotações e caneta ou lápis. 7
    • Dados relevantes para tratar• O que faz a empresa?• Qual sua função na empresa?• A empresa já possui um logotipo ou marca?• Qual o seu objetivo em desenvolver um web site?• Que informações gostaria de disponibilizar on-line?• Que tipo de pessoas representa seu público-alvo? Elas compartilham algo em comum, como idade, sexo ou localização física?• Quem são seus concorrente? Eles possuem web site? 8
    • Próximo Passo: Projetar no Papel• Antes de programar ou projetar o design em softwares gráficos, faça um esboço do web site no papel. O famoso: Papel cobre a pedra, ou seja, papel, lápis e uma boa borracha.• Com isto, você garante a satisfação dos usuários com o conteúdo do web site, garante a navegação intuitiva e faz reconhecimento das demais páginas com a principal. 9
    • Anatomia da Página Web Logotipo Links Links Links Links Conteúdo Navegação Espaço em branco Rodapé 10
    • Exemplo: YouTube 11
    • Bloco de Conteúdo• É o local onde serão inseridas as informações pertencentes à página principal e demais páginas.• Podemos defini-lo na forma de uma tag de corpo (body), uma tag div de conteúdo completo ou uma tabela. 12
    • Bloco de Conteúdo • A largura do recipiente pode ser: • Líquida: • http://www.designadaptavel.com.br (legal) • http://www.acessibilidadelegal.com (legal) • http://pt.fonts2u.com • Fixa: • http://www.fatecjales.edu.br • http://comocriarsite.webnode.com.pt • http://www.uol.com.br • http://www.globo.com 13
    • LogotipoRepresenta a empresa, deveser colocado no bloco deidentidade exibido em cadapágina do web site. Isto ajuda a reconhecer a marca e permite aos usuários se certificarem que estão visualizando uma página pertencente ao web site que entrou. 14
    • Navegação (links)• A navegação deve ser de fácil localização e manuseio.• Os usuários esperam encontrar a navegação (links) no alto da página, ou em um menu lateral, mas sempre no acima da “dobra”. Dobra: é uma referência a dobra de um jornal, as principais notícias e manchetes ficam acima. 15
    • • Localizado na parte inferior da página, contém informações sobre direitos autorais, contatos e informações legais, políticas de uso, mapa do site, etc.• Indica o final da página ao usuário. Rodapé 16
    • Espaço em branco• Também denominado “espaço negativo”, refere literalmente a qualquer área da página não preenchida por letras ou ilustrações.• Dá ao usuário que o site não o sufocará com tanta informação, ou seja, é uma área equilíbrio do site. 17
    • Espaço negativo• Corresponde à área vazia ao redor e entre os principais elementos de um design. 18
    • Construindo um tema e umametáfora visual• É a hora de pensar sobre a melhor maneira de transmitir e exibir o conteúdo do site para os usuários de seu cliente.• Depois de definir cor, layout e localização dos elementos vamos definir a Metáfora Visual. 19
    • Metáfora Visual• É uma técnica utilizada no Web design para reforçar o tema do site a ser construído, através das cores, gráficos, tipografia, etc., aproveitando os elementos visuais familiares• O objetivo é reforçar o tema do site.• A metáfora visual pode ser: • Sutil: usando cores que dão ao usuário uma sensação abstrata que o designer deseja associar ao tema do site; • Direta: usando gráficos que ligam ao nome ou a identidade do site. 20
    • Exemplo• Um site de comunidade on-line para crianças de 7 a 10 anos. Por exemplo: http://clubpenguin.com/pt/• É um site com design que reforça o tema de ser: orientado para crianças, divertido, instrutivo, cores claras etc. 21
    • Exemplo 22
    • Exemplo 23
    • Referências• COBURN, Foster; McCORMICK, Peter. Corel Draw – Guia Oficial. São Paulo. Makron Books, 1998.• BEAIRD, J. Princípios do Web Design Maravilhoso. Rio de Janeiro: Altabooks, 2008.• KALBACH, J; PIVETA, E K. Design de Navegação Web. Bookman, 2009.• KLOSKOWSKI, Matt. Camadas com Photoshop: Guia Completo do Recurso (Colorido). Alta Books. 2008.• WATRALL, E; SIARTO, J. Use A Cabeça! Web Design. Alta Books, 2009.• SANTAELA, Lúcia. O que é Semiótica. São Paulo: Brasiliense, 2003.• Manual da CorelDRAW® Grapics Suite X5. 2010. 24