Periodic Table of Typefaces
Click here to enlarge the image. Portuguese image version here. Seen at: /VAR/LOG. Source: Behance
O que é um bom design?
Dieter Rams, um dos mais influentes designers do século XX, defende 10 princípios para se conseguir atingir um bom design. Recentemente fiquei a conhecer esses princípios e partilho exactamente da mesma opinião do que este designer. Curiosamente existem rumores de estes princípios também inspiraram Jonathan Ive, o famoso designer da Apple, que ajudou a conceber produtos como o iMac, o iPod e o iPhone.
Os princípios, que na opinião de Dieter Rams definem um bom design, são os seguintes:
- É inovador;
- Torna um produto útil;
- É visualmente apelativo;
- Torna um produto perceptível;
- É discreto;
- É honesto;
- Perdura no tempo;
- É minucioso até ao último detalhe;
- É amigo do ambiente;
- É o menor design possível (minimalista);
Mais informações: http://www.vitsoe.com/en/gb/about/dieterrams/gooddesign
Como as cores afectam as compras?
Para muitos peritos o segredo para as pessoas fazerem compras é a arte da persuasão. Embora existam muitos factores que influenciam o que e como os consumidores compram, uma grande parte é motivado pelos aspectos visuais, sendo a cor associada ao produto e à loja uma das principais causas.
É possível saber mais sobre a psicologia da cor e como ela influencia as compras através do seguinte infográfico.
SLATES, técnicas da Web 2.0 em sites empresariais
O marketing e a publicidade on-line mudaram bastante com o surgimento da Web 2.0. As empresas já não podem simplesmente comunicar, mas devem também aprender a interagir. A publicidade deixou de ser uma via unidireccional, onde a empresa emite uma mensagem que o consumidor recebe. A Internet é feita de pessoas, a publicidade deve agora basear-se no relacionamento entre a empresa e as pessoas, que devem ser encaradas como potenciais clientes.
Andrew McAfee definiu 6 características através do acrónimo SLATES (Search; Links; Authoring; Tags; Extensions; Signals) que podem potenciar empresas neste paradigma da Web 2.0.
- Procura (Search): Deve ser possível aos utilizadores pesquisarem informação através de um motor de pesquisa presente no próprio site, sendo essa pesquisa o mais inteligente possível. Por outro lado os sites criados devem estar optimizados para os diversos motores de busca (Google, Bing, Yahoo) fazendo uso de técnicas de SEO.
- Links: Promover uma ligação de informação inteligente e intuitiva, com poucas barreiras a um nível social. Como a utilização de links em locais estratégicos, como no fundo de todas as páginas. Também procurando colocar links em locais estratégicos na Internet, como por exemplo em sites de empresas parceiras.
- Dar a voz às pessoas (Authoring): Deve ser estimulada a participação activa por parte dos visitantes dos sites, nomeadamente encorajando e fornecendo a possibilidade de comentarem os artigos publicados. Criando canais de comunicação como o Twitter ou o Facebook também facilitam a uma maior aproximação aos potenciais clientes acabando por encorajar à sua maior participação para com a empresa.
- Tags: Deve ser feita uma categorização de conteúdos através de tags, de forma a facilitar a pesquisa desses conteúdos pelas pessoas e facilitar a percepção dos assuntos que a empresa trata.
- Extensões (Extensions): Recorrer a tecnologias mais dinâmicas e avançadas, tornando os diferentes sites mais modernos. Um exemplo será numa loja on-line informar o utilizador de que quem comprou um determinado produto X também adquiriu os produtos Y e Z. Ou criar mecanismos que informem os utilizadores dos produtos mais adequados para eles.
- Enviar sinais (Signals): Usar tecnologias de sindicação (feeds) que permitam aos utilizadores receberem notificações de novos conteúdos. Outra hipótese é a criação de uma newsletter periódica.
Noções sobre Usabilidade no Web design
A Usabilidade pretende estudar a facilidade de utilização e compreensão de uma interface, estando directamente ligada à facilidade que o utilizador tem em alcançar os seus objectivos. O estudo da Usabilidade numa aplicação Web é particularmente importante para tornar o site mais eficiente e produtivo. Este artigo pretende dar algumas noções sobre este assunto.
A Usabilidade pretende estudar a facilidade de utilização e compreensão de uma interface, estando directamente ligada à facilidade que o utilizador tem em alcançar os seus objectivos. O estudo da Usabilidade numa aplicação Web é particularmente importante para tornar o site mais eficiente e produtivo. Este artigo pretende dar algumas noções sobre este assunto.
Introdução à tipografia para a Internet
Imagem retirada do site 72dpi.
A tipografia pode ser considerada como uma arte, que tem como principal objectivo esculpir a informação escrita, procurando melhorar a comunicação entre o escritor e o leitor. A tipografia tem, claramente, um papel fundamental na passagem da mensagem pretendida.
As fontes a utilizar
Relativamente à tipografia na Web, não tem interesse ter-se uma grande quantidade de fontes para se utilizarem na construção de um site, uma vez que o número de fontes suportadas, por defeito, nos diferentes sistemas operativos é muito reduzido, sendo posteriormente essas as fontes tipicamente disponíveis aos visitantes das páginas. Esta lista de fontes suportadas em todos os sistemas operativos é vulgarmente conhecida por “the safe list”. Existem formas de utilizar fontes fora desta lista. Contudo, estes métodos ainda não são suportados por alguns browsers de Internet.
É tipicamente recomendável o uso de uma “font stack“ por forma a manter um design constante em diferentes sistemas operativos e em diferentes browsers.
Comprimento da linha
Para além do tipo de fonte, é também importante o comprimento da linha do texto. Linhas de texto curtas ou demasiado longas podem causar irritação ou um elevado grau de distracção para o leitor. Linhas demasiado curtas apenas devem ser utilizadas para textos muito pequenos, porque para textos grandes forçam o leitor a exageradas mudanças de linha o que acaba por ser um obstáculo à leitura. Relativamente a linhas excessivamente longas, estas tornam difícil a localização da próxima linha a ler, quando o leitor termina de ler a linha anterior. Para os principais conteúdos deverá ser respeitada uma medida entre 40 a 80 caracteres (incluindo espaços) para cada uma das linhas. Idealmente deve-se tentar atingir uma medida na ordem dos 65 caracteres.
Contraste
O contraste do texto é também muito importante para uma correcta leitura do seu conteúdo. Um aspecto importante a evitar é a utilização de cores complementares para as combinações entre o texto e seu respectivo fundo. Cores complementares são as cores que se situam do lado oposto uma da outra nos sistemas de cores. No sistema HSV são facilmente identificadas as cores complementares.
Tamanho da letra
O tamanho é outro aspecto a ter em conta. Existem alguns sites na Internet, inclusivamente já na era da Web 2.0, que insistentemente utilizam fontes muito pequenas em algumas porções de texto ou inclusivamente no texto todo. Se existe texto numa página, então deve-se conseguir ler facilmente o seu conteúdo, sendo que a adopção de fontes de tamanho muito pequeno em nada ajuda à leitura. Por conseguinte, sempre que possível, é aconselhável a utilização de tamanhos de fonte grandes e nunca abaixo dos 11 pixels.
Hierarquia
A hierarquia ao nível da importância de cada pedaço de texto presente numa página é um aspecto de grande influência na mensagem que se pretende passar ao visitante. Os diferentes tamanhos permitem, por um lado, evidenciar os elementos mais importantes numa página e, por outro, possibilitar a visualização de algo muito semelhante a um sumário sobre os assuntos que trata o site. Isto porque mesmo através de um simples piscar de olhos conseguem ser focados os temas e ideias principais de uma forma automaticamente estruturada pelo visitante. É aconselhável que o tamanho seja consistente ao longo de todas as páginas do site para manter alguma uniformização entre o mesmo tipo de componentes.
A localização dos conteúdos
Os visitantes reagem também de forma diferente aos textos conforme a sua localização na página. Tipicamente os textos colocados no corpo principal da página terão um impacto superior aos encontrados numa barra-lateral. Contudo, se pretendermos captar uma maior atenção do leitor para a barra-lateral, poderemos compensar, por exemplo, com um aumento do tamanho da letra nesta mesma barra-lateral. Particularmente neste aspecto da localização, é importante seguir algumas das convenções utilizadas na Internet de modo ao utilizador agir de forma instintiva ao primeiro contacto com a página.
A regra de Gutenberg dá algumas indicações importantes sobre este assunto, é possível ler alguma informação (em Inglês) sobre esta regra no site da NuvoGraphics.
Dar espaço para o texto respirar
O texto deve conseguir respirar e para isso deve ter espaço. Esse espaço permite focalizar a atenção do visitante no próprio texto que acaba por ser o mais importante para transmitir a mensagem. Uma regra seguida por muitos webdesigners é estabelecer, através do CSS, um espaçamento entre linhas de 140% o tamanho do texto.
Estes são alguns dos aspectos que penso serem importantes na âmbito da tipografia na Internet, se tiverem outros que considerem relevantes não hesitem em partilhar.
Anchors Menu um plugin para o WordPress
Desenvolvi um simples e pequeno plugin para o WordPress que intitulei de Anchors Menu. Este plugin funciona no formato de widget e permite gerar dinamicamente um menu com links que apontam para as palavras que se encontrem entre as tags HTML que forem seleccionadas.
Foi inicialmente pensado para criar ligações que apontassem para as palavras entre as tags de headings do HTML (h1, h2, h3…), contudo é possível utilizar este plugin para outros tipos de tags.
O plugin foi elaborado para dar resposta a uma necessidade imediata e por isso pode apresentar alguns aspectos menos elegantes ou optimizados, pelo que agradeço todas as eventuais correcções ou sugestões que possam fazer.
Podem consultar a página do plugin e efectuar o seu download no seguinte link: http://wordpress.org/extend/plugins/anchors-menu.