Linguagem de web designer: um guia para seus clientes

Publicados: 2019-11-09

Cada comércio tem sua própria linguagem. Como web designer, você é fluente na sopa de letrinhas de termos de sites como UX, CSS e HTML. Mas seus clientes? Poderia muito bem ser grego para eles.

Há enormes benefícios em educar seus clientes sobre os termos mais comuns de web design antes mesmo de mergulhar no processo de design. Independentemente do nível de conhecimento, quando você pula o básico, acaba gastando mais tempo em ligações telefônicas traduzindo terminologia, em vez de discutir seu trabalho e ideias de design.

Para ajudar a manter seus clientes atualizados, compilei os termos mais comuns de web design e os traduzi para uma linguagem amigável ao cliente.

Aqui estão 7 termos essenciais de design de sites:

  • Imagem do herói
  • UX
  • Estrutura de arame
  • Arquitetura de informação
  • Compatível com dispositivos móveis
  • HTML, CSS e JavaScript
  • CMS


Imagem do herói

Ao projetar um site, você ouvirá frequentemente o termo “imagem heroica” em referência à página inicial do site. Embora o termo possa evocar imagens de Batman e Superman, isso não significa que seu designer está colocando uma imagem de super-heróis em seu site.

Um esboço ilustrado de um site, com a imagem principal (no topo) sendo o principal ponto focal do site
A imagem principal é a grande imagem ou vídeo de destaque na seção superior da página inicial de um site.

A imagem principal é a imagem de destaque grande ou o plano de fundo do vídeo na seção superior da página inicial de um site. As pessoas começaram a se referir a esta área como uma imagem de herói porque é uma parte tão importante do site. É a primeira coisa que qualquer visitante vê ao acessar seu site e, portanto, o design precisa ser cativante e significativo.

Embora o termo “imagem de herói” contenha a palavra imagem, esta seção do site não precisa necessariamente ser uma imagem estática. Hoje, vídeos de heróis são muito comuns, geralmente sendo reproduzidos em segundo plano atrás de algum texto. Dependendo dos objetivos do site e do estilo de design, você pode até ver a animação usada nesta área do site.


UX ou experiência do usuário

UX é uma abreviação de experiência do usuário. Alguns web designers se especializam em design de UX – o processo de aprimorar a experiência total de um visitante do site em seu site. O design de UX é considerado uma especialização porque o designer não cria apenas a aparência do site, mas considera como um visitante experimenta suas primeiras (e subsequentes!) visitas ao site.

Uma analogia simples para a experiência do usuário é compará-la com a experiência que você pode ter em um novo restaurante. A comida pode ser ótima, mas se o restaurante demorar uma eternidade para te acomodar e os banheiros forem nojentos e o estacionamento for um pesadelo, você provavelmente deixará de ir lá novamente. Há muito mais fatores do que a comida que podem afetar sua experiência em um restaurante.

O mesmo pode ser dito sobre sites, e é disso que se trata a experiência do usuário. Envolver e manter um visitante em seu site não é apenas ter um bom design. Um web designer que entende de UX design considera como tudo no site afeta a experiência geral do usuário.


Estrutura de arame

Durante a maioria dos projetos de sites, sua equipe da Web primeiro criará um wireframe de uma página da Web antes de criar uma maquete de design.

Um wireframe é basicamente um blueprint e mostra onde certos elementos e texto serão colocados na página.

Uma ilustração que mostra um layout aproximado de um site. Há círculos para mostrar onde o logotipo iria, caixas para mostrar onde as seções e imagens iriam e linhas tracejadas para mostrar onde estaria o texto.
Um wireframe é um modelo que mostra onde determinados elementos e texto serão colocados na página.

Construir um site é semelhante ao processo de construção de uma casa. Você começa com um arquiteto e cria um projeto antes que o designer de interiores comece seu trabalho, caso contrário você pode acabar com um banheiro na cozinha. Um wireframe é uma ferramenta extremamente útil porque permite que você colabore com o estrategista ou designer da web e mova as coisas com mais facilidade do que uma maquete de design.

Se você já viu um exemplo de wireframe, notará que ele tem semelhanças com uma planta de construção; o wireframe é tipicamente preto e branco com caixas e contornos básicos para mostrar onde os elementos serão colocados.


Arquitetura da informação (IA)

Além de um wireframe, você normalmente trabalhará na Arquitetura da Informação para seu site no início do processo. A Arquitetura da Informação, muitas vezes chamada de AI, refere-se ao processo de organizar, priorizar e rotular o conteúdo do site.

