Abaixo, darei uma breve visão geral dos pontos obrigatórios aos quais você precisa prestar atenção ao criar um layout da Web para sua posterior transferência para o layout.
Eles ajudarão você a:
- pense mais fundo no seu layout
- evite perguntas desnecessárias
- obtenha um resultado melhor
- fique amigo do desenvolvedor frontend
Geral
- Os layouts de nomenclatura (páginas, quadros - obrigatórios) devem transmitir claramente a essência e o objetivo e estar vinculados às páginas lógicas do site ou de outras grandes entidades.
(Exemplo: "casa - tablet", "principal - celular", "botões")
[exemplo de tela] - É necessário observar a estrutura do documento ao trabalhar com camadas, grupos, componentes e telas, dar nomes abrangentes
(Exemplo: fundo principal, configurações, botão, página de registro móvel)
(Exemplo ruim: quadro 1, grupo 45, iphone XR)
[exemplo de tela] - Se você precisar de uma versão móvel , deve ser desenvolvido um layout de 320px de largura (iPhone SE) para cada tela, além do qual é possível criar layouts de alta resolução.
[exemplo de tela] - Os ícones (svg, ...) devem estar disponíveis para download e abrir corretamente no navegador. O tamanho da prancheta svg deve corresponder ao conteúdo e ao fluxo. Você pode coletar conjuntos de ícones em quadros de arte individuais.
[exemplo de tela] As imagens (conteúdo gráfico) devem ser carregadas. Tenha uma resolução de pelo menos 2x. Descarregado sem pré-processamento. (Como: bordas arredondadas, transparência, sombra). Exceto quando esse processamento tiver sido solicitado explicitamente.
[exemplo de tela]
- É necessário levar em consideração o tamanho da área de conteúdo e o fato de que esse tamanho varia de resolução para resolução. Assim, o "ponto de fixação" deve ser pensado.
- As imagens de conteúdo devem ser carregadas como uma única imagem.
(Por exemplo: Temos um bloco retangular com [background] que será alterado. Portanto, a imagem deve ser descarregada completamente com o background, como no exemplo acima.)
- As cores da fonte não devem conter um canal alfa (transparência), a menos que a fonte seja usada em fundos diferentes (gradientes ou imagens) e, portanto, deve ter essa lógica.
- Uma lista completa (zip.archive) das fontes usadas no projeto deve ser fornecida em primeiro lugar (antes de iniciar o trabalho na frente).
- Também não custa escolher uma fonte segura (disponível em todos os Windows, Mac, Linux etc.), semelhante à fonte personalizada usada, para que possa ser substituída no caso de um erro de carregamento de fonte personalizado
(Exemplo: 'Roboto', sans-serif) - Se estivermos lidando com uma fonte de ícone personalizada , os ícones devem ser tratados de acordo, a saber: você precisa alinhá-los nas linhas de base para que vários ícones na linha não sejam de tamanhos diferentes e com recuos diferentes. Além disso, o número de faces, a espessura base das faces e o nível de detalhe devem ser preservados de ícone para ícone; caso contrário, eles parecerão heterogêneos, como se fossem de conjuntos de fontes diferentes.
- Na ausência de requisitos especiais para a lógica do comportamento , os blocos no fluxo devem manter a sequência de sua localização quando adaptáveis às resoluções refletidas nos requisitos.
- A lógica deve ser refletida no design . Por exemplo, vários cartões idênticos, em cada um deles para exibir uma quantidade diferente de conteúdo, imagens diferentes, estados diferentes etc., para que seja possível rastrear a dependência.
- Além do layout, uma descrição em texto da operação dos elementos é bem - vinda
- Especifique o comportamento dos elementos ao transbordar com texto
(Por exemplo, recorte texto longo com reticências em um bloco etc.) - Deixe comentários e descrição (de qualquer forma) sobre elementos animados e elementos cujo comportamento não possa ser determinado exclusivamente apenas pelo layout.
- As páginas 404 , 500 e outras telas padrão devem estar presentes.
Todos os parágrafos a seguir no guia e grades podem ser desenhados na página de estilos, onde tudo isso será estruturado.
Guia, GUI, kit de interface do usuário, Guia de estilo
- Descrição e layouts dos blocos conectados por funcionalidade comum são fornecidos em uma seção do documento.
(Por exemplo, todos os pop-ups têm fundo branco e cantos arredondados 10px, botões ...) - A tipografia deve ser descrita e desenhada adicionalmente em uma prancheta separada.
(Exemplo: todos os títulos do primeiro nível são recuados 24px abaixo de 40px. Todos os títulos do segundo nível ..., parágrafos ..., etc.) - Todos os links, botões, caixas de seleção e outros elementos interativos devem ser desenhados em um estado ativo passivo, induzido. Da mesma forma, deve haver estados para o telefone celular (dispositivos sensíveis ao toque) - passivos, pressionando o momento. Estados: (link, foco, ativo, foco, visitado, desativado, processo).
[Exemplo de caixa de seleção]
[Exemplo de botões] - A farinha de rosca deve ser desenhada em todos os estados (ativo, anterior, bloqueado, ...) e levando em consideração quebras de linha.
- A paginação deve ser renderizada em todos os estados (na primeira, última e intermediária etapa) e com um número diferente de etapas (1, muitas), levando em consideração um grande número de dígitos (com mais de 3 caracteres).
- Entradas (campos de entrada), formulários devem ser desenhados em todos os estados: por padrão, com foco, quando pressionados, bloqueados, mensagem de erro, mensagem de correção, etc.
[Exemplo de entrada] Limite o número de cores e tons usados
[Exemplo de nível de cor] .
- Todas as cores usadas devem ser feitas como guia.
(Qualquer nova cor no layout será considerada um erro e será equiparada ao mais próximo do guia) - Cores únicas em termos de funcionalidade devem ser descritas ou ligadas à essência.
(Por exemplo, um widget de material de halloween com um único fundo laranja: laranja é a cor dos materiais de halloween)
Malha
- Os tamanhos de recuo e elemento devem ser múltiplos do mesmo valor.
(2px, 4px, 8px, 5px ...)
[exemplo de tela]
[pós-exemplo] - A grade (se houver) deve ser descrita e não contraditória
layouts. Tamanhos de colunas, quantidade, etc. - As dimensões do recipiente devem ser descritas em cada um dos
permissões. - Os valores dos pontos de interrupção devem ser descritos.
- O preenchimento vertical de blocos no fluxo deve ser padronizado. (semelhante à tipografia)
Cartas, correio, listas de correio, correio
- É necessário tornar o design da carta o mais simples possível . É importante entender como o layout e a tag <table> funcionam . As cartas são colocadas nas mesas. (visor: bloco, flexão, posição absoluta - não pode ser aplicado na letra). O adaptativo é o mais simples possível, sem que os blocos alterem sua posição no fluxo. "Borracha" comum desejável e 1 conjunto de estilos
- Não use fontes personalizadas na letra
Claro, se você desenhar um "drible", etc. você pode fazer o que quiser, mas para um projeto sério, esses itens são 100% necessários.