EGON SUNG

< back

Architecture Commons

UI 設計、全站開發

2019 年 3 月 - 7 月

Architecture Commons 是一間專注於都市創新的設計事務所,強調與利害關係人協作,促進市民、企業、機構與政府之間的社會凝聚力。

Architecture Commons 需要一個能呈現其深厚且豐富作品集的線上據點,包含深度案例研究與業界領先的專案。網站需要讓訪客信任這是一間經手過重要專案、頗具規模的設計事務所。

網站將採中英雙語(英文與繁體中文)。

語氣中性,將重點放在專案、案例研究與團隊成員身上。

由於 Architecture Commons 本身就是一間設計事務所,他們對網站的參考方向已有一定想法。因此沒有太多 UX 研究的需求,因為他們心中已經清楚網站該呈現的樣貌與感覺。研究的重點反而放在網站的實際建置與執行方式上。

Flowchart of Architecture Commons website

CSS-grid

版面配置是透過 CSS-grid 實現的,讓區塊的位置與所佔空間可以更靈活地調整。

無限捲動循環

團隊希望首頁能有一種效果:當使用者捲動到頁面底部時,畫面會自動循環回到頂部。我們嘗試了許多不同的解決方案,只有一種真正可行,但可惜因為 iOS 裝置為保護使用者免受惡意網站影響而有所限制,這個效果在 iOS 上無法運作。

CMS

這是我第一次有機會在前端之外,一併建置 CMS。這是個很好的學習過程,讓我了解後端架構,同時也思考未來維護網站的人會經歷什麼流程。這個網站是用 Webflow 建置的,並非自建 CMS,但仍然學到不少。

Wireframes of Architecture Commons website

Webflow

整個網站都是用 Webflow 建置的,如今 Webflow 也成了我建立網站時的首選工具。

整體成果

團隊和我對最終呈現的網站都相當滿意。可惜的是,我一直沒能找到能跨瀏覽器運作的循環效果解決方案。不過其餘部分都運作良好,而 Architecture Commons 也持續經手令人驚艷的專案,繼續成長為國際上數一數二的都市設計事務所。

這是我個人最喜歡的專案之一,整個過程非常愉快,雖然偶爾會被一些技術細節搞得有點沮喪,但大多都能克服。團隊很信任我,給了我足夠的時間與空間去發揮,我也依循他們既有的設計語彙,同時加入自己的想法與判斷,讓成果更上一層樓。

在整理自己作品集的過程中,我很驚喜地發現,這個網站過了幾年後看起來依然相當不錯。不過我也注意到一些可以改進的地方。應該傳個訊息問問他們近況如何。