Executando verificação de segurança...
14
AraujoFrontEndDeveloper
2 min de leitura ·

[ Debate ] Reimaginando o Tabnews com ilustrações no Figma

Introdução:

Sou membro do Tabnews desde o primeiro dia de sua vida, lembro até que no dia, os servidores cairam de tantas pessoas acessando ao mesmo tempo! Acompanhei cada detalhe e evolução desta plataforma ao longo do seu tempo de vida, e foi algo muito bom! Hoje estou aqui para compartilhar coisas que eu adoraria ver na plataforma.

Quero enfatizar que é somente uma exposição de preferências, seja com design, funções ou qualquer outra coisa. Marquei o post como "debate", pois adoraria debater mais sobre esse assunto.

Edit post:

Eu esqueci de mencionar previamente, mas gostaria de enfatizar que as ilustrações são para destacar a novidade. Por exemplo, quando estive ilustrando, não me preocupei com detalhes como cor de fonte e proporções, eu apenas ilustrei de forma grossa como eu gostaria.

Separação de posts

illustration

EU não refiz o header pois não era o foco aqui. Indo ao que interessa, ao meu ver essa pequena mudança no Design ajudaria a separar os posts ainda mais, pois no momento, apesar deles não estarem misturados e visualmente bonito, ainda são bem juntos. Além da adição do botão de favoritar de maneira mais rápido, sem precisa abrir o post.

Volto a enfatizar que é apenas uma opinião minha.

Adição da funcionalidade: Favoritar

illustration

Um dos pedidos mais recorrentes do tabnews, a funcionalidade favoritar não podia ficar de fora! Posicionei em um lugar onde julguei o melhor para todas as resoluções.

Notificações:

Esse eu não voi ilustrar, pois tentei e tentei uma forma, mas não curti nenhum dos resultados finais. Entretanto, notificações é essencial onde temos perguntas e respostas

Tags

Illustration

A criação dessa função facilitaria a filtragem de conteúdos por tag, além do leitor conseguir saber se determinado tópico é de seu interesse ou não. Para facilitar o desenvolvimento, seria interessante limitar a quantidade de tags aplicavéis para 3 ou 4, pois esse tipo de coisa facilmente quebra o layout.

Conclusão:

Essas são algumas das principais features que eu gostaria de ver no tabnews, e você? Concordam?

6
diasjoaovitor

A feature de favoritar o post faz muita falta. Já a opção de tags, eu gostaria que fossem limitadas, com opções pré-definidas como: Notícia, Tutorial, Dúvida, Debate, Dica, Projeto (ou Produto), Opinião, Literatura, Artigo, etc.

1
5
user1

Não entendo nada de designer ou UX, mas eu acho que essas bordas/containers para cada item da lista deixa o visual pesado e cansativo. Eu colocaria esse tipo de recurso em algo que mereça destaque, e não para todos os itens de uma listagem.

1
AraujoFrontEndDeveloper
Autor
Autor

Entendo o ponto, mas acredito que cada tópico mereça um destaque, não é mesmo? Entendo que é questão de opinião e fico feliz que compartilhou a sua!

Algumas pessoas realmente não curtem bordas, preferem algo mais clean, apenas o conteúdo central e direto, não estou nesse time, mas compreendo o ponto.

1
DaniloAbramowicz

Eu não acho que seja o elemento borda que está deixando a impressão de vista cansativa.

Eu acho que se fosse um tom de cinza claro em vez de azul para a borda suavasaria bastante, além disso, a fonte com branco absoluto pode ser outra das responsáveis pelo cansaço na vista.

Contraste com cores extremas causa confusão se olhar por muito tempo, principalmente no modo noite. Se usar um conta gotas nos elementos brancos do Tab News, verá que eles não são 100% branco (#FFFFFF), seria algo mais próximo de um cinza bastante claro (#E6EDF3).

1
AraujoFrontEndDeveloper
Autor
Autor

Boa observação! Realmente não é 100% branco. Não mencioncei isso no post, mas nem tudo é 100% fiel a como ficaria. Por exemplo, quando eu fiz esse design, eu não me preocupei com fontes e proporção, pois a ideia era dar destaque naquilo que eu gostaria de maneira direta, peço desculpas por não ter mencionando isso previamente! Estarei editando agora mesmo.

Sobre a cor da borda, Azul de fato ficaria show, inclusive, a caixinha de resposta, tem bordas azul e fica muito massa! Não havia reparado nisso.

3
Kuriel23

A função de favoritar curti, mas quanto ao design acho que está bem exagerado em dar destaque a essas funções, daria facilmente para colocar o favoritar em cima do "Achei Relevante" ou em baixo do "Não achei relevante", com uma estrela da mesma cor da seta e adicionar um tooltip a falar que é a função de Favoritar.

As tags sinceramente não seriam uma função que acho que seja precisa, mas se fosse para colocar seria só colocar à frente do tempo da publicação como um texto simples e normal sem dar tanto destaque também, e depois também ter uma opção para filtrar por tags.

2
2
2
pedromclaro

Muito interessante. Algumas dessas funcionalidades já estão sendo discutidas em algumas issues, quem sabe em breve! Especialmente a de favoritar publicações, será muito útil!

Pessoalmente gosto muito do design atual do TabNews; ele realmente ressalta os textos.

É claro que eventualmente será necessário modificá-lo, justamente para incorporar essas features.

2
pedromclaro

Tentei editar meu comentário, no entanto não consegui. (estou utilizando somente o teclado e o botão "Editar" não está acessível via teclado)

A respeito das notificações, considero uma excelente ideia. E talvez até um sistema para receber notificações sobre novas publicações de usuários que tenhamos escolhido previamente? Isso seria interessante...

[Edit]: Problema resolvido! Edições (e exclusões) de comentários ou publicações agora acessíveis via teclado, obrigado!!!

3
FelipeBarso

Tentei editar meu comentário, no entanto não consegui. (estou utilizando somente o teclado e o botão "Editar" não está acessível via teclado)

Ótimo achado pedromclaro, obrigado por informar! 💪

Já vou subir uma correção! 🤝

[Edit]: PR #1682

Se encontrar algum outro bug, pode reportar no repositório, por favor! 👍

2
brunogonzaga

Favoritar, tags e notificações sempre são bem vindas para mim! Curti bastante a ideia.
Mas a separação dos posts eu (pessoalmente) prefiro bem mais a forma ideal mais minimalista, me pareceu um pouco carregado com as bordas, nisso eu não mexeria.

1