設計網站版面最重要的一環

圖片來源: Slate – Eduardo Santos

好的設計帶你上天堂,這句耳熟能詳的話大家應該都會背了。但我們都很清楚,「設計」真的是很主觀的,每個人對美的定義都不同,透過網站視覺所接收到的訊息也不同。但撇開一些極端的例子不談,設計還是有所謂的「安全範圍」,而這個安全範圍,是可以安全到讓人點頭稱好的。

那麼,揪竟在設計「安全範圍」的網站時,該把握哪一項要素,才能讓客戶點頭稱好呢?

那項要素,就叫做「整體的質感」。

同樣撇開有天分的設計師不談,每個人可以駕馭的風格都不太一樣,比如玩遊戲你選擇了元素師職業,也會有擅長與不擅長的元素,而決定你要轉職風火水雷哪一個元素。對設計師來說這也是一樣的道理,「色彩繽紛的」、「復古的」、「簡潔的」、「炫麗的」、「扁平的」、「立體的」….,我相信不是每個設計師都擅長所有的網站風格。但即使如此,依然要注重「整體的質感」。

只要設計網站時,質感抓到了,即使物件排列些微詭異、色彩運用些微不妥,也不會第一眼就被別人打槍。因為設計師交稿一定是先給 JPEG 檔案,業主第一眼一定是先看縮圖的整體視覺,才會細看裡面的配置,整體性有了、質感有了,剩下的小調整隻要在容許範圍內,都可稱得上是好的合作模式。

所以建議設計師,在設計網站時,除了過度專注在某一區塊的微調時,也請時不時的「ctrl + 0」一下,看看整體的版面風格,是否有過於跳 tone,或是粗糙的地方。因為唯有綜觀全局,你才能發現配色、細緻度、以及物件之間的連結性,是否有需要修正的地方。

我在逛網站特別注重整體質感以及細節的精緻度,當我看到一個平凡,沒質感又不精緻的網站,實在讓我沒有動力瀏覽下去。如果你跟我一樣有這種詭異的毛病,歡迎與我分享你覺得好看的網站,大家一起讓眼睛吃冰淇淋 😀

Dribbble 所賜,許多厲害的設計師會將他們的作品放在上面供人膜拜欣賞;要找出我覺得很醜的網站、非常多,但我心臟沒那麼大顆,不敢明目張膽的秀出來,所以只好反其道而行,放上我覺得有「整體質感」的網站給大家欣賞 (多來自 Dribbble) 。


1. Slate – Eduardo Santos

適當的留白與簡單的風格,還有重點突出的配色,不會讓人覺得很突兀,而且黑白的 Flat design,是非常安全的質感色。

圖片來源: Slate – Eduardo Santos

2. Blog Design – Mani

當然,不一定只有黑白灰才能做出質感,暗色背景與淺灰的搭配,還有按鈕的精緻度也很重要。而精緻這件事情,並不是要你做的多複雜、多花俏,簡單的線條也可能做到精緻的效果,當然這就要看個人的設計功力了。

圖片來源: Blog Design – Mani

3. Google+ Grid – Haraldur Thorleifsson

只要顏色運用得當,色彩繽紛的風格也不會給人雜亂的感覺,反而會覺得很豐富;另外區塊愈大、色彩愈多,留白也變得相對重要。色彩是門學問,以這個網站縮圖的例子來說,即使他用的顏色很多,主要還是繞著紅、綠、藍、黃這四種配色,如果不會掌握明度與彩度, Dribbble 的設計都有提供色碼,可以多多參考運用。

圖片來源: Google+ Grid – Haraldur Thorleifsson

4. Hypo

官方網站要做的有質感,商攝也是重要的因素之一。選出好看的照片做搭配,可以讓網站風格大加分,搭配像木頭架子這樣故事性強烈的畫面,是不是非常賞心悅目又不突兀呢。官方網站有時需要嚴謹的作風因此不能太跳 tone,但是設計師如果可以搭配官方產品做出不一樣的巧思,一定可以讓業主感受到用心。畢竟天下模板一大抄,別人無法複製的卻是你的用心與創意。

圖片來源: Hypo

最後附上我私藏多年的個人網站 🙂

5. PEPPER

誰說十年前的個人網站就不能有質感? PEPPER 是個人網站盛行的時候,我非常喜歡的一個素材網站,撇開當時的環境盛行用 table 排版不談,網站很有主題性,風格也一致,手繪的向量 icon 同樣很精緻,這就像我前面提到的,誰說一定要複雜才叫精緻?簡單俐落的線條也可以呈現出質感。

圖片來源: PEPPER

其他像是復古風、絢麗風…等等的網站,其實概念大同小異。我覺得優質的設計一定要包含:

  • 適當的間距與留白
  • 細緻的物件與元素 (再次強調。簡單的線條也可以呈現細緻感)
  • 細節 (例如區塊的陰影是否會讓畫面有骯髒的感覺,還有按鈕和文字間的比例…等等)
  • 整體的質感

設計是一項值得尊敬的專業,也是一門高深的學問。我絕對不敢說自己會設計,但我期望朝著自己心中優質的設計之路邁進,也希望每個設計師的心中,也有一條自己的優質設計路,用模板也許可以快速地做出一個網站,但事後想想,你真的能自豪地說這是你的設計嗎?

設計也需要設計師的用心與巧思,你可以選擇做出一個很安全的版面讓業主點頭過關,但如果可以在這安全的層面上,加上多一點的質感,我想不僅業主滿意,設計師也會有成就感,這才是工作上的雙贏 :)。

