Artneo

Estudando design na prática

Estudando design na prática

Estudando design na prática
Por gentileza, avalie 🙂

Quando você quer aprender uma habilidade nova – como por exemplo tocar piano – você precisa estudar bastante para melhorar sua técnica rapidamente, certo? Você pode começar as aulas com um professor renomado de sua região e ir escutando pianistas profissionais reparando em como eles fazem com as notas musicais e suas escalas.

Estudo, boas referências e projetos são importantes para o desenvolvimento em design. Estudando design na prática é a forma mais rápida de alcançar ótimos resultados.

Com o web design o processo é o mesmo. Eu busco novos cursos e coleciono certificados para ir melhorando minhas habilidades em web design – o que seria a comparação com o professor de piano. Agora, ao observar todos os websites que acesso e procurar padrões de beleza em designs distintos – isso é estudar analisando as mãos e padrões musicais de um pianista.

Este é o primeiro template criado baseado em um design de alto nível. A análise foi feito sob a tabela de preços da Netlify.

Clique no link para explorar todos os layouts para elementor.

Estudando design na prática: como será feita a procura de layouts?

São várias as oportunidades para conseguir inspiração em design na internet. Eu recomendo o site Dribbble por juntar muitos designers de qualidade em uma só plataforma.

Sites que navego e reparo em rodapés, menus, chamadas à ação ou tabela de preços que se destacam – também serão alvos de meus estudos e prática em busca de melhorar minha habilidade e conhecimento em web design.

Eu utilizo o WordPress para criar os meus sites e existem milhares de desenvolvedores dessa plataforma espalhados pelo mundo – já que quase 25% de todos os sites são criados em WordPress.

E recentemente, após ter conquistado experiência com o tema Divi para desenvolvimento de sites eu acabei encontrando uma nova ferramenta – talvez ainda mais poderosa. Ela chama-se Elementor.

O Brasil tem espaço para evoluir e ter uma comunidade forte de desenvolvedores que utilizam o plugin Elementor – e eu quero me adiantar e fazer parte dessa comunidade que será grande um dia em nível nacional.

Como funcionará este novo projeto?

Este post é o primeiro de toda uma categorias que pretendo fazer.

A idéia é simples e consiste de 4 etapas:

  • Buscar inspirações em sites com designs de qualidade;
  • Trazer a essência do que é bonito na página ou seção do site para o Elementor;
  • Adicionar novas ideias e animações ao projeto estudado;
  • Compartilhar gratuitamente o layout em forma de template para o plugin Elementor.

Portanto, se você tem interesse em descobrir novos designs, técnicas ou aprender mais sobre esse maravilhoso plugin, assine minha newsletter e fique por dentro de todas as novidades. Ahh! Também vou criar uma série de vídeos no YouTube para agregar maior valor às minhas futuras postagens.

Então, sem mais delongas, vou começar o primeiro estudo – template 1.

Template 1 – Tabela de preços

Vídeo: https://youtu.be/vrrfV5Zh1EA
Visualizar template e fazer download: https://artneo.com.br/templates-elementor/layout-1/

O primeiro estudo de design foi inspirado no site da Netlify. A página de preços contém uma tabela que se destaca pelas linhas diagonais de seu interior – além da bela composições de cores das diferentes tabelas e do fundo englobando todas elas.

São detalhes sutis na tabela de preços da Netlify que fazem toda a diferença em seu design.

Clique no link acima e veja o site. Percebe como seu design não agride a visão? Da vontade de ler todos os aspectos e conhecer mais a respeito da precificação da empresa.

A tipografia do site é baseada na Roboto – fonte gratuita do Google Fonts e recomendado pela orientação da equipe de design do Google criadora do Material Design.

O que mudou do layout inicial?

Eu gosto da ideia de adicionar uma chamada à ação logo depois da apresentação dos preços. O botão “clique aqui e agende uma demonstração gratuita” incentiva o usuário do site a entrar em contato com a empresa ou buscar mais informações.

Adicionei animações com delays curtos entre os módulos – para ir chamando a atenção do usuário do início ao final da página.

Observação: dependendo da altura do monitor a animação dos itens da página podem não aparecer no tempo correto. Por isso, é preferível baixar o template sem animação. Adicione animações conforme a necessidade no final do seu projeto.

Adicionei ícones ao lado esquerdo da lista de vantagens para auxiliar o usuário na leitura. Além disso, utilizar o ícone de confirmação deixa mais bonito o design (do que simples bolinhas comuns em todos os designs).

Conclusão

O que você achou dessa nova categoria de postagens do blog? Você tem interesse em acompanhar meus estudos em design? Seria uma honra para mim poder compartilhar experiências e novas ideias com outros web designers também.

Agradeço por você ter me acompanhado até aqui! Deixe seu comentário ou envie um feedback.

Até a próxima!

Andre Esteves Perrone

Web designer que adora estudar sobre novas tendências da criação de sites e trazer resultados positivos para seus clientes. Você pode encontrar ele tocando sax na igreja local, assistindo séries no Netflix ou escrevendo no blog da Artneo.

Deixe uma resposta

Fechar Menu