Criando Dicas e Exemplos de Layout Intensivos de Conteúdo

Criar layouts abrangentes para a web requer habilidade e muita dedicação. Web designers realizam um trabalho onde a maioria é incapaz de fazer, e de uma maneira muito sofisticada. Conforme as páginas da Web evoluíram, percebemos a necessidade de preencher mais espaço e armazenar mais conteúdo do que nunca. Se você já sabe como criar um site, isso é um grande bônus para entender melhor esses métodos. Os principais recursos em um site raramente são alterados. No entanto, com conteúdo de página mais do que a média, outros fatores entram em ação, incluindo espaço em branco, tipografia, posicionamento de elementos, entre outros..

Entramos em detalhes para abordar algumas dicas importantes para criar layouts de conteúdo intensivo. Estes podem variar de aplicativos de redes sociais, grandes empresas e sites corporativos, ou qualquer coisa entre os dois. É importante perguntar a si mesmo "o que estou tentando conseguir com este design?"quando você está projetando páginas, pois isso o ajudará a prever um prospecto mais amplo.

Páginas da Web personalizadas

Não importa o quão experiente em web design prático você seja, é verdade que todos nós tivemos que começar em algum lugar. Projetar páginas da web personalizadas é geralmente o primeiro passo para uma carreira na programação da web antes de aplicar as especificações convencionais..

Eu sempre recomendo criar uma pequena lista de elementos de página considerados para serem instalados no modelo. Uma vez que tudo isso esteja escrito, torna-se mais fácil eliminar as más ideias ou recuperar as gemas perdidas ou esquecidas. Isso também abre o caminho para um planejamento fácil para aliviar o estresse na estrada.

Layout Wireframe

Para o site genérico de 5 páginas, muitas vezes você verá os mesmos elementos repetidos. Um logotipo de canto superior, links de navegação principais, área de conteúdo principal, possivelmente divididos com uma barra lateral e outras funcionalidades (login, caixa de pesquisa, etc).

Considere um bom ponto de partida para criar layouts de página detalhados. Muitos designers acham útil esboçar possíveis designs de wireframe para descartar as falhas não tão óbvias. Isso não requer nenhum papel de fantasia e pode até mesmo ser feito em um notebook obsoleto. O objetivo de um wireframe é dar uma ideia aproximada de onde o layout do site deve estar indo com espaço para preencher os detalhes mais tarde.

Com layouts de conteúdo pesado, deve-se levar em consideração o quanto a plataforma conterá. Construir um layout de coluna de 2 a 3 fechado para hospedar mais de 100 páginas de conteúdo longo e complexo não deixará muito espaço para respirar espaço. Ao esboçar e planejar com antecedência, você pode controlar a quantidade de espaço espaçoso para o conteúdo da página. Isso não apenas encapsula texto ou bloqueia áreas, mas também lida com imagens e vídeos.

Espaço Branco Brilhante

O espaçamento branco é possivelmente o fator mais importante para ser levado em consideração no design de layout intensivo de conteúdo. O conteúdo do site rege tudo, mais do que qualquer site normal. Se os leitores não conseguirem entender o conteúdo, porque não há espaço para digerir suas palavras, o tráfego será irregular e desagradável.

Parágrafos e cabeçalhos de página são ótimos para começar com personalizações. Usando as propriedades CSS, você deve conseguir manipular as margens externas e preencher cada elemento de texto da linha de bloco. Estes incluem todos os títulos de 1 a 6, parágrafos, blockquotes, listas, texto pré-formatado e alguns elementos menores.

Se você deseja manter a atenção do leitor, é importante aplicar o espaçamento abaixo dos principais elementos de texto. Parágrafos e cabeçalhos menores funcionam melhor com margens de 15px-25px no lugar. Para elementos de página maiores, como h1 ou h2, considere 35px + (isso também dependerá do tamanho da sua fonte). Os espaços entre os elementos verticais são importantes para a rolagem e a digitalização "rápida". Contudo altura da linha é outra importante propriedade CSS que influencia o espaçamento entre linhas em um elemento de texto. Os parágrafos devem ter um valor de altura de linha muito maior em comparação com o tamanho da fonte, portanto, há bastante preenchimento entre linhas.

Considere estilos dinâmicos

Além do espaçamento, tipografia digital deve ser manipulado de forma a fazê-lo saltar da página. Com centenas de milhões de sites no mundo hoje, é comum ver o mesmo tipo de fonte em todos os lugares.

Se você estiver criando um layout para um site com conteúdo, o resultado será parecido com outro modelo sem graça no final. Há muitas propriedades para brincar com estilos tipográficos avançados. Sombras de texto, menos / mais espaçamento entre letras, plataformas de fundo, ícones… a lista é interminável.

Verdadeiramente você é o designer e sua palavra final é lei. Projetar um layout não é comparável a uma rodovia de pista única sem nenhuma parada. Durante o processo, você é capaz de voltar e mudar estilos, manipular novos elementos ou destruir completamente um conceito. Considere algumas outras dicas CSS úteis e veja como é melhor!

Utilize menus suspensos

Com muito conteúdo, é improvável que todos os seus links caibam em uma única página. Há muitas opções sobre como lidar com uma sobrecarga de páginas. Colocar links extras em blocos da barra lateral ou costurados em colunas no rodapé do site são duas opções intencionais.

A opção mais conveniente e útil é criar um esquema de navegação suspenso com categorias principais e subcategorias. Há também muitos scripts de código aberto que oferecem sub-subcategorias se você tiver tópicos intensamente detalhados.

