Como criar uma comunidade de design do zero tipo Dribbble (sem programar)

Aprenda como criar uma comunidade de design tipo o Dribbble do zero e sem programar, usando o editor visual web do Bubble.

Se você procura inspiração para criar programas sem programar, o fórum Bubble é uma das melhores comunidades para começar. No entanto, se está interessado em design, o Dribbble é uma das maiores comunidades online para buscar inspiração.

Criar a sua própria comunidade de design como o Dribbble nunca foi tão fácil usando as ferramentas sem código. Com a poderosa ferramenta de programação visual do Bubble, é possível criar aplicativos e redes sociais ricas em recursos que podem escalar, sem escrever uma única linha de código. Se você está construindo uma loja virtual, uma rede social, ou um aplicativo móvel Android e IPhone, os usuários aproveitam o Bubble para criar ricas experiências de aplicativo.

Portanto, ao longo deste post, iremos descobrir o processo de usar o Bubble para criar uma comunidade de design tipo o Dribbble ou Behance de forma gratuita.

Os passos para criar uma comunidade de design do zero como o Dribbble ou o Behance incluem:

Faça seu cadastro gratuito no Bubble.

Primeiramente, para começar a criar sua comunidade de design, é necessário uma conta Bubble.

Além disso, também será benéfico se você entender como criar e editar contas de usuários. Nós já cobrimos isso com mais detalhes no nosso artigo Como criar um aplicativo tipo Quora.

Quando estiver iniciando seu projeto, você pode escolher começar fazendo o protótipo do design da sua rede social, ou criar os campos necessários dentro do seu banco de dados.

Neste caso, começaremos usando a ferramenta de design visual Bubble para moldar a interface de usuário da nossa plataforma. Se você está replicando uma versão do Dribbble, algumas das páginas principais que vai querer incluir são:

• Página de upload: Onde usuários podem criar e publicar novas fotos.
• Página inicial: Apresentando uma grade de todas as fotos da comunidade.
• Página de perfil: Mostrando informações individuais dos usuários da comunidade.

Uma característica importante no Bubble é a habilidade de enviar dados entre páginas. Isso te permite criar uma versão genérica de uma página, e então mostrar dinamicamente o conteúdo relevante do seu banco de dados quando é requerido.

Assim, no caso da sua comunidade de design, você precisa apenas criar uma página para hospedar o perfil de cada usuário. Então podemos escrever os workflows necessários para exibir apenas o conteúdo relevante em cada perfil quando necessário (nós cobriremos isso com mais detalhes em breve).

Configurando seu banco de dados

Uma vez que você mapeou a tela da sua rede social, você pode focar em criar os campos de dados necessários para alimentar seu aplicativo. Vamos contar com estes campos para conectar workflows por trás do seu aplicativo.

O banco de dados pré-construído do Bubble deixa fácil criar tipos de dados diferentes com campos únicos. Nesse sentido quando criando um banco de dados, recomendamos dividir itens maiores em tipos de dados separados para melhorar a velocidade do seu aplicativo.

Por exemplo, ao invés de adicionar todos os dados de uma foto sob um único tipo de dado, dividiremos as partes em metadados (título, categoria, etc.) do conteúdo da foto em si (imagem e descrição).

Dessa forma, dividindo em tipos separados de dados, isso nos permite carregar apenas o conteúdo necessário quando preciso, reduzindo a quantidade de dados que o editor do Bubble precisará renderizar.

Quando construindo usando o Dribbble como MVP, precisaremos criar os seguintes tipos de dados e campos:

Tipo de dado: Usuário

Campos:

• Nome
• Bio.
• Foto de perfil
• Imagem de capa
• Fotos publicadas – Lista de fotos. Nota: Criar uma campo baseado em lista em um tipo de dado separado permite a integração perfeita de todos os seus campos de dados relevantes.
• Fotos curtidas – Lista de fotos
• Seguidores – Lista de usuários
• Seguindo – Lista de usuários

Tipo de dado: Foto

Campos:

• Título
• Categoria
• Conteúdo da foto – Conteúdo-da-foto
• Gostei – Lista de usuários
• Comentários – Lista de usuários

Tipo de dado: Conteúdo-da-foto

Campos:

• Imagem da foto
• Descrição da foto

