文章專區

網頁設計相關文章

   19.Template Monster http://www.templatemonster.com/    Template Monster是全球知名的版型套用網站,版型應有盡有,分類也相當詳細,每個範本內容提供完整,包括PSD、字型等原始檔案。也可以對每件作品評分並加入收藏。   20.Duda https://www.dudamobile.com/responsive-website/templates   Duda是一款為專家與小企業服務的網站建立平台,網頁設計簡單明亮,提供的版型有企業、餐廳、一頁式等多項類別,也能以顏色作搜尋。       21.Jimdo http://www.jimdo.com/templates/   Jimdo是自助建站服務,讓不懂網頁的人也能輕鬆建立屬於他的個人網站,高品質的作品對於設計師來說也是啟發靈感的優良來源。網站上方以醒目的精美大圖搭配,類別有商店、企業、個人網頁等等。
 16.Squarespace http://www.squarespace.com/templates/   Squarespace是熱門的自助建站系統,版型設計都相當漂亮有質感,若有喜歡的可以點作品名前的愛心圖樣,會收集於左側欄的My Favorites裡,每個作品都有提供在不同的尺寸下的展示效果可供預覽。除了網頁版型以外,還提供許多樣式的平面圖樣讓你可以線上快速設計LOGO。   17.One Page Love https://onepagelove.com/templates/free-templates 作品以大量豐富的一頁式網頁設計為主,網站以灰為底色,各版型會標明免費跟需付費的價格,分類多樣化。   18.SF http://www.strangefruits.nl/   SF art&design portal是阿姆斯特丹一家網站工作室創立的網頁設計網站,整體版面乾淨俐落,可以用樣式、顏色、國家等類別來搜尋。
