Alterações no Design Apple.Com
Apple.com sofreu alguns ajustes em seu design na semana passada, mudanças que, se você não estivesse prestando atenção suficiente, talvez nem notasse.
Embora muitos relatórios estejam se referindo a isso como um “redesenho”, acho difícil classificá-lo como tal. Certamente há algumas mudanças significativas, mas as mudanças não são exatamente uma revisão completa como foi o caso da CNN.com no final de 2009.
No entanto, as mudanças são significativas para os web designers, então eu vou olhá-las brevemente aqui. Se houver algo sobre as mudanças que eu deixei de mencionar, fique à vontade para comentar.
Uma barra de navegação reprojetada
A mudança mais significativa (embora ainda um pouco sutil) é a aparência da barra de navegação. A Apple tem uma daquelas barras de navegação que, em termos de design, todos amam e invejam. Parece impossível que possa ser melhorado. Bem, eles foram de alguma forma capazes de encontrar maneiras de torná-lo ainda melhor e mais intuitivo.
Aqui está a barra de navegação antiga:
Aqui está o novo:
As alterações incluem:
- É mais escuro
- O gradiente foi substituído por um aspecto brilhante mais arrojado
- A aparência do logotipo é simplificada
- A caixa de pesquisa é menor (mais sobre isso abaixo)
Eu acho que é preciso uma ótima equipe de designers para fazer mudanças realmente significativas na aparência de um elemento de interface do usuário muito importante, enquanto ainda dá a impressão de que nada mudou. Isso apenas mostra que os detalhes visuais geralmente não são tão importantes quanto a sensação geral do design.
A caixa de pesquisa flexível (somente no WebKit)
Sendo obviamente com viés do WebKit, a equipe de design da Apple incluiu alguns aprimoramentos apenas do WebKit, um dos quais está associado à caixa de pesquisa.
Na maioria dos navegadores, clicar na caixa de pesquisa iluminará seu plano de fundo para um branco mais legível. No Chrome ou no Safari, a caixa de pesquisa anima usando CSS3 Transitions para se tornar mais ampla e possivelmente mais utilizável. A captura de tela abaixo mostra a caixa de pesquisa no Chrome depois de ter animado para se tornar mais amplo:
Para acomodar o tamanho da caixa de pesquisa, os outros itens de navegação e o logotipo são redimensionados.
Eu gosto desse recurso; acrescenta um sentimento de intuição. Mas, na minha opinião, tem um pequeno defeito: ele não volta ao estado inicial depois de você remover o foco. É claro, se algo foi digitado na caixa de pesquisa, você não quer que o tamanho mude de volta, mas acho que ele deve retornar ao seu estado normal se perder o foco e permanecer vazio.
É claro, já que é extremamente improvável que alguém clique na caixa de pesquisa e não digite nada, suponho que seja uma omissão insignificante.
Entrada animada da barra de navegação (somente WebKit)
Outro pequeno recurso somente do WebKit é a entrada animada da barra de navegação. Não me lembro de ver esse efeito em seu site antes, então estou assumindo que esse é outro recurso novo. A entrada animada só acontece na página inicial e apenas uma vez por sessão do navegador. Essa é uma boa prática e uma boa lição para os desenvolvedores que adicionam efeitos animados às suas interfaces.
Conforme visualizado na tela acima, a barra de navegação entra na tela, provavelmente usando animação de quadro-chave CSS3, junto com JavaScript para controlar quando a animação deve ou não ocorrer.
Os navegadores de produtos animados (somente no WebKit)
Outra adição recente é o uso de animação em algumas das páginas do produto. Animações baseadas em CSS3 são usadas no Mac e iPod navegadores de produtos, um dos quais é mostrado abaixo:
Os produtos são animados quando você chega pela primeira vez na página e, se você alternar entre as subcategorias, os produtos visíveis desaparecem e os novos aparecem em seus lugares. Isso é feito via código CSS3 baseado em keyframe, alguns dos quais é mostrado abaixo:
Em navegadores que não são do WebKit, a animação do navegador do produto alterna para desvanecimento simples baseado em JavaScript. Embora esse tipo de coisa não seja o ideal em todas as circunstâncias (uma vez que se trata basicamente de "código bifurcado"), é uma opção realista para desenvolvedores e designers de hoje que desejam codificar os melhores navegadores possíveis e fornecer menos funcionalidades aprimoradas para o restante .
Caixa de pesquisa auto-sugerir
[ATUALIZAÇÃO] Como apontado por várias pessoas nos comentários, a auto-sugestão não é um novo recurso. Nossa inclusão disso como um “novo recurso” foi baseada em outro artigo que relatou que a auto-sugestão era nova. No entanto, manteremos esta seção porque é um bom recurso que tem o potencial de tornar um site um pouco mais utilizável, e fornece um bom exemplo para outros desenvolvedores e designers seguirem, se ele se encaixa em seu projeto.
A lista suspensa de sugestão automática orientada por Ajax aparece quando você digita uma consulta de pesquisa:
Como mostrado na captura de tela acima, o menu suspenso não apenas exibe resultados de pesquisa que correspondem aos caracteres digitados, mas os resultados são acompanhados por fotos e descrições de produtos. Acho que as fotos são mais valiosas nesse ponto do que as descrições, mas no geral isso tem o potencial de simplificar a pesquisa e as conversões de produtos.
Algo mais?
Isso parece cobrir as principais mudanças no recente re-ferramental do design do Apple.com. Há outras mudanças significativas no design ou no código que não mencionei aqui?
Este post foi escrito exclusivamente para Webdesigner Depot por Louis Lazaris, um escritor freelance e desenvolvedor web. Louis corre Webs impressionantes onde ele publica artigos e tutoriais sobre web design. Você pode siga Louis no Twitter ou entre em contato com ele pelo site dele.
O que você acha das mudanças no design do Apple.com? Há alguma mudança que não tenhamos mencionado aqui?