DEV Community

Nick Dorrell 🛠️
Nick Dorrell 🛠️

Posted on

Make Your Site's First Impression Awesome

Article originally posted on my blog:

The struggle with any website is making it so:

-The user can tell what it does in 10 seconds
-It's easy to use

I'm mostly going to cover point one since two is more about UI / UX (user interface / user experience.)

75% of the solution is the headline or hero text at the top of the page.

This needs to be as short and to the point as possible, while telling the user what your site does. Cover the features in depth later on the page.

Using my own site, as an example:

Track time with integrated breaks to work more efficiently.

I like this because it's short, and tells the user what it does and what the benefit is.

This wasn't the first iteration of this text. I was lucky enough to have a buddy make a video of his first impression, and it was clear he didn't really get it from his reaction.
Past the hero text

After the hero text is where things get more flexible. Generally you'll have something like:

-A video showing the product / site in use. Don't put it to autoplay!
-A CTA (call to action) button to sign up.
-A screen shot of the product in use

All of these are great, and their use depends on your product and testing what people like best. They should be guiding the user to understanding what you do and the benefit to them as fast as possible.

From here, you may have a section with features - highlight your differentiators, we're showing them what they'll be able to do.

Testimonials are great social proof to include in a front page, if you have them.

I would also include a table with your pricing, to prevent the user from having to search around for it. I initially had my pricing on another page for Tascflow, and one person reviewing it said I was hiding it.

It wasn't intentional, but he wasn't wrong.

From here, another call to action is great. You've shown the user everything your site does and if they are in your target audience, they'll be able to sign up with minimal friction.

Other pitfalls to watch out for


Using color to stand out is a great idea - it's also horrible if your site looks like an eggplant.

Your text should be easy to read. Period. No one's going to stick around for the eye strain.

I'd stick to using 2-3 colors with one primary one. Get help from a designer friend here if possible, because it's worse to have a bad color scheme than a forgettable one.

Loading times

This isn't something I run into frequently, but is important all the same. If your loading times suck, it's going to turn people away.

Run your site through Google PageSpeed Insights and fix the worst offenders.

Spelling errors

It's hard to build trust with a customer if a page is riddled with spelling errors.

It shows a lack of care / effort in presentation - and personally makes me unsure of the code behind the rest of the product.

Top comments (0)