Facebook redesenhado uma análise detalhada de projetos independentes
Há muito o que aprender estudando o trabalho de outros designers. Isso vale tanto para projetos profissionais quanto para designs de especificações para sites existentes. Sites grandes como o Facebook oferecem uma experiência de usuário muito particular com alguns bons elementos e outros elementos não tão bons. Neste post, eu gostaria de examinar redesenhas diferentes do Facebook para analisar conceitos de interface que poderia melhorar a experiência atual do usuário.
Eu tirei um punhado de redesigns de FB personalizados dos usuários do Dribbble, cada um com Aprimoramentos específicos e elementos atualizados da interface do usuário. Leve essas ideias em consideração para sua aparência, como elas podem funcionar e como eles poderiam impactar a usabilidade se implementado ao vivo no Facebook.
Página de perfil simplificada
Este redesenho da página de perfil vem de Haris Jusovic, um designer da região dos Balcãs da Europa.
Neste design, ele coloca mais foco na simplicidade, destacando o proprietário da página com um foto de perfil proeminente e foto de perfil.
As postagens na linha do tempo podem ser classificadas por “recente” ou “popular” com base na sua preferência. Isso é grande para a usabilidade, especialmente na sequência da reação do Twitter contra a mudança de algoritmo recentemente solicitada.
Muitos dos botões também são exibidos com estofamento extra e tipografia maior. Como o Facebook é para ser interativo, só faz sentido aumentar a visibilidade de itens como botões e hiperlinks.
No geral, este conceito parece compacto e mais leve em inchaço. Seria bom ver o Facebook mais focado nos elementos interativos e talvez aumentar o tamanho das fontes também.
Linha do tempo de várias colunas
Virando-se para um layout verticalmente colunado é o redesenho de Alejandro Osorio. Esse layout representa a visualização da linha de tempo de perfil que os usuários do Facebook visualizam quando visitam a página de perfil de um usuário.
O design é impressionante, mas pode ser desanimador para alguns usuários. Depende de colunas de várias páginas para organizar os links do perfil do usuário, juntamente com uma visualização da linha do tempo das postagens recentes. Todas as cores e elementos permanecem fiéis aos estilos de design do Facebook. Certamente parece uma página de cronograma do Facebook.
Mas alguns dos elementos da barra lateral são um pouco confusos. Por exemplo, um botão verde com um sinal de mais ao lado de um “Segue” botão. Um usa apenas um símbolo, o outro apenas o texto. Isso parece incongruente com o estilo de design e outras informações de perfil.
O que mais gosto aqui é o estrutura clara de dados na linha do tempo. Tudo é organizado de forma clara e há até mesmo links da barra lateral para alternar entre posts recentes e posts populares.
Redesenho de conteúdo denso
Sites maiores, como o Facebook, lidam com muito mais dados e uma base de usuários que deseja acesso fácil a esses dados. Na reformulação da página inicial por MagicVoltage, você encontrará um recurso consistente: muitos conteúdos contidos em um layout de página.
A página inicial do Facebook é a visualização da linha de tempo inicial que os usuários veem quando acessam o site pela primeira vez. Inclui postagens recentes de amigos, uma lista de bate-papo, jogos, anúncios e outras informações relevantes, como aniversários futuros.
A ocupação desse layout é o que o torna ótimo e potencialmente controverso. Ter todo esse conteúdo em uma página faz com que super fácil de navegar - Uma vez que você realmente aprende onde tudo está localizado. E os links do ícone no canto superior esquerdo são apenas vagos o suficiente para dissuadir qualquer um de interagir com eles.
Mas em defesa deste design, ele lida muito bem com conteúdo densamente compactado. Há muito espaço em branco entre os elementos e executa brilhantemente um design de quatro colunas.
Navegação volumosa
Este redesign chamado Facebook 2.0 criado por Marcelo Silva é realmente um espetáculo para ser visto. Seu layout de demonstração exibe uma página inicial atualizada com uma linha de tempo e contatos de bate-papo parcialmente ocultos.
Uma grande peça para este design é o sistema de navegação em camadas. Eu gosto de como há uma navegação principal com links de ícones que exibem links secundários. Na captura de tela acima, o usuário está selecionando o ícone do perfil que possui links para Navegar no histórico recente e editar o perfil.
Ao contrário das tradicionais fotos quadradas do Facebook, o redesign de Marcelo opta para a foto circular. Esse estilo é onipresente na linha do tempo e na lista de bate-papo.
Assistente M e lista de atividades recentes
Há muito a ser dito sobre o redesenho FB de Steven McCabe. Na verdade, muitas áreas como jogos e atividades recentes foram completamente redesenhadas com um facelift impressionante.
O design de Steven é muito mais escuro que o esquema de cores atual do Facebook. Eu gosto disso porque cria mais contraste entre as barras laterais e o conteúdo da página principal. A página atual do Facebook tem a maior parte desse conteúdo, mas com o tempo ele pode se misturar ao plano de fundo.
O cabeçalho ainda usa bolhas vermelhas para indicar notificações. Há também posts populares e um feed de notícias com a capacidade de classificar as atividades recentes de amigos na barra lateral direita.
Na parte inferior você notará uma pequena caixa para o M do Facebook, o equivalente de Siri para usuários do Facebook.
Esse recurso não recebe muita atenção em redesenhas, mas Steven realmente fez tudo para tornar seu conceito verdadeiramente uma tecnologia moderna do Facebook.
Layout da Linha de Tempo de Quatro Colunas
Aqui está outra reformulação da homepage de 4 colunas feita pelo designer japonês Sho Kameya. Todas essas colunas abranger toda a página, largura e altura.
A barra lateral esquerda coloca pesado foco nos links tradicionais do Facebook para jogos, aplicativos, páginas, recursos de desenvolvimento e outros itens semelhantes. Em seguida é a coluna de conteúdo que é a mais diversificada dentre todas as reformulações. Isso não mantém os links tradicionais para status de atualização / adicionar foto, mas usa um abordagem minimalista com opções ocultas.
As duas barras laterais à direita incluem todo o resto com mais fotos, como avatares de usuários e ícones de jogos. Este design ainda mantém todas as atualizações como aniversários, bate-papos e recomendações de amigos.
Esse design é muito diversificado, mas permanece fiel ao núcleo dos recursos do Facebook. Pode não ser o redesenho perfeito, mas mostra as possibilidades de um layout de quatro colunas.
UI simplificada com lista de conversas escuras
O objetivo do redesenho de Ben Hartley é simplicidade e sutileza. O layout usa uma combinação de conceitos de design plano com algumas sombras em elementos de página maiores.
Muitos itens de marca permanecem os mesmos e ele confia no tradicional esquema de cores azul / cinza do Facebook. Mas você notará que alguns dos ícones foram redesenhados menor ou mais simples (ou ambos).
Este layout também depende avatares circulares e dá muito espaço para imagens compartilhadas com posts. Eu realmente gosto do seu lista de bate-papo atualizada com o esquema de cores mais escuro e ícones de status menores.
Embora o redesenho de Ben ainda pareça um pouco confuso, parece muito mais simples. Esse seria um design difícil para avaliar a experiência do usuário sem estudos de UX em um navegador. Mas de relance parece mais fácil navegar e dá mais espaço para consumir conteúdo de cronograma.
Embrulhar
Embora esses exemplos se concentrem principalmente no Facebook, as lições aprendidas podem ser aplicadas a qualquer website. O excelente design da experiência do usuário transcende todas as barreiras da linguagem e é uma peça vital do processo criativo digital.
Sinta-se à vontade para emprestar ideias dessa análise e até mesmo implementar ideias semelhantes em seu próprio trabalho de projeto. Além disso, se você encontrar redesigns relacionáveis no Facebook, sinta-se à vontade para compartilhar os comentários com sua própria análise..
