建立我的个人网站 – 第 1 部分：规划和设计

年初的时候，我还没有网站。所以我把“建立一个个人网站”定为我的2018年目标之一。时间快进到2018年12月中旬……我仍然没有网站，原因包括各种恶习（拖延、焦虑、完美主义）以及生活变故（我得到了第一份正式的开发工作！）。关注我，我会搭建一个简单的落地页，这样我今年至少可以实现一个目标！🤦🏽‍♀️✅

🔗在这篇文章的末尾找到有用的资源列表！

获取域名

我不喜欢用全名，也不想用假名。我最初考虑过ekamak.es——我喜欢它的字母重复（“makes” 包含了“Eka” 的所有字母），以及类似句子的 URL（例如ekamak.es/websites）。但我的目标是一个更通用的名字，不必与“创客”的形象挂钩。

我在 Twitter 上做了一个投票，比较ekamak.es和ekaeka.me，结果 ekaeka.me 赢了。最后，我选择了……两个都不选。我在地址栏里输入了ekaaa.me，一见倾心，立刻就买了。¯\ (ツ) /¯

数据建模

数据模型是“信息世界中涉及的不同数据元素之间的逻辑相互关系和数据流”的模型（Techopedia）。最常见的类型是关系数据模型，它将数据分类为表、列和行。实体关系图 (ERD)是关系数据库的可视化形式，它“说明了系统中人员、对象或概念等‘实体’之间的关系”（Lucidchart）。

我计划使用 JSON 和 Markdown 文件的数据在 Gatsby 上构建我的网站，因此不需要数据库。我没有创建完整的 ERD，但我画了一个简略的 ERD 图供自己参考。

虽然我并不打算使用大型数据库（⚠️这不是数据库表的准确 ERD！），甚至可能不会在以后以 100％ 的忠实度实现此图，但创建此图可以让我鸟瞰我的站点数据，这将有助于我稍后构建数据。

如您所见，我的网站在 2018 年的迭代中不会包含太多内容。它只有一个页面，即Landing Page，其中包含：

• 关于我和我的工作的文字
• 3 篇最新博客文章（其中一篇将是这篇文章！），链接到单一Post视图
• x 个最新项目，链接到 Github 或 Glitch 上的外部项目 URL（我正在编写此部分，但不会将其包含在部署中）
• 随机显示一句最喜欢的名言，只是因为

Site包含可在所有页面使用的通用站点范围数据，包括 SEO 元数据和“站点信息”部分（即页脚/侧边栏）。

当我们在下一部分中设置站点时，我们将重新讨论这一点！

在 Adob​​e XD 上制作原型设计

对我来说，视觉设计是网页开发中最令人沮丧的部分。我精通一些基本设计（对称、接近、对比、网格等等），也能设计出用户喜欢的基本布局和 UI。但我讨厌自己无法通过恰当的颜色、字体、形状等来创作出能够表达特定情绪和特征的复杂设计。我讨厌自己在喜欢的事情上做得不够好，只能勉强及格。

以前，我会把它藏起来，完全避开它。直到最近我才意识到，我需要忘掉它。所以我决定忍耐住，尽力设计我的个人网站。至少，我可以确切地知道我的设计能力到底有多强（一年后再回顾起来会很有趣！）。不过，除此之外，我只要努力让自己变得足够优秀，就能在拥有优秀 UI/视觉设计师的公司或客户那里工作就行了。😉

设计简介

我不确定实际的设计简介包含什么；我用这些指导点代替简介。

网站目标：

• 为我的在线形象创建视觉品牌
• 告知我是谁、我做什么、我的兴趣
• 展示我的前端开发和用户体验技能
• 获得参与，例如评论或分享

观众：

• 朋友和熟人
• 我与之互动的技术、设计或音乐社区
• 未来的潜在雇主、比赛评委等

情绪和语气：

• 定制，而非“模板化”
• 干净但不正式
• 引人注目、俏皮，但结构良好

设计风格和主题：

• 现代主义、瑞士、包豪斯、风格派、约瑟夫·穆勒-布罗克曼、工厂唱片海报
• 几何形状和线条
• 大型无衬线字体

（除了它们是我个人最喜欢的并且我从来没有在其他地方玩过它们之外没有其他特殊原因）

输入 Adob​​e XD

