Displaying all posts tagged with web design

Balsamiq Mockups – 製作Prototype超Easy


最近正在忙著為新產品和一些projects製作prototype(介面設計草圖), 我平時都慣用photoshop / powerpoint / 手繪 製作介面設計草圖的, 用ps 比較美觀, 但如果要修改時就PK了…..

最近發現了一個好用的小工具-Balsamiq MockupsBalsamiq Mockups是一個基於Adobe AIR的網頁草圖繪製軟體,提供大量常用的 模板(導航條,日曆,表格,到複雜的Tag Cloud,Cover Flow, 地圖,WYSWYG的格式工具欄等等, 到網上還有更多template download 的), 很方便便可加到草圖中, 還有 iphone 介面呢 ^O^。


立即先下載來試用 , 要先 install adobe air , 然後打開來就可以開始使用了…

一開始使用, 介面很易用, 用 mac 和pc 都沒問題, 但注意如果要打中文字的話, 要先在 “view” 設定” use system fonts”呀~


草圖很快便完成了,比以前快了3 分1, 但按 save 時 發覺是試用版,沒輸入序號前,不能存檔。還有每五分鐘一次跳出視窗的提醒……好用的工具, 當然會比錢買啦 (雖然是在公司用多….)  但最後看到價格,79美元,太貴了喇, 好窮買不起……。

p.s. 如果沒有買完整版, 可以使用xml語言來記錄和保存界面元素和佈局的~

不過 Balsamiq Mockups 很大方的提供了許多支援方案,讓你有機會免費取得合法序號,。假如你符合下面的身份或是意圖,就有機會取得免費合法的版權:

1. 非營利組織
2. 願意在部落格或是網站推薦這個軟體的人 (不知我會不會得到免費版呢>u<)
3. 有機會在超過15人的聚會場合介紹這個軟體
4. 高中老師

所以, 有了此 post 出現喇~




嘩, 發現cssmania.com link了我的爛網頁呀~~~好開心!!
奇蹟呀, 我的css爛到爆, 還在學習中呢 >u<
其實呢個blog個design係暫時用住先o架咋, 希望之後有時間可以自己整下wp的 theme啦。


Is Designing For 800×600 Dead?

今天在 web design times 看到一篇文章 :

What with the recent CNN redesign and now the NYT moving to 1024, it seems the big boys have called it a day on designing for 800×600. Less than 2% of visitors to this site have resolutions of 800×600 or less, mostly designers obviously, but how many of you still use the 800×600 model as a basis for designing client websites?

其實我一向design 的網頁都是 800×600 resolution 的, 雖然現在多數人都不再用800600 resolution, 但其實未必人人睇網頁都會用full screen的, 就算用1024闊 看800闊的網頁, 有些空間感, 不會太迫未必不好, 我想很多人都不喜歡用橫向scroll吧。 而且, 我相信一個好的design 是可以切合所有 resolution 的 !

Greater than 584 99%
Greater than 744 98%
Greater than 968 82%
Greater than 1096 44%
Greater than 1344 6%
Greater than 1384 6%
Greater than 1544 3%
Greater than 1624 1%


Calling All Designers: Learn to Write!

Calling All Designers: Learn to Write!

We’ve all been there. The client says, “Just design it. We’ll flow the content in later.” Or the designer says, “Here’s what the page looks like. I just used gobbledygook for the text, cause that’s not my job.” Unfortunately, that’s no way to design a good experience.

It may be fashionable to say “markets are conversations” or “design is about communicating ideas,” but how can that be true if the designers aren’t working with, or actually writing, the text?

User experience isn’t just visual design

It’s time we designers stop thinking of ourselves as merely pixel people, and start thinking of ourselves as the creators of experiences. And when it comes to experience on the web, there’s no better way to create it than to write, and write well.

Let’s look at everybody’s favorite example of Doing it Right: Flickr. Ask a bunch of people what they think of their experience at Flickr and they’ll use words like “fun” and “friendly” to describe it.

Why? There’s nothing uniquely fun about black text on a white background. There’s nothing friendly about uploading and tagging, no matter how many whiz-bang AJAX tricks you use. Sure, the photographic content lends itself to a personal experience. But nobody ever talked about how much fun Ofoto was. And the community-oriented social networking features lend themselves to an emotional experience, but I think there’s something more going on here.

