一个拖延了一年的网站，一直没有正式上线。但是今天他将正式开始回归。

一如既往，采用简洁的界面，强烈的对比与硬朗的线条。

Coming Soon!

既然我们已经做了这么多的项目，那有一些经验我觉得还是值得跟大家分享一下。

关于设计

对于大多数网页设计师来说，设计可能就像平面设计一样，排版，调色即可。但是这里我要说一下网页设计与平面设计有非常大的不同，其中最不同的一点就是，网页设计是有精度的，不仅仅要对大版面考虑精度，对于细节同样需要考虑。甚至是文字的使用与字体大小 ，行距等。

其中的计算我在以前的文章中都有介绍。

前端开发手册之设计篇 里面详细的讲解了关于字体与设计时应该计算分格的问题。

前端MVC – PSD设计篇 里面也同样讲解了关于PSD转HTML时应该注意的问题。

我这里以GlobalMakret Web Design 2011为实例，这是设计稿（已经去除辅助线与标尺）：

关于前端开发

在完美的设计之后，就到了实践的步骤，让设计稿动起来。

在这里首先要说一下，关于字体的差异，在PSD转HTML时一大问题就是字体不能完全转换，因为浏览器渲染的问题，不同的浏览器里对字体的渲染并不相同。所以这在设计时同样需要考虑的问题。

先看图，开发后的HTML页面（Win7 Firefox3.6 截图）：

可以看到Win7对于字体的渲染效果还是非常不错的，由于使用了ClearType技术，对字体的渲染几乎可以达到PS里的锐利效果（对于IE效果会更好些，IE对字体的渲染一直都不错）。

重叠

设计就让他完美的去实现，这才是我们的目的，不然设计师费了那么大的力气设计的作品就这样被糟蹋了肯定会骂娘的~

这是把两加图（设计稿与浏览器截图）重叠后的效果图，从图可以看到，图片是肯定可以Perfect Pixels！但是文字的确非常难，但是我们也一定要至少保证首字母是应该重合的或者差不多重合，由其是行距，这行关键，因为设计就在于这几PX的版本中，如果这都无法保证，那就相当于没有设计一样！

问题

图中依然可以看到有些问题的存在，就是更改，在设计时由于不能把信息提供的准确，而最终导致终稿与实现的还是有差异，不要小看这一点点差异，对于精益求精的我们来说，是非常难以忍受的，因为很可能这样就没有辅助色，或者没有了中灰色！或者由于格的间距发生变化，留白就会了现差异，这就严重的影响了视觉效果。

在现在来说，在设计之初提供的东西非常有限，都喜欢做完后再添加东西。这点要在平时尽量的去灌输思想，并且在实践中让大家更默契才能减少问题的发生。优质的产品是源于团队的默契！

（由于XP对字体的渲染与Win7相差比较大，所以在XP下不开户ClearType，只能保证80%的相似度。）

后计

设计一定要将他完美的实现，实现一定要更精确！

所有简单的事情，把它做的精细就是完美。

有相关问题欢迎与我讨论联系方式

YSjia

也许这些文章您也感兴趣:

• 前端开发手册之设计篇
• 商业用图图库，包括一些免费的图库
• 世界500强牛企英语面试精彩问答

GlobalMarket Web Design 2011

设计的原则就是精简与合理的信息规划。

在这次改版中应用一大量的纯色设计，按合理的图文比例在保持页面简洁。

干净的页面让用户获得更舒适的浏览体验。

也许这些文章您也感兴趣:

• Perfect Pixels
• GlobalMarket.com设计稿
• 记录 – 三年间为公司做了哪些事
• GlobalMarket.com改版
• 微言重听之全民设计师

今天在翻查自己的作品时，看到了当初为TWONET设计的一个老版本，又勾起了很多回忆。

清幽淡雅的风格，简洁与干净。

由于客观的限制条件1.显示器 2.浏览器 3.现代技术的存在所以你必须去迎合这个时代网页设计所具有的特殊情况。

而此篇文章，不是教你如何去做网页设计，而是从合作的角度对分析你在前端开发中的角色。

在充分理解需求之后，完成设计稿。在完成设计稿后，并不是设计师的任务终结（如何去与需求人员交涉自己去搞定，这里咱不谈）！下一步，你需要做的就是把你的设计移交到网页重构师（搭建HTML与CSS的）帮你去实现。

而在这之前，你还有几样工作去做：

详细标注你的设计稿

这是一件可以说“繁琐”的过程，因为你也许对这些已经了如指掌，但是并非所有人由其是你下一步合作的人都明白。所以耐心的标注你的细节是非常重要的。由其是字体、字号与颜色值等。

进行简单的描述

网页设计与广告媒体的设计的不同之处，就是在于其精细度。又因为在不同浏览器下字体解析会有差别，所以这个精细是有一个范围值的。

