mineração de dados - thiagomiranda.net · trabalhar a construção de layout ... a partir do...

Thiago Miranda dos Santos Souza

Ferramentas de Desenvolvimento do Webdesign

Webdesign

Ferramentas de Desenvolvimento, design, cores e Posicionamento de Elementos


Conteúdos

Os materiais de aula, apostilas e outras informações estarão disponíveis em:

www.thiagomiranda.net

WEBDESIGN

http://www.thiagomiranda.net/�

Objetivos

Trabalhar a construção de Layout Observar a utilização de algumas ferramentas essenciais para o trabalho do Webdesigner


WEBDESIGN

Tópicos da Aula 1. Resolução de Tela 2. Cores 3. Definição de Tamanhos e Proporções 4. Definição de Fontes 5. Icones, fotos, imagens, patterns e textyras 6. Construção de Layout


WEBDESIGN

Introdução

O Design é dividido em uma série de princípios básicos e ferramentas que se aplicam a todo o projeto, seja ele gráfico ou voltado para web. No entanto, especialmente na web, às vezes essas regras tendem a ser esquecidas e nós apenas trabalhamos com o que sentimos ser o “certo”.


WEBDESIGN

Cores


WEBDESIGN

Cores


WEBDESIGN

Isaac Newton, além de ter feito importantes descobertas como as leis da física, gravidade... Também contribuiu para o Design quando resolveu analisar um feixe de luz branca, e descobriu que este era composto de um espectro de cores: vermelho, laranja, amarelo, verde, azul, índigo e violeta.

Cores


WEBDESIGN

Isaac Newton organizou o que é hoje chamado de ciclo cromático. A partir do circulo cromático, pode-se dividir as cores em Primárias, Secundárias e Terciárias.

Cores


WEBDESIGN

Primárias São cores que NÃO podemos obter através da combinação de outras.

Cores


WEBDESIGN

Secundárias São obtidas através da mistura de duas cores primárias. Ex. verde, laranja, violeta...

Cores


WEBDESIGN

Terciárias São obtidas através da mistura de uma cor primária e uma secundária. Ex. verdeamarelado, laranja-avermelhado...

Cores


WEBDESIGN

O estudo das cores também observou relações entre elas: Cores complementares São cores opostas no círculo cromático, e produzem um forte efeito contrastante.

Cores


WEBDESIGN

Cores


WEBDESIGN

Cores quentes São cores que exprimem sensação de calor.

Cores frias São cores que exprimem sensação de calor.

Cores


WEBDESIGN

O verde limão esta tanto nas cores quentes quanto nas frias. Isso porque ele não pertence a uma categoria fixa, quando inserido em um contexto quente, se comporta como uma cor quente e quando inserido em um contexto frio, age como cor fria.

Cores


WEBDESIGN

Cores análogas São cores vizinhas no círculo cromático, e são facilmente equilibradas na composição.

Cores


WEBDESIGN

Esquema Triádico

É a harmonia onde usamos três cores equidistantes no circulo cromático. Por exemplo azul, amarelo e vermelho. Esse tipo de combinação consegue dar um efeito visual muito atraente.

Cores


WEBDESIGN

Esquema Tetrádico

Como o nome indica, refere-se a harmonia conseguida por dois pares de cores complementares entre si. Denominado por alguns como tetradas, estas combinações são as mais ricas de todas as harmonias, porque utiliza quarto cores sendo elas complementares em pares. É no entanto uma harmonia muito difícil de trabalhar. Se as quatro cores são utilizadas em iguais proporções, a harmonia parecerá desequilibrada, pelo qual deverá sempre ser escolhida uma cor como a dominante e com esta dominar as restantes.

Cores


WEBDESIGN

É a harmonia conseguida através da mistura de uma tonalidade da escala com as duas vizinhas da cor directamente oposta a primeira. Esta é uma variante da combinação de harmonia de complementares. Que utiliza uma cor como principal e as duas cores adjacentes ao seu complementar. Esta é uma harmonia que oferece um grande contraste sem a tensão do esquema complementar.

Complemento dividido

Cores


WEBDESIGN

Esquema de Cores

Cores


WEBDESIGN

Paleta de Cores

Cores


WEBDESIGN

