今年稍早，我們在 Sketch 中推出了即時協作功能，以及新的首頁，和我們產品的新願景。作為其中一部分，我們製作了一支精美的影片（如果您還沒看過，可以在頁面底部觀看）。在影片登上我們首頁後的幾天和幾週內，我們收到了許多讚美——以及許多關於我們如何製作影片的問題。
為了完整地講述這個故事，我們與 Sketch 中參與製作影片的一些優秀人才進行了訪談。繼續閱讀，不僅可以了解影片是如何從一個想法變成成品，還可以一窺一些被捨棄在 Sketch 畫布上的設計方向。
構思故事
「我大約花了一天時間構思旁白腳本的早期版本，」文案和內容主管 Freddie Harrison 表示。除了與我們的首席行銷長 Carly Marsh 討論她對影片的想法之外，Freddie 的任務相當開放——「我們知道我們是從一張空白畫布開始，對我來說，這非常 liberating（令人感到自由）。」
但这不僅讓 Freddie 可以自由地跳脫我們的品牌風格進行寫作。這意味著他可以以他想要的方式講述我們的故事。「在這個創意方法中，許多啟發我的靈感來自於看到我們這裡有多麼關心設計和設計師，」他解釋道。「我們會仔細琢磨細節，進行熱烈的討論，而且我們非常注重設計師的設計工具。」
探索一些概念
腳本確認後，我們項目的設計主管 Glenn 和 Prekesh 接手了工作。他們很快就決定，与其呈現太過具體的事物，不如透過動態來講述故事。兩人開始為影片的第一小段繪製不同的概念分鏡腳本，試圖找到他們都滿意的風格。
「我的想法是運用大量的顏色、漸層和雜訊紋理來創造圖像，」Prekesh 說。「我的第一個概念包含一個彩色的漸層，在其他形狀變化時保持不變。」
Prekesh 和 Glenn 逐格繪製他們的想法的分鏡腳本，以便快速查看動態效果。
Glenn 的一種風格靈感來自於琺瑯別針的趣味插圖。最後，雖然我們很喜歡這種風格，但它不足以支持更廣泛的宣傳活動——我們正在尋找一種具有更獨特視覺語言的東西。
「我也想出了一個很酷的極簡主義概念，」Glenn 解釋說。「它是黑白的，線條和幾何形狀非常強調動態。我們都很喜歡它，但最終它太過極簡了——我們想要更多色彩。」
兩人探索的另一種途徑是使用模糊的色塊，這些色塊可以相互作用，形成有趣的形狀和顏色。「這種方式感覺真的很好，尤其是在影片的開頭，但我們很快意識到它有限制性。」Prekesh 說。「我們最初嘗試將其與我第一個概念中的顏色結合起來，但新鮮感很快就消失了，我們意識到這樣做效果不太好。」
最終，Prekesh 的第一個概念決定了兩人如何在最終影片中運用色彩。「我從大的形狀開始，然後將它們模糊化，」他解釋說。「然後我將它們的混合模式設置為「差異」，接著將它們分組，並將組的混合模式設置為「疊加」。
Prekesh 確信它可以作為動畫後，Glenn 開始著手製作線框圖。目標是創建可以在整個影片中始終如一的形狀，並幫助故事保持視覺連貫性。
讓我們為色彩感到興奮
此時，是時候開始嘗試不同的顏色了。「我們想擺脫橘色調。它是一種非常搶眼的顏色，很容易搶走注意力，」Glenn 解釋道。他思考了 Sketch 的本質，以及人們如何使用它的工具來創造各種各樣的東西。他決定擁抱一些變化——但他最初的選擇……太多了。
最初的故事板在每個場景之間都有顏色變化。最終，這證明會分散視覺注意力，所以 Glenn 將過渡減少到只有幾種顏色（哦，看看我們差點使用的字體）。
「在測試了第一組顏色後，它看起來就像從一個場景到下一個場景的變化太多了，」他笑著說。「所以我們將其精簡為幾種，利用了 Prekesh 強大的漸層混合效果。」
受到一些經典的 Eames 設計的啟發，他也融入了米色——他承認這是幾個奇怪的選擇之一（「誰會把橘色和綠色搭配在一起？！」）——因為它作為漸層形狀的背景看起來很棒，並提供了一種中世紀現代美學。
最終的故事板使用了相同的插圖，但在幾個場景之後，顏色會巧妙地轉換。
隨著故事板的完成，Prekesh 開始製作一些簡單的動畫，供我們的動態設計師 Emma Kingsnorth 作為參考。
添加動態——和情感
Prekesh 開始在 Procreate 中逐幀工作，然後在 After Effects 中添加一些基本動畫，讓 Emma 清楚地了解不同元素在完成的影片中將如何移動和變換。「我在這裡的過程是找出所有過渡，以便我們可以使用這些極簡的元素講述一個連貫的故事，」他解釋說。
從那裡開始，Emma 接手並開始將這些參考與故事板中的形狀和顏色結合起來。「首先，我使用了一系列形狀圖層來製作不斷移動的白線，形成形狀，」Emma 說。「然後我添加了遮罩，在這些形狀後面創建無縫流動的顏色漸層。」
我們想要達到的視覺效果相當複雜，因為它使用了複雜的漸層。最終，Emma 通過一系列不同的顏色模式、圖層和預合成來構建它們，以創建漸層。「這意味著我可以移動組成每個漸層的不同部分，放大或縮小它們，並根據需要更改它們的顏色，」她解釋說。「在某些地方，我們必須使用一些相當複雜的遮罩來遮罩漸層，並從一種形狀變形到另一種形狀。」
Emma 構建好漸層後，在上面覆蓋了雜訊圖層，以賦予紋理和動感。
隨著 Emma 的工作，她將 Freddie 早期的想法變成了現實。「在每個關於『旅程』的『章節』中都有一個微妙的主題，」Freddie 解釋說。「這一切都與前進的動力和變化的指示有關，這是我們希望人們了解我們作為產品的現狀。」
更大規模的開始
除了影片之外，團隊還製作了一系列其他素材，包括社群媒體素材，以及重新設計的首頁。「原本的計畫只是要辦個宣傳活動，但我們很快意識到這次的成果非比尋常，」我們的設計總監 Marcelo Marfil 表示。「最終，這個大膽的設計語言表現得非常好，我們決定更進一步——現在我們正圍繞它打造一個全新的品牌。」
當他回顧製作這部影片以及更廣泛的重新推出所投入的數月工作時，他意識到這項任務的規模有多麼龐大。「我可以說，這絕對是我們有史以來最具挑戰性的宣傳活動——團隊的努力非常巨大。」
然而，除了最終的影片之外，這個故事代表的意義遠不止於此。它表明了我們作為一個設計平台，以及作為一個公司的現狀。最後一句話「這一切從 Sketch 開始」說明了這是我們新旅程的起點。但也代表了人們如何使用我們的工具。「雖然我們最常關注 UI 設計的使用案例，但許多令人難以置信的專案都是使用 Sketch 的成果，」Freddie 說。「因此，讓一切保持開放和充滿可能性，這點很重要。」