I say: It’s the writing. The friendliness comes from good old fashioned text. When you visit the site, it welcomes you with a random language. Hola! Salut! Shalom! When you log in, the button says “Get in there” instead of “Submit.” When you upload a photo, join a group, add a contact…all of the associated text is open, encouraging, happy, and excited. And it has a significant impact on the overall user experience.

Text is interface

This is not just marketing text (though it’s that, too). It’s interface. This is text that can’t come from the PR department—it comes from us, the designers who are responsible for the user experience. The text is as much a part of the UI as the colors, the pixels, the stuff that designers are usually concerned with. Perhaps more.

Take another example—a site I just discovered, also in the photo space. Photojojo is a labor of love created by Amit Gupta and Kara Canal. It’s a weekly newsletter, and they’ve obviously spent a lot of time crafting the writing in the newsletter. But they spent just as much time crafting the words everywhere else.

When you get to the site, the homepage says, “Congratulations. It’s your lucky day! You just found one damn fine photo newsletter.” Below the email form, the anti-spam message doesn’t say something dry like “we will not disclose your information to third parties.” It says “We solemnly swear: “No spam, not ever.” If you’re curious enough to read the About page, you’re rewarded with an entertaining story about how the two decided to start the site. No marketing BS, just two people who are really excited about what they’re doing.

Now, I’m the kinda guy who unsubscribed from every email list I was on in 1999 and never looked back. I hate email. If the site had used traditional language, I never would have signed up. But their excitement was contagious, and before I knew it, I was plunking down my address. A click on a confirmation mail and the message I get on their website? “Dude, you rule.” Damn right.

Beyond lorem ipsum

So if you’re someone who hires designers, ask them what they like to read. Talk to them about their word choice in every button, every link, every title. Give them a crack at writing your about page. It’s the designer’s job to think about your site the way a user does, and tell them what they need to hear, and when they need to hear it. A designer worth their salt will be able to do it. And if your designer says, “I’m not a writer,” it may be time to find one who is.

If you’re a designer who doesn’t think of yourself as a writer, it’s time to reconsider. Buy yourself a copy of Strunk and White, do some research online, or take a class. Design is about communication, and it takes more than pixels to communicate.


Blog design trends 2006

Rachel Cunliffe寫了一篇Blog Design Trends 有關7個2006年 Blog Design 的趨勢,

Big fonts:

10px,11px細到幾乎看不到的arial, Verdana字體已經out了。現在很多出名的design blog都用大字體的標題, Philipp Lenssen在10 Web Trends That Should Die in 2006的第10點也表示同感。感覺上外國網站字體過小的問題比中文網站嚴重很多,我平時都會用11,12px字體,因為如果中文字體大過14px就好肉孫, 英文字體就ok好多。


Top border:

很多網站/blog而家都會在頁頂加一條5-6px的border,像 A List Apart,Tech Crunch,Whitespace,GigaOM等。被發現了,呵呵。可能因為內容唔太貼頂睇落可以順眼d啦,其實我平時砌layout都幾的加top border o架。

snap852snap851snap850 snap849 snap848

Big headers/ footers:

大的頁首其實還很常見的, 現在很多網頁都使用對比高的顏色來凸出頁首或頁尾。如Juque、Read/Write Web、Business Logs、The Hot Crew,這些頁首和頁尾橫跨整個視窗,而其餘的內容則更為狹窄。Rachel後來將big footer這一項修改為「the content-rich footer」,鼓勵blogger將較早的文章(earlier content)或是相關連結(related links)放到頁尾裡面。因為會閱讀到文章結尾的人,表示他們可能想吸收更多資訊。所以不妨把放在側邊欄(sidebar)中的部份資訊挪到這裡,方便他們閱讀。 當 然,也不必極端到把所有放在側邊欄的東西全都丟到頁尾,畢竟有些資訊(尤其是主要的單元選單),最好是放在不必捲動頁面,一眼就可以看到的地方。為了強調設計感,而把它們丟到頁尾的話,反而會讓網頁的易用性(usability)和親和力(accessibility)大打折扣,嚇跑你的讀者。

snap027 snap026 snap023 snap021 snap022 snap025

Bright colours:

垂直漸層加Bright colours搭配。這樣的網站有:9rulesBlinksaleSerene GreenFruitcast。 又與漸層了。

snap028 snap029 snap030 snap031 snap033 snap034

Speech bubble comments


Rounded corners:


Highlighted links:

連結不再加上底線,不過它們的背景色變得不同了 – 通常是淡黃色的。