Innotopia Website

Web Design & Development

minute read

• Source Code
• Live Preview

Tech Stack

Pre-Development

'Innotopia' is the new brand identity name of 'Indietopia'.

Throughout the years, 'Indietopia' shifted its activities from hosting an accelerator program towards creating interactive experiences and gamified solutions for businesses and cultural institutions. To support these changes, the 'Indietopia' team believed it was the right time for a new identity and a new website.

After completing my internship at the company and learning about their rebranding plans, I proposed to them to create the new website.

I had been studying web development for over half a year by then, and I saw this as a great opportunity to take on a project on my own and assess my skills.

Design

Before diving into development, I chose to first create the website's design. I realized that having clear design guidelines to stick to would help me streamline the coding process of the layout and allow me to work more efficiently.

Additionally, I wanted to first get approval on the design from 'Indietopia' before commencing any coding, as this approach allows for more convenient changes during the design phase, as opposed to the more rigid development phase.

Therefore, I made a quick sketch of my design idea to present it to the 'Indietopia' team.

Innotopia Website (Concept):

Hover over the image and scroll down.

After presenting my concept, the 'Innotopia' team gave their approval, and it appeared that we were alligned in our vision.

Taking their valuable feedback and insights into account, I embarked on the journey of refining the design. This entailed multiple iterations, each one drawing us closer to a design that truly encapsulated their objectives and vision.

This collaborative process not only strengthened the design but also fostered a sense of shared ownership of the project. It was a journey we all embarked on together, and the end result reflected our combined commitment to excellence.

Innotopia Website v1:

Hover over the image and scroll down.

In the first iteration, I attempted to introduce color to the initial design, addressing feedback from team members who found it too plain

The project manager suggested 'lime green,' and I decided to experiment with it while simultaneously making adjustments to various sections of the website.

In the end, it didn't look so well as the primary color, but I decided to still keep it as a possible accent color in order to adhere to the design requirements of the client.

Innotopia Website v2:

Hover over the image and scroll down.

In the second iteration, I continued my search for the 'right color' for the website's design while making further adjustments to the different sections.

There were suggestions for 'purple' and different shades of it, but in the end we concluded that the color is overused on the web nowadays and decided to drop it out.

Additionally, I thought it would be a good idea to have a 'hero' image that represents the brand identity of 'Innotopia'.

Considering the fact that 'Innotopia' is based in Groningen and most of their business partnerships are with other local comapnies, I thought it would be fitting to include something that represent the Groningen area.

To bring this vision to life, Brent Keuning designed a 'hexagonal tile' showcasing two of Groningen's most iconic landmarks - the 'Martini Tower' and 'Forum Groningen'.

Innotopia Website v3:

Hover over the image and scroll down.

In this third iteration, I finally settled on 'dark blue' as the primary color for the website and finalized the layout of the different sections.

This iteration resonated most strongly with the 'Innotopia' team. The choice of 'dark blue' and the refined layout perfectly captured the essence of their brand, evoking a sense of professionalism and trustworthiness that aligned well with their goals and vision.

From this point onward, the design remained mostly unchanged, with only minor adjustments to the colors and some small elements from the different sections.

The initial design requirement for 'lime green' was met by using it as an accent color in the final version of the design.

Innotopia Website (Final):

Hover over the image and scroll down.

Development

With the design concept firmly established and refined, the project was now ready to transition from the design phase to the development phase, where the website's functionality and interactivity would come to life.

However, it became evident that certain design requirements, especially in the technical realm, needed further discussion with the client. The client expressed a desire for full customizability of the website and its content, which led to the proposal of implementing a content management system (CMS).

Sanity Studio

I carefully considered the client's request for full customizability and opted for 'Sanity CMS' as the solution of choice.

With Sanity CMS, I could guarantee that every aspect of the website's content, from text and images to dynamic elements and data-driven components, could be fully customized and managed seamlessly through the system.

This ensured that the client had the flexibility and control needed to make real-time updates and tailor the website's content to their exact specifications and needs.

Sanity CMS Demo

Click the 'Play' button to start the video, and then switch to full-screen mode.

Shopstory

However, the client's vision went beyond content customization, as 'Innotopia' also expressed the need for extensive control over the layout and design of the website.

While 'Sanity CMS' excelled in content management, it focuses primarily on the text, images, dynamic elements, and data-driven components.

To fulfill the client's comprehensive customization requirements, I decided to complement 'Sanity CMS' with the 'Shopstory' plugin, a visual page builder designed for seamless layout and design alterations.

'Shopstory' allowed the client to have creative control over the website's structure, making it an ideal choice for meeting their content and layout customization needs.

This strategic combination of 'Sanity CMS' with 'Shopstory' ensured that the client had the freedom and flexibility to tailor both content and layout to their exact specifications, all within a single, user-friendly system.

Shopstory Demo

Click the 'Play' button to start the video, and then switch to full-screen mode.

React Three Fiber

As the project progressed from the conceptual phase to its realization, it became apparent that we had an exciting opportunity to further align the website with Innotopia's brand identity.

This further alignment took shape in the form of a captivating 3D model, an evolution of the original 'hexagonal' tile created by Brent Keuning earlier during the design phase.

To breathe life into the 3D model and enable user interaction, I harnessed the capabilities of 'React Three Fiber', a React renderer for 'three.js' - a JavaScript 3D Library.

The 3D model became a centerpiece of the website, providing visitors with an interactive and immersive experience that resonated with Innotopia's brand identity and commitment to innovation and playfulness.

Its introduction marked the completion of a project that now stood as a true reflection of Innotopia's brand identity and a testament to my dedication to delivering a unique online presence, fully aligned with the client's vision and requirements.

Post-Development

Reflecting on the project as a whole, it has been an invaluable learning experience and a true test of my web development skills. The journey from design to development encapsulated the entire product design cycle, allowing me to fully grasp the interplay between creative vision and technical execution.

While I'm proud of the results I achieved, I also recognize that, like any creative endeavor, there are aspects that could have been refined or executed more effectively. This awareness, however, is what makes each project a unique opportunity for growth, as I continue to refine my skills and approaches.

In conclusion, this project represents a crucial milestone in my web development journey, and I'm enthusiastic about the ongoing responsibility of maintaining and regularly updating the website. It's a dynamic canvas that will evolve with the ever-changing landscape of web development, and I look forward to the journey ahead as we enhance and expand its features in line with Innotopia's vision.