Web設計主題:創建一個古典風格的網站

2020-12-06 CSDN技術社區

如何進行古典風格的設計?主要針對酒店行業和聯邦政府進行Web開發的Ryan Boudreaux針對該話題發表了文章《Web design themes: Create a vintage look and feel》。CSDN對該文進行了編譯,內容如下:

你有被要求創建一個具有古典風格的商業網站嗎?在我們的小城鎮,有一些賣古典商品的小商家,你所在城市或許也有吧。古典在很多商業和組織中是一個很熱門的主題。該類型的商業包括二手衣服商店、寄售商店、特色食品商店、工藝精品店、家具城、廉價市場、攝影店等等。

我也注意到,這些商家很多都沒有自己的網站。即便有,網站的風格與商家的身份也不相匹配。商家的身份並未融入到Web設計中。本文將展示如何進行古典風格的設計。

過去給我們的啟示

圖1

蒸汽朋克(Steampunk)是一種流行於20世紀80年代至90年代初的科幻題裁,以蒸汽時代為背景,將蒸汽的力量無限擴大化,構築出一個超現實的科技世界。這個時代的精髓可以在小說和電影中發現,比如根據Jules Verne的小說改編的《海底兩萬裡》(20,000 Leagues Under the Sea)電影,它講述了19世紀一個遠洋偵查團隊發現了由Nemo船長指揮的未來潛水艇Nautilus。還有《時間機器》(The Time Machine),由H.G. Wells的小說改編而成,它講述了維多利亞時代的英國人乘坐自己製造的時光機器來到了80萬年後的未來。有關古代的題材可以在眾多的作品中發現,包括電視、視頻遊戲、音樂、行為藝術、網絡、角色扮演類遊戲、文學作品、漫畫和連環畫小說——它們都是創造古典風格網站的靈感來源。

圖2

古老的畫報、插圖、與圖1相似的電影海報、老式廣告(包括印刷的、手寫的)、老汽車、電視、收音機、老圖片——尤其是陳舊、積滿汙垢的顏色和文字等等,也是獲得靈感的重要來源。

建築也是靈驗的來源。例如比利時建築師Victor Horta的作品,1928年的圖爾奈美術博物館(Musée des Beaux-Arts in Tournai)是他的作品之一。(見圖2)

古典風格與主題

古典風格與主題按時代或主題進行分類,對流行文化有最大影響的可留存數十年。當今,仍適合採用古典設計的主題包括:

● 廣告

● 動物

● 藝術裝飾

● 新藝術風格(Art Nouveau)

● 美術工藝時代

● 亞洲古董

● 棒球

● 聖誕節

● 古典文學

● 硬幣和郵票

● 收藏品

● 釣魚

● 足球

● 黃金

● 軍隊與戰爭

● 明信片

● 收音機

● 唱片和專輯

● 玩具

等等

製圖

快速開發古典風格作品,製圖有重大作用。現在有大量的免費資源、共享軟體、低成本的圖形可以使用。

你不必自己設計圖形,可以購買一些,再對其進行編輯。Graphic River提供了一些由Sneek Digital公司製作的徽章類圖形。其中「8 Retro Vintage Badges」只需要6美元即可下載可編輯的PSD文件。Graphic River上有超過260組古典徽章可供購買,價格從2美元到8美元不等,同時還包括標籤、時間表、Logo圖、郵票、貼紙、郵件列表、背景、旅遊貼紙、導航元素、復古式Web元素、404頁面、框等等。(見圖3)

圖3

另一個重要的圖形來源是Pinterest網站中的Vintage Graphics板(Vintage Graphics Board)。包含705個Pin(Pin:字面意思是圖釘,可以理解為把一張圖片(或視頻)貼到一個板(Board)上,直白來理解就是收藏一個圖片(或視頻))。如果圖形不能直接使用,你也可以從該網站上獲得設計自己作品的靈感。(見圖4)

圖4

Squidoo上有一篇很棒的關於圖形設計的文章,其中有一系列老式圖片和古董剪貼畫,包括:復古式廣告藝術、舊時代照片、復古式賀卡等等。

字體和字型

確保所選擇字體和字型與你的古典設計風格相融合。下面列出了幾種適於古典設計的字體。

Summertime:由Sara設計的一款適用於古典設計的字體。見圖5。

圖5

Futura Condensed Medium:最初由Paul Renner於1927年設計。該字體基於1919~1933年代包浩斯設計風格中幾何形狀的設計理念。見圖6。

圖6

Lobster:由Impallari設計。見圖7。

圖7

Rockwell:最初由Monotype foundry的內部工作室於1934年設計,為Serif字型,屬於Slab Serif類。見圖8。

圖8

Chunk Five:是Slab Serif系列的超粗字體,它會讓人聯想到古時美國西部的木刻畫、報紙的大標題。主要用來突出顯示,該字體完全適用於現代。見圖9。

圖9

