这听起来很熟悉吗？你有一个很棒的想法，你建立了这个想法，你开始查看最终结果并思考......这看起来很糟糕。 最糟糕的是，你不知道如何解决它。毕竟我们是开发者，不是设计师。 幸运的是，你不必是一个了不起的设计师。您只需要足智多谋并了解一些简单的设计技巧。互联网上充满了免费的工具和资源，可以补充您缺乏的设计技能。 我将向你展示如何利用这些资源来创造你可以引以为豪的东西。 本指南将介绍我用于设计网站的工具、技术和资源。这不是全部，但对于那些与设计斗争的人来说，它是一个很好的指导方针。我们将构建一个名为 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

架构师指南：构建 AI/ML 数据湖参考架构

创建以用户为中心的加密产品：客户反馈的重要性

从论坛到信息流：社交媒体算法如何塑造数字互动

看不见的层面：为什么用户访谈是不可替代的资产

架构师指南：构建 AI/ML 数据湖参考架构

创建以用户为中心的加密产品：客户反馈的重要性

从论坛到信息流：社交媒体算法如何塑造数字互动

看不见的层面：为什么用户访谈是不可替代的资产

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps