当前位置:首页> 快速建站资讯> 如何设计和编码个人网站?

如何设计和编码个人网站?

发布时间:2020-04-09 09:35:00

很多开发人员认为善于设计是一种天生的能力,创造力是天生的。但设计是一项可以像其他任何东西一样学习的技能。你不必生来就是一个艺术家,创造一个美丽的网站,这需要实践。在小伙伴的博客这边,自己的网站,很多人都在使用开源的后台网站模板,熟悉的局限性太大,他们想跟着模板走,越是回头看自己的网站,越是不愉快,没有成就感。

本文介绍了如何从零开始设计一个个人网站,并将其转换为代码来进行设计实践。

当您可以使用诸如引导或预制模板之类的UI库时,为什么要设计自己的UI库?以下是设计网站的一些好处。

●①从人群中脱颖而出。许多开发人员博客使用类似的模板,很容易看出它不是自己设计的。如果个人网站的目的是展示你的能力,模板的使用可能会降低别人的认可度,降低你自己设计的独特风格,使你的网站在很多网站中脱颖而出。

●实践技能。设计它将帮助您实践设计原则、工具、HTML和CSS。开发用户界面并将其带到网络上会更容易。设计一个独特而现代的个人网站。

在过去,当我从事私人工作时,我没有设计页面或携带其他网站页面,这导致我在修改图片和一些页面时不会使用这些工具。设计的页面僵硬,用户不满意。我也觉得这很普通,没有给你我内心的感觉。

●③更好的应用性能。你的网站将是轻量级的,并将有更好的性能使用自定义CSS。如果您想要包含一个UI库或模板,它可能包含很多代码来覆盖您不使用的所有可能的定制。如果将未使用的代码发送给用户,将对网站的性能产生负面影响。加载速度慢,打开网页速度慢,这是很多人不接受的。

●培养专业技能。在web开发的角色中,您可能不必从头实现完整的web设计,但是您应该能够生成与现代设计一致的漂亮界面。作为一名“全栈开发人员”通常意味着精通后端语言或前端JavaScript框架,以及熟悉设计和产品知识。全堆栈开发人员应该具备一些基本的设计知识,并且能够为用户提供一致的体验。当然,毫无疑问,我们可以从中学到很多技能和知识。

●可能很有趣。创造让你自豪的东西是一种有趣的经历。如果你花点时间练习,思考并创建你自己的页面,不是更好吗?在生活中发现美是一件很好的事情,但我认为创造美更值得骄傲。

开始设计你的网站。不要直接写这一页。根据代码设计页面。很难从代码编辑器可视化设计,所以我建议先使用可视化设计工具,然后将结果转换为代码。现在有一些快速代码生成模板。我觉得小项目可以用。例如,我们的个人网站和大型项目不适合执行。

在制作界面原型的软件方面,我最喜欢的是balsamiq实体模型,这是一款小型的手绘轻量级软件。我喜欢它的原因如下:

第一步是为网站创建一个低保真度的线框。创建线框有助于在添加视觉设计和内容之前构造页面。线框不一定要漂亮,它应该关注内容的布局。您可以手动绘制或使用设计工具的基本功能。

要创建线框,我喜欢将设计看作一系列矩形。网页上的元素是自上而下流动的矩形块。从矩形开始不需要任何艺术能力。

在线框中放置元素由您决定。考虑添加导航栏、标题、博客文章和页脚。您可能不需要所有这些内容,但可以将其保留为基本内容,稍后再添加。确定要包含的内容并将这些部分合并到线框中。如果在布局上遇到问题,可以查看类似的网站,模仿网站内容的结构,然后根据需要进行修改。

线框并不一定完美。有了正确的网站结构,你可以转向视觉设计。

要将低保真线框转换为设计,请使用免费的设计工具,如figma。如果你从来没有用过设计程序,你也可以用PS来实现它,但是会有点慢,但是我在中国还没有找到像figma这样好的工具。

首先,创建一个空白的画布来表示空白浏览器页面。线框是在设计工具中通过创建内容容器来实现的。我建议你从黑白开始,这样你就可以专注于布局了。

优化布局,使元素大小正确、对齐并在它们之间留有空间。

在看起来像一个网站之后,让它看起来更漂亮。通过找出使布局看起来有吸引力的因素,可以通过模仿其他站点的强制网格样式将其添加到站点中。

