当前位置: 移动技术网 > IT编程>脚本编程>vue.js > 【个人网站开发 · 记录二】UI设计阶段 —— 设计角度分析如何去做一个个人网站

【个人网站开发 · 记录二】UI设计阶段 —— 设计角度分析如何去做一个个人网站

2020年09月28日  | 移动技术网IT编程  | 我要评论
文章目录前言一. 需求分析二. UI设计2.1 LOGO设计2.2 色彩搭配2.3 风格基调三. 技术栈选择3.1 动态网站3.1.1 Vue全家桶3.1.1 nginx3.1.1 Vue全家桶3.1.1 Vue全家桶2.2 静态网页1.1 VuePress —— vue驱动的静态网站生成器1.2 VuePress-Creator —— VuePress脚手架1.3 Gitee —— 基于Git的代码托管和协作开发平台前言当下的自媒体时代,体现在一个爱折腾的程序猿身上,那么最好的方式莫过于 —— 搭建自

前言

当下的自媒体时代,体现在一个爱折腾的程序猿身上,那么最好的方式莫过于 —— 搭建自己的个人网站。网站上可以有自己的个人介绍,技术博客,项目总结,生活分享等等。简直是COOL !(面试神器有木有🐶)

在这里插入图片描述
就像上图这样,绝对原创设计,盗图必究!🐶

有了想法就去实现它!我们都知道传统的软件开发流程大致可分为分析,设计,编码,测试,部署,上线,运维等七大阶段。 这里就做一个链接合集,记录一下我本次项目的开发历程(有觉悟的童鞋建议跟我一起动手哦):



🏆 UI设计阶段 🏆

我想大部分的程序猿对于UI设计都不太感冒,所以一直都有一切从简,模板至上的原则。这里我就不多BB了,本篇仅作为我个人的简单记录。

一. LOGO设计

虽然说这次项目完全是我自己的一时兴起,但该有的细节还是不能少的。这个LOGO设计也是做的很全面,包括了文字LOGO,图形LOGO以及彩色版本和各种排版的变形(响应式LOGO)

1.1 文字LOGO

采用字重较大的非衬线字体,然后做换行的处理,再加上能体现代码的元素 —— 双引号 ( " ) 和尖括号 ( > )
在这里插入图片描述

1.2 图形LOGO

图形化的LOGO也是提取了名称里的首字母CZJ,整体依靠同心圆之间的布尔运算得到。简洁干练!
在这里插入图片描述
组合起来的黑白灰三色效果分别如下:

在这里插入图片描述

1.3 彩色版本

黑白配色的基础上搭配时下流行的霓虹渐变的彩色背景,再给代码元素赋予红色和紫色的点缀。整体效果立马变得靓丽活泼起来。红色版本看起来也不错的亚子?

在这里插入图片描述

1.4 响应式LOGO

在页面响应式开发的同时,LOGO的设计也应该是响应式的,不是吗?

在这里插入图片描述

二. 色彩搭配

在彩版LOGO的设计中已经有所体现,没错,就是霓虹渐变中的红色为主色调,辅以紫色。

在这里插入图片描述

三. 风格基调

其实霓虹渐变的风格是很绚丽的,比如下图这样的:

在这里插入图片描述
当然这里我只是想用其中的色彩搭配,主体的风格还是以简约为主 —— 经久不衰的卡片式和大标题的设计语言。

在这里插入图片描述


写在最后

后续有关UI设计的更多内容,我会整理出来放到站酷上,感兴趣的小伙伴可以期待一下。之后来更新链接。

现在我已经从UI设计的层面初步实现了我的想法,之后就是动手编码了!

本文地址:https://blog.csdn.net/JZevin/article/details/108812625

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网