A tecnologia de desenvolvimento de sites é um processo muito multifacetado. Mas ainda assim, todas as suas etapas podem ser divididas em dois componentes principais - o funcional e o exterior. Ou, como é habitual entre webmasters, back-end e front-end, respectivamente. As pessoas que encomendam seus sites de estúdios de desenvolvimento web muitas vezes acreditam ingenuamente que vale a pena focar apenas na funcionalidade, e essa será a decisão certa. Mas isso é verdade em casos muito, muito raros, geralmente para projetos de inicialização na fase de teste beta. Caso contrário, o design gráfico e a interface do usuário são simplesmente necessários para cumprir os padrões de desenvolvimento da Web e ser convenientes.
A primeira pedra angular que o designer de interface, ou designer, enfrenta é a largura do layout do site. Afinal, para isso é necessário desenhar interfaces. De forma puramente intuitiva, surgem duas abordagens - criar layouts separados para cada resolução de tela popular ou criar uma versão do site para todos os monitores. E ambas as opções estarão erradas, mas as primeiras coisas primeiro.
Largura padrão do site em pixelspara Runet
Antes do desenvolvimento do layout adaptativo, o desenvolvimento de um site com largura de mil pixels era um fenômeno de massa. Essa figura foi escolhida por um simples motivo - para que o site caiba em qualquer tela. E isso tem sua própria lógica, mas vamos supor que uma pessoa ainda tenha pelo menos um monitor HD em um desktop. Nesse caso, seu layout parecerá uma pequena faixa no meio da tela, onde tudo fica grudado em uma pilha, e nas laterais há um enorme espaço não utilizado. Agora vamos supor que uma pessoa acesse seu site em um tablet com tela de 800px e a opção "Mostrar site completo" esteja marcada nas configurações. Nesse caso, seu site também será exibido incorretamente, pois simplesmente não caberá na tela.
A partir dessas considerações, podemos concluir que uma largura fixa para o layout definitivamente não é adequada para nós e precisamos procurar outro caminho. Vamos analisar a ideia de um layout separado para cada largura de tela.
Layouts para todas as ocasiões
Se você escolheu como estratégia criar layouts para todos os tamanhos de tela do mercado, então seu site será o mais exclusivo de toda a Internet. Afinal, é simplesmente impossível hoje cobrir toda a gama de dispositivos, tentando ajustar cada opção. Mas se você se concentrar nas resoluções mais populares de monitores e telas de dispositivos, a ideia não é ruim. Sua única desvantagem são os custos financeiros. Afinal, quando um designer de interface, um designer e um codificador são obrigados a fazer o mesmo trabalho 5 ou 6 vezes, o projeto custarádesproporcionalmente maior do que o preço originalmente orçado.
Portanto, apenas sites de uma página podem se gabar de uma abundância de versões para diferentes telas, cujo objetivo é vender um produto e garantir que o faça bem. Bem, se você não tem um desses destinos, mas um site de várias páginas, deve pensar mais.
Tamanhos de sites mais populares
Um compromisso entre os dois extremos é renderizar o layout para três ou quatro tamanhos de tela. Entre eles, um deve ser um layout para dispositivos móveis. O restante deve ser adaptado para telas de desktop pequenas, médias e grandes. Como escolher a largura do site? Abaixo apresentamos as estatísticas do serviço HotLog para maio de 2017, que nos mostra a distribuição da popularidade de várias resoluções de tela do dispositivo, bem como a dinâmica desse indicador.
Na tabela você pode descobrir como determinar o tamanho do site que deseja usar. Além disso, podemos concluir que o formato mais comum hoje é uma tela de 1366 por 768 pixels. Essas telas são instaladas em laptops econômicos, portanto, sua popularidade é natural. O próximo mais popular é o monitor Full HD, que é o padrão ouro para vídeos, jogos e, portanto, para criar layouts de sites. Mais adiante na tabela vemos a resolução dos dispositivos móveis 360 por 640 pixels, bem como várias opções para telas de desktop e mobile depois dela.
Projeto de layout
EntãoDepois de analisar as estatísticas, podemos concluir que a largura ideal do site tem 4 variações:
- Versão para laptop com 1366px de largura.
- Versão Full HD.
- Um layout de 800px de largura para exibição em pequenos monitores de desktop.
- Versão móvel do site - 360 pixels de largura.
Digamos que decidimos qual tamanho usar para a fonte gerada para o site. Mas tal projeto ainda seria caro. Então, vamos ver mais opções, desta vez sem usar uma largura fixa.
Tornar o layout flexível
Existe uma abordagem alternativa, quando vale a pena adaptar apenas ao tamanho mínimo da tela, e os próprios tamanhos dos sites serão definidos por porcentagens. Ao mesmo tempo, elementos de interface como menus, botões e logotipo podem ser definidos em valores absolutos, focando no tamanho mínimo da largura da tela em pixels. Blocos com conteúdo, ao contrário, serão esticados de acordo com a porcentagem especificada da largura da área da tela. Essa abordagem permite que você pare de perceber o tamanho dos sites como uma limitação para o designer e supere essa nuance com habilidade.
O que é a proporção áurea e como ela pode ser aplicada ao layout da página da web?
Mesmo no Renascimento, muitos arquitetos e artistas tentaram dar a suas criações a forma e a proporção perfeitas. Para respostas a perguntas sobre os valores de tal proporção, eles se voltaram para a rainha de todas as ciências - matemática.
Desde a antiguidade foi inventada uma proporção que nosso olho percebe como a mais natural e elegante,porque é onipresente na natureza. O descobridor da fórmula para tal proporção foi um talentoso arquiteto grego antigo chamado Fídias. Ele calculou que, se a parte maior da proporção estiver relacionada à menor, assim como o todo está relacionado à maior, essa proporção parecerá a melhor. Mas este é o caso se você quiser dividir o objeto assimetricamente. Essa proporção foi mais tarde chamada de seção áurea, o que ainda não superestima sua importância para a história mundial da cultura.
Voltar ao web design
É muito simples - usando a proporção áurea, você pode criar páginas que serão tão agradáveis ao olho humano quanto possível. Calculando de acordo com a definição da fórmula da proporção áurea, obtemos o número irracional 1, 6180339887 …, mas por conveniência, podemos usar um valor arredondado de 1, 62. Isso significa que os blocos de nossa página devem ser 62 % e 38% do total, não importa o tamanho da fonte gerada para o site que você está usando. Você pode ver um exemplo neste diagrama:
Use novas tecnologias
As tecnologias modernas de layout de sites possibilitam transmitir com precisão a ideia de um planejador e designer, então agora você pode implementar ideias mais ousadas do que no início das tecnologias da Internet. Você não precisa mais pensar muito sobre qual deve ser o tamanho do site. Com o advento de coisas como layout adaptável em bloco, carregamento dinâmico de conteúdo e fontes, o desenvolvimento de sites se tornou muito mais agradável. Afinal, essas tecnologias sãomenos restrições, embora ainda existam. Mas como você sabe, sem limites não haveria arte. Sugerimos que você use uma abordagem de design verdadeiramente criativa - a proporção áurea. Com ele, você pode preencher o espaço de trabalho com eficiência e beleza, independentemente dos tamanhos de site definidos em seus modelos.
Como aumentar o espaço de trabalho do site
Há uma boa chance de você não ter espaço suficiente para encaixar todos os elementos da interface do usuário em um layout pequeno. Nesse caso, você terá que começar a pensar de forma criativa ou ainda mais criativa do que antes.
Libere espaço máximo no site ocultando a navegação no menu pop-up. É lógico usar essa abordagem não apenas em dispositivos móveis, mas também em desktops. Afinal, o usuário não precisa ficar o tempo todo olhando quais são os títulos do seu site – ele veio pelo conteúdo. E os desejos do usuário devem ser respeitados.
Um exemplo de uma boa maneira de ocultar o menu é o seguinte layout (foto abaixo).
No canto superior da área vermelha, você pode ver uma cruz, clicando nela irá esconder o menu em um pequeno ícone, deixando o usuário sozinho com o conteúdo do site.
No entanto, isso é opcional, você pode deixar a navegação, que estará sempre à vista. Mas você pode torná-lo um belo elemento de design, e não apenas uma lista de links populares no site. Use ícones intuitivos além ou até mesmo em vez de links de texto. é o mesmopermitirá que seu site faça um uso mais eficiente do espaço da tela no dispositivo do usuário.
O melhor site é responsivo
Se você não sabe qual layout escolher para o site, então tudo é simples para você. Para economizar nos custos de desenvolvimento e ao mesmo tempo não perder seu público devido ao layout ruim de algum dispositivo, use o design responsivo.
Design responsivo é um design que fica igualmente bom em diferentes dispositivos. Essa abordagem permitirá que seu site seja compreensível e conveniente mesmo em um laptop, até mesmo em um tablet, até mesmo em um smartphone. Esse efeito é obtido alterando automaticamente a largura da área de trabalho da tela. Ao usar folhas de estilo responsivas para seu site, você está tomando a melhor decisão possível.
Qual é a diferença entre o design responsivo e as versões do site
O design responsivo difere da versão mobile do site, pois neste último caso, o usuário recebe um código html diferente do desktop. Esta é uma desvantagem em termos de otimização de desempenho do servidor, bem como otimização de mecanismos de pesquisa. Além disso, fica mais difícil calcular estatísticas para diferentes versões do site. A abordagem adaptativa não tem essas desvantagens.
A capacidade de resposta para vários dispositivos é obtida por meio de um layout com uma porcentagem da largura especificada ou pela transferência de blocos para o espaço disponível (no plano vertical em um smartphone em vez dehorizontal na área de trabalho) ou criando layouts individuais para diferentes telas.
Saiba mais sobre design e desenvolvimento responsivo em nossos tutoriais.