Possivelmente, a estratégia mais rápida e menos frustrante é começar com um framework JavaScript. Alguns dos mais populares incluem jQuery, MooTools ou possivelmente Prototype. Todas essas bibliotecas oferecem documentação e muitas têm scripts de menu suspenso gratuitos disponíveis.

Planejar exibições de conteúdo

Na prática, é muito mais difícil criar uma área corporal simplista para abrigar todo o conteúdo que o site médio contém. Com a mudança dos padrões do navegador e o suporte móvel semifundido, não é de se admirar que esses sites com conteúdo intensivo sejam descartados. Seja sensível a cada estilo de página da web em exibição. Algumas conterão várias imagens, outras poderão conter gráficos ou vídeos primários ou nenhum gráfico. Depois de terminar de codificar o layout final, crie várias páginas HTML para abrigar diferentes visualizações.

Todos eles terão a mesma marcação interna, exceto os conteúdos dentro da área de conteúdo principal. Cada visualização de página individual pode ser manipulada e fornece informações sobre um produto acabado. Mude para cima para conter todas as principais visualizações que você acha que serão necessárias em cada página. Outros exemplos de elementos de página podem incluir caixas de comentários, vídeos ou galerias incorporadas ou links de página dividida.

Planejar Estratégias Completamente

Na verdade, não é totalmente difícil criar um layout de web poderosa. Muitos designers se deparam com os pequenos detalhes, como plantar elementos de bloco ou hiperlinks de cores. Esses detalhes são importantes à medida que são enviados através de uma mensagem de branding. Mesmo a partir de elementos menores, a mensagem deve acompanhar a totalidade da página. Planeje mentalmente os estágios do seu projeto para descobrir como é a melhor abordagem para cada obstáculo. Se você estiver trabalhando com um cliente, seria bom discutir com antecedência o tipo de conteúdo que estará preenchendo as páginas. Isso lhe dá a oportunidade de planejar com antecedência e criar estratégias para a melhor abordagem para um layout geral.

Outro tópico especialmente divertido é o design móvel. Este novo mercado está vendo uma enorme expansão não apenas em smartphones, mas também em tablets poderosos. Isso significa que os usuários podem estar acessando seu layout a partir de uma tela para celular. Verifique se o conteúdo não está sobrecarregado e se apresenta com nitidez..

7 Exemplos de sites com conteúdo pesado

Abaixo estão alguns exemplos de capturas de tela de sites populares de conteúdo pesado. Estas são principalmente marcas bem conhecidas nos mercados físico e digital. Confira algumas das ideias abaixo para encontrar alguma inspiração em seus próprios projetos. Também fique à vontade para compartilhar outros layouts de conteúdo pesado na seção de comentários.

Clicker

Clicker é um novo aplicativo de rede social para os amantes de TV e cinema. Você pode se inscrever para uma nova conta e encontrar alguns de seus programas de TV clássicos favoritos, arquivados por temporada e lista de episódios. Você pode comparar o site ao IMDB com menos informações e mais conteúdo de vídeo!

Futuro do Web Design

O Future of Web Design 2011 lançará as coisas em Londres na próxima primavera. Confira a home page para mais informações e um ótimo exemplo de design de layout baseado em texto. Todos os detalhes são genuinamente compartilhados e oferecem palestrantes, horários, workshops, patrocinadores e muito mais.

Senhor Provavelmente

Neste esquema cômico, o personagem principal, Lord Likely, foi "cartunizado" e perfurado em uma ilustração. O site é dividido em três colunas, cada uma com novos conteúdos, anúncios, links de feed e arquivos. O design em si é muito retrô e uma visão inteligente dos projetos de ilustração.

Microsoft

A maioria dos entusiastas de tecnologia está familiarizada com a Microsoft. Na verdade, a maioria das pessoas que entendem o que é um computador pode fornecer uma breve descrição da Microsoft e do Bill Gates. Sua home page abriga conteúdo para dezenas de pacotes de software, atualizações de notícias, press releases e informações para desenvolvedores. Um pouco abaixo da página você pode encontrar um menu de abas verticais com mudança de conteúdo dinâmico.

Terra do Search Engine

Search Engine Land é uma revista web popular com foco em motores de busca e marketing na Internet. Eles atualizam frequentemente com posts de qualidade incríveis e levam centenas de milhares de pessoas ao site todos os dias. A página principal se divide em 3 colunas usadas para armazenar cada módulo de conteúdo e anúncio.

A casa branca

O design da Casa Branca dos Estados Unidos parece muito limpo e profissional. Há muita informação sobre a agenda do presidente e outros eventos políticos importantes. Um truque para aliviar a sala de páginas foi a inclusão de um pequeno controle deslizante de conteúdo no cabeçalho da página. Isso é ótimo para exibir 3-4 grandes manchetes quando seus visitantes chegam à página.

Portal do Yahoo

No que diz respeito a grandes sites de conteúdo, o Yahoo! deve estar tendendo para o pico. Yahoo! oferece centenas de serviços aos seus clientes, incluindo webmail, notícias, vídeos e até mesmo pesquisas na web. Confira alguns dos Y! links de portal da barra lateral para ver como seus modelos se comparam.

Conclusão

Estes são apenas alguns dos principais pontos e passos para construir um layout concreto e exigente de conteúdo. As páginas da Web com grandes reservatórios de conteúdo são muitas vezes encaradas como um fardo que contém matéria forrageira de SEO e nada de valor real. Design é tudo, pois é a primeira impressão que um usuário recebe de cada site. Com altos volumes de conteúdo, isso pode se tornar um desastre com desorganização e generalizações. Nunca pare de praticar e, com apenas alguns projetos, você adquirirá a maestria para visualizar layouts de conteúdo intensivo.