Category Archives: Web Design

Web design is a process of conceptualization, planning, modeling, and execution of electronic media content delivery via Internet in the form of technologies (such as markup languages) suitable for interpretation and display by a web browser or other web-based graphical user interfaces (GUIs).

IE 也支援的 Inline-block

Posted on August 15, 2010 by kayue

.inline-block { display: inline-block; zoom: 1; *display: inline; } CSS 中最常用的 display properties 一般有 block、inline、none。而 Inlin-block 是另一個極好用的屬性，卻因為 IE 不太支援，所以常常被忽略掉。而只要用上面這段 css snippet ，就能令 IE 也支援 inline-blcok 了。

Posted in Web Design | Tagged , | Leave a comment

HTML5 預設模版頁

Posted on August 11, 2010 by kayue

自從沒有再用 Dreamweaver 以後，每開始一個新頁面我就煩惱 doctype 該要寫甚麼，jQuery 的 Google CDN 網址又是甚麼……以往這些都包括在 Dreamweaver 的預設 HTML 網頁模版裡。

Posted in Web Design | Tagged , , , , , , | Leave a comment

CSS3 PIE – 讓 IE 支持 CSS3

Posted on July 14, 2010 by kayue

又是老話題。CSS3 PIE 又是另一個目的在令 IE6 – 8 支援圓角、陰影及漸變的 .htc hack。這三個大概是最常用的 css3 屬性了。特別的是 CSS3 PIE 是連 code generator 的，十分方便。 在 VMWare 裡試了試 IE6 下的效果，完美的 rendering ，但好像會把機器拖得很慢似的……有機會再在原生機器上試試。 網址：http://css3pie.com/

Posted in Web Design | Tagged , , , , , , , | Leave a comment

常用 CSS Hack 再整理

Posted on June 27, 2010 by kayue

瀏覽器越來越多，舊的未去，新的又來，CSS hacks 亦需定時整理。 CSS Hack IE hacks 雖然 IE 對 CSS 的支援不堪入目，可是卻有方便的屬性 hacks！把下列 hacks 記下來即可輕鬆應付各版本的 IE！ .selector { padding: 10px; padding: 9px\9; /* all ie */ padding: 8px\0; /* ie8-9 */ *padding: 5px; /* ie6-7 */ +padding: 7px; /* ie7 … Continue reading →

Posted in Web Design | Tagged , , , , | 3 Comments

Bounce – 輕鬆在網頁上加注釋

Posted on June 25, 2010 by kayue

網頁設計師都知道，跟客戶用 email 溝通時，客戶常常會在 email 中用文字描寫列出一堆需要修改的地方，又或者截圖後在 powerpoint 裡發揮他的小宇宙。最糟是自從用 Mac 後，遇上亂作一團的 ppt 作圖，我都不知道是 Mac 版的 Office 相容性問題，還是客戶的美術天份低。

Posted in Web Design | Tagged | 1 Comment

960 Grid Actions for Photoshop

Posted on June 24, 2010 by kayue

如果你也有用 960 Grid System 的話，這幾個 Photoshop Actions 一定對你有用。 960 Grid System 是個網頁設計法則和 css 框架，它主張一個網頁的寬度應為 960 px，並將之分成 4 至 24 等份（Grid 是也），欄與欄之間再有若干空間（Gutter）。網頁的元素應在這些 column 以內，以達至視覺平衡的目的。

Posted in Web Design | Tagged , , , , | 1 Comment

Stanford Javascript Crypto Library

Posted on June 10, 2010 by kayue

需要用 Javascript 加密內容的人有福了。Stanford Computer Security Lab 制作了個 Stanford Javascript Crypto Library ，壓縮後大小只有 6.4敏感詞KB，使用上也非常方便： sjcl.encrypt(“password”, “data”); sjcl.decrypt(“password”, “encrypted-data”); 請移玉部至 http://bitwiseshiftleft.github.com/sjcl/demo/ 把玩一下 demo。

Posted in Web Design | 2 Comments

Google Web Font API

Posted on May 20, 2010 by kayue

在今年第一天的 Google I/O  上，Google 公開了其 Google Web Font API，開始提供在線字體 (Web font) 服務，而且理所當然是免費的。日後 web designer / developer 要用系統以外的字體的時候，再不需要動用到 Photoshop 把字轉成圖，只消在 <head> 加入一行 code 即可。

Posted in Web Design | Leave a comment

IE-CSS3 讓 IE 支援 CSS3

Posted on April 14, 2010 by kayue

IE-CSS3 是個能令 Internet Explorer 不完整地支援幾個常用的 CSS3 屬性的小 script。它利用了 Internet Explorer 專有的 Vector Markup Language (VML) 來繪制所需效果。 使用方法很簡單，如果你需要圓角效果，只需一如以往地用 border-radius，再加上 behavior: url(ie-css3.htc) 即可：

Posted in Web Design | Tagged , , , , , , | 2 Comments

抽絲剝繭的 icon 設計

Posted on March 15, 2010 by kayue

一個 icon 設計的好壞，除了好看與否以外，還有是功能性的考量 － 是否容易、準確地讓用戶理解到其所想表達的意思。每一個 UI 上的 icon （符號）背後其實都是一個「隱喻」，運用真實世界所熟悉的概念來描述某功能。 其中一個影響 icon 表達能力的因素是 icon 的真實度（realism）。在《Realism in UI Design》一文中作者舉出了如下例子：

Posted in User Experience, Web Design | Tagged , , , , , , , , | 2 Comments