天天看點

提升網頁和部落格設計品質的一些執行個體…

組織内容小貼士

你當然可能會遇到需要打破正常,選用非同尋常方式的時候,不過你還是可以遵循這些簡單技巧,以保證内容結構和閱讀順序的良好。

  • 你為何而設計?

    如前所述,确定設計的目标。

  • 利用網格

    網格幫助你發揮頁面的最大潛能。

  • 測試元素位置

    以通路者的角度考察内容的易用性。

  • 移除所有不必要元素

    不必要的東西都應該被消滅,或者至少不要放到顯眼的地方

  • 注意力的均衡

    有些東西需要被簡單化,好讓另外的事物閃耀光輝

05. 自我克制與精妙細節

設計師總是在尋找制造沖擊力的方式,總是想做一個獨一無二的設計,創造些前所未有的效果。不過有時候通過自我克制也能形成沖擊力。量變産生質變,過多的“好”也會帶出不好的結果。好的設計師曉得平衡點在哪裡,并且能避免讓過多的特殊效果毀了一項設計。

“Things”網站上的柔和漸變

對于我通路過的站點,我總是很關注他們的細微漸變。聽起來可能有點惱火,不過我就是忍不住要去研究别人的那些小細節,以積累我将來設計時的靈感。漸變是最被濫用的設計方法之一,不過運用成功的話,還是能讓設計增色不少,它所能提供的真實感和深度感是其他技巧所不能達到的。大部分人都不太注意漸變,不過别人對漸變的運用确實是我最好的靈感來源。

​​

提升網頁和部落格設計品質的一些執行個體…

​​

Icon Dock 上的投影

Icon Dock的網站簡直就是各種精妙細節聚在一起開大會。像素級高光,漸變,以及投影。不過在這裡我們隻關注它的投影。不是很大,透明度也被調高,小心翼翼地烘托着内容區塊,讓其成為真正的焦點。實在漂亮~

​​

提升網頁和部落格設計品質的一些執行個體…

​​

精細的背景材質:Scouting for Girls

材質性背景要麼成全你的設計,要麼毀掉你的設計。很多複雜的背景除了分散讀者注意力,沒有帶來任何好處。最終使得設計品質大為降低。是以,最好還是一直保持你的背景材質細微而柔和。 Scouting for Girls的網站在運用材質打造整體風格和設計品質方面做得極好。

​​

提升網頁和部落格設計品質的一些執行個體…

​​

做舊與撕碎的啟發: Viget Advance

我從來不覺得越細微越好,任何細節的“細度”都以可見為前提。可能人們并沒有清楚地意識到,不過這些細節必定确實産生了影響。部落格Viget Advance的例子中,在做舊與撕碎效果方面,能給我們一點啟發。 隻是非常細微的做舊,不過如果沒有這效果,這張人造紙就會顯得平淡無奇,枯燥乏味了。正是這些小小的“不完美”讓這畫面顯得更可信,更真實。

​​

提升網頁和部落格設計品質的一些執行個體…

​​

WebDesignerWall 上的水彩效果

使用水彩效果的時候,關鍵是要確定顔色混合得足夠柔和,濃淡變化适宜,而且… 足夠“水”。水彩效果為你的設計提供很多好處:精細而和諧的多種色彩,感染力極強的材質感…… 正因如此,越來越多的設計師選擇了在他們的設計中創造水彩效果。

​​

提升網頁和部落格設計品質的一些執行個體…

​​

精妙的植物:Dara’s Garden

下面是一個充滿智慧的關于精妙植物細節的設計。網上還有很多更加栩栩如生的植物圖案,而且也非常漂亮,不過這個例子中,我關注的是背景上那些更清淡更微妙的細節。這個例子展現了細節的重要性,柔和的色彩,做舊的效果,喚起你對細節的感覺,不過卻并不形成為主要焦點。

​​

提升網頁和部落格設計品質的一些執行個體…

​​

運用精妙細節的小貼士

我認為,精妙細節能讓一項好的設計升華為燦爛奪目的設計。如果你還在尋找讓設計與衆不同的方法,精妙細節是個不錯的嘗試方向。 以下是關于運用精妙細節的小貼士:

  • 建立細節圖層

    不要在一個筆刷或材質上吊死,多加些圖層,多做點細節

  • 嘗試不同透明度和色彩

    有時候隻有 3% 的不透明度也能産生正面影響

  • 拒絕縮手縮腳

    不要擔心太多細微,或者太不明顯

06. 

設計師一般喜歡按照自己的品味來選擇顔色,這可實在太不專業了。要決定哪種顔色是最适用的,你的腦子裡想的應該一直是品牌需求,然後選好色彩的搭配組合,指定其專屬的主題和目标情緒。

網頁設計中色彩運用的絕妙例子

無趣并不代表無色:Oypro

