Arquivos para categoria: Webdesign

Pode parecer óbvio, mas acredite: muita gente não consegue compreender porque, quem desenha para a cultura ocidental, insiste em recitar o mantra “da esquerda para a direita. É assim que se organiza por ordem de importância”.

Esta é a maneira mais fácil de explicar como os designers pensam para organizar a informação de forma que ela seja clara e absorvida o mais rápido possível. Tá certo, tudo depende do contexto, do público e tem uma série de fatores que determinam a decisão final (a cultura ocidental ou oriental, por exemplo), mas acredite: o designer da sua empresa não teve uma visão com esta ideia e decidiu que era o certo. Tudo começou com um cara chamado Leonardo Fibonacci (se você não curte matemática, desaconselho o clique neste link).

Explicando de forma bem tosca, esse matemático descobriu uma sequência numérica utilizada em diversos campos como matemática (lógico), literatura, música, cinema, entre outros que se vê como a mesma proporção que é utilizada pela natureza para criar formas perfeitas. A Proporção áurea, uma espécie de gráfico gerado pela constante do Número de Fibonacci, é utilizada desde a antiguidade para criar formas bem desenhadas. Pode ser vista em obras de Leonardo da Vinci, Giotto e até na marca da Apple, a famosa maçã de Jobs.

Daí, com diversos estudos baseados neste conceito, dentro da disciplina de design, concluiu-se que, há pontos dentro de um suporte (página, site, cartaz, banner, aplicação, tela…) onde a visualização é mais rápida e clara. Esses pontos são o ponto áureo e o centro físico.

O ponto áureo é o ponto que se enxerga primeiro ao visualizarmos algo. Vamos usar uma página, como exemplo. Este ponto é onde se encontra a medida de 3/8 da página tanto na largura como na altura. Difícil? É só dividir sua página em 8 partes iguais (isso serve para as telas, tá?) na altura e na largura (como a página acima) e cruzar linhas partindo do 3º ponto. quando as linhas perpendiculares se encontrarem você achou o seu ponto áureo, ou seja, o ponto que se enxerga primeiro.  São 4 pontos porque eles podem ser contados de cima para baixo, de baixo para cima, da direita para a esquerda, da esquerda para a direita. O que determina qual dos pontos eu vou usar? Os outros fatores sobre os quais eu falei lá em cima, público, cultura, objetivo… além disso, fatores como tamanho dos elementos também. Se você tiver uma imagem bem colorida que ocupa mais da metade da página, via de regra, ela será a primeira coisa a ser visualizada, porque ela cruza as fronteiras dos pontos áureos.

Note que, os capítulos dos livros, títulos de artigos, peças mais importantes, fotos mais importantes, matérias principais muitas vezes não começam no topo da página. Geralmente ficam um pouco mais abaixo. Não é por acaso. Procurou-se usar o ponto áureo para dar destaque.

Esta é a minha primeira linha de visão.

Além do ponto áureo, há o centro físico. Onde duas linhas diagonais se cruzam. Este é o ponto entre os pontos áureos. O segundo lugar mais visualizado e onde é mais fácil concentrar a atenção. Já notou que geralmente executamos tarefas primárias ao centro? O espaço entre as margens de um papel é centralizado, a área de desenho do seu software é centralizada, a página do seu editor de textos é centralizado…

Pode parecer bobagem, mas as placas com nomes das ruas sempre são ao centro ou à esquerda, a sinalização do metrô também. Os menus dos filmes, a abas do seu navegador, as barras de menus. Se bem desenhados, o início das coisas que são primarias não vão ultrapassar nunca a medida de 3/8 para qualquer lado. Ainda que seu texto esteja à direita, pode ter certeza de que você começará a lê-lo muito antes de ultrapassar a “medida mágica”.

Da próxima vez que um designer lhe disser: “Da esquerda para a direita”, ” Um pouco mais pra baixo”, “Deixe uma margem maior”, dê um voto de confiança a ele, lembre da matemática e que o objetivo é chegar à perfeição da natureza.

 

Anúncios

 

Gostaria de agradecer a todos os que responderam a pesquisa sobre o uso de ícones. A imagem acima busca resumir as informações colhidas e tenho certeza de que vão ajudar bastante quem trabalha com UX, arquitetura de informação, design gráfico, de interfaces na hora de avaliar o uso de imagens e na decisão de usá-las.

Como disse em uma das listas em que distribuí a pesquisa, nenhuma resposta dada foi considerada errada, visto que elas dependem das experiências do usuário e do contexto, conforme bem lembrado pela Pat Duarte.

Alguns dados interessantes que não estão na imagem:

Para o ícone com o símbolo “#” recebi uma resposta “Cores do documento”. Fui tentar entender o motivo e cheguei à conclusão que era influência da numeração dos hexadecimais, onde as cores são apresentadas com este símbolo com prefixo (ex.: Preto = #000000);

Fiquei surpresa com a quantidade de divergências para as imagens de “texto justificado” e “Nova página”. A primeira porque é um ícone muito conhecido e a porcentagem de divergência foi maior do que eu esperava.  A segunda, pelo motivo contrário: por não ser um ícone “padrão” a divergência foi muito pequena.

A mim, a pesquisa vai ajudar para o treinamento, conforme divulguei e no planejamento da interface de novas telas e sistemas. E a você, vai ajudar?

Há muita gente muito boa no que faz ao redor do mundo.

Isso inclui aqueles que trabalham com design, interação, usabilidade, arquitetura da informação, experiência do usuário…

É importante lembrar disso porque, mesmo que você seja o melhor profissional do planeta em alguma coisa, não esqueça de um ponto importante: Teste os resultados antes de publicar/implementar/homologar.

