7 decisões de design exclusivas
Estou sempre à procura de inspiração, para um ótimo design que desafia a convenção. Este post é sobre soluções de layout exclusivas; Isso significa que eu vou falar sobre oito sites diferentes que apresentam algo típico, de uma maneira única. Vamos passar por soluções de layout exclusivas, desde exibir produtos até incorporar elementos pessoais e humanos em um website.
1. Harvard reinventa o infame carrossel
Escola de Design de Harvard website tem uma maneira única de abordar a navegação. Quando você pousa pela primeira vez na página inicial, há uma exibição visual da navegação. Claro, cada link não está representado aqui, apenas alguns dos principais. Muitos sites adotaram links para as páginas mais importantes no cabeçalho da página inicial; foi isso que nos trouxe carrosséis, por exemplo. Mas ainda tenho que ver outro site presente desta maneira. A navegação pode ser pequena, mas é frontal e central. Mais importante, parece que pertence lá. É executado excepcionalmente.
As imagens à esquerda se sobrepõem umas às outras, mas você ainda pode ver quantas estão lá. Existe uma relação clara entre a imagem e os títulos no lado esquerdo. As imagens giram em relação aos itens à esquerda. No entanto, a qualquer momento, você sabe quais informações estão disponíveis para você. É como se a Escola de Design de Harvard tivesse criado uma versão melhorada do que o carrossel deveria ter sido em primeiro lugar. Não só a usabilidade é levada a sério nesta solução de design, como também o layout é único. Ambos os fatores combinados contribuem para um design visual fantástico.
2. Tra sai da grade
É óbvio que Tra O website usa um layout não tradicional. O site é, no geral, mínimo. Eles também usam um esquema de cores reversas, onde o fundo é preto e o texto é branco. O esquema de cores certamente dá um fator de uau. No entanto, trata-se do layout do site da Tra. Vamos começar com a página inicial: há algumas partes do texto na página inicial, a maioria delas sobrepõe a imagem de fundo pelo menos um pouco, exceto pela cópia do parágrafo na seção “Conhecemos pessoas”. A cópia está alinhada especificamente para ficar fora da imagem. É diferente, é único, é perceptível.
Na página sobre, há um pouco mais de ordem e uso de uma grade. Mas a grade ainda está irregular. Parece que cada seção da página sobre possui sua própria grade. O que mais me cativou nessa página é a imagem cortada do canto superior esquerdo da página da web. Isso simplesmente não se encaixa em nada. Naturalmente, isso me deixa curioso. Acontece que a imagem é uma galeria - você precisa clicar nela para abrir as imagens. Essa é uma maneira muito inteligente de alavancar um layout; as pessoas que se importam em investigar são recompensadas com um monte de imagens. As pessoas que não se importam, não perdem tanto. É um ovo de páscoa divertido.
3. Fotos de sapatos roláveis dentro de uma página fixa
Este exemplo de uma solução de layout exclusiva gira em torno de um varejista de calçados on-line. Feit A página do produto é simplesmente brilhante. Primeiro de tudo, o design utiliza toda a largura e altura da tela. Isso significa que todas as áreas da tela foram designadas com um propósito específico. Em segundo lugar, o site é simples, mínimo e limpo. Isso significa que, embora o design use a tela inteira, não é confuso. Isso é uma coisa muito boa, pois muito design depende de espaços em branco para criar um site limpo e leve.
O que mais me impressionou nessa página específica do produto é a maneira como o layout é dividido. A página é especificamente dividida em três seções diferentes. Primeiro, há a navegação no lado esquerdo. É bastante normal e nada muito especial. Depois, há o lado direito com os detalhes do produto. Ambos, a navegação do lado esquerdo e a seção de detalhes são fixados na tela. Mas a última seção, a seção de fotos do meio, é preenchida com fotos roláveis. Eu acho que é uma solução brilhante porque não é a solução mais comum.
Muitas vezes, se houver uma grande lista de fotografias de produtos, as informações sobre ele ficam para trás. Aqui, quando eu rolar para baixo eu ainda vejo a descrição e o nome do produto, eu ainda vejo as cores diferentes que vem e posso acessar mais informações, como detalhes sobre o material que eu quiser, sem ter que rolar para cima e para baixo. No geral, esta é uma experiência perfeita para um cliente em potencial.
4. Exibindo vários lados de um produto de uma só vez
Aqui temos outra página de produto e outra maneira de exibir um produto. Ok, também temos outro exemplo de sapato! Afura O site da Web também possui um método de exibição exclusivo. Desta vez, os sapatos são mostrados em várias fotos diferentes sobre a página. Na verdade, é parte de um elemento de interface do usuário do carrossel. No entanto, a usabilidade aqui não é um grande problema. Para começar, há três imagens exibidas por padrão em tamanhos de tela de desktop ou laptop. Todas as imagens padrão têm o mesmo plano de fundo, o que torna uma exibição agradável e perfeita. Se um usuário não perceber que as imagens fazem parte de um carrossel, pelo menos verá três imagens diferentes do produto em seus computadores. Para tamanhos de tela menores, como tablets, o padrão é exibir duas imagens por vez; isso ainda é muito bom. Tudo somado, a exibição dos produtos de calçados aqui é uma solução de design exclusivo.
5. Opendoor mostra seus humanos
Eu, por exemplo, acredito que a teia é um lugar impessoal onde normalmente não vemos o ser humano; as pessoas reais por trás de aplicativos, produtos, empresas e assim por diante. Eu sempre me esforcei para incluir um elemento humano em meus projetos. Eu posso ver isso Porta aberta quer fazer exatamente a mesma coisa. Em sua home page, na metade do caminho, há uma seção chamada “Nós temos as costas”. É preciso explicar que existem seres humanos reais por trás da empresa Opendoor que estão lá para ajudar seus clientes a cada passo do caminho. Agora, o Opendoor poderia ter acabado de deixar lá, mas em vez disso, eles colocaram uma grande foto de um de seus funcionários.
Esta seção tem muito pouco texto. Em vez disso, a foto e o rosto são a parte maior da seção. Eu diria mesmo que a foto domina a seção de maneira 100% positiva. Se a foto fosse uma miniatura ou um avatar, o efeito nem existiria. Se a foto tivesse sido um quadrado de tamanho médio (digamos pelo menos 300 px por 300 px) ao lado da cópia, o efeito não seria o mesmo. A escolha de usar uma imagem tão grande do rosto amigável de Mark foi uma boa ligação; Esta decisão de design não apenas fornece um elemento de design humano e personalizado, mas também um criativo. Sem essa foto, não haveria impacto pessoal no usuário. Sem esse layout específico, essa seção teria um efeito emocional totalmente diferente.
6. UX Flow mostra que um pouco de animação pode percorrer um longo caminho
Este próximo exemplo de uma solução de layout exclusiva tem a ver com animação. Se você der uma olhada na página inicial do Fluxo UX e rolar para baixo um pouco você pode notar que um dos fundos da seção é animada. É honestamente nada extravagante, mas é único. Planos de fundo não facilitam quando você rola em uma página da web. Ao longo dos últimos anos, vimos diferentes elementos de dentro de uma seção entrarem ou saírem à medida que você rola. Mas eu não pareço ter muitas animações de fundo além de paralaxe. A razão pela qual isso é importante é que um plano de fundo define uma seção. E, embora isso não seja uma animação maluca, ainda é impressionante.
Nem tudo precisa ser ousado, alto e desagradável para ser impressionante. Às vezes, as coisas sutis, como uma animação pequena e rápida, são suficientes para produzir uma experiência única para um usuário. Este é definitivamente um desses momentos. Outra coisa que é importante notar é que as seções entre as quais a animação acontece não possuem layouts exclusivos. Tudo bem; A transição é perceptível à medida que você vai de uma seção para outra, ainda faz parte do layout, mesmo que não seja o layout final feito pela animação.
7. Mapa integrado de Ted Todd
O design visual e a experiência geral do usuário Ted Todd O site da Web é bem projetado. Por causa deste artigo, gostaria de falar sobre o modo como Ted Todd usa a localização e a seção de mapas em seu site. No final da página inicial, há uma seção designada para os diferentes escritórios que a empresa possui em toda a Flórida. Existem várias razões pelas quais esta seção é incrível. Primeiro, a seção usa o layout de maneira única para fornecer uma solução de design estelar. A coisa mais notável sobre esta seção é a forma de luz da Flórida para a direita. O visual da Flórida com seus muitos pontos é uma maneira fantástica de mostrar o alcance da empresa. Eles não dizem apenas que estão na Flórida, o design mostra exatamente onde. É um visual fácil de digerir e é executado de uma forma fantástica também.
A próxima coisa importante sobre esta seção são os pontos. Eles são realmente interativos. Quando você passa por cima deles, você obtém o nome da cidade ou cidade em que o escritório da Ted Todd Insurance está localizado. Mas, se você clicar, toda a seção se deslocará para a esquerda para dar espaço para detalhes sobre o escritório específico. Você recebe o número de telefone do escritório, endereço, horário de funcionamento, além de uma lista de funcionários. Eu gosto desta solução de design porque permite que um usuário navegue rapidamente para um local próximo a eles. É visualmente uma representação muito mais interessante e única do que se as informações estivessem empilhadas umas sobre as outras em um título de página “Our Florida Offices”, você não acha?
