Projetando protótipos 5 aplicativos que fazem melhor que o Photoshop

O Photoshop é uma ferramenta popular entre designers e suas extensões, como CSS3Ps e FontAwesomePS, que também são uma boa ferramenta para criar protótipos de web design. Não obstante, não foi realmente criado para este fim e à medida que as tendências atuais avançam com design responsivo, pré-processadores CSS, CSS Frameworks e gráficos independentes de resolução (SVG), o Photoshop está se tornando menos relevante para o design da Web..

Não se preocupe, pois há muitos aplicativos alternativos criados por desenvolvedores independentes para ajudar a preencher as lacunas. Neste post vamos dar uma olhada nesses aplicativos e descobrir até que ponto as suas funcionalidades são excelentes quando comparadas com o Photoshop para criar protótipos de web design.

1. Fluxo da Web

O Webflow permite projetar sites arrastando e soltando. O Webflow cria o layout com base em uma grade do Bootstrap para que o design do seu site esteja pronto para a resposta. O Webflow também vem com um conjunto de componentes padrão da web, como blocos, listas e formatação de texto, que você pode adicionar ao espaço de trabalho do Webflow..

Os estilos podem ser facilmente adicionados a partir de um sidepanel e você também pode ajustar as propriedades dos elementos. Quando o design estiver concluído, você poderá exportar os resultados do design para o código HTML e CSS. Você também pode compartilhar seu trabalho com uma equipe.

2. Avocode

O Avocode suporta arquivos PSD e permite que você edite e o transforme imediatamente em um site viável com HTML e CSS. Avocode irá extrair todos os ativos em seu projeto, incluindo o CSS, Imagens e SVG (se houver). Você pode facilmente extrair CSS, em uma forma de Menos, SASS ou Stylus para qualquer camada selecionada, como foi integrado com CSSHat.

Além disso, o Avocode é equipado com controle de revisão que permite reverter seus projetos anteriores, caso algo saia errado..

3. Arara

O Macaw permite que você crie layouts da web e elementos da web, como se estivesse trabalhando em um editor de imagens como o Adobe Photoshop. Você pode criar colunas ou áreas de blocos, ajustar seu posicionamento e definir a tipografia conforme necessário. Macaw permite que você altere os estilos de vários elementos em um só lugar. Você também pode usar a biblioteca para armazenar todos os elementos para uso posterior.

Para criar um design responsivo, o Macaw permite definir pontos de interrupção e otimizar seu site para todos os dispositivos. Quando o processo de design é concluído, o Macaw pode gerar HTML e CSS adequados para você.

4. Esboço

Sketch é ideal para projetar interfaces e sites. Cria objetos baseados em vetores em vez de em bitmap. Assim, quando você redimensiona o tamanho da tela, seu design não perde a qualidade. Recursos como a "grade integrada" ajudarão você a organizar melhor o objeto ou um posicionamento de layout da web.

Além disso, o Sketch renderiza fontes semelhantes ao que é mostrado no Webkit (pense no Chrome, no Opera e no Safari). Assim, você não precisa se preocupar com os resultados do texto na imagem que não são tão nítidos e precisos quanto o texto original exibido no navegador. O esboço também pode exportar o CSS para cada elemento na camada.

5. antitipo

Antetype é um aplicativo baseado em vetores que é focado em design visual, ótimo para criar elementos de interface, como gradiente, sombra projetada, sombra interna, sombra de texto, estilo de borda e cantos arredondados. Antetype também fornece centenas de widgets que você pode usar diretamente em seu projeto.

Para criar um design responsivo, você pode definir pontos de interrupção que ajustam o tamanho da tela. Você também pode exportar cada elemento na forma de uma imagem ou CSS.