CTK pro

關於 CTK PRO:於2011年夏天展開了偉大的航程,初期以開發手機APP為主,2013年開始跨入Web開發,2015年開始用UCD(User-Centered Design)方法協助客戶釐清需求, 2016年大量採用AWS架構, 並導入策略UX產品為客戶在軟體開發各環節破關!

back to top
web-design-process-and-schedule-sche

1 個月可以完成網站嗎?網頁設計流程圖,教你網頁設計時程怎麼抓

[vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column][vc_single_image image="20274" img_size="large" alignment="center"][vc_empty_space][/vc_column][/vc_row][vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column css=".vc_custom_1533708507132{padding-right: 10% !important;}"][vc_column_text css=".vc_custom_1577780819255{padding-right: 10% !important;}"]網頁設計可以是一項小工程,也可以是企業大事記,耗費眾人之力齊心協力完成,但完全取決於「網站」的目的為何而定。 從「網站規劃」的前置作業,到「視覺/網頁設計」、「功能/程式開發」、「驗收」、「網站維護」是一段有趣的旅程,不管你是網站建置/改版的負責人,還是企業主,先搞清楚網頁設計流程,後續規劃、架構、提供網頁資料時,事半功倍! 下面這張圖是 CTK Pro 在提供網頁設計服務時大致的流程,如果說哪個步驟最重要,不管你想要的設計有多精緻、功能有多複雜,回到根本的核心,其實要看這個網站存在的「目的」為何,網頁設計公司才能就業主的需求提供專業的建議。《網頁設計流程,你可能忽略的是...

WordCamp Taipei 2019 心得-Marketing 這麼說 9

WordCamp Taipei 2019 心得-Marketing 這麼說

[vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column][vc_single_image image="20385" img_size="large" alignment="center"][vc_empty_space][/vc_column][/vc_row][vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column css=".vc_custom_1533708507132{padding-right: 10% !important;}"][vc_column_text css=".vc_custom_1578015517773{padding-right: 10% !important;}"]分享 CTK Pro 夥伴們參加 WordCamp Taipei 2019 的心得: 連續兩年參與到 WordCamp 在台灣的年度盛事,特別能感受到這一兩年來,WordPress 社群的蓬勃發展,從兩百多個參加者擠在 2018 年的小場地帶來的"熱情",到今年四百多位參與者在台大集思會議中心,為了各自喜歡的議題,像充滿熱忱大學生跑堂的氛圍,這股活力,讓人感受到 WordPress 帶來無限的可能性。 從 WordCamp Taipei 公布的官方數字,可以發現許多與會者的身分是共通重疊的,平均每個人擁有 1.8 個身分,最多的雖還是開發者(Developer,32.2%),但使用者(Blogger,31.1%)、行銷人員(Marketing,25.4%)、設計師(Designer,24.7%)的人數也不遑多讓,其實表示了 WordPress 對於使用者來說,入門門檻是相對低的,另一個角度來看,使用 WordPress 作為網頁後台的人來說,多少會關注社群,且對於 WordPress 本身也好,程式外掛開發/使用、資訊安全、SEO,到專案管理,都有長足的關心,也反應在每次 WordCamp 多元的講題上。 這兩三年來 Martech 一詞的興起,或許也能和 WordPress 扯上關係。中小型的電商網站、內容為主的形象網站(或者企業網站需要導入流量集客),都可以透多多樣的 WordPress Plugins, WooCommerce來達成簡易的 CRM 或是客戶分析。 WordPress 社群提供的各種助力(沒錯,CTK Pro 講師 Alfred 在台上說:曾經要求員工回覆 WordPress 正體中文裡的問題,但太難達成了,因為一有問題,馬上就會被搶達走。),已經將這個平台的工具都備齊了,端看各位行銷人才如何應用! -Marketing...

WordCamp Taipei 2019 心得-Developer 這麼說 10

WordCamp Taipei 2019 心得-Developer 這麼說

[vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column][vc_single_image image="20385" img_size="large" alignment="center"][vc_empty_space][/vc_column][/vc_row][vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column css=".vc_custom_1533708507132{padding-right: 10% !important;}"][vc_column_text css=".vc_custom_1577955035178{padding-right: 10% !important;}"]分享 CTK Pro 夥伴們參加 WordCamp Taipei 2019 的心得: 這次 WordCamp 場地安排很不錯,整體動線流暢,即便現場有幾百位與會人士也都方便移動。會場場地也標示明確,讓人清楚各議程舉辦的地點和時間。 議程的安排也不會偏重某一領域,舉凡開發工具介紹、專案管理、優化網站到資安都有,不管是程式開發、設計或者是使用者,絕對可以挑到自己喜歡的領域。 中午的閃電講其實最讓我印象最深刻,五分鐘的限制下,發言者必須丟出自身喜愛的議題與大家分享,讓平常可能專注於少數領域的我們,開始思考使用 WordPress 或是網站 Coding 的各種可能。 是享受美味的便當之於,輕鬆地了解 WordPress 各層面應用是一深刻體驗。 -Developer Wayne [/vc_column_text][vc_empty_space height="26px"][vc_single_image image="20632" img_size="large" add_caption="yes" css=".vc_custom_1577955187067{padding-top: 20px !important;padding-bottom: 20px !important;}"][vc_empty_space height="26px"][vc_column_text][gs-fb-comments][/vc_column_text][/vc_column][/vc_row][vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column width="1/2"][vc_empty_space height="26px"][vc_facebook type="button_count" css_animation="none"][vc_empty_space height="26px"][/vc_column][vc_column width="1/2"][vc_empty_space height="26px"][eltd_social_share type="list" icon_type="circle"][vc_empty_space height="26px"][/vc_column][/vc_row][vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column][vc_raw_html]JTNDbGluayUyMHJlbCUzRCUyMnN0eWxlc2hlZXQlMjIlMjBocmVmJTNEJTIyaHR0cHMlM0ElMkYlMkZjZG4tc3RhdGljLTEubWVkaXVtLmNvbSUyRl8lMkZmcCUyRmNzcyUyRm1haW4tYmFzZS5kVG43a01LXzZ5WlpNR0N4Qk5md1p3LmNzcyUyMiUzRSUwQSUzQ3N0eWxlJTNFdWwucG9zdExpc3QlM0VsaSUzQWJlZm9yZSU3QnBhZGRpbmctdG9wJTNBNHB4JTNCcGFkZGluZy1yaWdodCUzQTE1cHglM0Jjb250ZW50JTNBJTI3JTIwLSUyMCUyNyU3RCUzQyUyRnN0eWxlJTNF[/vc_raw_html][eltd_blog_list type="gallery" number_of_columns="2" order_by="title"...

WordCamp Taipei 2019 心得-Project Manager 這麼說 11

WordCamp Taipei 2019 心得-Project Manager 這麼說

[vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column][vc_single_image image="20385" img_size="large" alignment="center"][vc_empty_space][/vc_column][/vc_row][vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column css=".vc_custom_1533708507132{padding-right: 10% !important;}"][vc_column_text css=".vc_custom_1577777969869{padding-right: 10% !important;}"]分享 CTK Pro 夥伴們參加 WordCamp Taipei 2019 的心得: 在《WordPress 基本安全性檢測與防範方式》這場分享,講者整理了常見的資安問題,以及對應的處理方式、易取得的服務方案。 內容並未涉及過於複雜的技術,但已足以涵蓋大部分使用上會碰到的問題,算是相當不錯的基礎資訊分享,也適合作為簡易網站安全性檢測時的參考。 -PM Isaac [/vc_column_text][vc_empty_space height="26px"][vc_single_image image="20611" img_size="large" add_caption="yes" css=".vc_custom_1577778453505{padding-top: 20px !important;padding-bottom: 20px !important;}"][vc_empty_space height="26px"][vc_column_text][gs-fb-comments][/vc_column_text][/vc_column][/vc_row][vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column width="1/2"][vc_empty_space height="26px"][vc_facebook type="button_count" css_animation="none"][vc_empty_space height="26px"][/vc_column][vc_column width="1/2"][vc_empty_space height="26px"][eltd_social_share type="list" icon_type="circle"][vc_empty_space height="26px"][/vc_column][/vc_row][vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column][vc_raw_html]JTNDbGluayUyMHJlbCUzRCUyMnN0eWxlc2hlZXQlMjIlMjBocmVmJTNEJTIyaHR0cHMlM0ElMkYlMkZjZG4tc3RhdGljLTEubWVkaXVtLmNvbSUyRl8lMkZmcCUyRmNzcyUyRm1haW4tYmFzZS5kVG43a01LXzZ5WlpNR0N4Qk5md1p3LmNzcyUyMiUzRSUwQSUzQ3N0eWxlJTNFdWwucG9zdExpc3QlM0VsaSUzQWJlZm9yZSU3QnBhZGRpbmctdG9wJTNBNHB4JTNCcGFkZGluZy1yaWdodCUzQTE1cHglM0Jjb250ZW50JTNBJTI3JTIwLSUyMCUyNyU3RCUzQyUyRnN0eWxlJTNF[/vc_raw_html][eltd_blog_list type="gallery" number_of_columns="2" order_by="title" order="ASC" title_text_transform="Lowercase" number_of_posts="2" text_length="16"][vc_raw_html]JTNDc2NyaXB0JTIwdHlwZSUzRCUyMnRleHQlMkZqYXZhc2NyaXB0JTIyJTIwc3JjJTNEJTIyJTJGJTJGZG93bmxvYWRzLm1haWxjaGltcC5jb20lMkZqcyUyRnNpZ251cC1mb3JtcyUyRnBvcHVwJTJGdW5pcXVlLW1ldGhvZHMlMkZlbWJlZC5qcyUyMiUyMGRhdGEtZG9qby1jb25maWclM0QlMjJ1c2VQbGFpbkpzb24lM0ElMjB0cnVlJTJDJTIwaXNEZWJ1ZyUzQSUyMGZhbHNlJTIyJTNFJTNDJTJGc2NyaXB0JTNFJTNDc2NyaXB0JTIwdHlwZSUzRCUyMnRleHQlMkZqYXZhc2NyaXB0JTIyJTNFd2luZG93LmRvam9SZXF1aXJlJTI4JTVCJTIybW9qbyUyRnNpZ251cC1mb3JtcyUyRkxvYWRlciUyMiU1RCUyQyUyMGZ1bmN0aW9uJTI4TCUyOSUyMCU3QiUyMEwuc3RhcnQlMjglN0IlMjJiYXNlVXJsJTIyJTNBJTIybWMudXM0Lmxpc3QtbWFuYWdlLmNvbSUyMiUyQyUyMnV1aWQlMjIlM0ElMjIyYTBhNDZlZTJlZjE3ZTk5ZTViZjZmYTk3JTIyJTJDJTIybGlkJTIyJTNBJTIyM2I4ZjhmYmY5OSUyMiUyQyUyMnVuaXF1ZU1ldGhvZHMlMjIlM0F0cnVlJTdEJTI5JTIwJTdEJTI5JTNDJTJGc2NyaXB0JTNF[/vc_raw_html][/vc_column][/vc_row]...

CTK 故事集|CRE8 應品牌核心價值進化而生的網站 12

CTK 故事集|CRE8 應品牌核心價值進化而生的網站

[vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column][vc_single_image image="20601" img_size="large" alignment="center"][vc_empty_space][/vc_column][/vc_row][vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column css=".vc_custom_1533708507132{padding-right: 10% !important;}"][vc_column_text css=".vc_custom_1576481032862{padding-right: 10% !important;}"]身為與國際接軌的設計產業公司,奎艾特(CRE8)從早期提供產品/工業設計,也轉型為全方位的設計整合公司,力求在品牌策略、使用者體驗、機構工程等多個面向,滿足企業與使用者體驗。為此,CRE8 重新設計了品牌形象、Logo,當然伴隨了網站的更新。 CTK Pro 在早期與 CRE8 洽談時,便發現一些舊網站常見的問題: ▲ 缺乏 RWD 的網頁設計 ▲ 網站為特殊客製化後台,編輯需改寫 code ▲ 無 SSL 憑證,常備駭客攻擊,綁架網站 ▲ 切換網站不同語系編輯麻煩 ▲ 設計稍微過時,網站設計不符合現有品牌核心價值[/vc_column_text][vc_single_image image="20597" img_size="large" alignment="center" css=".vc_custom_1576562359794{padding-top: 20px !important;padding-bottom: 20px !important;}"][vc_column_text css=".vc_custom_1576481287555{padding-right: 10% !important;}"]CTK Pro 與客戶規劃網站設計時,更傾向了解網站建置/改版的目標與策略,不管是從後台編輯需求、SEO 架構、網站結構安全、設計需求等,詳細討論了解需求後,製作除了更貼近客戶需求外,也會加快整個製作流程,就讓看看 CTK Pro 如何為 CRE8 官網增添風采![/vc_column_text][vc_empty_space height="26px"][eltd_section_title display_separator="yes" display_dot="no" type_out="no" alignment="left" title="設計稿調整|網頁動態效果" title_font_size="26"][vc_column_text css=".vc_custom_1576481444758{padding-right: 10%...

WordPress 2020 網頁設計趨勢 13

WordPress 2020 網頁設計趨勢

[vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column][vc_single_image image="20582" img_size="large" alignment="center"][vc_empty_space][/vc_column][/vc_row][vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column css=".vc_custom_1533708507132{padding-right: 10% !important;}"][vc_column_text css=".vc_custom_1575877046563{padding-right: 10% !important;}"]WordPress 在 2019 年底更新至 5.3 版,著名的古騰堡編輯器也變得更加強大,其市佔率也正式超過三成,來到 35.2%(2019 Dec)。隨著日新月異的網站技術,在 2020 年,我們可以期待什麼樣的網頁設計趨勢呢?[/vc_column_text][vc_empty_space height="26px"][eltd_section_title display_separator="yes" display_dot="no" type_out="no" alignment="left" title="這些正在/很有可能發生" title_font_size="26"][vc_column_text css=".vc_custom_1575877143786{padding-right: 10% !important;}"]很可能會發生的(已經發生): 聊天機器人的整合 簡約/漸層的設計風格/元素 語音搜尋與 SEO 的重要性不墜 可能會發生(部分已發生): 多元彈性的電商/多樣的支付方式 VR, AR 相關元素於網頁中的應用[/vc_column_text][vc_empty_space height="26px"][eltd_section_title display_separator="yes" display_dot="no" type_out="no" alignment="left" title="聊天機器人的整合(Chat-Bot)" title_font_size="26"][vc_column_text css=".vc_custom_1575877346030{padding-right: 10% !important;}"]因為 Line, FB Messenger 等通訊軟體的發達,聊天機器人有點介於「網站」和「通訊軟體」之間的接口。設計良好的點擊互動方式,除了幫助您了解訪客的需求外,也大大提昇了網站的互動性,瀏覽網站的經驗勢必更貼近人性。 除此之外,透過聊天機器人嵌入於網頁中,你也有機會得到客戶的社群媒體(Socail Media)相關資訊;另一方面聊天機器人比起冰冷的靜態式問卷,更能得到客戶資料,讓你的行銷無往不利![/vc_column_text][vc_empty_space height="26px"][eltd_section_title display_separator="yes" display_dot="no" type_out="no" alignment="left"...

3 分鐘搞懂架站必備元素:主機(網站伺服器) 14

3 分鐘搞懂架站必備元素:主機(網站伺服器)

[vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column][vc_single_image image="20559" img_size="large" alignment="center"][vc_empty_space][/vc_column][/vc_row][vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column css=".vc_custom_1533708507132{padding-right: 10% !important;}"][vc_column_text css=".vc_custom_1574392162712{padding-right: 10% !important;}"]網站做的再漂亮,若不能讓使用者拜訪,也是圖勞。這時候需要主機(Server),以及網域名稱(Domain Name),一旦設定好網路指向(DNS),大家就可以拜訪你的網站啦! 什麼?聽不懂專有名詞。比喻性的說法就像是:「我們有了個產品(網站內容),需要有個店面(主機)讓客人可以來拜訪,這時候你的店面要有個好找的地標(網域名稱),並且上各大平台告訴大家怎麼來店裡(DNS 設定),客人就自然絡繹不絕啦!」 *地址的概念,比較接近網站主機的 IP 位置。詳細 IP 像是 Google 的解析伺服器是 8.8.8.8,對人腦來說相當難記,才需要「網域名稱」讓使用者好記。 網路上開店,可能不像實體店面,有所謂黃金地段、黃金店面(Domain Name 有好記/不好記之分),但「主機」的好壞,可影響著店裡人潮洶湧時、顧客大批排隊結帳時,店面可以負荷/消化的速度。就讓我們來看看關於主機(Server),有哪些是需要在網頁設計前了解的。[/vc_column_text][vc_empty_space height="26px"][eltd_section_title display_separator="yes" display_dot="no" type_out="no" alignment="left" title="虛擬主機/實體主機,到底有何差別?" title_font_size="26"][vc_column_text css=".vc_custom_1574405869834{padding-right: 10% !important;}"]主機與我們一般認識的電腦主機,本質上有點差異,或許翻譯為「伺服器」更能體驗「網站主機」真正在做的事情。網站伺服器為了因應大量請求(多人同時上線),線上運算、可能的安全性問題,以及執行之網站程式,在架構上與個人電腦有多處需要去特化。 當然個人電腦也可以作為網站主機使用,只是要應付 24 小時開機、防火牆、降溫系統等等都要另行設置並計算成本。類似你我手邊裝置,有獨立的形體的主機,就是「實體主機」。也有網路服務商提供「主機代管」的服務,減低了維護所需的人力。 一般網站真的需要一台電腦 24 小時運作來應付嗎? 你的網站 24 h 都有如此高的流量、運算需要執行嗎?於是就衍生出「虛擬主機」的概念,也就是「共享主機」,透過程式的方式讓主機內可以執行多的網站來達成。 現今單一主機(群)的效能可以負荷的網站數量大概從數百到數千個不等,這也不難想像,伺服器中,若有某網站流量特別大時,會壓縮到其他網站使用 CPU, RAM 等資源的空間,網站速度自然受到影響。[/vc_column_text][vc_empty_space height="26px"][eltd_section_title display_separator="yes" display_dot="no" type_out="no" alignment="left" title="我不想放虛擬主機,卻受到其他網站影響" title_font_size="26"][vc_column_text css=".vc_custom_1574391959128{padding-right: 10% !important;}"]到各大主機供應商的方案看,會提供 X 核心,X...

給客戶看的網頁設計(五)壓縮圖片!節省 60% 以上的空間,加快網頁速度 15

給客戶看的網頁設計(五)壓縮圖片!節省 60% 以上的空間,加快網頁速度

[vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column css=".vc_custom_1533708507132{padding-right: 10% !important;}"][vc_column_text css=".vc_custom_1573019316804{padding-right: 10% !important;}"]2019 網頁大小已接近 4MB,是 2016 的 2 倍,比起 2011 更達到 4 倍以上。歸功於頻寬、4G 網路的普及,載入網頁的速度沒有像網頁大小一樣呈倍數成長,但隨著預期心理提昇,人們瀏覽網頁時等待的耐心變得比以往更少了! (圖片來源) 雖然網頁速度不是最直接影響到網頁成效、SEO 的項目,但一般通則是超過「3 秒」,使用者就很有可能跳出正在讀取的頁面。之前 CTK 小記也講過許多優化網頁速度的文章,要檢測網站速度,可以使用 Google PageSpeed Insights 或是 GTmetrix 來找出拖慢網站速度的原因,加以改進。 今天和大家談的,是最簡單,卻也最重要的調整:「適當的圖片」。 這裡只說到圖片,是因為包含圖片尺寸(解析度)、檔案格式、壓縮比例。牽扯到 SEO 等還關係於 alt 項目設定等等,就先來看最重要的「圖片大小」:[/vc_column_text][vc_empty_space height="26px"][eltd_section_title display_separator="yes" display_dot="no" type_out="no" alignment="left" title="最簡單卻也最必要的調整:輸出適當的圖片" title_font_size="26"][vc_column_text css=".vc_custom_1573019451650{padding-right: 10% !important;}"]企業好不容易請了商業攝影師,拍了漂亮細緻的形象圖、示意/空間圖,要放到官網,呈現產品或企業形象概念,卻常顧慮:「我放這麼小的圖,不會看不清楚嗎?」(網頁設計公司都會提示:「圖片大小在 100kb 內為佳,卻常常收到用雲端空間傳來一張 10MB 的圖檔...

13 個網頁文案與響應式網頁設計密不可分的關係-為何要先思考好文案再建網頁 16

13 個網頁文案與響應式網頁設計密不可分的關係-為何要先思考好文案再建網頁

[vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column][vc_single_image image="20502" img_size="large" alignment="center"][vc_empty_space][/vc_column][/vc_row][vc_row use_row_as_full_screen_section="no" center_bck_image="no"][vc_column css=".vc_custom_1533708507132{padding-right: 10% !important;}"][vc_column_text css=".vc_custom_1571734394823{padding-right: 10% !important;}"]響應式網頁設計(RWD)已是現在網站不可或缺之理念。只是,網頁文案隨螢幕解析度切換的閱讀體驗,全都靠網頁設計公司的技術,就可以克服了嗎? 網頁設計公司:「當然沒問題!」「只要把文案準備好,程式判斷過目前瀏覽裝置的寬度後,就會自動幫你斷行 了!」 客戶:「等等,文案那個『了!』可以不要換行嗎?這樣看起來很怪,可不可以幫我斷行在『自動』兩個字前面?」 網頁設計公司:「可以啊,先跟我說一下你現在視窗的解析度,再來是,若使用者用更大或更小的螢幕瀏覽,可能會看起來怪怪的喔?」 客戶:「...