文章專區

Marketing 搜尋行銷

在以往的網頁設計過程中,字型的選擇並不多,即便設計師選擇了特定的字體,若使用者沒有安裝,仍然無法順利觀看。若在必須使用更美觀的字體的情況下,就得製成圖片,但這不僅會造成檔案變大,對於SEO的搜尋更是不利。而Web Fonts的出現便替廣大網頁設計師解決這個問題,不必再擔心因使用者沒有安裝該字體而導致與預期不一的效果。 以英文的Web Fonts來說,最有名絕對非Google Fonts莫屬,Google Fonts是一套開放且免費的資源網站。   第一步:進入Google Fonts網站,點選想用的字型,並可依需求選擇想要的字型樣式、大小變化等。     第二步:點選右上角「select this font」   第三步:會滑出新視窗,複製原始碼及CSS即可,也可下載至個人電腦。   另外,Google Fonts也提供中文字體,目前有五款可選擇:圓體、楷體、仿宋體、黑體、明體。 https://fonts.google.com/earlyaccess 進入網站後按ctrl+F搜尋「Chinese Traditional」即可找到這些字體。   Google Fonts目前已擁有809種字型,提供線上預覽讓您即時瀏覽任何想輸入的文字,並可自由選擇字體大小與粗斜體等變化的預覽效果,也可下載於私人電腦觀看,這讓網頁設計師能不再侷限於系統內建字型,使用者也不必再安裝該字型檔案,便可享受最原始的設計,所以瞭解Google fonts的使用,對網頁設計師來說絕對是一絕佳利器。
      隨著主流瀏覽器不斷地更新與進步,CSS搭配js所形成的網頁動畫效果,能用CSS3的語法直接呈現,在圖片的設計上更能減少圖片效果,避免檔案容量過大造成存取困難。 到底有哪些CSS3語法在前台網頁設計中是最常被使用的呢?   1. RGBA設定元素顏色 可設定元素的顏色,主要利用顏色的RGB值,以及設定元素的透明度。 範例: background:rgba(0,0,0,0.5); background:rgba(0,0,0,1); background:rgba(red,green,blue,alpha); 其中alpha值 0為透明 1為不透明,0~1區間可選擇透明度的強弱。            2.Border radius設定元素圓角 可設定元素圓角,預設為0 範例: border-radius: 10px; -webkit-border-radius: 10px; (針對chrome瀏覽器) -moz-border-radius: 10px; (針對firefox瀏覽器)   3. Text Shadow文字陰影 可設定文字陰影 範例: text-shadow: 1px 2px 3px #000;   4. box Shadow區塊陰影 可設定區塊陰影 範例: box-shadow: 1px 2px 3px #000; -webkit-box-shadow: 1px 2px 3px #000; (針對chrome瀏覽器) -moz-box-shadow: 1px 2px 3px #000; (針對firefox瀏覽器)   5. transition過渡動畫 可設定動畫效果 transition-property:對哪個屬性 transition-duration:動畫時間,預設為0 transition-timing-function:動畫效果,如淡入、淡出等 設定值: linear:以相同速度開始至結束的效果 ease:慢速開始,然後加快,之後慢速結束的效果 ease-in:以慢速開始的效果 ease-out:以慢速結束的效果 ease-in-out:以慢速開始和結束的效果 cubic-bezier:在cubic-bezier函數中定義值,是0~1之間的數值 通常在設定動畫速度時,大多使用ease-in或ease-out來取代,但藉由cubic-bezier,可以得到更多種速度控制的動畫效果。 transition-delay:規定動畫效果的延遲時間 範例: div{ width:100px;height:100px; transition-property:width; transition-duration:1s;} div:hover{width:200px;} 以上會造成寬度改變的滑動效果   6. Gradient Background設定背景漸層 上下漸層:GradientType=0 左右漸層:GradientType=1 漸層起始顏色:startcolorstr=#  漸層結束顏色:endcolorstr=#  範例: 預設的背景色 background: #278092; background:-webkit-gradient(linear, left top, left bottom, from(#00475E), to(#007276));  (針對chrome瀏覽器) background: -moz-linear-gradient(top, #00475E, #007276); filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00475E', endColorstr='#007276');  (針對firebox瀏覽器) background: -o-linear-gradient(top, #00475E, #007276);  (針對opera瀏覽器)         目前這些都是在網頁設計中最常使用的CSS3語法,一般網路上也有免費的產生器可供使用。CSS3的出現影響了使用者使用網頁的讀取速度,在目前較流行的RWD網頁(響應式網頁)更有特別的用法,且較不受拘束,未來CSS3的發展指日可待。  
