欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-19 10:04:17
文章目录前言一. 需求分析二. 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设计阶段 ????

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

一. LOGO设计

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

1.1 文字LOGO

采用字重较大的非衬线字体,然后做换行的处理,再加上能体现代码的元素 —— 双引号 ( " ) 和尖括号 ( > )
【个人网站开发  · 记录二】UI设计阶段 —— 设计角度分析如何去做一个个人网站

1.2 图形LOGO

图形化的LOGO也是提取了名称里的首字母CZJ,整体依靠同心圆之间的布尔运算得到。简洁干练!
【个人网站开发  · 记录二】UI设计阶段 —— 设计角度分析如何去做一个个人网站
组合起来的黑白灰三色效果分别如下:

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

1.3 彩色版本

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

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

1.4 响应式LOGO

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

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

二. 色彩搭配

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

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

三. 风格基调

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

【个人网站开发  · 记录二】UI设计阶段 —— 设计角度分析如何去做一个个人网站
当然这里我只是想用其中的色彩搭配,主体的风格还是以简约为主 —— 经久不衰的卡片式和大标题的设计语言。

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


写在最后

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

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

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