探索创意之源：GitHub上的顶级网站设计资源汇总（awesome-web-design）

杨林伟

于 2024-05-31 18:22:42 发布

阅读量1.3k

点赞数 28

分类专栏： # BMS项目实战记录产品文章标签：设计产品 web 工具灵感

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qq_20042935/article/details/139346096

版权

BMS项目实战记录同时被 2 个专栏收录

172 篇文章

订阅专栏

2 篇文章

订阅专栏

01 引言

网页设计不仅仅是一项技术，更是一种艺术。

博主发现GitHub上有个比较火的项目提供了一个精选的网站设计资源，内容比较丰富，这些资源可以给设计师提供灵感，提升技能和设计水平，它是由nicolesaidy 维护的仓库 awesome-web-design，仓库地址：https://github.com/nicolesaidy/awesome-web-design

本文博主主要是整理里面的资源，以方便有兴趣的同学去学习与参考，内容主要分为如下几个类型（注意：左侧有目录）：

分类	描述
Blog & News	博客与新闻类
Inspiration	为设计师提供创意灵感的资源
Colors	关于颜色理论和调色板的资源
Typography	字体选择和排版的资源
Icons	图标集和图标字体的资源
Images	图像优化和处理工具
Guidelines	帮助设计师提高技能的指南
Design Tools	设计过程中使用的工具和应用程序
Prototype Tools	原型设计和用户测试的工具
Tutorials	帮助设计师提高技能的教程
Books	相关书籍

02 灵感类（Inspiration）

2.1 Awwwards

描述：最佳网页设计趋势
地址：https://www.awwwards.com/websites/architecture

在这里插入图片描述

2.2 One Page Love

描述：设计画廊，展示最佳单页网站
地址：https://onepagelove.com/template
s/figma-templates
在这里插入图片描述

2.3 Behance

描述：展示与发现创意作品
地址：https://www.behance.net
在这里插入图片描述

2.4 Dribbble

描述：设计师的展示与分享平台
地址：https://dribbble.com/shots/following/web-design
在这里插入图片描述

2.5 Product Hunt

描述：发现你的下一个最爱的地方
地址：https://www.producthunt.com
在这里插入图片描述

2.6 UI Movement

描述：每天提供最佳用户界面设计灵感
地址：https://pagecollective.com/?ref=screenlane
在这里插入图片描述

2.7 Pttrns

描述：设计模式、资源和灵感的精选集
地址：https://www.pttrns.com/category/design

在这里插入图片描述

03 颜色类（Colors）

3.1 Brandcolors

描述：世界顶级品牌官方颜色。
地址：https://brandcolors.net
在这里插入图片描述

3.2 Adobe Color CC

描述：使用色轮创建配色方案，或浏览Kuler社区的数千种颜色组合。
地址：https://color.adobe.com/create/color-wheel
在这里插入图片描述

3.3 Paletton

描述：为设计师提供的工具，用于创建相互协调的颜色组合。
地址：https://paletton.com
在这里插入图片描述

3.4 Coolors

描述：为你的设计生成无限的调色板。
地址：https://coolors.co/
在这里插入图片描述

3.5 Lol Colors

描述：精选的颜色调色板灵感。
地址：https://www.webdesignrankings.com
在这里插入图片描述

3.6 Colordot

描述：人类的色选器。
地址：https://color.hailpixel.com
在这里插入图片描述

3.8 UI Gradients

描述：美丽的颜色渐变。
地址：https://uigradients.com
渐变色图片

3.9 Colorzilla

描述：吸管、颜色选择器、渐变生成器。
地址：https://www.colorzilla.com
在这里插入图片描述

04 字体类（Icons）

4.1 Google Web Fonts

描述：提供直观且强大的开源设计师网页字体目录。
地址：https://fonts.google.com
在这里插入图片描述
当然还有字体。

4.2 Fontpair

描述：好看的Google字体组合和配对。
地址：https://www.fontpair.co
在这里插入图片描述

4.3 Type Scale

描述：预览并选择适合你项目的字体比例。
地址：https://typescale.com
在这里插入图片描述

