专业建站——省时、省心、省钱

网页设计师应该火速收藏的10款优质工具

2015-02-26 11:50:58    关注:

我们从过去数周出现的网页设计工具中精选了几款最优秀的工具。

 

人们常常会说,新的一年,要有新的工具。这话不无道理。因此我们从过去几周出现的新工具中精选了几款特别适合网页设计师的优质工具。

 

它们的类型十分广泛,涵盖了Material Design,SVG,网页扩展应用,线上交流,色板搭配,背景创建,UI元素等许多不同的方面。我们相信这些工具中,总有一款能让你的设计工作变得更简单,更有效率。现在就来试试吧!

 

01.Material Palette

 

 

网页设计师应该火速收藏的10款优质工具
                                           只需点击几下,设计师就能利用这款工具创建出适用于 Material Design的调色板。

 

 

去年设计圈内的一件大事就是谷歌推出了Material Design,它打破了网页设计在桌面端,平面和移动设备之间的界限。你可以在这里here查看Material Design通用设计指引。


Material Palette就是一款让设计师创建Material风格的调色板的工具。设计师只需选取两种基本色彩和适当工具以确定主要文本,次级文本,分隔符及强调色的色彩即可。

 

为了更具体地说明以这种方式创建的调色板的外观,我们也提供了一个示范样本,它能以CSS, SASS, LESS, SVG, XML和PNG等形式供用户下载。它的创建者是Matt Aussaguel也是Material Up网站的创建者。

 

02.Pilgrim*

 

 

网页设计师应该火速收藏的10款优质工具
                                                            设计师们可以在这款精心设计的软件上实现即时的匿名交流。

 


作为首选的交流工具,IRC一直受到开发者的追捧。但设计师要求的还要更简单些。你可以把Pilgrim*看成是一款更美观,更简洁的IRC工具。

 

无论是模拟文字编辑器的界面,还是令人愉悦的排版和色彩都显示出设计者的用心,当输入文字时,它发出的声效也很有未来感。

 

整个软件的设计十分精美,无怪乎设计师们对 Pilgrim*十分着迷。但它最大的优势是可以随心所欲地选择一个频道与其他设计师即时交流,而无需事先安装或登录。你只需要打开pilgrim.io网站,选择一个频道并将这个网址分享给他人就可以开始使用。

它的开发者Murat Pak对我们说,由于使用起来极其方便,目前已经有一些设计工作室把Pilgim* 用作主要的内部交流工具。“我当初并没有想到设计机构会对它有多大兴趣,但似乎它作为确实很适合作为Slack或者Skype这类软件的替代品。”

Pak也认为Pilgrim*引发了某些有趣的社交倾向:  有些频道的主题就是“有点无聊”或“来聊天吧”。这些频道的创建者并且会它们放在社交网络上与人分享。

 

因此,访问这些频道的人自然也可以访问他的社交网站,并可能因此与他建立联系(成为粉丝或朋友)。这种交流方式也让用户彼此可以超越现实中的某些差异自由交流。

 

Pak召集了一个团队来从事Pilgrim*的后续开发,他们的下一步目标是为Pilgrim*增加保留历史对话记录的功能。

 

03.Progressbar.js

网页设计师应该火速收藏的10款优质工具

这款工具由Kimmo Brunfeldt设计,可供用户做出SVG路径的动画进度条。 它产生的进度条是响应式的,可用于包括IE9+在内的所有主流浏览器。用户也可以创建自定义路径,图形或动画风格。这款工具做出的动画一般是基于JavaScript,这样可以让用户更好地控制它,适应的浏览器也更为广泛。Jake Archibald也在一篇文章here中探讨了动画线条的绘制方法。demo page这里展示了一些用这款工具得到的一些进度条示例。

 

04.CSS Gradient Animator

 

 

网页设计师应该火速收藏的10款优质工具
 

 

Ian Forest开发的这款优秀的CSS渐变背景生成器只需点击几下,就能生成非常漂亮的渐变色背景。用户只需要输入角度,动画速度和色彩,这款工具就能产生制作背景所必需的CSS代码。最终用户会得到一个色彩柔和的渐变背景,非常适用于网站中。用户可以直接将代码从屏幕上复制下来,也可以以Gist形式保存。

 

05.snabbt.js

 

 

网页设计师应该火速收藏的10款优质工具
snabbt.js是一款快速制作动画的软件
 

 