Nesta fase, você decidirá quais páginas do site serão incluídas na navegação superior do site e como o conteúdo será estruturado. A navegação superior é a série de links na parte superior da página. Essa navegação superior está em todas as páginas do site e ajuda a orientar os visitantes da web para o conteúdo mais importante.

Semelhante ao wireframe, a Arquitetura da Informação final é uma representação organizacional do seu site. Muitas vezes, parece um diagrama e é uma ferramenta crítica para orientar a equipe da web para garantir que o site final seja lógico e intuitivo para navegar.


Compatível com dispositivos móveis

Hoje, todo site precisa funcionar para uma variedade de dispositivos, como telefones, tablets e computadores desktop. É nesse contexto que você costuma ouvir um web designer usar o termo “responsivo a dispositivos móveis”.

A responsividade móvel significa que já existe tecnologia embutida na própria plataforma.

A maioria das plataformas de sites como o WordPress são responsivas a dispositivos móveis, o que significa que já existe tecnologia incorporada na própria plataforma para que o conteúdo se ajuste automaticamente ao tamanho do dispositivo do usuário.

Pense em como seu celular funciona. Se você girar o telefone horizontalmente, o conteúdo do telefone será ajustado automaticamente.

Isso é muito parecido com o que acontece no site. Devido à tecnologia responsiva a dispositivos móveis, os web designers e desenvolvedores não precisam mais criar uma segunda versão do seu site para dispositivos menores. O mesmo conteúdo e design serão exibidos adequadamente em diferentes tamanhos de dispositivos.

Um web designer habilidoso leva isso em consideração ao projetar o site e pode orientá-lo a escrever conteúdo que funcione tanto em dispositivos móveis quanto em telas maiores.


HTML, CSS e JavaScript

Não deixe que esses termos técnicos o intimidem. Cada um está relacionado a como seu design passa de uma imagem estática para se tornar uma página da Web interativa e ao vivo. Normalmente, você começará a criar seu site com um web designer especializado em como o site ficará e será organizado. Em seguida, você passará a trabalhar com um desenvolvedor da Web ou uma equipe de desenvolvimento que codificará o site.

É mais provável que você ouça esses termos durante o estágio de desenvolvimento da construção do seu site, mas eles também podem aparecer nas discussões de design.

HTML significa HyperText Markup Language e permite que uma equipe da Web diga a um navegador da Web como exibir um pedaço de texto. HTML usa tags diferentes para indicar se o texto é um título, subtítulo ou parágrafo. Você pode ver um designer rotular um título em seu design como H1. Isso está se referindo à tag HTML que será usada para informar ao navegador que todo o texto com esse rótulo deve estar no mesmo tamanho de fonte.

Cascading Style Sheets (CSS) ajudam um web designer e desenvolvedor a definir a aparência do site. HTML por si só não é atraente ou atraente. CSS faz toda a diferença na criação de um belo design de página da web.

JavaScript é uma linguagem de script que os desenvolvedores usam para criar as interações no site. Com apenas HTML e CSS, você tem uma página web bonita, mas nada pode acontecer com apenas esses dois. Ao procurar um desenvolvedor web ou equipe de desenvolvimento, procure alguém que saiba muito mais do que apenas JavaScript e certifique-se de que sua equipe tenha experiência na plataforma em que você está construindo o site.


CMS

Vamos encerrar com um termo bem fácil: sistema de gerenciamento de conteúdo, também conhecido como CMS. Você costuma ouvir esse termo em relação ao WordPress (outro sistema de gerenciamento de conteúdo).

Na verdade, o WordPress é o sistema de gerenciamento de conteúdo mais popular do mundo. Um CMS é uma ferramenta de back-end no site e permite editar ou adicionar conteúdo facilmente ao site.

O grande benefício de construir seu site em um CMS como o WordPress é que você não precisa ser um web designer ou desenvolvedor web para alterar o texto, adicionar imagens ou adicionar páginas após o lançamento do site. Você não precisará ligar para o desenvolvedor da Web toda vez que precisar adicionar uma vírgula a uma página.

Como o WordPress é extremamente flexível e personalizável, você obtém o melhor dos dois mundos com um belo site que ainda é fácil de gerenciar para sua empresa.


Confira mais conteúdo do WordPress!

local-wordpress-desenvolvimento-ambiente-porque-grande

O WordPress é o sistema de gerenciamento de conteúdo mais popular do mundo e está sendo usado por mais e mais criativos todos os dias. Saiba mais sobre o WordPress aqui. Não importa se você é iniciante ou conhece o WordPress como a palma da sua mão, temos recursos e artigos para todos!

Continue lendo aqui.