13.Creative Market https://creativemarket.com/templates/websites/popular Creative Market是一個提供設計資源的線上販售平台,每周會提供六個素材免費下載,除了網頁版型以外,還有其他如icon、照片、字型、筆刷、圖樣等素材,分類多元而豐富,不管是參考設計樣式還是付費使用素材都很方便。   14.CSS Clip http://cssclip.com/  CSS Clip網站的版面相比其他網站較為陽春,較特別的是網頁設計作品排版是以直排為主,有點類似pinterest,以彩度低的藍為底色,給予人沉穩印象,左方的色環可以自由選擇欲搜尋的網頁色調,相當便利。   15.Css Design Awards http://www.cssdesignawards.com/wotd-award-winners  Css Design Awards是網頁設計競賽平台,網站導覽列以黃紫強烈對比色作搭配,整體搶眼有力,評分項目有「創意與設計」、「程式與功能」、「可用性與內容」三大類。
10.Awwwards http://www.awwwards.com/websites/responsive-design/ Awwwards是一個內容豐富且十分知名的網頁設計線上評分平台,會邀請來自世界各地專業的設計師們組成評審團,對網站作品進行共同評分,因此經過評分的網站設計是相當具有參考價值的。   11.Web Design Clip http://www.webdesignclip.com/ 日本的網頁設計網站,以淺灰為底色,搜尋種類繁多,特別的是有以主色調、副色調、layout為主的類別,點進該網站截圖即可前往該網站或可選擇看詳細資料。右欄另有以各主題蒐集的網頁設計作品,以及介紹設計上好用的CSS等資料,非常方便。   12.CSS Drive http://www.cssdrive.com/ CSS Drive是一個色版產生器的網站,會分析各網站或圖片並製作出一個調色板,只要一滑到該網站截圖便會出現用色表,設計師可以藉由這些網站的用色啟發配色靈感。另外還提供了壓縮CSS的功能,使得寫出來的CSS更簡潔,是相當好用的工具。
 一般人並不會太注意網址開頭的http與https差異,甚至您會發現在Google瀏覽器Chrome上,網址連結為http開頭的網址還會將您自動縮寫,直接顯示http//後的連結網址。   但在網址連結上HTTP與TTPS的差別不單單只是1個英文字S的差異,這僅一個字母S的差別卻代表了網站使用編碼協定的安全性(secure),http://跟https://之間的不同在於網路文字傳送協定中標準的不同,您可以在Google瀏覽器Chrome上瞭解,在網址欄位上連結為https開始的網址會多顯示"安全"標示,讓您簡單的瞭解網站對於使用者的友善性。    http是網頁與您的電腦瀏覽器直接透過明文進行傳輸,以一般(非安全)模式下進行互動交談,所以在網際網路上內容有可能遭攔有心人士截竊聽的,HTTP協定不使用加密協定,其中原因包含:加密會多消耗許多運算資源,也會佔用更多的傳輸頻寬,而緩存機制跟著會失效。 反觀HTTPS協定,以保密為前提為研發,可以算是HTTP的進階安全版。是以加入SSL協定作為 安全憑證,因此網站透過協定上的加密機制後能夠防止資料竊取者就算攔截到了傳輸資訊卻也無法直接看到傳輸中的資料,也因此較大型有串聯金融信用機制會使用到較敏感度資料的企業網站多會選擇使用HTTPS協定,提供保障客戶在網站上的使用資訊。   現今隨著網路資訊的發達,技術資訊越來越透明,反觀卻增進了許多有心人士的好奇心,因此http的開放明文顯得在網際網路中,不再是這麼安全的傳送協定,所以也建議有建立會員、購物車、金流、刷卡機制服務的網站選擇使用HTTPS的傳送協定,如果對於這方面有興趣與疑問的情況下,歡迎大家使用聯絡我們與我們聯繫,將再詳細進解說。  
 7.Shopify https://themes.shopify.com/?price=&sortby=date+desc Shopify是相當著名的電子商務平台網站,操作容易且快速的開店系統,加上提供了千變萬化的網頁設計範本,為賣家打造具有完整功能且設計美觀的電子商店,設計師可從中學習到購物網站的視覺設計元素與編排,例如高質感照片的使用與適當的排版留白等等。   8. W-Finder http://w-finder.com/ 日本的網頁設計網站,右欄排滿各式各樣的作品截圖,只要一點擊便可直接進入該網站,截圖右下角置有愛心圖示,若喜歡該作品的話可點擊收藏,收藏的作品會集中於左欄的「favorite」中。搜尋分有「種類」、「產業」、「風格」、「顏色」四大類。   9. 品網 http://bbs.blueidea.com/pages.php   中國大陸的網頁設計網站,由於該網站使用的是簡體中文,相較於其他眾多外國網站,對我們而言,在閱讀和搜尋方面親切易懂許多。搜尋類別以內容、技術、顏色、國家為主。  
 4.Best Web Gallery http://bestwebgallery.com/ 網站以黑底白字作搭配,讓觀者可以很舒服地瀏覽,精緻的花紋壓底加上簡單大方的排版,使得整體的視覺設計上相當有質感,選單種類除了「TOP10」與「Best of」以外,另有UI設計等等。   5. IEESAI http://www.ikesai.com/  收集日本最新網頁設計作品的網站,分類主要是以產業、配色等作依據,每個網頁會用小型縮圖的形式以方便瀏覽,風格十分多元化。   6. Css Winner http://www.csswinner.com/ 此網站是評選全球最佳網頁設計作品的競賽平台,每個作品右邊都有各項目的評分,分為「DESIGN」、「FUNCTIONALITY」、「USABILITY」、「CONTENT」等項目,每個月都會評選出優秀的CSS網站作品,使用介面乾淨明瞭。
