Blog Enccamp

Blog clean wordpress bootstrap Responsive Theme

Blog Enccamp
Simplifying the experience
Simplificando a experiência

Project made in: 2020

Projeto feito em: 2020

My role: Design and Development

Meu papel: Design e desenvolvimento

At the end of 2019, I was hired to redesign the Enccamp Residencial blog in partnership with ÀBrasileira. The company's goal was to simplify the user's experience because the previous layout was deemed too complex.

No final de 2019, fui contratado para reformular o blog da Enccamp Residencial em parceria com a ÀBrasileira. O objetivo da empresa era simplificar a experiência do usuário porque o layout anterior era considerado muito complexo.

First, I reviewed the previous layout to figure out what needed to be preserved. I realized that the 6 (until the moment of the project delivery) categories of the blog were divided by colour, so I carried that division into the new design. Also, I needed to make a connection with the visual identity of the company, so I used two color palletes: The first one, the main pallete, with 3 colors for the main background, the text body, links and accents/highlights. The second one, the secondary palette, with 6 colors that replaced the colors of the links and highlights on the pages referring to a specific category (each color for a specific category)

Primeiro, revisei o layout anterior para descobrir o que precisava ser preservado. Percebi que as 6 (até o momento da entrega do projeto) categorias do blog eram divididas por cores, então levei essa divisão para o novo design. Além disso, precisava fazer uma conexão com a identidade visual da empresa, então usei duas paletas de cores: A primeira, a paleta principal, com 3 cores para o fundo principal, corpo do texto, links e acentos / destaques. A segunda, a paleta secundária, com 6 cores que substituíram as cores dos links e destaques nas páginas referentes a uma categoria específica (cada cor para uma categoria específica)

Regarding the typography, I used Lato for the headings and Raleway for the body of the text, since these were used in the previous project.

Quanto à tipografia, usei Lato para os títulos e Raleway para o corpo do texto, uma vez que foram usados no projeto anterior.

About the structure, it was simplified it as much as possible. On the homepage, the last three posts of each category were shown but in the mobile version only the last one, so we could show less information on a small screen.The same logic was applied to the sidebar, which appeared only on desktop, while on the mobile the categories list and search form became accessible via the menu.Additionally, the widget option in the footer was carried over to the new design and CTAs can now be added to each post.

Sobre a estrutura, foi simplificada ao máximo. Na página inicial, foram mostradas as últimas três postagens de cada categoria, mas na versão mobile apenas a última, para que pudéssemos mostrar menos informações em uma tela pequena. A mesma lógica foi aplicada à barra lateral, que apareceu apenas no desktop, enquanto no celular, a lista de categorias e o formulário de pesquisa tornaram-se acessíveis por meio do menu. Além disso, a opção do widget no rodapé foi transferida para o novo design e os CTAs agora podem ser adicionados a cada postagem.

Sketchs

Wireframes for the larger version of the website

Wireframes para a versão maior do site (desktop)

Wireframes for the smaller (mobile) version of the website

Wireframes para a versão menor (mobile) do site

After finishing the wireframes, I started the high-fidelity prototype by designing directly in the browser, allowing a more accurate view of the final result and accelerating the delivery process. It took two rounds to reach the final result.

Após finalizar os wireframes eu iniciei o protótipo de alta fidelidade desenhando diretamente no navegador, permitindo uma visualização mais precisa do resultado final e acelerando o processo de entrega. Demorou duas rodadas de alterações para chegar ao resultado final.