amghs-icon-purple
*recomendo a visualização desta página em desktop

Esta é uma proposta de um site de notícias relacionada a jogos e cenário competitivo de e-sports (jogos eletrônicos). Este projeto foi desenvolvido utilizando a estratégia de mobile first, projetando primeiramente o wireframe da versão mobile, nesse caso optei por já ir trabalhando com o wireframe de alta fidelidade. Foram organizados os elementos por níveis, intercalando os conteúdos e elementos visuais, dando assim um aspecto mais dinâmico ao site.

Neste projeto o layout é divido em níveis, em seu primeiro nível, contando com o logotipo da empresa, juntamente com um menu sanduíche, a seguir em seu segundo nível, temos um banner de destaque, logo abaixo vem o nível 3, com uma pequena introdução e um slider carrossel, com imagens rotativas, navegando um pouco mais abaixo, temos o nível 4, uma área de destaque de notícias e informações relevantes, descendo mais um pouco, chegamos ao nível 5, uma área de dúvidas frequentes, destacando as perguntas mais feitas nos comentários de notícias no site. Chegando a parte próxima ao rodapé do site, temos o nível 6, uma área destacando a última publicação do blog e por fim chegamos ao final do site, onde seu rodapé é dividido em 3 linhas, uma pequena área falando sobre o site, links úteis e uma área de captura de e-mails para leads.

Seguindo realizei a adequação do layout agora para a visualização em desktop, alguns elementos foram alterados e re-diagramados, pois como na visualização em desktop temos mais área para trabalhar os elementos.

Foram utilizados os ícones do banco de ícones da Google, o Material Icons e de tipografia foi utilizada a família tipográfica Montserrat.

#web #ui-ux #amghs

amghs-mob-mk-site2

Wireframe Mobile

Layout Mobile

Wireframe Desktop

Layout Desktop

Demonstração do layout em uso

Mobile
Desktop
AMGHs – All rights reserved
amghs-icon-white
Design by: AMGHs