你的工具箱!15款新鮮出爐的實用網頁設計工具 - 優設網 - UISDC

你的工具箱!15款新鮮出爐的實用網頁設計工具

2015/09/14 14997評論區

fresh-resources-developers-september-2015-1

在信息爆炸的今天,設計師要通過網絡尋找設計素材和工具是一件簡單的事情,相應的,要找到真正可靠且素質優秀的素材,也越發的不容易。在海量的網站中尋找一個符合需求的素材,花費在搜索和篩選上的時間也越來越長。這種情況使得今天這樣的設計工具/素材推薦類的文章與合集顯得更有意義,也彌足珍貴。

由于網頁設計師和開發者之間的界限越來越模糊,兩者所用的工具和素材的交叉重疊的情況也非常普遍。今天所推薦的這15項全新的工具/素材里,應該有很多都值得網頁設計從業者們收入囊中。這當中涵蓋了設計類應用、框架、分析工具、柵格系統等多種類別,單把它們放到一起,就足以組成一個網頁設計師的日常用工具合集了。接下來我們具體看看這些新工具能幫你做哪些事情。

1. Frontify

frontify

Frontify 可以讓你在5分鐘內創建一套漂亮而完備的風格指南!這個在線工具有趣而簡單,讓你維護品牌風格和樣式快速而方便。由于Frontify 優秀的用戶體驗設計,你可以很快上手,即使你有專業的需求,Frontify 的說明文檔也可以引導你實現一些更細致更專業的東西。

2. Flarum

flarum

Flarum 是一套簡約易用的開源論壇系統。如果你需要一個相對簡單的論壇網站的話,可以考慮Flarum,它界面簡單且可以快速上手,讓你更多的專注于話題討論。Flarum的論壇頁面滾動加載流暢,無需等待頁面加載。

3. Lightning Design Systems

Lightning-Design-System

這個名為閃電設計系統的工具專注于構建體驗優秀的企業級APP。在這套系統的支持之下,你可以快速地對整個界面進行深度定制,保持整個界面保持高度的一致性而無需讓工程師在此耗費更多精力,你所需要做的就是下載那些無平臺限制的CSS框架,然后開工就可以了。你可以參考這套系統的詳細說明作出符合SalesForce生態的優質APP,輕松地調用SalesForce的核心視覺組件和交互模式,拿出最佳的方案。

4. Rucksack

rucksack

Rucksack 是一款有趣的CSS工具,讓CSS的開發過程更加有趣了。Rucksack 是基于PostCSS構建的,模塊化設計,沒有冗余,運行起來飛快。將Rucksack融入到你的開發流程是很簡單的,Rucksack對絕大多數的工具都有相應的插件。由于它是基于PostCSS來構建的,所以它同其他的CSS處理工具都能很好的兼容,甚至能夠同Stylus直接協同。

5. GridLayout

gridlayout

GridLayout是一款輕量級的柵格系統,用以制作水平滾動或者垂直滾動的Web應用,并且能夠兼容舊版的瀏覽器。如果你需要創建復雜的布局,并且需要對舊版的瀏覽器進行兼容,選擇GridLayout是很不錯的。這套工具涵蓋了1KB大小的CSS文件和大概0.5KB的JS文件,如果你只需要支持更為現代的瀏覽器,最好不要使用Flexbox。這個工具是基于MIT的協議來分發的。

6. Bonsai

bonsai

Bonsai 是一款為自由設計師所準備的工具,用來創建、簽署和存儲工作合同的工具,并且可以協助付款、托管。目前這個簽署協議的模塊已經完善并且發布了,而支付和托管的部分還處于內測階段?,F在Bonsai對于專業的設計人員的工作合同簽署的支持已經做的很不錯了,尤其是支付方式的規定、知識產權保護等環節。

7. Apostrophe

apostorphe

Apostrophe 是一款設計驅動下、基于Node.js 和MongoDB的內容管理系統。這套CMS為你提供了靈活的工具,你可以以此為基礎設計內容向的網站,不論是簡約風還是繁復的結構都可以輕松Hold住。這套系統的開發者相信,內容編輯應該是簡單而易用的,也就是在這想法的驅動下Apostrophe的編輯體驗設計的非常容易上手,網站編輯也可以輕松掌控網站內容。

