Para quem trabalha na web e está interessado ou colabora com profissionais de web design, aqui está uma lista de palavras e expressões essenciais para conhecer. Este glossário reúne todos os termos e suas definições relativos às ferramentas, tarefas e suportes dos web designers.
.AI ( Adobe Illustrator): Formato Adobe Illustrator para salvar documentos de imagens vetoriais .
Affordance : Em ergonomia, affordance é a capacidade de um objeto ou recurso sugerir seu próprio uso. Os principais elementos com affordance a serem considerados são botões e abas, links, ícones e campos de formulário, por exemplo. “Coloque CTA , coloque CTA brilhante” : uma frase que os profissionais da área saberão reconhecer!
Antialiasing (ou antialiasing ) : um processo que reduz o efeito de pixelização de um elemento gráfico ou de um caractere na tela.
Character Approach : Abordagem que define o espaço entre duas letras.
Estrutura em árvore : organização lógica das diferentes páginas de um site. Desta estrutura em árvore deriva a lógica de navegação e acesso à informação no site.
Banner de identidade (ou cabeçalho): área horizontal localizada na parte superior da página, na qual aparecem o logotipo e os elementos iconográficos que corporificam a marca, além de uma mensagem textual ( baseline ) em forma de bordão
Linha de base : é uma expressão simples e fácil de lembrar que impressiona e define o universo de uma marca. É frequentemente usado sob o logotipo ou na parte inferior de um documento de assinatura: “A mídia para profissionais digitais” .
Brief (ou especificações): documento escrito pelo patrocinador de um projeto, que define o contexto, especificidades e objetivos do projeto web. Especifica, em particular, as restrições técnicas e funcionais relacionadas à implementação do site. Também detalha os objetivos a serem alcançados em relação às metas de marketing. O brief é válido para qualquer projeto criativo, não apenas para um site (criação de logotipo, carta gráfica, documentos comerciais, campanha publicitária, etc.)
Carta editorial: a carta editorial de um site garante a homogeneidade do conteúdo em seus padrões de redação (calibração de rótulos, registro lexical, desagregação do texto, etc.). Essas regras de redação são determinadas de acordo com o público-alvo do site, com o objetivo de tornar a consulta das páginas mais relevante e eficaz. Concretamente, a carta editorial dá o tom, a atmosfera, o estilo…
Cinemática : sequência de telas de acordo com os possíveis cenários de navegação na interface.
CSS : código de computador que é usado para determinar a aparência de um site, independentemente de seu conteúdo.
CTA (Call To Action): link, botão ou visual chamando o internauta para realizar uma ação (cadastro, clique, etc.). A eficácia de um call to action depende sobretudo da qualidade visual do gancho para maximizar a taxa de realização do objetivo.
Clipping : Operação que consiste em separar um ou mais elementos do fundo de uma foto ou imagem.
DPI (Dot per inch ou DPI para “dot per inch”): indica a resolução de uma imagem digital. Este valor define o número de pixels usados por unidade de comprimento. (72 DPI para exibição na web).
Em : unidade de medida relativa usada para tipografia na web.
Serifa (com ou sem): serifas são as terminações das letras (ou serifas). Letras sem serifa são letras de bastão (ou sem serifa).
Ergonomia : um site ergonômico é um site que leva os visitantes de forma natural e rápida às informações que procuram e oferece conforto na navegação.
Template ( ou template ): modelo de layout, imagens e textos, que podem ser reaproveitados para várias páginas de um site para facilitar o seu desenvolvimento.
.GIF : um dos formatos de imagem mais usados na Internet (foi até eleito “Palavra do Ano” pela edição americana do dicionário Oxford University Press em 2012). Uma característica do GIF é o número de cores suportadas: no máximo 256 escolhidas da paleta RGB (16.777.216 tons), o que limita seu uso a imagens com poucos detalhes. Por outro lado, este formato oferece a vantagem de poder armazenar várias imagens no mesmo arquivo e possibilitar a criação de GIFs animados.
Designer gráfico (ou designer gráfico): profissional de comunicação que projeta, formata e coordena a produção de um processo de comunicação visual, a pedido de um patrocinador. Para isso, é levado a propor soluções conceituais e estratégicas adaptadas aos problemas de seus clientes. (definição retirada da carta de design gráfico do Sindicato dos designers gráficos – 1995).
Dressing (do site): dispositivo publicitário que consiste em assumir elementos de identidade visual de um anunciante, em especial suas cores e seu logotipo, para dar um aspecto personalizado às páginas de um site ou de uma newsletter. Esse tipo de dispositivo minimamente intrusivo geralmente é usado em conjunto com outros formatos.
Imagem vetorial: ao contrário das imagens de pixel, as imagens vetoriais usam linhas e formas. Um recurso que permite que essas imagens vetoriais sejam ampliadas mantendo sua nitidez e qualidade, o que não é o caso dos formatos de pixel.
Interface : parte visível de um site ou aplicativo, que o internauta vê em sua tela, e que permite ao sistema e ao internauta uma troca recíproca de informações.
Jpeg (jpg): formato de compressão de imagem digital.
Logotipo : assinatura visual que ajuda a identificar uma marca ou uma empresa. O logotipo pode ser tipográfico em sigla e/ou visual.
Modelo : o modelo funcional formaliza detalhadamente todo o conteúdo, títulos e funcionalidades presentes em um template de página. A maquete pode usar texto falso ( Lorem ipsum ) e imagens falsas. Destina-se a dar a impressão gráfica geral do projeto final.
Mobile First : conceito que consiste em projetar um site priorizando a versão mobile e adaptando-o gradualmente para telas maiores, ou seja, o oposto do conceito tradicional que consiste em degradar gradualmente um site para adaptá-lo para exibição em telas menores.
Mock-up : modelo gráfico simplificado de uma página web que visa representar as funcionalidades sem começar a estudar o aspecto visual. Este termo é um pouco usado em demasia hoje e também pode significar “modelo”.
Otimização (de peso da imagem): salve as imagens contidas em uma página, a partir do arquivo fonte PSD, escolhendo seu formato (GIF, JPG, PNG) e seu nível de compactação para obter uma exibição de qualidade e o máximo de luz possível.
Pictograma : um pictograma é a representação gráfica minimalista e inteligível de uma ação (assinatura de newsletter ou feed RSS, por exemplo), um recurso ou um tema, etc. O pictograma faz parte do sistema de sinalização de um site e difere de uma ilustração ou de um logotipo, pois seu objetivo é ajudar o internauta a identificar a informação que procura.
Pixel : menor elemento que compõe uma imagem digital ou a exibição de sua tela.
.PNG ( Portable Netword Graphic): formato de imagem que tem a possibilidade de ter um fundo transparente na web.
Protótipo: páginas funcionais clicáveis e interativas usadas regularmente para testes de usuários.
PSD (PhotoShop Data): formato de imagem nativo do Adobe Photoshop que compreende todas as camadas nas quais os elementos gráficos da imagem são distribuídos. O PSD é frequentemente mencionado na lista de entregas de um projeto web como o arquivo fonte para a criação gráfica.
Design responsivo : design de um site que permite se adaptar a todas as mídias: PC, tablet, smartphone, etc.
Resolução : Finura de renderização de um documento de computador em DPI ou PPP
RGB (Vermelho, Verde, Azul) : formato de codificação de cores, usado para todos os documentos destinados à exibição na tela. Assim como o código de cores HTML, o código de cores RGB vem na forma de 3 pares de códigos em números entre 0 e 255. Cada par representa a dosagem necessária de cada uma das cores primárias para obter a cor desejada. Esses três códigos representam respectivamente a dosagem de vermelho, verde e azul.
Cenário (ou storyboard): etapa de scripting que ocorre após a definição da estratégia do projeto web, e antes da fase de realização gráfica. O cenário define em detalhes (ao contrário do zoneamento ) a estrutura, a divisão e as interações em uma página.
UI : (interface do usuário) o que faz a ligação entre humano e máquina. É, portanto, “o produto acabado”, o resultado final de um site apresentado ao internauta, e no qual ele pode navegar facilmente, sem encontrar dificuldades. Mas não há consenso sobre as definições e a UI também pode ser considerada como um componente de UX . Nesse caso, a UI é a aparência gráfica, a personalidade da interface e é a UX que faz o link da HMI (interações homem-máquina).
UX : a experiência geral sentida pelo usuário ao usar uma interface, um dispositivo digital. Concordamos que o UX se baseia tanto na usabilidade, ou seja, na “facilidade de uso” de uma interface, quanto no impacto emocional sentido. Esses dois aspectos da experiência do usuário são essenciais e indissociáveis para qualificar uma experiência como “boa UX”.
Webdesign : design visual de um site que consiste na estruturação dos elementos gráficos do site: estrutura em árvore, criação da carta gráfica, estrutura dos conteúdos, da navegação, produção dos elementos para integração, etc. O objetivo do web designer é traduzir e reforçar a identidade visual da empresa, valorizando sua imagem por meio de elementos gráficos, garantindo ao visitante uma navegação fluida e ergonômica.
Webdesigner : o termo webdesigner é polissêmico, dependendo de seu uso anglo-saxão ou francês e também da cultura/organização da agência ou empresa. Usado em um contexto anglo-saxão, o termo inclui uma conotação criativa e técnica (codificação, programação). Em sua aceitação francesa, as atribuições do web designer dizem respeito mais à criação e variações gráficas.
Wireframe : diagrama simplificado de uma página de um sítio Web que permite indicar o conteúdo de cada bloco para estruturar a página e facilitar a comunicação entre os vários intervenientes na conceção de um sítio. Também conhecido como “ modelo ergonômico ”, “ caixas cinzas ”, etc.
Template : modelo gráfico, uma espécie de template, que permite construir visualmente uma página Web.
Zoneamento : divida a interface em tipos de zonas de conteúdo para estabelecer os primeiros níveis de leitura.
Spanish 
Portuguese 
English 
German 
Italian 
French