站傳遞的信息。

08.整齊的排版和溫暖的色調

坦率的講,柵格運用的最多的地方還是傳統媒體,網絡媒體運用柵格的方式與之還是有差別的。不過StudioAlto的網頁證明了一點:網頁排版一樣可以借助柵格做到類似傳統屏幕印刷行業的排版樣式。頁面中暖色調的運用,讓整個頁面的更加風格化,這種類似牛皮紙的色彩令整個頁面的質感更上一層樓了。

09.簡單的布局和干凈的留白

設計網頁的時候,留白是重要的工具和元素,掌控留白的使用技巧非常有必要。MadeByShape的“關于我們”頁面的設計就是這樣的一個案例,棱角分明的形狀和不同的區塊被留白清晰地分割開,柔和的色調賦予頁面以時尚感和生命力。如果你所設計的頁面內容信息量很大,不妨好好運用留白吧。

10.可視化的時間軸和吸引人的配色

如果要展現一個產品的發展歷程,沒有什么比時間軸更加合適了。Moz的這個關于我們的頁面設計就充分運用了這一元素。時間軸并非是固定的圖片,其中的事件和內容是可以同用戶進行交互和互動的。如此一來,整個時間軸便可以向用戶講述整個故事,讓用戶也感受到參與感。整個設計的另外一個亮點是它的配色。

11.插畫式圖片和溫暖的基調

你們是否擁有一個強大的幕后團隊呢?如果是,不妨在“關于我們”頁面中好好地展現他們。其實FoodStudio的這個頁面的設計并不涉及過于復雜的技巧,他們只是將團隊成員的頭像更換為插畫風,配合溫暖的基調,讓整個頁面的風格一下就脫穎而出。這樣的設計最重要的一點是統一,一致性是風格化的基礎。

12.大膽的用色和超大的團隊照片

如果你想讓你的設計更加突出更有影響力,不妨試著讓一些元素更大,讓配色更加亮眼。正如Mixd所設計的,用高清的團隊成員大圖來突出每個成員的存在感,加上高對比度的色彩搭配,整個設計看起來也非常不錯。值得注意的是,挑選合適的元素放大,不要全都放大,這樣就沒有重心了。

13.時尚的圖片和簡約的布局

KingdomCoffeeandCycles的整個設計可以說是現代風設計的典范,布局簡單,時尚的圖片,干凈整齊,色彩明亮。圖片是整個頁面的視覺設計的重心,圖片、視頻、地圖的混合搭配消解了頁面的單調和簡單的特質。技巧上,設計師使用了團隊的Instagram的作品做成拼貼置于頁面底部,看起來也非常時尚有趣。

14.簡潔的圖形和鋒銳的線條

這種類型的網頁設計走的是時尚現代風,干凈的外觀,輕量級的圖片選取,大量的留白和整齊的排版,非常專業也非常的養眼,堪稱完美的框架可以承載多種多樣的內容。同時,這個頁面的設計案例也同樣展現出留白的重要性。

15.大膽的提亮色和高亮信息

6tematik的關于我們頁面設計非常有意思。黑白配色永遠不會過時,但是在某些情況下黑白并不足以滿足全部的需求,這個頁面就使用了高飽和度的紅色來藍色來作為提亮色,大膽而有效。要注意的地方在于,你高亮的信息越多,高亮的效果就越差,因為高亮的地方越多,用戶越難于發現真正重要的地方。所以,你要做的是標記出真正重要的事情。

16.大留白和小元素

大和小在很多情況下都是對比出來的。Margin通常指的是主體周圍的邊緣、留白和邊界。較小的邊界可以讓主體更有張力,覆蓋更大的范圍。但是Alfred的關于我們頁面并沒有這么做,大量的留白、寬廣的邊緣讓整個頁面看起來文藝氣息十足,簡約而輕松。雖然這樣的設計并不常規,但是也正是這種非常規的設計讓整個頁面充滿了獨特的風格與調性。

17.獨特的字體和個性化的檔案

