TL;DR
Today we're shipping some small UI changes for the home page. Let us know if you can spot any bugs or issues since changes might have affected other views too.
A couple weeks ago the DEV team started looking into possible improvements for the DEV home page. We asked you for feedback and opinions and OMG my product designer soul was like 🤩🤩🤩🤩🤩🤩🤩
TL;DR of what happened
We had this idea to do a home page makeover. You gave us tons of input around what we should be focused on, tons of ideas for features and improvements, and tons of great feedback. Here's a bit more detailed recap:
For the Home Page itself, we decided to split our efforts into three separate "projects": 1) Low Hanging Fruits, 2) Feed Improvements, and 3) North Star Vision.
Shipping Low Hanging Fruit 🚢
Today we're super pumped about shipping just a tiny bit of what we have planned. We made some small UI optimizations that are mostly visible on the home page but also on other views. Some of the improvements include:
- De-emphasizing sidebars – there will be fewer "boxes" in the sidebars so that you can better focus on the feed itself. It helps us build some layout hierarchy.
- Spacing – it should be less random now.
- Typography – font sizes, line height, and colors should also be less random :D
...I guess we could call it "DE-RANDOMIZING DESIGN". That would be a catchy title for a medium DEV post, huh?
It's technically not much but visually, it may feel different. Give it a couple days to get used to it. And remember it's just a first step.
What you may notice 👀
This update is more minimalistic, and may even look less DEV-ish. Some of you pointed out that that DEV’s eclectic, glitchy & imperfect style is 100% on-brand, so why does it look like we’re scrapping all of that? Don’t worry, we see this. Although we love this “style”, a lot of it is caused by lack of rules and guidelines especially in design. We’re cleaning it up now so that we can re-incorporate more of the DEV brand of “organized disorder” over time. Plus, this will let us build great features and improvements efficiently in the future. Trust us when we’re saying that your initial impression will just be a temporary feeling.
What's next?
Of course, we still want your feedback. If you see any issues or bugs, please let us know either here or in GitHub.
We're also looking at some metrics to see if we didn't screw up anything. If we notice that "omg signups went down by 50000%" then we do git revert or whatever you do in that case (hey, I'm not a developer!). Also, I could be fired then 🤷♂️.
It's not over.
This is just a very first step towards where we want to be. The whole team is working pretty hard at defining that North Star vision, not only in terms of features, but also in UI.
Cheers!
(Cover photo by JESHOOTS.COM)
Top comments (30)
Behind the scenes footage of @pp cleaning up the homepage!
😂
Really exciting to see this shipped!
It's the first step in a lot of small changes which will get us closer to a "north star" in terms of usability and delight.
We'll keep plenty of charm from the design as is, but remove the clutter and eye-strain.
The work from @lisasy and @pp has been fabulous so far.
Among additional core changes are modifications to the home feed which will help make it more relevant to everyone's technology tastes and interests on the site.
Looks good so far, nice work.
Here are some initial observations of mine:
We've added new hover styles, should be much more visible now :)
As for boxes in sidebar (tl;dr: we added dividers between each section. this is all temporary though. we may bring boxes back at some point but in slightly different form)
One tiny change we've just delivered is adding subtle divider between each section in sidebar. That should help differentiate them, at least a little bit. Still no boxes, but the current plan is to bring them back at some point but in slightly different form. So why no boxes right now? We had to do some cleanups first 🤷♂️ so it's like intermediate step.
Also, have you thought about switching back to default theme in UX settings? It's not that different from you current theme but it does few things a little bit better :) Also, at some point we may consolidate these two themes anyway.
Thanks, looks much better!
I have thought about switching to the default theme, I just dislike the tan header since it seems to clash with the other colors. But I'm sure that is on your list of things to address. I agree they are fairly similar and should probably be merged to reduce maintenance on both.
hah this is exactly the plan:)
Thanks! I’ll take a close look at these issue. Some are definitely bugs.
Also, thanks for screenshots - thats always very useful.
Great work, but, honestly, I don't much like it for a few reasons.
It feels like the homepage is another website, not DEV.
Sorry, but that's my honest feeling. Anyone else feels that? 🤔
I hear you. As mentioned in the post - this work is definitely a step towards some bigger changes so I understand it may feel a bit awkward right now.
In terms of font - the actual font face should be the same (if its not, its a bug and I’ll check it). What has changed though is sizing and weight. We’re on the way to build a typography system actually so it should eventually be pretty consistent across all views AND - what’s more important - should feel like you’re on DEV no matter what view you’re looking at.
Also, you’re right - these changes are mainly for home page right now but other views are in the roadmap as well.
Great! I'm glad to hear that.
Font: I tried clearing cache but still the posts and homepage have two different fonts.
Here's what I see in the computed styles.
Post:
Home:
So to be clear, did you intend to change the font of the home?
Oh sorry, I misunderstood you. Actually that font was always different :) We haven’t changed ANY font face, just weights and sizes.
Btw. You can adjust font of article in your UX settings page.
Previously the fonts in the post and the homepage were the same.
Does changing the font from settings change the font of both of them? or just posts?
Just posts - it’s for reading experience. Some people prefer for example serif fonts. But having this choice doesn’t make much sense for other typical UI elements.
One tiny change we've just delivered is adding subtle divider between each section in sidebar. That should help differentiate them, at least a little bit. Still no boxes, but the current plan is to bring them back at some point but in slightly different form. So why no boxes right now? We had to do some cleanups first 🤷♂️ so it's like intermediate step.
Not sure if there was a change to the font but new design is really hard on my eyes.
What it looks like is we went from having a busy page to having a busy unreadable page.
You need to scrap that background. Without the boxes, it has really brought the contrast down and we need these grey fonts bumped up.
Here's just me killing the BG
This is really good feedback! Thanks a lot! Yea, we gonna ship some improvements in a day or two with other fixes as well. Improving contrast will be probably one of these fixes!
Once again, I really appreciate the feedback! That’s exactly the kind of feedback I was hoping for!
One tiny change we've just delivered is adding subtle divider between each section in sidebar. That should help differentiate them, at least a little bit. Still no boxes, but the current plan is to bring them back at some point but in slightly different form. So why no boxes right now? We had to do some cleanups first 🤷♂️ so it's like intermediate step.
tl;dr: we've just added subtle divider between sections in sidebar. it doesn't fix what you're talking about but it's step forward. we're planning bringing some different style for boxes though but we had to first kill them to clean up few things.
Hello,
I have noticed on the dark theme a problem with the hover color on the sideboxes, which is black on black :
thanks, on my todo list! expect it to be fixed later today :)
great thank you for your great job
I noticed the changes when I logged in today. They look good. It's like a slightly more grown up, but still cool version of the DEV glitchy vibe you were talking about.
Bug again:
Device: Samsung A20
Browser: Via
Thanks for reporting, this should now be fixed!
There's a bug:
My gadget: Realme C2
My browser: Via
#tilwe have pull down to refresh on mobile web 😯😦😧😮😲😵Some comments may only be visible to logged-in visitors. Sign in to view all comments.