前端设计师常用的一些基础工具素材合集

相信每个设计师浏览器的收藏夹都是自己的心头宝,里面收藏了很多好的工具和素材。有些时候在一些设计群里听到好多设计师在问有没有好一点的设计素材网站推荐,今天就给大家分享我在建站的过程中常用到的一些素材工具,素材包括:免费/版权图库、图标资源、色彩搭配、优秀网站欣赏,工具类包括: Web 技术教程、前端demo展示资源、前端框架、建站系统。

一、素材类

1、图片

其实国内对图片版权保护这块的意识不是很够,在免费的素材库和收费素材库都能找到同一张图片,但作者署名却都不一样。所以小编现在基本不用国内这些图库网,跟大家推荐几个免费又没有版权纠纷的图库网站。

Pixabay

Pixabay约有910000张免费的照片、矢量文件和艺术插图。图片覆盖面广,文件也有很多尺寸可以选择。图片质量高,小编首推的图片素材网站。里面的图片可以复制、修改、转发等方式使用,甚至用作商业用途,无需申请许可,也无需支付版税。

SplitShire

SplitShire网站的图片质量也很高,大都比较feel风。

Unsplash

Unsplash网站提供免费高清晰度照片,这里的图片都比较高大上,很适合制作网站的banner图,小编也很喜欢的一个网站。

Freeimages

Freeimages这个网站里面有海量的图片,有免费也有付费的,可以根据自己需要进行选择。

Stock-up

Stock up也有大量免费的高清大图,图片需要自己慢慢淘。

Stocksnap.io

这个网站的图片也很酷,里面免费的高清大图足够满足网页设计师的需要,很多图片也很容易出效果,推荐。

上面是免费的图库资源,如果想要版权的图片,可以去全景网购买:

全景网

2、色彩搭配

配色网站小编用得比较少,下面这几个是国外知名度比较高的跟配色相关的网站。

Paletton

帮助平面设计师和网页设计师选择理想的配色方案,打开网站即可选择一种颜色,然后系统自动生成配套的色系供设计师使用。

Adobe color cc

Adobe官方配色网站,你输颜色它出配色。

Color Palette Generator

制作配色方案。输入图像的URL以获得与图像匹配的调色板。这对于根据图片来定网站色调的比较好用。

Color Scheme Designer

Color Scheme Designer 后来改名成Paletton,是小编用得比较频繁的配色网站。使用时只用开一个窗口,功能完备且实用,定制性强,几乎无缺点,非要说一个的话就是复制RGB值不太方便。

Nippon Colors

这个网站没有前面几个推荐的配色网站好用,实用性不是很高。但是这是小编不得不推荐的,这个绝对是文艺范十足。

3、图标制作素材

Iconfont

阿里巴巴矢量图标库。设计师将图标上传到Iconfont平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用。

Icomoon.io

免费开源图标字体,可以根据自己需求定制(如就选两个);可以导入其他字体,也进行特别定制(类似fontforge功能);兼容IE6+,现代浏览器以及各类手机设备,且有demo实例,并对字符进行了HTML转化。小编就用这个网站写了一套字体,这套字体目前在禅道项目管理软件中使用。

二、工具类

1、代码学习资源

作为一个网页设计师或是前端设计师,多少都要打一些代码。小编就是看着w3school这个网站慢慢成长起来的。

W3school

在 w3school,你可以找到你所需要的所有的网站建设教程。从基础的 HTML 到 CSS,乃至进阶的XML、SQL、JS、PHP 和 ASP.NET。都适合新手学习。

2、前端demo展示资源

Code pen

站点现有上百个精选效果,上千个各类前端demo效果。优秀前端demo的展示。进入首页就可以看到很多精湛的前端demo效果,相信很多人都可以从中获得很多前端交互的灵感,当然,其中的技术实现也可以一并学习!

3、前端框架

Zui前端框架

Html5前端框架,跨屏、简洁美观。开源免费。

4、建站系统

建站系统的话,小编推荐国外的wordpress和国内的蝉知。

Wordpress

Wordpress的模板数量之多就不用多讲啦,海量的模板看到你眼花。有数据显示,全球用Wordpress建站的人数快接近三分之一,可见wordpress的影响力。

蝉知建站系统

蝉知相比较wordpress来说,比较符合国人使用的习惯,功能一样强大,在安全和扩展方面也都还不错,稍微逊色一些的是模板比较少。

三、优秀网站欣赏

站酷

这个网站应该不用多说了,设计师不可能不知道的网站,聚集了450万优秀设计师、摄影师、插画师、艺术家、创意人,设计创意群体中具有较高的影响力与号召力。

黄蜂网

优秀网页设计、电商设计、网店设计、平面设计、UI设计灵感地。小编很喜欢这个网站,你可以在这个网站上欣赏到全球各个行业、各个企业的网站。

Reeoo

Reeoo是一个收集最新的时尚潮流网站设计案例,提供设计灵感的网站。是网站设计师寻找灵感和案例的必备网站之一。

设计类网站还有很多,像花瓣、古田街9号、致设计等,小编不一一列举了,大家都可以去看看。

以上就是小编常用到的一些网站,介绍这么多也不是建议大家每个都要收藏,可以着重选择适合自己的网站去学习,提升自己的能力和效率。希望这篇文章能帮助到大家,喜欢的可以点赞哟!

时间: 2024-11-05 00:13:26

