網頁設計, 網頁標準化, SEO | HELLOBEAT™ http://beatskate.com/blog 提供網頁設計與開發, 搜尋引擎最佳化, 網頁標準化, 與資訊架構的服務 Tue, 09 Mar 2010 11:40:33 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Whoops, Server downtime.. http://beatskate.com/blog/whoops-server-downtime/ http://beatskate.com/blog/whoops-server-downtime/#comments Tue, 09 Mar 2010 10:16:19 +0000 Beat! http://beatskate.com/blog/?p=1231 沒有其他相關文章]]> 因為工作的關係 Yahoo 首頁頭版的廣告版位我通常都會點擊過去看看該網路廣告活動設計與規劃, 因為只要是刊登在 Yahoo 頭版就表示該活動有一定額度的製作預算, 製作水準也相對的不錯. 有時候看到令人激賞的創意則會佇留多點時間, 仔細研究該製作團隊的巧思.

但是接下來我要闡述的這個事件就常常發生在這些高媒體預算的網路活動當中, 就是 Server Downtime 的問題, 這些配合媒體的活動網站, 由於刊登在 Yahoo 首頁 (或是其他高流量的網站) 的關係, 常常一上線就會馬上塞暴客戶既有的主機, 所以普遍的作法則是由製作公司或是 Agency 自行代管或是另外替客戶找活動網站主機並進行主機流量/ 承載規劃, 因為通常如果不這樣做的話. 就會發生如下的慘狀…

這是今天約 5:10 的 yahoo 首頁, 點了 SK2 的 Banner 之後, 10秒, 30秒, 10分鐘過去了, 網站卻一直處於一遍空白, 讀取中的狀態…(或是該公司的 Tracking Code Database 當了?)

雖然不確定實際情況怎樣, 但製作公司卻讓這樣的情況發生, 浪費了客戶大筆的媒體費用, 也讓自己的作品減少曝光的機會, 不管客戶是否有發現這樣的情況, 但在網站上線之前竟然沒有依照其媒體預算以及製作內容去估算主機能夠承載的壓力. 實在是有點太誇張, 而這樣的情形也一直反覆發生在這些沒有相關經驗的製作公司當中.

直到我寫完了這篇 Blog, 約莫過了 30 分鐘, 這個網站還是連不上……XD

沒有其他相關文章

]]> http://beatskate.com/blog/whoops-server-downtime/feed/ 2 Do you know how to become Mars? http://beatskate.com/blog/do-you-know-how-to-become-mars/ http://beatskate.com/blog/do-you-know-how-to-become-mars/#comments Wed, 03 Mar 2010 06:32:46 +0000 Beat! http://beatskate.com/blog/?p=1217 其他相關文章:
  1. Fallon: Skimmer
  2. 漢堡王 x Facebook 病毒式行銷
  3. Nike: Take It To The Next Level
]]>

這是 NIKE 替旗下獨立的 Jordan Brand 推出的網路活動 Become Mars. 這個網站延續 22 年前 NIKE 跟 Wieden + Kennedy 廣告公司推出一系列的廣告活動概念, 那時找來了 Jordan 跟 Spike Lee (as Mars Blackmon) 替當時剛推出的 Jordan 4 代宣傳.

Mars Blackmon 這一系列的廣告活動從此之後改變了運動球鞋 as Sneakers 的市場定位, 籃球鞋變得再也不只是球場上的裝備, 也可以是非常街頭且 Trendy 的配件之一, 在那時候 Mars 的穿著甚至影響了所有街頭的年輕人, 不管你是否有打籃球, 而後 Jordan series 已經變成每個年輕人必備的鞋款, 如果你跟我一樣是後 80 出生的, 你應該也完整經歷過那時候 Jordan 4-12 代鞋款瘋狂的年代, 從小學開始就瘋狂的對 4 代著迷, 一直到國中 8, 9 代…..(不小心透露了年紀…)

而這個網路活動的概念簡單且清楚, 就像標題 『Become Mars』 想要傳達的, 你可以透過上傳照片 或是 Web Cam, 製作你想要的 Mars Blackmon’s position, 把你變成 Mars!, 再透過 Twitter 或是 Facebook 分享. 當然也不能錯過因應這個活動特別推出 iPhone App. 網站替當時這個極度成功的廣告注入新的生命, 也讓沒經歷過 Mars Blackmon 的年輕人能與 post 80’s 的街頭文化接軌!



接下來, 讓我們來體驗這一系列超級超級經典的 Mars Blackmon
『Mike, It gotta be the shoes!!』

Air Jordan Goodbye Mars

Jordan 宣布退休後推出的 Mars AD

其他相關文章:

  1. Fallon: Skimmer
  2. 漢堡王 x Facebook 病毒式行銷
  3. Nike: Take It To The Next Level

]]> http://beatskate.com/blog/do-you-know-how-to-become-mars/feed/ 0 4個車站距離的感染力 http://beatskate.com/blog/mrt-sketc/ http://beatskate.com/blog/mrt-sketc/#comments Mon, 01 Mar 2010 06:28:49 +0000 Beat! http://beatskate.com/blog/?p=1212 沒有其他相關文章
]]> 這是前幾天坐捷運要前往客戶那邊參加一個重要會議的經歷, 那時我心裡正在準備等一下 presentation 的 run down, 我想忙碌的都市人坐捷運時應該都是這樣, 周圍環繞著不熟悉的陌生人, 總是慌亂的想找點什麼事情來做, 或是專注投入於腦海裡的思緒.

這時中途一位和藹的老年人上車了, 就坐在我的正對面, 他拿起了碳筆, 好像開始速寫了起來.
起先我也不以為意, 腦袋裡還是持續著會議假想的對話, 但是當整節車廂的人們都開始注意這位畫家手上的畫板, 我也好奇了起來. 而這時…這位畫家開始手拿碳筆指向我, 且開始對我這麼陌生人微笑, 我也不得已以尷尬的微笑回應, 說也奇怪, 這時整節車廂好像被莫名的氛圍給感染了, 不需任何語言, 每個人只是靜靜的微笑看著, 而坐在對面的我, 完全沒有頭緒, 只能大概臆測且像個傻瓜似尷尬的坐著

約四個車站的距離, 這位不知名的畫家到站了, 而他好像也完成手上的速寫, 拿起板子讓我看了一眼, 驚訝的我也只能以微笑送離這位陌生的畫家…

一支碳筆, 一張紙, 短短四個車站的距離, 就能影響周圍的人們. 而我彷彿也被這位畫家深深的感染了, 本來重要會議的緊張感也完全消失了, 取而代之的是一整天好心情的預感.

後來, 我遞了張名片給同車廂的高中女生, 請他們將所拍攝的照片寄給我, 而我當天晚上就收到 Email, 相當的感謝他們.





沒有其他相關文章

]]> http://beatskate.com/blog/mrt-sketc/feed/ 3 UJ http://beatskate.com/blog/uj/ http://beatskate.com/blog/uj/#comments Mon, 01 Mar 2010 04:33:52 +0000 Beat! http://beatskate.com/blog/?p=1200 其他相關文章:
  1. TOO MANY T-SHIRTS: UTLOOP
  2. UNIQLO
]]>


同如 UT 的概念, UNIQLO 把旗下的 Jeans 獨立出來變成 『UJ』 想告訴大家他們的 Jeans 有多麼的特別, 當然也不能免俗的找來 Yugop 替 UJ 的 Mini Site 操刀, 雖然沒有令人意外的創意, 但是這個網站執行想傳達概念相當清楚且精準. 放在店頭的裝置播放也相當的適合 (如果大家有去過東京的 UT 或是 UNIQLO 的旗艦店就會明白了)

UNIQLO Jean 相當的好穿, 而且便宜, 不易變形!
000 – Skinny Fit 是我這幾年唯一固定會重複購入的 Jeans (必備款!!)

