在没有任何设计技能的情况下创建一个新项目

嘿，大家好！

这一次，我们将探讨如何从零开始构建一个新产品，并在专注于实际功能之前，先克服使其外观美观吸引人的障碍。

无论你是想创建一个个人项目、一个快速的概念验证，还是一个副业的最小可行产品，使用这些工具都能帮助你快速上手，获得一个相当不错的起点，足以与他人分享并收集一些反馈，然后再将其变成现实。

话虽如此，让我们来看看我们可以利用哪些资源来启动我们的项目，并使其更接近发布阶段。

GIF

入门

所以我们有一个可能大获成功的想法，我们希望把它做得更好，这样它就不会被当作“又一个东西”而被忽略。

最基本必需品有哪些？

我们主要需要三样东西。

• 调色板
• 一个漂亮的标志
• 两种字体。

如果你愿意的话，还可以添加一句标语和一些与品牌相关的关键词。

现在，调色板的作用是为项目及其所有相关素材提供视觉上的一致性。

标志是项目的门面，是人们第一次在户外看到它时所看到的，无论它只是一个图形还是包含名称，它都会留在观众的脑海中。

最后，使用这两种字体是为了再次为项目带来视觉上的一致性，但这次是在所有文字部分。

据说一个项目通常需要一种主字体和一种辅助字体，在某些特殊情况下，还需要第三种字体，尽管这种情况并不常见。

现在我们已经确定了要点，让我们从头开始，按顺序逐一解决。

调色板

为整个项目选择相互匹配和互补的颜色作为调色板（而不是使用随机组合或选择在整个项目中只使用一次的颜色），这本身就是一门艺术。

但选择合适的互补色不仅是一门艺术，更是一门科学。此外，它的全部意义在于为项目奠定基础，使其外观美观，并给用户带来一致的体验。

这可能是一个非常主观的问题，但你会惊讶地发现，那些“看起来不错”的东西有很多共同之处。

为了完成这项任务，我们将借助一个名为colormind.io的在线工具，它可以帮助我们创建一个一致且匹配的配色方案，作为我们项目的基础颜色。

您可以点击“生成”按钮，创建一组 5 种搭配和谐的颜色。您也可以“锁定”之前选定的颜色，生成器会自动为其找到一些互补色。

你可以调出颜色选择器，对选定的颜色进行修改，例如调整缺失的颜色或你不喜欢的色调。你还可以交换不同颜色的位置，看看它们搭配在一起的效果。

你甚至可以上传一张图片，生成器会从图片中提取颜色，并建议剩余的颜色，从而为品牌创建一个协调的调色板。

品牌标志

说到图像，如果没有一张好的图像作为项目的主要“门面”，那么再好的色彩组合也无从谈起？

您可以使用Canva等网站或 Gimp、Inkscape 等工具，甚至可以拿出老牌可靠的画图软件，用新创建的调色板和一些形状来制作徽标。

但如果你恰好缺乏任何设计技能，或者不知道什么是“好看的”，那该怎么办？

同样，让我们​​使用一个工具来完成这项工作。这次，我们将使用一个名为BrandMark 的工具。

一旦您进入该网站并点击“创建我的徽标”按钮，系统会询问您一些关于您想要创建的品牌的问题，例如名称、可选的标语和相关关键词等等。

一旦你提供了所有信息，网站就会开始为你创建几乎无穷无尽的选项，并为你提供多个选择。

• 可以编辑当前徽标（名称、标语、图标、颜色等）。
• 一个名为“创意”的选项，您可以从中进行选择，使徽标看起来更具“定制感”。
• 如果您（像我第一次尝试时一样）对为您创建的徽标感到惊艳，可以选择保存该徽标。
• 您可以选择购买包含所有必要素材的完整品牌推广包，如果您想发展副业，制作数字和实体产品，并在任何地方进行推广，那么这个方案就能满足您的所有需求。（我是说真的，看看这个例子里都包含了哪些内容！）

尽管如此，即便掌握了所有这些信息，我们仍然缺少最后一块拼图。

这两种字体

如果您不想使用默认系统字体，或者想换用其他字体，例如常见的 Lato 和 Roboto 字体，您可以自己搜索两种搭配和谐的字体（可能像我一样，会花几个小时来挑选不同的组合🙄）。

但是，如果我们有工具可以简化这一切，我们就无需自己费力去做这些繁重的工作了。这个工具就是Fontjoy。

这个功能非常简单。您可以点击“生成”按钮，即可获得一个与您的字体完美匹配的组合，并查看文本示例。您也可以选择一个您已经很喜欢的字体，并为其寻找合适的搭配。

点击特定字体旁边的锁形图标，生成器会找到其他匹配的字体（如前所述，最多可以选择 3 种字体）。您还可以选择要使用的字体样式。

此外，还有一个滑块可以调整，用于增加或减少所选字体之间的对比度（即生成的字体彼此更相似或更不同）。

现在这三个要素都已完成，我们基本上就完成了创意/原型/最小可行产品（MVP）的品牌设计。接下来，让我们看看把所有这些要素结合起来会是什么样子。

综合起来

举例来说，我想向你们展示一下我与一位同事合作的一个项目中，运用这些工具制作的成果之一。

这个项目的想法是创建一个杂货店网站，用户可以在网站上从产品列表中选择商品，然后将选定的商品添加到购物车中。

以下是构成网站调色板的生成颜色。

$blue: #6b879f;
$orange: #ce794b;
$white: #dfd9c6;
$secondary: #8c8283;
$tertiary: #ad7d67;

这是该工具生成的徽标

现在，所有这些内容都放在一起（在网站首页上）。

现在您可以看到，首页的视觉效果对于一个网站来说已经足够好了，看起来并不业余，而且把所有这些部分组合在一起也不需要太多时间（总共可能不到 2 小时）。

接下来需要做的就是编写代码，使网站具备标准购物网站的功能。

一旦这些内容创建完成，它们将置于已建立的品牌框架内。

这时你就可以开始使用你选择的框架编写代码，构建你的项目、想法、副业等所需的功能了。

现在你可以利用这些元素，将一个“外观漂亮的原型”变成一个“外观漂亮且功能齐全”的项目。

你也可以选择更简便的方法，使用诸如Divjoy或Appseed之类的服务来生成项目所需的代码。

各位，就是这样！我们利用了科技这个好朋友，帮助我们轻松启动了产品创建过程，无需特殊技能，最重要的是，无需在实施细节上花费太多时间。

本周的文章就到这里！希望这篇文章对您有所帮助，让您在下次自己（或您认识的人）有了想法并想快速制作原型来测试其可行性时，能够用到其中的一些工具。

我已经在项目和工作中多次使用这些工具，它们帮我节省了大量时间，否则我可能会陷入细节的纠结中，而忘记了最初要构建的整体目标😅

非常感谢您阅读至此，如果您有任何其他节省时间的实用工具，请告诉我，我们下篇文章再见。

照片由Halacious拍摄，来自Unsplash