CMS Web Design: um guia para aplicativos de conteúdo dinâmico

Técnicas de UI/UX para o mundo dinâmico orientado a conteúdo da mídia online.

A grande maioria dos aplicativos da web e aplicativos móveis, especialmente no espaço de mídia online, são alimentados por sistemas de gerenciamento de conteúdo (CMS), como WordPress, Drupal e outros. Esses sistemas surgiram para atender às necessidades de uma era da Internet onde o conteúdo é rei e dinâmico, mudando continuamente e com frequência.

No passado, a maioria dos sites era estática, não construída para evoluir e crescer de forma contínua. Agora eles são considerados sistemas vivos, e existe uma maneira ideal de projetar para eles.

A seguir, um guia para designers digitais que desejam expandir seu repertório além de sites estáticos e páginas de destino, e começar a projetar efetivamente para aplicativos dinâmicos orientados a conteúdo, como sites de notícias, blogs ou até redes sociais onde os usuários publicam conteúdo regularmente. Para fazer essa transição, os designers precisarão entender como esses tipos de aplicativos são normalmente estruturados, bem como adotar uma mentalidade de “conteúdo em primeiro lugar” no processo de design.

CMS Web Design IA Patterns em aplicativos orientados a CMS

Os designers devem ter um modelo mental dos padrões comuns de arquitetura de informações em um aplicativo orientado a CMS, especialmente se estiverem trabalhando no UX (experiência do usuário) e projetando-o desde o início. Existem vários tipos de páginas que são comuns e integrais a esses aplicativos, e eles geralmente se conectam de maneira previsível, onde o “post” funciona como o componente principal. Geralmente, não há limite teórico para o número de postagens que um aplicativo pode conter.

Primeira página

Este é o ponto de entrada formal e muitas vezes é sinônimo de página inicial. É muito comum, principalmente quando há muito conteúdo para acessar, pois ajuda a destacar ou destacar o que é mais importante. Esta página normalmente mostra versões abreviadas de postagens sem revelar muitos detalhes.

Página de postagem

Se a “postagem” for a unidade principal de um aplicativo controlado por CMS, a página de postagem será onde todos os detalhes públicos sobre uma postagem serão exibidos. Provavelmente é a única página realmente crítica no aplicativo, e pode ser uma página de artigo ou uma página informativa sobre um determinado evento, pessoa, grupo, produto etc. Em alguns aplicativos maiores, pode haver vários tipos de postagens e postagens páginas designadas.

Página de lista/categoria

Esse tipo de página é útil para permitir que os usuários naveguem por todas as postagens disponíveis e as filtrem por categoria, atributos ou outros critérios. Uma opção de classificação também é comum quando a quantidade de conteúdo a percorrer é substancial.

Página de pesquisa

Uma página dedicada para pesquisa não é essencial para aplicativos menores, mas é sempre útil. Às vezes, ele pode ser mesclado ou integrado à página de categoria/lista.

Perfil do usuário/autor

Esta página é dedicada a cada autor ou usuário que cria um ou mais posts. Às vezes, é esquecido em pequenos sites de notícias e blogs de autor único, mas é fundamental para grandes sites de notícias com vários autores, redes sociais orientadas por conteúdo e outros aplicativos gerados pelo usuário. Uma prática comum e útil é incluir uma lista de todas as postagens do usuário nesta página.

Página inicial ou painel do usuário

Esta página mostra informações (incluindo postagens) relevantes para o usuário conectado, geralmente na forma de um feed de notícias pessoal ou conteúdo recomendado, atividade recente e status. A página inicial do usuário é essencial para aplicativos fechados e aplicativos de redes sociais, mas opcional ou irrelevante para outros.

Design de interface do usuário orientado a conteúdo para conteúdo dinâmico

O conteúdo precede o design. Design na ausência de conteúdo não é design, é decoração. – Jeffrey Zeldman

Quando chegar a hora de projetar a interface do usuário de um aplicativo baseado em CMS, é importante lembrar que o conteúdo sempre orienta o projeto, e não o contrário. Uma abordagem de conteúdo em primeiro lugar tem sido adotada por mais e mais empresas de mídia nos últimos anos com resultados comprovados. Com isso em mente, aqui está uma lista de recomendações que os designers de interface do usuário devem ter em mente ao se molharem nesses tipos de projetos.

Considere o conteúdo antes de definir um estilo

