We started with clarifying the use cases where and how the project websites would be used. This helped us to understand the key features that the client values the most. We spent a certain time discussing the aesthetics of design for building a shared vision of the brand image for the website.
Luckily Koponen + Hildén had experience from web development, which gave us the opportunity to ditch monolithic CMS-providers and build something using a modern headless CMS. This client wasn’t afraid to get their hands a little dirty when needed and we pushed forward a solution that would take their current know-how to limits.
For starters we had to figure out how to create a solution that would be easy to replicate, has automatic deployments and where modularity is built-in. We chose to go with monorepo architecture, where a common folder is used for reusable frontend components and styles that can be shared among different projects.
Every new project website is created by using custom node.js script that creates a boilerplate website and sets all the necessary configurations for automatic deployments. The frontend is written in React and content is served from Prismic CMS.
Every time code is pushed to master branch in Github, a build pipeline is launched making a new deployment in Now’s cloud infrastructure. All deployments have secure TLS certificates and custom domains can be easily added.
Design and UX
As a visual starting point we got requested to take a minimalistic path. Koponen + Hildén had chosen the main brand colour and typeface, Fakt Pro, that would work as the basis for the design. We defined a design system with a warm, flat color palette with one accent color which we put to use throughout the website to communicate professionalism.
With the brand guidelines in hand; it was time to design a landing page that coupled the identity of Koponen + Hildén. We focused on simplicity with the site structure and bringing out the stylish data visualisations and graphics. As always we started with a pen and paper, followed up by rough wireframing and built up from there.
We chose to use section blocks with low-key approach to meet their aesthetic standards and let the content speak for itself.