網頁設計做得很好：優秀的社論

許多網頁設計討論都與內容有關。 頁面速度、設計系統、搜索引擎優化、框架、可訪問性——不勝枚舉。 這讓我們在Smashing Magazine有很多可寫的東西，這很棒，儘管值得提醒我們自己這一切都是為了什麼。

在我們的Web Design Done Well系列的第三版中，我們正在磨練許多網站的跳動心臟：內容。 更具體地說，編輯內容。 網絡為講故事的人提供了令人難以置信的工具選擇，作為一個偶爾的半勝任記者，我喜歡一個很好的獨家新聞。

以下是網絡技術與編輯內容相結合以將其提升到新水平的示例。 然後，我們將以更廣泛的技巧結束對數字內容的創造性思考。 即使是現在，被內容生產線壓得喘不過氣來，好東西仍然閃耀著光芒。

路透社傾向於刷卡

在這篇關於美國系統性種族主義的文章中，路透社圍繞滑動來塑造內容，將故事分成小塊。 閱讀感覺比通過傳統的滾動方式更有目的性。 就像翻書一樣。 在移動設備上，您實際上是輕彈到下一部分。 它可以提供快速、即時的報告——更不用說展示的出色數據可視化了。

我們生活在一個移動優先的世界。 珍惜這一點是沒有意義的。 是的，雜誌傳播對它們有一定的分類。 是的，桌面視圖為您提供了更大的畫布。 現實情況是，大多數人會在手機上查看您發布的內容，因此請認真閱讀。 對於類似的方法，《紐約時報》和Input的這些“新聞報導”也非常出色。 對於那些有興趣進一步閱讀以移動為中心的社論的人，強烈推薦傳奇報紙設計師馬里奧加西亞的故事。

紐約時報展示而不是講述

儘管 COVID-19 大流行造成了所有可怕的事情，但它至少帶來了一些令人驚嘆的好報導。 這篇互動的《紐約時報》文章通過將讀者帶到粒子級別來解釋口罩的工作原理。 您可以看到纖維如何捕捉顆粒，以及為什麼不同的口罩具有不同程度的有效性。 任何傻瓜都可以使復雜的主題難以理解，但使它們易於理解？ 這本身就是一種藝術形式。

這裡有很多元素在起作用。 圖形、顏色、動畫——如果你的船漂浮，甚至還有增強現實體驗。 本來很容易成為枯燥乏味的主題的東西被賦予了生命。 最重要的是，它是至關重要的信息。 這就是為什麼 Gabriel Gianordoli 在 2020 年新聞設計協會獎中被選為世界最佳設計師的原因。 粉碎。

華盛頓郵報可視化指數傳播

大流行還迫使數據可視化登上了世界各地出版物的頭版。 這篇關於 2020 年 3 月的指數傳播的文章（還記得嗎？）在可視化某些病毒如何以及為什麼很快成為真正的大問題方面做得非常出色。 從全面的模擬到小型的在線迷你圖，這是一個充分利用其數字設置的社論。

我特別喜歡這個的地方是它從不覺得無緣無故。 每一個視覺效果都改善了故事，以至於你幾乎為任何不得不用文字來解釋相同概念的人感到難過。 只需單擊一個按鈕，它就能以十幾種語言提供，這是另一種美妙的感覺——提醒人們，Web 實際上是無國界的。 我只能想像這篇文章幫助了全世界多少人。

馬歇爾項目混合媒體

在這裡，馬歇爾項目以兒童故事書的優雅和苦樂參半的美感展示了有關美國刑事司法系統的強硬新聞。 在“The Zo”中，創意寫作、引人注目的插圖、迷人的敘述和一個重要的故事相結合。 這是全流程的多媒體編輯。

他們說歌曲可以有多種形式。 在線編輯內容也是如此。 你在上面看到的靈感來自一篇 96 頁的學術論文。 它可以通過在線動畫系列找到新的觀眾，然後獲得兩個艾美獎提名，這證明了互聯網的變革力量。

SBS 的互動圖畫小說並不新鮮

說到互聯網的變革力量，互動故事怎麼樣。 我們都熟悉電影改編、廣播劇改編、迷你劇改編等等。 為什麼不進行網頁改編？ 這正是澳大利亞廣播公司 SBS 開始與The Boat合作的內容，這是對 Nam Le 同名書中的一個短篇故事的交互式複述。