Tipo de dado: Comentário

Campos:

• Conteúdo
• Foto de comentário – foto

Criando workflows

Portanto agora que você já estruturou tanto o design quanto o banco de dados de sua comunidade de design, é hora de começar a costurar tudo junto, deixando seu app funcional.

No Bubble, a maneira principal de fazer isso é com workflows. Cada workflow acontece quando um evento ocorre (ex.: o usuário clica em um botão), e então executa uma série de “ações” em resposta (ex.: “cadastre o usuário”, “faça uma mudança no banco de dados”, etc.)

Criando uma nova foto

O primeiro recurso principal que criaremos é a função que permite aos usuários publicar suas próprias fotos na plataforma da comunidade.

Na página de upload da sua rede social, você pode começar a criar este processo utilizando uma combinação de inputs, incluindo: campos de texto livre, menus suspensos, menus multilinhas, e carregadores de imagens.

Uma vez que o usuário adicionou os detalhes relevantes em cada input, eles clicarão no botão de publicação para criar uma nova entrada em seu banco de dados. Este clique de botão será a ação necessária para disparar seu workflow.

Usando o workflow editor, você pode selecionar criar um item no banco de dados. Neste caso, criaremos uma nova foto.

Então precisaremos começar a adicionar os campos relevantes dentro do nosso banco de dados. Portanto mapeie cada input que você gostaria de criar contra seu campo de dados correspondente.

Começaremos criando o tipo conteúdo-da-foto, e então iremos linkar o tipo à foto em si.

Em seguida, colocaremos passos adicionais neste workflow, criando outro item– só que desta vez vamos criar a foto no geral.

Assim, linkando o conteúdo-da-foto que criamos com esta foto, é possível integrar perfeitamente este dado por toda a nossa plataforma.

Exibir fotos em um feed na página inicial

Uma vez que os usuários começaram a publicar fotos na plataforma, precisaremos exibi-las na nossa página inicial.

Então, para construir este recurso, necessitamos utilizar um elemento de grupo repetidor. Grupos repetidores se integram ao seu banco de dados para exibir e atualizar uma lista de conteúdo dinâmico.

Assim, quando adicionando este grupo repetidor, precisaremos integrá-lo com um elemento de menu suspenso, permitindo aos usuários exibir fotos de uma categoria escolhida. As opções no menu suspenso terão as mesmas categorias conforme a do menu na página de upload.

Então, para integrar ambos os elementos, comece configurando o tipo de conteúdo do grupo repetidor como foto. Em seguida, configuramos a fonte de dados para procurar por todas as fotos onde a categoria se iguala ao mesmo valor que o valor do menu suspenso.

Assim, quando estruturando este grupo repetidor, também precisamos adicionar uma condição – permitindo que o grupo repetidor se comporte diferente caso nenhum valor no menu suspenso seja selecionado.

Portanto temos que adicionar uma condição que reconhece quando o valor das categorias suspensas está vazio. Dessa forma quando esta condição é cumprida, a fonte de dados do grupo repetidor vai simplesmente procurar por todas as fotos publicadas no nosso banco de dados.

Agora você está preparado para começar a estruturar o conteúdo dinâmico que será exibido em cada grade do grupo repetidor. Simplesmente mapeie a linha superior com o conteúdo relevante que você gostaria de mostrar, assim este elemento poderoso vai popular as colunas restantes baseado em seus dados existentes.

Curtir uma foto

Do nosso feed na página inicial, também criaremos um recurso que permite aos usuários curtir outras fotos através da plataforma.

Dessa forma, quando construindo esse recurso, você pode começar utilizando nosso elementos de ícone para adicionar um coração.

Quando o ícone de curtir é clicado, irá criar um novo workflow que altera um item no banco de dados da sua comunidade de design.

Assim, dentro de nosso banco de dados, Curtidas para cada foto são medidas por uma lista de usuários. Dessa forma nos permitindo adicionar o usuário a este campo de dados, aumentando a quantidade total de curtidas que uma foto exibe.

O item que queremos mudar neste workflow é a atual célula da foto, adicionando o usuário atual à lista de usuários que curtiram este post.

Além disso, também iremos replicar esse processo e adicionar passos adicionais a esse workflow – adicionando a atual célula de foto à lista de fotos curtidas dos atuais usuários.

Então, se quiser exibir o número de curtidas que uma foto tem, pode adicionar um elemento dinâmico de texto para mostrar a contagem total de usuários.

Exibir conteúdo dinâmico de uma foto completa

Em um grupo repetidor, também é possível criar eventos para cada coluna individual na nossa comunidade de design.

Esse recurso será útil quando estiver construindo recursos de navegação através da sua plataforma. Como cada foto na nossa página inicial apenas mostra uma imagem da foto, portanto precisaremos mostrar os detalhes completos da foto para cada post único em uma janela separada.

Como no Dribbble ou no Behance, esse conteúdo adicional precisa ser exibido em um elemento pop-up. Elementos pop-up tornam possível exibir informação sem direcionar o usuário para longe de uma página.

Assim, quando usando um elemento pop-up, começaremos configurando o tipo do conteúdo como sendo foto.

Então precisaremos configurar os elementos dinâmicos desse pop-up, permitindo-nos exibir todos os detalhes para cada foto individual.

Portanto, uma vez terminado de mapear a exibição do nosso pop-up, voltaremos para nossa página inicial e criaremos um novo gatilho de workflow quando a imagem em destaque da foto é clicada.

Dentro desse workflow, começaremos criando uma ação para exibir dados em um elemento.

O dado que estaremos exibindo é a foto da célula atual, compartilhando-a em nosso elemento pop-up.

Em seguida, criaremos outro evento que mostra o elemento pop-up em si.

Então agora quando uma foto é selecionada de nossa página inicial, vai exibir os detalhes completos em nosso elemento dinâmico pop-up.

Comentar em uma foto

Criar um recurso para suportar comentários é essencial para qualquer plataforma de comunidade ou aplicativo de rede social. Em nosso post individual da foto, podemos adicionar um grupo repetidor adicional e um input de texto, permitindo aos usuários enviar e exibir novos comentários.

Portanto, ao configurar esse grupo repetidor, comece definindo o tipo de dado como comentários.

Em seguida, nossa fonte de dados vai procurar por todos os comentários onde a foto do comentário é a foto dos grupos principais.

Então, ao criar um novo comentário, vamos adicionar um input de texto multilinha e um botão para postar.

Dessa forma, quando o botão de postagem é clicado, isso engatilhará um novo workflow – criando um novo item.

O item que queremos criar é um novo comentário. Assim mais uma vez, você precisará combinar o elemento em página com o campo de dados de comentário necessário.

Sempre que um novo comentário é criado, o grupo repetidor nesta foto irá automaticamente atualizar com o novo comentário.

Enviar dados entre as páginas

Em cada foto, os usuários também podem desejar ver o perfil completo de um criador. Portanto construindo um workflow de navegação quando a foto de perfil do usuário é clicada, podemos facilmente enviar os seus dados para nossa página de perfil.

Quando direcionando um usuário para a página de perfil, também precisamos repassar os dados do criador da foto atual.

Exibir perfis de usuários

Ao criar sua página de perfil, é necessário primeiro configurar o tipo da página como propriedade do usuário.

Assim, após configurar o tipo de conteúdo da página, você pode adicionar os elementos dinâmicos que gostaria de exibir para cada perfil de usuário.

Nesta página também iremos duplicar o grupo repetidor da foto da nossa página inicial, mas atualizando a fonte de dados para exibir apenas as fotos que o criador é o usuário da página atual.

Seguir um usuário

A última característica principal que iremos criar para o MVP da nossa comunidade de design é a habilidade de seguir outro usuário na plataforma.

Na página de perfil do usuário, colocaremos um botão de seguir. Então quando esse botão é clicado, criaremos um novo workflow que faz alterações em algum item.

O item que queremos mudar é o usuário atual, adicionando o usuário da página atual a sua lista de usuários seguidos.

Em seguida, também necessitamos atualizar a lista de seguidores de usuários da página atual, adicionando o usuário atual.

Próximos passos

Em conclusão, agora que está familiarizado com criar campos de dados customizados e exibir conteúdo dinâmico, você pode começar a ficar criativo com as experiências geradas com a sua comunidade de design.

Além disso, adicionalmente você pode:

• Adicionar recursos de compartilhamento social em cada foto
• Permitir aos usuários salvar designs em coleções