關於我們的頁面設計並不難,但是要設計壹個完美的版本並不容易。它通常取決於妳的出發點,是要個性化的設計,還是品牌化的運作?是提供自己聯系方式,還是獲取用戶的聯系方式?下面的優秀案例會告訴妳,優秀的關於我們頁面要如何設計。
1、友好的界面
友好的聯系人界面總會讓人感到親切的,如果它還具備壹些功能性,並且易於閱讀,用戶會感覺更加舒適的。“Whatcanwehelpyouwith”則可以引導用戶去點擊“加入我們”“聘用我們”以及參與郵件訂閱。
2、展示全球各地辦公室
Tool的關於我們頁面中,設計師用醒目的字體標註出團隊在洛杉磯、紐約和法國的辦公室的地址和聯系方式,點開關於我們頁面的用戶不就是想知道這些信息麽?正確的聯系方式,簡單直接的設計,就是這麽做的。
3、簡化溝通流程
ProductiongLocation的聯系我們頁面同樣采用了大膽而視覺化的頁面設計,但是和其他的同類頁面不同的是,它簡化了溝通流程,把用戶可能會關註的內容和需要溝通的具體部分都劃分了壹下,讓不同需求的用戶直接被引導到特定的頁面和部分,從而達成簡化和分流的目的。
4、頭像和個性化的信息
放上設計師和團隊成員的圖片,讓用戶認識妳。最關鍵的並不是妳的頭像夠不夠漂亮,而是要讓用戶知道這個漂亮的網站背後是壹位和妳我壹樣真實而平凡的設計師,是他或者她努力設計之後的成果。頭像可以讓頁面更加個性化,也能讓它更加真實而親近。
5、鼓勵用戶溝通
關於我們頁面的核心設計目的通常是溝通,而HelloInnovation的頁面設計則充分貫徹這壹思路:試圖鼓勵用戶主動同網站進行溝通。用親切而富有親和力的設計,留下聯系方式,從文案到留下郵箱的地址都在鼓勵用戶。聊壹句,能有多難呢?
6、用圖片來傳遞隱喻
設計博物館中收藏了許多設計相關的藏品,而關於我們頁面中的這個電話不僅是網站的藏品,而且作為壹個重要的隱喻來向用戶傳遞“溝通”的意象,這也算得上是壹種設計上的“雙關”了。
7、創造令人難忘的設計
古怪的設計和有趣的文案總能讓人難忘,每天海量的信息攝入讓人們只會記住最突出的那些。不過,古怪的設計不壹定適合任何品牌任何網站,但是對於那些古靈精怪的網站而言,那些獨樹壹幟的腦洞總能起到作用。
8、表現品牌的性格
對於網站而言,在關於我們頁面中將自家的品牌性格呈現出來自然是合理合適的。BooneSelections就是這樣優雅又專業地將品牌配色和相關設計元素融入關於我們頁面的。作為壹個專業的葡萄酒進口公司,BooneSelections的關於我們頁面用獨特的排版和滾動式的頁面設計,營造出獨有的品牌氣息。
9、展示聯絡方式
ThisAlso的關於我們頁面設計可謂是可靠而到位了,頁面地圖標註出了公司地點也就算了,當妳向下滾動頁面的時候,還能看到詳細地址的說明、沿線地鐵的乘坐方式、溝通的電子郵件地址、電話,等等等等,不壹而足。
10、給個提示
網站DeuxHuitHuit的關於我們頁面並沒有提供傳統意義上的溝通方式,而是設計成了壹個直觀而簡單的對話框。頂上“Sayhello”的對話框非常直接地提示用戶,只要輸入內容,網站的開發者就能看到了。
11、標明開門/工作時間
對於諸如餐廳、博物館、商店等有具體營業時間的機構的官方網站,在關於我們頁面當中標註店鋪開門的時間、接受電話咨詢的時間,可以讓用戶更加有效地接受服務。
12、使用醒目的字體
Panache的關於我們頁面中標題字體采用了非常醒目的“TravaillonsEnsemble”,這種字體更為輕巧,雖然獨特但是具有極高的識別度。
13、使用大膽的配色方案
經典的黑白黃的配色方案被運用到Sponge的關於我們頁面當中,這種強對比的配色結合細致的細節刻畫,讓整個頁面看起來銳利又富有質感。設計師將明亮的色彩運用到最關鍵的信息上,讓用戶更容易註意到它們。
14、采用形象化的插畫
插畫總能以更加視覺化的方式來吸引用戶的註意力,尤其是當插畫足夠風格化、個性化的時候。LegworkStudio的關於我們頁面中,加入了狼頭人插畫,配合手寫字體,營造出了壹種個性化的氛圍。
15、使用簡約的圖形
GiampieroBodini的關於我們頁面並沒有使用復雜的設計技巧,而是在素描的繁復背景上,放上壹個簡單的矩形,將聯系方式與相關信息置於其中。繁復和簡單,手繪和圖形,形成了鮮明的對比。
16、借助表單來溝通
溝通是相互,妳可以發信息給網站,也可以留下聯系方式,讓網站的運營者給妳發信息。QEDGroup直接在聯系我們頁面中留下壹個表單,妳可以通過這個表單留下聯系方式。
17、使用單色配色
簡單優雅和易讀是JosephAAvoue的網站聯系我們頁面的設計風格,沒有華麗的設計,也沒有花哨的功能,壹個纖細的環,中間是最基本的聯系信息,就是這麽直接。
18、幽默
幽默的設計師不會放過任何壹個搞怪的機會,Bio-Bak的設計師即使是在聯系我們頁面當中也會嘩眾取寵壹把。塗鴉字體和俏皮的文案讓人忍俊不禁,妳能夠從每壹個細節感受到這個設計師的幽默細胞。
19、填寫表單
Anakin的關於我們頁面同樣是讓用戶填寫聯系信息,不過在表單的設計上更加獨特,並沒有專門的表單,而是使用占位符提示用戶各個位置需要填寫的內容,貼心、直覺,也非常走心。
20、個性化的辦公地點展示
和第二個案例類似,CPB集團在全球各地都有辦公室,但是在設計的樣式上也更加獨特,各地辦公室的內容和個性化的背景融為壹體,信息得到了整合,展現方式也個性十足。
21、介紹壹下業務
在關於我們頁面當中介紹自己並不稀奇,不過除此之外可以做的還有很多,比如介紹壹下自家的業務,展示壹下自家的品牌,吸引用戶來聊聊也是很不錯的手段。HelloMonday的關於我們頁面就是這麽做的。
22、視頻背景
在網站裏面添加視頻背景已經是壹種非常流行的手段了,而作為電影制作工作室而存在的Moodboard在關於我們頁面中使用視頻背景不僅符合他們團隊的工作性質,而且讓整個關於我們頁面更加鮮活了。
23、使用柵格布局
要設計結構化的頁面,柵格總是妳最好的朋友。UrbanInfluence的關於我們頁面使用柵格來組織整個頁面的信息,需要展示的內容,讓用戶輸入的部分,裝飾性的部分和展示用的地圖,都界限分明地分布在頁面上。
24、讓界面更加友好
如果讓界面更加友好,設計師要做的工作並不少。清晰而易讀的界面設計是最基本的,信息要能夠清晰的傳遞出來,沒有侵略性的配色,讓人感到熟悉、親切的呈現方式,易於操作的交互方式,這都是設計師要做好的地方。
25、分步引導
取得聯系包含著壹系列的操作,如果將整個交互過程分割成為若幹步驟,壹步壹步引導用戶來操作,加入動效和微交互,這絕對是壹種不壹樣的體驗。
26、增加聯系人快捷方式
團隊中負責不同部分的負責人通常不壹樣,用戶打開聯系我們頁面通常有著明確的目標,如何將FAQ部分加入其中,並且添加特定的聯系人的聯系方式,讓用戶可以更加直接地同不同的負責人進行溝通。
27、同網站其他部分整合到壹起
RobbyLeonardi的網站似乎被設計成壹個扁平風的電腦遊戲,當妳瀏覽頁面的時候,會隨著主角去不同的頁面,做不同的事情,而去關於我們頁面也是其中的.壹個“場景”。這是壹種整合頁面的方式,值得學習。
28、團隊合影
許多網站背後都是壹整個開發和設計團隊在運作,用團隊成員合影作為關於我們頁面的背景圖也是非常合理且有個性的做法。
29、使用留白
通常留白能強化整個頁面的空間感和結構感,而BetaTataki在關於我們頁面就放置了壹個設計感十足了電話,通過留白強化了聯系方式等內容的存在感。
30、活用字體排版
精心設計的字體排版不僅具有裝飾性,還可以承載壹定的內容。PaulineOsmont的聯系我們頁面使用了黑色、銀色和金色來構建吸引人的字體排版主視覺設計。當妳向下滾動頁面的時候,能看到易於閱讀排版到位的表單。
31、親手展示
這也是近幾年比較常見的壹種內容展現方式,設計師親手舉起展板來展示設計作品。如果用在聯系我們頁面中,這種設計師手法也是相當的應景呢。就像MarkJaworkski的這個頁面,設計師的技能、介紹還有留言用的表單都整齊地展示在這塊被平舉的白板上。
32、列舉社交媒體聯系方式
現在哪個網站沒幾個社交媒體帳號呢?在關於我們的頁面當中將自家網站的各個社交媒體的鏈接都貼出來,對於許多用戶來說反而更加便於聯系。
33、借用傳統的溝通方式
復古的樣式是不錯的選擇,但是使用傳統的聯系方式來設計,似乎更加走心也更有意思。Lionway的聯系我們頁面就設計成了明信片的形式,還有壹些固定的信息幹脆就列舉在壹個打印賬單上。
34、俏皮的文案
文案的設計也是聯系我們頁面中重要的部分,親切、幽默的文案設計會讓用戶感到親近,但是同樣的,俏皮的、機智的文案也壹樣會讓用戶難忘。
35、展現個性
設計工作室Resn的聯系我們頁面設計絕對是這組案例中最有個性的頁面之壹,充滿80年代風情的設計元素,和帶著動物頭套的團隊成員圖片組成了頁面的主體。
36、運用信息圖
信息圖是近幾年壹直處於上升階段的設計手法,如果有合適的展示內容,在關於我們頁面中使用信息圖也是相當不錯的選擇。Quicksprout的關於我們頁面就使用了信息圖來呈現內容,清晰易讀,而且準確到位。
37、動畫和卡通
在聯系我們頁面中使用卡通和動漫式的形象來呈現設計師和設計團隊是相當常見也相當有效的手段,Melonfree的關於我們頁面就將設計師和開發者的卡通形象擺了出來。
38、使用半透明的圖形
人的眼睛總會有意識地去識別想要石碑的內容,所以即使的半透明的元素加載在壹起,也不會特別嚴重地影響閱讀體驗。Indofolio的頁面設就充分運用半透明的元素,將核心的聯系方式放在半透明的矩形上,透過圖形用戶依然能看到背景的細節,但是又不會看不清關鍵的聯系方式。
39、手繪效果
手繪的聯系我們頁面,尤其是那些畫的還相當養眼的頁面,總能讓用戶感受到設計者的貼心。MarioPetrone的這個頁面設計就相當的俏皮有趣。
40、僅用壹個下拉框
SpokesPedicabs的聯系我們頁面其實談不上壹個完整的頁面,而用壹個下拉框代替,當妳點擊導航了中的鏈接,會出現這個醒目的橙色下拉框。
網頁設計色系案例分析
橙色又稱之為橙黃或者是橘色,它的穿透力僅次於紅色,色感較紅色更暖。在網頁設計中橙色是十分活潑的色彩,給人以華貴而溫暖、興奮而熱烈、歡樂與活力的感覺,也是令人振奮的顏色。
橙色在網頁中的使用範圍非常廣泛,可以通過變換色調營造出不同分氣氛,不僅僅能表現出青春活力,也能達到壹個穩重的效果。橙色的波長居於紅和黃之間,具有健康、富有活力、勇敢自由等象征意義,為了讓大家對橙色有更好的理解,下面分別對不同類型網頁進行分析。
壹.食品飲食類網頁設計案例分析
推薦案例:橙色+黃色+深橙色
整個頁面以橙色為主,通過不同明度和純度的“黃”進行調和,頁面非常融洽而不顯單調。很好的突出了的圖片,食品圖片色調也是相近的,故不會非常的突兀。而利用白色將網頁分層,有層次感。
二.娛樂類網頁案例分析
推薦案例:深橙色+土黃色+黃色
整個頁面是利用深橙和淺黃色的搭配來展現的,使頁面看起來更加的溫暖,深色的鋪墊,黃色的文字,達到壹種突出而不突兀的視覺效果,賦予了網站生命力。
三.電子商務網站案例分析
推薦案例:橙色+卡其色+綠色
這壹個案例使用的顏色相對較多,而橙色的導航輔佐明度較高的卡其色,不會顯得非常淩亂,反而更加有特色,很活潑。加上利用壹些綠色的按鈕來點綴頁面,頁面就顯得不那麽單調,有萬橙之中壹點綠的視覺效果。
四.科技發展機構網站案例分析
頁面用的色彩相對較雜,但讓人感覺亂中有序。大家可以註意到,頁面都是采用深紅色作為文字,而橙色出現在紅色文字的附近,例如頂部的橙底紅字,大標題紅色小標題橙色,這些元素就使頁面亂中有序。
總結:橙色運用的非常多,調整飽和度、純度都可以達到非常好的視覺效果,當然在視覺沖擊力的同時,可適當采用少許對比色調和緩和於視覺,從而削弱視覺的疲勞度。
站酷誌的《站酷誌：資深設計師的Photoshop創意課》第壹章炫動的視覺藝術
韓雪冬(Kaven)
視覺設計師
“無論怎樣的創意和訴求,最終都要通過圖形反映給觀者。我將通過5個光效案例,與大家分享我在圖形設計方面的經驗。”
第二章不造作的心靈攝影
海德娜娜(hidenana)
商業攝影師
“攝影不是簡單的按下快門的動作。通過3個不同色調風格的案例,我將與大家分享我在人像攝影及後期中的心得。”
第三章圖標的表現力量
董景博(Iconsbox)
界面設計師Iconfans創始人
“圖標是壹門用圖形說話的藝術。在本章中,我將分享我對圖標的理解,並通過3個案例講解圖標設計中的方法與理念。”
第四章互動的立體趣味
耿偉(arial)
互動設計師
“在商業設計中,立體元素可以帶來更真實、更有趣的感受。通過5個網頁設計案例,我將分享平面中立體表現手法。”
第五章簡單美感的視覺表現
劉暢(ChangThink)
網頁設計師
“簡潔明快的風格逐漸成為高端商業設計的偏愛。我將通過我參與的5個商業案例,分享簡潔風格互動網站的創作經驗。”
第六章風格化的可通繪畫
張磊(tubie)
卡通插畫師
“卡通繪畫要求自由、隨意。我將通過5個案例,分別從手繪、勾線平塗、2.5D、立體等風格,分享我的卡通繪畫經驗。”
第七章概念設計方法論
阮效果(ruanxiaoguo)
概念原畫師
“本章我將從繪制方案草圖、繪制細節、繪制氣氛圖、繪制三視圖、繪制設定圖等步驟,闡述機器人概念設計的方法。”
第八章用故事帶動設計
哈達(哈達)
平面設計師
“商業設計是使消費者能在短時間內記住某個品牌。我將通過“講故事”的方式,為大家講述商業平面設計中的壹些小技巧。”李洪波原畫師
張酉麟視覺設計師
曾凱網頁設計師
杜赫旋設計師插圖師
陳耕互動設計師
李彬插畫師
安寧裝幀設計師
黎明設計師插圖師
徐UI設計師
胡壹威跨界設計師
季熙UI設計師
汪鈺偉新銳設計師
江澤UI設計師
楊若磊自由漫畫人
李剛華UI設計師
杜佳慶UI設計師第壹章炫動的視覺藝術
1.1行業概述
1.2設計師職責
1.3案例壹:光的色彩效應
1.3.1綜述
1.3.2案例分析
1.3.3創作流程分析
1.3.4小結
1.4案例二:光和線的合理使用
1.4.1綜述
1.4.2案例分析
1.4.3創作流程分析
1.4.4小結
1.5案例三:色彩與細節的特殊表現
1.6案例四:文字處理的視覺表現
1.7案例五:視覺特效與圖形合成技術
1.8本章總結
第二章不造作的心靈攝影
2.1行業概述
2.2攝影後期風格
2.2.1日系暖色
2.2.2阿寶色/糖水色
2.2.3童話色
2.2.4懷舊色
2.2.5高調色
2.2.6LOMO
2.3圖像後期
2.3.1選片連貫主題
2.3.2構思片子的主色調風格
2.3.3決定要用到的技法工具
2.4案例壹:懷舊色《冷春織女》
2.4.1前期準備
2.4.2開始拍攝
2.4.3後期流程分析
2.4.4小結
2.5案例二:糖水色《未來未來雙生花姐妹》
2.5.1前期準備
2.5.2後期流程分析
2.5.3小結
2.6案例三:童話色《在我們眼前的那些童話》
2.6.1前期準備
2.6.2後期流程分析
2.6.3小結
2.7本章總結
第三章圖標的表達力
第四章互動的立體趣味
第五章簡單美感的視覺表現
第六章風格化的卡通繪畫
第七章概念設計方法論
第八章用故事帶動設計
優秀設計師推薦看到站酷網上很多讀者反映問題,作為出版方針對壹些問題做下說明,同時也和讀者溝通下:
1.目前收到反饋問題最大的是:光盤碎了的問題。經過我社查證,多數是來自當當網,我們已經和當當網嚴正交涉了此事。目前解決的方式是:請讀者朋友和易小姐聯系,她會發送光盤內容給反饋讀者。聯系方式如下:
PS:為什麽要發送光盤內容而不是郵寄?
因為光盤碎的問題,是當當網物流的問題,也許是當當要貨的這批書在物流的過程中出現了問題,導致某些光盤碎了,和原本的光盤質量沒有關系的,相信其他已經買書可用光盤的讀者還是多數的。
所以後續如果讀者反映的光盤問題(無論當當解決與否),電子工業出版社將負責為讀者提供光盤內容。而如果電子工業出版社要快遞光盤,將產生額外的費用及時間問題,希望讀者能理解。
2.關於讀者的評價:因為站酷是作者方,不是這本書的發行和物流方,所以如果出現任何質量問題您都可以直接和我們電子工業出版社聯系,我們將會竭力協助您解決問題。因為讀者發現光盤碎了的問題會發表“失望”的話題,會影響大家對這本書的第壹印象,還是希望直接和我們電子工業出版社易小姐聯系,希望能理解。
3.關於素材和後續服務。書中素材已經在站酷網上提供,請下載。(因為第1、2章商業案例,光盤裏面是不允許出現未經授權的源文件,所以沒有提供。書中“光盤素材”會在修訂版本中做出修改)後續,電子社將和站酷壹起為讀者提供基於此書的更多服務,完善不足,敬請期待!
4.這本書的主旨還是:希望給讀者提供設計師的經驗,作為壹本可借鑒的圖書,而非“從零精通”的教學(這種類型的圖書市場上有很多,就是軟件操作的)
如何表現插畫在包裝設計中的應用?插畫,也稱為插圖,作為現代設計的壹種重要的視覺傳達形式,已廣泛用於現代設計的多個領域,成為包裝與產品設計的重要表現形式之壹。插畫憑借其獨特的藝術魅力與豐富的表現語言日益受到設計師的關註,同時也因其獨特的風格化表現,給包裝市場帶來壹股耳目壹新的體驗,深受大眾的喜愛。
插畫的表現手法多樣,不同的畫筆、不同的設計師展現的風格是完全不同的。正是基於其風格的多變性可以借鑒插畫的創作風格,在分析商品本身屬性和特質的基礎上,創作出具有極強視覺吸引力的包裝作品,如下圖。
插畫能表達出與攝影絕然不同的感受,創造出令人目不暇接的多元化形態,插畫與包裝設計的結合賦予了設計師極大的創作自由,設計師可大膽地嘗試多種風格的設計:誇張的畫風能突出包裝的特色,增添包裝的趣味性,適宜創意產品的包裝,如下圖2.1;黑白的素描線條則體現包裝的淳樸、自然,給人以安靜、親和的感覺,使用於人文氣息類商品的包裝,如圖2.2;小清新風、治愈系風插畫,則給人以賞心悅目、暖心之感,深受女性喜愛,多用於化妝品、紙巾等商品的包裝,如下圖2.3;帶有民族風的插畫,受地域、習俗影響,常用於茶葉等特色產品的包裝,如下圖
插畫本身豐富的藝術造型語言,唯美,寫實,復古等眾多風格可以融合到服裝,化妝品,食品的包裝設計當中,既滿足了不同消費者不同的情感需求,同時獲得良好的設計和傳達效果。插畫包裝設計通過美觀的造型給人以遐想,並引導消費者的聯想感受來傳達信息。插畫在包裝中的應用,賦予了包裝新的裝潢形式與視覺傳播理念,給包裝設計帶來了全新的包裝手段與視覺效果,並增添了藝術魅力與文化內涵。