#landing-page

Creating thymer.com

Wim • @wcools • • Part of Day 23

On Day -1, before we actually started, we wrote a bit about creating the website you’re reading now. Now that the landing page for the app we’re building is live, I thought I’d do the same for thymer.com.

With each new design, I usually start with sketching out some ideas on paper. What elements should go on the page, what message do we want to convey.

Because the product itself isn’t ready yet, we can’t really have a video or demo of the product on the page. That’s why I made a few mockup screenshots before.

I also worked on a few different headings and subtitles to try to make it clear what the product is about and what the pitch is. Hopefully the main heading, H1, will tell our initial target audience why this might be interesting in 5 seconds.

For the look and feel of the site I was thinking about dark mode. It seems to be popular with many apps our likely initial users are familiar with, and it fits well with other related software such as IDEs, editors and terminals, and in general many modern apps too.

This was actually the first time I really worked with just dark mode, so I started reading a few concepts first, such as this page. The book RefactoringUI is a great resource too (for anything UI design really).

With that, I picked some basic colors for both the screenshots and the site. Rather than going for 100% black or 100% white, one trick I often use is to pick a few colors, and then overlay them with another div, position: absolute with a dark background color (and light foreground color) and alpha-blend them.

As for the font, just like in the product and the screenshots, using some accents with a monospaced font felt like a good match, so I picked those for the H2 sub-headers.

This looked like a good start but other than the screenshot it looks rather boring, so time to think about adding some colors and other elements. When thinking of the monospaced font a bit more, I thought maybe it would be a fun effect to add a bit of the glow from those retro terminals:

Another technique I always like to use to add some pizzazz while being able to keep the rest of the page simple is to use some sort of gradient or colorful image as a background for the H1 heading.

h1 {
   letter-spacing: .1px;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   background-image: url(some_cool_picture.jpeg);
   background-position: 0% 20%; 
   color: transparent;
   ...
 }

I usually just browse on Unsplash, and search for something like abstract or certain color names. I then use the image as the background-image with the background-clip: text effect, and see what it looks like.

In the end I didn’t use any of the images directly, but it gave me some inspiration for a gradient, which I then generated with some online gradient tool (I think it was https://cssgradient.io/, but there are many of them).

Next up was adding a call-to-action (we want to build a launch list for the private beta) and some more details/benefits about the product we’re building. The CTA is nothing special, just a form and hook it up with an online form provider.

Even though we have to keep the first version of the product small, just the flexibility of the core editor component gave us quite some ideas of cool use cases users might use the product for. I first I thought of adding a detailed “tour” highlighting all of those, but that would take way too much time. Especially because we can’t easily take screenshots from the product itself, as it’s not ready yet. Plus our main goal is to just generate some initial interest. We’ll be able to let the product speak for itself and let users discover all the extra’s once it’s ready.

I picked 4 core parts of Thymer to highlight: how it being an editor of sorts is a different approach from classic lists/kanbans, how we think tools like IDEs are a great match for managing big plans, how we think this is better for planning too, and highlight the fact that Thymer also works in teams.

To make the page less text-heavy, it would be nice to have something accompany the text explaining the benefits. Instead of screenshots or animated gifs (which again, we don’t have yet) or drawing something (which would cost time), I thought using some UI elements within the text might be interesting. They should be instantly recognizable for our users, help explain what it is and make it look a bit more colorful. Plus, it’s easy to make, and there’s a lot on our todo list right now.

I probably rewrote the entire thing at least five times, but that’s just how that process works ;), see the messy work in progress screenshot:

Eventually I settled on four “tiles” with a few animations/UI elements in each. The autocomplete menu will show the actual date of tomorrow at the time someone visits the page. The “someone’s typing” animation will probably be instantly recognizable to show the editor supports multiplayer. Very little work to describe things with less text and more colors.

I also added a quick summary of why we’re making Thymer at the end. I’m not sure if it adds a lot, but if we’re going to explain to anyone what we’re doing, a valid first question would be “seriously, another to-do list?”, so this would hopefully explain that part 😅. Added the blinking cursor effect to emphasize the editor part again.

I thought it looked OK enough for a V1. Maybe this was the point I should have just shipped it ;), but I still wanted to add some cool effect above the fold. In one of the messy paper drafts, I had added a few lines around the product screenshot, which were meant to be some bright colors popping out against a dark background.

