對於我們的網頁團隊來說，改版首頁和部落格是一次真正豐富的經驗。由於團隊規模小，設計師在任何專案的早期階段都能與開發人員密切合作，讓每個人的專業知識都能派上用場。就首頁重新設計而言，這也是一個回饋社群的絕佳機會，讓 Sketch 創作者成為焦點。
最近，我們與網站幕後的這些高手們聊了聊，以了解更多關於這個專案的緣起。
你們是如何想出新首頁設計的點子的？可以跟我們聊聊你們的腦力激盪過程嗎？
一切始於在首頁上展示和推廣其他設計師作品的想法，而不是僅僅在頁面中間放一小塊區域。我們的產品是設計師每天用來工作的工具，所以為什麼不展示 Sketch 可以實現的功能，而不是只銷售一個工具呢？這是首頁主視覺設計的最初概念。
客製化首頁的想法是後來才出現的，同時也考慮到我們製作這個頁面的時間有限。我們從去年 11 月開始著手進行，並於今年 1 月發佈。
我記得我在一個 Slack 討論串中寫下了這個想法，當時我們正在討論和收集來自不同設計師的作品，希望在我們的常規首頁上展示。我們希望藉由在客製化版本的首頁上展示一小部分社群設計師的作品，並提供客製化的網址，來表達我們對他們的感謝。
我們的產品是設計師每天用來工作的工具，所以為什麼不展示 Sketch 可以實現的功能，而不是只銷售一個工具呢？
我們成功地在 1 月 4 日推出了 14 個客製化首頁。之後又陸續增加了一些，我們也樂於製作更多。（偷偷告訴你！跟我說一聲，或許我可以把你的 Sketch 作品放到我們的首頁上！）
我們對相關的設計師們保密，讓這成為一個驚喜，大家都非常喜歡。最近我們也新增了幾個版本——一個展示了我們的「單圖層挑戰賽」的獲獎者和榮譽提名，另一個則是情人節版本。之後肯定還會有更多！— Augusto Lopes，首席網頁設計師
實際看起來更棒 線上看 😉
你們在技術上遇到的最大挑戰是什麼？你們是如何克服的？
信不信由你，最大的挑戰是那些在首頁和Beyond the Canvas 部落格上看似微不足道卻又錦上添花的小功能！
在製作首頁時，我的目標是讓它盡可能地接近產品實際樣貌，同時也要看起來自然。然而，模擬游標移動卻是一項挑戰。單純用幾個 CSS 關鍵影格來寫游標位置看起來並不自然。因此，我決定使用Perlin 雜訊以及它的JavaScript 實作。這讓我得以在二維空間中產生多個彼此靠近的座標，讓游標看起來像是隨機（且自然！）移動。
另一個挑戰是完善與首頁區塊中的畫板和其他 UI 元素（例如評論和原型箭頭）的互動，使其表現得就像在 Mac app 中一樣。確保點擊、拖曳、放置和其他互動在所有不同的情境和解析度下都能正常運作，確實很困難，但也是這個專案中有趣的部分。
至於「Beyond the Canvas」部落格，最大的障礙是要確保我們所有既有的部落格文章在新設計下都能保持完好。擁有合適的設計系統絕對有助於我們完成這個過程，因此回頭修改舊的部落格文章以適應新設計並不是什麼大問題。— Vladan Vukmanov，行銷網頁負責人
為什麼你覺得是時候改版「Beyond the Canvas」了？你希望這個新設計能帶來什麼？
我們一直有個想法，就是讓「Beyond the Canvas」成為一個平台，讓我們更廣泛地討論設計產業的主題，而不受限於 Sketch 品牌。將它變成更像是一個線上雜誌，分享有趣、發人深省且實用的文章、影片、觀點等等。簡而言之，「Beyond the Canvas」是 Sketch 設計產業內容的新家。
在整體設計方法方面，我們希望它成為 Sketch 內的一個子品牌。它的視覺風格與主品牌有所不同，但並非完全脫離——仍然使用相同的字體和其他小細節來與主品牌呼應。在我們集思廣益的過程中，大家都同意它需要保持簡潔，讓內容本身成為焦點。
最終，我們提出了這個新的復古風格設計，採用柔和的色彩、簡潔卻精緻的插圖和直截了當的排版，讓我們可以輕鬆地調整區塊和元件的位置。我們去除許多主品牌的細節，例如陰影、透明度、圓角等等，幾乎回歸到最基本的樣式，以真正專注於文章及其多元的內容。
對我們內部網頁團隊來說，新的基於元件的方法釋放了許多能力，可以有效率地建構新的區塊並快速進行更新。對於我們的作者來說，這是一個穩定的平台，可以產出新穎且精彩的內容。對於 Sketch 愛好者和整個設計社群來說，我們希望它是一個關於設計的一切的良好資源！— Osvaldas “Oz” Poviliunas，網頁設計師
當分類顏色和部落格標題碰巧相符時，感覺真棒💅
從開發的角度來看，你對部落格改版中最感到自豪的功能是什麼？
由於這是完整的重新設計，很難確切指出某個功能，但我可以舉一些我喜歡開發且更具挑戰性的例子。
我們最初的做法是將其建構為一個元件庫，然後將所有元件組裝起來。這種方法很好地測試了我們的合作能力。我開發了專案的第一階段，但當我不在時，Miguel 接手了，一切都很順利。這對我們網站未來基於元件的方法來說是一個很好的概念驗證。
我非常喜歡開發文章列表的元件，因為它最初是三個或四個不同的元件，最終濃縮成一個更簡單、更有效率的元件。Oz 簡潔且模組化的設計是它可重複使用的關鍵。
另一個讓我投入許多心血的元件是首頁的 Hero Slider 和分類頁面的 Hero 區塊。讓這些大型色塊栩栩如生，並根據當前文章或網站位置進行調整，是一項相當有趣的挑戰。
最後，雖然我沒有參與太多開發工作，但我最自豪的功能是我們的導航欄——它看起來棒極了！🤩 — Daniel Pereira，網頁開發人員
你最喜歡新首頁設計的哪個部分？
令人驚豔的 Hero 區塊 及其多功能性！絕對是它的多功能性！我第一次看到設計檔案時，並沒有意識到它的全部潛力。我當時對它的外觀抱持懷疑態度。後來我看到了實際的成果，我喜歡它。它很有趣，你可以像在 Sketch 的畫板上一樣拖動圖片。很棒的小驚喜，對吧？
後來我才知道，我們會為社群中的一些設計師，例如 Gavin 和 Viviane，設計客製化的首頁。每個人都會得到一個完全客製化的 Hero 區塊 來展示他們作品。這不是很棒嗎？那可能是那週全世界最棒的點子了。就算不是，也感覺像是。
然後，時間來到二月，我們在海牙，天氣很冷，我們正在開公司會議。有人想起了夏天，建議我們可以使用全新首頁的 Hero 區塊 來展示沙灘、陽光和彩色遮陽傘的圖片。還有一個沙堡桶、一隻涼鞋和一個 甜甜圈 — 一種源自德國，後在葡萄牙發揚光大，並成為海灘必備美食的甜點。
「這太瘋狂了！」我聽到我的腦海中響起美國肌肉車 V8 引擎的轟鳴聲。我們可以用它來宣傳活動和特殊節日。它有著無限的 可能性。那麼，在 2 月 14 日情人節當天收集 愛神的箭 如何？
這個設計和它的開發方式讓我們可以輕鬆地改變首頁的整體風格。因此，對於一個喜歡彩蛋的人來說， Hero 區塊 絕對是我最喜歡的首頁元素。— Miguel Antunes，網頁開發人員
錯過了這個特別版首頁嗎？請持續關注我們的下一個版本！
未來展望
除了更多像情人節特輯這樣的趣味嘗試之外，網頁團隊目前正在努力採用基於元件的方法，以便設計師可以從一個模擬開發人員端的素材庫中進行設計。目標是提高流程效率並減少品質保證的輪次。
對於開發人員來說，與設計師一起工作有助於設定挑戰，並使他們的工作更具活力。我們的首頁就是最好的證明。由兩位設計師組成的小團隊，透過令人驚豔的視覺設計，找到了一種讓網站煥然一新的方法。而我們的部落格——「畫布之外」——則讓團隊得以探索以元件為導向的開發方式。他們仍然渴望繼續在我們的網站上取得更大的成就。
敬請期待！
