10 regras de web design que você pode quebrar
Como o design e o design da web em geral evoluíram, regras foram estabelecidas para garantir designs consistentes e utilizáveis.
Algumas dessas regras foram criadas simplesmente porque os criadores de websites abusaram de certos princípios sem levar em consideração seus usuários.
Mas essas regras não são aplicadas por ninguém e devem ser quebradas quando necessário, especialmente quando quebrá-las levaria a um design impressionante.
Neste artigo, apresentamos 10 regras que você pode quebrar se atender às suas necessidades de design.
Regra nº 1: não exibir a barra de rolagem horizontal
Um número significativo de ratos não tem uma roda horizontal do mouse. Isso dificulta o deslocamento para a esquerda ou para a direita quando o conteúdo de uma página da Web ultrapassa as laterais do navegador.
Pode ser chato ter que colocar o cursor do mouse na parte inferior da janela e arrastar a barra de rolagem apenas para ver uma palavra ou duas que esteja além da área visível da página. Dito isso, aqui estão alguns sites bem projetados que colocam a barra de rolagem para funcionar de maneira eficaz.
Benek
Benek usa JavaScript para alterar a direção de rolagem da roda do mouse de vertical para horizontal. Cada item no portfólio da Benek é separado em sua própria coluna. O site tem uma sensação surpreendentemente fresca e flui suavemente.
Sapato guru
Sapato guru foge com a rolagem horizontal porque tira vantagem da maneira como as pessoas olham para os sapatos. As pessoas olham para a maioria dos produtos de cima para baixo, mas os sapatos são diferentes. Os olhos das pessoas geralmente se movem pelo comprimento do sapato. Usando este hábito a seu favor, o Shoe Guru faz o design do seu site fluir na mesma direção, fazendo com que o movimento pareça natural.
Stephane Tartelin
Stephane Tartelin usa a barra de rolagem horizontal para fazer com que sua obra de arte pareça estar em uma galeria de arte. Embora a roda vertical do mouse não funcione como nos exemplos acima, o efeito funciona surpreendentemente bem. Você poderia até argumentar que o efeito seria diminuído se a roda do mouse fosse recodificada para rolar horizontalmente.
Terapia Gráfica
Enquanto Terapia Gráfica não exibe uma barra de rolagem horizontal em sua página, ele ainda permite a rolagem horizontal clicando e arrastando pela tela. A Teoria Gráfica utilizou a navegação horizontal porque todas as suas imagens têm a mesma altura, mas não a mesma largura. A navegação horizontal ajuda o site a fluir suavemente.
O caminho horizontal
O caminho horizontal é uma vitrine de sites que usam a rolagem horizontal. Os gráficos grungy são lindos, e este site é único no que diz respeito às galerias CSS.
Regra nº 2: Use um número mínimo de faces de fonte
Muitas fontes geralmente entram em conflito umas com as outras e sobrecarregam o visualizador. Cada fonte tem personalidade e muitas personalidades podem criar desordem.
Para usar efetivamente mais do que apenas algumas fontes, um design precisa ser muito orientado por texto, e o restante do design precisa ser relativamente silencioso. Aqui estão alguns exemplos de sites que usam esse senso de conflito e desordem para engajar o usuário.
Links LA
Links LA usa muitas fontes em um layout não linear para criar uma sensação de energia. A página é difícil de ler rapidamente, mas atrai o usuário. Também é importante notar que nenhuma das fontes é excessivamente decorativa; cada palavra é legível, mantendo o design nítido e limpo.
Estúdio de Design Geo Elements
Usar uma variedade de fontes geralmente transmite uma sensação de energia e caos, mas Estúdio de Design Geo Elements O site é muito aberto e limpo. Cada fonte recebe seu próprio espaço para que o espectador não a associe a outra fonte. A imagem do céu ao fundo ajuda a reforçar a sensação de abertura.
Richard Stelmach
Ao contrário do último exemplo, Richard Stelmach empurra suas diferentes fontes juntas. O design funciona porque apenas uma fonte não parece desenhada à mão e as outras duas funcionam bem com a ilustração. As fontes desenhadas à mão geralmente funcionam bem juntas, mesmo quando há muitas faces de fonte diferentes.
Satsu
Satsu parece ter um monte de fontes diferentes, mas na verdade só tem três (não incluindo o item do portfólio do Conselho de Esportes). Espaçando tudo com cuidado, o Satsu associa certas linhas de texto umas com as outras, embora o texto possa estar em fontes diferentes.
O título do logotipo está em uma única fonte e os dois subtítulos têm sua própria fonte, mas o visualizador agrupa naturalmente esses três itens de texto. Satsu é capaz de criar energia sem sobrecarregar a página com personalidades.
Regra nº 3: não use cores demais
O medo de ir longe demais com um design é o que separa os profissionais dos novatos e novatos do inconsciente. Os alheios tentam tornar seus projetos o mais extremos possível, com palavras em chamas, texto piscando e tantas cores quanto possível.
Os novatos querem manter seus designs sutis e fáceis nos olhos, mas no final, seus projetos podem parecer sem vida. Os seguintes designs atraentes para os olhos são alguns verdadeiros profissionais que estão empurrando limites.
Matt Mullenweg
Matt Mullenweg design belamente colorido parece uma pintura em aquarela (site foi atualizado desde que este artigo foi escrito). Todas as cores no fundo chamariam a atenção de ninguém.
Geralmente, bons desenhos com uma tonelada de cores terão essas cores em segundo plano, com uma paleta simples na frente. Ler o texto é muito difícil quando muitas coisas estão acontecendo.
Travic Isaacs
Travis Isaacs's o design tem um gradiente vertical colorido no fundo que faz o design parecer colorido por toda parte. Este site tem cor-de-rosa brilhante como sua cor de link, que é uma ótima opção para designers que querem criar um efeito colorido.
James De Angelis
James De Angelis website mostra que o texto pode ser colorido sem passar por um novato. O design é muito vantajoso, e o slogan certamente é o centro do palco.
Regra nº 4: Torne óbvia a meta do seu site
Algo que realmente fica abarrotado nos ouvidos de jovens designers é que um design deve informar instantaneamente aos espectadores o que eles estão olhando antes de ler qualquer texto.
O reconhecimento da marca é importante para grandes corporações, mas às vezes os caras menores precisam ser um pouco mais inteligentes para chamar a atenção do espectador. Retendo informações pode intrigar o espectador e "provocar" as pessoas a quererem aprender mais.
Aplicar essa técnica ao design da Web pode aumentar bastante o tempo que os usuários permanecem em seu site.
Cetrotrizes
Na maioria dos portfólios de hoje, o freelancer ou empresa geralmente se apresenta e explica seu trabalho. Cerotrilhos em vez disso, coloca alguns links vagamente rotulados à esquerda e amostras de seu trabalho à direita, mas nada explica a ideia ou a pessoa por trás dele.
O ar de mistério que envolve o site estimula o usuário a ficar.
A última mixtape
A última mixtape é outro portfólio que mostra seu trabalho e nada mais. Tais designs exalam um sentimento de extrema confiança. Eles nunca tentam se vender; eles apenas esperam que o usuário seja surpreendido e venha implorar por um contrato.
Peter Pearson
Usar uma tela inicial é uma boa maneira de desacelerar o processo de raciocínio do usuário e inspirá-lo a ir mais fundo. O objetivo da página inicial é geralmente explicar o site rapidamente com fotos ou um pequeno texto.
Mas em Peter Pearson caso, seu objetivo é evocar um sentimento. O céu grande e o efeito de texto salpicado fazem um ótimo trabalho evocando a curiosidade, porque essas coisas geralmente não aparecem juntas. Este site também faz um ótimo trabalho em continuar a emoção criada pela página inicial no conteúdo real.
O movimento de deslocamento lateral e linhas animadas que seguem o usuário são realmente eficazes.
Piepmatzel
Uma ótima maneira de contornar a barreira do idioma é não usar nenhuma palavra. Piepmatzel é uma galeria de CSS, e as pessoas que já viram uma galeria de CSS provavelmente a reconhecerão imediatamente.
Aqueles que não o fizeram podem ficar intrigados o suficiente para dar um clique a algumas das miniaturas, na esperança de descobrir o padrão. A pequena quantidade de texto na parte inferior da página ajuda na classificação e é supérflua.
Regra nº 5: a navegação deve ser fácil de descobrir
A navegação não deve ser o gargalo de um site. Os usuários devem conseguir encontrar rapidamente o que desejam. Às vezes, porém, a navegação não intuitiva, mas envolvente, pode ajudar o usuário a se sentir conectado ao site e ao que está promovendo.
Alvin Tang
Como mencionado na seção anterior, um ar de confiança é transmitido quando um portfólio não se soletra. Este é o caso em Alvin Tang carteira de fotografia. Quando chega ao site pela primeira vez, o usuário não reconhece imediatamente as palavras que vêem como links.
Esta incerteza deve levá-los a picar um pouco. Mover o mouse sobre uma palavra revela que, de fato, é um link e, ao clicar nela, uma linda foto é carregada. A foto incentivará os usuários a continuar navegando.
Para ver mais fotos, os usuários precisam clicar no botão “Voltar” no navegador (algo que a maioria das pessoas entende) e clicar em outro link. Não há mão no design, e funciona muito bem. Este não é um design convencionalmente “lindo”, mas oferece exatamente o que ele precisa.
Kasulo
Kasulo 's navegação não é muito difícil de descobrir, mas o usuário comum pode não saber exatamente o que fazer ao chegar no site. Depois do primeiro clique, tudo fica óbvio.
O usuário navega pelas peças do portfólio em estilo 3D e os itens mais recentes aparecem mais próximos do início. Usando a roda do mouse é ainda mais divertido.
Marcio Kogan
Marcio Kogan’s site é outro exemplo de ótima navegação que não é imediatamente óbvio. A instrução “Drag me” é difícil de resistir, e uma vez que o usuário faz isso, eles estão a caminho de cruzar os itens do portfólio. As pré-visualizações do mouse são um pequeno detalhe, mas realmente impressionantes.
Ceranco
Se um cliente pedisse a um designer para criar seu site em 3-D, como um videogame de tiro em primeira pessoa, a maioria dos designers riria silenciosamente de si mesmo, respiraria fundo e explicaria lentamente por que seria uma má ideia .
Enquanto o site para Ceranco não é exatamente um shooter 3D, pode ser facilmente confundido com algum tipo de jogo de computador indie. Sites como esse são ótimos para envolver os usuários. Embora o longo tempo de carregamento e a má otimização do mecanismo de busca tornem isso menos que ideal para a maioria dos projetos, definitivamente vale a pena pensar duas vezes.
Regra nº 6: use cores diferentes para o texto e o plano de fundo
Esta regra talvez não esteja escrita em todo o lugar, mas muitos novatos têm tanto medo de tornar o texto ilegível que eles não consideram usar a mesma cor de base tanto para o plano de fundo quanto para a própria fonte. Você pode seguir algumas técnicas simples para fazer as cores semelhantes funcionarem.
Linksys
o Linksys O site é legal por causa de como ele tem um azul para todos os seus links, mesmo que a cor de fundo seja de vários tons de azul. Embora seja um risco e talvez não a melhor decisão de cores, funciona.
Brad Colbow
Brad Colbow O design é semelhante ao da Linksys, devido ao texto azul sobre fundo azul. O azul sobre azul é difícil de ser feito, especialmente com tantos azuis diferentes em todo o site.
Conjunto de força
Até agora, nesta seção, vimos apenas sites em azul, porque o texto em azul é mais difícil para o olho humano, e o tipo azul legível é sempre impressionante. Se um efeito de texto funcionar em azul, ele provavelmente funcionará em qualquer cor.
Conjunto de força usa um estilo de tipografia para sua fonte para criar um efeito 3D que efetivamente separa o texto do plano de fundo.
Artista em Design
Artista em Design não só tem texto verde em um fundo verde e texto amarelo / bege em um fundo amarelo, mas tem texto diretamente em cima de uma foto.
Enquanto algumas letras individuais podem ser difíceis de ler, as palavras como um todo permanecem legíveis. Este tipo de efeito deve quase sempre ser o centro do palco em um projeto.
Horacio Bella
Horacio Bella usa outro efeito 3D em seu portfólio. Neste caso, as letras parecem sair em vez de serem amassadas para dentro. Sem esse efeito, a legibilidade teria sido bastante reduzida. Outro bom efeito usado aqui é o kerning apertado de letras, o que melhora ainda mais a legibilidade.
Regra 7: Não coloque a animação no caminho do seu conteúdo
Sério, não exiba pequenos anúncios em Flash exatamente onde o usuário está lendo. O mesmo vale para as caixas de pesquisa que aparecem sempre que o usuário está no meio de uma frase. Os usuários não gostam de se distrair quando estão na metade de uma frase. A menos que…
É realmente difícil não ficar encantado com a pequena aranha ABA site. O design é limpo e, embora a aranha seja uma distração, tudo bem. Até agora, este site eu acho que é a única exceção à regra.
Regra nº 8: escolha as fontes seguras para a Web
Embora as técnicas de substituição da face da fonte ainda sejam jovens, elas já estão causando um grande impacto. sIFR foi o primeiro e, recentemente, Cufón e Typefasce.js tem emergido.
Diseñorama
No Diseñorama website, o texto vermelho “Recientemente” é selecionável. Uma desvantagem é que, se o site não carregar instantaneamente, o usuário verá a fonte simples original brevemente.
Outra desvantagem é que, se o usuário tiver JavaScript ou Flash desativado, ele só verá a fonte original. Tudo considerado, ainda é muito legal. Espero que seja uma prévia do que está por vir nos próximos anos.
Cactuslab
Cactuslab também usa sIFR para os sub-cabeçalhos azuis (como “Winter Work”). Embora sIFR seja a mais complicada das técnicas de substituição de fonte, o texto pode ser copiado e colado, dando-lhe uma grande vantagem sobre as outras duas técnicas.
Regra nº 9: Não tenha uma página inicial
Muitos designers tiveram a mesma discussão antiga com seus clientes sobre por que uma página inicial não é uma boa ideia. O Google tende a classificar essas páginas como inferiores e elas diminuem a velocidade de o usuário obter o conteúdo que elas buscam. Mas eles podem ser incrivelmente bonitos e inspiradores se forem bem feitos.
Pós-produção de brilho
O objetivo do exemplo de portfólio que aparece na página inicial de Pós-produção de brilho O site é para provocar uma reação emocional do usuário.
Em cada visita, uma foto aleatória do portfólio é carregada. Clicar na foto reduz a escala e coloca-a em seu lugar entre as outras peças do portfólio no site. O efeito de escala e movimento fornece continuação e ajuda a transportar a emoção do usuário para o restante do trabalho da empresa.
Issa London
Quando um site é completamente concluído no Flash, a barra de carregamento pode servir como uma página inicial. Quando um usuário vê uma barra de carregamento, ele fecha a página e vai para outro lugar ou alterna para outra guia e navega em outro lugar enquanto espera.
Depois que a página for carregada, é melhor esperar que o usuário retorne antes de iniciar. Dentro Issa London Caso, o portão é uma metáfora perfeita para dizer que o site está pronto e o usuário pode entrar.
Quando o usuário clica no portão, o portão se abre e vários modelos ilustrados aparecem. Usar o gate na página inicial é uma ótima ideia de design, pois ao entrar, o usuário se sente envolvido.
Regra nº 10: não use tabelas
Qualquer web designer que usa tabelas em seus projetos será instantaneamente chamado de novato por designers experientes. As tabelas não são as mesmas em todos os navegadores e podem fazer com que o código-fonte pareça confuso, mas, no mínimo, você saberá o que está obtendo com elas. Aqui estão alguns exemplos de projetos que incorporam tabelas.
Esta mesa é um pouco difícil de ver, mas está escondida entre as duas cadeiras. É uma boa mesa lateral, mas infelizmente não contribui muito para o design deste site.
As tabelas estão no fundo deste design Trabalhe no Play , mas eles mantêm os laptops dos trabalhadores e outros itens de fácil acesso. Sem essas mesas, a sala se sentiria muito mais vazia e a foto de fundo não teria o mesmo efeito.
Embora esse design tenha principalmente cadeiras, uma pequena mesa bonita aparece no canto superior direito da miniatura. Parece que um pote está sobre ele.
No que diz respeito a designs com tabelas, este é um dos melhores. Com duas tabelas apresentadas nesta animação em Flash, o design lhes dá muita atenção. Este site deve estar na lista de todos os designers que usam tabelas.
Quebrar as regras!
Quebrar as regras é bom quando um design pede. Muitas das opções de design analisadas aqui não seriam consideradas pelo designer médio. É isso que separa os grandes designers dos médios.
Aqueles corajosos o suficiente para ir contra o que eles foram ensinados sempre se destacam.
Escrito exclusivamente para WDD bt Eli Penner. Ele administra seu próprio site em SleepyHero.com
Você quebra alguma regra em seus projetos web? Por que ou por que não? Por favor, compartilhe suas opiniões com a gente ...