Criando modelos e protótipos para a web com Jetstrap
Pro Tárcio Zamel, em Choco La Design:
A estratégia de usar programas de editoração de imagem para representar as telas de um site (o que leva dezenas de horas e gera dezenas de arquivos), enviar para aprovação, receber o feedback e reiniciar o ciclo novamente, já não atende às demandas do atual desenvolvimento web.
Você mesmo já deve ter passado por esta situação (ou, pelo menos, tem algum colega que já passou): ficar horas em frente ao Photoshop projetando e “dando vida” àqueles wireframes que idealizou algum tempo antes. As ideias estão ali, querendo sair, “tomar corpo”, se apresentar ao mundo, mas o empecilho técnico é um entrave temporal não desejado.
Certamente a pessoa que quer ver o resultado do que você está fazendo concorda com isso. Seja seu chefe, sócio, parceiro de desenvolvimento, cliente ou algum stakeholder, tenha certeza de que ele(s) gostaria(m) de poder interagir com aquelas imagens que você envia – de fato, vez ou outra acontece de alguém tentar interagir com a barra de rolagem na imagem.
Atualmente, a demanda por prazos cada vez menores e a competitividade de peso no ambiente online praticamente exigem que uma ideia passe do mundo da abstração para algo “palpável” em pouquíssimo tempo. Do contrário, enquanto você pensa melhor um produto semelhante ao seu pode surgir e ganhar a preferência do público!
Não seria bom se, assim que tivéssemos uma ideia ou sacada para uma interface web ela pudesse já estar pronta e funcional em poucos minutos? Bem, isso é possível com o Jetstrap!
Jetstrap é baseado no Twitter Boostrap, o framework para front-end mais usado e adorado do mundo (pelo menos, é o número 1 no ranking do GitHub no momento da publicação deste artigo). Com Jetstrap é possível usar os componentes do Twitter Bootstrap numa interface drag and drop muito simples e, em poucos minutos, fazer uma interface funcional e com uma aparência profissional.
E o melhor: é possível construir protótipos navegáveis, ou seja, você monta diversas Telas e consegue fazer link entre elas para simular uma navegação de verdade!
Não bastasse toda essa facilidade, você ainda pode exportar todo seu Projeto (ou somente uma Tela, se quiser) e baixar os arquivos HTML, CSS, JS e imagens necessários para seu funcionamento, agilizando bastante o desenvolvimento oficial de seu projeto.
Ele é, sem dúvidas, uma das melhores ferramentas para modelagem e prototipagem grátis baseada em web! Veja um exemplo de uma criação com Jetstrap feita em 5 minutos:
E, caso queira aprender mais sobre como trabalhar com o Jetstrap e conhecer tudo o que ele é capaz de fazer, confira o recém lançado livro Jetstrap: modelos e protótipos à jato!, o primeiro livro do mundo a abranger o Jetstrap em todos os seus detalhes, explicando sua interface, componentes e formas de uso. Ah, e o livro é acompanhado pelos arquivos de exemplo e um screencast exclusivo sobre o uso do Jetstrap!
E até o final de março (31/03), todos os leitores do Choco La Design podem adquirir o livro com 10% de desconto! Para isso, basta usar o cupom CHOCOFA no momento de finalizar a compra!
Escrito por:Tárcio Zemel
Trabalha com desenvolvimento web desde 2000 e atuar nessa área é uma das coisas que mais gosta de fazer. Desenvolve seus sites, sistemas virtuais, softwares e produtos online especialmente com CodeIgniter e WordPress. Nos últimos tempos, tem estudado Usabilidade e UX.
Confira o artigo original publicado pelo Choco La Design:
Comentários
Postar um comentário