Layout da página

Anúncios e capas patrocinados por revistas de consumo dependem muito de habilidades profissionais de layout de página para competir pela atenção visual.

No design gráfico , o layout da página é o arranjo de elementos visuais em uma página . Geralmente envolve princípios organizacionais de composição para atingir objetivos de comunicação específicos. [1]

O layout de página de alto nível envolve decidir sobre o arranjo geral de texto e imagens, e possivelmente sobre o tamanho ou formato do meio. Ele requer inteligência, sensibilidade e criatividade, e é informado pela cultura, psicologia e o que os autores e editores do documento desejam comunicar e enfatizar. A paginação e a composição de baixo nível são processos mais mecânicos. Dados certos parâmetros, como limites de áreas de texto, tipo de letra e tamanho da fonte, a preferência de justificação pode ser feita de forma direta. Até a editoração eletrônica se tornar dominante, esses processos ainda eram feitos por pessoas, mas na publicação moderna, eles são quase sempre automatizados . O resultado pode ser publicado como está (como para o interior de uma lista telefônica residencial ) ou pode ser ajustado por um designer gráfico (como para uma publicação cara e altamente polida).

Começando com as primeiras páginas iluminadas em livros copiados à mão da Idade Média e prosseguindo até os intrincados layouts de revistas e catálogos modernos, o design de página adequado tem sido uma consideração em material impresso há muito tempo. Com a mídia impressa, os elementos geralmente consistem em tipo (texto), imagens (fotos) e, ocasionalmente, gráficos de espaço reservado para elementos que não são impressos com tinta, como corte a laser / matriz , estampagem em folha ou relevo cego .

O termo mobiliário de página pode ser usado para itens em uma página que não sejam o texto principal e as imagens, como manchetes , subtítulos ou legendas de imagens . [2]

História e tecnologias de layout

Configuração de página física direta

Com os manuscritos , todos os elementos são adicionados à mão, para que o criador possa determinar o layout diretamente ao criar a obra, talvez com um esboço avançado como guia. [3]

Na antiga impressão em xilogravura , todos os elementos da página eram esculpidos diretamente na madeira, embora decisões posteriores de layout pudessem precisar ser tomadas se a impressão fosse transferida para uma obra maior, como um grande pedaço de tecido, potencialmente com múltiplas impressões em bloco.

Com a invenção renascentista da impressão tipográfica e do tipo móvel de metal frio , a composição tipográfica era realizada pela montagem física de caracteres usando um bastão de composição em uma galera — uma bandeja longa. Quaisquer imagens seriam criadas por gravura .

O documento original seria um manuscrito escrito à mão; se a composição fosse feita por alguém que não fosse o artista do layout, uma marcação seria adicionada ao manuscrito com instruções sobre tipo de letra, tamanho da fonte e assim por diante. (Mesmo depois que os autores começaram a usar máquinas de escrever na década de 1860, os originais ainda eram chamados de "manuscritos" e o processo de marcação era o mesmo.)

Após a primeira rodada de composição, uma prova de galera pode ser impressa para que a revisão seja realizada, seja para corrigir erros no original ou para garantir que o tipógrafo tenha copiado o manuscrito corretamente e interpretado corretamente a marcação. O layout final seria construído em uma "forma" ou "forme" usando pedaços de madeira ou metal (" mobiliário ") para espaçar o texto e as imagens conforme desejado, uma moldura conhecida como chase e objetos que prendem a moldura conhecidos como quoins . Esse processo é chamado de imposição e potencialmente inclui organizar várias páginas para serem impressas na mesma folha de papel que mais tarde serão dobradas e possivelmente aparadas. Uma "prova de imposição" (essencialmente uma curta tiragem da impressora) pode ser criada para verificar o posicionamento final.

A invenção da composição tipográfica de metal quente em 1884 acelerou o processo de composição tipográfica ao permitir que os trabalhadores produzissem slugs —linhas inteiras de texto—usando um teclado. Os slugs eram o resultado de metal derretido sendo despejado em moldes temporariamente montados pela máquina de composição tipográfica. O processo de layout permaneceu o mesmo do tipo de metal frio, no entanto: montagem em galés físicas.

