為自己創造一些東西總會有一種特別的體驗， 我們之前所創建的作品集網站已經存在多年了，我們想製作一個新的作品集網站，真正反映我們正在不斷發展的價值觀。 最初發布於2021年，我們的舊作品集 很明顯有點過時，所以是時候重新開始創造一個新的作品集網站來迎合我們當前的要求。

我們著手創造既獨特又令人愉快的體驗，同時也確保做到效能上的最佳化。 與此同時，我們仍然注意當今的環境挑戰，需要建立一個輕量和最佳化的網站，以加快載入時間並減少對環境的影響。

讓我們深入探索我們在創造新的作品集時的願景和設計理念。

設計過程

理念

新網站的主要目標是創造一個輕量級但令人難忘的瀏覽體驗，而當中的挑戰是，需要在強大且可識別的使用者介面之間取得平衡，同時也能保持高效能和最佳化，以確保可以快速載入網站內容。

這次更新的重點是，想更加突出我們所參與的專案和專業知識，所以我們非常著重網站上的內容。 我們之前的作品集網站在各個方面都過時了，所以我們希望這次的更新會為我們帶來一些更可持續和永恆的東西。

在創作的過程中，我們也面對另一個重大的挑戰，就是如何創造一個簡潔且引人入勝的設計，所以在使用者介面和開發方面都需要作出深入的分析和研究。

經過深入的探索和分析我們新的設計靈感，一旦確定了我們的想法和目標後，就可以開始著手製作使用者介面了。

網格（Grid）

所有元素都構建在一個基於24網格的版面上， 這個想法是在我們的 blocks library 中可以讓內容有一些微妙的轉變，以創造節奏，避免重複的單調。

字體和顏色

我們選擇將無襯線字型和手寫字型混合在一起，以創造一個平衡和引人入勝的視覺識別。 我們的無襯線字型「Tr3a」有兩種權重，允許我們在元素之間建立清晰大膽的層次結構。

為了增加更人性化和個性化的觸感，我們採用了手寫字型進行註釋，以溫暖和真實感增強整體體驗。

我們巧妙地使用我們的顏色來增強視覺效果並增強視覺的空間。 因此，我們只使用了海軍藍和略帶奶油色的顏色。 這些顏色提供了強烈的對比度，確保了高可讀性和增強的可訪問性。 我們故意選擇了奶油色而不是純白色，以幫助減少螢幕光線，同時也提供了一個柔和舒適的視覺體驗。

視覺設計

調色盤（Color Palette）和設計間距（Design Spacing）使視覺元素能夠脫穎而出，加上我們的最新作品和拍攝的照片，可以創造一個更真實的，同時也可以反映我們的創意願景和身份的作品集網站。

我們想突出每個專案背後的無名英雄，並同時展示他們的專業知識。 例如，在主頁上隨機轉變的橫幅圖片，展示不同了我們的團隊成員。

動態效果（Motion）

這個新設計的核心挑戰之一是需要重新思考和質疑互動的根本目的，在我們舊有的作品集上充滿了互動、動畫和視覺效果，這些互動、動畫和視覺效果不再符合我們的願景，即使每個運動元素都有意義並能加強品牌識別。

開發過程中的決擇

技術堆疊（Tech Stack）

以下是我們的技術堆疊以及我們為本網站做出的關鍵技術選擇的簡要概述：

• Kirby CMS – 一個輕巧且功能強大的CMS
• Barba.js – 平滑頁面轉換庫
• Vite.js – 一個快速的前端構建工具
• Locomotive Scroll (v5) – 流暢的滾動和模組管理庫

整個網站都是建立在Kirby CMS之上的，Kirby CMS以其靈活性和效率而聞名。 它為開發人員和終端使用者提供了高度最佳化的體驗。 這是一個基於PHP的CMS，我們與Twig一起使用，以增強開發人員的體驗。

JavaScript 和 動畫製作

正如我們之前提到的，新網站的關鍵原則之一，是能夠為讀者提供一個無縫的瀏覽體驗，同時也能夠以最大限度地提高頁面效能。

我們的 JavaScript 架構建立在 Locomotive 開發的 Locomotive Scroll（v5）的最新測試版上。 它具有 Modular.js 的模組管理和 Lenis 的滾動驅動動畫。 我們還使用 Barba.js 進行 ajax 頁面轉換和載入器。

為了確保儘可能小的 JavaScript 捆綁大小，我們故意選擇不使用 Anime.js 或 GSAP 等動畫引擎，而是隻依靠 CSS 動畫。 CSS 非常強大，在動畫方面經常被低估。

對於CSS，我們選擇了內置（inline）和基於檔案形式（file-based）的混合。 為了儘量減少佈局轉移並保持良好的載入效能，我們決定將關鍵的CSS直接包含在我們的HTML檔案中。 在內部，我們使用 BEM 方法來編寫CSS規則，我們的架構是經典的7-1結構和原子設計方法的混合體。

此外，為了減少最終的 CSS 檔案大小，我們使用 PurgeCSS，它解析所有模板並刪除未使用的 CSS 規則。 這對於消除不必要的網格列和偏移量特別有用，大大減少了最終樣式表的檔案大小。

所有 JavaScript 和 CSS 都由 Vite.js 管理，Vite.js 處理資產處理並提供最終的捆綁檔案。

效能和環境影響

再加上高效的快取規則、請求減少和各種最佳化（字型、影象、樣式等），所有這些努力使我們能夠實現明顯更輕的最終頁面重量。 主頁在初始載入時只有 500 KB的重量，只有12個 HTTP 請求。 整個捆綁的 JavaScript 檔案低於 30 KB（28.7 KB），而 CSS 仍然低於8 KB（7.8 KB）。

除了效能最佳化外，我們還密切關注我們網站對環境的影響。 得益於我們的輕量級架構和高效的資源管理，我們在 EcoIndex 上獲得了B級評級，在 Cosite Carbon 上獲得了A級評級，每次訪問的 CO2 僅為 0.13克，明顯低於1.76克的網路平均水準。 此外，我們的綠色託管在減少我們的碳足跡方面發揮著關鍵作用，因為它依靠可再生能源解決方案來為我們的基礎設施提供動力。 這些選擇反映了我們對建立一個高效能和對環境負責的網站的承諾。

總結

接受環保選擇並不意味著犧牲介面品質或使用者體驗。 相反，它促進了一種更深思熟慮和有目的的設計方法——這種方法不僅能最大限度地減少對環境的影響，還能提高可用性、效率和整體參與度。 透過優先考慮可持續性，我們創造了既負責任又精緻的數字體驗。

我們希望這個案例能讓您深入瞭解我們如何改進我們未來的專案。

感謝

Strategy: Brice Martinez, Mathieu Martin

SEO: Justine Menu, Mathieu Martin

Art direction & Design: Brice Martinez

Photography: Bastien Seon 

Typography : Romain Oudin

Development: Romain Breton, Antoine Cantoro, Cyrielle Vuillemin, Leonardo Pedroza Hernandez

Revision: Clara Boroniowna, Louise Ellermann

Hosting: Julien Corbiere