發表文章

目前顯示的是有「前端設計」標籤的文章

TypeWonder 幫網站換個字型看看吧!輸入網址快速預覽指定字體

圖片
有時候想幫網站換個字體,測試某個字型在網站上所呈現出來的效果嗎?除了我們上次介紹過的「 Tiff 設計工具 」可以比較字體系為的差異,TypeWonder 也是一個不錯的選擇,無須額外下載任何軟體,只要在網站上輸入要測試的網址,接著選取字型,TypeWonder 就會自動把該字型套用到網頁裡,讓你直接瀏覽整體效果!

趕快一起用 Represent 製作精美的個人線上名片吧!

圖片
一般想到線上名片都會想到 About.me 吧? 今天要介紹的這個 Represent 提供一個免費、簡易的線上簡歷服務,強調簡單的設定功能、令人驚嘆的外觀設計,還有協助你找到更好就業機會,雖然不是每個人都一定有你個人網頁,但如果有個線上頁面,無論在介紹或行銷自己時都有加分的效果吧!

為母親做好用戶界面,你需要知道的 6 個重點(Designing user interfaces for your mother – 6 key takeaways)

圖片
本文作者  Tony Gines ,以創意總監身份就職於 iFixit ,一個刊登電子產品維修拆解指南的網站。 Editors note: This is a guest by Tony Gines , Director of UX/UI at iFixit, user interface designer, team leader, husband, dad, and martini consumer. 母親這一輩的人,她們經常在網絡上笨拙地摸索,各種註冊論壇、隱藏手勢和令人混淆的界面時常讓她們不知該怎麼辦,雖然她們很想搞清楚。作為設計者和開發者,把網頁做得好看並不夠,我們有義務為母親這一輩的用戶考慮,儘量改善她們的使用體驗。所以,每次我在設計網頁或者用戶界面的時候,總是會因為想起母親而注重幾個方面:

[Chrome] 讓開發者工具直接幫你把圖片轉成 Data URI 格式!

圖片
在說明怎麼做之前讓我們先來了解一下什麼是 Data URI( Data URI schema )? Data URI schema  是新一代瀏覽器支援的檔案資料表現格式,允許在網頁裡以字串形式直接內嵌圖檔(這個在 本站介紹 以及右邊的FB圖示有用到)、CSS檔案、動態生成文檔(這個其實在 這篇 有用過)...

[譯文] 想要提高網頁轉換率?試試這 16 個 UI 祕訣!(中英對照版)

圖片
A Good User Interface has high conversion rates and is easy to use . In other words, it's nice to both the business side as well as the people using it. Here is a running list of practical ideas to try out. All is read. Sign up for updates. 優異的使用者介面(user interface,UI)讓使用者用得順心,從而提高轉換率(conversion rate),換言之,好的 UI 在使用與銷售層面上形成雙贏。UI 設計師 Jakub Linowski 列出 16 點改善 UI 的訣竅,而這份清單仍在繼續累積,有興趣的讀者可以 訂閱他的電子報 ,隨時獲得最新的 UI 祕訣。

Tiff 設計工具讓你迅速對比不同字體差異,做出最理想的選擇!

圖片
字體常常是設計中重要的一環,舒適好看的字體可以增加閱讀的使用者更佳的體驗。但對於一個未經訓練的普通人來講,區分很多相似字體總是顯得很困難。以中文字體來舉例,一般人無法區分「新細明體」跟「細明體」到底有那裡不一樣。現在,有一個簡單好用的網站 Tiff,能讓你快速且直觀地比較和對比任意字體的任何差異。

JPEGmini 地面最強影像壓縮演算法?現在推出 PC 版了!

圖片
JPEGmini 是一款使用自動分析一張照片在對畫質不產生可見損失前提下可用的最大壓縮率演算法的圖像壓縮軟體,能夠幫你在儘可能不失真的情況下減少 JPG 圖檔大小,不需登入即可使用,註冊登入後,則可以讓用戶上傳一整本相簿裡的多張圖片,而且免費...

前端設計的好幫手,Web Responsive Design Tool 模擬各行動裝置解析度的顯示畫面

圖片
記得我們在這禮拜才介紹過的「 [Chrome] 修改 Device metrics 變成各種大小的畫面,讓你模擬 Android、iPhone 等螢幕尺寸! 」嗎? 隨著智慧型裝置愈來愈普及,網頁己不再只限於電腦中瀏覽,而要讓網頁能符合各行動裝置的螢幕上來顯示,所以要不專門為行動裝置設計 Mobile 版,就是要考慮 RWD 的問題...

[Chrome] 修改 Device metrics 變成各種大小的畫面,讓你模擬 Android、iPhone 等螢幕尺寸!

圖片
其實我們在之前那篇  [Chrome] 修改 User Agent 偽裝不同的瀏覽器,讓你模擬 Android、iPhone 等等!  就有介紹在 Chrome  的「開發人員工具」裡面的 Overrides(重定義)功能,不過上次只介紹了偽裝瀏覽器的功能而已,今天就把剩下的幾個功能簡單介紹一下吧!

想讓您的網頁放屁嗎?試試這個吧 fartscroll.js 讓您屁聲不止XD

完全不知道誰那麼無聊寫了這個 js 拉wwww 官方: http://theonion.github.io/fartscroll.js/

本月最夯

偷用電腦,怎知?事件檢視器全記錄!(開機時間、啟動項時間...)