Design Psychology Featured Tech

Tech Product Website Trends & Ideas: From Startups To SaaS Pages

Droptice homepage

Tech web sites have a sure sort of aptitude to them. You’ll see this most frequently WITH software program corporations, SaaS merchandise, and newer startups.

However designing your personal tech startup web page from scratch may be robust. It requires a eager eye understanding precisely what you want, what your guests can be in search of, and the best way to design round that. Not straightforward to do.

Fortunately you’ll be able to study from the teachings of others by designing your pages from different developments.

On this submit I’ll share a handful of tendencies that relate to all tech websites selling some sort of software program or webapp. There are various totally different instructions you possibly can take, however the extra you research net design on this area the extra you’ll acknowledge comparable methods.

So whether or not you’re creating a brand new startup, launching a killer piece of net software program, and even making a group membership website, all of those developments can apply to your homepage and first touchdown pages.

All the time Add A Clear CTA

This development must be a #1 level it doesn’t matter what. However the definition of “clear” isn’t all the time… clear.

Once you add a CTA into your web page you need to encourage individuals to do one thing. Meaning your CTA ought to be positioned someplace that might encourage that motion, and the button textual content ought to clearly describe that motion.

The distinction right here relies upon enormously on what sort of firm you’re constructing. Is it a customized SaaS app for heatmap monitoring? Or perhaps a buyer administration platform?

Take into consideration what you need customers to do, after which design a transparent CTA round that.

Droptice homepageDroptice homepage

On the homepage of Droptice you’ll shortly discover one inexperienced button that stands out among the many relaxation.

That is what an excellent CTA ought to do. It grabs consideration, not blindingly, however simply sufficient to say “hey look at me!”

From there it’s your job as designer to craft a button giant sufficient to encourage clicks, well-designed sufficient to mix into the format, and with textual content that clearly defines the motion.

Most of those buttons are simply signup buttons to get extra individuals utilizing a service. Nevertheless you don’t all the time want the textual content “sign up”. Attempt variations. See what feels proper with the web page.

Laracasts homepageLaracasts homepage

I’ve all the time appreciated the Laracasts web site they usually sport a number of nice design developments for tech area of interest websites.

Their CTA truly options two choices: “get started” which is principally a signup web page, or one other button that fades just a little extra into the background. That’s extra like a secondary CTA with one other motion to maintain individuals engaged on the location.

The whole lot is supposed to funnel new leads into the web site however you possibly can attempt that with totally different angles and totally different CTA buttons.

Aspect word: I’m additionally an enormous fan of the Laracasts headline. It undoubtedly takes a savvy artistic to think about the tagline “It’s Kinda Like Netflix for Your Career!”

Runcloud homepageRuncloud homepage

The RunCloud homepage makes use of some vibrant textual content and a brightly coloured button to seize consideration quick. This jumps off the darker web page background so it’s instantly seen.

There’s a number of issues I like about this design. First is that the button doesn’t actually stand out an excessive amount of because it blends with the opposite yellow parts on the web page.

And second, the textual content for this CTA feels extremely descriptive. That is often what I search for in a superb tech website design: strong copywriting that encourages motion.

Individuals visiting the web page might not even know there’s a 5-day free trial. So the place would they study that?

On the button that you really want them to click on. Genius.

Demo The Tech With Screenshots

Whether or not you’re promoting desktop software program or a SaaS product or a cellular app, or something comparable, there’s typically a way you possibly can demo it.

Now I’m not saying that each tech website wants to incorporate demo screenshots. Typically this simply isn’t a design type that you simply’ll need.

However should you can I extremely advocate it. These screenshots give guests an inside peek backstage to see what your product appears like and what it does, all earlier than even signing up.

Let’s take the monitoring software program Binom as one instance.

Binom homepageBinom homepage

Once more you’ll see an incredible CTA design with two clear choices: the first one(enroll) and the alternate one to maintain individuals partaking additional(take a look at a demo).

Only a few merchandise allow you to demo their stuff with out an account. However for my part that’s the most effective issues you can do, particularly in case your SaaS product is actually complicated and may require a while working towards the UI.

Though even with out clicking any button you’ll be able to nonetheless take a look at the reside screenshot of Binom decrease on the web page.

This provides you a quick concept of how the tracker would look and the way it’s organized on the display. So people who find themselves out there for a tracker can shortly take a look at this homepage at a look to see what Binom seems like.

One other good instance is on the Bonsai homepage.

Bonsai homepageBonsai homepage

This can be a product suite made for freelancers to handle tasks, contracts, shopper invoices, all that jazz.

There are a number of calls to motion right here with one being the signup button within the navigation bar, and the opposite being a single type signup area. You’ll see a a lot greater intro fee if you solely ask for an e mail handle, however this could additionally ship curious individuals who enroll and by no means go anyplace.

I suppose the extra fascinating function right here is the precise cut up header format. On one aspect you’ve gotten this e-mail type signup, and on the opposite aspect you have got a screenshot of Bonsai.

As you scroll down there are not any different screenshots which leaves the customer wanting extra.

And beneath the “products” menu there are different pages with comparable screenshots. So there actually is a lot right here to dig into and preview earlier than signing up.

Use Branded Shopper Logos

You’ve possible seen this impact utilized by tons of of bigger web sites over the previous few years. It’s shortly rising right into a trusted design fashion for tech web sites too.

The entire concept of talked about logos is to construct belief and credibility together with your product.

If individuals go to your homepage and see that your product is being utilized by different bigger corporations, that instantly turns into a sign of authority. The important thing right here is to not exaggerate in any approach: solely use logos which might be really associated to your product.

Moqups wireframeMoqups wireframe

Should you take a look at the Moqups homepage you’ll discover a small part within the header itemizing corporations that use their product.

Logos embrace Intel, Microsoft, Sony, amongst many different massive names. These manufacturers are giant sufficient that everybody would acknowledge them. Particularly within the tech area.

And it’s value noting that the logos mix very properly into the header itself. They don’t really feel jarring or misplaced, they usually’re simply adequately subtle that you simply may even miss them.

I really feel that’s actually one of the simplest ways to make use of branded logos. Make them noticeable but not too apparent.

Now Droplr does one thing very comparable with branded logos that fade into the background.

Droplr logosDroplr logos

One qualm I’ve with this fashion is the shortage of description for these logos.

Why are the listed right here? What do the characterize? Even a small heading like “Clients” or “Happy Customers” would clear this up.

But even with out that textual content, we nonetheless like seeing these logos. As a result of they’re trusted manufacturers. And it instantly provides Droplr that rather more credibility.

Reech homepageReech homepage

Now I feel Reech does it greatest by itemizing buyer logos and explaining what they’re.

This impact can be utilized in some ways throughout many types. You might even use branded logos for numerous magazines or newspapers which have talked about your product within the press.

Individuals belief a TechCrunch emblem simply as a lot as a Microsoft emblem. So any type of recognizable branding that you would be able to promote will certainly enhance your belief issue.

Homepage Signup Type

Earlier on this publish I discussed the CTA button and a few tendencies for that. Which I nonetheless stand by: it’s a strong device for tech product web sites.

However there’s one different technique you’ll be able to attempt which is the lone signup type proper on the homepage.

Most CTAs simply convey customers onto a signup web page anyway. So why not skip the preliminary click on and simply attempt coaxing individuals to enroll?

For those who do it proper it will look very pure and will even improve conversions.

Gusto homepageGusto homepage

On-line payroll software program Gusto has some actually cool tech for payroll and HR instruments. They usually’ve additionally received an excellent web site to show it.

Above the fold you’ll discover a type with solely Three fields: identify, e-mail, and firm.

With simply these Three items of information you’ll be able to create a Gusto account and get your identify into their e-mail record. So even when you enroll and go nowhere, Gusto can follow-up together with your account to attach and attempt to encourage you to finish the signup.

You’ll discover within the instance above that type is small and pure to the web page. That’s the kind of design aesthetic you need to go for.


One other nice instance is Cloudbooks with a easy two area signup: identify and e mail.

Doesn’t get a lot easier than that. To not point out their design is fairly primary so there’s not an entire lot else to do on their homepage.

Immediately beneath the signup type they’ve a small carousel which you would simply replicate. Though personally I discover it extra distracting than encouraging.

But that’s only one extra factor you may attempt cut up testing to see if it helps or hinders conversions.

These homepage signup types usually are not as widespread on tech websites, however I’m seeing them much more typically. Even on bigger web sites like Digital Ocean.

Digital ocean homepage signupDigital ocean homepage signup

Tremendous clear account creation type positioned proper above the fold. Straightforward to work with and also you solely enter two issues: e-mail and password.

For those who try this design fashion you’ll want to hold it easy. Restrict of 2-Three fields max and actually design the shape so it’s not too obnoxious.

Add Illustrations For Branding

I’m positive you’ve seen loads of tech startups with customized illustrations.

These are in style as a result of they’re simpler to model, fast to acknowledge, and fairly enjoyable to mix with a tech emblem. For instance, once I consider Docker I consider their whale graphic.

But even on their homepage they function a barely totally different animated illustration:

Docker homepage designDocker homepage design

You possibly can comply with an identical fashion with your personal tech homepage when you have an illustration that is sensible.

This is the reason illustrations don’t must be branded. In case you design an illustration that demonstrates the product, or helps to showcase one thing related, or that simply describes your tech… these are all legitimate makes use of of illustrated parts.

Alternatively you would use illustrations as background items to reinforce the web page. Rentberry does simply this on their homepage.

Rentberry homepageRentberry homepage

Shiny colourful background with a pleasant metropolis scene. It lets the customer know that this web page is all about actual property and property administration.

To not point out the colour scheme works properly with their branding which is a plus.

Or you possibly can go the character illustration route like Chanty to incorporate individuals or scenes in motion.

Chanty homepageChanty homepage

I actually like their fashion as a result of the illustrations really feel like a pure a part of the web page. Nothing feels pressured or in the best way: precisely what you need out of a design.

Should you go together with some customized illustrated vectors you would additionally toss in some animation to seize consideration. No flawed solutions right here.

Simply search for design belongings that may mix properly with the model so that you aren’t forcing concepts that don’t go properly together with your tech.

Some Ultimate Ideas

The first aim of a tech homepage is to promote the product.

Inform individuals what it’s, what it does, why it’s helpful, and hopefully hook a few of these individuals into making an attempt it out. When you’ve received an awesome product then most of these individuals ought to take pleasure in it.

However design is usually the doorway into turning into a buyer so that you want a stellar design that basically works.

The following pointers are all very sensible and fairly easy to work right into a format no matter what you’re selling. Attempt these out in your subsequent tech venture and see what you assume, but in addition maintain your eyes on the business. Tech web sites change quick so it’s good to maintain up with altering occasions and new tendencies as they emerge.

var fbds = doc.createElement(‘script’);
fbds.async = true;
fbds.src = ‘//join.fb.internet/en_US/fbds.js’;
var s = doc.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(fbds, s);
_fbq.loaded = true;

_fbq.push([‘addPixelId’, ‘879593065460453’]);
window._fbq = window._fbq || [];
window._fbq.push([‘track’, ‘PixelInitialized’, ]);