Give'n'Go: 用CodePen完成Dribbble画作
Give ‘n’ Go是Chris Nager在Tumblr上开了的Gallery，专门用来展示用HTML,CSS和JavaSript代码生成的相同效果的画作。Chris选择使用CodePen这个来实现最终效果及相关代码的展示。话说CodePen的插件效果真的是无缝的，效果相当好。而且如果是一个UI控件，就可以直接在画布上实现最基本的交互效果。
如下图，左边是Dribbble上的PNG原图，右边是代码生成的实时预览效果。
对于设计师来说，用这种方法来学习HTML5和CSS3的技术就会有趣很多吧。
另外，由Dribbble想到曾经看过一篇文章的一个观点是“对Dribbble说不”。
很多产品设计师喜欢在创作之前去Dribbble上寻找灵感，甚至把别人的样式布局照抄，却没有从自己产品的实际需求出发去做设计。要知道Dribbble就像是时装店的一个橱窗，你经过时可以看到很美很有魅力的最终效果的呈现。但穿在模特身上好看的衣服穿在你身上未必合适。产品设计师就像一个裁缝，要想在最终呈现给客户美感的同时还要舒适合身，就必须在一开始就为客人量体裁衣，了解客人的习性及喜好，在加上自己积累的对美的认知及实现技巧，来完成一件不仅好看而且能够穿得合身叫人爱穿的”衣服“。
所以说，作为一个互联网产品设计师，你在做产品原型的时候不是好看就可以了，原型最终要的是在产品正式开发之前，就让用户能够体验到产品的整个使用过程，也就是交互的部分。只有把这个部分做顺了，产品才可能好用。
Dribbble是别人的产品最终的模样，在Dribbble上体现不出那些设计师在设计过程中的思考，他们的产品需求，所以说如果就只是把他们的漂亮界面搬到你的产品上，很可能会出问题。
这也是我推荐Give ’n’ Go的另一个原因，因为当你能够使用代码直接实现交互流程时，你自己就能知道你的设计在实现的层面有没有问题，并且可以更快速直接地进行修改。当然，设计之初使用纸和笔对于整体思路进行勾勒也是不可省的。
Give ‘n’ Go是对公众开放的，如果你也用CodePen完成了同样的再创作，可以提交给他们，若品质达标，你的作品也将能在Give ‘n’ Go这个在线画廊里呈现。
http://give-n-go.tumblr.com/
原文链接：http://blog.witmin.net/?p=2715
如下图，左边是Dribbble上的PNG原图，右边是代码生成的实时预览效果。
对于设计师来说，用这种方法来学习HTML5和CSS3的技术就会有趣很多吧。
另外，由Dribbble想到曾经看过一篇文章的一个观点是“对Dribbble说不”。
很多产品设计师喜欢在创作之前去Dribbble上寻找灵感，甚至把别人的样式布局照抄，却没有从自己产品的实际需求出发去做设计。要知道Dribbble就像是时装店的一个橱窗，你经过时可以看到很美很有魅力的最终效果的呈现。但穿在模特身上好看的衣服穿在你身上未必合适。产品设计师就像一个裁缝，要想在最终呈现给客户美感的同时还要舒适合身，就必须在一开始就为客人量体裁衣，了解客人的习性及喜好，在加上自己积累的对美的认知及实现技巧，来完成一件不仅好看而且能够穿得合身叫人爱穿的”衣服“。
所以说，作为一个互联网产品设计师，你在做产品原型的时候不是好看就可以了，原型最终要的是在产品正式开发之前，就让用户能够体验到产品的整个使用过程，也就是交互的部分。只有把这个部分做顺了，产品才可能好用。
Dribbble是别人的产品最终的模样，在Dribbble上体现不出那些设计师在设计过程中的思考，他们的产品需求，所以说如果就只是把他们的漂亮界面搬到你的产品上，很可能会出问题。
这也是我推荐Give ’n’ Go的另一个原因，因为当你能够使用代码直接实现交互流程时，你自己就能知道你的设计在实现的层面有没有问题，并且可以更快速直接地进行修改。当然，设计之初使用纸和笔对于整体思路进行勾勒也是不可省的。
Give ‘n’ Go是对公众开放的，如果你也用CodePen完成了同样的再创作，可以提交给他们，若品质达标，你的作品也将能在Give ‘n’ Go这个在线画廊里呈现。
http://give-n-go.tumblr.com/
原文链接：http://blog.witmin.net/?p=2715
还没人转发这篇日记