A imagem acima é da página de espera de uma agência digital muito, mas muito boa – a Fishy. Eles são Os Caras. Fazem trabalhos incríveis. Mas na sua própria página eles tiveram um pequeno problema: o texto está difícil de ler. Muito difícil mesmo. Foi usada um fonte muito legal para impressos, a Six Caps. Só que, para usar uma fonte dessas num site, tem que muito corajoso. Ela é uma fonte condensada e foi usada toda em uppercase. O resultado é que tem que ser ninja para ler uma fonte assim com o background audacioso (as centenas robozinhos coloridos). Tá certo que o texto está sob uma área chapada, mas ainda assim, é uma fonte difícil de ler em qualquer tamanho, principalmente com toda a distração.

Até os bons às vezes erram…

Só entende o que lhe é comum, senão…

Tirinha de Gary Larson.

Daqui: http://www.doctordisruption.com/wp-content/uploads/2011/01/design.jpg

De uma apresentação sobre design de interação do Instituto Faber-Ludens em http://www.slideshare.net/usabilidoido/design-de-interao-em-produtos-eletrnicos

 

A inspiração veio do html5 em inglês: http://shouldiworkforfree.com/ 😀

Você está lá, no meio do seu layout quando o desenvolvedor ao seu lado pergunta: “Que cor é essa?”. Não. Ele não está falando do matiz (vermelho, verde, azul amarelo, laranja…) Ele quer saber qual é o código hexadecimal daquela cor que você colocou ali, no desenho. E, bem, você não tem a mínima ideia, afinal, usou o a Eyedropper tool e capturou aquela cor qualquer de uma outra imagem que você nem lembra mais qual era…

Você tem escolhas: abrir a imagem do carinha (supondo que você ainda a tenha e saiba onde está) e usar o eyedropper novamente. Pode chutar um hexadecimal qualquer (É #9CFF00, agora para de encher o saco!) que é muito indelicado e corre o grande risco de sair a cor errada. Ou não precisar abrir o Photoshop. Basta usar ColorPic (você ou o próprio desenvolvedor).

A grande vantagem do ColorPic é que você não fica restrito à captura de cores do workspace do Photoshop ou Illustrator. Você pode capturar qualquer cor que esteja aparecendo no seu monitor em HSB, RGB ou Hexadecimal com um simples mouse over. Por exemplo: usando a imagem acima, pelos meios tradicionais, para capturar um “Roxo da mesma cor do ícone do Eclipse” eu teria que printar a tela, colar num novo documento do Photoshop, abrir o seletor de cores, clicar nele com o eyedropper. Assim eu saberia a cor. Já usando o ColorPic basta abrir a aplicação (bem levinha, por sinal) e posicionar o mouse no ícone. O ColorPic permite uma boa precisão com lente de aumento na parte inferior e te dá a cor em tempo real #57539B. Beleza, né? A versão básica é free. Só baixar.

Hoje estive tentando retormar a leitura de Interação humano-computador. O trabalho que eu digo que amo tanto aqui exige que, de vez em quando, leiamos sobre coisas que até já sabemos para relembrar. Daí chego em algo que me chama a atenção. É um tópico sobre perspectiva de reflexão em ação em Design. Uma proposta de Schön. O trecho do livro cita Löwgren e Stolterman. Tá certo, não está entendendo o que isso que eu falei até agora tem a ver com o título, né?

É que esse trecho do livro cita características importantes para quem está pensando em ser designer de interação. Claro, com algumas adaptações se aplica a todas as outras subdivisões do design. Então pega o caderno e anota aí:

  • Criatividade e capacidade de análise para criar e modelar ideias (ser criativo, isso não vai mudar, em qualquer descrição sobre designers que venha a ler);
  • Capacidade crítica e de julgamento para decidir (não concorde com tudo, discuta, pergunte, não tenha medo de perguntar por quê e/ou expressar uma opinião contrária à maioria, desde que tenha fundamento);
  • Capacidade de comunicação e negociação para trabalhar com clientes, usuários e desenvolvedores (aprenda isso: designers tem que saber falar, ouvir, entender e escrever bem. Isso é comunicar-se e é essencial);
  • Conhecimento sobre as tecnologias disponíveis para projetar qualidades estruturais e funcionais (como o seu trabalho vai ser concretizado é problema seu. E se você quer que saia direito, acompanhe as etapas do processo, saiba o que é possível de fazer e o que não é. Não viaje. Design é projeto, não é obra de Salvador Dalí);
  • Conhecimento sobre valores e ideais dos envolvidos para projetar qualidades éticas (Você não produz peças para si mesmo. Conheça seu cliente, seu usuário, que pode ser interno ou externo. O que você ajuda a criar deve ter valor para ele ou seu produto será um fracasso);
  • Capacidade de apreciar e compor coisas agradáveis aos sentidos para projetar qualidades estéticas (se o que você faz é feio, mas funciona, alguém está estudando para criar um produto concorrente ao seu que também funciona, é bonito e interessante. Daí você vai perder o cliente).

Lembre-se de que você pode ter habilidade natural para algo, mas tudo exige esforço. Ninguém é bom designer por acaso.

Quer rabiscar com sua tablet nova? Usar brushes diferentes facinho, facinho? Usar um aplicativo html 5? Saber o que faz a tag <canvas>? Experimenta o DeviantArtMuro. Para quem já conhece o site de arte digital DeviantArt não vai ser difícil usar o DeviantArtMuro. Os pincéis são show de bola, a página é leve… não e um Painter Pro, tá certo… mas o carinha garante uma diversão. Experimenta lá: http://muro.deviantart.com/ .

%d blogueiros gostam disto: