Category: Blog

國內外政府網站設計大比拼

作為許多人民接觸政府的第一線媒介,政府網站的重要性不言而喻,政府網站要提供哪些資訊,滿足哪些設計原則呢?讓我們帶你一起探討國內外政府網站的設計差異吧! Raindrop.io是一款與社群結合的雲端書籤,除了基本的新增書籤功能之外,還能將書籤同步備份到雲端上,也提供瀏覽器擴充功能和App應用,可以在不同的載具和瀏覽器上隨時取用。此外,Raindrop還可以幫助使用者簡單地分類書籤,將新增後的網址文章、照片、影片等不同型態內容,進行基本的篩選,並自行加入摘要或心得。 雖然目前同步書籤的功能已有十分廣泛的應用,但Raindrop.io還結合了社群的書籤服務,以類似個人頻道的功能,幫助你建立自己的特色書籤,只要簡單地利用社群網站帳號登入,如Twitter、Facebook、Google等,就能夠輕鬆使用,而且網站整體的介面設計也十分簡潔明確,很好上手。 使用者需求出發-英國政府網站GOV.UK 這個看似簡單的英國政府網站GOV.UK被倫敦設計博物館(Design Museum)評選為2013年的年度設計(註二),沒有美麗的圖形介面,是一個完全以白底黑字、藍色文字連結,加上簡單搜尋列組成的網站,然而這是在考量網站使用者需求之後設計出來的。 通常一般人造訪政府網站並不是為了追求美麗的設計或娛樂體驗,而是為了快速查詢和獲取資訊,因此該網站將導覽列省略,取而代之的是大型的搜尋列及多個資訊索引分類的連結,雖然因此犧牲了美感,但相對地能讓使用者更專注於資料搜尋上,快速找到各種類型的所需資訊。 除此之外,政府網站的使用者有許多是科技運用能力較不足的中老年人,將網站進行一致性的簡化設計後,不僅能夠滿足各年齡層的使用需求,網頁載入速度也隨之加快,要獲取資訊就更便利了。 台灣政府網站-我的E政府 與上述GOV.UK比較,台灣的政府入口網站「我的E政府」,的服務導覽功能,依舊納入Flash動畫設計,使用者若透過舊型的上網載具、或是在戶外網路速度較不穩的移動設備上進行瀏覽時,容易因為無法顯示或延遲,造成不良的使用體驗。 此外,導覽列分類項的區隔也有點讓人摸不著頭緒,如「便利服務」和「分眾服務」兩個項目,容易造成選擇時的混淆;網站中也沒有將常見的需求和服務列在上方,加強任務的簡易性,而是要自行連結到下層單位或機關找尋,對部分使用者而言,可能難以維持耐心,進行這樣麻煩的瀏覽搜尋,也許進行不到一半就悻悻然離開了,這樣的設計顯然還有很大的進步空間。 比較   我的E政府 GOV.UK 基本設計 頁面以多個區塊組成,服務導覽加入Flash動畫 白底黑字為頁面基礎,多以文字連結取代圖形介面 導覽列 有,但選單項目可能混淆…

PAYPAL由知名設計師操刀 – LOGO換新裝

作為一個線上支付的領頭者,這次的改版又意味著什麼樣的改變?由Béhar的設計團隊(註一)所規劃的PayPal branding redesign計劃,他們認為PayPal 舊的logo的設計是意味著當初人們進入所謂線上支付世界的啟程,而如今PayPal需要的不光只是帳面上交易的數字,除了持續提升人們對PayPal的信賴感,他們而是需要更多創新的可能。 也因此,團隊希望PayPal的形象能夠添加彈性、年輕化的特色,並且往行動支付的領域邁進,所以新的visual identity 採用了知名的Futura(註二)作為typeface,字距更為緊湊(象徵行動支付更為緊密快速的連結),色彩更為明亮(更為年輕),跳脫出一般金融業較為沈重的氛圍。 而最明顯的改變就是兩個P重疊的圖像,取代了原本邊框以及上下區隔的樣式,讓P與P更緊密地重疊,其透明度的設計,同時象徵著PayPal透過交易將人與人之間串聯起來。 一個好的品牌識別,也能夠帶動企業內部的提升與創新,以及外部市場的認同與印象,這也是為什麼不同產業的不同品牌的logo / VIS每過一陣子3年5年10年,都會歷經或大或小的branding innovation革新工程,目的就在於更契合當時的企業文化與社會情境脈絡,並且有目的性的去追求組織的目標。     CIS企業識別設計系統,通常從MI(mind identity)發展,定調出理念與精神,然後再延伸到視覺VI(visual identity)的設計。   Sketch 草圖的繪製是一切的起源,從造型到樣式到顏色都在紙上不斷地進行討論。…

大連賽高反思-傳達溫度的手繪網站

近日被喻為神作的”大連賽高科技”純手繪網站激起網友們熱情的討論, 『老闆不想花1K塊錢設計網站,但是還催他的下屬明天必須上線,於是神作誕生了。』 不管真是無預算的惡搞,抑或是行銷操作的試驗…… 能夠激起如此廣泛的討論的同時, 也反映出網頁設計趨勢從web2.0的立體漸層,到目前的Flat扁平化設計,都著重在數位介面的設計, 我們近期常見的設計趨勢不外乎:Responsive / Retina support /Fixed Header bar / Parallex / Sliding 等等, 幾乎都是技術性的用語,因為大家過於習慣將網路視為機械性的操作,而逐漸忽略了透過手繪才能傳達的溫度感。 這種感覺,就好像能夠飛快敲打鍵盤,卻無法提筆書寫,能夠精準用滑鼠描繪,卻忘了怎麼用色盤調色。 身為網頁設計師的你,有多久是除了畫wireframe的sketch之外,就沒再畫畫了呢?…

飛爾酥創意設計 – 實習生招募中!

Love Design, and the world! 飛爾酥創意設計自2008年創立,至今已走過第六個年頭,網站所藴涵豐富的設計資訊,以及設計資源已成為設計師們不可或缺的好夥伴,平台經營至今,持續以提供豐富設計內容為主,而其內容產製則走向精緻化與專業化。 如果你曾是飛爾酥的閱聽眾一員,如果你對飛爾酥的網站經營感到好奇並想參與其中,如果你對網站企劃與架站設計充滿熱誠並略懂略懂, 如果你只是想認識飛爾酥(誤),歡迎你參與這次的實習,我們將會有非常多交流的機會!   申請需求 必備能力:需具備一項以上 平面設計(向量圖繪製能力) – Logo Design / Icon Design 平面設計(影像處理能力) – Photo-Manipulation…

歐北來就想賴著你{全創作}-設計師專訪

「如果世界末日,台灣一定不會消失,因為這裡是一個用愛組成的島嶼」 憑著愛台灣的心,就想賴着你這系列作品想法開始蔓延出來,希望浸入到臺灣各地方,看到更多屬於我們的寶島故事。 歐北來就想賴着你系列-勇敢練習筆記本 勇敢是需要練習的 而那些練習,也許不過是習以為常的小事情。 設計介紹 低調又不單調。歐北來特有商標設計,用印壓的方式將歐北來獨特味道直接顯在封面上。 內封底,有旅行者遇到問題可以沿著範例教學,慢慢操練筆記本,開始記錄自己的回憶,而裡面還有不同主題。 貼心的使用說明,讓你快速上手記錄臺灣 為了讓筆記本更不一樣的,書背加上布的材質來襯托筆記本的質感 Q:挑選用材方面有特別的考量嗎? A:這本的目的是希望大家可以帶著筆記隨處走,所以材質上,得挑選耐用,所以利用厚紙板做加工。 內頁介紹 Q:稍微介紹內頁不同的設計嗎? A:我們內頁有分兩個主題-人物誌,紙面上有小小的人可以繪畫你遇到的人,在地特搜誌,可以把沿路所看到的照片,搭過的車票,一一收錄在紙夾層裡,如果要寄給朋友,夾層底部可以沾水黏合成信封形式,省下額外的步驟,不需要在特別花費什麼也能把祝福送給對方。 人物誌頁面,紙底人物描線,輔助還不擅長繪畫的朋友們 這是前期勇敢練習本的初版作品 夾層設計可方便蒐集唷   Q:對這本書的期待?…

線框圖、原型、視覺稿有何不同呢?

你瞭解線框圖、原型以及視覺稿它們之間有何不同嗎?在Marcin Treder的文章裡頭,詳細的說明了其不同點何在。 來,讓我們繼續看下去。 本文翻譯自:Wireframing, Prototyping, Mockuping – What’s the Difference?   我很高興,歡迎你們來到第一堂線上課程【線框圖及創意設計】。我希望你們覺得學到的東西是有用且有趣的。這些內容將使你之後的工作容易許多。 我是Marcin Treder,目前擔任UXPin(一個用戶經驗設計應用的網站)的CEO。而且我也是一個經驗豐富的用戶經驗體驗設計的團隊經理。 在這一系列,共七篇的文章當中,我會討論在大部分創意設計文檔當中,線框圖方法的細節。我會告訴你,在我的實務經驗當中,一些能夠幫助我的提示與技巧。我衷心的希望你能避免掉一些麻煩的錯誤。 文章的內容非常實用,希望只是一點點的設計理念以及很多來自現實生活的故事。 所有設計專案案的例子,都在UXPin建置,首次的用戶體驗設計應用程序。 可以註冊免費的UXPin(14天試用期),動手一起跟我做吧! 線框圖、原型、視覺稿 ,它們之間有何不同呢?…

賞‧教育類LOGO鑒賞 (下)

跟現代風的Logo比起來,插畫風的Logo通常看起來都較為繽紛、形象明確,而且通常會採用一個特定的物品去象徵其機構。 以教育類型的Logo來說,常採用書本、鉛筆、樹、貓頭鷹等,各式各樣象徵教育、智慧的物件來做為代表。 之前,筆者先介紹完了現代風的教育類Logo。現在,來介紹插畫類的Logo。每個學校或教育機構的Logo都有其獨特性,它傳達了其想要遞的訊息給大眾,也建立其識別度。通常Logo在顏色及文字上的選擇都有其講究的地方。像是小學Logo的顏色跟大學的比起來都會較為繽紛,大學Logo的配色,整體上來說都較為沉穩。 一個好的Logo設計能讓大家,一看到這個Logo就能聯想到你。以下介紹了一些筆者覺得有趣的Logo。   賞‧教育類Logo鑒賞 (上)   1.The Bridge School 2.Parkside Elementary School 3.Bracken Hill Primary School 4.Boston Valley…

賞‧教育類LOGO鑒賞 (上)

Logo是認識一個機構的重要指標,而學校及教育機構的Logo更代表了其歷史、文化以及傳統。它代表著學校所堅持的核心價值。 常見的Logo類型,筆者將它分成兩大類。一種是現代風,一種是插畫風。現代風的Logo通常採用較簡單的元素去拼湊,以其形狀及顏色去象徵機構的意義。而插畫風的Logo表現方式通常都較為繽紛、形象明確。 今天,筆者在此先介紹現代風的教育類Logo。 1.Twydall Primary School 2.C3 Youth Middle School 3.Western Alamance Middle School 4.Benjamin Britten High School 5.Detroit Cristo…

賞‧2012倫敦奧運設計

以往對於奧運之類的體育賽事較不熱衷的我,這次被倫敦奧運整體的識別系統設計吸引了目光,於是在這邊跟大家分享一下! 這次的倫敦奧運logo由著名的設計公司奧林斯(wolff olins) 設計,惹了許多的爭議,相關的爭議詳情可以看廣告小妹寫的” 受爭議的2012年倫敦奧運會LOGO”。 鮮明的配色及不規則的切線設計,充滿年輕活潑的意象。由麥肯國際集團來監督整體的視覺識別設計,無論從建築、文宣、大型看板……等等,都呈現的非常有一致性! 由alias設計2012奧運的標準字體,廣泛用於大型看板上的字體,或是跑道上的數字,承襲著logo不規則與切線的特性。 奧運大型看板 跑道起跑點 由someone設計的各項運動icon標示,裡面的象形人也是延伸logo的特色! 再來看看奧運的文宣,是由futurebrand設計。 導覽手冊   Showreel 2012 from viaframe on Vimeo. 奧運門票 奧運平面廣告看板 若是運動場要如何結合整體的設計風格呢?答案是Logo的不規則切線也能被巧妙運用在運動場的座位設計上,真的別具特色與巧思! 運動場的會場佈置也是採用相似的圖形來當背景。 連公車站牌都為這次奧運做了變身唷! 奧運獎章的設計,正面可以看得出此次奧運的Logo,背面則是希臘的勝利女神像。 Tags: London…

賞‧30種創意名片激賞

無論你在任何的領域工作,遞出你的第一張名片,能夠讓別人對你工作的領域有初步的了解。而要在一堆規矩矩的名片之中脫穎而出,一張有趣、有創意的名片才能夠吸引到大眾的目光。 而一張創意的名片,可以從他的文字或是圖像去凸顯自己的個人特色,也可以從材質、外型來加強別人對名片的印象。以下,筆者介紹三十種有趣的名片設計。 1.這個專辦離婚的律師,將名片分成兩半。避免掉了一些尷尬,也節省了紙張。 2.小心蛀牙! 3.透過光影,別有一番趣味。 4.這一看就知道跟鋼琴有關的工作了。 5.好像真的肉片一樣。 6.好「立體」的一張名片啊! 7.除了視覺,觸覺也是很重要的。 8.這一看就明瞭了。 9.這可不是普通的一張「紙」。 10.好「透明」的名片。 11.結合Google的有趣設計。 12.看起來就像真的有一杯咖啡呢! 13.要透光才能發現其中的奧妙。 14.看起來這「份」名片的資訊量還滿大的。 15.像是衣服的吊牌一樣。 16.拿到名片後,讓人撕開,才能看見裡面有什麼東西喔! 17.跳脫紙張的框架。 18.這是一位胸腔科醫師的名片。可以順便看看你的肺活量有多大。…