Flawless Landing Page Design App Blueprint

4 min readDec 9, 2021

Grabbing your customers’ attention quickly is critical for a landing page. Cool App is a stunning, responsive landing page in the form of a free App Blueprint.

App Blueprints are more than just templates from which to build a specific type of application. We design all of our free App Blueprints to provide one or more key functions that a developer would want to add to their application, regardless of the app’s business use.

Cool App showcases several elements common to modern landing page design. The app can easily be published as a single-page website to act as your main app’s landing page.

As with all of our App Blueprints, the entirety of this blueprint is built without code using Backendless’ UI Builder.

The Cool App Blueprint is a great example of UI Themes in action. Themes utilize CSS Less to produce complex visuals on the page, such as the color gradient used for the app’s primary background.

In this article, we will explore the basics of this app’s functionality:

Implementing UI Themes featuring LESS Mixins
Add a loading spinner while your app loads
Using animations on your text
Creating a slider in UI Builder
Delivering database-driven content

The web app, which functions identically to a website, can be purchased for free when creating a new app in Backendless Console. It features a beautiful, responsive design that will look great on any size screen.

Click here to view the live demo and follow along.

Implementing UI Themes featuring LESS Mixins

In fact, the primary background “image” for the app is a LESS Mixin function called linear-gradient, You can find this function, and explore other Themes added to the app, under the THEME tab in UI Builder.

You can learn more about this specific function here.

Add a loading spinner while your app loads

The beauty of this extension is that if provides a spinner during app loading without using a spinner component. Instead, the spinner is generated using CSS, giving you the ability to choose from countless spinner animations that have been created by developers across the world.

Using animations on your text

In order to achieve this effect, we utilize custom functions, one of which is shown below. This function activates the counter and increments up until the chosen rating (in this case, 4.9) is reached.

Of course, we don’t want this function to activate when the page loads, because then the user wouldn’t see it (as it’s 2/3 of the way down the page). So we have logic on the Page component that triggers on page scroll.

When the user reaches a point between 4000 and 5200 pixels from the top of the page, the custom ratingCounter function is triggered, showing the user the animation.

Creating a slider in UI Builder

The slider involves multiple layers of logic to achieve the effect we want. In addition to the On Mounted logic (below), we have logic for the "dots" beneath the slider that show the slider's progress and allow the user to skip between items.

Delivering database-driven content

This allows you to easily make small changes and updates without having to publish an app update. For apps published on the Apple App Store and Google Play Store, avoiding publishing new app versions is a significant plus.

Several sections of the app utilize Dynamic List Behaviour. Using this functionality, the UI will automatically adjust to display all items as specified in the data table.