Desafio Web Designer/Front-End

Landing Page Senado Notícias

O projeto interativo da versão desktop está disponível no seguinte link pelo Figma:
https://www.figma.com/file/2KtKe9DQ1KUEPCM3OAoVHU/Senado-Desktop?
type=design&node-id=0%3A1&mode=design&t=NKNhBvHwVDpLBPTB-1
A versão mobile está disponível no seguinte link pelo Figma:
https://www.figma.com/file/MFviPgGHNwYR9eMqWmZ8DD/Senado-
Mobile?type=design&node-
id=0%3A1&mode=design&t=d8pDEbIv9eO7R1Bj-1
A sugestão é que iniciem o protótipo que já tem os links e o modelo das
páginas e menus.
A escolha da fonte depois de algumas pesquisas foram as seguintes:
Para os botões/Menus: Roboto Flex 22 e 18 pela legibilidade.
Para as notícias: PT Serif de acordo com as normas usuais.
O menu superior foi reformulado seguindo os princípios de UX/UI para que o
mesmo fique de uma forma mais limpa para o usuário, onde foram mescladas
ambas as cores em degrade dos dois menus utilizados hoje, tendo uma melhor
legibilidade e facilidade para o usuário navegar no mesmo, sendo assim mantendo
sua identidade visual até o momento.
O menu lateral é representado pelo ícone de 3 linhas que foi mantido, onde não
houve a necessidade de alteração visível, no menu foram adicionados como lista
vertical em destaque os mesmos botões que são apresentados ao usuário no menu
superior e ao clicar no mesmo o menu no modelo “offcanvas” do Bootstrap 5.
No logo “Senado Notícias” foi pensado em ao ser clicado, o usuário ser redirecionado
para a página home da mesma.
Foi adicionado ao Menu Superior visível a aba “Ao Vivo” onde conseguimos
acessar os conteúdos que estão sendo transmitidos no momento, tanto pela Rádio
Senado, quanto pelo Canal do YouTube e o link da própria TV Senado, os botões
do Menu Superior foram pesquisados e o mais interessante alcançado foi o botão
“Dropdown” do Bootstrap 5.
Mais à frente há o link de contato descrito “Fale com o Senado” no qual não foi
modificado efetivamente pois a usabilidade e legibilidade está de bom grado.
À direita há o botão “Language” que ao ser clicado podemos selecionar o tipo de
idioma da página.

Na extrema direita superior da página há o ícone de pesquisa, caso o usuário

queira realizar qualquer pesquisa necessária em todo o site, ao clicar no mesmo,
um “input” é mostrado e ao digitar os termos de pesquisa, basta o mesmo inserir os
dados com a tecla “Enter”.
O menu superior foi pensado para ficar em uma forma fixa ao usuário rolar a tela
para baixo, para caso o mesmo queira acessar qualquer um dos itens do menu ou
fazer
uma pesquisa, ele consiga independente em qual parte da tela se encontre sem ter
que rolar a tela toda para o início.
Logo abaixo do menu superior aplicada uma forma de Banner//Carrossel onde os
destaques diários de notícias e programações ao vivo seriam mostrados aos
usuários, fazendo o rodízio por tempo, em testes, de 2 a 3 segundos é o suficiente
para o usuário assimilar a notícia ou o que ao vivo está em destaque assim,
poupando informações a mais na própria página inicial.
Abaixo do Banner vem os destaques de notícias do dia, separados por 3 imagens e
descrição escrita da mesma, uma maior e duas menores, melhorando assim a
legibilidade da página.
A baixo há o grupo de notícias classificadas por data de postagem feita
verticalmente dando espaço o suficiente para o menu “Mais Lidas/Ultimas Notícias”
e logo abaixo para o bloco “Senado Multimídia”.
Ligeiramente à direita da página há o símbolo de “Acessibilidade” onde ao clicar no
mesmo o “VLibras” é ativado, tal como os demais portais do Governo.

3 grupos de Notícias verticais foram criados, para as demais notícias, podendo ser
classificadas da maneira que seja melhor.
Mais abaixo o Banner interativo de 3 em 3 notícias serão exibidos modificando a
parte de Pronunciamentos e de Projetos de Lei.
No rodapé foi feita uma atualização com Links das redes sociais, Fale com o
Senado, Idioma conforme Menu Superior e Intranet em sua primeira parte.

Em sua segunda parte, há os links para redirecionar os Servidores Efetivos,

Comissionados, Aposentados e Pensionista.
No fim do rodapé há o número, endereço e CEP conforme original.