Preparando a pagina

Pular para o conteudo
MP Code Studio Identidade digital

MP Code Studio atendimento 100% online

Um site bonito chama atencao.
Um site bem construido vende

Eu escrevo cada linha do seu site a mao, sem WordPress, sem tema comprado e sem plugin pesado. O que voce recebe e uma pagina leve, que abre em menos de um segundo, aparece no Google e conduz quem chega ate a conversa no WhatsApp.

  • medindo tempo real de carregamento desta pagina no seu aparelho
  • 95+ meta de nota no Lighthouse em performance e boas praticas
  • zero mensalidade de plataforma: o site e seu, hospedagem enxuta
Emblema do MP Code Studio

01 Servicos

Dois formatos, o mesmo cuidado de engenharia

Comeco pelo objetivo do negocio e so depois penso em layout. Escolha o formato que combina com o seu momento e veja exatamente o que entra na entrega, quanto tempo leva e o que eu preciso de voce.

Landing page de conversao

Uma pagina unica, com um objetivo unico: fazer quem chegou entrar em contato. Cada bloco tem uma funcao dentro da leitura, do primeiro segundo ate o botao final. Serve para quem anuncia no Instagram, no Google ou entrega cartao e precisa de um endereco que sustente a promessa.

  • Roteiro de leitura e texto de venda escritos junto com voce
  • Formulario ligado ao seu WhatsApp, com o resumo do pedido pronto
  • Otimizacao para celular, que hoje responde pela maior parte dos acessos
  • Ficha tecnica de SEO, cartao de compartilhamento e favicon proprios
  • Publicacao no seu dominio, com certificado de seguranca ativo

Servicos complementares

Podem entrar junto com o projeto ou ser contratados depois, um a um.

  • Registro e configuracao de dominio Cuido do registro, do apontamento e do certificado de seguranca.
  • E-mail profissional no seu dominio Endereco com o nome da sua empresa em vez de conta gratuita.
  • Google Business e SEO local Ficha do Google preenchida, com fotos, horarios e caminho para avaliacoes.
  • Catalogo digital com QR Menu ou catalogo que abre pela camera do celular, facil de atualizar.
  • Correcao de acessibilidade Contraste, teclado e leitor de tela revisados em pagina que ja existe.
  • Politica de privacidade e termos de uso Textos alinhados a LGPD, escritos para o seu tipo de atendimento.

02 Como eu trabalho

Codigo e a ultima etapa, nunca a primeira

Site bonito que nao vende quase sempre nasceu do mesmo erro: alguem comecou a programar antes de entender o negocio. Aqui a ordem e outra. Primeiro eu descubro o que precisa ser dito, depois desenho onde cada coisa entra, aprovo o layout com voce e so entao escrevo a primeira linha de codigo. Mudar um bloco no desenho custa minutos, mudar depois de programado custa dias.

Etapa 01

Coleta de requisitos

1 a 2 dias

  • Conversa guiada sobre o seu servico, o seu cliente e o que ele pergunta antes de fechar
  • Definicao do objetivo da pagina: ligacao, WhatsApp, agendamento, orcamento ou venda
  • Levantamento do que voce ja tem: textos, fotos, logo, dominio e redes
  • Analise de tres concorrentes diretos para achar o que ninguem esta dizendo
  • Escopo escrito com blocos, recursos tecnicos, prazo e valor fechado

Etapa 02

Arquitetura da informacao e wireframe

1 a 2 dias

  • Ordem dos blocos definida pela duvida que o visitante tem em cada rolagem
  • Wireframe em preto e branco, sem cor e sem foto, para discutir estrutura e nao gosto
  • Versao de celular desenhada primeiro, porque e de onde vem a maior parte das visitas
  • Definicao dos pontos de contato e do texto de cada botao

Etapa 03

Prototipo navegavel e layout aprovado

2 a 4 dias

  • Layout com cor, tipografia, foto e texto final aplicados sobre o wireframe aprovado
  • Prototipo que voce abre no proprio celular e navega antes de existir codigo
  • Guia de estilo com paleta, tamanhos e componentes, para o site crescer sem virar colcha de retalhos
  • Duas rodadas de ajuste incluidas nesta etapa, com o layout congelado no fim

Etapa 04

Codigo

3 a 10 dias

  • Marcacao escrita a mao, sem tema comprado e sem construtor de paginas
  • Recursos tecnicos combinados na etapa 01: animacao, catalogo, aplicativo instalavel, integracoes
  • Otimizacao de imagem, fonte e cache aplicada durante o desenvolvimento, nao depois
  • Acessibilidade e seguranca conferidas bloco por bloco

Etapa 05

Teste e medicao

