Nesse material, você conhecerá os padrões nos quais deverá criar e entregar os layouts dos sites para a Próxima Web realizar a montagem. Seguir esses procedimentos ajudará na diminuição do retrabalho e no ganho de produtividade e agilidade na entrega do projeto ao cliente final, garantindo, assim, a sua satisfação.

INFORMAÇÕES GERAIS

1. O que é preciso entregar
   • Arquivos com o layout de todas as páginas a serem montadas
   • Arquivos das imagens utilizadas no layout em alta resolução ou na resolução de aplicação
   • Arquivo de texto explicando as funcionalidades a serem programadas (caso seja necessário)
2. Como deve ser entregue
   • Os layouts devem ser entregues em arquivo no formato PSD (Photoshop)
   • Para cada página deve ser entregue um arquivo PSD com seu respectivo layout
   • Cada layout deverá conter no mínimo a versão para desktop de tela larga e para celular
   • As imagens devem estar, no mínimo, com a resolução de aplicação. Por exemplo, uma imagem de fundo que ocupe toda a largura da tela deve ter no mínimo largura de 1920px (para telas com resolução full HD)
   • O arquivo de texto com o briefing das funcionalidades pode ser entregue em formato TXT, DOC, DOCX ou ODT
   • Todos os arquivos devem ser compactados em formato ZIP
   • Para envio dos arquivos, o parceiro deve utilizar algum repositório de arquivos como o Google Drive ou o WeTransfer.com e enviar o link para o e-mail [email protected]
3. Conteúdo

• • A Próxima Web não realiza cadastro de conteúdo nos sites, com exceção do conteúdo que já constar nos layouts enviados. O cadastro do conteúdo adicional poderá ser realizado através do Painel Administrativo do site pelo parceiro ou pelo cliente final.

CRIAÇÃO DOS LAYOUTS

A seguir, você entenderá as melhores práticas para a criação dos layouts a serem enviados à Próxima Web.

Dimensões do arquivo

A Próxima Web monta os sites de maneira que sejam responsivos à diferentes tamanhos de tela. Isso quer dizer que a estrutura visual do site irá se adequar a diferentes tamanhos de tela. Por exemplo, se você clicar na borda do seu navegador e diminuir gradativamente a largura da janela irá notar que em sites responsivos os textos e elementos visuais se adaptam de acordo com a largura da janela. A Próxima Web trabalha com “pontos de quebra” do layout. Isso quer dizer que existem larguras específicas em que o layout se adapta.

Por exemplo, em uma tela com resolução de largura maior que 1200 px o visual pode ser de uma forma, e em telas com resolução abaixo de 1200 px pode ser de outra forma para se adaptar ao tamanho diferente.

As dimensões consideradas pela Próxima Web para a responsividade são:

• Ponto de quebra / Largura do espaço para conteúdo
  • 576px / 540px
  • 768px / 720px
  • 992px / 960px
  • 1200px / 1140px
  • 1600px / 1540px

Sobre o arquivo modelo:

Para facilitar seu trabalho, disponibilizamos neste link um arquivo PSD de modelo (Modelo_Site_PW.psd) para que possa iniciar seus projetos com todas as demarcações de resolução de telas.

Ao acessar o link do arquivo PSD clique no ícone de download, conforme imagem.

• Este arquivo já contém todos os pontos de quebra demarcados com as linhas-guia (linhas azuis pontilhadas).
• O arquivo tem as dimensões de 1920x4000px
• Pastas para organizar o layout de uma mesma página em diferentes tamanhos.

Sobre as pastas:

• Extra small (0 a 575 px): Nesta pasta deverá constar a versão do layout para celular.
• Small (576 a 767px): Essa pasta serve para o layout para tablets.
• Medium (768 a 991 px): Layout para alguns tablets telas pequenas.
• Large (992 a 1199 px): Layout para telas de muitos dos notebooks, especialmente os de tela pequenas.
• Extra Large (de 1200 a 1599 px): Maioria das telas atuais de computador e notebooks.
• Extra Extra Large: (de 1600 px ou mais): Telas Full HD ou me maior resolução.

