Respondendo as dúvidas sobre verticalização de sites pela Revista Wide

postin

Confira o debate completo feito pela Revista Wide em que participo respondendo sobre o tema que escrevi no post de (One Page: Verticalização dos sites?)

http://www.revistawide.com.br/tecnologia/verticalizacao-dos-sites

Minha Resposta

Quando o conteúdo é relevante para o usuário, ele não se importa tanto com o scroll que vai realizar. Facebook, Instagram e Twitter são exemplos práticos de que se o usuário ficar um dia sem acessar a página a sua primeira ação será ver os conteúdos “atrasados” até quando estes tornarem-se desinteressantes para ele.

É importante priorizar sempre a principal informação acima da dobra do site, evitando o risco de deixar passar dados importantes caso o usuário não faça o scroll, porém, é importante também manter sempre que possível um call to action no final, ampliando suas chances de conversão e facilitando para o usuário.
Partindo do fato de que cada vez mais o usuário tem o hábito de “scanear” o conteúdo de um site, devido à atual escassez de tempo, o mais indicado seria a publicação da parte mais relevante do conteúdo, dessa forma, podemos prender a atenção e instigar o interesse do usuário, passando a mensagem de forma rápida e direta.

A verticalização acaba por trazer para o usuário mais praticidade tratando-se de todo o conceito que envolve UX, melhorando a usabilidade e utilizando mais estratégias de marketing e design para prender e surpreender de forma mais rápida e eficaz.

Fotografia, vídeo, tipografia e cores chapadas em alta nas interfaces web

post_bg

… Até que ponto essa tendência é boa para seu usuário?

Tenho navegado bastante em busca de novas tendências web, até como benchmarking para projetos futuros, e tenho me deparado cada vez mais com sites que utilizam vídeos, fotografia, tipografia e cor chapada como composição de layout.

Confesso que tenho visto aplicações bastante interessantes, principalmente como background, como (kathart) que proporciona uma interação atraente e criativa ao navegar. Já o (soleilnoir) abusa do uso da tipografia e cores chapadas alinhado ao parallax que continua sendo bastante utilizado.

Tenho encontrado muitos sites bacanas com essa tendência, mas 90% ainda não são sites do Brasil, acredito que seja principalmente devido ao custo de se produzir um vídeo com boa qualidade ou até mesmo tirar uma fotografia bem produzida e editada para chegar a uma boa proposta. Até porque se a moda pega por aqui e as agências saem utilizando dessa tendência de qualquer maneira, os Designers de Interação terão trabalho dobrado para arrumar essa bagunça, não queira nem ver!

O real objetivo desse post é justamente a preocupação e os cuidados que devemos ter na hora de aplicar essas tendências. Cuidado com sua aplicação, pois pode desviar a atenção do usuário de sua proposta com o site, além de gerar um desconforto ao navegar. Tenha senso crítico na hora de escolher sua fotografia, tipografia ou vídeo. Se não tá legal, Procura outra proposta para seu projeto e espera um bom material para fazer essa aplicação. Tudo chega na hora certa e seu dia vai chegar (rsrs).

Segue uma lista de sites bacanas com essas aplicações que achei bem interessantes na aplicação de Layout.

One Page: Verticalização dos sites?

one_post

Há um tempo, barra de rolagem significava um site chato, cansativo, que escondia o conteúdo e corria o risco de um usuário não ver todas as informações.

Hoje, a verticalização dos sites tem se tornado cada vez mais uma tendência na web. Com os estudos de UX em alta, os desenvolvedores tem se preocupado em projetar mais para o usuário, tornado a web mais interativa e usável. Os cuidados e os estudos voltados para o usuário tem entrado em pauta na hora de projetar uma experiência melhor, comprovando assim, que o tempo de navegação na web tem se tornado cada vez mais caro ($$$). Estamos prestes a participar de uma época em que o “tempo” vai passar a ser comercializado em prateleiras de supermercados, shoppings ou lojas virtuais. Já dizia Benjamim Franklin “tempo é dinheiro” então, saiba gastá-lo.