Era da colagem

Os editores trabalham na produção de uma edição do Bild , 1977, em Berlim Ocidental . As primeiras páginas anteriores estão afixadas na parede atrás deles.

A litografia offset permite que as áreas claras e escuras de uma imagem (primeiramente capturadas em filme) controlem a colocação da tinta na impressora. Isso significa que se uma única cópia da página puder ser criada em papel e fotografada, qualquer número de cópias poderá ser impresso. O tipo pode ser definido com uma máquina de escrever ou, para obter resultados profissionais comparáveis ​​à tipografia, uma máquina de composição especializada. O IBM Selectric Composer , por exemplo, pode produzir tipos de tamanhos diferentes, fontes diferentes (incluindo fontes proporcionais ) e com justificação de texto . Com a fotogravura e o meio-tom , as fotografias físicas podem ser transferidas para a impressão diretamente, em vez de depender de gravuras feitas à mão.

O processo de layout então se tornou a tarefa de criar a colagem , assim chamada porque cola de borracha ou outro adesivo seria usado para colar fisicamente imagens e colunas de texto em uma folha de papel rígida. As páginas concluídas se tornam conhecidas como prontas para a câmera , "mecânicas" ou "arte mecânica".

A fotocomposição foi inventada em 1945; após a entrada do teclado, os caracteres eram filmados um a um em um negativo fotográfico, que poderia então ser enviado diretamente para a gráfica ou filmado em papel fotográfico para colagem. Essas máquinas se tornaram cada vez mais sofisticadas, com modelos controlados por computador capazes de armazenar texto em fita magnética.

Publicação assistida por computador

À medida que as capacidades gráficas dos computadores amadureceram, eles começaram a ser usados ​​para renderizar caracteres, colunas, páginas e até assinaturas de várias páginas diretamente, em vez de simplesmente invocar um modelo fotográfico de um conjunto pré-fornecido. Além de serem usados ​​como dispositivos de exibição para operadores de computador, os tubos de raios catódicos eram usados ​​para renderizar texto para fotocomposição. A natureza curva do monitor CRT, no entanto, levou a distorções de texto e arte na tela em direção às bordas externas das telas. O advento dos monitores de "tela plana" (LCD, LED e, mais recentemente, OLED) em 1997 eliminou os problemas de distorção causados ​​por monitores CRT mais antigos. A partir de 2016, os monitores de tela plana substituíram quase completamente os monitores CRT. [4] [ referência circular ]

Impressoras conectadas diretamente a computadores permitiam que eles imprimissem documentos diretamente, em várias cópias, ou como um original que poderia ser copiado em uma máquina ditto ou fotocopiadora . Processadores de texto WYSIWYG tornaram possível para usuários de escritório em geral e consumidores fazer layouts de página mais sofisticados, usar justificação de texto e usar mais fontes do que era possível com máquinas de escrever. A impressão matricial inicial era suficiente para documentos de escritório, mas era de qualidade muito baixa para composição profissional. A impressão a jato de tinta e a impressão a laser produziam tipos de qualidade suficiente, e assim os computadores com esses tipos de impressoras substituíram rapidamente as máquinas de fotocomposição.

Com o software moderno de editoração eletrônica, como o principal software Adobe InDesign [5] e o Marq baseado em nuvem [6] , o processo de layout pode ocorrer inteiramente na tela. (Opções de layout semelhantes que estariam disponíveis para uma gráfica profissional que faz uma colagem são suportadas pelo software de editoração eletrônica; em contraste, o software de "processamento de texto" geralmente tem um conjunto muito mais limitado de opções de layout e tipografia disponíveis, trocando flexibilidade por facilidade de uso para aplicativos mais comuns.) Um documento finalizado pode ser impresso diretamente como a versão pronta para câmera, sem necessidade de montagem física (dada uma impressora grande o suficiente). As imagens em escala de cinza devem ser digitalmente em meio-tom se forem enviadas para uma impressora offset ou enviadas separadamente para a gráfica inserir nas áreas marcadas. Os trabalhos concluídos também podem ser transmitidos digitalmente para a gráfica, que pode imprimi-los, filmá-los diretamente ou usar a tecnologia de computador para chapa para pular totalmente o original físico. PostScript e Portable Document Format (PDF) se tornaram formatos de arquivo padrão para transmissão digital.