什麼是SASS? 為了減短開發網頁設計CSS的所需時間,因此Ruby(一種程式語言)開發出了CSS程式化框架SCSS、SASS。兩者皆屬於SASS,差別在副檔名與撰寫方式的不同。SASS是原生的SASS語法,最大的特徵是以縮排取代了CSS的大括弧,SCSS則是後來衍生出來的,在結構上與CSS十分相似,因此對於本來就習慣寫CSS的人來說,SCSS會比較容易上手。   安裝SASS 1.到Ruby官網下載最新的Ruby程式。http://rubyinstaller.org/downloads/ 開啟「Start Command Prompt with Ruby」視窗並執行。 2.按「開始」->「執行」輸入「cmd」開啟命令提示字元。 3. 輸入「gem install sass」安裝SASS。 安裝之後可輸入sass-v 確認是否安裝成功。   SASS的特色 1.變數(Varibles) 在SASS中新增變數前需加符號"$" 可以整合網站最常使用的寬、高、顏色、字型等等,預先設好,需要時就能拿出來使用。 SASS: CSS原碼:   2.巢狀(Nesting) 透過巢狀式結構,父子元素的命名關係一目了然,易讀性增高,減少CSS的編輯時間。  SASS: CSS原碼:   3.函式{Mixins) 可以省去許多重複的CSS文字,新增函式前需加"="做為宣告,函式使用前則需加"+"號即可取用。 SASS: CSS原碼:   4.繼承(Extend) SASS裡的繼承與CSS的繼承差距不大,也就是能沿用之前所撰寫的CSS,標籤前加"@extend"便可沿用。 SASS: CSS原碼:   5.運算符(Operators) 在SASS裡可直接做加減乘除的計算(注意單位需相同)  SASS: CSS原碼:   6.導入(Import) 當需要使用其他SASS文件時,只要將文件導入"@import"進來即可。 需注意的是導入的文件前需加下底線"_"。 如例子master.sass需寫成_master.sass SASS: CSS原碼:   若能靈活應用SASS的話,將會大幅度降低網頁設計CSS的撰寫時間,並由於CSS行數減少的關係,使得後續的維護與修改更加容易,也能夠使網頁讀取速度更快。缺點在於一開始繁複的安裝過程,並需要先開啟編輯器生成CSS才能看到撰寫的網頁內容,且需花時間學習新的語法,但若是習慣之後,確實能減少許多不必要的時間。想提升工作效率嗎?學習SASS會是你的好選擇。  
HTML5網頁設計,相較於傳統的HTML的網頁設計來說,主要是在網頁內容呈現的強化。 因應行動裝置普及的時代,先前的HTML+Flash在行動裝置上,有著效能上的問題,加上Apple的iPhone全面不支援Flash的關係,使得光靠HTML來製作的規範已無法滿足時代的需求。   而在HTML5網頁設計的規劃中,有以下幾個方向:  擴展原有的HTML標籤定義,增加許多可在行動裝置上更為方便使用的標籤,如<video></video>,讓製作者可以更快速的開發支援性作的影片播放器。 HTML5網頁設計的精髓在於HTML5 + javascript + CSS3,藉由前面三者的結合,提供網頁設計應該更多的可能,如拖拉上傳、全動畫設計網站(以HTML5為基礎)、3D動畫設計、行動網頁設計等等。 對於網頁的效能與應用做更進一步的強化,如離線瀏覽功能、資料庫儲存技術、SVG影像格式的使用。 以上幾點都是未來在這個領域上發展的重要方向,也因此若要成為這領域的筊筊者,必然要對於這個方面非常熟悉與理解才行。   接下來列出幾個在HTML5網頁設計的方向上的網站: 1. HTML5Rocks  2. w3schools-HTML5  3. html5up    資深工程師 Chen 延伸閱讀 什麼是RWD (自適應網頁設計、響應式網頁設計、回應式網頁設計)?
RWD(Responsive Web Design)可稱為自適應網頁設計、響應式網頁設計、回應式網頁設計等等,是一種可以讓網頁的內容可以隨著不同的裝置的寬度來調整畫面呈現的技術,讓使用者可以不需要透過縮放的方式來瀏覽網頁,大大的提昇畫面的可瀏覽性及使用介面的親和度;然而這對於行動商務越來越受到重視的現今來說,隨之也越來越倍受重視。      近幾年,隨著行動裝置(智慧型手機、平板)的普及,以及行動上網服務的使用率越來越高,傳統網頁的標準已經無法符合這些裝置的需求來呈現了,尤其是以flash製作的動畫,受限於行動裝置運算力不足的限制之下,已經沒有行動裝置可以直接瀏覽flash製作的網頁了。雖然可透過一些特殊的瀏器APP軟體來觀看,但方便性卻大大的降低。            而RWD又是如何達到的呢? 主要是以HTML5的標準及CSS3中的media queries來達到的。      在HTML5的標準中,我們可以指定頁面的寬度可以依照裝置的檢視寬度來呈現,再利用CSS3的media queries 來設定不同寬度下使用不同的CSS來呈現頁面。因此設計師在設計網頁時,就必須要針對不同的寬度下的畫面編寫不同的CSS檔案供瀏覽器來讀取。      RWD的優點:      1. 可使用同一套原始碼來撰寫CSS,可以減少版面重新製作的時間。      2. 可同時針對不同的解析度來設定,增加頁面的可用性。      3. 對於搜尋引擎的收錄不會造成影響,不影響SEO的結果。      4. 開發時間較APP來說可以快速很多。      5. 學習門檻較低,對於已經從事網頁設計的人員來說,此技術只是建構在原本的DIV+CSS之上的一門技術,因此學習起來相對容易。      RWD的缺點:      1. 因為在同一頁面會置入多種解析度的CSS檔案會增加頁面傳輸量,載入的時間也會加長。      2. 若在各種解析度下的畫面都需校槁的話,在製作版面的時間會大大的增加。      3. 無法提供像APP般功能強大的功能,或是各種酷炫的拖拉效果。      4. 開發時程較傳統網頁需相對多的時間。      以上提供RWD的各項優缺點分析。      最後,想要可以體驗RWD的功能前,還有一項最重要的基本要素,那就是瀏覽的支援度。由於RWD是建立在CSS3的基礎之下,因此要支援RWD也必須要支援CSS3的瀏覽器才行,以下列出各大瀏覽器支援的版本:      ‧ Internet Explore 9以上      ‧ Chrome、Firefox、Opera 使用自動更新至最新版本即可      雖然還有些人撰寫了JS來讓IE8以下的版本來支援CSS3等語法,但目前還是支援度不佳,且IE8的使用者還在不斷的減少中,因此使用新的瀏覽器才是真正體驗RWD的最好辦法。      本篇文章簡單的介紹了RWD的基本觀念,並分析其優缺點,讓有意使用RWD的人們對於此技術有更多的了解。       Posted by 資深工程師 / Chen  
建構一個成功的網站只需要三項簡單的能力,或稱為要素。其實這三項大家都知道:內容、設計、技術;雖然這三項要素都很簡單,但是真的要將這三個要素緊密的結合在一起,卻比想像中的要來的困難 │什麼是內容│ 傳統觀念下,這就是你想要呈現給讀者看的東西。 依比較新的管理學而言,內容是讀者想要從你的網站看到的東西。內容可以是文字、圖片、聲音、影像……等,只要可以透過數位傳輸,都可能是網站的內容。現在這篇文章,就是內容。 │什麼是技術│ 技術是「適當」運用科技的能力。 網路既然是科技媒體,所有內容當然也必需透過技術方能呈現。技術從最簡單的HTML到複雜的互動資料庫都是。 │什麼是設計│ 設計就是內容被使用者感官接受的表象。 從文字的選擇、版面的規劃、動線的安排、網站架構、用色到多媒體的構成,這都是設計。就算只有純文字(ex: E-mail的Newsletter),也需要設計。記住:沒有內容,就沒有設計。雖然麥可魯漢說──媒體本身就是訊息,但是設計本身卻不是內容。 只有整合才能讓三項能力發揮,一個網站要如何擁有這三項能力呢?招募:這三項的人才,分開來找其實都不難。 工作:要讓這三組團隊分別運作,也很簡單。 管理:想要領導這三個團隊分別做各自的專長,還算容易。 但是這樣就夠了嗎?當然是不夠的。目前台灣幾乎百分之百的大型商業網站都具備了這三項能力,但為什麼網站始終不勝理想呢?原因在於:所有的網站都將這三項能力分別運作,而沒有任何職務能夠讓內容與設計、設計與技術、技術與內容,甚至這三項能力整合在一起。除了無法在網站上發揮網路媒體的特效,同時也浪費寶貴的人力資源與投資人的錢!有的網站花了很多錢,但看起來還是很像報紙!想想看是為什麼!
在著手進行一個網頁設計之前,首先要明確以下幾項設計原則:   1. │內容與形式相統一 這篇文章,就是內容│ 內容是指你要通過網頁向瀏覽者傳達的有效資訊及文字;形式指的是網頁的排版佈局、色彩、圖形的運用等外在的視覺效果。無論採取何種表現形式都不能單純追求網頁美觀而忽視內容的建設,沒有充實內容的網站,即使設計再精美,也不會對用戶有長久的吸引力。   2. │主題鮮明│ 一個網站必須要主題鮮明,突出重點,特別是個人網站,不可能像綜合網站一樣內容大而全,包羅萬象,因此必須要確定一個明確的主題,突出自己的個性和特色,一個主題鮮明、內容豐富極具特色的網站往往比一個“大雜燴”式的網站更能吸引人。   3. │風格統一│ 整個網站設計要採取統一的風格,這樣使網站看起來更專業,不要一個頁面採用一種風格,另外一個頁面又換一種風格,給人一種很散亂的印象。風格要突出自己的個性,無論是文字、色彩的運用,還是版式的設計都要給人一種鮮明的印象,使人看到這個頁面,就會想到這是你的網站。   4.│兼顧下載速度與美觀│  由於目前的網路狀況較差,不能片面追求頁面的美觀而忽視頁面的下載速度,這樣會失去一大批瀏覽者,大家不會為了看一幅美麗的圖片而等上半天。網頁中的圖片應當是起到畫龍點睛的作用,除非特殊需要,一般不要在網頁中大量使用圖片,在網頁中的圖片要經過適當的壓縮處理,使它在保證質量的前提下儘量小。一些用Java程式設計的頁面也非常美觀,但下載速度慢,一般要慎重使用。   5.│導航清晰│ 網站要給瀏覽者提供一個清晰的導航系統,以便於瀏覽者能夠清楚目前所處的位置,同時能夠方便地轉到其他頁面。導航系統要出現在每一個頁面上,標誌要明顯,便於用戶使用,對於不同欄目結構可以設計不同的導航系統。   6.│欄目設置合理│ 對於一個網站,尤其是內容較多的網站,其欄目設置是否清晰、合理、科學,往往在很大程度上影響網站的訪問量。一個欄目設置合理的網站,用戶會很容易地找到需要的東西,這樣的網站才能讓用戶喜歡。對於初學者來說,常犯的錯誤就是網站結構設計不合理,內容編排雜而亂。因此,在設計網站之前,一定要規劃好欄目的設置。   7.│良好的相容性│ 對於網頁來說,它不同於其他印刷品,製作完成後就一成不變了,它隨著用戶瀏覽器的不同而出現變化,因此設計者一定要考慮到網頁的相容性,使它適用於大多數主流的瀏覽器或目標用戶所用的瀏覽器,不致於出現差別很大的瀏覽效果。   8.│經常更新│ 經常維護更新,給用戶提供最新的資訊,才是一個網站具有吸引力的重要手段。因此,要想保持網站的訪問量,吸引更多的“回頭客”,你必須要定期更新網站內容。
縱觀這幾年下來,台灣對於設計力的重視的確逐漸升高,政府亦開始有相關的輔導政策以提升台灣在國際上的設計競爭力,但這僅僅是政府單方面對外的作為,但在對內來說,台灣產業界業主的觀念普遍仍對設計這門專業是毫無概念的。 雖然國內教育體系亦致力於培養許多設計人才,如工業設計、建築設計、視覺設計、空間設計等許多設計專業,但仍忽略在教學及產業上的實際連結面, 學生需要受教育以作出好的設計,產業業主亦需要受教育才能尊重、支持設計師們的想法,達到相輔相成的作用,而並非把設計一詞認為是勞工的同義詞。 以台灣僅僅網頁設計環境來說,這樣一塊現代網路化的資訊趨勢,便需要更多業主的了解及尊重,當業主能將想法及構思放心交予設計師們著手實現,設計才能發揮到該有的水準,將產業特色及網頁設計相結合,達到宣傳媒體管道的作用。以過去一化接觸過的許多案子為例,尊重網頁設計專業的案主有之,而僅將網頁設計這門專業視為附屬品、認為在視覺及程式設計上的專業考量可有可無的案主亦不在少數,在案主們兩種相異的思維下,想當然爾是放心交由有專業而週到考量的網頁設計所製作而成的網站,能有更到位、實質效益更大的專業網站。 網頁設計並非全盤否定業主的想法及考量,而是在相互尊重及幫助下,共同將網站案件做到既符合產業特色、卻又比同業更出色、設計更精采的專業網站,這是現今台灣的網頁設計環境與產業之間,最需要的連結點。 Posted by 視覺設計師 / One
[ 為什麼網頁設計的收費這麼高? ] [ 為什麼這麼點東西要收這麼多錢? ] 我想這應該是一般人對 網頁設計 的刻版印象,常會覺得這種實體摸不到,看起來又跟 DM 差不多的東西,為什麼要收這麼多錢? 網頁設計 跟一般行業一樣,也需要設備,人事,軟硬體,租金,水電等,其專業性又比其他同性質設計行業來的更高,成本也更高 平面印刷可能只需要: 1. 設計師完稿費 2. 印刷成本費 如果換成網頁設計的話可以假想成: 1. 設計師完稿費 ( = 網頁設計師設計費 ) 2. 印刷成本費 ( = 網頁空間費 ) 但是多出來的部份是 3. 程式設計費 4.網址費 5. 網路行銷費 因為 網頁設計 的費用高,是有跡可循,由於設計業是屬於「智慧財產」類的工作,所以當他開始動腦在設計時,本身就已經開始屬於在工作狀態包含設計,修改,除錯,申請等,都屬於專案的一部份,正因為他是由一群專業的人士所完成的一個案子,理所當然費用會比一般平面媒體的價位更高,所以在網路這塊領域,收費低的,一定有其流程比較不足,不專業的地方,跟如果一家高級餐廳每次賣的東西都很便宜,滿漢大餐有可以一桌只要1600?排除掉特別促銷的例外,光他高等食材就可以壓垮餐廳本身了,所以一定會用劣等原料充當高級貨去販賣,想當然,正版10幾萬的lv包包為什麼可以賣到5000?是一樣的道理。 [ 合理的價格,合理的報酬,才能有高品質的網站 ] Posted by 視覺設計師 / Asen
早期的網頁設計都是利用HTML在研究文件內,加入基本的格式和結構,來達成簡單的內部連結功能。但當網際網路更加普及後,人們開始用HTML語言來作視覺呈現的用途。除了單純的替文件加上標題元件之外,人們還需要加上各式各樣不同的字體或加粗文字,讓文件充滿更豐富的視覺變化,此時,表格已不再只是呈現資料,反而被當成是很重要的網頁設計版面編排工具;引言方塊功能也被網頁設計師拿來當作是增加空間的方法,再也不是原本當作引言的用途,如此網頁的原始碼會很快的充斥著各種如外星文的符號和表格標籤,變得難以理解,也使得網頁的容量大增。 就在這時,[  串接樣式表(CSS,Cascading Style Sheets)出現了 ],有了CSS,我們可以從外部來控制頁面的外觀,同時將文件內容和呈現方式的設定給分隔開來,網頁設計的編排可以不需動用到表格功能,改用CSS來控制,這麼一來標記內容的工作就可以簡化許多,且對於開發人員而言,意思明確的網頁比圖像式更容易處理;使用有意義的標籤亦可讓程式或其他設備辨識出來,例如,像搜尋引擎就可以辨別出頁面中以h1標記所框寫起來的標題,從而加重他的重要性;而那些依賴頁面閱讀輔助的使用者,也可以利用標題作為瀏覽頁面時的輔助,加強網站的實用性。 時代在進步,網頁設計的技術也持續在跟進,一間好的網頁設計公司除了提供一系列完善的服務之外,客戶交付的專案,應以最有效率的方式,良好的溝通,設計出最符合搜尋行銷,最能夠表現客戶公司以及產品的網頁設計作品。   Posted by 視覺設計師 / 小p
[ 除了買套版網站或網頁,一般網頁設計公司設計網站都從網頁版型開始,什麼是網頁版型? ] 簡單的說就好比車的外殼,規格,房子的隔間數,窗戶數,呈現方式,或是蛋糕的大小,基本材料等,總而言之就是網站基本的架構,最重要,也可以說需要最慎重處理的一環。 [ 如何與網頁設計師溝通版型? ] 簡單的要點就是溝通。 多溝通,網頁設計師要多詢問客戶的需求,客戶也要把所表達的需要訴求出來,一般來說有以下步驟: 1.搜尋自己喜歡的網站風格 客戶首先要從網路上找出自己所喜歡的網站,盡量從重點去找,如果單一網站無法全部符合自己的需求,可以分為顏色,排版,文字大小,動畫呈現等加以分類。   2.說明自己想要的呈現方式 從找到的範例有很多呈現效果,譬如flash出現的時間,感覺,淡入淡出的時機,文字的大小,網站的色系等,在這邊有幾個重點: a.網站的寬度:一般以1024px為主,800px除了舊電腦外已經沒人使用,甚至很多網站都已經開發到1280以上。 b.網站的對齊:有分靠左,置中 這二大類,靠上靠下則是比較創意型的網站所使用。 c.網站的色系:以底色為主,其他以整體區塊的顏色,文字的顏色等。 d.字型的大小:網頁上的字基本上都以新細明體為主,除非有特殊需求,不然都以新細明體的大小去計算。 e.效果的呈現:動畫的效果,或最新消息的跑法等。   3.製作時間 如果客戶本身是屬於活動性質網站,那完成的時間必需跟設計師討論的很清楚,如果是客製化網站,網頁設計師會根據你的需求,估算個時間表出來,大家在以這個時間表來互相配合,設計師會請客戶本身提供相關資料,客戶本身再依照網頁設計師給的時間點前準備好資料,以讓整個完成時間更有效率,所以基本上是互利的方式。   其實網頁設計師最主要是需要很清楚的表達,描述,有範例來表示更能讓設計師清楚的知道你要的東西,盡量避免以模糊籠統的抽象式來形容,這樣會更提高網站完成的效率。 Posted by 視覺設計師 / Asen
很多人一直有個疑問?平面設計和網頁設計到底差別在哪裡?有何不同之處? 網頁設計與平面的共同點大致上在於: 兩者都需要良好的視覺表現、且設計者要有好的審美觀。 不同之處: [顏色運用方式不同] 平面設計的顏色廣泛,為了就是表達品牌形象的細膩度與整體質感,然而網頁用色規定了僅僅兩百多種網頁設計安全顏色。 [設計理念不同] 平面設計的精神即在於如何讓產品或企業形象完整的呈現,因此以品牌做為設計的出發點。 網頁設計除了如何完整呈現形象品牌之外,因為在電腦操作的環境下,必須還要兼顧到使用者操作習慣,因此動線與功能對網頁設計來說是一項重要的設計考量。 就我認為,網頁設計的技術層面會比平面設計來得多,包含繪圖軟體的應用之外,更有多媒體技術、網頁軟體的運用排版...等等,用實現於製作網頁所需求之軟體。 但,也不要因此認為平面設計一定比較簡單,[設計是非常專業的領域,好的創意往往源自於平面的想法],簡單來說網頁設計的美感與平面設計相輔相成,有了好的想法後,再利用網頁需求的規劃與動線,製成一個好的網站。   Posted by 視覺設計師 / Fanny
以現今的網頁設計產業來說,製作網頁的方式有兩種大方向,分別就是套版設計與客製化設計,一般案主或許對其製作過程上的收費與內容的差異較為不熟悉,現在茲就這兩種主流方式做解釋。   套版設計的前提就是以快速製作、功能簡便,求有不求精的設計方式,由程式設計師及網頁設計師預先建立好一套(或數套)固定給客戶使用的網頁框架版型及後端程式,當製作不同的案件時,便在已固定、無彈性的網頁框架中作編排的圖片抽換,網站功能程式也是不斷的套用,並未能有跳脫的創新設計。   [ 套版設計的好處就是網站產生快速,收費較為低廉,架構少、內容簡單。] 但相對的就是經由套版製作出來的網站外貌幾乎千篇一律,在網際網路成千上萬個網站中,很容易被忽略,毫無媒體價值,違背了成立網站最核心的價值,以成立一個專案網站來說,使用套版設計的方式是不推薦的。   完全相反的 [ 客製化網頁設計對於網站設計就是完全以量身訂做的方式為出發點,在充分了解詢問案主對於網站的構想、視覺表現風格之後,除了在網站視覺上獨樹一格,可以表現其案件主題更進一步接受案主提出的構想,創新程式增加網站的互動功能,甚至可以在製作過程中量身訂做導入如網頁搜尋友善性的先進概念設計,讓成立網站收到最多的實際效益 ]。   客製化設計仍有網站製作時程較長,事前的準備及與案主溝通上會花費較多的時間,但其成果卻常常是遠勝過套版網站設計的千倍,網站設計一門學問的出發點便是以量身訂做為基礎,以求達到突出於眾多網站之間,要想要有一個體質好的企業網站,尋求客製化設計的專業網頁設計,才是正確的選擇。   Posted by 視覺設計師 / One
  對於『網頁設計』和『網頁程式設計』大多數認為會網頁設計,是不是就會寫程式呢?通常這樣的問題,常常會讓我們哭笑不得!因為兩者的差異實在非常之大!   通常,每個網站製作的過程中最少需要兩種以上的專業人才,一個是『網頁設計師』另一個就是『網頁程式設計師』。這兩種人在網頁製作上扮演了不同而且極為重要的角色,兩個可說是相輔相成。   一般,網站的視覺美感的呈現通常不是寫程式的人可以照顧的很好的,因為視覺設計的專業與程式設計的領域大不同。最常遇到的狀況是,會寫網頁程式的人不會視覺設計,懂得設計的人不會寫程式,而且通常視覺設計人員和程式設計師的思維邏輯有之間很大的差異。『網頁設計師』的工作即在於整個網站的美感呈現,和如何讓使用者在瀏覽整個網站的動線上能更流暢、順手,包含動畫的點綴,讓頁面能更豐富活潑。『網頁程式設計師』即在於配合『網頁設計師』所製作的網頁功能進行程式撰寫,包含網站前台的程式與後台使用者管理的功能與介面,和系統建置能方便穩固都出自於『網頁程式設計師』的專業。 『網頁設計』和『網頁程式設計』因不同的專業程度而互相配合,才能製做出一個好的優良的網站。   Posted by 視覺設計師 / Fanny
