海外網站布局的設計想法和例子

發表時間:2020-07-09 09:42作者:網站布局設計來源:蘇州互旦科技網址:http://www.zptv7ihx.cn/web-layout.html

建建設網站可能會令人不安,在您必須做出的所有設計決策中,更重要的是:網站的布局設計。


您的網站布局提供了一個框架,該框架以合理的方式,易于瀏覽的方式使您的網站結構化,并使您的內容脫穎而出。但是,如果您花時間在所有在線上,您會注意到許多網站的外觀都差不多-由于其布局。


根據視覺設計師和藝術總監安東尼奧·普拉塔斯(Antonio Pratas)的說法,這不一定是一件壞事。他認為,少數可識別的網絡布局設計已成為標準配置,因為它們具有功能性,并且用戶會自動了解其工作方式。


在本文中,我們將介紹七個實用的網站布局示例,這些示例的用途廣泛,足以適應不同的需求和視覺樣式。

01.自由網格

大多數網站都是使用某種網格設計的,以確保諸如間距和對齊之類的內容正確。使用網格肯定可以改善您的設計,但是某些網格布置已被過度使用或過于局限。


海外網站布局的設計想法和例子


這是自由格式網格可以派上用場的地方。它通常不受任何線條或容器的限制,并具有足夠的白色空間,以提供干凈,現代的外觀。該框架提供了一種寬松,靈活的結構,可以進行調整以適合網站的內容。


而不是受一種類型的網格單元限制,這種類型的布局可以混合并匹配不同的大小和形狀(例如拼圖),將多個單元組合為一個,甚至將網格的一部分留空。


第一個示例是Jonas Emmertsen和Henrik Ellersgaard的網站概念,已使用網格進行了布局,但最終設計中的劃分是不可預測的,受網站建設多長時間因素的影響。組成網格的元素的形狀和大小各不相同,從而創建了視覺上有趣的布置。


安德烈·漢庫(Andrei Hancu)為一家在線家具店設計的結構甚至更少。您可以看到一些基于幾何形狀的組織,但并非所有內容都能完美地對齊。


特別是在頁面的上半部分,產品圖像似乎以自由形式自行浮動。這以及鮮艷的色彩使該部分格外醒目。


如果你還是覺得難以達到這種效果,可以查看我們之前發布的“2020年網頁設計海外最佳軟件


Your Local Studio的投資組合網站非常小巧,具有一個圖像菜單,僅當您將鼠標放在它們上面時,它們才會顯示文本描述。


有一條看不見的分隔線,它垂直向下延伸到版面的中心以提供一定的結構,但是一些圖像在該線上延伸,或以不同的方式移至其任一側。


另一方面,BASIC的網站通過改變其網格行的高度以及每行中的單位數量來混合各種內容。

02.固定邊欄

導航是任何網站的重要組成部分-菜單是大多數用戶尋找的第一件事。使菜單保持可見的最常見方法之一是將其放在固定的側邊欄中。


海外網站布局的設計想法和例子


這意味著即使您在瀏覽網站的其余內容時,菜單仍然保持不變,并且始終可見。


側邊欄還可以包含菜單以外的內容,或者可能包含社交媒體鏈接,聯系信息或您希望訪問者輕松找到的其他內容。


Trefecta的網站是由阿姆斯特丹的建設開發的,具有傳統的左側邊欄,帶有公司徽標和簡單菜單,屬于高端網站定制業務。


該網站由Promise Tangeman設計(帶有Lindsay Letters的刻字),用于活動和派對造型公司,其斜角側邊欄帶有定制的裝飾,可以使這種布局更具藝術感。


Fabrique為梵高博物館(Van Gogh Museum)設計的設計包括色彩鮮艷的側邊欄,背景中帶有微妙的紋理。較大的尺寸留出空間來放置一些副本以及菜單按鈕。


這種布局的靈活性使博物館可以更改特色圖像和顏色以匹配不斷變化的展品。


