Redesigns para inspirar seu workflow

Juntei alguns projetos de redesigns de serviços já existentes, elaborados por desenvolvedores mudo afora, que me ajudam a entender boas práticas de UI/UX e me inspiram. O resultado é este post que pode ajudar a inspirar vocês também.

“…a Web evolui e o usuário aprende novos padrões de usabilidade junto com essa evolução, mesmo inconscientemente. O papel dos designers e desenvolvedores é garantir que o usuário tenha uma boa experiência online mantendo sempre os serviços atualizados, pensando sempre no usuário final”

Essa frase que ouvi em uma palestra uma vez pode ser considerada uma definição para redesigns feitos para serviços online, pois adaptar um serviço ao usuário é o que na maioria das vezes move tais atualizações de layout.

O legal de analisar projetos de redesign é notar como a equipe trabalha as mudanças do serviço para aprimorar a usabilidade do usuário, desde o layout até um simples clique do mouse que gera uma animação para passar uma foto em uma galeria. Geralmente um redesign é feito para tapar “buracos” no serviço atual, o que faz com que a equipe responsável pelo projeto tente recriar toda a experiência de utilização do serviço, pensando apenas no usuário final que vai utilizar o mesmo.

A maioria dos projetos que vamos apresentar no post são de designers/desenvolvedores freelance que tentam provar que aquele serviço em especifico pode melhorar. Além disso, em alguns casos os projetos contam até com pesquisas relevantes para as mudanças que vão ser executadas no serviço. Vamos aos projetos. 🙂

IMDB – Thinking Database Design

Quem nunca fez busca de algum filme e foi direcionado ao IMDB? Ele é a maior base de dados relacionada a cinema e tv shows online. Se você for um designer que se mantém atualizado, ao visitar o site oficial do serviço você vai notar que o portal tem um layout com padrões antigos que com o passar do tempo cria um desconforto.

IMDB Redesign - Web Social Dev - IMG Post
Atual layout

Agora analise o projeto de redesign feito por Gilles Bertaux (Digital Planning & Product Management | Dataparis.io & Techobject.net) para chegar ao resultado abaixo. O mais interessantes são os levantamentos feitos sobre o serviço para então gerar um redesign.

IMDB Redesign - Web Social Dev - IMG Post
Depois do redesign

Visitar projeto

Wikipedia – Redesign and rethinking concept

Esse é um dos projetos de redesign mais bem feito que eu já vi publicado publicamente na internet. O designer George Kvasnikov faz realmente um estudo profundo do propósito do serviço para então aplicar técnicas de usabilidade para satisfazer o usuário final. O resultado final é o apresentado abaixo, mas vale a pena ver o projeto completo e analisar que pontos são considerados relevantes para que seja atingido este resultado.

Wikipedia - Redesign Workflow - Web Social Dev - IMG Post
Redesign
Wikipedia - Redesign Workflow - Web Social Dev - IMG Post
Atual layout

Visitar projeto

Codecademy – Visual Identity Redesign

Pra quem não conhece, o Codecademy é uma academia online para interessados em aprender programação. O serviço é gratuito, tem versão nacional, e tem como intuito apresentar uma nova forma de aprendizado através da internet.

Codecademy - Web Social Dev - IMG Post
Antes do redesign da identidade visual da marca

Recentemente o Codecademy fez um refresh na sua identidade visual, o que envolveu o website da instituição e tudo que envolve o design da marca.

O estudo elaborado pela agência Pentragram é bem completo e como envolve toda a identidade visual, tem diversos exemplos desde o layout do portal online até o design dos uniformes de funcionários e reformulação do logo. Esse é um daqueles mega projetos que tem como intuito melhorar a visibilidade da marca, então estudos específicos são obrigatórios, vale a pena conferir a documentação e o que foi abordado.

O resultado final do projeto é o apresentado abaixo. Note como muda a forma como a marca é apresentada após a finalização do projeto.

Codecademy - Web Social Dev - IMG Post
Depois do redesign da identidade visual da marca