Para produção de websites, o sistema de cor mais utilizado é o RGB (red, green e blue) Para formar uma imagem, diferentes porcentagens de cada cor se sobrepõem.

Cores


WEBDESIGN

As cores podem ter alguns significados e provocar lembranças e sensações diferentes às pessoas dependendo de sua cultura:

Cinza: elegância, humildade, respeito, reverência, sutileza;

Vermelho: paixão, força, energia, amor, velocidade, liderança, masculinidade, alegria (China), perigo, fogo, raiva, revolução, "pare";

Azul: harmonia, confidência, conservadorismo, austeridade, monotonia, dependência, tecnologia, liberdade;

Azul ciano: tranqüilidade, paz, sossego, limpeza, frescor;

Verde: natureza, primavera, fertilidade, juventude, desenvolvimento, riqueza, dinheiro (Estados Unidos), boa sorte, ciúmes, ganância;

Amarelo: concentração, otimismo, alegria, felicidade, idealismo, riqueza (ouro), fraqueza;

Magenta: luxúria, sofisticação, sensualidade, feminilidade, desejo;

Violeta: espiritualidade, criatividade, realeza, sabedoria, resplandecência, dor;

Branco: pureza, inocência, reverência, paz, simplicidade, esterilidade, rendição;

Preto: poder, modernidade, sofisticação, formalidade, morte, medo, anonimato, raiva, mistério.

Ferramenta para trabalhar com Cores


WEBDESIGN

http://colorcombos.com/ http://kuler.adobe.com http://colorschemedesigner.com http://colrd.com/

Princípios do Design

● Equilíbrio ● Proporção ● Ritmo ● Dominância (ou ênfase) ● Unidade


WEBDESIGN

Equilíbrio Existem dois tipos de equilíbrio: Equilíbrio simétrico e equilíbrio assimétrico. Enquanto o equilíbrio simétrico é fácil de detectar (as coisas aparecem como imagens num espelho), o equilíbrio assimétrico é menos perceptível, mas, aparentemente, mais importante.


WEBDESIGN

Equilíbrio Assimétrico


WEBDESIGN

Equilíbrio Simétrico


WEBDESIGN

Proporção


WEBDESIGN

Escolher o tamanho certo para os elementos vai além de simplesmente selecionar um tamanho legível para o corpo do conteúdo ou a largura das colunas. Deve-se levar em conta a proporção, baseados nas proporções de certos objetos. Auxilia na atribuição de importância aos elementos na página. • Menu • Conteúdo • Distribuição de Conteúdo • Topo

Proporção


WEBDESIGN

• GRID • Proporção Auréa • Lei dos Terços

GRID


WEBDESIGN

GRID


WEBDESIGN

Ferramentas http://gridinator.com/ http://www.designbygrid.com/tools http://grids.heroku.com/ http://www.gridsystemgenerator.com/gs01.php

http://960.gs/

http://960.gs/�

Proporção Auréa


WEBDESIGN

É na verdade um número irracional que resulta de um quociente específico. Para o obter, os sábios da Antiguidade Clássica definiram a seguinte fórmula: dividindo um segmento de reta em duas partes desiguais, a relação (ou proporção) entre a parte maior e a parte menor tem de ser igual à proporção do todo relativamente à parte maior. Este número irracional é denotado pela letra grega Phi e com o valor arredondado a três casas decimais de 1,618 (número de ouro)

Proporção Auréa


WEBDESIGN

Proporção Auréa


WEBDESIGN

Se você tiver o todo e quiser achar o tamanho do segmento áureo: Todo x 0,618. Assim: 1000 pixels x 0,618 = 618 pixels http://goldenratiocalculator.com/

Lei dos Terços


WEBDESIGN

A lei dos terços é bastante simples. Consiste em dividir a área de trabalho em 3 partes horizontais e 3 partes verticais. Os 4 pontos onde ocorrem os cruzamentos das linhas, são considerados pontos fortes, ou seja, elementos próximos a estes pontos, serão atraídos por eles.

Lei dos Terços


WEBDESIGN

Ritmo


WEBDESIGN

Ritmo na web é algo presente principalmente em dados. É especialmente importante para sites que contêm páginas compridas e/ou grandes quantidades de informação.

