网页前端设计

导读：作为一个网页设计师，还有什么比没有创意、无法完成或结束设计项目感觉更糟糕的了。那令人沮丧，郁闷，并浪费我们的收入。

现在，想象一下，如果有一种神奇的、万无一失的技术，使我们在创意上的障碍立刻消失，并马上使我们充满创意和动手能力。

这真是太伟大了，不是吗？哦，太糟了，因为没有这回事。设计师的障碍在我们每个人身上都出现过，而且也没有什么简单的方法解决。下面这些事情你可以尝试一下。

1. 由内而外开始

每一个严肃的网页设计师都会告诉你，用精密的网格开始你的布局，做一些线框，看看文字在那些区块和分栏中的摆放位置。然后设置配色方案和设计主题，最后在那些细节处下工夫。

换句话说，我们被教导说，从大处开始，一路下来，直到细节处。

但我们知道，事情并不总是（或者我应该说，从不）这样子来解决的。一整天都盯着单调乏味空洞的网格，并不会帮助你前进一英寸。相反，那些充满灵感的网站内容会给我们许多好主意，让我们知道这些主题如何在一家公司网站上实现的。客户给我们的唯一的文字内容，只是一些从随处可见的网站上复制粘贴下来的“以人为本 用心服务 客户至上 服务第一”（原文是Lorem ipsum dolor sit amet，无意义的拉丁语，印刷工人用于展示字体特点）。

为什么不打破所有的规则，然后由内向外呢？设计一些小东西，比如一个表单按钮或一个“阅读更多”的链接。不要担心颜色；你可以随时更改。或选择一个从kuler或COLOURlovers拿来的调色板，做一些看上不错的东西；一些可以让你一看的、可装饰网站的东西。

首先尝试设计一个关键的细节，然后接下来的设计部分可能随之而来。

Dribbble，一个以设计项目中的小部件为特色的网站，向我们展示说，通过整体设计中的小部件而得到灵感是可能的，甚至我们不用看到整个布局。你可以把这作为你的工作原则，第一把焦点放在那些小东西上。

2. 解决问题第一

有时你找不到灵感有些很特殊的原因，你只需回头看看网站相册就能找到它。例如，你不能得到灵感是因为你的客户没有提供你任何内容，你正在清除一些诸如“以人为本 用心服务”之类的文字。或者可能客户的LOGO相当可怕，搞的你在边上无法设计任何好看的东西。

在这种情况下，最好承认问题并首先解决它。长时间内，我们都想看到自己作为设计超人出现，制作出来的东西都是好的。但是承认我们输出的质量取决于我们得到并输入的质量并没有什么错（众所周知的“如果进去的是垃圾，出来的还是垃圾”原则）

你该怎么设计一个网站，围绕着这个LOGO？

如果内容质量较差或根本不存在，要求你的客户雇佣网络复制作家（web copy writers）。如果他们现有的LOGO看起来很可怕，提醒他们注意一点，如果你能提供专业的LOGO/商标设计服务，还可提供额外的加价服务。

如果你不首先解决真正的问题，你就会冒着生成次品的风险，而且整个过程会非常令人沮丧。

3. 代码第一，设计其次

在设计一个网站的复杂过程中，设计通常在代码之前。像导航菜单或Javascript效果经常是在设计完成之后的事。但如果你在第一件事上（设计）卡住了，刚好可以适时的改变这一惯例，即使是你在遭遇设计障碍的时候。

颠倒顺序，从代码开始，然后为代码而设计，这可能不合常规。但是有条论据，这种方式能保证形式合乎功能，本来功能在可用性网站设计中就占据首位。

像解决一个迷宫，当你从结果开始时，设计有时会更简单。

有些实际的事情你可以做的是：

    在浏览器中设计，到下一步时才打开Photoshop。

    写jQuery脚本，你知道你会用到的那些，或那些脚本会成设计的主要吸引力所在，如幻灯片。

    编写“付款”表单代码（不要担心样式），注重在用户流程、信息架构、错误验证等等上面。

    开发自定义的WordPress主题，从模板页开始（archives.php，author.php等等）

4. 从设计元素开始

一个获得灵感最常见的方法是，简单找一些酷的东西放到你的设计中。很多设计都是开始于设计师找到一个漂亮的新字体、一张特殊的纹理图案、一组有趣的图标，或一项他们很想用的新的设计技术。

同样，这可能听起来不和直觉，“正确”的方法是为你的项目找到适合的设计元素，而不是周围其他方法。

