如何设计和编码个人网站

许多开发人员认为，擅长设计是一种天生的能力，富有创造力是您与生俱来的。但是设计是一项可以像其他任何东西一样学习的技能。您不必天生就可以创建一个漂亮的网站的艺术家，它需要实践。本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

✨为什么要自己设计？

当可以使用Bootstrap之类的UI库或预制模板时，为什么要自己设计？以下是设计网站的一些好处。

1. 在人群中脱颖而出。许多开发人员博客都使用类似的模板，很容易看出它不是自定义设计。如果个人网站的目的是展示您的能力，那么使用模板可能会损害该目标。

2. 练习技巧。设计它会帮助您练习设计原则，工具，HTML和CSS。您将更容易开发用户界面并将其引入网络。

3. 更好的应用程序性能。您的网站将是轻量级的，并且使用自定义CSS会具有更好的性能。如果要包括UI库或模板，则它可能包含大量代码，以涵盖您未使用的各种可能的自定义。如果未使用的代码发送给用户，则会对您网站的性能产生负面影响。

4. 发展职业技能。在Web开发角色中，您可能不必从头开始实施完整的网站设计，但是您应该能够制作与现有设计一致的外观精美的界面。成为“全栈开发人员”通常意味着精通后端语言或前端JavaScript框架，同时能够熟悉设计，HTML和CSS。这项工作最终完成了，但结果可能并不美观，可能与应用程序的其余部分不一致，或者在某些设备上无法访问。全栈开发人员应具有一些基本的设计知识，并能够为用户提供一致的体验。

   “全栈开发人员”

5. 可能很有趣。创造出令您感到骄傲的东西是一种有益的经历。如果您花一些时间练习它，可能会很愉快。您不必成为一名艺术家就可以乐在其中

要开始设计您的网站，请逐步执行。很难从代码编辑器中可视化设计，我建议先使用可视化设计工具，然后将其转换为代码。首先中心化精力设计会更容易，这样您就可以看到它并进行调整，而不必重写代码。

?创建线框

第一步是创建站点的低保真线框。创建线框有助于在添加视觉设计和内容之前建立页面的结构。线框不需要很漂亮，它应该专注于内容的布局。您可以手工绘制它，也可以使用设计工具的基本功能。

为了创建线框，我喜欢将设计视为一系列矩形。网页上的元素是从上到下流动的矩形块。从矩形开始不需要任何艺术才能。

网站结构

放置在线框中的元素由您决定。您可以考虑添加导航栏，页眉，博客文章和页脚。您可能不需要所有这些元素来开始，可以将其保留为基本内容，以后再添加。确定要包括的内容并将这些部分合并到线框中。如果您在执行此步骤时遇到问题，可以查看一个类似的网站，模拟内容的结构，然后对其进行修改以适合您的需求。

线框不一定是完美的。在拥有合适位置的网站结构之后，就可以转向视觉设计。

?应用视觉设计

要将低保真线框转换为设计，可以使用免费的设计工具，例如Figma。如果您从未使用过设计程序，则可能需要一些练习才能适应，但您不必成为专家。基本功能（例如添加矩形，调整大小和设置属性）足以开始使用。

实施布局

首先，创建一个空白画布以代表空白浏览器页面。通过为内容创建容器，在设计工具中实现线框。我建议先从黑白开始，以便您可以专注于布局。

优化您的布局，以使元素大小适当，对齐并在它们之间留出空间。

添加节和占位符内容

在看起来像一个网站之后，使其看起来更漂亮。弄清楚是什么使元素看起来有吸引力，从而模仿其他网站的样式。

在此阶段，请考虑形状，大小，边界和阴影。用您喜欢的样式逐渐升级基本矩形。

更新版式

字体和间距对使设计看起来更美观大有帮助。如果排版做得好，即使是简单的设计也可以是高质量的。同样，您可以模拟另一个网站或搜索字体和字体资源，以将其合并到您的设计中。

给它颜色

接下来，为站点添加颜色。通过建立品牌来赋予网站特色。考虑一下您希望网站如何吸引读者。如果您希望它看起来干净且极少，请选择不太亮的颜色，使渐变保持微妙，并选择易于阅读的字体。如果您希望它看起来有趣，请选择明亮的颜色，使用鲜艳的渐变，应用背景纹理，使用圆形元素以及选择醒目的字体。

添加颜色似乎令人生畏，但您无需了解颜色原理即可。如果您的设计从黑白开始，则可以选择一种单一的颜色来强调元素，以赋予设计生命。如果您想超越此范围，建议您选择一种或两种您喜欢的颜色，然后使用该颜色的不同亮度变化。这有助于创建一个具有凝聚力的主题，而不必成为色彩专家。选择背景色和前景色时，请通过检查颜色对比来牢记可读性。

例如，将深蓝色设置为背景，然后将较浅的蓝色设置为文本。对于白色背景色，您可以将蓝色的中等亮度用作标题。

将颜色纳入设计后，请继续检查总体设计并进行调整。

细化

在设计时，您应该退后一步来查看整个设计并进行完善。通过用简单的语言描述您所看到的内容来批判您的设计，然后将该声明转换为需要解决的技术问题。

• 看起来局促吗？

  • 增加填充和边距。

• 文字难以阅读？

  • 选择更清晰的字体或增加字体大小。
  • 增加背景和前景之间的颜色对比度。

• 内容难解析？

  • 添加具有较高字体粗细的标题。
  • 在标题和段落之间添加更多间距。

• 看起来草率或不一致？

  • 在水平和垂直的直线上对齐元素。在设计程序中设置指南可以帮助确保元素正确对齐。
  • 调整填充和边距，以保持垂直方向上一致的间距。
  • 通过建立标题和段落的字体和大小来使文本一致。避免文本变化太多。
  • 确保所有颜色都符合您的调色板。

完成设计后，您可以开始将其转换为代码。

?创建HTML结构

将所有HTML元素放在页面上，不必担心添加CSS。

这将使您看到HTML文档和框模型的自然流程。用HTML建立页面的结构将使您更容易知道需要在CSS中添加哪些内容以对元素进行定位和样式化以使其与设计相匹配。

放置好HTML之后，继续使用CSS进行定位和样式化。

with用CSS设置样式

因为HTML文档是从上到下流动的，所以您可以从文档的顶部开始，然后向下移动。使用您创建的设计，尝试在HTML和CSS中尽可能地复制它。

请记住，它不一定全部或全部，您可以实现网站初始版本所需的部分。对于我的网站，我只想要一个介绍，社交链接以及一种发布博客的方法，因此，这就是我最初实现的全部。如果您尚未准备好实现某个部分，则可以将其删除，直到准备就绪为止。

放置截面和元素

我建议着重于元素的布局，并保留美学方面以供以后使用。如果同时布置元素和设置样式，则可能导致来回摆动，从而限制了进度。一个示例是在尝试设置字体外观，粗细和大小时布置导航栏。您可能会在所需的位置中拥有所有内容，但是调整字体会使所有内容消失。这可能会触发您然后修改导航栏以使所有内容再次适合。但是，如果导航栏现在太高怎么办？您可能会来回几次，这可能会导致挫败感。相反，我建议首先关注元素的布局，并尝试使其适用于不同大小的内容。在CSS中，这可能需要反复试验，但是您要确保元素具有足够的宽度以舒适地容纳其中的内容。

将布局变成完整的设计时，我喜欢考虑将设计从上到下划分为多个部分的水平线。顶部的导航栏可能是第一个切片。您可以只关注导航所需的HTML和CSS，而不必担心下面的内容。在导航栏中，垂直切片可以将其进一步分解为组成导航的元素。专注于最左边的元素，然后向右走。定位导航栏后，移至其下方的部分。

添加视觉样式

通过参考设计并添加相同的字体，字体大小，字体粗细，颜色和图像来对元素进行样式设置。将设计转换为Web时，您可能需要进行调整，因为浏览器中的呈现可能会有所不同。

使其响应

使其具有响应能力，以便各种屏幕尺寸的用户都可以轻松查看您的内容。使站点具有响应能力并不需要很复杂。它不必四处移动元素或具有仅用于移动设备的菜单。使基本设计响应的一种简单方法是，在元素开始被截断或开始收缩时使其具有断点，使元素堆叠并使其变为页面的整个宽度。

现在您已经实现了设计，就可以完成了在这里，您可以决定要使用它做什么。

?后续步骤

• 现在，您已经设计了网站并进行了编码，可以添加内容并进行托管。

• 您可以通过构建后端或将设计添加到前端框架来继续将其用作学习项目。
• 不断练习，不断提炼。完成舒适的设计可能需要一些时间。我希望本指南是朝正确方向迈出的一步。

?总结

• 自己设计网站将帮助您练习设计技能，并帮助您的网站脱颖而出。
• 创建线框以构造内容和功能。
• 使用设计工具将线框转换为视觉设计。从您喜欢的设计中获取灵感。
• 对页面的HTML结构进行编码，以帮助了解需要使用哪些CSS来转换这些元素。
• 使用CSS设置页面样式以匹配您的设计。
• 通过部署，将其用作实践项目或继续改进设计，将其提升到一个新的水平。

?有分享技巧吗？想要炫耀您的设计？需要设计反馈吗？在下面发表评论