Criando UX com texto (markdown)

#ux #braziliandevs #markdown

Nota: apenas traduzi o texto abaixo e postei aqui. As referências estão no fim deste artigo.

Olá a todos, gostaria de apresentar uma IDEIA ou um projeto paralelo ;) com o qual brinco já há algum tempo.

Quem sou eu

Sou um coder/programador, não uma pessoa de UX, mas muitas vezes tenho que criar algumas telas de UX. Além disso, sei que muitos de vocês estão criando telas UX bastante rápido em ferramentas como Figma e etc, mas ainda leva tempo para criar wireframes, alinhar tudo, exportar, compartilhar e assim por diante.

Eu sou um grande fã do Markdown, então estava pensando: podemos usar o Markdown para criar um mockup? ou wireframes?

Então, no final, criei algo que chamo de utext, soletrado como "you text", para que você digite um texto e obtenha UX.

O POC

Atualmente, tenho apenas a POC, a gramática e a linguagem e o parser são criados usando https://pegjs.org/ como parser/translator do código.

Você pode brincar com o projeto, veja aqui https://utext.github.io/

se você clicar no botão "?" e esperar um pouco você verá alguns exemplos.

Mas só para mostrar se você deseja exibir um login form, por exemplo, ficará assim:

===Login===
username : ___
password: *___
===

O que gera isso

Se você quiser personalizar os buttons, você pode, por exemplo:

===Login===
username : ___
password: *___
===[login][dont login]===

Vai te dar isso:

A ideia é explicar VISUALMENTE o que e como deve ser e pronto, você tem o wireframe. Eu fui um passo além, você pode até mesmo exportar isso como código HTML e até mesmo alterar o tema se quiser ver como fica com uma interface de usuário diferente.

Todos os elementos suportados são basicamente tudo, desde HTML + alguns bootstrap elements. Você pode verificá-los no help em ? no website.

Um exemplo de Card será algo assim:

---Bootstrap Cards works too---
I am the content [random btn]

you can otuput a table too : 

|header1|header2|
|col1   |col2   |
|col1|col2|
---
*Note should start and end with at least 3 dashes*

O que gera isso:

Qualquer feedback é bem-vindo :) Eu fiz isso apenas por diversão :) e só quero saber como isso parece para você :) algum comentário?

Sim, a maioria das coisas de markdown, como imagem ou título e etc, simplesmente funcionam, vá brincar com isso :) bugs são esperados! :)

P.S. Como é um JavaScript simples (sem server-side), você pode salvar apenas o Gist na sua conta do GitHub ou carregar um Gist... ou copiar e colar :)