这是一篇迟到的文章，因为网站更新本身就被我拖了断断续续大概半年时间，而我一直不知道怎么组织从jjying.cn搬到IconMoon.com的整个过程。现在就让我停止纠结，把前前后后就当流水帐一样随便记录一下，权当留个纪念。
为神马换域名
由于年初传说点西恩的域名将来不能再给个人注册，转到国外又未果之后我决心换一个.com的域名，同时对于当初自己很傻很天真为了便宜几十块而没有直接选择.com域名而感到无比后悔。
网站名字的由来
既然域名要换掉，所以决心顺便也在域名里去个人化，所以纠结了很多和icon、ui有关的域名。在godaddy上搜索了好久之后草草定下了IconMoon这个名字。这个名字的缺点是m和n比较混，输起来容易错，但是当时我也不知道.cn域名能继续用多久所以也就没有想很多，迅速买下了域名。
第一个Coming-Soon页面
域名买下之后在服务器上摆了一个coming soon页面。显然，还没有设计logo，颜色也是暂时订得，很草率～
整站风格
Coming soon页面放好，原先的域名上也加了指向iconmoon.com的链接之后开始静下心来做新页面的设计。最一开始的想法是用一些超大的字体修饰首页，并且是单页面，不再分portfolio、home、about页面等等。于是有了下面这个未完成的设计（概念稿的bokeh背景借用自
envato.com，申明一下）：
整个页面的结构本来也想和
envato主页一样，fixed的背景，不断往下滚可以查看其他section。不过我当初还想过要在顶部放一个fixed的导航栏方便导航。
后来觉得这样作品数量一多页面会很长，所以决定把作品的部分放到slider里面，其他的内容如about和contact等继续安排在下面。并且同时也重新斟酌了配色方案，希望用一个能让人想起“夜晚”的颜色来配合IconMoon这个月亮主题，于是改成了下面这个样子：
可以看到和现在这个页面的风格已经有一点点像了。整体布局是想用白白的底色让页面看起来更干净，字体方面使用了
Vegur，这个字体和Myriad Pro长得像孪生一般但完全免费，而且各个粗细比较全。
第二个Coming-Soon页面
虽然首页还完全没有确定，但是对新的配色和Logo还是比较满意，于是把之前的Coming Soon页面小改了一下，期望和最后发布时能靠近一些。
Logo设计和Icon设计
网站Logo方面从一开始的猫头鹰到简单的月亮形状，字体从Vegur试到了Yanone Kaffeesatz，最后决定采用PT Sans这个免费字体（这年头，设计优良的免费字体也越来越多啦，哈哈哈）当然这也想到了其他方面的问题，比如越来越流行的webfont出现之后我们已经可以在网页上使用越来越多的字体选择，而webfont方面我一开始就打定主意用
Google Font Directory，所以Logo方面也希望能和页面文字统一，于是尝试了几种Google提供的免费字体。
喜欢PT Sans的原因是他显得还蛮大气的，但是大尺寸下面显得不够精致。所以在PT Sans Bold的基础上我调整了字体粗细，在边角上增加了倒角
最后，在听取了一些其他设计师的意见之后又细调了字间距。为了增加趣味性和识别性，把M字形的两条腿外折了一下，做成了现在的样子，整个演变过程大致如下：
以月亮加圆形外框的Logo设计确定了，我接着就把网站需要的其他图标也做了类似的处理
最终的首页设计
比起Logo，首页就纠结得多了，试了好几次之后都觉得不太满意，于是在辛辛那提的某个下午，我脑袋瓜一拍决定不再拖下去（虽然这之后还是用了3个月才全部设计、coding完），新开了一个PSD，省掉了很多内容，直接用上了更大片空白的页面，contact form之类的内容也直接砍掉，让首页的唯一重心放在了作品的预览图上：
这基本上就是现在的设计了。迅速定下之后我开始想About怎么写。。。
About页面设计
按照最初的设想，我本来指望about也在首页里展现，导航上点击About之后只是在主要的Slider里切换到一页介绍图片。但是后来发觉这个区域毕竟比较小，我想表达的内容似乎放不下。。。所以把原来在首页上想尝试但未能如愿的Vertical页面用到了About上，以吉祥物猫头鹰和一些圆点虚线为引导串起了所有内容。这里到比较顺利，基本上一气呵成，两天做完了大概的设计：
然后这个页面里的typo居然在最后发布网站的时候也没能看出来，被网友提醒了才发觉原来我连自己公司的英文全名都拼错了。。。。 >.<
前端代码
首页和About设计完成之后我就开始了coding
首页的代码没有沿用之前的内容，基本全部重写，除了作品图片之外用了3张图片，
一张是JPG的背景底图，作为《 body 》的背景，以center top的方式调用一次，作为定宽主内容区域content的背景又调用一次。
第二张是css sprite，8位色的png
最后一张是个24位外带alpha通道的透明png，包含了大背景云层之后的平铺图案以及浮在slider上面的两条细细的遮罩图片，用来营造图片滑动时的fade-in/fade-out感觉。
最近正好看到一篇关于网页上图片格式的文章，有兴趣的可以移步
淘宝UED如之前所述，网页上的标题字体调用了Google Font Directory里的
Yanone Kaffeesatz，这款窄窄的字体很吸引我因为在我眼里她很性感，就像一个骨感的、柔美的、高雅的芭蕾舞者一样啊！而正文部分的字体使用了
PT Sans Narrow，在保持了精致外形、同样高高瘦瘦的同时，可读性也算不错。
About页面代码
About页面的图片基本只有一张，长的比较疯狂，有3650像素，把背景和sprite都放在一起了。经测试在不少平台下会有问题，不过基本不碍事。不过后来把圆点虚线的背景镂空，露出底下一个fixed的纹理背景，所以整张3650像素高的图片都是透明了。
Blog代码
按照以前的习惯，Blog部分的样式是我在网站发布之后改动最多的，经常对细节部分的功能和样式纠结来纠结去，所以当首页和About完成的时候Blog我也就不那么急了，哪怕没做完，只有草稿日后补完都OK。所以本着这样的想法在Blog里面尝试了很多新的CSS属性和webkit动画，比起首页和about页面对非现代浏览器的兼容也是最差的。
最后把Bo-Blog的后台彻底改了一下，在源代码里去掉了很多我从来不用的功能，也基本宣告Bo-Blog以后的更新和我没啥关系了。。。
404页面
域名转移的时候使用了301重定向把原来jjying.cn直接跳转到了IconMoon.cn上，所以预计会有不少404错误，于是有用猫头鹰形象设计了一个
404错误页面：
PS. 这次注意了Archive，以前的主页除了blog部分可以通过这个地址查看：
http://iconmoon.com/jjying/index.html倒数计时页面
差不多都搞定只剩测试之后又做了一个简单的
倒数计时页面 :D
直到10年10月10号，终于正式发布了新网站～流水帐结束！
Tags -
网站 ,
上线 ,
发布 ,
随录 ,
设计 ,
前端