这款软件刚问世不久,目前还处于测试阶段,但之后必定会受到欢迎:Daniel Lundin想把自己开发的这款软件打造成一个高效而简约的动画资源库。他提供的文件极小,而速度极快。动画库可压缩成小于4kb的文件,但速度可达到60fps,甚至是在移动设备上。他在snabbt.js官网的页面上写到:我们的目标是让用户不需要花太多时间了解浏览器渲染的细节,也能做出优质的动画。

 

06.Foundation for Apps

 

 

网页设计师应该火速收藏的10款优质工具
Foundation for Apps: 网页App开发的新途径

 


响应式前端框架Foundation正越来越受到设计师们的欢迎。 Foundation for Apps通过提供可用于项目的,稳定的基础代码,为开发响应式网页App的设计师省去了不少麻烦。

 Zurb网站的团队日前还推出了一个基于Flexbox的网格系统,它特别针对app设计,利用它,用户不必应对复杂的Flexbox也能做出高级的网格来。除此之外他们还开发出一套被称为Motion UI的系统,包括不同的分类和mixin。它能帮助用户更快捷地将动画添加到App中。点击这里可以了解更多细节。

07.interact.js

 

 

网页设计师应该火速收藏的10款优质工具

 

 

按Robert Nyman的话说:“interact.js是一个基于JavaScript的模块,可用来处理主流浏览器内(包括IE8)的拖动到此区域,调整大小和多点触控等操作。interact.js可以胜任大多数可以由jQuery UI处理的工作,但与jQuery UI不同的是,它可以很好地支持SVG。”


这款工具的开发者是Taye Adeyemi,它依然保持了体积小和支持多点触控的特点。这款工具的目的是为用户提供适用于不同浏览器和设备的一致数据。

 

你可以在这篇文章里读到关于这款工具的更多细节Nyman's Mozilla Hacks post。

08.deSVG

 

 

网页设计师应该火速收藏的10款优质工具
为HTML瘦身
 

 

Ben Howdle开发了这款实用的工具,用户可以利用它来将臃肿的SVG文件从HTML文件中剔除出去。  在deSVG的官网上Howdle是这么写的:“deSVG可以移除\标签。  然后它会利用AJAX抓取'src'中内嵌的原始SVG文件,并以它下载的\。  用户也可以用CSS改写SVG代码,而且即便不用JavaScript,SVG也可以被再次改写。

09.Materialize
网页设计师应该火速收藏的10款优质工具
这款反应式框架可让用户快速建立Material风格的网站
 

几位来自卡梅隆大学的学生一起开发出了这款响应式的前端框架,目的是让Material Design变得更为简单易用。Materialize目前有CSS和JavaScript, SASS三种形式的文件可供下载,也可以通过Bower安装。

它包含可供入门者使用的模板和许多不同的组件,这一切都可以让它快速地拥有Material风格。这个项目目前还在初始阶段,不过也已经具备了一系列视觉内容和对话框,下拉菜单,导航等基本元素。

10.What colour is it?

 

网页设计师应该火速收藏的10款优质工具
第二十三小时二十五分四十六秒:深沉的紫色。

 

这一刻是什么颜色?每个人都在生活中的某个时刻问过自己这个问题,这个网站知道这个问题的答案。(人类的)时间通常由代表小时,分钟和秒钟的六组数字来表示。六组数字,看起来就像十六进制的数列。这款时钟软件可以把当前的时间转换为CSS格式的色彩编码,并在网页的背景上展示。简单,但是异常精彩。 

 

设计,不仅需要非同一般的创意,更需要默默的积累与学习。设汇主义,汇聚与设计有关的一切,从行业精英的经验心得,到最实用最解渴的设计技巧,从国际前沿的设计新动向,到设计的历史与趣事,“设汇主义”专栏内容将为你提供源源不绝的灵感,助你早日钻破束缚的茧,化为五彩斑斓的蝶!
分享到:

上一篇:简单10步,建立一个完美的商业网站
下一篇:20个色调丰富的时尚网站设计


  • 地址:广西南宁市民族大道38-2泰安大厦金座1005室

  • 电话:0771-5712565

  • 邮箱:1105315108@qq.com

网址:www.bc0771.com

友情链接: 南宁SEO

COPYRIGHT © 2007-2016 伯才网络 版权所有