在此阶段,请考虑形状、大小、边界和阴影。逐步将基本矩形升级为您喜欢的样式。

字体和空间的设计非常有助于美观。即使是简单的设计,只要排版得当,也能达到高质量。类似地,您可以模拟另一个网站或搜索字体和字体资源,将它们合并到您的设计中。但一定要注意版权。

请记住,一家公司,不管字体版权如何,都会在自己的网站上使用方正字体,被告侵权,需要赔偿。

接下来,为站点添加颜色。通过建立品牌来提供网站功能。想想你希望网站如何吸引读者。如果你想让它看起来干净和最小,选择颜色不太明亮,梯度是微妙的,字体是容易阅读。如果你想让它看起来有趣,选择明亮的颜色,使用明亮的渐变,应用背景纹理,使用圆形元素,然后选择粗体字体。

添加颜色可能看起来令人望而生畏,但您不需要知道它是如何工作的。如果你的设计从黑白开始,你可以选择单色来强调元素,赋予设计生命。如果要超出此范围,建议您选择一种或两种喜欢的颜色,然后对该颜色使用不同的亮度变化。这有助于创建一个连贯的主题,而不必成为一个色彩专家。选择背景色和前景色时,请通过检查颜色对比度来记住可读性。

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

将颜色融入设计后,继续检查总体设计感觉并进行调整。

在设计时,你应该退后一步,看看整个设计并加以改进。通过用一种简单的语言描述你所看到的东西来批评你的设计,然后把它变成一个需要解决的技术问题。

GitHub上的一个项目是pix2code,它可以直接生成HTML结构并将CSS代码附加到页面上。它是开源的。如果你感兴趣的话,可以去看看。它真的很悬。

目前中国还没有这样的项目。有很多老板想做拖拉式开发,但他们没有遇到任何真正做过的人。如果他们做不到,那肯定不是技术无法实现。拖放的本质是在组件库的基础上增加一个交互界面,因此组件化是拖放开发的第一步,其余的实际上是“布局”,但系统实现有很多局限性。

可拖动组件应该封装控制层和视图层。原则上,耦合度越低,凝聚力越好,集成度越好。只公开配置项。也就是说,在将组件拖到接口上之后,有一种机制可以动态生成配置面板。“布局”也有一个简单的配置机制,但它离生产水平还很远,这里可以约定一个统一的规则,使组件的配置项可以读取,也可以按组件枚举,这样接口就可以很硬,有利有弊;

相互依赖的组件之间的数据交互会出现问题,因为每个组件的输入和输出不能完全一致,并且相互依赖的组件之间不会有无缝的访问。在正常的开发中,开发人员会手动地做一些“调整”工作,比如剪切或修改组件到B组件的输出,但是现在它是拖放式的。这种数据修改是不可能的,而且可以修改的组件可以互相适应,或者一步可以在拖动系统上完成一组数据修改的中间功能,这样操作者就可以自己适应,这有很大的缺点。

所以在这里,我们必须一步一步地剪切页面,尽可能地响应,并根据设计草案中填写的内容填充HTML结构中的元素。

当把一个布局变成一个完整的设计时,我喜欢考虑将设计从上到下分成多个部分的水平线。顶部导航栏可能是第一个部分。中间可以是一片,底部是一片,我会用明显的线条来区分它们,用不同的颜色,美丽而清晰。

一般来说,在企业工作时,设计师会给出设计草图并给出效果建议。我们直接根据设计师的草稿裁剪页面,自始至终都有交互效果,

网页设计完成,个人网站用代码制作。然后在服务器中配置和部署后台和网站。这里我们使用siteservercms内容管理系统作为我们网站的背景。如何使用?点击阅读更多。因为我们设计自己的网站,我们会忽略其中的免费模板。

至于后期的网站速度优化,我在代码优化之前也提到过,并写了文章详细说明。你也可以看看。

我总结了所有你不知道的“前端性能优化”知识

网站开得很慢,这些是关键,不重要

您将通过自己的设计和编码以及以后的发布来了解这一点。

有没有一个小合伙人在设计和建造这个网站?或者你觉得贵公司的设计师不过是模仿还是模仿,不管是什么样的设计,他们都是一样的?我们谈谈。