最近使用CSS作網頁設計排版時,發現 [ CSS的命名 ] 也是重要的一環,因為雖然說CSS是方便管理的,但如果遇到了要修改同事們撰寫的CSS程式碼,通常還是得要仔細的研究一番,才能夠瞭解其架構,進而去作修改,所以參考了一些文章,讓一些基本的CSS命名有個標準,如果同事們有需要去修改自已所寫的CSS或他們需要作參考時,也比較有個依據,不需要花太多的時間在理解命名上,而下面就是常用的CSS命名規則: 頂部:header 內容:content/container 尾部:footer 選單:nav/navigation 側欄:sidebar 欄目:column 頁面控制整體佈局寬度:wrapper 主要區域(通常為頁面主要內容部份):primary 次要區域(通常為次選單):secondary 相信在撰寫CSS的同時,如果團隊們對於命名都有基本的默契,那麼使用CSS來作排版,對於修改及維護都能更有效率!   Posted by 視覺設計師 / 小P
網頁設計一門專業的成立其實需要眾多人員的分工合作才能成就一個完整而實用的網站,[ 製作網站除了找尋委託專業的網頁設計公司、將製作與設計交由專業人員執行之外,自己企業本身也應於先前對自己企業本身的網站內容有所規劃與準備 ]。 例如我的企業網站內容中,我想呈現的內文資訊有哪些?我想表達給使用者的網頁主調為何?我想讓使用者接收到的訊息有哪些? 這些 重要的內容,並非網頁製作人員可以擅自揣摩擬想,而是要交由企業主本身有完善的規劃及資料的準備,才能和網頁製作人員配合之下,將設計與資訊內容互相搭配,發揮到網頁傳遞資訊的最大效果。 一般而言,企業主可以在有想製作網頁的構想之前,先行分析我的企業客戶族群為何?市場區隔在哪?理想中的視覺風格?網站上的程式功能? 並準備好要放在網頁內容中的文稿、圖片、甚至規劃網頁上欲呈現的資訊區塊等等,當這些案前準備工作越趨完善,一個網站的體質構成就越趨完整,充足的分析資料,亦可幫助網頁設計人員對網站的設計達到更精確的客戶取向。 依據一般經驗來看,[ 業界案主在進行網站製作委託之前,通常卻也對自己企業體本身意欲網路資訊化的資料準備不足,造成日後網站製作過程的事倍功半 ],對於要如何將自己企業本身與網站設計兩種不同領域的連結的事前準備,企業案主們需要跟網頁設計人員有更多的溝通與事前協商。   Posted by 視覺設計師 / One
目前因網路的發達,網頁設計與網站製作也越來越重要。一個網站成功與否,往往關係到企業競爭力與企業形象,尤其是Web2.0的時代來臨,網站製作便亦驅重要。但在製作網站的過程中有許多步驟,雖看似不重要,但卻對網站有著相當大的影響力。   一、無法連結:網頁連結錯誤或失敗的現象,容易造成使用者使用上之不便,因此在網站製作上,良好的網站必須要小心查對與維護。 二、標題不明確:在設計網頁時,每一頁都應有明確的標題 ,這不僅能提供使用者能快速了解此網頁之功能,且對SEO有相當大的幫助,因此在網頁設計時就應小心規劃網頁標題。 三、過於花俏:雖然網頁的美觀非常重要,但過度大量使用java、flash、花俏圖片等裝飾的話,勢必會影響到整個網頁傳輸之資料,甚至會造成使用者當機,而抱怨不已。因此在網頁製作時,在圖片與特效上需清楚拿捏。 四、版型不統一:若每頁都使用不同的底圖、版型、裝飾圖...等,不但會造成整體不一致,也會浪費使用者下載時間。 五、網頁檔案過大:雖目前網路頻寬已大幅提升,光纖時代的來臨更代表著網路速度的快速,但大部份的使用者卻有可能還使用著撥接系統,因此除非必要,每頁容量盡可能控制在30kb左右,因為使用者在點選連接時,有可能因等待時間過長而放棄觀看此網頁。 六、視窗過多:連結選項中,若點選後是開立新視窗的話,對於使用者是非常不便的,過多的視窗容易造成使用者的混亂,因為在網頁設計中除非必要,盡可能避免大量使用跳出或開立新的視窗。 七、單一版本:不論使用任何語法或程式編寫網頁時,應盡可能讓所有不同瀏覽器或版本之使用者都能觀看 ,限制使用者的觀看條件,其後果就是:減少您的網站造訪率。因此在網頁製作時,便須考慮到各種不同瀏覽器或版本是否可觀看。 八、規畫不當:網站設計時,每一頁的設計、進出動線及使用機能都會直接影響到使用者在使用此網站的第一印象。因此,如何恰當的設計網頁便是一個非常重要的課題。 九、標註不明:當網頁提供檔案給使用者下載之外,一定要說明此檔案之基本資料,在使用圖片上,也可在語法上加註圖片說明,以利使用者了解此檔案或圖片之功用。 十、胡亂抄襲:參觀別人網站設計技巧是增進自我設計功力的方法之一、但若是一昧的抄襲、模仿,不但侵犯原作者的權益,更無法為自已帶來真正的成就。   Posted by 程式設計師 / flarne
很多網頁設計師都有共同的問題:表格用得好好的,為什麼要改用CSS編寫??尤其是從平面設計轉成網頁設計的人來說,原本Photoshop繪圖,ImageReady排版輸出然後由Dreamweaver調整HTML,css的語法可說是許多人的夢靨。 CSS是Cascading Style Sheets的縮寫,中文可以簡單稱為「樣式表」,由W3C所制定的。CSS的進化由第一級:用於 HTML 網頁中,可取代傳統字型標籤和其他「樣式」標記(ex:背景顏色、文字顏色大小、邊界...等等),一直到W3C 批准了 CSS 第二級,除了在第一級的規範裡增加了更多功能之外,同時也出現了定位的屬性。而這些屬性也取代了被氾濫使用的table標籤。 以上的敘述還是無法充分的解釋css的優點,以一般人的想法來說,用表格所顯示的效果與css幾乎相同,而css又因不同的瀏覽器支援度而有所差異,可以用表格輕鬆達到的效果何樂而不為??以下列出幾個css的優點,再由您來判定哪一種方式是真正最適合用於網頁設計的的編法,也許您會對css有所改觀。 ‧比較兩種不同寫法的HTML原始碼,表格的原碼數量勢必比css多出許多。 ‧更新、改版更容易。表格設計是死的,css設計是活的,設計好的表格版型     因原始碼的複雜,很難再改變。再者,您可一次更新網站的相同內容,而不     需要每個頁面分別修改。ex:假設,想要把原本標題靠右的文字內容改為置中     ,只需修改css即可。 ‧CSS能讓我們更輕易的修改整個網站的設計風格。大多數的網站不會希望網     站樣貌是同一個樣子,使用久了總會看膩,這時若採用表格設計網頁,勢必     要因為新的版面風格而重新製作表格欄位,反之,css所設計的版面,只需     要修改CSS文字樣式即可。 ‧CSS的編寫照顧到弱勢族群。盲人專用的瀏覽器(語音或點字瀏覽器),可將     不必要的顯示效果拿掉,而將最重要的內容優先顯示,借此能讓盲人立即掌     握到最重要的資訊,這樣是這幾年最流行的無障礙網頁設計。 ‧網站設計除了整體外觀漂亮之外,還須考量到seo,使自己的網站能在各大     搜尋引擎容易被找到。CSS的設計有助於SEO讓搜尋機器人更加輕易辨識網     頁內容。 綜合以上CSS的優點,您是否也對CSS用來設計版面有了新的看法?當然剛開始使用CSS設計排版對許多網頁設計師是一項艱鉅的挑戰,同樣一個版面,也許用表格編排只需花上半天的時間,用CSS排版卻要用掉三天的工作天,但,一旦掌握其中的道理與規則,相信您也會對CSS愛不釋手。 Posted by 視覺設計師 / Fanny 
什麼是好的「網頁設計」? 這個問題從很久以前就存在到現在,以客戶來說,會被他們賺錢就是好網站,對設計來說,能發揮最大的設計創意就是好設計 每方都有自己認為好網頁的原因與理由,其實不論網站做的再好,總有人批評,網站做的再差,就是有人喜歡那種風格 但以平均值來說,好的網頁設計,還是有他好的地方與可以提供一個比較大眾化的準則。 以網站最基本最基本的原理來說,撇開 視覺設計與程式設計的好壞,以及網站內容如何豐富,最直接的就是"流量" 流量不高,設計了一個100萬的網站放網頁上,也不會有任何效果,但是另一種思考是,以知名廠商的網站來說 他們不在乎流量,而一定要有一定品質的網頁設計效果,這又是另外一種好的網頁設計: 總而言之,好的有網頁設計定義實在太多種,看是要以賺錢為主,還是以打形象為主,最適當的應該是"符合當前最大利益與效益" 的網站,應該就是好的網頁設計。 以剛成立的網站來說,"流量"就是最基本的需求,以老字號公司來說,"形象"就是一種無形的資產,但是可以轉化成消費者對 產品的印象,因此 [ 如何符合客戶當前的需求與行銷手法 ] 再某些程度上,可以算是一個好的網頁設計。 Posted by 網頁設計師 / Asen
最近這幾年正好是網頁設計由table走向css的一個過渡時期,其實很多設計包括我自已一開始都會覺得css是非常麻煩的,有的時候為了解決某個瀏覽器的一個小bug,往往花上半天到一天的時間,而雖然書上總是說的很容易,但在實作的時候也總是會碰到很多問題,所以很多設計都會直接跟我說”用table就好啦!”或是”table萬歲!” 可是因為在許多css的書籍及網站都宣揚許多使用css的好處,所以雖然一開始花了很多時間在研究,後來真的也漸漸發現了使用css及table的差異,和它的好處: 1.原始碼整個乾淨了許多,沒有那些多餘了tr,td, [  原始碼瞬間瘦身成功  ] 2.由於原始碼變得整齊,而且標籤也具有意義,所以在修改的時候變得更容易, [  更好管理  ] ,不需要盲目的尋找不具意義的標籤,一個一個作修改,節省了許多時間 3.網站檔案變小後,當然 [  load網頁的速度也加快了許多  ] 4.有意義的標籤如title、h1、h2,使得搜尋引擊更容易去判斷此網站的內容及關鍵字為何,進而 [  提升網站的排名  ] 『 當然使用css還有許多優點是我所沒有提到的,但是我覺得基於上面四項好處,我們就應該儘量的由table轉向css,致力研究更多css的用法,讓我們的客戶擁有更通用、更優化的一個網站。』 Posted by 視覺設計師 / 小P