其他相關文章:

  1. TOO MANY T-SHIRTS: UTLOOP
  2. UNIQLO

]]> http://beatskate.com/blog/uj/feed/ 0 Skype Outside http://beatskate.com/blog/skype-outside/ http://beatskate.com/blog/skype-outside/#comments Wed, 24 Feb 2010 09:43:00 +0000 Beat! http://beatskate.com/blog/?p=1196 沒有其他相關文章
]]>

為了讓大家能夠體驗 Skype 推出的全新 Skype on your Mobile 服務所能提供更多溝通的可能性, Skype 找了五位來自於澳洲, 日本, 土耳其, 西班牙, 美國的藝術家, 讓我們可以透過網站直接 Skype 留下語音, 並發送連結於他們的手機簡訊裡, 這些藝術家則會透過簡訊聆聽來自全世界的陌生人的留言.

最後, 這些藝術家則會將這些訊息當成創作的元素, 這些作品也將會發佈於網站上.

Site: http://outside.skype.com/

沒有其他相關文章

]]> http://beatskate.com/blog/skype-outside/feed/ 0 Your daily dose of balance: New Balance 365 http://beatskate.com/blog/your-daily-dose-of-balance-new-balance-365/ http://beatskate.com/blog/your-daily-dose-of-balance-new-balance-365/#comments Wed, 24 Feb 2010 09:08:26 +0000 Beat! http://beatskate.com/blog/?p=1189 沒有其他相關文章]]>

追隨之前的 574 Clips 網站的概念, New Balance 與 Mother New York 再度合作, 打造 New Balance 365 網站, 每天網站都會展示一部短短 20 秒概念短片, 持續 365 天, 也因應網站推出 iPhone app 鬧鐘, 讓你每天都在多樣且逗趣的影音中醒來!

A Daily Dose of Balance!

沒有其他相關文章

]]> http://beatskate.com/blog/your-daily-dose-of-balance-new-balance-365/feed/ 1 Wrangler Blue Bell 網站 – 拖與拉的新體驗 http://beatskate.com/blog/wrangler-blue-bell/ http://beatskate.com/blog/wrangler-blue-bell/#comments Wed, 03 Feb 2010 04:01:03 +0000 Beat! http://beatskate.com/blog/?p=1180 其他相關文章:
  1. IKEA: Come into the Closet
]]>

來自瑞典的互動設計公司 Kokokaka 替 Wrangler 的 Blue Bell Jeans Spring/Summer 2010 collection 打造了一個相當簡單卻成功的網站, 使用者只需透過滑鼠的拖拉互動, 即可用一種奇特的角度去瀏覽 Collections, 在高速攝影機下拍攝 Model 詭異的肢體動作也激發了使用者的好奇心, 更進而去 Interact and Explore more.

另外, 體驗完網站之後是否對場景裡的 Loop 念念不忘? 網站也讓你可以將 Soundtrack 打包回家!

類似的表現手法, Kokokaka 同時也是我之前介紹過 IKEA: Come into the Closet 的製作公司

其他相關文章:

  1. IKEA: Come into the Closet

]]> http://beatskate.com/blog/wrangler-blue-bell/feed/ 0 Michael Bierut on Clients http://beatskate.com/blog/michael-bierut-on-clients/ http://beatskate.com/blog/michael-bierut-on-clients/#comments Tue, 02 Feb 2010 00:11:56 +0000 Beat! http://beatskate.com/blog/?p=1172 沒有其他相關文章
]]>

很少聽過設計師分享類似這樣的題材.
來自 Pentagram 的 Michael Bierut 今天想跟大家聊聊 『客戶』!!

Never talk about 『Educating the Clients.』

我相當認同這個觀點, If you just can’t convince the clients, that’s your problem!