Mídia digital (não papel)

Desde o advento da computação pessoal , as habilidades de layout de página se expandiram para mídia eletrônica , bem como para mídia impressa. E-books , documentos PDF e páginas da web estáticas espelham documentos em papel relativamente de perto, mas os computadores também podem adicionar animação multimídia e interatividade. O layout de página para mídia interativa se sobrepõe ao design de interface e ao design de experiência do usuário ; uma "página" interativa é mais conhecida como interface gráfica do usuário (GUI).

As páginas da web modernas são normalmente produzidas usando HTML para conteúdo e estrutura geral, folhas de estilo em cascata para controlar detalhes de apresentação, como tipografia e espaçamento, e JavaScript para interatividade. Como essas linguagens são todas baseadas em texto, esse trabalho pode ser feito em um editor de texto ou em um editor HTML especial que pode ter recursos WYSIWYG ou outros auxílios. Tecnologias adicionais, como Macromedia Flash, podem ser usadas para conteúdo multimídia. Os desenvolvedores da web são responsáveis ​​por realmente criar um documento finalizado usando essas tecnologias, mas um web designer separado pode ser responsável por estabelecer o layout. Um determinado web designer pode ser um desenvolvedor web fluente também ou pode estar familiarizado com os recursos gerais das tecnologias e apenas visualizar o resultado desejado para a equipe de desenvolvimento.

Páginas projetadas

Os slides projetados usados ​​em apresentações ou entretenimento geralmente têm considerações de layout semelhantes às páginas impressas.

A lanterna mágica e o projetor opaco eram usados ​​durante palestras nos anos 1800, usando originais impressos, digitados, fotografados ou desenhados à mão. Dois conjuntos de filme fotográfico (um negativo e um positivo) ou um filme reverso podem ser usados ​​para criar imagens positivas que podem ser projetadas com luz passando. Intertítulos foram usados ​​extensivamente nos primeiros filmes quando o som não estava disponível; eles ainda são usados ​​ocasionalmente, além dos onipresentes cartões de vaidade e créditos .

Tornou-se popular usar filme transparente para apresentações (com texto e imagens opacos) usando retroprojetores na década de 1940, e projetores de slides na década de 1950. Transparências para retroprojetores podiam ser impressas por algumas fotocopiadoras. Programas de apresentação de computador tornaram-se disponíveis na década de 1980, tornando possível o layout de uma apresentação digitalmente. Apresentações desenvolvidas por computador podiam ser impressas em uma transparência com algumas impressoras a laser, transferidas para slides ou projetadas diretamente usando retroprojetores LCD . Apresentações modernas são frequentemente exibidas digitalmente usando um projetor de vídeo , monitor de computador ou televisão de tela grande .

Elaborar uma apresentação apresenta desafios ligeiramente diferentes de um documento impresso, especialmente porque uma pessoa normalmente estará falando e se referindo às páginas projetadas. Pode-se considerar:

  • Editar as informações apresentadas para que repitam o que o orador está dizendo (para que o público possa prestar atenção em qualquer um dos dois) ou apresentem apenas informações que não podem ser transmitidas verbalmente (para evitar dividir a atenção do público ou simplesmente ler os slides diretamente)
  • Tornar os slides úteis para referência posterior se impressos como folhetos ou publicados online
  • Ritmo, para que os slides sejam alterados em intervalos confortáveis, se ajustem à duração da palestra e a ordem do conteúdo corresponda às expectativas do palestrante
  • Fornecer uma maneira para o falante se referir a itens específicos na página, como com cores, rótulos verbais ou um apontador laser
  • Dimensionar texto e gráficos para que possam ser vistos do fundo da sala, o que limita a quantidade de informações que podem ser apresentadas em um único slide
  • Uso de animação para dar ênfase, introduzir informações lentamente ou ser divertido
  • Usar cabeçalhos, rodapés ou elementos repetidos para tornar todas as páginas semelhantes, para que pareçam coesas ou indiquem progresso
  • Usando títulos para introduzir novos tópicos ou segmentos

