即使你不会设计，如何制作一个漂亮的网站

这听起来很熟悉吗？你有一个很棒的想法，你建立了这个想法，你开始查看最终结果并思考......这看起来很糟糕。

最糟糕的是，你不知道如何解决它。毕竟我们是开发者，不是设计师。

幸运的是，你不必是一个了不起的设计师。您只需要足智多谋并了解一些简单的设计技巧。互联网上充满了免费的工具和资源，可以补充您缺乏的设计技能。

我将向你展示如何利用这些资源来创造你可以引以为豪的东西。

本指南将介绍我用于设计网站的工具、技术和资源。这不是全部，但对于那些与设计斗争的人来说，它是一个很好的指导方针。我们将构建一个名为 DesignDo 的应用程序。它将是设计技巧和资源的集合（太元了！）。我们使用的一切都将100% 免费。为了让我们专注于这篇文章的重点，我们不会使用前端框架。只是静态 HTML。

规划

使用 CSS 框架

你有没有和一个不擅长保龄球的人打保龄球？他们把那些保险杠放在车道上，这样他们就不能扔下水道球了？ CSS 框架是你的保险杠。几乎不可能和他们一起扔一个“阴沟球”。它们将为您提供一个很好的起点，并为努力解决设计需求的开发人员提供约束。

我会推荐 Tailwind CSS。它使用作为 CSS 属性抽象的类。它可以作为学习 CSS 的辅助工具，而且很容易用它来制作漂亮的网站。在此处阅读文档。

另外，如果您不使用 React 或 Vue 等前端框架，我建议您使用 alpine js。它非常适合简单的 UI 更改，例如在移动设备上将导航变成汉堡菜单。

颜色

把事情简单化。

使用白色背景和黑色或深灰色文本。如果您在背景颜色较深的区域（如按钮）中有黑色文本，请将其更改为白色。

您的徽标和号召性用语按钮的1 种原色。谨慎地使用它来让您在设计中“脱颖而出”。

次要颜色应该是浅色，以使卡片从白色背景中脱颖而出。最简单的方法是为此使用各种浅灰色。他们什么都去。

确定您网站的个性

每个网站都有个性。他们可以是严肃的和商业的。他们也可以很有趣和轻松。弄清楚您希望网站的个性是什么。这将确定您将使用的几个 CSS 属性。想办法？好的。

现在，如果你选择了Serious ，我建议使用：

• 字体：使用默认的顺风 CSS 字体。您无需配置任何内容。
• 边框半径：不要使用边框半径。方形按钮和盒子散发出严肃的氛围。
• 颜色：对于您的原色，深蓝色、绿色、灰色和紫色都是不错的选择。

如果你选择fun ，我建议使用：

• 字体：Tailwind 默认或装束
• 边界半径：使用中到大的边界半径。不过选1。不要混合不同的边框半径大小。保持一致。
• 颜色：对于您的原色，您有很多选择。不过，我建议使用较浅的鲜艳颜色。

寻找灵感

好的，所以您对您的网站将呈现什么样的个性有所了解。现在去寻找一些灵感来激发你的创造力。不要将某人的设计复制到 T 或他们的代码中。用它作为你的北极星。

网页设计灵感网站

• https://land-book.com/
• https://www.awwwards.com
• https://www.siteinspire.com/
• https://dribbble.com/

我的选择

DesignDo 将是一个有趣/有创意的网站。我将在按钮和卡片上使用默认的顺风字体和较大的边框半径。我还将使用浅紫色作为我的主要颜色。

我将使用这个网站模板作为我的灵感......

它有一个不错的英雄部分，我可以在其中放置一些关于我的网站是什么的副本和一个垂直列表，我需要列出我的设计技巧和资源。

更聪明地工作，而不是更努力地工作

在开发和设计方面变得更好的一部分是吞下你的自我。您不是一个更好的开发人员，因为您从头开始构建所有内容。你只是一个缓慢的开发者。建立您的网站也是如此。

查找免费组件或主题

我从不从头开始我的 HTML。我总是从一些预先构建的组件开始，然后从那里开始。

将使用一个很棒的免费选项， Wicked Blocks 。

使用我的灵感网站来指导我，我选择了以下要使用的块。

我的标题

英雄

以下是折叠内容：

页脚

将您的块放在 HTML 中

在我们开始定制我们的网站之前，让我们将我们的块放在 HTML 中。

这是一个好的开始，但在 DesignDo 成为我们想要的地方之前，我们还有一些工作要做。

标识

再次，保持简单！

我通常为我的网站使用基于文本的徽标。我的网站名称是 DesignDo，所以这就是我的徽标。我通常会使用原色作为背景并使用白色或黑色文本。文本颜色是关于可读性的。因此，如果在原色之上难以阅读白色文本，请使用黑色文本，反之亦然。

您可以通过编写 HTML 或使用图像编辑器来创建您的徽标。

如果您决定使用图像编辑器，我推荐Photopea 。

它是 Photoshop 的仿制品，它是免费的，而且非常棒！您还可以上传自己的文本字体。

对于 DesignDo 徽标，我将使用名称作为带有加粗字体的文本。背景将是我的原色。

我还为徽标添加了轻微的旋转，以使其更具特色。 （如果您要进行更严肃的设计，请不要这样做。

导航链接

导航链接应该没有太大关系。确保文本为灰色或黑色。如果你想在文本中添加图标，你可以。 Heroicons是一个很棒的免费图标库，我一直在使用它。如果您正在制作一个更严肃的网站，我建议您使用它。

您还可以将 Heroicons 用于有趣/有创意的网站。如果我的网站个性有趣且富有创意，我也喜欢使用表情符号作为图标。

对于 DesignDo，我只有 1 个导航链接，我将使用火表情符号来引起更多关注。

英雄

因为我们使用 Wickedblocks 为我们提供了先机，所以英雄部分没有太多事情要做。

我们只需要更新一些文本。在处理像我们这样的大标题标签时，以第一行比第二行长的方式构造它。它更吸引眼球。

我们还需要将通知我按钮的颜色更新为我们的原色

内容

再一次，我们希望我们的首屏内容看起来并不遥远。

我没有感觉到图标。他们不符合网站的个性。因此，我将联系 Heroicons 以获得更符合我们主题的东西。

这样更好！我将不理会图标的背景，因为它是浅灰色的，与我们的深色图标和白色背景形成鲜明对比。它也是圆形的，因此它遵循我们的大边界半径主题。

“短篇标题”是一个 H2，但它使用的样式与其下方的描述相同。我们希望提示的标题能够突出并引起读者的注意。我将稍微增加它的大小和字体粗细（我们不希望它大于它上面的 H1 标签）。

最后，我们将使用我们自己的设计技巧更新来自 wicked blocks 的千篇一律的文本！

概括

很多人支持使用自己的手工 CSS 并使用 Figma 等设计工具来创建模型。我同意，它们都是很棒的东西。但事实是，作为一名开发人员，我没有时间成为 Figma 的专家，也没有时间编写我自己的自定义 CSS 库，我可以将这些库从一个项目带到另一个项目。

但我可以足智多谋，使用互联网上的免费工具和资源快速创建好看的设计。

如果您想查看我在这篇文章中创建的项目，请点击以下链接：

你可以在这里找到 DesignDo。

这个项目的 repo在这里。

如果您喜欢这篇文章，请随时加入我的时事通讯@https : //thefreelancedev.com

也在这里发布。