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

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

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.

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.

WEBDESIGN

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

WEBDESIGN

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

WEBDESIGN

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

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.

WEBDESIGN

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

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

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.

WEBDESIGN

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

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.

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.

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

WEBDESIGN

Esquema de Cores

WEBDESIGN

Paleta de 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.

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 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

WEBDESIGN

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

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

Proporção Auréa

WEBDESIGN

Proporção Auréa

WEBDESIGN

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 na web é algo presente principalmente em dados. É especialmente importante para sites que contêm páginas compridas e/ou grandes quantidades de informação.

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.

WEBDESIGN

Ênfase

WEBDESIGN

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

Ênfase

WEBDESIGN

Ê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

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

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/

Imagens, Icones e Fotos

WEBDESIGN

Ferramenta: 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

a deformação das coberturas terciárias do planalto da...

aos estudantes, -...

o circulo do odio.ppt

geometria do circulo

desenvolvimento de guia cromÁtico com foco no …

estudo da cor - ubibliorum.ubi.pt iii. 22.pdf · o circulo...

circulo e cincunferencia

· 9 1.3. fontes de informação terciárias 1.4. fontes...

dossiê - terra indígena o mundo cromÁtico...

floral circulo

projeto cromático - billings | mauricio adinolfi

dh: circulo de influencia

el circulo del_odio

apresentação circulo de flores

estudo da cor [breve síntese] - desenharte.yolasite.com...

circulo receita pecas_pesadas

exercício círculo cromático

círculo cromático, 3º eso

circulo cromático1ºeso12

panos circulo 2013