Institutional Website Redesign - from Drupal to Gatsby

• Modern and appealing design;
• Easily add and edit content;
• Connect with their publications database;
• List all the Software developed in-house;
• Present the Lab's current and former researchers and staff.

Having in mind the requirements for this new website, it was clear to us that they did not need a bulky and maintenance-heavy CMS like WordPress and Drupal.

We proposed instead to use a Static Site Generator, Gatsby, with a simple Content Management System and a Content Deliver Network (CDN), Netlify to serve the website's content in a truly dynamic way.

1. Assessment and Design

   The Laboratory did not have a dedicated visual identity and it was following the brand guidelines of its host institution, KU Leuven. So our design team decided to use this opportunity to create a new logo with a new symbol, wordmark and colour scheme, as part of our proposal for web design.

   As references for the new logo, we used proteins that are directly related to Laboratory's research. 

   

   For the colour scheme, we used a dark blue from the KU Leuven University identity as a starting point and a point of liaison with their identity. To create contrast with that blue, and considering the actual lab activity we wanted the symbol to evoke energy and transformation, so we opted to use a salmon colour.

   From the new logo and colour scheme, we developed a design style guide document including a series of components like buttons, cards and forms which were in tune with the aesthetic of the visual brand. Also, the selected typography for the website was chosen accordingly and in harmony with the brand.

   
2. Static Site Generator

   After carefully considering different options for Static Site Generators, we decided to use GatsbyJS for being a solid and well-supported option based on ReactJS.

   Not only does Gatsby have an easy-to-use content page-building model, but it also has an impressive list of plugins and integration support with a big list of Headless Content Management Systems (CMS).

   More than that, using Gatsby made it easier to migrate part of the content from Drupal to the new website. We used Nodejs to scrape the content we wanted to migrate and then we created markdown files, which are picked up by the model we built in Gatsby.

3. Editing content

   One of the requirements from the Laboratory was to have a back office so their staff could easily edit and add content to the website. They did not need any complex editorial flow or a high number of editors, so our best option was to choose an open-source Headless CMS to connect with the SSG we chose.

   We selected Netlify CMS (Today known as Decamp CMS) since using it would not mean any extra cost to Switch Laboratory, and also because it is easily extendable for different content architectures and very simple and intuitive to use.

   Just like in any other CMS, the Laboratory is able to edit the content of the website, create new pages, edit the header menu and the footer, edit meta tag images, key-words and descriptions and input ALT attributes to all of the images in the website.
   

4. Theme and Style

   For styling the website, we started by laying the foundation of the design system, creating SCSS mixins, variables and other groundwork necessary in order to have a proper and easily updatable style guide.

   We then moved into the atomic procedure, from simple to more complex components, always with scalability in mind. Our preferable approach for styling our projects is to use HTML and SCSS.

5. Hosting

   Last but not least, we are using Netlify to host the website not just to make sure speed is not a problem, but also to avoid any website ever going offline.

   Netlify has a Content Delivery System to store your project and serve it fast and securely to your user browser. On top of that, their free tier is very generous. In the case of the Switch Laboratory, there are no costs incurred.