1 a 2 dias

  • Teste em aparelho real, no Android e no iPhone, em rede movel
  • Navegacao completa por teclado e conferencia de contraste com medidor
  • Formulario testado do envio ate a chegada da mensagem
  • Medicao de acessos ligada e eventos de contato conferidos um por um

Etapa 06

Publicacao e apoio

1 dia, mais 30 de garantia

  • Dominio apontado, certificado ativo e site no ar em horario combinado
  • Envio do mapa do site ao Google e verificacao no Search Console
  • Entrega dos arquivos e do acesso, tudo no seu nome
  • Trinta dias de garantia para correcao de qualquer defeito da entrega

O valor do projeto e apresentado no fim da etapa 01, quando o escopo esta escrito e nos dois sabemos exatamente o que vai ser feito. Antes disso, qualquer numero seria chute.

Escolheu o formato?

Me conte o que voce precisa e eu volto com escopo, prazo e valor fechados

Sem reuniao obrigatoria e sem proposta de trinta paginas. Voce escreve em poucas linhas o que precisa e eu respondo com o caminho mais curto para colocar isso no ar.

Quero meu orcamento Resposta em ate 1 dia util

03 Estrutura do site

Monte a sua pagina e veja o layout tomar forma

Toque nos blocos que fazem sentido para o seu negocio. O desenho ao lado se monta na hora, o resumo mostra o prazo estimado e voce pode enviar tudo pronto para eu orcar.

Quatro blocos vem inclusos em toda entrega e nao podem ser desmarcados.

Sua landing vai ter isso aqui

