Este artigo é dedicado a um novo projeto web que desenvolvemos durante o mês de março, um projeto de design web e desenvolvimento web para Álvaro Vargas.
Num formato muito orientado à narrativa, vou partilhar todo o processo de design e desenvolvimento deste website recém-criado.
Há algumas semanas, Álvaro Vargas entrou em contacto connosco. Inicialmente, procurava informações para o design de um livro de receitas que irá lançar futuramente.
Quem é Álvaro Vargas?
Álvaro Vargas é um nutricionista extremamente ativo, que diariamente cria conteúdos sobre nutrição e saúde para as redes sociais. Conhecedor do meio digital e do seu funcionamento, atribui grande importância às redes sociais e sabe como tirar o máximo partido delas para se dar a conhecer.
Tem presença no Facebook, Instagram, publica podcasts e gere um canal de YouTube — em todas estas plataformas, destaca-se como criador de conteúdos de qualidade para quem se interessa por nutrição e saúde. Publica regularmente imagens dos pratos que confeciona, partilha receitas no YouTube e escreve artigos no seu site pessoal. Além disso, já publicou alguns livros sobre o mesmo tema.
Agora, dando mais um passo na sua carreira, Álvaro decidiu partilhar os seus conhecimentos presencialmente e, para começar, vai ministrar alguns cursos em Barcelona e Madrid.
Depois de alinharmos o design interior do livro de receitas, continuámos a conversar sobre os seus projetos e confiou-nos um desafio fantástico.
Para apoiar esta nova vertente de cursos presenciais, pretendia um website onde as pessoas pudessem inscrever-se nos cursos.
Mãos à obra!
Com este desafio, começámos a trabalhar no estúdio. Após as reuniões necessárias para perceber todos os detalhes do projeto, ficou claro qual seria a linha estética a seguir: algo fresco, intuitivo, direto e que refletisse tanto a personalidade como os objetivos profissionais do Álvaro.
Assim, avançámos para a proposta gráfica que iríamos apresentar ao Álvaro.
Foi um dos projetos mais inovadores e refrescantes em que trabalhámos nos últimos tempos — um trabalho de vanguarda, sem limitações ou restrições criativas, já que o Álvaro é uma pessoa muito aberta e confiou desde o início no nosso critério profissional. Dedicámos atenção a todos os detalhes e o resultado deixou-nos muito satisfeitos. É verdade que, inicialmente, tivemos dúvidas se o Álvaro teria a ousadia de se deixar guiar por nós, mas surpreendeu-nos pela positiva, percebendo de imediato o conceito que queríamos dar ao seu website.
Para o design gráfico do website, analisámos as redes sociais que gere, os seus livros e o blog, para captar na perfeição o estilo que melhor se adequava à sua identidade.
Os aspetos técnicos que mais valorizámos neste projeto foram as animações do website, a escolha da paleta de cores e a organização da informação.
Que objetivos tínhamos de cumprir?
O objetivo era criar um website onepage, dinâmico, intuitivo, direto e muito interativo.
O utilizador deveria conseguir aceder rapidamente ao site e encontrar toda a informação necessária para decidir se o curso lhe interessa e como se pode inscrever.
O prazo era apertado, pois o Álvaro Vargas queria o site pronto no início de abril.
Para isso, no estúdio, trabalhámos de forma eficiente os seguintes pontos:
- A paleta de cores.
- Organização da informação.
- Animações.
- Menu.
- Transmitir a visão e missão do Álvaro.
- A integração do sistema de pagamentos
- Personal gifts para o Álvaro
1. Sobre a paleta de cores
Optámos por uma combinação de cores de alto contraste, que confere ao design um estímulo visual intenso — perfeito para o estilo onepage do website. Assim, conseguimos captar a atenção do utilizador do início ao fim da navegação, levando-o a absorver toda a informação quase sem se aperceber.
2. Sobre a organização da informação
A disposição da informação foi cuidadosamente pensada para que, tal como acontece com as cores, o olhar do utilizador salte de módulo em módulo, mantendo o interesse e evitando qualquer monotonia durante a visita.
3. As animações
O website inclui vários efeitos que captam a atenção do utilizador e conferem um dinamismo essencial para os objetivos definidos.
Por exemplo, na secção de “Perguntas Frequentes”, criámos animações interativas: os olhos do Álvaro seguem constantemente o movimento do cursor e, ao passar por cima de um dos alimentos do fundo, este desaparece — quase como por magia… ou programação!
4. O menu
O website apresenta um menu horizontal muito original, que permite navegar facilmente entre as diferentes secções. Além disso, o menu tem uma transição suave, com efeito de profundidade, tornando a experiência de utilização ainda mais agradável.
5. Transmitir a visão e missão de Álvaro Vargas
Com todos os pontos anteriores e o conteúdo fornecido pelo próprio Álvaro, ficou perfeitamente clara a sua missão e visão.
Assim que o design gráfico do website foi aprovado e recebemos o OK do Álvaro, avançámos para a programação do site.
6. A integração do sistema de pagamentos
Tratando-se de um website com sistema de pagamentos, era fundamental garantir a máxima segurança. Realizámos todos os testes necessários e explicámos ao Álvaro, de forma clara, como funciona o sistema de pagamentos.
Em poucas semanas, o website estava totalmente desenvolvido e pronto a ser lançado. E assim o fizemos.
7. Personal gifts para o cliente 😉
Como gesto final, preparámos para o Álvaro capas personalizadas para que pudesse partilhar os links dos seus cursos no Instagram e Facebook, potenciando ainda mais o alcance do projeto.
Sabemos que, desde o início, houve interessados em inscrever-se e pessoas que não hesitaram em reservar o seu lugar nos cursos.
A equipa da JordiEnsenyatDisseny e da CodeWebBarcelona deseja ao Álvaro o maior sucesso neste novo projeto e esperamos que esgote todas as sessões.
Reconhecimentos
Até ao momento, já fomos destacados em várias plataformas dedicadas a projetos de web design inspiradores, como:
http://www.csswinner.com/details/yo-s-nutrirme/11414
http://www.designnominees.com/sites/yo-s-nutrirme
https://onepagelove.com/yo-se-nutrirme
http://www.bestcss.in/user/detail/Yosenutrirme-5193
O projeto ao vivo
Se tiverem curiosidade em ver este projeto em funcionamento, basta seguir o link para o site www.yosenutrirme.com