Lab of Chowky » Design

免費的 Web 2.0 Social Icons

Chowky — Thu, 28 Jan 2010 13:16:12 +0000

現在的website 當然要有social icons，即使很巨型的website ，或者是簡單的幾頁static 的html ，facebook share, link to youtube…..

這些都已經成為必需品。

這些可以加強你網頁的宣傳和知名度，令你設計這個website 的目標更容易達到。

Source: http://www.freesocialicons.com/

Turbo Photo 免費下載的商業圖片

Chowky — Wed, 27 Jan 2010 12:42:34 +0000

雖然只有一個少部份是免費的，不過都有很多張呢。

商業用途都可以，（雖然好明顯是一種宣傳方法）

不過設計上都應該會找到有用的component 呢。～

Source: http://www.turbophoto.com/Free-Stock-Images/

免費下載高質素的背景 pattern

Chowky — Sat, 16 Jan 2010 15:09:26 +0000

background pattern 希望對大家有用。

這個網站可以用category 來找pattern，亦可以由colour 方面去找，十分方便。

Source: http://www.backgroundlabs.com/

Website Navigation Usability 小貼士

Chowky — Sat, 26 Dec 2009 09:29:25 +0000

每一個 website ，除了 visual 上要設計之外，navigation 上的設計其實更為重要。試問user click來click 去都找不到自己想要的information。這種website 的user experience 一定不會好，即使visual 上做得好好，都只是一個外觀很好的website。

User 找不到想要的info，看完就算，對於你的目標，就是否這麼簡單呢？你可能會失到potential customers。

所以website navigation 上面一定要花心機去令website 更容易去browse.

這方面就應該要參考一下其他人的做法呢。

1. 簡潔的 Menu Navigation
這個例子當然會是apple 的design。直接的表達，就會避免混亂，而且可以令到visitors 更容易找到想要的資料

2. 加上主頁的link去自己的logo 上
現在很多不同的website 都已經是這樣做了，差不多是 standard 做法，最重要的是visitors 早已習慣。

3. 準確易明的的Link Description
若果文字上能夠做到簡單易明，visitor 就會能夠expect 之後出現的content.

4. Site Map
當然對於靜態（static）的website 就要自己再寫多頁，平常使用的cms 就一定會有這種功能。一個sitemap 可以讓vistor 很快就找到自己想要的content. 而且sitemap 對SEO 會有很大的幫助。若果你的網站是很大就一定要有啦～

5. 搜尋功能
當你的website 的content 比較多的時候，人們就會直接search，可能visitor 已經有一些特定的目標，有個search 的功能就令visitor 很快找到想要的features / products 。所以必定要加！
你可以選擇，利用google 的custom search 的功能 or custom made，當然正常的CMS 就已經會加上site search這個功能。

6. Navigation Active State
這個可以令visitors 可以立即知道自己哪一個地方。

7. Breadcrumbs
當click 左入不同的links 之後，就會忘記是怎樣click 的呢～這個是適合一些很大的website。這個功能可以令user 知道自己website 的位置。

Source: http://blog.webassist.com/2009/12/7-crucial-usability-tips-for-website-navigation/

[CSS] Radioactive Buttons (Safari 4.x, Google Chrome Only)

Chowky — Mon, 07 Dec 2009 08:11:27 +0000

就近聖誕，當然要加入一些聖誕元素呢~~。

這個demo 就教你利用webkit 的css animation 去做一個閃閃下的button~~..

因為是利用了webkit 的關係，所以~~…..只可以做到safari, google chrome show 到出來。

做法就很簡單 (當然是因為利用了css 的animation)