As pastas devem ser utilizadas para separar as versões do layout de uma mesma página por tamanhos de tela. Obrigatoriamente, o parceiro deverá enviar no mínimo as versões de layout para celular (Extra small) e para telas grandes (Extra Large).

Colunas (Sistema de Grids)

Adicionalmente, foi criada uma pasta chamada ‘Grids’. Esta pasta pode ser escondida durante o trabalho e ao finalizar o layout. Ela contém uma série de linhas verticais que mostram a divisão de colunas da estrutura do layout. A estrutura do layout é dividida em 12 colunas, que devem ser tomadas como base para a divisão horizontal dos elementos visuais do layout. Veja na imagem abaixo um exemplo de aplicação das grids em um layout.

No layout acima, cada um dos três quadros (box) de conteúdo ocupam 4 grids. No total os três quadros ocupam as 12 grids da estrutura do layout.

Largura Fixa VS Largura 100% (full-width)

Caso o parceiro decida que o layout deve ocupar toda a largura da tela, deve desconsiderar as demarcações das linhas da pasta grids. Neste caso o layout pode ocupar toda a largura da tela, no entanto, deve-se tomar como base para a divisão dos elementos, o número de 12 colunas. No layout full-width, como é chamado o layout que ocupa toda a largura, as colunas se adaptarão proporcionalmente ao tamanho da tela.

Responsividade (o que é e como fazer)

Um Site Responsivo, é quando ele se adapta ao tamanho de tela na qual é visualizado. Um Site Responsivo não é a versão do site para celular, mas sim o mesmo site que é feito para se adaptar à largura e/ou altura do navegador. É diferente de se fazer uma versão para celular e uma diferente para desktop.

No Modelo de PSD você poderá planejar essa adaptação para cada “quebra de tela” separadamente em cada pasta.

Elementos de um site

• Cabeçalho ou Header: Seção ou bloco onde consta a logo e o menu de navegação principal do site.
• Banner: Seção ou bloco normalmente usado na home para exibir o principal serviço ou produto da empresa. Nas páginas internas, este elemento pode ser usado para exibir o título das páginas.
• Slider: Semelhante ao Banner, porém pode exibir diversas artes, já que exibe conteúdos alternadamente com uso de animação.
• Bloco de Posts: Bloco onde são exibidos os últimos (normalmente três) posts cadastrados no blog do site.
• Bloco de Colunas de Conteúdo: Bloco para exibir conteúdos separados por colunas. Pode conter textos e imagens.
• Bloco de depoimentos: Bloco onde pode constar Foto, Nome, Texto do depoimento, Função e Nome da empresa.
• Rodapé ou Footer: Seção ou bloco onde pode constar dados de contato, links para redes sociais, informações legais e assinatura do parceiro.

Imagens

• As imagens utilizadas no site devem ser enviadas separadamente do arquivo PSD.
• Enviar as imagens de fundo com no mínimo 1920 px (ou mais) de largura.
• Sugerimos o envio da logo em PNG com fundo transparente e também em vetor, nos formatos EPS ou AI.

Envio

• Para realizar o envio, o parceiro deve compactar em apenas um arquivo ZIP, todos os arquivos utilizados.
• O envio deve ser feito por meio de um repositório de arquivos como o Google Drive ou WeTransfer.
• O envio dos arquivos deve ser feito enviando o link para download do arquivo ZIP.

Alterações

Ao montar o layout, ajustes podem ser feitos para que se adapte aos padrões de montagem da Próxima Web. A Próxima Web está constantemente implementando novas funcionalidade e possibilidades em seu sistema de forma a possibilitar cada vez mais, diferentes estilos de layout.

Em caso de dúvidas, consulte [email protected]

Imagem de capa: Designed by Freepik