獨特的手寫字體賦予BigCartel的頁面以一種不同凡響的張力,雖然簡單,但是讓設計大放異彩。個性化的員工檔案同上方別具一格的字體一樣獨特,參差多態的設計讓整個頁面在氣息上保持了一致性。當你點擊員工頭像的播放按鍵的時候,會播放一段頗有性格的視頻,獨樹一幟。

18.模塊化布局和溫暖的色彩

當你看到這個頁面的時候,我想你也會注意到它獨特的設計:頁面的區塊是精心分割出來的,從上到下每一塊的內容都會承上啟下,上一塊引出下一塊,就像梯子一樣。這樣一來,模塊化的頁面也顯得很有條理,整齊而又自由。頁面的配色和用圖也是非常講究的,黑白的基調配合溫暖的棕色,創造出溫馨的氛圍。

19.醒目的色彩和大膽的圖片

Visionaire的用色簡直是大膽的典型,紅色Banner的使用極為抓人眼球,還和品牌用色相互呼應。錯落的排版和別具一格的圖片使用讓用戶不會輕易忘記這個不同一般的網站。信息圖的使用也是這個關于我們頁面的特色。

20.強對比和復古插畫

WoahNellyCatering的關于我們頁面并沒有追隨最流行的設計手法,而是采用了溫暖懷舊的色調和設計元素來營造氛圍,鮮艷漂亮的插畫不僅讓頁面充滿活力,而且也簡單直觀。復古插畫的微妙之處在于其中添加了紋理,讓它質感非常不錯,這也讓白底黑字的元素可以更加顯眼突出,構成對比。

21.整潔的配色和均衡的排版

漂亮的無襯線字體、均衡的排版和均勻光潔的配色讓EBPearls的關于我們頁面看起來專業無比。合理的留白和淺色的圖片的使用給人一種優雅的感覺。

22.柔和的色彩和簡單的插畫

很多時候設計并不是越復雜越好,EVABlackDesign的關于我們頁面使用簡單的設計反而更容易營造時尚現代的感覺。簡約的暖色調圖片同黑白灰配合在一起,給人以柔和的感覺,點綴以簡單的插畫,讓整個頁面在整飭的設計之下還擁有了些許個性。

23.動效和富有沖擊力的排版

想讓你的設計栩栩如生富于生命力?那么讓它們動起來好了!用短視頻替代圖片,或者使用GIF圖片,這也都是目前流行的設計手法。純黑色的文本和紅色的元素的使用,讓整個頁面充滿了個性,也讓排版充滿了沖擊力。

24.創意排版和吸引力十足的圖片

圖片居中的獨特排版是這個關于我們頁面的有趣之處,而團隊成員的照片也正好居于這樣的位置,這使得兩邊的檔案信息排版需要向中間對齊。復古元素和配色的使用則支撐起了整個頁面的設計,值得學習哦。

25.大膽的布局和色彩濾鏡

大膽使用獨特的、先鋒的布局是令人難忘的重要手段,同時搭配以個性十足的配色,效果絕對不錯。干凈的無襯線體的選擇,色彩濾鏡下的圖片,都是這個關于我們頁面的突出之處。

本文地址:思維素材

40個網頁設計優秀案例

關于我們的頁面設計并不難,但是要設計一個完美的版本并不容易。它通常取決于你的出發點,是要個性化的設計,還是品牌化的運作?是提供自己聯系方式,還是獲取用戶的聯系方式?下面的優秀案例會告訴你,優秀的關于我們頁面要如何設計。

1、友好的界面

友好的聯系人界面總會讓人感到親切的,如果它還具備一些功能性,并且易于閱讀,用戶會感覺更加舒適的。“Whatcanwehelpyouwith”則可以引導用戶去點擊“加入我們”“聘用我們”以及參與郵件訂閱。

2、展示全球各地辦公室

Tool的關于我們頁面中,設計師用醒目的字體標注出團隊在

洛杉磯

、紐約和法國的辦公室的地址和聯系方式,點開關于我們頁面的用戶不就是想知道這些信息么?正確的聯系方式,簡單直接的設計,就是這么做的。

