Pular para o conteúdo
Ateliê 51.

trabalho do Ateliê 51LaLoKa — Bar & Parrilla, Porto Alegre

Conversar sobre um projeto

Design edesenvolvimentodigital.

Sites e sistemas sob medida, do desenho da interface ao projeto no ar. Um estúdio independente em Porto Alegre, criado por Filipe Alves.

explore os projetos
pular a abertura → 00%
Quero o diagnóstico

Da primeira tela à próxima ação.

Design. A marca, o conteúdo e a navegação, desenhados para cada projeto.
Desenvolvimento. A reserva, o cadastro e o pedido de orçamento funcionando na tela.

Projetos do Ateliê.

Sites de serviços, aplicativos e protótipos. Conheça a interface, a entrega e o estágio de cada projeto. Nos trabalhos com acesso público, use o botão “usar aqui” para navegar.

Explore os trabalhos por tipo de projeto.

tipo de projeto

Sites para clientes de agências

desenvolvimento

Design e desenvolvimento de sites, com a possibilidade de integrar agenda, área do cliente e painel de administração. A parceria começa com a definição das responsabilidades e do escopo.

Quero o diagnóstico
Site do Avenue Studio: um loft em Porto Alegre com agenda e área da cliente.
em produção
Site + plataforma

Avenue Studio

Estúdio de locação · Porto Alegre

Site e plataforma de reservas de um estúdio em Porto Alegre. A apresentação do espaço se conecta à agenda, à área da cliente e ao painel de administração.

O fluxo reúne escolha de horário, contrato e pagamento.

AgendaÁrea da clienteCRMPagamentoPainel
ver Avenue Studio no ar este cliente bloqueia incorporação · abre em aba
Site do salão Beleza e Estilo, em Osório, com quiz de qualificação.
em produção
Site de bairro que qualifica

Beleza & Estilo

Salão · Osório

Um quiz curto antes do WhatsApp: o que ela quer, há quanto tempo não corta, quando pode vir.

As respostas seguem para o WhatsApp junto com o pedido.

QuizWhatsAppHorário realMapa
ver Beleza & Estilo no ar este cliente bloqueia incorporação · abre em aba
Cardápio digital do LaLoKa, bar e parrilla em Porto Alegre, lido por QR na mesa.
em produção
Cardápio por QR

LaLoKa

Bar, parrilla & eventos · Porto Alegre

Cardápio digital com 109 itens em 19 categorias e painel para atualizar preços e descrições.

A equipe atualiza a disponibilidade dos itens no painel.

QR na mesaPainel da casaAcabou hojeSem app
ver LaLoKa no ar
Primeiro Você: aplicativo de assinatura com área logada e ritual diário.
em produção
App de assinatura

Primeiro Você

Autocuidado · membership

App instalável, área logada, ritual diário, desafio pago e cobrança recorrente, com login e painel de administração integrados.

A área de membros reúne o conteúdo e o acesso por assinatura.

PWAAssinaturaÁrea logadaPainel
ver Primeiro Você no ar
Reluz: protótipo navegável do marketplace de lavagem e estética automotiva.
protótipo navegável
Landing + protótipo

Reluz

Marketplace de lavagem & estética

Captação com lista de espera e protótipo navegável dos três lados: cliente, estabelecimento e administração.

O protótipo permite explorar as jornadas de quem contrata, de quem oferece o serviço e de quem administra.

Lista de esperaBusca + mapaPainel parceiro
Bobby: aplicativo educativo instalável com fases para crianças.
projeto próprio
PWA educativo

Bobby

Jogo de aprender · sem servidor

Jogo com 150 fases executadas no aparelho, sem cadastro.

As fases funcionam sem conexão com a internet.

OfflineInstalávelSem backend

Dois projetos por dentro.

Avenue Studio e Beleza & Estilo: duas formas de conectar a apresentação de um serviço ao atendimento.

Site do Avenue Studio no desktop: capa editorial do loft. O mesmo site do Avenue Studio no celular.
Caso 01 · em produção

Avenue Studio

Estúdio de locação · Porto Alegre
O problema

Organizar a consulta de disponibilidade e as etapas da reserva do estúdio em um só lugar.

O que eu fiz

Desenhei e desenvolvi o site, a agenda online, a área da cliente e o painel de administração. O fluxo de reserva inclui cadastro, contrato e pagamento.

O caminho de quem usa

Consulta a agenda → escolhe um horário → preenche os dados → segue para contrato e pagamento.

Estado

