Criar wireframes são muito importantes no processo de design de websites. Este artigo do aela detalha muito bem o que é um wireframe, e como criá-los. Portanto, este post não vai abordar estes aspectos, e sim a praticidade de se ter uma biblioteca de elementos para criar os seus protótipos.
O que irei fazer
O objetivo é criar uma biblioteca de elementos para se criar de forma mais rápida, organizada e eficiente, wireframes mobile e desktop para os projetos web.
Criarei cabeçalhos, rodapés, seções hero, elementos de conteúdo, como títulos, áreas de texto, grids de posts e de produtos, elementos de e-commerce, e por aí vai. A ideia é manter este projeto sempre em andamento, criando cada vez mais elementos, de acordo com as minhas necessidades, das pessoas interessadas e das agências parceiras.
Qual app irei usar
Este projeto será criado no Adobe XD.
Por que o XD?
Simples, porque eu pago a suite da Adobe e não faz sentido gastar mais dinheiro em outros (bons) apps como o Sketch e Figma. Mas isto não quer dizer que eu não possa estender este projeto 🙂
Outro motivo é: há algumas boas alternativas para Sketch e Figma. Já para o Adobe XD encontrei poucas boas opções. O único que achei um pouco interessante é o Wires.
O que já tenho pronto
Já criei 22 tipos de cabeçalhos. Cabeçalhos simples e com navegação secundária. Com e sem ítens de e-commerce. A próxima etapa é criar os cabeçalhos mobile, com micro interações.
Quando a primeira versão estará pronta?
Minha expectativa é que até outubro de 2021 a primeira versão estará disponível.