Webinsider

Design - Usabilidade e AI - Criação

Conceitos de design: função, letras, cores e formas

27 de setembro de 2007, 16:49

Não sabe bem o que é design, mas tem simpatia? Leia para ter uma compreensão mais clara da função do design e um roteiro para iniciar estudos. Se entendeu e empolgou, é isso mesmo.

Por Agni

Design é uma palavra da moda, usada uma porção de coisas, que nem sempre tem relação com design. Aparece em capas de revista, temas de palestras, cursos e campanhas publicitárias. As várias interpretações e o pouco esclarecimento sobre a real função do design geram confusão e atrapalham o processo de criação.

Tio, o que é design?

Design refere-se ao projeto visual e funcional de um produto (em nosso caso um website). É adaptar um produto à necessidade dos seus usuários, cativar o seu uso através da estética, aplicar conceitos e usabilidade à sua forma.

Alguns profissionais, empresas, cursos, matérias de revistas e conversas de botequim associam o design à produção de imagens ou manipulação de um software específico.

No entanto, os softwares são apenas ferramentas e não garantem a qualidade do projeto. Nenhum software deve ser encarado como uma solução pronta. Existem diversos programas com funções similares e a escolha sobre qual utilizar é de cada um. A definição do que é design vai muito além do Photoshop.

O design é uma área projetual. É responsável por gerar desempenho, qualidade, durabilidade e aparência a um produto. Cada trabalho a ser realizado exige planejamento, pesquisa, criatividade e técnica. Ao contrário do que muitos pensam, a função do design não está vinculada pura e simplesmente à produção de imagens.

A função do design, além da estética, é tornar um produto funcional. É transformar informação em comunicação

Na produção de um website (assim como em outros produtos) deve-se elaborar um projeto coerente, que forneça soluções eficientes e eficazes em usabilidade, desempenho e comunicação, focadas nas necessidades do público alvo. Não é apenas um trabalho criativo, mas também de planejamento e de pesquisa. Produzir um website inevitavelmente exige “pensar”.

Portanto, além da manipulação de softwares, existem alguns métodos de planejamento e pesquisa que se deve conhecer. Além ainda de conhecimentos conceituais sobre como trabalhar a pregnância da forma.

Tio, por onde começar o projeto?

Inicialmente, devem ser coletadas e organizadas as informações para o projeto. Utilizar elementos dentro de qualquer peça gráfica sem um estudo do caso é um equívoco que compromete a comunicação e a funcionalidade.

Há que se levar em consideração fatores como o objetivo do projeto, o produto a ser divulgado, o público alvo (sexo, idade, cultura, classe social, etc), identidade visual, motivações etc. Para realizar tal estudo do caso, nada melhor do que ter em mãos um briefing bem elaborado.

O ideal para a elaboração desse documento é reunir-se com o cliente, tirando suas dúvidas, esclarecendo detalhes e orientando-o sobre conceitos e tecnologias. Quando esse processo de elaboração não é possível de se realizar com o cliente, pode-se enviar a ele um documento com perguntas a serem respondidas, o que nem sempre é satisfatório.

É possível encontrar vários modelos e exemplos de briefing na web, dando uma noção de como esse documento deve ser feito. No entanto o ideal é não seguir um modelo, e sim elaborá-lo sempre de acordo com a necessidade do projeto.

Após a análise do briefing e com as devidas pesquisas feitas, o próximo passo é a arquitetura da informação. Como organizar a estrutura da interface e a distribuição das informações em categorias, além de priorizar a comunicação de informações mais relevantes. O documento apropriado para especificar a ordem e o posicionamento dos elementos que vão compor a página é o wireframe. Através de uma forma esquemática, ele representa a distribuição e a hierarquia das informações a serem comunicadas.

A partir dos posicionamentos do wireframe é que se constrói o layout.

Cada elemento do layout deve ter uma função

