嗨！我是 Hayden。我是一名設計師兼開發者，直到最近，我還經營一家名為 Jellypepper 的小型工作室。
我們很幸運能與 ESLint 團隊合作，為他們打造全新的品牌和網站。我是 ESLint 的忠實粉絲，每天都在使用它，甚至還費心編寫了我自己的 600 行 ESLint 設定檔，以便在我的所有 React、Next.js 和 Expo 專案中使用。
Nicholas 最初在 Twitter 上聯繫我們，啟動了 ESLint 團隊成立九年以來規模最大的專案。他希望為 ESLint 團隊及其社群建立更強大的品牌形象，並使網站更具功能性、更易於導航，以及對從新手到資深使用者的所有人更有用。
嗨 Hayden，我想感謝您對 ESLint 的捐款。碰巧的是，這個專案正在尋求品牌重塑（保留標誌，其他全部更換）和網站改版，所以我想知道您是否有興趣。這似乎是一個潛在的好合作機會。
對我來說，這是一個夢寐以求的專案 😅 所以，不用說，我們完全投入了。
品牌
ESLint 品牌是一個有趣的案例——在沒有太多官方視覺設計的情況下，該團隊成功創建了一個獨特且廣受開發者社群認可的品牌。
標誌
標誌圖案是 ESLint 品牌形象的核心，也是最容易識別的部分之一。它是與其生態系統的連結——您可以在各處找到它，從 IDE 市場到整個網路的企業贊助頁面。它帶有對程式碼充滿熱情的開發者社群的期望。
雖然我們保留了圖示（考慮到它在網站、IDE、平台和專案中的廣泛使用），但我們希望使其更精緻、更現代和更具彈性。透過將其與我們新的主要字體 Space Grotesk（詳情見下文）結合在一起，我們創造了一個新的 ESLint 標誌圖案。由於其簡潔性，它可以適用於各種顏色和空間。
字體
作為一個內容驅動的組織，排版是新 ESLint 品牌的核心。網站、文件和部落格都需要排版具有可讀性和趣味性。該品牌利用一套有目的的排版樣式，旨在使內容盡可能方便所有人存取。
從技術角度來看，我們希望字體廣泛可存取且位置便利，以便可以隨處存取（尤其是在其他 Google 產品（如 Docs 和 Slides）上），並且它符合免費和開源的主題。
我們決定採用 Space Grotesk——這是一種出色的、獨特的字體，它在天賦與技術幾何元素之間取得平衡，反映了更以開發者為中心的方面。它以其特殊的細節創造了特色，這些細節與標誌圖案共享原則，並透過展示其更技術性的細節為品牌帶來活力和能量。
Space Grotesk 與其起源姊妹字體 Space Mono 相輔相成。它專為標題和展示排版的編輯用途而開發；字體形式融合幾何基礎和 grotesque 細節，以及 1960 年代標題字體中常見的特質，其中許多字體後來被科幻電影、電視和文學作品採用。
色彩
ESLint 的調色盤以與文案和標誌同樣強大的方式體現了品牌。它不僅影響品牌設計的外觀，還可以進一步引發情感並反映 ESLint 品牌的個性。色彩是設計給人的第一印象，因此，在設計的外觀和感覺中起著重要的作用。
雖然色彩可能是主觀的，但很明顯，好的色彩可以吸引和轉換使用者。另一方面，糟糕的色彩可能會趕走使用者，甚至使設計變得難以存取和無法使用。
由於 ESLint 的功能性本質，我們選擇保持簡潔，使用主要、中性和一小組輔助調色盤。新的主要調色盤源自原始標誌——我們使用兩種現有顏色來創建獨特的主要色調範圍。
網站
接下來是 ESLint 網站的改版。除了最大限度地提高網站的視覺吸引力外，我們還希望為每個頁面實現一些目標。例如，在首頁上
- 我們希望在 hero 區塊中包含 ESLint 的最新版本和即將推出的版本。這是設計的關鍵部分，因為這將是我們首次為 ESLint 更新設立專門的區塊。
- 我們希望推廣贊助。ESLint 依賴捐款來進行持續維護和開發，我們希望確保我們可以幫助加速專案的發展。
- 我們希望展示 ESLint 的實際應用——如何在真實世界中使用它，以及如何使用它使您的程式碼更具可讀性。
- 我們希望展示 ESLint 累積的一些驚人統計數據——截至目前，有 900 萬個依賴項、每週 2570 萬次下載和 GitHub 上 2.1 萬個星號。
我也希望在 ESLint 首頁 hero 區塊中引入一些動畫和活力，同時讓我們的受眾了解使用 ESLint 的感受。
VS Code 中的紅色底線是 ESLint 的代名詞，因為它是 VS Code 實作 ESLint 動作項目的方式。使用這些視覺指標，我創建了一個小而有趣的互動，為我們的訪客提供了簡化的體驗。
我對這個想法的成果特別滿意！💡
透過結合更廣泛品牌中的元素，包括 IDE 整合、程式碼片段和贊助者標誌，我們使品牌栩栩如生。此外，沒有 Addy Osmani 的推薦，任何開發者網站都不算完整。
文件
接下來是重頭戲，重新設計 ESLint 文件。文件是 ESLint 生態系統的核心部分，也是使用者查找有關專案和程式碼庫資訊的地方。
我們希望對其進行一些改版，在所有頁面中創建一致的資訊架構 (IA)，並使頁面更易於掃描和導航。我們還添加了一個版本下拉選單，用於查看文件的先前版本。
我也將這個小型的 Carbon Ads 元件發布為 Figma 社群檔案！
Playground
專案的最後一部分是一個名為 Playground 的新微型網站！它是一個很棒的小工具，可讓您使用易於使用的設定創建 ESLint 設定檔，並根據該設定檔測試您的程式碼。然後，一旦您對其感到滿意，您就可以下載您的設定檔以在本地使用。它也是讓新使用者直接在瀏覽器中嘗試 ESLint 的絕佳方式。
我們在開始設計 Playground 時考慮了一些關鍵要求——特別是我們希望使其易於使用，並使其易於創建和共享可重現的 ESLint 錯誤。使用者還應該能夠在不同版本的 ESLint 之間切換、查看給定問題的潛在修復方法以及安裝外掛程式。最終，團隊無法實作所有這些功能，但我們仍然為所有這些功能進行了設計。
這裡有一些棘手的設計挑戰需要克服——特別是圍繞資訊密度。在 UI 中公開所有規則會使內容在視覺上難以解析，因此我們需要一種將規則添加到 UI 的方法，而無需向下捲動到頁面底部，然後輕鬆自訂每個規則的值。
下一步是什麼？
ESLint 團隊目前正在逐步推出上述所有內容（您現在就在這個新網站上！）。
我要感謝 ESLint 團隊，特別是 Nicholas，感謝他們給我機會參與這個專案。我也非常幸運能與如此才華橫溢且充滿熱情的人們合作，例如 Sara 和 Gavin。
如果您對 ESLint 品牌有任何問題、意見或回饋，請在 Twitter 上透過 @haydenbleasel 與我聯繫。
祝您 linting 愉快，各位！✌️