//Animation
@-webkit-keyframes greenPulse {
from { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; }
50% { background-color: #91bd09; -webkit-box-shadow:: 0 0 18px #91bd09; }
to { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; }
}

//把 button 的class 加入effect
a.green.button {
-webkit-animation-name: greenPulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}

Source: http://www.zurb.com/playground/radioactive-buttons

Stripes – a conceptual operating system user interface

Chowky — Fri, 04 Dec 2009 14:46:15 +0000

這是一個prototype / concept for OS.

作者很用心設計 user interface 的control, transition ，去令到user 有一個better user experience ，簡單來說就是天更易用。

大家可以看看這個ui design.

免費的online pattern generator

Chowky — Thu, 19 Nov 2009 13:36:55 +0000

只要upload 一張圖，再select 你想要用來做pattern 的area，repper 就會自動幫你generate 一個pattern 呢。

自己動手制作自已的background pattern.

Source: http://repper.studioludens.com/#

CSS Button Styling 教學

Chowky — Thu, 24 Sep 2009 05:56:00 +0000

每一個website 都需要button (按鈕). 這是非常基本的element. 卻扮演著一個很重要的角色，用來配搭不同的theme。

以 User Experience (UX) 的角度來說，一個button ，必須令人知道button 是clickable (可按的) ，簡單來說就是一看上去就令人知道是button。

若兩樣加起來，就比較困難，既要看上去似一個button，外表亦要好看，又要配合設計主題。

這個教學主要是利用了css sprite 的技術。css sprite.
先看看完成圖~

畫方面，請參考原文

Chowky 著重於怎implement

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Button</title>
 
<style type="text/css">
 
* { margin: 0; padding: 0; /* Quick and Dirty Reset 非常有用*/ }
 
body {
	background: url(bg-repeat.png);
}
 
#demo {
	width: 433px; margin: 100px auto;
}
 
</style>
</head>
 
<body>
 
<div id="demo">
 
</div>
 
</body>
</html>

加入button link的html

<p>< a href="#" class="press-it-btn">Press it</p>

加入button 的css (default state)

#demo p a.press-it-btn {
	display: block;
	width: 433px; height: 174px;
	background-image: url(button-sprite.png);
	background-position: top;
	text-indent: -9999px; /* 因為seo 的關係，我們要KEEP字(Press it)，所以要踢走字 */
}

加入hover 和active state.

#demo p a.press-it-btn:hover {
	background-position: center;
}
#demo p a.press-it-btn:active {
	background-position: bottom;
}

當你試的時候，某些browser (e.g.firefox)，會加入了一個核突的dotted line
因為踢走字的關係而出現的

所以連outline 都不要

a { outline: none; }

但如果當user 用keyboard netvigate 的時候 (用tab) 就不會知道他們focus的地方，所以自己加上highlighting

#demo p a.press-it-btn:hover, #demo p a.press-it-btn:focus

Demo: http://line25.s3.amazonaws.com/wp-content/uploads/2009/css-button/demo/demo.html
Souce: http://line25.com/tutorials/how-to-build-a-simple-button-with-css-image-sprites/

免費 Web Design Template (PSD)

Chowky — Mon, 14 Sep 2009 07:11:45 +0000

一個提供免費的 web design template 和素材的一個外國website

Source: http://www.bevelandemboss.net/free-templates.php

150 個免費的 PSD 的按鈕 (Buttons) Template

Chowky — Mon, 14 Sep 2009 06:59:06 +0000

web developer 最重要的就是web resources

尤其對著一些schedule 很tight 的 project。

香港有個很古怪的情況 (當然不限於香港)，就是不急不找人做，但 offer 又低。(每次都好像做到臨危受命似的，這樣都做的話，chowky 的命子就危啦~)

哈哈，不過又有很多人會接這些job 呢~，website 其實都已經很難做了。(可能其他人已經利用了國內的developer，所以成本….當然低了很多呢，鬥低人工應該不行呢~)

事實上，即使不是上面所說的job，雖然你大可以由零做起，不過所需的時間都用多很多呢。

素材的配合，就成為另一個重要的key factor。

Source: http://www.graphicmania.net/150-free-psd-buttons-for-every-day-use/