2009年8月24日星期一

黑板樣式橫幅的Web design

作爲一家教育機構,沒有什麽比利用學生與黑板的元素來設計網頁橫幅更適合了。黑板加上一些手寫字體,便形成了一個簡單但卻極具吸引力的視覺焦點。本文通過一個實例來探討設計一個黑板樣式的網頁橫幅所涉及的各種挑戰,也讓我們再一次感受學校的歲月離我們又遠了一年,祝大家新春快樂。

Next Play諮詢集團是一家主要針對公立學校進行學校課程以外的補充教育。公立學校一般的教育重點只是幫助學生如何應付各種各樣的考試和測驗,而Next Play則教導學生將一些理論知識應用到實際的生活中——讓學生掌握求職的各種挑戰、涉足社會時如何理財等等。真是一個朝陽行業。

你如何將這些想法通過網站向學生宣傳?直接通過用黑板的形式表達出你的觀點!觀看的人一眼就知道你是一家關於教育的機構,你的宗旨是什麽,你的服務物件是誰,都一目了然。而且黑板能夠形成一個效果非常不錯的視覺焦點。

讓我們看看如何設計這樣的網頁。


醒目、熟悉的元素,而且人物還與標誌相配合:

就算你在上課時經常打瞌睡,但如果有人在黑板上寫上一些東西,還是會吸引你的注意力的。這是一個人人都熟悉的視覺焦點,用在網頁上同樣能夠發揮相同的效果。

從上面開始:

重點是這個黑板的寬度要與佔據整個網頁的寬度,以確保觀看的人能夠首先閱讀黑板中的文字。手寫字體能夠立即融入故事的內容,並引導觀看下方的正文。

黑板樣式的網頁橫幅是一個強有力的視覺元素,我們對黑板的視覺聯繫都非常熟悉,畢竟我們都曾經無數次看著它度過我們的青春。黑板本身就具有尺寸大、醒目(黑白強烈對比)的視覺特性,而且,它還放在最上面。在這個背景中,NEXT PLAY用文字及圖片向觀衆作介紹。一個學生拿著粉筆明確無誤地給人一種教室的感覺,而且上面這一句關於機構的“我們是誰”及“我們是做什麽的”從下方正文中抽離出來被單獨放在上面,可想而知,如果僅是出現在下方的正文中,它只會淹沒在文字中。

主題延續:

這個黑板樣式的橫幅出現在每一個頁面中,但每一頁都有不同的學生及資訊,而全部加起來,則傳達了一種強有力的個性及共同性的設計

如何製作這個橫幅?

1、選擇一張照片,單獨將人物取出,去掉黑板的背景。

2、烘托出人物:我們在這裏將她放在右邊(爲此我們只能讓她做一回左撇子了),然後畫一個矩形的“黑板”,其寬度與網頁寬度一致,然後填充上非常深的灰色(約98%)。而在下方畫一下高度很小的矩形作爲導航欄,填充全黑色。

3、逼真:一個乾淨的黑色區域當然就已經可以傳達出一個黑板的感覺,但感覺並不是非常真實。你可以通過一些濾鏡將黑色區域故意弄得有畫痕的感覺(這裏是採用www.misterretro.com Machine Wash中的“abrasive(研磨)”濾鏡),當然,你也可以不用這樣大張旗鼓,直接利用一個真實的黑板照片放上去也行。

增加文字:在上面增加一行手寫體字體就基本完成了。下方還有一行小文字,這一行文字設成灰色,因爲它是輔助資訊。將其中的公司名設爲綠色,既增加吸引力,又平衡了整個設計。

設計整個網頁:

部落格風格的三縱列結構是一種有效的資訊組織方式。主要的資訊佔據左邊寬的一列,而一些輔助資訊則佔據右邊的兩列。

結構:整個頁面由六個區域構成,區域由大至小,其順序是非常重要的。留意導航欄(模仿真實的文件索引卡片,見上圖)、頁腳及最下方的聯繫資訊都是固定的,不隨頁面的不同而不同。

延續:我們已經將頁面的主要元素及框架弄好,是時候增加細節了。我們要借用一下標誌來幫助考慮細節的問題。因爲標誌比網頁具有更持久的特性,我們要利用到標誌的字體、顔色及其細節來設計網頁的其餘部分。

觀察標誌:

標誌上的一些特性會決定網站上的細節。首先第一步我們要來一次標誌大檢閱。特別留意字體、顔色、線條及形狀。

顔色:草綠色傳達出一種活力、張揚、溫暖及青春的氣息。這些與我們的目標物件——學生的性格是符合的。選擇這種顔色無疑是正確的,但如果太多了(象上圖左)則顯得很不明智。因爲NEXT PLAY與下方的諮詢公司文字混爲一體,分不清輕重,我們將下方的文字設爲深色。

角度産生動態:當將兩個字母連接在一起時,你當然希望其邊緣是具有相同的輪廓(如上圖左所示),但因爲X和T具有不同的邊緣,保留一個傾斜的間隙同樣可以達到結合的目的。

字體:Futura粗黑字體具有典型的美式風格:清晰,粗壯,而且結構簡單。線條筆直,圓角位近乎正圓弧線。用在標誌及一些簡短的標題上,可以將字母的間距縮小——字體越大,間距越小,字母間可以重疊及緊靠。

形狀隨距離不同而變化:如果從遠處看(上圖灰色標誌),Futura粗黑大寫字母構成了一個簡單的矩形,而且整體顯得乾淨整潔。如果近看,我們可看到其負空間是一個充滿活力的互動空間,也可以很容易辨認那些圓形輪廓。

將我們觀察所得的標誌元素應用到整個網頁設計上:

不要忘記還有頁腳:

一向謙卑的頁腳往往放著一些非常重要的聯繫資訊文字,而且也發揮著一個視覺支撐點的作用。不要輕視它。

你想發佈一些電子通訊刊物來推廣你的網站?採用同樣的結構即可!

同樣的外觀,只是變小一些:

同樣的字體,同樣的顔色,同樣的那塊黑板,同樣的版式,只是小了一些(大約540到600個圖元的寬度),不需要用到頁腳。事實上,你用這個版式設計Web Design紙質平面單張又何嘗不可?