使用 Sketch 进行设计

在向别人展示我的作品集网站时，我经常被问到我的设计流程。直到这周，我都会（老实说）说我没有固定的流程。我以前都是直接写代码，然后不断调整网站，直到它看起来符合我的预期。这周，我决定至少在制作网站原型时应该尝试使用设计软件，而不是凭感觉摸索。我认识的很多设计师都用Sketch，所以我决定也用它！

除了用 Inkscape 编辑 SVG 文件之外，我之前没用过任何设计软件，但 Sketch 的界面非常直观。上手很快，没遇到什么问题。为了熟悉界面，我以两倍速观看了LevelUpTutorials 在 YouTube 上发布的一些 Sketch 教程，除此之外，主要还是靠自己摸索。

坦白说，我这周早些​​时候确实用 Sketch 写了一份简历，但我感觉用它作为我的“最终项目”有点怪怪的。所以，我做了三个网站原型，展示如果我为我的博客建一个网站，它会是什么样子！

最终项目

insert我做的第一件事是使用左上角的按钮创建一个画板。我选择这个desktop选项是为了创建一个标准的网页。你可以创建各种尺寸和形状的画板，以满足你的需求！我用的是标准纸张大小的画板来制作我的简历！我还将背景设置为白色，这样下载画板时背景也会一起下载。

接下来，我在画板上添加了形状和文本。在右侧，您可以编辑它们的属性，例如字体、颜色和不透明度。我喜欢这个功能，因为它能精确到像素！您可以直接输入像素值，而无需拖动元素直到它处于完美位置。不过，这里有一个拖动的小技巧：如果您希望元素在较小的单位内自动对齐，请放大视图！这样拖动起来会容易得多！

您还可以将项目分组，以便一起编辑。例如，我会将所有标题项目放在一个组中，这样如果我想移动整个标题，就可以直接移动它们。

为了获取我代码中常用的字体，我使用Mac预装的“字体册”将它们安装到了电脑上。我只需点击Google Fonts的下载按钮即可下载。这个项目我最终没有使用图标，但如果需要的话，我会把这些图标作为图片添加到我的设计中。此外，我还使用了Hipster Ipsum作为文章正文！

现在让我们来看看原型！

我的设计风格相对简约，但细节之处颇为大胆。第一个设计采用了醒目的标题，标题上饰有金色六边形图案。字体主要使用 Montserrat，标题部分则混用了 Playfair。我还设计了一个侧边栏，同样运用了六边形元素。我非常喜欢这些图形细节，我认为最终呈现的效果简洁而不失视觉吸引力。

接下来，我想挑战一下自己，尝试添加一些我项目里的图片。这有点难度，因为每篇文章的配色方案都不一样，细节尺寸也不同。我决定添加一些通常用作网站标题的图片，这样图片会更长一些。结果图片看起来有点拉伸变形，不过在正式上线后很容易就能解决！我还添加了一些“千禧粉”波点元素，让网站看起来更有趣！我觉得从长远来看，这些图片可能不太实用，但我确实很喜欢现在的设计效果！

第三个设计，也是我最喜欢的，是基于我的个人网站。我的网站也有一个类似的标题，使用了多色文字。用 Sketch 做这个有点麻烦，因为我必须为每个字母创建一个文本框。不过，用 CSS 做也很麻烦，所以这肯定不是 Sketch 独有的问题！我还给侧边栏添加了不同的形状，来呼应我网站上的形状背景！我的简历也采用了相同的主题，所以我认为让所有主要访问页面风格统一会很棒！我真的很喜欢其他地方明亮的色彩与极简主义的结合。

后续步骤

我真的很喜欢用 Sketch 做原型！我觉得能够快速设计很有趣，而且也让整体风格更加统一。我打算以后继续使用它，也很期待它能如何帮助我编写前端代码！

完整版PDF

这是我的“学习新事物系列”的一部分