I looked around in all the abstract photos I had found on Unsplash, and one in particular (https://unsplash.com/photos/gbY7XxB8Pzs) was a great fit with the colors of the app and the landing page. Using the same rgba(0,0,0,0.X) trick as for the color palette, I got it to blend in a bit more. To make it more dynamic, I added a very subtle animation to it by very slowly making it scale. Also gave the screenshot a subtle shadow to work better with the new background.

@keyframes pulse {
  from { transform: scale(1.0); }
  to { transform: scale(1.2); }
}
.pulse {
 animation: pulse 6s linear infinite;
 animation-direction: alternate;
}

The last part was making the website responsive. I just quickly hacked together some media queries using Inspect Element and checking which elements didn’t look good on smaller screens. It was mostly adding a bit of extra padding when not showing the benefit blocks next to each other, and making sure the desktop-size screenshot would stay large and scrollable so phone users can see the details too.

All in all the landing page is just a single .html file with a few lines of inline CSS/JS, and a few images.

And that’s the landing page. Now time to continue the work on building the actual thing, which is a tiny bit more complicated 😉

Animations

Wim • @wcools • • Part of Day 20

As I’ve been working on the landing page, I’ve tried to sneak in a few animations here and there. On the one hand it’s really easy to overdo it, but done right it can really help to give your product a bit of personality. Software by itself is not terribly exciting, and using animations (and sounds for that matter) make it a bit less boring, more fun to use and make it spark joy.

There’s this fun talk about how adding small juicy effects can really make something a lot more interesting. In the case of the talk it’s about games, but I think the same applies to all kinds of software and devices we use everyday. Life’s too short for boring, and even software should be fun to use, so there’s a lot we can learn from games and movies here.

Of course the amount of work we need to spend on animations, sounds and lighting is absolutely nothing compared to the huge projects needed in games and movies.

The only thing we need is a few subtle animations here and there, and just using plain CSS3 this is super easy. If you’ve worked with CSS before this isn’t news, but if you still remember the old days of the web it’s amazing how much you can do nowadays with just a few lines and it actually works in all browsers. Random animation:

.. took 1 minute and just a few lines of CSS:

<style>
.box {
display: inline-block;
position: relative;
transform: translateX(0);
width: 30px;
height: 30px;
background: purple;
animation: slide 2s infinite;
animation-direction: alternate;
transition: opacity 1s;
opacity: 1.0;
border-radius: 50%;
}
@keyframes slide {
 0% { transform: translateX(0); opacity: 0; }
 100% { transform: translateX(300px); opacity: 1.0; }
}
</style>
<div style='width: 100%'>
<div class='box'></div>
</div>

On Day -1 I already wrote a bit about the animation on the front page for the 80-Day Startup blog. For the landing page for Thymer, I’ve been experimenting with adding a few small animations to help explain the concept better on an otherwise completely static page (we only have a “fake” screenshot at this point).

For example, to convey the concept of an editor, adding something dynamic like a blinking cursor makes it immediately recognizable. And because we’re building our own custom editor, even something as simple as the cursor we can customize and make its style part of the brand in a way.

@keyframes blink {
    0% { opacity: 0; }
}        

.cursor::after {
    content: "";
    width: 8px;
    left: 3px;
    height: 22px;
    position: relative;
    top: 3px;
    background: purple;
    display: inline-block;
    animation: blink 1s steps(2) infinite;
}

Another feature in Thymer we’ve been thinking of is flags. Rather than just having a checkbox on a line if it describes a task, this way you can add a flag to a task to assign some status to it (like important, working on it, blocked, and so on). Because there’s many things you can track this way, I thought it might be fun to have a kind of animation where one flag morphs into the next.

Animations are also really useful to show what’s happening without having to explain it with a bunch of text. For example, the idea is that Thymer will support collaborative editing, where you can work together with people in a team. When multiple people are typing at the same time, we don’t have to add a lot of clutter like “John is typing…”, but can simply use a convention we’re all used to now, animated dots:

Anyway, back to work on finishing the landing page! I’ll try to get to a more detailed write-up of all the steps building it next week.

Ending with another fun demo video (I already shared it before but it’s just a great example of how paying attention to making something mundane more interesting can help your product stand out)

Some landing page dos and don’ts

Wim • @wcools • • Part of Day 15

As I’m working on the first landing page version for Thymer, I thought I’d write a bit about some observations about what (not) to include.

The H1

The H1, i.e. the main title, named after the <h1> HTML element for a large title. This is the elevator pitch when you only have one floor to explain. You have 5 seconds to prevent someone from closing the browser tab. What are you doing?

You need to come up with a way to explain your product in just a few words. No need to cram all the details in one sentence, but just say what it is so someone who is in your target audience might care enough about it not to close their browser.

❌ Use fuzzy language, such as “We deliver results and synergize your business”. I have no idea what that even means. Generic things like “Work better together” or “Market faster” sound more specific (oh it’s about productivity or it’s about marketing!), but that still mostly works if you’re a big startup. Actually I’m quite sure it doesn’t work, but at a certain size it just doesn’t really matter any more what your H1 is. Be more specific than that.
✅ Use your own voice. Read the title out loud. If that sounds super awkward and you wouldn’t use that in a conversation to explain it to a friend, try picking something which sounds more… human.

A good call (to action)

The call to action or CTA is the main action you want the visitor of the page to take. Something like “start a trial” or “sign up for the mailing list”.

✅ Make it easy to find, and prevent too many distractions pointing the user somewhere else.
✅ Make it easy to do. If you just want to collect an email address for users who are interested in your product, don’t create a link “sign up” to a new page where users need to fill out a form. Add an input with a button next to it on the page and remove all the friction.
✅ Think about the simplest action you really need. If you want people to sign up for your service, don’t make it “Contact us”, let them try the service!

Answer concerns

Ideally you should answer any concerns a visitor/potential customer might have before they even have time to worry about it.

When you’ve bought something online (either a product or service) from a company you didn’t order with before, you have probably tried to do a bit of research about them. Can I trust them? Will they actually ship the product? Can I trust them with my data?

Don’t make people search for this. They will want to know the answer anyway, and if you don’t provide it, they’ll leave your site and search for it (and might not come back). Especially in a market which is as impersonal as software, it helps to know the faces behind the product.

Depending on the stage of your product, the questions users might have are different. The security features of your data center are not relevant when collecting email addresses for a prototype, but you need to include those details when you’re selling to larger companies. Think about the kind of person your visitor is. What are they thinking, what are their concerns? Answer them before they worry about it.

Bonus don’ts

Ending with a few don’ts which I’m personally not a fan of, so I’m trying to convince people to stop these 🙂

❌ Tracking! Nobody likes to be tracked. And thanks to GDPR and friends, tracking now also has a real cost (next to making your site slow!). You can simply collect some simple anonymized traffic statistics using privacy-first analytics services.
❌ Obsessive A/B testing. Related to the previous point, but if you don’t have large amounts of traffics, it’s just not needed. It won’t be statistically relevant.
❌ Cookie banners. Just make it stop! Luckily, if you don’t track, you don’t need them 🙂

Work on the landing page

Wim • @wcools • • Part of Day 12

Today I spent a lot of time trying out different copy, layouts and designs for a landing page.

On the one hand we don’t want to spend too much time on it, and we’ll be updating the page anyway as we build the actual product (the screenshots are only mockups after all). We do need to make sure though that it’s something which is good enough so people get an idea of what we’re building are interested in giving it a try.

I usually start with trying out different layouts on paper, to sketch out the “shape” of the site. In this case, I was thinking of several parts:

  • A catchy heading, describing in a few words what the product is. You often see things like “work better together“, or “we support your business!“, but that doesn’t tell you anything. Same goes for trying to explain what it is in a few paragraphs of text. If you need that much explanation, your vision for the product isn’t clear enough yet. It’s fine to do some long-form “pitch” after the headline of course. It’s also OK if not everybody understands it, as long as the audience we think would be interested initially gets it right away.
  • A screenshot to “demo” the product. We don’t really have a product yet, so this will be a mockup of what the UI could look like. I’m also trying to come up with good examples of what to show in the screenshot itself. Something our audience understands, relates to, and might need the product for themselves. It also helps to sneak in some easter eggs or jokes here and there which our audience would recognize.
  • A form where people can leave their email address to sign up for early access. Probably in the form of a private beta, but we haven’t really decided about that yet.
  • A few more details of the benefits we think this solution has.

After the paper sketches, I tried to come up with an initial draft version in HTML and CSS. It’s nice if the part above the fold pops a bit to catch people’s attention. It also prevents the page from feeling bland, even if we keep the rest of the page very minimal for now. I tried dozens of combinations, but here a few examples:

It’s a very slow process at first, but usually the pieces start falling into place once a few of these main parts are done. Hopefully more to show by the end of tomorrow!