惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

J
Java Code Geeks
Stack Overflow Blog
Stack Overflow Blog
B
Blog RSS Feed
C
Check Point Blog
D
Docker
Y
Y Combinator Blog
Recent Announcements
Recent Announcements
Google DeepMind News
Google DeepMind News
MongoDB | Blog
MongoDB | Blog
博客园_首页
Apple Machine Learning Research
Apple Machine Learning Research
量子位
有赞技术团队
有赞技术团队
IT之家
IT之家
大猫的无限游戏
大猫的无限游戏
D
DataBreaches.Net
M
MIT News - Artificial intelligence
B
Blog
阮一峰的网络日志
阮一峰的网络日志
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
腾讯CDC
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
V
V2EX
月光博客
月光博客

少数派

派早报:Google 发布 Fitbit Air 等 - 少数派 「新人报到」確認需求,再開始 - 少数派 从 SOLO 独立开发者社区,我看到了越来越多开发者开始做自己的产品 - 少数派 我怎么管理那些"不常做,但总会忘"的生活事项 - 少数派 人形机器人量产元年,数据才是具身智能的“生死线” - 少数派 BuhoLaunchpad 高度还原 Mac 启动台:开发历程与思考 - 少数派 五年陪伴依然不舍,DIY 换壳后让罗技 MX Master 3 继续服役 - 少数派 新玩意 240|少数派的编辑们最近买了啥? - 少数派 一日一技|为什么你应该关闭 iOS 的键盘声音 - 少数派 我做了个插件和 Skills,一键提取任何网站的设计规范 Design.md - 少数派 住在三四线城市的你,该开始录播客了 - 少数派 甘南秘境,大白高国 - 少数派 AI的审美:谁让把我变成川内倫子 - 少数派 返工怎能不烦恼,打工人片单总有一部是你的「嘴替」 - 少数派 为了让「上厕所」更健康,我做了一个小工具 - 少数派 AI + Skill,能够让生成的文章去除 AI 味吗? - 少数派 新玩意|韶音OpenDots ONE 耳夹式耳机 - 少数派 《美满》| 在每一个春天的晚上相爱(362) - 少数派 新玩意|优篮子 PS01 MagSnap 磁吸支架 - 少数派 自我整合手记 | 我开始早睡了:用稳定规则,为自由托底 - 少数派 用龙虾(OpenClaw)两个多月,我最深的12个体会 - 少数派 听歌时间到,12 张你可能错过的 2025 华语乐坛好专辑 - 少数派 承诺能追吗 - 少数派 macOS 26启动台没了? 我做了个不一样的App启动器 - Keboard - 少数派 《四海为家的人》| INTJ对话INTJ(361) - 少数派 你发过的那些黑历史,是时候一次清干净了 - 少数派 新玩意:安安静静玩,越玩越专注:计客密码机 - 少数派 iPad 用户首次体验 Android 平板:vivo Pad6 Pro - 少数派 数据逻辑强 - 少数派 极北行+ | 一路向北,探访日本至北之地 | 001 - 少数派
写给设计师的作品集网站搭建工具指南 - 少数派
2019-10-22 · via 少数派

每个设计师应该都想拥有一个个人网站,既能展示自己的作品集,又能打造个人品牌。可是,做一个网站有一定的技术门槛,比如需要懂服务器、命令行、代码什么的。

而如今,你完全不用担心这些事情了。现在各种各样的可视化建站工具层出不穷,而且都有着丰富的模板,让我们可以通过拖拽快速搭建一个还不错的个人网站。在这篇文章里,我将推荐几个适合设计师的网站搭建工具。

Notion

Notion 是一个强大的在线笔记应用,那它为什么会出现在这里?换个角度看,其实我们的个人网站也是笔记,由一篇篇文章组成,而 Notion 又是支持分享成链接的,所以我们也可以把 Notion 作为一个建站工具。

我用 Notion 做了一个简单的示例。可以看到,我们可以自由排布图片或链接,把它做成一个网站的样子。

Notion 作品集
Notion 作品集