Sem fazer afirmativas, acho que devido a isso, os sites vem se readaptando e mudando seus conceitos para tornar melhor a experiência do usuário em relação ao seu tempo. Estratégia usada através dos infográficos que utiliza da simplicidade e criatividade para mostrar grandes conteúdos de maneira rápida.

Uma one page deve ter uma boa estratégia de ações (conteúdo bom e enxuto), além de hierarquia de conteúdo (dar destaque ao que deve ser destaque por prioridade), simplicidade (simplificar para tornar o conteúdo mais rápido de ser absorvido) e a criatividade (usar tecnologias a favor do design para tornar uma experiência melhor, mais atrativa e usável). Essa é a receita e diferenciais para tornar uma One Page um case de sucesso

A verticalização de um site é bem interessante, e se bem feita torna-se uma experiência muito boa para o usuário, mas até que ponto devemos verticalizar tanto? Será que devemos por todo o conteúdo ou somente o conteúdo principal em uma One Page? Seria o fim das Landing pages? Até que ponto isso é bom para o usuário?

Gostaria de saber a sua opinião sobre o assunto.

 

 

Flat Design X Criatividade

Tido por muitos como nova tendência do design, o Flat Design – ou design plano em sua tradução – vem ganhado seu espaço, principalmente entre os amantes do minimalismo, devido à simplicidade dos elementos, cores vibrantes e promessas de melhora à experiência do usuário.

Podemos falar que a Microsoft “startou” essa tendência ao radicalizar geral na interface do Windows 8 e a Apple, por vez, deixou um pouco de lado o Skeumorfismo em sua interface iOS e aderiu essa tendência do design plano rendendo muitas discussões entre seus usuários e designers com relação aos novos ícones e gradientes.

Voltando um pouco (não tão pouco assim…), o Flat Design lembra bem o design suíço nos anos 60 onde foi reconhecido durante décadas por sua funcionalidade robusta e elegância simples.

Exemplos de Design Suíço:

design suíço

Um design plano bem projetado aumenta as chances de sucesso na experiência do usuário. Se você deixa de lado o excesso de elementos, muitas vezes não funcionais para aquele projeto, o foco passa a ser maior com o usuário, os cuidados vão aumentar e o design passa a ser centrado no usuário.

É fato não esquecermos que um design limpo não quer dizer um design sem criatividade, interação, inovação ou boas experiências. Podemos usar e abusar do Flat Design com consciência, porém, o que tenho visto é que muitas pessoas vem utilizando e deixando de lado a criatividade. Um botão sem gradiente, texturas e efeitos não significa um botão sem graça ou que não vai chamar atenção. Lembre-se que o uso de cores contrastantes, fontes legíveis e formas simples, se bem aplicada, vai tornar seu projeto funcional. Less is more (menos é mais) já dizia Ludwig Mies Van Der Rohe, arquiteto alemão considerado um dos principais nomes da arquitetura do século XX.

Alguns exemplos de Flat design:

Flat_design

Dicas:

Uma dica para escolher cores bem usadas é o site  “Flat UI Colors“.  É só escolher a cor e  clicar para copiar seu hexadecimal.

fltdsgn é um site bem legal e tem uma galeria muito boa com exemplos de sites usando Flat Design.

E você, vai aderir essa nova tendência com criatividade?

Vetor Responsivo (SVG)

Eu sei, eu sei! Vetor responsivo não é o significado da sigla, o correto é Scalable Vector Graphics (SVG). Traduzindo: Gráficos Vetoriais Escaláveis.
Mas não vejo problema em chamar de “vetor responsivo” já que o design responsivo tem se tornado a grande tendência em desenvolvimento web e esse formato é cada vez mais utilizado por desenvolvedores.

 

O que é? Como é que eu faço para utilizar?

Em 1999 a W3C propôs esse padrão, e em 2001 finalmente foi registrado rotulado e carimbado nativamente para os desenvolvedores. O SVG é simplesmente uma linguagem de marcação XML cuja função é criar imagens gráficas vetoriais conservando suas principais características em não perder qualidade ao ampliar.

