Neointeraction Design is a ui ux design company in Bangalore that is constantly researching and attempting to expand its boundaries, and the redesigned website using Strapi & Next.js is a step in that direction. This blog documents our journey through the design and development phases, as well as the reasons behind our choices.
Why a redesign?
We decided to redesign our website to make it lighter, and faster and to keep up with current trends. Unlike the previous website's poor content management system, the new website's overhaul places a focus on the projects. The website's revamp also saw an increase in visitors. Additionally, the website can now render effectively on a variety of devices. The redesigned website is reliable and accessible to users of all ages and geographies.
The revamp enhanced page rendering speed by 80% and increased visitors' average page interaction time to 4-5 seconds
Why we settled with Strapi instead of Wordpress?
Traditional CMS (eg: WordPress)
It is a single-point solution.
The frontend and backend are linked together and is inseparable
Focuses on content management solutions for websites.
Unable to handle a large workload
Slower and more susceptible
Slower site loading and bulky
Enhancements and customization require more work.
Headless CMS (eg: Strapi)
It is front-end agnostic, meaning it doesn't matter what technology the front end runs on.
It is a backend-only CMS whose content is delivered via an API.
It can deliver content to any type of device and platform, whether web-based or application-based. This is ideal for modern-day content consumption.
Supports static site generation, which improves content delivery, security, and scalability.
Optimizes content and allows for faster site loading
Capable of handling a large workload
Due to the lack of a frontend, it is faster and more secure.
UI UX developer can focus on code development rather than ui ux design, and the ui ux design can be driven by the designers who do not need to worry about the code.
What are the technologies used?
Design & Development Phase
Design Phase
We created a mood board using inspiration we found online and among ourselves. Making a wireframe and selecting the ideal layout and structure came next. Then we designed and prototyped and redesigned and revised again till we reached our final version. The final design was then handed off to the development team.
Our website was designed and prototyped using Figma.
Our go-to design tool, Figma
Figma is a popular tool used for ui ux design to bring to life the applications and websites designers have envisioned. Figma’s real-time collaborative nature made it an ideal choice for our team.
Development Phase
We chose React Js, Next Js, and Strapi headless CMS frameworks after thoroughly assessing several others for the development of the website.
We began by creating a single-page application using the officially approved Create React App tool. The create react app command generates the files required to launch and run the application in a browser. As a result, we can focus on coding the website rather than worrying about the build configurations.
We used JSX for markup, CSS for styling, and the bootstrap grid system to implement a grid layout for our website. We added some CSS foundation styles and began constructing the components that can be reused from the design mockup. For instance, the input controls, card components, etc.
After which we started building each page and added interactions and slight animations to make the website feel more alive. We used Bootstrap's grid layout to create a responsive website with ease. In addition, we employed rem units for fonts, which aids in adjusting the font size according to the viewport.
To make sure the user will have a great experience on any device, we tested each page's responsiveness after it was completed. We used an open-source Strapi headless cms to distribute content consistently across devices. Make sure to hire the best UI UX developers and designers to boost your website.
React JS
React Js is a free and open-source frontend javascript library. It is based on entities known as components, which render into the required DOM(document object model) element. This makes it an efficient method for creating scalable and quick user interfaces for websites and applications. Since it is built on components, react reduces code redundancy and enhances code reuse, resulting in a much lighter and more manageable codebase. This also facilitates debugging.
Why we used React js?
With a component-based architecture, React js seemed a very efficient solution for developing fast & scalable front end for websites.
Code reuse - React allows for code reuse, which can really boost productivity.
React Js offers fast rendering - React has a feature called virtual DOM in which any new changes are first performed on the virtual DOM which gives higher performance and a cleaner user experience.
SEO-friendly - Because of React's fast rendering features, it reduces page load time which in turn benefits the ranking on Google SERP pages.
Libraries - React has a strong developer community, and there are many third-party open-source libraries available that we can use in our project.
Why we used Next.JS?
Next Js is a react framework that grants additional capabilities like server-side rendering and static site generation to the react application. The server-side rendering feature increases the performance of a Next Js application compared to a regular react application. Applications built with next js tend to get a higher SEO ranking than regular react-based applications.s.
Strapi - Headless CMS
Strapi is a headless CMS used to create websites, mobile apps, eCommerce sites, and APIs. It enables you to construct an API without any prior knowledge of the backend or databases.
Why we used strapi js?
Strapi is an open-source headless cms
Shorten time to deploy
Security reasons
Seamless CMS
100% Javascript
Customizable content architecture
Multi-database support
Strapi is powered by a modern technology stack using Node.js.
In traditional or monolithic CMS like WordPress, everything is packaged together. Headless CMS like Strapi focuses on its primary mission: managing content.
Strapi's native functionality matches that of the Custom Fields Advanced plugin in WordPress.
Challenges we faced
Using Strapi
Learning new cms
Various media file format support
Conclusion
The website's page loading speed and traffic rose thanks to the use of the React, Strapi & Next.js frameworks. The redesigned website is less cluttered and more organized, allowing the projects to stand out.