前端设计师常用的一些基础工具素材合集的相关文章

前端设计师常用的五个开发工具

过去几年一直不断地提到 Web 应用新世代的成长,这些 App 内容变得越来越丰富,带动了前端整体的复杂度大幅增加. 但为了能持续面对复杂度的新挑战,开发者已经创造更多工具使整体开发过程更加流畅,从测试框架到分析工具,这些成熟又有用的工具把最棒的体验带给我们的使用者. 本文要分享给大家 5 个我们每天面对挑战所使用最棒的工具和框架 Chrome dev tools 这是目前最好的前端开发工具! Chrome 自从它诞生后,就已经大量投资在开发者工具软体,至今仍不断的在改善它,每一个发布会(每六周

用户体验设计师常用的21款工具和应用

工作在用户体验团队中会经常需要用到一些在线工具.对于UX的世界,不管你是一个新手还是一个经验丰富的老鸟,你都不应该停止寻找一些会让你的工作变得轻松的工具.在这篇文章中,我们为你准备了21款有用户体验设计的相关工具. 其中一些工具你可能已经使用过了,但是我们希望通过这篇文章给你带来一些新的感受,我把这些工具分成了三类: 用户调查/测试/回馈 原型 / 图表 协作 用户调查/ 测试 / 回馈 在开发原型阶段之前,你必须做大量的研究和调查,正确的了解用户的需求并创建出相应用Web和移动解决方案. 1.

三、Java基础知识要点合集

1.数据类型 Java的数据类型分为基本数据类型和引用数据类型. a, 基本数据类型包括:byte, boolean, char, short, int, long, float, double; b, 每个基本数据类型都有相应的引用类型,比如int  ->  Integer,char -> character. c, 查询不同类型数据的范围,方法之一是可以用基本类型对应的引用类型.比如,"int i = Integer.Size; "(i表示int型数据所占的位(bit)

【开发者福利】最全面的移动端免费素材合集

在移动端设计风起云涌的今天,移动端的UI和UX设计师任重而道远.巧妇难为无米之炊,好素材就是设计师的底气.这次搜集的移动端免费素材覆盖全面,从教学资源到UI Kit,从开发工具到图标合集,一应俱全. 学习资源 UX Design for Mobile Developers 移动端开发的用户体验设计是Udacity所推出的课程,教授移动端应用开发用户体验设计的技术和案例,主要是针对移动端开发者,提高他们对于设计和用户体验的知识和意识,让他们开发的APP兼具好功能和好体验,不过编程开发的体验设计并不

U盘检测及量产工具大合集

本帖最后由 0719andy 于 2010-10-15 15:28 编辑 检测工具 (感谢数码之家发骚友亲情奉献!) 1.ChipGenius ChipGenius是一款USB设备芯片型号检测工具,可以自动查询U盘.MP3/MP4.读卡器.移动硬盘等一切USB设备的主控芯片型号.制造商.品牌.并提供相关资料下载地址.当然也可以查询USB设备的VID/PID信息.设备名称.接口速度.序列号.设备版本等. 为了及时获得最新数据,请更新到V3.00以上版本:暂不支持Win7/64bit系统下检测 Ch

常用的一些基础工具类

public class UiUtils {        public static Context getContext(){        return MyApplication.getContext();    }        public static Handler getMainThreadHandler() {        return MyApplication.getHandler();    }        public static int getMainThre

超全整理!Linux性能分析工具汇总合集

出于对Linux操作系统的兴趣,以及对底层知识的强烈欲望,因此整理了这篇文章.本文也可以作为检验基础知识的指标,另外文章涵盖了一个系统的方方面面.如果没有完善的计算机系统知识,网络知识和操作系统知识,文档中的工具,是不可能完全掌握的,另外对系统性能分析和优化是一个长期的系列. 本文档主要是结合Linux 大牛,Netflix 高级性能架构师 Brendan Gregg 更新 Linux 性能调优工具的博文,搜集Linux系统性能优化相关文章整理后的一篇综合性文章,主要是结合博文对涉及到的原理和性

Linux 性能分析工具汇总合集

出于对Linux操作系统的兴趣,以及对底层知识的强烈欲望,因此整理了这篇文章.本文也可以作为检验基础知识的指标,另外文章涵盖了一个系统的方方面面.如果没有完善的计算机系统知识,网络知识和操作系统知识,文档中的工具,是不可能完全掌握的,另外对系统性能分析和优化是一个长期的系列. 本文档主要是结合Linux 大牛,Netflix 高级性能架构师 Brendan Gregg 更新 Linux 性能调优工具的博文,搜集Linux系统性能优化相关文章整理后的一篇综合性文章,主要是结合博文对涉及到的原理和性

Linux性能分析工具汇总合集

出于对Linux操作系统的兴趣,以及对底层知识的强烈欲望,因此整理了这篇文章.本文也可以作为检验基础知识的指标,另外文章涵盖了一个系统的方方面面.如果没有完善的计算机系统知识,网络知识和操作系统知识,文档中的工具,是不可能完全掌握的,另外对系统性能分析和优化是一个长期的系列. 本文档主要是结合Linux 大牛,Netflix 高级性能架构师 Brendan Gregg 更新 Linux 性能调优工具的博文,搜集Linux系统性能优化相关文章整理后的一篇综合性文章,主要是结合博文对涉及到的原理和性