DEV Community

Cover image for A New Look for git.rela.dev
TheCommieAxolotl
TheCommieAxolotl

Posted on

A New Look for git.rela.dev

Brought over from the Rela blog.

As of this week, the RelaGit site has been overhauled with a totally new appearance.
The old style of the site was a bit too homogeneous, and it was decided that it lacked some of the elegance and confident design that was wanted to convey.

As you can see in this old deployment, the old landing page lacked both the brand identity and confidence. But let's break down the hero section:

  • The Navigation Bar: There's only one way to phrase it, weak. It lacks a strong gap between items and therefore feels cramped, it is also always at full white, which makes interactions feel uninteresting and not considered. In the new design, the bar sits back from the screen, taking more space but feeling less intrusive because of the dimmed colors and the more considered spacing.

  • The Hero Text: Sites that have their product name as their hero text don't convert well. The too-dim subtitle also didn't help, it looked like an afterthought. In the new design, the hero text is a description of the client, and the subtitle is baked into the hero. I've also scrapped the call to action button in favour of a linear design, with intuitive call to actions later down in the page.

  • The Image: The one thing that remained mostly the same is the image, it's still a simple photo of the client, although I've updated the diff that is shown in the screen to give a more complete view of the client's look.


Along with the obvious changes, I also replaced the disabled download button with a waitlist signup field. By entering your email, you will be added to the waitlist for the client, and you will be notified when it is ready for beta testing.

Continued Development of the client

Don't worry, this hasn't stopped development on the client, this month alone has seen the below changes:

  • There's now an integrated branch picker, which dynamically responds to any changes made remotely or locally and simplifies the many commands that can be used to interact with branches.

  • Logical a11y flow has been improved throughout the app, with the simplification of settings, auto-focusing of dynamic elements, and the integration of more focus traps.

  • The app now has a proper onboarding process, with a beautiful first-open screen, and a multi-step, hands-on tutorial that guides you through the app's most common features.

The new branch picker, with a branch being created.


That's all for now, check out the new site today, and sign up for the waitlist!

Au revoir! 👋

Top comments (0)