🔥 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 1 Imagem 2

Site com sidebar ✨

Imagem 3 Imagem 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.

marcovitohá 2 anos

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.

FelipeBarsohá 2 anos

Que legal @edribas! 👏

Seria muito bom ver você contribuindo no repositório, seja com o design ou no código. 😃

ribas3há 2 anos
Assim que eu conseguisse estabilizar minha rotina, seria definitivamente um prazer! Fico feliz que gostou!
YanZoldyckhá 2 anos

ficou top mano, fez em que?

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

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.

ribas3há 2 anos
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! 😁
maycontaniihá 2 anos

Parabéns ! Gostei bastante.

huogerachá 2 anos

Muito massa Ribas! Gostei bastante! \o/

ribas3há 2 anos
Uhul! Fico feliz que gostou! ✨
EduardoSpekhá 2 anos

Ficou muito bonito! Design minimalista é bem elegante. Agradável aos olhos. Parabéns!

igormbeckerhá 2 anos

Parabéns, ficou muito bom!

Jevilsonhá 2 anos

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

Jevilsonhá 2 anos
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? 😵🤣
ribas3há 2 anos
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!
filipedeschampshá 2 anos
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 🤝
ribas3há 2 anos
Pode deixar! Valeu pelo aviso. (edit: corrigido!) (edit2: corrigido de novo rs)
filipedeschampshá 2 anos
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.
betovawnhá 2 anos

Só por ter tema escuro nativo eu já adorei kkkk aliás, único defeito do TabNews atualmente, pq de resto é perfeito S2

microw4vhá 2 anos

Show! Os dois modelos ficarm muito bons.

MathAlvesFrontendhá 2 anos

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!

ribas3há 2 anos
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.
MathAlvesFrontendhá 2 anos
Sim, ou fazer alguns filtros com palavras chave no título!
alan2cipherhá 2 anos
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.
atimilsonhá 2 anos

Parabéns , Muito Bom !!!

rphlfchá 2 anos

Me lembrou o Tumbler. Talvez tenha sido por conta do “T” que usou. Acho que era a mesma fonte que eles usavam.

milenanetohá 2 anos
Verdade! Lembra mesmo
Landowskihá 2 anos

Parabéns, ficou no estilo que gosto também, menos é mais.

Eu acho que o header ficaria mais legal com a cor diferente, como na sidebar.

ribas3há 2 anos
Apliquei e também curti! Ficou bem legal. Vou editando a publicação conforme eu for aplicando as alterações!