Transitional Interfaces — Design/UX Designers love to sweat the details. Much time is spent pixel-fucking buttons, form styles, setting type, & getting those icons as sharp as a tack. A+, great job, don't stop you guys. ...but there's little consideration about how it all fits together outside of a static comp. Oh, ok sweet. How? Folks keep throwing around the word “delight” when referring to animation and cute interactions. Animation leverages an overlooked dimension — time! Let's take a look at some simple ideas: In traditional animation, a breakdown determines how a mass moves from Point A to Point B.
An Education Technology Company | Austin, TX | 26 Gems Jonathan T. Neal | Understand the Favicon When Alec Rust asked the HTML5 Boilerplate project to switch to a HiDPI favicon, I realized how little I knew about favorite icons, touch icons, and tile icons. When I decided to dive in a little deeper, things got interesting. The classic favicon.ico is a 16×16 ICO file, often served in either 16-color or 24bit alpha-transparency format. More recently, favicons have been served as 32×32, which is appropriately scaled down in all major and popular-legacy browsers. The rel attribute of a favicon is a product of evolution. The type attribute of a favicon is about as useful as the type attribute of a <script>. Good news, everyone! Bad news, everyone! This really depresses me, because Chrome, Firefox, Opera 7+, and Safari 4+ all accept the PNG favicon, but Chrome and Safari will opt to use the ICO favicon when both are presented, regardless of the order in which they are declared. How do these PNG-favicon-compatible browsers determine which favicon should be used? One. You. Related Articles
Prime free font Fontfabric type foundry presents Prime free font – unique sans serif techy fonts! Prime is a simple typeface with a techy feel and a strict, geometric origin. I wanted to create something that offers great readability in various sizes yet still offers enough subtle differences to stand out. Basic and somewhat neutral, it can be used in a variety of ways from distinct titles to body text. – Max Pirsky Designed by Max Pirsky | Portfolio link Downloadfree fonts This post is tagged App UI 設計超詳解！該怎麼設計行動商務 App 才不會惹火消費者？ | TechOrange《 商業、設計、軟體服務 | 行動商務市場潛力無限 俗話說：「一機在手，希望無窮」，擁有一支智慧型手機或平版，就像擁有行動辦公室一般，不論身在何處都能快速處理工作。 而且別說是行動辦公室，在上面簡直就是一個小型生活圈：聊天、看電影、購物等等日常事物都能快速滿足，拿著智慧型手機或平版，彷彿讓你走遍天下暢行無阻。 智慧型手機和平版這麼夯，這也難怪許多電子商務網站都想砸錢投資，行動商務儼然已成為龐大的潛在市場，根據 eMarketer 統計，其在 2012 的全球成長率是 86%，且達到 250 億美元的市場（計畫能在 2016 年達到 860 億）。 行動商務是一個全新的平台，在某個程度上行動商務可說是個毫無邊界的領域。 Christian Holst 的研究團隊測試了 18 個行動商務網站：1-800-Flowers、Amazoz、Avis、Best Buy、Buy.com、Coastal.com、Enterprise.com、Fandango、Foot Lockers、FTD、GAP、H&M、Macy’s、REI、Southwest Airlines、Toys “R”Us、United Airlines、Walmart。 但儘管測試了目前為止最大型的行動網站，但在測試的過程中仍發現有許多有待改進之處。 （以下文字以 Christian Holst 的研究團隊第一人稱撰寫） 讓主頁面一目瞭然 問題： 當你進入主頁面，映入眼簾的是五分八門的圖像或過於簡單的頁面設計時，你還會有意願繼續瀏覽嗎？ 如果使用者無法第一時間從主頁面上得到整體概念時，很容易降低使用者對網站的信任感，甚至無法順利買到所想要的商品。 根據測試，70% 的受測者第一次登入主頁面或產品目錄頁時，儘管已知道要從何找到特定產品，仍會先大略瀏覽感興趣的區塊，或者在找到想要的產品後，瀏覽一至兩個其他種類的產品，以便下單前先看看其他選擇，或者藉此來提升對網站的好感。 （上圖，受測者即便已在目錄區找到男裝選項，仍會先大略瀏覽整個網路頁面） 由此可見，第一印象非常重要，能否讓手機用戶第一眼就能在介面上找到他們想要的，即是決定成敗的關鍵，若覺得這樣說不夠具體，那從以下反面的例子來看能讓你有更清楚的概念： 過多視覺元素 避免在主頁放置過多且需要極大專注力的圖像元素，盯著頁面看久都會感到眼花撩亂。 （多數受測者看到 Macy’s 網路頁面，明顯都露出受不了的神情。） 密切注意動畫跑馬燈
Moving Things Design Company favico.js - Make a use of your favicon Badges Animate your favicon with animated badges. You can customize type of animation, position, background color and text color. Slide animation Fade animation Pop animation Pop & fade animation Without animation Position Shape setting Custom font support Color settings Images / Video / Webcam Create icon on the go from images, videos or even a webcam stream Regular image to icon var favicon=new Favico(); var image=document.getElementById('imageId'); favicon.image(image); HTML5 Video to icon var favicon=new Favico(); var video=document.getElementById('videoId'); favicon.video(video); //stop favicon.video('stop'); Webcam video to icon This is only for fun but it works :) Works on Chrome, Firefox and Opera var favicon=new Favico(); favicon.webcam(); //stop favicon.webcam('stop'); Badge options Bower bower install favico.js Check out also Tinycon, Notify Better or favicon.js. Roadmap More options (Badge position, animations,...) License All code is open source and dual licensed under GPL and MIT.
The League of Moveable Type