Notion 还有一个嵌入的功能,你可以把任何在线的内容嵌入其中。比如说你的设计是使用 Figma 制作的,那么就可以直接嵌入 Figma 视图,这样别人在查看时可以直接在这个视图内放大或缩小,来查看你的设计效果和细节。你还可以嵌入 Figma 可交互原型,这样你的作品集就更加生动了。

嵌入 Figma 作品
嵌入 Figma 作品

参考:用 Notion 做网站:设计师的武器库v1.0已上线

Webflow

Webflow 介绍
Webflow 介绍

Webflow 是一个可视化的建站工具,它提供了标准的 HTML5 元素,如标题、按钮、视频等,你可以直接将它拖进画布,来设计出符合语义的网站界面。它还支持 Symbol,即将常用模式(比如按钮)保存起来,在各个地方复用。

HTML 元素
HTML 元素

Webflow 的设计方式非常接近前端实现,比如你可以设置常见的布局方式:弹性布局、栅格布局等,还可以给元素添加 CSS 属性。

布局
布局

除此之外,它还提供了高级动效设置,以及内容管理系统,可以帮助你做出非常定制化的效果。值得一提的是,Webflow 的官网也是使用 Webflow 做出来的。

Wix

Wix 是国外一款比较流行的网站快速搭建工具。他们提供了丰富的模板,你只需要改改文字图片就可以发布上线了,也就是他们所谓的 ADI(人工设计智能)模式。当然,这只适合定制化不那么强的需求。

ADI(人工设计智能)
ADI(人工设计智能)

如果你的定制化需求比较强,可以试试他们的编辑器模式。在编辑器模式下,你可以更改元素位置,给元素添加动画,甚至还可以添加自定义代码。

编辑器模式
编辑器模式

Publii

Publii 是一个非常适合设计师搭建个人网站的工具,它提供了很多漂亮的模板,你只需要在客户端中填写内容或编写文章就可以了。

Publii 后台
Publii 后台

在 Publii 中编写文章,是用所见即所得的方式。你可以添加丰富的媒体资源,它会为你自动统计字数。

Publii 编辑器
Publii 编辑器

发布也很简单,你可以连接到自己的云服务器,或者选择 Github Pages 这种静态网站托管服务,就可以一键发布了。

RapidWeaver

RapidWeaver 采用设计师所熟悉的可视化操作方式来构建网站,它支持设备模拟、主题、插件等。你可以在左侧管理页面,或进行一些基本设置,在右侧修改内容。

RapidWeaver 界面
RapidWeaver 界面

你还可以模拟不同尺寸的设备,来查看在不同尺寸下的显示效果。

多尺寸预览
多尺寸预览

RapidWeaver 还支持插件,你可以通过插件给网站添加诸如社交按钮、购物车等定制元素。

插件支持
插件支持

Gridea

目前程序员使用最普遍的一个个人博客搭建方式是 Github Pages,这种方式不用你自己购买服务器,直接将代码传至 Github 就可以生成一个静态网站。但是,Github Pages 需要使用 Git,还是要理解一些技术,对设计师来说有点麻烦。而 Gridea 屏蔽了技术细节,让你只需要设置属性并编写文章,就可以一键发布至 Github 了。

Gridea 界面
Gridea 界面

Gridea 支持 Markdown 写作、封面图设置、网站信息设置、多语言、多主题、评论系统接入,还支持 RSS 输出。

参考:《Gridea 让你更方便地管理 Github Pages》

Github Pages

当然,如果你真的想了解一些技术,那么大可以去试试 Github Pages。Github Pages 有一个介绍页面,会告诉你怎样通过仓库来搭建一个个人网站。

Github Pages
Github Pages

参考:《GitHub Pages 搭建教程》

上面介绍的这些工具,基本是按照从易到难的顺序。其实,如果我们只是想搭建一个个人网站的话,大可不必去折腾服务器、数据库、命令行这些东西,不然很有可能把技能树点歪了。

对于设计师来说,使用一些可视化的设计工具,去搭建自己的个人网站是很好的选择,因为我们可以把注意力集中在内容上,这也应该是我们的个人网站最核心的东西。