沒有其他相關文章

]]> http://beatskate.com/blog/michael-bierut-on-clients/feed/ 0 好書推薦: 大師的身影, Allan Poe http://beatskate.com/blog/bookallan-poe/ http://beatskate.com/blog/bookallan-poe/#comments Thu, 07 Jan 2010 16:48:51 +0000 Beat! http://beatskate.com/blog/?p=1157 其他相關文章:
  1. What will happen next?
  2. Ducati Monster S4R
  3. 世界末日的時候該怎麼辦?
]]> Allan Poe, 大師的身影, Designed by Wang Zhi Hong

因為小時候學過速讀的關係, 所以總是很少有機會很仔細的慢慢把一整本書讀完. 這本 『大師的身影』, Allan Poe 的短篇小說集卻讓我不得不小心翼翼, 字字珠磯的讀完他. 因為那些讓你驚悚至極的橋段, 就藏在短短的幾個字裡行間裡. 深怕會錯過它.

當初會在書局拿起這本書來翻閱, 並不是因為 Allan Poe, 而是因為它獨特的書面設計, 仔細一看才發現原來又是王志弘 設計的….雖然書的重點在於內容, 以及字裡行間所能帶給讀者的感受, 但是透過書面設計, 讓消費者能在眾如繁星的書海中只需透過封面, 便能夠大致了解書本身想傳達的意涵, 進而去翻閱, 體會, 進而去購買, 收藏它.

愛書人推薦:

最屌的 editorial designer -王志弘的 Flickr, 每一本書都值得收藏!!

其他相關文章:

  1. What will happen next?
  2. Ducati Monster S4R
  3. 世界末日的時候該怎麼辦?

]]> http://beatskate.com/blog/bookallan-poe/feed/ 0 把資訊架構當作是網頁設計的延伸 http://beatskate.com/blog/information-architecture/ http://beatskate.com/blog/information-architecture/#comments Thu, 31 Dec 2009 07:47:07 +0000 Beat! http://beatskate.com/blog/?p=125 其他相關文章:
  1. Xerox 全錄 – 重新設計 CI
  2. Recommand Reading: Bob Gill
]]>

Information Architecture as an Extension of Web Design | 把資訊架構學當作是網頁設計的一種延伸

資訊架構師和網頁開發者/ 網頁設計師總是想要互相替對方定義工作上的定位, 他們總是持續的把相互的職責推擠到一個小盒子裡, 舉例來說,很多網頁設計師並不清楚資訊架構在網頁設計裡應扮演的角色. 設計師也常常認為所謂的資訊結構把所有的資訊給分類組織好即可,反之,資訊架構師們也常會低估了網頁設計師在專案裡面所扮演的腳色, 總認為當她們把網站的資訊架構制定了出來之後, 設計師們就裡所當然的可以把前端介面給開發出來.

其中之一的後果即是造成雙方的誤解. 資訊架構師致力於組織, 資訊結構化和制定規格; 網頁設計師則是被引導著讓她們只能一直作她們一向擅長的設計工作而必須將資訊架構這檔事留給資訊架構師. 但是實際上卻不一定總是這樣的.

事實上, 當今網際網路上的資訊架構是不可能一天之前學會的, 也有很多資訊結構的技巧是網頁設計師們可以輕鬆學會而且應用到工作上的.然後把資訊結構當成是網頁設計的一種延伸.

這個觀點上來看能讓設計師佔有很多優勢

  • 它能夠完全消除了 – 『我們與他們』 這一種工作思想上的隔閡, 也打破本來墨守成規的一些想法
  • 它並不僅只是在雙方所扮演的腳色上制定了一條分界線, 而是把各別的工作角色上當成是一種延伸, 相互輔助
  • 這個作法讓網頁設計師們能夠更了解資訊架構是怎麼一回事
  • 讓網頁設計師們能夠輕鬆的扮演資訊架構師的角色

為了要實踐這個想法, 我們必須將三個最基本的網頁開發元素 ( 使用介面, 版面設計, 程式 ), 延伸到資訊架構的範疇

使用介面

嗯…我們先從使用者介面開始, 這一向也是我們最喜愛也最討厭的網頁設計元素之一

