TL;DR You may have started noticing more updates in the UI recently. And we have just updated the header!
We've been working pretty hard on building new awesome features and improvements. Some of them are meant to be invisible yet super helpful: feed improvements or upgrading some of our infra. But we've also made some changes that affected visuals.
Frontend Codebase
Like in many projects, the front-end part of a codebase is... well... not ideal. We have tons of CSS files, lots of spaghetti code, duplicated styles, and much, much, more...
It's a classic scenario: the feature or view needs to be built. The Dev or Designer decides to write super short and simple front-end code to ship a feature fast. And 2000 lines of code later you just can't go back :)
Taking a more holistic approach is actually what we've been trying to do. We've started building our own Design System. It includes not only design guidelines, but also front-end documentation of how to use the styles and components.
Overall, this is our approach (I will write more about our Design System in the future):
- We now have real components and views built in SCSS (well, just a few of them, but that's a good start!).
- We also have utility-first classes (TailwindCSS - does that ring a bell?) ready to be used anywhere in the markup.
- At the same time 95% of our code is legacy code, not following any rules or guidelines. We will be slowly updating that alongside releasing new style.
Which is a good segue to...
New header
One of the very first elements that we've decided to update is our header. You may notice it looks slightly different than couple days ago (if not, hit the hard refresh... If still nothing, I could have broken something and we had to roll it back :D). It's just a refresh, not complete redesign or anything. But we hope you'll like it! There's much more coming and this header update is just a teaser.
Top comments (29)
Woo!! One hard refresh away to a cleaner design ✨
I was working on an article when I saw the notification for a new post, then I clicked it and it seemed to be that the header just disappeared until I took a second look and realized it was still there. Then I taught for another second that maybe the CSS files did not download completely
I realized this was not an error after I read the section in the article that the header has indeed been redesigned then I took a second look and it was only then it did occur to me that the header was fine after all.
When I realized this I said to myself that the interface is becoming whitish and certain elements are almost indistinguishable from each other unlike before when I could easily tell stuff apart. When it comes to the new header redesign, the only thing that stops it from blending with the rest of the page is the border at the bottom.
At this point, there was only one thing I was thinking of — contrast. I launched aXe Firefox accessibility extension and analyzed the page, the result showed
98known issues of which52were contrast related issues.I taught the tool was exaggerating the figures and I launched the Accessibility panel in Firefox and checked for all issues the results are almost the same.
Just to confirm the result I took the interface for a spin in WAVE using the Firefox extension, it reported the results in the image below,
52were Contrast Errors.You mentioned in the article:
and also:
I believe this will change but for the main time, I will be switching to the Pink UI theme because I can easily differentiate between page elements particularly the header and I WAVE'd the page it shows just 2 contrast error. I think am going to be fine with this.
Keep up the good work. Cheers.
Hey, thanks for this thorough analysis!
You’re 100% right about contrast - it’s fair to say that we have issues...
But most of them are actually legacy and the header itself didn’t really change much in these numbers. In fact, part of this update was about improving contrast in many places - so I’m actually glad you didn’t do this analysis couple weeks ago... :)
We can’t fix everything right away so it will take some time. But we do have plans for improvements and updates to other elements and parts of the DEV as well... But you know - one step at a time.
Contrast is definitely on top of our priority list!
Once again, I really appreciate you doing this contrast analysis - it’s awesome!
Rome was not built in a day.
Thank you and you are welcome.
Love the new design. The new colorscheme has certainly improved things a lot.
Any plan to update the dark theme colorscheme to better match the light theme?
Absolutely yes, its on our todo list👍
Yeah, the UI has been looking more polished! But also the UX has been improved too, things just feel snappy.
My favorite part about the website is that it's fast to scroll through people's replies (have you ever tried clicking on nested replies on medium? that's my biggest frustration on that website...every nested reply is a new page redirect, it's near impossible to follow conversations there)
Overall I really like the new toolbar design, feels clean and the icons are really neat.
The only things which I'm not yet a big fan yet, but of course that's personal, is the color "red" for the notifications. The first times I received some I was like "what? there is an emergency?". To me "red = error, problem, emergency". But the good point is that I notice the notifications all the time now and also not everybody see the colors the same way, so I gonna become used to it of course 😉.
Again great job!
Yea, to be honest I'm not 100% sold on red for notifications :) We're still evaluating whether or not it makes sense...
As you said - it does its job pretty well since it supposed to steal user's attention :) But on the other hand it's not emergency, which red color usually indicates. We'll see how it performs and come back to this a bit later to evaluate the decision.
Yes, that also came in my mind very first. Commented in another thread. Blue was better for me :/
Much cleaner, love it!
Very nice ! Good job!
Edit : OOoh alerts so cool!
It's much cleaner, great work!!
Very nice! Utility-first classes sound very interesting and I am curious how it will work in markup, I am a fan of Tailwind.
The contact area for opening the header is reallly small. You've got a few pixels to scroll through, and it collapses if you hover over the bell icon. Is there any way to make the contact area bigger so you have more space for the cursor to reach it? I'm finding myself having to try multiple times to open it 😞
Yea, I'll take a look if we can improve it a little. In the meantime you can also click on the avatar which should make the dropdown visible too until you click somewhere else. It's not a fix of course but maybe it will help you a lttle.
Thanks for the quick response Pawel! Ahhhh! I literally didn't even think to click it.
That's useful — just thought I'd give you a heads up and some feedback from a user perspective. Really good job though, it looks slick and good luck with the refactoring!
Another option would be to debounce the scroll off event to give you a second's grace.