Case Research: Troa 25′ Folio | Codrops

Creating one thing for your self is all the time a particular expertise. Our earlier portfolio had been round for years, and we wished to craft a brand new one that really displays the company’s evolving values. Initially printed in 2021, our outdated portfolio not aligned with our id. It was clear that the time had come for a recent begin.

We got down to create an expertise that’s each distinctive and pleasurable, whereas guaranteeing optimized efficiency. On the similar time, we remained conscious of at this time’s environmental challenges, aiming to create a light-weight and optimized web site for sooner loading occasions and a decreased environmental influence.

Let’s dive in and discover the imaginative and prescient and design decisions behind our new portfolio.

Design Course of

Idea

The principle goal for the brand new web site was to create a light-weight but memorable expertise. The problem was to strike a stability between a powerful and identifiable person interface whereas sustaining excessive performances and optimizations to make sure a quick and light-weight web site.

The main focus was to focus on our tasks and experience, placing content material on the forefront. Our earlier portfolio was outdated in each facet, and we wished to convey one thing extra sustainable and timeless.

One other key problem was to create a clear and interesting design whereas additionally being environmentally accountable, making robust selections on each the UI and growth sides.

As soon as all these concepts have been set, it was time to discover design inspirations that aligned with our objectives and begin crafting the UI.

Troa Inspiration Roundup — Web sites Inspirations Roundup

Grid

All components are structured inside a 24-based grid. The concept was to introduce delicate shifts inside our blocks library to create rhythm and keep away from the monotony of repetition.

Varieties & Colours

We selection to combine sans-serif and handwritten typefaces to create a balanced and interesting visible id. Our sans-serif typeface, “Tr3a”, is available in two weights, permitting us to ascertain a transparent and daring hierarchy between components.

So as to add a extra human and private contact, we included a handwritten typeface for annotations, enhancing the general expertise with a way of heat and authenticity.

We opted for a delicate use of our colours to boost and provides house to the visuals. Due to this fact, we used solely our navy blue and a barely creamy coloration. These coloration decisions present robust distinction, guaranteeing excessive readability and enhanced accessibility. We intentionally selected a cream coloration as a substitute of pure white to assist scale back display vitality consumption whereas sustaining a mushy and comfy visible expertise.

Visuals

The colour palette and design spacing permit the visible components to pop and stand out. With a mixture of our newest productions and images taken on the company, we goal to create a extra genuine that displays our inventive imaginative and prescient and id.

We wished to focus on the individuals behind our tasks and showcase their experience. That is mirrored, for instance, on the homepage, the place the hero visible modifications randomly to characteristic completely different staff members.

Movement

One of many core problem of this new model was to rethink and query the basic function of interactions. The earlier model of our portfolio was stuffed with interactions, animations, and visible results that not aligned with our imaginative and prescient of creating every movement component significant and reinforcing the model id.

Improvement Selections

Tech Stack

Right here’s a fast overview of our tech stack and the important thing technical decisions we made for this web site:

All the web site is constructed on prime of the Kirby CMS, identified for its flexibility and effectivity. It gives a extremely optimized expertise for each builders and finish customers. It’s a PHP-based CMS, which we use alongside Twig to boost the developer expertise.

JavaScript and animations dealing with

As we talked about earlier, one of many key rules was to ship a seamless expertise whereas maximizing efficiency.

Our JavaScript structure is constructed on the newest beta model of Locomotive Scroll (v5), developed by Locomotive. It options module administration with Modular.js and scroll-driven animations with Lenis. We additionally use Barba.js for ajax web page transitions and loaders.

To make sure the smallest doable JavaScript bundle dimension, we intentionally selected to not use animation engines like Anime.js or GSAP, relying solely on CSS animations as a substitute. CSS is extremely highly effective and infrequently underestimated relating to animations.

For the CSS, we opted for a mixture of inline and file-based kinds. To attenuate structure shifts and keep good loading efficiency, we determined to incorporate crucial CSS immediately in our HTML recordsdata. Internally, we use the BEM methodology for writing our CSS guidelines and our structure is a hybrid between the basic 7-1 construction and the atomic design strategy.

Moreover, to scale back the ultimate CSS file dimension, we use PurgeCSS, which parses all templates and removes unused CSS guidelines. That is particularly helpful for eliminating pointless grid columns and offsets, considerably lowering the ultimate stylesheet dimension.

All JavaScript and CSS are managed by Vite.js, which handles asset processing and delivers the ultimate bundled recordsdata.

Performances and environmental influence

Coupled with environment friendly caching guidelines, request discount, and varied optimizations (fonts, photographs, kinds, and many others.), all these efforts allowed us to realize a considerably lighter ultimate web page weight. The homepage weighs solely 500 KB on preliminary load with simply 12 HTTP requests. All the bundled JavaScript file is underneath 30 KB (28.7 KB), whereas the CSS stays underneath 8 KB (7.8 KB).

Past efficiency optimizations, we additionally paid shut consideration to the environmental influence of our web site. Due to our light-weight structure and environment friendly useful resource administration, we achieved a B ranking on EcoIndex and an A ranking on Web site Carbon, with a footprint of simply 0.13g of CO₂ per go to, considerably decrease than the net common of 1.76g. Moreover, our inexperienced internet hosting performs a key function in lowering our carbon footprint, because it depends on renewable vitality options to energy our infrastructure. These decisions mirror our dedication to constructing a high-performance and environmentally accountable web site.

Conclusion

Embracing eco-friendly decisions doesn’t imply sacrificing interface high quality or person expertise. Quite the opposite, it fosters a extra considerate and intentional strategy to design—one which not solely minimizes environmental influence but additionally enhances usability, effectivity, and total engagement. By prioritizing sustainability, we create digital experiences which might be each accountable and refined.

We hope this case offers you some perception into how we are able to enhance our future tasks.