3、簡化溝通流程

ProctiongLocation的聯系我們頁面同樣采用了大膽而視覺化的頁面設計,但是和其他的同類頁面不同的是,它簡化了溝通流程,把用戶可能會關注的內容和需要溝通的具體部分都劃分了一下,讓不同需求的用戶直接被引導到特定的頁面和部分,從而達成簡化和分流的目的。

4、頭像和個性化的信息

放上設計師和團隊成員的圖片,讓用戶認識你。最關鍵的并不是你的頭像夠不夠漂亮,而是要讓用戶知道這個漂亮的網站背后是一位和你我一樣真實而平凡的設計師,是他或者她努力設計之后的成果。頭像可以讓頁面更加個性化,也能讓它更加真實而親近。

5、鼓勵用戶溝通

關于我們頁面的核心設計目的通常是溝通,而HelloInnovation的頁面設計則充分貫徹這一思路:試圖鼓勵用戶主動同網站進行溝通。用親切而富有

親和力

的設計,留下聯系方式,從文案到留下郵箱的地址都在鼓勵用戶。聊一句,能有多難呢?

6、用圖片來傳遞隱喻

設計博物館中收藏了許多設計相關的藏品,而關于我們頁面中的這個電話不僅是網站的藏品,而且作為一個重要的隱喻來向用戶傳遞“溝通”的意象,這也算得上是一種設計上的“

雙關

”了。

7、創造令人難忘的設計

古怪的設計和有趣的文案總能讓人難忘,每天海量的信息攝入讓人們只會記住最突出的那些。不過,古怪的設計不一定適合任何品牌任何網站,但是對于那些古靈精怪的網站而言,那些獨樹一幟的腦洞總能起到作用。

8、表現品牌的性格

對于網站而言,在關于我們頁面中將自家的品牌性格呈現出來自然是合理合適的。BooneSelections就是這樣優雅又專業地將品牌配色和相關設計元素融入關于我們頁面的。作為一個專業的葡萄酒進口公司,BooneSelections的關于我們頁面用獨特的排版和滾動式的頁面設計,營造出獨有的品牌氣息。

9、展示聯絡方式

ThisAlso的關于我們頁面設計可謂是可靠而到位了,頁面地圖標注出了公司地點也就算了,當你向下滾動頁面的時候,還能看到詳細地址的說明、沿線地鐵的乘坐方式、溝通的

電子郵件地址

、電話,等等等等,不一而足。

10、給個提示

網站DeuxHuitHuit的關于我們頁面并沒有提供傳統意義上的溝通方式,而是設計成了一個直觀而簡單的對話框。頂上“Sayhello”的對話框非常直接地提示用戶,只要輸入內容,網站的開發者就能看到了。

11、標明開門/工作時間

對于諸如餐廳、博物館、商店等有具體營業時間的機構的官方網站,在關于我們頁面當中標注店鋪開門的時間、接受電話買粉絲的時間,可以讓用戶更加有效地接受服務。

12、使用醒目的字體

Panache的關于我們頁面中標題字體采用了非常醒目的“TravaillonsEnsemble”,這種字體更為輕巧,雖然獨特但是具有極高的識別度。

13、使用大膽的配色方案

經典的黑白黃的配色方案被運用到Sponge的關于我們頁面當中,這種強對比的配色結合細致的細節刻畫,讓整個頁面看起來銳利又富有質感。設計師將明亮的色彩運用到最關鍵的信息上,讓用戶更容易注意到它們。

14、采用形象化的插畫

插畫總能以更加視覺化的方式來吸引用戶的注意力,尤其是當插畫足夠風格化、個性化的時候。LegworkStudio的關于我們頁面中,加入了狼頭人插畫,配合手寫字體,營造出了一種個性化的氛圍。

15、使用簡約的圖形

GiampieroBodini的關于我們頁面并沒有使用復雜的設計技巧,而是在素描的繁復背景上,放上一個簡單的矩形,將聯系方式與相關信息置于其中。繁復和簡單,手繪和圖形,形成了鮮明的對比。

16、借助表單來溝通