Webdesign Ferramentas de Desenvolvimento do 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
Objetivos Trabalhar a construção de Layout Observar a utilização de algumas ferramentas essenciais para o trabalho do Webdesigner
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
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.
Cores
Cores
Cores 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 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 Primárias São cores que NÃO podemos obter através da combinação de outras.
Cores Secundárias São obtidas através da mistura de duas cores primárias. Ex. verde, laranja, violeta...
Cores Terciárias São obtidas através da mistura de uma cor primária e uma secundária. Ex. verdeamarelado, laranja-avermelhado...
Cores 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
Cores Cores quentes São cores que exprimem sensação de calor. Cores frias São cores que exprimem sensação de calor.
Cores 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 Cores análogas São cores vizinhas no círculo cromático, e são facilmente equilibradas na composição.
Cores 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 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 Complemento dividido É 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.
Cores Esquema de Cores
Cores Paleta de Cores
Cores 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 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 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
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.
Equilíbrio Assimétrico
Equilíbrio Assimétrico
Equilíbrio Simétrico
Equilíbrio Simétrico
Equilíbrio Simétrico
Proporção 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 GRID Proporção Auréa Lei dos Terços
GRID
GRID
GRID 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 É 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
Proporção Auréa
Proporção Auréa
Proporção Auréa
Proporção Auréa
Proporção Auréa 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 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
Ritmo 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
Ritmo 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
Ênfase Ocorre quando um elemento visual chama mais atenção que outro.
Ênfase
Ênfase
Unidade "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 É 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 Existem cinco leis básicas da Gestalt: Semelhança Proximidade Continuidade Pregnância Fechamento
Proximidade Elementos que estão próximos uns dos outros se agrupam entre si e são percebidos como uma única unidade.
Proximidade
Semelhança Objetos semelhantes tendem a se agrupar, podendo essa semelhança ser na cor, forma ou tamanho.
Semelhança
Continuidade 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
Fechamento Diz que nossa mente interpreta um objeto completo simplesmente se os elementos parecerem se agrupar.
Fechamento
Pregnância 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) 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) Legibilidade Uma fonte simples tende ser mais legível em meio digital. Fontes sem serifas são melhores
Tipografia (Fontes) 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) 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)
Tipografia (Fontes)
Tipografia (Fontes)
Tipografia (Fontes) 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) 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) Ferramenta: http://www.typetester.org/
Imagens, Icones e Fotos Ferramenta: http://www.iconfinder.com http://www.corbis.com www.flickr.com http://www.morguefile.com/
Imagens, Icones e Fotos Ferramenta: www.designkindle.com/ http://subtlepatterns.com/ http://www.textureking.com http://lostandtaken.com/ http://www.cgtextures.com/