Redesigned website

Hi there! I was on a holiday break for two weeks and I realize you may have forgotten what is this newsletter about. Some of you also recently joined and this could be your first email. Welcome!

I'm Vadim and I'm building Lotus in the open - a Mac app for managing your GitHub notifications. In this newsletter I share my progress and things I've learned while building this thing.

This week I have an exciting new development to show you - a redesigned Lotus website! You can check it out here → getlotus.app.

Warning: Lots of megabytes of GIFs ahead

Boring old design

Here's how the old one looked:

I liked the simplicity and the focus on what Lotus does immediately when you start reading the text. I put up that page as a place to introduce people to Lotus and let them sign up to the newsletter you're reading now. But, I understood it wasn't attractive enough. There's no signal about how this app could look and work like. You'd have to go through a bunch of newsletter archives to understand what Lotus is all about.

I knew I would have to redo that website at some point, but I kept moving it to the back of my todo list in favor of working on the app itself. Fortunately, I built a ton of stuff over the holidays and I felt like it was time to focus on the new landing page.

So, here it is.

Cute new design

I deleted the old one and started from scratch. I admit I'm quite happy with the result. It's not perfect, I will still iterate on it, but I feel like it looks good for now.

1. Logo

Even though the old logo was animated too, it felt kind of unnatural and mechanical.

I didn't like that the first leaf was visible right away and only the other ones were animated with a boring transition. The updated logo looks the same at the end, but I changed the initial animation a bit.

I sprinkled in a simple opacity + scale CSS transform to make it more "alive".

@keyframes appear {
	0% {
		opacity: 0;
		transform: scale(0.6);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.logo {
	transform-origin: bottom center;
	animation: appear 1s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}

Nothing fancy here, but I think it made a difference.

2. Handwritten-like underline

I was kind of afraid of that one, because I have no idea how Bézier curves work. So I ended up tweaking the numbers until I got the shape I was looking for.

It's a single SVG <path> absolutely positioned relative to text and stretched to full width. I also applied a gradient to simulate hand pressure as you're normally drawing a line. I'm not going to pretend I applied physics perfectly here, but it looks more or less right to me.

3. App screenshot with dark mode

The new website has a big screenshot of the app in the header section. I thought it would be cool to switch that screenshot between light and dark mode together with the entire page.

Again, the tech here couldn't be simpler! It's two <img> elements for light and dark mode. One <img> is visible only in light mode, another only in dark mode. I know it's not efficient because both images are loaded regardless of the theme. But at least it results in smooth transition between the two.

One way to improve the loading time here would be to detect which screenshot wouldn't be shown on page load and load that image asynchronously. Something to take care of next week!

4. Animated demos

Throughout the page you can see interactive demos like the one below for each major feature: Inbox, Screener and Do Not Disturb. All these are made with Framer Motion. I saw what kind of cool things Mailbrew team did with it and wanted to try it out myself ever since.

Interactive demo is more delightful than a looped video, but I wonder if it will be just as informative. Time will tell.

5. Personal touch

I wanted this landing page to be a little more personal by sharing how Lotus was started. It may not be interesting to 100% of people, but I myself enjoy seeing other indie creators share their story. That's why I added this post-it note at the end of the page.

When I tweeted about this idea, Netto Farah responded with this:

This is my favorite part of the website. There's something special about "investing" in products with a personal touch. You feel compelled to help the person on the other side.

I agree with Netto and I couldn't have said it better myself. I love learning about the human behind all those pixels or lines of code and discovering their passions and stories.

6. Reading newsletters online

I copy-paste newsletters from Buttondown into Markdown files in emails folder. Then I use Next.js's static site generation power to list that folder and render the "Archives" section.

A separate page is generated for each email in the archive, so that you can read them online without digging in your inbox for the past issues.

7. Dark mode

Thanks to Tailwind CSS I practically got it for free. The only issue I stumbled upon was that prose class didn't support dark mode, but I quickly found a GitHub thread with a ready-to-use solution. Wonderful tool, wonderful community.

Hope you enjoyed this rather graphical newsletter! If you've read this far, you might as well check out the new design yourself at getlotus.app. It looks much better live than via compressed GIFs.

I want to apologize for shifting off my usual Sunday schedule this time. I ran out of time yesterday and I didn't want to rush it just to stick to the habit of sending it out on that day.

Starting this week, I'm back at working on the app itself! I want to experiment with two ideas:

Separation between notifications from your work-related stuff and your personal repositories. Lotus has a Do Not Disturb feature already to hide work-related things after 5pm and on weekends. I'm now thinking about hiding personal notifications during work hours too to avoid more distractions.
Read and reply to multiple notifications at once. Thanks to Caleb and Sindre for this idea! It could look & work like HEY's "Focus & Reply", but it's too early to tell. I haven't had time to prototype it yet and think it through.

See you next week! Stay safe.

– Vadim.