Visitar projeto

Los Angeles Times – THE LOS ANGELES TIMES REIMAGINED

O redesign do portal do Jornal americano The Los Angeles Times é um dos projetos de redesign mais interessantes que eu já vi, simplesmente pela magnitude de informações que o portal agrega, como isso seria feito sem interferir no modo com o qual o usuário está acostumado a ler noticias online e empregando ainda um layout responsivo. O resultado pode ser conferido abaixo.

The Los Angeles Times - Web Social Dev - IMG Post
Antes do redesign.
The Los Angeles Times - Web Social Dev - IMG Post
Depois do redesign.

Qualquer semelhança no primeiro layout com layouts de outros jornais é pura coincidência, e claro que isso foi uma ironia. É bem capaz que os jornais adotem um layout parecido com este do LATIMES após o redesign, pois é um case que prova a funcionalidade do layout proposto.

Visitar projeto

Google Search Redesign

É difícil imaginar que alguma página do Google precisa melhorar. Pra quem desenvolve, seja design ou código, sabe que o Google sempre trabalha a interface de seus produtos pensando no experiência do usuário. Nesse projeto o pessoal da Letter Society mostra que o serviço de buscas do Google pode ficar ainda mais simples. Esse projeto são vários exemplos de como a ferramenta de buscas do Google poderiam melhorar. O mais legal desse projeto é como eles conseguem enxugar ainda mais o tema do Google, puxando para o simples mas funcional. Fiz uma comparação nas imagens abaixo para demonstrar um dos exemplos do projeto, onde a equipe aproveita o espaço em branco da página para destacar o que simplismente a ferramenta se propõem a fazer.

Google Redesign - Web Social Dev - IMG Post
Antes do redesign
Google Redesign - Web Social Dev - IMG Post
Depois do redesign

Pra quem gosta de designs simplistas e tenta produzir layouts nesse padrão, esse projeto tem muitas informações relevantes!

Visitar projeto

Redesign Microsoft Online

Em um primeiro momento, batendo o olho no redesign do portal da Microsoft da pra perceber que a intenção do projeto era obter um portal com mais foco nos produtos da marca. O interessante desse redesign é que o site original da Microsoft, conforme a comparação, foi elaborado a pouco tempo para acompanhar a introdução do padrão metro aos produtos da empresa.

Microsoft Redesign - Web Social Dev - IMG Post
Design atual do website da Microsoft

A grande lição desse projeto pra mim foi a capacidade da equipe envolvida de melhorar um layout que não se mostra problemático, afinal o site da Microsoft melhorou bastantes desde que foi elaborado pela agência Paravel, que é a responsável pelo portal que está no ar no momento.

Microsoft Redesign - Web Social Dev - IMG Post
Website após o Redesign

Vale a pena conferir a documentação do projeto no link abaixo para entender os pontos que foram relevados para melhora do layout.

Visitar projeto

Apple Store

Esse projeto de redesign da Apple Store é bem legal, mas não encontrei nenhuma documentação sobre o processo de desenvolvimento dele. Aproveite para tirar suas próprias conclusões de melhoria entre o antigo layout e o proposto. Ele serviu de inspiração para o redesign anterior, da Microsoft. Demo da página na imagem.

Apple Store Redesign - Web Social Dev - IMG Post
Layout após redesign
Apple Store - Web Social Dev - IMG Post
Layout atual

Conclusão

Esses são os projetos de redesign mais interessantes que me lembro de ter visto na web, os mais inspiradores também, com exceção do projeto da Apple Store que não possui documentação mas compensa com o demo. Para quem está iniciando nessa área, web, esse tipo de atividade pode dar uma boa expandida nos horizontes, sobre como funciona processos de otimização de sistemas, que é a atividade mais executada na área.

Quem tiver conhecimento de algum outro projeto bacana, compartilha o link nos comentários, gosto desse tipo de atividade e compartilhar conteúdo é sempre bom. 🙂