如何設計好的使用者介面 (Good UI) ?

這篇文章一直放在我的草稿沒有發佈出來,說穿了就是想要將粉絲團的文章整理過來而已。

粉絲團翻譯了 goodui.org 的資料,利用「對」與「錯」的圖解告訴大家怎樣的設計比較好。

我個人覺得這個網站寫的很棒,而且作者已經更新到 70 種小技巧了!未來也希望自己可以持續更新,將圖片和翻譯同步放到這一篇文章裡。

那麼現在就先放之前在粉絲團的介紹吧 😓

https://www.facebook.com/160424550832/posts/10151656942705833

https://www.facebook.com/160424550832/posts/10151735632280833

動手更換 Facebook 的新版面

前陣子等得望穿秋水的 Facebook 終於改版了!雖然改版很開心,但是看了幾個小時後發現體驗不太好,舉例來說,這次塗鴉牆的圖片尺寸雖然變大了,但每則訊息的間距也因此變小,所有訊息交雜在一起,很難分清楚這是誰說的?那篇又是誰發的?假設一個人每天要看的資訊流很大,或像我一樣是 FB 重度使用者一直用滾輪看消息的話,就會覺得很痛苦。

另外廣告真的很阿雜,三欄訊息沒有一個比重,文字都是黑色字體,非常的沈重且壓迫,搞的塗鴉牆訊息無法跳出來,真的很痛苦。

所以花了一點時間微調了 Facebook 的版面,就像是我上面的圖片一樣。如果你的 Facebook 也改成新版了,不妨對照一下我改了哪些東西吧 🙂

原本使用 Stylish 這個擴充元件,只要稍微懂點 CSS 的朋友,都可以透過他在本機修改網站樣式,符合自己的閱讀習慣。此外官網也有許多同好做的佈景樣式,方便我們套用。

但是後來發現另外一套:Stylebot,功能更強大也更好用。雖然樣式沒有 Stylish 多,但是他的網站更漂亮,而且使用起來也更方便!推薦大家使用 Stylebot 喲~

▼ 比 Stylish 好看一百倍的網站!
stylebot

關於 Stylebot 的介紹與教學,異塵行者已寫過一篇文章介紹,我這邊就不再贅述了:

當你來到一個網站,覺得它的內容排版方式不符合你的喜好時,會不會想要自訂替換新的網頁版面?當你正在架設自己的部落格,希望比較各種可能的外觀介面微調,會不會需要一個簡單易用的網頁樣式編輯器?在此之前,能夠滿足上述CSS樣式調整需求的工具,應該是Firefox、Google Chrome皆適用的擴充套件:Stylish。

Stylebot 設計網頁不用懂CSS語法, 親切版Stylish隨意改造網站

套用我修改的 Facebook 樣式

最後要跟大家分享的是我自己修改後的語法,可以參考上面的截圖。
我有將語法放在 Stylebot 上,如果你已安裝相關擴充元件,可以直接點選網址套用:http://stylebot.me/styles/5315

比較特別的修改如下:

  1. 去除廣告 (一定要的)
  2. 修改動態牆的間距,讓每篇文章看起來有個分隔
  3. 修改文字大小、行高與段落,閱讀較為舒適
  4. 加大動態牆的寬度
  5. 刷淡左側側邊欄的顏色,讓塗鴉牆跳出來,不會被左側的側邊欄干擾
  6. 移除左側側邊欄的遊戲、朋友、以及其他資訊,讓資訊更為簡單
  7. 固定左側側邊欄,滾動的時候,側邊欄不會跟著移動
  8. 右側廣告部位預設為小勞勃道尼的帥氣照,懂 CSS 的朋友,可以將 http://i.imgur.com/RAv5bAy.jpg 改成任何你想放的照片。

因為 stylebot 不支援火狐瀏覽器,所以如果你恰巧使用火狐,也可以改裝 Stylish,然後複製我底下的 CSS 語法即可~

CSS

用 Photoshop 做出相機圖示

今天參考了網路上的教學,用 PhotoShop 做出相機圖示。其實像這類的 icon 應該要用 Illustrator 比較恰當,畢竟使用向量圖在放大 & 縮小的時候都不會失真。不過我也只會用 PhotoShop,剛好教學也是用 PS 做的,超開心 XDD

原文的教學寫得非常清楚,連他設定的數值都秀出來給大家看,所以只要會基本的 PhotoShop,都可以手把手做出一樣的相機圖示喲。不同的頂多就是發揮自己的創意再修修改改吧 :)

教學網址:原創/自譯教程:教你用一個圖層搞定相機圖標(原創文章) (版權內容屬於原作者,我只是單純備份圖片)

想從設計走到前端?先了解前端在幹嘛吧!

你是設計嗎?你想往前端發展嗎?那先瞭解前端在做什麼吧 :)

設計的工作流程

身為一個過來人,應該說我也還正在這條路上行走,有一些心得想跟大家分享。我是從設計起家的。設計的領域又可粗分為圖示設計跟排版設計…等等,而我是屬於排版這一塊。做網頁的流程大致是:

  1. 打開 PhotoShop / Sketch 從一張空白的圖層開始做出一個網站
  2. 進切版(用 PhotoShop / Sketch 切出需要的 icon) 以及 Layout (用 HTML + CSS 做出網站)
  3. 會碰到 JS 的互動時,我能找套件就先幫忙做好,不行就放著給後端
  4. 丟給後端套程式。

如果你不是純視覺,我想你的工作流程可能跟我差不多。那,這樣不算是前端嗎?

(閱讀全文…)