4.4 WhatTheFont

描述：在图片中看到一种字体并想知道它是什么？WhatTheFont将找到最接近的匹配。
地址：https://www.myfonts.com/pages/whatthefont
在这里插入图片描述

4.5 Typewolf

描述：全面的网页排版信息，字体替代建议，以及在外部使用链接。
地址：https://www.typewolf.com
在这里插入图片描述

4.6 Typ.io

描述：来自真实网站的排版灵感。
地址：https://typ.io/samples
在这里插入图片描述

05 图片类（Images）

5.1 Pexels

描述：一站式提供最佳的免费库存照片。
地址：https://www.pexels.com
在这里插入图片描述

5.2 Unsplash.it

描述：使用精美图片库的占位符服务。
地址：https://picsum.photos

在这里插入图片描述

5.3 Pixabay

描述：高质量照片和插图，免费用于商业用途。
地址：https://pixabay.com
在这里插入图片描述

5.4 Imgur

描述：互联网上最精彩的图片。
地址：https://imgur.com
在这里插入图片描述

06 设计工具类（Design Tools）

6.1 Sketch

描述：适用于Mac的轻量级数字设计程序。
地址：https://www.sketch.com
在这里插入图片描述

6.2 Figma

描述：协作式界面设计工具。
地址：https://www.figma.com
在这里插入图片描述

6.3 Adobe XD

描述：原型设计和线框图工具。
地址：https://helpx.adobe.com/xd/get-started.html
在这里插入图片描述

6.4 Canva

描述：令人惊叹的简单图形设计软件。
地址：https://www.canva.com/visual-suite
在这里插入图片描述

6.5 Framer X

描述：交互设计和用户体验设计软件。
地址：https://www.framer.com/features/design-layout
在这里插入图片描述

07 原型工具类（Prototype Tools）

7.1 Zeplin

描述：设计师和开发者之间极佳的协作工具。
地址：https://zeplin.io
在这里插入图片描述

7.2 Avocode

描述：所有设计师和开发者开放的工作空间。
地址：https://avocode.com
在这里插入图片描述

7.3 inVision

描述：世界领先的原型设计、协作和工作流程平台。
地址：https://www.invisionapp.com
在这里插入图片描述

7.4 Justinmind

描述：更快地制作原型，更好地沟通，适用于网页和移动应用。
地址：http://justinmind.com
在这里插入图片描述

7.5 Marvel App

描述：设计师的免费移动和网页原型设计。
地址：https://marvelapp.com
在这里插入图片描述

7.6 Atomic.io

描述：浏览器中的免费交互式设计工具。
地址：https://www.atomic.io
在这里插入图片描述

7.7 Flinto

描述：创建设计的交互式和动画原型的应用。
地址：https://www.flinto.com
在这里插入图片描述

08 教程类（Tutorials）

8.1 Treehouse

描述：为全球各地的人们提供负担得起的技术教育。
地址：https://teamtreehouse.com/tracks/web-design
在这里插入图片描述

8.2 Tuts Plus Web Design Tutorials

描述：免费的网页设计和开发教程。
地址：https://webdesign.tutsplus.com
在这里插入图片描述

8.3 Learn Sketch

描述：简短的视频和汇编的宝贵资源，帮助您快速入门！
地址：https://www.sketch.com/guides

在这里插入图片描述

8.4 Adobe XD Guide

描述：一份长达12000字的全面指南，适用于XD初学者和现有用户。
地址：https://www.xdguru.com/adobe-xd-guide
在这里插入图片描述

09 书籍类（Books）

9.1 Web design playground

描述: 《从编写第一行HTML代码到创建有趣、吸引人的网页的逐步指南》
地址：https://www.manning.com/books/web-design-playground
在这里插入图片描述

9.2 Don’t make me think

描述：《别让我思考》
地址：https://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758
在这里插入图片描述

9.3 The design of everyday things

描述：《日常事物的设计》
地址：https://www.amazon.com/Design-Everyday-Things-Donald-Norman/dp/1452654123
在这里插入图片描述

