2018年11月11日

Bulma: 基於 Flexbox 製作成的新一代的 CSS 框架

很久沒有發文了,來介紹大家一個 CSS Framework 選擇

Bulma: a modern CSS framework based on Flexbox


Bulma 是一個開放原始碼的 CSS Framework 框架,使用 CSS3 Flexbox 語法製作而成,沒有內建 javascript 組建,是個純粹專注在 CSS 上的框架,輕量、易學、內建多種常見的 UI 和版面結構用的 helper

其實 Bulma 的 Github 顯示在 2016年就已經發佈了,或許是開發初期轉為成熟的時間,也可能因為近幾年前端設計的領域已經發展成有多款 javascript 框架可選擇,所以像 Bulma 這種純 CSS 框架用來搭配 Vue.js 或 React 都可以輕鬆控制 UI 上的互動,目前已經有滿多英文教學,可能是 Bootstrap, Zurb Foundation 之外的另一個製作網站或介面的好選擇

Bulma 官網上有一個跟 Bootstrip 比較表,大家可以參考一下
https://bulma.io/alternative-to-bootstrap/




2018年1月17日

Redux Framework 和 Wordpress 樣板功能

很多 Wordpress 專業樣板裡的 Theme option 客製化樣板功能都是用 Redux Framework 製作的

Redux Framework and the Wordpress Customizer

2016年8月5日

Wordpress 客製化樣板 php 教學

如果想自己做 Wordpress 客製化樣板,那得至少一點點 php,然後參考這份教學影片,自己動作做一個 wordpress theme!(這份教學影片,是我發現教得最好的一份)


2016年6月4日

介面動態設計的幫手 Flinto

Flinto 用在介面的動態設計,Sketch 3 設計好的介面,可以利用 Flinto 的 Sketch plugin 快速轉換軟體到 Flinto 繼續編輯動畫和轉場效果

https://www.flinto.com/



Sketch 3 教學影片


學校不會教的介面設計軟體(目前只有MAC版)
https://www.sketchapp.com/

2016年3月20日

2015年10月25日

QR code 到底要不要放在網站上?

有個朋友提到,客戶就是想放 QR code 在網站主畫面上,這真的很醜............

不想放棄自己對設計的視覺堅持?
這問題到底要怎麼回答客戶?

我也沒有正確答案,一起來討論!

慣例上,在 APP 與網站資料不一樣的廠商,例如 APP 是童書、遊戲等,這類網站是原廠官網的公司,在網站上先說明 APP 有哪些功能會是最重要的事情,不管 App store 是否已經說過一次了,畢竟使用者的入口是網站,如果說完了再給他 Download link 或 QR code 才會比較合理,不過這類網站也不太常見到放 QR code

如果客戶硬要放在首頁也是要看放的位置的,有些放法真的醜得像一塊酸痛貼布,這時候可以考慮語法上的變化,使用大螢幕的前提下才顯示 QR code,如果到訪者本身已經在 tablet & mobile 的小螢幕環境, 就顯示 APP Store 的 icon 就好了,這樣可以合理化使用過程,也可以做到避一部分的“醜”

功能型 APP
https://www.any.do/

遊戲
http://www.popcap.com/plants-vs-zombies-2

iPad 書
http://morrislessmore.com/?p=app

另外一種情況是 APP 與網站內容其實是一樣的,像是 youtube, facebook,他們介紹 APP 的頁面也都沒放 QR code,他們的做法是,如果使用手機或平板瀏覽器開啟這兩個網站的時候,會跳出一段訊息告知使用者,『用 APP 開啟這個網站能得到最佳的使用經驗』,然後要你選擇繼續瀏覽還是使用 APP 開啟,其實這樣也就達到原始想放 QR code 的目的了

網站
https://www.facebook.com/mobile/
https://www.google.com/drive/download/
https://www.etsy.com/mobile/

當然也可以美化 QR code,這麼多選擇,相信客戶也會斟酌的







2015年5月27日

2015年3月18日

邊玩邊學語言 Ba Ba Dum 網站

Ba Ba Dum

學語言?來玩玩這個網站!

Reload 的話首頁圖案、顏色會變喔 :D

https://babadum.com/



Flash 輸出 SVG 動畫

用語法寫動畫就真是瘋了,但是Flash CC 可以輸出SVG靜態圖,卻無法輸出成動畫,這邊有個小工具,幫忙Flash 輸出成 『SVG動畫』,不過作者自己都說,不是所有動畫方式都支援的,所以各位可能要自己試試看囉!

2015年3月15日

解決 Wordpress Permalink 404

在 Wordpress 的 Archive 頁面上點文章名稱,應該要可以進入單篇文章的頁面,有時候這邊會失聯,所以系統傳回一個 404 頁面

找了一堆網路文章試圖解決這個問題,大多數人說要修改 .htaccess 這個檔案..........當然還有一堆亂七八糟的方式

其實還有另一個解答.......

我想,起因是目前使用的主機不接受中文網址,因此會需要刻意把文章或頁面的網址改為英文,改著改著就會出現不小心“一樣網址”了,今天發現失聯的現象之後,也發現了網址一樣的這個原因,恰巧衝突的其中一篇文章不再需要它了,就直接刪除了,之後......怎麼也都還是無法連到???

找了一下午資料,試圖修復,結果只是........天!我忘了wordpress 有回收桶啊,刪掉的文章還在回收桶,DB資料自然就還沒有刪除,所以等於還是有兩篇一樣網址的文章,去回收桶把文章確實刪除就恢復正常了,吼~~~!!!