凱莉·默里(Kelli Murray)設計了她網站的博客部分,其中包含一個包含多個單獨部分的通用且非傳統的側邊欄,且里面所有功能都具備響應式網站設計功能。


除了典型的帖子類別菜單外,它還包括圖像,她的網上商店中的商品,網站其他區域的鏈接,訂閱選項,搜索欄等等。關于側邊欄的好處是,它可以是您需要的任何樣式。

03.基于文本

為了簡單,輕松地布局網站,一些設計師選擇了主要基于文本的設計。這種類型的設計通常在具有黑色,白色或純色背景的圖像上亮起。


10-1-tb-800x0.jpg


總體效果可以是干凈且最小的,但是版式通常在較大的一側,并且具有某些特征以防止設計看起來平淡無趣。


在這里,不可能局的主頁在黑色背景上顯示了大號無襯線文本,但是當您選擇以下菜單選項之一時,這些列會以鮮艷的漸變亮起,這是一個很好的視覺驚喜:


接下來,Hamza Ishaq撰寫的The Minimalists網站以徽標為中心提供了一個彩色棋盤菜單:


杰克·拉納洛(Jake Ranallo)的設計通過添加一些手繪樣式字體并添加一些圖標和流行色來打亂文本:


最后,這個由邁克爾·馬奎爾(Michael Maguire)設計的電子郵件營銷公司的網站使用了一個簡單的首頁設置,該頁面強調了“電子郵件”中的“郵件”,并具有類型,顏色編碼和簡單的動畫效果,以實現意想不到的引人入勝卻又簡單的網站布局。


如果不知道怎么寫英文電子郵件,請查看之前我們寫的“英文郵件格式書寫注意事項


外觀:黃金法律商業廣告網站和橙黑廣告及營銷商業網站

04.兩欄

由于幾乎所有網站都涉及垂直滾動,因此請務必考慮您的內容在該方向上的顯示方式。對于通用框架,請嘗試將您的內容分為兩列。


海外網站布局的設計想法和例子


這使您可以利用水平和垂直布局技術,同時保持內容的井井有條。


機車在旅游網站Parcours Canada上采用的是這種風格,其特點是設計元素具有層次感和重疊性,幾乎具有拼貼感。


相比之下,這個來自Aude Degrassat的個人項目是使用保持行列形狀的獨特列和行網格構建的,而內容隨向下滾動而移動:


該站點(由羅伯特·拉爾森(Robert Larsen)設計)具有明確定義的,形狀統一的圓柱,偶爾會因某些變體的全角元素而中斷:


Get Bowtied的電子商務網站主題具有許多布局選項,其中之一是具有大圖像的兩列網格。響應式設計提供了靈活的布置方式,以適應各種設備。

05.安排在聯絡點附近

大多數設計受益于明確的重點。無論是圖像,排版還是其他內容,焦點都可以為觀看者提供一個開始探索您的設計的地方,并經常指出重要的信息。


但是,當大量站點內容繁多時,在網站設計中有效地使用焦點可能會很棘手。讓我們看一些成功地將其創造性地實現的設計。


對于旨在展示產品的網站,使該產品成為關注的中心是有意義的。 Ginventory已在其應用程序的網站上做到了這一點,展示了該應用程序本身如何與一系列動畫屏幕一起工作。而且適應用如何設計多語種網站的方案中。


JP Teixeira在快餐店的設計中采用了一種更靜態的方法,即在站點的每個水平區域都放置一個焦點。字體按照食物攝影的形狀排列,將您的視線引向每個點。


相比之下,格倫(Glenn)的本網站模板是圍繞一個單一焦點構建的,這對于旨在提升個人(例如歌手或其他藝術家)的網站來說是有意義的。


我們已經通過12種方法讓設計人員知道了焦點和其他基本設計原則的重要性,這12種方法使設計師知道設計看起來不錯,以及如何做到。

06.標題+圖片庫

