We built landing page for Dyframe.com using its own technology

Screenshot of dyframe.com landing page

Hello World! First of all, as this blog is brand new, I want to introduce myself. Hi, my name is Marcis and I am designer and front-end developer with strong knowledge of programming. I and my colleague Arturs are working on a dynamic wireframing tool called Dyframe. We will write in some other blog posts about what is it and how it came to be. I’ll start by sharing how we built a cool landing page and what tools/libraries did we use.

Idea

The main idea was to a create landing page where would be text “Coming Soon” and some small teasers about what this is.

So I came up with a list of things we want:

• Showcase what Dyframe can do
• Showcase the showcase with Dyframe scripts (sounds weird I know, but bare with me)
• Link Medium blog
• Link Slack invite
• Beta testing subscription form
• Page should be somewhat responsive and cool to look at

Ok, what now?

Build process

First I sketched what the page should look like and then built the HTML for it using plain old HTML, Stylus for CSS and Dyframe node actions (our take on how to write JavaScript without knowing any programming stuff) and RE:DOM.

Ok about Stylus — it’s syntax is very cool, short (as pug for HTML) and nested. I prefer it over sass or less. No struggles here. I prepared some example of syntax.

.dyf-content
   line-height 70px
   padding 10px
   img#logo
      width 50px
      height @width
      @media screen and (max-width: 580px)
         display none
   p
      font-size 14px
      &:after
         content 'cool'

What are node actions? Well this is one part of Dyframe and it is basically a way to write JavaScript visually with nodes, hence the name node actions. The flow is simple to choose element you want to start an action, link it to function you selected and repeat until satisfied.

Dyframe node action interface (not the actual systems design)

For this demo (landing page) we created a scenario where two people are working on the same project and simulated their every move and action with Dyframe itself. Animations are executed on GPU with CSS animations so they are smooth and by chaining nodes, we are able to create a step by step animations for our scenario within just minutes. And chose to write position coordinates in percentages so these animations and panel preview is responsive. I drew a preview below of how this roughly looks in editor panel. As final style for nodes are not yet finished this will do as an example. Note, every function can get custom settings.

The last part RE:DOM is JS 2kb framework and I chose it just because this is a temporary website and this was a good excuse to learn some new technology. With it we build stars and circles moving in the background as well as subscription form (tho we could have done it with node actions too).

Bundling

To get the most performance out of this landing page, we used as less JS as possible. Only used libraries are axios (for subscription form) and RE:DOM bundled with Webpack.

End result

At the end, we got fast landing page where above the fold is rendered with plain HTML and underneath is built with RE:DOM. Animations and their endless loop are smoothly handled by Dyframes own toolset.

We get functional subscription form and responsiveness too. All that bundled in tiny JS bundle gives it great loading speed and performance.

So here is the landing page with the demo for Dyframe using its own actual technology: https://dyframe.com.