Salve povo...
Falaremos dos 7 princípios do design gráfico e digital:
- Proximidade / alinhamento
- Equilíbrio, proporção e simetria
- contraste, cores e brancos
- ordem, consistência e repetição
- simplificação
- legibilidade
- integração
Na aula prática, nós usaremos esses princípios como base para uma pesquisa internet, onde acharemos bons exemplos para cada princípio. Isso servirá de aprendizado para realizarmos uma avaliação individual (prevista na ementa) para a próxima aula, que vale 2 pontos na média.
É isso, até a aula!
Assinar:
Postar comentários (Atom)
20 comentários:
Ok,
abraços
provaaaaa
ai meu Deusss
e ai daniel e colegas! bom, mais armas pro arsenal. DYLAN!
PS= o comentario da ultima aula eu postei ontem.
DYLAN
http://www.aspworldtour.com/2007/
Proximidade e alinhamento – noticias principais, ranking, multimidia, campeonatos estao agrupados.
Simplicidade – é um site simples de facil navegaçao, porem muito pratico, funcional. Facil de se localizar. E achar o que quer.
Legibilidade – muito facil a leitura. Cores brandas que não cansam a vista.
www.google.com.br
simplificação
Esse site na minha opinião demostra clareza e objetividade. O principal que é a busca fica centralizado, sem propaganda ou textos do lado. Mas caso queira ver email, notícias e orkut ele tem um link no canto da tela que não interfere a proposta d site.
www.waves.com.br
proximidade e alinhamento
Esse site só fala de surf, mesmo assim tem varios links para organizar cada seção.
Trazendo o destaque sempre como primeira notícia, logo em seguida a condição do mar, fotos com as ondas ou seja sempre com a linha de interesse de um surfista.
www.bark.com.br
integração
Um site com uma arquitetura fora do padrão, mas alem de simples bem organizado, onde as curvas criam uma caixa para o menu de opções. Trazendo cases como principal noticía da empresa, passa a impressão de que a apresentação do site se encontra dentro das linhas. Sutilmente outros links são colocados em volta complementando o site.
Nathalie Schmidt
www.tim.com.br - Equilíbrio/ proporção/simetria-o site traz um layout equilibrado e com elemtnos diferentes,tarz o contraste com as áreas vazias,usando cores,formas e direções diferentes e com isso, são eqiuilibrados;
www.jovempanfm.com.br - legibilidade - O site faz com que o internauta identifique claramente o que o internauta procura,ele separa bem os tópicos de leitura do internauta;
www.djfestas.com.br - Contrastes/ cores/brancos - No site há um contrastes com as letras que são pretas e algumas palavras para dar um destque são escritas em vermelho,há layouts que chamam atenção e cria um interesse no internauta a única coisa que não há no site é que em vez do espaço ser em branco é da cor cinza escuro, e acaba equilibrando o espaço em branco.
Maryana Ferreira
Lanie Marquez
Diego Sewald
www.mercadolivre.com.br proximidade /alinhamento : Porque ele encontra os produtos cada ums na sua area
www.yahoo.com.br Proximidade : da mesma forma podemos encontrar cada icone igual agrupado
www.tim.com.br Alinhamento: ele possui simetria nas suas informações contendo alienhamento nos boxes.
www.tim.com.br Cores /contrates: cores suaves de fácil visualização e contrastes claros
www.google.com.br Simplicidade : simples objectivo e acima de tudo claro.
www.zinabre.com.br Alinhamento: Pque ele consiste em três linhas e cada linha tem sua sub divisões
www.sony.com.br Legibilidade /Proximidade e alinhamento : pq você consegue ler texto claramente e cada área do site está especificada.
www.hp.com.br cores e contraste e brancos: a cada sessão ele altera cores trazendo legibilidade nas busca de cada área
www.condormusic.com.br: Integração : nele consiste dos outros conceitos dos principios de design
www.previewtv.com.br Cores Branca e demasia ..Simetria completa, é simples sem poluição visual.
Proximidade e Alinhamento: www.uol.com.br
Percebo facilmente a divisão em grupos, os espaços em branco. Da sensação de conforto e estabelece relações.
Simplificação: http://www.diorcouture.com/dior-shopping.html
O site é claro e objetivo. As fontes na cor preta e sem efeitos, são destacados apenas com o uso de "negrito".
O uso correto da cor branca é usado no layout.
Legibilidade:
http://www.warungclub.com.br/
Não há dificuldade na leitura (nem onde se que quer chegar) das informações do site.
DYLAN
http://www.pepsi.com/home.php
Proximidade e alinhamento – eles agruparam em boxes os diferentes assuntos que tratam no site.
Simetria - É um site simétrico pois as duas metades são iguais. Mas achei meio sem equilibrio de cores, muito “azulao”. Infelizmente lembrou o avai hehehe.nao da pra ver direito onde acaba um box e começao outro.
Espaço em branco – poderia ter sido melhor trabalhado. Parece que ficou tudo meio amontoado.
n = N. Júnior
Proximidade e Alinhamento
Site: http://outerspace.ig.com.br/
Análise: Possui uma boa maneira de agrupamento, pois define bem as áreas de notícias, destaques, e arquivos já antigos.
Contraste, cores e brancos
Site: http://archive.hi-res.net/requiem/
Análise: Este tem como proposta clara a confusão e o contraste, retratando exatamente a mensagem do filme o qual ele representa.
Simplificação
Site: http://www.life.com/Life/
Análise: Site simples, claro, com boa disposição de informações. (clica em um dos links da página inicial para visualizar o resto do site)
Legibilidade:
Site: http://g1.globo.com/
Análise: Site se preocupa em dar ênfase a suas principais matérias, no entanto se preocupa em manter a maioria das notícias listadas em sua home, dando opção de leitura. Além de ter boa divisão de seções, feita por cores.
Abraço,
Thiago Porfiro
O primeiro site a analisar é o site dos sandalhas havaianas www.havaianas.com.
Este site tem um notável contraste em quanto suas cores, fazendo jus as sandalhas em si, que estão confeccionadas em diferentes cores e estilos. A idéia de cores, acredito eu, tem a ver com o espírito do brasileiro, animado, alegre e feliz, conhecido no Brasil assim como no exterior. O fundo de cada link está confeccionado como na realidade é a sandalha, com auto relevos, dando uma idéia de repetição e consistência.
Também apresenta um objeto móvel, a sandalha azul e branca, que nos permite navegar e perceber que é possível navegar na área (que não é somente a visível) ao clicar e mover o cursor, ou seja, a sandalha azul e branca.
Tem um menu simples porém funcional, que cumpre com a ordem (cores e estilos) dos elementos de escolha. Também cumpre com uma boa consistência na apresentação de cada pagina, o que vai mudar sempre será a cor de cada página.
Tem uma boa consistência entre uma pagina e outra, como o marcador de tempo de download de cada página.
Tem uma boa legibilidade, por ter textos não muito longos, apesar das variadas cores utilizadas no site.
O próximo site a analisar é o site americano de surf www.surfline.com.
A proximidade e alinhamento dos elementos que compõem este web site é bem definida, proporcionando um equilíbrio proporcional e simetria adequada em sua apresentação.
As cores utilizadas são basicamente o azul escuro para o fundo e o laranja e branco para as letras. Esse contraste de cores é adequado para realizar uma boa leitura do conteúdo do site.
Mantém uma certa ordem e consistência também ao utilizar uma janela que vai trocando as imagens que estão relacionadas a um determinada matéria. Também mantém a barra de menu principal ao longo da navegação do site, facilitando e dando mais opções de navegação.
Este site apresenta muita informação, já que varias matérias são colocadas no ar quase todos os dias. Apesar disso, o mesmo possui uma boa legibilidade porque se encontra bem organizado e integrado.
O seguinte site a ser analisado é o de uma amiga webdesigner, Ana Bahr, www.anabahr.com.
Este site tem alguns elementos de flash, o que acrescenta a favor em quanto a não estaticidade do mesmo. Os elementos que vem a aparecer logo de cada click vem de posições diferentes porém que acabam em um mesmo lugar, o centro da tela. Isso corresponde a uma boa consistência e repetição dos elementos que virão a aparecer.
Utiliza três cores: o preto, vermelho e branco, o que representa um bom contraste e como conseqüência uma adequada leitura, a não ser em alguns casos onde a letra é cinza sobre um fundo preto, cansando um pouco a leitura.
Simples porém funcional, com um menu bem descritivo do conteúdo do site.
Varia um pouco em seu menu em relação aos sites estândares, colocando o mesmo na parte media inferior do website. Nada especial mas diferencial com respeito aos outros menus.
O site parece cumprir com as características de proporção e equilíbrio. Os elementos estão bem centrados e os demais elementos que virão a aparecer também irão ocupar o centro da tela assim que aparecerem. Parece ser bem simétrico também, sem nenhuma surpresa em quanto seu desenvolvimento na navegação.
WILLIAN LENZ NIECKARZ
Proximidade e Alinhamento:
http://www.akakia.com.br
Tudo é bem alinhado, muito legal
o site, é tudo proximo e baseado
em sub-categorias tipo se você
clica em produtos, na mesma ordem
aparecem os mesmos ... bem organizado é facil do cliente encontrar o que deseja.
Equilibrio, proporção e simetria:
http://www.submarino.com.br/
tem um eixo central e a barra de tarefas e propagandas do outro lado, site equilibrado e proporcional.
Contraste cores e brancos:
www.terra.com.br
o laranja predomina com blocos em branco muito bom.
Ordem, consistencia e repeticao:
Simplificação :
http://www.audi.com.br/home/index.aspx
Site da Audi (empresa fraca) bem simples o site mais muito elegante e funcional, é bem pro cara que ja tem bastante complicação na vida ( rico né, pobre entra no site do polibio) ai quer comprar um carro esse find só escolhe se quer A3,4,6,8 ou TT ou um Q7 mesmo...
LEGIBILIDADE:
www.uol.com.br
Muito texto, mais é isso texto é pra se ler, eu gosto muito desse site, minha primeira fonte de informação, existem muitas reclamaçoes que ele tem muita coisa só pra assinante mais mais pai tem esse email a 5 6 anos acho ai tenho o login.
Integração
www.samsung.com.br
Videos muitos bom na home page muito bacana.
Proximidade/ Alinhamento
www.waves.com.br
Este site os itens que corresponde a cada conteúdo estão juntos e agrupados na vertical ou horizontal. Exemplo; as mercadorias da propaganda ficam juntas em linha vertical, as fotos das gatinhas também seguem o mesmo critério, mas na horizontal.
Equilíbrio/ proporção/ simetria
http://www.starpoint.com.br/
Este site possui um equilíbrio, com um desenho centralizado, colocando os conteúdos por igual dos dois lados, tem uma simetria com forma geométrica que apresenta dois lados iguais em um eixo central.
Contrastes/ cores/ brancos
http://www.surfline.com/home/index.cfm
Este site é contratante atrai a visão, criando uma curiosidade e interesse, os textos títulos mudam de tamanho. Há bastantes cores, mas balanceadas, e com espaços vazios entre as colunas margens e entrelinhas.
http://www.claro.com.br
Análise:
possui proximidade dos itens agrupando-os por assunto, ficando de forma alinhada e bem distribuída pelo site, mantendo clareza e harmonia entre os itens.
http://dsc.discovery.com/
Análise:
Contraste das cores com o fundo branco causam impressão de limpo e de clareza ao ler, chamando atenção para os links de maiores acessos, induzindo o usuário a visitar os conteúdos mais “importantes”.
http://www.ilegra.com/
Análise:
- site simplificado e objetivo, demonstrando clareza e simplicidade de forma sofisticada, não perdendo qualidade por ser “pequeno” e sim ganhando na hora da navegação de fácil conduta.
Jonatha Regis
Fabiano Pons
* Contraste,cores e brancos
* Legibilidade
* Proximidade e alinhamento
www.bol.com.br
O site é carregado de informações na pagina inicial, por não haver espaço para um descanso do usuario, porem ele traz uma legibilidade com as informações divigadas e também trabalha com cores de acordo com o publico alvo.
...........................................
* Proximidade e alinhamento
* Equilibrio, proporção e simetria
* Contraste,cores e brancos
www.uol.com.br
Neste site também podemos ver que a um ambiente muito poluido visualmente, ou seja, com muitas informações em um unica pagina, também podemos ver que as sub paginas trabalhão com cores diferenciadas de acordo com o tema tratado, outra coisa é a simetria que existe no site por estabelecer um alinhamento entre as colunas,etc ...
...........................................
* Contraste,cores e brancos
* Simplificação
* Interação
www.globo.com
Este site trabalha de uma forma que dá aos usuarios uma interatividade em certas sub janelas da pagina, e um ponto bem visivel a meu ver é a organização de cores por asunto, simplicando o acesso do usuário nas suas proximas visitas ao site, e outra coisa além da diferença das cores no site também pode-se notar que cada janela tem o seu modo de organização.
...........................................
Simplificação - Os sites abaixo são bastante ricos em imagens, simples e diretos.
http://www.triton.com.br/inverno08/
http://www.giorgioarmani.com/ga_menu/EN/home.html
http://www.ellus.com/site/
..........................................
Proximidade e alinhamento - Achei que os menus ficaram muito bem organizados e alinhados, transmitindo conforto:
http://www.sbt.com.br/default.asp
http://www.paperexpress.com.br/
http://www.graficabarbieri.com.br/
..........................................
Equilibrio, proporção - A distribuição dos menus com propaganda seguiram um padrão nos sites abaixo, ficando as propagandas na lateral direita do site e os menus na parte superior e lateral esquerda:
http://www.uol.com.br/
http://www.terra.com.br/capa/
http://www.folha.uol.com.br/
Equilibrio, proporção e simetria:
http://www.curacao.com/
site oficial do país Curaçao
a página inicial do site tem um formato muito simples e é dividido em boxs que se encaixam, dando equilíbrio
por ter esse formato retangular, temos a simetria bem evidente
Simplificação:
http://www.porsche.com/
fundo branco, menu preto vertical a esquerda e sempre uma imagem na parte superior, extremamente simples, passa clareza e confiança
tem sempre um espaço para o site "respirar"
Contrastes, cores e brancos:
http://www.wardesign.com.au/
cada seção do site utiliza uma cor de fundo
o menu, fixo, usa fonte pequena e discreta, enquanto para cada seção que é mostrada uma foto, essa aparece de tamanho considerável
(nesse site também entra o princípio de simplificação)
Professor pela primeira vez não pude assistir a sua aula no ultimo horário hehe, porem mesmo assim deixo aqui minha pesquisa com 3 opcoes de acordo com o pedido em sala... abracos!
Simplificado: (www.cade.com.br)
Esse site apresenta clareza e simplicidade para navegação. Sem propaganda ou texto em excesso.
Proximidade /alinhamento: (www.arremate.com)
Tudo separado por setores e alinhados padrões,
Textos alinhados de acordo com as colunas e acesso fácil por seção desejada.
Cores /contraste: (http://www.novaoi.com.br/ArquivosEstaticos/NovaOi/PreHome/)
Fácil leitura, com a cor bem suavizado, misturado ao fundo branco, e fontes padronizadas em preto para uma melhor leitura, porem o contraste e cores que da a melhor acessibilidade para a leitura.
http://cifraclub.terra.com.br/
Legibilidade:
É um site para busca de cifras, tutoriais e informações musicais. De modo geral é bastante legível, com fundo branco e letras cinzas, e, quando possue link, ao passar o mouse tornam-se laranja.
A leitura não se torna cansativa a longo prazo, as cifras apresentam um bom sistema que ilustra o acorde no violão também em laranja.
http://www.claro.com.br/portal/home.do?method=showHome&idlocal=55
Proximidade e alinhamento:
Site bastante simples, itens organizados pelos tipos e bem alinhados.
http://www.madonna.com/
Equilíbrio e simetria:
O site citado é assimetrico, entretanto apresenta um equilíbrio.Os icones organizados à esquerda, em um espaço menor, compensam a grande área ocupada pela foto da cantora. É um site bastante carregado de cores o que o torna um pouco cansativo.
Fernanda Mello
Postar um comentário