CeeCam websites
We recently executed the design of two websites for CeeCam, a Canadian company dealing with security and surveillance products for construction sites.
Tools and technologies used
Design
In July, we started the design of the graphic layer of the first website. We had 2 websites to design, the CeeCam homepage and the CeeCam Integrated website. Some of the pages overlap in terms of content, so in order to make the design effective we decided that we would arrange them according to a similar scheme, but depending on the page we would give a different style, so that CeeCam Company would have a user-friendly, simple and a bit informal feel, and CeeCam Integrated would have a more corporate, technical and professional feel, since it is a site focused on building partnerships with other companies. Both visuals use two shades of marine color taken from the company's logo and existing visual identity (videos, old site, new logo, business cards). The client was specific in his expectations and tried to provide us with content for the site on an ongoing basis, so we were able to work on the content with which the site would ultimately be filled and design the layout of the subpages exactly to the client's needs.
Development - technology stack
We opted for the Next.js 13 + Headless CMS Strapi technology stack. This allowed us to write pages in no time, which update data almost instantly when the user changes them in the CMS, while maintaining a reasonable level of performance and speed. Virtually every element (except for a few icons, captions or forms) had to be customizable from the CMS. Below in the header section, both images and captions in a white frame are modifiable.
Front page - CeeCam Integrated Solutions
We started with CeeCam Integrated Solutions. From the mockups, we downloaded colors and styles for the components. We made the design configuration and moved on to implement the first views. We constructed views, forms and relevant content types in the Strapi CMS, so that the content of the site is managed transparently.
In the third week of August, we made the final improvements at the request of the client. We implemented a blog with functionality to generate articles with photos with the help of GPT. Below is one of the changes at the client's request, a new drop-down menu design:
Second site - CeeCam Company
The second site was more challenging in terms of style - various elements were added to diversify the look. Fortunately, the design was guided to reuse components from Integrated, which significantly accelerated the work. At the end of August, the site was ready for the client's review.
Technology decisions
During the development of the project, we made several decisions about the selection and use of technologies:
- Next.js 13 and App Router - we used the latest version of Next.js so that the code would be maintainable and readable long after the project was completed. The new App Router architecture also allowed us to refresh data almost in real time.
- Strapi + PostgreSQL - Strapi CMS combined with this database is a stack that meets the needs of clients in terms of site management very well. The mass of available plug-ins (including our own, custom ones) allows for fast and trouble-free development as well as convenient and relatively inexpensive implementation.
- Google Invisble reCAPTCHA v2 - Google's API allowed us to quickly and securely protect contact forms from spam, so that the Client can be sure that the data they receive in their systems is authentic.
Summary
The product works fast, has the planned functionality, and thanks to the work of the UX/UI team, it is also pleasing to the eye. The project in cooperation with CeeCam shows that BoringOwl can be trusted for website development.