8. Grid.Guide

gridguide1

Big Bite 的員工發現計算柵格的寬度是一件非常惱人的事情,尤其是在嵌套結構下。正是在這種需求的驅動下,他們發明了這款Grid.Guide工具。這款工具會根據最大寬度和列數來幫你計算可能的排列組合,生成對應的PNG文件,讓你可以直接托拽到相應的工具中使用。更重要的是,Grid.Guide是完全免費的!

9. Quantity Queries

QQ-Quantity-Queries-Builder

Quantity Queries 是一款幫你進行數量查詢的工具。

10. Timber

timber

Shopify Timber 是一款前端框架,用于快速便捷地構建Shopify主題。其實從廣泛意義上來說這是一款可以廣泛應用的主題制作工具,并不全限制于在Shopify中運用。不論是經驗豐富的設計師和前端還是新手都可以靈活運用,其中包含了模板、標記、模塊和CSS框架,根據你的需求調用就好了。

11. Now UI Kit

volunteer

InVision所提供的這套Now UI Kit 是一套堪稱完美的跨平臺UIKit,可以用于網頁設計、平板和手機的界面,當然,最重要的是它是免費的。其中包含了52個完整的設計模板、35款可以自定義的圖標以及可以運用在各種界面中超過180個UI組件。

12. Unsplash

Unsplash-It1

我們其實已經不是第一次推薦Unsplash.it ,它是用于網頁中的圖片占位符,其中所用的圖片是來自于網站Unspalsh.com,這個網站提供了許多高品質的圖片,這也使得Unsplash.it的效果非常不錯。

13. Gitup

GitUp

Gitup 是一款為Git所準備的圖形化客戶端。在Gitup的協助下你可以便捷的提交、創建新的分支、合并等等等等。Gitup 賦予了Git全新的交互方式,讓代碼管理更加迅速、安全、無痛。

14. Color Hunt

color-hunt

ColorHunt 包含了一系列漂亮炫酷的色彩組合,網站會每天更新配色方案,并且根據瀏覽數排列出最漂亮的配色方案。

15. TinyCon

tinycon

TinyCon 是一款管理Favicon 的庫,借助它可以方便地管理Favicon和彈出框。

【往期設計圈干貨合集】

一月干貨合集:《干貨駕到!2015年一月設計圈干貨大合集》
二月干貨合集:《來收最新干貨!二月份免費設計資源+實用工具大合集!》
三月干貨合集:《月底福利!三月設計圈干貨大合集第一波》
四月干貨合集:《四月福利!30+酷炫實用的免費APP設計模板》
五月干貨合集:《有好貨!五月必收的優質設計資源干貨大合集》
六月干貨合集:《假期福利!六月設計圈高品質干貨大合集》
七月干貨合集:《七月干貨!幫你發掘高素質圖標的50個優質網站》
八月干貨合集:《不要錯過!姍姍來遲的八月設計圈干貨大合集》

原文地址:codegeekz
優設譯者:@陳子木

「子木說」

最近關于設計師職業思考的文章很多。是的,設計師是孤獨的,不被理解不被尊重沒有決策權,在愚蠢的要求中,你獨自對抗著這個不公平的世界。但是其他的職業又何嘗不是如此呢?這個時代需要好設計,大眾對于設計的認知度越來越高,好設計的價值也越來越明顯。時代會淘汰坑人的PM,逐步系統化的設計行業會逐步杜絕不公平的狀況,如果你熱愛設計,堅持下去。

本文由優設網原創翻譯,請尊重版權和譯者成果,轉摘請附上優設鏈接,違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網uisdc.com“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量100萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://www.huangtengdz.com/fresh-resources-developers-september-2015

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

設計圈干貨 界面設計 排版布局 版式設計 職場 優設專訪 優設大課堂 設計達人 設計師干貨 web前端開發 配色 視覺設計 素材下載 AI教程 設計理論 設計流程 神器下載 字體下載 設計師專訪 psd下載 海報設計 設計規范 設計趨勢 用戶體驗設計 動效設計 logo設計 平面設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里

免费观看日本阿v