Archive for category Design
免費的 Web 2.0 Social Icons
現在的website 當然要有social icons，即使很巨型的website ，或者是簡單的幾頁static 的html ，facebook share, link to youtube…..
這些都已經成為必需品。
這些可以加強你網頁的宣傳和知名度，令你設計這個website 的目標更容易達到。
Source: http://www.freesocialicons.com/
Turbo Photo 免費下載的商業圖片
雖然只有一個少部份是免費的，不過都有很多張呢。
商業用途都可以，（雖然好明顯是一種宣傳方法）
不過設計上都應該會找到有用的component 呢。～
Source: http://www.turbophoto.com/Free-Stock-Images/
免費下載 高質素的背景 pattern
background pattern 希望對大家有用。
這個網站可以用category 來找pattern，亦可以由colour 方面去找，十分方便。
Source: http://www.backgroundlabs.com/
Website Navigation Usability 小貼士
Posted by Chowky in Design, Jquery, Mootools on December 26, 2009
每一個 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 早已習慣。
Read the rest of this entry »
[CSS] Radioactive Buttons (Safari 4.x, Google Chrome Only)
Posted by Chowky in Design, Jquery, Mootools, News on December 7, 2009
就近聖誕，當然要加入一些聖誕元素呢~~。
這個demo 就教你利用webkit 的css animation 去做一個閃閃下的button~~..
因為是利用了webkit 的關係，所以~~…..只可以做到safari, google chrome show 到出來。
做法就很簡單 (當然是因為利用了css 的animation)
Read the rest of this entry »
Stripes – a conceptual operating system user interface
這是一個prototype / concept for OS.
作者很用心設計 user interface 的control, transition ，去令到user 有一個better user experience ，簡單來說就是天更易用。
大家可以看看這個ui design.
免費的online pattern generator
只要upload 一張圖，再select 你想要用來做pattern 的area，repper 就會自動幫你generate 一個pattern 呢。
自己動手制作自已的background pattern.
Source: http://repper.studioludens.com/#
CSS Button Styling 教學
每一個website 都需要button (按鈕). 這是非常基本的element. 卻扮演著一個很重要的角色，用來配搭不同的theme。
以 User Experience (UX) 的角度來說，一個button ，必須令人知道button 是clickable (可按的) ，簡單來說就是一看上去就令人知道是button。
若兩樣加起來，就比較困難，既要看上去似一個button，外表亦要好看，又要配合設計主題。
這個教學主要是利用了css sprite 的技術。css sprite.
先看看完成圖~
畫方面，請參考原文
Chowky 著重於怎implement
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | < !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)
一個提供免費的 web design template 和素材的一個外國website
Source: http://www.bevelandemboss.net/free-templates.php
150 個免費的 PSD 的按鈕 (Buttons) Template
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/
-
You are currently browsing the archives for the Design category.
Recent Comments