Conceitos de design de sites

490 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
490
No SlideShare
0
A partir de incorporações
0
Número de incorporações
148
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Conceitos de design de sites

  1. 1. CONCEITOS DEDESIGN DE SITESGarcia, Diogo
  2. 2. CONCEITOS DE DESIGN DE SITES1.Explicar os conceitosContraste - O analisador de contraste de cores é uma ferramenta para verificar se determinadacombinação de cores para o fundo e para o primeiro plano, oferece boas condições de visibilidade. Eladispõe ainda de funcionalidades que fazem simulações de determinadas condições visuais tais como acegueira cromática.A determinação da "visibilidade de cores" baseia-se em dois conjuntos de algorítimos: Índice decontraste de luminosidade e Diferença de cor e de brilho, sugeridos pelo World Wide Web Consortium(W3C):É importante lembrar que nem o índice de contraste de luminosidade nem o algorítimo decombinação de cores sugeridos pela AERT são ou foram recomendações; são sugestões de dois gruposde trabalho da WAI para auxiliar na determinação se o contraste entre duas cores é suficiente paraleitura por pessoas com restrições visuais.Repetição - Os valores para a propriedade background-repeat devem ser utilizados em conjunto com apropriedade background-imagem, para que seja possível determinar qual imagem será repetida.Alinhamento - forma seguinte de alinhamento vertical e horizontal é uma combinação de: Posicionamento absoluto Margens negativasPara começar entender como funciona esse método copie o código XHTML abaixo e insira dentro da tagbody:view sourceprint?1.<div id="limites">2. <div id="conteudo">3. <h1>Alinhamento vertical e horizontal com <abbr title="eXtensible Hypertext MarkupLanguage">XHTML</abbr> e <abbr title="Cascading Style Sheets">CSS</abbr></h1>4. <p>Olá mundo!</p>5. </div>6.</div>Nesse exemplo o elemento que precisa posicionar no meio da tela será a div#limites.
  3. 3. Como padrão de documento base para CSS coloque o seguinte reset:view sourceprint?1.* { margin: 0; padding: 0; z-index: 1; }E agora para começar a posicionar a div#limites no meio da tela declare o seguinte código:view sourceprint?1.#limites { position: absolute; top: 50%; left: 50%; width: 680px; height: 400px; background-color: #eee; }Isso vai fazer que a div#limites tenha os seguintes estilos: posição absoluta canto superior esquerdo a uma distância igual a 50% do tamanho da tela largura e altura fundo cinza.Com isso o resultado será meio estranho visualmente, mas esta tudo ok.Teoria das cores - Um objeto é verde porque de todos os comprimentos de onda, a única que ele nãoabsorve, então reflete, é o comprimento percebido por nós como verde. Já a intensidade vai depender daquantidade de luz e outras variáveis.Se um objeto não absorver nenhum espectro de onda é percebido como branco, enquanto que, seabsorver todos, é preto.
  4. 4. Esta informação é captada pelo olho por células localizadas na retina chamadas células cone ebastonetes, estes últimos reconhecem a quantidade de luz. Com a quantidade destas células variandoentre as pessoas entendemos porque a mesma cor é percebida com diferença.Color coding - Um objeto é verde porque de todos os comprimentos de onda, a única que ele nãoabsorve, então reflete, é o comprimento percebido por nós como verde. Já a intensidade vai depender daquantidade de luz e outras variáveis.Se um objeto não absorver nenhum espectro de onda é percebido como branco, enquanto que, seabsorver todos, é preto.Esta informação é captada pelo olho por células localizadas na retina chamadas células cone ebastonetes, estes últimos reconhecem a quantidade de luz. Com a quantidade destas células variandoentre as pessoas entendemos porque a mesma cor é percebida com diferença.Tipografia – Essa propriedade deixa o site mais atrativo, como vemos o modelo abaixo:@font-face{font-family:MinhaFonteAqui;src:url(nomeArquivo.ttf)format(ttf),}Estilo de escrita – Em CSS temos vários tipos de escrita, os especialistas sugerem que sejam utilizadosem seu site no máximo dois tipos de estilo de escrita.2.Mapa do siteAntes de idealizar o site devemos criar o mapa do site, como mostrar a figura abaixo:
  5. 5. 3.Organização de arquivos1º Utilize a declaração abreviada das propriedades.2º Utilize identação para elementos encadeados.3º Faça uma divisão lógica do seu CSS.4º Estabeleça padrões de nomenclaturas para classes e Ids.5º Especialize classes ao invés de criar seletores semelhantes.6º Ordene as propriedades dos seletores.4.Wireframe - Um wireframe de site web (ou também "wire frame web", "wireframe web", "webwireframing") é um guia visual básico usado em design de interface para sugerir a estrutura de um sítioweb e relacionamentos entre suas páginas. Um wireframe web é uma ilustração semelhante do layout deelementos fundamentais na interface. Normalmente, wireframes são concluídos antes que qualquertrabalho artístico seja desenvolvido.5.Mockup – Maquete virtual.

×