现如今，越来越多的人投身于网页设计。想要成为一名网页设计师似乎变得不是一件困难的事情，网上有许多的资源提供给我们学习，本文罗列了40个最佳的网页设计资源，供大家学习和参考。

网页设计博客类网站（Web design blogs）

1. Smashing Magazine

这个博客是专为网页设计师和网页开发创造的，可想而知里面关于网页设计的资源是非常丰富的。并且这个网站一向讲究的就是高质量的文章，发布的文章都是经过层层筛选和编辑后才提供给用户。

网站还提供许多免费的ebook给大家下载学习。文章的订阅者超过1,100,000，用户活跃度高，每篇文章的回复都很专业，超过1,700篇原创文章，890位作者，他们均有多年从业经验。

2. Creative Bloq

Creative blog 是一个专门提供艺术和设计类的资源分享网站，网站覆盖的范围比较广泛，有平面设计，插图，3D艺术和排版设计，有个专门栏目是网页设计相关的资源和文章。能够帮助读者掌握世界设计行业的最新趋势和发展，解析优秀的设计作品。每天都会持续更新文章，文章质量也都很高，值得网页设计师长期关注。

3. Web Designer Depot

Web designer deport提供最新的网页讯息和教程，是一个专为网页设计师打造的学习博客网站。

4. Web Designer Wall

一开始Web Designer Wall是一个私人的博客平台，设计师Nick La分享个人的设计经验，趋势和网页设计的一些想法。由于受到众多的读者的青睐，现在网站提供投稿功能，来自世界各自的设计师可以通过这个平台来分享自己的设计经验和想法。网站上的资源丰富，类别多样，值得网页设计师收藏。

5. 1stWebDesigner

1st web designer 是一个十分优秀的网页设计资源网站，网站上提供不仅仅是网页设计的最新资讯，还包括网页开发等教程。让你更好的完成网页设计。

网页设计软件(Web design software)

6. Adobe Photoshop

无论是网页设计师还是UI设计师，ps都是他们必须要精通的一项技能。PS作为图像处理软件的佼佼者，其功能自然是十分强大的，主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。

PS有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。许多设计师还需要使用到AI，它是矢量图形处理软件，当网页中出现像素特别小的logo标志时，一般会选择用AI来做。这两款工具使用主要看自己的需求。

7. Sketch

Sketch是一款 为视觉设计师打造的专业矢量图形处理应用。专为图标设计和界面设计而生的，对于网页设计师来说矢量绘图也是目前进行网页界面设计的最好方式。

8. Adobe Dreamweaver CS6

Adobe Dreamweaver CS6是adobe推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。由于它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页，对于初级人员，你可以无需编写任何代码就能快速创建web页面。

9. Webflow

Webflow是一款网页设计应用，让用户在浏览器内进行网页设计，实时预览，且可以编码。Webflow的编辑器非常友好，所见即所得，让设计师可以全盘操控设计，且输出非常方便，可在手机上查看效果。

WebFlow一直在持续更新功能，包括Web字体，视频支持，交互的状态，W3C标准化，乃至于主机托管。

10. Google Web Designer

Web Designer是一款专门为创意机构和设计师量身打造的网页设计工具。方便设计师利用HTML5制作网站和应用等Web内容。它可以用于创建交互式HTML5网站和广告横幅，适用于Windows，Mac和Linux的独立软件。它是一种所见即所得编辑器，可让你创建基于HTML5的交互式设计。该应用程序可以帮助你在Chrome，Firefox和Safari上预览广告。

11.Bootstrap

Bootstrap是基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。

12. Mockplus

Mockplus是一款简洁高效的网页原型设计工具，五分钟就能创建一个交互页面，功能强大，让你轻松就能制作一个满意的网页原型。无论是他们的“格子”复用功能还是“表格”组件功能，都能提高你的设计工作效率。

网页设计模板网站（Best web design template sites）

13. Responsive Web Design - Templates

14. https://www.wix.com/website/templates

15. https://colorlib.com/wp/templates/

16. https://themeforest.net/category/site-templates/cr...

17. https://www.squarespace.com/templates/

网页设计配色工具（web design color tools）

18. Coolors

Coolors是可以帮助自动生成配色色板的工具，通过敲击空格键来查看不同的配色方案；点击色块可以锁定当前颜色，以查看其他关联的配色组合；你也可以指定一个颜色，点击色块下方的 HEX 颜色值即可直接编辑；如果你需要导出配色方案，只需单击“导出”按钮即可。你可以导出格式有PDF，PNG，SCSS，SVG甚至Copic标记。

19. Adobe Color CC

Adobe Color CC是一款简单易用的色彩管理应用，Adobe Color CC支持的图片格式有TIFF，JPEG，GIF，PNG和 BMP。

20. Material Design Palette

如果你想要一款基于Material设计的网页，那么这款专为material 设计的在线配色工具是你不二的选择，Material Palette主要特色是可以让用户一边选择颜色同时还能实时预览效果图，并且用户只需要选择1个或2个颜色后系统会自己匹配出一组 UI 配色方案。

网页设计书籍（Web design books）

21. LEARNING WEB DESIGN: A BEGINNER’S GUIDE TO HTML, CSS, JAVASCRIPT, AND WEB GRAPHICS, BY JENNIFER NIEDERST ROBBINS

22. DON’T MAKE ME THINK

23. UNIVERSAL PRINCIPLES OF DESIGN

24. Clout: The Art and Science of Influential Web Content

25. JavaScript: The Definitive Guide: Activate Your Web Pages

26. Design for hackers reverse engineering beauty

27. HTML5 & CSS3 for Web Designers Bundle

网页设计图标资源网站（Web Icon resource）

28. Iconfinder（2,725,686个SVG图标资源）

29. Flaticon（1,056,000个矢量图标资源）

30. Freepik（99,453个免费图标）

31. IconsMind（53个分类，2,080个图标资源）

32. Icons8（80,100个图标资源）

33. Iconmonstr（4,323免费图标资源和302图标集）

34. Material Design Icons（4,000个图标资源）

网页设计字体资源网站(Web typography resource)

35. Google fonts

36. Fontsquirrel

37. fontlibrary

38. My fonts

39. Typekit

40. Webtype