當一個單獨的頁面被新增到網站裡面的時候, 設計師們總是無法拒絕一種念頭 – 就是馬上把這個頁面分類到她們認知裡認為理所當然的網站分類裡…但是問題是…Well…你們應該早知道了, 同樣的頁面, 網站瀏覽者卻不一定總是跟設計師們有一樣的觀感, 很多時候使用者們根本不知道他們正在瀏覽的頁面是否就是她們想要的.

在網站製作最初期的階段, 為了開發一個使用者介面結構, 你可以將頁面群組化, 替這些繁瑣的資訊定義類別, 並將它們分類在各個類別裡. 在這個練習之後你也應該邀請一些潛在的使用者 (非專案相關人員或開發者), 作一些卡片的排序 (Card sorting).卡片排序讓我們更深入的去了解其他人對於這些資訊分類以及個別分類命名的認知

相信我, 你往往會得到令你意想不到的有趣答案

關於卡片排序, 只要跟著以下這些簡單的步驟

  • 在各別的紙上寫下所有頁面的名稱
  • 要求這些參加者依照她們的感覺去分類 – 當然, 如果需要的話, 她們也可以自由的建立子目錄
  • 要求這些參加者替這些分類命名

當進行了幾次測驗之後, 一些分類模式將會被整合並明朗化, 這將會幫助你去建立一個最適合的分類方案.

接下來我們要如何定義這些測驗所得到的答案?

當我們從使用者身上得到了最初步的卡片測試答案之後, 我們再將這個網站的整體內容替使用者作個簡單的敘述, 最後再讓一些使用者進行幾次的交叉測試.

最後, 我們將會得到一個資訊結構上稱為 『類別』, 以及 『階層性, 有組織的分類計畫』 的訊息. 日後, 當我們在替網站設計導覽系統 (Navigation) 或是網站結構圖 (SiteMap) 的時候, 將會發現這些資訊相當的實用.

版面設計

接下來, 我們來談一談版面設計吧, 長久以來這都是網站製作相當重要的一個環節, 設計突出, 搶眼, 與眾不同的版面設計這個想法讓網頁設計師們越來越習慣於在 Photoshop 裡直接執行網站的頁面設計. 但是對於那些多語言版本, 含有大量資訊內容且多種網頁使用者需求的網站 (TA), 網頁設計師們就不能只是替網站設計一個版面出來, 相反的設計師們必須先規劃出一個網站的框架 (WireFrame) 出來.

透過簡單的網站框架(往往是 灰階(黑白)的塊狀圖), 先詳細標示出各種階層的頁面資訊以及內容, 像是文字框, 圖片, 選單的位置.

聽起來很像是先用 Photoshop 將頁面給畫出來, 但是其實不然, 這個階段注重的只是資料的結構而不是視覺的設計.

這對於與客戶審核資訊及內容來說, 是非常重要的工具

以下是我們如何製作網站框架圖 (Wireframing)

在使用 Photoshop 設計網站之前, 我們可以先使用一些軟體如 Visio, OmniGraffle, Axure 將網站框架畫出來,你會發現…在決定網站要使用哪些顏色之前, 這些過程讓你對於網站的內容分析有更進一步的了解.

到了這個階段我們已經有了網站的兩大基本元素, 『使用者介面(Navigation)』跟 『網站架構圖(SiteMap)』, 當然,再經過幾次使用者調查以及執行之後, 我們應該也已經決定了網頁的版面設計以及視覺設計

已經大功告成了嗎, 當然還沒, 我們還沒開始建置網頁…..

程式

是的, 我們終於可以開始程式開發的這個階段, 那資訊架構和這個階段又有什麼關係呢?

Well…對於精通於網頁標準化 (Web Standard)的開發者來說, 這裡可就大有關係了. 身為一個精通於網頁標準化的開發者, 你必須要知道如何開發符合 W3C HTML/ XHTML/ CSS 標準的網站, 你當然也必須清楚了解 HTML 語法上的結構, 比如說, h1 是用在內文標題 (Heading)上, P 適用於文章的段落 (Paragraphs)…諸如此類; 我們也了解這些標記語法在資訊架構中的層級, 如何將 HTML, CSS 整合應用到視覺設計上. 其實在我們在開發過程中導入運用到這些相關知識的時候, 我們已經具備資訊架構設計師的思維了.