1.Free Template http://www.freewebsitetemplates.com/  此網站提供超過百種的免費網站設計,也有許多版型可以下載,還貼心地提供PSD原始檔,適合初學者練習切版等基本功。排版偏簡潔俐落,並使用豐富照片搭配為主。   2.WIX http://www.wix.com/website/templates/html/most-popular  WIX提供上百種免費模版和圖庫可供使用,就算不會網站設計也可輕鬆架設網站,風格已分類好可供選擇,使用上十分方便,風格相當多樣化,設計師也可多做參考。   3.WEBデザインリンク集 http://gooddesignweb.com/  介紹許多日本當地優秀的網頁設計作品,特別的是選單上包括網站主顏色、子顏色、排版版型等等,豐富並清楚明瞭的Tag和種類讓搜尋上更便利。  
 1.什麼是網頁設計         網頁就像是一個傳達訊息的頁面,裡面有眾多的連結組合而成變成了一個網站,而一個好的網站除了內容傳達之外,首頁是是給瀏覽者的第一印象,這時候就需要網頁設計師,利用CSS(Cascading Style Sheets,稱階層樣式表)語法加上JavaScript(直譯式語言,幫助HTML增加網頁動態效果)特效,或是當紅的CSS3技術,目的不外乎就是為了吸引使用者的目光。     隨著智慧型手機的普及以及近年來Google越來越重視手持式手機上的視覺效果,都會提到這個回應式網頁(Responsive Web Design),又稱響應式網頁設計,簡稱RWD,這是一項2014的網頁開發技術,利用CSS3技術,將畫面分割為百分比及有彈性的畫面縮放,可在不同解析度的瀏覽下呈現不一樣的排版效果,能讓不同的手機系統(Android、IOS)可以正常的瀏覽網站,提供最佳化的視覺效果。   2.什麼是資料庫 想像一下,如果書是資料,那麼存放書的圖書館就是資料庫,透過索引、排序、計算、查詢等方法來有效的管理,將數據轉成有用的資料。而維護它的就是資料庫管理系統,是使用者與資料庫之間的操作介面,而SQL指令就是用來處理關連式資料表的標準程式語言,與市面上的MySQL、Access和Oracel的資料有著類似的共通語法,主要幫助使用者更有效的操作資料庫,維護資料庫完整性與安全。     3.程式與設計的結合         一個好的網站上線之後,也必須要維護它,而如何更有效的維護這就是程式設計師的工作,利用程式語言(ASP、PHP、JSP、ASP.NET)與資料庫(MSSQL、MYSQL、Oracle)的結合做出電子商務、購物車、會員管理、ERP、線上金流、報表輸出等功能的網站之後,網站管理員不用在使用傳統的方法一頁一頁編輯網頁內容這種沒有效率的作法,而是撰寫出一套後台管理系統給網站管理員維護,算是一個網站成型的前置作業,而操作上也必須很好上手,能夠快速有效的管理整個網站。  
 隨著科技越來越進步,各個瀏覽器不斷的更新及多元,各種設計花樣也越來越多,利用css3以及javascript讓使用者與平台達到互動的效果,故在頁面的設計便會有幾種做法來達到視覺上的呈現。   一、RWD響應式網頁取代一般傳統手機版網頁 RWD網頁開發成本較低,做一個版型可適用任何寬度的瀏覽裝置,在設計視覺上也較容易保持原網站的形象完整性,在後台的維護以及管理上也較為方便,SEO上RWD網站也比一般網站更能被搜尋到,在google 搜尋規則中已被證實。   二、使用大圖片取代過多的文字內容 手機越來越發達的情況,讓人們在使用手機時,是一種視覺上的享受,而不是過多的文字內容,使用一張好看的圖片勝過滿滿的文字,網頁設計師更能在圖片與文字做調整,而不是只有單純的文案排版。     三、字體的大小使用 一般網頁所使用字體大小最小可以到12px,但近幾年來網路發達,各個年齡層皆具有使用者,為了讓各個使用者都能舒服的瀏覽網頁,在字體上就會較為大些,但在標題以及內文上,還是需要以圖示及顏色做區隔。     四、google web  font使用 在還沒安裝任何字體時,網頁文字都是使用基本的系統文字,近幾年google提供了許多遠端字體的服務,網頁設計師們也能透過此服務將設計的網頁更具美感又不受限,目前英文字體已經是相當多選擇的,相信在未來中文的選擇上也能夠佔一席之地。  五、滾動代替點擊 隨著智慧型手機越來越發達,人們的習慣已不是傳統點擊而是用手指平滑的方式瀏覽網頁,故在頁面的設計上已開始朝一頁式網頁發展,而不是過多的按鈕點擊進入,手機版網頁不像桌機版網頁容易找到連結的地方,因此容易造成觀看手機版網頁迷路的情況,進而關閉網頁造成網站跳出率高的情況,如何設計方便瀏覽的網頁需要設計師們深思熟慮過。   六、適當的留白空間 在設計網頁時常常遇到客戶覺得空白處太空,須將版面放得滿滿才不會浪費,有時空白處能將網頁的定位更為清楚,客戶們也能從中找到他們想要的東西,之後在維護上也好做調整較彈性。     設計師在針對每個客戶網站做設計時,須將自己扮演成客戶,當需要某件產品時,自己會希望該公司網頁是怎樣呈現才能方便瀏覽,這是在做好任何網頁時所必須面臨的重要課題。