Ritmo


WEBDESIGN

Ritmo


WEBDESIGN

O site cria um ponto de partida no cabeçalho com sua navegação horizontal estabelecendo a direção de leitura (1) para, logo em seguida, cair no conteúdo principal, que é idêntico para cada artigo. Isso cria um ritmo consistente que o usuário segue inconscientemente (2). Esta técnica é repetida na barra lateral.

Ritmo


WEBDESIGN

Ênfase


WEBDESIGN

Ocorre quando um elemento visual chama mais atenção que outro.

Ênfase


WEBDESIGN

Unidade


WEBDESIGN

"O todo é maior que a soma das partes". E a unidade trabalha de forma que todas os elementos visuais trabalhem de uma única forma.

Gestault


WEBDESIGN

É o estudo de como o ser humano percebe as coisas ao seu redor. O cérebro humano em um momento que não é percebido, tende a "captar" discrepâncias visuais, ou elementos associativos.

Gestault


WEBDESIGN

Existem cinco leis básicas da Gestalt: ● Semelhança ● Proximidade ● Continuidade ● Pregnância ● Fechamento

Proximidade


WEBDESIGN

Elementos que estão próximos uns dos outros se agrupam entre si e são percebidos como uma única unidade.

Proximidade


WEBDESIGN

Semelhança


WEBDESIGN

Objetos semelhantes tendem a se agrupar, podendo essa semelhança ser na cor, forma ou tamanho.

Semelhança


WEBDESIGN

Continuidade


WEBDESIGN

Diz respeito ao alinhamento de elementos que produzem um conjunto harmônico e passam a impressão de que os elementos estão relacionados.

Continuidade


WEBDESIGN

Fechamento


WEBDESIGN

Diz que nossa mente interpreta um objeto completo simplesmente se os elementos parecerem se agrupar.

Fechamento


WEBDESIGN

Pregnância


WEBDESIGN

Diz que nossa experiência passada favorece a compreensão e associação de objetos incompletos, desde que nossa consciência tenha conhecimento de sua existência.

Tipografia (Fontes)


WEBDESIGN

Tipografia é a arte e o processo de criação na composição de um texto, fisica ou digitalmente. Assim como no design gráfico em geral, o objetivo principal da tipografia é dar ordem estrutural e forma à comunicação.

Tipografia (Fontes)


WEBDESIGN

Legibilidade Uma fonte simples tende ser mais legível em meio digital. Fontes sem serifas são melhores

Tipografia (Fontes)


WEBDESIGN

O contraste deve ser elevado, e o tamanho para massas tipográficas não devem ser menor que 12px. Quantidade de fontes em um mesmo texto também não devem ser superior que três.

Tipografia (Fontes)


WEBDESIGN

O Estilo A fonte escolhida em um site é uma das chaves do sucesso de um projeto. Ela deve estar alinhada com os conceitos e a linguagem visual aplicada ao layout.

Tipografia (Fontes)


WEBDESIGN

Tipografia (Fontes)


WEBDESIGN

No desenvolvimento de um projeto web, é recomendável utilizar para as massas de texto fontes websafe, que são famílias de fontes que são encontradas em diversos sistemas operacionais. São elas: Arial, Arial Black, Century Gothic, Comic Sans MS, Helvetica, Impact, Trebuchet MS, Verdana e Times New Roman

Tipografia (Fontes)


WEBDESIGN

Ferramenta: http://www.typetester.org/

Imagens, Icones e Fotos


WEBDESIGN

Ferramenta: http://www.iconfinder.com http://www.corbis.com www.flickr.com http://www.morguefile.com/

http://www.iconfinder.com/�

http://www.corbis.com/�

http://www.flickr.com/�

http://www.morguefile.com/�

Imagens, Icones e Fotos


WEBDESIGN

Ferramenta: www.designkindle.com/ http://subtlepatterns.com/ http://www.textureking.com http://lostandtaken.com/ http://www.cgtextures.com/

http://www.designkindle.com/�

http://subtlepatterns.com/�

http://www.textureking.com/�

http://lostandtaken.com/�

http://www.cgtextures.com/�

mineração de dados - thiagomiranda.net · trabalhar a construção de layout ... a partir do...

Documents