unique-inspiring-about-page-1-1

毫無疑問,你是沒有第二次機會來給人以“第一印象”。每個網站從首頁到子頁面都是介紹產品、提供服務、探討功能,唯有“關于我們”這個頁面是關乎產品和服務的創建者——我們自己,也是為什么它如此的重要。

一個成功的“關于我們”不僅僅是將品牌、公司和團隊信息填滿一個頁面那么簡單粗暴,你需要將團隊和品牌視作一個整體,呈現出獨有的風格,不同的個性,讓用戶記住。

這聽起來似乎是一件特別棘手的事情,但是仔細推敲整理,實際并不復雜。選擇走腎的設計技巧,挑個或現代或簡約的匹配自家品牌的風格,用最走心的方式展現自己的團隊,這就夠了。

聽起來玄乎,不如看看別人家的案例來的直觀。

01. 醒目的色彩和鮮亮的配色

嚴格的色彩搭配和醒目的色調選取,使得Rook 的“關于我們”頁面的設計看起來簡單而突出。醒目的金色貫穿整個設計,從LOGO到圖像、排版都保持著一致性。

在圖片和成員照片的處理上,設計師采用了單色的色彩濾鏡,這讓關于我們頁面在色彩上更加嚴格也更加統一,品牌化的設計在這里一覽無余。

02. 手繪排版和簡單的圖片

02_HandCrafted2-620x1215

Madebyband 的“關于我們”頁面的設計比較不同,結合品牌的特征,當然也是為了表現個性,他們的頁面運用了許多手繪的字體和排版,配合手工制作品的圖片,傳達品牌的個性。整個頁面設計簡潔,大量的留白也平衡了頁面的結構。

所以,無論是自定義的字體還是自定義的圖片,都是呈現品牌性格表現團隊差異化的可靠手段。

03. 俏皮的插畫和活潑的配色

03_PlayfulIllustrations-1394x1228

“關于我們”的頁面中最常見的信息就是團隊的照片和地點等內容,那么為什么要用傳統而死板的方式來呈現呢?Pulp Fingers 就沒有這么做,設計師挑選了三種色彩來制作尖銳而極具風格的插畫,這種風格不僅漂亮而且有趣,獨特而足夠引人入勝。作為企業的“關于我們”頁面絕對獨具一格,令人難忘。

04.專業的團隊合影和整飭的排版

04_SophisticatedTeamPhoto-1394x2208

“關于我們”的頁面中,團隊成員照片非要是單獨個人的么?并不一定,專業的合影也是不錯的選擇(一群人隨意地站在某棟樓門口的樓梯上拍攝,這樣的合影中國人有過太多,談不上專業,放這里通常都非常的違和)。這種專業的團隊成員攝影有不少企業做過,很容易做得過于“商業風”,做得有風格也恰到好處的并不多,有興趣的同學可以找找錘子科技團隊的男神合照,大概也有Jam3團隊合影的風格。

Jam3 團隊選擇的是統一的黑色服裝,在深色背景襯托下逼格四射,質感十足,成熟而精美,是絕對的焦點。搭配這個圖片的排版和背景都非常的現代而清爽,主次分明。

當然,這種合照存在的問題在于,團隊成員如果變動的話,你得重新照一次……如果這個不是問題的話,那就來一發吧。

05. 醒目的標題和有趣的動畫

05_BoldType-1394x3088

如果想讓客戶、未來的員工和同事們確切地了解你們的品牌價值的所在,那么為什么不把這些核心的內容直接醒目地寫出來呢?Purple, Rock, Scissors 就是這么做的。這個“關于我們”的頁面還有兩個地方非常貼心,一個是短視頻背景,它很好地展現了工作環境和整體氛圍;另外一個是團隊成員頭像的設計,鼠標懸停的時候,你可以看到其中人物表情變化的動效,不僅貼心而且有趣。

06. 雙色搭配和大膽的插畫

06_TwoColor-1-1200x1108

Mike Kus 的“關于我們”的頁面設計采用了獨特的雙色配色,前景色是黃色,背景色是紅色,雙色搭配的優勢在于它極強的凝聚力,這樣的風格通常厚重而復古,而且可以很好地強化品牌色給人的感覺。另外一個引人入勝的地方就是其中大膽的插畫——大腦。

當然,配設在整個設計中起到了決定性的作用,要作出靠譜的配色并不容易,不妨在優設首頁的搜索框中搜搜配色,會有驚喜哦。

07. 整潔的圖形和信息可視化

07_CleanGraphics-1394x7342

是否你也會更喜歡視覺突出的圖形而非整片的文字呢?那么你看看Huge公司的“關于我們”頁面吧。這家公司用先鋒而大膽的配圖來呈現他們的獨特之處,碩大而簡潔的標題文字讓這些配圖更加富有張力,同時還傳達出他們的企業價值觀。

如果圖形化是設計的核心的話,信息圖的使用就順理成章了。關鍵的信息用信息圖來表現,不僅貼合網站的整體風格,還能讓用戶更輕松地接受網站傳遞的信息。

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

08_NeatlySetType-1698x2844

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

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

09_SimpleLayout-1431x6095

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

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

10_VisualisedTimeline-1292x4310

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

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

11_IllustratedImagery-620x1189

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

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

12_BoldColors-1431x7156

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

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

13_StylishImagery-1477x2679

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

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

14_CleanGraphics-1477x1877

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

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

15_BoldFeatureColor-1431x5149

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

16. 大留白和小元素

16_WideMargins-1394x3210

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

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

17_StrikingType-1394x2270

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

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

18_ModularLayout-620x865

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

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

19_StrikingColors-1431x5442

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

20. 強對比和復古插畫

20_StrongContrast-600x2871

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

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

21_FineType-1431x3119

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

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

22_MutedColors-620x1345

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

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

23_AnimatedImagery1-1431x3824

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

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

24_CreativeBios-736x565

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

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

25_BoldShapes-1394x2535

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

【那些充滿異域風情的網頁設計】

《兼容并蓄!20個來自澳大利亞最優秀的網頁設計》
《狂拽酷炫!20個來自美國最優秀的網頁設計》
《KEEP CALM & DESIGN!26個來自英國最優秀的網頁設計》
《嚴謹而浪漫!20個來自德國最優秀的網頁設計》
《情迷西班牙!20個來自西班牙最優秀的網頁設計》
《時尚雅致!25個來自法國最優秀的網頁設計》
《請多關照!20個來自日本最優秀的網頁設計》

原文地址:designschool
優設譯者:@陳子木

本文由優設網原創翻譯,請尊重版權和譯者成果,轉摘請附上優設鏈接,違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網uisdc.com“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量103萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

點贊
收藏 1

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
相關推薦
評論 收藏