Uma vez que uma das funções do design é transformar informação em comunicação, nenhum elemento dentro do layout deve estar lá sem comunicar algo.

Elementos desnecessários podem confundir, poluir e dificultar o acesso e o entendimento das informações. Para um bom trabalho, é necessário fazer um estudo de conceitos visuais e de comunicação e saber porque usar determinadas cores, fontes e formas, em função da imagem e das sensações que esses elementos transmitem ao usuário.

As cores têm poder de comunicação bem maior do que se imagina. É importante saber trabalhar com a psicodinâmica das cores, para que elas transmitam a imagem e as sensações orientadas no briefing. Cada cor transmite informações, sensações e emoções diferentes. Uma boa introdução neste assunto é encontrada no site Color in Motion, que por meio de uma animação, dá exemplos de sensações e emoções que cada cor pode representar.

Para elaborar a paleta de cores de um site, é importante saber como trabalhar as combinações cromáticas. Por mais que se saiba que cores transmitem as sensações desejadas, é essencial saber combiná-las. Nesta tarefa é essencial ter em mãos um círculo cromático.

Uma ótima ferramenta que pode nos auxiliar na elaboração de uma paleta de cores é encontrada no endereço kuler.adobe.com.

Toda idéia a ser transmitida é traduzida através de letras

Outro fato que se deve ter em mente é que toda idéia a ser transmitida é traduzida através de letras. Sendo assim, é importante ter um bom conhecimento de como trabalhar com a Tipografia.

Para comunicar uma idéia deve-se trabalhar com fontes que priorizem a legibilidade e que tenham relação com o contexto do projeto. Deve-se saber, por exemplo, que fontes com serifas não são indicadas para textos na web, pois a baixa resolução dos monitores faz com que as serifas se sobreponham, o que dificulta a leitura. Porém, em títulos elas podem ter um bom resultado decorativo. Fontes sem serifa conseguem obter melhor leitura no monitor, principalmente se trabalhadas com um bom entrelinhamento.

Existem diversas famílias tipográficas, cada qual com uma aplicação especifica, de acordo com o contexto. Saber escolher bem as fontes a serem usadas é um ponto importante na comunicação.

Outro fator que auxiliará na pregnância da forma é a aplicação das leis da Gestalt em nosso projeto. Segundo a Wikipédia, Gestalt é um termo intraduzível do alemão, utilizado para abarcar a teoria da percepção visual baseada na psicologia da forma.

Aprendendo a analisar as manifestações visuais e objetos ao redor, compreendemos melhor porque algumas formas agradam e outras não (e assim podemos trabalhar esses fatores em nossos projetos). O estudo da Gestalt compreende a “integração das partes em oposição à soma do todo: estrutura, figura e forma”. Leis da Gestalt (como unificação e segregação, fechamento, boa continuidade, proximidade e semelhança) ajudam a orientar o processo de criação e obter resultados satisfatórios.

Uma boa referência de estudo sobre o assunto é o livro “Gestalt do Objeto: Leitura Visual da Forma”, do professor João Gomes Filho.

Os processos e conceitos necessários para se tornar um designer não se encerram aqui. Outros conhecimentos, como semiótica, antropologia, arte, técnicas de composição e a busca de boas influências são essenciais na formação de um profissional. Porém, a partir daqui pode-se ter uma compreensão mais clara do que é design e uma direção para iniciar os estudos. [Webinsider]

Conteúdo retirado da aula “Conceitos de Design - Letras, Cores e Formas”, ministrada aos alunos do Curso de Web Design Developer, do módulo de Projeto, em 31/08/2007, na Microcamp Internacional - São Bernardo.

.

Sobre o autor

AgniAgni (ou Eduardo Santos) é diretor de arte, professor e palestrante, com foco no desenvolvimento com web standards e design em software livre. Mantém o blog Agni.art.br.

Apoio:

  • LayerDev Serviços de Webhosting Profissional