Em um aplicativo orientado a conteúdo, o estilo visual deve dar suporte ao conteúdo como um todo. Embora a natureza desses tipos de aplicativos geralmente implique que o conteúdo será variável e não totalmente previsível, na maioria das vezes ele se encaixará em um tema geral. Então, ao desenvolver a estética da marca, o conteúdo real pode ser uma grande fonte de inspiração. Ao mesmo tempo, também pode ser uma responsabilidade se o designer ficar muito apegado a partes específicas do conteúdo e desenvolver um estilo excessivamente direcionado.

Conheça quem criará o conteúdo regularmente.

Em um aplicativo orientado a CMS, o conteúdo é amplamente determinado pelos criadores de conteúdo, não pelos designers. Portanto, geralmente espera-se que o designer ceda algum controle da aparência do produto para pessoas que publicam conteúdo regularmente – ou seja, editores, autores, administradores ou mesmo usuários aleatórios que inserem conteúdo por meio de formulários públicos.

Dependendo do processo acordado, o designer pode definir alguns padrões e diretrizes para escolher as imagens, prepará-las e recortar, e ainda colocar alguns parâmetros no estilo do texto. No entanto, no geral, é responsabilidade do designer moldar o front-end do aplicativo de tal forma que o trabalho inferior do criador do conteúdo, como uma fotografia ruim ou um título muito longo, não diminua a qualidade do projeto em um grau significativo.

FAÇA design com conteúdo real sempre que possível.

Como o tipo de conteúdo pode variar muito em um aplicativo baseado em CMS, faz sentido gastar tempo analisando uma grande amostra dele. Idealmente, no caso de um site de notícias ou blog, o designer colaboraria com os criadores de conteúdo no início do processo de design e solicitaria exemplos de histórias, imagens de produtos, vídeos ou qualquer outra coisa que pudesse ajudar a tornar os modelos de design tão reais que possível.

Projetar com conteúdo real é preferível a usar fotos de banco de imagens e texto fictício e pode até ser feito em paralelo com wireframing ou prototipagem, pois ajuda a limitar quaisquer surpresas que possam ocorrer.

Não é incomum que um design pareça impressionante quando um designer o preenche com imagens cuidadosamente pré-selecionadas ou photoshopadas e manchetes perfeitamente adaptadas, e depois vê-lo cair no marasmo quando entra em produção.

NÃO seja muito específico com o estilo.

Ao definir um estilo visual, não classifique o conteúdo refletindo apenas um único humor, gênero, história ou assunto. Em vez disso, mantenha-o simples e universal em relação a toda a gama de tons que podem entrar em jogo no conteúdo.

Às vezes, uma aparência muito específica é aceitável para um aplicativo que atende a um público de nicho, mas muitas vezes pode parecer desatualizado e sem apelo de massa no mercado atual. Além disso, pode potencialmente limitar as perspectivas de crescimento e expansão para novas verticais no futuro.

Para garantir que um design funcione para uma ampla variedade de conteúdo, geralmente é uma boa ideia testá-lo criando uma versão adicional ou duas da mesma página com um assunto marcadamente diferente ainda dentro da faixa temática do que é publicável.

Crie cada página como um modelo para conteúdo variado

Pense em cada tipo de página no aplicativo como um modelo ou planta para vários itens de mídia (imagens, widgets, vídeos, blocos de texto etc.) .

Estabeleça um conjunto claro de regras e consistências.

Só porque o conteúdo pode variar muito de uma página para outra não significa que não deve haver um conjunto consistente de formatos nos quais o conteúdo é apresentado.

Manter cabeçalhos e tamanhos de imagem previsíveis e observar uma hierarquia lógica de informações de cima para baixo dentro de uma página tem muitos benefícios, um deles é que cria uma sensação de harmonia em todo o aplicativo e mantém o usuário devidamente orientado.

Para conseguir isso mais facilmente, desenvolva um conjunto modular e reutilizável de componentes de estilo para o maior número possível de partes da interface, incluindo títulos, divisores, botões, widgets e outros elementos em um programa de design. Use esses componentes repetidamente e em um esquema lógico, mantendo as variações no mínimo. Este artigo do Toptal Designer Wojciech Dobry apresenta um bom guia para criar uma biblioteca de interface do usuário no Sketch.

NÃO dê tratamentos de design individualizados aos posts.

