9 個 GIF 動畫闡述 Web 設計的 25 年歷史

0
454

Froont,一家為 Web 設計師製作工具的舊金山公司,用 9 個 GIF 格式動畫來表現網頁設計在過去 25 年的發展歷程。如果你想知道為什麼 CSS 這麼重要,為什麼 Flash 會逐漸淘汰,這些動畫圖或許能讓你一窺究竟。

History Of Web 02

網頁設計的單色時代,約 1989 年。想想 Lynx 和其他以 Unix 為基礎的 Web 瀏覽器,這些瀏覽器只會透過網路從這個終端到另一個終端一個字一個字的蹦出來。沒有圖形使用者界面,只有一串字母和一個閃爍的光標。

History Of Web 02

現代化的開始,約 1995 年。第一個瀏覽器,例如 Mosaic,允許設計人員在網站上顯示圖片,但是唯一的方法是將這些網頁元素丟進不雅的表格佈局中。由於這真的很難精確定位,所以設計師得琢磨的非常清楚如何寫好表格嵌套表格再嵌套表格的代碼以便正確顯示內容。

History Of Web 03

幸運的是,JavaScript 出現了,為設計師提供了很大的便利性。 Flash 讓我們建立動態網站的設計更為簡便:例如,彈出窗口和在頁面上動態修改內容順序。但是相較於本地 HTML,JavaScript 速度很慢。

History Of Web 04

儘管 Flash 也曾風靡一時,但是現在幾乎已經被 HTML5 幹掉了,但是在 1996 年,它代表了網頁設計的一個新高度:能夠讓設計師按他們自己的方式使得頁面生動起來。這也是 Froont 飛出頁面和開場動畫等的黃金時代。但是,Flash 會佔用電腦大量的處理資源,這也使得它成為一種特別不友好的技術,尤其是對於移動設備例如筆記型電腦和智慧型手機而言。

History Of Web 05

CSS,首次發佈於 1998 年,解決了很多早期的 Web 設計問題。通過將網站美學設計從網頁內容中剝離出來,設計師終於可以按照自己的想法製作或者為客戶定製網頁了。雖然最早的 CSS 版本不是非常靈活,但是現在的 CSS 已然成為了設計師需要掌握的最重要的網路技術。

History Of Web 06

2007 年 iPhone 的問世給設計人員帶來了一個全新的難題:如何在智慧型手機這個更小的螢幕上設計網頁?一開始設計人員想到的是使用一種網格系統,這種網格系統可以根據設備螢幕的尺寸將網頁分割成若干列。

History Of Web 07

2010 年,對於如何在移動設備顯示網頁的問題,Ethan Marcotte 想到了另一種解決方案:響應式設計。

History Of Web 08

在響應性設計之後,一種撇去華麗效果重視內容的扁平化設計也出來了。這種設計簡化了視覺元素,通過突出漂亮的字體來創造 Web 體驗,而且顯示在任何設備上的效果都非常棒。

History Of Web 09

至於未來會如何?Froont 表示,更好的 Web 設計還在研究開發中。以後,設計人員將不需要再擔心瀏覽器的兼容性問題,各種適用於任何設備的工具也都將隨手可得。以後的技術將不會再成為設計的限制,設計師可以集中精力解決 UI 和 UX 問題,而不是把時間浪費在排除故障上。

如果你喜歡這些動畫,歡迎為我們按個讚。