Criar site a partir de um site que você gosta
Se você viu um site cujo layout ou estilo lhe agrada, aponte o Briks para ele. O Briks estuda como a página é montada e cria a sua nesse espírito, com as suas próprias palavras e imagens. Esta página explica como adicionar um site e capturas de tela, o que o Briks lê e nunca leva, e o que fazer quando um site não pode ser lido.
Adicionar sites e capturas de tela
Abrir a etapa
Onde: Show what you like
É o terceiro passo de New project, marcado como Optional. O painel diz para que serve: "Show a site or screenshots you admire. These become rules for the build; the rest is designed for your business."
Adicionar um site
Onde: A site to learn from
Digite ou cole um endereço e pressione Add ou Enter. Você pode omitir o https. Cada projeto aceita um site; ao tentar um segundo, aparece 'One site per project. Remove it to add another.' O site aparece como uma etiqueta com um X para removê-lo.
Adicionar capturas de tela
Onde: Screenshots
Pressione Add screenshots e escolha arquivos JPEG, PNG ou WebP de até 12 MB cada. O contador mostra quantos você tem, até 6 of 6.
Diga o que cada captura de tela mostra
Onde: Screenshots
Escolha Whole page e, se souber, a tela em que a imagem foi capturada: Desktop, Tablet ou Phone (Screen size: detect descobre sozinho). Ou escolha One section e indique a parte que ela mostra, como hero, preços, depoimentos ou rodapé.
Siga em frente
Onde: Show what you like
Clique em Next. A revisão mostra o endereço do site e conta as suas capturas de tela.
Você também pode trazer um site pela caixa em briks.dev antes de se cadastrar: abra o menu +, escolha Add a site you like, e ele aparece nesta etapa após o cadastro.
O que o Briks lê
Um site é lido em larguras de computador, tablet e celular, depois que a Briks responde a qualquer aviso de cookies e fecha pop-ups. Ela observa:
- Layout: as seções de cima para baixo, a largura do conteúdo, as colunas e o que muda no celular.
- Espaçamento: o ritmo entre as seções e dentro delas.
- Type: os tamanhos e pesos de títulos e textos, e o caráter das fontes.
- Cor: o fundo, a cor do texto e o destaque.
- Movimento: o que aparece suavemente ou desliza ao rolar a página, o que fica fixo, as faixas que se movem sozinhas e o que links e botões fazem quando você passa o mouse.
- O cabeçalho e o menu: uma linha simples de links, menus suspensos ou painéis grandes. Cada painel é aberto e examinado.
- Ilustrações: se a página usa desenhos em vez de fotografias, suas imagens são desenhadas em um traço parecido.
Uma captura de tela diz menos ao Briks: o layout e o alinhamento, o espaçamento, o tamanho do título, as cores e se é claro ou escuro. Uma captura marcada como One section vale só para aquela seção.
O que ele nunca cobra
O painel diz com clareza: "Um site por projeto. Medimos a estrutura, o ritmo e a tipografia. Nada é copiado." Na prática:
- Textos. Antes de publicar, o Briks verifica se o seu site tem frases tiradas do site de que você gosta e reescreve qualquer uma delas na voz do seu próprio negócio. Frases do seu próprio briefing são mantidas.
- Logotipos e nomes. Seu cabeçalho traz o seu nome, o logotipo que você enviou ou uma marca desenhada.
- Imagens. As suas vêm da biblioteca do estúdio, são desenhadas novas para você, ou são as que você adiciona.
- Outras empresas. Uma fileira de logos de clientes ou parceiros mostra apenas os nomes que você informar.
As perguntas antes da construção são escritas só a partir do seu briefing e do endereço, nunca a partir do texto do outro site.
Um site, capturas de tela, ou os dois
Quanto Briks segue um site de perto depende do que mais você fornece.
| O que você adiciona | O que o Briks faz |
|---|---|
| Um site e mais nada | Essa página define a ordem das seções da sua página inicial, feita sob medida para o seu negócio |
| Um site mais capturas de tela | Eles guiam a criação juntos, então o site deixa de definir a ordem; uma captura de tela de uma seção decide essa seção |
| Só capturas de tela | Eles orientam o layout e o visual; a captura de tela de uma seção decide essa seção |
| Configurações em Your brand | Elas valem mais que qualquer referência, então seu sotaque continua sendo seu, mesmo que o site de que você gosta seja verde |
Medindo o que foi construído em relação ao site
Depois que um site é adicionado, a etapa também mostra Measure the build against the reference, desativada por padrão. Quando ativada, o Briks compara a página criada com o site de que você gosta antes de publicar e corrige as diferenças que medir. Isso só vale quando o site é a sua única referência, sem capturas de tela, pois é nesse caso que a sua página segue o layout dele. Isso aumenta os créditos e o tempo da criação, então deixe desativada, a menos que uma correspondência próxima seja importante para você. Depois, dá para mudar em Preferences como Measure builds against the reference.
Como um site muda o resto da configuração
- Sem visual nem hero para escolher. A etapa How it is built diz "Your reference site decides the look and the hero, so there is none to choose." No briks.dev, Pick a look first fica desativado com "The site you like sets the look." Veja Escolha um visual.
- Menos perguntas. O Briks não pergunta sobre o layout, o visual ou o que abre a página, porque o site já responde a isso.
- Os dashboards também aceitam uma referência. A Briks lê a tela para identificar a navegação (uma barra lateral ou uma barra superior) e quantos painéis, tabelas e gráficos ela tem. A maioria dos dashboards fica atrás de um login, então uma captura de tela costuma ser a forma de mostrar um.
Enquanto a criação acontece, a conversa ganha uma caixa chamada What your references decided, listando o que cada referência definiu: a largura do conteúdo, o ritmo, o menu do cabeçalho, como as coisas se movem.
Quando um site não pode ser lido
A maioria das páginas públicas é lida sem problemas. Estes são os motivos mais comuns para uma não ser:
- Está atrás de um login. O Briks vê o que vê um visitante que não entrou. Use capturas de tela para qualquer coisa atrás de um login.
- Ele recusa visitantes automatizados. Alguns sites respondem com uma verificação de robô em vez da página. A Briks tenta uma segunda forma de entrar e, se ela também for bloqueada, o site é ignorado.
- Banners de cookies e pop-ups raramente são o problema, pois o Briks responde ao banner e fecha os pop-ups antes de olhar.
Se o site não puder ser lido, mas as suas capturas de tela puderem, a criação segue sem ele e a caixa diz "1 reference could not be read and was skipped." Se nada do que você adicionou puder ser lido, a criação para em vez de projetar um site que você não pediu. Uma criação que para assim não é cobrada, e a reserva volta. O que o estúdio diz depende do motivo:
| O que o estúdio diz | O que fazer |
|---|---|
| "O endereço de referência não pôde ser aberto." e "Nada foi cobrado." | Clique em Build without it para criar o mesmo pedido com suas palavras e respostas como estavam, reservando de novo os créditos de um projeto novo. Ou clique em Remove it, que abre Reference site em Preferences, onde Remove tira o endereço. |
| “O site de referência recusou o navegador do estúdio, então não foi possível lê-lo. Tente outra referência.” | Comece um novo projeto com capturas de tela da página em Screenshots, ou com um site diferente. |
| "Não foi possível ler a sua referência por causa de um erro do sistema. Tente novamente mais tarde." | Pressione Try again mais tarde. Suas palavras e respostas são mantidas, então as perguntas não são feitas duas vezes. Ou digite na caixa para reiniciar com suas novas palavras acrescentadas. |
O grupo Reference site em Preferences mostra o endereço até o site ser publicado pela primeira vez, para você conferir se ele foi salvo como pretendia.
Exemplos práticos
Briefing: um consultório odontológico familiar em Harrogate com quatro dentistas, sábados de manhã e um formulário de solicitação. Site adicionado: a página inicial de um pequeno hotel que o dono achou tranquilo e espaçoso. Nada mais.
A página inicial da clínica segue a ordem e o espaçamento generoso da página do hotel, com as palavras, os tratamentos e as imagens da própria clínica. O nome, as fotos e o texto do hotel não aparecem em lugar nenhum.
Site: uma torrefação cujo menu se abre em painéis grandes. Captura de tela: a grade de produtos de uma loja, marcada como One section, com produtos escolhidos. Your brand: cor de destaque
#B4542D.
Com uma captura de tela adicionada, a página da torrefação deixa de definir a ordem das seções. O menu em painel é mantido, a seção de produtos segue a captura de tela, e o destaque de cor do próprio torrefador vence as cores da referência.
Perguntas frequentes
Posso adicionar uma referência depois que o site estiver pronto?
Sim, como imagem. Na caixa do estúdio, anexe uma captura de tela, deixe marcada como Reference e diga o que aproveitar dela: Deixe a seção de preços com este visual, três colunas com a do meio em destaque.
Posso criar um site que precisa de senha?
Não de forma útil. O Briks só vê a página pública. Tire capturas de tela e adicione-as em Screenshots.
Por que não consigo mais escolher um visual?
Um site de que você gosta define o visual. Remova-o em Show what you like se preferir escolher entre três painéis.