DEV Community

Cover image for Shipping Home Page Cleanups
Paweł Ludwiczak for The DEV Team

Posted on

Shipping Home Page Cleanups

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)

Discussion (30)

Collapse
joshpuetz profile image
Josh Puetz • Edited on

Behind the scenes footage of @pp cleaning up the homepage! cleaning

Collapse
mzaini30 profile image
Zen

😂

Collapse
ben profile image
Ben Halpern

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.

Collapse
ryansmith profile image
Ryan Smith • Edited on

Looks good so far, nice work.

Here are some initial observations of mine:

  • The featured card's tags have underscores between them on hover. It looks to only affect the first card.
  • Without the boxes, it can be hard to differentiate between sections on the right sidebar with the current headings and links there.
  • Hover styles are a bit too subtle, in my opinion.
Collapse
pp profile image
Paweł Ludwiczak Author

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.

Collapse
ryansmith profile image
Ryan Smith

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.

Thread Thread
pp profile image
Paweł Ludwiczak Author

hah this is exactly the plan:)

Collapse
pp profile image
Paweł Ludwiczak Author

Thanks! I’ll take a close look at these issue. Some are definitely bugs.

Also, thanks for screenshots - thats always very useful.

Collapse
supunkavinda profile image
Supun Kavinda

Great work, but, honestly, I don't much like it for a few reasons.

  • The font on the homepage is completely new. And, posts have that funky font which I really like. So, two completely different types of fonts?
  • It's hard to read the sections without boxes.

It feels like the homepage is another website, not DEV.

Sorry, but that's my honest feeling. Anyone else feels that? 🤔

Collapse
pp profile image
Paweł Ludwiczak Author

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.

Collapse
supunkavinda profile image
Supun Kavinda

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:

font-family: Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua', Georgia, serif;

Home:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

So to be clear, did you intend to change the font of the home?

Thread Thread
pp profile image
Paweł Ludwiczak Author

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.

Thread Thread
supunkavinda profile image
Supun Kavinda

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?

Thread Thread
pp profile image
Paweł Ludwiczak Author

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.

Collapse
pp profile image
Paweł Ludwiczak Author

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.

Collapse
andrewbrown profile image
Andrew Brown 🇨🇦 • Edited on

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.

Collapse
andrewbrown profile image
Andrew Brown 🇨🇦

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

  • lose the background
  • bump up the contrast on whats left
  • fix the font.
Collapse
pp profile image
Paweł Ludwiczak Author

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!

Collapse
pp profile image
Paweł Ludwiczak Author

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.

Collapse
axelledrouge profile image
AxelleDRouge

Hello,
I have noticed on the dark theme a problem with the hover color on the sideboxes, which is black on black :
dev.to home page hover color

Collapse
pp profile image
Paweł Ludwiczak Author

thanks, on my todo list! expect it to be fixed later today :)

Collapse
axelledrouge profile image
AxelleDRouge

great thank you for your great job

Collapse
scrabill profile image
Shannon Crabill

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.

Collapse
mzaini30 profile image
Zen

Bug again:

Device: Samsung A20

Browser: Via

Collapse
pp profile image
Paweł Ludwiczak Author

Thanks for reporting, this should now be fixed!

Collapse
mzaini30 profile image
Zen

There's a bug:

My gadget: Realme C2

My browser: Via

Collapse
pp profile image
Paweł Ludwiczak Author • Edited on

#til we have pull down to refresh on mobile web 😯😦😧😮😲😵

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe • Edited on

The changes are quite good but some things are buggy I suppose. For example, the bar on the left has items squished together:

Screenshot

The two places where I marked should have more space.

I'm excited to give more feedback and improve DEV more. 😋

EDIT: Thank you for removing those boxes :)

Collapse
pp profile image
Paweł Ludwiczak Author

I think you may need to clear your cache or something - because I can spot on your screenshot you still have a box behind that nav which shouldn’t be there.

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe

Did it. Looks so clean now!! Thank you for the improvements :)