网页设计必备:H5资源最新大合集
你知道的可能是假H5。
鸡年H5学习宝典——网页设计师必备,平面设计转型的人好好学习、天天向上的好去处。来不及看可以先分享以便保存,随时随地瞄一眼,发现原来还有这么多东西可以学,绝对是一针能让我们复活的鸡血~
注:以下网站合集和市面各种200+个工具的不负责任罗列不一样,每个网站都是笔者亲测实用非常有必要学习/使用的。
【行业新知类】
Image title
HTML和CSS入门
https://cn.udacity.com/course/intro-to-html-and-css--ud304/
谷歌在Udecity开设的中文视频课程,设计师培养Web开发思维/前端入门必备!现在设计师不学点网页知识,大概会被时代抛弃的吧?和国内很多按部就班的慕课不同,谷歌的课程设计灵活——集中精力一天就能知道个大概。
响应式网站设计基础
https://cn.udacity.com/course/responsive-web-design-fundamentals--ud893/
谷歌在Udecity开设的中文视频课程,响应式设计入门与进阶必备(需先了解《HTML和CSS入门》)——如果你足够聪明,一下午就能学完。
站酷网文章
http://www.zcool.com.cn/articles/
各种设计相关的案例制作教程与创作经验,设计师每日闲逛学习必备。
UI中国文章
各种网页设计相关的制作教程与创作经验,交互设计师每日闲逛必备。
众成翻译
实时收录并翻译国外各种前沿的Web开发知识,Web设计师&开发者与时俱进的好去处——因为有很多作者是自发翻译的,行业资讯更新速度极快,而且内容优质。
Smashing Magazine [英文]
https://www.smashingmagazine.com/
世界一流的设计博客,包含各种网页设计相关的创作经验、行业资讯——做网页设计的,估计没听过它的名字也买过它的书?
【H5广告类】
Image title
数英网
数字广告资讯,包括广告案例收集、创作经验分享、案例下载等服务——H5案例丰富。
H5案例分享
国内行业H5精品案例的合集(移动广告为主),包括预览、说明与技术讲解,更新及时——移动端比较方便。
iH5互动大师
使用iH5制作的精品案例合集(移动广告为主),网站包含H5页面制作工具、案例教学、在线咨询等服务。
哇呸网
国内行业H5优质广告合集(移动为主),分类齐全。
H5doo
国内行业H5优质广告合集(移动为主),优势在于移动版可以直接点击预览,不需扫码——PC端可以用开发者工具打开实现移动效果。
Sizmek
世界行业优质Web广告的合集(PC端为主),分为HTML5和Flash等类别,对于网页嵌入广告的样式参考很有帮助。
【H5网站&特效篇】
Image title
Image title
PIXID
世界HTML5优秀网站合集(PC端为主),尤其是日系风格的网站,经常看会发现很多宝藏。
Codepen [英文]
各种拽酷炫狂的网页特效实例与源码,勾搭世界一流网页设计师和开发者的宝地——见识一下,绝不会后悔。
HTML5SHOWCASE [英文]
世界HTML5优秀网站合集(PC端为主),分类齐全,尤其是Web应用——如果你还不知道PWA(渐进式应用)这个最近这么火的概念,可以先去pwa.rocks逛逛。
Codrops [英文]
各种网页特效实例(以PC端为主)、免费设计素材,设计师的创作灵感、程序员的动效参考——更新有点慢,但篇篇精华。
SiteInspire [英文]
世界HTML5优秀网站合集(PC端为主),收录很多视觉效果不错的网站,更新及时。
TRESENSA [英文]
http://www.tresensa.com/games/
世界HTML5精品游戏合集,可以在线试玩,H5游戏创作的灵感来源。
【Web设计&开发篇】
Image title
优秀网页设计联盟
各种网页设计相关的资源、教程和经验,网页设计师必备。
Media Queries
现在你还没听说过屏幕自适应的网页设计概念,可能落后别人一大截了……这个网站有各种使用Media Queries(媒体查询,HTML5相关方法)的响应式设计网站,有在不同屏幕下的对比图,可以观察网站自适应屏幕的断点,非常好用。
ISUX
腾讯ISUX(社交用户体验设计)团队,包含各种网页设计、Web开发的解决方法、用户体验优化技巧,以HTML5网页、APP应用为主。
设计达人
集大成者的设计博客,包含网页设计、产品设计、交互设计、前端开发等信息——涉猎较广,富含各种新鲜知识。
Web基本原则--设计&界面 [中英混合]
https://developers.google.cn/web/fundamentals/design-and-ui/
谷歌Web开发设计规范,从响应式设计、用户体验、输入框、动画等方面说明HTML5网页开发的最佳解决方案。
Material design 中文版
https://material.io/guidelines/
谷歌Material设计规范,设计师必看!从动效、样式、布局等多个方面定义了世界一流的Web跨平台设计方案——原质化设计。
Mobile Design Inspiration [英文]
http://inspirationmobile.tumblr.com/
iPhone、Android、iPad等移动网页设计实例,很多网页动效设计值得参考——由于收录于tumblr网站,查看需翻~墙。
SimilarWeb [英文]
https://www.similarweb.com/top-websites
世界顶尖网站排名,可以按类别、国别查看,参考行业顶尖网站设计非常实用。
【实用云端工具篇】
Image title
搜百度盘
按格式(doc、pdf、mp4等)一键搜索各种百度云盘资源!缺点是热门资源需要多试几次,因为可能点进去后发现被删——搜书、视频、软件什么的,非常有用。
iH5互动大师
H5网页可视化制作的专业工具,功能、性能和用户体验上秒杀各大国产甚至国外的工具,用于微信广告、HTML5网页制作、小游戏、小程序制作等。
Befunky
https://www.befunky.com/create/
快速编辑、导出图片的在线工具,分为编辑器、照片拼贴、设计师三种模式,支持剪裁、系统字体、滤镜等功能,网页设计师偷懒、设计小白装逼必备……
百度脑图
思维导图在线制作工具,可导出成图片——做思维导图的很多,其实一个就够了。
BROWSER SHOTS [英文]
一键对比网站在近百个浏览器的显示效果,可以自定义屏幕大小、系统类别、颜色显示、是否支持Flash等性能,H5网页测试必备。
Can I use [英文]
一键测试各大浏览器具体性能上对HTML5的支持,Web开发必备。
智图
图片压缩、提高网页性能必备,相比业内知名的Tinypng的好处是可以实时预览不同图片质量的差别。
【资源下载篇】
Image title
365psd
各种免费、付费PSD、矢量图资源下载。
绘艺素材
http://www.huiyi8.com/yinxiao/
各种各样的音效试听与下载,用来为H5页面动态变化听觉上增色必备。
爱思资源
各种HTML、CSS、Javas cript相关的书籍下载。
jQuery之家
各种jQuery、HTML5、CSS3的插件库下载,分门别类,可供网页设计师参考动效设计或使用源码。
jQuery插件库
各种网页特效实例(以jQurey为主)预览和源码下载——经常更新,还附带一定讲解。
Emojipedia [英文]
高清图标大全,分不同设备显示的各种Emoji表情,支持打包下载。
Freebiesbug [英文]
各种免费的网页设计资源下载,非常齐全。
Freepik [英文]
各种免费PSD、矢量图资源。
PSDDD [英文]
各种免费图标、设备、元素的设计资源。
Material System ICONS [英文]
谷歌Material Design图标大全,原质化设计需要ICON必备。
UI-Cloud [英文]
各种UI源文件下载——更新比较慢,不过资源都是精品。
当你以为你很了解设计的时候,
可能正是发现你自己一无所知的时候。