如何设计和编码制作个人网站怎样设计网站( 二 ) _创业生活

文章插图

线框不一定是完美的。在拥有合适位置的网站结构之后，就可以转向视觉设计。
●③应用视觉设计
要将低保真线框转换为设计，可以使用免费的设计工具，例如 Figma（下一代的设计神器）。如果你从未使用过设计程序，你也可以用ps来实现，不过会有点慢，但在国内我还没有找到类似 Figma 这么好用的工具。

文章插图

●④实施布局
首先，创建一个空白画布以代表空白浏览器页面。通过为内容创建容器，在设计工具中实现线框。我建议先从黑白开始，以便你可以专注于布局。
优化您的布局，以使元素大小适当，对齐并在它们之间留出空间。

文章插图

●⑤添加部分和占位符内容
在看起来像一个网站之后，使其看起来更漂亮。通过弄清楚是什么使布局看起来有吸引力，可以模仿其他网站的逼格样式来添加到自己的网站。
在此阶段，请考虑形状，大小，边界和阴影。用你喜欢的样式逐渐升级基本矩形。

文章插图

●⑥更新版式
字体和间距的设计对美观大有帮助。如果排版得当，即使是简单的设计也可以是高质量的。同样，你可以模仿另一个网站或搜索字体和字体资源，以将其纳入你的设计中。但是一定要注意版权。
记得有家企业，不管字体版权问题，在自家网站使用方正字体，被告侵权，这是需要赔偿的。

文章插图

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

文章插图

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

文章插图

文章插图

【如何设计和编码制作个人网站怎样设计网站】将颜色合并到设计中后，请继续检查总体设计感并进行调整。
●⑧注意细节
在设计时，你应该退后一步来查看整个设计并进行完善。通过用简单的语言描述您所看到的内容来批判你的设计，然后将该陈述转换为需要解决的技术问题。

看起来紧凑吗？增加填充和边距。
文字难读？选择更清晰的字体或增加字体大小。增加背景和前景之间的颜色对比度。
内容难识别？添加具有较高字体粗细的标题。在标题和段落之间添加更多间距。
看起来草率或不一致？在水平和垂直的直线上对齐元素。在设计程序中设置指南可以帮助确保元素正确对齐。调整填充和边距，以保持垂直方向上一致的间距。通过建立标题和段落的字体和大小来使文本一致。避免文本变化太多。确保所有颜色都符合你的调色板。

文章插图

完成设计后，就可以开始将其转换为代码●①创建HTML结构
Github上有个项目是 pix2code，它可以直接将页面生成HTML结构并附加CSS代码，已经开源了，感兴趣的可以去看看，确实很吊。
国内暂时还没有这样的项目，想搞拖拽开发的老板真是不少，但没见过谁家真正做出来了，做不出来肯定不是技术不能实现，拖拽的本质是在组件库基础上加了一层交互界面，所以组件化是拖拽开发的第一步，剩下的其实就是"layoutit"了，但要真正落地，就有很多限制。