透過以下這三個符合網頁標準化的開發流程, 可以讓資訊結構以及前端視覺設計的有更高度的整合

  • 網站架構的命名可相容並應用於 CSS.
  • CSS 標籤的命名應該是有意義的名稱而不應該只是數字
  • HTML標籤 (HTML TAG) 的命名依照 『文章內容』 有意義的次序排列, (如 h1, h2, h3….h6, 比如說 h3 標題的重要性應該比 h1 還要低)
  • 最後, 列出網站裡所有的標籤元素, 這樣可以找出不同頁面但是卻共用相同元素標籤之間的關係, 讓我們可以重複使用這些元素.

以上, 當我們要開始網站製作並寫下你第一個 tag 之前, 先利用上面的這些方法去定義網站資訊, 將資訊架構化帶進網站製作開發流程裡. 這樣可以讓整個設計團隊裡有著更好的溝通, 更完善的工作流程.

介於網頁設計/ 網頁前端程式開發,以及資訊架構, 兩者中間的隔閡並不需要總是那麼清楚.每個層級的網頁開發者總是有很多機會可以把資訊架構化的精神帶進每一個專案

實戰經驗: 網頁設計與 IA

由於我的主修是資訊工程, 但一直以來的工作內容卻都是以設計為主, 所以我能夠深刻了解 IA 的重要性, 也能夠體會設計師總是想先從設計的創新, 創意的角度去思考執行網站設計的原因.

而我隸屬於前公司的 UE (User Experience) 部門, 一直以來的目標就是以實踐 IA, UX 為目標, 但是在網站製作上卻又常常跟公司內創意部的設計師想法有衝突, 這篇文章探討的內容雖然很粗淺, 但是我希望能鼓勵設計師在網站執行的初期就先從 IA 更高的角度去定義, 了解分析整個專案的資訊內容之後再去發想整個網站資訊設計(Information Design)的可能性, 進而去 deliver 更好的使用者經驗.

提到網站製作的溝通與工具, 相較於國外嚴謹 IA/ UX 的 process, 從 Card sorting, Taxonomy, Prototyping, User Test, AB Test, Persona…等. 在台灣實在是很難完全實踐於專案當中…(預算, 客戶與各層級專案人員的認知, 等因素…)

最常發生的情況往往是因為預算的考量, 變成只剩下 Define -> Prototyping -> Web Development. 因此, 這時候 prototype 就變成與客戶在專案初期溝通極為重要的工具.

以我最近執行的小型網站來說, 因為我傾向先從 IA 去思考, 所以我會先用 Mind Manager(Mind Mapping 的軟體), 先將網站的資訊, 功能給分類好跟客戶確認, 然後再直接使用 illustrator 將 prototype 跟 Layout 一起執行 (因為 illustrator 在資訊大規模的調整會比 photoshop 方便許多), 客戶第一次看到的 prototype 即是相當擬真的網站 Layout….

延伸閱讀

資訊架構 Wiki
國內 IA 達人 XXC 的知識分享
iA 是一間位於日本的 IA consulting 公司, 信奉著 information design, Blog 相當的值得閱讀!
實踐資訊架構以及網站使用者經驗(Web User Experience)的最佳工具 – Axure | 悠識數位
資訊架構的經典入門書 – O’Reilly 北極熊
北極熊的作者, 被喻為資訊架構之父 Peter Morville 的另一著作 『隨意搜尋 Ambient Findability』
資訊架構專家 Peter Morville 的故事:專業服務人士的七種兵器 (簡體)

其他相關文章:

  1. Xerox 全錄 – 重新設計 CI
  2. Recommand Reading: Bob Gill

]]> http://beatskate.com/blog/information-architecture/feed/ 0