Michał MalewiczMichał Malewicz in Product design

Twitter UI Redesign 2021 - First Impressions

Twitter has updated it's web app with a cleaner design that makes it easier to focus on the feed.

Twitter UI Redesign 2021 - First Impressions

Apparently Twitter acqui-hiring Ueno is finally paying off and we can see some progress and some new UI ideas for the platform. And yes, that also includes a brand new font called Twitter Chirp 😎

Fleets are gone but...

While Fleets had been more of a failed experiment, and had been removed in early August of 2021, today we are seeing some more subtle, but important changes to Twitter UI design. The redesign is likely not complete, as some sections of the site still have the old style, typography and spacing, but the changes are gradually taking over the most important elements.

Clearly, the main focus for both the designers and the users is the feed. Everything is pointing towards reducing clutter around the feed, so it's easier to scroll through without distractions.

Twitter 2021 main menu redesign

Starting from the left side, the main navigation got a lot more subtle, with the icons dropping the blue color and extra styling. The selected icon is now simply filled, while the other icons are outlines. This is good, as I think the previous one looked a little bit too heavy visually.

old twitter menu design before 2021

The feed is front and center

The most prominent change is the redesigned compose window - now a lot bigger and requiring one less click to actually start engaging with the platform. I believe this is a step in a good direction, especially for power users who compose a lot of Tweets per day.

Old vs new twitter compose window

The right column

To most people, the right column is the least important part of Twitter. The new redesign removed separators in the trending and who to follow sections which allowed for more whitespace between the fonts and a cleaner, more readable design.

Right column on Twitter before 2021 redesign

Before the redesign the right column was quite visually heavy. The separators and the blue icon made it complex, while the on-hover selection of an active element served as easy enough readability improvement (to know what we're clicking at).

Twitter right column redesign 2021

After the redesign it has a lot more whitespace, and is generally simpler and cleaner. The main issue I see is that the now white cog icon is not horizontally centered over the new ... icons in each section. That will probably be fixed in an upcoming release, but the change is clearly moving more focus towards the feed, where the separators stayed to easier distinguish individual tweets.

Of course not everything is a change for the better. Some complain that the new font is a little too condensed which makes it harder to read. I on the other hand noticed how badly aligned the notification number is within the badge...

Twitter notifications badge

It's inspiring to see these changes taking place, as we can try to analyze what research and reasoning led to them and that is a good way to better understand the design processes.

What do you think about the redesign? You can let me know on Twitter! 🥳


Liked the article? Share it!

twitter iconlinked in iconfacebook icon

Get the best articles, design trends and tips right to your email!

We curate useful tools, interesting news stories from the week, interviews, special discounts and a lot more!

Similar articles

Mobile app UI Design basics: How to start

Mobile app UI Design basics: How to start

Read article
A guide to the Modern Minimal UI style

A guide to the Modern Minimal UI style

Read article
iOS 15 UI Design changes

iOS 15 UI Design changes

Read article
Designing User Interfaces book cover

100% positive reviews: ⭐️⭐️⭐️⭐️⭐️ (4.98)

“This book is the best.👏❤️ Still reading and I love it.”

@uiraygan on Instagram

Frontend Unicorn book cover

Our newest book! 🎉

Learn how to become a successful developer and earn more money!