Palavras-chave relacionadas a este texto: [ formação profissional ] [ briefing ]

Comentários

14 pessoas comentaram o artigo "Conceitos de design: função, letras, cores e formas"

Henrique G N Data: 27/09/2007 às 8:30 pm

Atividade:

Cidade:

Excelente!

Vinicius Serpa Data: 28/09/2007 às 10:39 am

Atividade:

Cidade:

Bom artigo! Só um aspecto que tenho notado em vários autores é relacionar o designer ao profissional da computação gráfica (como o próprio Agni escreveu).

Entendo que design se refere à projeto e os processos de projetos de software para web (dentre eles sites e sistemas web) tiveram que ser readaptados devido à importância do aspecto visual e subjetivo.

Mas designer, no sentido de projetista, possui habilidades referentes à sua área de atuação. Existe por exemplo designer´s de softwares corporativos, no caso os programadores e analistas de sistemas, que se preocupam menos com conceitos visuais e subjetivos e se baseiam mais em lógica e processos, utilizando técnicas de modelagem, diagramas, etc, e que ao invés de realizar um “briefing”, eles fazem um “levantamento de requisitos”, o que no final das contas significa a mesma coisa. Caso esse software corporativo seja baseado em Internet, ai entram também todos os aspectos de um sistema web no projeto como os citados no artigo.

Cesar Zeppini Data: 28/09/2007 às 11:18 am

Atividade: Publicitário

Cidade: Indaiatuba-SP

Como publicitário me especializei em design para web (wireframe, interfaces, tudo direcionado ao target). Gostei muito da matéria pois ela mostra justamente o que um designer faz (e muitos designers não saberiam explicar de tal forma).

Uma dica para quem estiver lendo e se interesse pela área. Uma das coisas mais importantes para um designer obter sucesso é a atualização de referências. Estar sempre visitando novos sites, lendo novas revistas, buscando tendências e referências visuais por aí, tudo isso para estar sempre “informado” sobre o que acontece no design de hoje em dia… um bom site é o www.bluevertigo.com.ar. Um site argentino que possui referências sobre diversos ícones de design.

edson Data: 10/10/2007 às 4:22 pm

Atividade:

Cidade:

fantastico!

Julio Data: 09/11/2007 às 4:48 am

Atividade: Administrador de Empresas

Cidade: Mogi das Cruzes

Parabéns pelo exelente trabalho.

Carlos Data: 21/11/2007 às 8:58 am

Atividade:

Cidade:

Realmente uma ótima descrição!
Me tirou muitas duvidas e tabus que eu possuia a respeito do design.
Obrigado

Eneias Data: 27/12/2007 às 11:56 am

Atividade: Designer

Cidade: Manaus

Leiaaaaaaaaaaaaaaaaaaaaaaaa :)

Tadeu Data: 18/02/2008 às 7:34 pm

Atividade: Tecnico de Design Industrial

Cidade: Porto

Bom artigo, mas poruqe só valorizar o Design Gráfico? Enquanto podemos falar de trabalho em conjunto? Sera demasida dar o braço a torcer e valorizar as outras vertentes do design?

O design, enquanto método de trabalho, é a ciência que estuda, projecta e desenvolve a fabricação dos objectos. Esta definição não pode ser compreendida, como algo que esta completa, porque o design não tem uma própria explicação, definição.
Hoje em dia, com os conhecimentos técnicos e científicos, o desenvolvimento tecnológico e os processos de fabrico, a produção de objectos é desenvolvida segundo um processo mais rigoroso, específico e cada vez mais avançado.
O design está infiltrado em diferentes áreas; consoante os processos de concepção dos diferentes tipos de forma e respectivas funções.

O design não é uma ciência inventada nos nossos dias..

O conceito do design é design como a técnica do design; o design como actividade de resolução de problemas; o design como actividade criativa; o design como actividade sistemática; o objectivo do design;