Tente evitar dar posts dentro da mesma seção de uma página com muitas diferenças de estilo e formato. Isso inclui alterar as dimensões da imagem, adicionar layouts ou fontes de texto especiais ou aumentar imagens individuais com adornos ou gráficos personalizados. Isso não apenas tende a matar a harmonia visual, mas geralmente é um desperdício de recursos e um empecilho para o desempenho e a manutenção do ponto de vista de um desenvolvedor ou gerente de conteúdo.

NÃO presuma que o conteúdo sempre caberá em uma área designada.

Um dos resultados inevitáveis ​​da natureza dinâmica de um aplicativo controlado por CMS é que a quantidade de texto que aparece em uma determinada área de exibição pode variar em tamanho. Muitas vezes, limites de caracteres podem ser colocados no texto no CMS para manter as coisas razoáveis, mas o designer nunca deve assumir cegamente que um bloco de texto sempre caberá em um certo número de linhas.

Não apenas as larguras de caracteres individuais variam, mas também não é costume restringir fortemente a criatividade dos escritores, impondo um limite de caracteres muito baixo. É por isso que é sempre bom testar um design com conteúdo real, conforme discutido acima, e avaliar cada área com diferentes amostras de texto.

Para ter certeza sobre o pior cenário possível, insira temporariamente uma sequência de caracteres alfabéticos largos (como “w” se o conteúdo estiver em inglês) até que um limite de caracteres acordado seja atingido.

Permita que o conteúdo se destaque

Em um aplicativo orientado a conteúdo, o conteúdo deve ser mantido sempre à frente e no centro, e os elementos estilísticos da marca geralmente devem retroceder.

ENVOLVA o conteúdo dinâmico com cores de fundo limpas, claras e neutras.

Branco ou off-white é geralmente preferível. Isso permite que muitos tipos diferentes de imagens, claras e escuras, saiam da página sem serem ofuscadas.

FAÇA imagens grandes e imponentes.

Imagens grandes, especialmente fotos, atraem a atenção do visitante com mais eficácia do que qualquer outra coisa.

Mantenha os títulos e o corpo do texto grandes e altamente legíveis.

Para páginas com muito texto, escolha fontes da Web que sejam altamente legíveis e implante-as em um tamanho grande e confortável em todos os dispositivos — desktop, celular e tablet.

NÃO projete demais.

Muitas vezes, os designers digitais e impressos gostam de implantar enfeites criativos ou dar liberdade aos elementos de marca em seus projetos. Em geral, embora certos efeitos visuais às vezes possam aprimorar um design orientado a conteúdo, eles também podem distrair facilmente o conteúdo, que é o que realmente interessa aos usuários quando visitam um site de notícias ou blog.

Esses efeitos também podem tornar a aparência do aplicativo menos previsível à medida que as imagens mudam. Geralmente, é uma prática recomendada verificar fontes decorativas, padrões em negrito, ilustrações, imagens sobrepostas, imagens semitransparentes e molduras sofisticadas ao redor das imagens. Por fim, mantenha o logotipo relativamente pequeno em comparação com o conteúdo em destaque.

NÃO use fundos coloridos perto de imagens dinâmicas.

Cores fortes e brilhantes estão em alta agora, mas geralmente é melhor evitar a aplicação de grandes quantidades de cores saturadas, ou um fundo colorido, em torno de imagens que estão sujeitas a alterações, pois isso pode gerar resultados imprevisíveis, incluindo choques de cores e superestimulação, distrair do conteúdo.

NÃO use fundos escuros para cobrir páginas inteiras de texto.

Estudos mostram que o texto claro em um fundo escuro é mais estressante para os olhos do que o texto escuro em um fundo claro em aplicativos com conteúdo pesado. Um fundo escuro pode funcionar bem para uma seção especial de uma página ou uma área de apresentação de slides onde há uma quantidade limitada de texto, mas não é adequado para cobrir longos blocos de texto.

Entenda como as imagens e outras mídias funcionam no back-end

Os sistemas de gerenciamento de conteúdo podem variar na forma como lidam com a mídia, como imagens, vídeos e arquivos de animação, e às vezes um desenvolvedor define propositalmente restrições na mídia para fins de eficiência.

Por exemplo, pode haver limitações em como as imagens são dimensionadas e recortadas e no número de tamanhos e recortes que podem ser gerados e exibidos. Portanto, é importante consultar o desenvolvedor do aplicativo ou os gerentes de conteúdo para determinar o que é prático (e no que eles estão dispostos a investir recursos extras de desenvolvimento) antes de avançar com um design.

