最近一段時間,引導型設計在網站設計中簡單而粗暴的引起了一陣關注。總是會有人持懷疑態度,但總體上,這種設計風格已取得了圓滿的成功,你可以時常在GitHub的作品展示列表中看到這種類型風格的設計。
隨著引導型設計的知名度的不斷提升,界面設計可開發界已經提出了大量的相關資源。今天,我們收集了一些你可能會用到或可以激發你的靈感的一些作品案例。從入門開始,到網站設計工具和自定義的基礎,這對熱衷于這種設計風格的人員來說應該能夠起到一定的幫助作用。
1.Start Bootstrap
Start Bootstrap是一個全功能的平臺,可以為幾乎所有類型的主題提供預先設計的免費和優質的HTML模板內置的引導。
該網站提供了包括免費制作的網頁設計,個人簡歷網站,投資組合和更多的預制模板。還有許多可以快速啟動的模板布局,你可以通過下載來快速啟動你的網站設計項目。
此外,Start Bootstrap內置大量的引導資源,其中包含了與各種引導類型相關的資源鏈接,如插件、可視化構建器、框架集成等。
2.CodyHouse
CodyHouse是一個免費的網絡組件,包括HTML、CSS和JavaScript插件庫。該庫包括設計精美的超大菜單、組合模板、支付集成、動畫效果、視頻模板和其他插件。
你可以下載這些插件和模板,以方便地集成到你自己的引導型網站設計中,集成各種功能,并且這些都是免費的。
3.Bootsnipp
這是另一個提供大量HTML和CSS資源和插件的平臺。Bootsnipp專業性基于這個平臺的功能代碼和插件是由專業的網站開發人員和設計人員創建的。
Bootsnipp包括幾乎所有類型的代碼和模板,使你的網站在開發過程變得更容易,包括模板設計,按鈕,進度條和更多。
你可以作為注冊用戶加入該平臺,也可以創建自己的資源集合。Bootsnipp還包括資源用于其他HTML框架,如基礎和語義UI等。
4.Codrops
Codrops是一個專門用于分享相關教程和圖紙的博客,教你如何創建獨特的模板和HTML以及CSS元素。這個博客的優點是除了讓你免費下載模板和插件之外,它還將詳細描述每個模板是如何創建的,以及如何根據自己的喜好定制它們。
Codrops的資源中包括了大量的圖紙、模板和插件,以及可以進行整合與引導的組合部分,如幻燈片,視頻背景,動畫等等。
5.Shards
Shards是一個視覺現代化的、簡約的UI工具包,內置的引導設計令人驚嘆,并且在響應性上做到了極致。
使用此UI工具包時,你不必通過編寫代碼來架構任何引導元素,如按鈕和菜單。UI工具包將為你自動處理所有這些問題。
6.Bootswatch
這個站點提供了一個定制框架的自定義主題集合,有多種不同的配色方案和設計。
該列表提供的引導主題包括了空間主題、材料設計主題、平面設計主題、深色主題等。你可以下載并使用這些主題來定制你的引導設計的外觀和感覺,而不必重新通過編輯代碼里完成這一操作。
7.Fontello
Fontello是一個漂亮的圖標字體生成器,可以讓你從幾個流行的字體圖標包瀏覽大量的圖標,包括Font Awesome,Typicons,Brandico等。
圖標字體在最近的網站設計中得到了廣泛的應用。你可以使用Fontello搜索功能快速找到字體包以及你搜索相關的圖標,并且可以調整圖標大小,并下載圖標字體用于你的引導設計。
8.Fuel UX
Fuel UX是大多數高級網頁設計師用于更復雜的輕量級JavaScript以便來增強Bootstrap的框架。它改進了擴展功能的引導,并使你對框架定制有更多的控制權。Fuel UX是Salesforce的營銷云的那一部分。
總結
你是如何設計你的引導并在功能上強化它們的呢?
既然你已經看到了我們所推薦的引導資源列表,我們想聽聽你的意見。告訴我們你在這個過程中加入了什么第三方資源以便更好的提高用戶體驗以及視覺設計感。