Moray news

Só mais um site WordPress

Como limpar os dentes do seu cão

Cão que tem é dentes escovados

Tendências Web Design 2016

maxresdefault

Tendências em criação de sites, como as tendências da moda, vêm e vão. Às vezes, as tendências são ditadas pela necessidade (como o 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 exclusivamente em “é o que os sites legais estão fazendo”. Modismos desaparecer. Um site construído apenas em tendências rapidamente torna-se desatualizado.

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

Escondendo tudo sob um menu Hamburger

Como os dispositivos móveis se tornaram comuns, os designers começaram a simplificar 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 usa uma gaveta de navegação em toda a sua site, independentemente do dispositivo.

awwwards-UX-tendências
Fonte 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 Foto: Squarespace

É compreensível por que isso é atraente. Colocar sob uma navegação do menu do Hamburger torna 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 funcione para todos os sites e pode reduzir a descoberta.

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

awwwards-UX-tendências
Fonte Foto: Tempo

Em Tempo website ‘s, você vai encontrar uma variedade de tópicos de notícias escondidos no menu do Hamburger. No entanto, Tempo combate a questão 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 excelente artigo Nielsen Norman Group, “Killing Off the Global de Navegação: Uma tendência a evitar,” navegação oculto ainda poderia alienar os usuários.

Como escritores Jennifer Cardello e Kathryn Whitenton destacam-se:

“Mesmo que a navegação global é difícil de projetar e difícil de manter, a maioria dos sites ainda vai ser melhor para mostrar categorias de nível superior para usuários de imediato. É 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ê:

  • Subindo rapidamente as taxas de rejeição em páginas de destino. Usuários não vai ficar em torno de navegação global se não é óbvio, o que torna difícil para eles para navegar no site.
  • Onde os usuários estão clicando. Eles são, na verdade, clicando no menu de 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 heatmapping ferramentas de CrazyEgg e Usabilidade Tools.

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 ea 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 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 da página. Claro, você pode ter a contagem de palavras abaixo do carrossel, no corpo da página. A maioria dos cursores conter embora cabeçalhos que são enrolados em H1, e estas mudam quando o cursor faz e, como tal, desvalorizam palavras-chave dentro deles.
  • Afetar negativamente o desempenho. Muitas vezes carrosséis conter imagens de alta resolução que estão sub-otimizado e, como tal, retardar 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 para baixo abaixo da dobra. Enquanto acima do conteúdo vezes talvez não seja tão importante como era antes (todos sabemos como se deslocar nos dias de hoje), ele ainda não recomendados pela Google que 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ível. 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 clique em carrosséis. E muitos simplesmente ignorá-los e não observe o conteúdo, graças ao fenômeno conhecido como cegueira de banner.

Tudo isso não é para 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 pode trabalhar, mas eles devem ser cuidadosamente trabalhada e otimizada para garantir que eles não comprometem UX e acessibilidade.

Os carrosséis de correr através 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 sua janela de exibição móvel. Como mostrado abaixo no protótipo criado em UXPin com o não-código animações editor, 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 como necessária.

awwwards-UX-tendências
Fonte Foto: Iquadart

3. Parallax Scrolling

Nos últimos anos temos visto mais sites parecem que fazem uso de rolagem de paralaxe.

A técnica de paralaxe permite que o conteúdo primeiro e segundo plano para se deslocar em velocidades diferentes, criando uma ilusão de profundidade. Ele pode ser utilizado com muito bons resultados, 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 nos 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 carga no celular tende a ser muito pobre quando paralaxe é utilizado, devido ao uso pesado de JavaScript.
  • Pode afetar negativamente os usuários. O Jornal de Estudos de Usabilidade realizou uma pesquisa em paralaxe, que concluiu que, embora o site paralaxe foi considerada a ser mais divertido do que sites não pertencentes à paralaxe, alguns usuários experimentaram “a doença de movimento e experimentou problemas de usabilidade significativos 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 eu listei, existem trade-offs, se você quiser criar um site que funciona tanto em desktop e móvel, então paralaxe realmente não é para você.

awwwards-UX-tendências
Fonte Foto: The Proposal McWhopper

E é, mesmo que seja um pouco cartoon-like, que é muito bem feito e conta uma história como você se move para baixo a página. Esta é a força de rolagem paralaxe; ele permite que você efetivamente contar uma história usando elementos gráficos em sua maioria. A página acima tem imagens, texto e vídeo embutido nela, então vamos colocá-la 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 especificada em uma tag meta. A especificação de um conjunto de caracteres em uma meta tag desativa o downloader lookahead no IE8. Para melhorar o recurso de download paralelização, mova o conjunto de caracteres para o cabeçalho de resposta HTTP Content-Type “.

Outras dicas incluem:

  • Adiar a análise de JavaScript como neste exemplo, 313.6kb de JavaScript é analisado durante a carga inicial da página e adiando isso pode ajudar a reduzir o “bloqueio de página de renderização.
  • 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 a si mesmo se a história que você quer dizer vale a pena perder visitantes devido a uma redução no desempenho. Paralaxe tem de ser feito e também tem que ser um pouco diferente, a fim de captar e prender a atenção do utilizador.

4. Telas de carga complexas

Lembre-se de volta no dia em que você pode bater um site apenas para ser saudado com um ecrã 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 isso poderia afetar 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á navegação, deixando os usuários perplexos.

Podemos supor que o site tem algo a ver com 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 lentamente subir para 100%. Como a imagem e percentagem 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 lentamente subir para 100%. Como a imagem e percentagem 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 carga, é claro que o site tem tudo a ver. E que poderia deixá-lo perguntando por que todo o acúmulo.

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 ele não afeta o desempenho muito.

awwwards-UX-tendências

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

awwwards-UX-tendências

Uma vez que a tela é totalmente carregado, 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 coerência com tela de carregamento e também compensa para o usuário espera.

5. Too Much JavaScript

Parece que 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 Angular.js, Backbone.js e Knockout.js. Este último é um MVVM (Model-View-View) quadro 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 carga. 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 é afetado negativamente. Isto é devido a velocidades de carga.
  • Afeta facilmente funcionalidade e peças “Breaks” de um site devido a um bug. Você pode aprender mais sobre bugs e como evitar e corrigi-los usando web recursos como Pluralsight.
  • Segurança. JavaScript, como muitos web idiomas / scripts, pode ser explorada se ele é implementado de forma inadequada. Isso é muitas vezes porque as chamadas para outros sites, a fim de fazê-lo funcionar corretamente (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 de palavras-chave.

Seja criterioso ao seu uso do 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 seguir os ícones sociais em seu site, a fim de reduzir o JavaScript e confira o quanto é usado em todos os outros plugins que você usa.

Agora, não nos leve a mal – 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ê usar para que ele não faz o seu site doloroso para ver em um dispositivo móvel.

6. Complexo Tipografia

Enquanto você pode usar vários tipos de letras, 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 legibilidade.

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 fontes 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, só que eles funcionam bem juntos.

Eis algumas dicas:

  • Experimentar com tipos de letra. Apontar para apresentação limpo e claro que também reflete estilo visual da marca.
  • Atenha-se as fontes e tipos de letra que se complementam ou são diferentes o suficiente para fornecer contraste interessante. Considere também que a fonte / tipo de letra diz para o usuário em um nível psicológico.As pessoas têm respostas similares para determinadas fontes como eles fazem para cores. Acredite ou não, emoções e sentimentos também são vinculados a tipografia. A serif tem um ar de formalidade. A sans-serif sente confiável. Um script pode ser arrogante.
  • Se você quiser que seu negócio a 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 inspirou uma série de sites que são limpo, rápido e fácil de usar. Entretanto web design responsivo ajuda muitas empresas se preocupar menos com a concepção de um fluxo constante de novos dispositivos. Bom tendências vêm e tendem a ficar, mas sempre haverá alguns que são mal pensado.

Acima de tudo, as necessidades do usuário deve informar o mais seu design. 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 livre e-book Tendências de Design de Web de 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.

Sites responsivos

Responsive web design in flat style.

Não é nenhum segredo que mais e mais pessoas estão acessando a internet usando seus dispositivos móveis em complemento ou em substituição de computadores desktop.

Mas o que eles estão  fazendo  sobre os dispositivos móveis é ainda mais atraente para os comerciantes como nós. De acordo com Path Mobile da Google de Compra relatório, os motores de busca são os pontos de partida mais comum para usuários de dispositivos móveis (48%), seguido por websites de marca (33%) e aplicativos de marca (26%).

Como resultado, as empresas que têm sites que respondem gerar mais oportunidades e manter uma vantagem competitiva crescente sobre as empresas que não o fazem.

Mas o que exatamente  é  o design do site ágil, como funciona, e você deve fazer a troca? Este infográfico do Verve se propõe a responder a essas perguntas, oferecem algumas estatísticas convincentes, e ensinar-lhe as principais características do desenvolvimento de site responsivo todos os comerciantes devem conhecer. Confira.