Grades versus modelos

Grades e modelos são padrões de design de layout de página usados ​​em campanhas publicitárias e publicações de várias páginas, incluindo sites.

Uma grade é um conjunto de diretrizes, que podem ser vistas no processo de design e invisíveis para o usuário final/público, para alinhar e repetir elementos em uma página. Um layout de página pode ou não permanecer dentro dessas diretrizes, dependendo de quanta repetição ou variedade o estilo de design na série exige. Grades são feitas para serem flexíveis. Usar uma grade para dispor elementos na página pode exigir tanta ou mais habilidade de design gráfico do que a que foi necessária para projetar a grade.

Em contraste, um template é mais rígido. Um template envolve elementos repetidos, principalmente visíveis ao usuário final/público. Usar um template para dispor elementos geralmente envolve menos habilidade de design gráfico do que a necessária para projetar o template. Templates são usados ​​para modificação mínima de elementos de fundo e modificação frequente (ou troca) de conteúdo de primeiro plano.

A maioria dos softwares de editoração eletrônica permite grades na forma de uma página preenchida com linhas coloridas ou pontos colocados a uma distância horizontal e vertical especificada. Margens automáticas e linhas de lombada de livreto (medianiz) podem ser especificadas para uso global em todo o documento. Várias linhas horizontais e verticais adicionais podem ser colocadas em qualquer ponto da página. Formas invisíveis para o usuário final/público podem ser colocadas na página como diretrizes para layout de página e processamento de impressão também. Os modelos de software são obtidos duplicando um arquivo de dados de modelo ou com recursos de página mestra em um documento de várias páginas. As páginas mestras podem incluir elementos de grade e elementos de modelo, como elementos de cabeçalho e rodapé, numeração automática de páginas e recursos automáticos de índice.

Layouts estáticos versus dinâmicos

Layouts estáticos permitem mais controle sobre a estética e otimização completa do espaço ao redor e sobreposição de conteúdo de formato irregular do que layouts dinâmicos. Em web design , isso às vezes é chamado de layout de largura fixa; mas o layout inteiro pode ser escalável em tamanho, mantendo as proporções originais, posicionamento estático e estilo do conteúdo. Todos os formatos de imagem raster são layouts estáticos em vigor, mas um layout estático pode incluir texto pesquisável separando o texto dos gráficos.

Em contraste, páginas eletrônicas permitem layouts dinâmicos com troca de conteúdo, personalização de estilos, dimensionamento de texto, dimensionamento de imagem ou conteúdo refluível com tamanhos de página variáveis, geralmente chamados de layout fluido ou líquido. Layouts dinâmicos são mais propensos a separar a apresentação do conteúdo , o que traz suas próprias vantagens. Um layout dinâmico dispõe todo o texto e imagens em áreas retangulares de linhas e colunas. Como as larguras e alturas dessas áreas são definidas como porcentagens da tela disponível, elas respondem a diferentes dimensões de tela. Elas garantirão automaticamente o uso maximizado do espaço disponível, ao mesmo tempo em que permanecem sempre adaptadas de forma otimizada tanto aos redimensionamentos na tela quanto às restrições fornecidas pelo hardware. O texto pode ser redimensionado livremente para atender às necessidades individuais dos usuários em legibilidade, sem nunca perturbar as proporções de um determinado layout. O arranjo geral do conteúdo na tela dessa forma pode sempre permanecer como foi projetado originalmente.