5 blocos escolhidos, prazo estimado de 6 dias uteis

    O prazo comeca a contar quando eu recebo textos, fotos e o acesso ao dominio.

    04 Tecnologias

    Tudo o que pode entrar no seu projeto

    Nenhum site usa tudo o que esta aqui, e esse e justamente o ponto: o que entra depende do que voce precisa. Cada recurso desta lista custa tempo de trabalho, e e por isso que o valor sai sob medida em vez de tabela fixa. Toque em uma area para filtrar e abra a ficha para ver em que isso muda o resultado do seu negocio.

    10 areas mostradas nesta lista

    Base e semantica

    O alicerce do site. Marcacao com significado, estilo organizado em tokens e comportamento escrito a mao, sem tema comprado e sem construtor de paginas.

    • HTML5 semantico
    • CSS Grid
    • Flexbox
    • Container queries
    • Variaveis de CSS
    • JavaScript moderno
    • Design tokens
    • Padrao BEM
    • Progressive enhancement

    Velocidade

    Tecnicas para a pagina aparecer antes de a pessoa desistir. Cada imagem, fonte e trecho de codigo entra na hora certa e no menor tamanho possivel.

    • Tree shaking
    • Lazy loading
    • Code splitting
    • CSS critico
    • Preload
    • Prefetch
    • Preconnect
    • srcset
    • WebP
    • AVIF
    • Brotli
    • Cache imutavel
    • Minificacao
    • Fontes com subset
    • CDN de borda

    Movimento e interacao

    Animacao com proposito: guiar o olho, dar retorno ao toque e mostrar que a pagina esta viva, sempre sem travar a rolagem.

    • Transicoes por GPU
    • IntersectionObserver
    • Revelar ao rolar
    • Parallax leve
    • Micro-interacoes
    • Canvas
    • Contador animado
    • Efeito de digitacao
    • Esqueleto de carregamento
    • Respeito a menos movimento

    Acessibilidade

    O site funciona para quem usa teclado, leitor de tela, letra ampliada ou tem baixa visao. Isso amplia publico e reduz risco juridico.

    • WCAG 2.2 AA
    • Landmarks
    • ARIA
    • Navegacao por teclado
    • Foco visivel
    • Contraste medido
    • Texto alternativo
    • Area de toque de 44px
    • Leitor de tela

    SEO tecnico

    A parte que faz o Google entender o site e mostrar o resultado bonito na busca e no compartilhamento por WhatsApp.

    • JSON-LD Schema.org
    • Open Graph
    • Twitter Card
    • Canonical
    • sitemap.xml
    • robots.txt
    • Core Web Vitals
    • FAQ estruturado
    • Enderecos limpos

    Aplicativo instalavel

    O site pode ser instalado na tela inicial do celular e continuar abrindo mesmo com internet instavel.

    • Manifest
    • Service worker
    • Cache offline
    • Instalavel no celular
    • Atualizacao em segundo plano
    • Tela de abertura
    • Icones adaptativos

    Seguranca e LGPD

    Protecao no servidor e no formulario, com tratamento de dados alinhado a lei brasileira.

    • Content Security Policy
    • HSTS
    • X-Content-Type-Options
    • Referrer-Policy
    • Permissions-Policy
    • HTTPS
    • Armadilha antisspam
    • Limite de envios
    • Validacao de campos
    • Politica de privacidade

    Medicao e integracoes

    Sem numero nao existe decisao. Ligo a medicao de acessos e conecto o site as ferramentas que voce ja usa.

    • GA4
    • dataLayer
    • Eventos personalizados
    • Search Console
    • Meta Pixel
    • WhatsApp Business
    • Google Business
    • Webhook para CRM
    • E-mail transacional

    Infraestrutura e entrega

    Publicacao automatica, ambiente de teste antes do ar e possibilidade de voltar a versao anterior em minutos.

    • Git
    • GitHub
    • Vercel
    • Netlify
    • Cloudflare
    • Publicacao por commit
    • Ambiente de teste
    • Retorno de versao
    • DNS
    • Certificado automatico
    • Monitor de queda

    Design e prototipacao

    A etapa que vem antes do codigo: estrutura desenhada, prototipo navegavel e layout aprovado por voce.

    • Figma
    • Wireframe
    • Prototipo navegavel
    • Biblioteca de componentes
    • Guia de estilo
    • Teste em aparelho real
    • Mobile first

    05 Investimento

    Orcamento sob medida, porque nenhum projeto e igual ao outro

    Nao trabalho com tabela fixa, e explico o motivo: uma pagina de cinco blocos com texto pronto nao da o mesmo trabalho que uma pagina com animacao, catalogo, aplicativo instalavel e integracao com sistema. Voce escolhe o que quer dentro da pagina e o valor nasce desse escopo, fechado por escrito antes de eu comecar.

    O que define o valor do seu projeto

    • Tamanho Quantidade de blocos, de paginas e de conteudo a organizar.
    • Conteudo Se voce entrega textos e fotos prontos ou se escrevemos juntos.
    • Recursos tecnicos Animacao, catalogo, aplicativo instalavel, integracao e medicao avancada.
    • Design Aproveitar a identidade que voce ja tem ou definir a direcao visual do site.
    • Prazo Entrega no fluxo normal ou com prioridade na fila.
    • Depois da entrega Projeto entregue e encerrado ou acompanhamento mensal ativo.

    Como chegamos ao numero

    1. Voce conta o que precisa Pelo formulario aqui embaixo ou pelo WhatsApp, em poucas linhas.
    2. Eu devolvo o escopo Em ate 1 dia util, com blocos, tecnologias, prazo e valor fechado.
    3. Aprovado, comeca Metade na assinatura e metade na entrega, por Pix ou cartao.
    Pedir meu orcamento

    O valor aprovado nao muda durante o projeto. Se voce quiser incluir algo novo no meio do caminho, eu apresento a diferenca antes de executar.

    Depois da entrega

    Site Vivo, o acompanhamento mensal

    Site parado envelhece rapido: navegador atualiza, concorrente melhora e o Google muda o criterio. O Site Vivo existe para o seu site continuar rapido, seguro e no ar sem voce precisar lembrar disso.

    • Relatorio mensal com acessos, contatos recebidos e nota de velocidade
    • Pequenos ajustes de texto, foto e preco durante o mes
    • Backup do site guardado fora da hospedagem
    • Monitoramento de queda, com aviso e correcao no mesmo dia
    • Uma melhoria planejada por mes, escolhida junto com voce

    Sob medidamensal, conforme o tamanho do site

    Sem fidelidade. Voce pode pausar quando quiser e o site continua sendo seu.

    Quero o acompanhamento
    • Escopo e valor travados O que combinamos por escrito nao muda de preco durante o projeto.
    • O projeto e seu, com codigo fonte Dominio no seu nome, arquivos entregues, nenhuma amarra comigo.
    • Prazo com data, nao com em breve Voce recebe a data de entrega antes de pagar a primeira parcela.
    • Dados tratados conforme a LGPD Aviso claro sobre o uso das informacoes e politica publicada no site.

    06 Perguntas frequentes

    Perguntas frequentes

    Se a sua duvida nao estiver aqui, me pergunte no formulario que eu respondo direto.

    07 Contato

    Me conte sobre o seu projeto

    Preencha os dois passos abaixo. So o nome e o WhatsApp sao obrigatorios, o resto voce completa se quiser adiantar o assunto. Ao enviar, a proposta chega direto para mim com tudo organizado.

    • Leio e respondo em ate 1 dia util
    • Volto com escopo, prazo e valor fechados
    • Se nao for o momento, eu digo com franqueza
    Seus dados

    Seus dados sao usados apenas para responder este contato, conforme a politica de privacidade.