Adobe XD是 Adob​​e 的用户体验设计和原型设计应用程序。在我试用过的一些图形原型设计应用中，这款应用程序感觉最直观、最让人放心。

我特别喜欢的一些功能：

• 通过云同步离线工作（我选择它而不是 Figma 的主要原因）
• 可定制的网格
• 重复元素（对于“卡片”和帖子摘录非常有用）
• 资产库（保存颜色和排版样式，单击即可更改所有实例）
• 先进的“捕捉”功能让移动物品变得轻松愉快

确实，自从七月底以来，我唯一完成的事情就是移动东西。我会创建一个新的画板，添加内容，移动东西，这通常会产生一些细微的变化。然后，我会从另一个方向想到什么，再添加另一个画板，如此反复。

一直以来，我有时会偏爱某个版本，但第二天就换了另一个。然而，我对其中任何一个版本都没有强烈的感觉，不足以让我最终做出选择。这些设计——除了一些“实验性”的碍眼之处——确实满足了基本要求（清晰的层次结构、清晰的尺寸和颜色，以及用户可以轻松浏览/获取所需信息）。我该如何选择呢？

在这个过程中，我发现了视觉设计相比于前端开发其他部分究竟有多难：我不知道它什么时候有效，什么时候无效，以及如何找到最佳解决方案。当然，用户测试/访谈是理想的答案，但并非总是可行。

相比之下，在获取数据集并将其提供给用户的众多方法中（例如），我可以根据一组标准（速度最快、资源最高效、代码最简洁和/或最少、最不容易出错、使用我偏好的语言/语法等）来决定解决方案。如果我不知道如何做某事，我可以搜索 Stack Overflow（或 dev.to！）并调整其他人的解决方案以满足我的需求。这些在视觉设计中是无法实现的。

我努力工作到八月。士气越来越低落，我越来越忙。接下来的两个月里，我几乎每周只尝试设计一次，之后几乎没怎么动过，直到上周才重新开始。

这场地狱般的冒险终于在上周我的域名搜寻中结束了。在琢磨域名的时候，我打开了XD，看看哪个排版后看起来最好。我决定不在设计中写域名，但我也得到了一个新的设计灵感，它是由我之前最强的设计中的一些元素拼凑而成的。接下来的几天我不得不把它放下来处理更紧迫的事情，但昨天我又回去处理了，花了几个小时处理网格和其他所有事情，就这样……我知道我完成了。🤷🏽‍♀️

最上面的图片来自 Pablo Stanley 的超棒Humaaans作品集。它有 SVG 格式，编辑起来非常方便！中间的图片是Undraw的临时占位图——我请了我的插画家朋友来创作一幅作品，同时我打算开始开发网站。

如果你读到这里，感谢你的耐心！下一篇，我将记录如何在 React 和 Storybook 上开发 UI 组件。开始体验吧！😎

资源

领域

• Namecheap——广泛的域名选择，迄今为止服务良好
• Random.org Coin Flipper — 挑选一个好名字

数据模型和 ERD

• Lucidchart — 我用它来制作上面的图表。有免费套餐。他们也有关于ERD和数据库模型的优秀文章。
• ERDPlus — Lucidchart 的替代品，专注于 ERD；技术特性更好，但视觉效果不太美观

原型设计

• Adobe XD — 免费下载
• Humaaans — Pablo Stanley 的自由人插图
• Undraw ——Katerina Limpitsouni 的丰富的开源插图库
• ShapeFactory 出品的 Pigment——简洁美观的双色调色板生成器。自从发现了这个之后，我就不再使用其他颜色选择器了。
• Coolors.co — 另一个优秀的配色方案生成器
• 无障碍色彩——色彩对比度检查器（AA 和 AAA，可自定义字体大小和粗细）
• snook.ca 的色彩对比度检查——另一个具有更多技术细节的色彩对比度检查器

给不愿参与设计的设计师的建议

• 网页设计速成课程：从非设计师到非设计师 — Ali Spittel
• 重构 UI — Adam Wathan 和 Steve Schoger
• 更好的版式五分钟指南 — Pierrick Calvez
• 用户体验法则 — Jon Yablonski
• 网格的制作与打破：平面设计布局研讨会 — Timothy Samara — 并非设计技巧，但包含大量网格使用示例