简单的计算

这里大家可能注意到了，图片框为什么是99px呢？

99 = 90+3+4+2

width = image width + padding-left + padding-right + border

为什么不是一个双数呢？

我们来看，在整体宽度为960的情况下，想要产品得到最好的展示，而又不能太挤（同时要考虑文字）

这样算下来就是：960 = 52*7 + 99*6 +2

要注意这里的图片与图片之间的间距是双数，主要是为方便padding的拆分。

所以在满足整体宽度的同时也需要对其进行一番计算这样前端开发人员在制作时才能更省时间，更快速。同时也是最大的限度保证你的设计稿与制作出来的产品Pixel Perfect！

在设计的时候需要最大限度的保证可行性，因为一但返工，这就不是一个人的事，所以在把自己应该做好的事情做完，在合作中减少摩擦。

技巧：善于应用切片或者辅助线等（包括置入比例标记与标尺）计算工具可以事半功倍！

上图已经是分割的非常精细，包括column width与padding都已经划分完，平时设计时如果非特殊情况，最后这一步设计师应该是可以选择性的制作，重构师也不能太懒了吧，总得做点东西吧，哈哈。

这里推荐一款度量软件，可以快速的度量间距，虽然功能还是很有限，但是相信作者会不断的完善，点击查看。

虽然上面会耗费很多时间，但是你会发现效果也是很明显。就像写开发文档一样，得到好处不是你一个人的，而是大家的！

相信你会找到合适你自己情况的合作方法。

也许这些文章您也感兴趣:

• Perfect Pixels
• 微型设计专用工具Dorado试用
• 前端开发手册之需求分析
• GlobalMarket Web Design 2011
• 微言重听之美工刀

GlobalMarket邀请球王来中国的邀请函。

也许这些文章您也感兴趣:

• DBank试用
• GlobalMarket Web Design 2011
• GlobalMarket.com设计稿
• Perfect Pixels
• GlobalMarket

为YSlove.net重新设计了一个版面，经过反复的思考，最终我还是选择了深色系。在原有的基础上进行深化，加入更多我喜欢的元素，与风格化的元素，所有的元素都是自己画出来。感觉更亲切些。

世界充满新的挑战，但是我们从来没有停下脚步，为了生存，同时也是为了我们的理想与希望。

几乎每天都面对着挑战，心也慌过，思想也徘徊过，但是最终还是坚持下来了，不容易的一年多。

为了记念，也是为了怀念。

一个与众不同的策划网站，更加风格化，个性化。

从个性化入手，整个网站以名片的设计理念，把一种“与众不同”的思想表达出来，除了加入现代气息的边框与商务的衬底，更注重布局上的合理性。

一切从简，一切直观可用。

也许这些文章您也感兴趣:

• GlobalMarket Web Design 2011
• GlobalMarket.com设计稿
• Perfect Pixels
• GlobalMarket
• 记录 – 三年间为公司做了哪些事

由于iPod的性能很好，但是屏幕毕竟是有限，看看他们如何各出奇招来应付~

Yahoo

Yahoo的“选卡”用的炉火纯青。保持着简洁的同时保证量的需求。

BBC

AOL

CNN

这个我承认，可能是我人品不好，打不开~:(

Amazon

非常简洁，但是与线上网站的风格又很搭配。

Walmart

Google

不知道那块白是用来干嘛的，也许是可以把ipod Safari的URL输入框撑上去~

iGoogle

精简的同时在细节上依然让人感觉到Google的强大。

Bing

这风格，真潮啊~ 中文站也太简单了点，感觉太不用心了（看没有像Google那样留白，所以浏览器的搜索框不能撑走）。

Apple

也许Apple认为本身网站已经很“Mobile”化了，不需要单独制作了。看，这么小的屏幕依然整齐有序，主次分明~

Microsoft

说实话，刚打开时我真以为打错网址了。的确，现在的Microsoft更像一个B2C或者B2B的网站。

IBM

传说中的“巨人”IBM的网站我觉得非常好，与线上站结合的非常紧密，很用心的优化，还有字体大小的细节。并且这是我看到唯一一个有“BETA”标签的网站。

Godaddy

没事我会去观光一下，GD的iPhone的软件做的挺好把实用的功能都放上了。

中国的网站Tom，QQ，Sina等都还是普通模样，没有对iPod或iPhone的浏览进行优化，只有sohu的网站打开后“与众不同”

不知道为啥，这字怎么这么大，而且还有显示不全… …囧

Kong.net

空中网一直都是手机上网必去的地方，其对手机浏览的优化我觉得也是最好的，看起来很舒服。

也许这些文章您也感兴趣:

• 质感风暴
• 佛联咨询公司设计稿（新闻篇）
• GlobalMarket Web Design 2011
• TWO IT-Services Web Design
• GlobalMarket.com设计稿