O SVG é suportado por todos os navegadores web tornando assim sua difusão mais fácil e aceitável pelos desenvolvedores, além de poder ser usadas estáticas, dinâmicas e animadas.

Mão na massa!

Vou abaixo ensinar a criar uma imagem em SVG utilizando o Adobe Illustrator, já que é uma ferramenta muito utilizada por designers:

Passo 1 – Criando…

post_001

 

Passo 2 – Salvando…

post_002

post_003

 

Passo 3 – Aplicando…

post_004

*Pega o código fonte gerado em seu arquivo e aplica no projeto.

 

Mais fácil que isso só ganhando na mega sena!

 

Outras ferramentas

Devemos lembrar que até água em exagero faz mal… Então utilize com moderação para que o browser não perca muito tempo ao renderizá-las e comprometer seu job.

Nesse post mostrei de forma simples o que é SVG e uma aplicação fácil para quem não tem muito conhecimento com códigos poder despertar mais curiosidades e começar a desenvolver.

Fim do Skeumorfismo?

Skeu o que? Já ouviu falar nessa “palavrinha” estranha? Então pula para o terceiro parágrafo e vamos ao que interessa.

Em resumo, podemos falar que são metáforas visuais que vivem no seu cotidiano sem pedir licença ou se quer, apresentar-se. Você certamente já se arrostou com o dito cujo e não se deu conta. Lembra dos icones de pastas, disquetes, lupa, calculadora, lixeira…etc…etc…etc… do seu sistema operacional Windows? O IBooks da Apple que usa a similaridade de uma estante para expor os livros e a leitura virando paginas como se fossem reais? Os efeitos 3D usados em botões no seu Smartphone para te dar a sensação de um botão físico?

skeu

Skeumorfismo você, você Skeumorfismo.

Agora saque do coldre todo seu estoque imagético e verás que tem em mãos uma quantidade suficiente para reproduzir o poder da bomba atômica. (Skeumorfismo é legal, ajuda na usabilidade, mas não vai sair atirando pra tudo quanto é lado e comprometendo seu projeto)

bomba

A Apple que peleja para continuar sendo referência em produtos inovadores e heavy users do Skeumorfismo estaria deixando de lado e aderindo ao Flat Design, tendência que vem sendo aplicada em muitos projetos na web e por grandes empresas predestinadas a dominar o mundo como Google e Microsoft.

E agora, meu Deus! O que usar?

 sk

Como diz um amigo meu, “É muito pano pra manga, só com uma cervejinha pra acompanhar”. Essa batalha ainda vai perdurar e que vença o usuário, afinal é nele que temos que pensar quando for desenvolver os projetos.

E você, prefere qual?

Um abraço e até a próxima!

Apple na moda!

Comentei sobre Flat Design no post anterior onde falei sobre Skeumorfismo e a Apple entrou de cabeça e sem vaselina (lá ele…) no assunto. Não consigo entender o que passou na cabeça do setor responsável em liberar aqueles gradientes que parecem mais suco de limão sem açúcar devido a tanta “acidez” em seu uso (sobre os ícones, nem vou comentar). Alertei também sobre o uso dessas tendências e porque, justo a Apple, empresa modelo em Inovação e Design resolveu dar um tiro no pé, ou estaria ela inserindo no mercado virtual uma nova tendência?

ios_post

Com isso tudo, fui dar uma de Sherlock e investiguei o que pôde ter inspirado a Apple em suas aplicações, e não é que encontrei algumas referências? Bastou eu falar com meu grande amigo Google, dedicar algumas horas e… BINGO!

Segundo o portal de tendências em moda WGSN, apostou em uma paleta de cores ácidas para esse inverno de 2013 e não é que realmente já estamos consumindo isso.

02

Já que estamos na Copa das Confederações, vou ilustrar alguns exemplos e provar que a Apple não está “fora da moda”.  Quem acompanhou o primeiro jogo da Itália X México pôde notar que o polêmico Balotelli usava uma chuteira ácida, talvez para ajudar aos mexicanos a digerir a amarga derrota na estréia.

moda_acida

E agora, devemos consumir e aderir a moda ou rejeitar a Apple?