20 Termos do setor de design da Web para o cliente sem clareza
Na indústria de web design, usamos muitos termos internos. Isso não só dificulta a introdução de novatos, particularmente clientes que não estão envolvidos na indústria do design, mas comunicar seu significado corretamente pode, às vezes, ser um grande desafio.
Neste glossário, nós coletamos 20 termos de design da web usados com frequência e adicionei uma breve explicação para cada um, para que qualquer um possa rapidamente dar uma olhada neles em caso de qualquer incerteza. Se você tem um cliente que realmente precisa de um curso intensivo de jargão de web design, compartilhe este artigo com eles.
“Animação”
Uma técnica de web design que adiciona movimento para elementos na tela, a fim de visualize a mudança ou para atrair a atenção dos usuários.
Animações são mais poderoso que transições, como eles podem passar por muitos estados diferentes entre seus pontos de início e fim, portanto eles podem ser usados para efeitos mais complicados.
“Breadcrumb”
UMA tipo de navegação que informa os usuários sobre seus localização atual em um site.
Breadcrumbs contém o caminho em que a página atual pode ser acessada a partir da home page, geralmente no formato de Casa / Categoria / Página. Cada elemento do caminho também é clicável para que os usuários possam rapidamente navegar pela hierarquia do site. Breadcrumbs são geralmente exibidos no topo de cada página.
“Desordem”
Um erro de web design, um indicador de um página mal projetada.
Nós falamos sobre uma página desordenada quando o designer espremeu muita informação na mesma página sem adicionar espaço em branco suficiente e estruturar adequadamente o conteúdo. Páginas desorganizadas têm baixa legibilidade, e prejudicar a experiência do usuário.
“Esquema de cores”
UMA coleção de harmonizar cores usado para criar um identidade de marca reconhecível.
Normalmente, o mesmo esquema de cores é usado consistentemente através do site da marca, aplicativo móvel, logotipo e materiais de marketing. Um esquema de cores pode ser projetado de acordo com princípios diferentes, existem esquemas de cores monocromáticas, análogas, complementares, triádicas e outras.
“Contraste”
Uma técnica de design para enfatize as diferenças entre elementos que têm papéis ou significados diferentes.
Usando cores complementares (opostos na roda de cores) são a maneira mais conhecida de expressar contraste, no entanto diferenças visuais na forma, estilo, tipografia ou layout dos elementos da página que queremos distinguir também pode alcançar um efeito contrastante.
“Estado Vazio”
Um estado específico de um site ou aplicativo quando há ainda não há conteúdo em uma determinada página, no entanto, os elementos de design são já em seu lugar.
Estados de primeiro uso, como perfis vazios, são exemplos típicos de páginas de estado vazias. Eles exigem técnicas de design específicas (como design de integração) que informar usuários sobre o que deve estar na página e encoraje-os para realizar certas atividades.
“Layout Fixo”
UMA tipo de layout em que um site e seus elementos use a mesma largura em todas as resoluções, definido em valores estáticos (geralmente pixels).
A maneira tradicional de construir sites. Raramente escolhido para sites mais novos, já que sites com layouts fixos dificilmente podem ser usados (legíveis) em telas de dispositivos móveis. Para permanecer acessível para usuários móveis, muitos sites de layout fixo usam site para celular secundário.
“Design plano”
UMA UI linguagem de design que concentra-se em estilos limpos e minimalistas, e remove texturas, padrões, gradientes e outros efeitos sofisticados para ajudar os usuários melhor foco no conteúdo.
Design plano tem sido criticado por problemas de usabilidade decorrentes da falta de tridimensionalidade. Mais maduro Flat 2.0 design languages, como o material design do Google, apareceram como uma resposta e adicionaram um pouco de profundidade ao design plano.
“Layout Fluido”
UMA tipo de layout naquela usa unidades relativas definir a largura de um site e seus elementos.
As unidades relativas mais usadas para layouts de fluido são percentagens, mas ems e rems também pode ser usado. Um layout fluido redimensiona (alonga e encolhe) como a largura da viewport muda. Ao contrário de layouts responsivos, um layout fluido não usa consultas de mídia. Também conhecido como disposição líquida.
“Dobra”
O lado inferior da parte visível da tela.
O termo “acima da dobra” refere-se à parte de uma página da web que os visitantes podem ver sem tomar qualquer ação, enquanto “abaixo da dobra” refere-se ao resto da página que os usuários podem só alcança interagindo com o site - geralmente rolando ou deslizando (no celular).
Recomenda-se colocar elementos de marca (por exemplo, o logotipo), navegação no local, e conteúdo atraente acima da dobra para que os usuários entendam rapidamente a finalidade do site e se interessem pelo resto do conteúdo.
“Degradação Graciosa”
Uma estratégia de web design que inclui todos os recursos avançados por padrão, em um site, depois remove ou simplifica coisas que não funcionam em navegadores mais antigos, em dispositivos menos capazes ou em larguras de banda menores.
Focos mais na aparência do que no conteúdo. Na era móvel, o aprimoramento progressivo tornou-se a estratégia de web design predominante para novos sites, a degradação graciosa é usada principalmente em sites mais antigos ou legados.
“Imagem do herói”
Um oversized banner de imagem colocou acima da dobra.
Imagens de herói são imagens de alta qualidade, geralmente de largura total, relevantes para o conteúdo do site. Em cima deles, há tipicamente um texto curto (uma ou duas linhas) que transmite uma mensagem aos usuários, e um botão de call to action que os convoca a realizar uma determinada ação, como fazer compras ou inscrever-se no site.
“Landing Page”
Originalmente, qualquer página em que visitante online entra em um site. Recentemente, o termo é usado para uma página autônoma projetada para finalidade comercial específica.
Por exemplo, se os usuários da web seguirem um banner, eles frequentemente se encontrarão em uma página de destino que os chama para comprar um produto relevante. Landing pages com um foco único e um call-to-action claro tendem a alcançar taxas de conversão mais altas.
“Carregamento lento”
Uma técnica para carregar imagens e outros conteúdos estáticos, como vídeos, apenas pouco antes de ficar visível para o usuário.
Se um site usar carregamento lento, somente as imagens acima da dobra serão carregadas primeiro, o restante será carregado somente quando (se) o usuário percorrer a página. Frequentemente usado em design responsivo e móvel economiza recursos. Por exemplo, o Google AMP acelera os sites para dispositivos móveis carregamento lento de recursos estáticos por padrão.
“Consulta de Mídia”
Um recurso CSS que faz web design responsivo possível, permitindo que os designers criem designs diferentes para diferentes dimensões do dispositivo (largura e / ou altura), orientações (paisagem ou retrato) e tipos de mídia (impressão, tela, etc.).
Normalmente, sites responsivos tem layouts separados para telas de desktop, tablet e celular, o pontos de interrupção entre eles são definido por consultas de mídia adicionado ao CSS.
“Aprimoramento Progressivo”
Uma estratégia de web design que primeiro adiciona apenas os elementos básicos para um site, que funcionam em qualquer navegador, largura de banda e dispositivo. Recursos front-end mais avançados (estilos e interatividade) são carregado em camadas depois.
Melhoria progressiva principalmente concentra-se no conteúdo, resulta em sites que são acessível para todos os usuários, portanto, é a forma predominante de construir sites na era móvel (em oposição à degradação graciosa).
“Design Responsivo”
Uma abordagem de web design para criar sites que ajustar para as dimensões de diferentes tipos de dispositivos (mais frequentemente móveis, tablets e computadores de mesa) ao projetar diferentes layouts e outros estilos (por exemplo, tipografia, tamanho da imagem) para eles.
O design responsivo faz uso de várias técnicas, como unidades relativas, grades flexíveis, e consultas de mídia para atender a todos os usuários com conteúdo utilizável, legível e acessível. A maioria dos sites modernos usa design responsivo.
“Skeuomorphism”
Uma linguagem de design de interface do usuário que aproveita princípio da familiaridade, e se concentra na criação de elementos de design que assemelham-se ao seu equivalente no mundo real.
Por exemplo, botões que se parecem com botões da vida real usando efeitos como bisel e relevo, sombras, gradientes e outros. Antes do design plano se tornar predominante, o skeuomorphism foi a tendência líder de design da Web por muitos anos.
“Transição”
Uma técnica de web design para visualizando mudanças simples quando um elemento na tela suavemente altera entre um estado inicial e final.
Transições - ao contrário de animações - não tem estados intermediários, apenas um ponto inicial e final, portanto, eles devem ser usados para mudanças sutis, como para visualizar pairar estados.
“Espaço em branco”
o espaço em branco entre elementos de design adjacentes. Também conhecido como espaço negativo.
Espaço em branco ajuda os usuários skim o conteúdo, e visualmente indica hierarquia de conteúdo. O espaço em branco não é necessariamente branco, mas usa a cor de plano de fundo do site. A falta de espaço em branco suficiente leva a página desordenada.
