其實在上圖就是我們所說的一個“模板”,它可以使你在設計時知道什么東西放在什么位置上,你在設計時的要做的其實只是需要簡單地將各個元素放在各自的位置上就行了。
這個模板從上圖可以看出,它是由五列組成(采用奇數(shù)是為了打破平衡,可以使頁面產(chǎn)生動感),當然,這些線段只是參考線,在最后的設計中并不會出現(xiàn)。我們將頁里分成三個區(qū)域,包括標題區(qū)域、圖片區(qū)域及文字區(qū)域。
在設計時,我們從最上面開始。在標題區(qū)域中我們要用上某種顏色(如上圖是填充了黑色),而標題文字則采用反差較大白色。注意這個黑色的區(qū)域為整個頁面定下了一個基調(diào)。接著我們放上圖片,占滿整個圖片區(qū)域。
接著加上文字。我們將各種相關的文字(各種信息及要點)放在三個列的范圍中,并要注意文字間的對比,在上圖中是由較大的細襯線( serif )字體及一種較小的非襯線( san-serif )粗體組成形成了對比。這樣可以使觀看的人知道這是兩部分不同的文字信息。與標題一樣,這里的文字區(qū)域同樣是由那些列來決定的。最后就是加上聯(lián)系信息。地圖放在右邊,占了兩列,而右下角放上了小圖片。
請注意在這個版面中,我們是如何利用不對稱的設計來使整個頁邊變得更加生動。如果在文字區(qū)域里,我們兩邊的寬度一樣大,那版面就會顯得過于平靜。
我們還可以對上面這個設計來點變化:例如我們可以調(diào)整各個區(qū)域的尺寸使到標題能夠放進更多的文字或者在圖片區(qū)域里加進更多的圖片。但無論如何,不要打破原來的區(qū)域基本布局。而且要注意各種長方形的顏色區(qū)域使到整個版面的各個元素聯(lián)系了起來。
在圖片區(qū)域里加多幾張照片(上圖是由三張圖片組成),但圖片所占據(jù)的位置仍然要遵守原來的五列布局。而且象上圖一樣,大圖占三列,小圖占兩列,避免頁面顯得過于呆板。如果你有需要,甚至放進四張圖片也可以(見下圖)。在這種設計中,使其中一張照片比其它的照片都要大可以獲得最好的視覺效果。