O design de layout estático pode envolver mais habilidades de design gráfico e artes visuais, enquanto o design de layout dinâmico pode envolver mais habilidades de design interativo e gerenciamento de conteúdo para antecipar completamente a variação do conteúdo.

Motion graphics não se encaixam perfeitamente em nenhuma das categorias, mas podem envolver habilidades de layout ou consideração cuidadosa de como o movimento pode afetar o layout. Em ambos os casos, o elemento de movimento o torna um layout dinâmico, mas que garante design de motion graphic mais do que design gráfico estático ou design interativo.

As páginas eletrônicas podem utilizar recursos de layout estáticos e dinâmicos, dividindo as páginas ou combinando os efeitos. Por exemplo, uma seção da página, como um banner da web, pode conter gráficos estáticos ou em movimento contidos em uma área de conteúdo de troca. Texto dinâmico ou ao vivo pode ser envolvido em torno de imagens de formato irregular usando espaçadores invisíveis para empurrar o texto para longe das bordas. Alguns algoritmos de computador podem detectar as bordas de um objeto que contém transparência e conteúdo de fluxo em torno de contornos.

Front-end versus back-end

Com a recuperação de conteúdo de mídia moderna e tecnologia de saída, há muita sobreposição entre comunicações visuais ( front-end ) e tecnologia da informação ( back-end ). Publicações em letras grandes (livros grossos, especialmente de natureza instrucional) e páginas eletrônicas (páginas da web) exigem metadados para indexação automática, reformatação automática, publicação de banco de dados, exibição dinâmica de página e interatividade do usuário final. Muitos dos metadados ( meta tags ) devem ser codificados manualmente ou especificados durante o processo de layout da página. Isso divide a tarefa de layout da página entre artistas e engenheiros, ou atribui ao artista/engenheiro a tarefa de fazer as duas coisas.

Projetos mais complexos podem exigir dois designs separados: design de layout de página como front-end e codificação de função como back-end. Nesse caso, o front-end pode ser projetado usando uma tecnologia de layout de página alternativa, como software de edição de imagem ou em papel com métodos de renderização manual. A maioria dos softwares de edição de imagem inclui recursos para converter um layout de página para uso em um editor "What You See Is What You Get" ( WYSIWYG ) ou recursos para exportar gráficos para software de editoração eletrônica. Editores WYSIWYG e software de editoração eletrônica permitem o design front-end antes da codificação back-end na maioria dos casos. O design de interface e a publicação de banco de dados podem envolver mais conhecimento técnico ou colaboração com engenharia de tecnologia da informação no front-end. Às vezes, uma função no back-end é automatizar a recuperação e a organização do conteúdo no front-end.

Elementos e escolhas de design

O layout da página pode ser prescrito em maior ou menor grau por um estilo de casa que pode ser implementado em um modelo específico de editoração eletrônica. Também pode haver relativamente pouco layout a ser feito em comparação à quantidade de paginação (como em romances e outros livros sem figuras).

As decisões típicas de layout de página incluem:

Os elementos específicos a serem dispostos podem incluir:

Na produção de jornais, a seleção final e o corte de fotografias que acompanham as histórias podem ser deixados para o editor de layout (já que a escolha da foto pode afetar o formato da área necessária e, portanto, o resto do layout), ou pode haver um editor de fotos separado. Da mesma forma, as manchetes podem ser escritas pelo editor de layout, um editor de texto ou o autor original.

Para fazer com que as histórias se ajustem ao layout final, ajustes de texto relativamente inconsequentes podem ser feitos (por exemplo, reformulação para brevidade), ou o editor de layout pode fazer pequenos ajustes em elementos tipográficos, como tamanho da fonte ou espaçamento entre linhas.

Bloco flutuante

Um bloco flutuante na escrita e publicação é qualquer gráfico, texto, tabela ou outra representação que não esteja alinhada ao fluxo principal do texto. O uso de blocos flutuantes para apresentar imagens e tabelas é uma característica típica da escrita acadêmica e técnica , incluindo artigos científicos e livros. Blocos flutuantes são normalmente rotulados com uma legenda ou título que descreve seu conteúdo e um número que é usado para se referir à figura do texto principal. Um sistema comum divide o bloco flutuante em duas séries numeradas separadamente, rotuladas figura (para imagens, diagramas, gráficos , etc.) e tabela . Um nome alternativo para figura é imagem ou gráfico .

Blocos flutuantes são ditos flutuantes porque eles não são fixos em posição na página no local, mas sim flutuam para o lado da página. Ao colocar imagens ou outros itens grandes nas laterais das páginas [7] em vez de incorporá-los no meio do fluxo principal do texto, a composição tipográfica é mais flexível e a interrupção do fluxo da narrativa é evitada.

Por exemplo, um artigo sobre geografia pode ter "Figura 1: Mapa do mundo", "Figura 2: Mapa da Europa", "Tabela 1: População dos continentes", "Tabela 2: População dos países europeus", e assim por diante. Alguns livros terão uma tabela de figuras — além do índice — que lista centralmente todas as figuras que aparecem na obra.

Outros tipos de blocos flutuantes também podem ser diferenciados, por exemplo:

Barra lateral: [8] Para digressões da narrativa principal. Por exemplo, um manual técnico sobre o uso de um produto pode incluir exemplos de como várias pessoas empregaram o produto em seu trabalho em barras laterais. Também chamado de intermezzo . Veja barra lateral (publicação) .
Programa: Artigos e livros sobre programação de computadores geralmente colocam código e algoritmos em uma figura.
Equação: Escrever sobre matemática pode colocar grandes blocos de notação matemática em blocos numerados separados do texto principal.

Apresentando layouts em desenvolvimento

Um mockup de um layout pode ser criado para obter feedback antecipado, geralmente antes que todo o conteúdo esteja realmente pronto. Seja para mídia impressa ou eletrônica, o primeiro rascunho de um layout pode ser simplesmente um esboço em papel e lápis. Um layout abrangente para uma nova revista pode mostrar espaços reservados para texto e imagens, mas demonstrar posicionamento, estilo tipográfico e outros idiomas destinados a definir o padrão para edições reais ou uma edição específica inacabada. Um wireframe de site é uma maneira de baixo custo de mostrar o layout sem fazer todo o trabalho de criar o HTML e CSS final e sem escrever a cópia ou criar quaisquer imagens.

O texto Lorem ipsum é frequentemente usado para evitar o constrangimento que qualquer cópia de amostra improvisada pode causar se publicada acidentalmente. Da mesma forma, imagens de espaço reservado são frequentemente rotuladas como " somente para posição ".

Veja também

Referências

  1. ^ O'Connor, Z (2014). Elementos e princípios do design: Ferramentas para imagens digitais, arte e design .
  2. ^ Ribbans, Elisabeth (31 de janeiro de 2023). "Os perigos de usar jargões jornalísticos fora da redação". The Guardian . Recuperado em 25 de junho de 2023 .
  3. ^ Philippe Bobichon, Le léxico: Mise en page et mise en texte des manuscrits hébreux, grecs, latins, romans et arabes, Paris, Aedilis, 2008.
  4. ^ Tela plana
  5. ^ "Compre Adobe InDesign CC – Software de editoração eletrônica e editor online". www.adobe.com .
  6. ^ "Software de layout de página gratuito". marq.com . 26 de maio de 2015.
  7. ^ Novas perspectivas sobre JavaScript e AJAX, abrangente. p. VS-B2.
  8. ^ Sams Aprenda Dreamweaver CS5 sozinho em 24 horas. p. 406.
  • Página SGML em www.xml.org
  • Símbolos – Todos os artigos categorizados como relacionados a símbolos tipográficos
  • Grupo de usuários do TeX
  • Página XML em www.W3C.org
Obtido em "https://pt.wikipedia.org/w/index.php?title=Layout_de_página&oldid=1251670816"