Layout
O layout do Brand New está longe de ideais de simplicidade e acessibilidade. Há demasiada informação nos menus laterais e não há uma hierarquia explícita que oriente o olhar.
Possui duas opções de layout: Brand New tem a opção centrado (Centered) ou alinhado à esquerda (Flush Left). Quando centrada encontramos a coluna de conteúdo no centro com uma coluna de destaques do lado esquerdo e outra coluna de destaques do lado direito.
Estrutura de base, centrada, realçada a azul
Quando alinhado à esquerda a coluna de destaques do lado esquerdo passa para a direita da coluna de destaques do lado direito, encostando a coluna de conteúdo à margem esquerda.
Estrutura de base, alinhada à esquerda, realçada a azul
O Layout padrão
Analisando então o layout que está pré-definido, o centrado, este apresenta uma estrutura básica de três colunas, sendo a coluna principal, a do conteúdo, maior do que as restantes. Do lado esquerdo estão os destaques relacionados com ligações externas ao BrandNew. Na coluna de destaques da direita temos questões como os comentários mais recentes e a pesquisa dos arquivos, tudo relacionado com o conteúdo do website: são outras formas de o visualizar.
O header está dividido em 3 colunas, sendo que a do centro contem o banner com o logótipo mais dois espaços: um com uma breve descrição do site e outra com um link para o UnderConsideration. A navegação encontra-se então na terceira coluna.
Estrutura da header
Abaixo do header, na coluna central, há um primeiro espaço reservado a um banner publicitário e de seguida o conteúdo. Termina com um footer com os logótipos dos parceiros de publicidade.
Hierarquias tipográficas
A nível tipográfico, a font utilizada é a Arial. Na coluna central, a vermelho a 24px e em caixa-mista são os títulos dos posts, a preto e a 12px o texto corrido, e a cinza a 9px e caixa-alta temos a informação secundária como o autor do texto, o número de comentários, a data, etc. O texto para navegar para outras páginas está a 21px, sendo o Next Page a cinza - ficando a vermelho quando se faz hover - e a vermelho o Or jump to page.
Exemplo de um post da coluna central
Nas colunas laterais todo o texto está em Arial a 10px, sendo que os títulos estão a bold e sublinhados. Os separadores de secções dentro destas colunas laterais são imagens com texto a vermelho. Por vezes são links, por outras não. Se forem, passam para preto quando o cursor está sobre eles. Todos os outros links na página estão a preto e ficam a vermelho quando se faz hover. As cores não mudam quando os links já foram visitados.