Descubra quais formatos de mídia são suportados.

Embora geralmente seja um dado que um aplicativo suportará imagens, é uma boa ideia consultar os gerentes de conteúdo sobre quais tipos de vídeo, áudio e outros arquivos multimídia podem ser armazenados e exibidos e até que ponto podem ser personalizados visualmente.

Por exemplo, ajuda descobrir se um player de vídeo personalizado será construído ou se incorporar um vídeo do YouTube ou Vimeo em uma página é a única opção. No caso do YouTube, existem padrões e limitações específicos sobre como os vídeos podem ser incorporados, dimensionados e esfolados.

NÃO designe muitas culturas e tamanhos diferentes para imagens.

Embora muitas vezes seja tecnicamente viável criar muitos cortes separados para uma imagem, geralmente há um impacto negativo ao fazê-lo. Por exemplo, por padrão, o WordPress CMS gera automaticamente vários tamanhos de uma imagem carregada em uma única proporção, mas oferece apenas uma opção para que uma miniatura cortada separadamente seja criada.

Recortar cada imagem em proporções adicionais não só requer que um plugin especial seja instalado ou uma ferramenta dedicada seja desenvolvida antecipadamente, mas também exige mais dos editores, pois exige que eles façam um trabalho adicional para cada imagem enviada. Às vezes, isso também dificulta a escolha de uma imagem viável, diminuindo ainda mais o fluxo de trabalho.

DETERMINE se o conteúdo legado precisa ser suportado.

Ao reprojetar um aplicativo legado, às vezes há ainda menos opções disponíveis do que ao iniciar um novo aplicativo do zero. Isso ocorre porque já existe um repositório de mídia existente, e migrar tudo para um novo formato muitas vezes pode ser uma operação cara ou impraticável do ponto de vista do desenvolvimento.

Forneça aos editores de conteúdo uma variedade de maneiras de estilizar o texto

O conteúdo de texto é um elemento-chave de um aplicativo baseado em CMS, e em um site de notícias ou blog em particular, pode-se descobrir que editores ou escritores, quando deixados por conta própria, procuram maneiras de estilizar e formatar o texto para dar ênfase ao texto. certos pontos, dividir o conteúdo, adicionar citações, criar listas, vincular a outros conteúdos e realizar várias outras tarefas.

Muitas plataformas populares de CMS, como o WordPress, fornecem opções de formatação de texto por padrão, mas se o designer não planejar como esses estilos serão personalizados para seu design, o resultado será algo aleatório, simples ou indesejável.

FAÇA design para todas as formas comuns de formatação de texto.

Especialmente para blogs e sites de notícias, vale a pena dedicar um tempo para fornecer ao desenvolvedor regras de estilo para todas as formas comuns de formatação de texto, incluindo: texto em negrito e itálico, títulos e subtítulos, listas numeradas e com marcadores, citações em bloco, legendas e hiperlinks.

NÃO dê aos criadores de conteúdo muito controle estilístico.

Geralmente não é uma boa ideia abrir muito controle de design para os editores. Permitir que eles façam coisas como construir seus próprios layouts dentro de páginas ou colorir texto de mais de uma maneira pode ser assustador ou demorado para algumas pessoas e produzir resultados feios e inconsistentes nas mãos de outras.

Futuros padrões de design orientado a conteúdo

Com o advento de novas tecnologias, como a realidade aumentada (AR), novos paradigmas para o design orientado a conteúdo começaram a surgir. Os aplicativos orientados por CMS no espaço de realidade aumentada/mista, que estão atualmente em sua infância, usam objetos e/ou cenas do mundo real como parte fundamental do conteúdo.

O ambiente de visualização de um usuário móvel específico, as condições de iluminação e a proximidade física em relação ao texto e aos objetos 3D inseridos podem afetar o resultado final. Isso altera significativamente a noção de curadoria de conteúdo e adiciona uma camada extra de imprevisibilidade que deve ser levada em consideração no processo de design.

CMS Web Design é um pouco diferente

Projetar para aplicativos baseados em CMS significa colocar o conteúdo em primeiro lugar e o estilo em segundo. Também significa planejar e adotar a variabilidade e a imprevisibilidade no conteúdo que se está projetando. A capacidade de acomodar uma miríade de resultados potenciais se tornará ainda mais crítica no design da web de CMS à medida que as tecnologias emergentes transformam a natureza do próprio conteúdo.