Seu design do Photoshop montado em HTML e CSS: uma página a partir do seu layout exportado, com versão para celular

Exemplo de resultado

Exemplo do pacote PadrãoVer completo

Página inicial de uma clínica odontológica feita a partir do design

Antes: o design que o cliente enviou

Depois: a página funcionando

Arquivos: um arquivo ZIP com index.html, os estilos e 2 imagens para a página, pronto para subir na hospedagem do cliente. As imagens aqui são capturas de tela da página.

Cliente: Bright Smile Dental. Tarefa: transformar o design da página inicial em uma página HTML funcionando, com o mesmo layout, as mesmas cores e textos, e botões de agendamento que ligam para a clínica.

O cliente e todos os dados são fictícios.

Sobre este serviço

Muitos sites ainda começam como um layout no Photoshop, muitas vezes uma prancheta alta com a página inteira. Exporte em PNG ou JPEG e envie, e nós o montamos em HTML e CSS: as mesmas seções, colunas, cores e botões, com texto real em vez de texto dentro de uma imagem, e uma versão para celular feita a partir do layout desktop quando não houver uma mobile. Não conseguimos abrir arquivos PSD, então camadas, objetos inteligentes e estados ocultos não são lidos. Fotos e ilustrações são desenhadas de novo no mesmo espírito, a menos que você as exporte e envie como arquivos separados. Sem animações, back-end, loja, CMS ou hospedagem.

O que está incluído

• O que você recebeUm arquivo ZIP com as páginas, estilos e imagens, pronto para subir na sua hospedagem, e uma prévia de cada página na página do pedido.
• Próximo ao seu layoutSeções, colunas, cores e tamanhos de texto como na exportação
• Versão para celularFeita a partir do design desktop quando você não tem um mobile
• Texto realTítulos e parágrafos em HTML que os buscadores leem
• Suas fotos no lugarExportadas ou enviadas como arquivos separados, elas entram como estão
• Código limpoHTML e CSS simples, sem frameworks, nada carregado de outros sites

Como funciona

1. 1
   ExportaçãoVocê exporta os layouts como imagens e envia com as suas anotações
2. 2
   MontagemMontamos as páginas e desenhamos as imagens que não foram enviadas
3. 3
   Prévia e arquivoVocê compara as páginas com o seu design no computador e no celular, baixa o arquivo e pede ajustes dentro do seu pacote

O que precisamos de você

Até 5 imagens em PNG, JPEG ou WebP: seus layouts exportados do Photoshop em Arquivo > Exportar > Exportar como, uma página por arquivo, e, se quiser, fotos ou seu logo como arquivos separados para usar como estão. Diga qual arquivo é qual página, as fontes usadas, textos que mudaram em relação ao layout, e para onde leva cada botão. Não arquivos PSD.

Vamos perguntar:

• Qual arquivo é qual página?
• Fontes do layout
• Os textos devem ficar exatamente como no layout?
• Para onde leva cada botão?
• O design é seu?

Compare os pacotes

Perguntas e respostas

Não encontrou a resposta? Pergunte