Site publicado, com acesso público à apresentação do espaço e à agenda.

abrir o Avenue Studio
Site do salão Beleza e Estilo no desktop. O mesmo site do Beleza e Estilo no celular.
Caso 02 · em produção

Beleza & Estilo

Salão · Osório
O problema

Reunir as informações sobre o serviço procurado antes de encaminhar a pessoa ao WhatsApp do salão.

O que eu fiz

Estruturei o site com um questionário sobre serviço, histórico e disponibilidade. As respostas compõem a mensagem enviada ao salão.

O caminho de quem usa

Escolhe o serviço → responde três perguntas → vê o horário de funcionamento real do dia → cai no WhatsApp com a mensagem já escrita.

Estado

Site publicado, com questionário e encaminhamento das respostas para o WhatsApp.

abrir o Beleza & Estilo

O que o Ateliê desenvolve.

Sites para apresentar marcas e serviços, sistemas para reservas e cadastros, e assistentes de IA para tarefas específicas. Cada projeto tem escopo e proposta próprios.

Oferta A

Site comercial

Design de interface e desenvolvimento para apresentar serviços, mostrar projetos e receber pedidos. Para agências, a parceria pode incluir a construção do site a partir da direção já definida.

  • Estrutura e organização do conteúdo que você fornece
  • Testes de leitura e navegação no celular
  • Formulário com destino de recebimento verificado
  • Registro dos envios do formulário na ferramenta definida
  • Duas rodadas de revisão, cada uma em lista única
  • Instruções de acesso e orientação de uso

Fica fora: logotipo e rebranding, fotos e vídeos, e-commerce, área de membros, tradução, integrações personalizadas e gestão de anúncios. Funcionalidades adicionais recebem orçamento próprio.

Entender o projeto
Oferta B

IA na operação

Assistentes configurados a partir dos materiais da empresa. Um exemplo: organizar as informações de um briefing e preparar um rascunho de proposta para a equipe revisar.

  • Um processo delimitado, uma equipe, um idioma
  • Assistente numa ferramenta que já existe, na conta do cliente
  • Regras escritas: serviços, limites e de onde vem cada preço
  • Dez casos de teste, incluindo briefing incompleto e pedido fora do escopo
  • Treinamento de uma sessão e guia curto de revisão
  • Revisão humana antes de qualquer envio

Fica fora: envio automático, negociação, atendimento público autônomo, integrações personalizadas, migração de acervo e acesso a toda a empresa. A proposta delimita os acessos e as ações do assistente.

Entender o processo

Agenda, área de membros ou outra integração? O desenvolvimento dessas funções recebe um escopo específico.

Do briefing ao rascunho de proposta.

Explore uma simulação com briefing fictício: ela organiza a entrega, aponta informações ausentes e separa o que precisa de aprovação. Este exemplo usa regras fixas, sem conexão com um modelo de IA.

1 · o briefing

“Cliente é uma clínica de fisioterapia em Canoas. Querem site novo, umas 4 páginas, com agendamento. Precisam pra semana que vem. Orçamento a gente vê depois.”

Clique para montar o exemplo e ver os pontos de revisão.

2 · o rascunho

O rascunho aparece aqui.

Explore as direções visuais.

  • aqui com foto · no seu, vídeo
    01

    Landing com vídeo

    Vídeo em destaque e conteúdo sobreposto em tela cheia.

    Lançamento · captura de lead · um produto só
  • Luxo é o que sobra de espaço.

    movimento contido
    02

    Composição clara

    Paleta clara, contraste tipográfico e espaço entre os elementos.

    Hospitalidade fina · joalheria · imóvel de alto padrão
  • a letra é a protagonista
    03

    Editorial de marca

    Wordmark gigante, palavra que sobe, texto que se revela.

    Moda · estúdio criativo · manifesto
Ver as outras seis direções
  • o produto é o herói
    04

    Vitrine de produto

    Painéis que colocam o item na frente, com foco total na oferta.

    E-commerce · lançamento · catálogo enxuto
  • 05

    Interativa com lanterna

    O cursor ilumina a composição e revela uma segunda camada.

    Portfólio · antes e depois · experiência
  • profundidade de verdade
    06

    Carrossel em profundidade

    Gira em 3D, com cor que muda a cada item e textura de filme.

    Linha de produto · tela de app · poucos itens-herói
  • 1 284contador ao vivo
    07

    Rede & plataforma

    Avatares em órbita, número que sobe, esteira de logos. Foi o motor do Reluz.

    Marketplace · comunidade · diretório
  • 08

    Scrollytelling

    A rolagem conduz a sequência de cenas e conteúdos.

    Moda · arquivo · portfólio premiado
  • é o estilo desta página
    09

    Cinematográfica escura

    Tela cheia, grão, vinheta e serifa elegante.

    Estúdio · agência · lançamento de marca

