写给 Web 工程师的设计入门

今天分享一篇 设计过程 的入门~ 其中也包含一些有用的 设计网站。若是你你想知道如何完整设计一个项目，能够一块儿来看下~

在本文中，将以设计一个 CMS 系统界面为例，介绍针对 web 开发中的通用设计流程。

CMS，全称 Content Management System，即内容管理系统

搭建环境

原文做者使用的是 Adobe XD（它是彻底免费的）中的 Web 选项：

若是你使用 Sketch，Photoshop 或者其余软件，记得选择 文档尺寸 为 1920x1080，这是 web 项目的标准分辨率。

面向客户

若是你有机会跟客户直接交流，最重要的就是 确认客户到底想要什么。

假设本文设计的项目基于如下背景：

咱们的客户，Pablito，拥有一个面包房，他想要一个 CMS 系统用来展现面包的图片和视频，而且系统里能够新增和编辑文章，并且这些文章能够从 CMS 中发布到 Twitter 和 Facebook。

那么让咱们来列举一下这个项目的功能：

系统中的内容都有什么？

• 图片
• 视频
• 文章

系统的功能都有什么？

• 登陆；退出。
• 上传图片；删除图片；分享图片到社交媒体。
• 上传视频；删除视频；分享视频到社交媒体。
• 建立文章；编辑文章；发布文章到外部博客。

好！下一步：调查。

不要重复造轮子

不少同窗在作设计的时候喜欢从零开始，这怎么可能？ 设计不是魔法，互联网上 全部的东西 都是设计出来的，均可以参考！

在这个例子中咱们要设计一个 CMS，因此须要一些灵感。你能够在如下网站找到：

Pinterest

Bëhance

搜索能力

不要跳过这个步骤。只须要在 Google 中搜索 CMS，而后依次点进去，你可能会看到不少网站是用 Wordpress，Wix , Joomla 或者 Drupal 作的。能够体验一下这些 CMS，看看人家是怎么设计的。

草图

是时候拿起 纸和笔 开始画出你的想法了。个人建议是用一个 小点儿的笔记本，这对于表达简单的想法颇有帮助，由于你没必要关心大片空白的区域。

下面给你看下我画的草图：

登陆界面：

主界面：

图片展现界面：

分享模态框：

文章编辑界面：

侧边栏：

若是你想向客户展现草图，以便确认他们的想法，那么就去作吧！

设计，可是用灰色

咱们尚未说到颜色的部分，暂且把它放在设计完成以后。

是时候将咱们的草图数字化了。选一个软件而后开始吧~ 咱们将会遵循几个简单的设计指南，若是你想要深刻了解 如何作具备可用性和可访问性的设计，能够参考文末的文章。

那么为啥用灰度设计？由于这样咱们就能够 专一于内容以及元素摆放的方式和位置。

第一步：网格

咱们不会深刻讲 网格。它们对于设计中定位和放置元素颇有用，你能够根据须要建立。下面是基本的例子：

建立网格的步骤是这样的：在文档的 正中间建立一条简单的线。而后在右侧复制粘贴它。你能够按本身的想法控制线条间的距离。

而后只须要复制粘贴到另外一侧使其对称便可。

第二步：摆放元素

为了简单起见，我只展现部分绘制的页面：

主界面：

图片展现界面：

分享模态框：

能够看到，我只用了灰色调。也没有用黑色，由于若是要突出某个颜色，可使用不一样类型的灰色。

终于，该上色了

好了，是时候为咱们的设计着色了。

咱们不会深刻了解调色板和颜色的理论。你只须要记住：理想的调色板包括：一个主要颜色，一个次要颜色和一个高亮颜色。若是你的客户有 logo 或者商标，调色板中也应该体现其中的颜色。

假设咱们的客户 Pablito 不介意使用的颜色。若是你不想在建立调色板上花费时间，能够看文末的第二个连接，找到一个本身喜欢而且反映了业务本质的调色板。

我选择了下面这个色板，并用它来做为示例：

下面是应用后的效果：

主界面：

登陆界面：

图片展现界面：

上面全部的图标，都是在 Adobe XD 中完成的。固然你也可使用外部图标库。图片也能够在 Unsplash 上找。

就是这样！

让咱们总结一下上面的流程：

1. 搭建环境。
2. 肯定 项目的 内容和须要的功能。
3. 挖掘一下 现成的例子，寻找一些 灵感和能力。
4. 在一个小本子上用纸和笔画出 草图。
5. 用一个简单的 网格 以 灰度等级 将这些草图数字化。
6. 建立一个 调色板。
7. 为数字草图 上色，进行最后的 装饰和修复。

总结

设计是一个复杂的过程，可是在进行元素摆放和着色以前先弄清楚几个步骤，会让整个流程更 简单和快捷。

若是你连要设计的内容都不清楚，那你还怎么设计它呢？难道从猜想开始？或者说，若是你连项目具备哪些功能都不了解，又怎么开始画草图呢？

个人最后的也很重要的建议是：设计与 外观 无关，设计是用来展示 信息 的。你所设计的 全部内容 都与 信息 有关，没有信息，你的设计就只剩下...

...好看的颜色和各类形状。

全文完！但愿对你了解设计有所帮助~

相关连接

• Why usability and accessibility matters in Design: 5 tips
• 调色板 ColorHunt
• Unsplash
• About Grids
• About Typography

---

本文首发于公众号：码力全开（codingonfire）

本文随意转载哈，注明原文连接便可，公号文章转载联系我开白名单就好~