頁面的開頭順序將您拉入其中，當您閱讀時，它的文字隨著海浪傾斜和翻滾，雷聲和雨聲充滿您的感官。 隨著故事的結束，Matt Huynh 的插圖像回憶一樣飄過。 這是一種非常生動的體驗，本身就很美，也是一種將文學帶給年輕一代的精明方式。

周圍的布丁猴

我希望我能及時看到這個鼓舞人心的網站系列的聲音版。 沒關係，它現在就在這裡。 在一個真正精彩的數字編輯展示中，布丁並沒有通過音樂來解釋無限猴子定理。 不知道猴子定理是什麼？ 好吧，您還在等什麼，該頁面的解釋工作將比我做得更好。 我會等。

通過使用交互式四音符示例，文章讓讀者參與其中，同時也使概念易於理解。 作為最後的、令人愉快的觸感，頁面本身就是一個活生生的、持續的實驗，隨機地在越來越複雜的曲調中運行。 你可以期待它在大約 19 年的時間裡搞定“七國軍”。 人們想知道一隻猴子在鍵盤上打字足夠長的時間是否可以創建完美的 JavaScript 框架。 希望永不止息。

一個列表分開：一個類分開

對於所有關於數據可視化、音樂、增強現實和其他時髦工具的討論，對於獲得基本權利有很多話要說。 頁面不必是拉斯維加斯大道的網絡等價物才能引人注目。 A list Apart比大多數都好。 它對內容的處理方式將永遠在我心中佔有一席之地。 標題、插圖、副本、藍色超鏈接。 美麗的。

我現在意識到的是很久以前，我寫了一篇關於“野蠻”網頁設計的兩個分支的文章。 我所說的要點是，一種方法是響亮而傲慢的，另一種方法是絕對實用的。 A List Apart顯示了後者做得正確的美麗。 多媒體工具包是一項很棒的資產，但即使是現在，有時也只能靠文字來完成。

創造性地思考內容

無論好壞，網絡絕對充斥著內容。 很多都很棒，很多都不是。 圍繞它的很多討論都帶有冷酷的、計算的節奏，你會很快期望工業家談論裝配線。 上面分享的例子希望能說明抵制把事情搞砸的衝動的價值，但讓我們成為現實：大多數網站沒有像《華盛頓郵報》這樣的資源。

然而，從個人博客到全球出版物，都有辦法創造性地思考各個層面的內容。 這裡有幾個：

• 質疑您的默認方法。
  我們是習慣的生物，包括我們如何講述我們的故事。 花點時間早點退後一步，問，我怎麼能以不同的方式做到這一點？ 也許一篇照片文章會比一篇文章更謹慎。 也許熱圖比表格更好。 專業化當然很重要，但不要讓它對其他通常互補的做事方式視而不見。
• 使用免費資源。
  互聯網的偉大禮物之一是有多少令人驚嘆的免費東西。 就像，實際上是免費的，故意的。 從攝影到圖形設計到數據可視化工具再到音頻編輯軟件，您只需點擊一下即可轉換您的內容所需的資源。 我們的免費贈品標籤是一個很好的起點。
• 給內容多種形式。
  正如馬歇爾計劃在“Zo”中特別出色地展示的那樣，當故事呈現不同的形式時，它們可以找到新的受眾。 寫了一篇文章？ 太好了，為什麼不錄製音頻版本？ 製作了數據驅動的報告？ 很酷，但是如果您開始將這些數字插入 D3 是否會像它一樣酷？ 只有一種方法可以找出答案。
• 實驗。
  這裡的例子是精華，但值得一提的是，嘗試新想法和接受偶爾的失敗會帶來巨大的收穫。 迭代是創作過程的關鍵。 如果您嘗試某事但它不起作用，那沒關係。 這是獲得有效方法的唯一途徑。

沒有一刀切的內容方法，但尊重故事是必不可少的。 Web 技術是補充性的，而不是主要事件。 不要讓他們成為搖狗的尾巴。 當故事與它的講述方式相協調時，最好的結果就會出現。 這是多年來一直伴隨著人們的內容。