這種布局是基于文本的設計和基本網格的組合。它是用于投資組合或電子商務網站的熱門廣告,通常在頂部帶有大標題(可能是“關于我”類型的聲明或業務說明),然后是圖片庫,通常是一些精選圖片。特色作品或產品照片。


Eduardo Nunes的投資組合網站就是一個典型的例子,它的字體醒目且項目精選:


Bonhomme采用類似的方法,增加了一個圖像側邊欄,該側邊欄通過畫廊中不同項目的特寫鏡頭旋轉。


設計公司Shellshock通過包括兩個畫廊,并以文本和圖標的形式添加有關公司的更多信息來分解圖像,從而將其自身站點混合在一起。


您在此處看到的“ Hello”標題是這種類型的網站流行的一種表達友好,相關主題的方法。


西爾維亞·普拉茨(Sylvia Prats)的另一個投資組合網站上,流行藍色的霓虹燈和一個連續的圖像網格(而不是均勻分布的照片)的畫廊:

07.模塊化

由于采用了Google的材料設計原則,我們的上一版式類別變得越來越流行。


模塊化布局(有時也稱為卡或塊布局)與典型網格不同,因為站點的每個區域都被封裝在一個容器(或模塊)中。


這為每個設計元素提供了一個獨特的空間,并經常創建流線型外觀。由于響應式設計已成為網站的必需品,因此設計師將模塊作為一種可以轉換為適合不同顯示方式的格式。


您可以在SocioDesign的設計人員中采用類似的方法來設計營銷咨詢,將模塊化概念擴展到網站的多個頁面上,如下所示。盡管頁面的布局有所不同,但它們由中性,精致的調色板結合在一起。


最后,亞當·巴瓦茲(AdamBa?azy)的Sodigital圖層設計是在攝影的基礎上進行的,還采用了有趣的顏色和透明度用途,以使模塊布局發生變化。


總結


可識別的網站布局設計-我們希望這些示例能夠說明如何以有趣和創造性的方式使用它們。您有沒有喜歡的通用布局嗎?隨時分享。

文章列表
2019-07-08
蘇州谷歌競價發現,許多外貿公司的網站都負責外包公司。對于其他批次的公司,他們依靠自己的探索方法。但他們經常遇到無法解決的問題。以下是Google Bidding教程方法的詳細說明。
2019-07-08
蘇州外貿推廣渠道有哪些?本次就關于B2B推廣,我總結了五種方法分享給大家,僅此幫助那些從事google推廣碰壁的人...
2019-07-09
蘇州谷歌代理現已是長三角負責google推廣的重要渠道之一,對于新入行的企業來講首先要知道其到底是做什么?自己可能...
2019-07-09
對于蘇州外貿網站建設的人來說,由于隨著全球電子商務的發展,許多外貿公司希望將品牌推向世界,并將建立一個外貿網站。那...
2019-07-10
做過的網站優化的人都會碰到網站收錄下降、網站被K或者是不收錄等情況,令人頭疼不已。本次就由蘇州seo外貿推廣教你6...
2019-07-10
從今天海外網站發展趨勢來講,如果外貿企業還想單靠網站在Google、bing和Yahoo等搜索引擎賺取流量和訂單,...
2019-07-11
由于外貿近年來遭受的損失,如何度過這場危機已成為最關鍵的問題。搞好外貿是一種在主要社交媒體上推廣網站排名和公司產品...
2019-07-11
首先要知道Google作為全球第一大搜索引擎,每天吸引的流量是無比龐大的。既然是外貿企業如果放棄這個推廣平臺,實在...
2019-07-12
蘇州google代理商就網站中最重要TKD教程中,今天抽取title標簽單獨講,后續也會把K和D逐一為大家分析。t
2019-07-12
蘇州谷歌代理商告訴你做優化首先要懂一些代碼,但是現在很多剛從事這類工作的人不是太懂代碼,只知道把標題、關鍵詞、描述...