Ferramenta n°1: Webflow, criando com o código invisível

Prof. Eduardo Ariel

Como desenho esse código!!!!

Para muitos designers e criativos que trabalham com mídia interativa, projetar sem codificar pode ser um desafio. Tal premissa pode ter várias causas, mas uma delas certamente se configura na origem da formação, exatamente nas DCNs dos currículos. Assim sendo, de maneira sintética dois caminhos surgem:

1 I Tenha sempre uma rede com bons contatos de programação, sejam empresas ou profissionais liberais.

2 I Pesquise um programa WYSIWYG, famoso anacrônico para What You See Is What You Get, que seja adequado para suas necessidades. Como exemplo, tal qual o Photoshop executa ações por comandos visuais, o código que sustenta aquele resultado está sendo processado, enquanto o usuário clica em botões, menus e ícones. Isso também é WYSIWYG.

Após o Adobe Dreamweaver ser reposicionado para um grupo de profissionais que trabalham entre os designers e os programadores, muitos criativos ficaram sem um programa para chamar de seu. Assim sendo, como sucessor natural surge o Adobe XD e como marcas substitutas têm-se os serviços como Wix / similares.

De qualquer modo, talvez nenhuma delas ainda represente uma solução derradeira, seja pela limitação de layout ou pelos parcos recursos de exportação do código em formato aberto. No caso dessa última função, ela seria essencial para alguns projetos maiores, onde o programador é peça imprescindível.

Enquanto o Adobe XD segue o seu fluxo de evolução de uma ferramenta de prototipagem para se tornar outra de autoria, seguimos em busca de alternativas interessantes para transformarem ideias em código. Sendo assim, descobrimos um programa chamado Webflow que merece um pouco de atenção.

Fig. 1: Imagem do site da ferramenta Webflow (clique na imagem para acessar).

Fig. 2: Interface da ferramenta (clique na imagem para acessar).

Fig. 3: Página com treinamento da ferramenta Webflow (clique na imagem para acessar).

Fig. 4: Exemplos de projetos realizados com o Webflow (clique na imagem para acessar).

Em breve, dando sequência ao tema, iremos comentar outras ferramentas similares. Seguem abaixo algumas delas:

1 I Adobe Muse (descontinuou o programa, mas segue disponível)

2 I Adobe XD

3 I Proto.io

4 I Invision Studio

5 I Protopie

6 I Origami Studio

7 I Principle for Mac

8 I Just in Mind

9 I Figma

10 I UX Pin

11 I Flinto

12 I Framer

13 I Axure

14 I Wix