Back

Development of Geonovation Corporate Website using ReactJS

Name
Creation, Design and Development of our corporate website
Location
Barcelona, Spain
Industry
Software Consultant
Timeline
6 months

Project Summary

We decided that it was the moment to create a brand-new modern website for our Software Consultant Company ( GeoNovation ) with new visual and aesthetics elements where we could experiment new CSS techniques and effects to make it more visually engaging.

We work closely with our UI designer, and we put a lot of effort in user-experience, communication and design, making a simple website playing with color gradients.

After deciding to use ReactJS with GatsbyJS, we started developing the website to generate a static website with Server-Side Rendering functionality, which will make it load faster than average CMS platforms.

Description

We began the development of our new website by starting from scratch. This involved defining our objectives and identifying areas where we wanted to differentiate ourselves from our competitors.

Once the first UX prototype content was finalized, we proceeded to design the UI of the website. We collaborated with Olga, our UI designer, to create a visually appealing and user-friendly design that would engage and delight our visitors. We worked closely with the UI designer to ensure that the design reflected our brand values and communicated our key messages effectively.

Through this process, we were able to create a website that not only looked great but also effectively conveyed our brand as software consultant.

Bringing gradient to a new level

We experimented new ways to combine gradients, layering colors through the use of SVGs, creating great color combinations beyond a simple two-color blend and transforming it into a powerful design tool.

We created a container with inside positioned on the body as background using CSS property
position: absolute

After, we use the CSS property
filter: blur(150px) 
to blur the 2 SVGs objects and obtain the following result

Advances to use Server Side Rendering

The website has been built using GatsbyJS, a SSR framework that during the build generates static html pages. This provides many advantages:

  1. Faster Load Times : Server-Side Rendering allows for faster loading times as the server renders the HTML on the server before sending it to the client. This reduces the amount of time required to load the page and improves the overall user experience.

  2. Better SEO : SSR allows search engine bots to crawl and index the website more easily, which can improve the website's search engine rankings.

  3. Improved Performance : GatsbyJS uses pre-built HTML and assets to deliver the website, which results in faster page load times and improved website performance. This can lead to a better user experience and improved engagement metrics.

  4. Easier Content Management Workflow : GatsbyJS provides easy integrations to some Content CMS on the market, making easier for the content team to update or create new content for the website. It also integrates well with modern web development tools such as GraphQL, which simplifies data management and allows for faster data querying.

  5. Easier Maintenance : Static websites are generally easier to maintain than dynamic websites, as there are no server-side components to manage..

Our Final Thoughs

After completing the development and launch of the website, we are convinced that choosing ReactJS and GatsbyJS during the technical requirement phase was the right decision. The frameworks provided the required flexibility in frontend development to create the desired design and experiment with complex SCSS styling rules.

However, it did require more time than other frameworks like Drupal or Laravel, as we had to build the template and structure from scratch and manage different types of graphical elements using GraphQL to connect to the content management system