Building & Designing Gritera Multilanguage Website
In limited time, we built and designed a multilanguage website using a headless CMS, Next.js, Tailwind CSS, and Vercel for the deployment.
IndustryBusiness & IT consultancy
Web development, Design
Next.js, Tailwind CSS, Prismic
2 monthsto launch the new website
Built withheadless CMS
Completely newvisual identity
Gritera searched for a software development company, which would build a presentational website for their consulting business. The Gritera website should be elegantly designed with a new visual identity and easily editable so that Gritera could itself manage most of the content on the website independently of the developers. Furthermore, since Gritera is running the business in multiple markets, one of the requirements was also to have the website available in various languages. After initial discussions with Gritera about the project, we knew that the time to develop the website would be very tight and challenging for us.
Based on the project requirements mentioned above, we were searching for a solution which would meet all of the requirements effectively. Therefore, we decided to choose a CMS (content management system) called Prismic - a headless CMS - which means that you get the content in the form of data from the API. Rendering the data itself is then up to the developer. This CMS has a very user-friendly interface for editing content with multiple ways of defining the structure of the content. Since we already had some experience with Prismic on previous projects, it seemed to be the best choice for Gritera as well.
For the development part, we decided to rely on one of our favourite technologies Next.js framework. It's a React.js framework that is server-generated. It's very comfortable to work with this framework. Plus it offers solutions to the requirements of the project: multi-language rendering and content edit preview. Besides this, Next.js has another great feature which is the static generation. It means that pages are generated during the build time and served as plain HTML files. This process significantly speeds up the loading time of pages, which is crucial for a great user experience in the first place, and SEO (search engine optimization) as well.
For the visual aspect of the website, we used a library called Tailwind CSS. This library includes predefined classes, which each of them has a specific purpose. It means that you don't have to define any CSS classes. You only need to assign classes to your HTML elements. There is a way to customize the values behind classes (such as sizes, colours, responsive breakpoints) or add additional ones to fit the needs of the specific project. During the production build, project files are scanned, and the final CSS file is stripped of the unused classes to save space and speed up the loading time of the entire website.
For the deployment of the website, we used a service called Vercel. It supports Next.js, and you can easily preview your work live on the website through it. The setting up is straightforward. You only need to connect the GitHub repository and push code to a branch. Vercel manages the rest. It's a very delightful service to work with since we were able to develop, ask for feedback and fix things very quickly.
To begin with the design process, we compiled the materials from the client and started with the first proposals of the logo. We worked mainly with the company name and its origin (Grit = Guts), the industry, key demographics, target group, company vision and values.
The main goal was to create an elegant and minimalistic logo with a corresponding web design that creates Gritera's brand image as a reliable partner for larger Norwegian companies that provides a home and nurtures the best management and technology advisors.
We were working with a few concepts that would represent the values and would create the desired brand image in the target audience. We wanted to stay away from extensive use of colours and non-conform shapes.
We created a logo which follows a minimalistic design with dark font and only one other colour – strong orange. We choose orange because it carries a two-fold meaning:
- A combination of energy and happiness, transforming into creativity and passion (company values).
- The second meaning one comes from heraldry, where orange is a symbol of endurance and strength displaying perseverance (company value) in your activities.
The square shape around the first letter symbolizes a home (relates to company vision) - a place that provides you with security and trust. It is a home of professionals that can take you on the road to achieve your goals and dreams. This road is represented by slightly moving the letter G to the right within the square.
From Creating Logo to Web Design
After we delivered the logo, we focused on the online presence of the Oslo-based new consulting company. The design process for the static website went pretty fast, and after a few rounds of feedback on prototypes in Invision, we were ready to start the development. Even though the development was done in-house, we decided to create a simple style guide to follow the same patterns and to use consistent elements throughout the web. It is always good to have this kind of document (mostly for larger projects) as one source of truth whether you need to make a few changes or further develop the product.
A Tough Nut to Crack
The biggest problem that we faced was how to solve the project structure for multiple languages. To be more specific, to find a solution to be able to set different slugs for each language mutation. On the website, there is a page hierarchy, where some pages had multiple slugs combined in the url. These pages need to be aware of the parent page and its slug. The language switcher also had to be aware of the slugs and their combinations.
All in all, the problem itself wasn't much about the implementation as more about the time pressure. Plus, the requirement for the feature was injected into the development process in the last phases, therefore the project structure was incompatible with the suggested solution and had to be redesigned.
After assessing the possible solutions, we completely rewrote the pages folder and file structure in the codebase. Previously, we had a separate folder for each parent page with its children inside. The new solution is about having one file for the homepage, one file for the parent pages and one for the child pages. The content of the previous files is now rendered conditionally based on the slugs in url.
Wrapping Things Up
With limited time, we managed to build a completely new website with a brand new visual identity for Gritera. Thanks to the excellent team cooperation at Webscope, the overall project management, and smooth collaboration with the client, we were able to deliver the multilanguage website in time. We hope the new presentational website will help Gritera boost their business considerably.
We especially thought that their combined team of developers and a designer working together seamlessly made the overall project easier to handle.
We are happy to work with Marek and his team of developers and with the end result – for which we have received praise by many. We especially thought that their combined team of developers and a designer working together seamlessly made the overall project easier to handle. We are also pleased with their ability to correctly estimate the end price and time to completion accurately beforehand.
Kristian HenrichsenCo-founder, Gritera AS