IconMoon 上线随录

这是一篇迟到的文章，因为网站更新本身就被我拖了断断续续大概半年时间，而我一直不知道怎么组织从 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.com 上，所以预计会有不少404错误，于是有用猫头鹰形象设计了一个 404 错误页面：

PS. 这次注意了 Archive，以前的主页除了 blog 部分可以通过这个地址查看：makeurl('http://iconmoon.com/jjying/index.html')

倒数计时页面

差不多都搞定只剩测试之后又做了一个简单的倒数计时页面 :D  

直到 10 年 10 月 10 号，终于正式发布了新网站～流水帐结束！