Layout da página

Da Wikipédia, a enciclopédia livre
Ir para navegação Pular para pesquisar

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

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

O layout de página de alto nível envolve a decisão sobre o arranjo geral do texto e das imagens e, possivelmente, o tamanho ou a forma da mídia. Requer inteligência, sensibilidade e criatividade e é informado pela cultura, psicologia e pelo 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, a fonte e o tamanho da fonte, a preferência de justificação pode ser feita de maneira direta. Até que a editoração eletrônica se tornasse 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 uma lista telefônica residencial interior) 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 adequado das páginas sempre foi considerado no material impresso. 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 / morrer , estampagem de folha ou relevo cego .

Tecnologias de história e layout

Direto configuração página física

Com os manuscritos , todos os elementos são adicionados à mão, de modo que o criador pode determinar o layout diretamente à medida que cria o trabalho, talvez com um esboço avançado como guia.

Com a impressão de xilogravura antiga , todos os elementos da página eram esculpidos diretamente na madeira, embora decisões posteriores de layout precisem ser feitas se a impressão for transferida para uma obra maior, como um grande pedaço de tecido, potencialmente com várias impressões de bloco.

Com a invenção renascentista da impressão tipográfica e dos tipos móveis de metal frio , a composição foi realizada pela montagem física dos personagens usando uma vara de composição em uma cozinha - uma longa bandeja. Todas as imagens seriam criadas por gravura .

O documento original seria um manuscrito escrito à mão; se a composição foi executada por alguém que não seja o artista do layout, uma marcação seria adicionada ao manuscrito com instruções quanto ao 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 impressão pode ser impressa para que a revisão seja realizada, seja para corrigir erros no original ou para se certificar de que o compositor copiou o manuscrito corretamente e interpretou corretamente a marcação. O layout final seria construído em uma "forma" ou "forma" usando pedaços de madeira ou metal (" móveis ") para espaçar o texto e as imagens conforme desejado, uma moldura conhecida como perseguição e objetos que travam a moldura conhecido como quoins . Este processo é chamado de imposiçãoe, potencialmente, inclui organizar várias páginas para serem impressas na mesma folha de papel que mais tarde será dobrada e possivelmente cortada. Uma "prova de imposição" (essencialmente uma pequena tiragem da prensa) pode ser criada para verificar a colocação final.

A invenção da composição de metal quente em 1884 acelerou o processo de composição, permitindo que os trabalhadores produzissem slugs - linhas inteiras de texto - usando um teclado. As lesmas eram o resultado de metal fundido sendo derramado em moldes temporariamente montados pela máquina de composição. O processo de layout permaneceu o mesmo do tipo de metal frio: montagem em cozinhas físicas.

Cole-up era

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

A litografia offset permite que as áreas claras e escuras de uma imagem (inicialmente capturada no 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 ​​à impressão tipográfica, uma máquina de composição especializada. O IBM Selectric Composer , por exemplo, poderia produzir tipos de tamanhos diferentes, fontes diferentes (incluindo fontes proporcionais ) e com justificativa de texto . Com fotogravura e meio - tom, as fotografias físicas poderiam ser transferidas para impressão diretamente, em vez de depender de gravuras feitas à mão.

O processo de layout tornou-se então a tarefa de criar a pasta , assim chamada porque o cimento 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 passam a ser conhecidas como prontas para a câmera , "mecânica" ou "arte mecânica".

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

Computer-aided publicação

À medida que os recursos gráficos dos computadores amadureciam, eles começaram a ser usados ​​para renderizar caracteres, colunas, páginas e até mesmo 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, tubos de raios catódicos foram usados ​​para renderizar texto para fotocomposição. A natureza curva da tela 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 ​​pelos monitores CRT mais antigos. A partir de 2016, os monitores de tela plana substituíram quase completamente os monitores CRT. [2] [ 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 ou copiadora idem . Os processadores de texto WYSIWYG possibilitaram que usuários e consumidores de escritórios em geral criassem layouts de página mais sofisticados, usassem justificativa de texto e usassem 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 a composição profissional. A impressão a jato de tinta e a laser produziram tipos de qualidade suficiente e, portanto, os computadores com esses tipos de impressoras substituíram rapidamente as máquinas de fotocomposição.

Com software de editoração eletrônico moderno , como o software principal Adobe InDesign [3] e Lucidpress baseado em nuvem , [4]o processo de layout pode ocorrer inteiramente na tela. (Opções de layout semelhantes que estariam disponíveis para uma gráfica profissional fazendo uma colagem são suportadas por 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, compensando a flexibilidade para facilidade de uso para aplicativos mais comuns.) Um documento finalizado pode ser impresso diretamente como a versão pronta para a câmera, sem a necessidade de montagem física (em uma impressora grande o suficiente). As imagens em escala de cinza devem ter meio-tom digitalmente 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, filmar diretamente ou usar o computador para fazer a chapatecnologia para pular o original físico inteiramente. PostScript e Portable Document Format (PDF) tornaram-se formatos de arquivo padrão para transmissão digital.

Mídia digital (non-paper)

Desde o advento da computação pessoal , as habilidades de layout de página se expandiram para a mídia eletrônica e também para a 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 da interface e ao design da 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 da apresentação, como tipografia e espaçamento, e JavaScript para interatividade. Como essas linguagens são todas baseadas em texto, este trabalho pode ser feito em um editor de texto ou um editor HTML especial que pode ter recursos WYSIWYG ou outros recursos. 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 acabado usando essas tecnologias, mas um web designer separadopode ser responsável por estabelecer o layout. Um determinado web designer também pode ser um desenvolvedor web fluente ou pode simplesmente 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 das páginas impressas.

A lanterna mágica e o projetor opaco foram 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 a passagem da luz. As intertítulos foram amplamente utilizadas nos primeiros filmes, quando o som não estava disponível; eles ainda são usados ​​ocasionalmente, além dos onipresentes cartões e créditos pessoais .

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 podem ser impressas por algumas fotocopiadoras. Programas de apresentação de computador foram disponibilizados na década de 1980, tornando possível fazer o layout de uma apresentação digitalmente. Apresentações desenvolvidas por computador podem ser impressas em uma transparência com algumas impressoras a laser, transferidas para slides ou projetadas diretamente usando retroprojetores LCD . As apresentações modernas são frequentemente exibidas digitalmente usando um projetor de vídeo , monitor de computador outelevisão de tela grande .

Fazer o layout de 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. Deve-se levar em consideração:

  • Editar as informações apresentadas para que repita o que o orador está dizendo (para que o público possa prestar atenção a qualquer um) ou apenas apresente informações que não podem ser transmitidas verbalmente (para evitar dividir a atenção do público ou simplesmente ler slides diretamente)
  • Tornando 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 à expectativa do palestrante
  • Fornece uma maneira para o orador referir-se a itens específicos na página, como cores, rótulos verbais ou um apontador laser
  • Dimensionar textos 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 o progresso
  • Usando títulos para introduzir novos tópicos ou segmentos

Grids contra 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, passível de ser visto no processo de design e invisível 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 ficar dentro dessas diretrizes, dependendo de quanta repetição ou variedade o estilo de design da série exige. As grades devem ser flexíveis. Usar uma grade para criar elementos de layout na página pode exigir tanto ou mais habilidade de design gráfico do que o necessário para projetar a grade.

Em contraste, um modelo é mais rígido. Um modelo envolve elementos repetidos principalmente visíveis para o usuário final / público. Usar um modelo para criar elementos de layout geralmente envolve menos habilidade de design gráfico do que o necessário para projetar o modelo. Os modelos 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 igual especificada. Margens automáticas e linhas da lombada (medianiz) do livreto 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 o layout da página e também para o processamento de impressão. 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 de página automática e recursos de índice automático.

Estáticas versus layouts dinâmicos

Os layouts estáticos permitem mais controle sobre a estética e a otimização completa do espaço ao redor e sobreposição do conteúdo de forma irregular do que os layouts dinâmicos. Em web design , isso às vezes é chamado de layout de largura fixa; mas o layout inteiro pode ser dimensionado 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, as 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, muitas vezes referidos como layout fluido ou líquido. Layouts dinâmicos são mais propensos a separar a apresentação do conteúdo, que vem com suas próprias vantagens. Um layout dinâmico apresenta 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 várias dimensões da tela. Eles irão garantir automaticamente o uso maximizado do espaço disponível, ao mesmo tempo em que ficam sempre adaptados de forma otimizada, tanto os redimensionamentos na tela quanto as restrições fornecidas pelo hardware. O texto pode ser redimensionado livremente para fornecer as necessidades individuais dos usuários quanto à legibilidade, sem nunca perturbar as proporções de um determinado layout. A disposição geral do conteúdo na tela dessa forma pode sempre permanecer como foi originalmente projetado.

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 design mais interativo e habilidades de gerenciamento de conteúdo para antecipar completamente a variação do conteúdo.

Os gráficos em movimento 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 garante um design gráfico de movimento 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. O texto dinâmico ou dinâmico pode ser enrolado em 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 fluxo de conteúdo em torno dos contornos.

Front-end contra back-end

Com a recuperação de conteúdo de mídia moderna e a tecnologia de saída, há muita sobreposição entre as comunicações visuais ( front-end ) e a tecnologia da informação ( back-end ). Publicações impressas grandes (livros grossos, especialmente de natureza instrutiva) e páginas eletrônicas (páginas da web) requerem 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 ( metatags ) devem ser codificados manualmente ou especificados durante o processo de layout da página. Isso divide a tarefa de layout de página entre artistas e engenheiros, ou tarefas que o artista / engenheiro deve fazer para 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ções 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 à mão. A maioria dos softwares de edição de imagem inclui recursos para converter um layout de página para uso em um "O que você vê é o que você obtém" ( WYSIWYG) editor ou recursos para exportar gráficos para software de editoração eletrônica. Editores WYSIWYG e software de editoração eletrônica permitem design front-end antes da codificação back-end na maioria dos casos. O design da interface e a publicação do banco de dados podem envolver mais conhecimento técnico ou colaboração com a 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 do projeto e escolhas

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 com a 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 definidos podem incluir:

Na produção de jornal, a seleção final e o corte das fotos que acompanham as histórias podem ser deixados para o editor de layout (uma vez que a escolha da foto pode afetar o formato da área necessária e, portanto, o resto do layout), ou pode haver uma foto separada editor. Da mesma forma, os títulos podem ser escritos 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 cópia relativamente inconseqüentes podem ser feitos (por exemplo, reformulação para abreviar) ou o editor de layout pode fazer pequenos ajustes nos elementos tipográficos , como tamanho da fonte ou entrelinhamento.

Bloco flutuante

Um bloco flutuante na escrita e publicação é qualquer gráfico, texto, tabela ou outra representação que não esteja alinhada com o fluxo principal de texto. O uso de blocos flutuantes para apresentar imagens e tabelas é uma característica típica da redação acadêmica e técnica , incluindo artigos científicos e livros. Os 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, figura rotulada (para fotos, diagramas, plotagens , etc.) e tabela . Um nome alternativo para a figura é imagem ougráfico .

Os blocos flutuantes são chamados de flutuantes porque eles não são fixos em uma posição na página no local, mas são deslocados para o lado da página. Ao colocar imagens ou outros itens grandes nas laterais das páginas [5], em vez de incorporá-los no meio do fluxo principal do texto, a composição é 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 um índice 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: [6] 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 nas barras laterais. Também chamado de intermezzo . Veja barra lateral (publicação) .
Programa: Artigos e livros sobre programação de computadores freqüentemente colocam códigos 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

Uma maquete de um layout pode ser criada para obter feedback inicial, geralmente antes que todo o conteúdo esteja realmente pronto. Seja para papel ou mídia eletrônica, o primeiro rascunho de um layout pode ser simplesmente um papel áspero e um esboço a 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 outras expressões idiomáticas destinadas a definir o padrão para edições reais ou uma edição particular inacabada. Um wireframe de site é uma forma de baixo custo de mostrar o layout sem fazer todo o trabalho de criação do HTML e CSS final e sem escrever a cópia ou criar qualquer imagem.

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, as imagens de espaço reservado geralmente são rotuladas " apenas para a posição ".

Veja também

Referências

  1. ^ O'Connor, Z (2014). Elementos e princípios de design: Ferramentas para imagens digitais, arte e design .
  2. ^ Tela plana
  3. ^ "Compre Adobe InDesign CC - software de editoração eletrônica e editor online" . www.adobe.com .
  4. ^ "Software de layout de página gratuito" . lucidpress.com . 26 de maio de 2015.
  5. ^ Novas perspectivas em JavaScript e AJAX, abrangentes . p. VS-B2.
  6. ^ Sams ensina-se o Dreamweaver CS5 em 24 horas . p. 406.

Ligações externas