× 1,388字 × 217阅

个人网站设计

2014年8月,第五代logo诞生之后,我便开始着手准备设计自己的个人网站。自从高中喜欢上摄影,继而对于个人品牌的意识开始觉醒,我就一直在这条路上不断摸索。虽然彼时已经搭建了个人网站,但由于对于代码一窍不通,设计个人网站基本上是个有头无尾的事情。不过我还是鼓起勇气大胆地去尝试了,于是留下了一些设计稿,整理整理留在我的设计历史里倒也不差。毕竟如果没有一次次无果的尝试,就没有后来突破性的成功——「我的个人主页设计」「新年新网站」。所以现在回顾起来比起遗憾,感受到的更多是感恩。

首页和关于页面
2014.09.06 首页和关于页面

因为一直喜欢简约风格,所以首页采用了最简单粗暴的列表式菜单设计。正常状态下是「黑白背景+英文」,鼠标悬停时变为「彩色背景+中文」。那时候我的英文名还是Cyan Chen,Cyan被我解释为Creative、Youthful、Active和Natural。而菜单则分成关于、作品集、联系和博客。关于页面是个单页面,设计起来也没什么难度,仅仅把文字一股脑儿地贴上去罢了。现在看起来,当时的设计稿没有两端对齐,惹得处女座强迫症发病。

重新设计首页
2014.09.27~09.28 重新设计首页

应该是对之前的设计不甚满意,在沉淀了大半个月之后,我在继续个人网站设计时选择了重新设计首页。也可能是我有了新的灵感,毕竟年月太过久远,我已经记不清了。总之,我利用了logo里的六边形创作出了新的菜单样式,历经十个版本,最后敲定。只是现在的我看起来更喜欢第九版。大概当时更爱衬线体,而现在觉得非衬线体更好看些吧。但个人喜好就像流行趋势,总是一阵阵轮回,所以才会有更迭,才会有更多的可能性。

第九版首页
2014.09.28 第九版首页

看得出来彼时我很爱阴影,设计首页菜单时采用了,又应用在了内页的顶部菜单上。我做了三个版本,现在的想法跟当初的选择一致——第三版。不过我会把左侧的logo做成悬停时从透明变为白色,这样更醒目些。

内页菜单
2014.09.28 内页菜单

当时对于网站结构我是这么想的——除了博客,其他页面都是独立页面,采用上面的内页设计。而博客是个特殊的存在,因为它包含更多内容,而且本身就自成一体。现在我的博客也是放置于二级域名之下,而不像摄影页面放在二级标题下面。于是按照这个思路,我抛开之前的所有设计定式,重新思考了适合博客的设计。

博客首页
2014.09.29 博客首页

那时候我果然很喜欢衬线体啊,连中文菜单都为了配合日语字体而选择了繁体,效果还出奇得好,文化格调一下提高了很多。不过为了跟首页以及其他页面保持更好的统一感,我还是忍痛割爱放弃了这个版本而重新设计了新的博客首页——结构上差不多,只是页首页尾都与其他页面呼应,并最终落实在了博客文章内页的设计上。

博客文章内页
2014.09.30~10.03 博客文章内页

「上一页」「下一页」的箭头也配合logo里的六边形元素设计成了半个六边形。至于博文内页的内容,除了保留最基本的一些数据比如日期、阅读数、评论数、分类、标签以及评论区域,只是在最后放上了更多以往的文章供读者选择继续阅读。这么想来那时候已经在考虑User Experience还真是时髦,哪像现在的个人博客设计更倾向于讨好自己。

转眼整整四年,虽然有一搭没一搭地写着博客做着设计,但仍旧取得了一点点令自己欣慰的成绩。我不想说坚持就有回报,因为感受到的更多的是「念念不忘,必有回响」。做自己喜欢的事是那么的自然,不用纠结坚持不坚持、合适不合适、做得好不好,只要去做就会觉得快乐。人生苦短,不就是追求快乐平和么。

这几天整理网盘里的设计文件夹,发现个人品牌里只有logo和签名,才发现搬家到Bitcron以来因为自己写主题的关系,每次换新主题都不再保留原始截图,而是用主题宣传图取而代之。再者以前也没有保留截图的习惯,都是东一榔头西一棒槌地按照博客平台记录,时间也不甚准确,故而决定统一整理一下,顺便给重新开始保留截图来个开幕式。 ※配合「博客编年史」浏览效果更佳。 ※此文章仅记录博客主题,个人网站首页更迭请参考「我的个人主页设计」。 2009 Blogger 2009.03.07 Blogger 2009.04.03 Blogger 2009.04.24 Blogger 2010 MSN Space 2010.02.16 MSN Space 2010.02.22 MSN Space 2010.03.26 MSN Space 2010.05.11 MSN Space 2010.08.13 MSN Space 2011 Blogger/WordPress 2011.01.24 Blogger 2011.03.22 Blogger 2011.11.24 WordPress 2011.12.30 WordPress 2012 WordPress 2012.01.01 WordPress 2012.01.06 WordPress 2012.02.04 WordPress 2012.04.05 WordPress 2012.04.06 WordPress 2012.04.27 WordPress 2012.05.27 WordPress 2012.10.28 WordPress 2013 WordPress/Blogger/FarBox 2013.02.18 WordPress 2013.06.14 Blogger 2013.12.26 FarBox 2017 Bitcron 2017.06.09 Bitcron 2017.07.21 Bitcron 2017.07.24 Bitcron 2017.07.26 Bitcron 2017.07.31 Bitcron 2017.09.20 Bitcron 2017.10.24 Bitcron 2017.11.13 Bitcron 2017.12.13 Bitcron 2018 Bitcron 2018.03.03 Bitcron
点击加载Disqus评论