Tenha cuidado com essas Design Trends 6 Web de 2016

    Tendências em web design, como as tendências da moda, vêm e vão. Às vezes, as tendências são ditadas pela necessidade (como design responsivo). Outras tendências são mudanças da indústria, tais como a mudança de skeuomorphism ao design plano.

    A decisão de seguir uma tendência deve depender das necessidades de seus usuários e seu negócio. A decisão nunca deve ser baseada unicamente em “é o que os sites legais estão fazendo”. Modismos desaparecer. Um site construído apenas em tendências torna-se rapidamente fora de data.

    Com isso em mente, vamos olhar para as tendências de design que você pode querer pensar duas vezes antes de usar.

    Esconder tudo sob um menu Hamburger

    Como os dispositivos móveis se tornaram comuns, os designers começaram simplificando a navegação e escondendo-o sob um menu de hambúrguer. É uma tendência que também está penetrou na versão desktop do websites.

    Por exemplo, o Squarespace site utiliza uma gaveta de navegação em toda a sua site, independentemente do dispositivo.

    awwwards-UX-tendências
    Fonte da foto: Squarespace

    Como você pode ver na imagem acima e abaixo, a navegação global está escondido no menu do Hamburger onipresente.

    awwwards-UX-tendências
    Fonte da foto: Squarespace

    É compreensível por que isso é atraente. Colocar navegação sob um menu hamburger faz um local mais limpo, mais elegante. E a maioria das pessoas são bastante familiarizado com o padrão. Mas isso não é algo que funciona para cada site e pode reduzir descoberta.

    As consequências podem ser prejudiciais para sites de comércio eletrônico e sites de notícias, onde a descoberta de tópicos e itens é fundamental para a experiência. Como explicado na Web Design Trends 2015 e 2016 , forçando os usuários para abrir o menu de navegação nesta situação pode criar atritos desnecessários.

    awwwards-UX-tendências
    Fonte da foto: Tempo

    Em Tempo website ‘s, você vai encontrar uma variedade de tópicos de notícias escondidas no menu do Hamburger. No entanto, Tempo combate o problema de descoberta com um ticker no lado de notícias recentes.Há também um recurso de pesquisa de forma destacada no topo do ticker.

    Como apontado em um artigo Nielsen Norman Group excelente, ” Killing Off the Global de Navegação: Uma tendência a evitar ,” navegação escondido ainda poderia alienar os usuários.

    Como escritores Jennifer Cardello e Kathryn Whitenton destacam-se:

    “Mesmo que a navegação global é difícil de conceber e difícil de manter, a maioria dos sites ainda vai ser melhor para mostrar categorias de nível superior para os usuários imediatamente. É simplesmente uma das maneiras mais eficazes de ajudar os usuários a entender rapidamente o que o site é sobre. “

    Como eles apontam, aqui está um par de maneiras de dizer se escondendo de navegação global é para você:

    • Disparada taxas de rejeição em páginas de destino . Os usuários não vão ficar por aqui se a navegação global não é óbvio, o que torna difícil para eles para navegar no site.
    • Onde os usuários estão clicando . Eles estão realmente clicando no menu hambúrguer? Se não, e combinado com alta taxa de rejeição, então você sabe que algo está errado. Você pode verificar os cliques com ferramentas de heatmapping CrazyEgg e Usabilidade Ferramentas .

    O comportamento do usuário determina se você deve usar uma gaveta de navegação escondido em um site full-desktop. Não sacrificar a usabilidade e descoberta de pura estética.

    2. Carrosséis de primeira página

    Estes dias, carrosséis parecem estar em toda parte. Eles podem adicionar interesse visual e reduzir a desordem.Mas com a sua utilização esmagadora, eles fizeram um monte de sites sentir cortador de biscoitos.

    awwwards-UX-tendências
    Fonte da foto: Iquadart

    Para não mencionar, há um argumento que esta é uma tendência que deve colocar para descansar.

    Algumas coisas a considerar:

    • Carrosséis são ruins para SEO . A falta de conteúdo significa que é difícil obter informações meta em uma página. Isto é especialmente verdadeiro como o Google não indexa palavras-chave meta (embora Bing faz) e assim vai levar informações palavra-chave a partir da página. Claro, você pode ter a contagem de palavras abaixo do carrossel, no corpo da página. A maioria dos controles deslizantes que contêm cabeçalhos que são enrolados em H1, e estas mudanças quando o cursor faz e como tal, desvalorizar as palavras-chave dentro deles.
    • Afectar negativamente o desempenho . Muitas vezes carrosséis conter imagens de alta resolução que estão sub-otimizado e, como tal, abrandar o tempo de carregamento da página inicial – que, como a página mais importante no site deve carregar o mais rápido possível. Sliders também fazer uso de JavaScript ou jQuery, que também pode adicionar a dores de cabeça de desempenho.
    • Empurra conteúdo abaixo da dobra . Enquanto acima do conteúdo vezes talvez não seja tão importante como era antes (todos sabemos como para se deslocar nos dias de hoje), ele ainda não é recomendado pelo Googleque você enviar conteúdo mais abaixo na página. Embora as recomendações do gigante das buscas são baseadas no conteúdo do anúncio acima da dobra, um carrossel realmente não oferece muito em termos de valor para o usuário – é apenas bonita.
    • Tende a ser inacessíveis . Mesmo os melhores quadros lá fora, não pode resolver completamente os problemas de acessibilidade que cercam carrosséis, pois há tantos para resolver.

    Além disto, apenas um estudo de 2013 mostrou que apenas 1% das pessoas clicam em carrosséis . E muitos simplesmente ignorá-los e não notar o conteúdo, graças ao fenômeno conhecido como cegueira de banner .

    Tudo isso não quer dizer que você não deve usar carrosséis em tudo em seus projetos, mas você deve ter uma boa razão para a sua inclusão para além de que o cliente gosta. Carrosséis podem trabalhar, mas devem ser cuidadosamente elaborada e otimizada para garantir que eles não comprometem UX e acessibilidade.

    Os deslizantes carrosséis de Alimentação de animação, por exemplo, é certamente uma ferramenta útil para outros elementos de design. Por exemplo, você pode tentar uma gaveta deslizante de navegação para o seu visor móvel. Como mostrado no protótipo abaixo criado em UXPin com o editor animações não-código, a animação deslizante permite que o utilizador “arquivar” e revelar o conteúdo, conforme necessário.

    Ao contrário de um carrossel, uma animação de correr não requer um usuário para percorrer vários quadros. O conteúdo simplesmente entra e sai de vista, conforme necessário.

    awwwards-UX-tendências
    Fonte da foto: Iquadart

    3. Parallax Scrolling

    Nos últimos anos temos visto mais sites parecer que fazer uso de rolagem de paralaxe.

    A técnica de parallax permite que o conteúdo do primeiro plano e plano de fundo para rolar a velocidades diferentes, criando uma ilusão de profundidade. Ele pode ser usado para efeito muito bom, mas é discutível se ele pode ser descrito como tendo bom UX.

    Parallax tem alguns problemas potenciais:

    • Ruim para SEO . Como sites que utilizam a rolagem de paralaxe tendem a ser composta de uma página, geralmente há pouco na forma de conteúdo que pode ser rastreado pelos motores de busca. Isto é especialmente verdade quanto o texto tende a ser incorporado em gráficos.
    • Pode reduzir o desempenho . Devido ao uso intenso de gráficos e JavaScript, uma página pode ficar entupida na carga. E é certamente uma dor de cabeça para os usuários móveis. Tempos de carregamento no celular tende a ser muito pobre quando paralaxe é usado, devido ao uso pesado de JavaScript.
    • Pode afetar os usuários negativamente . O Jornal de Estudos de Usabilidade realizou uma pesquisa sobre a paralaxe, que concluiu que, embora o site paralaxe foi considerado para ser mais divertido do que sites não pertencentes à paralaxe, alguns usuários experientes “doença de movimento e experiente questões significativas de usabilidade ao interagir com o site de paralaxe.”

    No entanto, a rolagem de paralaxe pode acrescentar uma outra dimensão para um site e permitir que ele se destaca. Mas como nós listados, existem trade-offs, se você quiser criar um site que funciona tanto em computadores e dispositivos móveis, então paralaxe realmente não é para você.

    awwwards-UX-tendências
    Fonte da foto: A proposta McWhopper

    E é, mesmo que seja um pouco cartoon-like, é muito bem feito e conta uma história como você se move para baixo a página. Esta é a força de rolagem de paralaxe; ele permite que você para dizer efetivamente uma história usando elementos na sua maioria gráficas. A página acima tem imagens, texto e vídeo embutido nela, por isso, colocá-lo em GT Metrix para ver como ele se levantou ao escrutínio quando ele veio para acelerar.

    awwwards-UX-tendências

    Como você pode ver, a página tem uma pontuação de A a partir de PageSpeed ​​e C do YSlow. Isso não é terrível, mas dê uma olhada no tempo de carregamento da página … é 18,2 segundos , o que é extremamente mais lento do que a maioria dos sites comerciais que você vai se deparar (de acordo com o GT Metrix, a média é de 6.6s).

    De acordo com GTMetrix, o site também deve – entre outras coisas – evite conjuntos de caracteres na tag meta,

    “Os seguintes recursos têm um conjunto de caracteres especificado em uma tag meta. Especificando um conjunto de caracteres em uma meta tag desativa o downloader lookahead no IE8. Para melhorar o download paralelização de recursos, mova o conjunto de caracteres para o HTTP Content-Type cabeçalho de resposta. “

    Outras dicas incluem:

    • Adiar a análise de JavaScript como neste exemplo, 313.6kb de JavaScript é analisado durante o carregamento inicial da página e adiando isso pode ajudar a reduzir o “bloqueio de renderização de páginas.
    • YSlow recomenda que o site deve apoucar CSS e JavaScript sempre que possível.
    • O site deve usar um CDN

    Então, se você está pensando em criar um site de paralaxe, pergunte-se se a história que você quer contar vale a pena perder visitantes devido a uma redução no desempenho. Paralaxe tem de ser feito bem e tem que ser um pouco diferente, a fim de captar e prender a atenção do utilizador.

    4. Telas de carga complexos

    Recorde para trás no dia em que você pode bater um site apenas para ser saudado com uma tela de carga de animação em Flash que você foi forçado a sentar-se com antes que você poderia entrar em um site? Os usuários irão trancar a partir de um site que leva mais de 10 segundos , e que pode afectar a sua linha de fundo.

    awwwards-UX-tendências

    No exemplo acima, você tem que sentar-se através de um vídeo flash que dura 41 segundos. Não há nenhuma pista sobre o que o site é ainda sobre. E não há nenhuma navegação, deixando os usuários perplexos.

    Podemos supor que o site tem algo a ver com o cinema, mas não há nada realmente para confirmar nossas suposições. O ícone da Apple permite que você abrir o vídeo no iTunes, mas o URL quando entrou no iPad apenas diz servidor não pode ser found.The segundo exemplo acima é um pouco tedioso e você encontrar-se assistindo o contador subindo lentamente a 100%. Como a imagem ea porcentagem balcão está bem na parte inferior central da tela, também é bastante aborrecido.

    awwwards-UX-tendências

    O segundo exemplo acima é um pouco tedioso e você encontrar-se assistindo o contador subindo lentamente a 100%. Como a imagem ea porcentagem balcão está bem na parte inferior central da tela, também é bastante aborrecido.

    awwwards-UX-tendências

    No entanto, quando a página faz, finalmente, de carga, é claro que o site está em causa. E que poderia deixá-lo perguntando por toda a acumulação.

    Neste exemplo, a tela de carga poderia ser criada usando o abaixo somente, que oscila quando você passa o mouse sobre certos elementos. É apenas o suficiente para manter sua atenção. A interação é bastante simples, é claro que quando você passa o mouse sobre certos elementos que podem ser utilizados e isso também significa que não afeta o desempenho muito.

    awwwards-UX-tendências

    Aqui está um bom exemplo de uma carga de tela divertido, interativo que faz bom uso de gráficos e sons.Inicialmente, carrega os gráficos saltando-los em uma de cada vez, com um foguete no início. Ele carrega totalmente em cerca de quatro segundos, e usa a música simples de manter as coisas interessantes.

    awwwards-UX-tendências

    Quando a tela está totalmente carregada, há uma abundância de opções interativas. Elementos saltar rapidamente e as opções de navegação são claras. Mover o mouse também move as estrelas no fundo. Isso cria a coerência com tela de carregamento e também compensa para a espera do usuário.

    5. Too Much JavaScript

    Parece que o JavaScript está em toda parte estes dias. plugins sociais usá-los. Então faça uma boa proporção de plugins WordPress. rom uma perspectiva UX, no entanto, JavaScript pode abrandar um bom site. E, como dissemos anteriormente, os usuários não vão ficar por aqui, se um site é muito lento.

    JavaScript pode ser altamente funcional, em que ele pode ser usado para muitas coisas que outros idiomas não pode. Ele pode ajudá-lo a criar grandes telas de carga, por exemplo, e outros elementos de estilo tais como sliders, adicionando funcionalidade.

    JavaScript pode ser encontrado em muitas das modernas bibliotecas e frameworks, como angularjs, Backbone.js e Knockout.js. Este último é um quadro MVVM (Model-View-View), que é escrito inteiramente em JavaScript.

    Há uma abundância de razões que uso excessivo JavaScript pode machucar seu site e estas incluem:

    • Tempos de carregamento . Isto é devido a plugins e sliders que criam lotes de diferentes arquivos JavaScript e CSS. É muito mais eficiente para garantir que toda a carga de um arquivo (de cada tipo) por minifying.
    • A pesquisa móvel é negativamente afectada. Isto é devido a velocidades de carga.
    • Afeta facilmente funcionalidade e peças ‘breaks’ de um local devido a um bug . Você pode aprender mais sobre erros e como evitar e corrigi-los usando web recursos como pluralsight .
    • Segurança . JavaScript, como muitos web idiomas / scripts, pode ser explorada se for aplicadas de forma inadequada. Isso é muitas vezes porque as chamadas para outros sites, a fim de fazê-lo funcionar adequadamente (pense plugins sociais). Injecções código malicioso também pode ser levada a cabo, normalmente, a fim de roubar informações
    • SEO , JavaScript não é rastreado pelos motores de busca e por isso, se o seu site tem um monte, então você pode perder alguns rankings palavra-chave.

    Seja criterioso com o uso de JavaScript.

    Se você usá-lo com o seu site ágil, você só vai querer carregar o script que você realmente precisa em um dispositivo móvel. JavaScript nem sempre rende bem em dispositivos móveis, que podem entupir a velocidade do seu carregamento da página. Você também deve usar fontes da web para ícones acompanhamento social, em seu site, a fim de reduzir o JavaScript e confira o quanto é usado em quaisquer outros plugins que você usa.

    Agora, não estamos errados – não há nada de errado com JavaScript em geral. Ele tem um monte de grandes usos e nos permite fazer algumas coisas interessantes na web. No entanto, você deve reduzir a quantidade de JavaScript que você usa para que ele não faz o seu site dolorosa para ver em um dispositivo móvel.

    6. Tipografia Complex

    Enquanto você pode usar vários tipos de letra, eu geralmente não recomendo mais de dois.

    Demasiados caracteres tipográficos cria um site à procura confuso e desordenado, o que reduz a legibilidade e leitura.

    awwwards-UX-tendências
    Crédito da foto: Andre Luis , Creative Commons

    No entanto, as regras são feitas para serem quebradas e não há nada para dizer que você não pode usar mais de dois tipos de letra para um bom efeito.

    O exemplo abaixo do UXPin site utiliza fontes da mesma família ( Proxima Nova ), uma tática que funciona muito bem para maior clareza. No entanto, o espaçamento também é importante e não é essencial que eles devem ser da mesma família, assim que eles funcionam bem juntos.

    Eis algumas dicas:

    • Experimentar com fontes. Apontar para apresentação limpo e claro que também reflete estilo visual da marca.
    • Atenha-se fontes e caracteres tipográficos que se complementam ou são diferentes o suficiente para proporcionar um contraste interessante. Considere também que a fonte / fonte diz ao usuário em um nível psicológico . As pessoas têm respostas semelhantes para determinadas fontes como eles fazem para cores.Acredite ou não, as emoções e sentimentos também estão ligados à tipografia. A serif tem um ar de formalidade. A sans-serif sente confiável. Um script pode ser arrogante.
    • Se você quer seu negócio ser visto como tradicional, ir com um serif. Se você quer que ele seja visto como estável, uma sans-serif é sua melhor escolha.

    Bons designers são bons Céticos

    Algumas tendências fantásticas surgiram como as melhores práticas nos últimos anos.

    Minimalismo inspirado uma série de sites que são limpo, rápido e fácil de usar. Enquanto isso web design responsivo ajuda muitas empresas se preocupar menos com a concepção de um fluxo constante de novos dispositivos. Boas tendências vêm e tendem a ficar, mas sempre haverá alguns que estão mal pensado.

    Acima de tudo, as necessidades do usuário deve informar o seu projeto mais. Quando uma nova tendência aparece, considerá-lo sempre de todos os ângulos antes de seguir a multidão.

    Para obter conselhos sobre as 10 tendências de web design mais úteis, confira o e-book gratuito Web Design Trends 2015 e 2016 . O livro inclui 100 recursos e análise de 166 exemplos de empresas como Google, Apple, Reebok, Intercom, Adidas, Dropbox, e outros.

    Hello world!

    Welcome to WordPress. This is your first post. Edit or delete it, then start writing!