3 of the Best Looking Websites in the SaaS Industry

These SaaS websites know what’s up! A look into the 3 best-looking websites in the SaaS industry from the perspective of the Art Director here at WANDR, one of LA’s top-ranked UX agencies.

The SaaS (Software as a Service) industry is all the sass right now. With more and more products entering the SaaS market, it is becoming increasingly important for brands to do three things really well:

a. Distinguish themselves from competitors.
b. Master design fundamentals.
c. Learn from the best products in the industry.

Let’s take a look at each one more in detail:

A. Stand Out From Your Competition

I want to use this topic to provide a different perspective on this otherwise straightforward, obvious point. Although your purpose is to differentiate your brand from other similar brands, this does not have to mean separating your website design from that of other best looking websites out there.

Now, if you’re similar to me, you may often find yourself trying to reinvent the wheel in order to really stand out and prove your genuine creativity and uniqueness. While it will require some innovation to acquire this, you do not have to start completely from scratch when it comes to designing a beautiful website. You can take bits and pieces from other ones you like, and build upon those to result in a best looking website masterpiece that is your brands’ website.

Give yourself a break– you don’t need to reinvent the wheel! Work smarter, not harder.

There are many aspects of best looking websites that other brands can, and should, use as their initial foundation. Once the inspired creative juices are flowing smoothly, it is more effortless to come up with their own details that showcase their brand’s unique identity and flare.

B. Mastering the Design Fundamentals

Hey, I’m talking to you, you overachiever who is half reading this, half thinking about what you need to do after you read just one more blog post.

All right, Stop. Cooperate and listen!

What is your viewer looking at first? Second? Third? You can control these by adjusting your typography, contrast, and color.

Here is a brief summary of my best design tips, from my over a decade-long experience in graphic design (for the longer description of these, check out our post on 21 UX Design Principles to Live By).

Typography

Sorry, elementary school English teacher. We’re designers now. When it comes to design, we break a few English standard rules. ✌️

• TREAT TYPE AS ANY OTHER OBJECT OR SHAPE.
• GO BOLD or GO BIG for the type you want your viewers to see first.
• In Western culture, people read from top to bottom, left to right. Thus, it is important to:
• • Justify the type left, so the eye can find the edge and read the words more easily and naturally.
• • Not indent the first sentence of a paragraph.
• • Avoid putting text in the corners.

Every space counts.

• Lastly, don’t:
• • Force justified type.
• • Have a single word as the last line of your paragraph.
• and, instead, you want to:
• • Use a single space after the punctuation in a sentence.
• • Pay attention to the shape the text creates to avoid undesired shapes and harsh angles.

Contrast

By adding contrast to size, weight, value, and color, you are able to control the eye, establish hierarchy, add movement, and define the meaning, and ultimately, tell a better story with your frames.

A general rule of thumb is, when adding contrast, start extremely and then tone it down from there.

Adjust scale + values = Control the story people are seeing

• Items in the foreground generally should have more contrast / brighter brights / darker darks.
• Items that recede into the background should have less contrast / lighter values.

Defining hierarchy + meaning = Explain a story people can understand

• Think about the thing you want to be the most important in the frame.
• Next, make it the most prominent, giving it the darkest values, most extreme contrast, making it the largest in size, etc.

Create movement in the frame = Tell a story people are interested in

• Adjusting the weight can create rhythm and movement in the frame.
• This is key to creating more dynamic compositions, which are visually appealing and attention-capturing.

Color

Colors can guide the viewers’ eyes to what’s important.

Complimentary colors are opposing colors of the color wheel. Humans like complimentary colors. Our brain knows exactly what color is in front of us when it is placed next to its complementary color. It is natural and there is no effort.

A few things to note on colorwork:

• Saturation is the intensity or purity of a color. This is also one of the biggest culprits for ugly colorwork.
• Value adjusts the brightness and vibrancy of the color.

Here are the guidelines for saturation and value:

• Don’t overdo it.
• Use it to guide the viewer, tell the story, and change the mood (desaturated tends to set a sadder, darker mood), and draw attention to something or highlight areas of interest.

C. Study the Digital Products that Are Killing it 🔥

In order to get a stronger grasp on what a visually stunning website looks like, here are three of the best-looking websites in the SaaS industry right now, from the perspective of the Art Director at one of LA’s top-ranked UX/Product Strategy Firm:

1. Intercom

Human, Approachable, and Trendy.

From its creation in 2011, Intercom positioned itself as a major player in the Digital Communication ecosystem and became a design reference for Playful and human SaaS experiences. This is what makes this SaaS company and its website so beautiful is:  

• It uses a well-thought-out set of illustrations that communicates playfulness and empathy.
• It’s all about the message, which is beautifully wrapped.
• Talk about typography with purpose. Typography is used here not as decor, but to enhance communication.
• It grabs attention and enhances the message through bold colorsand color contrasts.

Approachable illustration supporting a clear message.

A unique animation may not immediately convert visitors, but it sure will stop some of those skimmers and make them pay attention to what you have to say.

Intercom does a beautiful job of using their landing page to grab attention and enhance their message, through the use of a well-thought-out set of illustrations that communicate playfulness and empathy.

Bold and Contrast colors.

Beautifully wrapped messages–the perfect balance between professional and human.

2. Zoe Financial

Clean, Sleek, and Balanced.

Next up for our list of the three best looking websites in the SaaS space is one of our clients. Zoe Financial is a website that connects people with financial advisors, based on their location, occupation, income, and personal preference.

 Zoe’s landing page header’s fold, which showcases their clean and clear communication.

Designing their site included thinking about two audiences: the financial advisors and those looking for financial advisors. Thus, it not only had to appeal to the viewer looking to get paired up with a financial advisor but also to the financial advisor to want to partner up with Zoe as a way of getting found.

Zoe’s block of the content fold, containing text and images. This displays a nice balance between white space and text blocks.

We used a banner design for the landing page section. Note the use of color pairing and typographic contrast here.

3. Atlassian

Robust, Structured, and Culture Fitted.

Atlassian has been around since 2001– a long-time player in the SaaS scene and an industry reference. Since its conception, its main purpose has been to grow inside-out by creating a strong and well-structured design system.

Their design system not only communicates their message properly but also helps them create software to match that message. Here’s why this company has one of the best looking websites in the SaaS industry:

• It uses bold, risky typography and illustrations… but it remains under control.
• • Everything is under a well-thought Design System.
• Their site implements a solid visual hierarchy. From type to color, to contrast.
• They have a cohesive balance between illustration, photography, and content.
• Overall, they have great information architecture.

Act boldly like Atlassian with a word-heavy, but just as value-heavy introduction statement. In these short three sentences, Atlassian shows their humanness, establishes credibility, and delivers their company’s mission statement.

Atlassian has a beautiful Information Architecture.

They achieved the perfect balance between typography, illustration, and photography–always supporting a clear message.

Last Thoughts on the Best Looking SaaS Websites

To wrap up my thoughts on what makes these three at the top of my list for the best looking websites in the SaaS market, let’s recap from the very beginning.

1. Don’t reinvent the wheel. But, also don’t blatantly steal ideas. Create a balance between using others’ ideas to inspire you and being original + using design to showcase your unique brand.
2. It is important to adjust elements, such as type and contrast + color in your illustrations and designs, to control the viewer’s eye and to tell a better, more cohesive, interesting story.
3. Look at the products that are featured in posts like this and this to apply traits that the best looking websites have.

What is on Your List for the Top 3 Best Looking Websites in the SaaS Space?

Let us know in the comments below. Also, we’d love to connect on social media! Find us @wandrstudio.