9.4 100 things every designer needs to know about people

描述：《设计师需要了解的关于人的100件事》
地址：https://www.amazon.com/Things-Designer-People-Voices-Matter/dp/0321767535/ref=sr_1_1?s=books&ie=UTF8&qid=1419267906&sr=1-1&keywords=100+Things+Every+Designer+Needs+to+Know?utm_source=CMblog&utm_medium=post&utm_campaign=blog_
在这里插入图片描述

10 效率类（Productivity）

10.1 Pomodoro

描述：番茄工作法，一种酷炫的时间管理技巧，用于更高效地工作和学习。
地址：https://www.toptal.com/project-managers/tomato-timer
在这里插入图片描述

10.2 Toggl

描述：时间追踪器，提高工作场所的生产力。
地址：https://toggl.com
在这里插入图片描述

10.3 Trello

描述：以一种有趣、灵活和有益的方式组织和优先处理你的项目。
地址：https://trello.com
在这里插入图片描述

10.4 RescueTime

描述：帮助你了解你的日常习惯，以便你可以专注并提高生产力。
地址：https://www.rescuetime.com
在这里插入图片描述

10.5 Qbserve

描述：自动时间追踪、开票和实时生产力反馈。
地址：https://qotoqot.com/qbserve
在这里插入图片描述

10.6 Paste

描述：Mac上的智能剪贴板历史管理器。
地址：https://pasteapp.io
在这里插入图片描述

10.7 Sip

描述：Mac的颜色选择器。
地址：https://sipapp.io
在这里插入图片描述

10.8 Timing

描述：Mac的自动时间和生产力追踪。
地址：https://timingapp.com
在这里插入图片描述

10.9 Taskade

描述：团队协作任务列表和大纲。
地址：https://www.taskade.com
在这里插入图片描述

11 指南类（Guidelines）

11.1 IOS Human Interface Guidelines

描述：IOS 人机界面指南，提供设计美观、吸引人的 iOS 应用所需的一切。
地址：https://developer.apple.com/design/human-interface-guidelines
在这里插入图片描述

11.2 Google Material Design

描述：深入探究 Google 品牌的设计、组件和资源。
地址：https://material.google.com
在这里插入图片描述

11.3 Laws of UX

描述：用户体验法则，设计师在构建用户界面时可以考虑的格言和原则的集合。
地址：https://lawsofux.com
在这里插入图片描述

11.4 Ultimate Guide

描述：关于移动应用设计原则的终极指南，让你的应用脱颖而出。
地址：https://www.moveoapps.com/ultimate-guide-to-mobile-app-design-principles
在这里插入图片描述

11.5 GoodUI

描述：5种方法让你获得更好的用户界面。
地址：https://goodui.org/templates
在这里插入图片描述

12 博客与新闻类（Blog & News）

12.1 Web Designer News

描述：为设计师精选的最佳故事。
地址：https://webdesignernews.com
在这里插入图片描述

12.2 Marvel Blog

描述：来自Marvel团队的最新新闻、资源和想法。
地址：http://blog.marvelapp.com
在这里插入图片描述

12.3 The Next Web

描述：国际科技新闻、商业和文化。
地址：https://thenextweb.com/topic/creative
在这里插入图片描述

12.4 Medium

描述：一个由读者和作者组成的社区，提供对大大小小的观点的独特见解。
地址：https://medium.com/tag/web-design
在这里插入图片描述

12.5 Creative Bloq

描述：艺术与设计灵感。
地址：https://www.creativebloq.com
在这里插入图片描述

12.6 Smashing Magazine

描述：面向专业网页设计师和开发者。
地址：https://www.smashingmagazine.com
在这里插入图片描述

12.7 Sitepoint

描述：网页开发者和设计师分享他们对构建令人难以置信的互联网事物的热情的中心。
地址：https://www.sitepoint.com/design-ux
在这里插入图片描述

12.8 Google design

描述：YouTube频道，展示关于Google设计的设计师视频。
地址：https://www.youtube.com/channel/UClKO7be7O9cUGL94PHnAeOA

在这里插入图片描述

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。