Henry Jones在Web Design Ledger 網站上發布了一篇《30 Fonts Perfect for Vintage and Retro Style Design》,列出了更多的字體,從中你可以獲得更多的靈感。Flickr網站中的Vintage Typography群組中列出了9400多張圖片,自稱為古典排版樣式的最終來源,包含廣告、宣傳畫、卡片、門票、包裝等所有排版物中的所有排版元素,如樣式、logo、文字等。截圖見圖10。

圖10

具有古典設計風格的Web網站

最後,分享六個古典設計風格的Web網站,希望你可以從中可以獲得更多的靈感與機會。

Mom and Popcorn

Level Two Design

The New York Moon

The Cottonseed Oil Tour

Island Photo Booth

Font Diner

(編譯:陳秋歌 責編:朱慧濤)

原文連結:Web design themes: Create a vintage look and feel

本文為CSDN編譯整理,未經允許不得轉載。如需轉載請聯繫market@csdn.net。

相關焦點

  • Google 來做你的網站主美,輕鬆實現 Material Design 設計風格
    近日 Google 發布了前端開發語言框架 Material Design Lite (MDL),包含一些符合其設計風格的按鈕、複選框、輸入區、排版樣式、以及對應的網格系統和自適應排版系統。與 Twitter 推出的 Bootstrap 類似,MDL 是為了幫其他開發者快速實現統一的網站風格。
  • 企業網站設計合理的布局方式
    >在設計網站的頁面時,其效果不僅需要與網站的主題風格保持一致,在排版上還需要保持寬鬆有致,簡約大方,頁面內容排版一定不要過於擁擠,在該留白的地方要勇於留白。並且個性化的設計還能讓用戶更加喜愛和容易記住網站的內容,這樣無論是企業宣傳品牌還是推廣產品,都能起到非常好的助力作用。網站主題風格簡潔明朗雖然非常酷炫的網站風格能夠給用戶造成非常強烈的視覺衝擊,從而被其吸引住。
  • App設計VS Web設計:互相學習到了什麼
    他們認為,網站上功能越多,網站越有用。儘管Web設計勿須考慮小屏幕問題,但並不意味著一個大頁面上充滿各類功能就對用戶有用。核心就是:價值。如果你誠實地加上一個功能,這個功能為你的用戶提供了更多價值,那重要的是找到一個將它(功能)融入你現有的用戶體驗的方法,這值得一試。但千萬不要加入不必要的功能。
  • 十種方式用AI進行Web設計
    記住,人工智慧今天的作用是確保用戶有一個整體的經驗,它也可以個性化。AI在個人博客和公司網站上使用都很理想,但是這些平臺上使用的參數也會有所不同。在網上,人工智慧創建了一個虛擬機器人,目的是使生活更容易,以及增加價值。
  • Web 設計和開發工具指南
    Adobe Dreamweaver類型: 付費(就像所有的 Adobe 工具一樣, 這是一個軟體, 你可以每個月訂閱他們的計劃)。Adobe Dreamweaver 是為各個階段的網站和各種技能級別的 web 開發者設計的工具。 從直觀的代碼編輯功能到實時視圖, 它給你各種選項來設計和編輯你的網站。
  • 教您如何使用WebMatrix創建第一個網頁
    導讀:Microsoft WebMatrix是一個免費的工具,可用於創建、自定義和在Internet上發布網站。WebMatrix使您能夠輕鬆創建網站。通過在您的開發桌面使用與您將在Web主機上使用的相同堆棧,將網站上線的過程變得既輕鬆又順利。您可以從http://web.ms/webmatrix下載它。
  • 新中式風格設計要點有哪些?與古典中式如何區分?家具如何搭配?
    新中式風格是作為傳統中式家居風格的現代生活理念,通過提取傳統家居的精華元素和生活符號進行合理的搭配布局,在整體的家居設計中,既有中式家居的傳統韻味,又更多的符合了現代人居住的生活特點。
  • Web註冊設計:參考下這5種類型的網站設計
    ,就要進行註冊網站用戶了。第一種模式使用的最多,最廣泛,隨著越來越多的人使用網際網路,而使用網際網路的用戶水平參差不齊,很多網站都在嘗試著降低用戶學習的成本;加之人們都擁有常見的帳號如QQ號、微信號、微博號等,便捷省時的第三方登錄正在大肆興起。筆者主要研究的是普通的web註冊登錄,暫不包含第三方登錄。
  • 古典風格裝修效果圖好不好看?
    古典元素不管是在哪個時代都是被人們所追求,因為和現代元素想必的話你更發現古典美,在生活上不僅僅只有是在穿衣搭配上有古典味,其實在裝修房屋上也可以把這種古典風格展現出來,那麼我們今天就來看看古典風格裝修效果圖好不好看吧!
  • Web前端的就業前景如何
    Web前端對網站而言,通常指前端部分,它包括網站表現層和網站結構層。所以一般來說,前端技術分為前端設計和前端開發,網絡的視覺設計主要是有前端設計負責,網站的前端代碼實現,主要是由前端開發負責。基本的有 HTML和 CSS, JavaScript/ajax,以及目前新的高級版本HTML5,CSS3,以及 SVG等等。
  • 50+PSD用戶界面Web設計素材
    這樣在設計圈的江湖裡才能混出名堂來。當然,如果你想獨立門派那就另當別論了。今天我們就分享出50多個用戶界面的WEB設計元素。這些素材不管是對於老鳥和菜鳥都值得你收藏下來。免費元素軟的UI工具包:免費的PSD模擬網頁設計一個樣機常見的網頁元素的設置,由Adrian佩爾蒂埃設計和六個修訂提供。
  • 鳶尾花預測:如何創建機器學習Web應用程式?
    本文就將展示如何在Python庫中使用streamlit,用不到50行的代碼構建一個簡單的基於機器學習的數據科學web應用程式。數據科學生命周期鳶尾花預測應用程式概述我們將構建一個簡單的機器學習web應用程式,用於預測鳶尾花的類標籤,包括setosa、versicolor和virginica。
  • 貴陽壹號sww店鋪-中式古典風格|貼近自然點綴愜意空間
    近幾年來,中式風格設計逐漸走入人們的視線,憑藉古典優雅的裝飾特點深受大眾的喜愛。中式風格設計與西方設計風格是不同的,因為它們是不同文化背景所衍生出來的產物,所以本質上就有所區別。中西裝修風格的完美結合,打造出一個獨一無二的餐廳,有效吸引更多顧客來。一個圓形的花壇裡栽種了一棵樹,位於核心位置,一棵樹的有效點綴了整個餐廳,使整個餐廳變得不再壓抑,更加貼近大自然景象;從而從側面營造出一種輕鬆的氛圍。
  • 2020年30個最佳Shopify主題模板使您可以輕鬆找到理想的設計
    這裡我們給大家推薦一些不錯的Shopify主題,這些主題性價比非常高,而且功能完善。 1. Wokiee Wookie將是您當前或將來Shopify商店的完美解決方案。它具有所有必需的工具和模塊,可以創建具有出色UX的超快速響應網站,並且多種多樣的布局和樣式允許創建不同的結構並滿足任何特定要求。
  • 17 款常用響應式 web UI 框架 - OSCHINA - 中文開源技術交流社區
    Less Framework Less框架是一個用於設計自適應網站的CSS網格系統,它包含4個布局和3套預設布局,這些都以一個單一網格為基礎。Less框架的目標是更高效地創建多布局網站,並在布局之間保持一致。
  • 如何建立個人網站?
    緊跟新設計趨勢並且極具獨特風格。包含作品集,簡歷,商業用途等網站模板。http://Template.net 提供豐富的個人網站模板,包括可用於展示產品的設計,作品集或插圖。尤其作品集模板的創意主題被廣泛使用。這個基於HTML5的作品集模板為設計增添了獨特的觸感,可以幫您豐富網站創意。Download here.
  • Web前端應用十種常用技術
    隨著JS與XHTML的應用普及,越來越多的web界面應用技術出現在網站上,比如我們常見的日曆控制項,搜索下拉框等,這些web界面應用技術大大的豐富了網站的表現形式,本文將為您精心推薦十種最常見的web界面應用技術。Web應用程式的界面設計,其核心就是網頁設計 ,但它的重點主要是在功能方面。
  • 中式古典風格的裝修特點是什麼
    中式風格的設計要素:在中式裝飾風格的住宅中,空間裝飾多採用簡潔、硬朗的直線條,有些家庭還會採用具有西方工業設計色彩的板式家具與中式風格的家具搭配使用。直線裝飾在空間中的使用,不僅反映出現代人追求簡單生活的居住要求,更迎和了中式家居追求內斂、質樸的設計風格,使中式風格更加實用、更富現代感。
  • 古典歐式風格——柱式的變化及特點
    在中世紀,羅馬戰士將埃及藝術、希臘藝術、拜佔庭藝術、羅曼藝術,通過戰爭帶入整個歐洲大陸,隨之構成了歐洲早期的藝術風格。時間脈絡圖上,古典歐式風格細分下來有很多種:拜佔庭風格、羅馬式風格、哥德式風格、文藝復興風格、巴洛克風格、洛可可風格等,每一個風格持續的時間在2—4個世紀左右。
  • 科學松鼠會架構升級 泛科技主題網站果殼網上線
    2010年11月14日,北京——秉持面向大眾傳播科學文化的使命,著名民間科普組織科學松鼠會宣布對組織架構進行全新升級,創建民政註冊的公益性非營利機構哈賽科技傳播中心,管理以科學松鼠會為旗艦的科普項目群;以及北京果殼互動科技傳媒有限公司,推出泛科技主題網站果殼網(Guokr.com)和圖書品牌果殼閱讀