Para quem trabalha na web e est\u00e1 interessado ou colabora com profissionais de web design, aqui est\u00e1 uma lista de palavras e express\u00f5es essenciais para conhecer. Este gloss\u00e1rio re\u00fane todos os termos e suas defini\u00e7\u00f5es relativos \u00e0s ferramentas, tarefas e suportes dos web designers.<\/p>\n\n\n\n
.AI (<\/strong> Adobe Illustrator): Formato Adobe Illustrator para salvar documentos de imagens vetoriais .<\/strong><\/p>\n\n\n\n Affordance<\/strong> : Em ergonomia, affordance \u00e9 a capacidade de um objeto ou recurso sugerir seu pr\u00f3prio uso. Os principais elementos com affordance a serem considerados s\u00e3o bot\u00f5es e abas, links, \u00edcones e campos de formul\u00e1rio, por exemplo. \u201cColoque CTA<\/strong> , coloque CTA brilhante\u201d <\/em> : uma frase que os profissionais da \u00e1rea saber\u00e3o reconhecer!<\/p>\n\n\n\n Antialiasing (ou antialiasing <\/strong>)<\/strong> : um processo que reduz o efeito de pixeliza\u00e7\u00e3o de um elemento gr\u00e1fico ou de um caractere na tela. <\/em><\/p>\n\n\n\n Character Approach<\/strong> : Abordagem que define o espa\u00e7o entre duas letras.<\/p>\n\n\n\n Estrutura em \u00e1rvore<\/strong> : organiza\u00e7\u00e3o l\u00f3gica das diferentes p\u00e1ginas de um site. Desta estrutura em \u00e1rvore deriva a l\u00f3gica de navega\u00e7\u00e3o e acesso \u00e0 informa\u00e7\u00e3o no site.<\/p>\n\n\n\n Banner de identidade (ou cabe\u00e7alho):<\/strong> \u00e1rea horizontal localizada na parte superior da p\u00e1gina, na qual aparecem o logotipo e os elementos iconogr\u00e1ficos que corporificam a marca, al\u00e9m de uma mensagem textual ( baseline<\/strong> ) em forma de bord\u00e3o<\/p>\n\n\n\n Linha<\/strong> de base : \u00e9 uma express\u00e3o simples e f\u00e1cil de lembrar que impressiona e define o universo de uma marca. \u00c9 frequentemente usado sob o logotipo ou na parte inferior de um documento de assinatura: \u201cA m\u00eddia para profissionais digitais\u201d<\/em> .<\/p>\n\n\n\n Brief<\/strong> (ou especifica\u00e7\u00f5es): documento escrito pelo patrocinador de um projeto, que define o contexto, especificidades e objetivos do projeto web. Especifica, em particular, as restri\u00e7\u00f5es t\u00e9cnicas e funcionais relacionadas \u00e0 implementa\u00e7\u00e3o do site. Tamb\u00e9m detalha os objetivos a serem alcan\u00e7ados em rela\u00e7\u00e3o \u00e0s metas de marketing. O brief \u00e9 v\u00e1lido para qualquer projeto criativo, n\u00e3o apenas para um site (cria\u00e7\u00e3o de logotipo, carta gr\u00e1fica, documentos comerciais, campanha publicit\u00e1ria, etc.)<\/p>\n\n\n\n Carta editorial:<\/strong> a carta editorial de um site garante a homogeneidade do conte\u00fado em seus padr\u00f5es de reda\u00e7\u00e3o (calibra\u00e7\u00e3o de r\u00f3tulos, registro lexical, desagrega\u00e7\u00e3o do texto, etc.). Essas regras de reda\u00e7\u00e3o s\u00e3o determinadas de acordo com o p\u00fablico-alvo do site, com o objetivo de tornar a consulta das p\u00e1ginas mais relevante e eficaz. Concretamente, a carta editorial d\u00e1 o tom, a atmosfera, o estilo…<\/p>\n\n\n\n Cinem\u00e1tica<\/strong> : sequ\u00eancia de telas de acordo com os poss\u00edveis cen\u00e1rios de navega\u00e7\u00e3o na interface.<\/p>\n\n\n\n CSS<\/strong> : c\u00f3digo de computador que \u00e9 usado para determinar a apar\u00eancia de um site, independentemente de seu conte\u00fado.<\/p>\n\n\n\n CTA <\/strong> (Call To Action): link, bot\u00e3o ou visual chamando o internauta para realizar uma a\u00e7\u00e3o (cadastro, clique, etc.). A efic\u00e1cia de um call to action depende sobretudo da qualidade visual do gancho para maximizar a taxa de realiza\u00e7\u00e3o do objetivo.<\/p>\n\n\n\n Clipping<\/strong> : Opera\u00e7\u00e3o que consiste em separar um ou mais elementos do fundo de uma foto ou imagem.<\/p>\n\n\n\n DPI<\/strong> (Dot per inch ou DPI para \u201cdot per inch\u201d): indica a resolu\u00e7\u00e3o de uma imagem digital. Este valor define o n\u00famero de pixels usados \u200b\u200bpor unidade de comprimento. (72 DPI para exibi\u00e7\u00e3o na web).<\/p>\n\n\n\n Em<\/strong> : unidade de medida relativa usada para tipografia na web.<\/p>\n\n\n\n Serifa<\/strong> (com ou sem): serifas s\u00e3o as termina\u00e7\u00f5es das letras (ou serifas). Letras sem serifa s\u00e3o letras de bast\u00e3o (ou sem serifa).<\/p>\n\n\n\n Ergonomia<\/strong> : um site ergon\u00f4mico \u00e9 um site que leva os visitantes de forma natural e r\u00e1pida \u00e0s informa\u00e7\u00f5es que procuram e oferece conforto na navega\u00e7\u00e3o.<\/p>\n\n\n\n Template<\/strong> ( ou template<\/strong> ): modelo de layout, imagens e textos, que podem ser reaproveitados para v\u00e1rias p\u00e1ginas de um site para facilitar o seu desenvolvimento.<\/p>\n\n\n\n .GIF<\/strong> : um dos formatos de imagem mais usados \u200b\u200bna Internet (foi at\u00e9 eleito \u201cPalavra do Ano\u201d pela edi\u00e7\u00e3o americana do dicion\u00e1rio Oxford University Press em 2012). Uma caracter\u00edstica do GIF \u00e9 o n\u00famero de cores suportadas: no m\u00e1ximo 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\u00e1rias imagens no mesmo arquivo e possibilitar a cria\u00e7\u00e3o de GIFs animados.<\/p>\n\n\n\n Designer gr\u00e1fico<\/strong> (ou designer gr\u00e1fico): profissional de comunica\u00e7\u00e3o que projeta, formata e coordena a produ\u00e7\u00e3o de um processo de comunica\u00e7\u00e3o visual, a pedido de um patrocinador. Para isso, \u00e9 levado a propor solu\u00e7\u00f5es conceituais e estrat\u00e9gicas adaptadas aos problemas de seus clientes. (defini\u00e7\u00e3o retirada da carta de design gr\u00e1fico do Sindicato dos designers gr\u00e1ficos \u2013 1995).<\/p>\n\n\n\n Dressing<\/strong> (do site): dispositivo publicit\u00e1rio que consiste em assumir elementos de identidade visual de um anunciante, em especial suas cores e seu logotipo, para dar um aspecto personalizado \u00e0s p\u00e1ginas de um site ou de uma newsletter. Esse tipo de dispositivo minimamente intrusivo geralmente \u00e9 usado em conjunto com outros formatos.<\/p>\n\n\n\n Imagem vetorial:<\/strong> ao contr\u00e1rio 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\u00e3o \u00e9 o caso dos formatos de pixel.<\/p>\n\n\n\n Interface<\/strong> : parte vis\u00edvel de um site ou aplicativo, que o internauta v\u00ea em sua tela, e que permite ao sistema e ao internauta uma troca rec\u00edproca de informa\u00e7\u00f5es.<\/em><\/p>\n\n\n\n Jpeg<\/strong> (jpg): formato de compress\u00e3o de imagem digital.<\/p>\n\n\n\n Logotipo<\/strong> : assinatura visual que ajuda a identificar uma marca ou uma empresa. O logotipo pode ser tipogr\u00e1fico em sigla e\/ou visual.<\/p>\n\n\n\n Modelo<\/strong> : o modelo funcional formaliza detalhadamente todo o conte\u00fado, t\u00edtulos e funcionalidades presentes em um template de p\u00e1gina. A maquete pode usar texto falso ( Lorem ipsum<\/em> ) e imagens falsas. Destina-se a dar a impress\u00e3o gr\u00e1fica geral do projeto final.<\/p>\n\n\n\n Mobile First<\/strong> : conceito que consiste em projetar um site priorizando a vers\u00e3o mobile e adaptando-o gradualmente para telas maiores, ou seja, o oposto do conceito tradicional que consiste em degradar gradualmente um site para adapt\u00e1-lo para exibi\u00e7\u00e3o em telas menores.<\/p>\n\n\n\n Mock-up<\/strong> : modelo gr\u00e1fico simplificado de uma p\u00e1gina web que visa representar as funcionalidades sem come\u00e7ar a estudar o aspecto visual. Este termo \u00e9 um pouco usado em demasia hoje e tamb\u00e9m pode significar \u201cmodelo\u201d.<\/p>\n\n\n\n Otimiza\u00e7\u00e3o<\/strong> (de peso da imagem): salve as imagens contidas em uma p\u00e1gina, a partir do arquivo fonte PSD, escolhendo seu formato (GIF, JPG, PNG) e seu n\u00edvel de compacta\u00e7\u00e3o para obter uma exibi\u00e7\u00e3o de qualidade e o m\u00e1ximo de luz poss\u00edvel.<\/p>\n\n\n\n Pictograma<\/strong> : um pictograma \u00e9 a representa\u00e7\u00e3o gr\u00e1fica minimalista e intelig\u00edvel de uma a\u00e7\u00e3o (assinatura de newsletter ou feed RSS, por exemplo), um recurso ou um tema, etc. O pictograma faz parte do sistema de sinaliza\u00e7\u00e3o de um site e difere de uma ilustra\u00e7\u00e3o ou de um logotipo, pois seu objetivo \u00e9 ajudar o internauta a identificar a informa\u00e7\u00e3o que procura.<\/p>\n\n\n\n Pixel<\/strong> : menor elemento que comp\u00f5e uma imagem digital ou a exibi\u00e7\u00e3o de sua tela.<\/p>\n\n\n\n .PNG <\/strong>(<\/strong> Portable Netword Graphic): formato de imagem que tem a possibilidade de ter um fundo transparente na web.<\/p>\n\n\n\n Prot\u00f3tipo:<\/strong> p\u00e1ginas funcionais clic\u00e1veis \u200b\u200be interativas usadas regularmente para testes de usu\u00e1rios.<\/p>\n\n\n\n PSD<\/strong> (PhotoShop Data): formato de imagem nativo do Adobe Photoshop que compreende todas as camadas nas quais os elementos gr\u00e1ficos da imagem s\u00e3o distribu\u00eddos. O PSD \u00e9 frequentemente mencionado na lista de entregas de um projeto web como o arquivo fonte para a cria\u00e7\u00e3o gr\u00e1fica.<\/p>\n\n\n\n Design responsivo<\/strong> : design de um site que permite se adaptar a todas as m\u00eddias: PC, tablet, smartphone, etc.<\/p>\n\n\n\n Resolu\u00e7\u00e3o<\/strong> : Finura de renderiza\u00e7\u00e3o de um documento de computador em DPI<\/strong> ou PPP<\/p>\n\n\n\n RGB (Vermelho, Verde, Azul)<\/strong> : formato de codifica\u00e7\u00e3o de cores, usado para todos os documentos destinados \u00e0 exibi\u00e7\u00e3o na tela. Assim como o c\u00f3digo de cores HTML, o c\u00f3digo de cores RGB vem na forma de 3 pares de c\u00f3digos em n\u00fameros entre 0 e 255. Cada par representa a dosagem necess\u00e1ria de cada uma das cores prim\u00e1rias para obter a cor desejada. Esses tr\u00eas c\u00f3digos representam respectivamente a dosagem de vermelho, verde e azul.<\/p>\n\n\n\n Cen\u00e1rio<\/strong>\u00a0(ou storyboard): etapa de scripting que ocorre ap\u00f3s a defini\u00e7\u00e3o da estrat\u00e9gia do projeto web, e antes da fase de realiza\u00e7\u00e3o gr\u00e1fica.\u00a0O cen\u00e1rio define em detalhes (ao contr\u00e1rio do\u00a0zoneamento<\/strong>\u00a0) a estrutura, a divis\u00e3o e as intera\u00e7\u00f5es em uma p\u00e1gina.<\/p>\n\n\n\n UI <\/strong> : (interface do usu\u00e1rio) o que faz a liga\u00e7\u00e3o entre humano e m\u00e1quina. \u00c9, 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\u00e3o h\u00e1 consenso sobre as defini\u00e7\u00f5es e a UI tamb\u00e9m pode ser considerada como um componente de UX<\/strong> . Nesse caso, a UI \u00e9 a apar\u00eancia gr\u00e1fica, a personalidade da interface e \u00e9 a UX que faz o link da HMI (intera\u00e7\u00f5es homem-m\u00e1quina).<\/p>\n\n\n\n UX<\/strong> : a experi\u00eancia geral sentida pelo usu\u00e1rio ao usar uma interface, um dispositivo digital. Concordamos que o UX se baseia tanto na usabilidade, ou seja, na \u201cfacilidade de uso\u201d de uma interface, quanto no impacto emocional sentido. Esses dois aspectos da experi\u00eancia do usu\u00e1rio s\u00e3o essenciais e indissoci\u00e1veis \u200b\u200bpara qualificar uma experi\u00eancia como \u201cboa UX\u201d.<\/p>\n\n\n\n Webdesign<\/strong> : design visual de um site que consiste na estrutura\u00e7\u00e3o dos elementos gr\u00e1ficos do site: estrutura em \u00e1rvore, cria\u00e7\u00e3o da carta gr\u00e1fica, estrutura dos conte\u00fados, da navega\u00e7\u00e3o, produ\u00e7\u00e3o dos elementos para integra\u00e7\u00e3o, etc. O objetivo do web designer<\/strong> \u00e9 traduzir e refor\u00e7ar a identidade visual da empresa, valorizando sua imagem por meio de elementos gr\u00e1ficos, garantindo ao visitante uma navega\u00e7\u00e3o fluida e ergon\u00f4mica.<\/p>\n\n\n\n Webdesigner<\/strong> : o termo webdesigner \u00e9 poliss\u00eamico, dependendo de seu uso anglo-sax\u00e3o ou franc\u00eas e tamb\u00e9m da cultura\/organiza\u00e7\u00e3o da ag\u00eancia ou empresa. Usado em um contexto anglo-sax\u00e3o, o termo inclui uma conota\u00e7\u00e3o criativa e t\u00e9cnica (codifica\u00e7\u00e3o, programa\u00e7\u00e3o). Em sua aceita\u00e7\u00e3o francesa, as atribui\u00e7\u00f5es do web designer dizem respeito mais \u00e0 cria\u00e7\u00e3o e varia\u00e7\u00f5es gr\u00e1ficas.<\/p>\n\n\n\n Wireframe<\/strong> : diagrama simplificado de uma p\u00e1gina de um s\u00edtio Web que permite indicar o conte\u00fado de cada bloco para estruturar a p\u00e1gina e facilitar a comunica\u00e7\u00e3o entre os v\u00e1rios intervenientes na conce\u00e7\u00e3o de um s\u00edtio. Tamb\u00e9m conhecido como \u201c modelo ergon\u00f4mico<\/em> \u201d, \u201c caixas cinzas<\/em> \u201d, etc.<\/p>\n\n\n\n Template<\/strong> : modelo gr\u00e1fico, uma esp\u00e9cie de template, que permite construir visualmente uma p\u00e1gina Web.<\/p>\n\n\n\n Zoneamento<\/strong> : divida a interface em tipos de zonas de conte\u00fado para estabelecer os primeiros n\u00edveis de leitura.<\/p>","protected":false},"excerpt":{"rendered":" Para quem trabalha na web e est\u00e1 interessado ou colabora com profissionais de web design, aqui est\u00e1 uma lista de palavras e express\u00f5es essenciais para conhecer. Este gloss\u00e1rio re\u00fane todos os termos e suas defini\u00e7\u00f5es relativos \u00e0s ferramentas, tarefas e suportes dos web designers. .AI ( Adobe Illustrator): Formato Adobe Illustrator para salvar documentos de imagens vetoriais . […]<\/p>","protected":false},"author":1,"featured_media":4061,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[341],"tags":[342],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/nearjob.com.br\/fr\/wp-json\/wp\/v2\/posts\/4060"}],"collection":[{"href":"https:\/\/nearjob.com.br\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nearjob.com.br\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nearjob.com.br\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nearjob.com.br\/fr\/wp-json\/wp\/v2\/comments?post=4060"}],"version-history":[{"count":1,"href":"https:\/\/nearjob.com.br\/fr\/wp-json\/wp\/v2\/posts\/4060\/revisions"}],"predecessor-version":[{"id":4062,"href":"https:\/\/nearjob.com.br\/fr\/wp-json\/wp\/v2\/posts\/4060\/revisions\/4062"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nearjob.com.br\/fr\/wp-json\/wp\/v2\/media\/4061"}],"wp:attachment":[{"href":"https:\/\/nearjob.com.br\/fr\/wp-json\/wp\/v2\/media?parent=4060"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nearjob.com.br\/fr\/wp-json\/wp\/v2\/categories?post=4060"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nearjob.com.br\/fr\/wp-json\/wp\/v2\/tags?post=4060"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}