A profissão de designer é considerada como:
- Uma disciplina orientada para a melhoria das características de uso dos produtos;
- Uma disciplina destinada a dessuprir as necessidades humanas através de objectos.
- Uma disciplina orientada para melhoria de qualidade ambiental, na medida em que esta é determinada pelos objectos.
- Uma disciplina destinada a cunhar a fisionomia dos produtos e a conferir com a qualidade estética.
- Um juízo crítico na estruturação do mundo dos objectos.
- Um instrumento de aumento de produtividade.
Uma actividade inovadora no âmbito de outras disciplinas tecnológicas.
- Uma actividade coordenadora no desenvolvimento e na planificação dos produtos.
- Um processo para incrementar o volume de vendas e o lucro de uma empresa.

A relação com o papel que o design industrial pode desempenhar nos países não industrializados, sendo-lhes atribuído o papel de instrumento no processo de industrialização dos países dependentes.

Nem todo o universo dos produtos industriais recai no campo específico do design industrial. O seu trabalho limita-se sobretudo à gama de produtos com o qual o homem em contacto directo, perspectivo e\ou operativo, isto é, à realização efectiva do seu valor de uso, como um fenómeno sensível como algo de que se pode ter uma experiência visulatáctil e simbólica.

Este elenco deixa em aberto a questão do papel que o designer industrial desempenha relativamente á realização do capital - uma questão central para a distinguir claramente entre o design socialista e o design capitalista.
O design industrial é frequentemente colocado a par daquele que fabrica invólucros, tal como a profissão do engenheiro é frequentemente reduzida ao simples calculo.
Ao design industrial é concebida a circunscrição do estético, do superficial, do não técnico ou técnico perifericamente, ao engenheiro concede-se o campo verdadeiramente tecnológico e racional.
O designer industrial resolve situações não estruturadas servindo-se de métodos de trabalho não quantitativos para tratar aquelas dimensões de um problema para as quais os processos quantificadores encontram os seus limites e demonstram a sua inadequação. O seu procedimento não é menos racional do que a utilização da régua de cálculo.
A Afirmação de que um produto deva ser funcional em primeiro lugar demonstra um positivismo banal, seria sim necessário analisar o pressuposto subentendido no qual se baseia, ou seja, que a aparência do valor de uso constitui uma realidade acidental e acessória.

jivaldo Data: 06/05/2008 às 1:50 pm

Atividade: artes plastica

Cidade: camacan

nemhum e otimo

10° luana Data: 15/05/2008 às 7:09 pm

Atividade: pessoal

Cidade: são Paulo

gostei muito do comentario so tenho uma duvida os professores não sabem se espressar claramente.

luana leticia.

11° Erica Diana Lima Data: 22/05/2008 às 7:10 pm

Atividade: ……

Cidade: Belford Roxo

Tenho muito interesse em fazer um curso, pois ja trabalho com grafica em casa, mas sinto que não sei muita coisa.

12° Diego santos rosa Data: 30/07/2008 às 10:21 am

Atividade: tecnico em manutenção industrial/leitor de projetos

Cidade: feira de santana

adorei a materia muito rica em informação só pecou em um requesito, para quem não sabe ou para quem esta chegado agora na area tenhde usar uma linguagem mas simples e o designer vc só especificol o designer grafico esquecendo na area industrisl o designer de altocarde que hj é o mestre na area saindo ate da sua espanção industrial começando a ver outros horizontes.

parabens de verdade.

13° Dony Lima Data: 11/08/2008 às 8:49 am

Atividade: Design

Cidade: Rio de Janeiro

Tenh interesse em fazer tembém o curso, pois trabalho com design em bolsas artistica e artesanais em minha própria casa.
E lendo o comentário reconheço que tenho muito o que aprender.
Abraço Dony
Me responda, Ok!

14° marco Data: 12/11/2008 às 10:40 pm

Atividade: designer