​​Oypro​​的網站讓我喜歡的地方是,他們告訴了我們,一項“無聊”的行業相應的設計并不一定也得“無聊”。通常企業的網站都不允許設計師有太多視覺創意上的發揮。保持簡單、單調、淡彩色成了不成文的規定。不過Oypro的例子證明,不用束縛自己,你也能創造出一個有足夠“企業感”的網站。

​​

提升網頁和部落格設計品質的一些執行個體…

​​

讓色彩互相聯系:Tennessee Summertime

Summertime in Tennessee(田納西州夏日觀光) 是一個充滿活力的、明亮的,非常溫暖的站點。所有一切看起來都是為了推送夏日活動而設計。該站點使用了非常多不同色相的高飽和度色,但每一種顔色都切中要害,沒有一種是不适合主題的。高品質設計的色彩搭配必定與其要呈現的服務或産品密切關聯。好的設計并不總是需要費盡心力選一些出奇制勝的顔色,那些最明顯最該用的顔色反而能創造更好的效果。比如說 ​​Hell Design​​(地獄設計),不用象征地獄的火紅色簡直說不過去。

​​

提升網頁和部落格設計品質的一些執行個體…

​​

背景還可以大作文章:Saturized Studio

隻塗一層單調的背景色可沒法讓你的設計變得有趣。有一點變化的背影才是最好的背景。此例中我們看到,漂亮的橙/紅色被運用到各種各樣的光照和漸變效果中。這種為背景增加變化的做法,有效避免了平淡和沉悶。另一個需要特别注意的地方是,暗深橙色背景與上層明亮内容區的對比産生了非常戲劇化的漂亮的視覺沖擊。

​​

提升網頁和部落格設計品質的一些執行個體…

​​

在網頁設計中運用顔色的小貼士

顔色永遠是值得探索和嘗試的區域。嘗試不同的組合變化能為設計帶來無限可能。不過選擇顔色和色彩搭配時,應該做到對下面的要點心中有數:

  • 嘗試突破

    無趣的主題并不一定得使用無趣的色彩組合。

  • 多變

    嘗試在你多彩的背景上使用漸變、重複圖案、筆刷,光有顔色可不容易讓設計顯得好看。

  • 堅持主題

    確定你的用色與你需要呈現的産品/服務有關聯。

07. 做别人沒做過的事

最好的網站中有一些非同尋常的,奇怪的,甚至可以算得上詭異的設計。不過那些挑戰傳統的嘗試說不定會已經改變了傳統的定義。話說回來,要做到完全原創,創造出沒人做過的東西實在是設計過程中最難做的事。

打破正常之後,成功與失敗隻有一步之遙。你要麼做出令人驚豔的聰明設計,要麼做出一堆垃圾飽受批評。别人從來不這麼做是有原因的,因為有些點子實在是糟透了。要從人們知道并喜歡的區域走出來,你得非常勇敢才行。下面是一些相關執行個體:

MB Dragan 上的獨特導航

不是你通常所見的站點導航,但看起來還是一個網站,同那些标準導航同樣的好。這樣做有點冒險,但結果非常符合該網站特質。十分切題的設計,很難讓人不欣賞這導航與整個設計之間的配合呼應。

​​

提升網頁和部落格設計品質的一些執行個體…

​​

Visualbox(視覺盒子) 非常視覺化的導航

Visualbox的網站隻有一個目标,向你展示他們充滿智慧的作品。是以他們沒有用多少文字,你第一眼看到的就是他們的名字和作品選集。 滑鼠滑過預覽圖檔時,會顯示出項目名稱,點選時會帶你滑到頁面中該項目的相應位置。這是非常高效而實用的解決方案,而且比簡單地堆一個清單出來要吸引人得多。

​​

提升網頁和部落格設計品質的一些執行個體…

​​

廢話不多說的Nikola Mircic

假設你是位互動設計師,你需要别人看了你的作品,能感動得雇用你。Nikola Mircic 為我們展示了“直截了當”對建造一個令人難忘的站點有多大的作用。一打開他的站點,各種風格的作品就向你問好,他的名字和職業放在頁頂的醒目位置,當然,聯系連結沒少。沒有大量多餘文字來勸說你雇傭他,作品本身就證明了他的實力。當然,點選作品縮略圖會出現一個詳細介紹頁,裡面就有足夠的文字了。實在喜歡他組織内容的方式。

​​

提升網頁和部落格設計品質的一些執行個體…

​​

實踐新鮮想法的小貼士

  • 保證事物之間的聯系

    如果你打算做一些特别特别特立獨行的事,先問問自己“真的有必要嗎?”,“這樣說得過去麼?”,“和品牌訴求符合嗎?”…… 如果答案是肯定的,再采取行動!

  • 忘掉所有已知事物!

    好吧其實也并不是所有,基本原則還是要的。話說回來,也沒必要從全新的想法裡面尋找靈感,因為那樣很容易誤入歧途。

  • 保證品質和水準

    基本上我覺得如果你的新想法足夠好,判斷品質究竟如何對你來說應該很容易。

對于高品質設計你有什麼看法?