[網站]Nowill Desiign 2016年官網改版

網站網址:http://nowilldesign.com/

第一個Nowill Design官方網站是在某次要去做RWD響應式網站設計相關演講的前一晚,花了兩個小時用bootstrap v2隨便疊一疊就放上去了,在演講的當下拿了這個2小時心血的官網做Demo,我也很坦誠地說這只有花兩個小時而已,雖然現場大家都說不可能2小時做這樣......但這是真的。

很多人會好奇我一個人怎麼可能在兩個小時內完成這樣的網站,其實我也只是邊做邊想,我唯一在做之前就想好的就是只有網站的架構,內容非常簡單:關於我們、服務內容、服務過的客戶、案例以及聯絡我們,簡單就好,至於內容文案都都當下做到哪寫到哪,並沒有什麼特別厲害的文案。

真的要來更新官網,說真的,在那次之後我曾經多次想要重新翻新Nowill Design的網站,但是我常常才開始做完選單或稍微畫完是意圖之後,就開始無限忙碌,導致我根本沒時間完成,所以就在電腦裡累積了很多2015 v1、v2、v3、v4、v5......隨著不同時段產生不同的idea,而且隔一段時間後再回去看就會覺得好像不夠好,於是就重新做了一個新版本,結果就這樣搞了將近一年半,什麼都沒有做完,而且自己還越來越龜毛。

為了可以讓這個2小時灰濛濛的官網可以退休,我決定還是採取一樣的製作模式,我直接使用現在還在alpha的bootstrap v4版本,開始做到哪寫到哪,沒想到意外的順利,也順便提前體驗一下bootstrap v4的版本,在一天內就做了整個網站,但是因為在跨平台過程中有許多破綻需要修正,所以一放又是兩個月,終於到今天才更換上線。

在公司正式開立前,我的javascript功力其實一直停在只會用別人寫好的plugin的狀態,雖然會搭配jquery寫一些很簡單的動態,但是對於javascript一直沒有什麼信心,而且開公司後我也沒什麼時間好好練習,甚至在前端工作都交給了我更放心、更專業的學弟來處理,實踐人就是一整個厲害!也因為大家其實忙到一個翻掉的地步,所以我才自己又再次動手,直接從前端下手,而且這次加上了一些微互動的部分,至於表單的部分也不再是單純的php表單,有加上了ajax技術,雖然非常的簡單,但是透過這次的翻新,我發現自己也在不知不覺中進步了非常多,這還是我根本沒有什麼機會與時間可以練習的狀態下,不知不覺進步的。

對於這次網站比較有趣的,是我們家的形象人物:紅色小惡魔,整個大大升級了!現在他會360度旋轉了啊!!之前都一直只有正面,側面特別版只有在名片上才可以看到,現在在網站上可以看到360度旋轉了喔!因為我太高興了,所以就故意做得很大隻XD 希望以後有機會出一些周邊產品,好好推廣這隻從我大學就一路陪伴著我走過一切點點滴滴的小惡魔!

最後還有一點點廢話,因為匆匆上線,深怕不上線下次有空可能又隔好幾個月,所以網站測試有限,並沒有非常全面的測試,但已經驗來說應該是大部分解析度都可以正常瀏覽,不會有什麼問題,如果有發現有問題的地方再麻煩大家多多幫忙告知一下喔。

[經驗] Nowill Design的作品刊登於Cssawards

Nowill Design 在2013年末最重要的一個作品——Ju Percussion Music School,在昨天登上了Css Awards的網站中,雖然有人會說這沒有什麼了不起,但是對我們來說也是一種肯定,如果對這個專案的過程有興趣,去年有在HPX分享過,現在還留有當時的投影片,詳情請見[經驗]HP52:第一次執行外文網站專案就上手?

其他截圖

https://twitter.com/cssawards/status/518076938188242944

[網站]普德單冰飲水機BD-3200

負責內容:前端互動設計
採用視差滾動(Parallax Scrolling)技術,透過頁面滾動將網頁拆分成多圖層方式,以不同速度移動,隨著滾動的速度不同,頁面內容呈現的速度也會不同,透過這樣的速度差營造出網站不同的視覺感受。本網站也加上Full Screen 全螢幕瀏覽模式,使用HTML5 Full Screen API,可以透過點擊Full Screen文字將網站放大,可關閉全螢幕模式回到一般瀏覽狀態。

網址:http://www.buderwater.com.tw/bd3200/index.html

[設計]FORD ECOSPORT 甜心開團趣網路活動

負責內容:網頁視覺設計

活動網址:http://driveyourfordlife.com.tw/index.aspx


[網站]友宏資訊有限公司

負責內容:文案發想與撰寫、頁面排版規劃

友宏資訊有限公司主要的服務有:影像追蹤監控管理系統、金融資訊諮詢服務、帳務清分/清算系統、電子商務,由編輯採訪公司內部重要人事,釐清個單元內容文案後再由設計師,為每段文案做視覺上的排版。

網址:http://www.fi.com.tw/

 

[設計]華航購物商城網頁視覺設計

負責內容:視覺設計

為華航購物商城設計首頁入口視覺。


[網站]OTOP北台灣深度旅遊

負責內容:視覺設計、前端設計、PHP程式設計

北台灣深度旅遊主要介紹台灣北部地區,各地觀光景點與知名店家,透過網站介紹進而推廣地方觀光產業。

網址:http://heytw.com/

[網站]蘭陽玩學院宜蘭玩樂學習庫

負責內容:視覺設計、前端設計、PHP程式設計

蘭陽玩學院主要內容為宜蘭觀光工廠、體驗農場等休閒娛樂資訊,提供給國小、國中、老師、家長一個去宜蘭親子同樂的好去處。

網址:http://ilanfun.e-land.gov.tw/

[活動]Smart 智富 2013上班族圓夢發聲機

負責內容:主視覺設計、頁面切板

Samrt 智富雜誌舉辦“2013年上班族圓夢發生機!網路大調查活動”。

網址:http://smart.businessweekly.com.tw/event/2013/tcdream/index.php

[網站]EVOQUE MODEL INTERNATIONAL

負責內容:網站切板、PHP程式設計、整體專案執行

EVOQUE MODEL INTERNATIONAL 是一家模特兒經紀公司,專門網羅國外優秀模特兒,類型包含潮男、美女與可愛童星等等。

網址:http://oumei-group.com.tw/