Cidade: Coimbra - Portugal

Muitos parabéns!
Muito bem explicado.
Claro que é dificil abranger tudo sem esquecer ou deixar de lado tudo o que é importante. Mas no geral, agni esteve bem.
Tadeu também dá um excelente contributo para este artigo. Por isso temos um trabalho de equipa.

Parabéns a ambos!

Avisos
Os ítens com asterisco ( * ) são campos de preenchimento obrigatório.
Todos os links inseridos nos comentários possuem o atributo rel="nofollow" para impedir com que user agents (como os mecanismos de busca) sigam os links inseridos para desestimular spammers.
Todos devem se identificar através de e-mail válido.
Os e-mails dos usuários não serão divulgados no site.
Comentários:

Preencha os dados abaixo e clique em enviar

Outrolado.com.br

Leia

O cliente não tem razão (e precisa ser convencido)– Quero uma coisa nova, diferente de tudo o que já existe por ai!, diz o cliente. E prossegue: – Meu site precisa ter uma animação na abertura, com uma música bem legal de fundo. E arremata: - Mas tem que ser clean! Por Sérgio Mari Jr

Dez passos para a criação de uma campanha onlineNão existem verdades absolutas na hora que criar uma boa iniciativa em mídia interativa. Mas se você está no meio deste processo, estes itens podem ajudar. Por Moacyr Netto

Metodologia e gerenciamento de projetos em agênciasA maneira como algumas agências estão estruturadas hoje precisa mudar para que a divisão dos poderes não atrapalhe o gerente de projetos e o trabalho de equipes que fazem parte do core business, como o planejamento. Por Ricardo Cavallini

Marcos Nähr

O que é preciso para ser um bom designer?Quando uma idéia é rejeitada, muitas vezes é a apresentação que está sendo rejeitada e não a idéia em si. Por Marcos Nähr

O que você vai ser quando crescer? Designer!Não leia se você não for um designer. Este texto vai parecer despropositado e sem senso, pois foi escrito em uma frequência que só um deles poderá captar. Por Claudio Martins

Programas que facilitam o trabalho de designChega o momento em que você precisa de fotos gratuitas de boa qualidade, de fontes diferentes… E que tal um testador de sites em diferentes browers? Conheça estas opções muito úteis. Por Rogério Favero

Briefing, você tem que fazer. Siga este roteiro.As pessoas entopem seus canais criativos com conceitos negativos e acreditam que não sabem criar. Use este modelo para montar o seu briefing e verá a criatividade fluir. Por Renato Fridschtein

Vicente Tardin

Ergodesign e arquitetura da informaçãoLivro de Luiz Agner começou aqui no Webinsider. Por Vicente Tardin

Arquitetura da informação para os que chegam agoraLouis Rosenfeld e Peter Morville foram autores pioneiros em arquitetura da informação para websites. O famoso livro com o urso polar na capa permanece atual e referência desde que foi lançado, em 1998. Por Guilhermo Reis

A recriação do Webinsider: a segunda interfaceDepois de completar seis anos com a mesma cara e o mesmo sistema gerenciador de conteúdo desenvolvido pré-xhtml, cuidamos de migrar para uma nova plataforma, com diversas melhorias. Por Henrique Costa Pereira

Cezar Calligaris

Briefing onlineComo organizar um, sem esquecer nada. Por Cezar Calligaris

Wireframe, documento cada vez mais importanteO primo pobre do layout é fundamental para o trabalho do arquiteto de informação porque auxilia a equipe de desenvolvimento na tarefa de produzir o site de maneira mais rápida, padronizada e eficiente. Por Leonardo Oliveira

Tipologia ou tipografia? Não use o termo errado.Muita gente se engana quando usa o termo tipologia para se referir à classificação do desenho de letras do alfabeto e de caracteres usados para formar as palavras. Neste caso o tipo é outro. Por Sergio D Stefano

Webinsider