字体选择会对你的设计有很大的影响，也是一个灵感的大来源。

但事实是，我们通常在工作中只有一定的自由。我们不应该害怕跟随我们的直觉和创意走。一些最好和最原创的设计都发生在创作者不害怕跟随他自己的灵感的时候，不管灵感在何处产生。

因此，组建一个字体、笔刷、纹理、照片的资料库，下一次你卡住时看看它们。这是一种破除设计师障碍最有效率的方法。你也可以检查下我的一个小项目，设计资源搜索引擎，它可以让你搜索到150个设计资源网站（咦，该不是在写软文吧）。

5.在盒子外面思考（直译）（原文如此，think outside the box，literally）

大多数创作/创意指南都会告诉你，当你遇到障碍时，你应该去Flickr看看落日和小熊猫的照片，或去散散步。虽然我最爱和小熊猫手牵着手在落日下散步，但我发现这是个困难的方法，对我的创作没有多少帮助。

相反，这里有些可靠的方法可以看看：盒子。

包装设计是灵感的一大来源。包装已经存在了几个世纪，不管是艺术和科学的包装都是未来几年的网页设计。任何谷物纸箱都要同另外50个包装竞争，吸引商店主的注意，所以你知道不管多么小的细节，没有哪个是凭运气来的。

像Dieline的博客就有大量的包装例子。

所以，到你本地的超市走走，或者去看看这些优秀的网站、博客和博客文章。

    The Dieline

    美国包装博物馆

    可爱的包装

    包装世界

    包装设计（Creattica）

    漂亮的富有表现力的包装设计（Smashing Magazine）

    50个漂亮的令人印象深刻的包装设计（Webdesigner Depot）

    包装设计灵感（Dzine Blog）

6. 复制（但不要偷窃）

现在在你开始给你的律师之前，让我说清楚这点：我根本不是在提倡抄袭。这里的关键在于理解你要复制的东西。单纯复制是不够的；如果你想成功，你要分析原件之所以成立的小细节。

 不要复制粘贴，放大到像素级学习是最好的。

比方说，你想要复制一个闪亮的、“web 2.0”的按钮（虽然我不建议加入这种已经成千上万的东西）。给页面截图，导入到Photoshop中，然后画一个空白的矩形，尝试近似的渐变、发光和阴影，直到你得到一样的外观。实验这些参数，当你的新按钮一点也不像原来的那个时，就有了原创的外观和感觉。重建形成事物外观的规则，而不是关心事物本身。钻研技术，你可以从你的同事那儿学习，可能甚至会比原来的更好。

7. 切换到另一个项目

有时，不管你在某事上如何努力工作，就是不顺利。这就是你应该休息一下、再开始其他事情的时间了。

这就是结构性拖延的精髓了：用“不想做”这种感觉为动力，做其他事情。有时，完成第二件事可以推动你，甚至刺激你做原来的任务！

8. 做一些让你感觉良好的事

我答应在这篇文章中不会提到新世纪和敏感的东西，但我要提醒：你的心情对你的创作有很重大的影响。

阳光明媚的白色沙滩。。。还有更多的陈词滥调吗？我相信你能找到比这更漂亮的照片。

如果你心情不好，去打球、做饭、看功夫电影——任何让你快乐的事。这里的风险是，你可能更加心烦意乱，而不是集中注意力，所以我把这作为最后一个建议。

9. 得到反馈

这条建议并不真正适合那种你在一个空白舞台上扮演主角的情况。但如果你发现你在设计过程后期遭遇障碍，问问其他人，他们对设计的当前状态有何想法。不管他们说什么，总会帮助你向前进。

如果他们喜欢它，把这正面的反馈当作动力，并作为一个你走在正确道路上的标志。

如果他们不喜欢，问他们为什么。欢迎批评，并用它提高你的工作。有时只花上10分钟解决关键细节足够创造出一个完全不同的印象，并改变某人对设计的想法。

10. 重新开始

设计师最大的一个缺陷是，有时我们在涉及到我们的设计时，会变得太重视和激动。

有时重新出发，在几分钟内感到完全自由是你摆脱障碍所需要的，你会发现你甚至能使用部分或全部你已完成的工作，不管它是在这个或下一个项目中。所以不要害怕按下Ctrl+N（或Command+N）重新开始。如果新的设计也无法前进你还可以回到你原来的——那你有什么损失呢？

---