这听起来很熟悉吗？你有一个很棒的想法，你建立了这个想法，你开始查看最终结果并思考......这看起来很糟糕。 最糟糕的是，你不知道如何解决它。毕竟我们是开发者，不是设计师。 幸运的是，你不必是一个了不起的设计师。您只需要足智多谋并了解一些简单的设计技巧。互联网上充满了免费的工具和资源，可以补充您缺乏的设计技能。 我将向你展示如何利用这些资源来创造你可以引以为豪的东西。 本指南将介绍我用于设计网站的工具、技术和资源。这不是全部，但对于那些与设计斗争的人来说，它是一个很好的指导方针。我们将构建一个名为 DesignDo 的应用程序。它将是设计技巧和资源的集合（太元了！）。我们使用的一切都将 为了让我们专注于这篇文章的重点，我们不会使用前端框架。只是静态 HTML。 100% 免费。 规划 使用 CSS 框架 你有没有和一个不擅长保龄球的人打保龄球？他们把那些保险杠放在车道上，这样他们就不能扔下水道球了？ CSS 框架是你的保险杠。几乎不可能和他们一起扔一个“阴沟球”。它们将为您提供一个很好的起点，并为努力解决设计需求的开发人员提供约束。 我会推荐 Tailwind CSS。它使用作为 CSS 属性抽象的类。它可以作为学习 CSS 的辅助工具，而且很容易用它来制作漂亮的网站。在 阅读文档。 此处 另外，如果您不使用 React 或 Vue 等前端框架，我建议您使用 alpine js。它非常适合简单的 UI 更改，例如在移动设备上将导航变成汉堡菜单。 颜色 把事情简单化。 使用白色背景和黑色或深灰色文本。如果您在背景颜色较深的区域（如按钮）中有黑色文本，请将其更改为白色。 您的徽标和号召性用语按钮的 。谨慎地使用它来让您在设计中“脱颖而出”。 1 种原色 应该是浅色，以使卡片从白色背景中脱颖而出。最简单的方法是为此使用各种浅灰色。他们什么都去。  次要颜色 确定您网站的个性 每个网站都有个性。他们可以是严肃的和商业的。他们也可以很有趣和轻松。弄清楚您希望网站的个性是什么。这将确定您将使用的几个 CSS 属性。想办法？好的。 现在，如果你选择了  ，我建议使用： Serious ：使用默认的顺风 CSS 字体。您无需配置任何内容。 字体 ：不要使用边框半径。方形按钮和盒子散发出严肃的氛围。 边框半径 ：对于您的原色，深蓝色、绿色、灰色和紫色都是不错的选择。  颜色 如果你选择  ，我建议使用： fun ：Tailwind 默认或 字体 装束 ：使用中到大的边界半径。不过选1。不要混合不同的边框半径大小。保持一致。 边界半径 对于您的原色，您有很多选择。不过，我建议使用较浅的鲜艳颜色。  颜色： 为您的应用程序使用 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 : 也在 发布。 这里

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

About Author

註釋

標籤

这篇文章刊登在

Related Stories

Claude Sonnet 3.5 系统提示泄漏：法医分析

加密货币增长：创建有效的用户角色

点击赚钱：Telegram 可能会在 Solana 之前吸引下一个 100 亿加密用户

比特币 UTXO 模型，为独特的生态系统提供动力

Claude Sonnet 3.5 系统提示泄漏：法医分析

加密货币增长：创建有效的用户角色

点击赚钱：Telegram 可能会在 Solana 之前吸引下一个 100 亿加密用户

比特币 UTXO 模型，为独特的生态系统提供动力

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps