Arquivos para posts com tag: 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?

A quem lê e acessa meu blog: estou fazendo uma pesquisa que visa esclarecer o quanto a interpretação de imagens depende da experiência anterior do usuário. Se você puder ajudar, por favor, responda a pesquisa do link abaixo. É rapidinho: basta dizer em que você trabalha e responder abaixo de cada imagem o que ela representa para você. Assim que tiver uma boa amostragem, divulgo os resultados.

http://form.jotform.com/form/12903021729

Fico muito grata pela ajuda ^^

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.

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

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

It's evolution, baby!

Depois de um longo, longo tempo me deu vontade de escrever (e não sobre o assunto que eu pensei que seria, já que eu achava que este ia ser para a CS5, mas…). Isso aconteceu depois de precisar pesquisar sobre HTML 5 (notei, inclusive, que é perigoso querer falar sobre isso, durante as minhas pesquisas).

Cheguei a algumas conclusões importantes sobre os assuntos acima, embora acredite que nem todos vão concordar comigo. São elas:

– O site da W3C é horrível e eu não estou falando visualmente. Você precisa dar milhões de cliques até achar o que você precisa (tá bom, exagerei, mas a busca não é eficiente). Pensando que os sites web standards deveriam ser os mais usáveis (pela lógica de Nielsen…), aí vai um paradoxo (um dos vários) tem um campinho de busca, no site do escritório brasileiro, com um prompt “Digite para pesquisar”, só que quando você clica no campo, tem que apagar letra por letra, ou selecionar o texto, daí apagar, digitar o que você quer pesquisar e só então clicar no botão… ufa, cansei só de escrever. Aí você vai dizer: “mas é no site brasileiro…” e eu vou dizer que no W3C.org, tem um campo de busca, com o logotipo do Google, mas que não diz nada sobre a pesquisa só filtrar dentro do site… assim fica difícil defender.

Os “grandes mestres” em usabilidade detonam todo e qualquer estudo da percepção da forma que as escolas de design tenham feito. Até agora, a maior parte dos livros de grande referência na área desprezam qualquer inovação e tratam o usuário final como um ser “estúpido”, que só entende o que já conhece… imagina o que seria da Internet e outras grandes invenções do mundo se as pessoas só usassem o que conhecessem? Exemplo: Todos os links devem ser azuis e sublinhados, porque o usuário está habituado a isso. Já pensou a quantidade de texto azul? Sites de notícias todos em texto azul? Aí eu pego um livro do Nielsen onde ele diz: Sei que dissemos isso um dia, mas não foi bem isso que eu quis dizer. Ah, é verdade… não precisa mais ser azul. Só sublinhado… Neste ponto, voltamos ao site bonitinho (isso foi uma ironia) da W3C. Não é que ele é azul (hahaha) sublinhado e cheio de texto, que o carinha que entrar lá nem sabe por onde começar? Uma verdadeira poluição visual.

Moral da história: Escuto um monte de gente cultuando os Web Standards, a W3C, os mestres em usabilidade e desprezando aquilo que é o objetivo de qualquer produto: atender às necessidades e desejos do usuário. Vê se alguém quer só um carro com motor bom? Todo mundo quer mais: bom e bonito. Aí é que está o desafio para aqueles que constroem aplicativos Web: criar aplicações que atendam ao usuário e bonitas. Usáveis e charmosas.

Não que eu ache que os padrões da Web são ruins ou desnecessários. Acho que eles devem se adequar ao público-alvo. Se renovar, reinventar e, principalmente, acompanhar o seu público é o que qualquer produto precisa, mesmo a Internet.

Por essa posição dogmática da maioria é que existem tantos partidários do HTML 5, outros ferrenhos do Flash e ninguém enxerga mesmo é que a Web é grande, tem espaço para todo mundo, público para todo mundo e que quem agrada ao usuário, não necessariamente o “usável”, fica. Vamos ficar felizes com o novo e vamos aproveitar as coisas boas das soluções existentes também. Inovar é evoluir.

It’s evolution, baby!

Lá de Passo Fundo, no Rio Grande do Sul, um amigo, Jackson Andrade (@jackandrade ), me mandou um link de uma aplicação em Flash (sim, Flash) para desenhar, pra lá de interessante. O nome? Boa pergunta. Não aparece o nome da aplicação, mas os efeitos de pincel e a possibilidade de carregar imagem para desenhar são show de bola pra fazer uma ilustração diferente. Como é desenho à mão livre, precisa ser bom de mouse ou ter uma tablet. A aplicação salva no formato png. Eu gostei e vale a pena brincar.

http://haznos.org/site-fazer-desenho-online-flash/

%d blogueiros gostam disto: