In our May milestone update, we introduced a new and shiny website dedicated to LoopBack 4. You can check it out here, but you may want to read on to learn about the site’s genesis.

Screen shot of LoopBack 4 website

The Journey

The Idea

Back when we started to develop LoopBack 4, the team knew that a new codebase should be accompanied by a new logo and branding dedicated to this new version. We put these ideas aside while we focused on delivering the code.

Late last year, we asked our designer Cody Cai to come up with a few alternatives for a new logo. The general goal was to refreshed the look while keeping the vision of the original LoopBack logo and reflecting that we’re part of the Node.js ecosystem. Based on our original LoopBack logo, we drew upon the key themes of continuity, structure and connection as the foundation for the visual realignment on the new logo.

Drafts of LoopBack 4 logos

Since LoopBack is an open source project with a big community, we felt there was a need to get the feedback from that community. With help from Dave Whiteley, we opened a poll in December 2017 asking the community to help us decide on a new logo. And we weren’t disappointed! The majority voted for this logo and palette:

LoopBack 4 logo

Website

The work didn’t stop with the logo. Our designer helped us design a brand new website dedicated to LoopBack 4 and based on the new logo and color palette. Here is one of the blueprints:

Drafts of LoopBack 4 logos

Design Decision

Since this is a brand new website, we considered various options.

URL - v4.loopback.io vs loopback.io/v4

When deciding on the URL scheme for LoopBack 4, we had the following requirements:

  • There will be no changes to current LoopBack website.
  • People will still be able to access the documentation of older LoopBack versions after v4 release.
  • Existing documentation URLs must remain unchanged to ensure shared links won’t be broken.
  • Ease of maintenance.

One option we considered was having a new subdomain (v4.loopback.io) which implied we needed a new GitHub Pages repo. This option would allow a cleaner separation of the old and the new website. The proposed plan is that once LoopBack 4 goes GA (target for later this year), v4.loopback.io will become loopback.io.

An alternative was to group the LoopBack 4 content under a subdirectory (i.e. loopback.io/v4). This option allows easier maintainence of the website because all the new files will reside in the same loopback.io repo and we can continue to use the existing infrastructure for the new site. The downside of this approach is that it could’ve put the stable code for loopback.io at risk of unintentional changes.

In the end, the team was in favor of having v4.loopback.io. A new repo gives us a clean slate for the development of the new site without risk of breaking the current site, especially because the new site has a new theme. It also gives us an opportunity to explore a new architecture for the site, such as VuePress or Hexo.

Bootstrap vs Other Web UI Framework

Since v4.loopback.io is a relatively static website, it would’ve been an overkill to use Web UI frameworks like Angular and React. As a result, we decided to use Bootstrap to build the responsive new website easily.

Your Contribution is Welcomed!

As you may have noticed, only the landing page is done. The next step is to add a static site generator, such as VuePress, and implement the rest of the pages according to the blueprints. If you’re interested in taking the website to the next level, you can contribute over at this GitHub repo: github.com/strongloop/v4.loopback.io.

Here is how you can help:

  • Let us know if there is something you’d like to see.
  • Implement content or fix bugs according to the blueprints.