Executando verificação de segurança...
15
ribas3
1 min de leitura ·

🔥 Reconceito do design do TabNews (Não oficial)

Apresentação 👋

Prazer, me chamo Ribas e gosto muito de design e front-end no geral. Justamente por conta disso eu curto brincar um pouco no Figma de vez em quando quando eu tô inspirado. Eu também tenho algumas coisas no meu Github e um portfólio online que fiz há algum tempo.

Projeto 👨‍💻

Eu vim aqui compartilhar uma versão do TabNews que eu desenhei baseado num tipo de site que quando eu bati o olho, lembrei daqui instantâneamente. Fiz duas versões: uma com header e outra com sidebar, ambas com tema claro e escuro. Vale observar que a visualização da versão light pode ser um pouco melhor pelo álbum no imgur.

Site publicado 🚀

Eu resolvi fazer o site pra vocês terem uma noção de como ficaria mais ou menos. Eu utilizei Next.js e utilizo a API do TabNews para retornar os tópicos mais relevantes. Você pode acessar o site clicando aqui.

Site com header ✨

Imagem 1Imagem 2

Site com sidebar ✨

Imagem 3Imagem 4

Conclusão 💪

Enfim, não é nada muito trabalhado, só fiz para ver como ficaria na versão dessa comunidade e porque curto esse estilo de design minimalista. Espero que gostem.

Carregando publicação patrocinada...
3
marcovito

Adorei o reconceito! O minimalismo aplicado à ux do Tabnews agrega muito no sentido de tornar o site numa espécie de "oásis" para os(as) usuários(as), partindo da premissa de que o TabNews tem como foco o conteúdo e de quando em quando são conteúdos extensos.

3
1
2
1
ribas3
Autor
Autor

No caso, é só um protótipo. Utilizei o Figma para desenhar. Quando eu for desenvolver, provavelmente vou utilizar React.

2
CristianoSword

Será que não seria interessante o sistema de temas? nem que fosse via plugin mesmo.
Lembro que MUITO antigamente os browsers implementavam seu proprio gerenciador de estilos.
Tenho saudades do netscape e do recurso de mapa, que permitia botoes na propria interface do navegador para navegar pelo site.

1
ribas3
Autor
Autor

Definitivamente é uma ótima ideia! Cada pessoa tem seu gosto e aposto que elas iriam adorar deixar a plataforma com a cara delas. Já fica no radar para futuras atualizações! 😁

2
2
1
2
2
2
Jevilson

Ficou muito bonito as duas versões, curti mais com o Header😀
Poderia deixar a logo original, mas de qualquer forma, foi um ótimo trabalho

0
Jevilson

Fiquei com um pouco de dificuldade de ver as imagens quando desço a página kkk
elas ficam sumindo. Será que só aconteceu comigo? 😵🤣

1
ribas3
Autor
Autor

Aconteceu o mesmo comigo, kkkkk. Seria legal se o Tabnews tivesse aqueles estilos de grid de imagens quando tem mais de 1 foto. A propósito, valeu pelo feedback!

2
filipedeschamps

Também aconteceu comigo e investigando notei que as imagens são bem grandes, estão com uma resolução de 12328×14528.

edwardribas talvez seja interessante redimensionar elas e hospedar novamente 🤝

1
2
filipedeschamps

Edward, agora a resolução está tão baixa que não está constribuindo com o quão "crisp" o seu layout é 😍

Você colocou agora uma resolução de 771×909 e sugiro aumentar para uma largura de 2000 pixels para ficar uma foto nítida até em equipamentos que possuem uma densidade maior por pixel.

2
1
1
MathAlvesFrontend

Muito legal! É possivel fazer a propria versão do TabNews? Digo, puxar a api deles e construir o próprio editor para as publicações? (Eu sei que não faria sentido poder fazer isso dito que o intuito são as pessoas acessarem o site), mas seria legal cada um poder fazer um repo com sua propria versão do tabnews!

1
ribas3
Autor
Autor

Te contar que já pensei nisso também! Realmente seria muito da hora. Penso em fazer pelo menos uma páginazinha que mostre os posts mais relevantes mais pro futuro. É algo bem bacana pra praticar.

1
1
alan2cipher

Pode fazer isso sim, como disse o filipe:

Todo TabNews foi construído através de APIs públicas e você pode consumir elas da forma que desejar

Mas eu não recomendo, utilizar o client original é o motivo de trabalharmos nele.

1
1
1
1
1