【个人网站开发 · 记录二】UI设计阶段 —— 设计角度分析如何去做一个个人网站
前言
当下的自媒体时代,体现在一个爱折腾的程序猿身上,那么最好的方式莫过于 —— 搭建自己的个人网站。网站上可以有自己的个人介绍,技术博客,项目总结,生活分享等等。简直是COOL !(面试神器有木有????)
就像上图这样,绝对原创设计,盗图必究!????
有了想法就去实现它!我们都知道传统的软件开发流程大致可分为分析,设计,编码,测试,部署,上线,运维等七大阶段。 这里就做一个链接合集,记录一下我本次项目的开发历程(有觉悟的童鞋建议跟我一起动手哦):
- 【个人网站开发 · 记录一】立项分析阶段 —— 产品角度分析如何去做一个个人网站
- 【个人网站开发 · 记录二】UI设计阶段 —— 设计角度分析如何去做一个个人网站
- 【个人网站开发 · 记录三】制定开发方案阶段 —— 技术角度分析如何去做一个个人网站
- 【个人网站开发 · 记录四】开发阶段一 —— VuePress + Gitee Pages 快速搭建和部署个人网站
我想大部分的程序猿对于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