O mesmo serviço, apresentado de dois jeitos.

Um estudo de conteúdo e hierarquia para a mesma oferta. Arraste a linha para comparar as duas composições.

Antes Depois

O padrão de entrega, e o que muda em cada projeto.

O que toda entrega tem

Testes no celular, navegação por teclado nos controles principais, conferência de contraste e desempenho. A entrega inclui as instruções de acesso e de uso.

O que muda a cada projeto

A identidade visual, a organização do conteúdo e as interações acompanham a marca e o uso previsto. Uma agenda de estúdio e um aplicativo por assinatura pedem estruturas diferentes.

Como o projeto acontece.

  • 01Diagnóstico.Entendo o que acontece hoje, que materiais existem e quem vai usar a entrega. Você recebe as prioridades e uma recomendação de escopo. É pago, tem entrega própria, e o valor é abatido no projeto conforme a proposta.
  • 02Proposta.Com o que está incluído, o que fica fora, quais etapas dependem da sua equipe e como vamos verificar a entrega.
  • 03Construção e teste.Apresento o trabalho e confiro o funcionamento com você. Se houver IA, a revisão humana faz parte do processo, não é opcional.
  • 04Uso.Entrego as instruções e acompanho o período combinado. Manutenção contínua, se precisar, entra em proposta específica.
Preciso contratar site e IA juntos?

Não. O diagnóstico define qual entrega faz sentido para a sua prioridade.

A IA vai trabalhar sem ninguém conferir?

Na implantação inicial, uma pessoa revisa as informações e aprova as ações. O nível de automação depende do processo e dos testes.

Ferramentas e assinaturas estão incluídas?

Os custos necessários são identificados antes da contratação. A proposta informa quem contrata e quais limites se aplicam. Domínio, hospedagem e licenças são detalhados quando necessários.

O diagnóstico é pago?

Sim. Ele tem entrega própria, mesmo se você não contratar a implantação. O valor é informado antes e o abatimento no projeto é combinado por escrito.

Você atende fora de Porto Alegre?

Sim, remotamente, no Brasil. Reuniões e treinamentos são combinados conforme o projeto.

Em quanto tempo fica pronto?

Prazo de referência: dez dias úteis de produção, contados depois que materiais, conteúdo e acessos estiverem completos. Eu mantenho no máximo dois projetos por vez, a data de início é confirmada na proposta.

Quem responde pelo trabalho?

Filipe Alves. Eu conduzo o projeto, do diagnóstico ao desenvolvimento e à entrega.

Filipe Alves. À frente do Ateliê.

Assinatura compacta do Ateliê 51: a palavra Ateliê sobre o número 51, com o ponto em ocre.

Sou formado em marketing e trabalhei na gestão do meu próprio negócio antes de criar o Ateliê 51. Hoje desenho e desenvolvo sites e sistemas em Porto Alegre. Gosto de acompanhar o projeto inteiro: entender a marca, desenhar a interface e construir o que as pessoas vão usar.

Vamos definir o próximo projeto.

O primeiro contato é uma conversa de vinte minutos sobre o projeto. Depois, o diagnóstico pago reúne prioridades, requisitos e uma recomendação de escopo. Você recebe esse documento mesmo que escolha não seguir com o desenvolvimento.

Valores sob proposta. O diagnóstico tem preço definido antes da contratação e abatimento no projeto conforme as condições combinadas.

  • 01O que você recebe.Um documento com as prioridades, o escopo recomendado, os materiais necessários e as responsabilidades de cada parte.
  • 02Escopo escrito.Entregas, etapas, critérios de aprovação e datas definidos na proposta.
  • 03Construção.Você acompanha uma versão de teste e reúne os ajustes nas rodadas de revisão combinadas.
  • 04No ar, com medição ligada.O site inclui o registro de envio do formulário, na ferramenta definida na proposta. A equipe recebe as instruções para acompanhar esse dado.
Quero o diagnóstico

Porto Alegre · atendimento por WhatsApp

Ateliê 51

Teu próximo
projeto digital.

Tem um site para criar, uma interface para desenvolver ou um sistema para organizar? Envie uma breve descrição do projeto e as referências que já tem.

Falar no WhatsApp